ARIPAY

bg-primary

<section class="section p-0  mb-6" id="aripay-calcula-ahorro">

<div class="landing-container p-5"  >

<div class="columns">

<div class="column is-full ">

<p class="title is-size-3 is-bold has-text-ldanger has-text-centered-mobile">

¿Eres apto para ARI PAY? Descubre cuánto puedes ahorrar

</p>

</div>

</div>

<div class="columns p-5">

<div class="column ">

<p class="subtitle is-6 has-text-centered">Selecciona la vivienda donde vives</p>

<div class="columns is-centered">

<div class="column is-two-fifths has-text-centered" onClick="check_stp1('Unifamiliar','a')" id="step1_a"

style="cursor: pointer;border-radius: 5px" value="Unifamiliar"><i

class="fas fa-home-alt fa-3x has-text-ldanger"></i><br>

<h5 class="mt-3 is-bold">Unifamiliar<br>(Casa)</h5>

</div>

<div class="column is-two-fifths  has-text-centered is-col-from-end" onClick="check_stp1('Piso','b')"

id="step1_b" style="cursor: pointer;border-radius: 5px" value="Piso"><i

class="fas fa-3x has-text-ldanger fa-home-user"></i><br>

<h5 class="mt-3">Multifamiliar<br>(Piso)</h5>

</div>

</div>

<hr class="my-5">

<div class="columns">

<div class="column is-half">

<p class="subtitle is-6 mb-3 has-text-left">Tienes caldera de gas o gasoil como sistema de calefacción

actual?</p>

<div class="select is-danger">

<select name="formequipo" id="formequipo">

<option>Selecciona una opción</option>

<option value="Sí">Si</option>

<option value="No">No</option>

</select>

</div>

</div>

<div class="column is-half has-text-left">

<p class="subtitle is-6 mb-3">Año de construcción de la vivienda o última reforma integral</p>

<div class="control has-icons-left has-icons-right">

<input class="input is-danger" type="text" placeholder="2008" name="formano" id="formano" />

<span class="icon is-small is-left">

<i class="fa-solid fa-house"></i>

</span>

</div>

</div>

</div>

<hr class="my-5">

<div class="columns  is-align-items-end">

<div class="column is-one-third">

<p class="subtitle is-6 mb-3 has-text-left">Superficie de la vivienda</p>

<div class="control has-icons-left has-icons-right">

<input class="input is-danger" type="text" placeholder="120" name="formsuperficie" id="formsuperficie" />

<span class="icon is-small is-left">

<i class="fa-solid fa-house"></i>

</span>

<span class="icon is-small is-right">

m²

</span>

</div>

</div>

<div class="column has-text-left">

<p class="subtitle mb-3 is-6 ">Comunidad autónoma (Exc. Ceuta y Melila)</p>

<div class="select is-danger">

<select name="formcomunidad" id="formcomunidad">

<option>Selecciona tu comunidad</option>

<option value="Andalucía" selected>Andalucía</option>

<option value="Aragón">Aragón</option>

<option value="Principado de Asturias">Principado de Asturias</option>

<option value="Islas Baleares">Islas Baleares</option>

<option value="País Vasco">País Vasco</option>

<option value="Canarias">Canarias</option>

<option value="Cantabria">Cantabria</option>

<option value="Castilla-La Mancha">Castilla-La Mancha</option>

<option value="Castilla y León">Castilla y León</option>

<option value="Cataluña">Cataluña</option>

<option value="Extremadura">Extremadura</option>

<option value="Galicia">Galicia</option>

<option value="Comunidad de Madrid">Comunidad de Madrid</option>

<option value="Región de Murcia">Región de Murcia</option>

<option value="Comunidad Foral de Navarra">Comunidad Foral de Navarra</option>

<option value="La Rioja">La Rioja</option>

<option value="Comunidad Valenciana">Comunidad Valenciana</option>

<option value="Ceuta">Ceuta</option>

<option value="Melilla">Melilla</option>

</select>

</div>

</div>

<div class="column  is-one-fifth  is-full-mobile has-text-centered-mobile">

<button type="button" class="button is-ldanger" onclick="calcularAyuda()">Calcular Ayuda</button>

</div>

</div>

</div>

<div class="column is-two-fifths">

<div class="columns is-vcentered is-flex" style="height: 100%; align-items: center; justify-content: center;">

<div class="column is-two-thirds has-background-light p-4 has-text-centered has-text-ldanger">

<span class="title is-size-4 is-bold has-text-ldanger tag is-medium pt-2 mb-1" style="width: 90%;">AYUDA ARI

PAY</span>

<p class="subtitle is-4"> <span id="resultado"></span></p>

<p id="aripay-info"><i class="fa-solid fa-plus fa-3x mb-4"></i><br>

Deducción IRPF del 60% del total de la factura de instalación</p>

</div>

</div>

</div>

</div>

</div>

<input type="hidden" name="step1" value="" id="step1">

</section>

<script>

function check_stp1(valor, id) {

document.getElementById("step1_a").style.border = "none";

document.getElementById("step1_b").style.border = "none";

document.getElementById("step1_" + id).style.border = "2px solid red";

document.getElementById("step1").value = valor;

}

function calcularAyuda() {

let superficie = document.getElementById("formsuperficie").value;

let equipo = document.getElementById("formequipo").value;

let step1 = document.getElementById("step1").value;

let ano = document.getElementById("formano").value;

let comunidad = document.getElementById("formcomunidad").value;

let resultado = document.getElementById("resultado");

let mensaje = "";

if (

superficie === "" ||

ano === "" ||

equipo === "" ||

step1 === "" ||

comunidad === ""

) {

alert("Por favor, completa todos los campos antes de calcular la ayuda.");

return;

}

document.getElementById("aripay-info").style.display = "block";

superficie = parseFloat(superficie);

ano = parseInt(ano, 10);

let result = "Not eligible for support";

if (

equipo !== "Sí" ||

step1 !== "Unifamiliar" ||

ano > 2007 ||

comunidad === "Ceuta" ||

comunidad === "Melilla"

) {

mensaje = `

<div class="has-text-ldanger mb-3">

Lamentamos que no cumplas con alguno de los requisitos actuales de aripay.<br>

Ponte en contacto con nosotros para que podamos estudiar tu caso de forma personalizada.

<div class="has-background-ldanger is-justify-content-center px-2 py-1 mt-4"

style="cursor:pointer;border-radius:4px;font-size:16px" onclick="window.parent.document.getElementById('aripay-modal').click();">

<span class="has-text-white">Más información</span>

</div>

</div>

`;

document.getElementById("aripay-info").style.display = "none";

} else {

if (superficie >= 100 && superficie <= 125) {

mensaje = "1.200 € de ayuda CAES";

result = "Eligible for support";

} else if (superficie > 125 && superficie <= 150) {

mensaje = "1.400 € de ayuda CAES";

result = "Eligible for support";

} else if (superficie > 150 && superficie <= 175) {

mensaje = "1.800 € de ayuda CAES";

result = "Eligible for support";

} else if (superficie > 175 && superficie <= 225) {

mensaje = "2.000 € de ayuda CAES";

result = "Eligible for support";

} else if (superficie > 225 && superficie <= 300) {

mensaje = "2.800 € de ayuda CAES";

result = "Eligible for support";

} else if (superficie > 300) {

mensaje = "3.500 € de ayuda CAES";

result = "Eligible for support";

} else {

mensaje = `

<span class="has-text-ldanger">

Lamentamos que no cumplas con alguno de los requisitos actuales de AriPay.<br>

Déjanos tus datos para que podamos contactarte en caso que incorporemos próximamente algún servicio para ti.

</span>

`;

document.getElementById("aripay-info").style.display = "none";

}

}

resultado.innerHTML = mensaje;

if (typeof dataLayer !== "undefined") {

dataLayer.push({

event: "calcular_ayuda_ari_pay",

home_type: step1,

result: result

});

}

}

function sendHeight() { const height = document.documentElement.scrollHeight; window.parent.postMessage({ type: 'iframe-height', height }, '*'); } new ResizeObserver(sendHeight).observe(document.documentElement); window.addEventListener('load', sendHeight);

</script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">

<!-- Font Awesome -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

<style>

/* Container */

.landing-container {

max-width: 1440px;

width: 100%;

margin: 0 auto;

position: relative;

flex-grow: 1;

}

/* Colore brand */

.is-ldanger {

background-color: #c41230 !important;

color: #fff !important;

}

.has-text-ldanger {

color: #c41230 !important;

}

.has-background-ldanger {

background-color: #c41230;

}

/* Font */

.is-bold {

font-family: "Proxima Nova Bold", sans-serif;

letter-spacing: 0 !important;

}

/* Padding */

.p-5 {

padding: 1.5rem !important;

}

/* Colore icone input */

.landing-container {

--bulma-input-icon-focus-color: hsl(0deg 62.27% 49.57%) !important;

}

/* Testo input */

input {

color: #333 !important;

}

/* Responsive */

@media screen and (max-width:768px) {

.p-5 {

padding: 1rem !important;

}

}

</style>