feat: overriding i18n language for event page

apps/web/server/lib/[user]/[type]/getServerSideProps.ts

@@ -8,6 +8,7 @@ import { getBookingForReschedule, getBookingForSeatedEvent } from "@calcom/featu
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import type { getPublicEvent } from "@calcom/features/eventtypes/lib/getPublicEvent";
+import { CALCOM_VERSION } from "@calcom/lib/constants";
 import { getUsernameList } from "@calcom/lib/defaultEvents";
 import { UserRepository } from "@calcom/lib/server/repository/user";
 import slugify from "@calcom/lib/slugify";
@@ -247,6 +248,13 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
       : false
     : user?.allowSEOIndexing;
 
+  if (eventData.userInterfaceLanguage) {
+    ssr.viewer.public.i18n.prefetch({
+      locale: eventData.userInterfaceLanguage,
+      CalComVersion: CALCOM_VERSION,
+    });
+  }
+
   const props: Props = {
     eventData: {
       id: eventData.id,

apps/web/server/lib/ssr.ts

@@ -11,6 +11,7 @@ import { createContext } from "@calcom/trpc/server/createContext";
 import { me } from "@calcom/trpc/server/routers/loggedInViewer/procedures/me";
 import { teamsAndUserProfilesQuery } from "@calcom/trpc/server/routers/loggedInViewer/procedures/teamsAndUserProfilesQuery";
 import { event } from "@calcom/trpc/server/routers/publicViewer/procedures/event";
+import { i18n } from "@calcom/trpc/server/routers/publicViewer/procedures/i18n";
 import { session } from "@calcom/trpc/server/routers/publicViewer/procedures/session";
 import { get } from "@calcom/trpc/server/routers/viewer/eventTypes/procedures/get";
 import { hasTeamPlan } from "@calcom/trpc/server/routers/viewer/teams/procedures/hasTeamPlan";
@@ -31,6 +32,7 @@ const routerSlice = router({
       public: router({
         session,
         event,
+        i18n,
       }),
       teams: router({
         hasTeamPlan,

packages/features/bookings/Booker/Booker.tsx

@@ -11,8 +11,12 @@ import dayjs from "@calcom/dayjs";
 import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param";
 import { useNonEmptyScheduleDays } from "@calcom/features/schedules";
 import classNames from "@calcom/lib/classNames";
+import { CALCOM_VERSION } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { localeOptions } from "@calcom/lib/i18n";
 import { BookerLayouts } from "@calcom/prisma/zod-utils";
+import { trpc } from "@calcom/trpc";
 
 import { VerifyCodeDialog } from "../components/VerifyCodeDialog";
 import { AvailableTimeSlots } from "./components/AvailableTimeSlots";
@@ -151,12 +155,40 @@ const BookerComponent = ({
     }
   };
 
+  const { i18n } = useLocale();
+  const eventUILanguage = useMemo(
+    () => localeOptions.find((locale) => locale.value === event.data?.userInterfaceLanguage)?.value,
+    [event.data?.userInterfaceLanguage]
+  );
+
+  const i18nOverrideQuery = trpc.viewer.public.i18n.useQuery(
+    {
+      locale: eventUILanguage || "en",
+      CalComVersion: CALCOM_VERSION,
+    },
+    {
+      staleTime: Infinity,
+      enabled: !!eventUILanguage,
+    }
+  );
+
+  useEffect(() => {
+    if (eventUILanguage && i18nOverrideQuery.isSuccess) {
+      i18n.addResourceBundle(
+        eventUILanguage,
+        "common",
+        i18nOverrideQuery.data.i18n._nextI18Next?.initialI18nStore[eventUILanguage].common
+      );
+      i18n.changeLanguage(eventUILanguage);
+    }
+  }, [eventUILanguage, i18n, i18nOverrideQuery.data, i18nOverrideQuery.isSuccess]);
+
   useEffect(() => {
-    if (event.isPending) return setBookerState("loading");
+    if (event.isPending || (eventUILanguage && i18nOverrideQuery.isPending)) return setBookerState("loading");
     if (!selectedDate) return setBookerState("selecting_date");
     if (!selectedTimeslot) return setBookerState("selecting_time");
     return setBookerState("booking");
-  }, [event, selectedDate, selectedTimeslot, setBookerState]);
+  }, [event, selectedDate, selectedTimeslot, setBookerState, i18nOverrideQuery.isPending, eventUILanguage]);
 
   const slot = getQueryParam("slot");
   useEffect(() => {

packages/features/bookings/types.ts

@@ -54,6 +54,7 @@ export type BookerEvent = Pick<
   | "instantMeetingParameters"
   | "fieldTranslations"
   | "autoTranslateDescriptionEnabled"
+  | "userInterfaceLanguage"
 > & { users: BookerEventUser[]; showInstantEventConnectNowModal: boolean } & { profile: BookerEventProfile };
 
 export type ValidationErrors<T extends object> = { key: FieldPath<T>; error: ErrorOption }[];

packages/features/eventtypes/lib/getPublicEvent.ts

@@ -141,6 +141,7 @@ const publicEventSelect = Prisma.validator<Prisma.EventTypeSelect>()({
   hidden: true,
   assignAllTeamMembers: true,
   rescheduleWithSameRoundRobinHost: true,
+  userInterfaceLanguage: true,
 });
 
 export async function isCurrentlyAvailable({
@@ -460,6 +461,7 @@ export const getPublicEvent = async (
   }
   return {
     ...eventWithUserProfiles,
+    userInterfaceLanguage: event.userInterfaceLanguage,
     bookerLayouts: bookerLayoutsSchema.parse(eventMetaData?.bookerLayouts || null),
     description: markdownToSafeHTML(eventWithUserProfiles.description),
     metadata: eventMetaData,

packages/lib/defaultEvents.ts

@@ -122,6 +122,7 @@ const commons = {
   fieldTranslations: [],
   maxLeadThreshold: null,
   useEventLevelSelectedCalendars: false,
+  userInterfaceLanguage: null,
 };
 
 export const dynamicEvent = {

packages/trpc/server/routers/publicViewer/_router.tsx

@@ -2,9 +2,9 @@ import publicProcedure from "../../procedures/publicProcedure";
 import { importHandler, router } from "../../trpc";
 import { slotsRouter } from "../viewer/slots/_router";
 import { ZUserEmailVerificationRequiredSchema } from "./checkIfUserEmailVerificationRequired.schema";
-import { i18nInputSchema } from "./i18n.schema";
 import { ZMarkHostAsNoShowInputSchema } from "./markHostAsNoShow.schema";
 import { event } from "./procedures/event";
+import { i18n } from "./procedures/i18n";
 import { session } from "./procedures/session";
 import { ZSamlTenantProductInputSchema } from "./samlTenantProduct.schema";
 import { ZStripeCheckoutSessionInputSchema } from "./stripeCheckoutSession.schema";
@@ -17,10 +17,7 @@ const namespaced = (s: string) => `${NAMESPACE}.${s}`;
 // things that unauthenticated users can query about themselves
 export const publicViewerRouter = router({
   session,
-  i18n: publicProcedure.input(i18nInputSchema).query(async (opts) => {
-    const handler = await importHandler(namespaced("i18n"), () => import("./i18n.handler"));
-    return handler(opts);
-  }),
+  i18n: i18n,
   countryCode: publicProcedure.query(async (opts) => {
     const handler = await importHandler(namespaced("countryCode"), () => import("./countryCode.handler"));
     return handler(opts);

packages/trpc/server/routers/publicViewer/procedures/i18n.ts

@@ -0,0 +1,11 @@
+import publicProcedure from "../../../procedures/publicProcedure";
+import { importHandler } from "../../../trpc";
+import { i18nInputSchema } from "../i18n.schema";
+
+const NAMESPACE = "publicViewer";
+const namespaced = (s: string) => `${NAMESPACE}.${s}`;
+
+export const i18n = publicProcedure.input(i18nInputSchema).query(async (opts) => {
+  const handler = await importHandler(namespaced("i18n"), () => import("../i18n.handler"));
+  return handler(opts);
+});