team banner (#5956)

Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>

apps/web/pages/event-types/index.tsx

@@ -7,6 +7,7 @@ import React, { Fragment, useEffect, useState } from "react";
 import CreateEventTypeButton from "@calcom/features/eventtypes/components/CreateEventTypeButton";
 import { APP_NAME, CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import isCalcom from "@calcom/lib/isCalcom";
 import { RouterOutputs, trpc, TRPCClientError } from "@calcom/trpc/react";
 import {
   Badge,
@@ -28,6 +29,7 @@ import {
   showToast,
   Switch,
   Tooltip,
+  TipBanner,
 } from "@calcom/ui";
 
 import { withQuery } from "@lib/QueryCell";
@@ -587,6 +589,7 @@ const EventTypesPage = () => {
           customLoader={<SkeletonLoader />}
           success={({ data }) => (
             <>
+              {isCalcom && <TipBanner />}
               {data.eventTypeGroups.map((group, index) => (
                 <Fragment key={group.profile.slug}>
                   {/* hide list heading when there is only one (current user) */}
@@ -605,7 +608,6 @@ const EventTypesPage = () => {
                   />
                 </Fragment>
               ))}
-
               {data.eventTypeGroups.length === 0 && <CreateFirstEventTypeView />}
               <EmbedDialog />
             </>

packages/ui/index.tsx

@@ -55,6 +55,7 @@ export {
   Swatch,
   Switch,
   VerticalTabs,
+  TipBanner,
 } from "./v2";
 export type { AlertProps } from "./v2";
 export { getReactSelectProps, Segment, SegmentOption } from "./v2/core";
@@ -119,4 +120,4 @@ export { default as SAMLLogin } from "./v2/modules/auth/SAMLLogin";
 export { default as DatePicker } from "./v2/modules/booker/DatePicker";
 export { EventTypeDescriptionLazy } from "./v2/modules/event-types";
 export { EventTypeDescription } from "./v2/modules/event-types/EventTypeDescription";
-export { default as Tips } from "./v2/modules/tips/Tips";
+export { default as Tips } from "./v2/core/Tips";

packages/ui/v2/core/Tips.tsx

@@ -1,10 +1,12 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { useEffect, useState } from "react";
 
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { localStorage } from "@calcom/lib/webstorage";
+import { Button, Icon } from "@calcom/ui";
 
-import Card from "../../core/Card";
+import Card from "./Card";
 
 export const tips = [
   {
@@ -57,20 +59,30 @@ export const tips = [
   },
 ];
 
-export default function Tips() {
-  const [animationRef] = useAutoAnimate<HTMLDivElement>();
+function useLocalList<T extends { id: number }>(storageKey: string, initialValue: T[]) {
+  const [list, setList] = useState<T[]>(initialValue);
 
-  const { t } = useLocale();
-
-  const [list, setList] = useState<typeof tips>([]);
+  /**
+     This use effect is used to filter out the items that have been removed from the list
+     we get this from local storage and then we reverse the list so that the newest items
+     are at the top. This is done so that the items are displayed in the order they were
+     added
+  **/
+  useEffect(() => {
+    const reversedList = initialValue.slice(0).reverse();
+    const removedListString = localStorage.getItem(storageKey) || "";
+    const removedListIds = removedListString.split(",").map((id) => parseInt(id, 10));
+    const filteredList = reversedList.filter((tip) => removedListIds.indexOf(tip.id) === -1);
+    setList(() => [...filteredList]);
+  }, [initialValue, storageKey]);
 
   const handleRemoveItem = (id: number) => {
     setList((currentItems) => {
-      const items = localStorage.getItem("removedTipsIds") || "";
+      const items = localStorage.getItem(storageKey) || "";
       const itemToRemoveIndex = currentItems.findIndex((item) => item.id === id);
 
       localStorage.setItem(
-        "removedTipsIds",
+        storageKey,
         `${currentItems[itemToRemoveIndex].id.toString()}${items.length > 0 ? `,${items.split(",")}` : ""}`
       );
       currentItems.splice(itemToRemoveIndex, 1);
@@ -78,14 +90,20 @@ export default function Tips() {
     });
   };
 
-  useEffect(() => {
-    const reversedTips = tips.slice(0).reverse();
-    const removedTipsString = localStorage.getItem("removedTipsIds") || "";
-    const removedTipsIds = removedTipsString.split(",").map((id) => parseInt(id, 10));
-    const filteredTips = reversedTips.filter((tip) => removedTipsIds.indexOf(tip.id) === -1);
-    setList(() => [...filteredTips]);
-  }, []);
+  return {
+    list,
+    handleRemoveItem,
+  };
+}
+export default function Tips() {
+  //const [animationRef] = useAutoAnimate<HTMLDivElement>();
+
+  const { t } = useLocale();
+
+  const { list, handleRemoveItem } = useLocalList<typeof tips[0]>("removedTipsIds", tips);
+
   const baseOriginalList = list.slice(0).reverse();
+
   return (
     <div
       className="mb-4 hidden lg:grid"
@@ -125,3 +143,59 @@ export default function Tips() {
     </div>
   );
 }
+
+export function TipBanner() {
+  const { t } = useLocale();
+  const [animationRef] = useAutoAnimate<HTMLDivElement>();
+
+  const bannerTips = [
+    {
+      id: 1,
+      img: "/team-banner-background-small.jpg",
+      title: t("calcom_is_better_with_team"),
+      subtitle: t("add_your_team_members"),
+      href: `${WEBAPP_URL}/settings/teams/new`,
+      learnMoreHref: "https://go.cal.com/teams-video",
+    },
+  ];
+  const { list, handleRemoveItem } = useLocalList<typeof bannerTips[0]>("removedBannerIds", bannerTips);
+
+  return (
+    <div>
+      {list.map((tip) => {
+        return (
+          <div
+            key={tip.id}
+            ref={animationRef}
+            className="relative -mt-6 mb-6 min-h-[186px] rounded-md"
+            style={{ backgroundImage: "url(" + tip.img + ")", backgroundSize: "cover" }}>
+            <div className="p-6 text-white">
+              <h1 className="font-cal text-lg">{tip.title}</h1>
+              <p className="my-4 max-w-xl text-sm">{tip.subtitle}</p>
+              <div className="space-x-2">
+                <Button className="bg-white" color="secondary" href={tip.href}>
+                  {t("create_team")}
+                </Button>
+                {tip.learnMoreHref && (
+                  <Button
+                    className="!bg-transparent text-white"
+                    color="minimal"
+                    target="_blank"
+                    href={tip.learnMoreHref}>
+                    {t("learn_more")}
+                  </Button>
+                )}
+              </div>
+              <button
+                onClick={() => handleRemoveItem(tip.id)}
+                className="!focus:border-transparent !focus:ring-0 absolute right-2 top-2 flex h-8 w-8 items-center justify-center rounded-md !border-transparent text-white hover:bg-white/10">
+                <span className="sr-only">Hide Banner</span>
+                <Icon.FiX className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

packages/ui/v2/core/index.ts

@@ -56,3 +56,4 @@ export { default as Switch } from "./Switch";
 export { default as Tooltip } from "./Tooltip";
 export { default as VerticalDivider } from "./VerticalDivider";
 export { default as WizardForm } from "./WizardForm";
+export { TipBanner } from "./Tips";

packages/ui/v2/modules/tips/index.ts

@@ -1 +0,0 @@
-export { default as Tips } from "./Tips";