Revert "team banner (#5956)"

This reverts commit 463787b607.

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

@@ -7,7 +7,6 @@ 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,
@@ -29,7 +28,6 @@ import {
   showToast,
   Switch,
   Tooltip,
-  TipBanner,
 } from "@calcom/ui";
 
 import { withQuery } from "@lib/QueryCell";
@@ -589,7 +587,6 @@ 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) */}
@@ -608,6 +605,7 @@ const EventTypesPage = () => {
                   />
                 </Fragment>
               ))}
+
               {data.eventTypeGroups.length === 0 && <CreateFirstEventTypeView />}
               <EmbedDialog />
             </>

packages/ui/index.tsx

@@ -55,7 +55,6 @@ export {
   Swatch,
   Switch,
   VerticalTabs,
-  TipBanner,
 } from "./v2";
 export type { AlertProps } from "./v2";
 export { Segment, SegmentOption } from "./v2/core";
@@ -120,4 +119,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/core/Tips";
+export { default as Tips } from "./v2/modules/tips/Tips";

packages/ui/v2/core/index.ts

@@ -46,4 +46,3 @@ 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/Tips.tsx

@@ -1,12 +1,10 @@
 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 "./Card";
+import Card from "../../core/Card";
 
 export const tips = [
   {
@@ -59,30 +57,20 @@ export const tips = [
   },
 ];
 
-function useLocalList<T extends { id: number }>(storageKey: string, initialValue: T[]) {
-  const [list, setList] = useState<T[]>(initialValue);
+export default function Tips() {
+  const [animationRef] = useAutoAnimate<HTMLDivElement>();
 
-  /**
-     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 { t } = useLocale();
+
+  const [list, setList] = useState<typeof tips>([]);
 
   const handleRemoveItem = (id: number) => {
     setList((currentItems) => {
-      const items = localStorage.getItem(storageKey) || "";
+      const items = localStorage.getItem("removedTipsIds") || "";
       const itemToRemoveIndex = currentItems.findIndex((item) => item.id === id);
 
       localStorage.setItem(
-        storageKey,
+        "removedTipsIds",
         `${currentItems[itemToRemoveIndex].id.toString()}${items.length > 0 ? `,${items.split(",")}` : ""}`
       );
       currentItems.splice(itemToRemoveIndex, 1);
@@ -90,20 +78,14 @@ function useLocalList<T extends { id: number }>(storageKey: string, initialValue
     });
   };
 
-  return {
-    list,
-    handleRemoveItem,
-  };
-}
-export default function Tips() {
-  //const [animationRef] = useAutoAnimate<HTMLDivElement>();
-
-  const { t } = useLocale();
-
-  const { list, handleRemoveItem } = useLocalList<typeof tips[0]>("removedTipsIds", 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]);
+  }, []);
   const baseOriginalList = list.slice(0).reverse();
-
   return (
     <div
       className="mb-4 hidden lg:grid"
@@ -143,59 +125,3 @@ 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/modules/tips/index.ts

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