fix(dashboard): mobile experience

apps/api/src/app/support/support.controller.ts

@@ -1,14 +1,15 @@
 import { Body, Controller, Post, UseGuards } from '@nestjs/common';
 import { ApiExcludeController } from '@nestjs/swagger';
+import { Novu } from '@novu/api';
 import { UserSession } from '@novu/application-generic';
 import { UserSessionData } from '@novu/shared';
+import { UserAuthentication } from '../shared/framework/swagger/api.key.security';
 import { CreateSupportThreadDto } from './dto/create-thread.dto';
-import { CreateSupportThreadCommand } from './usecases/create-thread.command';
 import { PlainCardRequestDto } from './dto/plain-card.dto';
-import { PlainCardsCommand } from './usecases/plain-cards.command';
-import { CreateSupportThreadUsecase, PlainCardsUsecase } from './usecases';
 import { PlainCardsGuard } from './guards/plain-cards.guard';
-import { UserAuthentication } from '../shared/framework/swagger/api.key.security';
+import { CreateSupportThreadUsecase, PlainCardsUsecase } from './usecases';
+import { CreateSupportThreadCommand } from './usecases/create-thread.command';
+import { PlainCardsCommand } from './usecases/plain-cards.command';
 
 @Controller('/support')
 @ApiExcludeController()
@@ -37,4 +38,29 @@ export class SupportController {
       })
     );
   }
+
+  @UserAuthentication()
+  @Post('mobile-setup')
+  async mobileSetup(@UserSession() user: UserSessionData) {
+    if (!process.env.NOVU_INTERNAL_SECRET_KEY) {
+      throw new Error('NOVU_INTERNAL_SECRET_KEY is not set');
+    }
+
+    const novu = new Novu({
+      security: {
+        secretKey: process.env.NOVU_INTERNAL_SECRET_KEY,
+      },
+    });
+
+    await novu.trigger({
+      workflowId: 'mobile-setup-email',
+      to: {
+        subscriberId: user._id as string,
+        firstName: user.firstName as string,
+        lastName: user.lastName as string,
+        email: user.email as string,
+      },
+      payload: {},
+    });
+  }
 }

apps/dashboard/src/components/auth/auth-side-banner.tsx

@@ -1,18 +1,18 @@
 import { CircleCheck } from '../icons/circle-check';
-import { ShieldZap } from '../icons/shield-zap';
 import { Plug } from '../icons/plug';
+import { ShieldZap } from '../icons/shield-zap';
 import { Sparkling } from '../icons/sparkling';
 import { AuthFeatureRow } from './auth-feature-row';
 import { TrustedCompanies } from './trusted-companies';
 
 export function AuthSideBanner() {
   return (
-    <div className="inline-flex w-full max-w-[476px] flex-col items-center justify-center gap-[50px] p-5">
+    <div className="inline-flex h-full w-full max-w-[476px] flex-col items-center justify-center gap-[50px] p-5">
       <div className="flex flex-col items-start justify-start gap-4">
         <div className="inline-flex items-center justify-start gap-3">
           <img src="/images/novu-logo-dark.svg" className="w-24" alt="logo" />
         </div>
-        <div className="flex flex-col items-start justify-start gap-4">
+        <div className="flex hidden flex-col items-start justify-start gap-4 md:block">
           <div className="flex flex-col items-start justify-start gap-1.5 self-stretch">
             <div className="text-2xl font-medium leading-8 text-neutral-950">
               Send your first notification in minutes.
@@ -26,7 +26,7 @@ export function AuthSideBanner() {
           </div>
         </div>
       </div>
-      <div className="flex flex-col items-start justify-start gap-8 self-stretch">
+      <div className="hidden md:flex md:flex-col md:items-start md:justify-start md:gap-8 md:self-stretch">
         <AuthFeatureRow
           icon={<Plug className="h-6 w-6 text-[#DD2450]" />}
           title="Powerful notifications, easy integrations"
@@ -43,8 +43,9 @@ export function AuthSideBanner() {
           description="Novu handles any volume, any channel, and any team for mission-critical notifications."
         />
       </div>
-
-      <TrustedCompanies />
+      <div className="hidden md:block">
+        <TrustedCompanies />
+      </div>
     </div>
   );
 }

apps/dashboard/src/components/auth/mobile-message.tsx

@@ -0,0 +1,57 @@
+import { post } from '@/api/api.client';
+import { Smartphone } from 'lucide-react';
+import { useEffect } from 'react';
+import { showErrorToast } from '../primitives/sonner-helpers';
+
+const MOBILE_WIDTH_THRESHOLD = 768;
+const FIVE_MINUTES_MS = 5 * 60 * 1000;
+const MOBILE_SETUP_STORAGE_KEY = 'mobileSetupEmailSentAt';
+
+export function MobileMessage() {
+  useEffect(() => {
+    const notifyMobileSetup = async () => {
+      try {
+        const isMobile = window.innerWidth < MOBILE_WIDTH_THRESHOLD;
+        const lastSentAt = localStorage.getItem(MOBILE_SETUP_STORAGE_KEY);
+
+        const now = Date.now();
+        const shouldSendEmail = !lastSentAt || now - parseInt(lastSentAt) > FIVE_MINUTES_MS;
+
+        if (isMobile && shouldSendEmail) {
+          localStorage.setItem(MOBILE_SETUP_STORAGE_KEY, now.toString());
+
+          await post('/support/mobile-setup', {});
+        }
+      } catch (e) {
+        showErrorToast('Failed to send mobile setup email, please visit this page from Desktop.');
+      }
+    };
+
+    notifyMobileSetup();
+  }, []);
+
+  return (
+    <div className="flex min-h-[400px] flex-col items-center justify-center space-y-6 px-4 text-center">
+      <div className="rounded-full bg-gray-100 p-4 dark:bg-gray-800">
+        <Smartphone className="h-8 w-8 text-gray-500" />
+      </div>
+      <div className="space-y-3">
+        <h1 className="text-xl font-semibold">Desktop Setup Required</h1>
+        <div className="space-y-2">
+          <p className="text-sm font-medium text-gray-950">👋 Hey, You're Almost There!</p>
+          <p className="text-sm font-medium text-gray-950">
+            We see you signed up from your mobile—nice move! But to complete the Novu setup, you'll need to switch over
+            to your laptop and fire up your favorite IDE.
+          </p>
+          <p className="text-sm text-gray-500">
+            Integrating Novu into your stack means writing some actual code, setting up workflows, configuring Inbox ,
+            and composing your first email.
+          </p>
+          <p className="text-primary text-sm font-medium">
+            Check your inbox! We've sent you the setup instructions to get started.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/dashboard/src/pages/questionnaire-page.tsx

@@ -1,14 +1,20 @@
 import { PageMeta } from '@/components/page-meta';
 import { AuthCard } from '../components/auth/auth-card';
+import { MobileMessage } from '../components/auth/mobile-message';
 import { QuestionnaireForm } from '../components/auth/questionnaire-form';
 
 export function QuestionnairePage() {
   return (
     <>
       <PageMeta title="Setup your workspace" />
-      <AuthCard>
-        <QuestionnaireForm />
-      </AuthCard>
+      <div className="hidden md:block">
+        <AuthCard>
+          <QuestionnaireForm />
+        </AuthCard>
+      </div>
+      <div className="block md:hidden">
+        <MobileMessage />
+      </div>
     </>
   );
 }

apps/dashboard/src/pages/sign-in.tsx

@@ -24,11 +24,13 @@ export const SignInPage = () => {
   }, []);
 
   return (
-    <div className="flex max-w-[1100px] gap-36">
+    <div className="flex min-h-screen w-full flex-col md:max-w-[1100px] md:flex-row md:gap-36">
       <PageMeta title="Sign in" />
-      <AuthSideBanner />
-      <div className="flex flex-1 items-center justify-end">
-        <div className="flex flex-col items-start justify-start gap-4">
+      <div className="w-full md:w-auto">
+        <AuthSideBanner />
+      </div>
+      <div className="flex flex-1 justify-end px-4 py-8 md:items-center md:px-0 md:py-0">
+        <div className="flex w-full max-w-[400px] flex-col items-start justify-start gap-[18px]">
           <SignInForm path={ROUTES.SIGN_IN} signUpUrl={ROUTES.SIGN_UP} appearance={clerkSignupAppearance} />
           <RegionPicker />
         </div>

apps/dashboard/src/pages/sign-up.tsx

@@ -25,11 +25,13 @@ export const SignUpPage = () => {
   }, []);
 
   return (
-    <div className="flex max-w-[1100px] gap-36">
+    <div className="flex min-h-screen w-full flex-col md:max-w-[1100px] md:flex-row md:gap-36">
       <PageMeta title="Sign up" />
-      <AuthSideBanner />
-      <div className="flex flex-1 items-center justify-end">
-        <div className="flex flex-col items-start justify-start gap-[18px]">
+      <div className="w-full md:w-auto">
+        <AuthSideBanner />
+      </div>
+      <div className="flex flex-1 justify-end px-4 py-0 sm:py-0 md:items-center md:px-0">
+        <div className="flex w-full max-w-[400px] flex-col items-start justify-start gap-[18px]">
           <SignUpForm
             path={ROUTES.SIGN_UP}
             signInUrl={ROUTES.SIGN_IN}