if(!customElements.get("shopping-assistance")){class e extends HTMLElement{constructor(){super(),this.uniqueSuffix="shopping-assistance"+Math.random().toString(36).substr(2,9),this.classList.add(this.uniqueSuffix),this.marketplaces=[],this.contanerClass="",
this.defaultStyles=`\n            .${this.uniqueSuffix} .spa-tab {\n                display: flex;\n                flex-direction: column;\n                align-items: start;\n                display:none;\n            }\n            .${this.uniqueSuffix} .no-select {\n                user-select: none;\n            }\n            .${this.uniqueSuffix} .shpa-item-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                background-color: #ffffff0d;\n            }\n            .${this.uniqueSuffix} .shpa-item-label{\n                padding-bottom: 3px;\n                line-height: 36px;\n                color: #333; \n                display: flex;\n                justify-content: flex-start;\n            }\n            .${this.uniqueSuffix} .spa-tab .focused label {\n                color: #00afd6;\n            }\n            .${this.uniqueSuffix} .spa-tab .shap-item-input {\n                display: flex;\n                justify-content: space-between;\n                padding: 6px;\n                font-size: 1.2rem;\n                border: 1px solid #ccc;\n                border-radius: 5px;\n                box-shadow: none;\n                background-color: transparent;\n            }\n            .${this.uniqueSuffix} .spa-tab input {\n                width: 100%;\n                flex: 100% 0 1;\n                font-size: 1.2rem;\n                background: transparent !important;\n                border: none !important;\n                box-shadow: none !important;\n                display: flex;\n                outline: none;\n            }\n            .${this.uniqueSuffix} .comerce-btn,\n            .${this.uniqueSuffix} .comerce-list-btn,\n            .${this.uniqueSuffix} .qrstart-btn {\n                display: flex;\n                justify-content: space-between;\n                align-items: center;\n                padding: 10px;\n                font-size: 1.2rem;\n                border: 1px solid #ccc;\n                border-radius: 5px;\n                box-shadow: none;\n                background-color: transparent;\n            }\n            .${this.uniqueSuffix} .comerce-btn .mkbeta{\n                padding: 2px 8px;\n                font-size: 10px;\n                float: right;\n                position: absolute;\n                right: -5px;\n                margin-top: -3px;\n                border: #034c5d 2px solid;\n            }\n            .${this.uniqueSuffix} .recipient-btn {\n                display: flex;\n                justify-content: space-between;\n                align-items: center;\n                padding: 10px;\n                font-size: 1.2rem;\n                border: 1px solid #ccc;\n                border-radius: 5px;\n                box-shadow: none;\n                background-color: transparent;\n            }\n            .${this.uniqueSuffix} .comerce-logo {\n                background-size: contain;\n                background-repeat: no-repeat;\n                background-position: center;\n                min-width: 60px;\n                width: 60px;\n                height: 60px;\n                border-radius: 50%;\n                background-color: #034c5d;\n            }\n             .${this.uniqueSuffix} .marketplace-fees{ margin-left: -6px;font-size: 0.8rem;}\n            .${this.uniqueSuffix} .comerce-logo-small {\n                background-size: contain;\n                background-repeat: no-repeat;\n                background-position: center;\n                width: 20px;\n                height: 20px;\n                border-radius: 50%;\n                background-color: #fff;\n                display:inline-block;\n            }\n            .${this.uniqueSuffix} .item-list-container {\n                display: flex;\n                margin-bottom: 10px;\n                flex-direction: column;\n                flex: 100% 0 0;\n                width: 100%;\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} .market-quotation{\n               border-color: #43b6d7 !important;\n                background: #125a6d !important;\n            }\n            .${this.uniqueSuffix}   .witing-price{\n                display: none;\n            }\n            .${this.uniqueSuffix} .spa-tab.selected {\n               display:flex;\n            }  \n            .${this.uniqueSuffix} .shpa-item-url-help {\n                color: #f00;\n                font-size: 0.8rem;\n            }\n            .${this.uniqueSuffix} .shpa-item-instructions {\n                background: #0000000d;\n            }\n            #${this.uniqueSuffix}recipient-state,\n            #${this.uniqueSuffix}recipient-country\n             {\n                width: 100%;\n                background: transparent;\n                border: none; \n                outline: none;\n            }\n           \n            #${this.uniqueSuffix} btn-assistance-tab {\n                background: #fff;\n                color: #333;\n            }\n            #${this.uniqueSuffix}-container .progress-risk{\n                position: absolute;\n                background: #0c586a;\n                height: 18px;\n                width: 18px;\n                top: 0;\n                bottom: 0;\n                margin-top: 24px;\n                border: 2px solid #0e6e84;\n                border-radius: 50%;\n            }\n            #${this.uniqueSuffix}-container .prod-thumbnail{\n                display: inline-block;\n                width: 40px;\n                height: 40px;\n                background-size: cover;\n                background-repeat: no-repeat;\n                background-position: center;\n                border-radius: 5px;\n                margin-right: 5px;\n            }\n            #${this.uniqueSuffix}-container .swipe-container {\n                position: relative;\n                overflow: hidden;\n                width: 100%;\n                height: 150px;\n                border-radius: 5px;  \n                margin-bottom: 4px;\n                border: 1px solid #56c6e6;\n            }\n            #${this.uniqueSuffix}-container  .swipeable-button {\n                position: absolute;\n                left: 0;\n                top: 0;\n                width: 100%;\n                height: 100%;\n                color: white;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                cursor: pointer;\n                transition: transform 0.3s ease; \n                z-index: 1;\n                border:none !important;\n            }\n            #${this.uniqueSuffix}-container  .url-cleaner button { padding-top: 4px !important;padding-bottom: 4px !important;background: transparent !important;box-shadow: none !important;border: none !important;padding-left: 10px !important;padding-right: 10px !important;}\n            #${this.uniqueSuffix}-container  .url-cleaner button i{ font-size: 20px;color: #56c6e6;}\n            #${this.uniqueSuffix}-container .swipeable-menu {\n                position: absolute;\n                right: -100%;  \n                top: 0;\n                width: 100%;\n                height: 100%;\n                background-color: #024c5d ;\n                border: 1px solid #56c6e6 !important;\n                display: flex;\n                border-radius: 5px;\n                transition: right 0.3s ease;\n                z-index: 0;\n                flex-wrap: wrap;\n                align-content: center;\n                justify-content: center;\n                align-items: center;\n            }\n            .bg-dark .btn.btn-outline-danger{\n                border: 1px solid #ff9faf !important;\n                color: #ff91a3 !important;\n            }\n            .bg-danger-light{\n                background-color: #db717180 !important;\n            }\n            .quotation-note { \n               color: white;\n               font-size: 1rem;\n               background: #0a7088;\n            }\n            .shpa-check-points-item h5{\n                cursor: pointer;\n            } \n            .shpa-check-points-item.collapsed .shpa-check-points-item-content{\n                display:none;\n            } \n            .shpa-check-points-item .mdi-chevron-right{\n                display:none;\n            } \n            .shpa-check-points-item.collapsed .mdi-chevron-right{\n                display:inline;\n            }\n            .shpa-check-points-item.collapsed .mdi-chevron-down{\n                 display:none;\n            }\n            #${this.uniqueSuffix}-overlay {\n                position: absolute;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                background-color: rgb(0 0 0 / 52%);  \n                pointer-events: none;  \n            } \n            #${this.uniqueSuffix}-overlay::before {\n                content: '';\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                width: 200px; \n                height: 200px;\n                transform: translate(-50%, -50%);\n                background-color: #e1d4d433;\n                border: 2px solid #56c6e6;\n                box-sizing: border-box;\n                border-radius: 8px;\n            }\n            #${this.uniqueSuffix}-videoContainer {\n                position: relative;\n                overflow: hidden;\n                display: inline-block;\n                border-radius: 4px;\n                border: 1px solid #56c6e6;\n                width: 100%; \n            } \n            #${this.uniqueSuffix}-recipient-container,\n            #${this.uniqueSuffix}-discliamer-container{\n               flex-direction: column;\n            }\n            #${this.uniqueSuffix}-pickup-containe .pickup-item{\n                background: #02637a !important;\n            }\n            #${this.uniqueSuffix}-pickup-container .pickup-item.selected{\n                border-left: 10px solid #56c6e6 !important;\n                background: #043b48 !important;\n            }\n            .generalinstructions::placeholder{color:#70cae5;opacity:.8;}\n            .shpa-step1,\n            .shpa-step2,\n            .shpa-step3,\n            .shpa-step4{display:none !important;  }\n            .shpa-current-step-1 .shpa-step1,\n            .shpa-current-step-2 .shpa-step2,\n            .shpa-current-step-3 .shpa-step3,\n            .shpa-current-step-4 .shpa-step4{display:flex !important;  flex-direction: column; }\n            .shpa-current-step-1 .shpa-step1.row,\n            .shpa-current-step-2 .shpa-step2.row,\n            .shpa-current-step-3 .shpa-step3.row,\n            .shpa-current-step-4 .shpa-step4.row\n            {\n                flex-direction: row;\n            }\n            @media (max-width: 420px){\n                .shpa-checkpoint-step{\n                    max-width:54px;\n                    font-size:10px;\n                }\n            }\n           #${this.uniqueSuffix}-orders  .toggle-show.custom-switch {\n                padding-left: 2.25rem\n            }\n\n            #${this.uniqueSuffix}-orders  .toggle-show.custom-switch .custom-control-label::before {\n                left: -2.25rem;\n                top: 0;\n                pointer-events: all;\n                width: 50px;\n                height: 30px;\n                border-radius: 30px;\n            } \n            #${this.uniqueSuffix}-orders  .toggle-show.custom-switch .custom-control-label::after {\n                position: absolute;\n                top: 2px;\n                left: -34px;\n                display: block;\n                width: 26px !important;\n                height: 26px !important;\n                border-radius: 50% !important;\n                content: "\\F209";\n                text-align: center;\n                background: no-repeat 50%/50% 50%;\n                font-family: "Material Design Icons";\n                font-size: 18px;\n                color: #fff;\n                background: #425e76;\n            }\n\n            #${this.uniqueSuffix}-orders .toggle-show.custom-switch .custom-control-input:checked ~ .custom-control-label::after {\n                left: -26px;\n                content: "\\F208";\n                color: #56c6e6;\n                text-align: center;\n            } \n            #${this.uniqueSuffix}-orders  .toggle-show .custom-control-input:checked ~ .custom-control-label::before {\n                border-color: #43b6d7;\n                background-color: #56c6e6;\n            } \n            #${this.uniqueSuffix}-orders  .toggle-show .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {\n                border-color: #56c6e6;\n            }\n            #${this.uniqueSuffix}-details-container fieldset .header-accordion .mdi-chevron-right{\n                display:none;\n            }\n            #${this.uniqueSuffix}-details-container fieldset.collapsed {\n               border: 0 none !important;\n               padding-top: 0 !important;\n               padding-bottom: 0 !important;\n               margin-bottom: 0 !important;\n            }\n            #${this.uniqueSuffix}-details-container fieldset.collapsed .header-accordion .mdi-chevron-right{\n                display:inline;\n            }\n            #${this.uniqueSuffix}-details-container fieldset.collapsed .header-accordion .mdi-chevron-down{\n                display:none; \n            }\n            #${this.uniqueSuffix}-details-container fieldset.collapsed .header-accordion{\n                border-color:#017996 !important;\n            }\n            #${this.uniqueSuffix}-details-container fieldset.collapsed div.content-accordion{\n                display:none !important;\n            }  \n            #${this.uniqueSuffix}-orders  .toggle-show.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {\n                background-color: rgb(63 89 114);\n            } \n            #${this.uniqueSuffix}-orders  .toggle-show.custom-switch .custom-control-input:disabled ~ .custom-control-label::after {\n                content: "\\F4E6";\n                text-align: center;\n                color: #9a9a9a;\n                background: transparent;\n                -webkit-animation: rotating 2s linear infinite;\n                -moz-animation: rotating 2s linear infinite;\n                -ms-animation: rotating 2s linear infinite;\n                -o-animation: rotating 2s linear infinite;\n                animation: rotating 2s linear infinite;\n            }\n            #${this.uniqueSuffix}-orders .pg-btn{\n                transform: translateY(0px) !important;\n            }\n        `,
this.overrideStyles=null,this.importFromBrowserExtension=!1,this.i18n={},this.onStep=e=>{},this.onRefreshStart=()=>{},this.onRefreshEnd=()=>{},this.onUnderMaintenace=()=>{},this.onCalculate=()=>{},this.onValidation=()=>{},this.data={},this._step=1,this.stepCache={}}prev(){this._step>1&&(this._step--,this.innerHTML=this.stepCache[`s${this._step}`].html,this.step(this._step,this.stepCache[`s${this._step}`].data))}next(){this._step<Object.keys(this.stepCache).length&&(this._step++,this.innerHTML=this.stepCache[`s${this._step}`].html,this.step(this._step,this.stepCache[`s${this._step}`].data))}step(e,t){this._step=e;let i="start";switch(e){case 2:i="shop_choiced";break;case 3:i="start_recipient_capture"}this.stepCache[`s${this._step}`]={html:this.innerHTML,data:t},"function"==typeof this.onStep&&this.onStep(i,t),this.classList.remove("shpa-current-step-1","shpa-current-step-2","shpa-current-step-3","shpa-current-step-4","shpa-current-step-5"),this.classList.add(`shpa-current-step-${e}`)}
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()}refresh(e){this.innerHTML=`<div class="text-center p-5 col-12" >                    \n                            <img src="/assets/img/loading-bars-blue.svg" class="m-auto" height="20" /><br>\n                            <small>${this.trans("Espere mientras cargamos los comercios disponibles")}....</small>\n                         </div>`,"function"==typeof this.onRefreshStart&&this.onRefreshStart(),this.fetchMarketpplaces().then((t=>{this.marketplaces=t,this.render(),e&&e.products&&(this.startData=e,this.startData.importFromBrowserExtension&&(this.importFromBrowserExtension=this.startData.importFromBrowserExtension),this.choiceComerce=this.marketplaces.find((t=>t.slug==e.marketplace)),this.step(2,this.choiceComerce),this.data={},e.products.forEach((e=>{this.addItemUI(e)}))),"function"==typeof this.onRefreshEnd&&this.onRefreshEnd()
})).catch((e=>{this.innerHTML=`<div class="text-center p-2 col-12" > \n                                <div class="alert" style="color:#ffc1c7" role="alert">\n                                    <h6>${this.trans("Lo sentimos, ha ocurido un error cargando los datos de la tienda.")}</h6>\n                                    <div  style="width: 200px; max-width:70vw;margin:auto;background-image:url(/assets/img/gif/circle-error.gif);background-size: contain;background-repeat: no-repeat;background-position: center;"></div> \n                                </div>\n                                <div class="col-12 py-2 px-2">\n                                    <button  type="button" class="refresh-btn col-12 btn btn-lg btn-outline-info mb-1 text-uppercase"><i class="mdi mdi-arrow-left"></i> <span>${this.trans("Regresar al inicio")}</span></button>\n                                </div>\n                            </div>`,this.querySelector(".refresh-btn").addEventListener("click",(()=>{
this.startData=null,this.refresh()})),"function"==typeof this.onRefreshEnd&&this.onRefreshEnd()})),this.step(1,this.marketplaces)}render(e){let t="";if(this.overrideStyles)for(let e in this.overrideStyles){let i=[];for(let t in this.overrideStyles[e])i.push(`${t}:${this.overrideStyles[e][t]};`);t+=`.${this.uniqueSuffix} ${e} {${i.join("")}}`}const i=[];this.marketplaces.forEach((e=>{const t=0==e.percentFee+e.fixFee+e.fixMinimum
;i.push(`<button slug="${e.slug}" \n                        beta="${e.beta?"y":"n"}" \n                        urlscrapp="${e.urlscrapp?"y":"n"}" \n                        crhomext="${e.crhomext?"y":"n"}" \n                        safaryext="${e.safaryext?"y":"n"}"  \n                        mkname="${e.name}"  \n                        class="comerce-btn border btn btn-lg btn-outline-info col-12 my-1"\n                             type="button" ${e.enabled?"":"disabled"}>\n                             ${e.beta?'<small class="badge badge-danger mkbeta">BETA</small>':""}\n                            <div style="text-align: left;">\n                                ${e.name}<br><small >${e.url}</small><br><small class="marketplace-fees"><span class="badge badge-${t?"warning":"dark"} badge-pill">${t?this.trans("Gratis"):this.trans("Tarifa:")}  ${e.percentFee>0?100*e.percentFee+"%":""} ${e.fixFee>0?`+${e.fixFee} SRM`:""} ${e.fixMinimum>e.fixFee?e.percentFee+e.fixFee>0?`ó ${e.fixMinimum} SRM`:`${e.fixMinimum} SRM`:""}</span></small>\n                            </div>\n                            <div class="comerce-logo" style="background-image: url(/assets/img/logos/${e?.logo})"><i class="mdi mdi-circle text-${e.enabled?"success":"danger"}" style="position: absolute;right: 20px;bottom: 14px;text-shadow:0 0 2px black;border-radius: 50%;line-height: 100%;padding: 0;margin: 0;background: #034c5d;"></i></div>\n                        </button>\n                    `)
})),
this.innerHTML=`\n            <style>${this.defaultStyles.replace(/\n|\t|\r/gi,"").replace(/\s\s+/g," ").trim()}</style>\n            <style>${t.replace(/\n|\t|\r/gi,"").replace(/\s\s+/g," ").trim()}</style> \n            <div  id="${this.uniqueSuffix}-tab-container">\n                <div class="row m-0">\n                    <button class="btn btn-sm col-6 btn-assistance-tab btn-tab selected">${this.trans("Comprar")}</button>\n                    <button class="btn btn-sm col-6 btn-order-tab btn-tab">${this.trans("Historial")}</button>\n                </div>\n                <div class="shopping-assistance-container spa-tab selected ${this.contanerClass??""}" id="${this.uniqueSuffix}-container"> \n                    <div class="col-12 px-0 py-3" id="${this.uniqueSuffix}-choice-mode"> \n                        <h5>${this.trans("¿Cómo te gustaría iniciar tu compra?")}</h5>\n                        <button  class="comerce-list-btn border btn btn-lg btn-outline-info col-12 my-1" type="button">\n                            <div style="text-align: left;font-size:14px">\n                                ${this.trans("Introducir URL de cada producto hasta llenar el carrito")} \n                            </div> \n                            <div class="comerce-logo"  style="background-image:url(/assets/img/gif/link-animated.gif)">\n                             </div>                            \n                        </button>\n                        <button  class="qrstart-btn border btn btn-lg btn-outline-info col-12 my-1" type="button">\n                            <div style="text-align: left;font-size:14px">\n                                ${this.trans("Escanear código QR generado por la Extensión de Compra Asistida en tu navegador")} \n                            </div> \n                            <div class="comerce-logo" style="background-image:url(/assets/img/gif/qr-scan-green.gif)"></div>\n                        </button> \n                    </div>\n                    <div class="col-12 p-0" style="display:none"  id="${this.uniqueSuffix}-choice-marketplaces">\n                        <h5>${this.trans("¿Dónde te gustaría comprar?")}</h5>\n                        <small>${this.trans("Escoge una tienda")}</small>\n                        ${i.join("")}\n                        <button  class="qrstart-btn border btn btn-lg btn-outline-info col-12 my-1" type="button">\n                            <div style="text-align: left;font-size:14px">\n                                ${this.trans("Escanear código QR generado por la Extensión de Compra Asistida en tu navegador")} \n                            </div> \n                            <div class="comerce-logo" style="background-image:url(/assets/img/gif/qr-scan-green.gif)"></div>\n                        </button> \n                    </div>\n                    <div class="col-12 p-0" style="display:none"  id="${this.uniqueSuffix}-choice-qr">\n                        <h5><i class="mdi mdi-qrcode-scan"></i> ${this.trans("Apunta al QR generado en tu navegador por la extensión de Compra Asistida")}</h5>\n                        <div id="${this.uniqueSuffix}-videoContainer">\n                             <video id="${this.uniqueSuffix}-video" style="display:none;width:100%;min-height:300px"></video>\n                             <canvas id="${this.uniqueSuffix}-canvas" style="width:100%;background: #005f75;min-height:300px;display: flex;"></canvas> \n                            <div id="${this.uniqueSuffix}-overlay"></div>\n                        </div>\n                        <div id="${this.uniqueSuffix}-qr-message" class="text-center col-12 p-0 my-2"></div>\n                       \n                        <button type="button" class="cancel-qr-btn col-12 btn btn-lg btn-outline-info mb-1 text-uppercase"><span>${this.trans("Cancelar")}</span></button>\n                    </div>\n\n                </div>\n                <div class="shopping-assistance-orders spa-tab ${this.contanerClass??""}" id="${this.uniqueSuffix}-orders">\n                    <div class="text-center p-5 col-12">                    \n                        <i class="mdi mdi-meditation" style="font-size:3rem"></i>\n                        <h4>${this.trans("No tienes pedidos todavía.")}</h4>\n                    </div>\n                </div> \n            </div>\n            <div  id="${this.uniqueSuffix}-details-container">\n            </div>\n        `,
this.tabContainer=this.querySelector(`#${this.uniqueSuffix}-tab-container`),this.detailContainer=this.querySelector(`#${this.uniqueSuffix}-details-container`),this.assistanceContainer=this.querySelector(`#${this.uniqueSuffix}-container`),this.ordersContainer=this.querySelector(`#${this.uniqueSuffix}-orders`),this.assistanceTabBtn=this.querySelector(".btn-assistance-tab"),this.ordersTabBtn=this.querySelector(".btn-order-tab"),this.assistanceTabBtn.addEventListener("click",(()=>{this.assistanceTabBtn.classList.add("selected"),this.ordersTabBtn.classList.remove("selected"),this.assistanceContainer.classList.add("selected"),this.ordersContainer.classList.remove("selected")})),this.ordersTabBtn.addEventListener("click",(()=>{this.assistanceTabBtn.classList.remove("selected"),this.ordersTabBtn.classList.add("selected"),this.assistanceContainer.classList.remove("selected"),this.ordersContainer.classList.add("selected"),this.orderHistoryUI()})),
this.assistanceContainer.querySelector(".comerce-list-btn").addEventListener("click",(()=>{this.assistanceContainer.querySelector(`#${this.uniqueSuffix}-choice-qr`).style.display="none",this.assistanceContainer.querySelector(`#${this.uniqueSuffix}-choice-mode`).style.display="none",this.assistanceContainer.querySelector(`#${this.uniqueSuffix}-choice-marketplaces`).style.display="block"})),this.assistanceContainer.querySelectorAll(".qrstart-btn").forEach((e=>e.addEventListener("click",(()=>{this.assistanceContainer.querySelector(`#${this.uniqueSuffix}-qr-message`).innerHTML="",this.assistanceContainer.querySelector(`#${this.uniqueSuffix}-choice-qr`).style.display="block",this.assistanceContainer.querySelector(`#${this.uniqueSuffix}-choice-mode`).style.display="none",this.assistanceContainer.querySelector(`#${this.uniqueSuffix}-choice-marketplaces`).style.display="none"
;const e=this.assistanceContainer.querySelector(`#${this.uniqueSuffix}-video`),t=this.assistanceContainer.querySelector(`#${this.uniqueSuffix}-canvas`),i=t.getContext("2d");navigator.mediaDevices.getUserMedia({video:{facingMode:"environment"}}).then((n=>{this.stream=n,e.srcObject=n,e.addEventListener("loadedmetadata",(()=>{e.play(),t.width=e.videoWidth,t.height=e.videoHeight,this.assistanceContainer.querySelector(`#${this.uniqueSuffix}-videoContainer`).style.height=e.videoHeight,e.play(),this.stopCamera=()=>{this.stream&&(this.stream.getTracks().forEach((e=>e.stop())),e.srcObject=null,this.stream=!1)}})),e.addEventListener("play",(()=>{const n=()=>{if(e.paused||e.ended)return;t.width=e.videoWidth,t.height=e.videoHeight,i.drawImage(e,0,0,t.width,t.height);const s=i.getImageData(0,0,t.width,t.height),a=jsQR(s.data,t.width,t.height);if(a&&(a.data??"").trim().length>1){
if(/shpa:\w+/.test(a.data))return this.assistanceContainer.querySelector(`#${this.uniqueSuffix}-qr-message`).innerHTML='<img src="/assets/img/loading-bars-blue.svg" class="m-auto" height="10" />',fetch("/rest/v1/shpa/seed/"+a.data.split("shpa:").pop()).then((e=>e.json())).then((e=>{this.stopCamera&&this.stopCamera(),this.importFromBrowserExtension=!0,this.refresh(e),setTimeout((()=>this.validateForm()),100)})).catch((e=>{this.stopCamera&&this.stopCamera(),this.assistanceContainer.querySelector(".comerce-list-btn").click(),window.alertModal(this.trans("Ups!"),`${this.trans("El código QR escaneado no es válido.")}`)}));this.assistanceContainer.querySelector(`#${this.uniqueSuffix}-qr-message`).innerHTML=`<div class="alert alert-danger" role="alert">${this.trans("El código QR escaneado no es válido.")}</div>`}requestAnimationFrame(n)};requestAnimationFrame(n)}))})).catch((e=>{this.stopCamera&&this.stopCamera(),this.assistanceContainer.querySelector(".comerce-list-btn").click()}))})))),
this.assistanceContainer.querySelector(".cancel-qr-btn").addEventListener("click",(()=>{this.assistanceContainer.querySelector(`#${this.uniqueSuffix}-choice-qr`).style.display="none",this.assistanceContainer.querySelector(`#${this.uniqueSuffix}-choice-mode`).style.display="block",this.assistanceContainer.querySelector(`#${this.uniqueSuffix}-choice-marketplaces`).style.display="none",this.stopCamera&&this.stopCamera()})),this.assistanceContainer.querySelectorAll("button.comerce-btn").forEach((e=>e.addEventListener("click",(e=>{let t=e.target;if("BUTTON"!=t.tagName.toUpperCase()&&(t=t.parentElement),"BUTTON"!=t.tagName.toUpperCase()&&(t=t.parentElement),this.choiceComerce=this.marketplaces.find((e=>e.slug==t.getAttribute("slug"))),"y"==t.getAttribute("urlscrapp"))this.addItemUI(),this.step(2,this.choiceComerce);else{
const e=this.isMobile()?this.isAndroid()?"https://remesita.com/ayuda/compra-asistida-en-remesita-18/como-instalar-la-extension-compra-asistida-con-srm-para-android-163.html":"https://remesita.com/ayuda/compra-asistida-en-remesita-18/como-instalar-la-extension-compra-asistida-con-srm-para-iphone-166.html":"https://remesita.com/ayuda/compra-asistida-en-remesita-18/como-instalar-la-extension-compra-asistida-con-srm-para-pc-168.html";window.alertModal(this.trans("Atención"),`${this.trans("Para importar tus productos, utiliza la extensión del navegador y transfiere los datos directamente desde la página oficial de _MARKETPLACE_.",{_MARKETPLACE_:t.getAttribute("mkname")})} \n                            <a href="${e}" target="_blank">${this.trans("Descubre cómo se hace dando click aquí!")}</a>`)}})))),this.checkForExtensionAndSuggestInstall(),"function"==typeof e&&e(),document.dispatchEvent(new CustomEvent("shpaReady"))}createApiUrl(e){
return`https://${"dev"==($('meta[name="app-env"]')?.attr("content")??"")?"dev-api":"api"}.remesita.com/rest/v1/${e}`}isChromeExtensionInstalled(){const e=document.querySelector('meta[name="shpa-extension-installed"]');return e&&"true"===e.content}isMobile(){return/Mobile|Android|iP(ad|od|hone)/.test(window.navigator.userAgent)}isAndroid(){return/Android/i.test(navigator.userAgent)}isiOS(){return/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream}isChromiumBased(){const e=window.navigator.userAgent;return e.includes("Chrome")||e.includes("Chromium")}getExtenstionLink(){return"https://chromewebstore.google.com/detail/compra-asistida-con-srm/acopglmpkeanapgdhhbnbhggbjagnhem?authuser=0&hl=es"}checkForExtensionAndSuggestInstall(){let e=null
;if(!document.querySelector('meta[name="shpa-extension-installed"]')&&!this.querySelector(`#${this.uniqueSuffix}-suggestion`)&&(e=this.isChromiumBased()?this.isMobile()?this.trans('Para mejorar tu experiencia usa el navegador <a href="_BROWSER_LINK_" target="_blank">_BROW_</a> con <a href="_EXTENSIONLINK_" target="_blank">Nuestra extensión</a>.',{_EXTENSIONLINK_:this.getExtenstionLink(),_BROWSER_LINK_:this.isiOS()?"https://apps.apple.com/app/id1484498200":"https://play.google.com/store/apps/details?id=com.kiwibrowser.browser",_BROW_:this.isiOS()?"Orion Browser":"Kiwi Browser"})+" "+this.trans("Así podrás importar tus carritos de compra automáticamente."):this.trans('Para mejorar tu experiencia instala <a href="_EXTENSIONLINK_" target="_blank">Nuestra extensión de Chrome</a>.',{_EXTENSIONLINK_:this.getExtenstionLink()
})+" "+this.trans("Así podrás importar tus carritos de compra automáticamente."):this.isMobile()?this.trans('Para mejorar tu experiencia lo recomendable es que instales el navegador <a href="_BROWSER_LINK_" target="_blank">_BROW_</a> y <a href="_EXTENSIONLINK_" target="_blank">Nuestra extensión</a>.',{_EXTENSIONLINK_:this.getExtenstionLink(),_BROWSER_LINK_:this.isiOS()?"https://apps.apple.com/app/id1484498200":"https://play.google.com/store/apps/details?id=com.kiwibrowser.browser",_BROW_:this.isiOS()?"Orion Browser":"Kiwi Browser"})+" "+this.trans("Así podrás importar tus carritos de compra automáticamente."):this.trans('Para mejorar tu experiencia lo recomendable es uses navegador <b>_BROW_</b>  y le instales <a href="_EXTENSIONLINK_" target="_blank">Nuestra extensión de Chrome</a>',{_EXTENSIONLINK_:this.getExtenstionLink(),_BROWSER_LINK_:"https://www.google.com/intl/es/chrome/dr/download/",_BROW_:"CHROME"
})+" "+this.trans("Así podrás importar tus carritos de compra automáticamente."),null!=e)){const t=document.createElement("div");t.id=this.uniqueSuffix+"-suggestion",t.innerHTML=`\n                        <div class="alert alert-warning my-2 text-left d-flex justify-content-between  align-items-start">\n                            <span class="mt-2 pr-2">\n                                ${e}\n                            </span> \n                            <i class="mdi mdi-close float-right" onclick="this.parentElement.parentElement.remove(this.parentElement)" style="position: absolute;right: 3px;margin-top:-12px;cursor:pointer;font-size:20px;z-index:10"></i>\n                        </div>`,this.prepend(t)}}discoverProductLink(e){return new Promise(((t,i)=>{$.ajax({type:"POST",url:this.createApiUrl(`shpa/discovery/${this.choiceComerce.slug}`),dataType:"json",data:{url:e},
success:e=>(e.error??"").length?i([e.error]):(e.errors??[]).length?i(e.errors):void 0===Object.keys(this.data).find((t=>this.data[t].link==e.link))?t(e):i(this.trans("Este producto ya ha sido agregado")),error:e=>i(e)})}))}fetchMarketpplaces(){return new Promise(((e,t)=>{$.ajax({type:"GET",url:this.createApiUrl("shpa/marketplaces"),dataType:"json",success:i=>(i.error??"").length?t(i.error):e(i),error:e=>t(e)})}))}calcTotal(){const e=Object.keys(this.data).reduce(((e,t)=>e+parseFloat(this.data[t].price)*this.data[t].qty),0),t=Object.keys(this.data).reduce(((e,t)=>e+this.data[t].qty),0);return void 0!==this.assistanceContainer&&null!=this.assistanceContainer.querySelector(".total-basket")&&(this.assistanceContainer.querySelector(".total-basket").innerHTML=this.trans("_N_ Productos",{_N_:t})),void 0!==this.onCalculate&&setTimeout((()=>this.onCalculate(e)),10),e}fetchRecipientAddress(){return new Promise(((e,t)=>{$.ajax({type:"GET",
url:this.createApiUrl(`shpa/recipients?shipTo=${(this.choiceComerce&&this.choiceComerce.shipTo?this.choiceComerce.shipTo:["US"]).join(",")}`),dataType:"json",success:t=>e(t),error:e=>t(e)})}))}getOrCreateLocker(e){return new Promise(((t,i)=>{$.ajax({type:"GET",url:this.createApiUrl(`shpa/locker/${e}`),dataType:"json",success:e=>t(e),error:e=>i(e)})}))}createLockerUI(){window.confirmModal(this.trans("Al al continuar estas dándonos tu concentimiento para que te demos de alta en WeShipYou.com."),(()=>{this.assistanceContainer.innerHTML=`<div class="text-center p-5 col-12" >                    \n                    <img src="/assets/img/loading-bars-blue.svg" class="m-auto" height="20" /><br>\n                    <small>${this.trans("Cargando tus direcciones")}....</small>\n                </div>`,this.getOrCreateLocker("WSY").then((e=>{this.captureRecipientAddressUI()})).catch((e=>{
window.alertModal(this.trans("Ups! algo salio mal"),this.trans("Ha ocurrido un error intentando crear tu casillero en Weshipyou.com. Por favor intenta de nuevo más tarde.")),this.captureRecipientAddressUI()}))}))}removeRecipient(e){return new Promise(((t,i)=>{$.ajax({type:"DELETE",url:this.createApiUrl(`shpa/recipient/${e}`),dataType:"json",success:e=>t(e),error:e=>i(e)})}))}removeRecipientUI(e){window.confirmModal(this.trans("¿Estas seguro que quieres eliminar los datos de esta dirección?"),(()=>{this.assistanceContainer.innerHTML=`<div class="text-center p-5 col-12" >                    \n                <img src="/assets/img/loading-bars-blue.svg" class="m-auto" height="20" /><br>\n                <small>${this.trans("Eliminando")}....</small>\n            </div>`,this.removeRecipient(e).then((()=>this.captureRecipientAddressUI())).catch((e=>{
window.alertModal(this.trans("Ups! algo salio mal"),this.trans("Ha ocurrido un error intentando eliminar esta dirección. Por favor intenta de nuevo más tarde.")),this.captureRecipientAddressUI()}))}))}createOrderUI(){this.assistanceContainer.querySelector(".shpa-step4")||(this.disclaimerContainer=document.createElement("div"),this.disclaimerContainer.classList.add("shpa-step4","col-12","p-0"),this.disclaimerContainer.id=`${this.uniqueSuffix}-discliamer-container`,this.assistanceContainer.appendChild(this.disclaimerContainer)),this.step(4,null),
this.disclaimerContainer.innerHTML=`\n                        <div class="text-left p-1 col-12" >\n                            <div>\n                                <h5>${this.trans("Por favor, indícanos cualquier instrucción especial, detalles de entrega, preferencias de compra o cupones de descuento a aplicar.")}</h5></div> \n                                <textarea placeholder="${this.trans("Indicaciones generales....")}" class="col-12 p-3 generalinstructions bg-dark text-white border rounded" style="min-height:200px">${this.generalInstructions??""}</textarea> \n                             </div>\n                        <div class="col-12 mx-0 px-0 row add-shpa-buttons">\n                            <div class="col-6 pl-0 pr-1">\n                                <button  type="button" class="add-shpa-terms-back col-12 btn btn-lg btn-outline-info mb-1 text-uppercase">\n                                    <i class="mdi mdi-arrow-left"></i>  ${this.trans("Atrás")}\n                                </button>\n                            </div>\n                            <div class="col-6 pr-0 pl-1">\n                                <button  type="button"  class="create-shpa-order-btn col-12 btn btn-lg btn-outline-info mb-1 text-uppercase">\n                                    ${this.trans("Ordenar")} <i class="mdi mdi-arrow-right"></i>\n                                </button>\n                            </div>\n                        </div>`,
this.disclaimerContainer.querySelector(".generalinstructions").addEventListener("input",(()=>{this.generalInstructions=this.disclaimerContainer.querySelector(".generalinstructions").value})),this.disclaimerContainer.querySelector(".add-shpa-terms-back").addEventListener("click",(()=>this.step(3,null))),this.disclaimerContainer.querySelector(".create-shpa-order-btn").addEventListener("click",(()=>{window.confirmModal(`<div class="col-12 text-left">\n                    <h5>${this.trans("Al utilizar este servicio, usted acepta los siguientes términos y condiciones")}</h5>\n                    <div class="text-left rounded border p-2 mb-2 mt-2" style="max-height: 400px;overflow-y: auto;">\n                              ${[{title:this.trans("Descripción del Servicio"),
content:this.trans("Remesita ofrece un servicio de Compra Asistida que consiste en realizar compras en su nombre en distintos marketplaces. Usted proporcionará enlaces a los productos que desea comprar, y nuestro equipo se encargará de realizar la compra en el marketplace seleccionado.")},{title:this.trans("Proceso de Cotización"),content:this.trans('Después de que usted cree una orden de compra con los enlaces de los productos deseados, su orden se pondrá en estado de "esperando cotización". Nuestro equipo revisará los productos y generará una cotización basada en el costo total de los productos y el envío al destino especificado por usted.')},{title:this.trans("Aceptación o Cancelación de la Orden"),
content:this.trans("Una vez que se genere la cotización, se le notificará del costo total, incluyendo el precio de los productos, el envío, y la comisión de Remesita. Usted podrá aceptar o cancelar la orden en este momento y solo si la acepta entonces se debitará de su Wallet el monto cotizado.")},{title:this.trans("Costo de Gestión de Compra"),content:this.trans("Remesita cobra una comisión por la gestión de la compra, que esta en dependencia de la tienda y del costo total de la compra. Esta comisión depende del tamaño de la compra, el riesgo asociado y otros factores que se consideren relevantes. Te informaremos sobre estos costos cuando un asistente establezca la cotización de tu orden.")},{title:this.trans("Política de Riesgo y Exclusión de Artículos"),
content:this.trans("Remesita se reserva el derecho de excluir ciertos artículos de la compra si se consideran de alto riesgo según nuestra propia evaluación heurística. Esta evaluación se realiza para proteger a nuestros clientes y evitar la compra de artículos de baja calidad o de vendedores sin reputación. En caso de que un artículo sea denegado, se le notificará y solo se procederá con la compra de los artículos aprobados.")},{title:this.trans("Limitaciones de Responsabilidad"),content:this.trans("Remesita no se hace responsable por la calidad de los productos comprados, la garantía, o cualquier discrepancia que pueda surgir entre el producto recibido y la descripción proporcionada por el marketplace. Nuestra responsabilidad se limita a la correcta gestión y ejecución de la compra según las especificaciones proporcionadas por usted.")},{title:this.trans("Modificaciones del Servicio"),
content:this.trans("Remesita se reserva el derecho de modificar estos términos y condiciones en cualquier momento. Cualquier cambio será comunicado oportunamente, y el uso continuado del servicio implica la aceptación de los nuevos términos.")}].map((e=>`<h6>${e.title}</h6><p><small>${e.content}</small></p>`)).join("")}\n                    </div>\n                </div>`,(()=>{this.disclaimerContainer.innerHTML=`<div class="text-center p-5 col-12" >                    \n                                    <img src="/assets/img/loading-bars-blue.svg" class="m-auto" height="20" /><br>\n                                            <small>${this.trans("Preparando orden de compra")}....</small>\n                                        </div>`,this.createOrder().then((e=>{if(void 0!==e.error)return window.alertModal(this.trans("Ups! lo sentimos"),this.trans(e.error)),this.createOrderUI()
;window.alertModal(this.trans("Listo!"),this.trans("La orden de compra _REF_ ha sido creada. En las proximas 24 horas laborables nuestros asistentes actualizarán la cotización. Todavía no será debitado ningún monto de tu Wallet hasta que no aceptes la cotización.",{_REF_:`<b>${e.reference}</b>`})),
this.disclaimerContainer.innerHTML=`<h5>${this.trans("¿Dónde te gustaría comprar?")}</h5>\n                                        <small>${this.trans("Escoge una tienda")}</small>\n                                        ${this.marketplaces.map((e=>`<button slug="${e.slug}" \n                                            class="comerce-btn border btn btn-lg btn-outline-info col-12 my-1"\n                                                type="button" ${e.enabled?"":"disabled"}>\n                                                <div style="text-align: left;">\n                                                    ${e.name}<br><small>${e.url}</small>\n                                                </div>\n                                                <div class="comerce-logo" style="background-image: url(/assets/img/logos/${e?.logo})"><i class="mdi mdi-circle text-${e.enabled?"success":"danger"}" style="position: absolute;right: 20px;bottom: 4px;text-shadow:0 0 2px black;border-radius: 50%;line-height: 100%;padding: 0;margin: 0;background: #034c5d;"></i></div>\n                                            </button>\n                                        `)).join("")}`,
this.render((()=>this.ordersTabBtn.click()))})).catch((e=>{window.alertModal(this.trans("Ups! algo salio mal"),this.trans(e)),this.createOrderUI()}))}))}))}createOrder(){return new Promise(((e,t)=>{const i={source:"web",recipientId:this.recipientChoicedId??null,pickUps:this.pickUpChoices??[],quotationData:this.startData?.quotationData?.items??[],shareLink:this.startData?.shareLink??null,generalInstructions:this.generalInstructions,metadata:null==this.startData?null:{network:{...this.startData?.net??{}},...this.startData?.origin??{},screen:this.startData?.screen??{},extensionVersion:this.startData?.extension?.v??null},items:Object.keys(this.data).map((e=>({id:this.data[e].id,title:this.data[e].title,link:this.data[e].link,price:this.data[e].price,qty:this.data[e].qty??1,rating:this.data[e].rating??3.9,review_count:this.data[e].review_count??10,sales:this.data[e].sales??10,risk:this.data[e].risk,provider:this.data[e].provider??this.choiceComerce.name,
marketplace:this.data[e].marketplace??this.choiceComerce.slug,thumbnail:this.data[e].images[0],instructions:this.data[e].instructions??"",size:this.data[e].size_choice??null,variations:this.data[e].variation_choice??null})))};$.ajax({type:"PUT",url:this.createApiUrl("shpa/order"),dataType:"json",data:i,success:i=>(i.error??"").length?t(i.error):e(i),error:e=>{t("Ha ocurrido un error intentando crear la orden de compra. Por favor intenta de nuevo más tarde.")}})}))}fetchOrders(e,t,i){return new Promise(((n,s)=>{$.ajax({type:"GET",url:this.createApiUrl(`shpa/orders?pg=${e}&pgSize=${t}&hideCanceled=${i?1:0}`),dataType:"json",success:e=>n(e),error:e=>s(e)})}))}orderHistoryUI(e){
this.ordersContainer.innerHTML=` \n                <div class="text-center p-5 col-12" >                    \n                    <img src="/assets/img/loading-bars-blue.svg" class="m-auto" height="20" /><br>\n                    <small>${this.trans("Cargando historial de órdenes de compra")}....</small>\n                </div> `;const t=e=>{window.alertModal(this.trans("Ups! algo salio mal"),this.trans("Ha ocurrido un error intentando cargar el historial. Por favor intenta de nuevo más tarde.")),this.ordersContainer.innerHTML=`\n            <div class="text-center p-5 col-12">                    \n                <i class="mdi mdi-meditation" style="font-size:3rem"></i>\n                <h4>${this.trans("No hay pedidos para mostrar.")}</h4>\n            </div>`},i=n=>{this.history=n.items??[],
this.ordersContainer.innerHTML=` \n            <div class="col-12 p-2  mb-1 rounded d-flex text-white flex-row   align-items-center">  \n                <div class="form-group pt-1" style="width:52px">\n                    <div class="custom-control custom-switch toggle-show">\n                        <input type="checkbox" ${e?"":"checked"} class="custom-control-input" id="hide-canceled">\n                            <label class="custom-control-label" for="hide-canceled">\n                        </label>\n                    </div>\n                </div>\n                <div class="text-white pl-2">\n                    ${window.wallet.i18n("Mostrar órdenes canceladas")}\n                </div>\n            </div>\n            <div class="row col-12 mx-0 px-0">\n                ${0==this.history.length?`<div class="text-center p-5 col-12">                    \n                    <i class="mdi mdi-meditation" style="font-size:3rem"></i>\n                    <h4>${this.trans("No tienes pedidos para mostrar.")}</h4>\n                </div>`:this.history.map((e=>`\n                    <button oid="${e.id}" class="col-12 p-2 btn btn-outline-info btn-lg text-white mb-2 order-btn" type="button">\n                        <div class="col-12 p-0 text-white" style="${"cancelled"==e.status?"text-decoration: line-through;":""};border:#56c6e6 !important">\n                            <span class="badge badge-pill badge-${this.statusData(e.status).badgeColor}"><i class="mdi mdi-${this.statusData(e.status).ico}"></i> ${this.statusData(e.status).label}</span>\n                            <div class="col-12 p-0 mt-2 d-flex justify-content-between  align-items-start"> \n                                <h5>${e.reference}</h5>\n                                <h5 class="pr-2">${"start"==e.status?"x.xx":e.quotationFormatted} SRM</h5>\n                            </div>\n                            <div class="col-12 p-0 d-flex justify-content-between  align-items-start">\n                                <small>${e.shpaMarketplaceUrl}</small> \n                                ${e.quotationNote?.length&&"quotation"==e.status?'<span><i class="mdi mdi mdi-comment-quote"></i><small class="badge badge-danger badge-pill p-1" style="margin-top: -30px;margin-left: 19px;display: flex;font-size: 0.5rem;">1</small></span>':""}\n                            </div> \n                        </div>\n                     </button>`)).join("")} \n            <div class="col-12 px-0 pt-2 d-flex text-white flex-row justify-content-center align-items-center history-pagginator">\n                <button type="button" class="btn btn-sm btn-outline-info pg-btn" pg="1" ${1==n.pg?"disabled":""}><i class="mdi mdi-arrow-left"></i></button>\n                ${(()=>{
const e=[];for(let t=1;t<=n.totalPg;t++)e.push(`<button  pg="${t}" type="button" class="btn btn-sm btn-outline-info mx-1 pg-btn ${n.pg==t?"active":""}" ${n.pg==t?"disabled":""}>${t}</button>`);return e})().join("")}\n                <button type="button" class="btn btn-sm btn-outline-info pg-btn" pg="${n.totalPg}"  ${n.pg==n.totalPg?"disabled":""}><i class="mdi mdi-arrow-right"></i></button>\n            </div>`,this.ordersContainer.querySelector("#hide-canceled").addEventListener("change",(e=>this.orderHistoryUI(!e.target.checked))),this.ordersContainer.querySelectorAll("button.order-btn").forEach((e=>e.addEventListener("click",(e=>{let t=e.target;for(;"BUTTON"!=t.tagName.toUpperCase();)t=t.parentElement;const i=t.getAttribute("oid"),n=this.history.find((e=>e.id==i));n&&this.orderDetailUI(n)})))),this.ordersContainer.querySelectorAll("button.pg-btn").forEach((n=>n.addEventListener("click",(n=>{let s=n.target;for(;"BUTTON"!=s.tagName.toUpperCase();)s=s.parentElement
;const a=s.getAttribute("pg");this.ordersContainer.querySelector(".history-pagginator").innerHTML='<img src="/assets/img/loading-bars-blue.svg" class="m-auto" height="10" />',this.fetchOrders(a,10,e).then(i).catch(t)}))))};this.fetchOrders(1,10,e).then(i).catch(t)}orderDetailUI(e){const t=e.shpaGroupedTrackingEvents;this.detailContainer.style.display="flex",this.tabContainer.style.display="none",
this.detailContainer.innerHTML=`\n             <div class="row mx-0 col-12 px-0" id="order${e.reference}">\n                <div class="col-12 p-2">\n                 ${"start"==e.status?`<div class="col-12 mb-3 px-0"><div class="col-12 alert alert-info">${this.trans("Espere mientras nuestro equipo realiza la cotización con la tienda y agrega el costo de envío y comisión de gestión")}</div></div>`:""}\n                 ${"cancelled"==e.status?`<div class="col-12 mb-3 px-0"><div class="col-12 alert alert-danger"><h6>${this.trans("La orden ha sido cancelada")}</h6><i><i class="mdi mdi-format-quote-open"></i>${this.trans(e.cancelReason)}<i class="mdi mdi-format-quote-close"></i></i></div></div>`:""}\n                    <fieldset class="col-12 mb-3 p-2 rounded border ${"cancelled"==e.status?"collapsed":""}">\n                        <legend class="col-12 p-0">\n                            <div class="border shadow-sm px-3 py-1 bg-dark rounded header-accordion text-white" style="font-size: 1rem;cursor:pointer">\n                                <i class="mdi mdi-chevron-right"></i><i class="mdi mdi-chevron-down"></i> ${this.trans("Detalles de la Orden")}\n                            </div>\n                        </legend>\n                        <div class="col-12 p-0 content-accordion">\n                            <div class="col-12 d-flex justify-content-between   align-items-start"><span>${this.trans("Orden")}:</span> <b>${e.reference}</b></div>\n                            <div class="col-12 d-flex justify-content-between  align-items-start"><span>${this.trans("Fecha")}:</span> <b>${e.createdAt}</b></div>\n                            <div class="col-12 d-flex justify-content-between  align-items-start"><span>${this.trans("Estado")}:</span> <b>${this.statusData(e.status).label}</b></div>\n                            <div class="col-12 d-flex justify-content-between  align-items-start"><span>${this.trans("Tienda")}:</span> <b class="text-uppercase">${e.shpaMarketplace}</b></div>\n                            <div class="col-12 d-flex justify-content-between  align-items-start"><span>${this.trans("Cantidad de Productos")}:</span> <button class="btn btn-sm rounded rounded-pill btn-outline-info show-products"><i class="mdi mdi-eye"></i> ${Object.keys(e.shpaItems.filter((e=>e.stock))).reduce(((t,i)=>t+parseInt(e.shpaItems[i].qty)),0)}</button></div>\n                        </div>\n                    </fieldset>\n                     ${"delivery"==e.shpaDeliveryMode?`<fieldset class="col-12 mb-3 p-2 rounded border ${/cancelled|completed/.test(e.status)?"collapsed":""}">\n                        <legend class="col-12 p-0">\n                              <div class="border shadow-sm px-3 py-1 bg-dark rounded header-accordion text-white" style="font-size: 1rem;cursor:pointer">\n                                <i class="mdi mdi-chevron-right"></i><i class="mdi mdi-chevron-down"></i> ${this.trans("Dirección de envío")}\n                            </div> \n                        </legend>  \n                        <div class="col-12 p-0 content-accordion">\n                            <i class="mdi mdi-map-marker"></i>${e.shpaRecipient?"":"Error en la dirección!"} ${e.shpaRecipient?.address?.line1} ${e.shpaRecipient?.address?.line2},${e.shpaRecipient?.address?.city}, ${e.shpaRecipient?.address?.state} ${e.shpaRecipient?.address?.zip}, ${e.shpaRecipient?.address?.country}\n                        </div> \n                    </fieldset>`:`<fieldset class="col-12 mb-3 p-2 rounded border ${"cancelled"==e.status?"collapsed":""}">\n                        <legend class="col-12 p-0">\n                            <div class="border shadow-sm px-3 py-1 bg-dark rounded header-accordion text-white" style="font-size: 1rem;cursor:pointer">\n                                <i class="mdi mdi-chevron-right"></i><i class="mdi mdi-chevron-down"></i> ${this.trans(e.shpaPickups.length>1?"Direcciones de recolección":"Dirección de recolección")}\n                            </div>\n                        </legend> \n                        <div class="col-12 px-2 text-left content-accordion">\n                            <ul class="col-12 p-0 text-left" style="list-style: none;">\n                                ${e.shpaPickups.map((e=>`<li class="px-1 pb-3"><i class="mdi mdi-map-marker"></i> ${e}</li>`)).join("")} \n                            </ul>\n                            ${e.shpaPickups.length>1?`<small class="text-muted" style="line-height: 16px;display: block;"><i class="mdi mdi-information"></i> <i>${this.trans("Una vez completada la compra se definirá la dirección de recoleccion definitiva")}</i></small>`:""}\n                        </div> \n                    </fieldset>`}\n                    ${"start"!=e.status&&"cancelled"!=e.status?`\n                           <fieldset class="col-12 mb-3 p-2 rounded border ${/cancelled|completed/.test(e.status)?"collapsed":""}">\n                                <legend class="col-12 p-0">\n                                    <div class="border shadow-sm px-3 py-1 bg-dark rounded header-accordion text-white" style="font-size: 1rem;cursor:pointer">\n                                         <i class="mdi mdi-chevron-right"></i><i class="mdi mdi-chevron-down"></i> ${this.trans("Desglose de Costos")}\n                                    </div>\n                                </legend>\n                                <div class="col-12 p-0 text-left content-accordion"> \n                                    ${e.quotaionBrokenDown.items.map((e=>`\n                                            <div class="col-12 d-flex justify-content-between align-items-start">\n                                                <span>${this.trans(e.description.split(":")[0])}:</span>\n                                                <b>${e.description.split(":")[1]??""}</b>\n                                            </div>`)).join("")}\n                                            <hr style="border-color: #dee2e6;border-style: dashed;">\n                                            <div class="col-12 d-flex justify-content-between  align-items-start">\n                                                <span>${this.trans("Cotización total")}:</span> <b>${"start"==e.status?"x.xx":e.quotationFormatted} SRM</b>\n                                             </div>\n                                             ${e.shpaPriceUpDesicionWarranty>0?`<hr style="border-color: #dee2e6;border-style: dashed;"><div class="col-12 d-flex justify-content-between  align-items-start">\n                                                 <span>${this.trans("Cobertura de apreciación")}:</span> <b>${e.shpaPriceUpDesicionWarranty.toFixed(2)} SRM</b></div>\n                                                 <div class="col-12 d-flex justify-content-between  align-items-start">\n                                                 <small><i class="mdi mdi-information"></i> <i>${this.trans("Se ocupará para cubrir una posible subida de precio. En caso contrario será reembolsado a tu wallet.")}</i></small>\n                                            </div>`:""}\n                                            <hr style="border-color: #dee2e6;border-style: dashed;">\n                                              ${e.quotationNote?.length&&"quotation"==e.status?`<div class="col-12 d-flex justify-content-between align-items-start mb-2 p-0">\n                                               <div class="rounded quotation-note p-3 col-12"><i><i class="mdi mdi mdi-comment-quote"></i> ${2==(e.quotationNote??"").split("<ul").length?`<span  id="messageall${e.id}" style="display:none">${e.quotationNote}</span><span id="messajeshort${e.id}">${e.quotationNote.split("<ul")[0]}<br><b  onclick="document.querySelector('#messageall${e.id}').style.display='block';document.querySelector('#messajeshort${e.id}').style.display='none';" class="text-white;cursor:pointer"><i class="mdi mdi-chevron-right"></i>${this.trans("Ver más")}</b></span>`:e.quotationNote} </i></div>\n                                            </div> `:""}\n                                            <div class="col-12 d-flex justify-content-between align-items-start" ${0==(e.quotationProof??"").length?' style="display:none !important" ':""}>\n                                               <span>${this.trans("Prueba de cotización")}: </span> <button class="btn btn-sm rounded rounded-pill btn-outline-info show-proof"><i class="mdi mdi-eye"></i> ${this.trans("Ver")}</button>\n                                            </div>\n                                    </div>\n                            </fieldset>`:""}\n                ${(e?.transactions??[]).length?`<fieldset class="col-12 mb-3 p-2 rounded border ${/cancelled|completed/.test(e.status)?"collapsed":""} ">\n                        <legend class="col-12 p-0">\n                            <div class="border shadow-sm px-3 py-1 bg-dark rounded header-accordion text-white" style="font-size: 1rem;cursor:pointer">\n                                <i class="mdi mdi-chevron-right"></i><i class="mdi mdi-chevron-down"></i> ${this.trans("Transacciones")}\n                            </div>\n                        </legend> \n                        <div class="col-12 p-0 content-accordion">\n                            ${e.transactions.reverse().map(((t,i)=>`<div class="col-12 d-flex rounded justify-content-between  align-items-start p-1 ${i%2==0?"bg-dark":""}">\n                                                             <h6 style="min-width:110px"><i class="mdi mdi-${"DBT"==t.type?"arrow-down-bold":"arrow-up-bold"}"></i> ${t.amount.toFixed(2)} SRM</h6>\n                                                        <div style="width:calc(100% - 110px)"><small class="text-uppercase">${t.memo.replace("REF:","").replace(e.reference,"").replace("COMPRA ASISTIDA","Cotización aceptada").trim()}</small></div>\n                                                </div>`)).join("")}\n                         </div>\n                    </fieldset>`:""}\n                    ${"completed"==e.status?`\n                        <fieldset class="col-12 mb-3 p-2 rounded border ${"cancelled"==e.status?"collapsed":""}">\n                            <legend class="col-12 p-0">\n                                 <div class="border shadow-sm px-3 py-1 bg-dark rounded header-accordion text-white" style="font-size: 1rem;cursor:pointer">\n                                     <i class="mdi mdi-chevron-right"></i><i class="mdi mdi-chevron-down"></i> ${this.trans("Actualizaciones de la tienda")}\n                                </div>\n                            </legend>\n                            <div class="content-accordion">\n                                 ${"number"==typeof t.length?`<small><i class="mdi mdi-information"></i> <i> ${this.trans("No se han registrado notificaciones provenientes de la tienda.")}</i></small>`:Object.keys(t).map(((e,i)=>t[e].length?`<div class="col-12 p-1 text-left shpa-check-points-item  ${i>0?"collapsed":""}">  \n                                    <h5 class="mt-0 rounded p-2 mb-0" style="font-size: 13px;background: #0a7088;"><i class="mdi mdi-chevron-right"></i><i class="mdi mdi-chevron-down"></i> ${this.trans("PEDIDO #: _CODE_",{
_CODE_:e
})}</h5>\n                                    <div class="col-12 m-auto shpa-check-points-item-content">\n                                        <div class="col-12 d-flex mt-3 justify-content-between align-items-start" style="border-top:1px solid #ffffff8f">\n                                        <small class="text-center shpa-checkpoint-step" style="margin-top:-14px">\n                                                <i class="mdi bg-dark  mdi-${/bought|shipped|in_transit|delivered/.test(t[e][t[e].length-1].status)?"check-circle":"circle"}" style="font-size:20px"></i><br>${this.trans("Confirmado")}\n                                        </small>\n                                        <small class="text-center shpa-checkpoint-step"  style="margin-top:-14px">\n                                                <i class="mdi bg-dark  mdi-${/shipped|in_transit|delivered/.test(t[e][t[e].length-1].status)?"check-circle":"circle"}" style="font-size:20px"></i><br>${this.trans("Enviado")}\n                                        </small>\n                                        <small class="text-center shpa-checkpoint-step"  style="margin-top:-14px">\n                                                <i class="mdi bg-dark  mdi-${/in_transit|delivered/.test(t[e][t[e].length-1].status)?"check-circle":"circle"}" style="font-size:20px"></i><br>${this.trans("En Tránsito")}\n                                        </small>\n                                        <small class="text-center shpa-checkpoint-step" style="margin-top:-14px">\n                                            <i class="mdi bg-dark  mdi-${/delivered/.test(t[e][t[e].length-1].status)?"check-circle":"circle"}" style="font-size:20px"></i><br>${this.trans("Entregado")}\n                                        </small>\n                                        </div>\n                                        <div class="rounded p-3">\n                                            <i><i class="mdi mdi mdi-comment-quote"></i> ${t[e][t[e].length-1].message}.</i><br> \n                                           \n                                            <a href="${t[e][t[e].length-1].image}" target="_blank">\n                                                <img src="${t[e][t[e].length-1].image}" onload="this.style.display='block'" class="rounded border p-1 my-2" height="60" style="display:none">\n                                            </a>\n                                        </div> \n                                         ${t[e][t[e].length-1]?.items?.length?`<ul style="background:#036c84 !important" class="py-2 rounded">\n                                                <h6 style="margin-left: -18px;"><i class="mdi mdi-package-variant"></i> CONTENIDO:<h6>\n                                                ${t[e][t[e].length-1]?.items.map((e=>`<li><small>${e}</small></li>`)).join()}</ul>`:""} \n                                        <div class="col-12 text-white" ${t[e].reverse().find((e=>(e?.courier??"").length>1&&(e?.trackingNumber??"").length>10))?"":'style="display:none"'}>\n                                            <small><i>Seguimiento ${t[e].reverse().find((e=>(e?.courier??"").length>1&&(e?.trackingNumber??"").length>10))?.courier??""}:</i> <a class="text-white" href="${t[e].reverse().find((e=>(e?.courier??"").length>1&&(e?.trackingNumber??"").length>10))?.trackingUrl??""}" target="_blank">${t[e].reverse().find((e=>(e?.courier??"").length>1&&(e?.trackingNumber??"").length>10))?.trackingNumber??""}</a></a></small>\n                                        </div>\n                                    </div> \n                                </div> `:"")).join("")} \n                             </div> \n                        </fieldset>`:""}\n               \n                    ${e.endorsements.length?`<fieldset class="col-12 mb-3 p-2 rounded border ${/cancelled|completed/.test(e.status)?"collapsed":""}">\n                        <legend class="col-12 p-0">\n                            <div class="border shadow-sm px-3 py-1 bg-dark rounded header-accordion text-white" style="font-size: 1rem;cursor:pointer">\n                                <i class="mdi mdi-chevron-right"></i><i class="mdi mdi-chevron-down"></i> ${this.trans("Transparencias")}\n                            </div>\n                        </legend> \n                        <div class="col-12 p-0 content-accordion">\n                            ${e.endorsements.map((e=>`<div class="rounded quotation-note p-1 col-12 mb-1 text-left">\n                            <div class="col-12 d-flex justify-content-between  align-items-start p-1">\n                            ${"pdf"==e.attachment.split(".").pop().toLowerCase()?`<a href="https://remesita.s3.amazonaws.com/uploads/order/${e.attachment}" target="_blank" class="p-1 text-white bg-danger border rounded"><i class="mdi mdi-file-pdf-box" style="font-size: 40px;"></i></a>`:`<a href="https://remesita.s3.amazonaws.com/uploads/order/${e.attachment}" target="_blank" class="p-0 bg-white border rounded"><img width="50px" class="rounded" src="https://remesita.s3.amazonaws.com/uploads/order/${e.attachment}"></a>`}    \n                                            <div class="pl-2" style="width:100%">\n                                                <h6>${e.title}</h6>\n                                                <small><i>${e.caption}</i></small>\n                                            </div>\n                                \n                            </div>\n                             </div>`)).join("")}\n                        </div> \n                    </fieldset>`:""}\n            </div> \n            <div class="col-12 mx-0 px-0 row add-shpa-buttons"> \n            ${"start"==e.status?`<div class="col-6 px-2">\n                        <button  type="button" class="prev-btn col-12 btn btn-lg btn-outline-info mb-1 text-uppercase"><i class="mdi mdi-arrow-left"></i> <span>${this.trans("Atrás")}</span></button>\n                    </div>\n                    <div class="col-6 px-2">\n                        <button  type="button" class="cancel-quotation-btn col-12 btn btn-lg btn-outline-danger mb-1 text-uppercase"><i class="mdi mdi-cancel"></i> <span>${this.trans("Cancelar")}</span></button>\n                    </div>`:"cancelled"==e.status||"completed"==e.status||"assigned"==e.status?`<div class="col-12 px-2">\n                        <button  type="button" class="prev-btn col-12 btn btn-lg btn-outline-info mb-1 text-uppercase"><i class="mdi mdi-arrow-left"></i> <span>${this.trans("Atrás")}</span></button>\n                    </div>`:"quotation"==e.status?`<div class="col-6 px-2">\n                                <button  type="button" class="cancel-quotation-btn col-12 btn  btn-outline-danger mb-1 text-uppercase"><i class="mdi mdi-cancel hidden-xs"></i> <span>${this.trans("Cancelar")}</span></button>\n                            </div>\n                            <div class="col-6 px-2">\n                                <button  type="button" class="accept-quotation-btn col-12 btn  btn-outline-info mb-1 text-uppercase"><span>${this.trans("Aceptar")}</span> <i class="mdi mdi-check-circle hidden-xs"></i></button>\n                            </div> \n                            <div class="col-12 py-2 px-2">\n                                <button  type="button" class="prev-btn col-12 btn btn-lg btn-outline text-white mb-1 text-uppercase"><i class="mdi mdi-arrow-left"></i> <span>${this.trans("Atrás")}</span></button>\n                            </div>`:"paid"==e.status||"assigned"==e.status||"paused"==e.status?`<div class="col-12 px-2">\n                                    <button type="button" class="help-btn col-12 btn btn-lg btn-info rounded-pill mb-1 text-uppercase"><i class="mdi mdi-help-circle"></i> <span>${this.trans("Necesito Asistencia")}</span></button>\n                              </div>\n                              <div class="col-12 px-2">\n                                    <button  type="button" class="prev-btn col-12 btn btn-lg btn-outline text-white mb-1 text-uppercas"><i class="mdi mdi-arrow-left "></i> <span>${this.trans("Atrás")}</span></button>\n                              </div>\n                              <form target="_blank" class="RemesitaAsistenciabot" style="display:none" action="https://t.me/RemesitaAsistenciabot?start=${encodeURIComponent(`Necesito ayuda con mi COMPRA ASISTIDA ${e.reference}`)}"></form>`:""}\n                    \n            </div>\n        </div>`,
this.detailContainer.querySelectorAll(".header-accordion").forEach((e=>{e.addEventListener("click",(()=>{e.parentElement.parentElement.classList.toggle("collapsed")}))})),this.detailContainer.querySelectorAll(".shpa-check-points-item").length>1&&this.detailContainer.querySelectorAll(".shpa-check-points-item").forEach(((e,t)=>{e.querySelector("h5").addEventListener("click",(()=>{this.detailContainer.querySelectorAll(".shpa-check-points-item").forEach(((e,i)=>{t!=i&&e.classList.add("collapsed")})),e.classList.toggle("collapsed")}))})),this.detailContainer.querySelector(".help-btn")&&this.detailContainer.querySelector(".help-btn").addEventListener("click",(()=>{$("#zsiq_float").length?($("#zsiq_float").click(),$("#home").removeClass("hideleft"),$(".activeitem").removeClass("activeitem"),$("#home-handler").addClass("activeitem")):this.detailContainer.querySelector(".RemesitaAsistenciabot").submit()})),
this.detailContainer.querySelector(".prev-btn")&&this.detailContainer.querySelector(".prev-btn").addEventListener("click",(()=>{this.detailContainer.innerHTML="",this.tabContainer.style.display="block"})),this.detailContainer.querySelector(".cancel-quotation-btn")&&this.detailContainer.querySelector(".cancel-quotation-btn").addEventListener("click",(()=>{this.cancelOrderUI(e.id)})),this.detailContainer.querySelector(".show-proof")&&this.detailContainer.querySelector(".show-proof").addEventListener("click",(()=>{window.alertModal("Prueba de cotización!",`<a target="_blank" href="https://remesita.s3.amazonaws.com/uploads/order/${e.quotationProof}"><img src="https://remesita.s3.amazonaws.com/uploads/order/${e.quotationProof}" class="col-12 border rounded p-0 mt-3" /></a>`)})),this.detailContainer.querySelector(".show-products")&&this.detailContainer.querySelector(".show-products").addEventListener("click",(()=>{
window.alertModal("Lista de compra",e.shpaItems.map((e=>`   <div class="d-flex justify-content-between  align-items-start py-2" style="border-bottom: 1px dashed #56c6e6; ">\n                            <img src="${e.thumbnail}" class="img-fluid rounded border shadow-sm" width="100" style="min-width: 80px;">\n                            <div class="pl-2 pr-0 text-left" style="width:calc(100% - 100px)">\n                                <h6 class="text-mija item-title">\n                                    <span style="${e.stock?"":"color: gray;text-decoration: line-through;"}">${e.title.length>80?e.title.substr(0,80)+"...":e.title}\n                                        <br><small>${this.trans("Cantidad")}: <b>${e.qty} ${1==e.qty?"artículo":"artículos"}</b></small><br><small>${this.trans("Precio unitario")}: <b>${parseFloat(e.price).toFixed(2)} ${e.currency??"USD"}</b></small>\n                                    </span> \n                                    ${e.stock?"":'<br><small class="badge badge-danger badge-pill"><small>AGOTADO</small></small>'}\n                                </h6>  \n                            </div>\n                        </div>`)).join(""))
})),this.detailContainer.querySelector(".accept-quotation-btn")&&this.detailContainer.querySelector(".accept-quotation-btn").addEventListener("click",(()=>{this.detailContainer.querySelector(".accept-quotation-btn").setAttribute("disabled","disabled"),this.detailContainer.querySelector(".accept-quotation-btn").innerHTML='<img src="/assets/img/loading-bars-blue.svg" class="m-auto" height="10" />';const t=()=>{this.detailContainer.querySelector(".accept-quotation-btn").removeAttribute("disabled"),this.detailContainer.querySelector(".accept-quotation-btn").innerHTML=`<span>${this.trans("Aceptar")}</span> <i class="mdi mdi-check-circle hidden-xs"></i>`;const t=[{value:"continue-under-10",label:`${this.trans("Estoy dispuesto a continuar siempre que el precio <b>no exceda el 10%</b> de la cotización.")}<br>\n                        <small class="badge badge-warning mt-1  badge-pill">${this.trans("Desición popular")}</small>`},{value:"continue-under-20",
label:`${this.trans("Estoy dispuesto a continuar siempre que el precio <b>no exceda el 20%</b> de la cotización.")}<br>\n                                <small class="badge badge-info mt-1  badge-pill">${this.trans("Desición recomendada")}</small>`},{value:"cancel-and-requote",label:`${this.trans("Cancelar y re-cotizar la orden")}<br>\n                            <small class="badge badge-dark mt-1 badge-pill">${this.trans("Agrega de 1h-24h al proceso")}</small>`},{value:"cancel-and-refund",label:this.trans("Cancelar y reembolsar el monto a mi Wallet")}];return window.choiceRowModal(this.trans("¿Que hacemos si cambia el precio?"),`<div class="col-12 p-0 mb-2" style="margin-top:-20px">${this.trans("Ayúdanos a tomar decisiones rápidas para ahorrar tiempo y evitar la cancelación del pedido.")}</div>`,t,!1,(t=>{
const i="continue-under-10"==t?"Al aceptar la cotización de la orden <b>_REF_</b> estaremos debitando <b>_AMOUNT_</b> SRM de tu Wallet, y adicional otro <b>10%</b> que será liberados si el precio no cambia.":"continue-under-20"==t?"Al aceptar la cotización de la orden <b>_REF_</b> estaremos debitando <b>_AMOUNT_</b> SRM de tu Wallet, y adicional otro <b>20%</b> que será liberados si el precio no cambia.":"Al aceptar la cotización de la orden <b>_REF_</b> estaremos debitando <b>_AMOUNT_</b> SRM de tu Wallet, esta accion es irreversible.";window.confirmModal(`<div class="col-12 text-left p-0">${this.trans(i,{_REF_:e.reference,_AMOUNT_:e.quotationFormatted})}\n                                <br><h5 class="text-danger mt-2">${this.trans("¿Estas seguro que deseas continuar?")}</h5></div>    `,(()=>{window.shpaPaymentProgress=1,window.shpaPaymentProgressTik=setInterval((()=>{const e=window.shpaPaymentProgress>=100||window.shpaPaymentProgress<=0
;e||(window.shpaPaymentProgress=Math.min(95,window.shpaPaymentProgress+5)),
this.detailContainer.querySelector(".add-shpa-buttons")&&(this.detailContainer.querySelector(".add-shpa-buttons").innerHTML=`\n                                                <div class="col-12 text-center">\n                                                    <h6>${this.trans(100==window.shpaPaymentProgress?"Pago completado":0==window.shpaPaymentProgress?"Error procesando pago":"Procesando pago")}</h6>\n                                                    <div class="progress border bg-dark mb-2" style="height: 10px;">\n                                                        <div class="progress-bar bg-${0==window.shpaPaymentProgress?"danger":window.shpaPaymentProgress<100?"info":"success"}" role="progressbar" style="width: ${0==window.shpaPaymentProgress?100:window.shpaPaymentProgress}%;" aria-valuenow="${window.shpaPaymentProgress}" aria-valuemin="0" aria-valuemax="100"></div>\n                                                    </div>\n                                                </div> \n                                                ${e?`<div class="col-12 py-2 px-2">\n                                               <button  type="button" class="prev-btn col-12 btn btn-lg btn-outline-info mb-1 text-uppercase"><i class="mdi mdi-arrow-left"></i> <span>${this.trans("Regresar a mi historal de órdenes")}</span></button>\n                                            </div>`:""}\n                                    `),
e&&(clearInterval(window.shpaPaymentProgressTik),this.detailContainer.querySelector(".prev-btn")&&this.detailContainer.querySelector(".prev-btn").addEventListener("click",(()=>{this.detailContainer.innerHTML="",this.tabContainer.style.display="block",this.orderHistoryUI()})))}),250),this.doPayOrder(e,t).then((e=>{window.shpaPaymentProgress=100,this.dispatchEvent(new CustomEvent("paid",{detail:e.order}))})).catch((e=>{window.shpaPaymentProgress=0,window.alertModal(this.trans("Ups! algo salio mal"),e)}))}))}),(()=>{this.detailContainer.querySelector(".accept-quotation-btn").removeAttribute("disabled"),this.detailContainer.querySelector(".accept-quotation-btn").innerHTML=`<span>${this.trans("Aceptar")}</span> <i class="mdi mdi-check-circle hidden-xs"></i>`}))};"delivery"!=e.shpaDeliveryMode||e.shpaRecipient?t():this.fetchRecipientAddress().then((i=>{this.recipientList=i;const n=[];return i.find((e=>(e.lockerProvider??"").length>0))||n.push({value:"create-wsy-locker",
label:`${this.trans("¿Aún no tienes un casillero en WeShipyou.com?")}<br>\n                                    <small><i class="mdi mdi-locker-multiple"></i> ${this.trans("Créalo ahora y recibe hasta 3%  de <b>CashBack</b>⚡️ en tus Compras Asistidas")}</small>`}),i.forEach((e=>{n.push({value:e.id,label:`${e.name}<br>\n                                        <small>${e.address.line1} ${e.address.line2}, ${e.address.city} ,${e.address.state} ${e.address.zip}, ${e.address.country}</small>`})})),window.choiceRowModal(this.trans("Conrfirma la dirección de envío de esta compra"),'<div class="col-12 p-0 mb-2" style="margin-top:-20px"></div>',n,!1,(i=>{if("create-wsy-locker"==i)this.getOrCreateLocker().then((i=>{this.recipientList.push(i),e.shpaRecipient={id:i.id,name:i.name,lockerProvider:i.lockerProvider??null,address:{line1:i.address.line1,line2:i.address.line2,city:i.address.city,state:i.address.state,zip:i.address.zip,country:i.address.country}},t()
})).catch((e=>window.alertModal(this.trans("Ups! algo salio mal"),this.trans("Ha ocurrido un error intentando crear tu casillero en Weshipyou.com. Por favor intenta de nuevo más tarde."))));else{const n=this.recipientList.find((e=>e.id==i));e.shpaRecipient={id:n.id,name:n.name,lockerProvider:n.lockerProvider??null,address:{line1:n.address.line1,line2:n.address.line2,city:n.address.city,state:n.address.state,zip:n.address.zip,country:n.address.country}},t()}}))})).catch((e=>{t()}))}))}doPayOrder(e,t){const i="continue-under-10"==t?.1*e.quotation:"continue-under-20"==t?.2*e.quotation:0;return new Promise(((n,s)=>{$.ajax({type:"POST",url:this.createApiUrl(`shpa/order/${e.id}/pay`),data:{priceUpDesicionWarranty:i??0,priceUpDesicion:t,recipientId:e.shpaRecipient?.id??null},dataType:"json",success:e=>n(e),error:e=>s(e?.responseJSON?.error??this.trans("Ocurrio un error procesando el pago. Por favor intenta de nuevo más tarde."))})}))}cancelOrderUI(e){
window.confirmModal(this.trans("¿Estas seguro que deseas cancelar esta orden?"),(()=>{setTimeout((()=>{if(this.detailContainer.querySelector(".cancel-btn")&&(this.detailContainer.querySelector(".cancel-btn").innerHTML=`<i class="mdi mdi-spin mdi-refresh"></i> ${this.trans("Espere")}`,this.detailContainer.querySelector(".cancel-btn").disabled=!0),this.querySelector(".add-shpa-buttons")){this.querySelectorAll(".add-shpa-buttons .col-6").forEach((e=>e.style.display="none"));const e=document.createElement("div");e.classList.add("shpa-item-container"),e.id=`${this.uniqueSuffix}-canceling-indicator`,this.querySelector(".add-shpa-buttons").appendChild(e),e.innerHTML=`<div class="col-12 text-center "><i class="mdi mdi-spin mdi-refresh"></i> ${this.trans("Cancelando")}... </div>`}this.cancelOrder(e).then((()=>{this.ordersTabBtn.click(),this.detailContainer.innerHTML="",this.tabContainer.style.display="block"})).catch((e=>{this.querySelector(".add-shpa-buttons .col-6").style.display="block",
window.alertModal(this.trans("Ups! algo salio mal"),this.trans("Ha ocurrido un error intentando cancelar la orden. Por favor intenta de nuevo más tarde.")),this.detailContainer.querySelector(".cancel-btn")&&(this.detailContainer.querySelector(".cancel-btn").innerHTML=`<i class="mdi mdi-cancel"></i> <span>${this.trans("Cancelar")}</span>`,this.detailContainer.querySelector(".cancel-btn").disabled=!1),this.querySelectorAll(".add-shpa-buttons .col-6").forEach((e=>e.style.display="block"))}))}),500)}))}cancelOrder(e){return new Promise(((t,i)=>{$.ajax({type:"POST",url:this.createApiUrl(`shpa/order/${e}/cancel`),dataType:"json",success:e=>t(e),error:e=>i(e)})}))}statusData(e){switch(e){case"start":return{label:this.trans("Esperando Cotización"),ico:"clock",badgeColor:"dark"};case"cancelled":return{label:this.trans("Pedido Cancelado"),ico:"cancel",badgeColor:"danger"};case"quotation":return{label:this.trans("Cotización Establecida"),ico:"dollar",badgeColor:"warning"};case"paid":return{
label:this.trans("En breve será procesada"),ico:"clock",badgeColor:"secondary"};case"assigned":return{label:this.trans("Estamos comprando"),ico:"spin mdi-refresh",badgeColor:"warning"};case"paused":return{label:this.trans("Proceso Pausado"),ico:"pause-octagon-outline",badgeColor:"secondary"};case"completed":return{label:this.trans("Completada"),ico:"check-circle",badgeColor:"success"}}return{label:this.trans("Procesando"),ico:"clock",badgeColor:"info"}}choicePickUpLockerUI(){Object.keys(this.data).reduce(((e,t)=>e+parseFloat(this.data[t].price)*this.data[t].qty),0),Object.keys(this.data).reduce(((e,t)=>e+this.data[t].qty),0);const e=`<div class="border mb-2 rounded p-2 bg-dark col-12 basket-header mt-2" >  \n                               <h6>${this.trans("¿Dónde se te hace más conveniente recoger tu compra de _COMERCE_?",{_COMERCE_:"<b>"+this.choiceComerce?.name+"</b>"})}</h6>  \n                      </div>`
;this.assistanceContainer.querySelector(".shpa-step3")||(this.pickupContainer=document.createElement("div"),this.pickupContainer.classList.add("shpa-step3","col-12","p-0"),this.pickupContainer.id=`${this.uniqueSuffix}-pickup-container`,this.assistanceContainer.appendChild(this.pickupContainer)),this.step(3,null);const t=this.choiceComerce.pickUpOn.find((e=>(this.startData?.quotationData?.pickup??"").replace("Ave.","Avenida").indexOf(e.replace("Ave.","Avenida").split(".")[0])>-1))
;this.pickupContainer.innerHTML=t?`${e}<div class="recipient-list-container px-0 col-12">    \n                   <button class="pickup-item border btn btn-lg btn-outline-info col-12 mt-1 mb-3 selected" type="button">\n                                  <label class="p-0"><input disabled checked style="display:none" type="checkbox" name="pickup" value="${t}"> <i class="mdi mdi-map-marker"></i> ${t}</label>\n                            </button>           \n                        </div> \n                        <div class="col-12 mx-0 px-0  row nav-shpa-buttons" >\n                            <div class="col-6 pl-0 pr-1">\n                                <button  type="button" class="prev-shpa-item-btn col-12 btn btn-lg btn-outline-info mb-1 text-uppercase"><i class="mdi mdi-arrow-left"></i> <span class="hidden-sm">${this.trans("Atrás")}</span></button>\n                            </div>\n                            <div class="col-6 pr-0 pl-1">\n                                <button  type="button" class="next-shpa-btn col-12 btn btn-lg btn-outline-info mb-1 text-uppercase"><span class="hidden-sm">${this.trans("Siguiente")}</span> <i class="mdi mdi-arrow-right"></i></button>\n                            </div>\n                        </div>`:`${e}<div class="recipient-list-container px-1 col-12" style="max-height: calc(100vh - 384px);overflow-y: auto;-webkit-overflow-scrolling: touch;">    \n            ${this.choiceComerce.pickUpOn.map((e=>`<button class="pickup-item border btn btn-md btn-outline-info col-12 my-1 px-1 py-1"  type="button">\n                          <label class="p-0"><input style="display:none" onchange="this.parentElement.parentElement.classList.remove('selected');if(this.checked)this.parentElement.parentElement.classList.add('selected')" type="checkbox" name="pickup" value="${e}"> <i class="mdi mdi-map-marker"></i> ${e}</label>\n                    </button>`)).join("")}                 \n                </div>\n                <div class="alert pt-1 px-2 alert-dark mt-2">\n                    <small><i class="mdi mdi-information"></i> ${this.trans("Puedes seleccionar más de una opción porque no podemos garantizar que todos los artículos estan disponibles en todas las ubicaciones")}</small>\n                </div>\n                <div class="col-12 mx-0 px-0  row nav-shpa-buttons" >\n                    <div class="col-6 pl-0 pr-1">\n                        <button  type="button" class="prev-shpa-item-btn col-12 btn btn-lg btn-outline-info mb-1 text-uppercase"><i class="mdi mdi-arrow-left"></i> <span class="hidden-sm">${this.trans("Atrás")}</span></button>\n                    </div>\n                    <div class="col-6 pr-0 pl-1">\n                        <button  type="button" class="next-shpa-btn col-12 btn btn-lg btn-outline-info mb-1 text-uppercase"><span class="hidden-sm">${this.trans("Siguiente")}</span> <i class="mdi mdi-arrow-right"></i></button>\n                    </div>\n                </div>`,
this.pickupContainer.querySelector("button.next-shpa-btn").addEventListener("click",(()=>{this.pickUpChoices=[],this.pickupContainer.querySelectorAll('input[type="checkbox"]:checked').forEach((e=>{this.pickUpChoices.push(e.value)})),this.pickUpChoices.length&&this.createOrderUI()})),this.pickupContainer.querySelector("button.prev-shpa-item-btn").addEventListener("click",(()=>this.step(2,null)))}captureRecipientAddressUI(e){Object.keys(this.data).reduce(((e,t)=>e+parseFloat(this.data[t].price)*this.data[t].qty),0)
;const t=Object.keys(this.data).reduce(((e,t)=>e+this.data[t].qty),0),i=`<div class="border mb-2 rounded p-2 bg-dark col-12 basket-header mt-2" > \n                    <span data-toggle="tooltip" title="${this.trans("Sumatoria de los costos de cada producto sin incluir costo de envío ni comisión de Remesita")}" class="badge  float-right badge-pill badge-info" style="display: flex;align-content: center;align-items: center;justify-content: center;">\n                        <div class="comerce-logo-small mr-2" style="background-image: url(/assets/img/logos/${this.choiceComerce?.logo})"></div> <span class="total-basket">${this.trans("_N_ Productos",{_N_:t})}</span>\n                    </span> \n                    <h6>${this.trans("Adónde quieres enviar tu compra de _COMERCE_?",{_COMERCE_:"<b>"+this.choiceComerce?.name+"</b>"})}</h6> \n                </div>`;if(this.assistanceContainer.querySelector(".shpa-step3")||(this.recipientContainer=document.createElement("div"),
this.recipientContainer.classList.add("shpa-step3","col-12","p-0"),this.recipientContainer.id=`${this.uniqueSuffix}-recipient-container`,this.assistanceContainer.appendChild(this.recipientContainer)),this.step(3,null),e){
this.recipientContainer.innerHTML=` \n                ${i}\n                <h6><i class="mdi mdi-map-marker-radius"></i> ${this.trans("Nueva dirección de recepción para tus compras")}</h6>\n                <div class="add-recipient-container px-0 col-12"> \n                   <div class="form-group no-select">\n                        <label class="mb-1 pb-0" for="${this.uniqueSuffix}recipient-name">${this.trans("¿Quién recibirá tu compra?")}</label>\n                         <div class="shap-item-input">\n                            <input type="text" id="${this.uniqueSuffix}recipient-name"  required>\n                        </div>\n                    </div>\n                     <div class="row">\n                        <div class="form-group no-select col-6 pr-1">\n                            <label class="mb-1 pb-0" for="${this.uniqueSuffix}recipient-phone">${this.trans("Teléfono de contacto")}</label>\n                            <div class="shap-item-input">\n                                <input type="tel"  id="${this.uniqueSuffix}recipient-phone"  required> \n                           </div>\n                        </div>  \n                        <div class="form-group no-select col-6 pl-1">\n                             <label class="mb-1 pb-0" for="${this.uniqueSuffix}recipient-country">${this.trans("País")}</label>\n                             <div class="shap-item-input p-1">\n                                <select type="text" id="${this.uniqueSuffix}recipient-country" required>\n                                    ${this.choiceComerce.shipTo.map(((e,t)=>`<option value="${e}" ${0==t?"selected":""}>${"US"==e?"Estados Unidos":"CU"==e?"Cuba":e}</option>`)).join("")} \n                                </select>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class="form-group no-select">\n                        <label class="mb-1 pb-0" for="${this.uniqueSuffix}recipient-address1">${this.trans("Primera línea de la dirección")}</label>\n                         <div class="shap-item-input">\n                            <input type="tel" id="${this.uniqueSuffix}recipient-address1" required>\n                        </div>\n                    </div>     \n                    <div class="form-group no-select">\n                        <label class="mb-1 pb-0" for="${this.uniqueSuffix}recipient-address2">${this.trans("Segunda línea de la dirección")} (${this.trans("Opcional")})</label>\n                         <div class="shap-item-input">\n                            <input type="text"   id="${this.uniqueSuffix}recipient-address2">\n                        </div>\n                    </div>   \n                    <div class="row">\n                        <div class="form-group no-select col-12">\n                            <label class="mb-1 pb-0" for="${this.uniqueSuffix}recipient-city">${this.trans("Ciudad")}</label>\n                            <div class="shap-item-input">\n                                <input type="text"    id="${this.uniqueSuffix}recipient-city" required>\n                            </div>\n                        </div>  \n                    </div>  \n                    <div class="row">\n                        <div class="form-group no-select col-6 pr-1">\n                            <label class="mb-1 pb-0" for="${this.uniqueSuffix}recipient-state">${this.trans("Estado/Provincia")}</label>\n                            <div class="shap-item-input p-1">\n                                <select type="text" id="${this.uniqueSuffix}recipient-state" required >  \n                                </select>\n                            </div>\n                        </div>  \n                        <div class="form-group no-select col-6 pl-1">\n                            <label class="mb-1 pb-0" for="${this.uniqueSuffix}recipient-zip">${this.trans("Código Postal")}</label>\n                            <div class="shap-item-input">\n                                <input type="text" id="${this.uniqueSuffix}recipient-zip" required>\n                            </div>\n                        </div>  \n                        \n                    </div>\n                </div>\n                <div class="col-12 p-0 recipient-data-error" style="display:none">\n                    <div class="alert alert-danger">${this.trans("Por favor, completa todos los campos")}</div>\n                </div>\n                <div class="col-12 mx-0 px-0 row add-shpa-buttons">\n                    <div class="col-6 pl-0 pr-1">\n                        <button  type="button" class="prev-shpa-btn col-12 btn btn-lg btn-outline-info mb-1 text-uppercase"><i class="mdi mdi-arrow-left"></i> <span class="hidden-sm">${this.trans("Atrás")}</span></button>\n                    </div>\n                    <div class="col-6 pr-0 pl-1">\n                        <button  type="button" class="next-shpa-btn col-12 btn btn-outline-info mb-1 text-uppercase"><span class="hidden-sm">${this.trans("Guardar")}</span> <i class="mdi mdi-content-save-outline"></i></button>\n                    </div>\n                </div>`,
this.step(3,null);const e=()=>this.recipientContainer.querySelector(".recipient-data-error").style.display="none",t=t=>this.recipientContainer.querySelector(`#${this.uniqueSuffix}recipient-${t}`).addEventListener("input",e);t("name"),t("phone"),t("zip"),t("address1"),t("address2"),t("city"),t("state");const n=this.recipientContainer.querySelector(`#${this.uniqueSuffix}recipient-country`),s=this.recipientContainer.querySelector(`#${this.uniqueSuffix}recipient-state`);n&&s&&(n.addEventListener("change",(()=>{switch(n.value){case"US":s.innerHTML=[{n:"Alabama",c:"AL"},{n:"Alaska",c:"AK"},{n:"Arizona",c:"AZ"},{n:"California",c:"CA"},{n:"Colorado",c:"CO"},{n:"Connecticut",c:"CT"},{n:"Delaware",c:"DE"},{n:"Florida",c:"FL"},{n:"Georgia",c:"GA"},{n:"Hawaii",c:"HI"},{n:"Idaho",c:"ID"},{n:"Illinois",c:"IL"},{n:"Indiana",c:"IN"},{n:"Iowa",c:"IA"},{n:"Kansas",c:"KS"},{n:"Kentucky",c:"KY"},{n:"Louisiana",c:"LA"},{n:"Maine",c:"ME"},{n:"Maryland",c:"MD"},{n:"Massachusetts",c:"MA"},{n:"Michigan",c:"MI"
},{n:"Minnesota",c:"MN"},{n:"Mississippi",c:"MS"},{n:"Missouri",c:"MO"},{n:"Montana",c:"MT"},{n:"Nebraska",c:"NE"},{n:"Nevada",c:"NV"},{n:"New Hampshire",c:"NH"},{n:"New Jersey",c:"NJ"},{n:"New Mexico",c:"NM"},{n:"New York",c:"NY"},{n:"North Carolina",c:"NC"},{n:"North Dakota",c:"ND"},{n:"Ohio",c:"OH"},{n:"Oklahoma",c:"OK"},{n:"Oregon",c:"OR"},{n:"Pennsylvania",c:"PA"},{n:"Rhode Island",c:"RI"},{n:"South Carolina",c:"SC"},{n:"South Dakota",c:"SD"},{n:"Tennessee",c:"TN"},{n:"Texas",c:"TX"},{n:"Utah",c:"UT"},{n:"Vermont",c:"VT"},{n:"Virginia",c:"VA"},{n:"Washington",c:"WA"},{n:"West Virginia",c:"WV"},{n:"Wisconsin",c:"WI"},{n:"Wyoming",c:"WY"}].map((e=>`<option class="state-of-US" ${"FL"==e.c?"selected":""} value="${e.c}">${e.n}</option>`)).join(""),setTimeout((()=>$(`#${this.uniqueSuffix}recipient-phone`).mask("+1 (000) 000-0000")),100);break;case"CU":s.innerHTML=[{n:"Pinar del Río",c:"PR"},{n:"Artemisa",c:"AR"},{n:"La Habana",c:"LH"},{n:"Mayabeque",c:"MY"},{n:"Matanzas",c:"MT"},{
n:"Cienfuegos",c:"CF"},{n:"Villa Clara",c:"VC"},{n:"Sancti Spíritus",c:"SS"},{n:"Ciego de Ávila",c:"CA"},{n:"Camagüey",c:"CM"},{n:"Las Tunas",c:"LT"},{n:"Holguín",c:"HO"},{n:"Granma",c:"GR"},{n:"Santiago de Cuba",c:"SC"},{n:"Guantánamo",c:"GU"},{n:"Isla de la Juventud",c:"IJ"}].map((e=>`<option class="state-of-CU" ${"LH"==e.c?"selected":""} value="${e.c}">${e.n}</option>`)).join(""),setTimeout((()=>$(`#${this.uniqueSuffix}recipient-phone`).mask("+5350000000")),100)}})),n.value=this.choiceComerce.shipTo[0],n.dispatchEvent(new Event("change"))),this.recipientContainer.querySelector("button.prev-shpa-btn").addEventListener("click",(()=>this.captureRecipientAddressUI())),this.recipientContainer.querySelector("button.next-shpa-btn").addEventListener("click",(()=>{
const t=this.recipientContainer.querySelector(`#${this.uniqueSuffix}recipient-name`).value,i=(this.recipientContainer.querySelector(`#${this.uniqueSuffix}recipient-phone`).value??"").replace(/\(|\)|-|\s/g,"").trim(),n=(this.recipientContainer.querySelector(`#${this.uniqueSuffix}recipient-zip`).value??"").trim(),s=(this.recipientContainer.querySelector(`#${this.uniqueSuffix}recipient-address1`).value??"").trim(),a=(this.recipientContainer.querySelector(`#${this.uniqueSuffix}recipient-address2`).value??"").trim(),r=(this.recipientContainer.querySelector(`#${this.uniqueSuffix}recipient-city`).value??"").trim(),o=(this.recipientContainer.querySelector(`#${this.uniqueSuffix}recipient-state`).value??"").trim(),l=(this.recipientContainer.querySelector(`#${this.uniqueSuffix}recipient-country`).value??"USA").trim();t.length<3||i.length<10||s.length<3||r.length<3||o.length<2||n.length<5?this.recipientContainer.querySelector(".recipient-data-error").style.display="block":(e(),
this.recipientContainer.querySelector("button.next-shpa-btn").disabled=!0,this.recipientContainer.querySelector("button.next-shpa-btn").innerHTML=`<i class="mdi mdi-spin mdi-refresh"></i> <span class="hidden-sm">${this.trans("Guardando")}</span>`,this.storeRecipient(t,i,s,a,r,o,n,l).then((()=>this.captureRecipientAddressUI())).catch((e=>{window.alertModal(this.trans("Ups! algo salio mal"),this.trans("Ha ocurrido un error intentando almacenar la dirección de recepción. Por favor intenta de nuevo más tarde.")),this.captureRecipientAddressUI()})))})),setTimeout((()=>{$(`#${this.uniqueSuffix}recipient-zip`).mask("00000"),$(`#${this.uniqueSuffix}recipient-phone`).mask("US"==this.choiceComerce.shipTo[0]?"+1 (000) 000-0000":"CU"==this.choiceComerce.shipTo[0]?"+5350000000":"+0000000000")}),100)
}else this.recipientContainer.innerHTML=`<div class="text-center p-5 col-12" >                    \n                            <img src="/assets/img/loading-bars-blue.svg" class="m-auto" height="20" /><br>\n                            <small>${this.trans("Cargando tus direcciones")}....</small>\n                        </div>`,this.fetchRecipientAddress().then((e=>{
const t=e.find((e=>(e.lockerProvider??"").length>0)),n=!t&&this.choiceComerce.shipTo.indexOf("US")>-1?`<button class="locker-create-btn border btn btn-lg btn-outline-info col-12 my-1" type="button" style="border-style:dashed !important">\n                                <div  class="p-3">\n                                    <i class="mdi mdi-locker-multiple"></i> ${this.trans("¿Aún no tienes un casillero en WeShipyou.com?")}\n                                    <br><small>${this.trans("Créalo ahora y recibe hasta 3%  de <b>CashBack</b>⚡️ en tus Compras Asistidas")}</small>\n                                </div>\n                            </button>`:""
;this.recipientContainer.innerHTML=`\n                        ${i}\n                    <div class="recipient-list-container px-0 col-12"> \n                     <button class="recipient-add-btn border btn btn-lg btn-outline-info col-12 mt-0 mb-2" type="button" style="border-style:dashed !important">\n                            <div class="p-3">\n                                 <i class="mdi mdi-plus"></i> ${this.trans("Agregar nueva dirección")}\n                            </div>\n                    </button>\n                      ${e.map((e=>`<div class="swipe-container">\n                                <div class="recipient-btn border btn btn-lg btn-outline-info col-12 swipeable-button" type="div">\n                                    <div style="text-align: left;">\n                                       <img class="float-right border rounded-pill" width="30" height="30" style="border-color: #56c6e6 !important;position: absolute;right: 11px; top: 10px;" src="https://remesita.s3.amazonaws.com/flags/${e.address.countryIso}.png">\n                                        <h5>${e.name}</h5>\n                                        <small style="display:${(e.lockerProvider??"").length?"block":"none"}"><i class="mdi mdi-locker-multiple"></i> ${this.trans("Casillero proveido por _PROVIDER_",{
_PROVIDER_:e.lockerProvider})}</small> \n                                        <h6>${e.address.line1} ${e.address.line2}, ${e.address.city} ,${e.address.state} ${e.address.zip}, ${e.address.country}</h6>\n                                        <span class="badge badge-dark badge-pill" style="display:${(e.cashback??e.discount)>0?"block":"none"}">⚡️ ${this.trans("Hasta _CB_% de CashCack",{_CB_:100*(e.cashback??e.discount??0)
})}</span>                                 \n                                    </div> \n                                </div>\n                                <div class="swipeable-menu">\n                                    <h5 class="col-12 text-center">${this.trans("¿Quieres usar esta dirección?")}</h5>\n                                    <div class="col-12 p-0 text-center">\n                                        <button class="btn btn-sm btn-outline-info cancel-swipeable mb-2"><i class="mdi mdi-arrow-left"></i> ${this.trans("Cancelar")}</button>\n                                        ${(e.lockerProvider??"").length?"":`<button class="btn btn-sm btn-outline-info mb-2 delete-recipient" rid="${e.id}"><i class="mdi mdi-delete-circle"></i> ${this.trans("Eliminar")}</button>`}\n                                        <button class="btn btn-sm btn-outline-info mb-2 choice-recipient" rid="${e.id}"><i class="mdi mdi-marker-check"></i> ${this.trans("Usar")}</button>\n                                    </div>\n                                </div>\n                            </div>`)).join("")}\n                        ${n} \n                        <button type="button" class="prev-shpa-step3-btn col-12 btn btn-lg btn-outline-info mb-1 text-uppercase">\n                            <i class="mdi mdi-arrow-left"></i> <span class="hidden-sm">${this.trans("Atrás")}</span>\n                        </button>\n\n                    </div>\n                    <div class="col-12 mx-0 px-0 row nav-shpa-buttons" style="display:none">\n                        <div class="col-6 pl-0 pr-1">\n                            <button  type="button" class="prev-shpa-item-btn col-12 btn btn-lg btn-outline-info mb-1 text-uppercase"><i class="mdi mdi-arrow-left"></i> <span class="hidden-sm">${this.trans("Atrás")}</span></button>\n                        </div>\n                        <div class="col-6 pr-0 pl-1">\n                            <button  type="button" class="next-shpa-btn col-12 btn btn-lg btn-outline-info mb-1 text-uppercase"><span class="hidden-sm">${this.trans("Siguiente")}</span> <i class="mdi mdi-arrow-right"></i></button>\n                        </div>\n                    </div>`
;const s=this.recipientContainer.querySelectorAll(".swipe-container");if(s){let a,r,o,l=null;function c(e){e.previousElementSibling.style.transform="translateX(0)",e.style.right="-100%"}s.forEach((e=>{const t=e.querySelector(".swipeable-button"),i=e.querySelector(".swipeable-menu");t.addEventListener("click",(e=>{l&&l!==i&&c(l),l=i,t.style.transform="translateX(-100%)",i.style.right="0"})),t.addEventListener("mousedown",(e=>{a=e.clientX,o=!1,l&&l!==i&&c(l);const n=e=>{r=e.clientX;const i=r-a;i<0&&(t.style.transform=`translateX(${i}px)`,o=!0)},s=()=>{document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",s),o&&r-a<-50?(l=i,t.style.transform="translateX(-100%)",i.style.right="0"):(t.style.transform="translateX(0)",i.style.right="-100%")};document.addEventListener("mousemove",n),document.addEventListener("mouseup",s)})),e.querySelector(".cancel-swipeable").addEventListener("click",(()=>l&&c(l))),
e.querySelector(".delete-recipient")&&e.querySelector(".delete-recipient").addEventListener("click",(()=>this.removeRecipientUI(e.querySelector(".delete-recipient").getAttribute("rid")))),e.querySelector(".choice-recipient").addEventListener("click",(e=>{this.recipientChoicedId=e.target.getAttribute("rid"),this.createOrderUI()}))}))}!t&&this.choiceComerce.shipTo.indexOf("US")>-1&&this.recipientContainer.querySelector("button.locker-create-btn").addEventListener("click",(()=>this.createLockerUI())),this.recipientContainer.querySelector("button.recipient-add-btn").addEventListener("click",(()=>this.captureRecipientAddressUI(!0))),this.recipientContainer.querySelector("button.prev-shpa-step3-btn").addEventListener("click",(()=>this.step(2,null)))})).catch((e=>{}))}storeRecipient(e,t,i,n,s,a,r,o){return new Promise(((l,c)=>{$.ajax({type:"POST",url:this.createApiUrl("shpa/recipient"),dataType:"json",data:{name:e,phone:t,address:{line1:i,line2:n,city:s,state:a,zip:r,country:o}},
success:e=>(e.error??"").length?c([e.error]):(e.errors??[]).length?c(e.errors):void 0===Object.keys(this.data).find((t=>this.data[t].link==e.link))?l(e):c(this.trans("Este producto ya ha sido agregado")),error:e=>c(e)})}))}notImplemented(){window.alertModal("Hey, maestro impaciente!","Esta funcionalidad está en un campamento de entrenamiento, levantando pesas de código, haciendo flexiones de diseño y corriendo maratones de pruebas. Pronto estará lista para la batalla!")}addItemUI(e){let t=this.assistanceContainer.querySelectorAll(".shpa-item-container").length+1;1==t&&(this.choiceComerce||(this.choiceComerce={logo:null,maximumTikcket:-1,minimumTikcket:1,maximumTikcket:5e3,percentFee:.05,fixFee:1,fixMinimum:10}),
this.assistanceContainer.innerHTML=`\n                        <div class="border mb-2 rounded p-2 bg-dark col-12 basket-header mt-2 shpa-step2">\n                            <div class="col-12 p-0">\n                                <span data-toggle="tooltip" title="${this.trans("Sumatoria de los costos de cada producto sin incluir costo de envío ni comisión de Remesita")}" class="badge float-right  badge-pill badge-info" style="display: flex;align-content: center;align-items: center;justify-content: center;">\n                                <div class="comerce-logo-small mr-2" style="background-image: url(/assets/img/logos/${this.choiceComerce?.logo})"></div> <span class="total-basket">${this.trans("_N_ Productos",{_N_:0})}</span></span>\n                                <h6>${this.trans("Mi lista de compras en _COMERCE_",{_COMERCE_:"<b>"+this.choiceComerce?.name+"</b>"
})}</h6> \n                                ${this.importFromBrowserExtension?`<small class="text-muted" style="display:block;line-height: 14px;"><i class="mdi mdi-information"></i> ${this.trans("Datos importados desde la extensión del navegador")}</small>`:""}\n                            </div>\n                            <small class="text-muted" style="display:block;line-height: 14px;">\n                                <i class="mdi mdi-information"></i> ${-1==this.choiceComerce.maximumTikcket?this.trans("El costo total de los productos debe superar los _MIN_ USD",{_MIN_:this.choiceComerce.minimumTikcket}):this.trans("El costo total de los productos debe estar en el rango _MIN_ a _MAX_ USD",{_MIN_:this.choiceComerce.minimumTikcket,_MAX_:this.choiceComerce.maximumTikcket
})}\n                            </small>\n                        </div>\n                        <div class="item-list-container shpa-step2"></div>\n                        ${(this.startData?.quotationData?.items??[]).length?`<div class="market-quotation rounded border mb-3 p-3 col-12 shpa-step2">\n                                    <h5>${this.trans("Cotización preliminar")}</h5>\n                                    <ul class="pl-3">\n                                        ${this.startData.quotationData.items.map((e=>`<li>${e.label}: <b>${e.value}</b></li>`)).join("")}\n                                        <li class="text-info">Comisión de Remesita: <b>${Math.max(parseFloat(this.startData.quotationData.items[this.startData.quotationData.items.length-1].value)*this.choiceComerce.percentFee+this.choiceComerce.fixFee,this.choiceComerce.fixMinimum).toFixed(2)} SRM</b></li>\n                                        <li class="text-info"><h5>Total estimado: <b>${(Math.max(parseFloat(this.startData.quotationData.items[this.startData.quotationData.items.length-1].value)*this.choiceComerce.percentFee+this.choiceComerce.fixFee,this.choiceComerce.fixMinimum)+parseFloat(this.startData.quotationData.items[this.startData.quotationData.items.length-1].value)).toFixed(2)} SRM</b></h5></li>\n                                    </ul>\n                                    <div class="alert p-2 alert-dark"><small><i>${this.trans("El precio mostrado es solo un estimado. Al proporcionar la dirección de entrega, pueden añadirse costos de envío e impuestos o aplicarse descuentos. Si el precio final es menor o no se cobra el envío, reembolsaremos la diferencia.")}</i></small></div>\n                                </div>`:""}\n                        <div class="shpa-step2 col-12 p-0">\n                            <div class="col-12 mx-0 px-0 row add-shpa-buttons " style="display:none"> \n                                <div class="col-6 pl-0 pr-1" style="${(this.startData?.quotationData?.items??[]).length||this.importFromBrowserExtension?"display:none":""}">\n                                    <button  type="button" class="add-shpa-item-btn col-12 btn btn-lg btn-outline-info mb-1 text-uppercase"><span class="hidden-sm">${this.trans("Otro producto")}</span>  <i class="mdi mdi-plus"></i></button>\n                                </div>\n                                <div class="col-${(this.startData?.quotationData?.items??[]).length||this.importFromBrowserExtension?"12 p-0":"6 pr-0 pl-1"} ">\n                                    <button  type="button" class="next-shpa-btn col-12 btn btn-outline-info mb-1 btn-lg text-uppercase"><span class="${(this.startData?.quotationData?.items??[]).length||this.importFromBrowserExtension?"":"hidden-sm"}">${this.trans("Siguiente")}</span> <i class="mdi mdi-arrow-right"></i></button>\n                                </div>\n                            </div>\n                        </div>\n                    `,
this.assistanceContainer.querySelector(".add-shpa-item-btn").addEventListener("click",(()=>{this.assistanceContainer.querySelector(".add-shpa-item-btn").disabled=!0,this.addItemUI()})),this.assistanceContainer.querySelector(".next-shpa-btn").addEventListener("click",(()=>{this.basketHtml=this.innerHTML,this.generalInstructions="",(this.choiceComerce?.pickUpOn??[]).length?this.choicePickUpLockerUI():this.captureRecipientAddressUI()})));const i=document.createElement("div");i.classList.add("shpa-item-container"),i.id=`${this.uniqueSuffix}-shpa-item${t}`,this.assistanceContainer.querySelector(".item-list-container").appendChild(i),i.innerHTML=`\n                <label class="no-select shpa-item-label p-0 mb-0" id="${this.uniqueSuffix}-shpa-item${t}label" for="${this.uniqueSuffix}-shpa-item${t}link">\n                    <div class="prod-thumbnail" style="display:none"></div><span class="shpa-item-number">${this.trans("Producto #_N_",{_N_:t
})}</span> <button style="display:none;position: absolute;right: 17px;" class="btn rounded-pill btn-sm btn-outline-info float-right"><i class="mdi mdi-pencil"></i></button></label>\n                    <div class="shap-item-input form-group  ${e?"":"d-flex"} no-select" style="${e?"display:none":""}">\n                        <input \n                            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')"  \n                            autocomplete="off" type="url" \n                            placeholder="${this.trans("Pegue la url del artículo")}"> \n                            <div class="input-group-append url-cleaner" style="display:none">\n                                <button class="btn btn-dark btn-sm btn-cancel"><i class="mdi mdi-close"></i></button>\n                            </div>\n                    </div> \n                    <div class="shpa-item-url-help pt-2 animate slideDown" style="display:none"></div>\n                    <div class="shpa-item-data"></div>\n                    <div class="shpa-item-indicator text-center p-3 col-12" style="display:none">                  \n                        <div class="progress border bg-dark mb-2" style="height: 10px;">\n                            <div class="progress-bar bg-info" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>\n                        </div>\n                        <small class="progress-info"><i class="mdi mdi-spin mdi-refresh"></i> ${this.trans("Espere mientras conectamos con _COMMERCE_",{
_COMMERCE_:this.choiceComerce?.name})}....</small>\n                    </div>\n                `,window.shpaScrapTiks&&clearInterval(window.shpaScrapTiks),window.shpaScrapProgress=0,window.shpaScrapTiks=setInterval((()=>{window.shpaScrapProgress=Math.min(95,window.shpaScrapProgress+5),i.querySelector(".shpa-item-indicator .progress-bar").style.width=`${window.shpaScrapProgress}%`,i.querySelector(".shpa-item-indicator .progress-bar").setAttribute("aria-valuenow",`${window.shpaScrapProgress}%`),i.querySelector(".shpa-item-indicator .progress-info").innerHTML=`<i class="mdi mdi-spin mdi-refresh"></i> ${this.trans(window.shpaScrapProgress<35?"Conectando con _COMMERCE_":window.shpaScrapProgress<85?"Leyendo datos":"Analizando riesgo",{_COMMERCE_:this.choiceComerce?.name})}....`,window.shpaScrapProgress>=95&&clearInterval(window.shpaScrapTiks)}),500),i.querySelector(".url-cleaner").addEventListener("click",(e=>{i.querySelector(".url-cleaner").style.display="none",
i.querySelector('[type="url"]').value="",i.querySelector(".shpa-item-url-help").style.display="none"})),i.querySelector('[type="url"]').addEventListener("input",(e=>{if(i.querySelector(".url-cleaner").style.display=(e.target.value??"").length>0?"flex":"none",i.querySelector(".shpa-item-url-help").style.display="none",e.target.checkValidity()){const n=e.target.value;e.target.disabled=!0,i.querySelector(".shpa-item-url-help").innerHTML="",i.querySelector(".shap-item-input").style.display="none",i.querySelector(".shpa-item-indicator").style.display="block",this.discoverProductLink(n).then((i=>{e.target.disabled=!1,this.data[`_${t}`]={...i,qty:1},this.renderItem(t),clearInterval(window.shpaScrapTiks),window.shpaScrapProgress=0})).catch((t=>{"object"!=typeof t&&(t=[t]),e.target.disabled=!1,i.querySelector(".shpa-item-indicator").style.display="block",i.querySelector(".shap-item-input").style.display="block",i.querySelector(".shpa-item-indicator").style.display="none",
i.querySelector(".shpa-item-url-help").innerHTML=`${t.map((e=>`<i class="mdi mdi-information"></i> ${e}`)).join("<br>")}<br><hr style="border-color: white;"><h6>${this.trans("Si crees que esto es un error, repórtalo para que podamos resolverlo lo antes posible.")}</h6><a href="https://t.me/RemesitaAsistenciaBot?start==${encodeURIComponent(`Hola, quiero reportar un error, mi enlace no funcionó en la compra asistida: ${n}`)}" target="_blank" class="col-12 btn btn-sm btn-info rounded-pill"><i class="mdi mdi-bug-outline"></i> ${this.trans("Reportar Problema")}</a>`,i.querySelector(".shpa-item-url-help").style.display="block"}))}})),i.querySelector(".shpa-item-label button").addEventListener("click",(e=>this.renderItem(t))),e&&(this.data[`_${t}`]=e,this.renderItem(t,!0))}renderItem(e,t){this.data[`_${e}`].qty||(this.data[`_${e}`].qty=1);const i=this.data[`_${e}`];i.variation_choice||(i.variation_choice={});const n=this.querySelector(`#${this.uniqueSuffix}-shpa-item${e}`),s=i.sizes??{}
;this.assistanceContainer.querySelectorAll(".shpa-item-container").forEach((e=>e.style.display="none")),n.style.display="block",this.querySelector(".add-shpa-buttons").style.display="none",this.querySelector(".market-quotation")&&(this.querySelector(".market-quotation").style.display="none"),n.querySelector(".shpa-item-indicator").style.display="none",n.querySelector(".shpa-item-label button").style.display="none",n.querySelector(".shpa-item-data").style.display="block",n.querySelector(".shpa-item-number").innerHTML=`${this.trans("Producto #_N_",{_N_:e})} | <b>${i.qty} ${this.trans(i.qty>1?"Unidades":"Unidad")}</b>`,n.querySelector(".shpa-item-label .prod-thumbnail").style.backgroundImage="url(/assets/img/loader.gif)",n.querySelector(".shpa-item-label .prod-thumbnail").style.display="none",n.querySelector(".shap-item-input").style.display="none",n.querySelector(".shap-item-input").classList.remove("d-flex"),
n.querySelector(".shpa-item-data").innerHTML=` \n            <div class="d-flex justify-content-between  align-items-start">\n                <img src="/assets/img/loader.gif" class="img-fluid rounded bg-white border shadow-sm p-1" width="100" style="min-width: 80px;">\n                <div class="px-2">\n                    <h6 class="text-mija item-title">${i.title.length>150?i.title.substr(0,150)+"...":i.title}</h6> \n                    ${this.choiceComerce.reviewSystemCapability?`<small class="hidden-sm" style="${i.rating?"":"display:none"}">\n                        ${[1,2,3,4,5].map((e=>`<i class="mdi mdi-star${i.rating>e?"":"-outline"} text-warning"></i>`)).join("")} \n                        <b>${i.rating}</b><br><span>${this.trans("Puntuación basado en las últimas _N_ valoraciones",{_N_:Math.max(100,i.review_count)
})}</span>\n                    </small>  `:`<small class="hidden-sm" style="${i.rating?"":"display:none"}">\n                        <span class="text-muted">${this.trans("No cuenta con comentarios de otros clientes")}.</span>\n                    </small>`}\n                    \n                </div>\n            </div>\n\n             <div class="row mx-0 mt-2 text-left" style="${Object.keys(i.variation_filters??{}).length?"":"display:none"}">  \n                <small>${this.trans("Variantes")}</small>    \n                <div class="col-12 p-0">\n                    <div class="col-12 p-0 d-flex justify-content-between  align-items-start" style=";max-width: 420px;">\n                    ${Object.keys(i.variation_filters??{}).map(((e,t)=>`<div class="row mx-0 mb-2 text-left pl-0 pr-${t<Object.keys(i.variation_filters??{}).length?1:0} col-${12/Math.max(Object.keys(i.variation_filters??{}).length)}">  \n                            <select class="form-control p-2 border col-12 text-left text-uppercase shpa-item-variation-${e.replace("/s/g","_")} bg-dark text-white"  placeholder="${this.trans(e)}">\n                                ${(i.variation_filters??{})[e].map((t=>`<option  ${(i.variation_choice[e.replace("/s/g","_")]??"")==t?"selected":""} value="${t}">${t}</option>`)).join("")}\n                            </select>\n                        </div>`)).join("")} \n                     </div>\n                </div>\n            </div>\n            <div class="row mx-0 mt-2 text-left" style="${Object.keys(s).length?"":"display:none"}">  \n                <small>${this.trans("Tamaño")}</small>    \n                <div class="col-12 px-0 ">\n                    <div class="col-12 p-0 d-flex justify-content-between  align-items-start" style=";max-width: 420px;"> \n                        ${Object.keys(s).map(((e,t)=>`<div class="form-check pl-0 pr-2">\n                            <input class="form-check-input size-choice" size="${e}" ${0==t&&void 0===i.size_choice?"checked":""} ${(i.size_choice??"")==e?"checked":""} name="size" type="radio" value="${e}" id="size${e}">\n                                <label class="form-check-label pl-4 pr-3" for="size${e}" style="font-weight: bold;">${e}</label>\n                            </div>`)).join("")}\n                     </div>\n                    <div class="col-12 p-0 d-flex justify-content-between  align-items-start" > \n                        ${Object.keys(s).map(((e,t)=>`<small class="size${e}info size-info"  style="display:${0==t&&void 0===i.size_choice||(i.size_choice??"")==e?"block":"none"}">\n                               <i class="mdi mdi-format-quote-close"></i>${s[e].map((e=>`<i>${Object.keys(e)[0]}: <b>${e[Object.keys(e)[0]]}</b></i>`)).join(". ")}\n                            </small>`)).join("")}\n                    </div>\n                </div>\n            </div>  \n\n            <div class="row mx-0 my-2 text-left ${i.priceFaked?"witing-price":""}">   \n                <div class="col-12 text-left px-0 mb-3"> \n                    <small>${this.trans("Cantidad de artículos")} ${(this.startData?.quotationData?.items??[]).length||this.importFromBrowserExtension?`<b>${i.qty}</b>`:""}</small>   \n                    <div class="btn-group px-0 mb-0 d-flex justify-content-between" role="group" aria-label="Cantidad" style="clear: both;display: ${(this.startData?.quotationData?.items??[]).length||this.importFromBrowserExtension?"none !important":"block"};max-width: 420px;">\n                        <button type="button" class="btn btn-outline-info qty-sub bg-dark" style="background: #005f75 !important;transform: none;"><i class="mdi mdi-minus"></i></button>\n                        <button type="button" class="btn btn-outline-info btn-lg qty bg-dark" disabled style="background: #005f75 !important;transform: none;color:white !important">${i.qty}</button>\n                        <button type="button" class="btn btn-outline-info qty-add bg-dark" style="background: #005f75 !important;transform: none;"><i class="mdi mdi-plus"></i></button>\n                    </div>\n                </div>  \n            </div>\n\n            <div class="row mx-0 mt-2 text-left ${i.priceFaked?"witing-price":""}" style="${(i.variations??[]).length||!i.variationNeed?"display:none":""}">  \n                <div class="alert alert-warning mb-1">\n                   <small>${this.trans("No fuimos capaces de capturar las variantes de este producto. Por favor, escriba en las instrucciones los detalles, talla, color, tamaño, etc.")}</small>\n                </div>\n            </div>\n\n            <div class="row mx-0 mt-2 text-left ${i.priceFaked?"witing-price":""}">  \n                <small>${this.trans("Instrucciones")} <b ${(i.variations??[]).length?'style="display:none"':""}>(${this.trans("Obligatorio")})</b></small>   \n                <textarea style="resize: none;overflow-y: hidden;" class="form-control col-12  text-left shpa-item-instructions" required placeholder="${this.trans("Déjale instrucciones tu asistente de compras por ejemplo especifica talla color o cualquier cosa relevante")}">${i.instructions??i.description??""}</textarea>\n                <small class="instruction-error"></small>\n            </div> \n            \n\n            <div class="col-12 px-0 pb-3 risk-container"> \n            </div>\n            <div class="row ${i.priceFaked?"witing-price":""}">\n                <div class="col-6 pr-1" ${(this.startData?.quotationData?.items??[]).length||this.importFromBrowserExtension?'style="display:none"':""}><button type="button" class="col-12 btn btn-danger btn-lg btn-cancel"><i class="mdi mdi-cancel"></i></button></div>\n                <div class="col-${(this.startData?.quotationData?.items??[]).length||this.importFromBrowserExtension?"12":"6 pl-1"}"><button type="button" class="col-12 btn btn-info btn-accept btn-lg"><i class="mdi mdi-check-circle"></i></button></div>\n            </div>\n        `,
n.renderRisk=e=>{n.querySelector(".risk-container")&&(this.choiceComerce.reviewSystemCapability||(e=34.9),
n.querySelector(".risk-container").innerHTML=`<h6 class="mt-3">${this.trans("Evaluación de riesgo")} <small><span class="badge badge-pill badge-${e<=15?"success":e<35?"warning":"danger"}">${e<=15?this.trans("BAJO"):e<35?this.trans("MODERADO"):this.trans("ALTO")}</span></small></h6>\n                <div class="progress mb-2" style="height: 5px;">\n                    <div class="progress-risk animate animated shake ${e<=15?"bg-info":e<=45?"bg-warning":"bg-danger"}" style="left:${e}%"></div>\n                    <div class="progress-bar bg-info" role="progressbar" style="width: 15%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> \n                    <div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>\n                    <div class="progress-bar bg-danger" role="progressbar" style="width: 65%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>\n                </div>\n                ${this.choiceComerce.reviewSystemCapability?"":`<div class="alert alert-warning px-2 py-1 mb-1">\n                        <small>${this.trans("No logramos encontrar comentarios de otros compradores, por lo que no podemos detectar señales de riesgo basadas en experiencias anteriores. El riesgo se evalúa únicamente por el monto a pagar y posibles retrasos en la logística para este tipo de productos.")}</small>\n                      </div>`}\n                \n                <small><a href="https://remesita.com/ayuda/preguntas-frecuentes-2/como-calculamos-el-riesgo-de-una-compra-asistida-152.html" target="_blank" class="text-white"><i class="mdi mdi-link"></i> ${this.trans("Aprende cómo evaluamos el riesgo de tu compra.")}</a></small>`)
},n.renderPriceIput=e=>{
n.querySelector(".risk-container")&&(n.querySelector(".risk-container").innerHTML=`<div class="alert mt-3 alert-warning mb-1">\n                        <small>${this.trans("No fuimos capaces de capturar el precio de cada unidad de este producto, por favor indica aquí para que podamos hacer la evaluación adecuada de riesgo")}</small>\n                    </div> \n                    <div class="form-group no-select">\n                        <label class="mb-1 pb-0" for="${this.uniqueSuffix}${e}price">${this.trans("¿Cuanto vale este producto?")}</label>\n                        <div class="shap-item-input">\n                            <input type="text" placeholder="0.00" id="${this.uniqueSuffix}${e}price" required>\n                            <div class="input-group-append">\n                                <button class="btn btn-info btn-lg btn-apply-price"  id="${this.uniqueSuffix}${e}priceApplyBtn" disabled ><i class="mdi mdi-check-circle"></i></button>\n                            </div>\n                        </div>                        \n                    </div>`,
this.querySelector(`#${this.uniqueSuffix}${e}price`).addEventListener("input",(e=>{parseFloat(e.target.value)>0?n.querySelector(".btn-apply-price").removeAttribute("disabled"):n.querySelector(".btn-apply-price").setAttribute("disabled","disabled")})),this.querySelector(`#${this.uniqueSuffix}${e}priceApplyBtn`).addEventListener("click",(t=>{t.target.setAttribute("disabled","disabled"),t.target.innerHTML='<i class="mdi mdi-spin mdi-refresh"></i>',this.querySelectorAll(".witing-price").forEach((e=>e.classList.remove("witing-price"))),this.data[`_${e}`].price=parseFloat(this.querySelector(`#${this.uniqueSuffix}${e}price`).value),this.data[`_${e}`].priceFaked=!1,n.renderRisk(this.data[`_${e}`].risk)})),setTimeout((()=>$(`#${this.uniqueSuffix}${e}price`).mask("000,000,000,000,000.00",{reverse:!0,placeholder:"1.00"})),100))},n.preloadImage=e=>setTimeout((()=>{let t=new Image;t.onload=()=>{
n.querySelector(".shpa-item-label .prod-thumbnail")&&(n.querySelector(".shpa-item-label .prod-thumbnail").style.backgroundImage=`url(${e??""})`),n.querySelector(".img-fluid")&&(n.querySelector(".img-fluid").src=e)},t.onerror=()=>{n.querySelector(".shpa-item-label .prod-thumbnail")&&(n.querySelector(".shpa-item-label .prod-thumbnail").style.backgroundImage="url(/assets/img/no-pic.png)"),n.querySelector(".img-fluid")&&(n.querySelector(".img-fluid").src="/assets/img/no-pic.png")},t.src=e}),100),n.preloadImage(i.images[0]),i.priceFaked?n.renderPriceIput(e):n.renderRisk(i.risk),Object.keys(s).length&&n.querySelectorAll(".size-choice").forEach((t=>t.addEventListener("change",(t=>{n.querySelectorAll(".size-info").forEach((e=>e.style.display="none"));const i=t.target.getAttribute("size");n.querySelector(`.size${i}info`).style.display="block",this.data[`_${e}`].size_choice=i})))),
Object.keys(i.variation_filters??{}).forEach((t=>n.querySelector(`.shpa-item-variation-${t.replace("/s/g","_")}`).addEventListener("change",(s=>{if(this.data[`_${e}`].variation_choice[t.replace("/s/g","_")]=s.target.value,"amazonus"==this.choiceComerce.slug&&this.data[`_${e}`].variations.length){const a=this.data[`_${e}`]?.variations.find((e=>{if((e.matching_filters[t]??"").replace(/\s\s+/g," ")==s.target.value.replace(/\s\s+/g," ")){let i=!0;return Object.keys(e.matching_filters).forEach((s=>{s!=t&&i&&n.querySelector(`.shpa-item-variation-${s.replace("/s/g","_")}`).value!=e.matching_filters[s]&&(i=!1)})),i}return!1}))?.number??"";a&&(n.querySelector(".btn-cancel")&&n.querySelector(".btn-cancel").setAttribute("disabled","disabled"),n.querySelector(".btn-accept")&&n.querySelector(".btn-accept").setAttribute("disabled","disabled"),n.querySelector(".img-fluid")&&(n.querySelector(".img-fluid").src="/assets/img/loader.gif"),
this.discoverProductLink(`https://www.amazon.com/dp/${a}`).then((t=>{n.querySelector(".btn-cancel")&&n.querySelector(".btn-cancel").removeAttribute("disabled"),n.querySelector(".btn-accept")&&n.querySelector(".btn-accept").removeAttribute("disabled"),this.data[`_${e}`].link=`https://www.amazon.com/dp/${a}`,this.data[`_${e}`].images=t.images,this.data[`_${e}`].price=t.price??this.data[`_${e}`].price,this.data[`_${e}`].title=t.title,this.data[`_${e}`].risk=t.risk,i.priceFaked?n.renderPriceIput(e):n.renderRisk(i.risk),n.querySelector(".item-title")&&(n.querySelector(".item-title").innerHTML=t.title.length>150?t.title.substr(0,150)+"...":t.title),n.preloadImage(t.images[0]??"")})))}})))),n.querySelector(".qty-sub").addEventListener("click",(t=>{this.data[`_${e}`].qty=Math.max(1,this.data[`_${e}`].qty-1),n.querySelector(".qty").innerHTML=this.data[`_${e}`].qty,n.querySelector(".shpa-item-number").innerHTML=`${this.trans("Producto #_N_",{_N_:e
})} | <b>${this.data[`_${e}`].qty} ${this.trans(this.data[`_${e}`].qty>1?"Unidades":"Unidad")}</b>`,this.validateForm()})),n.querySelector(".qty-add").addEventListener("click",(t=>{const i=this.data[`_${e}`].risk<=15?10:this.data[`_${e}`].risk<=35?5:1;this.data[`_${e}`].qty=Math.min(i,this.data[`_${e}`].qty+1),n.querySelector(".qty").innerHTML=this.data[`_${e}`].qty,n.querySelector(".shpa-item-number").innerHTML=`${this.trans("Producto #_N_",{_N_:e})} | <b>${this.data[`_${e}`].qty} ${this.trans(this.data[`_${e}`].qty>1?"Unidades":"Unidad")}</b>`,this.validateForm()})),n.querySelector(".shpa-item-instructions").addEventListener("input",(t=>{this.data[`_${e}`].instructions=t.target.value,n.querySelector(".shpa-item-instructions").style.height="auto",n.querySelector(".shpa-item-instructions").style.height=n.querySelector(".shpa-item-instructions").scrollHeight+"px"})),n.querySelector("button.btn-cancel").addEventListener("click",(()=>{
n.querySelector(".shpa-item-data").style.display="none",n.querySelector(".shpa-item-label").style.textDecoration="line-through",this.querySelector(".add-shpa-buttons").style.display="flex",this.assistanceContainer.querySelectorAll(".shpa-item-container").forEach((e=>e.style.display="flex")),this.assistanceContainer.querySelector(".add-shpa-item-btn").disabled=!1,n.querySelector(".shpa-item-label .prod-thumbnail").style.display="flex",delete this.data[`_${e}`],this.validateForm()}));const a=()=>{n.querySelector("button.btn-accept").removeAttribute("disabled"),n.querySelector("button.btn-accept").innerHTML='<i class="mdi mdi-check-circle"></i>',n.querySelector(".shpa-item-label button").style.display="block",n.querySelector(".shpa-item-data").style.display="none",this.querySelector(".add-shpa-buttons").style.display="flex",this.querySelector(".market-quotation")&&(this.querySelector(".market-quotation").style.display="block"),
this.assistanceContainer.querySelectorAll(".shpa-item-container").forEach((e=>e.style.display="flex")),this.assistanceContainer.querySelector(".add-shpa-item-btn").disabled=!1,n.querySelector(".shpa-item-label .prod-thumbnail").style.display="flex",this.validateForm()};n.querySelector("button.btn-accept").addEventListener("click",(()=>{n.querySelector(".shpa-item-instructions")&&n.querySelector(".shpa-item-instructions").value.length&&(this.data[`_${e}`].instructions=n.querySelector(".shpa-item-instructions").value),(this.data[`_${e}`].instructions??"").trim().length?a():(n.querySelector(".shpa-item-instructions").classList.add("animate","animated","shake","border-danger","bg-danger-light"),setTimeout((()=>n.querySelector(".shpa-item-instructions").classList.remove("animate","animated","shake","border-danger","bg-danger-light")),1e3))})),t&&a(),this.validateForm()}validateInstructions(e,t){return new Promise(((i,n)=>{$.ajax({type:"POST",
url:this.createApiUrl("shpa/validate-instructions"),dataType:"json",data:{title:e,instructions:t},success:e=>e.success?i(e):n(e.error),error:e=>n(e)})}))}validateForm(){let e=this.calcTotal(),t=e>0;const i={success:t,total:e,items:Object.keys(this.data).map((e=>this.data[e]))};"function"==typeof this.onValidation&&this.onValidation(i),this.dispatchEvent(new CustomEvent("validation",{detail:i})),null!=this.querySelector(".next-shpa-btn")&&(this.querySelector(".next-shpa-btn").disabled=!t)}setupSHPA(e){void 0!==e.styles&&(this.overrideStyles=e.styles),void 0!==e.i18n&&(this.i18n=e.i18n),void 0!==e.marketplaces&&(this.marketplaces=e.marketplaces),void 0!==e.contanerClass&&(this.contanerClass=e.contanerClass),e.startData&&e.startData.length&&e.startData[0]?.price&&(e.startData={products:e.startData}),void 0!==e.startData&&(this.startData=e.startData),void 0!==e.onStep&&(this.onStep=e.onStep),void 0!==e.onValidation&&(this.onValidation=e.onValidation),
void 0!==e.importFromBrowserExtension&&(this.importFromBrowserExtension=e.importFromBrowserExtension),this.startData&&this.startData.seed?fetch("/rest/v1/shpa/seed/"+e.startData.seed).then((e=>e.json())).then((e=>{this.startData=e,this.refresh(this.startData),setTimeout((()=>this.validateForm()),100)})).catch((t=>{this.refresh(e.startData??!1),setTimeout((()=>this.validateForm()),100)})):(this.refresh(e.startData??!1),setTimeout((()=>this.validateForm()),100))}}if(customElements.define("shopping-assistance",e),"undefined"!=typeof jQuery&&(jQuery.fn.setupSHPA=function(e){return this.each((function(){"shopping-assistance"===this.tagName.toLowerCase()&&this.setupSHPA(e)}))}),"undefined"==typeof jsQR){var script=document.createElement("script");script.src="/assets/js/jsQR.min.js",script.async=!0,document.head.appendChild(script)}}