danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/dwaring87-webdev-wedding. Marissa & David's Wedding Website!
1.7 kB
47 lines
1<script setup>
2 import RiMail from '~icons/ri/mail-check-fill';
3
4 const { getDetails } = useCMS();
5 const email = await getDetails("contact_email");
6 const props = defineProps({
7 invitationFound: Boolean
8 });
9</script>
10
11<template>
12 <div class="bg-secondary py-4 px-6 sm:px-10 lg:py-12 rounded-t-md lg:rounded-tr-none lg:rounded-tl-md lg:rounded-bl-md">
13 <h1 class="text-white"><RiMail class="inline" /> RSVP</h1>
14 <div class="instructions mt-6 max-w-3xl text-base text-slate-100">
15
16 <!-- Instructions for filling out the RSVP -->
17 <div v-if="invitationFound">
18 <p class="font-semibold">To RSVP:</p>
19 <ol>
20 <li>Make sure to RSVP for each person</li>
21 <li>RSVP for both the Friday Welcome Dinner and the Saturday Ceremony & Reception</li>
22 <li>Add any dietary restrictions</li>
23 <li>Click the <strong>Save</strong> button at the bottom</li>
24 </ol>
25 </div>
26
27 <!-- Instructions for Finding the Invitation -->
28 <div v-else>
29 <p class="font-semibold">To Find Your Invitation:</p>
30 <ol>
31 <li>Find the unique invite code from the invitation RSVP insert. This will be a code like <code class="font-bold">fuzzy-purple-emu</code>.</li>
32 <li>Enter the invite code</li>
33 <li>Click the <strong>Find Invitation</strong> button</li>
34 </ol>
35 </div>
36
37 <p>You can come back and update any of the information later.</p>
38 <p>Don't know your invite code? Have any questions?<br />Email us at: <a :href="`mailto:${email}?subject=[Contact] RSVP Help`">{{ email }}</a></p>
39 </div>
40 </div>
41</template>
42
43<style scoped>
44 .instructions p {
45 @apply my-4 !important;
46 }
47</style>