From 0bd8a763b7afa052768b84ddeee220759fe1ba8d Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Wed, 4 Dec 2024 16:05:35 +0200
Subject: [PATCH] fix: onboarding updates

---
 .../src/components/auth/inbox-playground.tsx         |  6 +++---
 .../src/components/auth/questionnaire-form.tsx       | 12 +++++++++++-
 apps/dashboard/src/pages/usecase-select-page.tsx     |  8 ++++++++
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/src/components/auth/inbox-playground.tsx b/apps/dashboard/src/components/auth/inbox-playground.tsx
index 7a7bfde5549..8fd6b6b3026 100644
--- a/apps/dashboard/src/components/auth/inbox-playground.tsx
+++ b/apps/dashboard/src/components/auth/inbox-playground.tsx
@@ -91,7 +91,7 @@ export function InboxPlayground() {
   });
 
   const { triggerWorkflow, isPending } = useTriggerWorkflow();
-  const { data } = useWorkflows({ query: ONBOARDING_DEMO_WORKFLOW_ID });
+  const { data, isLoading } = useWorkflows({ query: ONBOARDING_DEMO_WORKFLOW_ID });
   const auth = useAuth();
   const [hasNotificationBeenSent, setHasNotificationBeenSent] = useState(false);
   const navigate = useNavigate();
@@ -102,7 +102,7 @@ export function InboxPlayground() {
   }, [telemetry]);
 
   useEffect(() => {
-    if (!data) return;
+    if (!data || isLoading) return;
 
     /**
      * We only want to create the demo workflow if it doesn't exist yet.
@@ -116,7 +116,7 @@ export function InboxPlayground() {
     };
 
     initializeDemoWorkflow();
-  }, [data]);
+  }, [data, isLoading]);
 
   const handleSendNotification = async () => {
     try {
diff --git a/apps/dashboard/src/components/auth/questionnaire-form.tsx b/apps/dashboard/src/components/auth/questionnaire-form.tsx
index e65fb341a22..0d3f0ea0a21 100644
--- a/apps/dashboard/src/components/auth/questionnaire-form.tsx
+++ b/apps/dashboard/src/components/auth/questionnaire-form.tsx
@@ -14,6 +14,7 @@ import { TelemetryEvent } from '../../utils/telemetry';
 import { useNavigate } from 'react-router-dom';
 import { ROUTES } from '../../utils/routes';
 import { useMutation } from '@tanstack/react-query';
+import { useUser } from '@clerk/clerk-react';
 
 interface QuestionnaireFormData {
   jobTitle: JobTitleEnum;
@@ -33,7 +34,7 @@ interface SubmitQuestionnaireData {
 export function QuestionnaireForm() {
   const { control, watch, handleSubmit } = useForm<QuestionnaireFormData>();
   const submitQuestionnaireMutation = useSubmitQuestionnaire();
-
+  const { user } = useUser();
   const selectedJobTitle = watch('jobTitle');
   const selectedOrgType = watch('organizationType');
   const companySize = watch('companySize');
@@ -58,6 +59,15 @@ export function QuestionnaireForm() {
       pageName: 'Create Organization Form',
       hubspotContext: hubspotContext || '',
     });
+
+    if (!user?.unsafeMetadata?.newDashboardOptInStatus) {
+      await user?.update({
+        unsafeMetadata: {
+          newDashboardOptInStatus: 'opted_in',
+        },
+      });
+      await user?.reload();
+    }
   };
 
   return (
diff --git a/apps/dashboard/src/pages/usecase-select-page.tsx b/apps/dashboard/src/pages/usecase-select-page.tsx
index 58aa77a94f3..7f8c142d860 100644
--- a/apps/dashboard/src/pages/usecase-select-page.tsx
+++ b/apps/dashboard/src/pages/usecase-select-page.tsx
@@ -41,6 +41,14 @@ export function UsecaseSelectPage() {
   const [selectedUseCases, setSelectedUseCases] = useState<ChannelTypeEnum[]>([]);
   const [hoveredUseCase, setHoveredUseCase] = useState<ChannelTypeEnum | null>(null);
 
+  useEffect(() => {
+    // Preload all usecase images
+    channelOptions.forEach((option) => {
+      const img = new Image();
+      img.src = `/images/auth/${option.image}`;
+    });
+  }, []);
+
   useEffect(() => {
     track(TelemetryEvent.USECASE_SELECT_PAGE_VIEWED);
   }, [track]);