Welcome confettis (#4262)

* Work on welcome final screen (confetti) * Confettis * remove react-use
dust-tt · Mar 13, 2024 · a247090 · a247090
1 parent 0fdffc2
commit a247090
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 68 deletions.
diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -76,6 +76,7 @@
     "react": "^18.2.0",
     "react-accessible-treeview": "^2.6.0",
     "react-beforeunload": "^2.5.3",
+    "react-confetti": "^6.1.0",
     "react-cookie": "^6.1.1",
     "react-cropper": "^2.3.3",
     "react-dom": "^18.2.0",

diff --git a/front/pages/api/stripe/webhook.ts b/front/pages/api/stripe/webhook.ts
@@ -519,6 +519,10 @@ async function handler(
                 },
               });
             }
+            logger.info(
+              { event },
+              "[Stripe Webhook] Received customer.subscription.deleted event."
+            );
             await activeSubscription.update({
               status: "ended",
               endDate: new Date(),

diff --git a/front/pages/w/[wId]/welcome.tsx b/front/pages/w/[wId]/welcome.tsx
@@ -1,15 +1,16 @@
 import {
   Button,
   Input,
-  Logo,
   LogoSquareColorLogo,
   Page,
   RadioButton,
+  SparklesIcon,
 } from "@dust-tt/sparkle";
 import type { UserType, WorkspaceType } from "@dust-tt/types";
 import type { InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import Confetti from "react-confetti";
 
 import OnboardingLayout from "@app/components/sparkle/OnboardingLayout";
 import { getUserMetadata } from "@app/lib/api/user";
@@ -18,9 +19,6 @@ import { withDefaultUserAuthRequirements } from "@app/lib/iam/session";
 
 const { URL = "", GA_TRACKING_ID = "" } = process.env;
 
-const ADMIN_YOUTUBE_ID = "f9n4mqBX2aw";
-const MEMBER_YOUTUBE_ID = null; // We don't have the video yet.
-
 export const getServerSideProps = withDefaultUserAuthRequirements<{
   user: UserType;
   owner: WorkspaceType;
@@ -83,9 +81,7 @@ export default function Welcome({
   const [adminInterest, setAdminInterest] =
     useState<string>(defaultAdminInterest);
   const [isFormValid, setIsFormValid] = useState<boolean>(false);
-  const [displayVideoScreen, setDisplayVideoScreen] = useState<boolean>(false);
-
-  const youtubeId = isAdmin ? ADMIN_YOUTUBE_ID : MEMBER_YOUTUBE_ID;
+  const [showFinalScreen, setShowFinalScreen] = useState<boolean>(false);
 
   useEffect(() => {
     setIsFormValid(
@@ -122,12 +118,7 @@ export default function Welcome({
         });
       }
     }
-    // We don't block the user if it fails here.
-    if (youtubeId) {
-      setDisplayVideoScreen(true);
-    } else {
-      await redirectToApp();
-    }
+    setShowFinalScreen(true);
   });
 
   const redirectToApp = async () => {
@@ -138,15 +129,15 @@ export default function Welcome({
     }
   };
 
-  if (!displayVideoScreen) {
+  if (!showFinalScreen) {
     return (
       <OnboardingLayout
         owner={owner}
         gaTrackingId={gaTrackingId}
         headerTitle="Joining Dust"
         headerRightActions={
           <Button
-            label={youtubeId ? "Next" : "Ok"}
+            label={"Next"}
             disabled={!isFormValid || isSubmitting}
             size="sm"
             onClick={submit}
@@ -239,7 +230,7 @@ export default function Welcome({
           </div>
           <div className="flex justify-end">
             <Button
-              label={youtubeId ? "Next" : "Ok"}
+              label={"Next"}
               disabled={!isFormValid || isSubmitting}
               size="md"
               onClick={submit}
@@ -248,68 +239,27 @@ export default function Welcome({
         </div>
       </OnboardingLayout>
     );
-  } else if (displayVideoScreen && youtubeId !== null) {
+  } else if (showFinalScreen) {
     return (
       <OnboardingLayout
         owner={owner}
         gaTrackingId={gaTrackingId}
         headerTitle="Joining Dust"
-        headerRightActions={
-          <Button
-            label="Ok"
-            disabled={!isFormValid}
-            size="sm"
-            onClick={redirectToApp}
-          />
-        }
+        headerRightActions={<></>}
       >
+        <Confetti wind={0.02} gravity={0.08} />
         <div className="flex h-full flex-col gap-6 pt-4 md:justify-center md:pt-0">
-          <Page.Header
-            title={`You're ready to go!`}
-            icon={() => <Logo className="-ml-8 h-4 w-32" />}
-          />
-          <p className="text-element-800">
-            Here is a short video to get you started with Dust.
-          </p>
-          <div>
-            <YoutubeIframe youtubeId={youtubeId} />
-          </div>
-          <div className="flex justify-center">
-            <Button
-              label="Ok"
-              disabled={!isFormValid}
-              size="md"
-              onClick={redirectToApp}
-            />
+          <Page.Header title={`You are all set!`} icon={SparklesIcon} />
+          <Page.P>
+            We're glad to have you onboard.
+            <br />
+            Thank you for your trust.
+          </Page.P>
+          <div className="flex w-full flex-col items-end">
+            <Button label="Let's roll" size="md" onClick={redirectToApp} />
           </div>
         </div>
       </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>
-  );
-};