feat(waitlist): add trouble message and improve error handling

Co-authored-by: Ona <no-reply@ona.com>

apps/waitlist-website/app/chat/message.ts

@@ -56,3 +56,10 @@ export function duplicateEmailMessage(): SystemMessage {
 		message: `I appreciate your excitement! You are already on the waitlist. When I am ready, I will reach out again. Have a good ${timeOfDay()} :)`,
 	}
 }
+
+export function troubleMessage(): SystemMessage {
+	return {
+		role: "system",
+		message: `I apologize, but I am having trouble adding you to the waitlist. Could you refresh the page and try again please in a moment?`,
+	}
+}

apps/waitlist-website/app/routes/home.tsx

@@ -8,6 +8,7 @@ import { ChatBox } from "~/chat/chat-box"
 import {
 	duplicateEmailMessage,
 	INITLAL_MESSAGES,
+	troubleMessage,
 	waitListJoinedMessage,
 	type Message,
 	type SystemMessage,
@@ -111,10 +112,19 @@ export default function Home() {
 		if (fetcher.data?.email && !isAnimatingSend) {
 			setMessages((messages) => [...messages, waitListJoinedMessage(fetcher.data.email)])
 		} else if (fetcher.data?.error) {
-			if (fetcher.data.error === FormError.Duplicate && !isAnimatingSend) {
+			if (!isAnimatingSend) {
-				setMessages((messages) => [...messages, duplicateEmailMessage()])
+				let errorMessage: SystemMessage
-			} else {
+				switch (fetcher.data.error) {
+					case FormError.Duplicate:
+						errorMessage = duplicateEmailMessage()
+						break
+					default: {
 						console.error(fetcher.data.error)
+						errorMessage = troubleMessage()
+						break
+					}
+				}
+				setMessages((messages) => [...messages, errorMessage])
 			}
 		}
 	}, [fetcher.data?.email, fetcher.data?.error, isAnimatingSend])
@@ -196,6 +206,12 @@ export default function Home() {
 				}}
 			/>
 			{chatBox}
+			<ProgressiveBlur direction="up" className="absolute bottom-0 left-0 right-0 h-24 z-10 pointer-events-none" />
+			<footer className="absolute bottom-4 z-20">
+				<Link to="/privacy" className="text-xs opacity-50 underline">
+					Privacy policy
+				</Link>
+			</footer>
 		</main>
 	)
 }