From c732c068351917f6c08c2ab2784d880fda33bee1 Mon Sep 17 00:00:00 2001 From: Rajiv Sahal Date: Tue, 17 Dec 2024 17:37:47 +0530 Subject: [PATCH] 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 --- .../organizations-event-types.repository.ts | 26 +++++++- .../services/event-types/output.service.ts | 17 +++++- apps/api/v2/swagger/documentation.json | 46 +++++++++++++-- apps/web/public/static/locales/en/common.json | 2 + docs/api-reference/v2/openapi.json | 44 ++++++++++++-- .../BookEventForm/BookEventForm.tsx | 23 ++++++++ .../atoms/cal-provider/BaseCalProvider.tsx | 2 + .../transformApiEventTypeForAtom.ts | 23 ++++---- .../platform/atoms/hooks/useAtomsContext.ts | 2 + .../atoms/hooks/useIsPlatformBookerEmbed.ts | 6 ++ packages/platform/atoms/monorepo.ts | 1 + .../outputs/event-type.output.ts | 59 ++++++++++++++++--- 12 files changed, 219 insertions(+), 32 deletions(-) create mode 100644 packages/platform/atoms/hooks/useIsPlatformBookerEmbed.ts diff --git a/apps/api/v2/src/modules/organizations/repositories/organizations-event-types.repository.ts b/apps/api/v2/src/modules/organizations/repositories/organizations-event-types.repository.ts index e03b96c0fd..4db11de61c 100644 --- a/apps/api/v2/src/modules/organizations/repositories/organizations-event-types.repository.ts +++ b/apps/api/v2/src/modules/organizations/repositories/organizations-event-types.repository.ts @@ -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, + }, + }, }, }); } diff --git a/apps/api/v2/src/modules/organizations/services/event-types/output.service.ts b/apps/api/v2/src/modules/organizations/services/event-types/output.service.ts index 08b2df2463..213a21c433 100644 --- a/apps/api/v2/src/modules/organizations/services/event-types/output.service.ts +++ b/apps/api/v2/src/modules/organizations/services/event-types/output.service.ts @@ -12,7 +12,10 @@ type EventTypeRelations = { schedule: Schedule | null; hosts: Host[]; destinationCalendar?: DestinationCalendar | null; - team?: Pick | 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, + }, }; } diff --git a/apps/api/v2/swagger/documentation.json b/apps/api/v2/swagger/documentation.json index 97fe01c4f3..b04def8b28 100644 --- a/apps/api/v2/swagger/documentation.json +++ b/apps/api/v2/swagger/documentation.json @@ -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": { diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index d86ae5b650..5e725d5d55 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -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 and <1>Privacy Policy.", + "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", diff --git a/docs/api-reference/v2/openapi.json b/docs/api-reference/v2/openapi.json index 4976601980..122165065b 100644 --- a/docs/api-reference/v2/openapi.json +++ b/docs/api-reference/v2/openapi.json @@ -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": { diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx index 5cc3ed276b..7cc09ba5ca 100644 --- a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx +++ b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx @@ -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(null); const { t } = useLocale(); @@ -141,6 +143,27 @@ export const BookEventForm = ({ /> )} + {isPlatformBookerEmbed && ( +
+ {t("proceeding_agreement")}{" "} + + {t("terms")} + {" "} + {t("and")}{" "} + + {t("privacy_policy")} + + . +
+ )}
{isInstantMeeting ? (