Customer Profile Page

Relevant source files

The following files were used as context for generating this wiki page:

• frontend/src/components/Profile/ProfileContent.jsx
• frontend/src/pages/ProfilePage.jsx
• frontend/src/components/Profile/TrackOrder.jsx
• frontend/src/components/UserOrderDetails.jsx
• backend/app.js
• README.md

The Customer Profile Page serves as a centralized dashboard for registered users to manage their personal information, monitor their shopping activity, and interact with the platform's features. It provides a comprehensive interface for viewing order history, tracking shipments, managing saved addresses, and updating account credentials.

This page is structured around a sidebar for navigation and a main content area that dynamically displays different sections based on the user's selection. State management is handled by Redux, which ensures a consistent and reactive user experience across the various profile management features.

Architecture and Component Structure

The profile feature is composed of a main page container (ProfilePage.jsx) that orchestrates the layout, and a primary content component (ProfileContent.jsx) that renders different views based on an active state property.

• ProfilePage.jsx: The top-level page component. It sets up the overall layout, including the site Header, a ProfileSidebar for navigation, and the ProfileContent component where the main functionality resides.
• ProfileSidebar.jsx: (Not provided in context, but referenced in ProfilePage.jsx) This component displays the navigation links (e.g., "Profile", "Orders", "Change Password") and controls the active state that is passed to ProfileContent.
• ProfileContent.jsx: The core of the profile page. It uses a conditional rendering approach based on the active prop to display one of several child components, each responsible for a specific feature.

The diagram below illustrates the component hierarchy of the profile page.

Features

The ProfileContent component acts as a router, displaying different views based on the active state passed from the sidebar.

Active State	Component/Feature	Description
1	Profile	Allows users to view and update their personal information, including name, email, phone number, and avatar. -
2	AllOrders	Displays a list of all orders placed by the user in a data grid, showing ID, status, quantity, and total price. Each order links to a detailed view. -
3	AllRefundOrders	Shows a filtered list of orders that are currently in the 'Processing Refund' status. -
5	TrackOrder	Provides a list of orders with a direct link to a dedicated tracking page for each order. -
6	ChangePassword	A form for updating the user's password, requiring the old password and a new password confirmation. -
7	Address	Allows users to add, view, and delete their shipping addresses. New addresses are added via a modal form. -

Sources: frontend/src/components/Profile/ProfileContent.jsx:75-218

Profile Information Management (active = 1)

This is the default view of the profile page. It allows users to update their core information.

Functionality:

• Display Data: Renders the user's current avatar, full name, email, and phone number from the Redux user state.
• Update Information: Users can modify their name, email, and phone number. A password is required to confirm the changes. The handleSubmit function dispatches the updateUserInformation Redux action.
• Avatar Update: Users can upload a new avatar by clicking the camera icon. The handleImage function sends the new image file to the backend API endpoint PUT /user/update-avatar and dispatches loadUser() on success to refresh the user data.

The following sequence diagram shows the process of updating a user's avatar.

Order and Refund History (active = 2, 3)

Users can view their complete order history and the status of any refund requests.

• AllOrders (active = 2): This component fetches all orders for the logged-in user by dispatching getAllOrdersOfUser(user.id). The orders are displayed in a DataGrid from Material-UI with columns for ID, Status, Quantity, and Total. Each row has a link to the detailed order page (/user/order/:id).
• AllRefundOrders (active = 3): This component functions similarly to AllOrders but filters the orders from the Redux store to only show items where status === 'Processing Refund'.

The data for the grid is formatted to be user-friendly, with prices converted to VND using the currency-formatter library.

Sources: frontend/src/components/Profile/ProfileContent.jsx:221-325, frontend/src/components/UserOrderDetails.jsx

Order Tracking (active = 5)

The TrackOrder component provides a simplified list of orders, similar to the main order history, but with a specific purpose: linking to the order tracking page.

• It uses the same getAllOrdersOfUser action to fetch data.
• The DataGrid includes a column with a MdTrackChanges icon that links to /user/track/order/:id for each order, taking the user to the TrackOrder details page.

Sources: frontend/src/components/Profile/ProfileContent.jsx:327-386, frontend/src/components/Profile/TrackOrder.jsx

Change Password (active = 6)

This section provides a secure way for users to update their account password.

Functionality:

• The ChangePassword component contains a form with three fields: "Old Password", "New Password", and "Re-enter New Password".
• On submission, the passwordChangeHandler function makes a PUT request to the /api/v2/user/update-user-password endpoint with the three password values.
• The backend handles validation and updates the password. The frontend displays a success or error toast based on the response.

This diagram illustrates the password change flow.

Address Management (active = 7)

The Address component allows users to manage multiple shipping addresses.

Functionality:

• Display Addresses: Lists all saved user addresses, which are stored as a JSON string in the user.addresses field and parsed for rendering.
• Add Address: A button opens a modal (open state is true) containing a form to add a new address. The form uses the country-state-city library to provide dropdowns for region and city/province. On submission, it dispatches the updatUserAddress Redux action.
• Delete Address: Each listed address has a delete icon that, when clicked, dispatches the deleteUserAddress action with the index of the address to be removed.

Sources: frontend/src/components/Profile/ProfileContent.jsx:446-639

API Endpoints

The profile page functionality relies on several backend API endpoints to manage user data.

Method	Endpoint	Description
PUT	/api/v2/user/update-avatar	Updates the user's avatar image.
PUT	/api/v2/user/update-profile	Updates user information like name, email, and phone number.
PUT	/api/v2/user/update-user-password	Updates the user's password after verifying the old one.
GET	/api/v2/order/get-all-orders/:userId	Retrieves all orders associated with a specific user ID.
PUT	/api/v2/order/order-refund/:id	Initiates a refund request for a specific order.
PUT	/api/v2/product/create-new-review	Submits a new product review for an item in a delivered order.

Sources: frontend/src/components/Profile/ProfileContent.jsx, frontend/src/components/UserOrderDetails.jsx, backend/app.js, README.md:200-217

Conclusion

The Customer Profile Page is a critical, feature-rich module that empowers users to manage their account and view their history with the e-commerce platform. Through a clean, tab-based interface and tight integration with the Redux state management system, it provides a seamless and centralized experience for all user-specific data and actions, from updating personal details to tracking orders and managing addresses.