tek-ms-recap 1.0.13 → 1.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -15,7 +15,7 @@ export interface Customer {
15
15
  export interface RenderInterfaceRecap {
16
16
  items: RecapItem[];
17
17
  customers: Customer[];
18
- onConfirm: (items: RecapItem[], customer: Customer | null) => void;
18
+ onConfirm: (items: RecapItem[], customer: Customer | null, amountReceived: number) => void;
19
19
  onCancel: (items: RecapItem[]) => void;
20
20
  onSaveCustomer?: (customer: Customer) => void;
21
21
  selectedCustomer?: (customer: Customer) => void;
@@ -35,6 +35,7 @@ export declare class RecapSheet {
35
35
  private onCancel?;
36
36
  private onSaveCustomer?;
37
37
  private setSelectedCustomer?;
38
+ private updateChangeFn;
38
39
  constructor(mountPoint: HTMLElement);
39
40
  getItems(): RecapItem[];
40
41
  setItems(_items: RecapItem[]): void;
package/dist/ms-recap.js CHANGED
@@ -31,6 +31,7 @@ var t = [
31
31
  onCancel;
32
32
  onSaveCustomer;
33
33
  setSelectedCustomer;
34
+ updateChangeFn = () => {};
34
35
  constructor(e) {
35
36
  this.el = e, this.clientOverlayEl = document.createElement("div"), this.clientOverlayEl.id = "recap-client-overlay", document.body.appendChild(this.clientOverlayEl), this.newClientOverlayEl = document.createElement("div"), this.newClientOverlayEl.id = "recap-new-client-overlay", document.body.appendChild(this.newClientOverlayEl);
36
37
  }
@@ -51,7 +52,7 @@ var t = [
51
52
  }
52
53
  removeFromCartItems(e) {
53
54
  let t = this.getItems();
54
- t.splice(e, 1), this.setItems(t), this.renderItems(), this.renderRecapTotal(), t.length == 0 && this.onClose();
55
+ t.splice(e, 1), this.setItems(t), this.renderItems(), this.renderRecapTotal(), this.updateChangeFn(), t.length == 0 && this.onClose();
55
56
  }
56
57
  getCustomerInitials(e, t) {
57
58
  return ((e[0] ?? "") + (t[0] ?? "")).toUpperCase();
@@ -77,22 +78,43 @@ var t = [
77
78
  <span class="lab">TOTAL</span>
78
79
  <span class="amt" id="recap-total">${e(this.getTotal())}</span>
79
80
  </div>
80
- <div id="recap-client-block" style="background:var(--paper-deep); border-radius:12px; padding:14px; margin-bottom:14px; text-align:center;"></div>
81
+ <div class="price-field">
82
+ <div style="flex:1;">
83
+ <label>MONTANT REÇU</label>
84
+ <input type="number" id="amount-received" min="0" step="1" placeholder="0">
85
+ </div>
86
+ <span class="unit">FCFA</span>
87
+ </div>
88
+ <div class="change-row" id="change-row">
89
+ <span class="lab">Monnaie à rendre</span>
90
+ <span class="amt" id="change-amount">${e(0)}</span>
91
+ </div>
81
92
  <div class="payment-hint">Espèces · Mobile Money · Carte</div>
93
+ <div id="recap-client-block" style="background:var(--paper-deep); border-radius:12px; padding:14px; margin-bottom:14px; text-align:center;"></div>
82
94
  <div class="sheet-actions">
83
95
  <button class="btn-cancel" id="recap-btn-cancel">Modifier</button>
84
- <button class="btn-confirm" id="recap-btn-confirm">Confirmer la vente</button>
96
+ <button class="btn-confirm" id="recap-btn-confirm" disabled>Confirmer la vente</button>
85
97
  </div>
86
98
  </div>
87
99
  </div>
88
- `, this.el.querySelector("#recap-btn-cancel")?.addEventListener("click", () => {
100
+ `;
101
+ let n = this.el.querySelector("#amount-received"), r = this.el.querySelector("#change-amount"), i = this.el.querySelector("#change-row"), a = this.el.querySelector("#recap-btn-confirm"), o = () => {
102
+ let e = parseFloat(n.value);
103
+ return Number.isFinite(e) ? e : 0;
104
+ }, s = () => {
105
+ let t = o(), n = t - this.getTotal();
106
+ r.textContent = e(Math.max(0, n));
107
+ let s = t < this.getTotal();
108
+ i.classList.toggle("insufficient", s), a.disabled = s || t === 0;
109
+ };
110
+ this.updateChangeFn = s, n.addEventListener("input", s), s(), this.el.querySelector("#recap-btn-cancel")?.addEventListener("click", () => {
89
111
  this.onCancel?.(this.getItems()), this.onClose();
90
- }), this.el.querySelector("#recap-btn-confirm")?.addEventListener("click", () => {
112
+ }), a.addEventListener("click", () => {
91
113
  if (!this.selectedCustomer && !this.reminderShown) {
92
114
  this.remindSelectCustomer(), this.reminderShown = !0;
93
115
  return;
94
116
  }
95
- this.onConfirm?.(this.getItems(), this.selectedCustomer);
117
+ this.onConfirm?.(this.getItems(), this.selectedCustomer, o());
96
118
  }), this.renderItems(), this.renderRecapTotal(), this.renderClientBlock();
97
119
  }
98
120
  renderItems() {
@@ -157,7 +179,7 @@ var t = [
157
179
  }, 600));
158
180
  }
159
181
  renderClientSheet() {
160
- this.clientSearchTerm = "", this.clientOverlayEl.innerHTML = "\n <div class=\"overlay show\">\n <div class=\"sheet\" style=\"max-height:88vh;\">\n <div class=\"sheet-handle\"></div>\n <h3>Identifier la cliente</h3>\n <div class=\"catalog-price\" style=\"margin-bottom:10px;\">Recherchez par nom ou numéro</div>\n\n <div class=\"search-input-wrap\" id=\"client-search-wrap\" style=\"margin-bottom:12px;\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><line x1=\"21\" y1=\"21\" x2=\"16.4\" y2=\"16.4\"/></svg>\n <input type=\"text\" id=\"client-search-input\" placeholder=\"Nom ou téléphone...\">\n <button class=\"search-clear\" id=\"client-search-clear\">✕</button>\n </div>\n\n <div class=\"clients-grid\" id=\"client-results-list\" style=\"grid-template-columns:1fr; max-height:38vh; overflow-y:auto; margin-bottom:14px;\"></div>\n\n <button class=\"btn-confirm\" style=\"width:100%;\" id=\"nouveau-client\">+ Nouveau client</button>\n </div>\n </div>\n ", this.clientOverlayEl.querySelector("#nouveau-client")?.addEventListener("click", () => this.renderClientOverlay()), this.clientOverlayEl.querySelector("#client-search-clear")?.addEventListener("click", () => this.clearClientSearch());
182
+ this.clientSearchTerm = "", this.clientOverlayEl.innerHTML = "\n <div class=\"overlay show\">\n <div class=\"sheet\" style=\"max-height:88vh;\">\n <div class=\"sheet-handle\"></div>\n <h3>Identifier le client</h3>\n <div class=\"catalog-price\" style=\"margin-bottom:10px;\">Recherchez par nom ou numéro</div>\n\n <div class=\"search-input-wrap\" id=\"client-search-wrap\" style=\"margin-bottom:12px;\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><line x1=\"21\" y1=\"21\" x2=\"16.4\" y2=\"16.4\"/></svg>\n <input type=\"text\" id=\"client-search-input\" placeholder=\"Nom ou téléphone...\">\n <button class=\"search-clear\" id=\"client-search-clear\">✕</button>\n </div>\n\n <div class=\"clients-grid\" id=\"client-results-list\" style=\"grid-template-columns:1fr; max-height:38vh; overflow-y:auto; margin-bottom:14px;\"></div>\n\n <button class=\"btn-confirm\" style=\"width:100%;\" id=\"nouveau-client\">+ Nouveau client</button>\n </div>\n </div>\n ", this.clientOverlayEl.querySelector("#nouveau-client")?.addEventListener("click", () => this.renderClientOverlay()), this.clientOverlayEl.querySelector("#client-search-clear")?.addEventListener("click", () => this.clearClientSearch());
161
183
  let e = this.clientOverlayEl.querySelector("#client-search-input"), t = this.clientOverlayEl.querySelector("#client-search-wrap");
162
184
  e?.addEventListener("focus", () => t?.classList.add("focus")), e?.addEventListener("blur", () => t?.classList.remove("focus")), e?.addEventListener("input", () => {
163
185
  this.clientSearchTerm = e.value.toLowerCase(), this.renderClientResults();
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "tek-ms-recap",
3
3
  "private": false,
4
- "version": "v1.0.13",
4
+ "version": "v1.0.14",
5
5
  "type": "module",
6
6
  "main": "./dist/ms-recap.js",
7
7
  "module": "./dist/ms-recap.js",