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:
1 parent
c1334475c5
commit
c732c06835
12 files changed
+219
-32
No files matched your search
+24
-2
@@ -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,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
|
||||
+12
-11
@@ -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);
|
||||
};
|
||||
@@ -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";
|
||||
+52
-7
@@ -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;
|
||||
}
|
||||
Reference in new issue
Block a user