fix: bookerEmbed atom (calcom#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
hit-pay · Jan 10, 2025 · feee245 · feee245
1 parent d121989
commit feee245
Show file tree

Hide file tree

Showing 12 changed files with 219 additions and 32 deletions.
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
@@ -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
@@ -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,
+      },
     };
   }
 

diff --git 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
@@ -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",

diff --git 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
@@ -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}>

diff --git a/packages/platform/atoms/cal-provider/BaseCalProvider.tsx b/packages/platform/atoms/cal-provider/BaseCalProvider.tsx
@@ -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>

diff --git a/packages/platform/atoms/event-types/atom-api-transformers/transformApiEventTypeForAtom.ts b/packages/platform/atoms/event-types/atom-api-transformers/transformApiEventTypeForAtom.ts
@@ -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: {

diff --git a/packages/platform/atoms/hooks/useAtomsContext.ts b/packages/platform/atoms/hooks/useAtomsContext.ts
@@ -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);
diff --git a/packages/platform/atoms/hooks/useIsPlatformBookerEmbed.ts b/packages/platform/atoms/hooks/useIsPlatformBookerEmbed.ts
@@ -0,0 +1,6 @@
+import { useAtomsContext } from "./useAtomsContext";
+
+export const useIsPlatformBookerEmbed = () => {
+  const context = useAtomsContext();
+  return Boolean(context?.clientId && context?.isEmbed);
+};
diff --git a/packages/platform/atoms/monorepo.ts b/packages/platform/atoms/monorepo.ts
@@ -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";