fix: client locale inference (calcom#10850)

apps/web/components/I18nLanguageHandler.tsx

@@ -1,15 +1,14 @@
+import parser from "accept-language-parser";
 import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import { useEffect } from "react";
 
+import { CALCOM_VERSION } from "@calcom/lib/constants";
 import { trpc } from "@calcom/trpc/react";
 
-// eslint-disable-next-line turbo/no-undeclared-env-vars
-const vercelCommitHash = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA || "NA";
-
-export function useViewerI18n(locale: string) {
+function useViewerI18n(locale: string) {
   return trpc.viewer.public.i18n.useQuery(
-    { locale, CalComVersion: vercelCommitHash },
+    { locale, CalComVersion: CALCOM_VERSION },
     {
       /**
        * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
@@ -21,13 +20,32 @@ export function useViewerI18n(locale: string) {
   );
 }
 
+function useClientLocale(locales: string[]) {
+  const session = useSession();
+  // If the user is logged in, use their locale
+  if (session.data?.user.locale) return session.data.user.locale;
+  // If the user is not logged in, use the browser locale
+  if (typeof window !== "undefined") {
+    // This is the only way I found to ensure the prefetched locale is used on first render
+    // FIXME: Find a better way to pick the best matching locale from the browser
+    return parser.pick(locales, window.navigator.language, { loose: true }) || window.navigator.language;
+  }
+  // If the browser is not available, use English
+  return "en";
+}
+
+export function useClientViewerI18n(locales: string[]) {
+  const clientLocale = useClientLocale(locales);
+  return useViewerI18n(clientLocale);
+}
+
 /**
  * Auto-switches locale client-side to the logged in user's preference
  */
-const I18nLanguageHandler = () => {
-  const session = useSession();
+const I18nLanguageHandler = (props: { locales: string[] }) => {
+  const { locales } = props;
   const { i18n } = useTranslation("common");
-  const locale = useViewerI18n(session.data?.user.locale || "en").data?.locale || i18n.language;
+  const locale = useClientViewerI18n(locales).data?.locale || i18n.language;
 
   useEffect(() => {
     // bail early when i18n = {}

apps/web/components/PageWrapper.tsx

@@ -6,7 +6,7 @@ import Script from "next/script";
 
 import "@calcom/embed-core/src/embed-iframe";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import { WEBAPP_URL, IS_CALCOM } from "@calcom/lib/constants";
+import { IS_CALCOM, WEBAPP_URL } from "@calcom/lib/constants";
 import { buildCanonical } from "@calcom/lib/next-seo.config";
 
 import type { AppProps } from "@lib/app-providers";
@@ -72,7 +72,7 @@ function PageWrapper(props: AppProps) {
         }
         {...seoConfig.defaultNextSeo}
       />
-      <I18nLanguageHandler />
+      <I18nLanguageHandler locales={props.router.locales || []} />
       <Script
         nonce={nonce}
         id="page-status"

apps/web/lib/app-providers.tsx

@@ -20,7 +20,7 @@ import { MetaProvider } from "@calcom/ui";
 import useIsBookingPage from "@lib/hooks/useIsBookingPage";
 import type { WithNonceProps } from "@lib/withNonce";
 
-import { useViewerI18n } from "@components/I18nLanguageHandler";
+import { useClientViewerI18n } from "@components/I18nLanguageHandler";
 
 const I18nextAdapter = appWithTranslation<
   NextJsAppProps<SSRConfig> & {
@@ -69,11 +69,8 @@ const CustomI18nextProvider = (props: AppPropsWithoutNonce) => {
   /**
    * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
    **/
-  const session = useSession();
-  const localeToUse = session.data?.user.locale ?? "en";
-  const { i18n, locale } = useViewerI18n(localeToUse).data ?? {
-    locale: "en",
-  };
+  const clientViewerI18n = useClientViewerI18n(props.router.locales || []);
+  const { i18n, locale } = clientViewerI18n.data || {};
 
   const passedProps = {
     ...props,

apps/web/next.config.js

@@ -3,6 +3,7 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 const os = require("os");
 const englishTranslation = require("./public/static/locales/en/common.json");
 const { withAxiom } = require("next-axiom");
+const { version } = require("./package.json");
 const { i18n } = require("./next-i18next.config");
 const {
   orgHostPath,
@@ -14,6 +15,9 @@ const {
 if (!process.env.NEXTAUTH_SECRET) throw new Error("Please set NEXTAUTH_SECRET");
 if (!process.env.CALENDSO_ENCRYPTION_KEY) throw new Error("Please set CALENDSO_ENCRYPTION_KEY");
 
+// To be able to use the version in the app without having to import package.json
+process.env.NEXT_PUBLIC_CALCOM_VERSION = version;
+
 // So we can test deploy previews preview
 if (process.env.VERCEL_URL && !process.env.NEXT_PUBLIC_WEBAPP_URL) {
   process.env.NEXT_PUBLIC_WEBAPP_URL = "https://" + process.env.VERCEL_URL;

apps/web/server/lib/ssg.ts

@@ -2,17 +2,14 @@ import type { GetStaticPropsContext } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import superjson from "superjson";
 
+import { CALCOM_VERSION } from "@calcom/lib/constants";
 import prisma from "@calcom/prisma";
 import { createProxySSGHelpers } from "@calcom/trpc/react/ssg";
 import { appRouter } from "@calcom/trpc/server/routers/_app";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { i18n } = require("@calcom/config/next-i18next.config");
 
-// TODO: Consolidate this constant
-// eslint-disable-next-line turbo/no-undeclared-env-vars
-const CalComVersion = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA || "NA";
-
 /**
  * Initialize static site rendering tRPC helpers.
  * Provides a method to prefetch tRPC-queries in a `getStaticProps`-function.
@@ -41,7 +38,7 @@ export async function ssgInit<TParams extends { locale?: string }>(opts: GetStat
   });
 
   // always preload i18n
-  await ssg.viewer.public.i18n.fetch({ locale, CalComVersion });
+  await ssg.viewer.public.i18n.fetch({ locale, CalComVersion: CALCOM_VERSION });
 
   return ssg;
 }

apps/web/server/lib/ssr.ts

@@ -2,15 +2,12 @@ import type { GetServerSidePropsContext } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import superjson from "superjson";
 
-import { getLocaleFromHeaders } from "@calcom/lib/i18n";
+import { CALCOM_VERSION } from "@calcom/lib/constants";
+import { getLocaleFromRequest } from "@calcom/lib/i18n";
 import { createProxySSGHelpers } from "@calcom/trpc/react/ssg";
 import { createContext } from "@calcom/trpc/server/createContext";
 import { appRouter } from "@calcom/trpc/server/routers/_app";
 
-// TODO: Consolidate this constant
-// eslint-disable-next-line turbo/no-undeclared-env-vars
-const CalComVersion = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA || "NA";
-
 /**
  * Initialize server-side rendering tRPC helpers.
  * Provides a method to prefetch tRPC-queries in a `getServerSideProps`-function.
@@ -19,23 +16,24 @@ const CalComVersion = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA || "NA";
  */
 export async function ssrInit(context: GetServerSidePropsContext) {
   const ctx = await createContext(context);
-  const locale = getLocaleFromHeaders(context.req);
-  const i18n = await serverSideTranslations(getLocaleFromHeaders(context.req), ["common", "vital"]);
+  const locale = await getLocaleFromRequest(context.req);
+  const i18n = await serverSideTranslations(locale, ["common", "vital"]);
 
   const ssr = createProxySSGHelpers({
     router: appRouter,
     transformer: superjson,
     ctx: { ...ctx, locale, i18n },
   });
 
-  // always preload "viewer.public.i18n"
-  await ssr.viewer.public.i18n.fetch({ locale, CalComVersion });
-  // So feature flags are available on first render
-  await ssr.viewer.features.map.prefetch();
-  // Provides a better UX to the users who have already upgraded.
-  await ssr.viewer.teams.hasTeamPlan.prefetch();
-
-  await ssr.viewer.public.session.prefetch();
+  await Promise.allSettled([
+    // always preload "viewer.public.i18n"
+    ssr.viewer.public.i18n.prefetch({ locale, CalComVersion: CALCOM_VERSION }),
+    // So feature flags are available on first render
+    ssr.viewer.features.map.prefetch(),
+    // Provides a better UX to the users who have already upgraded.
+    ssr.viewer.teams.hasTeamPlan.prefetch(),
+    ssr.viewer.public.session.prefetch(),
+  ]);
 
   return ssr;
 }

packages/config/next-i18next.config.js

@@ -5,32 +5,32 @@ const config = {
   i18n: {
     defaultLocale: "en",
     locales: [
+      "ar",
+      "cs",
+      "da",
+      "de",
       "en",
+      "es-419",
+      "es",
       "fr",
+      "he",
       "it",
-      "ru",
-      "es",
-      "de",
-      "pt",
-      "ro",
-      "nl",
-      "pt-BR",
-      "es-419",
-      "ko",
       "ja",
+      "ko",
+      "nl",
+      "no",
       "pl",
-      "ar",
-      "he",
-      "zh-CN",
-      "zh-TW",
-      "cs",
+      "pt-BR",
+      "pt",
+      "ro",
+      "ru",
       "sr",
       "sv",
-      "vi",
-      "no",
-      "uk",
-      "da",
       "tr",
+      "uk",
+      "vi",
+      "zh-CN",
+      "zh-TW",
     ],
   },
   reloadOnPrerender: process.env.NODE_ENV !== "production",

packages/lib/constants.ts

@@ -93,3 +93,4 @@ export const ALLOWED_HOSTNAMES = JSON.parse(`[${process.env.ALLOWED_HOSTNAMES ||
 export const RESERVED_SUBDOMAINS = JSON.parse(`[${process.env.RESERVED_SUBDOMAINS || ""}]`) as string[];
 
 export const ORGANIZATION_MIN_SEATS = 30;
+export const CALCOM_VERSION = process.env.NEXT_PUBLIC_CALCOM_VERSION as string;

packages/lib/i18n.ts

@@ -1,15 +1,22 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import parser from "accept-language-parser";
-import type { IncomingMessage } from "http";
+import type { GetServerSidePropsContext, NextApiRequest } from "next";
 
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import type { Maybe } from "@calcom/trpc/server";
 
 const { i18n } = require("@calcom/config/next-i18next.config");
 
-export function getLocaleFromHeaders(req: IncomingMessage): string {
+export async function getLocaleFromRequest(
+  req: NextApiRequest | GetServerSidePropsContext["req"]
+): Promise<string> {
+  const session = await getServerSession({ req });
+  if (session?.user?.locale) return session.user.locale;
   let preferredLocale: string | null | undefined;
   if (req.headers["accept-language"]) {
-    preferredLocale = parser.pick(i18n.locales, req.headers["accept-language"]) as Maybe<string>;
+    preferredLocale = parser.pick(i18n.locales, req.headers["accept-language"], {
+      loose: true,
+    }) as Maybe<string>;
   }
   return preferredLocale ?? i18n.defaultLocale;
 }

packages/trpc/server/createContext.ts

@@ -3,7 +3,7 @@ import type { GetServerSidePropsContext, NextApiRequest, NextApiResponse } from
 import type { Session } from "next-auth";
 import type { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
-import { getLocaleFromHeaders } from "@calcom/lib/i18n";
+import { getLocaleFromRequest } from "@calcom/lib/i18n";
 import prisma from "@calcom/prisma";
 import type { SelectedCalendar, User as PrismaUser } from "@calcom/prisma/client";
 
@@ -62,7 +62,7 @@ export async function createContextInner(opts: CreateInnerContextOptions) {
  * @link https://trpc.io/docs/context
  */
 export const createContext = async ({ req, res }: CreateContextOptions, sessionGetter?: GetSessionFn) => {
-  const locale = getLocaleFromHeaders(req);
+  const locale = await getLocaleFromRequest(req);
   const session = !!sessionGetter ? await sessionGetter({ req, res }) : null;
   const contextInner = await createContextInner({ locale, session });
   return {

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

@@ -1,7 +1,14 @@
+import parser from "accept-language-parser";
 import { z } from "zod";
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { i18n } = require("@calcom/config/next-i18next.config");
+
 export const i18nInputSchema = z.object({
-  locale: z.string(),
+  locale: z
+    .string()
+    .min(2)
+    .transform((locale) => parser.pick<string>(i18n.locales, locale, { loose: true }) || locale),
   CalComVersion: z.string(),
 });
 

packages/ui/components/credits/Credits.tsx

@@ -1,16 +1,12 @@
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
-import { COMPANY_NAME, IS_SELF_HOSTED, IS_CALCOM } from "@calcom/lib/constants";
-
-// Relative to prevent triggering a recompile
-import pkg from "../../../../apps/web/package.json";
+import { CALCOM_VERSION, COMPANY_NAME, IS_CALCOM, IS_SELF_HOSTED } from "@calcom/lib/constants";
 
 // eslint-disable-next-line turbo/no-undeclared-env-vars
 const vercelCommitHash = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
 const commitHash = vercelCommitHash ? `-${vercelCommitHash.slice(0, 7)}` : "";
-
-export const CalComVersion = `v.${pkg.version}-${!IS_SELF_HOSTED ? "h" : "sh"}`;
+const CalComVersion = `v.${CALCOM_VERSION}-${!IS_SELF_HOSTED ? "h" : "sh"}`;
 
 export default function Credits() {
   const [hasMounted, setHasMounted] = useState(false);