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 (
+ <>
+
+ >
+ );
+};
+
const CalendarsView = () => {
const { t } = useLocale();
const router = useRouter();
@@ -51,7 +62,11 @@ const CalendarsView = () => {
return (
<>
-
+ }
+ />
}
@@ -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
*/
-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 (
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() {
)}
+ {meta.CTA}
);