{"id":15523,"date":"2024-01-26T08:15:33","date_gmt":"2024-01-26T14:15:33","guid":{"rendered":"https:\/\/ulink.com\/mex-calculadora\/"},"modified":"2024-10-17T18:43:19","modified_gmt":"2024-10-18T00:43:19","slug":"mex-calculadora","status":"publish","type":"page","link":"https:\/\/ulink.com\/es\/calculadora\/mex-calculadora\/","title":{"rendered":"mex-calculadora"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"15523\" class=\"elementor elementor-15523\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ec3411b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ec3411b\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-468c7cf\" data-id=\"468c7cf\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-588920e elementor-widget elementor-widget-shortcode\" data-id=\"588920e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n\n\n\n\n<style>\n\t\n\n\t\n\/* Estilos del bot\u00f3n \"Continuar\" *\/\n#updateTableButton.botonContinuar {\n    background-color: #22B14B;\n    font-family: \"Lexend\", Sans-serif !important;\n    font-size: 14px;\n    border-radius: 50px !important;\n    -webkit-border-radius: 50px !important;\n    border: 0;\n    color: white;\n    padding: 10px 20px;\n    position: relative; \/* Para posicionar el \u00edcono de carga *\/\n    overflow: hidden; \/* Para que no se vea el \u00edcono fuera del bot\u00f3n *\/\n    transition: background-color 0.3s;\n\tmargin: 10px auto;\n    display: block;\n}\n\n\/* Estilos del bot\u00f3n \"Reset\" *\/\n#resetButton.botonReset {\n    background-color: #22B14B;\n    font-family: \"Lexend\", Sans-serif !important;\n    font-size: 14px;\n    border-radius: 50px !important;\n    -webkit-border-radius: 50px !important;\n    border: 0;\n    color: white;\n    padding: 10px 20px;\n    transition: background-color 0.3s;\n\tmargin: 10px auto;\n    display: block;\n}\n\n\/* Estilos del indicador de carga *\/\n#updateTableButton .loading-indicator {\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    border: 2px solid white;\n    border-radius: 50%;\n    border-top-color: #4ac26c;\n    animation: spin 0.8s linear infinite;\n    position: absolute;\n    right: 10px; \/* Colocar a la derecha del bot\u00f3n *\/\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n    visibility: hidden; \/* Mantener oculto hasta que el bot\u00f3n est\u00e9 en \"loading\" *\/\n    transition: opacity 0.3s, visibility 0s 0.3s;\n\tmargin: 10px auto;\n    display: block;\n}\n\n\/* Animaci\u00f3n de rotaci\u00f3n *\/\n@keyframes spin {\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\n\/* Estado \"loading\" del bot\u00f3n *\/\n#updateTableButtonTwoCurrencies.loading .loading-indicator {\n    opacity: 1;\n    visibility: visible; \/* Mostrar el \u00edcono de carga *\/\n    transition: opacity 0.3s, visibility 0s;\n}\n\n\/* Cambiar el fondo al hacer hover *\/\n#updateTableButtonTwoCurrencies:hover, #resetButton:hover {\n    background-color: #38b85c;\n}\n\n\n\n\t\n#resetButton {\n    display: none;\n}\n\t\n\t\n\t\n#resultTableContainer {\n    text-align: center;\n}\n\n#feesServiceTable {\n    margin: 0 auto; \/* Centrar la tabla horizontalmente *\/\n    width: 100%;\n    max-width: 600px;\n}\n\n#feesServiceTable th, #feesServiceTable td {\n    padding: 10px;\n    text-align: center; \/* Alinea el contenido de las celdas al centro *\/\n}\n\n\t\n.download {\n\t\tline-height:1.2;\n\t    font-weight: 300;\n\tfont-size:16px;\n\tpadding-top:10px;\n\ttext-align:center;\n\t}\n\n\/* Chrome, Safari, Edge, Opera *\/\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\t\ninput[type=radio] {\n  accent-color: green!important;\n}\n\n\n\/* Firefox *\/\ninput[type=number] {\n  -moz-appearance: textfield;\n}\n\t\n\t\tinput[type=number] {\n\t\tbackground-color: rgb(0 0 0 \/ 0%);\n\t\t\tborder-radius: 30px 0 0 30px;\n\t}\n\t\n\tinput[type=number]:focus {\n\t\tbackground-color: rgb(0 0 0 \/ 0%);\n\t\tborder: 0 solid;\n\t}\n\t\n\t\/* Estilos para ocultar el select en Safari y dispositivos m\u00f3viles *\/\n@media only screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 0) {\n    #payerSelectContainer {\n        display: none;\n    }\n}\n\n\/* Estilos para ocultar el select en navegadores de escritorio (excepto Safari) *\/\n@media only screen and (min-width: 769px) and (not (-webkit-min-device-pixel-ratio: 0)) {\n    #payerSelectContainer {\n        display: none;\n    }\n}\n\t\n\n\t\n\t\n\t#payerSelect option.hidden {\n    display: none;\n}\n\n\t\n.input-container {\n    display: flex;\n    align-items: center; \/* Alinea verticalmente el contenido *\/\n}\n\t\n\t.container{\n\t\tmax-width: 627px!important;\n\t}\t\n\t\n.container-wrap {\n   \n    padding-top: 1px!important;\n    padding-bottom: 1px!important;\n}\t\n\t\n\t\n.block {\n    background: #f5f5f5;\n    border-radius: 30px;\n    padding: 30px;\n}\n\t\n\t\nlabel {\n    display: inline-block;\n    line-height: 1;\n    vertical-align: middle;\n    font-size: 12px;\n    font-family: \"Lexend\", Sans-serif;\n}\n\t\n\tform{\n\t\ttext-align:center;\n\t}\n\t\n\t.center{\n\t\ttext-align: center;\n\t}\t\n\n.input-container .campo {\n    margin-left: 5px; \/* Espacio entre el s\u00edmbolo $ y el campo de entrada *\/\n}\n\t\n\t\n\n.campo {\n    font-size: 16px;\n    font-family: \"Lexend\", Sans-serif !important;\n    background-color: white;\n    width: 350px;\n    max-width: 280px;\n    border-radius: 30px !important;\n    border: solid 1px #ebebeb !important;\n    margin: 10px auto;\n    padding: 3px 23px 3px 1px;\n    color: #8e8e8e;\n}\n\t\n\t\n\tinput[type=text], input[type=url], select, textarea {\n    width: 100%;\n\t\tfont-family: \"Lexend\", Sans-serif;\n    border: 0px solid #666!important;\n    border-radius: 30px;\n    padding: 0.5rem 1rem;\n    transition: all .3s;\n\tbackground-color: #f0f8ff00;\n\tfont-size: 16px;\n}\n\t\n\tinput[type=number] {\n    padding: 5px 21px 5px 21px;\n\tfont-size: 16px!important;\n\t\tfont-weight: 300! important;\n\t\t\n}\n\t\n\th2{\n\t\t\n\t\tfont-family: \"Lexend\", Sans-serif!important;\n\t}\n\t\n\n\t\n\t\n\t#payerSelect option.hidden {\n    display: none;\n}\n\n\t\n.reset-row {\n    border: solid 0;\n\tfont-family: \"Lexend\", Sans-serif!important;\n    text-align: center!important;\n    font-weight: 300! important;\n    border-color: #ececec00!important;\n    border-top: solid 0;\n    background-color: #ffffff00!important;\n\tmargin:auto;\n}\t\n\t\n.feetabla {\n    margin: 10px auto!important;\n    font-family: \"Lexend\", Sans-serif!important;\n    padding: 20px!important;\n    width: 100%!important;\n    border-collapse: collapse;\n    border-spacing: 0;\n    background-color: #fff0;\n    border-top: 0px solid #ececec;\n    border-radius: 30px!important;\n\tdisplay: inherit;\n\tmax-width: fit-content;\n}\n\t\n\t.hide-content {\n        display: none;\n    }\n\t\n\ttable {\n    margin: 10px auto!important;\n    width: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n    border-top: 0 solid #ececec!important;\n\tfont-size: 12px!important;\t\n\tdisplay: inline;\t\n\t}\n\t\n\tth {\n    border: solid 0;\n\tfont-size: 12px!important;\t\n    text-align: center!important;\n    font-weight: 300! important;\n    border-color: #ececec00!important;\n    border-top: solid 0;\n    background-color: #ffffff00;\n    font-family: \"Lexend\", Sans-serif!important;\n}\n\t\ntable td, table th {\n    border: 0px solid !important;\n    padding: 5px 10px!important;\n}\n\t\n\n\t\n h5  {\n    color: #444;\n    letter-spacing: 0px;\n    font-weight: normal;\n    \n\t font-family: \"Lexend\", Sans-serif!important;\n}\n\t\nselect {\n    padding: 9px 9px 9px 18px;\n    width: 100%!important;\n    border: 1px solid #e0e0e0!important;\n    font-weight: 300;\n    font-size: 15px;\n    line-height: 18px;\n    color: #555;\n    background-color: #f7f7f796;\n    box-shadow: 0 1px 2px rgba(0,0,0,0.16)!important;\n    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.16)!important;\n    transition: all 0.2s linear;\n    -webkit-transition: all 0.2s linear;\n    border-radius: 30px;\n    margin: 10px auto;\n\tmax-width: 280px;\n\t-moz-appearance:none; \/* Firefox *\/\n    -webkit-appearance:none; \/* Safari and Chrome *\/\n    appearance:none;\n\t\n}\n\t\n\tselect.minimal {\n  background-image:\n    linear-gradient(45deg, transparent 50%, gray 50%),\n    linear-gradient(135deg, gray 50%, transparent 50%),\n    linear-gradient(to right, #ccc, #ccc);\n  background-position:\n    calc(100% - 20px) calc(1em + 2px),\n    calc(100% - 15px) calc(1em + 2px),\n    calc(100% - 2.5em) 0.5em;\n  background-size:\n    5px 5px,\n    5px 5px,\n    1px 1.5em;\n  background-repeat: no-repeat;\n}\n\nselect.minimal:focus {\n  background-image:\n    linear-gradient(45deg, green 50%, transparent 50%),\n    linear-gradient(135deg, transparent 50%, green 50%),\n    linear-gradient(to right, #ccc, #ccc);\n  background-position:\n    calc(100% - 15px) 1em,\n    calc(100% - 20px) 1em,\n    calc(100% - 2.5em) 0.5em;\n  background-size:\n    5px 5px,\n    5px 5px,\n    1px 1.5em;\n  background-repeat: no-repeat;\n  border-color: green;\n  outline: 0;\n}\n\n\nselect:-moz-focusring {\n  color: transparent;\n  text-shadow: 0 0 0 #000;\n}\n\n\n\n\t\n\t\n\t\n\th4 {\n   font-family: \"Lexend\", Sans-serif!important;\n    font-weight: 300;\n\n\n\tcolor: #676767!important;\n\t\n\t}\n\t\n\th4 a {\n\t\tcolor: #22B14B!important;\n\t}\n\t\n\ta hover{\n\t\tcolor: #38b85c!important;\n\t}\n\t\n\t\n\t.texth4{\n\t\tfont-weight:300;\n\t}\n\n<\/style>\n\n<form method=\"post\" id=\"myForm\" action=\"\">\n    <div id=\"exchangeRateDisplayPrimary\">\n        <h2 style='color:#22B14B; font-weight:600;'><\/h2>\n    <\/div>\n\n    <h4 class=\"texth4\">Monto de env\u00edo<\/h4>\n    <div class=\"input-container campo\">\n        <input id=\"amountToSend\" name=\"amountToSend\" type=\"number\" min=\"0\" step=\"0.01\"> USD\n    <\/div>\n\n    <h4 class=\"texth4\">Monto a recibir<\/h4>\n    <div class=\"input-container campo\">\n        <input id=\"amountToReceive\" name=\"amountToReceive\" type=\"number\" min=\"0\" step=\"0.01\">     <\/div>\n\n    <h4>Selecciona el m\u00e9todo de recepci\u00f3n<\/h4>\n    <select id=\"receptionMethodSelect\" name=\"receptionMethodSelect\" class=\"minimal\">\n        <option value=\"\">Selecciona un m\u00e9todo<\/option>\n    <\/select>\n\n    <div id=\"payerSelectContainer\" class=\"center\" style=\"display: none;\">\n        <h4 class=\"texth4\">Selecciona pagador<\/h4>\n        <select id=\"payerSelect\" name=\"payerSelect\" class=\"minimal\">\n            <option value=\"\">Selecciona un pagador<\/option>\n        <\/select>\n    <\/div>\n\n    <div id=\"resultTableContainer\" style=\"display:none; text-align: center;\">\n        <table id=\"feesServiceTable\" style=\"margin: 0 auto;\">\n            <thead>\n                <tr>\n                    <th>M\u00e9todo de Env\u00edo<\/th>\n                    <th>Tarifa de Servicio<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody><\/tbody>\n        <\/table>\n\n        <button id=\"resetButton\" class=\"botonReset\" type=\"button\">\n            Reiniciar        <\/button>\n    <\/div>\n\n\n\n\n<script>\n    var oneCurrencyMode = true;\n    var exchangeRate = null;\n\n    \/\/ Truncar sin redondear\n    function truncateToTwoDecimals(value) {\n        return Math.floor(value * 100) \/ 100;\n    }\n\n    document.addEventListener('DOMContentLoaded', function () {\n        var postID = 15523;\n\n        fetch('https:\/\/ulink.com\/wp-admin\/admin-ajax.php', {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application\/x-www-form-urlencoded'\n            },\n            body: new URLSearchParams({\n                action: 'get_primary_exchange_rate',\n                post_id: postID\n            })\n        })\n        .then(response => response.json())\n        .then(data => {\n            if (data.success) {\n                console.log('API data received:', data); \/\/ \ud83d\udc48 Revisa aqu\u00ed si llega 18.829999...\n\n                exchangeRate = parseFloat(data.data.primaryExchangeRate);\n                const destCurrencyISOCode = data.data.destCurrencyISOCode;\n\n                \/\/ Mostrar en pantalla redondeado visualmente\n                const exchangeRateDisplayPrimary = document.getElementById('exchangeRateDisplayPrimary');\n                if (exchangeRateDisplayPrimary) {\n                    exchangeRateDisplayPrimary.innerHTML = `\n                        <h2 style='color:#22B14B; font-weight:600;'>\n                            1 USD = ${truncateToTwoDecimals(exchangeRate).toFixed(2)} ${destCurrencyISOCode}\n\n                        <\/h2>`;\n                }\n\n                \/\/ Inputs\n                const amountToSendInput = document.getElementById('amountToSend');\n                const amountToReceiveInput = document.getElementById('amountToReceive');\n\n                amountToSendInput.addEventListener('input', function () {\n                    const amountToSend = parseFloat(this.value);\n                    if (!isNaN(amountToSend)) {\n                        const calculatedReceive = truncateToTwoDecimals(amountToSend * exchangeRate);\n                        amountToReceiveInput.value = calculatedReceive.toFixed(2);\n                    }\n                });\n\n                amountToReceiveInput.addEventListener('input', function () {\n                    const amountToReceive = parseFloat(this.value);\n                    if (!isNaN(amountToReceive) && exchangeRate !== 0) {\n                        const calculatedSend = truncateToTwoDecimals(amountToReceive \/ exchangeRate);\n                        amountToSendInput.value = calculatedSend.toFixed(2);\n                    }\n                });\n\n            } else {\n                console.error('Error al obtener la tasa de cambio:', data);\n            }\n        })\n        .catch(error => console.error('Error en la solicitud AJAX:', error));\n    });\n<\/script>\n\n\n\n<\/form>\n\n\n\n\n<script>\nfunction translateMethodNames() {\n    var lang = \"es\";\n    var receptionMethodSelect = document.getElementById('receptionMethodSelect');\n    var translationMap = {\n        'WALLET': lang === 'es' ? 'Billetera electr\u00f3nica' : 'E-wallet',\n        'Account Credit': lang === 'es' ? 'Dep\u00f3sito a cuenta bancaria' : 'Account Credit',\n        'Cash Pickup': lang === 'es' ? 'Retiro de efectivo' : 'Cash Pickup',\n        'Home Delivery': lang === 'es' ? 'Entrega a domicilio' : 'Home Delivery',\n        'Cash ATM': lang === 'es' ? 'Cajero autom\u00e1tico' : 'Cash ATM',\n        'Pix': 'Pix'\n    };\n\n    Array.from(receptionMethodSelect.options).forEach(function(option) {\n        if (translationMap[option.text]) {\n            option.text = translationMap[option.text];\n        }\n    });\n}\n\t\n\n<\/script>\n\n<script>\n    var translationMap = {\n        \"Ulink Card\": \"uLinkcard\",\n        \"Bank Account\": \"Cuenta de banco\",\n        \"Wlp Wallet\": \"Billetera electr\u00f3nica\",\n        \"Credit Card\": \"Tarjeta de cr\u00e9dito\",\n        \"Debit Card\": \"Tarjeta de d\u00e9bito\"\n    };\n<\/script>\n\n\n\n\n<div>\n<h4 class=\"download\">El tipo de cambio que se muestra aplica a pagos realizados utilizando la billetera electr\u00f3nica uLink en la SuperApp. \u00bfNo tienes la SuperApp de uLink? <a href=\"https:\/\/ulink.com\/ulinkapp\" target=\"_blank\">Desc\u00e1rgala ahora<\/a>.<\/h4><\/div>\n\t\n<script>\n\n    \/\/ Inicializar variables del DOM y otras referencias necesarias\n    const resetButton = document.getElementById('resetButton');\n    const payerSelectContainer = document.getElementById('payerSelectContainer');\n    const tableContainer = document.getElementById('tableContainer');\n    const amountToSendInput = document.getElementById('amountToSend');\n    const amountToReceiveInput = document.getElementById('amountToReceive');\n    const receptionMethodRadios = document.querySelectorAll('input[name=\"receptionMethod\"]');\n   \n\n    \/\/ Guardar valores en el localStorage cuando cambian los inputs\n    amountToSendInput.addEventListener('input', function() {\n        localStorage.setItem('amountToSend', amountToSendInput.value);\n    });\n\n    amountToReceiveInput.addEventListener('input', function() {\n        localStorage.setItem('amountToReceive', amountToReceiveInput.value);\n    });\n\n    \/\/ Limpiar el formulario cuando se hace clic en \"Reset\"\n    resetButton.addEventListener('click', function() {\n        amountToSendInput.value = ''; \/\/ Limpia el campo \"Amount to Send\"\n        tableContainer.classList.add('hidden'); \/\/ Oculta la tabla de resultados\n        \n        if (activeMethodsCount > 1) {\n            payerSelectContainer.classList.add('hidden'); \/\/ Oculta select si hay m\u00e1s de un m\u00e9todo\n        }\n\n        \/\/ Limpia los valores almacenados en localStorage\n        localStorage.removeItem('selectedPayerName');\n        localStorage.removeItem('amountToSend');\n        localStorage.removeItem('amountToReceive');\n        localStorage.removeItem('payerSelected');\n\n        \/\/ Restablecer t\u00edtulo de la tabla\n        const tableTitleElement = document.getElementById('feesServiceTableTitle');\n        if (tableTitleElement) {\n            tableTitleElement.textContent = \"\";\n        }\n    });\n\n    \/\/ Mostrar el select de pagadores cuando se selecciona un m\u00e9todo de env\u00edo\n    receptionMethodRadios.forEach(radio => {\n        radio.addEventListener('change', function() {\n            payerSelectContainer.classList.remove('hidden');\n        });\n    });\n<\/script>\n\n\n\n\n\n\n\n\n\n<script>\n    \/\/ Al cargar la p\u00e1gina, revisa si hay alg\u00fan valor en localStorage y actualiza los campos\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const storedAmountToSend = localStorage.getItem('amountToSend');\n        \n        if (storedAmountToSend) {\n            document.getElementById('amountToSend').value = storedAmountToSend;\n            calculateLocalAmount(); \/\/ Ejecutar la funci\u00f3n para calcular el monto en moneda local\n        }\n    });\n\n    \/\/ Guardar el valor de \"Amount to send\" en localStorage cuando cambie\n    document.getElementById('amountToSend').addEventListener('input', function() {\n        localStorage.setItem('amountToSend', this.value);\n    });\n<\/script>\n\n<!-- Sincronizaci\u00f3n del select de pagadores con el m\u00e9todo de recepci\u00f3n -->\n\n\n\n\n<script>\n    \/\/ Agregar clase 'loading' al bot\u00f3n cuando se hace clic\n    document.getElementById('updateTableButton').addEventListener('click', function() {\n        this.classList.add('loading');\n    });\n<\/script>\n\n\n\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":15532,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-15523","page","type-page","status-publish"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ulink.com\/es\/wp-json\/wp\/v2\/pages\/15523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ulink.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ulink.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ulink.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ulink.com\/es\/wp-json\/wp\/v2\/comments?post=15523"}],"version-history":[{"count":0,"href":"https:\/\/ulink.com\/es\/wp-json\/wp\/v2\/pages\/15523\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/ulink.com\/es\/wp-json\/wp\/v2\/pages\/15532"}],"wp:attachment":[{"href":"https:\/\/ulink.com\/es\/wp-json\/wp\/v2\/media?parent=15523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}