Feat: Implement Profile Page from Figma Design

[bertrandshema]

This PR implements the Profile Page for the ecommerce app, based on the provided Figma design. The Profile Page includes user information, order history, and account settings. The design is fully responsive and adheres to the specified design guidelines.

Tasks:

• Set up routing for the Profile Page in the React application.
• Create ProfilePage components.
• Apply styles to match the Figma design, ensuring consistency with the app's existing style guidelines.
• Ensure the page is responsive and looks good on different screen sizes.
• Fetch user data from the API and populate the Profile Page.
• Implement edit functionality for user information fields.
• Write unit tests for the ProfilePage components.

Acceptance Criteria:

• The Profile Page matches the Figma design in terms of layout, colors, and typography.
• All sections are implemented and functional as described.
• The page is responsive and works well on different devices.
• Edit functionalities are working as expected.
• Data fetching for user stats and recent activities is implemented.

Implementation Details:

1. Routing:

• Added routing for the Profile Page to the React Router configuration.
• Ensured that the route is protected and only accessible by authenticated users.

2. ProfilePage Components:

• Created components for different sections of the Profile Page:
• User Info: Shows user details such as email, phone number, and address.
• Update Info Form: Lists the user's past orders.

3. Styling:

• Applied styles to match the Figma design using Tailwind.
• Ensured consistency with the app's existing style guidelines.
• Implemented responsive design using media queries.
• Tested the page on various screen sizes to ensure it looks good on all devices.

3. Data Fetching:

• Integrated with the backend API to fetch user data.
• Used axios for API requests and handled loading and error states.
• Populated the Profile Page with the fetched data.

4. Edit Functionality:

• Added edit functionality for user information fields.
• Used controlled components and state management to handle form inputs.
• Implemented form validation and submission logic.

5. Unit Tests:

• Wrote unit tests for ProfilePage components using Jest and React Testing Library.
• Ensured coverage for all key functionalities and edge cases.

[netlify]

❌ Deploy Preview for dynamite-frontend failed.

Name	Link
🔨 Latest commit	18baef1
🔍 Latest deploy log	https://app.netlify.com/sites/dynamite-frontend/deploys/66a2889e9403750008de64f1