Comprehensive Improvements to Checkout, UI Responsiveness, and Error Management

[cheesea3]

This issue consolidates various enhancements and fixes needed across our platform to improve user experience, particularly for mobile users, and enhance the robustness of our checkout and authentication flows.

Description:

1. UI Adjustments and Mobile Experience Improvements:

• Typo Correction and Input Focus:
  • Update the second password input placeholder from "Confirms Password" to "Confirm Password." --
  • Adjust mobile input fields to prevent automatic zooming and enhance user input experience.

2. Checkout Flow and Popup Management:

• Fallback Handling for Checkout Popups:
  • Implement logic to close the Tebex checkout popup automatically when a user opts for the fallback URL, ensuring cleaner navigation and system robustness.
• Popup and Redirect Adjustments:
  • Ensure that on mobile, if a popup is used and the user completes the process through it, the popup is closed properly upon completion to maintain a clean state. --

3. Error Handling and Redirect Issues:

• Flash Cookie Integration and Data Flow:
  • Address the issue where flash cookies are not effectively reaching their intended endpoint in CheckoutProcess.tsx and AuthorizeForm.tsx from _index.tsx. Investigate the data flow from AuthForms to ensure that dispatched events are captured accurately in the checkout and authorization process. --
• 404 Error on Payment Completion:
  • Investigate and resolve the 404 error encountered by users post-payment on Tebex, ensuring that successful payments redirect users back to the appropriate success page without errors. --

4. Event Handling:

• Modal Positioning Adjustments:
  • Modify the positioning of modals dynamically when cookie banner settings are accepted, to better utilize screen real estate without the need to accommodate additional space.

5. Authentication and Security Enhancements:

• Steam Authentication Fallback:
  • Implement a callback mechanism to verify data correctly when using the fallback option for Steam authentication, preventing any incomplete flow states.
• Redirection After Authentication:
  • Ensure smooth redirection processes post-authentication, particularly when handling mobile redirects that might not traditionally follow popup flows.

6. General UI Enhancements:

• Spacing Between Components:
  • Adjust the spacing on the Y-axis between components across the platform to improve visual layout and readability, especially on mobile devices.

Goals:

• Enhance mobile user experience by adjusting input fields and correcting UI flaws.
• Streamline the checkout process by handling popups and redirects more effectively.
• Improve error handling to prevent and quickly resolve flow interruptions.
• Ensure robust authentication processes, especially when fallback options are utilized.
• Maintain visual consistency and usability across all devices.

Expected Outcomes:

• A more intuitive and error-free user experience on both desktop and mobile platforms.
• A secure, efficient, and user-friendly checkout and authentication process.
• Improved data flow and event handling that ensures all system components communicate effectively, particularly in complex workflows like payment and authentication.
• Improved overall aesthetic and functional coherence in the application's user interface.

These enhancements are critical to ensuring our platform remains competitive and continues to meet the expectations of our users, particularly those accessing our services via mobile devices.

[cheesea3]

Checklist:

1. UI Adjustments and Mobile Experience Improvements:

• [x] Typo Correction and Input Focus:
  • [x] Update the second password input placeholder from "Confirms Password" to "Confirm Password."
  • [x] Adjust mobile input fields to prevent automatic zooming and enhance user input experience.

2. Checkout Flow and Popup Management:

• [x] Fallback Handling for Checkout Popups:
  • [x] Implement logic to close the Tebex checkout popup automatically when a user opts for the fallback URL, ensuring cleaner navigation and system robustness.
• [x] Popup and Redirect Adjustments:
  • [x] Ensure that on mobile, if a popup is used and the user completes the process through it, the popup is closed properly upon completion to maintain a clean state.

3. Error Handling and Redirect Issues:

• [x] Flash Cookie Integration and Data Flow:
  • [x] Address the issue where flash cookies are not effectively reaching their intended endpoint in CheckoutProcess.tsx from _index.tsx. Investigate the data flow from AuthForms to ensure that dispatched events are captured accurately in the checkout process.
• [ ] 404 Error on Payment Completion:
  • [ ] Investigate and resolve the 404 error encountered by users post-payment on Tebex, ensuring that successful payments redirect users back to the appropriate success page without errors.

4. Event Handling:

• [x] Modal Positioning Adjustments:
  • [x] Modify the positioning of modals dynamically when cookie banner settings are accepted, to better utilize screen real estate without the need to accommodate additional space.

5. Authorization and Security Enhancements:

• [x] Steam Authorization Fallback:
  • [x] Implement a callback mechanism to verify data correctly when using the fallback option for Steam authentication, preventing any incomplete flow states.
• [x] Redirection After Authentication:

6. General UI Enhancements:

• [ ] Spacing Between Components:
  • [ ] Adjust the spacing on the Y-axis between components across the platform to improve visual layout and readability, especially on mobile devices.

[cheesea3]

TODO: Discuss with Tebex the potential need for an error_returnURL option in cases where the basket has already been paid. Currently shows "{Title: Something went wrong, Subtitle: The basket with that identifier has already been paid for"} to the customer on external checkout. Refer to: https://docs.tebex.io/developers/checkout-api/endpoints#baskets complete_auto_redirect: boolean - If true, the user will be redirected to the complete_returnURL if the basket has been paid for. Current complete_auto_redirect support: return_url, complete_url

Proposed: error_url e.g., body = {complete_auto_redirect: true, error_url: "https://store.imperfectgamers.org/error-notification"} error_url: string - The URL to redirect to if the basket has already been paid for.

Flow: If the basket was created with complete_auto_redirect set to true...

1. Check if the basket has already been paid for.
2. If not, redirect to the complete_returnURL.
3. If yes, redirect to the error_url to handle the situation on customer's store.

Pending investigation: IG team-member provided feedback: "I assume 404 at the end of payment is okay?" > "on the tebex page". Context: Tebex page referred: checkout.tebex.io. (Appears to be Laravel's default 404 error page) Confirm if this is reproducible and, if so, determine the impact on the user experience and the cause of the error.

Additional comments: Confirm if cancel_url is missed or undocumented within developer documentation. Discovery confirmed that the cancel_url is settable in the body of the request. Confirmed that the cancel_url is returned in the response with the complete_auto_redirect set to true (documented in developer docs). Refer to: https://docs.tebex.io/developers/checkout-api/endpoints#baskets-ident-packages

[cheesea3]

task 6 and and task 3b have been deferred to the next issue.