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.
| Field | Details |
|---|---|
| Task code | DES-07 |
| Phase | P0 — Foundations (cadrage, UX/UI, architecture & contract) |
| Product scope | V1 |
| Status | Planned |
| Start | Mon 26 Oct 2026 |
| Due | Mon 26 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-06 |
| Unblocks | MRA-01, MRA-02, DES-08 |
| Milestones | — |
Summary
Home (guest and signed-in), search, scanner, catalog with tabs and chips, advanced filters and sort sheets, regional WhatsApp button.
Description
Day 7 designs how a reseller (guest or signed in) finds a product in three taps or three seconds: RA-09 home, RA-10 search, RA-11 barcode scanner, RA-12 catalog and RA-13 advanced filters and sort. Inputs: the reseller-01-home and reseller-02-catalog references (the « Points » tile and loyalty card are removed, since loyalty is V2), cahier §5 and §5.1, CAT-07/10/11/12/13, STK-07, PRC-05, PRM-05, FIN-10, SUP-05, AUTH-10, and the operations catalog.home, catalog.products.list, catalog.products.suggest, catalog.products.byBarcode, catalog.facets, catalog.categories, catalog.brands, banners.list, finance.summary, notifications.unreadCount, support.whatsapp. Scope: browsing and filtering only; product detail and cart are DES-08. Consumers: Imad's MRA-01 (RA-09) and MRA-02 (RA-10…13), and Anis's WEB-02, which mirrors the filters in the RW-03 sidebar.
Subtasks
| # | Subtask | Owner |
|---|---|---|
| 1 | RA-09 Accueil, signed in: greeting « Bonjour, Magasin El Wafa », bell with unread badge, search with scanner icon, banner carousel with countdown chip, quick access Catalogue / Commandes / Promotions / Assistance (no Points tile), popular categories, recommended products, finance tiles Solde and Crédit disponible; skeleton; pending-validation banner; offline with cached content | Akram |
| 2 | RA-09 Accueil, guest: price-locked product cards, dismissible guest banner « Vous naviguez en invité » + « Créer un compte », no finance tiles, locked tabs | Akram |
| 3 | Regional WhatsApp button: 56 dp FAB at the bottom end, 16 dp above the bottom nav, on Accueil and Catalogue, labelled « Assistance WhatsApp — région Ouest ». States: region resolved from the account wilaya; guest with location asked just in time (« Utiliser ma position »); wilaya picker or default number; closed-hours sheet « Notre équipe répond de 8 h 30 à 17 h — envoyer quand même ? »; WhatsApp not installed (« Appeler », « Copier ») | Akram |
| 4 | RA-10 Recherche: recent searches, suggestions as you type (name, reference, brand), result count, no result (offer the scanner and WhatsApp), slow network (skeleton after 300 ms) | Akram |
| 5 | RA-11 Scanner: camera permission rationale, denied and permanently denied (link to settings), viewfinder with torch, product found (opens RA-14), unknown barcode with manual entry | Akram |
| 6 | RA-12 Catalogue: tabs Nouveautés / Populaires / Promotions, category chips, 2-column grid with cursor pagination. Availability En stock / En rupture only. Price or guest lock, promo badge. Add button that becomes a stepper. Favourite toggle. Out-of-stock card (add disabled). « Filtres (3) » button, active-filter chips with « Tout effacer », filtered-empty with « Réinitialiser les filtres » | Akram |
| 7 | RA-13 Filtres avancés et tri, full-height sheet: category → sub-category tree with counts; brand multi-select with logos (HOCO, ACEFAST, BOROFONE); price range slider with min/max DA inputs (signed-in only); attribute sections built from the category's definitions; toggles En stock uniquement / En promotion / Nouveautés; zero-count options shown (0) and disabled | Akram |
| 8 | RA-13 attribute variants for two categories: chargers (power range in W with « 20 W et plus », connector chips USB-C / Lightning, « Charge rapide » toggle) and cables (connector, length in m, colour swatches). Sort list (pertinence, prix croissant / décroissant, nouveautés, popularité; price sorts hidden for guests). Sticky footer « Réinitialiser » + live « Voir 128 produits » (300 ms debounce) | Akram |
| 9 | Annotate data sources (catalog.facets counts, cursor pagination, support.whatsapp resolution order) and requirement tags (CAT-12, CAT-13, STK-07) on the frames | Akram |
| 10 | Feasibility check: facet counts refresh, two-handle slider widget, scanner package, FAB placement against the bottom nav | Imad |
Deliverables
- Claude Design › Reseller App ›
RA · Shopping: RA-09…RA-13 with guest and signed-in variants (e.g.RA-12 · Catalog · guest,RA-13 · Advanced filters & sort · attribute-range) - WhatsApp button state frames, and a placement rule for screens with a sticky CTA
- Filter sheet shown for two categories with different attribute sets, annotated with the BO-71 definitions it reads
Acceptance criteria
- Guest and signed-in variants exist for RA-09 and RA-12
- No frame shows a stock quantity or « Plus que N pièces »; availability is always one of the two pills
- The price filter and price sorts are absent from every guest frame
- The filter sheet covers category, sub-category, brand, price, list/number/boolean attributes, availability, promotion and new arrivals, each with counts
- The home has no loyalty element
- Targets are 48 dp or more, and the WhatsApp FAB never covers a primary CTA or the bottom nav
Requirements covered
| Requirement | Title | Release |
|---|---|---|
| CAT-07 | Catalog browsing and search by name, reference or brand, with sorting; results in under 3 seconds | V1 |
| CAT-10 | Barcode scan to find a product | V1 |
| CAT-11 | Home merchandising: popular categories and recommended products (rules-based) | V1 |
Screens
| Screen | Name | App |
|---|---|---|
| RA-09 | Home | RA |
| RA-10 | Search | RA |
| RA-11 | Barcode scanner | RA |
| RA-12 | Catalog | RA |
| RA-13 | Advanced filters & sort (price range, category/sub-category, brand, attributes…) | RA |
Test measures
- Tap test on the prototype: find « câble USB-C 1 m » in 3 taps or fewer from RA-09
- Contrast and colour-blind check of the availability pills and promo badges
- Feasibility review with Imad: OK or OK with notes
Risks
- Attribute sets differ widely by category — design the sheet as generated sections (list / number / boolean) rather than per-category layouts, and check two categories.
- Location permission for guests feels intrusive — ask only on the first WhatsApp tap, with a wilaya picker as the alternative.
KPI
- Delivered by Mon 26 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-06 — Day 6 — Reseller app: onboarding & account
Splash, welcome with guest browsing, guest price lock, sign-up (phone, OTP, store details, customer type), pending validation, sign-in, forgot password.
DES-08 — Day 8 — Reseller app: product, cart & checkout
Product detail, specifications, favorites, cart, checkout, addresses, confirmation — with every validation message.