if(!customElements.get("remex-airtime-billpay")){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            }\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            } \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} .pinnerdown.big{  \n               height: 82px;\n            }   \n            .${this.uniqueSuffix} .pinnerdown.big::after{  \n                top: 77px; \n            } \n            .${this.uniqueSuffix} .airtime-billpay-recipient-carousel-container {\n                display: flex;\n                overflow-x: auto;\n                -webkit-overflow-scrolling: touch;\n                padding: 20px;\n            } \n            .${this.uniqueSuffix} .airtime-billpay-recipient-carousel-item {\n                flex: 0 0 auto;\n                width: 80px;\n                text-align: center;\n                margin-right: 6px;\n            } \n            .${this.uniqueSuffix}  .airtime-billpay-recipient-carousel-item img {\n                border-radius: 50%;\n                width: 100%;\n                height: auto;\n            } \n            .${this.uniqueSuffix} .airtime-billpay-recipient-carousel-item h6 {\n                font-size: 12px;\n            } \n            \n            .${this.uniqueSuffix} .airtime-billpay-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} .airtime-billpay-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} .airtime-billpay-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} .airtime-billpay-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} .airtime-billpay-resume {\n                    display: flex;\n                    align-content: center;\n                    flex-direction: column;\n            }\n            .${this.uniqueSuffix} .airtime-billpay-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} .airtime-billpay-resume .skulogo{\n               display: inline-block;\n                width: 50px;\n                height: 38px;\n                border-radius: 20px;\n                background-color: #004150;\n                background-size: contain;\n                background-repeat: no-repeat;\n                background-position: center;\n                border: 1px solid #18a2b8;\n            } \n            .${this.uniqueSuffix} .btn-tab{\n                color:white;\n                text-transform: uppercase;\n                font-size: 0.6rem !important; \n                height: 40px !important;\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: 34px;\n             }\n            .${this.uniqueSuffix} .tab-content  {display:none;}\n            .${this.uniqueSuffix} .tab-content.selected    {display:block;}\n            wallet-authorize-slider-container .slider {\n    width: 100%;\n    height: 68px;\n    position: relative;\n    background: #2b5159;\n}\n.${this.uniqueSuffix} #invoice-authorize-slider-container input {\n    -webkit-appearance: none;\n    width: 100%;\n    height: 100%;\n    background: #ddd;\n    padding: 3px;\n    border: none;\n    -webkit-border-radius: 15px;\n    border-radius: 4px;\n    opacity: 0.8;\n    position: absolute;\n    border: 1px solid #56c6e6a3;\n    padding-left: 8px !important;\n    left: 0px;\n}\n.${this.uniqueSuffix} #invoice-authorize-slider-container input::-moz-range-thumb {\n    height: 44px;\n    width: 48px;\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAYCAYAAAB0kZQKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASJJREFUeNpi7OnpYaAC0AXiF0D8mhzNTAzUASBHnAdim4F0BAhIA/EBIC4aSEeAADMQ9wLxRiDmHyhHwIAfNHqMiXZEcXExGJMCiNCjCMTHgDiTkFmM////p4rXe3t78Rm0DIjTgfgLNkkWoGZQij7MQFsQBY2aICC+Rq80gQ2oA/EZIE4YSEeAACcQzwfimVD2gDgCBtKgiVZlIB0BAgbQbBwykI5A5I4BtPsaNLfcHKiQWADEJiAHDERIfAfiLKgjBiQ67kCD/zK2NAFqjMyi0AJQVnPCI78GiBNxFttQF6ZToVjG5ohfoLoOiKcMVO54BA3+swPVntgKxIbEOIAWjvgLxJVA7APE7waisHoKxBFAfGSgSszL0MLnBTmaAQIMAKg/OsrT7JG8AAAAAElFTkSuQmCC');\n    background-repeat: no-repeat;\n    background-position: 50%;\n    -moz-border-radius: 8px;\n    border-radius: 8px;\n    border: 1px solid #777;\n    position: relative;\n}\n.${this.uniqueSuffix} #invoice-authorize-slider-container input::-webkit-slider-thumb {\n    height: 46px;\n    width: 48px;\n    margin-bottom: -7px;\n    -webkit-appearance: none;\n    appearance: none;\n    background: #fff;\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAYCAYAAAB0kZQKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASJJREFUeNpi7OnpYaAC0AXiF0D8mhzNTAzUASBHnAdim4F0BAhIA/EBIC4aSEeAADMQ9wLxRiDmHyhHwIAfNHqMiXZEcXExGJMCiNCjCMTHgDiTkFmM////p4rXe3t78Rm0DIjTgfgLNkkWoGZQij7MQFsQBY2aICC+Rq80gQ2oA/EZIE4YSEeAACcQzwfimVD2gDgCBtKgiVZlIB0BAgbQbBwykI5A5I4BtPsaNLfcHKiQWADEJiAHDERIfAfiLKgjBiQ67kCD/zK2NAFqjMyi0AJQVnPCI78GiBNxFttQF6ZToVjG5ohfoLoOiKcMVO54BA3+swPVntgKxIbEOIAWjvgLxJVA7APE7waisHoKxBFAfGSgSszL0MLnBTmaAQIMAKg/OsrT7JG8AAAAAElFTkSuQmCC');\n    background-repeat: no-repeat;\n    background-position: 50%;\n    -webkit-border-radius: 8px;\n    border-radius: 8px;\n    margin-top: -8px;\n    border: 1px solid #777;\n    z-index: 1;\n}\n.${this.uniqueSuffix} #invoice-authorize-slider-container .s1 {\n    display: inline-table;\n    margin: auto;\n    left: 0;\n    right: 0;\n    width: 100%;\n    text-align: center;\n    z-index: 0;\n}\n.${this.uniqueSuffix} #invoice-authorize-slider-container .s2 {\n    display: none;\n    margin: auto;\n    left: 0;\n    right: 0;\n    width: 100%;\n    text-align: center;\n    z-index: 0;\n}\n.${this.uniqueSuffix} #invoice-authorize-slider-container.authorized .s1 {\n    display: none;\n}\n.${this.uniqueSuffix} #invoice-authorize-slider-container.authorized .s2 {\n    display: inline-table !important;\n    -webkit-mask-image: none !important;\n    animation-duration: 1s;\n    animation-fill-mode: both;\n    animation-iteration-count: 1;\n    -webkit-animation-duration: 1s;\n    -webkit-animation-fill-mode: both;\n    -webkit-animation-iteration-count: 1;\n    opacity: 0;\n    animation-name: fadeInUp;\n    -webkit-animation-name: fadeInUp;\n}\n.${this.uniqueSuffix} #invoice-authorize-slider-container span {\n    /* position the text just under the button in the stacking order */\n    position: absolute;\n    z-index: 99;\n    top: 28%;\n    font-family: "Helvetica Neue", Helvetica, sans;\n    font-size: 18px;\n    color: white;\n    cursor: default;\n    -webkit-user-select: none;\n    -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgb(0 0 0 / 63%)), color-stop(0.45, rgba(0, 0, 0, 0.3)), color-stop(0.5, rgba(0, 0, 0, 1)), color-stop(0.55, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.3)));\n    -webkit-mask-size: 1000px;\n    -webkit-mask-repeat: no-repeat;\n    -webkit-animation-timing-function: ease-in-out;\n    -webkit-animation: text-spotlight 4s infinite;\n}\n.${this.uniqueSuffix} #invoice-authorize-slider {\n    background: #2542503d !important;\n}\n.${this.uniqueSuffix} #invoice-authorize-slider::-webkit-slider-thumb {\n    height: 46px;\n    width: 48px;\n    margin-bottom: -7px;\n    -webkit-appearance: none;\n    appearance: none;\n    background: #fff;\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAYCAYAAAB0kZQKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASJJREFUeNpi7OnpYaAC0AXiF0D8mhzNTAzUASBHnAdim4F0BAhIA/EBIC4aSEeAADMQ9wLxRiDmHyhHwIAfNHqMiXZEcXExGJMCiNCjCMTHgDiTkFmM////p4rXe3t78Rm0DIjTgfgLNkkWoGZQij7MQFsQBY2aICC+Rq80gQ2oA/EZIE4YSEeAACcQzwfimVD2gDgCBtKgiVZlIB0BAgbQbBwykI5A5I4BtPsaNLfcHKiQWADEJiAHDERIfAfiLKgjBiQ67kCD/zK2NAFqjMyi0AJQVnPCI78GiBNxFttQF6ZToVjG5ohfoLoOiKcMVO54BA3+swPVntgKxIbEOIAWjvgLxJVA7APE7waisHoKxBFAfGSgSszL0MLnBTmaAQIMAKg/OsrT7JG8AAAAAElFTkSuQmCC');\n    background-repeat: no-repeat;\n    background-position: 50%;\n    -webkit-border-radius: 8px;\n    border-radius: 8px;\n    margin-top: -8px;\n    border: 1px solid #56c6e6;\n    z-index: 1;\n}\n.${this.uniqueSuffix} #invoice-authorize-slider-container.authorized .${this.uniqueSuffix} #invoice-authorize-slider::-webkit-slider-thumb {\n    display: none;\n}\n.${this.uniqueSuffix} #invoice-authorize-slider-container.authorized input {\n    background: #56c6e6 !important;\n    opacity: 1;\n}\n.${this.uniqueSuffix} #invoice-authorize-slider-container.authorized {\n    width: 100%;\n    -ms-flex: 0 0 100% !important;\n    flex: 0 0 100% !important;\n    max-width: 100% !important;\n}\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())}))}))}static frequencyRecipients={};static denominations={};fetchFrequencyRecipients(t,i){return new Promise(((n,a)=>{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:a=>{e.frequencyRecipients[t]=a,n(e.frequencyRecipients[t].filter((e=>e.recipientCountry==i)))},error:e=>a(e)})}))}fetchDenominations(e){
return this._denominationsCached||(this._denominationsCached={}),new Promise(((t,i)=>{this._denominationsCached[e]&&t(this._denominationsCached[e]),$.ajax({type:"GET",url:this.createApiUrl(`wallet/payout/${e}/denominations`),success:i=>{this._denominationsCached[e]=i,t(i)},error:e=>i(e)})}))}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",success:n=>{e.isomasrkandregexp=n,i(e.isomasrkandregexp[t]??null)},error:e=>n(e)})}))}static rates=null;static fetching=!1;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://${document.querySelector('meta[name="app-env"]')&&"dev"==document.querySelector('meta[name="app-env"]').getAttribute("content")?"dev-api":"api"}.remesita.com/rest/v1/${e}`}loadPayOutRates(t){return new Promise(((i,n)=>{t||null==e.rates?e.fetching||(e.fetching=!0,$.ajax({type:"GET",url:this.createApiUrl("wallet/payout/rates?group=topup,billpay"),success:t=>{i(t),e.rates=t,e.fetching=!1},error:t=>{e.rates=null,e.fetching=!1,n(t)}})):i(e.rates)}))}fetchRecipientForm(t){return new Promise(((i,n)=>{null!=e.recipientForm[t]?i(e?.recipientForm[t]):$.ajax({type:"GET",url:this.createApiUrl(`wallet/${t}/recipient-form`),success:n=>{e.recipientForm[t]=n,i(n)},error:e=>n(e)})}))}getRatesGroupByContry(e){return new Promise(((t,i)=>{this.loadPayOutRates(e).then((e=>{const i={};for(const t in e)e[t].countries.forEach((n=>{i[n.iso]||(i[n.iso]={...n,skus:[]}),i[n.iso].skus.push({...e[t],sku:t})}))
;for(const e in i)i[e].skus.sort(((e,t)=>e.enabled-t.enabled));const n={};Object.keys(i).sort().forEach((function(e){n[e]=i[e]})),t(n)})).catch((e=>i(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            <div class="col-12 p-0"></div> \n            `,this.container=this.querySelector("div"));const t=[],i=[];this.getRatesGroupByContry().then((e=>{if(this._countryChoices=e,!this.initialized){for(var n in e){
const a=e[n],o=`<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/${a.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">${a.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(o),
"CU"==a.iso&&i.push(o)}
this.container.innerHTML=`\n                        <div class="col-12 pt-2 px-0 pb-0">\n                            <h6 class="text-white px-2">${this.trans("¿De qué país es el servicio que deseas pagar?")}</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("")}</div>`,
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(".popularity-toggler").style.display=t.length>0?"flex":"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.container.querySelector(".popularity-toggler").style.display="flex"})),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),
this.container.innerHTML=`<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/${e.flag}" style="width:26px;height:26px;margin-top:-2px" class="rounded-pill  border"> ${this.trans("Paga un servicio de _COUNTRY_",{_COUNTRY_:e.name})}`} \n                                    </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                                ${(e.skus??[]).sort(((e,t)=>e.enabled>!t.enabled?1:-1)).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">\n                                        <button ${e.enabled?"":"disabled"} class="btn rounded px-3 btn-dark text-white text-left col-12 border skuchoice-btn" sku="${e.sku}" amountflow="${/UNE|ETECSA|ONAT|CUPER/.test(e.sku)?"lockup":"input"}" 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" ${e.enabled?"":'style="display:none"'}>\n                                                    <span class="badge badge-dark badge-pill">\n                                                    ${t?this.trans("Sin Fee"):this.trans("Tarifa:")}  ${e.percent>0?`${e.percent}%`:""} ${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                                                <small class="m-0 p-0 font-mija text-white" ${e.enabled?'style="display:none"':""}>\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                        </div>\n                        </div>`,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")));n.amountflow=i.getAttribute("amountflow"),"y"==i.getAttribute("denominations")?(i.querySelector(".chevron-indicator").classList.remove("mdi-chevron-right"),i.querySelector(".chevron-indicator").classList.add("mdi-spin","mdi-loading"),
this.shortcut&&(this.container.innerHTML=`\n                                    <div class="pinnerdown big">\n                                        <h5 class="font-mija m-0 p-0 col-12">\n                                            <img src="${this.shortcut.icon}" style="width:42px;height:42px;margin-top:-2px;background:#fff;2px solid #157489 !important;border-radius:14px !important;box-shadow:0px 0px 10px #67c7dc !important" class="rounded-pill border">\n                                             ${this.shortcut.caption}\n                                        </h5>\n                                        </div>\n                                 ${this.loadingHtml} \n                                <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-lg col-12" >\n                                            ${this.trans("SIGUIENTE")} <i class="mdi mdi-arrow-right-bold-circle-outline"></i> \n                                        </button>\n                                    </div>\n                                </div>`),
this.fetchDenominations(n.sku).then((t=>{n.denominations=t,this.choiceSku(n,e)})).catch((t=>{n.denominations=this._denominationsCached?this._denominationsCached[n?.sku]??null:null,this.choiceSku(n,e)}))):(n.denominations=this._denominationsCached?this._denominationsCached[n?.sku]??null:null,this.choiceSku(n,e))}))})),this.dispatchEvent(new CustomEvent("countryCoiced",{detail:e})),this.onCountryChoiced(e),this.shortcut&&this.querySelector(`button[sku="${this.shortcut.sku}"]`).click()}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 select":{"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.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"}}}choiceSku(e,t){if(this._skuChoiced==e.sku)return!1;this._skuChoiced=e.sku
;const i=`\n                <div class="pinnerdown big">\n                    <h5 class="font-mija m-0 p-0 py-1 col-12">\n                        <div style="margin-bottom:-5px;background-image:url(${e.image});width:42px;background-repeat:no-repeat;background-position:center;display:inline-flex;background-size:contain;height:42px;margin-top:-2px;background-color:#fff;2px solid #157489 !important;border-radius:14px !important;box-shadow:0px 0px 10px #67c7dc !important" class="rounded-pill  border"></div>\n                        <img src="/assets/img/flags/${t.flag}" style="margin-left: -16px;width: 20px;height: 20px;margin-top: 5px;border: 1px solid white !important;" class="rounded-pill  border">\n                        ${e.label}</h5>\n                </div>`;if("lockup"==e.amountflow)this.container.innerHTML=`\n                                ${i}\n                            <h5 class="py-3 px-1">${this.trans("Consultemos con _INSTITUTION_ para veer si tienes algún adeudo.",{
_INSTITUTION_:(e.institution??this.trans("la institución")).replace("UNKNOWN",this.trans("la institución"))
})}</h5>\n                            <div class="form-group px-1">\n                                <small class="form-text text-white mb-1" style="font-size: 1rem;">${this.trans("Número de la factura")}</small>\n                                <div class="input-group rounded" style="border: 1px solid #56c6e6!important;background:#2b5159">\n                                    <input autocomplete="off" id="invoice-number" required class="form-control form-control-lg pl-3 text-center text-white" type="text" min="1" style="font-weight: bold;font-size: 1.6rem;background: transparent !important;border:0 none !important;">\n                                    <div class="input-group-append rounded">\n                                        <span class="input-group-text text-white" style="width: 48px;background: transparent !important;border-right: 0;">\n                                          <i class="mdi mdi-receipt"></i>\n                                        </span>\n                                    </div> \n                                </div> \n                            </div>\n                             <div class="col-12 p-1">\n                                <div class="col-12 alert alert-danger invoice-error" style="display:none">\n                                     ${this.trans("La factura no tienes adeudos en estos momentos.")}\n                                </div>\n                                <div class="col-12 invoice-loading" style="display:none">\n                                    <i class="mdi mdi-spin mdi-refresh"></i> ${this.trans(" Espere mientras conectamos con _INSTITUTION_ para verificar si tienes algún adeudo, este proceso puede tardar, no te desesepres.",{
_INSTITUTION_:(e.institution??this.trans("la institución")).replace("UNKNOWN",this.trans("la institución"))})}\n                                </div>\n                             </div>\n                            <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-lg col-12" >\n                                        ${this.trans("SIGUIENTE")} <i class="mdi mdi-arrow-right-bold-circle-outline"></i> \n                                    </button>\n                                </div>\n                            </div>`,this.querySelector("#invoice-number").addEventListener("input",(t=>{const i=(this.querySelector("#invoice-number").value??"").replace(/\s/g,"").trim();let n=8;"UNE_INVOICE"===e.sku&&(n=13),
i.length>=n?this.querySelector("button").removeAttribute("disabled"):this.querySelector("button").setAttribute("disabled",!0)})),this.querySelector("button").addEventListener("click",(async n=>{this.querySelector("button").setAttribute("disabled",!0),this.querySelector("button").innerHTML=`<i class="mdi mdi-spin mdi-refresh"></i> ${this.trans("CONSULTANDO")}...`;const a=(this.querySelector("#invoice-number").value??"").replace(/\s/g,"").trim();this.querySelector(".invoice-error").style.display="none",this.querySelector(".invoice-loading").style.display="",$.ajax({type:"GET",url:this.createApiUrl(`bill/${a}/${e.sku}/check`),success:n=>{if(this.querySelector(".invoice-loading").style.display="none",n.error)this.querySelector(".invoice-error").style.display="",this.querySelector(".invoice-error").innerHTML=n.error??this.trans("La factura no tienes adeudos en estos momentos.");else{const o=parseFloat(n.balance)/e.currencies[0].exchangeRate,r=o*e.percent+e.fix,s=o+r;this.data.isValid=!0,
this.data.quotation={sku:e.sku,label:e.label,country:t,sourceValue:o,targetValue:parseFloat(n.balance),targetChoiced:null,currency:n.currency,totalFees:r},this.data.recipientData=[{slug:"recipientAccount",mapto:"recipientAccount",value:a},{slug:"recipientPhone",mapto:"recipientPhone",value:window.auth.user.phone},{slug:"recipientEmail",mapto:"recipientEmail",value:window.auth.user.email},{slug:"recipientName",mapto:"recipientName",value:window.auth.user.fullName},{slug:"invoiceHolder",mapto:"metaItem",value:n.holder??this.trans("Desconocido")}],
this.container.innerHTML=`\n                                    ${i} \n                                    <div class="col-12 px-0 py-2">\n                                        <div class="col-12 my-3 p-3 rounded color-white bg-dark border" style="border-color:#14a2b8 !important">\n                                            <ul class="pl-2">\n                                                <li>${this.trans("Factura")}: ${a}</li>\n                                                <li>${this.trans("Titular")}: ${n.holder??this.trans("Desconocido")}</li>\n                                                <li>${this.trans("Proveedor")}: ${n.provider}</li>\n                                                <li>${this.trans("Adeudo")}: ${Intl.NumberFormat("es-ES",{style:"currency",currency:n.currency}).format(parseFloat(n.balance))}</li>\n                                                <li>${this.trans("Valor Convertido")}: ${Intl.NumberFormat("es-ES",{style:"currency",currency:"SRM"
}).format(o)}</li>\n                                                <li>${this.trans("Comisión de Remesita")}: ${Intl.NumberFormat("es-ES",{style:"currency",currency:"SRM"}).format(r)}</li>\n                                                <li class="pt-2"><b>${this.trans("Total a Pagar")}: ${Intl.NumberFormat("es-ES",{style:"currency",currency:"SRM"
}).format(s)}</b></li>\n                                                <li class="pt-2"><i><small class="text-muted">1SRM=${e.currencies[0].exchangeRate}${n.currency}</small</i></li>\n                                            </ul>\n                                        </div>\n                                    </div>\n                                    <div class="row mx-0 px-0 pb-2 animate animated bounceIn" style="height:66px">\n                                        <div class="col-12 px-0" id="invoice-authorize-slider-container">\n                                            <div class="slider rounded">\n                                                <span class="s1">${window.wallet.i18n("PAGAR _AMOUNT_",{_AMOUNT_:Intl.NumberFormat("es-ES",{style:"currency",currency:"SRM"}).format(s)
})}</span>\n                                                     <input autocomplete="off" type="range" value="0" class="bg-dark p-1" id="invoice-authorize-slider"/>\n                                                <span class="s2"><i class="mdi mdi-check-circle"></i>${window.wallet.i18n("AUTORIZADO")}</span>\n                                            </div>\n                                        </div> \n                                    </div>`,this.querySelector("#invoice-authorize-slider").addEventListener("change",(e=>{if(this.querySelector("#invoice-authorize-slider").value>=99)this.querySelector("#invoice-authorize-slider").setAttribute("disabled",!0),this.querySelector("#invoice-authorize-slider-container").classList.add("authorized"),this.authorize();else{const e=setInterval((()=>{if(!this.querySelector("#invoice-authorize-slider"))return clearInterval(e)
;this.querySelector("#invoice-authorize-slider").value=Math.max(this.querySelector("#invoice-authorize-slider").value-10),0==this.querySelector("#invoice-authorize-slider").value&&clearInterval(e)}),24)}}))}},error:()=>{this.querySelector(".invoice-loading").style.display="none",this.querySelector("button").removeAttribute("disabled"),this.querySelector("button").innerHTML=`${this.trans("SIGUIENTE")} <i class="mdi mdi-arrow-right-bold-circle-outline"></i>`,this.querySelector(".invoice-error").style.display="",this.querySelector(".invoice-error").innerHTML=this.trans("La factura no tienes adeudos en estos momentos.")}})}));else{
this.container.innerHTML=`\n                            ${i}\n                             <dynamic-quotation id="airtime-billpay-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                            <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-lg col-12" >\n                                        ${this.trans("SIGUIENTE")} <i class="mdi mdi-arrow-right-bold-circle-outline"></i> \n                                    </button>\n                                </div>\n                            </div>`;const n={
"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."};$("#airtime-billpay-quotation").setupDQ({showFlag:!1,exchangeRate:e.denominations&&e.denominations.length?e.denominations[0]?.exchangeRate:e.currencies[0].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.currencies[0].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:n,detailsCls:"animate fadeIn",styles:this.getQuotationStyles(),onValidation:i=>{this.data.quotation={sku:e.sku,label:e.label,country:t,sourceValue:i.sourceValue,targetValue:i.targetValue,targetChoiced:i.targetChoiced??null,currency:e.currencies[0].symbol,totalFees:i.totalFees},i.success&&i.sourceValue<=this.availableAmount?this.querySelector("button").removeAttribute("disabled"):this.querySelector("button").setAttribute("disabled",!0),this.container.querySelector(".insuficiente-amount").style.display=i.sourceValue>this.availableAmount?"block":"none"},onInitialized:()=>{this.fetchFrequencyRecipients(e.sku,t.iso).then((()=>{}))}}),this.querySelector("button").addEventListener("click",(i=>{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 border bg-white"> ${this.shortcut.caption}`:`<img  src="/assets/img/flags/${this.data.quotation.country.flag}" style="width:26px;height:26px;margin-top:-2px" class="rounded-pill  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="airtime-billpay-recipient-carousel-container  col-12 px-0 py-1" style="${t.length?"":"display:none"}"> \n                                         <div  class="airtime-billpay-recipient-add airtime-billpay-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="airtime-billpay-recipient-choice airtime-billpay-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(".airtime-billpay-recipient-add").addEventListener("click",(t=>this.renderRecipientForm(e))),this.container.querySelectorAll(".airtime-billpay-recipient-choice").forEach((t=>{t.addEventListener("click",(i=>this.renderRecipientForm(e,JSON.parse(atob(t.getAttribute("data"))),!0)))}))):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))){if(e.isomasrkandregexp[this.data.quotation.country.iso])var a=e.isomasrkandregexp[this.data.quotation.country.iso].mask,o=e.isomasrkandregexp[this.data.quotation.country.iso].regexp;t.push({mapto:"recipientAccount",label:this.trans("Número de celular"),type:"text",slug:"recipientAccount",requirement:"required",mask:a,regexp:o})}t.find((e=>"recipientName"==e.mapto))||t.push({
label:this.trans("Nombre del destinatario"),help:this.trans("Te pedimos este dato para almacenar el beneficiario y puedas reutilizarlo en el futuro."),type:"text",mapto:"recipientName",slug:"recipientName",requirement:"required",regexp:"^[a-zA-Z ]+$"}),this.data.recipientForm=t;const r=t.map((e=>(e.value=null,i&&null!=(i[e.slug]??null)&&(e.value=i[e.slug]),e)))
;this.container.innerHTML=`${this._header()}\n                                    <div class="col-12 pt-2">\n                                        <div class="row px-1">\n                        ${r.map((e=>`<div class="remex-field-container">\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">\n                ${"select"==e.type?`<remex-select class="no-select" \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                            ${"required"==(e.requirement??"required")?"required":""}  \n                            id="${this.uniqueSuffix+e.slug}"\n                            placeholder="${e.placeholder??""}"></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                                ${"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??""}</div> \n                                                <div class="no-select error-caption pt-1"  id="${this.uniqueSuffix+e.slug}error" ></div> \n                                            </div>`)).join("")}\n                                        </div>\n                                    </div>\n                                    \n                              <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){const a=()=>{this._validationTik&&clearTimeout(this._validationTik),this._validationTik=setTimeout((()=>{this.validateForm(!!i&&n&&!this.shortcut),this._validationTik=!1}),500)};["input","change","select","keyup"].forEach((e=>t.addEventListener(e,(e=>a())))),"select"==e.type&&(this.querySelector(`#${this.uniqueSuffix+e.slug}`).items=e.choices??[])}try{"text"==e.type&&null!=(e.mask??null)&&$(`#${this.uniqueSuffix+e.slug}`).mask(e.mask)}catch(e){}})),this.container.querySelector("button")&&this.container.querySelector("button").addEventListener("click",(e=>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 style="min-height:70px;max-width: 100px;margin:auto;background-image:url(/assets/img/gif/circle-error.gif);background-size: contain;background-repeat: no-repeat;background-position: center;" class="m-auto">\n                                            </div>\n                                        </div>\n                                        <h6>Ups!</h6>\n                                        <p>${this.trans("Ha ocurrido un error cargando el fomulario")}</p>\n                                    </div>\n                                </div> \n                              `}))}checkout(){
this.container.innerHTML=`${this._header()}\n                    <div class="col-12 text-center airtime-billpay-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=>"recipientAccount"==e.slug||"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 class="d-flex p-0 justify-content-between m-auto  align-items-center">\n                            <div class="p-2 d-flex align-items-center justify-content-between border bg-dark rounded rounded-pill">\n                                <div class="skulogo mr-1" style="background-image: url(/rest/v1/service-picture/${this.data.quotation.sku});"></div> \n                                <div class="pr-1">\n                                    ${this.data.recipientData.find((e=>"recipientAccount"==e.slug||"recipientAccount"==e.mapto)).value}\n                                </div>\n                            </div>  \n                        </h4>\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á del operador en el otro extremo, 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("Entiendo que Remesita no conecta directamente al proveedor de servicio de mi destinatario sino que instruye la operación por medaicion de su socio comercial Reloadly Networks, LLC.")}</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 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.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 e={};this.data.recipientForm.forEach((t=>e[t.slug]=t.value??null)),this.container.querySelector(".edit-recipient").addEventListener("click",(t=>this.renderRecipientForm(this.data.quotation.sku,e,!1))),this.onCheckout()}authorize(){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 style="min-height:70px;max-width: 100px;background-image:url(/assets/img/gif/circle-error.gif);background-size: contain;background-repeat: no-repeat;background-position: center;" class="m-auto"> \n                                    </div>\n                                </div>\n                            <h6>Ups!</h6>\n                            <p>${this.trans(e)}</p>\n                        </div>\n                    </div> `,this.onError(e)};this.data.isValid?(this.container.innerHTML=this.loadingHtml,$.ajax({type:"PUT",url:this.createApiUrl(`wallet/payout/${this.data.quotation.sku}`),headers:{"response-include-errors":!0,"Content-Type":"application/json"},url:this.createApiUrl(`wallet/payout/${this.data.quotation.sku}`),data:JSON.stringify({
denominationValue:this.data.quotation?.targetChoiced?.amount??this.data.quotation.sourceValue,denominationId:this.data.quotation?.targetChoiced?.id??null,quotationHandler:this.data.quotation?.targetChoiced?.handler??null,recipientAmount:this.data.quotation.targetValue,recipientCurrency:this.data.quotation.currency,recipientCountry:this.data.quotation.country.iso,recipientData:this.data.recipientData}),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;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 operación fue instruida al proveedor.")} ${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.onCompleted(i)):t(i.error)},error:e=>{t(this.trans("Ha ocurrido un error al procesar la transacción"))}})):t(this.trans("Los datos des destinatario no son válidos"))}validateForm(e){let t=!0,i=[]
;this.data.recipientData=this.data.recipientForm.map((e=>{if(!this.container.querySelector(`#${this.uniqueSuffix+e.slug}`))return{slug:e.slug,mapto:e.mapto,value:e.value,valid:!0};if(e.value="switch"==e.type?this.container.querySelector(`#${this.uniqueSuffix+e.slug}`).checked??!1:this.container.querySelector(`#${this.uniqueSuffix+e.slug}`).value,e.valid=!0,this.container.querySelector(`#${this.uniqueSuffix+e.slug}caption`).style.display="block",this.container.querySelector(`#${this.uniqueSuffix+e.slug}error`).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}))),"switch"!=e.type&&e.valid&&void 0!==e.regexp&&(e.regexp??"").length){const t=new RegExp(e.regexp.replace("_ISO_",this.data.quotation.country.iso),"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.container.querySelector(`#${this.uniqueSuffix+e.slug}error`).innerHTML=(e.regexerr??"").length?e.regexerr:this.trans("Este valor no parece ser válido"),this.container.querySelector(`#${this.uniqueSuffix+e.slug}caption`).style.display="none",t=!1);var n=/recipientAccount|recipientName|recipientCountry/.test(e.mapto)?(e.value??"").toUpperCase():e.value??"";return/recipientAccount|recipientPhone/.test(e.mapto)&&(n=n.replace(/\s|-|\(|\)/g,"")),{slug:e.slug,mapto:e.mapto,value:n.trim(),valid:e.valid}}));const n={success:t,error:i.join(". ")};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():t?this.container.querySelector("button.btn-next-resume").removeAttribute("disabled"):this.container.querySelector("button.btn-next-resume").setAttribute("disabled",!0)}setupAirtimeBillpay(t){this.initialized=!1,e.rates=null,void 0!==t.overrideStyles&&(this.overrideStyles=t.overrideStyles),void 0!==t.internalAutorization&&(this.internalAutorization=t.internalAutorization),void 0!==t.onCountryChoiced&&(this.onCountryChoiced=t.onCountryChoiced),void 0!==t.onInitialized&&(this.onInitialized=t.onInitialized),void 0!==t.onSkuChoiced&&(this.onSkuChoiced=t.onSkuChoiced),void 0!==t.onError&&(this.onError=t.onError),void 0!==t.onValidation&&(this.onValidation=t.onValidation),void 0!==t.onCompleted&&(this.onCompleted=t.onCompleted),void 0!==t.onTermsAccepted&&(this.onTermsAccepted=t.onTermsAccepted),void 0!==t.onCheckout&&(this.onCheckout=t.onCheckout),void 0!==t.availableAmount&&(this.availableAmount=t.availableAmount),void 0!==t.shortcut&&(this.shortcut=t.shortcut),
this.refresh()}}customElements.define("remex-airtime-billpay",e),"undefined"!=typeof jQuery&&function(e){e.fn.setupAirtimeBillpay=function(e){return this.each((function(){"remex-airtime-billpay"===this.tagName.toLowerCase()&&this.setupAirtimeBillpay(e)}))},e.fn.authorizeAirtimeBillpay=function(){return this.each((function(){"remex-airtime-billpay"===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))}