tek-ms-recap 1.0.10 → 1.0.12
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.
- package/dist/Recap/index.d.ts +5 -1
- package/dist/ms-recap.js +31 -14
- package/package.json +1 -1
package/dist/Recap/index.d.ts
CHANGED
|
@@ -15,9 +15,10 @@ export interface Customer {
|
|
|
15
15
|
export interface RenderInterfaceRecap {
|
|
16
16
|
items: RecapItem[];
|
|
17
17
|
customers: Customer[];
|
|
18
|
-
onConfirm: (items: RecapItem[], customer: Customer) => void;
|
|
18
|
+
onConfirm: (items: RecapItem[], customer: Customer | null) => void;
|
|
19
19
|
onCancel: (items: RecapItem[]) => void;
|
|
20
20
|
onSaveCustomer?: (customer: Customer) => void;
|
|
21
|
+
selectedCustomer?: (customer: Customer) => void;
|
|
21
22
|
}
|
|
22
23
|
export declare class RecapSheet {
|
|
23
24
|
private el;
|
|
@@ -28,9 +29,11 @@ export declare class RecapSheet {
|
|
|
28
29
|
private customers;
|
|
29
30
|
private clientSearchTerm;
|
|
30
31
|
private selectedCustomer;
|
|
32
|
+
private reminderShown;
|
|
31
33
|
private onConfirm?;
|
|
32
34
|
private onCancel?;
|
|
33
35
|
private onSaveCustomer?;
|
|
36
|
+
private setSelectedCustomer?;
|
|
34
37
|
constructor(mountPoint: HTMLElement);
|
|
35
38
|
getItems(): RecapItem[];
|
|
36
39
|
setItems(_items: RecapItem[]): void;
|
|
@@ -44,6 +47,7 @@ export declare class RecapSheet {
|
|
|
44
47
|
private renderItems;
|
|
45
48
|
private renderRecapTotal;
|
|
46
49
|
private renderClientBlock;
|
|
50
|
+
private remindSelectCustomer;
|
|
47
51
|
private renderClientSheet;
|
|
48
52
|
private renderClientResults;
|
|
49
53
|
private selectCustomer;
|
package/dist/ms-recap.js
CHANGED
|
@@ -26,9 +26,11 @@ var t = [
|
|
|
26
26
|
customers = [];
|
|
27
27
|
clientSearchTerm = "";
|
|
28
28
|
selectedCustomer = null;
|
|
29
|
+
reminderShown = !1;
|
|
29
30
|
onConfirm;
|
|
30
31
|
onCancel;
|
|
31
32
|
onSaveCustomer;
|
|
33
|
+
setSelectedCustomer;
|
|
32
34
|
constructor(e) {
|
|
33
35
|
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);
|
|
34
36
|
}
|
|
@@ -45,7 +47,7 @@ var t = [
|
|
|
45
47
|
this.total = e;
|
|
46
48
|
}
|
|
47
49
|
onClose() {
|
|
48
|
-
this.setItems([]), this.selectedCustomer = null, this.el.innerHTML = "", this.resetClientSheet(), this.resetClientOverlay();
|
|
50
|
+
this.setItems([]), this.selectedCustomer = null, this.reminderShown = !1, this.el.innerHTML = "", this.resetClientSheet(), this.resetClientOverlay();
|
|
49
51
|
}
|
|
50
52
|
removeFromCartItems(e) {
|
|
51
53
|
let t = this.getItems();
|
|
@@ -60,7 +62,7 @@ var t = [
|
|
|
60
62
|
return t[n % t.length];
|
|
61
63
|
}
|
|
62
64
|
render(t) {
|
|
63
|
-
this.setItems(t.items), this.customers = t.customers, this.onConfirm = t.onConfirm, this.onCancel = t.onCancel, this.onSaveCustomer = t.onSaveCustomer, this.selectedCustomer = null, this.el.innerHTML = `
|
|
65
|
+
this.setItems(t.items), this.customers = t.customers, this.onConfirm = t.onConfirm, this.onCancel = t.onCancel, this.onSaveCustomer = t.onSaveCustomer, this.setSelectedCustomer = t.selectedCustomer, this.selectedCustomer = null, this.reminderShown = !1, this.el.innerHTML = `
|
|
64
66
|
<div class="overlay show" id="recap-overlay">
|
|
65
67
|
<div class="sheet modal-recap" style="max-height:88vh;">
|
|
66
68
|
<div class="sheet-handle"></div>
|
|
@@ -79,14 +81,18 @@ var t = [
|
|
|
79
81
|
<div class="payment-hint">Espèces · Mobile Money · Carte</div>
|
|
80
82
|
<div class="sheet-actions">
|
|
81
83
|
<button class="btn-cancel" id="recap-btn-cancel">Modifier</button>
|
|
82
|
-
<button class="btn-confirm" id="recap-btn-confirm"
|
|
84
|
+
<button class="btn-confirm" id="recap-btn-confirm">Confirmer la vente</button>
|
|
83
85
|
</div>
|
|
84
86
|
</div>
|
|
85
87
|
</div>
|
|
86
88
|
`, this.el.querySelector("#recap-btn-cancel")?.addEventListener("click", () => {
|
|
87
89
|
this.onCancel?.(this.getItems()), this.onClose();
|
|
88
90
|
}), this.el.querySelector("#recap-btn-confirm")?.addEventListener("click", () => {
|
|
89
|
-
this.selectedCustomer && this.
|
|
91
|
+
if (!this.selectedCustomer && !this.reminderShown) {
|
|
92
|
+
this.remindSelectCustomer(), this.reminderShown = !0;
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
this.onConfirm?.(this.getItems(), this.selectedCustomer);
|
|
90
96
|
}), this.renderItems(), this.renderRecapTotal(), this.renderClientBlock();
|
|
91
97
|
}
|
|
92
98
|
renderItems() {
|
|
@@ -115,11 +121,10 @@ var t = [
|
|
|
115
121
|
n && (n.innerHTML = e(t)), r && (r.innerHTML = e(t));
|
|
116
122
|
}
|
|
117
123
|
renderClientBlock() {
|
|
118
|
-
let e = this.el.querySelector("#recap-client-block")
|
|
119
|
-
if (e) {
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
e.innerHTML = `
|
|
124
|
+
let e = this.el.querySelector("#recap-client-block");
|
|
125
|
+
if (e) if (this.selectedCustomer) {
|
|
126
|
+
let t = this.selectedCustomer;
|
|
127
|
+
this.setSelectedCustomer?.(t), this.reminderShown = !1, e.innerHTML = `
|
|
123
128
|
<div style="display:flex; align-items:center; gap:10px; text-align:left;">
|
|
124
129
|
<div class="avatar" style="background:${this.avatarColorFor(t.phone)}; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:11px; flex-shrink:0;">
|
|
125
130
|
${this.getCustomerInitials(t.firstname, t.lastname)}
|
|
@@ -131,13 +136,25 @@ var t = [
|
|
|
131
136
|
<button class="btn-cancel" id="recap-btn-change-client" style="padding:6px 10px; flex-shrink:0;">Changer</button>
|
|
132
137
|
</div>
|
|
133
138
|
`, e.querySelector("#recap-btn-change-client")?.addEventListener("click", () => {
|
|
134
|
-
this.renderClientSheet();
|
|
135
|
-
});
|
|
136
|
-
} else e.innerHTML = "\n <div style=\"font-size:11.5px; color:var(--ink-muted); margin-bottom:8px;\">Aucun client identifié</div>\n <button class=\"btn-cancel\" style=\"width:100%;\" id=\"recap-btn-choose-client\">Choisir un client</button>\n ", e.querySelector("#recap-btn-choose-client")?.addEventListener("click", () => {
|
|
137
139
|
this.renderClientSheet();
|
|
138
140
|
});
|
|
139
|
-
|
|
140
|
-
|
|
141
|
+
} else e.innerHTML = "\n <div style=\"font-size:11.5px; color:var(--ink-muted); margin-bottom:8px;\">Aucun client identifié</div>\n <button class=\"btn-cancel\" style=\"width:100%;\" id=\"recap-btn-choose-client\">Choisir un client</button>\n ", e.querySelector("#recap-btn-choose-client")?.addEventListener("click", () => {
|
|
142
|
+
this.renderClientSheet();
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
remindSelectCustomer() {
|
|
146
|
+
let e = this.el.querySelector("#recap-client-block");
|
|
147
|
+
e && (e.style.transition = "background 0.15s ease", e.style.background = "#F7D9D6", e.animate([
|
|
148
|
+
{ transform: "translateX(0)" },
|
|
149
|
+
{ transform: "translateX(-4px)" },
|
|
150
|
+
{ transform: "translateX(4px)" },
|
|
151
|
+
{ transform: "translateX(0)" }
|
|
152
|
+
], {
|
|
153
|
+
duration: 250,
|
|
154
|
+
iterations: 1
|
|
155
|
+
}), setTimeout(() => {
|
|
156
|
+
e.style.background = "var(--paper-deep)";
|
|
157
|
+
}, 600));
|
|
141
158
|
}
|
|
142
159
|
renderClientSheet() {
|
|
143
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());
|