Alain Afflelou Design System

Step Complet 

<div x-data="appointmentConfirmation()" x-init="init()" class="w-full max-w-3xl mx-auto space-y-12">

    <div class="bg-green-50 rounded-2xl p-8 space-y-8">

        <div class="flex items-center gap-4">
            <div class="w-8 h-8 text-green-600">
                <svg class="text-green-600 w-8 h-8 shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12ZM12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM16.5303 9.86366C16.8232 9.57077 16.8232 9.0959 16.5303 8.803C16.2374 8.51011 15.7626 8.51011 15.4697 8.803L10.6667 13.606L8.53033 11.4697C8.23744 11.1768 7.76256 11.1768 7.46967 11.4697C7.17678 11.7626 7.17678 12.2374 7.46967 12.5303L10.1363 15.197C10.4292 15.4899 10.9041 15.4899 11.197 15.197L16.5303 9.86366Z" fill="currentColor" />
                </svg>
            </div>
            <h1 class="text-3xl font-normal">Rendez-vous confirmé</h1>
        </div>

        <p class="text-neutral-700">
            Vous trouverez le récapitulatif de votre rendez-vous ci-dessous. Nous vous l'envoyons également par e-mail (vérifiez vos spams) et par SMS si vous avez activé cette option.
        </p>

        <div class="bg-white rounded-xl p-6 space-y-4">
            <template x-for="item in stepperData.data" :key="item.title">
                <div>
                    <p class="text-neutral-600" x-text="item.title + ' : '"></p>
                    <p class="font-medium" x-text="item.value"></p>
                    <template x-if="item.details">
                        <div class="mt-2 text-sm text-neutral-500">
                            <template x-if="item.title === 'INFORMATION DU CONTACT'">
                                <div>
                                    <p x-text="'Email : ' + item.details.email"></p>
                                    <p x-text="'Téléphone : ' + item.details.phone"></p>
                                    <template x-if="item.details.comment">
                                        <p x-text="'Commentaire : ' + item.details.comment"></p>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
            </template>
        </div>

        <div class="space-y-4">
            <p class="text-neutral-700">Ne manquez pas votre rendez-vous en l'ajoutant à votre agenda en ligne :</p>

            <div class="flex gap-4 flex-wrap">
                <a href="#" target="_blank" rel="noopenner noreferer" :href="getGoogleCalendarUrl()" class=" btn btn-dark-subtle ">
                    Ajouter à Google Agenda

                </a>
                <a href="#" target="_blank" rel="noopenner noreferer" :href="getOutlookCalendarUrl()" class=" btn btn-dark-subtle ">
                    Ajouter à l'agenda Outlook

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

    <div class="space-y-6">
        <h2 class="text-3xl font-normal">Votre pré-bilan pour gagner du temps</h2>

        <p class="text-neutral-700">
            Avant votre rendez-vous, remplissez ce questionnaire qui aidera votre opticien à vous recommander les solutions les plus adaptées à votre quotidien.
        </p>

        <a href="#" target="_blank" rel="noopenner noreferer" class=" btn btn-dark-ghost ">
            Répondre au questionnaire

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

<script>
    function appointmentConfirmation() {
        return {
            get stepperData() {
                return this.$store.locator.stepperData;
            },
            init() {
                this.$watch('stepperData.completed', (value) => {
                    if (value) {
                        console.log('Composant confirmation visible, initialisation...');
                    }
                });
            },
            getCalendarData() {
                if (!this.stepperData?.data) return null;
                const location = this.stepperData.data.find(item => item.title === 'MAGASIN')?.value || '';
                const subject = this.stepperData.data.find(item => item.title === 'SUJET DU RENDEZ-VOUS')?.value || '';
                const datetime = this.stepperData.data.find(item => item.title === 'DATE ET HEURE DU RENDEZ-VOUS')?.value || '';
                const contact = this.stepperData.data.find(item => item.title === 'INFORMATION DU CONTACT');
                return {
                    location,
                    subject,
                    datetime,
                    contact: contact?.value || '',
                    email: contact?.details?.email || '',
                    phone: contact?.details?.phone || ''
                };
            },
            getGoogleCalendarUrl() {
                const data = this.getCalendarData();
                if (!data) return '#';
                const params = new URLSearchParams({
                    action: 'TEMPLATE',
                    text: `${data.subject} - Afflelou`,
                    details: `Rendez-vous chez Afflelou\n${data.contact}\nEmail: ${data.email}\nTél: ${data.phone}`,
                    location: data.location,
                    dates: this.formatDateForCalendar(data.datetime)
                });
                return `https://calendar.google.com/calendar/render?${params.toString()}`;
            },
            getOutlookCalendarUrl() {
                const data = this.getCalendarData();
                if (!data) return '#';
                const params = new URLSearchParams({
                    path: '/calendar/action/compose',
                    rru: 'addevent',
                    subject: `${data.subject} - Afflelou`,
                    body: `Rendez-vous chez Afflelou\n${data.contact}\nEmail: ${data.email}\nTél: ${data.phone}`,
                    location: data.location,
                    startdt: this.formatDateForCalendar(data.datetime)
                });
                return `https://outlook.live.com/calendar/0/${params.toString()}`;
            },
            formatDateForCalendar(datetimeStr) {
                // Exemple de format d'entrée : "Lundi 15 janvier 2024 à 14:30"
                const dateRegex = /(\d{1,2})\s+(\w+)\s+(\d{4})\s+à\s+(\d{1,2}):(\d{2})/;
                const matches = datetimeStr.match(dateRegex);
                if (!matches) return '';
                const [, day, month, year, hour, minute] = matches;
                const monthMap = {
                    'janvier': '01',
                    'février': '02',
                    'mars': '03',
                    'avril': '04',
                    'mai': '05',
                    'juin': '06',
                    'juillet': '07',
                    'août': '08',
                    'septembre': '09',
                    'octobre': '10',
                    'novembre': '11',
                    'décembre': '12'
                };
                const monthNum = monthMap[month.toLowerCase()];
                const dateObj = new Date(`${year}-${monthNum}-${day}T${hour}:${minute}:00`);
                return dateObj.toISOString().replace(/[:-]/g, '').split('.')[0] + 'Z';
            }
        }
    }
</script>
 
{# appointment-confirmation.html.twig #}
<div
        x-data="appointmentConfirmation()"
        x-init="init()"
        class="w-full max-w-3xl mx-auto space-y-12"
>
    {# Carte de confirmation #}
    <div class="bg-green-50 rounded-2xl p-8 space-y-8">
        {# En-tête avec icône #}
        <div class="flex items-center gap-4">
            <div class="w-8 h-8 text-green-600">
                {% render "@icons-library--check-circle-outline" with {
                    iconClass: "text-green-600 w-8 h-8"
                } %}
            </div>
            <h1 class="text-3xl font-normal">Rendez-vous confirmé</h1>
        </div>

        {# Message de confirmation #}
        <p class="text-neutral-700">
            Vous trouverez le récapitulatif de votre rendez-vous ci-dessous. Nous vous l'envoyons également par e-mail (vérifiez vos spams) et par SMS si vous avez activé cette option.
        </p>

        {# Récapitulatif du RDV #}
        <div class="bg-white rounded-xl p-6 space-y-4">
            <template x-for="item in stepperData.data" :key="item.title">
                <div>
                    <p class="text-neutral-600" x-text="item.title + ' : '"></p>
                    <p class="font-medium" x-text="item.value"></p>
                    <template x-if="item.details">
                        <div class="mt-2 text-sm text-neutral-500">
                            <template x-if="item.title === 'INFORMATION DU CONTACT'">
                                <div>
                                    <p x-text="'Email : ' + item.details.email"></p>
                                    <p x-text="'Téléphone : ' + item.details.phone"></p>
                                    <template x-if="item.details.comment">
                                        <p x-text="'Commentaire : ' + item.details.comment"></p>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
            </template>
        </div>

        {# Section calendriers #}
        <div class="space-y-4">
            <p class="text-neutral-700">Ne manquez pas votre rendez-vous en l'ajoutant à votre agenda en ligne :</p>

            <div class="flex gap-4 flex-wrap">
                {% render "@template-button" with {
					color: "dark-subtle",
                    label: "Ajouter à Google Agenda",
                    href: "#",
                    external: true,
                    button_attribute: ':href="getGoogleCalendarUrl()"'
                } %}
                {% render "@template-button" with {
					color: "dark-subtle",
                    label: "Ajouter à l'agenda Outlook",
                    href: "#",
                    external: true,
                    button_attribute: ':href="getOutlookCalendarUrl()"'
                } %}
            </div>
        </div>
    </div>

    {# Section pré-bilan #}
    <div class="space-y-6">
        <h2 class="text-3xl font-normal">Votre pré-bilan pour gagner du temps</h2>

        <p class="text-neutral-700">
            Avant votre rendez-vous, remplissez ce questionnaire qui aidera votre opticien à vous recommander les solutions les plus adaptées à votre quotidien.
        </p>

        {% render "@template-button" with {
			color: "dark-ghost",
            label: "Répondre au questionnaire",
            href: "#",
            external: true
        } %}
    </div>
</div>

<script>
	function appointmentConfirmation() {
		return {
			get stepperData() {
				return this.$store.locator.stepperData;
			},

			init() {
				this.$watch('stepperData.completed', (value) => {
					if (value) {
						console.log('Composant confirmation visible, initialisation...');
					}
				});
			},

			getCalendarData() {
				if (!this.stepperData?.data) return null;

				const location = this.stepperData.data.find(item => item.title === 'MAGASIN')?.value || '';
				const subject = this.stepperData.data.find(item => item.title === 'SUJET DU RENDEZ-VOUS')?.value || '';
				const datetime = this.stepperData.data.find(item => item.title === 'DATE ET HEURE DU RENDEZ-VOUS')?.value || '';
				const contact = this.stepperData.data.find(item => item.title === 'INFORMATION DU CONTACT');

				return {
					location,
					subject,
					datetime,
					contact: contact?.value || '',
					email: contact?.details?.email || '',
					phone: contact?.details?.phone || ''
				};
			},

			getGoogleCalendarUrl() {
				const data = this.getCalendarData();
				if (!data) return '#';

				const params = new URLSearchParams({
					action: 'TEMPLATE',
					text: `${data.subject} - Afflelou`,
					details: `Rendez-vous chez Afflelou\n${data.contact}\nEmail: ${data.email}\nTél: ${data.phone}`,
					location: data.location,
					dates: this.formatDateForCalendar(data.datetime)
				});

				return `https://calendar.google.com/calendar/render?${params.toString()}`;
			},

			getOutlookCalendarUrl() {
				const data = this.getCalendarData();
				if (!data) return '#';

				const params = new URLSearchParams({
					path: '/calendar/action/compose',
					rru: 'addevent',
					subject: `${data.subject} - Afflelou`,
					body: `Rendez-vous chez Afflelou\n${data.contact}\nEmail: ${data.email}\nTél: ${data.phone}`,
					location: data.location,
					startdt: this.formatDateForCalendar(data.datetime)
				});

				return `https://outlook.live.com/calendar/0/${params.toString()}`;
			},

			formatDateForCalendar(datetimeStr) {
				// Exemple de format d'entrée : "Lundi 15 janvier 2024 à 14:30"
				const dateRegex = /(\d{1,2})\s+(\w+)\s+(\d{4})\s+à\s+(\d{1,2}):(\d{2})/;
				const matches = datetimeStr.match(dateRegex);

				if (!matches) return '';

				const [, day, month, year, hour, minute] = matches;
				const monthMap = {
					'janvier': '01', 'février': '02', 'mars': '03', 'avril': '04',
					'mai': '05', 'juin': '06', 'juillet': '07', 'août': '08',
					'septembre': '09', 'octobre': '10', 'novembre': '11', 'décembre': '12'
				};

				const monthNum = monthMap[month.toLowerCase()];
				const dateObj = new Date(`${year}-${monthNum}-${day}T${hour}:${minute}:00`);

				return dateObj.toISOString().replace(/[:-]/g, '').split('.')[0] + 'Z';
			}
		}
	}
</script>
 
/* No context defined. */

No notes defined.