Branch

Description

• The Default Branch page displays a user's favorite store location within the account section.
• Built using Composition API, TypeScript, TailwindCSS, and Nuxt 3.
• Supports responsive design and user personalization.

Purpose

• Show the user's selected default branch with relevant details (name, address, distance, etc.).
• Offer quick access to routing, branch changes, and more branch details.
• Provide a fallback UI for users without a selected default branch.

Use Cases

• View Favorite Branch: Users can see their currently selected default branch.
• Check Branch Details: Address, opening time, and distance from current location are displayed.
• Route Planning: Users can click to view the route to the default branch.
• Change Default Branch: Users can open a modal to select a new favorite branch.
• No Branch Selected: A fallback UI encourages users to select one.

Expectations

• Graceful loading with TsLoadingCircularSpinner.
• Mobile and desktop variants of the heading (TsTitle vs TsTypography).
• Smooth fallback UI if no branch is set.
• Responsive layout optimized for mobile and large screens.
• Interactive buttons trigger branch routing or selection modals.

Developer Strategies

• Load branch details from branchStore (Pinia).
• Use onMounted to simulate loading with pageLoading state.
• Leverage useDevice() to tailor layout for desktop vs mobile.
• Lazy load components using defineAsyncComponent for better performance.
• Use useTranslation() for i18n support throughout.

TODOs for Developer

• Show branch image, name, address, and distance.
• Route plan and change branch CTA buttons.
• Improve accessibility (add ARIA roles, keyboard navigation).
• Add error handling if branchStore.defaultBranch fails to load.
• Write unit tests for branch selection, display, and routing behavior.
• Add logging for interactions (view_branch, change_branch, etc.).
• Extract hardcoded time values like "07:00" into config or store.

API Endpoints

Action	Endpoint	Description
getDefaultBranch(userId)	GET /users/:userId/default-branch	Fetches the user’s currently selected default branch.
setDefaultBranch	POST /users/:userId/default-branch	Sets or updates the user's default branch.
getBranchesNearby	GET /branches?lat=&lng=	Retrieves nearby branches for the user’s location
getBranchDetails(slug)	GET /branches/:slug	Fetches detailed info about a specific branch.

---

Components Used

Component | Description

Action	Endpoint
TsCard	Main layout container
TsTypography/ TsTitle	Page heading (responsive to device type)
TsButton	For route planning and branch change CTAs
TsIcon	Icons for time and distance
TsCardBranchInfo	Structured container for branch image/content/actions
TsImage	Displays branch/store image
TsRow /TsColumn	Layout grid system
TsLoadingCircularSpinner	Spinner displayed while loading initial address data
NuxtLinkWithLocale	Navigation to full branch details page

---

Flow Summary

Render

• On mount: show loading spinner → fetch default branch from branchStore.
• If branch exists: render branch details inside TsCardBranchInfo.
• If no branch: show fallback UI encouraging user to select a branch.