feat: add using translations v2

src/api/api.ts

@@ -17,7 +17,8 @@ import {
   AICompatCategories,
   AICompats,
   AIRequests,
-  UserCallbacks
+  UserCallbacks,
+  Translations
 } from './resources'
 
 const api = {
@@ -42,6 +43,7 @@ const api = {
   getAiRequest: createMethod<AIRequests.Payload, AIRequests.Response>(AIRequests.createRequest),
   createUserCallbacks: createMethod<UserCallbacks.PayloadPost, UserCallbacks.Response>(UserCallbacks.createRequestPost),
   getUserCallbacks: createMethod<UserCallbacks.PayloadGet, UserCallbacks.Response>(UserCallbacks.createRequestGet),
+  getTranslations: createMethod<Translations.Payload, Translations.Response>(Translations.createRequest),
 }
 
 export type ApiContextValue = typeof api

src/api/resources/Translations.ts

@@ -0,0 +1,20 @@
+import routes from "@/routes";
+import { getBaseHeaders } from "../utils";
+
+export type Payload = null
+
+export interface Response {
+  translations: Translation[];
+  meta: string;
+}
+
+export interface Translation {
+  key: string;
+  value: string;
+}
+
+export const createRequest = (): Request => {
+  const url = new URL(routes.server.getTranslations());
+
+  return new Request(url, { method: "GET", headers: getBaseHeaders() });
+};

src/api/resources/index.ts

@@ -16,3 +16,4 @@ export * as AICompatCategories from './AICompatCategories'
 export * as AICompats from './AICompats'
 export * as AIRequests from './AIRequests'
 export * as UserCallbacks from './UserCallbacks'
+export * as Translations from './Translations'

src/init.tsx

@@ -1,40 +1,52 @@
-import React from 'react'
+import React from "react";
-import i18next from 'i18next'
+import i18next from "i18next";
-import ReactPostprocessor from 'i18next-react-postprocessor'
+import ReactPostprocessor from "i18next-react-postprocessor";
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from "react-router-dom";
-import { I18nextProvider, initReactI18next } from 'react-i18next'
+import { I18nextProvider, initReactI18next } from "react-i18next";
-import { Provider } from 'react-redux'
+import { Provider } from "react-redux";
-import { store } from './store'
+import { store } from "./store";
-import { AuthProvider } from './auth'
+import { AuthProvider } from "./auth";
-import { ApiContext, createApi } from './api'
+import { ApiContext, createApi } from "./api";
-import { LegalContext, buildLegal } from './legal'
+import { LegalContext, buildLegal } from "./legal";
-import { PaymentContext } from './payment'
+import { PaymentContext } from "./payment";
-import { getClientLocale, buildResources, fallbackLng } from './locales'
+import { getClientLocale, buildResources, fallbackLng } from "./locales";
-import App from './components/App'
+import App from "./components/App";
 
 const init = async () => {
-  const api = createApi()
+  const api = createApi();
-  const lng = getClientLocale()
+  const lng = getClientLocale();
-  const [elementsResponse, configResponse] = await Promise.all([
+  const [translationsResponse, elementsResponse, configResponse] =
-    api.getElements({ locale: lng }),
+    await Promise.all([
-    api.getAppConfig({ bundleId: 'auraweb' }),
+      api.getTranslations(null),
-  ])
+      api.getElements({ locale: lng }),
-  const resources = buildResources(elementsResponse)
+      api.getAppConfig({ bundleId: "auraweb" }),
-  const legal = buildLegal(elementsResponse)
+    ]);
-  const config = configResponse.data
+  const resources = buildResources(translationsResponse);
-  const i18nextInstance = i18next.createInstance()
+  const legal = buildLegal(elementsResponse);
-  const options = { lng, resources, fallbackLng, postProcess: [ `reactPostprocessor` ] }
+  const config = configResponse.data;
-  await i18nextInstance.use(initReactI18next).use(new ReactPostprocessor()).init(options)
+  const i18nextInstance = i18next.createInstance();
-  window.Chargebee.init(config.chargebee)
+  const options = {
+    lng,
+    resources,
+    fallbackLng,
+    postProcess: [`reactPostprocessor`],
+  };
+  await i18nextInstance
+    .use(initReactI18next)
+    .use(new ReactPostprocessor())
+    .init(options);
+  window.Chargebee.init(config.chargebee);
   return (
-    <React.StrictMode>
+    <React.Fragment>
       <I18nextProvider i18n={i18nextInstance}>
         <Provider store={store}>
           <BrowserRouter>
             <ApiContext.Provider value={api}>
               <AuthProvider>
                 <LegalContext.Provider value={legal}>
-                  <PaymentContext.Provider value={window.Chargebee.getInstance()}>
+                  <PaymentContext.Provider
+                    value={window.Chargebee.getInstance()}
+                  >
                     <App />
                   </PaymentContext.Provider>
                 </LegalContext.Provider>
@@ -43,8 +55,8 @@ const init = async () => {
           </BrowserRouter>
         </Provider>
       </I18nextProvider>
-    </React.StrictMode>
+    </React.Fragment>
-  )
+  );
-}
+};
 
-export default init
+export default init;

src/locales/index.ts

@@ -1,4 +1,5 @@
-import { Elements } from '../api'
+import { Translation } from '@/api/resources/Translations.ts'
+import { Translations } from '../api'
 import dev from './dev.ts'
 
 export const getClientLocale = () => navigator.language.split('-')[0]
@@ -6,14 +7,14 @@ export const getClientTimezone = () => Intl.DateTimeFormat().resolvedOptions().t
 export const fallbackLng = 'dev'
 
 const omitKeys = ['href', 'title', 'url_slug', 'type']
-const isWeb = (group: Elements.ElementGroup) => group.name === 'web'
+// const isWeb = (group: Elements.ElementGroup) => group.name === 'web'
-const cleanUp = (element: Partial<Elements.ElementGroupItem> = {}) => {
+const cleanUp = (translation: Partial<Translation[]> = []) => {
-  return Object.entries(element)
+  return translation
-    .filter(([key]) => !omitKeys.includes(key))
+    .filter((trans) => !omitKeys.includes(trans?.key || ''))
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
+    .reduce((acc, trans) => ({ ...acc, [trans?.key || '']: trans?.value || '' }), {})
 }
-export const buildResources = (resp: Elements.Response) => {
+export const buildResources = (resp: Translations.Response) => {
-  const element = resp.data.groups.find(isWeb)?.items.at(0)
+  const element = resp.translations
   const translation = cleanUp(element)
   const lng = getClientLocale()
   return { [lng]: { translation }, dev }

src/routes.ts

@@ -67,6 +67,8 @@ const routes = {
       [apiHost, prefix, "user", "callbacks.json"].join("/"),
     getUserCallbacks: (id: string) =>
       [apiHost, prefix, "user", "callbacks", `${id}.json`].join("/"),
+    getTranslations: () =>
+      [apiHost, "api/v2", "t.json"].join("/"),
   },
 };