feat(core): add locale switcher to Header (#1907)

* feat(core): add locale switcher to Header

* fix: add translation for error

* chore: add context comment

core/components/header/_actions/switch-locale.ts

@@ -0,0 +1,40 @@
+'use server';
+
+import { SubmissionResult } from '@conform-to/react';
+import { parseWithZod } from '@conform-to/zod';
+import { revalidatePath } from 'next/cache';
+import { getTranslations } from 'next-intl/server';
+
+import { localeSchema } from '@/vibes/soul/primitives/navigation/schema';
+import { defaultLocale, redirect } from '~/i18n/routing';
+
+export const switchLocale = async (_prevState: SubmissionResult | null, payload: FormData) => {
+  const t = await getTranslations('Components.Header.Locale');
+
+  const submission = parseWithZod(payload, { schema: localeSchema });
+
+  if (submission.status !== 'success') {
+    return submission.reply({ formErrors: [t('invalidLocale')] });
+  }
+
+  await Promise.resolve();
+
+  revalidatePath('/');
+
+  // Since `redirect` doesn't prepend the local to the redirect url
+  // when navigating the a default locale link, we need to prepend
+  // it ourselves to ensure the redirect happens.
+  if (submission.value.id === defaultLocale) {
+    redirect({
+      href: `/${submission.value.id}`,
+      locale: submission.value.id,
+    });
+  } else {
+    redirect({
+      href: `/`,
+      locale: submission.value.id,
+    });
+  }
+
+  return submission.reply({ resetForm: true });
+};

core/components/header/index.tsx

@@ -1,5 +1,5 @@
 import { cookies } from 'next/headers';
-import { getTranslations } from 'next-intl/server';
+import { getLocale, getTranslations } from 'next-intl/server';
 import PLazy from 'p-lazy';
 import { cache } from 'react';
 
@@ -11,8 +11,10 @@ import { graphql, readFragment } from '~/client/graphql';
 import { revalidate } from '~/client/revalidate-target';
 import { TAGS } from '~/client/tags';
 import { logoTransformer } from '~/data-transformers/logo-transformer';
+import { routing } from '~/i18n/routing';
 
 import { search } from './_actions/search';
+import { switchLocale } from './_actions/switch-locale';
 import { HeaderFragment } from './fragment';
 
 const GetCartCountQuery = graphql(`
@@ -95,6 +97,12 @@ const getCartCount = async () => {
 
 export const Header = async () => {
   const t = await getTranslations('Components.Header');
+  const locale = await getLocale();
+
+  const locales = routing.locales.map((enabledLocales) => ({
+    id: enabledLocales,
+    label: enabledLocales.toLocaleUpperCase(),
+  }));
 
   return (
     <HeaderSection
@@ -113,6 +121,9 @@ export const Header = async () => {
         openSearchPopupLabel: t('Search.openSearchPopup'),
         logoLabel: t('home'),
         cartCount: PLazy.from(getCartCount),
+        activeLocaleId: locale,
+        locales,
+        localeAction: switchLocale,
       }}
     />
   );

core/messages/en.json

@@ -507,9 +507,8 @@
         "login": "Login",
         "logout": "Log out"
       },
-      "LocaleSwitcher": {
-        "chooseCountryAndLanguage": "Choose your country and language",
-        "goToSite": "Go to site"
+      "Locale": {
+        "invalidLocale": "Invalid locale"
       },
       "MiniCart": {
         "cart": "Cart",