chore: mobile banner for inconsistency and auto redirect in wrong route (#704)01-24-chore_mobile_banner_for_inconsistency_and_auto_redirect_in_wrong_route

2 files changed, 78 insertions, 0 deletions

diff --git a/apps/web/components/onboarding/new-onboarding-modal.tsx b/apps/web/components/onboarding/new-onboarding-modal.tsx
new file mode 100644
index 00000000..5dc545c1
--- /dev/null
+++ b/apps/web/components/onboarding/new-onboarding-modal.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useFeatureFlagEnabled } from "posthog-js/react"
+import { useRouter } from "next/navigation"
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+	DialogFooter,
+} from "@ui/components/dialog"
+import { Button } from "@ui/components/button"
+import { useIsMobile } from "@hooks/use-mobile"
+
+export function NewOnboardingModal() {
+	const router = useRouter()
+	const flagEnabled = useFeatureFlagEnabled("nova-alpha-access")
+	const isMobile = useIsMobile()
+	const [open, setOpen] = useState(false)
+
+	useEffect(() => {
+		if (flagEnabled) {
+			setOpen(true)
+		}
+	}, [flagEnabled])
+
+	const handleContinue = () => {
+		setOpen(false)
+		router.push("/new/onboarding")
+	}
+
+	if (!flagEnabled) {
+		return null
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={(isOpen) => {
+			if (!isOpen) {
+				setOpen(false)
+			}
+		}}>
+			<DialogContent onInteractOutside={(e) => e.preventDefault()}>
+				<DialogHeader>
+					<DialogTitle>Experience the new onboarding</DialogTitle>
+					<DialogDescription>
+						We've redesigned the onboarding experience. Would you like to try
+						it?
+						{isMobile && (
+							<span className="block mt-2 text-yellow-600 dark:text-yellow-500">
+								Desktop view is recommended for the best experience.
+							</span>
+						)}
+					</DialogDescription>
+				</DialogHeader>
+				<DialogFooter>
+					<Button variant="outline" onClick={() => setOpen(false)}>
+						Stay here
+					</Button>
+					<Button onClick={handleContinue}>Continue to new onboarding</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	)
+}
diff --git a/apps/web/components/onboarding/onboarding-wrapper.tsx b/apps/web/components/onboarding/onboarding-wrapper.tsx
new file mode 100644
index 00000000..ee1fcabb
--- /dev/null
+++ b/apps/web/components/onboarding/onboarding-wrapper.tsx
@@ -0,0 +1,12 @@
+"use client"
+
+import { NewOnboardingModal } from "./new-onboarding-modal"
+
+export function OnboardingWrapper({ children }: { children: React.ReactNode }) {
+	return (
+		<>
+			<NewOnboardingModal />
+			{children}
+		</>
+	)
+}