In this project, you will integrate several components you have built in previous projects into a comprehensive Settings page. This page includes user account settings, notification preferences, security settings, and billing information.

As this challenge is a combination of other sections or components, you should build them first to ensure all states and requirements are covered.

Implementation Requirements

The requirements that each component has to fulfill remains the same – you should refer to them in their individual briefs and ensure that their functionality remains intact after integration:

• Account Settings Section
• Password Section
• Notifications Settings Section
• Billing Information Section
• Billing Plans Section
• Billing History Section

On the page level

• Page layout rules: Apply standard page margin and padding rules as per the design specifications. Take note of the spacing between sections as well.
• Static copy and asset alignment: While the component used remains the same as the list above, some of the assets, icons or copy might have changed. Ensure they are aligned, especially for the sections with static content and assets.
• Placeholders: You may leave the redirection links empty for any unspecified buttons or links.
• Cross-browser and device compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari, and for all stated device breakpoints.

Dynamic content integration

While some of these sections may have been implemented previously, ensure the dynamic content update is working correctly after the integration:

• Billing plans:
  • If the user has not filled their billing information, display the prompt for them to do so.
  • Then, lead them to the "Billing" tab, scrolled to the "Billing Information" section.
  • Once the billing information section is filled, if there is an immediate payment required (e.g. upgrades), a payment is triggered.
  • If the user tries to leave in the middle of the process, display a modal for them to confirm that they will cancel their upgrade before leaving.
• Payment history: Any new payments should have information correctly updated onto the Payment History table

[Stretch goal] Integration with actual payment gateway

• Integrating with a payment gateway like Stripe is usually free, with fees incurred upon transaction. You are recommended to try it out as part of practice. You can use the standard test card number "4242 4242 4242 4242", which is a well known placeholder used in testing payment transactions. Stripe will not charge you for this because they recognize it as a test card.