Merge branch 'next' into billing-age

novuhq · Dec 8, 2024 · a19e0cb · a19e0cb
2 parents 372dd89 + 64a1c99
commit a19e0cb
Show file tree

Hide file tree

Showing 12 changed files with 246 additions and 91 deletions.
diff --git a/apps/dashboard/src/components/auth/auth-side-banner.tsx b/apps/dashboard/src/components/auth/auth-side-banner.tsx
@@ -29,7 +29,7 @@ export function AuthSideBanner() {
       <div className="flex flex-col items-start justify-start gap-8 self-stretch">
         <AuthFeatureRow
           icon={<Plug className="h-6 w-6" />}
-          title="Integrates easily, delivers powerful notifications"
+          title="Powerful notifications, easy integrations"
           description="Unlimited workflows, unlimited providers, unlimited subscribers with 99.9% uptime SLA"
         />
         <AuthFeatureRow
@@ -39,7 +39,7 @@ export function AuthSideBanner() {
         />
         <AuthFeatureRow
           icon={<ShieldZap className="h-6 w-6" />}
-          title="Built-in security, Observable and Scalable"
+          title="Observable and scalable with built-in security"
           description="Novu handles any volume, any channel, and any team for mission-critical notifications."
         />
       </div>

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' && (

diff --git a/apps/dashboard/src/components/header-navigation/customer-support-button.tsx b/apps/dashboard/src/components/header-navigation/customer-support-button.tsx
@@ -132,12 +132,7 @@ export const CustomerSupportButton = () => {
     }
   };
   return (
-    <button
-      id="intercom-launcher"
-      tabIndex={-1}
-      className="flex items-center justify-center"
-      onClick={showPlainLiveChat}
-    >
+    <button tabIndex={-1} className="flex items-center justify-center" onClick={showPlainLiveChat}>
       <HeaderButton label="Help">
         <RiQuestionFill className="text-foreground-600 size-4" />{' '}
       </HeaderButton>

diff --git a/apps/dashboard/src/components/header-navigation/header-navigation.tsx b/apps/dashboard/src/components/header-navigation/header-navigation.tsx
@@ -13,7 +13,10 @@ export const HeaderNavigation = (props: HeaderNavigationProps) => {
   const { startItems, hideBridgeUrl = false, className, ...rest } = props;
   return (
     <div
-      className={cn('bg-background flex h-12 w-full items-center justify-between border-b px-2.5 py-1.5', className)}
+      className={cn(
+        'bg-background flex h-12 w-full items-center justify-between border-b border-b-neutral-100 px-2.5 py-1.5',
+        className
+      )}
       {...rest}
     >
       {startItems}

diff --git a/apps/dashboard/src/components/primitives/card.tsx b/apps/dashboard/src/components/primitives/card.tsx
@@ -9,7 +9,11 @@ Card.displayName = 'Card';
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+    <div
+      ref={ref}
+      className={cn('flex flex-col space-y-1.5 bg-neutral-50 p-4 text-sm font-medium', className)}
+      {...props}
+    />
   )
 );
 CardHeader.displayName = 'CardHeader';

diff --git a/apps/dashboard/src/components/primitives/container.tsx b/apps/dashboard/src/components/primitives/container.tsx
@@ -0,0 +1,5 @@
+import { cn } from '../../utils/ui';
+
+export const Container = ({ children, className }: { children: React.ReactNode; className?: string }) => {
+  return <div className={cn('mx-auto w-full max-w-[1152px] px-14 py-14', className)}>{children}</div>;
+};
diff --git a/apps/dashboard/src/components/primitives/help-tooltip-indicator.tsx b/apps/dashboard/src/components/primitives/help-tooltip-indicator.tsx
@@ -0,0 +1,24 @@
+import { RiInformation2Line } from 'react-icons/ri';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+import { cn } from '../../utils/ui';
+
+interface HelpTooltipIndicatorProps {
+  text: string;
+  className?: string;
+  size?: '4' | '5';
+}
+
+export function HelpTooltipIndicator({ text, className, size = '5' }: HelpTooltipIndicatorProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className={cn('text-foreground-400 hover:cursor inline-block', className)}>
+          <RiInformation2Line className={`size-${size}`} />
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{text}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/apps/dashboard/src/components/shared/external-link.tsx b/apps/dashboard/src/components/shared/external-link.tsx
@@ -1,21 +1,44 @@
-import { RiExternalLinkLine } from 'react-icons/ri';
+import { RiBookMarkedLine, RiExternalLinkLine, RiQuestionLine } from 'react-icons/ri';
 import { cn } from '@/utils/ui';
+import { useTelemetry } from '@/hooks/use-telemetry';
+import { TelemetryEvent } from '@/utils/telemetry';
 
 interface ExternalLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   children: React.ReactNode;
   iconClassName?: string;
+  variant?: 'default' | 'documentation' | 'tip';
 }
 
-export function ExternalLink({ children, className, iconClassName, ...props }: ExternalLinkProps) {
+export function ExternalLink({
+  children,
+  className,
+  variant = 'default',
+  iconClassName,
+  href,
+  ...props
+}: ExternalLinkProps) {
+  const telemetry = useTelemetry();
+
+  const handleClick = () => {
+    telemetry(TelemetryEvent.EXTERNAL_LINK_CLICKED, {
+      href,
+      variant,
+    });
+  };
+
   return (
     <a
       target="_blank"
       rel="noopener noreferrer"
-      className={cn('inline-flex items-center gap-1 hover:underline', className)}
+      className={cn('text-foreground-600 inline-flex items-center gap-1 hover:underline', className)}
+      href={href}
+      onClick={handleClick}
       {...props}
     >
+      {variant === 'documentation' && <RiBookMarkedLine className={cn('size-4', iconClassName)} aria-hidden="true" />}
+      {variant === 'default' && <RiExternalLinkLine className={cn('size-4', iconClassName)} aria-hidden="true" />}
+      {variant === 'tip' && <RiQuestionLine className={cn('size-4', iconClassName)} aria-hidden="true" />}
       {children}
-      <RiExternalLinkLine className={cn('size-4', iconClassName)} aria-hidden="true" />
     </a>
   );
 }
diff --git a/apps/dashboard/src/components/side-navigation/side-navigation.tsx b/apps/dashboard/src/components/side-navigation/side-navigation.tsx
@@ -70,7 +70,7 @@ export const SideNavigation = () => {
                 <RiStore3Line className="size-4" />
                 <span>Integration Store</span>
               </NavigationLink>
-              <NavigationLink to={ROUTES.API_KEYS}>
+              <NavigationLink to={buildRoute(ROUTES.API_KEYS, { environmentSlug: currentEnvironment?.slug ?? '' })}>
                 <RiKey2Line className="size-4" />
                 <span>API Keys</span>
               </NavigationLink>