diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index af2a0e89c4..9843672ccd 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -1144,6 +1144,8 @@ "make_setup_instructions": "<0>Go to <1><0>Make Invite Link and install the Cal.com app.<1>Log into your Make account and create a new Scenario.<2>Select Cal.com as your Trigger app. Also choose a Trigger event.<3>Choose your account and then enter your Unique API Key.<4>Test your Trigger.<5>You're set!", "install_zapier_app": "Please first install the Zapier App in the app store.", "install_make_app": "Please first install the Make App in the app store.", + "app_not_installed": "App not installed", + "visit_our_app_store": "Sorry, this app isn't installed on your account. Please visit our app store to explore and discover this and other great apps.", "connect_apple_server": "Connect to Apple Server", "calendar_url": "Calendar URL", "apple_server_generate_password": "Generate an app specific password to use with {{appName}} at", diff --git a/packages/app-store/_components/AppNotInstalledMessage.tsx b/packages/app-store/_components/AppNotInstalledMessage.tsx new file mode 100644 index 0000000000..050a92a493 --- /dev/null +++ b/packages/app-store/_components/AppNotInstalledMessage.tsx @@ -0,0 +1,29 @@ +import Link from "next/link"; + +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { Button, Icon } from "@calcom/ui"; + +export default function AppNotInstalledMessage({ appName }: { appName: string }) { + const { t } = useLocale(); + + return ( +
+
+
+ +
+

{t("app_not_installed")}

+

{t("visit_our_app_store")}

+ +
+ + + +
+
+
+ ); +} diff --git a/packages/app-store/alby/pages/setup/index.tsx b/packages/app-store/alby/pages/setup/index.tsx index 5b73c9caee..a39990ef59 100644 --- a/packages/app-store/alby/pages/setup/index.tsx +++ b/packages/app-store/alby/pages/setup/index.tsx @@ -4,6 +4,7 @@ import { useRouter } from "next/navigation"; import { useState, useCallback, useEffect } from "react"; import { Toaster } from "react-hot-toast"; +import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage"; import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc"; @@ -179,14 +180,7 @@ function AlbySetupPage(props: IAlbySetupProps) { ) : ( -
-
Alby
-
- - - -
-
+ )} diff --git a/packages/app-store/make/pages/setup/index.tsx b/packages/app-store/make/pages/setup/index.tsx index 1a8985fe48..39e691a993 100644 --- a/packages/app-store/make/pages/setup/index.tsx +++ b/packages/app-store/make/pages/setup/index.tsx @@ -4,6 +4,7 @@ import Link from "next/link"; import { useState } from "react"; import { Toaster } from "react-hot-toast"; +import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button, Icon, showToast, Tooltip } from "@calcom/ui"; @@ -133,14 +134,7 @@ export default function MakeSetup({ inviteLink }: InferGetServerSidePropsType ) : ( -
-
{t("install_make_app")}
-
- - - -
-
+ )} diff --git a/packages/app-store/paypal/pages/setup/index.tsx b/packages/app-store/paypal/pages/setup/index.tsx index 5fcbd4f02a..3b78f64961 100644 --- a/packages/app-store/paypal/pages/setup/index.tsx +++ b/packages/app-store/paypal/pages/setup/index.tsx @@ -1,8 +1,8 @@ -import Link from "next/link"; import { useRouter } from "next/navigation"; import { useState } from "react"; import { Toaster } from "react-hot-toast"; +import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc"; import { Button, showToast, TextField } from "@calcom/ui"; @@ -154,14 +154,7 @@ export default function PayPalSetup() { ) : ( -
-
Paypal
-
- - - -
-
+ )} diff --git a/packages/app-store/zapier/pages/setup/index.tsx b/packages/app-store/zapier/pages/setup/index.tsx index 805a961f8c..550e812c88 100644 --- a/packages/app-store/zapier/pages/setup/index.tsx +++ b/packages/app-store/zapier/pages/setup/index.tsx @@ -3,6 +3,7 @@ import Link from "next/link"; import { useState } from "react"; import { Toaster } from "react-hot-toast"; +import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button, Icon, showToast, Tooltip } from "@calcom/ui"; @@ -135,14 +136,7 @@ export default function ZapierSetup(props: IZapierSetupProps) { ) : ( -
-
{t("install_zapier_app")}
-
- - - -
-
+ )}