crmbonus-component-wake 0.0.10 → 0.0.11
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/crmbonus-component-wake/app-modal.entry.js +1 -1
- package/dist/crmbonus-component-wake/crm-bonus-form.entry.js +5 -1
- package/dist/crmbonus-component-wake/crm-bonus-form.entry.js.map +1 -1
- package/dist/crmbonus-component-wake/crm-bonus.entry.js +1 -1
- package/dist/crmbonus-component-wake/crmbonus-component-wake.esm.js +1 -1
- package/dist/crmbonus-component-wake/giftback-pin.entry.js +8 -1
- package/dist/crmbonus-component-wake/giftback-pin.entry.js.map +1 -1
- package/dist/crmbonus-component-wake/giftback-progress.entry.js +1 -1
- package/dist/crmbonus-component-wake/phone-input-mask.entry.js +1 -1
- package/dist/crmbonus-component-wake/phone-input.entry.js +1 -1
- package/dist/types/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.d.ts +2 -0
- package/dist/types/components.d.ts +2 -0
- package/dist/types/services/crmbonus.service.d.ts +1 -0
- package/package.json +1 -1
- package/dist/crmbonus-component-wake/index-eeb8f9f2.js +0 -3039
- package/dist/crmbonus-component-wake/index-eeb8f9f2.js.map +0 -1
|
@@ -12,7 +12,7 @@ const MyComponent = class {
|
|
|
12
12
|
this.storeName = undefined;
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (h("div", { key: '
|
|
15
|
+
return (h("div", { key: '00162be0f98e3f809ae14bdbe8a0eb7499adc6b1' }, h("div", { key: '2d85ef44c6a9069a8606fc0186337ca1654471cc', class: "container-button" }, h("img", { key: 'c3b77bee510ec8ed1932ede8d72cd2d3e0da4e5a', src: logoSvg, onClick: () => (this.showModal = true) })), h("app-modal", { key: 'ef6d0662a940ec329600b818bd437e0d29b9f8e2', isOpen: this.showModal, modalTitle: `Giftback ${this.userId}`, onModalClosed: () => (this.showModal = false) }, h("crm-bonus-form", { key: 'c4457d2590ef0391033b974e75e6713acb6c33ac', storeName: this.storeName }))));
|
|
16
16
|
}
|
|
17
17
|
static get assetsDirs() { return ["assets"]; }
|
|
18
18
|
};
|
|
@@ -43,7 +43,7 @@ var patchCloneNodeFix = (HTMLElementPrototype) => {
|
|
|
43
43
|
|
|
44
44
|
patchBrowser().then(async (options) => {
|
|
45
45
|
await globalScripts();
|
|
46
|
-
return bootstrapLazy([["giftback-pin",[[1,"giftback-pin",{"sent":[16],"pin":[32],"isVerified":[32],"loading":[32]}]]],["phone-input-mask",[[1,"phone-input-mask",{"phone":[32],"getPhone":[64]}]]],["crm-bonus-form",[[1,"crm-bonus-form",{"storeName":[8,"storename"],"loading":[32],"step":[32],"sent":[32]}]]],["app-modal",[[1,"app-modal",{"isOpen":[516,"is-open"],"modalTitle":[1,"modal-title"]}]]],["phone-input",[[0,"phone-input",{"sendPin":[16],"loading":[4]}]]],["giftback-progress",[[1,"giftback-progress",{"maxValue":[2,"max-value"],"totalGiftback":[2,"total-giftback"],"validityDate":[1,"validity-date"],"usedValue":[32]}]]],["crm-bonus",[[1,"crm-bonus",{"userId":[1,"userid"],"storeName":[8,"storename"],"showModal":[32]}]]]], options);
|
|
46
|
+
return bootstrapLazy([["giftback-pin",[[1,"giftback-pin",{"sent":[16],"validate":[16],"pin":[32],"isVerified":[32],"loading":[32]}]]],["phone-input-mask",[[1,"phone-input-mask",{"phone":[32],"getPhone":[64]}]]],["crm-bonus-form",[[1,"crm-bonus-form",{"storeName":[8,"storename"],"loading":[32],"step":[32],"sent":[32]}]]],["app-modal",[[1,"app-modal",{"isOpen":[516,"is-open"],"modalTitle":[1,"modal-title"]}]]],["phone-input",[[0,"phone-input",{"sendPin":[16],"loading":[4]}]]],["giftback-progress",[[1,"giftback-progress",{"maxValue":[2,"max-value"],"totalGiftback":[2,"total-giftback"],"validityDate":[1,"validity-date"],"usedValue":[32]}]]],["crm-bonus",[[1,"crm-bonus",{"userId":[1,"userid"],"storeName":[8,"storename"],"showModal":[32]}]]]], options);
|
|
47
47
|
});
|
|
48
48
|
|
|
49
49
|
//# sourceMappingURL=crmbonus-component-wake.esm.js.map
|
|
@@ -6,6 +6,7 @@ const GiftbackPin = class {
|
|
|
6
6
|
constructor(hostRef) {
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
this.sent = undefined;
|
|
9
|
+
this.validate = undefined;
|
|
9
10
|
this.pin = ['', '', '', ''];
|
|
10
11
|
this.isVerified = false;
|
|
11
12
|
this.loading = false;
|
|
@@ -21,6 +22,12 @@ const GiftbackPin = class {
|
|
|
21
22
|
}
|
|
22
23
|
this.pin = [...this.pin];
|
|
23
24
|
}
|
|
25
|
+
validatePin() {
|
|
26
|
+
console.log('this.pin', this.pin);
|
|
27
|
+
this.validate({
|
|
28
|
+
pin: this.pin.join("")
|
|
29
|
+
});
|
|
30
|
+
}
|
|
24
31
|
verifyPin() {
|
|
25
32
|
const pinCode = this.pin.join('');
|
|
26
33
|
if (pinCode === '9999') {
|
|
@@ -28,7 +35,7 @@ const GiftbackPin = class {
|
|
|
28
35
|
}
|
|
29
36
|
}
|
|
30
37
|
render() {
|
|
31
|
-
return (h("div", { key: '
|
|
38
|
+
return (h("div", { key: 'd1e0ffbc55f0e18fe730e5c89938b004d680e972', class: "form-container-pin" }, h("div", { key: 'bccf37836912e91a945d9d7e2c7eb1d1398f3cd0' }, h("p", { key: 'c9d32a8159ae1084474492be8ba56ab578ad1d8c' }, "Insira o PIN de 4 d\u00EDgitos enviado por SMS."), h("div", { key: '340163741e08b366326910fbdd1f21c490f1ae14', class: "pin-container" }, this.pin.map((_, index) => (h("input", { type: "text", maxLength: 1, value: this.pin[index], onInput: (event) => this.handleInput(event, index) }))))), h("button", { key: 'ec04ecc851b85069853c2cb22a8e704eb4c43ee0', class: `button ${this.loading ? 'disabled' : ''} `, disabled: this.loading, onClick: () => this.validatePin() }, "Enviar")));
|
|
32
39
|
}
|
|
33
40
|
};
|
|
34
41
|
GiftbackPin.style = giftbackPinCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"giftback-pin.entry.esm.js","mappings":";;AAAA,MAAM,cAAc,GAAG
|
|
1
|
+
{"file":"giftback-pin.entry.esm.js","mappings":";;AAAA,MAAM,cAAc,GAAG,6kBAA6kB;;MCQvlB,WAAW;;;;;mBAKK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;0BACV,KAAK;uBAER,KAAK;;IAEjC,WAAW,CAAC,KAAY,EAAE,KAAa;QACnC,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACtC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;;QAGxB,IAAI,KAAK,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE;YACtC,MAAM,SAAS,GAAG,KAAK,CAAC,kBAAsC,CAAC;YAC/D,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,EAAE,CAAC;SACtB;QAED,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;KAC5B;IAED,WAAW;QACP,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QAClC,IAAI,CAAC,QAAQ,CAAC;YACV,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;SACzB,CAAC,CAAA;KACL;IAED,SAAS;QACL,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAClC,IAAI,OAAO,KAAK,MAAM,EAAE;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SAC1B;KACJ;IAED,MAAM;QACF,QACI,4DAAK,KAAK,EAAC,oBAAoB,IAC3B,8DACI,8GAAiD,EACjD,4DAAK,KAAK,EAAC,eAAe,IACrB,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MACnB,aACI,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EACtB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,GACpD,CACL,CAAC,CACA,CACJ,EAEN,+DAAQ,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,aAAiB,CAGpI,EACR;KACL;;;;;;","names":[],"sources":["src/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.css?tag=giftback-pin&encapsulation=shadow","src/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: Arial, sans-serif;\n}\n\n.form-container-pin {\n display: flex;\n justify-content: space-around;\n}\n\n.pin-container {\n display: flex;\n gap: 10px;\n margin: 10px 0;\n}\n\ninput {\n width: 40px;\n height: 40px;\n font-size: 18px;\n text-align: center;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\nbutton {\n padding: 10px 20px;\n background-color: #ddd;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #bbb;\n}\n\n.success {\n color: green;\n margin-top: 10px;\n}\n\n.button {\n top: 50%;\n background-color: #6c6c7e;\n color: #fff;\n border: none;\n border-radius: 10px;\n padding: 15px;\n min-height: 30px;\n min-width: 120px;\n font-size: 20px;\n cursor: pointer;\n}","import { Component, h, Prop, State } from '@stencil/core';\nimport { IPinSent } from '../../../../dto/pin.sent';\n\n@Component({\n tag: 'giftback-pin',\n styleUrl: 'giftback-pin.css',\n shadow: true,\n})\nexport class GiftbackPin {\n\n @Prop() sent: IPinSent;\n @Prop() validate: Function;\n\n @State() pin: string[] = ['', '', '', ''];\n @State() isVerified: boolean = false;\n\n @State() loading: boolean = false;\n\n handleInput(event: Event, index: number) {\n const input = event.target as HTMLInputElement;\n const value = input.value.slice(0, 1); // Limitar a um único dígito\n this.pin[index] = value;\n\n // Focar no próximo campo, se possível\n if (value && index < this.pin.length - 1) {\n const nextInput = input.nextElementSibling as HTMLInputElement;\n nextInput?.focus();\n }\n\n this.pin = [...this.pin];\n }\n\n validatePin() {\n console.log('this.pin', this.pin);\n this.validate({\n pin: this.pin.join(\"\")\n })\n }\n\n verifyPin() {\n const pinCode = this.pin.join('');\n if (pinCode === '9999') {\n this.isVerified = true;\n }\n }\n\n render() {\n return (\n <div class=\"form-container-pin\">\n <div >\n <p>Insira o PIN de 4 dígitos enviado por SMS.</p>\n <div class=\"pin-container\">\n {this.pin.map((_, index) => (\n <input\n type=\"text\"\n maxLength={1}\n value={this.pin[index]}\n onInput={(event) => this.handleInput(event, index)}\n />\n ))}\n </div>\n </div>\n\n <button class={`button ${this.loading ? 'disabled' : ''} `} disabled={this.loading} onClick={() => this.validatePin()}>Enviar</button>\n {/* <button onClick={() => this.verifyPin()}>Enviar</button>\n {this.isVerified && <p class=\"success\">Código verificado com sucesso!</p>} */}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -16,7 +16,7 @@ const GiftbackProgress = class {
|
|
|
16
16
|
}
|
|
17
17
|
render() {
|
|
18
18
|
const remainingGiftback = this.totalGiftback - this.usedValue;
|
|
19
|
-
return (h("div", { key: '
|
|
19
|
+
return (h("div", { key: '1de5b34f77653b3b12e65cc27bf9c0417839a513', class: "giftback-container" }, h("p", { key: '86abff74aad4000f1af0890273a16e665596dd20' }, "Voc\u00EA possui at\u00E9 ", h("strong", { key: '1894e70b53873574813a03b16ad7833b78fab1cd' }, "R$ ", this.maxValue.toFixed(2)), " de Giftback nessa compra!"), h("p", { key: 'c5e1cc1d170190f0deb97ed041519e0fa43c28cd', class: "validity" }, "V\u00E1lido at\u00E9: ", this.validityDate), h("p", { key: 'fa9072cea8eabda7849da853af6df7d00e81b2b6' }, "Voc\u00EA est\u00E1 utilizando ", h("strong", { key: 'c821f075db0b7decca241f8a67562ca3ca9995b9' }, "R$ ", this.usedValue.toFixed(2)), " nessa compra"), h("div", { key: 'fe0046c06c3a87de88517221c6a0f7a9d01f035e', class: "progress-container" }, h("span", { key: 'dccafb3964ecfa9df45f225613ea419d64a15425' }, "R$ 0"), h("input", { key: '0bbfe311fd4c1025290059cbd627e3f236f9f382', type: "range", min: "0", max: this.maxValue, value: this.usedValue, onInput: (event) => this.handleSliderChange(event) }), h("span", { key: '4c2d4d6feb7b572fd86021116636c42b031bab80' }, "R$ ", this.maxValue.toFixed(2))), h("p", { key: 'ec6be64d2cdaeb387461b790e9eb16f9f8219a2f', class: "remaining" }, "Faltam ", h("strong", { key: 'df0a75d774e722481ad3bf2e67f38b7a47c8a0ce' }, "R$ ", remainingGiftback.toFixed(2)), " para utilizar o valor total do Giftback.")));
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
22
|
GiftbackProgress.style = giftbackProgressCss;
|
|
@@ -25,7 +25,7 @@ const PhoneInputMask = class {
|
|
|
25
25
|
return this.phone;
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
28
|
-
return (h("input", { key: '
|
|
28
|
+
return (h("input", { key: '5dac98fc24dc6535c41cfca2aebb8810c815b436', id: "phone", type: "tel", class: "phone", value: this.phone, onInput: (event) => this.handleInput(event), placeholder: "(12) 94567-8910" }));
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
31
|
PhoneInputMask.style = phoneInputMaskCss;
|
|
@@ -11,7 +11,7 @@ const PhoneInput = class {
|
|
|
11
11
|
await this.sendPin(phone);
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return (h("div", { key: '
|
|
14
|
+
return (h("div", { key: '86a08965c63af741c8db338302f9b0fcb4d1b9ec', class: "form-container" }, h("phone-input-mask", { key: 'b0ba205369b3ab748074abc15c05ab33231d0d49', ref: ref => this.phoneInputMask = ref }), h("button", { key: '00e2a86976d44a1841fda90a73d6405c15f4c252', class: `button ${this.loading ? 'disabled' : ''} `, disabled: this.loading, onClick: () => this.validatePhone() }, "validar")));
|
|
15
15
|
}
|
|
16
16
|
};
|
|
17
17
|
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { IPinSent } from '../../../../dto/pin.sent';
|
|
2
2
|
export declare class GiftbackPin {
|
|
3
3
|
sent: IPinSent;
|
|
4
|
+
validate: Function;
|
|
4
5
|
pin: string[];
|
|
5
6
|
isVerified: boolean;
|
|
6
7
|
loading: boolean;
|
|
7
8
|
handleInput(event: Event, index: number): void;
|
|
9
|
+
validatePin(): void;
|
|
8
10
|
verifyPin(): void;
|
|
9
11
|
render(): any;
|
|
10
12
|
}
|
|
@@ -21,6 +21,7 @@ export namespace Components {
|
|
|
21
21
|
}
|
|
22
22
|
interface GiftbackPin {
|
|
23
23
|
"sent": IPinSent;
|
|
24
|
+
"validate": Function;
|
|
24
25
|
}
|
|
25
26
|
interface GiftbackProgress {
|
|
26
27
|
"maxValue": number;
|
|
@@ -118,6 +119,7 @@ declare namespace LocalJSX {
|
|
|
118
119
|
}
|
|
119
120
|
interface GiftbackPin {
|
|
120
121
|
"sent"?: IPinSent;
|
|
122
|
+
"validate"?: Function;
|
|
121
123
|
}
|
|
122
124
|
interface GiftbackProgress {
|
|
123
125
|
"maxValue"?: number;
|