tek-ms-recap 1.0.3 → 1.0.5

package/dist/Recap/index.d.ts

@@ -0,0 +1,24 @@
+export interface RecapItem {
+    id: string;
+    name: string;
+    icon: string;
+    color: string;
+    category: string;
+    price: number;
+    quantity: number;
+}
+export interface RenderInterfaceRecap {
+    cart: RecapItem[];
+    onConfirm: (amountReceived: number, change: number) => void;
+    onCancel: () => void;
+    onRemove: (idx: number) => void;
+}
+export declare class RecapSheet {
+    private el;
+    private items;
+    constructor(mountPoint: HTMLElement);
+    getItems(): RecapItem[];
+    setItems(_items: RecapItem[]): void;
+    onClose(): void;
+    render(interfaceRender: RenderInterfaceRecap): void;
+}

package/dist/Recap/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/constants/index.d.ts

@@ -0,0 +1 @@
+export declare function fmt(n: number): string;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export type { RenderInterfaceRecap } from './Recap';
+export type { RecapItem } from './Recap';
+export { RecapSheet } from './Recap';

package/dist/main.d.ts

@@ -0,0 +1 @@
+import 'tek-ms-ds/dist/style.css';

package/dist/ms-recap.js

@@ -0,0 +1,95 @@
+//#region src/constants/index.ts
+function e(e) {
+	return e.toLocaleString("fr-FR").replace(/,/g, " ") + " F";
+}
+//#endregion
+//#region src/Recap/index.ts
+var t = class {
+	el;
+	items = [];
+	constructor(e) {
+		this.el = e;
+	}
+	getItems() {
+		return this.items;
+	}
+	setItems(e) {
+		this.items = e;
+	}
+	onClose() {
+		this.el.innerHTML = "";
+	}
+	render(t) {
+		let n = t.cart.reduce((e, t) => e + t.quantity * t.price, 0);
+		this.setItems(t.cart), this.el.innerHTML = `
+      <div class="overlay show" id="recap-overlay">
+        <div class="sheet modal-recap" style="max-height:88vh;">
+          <div class="sheet-handle"></div>
+          <h3>Récapitulatif</h3>
+          <div class="catalog-price" style="margin-bottom:10px;">Vérifiez avant de confirmer</div>
+          <div class="recap-items" id="recap-items">
+            ${t.cart.map((t, n) => `
+              <div class="recap-row">
+                <span class="ic">${t.icon}</span>
+                <div class="info">
+                  <div class="pname">${t.name}</div>
+                  <div class="qty">× ${t.quantity}</div>
+                </div>
+                <span class="amt">${e(t.quantity * t.price)}</span>
+                <button class="del" data-idx="${n}">✕</button>
+              </div>
+            `).join("")}
+          </div>
+          <div class="recap-totals">
+            <div class="sum-row"><span>Sous-total</span><span>${e(n)}</span></div>
+            <div class="sum-row"><span>Remise</span><span style="color:var(--green);">— 0 F</span></div>
+          </div>
+          <div class="recap-total-box">
+            <span class="lab">TOTAL</span>
+            <span class="amt">${e(n)}</span>
+          </div>
+          <div class="price-field">
+            <div style="flex:1;">
+              <label>MONTANT REÇU</label>
+              <input type="number" id="amount-received" min="0" step="1" placeholder="0">
+            </div>
+            <span class="unit">FCFA</span>
+          </div>
+          <div class="change-row" id="change-row">
+            <span class="lab">Monnaie à rendre</span>
+            <span class="amt" id="change-amount">${e(0)}</span>
+          </div>
+          <div class="payment-hint">Espèces · Mobile Money · Carte</div>
+          <div class="sheet-actions">
+            <button class="btn-cancel" id="btn-cancel">Modifier</button>
+            <button class="btn-confirm" id="btn-confirm" disabled>Confirmer la vente</button>
+          </div>
+        </div>
+      </div>
+    `;
+		let r = this.el.querySelector("#amount-received"), i = this.el.querySelector("#change-amount"), a = this.el.querySelector("#change-row"), o = this.el.querySelector("#btn-confirm"), s = () => {
+			let e = parseFloat(r.value);
+			return Number.isFinite(e) ? e : 0;
+		}, c = () => {
+			let t = s(), r = t - n;
+			i.textContent = e(Math.max(0, r));
+			let c = t < n;
+			a.classList.toggle("insufficient", c), o.disabled = c || t === 0;
+		};
+		r.addEventListener("input", c), c(), this.el.querySelectorAll(".del").forEach((e) => {
+			e.addEventListener("click", () => {
+				let n = parseInt(e.dataset.idx ?? "0");
+				t.onRemove(n);
+			});
+		}), this.el.querySelector("#btn-cancel")?.addEventListener("click", () => {
+			t.onCancel();
+		}), o.addEventListener("click", () => {
+			let e = s();
+			if (e < n) return;
+			let r = e - n;
+			t.onConfirm(e, r);
+		});
+	}
+};
+//#endregion
+export { t as RecapSheet };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tek-ms-recap",
   "private": false,
-  "version": "v1.0.3",
+  "version": "v1.0.5",
   "type": "module",
   "main": "./dist/ms-recap.js",
   "module": "./dist/ms-recap.js",