2023-05-11 16:02:13 +00:00
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
|
|
import { trpc } from "@calcom/trpc/react";
|
|
|
|
import { HeadSeo } from "@calcom/ui";
|
|
|
|
|
|
|
|
interface BookerSeoProps {
|
|
|
|
username: string;
|
|
|
|
eventSlug: string;
|
|
|
|
rescheduleUid: string | undefined;
|
|
|
|
hideBranding?: boolean;
|
2023-06-28 14:47:28 +00:00
|
|
|
isTeamEvent?: boolean;
|
2023-07-13 14:08:41 +00:00
|
|
|
org: string | null;
|
2023-05-11 16:02:13 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export const BookerSeo = (props: BookerSeoProps) => {
|
2023-07-13 14:08:41 +00:00
|
|
|
const { eventSlug, username, rescheduleUid, hideBranding, isTeamEvent, org } = props;
|
2023-05-11 16:02:13 +00:00
|
|
|
const { t } = useLocale();
|
|
|
|
const { data: event } = trpc.viewer.public.event.useQuery(
|
2023-07-13 14:08:41 +00:00
|
|
|
{ username, eventSlug, isTeamEvent, org },
|
2023-05-11 16:02:13 +00:00
|
|
|
{ refetchOnWindowFocus: false }
|
|
|
|
);
|
|
|
|
|
|
|
|
const profileName = event?.profile?.name ?? "";
|
|
|
|
const profileImage = event?.profile?.image;
|
|
|
|
const title = event?.title ?? "";
|
|
|
|
return (
|
|
|
|
<HeadSeo
|
|
|
|
title={`${rescheduleUid ? t("reschedule") : ""} ${title} | ${profileName}`}
|
|
|
|
description={`${rescheduleUid ? t("reschedule") : ""} ${title}`}
|
|
|
|
meeting={{
|
|
|
|
title: title,
|
|
|
|
profile: { name: profileName, image: profileImage },
|
|
|
|
users: [
|
|
|
|
...(event?.users || []).map((user) => ({
|
|
|
|
name: `${user.name}`,
|
|
|
|
username: `${user.username}`,
|
|
|
|
})),
|
|
|
|
],
|
|
|
|
}}
|
|
|
|
nextSeoProps={{
|
|
|
|
nofollow: event?.hidden,
|
|
|
|
noindex: event?.hidden,
|
|
|
|
}}
|
|
|
|
isBrandingHidden={hideBranding}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|