if(!customElements.get("remex-bank-transfer")){class e extends HTMLElement{constructor(){super(),this.uniqueSuffix="_"+Math.random().toString(36).substr(2,9),this.classList.add(this.uniqueSuffix),
this.defaultStyles=` \n            @-webkit-keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}} \n            @keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}} \n            .${this.uniqueSuffix}{ \n                -webkit-transition: height 0.5s ease;  \n                -moz-transition: height 0.5s ease;    \n                -o-transition: height 0.5s ease;     \n                transition: height 0.5s ease; \n                display:grid;\n                min-height: 100%;         \n                grid-template-rows: 1fr auto;\n            }\n            .${this.uniqueSuffix} .country-choice-header{background:#005f75 !important;color:white !important;}\n             .${this.uniqueSuffix} .error-caption {\n                color: #f5a09d;\n                font-size: 0.8rem;\n                padding:2px;\n            }\n           .${this.uniqueSuffix} .remex-field-container .no-select {\n                user-select: none !important;\n            }\n           .${this.uniqueSuffix} .remex-field-container {\n                display: flex;\n                margin-bottom: 10px;\n                flex-direction: column;\n                flex: 100% 0 0;\n                width: 100%;\n                margin-bottom: 10px; \n            }\n            .${this.uniqueSuffix} .remex-field-container label {\n                padding-bottom: 3px;\n                color: #fff;\n            }\n            .${this.uniqueSuffix} .remex-field-container.focused label {\n                color: #fff;\n            }\n            .${this.uniqueSuffix} .remex-field-container .field-input {\n                display: flex;\n                justify-content: space-between;\n                padding: 10px;\n                font-size: 1.2rem;\n                border: 1px solid #ccc;\n                border-radius: 5px;\n                box-shadow: none;\n                background-color: #2b5159;\n            }\n              .${this.uniqueSuffix} .remex-field-container   .input-caption{\n                font-size:0.8rem;\n                display: block;\n                padding: 2px;\n              }\n            .${this.uniqueSuffix} .remex-field-container .field-input input,\n            .${this.uniqueSuffix} .remex-field-container .field-input select,\n            .${this.uniqueSuffix} .remex-field-container .field-input texarea {\n                width: 100%;\n                flex: 100% 0 1;\n                color: #fff;\n                font-size: 1.4rem;\n                background: transparent !important;\n                border: none !important;\n                box-shadow: none !important;\n                display: flex;\n                padding: 4px;\n                outline: none !important;\n            }\n            .${this.uniqueSuffix} .remex-field-container input[type="number"]::-webkit-outer-spin-button,\n             .${this.uniqueSuffix} .remex-field-container input[type="number"]::-webkit-inner-spin-button {\n                -webkit-appearance: none;\n                margin: 0;\n            }\n            .${this.uniqueSuffix} .remex-field-container .field-input input[type="number"] {\n                -moz-appearance: textfield;  \n            }\n            .${this.uniqueSuffix} .remex-field-container .field-input input[type="number"]:focus,\n            .${this.uniqueSuffix} .remex-field-container .field-input texarea:focus,\n            .${this.uniqueSuffix} .remex-field-container .field-input select:focus {\n                outline: none;\n                border: none;\n            }\n            .${this.uniqueSuffix} .remex-field-container span {\n                width: 40px;\n                font-size: .8rem;\n                color: gray;\n                line-height: 34px;\n                padding: 3px;\n                font-family: monospace;\n            }\n            .${this.uniqueSuffix} .remex-field-container.focused .field-input { \n                align-items: center;\n                border: 2px solid rgb(0, 208, 255) !important;\n                background-color: #cacaca21;\n                box-shadow: 0px 2px 8px #00afd6;\n            }\n            .${this.uniqueSuffix} .remex-field-container.focused .field-input input,\n            .${this.uniqueSuffix} .remex-field-container.focused .field-input select,\n            .${this.uniqueSuffix} .remex-field-container.focused .field-input textarea\n            { \n                display: flex;\n                color: #2ed2ec;\n            } \n            .${this.uniqueSuffix} .remex-field-container input::placeholder{\n                color: #ccc;\n                font-size: 1rem;\n            }\n            .${this.uniqueSuffix} hr{\n                width:100%;\n                height:0.1px;\n                margin: 4px 0px;\n                line-height: 1px;\n                border-block-color: gray;\n                border-top: 0px none;\n                height: 0.1rem;\n                border-bottom: 1px dashed gray;\n            }\n            .${this.uniqueSuffix} .pinnerdown{\n                text-align: center;\n                background: #005f75;\n                padding: 14px 0px;\n                border-radius: 5px;\n                border: 1px solid #17a2b8;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n            } \n            .${this.uniqueSuffix} .pinnerdown::after{ \n                content: " ";\n                display: block;\n                background: #005f75;\n                width: 10px;\n                height: 10px;\n                transform: rotate(45deg);\n                z-index: 0;\n                position: absolute;\n                left: 0;\n                right: 0;\n                margin: auto;\n                top: 49px;\n                border-bottom: 1px solid #17a2b8;\n                border-right: 1px solid #17a2b8;\n            } \n            .${this.uniqueSuffix} .bank-transfer-recipient-carousel-container {\n                display: flex;\n                overflow-x: auto;\n                -webkit-overflow-scrolling: touch;\n                padding: 20px;\n            } \n            .${this.uniqueSuffix} .bank-transfer-recipient-carousel-item {\n                flex: 0 0 auto;\n                width: 80px;\n                text-align: center;\n                margin-right: 6px;\n            } \n            .${this.uniqueSuffix}  .bank-transfer-recipient-carousel-item img {\n                border-radius: 50%;\n                width: 100%;\n                height: auto;\n            } \n            .${this.uniqueSuffix} .bank-transfer-recipient-carousel-item h6 {\n                font-size: 12px;\n            } \n            .${this.uniqueSuffix} .bank-transfer-recipient-carousel-item .picture{\n                width: 60px;\n                height: 60px;\n                border-radius: 50%;\n                overflow: hidden;\n                margin: 0 auto;\n                background-repeat: no-repeat;\n                background-size: cover;\n                border: 1px solid #56c6e6;\n            }\n            .${this.uniqueSuffix} .bank-transfer-resume .picture {\n                width: 80px;\n                height: 80px;\n                border-radius: 50%;\n                overflow: hidden;\n                margin: 0 auto;\n                background-repeat: no-repeat;\n                background-size: cover;\n                border: 10px solid #017189;\n            }   \n            .${this.uniqueSuffix} .bank-transfer-resume  .picture-ark{\n                box-shadow: 0 0 22px #ffffff0f;\n                width: 150px;\n                height: 150px;\n                padding: 19px;\n                border-radius: 50%;\n                overflow: hidden;\n                margin: 0 auto;\n                background: #005f75e8;\n                border: 16px solid #329ab214;\n            }\n            .${this.uniqueSuffix} .bank-transfer-resume  .picture-ark   .edit-recipient\n            {\n                float: right;\n                background: #037189;\n                color: white;\n                border-radius: 50%;\n                margin-right: -5px;\n                display: block;\n                width: 30px;\n                height: 30px;\n                z-index: 2;\n                margin-top: -26px;\n                border: 3px solid #006075;\n                line-height: 17px; \n            }\n            .${this.uniqueSuffix} .bank-transfer-resume {\n                    display: flex;\n                    align-content: center;\n                    flex-direction: column;\n            }\n            .${this.uniqueSuffix} .bank-transfer-resume .disclaimer {\n                    width: 100%;\n                    height: 200px;\n                    overflow-y: scroll;\n                    border: 1px solid #ccc;\n                    padding: 10px;\n                    width: 100%;\n                    height: 200px;\n                    overflow-y: scroll;\n                    border: 1px solid #18a2b8;\n                    padding: 10px;\n                    text-align: left;\n                    font-size: 0.8rem !important;\n                    background: #004150 !important;\n            }\n            .${this.uniqueSuffix} .btn-tab{\n                color:white;\n                text-transform: uppercase;\n            }\n            .${this.uniqueSuffix} .btn-tab.selected{\n               color:#80e3ff;\n               font-weight: bold;\n               background: #005f75;\n            }\n            .${this.uniqueSuffix} .btn-tab.selected:after{\n                content: " ";\n                display: block;\n                background: #005f75;\n                width: 10px;\n                height: 10px;\n                transform: rotate(45deg);\n                z-index: 0;\n                position: absolute;\n                left: 0;\n                right: 0;\n                margin: auto;\n                top: 30px;\n             }\n            .${this.uniqueSuffix} .tab-content  {display:none;}\n            .${this.uniqueSuffix} .tab-content.selected    {display:block;}\n        `,
this.loadingHtml='<div class="col-12 p-2 loading-container">\n        <div class="col-8 animated-background  dark mt-3" style="height: 12px"></div>\n        <div class="mt-2 col-12 animated-background dark" style="height: 60px"></div>\n        <div class="col-3 offset-9 animated-background dark mt-1" style="height: 12px"></div>\n        <div class="col-8 animated-background dark mt-5" style="height: 12px"></div>\n        <div class="mt-2 col-12 animated-background dark" style="height: 60px"></div>\n        <div class="col-3 offset-9 animated-background dark mt-1" style="height: 12px"></div>\n        <div class="col-8 animated-background dark mt-5" style="height: 12px"></div>\n        <div class="mt-2 col-12 animated-background dark" style="height: 60px"></div>\n        <div class="col-3 offset-9 animated-background dark mt-1" style="height: 12px"></div>\n    </div>',this.overrideStyles=null,this.data={},this.i18n={},this.internalAutorization=!0,this.availableAmount=1e8,
this.onCountryChoiced=e=>{},this.onSkuChoiced=(e,t)=>{},this.onQuotation=e=>{},this.onInitialized=()=>{},this.onCompleted=()=>{},this.onError=()=>{},this.onValidation=()=>{},this.onCheckout=()=>{},this.onTermsAccepted=()=>{},e.observedAttributes.forEach((e=>{this.data[e]=this.getAttribute(e)||("skus"==e?[]:"")})),this.initialized=!1,this.observer=new MutationObserver((e=>{e.forEach((e=>{"attributes"===e.type&&(this.data[e.attributeName]=this.getAttribute(e.attributeName)||"",this.refresh())}))}))}isDev(){return document.querySelector('meta[name="app-env"]')&&"dev"==document.querySelector('meta[name="app-env"]').getAttribute("content")}static frequencyRecipients={};fetchFrequencyRecipients(t,i){return this._frequencyRecipientPromices||(this._frequencyRecipientPromices={}),this._frequencyRecipientPromices[t+i]||(this._frequencyRecipientPromices[t+i]=new Promise(((n,s)=>{
void 0!==e.frequencyRecipients[t]&&!1!==e.frequencyRecipients[t]?n(e.frequencyRecipients[t].filter((e=>e.recipientCountry==i))):$.ajax({type:"GET",url:this.createApiUrl(`wallet/frequency-recipients/${t}`),success:s=>{e.frequencyRecipients[t]=s,n(e.frequencyRecipients[t].filter((e=>e.recipientCountry==i)))},error:e=>s(e)})}))),this._frequencyRecipientPromices[t+i]}connectedCallback(){this.observer.observe(this,{attributes:!0}),this.render()}disconnectedCallback(){this.observer.disconnect()}static isomasrkandregexp=null;fetchIsoMaskAndRegexp(t){return new Promise(((i,n)=>{null!=e.isomasrkandregexp?i(e.isomasrkandregexp[t]??null):$.ajax({type:"GET",url:"/assets/isomaskandregesp.json"+(this.isDev()?"?_dc="+Math.random():""),success:n=>{e.isomasrkandregexp=n,i(e.isomasrkandregexp[t]??null)},error:e=>n(e)})}))}static rates=null;static recipientForm={};static get observedAttributes(){return["iso","flag","country","skus"]}attributeChangedCallback(e,t,i){
void 0===this.data[e]&&t!=i&&(this.data[e]=i,this.refresh())}trans(e,t){let i=void 0!==this.i18n[e]?(this.i18n[e]??e).trim():e.trim();if(void 0!==t)for(var e in t)i=i.replace(e,t[e]).trim();return i.trim()}createApiUrl(e){return`https://${this.isDev()?"dev-api":"api"}.remesita.com/rest/v1/${e}`}loadPayOutRates(){return this.loadRatesPromise||(this.loadRatesPromise=new Promise(((t,i)=>{$.ajax({type:"GET",url:this.createApiUrl("wallet/payout/rates?group=transfer,atm,delivery,cash"),success:i=>{const n={};for(var s in i)/transfer|atm|delivery|cash/.test(i[s].group)&&(n[s]=i[s]);e.rates=n,t(n),this.loadRatesPromise=!1},error:e=>i(e)})}))),this.loadRatesPromise}recipientFormPromise=null;fetchRecipientForm(t){return null!=this.recipientFormPromise||(this.recipientFormPromise=new Promise(((i,n)=>{$.ajax({type:"GET",url:this.createApiUrl(`wallet/${t}/recipient-form`),success:n=>{e.recipientForm[t]=n,i(n),setTimeout((()=>this.recipientFormPromise=null),10)},error:e=>n(e)})}))),
this.recipientFormPromise}getRatesGroupByContry(){return new Promise(((e,t)=>{this.loadPayOutRates().then((t=>{const i={};for(var n in t)t[n].countries.forEach((e=>{i[e.iso]||(i[e.iso]={...e,skus:[]}),i[e.iso].skus.push({...t[n],sku:n})}));const s={};Object.keys(i).sort().forEach((function(e){s[e]=i[e]})),e(s)})).catch((e=>t(e)))}))}refresh(){this.overrideStyles&&(this.initialized=!1),this.render()}render(){let e="";if(this.overrideStyles)for(let t in this.overrideStyles){let i=[];for(let e in this.overrideStyles[t])i.push(`${e}:${this.overrideStyles[t][e]};`);e+=`.${this.uniqueSuffix} ${t} {${i.join("")}}`}
this.initialized||(this.innerHTML=`\n                    <style>${this.defaultStyles.replace(/\n|\t|\r/gi,"").replace(/\s\s+/g," ").trim()}</style>\n                    <style>${e.replace(/\n|\t|\r/gi,"").replace(/\s\s+/g," ").trim()}</style>\n                    <main class="col-12 p-0"><div class="maindiv" style="display:grid"></div></main>\n                    <footer class="col-12 p-0"></footer>\n                    `,this.container=this.querySelector("main div.maindiv"),this.footer=this.querySelector("footer"));const t=[],i=[];this.getRatesGroupByContry().then((e=>{for(var n in this._countryChoices=e,e){
const s=e[n],a=`<div class="col-12 py-2 px-1 country-choice">\n                        <button iso="${n}" class="btn rounded px-3 btn-dark text-white text-left col-12 border" type="button">\n                            <div class="d-flex p-0 justify-content-between  align-items-center col-12">    \n                                <div class="border shadow-sm bg-dark" style="border-radius: 50%;height: 50px;width: 50px;max-width: 50px;min-width: 50px;background-image:url(/assets/img/flags/${s.flag});background-repeat: no-repeat;background-position: center;background-size: contain;"></div> \n                                <h4 class="m-0 p-0 font-mija text-white" style="flex:70% 0 0">${s.name}</h4> \n                                <i class="mdi text-info float-right mdi-chevron-right" style="font-size: 2rem;margin-right: -10px;"></i> \n                            </div>\n                        </button>\n                    </div>`;t.push(a),
"CU"!=s.iso&&"US"!=s.iso&&"MX"!=s.iso&&"ES"!=s.iso&&"BR"!=s.iso||i.push(a)}
this.container.innerHTML=`<div class="col-12 pt-2 px-0 pb-0">\n                                            <h6 class="text-white px-2">${this.trans("¿A qué país deseas enviar dinero?")}</h6>\n                                             <div class="row m-0">\n                                                <button class="btn btn-sm col-6 tab-popular btn-tab selected" tabid="${this.uniqueSuffix}popular">${this.trans("Populares")}</button>\n                                                <button class="btn btn-sm col-6 tab-all btn-tab" tabid="${this.uniqueSuffix}all">${this.trans("Todos")}</button>\n                                            </div>  \n                                        </div> \n                                        <div class="tab-content animate animated fadeIn selected pt-2" id="${this.uniqueSuffix}popular"> ${i.join("")}</div>\n                                        <div class="tab-content animate animated fadeIn pt-2" id="${this.uniqueSuffix}all"> \n                                            <div class="form-group px-1 d-flex py-1">\n                                                <i class="mdi mdi-magnify p-2" style="margin-right: -32px;z-index: 1;"></i>\n                                                <input type="text" class="form-control pl-4 text-white bg-dark no-select search" placeholder="${this.trans("Buscar país")}" />\n                                                <div class="input-group-append no-select search-cleaner p-0" style="margin-left:-48px;width:50px;display:none">\n                                                    <button class="btn btn-sm text-white " style="background:transparent !important;transform:translateY(0px) !important;"><i class="mdi mdi-close"></i></button>\n                                                </div> \n                                            </div> \n                                         ${t.join("")}\n                                     </div>\n                            \n                            `,
this.container.querySelectorAll(".btn-tab").forEach((e=>{e.addEventListener("click",(t=>{this.container.querySelectorAll(".btn-tab").forEach((e=>e.classList.remove("selected"))),e.classList.add("selected"),this.container.querySelectorAll(".tab-content").forEach((e=>e.classList.remove("selected"))),this.container.querySelector(`#${e.getAttribute("tabid")}`).classList.add("selected")}))})),this.container.querySelector(".search").addEventListener("input",(e=>{const t=e.target.value.toLowerCase();this.container.querySelectorAll(".col-12[iso]").forEach((e=>{e.parentElement.style.display=e.getAttribute("iso").toLowerCase().includes(t)||e.querySelector("h4").innerText.toLowerCase().includes(t)?"block":"none"})),this.container.querySelector(".search-cleaner").style.display=t.length>0?"block":"none"})),this.container.querySelector(".search-cleaner button").addEventListener("click",(e=>{this.container.querySelector(".search").value="",
this.container.querySelector(".search-cleaner button").style.display="none",this.container.querySelectorAll(".col-12[iso]").forEach((e=>e.parentElement.style.display="block"))})),this.querySelectorAll("button[iso]").forEach((e=>e.addEventListener("click",(e=>{let t=e.target;for(;"BUTTON"!=t.tagName.toUpperCase();)t=t.parentElement;this.choiceCountry(this._countryChoices[t.getAttribute("iso")])})))),this.initialized=!0,this.overrideStyles=!1,this.dispatchEvent(new CustomEvent("initialized")),this.onInitialized(),this.shortcut&&this.choiceCountry(this._countryChoices[this.shortcut.iso])})).catch((e=>{}))}choiceCountry(e){this.fetchIsoMaskAndRegexp(e.iso);const t=(e.skus??[]).filter((e=>e.enabled&&(!this.shortcut||e.sku==this.shortcut.sku))).sort(((e,t)=>e.group!==t.group?e.group.localeCompare(t.group):e.label.localeCompare(t.label))),i=this.shortcut?[]:(e.skus??[]).filter((e=>!e.enabled))
;this.container.innerHTML=`\n             <div class="pinnerdown">\n                    <h5 class="font-mija m-0 p-0 col-12">\n                    <img src="/assets/img/flags/${e.flag}" style="width:26px;height:26px;margin-top:-2px" class="rounded-pill  border"> ${this.trans("Envía dinero a _COUNTRY_",{_COUNTRY_:e.name})}</h5>\n             </div>\n             <h6 class="py-2 m-0">${this.trans("Selecciona el servicio")}</h6>                            \n             <div class="col-12">\n                <div class="row">\n                ${this.shortcut?this.loadingHtml:""}\n                ${t.map((e=>{const t=e.percent+e.fix<=0,i=e.percent<0||e.fix<0
;return`<div class="col-12 py-2 px-1" ${this.shortcut?'style="display:none"':""}>\n                        <button class="btn rounded px-3 btn-dark text-white text-left col-12 border skuchoice-btn" sku="${e.sku}" denominations="${e.denominations?"y":"n"}" type="button">\n                            <div class="d-flex p-0 justify-content-between  align-items-center col-12">    \n                                <div class="border shadow-sm bg-white" style="border-radius:15px;height: 50px;width: 50px;max-width: 50px;min-width: 50px;background-image:url(${e.image});background-repeat: no-repeat;background-position: center;background-size: contain;"></div> \n                            <div style="flex:70% 0 0" class="text-left pl-1">\n                                <h5 class="m-0 p-0 font-mija text-white" >${e.label}</h5> \n                                <small class="m-0 p-0 font-mija text-white">\n                                    <span class="badge badge-dark badge-pill">\n                                    ${"self"!=e.quoter?"":t?this.trans("Gratis"):this.trans("Tarifa:")}  ${"self"!=e.quoter?this.trans("Cotización dinámica"):e.percent>0?`${e.percent}%`:""} ${"self"!=e.quoter?"":e.fix>0?`+${e.fix} SRM`:""}\n                                    ${i?`| <i class="mdi mdi-gift"></i> ${this.trans("Descuento:")} ${e.percent<0?e.percent+"%":e.fix+"SRM"} `:""}\n                                    </span> \n                                </small>   \n                            </div>\n                                <i class="mdi text-info float-right mdi-chevron-right chevron-indicator" style="font-size: 2rem;margin-right: -10px;"></i> \n                            </div>\n                        </button> \n                </div>`
})).join("")}\n            ${i.map((e=>(e.percent,
e.fix,e.percent<0||e.fix,`<div class="col-12 py-2 px-1 sku-disabled" style="display:none">\n                            <button disabled class="btn rounded px-3 btn-dark text-white text-left col-12 border skuchoice-btn" sku="${e.sku}" denominations="${e.denominations?"y":"n"}" type="button">\n                                <div class="d-flex p-0 justify-content-between  align-items-center col-12">    \n                                    <div class="border shadow-sm bg-white" style="border-radius:15px;height: 50px;width: 50px;max-width: 50px;min-width: 50px;background-image:url(${e.image});background-repeat: no-repeat;background-position: center;background-size: contain;"></div> \n                                <div style="flex:70% 0 0" class="text-left pl-1">\n                                    <h5 class="m-0 p-0 font-mija text-white" >${e.label}</h5>  \n                                    <small class="m-0 p-0 font-mija text-white">\n                                        <span class="badge badge-secondary badge-pill">\n                                            <i class="mdi mdi-lock-outline"></i> ${this.trans("No disponible temporalmente")}\n                                        </span> \n                                    </small>  \n                                    \n                                </div>\n                                    <i class="mdi text-info float-right mdi-chevron-right chevron-indicator" style="font-size: 2rem;margin-right: -10px;"></i> \n                                </div>\n                            </button> \n                    </div>`))).join("")}\n          ${i.length?`<div class="col-12 py-2 px-1">\n                            <button  class="btn rounded px-3 btn-dark text-white text-left col-12 border skudisable-toggle-btn" sku="${s.sku}" denominations="${s.denominations?"y":"n"}" type="button">\n                                <div class="d-flex p-0 justify-content-between  align-items-center col-12">    \n                                    <div class="border shadow-sm bg-white" style="border-radius:15px;height: 50px;width: 50px;max-width: 50px;min-width: 50px;background-image:url(/assets/img/clock-icon.png);background-repeat: no-repeat;background-position: center;background-size: contain;"></div> \n                                <div style="flex:70% 0 0" class="text-left pl-1">\n                                    <h5 class="m-0 p-0 font-mija text-white" >${this.trans("Proximamente")}...</h5>  \n                                    <small class="m-0 p-0 font-mija text-white">\n                                        <span class="badge badge-secondary badge-pill">\n                                            <i class="mdi mdi-lock-outline"></i> ${this.trans("Otros servicios")}\n                                        </span> \n                                    </small>  \n                                    \n                                </div>\n                                    <i class="mdi text-info float-right mdi-chevron-right chevron-indicator" style="font-size: 2rem;margin-right: -10px;"></i> \n                                </div>\n                            </button> \n                    </div>`:""}\n                </div>\n            </div>`,
this.footer.innerHTML="",this.querySelector(".skudisable-toggle-btn")&&this.querySelector(".skudisable-toggle-btn").addEventListener("click",(e=>{this.querySelector(".skudisable-toggle-btn").style.display="none",this.querySelectorAll(".sku-disabled").forEach((e=>e.style.display="block"))})),this.querySelectorAll(".skuchoice-btn").forEach((t=>{t.addEventListener("click",(t=>{let i=t.target;for(;"BUTTON"!=i.tagName.toUpperCase();)i=i.parentElement;const n=e.skus.find((e=>e.sku==i.getAttribute("sku")));"y"==i.getAttribute("denominations")?(i.querySelector(".chevron-indicator").classList.remove("mdi-chevron-right"),i.querySelector(".chevron-indicator").classList.add("mdi-spin","mdi-loading"),this.fetchDenominations(n.sku).then((t=>{n.denominations=t,this.choiceSku(n,e)})).catch((t=>{n.denominations=null,this.choiceSku(n,e)}))):this.choiceSku(n,e)}))})),this.dispatchEvent(new CustomEvent("countryCoiced",{detail:e})),this.onCountryChoiced(e),
this.shortcut&&this.querySelector(`button[sku="${this.shortcut.sku}"]`).click()}fetchDenominations(e){return this._denominationPromise||(this._denominationPromise={}),this._denominationPromise[e]||(this._denominationPromise[e]=new Promise(((t,i)=>{this._denominations||(this._denominations={}),this._denominations[e]?t(this._denominations[e]):$.ajax({type:"GET",url:this.createApiUrl(`wallet/payout/${e}/denominations`),success:i=>{this._denominations[e]=i,t(i)},error:e=>i(e)})}))),this._denominationPromise[e]}getQuotationStyles(){return{".quotation-details-container":{"margin-bottom":"10px"},".quotation-field-container label":{"padding-bottom":"0px"},".quotation-field-container input":{"font-weight":"bold","font-size":"1.4rem",color:"#fff"},".quotation-field-container span":{"font-family":"Nunito",color:"#fff"},".quotation-field-container label":{color:"#fff"},".quotation-field-container .quotation-input":{"background-color":"#2b5159"},".quotation-details-container":{
"background-color":"#157489",color:"#fff","margin-bottom":"10px"},".quotation-details-container .view-more":{color:"#d1d1d1"},".quotation-details-container .view-less":{color:"#d1d1d1"},".quotation-field-container label":{color:"#fff"},".quotation-field-container select":{"font-weight":"bold","font-size":"1.4rem",color:"#fff"},".quotation-field-container.focused label":{color:"#8beaff"},".quotation-field-container.focused .quotation-input":{"background-color":"#2b5159"},".quotation-details-container ul ul":{color:"#c7e7f4"},".quotation-details-container hr":{"border-bottom":"1px dashed #92adb5"},".error-caption":{color:"#ff9c9c"},".loading-border::after":{"background-color":" #2b5159 !important"}}}choiceSku(e,t){
this.container.innerHTML=`\n                                <div class="pinnerdown"> \n                                    <h5 class="font-mija m-0 p-0 col-12">\n                                      ${this.shortcut?`<img  src="${this.shortcut.icon}" style="width:26px;height:26px;margin-top:-2px" class="rounded-pill border bg-white"> ${this.shortcut.caption}`:`<img src="/assets/img/flags/${t.flag}" style="width:26px;height:26px;margin-top:-2px" class="rounded-pill  border"> ${e.label}`}\n                                    </h5>\n                                </div>\n                             <dynamic-quotation id="bank-transfer-quotation" class="p-1"></dynamic-quotation>\n                             <div class="col-12 alert alert-danger insuficiente-amount" style="display:none">\n                                ${this.trans("No tienes suficiente balance para realizar esta operación.")}\n                             </div>\n                            `,
this.footer.innerHTML=`<div class="row mx-0 px-0 py-2 col-12">\n                    <div class="col-12 px-0 py-1">\n                    <button type="button" disabled  class="btn text-white btn-lg col-12 next-mf-btn" >\n                        ${this.trans("SIGUIENTE")} <i class="mdi mdi-arrow-right-bold-circle-outline"></i> \n                    </button>\n                </div>\n            </div>`;const i={"Enter _CURRENCY_":this.trans("Introduce los _CURRENCY_"),"Source amount on _CURRENCY_":this.trans("Lo que se debitará de tu Wallet."),"Target amount on _CURRENCY_":this.trans("Lo que recibe el Destinatario."),"Exchange Rate _RATE_":this.trans("Tipo de cambio _RATE_"),"Percentage Fee _RATE_":this.trans("Comisión Remesita _RATE_"),"Percentage Fee":this.trans("Comisión Remesita"),"Fixed Fee":this.trans("Tarifa de operación"),"Conversion before taxes":this.trans("Conversión antes de impuestos"),"Conversion after taxes":this.trans("Conversión después de impuestos"),
"Value must be between _MIN_ and _MAX_ _CURRENCY_":this.trans("El valor debe estar entre _MIN_ y _MAX_ _CURRENCY_"),"Total commissions":this.trans("Costo operacional"),"View more":"Ver detalle completo","View less":"Ocultar detalle","Total conversion":"Cantidad convertida","Recipient amount":"Cantidad a recibir","Discount applied":"Descuento aplicado","The amount exceed the established limits":"Los datos introducidos no son válidos."},n=this.footer.querySelector("button.next-mf-btn");e.currencies.length>1?e.targetCurrency=e.currencies.find((t=>e.sku.indexOf(`_${t.symbol}_`)>-1))??e.currencies[0]:e.targetCurrency=e.currencies[0],$("#bank-transfer-quotation").setupDQ({showFlag:!1,exchangeRate:e.denominations&&e.denominations.length?e.denominations[0]?.exchangeRate:e.targetCurrency.exchangeRate,targetChoice:!(!e.denominations||!e.denominations.length)&&e.denominations,fixedFees:{"Fixed Fee":e.fix??0},percentageFees:{"Percentage Fee":(e.percent??0)/100},minSource:Math.max(1,e.minAmount),
maxSource:e.denominations&&e.denominations.length?e.denominations[0].amount:1e5,minTarget:e.denominations&&e.denominations.length?e.denominations[0].value:Math.max(1,e.minAmount),maxTarget:e.denominations&&e.denominations.length?e.denominations[e.denominations.length-1].value:1e4,sourceCurrency:"SRM",targetCurrency:e.targetCurrency.symbol,target:e.denominations&&e.denominations.length?e.denominations[0].value:null,source:e.denominations&&e.denominations.length?null:parseInt(Math.min(100,this.availableAmount).toFixed(0)),backendQuotationEndpoint:e.quotationEndpoint??!1,feeApplyTo:"source",components:e.denominations&&e.denominations.length?["target","source","details"]:["source","details","target"],i18n:i,detailsCls:"animate fadeIn",styles:this.getQuotationStyles(),onThinking:()=>{this._stopNext=!0,n&&n.removeAttribute("disabled")},onStopThinking:()=>{this._stopNext=!1,n&&n.setAttribute("disabled",!0)},onValidation:i=>{this.data.quotation={sku:e.sku,label:e.label,country:t,
sourceValue:i.sourceValue,targetValue:i.targetValue,currency:e.targetCurrency.symbol,totalFees:i.totalFees,exchangeRate:i.exchnageRate},n&&(i.success&&i.sourceValue<=this.availableAmount?n.removeAttribute("disabled"):n.setAttribute("disabled",!0)),this.container.querySelector(".insuficiente-amount")&&(this.container.querySelector(".insuficiente-amount").style.display=i.sourceValue>this.availableAmount?"block":"none")},onInitialized:()=>{this.fetchFrequencyRecipients(e.sku,t.iso).then((()=>{}))}}),n.addEventListener("click",(i=>{this._stopNext||(setTimeout((()=>{this.onQuotation(this.data.quotation),this.dispatchEvent(new CustomEvent("quotation",{detail:this.data.quotation}))}),100),this.renderFrequencyRecipients(e.sku,t.iso))})),this.dispatchEvent(new CustomEvent("skuCoiced",{detail:e})),this.onSkuChoiced(e)}_header(){
return`<div class="pinnerdown">\n                <h6 class="font-mija m-0 p-0 col-12">\n                   ${this.shortcut?`<img  src="${this.shortcut.icon}" style="width:26px;height:26px;margin-top:-2px" class="rounded-pill bg-white border"> ${this.shortcut.caption}`:`<img  src="/assets/img/flags/${this.data.quotation.country.flag}" style="width:26px;height:26px;margin-top:-2px" class="rounded-pill bg-white  border"> ${this.data.quotation.label}`} \n                </h6>\n                </div>\n                <div class="col-12 text-center my-3"><span class="animate bounceIn badge badge-pill badge-info">${this.data.quotation.sourceValue.toFixed(2)} SRM <i class="mdi mdi-transfer-right"></i> ${this.data.quotation.targetValue.toFixed(2)} ${this.data.quotation.currency}</span></div>\n                 `}renderFrequencyRecipients(e,t){const i=`${this._header()}\n                        <h5 class="text-white px-3 mt-2 ">${this.trans("¿Quién será el destinatario?")}</h6>   `
;this.container.innerHTML=`${i}${this.loadingHtml}`,this.fetchFrequencyRecipients(e,t).then((t=>{
t.length?(this.container.innerHTML=`${i} \n                                         <div class="bank-transfer-recipient-carousel-container  col-12 px-0 py-1" style="${t.length?"":"display:none"}"> \n                                         <div  class="bank-transfer-recipient-add bank-transfer-recipient-carousel-item text-center" style="cursor:pointer">\n                                            <div class="picture m-auto text-white py-1" style="background-color:#073641"><i class="mdi mdi-account-multiple-plus" style="font-size: 2rem;"></i></div>\n                                            <h6 class="text-white pt-2">${this.trans("Nuevo Destinatario")}</h6>\n                                        </div>\n                                        ${t.map((e=>`<div \n                                            data="${btoa(JSON.stringify(e))}" \n                                            class="bank-transfer-recipient-choice bank-transfer-recipient-carousel-item text-center" style="cursor:pointer">\n                                            <div class="picture m-auto" style="background-image:url(${e.picture})"></div>\n                                            <h6 class="text-white pt-2">${e.recipientName}</h6>\n                                        </div>`)).join("")}\n                                     </div>`,
this.container.querySelector(".bank-transfer-recipient-add").addEventListener("click",(t=>this.renderRecipientForm(e))),this.container.querySelectorAll(".bank-transfer-recipient-choice").forEach((t=>{t.addEventListener("click",(i=>this.renderRecipientForm(e,JSON.parse(atob(t.getAttribute("data"))),!0)))})),this.footer.innerHTML=""):this.renderRecipientForm(e)})).catch((t=>this.renderRecipientForm(e))),this.fetchRecipientForm(e).then((e=>{}))}renderRecipientForm(t,i,n){this.fetchRecipientForm(t).then((t=>{if(this.data.recipientForm=t,t&&0!=t.length||(t=[]),t.find((e=>"recipientAccount"==e.mapto))||t.find((e=>"recipientAccount"==e.slug))||("BIZUM_TRANSFER"===this.data.quotation.sku?t.push({mapto:"recipientAccount",label:this.trans("Número de celular Bizum"),type:"text",slug:"recipientAccount",requirement:"required",regexerr:this.trans("Escribe un celular válido. <i>Ex: +34 765 432 100</i>"),mask:"+34 000 000 000",regexp:"\\+34(\\s?|-)?\\d{3}(\\s?|-)?\\d{3}(\\s?|-)?\\d{3}"}):t.push({
mapto:"recipientAccount",label:this.trans("Número de cuenta"),type:"text",requirement:"required",slug:"recipientAccount",regexerr:/IBAN_TRANSFER/.test(this.data.quotation.sku)?this.trans("Escribe un IBAN válido. <i>Ex: _ISO_00 0000 0000 00</i>",{_ISO_:this.data.quotation.country.iso}):this.trans("Esta cuenta no parece ser válida"),regexp:/IBAN_TRANSFER/.test(this.data.quotation.sku)?"^_ISO_[0-9]{2}[a-zA-Z0-9]{1,30}$":/CARD_DEPOSIT/.test(this.data.quotation.sku)?"^92(00|01|02|09|50|13|04|05|06|24|27|25|26|35|40|45|28)\\d{4}\\d{4}\\d{4}$":"^[0-9]{8,}$",mask:/IBAN_TRANSFER/.test(this.data.quotation.sku)?"SS00 0000 0000 0000 0000 000000000":/CARD_DEPOSIT/.test(this.data.quotation.sku)?"0000 0000 0000 0000":"000000000000000000000000"})),t.find((e=>"recipientName"==e.mapto))||t.push({label:this.trans("Nombre del destinatario"),help:this.trans("Tal como aparece en su documento de identidad. No aceptamos nombres comerciales."),type:"text",mapto:"recipientName",slug:"recipientName",
requirement:"required",regexp:"^[a-zA-Z ]+$"}),!t.find((e=>"recipientPhone"==e.mapto))&&"BIZUM_TRANSFER"!=this.data.quotation.sku){if(e.isomasrkandregexp[this.data.quotation.country.iso])var s=e.isomasrkandregexp[this.data.quotation.country.iso].mask,a=(e.isomasrkandregexp[this.data.quotation.country.iso].regexp??"").replace(/_bs_/g,"\\");else switch(s="+00000000000000",a=null,this.data.quotation.country.iso){case"CU":s="+5350000000";break;case"US":case"CA":s="+10000000000";break;case"MX":s="+520000000000";break;case"ES":s="+340000000000"}t.push({mapto:"recipientPhone",label:this.trans("Número de celular"),type:"text",slug:"recipientPhone",requirement:"required",mask:s,regexp:(a??"").replace(/_bs_/g,"\\")})}this.data.recipientForm=t;const r=t.map((e=>{if(e.value=null,i&&null!=(i[e.slug]??null)&&(e.value=i[e.slug]),this.shortcut&&this.shortcut.recipientData){let t=this.shortcut?.recipientData[e.slug]??this.shortcut?.recipientData[e.mapto]??null;null!=t&&(e.value=t,e.type="hidden")}
return e}))
;this.container.innerHTML=` \n                                    ${this._header()}  \n                                    <div class="col-12 pt-2">\n                                        <div class="row px-1">\n                        ${r.map((e=>`<div class="remex-field-container" ${"hidden"==e.type?'style="display:none"':""}>\n                                                <label class="no-select m-0" id="${this.uniqueSuffix+e.slug}label" for="${this.uniqueSuffix+e.slug}">${e.label}</label>\n                                                <div  class="field-input no-select ${"select"==e.type||"select_ajax"==e.type?"p-0":""}">\n                ${"select"==e.type||"select_ajax"==e.type?`<remex-select dark="true"\n                            ${"required"==(e.requirement??"required")?"required":""}  \n                            id="${this.uniqueSuffix+e.slug}"\n                            placeholder="${e.placeholder??""}"> \n                        </remex-select>`:"textarea"==e.type?`<textarea class="no-select" onblur="this.parentElement.parentElement.classList.remove('focused')"\n                                 onfocus="document.querySelector('.focused')?.classList?.remove('focused');this.parentElement.parentElement.classList.add('focused');document.querySelector('#${this.uniqueSuffix+e.slug}caption').style.display='block';document.querySelector('#${this.uniqueSuffix+e.slug}error').innerHTML = '';" \n                                 autocomplete="off"\n                                ${"required"==(e.requirement??"required")?"required":""} \n                                id="${this.uniqueSuffix+e.slug}" \n                                placeholder="${e.placeholder??""}">${e.value??""}</textarea>`:`<input class="no-select text-uppercase" \n                                 onblur="this.parentElement.parentElement.classList.remove('focused')"\n                                 onfocus="document.querySelector('.focused')?.classList?.remove('focused');this.parentElement.parentElement.classList.add('focused');document.querySelector('#${this.uniqueSuffix+e.slug}caption').style.display='block';document.querySelector('#${this.uniqueSuffix+e.slug}error').innerHTML = '';" \n                                 autocomplete="off"\n                                 value="${e.value??""}"\n                                type="${e.type}"  \n                                ${(e.regexp??"").length?` regexp="${e.regexp.replace(/_bs_/g,"\\").replace("_ISO_",this.data.quotation.country.iso)}" `:' regexp=".*" '}\n                                ${(e.mask??"").length?` data-mask="${e.mask}" `:""}\n                                ${"required"==(e.requirement??"required")?"required":""} \n                                id="${this.uniqueSuffix+e.slug}" \n                                placeholder="${e.placeholder??""}">`} \n                                </div>\n                                <div class="no-select input-caption pt-1"  id="${this.uniqueSuffix+e.slug}caption" >${e.help??("select"==e.type||"select_ajax"==e.type?this.trans("Escoge una denominación"):"")}</div> \n                                <div class="no-select error-caption pt-1"  id="${this.uniqueSuffix+e.slug}error" ></div> \n                            </div>`)).join("")}\n                        </div>\n                    </div> `,
this.footer.innerHTML=`<div class="row mx-0 px-0 py-2 col-12 animated bounceIn">\n                                 <div class="col-12 px-0 py-1">\n                                    <button type="button" ${i?"":"disabled"} class="btn text-white btn-next-resume btn-lg col-12" >\n                                        ${this.trans("SIGUIENTE")} <i class="mdi mdi-arrow-right-bold-circle-outline"></i> \n                                    </button>\n                                </div>\n                            </div>`,this.validateForm(!!i&&n&&!this.shortcut),t.forEach((e=>{const t=this.container.querySelector(`#${this.uniqueSuffix+e.slug}`);if(t){try{"text"==e.type&&null!=(e.mask??null)&&$(`#${this.uniqueSuffix+e.slug}`).mask(e.mask)}catch(e){}const s=()=>{this._validationTik&&clearTimeout(this._validationTik),this._validationTik=setTimeout((()=>{this.validateForm(!!i&&n&&!this.shortcut),this._validationTik=!1}),500)}
;if(["input","change","select","keyup"].forEach((e=>t.addEventListener(e,(e=>s())))),"select"==e.type&&(this.querySelector(`#${this.uniqueSuffix+e.slug}`).items=e.choices??[]),"select_ajax"==e.type){const t=e.placeholder??"";this.querySelector(`#${this.uniqueSuffix+e.slug}`).placeholder="Loading...",$.ajax({type:"GET",url:e.url,success:n=>{if(this.querySelector(`#${this.uniqueSuffix+e.slug}`).placeholder=t??"",this.querySelector(`#${this.uniqueSuffix+e.slug}`).items=n,n.forEach((t=>{t.childs&&(this.cascadeChoices||(this.cascadeChoices={}),this.cascadeChoices[`${e.slug}${t.value}`]=t.childs)})),e.cascade&&this.querySelector(`#${this.uniqueSuffix+e.cascade}`)&&(this.querySelector(`#${this.uniqueSuffix+e.slug}`).addEventListener("change",(t=>{let n=this.cascadeChoices&&t.detail?.value&&this.cascadeChoices[`${e.slug}${t?.detail?.value??""}`]?this.cascadeChoices[`${e.slug}${t?.detail?.value??""}`]??[]:[],s=this.querySelector(`#${this.uniqueSuffix+e.cascade}`);s&&!i[e.cascade]&&(s.items=n,
n.length&&!i[e.cascade]&&(s.value=n[0].value)),i[e.cascade]=!1})),setTimeout((()=>{const t=new Event("change",{bubbles:!0,cancelable:!0});this.querySelector(`#${this.uniqueSuffix+e.slug}`).dispatchEvent(t)}),100)),i[e.slug]&&(this.querySelector(`#${this.uniqueSuffix+e.slug}`).value=i[e.slug],e.cascade&&this.cascadeChoices[`${e.slug}${i[e.slug]}`])){let t=this.querySelector(`#${this.uniqueSuffix+e.cascade}`);if(t){let n=this.cascadeChoices[`${e.slug}${i[e.slug]}`]??[];t.items=n,i[e.cascade]&&n.find((t=>t.value==i[e.cascade]))&&(t.value=i[e.cascade])}}}})}}})),this.footer.querySelector("button.btn-next-resume")&&this.footer.querySelector("button.btn-next-resume").addEventListener("click",(e=>{this.validateForm(!1),this.data.isValid&&this.checkout()}))})).catch((e=>{this.onError(),
this.container.innerHTML=`<div class="col-12 p-3">\n                                    <div class="col-12 text-center  text-white">\n                                        <div class="col-12 text-center">\n                                            <div class="m-auto col-12 text-center" style="min-height:70px;width: 100%; max-width:200px;background-image:url(/assets/img/gif/circle-error.gif);background-size: contain;background-repeat: no-repeat;background-position: center;"></div>\n                                        </div>\n                                        <h6>Ups!</h6>\n                                        <p>${this.trans("Ha ocurrido un error cargando el fomulario")}</p>\n                                    </div>\n                                </div> \n                              `,this.footer.innerHTML=""}))}checkout(){
const e=this.data.recipientData.find((e=>/recipientIn(s)?titution/.test(e.slug)||/recipientIn(s)?titution/.test(e.mapto))),t=this.data.recipientData.find((e=>"recipientAccount"==e.slug||"recipientAccount"==e.mapto)),i=this.data.recipientData.find((e=>"switch"==e.slug||"routingNumber"==e.slug||"recipientAccountRouteOrBic"==e.mapto))
;this.container.innerHTML=`${this._header()}\n                    <div class="col-12 text-center bank-transfer-resume pt-2 px-1">\n                        <div class="m-auto picture-ark animate animated bounceIn">\n                        <div class="picture m-auto animate animated bounceIn" style="background-image:url(/rest/v1/profile-picture/${this.data.recipientData.find((e=>"recipientPhone"==e.slug||"recipientPhone"==e.mapto||"recipientAccount"==e.mapto)).value.replace(/\s|\(|\)|-/gi,"").trim()})"></div>\n                        <span class="p-1 edit-recipient animate animated bounceIn"><i class="mdi mdi-pencil"></i></span>\n                        </div>\n                        <h4 class="font-mija pt-2">${this.data.recipientData.find((e=>"recipientName"==e.slug||"recipientName"==e.mapto)).value}</h5>\n                        <h4><i class="mdi mdi-bank"></i>  ${e?`${e.value} <i class="mdi mdi-transfer-right"></i>`:""} ${i?`${i.value}/`:""}${t.value}</h4>\n                        ${this.data.recipientData.filter((e=>!/recipientName|recipientPhone|recipientEmail|recipientAccount/.test(e.mapto))).length?`<small class="badge badge-pill badge-dark">${this.data.recipientData.filter((e=>!/recipientName|recipientPhone|recipientEmail|recipientAccount/.test(e.mapto))).map((e=>e.valueShow??e.value)).join(" / ")}</small>`:""}\n                        <div class="disclaimer mt-4 p-2 rounded" onlyread>\n                                <h5>${this.trans("Por favor, lee cuidadosamente los siguientes términos y condiciones:")}</h5> \n                                <ul class="pl-4">\n                                    <li>${this.trans("Entiendo que si el beneficiario o el remitente aparecen en <b>listas negras</b>, la operación podría ser cancelada y reembolsada, y <b>mi cuenta de Remesita podría estar en riesgo de ser cerrada.</b>")}</li>\n                                    <li>${this.trans("Entiendo que soy responsable de ingresar correctamente los datos del beneficiario y que, en caso de error, acepto que puedo perder los fondos.")}</li> \n                                    <li>${this.trans("Entiendo que los fondos serán debitados de mi wallet de forma inmediata, pero la operación en el destino final dependerá de los tiempos de los corresponsales, pudiendo tardar entre 30 segundos y 72 horas.")}</li> \n                                    <li>${this.trans("Entiendo que solo aplican devoluciones para las operaciones rechazadas por nuestro proveedor, y no para aquellas que no llegan a su destino por problemas internos del país o errores en los datos ingresados.")}</li>\n                                    <li>${this.trans("Declaro que he revisado mi cotización y entiendo que se debitarán de mi wallet en total _DBT_ SRM.",{
_DBT_:this.data.quotation.sourceValue.toFixed(2)
})}</li>\n                                    <li>${this.trans("Declaro bajo juramento y bajo pena de perjurio que el beneficiario <b>NO ES</b> una persona políticamente expuesta <b>(PEP)</b>-")}</li>\n                                    <li>${this.trans("Declaro bajo juramento y bajo pena de perjurio que estos fondos <b>NO SON</b> para financiar temas migratorios-")}</li>\n                                    <li>${this.trans("Declaro bajo juramento y bajo pena de perjurio que estos fondos <b>NO SON</b> para financiar actividades políticas-")}</li>\n                                    <li>${this.trans("Libero a Remesita de cualquier responsabilidad por el bloqueo o la aplicación de medidas de cumplimiento sobre la cuenta del beneficiario.")}</li>\n                                    <li>${this.trans("Libero a Remesita de toda responsabilidad por cualquier tarifa que el banco o entidad receptora aplique a la cuenta del beneficiario por la recepción de los fondos.")}</li>\n                                </ul>\n                                <p><i>${this.trans("Esta operación será procesada por nuestro sponsor, <b>Lemargo Inc.</b>, una compañía registrada en Ontario, Canadá, bajo el número 1078188 y MSB Fintrac M08130624. Remesita solo instruye y monitorea el estatus, sin custodiar los fondos en el destino final.")}</i></p>\n                        </div>\n                        <div class="rcol-12 px-0 py-1 text-left disclaimer-reed-force-message">\n                            <i class="mdi mdi-information">${this.trans("Lée hasta el final para que puedas autorizar la operación.")}</i>\n                        </div>\n                    </div>\n                `,
this.footer.innerHTML=this.internalAutorization?`<div class="row mx-0 px-0 py-2 col-12 animated bounceIn">\n                                <div class="col-12 px-0 py-1">\n                                    <button type="button" disabled  class="btn text-white btn-authorization btn-lg col-12" >\n                                        ${this.trans("SIGUIENTE")} <i class="mdi mdi-arrow-right-bold-circle-outline"></i> \n                                    </button>\n                                </div>\n                            </div>`:"",this.container.querySelector(".disclaimer").addEventListener("scroll",(e=>{const t=e.target.scrollHeight;e.target.scrollTop+e.target.clientHeight>=t-30&&(this.internalAutorization&&this.container.querySelector(".btn-authorization").removeAttribute("disabled"),
this.container.querySelector(".disclaimer-reed-force-message").innerHTML=`<i class="mdi mdi-check-circle text-info animate animated bounceIn"></i> ${this.trans("Ahora aque has leído los términos y condiciones, ahora puedes autorizar la operación.")}`,this.onTermsAccepted())}));const n={};this.data.recipientForm.forEach((e=>n[e.slug]=e.value??null)),this.container.querySelector(".edit-recipient").addEventListener("click",(e=>this.renderRecipientForm(this.data.quotation.sku,n,!1))),this.onCheckout()}authorize(){this._stopNext=!1;const t=e=>{
this.container.innerHTML=`<div class="col-12 p-3">\n                        <div class="col-12 text-center  text-white">\n                            <div class="col-12 text-center">\n                                <div class="m-auto col-12 text-center" style="min-height:70px;width: 100%; max-width:200px;background-image:url(/assets/img/gif/circle-error.gif);background-size: contain;background-repeat: no-repeat;background-position: center;"></div>\n                            </div>\n                            <h6>Ups!</h6>\n                            <p>${this.trans(e)}</p>\n                        </div>\n                    </div> `,this.footer.innerHTML="",this.onError(e)};this.data.isValid?(this.container.innerHTML=this.loadingHtml,this.footer.innerHTML="",$.ajax({type:"PUT",headers:{"response-include-errors":!0,"Content-Type":"application/json"},url:this.createApiUrl(`wallet/payout/${this.data.quotation.sku}`),data:JSON.stringify({
recipientAmount:this.data.quotation.targetValue,recipientCurrency:this.data.quotation.currency,recipientCurrency:this.data.quotation.exchnageRate,recipientCountry:this.data.quotation.country.iso,exchangeRate:this.data.quotation.exchangeRate,recipientData:this.data.recipientData,shortcut:!!this.shortcut}),success:i=>{i.success?(e.frequencyRecipients[this.data.quotation.sku]=!1,
this.container.innerHTML=`<div class="m-auto col-12 text-center" style="min-height:70px;width: 100%; max-width:200px;background-image:url(/assets/img/gif/payment-success.gif);background-size: contain;background-repeat: no-repeat;background-position: center;"></div>\n                                        <div class="m-auto py-3 col-12 px-5 text-center text-white">\n                                            ${this.trans("La transferencia fue instruida correctamente.")} ${this.trans("Recibirás una notificación cuando sea completada.")}\n                                            <br><a class="bdge badge-info badge-pill my-2" target="_blank" href="/status/${i.reference??"-"}?redirect=no&opinion=no">${i.reference??"----"}</a>\n                                        </div>`,this.footer.innerHTML="",this.onCompleted(i)):t(i.error)},error:e=>{t(this.trans("Ha ocurrido un error al procesar la transacción"))}})):t(this.trans("Los datos del destinatario no son válidos"))}validateForm(e){
if(this._stopNext)return{valid:!1};let t=!0,i=[];this.data.recipientData=this.data.recipientForm.map((e=>{const n=this.container.querySelector(`#${this.uniqueSuffix+e.slug}`),s=this.container.querySelector(`#${this.uniqueSuffix+e.slug}caption`),a=this.container.querySelector(`#${this.uniqueSuffix+e.slug}error`);if(!n)return{slug:e.slug,mapto:e.mapto,value:e.value,valid:!0};if(e.value="switch"==e.type?n.checked??!1:n?.value??"",e.valid=!0,s&&(s.style.display="block"),a&&(a.innerHTML=""),"required"==e.requirement&&("switch"==e.type&&!e.value||"switch"!=e.type&&!e.value.length)&&(e.valid=!1,e.valid||i.push(this.trans("El campo *_LABEL_* es requerido",{_LABEL_:e.label}))),"select"!=e.type&&"select_ajax"!=e.type||!s||(s.innerHTML=n&&null!=(n?.selectedItem??null)?n.selectedItem?.attributes.caption??e.help??"":"",
this.querySelector(`#${this.uniqueSuffix+e.slug}`)&&"function"==typeof this.querySelector(`#${this.uniqueSuffix+e.slug}`).checkValidity&&(e.valid=this.querySelector(`#${this.uniqueSuffix+e.slug}`).checkValidity(),e.valid||i.push((e.regexerr??"").length?e.regexerr:this.trans("Debe seleccionar un elemento de la lista")))),"switch"!=e.type&&"select"!=e.type&&"select_ajax"!=e.type&&e.valid&&void 0!==e.regexp&&(e.regexp??"").length){const t=new RegExp(e.regexp.replace("_ISO_",this.data.quotation.country.iso).replace(/_bs_/g,"\\"),"i"),n="recipientAccount"==e.mapto?e.value.replace(/\s/g,"").trim():e.value.trim();e.valid=t.test(n),e.valid||i.push((e.regexerr??"").length?e.regexerr:this.trans("Este valor no parece ser válido"))}!e.valid&&this.querySelector(`#${this.uniqueSuffix+e.slug}`)&&(a&&(a.innerHTML=(e.regexerr??"").length?e.regexerr:this.trans("Este valor no parece ser válido")),s&&(s.style.display="none"),t=!1)
;var r=/recipientAccount|recipientName|recipientCountry/.test(e.mapto)?(e.value??"").toUpperCase():e.value??"";return/recipientAccount|recipientPhone/.test(e.mapto)&&(r=r.replace(/\s|-|\(|\)/g,"")),{slug:e.slug,valueShow:"select"==e.type||"select_ajax"==e.type?n.text??null:null,mapto:e.mapto,value:(r||"").toString().trim(),valid:e.valid}}));const n={success:t,error:i.join(". ")};if(this.data.isValid=t,this.internalAutorization&&this.container.querySelector("button.btn-authorization")&&(this.container.querySelector("button.btn-authorization").disabled=!t),this.onValidation(n),this.dispatchEvent(new CustomEvent("validation",{detail:n})),e&&t)this.checkout();else{const e=this.footer.querySelector("button.btn-next-resume");e&&(t?e.removeAttribute("disabled"):e.setAttribute("disabled",!0))}}setupBankTransfer(e){this.initialized=!1,void 0!==e.overrideStyles&&(this.overrideStyles=e.overrideStyles),void 0!==e.internalAutorization&&(this.internalAutorization=e.internalAutorization),
void 0!==e.onCountryChoiced&&(this.onCountryChoiced=e.onCountryChoiced),void 0!==e.onInitialized&&(this.onInitialized=e.onInitialized),void 0!==e.onSkuChoiced&&(this.onSkuChoiced=e.onSkuChoiced),void 0!==e.onError&&(this.onError=e.onError),void 0!==e.onValidation&&(this.onValidation=e.onValidation),void 0!==e.onCompleted&&(this.onCompleted=e.onCompleted),void 0!==e.onTermsAccepted&&(this.onTermsAccepted=e.onTermsAccepted),void 0!==e.onCheckout&&(this.onCheckout=e.onCheckout),void 0!==e.availableAmount&&(this.availableAmount=e.availableAmount),void 0!==e.shortcut&&(this.shortcut=e.shortcut),this.refresh()}}customElements.define("remex-bank-transfer",e),"undefined"!=typeof jQuery&&function(e){e.fn.setupBankTransfer=function(e){return this.each((function(){"remex-bank-transfer"===this.tagName.toLowerCase()&&this.setupBankTransfer(e)}))},e.fn.authorizeBankTransfer=function(){return this.each((function(){"remex-bank-transfer"===this.tagName.toLowerCase()&&this.authorize()}))}}(jQuery)
;const t="dev"!=document.querySelector('meta[name="app-env"]')?.getAttribute("content"),i=document.querySelector('meta[name="x-cpl"]')?.getAttribute("content")||"1.0.0";var script;customElements.get("dynamic-quotation")||((script=document.createElement("script")).src=`/cdn/${i}/microfronts/dynamic-quotation/index${t?".min":""}.js`,script.async=!0,document.head.appendChild(script)),customElements.get("remex-select")||((script=document.createElement("script")).src=`/cdn/${i}/microfronts/remex-select/index${t?".min":""}.js`,script.async=!0,document.head.appendChild(script)),void 0===$.fn.mask&&((script=document.createElement("script")).src="/assets/js/jquery.mask.min.js",script.async=!0,document.head.appendChild(script))}