Documentation développeur Caisses Caisse v2 Technique Composants

November 26, 2025 at 2:48 AM

Composants de la caisse v2

CaisseComponent

Rôle

Composant principal qui orchestre l’interface utilisateur de la caisse.

Localisation

projects/caisse-ui/src/app/caisse/caisse.component.ts

Structure

Le composant gère :

  • L’affichage selon le statut de la caisse (CaisseStatus)
  • Les interactions avec le panier (PosBasketComposerComponent)
  • Les modaux de paiement
  • La finalisation du panier

États d’affichage

Selon CaisseService.status() :

  • BOOTING : Affichage de CaisseBootingComponent (écran de démarrage)
  • READY_OPEN : Bouton pour ouvrir une nouvelle session
  • READY_CONTINUE : Bouton pour continuer une session existante
  • READY_MUST_CLOSE : Message indiquant qu’une session d’un autre jour doit être fermée
  • ERROR_NOT_OWNER : Erreur indiquant que la session appartient à un autre utilisateur
  • WORKING : Interface de travail avec onglets et panier

Méthodes principales

ngOnInit()

Initialisation du composant :

  • Si le statut est WORKING, appelle quickStart() pour recharger les données

ngAfterViewInit()

Après l’initialisation de la vue :

  • Configure un effet Angular pour surveiller l’état de persistance du panier
  • Met à jour le signal basketComposerPersisting

startSession()

Démarrage d’une nouvelle session :

  • Affiche le modal PosOpenModalComponent
  • Attend la saisie du montant d’ouverture
  • Appelle CaisseService.openSession() avec le montant
  • Affiche un modal d’attente pendant l’ouverture

continueSession()

Reprise d’une session existante :

  • Appelle CaisseService.continueSession()
  • Affiche un modal d’attente pendant la reprise

closesSession()

Fermeture de la session courante :

  • Affiche le modal PosCloseModalComponent
  • Le modal gère le processus de fermeture complet

pressedProduct(btn)

Ajout d’un produit au panier :

  • Vérifie que le produit existe et n’est pas supprimé
  • Appelle basketComposer.addProduct()

pressedShow(show)

Ajout d’une séance au panier :

  • Appelle basketComposer.addShow()

Méthodes de paiement

  • payCash() : Paiement en espèce
  • payCard() : Paiement par carte (TPE)
  • payCheck() : Paiement par chèque
  • payPrepaid() : Paiement par prépayé
  • payVoucher() : Paiement par bon
  • payPassCard() : Paiement par carte d’abonnement

Toutes ces méthodes :

  1. Vérifient le numéro de beeper si requis
  2. Affichent le modal de paiement correspondant
  3. Créent une PosBasketPaymentEntry avec les données du paiement
  4. Ajoutent l’entrée au panier
  5. Appellent basketComposer.basketUpdated() pour recalculer

finishBasketPressed(printables)

Finalisation du panier :

  • Vérifie que le paiement est complet (totalPaid >= totalWithTaxReal)
  • Appelle FinalizeBasketService.finalize()
  • Gère les erreurs et met à jour le panier avec la réponse
  protected async finishBasketPressed(printables: Printable[]) {
    if (!this.caisse.posData) {
      throw new Error("no posData");
    }
    if (!this.caisse.basket) {
      throw new Error("no basket");
    }

    // Check if payment is complete: totalPaid must be >= totalWithTaxReal
    // We use totalPaid instead of totalRemaining because totalRemaining uses sum(entry.amount)
    // which doesn't account for overpayment
    if (this.caisse.basket.payment.totalPaid < this.caisse.basket.payment.totalWithTaxReal) {
      await MessageBoxComponent.alert(this.modalService, `Il reste ${this.caisse.basket.payment.totalRemaining} ${this.caisse.posData.territory.configuration.displayLanguageCode} à régler`, "Panier");
      return;
    }

    this.disabled.set(true);
    try {
      this.finalizeBasketService.finalize().subscribe({
        next: (response) => {
          this.logger.info('Finalization completed successfully');
          this.caisse.basket = response.basket;
        },
        error: (error) => {
          this.logger.error('Error during finalization:', error);
        },
        complete: () => {
          this.disabled.set(false);
        }
      });
    } catch (error) {
      this.logger.error('Error in finishBasketPressed:', error);
      this.disabled.set(false);
    }
  }

WorkComponent

Rôle

Composant utilisé pour le mode preview/test de la caisse.

Localisation

projects/caisse-ui/src/app/work/work.component.ts

Différences avec CaisseComponent

  • Pas de gestion de session (pas d’ouverture/fermeture)
  • Panier indépendant
  • Utilisé pour les tests et le développement
  • Même logique de paiement et finalisation que CaisseComponent

CaisseBootingComponent

Rôle

Affiche l’écran de démarrage pendant le boot de la caisse.

Localisation

projects/caisse-ui/src/app/caisse/booting/booting.component.ts

Affichage

  • Badge du cinéma (CinemaBadgeComponent)
  • Badge de l’entreprise (CompanyBadgeComponent)
  • Badge de l’utilisateur (UserBadgeLiteComponent)
  • Statut de la caisse (affiché dans le template selon CaisseStatus)

Modaux de paiement

PayCashModalComponent

Modal pour le paiement en espèce.

Localisation : projects/core-lib/src/lib/components/paycash/paycash.component.ts

Fonctionnalités :

  • Saisie du montant donné par le client
  • Calcul automatique de la monnaie à rendre
  • Gestion des arrondis (XPF uniquement)
  • Ouverture automatique du tiroir caisse

Résultat :

interface CashPayResult {
  isOk: boolean;
  toPay: number;        // Montant original à payer
  toPayReal: number;    // Montant arrondi (si arrondis activés)
  given: number;        // Montant donné par le client
  change: number;       // Monnaie à rendre
}

PayTpeModalComponent

Modal pour le paiement par carte (TPE).

Localisation : projects/caisse-ui/src/app/paytpe/paytpe.component.ts

Fonctionnalités :

  • Communication avec le terminal de paiement
  • Gestion des différents types de cartes (CB, contactless, AMEX, etc.)
  • Possibilité de forcer le paiement en cas d’erreur matérielle

Résultat :

interface TpePayResult {
  status: TpePayStatus;
  methodUsed: PaymentMethod;
  toPay: number;
  terminalData: KVMapString<unknown>;
  terminalResponse: KVMapString<unknown>;
}

PayCheckModalComponent

Modal pour le paiement par chèque.

Localisation : projects/core-lib/src/lib/components/paycheck/paycheck.component.ts

Fonctionnalités :

  • Saisie du montant
  • Saisie du numéro de chèque (CMC7)
  • Sélection de la banque

PayPrepaidModalComponent

Modal pour le paiement par prépayé.

Localisation : projects/caisse-ui/src/app/payprepaid/payprepaid.component.ts

Fonctionnalités :

  • Recherche de prépayés disponibles
  • Calcul automatique de l’utilisation optimale des prépayés
  • Application des prépayés aux lignes de séances

PayVoucherModalComponent

Modal pour le paiement par bon.

Localisation : projects/caisse-ui/src/app/payvoucher/payvoucher.component.ts

Fonctionnalités :

  • Recherche de bons disponibles
  • Vérification de la validité
  • Application au panier

PayCardModalComponent

Modal pour le paiement par carte d’abonnement.

Localisation : projects/caisse-ui/src/app/paycard/paycard.component.ts

Fonctionnalités :

  • Recherche de carte
  • Application des réductions selon le type de carte
  • Gestion des places utilisées

Modaux de session

PosOpenModalComponent

Modal pour l’ouverture d’une session.

Localisation : projects/caisse-ui/src/app/posopen/posopen.component.ts

Fonctionnalités :

  • Saisie du montant d’ouverture du tiroir caisse
  • Vérification du montant maximum autorisé
  • Ouverture automatique du tiroir caisse

Résultat :

interface OpenSessionResult {
  doOpen: boolean;
  cashDrawerAmount: number;
}

PosCloseModalComponent

Modal pour la fermeture d’une session.

Localisation : projects/caisse-ui/src/app/posclose/posclose.component.ts

Fonctionnalités :

  • Comptage de la caisse (billets et pièces)
  • Vérification de la cohérence avec les paiements en espèce
  • Génération et impression/téléchargement du bordereau de remise

Flux de fermeture :

  1. Chargement de la session avec statistiques
  2. Initialisation des items de comptage
  3. Comptage de la caisse par l’utilisateur
  4. Vérification de la cohérence
  5. Fermeture via API
  6. Affichage du modal de confirmation (impression/téléchargement)
  7. Génération du PDF du bordereau
  8. Impression ou téléchargement selon le choix
  9. Logout et redirection vers la page de login

Composant de panier : PosBasketComposerComponent

Rôle

Composant qui affiche et gère le panier.

Localisation

projects/core-lib/src/lib/components/posbasketcomposer/posbasketcomposer.component.ts

Fonctionnalités

  • Affichage des lignes du panier
  • Affichage des paiements
  • Affichage des totaux
  • Boutons d’ajout de produits/séances
  • Boutons de paiement
  • Bouton de finalisation

Méthodes principales

  • addProduct(btn) : Ajout d’un produit
  • addShow(show) : Ajout d’une séance
  • basketUpdated() : Notification de mise à jour du panier (déclenche recalcul)
  • navigated() : Notification de navigation (pour optimisations)

Composants d’onglets

PosInterfaceTabProductsComponent

Onglet affichant les produits disponibles.

Localisation : projects/core-lib/src/lib/components/posinterfacetabproducts/

PosInterfaceTabShowsTodayComponent

Onglet affichant les séances du jour.

Localisation : projects/core-lib/src/lib/components/posinterfacetabshowstoday/

PosInterfaceTabShowsPresaleComponent

Onglet affichant les séances en prévente.

Localisation : projects/core-lib/src/lib/components/posinterfacetabshowspresale/

PosInterfaceTabCardRefillComponent

Onglet pour la recharge de cartes.

Localisation : projects/core-lib/src/lib/components/posinterfacetabcardrefill/

PosInterfaceTabVoucherComponent

Onglet pour la gestion des bons.

Localisation : projects/core-lib/src/lib/components/posinterfacetabvoucher/

PosInterfaceTabUserSessionsComponent

Onglet affichant les sessions utilisateur.

Localisation : projects/core-lib/src/lib/components/posinterfacetabusersessions/

PosInterfaceTabWebWithdrawalComponent

Onglet pour les retraits web.

Localisation : projects/core-lib/src/lib/components/posinterfacetabwebwithdrawal/