<div class="funding-modal fixed inset-0 z-[80] hidden"
x-data="initFundingModal()"
@keydown.escape.window="close()"
:class="{
'block' : modalOpen,
'hidden' : !modalOpen
}"
>
<div class="funding-modal__overlay absolute inset-0 bg-primary opacity-40 cursor-pointer transition duration-300 translate-x-full"
:class="{
'translate-x-0' : isOpen,
'translate-x-full' : !isOpen
}"
@click="close()"
></div>
<div class="absolute md:max-w-[750px] z-10 right-0 top-0 bottom-0 flex flex-col transition duration-[350ms]"
:class="{
'translate-x-0' : isOpen,
'translate-x-full' : !isOpen
}"
>
<div class="funding-modal__header bg-white flex justify-between pl-7.5 items-center border-b border-ui">
<div class="text-base font-semibold">Simuler mon financement</div>
<div>
<button @click="close()" class="link text-primary-accent hover:text-secondary p-7"><?= icon('close', 'w-3.25'); ?></button>
</div>
</div>
<div class="funding-modal__content overflow-auto flex-1 bg-ui-light relative">
<?php include renderTemplate('catalog/product/funding-modal/funding-modal-content'); ?>
</div>
<div class="funding-moda__footer bg-white px-7.5 pt-4.5 md:pt-6 pb-5 shadow-filter-footer">
<div class="flex gap-3.25 items-start">
<button class="btn btn-secondary-grey md:px-10 lg:px-16" @click="$dispatch('closeFundingModal')">
Revenir
</button>
<div class="flex-1">
<button class="btn btn-primary w-full">
<span>Demander <span class="hidden md:inline">mon financement</span> en ligne</span>
</button>
<div class=" hidden md:flex gap-2.5 w-fit mx-auto mt-2.5">
<?= icon('label-check-colored'); ?>
<span class="text-xs md:text-smaller font-medium tracking-tightened">Avis immédiat et sans engagement</span>
</div>
</div>
</div>
<div class="md:hidden">
<div class="flex gap-2.5 w-fit mx-auto mt-2.5">
<?= icon('label-check-colored'); ?>
<span class="text-xs md:text-smaller font-medium tracking-tightened">Avis immédiat et sans engagement</span>
</div>
</div>
</div>
</div>
</div>
<script>
function initFundingModal() {
return {
modalOpen: false,
isOpen: false,
init() {
const current = this;
document.addEventListener('openFundingModal', function (e) {
current.open();
});
document.addEventListener('closeFundingModal', function (e) {
current.close();
});
},
open() {
document.body.classList.add('overflow-hidden');
this.modalOpen = true;
this.$nextTick(() => {
this.isOpen = true;
})
},
close() {
const current = this;
document.body.classList.remove('overflow-hidden');
this.isOpen = false;
setTimeout(function () {
current.modalOpen = false;
}, 350)
}
}
}
</script>