chore: add i18n to atoms (#15698)

* chore: add i18n to atoms

* fixup! chore: add i18n to atoms

* fixup! fixup! chore: add i18n to atoms

* fixup! Merge branch 'platform-atoms-i18n' of github.com:calcom/cal.com into platform-atoms-i18n

* fixup! Merge branch 'main' into platform-atoms-i18n

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<string>("");
@@ -64,7 +78,7 @@ export function BaseCalProvider({
 
   const translations = {
     t: (key: string, values: Record<string, string | number | null | undefined>) => {
-      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];
+  }
+}

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<Record<frTranslationKeys, string>>;
+  language?: "fr";
+};
+
+type i18nEnProps = {
+  labels?: Partial<Record<enTranslationKeys, string>>;
+  language?: "en";
+};
+
+type i18nPtBrProps = {
+  labels?: Partial<Record<ptBrTranslationKeys, string>>;
+  language?: "pt-BR";
+};
+
+type i18nDeProps = {
+  labels?: Partial<Record<deTranslationKeys, string>>;
+  language?: "de";
+};
+
+type i18nEsProps = {
+  labels?: Partial<Record<esTranslationKeys, string>>;
+  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<translationKeys, string>}
+        language={language}>
         {children}
       </BaseCalProvider>
     </QueryClientProvider>

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, string | number | undefined | null>) => string;
   i18n: {
-    language: string;
-    defaultLocale: string;
-    locales: string[];
+    language: CalProviderLanguagesType;
+    defaultLocale: CalProviderLanguagesType;
+    locales: CalProviderLanguagesType[];
     exists: (key: translationKeys | string) => boolean;
   };
 }