crmbonus-component-wake 0.0.16 → 0.0.18
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{components/p-8e0ed8dd.js → crmbonus-component-wake/app-modal.entry.js} +8 -28
- package/dist/crmbonus-component-wake/app-modal.entry.js.map +1 -0
- package/dist/{esm/app-modal_2.entry.js → crmbonus-component-wake/crm-bonus-form.entry.js} +5 -25
- package/dist/crmbonus-component-wake/crm-bonus-form.entry.js.map +1 -0
- package/dist/{esm → crmbonus-component-wake}/crm-bonus.entry.js +5 -6
- package/dist/crmbonus-component-wake/crm-bonus.entry.js.map +1 -0
- package/dist/crmbonus-component-wake/crmbonus-component-wake.esm.js +48 -1
- package/dist/crmbonus-component-wake/crmbonus-component-wake.esm.js.map +1 -1
- package/dist/{esm/crmbonus.service-83f67708.js → crmbonus-component-wake/crmbonus.service-ce105f62.js} +165 -90
- package/dist/crmbonus-component-wake/crmbonus.service-ce105f62.js.map +1 -0
- package/dist/{components/p-7294e43f.js → crmbonus-component-wake/giftback-finish.entry.js} +8 -25
- package/dist/crmbonus-component-wake/giftback-finish.entry.js.map +1 -0
- package/dist/{components/p-a1781d03.js → crmbonus-component-wake/giftback-pin.entry.js} +8 -37
- package/dist/crmbonus-component-wake/giftback-pin.entry.js.map +1 -0
- package/dist/{components/p-a88bc337.js → crmbonus-component-wake/giftback-progress.entry.js} +8 -36
- package/dist/crmbonus-component-wake/giftback-progress.entry.js.map +1 -0
- package/dist/crmbonus-component-wake/index-f557ce7c.js +3039 -0
- package/dist/crmbonus-component-wake/index-f557ce7c.js.map +1 -0
- package/dist/crmbonus-component-wake/index.esm.js +16 -1
- package/dist/crmbonus-component-wake/index.esm.js.map +1 -1
- package/dist/{esm → crmbonus-component-wake}/loading-spinner.entry.js +2 -3
- package/dist/crmbonus-component-wake/loading-spinner.entry.js.map +1 -0
- package/dist/{esm → crmbonus-component-wake}/pedido-finalizado.entry.js +2 -2
- package/dist/crmbonus-component-wake/pedido-finalizado.entry.js.map +1 -0
- package/dist/{components/p-2dbfb2c7.js → crmbonus-component-wake/phone-input-mask.entry.js} +8 -29
- package/dist/crmbonus-component-wake/phone-input-mask.entry.js.map +1 -0
- package/dist/crmbonus-component-wake/phone-input.entry.js +21 -0
- package/dist/crmbonus-component-wake/phone-input.entry.js.map +1 -0
- package/dist/crmbonus-component-wake/shadow-css-7ad5caf8.js +334 -0
- package/dist/crmbonus-component-wake/shadow-css-7ad5caf8.js.map +1 -0
- package/package.json +1 -1
- package/dist/cjs/app-globals-3a1e7e63.js +0 -7
- package/dist/cjs/app-globals-3a1e7e63.js.map +0 -1
- package/dist/cjs/app-modal_2.cjs.entry.js +0 -127
- package/dist/cjs/app-modal_2.cjs.entry.js.map +0 -1
- package/dist/cjs/crm-bonus.cjs.entry.js +0 -46
- package/dist/cjs/crm-bonus.cjs.entry.js.map +0 -1
- package/dist/cjs/crmbonus-component-wake.cjs.js +0 -27
- package/dist/cjs/crmbonus-component-wake.cjs.js.map +0 -1
- package/dist/cjs/crmbonus.service-a626c034.js +0 -3795
- package/dist/cjs/crmbonus.service-a626c034.js.map +0 -1
- package/dist/cjs/giftback-finish_5.cjs.entry.js +0 -153
- package/dist/cjs/giftback-finish_5.cjs.entry.js.map +0 -1
- package/dist/cjs/index-52d8a075.js +0 -1248
- package/dist/cjs/index-52d8a075.js.map +0 -1
- package/dist/cjs/index.cjs.js +0 -11
- package/dist/cjs/index.cjs.js.map +0 -1
- package/dist/cjs/loader.cjs.js +0 -17
- package/dist/cjs/loader.cjs.js.map +0 -1
- package/dist/cjs/loading-spinner.cjs.entry.js +0 -24
- package/dist/cjs/loading-spinner.cjs.entry.js.map +0 -1
- package/dist/cjs/pedido-finalizado.cjs.entry.js +0 -28
- package/dist/cjs/pedido-finalizado.cjs.entry.js.map +0 -1
- package/dist/collection/collection-manifest.json +0 -21
- package/dist/collection/components/crm-bonus/assets/logo.svg +0 -18
- package/dist/collection/components/crm-bonus/assets/success-svgrepo-com.svg +0 -8
- package/dist/collection/components/crm-bonus/assets/svg/logo.svg +0 -18
- package/dist/collection/components/crm-bonus/assets/svg/success-svgrepo-com.svg +0 -8
- package/dist/collection/components/crm-bonus/crm-bonus.css +0 -12
- package/dist/collection/components/crm-bonus/crm-bonus.js +0 -123
- package/dist/collection/components/crm-bonus/crm-bonus.js.map +0 -1
- package/dist/collection/components/crm-bonus-form/crm-bonus-form.css +0 -32
- package/dist/collection/components/crm-bonus-form/crm-bonus-form.js +0 -194
- package/dist/collection/components/crm-bonus-form/crm-bonus-form.js.map +0 -1
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-finish/giftback-finish.css +0 -10
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-finish/giftback-finish.js +0 -20
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-finish/giftback-finish.js.map +0 -1
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.css +0 -54
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.js +0 -111
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.js.map +0 -1
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.css +0 -95
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.js +0 -111
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.js.map +0 -1
- package/dist/collection/components/crm-bonus-form/subcomponents/phone/phone.input.js +0 -75
- package/dist/collection/components/crm-bonus-form/subcomponents/phone/phone.input.js.map +0 -1
- package/dist/collection/components/loading-spinner/loading-spinner.css +0 -17
- package/dist/collection/components/loading-spinner/loading-spinner.js +0 -63
- package/dist/collection/components/loading-spinner/loading-spinner.js.map +0 -1
- package/dist/collection/components/modal/app-modal.css +0 -45
- package/dist/collection/components/modal/app-modal.js +0 -83
- package/dist/collection/components/modal/app-modal.js.map +0 -1
- package/dist/collection/components/pedido/pedido.js +0 -58
- package/dist/collection/components/pedido/pedido.js.map +0 -1
- package/dist/collection/components/phone/phone-input-mask.css +0 -47
- package/dist/collection/components/phone/phone-input-mask.js +0 -90
- package/dist/collection/components/phone/phone-input-mask.js.map +0 -1
- package/dist/collection/contants/index.js +0 -8
- package/dist/collection/contants/index.js.map +0 -1
- package/dist/collection/contants/mocks.js +0 -28
- package/dist/collection/contants/mocks.js.map +0 -1
- package/dist/collection/dto/pin.sent.js +0 -2
- package/dist/collection/dto/pin.sent.js.map +0 -1
- package/dist/collection/dto/validate.pin.bonus.js +0 -2
- package/dist/collection/dto/validate.pin.bonus.js.map +0 -1
- package/dist/collection/index.js +0 -11
- package/dist/collection/index.js.map +0 -1
- package/dist/collection/services/crmbonus.service.js +0 -39
- package/dist/collection/services/crmbonus.service.js.map +0 -1
- package/dist/collection/utils/utils.js +0 -4
- package/dist/collection/utils/utils.js.map +0 -1
- package/dist/components/app-modal.js +0 -8
- package/dist/components/app-modal.js.map +0 -1
- package/dist/components/crm-bonus-form.js +0 -8
- package/dist/components/crm-bonus-form.js.map +0 -1
- package/dist/components/crm-bonus.js +0 -117
- package/dist/components/crm-bonus.js.map +0 -1
- package/dist/components/giftback-finish.js +0 -8
- package/dist/components/giftback-finish.js.map +0 -1
- package/dist/components/giftback-pin.js +0 -8
- package/dist/components/giftback-pin.js.map +0 -1
- package/dist/components/giftback-progress.js +0 -8
- package/dist/components/giftback-progress.js.map +0 -1
- package/dist/components/index.js +0 -9
- package/dist/components/index.js.map +0 -1
- package/dist/components/loading-spinner.js +0 -8
- package/dist/components/loading-spinner.js.map +0 -1
- package/dist/components/p-17ee9996.js +0 -52
- package/dist/components/p-17ee9996.js.map +0 -1
- package/dist/components/p-2dbfb2c7.js.map +0 -1
- package/dist/components/p-563ea4c5.js +0 -166
- package/dist/components/p-563ea4c5.js.map +0 -1
- package/dist/components/p-629fcb5b.js +0 -3793
- package/dist/components/p-629fcb5b.js.map +0 -1
- package/dist/components/p-7294e43f.js.map +0 -1
- package/dist/components/p-78529eea.js +0 -39
- package/dist/components/p-78529eea.js.map +0 -1
- package/dist/components/p-8e0ed8dd.js.map +0 -1
- package/dist/components/p-a1781d03.js.map +0 -1
- package/dist/components/p-a88bc337.js.map +0 -1
- package/dist/components/p-faf7103e.js +0 -1064
- package/dist/components/p-faf7103e.js.map +0 -1
- package/dist/components/pedido-finalizado.js +0 -45
- package/dist/components/pedido-finalizado.js.map +0 -1
- package/dist/components/phone-input-mask.js +0 -8
- package/dist/components/phone-input-mask.js.map +0 -1
- package/dist/components/phone-input.js +0 -8
- package/dist/components/phone-input.js.map +0 -1
- package/dist/crmbonus-component-wake/p-54e51298.entry.js +0 -2
- package/dist/crmbonus-component-wake/p-54e51298.entry.js.map +0 -1
- package/dist/crmbonus-component-wake/p-629fcb5b.js +0 -2
- package/dist/crmbonus-component-wake/p-629fcb5b.js.map +0 -1
- package/dist/crmbonus-component-wake/p-6b075110.entry.js +0 -2
- package/dist/crmbonus-component-wake/p-6b075110.entry.js.map +0 -1
- package/dist/crmbonus-component-wake/p-72510682.js +0 -3
- package/dist/crmbonus-component-wake/p-72510682.js.map +0 -1
- package/dist/crmbonus-component-wake/p-82f64f70.entry.js +0 -2
- package/dist/crmbonus-component-wake/p-82f64f70.entry.js.map +0 -1
- package/dist/crmbonus-component-wake/p-bf4b486e.entry.js +0 -2
- package/dist/crmbonus-component-wake/p-bf4b486e.entry.js.map +0 -1
- package/dist/crmbonus-component-wake/p-e1255160.js +0 -2
- package/dist/crmbonus-component-wake/p-e1255160.js.map +0 -1
- package/dist/crmbonus-component-wake/p-f0d68c31.entry.js +0 -2
- package/dist/crmbonus-component-wake/p-f0d68c31.entry.js.map +0 -1
- package/dist/env.js +0 -5
- package/dist/env.js.map +0 -1
- package/dist/esm/app-modal_2.entry.js.map +0 -1
- package/dist/esm/crm-bonus.entry.js.map +0 -1
- package/dist/esm/crmbonus-component-wake.js +0 -22
- package/dist/esm/crmbonus-component-wake.js.map +0 -1
- package/dist/esm/crmbonus.service-83f67708.js.map +0 -1
- package/dist/esm/giftback-finish_5.entry.js +0 -145
- package/dist/esm/giftback-finish_5.entry.js.map +0 -1
- package/dist/esm/index-9f7bde48.js +0 -1220
- package/dist/esm/index-9f7bde48.js.map +0 -1
- package/dist/esm/index.js +0 -7
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/loader.js +0 -13
- package/dist/esm/loader.js.map +0 -1
- package/dist/esm/loading-spinner.entry.js.map +0 -1
- package/dist/esm/pedido-finalizado.entry.js.map +0 -1
- package/dist/index.cjs.js +0 -1
- package/dist/index.js +0 -1
- /package/dist/{esm → crmbonus-component-wake}/app-globals-0f993ce5.js +0 -0
- /package/dist/{esm → crmbonus-component-wake}/app-globals-0f993ce5.js.map +0 -0
@@ -1 +0,0 @@
|
|
1
|
-
{"file":"p-a1781d03.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,6kBAA6kB,CAAC;AACrmB,0BAAe,cAAc;;MCOhB,WAAW;;;;;;;mBAKK,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,+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,CAGP,EACR;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.css?tag=giftback-pin&encapsulation=shadow","src/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: Arial, sans-serif;\n}\n\n.form-container-pin {\n display: flex;\n justify-content: space-around;\n}\n\n.pin-container {\n display: flex;\n gap: 10px;\n margin: 10px 0;\n}\n\ninput {\n width: 40px;\n height: 40px;\n font-size: 18px;\n text-align: center;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\nbutton {\n padding: 10px 20px;\n background-color: #ddd;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #bbb;\n}\n\n.success {\n color: green;\n margin-top: 10px;\n}\n\n.button {\n top: 50%;\n background-color: #6c6c7e;\n color: #fff;\n border: none;\n border-radius: 10px;\n padding: 15px;\n min-height: 30px;\n min-width: 120px;\n font-size: 20px;\n cursor: pointer;\n}","import { Component, h, Prop, State } from '@stencil/core';\nimport { IPinSent } from '../../../../dto/pin.sent';\n\n@Component({\n tag: 'giftback-pin',\n styleUrl: 'giftback-pin.css',\n shadow: true,\n})\nexport class GiftbackPin {\n\n @Prop() sent: IPinSent;\n @Prop() validate: (pin: string) => 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 <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 {/* <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}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"file":"p-a88bc337.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,ogCAAogC,CAAC;AACjiC,+BAAe,mBAAmB;;MCOrB,gBAAgB;;;;;yBAKI,CAAC;uBAEH,KAAK;qBAEC;YAC7B,UAAU,EAAE,CAAC;YACb,MAAM,EAAE,EAAE;YACV,eAAe,EAAE,CAAC;YAClB,YAAY,EAAE,CAAC;YACf,eAAe,EAAE,CAAC;YAClB,iBAAiB,EAAE,EAAE;SACxB;;;IAID,iBAAiB;QACb,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC;KACnE;IAED,kBAAkB,CAAC,KAAY;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KAC5C;IAED,MAAM,aAAa;QACf,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAChC;IAED,MAAM;QACF,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;QAE7E,QACI,4DAAK,KAAK,EAAC,oBAAoB,IAC3B,0FACoB,wEAAY,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAU,+BACtE,EACJ,0DAAG,KAAK,EAAC,UAAU,8BAAc,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAK,EAElE,+FAAwB,wEAAY,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAU,kBAAiB,EAExF,4DAAK,KAAK,EAAC,oBAAoB,IAC3B,sEAAiB,EACjB,8DACI,QAAQ,QACR,IAAI,EAAC,OAAO,EACZ,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAC1B,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,GACpD,EACF,sEAAU,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAQ,CAChD,EAEN,0DAAG,KAAK,EAAC,WAAW,eACT,wEAAa,iBAAiB,GAAG,CAAC,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,GAAE,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAU,8CACxG,EAEJ,4DAAK,KAAK,EAAC,wBAAwB,IAC/B,+DAAQ,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAE/G,CAAC,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,uBAAiB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,CAEvE,CACP,CACJ,EACR;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["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":[":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}\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.disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.footer-button-giftback {\n display: flex;\n justify-content: end;\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 // @Prop() maxValue: number = 50; // Valor máximo de Giftback permitido na compra\n // @Prop() totalGiftback: number = 300; // Valor total disponível de Giftback\n // @Prop() validityDate: string = '30/10/2024'; // Data de validade\n\n @State() usedValue: number = 0; // Valor inicial de Giftback utilizado\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\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() {\n this.reserve(this.usedValue);\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é: {this.bonus.firstValidityDate}</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 <button class={`button ${this.loading ? 'disabled' : ''} `} disabled={this.loading} onClick={() => this.handleReserve()}>\n {\n !this.loading ? \"Aplicar\" : <loading-spinner size=\"10px\" color=\"#fff\" />\n }\n </button>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|