Accessories Store

Browse and order camera accessories from within the app

The Accessories Store provides a storefront-like experience for discovering and ordering camera accessories. Browse product cards, filter by category, add items to a shopping cart, and complete purchases through integrated Stripe checkout.

Requirements

Functional Requirements

ID	Requirement	Acceptance Criteria	Priority	Source
REQ-ACS-001	The system shall display a grid of product cards with image, name, price, and description	Navigate to store → products displayed in grid; each card shows image, name, price, description; responsive columns	Must	`useStore`
REQ-ACS-002	The system shall support filtering products by category and searching by name	Select category → grid filters; type search → results narrow; clear → all shown; no results → empty state message	Must	`useStore`
REQ-ACS-003	The system shall provide a shopping cart with add, remove, and quantity update capabilities	Click "Add to Cart" → item added with badge count; open cart → quantity +/- buttons; remove → item deleted	Must	`useShoppingCart`
REQ-ACS-004	The system shall integrate with Stripe for secure checkout and payment processing	Click "Checkout" → redirected to Stripe; complete payment → order confirmed; cancel → returned to cart	Must	`useShoppingCart`
REQ-ACS-005	The system shall show each product's images, options and description on its card	Click the product image → a lightbox opens with the full-size images; colour, text-colour and size options are chosen on the card itself	Should	`ProductCard`
REQ-ACS-006	The system shall track order status after purchase	Complete purchase → order appears in "My Orders"; status shown (Processing/Shipped/Delivered); click → order detail	Should	`useStore`
REQ-ACS-008	The system shall create Stripe checkout sessions via server-side edge function (no client-side secret keys)	Click checkout → server creates session; redirect to Stripe; payment success → redirect back with order	Must	`store-create-checkout-session`
REQ-ACS-009	The system shall process Stripe webhooks for order fulfillment, recording order status and payment confirmation	Payment succeeds → webhook fires → order marked "paid" in Supabase; failure → order marked "failed"	Must	`store-webhook`
REQ-ACS-010	The system shall persist the shopping cart and sync it to the user's account	Add items → reload → cart restored with quantities; signed in, the cart follows you to another device	Should	`useShoppingCart`
REQ-ACS-011	The system shall ship the product catalogue in the app bundle, with price, description, images and Stripe price id	Open the store → products render with no network call for the catalogue; each carries its Stripe price id for checkout	Must	`accessoriesProducts`

Data Requirements

Product catalog: A bundled module (app/src/data/accessoriesProducts.js); includes name, description, price, images, category and Stripe price id
Cart state: Held in app state, persisted with it, and synced to the account through syncEngine under the entity id user-shopping-cart
Orders: Recorded in Supabase after Stripe checkout completion
Persistence: The catalogue is a bundled module, so it needs no storage at all; the cart persists with app state

Constraints & Limits

Available to signed-in users only (requires account for checkout)
Stripe checkout redirects to external Stripe hosted page
The catalogue ships with the app — browsing needs no connection; only checkout and order history do
Prices displayed in the store currency (EUR by default)

Offline Behavior

Browsing works offline. The product catalogue ships inside the app, so the store opens and every product renders with no connection.
Your cart survives. It is stored with the rest of your app state and re-appears after a reload; when you are signed in it also syncs to your account, so it follows you between devices.
Checkout does not work offline — it redirects to Stripe, which needs a connection.
Order history needs a connection — orders are read back from the server.

Dependencies

Requires: Authentication — purchases require account

Accessing the Store

Navigate to Accessories in the sidebar. The store loads the product catalog from the cloud.

Browsing Products

Product Cards

Each card shows:

Product image
Name and short description
Price
"Add to Cart" button

Filtering

Category filter: Click a category tab to narrow products
Search: Use the search bar to find products by name

Filtering on a phone

Below the tablet breakpoint the category pills fold behind one Filters button — six of them wrapped to three rows before — while the search field stays on screen. The sheet's button shows how many products your selection leaves.

Shopping Cart

Click "Add to Cart" on product cards
Open the Cart panel to review items
Adjust quantities or remove items
Click "Checkout" to proceed to Stripe payment

Checkout

Review your cart summary
Click "Proceed to Checkout"
You'll be redirected to Stripe's secure hosted checkout
Complete payment with credit card or supported payment method
After successful payment, you're redirected back to the app

Tips

Check device library first: Your owned gear may already cover what you need
Compare prices: The store shows curated accessories — compare with your rental house pricing
Add to owned gear: After purchase, add items to your Owned Gear list for ROI tracking

Last Updated: 2026-09-09 Version: 0.790.2