crmbonus-component-wake 1.0.36 → 1.0.37

package/dist/crmbonus-component-wake/p-9fca9e98.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["appModalCss","AppModalStyle0","AppModal","closeModal","this","modalClosed","emit","render","h","key","class","isOpen","modalTitle","onClick","crmBonusFormCss","CrmBonusFormStyle0","CrmBonusForm","crmBonusService","CrmBonusService","phone","birthDate","document","name","StepFormEnum","STEP_RESERVE","setStep","step","validateBonus","pin","loading","message","payload","cellphone","toString","loja_id","sent","storeId","user_id","userId","cartId","products","bonus","validatePinBonus","storeName","console","log","error","_b","_a","response","data","reserveApply","amount","reserve","STEP_APPLY","saveStore","redeemed_bonus","cart_id","ticket","gross_value","totalValue","handleCancel","STEP_PHONE","cancel","Host","STEP_PIN","validate","amountRedeemed","PhoneCancelInput","validatePhone","phoneInputMask","getPhone","sendPin","initialValue","value","ref","disabled","size","color","PhoneInput"],"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: (amount: number) => 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(amount);\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$ ${this.value}`} ref={ref => this.phoneInputMask = ref} disabled={true} />\n                <button class={`btn btn-success btnCrm ${this.loading ? 'disabled' : ''} `} disabled={this.loading} onClick={() => this.validatePhone()}>\n                    {\n                        !this.loading ? \"Cancelar\" : <loading-spinner size=\"11px\" 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 btn-success btnCrm ${this.loading ? 'disabled' : ''} `} disabled={this.loading} onClick={() => this.validatePhone()}>\n                    {\n                        !this.loading ? \"validar\" : <loading-spinner size=\"11px\" color=\"#fff\" />\n                    }\n                </button>\n            </div>\n        )\n    }\n}"],"mappings":"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","ignoreList":[]}

package/dist/crmbonus-component-wake/p-b6d97e97.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e}from"./p-72510682.js";import{C as i}from"./p-cb469a00.js";import{S as s}from"./p-8e6cdd1e.js";const n=".container-button{cursor:pointer;padding:5px 5px 5px 14px;}.section-crm{border:1px solid #dbd4d4;text-align:-webkit-center;margin-bottom:20px}.section-cart-crm{margin-top:10px}.section-cart-crm p{padding:0;margin:0px 0px 0px 15px}.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:97%;display:flex;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:0px}.form-container .btnCrm{background:#00162e;border-color:#00162e;width:30%;color:#fff}.message-alert{font-family:sans-serif;color:#df4d4d;margin-top:5px}";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.amountCancel=undefined;this.sent=undefined}async componentWillLoad(){await this.handleLoad()}async handleLoad(){try{if(this.userId){this.customer=await this.crmBonusService.getCustomer(this.userId,this.storeName);console.log("user",this.customer)}const t=localStorage.getItem(this.cartId);console.log("amount",t);if(t){this.canCancel=true;this.amountCancel=t}}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(t){localStorage.setItem(this.cartId,t.toString());this.canCancel=true;this.amountCancel=t.toString()}async cancel(){this.message="";this.loading=true;try{await this.crmBonusService.cancel(this.cartId,this.storeName);this.canCancel=false}catch(t){this.message="Não consegui cancelar o bônus, tente novamente!"}finally{this.loading=false}}render(){return e("div",{key:"0392d18435b29da7594c5ddec8dca0a5a2c892f6",class:"section-cart-crm"},e("p",{key:"7f5cb65fe1ebce8397d5d6c8d3d13d09ad55d8db",class:"text-left fbits-responsive-carrinho-desconto-texto"},"Giftback"),e("div",{key:"82922b373a5c6d0eb72d59826c5b10425fa9fb81",class:"container-button"},this.canCancel?e("phone-cancel-input",{value:this.amountCancel,sendPin:()=>{this.cancel()},loading:this.loading}):e("phone-input",{value:this.customer.phone,sendPin:t=>{this.sendPin(t)},loading:this.loading})),e("p",{key:"113c2653a276730fd3ecd675f50a0f147c656620",class:"message-alert"},this.message),e("app-modal",{key:"ffda850ab8dc0534e56f868554eaaa794b168427",isOpen:this.showModal,modalTitle:`Giftback`,onModalClosed:()=>this.showModal=false},e("crm-bonus-form",{key:"3b3493173363fd799f26b37e6d94f9455e19f2bf",saveStore:t=>this.save(t),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};
-//# sourceMappingURL=p-b6d97e97.entry.js.map

package/dist/crmbonus-component-wake/p-b6d97e97.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["crmBonusCss","CrmBonusStyle0","CrmBonus","this","crmBonusService","CrmBonusService","birthDate","document","name","phone","componentWillLoad","handleLoad","userId","customer","getCustomer","storeName","console","log","amount","localStorage","getItem","cartId","canCancel","amountCancel","error","products","JSON","parse","productsInString","sendPin","loading","message","_phone","replace","Number","sent","crmBonusRef","setStep","StepFormEnum","STEP_PIN","showModal","_b","_a","response","data","buildProducts","map","product","sku","SKU","value","PrecoPor","Quantidade","variantId","ProdutoVarianteId","qtd","handleCloseModal","save","setItem","toString","cancel","render","h","key","class","isOpen","modalTitle","onModalClosed","saveStore","ref"],"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: 5px 5px 5px 14px;\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  margin-top: 10px;\n}\n\n.section-cart-crm p {\n  padding: 0;\n  margin: 0px 0px 0px 15px;\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: 97%;\n  display: flex;\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: 0px;\n}\n\n.form-container .btnCrm {\n  background: #00162e;\n  border-color: #00162e;\n  width: 30%;\n  color: #fff;\n}\n\n.message-alert {\n  font-family: sans-serif;\n  color: #df4d4d;\n  margin-top: 5px;\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() amountCancel: string;\n  @State() sent: IPinSent;\n\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\n      const amount = localStorage.getItem(this.cartId);\n      console.log('amount', amount)\n\n      if (amount) {\n        this.canCancel = true;\n        this.amountCancel = amount;\n      }\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(amount: number) {\n    localStorage.setItem(this.cartId, amount.toString());\n    this.canCancel = true;\n    this.amountCancel = amount.toString()\n  }\n\n  async cancel() {\n    this.message = \"\";\n    this.loading = true;\n    try {\n      await this.crmBonusService.cancel(this.cartId, this.storeName);\n      this.canCancel = false;\n    } catch (error) {\n      this.message = \"Não consegui cancelar o bônus, tente novamente!\"\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"section-cart-crm\">\n        <p class=\"text-left fbits-responsive-carrinho-desconto-texto\">Giftback</p>\n        <div class=\"container-button\">\n          {/* <img src={logo} onClick={() => (this.showModal = true)} /> */}\n          {\n            this.canCancel ? <phone-cancel-input value={this.amountCancel} sendPin={() => { this.cancel() }} loading={this.loading} />\n              : <phone-input value={this.customer.phone} sendPin={(phone) => { this.sendPin(phone) }} loading={this.loading} />\n          }\n        </div>\n        <p class=\"message-alert\" >{this.message}</p>\n        <app-modal\n          isOpen={this.showModal}\n          modalTitle={`Giftback`}\n          onModalClosed={() => (this.showModal = false)}\n        >\n          <crm-bonus-form saveStore={(amount: number) => this.save(amount)} 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,0/BACpB,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,gDAK9B,uBAAMC,SACEP,KAAKQ,Y,CAGb,gBAAMA,GACJ,IACE,GAAIR,KAAKS,OAAQ,CACfT,KAAKU,eAAiBV,KAAKC,gBAAgBU,YAAYX,KAAKS,OAAQT,KAAKY,WACzEC,QAAQC,IAAI,OAAQd,KAAKU,S,CAG3B,MAAMK,EAASC,aAAaC,QAAQjB,KAAKkB,QACzCL,QAAQC,IAAI,SAAUC,GAEtB,GAAIA,EAAQ,CACVf,KAAKmB,UAAY,KACjBnB,KAAKoB,aAAeL,C,EAGtB,MAAOM,GACPR,QAAQC,IAAI,gB,CAEdd,KAAKsB,SAAWC,KAAKC,MAAMxB,KAAKyB,iB,CAG3B,aAAMC,CAAQpB,G,QACnBN,KAAK2B,QAAU,KACf3B,KAAK4B,QAAU,GAEf,IACE,MAAMC,EAASvB,EAAMwB,QAAQ,MAAO,IACpC9B,KAAKM,MAAQyB,OAAOF,GACpB7B,KAAKgC,WAAahC,KAAKC,gBAAgByB,QAAQ1B,KAAKM,MAAON,KAAKY,iBAC1DZ,KAAKiC,YAAYC,QAAQC,EAAaC,UAC5CpC,KAAKqC,UAAY,I,CACjB,MAAOhB,GACPrB,KAAK4B,SAAUU,GAAAC,EAAAlB,IAAK,MAALA,SAAK,SAALA,EAAOmB,YAAQ,MAAAD,SAAA,SAAAA,EAAEE,QAAI,MAAAH,SAAA,SAAAA,EAAEV,O,SAEtC5B,KAAK2B,QAAU,K,EAInB,aAAAe,GACE,OAAO1C,KAAKsB,SAASqB,KAAIC,IAAO,CAAOC,IAAKD,EAAQE,IAAKC,MAAQH,EAAQI,SAAWJ,EAAQK,WAAaC,UAAWN,EAAQO,kBAAmBC,IAAKR,EAAQK,c,CAG9J,gBAAAI,GACErD,KAAKqC,UAAY,K,CAGnB,IAAAiB,CAAKvC,GACHC,aAAauC,QAAQvD,KAAKkB,OAAQH,EAAOyC,YACzCxD,KAAKmB,UAAY,KACjBnB,KAAKoB,aAAeL,EAAOyC,U,CAG7B,YAAMC,GACJzD,KAAK4B,QAAU,GACf5B,KAAK2B,QAAU,KACf,UACQ3B,KAAKC,gBAAgBwD,OAAOzD,KAAKkB,OAAQlB,KAAKY,WACpDZ,KAAKmB,UAAY,K,CACjB,MAAOE,GACPrB,KAAK4B,QAAU,iD,SAEf5B,KAAK2B,QAAU,K,EAInB,MAAA+B,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACTF,EAAA,KAAAC,IAAA,2CAAGC,MAAM,sDAAoD,YAC7DF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAGP7D,KAAKmB,UAAYwC,EAAA,sBAAoBZ,MAAO/C,KAAKoB,aAAcM,QAAS,KAAQ1B,KAAKyD,QAAQ,EAAI9B,QAAS3B,KAAK2B,UAC3GgC,EAAA,eAAaZ,MAAO/C,KAAKU,SAASJ,MAAOoB,QAAUpB,IAAYN,KAAK0B,QAAQpB,EAAM,EAAIqB,QAAS3B,KAAK2B,WAG5GgC,EAAA,KAAAC,IAAA,2CAAGC,MAAM,iBAAkB7D,KAAK4B,SAChC+B,EAAA,aAAAC,IAAA,2CACEE,OAAQ9D,KAAKqC,UACb0B,WAAY,WACZC,cAAe,IAAOhE,KAAKqC,UAAY,OAEvCsB,EAAA,kBAAAC,IAAA,2CAAgBK,UAAYlD,GAAmBf,KAAKsD,KAAKvC,GAASmD,IAAKA,GAAOlE,KAAKiC,YAAciC,EAAKlC,KAAMhC,KAAKgC,KAAM1B,MAAON,KAAKM,MAAOmD,OAAQ,IAAMzD,KAAKqD,mBAAoBzC,UAAWZ,KAAKY,UAAWU,SAAUtB,KAAK0C,gBAAiBxB,OAAQlB,KAAKkB,OAAQR,SAAUV,KAAKU,Y","ignoreList":[]}

package/dist/crmbonus-component-wake/p-cf8e81f9.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as i}from"./p-72510682.js";const a="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiANCgkgdmlld0JveD0iMCAwIDUwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxjaXJjbGUgc3R5bGU9ImZpbGw6IzI1QUU4ODsiIGN4PSIyNSIgY3k9IjI1IiByPSIyNSIvPg0KPHBvbHlsaW5lIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwOyIgcG9pbnRzPSINCgkzOCwxNSAyMiwzMyAxMiwyNSAiLz4NCjwvc3ZnPg==";const t=".message-finish{align-content:center;text-align:center}.message-finish p{color:#777676;font-size:xx-large;font-family:sans-serif}";const n=t;const c=class{constructor(i){e(this,i)}render(){return i("div",{key:"e72f82799146a6e94acbdd62324e07cdf9f77009",class:"message-finish"},i("img",{key:"46e2436a3dbe4745225c3b9674e6bf6c299ad63e",src:a,width:80}),i("p",{key:"270e42050956f7f3d1ae9b90f314211fa310f797"},"Legal! O Bônus será aplicado na sua compra."))}};c.style=n;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 a=e.target;const t=a.value.slice(0,1);this.pin[i]=t;if(t&&i<this.pin.length-1){const e=a.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:"7fe6a9f55ca436ecfcc20f106c1efeddd8387490",class:"form-container-pin"},i("div",{key:"aece84fab5ecf94ce5ca90fd1912623dd3c1b9b8"},i("p",{key:"5134dd8eb3478f59dcfcdca6612e885b76578cba"},"Insira o PIN de 4 dígitos enviado por SMS."),i("div",{key:"8855be06a09925746a5b18323726dd67ec73d7c3",class:"pin-container"},this.pin.map(((e,a)=>i("input",{type:"text",maxLength:1,value:this.pin[a],onInput:e=>this.handleInput(e,a)}))))),i("div",{key:"1c5523feb6c9dafbfddd5388170de5fea7627f62",class:"footer-button"},i("button",{key:"8506cd68998d4ecb76f8a8a262373605a06827de",class:"button-cancel",disabled:this.loading,onClick:()=>this.cancel()},"Cancelar"),i("button",{key:"4dda0af894ad5849ba27d3a4f6c15c80d6c984ae",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 l=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:"c2fb3f6a887887e197b55e951dbf50054e27e77a",class:"giftback-container"},i("p",{key:"1d08aaaa1d260f3938e472e95b1e194be50c3987"},"Você possui até ",i("strong",{key:"99d39bc977a41c9d098c812b61ae41c25342f65c"},"R$ ",this.bonus.totalBonus.toFixed(2))," de Giftback nessa compra!"),i("p",{key:"68fc8504eabfdf6e9e873780bb6863521a683e58",class:"validity"},"Válido até: ",new Date(this.bonus.firstValidityDate).toLocaleDateString("pt-Br")),i("p",{key:"fe4c8804f8d577e530330050cfae9c33c2be36d7"},"Você está utilizando ",i("strong",{key:"d1d2a6ad0ca1da77e5a4ab9a595af74a11fb9862"},"R$ ",this.usedValue.toFixed(2))," nessa compra"),i("div",{key:"b0eac608016c3136a344c03d456355d7ffcc8dfc",class:"progress-container"},i("span",{key:"a88626a3f0d0109fca8b593da05e76f54eb69e28"},"R$ 0"),i("input",{key:"5d19e34becada60c728f9fce1fa67eede16b7844",disabled:true,type:"range",min:"0",step:"0.01",max:this.bonus.totalBonus,value:this.usedValue,onInput:e=>this.handleSliderChange(e)}),i("span",{key:"31f0b18eff1ffbd2fb86941653beacad567514ca"},"R$ ",this.bonus.totalBonus.toFixed(2))),i("p",{key:"5f278047d5bb21282890de0304bc2e8addf8ea43",class:"remaining"},"Faltam ",i("strong",{key:"fa220ca91d366eb5e5eec4bf7e94ace4584b0dbe"},"R$ ",e>0?e.toFixed(2):Number(0).toFixed(2))," para utilizar o valor total do Giftback."),i("div",{key:"248c3376e92b8daab0c821e79e083ef6f44bff9e",class:"footer-button-giftback"},i("button",{key:"fe612e24a59abed7ef27e6a0425d40efaad218c2",class:"button-cancel",disabled:this.loading,onClick:()=>this.cancel()},"Cancelar"),i("button",{key:"6f86a5b1eeedf01c9eabe9313fdf7b00dc264e96",class:`button ${this.loading?"disabled":""} `,disabled:this.loading,onClick:()=>this.handleReserve(this.usedValue)},!this.loading?"Aplicar":i("loading-spinner",{size:"10px",color:"#fff"}))))}};l.style=f;export{c as giftback_finish,d as giftback_pin,l as giftback_progress};
-//# sourceMappingURL=p-cf8e81f9.entry.js.map

package/dist/crmbonus-component-wake/p-cf8e81f9.entry.js.map

@@ -1 +0,0 @@
-{"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":[]}