feat: skip onboarding and fix UI for redirect apps (calcom#23115)

* skip onboarding and fix UI for redirect apps

* fix

---------

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

Author: keerthikumanduri

apps/web/components/apps/AppPage.tsx

@@ -3,6 +3,7 @@ import { useRouter } from "next/navigation";
 import type { IframeHTMLAttributes } from "react";
 import React, { useEffect, useState } from "react";
 
+import { isRedirectApp } from "@calcom/app-store/_utils/redirectApps";
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { AppDependencyComponent, InstallAppButton } from "@calcom/app-store/components";
 import { doesAppSupportTeamInstall, isConferencing } from "@calcom/app-store/utils";
@@ -112,6 +113,11 @@ export const AppPage = ({
   });
 
   const handleAppInstall = () => {
+    if (isRedirectApp(slug)) {
+      setIsLoading(true);
+      mutation.mutate({ type, variant, slug });
+      return;
+    }
     setIsLoading(true);
     if (isConferencing(categories) && !concurrentMeetings) {
       mutation.mutate({
@@ -185,6 +191,19 @@ export const AppPage = ({
   }, []);
 
   const installOrDisconnectAppButton = () => {
+    if (isRedirectApp(slug)) {
+      return (
+        <Button
+          onClick={() => handleAppInstall()}
+          className="mt-2"
+          StartIcon="external-link"
+          loading={isLoading}
+          disabled={isLoading}>
+          {t("visit")}
+        </Button>
+      );
+    }
+
     if (appDbQuery.isPending) {
       return <SkeletonButton className="h-10 w-24" />;
     }

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

@@ -3573,6 +3573,7 @@
   "webhook_metadata": "Metadata",
   "stats": "Stats",
   "booking_status": "Booking status",
+  "visit": "Visit",
   "location_custom_label_input_label": "Custom label on booking page",
   "meeting_link": "Meeting link",
   "my_bookings": "My Bookings",

packages/app-store/_utils/redirectApps.ts

@@ -0,0 +1,24 @@
+export const REDIRECT_APPS = [
+  "amie",
+  "autocheckin",
+  "bolna",
+  "chatbase",
+  "clic",
+  "deel",
+  "elevenlabs",
+  "granola",
+  "greetmate-ai",
+  "lindy",
+  "linear",
+  "millis-ai",
+  "monobot",
+  "retell-ai",
+  "synthflow",
+  "telli",
+  "vimcal",
+  "wordpress",
+];
+
+export const isRedirectApp = (slug: string): boolean => {
+  return REDIRECT_APPS.includes(slug);
+};

packages/features/apps/components/AppCard.tsx

@@ -3,6 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
+import { isRedirectApp } from "@calcom/app-store/_utils/redirectApps";
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton } from "@calcom/app-store/components";
 import { doesAppSupportTeamInstall, isConferencing } from "@calcom/app-store/utils";
@@ -56,6 +57,10 @@ export function AppCard({ app, credentials, searchText, userAdminTeams }: AppCar
   }, [app.name, searchText]);
 
   const handleAppInstall = () => {
+    if (isRedirectApp(app.slug)) {
+      mutation.mutate({ type: app.type, variant: app.variant, slug: app.slug });
+      return;
+    }
     if (isConferencing(app.categories) && !app.concurrentMeetings) {
       mutation.mutate({
         type: app.type,
@@ -148,7 +153,9 @@ export function AppCard({ app, credentials, searchText, userAdminTeams }: AppCar
                       loading: mutation.isPending,
                     };
                   }
-                  return <InstallAppButtonChild paid={app.paid} {...props} />;
+                  return (
+                    <InstallAppButtonChild paid={app.paid} isRedirect={isRedirectApp(app.slug)} {...props} />
+                  );
                 }}
               />
             )
@@ -170,7 +177,9 @@ export function AppCard({ app, credentials, searchText, userAdminTeams }: AppCar
                       loading: mutation.isPending,
                     };
                   }
-                  return <InstallAppButtonChild paid={app.paid} {...props} />;
+                  return (
+                    <InstallAppButtonChild paid={app.paid} isRedirect={isRedirectApp(app.slug)} {...props} />
+                  );
                 }}
               />
             )}
@@ -192,11 +201,25 @@ export function AppCard({ app, credentials, searchText, userAdminTeams }: AppCar
 
 const InstallAppButtonChild = ({
   paid,
+  isRedirect = false,
   ...props
 }: {
   paid: App["paid"];
+  isRedirect?: boolean;
 } & ButtonProps) => {
   const { t } = useLocale();
+  if (isRedirect) {
+    return (
+      <Button
+        color="secondary"
+        className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
+        StartIcon="external-link"
+        {...props}
+        size="base">
+        {t("visit")}
+      </Button>
+    );
+  }
   // Paid apps don't support team installs at the moment
   // Also, cal.ai(the only paid app at the moment) doesn't support team install either
   if (paid) {