Checkout internals
SPA for customer links (and post-submit tracking/chat): the checkout app (printbazar-checkout/). Entry: printbazar-checkout/App.tsx. API client: services/customerLinkService.ts (printbazar-checkout/services/customerLinkService.ts). Backend steps: Customer link lifecycle, POS & link payments.
Routing
URL shape: /{posSlug}/{linkCode}/ (first two path segments). Missing params → error view.
On load:
getCustomerLink(posSlug, linkCode)getCheckoutAddons(…)- If link
status !== 'Empty'→ success view (tracking) and clear draft storage - Else → wizard view; seed shipping name from
customer_namewhen empty
Views: loading | error | wizard | success.
Wizard steps
StepIndicator (printbazar-checkout/components/StepIndicator.tsx): Upload → Shipping → Payment.
| Step | UI | API |
|---|---|---|
| 1 | Per-product uploads (UploadArea (printbazar-checkout/components/UploadArea.tsx)); optional addon sheet | POST …/step1/ — product_images, selected_addons |
| 2 | ShippingForm (printbazar-checkout/components/ShippingForm.tsx) | POST …/step2/ — shipping_details |
| 3 | PaymentStep (printbazar-checkout/components/PaymentStep.tsx) — POS QR + screenshot upload | POST …/step3/ — payment_screenshot URL |
Step 1 may open AddonBottomSheet (printbazar-checkout/components/AddonBottomSheet.tsx) once (extrasPrompted) before calling completeStep1. Custom products require at least one image (new or already on the link).
After step 3 success: refetch link, clear localStorage, switch to success (short animation delay).
localStorage
Prefix: checkout_{linkCode}_.
| Key | Contents |
|---|---|
currentStep | Wizard step number |
uploadedAssets | JSON uploaded file list |
shippingDetails | Shipping form state |
paymentProof | Uploaded screenshot file metadata / URL |
selectedAddons | Addon selections |
extrasPrompted | '1' after extras sheet shown/skipped |
Persisted only while view === 'wizard'. Cleared on submit success or when opening an already non-Empty link.
Unread chat badge separately uses lastSeen_checkout_{linkCode} in printbazar-checkout/components/OrderSuccess.tsx.
Success / chat
Success UI shows order progress and opens ChatWindow (printbazar-checkout/components/ChatWindow.tsx) against public comment + SSE endpoints. Temp→real message merge is intentional for optimistic chat (see audit notes in report.md §6).