diff --git a/packages/web/package.json b/packages/web/package.json index b262b52b..9e00cb49 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -118,6 +118,7 @@ "pretty-bytes": "^6.1.1", "psl": "^1.15.0", "react": "^18", + "react-device-detect": "^2.2.3", "react-dom": "^18", "react-hook-form": "^7.53.0", "react-hotkeys-hook": "^4.5.1", diff --git a/packages/web/src/actions.ts b/packages/web/src/actions.ts index 7bca2240..b0efce8c 100644 --- a/packages/web/src/actions.ts +++ b/packages/web/src/actions.ts @@ -15,7 +15,7 @@ import { GithubConnectionConfig, GitlabConnectionConfig, GiteaConnectionConfig, import { encrypt } from "@sourcebot/crypto" import { getConnection } from "./data/connection"; import { ConnectionSyncStatus, Prisma, OrgRole, RepoIndexingStatus, StripeSubscriptionStatus } from "@sourcebot/db"; -import { headers } from "next/headers" +import { cookies, headers } from "next/headers" import { getStripe } from "@/lib/stripe" import { getUser } from "@/data/user"; import { Session } from "next-auth"; @@ -26,6 +26,7 @@ import InviteUserEmail from "./emails/inviteUserEmail"; import { createTransport } from "nodemailer"; import { repositoryQuerySchema } from "./lib/schemas"; import { RepositoryQuery } from "./lib/types"; +import { MOBILE_UNSUPPORTED_SPLASH_SCREEN_DISMISSED_COOKIE_NAME } from "./lib/constants"; const ajv = new Ajv({ validateFormats: false, @@ -1231,6 +1232,10 @@ export const getOrgInvites = async (domain: string) => }) ); +export const dismissMobileUnsupportedSplashScreen = async () => { + await cookies().set(MOBILE_UNSUPPORTED_SPLASH_SCREEN_DISMISSED_COOKIE_NAME, 'true'); +} + ////// Helpers /////// diff --git a/packages/web/src/app/[domain]/components/mobileUnsupportedSplashScreen.tsx b/packages/web/src/app/[domain]/components/mobileUnsupportedSplashScreen.tsx new file mode 100644 index 00000000..0cd016e7 --- /dev/null +++ b/packages/web/src/app/[domain]/components/mobileUnsupportedSplashScreen.tsx @@ -0,0 +1,42 @@ +'use client'; + +import { Button } from "@/components/ui/button"; +import { Card } from "@/components/ui/card"; +import { TriangleAlert } from "lucide-react"; +import { useCallback, useEffect } from "react"; +import { dismissMobileUnsupportedSplashScreen } from "@/actions"; +import useCaptureEvent from "@/hooks/useCaptureEvent"; + +export const MobileUnsupportedSplashScreen = () => { + const captureEvent = useCaptureEvent(); + + useEffect(() => { + captureEvent('wa_mobile_unsupported_splash_screen_displayed', {}); + }, [captureEvent]); + + const onDismissed = useCallback(() => { + dismissMobileUnsupportedSplashScreen(); + captureEvent('wa_mobile_unsupported_splash_screen_dismissed', {}); + }, [captureEvent]); + + return ( +
+ Sourcebot on mobile is still a work in progress. Please use a desktop computer to get the best experience. +
+ +