crmbonus-component-wake 1.0.47 → 2.0.48

package/dist/components/p-46578efa.js

@@ -0,0 +1,44 @@
+import { p as proxyCustomElement, H, h } from './p-2f266d73.js';
+import { d as defineCustomElement$1 } from './p-5c3fe5a8.js';
+
+const crmButtonCss = "input,button{margin:0;padding:10px;}.crm-contaner-button{height:auto;width:auto}.crm-button{height:48px;width:246px;border:1px solid #000;padding:14px 20px;background-color:#000;color:#fff;font-size:14px;line-height:20px;font-weight:500;cursor:pointer}";
+const CrmButtonStyle0 = crmButtonCss;
+
+const Button = /*@__PURE__*/ proxyCustomElement(class Button extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.txtBtn = undefined;
+        this.loading = undefined;
+    }
+    render() {
+        return (h("div", { key: 'f0ade275b346c654d0ebf889dcfdae42135a4a52', class: "crm-contaner-button" }, h("button", { key: 'ec8c7931debeb592db9107ca7f6cb4972062b2cc', class: "crm-button" }, !this.loading ? this.txtBtn : h("loading-spinner", { size: "15px", color: "#fff" }))));
+    }
+    static get style() { return CrmButtonStyle0; }
+}, [0, "crm-button", {
+        "txtBtn": [1, "txt-btn"],
+        "loading": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["crm-button", "loading-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "crm-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Button);
+            }
+            break;
+        case "loading-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { Button as B, defineCustomElement as d };
+
+//# sourceMappingURL=p-46578efa.js.map

package/dist/components/p-46578efa.js.map

@@ -0,0 +1 @@
+{"file":"p-46578efa.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,8PAA8P,CAAC;AACpR,wBAAe,YAAY;;MCKd,MAAM;;;;;;;IAKf,MAAM;QACF,QACI,4DAAK,KAAK,EAAC,qBAAqB,IAC5B,+DAAQ,KAAK,EAAC,YAAY,IAElB,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,uBAAiB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,CAEzE,CACP,EACT;KACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/button/crm-button.css?tag=crm-button","src/components/button/index.tsx"],"sourcesContent":["input, button {\n    margin: 0;\n    padding: 10px; /* Ajuste o valor conforme necessário */\n}\n\n.crm-contaner-button {\n    height: auto;\n    width: auto;\n}\n\n.crm-button {\n    height: 48px;\n    width: 246px;\n    border: 1px solid #000;\n    padding: 14px 20px;\n    background-color: #000;\n    color: #fff;\n    font-size: 14px;\n    line-height: 20px;\n    font-weight: 500;\n    cursor: pointer;\n}","import { Component, Prop, h } from \"@stencil/core\";\n\n@Component({\n    tag: 'crm-button',\n    styleUrl: 'crm-button.css'\n})\nexport class Button {\n\n    @Prop() txtBtn: string;\n    @Prop() loading: boolean;\n\n    render() {\n        return (\n            <div class=\"crm-contaner-button\">\n                <button class=\"crm-button\">\n                    {\n                        !this.loading ? this.txtBtn : <loading-spinner size=\"15px\" color=\"#fff\" />\n                    }\n                </button>\n            </div>\n        )\n    }\n}"],"version":3}

package/dist/components/{p-0e99f907.js → p-4f18f4c0.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h } from './p-faf7103e.js';
-import { d as defineCustomElement$1 } from './p-ddc0ac71.js';
+import { p as proxyCustomElement, H, h } from './p-2f266d73.js';
+import { d as defineCustomElement$1 } from './p-5c3fe5a8.js';
 
-const giftbackPinCss = ":host{display:block;font-family:Arial, sans-serif}.form-container-pin{display:flex;flex-direction:column;align-items:center}.pin-container{display:flex;gap:10px;margin:26px 0}input{width:58px;height:40px;font-size:18px;text-align:center;border:1px solid #ccc;border-radius:5px}button{padding:10px 20px;background-color:#ddd;border:none;border-radius:5px;cursor:pointer}button:hover{background-color:#bbb}.success{color:green;margin-top:10px}.button{top:50%;background-color:#6c6c7e;color:#fff;border:none;border-radius:10px;padding:15px;min-height:30px;min-width:120px;font-size:20px;cursor:pointer}.button-cancel{top:50%;background-color:#ffffff;color:#1e1c1c;border:1px solid gray;border-radius:10px;padding:10px;min-height:30px;min-width:120px;font-size:19px;cursor:pointer}.footer-button{display:flex;justify-content:space-between;width:100%}";
+const giftbackPinCss = ":host{display:block;font-family:Arial, sans-serif}.form-container-pin{display:flex;flex-direction:column;align-items:center}.pin-container{display:flex;gap:10px;margin:26px 0}input{width:58px;height:40px;font-size:18px;text-align:center;border:1px solid #ccc;border-radius:5px}button{padding:10px 20px;border:none;border-radius:5px;cursor:pointer}.success{color:green;margin-top:10px}.button{top:50%;background-color:#6c6c7e;color:#fff;border:none;border-radius:10px;padding:15px;min-height:30px;min-width:120px;font-size:20px;cursor:pointer}.button-cancel{top:50%;background-color:#ffffff;color:#1e1c1c;border:1px solid gray;border-radius:10px;padding:10px;min-height:30px;min-width:120px;font-size:19px;cursor:pointer}.footer-button{display:flex;justify-content:space-between;width:100%}";
 const GiftbackPinStyle0 = giftbackPinCss;
 
 const GiftbackPin = /*@__PURE__*/ proxyCustomElement(class GiftbackPin extends H {
@@ -38,7 +38,7 @@ const GiftbackPin = /*@__PURE__*/ proxyCustomElement(class GiftbackPin extends H
         }
     }
     render() {
-        return (h("div", { key: 'c6d72e244011769962527f246a429ae11b873d84', class: "form-container-pin" }, h("div", { key: '242f10469a6455338475f9f4e11f4ecee654b7b1' }, h("p", { key: 'f902c5ca022d3672048f102a47cfa3fabf578222' }, "Insira o PIN de 4 d\u00EDgitos enviado por SMS."), h("div", { key: '2498c713571a5c7447a8d9305b8ba3b37d96b04e', class: "pin-container" }, this.pin.map((_, index) => (h("input", { type: "text", maxLength: 1, value: this.pin[index], onInput: (event) => this.handleInput(event, index) }))))), h("div", { key: '19d59cc3b47ab153dc85f9323cd49bc933cfbe5c', class: "footer-button" }, h("button", { key: '9323cfdc0965b3783bad9624b3663c5204e9c979', class: "button-cancel", disabled: this.loading, onClick: () => this.cancel() }, "Cancelar"), h("button", { key: 'e464a6cace10b33d81bf14eefdc4c9b8fc6a753b', class: `button ${this.loading ? 'disabled' : ''} `, disabled: this.loading, onClick: () => this.validatePin() }, !this.loading ? "Enviar" : h("loading-spinner", { size: "15px", color: "#fff" })))));
+        return (h("div", { key: '73bbb31f65a9ad70d9749139036f367c5f983be7', class: "form-container-pin" }, h("div", { key: '30a4e1cb8cbec97af32e4535237ddd45b073d47c' }, h("p", { key: '4c5946125ee6cfd8ed00a845df15a65074c482e4' }, "Insira o PIN de 4 d\u00EDgitos enviado por SMS."), h("div", { key: '4d6b00888b126dc0cd786bd0c5bc20ed0a5ad354', class: "pin-container" }, this.pin.map((_, index) => (h("input", { type: "text", maxLength: 1, value: this.pin[index], onInput: (event) => this.handleInput(event, index) }))))), h("div", { key: '759369b39be6716fad568f51107db83d2f39f8c3', class: "footer-button" }, h("button", { key: '4b3e1f2cd4649e4d70ac42eb6eb41c001a159ca8', class: "button-cancel", disabled: this.loading, onClick: () => this.cancel() }, "Cancelar"), h("button", { key: '4872ba1598b806babaff1041ab08a86b3d1e92ef', class: `button ${this.loading ? 'disabled' : ''} `, disabled: this.loading, onClick: () => this.validatePin() }, !this.loading ? "Enviar" : h("loading-spinner", { size: "15px", color: "#fff" })))));
     }
     static get style() { return GiftbackPinStyle0; }
 }, [1, "giftback-pin", {
@@ -71,4 +71,4 @@ defineCustomElement();
 
 export { GiftbackPin as G, defineCustomElement as d };
 
-//# sourceMappingURL=p-0e99f907.js.map
+//# sourceMappingURL=p-4f18f4c0.js.map

package/dist/components/p-4f18f4c0.js.map

@@ -0,0 +1 @@
+{"file":"p-4f18f4c0.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,uxBAAuxB,CAAC;AAC/yB,0BAAe,cAAc;;MCOhB,WAAW;;;;;;;;mBAMK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;0BACV,KAAK;uBAET,KAAK;;IAEhC,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,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;KACnC;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,4DAAK,KAAK,EAAC,eAAe,IACtB,+DAAQ,KAAK,EAAC,eAAe,EAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,eAEzE,EACT,+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,IAE7G,CAAC,IAAI,CAAC,OAAO,GAAG,QAAQ,GAAG,uBAAiB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,CAEtE,CACP,CAGJ,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    flex-direction: column;\n    align-items: center;\n}\n\n.pin-container {\n    display: flex;\n    gap: 10px;\n    margin: 26px 0;\n}\n\ninput {\n    width: 58px;\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\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}\n\n.button-cancel {\n    top: 50%;\n    background-color: #ffffff;\n    color: #1e1c1c;\n    border: 1px solid gray;\n    border-radius: 10px;\n    padding: 10px;\n    min-height: 30px;\n    min-width: 120px;\n    font-size: 19px;\n    cursor: pointer;\n}\n\n.footer-button {\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\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: (pin: string) => void;\n    @Prop() cancel: () => void;\n\n    @State() pin: string[] = ['', '', '', ''];\n    @State() isVerified: boolean = false;\n\n    @Prop() 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(this.pin.join(\"\"))\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                <div class=\"footer-button\">\n                    <button class=\"button-cancel\" disabled={this.loading} onClick={() => this.cancel()}>\n                        Cancelar\n                    </button>\n                    <button class={`button ${this.loading ? 'disabled' : ''} `} disabled={this.loading} onClick={() => this.validatePin()}>\n                        {\n                            !this.loading ? \"Enviar\" : <loading-spinner size=\"15px\" color=\"#fff\" />\n                        }\n                    </button>\n                </div>\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}

package/dist/components/{p-ddc0ac71.js → p-5c3fe5a8.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-faf7103e.js';
+import { p as proxyCustomElement, H, h } from './p-2f266d73.js';
 
 const loadingSpinnerCss = ".spinner{display:inline-block;border:4px solid transparent;border-radius:50%;border-top-color:var(--color, #0078d7);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
 const LoadingSpinnerStyle0 = loadingSpinnerCss;
@@ -12,7 +12,7 @@ const LoadingSpinner = /*@__PURE__*/ proxyCustomElement(class LoadingSpinner ext
         this.color = '#0078d7';
     }
     render() {
-        return (h("div", { key: 'dc2bd14b5fefd8566b4f4cd89789aa0ae0a51db3', class: "spinner", style: { width: this.size, height: this.size, borderColor: `${this.color} transparent transparent transparent` } }));
+        return (h("div", { key: '5d3cd866b3ab7f4898ad1142fb39b89c572867d7', class: "spinner", style: { width: this.size, height: this.size, borderColor: `${this.color} transparent transparent transparent` } }));
     }
     static get style() { return LoadingSpinnerStyle0; }
 }, [1, "loading-spinner", {
@@ -36,4 +36,4 @@ defineCustomElement();
 
 export { LoadingSpinner as L, defineCustomElement as d };
 
-//# sourceMappingURL=p-ddc0ac71.js.map
+//# sourceMappingURL=p-5c3fe5a8.js.map

package/dist/components/{p-ddc0ac71.js.map → p-5c3fe5a8.js.map}

@@ -1 +1 @@
-{"file":"p-ddc0ac71.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,iOAAiO,CAAC;AAC5P,6BAAe,iBAAiB;;MCMnB,cAAc;;;;;oBACA,MAAM;qBACL,SAAS;;IAEjC,MAAM;QACF,QACI,4DAAK,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,sCAAsC,EAAE,GAAQ,EAC/I;KACL;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/loading-spinner/loading-spinner.css?tag=loading-spinner&encapsulation=shadow","src/components/loading-spinner/loading-spinner.tsx"],"sourcesContent":[".spinner {\n    display: inline-block;\n    border: 4px solid transparent;\n    border-radius: 50%;\n    border-top-color: var(--color, #0078d7);\n    animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n    0% {\n        transform: rotate(0deg);\n    }\n\n    100% {\n        transform: rotate(360deg);\n    }\n}","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'loading-spinner',\n    styleUrl: 'loading-spinner.css',\n    shadow: true,\n})\nexport class LoadingSpinner {\n    @Prop() size: string = '50px'; // Tamanho do spinner (padrão 50px)\n    @Prop() color: string = '#0078d7'; // Cor do spinner (padrão azul)\n\n    render() {\n        return (\n            <div class=\"spinner\" style={{ width: this.size, height: this.size, borderColor: `${this.color} transparent transparent transparent` }}></div>\n        );\n    }\n}\n"],"version":3}
+{"file":"p-5c3fe5a8.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,iOAAiO,CAAC;AAC5P,6BAAe,iBAAiB;;MCMnB,cAAc;;;;;oBACA,MAAM;qBACL,SAAS;;IAEjC,MAAM;QACF,QACI,4DAAK,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,sCAAsC,EAAE,GAAQ,EAC/I;KACL;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/loading-spinner/loading-spinner.css?tag=loading-spinner&encapsulation=shadow","src/components/loading-spinner/loading-spinner.tsx"],"sourcesContent":[".spinner {\n    display: inline-block;\n    border: 4px solid transparent;\n    border-radius: 50%;\n    border-top-color: var(--color, #0078d7);\n    animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n    0% {\n        transform: rotate(0deg);\n    }\n\n    100% {\n        transform: rotate(360deg);\n    }\n}","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'loading-spinner',\n    styleUrl: 'loading-spinner.css',\n    shadow: true,\n})\nexport class LoadingSpinner {\n    @Prop() size: string = '50px'; // Tamanho do spinner (padrão 50px)\n    @Prop() color: string = '#0078d7'; // Cor do spinner (padrão azul)\n\n    render() {\n        return (\n            <div class=\"spinner\" style={{ width: this.size, height: this.size, borderColor: `${this.color} transparent transparent transparent` }}></div>\n        );\n    }\n}\n"],"version":3}

package/dist/components/p-5f0003a4.js

@@ -0,0 +1,62 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-2f266d73.js';
+import { d as defineCustomElement$3 } from './p-46578efa.js';
+import { d as defineCustomElement$2 } from './p-5c3fe5a8.js';
+import { d as defineCustomElement$1 } from './p-be365312.js';
+
+const giftbackFormCss = "*{margin:0;padding:0;box-sizing:border-box}:host{--crmfont-sizebodymd:14px;--crmline-heightbodymd:20px;--crmletter-spacingtitle-md:0px}.container-message{font-family:Roboto;font-size:var(--crmfont-sizebodymd);font-weight:400;line-height:var(--crmline-heightbodymd);letter-spacing:var(--crmletter-spacingtitle-md);text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.crm-container-form{display:flex;flex-direction:column;justify-content:space-around;height:auto;padding:20px 24px 20px 24px;border-block:1px solid #CCCC;writing-mode:horizontal-tb;gap:16px;border-top:1px solid #ccc !important;border-bottom:1px solid #ccc !important}.crm-phone-form{display:flex;flex-direction:column;height:100%;gap:16px}.crm-subtitle{font-size:14px;color:var(--crm-btn)}.crm-title{font-weight:700;line-height:20px;color:#262626;font-size:16px}.crm-message-info{color:#619013;font-weight:500;font-size:12px}.crm-message-error{color:#E11D48;font-weight:500;font-size:12px}";
+const PhoneFormStyle0 = giftbackFormCss;
+
+const PhoneForm = /*@__PURE__*/ proxyCustomElement(class PhoneForm extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.value = undefined;
+        this.loading = undefined;
+        this.handlerSubmit = undefined;
+    }
+    async handlePhone() {
+        const phone = await this.phoneInputMask.getPhone();
+        await this.handlerSubmit(phone);
+    }
+    render() {
+        return (h(Host, { key: 'b821fd54424ae29b93d637e0faa0004ccb3ff6f5', class: "crm-phone-form" }, h("label", { key: '6fcb0fce2596f14d102b79162c217b1b0a92cccb', class: "crm-subtitle" }, "Digite o seu celular para verificar se h\u00E1 desconto dispon\u00EDvel nessa compra"), h("phone-input-mask", { key: 'a878fcb73215cbbdcd1572ddc0277884f83fb3e6', initialValue: this.value, ref: ref => this.phoneInputMask = ref }), h("crm-button", { key: '6caa785cf17898c745d67554935bd3959f42ff26', txtBtn: "Avan\u00E7ar", loading: this.loading, onClick: () => this.handlePhone() })));
+    }
+    static get style() { return PhoneFormStyle0; }
+}, [0, "phone-form", {
+        "value": [1],
+        "loading": [4],
+        "handlerSubmit": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["phone-form", "crm-button", "loading-spinner", "phone-input-mask"];
+    components.forEach(tagName => { switch (tagName) {
+        case "phone-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PhoneForm);
+            }
+            break;
+        case "crm-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "loading-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "phone-input-mask":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { PhoneForm as P, defineCustomElement as d };
+
+//# sourceMappingURL=p-5f0003a4.js.map

package/dist/components/p-5f0003a4.js.map

@@ -0,0 +1 @@
+{"file":"p-5f0003a4.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,u9BAAu9B,CAAC;AACh/B,wBAAe,eAAe;;MCKjB,SAAS;;;;;;;;IASlB,MAAM,WAAW;QAEb,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAA;QAElD,MAAM,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KACnC;IAGD,MAAM;QACF,QACI,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB,IACxB,8DAAO,KAAK,EAAC,cAAc,2FAAoF,EAC/G,yEAAkB,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI,CAAC,cAAc,GAAG,GAAG,GAAI,EAErF,mEAAY,MAAM,EAAC,cAAS,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,GAAK,CACvF,EACV;KACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/giftback-form/giftback-form.css?tag=phone-form","src/components/giftback-form/subcomponents/phone-form/phone-form.tsx"],"sourcesContent":["* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\n:host {\n    --crmfont-sizebodymd: 14px;\n    --crmline-heightbodymd: 20px;\n    --crmletter-spacingtitle-md: 0px\n}\n\n.container-message {\n    font-family: Roboto;\n    font-size: var(--crmfont-sizebodymd);\n    font-weight: 400;\n    line-height: var(--crmline-heightbodymd);\n    letter-spacing: var(--crmletter-spacingtitle-md);\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.crm-container-form {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-around;\n    height: auto;\n    padding: 20px 24px 20px 24px;\n    border-block: 1px solid #CCCC;\n    writing-mode: horizontal-tb;\n    gap: 16px;\n    border-top: 1px solid #ccc !important;\n    border-bottom: 1px solid #ccc !important;\n}\n\n/* .fbits-responsive-carrinho-desconto {\n    overflow: hidden;\n    border: 1px solid #ccc;\n    border-top: 0;\n    border-bottom: 0;\n} */\n\n.crm-phone-form {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    /* justify-content: space-around; */\n    gap: 16px;\n}\n\n.crm-subtitle {\n    font-size: 14px;\n    color: var(--crm-btn);\n}\n\n.crm-title {\n    font-weight: 700;\n    line-height: 20px;\n    color: #262626;\n    font-size: 16px;\n}\n\n.crm-message-info {\n    color: #619013;\n    font-weight: 500;\n    font-size: 12px;\n}\n\n.crm-message-error {\n    color: #E11D48;\n    font-weight: 500;\n    font-size: 12px;\n}","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n    tag: 'phone-form',\n    styleUrl: '../../giftback-form.css'\n})\nexport class PhoneForm {\n\n    private phoneInputMask: HTMLPhoneInputMaskElement;\n\n    @Prop() value: string;\n    @Prop() loading: boolean;\n    @Prop() handlerSubmit: (phone: string) => void;\n\n\n    async handlePhone() {\n\n        const phone = await this.phoneInputMask.getPhone()\n\n        await this.handlerSubmit(phone);\n    }\n\n\n    render() {\n        return (\n            <Host class=\"crm-phone-form\">\n                <label class=\"crm-subtitle\" >Digite o seu celular para verificar se há desconto disponível nessa compra</label>\n                <phone-input-mask initialValue={this.value} ref={ref => this.phoneInputMask = ref} />\n\n                <crm-button txtBtn=\"Avançar\" loading={this.loading} onClick={() => this.handlePhone() } />\n            </Host>\n        )\n    }\n}"],"version":3}

package/dist/components/p-6703fdff.js

@@ -0,0 +1,106 @@
+import { p as proxyCustomElement, H, h } from './p-2f266d73.js';
+import { i as instance } from './p-1d5eeac0.js';
+import { d as defineCustomElement$3 } from './p-39d680b6.js';
+import { d as defineCustomElement$2 } from './p-46578efa.js';
+import { d as defineCustomElement$1 } from './p-5c3fe5a8.js';
+
+const pinFormCss = ":host{display:block;font-family:Arial, sans-serif}.form-container-pin{display:flex;flex-direction:column;align-items:center}.pin-container{display:flex;justify-content:start;gap:10px}input{width:40px;height:48px;font-size:14px;text-align:center;border:1px solid #ccc;border-radius:5px}button{padding:10px 20px;background-color:#ddd;border:none;border-radius:5px;cursor:pointer}.success{color:green;margin-top:10px}.button{top:50%;background-color:#6c6c7e;color:#fff;border:none;border-radius:10px;padding:15px;min-height:30px;min-width:120px;font-size:20px;cursor:pointer}.button-cancel{top:50%;background-color:#ffffff;color:#1e1c1c;border:1px solid gray;border-radius:10px;padding:10px;min-height:30px;min-width:120px;font-size:19px;cursor:pointer}.crm-description{font-size:14px;width:100%;display:flex;gap:9px}.crm-description a{font-weight:bold;cursor:pointer;text-decoration:underline}.crm-description div{display:flex;gap:5px}";
+const PinFormStyle0 = pinFormCss;
+
+const giftbackFormCss = "*{margin:0;padding:0;box-sizing:border-box}:host{--crmfont-sizebodymd:14px;--crmline-heightbodymd:20px;--crmletter-spacingtitle-md:0px}.container-message{font-family:Roboto;font-size:var(--crmfont-sizebodymd);font-weight:400;line-height:var(--crmline-heightbodymd);letter-spacing:var(--crmletter-spacingtitle-md);text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.crm-container-form{display:flex;flex-direction:column;justify-content:space-around;height:auto;padding:20px 24px 20px 24px;border-block:1px solid #CCCC;writing-mode:horizontal-tb;gap:16px;border-top:1px solid #ccc !important;border-bottom:1px solid #ccc !important}.crm-phone-form{display:flex;flex-direction:column;height:100%;gap:16px}.crm-subtitle{font-size:14px;color:var(--crm-btn)}.crm-title{font-weight:700;line-height:20px;color:#262626;font-size:16px}.crm-message-info{color:#619013;font-weight:500;font-size:12px}.crm-message-error{color:#E11D48;font-weight:500;font-size:12px}";
+const PinFormStyle1 = giftbackFormCss;
+
+const GiftbackPin = /*@__PURE__*/ proxyCustomElement(class GiftbackPin extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.validate = undefined;
+        this.cancel = undefined;
+        this.resend = undefined;
+        this.sent = undefined;
+        this.loading = false;
+        this.phone = undefined;
+        this.pin = ['', '', '', ''];
+        this.isVerified = false;
+        this.canResend = false;
+    }
+    componentWillLoad() {
+        this.canResend = false;
+    }
+    handleInput(event, index) {
+        const input = event.target;
+        const value = input.value.slice(0, 1); // Limitar a um único dígito
+        this.pin[index] = value;
+        // Focar no próximo campo, se possível
+        if (value && index < this.pin.length - 1) {
+            const nextInput = input.nextElementSibling;
+            nextInput === null || nextInput === void 0 ? void 0 : nextInput.focus();
+        }
+        this.pin = [...this.pin];
+    }
+    validatePin() {
+        console.log('this.pin', this.pin);
+        this.validate(this.pin.join(""));
+    }
+    verifyPin() {
+        const pinCode = this.pin.join('');
+        if (pinCode === '9999') {
+            this.isVerified = true;
+        }
+    }
+    handleTimeout() {
+        this.canResend = true;
+    }
+    async handleResend() {
+        await this.resend();
+        this.canResend = false;
+    }
+    render() {
+        return (h("div", { key: '0dfe272b20cf9bc2a77b488006711b40a1182d7f', class: "crm-phone-form" }, h("label", { key: '5f845c3cbe8680f6070fcdce98dd5fc9bbeb7fc8', class: "crm-subtitle" }, instance.t('pin-sutitle'), " ", h("strong", { key: '68a0a6c5d0c482f0c08f42134edcef2750dace38' }, "+55 ", this.phone)), h("div", { key: '3fc6e7cb1f0087c186ec8329e15b160778f4f6af', class: "pin-container" }, this.pin.map((_, index) => (h("input", { type: "text", maxLength: 1, value: this.pin[index], onInput: (event) => this.handleInput(event, index) })))), h("slot", { key: '3cc833de9c2197c5a78d9874c169a2ed1f9341cb' }), h("p", { key: 'b83fdd1cd0c12a73e5aa667c986a4cfcd9233c79', class: "crm-description" }, " N\u00E3o recebeu?", !this.canResend && h("label", { key: 'd624a07ff0792d893c8b2e9cd2c7cf4bfdb11110' }, " Reenviar em ", h("countdown-timer", { key: '0b71bf50a51924ffca57ab226cfa35022451b619', downtime: () => this.handleTimeout() }), " "), this.canResend && (h("div", { key: '1a8a8c03a428563bcb4813f24e6d0400525590d7' }, h("a", { key: '0b4292274a6c311f8343ddde81da336967f8edad', onClick: () => this.resend() }, "Reenviar"), h("a", { key: 'fdb89612995ee4c79afa83d3a428ba62afabd6f4', onClick: () => this.cancel() }, "Trocar n\u00FAmero")))), h("crm-button", { key: '3c94f9e8adf2d572d8e8fd24ec10e5c984971d11', txtBtn: "Avan\u00E7ar", loading: this.loading, onClick: () => this.validatePin() })));
+    }
+    static get style() { return PinFormStyle0 + PinFormStyle1; }
+}, [1, "pin-form", {
+        "validate": [16],
+        "cancel": [16],
+        "resend": [16],
+        "sent": [16],
+        "loading": [4],
+        "phone": [1],
+        "pin": [32],
+        "isVerified": [32],
+        "canResend": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pin-form", "countdown-timer", "crm-button", "loading-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pin-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, GiftbackPin);
+            }
+            break;
+        case "countdown-timer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "crm-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "loading-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { GiftbackPin as G, defineCustomElement as d };
+
+//# sourceMappingURL=p-6703fdff.js.map

package/dist/components/p-6703fdff.js.map

@@ -0,0 +1 @@
+{"file":"p-6703fdff.js","mappings":"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","names":["i18next"],"sources":["src/components/giftback-form/subcomponents/pin-form/pin-form.css?tag=pin-form&encapsulation=shadow","src/components/giftback-form/giftback-form.css?tag=pin-form&encapsulation=shadow","src/components/giftback-form/subcomponents/pin-form/pin-form.tsx"],"sourcesContent":[":host {\n    display: block;\n    font-family: Arial, sans-serif;\n}\n\n.form-container-pin {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n.pin-container {\n    display: flex;\n    /* margin: 26px 0; */\n    justify-content: start;\n    gap: 10px;\n}\n\ninput {\n    width: 40px;\n    height: 48px;\n    font-size: 14px;\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\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}\n\n.button-cancel {\n    top: 50%;\n    background-color: #ffffff;\n    color: #1e1c1c;\n    border: 1px solid gray;\n    border-radius: 10px;\n    padding: 10px;\n    min-height: 30px;\n    min-width: 120px;\n    font-size: 19px;\n    cursor: pointer;\n}\n\n.crm-description {\n    font-size: 14px;\n    width: 100%;\n    display: flex;\n    gap: 9px;\n}\n\n.crm-description a {\n    font-weight: bold;\n    cursor: pointer;\n    text-decoration: underline;\n}\n\n.crm-description div {\n    display: flex;\n    gap: 5px;\n}","* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\n:host {\n    --crmfont-sizebodymd: 14px;\n    --crmline-heightbodymd: 20px;\n    --crmletter-spacingtitle-md: 0px\n}\n\n.container-message {\n    font-family: Roboto;\n    font-size: var(--crmfont-sizebodymd);\n    font-weight: 400;\n    line-height: var(--crmline-heightbodymd);\n    letter-spacing: var(--crmletter-spacingtitle-md);\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.crm-container-form {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-around;\n    height: auto;\n    padding: 20px 24px 20px 24px;\n    border-block: 1px solid #CCCC;\n    writing-mode: horizontal-tb;\n    gap: 16px;\n    border-top: 1px solid #ccc !important;\n    border-bottom: 1px solid #ccc !important;\n}\n\n/* .fbits-responsive-carrinho-desconto {\n    overflow: hidden;\n    border: 1px solid #ccc;\n    border-top: 0;\n    border-bottom: 0;\n} */\n\n.crm-phone-form {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    /* justify-content: space-around; */\n    gap: 16px;\n}\n\n.crm-subtitle {\n    font-size: 14px;\n    color: var(--crm-btn);\n}\n\n.crm-title {\n    font-weight: 700;\n    line-height: 20px;\n    color: #262626;\n    font-size: 16px;\n}\n\n.crm-message-info {\n    color: #619013;\n    font-weight: 500;\n    font-size: 12px;\n}\n\n.crm-message-error {\n    color: #E11D48;\n    font-weight: 500;\n    font-size: 12px;\n}","import { Component, h, Prop, State } from '@stencil/core';\nimport { IPinSent } from '../../../../dto/pin.sent';\nimport i18next from '../../../../i18n/i18n'\n\n@Component({\n    tag: 'pin-form',\n    styleUrls: ['pin-form.css', '../../giftback-form.css'],\n    shadow: true,\n})\nexport class GiftbackPin {\n\n    @Prop() validate: (pin: string) => void;\n    @Prop() cancel: () => void;\n    @Prop() resend: () => void;\n\n    @Prop() sent: IPinSent;\n    @Prop() loading: boolean = false;\n    @Prop() phone: string;\n\n    @State() pin: string[] = ['', '', '', ''];\n    @State() isVerified: boolean = false;\n    @State() canResend: boolean = false;\n\n    componentWillLoad() {\n        this.canResend = false;\n    }\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(this.pin.join(\"\"))\n    }\n\n    verifyPin() {\n        const pinCode = this.pin.join('');\n        if (pinCode === '9999') {\n            this.isVerified = true;\n        }\n    }\n\n    handleTimeout() {\n        this.canResend = true;\n    }\n\n    async handleResend() {\n        await this.resend();\n\n        this.canResend = false;\n    }\n\n    render() {\n        return (\n            <div class=\"crm-phone-form\">\n                <label class=\"crm-subtitle\" >{i18next.t('pin-sutitle')} <strong>+55 {this.phone}</strong></label>\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\n               <slot></slot>\n\n                <p class=\"crm-description\"> Não recebeu?\n                    {\n                        !this.canResend && <label> Reenviar em <countdown-timer downtime={() => this.handleTimeout()} /> </label>\n                    }\n                    {\n                        this.canResend && (\n                            <div >\n                                <a onClick={() => this.resend()}>Reenviar</a>\n                                <a onClick={() => this.cancel()}>Trocar número</a>\n                            </div>\n                        )\n                    }\n                </p>\n                <crm-button txtBtn=\"Avançar\" loading={this.loading} onClick={() => this.validatePin()} />\n\n\n                {/* <div class=\"footer-button\">\n                    <button class=\"button-cancel\" disabled={this.loading} onClick={() => this.cancel()}>\n                        Cancelar\n                    </button>\n                    <button class={`button ${this.loading ? 'disabled' : ''} `} disabled={this.loading} onClick={() => this.validatePin()}>\n                        {\n                            !this.loading ? \"Enviar\" : <loading-spinner size=\"15px\" color=\"#fff\" />\n                        }\n                    </button>\n                </div> */}\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}

package/dist/components/p-6a95cc63.js

@@ -0,0 +1,238 @@
+import { p as proxyCustomElement, H, h } from './p-2f266d73.js';
+import { C as CrmBonusService } from './p-384fabf7.js';
+import { S as StepFormEnum } from './p-a561251a.js';
+import { g as getInfoCustomization } from './p-75ba7b9a.js';
+import { i as instance } from './p-1d5eeac0.js';
+import { d as defineCustomElement$7 } from './p-39d680b6.js';
+import { d as defineCustomElement$6 } from './p-46578efa.js';
+import { d as defineCustomElement$5 } from './p-0a57e57f.js';
+import { d as defineCustomElement$4 } from './p-5c3fe5a8.js';
+import { d as defineCustomElement$3 } from './p-5f0003a4.js';
+import { d as defineCustomElement$2 } from './p-be365312.js';
+import { d as defineCustomElement$1 } from './p-6703fdff.js';
+
+const giftbackFormCss = "*{margin:0;padding:0;box-sizing:border-box}:host{--crmfont-sizebodymd:14px;--crmline-heightbodymd:20px;--crmletter-spacingtitle-md:0px}.container-message{font-family:Roboto;font-size:var(--crmfont-sizebodymd);font-weight:400;line-height:var(--crmline-heightbodymd);letter-spacing:var(--crmletter-spacingtitle-md);text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.crm-container-form{display:flex;flex-direction:column;justify-content:space-around;height:auto;padding:20px 24px 20px 24px;border-block:1px solid #CCCC;writing-mode:horizontal-tb;gap:16px;border-top:1px solid #ccc !important;border-bottom:1px solid #ccc !important}.crm-phone-form{display:flex;flex-direction:column;height:100%;gap:16px}.crm-subtitle{font-size:14px;color:var(--crm-btn)}.crm-title{font-weight:700;line-height:20px;color:#262626;font-size:16px}.crm-message-info{color:#619013;font-weight:500;font-size:12px}.crm-message-error{color:#E11D48;font-weight:500;font-size:12px}";
+const CrmGiftbackFormStyle0 = giftbackFormCss;
+
+const CrmBonus = /*@__PURE__*/ proxyCustomElement(class CrmBonus extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        // private phoneInputMask: HTMLPhoneFormElement;
+        this.crmBonusService = CrmBonusService.getInstance();
+        this.storeName = undefined;
+        this.cartId = undefined;
+        this.products = undefined;
+        this.value = undefined;
+        this.loading = false;
+        this.message = undefined;
+        this.phone = undefined;
+        this.pinInfo = undefined;
+        this.step = StepFormEnum.STEP_PHONE;
+        this.bonus = undefined;
+        this.sucess = "";
+        this.error = "";
+        this.config = undefined;
+    }
+    async handleSendPin(phone) {
+        this.message = "";
+        if (!phone) {
+            this.message = "Informe seu telefone";
+            return;
+        }
+        this.phone = phone;
+        this.sendPin();
+    }
+    componentWillLoad() {
+        this.sucess = "";
+        this.error = "";
+        this.config = getInfoCustomization(this.storeName);
+    }
+    convertStringToNumber() {
+        const _phone = this.phone.replace(/\D/g, '');
+        return Number(_phone);
+    }
+    async sendPin() {
+        var _a, _b;
+        this.loading = true;
+        this.message = "";
+        this.sucess = "";
+        this.error = "";
+        try {
+            const _phone = this.convertStringToNumber();
+            this.pinInfo = await this.crmBonusService.sendPin(_phone, "", this.storeName);
+            this.step = StepFormEnum.STEP_PIN;
+        }
+        catch (error) {
+            this.message = (_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message;
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    changePhone() {
+        this.sucess = "";
+        this.error = "";
+        this.step = StepFormEnum.STEP_PHONE;
+    }
+    async validateBonus(pin) {
+        var _a, _b;
+        if (this.sucess) {
+            this.step = StepFormEnum.STEP_RESERVE;
+            return;
+        }
+        this.loading = true;
+        this.sucess = "";
+        this.error = "";
+        const payload = {
+            pin: pin,
+            cellphone: this.phone.toString(),
+            storeId: this.pinInfo.storeId.toString(),
+            userId: this.pinInfo.userId.toString(),
+            checkoutId: this.cartId,
+            checkoutProducts: this.products,
+            name: null,
+            storeName: this.storeName
+        };
+        try {
+            this.bonus = await this.crmBonusService.validatePinBonus(payload);
+            this.sucess = "Código validado com sucesso!";
+        }
+        catch (error) {
+            const _error = (_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message;
+            if (_error.includes("Pin")) {
+                this.error = "Código inválido!";
+            }
+            else {
+                this.error = _error;
+            }
+            this.step = StepFormEnum.STEP_NO_BONUS;
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    handleCancel() {
+        // this.step = StepFormEnum.STEP_PHONE;
+        this.cancel();
+    }
+    async cancel() {
+        this.message = "";
+        this.loading = true;
+        try {
+            await this.crmBonusService.cancel(this.cartId);
+            localStorage.removeItem(this.cartId);
+        }
+        catch (error) {
+            this.message = "Não consegui cancelar o bônus, tente novamente!";
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    async reserveApply(amount) {
+        this.loading = true;
+        this.message = "";
+        try {
+            await this.reserve(amount);
+            console.log('[reserva]');
+            this.save(amount);
+        }
+        catch (error) {
+            this.message = "ocorreu um error ao solicitar a aplicação do bonus! tente novamente";
+            this.step = StepFormEnum.STEP_NO_BONUS;
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    save(amount) {
+        localStorage.setItem(this.cartId, amount.toString());
+    }
+    async reserve(amount) {
+        await this.crmBonusService.reserve({
+            redeemedBonus: amount,
+            cartId: this.cartId,
+            ticket: this.cartId,
+            grossValue: Number(this.bonus.totalValue),
+            storeName: this.storeName,
+            storeId: this.bonus.storeId.toString(),
+            userId: this.bonus.userId
+        });
+    }
+    render() {
+        return (h("div", { key: '06d78425ff758b165bb5bc70662182e6f86ad12d', class: "crm-container-form fbits-responsive-carrinho-desconto" }, h("label", { key: '920084d9a172734b5919b31871526a2809bb87be', class: "crm-title" }, this.config.giftbackTitle), this.step === StepFormEnum.STEP_PHONE &&
+            h("phone-form", { key: '3f78734540d1ee27f41cf7dd2eaf1702ac670f49', loading: this.loading, handlerSubmit: (phone) => this.handleSendPin(phone) }), this.step === StepFormEnum.STEP_PIN &&
+            h("pin-form", { key: '5b8957446dace613bcc8d01adda67d5ed4d0b34e', phone: this.phone, cancel: () => this.changePhone(), resend: () => this.sendPin(), validate: (data) => this.validateBonus(data), loading: this.loading }, this.sucess && h("p", { key: '8210548d8bcb0aba9255a5525e3c0041d11d7394', class: "crm-message-info" }, this.sucess), this.error && h("p", { key: 'ad181c7c5d11ca2e120505121939e42363c44c64', class: "crm-message-error" }, this.error)), this.step === StepFormEnum.STEP_RESERVE &&
+            h("giftback-info", { key: '8f9a22db846c8d8fa2d257e7bc1712be1c67b3dc', loading: this.loading, cancel: () => this.handleCancel(), bonus: this.bonus, reserve: (amountRedeemed) => this.reserveApply(amountRedeemed) }), this.step === StepFormEnum.STEP_NO_BONUS &&
+            (h("div", { key: '3e327792f32a22f2064f6201ff14f93fc5124964', class: "container-message" }, instance.t("noGiftback")))));
+    }
+    static get style() { return CrmGiftbackFormStyle0; }
+}, [0, "crm-giftback-form", {
+        "storeName": [8, "storename"],
+        "cartId": [8, "cart-id"],
+        "products": [16],
+        "value": [32],
+        "loading": [32],
+        "message": [32],
+        "phone": [32],
+        "pinInfo": [32],
+        "step": [32],
+        "bonus": [32],
+        "sucess": [32],
+        "error": [32],
+        "config": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["crm-giftback-form", "countdown-timer", "crm-button", "giftback-info", "loading-spinner", "phone-form", "phone-input-mask", "pin-form"];
+    components.forEach(tagName => { switch (tagName) {
+        case "crm-giftback-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CrmBonus);
+            }
+            break;
+        case "countdown-timer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "crm-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "giftback-info":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "loading-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "phone-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "phone-input-mask":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "pin-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { CrmBonus as C, defineCustomElement as d };
+
+//# sourceMappingURL=p-6a95cc63.js.map

package/dist/components/p-6a95cc63.js.map

@@ -0,0 +1 @@
+{"file":"p-6a95cc63.js","mappings":"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","names":["i18next"],"sources":["src/components/giftback-form/giftback-form.css?tag=crm-giftback-form","src/components/giftback-form/giftback-form.tsx"],"sourcesContent":["* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\n:host {\n    --crmfont-sizebodymd: 14px;\n    --crmline-heightbodymd: 20px;\n    --crmletter-spacingtitle-md: 0px\n}\n\n.container-message {\n    font-family: Roboto;\n    font-size: var(--crmfont-sizebodymd);\n    font-weight: 400;\n    line-height: var(--crmline-heightbodymd);\n    letter-spacing: var(--crmletter-spacingtitle-md);\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.crm-container-form {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-around;\n    height: auto;\n    padding: 20px 24px 20px 24px;\n    border-block: 1px solid #CCCC;\n    writing-mode: horizontal-tb;\n    gap: 16px;\n    border-top: 1px solid #ccc !important;\n    border-bottom: 1px solid #ccc !important;\n}\n\n/* .fbits-responsive-carrinho-desconto {\n    overflow: hidden;\n    border: 1px solid #ccc;\n    border-top: 0;\n    border-bottom: 0;\n} */\n\n.crm-phone-form {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    /* justify-content: space-around; */\n    gap: 16px;\n}\n\n.crm-subtitle {\n    font-size: 14px;\n    color: var(--crm-btn);\n}\n\n.crm-title {\n    font-weight: 700;\n    line-height: 20px;\n    color: #262626;\n    font-size: 16px;\n}\n\n.crm-message-info {\n    color: #619013;\n    font-weight: 500;\n    font-size: 12px;\n}\n\n.crm-message-error {\n    color: #E11D48;\n    font-weight: 500;\n    font-size: 12px;\n}","import { Component, Prop, State, h } from \"@stencil/core\";\nimport { CrmBonusService } from \"../../services/crmbonus.service\";\nimport { StepFormEnum } from \"../../contants\";\nimport { IPinSent } from '../../dto/pin.sent'\nimport { IBonus, IProccesPinBonusDto, IProduct } from \"../../dto/validate.pin.bonus\";\nimport { IInfoStore, getInfoCustomization } from \"../../helpers/info.config.helper\";\n\nimport i18next from \"../../i18n/i18n\"\n\n@Component({\n  tag: 'crm-giftback-form',\n  styleUrl: 'giftback-form.css'\n})\nexport class CrmBonus {\n  // private phoneInputMask: HTMLPhoneFormElement;\n\n  private crmBonusService: CrmBonusService = CrmBonusService.getInstance();\n\n  @Prop({ attribute: 'storename' }) storeName;\n  @Prop() cartId;\n  @Prop() products: Array<IProduct>;\n\n  @State() value: string;\n  @State() loading: boolean = false;\n  @State() message: string;\n  @State() phone: string;\n  @State() pinInfo: IPinSent;\n  @State() step: StepFormEnum = StepFormEnum.STEP_PHONE;\n  @State() bonus: IBonus;\n\n  @State() sucess: string = \"\";\n  @State() error: string = \"\";\n  @State() config: IInfoStore;\n\n  async handleSendPin(phone: string) {\n\n    this.message = \"\"\n    if (!phone) {\n      this.message = \"Informe seu telefone\";\n      return;\n    }\n\n    this.phone = phone;\n\n    this.sendPin()\n  }\n\n  componentWillLoad() {\n    this.sucess = \"\";\n    this.error = \"\"\n    this.config = getInfoCustomization(this.storeName);\n  }\n\n  private convertStringToNumber(): number {\n    const _phone = this.phone.replace(/\\D/g, '');\n    return Number(_phone);\n  }\n\n  public async sendPin() {\n    this.loading = true;\n    this.message = \"\";\n    this.sucess = \"\";\n    this.error = \"\"\n\n    try {\n\n      const _phone = this.convertStringToNumber()\n\n      this.pinInfo = await this.crmBonusService.sendPin(_phone, \"\", this.storeName);\n\n      this.step = StepFormEnum.STEP_PIN;\n\n    } catch (error) {\n      this.message = error?.response?.data?.message\n    } finally {\n      this.loading = false\n    }\n  }\n\n  changePhone() {\n    this.sucess = \"\";\n    this.error = \"\"\n    this.step = StepFormEnum.STEP_PHONE;\n  }\n\n  public async validateBonus(pin: string) {\n\n    if (this.sucess) {\n      this.step = StepFormEnum.STEP_RESERVE;\n      return\n    }\n\n    this.loading = true;\n    this.sucess = \"\";\n    this.error = \"\";\n    const payload: IProccesPinBonusDto = {\n      pin: pin,\n      cellphone: this.phone.toString(),\n      storeId: this.pinInfo.storeId.toString(),\n      userId: this.pinInfo.userId.toString(),\n      checkoutId: this.cartId,\n      checkoutProducts: this.products,\n      name: null,\n      storeName: this.storeName\n    }\n\n    try {\n      this.bonus = await this.crmBonusService.validatePinBonus(payload);\n\n      this.sucess = \"Código validado com sucesso!\";\n\n    } catch (error) {\n      const _error: string = error?.response?.data?.message;\n\n      if (_error.includes(\"Pin\")) {\n        this.error = \"Código inválido!\"\n      } else {\n        this.error = _error;\n      }\n\n      this.step = StepFormEnum.STEP_NO_BONUS;\n\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  public handleCancel() {\n    // this.step = StepFormEnum.STEP_PHONE;\n    this.cancel()\n  }\n\n  async cancel() {\n    this.message = \"\";\n    this.loading = true;\n    try {\n      await this.crmBonusService.cancel(this.cartId);\n      localStorage.removeItem(this.cartId);\n    } catch (error) {\n      this.message = \"Não consegui cancelar o bônus, tente novamente!\"\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  public async reserveApply(amount: number) {\n    this.loading = true;\n    this.message = \"\";\n    try {\n      await this.reserve(amount);\n\n      console.log('[reserva]')\n     \n      this.save(amount);\n    } catch (error) {\n      this.message = \"ocorreu um error ao solicitar a aplicação do bonus! tente novamente\"\n\n      this.step = StepFormEnum.STEP_NO_BONUS;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  save(amount: number) {\n    localStorage.setItem(this.cartId, amount.toString());\n  }\n\n  public async reserve(amount: number) {\n\n    await this.crmBonusService.reserve({\n      redeemedBonus: amount,\n      cartId: this.cartId,\n      ticket: this.cartId,\n      grossValue: Number(this.bonus.totalValue),\n      storeName: this.storeName,\n      storeId: this.bonus.storeId.toString(),\n      userId: this.bonus.userId\n    });\n  }\n\n  render() {\n    return (\n      <div class=\"crm-container-form fbits-responsive-carrinho-desconto\" >\n        <label class=\"crm-title\">{this.config.giftbackTitle}</label>\n\n        {this.step === StepFormEnum.STEP_PHONE &&\n          <phone-form\n            loading={this.loading}\n            handlerSubmit={(phone) => this.handleSendPin(phone)}\n          />}\n        {\n          this.step === StepFormEnum.STEP_PIN &&\n          <pin-form\n            phone={this.phone}\n            cancel={() => this.changePhone()}\n            resend={() => this.sendPin()}\n            validate={(data) => this.validateBonus(data)}\n            loading={this.loading}\n          >\n            {this.sucess && <p class=\"crm-message-info\">{this.sucess}</p>}\n            {this.error && <p class=\"crm-message-error\">{this.error}</p>}\n\n          </pin-form>\n        }\n\n        {\n          this.step === StepFormEnum.STEP_RESERVE &&\n          <giftback-info\n            loading={this.loading}\n            cancel={() => this.handleCancel()}\n            bonus={this.bonus}\n            reserve={(amountRedeemed: number) => this.reserveApply(amountRedeemed)}\n          />\n        }\n\n\n        {\n          this.step === StepFormEnum.STEP_NO_BONUS &&\n          (\n            <div class=\"container-message\">\n              { i18next.t(\"noGiftback\") }\n            </div>\n          )\n\n        }\n      </div>\n    )\n  }\n}"],"version":3}

package/dist/components/p-75ba7b9a.js

@@ -0,0 +1,14 @@
+function getInfoCustomization(storeName) {
+    const infos = localStorage.getItem(`bc:${storeName}`);
+    if (infos)
+        return JSON.parse(infos);
+    return {
+        btnApplyBonusLabel: "Avançar",
+        confirmationMessage: "",
+        giftbackTitle: "Giftback"
+    };
+}
+
+export { getInfoCustomization as g };
+
+//# sourceMappingURL=p-75ba7b9a.js.map

package/dist/components/p-75ba7b9a.js.map

@@ -0,0 +1 @@
+{"file":"p-75ba7b9a.js","mappings":"SAOgB,oBAAoB,CAAC,SAAiB;IAClD,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,MAAM,SAAS,EAAE,CAAC,CAAC;IAEtD,IAAI,KAAK;QACL,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IAE5B,OAAO;QACH,kBAAkB,EAAE,SAAS;QAC7B,mBAAmB,EAAE,EAAE;QACvB,aAAa,EAAE,UAAU;KAC5B,CAAA;AAEL;;;;","names":[],"sources":["src/helpers/info.config.helper.ts"],"sourcesContent":["export interface IInfoStore {\n    btnApplyBonusLabel: string;\n    confirmationMessage: string;\n    giftbackTitle: string;\n}\n\n\nexport function getInfoCustomization(storeName: string): IInfoStore {\n    const infos = localStorage.getItem(`bc:${storeName}`);\n\n    if (infos)\n        return JSON.parse(infos)\n\n    return {\n        btnApplyBonusLabel: \"Avançar\",\n        confirmationMessage: \"\",\n        giftbackTitle: \"Giftback\"\n    }\n\n}"],"version":3}