[FEAT] - SETTINGS PAGE - Implement Subscription Cancelled Feedback Modal

[crystal4000]

Description:

Implement a feedback modal for when a user cancels their subscription. The modal should provide two options: Reactivate Subscription, which reactivates the current cancelled subscription, and Go to Dashboard, which navigates the user to their dashboard.

Acceptance Criteria:

1. The modal should appear immediately after a user cancels their subscription.
2. The modal should contain a message informing the user that their subscription has been cancelled.
3. The modal should have two buttons: Reactivate Subscription and Go to Dashboard.
4. Clicking "Reactivate Subscription" should call the API to reactivate the user's subscription.
5. Clicking "Go to Dashboard" should navigate the user to their dashboard.
6. The modal should be responsive across all devices (mobile, tablet, desktop).
7. The modal should follow the design specifications from the Figma design.
8. Unit tests should cover the functionality of both buttons.
9. Integration tests should ensure correct API calls and navigation.

Expected Outcome:

A feedback modal that appears after a user cancels their subscription, providing options to reactivate their subscription or go to their dashboard. The modal should function correctly, be responsive, and meet all acceptance criteria.

Purpose:

To provide users with immediate feedback and options after cancelling their subscription, enhancing the user experience and offering a quick way to reactivate if the cancellation was accidental.

Requirement:

1. Design implementation as per the provided Figma designs.
2. Integration with the backend API for reactivating subscriptions.
3. Navigation to the dashboard when the appropriate button is clicked.
4. Responsiveness across different screen sizes.

Task:

• Set up the feedback modal component.
• Display a message informing the user of their subscription cancellation.
• Add "Reactivate Subscription" and "Go to Dashboard" buttons.
• Integrate with the backend API for reactivating subscriptions.
• Implement navigation to the dashboard.
• Ensure the modal is responsive across all devices.
• Write unit tests for button functionality and API integration.
• 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