fix language issue on booking page (#2973)

apps/web/components/booking/pages/BookingPage.tsx

@@ -70,7 +70,9 @@ const PhoneInput = dynamic(
   () => import("@components/ui/form/PhoneInput")
 ) as unknown as typeof PhoneInputType;
 
-type BookingPageProps = BookPageProps | TeamBookingPageProps | HashLinkPageProps;
+type BookingPageProps = (BookPageProps | TeamBookingPageProps | HashLinkPageProps) & {
+  locationLabels: Record<LocationType, string>;
+};
 
 type BookingFormValues = {
   name: string;

apps/web/pages/[user]/book.tsx

@@ -21,7 +21,6 @@ import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import BookingPage from "@components/booking/pages/BookingPage";
 
-import { getTranslation } from "@server/lib/i18n";
 import { ssrInit } from "@server/lib/ssr";
 
 dayjs.extend(utc);
@@ -31,6 +30,8 @@ export type BookPageProps = inferSSRProps<typeof getServerSideProps>;
 
 export default function Book(props: BookPageProps) {
   const { t } = useLocale();
+  const locationLabels = getLocationLabels(t);
+
   return props.away ? (
     <div className="h-screen dark:bg-neutral-900">
       <main className="mx-auto max-w-3xl px-4 py-24">
@@ -62,7 +63,7 @@ export default function Book(props: BookPageProps) {
       </main>
     </div>
   ) : (
-    <BookingPage {...props} />
+    <BookingPage {...props} locationLabels={locationLabels} />
   );
 }
 
@@ -215,8 +216,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
         eventName: null,
       };
 
-  const t = await getTranslation(context.locale ?? "en", "common");
-
   // Checking if number of recurring event ocurrances is valid against event type configuration
   const recurringEventCount =
     (eventType.recurringEvent?.count &&
@@ -229,7 +228,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   return {
     props: {
       away: user.away,
-      locationLabels: getLocationLabels(t),
       profile,
       eventType: eventTypeObject,
       booking,

apps/web/pages/d/[link]/book.tsx

@@ -6,6 +6,7 @@ import { GetServerSidePropsContext } from "next";
 import { JSONObject } from "superjson/dist/types";
 
 import { getLocationLabels } from "@calcom/app-store/utils";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RecurringEvent } from "@calcom/types/Calendar";
 
 import { asStringOrThrow, asStringOrNull } from "@lib/asStringOrNull";
@@ -14,7 +15,6 @@ import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import BookingPage from "@components/booking/pages/BookingPage";
 
-import { getTranslation } from "@server/lib/i18n";
 import { ssrInit } from "@server/lib/ssr";
 
 dayjs.extend(utc);
@@ -23,7 +23,10 @@ dayjs.extend(timezone);
 export type HashLinkPageProps = inferSSRProps<typeof getServerSideProps>;
 
 export default function Book(props: HashLinkPageProps) {
-  return <BookingPage {...props} />;
+  const { t } = useLocale();
+  const locationLabels = getLocationLabels(t);
+
+  return <BookingPage {...props} locationLabels={locationLabels} />;
 }
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
@@ -150,8 +153,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     eventName: null,
   };
 
-  const t = await getTranslation(context.locale ?? "en", "common");
-
   // Checking if number of recurring event ocurrances is valid against event type configuration
   const recurringEventCount =
     (eventTypeObject?.recurringEvent?.count &&
@@ -163,7 +164,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 
   return {
     props: {
-      locationLabels: getLocationLabels(t),
       profile,
       eventType: eventTypeObject,
       booking: null,

apps/web/pages/team/[slug]/book.tsx

@@ -2,6 +2,7 @@ import { GetServerSidePropsContext } from "next";
 import { JSONObject } from "superjson/dist/types";
 
 import { getLocationLabels } from "@calcom/app-store/utils";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RecurringEvent } from "@calcom/types/Calendar";
 
 import { asStringOrNull, asStringOrThrow } from "@lib/asStringOrNull";
@@ -11,12 +12,13 @@ import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import BookingPage from "@components/booking/pages/BookingPage";
 
-import { getTranslation } from "@server/lib/i18n";
-
 export type TeamBookingPageProps = inferSSRProps<typeof getServerSideProps>;
 
 export default function TeamBookingPage(props: TeamBookingPageProps) {
-  return <BookingPage {...props} />;
+  const { t } = useLocale();
+  const locationLabels = getLocationLabels(t);
+
+  return <BookingPage {...props} locationLabels={locationLabels} />;
 }
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
@@ -90,8 +92,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     booking = await getBooking(prisma, context.query.rescheduleUid as string);
   }
 
-  const t = await getTranslation(context.locale ?? "en", "common");
-
   // Checking if number of recurring event ocurrances is valid against event type configuration
   const recurringEventCount =
     (eventType.recurringEvent?.count &&
@@ -103,7 +103,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 
   return {
     props: {
-      locationLabels: getLocationLabels(t),
       profile: {
         ...eventTypeObject.team,
         // FIXME: This slug is used as username on success page which is wrong. This is correctly set as username for user booking.