automatically apply formulas on click

counter/static/bundled/counter/counter-click-index.ts

@@ -1,6 +1,10 @@
 import { AlertMessage } from "#core:utils/alert-message";
 import { BasketItem } from "#counter:counter/basket";
-import type { CounterConfig, ErrorMessage } from "#counter:counter/types";
+import type {
+  CounterConfig,
+  ErrorMessage,
+  ProductFormula,
+} from "#counter:counter/types";
 import type { CounterProductSelect } from "./components/counter-product-select-index.ts";
 
 document.addEventListener("alpine:init", () => {
@@ -47,15 +51,43 @@ document.addEventListener("alpine:init", () => {
 
       this.basket[id] = item;
 
+      this.checkFormulas();
+
       if (this.sumBasket() > this.customerBalance) {
         item.quantity = oldQty;
         if (item.quantity === 0) {
           delete this.basket[id];
         }
-        return gettext("Not enough money");
+        this.alertMessage.display(gettext("Not enough money"), { success: false });
       }
+    },
 
-      return "";
+    checkFormulas() {
+      const products = new Set(
+        Object.keys(this.basket).map((i: string) => Number.parseInt(i)),
+      );
+      const formula: ProductFormula = config.formulas.find((f: ProductFormula) => {
+        return f.products.every((p: number) => products.has(p));
+      });
+      if (formula === undefined) {
+        return;
+      }
+      for (const product of formula.products) {
+        const key = product.toString();
+        this.basket[key].quantity -= 1;
+        if (this.basket[key].quantity <= 0) {
+          this.removeFromBasket(key);
+        }
+      }
+      this.alertMessage.display(
+        interpolate(
+          gettext("Formula %(formula)s applied"),
+          { formula: config.products[formula.result.toString()].name },
+          true,
+        ),
+        { success: true },
+      );
+      this.addToBasket(formula.result.toString(), 1);
     },
 
     getBasketSize() {
@@ -70,14 +102,7 @@ document.addEventListener("alpine:init", () => {
         (acc: number, cur: BasketItem) => acc + cur.sum(),
         0,
       ) as number;
-      return total;
-    },
-
-    addToBasketWithMessage(id: string, quantity: number) {
-      const message = this.addToBasket(id, quantity);
-      if (message.length > 0) {
-        this.alertMessage.display(message, { success: false });
-      }
+      return Math.round(total * 100) / 100;
     },
 
     onRefillingSuccess(event: CustomEvent) {
@@ -116,7 +141,7 @@ document.addEventListener("alpine:init", () => {
           this.finish();
         }
       } else {
-        this.addToBasketWithMessage(code, quantity);
+        this.addToBasket(code, quantity);
       }
       this.codeField.widget.clear();
       this.codeField.widget.focus();

counter/static/bundled/counter/types.d.ts

@@ -7,10 +7,16 @@ export interface InitialFormData {
   errors?: string[];
 }
 
+export interface ProductFormula {
+  result: number;
+  products: number[];
+}
+
 export interface CounterConfig {
   customerBalance: number;
   customerId: number;
   products: Record<string, Product>;
+  formulas: ProductFormula[];
   formInitial: InitialFormData[];
   cancelUrl: string;
 }

counter/static/counter/css/counter-click.scss

@@ -10,12 +10,12 @@
   float: right;
 }
 
-.basket-error-container {
+.basket-message-container {
   position: relative;
   display: block
 }
 
-.basket-error {
+.basket-message {
   z-index: 10; // to get on top of tomselect
   text-align: center;
   position: absolute;

counter/templates/counter/counter_click.jinja

@@ -32,13 +32,11 @@
   <div id="bar-ui" x-data="counter({
                            customerBalance: {{ customer.amount }},
                            products: products,
+                           formulas: formulas,
                            customerId: {{ customer.pk }},
                            formInitial: formInitial,
                            cancelUrl: '{{ cancel_url }}',
                            })">
-    <noscript>
-      <p class="important">Javascript is required for the counter UI.</p>
-    </noscript>
 
     <div id="user_info">
       <h5>{% trans %}Customer{% endtrans %}</h5>
@@ -88,11 +86,12 @@
 
           <form x-cloak method="post" action="" x-ref="basketForm">
 
-            <div class="basket-error-container">
+            <div class="basket-message-container">
               <div
                 x-cloak
-                class="alert alert-red basket-error"
-                x-show="alertMessage.show"
+                class="alert basket-message"
+                :class="alertMessage.success ? 'alert-green' : 'alert-red'"
+                x-show="alertMessage.open"
                 x-transition.duration.500ms
                 x-text="alertMessage.content"
               ></div>
@@ -111,9 +110,9 @@
                     </div>
                   </template>
 
-                  <button @click.prevent="addToBasketWithMessage(item.product.id, -1)">-</button>
+                  <button @click.prevent="addToBasket(item.product.id, -1)">-</button>
                   <span class="quantity" x-text="item.quantity"></span>
-                  <button @click.prevent="addToBasketWithMessage(item.product.id, 1)">+</button>
+                  <button @click.prevent="addToBasket(item.product.id, 1)">+</button>
 
                   <span x-text="item.product.name"></span> :
                   <span x-text="item.sum().toLocaleString(undefined, { minimumFractionDigits: 2 })">€</span>
@@ -213,7 +212,7 @@
                 <h5 class="margin-bottom">{{ category }}</h5>
                 <div class="row gap-2x">
                   {% for product in categories[category] -%}
-                    <button class="card shadow" @click="addToBasketWithMessage('{{ product.id }}', 1)">
+                    <button class="card shadow" @click="addToBasket('{{ product.id }}', 1)">
                       <img
                         class="card-image"
                         alt="image de {{ product.name }}"
@@ -252,6 +251,18 @@
         },
       {%- endfor -%}
     };
+    const formulas = [
+      {%- for formula in formulas -%}
+        {
+          result: {{ formula.result_id }},
+          products: [
+            {%- for product in formula.products.all() -%}
+              {{ product.id }},
+            {%- endfor -%}
+          ]
+        },
+      {%- endfor -%}
+    ];
     const formInitial = [
       {%- for f in form -%}
         {%- if f.cleaned_data -%}

counter/views/click.py

@@ -12,6 +12,7 @@
 # OR WITHIN THE LOCAL FILE "LICENSE"
 #
 #
+from collections import defaultdict
 
 from django.core.exceptions import PermissionDenied
 from django.db import transaction
@@ -31,6 +32,7 @@ from counter.forms import BasketForm, RefillForm
 from counter.models import (
     Counter,
     Customer,
+    ProductFormula,
     ReturnableProduct,
     Selling,
 )
@@ -206,12 +208,13 @@ class CounterClick(
         """Add customer to the context."""
         kwargs = super().get_context_data(**kwargs)
         kwargs["products"] = self.products
-        kwargs["categories"] = {}
+        kwargs["formulas"] = ProductFormula.objects.filter(
+            result__in=self.products
+        ).prefetch_related("products")
+        kwargs["categories"] = defaultdict(list)
         for product in kwargs["products"]:
             if product.product_type:
-                kwargs["categories"].setdefault(product.product_type, []).append(
-                    product
-                )
+                kwargs["categories"][product.product_type].append(product)
         kwargs["customer"] = self.customer
         kwargs["cancel_url"] = self.get_success_url()