[FEAT] - SETTINGS PAGE -> Implement Subscription and Plan Overview Page

[crystal4000]

Description:

Implement a Subscription and Plan Overview page that displays the user's current subscription plan and detailed information about the plan, including benefits, project management, sharing and collaboration, management and security, and supports. The page should provide options for users to upgrade to a more powerful plan (Advanced or Premium) or cancel their subscription. Cancel and Upgrade buttons should be placed at the bottom of the screen for user action.

Acceptance Criteria:

1. The page should display the user's current subscription plan.
2. Detailed information about the current plan should be shown, including:
   • Current plan benefits
   • Project management
   • Sharing and collaboration
   • Management and security
   • Supports
3. Users should be able to upgrade to Advanced or Premium plans.
4. Users should be able to cancel their subscription.
5. Cancel and Upgrade buttons should be clearly visible and functional.
6. The page should be responsive across all devices (mobile, tablet, desktop).
7. Confirmation messages should be shown for successful upgrades or cancellations.
8. Error messages should be displayed for any issues during upgrade or cancellation processes.
9. Unit tests should cover all key functionalities.
10. Integration tests should ensure the page interacts correctly with the backend.

Expected Outcome:

A fully functional Subscription and Plan Overview page that displays the user's current plan details and provides options to upgrade or cancel the subscription. The page should include all required information and meet the acceptance criteria.

Purpose:

The Subscription and Plan Overview page will allow users to manage their subscription plans effectively, providing detailed information about their current plan and options to upgrade or cancel as needed.

Requirement:

1. Design implementation as per the provided Figma designs.
2. Integration with the backend API to fetch subscription details.
3. Display of current subscription plan details.
4. Options for upgrading to Advanced or Premium plans.
5. Option to cancel the subscription.
6. Functional Cancel and Upgrade buttons.
7. Responsiveness across different screen sizes.
8. Error handling and display of appropriate messages.
9. Confirmation messages for successful actions.

Task:

• Set up the Subscription and Plan Overview page component.
• Fetch and display current subscription plan details from the backend.
• Add detailed information about the current plan (benefits, project management, sharing and collaboration, management and security, supports).
• Implement options for users to upgrade to Advanced or Premium plans.
• Add functional Cancel and Upgrade buttons.
• Implement option for users to cancel their subscription.
• Integrate with the backend API for fetching plan details and handling upgrades/cancellations.
• Add form validation for any required inputs.
• Implement error handling and display of error messages.
• Ensure the page is responsive across all devices.
• Write unit tests for key functionalities.
• 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