From 2ff5ab78e7e64d67a993b0db1cf61395f2e67f7f Mon Sep 17 00:00:00 2001
From: PopDaph <daphne.popin@gmail.com>
Date: Fri, 13 Oct 2023 17:37:19 +0200
Subject: [PATCH] onboarding-video

---
 front/components/sparkle/OnboardingLayout.tsx |   2 +-
 front/pages/w/[wId]/welcome.tsx               | 198 +++++++++++-------
 2 files changed, 126 insertions(+), 74 deletions(-)

diff --git a/front/components/sparkle/OnboardingLayout.tsx b/front/components/sparkle/OnboardingLayout.tsx
index 60c14451b75b..f7b810d9f4ee 100644
--- a/front/components/sparkle/OnboardingLayout.tsx
+++ b/front/components/sparkle/OnboardingLayout.tsx
@@ -86,7 +86,7 @@ export default function OnboardingLayout({
       </div>
 
       <div className="s-dark text-slate-200">
-        <main className="z-10 mx-auto max-w-4xl px-6 pt-24">{children}</main>
+        <main className="z-10 mx-auto max-w-4xl px-6 pt-48">{children}</main>
       </div>
       <>
         <Script
diff --git a/front/pages/w/[wId]/welcome.tsx b/front/pages/w/[wId]/welcome.tsx
index f71bcf47a814..03c24ca17016 100644
--- a/front/pages/w/[wId]/welcome.tsx
+++ b/front/pages/w/[wId]/welcome.tsx
@@ -66,6 +66,7 @@ export default function Welcome({
   const [lastName, setLastName] = useState<string>(user.name.split(" ")[1]);
   const [expertise, setExpertise] = useState<string>(defaultExpertise);
   const [isFormValid, setIsFormValid] = useState<boolean>(false);
+  const [isFormProcessed, setIsFormProcessed] = useState<boolean>(false);
 
   useEffect(() => {
     setIsFormValid(
@@ -91,83 +92,134 @@ export default function Welcome({
       });
     }
     // We don't block the user if it fails here.
-    if (conversationId) {
-      await router.push(`/w/${owner.sId}/assistant/${conversationId}`);
-    } else {
-      await router.push(`/w/${owner.sId}/assistant/new`);
-    }
+    setIsFormProcessed(true);
   };
 
-  return (
-    <OnboardingLayout owner={owner} gaTrackingId={gaTrackingId}>
-      <div className="flex flex-col gap-6">
-        <div>
-          <p className="mt-16 font-objektiv text-2xl font-bold tracking-tighter">
-            <span className="text-red-400 sm:font-objektiv md:font-objektiv">
-              Hello {firstName}
-            </span>
-            <br />
-            Let's check a few things.
-          </p>
-        </div>
-        <div>
-          <p>
-            Your email is <span className="font-bold">{user.email}</span>.
-          </p>
-        </div>
-        <div>
-          <p className="pb-2">Your name is:</p>
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-            <Input
-              name="firstName"
-              placeholder=""
-              value={firstName}
-              onChange={setFirstName}
-            />
-            <Input
-              name="lastName"
-              placeholder=""
-              value={lastName}
-              onChange={setLastName}
+  if (!isFormProcessed) {
+    return (
+      <OnboardingLayout owner={owner} gaTrackingId={gaTrackingId}>
+        <div className="flex flex-col gap-6">
+          <div>
+            <p className="font-objektiv text-2xl font-bold tracking-tighter">
+              <span className="text-red-400 sm:font-objektiv md:font-objektiv">
+                Hello {firstName}
+              </span>
+              <br />
+              Let's check a few things.
+            </p>
+          </div>
+          <div>
+            <p>
+              Your email is <span className="font-bold">{user.email}</span>.
+            </p>
+          </div>
+          <div>
+            <p className="pb-2">Your name is:</p>
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <Input
+                name="firstName"
+                placeholder=""
+                value={firstName}
+                onChange={setFirstName}
+              />
+              <Input
+                name="lastName"
+                placeholder=""
+                value={lastName}
+                onChange={setLastName}
+              />
+            </div>
+          </div>
+          <div>
+            <p className="pb-2">
+              How often do you use ChatGPT or other AI assistants?
+            </p>
+            <RadioButton
+              name="expertise"
+              className="flex-col sm:flex-row"
+              choices={[
+                {
+                  label: "Never!",
+                  value: "beginner",
+                  disabled: false,
+                },
+                {
+                  label: "Occasionally",
+                  value: "intermediate",
+                  disabled: false,
+                },
+                {
+                  label: "Daily",
+                  value: "advanced",
+                  disabled: false,
+                },
+              ]}
+              value={expertise}
+              onChange={setExpertise}
             />
           </div>
+          <div className="flex justify-center pt-6">
+            <Button label="Ok" disabled={!isFormValid} onClick={handleSubmit} />
+          </div>
         </div>
-        <div>
-          <p className="pb-2">
-            How often do you use ChatGPT or other AI assistants?
-          </p>
-          <RadioButton
-            name="expertise"
-            className="flex-col sm:flex-row"
-            choices={[
-              {
-                label: "Never!",
-                value: "beginner",
-                disabled: false,
-              },
-              {
-                label: "Occasionally",
-                value: "intermediate",
-                disabled: false,
-              },
-              {
-                label: "Daily",
-                value: "advanced",
-                disabled: false,
-              },
-            ]}
-            value={expertise}
-            onChange={setExpertise}
-          />
-        </div>
-        <div className="flex justify-center pt-6">
-          <Button
-            label="Start with Dust!"
-            disabled={!isFormValid}
-            onClick={handleSubmit}
-          />
+      </OnboardingLayout>
+    );
+  } else {
+    return (
+      <OnboardingLayout owner={owner} gaTrackingId={gaTrackingId}>
+        <div className="flex flex-col gap-6">
+          <div>
+            <p className="font-objektiv text-2xl font-bold tracking-tighter text-green-400 sm:font-objektiv md:font-objektiv">
+              You're ready to go!
+            </p>
+            <p>Here is a 3 minutes video to get you started with Dust.</p>
+          </div>
+          <div>
+            <YoutubeIframe youtubeId="NVIbCvfkO3E" />
+          </div>
+          <div className="flex justify-center">
+            <Button
+              label="Start with Dust!"
+              disabled={!isFormValid}
+              onClick={async () => {
+                if (conversationId) {
+                  await router.push(
+                    `/w/${owner.sId}/assistant/${conversationId}`
+                  );
+                } else {
+                  await router.push(`/w/${owner.sId}/assistant/new`);
+                }
+              }}
+            />
+          </div>
         </div>
-      </div>
-    </OnboardingLayout>
-  );
+      </OnboardingLayout>
+    );
+  }
 }
+
+const YoutubeIframe = ({ youtubeId }: { youtubeId: string }) => {
+  return (
+    <div
+      className="video"
+      style={{
+        position: "relative",
+        paddingBottom: "56.25%" /* 16:9 */,
+        paddingTop: 25,
+        height: 0,
+      }}
+    >
+      <iframe
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+        }}
+        src={`https://www.youtube.com/embed/${youtubeId}`}
+        frameBorder="0"
+      />
+    </div>
+  );
+};