Order History

Description

• The Pro Card Order History view allows users to search, filter, view, and download invoices for past orders made with their Pro Card.
• Developed with Nuxt 3, Composition API, TypeScript, TailwindCSS, and Pinia.
• Fully responsive for desktop and mobile, adapting layouts via useDevice().
• Translation-ready using the custom useTranslation composable.

Purpose

• Provide users a streamlined view of all Pro Card-related orders.
• Allow users to search by invoice number or label, paginate through orders, and download invoices in bulk.
• Integrate with the accountStore and authStore to ensure scoped and reactive data.
• Enhance mobile UX with simplified layout and stacked elements.

Use Cases

• View Order History: Paginated view of orders fetched from accountStore.pro_card_orders_data.
• Search Orders: Text input filters orders by invoice number or label.
• Download Invoices:
  • Users can select orders to download invoices.
  • Disabled state maintained if no orders are selected.
• Navigate Back: Back arrow triggers navigation to the Pro Card Overview.
• Pagination:
  • TsPagination supports next, previous, first, and last page navigation.
  • Pagination is conditionally rendered if order count exceeds the page offset (10).

Expectations

• Orders are fetched using fetchProCardOrdersHistory(userId) on component mount.
• Data is conditionally displayed with a loading spinner until fetched.
• Search input filters order data in real-time using v-model and @input binding.
• Pagination is dynamically calculated and controlled via accountStore.orders_current_page.
• Component adapts visually for mobile via Tailwind utility classes merged with twMerge().

Developer Strategies

• Use defineAsyncComponent for on-demand loading of UI components.
• Mobile/desktop adaptation handled by useDevice().
• Reactive data binding from accountStore and authStore.
• Filtering and pagination are managed locally in filterData() and paginatedData().
• Navigation to other account sections (e.g., back to Pro Card view) is done using navigateTo().

TODOs for Developer

• Implement bulk select/deselect logic for downloading multiple invoices.
• Add visual indicators for selected items and download status.
• Improve accessibility: keyboard navigation, proper ARIA roles for table and pagination.
• Handle empty and error states for fetchProCardOrdersHistory().
• Add analytics tracking:
  • click_download_invoices
  • search_pro_card_orders
• Unit tests for:
  • Pagination logic and filter behavior.
  • API integration with mocked user data.
  • Button states (enabled/disabled) based on selection.

API Endpoints

Action	Endpoint	Description
getProCardOrders	GET /users/:userId/pro-card/orders	Fetches historical orders made with a Pro Card.
downloadInvoices	POST /users/:userId/pro-card/download	Downloads selected order invoices.

---

Components Used

Component	Description
TsCard	Main container with padding and optional mobile variant.
TsTypography	Header and sub-header text rendering.
TsIcon	Left-arrow icon for navigation.
TsDivider	Section divider between header and content.
TsLoadingCircularSpinner	Shows loading state while fetching data.
TsInput	Search field for filtering orders.
TsButton	Button to trigger invoice downloads.
TsMedia / TsMediaContent / TsMediaEnd	Responsive layout wrapper for search and actions.
TsTableView	Component for rendering tabular order data.
TsPagination	Controls current page in paginated order list.

---

Flow Summary

Render or Mount

• On component mount:
  • Check if authStore.user.id exists.
  • Call accountStore.fetchProCardOrdersHistory(userId) to retrieve Pro Card orders.
  • Append fields like label and isModified for internal UI handling.
• Store data in accountStore.pro_card_orders_data.

Filtering & Search

• Search field filters orders based on matching invoice number (item.id.includes(query)).
• Updates paginated result using a filterData() method on input change.

Download Invoices

• Button for downloading invoices, only enabled when one or more orders are selected.
• Uses accountStore.downloadOrderHistoryInvoices(label) method.
• Selection state is reset on page change.

Pagination

• Supports page switching using TsPagination.
• Controlled by accountStore.orders_current_page and offset.

Mobile Layout

• Tailwind utility classes merged conditionally to create a stacked layout.
• Input and buttons stretch full-width in mobile view.