fix: Better UI for the setup page, When trying to reach an app that hasn't been already installed under an account (#16121)

* Better UI for the setup page

* Added comment

* Delete packages/prisma/.env

* fixed env file

* Delete yarn.lock

* some changes

* revert yarn.lock

* revert translation and update

* final update

* some improvement

* fix: breaking on small screen, design refactor

---------

Co-authored-by: unknown <adhabal2002@gmail.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: Amit Sharma <74371312+Amit91848@users.noreply.github.com>

apps/web/public/static/locales/en/common.json

@@ -1144,6 +1144,8 @@
   "make_setup_instructions": "<0>Go to <1><0>Make Invite Link</0></1> and install the Cal.com app.</0><1>Log into your Make account and create a new Scenario.</1><2>Select Cal.com as your Trigger app. Also choose a Trigger event.</2><3>Choose your account and then enter your Unique API Key.</3><4>Test your Trigger.</4><5>You're set!</5>",
   "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",

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 (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="bg-default flex max-w-lg flex-col items-center rounded-xl border px-8 py-14 text-center shadow-md">
+        <div className="mb-5 rounded-full bg-gray-100 p-3  dark:bg-[#292929] ">
+          <Icon name="circle-alert" className="h-9 w-9 p-0.5" strokeWidth={1.5} />
+        </div>
+        <h3 className="font-cal mb-2 text-2xl font-semibold">{t("app_not_installed")}</h3>
+        <p className="text-subtle px-1 leading-normal">{t("visit_our_app_store")}</p>
+
+        <div className="mt-5">
+          <Link href={`/apps/${appName}`} passHref={true} legacyBehavior>
+            <Button type="button" color="secondary">
+              {t("go_to_app_store")}
+              <Icon name="arrow-up-right" className="ml-1" size={20} />
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

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) {
           </div>
         </div>
       ) : (
-        <div className="ml-5 mt-5">
-          <div>Alby</div>
-          <div className="mt-3">
-            <Link href="/apps/alby" passHref={true} legacyBehavior>
-              <Button>{t("go_to_app_store")}</Button>
-            </Link>
-          </div>
-        </div>
+        <AppNotInstalledMessage appName="alby" />
       )}
       <Toaster position="bottom-right" />
     </div>

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<ty
           </div>
         </div>
       ) : (
-        <div className="ml-5 mt-5">
-          <div>{t("install_make_app")}</div>
-          <div className="mt-3">
-            <Link href="/apps/make" passHref={true} legacyBehavior>
-              <Button>{t("go_to_app_store")}</Button>
-            </Link>
-          </div>
-        </div>
+        <AppNotInstalledMessage appName="make" />
       )}
       <Toaster position="bottom-right" />
     </div>

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() {
           </div>
         </div>
       ) : (
-        <div className="ml-5 mt-5">
-          <div>Paypal</div>
-          <div className="mt-3">
-            <Link href="/apps/paypal" passHref={true} legacyBehavior>
-              <Button>{t("go_to_app_store")}</Button>
-            </Link>
-          </div>
-        </div>
+        <AppNotInstalledMessage appName="paypal" />
       )}
       <Toaster position="bottom-right" />
     </div>

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) {
           </div>
         </div>
       ) : (
-        <div className="ml-5 mt-5">
-          <div>{t("install_zapier_app")}</div>
-          <div className="mt-3">
-            <Link href="/apps/zapier" passHref={true} legacyBehavior>
-              <Button>{t("go_to_app_store")}</Button>
-            </Link>
-          </div>
-        </div>
+        <AppNotInstalledMessage appName="zapier" />
       )}
       <Toaster position="bottom-right" />
     </div>