feat: events apps new install flow (#14616)

* feat(appStore): add isOAuth config * refactor(appStore): EventTypeAppSettngsInterface * refactor(qr_code): split EventTypeAppCardInterface and EventTypeAppSettingsInterface * feat(appStore): redirect to onboarding for stripe and basecam * fix(ui/ScrollableArea): overflow indicator not working * feat(apps): new install app flow * fix(configureStep): get disabled props for settings * fix: getAppInstallsBySlug now use teamIds * chore: Alby to AppSettingsInterface * chore: Giphy to appsettings interface * chore: GTM migration * chore: GT4 - migration * chore: fathom migration * chore: paypal * feat: basecamp migration * feat: metapixel migration * feat:plausable * feat:stripe * fix merge issues * fix merge issues in new app install flow steps * wip: callback to onboarding * fix: imports * fix: more imports * feat: use redirect to onboarding on install flow * fix: redirect to event-type after oauth flow * When clicking on install new app button, only redirect to the new app install flow if it is an oAuth app or an app that extends the EventType feature in it's config * code refactor, skip event-type step * removed extra consoles * so that no one can change the eventTypeId in url * theme support enabled * only pass eventTypeId instead of whole evetType obj to OmniInstallAppButton * fix: clicking on event-type gives error and redirects to /apps * saved appOnboardingRedirectUrl to OAuth State * fix: a user having no team breaks the onboarding flow * add optional chaining to appMetadata.extendsFeature and appMetadata.isOAuth; * encode appOnboardingRedirectUrl * fix: dark theme ui issues * skip configure step if no-event types if user/team does not have event-type then skip configure step and goto apps/installed/[category] * exclude calendars from apps- onboarding flow * Update getAppOnboardingRedirectUrl.ts * fix: On configure step, inputs aren't showing errors * change route from `apps/onboarding` to `apps/installation` * fix: flow not correctly working for teams * should only allow team ADMIN or OWER to install an app to team * Prevent two payment apps to be enabled * removed loading state * Fix type error * undo new-app-flow from OmniInstallAppButton * remove OAuth Step, handle step numbering * fix: redirect url * getAppOnboardingRedirectUrl refactor * for debugging * Revert "for debugging" This reverts commit b9362c1. * fix: added toaster * feat: added support to select multiple events (almost) * hide button * Move inner form outside outer form using portal Due to limitations with nested forms in React Hook Form, moved the inner form outside the outer form using a portal to ensure proper form handling. * submit buttons refs madness * removed configure step we had to use query params to manage selected event-types, between routes which was causing 2 issues: * each time we selected or unselected an event the whole page was reloaded including getserversideprops being called again and again * the form was reloaded causing more issues * removed extra unwanted code * small fix * fix: type error * fix: types * implemented suggested changes * removed step footer * fixed error.message * removed commented styles * removed step footer * fix: Display team event types instead of user's on event types step when team selected * fix: typo * removed shouldLockDisableProps * refactor setUpdatedEventTypesStatus, fix type * removed extra code * can't delete while saving * added translations * fix: loading in select account step, fix handle onSelect params type * Fix typo * feat: add skip button to event-types step * use set-up-later button in tests * added skip button to configure step as well * feat: add test for analytics apps using the new app install flow * feat: add test for stripe 1 * feat: add test for stripe 2 * Fix: Redirect only those apps that extend 'EventType' to the new app install flow (#14527) * fix: type errors * fix: failing tests * fix: tests * fix test flakiness * better naming and code refactor for analytics apps tests * run tests parallelly * removed network idle, giving error * another shot at test flakiness * Fix: can't install apps without team selector dropdown on main app store page. * fix: test flakiness * fix: account select loading issue * removed getPaymentCredential (unused) * fix: only redirect after the app has been added to all the event-types * remove overflowIndicatorStyles * fixed failing test * fix: exclude org team events * undo some random merge changes --------- Co-authored-by: Morgan Vernay <[email protected]> Co-authored-by: sean-brydon <[email protected]> Co-authored-by: Keith Williams <[email protected]> Co-authored-by: Joe Au-Yeung <[email protected]> Co-authored-by: Joe Au-Yeung <[email protected]> Co-authored-by: Omar López <[email protected]>
calcom · May 23, 2024 · 175df9a · 175df9a
1 parent b1bbbce
commit 175df9a
Show file tree

Hide file tree

Showing 125 changed files with 2,558 additions and 690 deletions.
diff --git a/apps/web/components/apps/AppPage.tsx b/apps/web/components/apps/AppPage.tsx
@@ -21,6 +21,7 @@ export type AppPageProps = {
   isGlobal?: AppType["isGlobal"];
   logo: string;
   slug: string;
+  dirName: string | undefined;
   variant: string;
   body: React.ReactNode;
   categories: string[];
@@ -68,6 +69,7 @@ export const AppPage = ({
   dependencies,
   concurrentMeetings,
   paid,
+  dirName,
 }: AppPageProps) => {
   const { t, i18n } = useLocale();
   const hasDescriptionItems = descriptionItems && descriptionItems.length > 0;
@@ -223,6 +225,7 @@ export const AppPage = ({
                         multiInstall
                         concurrentMeetings={concurrentMeetings}
                         paid={paid}
+                        dirName={dirName}
                         {...props}
                       />
                     );
@@ -262,6 +265,7 @@ export const AppPage = ({
                     credentials={appDbQuery.data?.credentials}
                     concurrentMeetings={concurrentMeetings}
                     paid={paid}
+                    dirName={dirName}
                     {...props}
                   />
                 );

diff --git a/apps/web/components/apps/InstallAppButtonChild.tsx b/apps/web/components/apps/InstallAppButtonChild.tsx
@@ -1,7 +1,14 @@
+import { useRouter } from "next/navigation";
+import { useMemo } from "react";
+
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
+import { appStoreMetadata } from "@calcom/app-store/appStoreMetaData";
 import { doesAppSupportTeamInstall } from "@calcom/app-store/utils";
 import { Spinner } from "@calcom/features/calendars/weeklyview/components/spinner/Spinner";
 import type { UserAdminTeams } from "@calcom/features/ee/teams/lib/getUserAdminTeams";
+import { AppOnboardingSteps } from "@calcom/lib/apps/appOnboardingSteps";
+import { getAppOnboardingUrl } from "@calcom/lib/apps/getAppOnboardingUrl";
+import { shouldRedirectToAppOnboarding } from "@calcom/lib/apps/shouldRedirectToAppOnboarding";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
@@ -26,7 +33,9 @@ export const InstallAppButtonChild = ({
   multiInstall,
   credentials,
   concurrentMeetings,
+  dirName,
   paid,
+  onClick,
   ...props
 }: {
   userAdminTeams?: UserAdminTeams;
@@ -36,8 +45,10 @@ export const InstallAppButtonChild = ({
   credentials?: RouterOutputs["viewer"]["appCredentialsByType"]["credentials"];
   concurrentMeetings?: boolean;
   paid?: AppFrontendPayload["paid"];
+  dirName: string | undefined;
 } & ButtonProps) => {
   const { t } = useLocale();
+  const router = useRouter();
 
   const mutation = useAddAppMutation(null, {
     onSuccess: (data) => {
@@ -49,13 +60,26 @@ export const InstallAppButtonChild = ({
     },
   });
   const shouldDisableInstallation = !multiInstall ? !!(credentials && credentials.length) : false;
+  const appMetadata = appStoreMetadata[dirName as keyof typeof appStoreMetadata];
+  const redirectToAppOnboarding = useMemo(() => shouldRedirectToAppOnboarding(appMetadata), [appMetadata]);
+
+  const _onClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    if (redirectToAppOnboarding) {
+      router.push(
+        getAppOnboardingUrl({ slug: addAppMutationInput.slug, step: AppOnboardingSteps.ACCOUNTS_STEP })
+      );
+    } else if (onClick) {
+      onClick(e);
+    }
+  };
 
   // 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) {
     return (
       <Button
         data-testid="install-app-button"
+        onClick={_onClick}
         {...props}
         disabled={shouldDisableInstallation}
         color="primary"
@@ -72,6 +96,7 @@ export const InstallAppButtonChild = ({
     return (
       <Button
         data-testid="install-app-button"
+        onClick={_onClick}
         {...props}
         // @TODO: Overriding color and size prevent us from
         // having to duplicate InstallAppButton for now.
@@ -83,6 +108,19 @@ export const InstallAppButtonChild = ({
     );
   }
 
+  if (redirectToAppOnboarding) {
+    return (
+      <Button
+        data-testid="install-app-button"
+        disabled={shouldDisableInstallation}
+        onClick={_onClick}
+        color="primary"
+        size="base"
+        {...props}>
+        {multiInstall ? t("install_another") : t("install_app")}
+      </Button>
+    );
+  }
   return (
     <Dropdown>
       <DropdownMenuTrigger asChild>

diff --git a/apps/web/components/apps/installation/AccountsStepCard.tsx b/apps/web/components/apps/installation/AccountsStepCard.tsx
@@ -0,0 +1,97 @@
+import type { FC } from "react";
+import React, { useState } from "react";
+
+import { classNames } from "@calcom/lib";
+import { CAL_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { Team, User } from "@calcom/prisma/client";
+import { Avatar, StepCard } from "@calcom/ui";
+
+type AccountSelectorProps = {
+  avatar?: string;
+  name: string;
+  alreadyInstalled: boolean;
+  onClick: () => void;
+  loading: boolean;
+  testId: string;
+};
+
+const AccountSelector: FC<AccountSelectorProps> = ({
+  avatar,
+  alreadyInstalled,
+  name,
+  onClick,
+  loading,
+  testId,
+}) => {
+  const { t } = useLocale();
+  const [selected, setSelected] = useState(false);
+  return (
+    <div
+      className={classNames(
+        "hover:bg-muted flex cursor-pointer flex-row items-center gap-2 p-1",
+        (alreadyInstalled || loading) && "cursor-not-allowed",
+        selected && "bg-muted animate-pulse"
+      )}
+      data-testid={testId}
+      onClick={() => {
+        if (!alreadyInstalled && !loading) {
+          setSelected(true);
+          onClick();
+        }
+      }}>
+      <Avatar
+        alt={avatar || ""}
+        imageSrc={avatar || `${CAL_URL}/${avatar}`} // if no image, use default avatar
+        size="sm"
+      />
+      <div className="text-md pt-0.5 font-medium text-gray-500">
+        {name}
+        {alreadyInstalled ? <span className="ml-1 text-sm text-gray-400">{t("already_installed")}</span> : ""}
+      </div>
+    </div>
+  );
+};
+
+export type PersonalAccountProps = Pick<User, "id" | "avatar" | "name"> & { alreadyInstalled: boolean };
+
+export type TeamsProp = (Pick<Team, "id" | "name" | "logo"> & {
+  alreadyInstalled: boolean;
+})[];
+
+type AccountStepCardProps = {
+  teams: TeamsProp;
+  personalAccount: PersonalAccountProps;
+  onSelect: (id?: number) => void;
+  loading: boolean;
+};
+
+export const AccountsStepCard: FC<AccountStepCardProps> = ({ teams, personalAccount, onSelect, loading }) => {
+  const { t } = useLocale();
+  return (
+    <StepCard>
+      <div className="text-sm font-medium text-gray-400">{t("install_app_on")}</div>
+      <div className={classNames("mt-2 flex flex-col gap-2 ")}>
+        <AccountSelector
+          testId="install-app-button-personal"
+          avatar={personalAccount.avatar ?? ""}
+          name={personalAccount.name ?? ""}
+          alreadyInstalled={personalAccount.alreadyInstalled}
+          onClick={() => onSelect()}
+          loading={loading}
+        />
+        {teams.map((team) => (
+          <AccountSelector
+            key={team.id}
+            testId={`install-app-button-team${team.id}`}
+            alreadyInstalled={team.alreadyInstalled}
+            avatar={team.logo ?? ""}
+            name={team.name}
+            onClick={() => onSelect(team.id)}
+            loading={loading}
+          />
+        ))}
+      </div>
+    </StepCard>
+  );
+};