diff --git a/apps/web/components/apps/AllApps.tsx b/apps/web/components/apps/AllApps.tsx index a1c9231e8b..cfbcca4ec7 100644 --- a/apps/web/components/apps/AllApps.tsx +++ b/apps/web/components/apps/AllApps.tsx @@ -11,16 +11,7 @@ export default function AllApps({ apps }: { apps: App[] }) {

{t("all_apps")}

{apps.map((app) => ( - + ))}
diff --git a/apps/web/components/apps/AppCard.tsx b/apps/web/components/apps/AppCard.tsx index dc1fdc0c49..94a45d492d 100644 --- a/apps/web/components/apps/AppCard.tsx +++ b/apps/web/components/apps/AppCard.tsx @@ -1,31 +1,25 @@ import Link from "next/link"; import { trpc } from "@calcom/trpc/react"; +import { App } from "@calcom/types/App"; import Badge from "@calcom/ui/Badge"; import Button from "@calcom/ui/Button"; interface AppCardProps { - logo: string; - name: string; - slug?: string; - category?: string; - description: string; - rating: number; - reviews?: number; - isProOnly?: boolean; + app: App; } export default function AppCard(props: AppCardProps) { const { data: user } = trpc.useQuery(["viewer.me"]); return ( - + + data-testid={`app-store-app-card-${props.app.slug}`}>
{ // eslint-disable-next-line @next/next/no-img-element - {props.name + {props.app.name }
-

{props.name}

- {props.isProOnly && user?.plan === "FREE" ? ( +

{props.app.name}

+ {props.app.isProOnly && user?.plan === "FREE" ? ( PRO @@ -48,7 +42,7 @@ export default function AppCard(props: AppCardProps) { {props.rating} stars {props.reviews} reviews
*/} -

{props.description}

+

{props.app.description}

 ); diff --git a/apps/web/components/apps/TrendingAppsSlider.tsx b/apps/web/components/apps/TrendingAppsSlider.tsx index 943e603628..10ec4c0929 100644 --- a/apps/web/components/apps/TrendingAppsSlider.tsx +++ b/apps/web/components/apps/TrendingAppsSlider.tsx @@ -21,20 +21,10 @@ const TrendingAppsSlider = ({ items }: { items: T[] }) => { }, }, }} - renderItem={(app) => ( - - )} + renderItem={(app) => } /> ); }; +/** @deprecated use v2 instead, located at packages/ui/v2/core/apps */ export default TrendingAppsSlider; diff --git a/apps/web/components/v2/apps/App.tsx b/apps/web/components/v2/apps/App.tsx index ae510c0b99..3a5cd1e868 100644 --- a/apps/web/components/v2/apps/App.tsx +++ b/apps/web/components/v2/apps/App.tsx @@ -132,9 +132,7 @@ const Component = ({ isGlobal || (installedAppCount > 0 && allowedMultipleInstalls) ? (
{!isGlobal && ( - {t("add_another")} + {t("install_another")} ); }} diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts index b03be521aa..26c42ad037 100644 --- a/apps/web/middleware.ts +++ b/apps/web/middleware.ts @@ -13,9 +13,7 @@ const V2_WHITELIST = [ "/bookings", "/event-types", "/workflows", - // Apps contains trailing slash to prevent app overview from being rendered as v2, - // since it doesn't exist yet. - "/apps/", + "/apps", "/success", ]; const V2_BLACKLIST = ["/apps/routing_forms"]; diff --git a/apps/web/pages/apps/categories/[category].tsx b/apps/web/pages/apps/categories/[category].tsx index 99c3b4c692..1e56914e9e 100644 --- a/apps/web/pages/apps/categories/[category].tsx +++ b/apps/web/pages/apps/categories/[category].tsx @@ -31,17 +31,7 @@ export default function Apps({ apps }: InferGetStaticPropsTypeAll {router.query.category} apps
{apps.map((app) => { - return ( - - ); + return ; })}
diff --git a/apps/web/pages/event-types/[type].tsx b/apps/web/pages/event-types/[type].tsx index c5f736b29f..93884eaaa7 100644 --- a/apps/web/pages/event-types/[type].tsx +++ b/apps/web/pages/event-types/[type].tsx @@ -36,6 +36,7 @@ import { Icon } from "@calcom/ui/Icon"; import Shell from "@calcom/ui/Shell"; import Switch from "@calcom/ui/Switch"; import { Tooltip } from "@calcom/ui/Tooltip"; +import { UpgradeToProDialog } from "@calcom/ui/UpgradeToProDialog"; import { Form } from "@calcom/ui/form/fields"; import { QueryCell } from "@lib/QueryCell"; @@ -50,7 +51,6 @@ import { ClientSuspense } from "@components/ClientSuspense"; import DestinationCalendarSelector from "@components/DestinationCalendarSelector"; import { EmbedButton, EmbedDialog } from "@components/Embed"; import Loader from "@components/Loader"; -import { UpgradeToProDialog } from "@components/UpgradeToProDialog"; import { AvailabilitySelectSkeletonLoader } from "@components/availability/SkeletonLoader"; import { EditLocationDialog } from "@components/dialog/EditLocationDialog"; import RecurringEventController from "@components/eventtype/RecurringEventController"; diff --git a/apps/web/pages/settings/profile.tsx b/apps/web/pages/settings/profile.tsx index ab1b28241f..a9afe6cb54 100644 --- a/apps/web/pages/settings/profile.tsx +++ b/apps/web/pages/settings/profile.tsx @@ -27,6 +27,7 @@ import Button from "@calcom/ui/Button"; import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent"; import { Dialog, DialogTrigger } from "@calcom/ui/Dialog"; import { Icon } from "@calcom/ui/Icon"; +import { UpgradeToProDialog } from "@calcom/ui/UpgradeToProDialog"; import { Form, PasswordField } from "@calcom/ui/form/fields"; import { Label } from "@calcom/ui/form/fields"; @@ -46,8 +47,6 @@ import { UsernameAvailability } from "@components/ui/UsernameAvailability"; import ColorPicker from "@components/ui/colorpicker"; import Select from "@components/ui/form/Select"; -import { UpgradeToProDialog } from "../../components/UpgradeToProDialog"; - type Props = inferSSRProps; function HideBrandingInput(props: { hideBrandingRef: RefObject; user: Props["user"] }) { diff --git a/apps/web/pages/v2/apps/[slug]/index.tsx b/apps/web/pages/v2/apps/[slug]/index.tsx index f2a4cbc925..abf2c7b712 100644 --- a/apps/web/pages/v2/apps/[slug]/index.tsx +++ b/apps/web/pages/v2/apps/[slug]/index.tsx @@ -37,7 +37,7 @@ function SingleAppPage({ data, source }: inferSSRProps) { isGlobal={data.isGlobal} type={data.type} logo={data.logo} - categories={[data.category]} + categories={data.categories ?? [data.category]} author={data.publisher} feeType={data.feeType || "usage-based"} price={data.price || 0} diff --git a/apps/web/pages/v2/apps/categories/[category].tsx b/apps/web/pages/v2/apps/categories/[category].tsx new file mode 100644 index 0000000000..92191844f9 --- /dev/null +++ b/apps/web/pages/v2/apps/categories/[category].tsx @@ -0,0 +1,86 @@ +import { AppCategories } from "@prisma/client"; +import { GetStaticPropsContext, InferGetStaticPropsType } from "next"; +import Link from "next/link"; +import { useRouter } from "next/router"; + +import { getAppRegistry } from "@calcom/app-store/_appRegistry"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import prisma from "@calcom/prisma"; +import { Icon } from "@calcom/ui/Icon"; +import Shell from "@calcom/ui/v2/core/Shell"; +import AppCard from "@calcom/ui/v2/core/apps/AppCard"; + +export default function Apps({ apps }: InferGetStaticPropsType) { + const { t } = useLocale(); + const router = useRouter(); + const { category } = router.query; + + return ( + <> + +
+ + + + {t("app_store")}{" "} + + + {category && ( + +  /  + {t("category_apps", { category: category[0].toUpperCase() + category?.slice(1) })} + + )} +
+
+
+ {apps.map((app) => { + return ; + })} +
+
+ + + ); +} + +export const getStaticPaths = async () => { + const appStore = await getAppRegistry(); + const paths = appStore.reduce((categories, app) => { + if (!categories.includes(app.category)) { + categories.push(app.category); + } + return categories; + }, [] as string[]); + + return { + paths: paths.map((category) => ({ params: { category } })), + fallback: false, + }; +}; + +export const getStaticProps = async (context: GetStaticPropsContext) => { + const category = context.params?.category as AppCategories; + + const appQuery = await prisma.app.findMany({ + where: { + categories: { + has: category, + }, + }, + select: { + slug: true, + }, + }); + + const dbAppsSlugs = appQuery.map((category) => category.slug); + + const appStore = await getAppRegistry(); + + const apps = appStore.filter((app) => dbAppsSlugs.includes(app.slug)); + return { + props: { + apps, + }, + }; +}; diff --git a/apps/web/pages/v2/apps/categories/index.tsx b/apps/web/pages/v2/apps/categories/index.tsx new file mode 100644 index 0000000000..5f286b07a0 --- /dev/null +++ b/apps/web/pages/v2/apps/categories/index.tsx @@ -0,0 +1,57 @@ +import { InferGetStaticPropsType } from "next"; +import Link from "next/link"; + +import { getAppRegistry } from "@calcom/app-store/_appRegistry"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { Icon } from "@calcom/ui/Icon"; +import Shell from "@calcom/ui/Shell"; + +export default function Apps({ categories }: InferGetStaticPropsType) { + const { t } = useLocale(); + + return ( + + + + + ); +} + +export const getStaticProps = async () => { + const appStore = await getAppRegistry(); + const categories = appStore.reduce((c, app) => { + c[app.category] = c[app.category] ? c[app.category] + 1 : 1; + return c; + }, {} as Record); + + return { + props: { + categories: Object.entries(categories).map(([name, count]) => ({ name, count })), + }, + }; +}; diff --git a/apps/web/pages/v2/apps/index.tsx b/apps/web/pages/v2/apps/index.tsx new file mode 100644 index 0000000000..fa735df7b8 --- /dev/null +++ b/apps/web/pages/v2/apps/index.tsx @@ -0,0 +1,59 @@ +import { InferGetStaticPropsType, NextPageContext } from "next"; + +import { getAppRegistry, getAppRegistryWithCredentials } from "@calcom/app-store/_appRegistry"; +import { getSession } from "@calcom/lib/auth"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import prisma from "@calcom/prisma"; +import type { AppCategories } from "@calcom/prisma/client"; +import AllApps from "@calcom/ui/v2/core/apps/AllApps"; +import AppStoreCategories from "@calcom/ui/v2/core/apps/Categories"; +import TrendingAppsSlider from "@calcom/ui/v2/core/apps/TrendingAppsSlider"; +import AppsLayout from "@calcom/ui/v2/core/layouts/AppsLayout"; + +export default function Apps({ appStore, categories }: InferGetStaticPropsType) { + const { t } = useLocale(); + + return ( + + + + + + ); +} + +export const getServerSideProps = async (context: NextPageContext) => { + const session = await getSession(context); + + let appStore; + if (session?.user?.id) { + appStore = await getAppRegistryWithCredentials(session.user.id); + } else { + appStore = await getAppRegistry(); + } + + const categoryQuery = await prisma.app.findMany({ + select: { + categories: true, + }, + }); + const categories = categoryQuery.reduce((c, app) => { + for (const category of app.categories) { + c[category] = c[category] ? c[category] + 1 : 1; + } + return c; + }, {} as Record); + return { + props: { + categories: Object.entries(categories) + .map(([name, count]): { name: AppCategories; count: number } => ({ + name: name as AppCategories, + count, + })) + .sort(function (a, b) { + return b.count - a.count; + }), + appStore, + }, + }; +}; diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index ba9f44ebc7..ecae757995 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -143,6 +143,7 @@ "view_public_page": "View public page", "sign_out": "Sign out", "add_another": "Add another", + "install_another": "Install another", "until": "until", "powered_by": "powered by", "unavailable": "Unavailable", @@ -215,6 +216,7 @@ "forgot": "Forgot?", "done": "Done", "all_done": "All done!", + "all_apps": "All", "check_email_reset_password": "Check your email. We sent you a link to reset your password.", "finish": "Finish", "few_sentences_about_yourself": "A few sentences about yourself. This will appear on your personal url page.", @@ -227,6 +229,7 @@ "connect_your_calendar_instructions": "Connect your calendar to automatically check for busy times and new events as they’re scheduled.", "set_up_later": "Set up later", "current_time": "Current time", + "details": "Details", "welcome": "Welcome", "welcome_back": "Welcome back", "welcome_to_calcom": "Welcome to Cal.com", @@ -698,16 +701,20 @@ "delete_account_confirmation_message": "Are you sure you want to delete your Cal.com account? Anyone who you've shared your account link with will no longer be able to book using it and any preferences you have saved will be lost.", "integrations": "Integrations", "apps": "Apps", + "category_apps": "{{category}} apps", "app_store": "App Store", "app_store_description": "Connecting people, technology and the workplace.", "settings": "Settings", "event_type_moved_successfully": "Event type has been moved successfully", "next_step": "Skip step", "prev_step": "Prev step", + "install": "Install", "installed": "Installed", "active_install_one": "{{count}} active install", "active_install_other": "{{count}} active installs", "globally_install": "Globally installed", + "app_successfully_installed": "App successfully installed", + "app_could_not_be_installed": "App could not be installed", "disconnect": "Disconnect", "embed_your_calendar": "Embed your calendar within your webpage", "connect_your_favourite_apps": "Connect your favourite apps.", @@ -751,9 +758,12 @@ "import_from": "Import from", "access_token": "Access token", "visit_roadmap": "Roadmap", + "featured_categories": "Featured Categories", "popular_categories": "Popular Categories", + "number_apps_one": "{{count}} App", + "number_apps_other": "{{count}} Apps", "trending_apps": "Trending Apps", - "all_apps": "All Apps", + "explore_apps": "{{category}} apps", "installed_apps": "Installed Apps", "empty_installed_apps_headline": "No apps installed", "empty_installed_apps_description": "Apps enable you to enhance your workflow and improve your scheduling life significantly.", @@ -774,6 +784,8 @@ "terms_of_service": "Terms of Service", "remove": "Remove", "add": "Add", + "installed_one": "Installed", + "installed_other": "{{count}} installed", "verify_wallet": "Verify Wallet", "connect_metamask": "Connect Metamask", "create_events_on": "Create events on:", diff --git a/packages/app-store/_appRegistry.ts b/packages/app-store/_appRegistry.ts index d65a520fcb..542e8218df 100644 --- a/packages/app-store/_appRegistry.ts +++ b/packages/app-store/_appRegistry.ts @@ -1,3 +1,5 @@ +import type { Credential } from "@prisma/client"; + import prisma from "@calcom/prisma"; import { App } from "@calcom/types/App"; @@ -47,3 +49,31 @@ export async function getAppRegistry() { } return apps; } + +export async function getAppRegistryWithCredentials(userId: number) { + const dbApps = await prisma.app.findMany({ include: { credentials: { where: { userId } } } }); + const apps = [] as (Omit & { + credentials: Credential[]; + })[]; + for await (const dbapp of dbApps) { + const app = await getAppWithMetadata(dbapp); + if (!app) continue; + // Skip if app isn't installed + /* This is now handled from the DB */ + // if (!app.installed) return apps; + + const { rating, reviews, trending, verified, ...remainingAppProps } = app; + apps.push({ + rating: rating || 0, + reviews: reviews || 0, + trending: trending || true, + verified: verified || true, + ...remainingAppProps, + categories: dbapp.categories, + credentials: dbapp.credentials, + installed: + true /* All apps from DB are considered installed by default. @TODO: Add and filter our by `enabled` property */, + }); + } + return apps; +} diff --git a/packages/app-store/components.tsx b/packages/app-store/components.tsx index 18556f9af9..653dff3191 100644 --- a/packages/app-store/components.tsx +++ b/packages/app-store/components.tsx @@ -6,8 +6,7 @@ import { deriveAppDictKeyFromType } from "@calcom/lib/deriveAppDictKeyFromType"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import type { App } from "@calcom/types/App"; - -import { UpgradeToProDialog } from "@components/UpgradeToProDialog"; +import { UpgradeToProDialog } from "@calcom/ui/UpgradeToProDialog"; import { InstallAppButtonMap } from "./apps.browser.generated"; import { InstallAppButtonProps } from "./types"; diff --git a/packages/app-store/tsconfig.json b/packages/app-store/tsconfig.json index ec53741a1c..b138edc51d 100644 --- a/packages/app-store/tsconfig.json +++ b/packages/app-store/tsconfig.json @@ -4,7 +4,9 @@ "compilerOptions": { "baseUrl": ".", "paths": { + /* A `package` should never import from `apps` ↓ */ "@components/*": ["../../apps/web/components/*"], + /* A `package` should never import from `apps` ↓ */ "@lib/*": ["../../apps/web/lib/*"], "@prisma/client/*": ["@calcom/prisma/client/*"] }, diff --git a/packages/app-store/types.d.ts b/packages/app-store/types.d.ts index 2bfa37c3c1..01a150ba45 100644 --- a/packages/app-store/types.d.ts +++ b/packages/app-store/types.d.ts @@ -1,4 +1,5 @@ import { ButtonBaseProps } from "@calcom/ui/Button"; +import { ButtonBaseProps as v2ButtonBaseProps } from "@calcom/ui/v2/core/Button"; export type IntegrationOAuthCallbackState = { returnTo: string; @@ -7,9 +8,11 @@ export type IntegrationOAuthCallbackState = { export interface InstallAppButtonProps { render: ( renderProps: - | ButtonBaseProps & { + | Omit & { /** Tells that the default render component should be used */ useDefaultComponent?: boolean; + color?: ButtonBaseProps["color"] & v2ButtonBaseProps["color"]; + size?: ButtonBaseProps["size"] & v2ButtonBaseProps["size"]; } ) => JSX.Element; onChanged?: () => unknown; diff --git a/apps/web/components/UpgradeToProDialog.tsx b/packages/ui/UpgradeToProDialog.tsx similarity index 91% rename from apps/web/components/UpgradeToProDialog.tsx rename to packages/ui/UpgradeToProDialog.tsx index 4687a82bd5..b5c481ece5 100644 --- a/apps/web/components/UpgradeToProDialog.tsx +++ b/packages/ui/UpgradeToProDialog.tsx @@ -1,9 +1,10 @@ import { Trans } from "next-i18next"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import Button from "@calcom/ui/Button"; -import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog"; -import { Icon } from "@calcom/ui/Icon"; + +import Button from "./Button"; +import { Dialog, DialogClose, DialogContent } from "./Dialog"; +import { Icon } from "./Icon"; export function UpgradeToProDialog({ modalOpen, diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx index d45dc0e9a9..70d555701a 100644 --- a/packages/ui/v2/core/Shell.tsx +++ b/packages/ui/v2/core/Shell.tsx @@ -623,7 +623,7 @@ function SideBar() { - {/* TODO @Peer_Rich: reintroduce in 2.1 + {/* TODO @Peer_Rich: reintroduce in 2.1 */} diff --git a/packages/ui/v2/core/apps/AllApps.tsx b/packages/ui/v2/core/apps/AllApps.tsx new file mode 100644 index 0000000000..e52523492f --- /dev/null +++ b/packages/ui/v2/core/apps/AllApps.tsx @@ -0,0 +1,132 @@ +import { useAutoAnimate } from "@formkit/auto-animate/react"; +import type { Credential } from "@prisma/client"; +import { useRouter } from "next/router"; +import { UIEvent, useEffect, useRef, useState } from "react"; +import { ChevronLeft, ChevronRight } from "react-feather"; + +import { classNames } from "@calcom/lib"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import type { App } from "@calcom/types/App"; + +import AppCard from "./AppCard"; + +export function useShouldShowArrows() { + const ref = useRef(null); + const [showArrowScroll, setShowArrowScroll] = useState({ + left: false, + right: false, + }); + + useEffect(() => { + const appCategoryList = ref.current; + if (appCategoryList && appCategoryList.scrollWidth > appCategoryList.clientWidth) { + setShowArrowScroll({ left: false, right: true }); + } + }, []); + + const calculateScroll = (e: UIEvent) => { + setShowArrowScroll({ + left: e.currentTarget.scrollLeft > 0, + right: + Math.floor(e.currentTarget.scrollWidth) - Math.floor(e.currentTarget.offsetWidth) !== + Math.floor(e.currentTarget.scrollLeft), + }); + }; + + return { ref, calculateScroll, leftVisible: showArrowScroll.left, rightVisible: showArrowScroll.right }; +} + +type AllAppsPropsType = { apps: (App & { credentials: Credential[] | undefined })[] }; + +export default function AllApps({ apps }: AllAppsPropsType) { + const { t } = useLocale(); + const router = useRouter(); + + const [selectedCategory, setSelectedCategory] = useState(null); + const [appsContainerRef] = useAutoAnimate(); + const { ref, calculateScroll, leftVisible, rightVisible } = useShouldShowArrows(); + const categories = apps + .map((app) => app.category) + .filter((cat, pos, self) => { + return self.indexOf(cat) === pos; + }); + + useEffect(() => { + const queryCategory = + typeof router.query.category === "string" && categories.includes(router.query.category) + ? router.query.category + : null; + setSelectedCategory(queryCategory); + }, [router.query.category]); + + return ( +
+
+

+ {t("explore_apps", { + category: + (selectedCategory && selectedCategory[0].toUpperCase() + selectedCategory.slice(1)) || + t("all_apps"), + })} +

+ {leftVisible && ( +
+
+ +
+
+
+ )} +
    calculateScroll(e)} + ref={ref}> +
  • { + router.replace(router.asPath.split("?")[0], undefined, { shallow: true }); + }} + className={classNames( + selectedCategory === null ? "bg-gray-200" : "bg-gray-50", + "rounded-md px-4 py-2.5 text-sm font-medium text-gray-900 hover:cursor-pointer hover:bg-gray-200" + )}> + {t("all_apps")} +
    • + {categories.map((cat, pos) => ( +
  • { + if (selectedCategory === cat) { + router.replace(router.asPath.split("?")[0], undefined, { shallow: true }); + } else { + router.replace(router.asPath.split("?")[0] + `?category=${cat}`, undefined, { + shallow: true, + }); + } + }} + className={classNames( + selectedCategory === cat ? "bg-gray-200" : "bg-gray-50", + "rounded-md px-4 py-2.5 text-sm font-medium text-gray-900 hover:cursor-pointer hover:bg-gray-200" + )}> + {cat[0].toUpperCase() + cat.slice(1)} +
    • + ))} +
+ {rightVisible && ( +
+
+
+ +
+
+ )} +
+
+ {apps + .filter((app) => (selectedCategory !== null ? app.category === selectedCategory : true)) + .map((app) => ( + + ))} +
+
+ ); +} diff --git a/packages/ui/v2/core/apps/AppCard.tsx b/packages/ui/v2/core/apps/AppCard.tsx new file mode 100644 index 0000000000..aa7babdc6d --- /dev/null +++ b/packages/ui/v2/core/apps/AppCard.tsx @@ -0,0 +1,128 @@ +import type { Credential } from "@prisma/client"; + +import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation"; +import { InstallAppButton } from "@calcom/app-store/components"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import showToast from "@calcom/lib/notification"; +import { trpc } from "@calcom/trpc/react"; +import { App } from "@calcom/types/App"; +import { Icon } from "@calcom/ui/Icon"; +import Button from "@calcom/ui/v2/core/Button"; + +interface AppCardProps { + app: App; + credentials?: Credential[]; +} + +export default function AppCard({ app, credentials }: AppCardProps) { + const { t } = useLocale(); + const { data: user } = trpc.useQuery(["viewer.me"]); + + const mutation = useAddAppMutation(null, { + onSuccess: () => { + showToast(t("app_successfully_installed"), "success"); + }, + onError: (error) => { + if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error"); + }, + }); + + const allowedMultipleInstalls = app.categories && app.categories.indexOf("calendar") > -1; + const appAdded = (credentials && credentials.length) || 0; + + return ( +
+
+ {app.name +
+
+

{app.name}

+
+ {/* TODO: add reviews
+ {props.rating} stars + {props.reviews} reviews +
*/} +

+ {app.description} +

+
+ + {app.isGlobal || (credentials && credentials.length > 0 && allowedMultipleInstalls) + ? !app.isGlobal && ( + { + if (useDefaultComponent) { + props = { + onClick: () => { + mutation.mutate({ type: app.type }); + }, + }; + } + return ( + + ); + }} + /> + ) + : credentials && + credentials.length === 0 && ( + { + if (useDefaultComponent) { + props = { + onClick: () => { + mutation.mutate({ type: app.type }); + }, + }; + } + return ( + + ); + }} + /> + )} +
+
+ {appAdded > 0 && ( + + {t("installed", { count: appAdded })} + + )} + {app.isGlobal && ( + + {t("default")} + + )} + {app.isProOnly && user?.plan === "FREE" && ( + + + {t("pro")} + + )} +
+
+ ); +} diff --git a/packages/ui/v2/core/apps/Categories.tsx b/packages/ui/v2/core/apps/Categories.tsx new file mode 100644 index 0000000000..fd3f5c4637 --- /dev/null +++ b/packages/ui/v2/core/apps/Categories.tsx @@ -0,0 +1,50 @@ +import Link from "next/link"; +import { ArrowRight } from "react-feather"; + +import { useLocale } from "@calcom/lib/hooks/useLocale"; + +import Slider from "./Slider"; + +export default function AppStoreCategories({ + categories, +}: { + categories: { + name: string; + count: number; + }[]; +}) { + const { t } = useLocale(); + return ( +
+ category.name} + options={{ + perView: 5, + breakpoints: { + 768 /* and below */: { + perView: 2, + }, + }, + }} + renderItem={(category) => ( + + +
+

{category.name}

+

+ {t("number_apps", { count: category.count })}{" "} + +

+
+ + + )} + /> +
+ ); +} diff --git a/packages/ui/v2/core/apps/Slider.tsx b/packages/ui/v2/core/apps/Slider.tsx new file mode 100644 index 0000000000..e9885a2e07 --- /dev/null +++ b/packages/ui/v2/core/apps/Slider.tsx @@ -0,0 +1,79 @@ +import Glide, { Options } from "@glidejs/glide"; +import "@glidejs/glide/dist/css/glide.core.min.css"; +import "@glidejs/glide/dist/css/glide.theme.min.css"; +import { useEffect, useRef } from "react"; + +import { Icon } from "@calcom/ui/Icon"; + +const Slider = ({ + title = "", + className = "", + items, + itemKey = (item) => `${item}`, + renderItem, + options = {}, +}: { + title?: string; + className?: string; + items: T[]; + itemKey?: (item: T) => string; + renderItem?: (item: T) => JSX.Element; + options?: Options; +}) => { + const glide = useRef(null); + const slider = useRef(null); + + useEffect(() => { + if (glide.current) { + slider.current = new Glide(glide.current, { + type: "carousel", + ...options, + }).mount(); + } + + return () => slider.current?.destroy(); + }, [options]); + + return ( +
+ +
+
+ {title && ( +
+

{title}

+
+ )} +
+ + +
+
+
+
    + {items.map((item) => { + if (typeof renderItem !== "function") return null; + return ( +
  • + {renderItem(item)} +
    • + ); + })} +
+
+
+
+ ); +}; + +export default Slider; diff --git a/packages/ui/v2/core/apps/TrendingAppsSlider.tsx b/packages/ui/v2/core/apps/TrendingAppsSlider.tsx new file mode 100644 index 0000000000..46891cc199 --- /dev/null +++ b/packages/ui/v2/core/apps/TrendingAppsSlider.tsx @@ -0,0 +1,29 @@ +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import type { App } from "@calcom/types/App"; + +import AppCard from "./AppCard"; +import Slider from "./Slider"; + +const TrendingAppsSlider = ({ items }: { items: T[] }) => { + const { t } = useLocale(); + + return ( + + className="mb-16" + title={t("trending_apps")} + items={items.filter((app) => !!app.trending)} + itemKey={(app) => app.name} + options={{ + perView: 3, + breakpoints: { + 768 /* and below */: { + perView: 1, + }, + }, + }} + renderItem={(app) => } + /> + ); +}; + +export default TrendingAppsSlider; diff --git a/packages/ui/v2/core/layouts/AppsLayout.tsx b/packages/ui/v2/core/layouts/AppsLayout.tsx new file mode 100644 index 0000000000..b4229328dd --- /dev/null +++ b/packages/ui/v2/core/layouts/AppsLayout.tsx @@ -0,0 +1,34 @@ +import React, { ComponentProps } from "react"; + +import HorizontalTabs from "@calcom/ui/v2/core/navigation/tabs/HorizontalTabs"; +import type { VerticalTabItemProps } from "@calcom/ui/v2/core/navigation/tabs/VerticalTabItem"; + +import Shell from "../Shell"; + +const tabs: VerticalTabItemProps[] = [ + { + name: "app_store", + href: "/apps", + }, + { + name: "installed_apps", + href: "/apps/installed", + }, +]; + +export default function AppsLayout({ + children, + ...rest +}: { children: React.ReactNode } & ComponentProps) { + return ( + +
+
+ +
+
{children}
+
+ + ); +} +export const getLayout = (page: React.ReactElement) => {page}; diff --git a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx index f299a61fba..ce05a702c0 100644 --- a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx +++ b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx @@ -18,6 +18,7 @@ export type VerticalTabItemProps = { textClassNames?: string; className?: string; isChild?: boolean; + hidden?: boolean; } & ( | { /** If you want to change query param tabName as per current tab */ @@ -58,37 +59,41 @@ const VerticalTabItem: FC = ({ name, href, tabName, info, return ( - - - {props.icon && } -
-

{t(name)}

- {info &&

{t(info)}

} -
- {isCurrent && ( -
- -
- )} - - - {props.children?.map((child) => ( - - ))} + {!props.hidden && ( + <> + + + {props.icon && } +
+

{t(name)}

+ {info &&

{t(info)}

} +
+ {isCurrent && ( +
+ +
+ )} + + + {props.children?.map((child) => ( + + ))} + + )} ); };