Files
calendar/packages/lib/hooks/useLocale.ts
T
ec8f9d5f7a feat: option to enforce language for bookingPage (#18782)
* feature eventType specific language or bookingPage language

* chore

* fix type checks

* chore

* chore: remove log

* improvement: this updates in DatePicker is not required with context provider method

* added e2e tests for InterfaceLanguage feature

* corrected prev merge conflict issues

* update to align with hooks usage pattern

* chore

* unrelated auto-formatting changes

* unrelated auto-formatting changes

* unrelated auto-formatting changes

* update to affect interfaceLanguage on success page

* undone prettier changes

* update test for success page translation

* chore

* return null from memo

* fix typecheck error due to atom imports in useLocale

* set default interfaceLanguage as null

* updated to use null instead of constant

* enhancements

* fix latest unit test, use prop instead of useSession hook

* fix build issue

* chore

* fix atom build issue

* fix unit test with reqd mock

* update to use server i18n rendering

* nit

* Move import localeOptions to EventSetupTabWebWrapper

* make sure we only display interface language option in web app

* using customI18nProvider

---------

Co-authored-by: amrit <iamamrit27@gmail.com>
Co-authored-by: Tushar Bhatt <95581504+TusharBhatt1@users.noreply.github.com>
Co-authored-by: Tushar <tusharbhatt0135@gmail.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Ryukemeister <sahalrajiv6900@gmail.com>
Co-authored-by: Rajiv Sahal <sahalrajiv-extc@atharvacoe.ac.in>
Co-authored-by: Benny Joo <sldisek783@gmail.com>
2025-05-18 01:12:26 -04:00

74 lines
2.1 KiB
TypeScript

import { createInstance } from "i18next";
import type { TFunction, i18n } from "i18next";
import { useContext } from "react";
import { useTranslation } from "react-i18next";
import { useAtomsContext } from "@calcom/atoms/hooks/useAtomsContext";
import { AppRouterI18nContext } from "@calcom/web/app/AppRouterI18nProvider";
import { CustomI18nContext } from "@calcom/web/app/CustomI18nProvider";
type useLocaleReturnType = {
i18n: i18n;
t: TFunction;
isLocaleReady: boolean;
};
// @internal
const useClientLocale = (namespace: Parameters<typeof useTranslation>[0] = "common"): useLocaleReturnType => {
const context = useAtomsContext();
const { i18n, t } = useTranslation(namespace);
const isLocaleReady = Object.keys(i18n).length > 0;
if (context?.clientId) {
return { i18n: context.i18n, t: context.t, isLocaleReady: true } as unknown as useLocaleReturnType;
}
return {
i18n,
t,
isLocaleReady,
};
};
// @internal
const serverI18nInstances = new Map();
export const useLocale = (): useLocaleReturnType => {
const appRouterContext = useContext(AppRouterI18nContext);
const customI18nContext = useContext(CustomI18nContext);
const clientI18n = useClientLocale();
if (appRouterContext) {
const { translations, locale, ns } = customI18nContext ?? appRouterContext;
const instanceKey = `${locale}-${ns}`;
// Check if we already have an instance for this locale and namespace
if (!serverI18nInstances.has(instanceKey)) {
const i18n = createInstance();
i18n.init({
lng: locale,
resources: {
[locale]: {
[ns]: translations,
},
},
});
serverI18nInstances.set(instanceKey, {
t: i18n.getFixedT(locale, ns),
isLocaleReady: true,
i18n,
});
}
return serverI18nInstances.get(instanceKey);
}
console.warn(
"useLocale hook is being used outside of App Router - hence this hook will use a global, client-side i18n which can cause a small flicker"
);
return {
t: clientI18n.t,
isLocaleReady: clientI18n.isLocaleReady,
i18n: clientI18n.i18n,
};
};