fix: bookerEmbed atom (#18168)

* update translations

* add custom hook for platform embed

* update event type ouput DTO response

* fixup

* display terms and conditions for embed

* update v2 docs

* PR feedback

* update docs

* PR feedback

* update docs

* update output DTO

* update docs

* update output typing

* docs update

* resolve merge conflicts

* merge conflicts resolving

* resolve merge conflicts

* fixup

* update docs
This commit is contained in:
Rajiv Sahal authored and GitHub committed 2024-12-17 12:07:47 +00:00
1 parent c1334475c5
commit c732c06835
12 files changed
+219 -32

No files matched your search

@@ -29,7 +29,18 @@ export class OrganizationsEventTypesRepository {
schedule: true,
hosts: true,
destinationCalendar: true,
team: { select: { bannerUrl: true } },
team: {
select: {
bannerUrl: true,
name: true,
logoUrl: true,
slug: true,
weekStart: true,
brandColor: true,
darkBrandColor: true,
theme: true,
},
},
},
});
}
@@ -44,7 +55,18 @@ export class OrganizationsEventTypesRepository {
schedule: true,
hosts: true,
destinationCalendar: true,
team: { select: { bannerUrl: true } },
team: {
select: {
bannerUrl: true,
name: true,
logoUrl: true,
slug: true,
weekStart: true,
brandColor: true,
darkBrandColor: true,
theme: true,
},
},
},
});
}
@@ -12,7 +12,10 @@ type EventTypeRelations = {
schedule: Schedule | null;
hosts: Host[];
destinationCalendar?: DestinationCalendar | null;
team?: Pick<Team, "bannerUrl"> | null;
team?: Pick<
Team,
"bannerUrl" | "name" | "logoUrl" | "slug" | "weekStart" | "brandColor" | "darkBrandColor" | "theme"
> | null;
};
export type DatabaseTeamEventType = EventType & EventTypeRelations;
@@ -98,8 +101,18 @@ export class OutputOrganizationsEventTypesService {
ownerId: userId,
parentEventTypeId: parentId,
schedulingType: databaseEventType.schedulingType,
bannerUrl: databaseEventType?.team?.bannerUrl,
assignAllTeamMembers: teamId ? assignAllTeamMembers : undefined,
team: {
id: teamId,
name: databaseEventType?.team?.name,
slug: databaseEventType?.team?.slug,
bannerUrl: databaseEventType?.team?.bannerUrl,
logoUrl: databaseEventType?.team?.logoUrl,
weekStart: databaseEventType?.team?.weekStart,
brandColor: databaseEventType?.team?.brandColor,
darkBrandColor: databaseEventType?.team?.darkBrandColor,
theme: databaseEventType?.team?.theme,
},
};
}
+41 -5
View File
@@ -10958,6 +10958,41 @@
"name"
]
},
"EventTypeTeam": {
"type": "object",
"properties": {
"id": {
"type": "number"
},
"slug": {
"type": "string"
},
"bannerUrl": {
"type": "string"
},
"name": {
"type": "string"
},
"logoUrl": {
"type": "string"
},
"weekStart": {
"type": "string"
},
"brandColor": {
"type": "string"
},
"darkBrandColor": {
"type": "string"
},
"theme": {
"type": "string"
}
},
"required": [
"id"
]
},
"TeamEventTypeOutput_2024_06_14": {
"type": "object",
"properties": {
@@ -11208,8 +11243,7 @@
"type": "boolean"
},
"teamId": {
"type": "number",
"nullable": true
"type": "number"
},
"ownerId": {
"type": "number",
@@ -11238,8 +11272,8 @@
"MANAGED"
]
},
"bannerUrl": {
"type": "string"
"team": {
"$ref": "#/components/schemas/EventTypeTeam"
}
},
"required": [
@@ -11260,8 +11294,10 @@
"successRedirectUrl",
"isInstantEvent",
"scheduleId",
"teamId",
"hosts",
"schedulingType"
"schedulingType",
"team"
]
},
"GetTeamEventTypeOutput": {
@@ -2651,6 +2651,8 @@
"go_back_and_assign": "Go back and Assign",
"leave_without_assigning": "Leave without Assigning",
"signing_up_terms": "By proceeding, you agree to our <0>Terms</0> and <1>Privacy Policy</1>.",
"proceeding_agreement": "By proceeding, you agree to our",
"terms": "Terms",
"always_show_x_days": "Always {{x}} days available",
"unable_to_subscribe_to_the_platform": "An error occurred while trying to subscribe to the platform plan, please try again later",
"updating_oauth_client_error": "An error occurred while updating the OAuth client, please try again later",
+39 -5
View File
@@ -9978,6 +9978,39 @@
},
"required": ["userId", "name"]
},
"EventTypeTeam": {
"type": "object",
"properties": {
"id": {
"type": "number"
},
"slug": {
"type": "string"
},
"bannerUrl": {
"type": "string"
},
"name": {
"type": "string"
},
"logoUrl": {
"type": "string"
},
"weekStart": {
"type": "string"
},
"brandColor": {
"type": "string"
},
"darkBrandColor": {
"type": "string"
},
"theme": {
"type": "string"
}
},
"required": ["id"]
},
"TeamEventTypeOutput_2024_06_14": {
"type": "object",
"properties": {
@@ -10224,8 +10257,7 @@
"type": "boolean"
},
"teamId": {
"type": "number",
"nullable": true
"type": "number"
},
"ownerId": {
"type": "number",
@@ -10250,8 +10282,8 @@
"nullable": true,
"enum": ["ROUND_ROBIN", "COLLECTIVE", "MANAGED"]
},
"bannerUrl": {
"type": "string"
"team": {
"$ref": "#/components/schemas/EventTypeTeam"
}
},
"required": [
@@ -10272,8 +10304,10 @@
"successRedirectUrl",
"isInstantEvent",
"scheduleId",
"teamId",
"hosts",
"schedulingType"
"schedulingType",
"team"
]
},
"GetTeamEventTypeOutput": {
@@ -4,6 +4,7 @@ import Link from "next/link";
import { useMemo, useState } from "react";
import type { FieldError } from "react-hook-form";
import { useIsPlatformBookerEmbed } from "@calcom/atoms/monorepo";
import type { BookerEvent } from "@calcom/features/bookings/types";
import { WEBSITE_PRIVACY_POLICY_URL, WEBSITE_TERMS_URL } from "@calcom/lib/constants";
import getPaymentAppData from "@calcom/lib/getPaymentAppData";
@@ -58,6 +59,7 @@ export const BookEventForm = ({
const timeslot = useBookerStore((state) => state.selectedTimeslot);
const username = useBookerStore((state) => state.username);
const isInstantMeeting = useBookerStore((state) => state.isInstantMeeting);
const isPlatformBookerEmbed = useIsPlatformBookerEmbed();
const [responseVercelIdHeader] = useState<string | null>(null);
const { t } = useLocale();
@@ -141,6 +143,27 @@ export const BookEventForm = ({
/>
</div>
)}
{isPlatformBookerEmbed && (
<div className="text-subtle my-3 w-full text-xs">
{t("proceeding_agreement")}{" "}
<Link
className="text-emphasis hover:underline"
key="terms"
href={`${WEBSITE_TERMS_URL}`}
target="_blank">
{t("terms")}
</Link>{" "}
{t("and")}{" "}
<Link
className="text-emphasis hover:underline"
key="privacy"
href={`${WEBSITE_PRIVACY_POLICY_URL}`}
target="_blank">
{t("privacy_policy")}
</Link>
.
</div>
)}
<div className="modalsticky mt-auto flex justify-end space-x-2 rtl:space-x-reverse">
{isInstantMeeting ? (
<Button type="submit" color="primary" loading={loadingStates.creatingInstantBooking}>
@@ -154,6 +154,7 @@ export function BaseCalProvider({
isAuth: Boolean(isInit && !error && clientId && currentAccessToken && http.getAuthorizationHeader()),
organizationId: organizationId || stateOrgId || me?.data.organizationId || 0,
userId: me?.data.id,
isEmbed,
...translations,
}}>
<TooltipProvider>{children}</TooltipProvider>
@@ -173,6 +174,7 @@ export function BaseCalProvider({
isRefreshing: false,
...translations,
organizationId: 0,
isEmbed: false,
}}>
<>
<TooltipProvider>{children}</TooltipProvider>
@@ -110,7 +110,7 @@ export function transformApiTeamEventTypeForAtom(
entity: BookerPlatformWrapperAtomProps["entity"] | undefined,
defaultFormValues: BookerPlatformWrapperAtomProps["defaultFormValues"] | undefined
) {
const { lengthInMinutes, locations, hosts, bookingFields, recurrence, ...rest } = eventType;
const { lengthInMinutes, locations, hosts, bookingFields, recurrence, team, ...rest } = eventType;
const isDefault = isDefaultEvent(rest.title);
@@ -131,15 +131,16 @@ export function transformApiTeamEventTypeForAtom(
isDefault,
isDynamic: false,
profile: {
username: "team",
name: "Team",
weekStart: "Sunday",
image: "",
brandColor: null,
darkBrandColor: null,
theme: null,
username: team?.slug ?? "team",
name: team?.name,
weekStart: team?.weekStart ?? "Sunday",
image: team?.logoUrl,
brandColor: team?.brandColor ?? null,
darkBrandColor: team?.darkBrandColor ?? null,
theme: team?.theme ?? null,
bookerLayouts,
},
bannerUrl: team?.bannerUrl,
entity: entity
? {
...entity,
@@ -153,9 +154,9 @@ export function transformApiTeamEventTypeForAtom(
fromRedirectOfNonOrgLink: true,
considerUnpublished: false,
orgSlug: null,
teamSlug: null,
name: null,
logoUrl: undefined,
teamSlug: team?.slug,
name: team?.name,
logoUrl: team?.logoUrl,
},
hosts: hosts.map((host) => ({
user: {
@@ -31,6 +31,7 @@ export interface IAtomsContext {
};
organizationId: number;
userId?: number;
isEmbed?: boolean;
}
export const AtomsContext = createContext({
@@ -42,6 +43,7 @@ export const AtomsContext = createContext({
getClient: () => {
return;
},
isEmbed: false,
} as IAtomsContext);
export const useAtomsContext = () => useContext(AtomsContext);
@@ -0,0 +1,6 @@
import { useAtomsContext } from "./useAtomsContext";
export const useIsPlatformBookerEmbed = () => {
const context = useAtomsContext();
return Boolean(context?.clientId && context?.isEmbed);
};
+1
View File
@@ -16,3 +16,4 @@ export { Shell } from "./src/components/ui/shell";
export { AddMembersWithSwitchWebWrapper } from "./add-members-switch/AddMembersWithSwitchWebWrapper";
export { AddMembersWithSwitchPlatformWrapper } from "./add-members-switch/AddMembersWithSwitchPlatformWrapper";
export { markdownToSafeHTML } from "./lib/markdownToSafeHTML";
export { useIsPlatformBookerEmbed } from "./hooks/useIsPlatformBookerEmbed";
@@ -108,6 +108,52 @@ class User_2024_06_14 {
metadata!: Record<string, unknown>;
}
class EventTypeTeam {
@IsInt()
@DocsProperty()
id!: number;
@IsString()
@IsOptional()
@DocsProperty()
slug?: string;
@IsString()
@IsOptional()
@DocsProperty()
bannerUrl?: string;
@IsString()
@IsOptional()
@DocsProperty()
name?: string;
@IsString()
@IsOptional()
@DocsProperty()
logoUrl?: string;
@IsString()
@IsOptional()
@DocsProperty()
weekStart?: string;
@IsString()
@IsOptional()
@DocsProperty()
brandColor?: string;
@IsString()
@IsOptional()
@DocsProperty()
darkBrandColor?: string;
@IsString()
@IsOptional()
@DocsProperty()
theme?: string;
}
@ApiExtraModels(
OutputAddressLocation_2024_06_14,
OutputLinkLocation_2024_06_14,
@@ -408,9 +454,8 @@ export class EventTypeOutput_2024_06_14 extends BaseEventTypeOutput_2024_06_14 {
export class TeamEventTypeOutput_2024_06_14 extends BaseEventTypeOutput_2024_06_14 {
@IsInt()
@IsOptional()
@ApiPropertyOptional({ nullable: true })
teamId?: number | null;
@DocsProperty()
teamId!: number;
@IsInt()
@IsOptional()
@@ -446,8 +491,8 @@ export class TeamEventTypeOutput_2024_06_14 extends BaseEventTypeOutput_2024_06_
@ApiPropertyOptional()
hideCalendarEventDetails?: boolean;
@IsString()
@IsOptional()
@ApiPropertyOptional()
bannerUrl?: string;
@ValidateNested()
@Type(() => EventTypeTeam)
@DocsProperty()
team!: EventTypeTeam;
}