Etat Pur Design System

Return Product 

<div x-data class="fixed right-0 z-40 inset-y-0 lg:inset-y-0 max-w-full">
    <div x-cloak x-transition.opacity x-show="$store.asideBlocs.asides.find(aside => aside.name === 'returnProduct')?.open" class="fixed inset-0 w-full h-full bg-black/40"></div>
    <div x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="relative bg-white overflow-hidden h-full lg:h-full w-screen md:w-[372px] 2xl:w-[368px] 3xl:w-[508px] flex flex-col lg:rounded-t-none p-8" x-show="$store.asideBlocs.asides.find(aside => aside.name === 'returnProduct')?.open" @click.outside="$store.asideBlocs.closeAside('returnProduct')">
        <div class="font-medium h4 flex justify-between items-center mb-4">
            <span></span>
            <button type="button" @click="$store.asideBlocs.closeAside('returnProduct')" aria-label="Label text" class=" btn  btn-neutral  btn-outline  btn-size-sm btn-only-icon">
                <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M6 18 18 6M6 6l12 12" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg>

            </button>
        </div>
        <div class="overflow-auto flex-1">
            <section class="flex flex-col gap-8">
                <h2 class="h4">Effectuer un retour</h2>
                <div class="flex flex-col gap-2">
                    <p class="text-body-lg font-bold">Vous souhaitez effectuer un retour hors délai ?</p>
                    <div class="flex flex-col gap-5 text-body-base">
                        <p>Le retour de ces produits n’est plus disponible car le le délai de 3 jours est dépassé.</p>
                        <p>En cas de besoin, nous vous invitons à contacter le service client :</p>
                        <a class="text-click-base underline" href="tel:08O9 545 900">08O9 545 900</a>
                    </div>
                </div>

                <div>
                    <a href="#" type="button" class="ms-1 justify-center w-fit  btn  btn-dark  btn-outline  btn-size-sm">
                        J’ai compris

                    </a>
                </div>
            </section>

        </div>
    </div>
</div>
 
{% embed "@side-panel" with panel|merge({sidePanelButton:panel.sidePanelButton|merge({label:(panel.sidePanelButton.label is defined ? panel.sidePanelButton.label|format(product_quantity|default('600')))})}) %}
    {% block content %}
        <section class="flex flex-col gap-8">
            <h2 class="h4">Effectuer un retour</h2>
            <div class="flex flex-col gap-2">
                <p class="text-body-lg font-bold">Vous souhaitez effectuer un retour hors délai ?</p>
                <div class="flex flex-col gap-5 text-body-base">
                    <p>Le retour de ces produits n’est plus disponible car le le délai de 3 jours est dépassé.</p>
                    <p>En cas de besoin, nous vous invitons à contacter le service client :</p>
                    <a class="text-click-base underline" href="tel:08O9 545 900">08O9 545 900</a>
                </div>
            </div>

            <div>
                {% render "@template-button" with {
                    label: "J’ai compris",
                    href: "#",
                    color: "dark",
                    type: "outline",
                    size: "sm",
                    button_class: "ms-1 justify-center w-fit",
                } %}
            </div>
        </section>
    {% endblock %}
{% endembed %}
 
{
  "panel": {
    "title": "",
    "sidePanelButton": false,
    "mobilePanel": "full",
    "showValue": "$store.asideBlocs.asides.find(aside => aside.name === 'returnProduct')?.open",
    "closeButtonAlpineClick": "$store.asideBlocs.closeAside('returnProduct')"
  }
}

No notes defined.