diff --git a/packages/platform/atoms/cal-provider/BaseCalProvider.tsx b/packages/platform/atoms/cal-provider/BaseCalProvider.tsx index 7e7df6972d..c76ece1178 100644 --- a/packages/platform/atoms/cal-provider/BaseCalProvider.tsx +++ b/packages/platform/atoms/cal-provider/BaseCalProvider.tsx @@ -2,7 +2,11 @@ import { TooltipProvider } from "@radix-ui/react-tooltip"; import { useState } from "react"; import { useCallback } from "react"; +import deTranslations from "@calcom/web/public/static/locales/de/common.json"; import enTranslations from "@calcom/web/public/static/locales/en/common.json"; +import esTranslations from "@calcom/web/public/static/locales/es/common.json"; +import frTranslations from "@calcom/web/public/static/locales/fr/common.json"; +import ptBrTranslations from "@calcom/web/public/static/locales/pt-BR/common.json"; import { AtomsContext } from "../hooks/useAtomsContext"; import { useOAuthClient } from "../hooks/useOAuthClient"; @@ -11,16 +15,26 @@ import { useTimezone } from "../hooks/useTimezone"; import { useUpdateUserTimezone } from "../hooks/useUpdateUserTimezone"; import http from "../lib/http"; import { Toaster } from "../src/components/ui/toaster"; -import type { CalProviderProps } from "./CalProvider"; - -type translationKeys = keyof typeof enTranslations; +import { EN } from "./CalProvider"; +import type { + CalProviderProps, + CalProviderLanguagesType, + translationKeys, + enTranslationKeys, + frTranslationKeys, + ptBrTranslationKeys, + deTranslationKeys, + esTranslationKeys, +} from "./CalProvider"; export function BaseCalProvider({ clientId, accessToken, options, children, + labels, autoUpdateTimezone, + language = EN, onTimezoneChange, }: CalProviderProps) { const [error, setError] = useState(""); @@ -64,7 +78,7 @@ export function BaseCalProvider({ const translations = { t: (key: string, values: Record) => { - let translation = String(enTranslations[key as translationKeys] ?? ""); + let translation = labels?.[key as keyof typeof labels] ?? String(getTranslation(key, language) ?? ""); if (!translation) { return ""; } @@ -84,9 +98,9 @@ export function BaseCalProvider({ return replaceOccurrences(translation, enTranslations) ?? ""; }, i18n: { - language: "en", - defaultLocale: "en", - locales: ["en"], + language: language, + defaultLocale: language, + locales: [language], exists: (key: translationKeys | string) => Boolean(enTranslations[key as translationKeys]), }, }; @@ -139,3 +153,20 @@ function replaceOccurrences(input: string, replacementMap: { [key: string]: stri return match; }); } + +function getTranslation(key: string, language: CalProviderLanguagesType) { + switch (language) { + case "en": + return enTranslations[key as enTranslationKeys]; + case "fr": + return frTranslations[key as frTranslationKeys]; + case "pt-BR": + return ptBrTranslations[key as ptBrTranslationKeys]; + case "de": + return deTranslations[key as deTranslationKeys]; + case "es": + return esTranslations[key as esTranslationKeys]; + default: + return enTranslations[key as enTranslationKeys]; + } +} diff --git a/packages/platform/atoms/cal-provider/CalProvider.tsx b/packages/platform/atoms/cal-provider/CalProvider.tsx index 581bfef67b..0aa79c719f 100644 --- a/packages/platform/atoms/cal-provider/CalProvider.tsx +++ b/packages/platform/atoms/cal-provider/CalProvider.tsx @@ -3,12 +3,64 @@ import { useEffect, type ReactNode } from "react"; import type { API_VERSIONS_ENUM } from "@calcom/platform-constants"; import { VERSION_2024_06_14 } from "@calcom/platform-constants"; +import type deTranslations from "@calcom/web/public/static/locales/de/common.json"; +import type enTranslations from "@calcom/web/public/static/locales/en/common.json"; +import type esTranslations from "@calcom/web/public/static/locales/es/common.json"; +import type frTranslations from "@calcom/web/public/static/locales/fr/common.json"; +import type ptBrTranslations from "@calcom/web/public/static/locales/pt-BR/common.json"; import http from "../lib/http"; import { BaseCalProvider } from "./BaseCalProvider"; +export type enTranslationKeys = keyof typeof enTranslations; +export type frTranslationKeys = keyof typeof frTranslations; +export type deTranslationKeys = keyof typeof deTranslations; +export type esTranslationKeys = keyof typeof esTranslations; +export type ptBrTranslationKeys = keyof typeof ptBrTranslations; +export type translationKeys = + | enTranslationKeys + | frTranslationKeys + | deTranslationKeys + | esTranslationKeys + | ptBrTranslationKeys; + +const FR = "fr"; +export const EN = "en"; +const PT_BR = "pt-BR"; +const DE = "de"; +const ES = "es"; +export const CAL_PROVIDER_LANGUAUES = [FR, EN, PT_BR, DE, ES] as const; +export type CalProviderLanguagesType = (typeof CAL_PROVIDER_LANGUAUES)[number]; + const queryClient = new QueryClient(); +type i18nFrProps = { + labels?: Partial>; + language?: "fr"; +}; + +type i18nEnProps = { + labels?: Partial>; + language?: "en"; +}; + +type i18nPtBrProps = { + labels?: Partial>; + language?: "pt-BR"; +}; + +type i18nDeProps = { + labels?: Partial>; + language?: "de"; +}; + +type i18nEsProps = { + labels?: Partial>; + language?: "es"; +}; + +export type i18nProps = i18nFrProps | i18nEnProps | i18nPtBrProps | i18nDeProps | i18nEsProps; + export type CalProviderProps = { children?: ReactNode; clientId: string; @@ -17,7 +69,7 @@ export type CalProviderProps = { autoUpdateTimezone?: boolean; onTimezoneChange?: () => void; version?: API_VERSIONS_ENUM; -}; +} & i18nProps; /** * Renders a CalProvider component. @@ -39,6 +91,8 @@ export function CalProvider({ options, children, autoUpdateTimezone = true, + labels, + language = "en", onTimezoneChange, version = VERSION_2024_06_14, }: CalProviderProps) { @@ -60,7 +114,9 @@ export function CalProvider({ clientId={clientId} accessToken={accessToken} options={options} - version={version}> + version={version} + labels={labels as Record} + language={language}> {children} diff --git a/packages/platform/atoms/hooks/useAtomsContext.ts b/packages/platform/atoms/hooks/useAtomsContext.ts index 47a9c0d2d9..1cbf0113ec 100644 --- a/packages/platform/atoms/hooks/useAtomsContext.ts +++ b/packages/platform/atoms/hooks/useAtomsContext.ts @@ -1,10 +1,8 @@ import { createContext, useContext } from "react"; -import type enTranslations from "@calcom/web/public/static/locales/en/common.json"; - +import type { translationKeys, CalProviderLanguagesType } from "../cal-provider/CalProvider"; import type http from "../lib/http"; -type translationKeys = keyof typeof enTranslations; export interface IAtomsContextOptions { refreshUrl?: string; apiUrl: string; @@ -23,9 +21,9 @@ export interface IAtomsContext { isInit: boolean; t: (key: string, values: Record) => string; i18n: { - language: string; - defaultLocale: string; - locales: string[]; + language: CalProviderLanguagesType; + defaultLocale: CalProviderLanguagesType; + locales: CalProviderLanguagesType[]; exists: (key: translationKeys | string) => boolean; }; }