diff --git a/apps/web/components/apps/AppPage.tsx b/apps/web/components/apps/AppPage.tsx index e297e7d4ba..20f136ab42 100644 --- a/apps/web/components/apps/AppPage.tsx +++ b/apps/web/components/apps/AppPage.tsx @@ -3,9 +3,10 @@ import { useRouter } from "next/navigation"; import type { IframeHTMLAttributes } from "react"; import React, { useEffect, useState } from "react"; +import { AppDependencyComponent } from "@calcom/app-store/AppDependencyComponent"; +import { InstallAppButton } from "@calcom/app-store/InstallAppButton"; 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"; import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration"; import { AppOnboardingSteps } from "@calcom/lib/apps/appOnboardingSteps"; diff --git a/apps/web/components/apps/CalendarListContainer.tsx b/apps/web/components/apps/CalendarListContainer.tsx index 1f7aa64eea..a40edcf2ed 100644 --- a/apps/web/components/apps/CalendarListContainer.tsx +++ b/apps/web/components/apps/CalendarListContainer.tsx @@ -2,7 +2,7 @@ import { useEffect, Suspense } from "react"; -import { InstallAppButton } from "@calcom/app-store/components"; +import { InstallAppButton } from "@calcom/app-store/InstallAppButton"; import { DestinationCalendarSettingsWebWrapper } from "@calcom/atoms/destination-calendar/wrappers/DestinationCalendarSettingsWebWrapper"; import { SelectedCalendarsSettingsWebWrapper } from "@calcom/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsWebWrapper"; import AppListCard from "@calcom/features/apps/components/AppListCard"; diff --git a/apps/web/components/getting-started/components/AppConnectionItem.tsx b/apps/web/components/getting-started/components/AppConnectionItem.tsx index d283ba05c7..9f3a284660 100644 --- a/apps/web/components/getting-started/components/AppConnectionItem.tsx +++ b/apps/web/components/getting-started/components/AppConnectionItem.tsx @@ -1,8 +1,8 @@ import Link from "next/link"; import { useState } from "react"; +import { InstallAppButtonWithoutPlanCheck } from "@calcom/app-store/InstallAppButtonWithoutPlanCheck"; import type { TDependencyData } from "@calcom/app-store/_appRegistry"; -import { InstallAppButtonWithoutPlanCheck } from "@calcom/app-store/components"; import { WEBAPP_URL } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; diff --git a/packages/app-store/components.tsx b/packages/app-store/AppDependencyComponent.tsx similarity index 63% rename from packages/app-store/components.tsx rename to packages/app-store/AppDependencyComponent.tsx index 53397a6d26..e69836d996 100644 --- a/packages/app-store/components.tsx +++ b/packages/app-store/AppDependencyComponent.tsx @@ -2,68 +2,12 @@ import Link from "next/link"; -import type { UseAddAppMutationOptions } from "@calcom/app-store/_utils/useAddAppMutation"; -import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation"; import { WEBAPP_URL } from "@calcom/lib/constants"; -import { deriveAppDictKeyFromType } from "@calcom/lib/deriveAppDictKeyFromType"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { RouterOutputs } from "@calcom/trpc/react"; -import type { App } from "@calcom/types/App"; import classNames from "@calcom/ui/classNames"; import { Icon } from "@calcom/ui/components/icon"; -import { InstallAppButtonMap } from "./apps.browser.generated"; -import type { InstallAppButtonProps } from "./types"; - -export const InstallAppButtonWithoutPlanCheck = ( - props: { - type: App["type"]; - options?: UseAddAppMutationOptions; - } & InstallAppButtonProps -) => { - const mutation = useAddAppMutation(null, props.options); - const key = deriveAppDictKeyFromType(props.type, InstallAppButtonMap); - const InstallAppButtonComponent = InstallAppButtonMap[key as keyof typeof InstallAppButtonMap]; - if (!InstallAppButtonComponent) - return ( - <> - {props.render({ - useDefaultComponent: true, - disabled: props.disableInstall, - onClick: () => { - mutation.mutate({ type: props.type }); - }, - loading: mutation.data?.setupPending, - })} - - ); - - return ( - - ); -}; - -export const InstallAppButton = ( - props: { - teamsPlanRequired?: App["teamsPlanRequired"]; - type: App["type"]; - wrapperClassName?: string; - disableInstall?: boolean; - } & InstallAppButtonProps -) => { - return ( -
- -
- ); -}; - -export { AppConfiguration } from "./_components/AppConfiguration"; - export const AppDependencyComponent = ({ appName, dependencyData, diff --git a/packages/app-store/InstallAppButton.tsx b/packages/app-store/InstallAppButton.tsx new file mode 100644 index 0000000000..d2eb039c7d --- /dev/null +++ b/packages/app-store/InstallAppButton.tsx @@ -0,0 +1,21 @@ +"use client"; + +import type { App } from "@calcom/types/App"; + +import { InstallAppButtonWithoutPlanCheck } from "./InstallAppButtonWithoutPlanCheck"; +import type { InstallAppButtonProps } from "./types"; + +export const InstallAppButton = ( + props: { + teamsPlanRequired?: App["teamsPlanRequired"]; + type: App["type"]; + wrapperClassName?: string; + disableInstall?: boolean; + } & InstallAppButtonProps +) => { + return ( +
+ +
+ ); +}; diff --git a/packages/app-store/InstallAppButtonWithoutPlanCheck.tsx b/packages/app-store/InstallAppButtonWithoutPlanCheck.tsx new file mode 100644 index 0000000000..44b805b707 --- /dev/null +++ b/packages/app-store/InstallAppButtonWithoutPlanCheck.tsx @@ -0,0 +1,41 @@ +"use client"; + +import type { UseAddAppMutationOptions } from "@calcom/app-store/_utils/useAddAppMutation"; +import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation"; +import { deriveAppDictKeyFromType } from "@calcom/lib/deriveAppDictKeyFromType"; +import type { App } from "@calcom/types/App"; + +import { InstallAppButtonMap } from "./apps.browser.generated"; +import type { InstallAppButtonProps } from "./types"; + +export const InstallAppButtonWithoutPlanCheck = ( + props: { + type: App["type"]; + options?: UseAddAppMutationOptions; + } & InstallAppButtonProps +) => { + const mutation = useAddAppMutation(null, props.options); + const key = deriveAppDictKeyFromType(props.type, InstallAppButtonMap); + const InstallAppButtonComponent = InstallAppButtonMap[key as keyof typeof InstallAppButtonMap]; + if (!InstallAppButtonComponent) + return ( + <> + {props.render({ + useDefaultComponent: true, + disabled: props.disableInstall, + onClick: () => { + mutation.mutate({ type: props.type }); + }, + loading: mutation.data?.setupPending, + })} + + ); + + return ( + + ); +}; diff --git a/packages/app-store/_components/AppConfiguration.tsx b/packages/app-store/_components/AppConfiguration.tsx deleted file mode 100644 index e7e909b2b9..0000000000 --- a/packages/app-store/_components/AppConfiguration.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import dynamic from "next/dynamic"; - -export const ConfigAppMap = { - vital: dynamic(() => import("../vital/components/AppConfiguration")), -}; - -export const AppConfiguration = (props: { type: string } & { credentialIds: number[] }) => { - let appName = props.type.replace(/_/g, ""); - let ConfigAppComponent = ConfigAppMap[appName as keyof typeof ConfigAppMap]; - /** So we can either call it by simple name (ex. `slack`, `giphy`) instead of - * `slackmessaging`, `giphyother` while maintaining retro-compatibility. */ - if (!ConfigAppComponent) { - [appName] = props.type.split("_"); - ConfigAppComponent = ConfigAppMap[appName as keyof typeof ConfigAppMap]; - } - if (!ConfigAppComponent) return null; - - return ; -}; diff --git a/packages/app-store/_components/OmniInstallAppButton.tsx b/packages/app-store/_components/OmniInstallAppButton.tsx index e05c045ee5..7105d42d46 100644 --- a/packages/app-store/_components/OmniInstallAppButton.tsx +++ b/packages/app-store/_components/OmniInstallAppButton.tsx @@ -1,12 +1,12 @@ import useApp from "@calcom/lib/hooks/useApp"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; -import { showToast } from "@calcom/ui/components/toast"; -import { Button } from "@calcom/ui/components/button"; import classNames from "@calcom/ui/classNames"; +import { Button } from "@calcom/ui/components/button"; +import { showToast } from "@calcom/ui/components/toast"; +import { InstallAppButton } from "../InstallAppButton"; import useAddAppMutation from "../_utils/useAddAppMutation"; -import { InstallAppButton } from "../components"; /** * Use this component to allow installing an app from anywhere on the app. diff --git a/packages/features/apps/components/AppCard.tsx b/packages/features/apps/components/AppCard.tsx index 5aa05b7e23..4eb8973bf2 100644 --- a/packages/features/apps/components/AppCard.tsx +++ b/packages/features/apps/components/AppCard.tsx @@ -3,9 +3,9 @@ import { useRouter } from "next/navigation"; import { useEffect, useState } from "react"; +import { InstallAppButton } from "@calcom/app-store/InstallAppButton"; 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"; import { AppOnboardingSteps } from "@calcom/lib/apps/appOnboardingSteps"; import { getAppOnboardingUrl } from "@calcom/lib/apps/getAppOnboardingUrl"; diff --git a/packages/features/apps/components/AppList.tsx b/packages/features/apps/components/AppList.tsx index 8b556ce75f..7bb4ef197f 100644 --- a/packages/features/apps/components/AppList.tsx +++ b/packages/features/apps/components/AppList.tsx @@ -1,7 +1,7 @@ import { useCallback, useState } from "react"; +import { InstallAppButton } from "@calcom/app-store/InstallAppButton"; import { AppSettings } from "@calcom/app-store/_components/AppSettings"; -import { InstallAppButton } from "@calcom/app-store/components"; import { getLocationFromApp, type EventLocationType } from "@calcom/app-store/locations"; import type { CredentialOwner } from "@calcom/app-store/types"; import AppListCard from "@calcom/features/apps/components/AppListCard"; diff --git a/packages/features/calendars/AdditionalCalendarSelector.tsx b/packages/features/calendars/AdditionalCalendarSelector.tsx index 5a74997047..5f72e4202f 100644 --- a/packages/features/calendars/AdditionalCalendarSelector.tsx +++ b/packages/features/calendars/AdditionalCalendarSelector.tsx @@ -1,6 +1,6 @@ import type { FunctionComponent, SVGProps } from "react"; -import { InstallAppButton } from "@calcom/app-store/components"; +import { InstallAppButton } from "@calcom/app-store/InstallAppButton"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button } from "@calcom/ui/components/button";