Account Preferences

Description

• The Account Preferences page allows users to manage how they wish to receive updates and communications (e.g. email, SMS, push).
• Built with Composition API, TailwindCSS, Pinia Store, and Nuxt 3.
• Responsive design with dynamic component rendering based on data availability and device type.

Purpose

• Allow users to view and update their contact preferences for different categories (order updates, offers, etc.).
• Enable communication language selection for emails and notifications.
• Improve personalization and compliance with user choices regarding notifications.

Use Cases

• Update Notification Preferences: Toggle contact channels (email, SMS, push) for categories like order updates and offers.
• Select Communication Language: Choose the preferred language for communication.
• Load Preferences on Page Load: Show previously saved preferences upon visiting the page.
• Graceful Loading: Spinner indicates data is being fetched before rendering preferences.

Expectations

• Display fallback spinner (TsLoadingCircularSpinner) until profile and contact_preferences are loaded.
• Render a list of preference categories using accountStore.preference_order.
• Exclude specific preferences like mail_catalogues from the list.
• Use responsive layout (e.g., grid, flex) for toggles based on the device.
• Show language selection via TsSelectBox if preferred language is available.
• Each toggle update triggers handleUpdateContactPreference, which logs the event and updates the store.

Developer Strategies

• Use defineAsyncComponent for lazy-loading components (TsToggle, TsSelectBox, etc.).
• Clone user profile and preferences from authStore into accountStore for better separation and reactivity.
• Use useTranslation() for multilingual label rendering and i18n support.
• Disable toggles conditionally (e.g., for order_progress if toggler is disabled via authStore).
• Monitor and reactively update UI based on changes in authStore.user using a watch().

TODOs for Developer

• Add accessibility enhancements (e.g., aria-label on toggles).
• Improve fallback when contact_preferences are not available or empty.
• Add error handling and retry logic if initialize() or fetchPreferredLanguage() fails.
• Unit test handleUpdateContactPreference to verify GTM event logging.
• Extract preference_order logic into a composable/store to simplify logic.
• Add feature to reset preferences to default.

API Endpoints

Action	Endpoint	Description
fetchPreferredLanguage(userId)	GET /customers/${cutomerId}/preferred-language	Retrieves the user's currently selected preferred communication language.
updatePreferredLanguage()	POST /customers/${cutomerId}/preferred-language	Updates the preferred language based on user selection.
updateContactPreferences()	GET /customers/${customerId}/contact-preferences	Saves toggled contact preferences to the server(method stub in store).

---

Components Used

Component | Description

Action	Endpoint
TsNuxtCard	Card layout component used for grouping sections.
TsTypography	Typography utility for headings and text blocks.
TsToggle	Toggle switch for enabling/disabling preferences.
TsLabel	Custom label wrapper around toggles for layout and style.
TsSelectBox	Language selection dropdown component.
TsLoadingCircularSpinner	Spinner shown while data is loading.

---

Flow Summary

Step: 1

• Show TsLoadingCircularSpinner if accountStore.profile.contact_preferences is not yet loaded.

Step: 2

• Once loaded, render a TsNuxtCard per preference category (excluding mail_catalogues).

Step: 3

• Each card includes:
  • Header (title + description)
  • Toggles for available communication methods (email, SMS, push, etc.)

Step: 4

• Render an additional card for preferred communication language using TsSelectBox.