Interface publique en React (PWA)

Depuis la version 2.0 du module, la prise de commande en ligne se fait via une PWA (Progressive Web App) écrite en React. Cette interface remplace l'ancien parcours basé sur TakePOS pour l'usage public, tout en conservant phone.php / invoice.php pour les bornes physiques en magasin.

Vue d'ensemble du parcours client

1. Le client ouvre l'URL publique du module : /custom/clickncollect/public/.
2. Le serveur vérifie que la prise de commande est activée (CLICKNCOLLECT_ONLINE_ORDER_ENABLED) et que le magasin est ouvert selon le calendrier (CLICKNCOLLECT_ORDER_CALENDAR). Si ce n'est pas le cas, il redirige vers CLICKNCOLLECT_REDIRECT_ORDER_CLOSED (ou affiche un message d'attente si la redirection n'est pas configurée).
3. Sinon, le navigateur est redirigé vers /custom/clickncollect/pwa/index.html qui charge la PWA.
4. La PWA appelle l'API REST (/custom/clickncollect/pwa/api.php) pour le catalogue, les créneaux, le panier, la commande et le paiement.
5. Au moment du paiement, un nouvel onglet ouvre newpayment.php (système de paiement Dolibarr standard). La PWA reste en arrière-plan, polle le statut toutes les 3 secondes et bascule sur l'écran "Payée" dès que Dolibarr enregistre le règlement.

Le parcours en images

La carte affiche les catégories de produits exposées au public :

Chaque fiche produit permet de choisir la quantité et, si le produit en propose, des options comme la sauce :

Le panier liste les articles retenus, leurs options et le total :

La prise de commande commence par les coordonnées du client :

Puis le choix du créneau de retrait, limité aux horaires configurés :

Après validation, la page de suivi affiche la commande et le bouton de paiement :

URL publiques

Configuration

Les options pertinentes pour la PWA, gérées depuis l'admin Dolibarr :

Voir aussi la page Horaires de vente en ligne pour le format détaillé du calendrier.

Multilingue (options produits)

Les options des produits (cuisson, sauce, taille...) sont stockées dans la table c_clickncollect_var avec les colonnes code (identifiant interne, jamais traduit) et label (libellé affiché par défaut).

Pour proposer la PWA dans plusieurs langues, ajoutez les traductions correspondantes dans langs/<code-langue>/clickncollect.lang en utilisant la valeur de code ou categ comme clé. L'API renvoie automatiquement le libellé localisé via $langs->trans(), avec retour sur label quand aucune traduction n'est définie.

Exemple :

# langs/fr_FR/clickncollect.lang
COOKING_RARE = Saignant
COOKING_MEDIUM = À point
COOKING_WELL_DONE = Bien cuit

avec dans c_clickncollect_var :

Personnalisation visuelle

La PWA suit le manifeste fourni par le module SmartAuth (en s'appuyant sur des constantes Dolibarr). Voir la documentation SmartAuth pour les variables *_PWA_NAME, *_PWA_THEME_COLOR, *_PWA_BACKGROUND_COLOR, etc.

Le panier est sauvegardé dans la base IndexedDB du navigateur (store cart de la base nommée d'après VITE_APP_NAME), via la classe Db de SmartCommon (wrapper Dexie). Le versioning du schéma est géré par Dexie (db.version(N)) : lorsqu'on incrémente la version, Dexie applique automatiquement la migration, sans avoir à purger côté navigateur.

Limites par sécurité

Les endpoints publics POST /customer et POST /order sont rate-limités par IP (10 créations clients / 5 min, 5 commandes / 5 min) via la classe SmartAuth\Api\RateLimiter. Au-delà, l'API renvoie un code HTTP 429 avec un délai à attendre.

Reprise de l'ancien flow TakePOS

Pour les bornes physiques en magasin, l'ancien parcours TakePOS reste accessible directement via les URL /custom/clickncollect/phone.php?... et /custom/clickncollect/invoice.php?.... Aucune modification n'est nécessaire de ce côté ; la PWA et les bornes coexistent.