Option to provide non translated strings in a fallback locale (#1659)

.changeset/wicked-papayas-smoke.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+If a string is not provided in the selected locale, the translation system will fallback to "en" for that specific entry.

core/i18n/request.ts

@@ -1,17 +1,34 @@
+import deepmerge from 'deepmerge';
 import { notFound } from 'next/navigation';
 import { getRequestConfig } from 'next-intl/server';
 
 import { locales } from './routing';
 
+// The language to fall back to if the requested message string is not available.
+const fallbackLocale = 'en';
+
 export default getRequestConfig(async ({ requestLocale }) => {
   const locale = await requestLocale;
 
   if (!locale || !locales.includes(locale)) {
     notFound();
   }
 
+  if (locale === fallbackLocale) {
+    return {
+      locale,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
+      messages: (await import(`../messages/${locale}.json`)).default,
+    };
+  }
+
   return {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-    messages: (await import(`../messages/${locale}.json`)).default,
+    locale,
+    messages: deepmerge(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
+      (await import(`../messages/${fallbackLocale}.json`)).default,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
+      (await import(`../messages/${locale}.json`)).default,
+    ),
   };
 });

core/package.json

@@ -35,6 +35,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "content-security-policy-builder": "^2.2.0",
+    "deepmerge": "^4.3.1",
     "embla-carousel-react": "8.4.0",
     "focus-trap-react": "^10.3.1",
     "gql.tada": "^1.8.10",