From e53abd921e480717109e48c480c994eba4607404 Mon Sep 17 00:00:00 2001
From: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Date: Thu, 20 Oct 2022 06:03:39 -0400
Subject: [PATCH] Add CTA to Meta component & button to add calendar on
 /settings/calendars (#5099)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 .../pages/settings/my-account/calendars.tsx   | 23 +++++++++++++++----
 apps/web/public/static/locales/en/common.json |  3 ++-
 packages/ui/v2/core/Meta.tsx                  | 12 +++++-----
 .../ui/v2/core/layouts/SettingsLayout.tsx     |  1 +
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/apps/web/pages/settings/my-account/calendars.tsx b/apps/web/pages/settings/my-account/calendars.tsx
index b713f1b7ff..968000dd4c 100644
--- a/apps/web/pages/settings/my-account/calendars.tsx
+++ b/apps/web/pages/settings/my-account/calendars.tsx
@@ -4,11 +4,10 @@ import { useRouter } from "next/router";
 import { Fragment } from "react";
 
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
-import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import { Alert } from "@calcom/ui/v2";
+import { Alert, Button } from "@calcom/ui/v2";
 import Badge from "@calcom/ui/v2/core/Badge";
 import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen";
 import Meta from "@calcom/ui/v2/core/Meta";
@@ -36,6 +35,18 @@ const SkeletonLoader = () => {
   );
 };
 
+const AddCalendarButton = () => {
+  const { t } = useLocale();
+
+  return (
+    <>
+      <Button color="secondary" StartIcon={Icon.FiPlus} href="/apps/categories/calendar">
+        {t("add_calendar")}
+      </Button>
+    </>
+  );
+};
+
 const CalendarsView = () => {
   const { t } = useLocale();
   const router = useRouter();
@@ -51,7 +62,11 @@ const CalendarsView = () => {
 
   return (
     <>
-      <Meta title="Calendars" description="Configure how your event types interact with your calendars" />
+      <Meta
+        title="Calendars"
+        description="Configure how your event types interact with your calendars"
+        CTA={<AddCalendarButton />}
+      />
       <QueryCell
         query={query}
         customLoader={<SkeletonLoader />}
@@ -174,7 +189,7 @@ const CalendarsView = () => {
               headline={t("no_calendar_installed")}
               description={t("no_calendar_installed_description")}
               buttonText={t("add_a_calendar")}
-              buttonOnClick={() => router.push(`${WEBAPP_URL}/apps/categories/calendar`)}
+              buttonOnClick={() => router.push("/apps/categories/calendar")}
             />
           );
         }}
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index df64c1b86e..40ad15bcc7 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -1324,5 +1324,6 @@
   "saml_sp_entity_id": "SP Entity ID",
   "saml_sp_acs_url_copied": "ACS URL copied!",
   "saml_sp_entity_id_copied": "SP Entity ID copied!",
-  "saml_btn_configure": "Configure"
+  "saml_btn_configure": "Configure",
+  "add_calendar": "Add Calendar"
 }
diff --git a/packages/ui/v2/core/Meta.tsx b/packages/ui/v2/core/Meta.tsx
index 0b0d6c4096..15672410bc 100644
--- a/packages/ui/v2/core/Meta.tsx
+++ b/packages/ui/v2/core/Meta.tsx
@@ -1,18 +1,18 @@
 import Head from "next/head";
 import React, { createContext, useContext, useState, useEffect } from "react";
 
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
 type MetaType = {
   title: string;
   description: string;
   backButton?: boolean;
+  CTA?: React.ReactNode;
 };
 
-const initialMeta = {
+const initialMeta: MetaType = {
   title: "",
   description: "",
   backButton: false,
+  CTA: null,
 };
 
 const MetaContext = createContext({
@@ -41,16 +41,16 @@ export function MetaProvider({ children }: { children: React.ReactNode }) {
  * elsewhere (ie. on a Heading, Title, Subtitle, etc.)
  * @example <Meta title="Password" description="Manage settings for your account passwords" />
  */
-export default function Meta({ title, description, backButton }: MetaType) {
+export default function Meta({ title, description, backButton, CTA }: MetaType) {
   const { setMeta, meta } = useMeta();
 
   /* @TODO: maybe find a way to have this data on first render to prevent flicker */
   useEffect(() => {
     if (meta.title !== title || meta.description !== description) {
-      setMeta({ title, description, backButton });
+      setMeta({ title, description, backButton, CTA });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [title, description, backButton]);
+  }, [title, description, backButton, CTA]);
 
   return (
     <Head>
diff --git a/packages/ui/v2/core/layouts/SettingsLayout.tsx b/packages/ui/v2/core/layouts/SettingsLayout.tsx
index fd7fb084af..76564b8464 100644
--- a/packages/ui/v2/core/layouts/SettingsLayout.tsx
+++ b/packages/ui/v2/core/layouts/SettingsLayout.tsx
@@ -377,6 +377,7 @@ function ShellHeader() {
             <div className="mb-1 h-6 w-32 animate-pulse rounded-md bg-gray-200" />
           )}
         </div>
+        <div className="ml-auto">{meta.CTA}</div>
       </div>
     </header>
   );