DES-08 — Day 8 — Reseller app: product, cart & checkout
Product detail, specifications, favorites, cart, checkout, addresses, confirmation — with every validation message.
| Field | Details |
|---|---|
| Task code | DES-08 |
| Phase | P0 — Foundations (cadrage, UX/UI, architecture & contract) |
| Product scope | V1 |
| Status | Planned |
| Start | Tue 27 Oct 2026 |
| Due | Tue 27 Oct 2026 |
| Responsible | Akram — UI/UX designer |
| Co-responsible | — |
| Effort | 1 person-day(s) planned · 1.25 from scratch · size S |
| Area · app | Reseller app design · design |
| Depends on | DES-07 |
| Unblocks | MRA-03, MRA-04, DES-09 |
| Milestones | — |
Summary
Product detail, specifications, favorites, cart, checkout, addresses, confirmation — with every validation message.
Description
Day 8 designs the path from a product to a submitted order, with every validation message: RA-14 product detail, RA-15 specifications, RA-16 favourites, RA-17 cart, RA-18 checkout, RA-19 addresses and RA-20 confirmation. Inputs: the reseller-03-product-detail and reseller-04-cart-checkout references, the Day-5 checkout wireframe, cahier §5.2–§5.3, CAT-08/09, ORD-01/02/03/14, PRC-05, PRM-04, FIN-02/05, DLV-06, STK-07, and the operations catalog.products.get, catalog.products.similar, favorites.*, cart.get, cart.items.add|update|remove, cart.checkoutOptions, cart.checkout (Idempotency-Key) and addresses.*. Two rules are binding. The reseller only ever sees their own customer-type price and availability, never a quantity. Every order lands as « Envoyée » and waits for HOCO's confirmation (ORD-14). Consumers: Imad's MRA-03 (RA-14…16) and MRA-04 (RA-17…20), and later MDA-09, which reuses the catalog and cart widgets in hoco_catalog.
Subtasks
| # | Subtask | Owner |
|---|---|---|
| 1 | RA-14 Détail produit: gallery with counter, thumbnails and zoom; variant selector; price block « Votre prix · Demi-gros » (TTC, decision to confirm) with « Prix de vente conseillé », promo state (struck price, −20 %), guest lock; availability pill; stepper with minimum, step and « Max : 20 pièces par commande »; « Ajouter au panier » + « Commander maintenant » (adds then opens the cart); favourite, share, similar products; 404 « Ce produit n'est plus disponible » | Akram |
| 2 | RA-15 Caractéristiques: specification groups in 14 sp text, attribute values with units (20 W, 10 000 mAh). RA-16 Favoris: list, empty state, item gone out of stock, remove with undo | Akram |
| 3 | RA-17 Panier: lines with unit price × quantity = line total; remove with undo (6 s); clear-cart dialog; price-changed banner naming the lines (PRC-05); STOCK_INSUFFICIENT line error with « Ajuster » / « Retirer », never a stock figure; ORDER_MIN_AMOUNT_NOT_MET progress « Plus que 1 250,00 DA pour atteindre le minimum »; promotion applied; empty cart; cart changed on another device (ORD-01); account pending (checkout locked) | Akram |
| 4 | RA-18 Validation de commande: default address card (« Modifier » → RA-19); delivery mode and fee with the free-delivery threshold « Offerte » (DLV-06); payment methods enabled in settings (Paiement à la livraison, Virement bancaire, CCP, BaridiMob, Crédit) | Akram |
| 5 | RA-18 payment and submit states: CREDIT shows the available credit, and CREDIT_LIMIT_EXCEEDED disables it with a reason and the other methods; optional note (300 characters); totals with sous-total, remises, livraison, Total TTC, dont TVA; submitting (no double submit); re-validation errors on submit; offline (submit impossible) | Akram |
| 6 | RA-19 Adresses de livraison: list with default address, add/edit form (wilaya → commune, address line, phone 0555 12 34 56), delete confirmation, validation errors | Akram |
| 7 | RA-20 Commande envoyée: CMD-2026-000158, pill Envoyée, next step « HOCO va confirmer votre commande — vous serez notifié » (no automatic confirmation, ORD-14), « Suivre ma commande » and « Continuer mes achats » | Akram |
| 8 | Move the WhatsApp button into the app bar on RA-14, RA-17 and RA-18 so it never covers the sticky CTA | Akram |
| 9 | Make the amounts add up on every frame (canonical 1 250,00 DA, VAT 19 %) and annotate the error-code → message mapping for cart.items.add and cart.checkout | Akram |
| 10 | Link the ordering prototype path RA-12 → RA-14 → RA-17 → RA-18 → RA-20 | Akram |
| 11 | Feasibility and reuse review: confirm the product card, stepper, cart line and order summary are generic enough for the delegate's assisted order (MDA-09, hoco_catalog) | Imad |
Deliverables
- Claude Design › Reseller App ›
RA · Shopping(RA-14…16) andRA · Ordering(RA-17…20) with every state (e.g.RA-17 · Cart · error-min-amount,RA-18 · Checkout · error-credit-limit-exceeded) - Error-code → French message table for the cart and checkout operations, annotated on the frames
- Linked ordering prototype RA-12 → RA-20
Acceptance criteria
- Every listed state has a frame, and the totals on every frame add up (lines, discounts, fee, TTC, VAT)
- No frame shows a stock quantity; quantity errors never reveal stock
- The price block shows only the reseller's own customer-type price; there are no quantity tiers
- RA-20 says the order is Envoyée and awaits HOCO's confirmation; no frame implies automatic validation
- A disabled CREDIT method always states the reason and the available credit
- Copy is final French, targets are 48 dp, and the sticky CTA bar is 72 dp and never covered
Requirements covered
| Requirement | Title | Release |
|---|---|---|
| CAT-08 | Product detail: gallery, specifications, description, prices, availability, quantity limits, similar/complementary products, share | V1 |
| ORD-01 | Server-side cart shared across the reseller's devices (mobile and web) | V1 |
| ORD-02 | Cart rules: minimum amount, minimum quantities and steps, maximum per order, stock and credit checks | V1 |
| ORD-03 | Checkout: address, note, payment method; a unique order number; immediately visible in the back-office | V1 |
Screens
| Screen | Name | App |
|---|---|---|
| RA-14 | Product detail | RA |
| RA-15 | Full specifications | RA |
| RA-16 | Favorites | RA |
| RA-17 | Cart | RA |
| RA-18 | Checkout | RA |
| RA-19 | Address book & address form | RA |
| RA-20 | Order confirmation | RA |
Test measures
- Prototype walkthrough of the ordering path with Imad, then with a non-team user (5-minute hallway test)
- Arithmetic check of the amounts on every cart and checkout frame
- 130 % and 200 % text scale on RA-18 (checkout must hold at 200 %)
Risks
- TTC vs HT display is still undecided — design TTC with « dont TVA » and mark it Decision pending; switching to HT only changes the labels.
- Payment methods and the credit policy are not settled — design all five methods driven by settings, and hide disabled ones rather than greying them.
KPI
- Delivered by Tue 27 Oct 2026 within 1 person-day(s).
- Every acceptance criterion above demonstrated before hand-off; linked requirements' acceptance criteria pass.
- Zero open critical defects, permission gaps or data-integrity regressions at sign-off.
Generated from content/plan/tasks.json by scripts/generate-team-tasks.mjs. Dates are computed by the scheduler (Sunday–Thursday weeks, holidays excluded) — change the plan, not this page.
DES-07 — Day 7 — Reseller app: home, search & catalog
Home (guest and signed-in), search, scanner, catalog with tabs and chips, advanced filters and sort sheets, regional WhatsApp button.
DES-09 — Day 9 — Reseller app: orders & finance
Orders with counters and progress, order detail and tracking, assisted-order confirmation, balance/credit, invoices, payments and declaration. Return request.