Merge branch 'main' into 4779-show-ultimate-features-with-badge-in-app

apps/web/pages/reporting.tsx

@@ -0,0 +1,35 @@
+import { Icon } from "@calcom/ui";
+import { Badge, ButtonGroup, EmptyScreen, Shell, Tooltip } from "@calcom/ui/v2";
+import Button from "@calcom/ui/v2/core/Button";
+
+export default function Reporting() {
+  // we're not doing any i18n yet because this is a temporary page
+  return (
+    <Shell>
+      <EmptyScreen
+        Icon={Icon.FiBarChart}
+        headline="Reporting"
+        description={
+          <>
+            This is an{" "}
+            <a target="_blank" href="https://cal.com/pricing" rel="noreferrer">
+              <Badge variant="blue">ULTIMATE</Badge>
+            </a>{" "}
+            feature starting at <strong>$79/month</strong>. Use Reporting to gain valuable insights about your
+            personal and team booking statistics, create graphs or run SQL queries.
+          </>
+        }
+        buttonRaw={
+          <ButtonGroup>
+            <Tooltip content="Click to remove from navigation">
+              <Button color="secondary">I&apos;m not interested</Button>
+            </Tooltip>
+            <Button target="_blank" href="https://cal.com/sales" color="primary">
+              Contact Sales
+            </Button>
+          </ButtonGroup>
+        }
+      />
+    </Shell>
+  );
+}

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

@@ -1272,5 +1272,8 @@
   "format": "Format",
   "uppercase_for_letters": "Use uppercase for all letters",
   "replace_whitespaces_underscores": "Replace whitespaces with underscores",
-  "ignore_special_characters": "Ignore special characters in your Additonal Input label. Use only letters and numbers"
+  "ignore_special_characters": "Ignore special characters in your Additonal Input label. Use only letters and numbers",
+  "reporting": "Reporting",
+  "im_not_interested": "I'm not interested",
+  "contact_sales": "Contact Sales"
 }

packages/ui/v2/core/Shell.tsx

@@ -10,7 +10,6 @@ import dayjs from "@calcom/dayjs";
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import ImpersonatingBanner from "@calcom/features/ee/impersonation/components/ImpersonatingBanner";
 import HelpMenuItem from "@calcom/features/ee/support/components/HelpMenuItem";
-import UserV2OptInBanner from "@calcom/features/users/components/UserV2OptInBanner";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
 import { JOIN_SLACK, ROADMAP, DESKTOP_APP_LINK, WEBAPP_URL } from "@calcom/lib/constants";
@@ -27,6 +26,7 @@ import Dropdown, {
   DropdownMenuPortal,
 } from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
+import Badge from "@calcom/ui/v2/core/Badge";
 import Button from "@calcom/ui/v2/core/Button";
 
 /* TODO: Get this from endpoint */
@@ -385,7 +385,7 @@ export type NavigationItemType = {
   href: string;
   icon?: SVGComponent;
   child?: NavigationItemType[];
-  pro?: true;
+  new?: boolean;
   onlyMobile?: boolean;
   onlyDesktop?: boolean;
   isCurrent?: ({
@@ -458,6 +458,7 @@ const navigation: NavigationItemType[] = [
       },
     ],
   },
+
   {
     name: MORE_SEPARATOR_NAME,
     href: "/more",
@@ -476,6 +477,14 @@ const navigation: NavigationItemType[] = [
     href: "/workflows",
     icon: Icon.FiZap,
   },
+
+  {
+    name: "Reporting",
+    href: "/reporting",
+    icon: Icon.FiBarChart,
+    onlyDesktop: true,
+    new: true,
+  },
   {
     name: "settings",
     href: "/settings",
@@ -542,6 +551,7 @@ const NavigationItem: React.FC<{
     <Fragment>
       <Link href={item.href}>
         <a
+          target={item.href.startsWith("http") ? "_blank" : undefined}
           aria-label={t(item.name)}
           className={classNames(
             "group flex items-center rounded-md py-2 px-3 text-sm font-medium text-gray-600 hover:bg-gray-100 lg:px-[14px]  [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:hover:text-neutral-900",
@@ -558,7 +568,11 @@ const NavigationItem: React.FC<{
             />
           )}
           {isLocaleReady ? (
-            <span className="hidden lg:inline">{t(item.name)}</span>
+            <div className="hidden w-full justify-between lg:flex">
+              {t(item.name)}
+              {/* TODO: hide new badge after clicking */}
+              {item.new && <Badge variant="green">NEW</Badge>}
+            </div>
           ) : (
             <SkeletonText className="h-3 w-32" />
           )}