crmbonus-component-wake 0.0.27 → 1.0.28
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/cjs/app-modal_4.cjs.entry.js +152 -0
- package/dist/cjs/app-modal_4.cjs.entry.js.map +1 -0
- package/dist/cjs/crm-bonus.cjs.entry.js +37 -6
- package/dist/cjs/crm-bonus.cjs.entry.js.map +1 -1
- package/dist/cjs/crmbonus-component-wake.cjs.js +1 -1
- package/dist/cjs/{giftback-finish_5.cjs.entry.js → giftback-finish_3.cjs.entry.js} +6 -59
- package/dist/cjs/giftback-finish_3.cjs.entry.js.map +1 -0
- package/dist/cjs/index-296f70bf.js +11 -0
- package/dist/cjs/index-296f70bf.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/loading-spinner.cjs.entry.js +1 -1
- package/dist/cjs/pedido-finalizado.cjs.entry.js +1 -1
- package/dist/cjs/phone-input-mask.cjs.entry.js +45 -0
- package/dist/cjs/phone-input-mask.cjs.entry.js.map +1 -0
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/crm-bonus/crm-bonus.css +54 -1
- package/dist/collection/components/crm-bonus/crm-bonus.js +43 -5
- package/dist/collection/components/crm-bonus/crm-bonus.js.map +1 -1
- package/dist/collection/components/crm-bonus-form/crm-bonus-form.css +0 -13
- package/dist/collection/components/crm-bonus-form/crm-bonus-form.js +125 -30
- package/dist/collection/components/crm-bonus-form/crm-bonus-form.js.map +1 -1
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-finish/giftback-finish.js +1 -1
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.js +1 -1
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.js +3 -3
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.js.map +1 -1
- package/dist/collection/components/crm-bonus-form/subcomponents/phone/phone.input.js +1 -1
- package/dist/collection/components/crm-bonus-form/subcomponents/phone/phone.input.js.map +1 -1
- package/dist/collection/components/crm-bonus-form/subcomponents/phone-cancel/phone.cancel.input.js +75 -0
- package/dist/collection/components/crm-bonus-form/subcomponents/phone-cancel/phone.cancel.input.js.map +1 -0
- package/dist/collection/components/loading-spinner/loading-spinner.js +1 -1
- package/dist/collection/components/modal/app-modal.js +1 -1
- package/dist/collection/components/pedido/pedido.js +1 -1
- package/dist/collection/components/phone/phone-input-mask.css +16 -7
- package/dist/collection/components/phone/phone-input-mask.js +19 -1
- package/dist/collection/components/phone/phone-input-mask.js.map +1 -1
- package/dist/components/app-modal.js +1 -1
- package/dist/components/crm-bonus-form.js +1 -1
- package/dist/components/crm-bonus.js +62 -21
- package/dist/components/crm-bonus.js.map +1 -1
- package/dist/components/giftback-finish.js +1 -1
- package/dist/components/giftback-pin.js +1 -1
- package/dist/components/giftback-progress.js +1 -1
- package/dist/components/loading-spinner.js +1 -1
- package/dist/components/{p-cb5a1fdf.js → p-03918b34.js} +2 -2
- package/dist/components/{p-cb5a1fdf.js.map → p-03918b34.js.map} +1 -1
- package/dist/components/{p-cbade307.js → p-2667d525.js} +2 -2
- package/dist/components/{p-cbade307.js.map → p-2667d525.js.map} +1 -1
- package/dist/components/{p-8fcf8924.js → p-3d431add.js} +4 -4
- package/dist/components/{p-8fcf8924.js.map → p-3d431add.js.map} +1 -1
- package/dist/components/{p-e40cf14d.js → p-3d7c9042.js} +5 -3
- package/dist/components/p-3d7c9042.js.map +1 -0
- package/dist/components/{p-6442ffce.js → p-3e80a758.js} +3 -3
- package/dist/components/{p-6442ffce.js.map → p-3e80a758.js.map} +1 -1
- package/dist/components/p-a7c9d0d8.js +52 -0
- package/dist/components/p-a7c9d0d8.js.map +1 -0
- package/dist/components/{p-878ce0aa.js → p-b4c3e6bf.js} +36 -54
- package/dist/components/p-b4c3e6bf.js.map +1 -0
- package/dist/components/{p-462c12d8.js → p-c5913818.js} +5 -5
- package/dist/components/p-c5913818.js.map +1 -0
- package/dist/components/{p-e816fb90.js → p-f6396f4c.js} +2 -2
- package/dist/components/{p-e816fb90.js.map → p-f6396f4c.js.map} +1 -1
- package/dist/components/pedido-finalizado.js +1 -1
- package/dist/components/phone-cancel-input.d.ts +11 -0
- package/dist/components/phone-cancel-input.js +8 -0
- package/dist/components/phone-cancel-input.js.map +1 -0
- package/dist/components/phone-input-mask.js +1 -1
- package/dist/components/phone-input.js +1 -1
- package/dist/crmbonus-component-wake/crmbonus-component-wake.esm.js +1 -1
- package/dist/crmbonus-component-wake/crmbonus-component-wake.esm.js.map +1 -1
- package/dist/crmbonus-component-wake/p-562a34f1.entry.js +2 -0
- package/dist/crmbonus-component-wake/p-562a34f1.entry.js.map +1 -0
- package/dist/crmbonus-component-wake/p-8e6cdd1e.js +2 -0
- package/dist/crmbonus-component-wake/p-8e6cdd1e.js.map +1 -0
- package/dist/crmbonus-component-wake/p-9163a847.entry.js +2 -0
- package/dist/crmbonus-component-wake/p-9163a847.entry.js.map +1 -0
- package/dist/crmbonus-component-wake/{p-f74e4a71.entry.js → p-a603a26e.entry.js} +2 -2
- package/dist/crmbonus-component-wake/p-e9c2ed46.entry.js +2 -0
- package/dist/crmbonus-component-wake/p-e9c2ed46.entry.js.map +1 -0
- package/dist/crmbonus-component-wake/{p-4306a717.entry.js → p-ef75ecd5.entry.js} +2 -2
- package/dist/crmbonus-component-wake/p-fafb8311.entry.js +2 -0
- package/dist/crmbonus-component-wake/p-fafb8311.entry.js.map +1 -0
- package/dist/esm/app-modal_4.entry.js +145 -0
- package/dist/esm/app-modal_4.entry.js.map +1 -0
- package/dist/esm/crm-bonus.entry.js +37 -6
- package/dist/esm/crm-bonus.entry.js.map +1 -1
- package/dist/esm/crmbonus-component-wake.js +1 -1
- package/dist/esm/{giftback-finish_5.entry.js → giftback-finish_3.entry.js} +7 -58
- package/dist/esm/giftback-finish_3.entry.js.map +1 -0
- package/dist/esm/index-2bfaba2b.js +11 -0
- package/dist/esm/index-2bfaba2b.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/loading-spinner.entry.js +1 -1
- package/dist/esm/pedido-finalizado.entry.js +1 -1
- package/dist/esm/phone-input-mask.entry.js +41 -0
- package/dist/esm/phone-input-mask.entry.js.map +1 -0
- package/dist/types/components/crm-bonus/crm-bonus.d.ts +9 -0
- package/dist/types/components/crm-bonus-form/crm-bonus-form.d.ts +8 -4
- package/dist/types/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.d.ts +1 -1
- package/dist/types/components/crm-bonus-form/subcomponents/phone-cancel/phone.cancel.input.d.ts +8 -0
- package/dist/types/components/phone/phone-input-mask.d.ts +1 -0
- package/dist/types/components.d.ts +32 -0
- package/package.json +1 -1
- package/dist/cjs/app-modal_2.cjs.entry.js +0 -134
- package/dist/cjs/app-modal_2.cjs.entry.js.map +0 -1
- package/dist/cjs/giftback-finish_5.cjs.entry.js.map +0 -1
- package/dist/components/p-462c12d8.js.map +0 -1
- package/dist/components/p-878ce0aa.js.map +0 -1
- package/dist/components/p-e40cf14d.js.map +0 -1
- package/dist/crmbonus-component-wake/p-9985f639.entry.js +0 -2
- package/dist/crmbonus-component-wake/p-9985f639.entry.js.map +0 -1
- package/dist/crmbonus-component-wake/p-be1a56de.entry.js +0 -2
- package/dist/crmbonus-component-wake/p-be1a56de.entry.js.map +0 -1
- package/dist/crmbonus-component-wake/p-e2f165e8.entry.js +0 -2
- package/dist/crmbonus-component-wake/p-e2f165e8.entry.js.map +0 -1
- package/dist/esm/app-modal_2.entry.js +0 -129
- package/dist/esm/app-modal_2.entry.js.map +0 -1
- package/dist/esm/giftback-finish_5.entry.js.map +0 -1
- /package/dist/crmbonus-component-wake/{p-f74e4a71.entry.js.map → p-a603a26e.entry.js.map} +0 -0
- /package/dist/crmbonus-component-wake/{p-4306a717.entry.js.map → p-ef75ecd5.entry.js.map} +0 -0
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as e,h as i}from"./p-72510682.js";const t="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiANCgkgdmlld0JveD0iMCAwIDUwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxjaXJjbGUgc3R5bGU9ImZpbGw6IzI1QUU4ODsiIGN4PSIyNSIgY3k9IjI1IiByPSIyNSIvPg0KPHBvbHlsaW5lIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwOyIgcG9pbnRzPSINCgkzOCwxNSAyMiwzMyAxMiwyNSAiLz4NCjwvc3ZnPg==";const a=".message-finish{align-content:center;text-align:center}.message-finish p{color:#777676;font-size:xx-large;font-family:sans-serif}";const c=a;const n=class{constructor(i){e(this,i)}render(){return i("div",{key:"4fd9a7731194fbe8e9dbe0e2fc9d4241f0baf733",class:"message-finish"},i("img",{key:"ba423d92f1672f14be34334fd0495f38f1f70f4a",src:t,width:80}),i("p",{key:"75d6b9648c1357ced70ad43cb94091da73224179"},"Legal! O Bônus será aplicado na sua compra."))}};n.style=c;const s=":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 o=s;const d=class{constructor(i){e(this,i);this.sent=undefined;this.validate=undefined;this.cancel=undefined;this.pin=["","","",""];this.isVerified=false;this.loading=false}handleInput(e,i){const t=e.target;const a=t.value.slice(0,1);this.pin[i]=a;if(a&&i<this.pin.length-1){const e=t.nextElementSibling;e===null||e===void 0?void 0:e.focus()}this.pin=[...this.pin]}validatePin(){console.log("this.pin",this.pin);this.validate(this.pin.join(""))}verifyPin(){const e=this.pin.join("");if(e==="9999"){this.isVerified=true}}render(){return i("div",{key:"eb95118bcc7de8cf50c3ffa97656e5635a9b72de",class:"form-container-pin"},i("div",{key:"cc149d68ccf12e688fe477079c15931ce0ea6536"},i("p",{key:"fbcbb77d526981fca9129e2a1acbc55eba5c9d33"},"Insira o PIN de 4 dígitos enviado por SMS."),i("div",{key:"ac9887bbc7ef732fd95c890b459b8962652c6fef",class:"pin-container"},this.pin.map(((e,t)=>i("input",{type:"text",maxLength:1,value:this.pin[t],onInput:e=>this.handleInput(e,t)}))))),i("div",{key:"ca835c16a8aa1177c80cc37f43faaa2f1a7af025",class:"footer-button"},i("button",{key:"6eabe644de6085a1780bec151503c09aa123e459",class:"button-cancel",disabled:this.loading,onClick:()=>this.cancel()},"Cancelar"),i("button",{key:"2b6dd05d209e86ce5dc0d1113b38b16d541e107f",class:`button ${this.loading?"disabled":""} `,disabled:this.loading,onClick:()=>this.validatePin()},!this.loading?"Enviar":i("loading-spinner",{size:"15px",color:"#fff"}))))}};d.style=o;const r=":host{display:flex;font-family:Arial, sans-serif;border-radius:10px;padding:16px;max-width:100%;flex-direction:column}.giftback-container{display:flex;flex-direction:column}.giftback-container p{font-size:medium}h3{margin:0 0 10px;font-size:18px}p{margin:5px 0;font-size:14px;align-self:start}.validity{font-size:12px;color:#888}.progress-container{display:flex;align-items:center;margin:10px 0}progress-container span{font-size:12px;color:#666}input[type='range']{flex:1;margin:0 10px;appearance:none;background-color:#ccc;height:6px;border-radius:3px;outline:none;cursor:pointer}input[type='range']::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background-color:#555;cursor:pointer}.remaining{font-weight:bold;font-size:14px;color:#333}.button{top:50%;background-color:#6c6c7e;color:#fff;border:none;border-radius:10px;padding:10px;min-height:30px;min-width:120px;font-size:19px;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}.disabled{opacity:0.6;cursor:not-allowed}.footer-button-giftback{display:flex;justify-content:space-between;margin-top:14px}";const f=r;const b=class{constructor(i){e(this,i);this.usedValue=0;this.loading=false;this.bonus={totalBonus:0,cartId:"",minimumPurchase:0,bonusBalance:0,calculatedValue:0,firstValidityDate:""};this.reserve=undefined;this.cancel=undefined}componentWillLoad(){this.usedValue=parseFloat(this.bonus.bonusBalance.toString())}handleSliderChange(e){const i=e.target;this.usedValue=parseFloat(i.value)}async handleReserve(e){this.reserve(e)}render(){const e=this.bonus.minimumPurchase-this.bonus.totalValue;return i("div",{key:"e6f36ce0f31f70d5402cf89f20b54b7d4f4de7f6",class:"giftback-container"},i("p",{key:"6075406b5eaefb21357161f6980bf6a0e709b98c"},"Você possui até ",i("strong",{key:"f80192384fe4b189469fb7ee16de266270a8e30c"},"R$ ",this.bonus.totalBonus.toFixed(2))," de Giftback nessa compra!"),i("p",{key:"453c0a71fe2f8cb2ebf9a6e6b8b55397ee3a9d5b",class:"validity"},"Válido até: ",new Date(this.bonus.firstValidityDate).toLocaleDateString("pt-Br")),i("p",{key:"ae7d8bbdb67801ff3b336ce9bcafb381a52c41e1"},"Você está utilizando ",i("strong",{key:"7aa9370121720872deddd9596edbf841ccb4119b"},"R$ ",this.usedValue.toFixed(2))," nessa compra"),i("div",{key:"010aac89dd4192cc992d342fc334f6719620663e",class:"progress-container"},i("span",{key:"b2d0ee511ef6e32cdefeadcb0d740682c6da5124"},"R$ 0"),i("input",{key:"3b659919ff940fa353c819fbc395c5fd15ad386b",disabled:true,type:"range",min:"0",step:"0.01",max:this.bonus.totalBonus,value:this.usedValue,onInput:e=>this.handleSliderChange(e)}),i("span",{key:"60e99bf9891b4172f68f8abfbcdf18175a0cc6b0"},"R$ ",this.bonus.totalBonus.toFixed(2))),i("p",{key:"07d1bd092cf438bb2e6b1ca0838d4215e73c4ef0",class:"remaining"},"Faltam ",i("strong",{key:"180966167d48f8ea247ea785a4d35d37c6b5944b"},"R$ ",e>0?e.toFixed(2):Number(0).toFixed(2))," para utilizar o valor total do Giftback."),i("div",{key:"277aed85f840f66a517fa23849dadacddda43f5a",class:"footer-button-giftback"},i("button",{key:"30c0779c496b54b86e0c4025528aa1e348f69c1c",class:"button-cancel",disabled:this.loading,onClick:()=>this.cancel()},"Cancelar"),i("button",{key:"ec7e9d6982c5910b8c6fc9fef7310072a07d00c1",class:`button ${this.loading?"disabled":""} `,disabled:this.loading,onClick:()=>this.handleReserve(this.usedValue)},!this.loading?"Aplicar":i("loading-spinner",{size:"10px",color:"#fff"}))))}};b.style=f;export{n as giftback_finish,d as giftback_pin,b as giftback_progress};
|
2
|
+
//# sourceMappingURL=p-e9c2ed46.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["successSvgrepoComSvg","giftbackFinishCss","GiftbackFinishStyle0","GiftbackFinish","render","h","key","class","src","success","width","giftbackPinCss","GiftbackPinStyle0","GiftbackPin","handleInput","event","index","input","target","value","slice","this","pin","length","nextInput","nextElementSibling","focus","validatePin","console","log","validate","join","verifyPin","pinCode","isVerified","map","_","type","maxLength","onInput","disabled","loading","onClick","cancel","size","color","giftbackProgressCss","GiftbackProgressStyle0","GiftbackProgress","totalBonus","cartId","minimumPurchase","bonusBalance","calculatedValue","firstValidityDate","componentWillLoad","usedValue","parseFloat","bonus","toString","handleSliderChange","handleReserve","reserve","remainingGiftback","totalValue","toFixed","Date","toLocaleDateString","min","step","max","Number"],"sources":["src/components/crm-bonus/assets/svg/success-svgrepo-com.svg","src/components/crm-bonus-form/subcomponents/giftback-finish/giftback-finish.css?tag=giftback-finish&encapsulation=shadow","src/components/crm-bonus-form/subcomponents/giftback-finish/giftback-finish.tsx","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","src/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.css?tag=giftback-progress&encapsulation=shadow","src/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.tsx"],"sourcesContent":["<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\r\n<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->\r\n<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" \r\n\t viewBox=\"0 0 50 50\" xml:space=\"preserve\">\r\n<circle style=\"fill:#25AE88;\" cx=\"25\" cy=\"25\" r=\"25\"/>\r\n<polyline style=\"fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;\" points=\"\r\n\t38,15 22,33 12,25 \"/>\r\n</svg>",".message-finish {\n align-content: center;\n text-align: center;\n}\n\n.message-finish p {\n color: #777676;\n font-size: xx-large;\n font-family: sans-serif;\n}","import { Component, h } from \"@stencil/core\";\nimport success from '../../../crm-bonus/assets/svg/success-svgrepo-com.svg'\n\n@Component({\n tag: 'giftback-finish',\n styleUrl: 'giftback-finish.css',\n shadow: true\n})\nexport class GiftbackFinish {\n render() {\n return (\n <div class=\"message-finish\">\n <img src={success} width={80} />\n <p>Legal! O Bônus será aplicado na sua compra.</p>\n </div>\n )\n }\n}",":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\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}\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",":host {\n display: flex;\n font-family: Arial, sans-serif;\n /* background-color: #f8f4eb; */\n border-radius: 10px;\n padding: 16px;\n /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */\n max-width: 100%;\n flex-direction: column;\n}\n\n.giftback-container {\n display: flex;\n flex-direction: column;\n}\n\n.giftback-container p {\n font-size: medium;\n}\n\nh3 {\n margin: 0 0 10px;\n font-size: 18px;\n}\n\np {\n margin: 5px 0;\n font-size: 14px;\n align-self: start;\n}\n\n.validity {\n font-size: 12px;\n color: #888;\n}\n\n.progress-container {\n display: flex;\n align-items: center;\n margin: 10px 0;\n}\n\nprogress-container span {\n font-size: 12px;\n color: #666;\n}\n\ninput[type='range'] {\n flex: 1;\n margin: 0 10px;\n appearance: none;\n background-color: #ccc;\n height: 6px;\n border-radius: 3px;\n outline: none;\n cursor: pointer;\n}\n\ninput[type='range']::-webkit-slider-thumb {\n appearance: none;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background-color: #555;\n cursor: pointer;\n}\n\n.remaining {\n font-weight: bold;\n font-size: 14px;\n color: #333;\n}\n\n.button {\n top: 50%;\n background-color: #6c6c7e;\n color: #fff;\n border: none;\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.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.disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.footer-button-giftback {\n display: flex;\n justify-content: space-between;\n margin-top: 14px;\n}","import { Component, h, State, Prop } from '@stencil/core';\nimport { IBonus } from '../../../../dto/validate.pin.bonus';\n\n@Component({\n tag: 'giftback-progress',\n styleUrl: 'giftback-progress.css',\n shadow: true,\n})\nexport class GiftbackProgress {\n @State() usedValue: number = 0;\n\n @Prop() loading: boolean = false;\n\n @Prop() bonus: Partial<IBonus> = {\n totalBonus: 0,\n cartId: \"\",\n minimumPurchase: 0,\n bonusBalance: 0,\n calculatedValue: 0,\n firstValidityDate: \"\"\n };\n\n @Prop() reserve: (amountRedeemed: number) => void;\n @Prop() cancel: () => void;\n\n componentWillLoad() {\n this.usedValue = parseFloat(this.bonus.bonusBalance.toString());\n }\n\n handleSliderChange(event: Event) {\n const input = event.target as HTMLInputElement;\n this.usedValue = parseFloat(input.value);\n }\n\n async handleReserve(value: number) {\n this.reserve(value);\n }\n\n render() {\n const remainingGiftback = this.bonus.minimumPurchase - this.bonus.totalValue;\n\n return (\n <div class=\"giftback-container\">\n <p>\n Você possui até <strong>R$ {this.bonus.totalBonus.toFixed(2)}</strong> de Giftback nessa compra!\n </p>\n <p class=\"validity\">Válido até: {new Date(this.bonus.firstValidityDate).toLocaleDateString('pt-Br')}</p>\n\n <p>Você está utilizando <strong>R$ {this.usedValue.toFixed(2)}</strong> nessa compra</p>\n\n <div class=\"progress-container\">\n <span>R$ 0</span>\n <input\n disabled\n type=\"range\"\n min=\"0\"\n step=\"0.01\"\n max={this.bonus.totalBonus}\n value={this.usedValue}\n onInput={(event) => this.handleSliderChange(event)}\n />\n <span>R$ {this.bonus.totalBonus.toFixed(2)}</span>\n </div>\n\n <p class=\"remaining\">\n Faltam <strong>R$ {remainingGiftback > 0 ? remainingGiftback.toFixed(2) : Number(0).toFixed(2)}</strong> para utilizar o valor total do Giftback.\n </p>\n\n <div class=\"footer-button-giftback\">\n\n <button class=\"button-cancel\" disabled={this.loading} onClick={() => this.cancel()} >\n Cancelar\n </button>\n\n <button class={`button ${this.loading ? 'disabled' : ''} `} disabled={this.loading} onClick={() => this.handleReserve(this.usedValue)}>\n {\n !this.loading ? \"Aplicar\" : <loading-spinner size=\"10px\" color=\"#fff\" />\n }\n </button>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as i,h as t}from"./p-72510682.js";import{C as s}from"./p-374de9ae.js";const
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as i,h as t}from"./p-72510682.js";import{C as s}from"./p-374de9ae.js";const d=class{constructor(t){i(this,t);this.cartId=undefined;this.orderId=undefined;this.metadadoString=undefined}async componentWillLoad(){console.log("this.metadadoString",this.metadadoString);const i=this.metadadoString?JSON.parse(this.metadadoString):{id:null};console.log("this.cartId",this.cartId);console.log("this.orderid",this.orderId);console.log("metadadoid",i);if(this.cartId&&this.orderId){await(new s).updateOrder({cartId:this.cartId,orderId:this.orderId,cartIdCrm:i.id})}}render(){return t("div",{key:"693b9e4927b433cd01e555d33e0430c40d80c91a"})}};export{d as pedido_finalizado};
|
2
|
+
//# sourceMappingURL=p-ef75ecd5.entry.js.map
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as t,h as e}from"./p-72510682.js";import{C as i}from"./p-374de9ae.js";import{S as s}from"./p-8e6cdd1e.js";const n=".container-button{max-width:100%;cursor:pointer;padding:10px;display:flex}.section-crm{border:1px solid #dbd4d4;text-align:-webkit-center;margin-bottom:20px}.section-cart-crm{text-align:-webkit-center;margin-bottom:20px}.button{top:50%;background-color:#6c6c7e;color:#fff;border:none;padding:15px;min-height:30px;min-width:120px;font-size:20px;cursor:pointer;margin-left:10px;height:70px}.form-container{width:100%;display:flex;justify-content:center;justify-content:space-around}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}";const a=n;const o=class{constructor(e){t(this,e);this.crmBonusService=new i;this.showModal=false;this.userId=undefined;this.storeName=undefined;this.productsInString=undefined;this.cartId=undefined;this.products=undefined;this.customer={birthDate:"",document:"",name:"",phone:""};this.loading=false;this.message=undefined;this.phone=undefined;this.canCancel=false;this.sent=undefined}async componentWillLoad(){await this.handleLoad()}async handleLoad(){try{if(this.userId){console.log("user",this.customer)}}catch(t){console.log("info customer")}this.products=JSON.parse(this.productsInString)}async sendPin(t){var e,i;this.loading=true;this.message="";try{const e=t.replace(/\D/g,"");this.phone=Number(e);this.sent=await this.crmBonusService.sendPin(this.phone,this.storeName);await this.crmBonusRef.setStep(s.STEP_PIN);this.showModal=true}catch(t){this.message=(i=(e=t===null||t===void 0?void 0:t.response)===null||e===void 0?void 0:e.data)===null||i===void 0?void 0:i.message}finally{this.loading=false}}buildProducts(){return this.products.map((t=>({sku:t.SKU,value:t.PrecoPor*t.Quantidade,variantId:t.ProdutoVarianteId,qtd:t.Quantidade})))}handleCloseModal(){this.showModal=false}save(){localStorage.setItem("@BYCODERS",this.cartId)}render(){return e("div",{key:"18d08a3d03ae5106cf01a426751db8300847f95c",class:"section-cart-crm"},e("div",{key:"dd9e939b78616cea4ea0b77ac32fe15afe63c9f9",class:"container-button"},this.canCancel?e("phone-cancel-input",{value:this.customer.phone,sendPin:()=>{},loading:this.loading}):e("phone-input",{value:this.customer.phone,sendPin:t=>{this.sendPin(t)},loading:this.loading})),e("app-modal",{key:"1ea4bbfc4725c76a93f29494b1fa75a5cddc01c2",isOpen:this.showModal,modalTitle:`Giftback`,onModalClosed:()=>this.showModal=false},e("crm-bonus-form",{key:"791172ad0eedeb3d2a0da2e965e1298a9bc1003d",saveStore:()=>this.save(),ref:t=>this.crmBonusRef=t,sent:this.sent,phone:this.phone,cancel:()=>this.handleCloseModal(),storeName:this.storeName,products:this.buildProducts(),cartId:this.cartId,customer:this.customer})))}static get assetsDirs(){return["assets"]}};o.style=a;export{o as crm_bonus};
|
2
|
+
//# sourceMappingURL=p-fafb8311.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["crmBonusCss","CrmBonusStyle0","CrmBonus","this","crmBonusService","CrmBonusService","birthDate","document","name","phone","componentWillLoad","handleLoad","userId","console","log","customer","error","products","JSON","parse","productsInString","sendPin","loading","message","_phone","replace","Number","sent","storeName","crmBonusRef","setStep","StepFormEnum","STEP_PIN","showModal","_b","_a","response","data","buildProducts","map","product","sku","SKU","value","PrecoPor","Quantidade","variantId","ProdutoVarianteId","qtd","handleCloseModal","save","localStorage","setItem","cartId","render","h","key","class","canCancel","isOpen","modalTitle","onModalClosed","saveStore","ref","cancel"],"sources":["src/components/crm-bonus/crm-bonus.css?tag=crm-bonus&encapsulation=shadow","src/components/crm-bonus/crm-bonus.tsx"],"sourcesContent":["/* :host {\n display: block;\n} */\n\n.container-button {\n max-width: 100%;\n cursor: pointer;\n padding: 10px;\n display: flex;\n}\n\n/* padding: 0 15px 15px;\nborder: 1px solid #ddd;\nmargin-bottom: 20px; */\n\n.section-crm {\n border: 1px solid #dbd4d4;\n /* min-height: 50px; */\n text-align: -webkit-center;\n margin-bottom: 20px;\n}\n\n.section-cart-crm {\n /* border: 1px solid #dbd4d4; */\n /* min-height: 50px; */\n text-align: -webkit-center;\n margin-bottom: 20px;\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 margin-left: 10px;\n height: 70px;\n}\n\n.form-container {\n width: 100%;\n display: flex;\n justify-content: center;\n justify-content: space-around;\n}\n\n\n.btn {\n display: inline-block;\n padding: 6px 12px;\n margin-bottom: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.42857143;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-image: none;\n border: 1px solid transparent;\n border-radius: 4px;\n}","import { Component, Prop, State, h } from '@stencil/core';\nimport { IProduct, IProductWake, ICustomer } from '../../dto/validate.pin.bonus';\nimport { CrmBonusService } from '../../services/crmbonus.service';\nimport { IPinSent } from '../../components';\nimport { StepFormEnum } from '../../contants';\n\n@Component({\n tag: 'crm-bonus',\n styleUrl: 'crm-bonus.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class CrmBonus {\n\n private crmBonusService: CrmBonusService = new CrmBonusService();\n\n private crmBonusRef: HTMLCrmBonusFormElement;\n\n @State() showModal: boolean = false;\n @Prop({ attribute: 'userid' }) userId: number;\n @Prop({ attribute: 'storename' }) storeName;\n @Prop({ attribute: 'products' }) productsInString: string;\n @Prop({ attribute: 'cartid' }) cartId;\n\n @State() products: Array<IProductWake>;\n @State() customer: ICustomer = {\n birthDate: \"\",\n document: \"\",\n name: \"\",\n phone: \"\"\n };\n\n @State() loading: boolean = false;\n @State() message: string;\n @State() phone: number;\n @State() canCancel: boolean = false;\n @State() sent: IPinSent;\n\n async componentWillLoad() {\n await this.handleLoad();\n }\n\n async handleLoad() {\n try {\n if (this.userId) {\n // this.customer = await this.crmBonusService.getCustomer(this.userId, this.storeName);\n console.log('user', this.customer);\n }\n } catch (error) {\n console.log('info customer')\n }\n this.products = JSON.parse(this.productsInString);\n }\n\n public async sendPin(phone: string) {\n this.loading = true;\n this.message = \"\";\n\n try {\n const _phone = phone.replace(/\\D/g, '');\n this.phone = Number(_phone);\n this.sent = await this.crmBonusService.sendPin(this.phone, this.storeName);;\n await this.crmBonusRef.setStep(StepFormEnum.STEP_PIN);\n this.showModal = true;\n } catch (error) {\n this.message = error?.response?.data?.message\n } finally {\n this.loading = false\n }\n }\n\n buildProducts(): IProduct[] {\n return this.products.map(product => ({ sku: product.SKU, value: (product.PrecoPor * product.Quantidade), variantId: product.ProdutoVarianteId, qtd: product.Quantidade }))\n }\n\n handleCloseModal() {\n this.showModal = false;\n }\n\n save() {\n localStorage.setItem('@BYCODERS', this.cartId)\n }\n\n render() {\n return (\n <div class=\"section-cart-crm\">\n <div class=\"container-button\">\n {/* <img src={logo} onClick={() => (this.showModal = true)} /> */}\n {\n this.canCancel ? <phone-cancel-input value={this.customer.phone} sendPin={() => { }} loading={this.loading} /> \n : <phone-input value={this.customer.phone} sendPin={(phone) => { this.sendPin(phone) }} loading={this.loading} />\n }\n \n </div>\n <app-modal\n isOpen={this.showModal}\n modalTitle={`Giftback`}\n onModalClosed={() => (this.showModal = false)}\n >\n <crm-bonus-form saveStore={() => this.save()} ref={ref => this.crmBonusRef = ref} sent={this.sent} phone={this.phone} cancel={() => this.handleCloseModal()} storeName={this.storeName} products={this.buildProducts()} cartId={this.cartId} customer={this.customer} />\n </app-modal>\n </div>\n )\n }\n}\n"],"mappings":"mHAAA,MAAMA,EAAc,g3BACpB,MAAAC,EAAeD,E,MCWFE,EAAQ,M,yBAEXC,KAAAC,gBAAmC,IAAIC,E,eAIjB,M,2IAOC,CAC7BC,UAAW,GACXC,SAAU,GACVC,KAAM,GACNC,MAAO,I,aAGmB,M,2DAGE,M,oBAG9B,uBAAMC,SACEP,KAAKQ,Y,CAGb,gBAAMA,GACJ,IACE,GAAIR,KAAKS,OAAQ,CAEfC,QAAQC,IAAI,OAAQX,KAAKY,S,EAE3B,MAAOC,GACPH,QAAQC,IAAI,gB,CAEdX,KAAKc,SAAWC,KAAKC,MAAMhB,KAAKiB,iB,CAG3B,aAAMC,CAAQZ,G,QACnBN,KAAKmB,QAAU,KACfnB,KAAKoB,QAAU,GAEf,IACE,MAAMC,EAASf,EAAMgB,QAAQ,MAAO,IACpCtB,KAAKM,MAAQiB,OAAOF,GACpBrB,KAAKwB,WAAaxB,KAAKC,gBAAgBiB,QAAQlB,KAAKM,MAAON,KAAKyB,iBAC1DzB,KAAK0B,YAAYC,QAAQC,EAAaC,UAC5C7B,KAAK8B,UAAY,I,CACjB,MAAOjB,GACPb,KAAKoB,SAAUW,GAAAC,EAAAnB,IAAK,MAALA,SAAK,SAALA,EAAOoB,YAAQ,MAAAD,SAAA,SAAAA,EAAEE,QAAI,MAAAH,SAAA,SAAAA,EAAEX,O,SAEtCpB,KAAKmB,QAAU,K,EAInB,aAAAgB,GACE,OAAOnC,KAAKc,SAASsB,KAAIC,IAAO,CAAOC,IAAKD,EAAQE,IAAKC,MAAQH,EAAQI,SAAWJ,EAAQK,WAAaC,UAAWN,EAAQO,kBAAmBC,IAAKR,EAAQK,c,CAG9J,gBAAAI,GACE9C,KAAK8B,UAAY,K,CAGnB,IAAAiB,GACEC,aAAaC,QAAQ,YAAajD,KAAKkD,O,CAGzC,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAGPtD,KAAKuD,UAAYH,EAAA,sBAAoBZ,MAAOxC,KAAKY,SAASN,MAAOY,QAAS,OAAYC,QAASnB,KAAKmB,UAClGiC,EAAA,eAAaZ,MAAOxC,KAAKY,SAASN,MAAOY,QAAUZ,IAAYN,KAAKkB,QAAQZ,EAAM,EAAIa,QAASnB,KAAKmB,WAI1GiC,EAAA,aAAAC,IAAA,2CACEG,OAAQxD,KAAK8B,UACb2B,WAAY,WACZC,cAAe,IAAO1D,KAAK8B,UAAY,OAEvCsB,EAAA,kBAAAC,IAAA,2CAAgBM,UAAW,IAAM3D,KAAK+C,OAAQa,IAAKA,GAAO5D,KAAK0B,YAAckC,EAAKpC,KAAMxB,KAAKwB,KAAMlB,MAAON,KAAKM,MAAOuD,OAAQ,IAAM7D,KAAK8C,mBAAoBrB,UAAWzB,KAAKyB,UAAWX,SAAUd,KAAKmC,gBAAiBe,OAAQlD,KAAKkD,OAAQtC,SAAUZ,KAAKY,Y","ignoreList":[]}
|
@@ -0,0 +1,145 @@
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-9f7bde48.js';
|
2
|
+
import { C as CrmBonusService } from './crmbonus.service-053a9e38.js';
|
3
|
+
import { S as StepFormEnum } from './index-2bfaba2b.js';
|
4
|
+
|
5
|
+
const appModalCss = ".modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);display:none;justify-content:center;align-items:center;z-index:1000}.modal-backdrop.visible{display:flex}.modal{background:white;border-radius:8px;padding:1rem;max-width:500px;width:90%;box-shadow:0 2px 10px rgba(0, 0, 0, 0.3)}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;margin-bottom:1rem}.close-button{background:none;border:none;font-size:1.5rem;cursor:pointer}.modal-body{}";
|
6
|
+
const AppModalStyle0 = appModalCss;
|
7
|
+
|
8
|
+
const AppModal = class {
|
9
|
+
constructor(hostRef) {
|
10
|
+
registerInstance(this, hostRef);
|
11
|
+
this.modalClosed = createEvent(this, "modalClosed", 7);
|
12
|
+
this.isOpen = false;
|
13
|
+
this.modalTitle = undefined;
|
14
|
+
}
|
15
|
+
closeModal() {
|
16
|
+
this.modalClosed.emit();
|
17
|
+
}
|
18
|
+
render() {
|
19
|
+
return (h("div", { key: '8dab3bfa7301dbd20a783917037c26451cdab5a8', class: `modal-backdrop ${this.isOpen ? 'visible' : ''}` }, h("div", { key: '2846620c39106abde226cd19b2cc0a58b7a88a11', class: "modal" }, h("div", { key: '46b63f75e09aec5d2b9255334733b2813156a5e6', class: "modal-header" }, h("h3", { key: '6a7baae6fc8430ec9cbbcf959f75842ddac253ac' }, this.modalTitle), h("button", { key: 'c6b76e2c862db06657c5ce91fb2bba56fa89e04d', class: "close-button", onClick: () => this.closeModal() }, "\u00D7")), h("div", { key: '7caebe8e0fab2569e3e4e33cc512133bc691b331', class: "modal-body" }, h("slot", { key: 'aa5bd4a5ff5810e1d74727b01121b97ec7b54d51' })))));
|
20
|
+
}
|
21
|
+
};
|
22
|
+
AppModal.style = AppModalStyle0;
|
23
|
+
|
24
|
+
const crmBonusFormCss = ".form-container{width:100%;display:flex;justify-content:center;justify-content:space-around}.disabled{opacity:0.6;cursor:not-allowed}.message-error{color:#d11111;font-weight:bold;font-family:Arial;font-size:small;margin-left:16px}";
|
25
|
+
const CrmBonusFormStyle0 = crmBonusFormCss;
|
26
|
+
|
27
|
+
const CrmBonusForm = class {
|
28
|
+
constructor(hostRef) {
|
29
|
+
registerInstance(this, hostRef);
|
30
|
+
this.crmBonusService = new CrmBonusService();
|
31
|
+
this.storeName = undefined;
|
32
|
+
this.cartId = undefined;
|
33
|
+
this.products = undefined;
|
34
|
+
this.customer = {
|
35
|
+
phone: "",
|
36
|
+
birthDate: "",
|
37
|
+
document: "",
|
38
|
+
name: ""
|
39
|
+
};
|
40
|
+
this.sent = undefined;
|
41
|
+
this.stepNext = undefined;
|
42
|
+
this.phone = undefined;
|
43
|
+
this.saveStore = undefined;
|
44
|
+
this.cancel = undefined;
|
45
|
+
this.loading = false;
|
46
|
+
this.step = StepFormEnum.STEP_RESERVE;
|
47
|
+
this.message = undefined;
|
48
|
+
this.bonus = undefined;
|
49
|
+
}
|
50
|
+
async setStep(step) {
|
51
|
+
this.step = step;
|
52
|
+
}
|
53
|
+
async validateBonus(pin) {
|
54
|
+
var _a, _b;
|
55
|
+
this.loading = true;
|
56
|
+
this.message = "";
|
57
|
+
const payload = {
|
58
|
+
pin: pin,
|
59
|
+
cellphone: this.phone.toString(),
|
60
|
+
loja_id: this.sent.storeId,
|
61
|
+
user_id: this.sent.userId,
|
62
|
+
cartId: this.cartId,
|
63
|
+
products: this.products
|
64
|
+
};
|
65
|
+
try {
|
66
|
+
this.bonus = await this.crmBonusService.validatePinBonus(payload, this.storeName);
|
67
|
+
console.log('[this.bonus]', this.bonus);
|
68
|
+
this.step = StepFormEnum.STEP_RESERVE;
|
69
|
+
}
|
70
|
+
catch (error) {
|
71
|
+
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;
|
72
|
+
}
|
73
|
+
finally {
|
74
|
+
this.loading = false;
|
75
|
+
}
|
76
|
+
console.log('payload', payload);
|
77
|
+
}
|
78
|
+
async reserveApply(amount) {
|
79
|
+
this.loading = true;
|
80
|
+
this.message = "";
|
81
|
+
try {
|
82
|
+
await this.reserve(amount);
|
83
|
+
this.step = StepFormEnum.STEP_APPLY;
|
84
|
+
this.saveStore();
|
85
|
+
}
|
86
|
+
catch (error) {
|
87
|
+
this.message = "ocorreu um error ao solicitar a aplicação do bonus! tente novamente";
|
88
|
+
}
|
89
|
+
finally {
|
90
|
+
this.loading = false;
|
91
|
+
}
|
92
|
+
}
|
93
|
+
async reserve(amount) {
|
94
|
+
await this.crmBonusService.reserve({
|
95
|
+
redeemed_bonus: amount,
|
96
|
+
cart_id: this.cartId,
|
97
|
+
ticket: this.cartId,
|
98
|
+
gross_value: this.bonus.totalValue,
|
99
|
+
}, this.storeName);
|
100
|
+
}
|
101
|
+
handleCancel() {
|
102
|
+
this.step = StepFormEnum.STEP_PHONE;
|
103
|
+
this.cancel();
|
104
|
+
}
|
105
|
+
render() {
|
106
|
+
return (h(Host, { key: '3e21a03b8cb534556026804922838f6162df9e30' }, this.step === StepFormEnum.STEP_PIN && h("giftback-pin", { key: '31b04dde37001453cbf2595505dd9c2520b2252c', cancel: () => this.handleCancel(), sent: this.sent, validate: (data) => this.validateBonus(data), loading: this.loading }), this.step === StepFormEnum.STEP_RESERVE && h("giftback-progress", { key: 'c85dbb4ac66a094d0b5a28b152104c6b202984cf', loading: this.loading, cancel: () => this.handleCancel(), bonus: this.bonus, reserve: (amountRedeemed) => this.reserveApply(amountRedeemed) }), this.step === StepFormEnum.STEP_APPLY && h("giftback-finish", { key: '4efa471bb962b48cae34b1c5ebfed518afd3ac31' }), h("p", { key: '5cce361016e738b76353e16a0d61f08b4abe22fc', class: "message-error" }, this.message)));
|
107
|
+
}
|
108
|
+
};
|
109
|
+
CrmBonusForm.style = CrmBonusFormStyle0;
|
110
|
+
|
111
|
+
const PhoneCancelInput = class {
|
112
|
+
constructor(hostRef) {
|
113
|
+
registerInstance(this, hostRef);
|
114
|
+
this.sendPin = undefined;
|
115
|
+
this.loading = undefined;
|
116
|
+
this.value = undefined;
|
117
|
+
}
|
118
|
+
async validatePhone() {
|
119
|
+
const phone = await this.phoneInputMask.getPhone();
|
120
|
+
await this.sendPin(phone);
|
121
|
+
}
|
122
|
+
render() {
|
123
|
+
return (h("div", { key: '9e5524ba40c38bcc04325a8b786ea1b29d92e233', class: "form-container" }, h("phone-input-mask", { key: 'a6625e16e686ffd1738989c29245172ebeee13cf', initialValue: "Valor aplicado R$ 100", ref: ref => this.phoneInputMask = ref, disabled: true }), h("button", { key: '8fa99770b94c72058dd779b2309c5563b398d644', class: `btn ${this.loading ? 'disabled' : ''} `, disabled: this.loading, onClick: () => this.validatePhone() }, !this.loading ? "Cancelar" : h("loading-spinner", { size: "25px", color: "#fff" }))));
|
124
|
+
}
|
125
|
+
};
|
126
|
+
|
127
|
+
const PhoneInput = class {
|
128
|
+
constructor(hostRef) {
|
129
|
+
registerInstance(this, hostRef);
|
130
|
+
this.sendPin = undefined;
|
131
|
+
this.loading = undefined;
|
132
|
+
this.value = undefined;
|
133
|
+
}
|
134
|
+
async validatePhone() {
|
135
|
+
const phone = await this.phoneInputMask.getPhone();
|
136
|
+
await this.sendPin(phone);
|
137
|
+
}
|
138
|
+
render() {
|
139
|
+
return (h("div", { key: 'f24f14d158d9565b17aa024837d4e62e6b64c7a3', class: "form-container" }, h("phone-input-mask", { key: '88bf98c7f35b4a4211354a826fa16c922838d228', initialValue: this.value, ref: ref => this.phoneInputMask = ref }), h("button", { key: 'e822c98fb3a1c347f6d97a3008837ac79d55569f', class: `btn ${this.loading ? 'disabled' : ''} `, disabled: this.loading, onClick: () => this.validatePhone() }, !this.loading ? "validar" : h("loading-spinner", { size: "25px", color: "#fff" }))));
|
140
|
+
}
|
141
|
+
};
|
142
|
+
|
143
|
+
export { AppModal as app_modal, CrmBonusForm as crm_bonus_form, PhoneCancelInput as phone_cancel_input, PhoneInput as phone_input };
|
144
|
+
|
145
|
+
//# sourceMappingURL=app-modal_4.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"file":"app-modal.crm-bonus-form.phone-cancel-input.phone-input.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,+hBAA+hB,CAAC;AACpjB,uBAAe,WAAW;;MCMb,QAAQ;;;;sBAG0B,KAAK;;;IAQxC,UAAU;QACd,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KAC3B;IAED,MAAM;QACF,QACI,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,EAAE,EAAE,IACxD,4DAAK,KAAK,EAAC,OAAO,IACd,4DAAK,KAAK,EAAC,cAAc,IACrB,6DAAK,IAAI,CAAC,UAAU,CAAM,EAC1B,+DAAQ,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,aAEpD,CACP,EACN,4DAAK,KAAK,EAAC,YAAY,IACnB,8DAAQ,CACN,CACJ,CACJ,EACT;KACJ;;;;ACtCL,MAAM,eAAe,GAAG,wOAAwO,CAAC;AACjQ,2BAAe,eAAe;;MCUjB,YAAY;;;QAEb,oBAAe,GAAoB,IAAI,eAAe,EAAE,CAAC;;;;wBAKnC;YAC1B,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,EAAE;YACb,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,EAAE;SACX;;;;;;uBAS2B,KAAK;oBAET,YAAY,CAAC,YAAY;;;;IAOjD,MAAM,OAAO,CAAC,IAAkB;QAC5B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;KACnB;IAEM,MAAM,aAAa,CAAC,GAAW;;QAClC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,MAAM,OAAO,GAAwB;YACjC,GAAG,EAAE,GAAG;YACR,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YAChC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO;YAC1B,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM;YACzB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAA;QAED,IAAI;YACA,IAAI,CAAC,KAAK,GAAG,MAAM,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YAElF,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YACxC,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,YAAY,CAAC;SACzC;QAAC,OAAO,KAAK,EAAE;YACZ,IAAI,CAAC,OAAO,GAAG,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,0CAAE,IAAI,0CAAE,OAAO,CAAA;SAChD;gBAAS;YACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACxB;QACD,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;KAClC;IAEM,MAAM,YAAY,CAAC,MAAc;QACpC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI;YACA,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YAE3B,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,UAAU,CAAC;YAEpC,IAAI,CAAC,SAAS,EAAE,CAAA;SACnB;QAAC,OAAO,KAAK,EAAE;YACZ,IAAI,CAAC,OAAO,GAAG,qEAAqE,CAAA;SACvF;gBAAS;YACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACxB;KACJ;IAEM,MAAM,OAAO,CAAC,MAAc;QAC/B,MAAM,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC;YAC/B,cAAc,EAAE,MAAM;YACtB,OAAO,EAAE,IAAI,CAAC,MAAM;YACpB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU;SACrC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;KACtB;IAEM,YAAY;QACf,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,UAAU,CAAC;QACpC,IAAI,CAAC,MAAM,EAAE,CAAA;KAChB;IAED,MAAM;QACF,QACI,EAAC,IAAI,uDAEA,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,QAAQ,IAAI,qEAAc,MAAM,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,EAEhL,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,YAAY,IAAI,0EAAmB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,cAAsB,KAAK,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,GAAI,EACrN,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,UAAU,IAAI,yEAAmB,EAC7D,0DAAG,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,OAAO,CAAK,CACxC,EACV;KACJ;;;;MC1GQ,gBAAgB;;;;;;;IAQzB,MAAM,aAAa;QACf,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;QACnD,MAAM,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;KAC7B;IAED,MAAM;QACF,QACI,4DAAK,KAAK,EAAC,gBAAgB,IACvB,yEAAkB,YAAY,EAAE,uBAAuB,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI,CAAC,cAAc,GAAG,GAAG,EAAE,QAAQ,EAAE,IAAI,GAAI,EAClH,+DAAQ,KAAK,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAE5G,CAAC,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,uBAAiB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,CAExE,CACP,EACT;KACJ;;;MCxBQ,UAAU;;;;;;;IAQnB,MAAM,aAAa;QACf,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;QACnD,MAAM,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;KAC7B;IAED,MAAM;QACF,QACI,4DAAK,KAAK,EAAC,gBAAgB,IACvB,yEAAkB,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI,CAAC,cAAc,GAAG,GAAG,GAAI,EACrF,+DAAQ,KAAK,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAE5G,CAAC,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,uBAAiB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,CAEvE,CACP,EACT;KACJ;;;;;","names":[],"sources":["src/components/modal/app-modal.css?tag=app-modal&encapsulation=shadow","src/components/modal/app-modal.tsx","src/components/crm-bonus-form/crm-bonus-form.css?tag=crm-bonus-form&encapsulation=shadow","src/components/crm-bonus-form/crm-bonus-form.tsx","src/components/crm-bonus-form/subcomponents/phone-cancel/phone.cancel.input.tsx","src/components/crm-bonus-form/subcomponents/phone/phone.input.tsx"],"sourcesContent":[".modal-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: none;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n }\n \n .modal-backdrop.visible {\n display: flex;\n }\n \n .modal {\n background: white;\n border-radius: 8px;\n padding: 1rem;\n max-width: 500px;\n width: 90%;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n }\n \n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid #ddd;\n margin-bottom: 1rem;\n }\n \n .close-button {\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n }\n \n .modal-body {\n /* padding: 1rem 0; */\n }\n ","import { Component, Event, EventEmitter, Prop, h } from \"@stencil/core\";\n\n@Component({\n tag: 'app-modal',\n styleUrl: 'app-modal.css',\n shadow: true,\n})\nexport class AppModal {\n\n // Controle da visibilidade do modal\n @Prop({ reflect: true }) isOpen: boolean = false;\n\n // Título do modal\n @Prop() modalTitle: string;\n\n // Evento emitido ao fechar o modal\n @Event() modalClosed: EventEmitter<void>;\n\n private closeModal() {\n this.modalClosed.emit();\n }\n\n render() {\n return (\n <div class={`modal-backdrop ${this.isOpen ? 'visible' : ''}`}>\n <div class=\"modal\">\n <div class=\"modal-header\">\n <h3>{this.modalTitle}</h3>\n <button class=\"close-button\" onClick={() => this.closeModal()}>\n ×\n </button>\n </div>\n <div class=\"modal-body\">\n <slot />\n </div>\n </div>\n </div>\n )\n }\n}",".form-container {\n width: 100%;\n display: flex;\n justify-content: center;\n justify-content: space-around;\n}\n\n.disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.message-error {\n color: #d11111;\n font-weight: bold;\n font-family: Arial;\n font-size: small;\n margin-left: 16px;\n}","import { Component, Host, Method, Prop, State, h } from \"@stencil/core\";\nimport { CrmBonusService } from \"../../services/crmbonus.service\";\nimport { IBonus, ICustomer, IProccesPinBonusDto, IProduct } from \"../../dto/validate.pin.bonus\";\nimport { StepFormEnum } from \"../../contants\";\nimport { IPinSent } from '../../dto/pin.sent';\n\n@Component({\n tag: 'crm-bonus-form',\n styleUrl: 'crm-bonus-form.css',\n shadow: true\n})\nexport class CrmBonusForm {\n\n private crmBonusService: CrmBonusService = new CrmBonusService();\n\n @Prop({ attribute: 'storename' }) storeName;\n @Prop() cartId;\n @Prop() products: Array<IProduct>;\n @Prop() customer: ICustomer = {\n phone: \"\",\n birthDate: \"\",\n document: \"\",\n name: \"\"\n };\n @Prop() sent: IPinSent;\n @Prop() stepNext: StepFormEnum;\n @Prop() phone: number;\n\n @Prop() saveStore: () => void;\n\n @Prop() cancel: () => void;\n\n @State() loading: boolean = false;\n\n @State() step: number = StepFormEnum.STEP_RESERVE;\n\n @State() message: string;\n\n @State() bonus: IBonus;\n\n @Method()\n async setStep(step: StepFormEnum) {\n this.step = step\n }\n\n public async validateBonus(pin: string) {\n this.loading = true;\n this.message = \"\";\n const payload: IProccesPinBonusDto = {\n pin: pin,\n cellphone: this.phone.toString(),\n loja_id: this.sent.storeId,\n user_id: this.sent.userId,\n cartId: this.cartId,\n products: this.products\n }\n\n try {\n this.bonus = await this.crmBonusService.validatePinBonus(payload, this.storeName);\n\n console.log('[this.bonus]', this.bonus);\n this.step = StepFormEnum.STEP_RESERVE;\n } catch (error) {\n this.message = error?.response?.data?.message\n } finally {\n this.loading = false;\n }\n console.log('payload', payload)\n }\n\n public async reserveApply(amount: number) {\n this.loading = true;\n this.message = \"\";\n try {\n await this.reserve(amount);\n\n this.step = StepFormEnum.STEP_APPLY;\n\n this.saveStore()\n } catch (error) {\n this.message = \"ocorreu um error ao solicitar a aplicação do bonus! tente novamente\"\n } finally {\n this.loading = false;\n }\n }\n\n public async reserve(amount: number) {\n await this.crmBonusService.reserve({\n redeemed_bonus: amount,\n cart_id: this.cartId,\n ticket: this.cartId,\n gross_value: this.bonus.totalValue,\n }, this.storeName);\n }\n\n public handleCancel() {\n this.step = StepFormEnum.STEP_PHONE;\n this.cancel()\n }\n\n render() {\n return (\n <Host>\n {/* {this.step === StepFormEnum.STEP_PHONE && <phone-input value={this.customer.phone} sendPin={(phone) => this.sendPin(phone)} loading={this.loading} />} */}\n {this.step === StepFormEnum.STEP_PIN && <giftback-pin cancel={() => this.handleCancel()} sent={this.sent} validate={(data) => this.validateBonus(data)} loading={this.loading} />}\n\n {this.step === StepFormEnum.STEP_RESERVE && <giftback-progress loading={this.loading} cancel={() => this.handleCancel()} bonus={this.bonus} reserve={(amountRedeemed: number) => this.reserveApply(amountRedeemed)} />}\n {this.step === StepFormEnum.STEP_APPLY && <giftback-finish />}\n <p class=\"message-error\">{this.message}</p>\n </Host>\n )\n }\n}","import { Component, Prop, h } from \"@stencil/core\";\n\n@Component({\n tag: 'phone-cancel-input'\n})\nexport class PhoneCancelInput {\n\n private phoneInputMask: HTMLPhoneInputMaskElement;\n\n @Prop() sendPin: Function;\n @Prop() loading: boolean;\n @Prop() value: string;\n\n async validatePhone() {\n const phone = await this.phoneInputMask.getPhone();\n await this.sendPin(phone);\n }\n\n render() {\n return (\n <div class=\"form-container\">\n <phone-input-mask initialValue={\"Valor aplicado R$ 100\"} ref={ref => this.phoneInputMask = ref} disabled={true} />\n <button class={`btn ${this.loading ? 'disabled' : ''} `} disabled={this.loading} onClick={() => this.validatePhone()}>\n {\n !this.loading ? \"Cancelar\" : <loading-spinner size=\"25px\" color=\"#fff\" />\n }\n </button>\n </div>\n )\n }\n}","import { Component, Prop, h } from \"@stencil/core\";\n\n@Component({\n tag: 'phone-input'\n})\nexport class PhoneInput {\n\n private phoneInputMask: HTMLPhoneInputMaskElement;\n\n @Prop() sendPin: Function;\n @Prop() loading: boolean;\n @Prop() value: string;\n\n async validatePhone() {\n const phone = await this.phoneInputMask.getPhone();\n await this.sendPin(phone);\n }\n\n render() {\n return (\n <div class=\"form-container\">\n <phone-input-mask initialValue={this.value} ref={ref => this.phoneInputMask = ref} />\n <button class={`btn ${this.loading ? 'disabled' : ''} `} disabled={this.loading} onClick={() => this.validatePhone()}>\n {\n !this.loading ? \"validar\" : <loading-spinner size=\"25px\" color=\"#fff\" />\n }\n </button>\n </div>\n )\n }\n}"],"version":3}
|
@@ -1,9 +1,8 @@
|
|
1
1
|
import { r as registerInstance, h } from './index-9f7bde48.js';
|
2
2
|
import { C as CrmBonusService } from './crmbonus.service-053a9e38.js';
|
3
|
+
import { S as StepFormEnum } from './index-2bfaba2b.js';
|
3
4
|
|
4
|
-
const
|
5
|
-
|
6
|
-
const crmBonusCss = ".container-button{max-width:136px;cursor:pointer;padding:10px}.section-crm{border:1px solid #dbd4d4;text-align:-webkit-center;margin-bottom:20px}";
|
5
|
+
const crmBonusCss = ".container-button{max-width:100%;cursor:pointer;padding:10px;display:flex}.section-crm{border:1px solid #dbd4d4;text-align:-webkit-center;margin-bottom:20px}.section-cart-crm{text-align:-webkit-center;margin-bottom:20px}.button{top:50%;background-color:#6c6c7e;color:#fff;border:none;padding:15px;min-height:30px;min-width:120px;font-size:20px;cursor:pointer;margin-left:10px;height:70px}.form-container{width:100%;display:flex;justify-content:center;justify-content:space-around}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}";
|
7
6
|
const CrmBonusStyle0 = crmBonusCss;
|
8
7
|
|
9
8
|
const CrmBonus = class {
|
@@ -16,7 +15,17 @@ const CrmBonus = class {
|
|
16
15
|
this.productsInString = undefined;
|
17
16
|
this.cartId = undefined;
|
18
17
|
this.products = undefined;
|
19
|
-
this.customer =
|
18
|
+
this.customer = {
|
19
|
+
birthDate: "",
|
20
|
+
document: "",
|
21
|
+
name: "",
|
22
|
+
phone: ""
|
23
|
+
};
|
24
|
+
this.loading = false;
|
25
|
+
this.message = undefined;
|
26
|
+
this.phone = undefined;
|
27
|
+
this.canCancel = false;
|
28
|
+
this.sent = undefined;
|
20
29
|
}
|
21
30
|
async componentWillLoad() {
|
22
31
|
await this.handleLoad();
|
@@ -24,7 +33,7 @@ const CrmBonus = class {
|
|
24
33
|
async handleLoad() {
|
25
34
|
try {
|
26
35
|
if (this.userId) {
|
27
|
-
this.customer = await this.crmBonusService.getCustomer(this.userId, this.storeName);
|
36
|
+
// this.customer = await this.crmBonusService.getCustomer(this.userId, this.storeName);
|
28
37
|
console.log('user', this.customer);
|
29
38
|
}
|
30
39
|
}
|
@@ -33,14 +42,36 @@ const CrmBonus = class {
|
|
33
42
|
}
|
34
43
|
this.products = JSON.parse(this.productsInString);
|
35
44
|
}
|
45
|
+
async sendPin(phone) {
|
46
|
+
var _a, _b;
|
47
|
+
this.loading = true;
|
48
|
+
this.message = "";
|
49
|
+
try {
|
50
|
+
const _phone = phone.replace(/\D/g, '');
|
51
|
+
this.phone = Number(_phone);
|
52
|
+
this.sent = await this.crmBonusService.sendPin(this.phone, this.storeName);
|
53
|
+
await this.crmBonusRef.setStep(StepFormEnum.STEP_PIN);
|
54
|
+
this.showModal = true;
|
55
|
+
}
|
56
|
+
catch (error) {
|
57
|
+
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;
|
58
|
+
}
|
59
|
+
finally {
|
60
|
+
this.loading = false;
|
61
|
+
}
|
62
|
+
}
|
36
63
|
buildProducts() {
|
37
64
|
return this.products.map(product => ({ sku: product.SKU, value: (product.PrecoPor * product.Quantidade), variantId: product.ProdutoVarianteId, qtd: product.Quantidade }));
|
38
65
|
}
|
39
66
|
handleCloseModal() {
|
40
67
|
this.showModal = false;
|
41
68
|
}
|
69
|
+
save() {
|
70
|
+
localStorage.setItem('@BYCODERS', this.cartId);
|
71
|
+
}
|
42
72
|
render() {
|
43
|
-
return (h("div", { key: '
|
73
|
+
return (h("div", { key: '18d08a3d03ae5106cf01a426751db8300847f95c', class: "section-cart-crm" }, h("div", { key: 'dd9e939b78616cea4ea0b77ac32fe15afe63c9f9', class: "container-button" }, this.canCancel ? h("phone-cancel-input", { value: this.customer.phone, sendPin: () => { }, loading: this.loading })
|
74
|
+
: h("phone-input", { value: this.customer.phone, sendPin: (phone) => { this.sendPin(phone); }, loading: this.loading })), h("app-modal", { key: '1ea4bbfc4725c76a93f29494b1fa75a5cddc01c2', isOpen: this.showModal, modalTitle: `Giftback`, onModalClosed: () => (this.showModal = false) }, h("crm-bonus-form", { key: '791172ad0eedeb3d2a0da2e965e1298a9bc1003d', saveStore: () => this.save(), ref: ref => this.crmBonusRef = ref, sent: this.sent, phone: this.phone, cancel: () => this.handleCloseModal(), storeName: this.storeName, products: this.buildProducts(), cartId: this.cartId, customer: this.customer }))));
|
44
75
|
}
|
45
76
|
static get assetsDirs() { return ["assets"]; }
|
46
77
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"file":"crm-bonus.entry.js","mappings":"
|
1
|
+
{"file":"crm-bonus.entry.js","mappings":"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","names":[],"sources":["src/components/crm-bonus/crm-bonus.css?tag=crm-bonus&encapsulation=shadow","src/components/crm-bonus/crm-bonus.tsx"],"sourcesContent":["/* :host {\n display: block;\n} */\n\n.container-button {\n max-width: 100%;\n cursor: pointer;\n padding: 10px;\n display: flex;\n}\n\n/* padding: 0 15px 15px;\nborder: 1px solid #ddd;\nmargin-bottom: 20px; */\n\n.section-crm {\n border: 1px solid #dbd4d4;\n /* min-height: 50px; */\n text-align: -webkit-center;\n margin-bottom: 20px;\n}\n\n.section-cart-crm {\n /* border: 1px solid #dbd4d4; */\n /* min-height: 50px; */\n text-align: -webkit-center;\n margin-bottom: 20px;\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 margin-left: 10px;\n height: 70px;\n}\n\n.form-container {\n width: 100%;\n display: flex;\n justify-content: center;\n justify-content: space-around;\n}\n\n\n.btn {\n display: inline-block;\n padding: 6px 12px;\n margin-bottom: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.42857143;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-image: none;\n border: 1px solid transparent;\n border-radius: 4px;\n}","import { Component, Prop, State, h } from '@stencil/core';\nimport { IProduct, IProductWake, ICustomer } from '../../dto/validate.pin.bonus';\nimport { CrmBonusService } from '../../services/crmbonus.service';\nimport { IPinSent } from '../../components';\nimport { StepFormEnum } from '../../contants';\n\n@Component({\n tag: 'crm-bonus',\n styleUrl: 'crm-bonus.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class CrmBonus {\n\n private crmBonusService: CrmBonusService = new CrmBonusService();\n\n private crmBonusRef: HTMLCrmBonusFormElement;\n\n @State() showModal: boolean = false;\n @Prop({ attribute: 'userid' }) userId: number;\n @Prop({ attribute: 'storename' }) storeName;\n @Prop({ attribute: 'products' }) productsInString: string;\n @Prop({ attribute: 'cartid' }) cartId;\n\n @State() products: Array<IProductWake>;\n @State() customer: ICustomer = {\n birthDate: \"\",\n document: \"\",\n name: \"\",\n phone: \"\"\n };\n\n @State() loading: boolean = false;\n @State() message: string;\n @State() phone: number;\n @State() canCancel: boolean = false;\n @State() sent: IPinSent;\n\n async componentWillLoad() {\n await this.handleLoad();\n }\n\n async handleLoad() {\n try {\n if (this.userId) {\n // this.customer = await this.crmBonusService.getCustomer(this.userId, this.storeName);\n console.log('user', this.customer);\n }\n } catch (error) {\n console.log('info customer')\n }\n this.products = JSON.parse(this.productsInString);\n }\n\n public async sendPin(phone: string) {\n this.loading = true;\n this.message = \"\";\n\n try {\n const _phone = phone.replace(/\\D/g, '');\n this.phone = Number(_phone);\n this.sent = await this.crmBonusService.sendPin(this.phone, this.storeName);;\n await this.crmBonusRef.setStep(StepFormEnum.STEP_PIN);\n this.showModal = true;\n } catch (error) {\n this.message = error?.response?.data?.message\n } finally {\n this.loading = false\n }\n }\n\n buildProducts(): IProduct[] {\n return this.products.map(product => ({ sku: product.SKU, value: (product.PrecoPor * product.Quantidade), variantId: product.ProdutoVarianteId, qtd: product.Quantidade }))\n }\n\n handleCloseModal() {\n this.showModal = false;\n }\n\n save() {\n localStorage.setItem('@BYCODERS', this.cartId)\n }\n\n render() {\n return (\n <div class=\"section-cart-crm\">\n <div class=\"container-button\">\n {/* <img src={logo} onClick={() => (this.showModal = true)} /> */}\n {\n this.canCancel ? <phone-cancel-input value={this.customer.phone} sendPin={() => { }} loading={this.loading} /> \n : <phone-input value={this.customer.phone} sendPin={(phone) => { this.sendPin(phone) }} loading={this.loading} />\n }\n \n </div>\n <app-modal\n isOpen={this.showModal}\n modalTitle={`Giftback`}\n onModalClosed={() => (this.showModal = false)}\n >\n <crm-bonus-form saveStore={() => this.save()} ref={ref => this.crmBonusRef = ref} sent={this.sent} phone={this.phone} cancel={() => this.handleCloseModal()} storeName={this.storeName} products={this.buildProducts()} cartId={this.cartId} customer={this.customer} />\n </app-modal>\n </div>\n )\n }\n}\n"],"version":3}
|
@@ -16,7 +16,7 @@ var patchBrowser = () => {
|
|
16
16
|
|
17
17
|
patchBrowser().then(async (options) => {
|
18
18
|
await globalScripts();
|
19
|
-
return bootstrapLazy([["
|
19
|
+
return bootstrapLazy([["phone-input-mask",[[1,"phone-input-mask",{"initialValue":[1,"initial-value"],"disabled":[4],"phone":[32],"getPhone":[64]}]]],["loading-spinner",[[1,"loading-spinner",{"size":[1],"color":[1]}]]],["giftback-finish_3",[[1,"giftback-pin",{"sent":[16],"validate":[16],"cancel":[16],"loading":[4],"pin":[32],"isVerified":[32]}],[1,"giftback-progress",{"loading":[4],"bonus":[16],"reserve":[16],"cancel":[16],"usedValue":[32]}],[1,"giftback-finish"]]],["app-modal_4",[[1,"crm-bonus-form",{"storeName":[8,"storename"],"cartId":[8,"cart-id"],"products":[16],"customer":[16],"sent":[16],"stepNext":[2,"step-next"],"phone":[2],"saveStore":[16],"cancel":[16],"loading":[32],"step":[32],"message":[32],"bonus":[32],"setStep":[64]}],[0,"phone-cancel-input",{"sendPin":[16],"loading":[4],"value":[1]}],[0,"phone-input",{"sendPin":[16],"loading":[4],"value":[1]}],[1,"app-modal",{"isOpen":[516,"is-open"],"modalTitle":[1,"modal-title"]}]]],["crm-bonus",[[1,"crm-bonus",{"userId":[2,"userid"],"storeName":[8,"storename"],"productsInString":[1,"products"],"cartId":[8,"cartid"],"showModal":[32],"products":[32],"customer":[32],"loading":[32],"message":[32],"phone":[32],"canCancel":[32],"sent":[32]}]]],["pedido-finalizado",[[0,"pedido-finalizado",{"cartId":[1,"cartid"],"orderId":[2,"orderid"],"metadadoString":[1,"metadado"]}]]]], options);
|
20
20
|
});
|
21
21
|
|
22
22
|
//# sourceMappingURL=crmbonus-component-wake.js.map
|
@@ -10,7 +10,7 @@ const GiftbackFinish = class {
|
|
10
10
|
registerInstance(this, hostRef);
|
11
11
|
}
|
12
12
|
render() {
|
13
|
-
return (h("div", { key: '
|
13
|
+
return (h("div", { key: '4fd9a7731194fbe8e9dbe0e2fc9d4241f0baf733', class: "message-finish" }, h("img", { key: 'ba423d92f1672f14be34334fd0495f38f1f70f4a', src: successSvgrepoComSvg, width: 80 }), h("p", { key: '75d6b9648c1357ced70ad43cb94091da73224179' }, "Legal! O B\u00F4nus ser\u00E1 aplicado na sua compra.")));
|
14
14
|
}
|
15
15
|
};
|
16
16
|
GiftbackFinish.style = GiftbackFinishStyle0;
|
@@ -50,7 +50,7 @@ const GiftbackPin = class {
|
|
50
50
|
}
|
51
51
|
}
|
52
52
|
render() {
|
53
|
-
return (h("div", { key: '
|
53
|
+
return (h("div", { key: 'eb95118bcc7de8cf50c3ffa97656e5635a9b72de', class: "form-container-pin" }, h("div", { key: 'cc149d68ccf12e688fe477079c15931ce0ea6536' }, h("p", { key: 'fbcbb77d526981fca9129e2a1acbc55eba5c9d33' }, "Insira o PIN de 4 d\u00EDgitos enviado por SMS."), h("div", { key: 'ac9887bbc7ef732fd95c890b459b8962652c6fef', 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: 'ca835c16a8aa1177c80cc37f43faaa2f1a7af025', class: "footer-button" }, h("button", { key: '6eabe644de6085a1780bec151503c09aa123e459', class: "button-cancel", disabled: this.loading, onClick: () => this.cancel() }, "Cancelar"), h("button", { key: '2b6dd05d209e86ce5dc0d1113b38b16d541e107f', class: `button ${this.loading ? 'disabled' : ''} `, disabled: this.loading, onClick: () => this.validatePin() }, !this.loading ? "Enviar" : h("loading-spinner", { size: "15px", color: "#fff" })))));
|
54
54
|
}
|
55
55
|
};
|
56
56
|
GiftbackPin.style = GiftbackPinStyle0;
|
@@ -81,67 +81,16 @@ const GiftbackProgress = class {
|
|
81
81
|
const input = event.target;
|
82
82
|
this.usedValue = parseFloat(input.value);
|
83
83
|
}
|
84
|
-
async handleReserve() {
|
85
|
-
this.reserve(
|
84
|
+
async handleReserve(value) {
|
85
|
+
this.reserve(value);
|
86
86
|
}
|
87
87
|
render() {
|
88
88
|
const remainingGiftback = this.bonus.minimumPurchase - this.bonus.totalValue;
|
89
|
-
return (h("div", { key: '
|
89
|
+
return (h("div", { key: 'e6f36ce0f31f70d5402cf89f20b54b7d4f4de7f6', class: "giftback-container" }, h("p", { key: '6075406b5eaefb21357161f6980bf6a0e709b98c' }, "Voc\u00EA possui at\u00E9 ", h("strong", { key: 'f80192384fe4b189469fb7ee16de266270a8e30c' }, "R$ ", this.bonus.totalBonus.toFixed(2)), " de Giftback nessa compra!"), h("p", { key: '453c0a71fe2f8cb2ebf9a6e6b8b55397ee3a9d5b', class: "validity" }, "V\u00E1lido at\u00E9: ", new Date(this.bonus.firstValidityDate).toLocaleDateString('pt-Br')), h("p", { key: 'ae7d8bbdb67801ff3b336ce9bcafb381a52c41e1' }, "Voc\u00EA est\u00E1 utilizando ", h("strong", { key: '7aa9370121720872deddd9596edbf841ccb4119b' }, "R$ ", this.usedValue.toFixed(2)), " nessa compra"), h("div", { key: '010aac89dd4192cc992d342fc334f6719620663e', class: "progress-container" }, h("span", { key: 'b2d0ee511ef6e32cdefeadcb0d740682c6da5124' }, "R$ 0"), h("input", { key: '3b659919ff940fa353c819fbc395c5fd15ad386b', disabled: true, type: "range", min: "0", step: "0.01", max: this.bonus.totalBonus, value: this.usedValue, onInput: (event) => this.handleSliderChange(event) }), h("span", { key: '60e99bf9891b4172f68f8abfbcdf18175a0cc6b0' }, "R$ ", this.bonus.totalBonus.toFixed(2))), h("p", { key: '07d1bd092cf438bb2e6b1ca0838d4215e73c4ef0', class: "remaining" }, "Faltam ", h("strong", { key: '180966167d48f8ea247ea785a4d35d37c6b5944b' }, "R$ ", remainingGiftback > 0 ? remainingGiftback.toFixed(2) : Number(0).toFixed(2)), " para utilizar o valor total do Giftback."), h("div", { key: '277aed85f840f66a517fa23849dadacddda43f5a', class: "footer-button-giftback" }, h("button", { key: '30c0779c496b54b86e0c4025528aa1e348f69c1c', class: "button-cancel", disabled: this.loading, onClick: () => this.cancel() }, "Cancelar"), h("button", { key: 'ec7e9d6982c5910b8c6fc9fef7310072a07d00c1', class: `button ${this.loading ? 'disabled' : ''} `, disabled: this.loading, onClick: () => this.handleReserve(this.usedValue) }, !this.loading ? "Aplicar" : h("loading-spinner", { size: "10px", color: "#fff" })))));
|
90
90
|
}
|
91
91
|
};
|
92
92
|
GiftbackProgress.style = GiftbackProgressStyle0;
|
93
93
|
|
94
|
-
|
95
|
-
constructor(hostRef) {
|
96
|
-
registerInstance(this, hostRef);
|
97
|
-
this.sendPin = undefined;
|
98
|
-
this.loading = undefined;
|
99
|
-
this.value = undefined;
|
100
|
-
}
|
101
|
-
async validatePhone() {
|
102
|
-
const phone = await this.phoneInputMask.getPhone();
|
103
|
-
await this.sendPin(phone);
|
104
|
-
}
|
105
|
-
render() {
|
106
|
-
return (h("div", { key: '8deb65295383b9a14e1ac5c3050ce2cab709c208', class: "form-container" }, h("phone-input-mask", { key: 'd5c9b2fb84b166c67fdfa653f4d0194818d7ae54', initialValue: this.value, ref: ref => this.phoneInputMask = ref }), h("button", { key: '666403560be459bd387d743936b4de1d0cb29ade', class: `button ${this.loading ? 'disabled' : ''} `, disabled: this.loading, onClick: () => this.validatePhone() }, !this.loading ? "validar" : h("loading-spinner", { size: "25px", color: "#fff" }))));
|
107
|
-
}
|
108
|
-
};
|
109
|
-
|
110
|
-
const phoneInputMaskCss = ".inline-text-field-container{display:flex;flex-direction:column}@supports (top: max(0%)){.mdc-text-field--outlined{padding-right:max(16px, var(--mdc-shape-small, 4px))}}@supports (top: max(0%)){.mdc-text-field--outlined{padding-left:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-text-field--outlined{height:55px;overflow:visible}.phone{width:300px;height:50px;font-size:18px;padding:10px;color:grey;border:1px solid #d3c6c6;outline:none}.mdc-text-field{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:0;border-bottom-left-radius:0;display:inline-flex;align-items:baseline;padding:0 16px;position:relative;box-sizing:border-box;overflow:hidden;will-change:opacity, transform, color}";
|
111
|
-
const PhoneInputMaskStyle0 = phoneInputMaskCss;
|
112
|
-
|
113
|
-
const PhoneInputMask = class {
|
114
|
-
constructor(hostRef) {
|
115
|
-
registerInstance(this, hostRef);
|
116
|
-
this.phone = '';
|
117
|
-
this.initialValue = undefined;
|
118
|
-
}
|
119
|
-
componentWillLoad() {
|
120
|
-
this.phone = this.initialValue;
|
121
|
-
}
|
122
|
-
formatPhone(value) {
|
123
|
-
const cleaned = value.replace(/\D/g, ''); // Remove tudo que não for número
|
124
|
-
const match = cleaned.match(/^(\d{0,2})(\d{0,5})(\d{0,4})$/);
|
125
|
-
if (!match)
|
126
|
-
return value;
|
127
|
-
const part1 = match[1] ? `(${match[1]}` : '';
|
128
|
-
const part2 = match[2] ? `) ${match[2]}` : '';
|
129
|
-
const part3 = match[3] ? `-${match[3]}` : '';
|
130
|
-
return `${part1}${part2}${part3}`;
|
131
|
-
}
|
132
|
-
handleInput(event) {
|
133
|
-
const input = event.target;
|
134
|
-
this.phone = this.formatPhone(input.value);
|
135
|
-
}
|
136
|
-
async getPhone() {
|
137
|
-
return this.phone;
|
138
|
-
}
|
139
|
-
render() {
|
140
|
-
return (h("input", { key: 'eb90a08eb68463fb8dcb81e22d45621b8b59c754', id: "phone", type: "tel", class: "phone", value: this.phone, onInput: (event) => this.handleInput(event), placeholder: "(12) 94567-8910" }));
|
141
|
-
}
|
142
|
-
};
|
143
|
-
PhoneInputMask.style = PhoneInputMaskStyle0;
|
144
|
-
|
145
|
-
export { GiftbackFinish as giftback_finish, GiftbackPin as giftback_pin, GiftbackProgress as giftback_progress, PhoneInput as phone_input, PhoneInputMask as phone_input_mask };
|
94
|
+
export { GiftbackFinish as giftback_finish, GiftbackPin as giftback_pin, GiftbackProgress as giftback_progress };
|
146
95
|
|
147
|
-
//# sourceMappingURL=giftback-
|
96
|
+
//# sourceMappingURL=giftback-finish_3.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"file":"giftback-finish.giftback-pin.giftback-progress.entry.js","mappings":"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","names":["success"],"sources":["src/components/crm-bonus/assets/svg/success-svgrepo-com.svg","src/components/crm-bonus-form/subcomponents/giftback-finish/giftback-finish.css?tag=giftback-finish&encapsulation=shadow","src/components/crm-bonus-form/subcomponents/giftback-finish/giftback-finish.tsx","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","src/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.css?tag=giftback-progress&encapsulation=shadow","src/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.tsx"],"sourcesContent":["<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\r\n<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->\r\n<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" \r\n\t viewBox=\"0 0 50 50\" xml:space=\"preserve\">\r\n<circle style=\"fill:#25AE88;\" cx=\"25\" cy=\"25\" r=\"25\"/>\r\n<polyline style=\"fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;\" points=\"\r\n\t38,15 22,33 12,25 \"/>\r\n</svg>",".message-finish {\n align-content: center;\n text-align: center;\n}\n\n.message-finish p {\n color: #777676;\n font-size: xx-large;\n font-family: sans-serif;\n}","import { Component, h } from \"@stencil/core\";\nimport success from '../../../crm-bonus/assets/svg/success-svgrepo-com.svg'\n\n@Component({\n tag: 'giftback-finish',\n styleUrl: 'giftback-finish.css',\n shadow: true\n})\nexport class GiftbackFinish {\n render() {\n return (\n <div class=\"message-finish\">\n <img src={success} width={80} />\n <p>Legal! O Bônus será aplicado na sua compra.</p>\n </div>\n )\n }\n}",":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\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}\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",":host {\n display: flex;\n font-family: Arial, sans-serif;\n /* background-color: #f8f4eb; */\n border-radius: 10px;\n padding: 16px;\n /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */\n max-width: 100%;\n flex-direction: column;\n}\n\n.giftback-container {\n display: flex;\n flex-direction: column;\n}\n\n.giftback-container p {\n font-size: medium;\n}\n\nh3 {\n margin: 0 0 10px;\n font-size: 18px;\n}\n\np {\n margin: 5px 0;\n font-size: 14px;\n align-self: start;\n}\n\n.validity {\n font-size: 12px;\n color: #888;\n}\n\n.progress-container {\n display: flex;\n align-items: center;\n margin: 10px 0;\n}\n\nprogress-container span {\n font-size: 12px;\n color: #666;\n}\n\ninput[type='range'] {\n flex: 1;\n margin: 0 10px;\n appearance: none;\n background-color: #ccc;\n height: 6px;\n border-radius: 3px;\n outline: none;\n cursor: pointer;\n}\n\ninput[type='range']::-webkit-slider-thumb {\n appearance: none;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background-color: #555;\n cursor: pointer;\n}\n\n.remaining {\n font-weight: bold;\n font-size: 14px;\n color: #333;\n}\n\n.button {\n top: 50%;\n background-color: #6c6c7e;\n color: #fff;\n border: none;\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.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.disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.footer-button-giftback {\n display: flex;\n justify-content: space-between;\n margin-top: 14px;\n}","import { Component, h, State, Prop } from '@stencil/core';\nimport { IBonus } from '../../../../dto/validate.pin.bonus';\n\n@Component({\n tag: 'giftback-progress',\n styleUrl: 'giftback-progress.css',\n shadow: true,\n})\nexport class GiftbackProgress {\n @State() usedValue: number = 0;\n\n @Prop() loading: boolean = false;\n\n @Prop() bonus: Partial<IBonus> = {\n totalBonus: 0,\n cartId: \"\",\n minimumPurchase: 0,\n bonusBalance: 0,\n calculatedValue: 0,\n firstValidityDate: \"\"\n };\n\n @Prop() reserve: (amountRedeemed: number) => void;\n @Prop() cancel: () => void;\n\n componentWillLoad() {\n this.usedValue = parseFloat(this.bonus.bonusBalance.toString());\n }\n\n handleSliderChange(event: Event) {\n const input = event.target as HTMLInputElement;\n this.usedValue = parseFloat(input.value);\n }\n\n async handleReserve(value: number) {\n this.reserve(value);\n }\n\n render() {\n const remainingGiftback = this.bonus.minimumPurchase - this.bonus.totalValue;\n\n return (\n <div class=\"giftback-container\">\n <p>\n Você possui até <strong>R$ {this.bonus.totalBonus.toFixed(2)}</strong> de Giftback nessa compra!\n </p>\n <p class=\"validity\">Válido até: {new Date(this.bonus.firstValidityDate).toLocaleDateString('pt-Br')}</p>\n\n <p>Você está utilizando <strong>R$ {this.usedValue.toFixed(2)}</strong> nessa compra</p>\n\n <div class=\"progress-container\">\n <span>R$ 0</span>\n <input\n disabled\n type=\"range\"\n min=\"0\"\n step=\"0.01\"\n max={this.bonus.totalBonus}\n value={this.usedValue}\n onInput={(event) => this.handleSliderChange(event)}\n />\n <span>R$ {this.bonus.totalBonus.toFixed(2)}</span>\n </div>\n\n <p class=\"remaining\">\n Faltam <strong>R$ {remainingGiftback > 0 ? remainingGiftback.toFixed(2) : Number(0).toFixed(2)}</strong> para utilizar o valor total do Giftback.\n </p>\n\n <div class=\"footer-button-giftback\">\n\n <button class=\"button-cancel\" disabled={this.loading} onClick={() => this.cancel()} >\n Cancelar\n </button>\n\n <button class={`button ${this.loading ? 'disabled' : ''} `} disabled={this.loading} onClick={() => this.handleReserve(this.usedValue)}>\n {\n !this.loading ? \"Aplicar\" : <loading-spinner size=\"10px\" color=\"#fff\" />\n }\n </button>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
var StepFormEnum;
|
2
|
+
(function (StepFormEnum) {
|
3
|
+
StepFormEnum[StepFormEnum["STEP_PHONE"] = 1] = "STEP_PHONE";
|
4
|
+
StepFormEnum[StepFormEnum["STEP_PIN"] = 2] = "STEP_PIN";
|
5
|
+
StepFormEnum[StepFormEnum["STEP_RESERVE"] = 3] = "STEP_RESERVE";
|
6
|
+
StepFormEnum[StepFormEnum["STEP_APPLY"] = 4] = "STEP_APPLY";
|
7
|
+
})(StepFormEnum || (StepFormEnum = {}));
|
8
|
+
|
9
|
+
export { StepFormEnum as S };
|
10
|
+
|
11
|
+
//# sourceMappingURL=index-2bfaba2b.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"file":"index-2bfaba2b.js","mappings":"IAAY;AAAZ,WAAY,YAAY;IACpB,2DAAc,CAAA;IACd,uDAAY,CAAA;IACZ,+DAAgB,CAAA;IAChB,2DAAc,CAAA;AAClB,CAAC,EALW,YAAY,KAAZ,YAAY;;;;","names":[],"sources":["src/contants/index.ts"],"sourcesContent":["export enum StepFormEnum {\n STEP_PHONE = 1,\n STEP_PIN = 2,\n STEP_RESERVE = 3,\n STEP_APPLY = 4\n}"],"version":3}
|