danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/dwaring87-webdev-wedding. Marissa & David's Wedding Website!
RSVP Improvements Add separate instructions for lookup and edit Tweak UI
author
David Waring
date
(Jan 6, 2023, 2:41 PM -0500)
commit
006bf9f0
006bf9f09ac0df288232b2ead781bfb35d9a1643
parent
2bfdc2c4
2bfdc2c4ed597000d2f1884496e6c27e93e9a4dd
+33
-11
+2
-2
components/RSVP/Edit.vue
+2
-2
components/RSVP/Edit.vue
···
114
114
/>
115
115
116
116
<div v-show="!saving">
117
-
<div class="mx-4 mt-4 mb-8 px-4 bg-gray-100 border border-gray-400 rounded-md shadow" :id="`guest-container-${guest.id}`" v-for="(guest) in invitation.guests" :key="guest.id">
117
+
<div class="mx-1 sm:mx-2 md:mx-4 mt-4 mb-8 px-4 bg-gray-100 border border-gray-400 rounded-md shadow" :id="`guest-container-${guest.id}`" v-for="(guest) in invitation.guests" :key="guest.id">
118
118
<div class="group">
119
119
<p>Name:</p>
120
120
<input class="guest-name" :value="guest.name" />
···
137
137
<div class="group">
138
138
<p>Transportation:</p>
139
139
<FormToggle class="guest-transportation" :enabled="guest.transportation" label_no="Not Interested" label_yes="Interested" />
140
-
<p class="info">Are you interested in transportation to and from the wedding venue? We are looking into hiring a bus to bring guests to and from Ithaca. Please let us know (for each person) if you're interested so we know how many seats we would need. We'll reach out to those that are interested with the details.</p>
140
+
<p class="info">Are you interested in possible transportation to and from the wedding venue? We are looking into hiring a bus to bring guests to and from Ithaca. Please let us know (for each person) if you're interested so we know how many seats we would need. We'll reach out to those that are interested with the details.</p>
141
141
</div>
142
142
<div class="group">
143
143
<p>Dietary Restrictions:</p>
+29
-7
components/RSVP/Instructions.vue
+29
-7
components/RSVP/Instructions.vue
···
1
1
<script setup>
2
+
import RiMail from '~icons/ri/mail-check-fill';
3
+
2
4
const { getDetails } = useCMS();
3
5
const email = await getDetails("contact_email");
6
+
const props = defineProps({
7
+
invitationFound: Boolean
8
+
});
4
9
</script>
5
10
6
11
<template>
7
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">
8
-
<h1 class="text-white">RSVP</h1>
13
+
<h1 class="text-white"><RiMail class="inline" /> RSVP</h1>
9
14
<div class="instructions mt-6 max-w-3xl text-base text-slate-100">
10
-
<p>To RSVP:</p>
11
-
<ol>
12
-
<li>Find the unique invite code from the invitation insert. This will be a code like <code class="font-bold">fuzzy-purple-emu</code>.</li>
13
-
<li>Enter the code</li>
14
-
<li>RSVP for each of the guests associated with the invitation</li>
15
-
</ol>
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>Select if you're interested in possible Transportation to/from the venue on Saturday</li>
23
+
<li>Add any dietary restrictions</li>
24
+
<li>Click the <strong>Save</strong> button at the bottom</li>
25
+
</ol>
26
+
</div>
27
+
28
+
<!-- Instructions for Finding the Invitation -->
29
+
<div v-else>
30
+
<p class="font-semibold">To Find Your Invitation:</p>
31
+
<ol>
32
+
<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>
33
+
<li>Enter the invite code</li>
34
+
<li>Click the <strong>Find Invitation</strong> button</li>
35
+
</ol>
36
+
</div>
37
+
16
38
<p>You can come back and update any of the information later.</p>
17
39
<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>
18
40
</div>
+2
-2
pages/rsvp.vue
+2
-2
pages/rsvp.vue
···
34
34
<div class="page">
35
35
<div class="relative bg-white border-2 border-gray-100 rounded-md shadow-xl">
36
36
<div class="grid grid-cols-1 lg:grid-cols-3">
37
-
<RSVPInstructions class="relative overflow-hidden" />
38
-
<div v-if="loaded" class="py-10 px-6 sm:px-10 lg:col-span-2 xl:p-12">
37
+
<RSVPInstructions :invitationFound="!!invitation" class="relative overflow-hidden" />
38
+
<div v-if="loaded" class="py-10 px-4 md:px-8 sm:px-10 lg:col-span-2 xl:p-12">
39
39
<RSVPEdit v-if="invitation" :invitation="invitation" @cancel="onCancel" />
40
40
<RSVPLookup v-else :code="code" @getInvitation="onGetInvitation" />
41
41
</div>