DES-20 — Day 20 — Reseller web: responsive layouts
Desktop and tablet layouts of the reseller experience; phone widths reuse the mobile designs.
| Field | Details |
|---|---|
| Task code | DES-20 |
| Phase | P0 — Foundations (cadrage, UX/UI, architecture & contract) |
| Product scope | V1 |
| Status | Planned |
| Start | Sun 15 Nov 2026 |
| Due | Sun 15 Nov 2026 |
| Responsible | Akram — UI/UX designer |
| Co-responsible | — |
| Effort | 1 person-day(s) planned · 1.25 from scratch · size S |
| Area · app | Reseller web design · design |
| Depends on | DES-19 |
| Unblocks | WEB-01, DES-21 |
| Milestones | — |
Summary
Desktop and tablet layouts of the reseller experience; phone widths reuse the mobile designs.
Description
Day 20 designs the reseller web (RW-01…RW-14) at desktop and tablet widths; phone widths reuse the mobile frames. The reseller web is part of V1 and is deployed before the pilot with the rest (AUTHORING §1). It has V1 feature parity with the app (RWA-01) on the same account, cart and orders (RWA-02): guest browsing with the price lock, sign-up with customer type, advanced sidebar filters, live order status, returns and after-sales, and the regional WhatsApp button. Inputs: the RA frames of Days 6–10, the Day-4 reseller-web shell and filter sidebar, the RW grid (container 1280; breakpoints 640/768/1024/1280/1536) and the same API operations as the app, using the session cookie. Scope: layouts and web-specific behaviour (hover, focus, keyboard, URL-synced filters, session expiry, invitation landing); business rules are unchanged from RA. Consumers: Anis's WEB-01 (RW-01), WEB-02 (RW-02…05), WEB-03 (RW-06, RW-07), WEB-04 (RW-08, RW-09, RW-13) and WEB-05 (RW-10…12, RW-14).
Subtasks
| # | Subtask | Owner |
|---|---|---|
| 1 | RW-01 Compte: centred-card sign-in; sign-up steps phone → OTP → store and customer type → password; account claim; password reset; invitation landing https://app.hoco.dz/i/AB12CD34 that pre-fills the code (IVT-04); guest entry « Découvrir le catalogue »; session expired → sign-in with return URL | Akram |
| 2 | RW-02 Accueil: header guest / signed-in (logo, search, categories menu, favourites, cart badge, live dot, account), 2:1 hero banner with countdown, popular categories, recommended products, finance tiles (signed in), guest banner | Akram |
| 3 | RW-03 Catalogue: 280 px sidebar applied instantly and synced to the URL (category, brand, attributes, price, toggles), counts, « Afficher plus » after 6, price filter signed-in only, active chips with « Tout effacer », sort menu, grid of 4 / 3 / 2 columns at 1280 / 1024 / 768, drawer below 1024 with the mobile footer, filtered-empty | Akram |
| 4 | RW-04 Détail produit: gallery left, info right, customer-type price or guest lock, availability pill, stepper with per-order maximum, « Ajouter au panier », specs table, similar products. RW-05 Favoris | Akram |
| 5 | RW-06 Panier: lines with steppers, the RA-17 errors (price changed, STOCK_INSUFFICIENT without figures, minimum amount progress), sticky summary column, notice « Panier mis à jour depuis votre téléphone » (shared cart). RW-07 Validation et confirmation: one page with address, delivery, payment (CREDIT rule), note, summary; confirmation « Envoyée — HOCO va confirmer votre commande » | Akram |
| 6 | RW-08 Commandes (status counters, live dot) and RW-09 Détail: tracker, live toast, history, documents, cancel, reorder, assisted-order confirmation, return request and after-sales claim entry points | Akram |
| 7 | RW-13 Finance: balance and credit, invoices table with PDF, payments with declaration and drag-and-drop proof upload. RW-10 Promotions; RW-11 Notifications; RW-12 Profil, magasin, adresses et paramètres (customer type read-only) | Akram |
| 8 | RW-14 Assistance: tickets, after-sales claim form, returns list, WhatsApp card; the WhatsApp button fixed bottom right on every page | Akram |
| 9 | Web specifics on every frame: hover and focus-visible states, keyboard order, skip link, lang="fr", tables with headers, modals that trap focus | Akram |
| 10 | Annotate breakpoint behaviour per frame (what moves, collapses or becomes a drawer at 1024 and 768; phone uses RA frames) | Akram |
| 11 | Feasibility: URL-synced facets with Next.js, SSE on the web, cookie-session expiry flow, invitation landing route | Anis |
Deliverables
- Claude Design › Reseller Web with RW-01…RW-14 at 1440 and 768 at least, and 1024 for the catalog, cart and checkout
- Breakpoint annotation per frame and the URL parameter scheme for RW-03 filters (proposed to Anis)
- Guest variants of RW-02, RW-03 and RW-04 with the price lock
Acceptance criteria
- Every RW frame exists at 1440 and 768, and phone behaviour points to the RA equivalent
- Guest frames show no price, no price filter and no price sort; no frame shows a stock quantity
- Filters are combinable, show counts and are reflected in the URL
- Every order screen has the live, reconnecting and paused states, and the WhatsApp button is present on every page
- Keyboard navigation and focus-visible states are shown on header, filters, cart and checkout
- Anis's review answer is OK or OK with notes
Requirements covered
| Requirement | Title | Release |
|---|---|---|
| RWA-01 | Responsive web version of the reseller app with V1 feature parity (account, catalog, cart, orders, promotions, finance, support, notifications) | V1 |
Screens
| Screen | Name | App |
|---|---|---|
| RW-01 | Sign in, sign-up (with customer type), OTP, password reset — and guest browsing | RW |
| RW-02 | Home | RW |
| RW-03 | Catalog with advanced sidebar filters & search | RW |
| RW-04 | Product detail | RW |
| RW-05 | Favorites | RW |
| RW-06 | Cart | RW |
| RW-07 | Checkout & confirmation | RW |
| RW-08 | Orders list | RW |
| RW-09 | Order detail, tracking & assisted-order confirmation | RW |
| RW-10 | Promotions & daily offers | RW |
| RW-11 | Notifications | RW |
| RW-12 | Profile, store, addresses & settings | RW |
| RW-13 | Invoices, payments & credit | RW |
| RW-14 | Support: tickets, after-sales claims, returns & WhatsApp | RW |
Test measures
- Keyboard-only walkthrough of the prototype: catalog → filter → product → cart → checkout
- Responsive check at 1024 and 768 (sidebar → drawer, summary column → bottom)
- Parity check with Anis: every RA V1 feature has its RW location (RWA-01)
Risks
- Day 20 is squeezed by back-office overflow — RW reuses the RA states and the Day-4 shell, so the day only lays out; any remaining RW frames move into DES-22 before WEB-01 starts.
KPI
- Delivered by Sun 15 Nov 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-19 — Day 19 — Back-office: field ops, promotions, support, reports, admin
Delegates, zones, objectives, tour planner/editor/live detail, visits, checklists; promotions editor, banners; tickets, announcements, templates; reports and exports; users, roles matrix, audit, settings, reference lists, app versions, imports.
DES-21 — Day 21 — Prototypes, design QA & handoff
Clickable prototypes (reseller ordering, delegate visit day), consistency pass, specs and assets export, tokens v1.0 tagged, client presentation.