[FEAT] - SETTINGS PAGE -> Implement Cancel Subscription Confirmation Prompt Modal

[crystal4000]

Description:

Implement a modal that prompts users to confirm their decision to cancel their subscription. The modal should provide two options: Keep Subscription and Cancel Subscription. The Keep Subscription button will close the modal, allowing users to continue with their current subscription, while the Cancel Subscription button will proceed with canceling the user's subscription.

Acceptance Criteria:

1. The modal should be triggered when users choose to cancel their subscription.
2. The modal should contain a clear message asking for confirmation to cancel the subscription.
3. There should be two buttons: Keep Subscription and Cancel Subscription.
4. The Keep Subscription button should close the modal without making any changes.
5. The Cancel Subscription button should cancel the user's subscription and close the modal.
6. The modal should be responsive and accessible.
7. Appropriate success or error messages should be displayed based on the outcome.
8. Unit tests should cover the modal's functionality.
9. Integration tests should ensure proper interaction with the backend for subscription cancellation.

Expected Outcome:

A functional confirmation prompt modal that provides users with a clear choice to either keep their subscription or proceed with canceling it. The modal should be user-friendly, responsive, and accessible, ensuring a smooth user experience.

Purpose:

The confirmation prompt modal will provide a final safeguard against accidental subscription cancellations, ensuring that users consciously confirm their decision.

Requirement:

1. Design and implement the confirmation prompt modal as per the provided Figma designs.
2. Ensure the modal contains a clear confirmation message.
3. Implement two buttons: Keep Subscription and Cancel Subscription.
4. Integrate with the backend API to handle subscription cancellation.
5. Ensure the modal is responsive across all devices.
6. Implement error handling and display appropriate messages.
7. Follow accessibility guidelines for modal implementation.

Task:

• Set up the confirmation prompt modal component.
• Add a clear confirmation message to the modal.
• Implement the Keep Subscription button to close the modal.
• Implement the Cancel Subscription button to cancel the user's subscription and close the modal.
• Integrate with the backend API for subscription cancellation.
• Ensure the modal is responsive across all devices.
• Add error handling and display appropriate messages.
• Write unit tests for the modal's functionality.
• Conduct integration tests with the backend.
• Perform manual testing for responsiveness and accessibility.

Picture of the corresponding component/page of the ticket from the Figma:

Figma Link:

• Figma