refactor(dashboard): onboarding playground skip playground

novuhq · Dec 8, 2024 · 7474151 · 7474151
1 parent c41351a
commit 7474151
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 12 deletions.
diff --git a/apps/dashboard/src/components/auth/inbox-playground.tsx b/apps/dashboard/src/components/auth/inbox-playground.tsx
@@ -157,6 +157,13 @@ export function InboxPlayground() {
     navigate(`${ROUTES.INBOX_EMBED}?${queryParams}`);
   };
 
+  const handleSkipToDashboard = () => {
+    telemetry(TelemetryEvent.SKIP_ONBOARDING_CLICKED, {
+      skippedFrom: 'inbox-playground',
+    });
+    navigate(ROUTES.WELCOME);
+  };
+
   useEffect(() => {
     const subscription = form.watch((value, { name }) => {
       if (name === 'selectedStyle') {
@@ -217,18 +224,23 @@ export function InboxPlayground() {
                   )}
                 </Button>
               ) : (
-                <Button size="sm" className="px-2" onClick={handleImplementClick}>
-                  Implement &lt;Inbox /&gt;
-                </Button>
+                <>
+                  <Button size="sm" variant="ghost" className="px-2" onClick={handleSkipToDashboard}>
+                    Skip to Dashboard
+                  </Button>
+                  <Button size="sm" className="px-2" onClick={handleImplementClick}>
+                    Implement &lt;Inbox /&gt;
+                  </Button>
+                </>
               )}
             </div>
           </div>
         </div>
 
         <div className="max-h-[610px] w-full border-l">
           <InboxPreviewContent
+            hasNotificationBeenSent={hasNotificationBeenSent}
             selectedStyle={form.watch('selectedStyle')}
-            hideHint={hasNotificationBeenSent}
             primaryColor={form.watch('primaryColor')}
             foregroundColor={form.watch('foregroundColor')}
           />

diff --git a/apps/dashboard/src/components/auth/inbox-preview-content.tsx b/apps/dashboard/src/components/auth/inbox-preview-content.tsx
@@ -1,20 +1,21 @@
 import { Inbox, InboxContent, InboxProps } from '@novu/react';
 import { SVGProps } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
 import { useFetchEnvironments } from '../../context/environment/hooks';
 import { useUser } from '@clerk/clerk-react';
 import { useAuth } from '../../context/auth/hooks';
 import { API_HOSTNAME, WEBSOCKET_HOSTNAME } from '../../config';
 
 interface InboxPreviewContentProps {
   selectedStyle: string;
-  hideHint?: boolean;
+  hasNotificationBeenSent?: boolean;
   primaryColor: string;
   foregroundColor: string;
 }
 
 export function InboxPreviewContent({
   selectedStyle,
-  hideHint,
+  hasNotificationBeenSent,
   primaryColor,
   foregroundColor,
 }: InboxPreviewContentProps) {
@@ -67,12 +68,26 @@ export function InboxPreviewContent({
           <div className="mt-10 flex w-full max-w-[440px] items-center justify-end">
             <Inbox {...configuration} placement="bottom-end" open />
           </div>
-          {!hideHint && (
-            <div className="absolute bottom-[-10px] left-2 flex flex-col items-start">
-              <SendNotificationArrow className="mt-2 h-[73px] w-[86px]" />
-              <p className="text-success relative top-[-32px] text-[10px] italic">Hit send, to get an notification!</p>
-            </div>
-          )}
+          <div className="absolute bottom-[-10px] left-2 flex flex-col items-start">
+            <SendNotificationArrow className="mt-2 h-[73px] w-[86px]" />
+            <AnimatePresence mode="wait">
+              <motion.p
+                key={hasNotificationBeenSent ? 'implement' : 'send'}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{
+                  type: 'spring',
+                  duration: 0.2,
+                }}
+                className="text-success relative top-[-32px] max-w-[200px] text-[10px] italic leading-[12px]"
+              >
+                {hasNotificationBeenSent
+                  ? 'Click to implement the Inbox in your application now'
+                  : 'Hit send, to get an notification!'}
+              </motion.p>
+            </AnimatePresence>
+          </div>
         </div>
       )}
       {selectedStyle === 'sidebar' && (