Dashboard

Description

• The My Account Dashboard displays user profile data, quick navigation links, and personalized content such as product recommendations and pro membership info.
• Built using Nuxt 3, Composition API, TypeScript, TailwindCSS, and Pinia.
• Fully responsive: optimized layouts for mobile and desktop.
• Internationalized using a custom useTranslation composable.

Purpose

• Present the user's key information (name, email, mobile, account ID) in a concise layout.
• Provide quick access to account-related features like order history, saved lists, preferences, addresses, and more.
• Display pro card status and allow users to show their personalized card.
• Surface personalized product recommendations.
• Support easy navigation through the sidebar and footer links on mobile.

Use Cases

• View Profile Info: Displays avatar (initials), name, email, mobile, and user ID.
• Show Pro Card Status: Tag and QR code button for users with a "Pro Card".
• Edit Profile: Quick link available on mobile.
• Access Account Features:
  • Order History
  • Reorder Items
  • Saved Lists
  • Stock Notifications
  • Pro Card Management
  • Addresses
  • Favorite Branch
  • Preferences
• View Personalized Product Recommendations: Carousel for desktop users.
• Explore Help Links: Links to FAQ, About Us, and "Need Help" support section.
• Sign Out: Clear button at bottom for mobile users.

Expectations

• All data-bound elements render conditionally based on authStore, monetateStore, runtimeConfig, and productStore.
• Mobile variant includes stacked button layouts and a simplified sidebar menu.
• Uses Tailwind classes for utility-first layout styling.
• Translation-ready across all labels and headings.

Developer Strategies

• Use defineAsyncComponent for dynamic loading of heavy UI components (TsCard, TsCarouselCardProduct).
• Leverage useDevice() for layout adaptation.
• Bind data via authStore, productStore, monetateStore, and runtimeConfig to ensure reactive rendering.
• Account links defined in account_links array with conditional rendering based on feature flags and store states.
• Utilize twMerge() for conditional Tailwind class merging.

TODOs for Developer

• Improve accessibility (ARIA roles, keyboard navigation in carousel and sidebar).
• Add error states and loading indicators for profile or recommendation data.
• Implement lazy-loading or suspense boundaries for heavy sections.
• Write unit tests for:
  • Mobile/desktop conditional render logic.
  • Store-driven elements (Pro card visibility, stock notifications, etc.).
  • Navigation and routing logic from button/link clicks.
• Add event tracking (e.g., "click_show_my_card", "view_recommendation_carousel").

API Endpoints

Action	Endpoint	Description
getUserDetails	GET /users/:userId	Retrieves user profile information.
getProCardStatus	GET /users/:userId/pro-card	Checks if the user has a Pro Card.
getAccountLinks	GET /account/navigation-links	Fetches configurable sidebar link data.
getRecommendations	GET /users/:userId/recommendations	Returns personalized product suggestions.
signOut	POST /auth/logout	Logs the user out of the session.

---

Components Used

Component | Description

Action	Endpoint
TsNuxtCard	Main container card with border and padding styling
TsRow / TsColumn	Grid layout for user info and buttons
TsTypography	Text rendering with responsive variants
TsButton	Action buttons (e.g., Show Card, Edit Profile)
TsTag	Status labels like "Pro Card-lid"
TsDivider	Section divider
TsContent	Dynamic content loader (for banners)
TsCarouselCardProduct	Product recommendation carousel
NuxtLinkWithLocale	Internationalized router links
TsIcon	Icon rendering in buttons and labels

---

Flow Summary

Render or Mount

• Fetch User Profile Data
• Uses authStore.user to retrieve: First and last name, Email, Mobile, Customer Id with GET /users/:userId → getUserDetails

• Displays "Pro Card-lid" tag and "Show My Card" button if the user has a Pro Card.
• GET /users/:userId/pro-card → getProCardStatus

Product Recommendations

• Conditionally render account features (Orders, Saved Lists, Preferences, etc.) based on:
  • runtimeConfig.public.featureFlags
  • authStore.user.account_type
  • productStore.is_stock_notify_tag_visible
• Renders a personalized product carousel for desktop users.
  • GET /users/:userId/recommendations → getRecommendations
  • Returns an array of product IDs for display.

Mobile Layout

• Adjusts layout and buttons for mobile vs desktop.

Logout Functionality

• When the user clicks the "Sign Out" button on mobile, they are logged out via authStore.signOut().
• API Used : POST /auth/logout → signOut