maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add CTA to Meta component & button to add calendar on /settings/calendars (#5099) 

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
Joe Au-Yeung 2022-10-20 06:03:39 -04:00 committed by GitHub
parent 7bb3397503
commit e53abd921e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
apps/web/pages/settings/my-account/calendars.tsx
View File

@ -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")}
/>
);
}}

3
apps/web/public/static/locales/en/common.json
View File

@ -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"
}

12
packages/ui/v2/core/Meta.tsx
View File

@ -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>

1
packages/ui/v2/core/layouts/SettingsLayout.tsx
View File

@ -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>
);