commercelayer · gciotola · May 16, 2022 · May 16, 2022 · May 16, 2022 · May 16, 2022
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -52,6 +52,7 @@
         "ignore": ["HostedApp"]
       }
     ],
+    "import/no-named-as-default": "off",
     "import/order": [
       "warn",
       {

diff --git a/@typing/react-i18next.d.ts b/@typing/react-i18next.d.ts
@@ -0,0 +1,15 @@
+import "react-i18next"
+import commonEn from "public/locales/en/common.json"
+
+declare module "react-i18next" {
+  export type AllowedLocaleKeys = "en" | "it"
+
+  type AppResources = {
+    common: typeof commonEn
+  }
+
+  interface CustomTypeOptions {
+    defaultNS: "common"
+    resources: AppResources
+  }
+}
diff --git a/components/Cart/Summary/index.tsx b/components/Cart/Summary/index.tsx
@@ -8,6 +8,7 @@ import {
   LineItemOption,
   LineItemsEmpty,
 } from "@commercelayer/react-components"
+import { useTranslation } from "next-i18next"
 import { FC } from "react"
 
 import { ButtonRemoveItem } from "./ButtonRemoveItem"
@@ -18,9 +19,11 @@ type Props = {
 }
 
 export const Summary: FC<Props> = ({ className }) => {
+  const { t } = useTranslation()
+
   return (
     <div className={className}>
-      <LineItemsEmpty />
+      <LineItemsEmpty text={t("general.emptyCart")} />
       <LineItem>
         <div className="flex gap-5 pb-8 mb-8 border-b border-b-gray-300">
           <LineItemImage width={170} className="self-center" />

diff --git a/components/Cart/Totals/index.tsx b/components/Cart/Totals/index.tsx
@@ -5,30 +5,32 @@ import {
   SubTotalAmount,
   TotalAmount,
 } from "@commercelayer/react-components"
+import { useTranslation } from "next-i18next"
 import { FC } from "react"
 
 type Props = {
   className: string
 }
 
 export const Totals: FC<Props> = ({ className }) => {
+  const { t } = useTranslation()
   return (
     <div className={className}>
       <div className="bg-gray-100 py-10 px-7 rounded-md w-full">
         <div>
-          Coupon?
+          {t("general.couponLabel")}
           <GiftCardOrCouponForm>
             <GiftCardOrCouponInput />
             <GiftCardOrCouponSubmit />
           </GiftCardOrCouponForm>
         </div>
 
         <div>
-          <div>Subtotal</div>
+          <div>{t("general.subtotal")}</div>
           <SubTotalAmount />
         </div>
         <div>
-          <div>Total</div>
+          <div>{t("general.total")}</div>
           <TotalAmount />
         </div>
       </div>

diff --git a/components/Cart/index.tsx b/components/Cart/index.tsx
@@ -4,6 +4,7 @@ import {
   LineItemsCount,
   OrderContainer,
 } from "@commercelayer/react-components"
+import { useTranslation } from "next-i18next"
 import { FC } from "react"
 
 import { Totals } from "./Totals"
@@ -15,6 +16,7 @@ import { useSettings } from "#components/SettingsProvider"
 
 const Cart: FC = () => {
   const { settings } = useSettings()
+  const { t } = useTranslation()
 
   if (!settings || !settings.isValid) {
     return null
@@ -33,11 +35,18 @@ const Cart: FC = () => {
           <LineItemsContainer>
             <PageHeader>
               <h1 className="text-black font-semibold text-xl md:text-3xl">
-                Cart
+                {t("general.title")}
               </h1>
-              <div className="text-sm text-gray-500 font-semibold">
-                <LineItemsCount /> items
-              </div>
+
+              <LineItemsCount>
+                {({ quantity }) =>
+                  quantity ? (
+                    <div className="text-sm text-gray-500 font-semibold">
+                      {quantity} {t("general.item", { count: quantity })}
+                    </div>
+                  ) : null
+                }
+              </LineItemsCount>
             </PageHeader>
 
             <div className="flex gap-8 pt-8 items-start">

diff --git a/components/PageHead.tsx b/components/PageHead.tsx
@@ -1,23 +1,20 @@
+import { useTranslation } from "next-i18next"
 import NextHead from "next/head"
 import { FC } from "react"
 
 import { defaultSettings } from "#utils/getSettings"
 
 interface Props {
   title?: string
-  description?: string
   faviconUrl?: string
 }
 
-export const PageHead: FC<Props> = ({
-  faviconUrl,
-  title = "Your Cart",
-  description = "Hosted Cart by Commerce Layer",
-}) => {
+export const PageHead: FC<Props> = ({ faviconUrl, title }) => {
+  const { t } = useTranslation("common")
+
   return (
     <NextHead>
-      <title>{title}</title>
-      <meta name="description" content={description} />
+      <title>{title || t("general.title")}</title>
       <link rel="icon" href={faviconUrl || defaultSettings.favicon} />
     </NextHead>
   )

diff --git a/components/SettingsProvider.tsx b/components/SettingsProvider.tsx
@@ -1,4 +1,5 @@
 import { InvalidSettings, Settings } from "HostedApp"
+import { changeLanguage } from "i18next"
 import {
   createContext,
   FC,
@@ -8,6 +9,8 @@ import {
   useState,
 } from "react"
 
+import { parseLanguageCode } from "./i18n/parseLanguageCode"
+
 import { getAccessTokenFromUrl } from "#utils/getAccessTokenFromUrl"
 import { defaultSettings, getSettings } from "#utils/getSettings"
 
@@ -59,6 +62,13 @@ export const SettingsProvider: FC<SettingsProviderProps> = ({
     }
   }, [accessToken])
 
+  // keep i18n in sync
+  useEffect(() => {
+    if (settings.language) {
+      changeLanguage(parseLanguageCode("settings.language"))
+    }
+  }, [settings.language])
+
   const value = { settings, isLoading }
  return (
     <SettingsContext.Provider value={value}>

diff --git a/components/i18n/index.ts b/components/i18n/index.ts
@@ -0,0 +1,29 @@
+import i18n, { use } from "i18next"
+import {
+  initReactI18next,
+  AllowedLocaleKeys,
+  AppResources,
+} from "react-i18next"
+
+import commonEn from "public/locales/en/common.json"
+import commonIt from "public/locales/it/common.json"
+
+const resources: Record<AllowedLocaleKeys, AppResources> = {
+  en: {
+    common: commonEn,
+  },
+  it: {
+    common: commonIt,
+  },
+}
+
+use(initReactI18next).init({
+  resources,
+  lng: "en",
+  defaultNS: "common",
+  interpolation: {
+    escapeValue: false, // react already safes from xss
+  },
+})
+
+export default i18n
diff --git a/components/i18n/parseLanguageCode.ts b/components/i18n/parseLanguageCode.ts
@@ -0,0 +1,11 @@
+import { AllowedLocaleKeys } from "react-i18next"
+
+type ApiLanguageCode = "en" | "it"
+
+const langs: Record<ApiLanguageCode, AllowedLocaleKeys> = {
+  en: "en",
+  it: "it",
+}
+
+export const parseLanguageCode = (apiLanguageCode: string) =>
+  langs[apiLanguageCode as ApiLanguageCode] || langs.en
diff --git a/next.config.js b/next.config.js
@@ -36,4 +36,4 @@ if (shouldAnalyzeBundles) {
   nextConfig = withBundleAnalyzer(nextConfig)
 }
 
-module.exports = nextConfig
+module.exports = nextConfig
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "async-retry": "^1.3.3",
     "jwt-decode": "^3.1.2",
     "next": "12.1.6",
+    "next-i18next": "^11.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,8 +1,10 @@
+import { appWithTranslation } from "next-i18next"
 import type { AppProps } from "next/app"
 import "../styles/globals.css"
+import "components/i18n"
 
-function CartApp({ Component, pageProps }: AppProps) {
+function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />
 }
 
-export default CartApp
+export default appWithTranslation(App)
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -0,0 +1,14 @@
+{
+    "general": {
+        "title": "Your Cart",
+        "item": "item",
+        "item_other": "items",
+        "emptyCart": "Your cart is empty",
+        "remove": "Remove", 
+        "finalPriceinCheckoutText": "Tax included and shipping calculated at checkout",
+        "couponLabel": "Have a promo code?",
+        "subtotal": "Subtotal",
+        "total": "Total",
+        "gotToCheckoutCta": "Checkout"
+    }  
+}
diff --git a/public/locales/it/common.json b/public/locales/it/common.json
@@ -0,0 +1,14 @@
+{
+    "general": {
+        "title": "Il tuo carrello",
+        "item": "prodotto",
+        "item_other": "prodotti",
+        "emptyCart": "Il tuo carrello è vuoto",
+        "remove": "Rimuovi", 
+        "finalPriceinCheckoutText": "Il totale incluse tasse e costi di spedizione sarà calcolato nella schermata successiva",
+        "couponLabel": "Hai un codice promozionale?",
+        "subtotal": "Totale parziale",
+        "total": "Totale",
+        "gotToCheckoutCta": "Checkout"
+    }  
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,6 +52,7 @@ @@
             "ignore": ["HostedApp"]
           }
         ],
+        "import/no-named-as-default": "off",
         "import/order": [
           "warn",
           {
@@ Expand Down @@