diff --git a/apps/web/components/v2/eventtype/EventAppsTab.tsx b/apps/web/components/v2/eventtype/EventAppsTab.tsx index 3e2bcddd3d..7615ee379b 100644 --- a/apps/web/components/v2/eventtype/EventAppsTab.tsx +++ b/apps/web/components/v2/eventtype/EventAppsTab.tsx @@ -6,7 +6,8 @@ import { FormattedNumber, IntlProvider } from "react-intl"; import { SelectGifInput } from "@calcom/app-store/giphy/components"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { Alert, Select, Switch, TextField } from "@calcom/ui/v2"; +import { Icon } from "@calcom/ui"; +import { Alert, Button, EmptyScreen, Select, Switch, TextField } from "@calcom/ui/v2"; const AppCard = ({ logo, @@ -70,8 +71,20 @@ export const EventAppsTab = ({ const { t } = useLocale(); + const installedApps = [hasPaymentIntegration, hasGiphyIntegration].filter(Boolean).length; + + if (installedApps === 0) { + return ( + {t("empty_installed_apps_button")} } + /> + ); + } return ( -
+
{/* TODO:Strip isnt fully setup yet */} {hasPaymentIntegration && ( ) => { }} className="space-y-6"> {tabMap[tabName]} -
- - -
); diff --git a/packages/ui/v2/core/EmptyScreen.tsx b/packages/ui/v2/core/EmptyScreen.tsx index c04a0ba5e5..7d81274a44 100644 --- a/packages/ui/v2/core/EmptyScreen.tsx +++ b/packages/ui/v2/core/EmptyScreen.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from "react"; import { Icon } from "react-feather"; +import { IconType } from "react-icons"; import { SVGComponent } from "@calcom/types/SVGComponent"; @@ -13,7 +14,7 @@ export default function EmptyScreen({ buttonOnClick, buttonRaw, }: { - Icon: SVGComponent | Icon; + Icon: SVGComponent | Icon | IconType; headline: string; description: string | React.ReactElement; buttonText?: string; diff --git a/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx index 76a7ce81f2..85634ac243 100644 --- a/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx +++ b/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx @@ -53,7 +53,7 @@ const HorizontalTabItem = ({ name, href, tabName, ...props }: HorizontalTabItemP onClick={onClick} className={classNames( isCurrent ? "bg-gray-200 text-gray-900" : " text-gray-600 hover:bg-gray-100 hover:text-gray-900 ", - "mb-2 inline-flex items-center justify-center rounded-md py-[10px] px-4 text-sm font-medium leading-4 md:mb-0", + "mb-2 inline-flex items-center justify-center whitespace-nowrap rounded-md py-[10px] px-4 text-sm font-medium leading-4 md:mb-0", props.disabled && "pointer-events-none !opacity-30" )} aria-current={isCurrent ? "page" : undefined}>