Refine Modal Closability Conditions to Ensure Accurate User Interaction Handling

[cheesea3]

To ensure a seamless user experience and prevent data loss, we need to refine the modal closability logic within our application. This involves enhancing the accuracy of the conditions under which modals can be closed, particularly during sensitive operations like form submissions, third-party integrations, or while significant processes are underway.

Objective:

• Prevent modals from being closed while inputs are not empty, during active request calls, or when critical third-party integrations (e.g., Tebex checkout, Steam OAuth) are in progress.
• Ensure all related user actions are handled securely and without interruption.

Scope:

1. Tebex Checkout: Ensure modals do not close when the Tebex checkout process is active.
2. Steam Integration: Block modal closure during the active Steam OAuth popup.
3. Form Submissions: Prevent closing when there's unsaved user input or during an ongoing submission process.

Proposed Changes:

• Update State Management: Refine the CloseInterceptReason enum to include specific reasons related to third-party integrations.
• Enhance Modal Logic:
  • Implement a more robust checking mechanism within ModalWrapper.tsx that considers the new conditions.
  • Use the setCloseInterceptReason to dynamically manage modal behavior based on the current application state.
• UI Feedback:
  • Introduce visual cues or messages explaining why a modal cannot be closed if an attempt is intercepted due to unsaved changes or active processes.

Technical Implementation:

• Adjust the closeModal function to check for conditions like active third-party integrations or unsaved changes before allowing the modal to close.
• Utilize React state and effects to monitor changes in modal-related conditions and apply logic accordingly.

Testing:

• Implement unit tests to verify the correct handling of closability conditions.
• Conduct horizontal E2E testing to simulate user interactions and third-party integrations to ensure the modal behaves as expected under various scenarios.

Documentation:

• Update the developer documentation to reflect changes in the modal management logic and guidelines on how to handle new scenarios.

Acceptance Criteria:

• Modals should not close when there is an active Tebex checkout, Steam OAuth window open, unsaved input, or during an ongoing request.
• User feedback should be clear and informative when a modal close is prevented.

[cheesea3]

1. Signup Modal Behavior:

   • Issue: Confirm password field disappears if initial password criteria are no longer met, leaving modal in a "filled" state.
   • Suggestion: Automatically clear the confirm password if the first password input no longer meets criteria.

2. Main Screen Navigation:

   • Issue: Modal does not allow closing if navigated back to main screen without submitting login/signup data.
   • Suggestion: Implement cleanup functions before navigation to prevent modal lock-up.

3. Steam Activation Screen:

   • Observation: Modal refocuses the window if an attempt to close it is made during the Steam OAuth process. Closes correctly if the Steam popup is closed.
   • Status: Behavior is as intended and optimal.

4. Tebex Checkout Interaction:

   • Observation: After canceling a Tebex checkout, the modal can be closed without issues.
   • Status: Proper handling of modal state post-integration.

5. Cookie Consent Modal:

   • Decision: No implementation of closing prevention for unsaved settings in the cookie consent modal, as it is outside of the current scope.

6. Modal Exit Visibility:

   • Issue: Users report confusion on how to exit the modal despite multiple exit methods.
   • Suggestion: Enhance visibility or clarity of exit methods.

7. Form Input and Modal Closure:

   • Issue: Modal remains locked after navigating away from filled forms without submitting.
   • Suggestion: Ensure form states are reset on navigation to prevent this issue.

8. Username Selection Screen:

   • Observation: No issues when exiting the modal, whether the username input is filled or empty.
   • Status: Expected behavior, no action needed.

9. Handling Multiple Backend Calls:

   • Issue: Rapid clicks on the modal backdrop can close the modal during critical backend processes.
   • Suggestion: Prevent modal closure during backend operations to maintain workflow integrity.

[cheesea3]

• Signup Modal Behavior: Implement functionality to automatically clear the confirm password field if the initial password input no longer meets the criteria.

• Main Screen Navigation: Develop and integrate cleanup functions before navigation to prevent modal lock-up when navigating away from login/signup forms without submission.

• Steam Activation Screen: No action required; confirm that the current behavior (refocusing window during Steam OAuth) is documented as intended.

• Tebex Checkout Interaction: Confirm and document that the modal closing behavior post-Tebex checkout cancellation is as expected.

• Cookie Consent Modal: Document the decision to exclude unsaved settings in the cookie consent modal from modal closing prevention.

• Modal Exit Visibility: Investigate and implement enhanced visibility or clarity for modal exit methods to reduce user confusion.

• Form Input and Modal Closure: Set up state reset for forms upon navigation away from login/signup screens to prevent unintentional modal lock-up.

• Username Selection Screen: No action required; ensure that the behavior allowing modal closure with or without username input is documented.

• Handling Multiple Backend Calls: Create and integrate a mechanism to prevent modal closure during ongoing backend operations, especially when multiple sequential processes are involved.