Funding modal content

Peugeot 3008
1.6 BlueHDi120 Active
22 000 €
Apport
Durée
mois
Km annuels
km
Un crédit vous engage et doit être remboursé. Vérifiez vos capacités de remboursement avant de vous engager.
  • template
<div x-data="initFundingAskCalc('22000')">
<div class="py-6.25 md:pt-7.5 px-7.5">
<div class="flex gap-2.5 items-baseline justify-between">
<div class="font-semibold text-xl flex flex-col md:flex-row gap-1.75 md:gap-3.25 items-center">
<div class="tracking-tightened">Peugeot 3008</div>
<div class="text-base text-text-light">1.6 BlueHDi120 Active</div>
</div>
<div class="font-semibold text-xl tracking-tightened">
22 000 €
</div>
</div>
<div class="mt-5.5 md:mt-7.5" x-ref="test">
<div class="form-element form-box-radio-slider form-box-radio-slider--full-double"
x-data="boxCheckboxSlider()"
x-ref="mode"
>
<div x-ref="controler" class="controler"></div>
<div class="label-wrapper" x-ref="wrapper">
<label for="loa">
<input @click="changeInput(); $dispatch('tabFundingMode', 'loa')" type="radio" value="particulier" name="big" id="loa" checked>
<span>LOA</span>
</label>
<label for="credit_purchase">
<input @click="changeInput(); $dispatch('tabFundingMode', 'credit_purchase')" type="radio" value="professionnel" name="big" id="credit_purchase">
<span>Achat à crédit</span>
</label>
</div>
</div>
<div x-ref="loa" :class="{'hidden' : mode !== 'loa' }" class="flex flex-col md:flex-row gap-1.25 md:gap-5 mt-5 md:mt-7.5">
<div class="bg-white border border-ui rounded-medium p-5 w-full md:w-[calc(50%_-_10px)]">
<div class="form-element text form-range" x-data="rangeSlider(0, 10000, 4000)">
<div class="flex justify-between items-start gap-2.5 text-base font-medium">
<div>Apport</div>
<div class="flex gap-2.5">
<div class="relative">
<input class="form-text-range" type="text" x-ref="valueinput" @blur="changeValue(); $dispatch('changeInputFunding', {mode: 'loa', input: 'contribution' , value : $event.target.value })" @keydown.enter="changeValue(); $dispatch('changeInputFunding', {mode: 'loa', input: 'contribution' , value : $event.target.value })" @input="hasError = false">
<span :class="{'hidden': !hasError}" class="hidden absolute bottom-[-10px] translate-y-full -translate-x-1/2 left-1/2 w-full z-20 bg-error text-xs leading-4 text-white p-2.25 rounded-medium arrow-tip-top arrow-tip-top--error">Merci de remplir une valeur entre <span x-text="min"></span> et <span x-text="max"></span></span>
</div>
<div class="font-semibold">€</div>
</div>
</div>
<div class="relative">
<input type="range"
id="contribution"
name="range" class="" title=""
x-bind:min="min" x-bind:max="max" x-model="selected" step="100"
@input="slide(); $dispatch('changeInputFunding', {mode: 'loa', input: 'contribution' , value : $event.target.value })"
x-ref="range"
data-input="contribution"
>
<div class="relative z-10 h-0.75 mt-4 mb-3.5">
<div class="absolute z-10 left-0 right-0 bottom-0 top-0 rounded-md bg-[#C2C6D3]"></div>
<div class="absolute z-20 top-0 bottom-0 rounded-md bg-primary-accent left-0" x-bind:style="'width:'+thumb+'%;'"></div>
<div class="range-thumb" x-bind:style="'left: calc('+thumb+'% - (30px * ('+thumb+' / 100))'"></div>
</div>
</div>
</div>
<div class="form-element text form-range mt-7.5" x-data="rangeSlider(10, 180, 60)">
<div class="flex justify-between items-start gap-2.5 text-base font-medium">
<div>Durée</div>
<div class="flex gap-2.5">
<div class="relative">
<input class="form-text-range" type="text" x-ref="valueinput" @blur="changeValue(); $dispatch('changeInputFunding', { mode: 'loa', input: 'duration', value : $event.target.value })" @keydown.enter="changeValue(); $dispatch('changeInputFunding', { mode: 'loa', input: 'duration', value : $event.target.value })" @input="hasError = false">
<span :class="{'hidden': !hasError}" class="hidden absolute bottom-[-10px] translate-y-full -translate-x-1/2 left-1/2 w-full z-20 bg-error text-xs leading-4 text-white p-2.25 rounded-medium arrow-tip-top arrow-tip-top--error">Merci de remplir une valeur entre <span x-text="min"></span> et <span x-text="max"></span></span>
</div>
<div class="font-semibold">mois</div>
</div>
</div>
<div class="relative">
<input type="range"
id=duration"
name="range" class="" title=""
x-bind:min="min" x-bind:max="max" x-model="selected" step="10"
@input="slide(); $dispatch('changeInputFunding', { mode: 'loa', input: 'duration', value : $event.target.value })"
x-ref="range"
data-input="duration"
>
<div class="relative z-10 h-0.75 mt-4 mb-3.5">
<div class="absolute z-10 left-0 right-0 bottom-0 top-0 rounded-md bg-[#C2C6D3]"></div>
<div class="absolute z-20 top-0 bottom-0 rounded-md bg-primary-accent left-0" x-bind:style="'width:'+thumb+'%;'"></div>
<div class="range-thumb" x-bind:style="'left: calc('+thumb+'% - (30px * ('+thumb+' / 100))'"></div>
</div>
</div>
</div>
</div>
<div class="bg-white border border-ui rounded-medium p-5 w-full md:w-[calc(50%_-_10px)]">
<div class="form-element text form-range" x-data="rangeSlider(10, 180, 60)">
<div class="flex justify-between items-start gap-2.5 text-base font-medium">
<div>Km annuels</div>
<div class="flex gap-2.5">
<div class="relative">
<input class="form-text-range" type="text" x-ref="valueinput" @blur="changeValue(); $dispatch('changeInputFunding', { mode: 'loa', input: 'duration', value : $event.target.value })" @keydown.enter="changeValue(); $dispatch('changeInputFunding', { mode: 'loa', input: 'duration', value : $event.target.value })" @input="hasError = false">
<span :class="{'hidden': !hasError}" class="hidden absolute bottom-[-10px] translate-y-full -translate-x-1/2 left-1/2 w-full z-20 bg-error text-xs leading-4 text-white p-2.25 rounded-medium arrow-tip-top arrow-tip-top--error">Merci de remplir une valeur entre <span x-text="min"></span> et <span x-text="max"></span></span>
</div>
<div class="font-semibold">km</div>
</div>
</div>
<div class="relative">
<input type="range"
id=km"
name="range" class="" title=""
x-bind:min="min" x-bind:max="max" x-model="selected" step="10"
@input="slide(); $dispatch('changeInputFunding', { mode: 'loa', input: 'km', value : $event.target.value })"
x-ref="range"
data-input="km"
>
<div class="relative z-10 h-0.75 mt-4 mb-3.5">
<div class="absolute z-10 left-0 right-0 bottom-0 top-0 rounded-md bg-[#C2C6D3]"></div>
<div class="absolute z-20 top-0 bottom-0 rounded-md bg-primary-accent left-0" x-bind:style="'width:'+thumb+'%;'"></div>
<div class="range-thumb" x-bind:style="'left: calc('+thumb+'% - (30px * ('+thumb+' / 100))'"></div>
</div>
</div>
</div>
</div>
</div>
<div x-ref="creditPurchase" :class="{'hidden' : mode !== 'credit_purchase' }" class="hidden flex flex-col md:flex-row gap-1.25 md:gap-5 mt-5 md:mt-7.5">
<div class="bg-white border border-ui rounded-medium p-5 w-full">
<div class="form-element text form-range" x-data="rangeSlider(0, 10000, 6000)">
<div class="flex justify-between items-start gap-2.5 text-base font-medium">
<div>Apport</div>
<div class="flex gap-2.5">
<div class="relative">
<input class="form-text-range" type="text" x-ref="valueinput" @blur="changeValue(); $dispatch('changeInputFunding', { mode: 'credit_purchase', input: 'contribution' , value : $event.target.value })" @keydown.enter="changeValue(); $dispatch('changeInputFunding', { mode: 'credit_purchase', input: 'contribution' , value : $event.target.value })" @input="hasError = false">
<span :class="{'hidden': !hasError}" class="hidden absolute bottom-[-10px] translate-y-full -translate-x-1/2 left-1/2 w-full z-20 bg-error text-xs leading-4 text-white p-2.25 rounded-medium arrow-tip-top arrow-tip-top--error">Merci de remplir une valeur entre <span x-text="min"></span> et <span x-text="max"></span></span>
</div>
<div class="font-semibold">€</div>
</div>
</div>
<div class="relative">
<input type="range"
id="contribution"
name="range" class="" title=""
x-bind:min="min" x-bind:max="max" x-model="selected" step="100"
@input="slide(); $dispatch('changeInputFunding', { mode: 'credit_purchase', input: 'contribution' , value : $event.target.value })"
x-ref="range"
data-input="contribution"
>
<div class="relative z-10 h-0.75 mt-4 mb-3.5">
<div class="absolute z-10 left-0 right-0 bottom-0 top-0 rounded-md bg-[#C2C6D3]"></div>
<div class="absolute z-20 top-0 bottom-0 rounded-md bg-primary-accent left-0" x-bind:style="'width:'+thumb+'%;'"></div>
<div class="range-thumb" x-bind:style="'left: calc('+thumb+'% - (30px * ('+thumb+' / 100))'"></div>
</div>
</div>
</div>
<div class="form-element text form-range mt-7.5" x-data="rangeSlider(20, 180, 60)">
<div class="flex justify-between items-start gap-2.5 text-base font-medium">
<div>Durée</div>
<div class="flex gap-2.5">
<div class="relative">
<input class="form-text-range" type="text" x-ref="valueinput" @blur="changeValue(); $dispatch('changeInputFunding', { mode: 'credit_purchase', input: 'duration' , value : $event.target.value })" @keydown.enter="changeValue(); $dispatch('changeInputFunding', { mode: 'credit_purchase', input: 'duration' , value : $event.target.value })" @input="hasError = false">
<span :class="{'hidden': !hasError}" class="hidden absolute bottom-[-10px] translate-y-full -translate-x-1/2 left-1/2 w-full z-20 bg-error text-xs leading-4 text-white p-2.25 rounded-medium arrow-tip-top arrow-tip-top--error">Merci de remplir une valeur entre <span x-text="min"></span> et <span x-text="max"></span></span>
</div>
<div class="font-semibold">mois</div>
</div>
</div>
<div class="relative">
<input type="range"
id="credit_purchase_duration"
name="range" class="" title=""
x-bind:min="min" x-bind:max="max" x-model="selected" step="10"
@input="slide(); $dispatch('changeInputFunding', { mode: 'credit_purchase', input: 'duration' , value : $event.target.value })"
x-ref="range"
data-input="duration"
>
<div class="relative z-10 h-0.75 mt-4 mb-3.5">
<div class="absolute z-10 left-0 right-0 bottom-0 top-0 rounded-md bg-[#C2C6D3]"></div>
<div class="absolute z-20 top-0 bottom-0 rounded-md bg-primary-accent left-0" x-bind:style="'width:'+thumb+'%;'"></div>
<div class="range-thumb" x-bind:style="'left: calc('+thumb+'% - (30px * ('+thumb+' / 100))'"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row gap-1.25 md:gap-5 mt-5 md:mt-7.5" x-data="radioTiles">
<div data-option-value="0" data-radio class="bg-white border border-ui rounded-medium p-5 md:w-[calc(100%_/_3_-_10px)] cursor-pointer select-none link group hover:shadow-item-product"
:class="{
'bg-primary text-white' : isChecked === 0,
'bg-white': isChecked !== 0
}"
>
<div class="flex items-center gap-3.5 border-b border-ui pb-5">
<div class="form-element form-checkbox form-checkbox--without-hover">
<label for="tile_1">
<input class="checkbox" type="radio" name="radio-group" value="checkbox" id="tile_1">
<span class="controler"></span>
</label>
</div>
<div class="font-semibold tracking-tightened text-text-light text-xl"
:class="{
'text-white': isChecked === 0,
'text-text-light': isChecked !== 0
}"
>
<span x-text="prices.price0"></span>€/mois
</div>
</div>
<ul class="mt-5.5 font-medium text-text-light"
:class="{
'text-white': isChecked === 0,
'text-text-light': isChecked !== 0
}">
<li class="flex items-start gap-2.5 py-2">
<?= icon('label-suppress-colored', 'w-5.5 shrink-0'); ?>
<span>Sans garantie mécanique</span>
</li>
<li class="flex items-start gap-2.5 py-2">
<?= icon('label-suppress-colored', 'w-5.5 shrink-0'); ?>
<span>Sans protection pécuniaire</span>
</li>
</ul>
<a href="#" target="_blank" class="preventDefault link underline text-text-light text-xs mt-6.25 inline-block"
:class="{
'text-ui': isChecked === 0,
'text-text-light': isChecked !== 0
}">Voir les mentions légales</a>
</div>
<div data-option-value="20" data-radio class="bg-white border border-ui rounded-medium p-5 md:w-[calc(100%_/_3_-_10px)] cursor-pointer select-none link group hover:shadow-item-product"
:class="{
'bg-primary text-white' : isChecked === 1,
'bg-white': isChecked !== 1
}"
>
<div class="flex items-center gap-3.5 border-b border-ui pb-5">
<div class="form-element form-checkbox form-checkbox--without-hover">
<label for="tile_2">
<input class="checkbox" type="radio" name="radio-group" value="checkbox" id="tile_2">
<span class="controler"></span>
</label>
</div>
<div class="font-semibold tracking-tightened text-text-light text-xl"
:class="{
'text-white': isChecked === 1,
'text-text-light': isChecked !== 1
}"
>
<span x-text="prices.price1"></span>€/mois
</div>
</div>
<ul class="mt-5.5 font-medium text-text-light"
:class="{
'text-white': isChecked === 1,
'text-text-light': isChecked !== 1
}">
<li class="flex items-start gap-2.5 py-2">
<?= icon('label-check-colored', 'w-5.5 shrink-0'); ?>
<span>Avec garantie mécanique</span>
</li>
<li class="flex items-start gap-2.5 py-2">
<?= icon('label-suppress-colored', 'w-5.5 shrink-0'); ?>
<span>Sans protection pécuniaire</span>
</li>
</ul>
<a href="#" target="_blank" class="preventDefault link underline text-text-light text-xs mt-6.25 inline-block"
:class="{
'text-ui': isChecked === 1,
'text-text-light': isChecked !== 1
}">Voir les mentions légales</a>
</div>
<div data-option-value="40" data-radio class="bg-white border border-ui rounded-medium p-5 md:w-[calc(100%_/_3_-_10px)] cursor-pointer select-none link group hover:shadow-item-product"
:class="{
'bg-primary text-white' : isChecked === 2,
'bg-white': isChecked !== 2
}"
>
<div class="flex items-center gap-3.5 border-b border-ui pb-5">
<div class="form-element form-checkbox form-checkbox--without-hover">
<label for="tile_3">
<input class="checkbox" type="radio" name="radio-group" value="checkbox" id="tile_3">
<span class="controler"></span>
</label>
</div>
<div class="font-semibold tracking-tightened text-text-light text-xl"
:class="{
'text-white': isChecked === 2,
'text-text-light': isChecked !== 2
}"
>
<span x-text="prices.price2"></span>€/mois
</div>
</div>
<ul class="mt-5.5 font-medium text-text-light"
:class="{
'text-white': isChecked === 2,
'text-text-light': isChecked !== 2
}">
<li class="flex items-start gap-2.5 py-2">
<?= icon('label-check-colored', 'w-5.5 shrink-0'); ?>
<span>Avec garantie mécanique</span>
</li>
<li class="flex items-start gap-2.5 py-2">
<?= icon('label-check-colored', 'w-5.5 shrink-0'); ?>
<span>Avec protection pécuniaire</span>
</li>
</ul>
<a href="#" target="_blank" class="preventDefault link underline text-text-light text-xs mt-6.25 inline-block"
:class="{
'text-ui': isChecked === 2,
'text-text-light': isChecked !== 2
}">Voir les mentions légales</a>
</div>
</div>
<div class="font-medium text-text-light text-smaller mt-10">
Un crédit vous engage et doit être remboursé. Vérifiez vos capacités de remboursement avant de vous engager.
</div>
</div>
</div>

<script>
function initFundingAskCalc(idVehicle) {
return {
mode: 'loa',
idVehicle: idVehicle,
contribution: 0,
duration: 0,
km: null,
prices : {
'price0': 0,
'price1': 0,
'price2': 0
},
init() {
this.$nextTick(() => {
this.contribution = this.$refs.loa.querySelector('[data-input="contribution"]').value;
this.duration = this.$refs.loa.querySelector('[data-input="duration"]').value;
this.km = this.$refs.loa.querySelector('[data-input="km"]').value;

this.calcPrices();
})

const current = this;
document.addEventListener('tabFundingMode', function (e) {
current.changeTab(e.detail)
})
document.addEventListener('changeInputFunding', function (e) {
current.changeInput(e.detail);
})
},
changeTab(tab) {
this.mode = tab;
if(tab === "loa") {
this.contribution = this.$refs.loa.querySelector('[data-input="contribution"]').value;
this.duration = this.$refs.loa.querySelector('[data-input="duration"]').value;
this.km = this.$refs.loa.querySelector('[data-input="km"]').value;
} else {
this.contribution = this.$refs.creditPurchase.querySelector('[data-input="contribution"]').value;
this.duration = this.$refs.creditPurchase.querySelector('[data-input="duration"]').value;
this.km = null;
}
this.calcPrices();
},
calcPrices() {
if(this.km) {
this.prices.price0 = Math.round((this.idVehicle - this.contribution) / this.duration * this.km / this.idVehicle);
this.prices.price1 = Math.round((this.idVehicle - this.contribution) / this.duration * this.km / this.idVehicle + 20);
this.prices.price2 = Math.round((this.idVehicle - this.contribution) / this.duration * this.km / this.idVehicle + 40);
} else {
this.prices.price0 = Math.round((this.idVehicle - this.contribution) / this.duration);
this.prices.price1 = Math.round((this.idVehicle - this.contribution) / this.duration + 20);
this.prices.price2 = Math.round((this.idVehicle - this.contribution) / this.duration + 40);
}
},
changeInput(params) {
switch (params.input) {
case 'contribution':
this.contribution = params.value;
break;
case 'duration':
this.duration = params.value;
break;
case 'km':
this.km = params.value;
break;
default:
console.log('No input');
}
this.calcPrices();
}
}
}
</script>