Account & support

These screens hold everything around buying: the notification inbox, the account and store, support — including the regional WhatsApp number (SUP-05) and after-sales (SAV) claims on delivered orders (SUP-04) — and settings. They are designed on day 10 and built in MRA-07 (account, store, settings) and MRA-08 (notifications, support). Guests reach none of them except the WhatsApp button: the Compte tab shows the sign-up prompt of RA-41.

ID	Screen	UI title	Section	Release	Design	Build
RA-26	Notifications	Notifications	Account	V1	Day 10	MRA-08
RA-27	Account hub	Compte	Account	V1	Day 10	MRA-07
RA-28	Store profile & documents	Mon magasin	Account	V1	Day 10	MRA-07
RA-35	Settings	Paramètres	Account	V1	Day 10	MRA-07

ID	Screen	UI title	Section	Release	Design	Build
RA-32	Support: tickets, after-sales claims & WhatsApp	Assistance	Support	V1	Day 10	MRA-08
RA-33	New ticket / after-sales claim	Nouvelle demande	Support	V1	Day 10	MRA-08
RA-34	Ticket conversation	Conversation	Support	V1	Day 10	MRA-08

RA-26 — NotificationsCopy Anchor Link

Purpose — Keep every event that concerned the reseller — order and return status changes, payments, invoices, claims, offers, HOCO's announcements — in one inbox with read state and deep links (NOT-01, NOT-02, NOT-07).

Entry points & exits — The bell of the tab-root headers; « Notifications » on RA-27; push announcement.published; /notifications. A tap on a push opens its target directly, not this screen. Exits to the route of each item (deep-link table of the overview) or the announcement sheet.

Layout

1. AppBar « Notifications » with « Tout marquer comme lu ».
2. Filter chips: « Toutes », « Non lues », « Commandes », « Paiements », « Offres », « Annonces ».
3. Push-permission banner when notifications are disabled for the app: « Les notifications push sont désactivées. » with « Activer » (opens the system settings).
4. List grouped by day (« Aujourd'hui », « Hier », « 12 nov. »): ListRow with the category icon, title (bold when unread), two-line body, relative time (« il y a 5 min »), unread dot. Rows of category Annonces show « Message de HOCO ».
5. Announcement detail (BottomSheet, full height): title, optional image, full text, publication date.

Data

Actions

• Row → notifications.markRead (optimistic: dot removed, badge −1) then the item's data.route; for an announcement, the detail sheet and announcements.markRead.
• « Tout marquer comme lu » → notifications.markAllRead, badge to 0.
• Live notification.created while the screen is open: the item is inserted at the top with a short highlight.
• Pull-to-refresh; infinite scroll.

Rules

• Titles and bodies are written by the server from the templates of the notifications matrix (French copy by DQA-10); the app does not compose them.
• Every order status change and every return or claim decision lands here, even when the push was not delivered (ORD-15).
• A route the app cannot open (deleted order, out of scope) opens the parent list with « Ce contenu n'est plus disponible ».
• Preference switches of RA-35 control push for promotional and announcement categories; the inbox always receives transactional items.

States — Loading: row skeletons. Empty: « Aucune notification pour le moment. » Empty filter: « Aucune notification dans cette catégorie. » Offline: cached first page, mark-read queued until the network returns. Error: ErrorState.

Copy — « Notifications » · « Tout marquer comme lu » · « Toutes » · « Non lues » · « Commandes » · « Paiements » · « Offres » · « Annonces » · « Message de HOCO » · « Les notifications push sont désactivées. » · « Activer » · « Aucune notification pour le moment. »

Analytics — notifications_viewed with unread; notification_opened with eventKey, ageMinutes; notifications_all_read.

Groups and action buttons (change request 03) — NOT-09, NOT-10, built in MRA-11.

• The filter chips of item 2 become group tabs: « Toutes », « Urgent », « Promotions », « Nouveautés », « Suggestions » (V2 « Points et niveaux », later « Academy »). A tab without content is hidden. The « Non lues » switch stays at the right of the tabs. Each tab calls notifications.list?group= and shows the group's unread count. The route is /notifications?group={group}.
• Each row shows its action button under the body (action.label, secondary small button). Button and row both mark the item read and open action.deepLink. A row without an action (an old notification) keeps the current behaviour.
• Grouped notifications (« 3 nouveautés chez HOCO ») open the list they summarise (RA-12 ?tab=new).
• RA-35 gains one push switch per group: Promotions, Nouveautés, Suggestions. Urgent is shown locked on with « Indispensable au suivi de vos commandes » (NOT-17).

Acceptance criteria

• Every push the reseller received also appears in the inbox with the same text.
• Opening an item marks it read and opens its target; the bell badge decreases at once.
• A validated order produces an inbox item even with push disabled.

RA-27 — Account hubCopy Anchor Link

Purpose — The Compte tab: who the shop is for HOCO (number, customer type, status, delegate), its money at a glance, and the entry to every account, finance, after-sales and support screen (FIN-10).

Entry points & exits — Compte tab. Exits to RA-06 (status card), RA-28, RA-19, RA-16, RA-21, RA-40 (returns list), RA-29, RA-30, RA-31, RA-32, RA-26, RA-35, WhatsApp, guest mode after sign-out.

Layout

1. AppBar « Compte ».
2. Pending card, only for PENDING_VALIDATION or a rejected sign-up: the compact RA-06 (title, one line, « Voir le détail »).
3. Identity card: store photo or initials, store name, owner name, « REV-000123 », StatusBadge of the account (Actif, En attente de validation), « Type de client : Demi-gros » with an info icon (« Votre type de client détermine vos prix. Pour le modifier, contactez HOCO. »), assigned delegate « Votre délégué : Yacine B. » with « Appeler » and « WhatsApp ».
4. Money row (active accounts): two KpiTile « Solde à payer » and « Crédit disponible » → RA-29.
5. Menu, ListRow groups:
   • « Mon activité »: Mes commandes (RA-21), Mes retours (RA-40), Mes favoris (RA-16).
   • « Finances »: Solde et crédit (RA-29), Factures et avoirs (RA-30), Paiements (RA-31).
   • « Mon magasin »: Profil et documents (RA-28), Adresses de livraison (RA-19).
   • « Aide »: Assistance et SAV (RA-32), WhatsApp HOCO (« Région Ouest »).
   • « Application »: Notifications (RA-26), Paramètres (RA-35).
   • V2 adds « Fidélité » (RA-38) and « Récompenses » (RA-39).
6. Destructive text button « Se déconnecter »; caption « Version 1.0.0 (42) ».
7. WhatsAppButton (floating).

Data

Actions — Menu rows navigate. « Se déconnecter » → Dialog « Se déconnecter ? » → auth.logout (revokes the session and the push token) → account caches cleared, catalog cache kept → RA-09 in guest mode.

Rules — Customer type is read-only for the reseller (AUTH-11); finance tiles hidden while pending; the delegate block is hidden when none is assigned.

States — Loading: card skeleton. Offline: cached identity, money row with « données du … ». Pending and rejected: the card of item 2.

Copy — « Compte » · « Type de client : {customerType} » · « Votre type de client détermine vos prix. Pour le modifier, contactez HOCO. » · « Votre délégué : {name} » · group and row labels above · « Se déconnecter ? » · « Se déconnecter ».

Analytics — account_viewed; account_menu_clicked with item; logout.

Acceptance criteria

• Number, customer type and status equal the reseller record in the back-office (BO-11).
• Signing out returns to the guest catalog without prices and unregisters push.

RA-28 — Store profile & documentsCopy Anchor Link

Purpose — Let the reseller keep the store's information and legal documents up to date (RC, NIF, NIS, AI, ID) — the documents HOCO needs to validate the account and to issue correct invoices (CRM-01, CRM-10).

Entry points & exits — « Profil et documents » on RA-27; « Compléter mon profil » and « Ajouter » on RA-06; /account/store. Exit: back.

Layout

1. Store photo (façade) header with « Changer la photo ».
2. « Informations du magasin »: rows Nom du magasin (read-only), Type de commerce (editable Select), Responsable (editable), Téléphone principal (read-only, « Modifier dans Paramètres »), WhatsApp (editable), Email (editable), Adresse du magasin, Wilaya and Commune (read-only), Repère (editable), Position (« Mettre à jour ma position » when empty or imprecise).
3. « Type de client »: read-only Demi-gros with « Seul HOCO peut modifier votre type de client. » and « Demander une modification » (opens RA-33 with type Question and a prefilled subject).
4. « Identifiants » (optional text fields, editable until HOCO verifies them): RC, NIF, NIS, Article d'imposition.
5. « Documents »: one row per document type (Registre de commerce (RC), NIF, NIS, Article d'imposition (AI), Pièce d'identité, Contrat / accord, Autre) with « Ajouté le 14 nov. » and a view icon, or « Ajouter ».
6. « Enregistrer » in a StickyFooter once a field changed.

Data

Actions

• « Enregistrer » → profile.update with the changed fields only; snackbar « Profil mis à jour ».
• Photo or document: camera or file picker → files.createUpload (STORE_PHOTO up to 5 MB, or STORE_DOCUMENT up to 10 MB, PDF, JPEG or PNG) → PUT → files.completeUpload → profile.documents.add { type, fileId } with an Idempotency-Key (the photo goes through profile.update).
• View a document → its signed URL (5 minutes) in the image or PDF viewer.

Rules

• Editable by the reseller: business type, owner name, WhatsApp, email, landmark, position, photo, legal identifiers until verified, documents. Store name, main phone, address, wilaya and commune change through support (the wilaya decides the zone, the delegate and the support region). Every change is audited and visible to HOCO (AUD-02).
• The customer type cannot be changed here: profile.update refuses it (422 FIELD_NOT_EDITABLE).
• Documents are private files read through short-lived signed URLs (SEC-04).

States — Loading: skeleton. 400 VALIDATION_FAILED under the fields; 422 FILE_TOO_LARGE « Fichier trop lourd (10 Mo maximum). »; 422 FILE_TYPE_NOT_ALLOWED « Format non accepté : PDF, JPEG ou PNG. »; offline: read-only.

Copy — « Mon magasin » · « Changer la photo » · « Informations du magasin » · « Modifier dans Paramètres » · « Seul HOCO peut modifier votre type de client. » · « Demander une modification » · « Identifiants » · « Documents » · « Ajouté le {date} » · « Ajouter » · « Enregistrer » · « Profil mis à jour ».

Analytics — store_profile_updated with fields; store_document_added with type.

Acceptance criteria

• A document added here appears in the reseller's documents in the back-office (BO-11) and in the validation queue (BO-13) for a pending account.
• The customer type cannot be modified from the app.
• Changing the WhatsApp number is visible in the CRM record after saving.

RA-32 — Support: tickets, after-sales claims & WhatsAppCopy Anchor Link

Purpose — Give the reseller the fastest way to reach HOCO — WhatsApp to the support team of their region, a phone call, the FAQ — and follow their written requests and after-sales claims (SUP-01, SUP-03, SUP-04, SUP-05).

Entry points & exits — Assistance quick tile on RA-09, « Assistance et SAV » on RA-27, « Contacter l'assistance » on RA-22, /support. Exits to WhatsApp, the dialer, RA-33 (new request or claim), RA-34 (a request), RA-21 (to pick an order for a claim).

Layout

1. AppBar « Assistance ».
2. WhatsApp card (prominent, WhatsApp green): « Service client — Région Ouest », « Dim–Jeu 08:30–17:00 », number « 0770 90 03 10 », primary « Écrire sur WhatsApp ».
3. Secondary row: « Appeler HOCO » (main support phone) and the delegate's « Appeler Yacine » when assigned.
4. Two action cards: « Signaler un problème sur une commande (SAV) » — « Produit défectueux, endommagé, erroné ou manquant » — and « Poser une question ».
5. « Questions fréquentes »: Accordions with the first five FAQ entries and « Voir toute la FAQ ».
6. « Mes demandes »: Tabs « Toutes » · « SAV » · « Autres »; rows with number « TKT-2026-000045 », type label, subject, related order, last message preview, date, StatusBadge (En attente de votre réponse highlighted); SAV rows also show the claimed product and, once decided, the resolution (« Remplacement », « Avoir », « Retour », « Réparation », « Refusée »).
7. WhatsAppButton hidden here (the card replaces it).

Data

Actions — « Écrire sur WhatsApp » opens https://wa.me/<number>?text= with « Bonjour HOCO, je suis Magasin El Wafa (REV-000123). »; « Appeler » opens tel:; the SAV card → RA-33 in claim mode (order picker); the question card → RA-33 in ticket mode; a row → RA-34. Live events re-sort the list and set the unread dot.

Rules

• The WhatsApp number is the one of the support region of the wilaya declared in the account (SupportRegion, edited in BO-70); without a region, the default number (SUP-05, ADM-08). It never depends on the phone's position for a signed-in reseller.
• WhatsApp conversations stay outside the platform in V1 (no WhatsApp Business API before V2); anything that needs tracking — a claim, an invoice question — goes through a request.
• After-sales claims are possible on Livrée orders within settings.afterSales.windowDays (30 days).

States — Loading: card and row skeletons. No request: « Aucune demande en cours. » Offline: WhatsApp and phone still open (the apps handle the network); list cached. Pending accounts: everything works. Error on tickets.list: inline retry under « Mes demandes ».

Copy — « Assistance » · « Service client — Région {region} » · « Écrire sur WhatsApp » · « Appeler HOCO » · « Signaler un problème sur une commande (SAV) » · « Produit défectueux, endommagé, erroné ou manquant » · « Poser une question » · « Questions fréquentes » · « Voir toute la FAQ » · « Mes demandes » · « Toutes » · « SAV » · « Autres » · « Aucune demande en cours. »

Analytics — support_viewed; whatsapp_clicked with source: "support", region; support_call_clicked; faq_opened with index.

Acceptance criteria

• A reseller whose declared wilaya belongs to the « Ouest » region opens WhatsApp on that region's number; changing the region's number in BO-70 changes it in the app at the next refresh.
• Requests show the same status as in the back-office ticket list (BO-55).
• A request waiting for the reseller's answer is highlighted.

RA-33 — New ticket / after-sales claimCopy Anchor Link

Purpose — Open a written request to HOCO, or an after-sales claim (réclamation SAV) on items of a delivered order with the issue and photos, so that the back-office can diagnose and resolve it (SUP-01, SUP-04).

Entry points & exits — The two action cards of RA-32; « Signaler un problème (SAV) » and « Ouvrir une demande » on RA-22 (order prefilled); « Demander une modification » on RA-28; /support/new?orderId=&type=. Exit to RA-34 of the created request.

Layout — ticket mode (full screen):

1. AppBar « Nouvelle demande ».
2. Select « Type de demande »: Question, Problème de commande, Problème de livraison, Facturation, Autre — and Service après-vente (SAV), which switches to claim mode.
3. « Commande concernée » — order picker (recent orders), required for Problème de commande and Problème de livraison, optional otherwise.
4. TextField « Sujet » (5–120 characters), TextField « Message » (multiline, 10–2 000 characters).
5. « Pièces jointes » — Uploader, up to 5 images or PDFs.
6. StickyFooter: « Envoyer ».

Layout — claim mode (Service après-vente), steps on one screen:

1. AppBar « Réclamation SAV ».
2. « Commande » — the prefilled order card, or a picker of Livrée orders delivered within 30 days (« CMD-2026-000158 — livrée le 14 nov. »).
3. « Articles concernés » — the order's lines, each with a checkbox and, once checked, a QuantityStepper from 1 to the delivered quantity minus what is already claimed (« 10 livrés · 0 déjà réclamés »).
4. « Problème » — one RadioCard per issue: Produit défectueux, Produit endommagé, Mauvais article, Article manquant, Non conforme, Autre.
5. TextField « Description du problème » (20–2 000 characters), helper « Décrivez ce qui ne fonctionne pas, depuis quand, et l'état de l'emballage. »
6. « Photos » — Uploader with « Prendre une photo » and « Galerie », up to 6; required (at least one) for Produit défectueux, Produit endommagé, Mauvais article and Non conforme; helper « Photographiez le produit, son étiquette et l'emballage. »
7. Information: « HOCO étudie votre réclamation et vous propose une solution : remplacement, réparation, avoir ou retour. Vous serez notifié de la décision. »
8. StickyFooter: « Envoyer la réclamation ».

Data

Actions

• Photos and attachments upload in the background as soon as they are picked (images compressed to 2 000 px, EXIF removed).
• « Envoyer » → tickets.create { type, subject, message, orderId?, attachmentFileIds[] }; « Envoyer la réclamation » → tickets.create { type: "AFTER_SALES", orderId, items: [{ orderItemId, qty }], issue, message, attachmentFileIds[] } (the subject is generated: « SAV — HOCO N32 × 2 »). Both with an Idempotency-Key kept until success. Success → RA-34 with the snackbar « Demande envoyée — TKT-2026-000045 ».
• The form is kept as a draft on the device until sent.

Rules

• A claim needs a Livrée order of the reseller, within settings.afterSales.windowDays (30) of delivery, at least one line with a quantity not above the delivered quantity minus the quantities already claimed (SUP-04).
• Photos are required for the issues listed above; they are private files (SEC-04).
• The claim becomes a ticket of type Service après-vente (SAV) handled in the back-office (BO-69, BO-56): diagnosis, then a resolution — Remplacement (a free replacement order), Retour (a return request is created, RA-40), Avoir, Réparation, or Refusée with a reason.
• A simple return of intact goods (ordering mistake) is not a claim: it goes through RA-40.

States

Copy — « Nouvelle demande » · « Type de demande » · « Commande concernée » · « Sujet » · « Message » · « Pièces jointes » · « Envoyer » · « Réclamation SAV » · « Articles concernés » · « {delivered} livrés · {claimed} déjà réclamés » · « Problème » · « Description du problème » · « Photos » · « Photographiez le produit, son étiquette et l'emballage. » · « HOCO étudie votre réclamation et vous propose une solution : remplacement, réparation, avoir ou retour. Vous serez notifié de la décision. » · « Envoyer la réclamation » · « Demande envoyée — {number} ».

Analytics — ticket_created with type, hasOrder, attachments; after_sales_claim_created with issue, lineCount, photoCount, daysSinceDelivery.

Acceptance criteria

• A claim with two lines, an issue and three photos appears in the back-office after-sales queue (BO-69) with the order, lines, quantities, issue and photos.
• A defective-product claim cannot be sent without a photo.
• A claim 31 days after delivery is refused with the window message.
• A plain question can be sent without an order.

RA-34 — Ticket conversationCopy Anchor Link

Purpose — Exchange messages with HOCO on a request, and see the decision on an after-sales claim with what it produced (SUP-01, SUP-04).

Entry points & exits — Rows of RA-32; RA-33 after sending; pushes ticket.replied, ticket.status_changed, ticket.resolved, ticket.rejected; /support/tickets/{ticketId}. Exits to RA-22 (related order or replacement order), RA-40 (return created by the resolution), the credit-note PDF.

Layout

1. AppBar: « TKT-2026-000045 » and the StatusBadge.
2. Header card: subject, type, related order (link); for a claim, the claimed lines (thumbnail, name, quantity) and the issue.
3. Resolution card (claims, once decided):
   • Remplacement: « Remplacement accordé — commande CMD-2026-000201 » → RA-22 (it follows the normal flow, at no charge);
   • Retour: « Retour accepté — RET-2026-000012 » with the return instructions → RA-40;
   • Avoir: « Avoir AV-… de 4 980,00 DA émis » with « Voir l'avoir (PDF) »;
   • Réparation: « Réparation sous garantie » and HOCO's instructions;
   • Refusée: danger « Réclamation refusée — Motif : produit hors garantie ».
4. Message thread: reseller bubbles right, HOCO bubbles left with the agent's first name (« Samia — Service client »); attachments as thumbnails; system lines (« Demande résolue le 18 nov. »); date separators.
5. Composer: text field, attachment button, send — hidden when the request is Fermée.
6. On Résolue: banner « Votre problème est-il réglé ? » with « Oui, clôturer » and « Non, répondre »; closing opens a 1-to-5 rating with an optional comment.

Data

Actions

• Send → tickets.reply { message, attachmentFileIds } with an Idempotency-Key: the bubble appears at once with a clock icon, then a check; on failure « Échec de l'envoi » with « Réessayer » (same key).
• Live ticket.replied → refetch tickets.get and append; ticket.resolved → resolution card appears.
• « Oui, clôturer » → tickets.close { rating, comment }. Replying to a Résolue request reopens it.

Rules — Statuses: Ouverte, En cours de traitement, En attente de votre réponse, Résolue, Rejetée, Fermée. A closed request is read-only; a new problem needs a new request. Resolved requests close automatically after a delay set in the back-office.

States — Loading: thread skeleton. 404 NOT_FOUND: « Demande introuvable ». Offline: cached thread, composer disabled. Sending: bubble with clock.

Copy — « Samia — Service client » · « Remplacement accordé — commande {number} » · « Retour accepté — {number} » · « Avoir {number} de {amount} émis » · « Voir l'avoir (PDF) » · « Réparation sous garantie » · « Réclamation refusée — Motif : {reason} » · « Votre problème est-il réglé ? » · « Oui, clôturer » · « Non, répondre » · « Échec de l'envoi » · « Réessayer ».

Analytics — ticket_viewed with type, status; ticket_replied; ticket_closed with rating; after_sales_resolution_viewed with resolution.

Acceptance criteria

• A reply typed in the back-office appears in an open conversation within 5 seconds and as a push otherwise.
• A claim resolved by replacement links to the free replacement order; by return, to the return request; by credit note, to its PDF.
• Internal notes of the back-office never appear.

RA-35 — SettingsCopy Anchor Link

Purpose — Notification preferences, language, security (password, sessions, phone number) and legal information (NOT-06, AUTH-06, NFR-06).

Entry points & exits — « Paramètres » on RA-27; the forced password change after sign-in (mustChangePassword); push security.new_device; /settings. Exits: sub-screens below, the in-app browser for legal texts.

Layout

1. « Notifications » — one row per category with a push switch: Commandes et compte (locked on, « Toujours activé »), Sécurité (locked on), Offres et promotions, Annonces; SMS switch for the promotional category when the channel is offered.
2. « Langue » — « Français »; Arabic and English listed « Bientôt disponible » until settings.i18n.enabledLocales includes them.
3. « Sécurité » — Changer le mot de passe (form: current, new, confirm); Appareils connectés (list: device name, app — Application revendeur or Web revendeur — last activity, « Cet appareil », « Déconnecter »); Changer de numéro de téléphone (new number → SMS code → confirmation).
4. « Informations » — Conditions d'utilisation, Politique de confidentialité, Demander la suppression de mon compte, « Version 1.0.0 (42) ».

Data — notifications.preferences.get → categories[] (category, channels, locked); auth.sessions.list → items[] (id, clientApp, device.name, device.platform, lastActiveAt, current); settings.legal.termsUrl, privacyUrl.

Actions

• Switch → notifications.preferences.update (optimistic; reverted on error).
• Password → auth.password.change { currentPassword, newPassword }: other sessions are revoked; snackbar « Mot de passe modifié ». Errors: INVALID_CURRENT_PASSWORD « Mot de passe actuel incorrect. », PASSWORD_TOO_WEAK, PASSWORD_REUSED « Choisissez un mot de passe différent de l'actuel. »
• « Déconnecter » on a session → auth.sessions.revoke.
• Phone change → auth.otp.send { purpose: "PHONE_CHANGE", phone } → RA-04 → me.update with the verification token; 409 PHONE_ALREADY_EXISTS « Ce numéro appartient déjà à un autre compte. »
• « Demander la suppression de mon compte » → Dialog explaining that the account will be deactivated and the history kept for legal reasons (SEC-06) → opens RA-33 prefilled (subject « Suppression de compte »). Google Play requires an in-app path to request account deletion.

Rules — Transactional and security notifications cannot be disabled (NOT-06); language changes Me.locale with me.update (push and SMS language follow it).

States — Loading: skeleton. Offline: switches disabled. mustChangePassword: the password form opens alone, without back, until changed.

Copy — « Paramètres » · « Notifications » · « Toujours activé » · « Langue » · « Bientôt disponible » · « Sécurité » · « Changer le mot de passe » · « Appareils connectés » · « Cet appareil » · « Déconnecter » · « Changer de numéro de téléphone » · « Informations » · « Conditions d'utilisation » · « Politique de confidentialité » · « Demander la suppression de mon compte » · « Mot de passe modifié ».

Analytics — notification_preference_changed with category, on; password_changed; session_revoked; phone_changed; account_deletion_requested.

Acceptance criteria

• Turning off Offres et promotions stops promotional pushes while order pushes keep arriving.
• Changing the password signs out the reseller's other devices (web included).
• The sessions list shows the web session as Web revendeur and can revoke it.