tek-ms-recap 1.0.6 → 1.0.8

package/dist/Recap/index.d.ts

@@ -8,17 +8,22 @@ export interface RecapItem {
     quantity: number;
 }
 export interface RenderInterfaceRecap {
-    cart: RecapItem[];
-    onConfirm: (amountReceived: number, change: number) => void;
-    onCancel: () => void;
-    onRemove: (idx: number) => void;
+    items: RecapItem[];
+    onConfirm: (items: RecapItem[]) => void;
+    onCancel: (items: RecapItem[]) => void;
 }
 export declare class RecapSheet {
     private el;
     private items;
+    private total;
     constructor(mountPoint: HTMLElement);
     getItems(): RecapItem[];
     setItems(_items: RecapItem[]): void;
+    getTotal(): number;
+    setTotal(_total: number): void;
     onClose(): void;
+    removeFromCartItems(idx: number): void;
+    private renderItems;
+    private renderRecapTotal;
     render(interfaceRender: RenderInterfaceRecap): void;
 }

package/dist/ms-recap.js

@@ -7,6 +7,7 @@ function e(e) {
 var t = class {
 	el;
 	items = [];
+	total = 0;
 	constructor(e) {
 		this.el = e;
 	}
@@ -16,37 +17,58 @@ var t = class {
 	setItems(e) {
 		this.items = e;
 	}
+	getTotal() {
+		return this.total;
+	}
+	setTotal(e) {
+		this.total = e;
+	}
 	onClose() {
-		this.el.innerHTML = "";
+		this.setItems([]), this.el.innerHTML = "";
+	}
+	removeFromCartItems(e) {
+		let t = this.getItems();
+		t.splice(e, 1), this.setItems(t), this.renderItems(), this.renderRecapTotal(), t.length == 0 && this.onClose();
+	}
+	renderItems() {
+		this.el.querySelector("#recap-items").innerHTML = `
+      ${this.getItems().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" style="color:var(--rust)">× ${t.quantity}</div>
+        </div>
+        <span class="amt">${e(t.price)}</span>
+        <button class="del" data-idx="${n}">✕</button>
+      </div>
+    `).join("")}
+    `, this.el.querySelectorAll(".del").forEach((e) => {
+			e.addEventListener("click", () => {
+				let t = parseInt(e.dataset.idx ?? "0");
+				this.removeFromCartItems(t);
+			});
+		});
+	}
+	renderRecapTotal() {
+		let t = this.getItems().reduce((e, t) => e + t.price * t.quantity, 0);
+		this.setTotal(t), this.el.querySelector("#recap-total").innerHTML = `${e(t)}`, this.el.querySelector("#total").innerHTML = `${e(t)}`;
 	}
 	render(t) {
-		let n = t.cart.reduce((e, t) => e + t.quantity * t.price, 0);
-		this.setItems(t.cart), this.el.innerHTML = `
+		this.setItems(t.items), 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-items" id="recap-items"></div>
           <div class="recap-totals">
-            <div class="sum-row"><span>Sous-total</span><span>${e(n)}</span></div>
+            <div class="sum-row"><span>Sous-total</span><span id="recap-total">${e(this.getTotal())}</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>
+            <span class="amt" id="total">${e(this.getTotal())}</span>
           </div>
           <div class="price-field">
             <div style="flex:1;">
@@ -67,28 +89,20 @@ var t = class {
         </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);
+		let n = this.el.querySelector("#amount-received"), r = this.el.querySelector("#change-amount"), i = this.el.querySelector("#change-row"), a = this.el.querySelector("#btn-confirm"), o = () => {
+			let e = parseFloat(n.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;
+		}, s = () => {
+			let t = o(), n = t - this.getTotal();
+			r.textContent = e(Math.max(0, n));
+			let s = t < this.getTotal();
+			i.classList.toggle("insufficient", s), a.disabled = s || 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);
-		});
+		n.addEventListener("input", s), s(), this.el.querySelector("#btn-cancel")?.addEventListener("click", () => {
+			t.onCancel(this.getItems()), this.onClose();
+		}), a.addEventListener("click", () => {
+			t.onConfirm(this.getItems());
+		}), this.renderItems(), this.renderRecapTotal();
 	}
 };
 //#endregion

package/package.json

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