Add more user feedback for form submission

ReflectionsProjections · Aug 18, 2023 · 025d533 · 025d533
1 parent 0403fe6
commit 025d533
Show file tree

Hide file tree

Showing 6 changed files with 310 additions and 105 deletions.
diff --git a/src/components/registration/page-meta.type.ts b/src/components/registration/page-meta.type.ts
@@ -7,7 +7,8 @@ export type PageIndex =
 	| 'recruitment'
 	| 'specialEvents'
 	| 'marketing'
-	| 'emailVerification';
+	| 'emailVerification'
+	| 'finalPage';
 
 export interface PageMeta {
 	[index: string]: {

diff --git a/src/components/registration/referral-selector.svelte b/src/components/registration/referral-selector.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import SmartInput from '../../lib/util/smart-input.svelte';
+
+	const referralOptions = [
+		{ referralId: 'ACMOH', displayText: 'ACM Open House' },
+		{ referralId: 'buildingAds', displayText: 'Building Ads' },
+		{ referralId: 'courses', displayText: 'School Course' },
+		{ referralId: 'instagram', displayText: 'Instagram' },
+		{ referralId: 'email', displayText: 'E-mail' },
+		{ referralId: 'posters', displayText: 'Posters/Flyers' },
+		{ referralId: 'website', displayText: 'Website' },
+		{ referralId: 'word-of-mouth', displayText: 'Word of Mouth' }
+	];
+
+	export let marketing: string[];
+	export let marketingOther: string | null;
+	export let marketingOtherError: string | undefined;
+
+	$: console.log(marketing);
+</script>
+
+<div>
+	<label for="marketing" class="mb-2">I heard about R|P from... </label>
+	<div class="flex flex-row flex-wrap">
+		{#each referralOptions as { referralId, displayText }, i}
+			<button
+				id={referralId}
+				on:click={() => {
+					if (marketing.includes(referralId)) {
+						marketing = marketing.filter((val) => val !== referralId);
+					} else {
+						marketing = marketing.concat(referralId);
+					}
+				}}
+				class="w-1/2 duration-300 text-center bg-white p-3 {marketing.includes(referralId)
+					? 'bg-opacity-40'
+					: 'bg-opacity-10 hover:bg-opacity-20'}
+                        {i == 0 ? 'rounded-tl-md' : ''}
+                        {i == 1 ? 'rounded-tr-md' : ''}
+                        {i == 6 ? 'rounded-bl-md' : ''}
+                        {i == 7 ? 'rounded-br-md' : ''}
+                        "
+			>
+				{displayText}</button
+			>
+		{/each}
+	</div>
+	<SmartInput label="Other" bind:error={marketingOtherError}>
+		<input
+			class="bg-transparent border border-gray-400 rounded-md h-fit p-1"
+			type="text"
+			id="marketing-other"
+			bind:value={marketingOther}
+		/>
+	</SmartInput>
+</div>
diff --git a/src/components/registration/user-create-feedback.svelte b/src/components/registration/user-create-feedback.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import type { Status } from '$lib/types';
+	import { fade, slide } from 'svelte/transition';
+
+	export let verifyPasscode: Status;
+	export let createUser: Status;
+	export let uploadResume: Status;
+	export let errors: string[] | null;
+
+	const statusStyleMap: Record<Status, string> = {
+		waiting: 'opacity-25 text-gray-400',
+		in_progress: 'opacity-100  text-gray-400',
+		failed: 'opacity-100 text-red-400',
+		success: 'opacity-100 text-green-400'
+	};
+</script>
+
+<div class="flex flex-col gap-3 my-4 items-center" in:slide>
+	<div class="flex flex-row items-center gap-2 {statusStyleMap[verifyPasscode]} duration-300">
+		<Icon icon="ion:finger-print-sharp" class="text-2xl" />
+		<p>Verifying biometrics</p>
+	</div>
+	<div class="flex flex-row items-center gap-2 {statusStyleMap[createUser]} duration-300">
+		<Icon icon="la:clone-solid" class="text-3xl" />
+		<p>Creating your digital clone</p>
+	</div>
+	<div class="flex flex-row items-center gap-2 {statusStyleMap[uploadResume]} duration-300">
+		<Icon icon="fa6-solid:user-secret" class="text-2xl" />
+		<p>Uploading Secret Documents</p>
+	</div>
+
+	{#if uploadResume === 'success'}
+		<div
+			class="flex flex-row items-center gap-2 text-white duration-300"
+			in:fade={{ duration: 500 }}
+		>
+			<p>Welcome to Reflections | Projections</p>
+		</div>
+	{/if}
+
+	{#if errors && errors.length > 0}
+		<div class="flex flex-col bg-black bg-opacity-10 rounded-md p-4 m-2">
+			<div class="text-gray-200 mb-1">We encountered the following problems:</div>
+			{#each errors as error}
+				<div class="text-red-400">{error}</div>
+			{/each}
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -10,4 +10,6 @@ interface Event {
 	visible: boolean;
 }
 
-export type { Event };
+type Status = 'waiting' | 'in_progress' | 'failed' | 'success';
+
+export type { Event, Status };