Merge branch 'main' into update-address-forms-layout

bigcommerce · Jul 15, 2024 · af76b31 · af76b31
2 parents 4fe2829 + e648a62
commit af76b31
Show file tree

Hide file tree

Showing 26 changed files with 251 additions and 21 deletions.
diff --git a/.changeset/mean-poets-tease.md b/.changeset/mean-poets-tease.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Add store selector page.
diff --git a/core/app/[locale]/store-selector/_components/locale-link.tsx b/core/app/[locale]/store-selector/_components/locale-link.tsx
@@ -0,0 +1,24 @@
+import { Link } from '~/components/link';
+import { localeLanguageRegionMap, LocaleType } from '~/i18n';
+import { cn } from '~/lib/utils';
+
+export const LocaleLink = ({ locale, selected }: { locale: LocaleType; selected: boolean }) => {
+  return (
+    <Link
+      className={cn(
+        'border border-gray-200 px-3 py-2 text-xs hover:bg-gray-100 hover:text-black',
+        selected && 'border-black',
+      )}
+      href="/"
+      locale={locale}
+    >
+      <div className="flex h-full items-center gap-2">
+        <div className="text-2xl">{localeLanguageRegionMap[locale].flag}</div>
+        <div className="flex flex-col gap-1">
+          <span className="font-bold">{localeLanguageRegionMap[locale].language}</span>
+          <span>{localeLanguageRegionMap[locale].region}</span>
+        </div>
+      </div>
+    </Link>
+  );
+};
diff --git a/core/app/[locale]/store-selector/page.tsx b/core/app/[locale]/store-selector/page.tsx
@@ -0,0 +1,76 @@
+import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+
+import { client } from '~/client';
+import { graphql } from '~/client/graphql';
+import { Link } from '~/components/link';
+import { StoreLogo, StoreLogoFragment } from '~/components/store-logo';
+import { NavigationMenu, NavigationMenuLink } from '~/components/ui/navigation-menu';
+import { locales, LocaleType } from '~/i18n';
+
+import { LocaleLink } from './_components/locale-link';
+
+export const metadata = {
+  title: 'Location selector',
+};
+
+const StoreSelectorPageQuery = graphql(
+  `
+    query LocationSelectorPageQuery {
+      site {
+        settings {
+          ...StoreLogoFragment
+        }
+      }
+    }
+  `,
+  [StoreLogoFragment],
+);
+
+export default async function StoreSelector({
+  params: { locale: selectedLocale },
+}: {
+  params: { locale: LocaleType };
+}) {
+  unstable_setRequestLocale(selectedLocale);
+
+  const t = await getTranslations('StoreSelector');
+
+  const { data } = await client.fetch({
+    document: StoreSelectorPageQuery,
+  });
+
+  const storeSettings = data.site.settings;
+
+  return (
+    <>
+      <header>
+        <NavigationMenu>
+          <NavigationMenuLink asChild>
+            {storeSettings && (
+              <Link className="p-0" href="/">
+                <StoreLogo data={storeSettings} />
+              </Link>
+            )}
+          </NavigationMenuLink>
+        </NavigationMenu>
+      </header>
+
+      <div className="flex flex-col gap-2 px-4 lg:container sm:px-10 lg:mx-auto lg:max-w-[1000px] lg:px-12">
+        <h1 className="text-3xl font-black lg:text-4xl">{t('heading')}</h1>
+
+        <div className="grid grid-cols-1 gap-6 py-6 md:grid-cols-3 md:gap-11 lg:grid-cols-4 lg:gap-8">
+          {locales.map((locale) => (
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            <LocaleLink key={locale} locale={locale} selected={selectedLocale === locale} />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+
+export const dynamic = 'force-static';
diff --git a/core/components/footer/footer.tsx b/core/components/footer/footer.tsx
@@ -12,6 +12,7 @@ import {
   CategoryFooterMenuFragment,
 } from './footer-menus';
 import { WebPageFooterMenu, WebPageFooterMenuFragment } from './footer-menus/web-page-footer-menu';
+import { Locale } from './locale';
 import { PaymentMethods } from './payment-methods';
 import { SocialIcons, SocialIconsFragment } from './social-icons';
 
@@ -69,10 +70,21 @@ export const Footer = ({ data }: Props) => {
         </div>
       </FooterSection>
 
-      <FooterSection className="flex flex-col justify-between gap-10 sm:flex-row sm:gap-8 sm:py-6">
-        <PaymentMethods />
+      <FooterSection className="flex flex-col gap-10 sm:gap-8 sm:py-6 lg:hidden">
+        <Locale />
 
+        <div className="flex w-full flex-col justify-between gap-10 sm:flex-row sm:gap-8">
+          <PaymentMethods />
+          {data.settings && <Copyright data={data.settings} />}
+        </div>
+      </FooterSection>
+
+      <FooterSection className="hidden justify-between gap-8 py-6 lg:flex">
         {data.settings && <Copyright data={data.settings} />}
+        <div className="flex gap-8">
+          <Locale />
+          <PaymentMethods />
+        </div>
       </FooterSection>
     </ComponentsFooter>
   );

diff --git a/core/components/footer/locale.tsx b/core/components/footer/locale.tsx
@@ -0,0 +1,20 @@
+import { getLocale } from 'next-intl/server';
+
+import { localeLanguageRegionMap, locales, LocaleType } from '~/i18n';
+
+import { Link } from '../link';
+
+export const Locale = async () => {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  const locale = (await getLocale()) as LocaleType;
+
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    locales.length > 1 && (
+      <Link className="flex gap-2" href="/store-selector">
+        <span>{localeLanguageRegionMap[locale].flag}</span>
+        <span>{localeLanguageRegionMap[locale].region}</span>
+      </Link>
+    )
+  );
+};
diff --git a/core/i18n.ts b/core/i18n.ts
@@ -7,29 +7,62 @@ enum LocalePrefixes {
   ASNEEDED = 'as-needed', // removes prefix on default locale
 }
 
+// Enable locales by including them here
+// List includes locales with existing messages support
 const locales = [
-  'da',
   'en',
-  'es-419',
-  'es-AR',
-  'es-CL',
-  'es-CO',
-  'es-LA',
-  'es-MX',
-  'es-PE',
-  'es',
-  'it',
-  'nl',
-  'pl',
-  'pt',
-  'de',
-  'fr',
-  'ja',
-  'no',
-  'pt-BR',
-  'sv',
+  // 'da',
+  // 'es-419',
+  // 'es-AR',
+  // 'es-CL',
+  // 'es-CO',
+  // 'es-LA',
+  // 'es-MX',
+  // 'es-PE',
+  // 'es',
+  // 'it',
+  // 'nl',
+  // 'pl',
+  // 'pt',
+  // 'de',
+  // 'fr',
+  // 'ja',
+  // 'no',
+  // 'pt-BR',
+  // 'sv',
 ] as const;
 
+type LocaleLanguageRegionMap = {
+  [key in LocaleType]: { language: string; region: string; flag: string };
+};
+
+/**
+ * Custom map of locale to language and region
+ * Temporary solution until we have a better way to include regions for all locales
+ */
+export const localeLanguageRegionMap: LocaleLanguageRegionMap = {
+  en: { language: 'English', region: 'United States', flag: '🇺🇸' },
+  // da: { language: 'Dansk', region: 'Danmark', flag: '🇩🇰' }
+  // 'es-419': { language: 'Español', region: 'America Latina', flag: '' },
+  // 'es-AR': { language: 'Español', region: 'Argentina', flag: '🇦🇷' },
+  // 'es-CL': { language: 'Español', region: 'Chile', flag: '🇨🇱' },
+  // 'es-CO': { language: 'Español', region: 'Colombia', flag: '🇨🇴' },
+  // 'es-LA': { language: 'Español', region: 'America Latina', flag: '' },
+  // 'es-MX': { language: 'Español', region: 'México', flag: '🇲🇽' },
+  // 'es-PE': { language: 'Español', region: 'Perú', flag: '🇵🇪' },
+  // es: { language: 'Español', region: 'España', flag: '🇪🇸' },
+  // it: { language: 'Italiano', region: 'Italia', flag: '🇮🇹' },
+  // nl: { language: 'Nederlands', region: 'Nederland', flag: '🇳🇱' },
+  // pl: { language: 'Polski', region: 'Polska', flag: '🇵🇱' },
+  // pt: { language: 'Português', region: 'Portugal', flag: '🇵🇹' },
+  // de: { language: 'Deutsch', region: 'Deutschland', flag: '🇩🇪' },
+  // fr: { language: 'Français', region: 'France', flag: '🇫🇷' },
+  // ja: { language: '日本語', region: '日本', flag: '🇯🇵' },
+  // no: { language: 'Norsk', region: 'Norge', flag: '🇳🇴' },
+  // 'pt-BR': { language: 'Português', region: 'Brasil', flag: '🇧🇷' },
+  // sv: { language: 'Svenska', region: 'Sverige', flag: '🇸🇪' },
+};
+
 type LocalePrefixesType = `${LocalePrefixes}`;
 
 // Temporary we use NEVER prefix to prioritize accept-language header

diff --git a/core/messages/da.json b/core/messages/da.json
@@ -396,5 +396,8 @@
         "processing": "Behandler...",
         "addedProductQuantity": "<cartLink>{CartItems, plural, =1 {1 varer} other {# varer}} tilføjet til din indkøbskurv</cartLink>",
         "errorAddingProductToCart": "Fejl ved tilføjelse af produkt til indkøbskurv. Prøv igen."
+    },
+    "StoreSelector": {
+        "heading": "Select a language and region"
     }
 }
diff --git a/core/messages/de.json b/core/messages/de.json
@@ -396,5 +396,8 @@
         "processing": "Verarbeitung ...",
         "addedProductQuantity": "{cartItems, plural, =1 {1 Item} other {# Items}} wurde zu<cartLink> Ihrem Warenkorb</cartLink> hinzugefügt",
         "errorAddingProductToCart": "Fehler beim Hinzufügen des Produkts zum Warenkorb. Bitte versuchen Sie es erneut."
+    },
+    "StoreSelector": {
+        "heading": "Select a language and region"
     }
 }
diff --git a/core/messages/en.json b/core/messages/en.json
@@ -396,5 +396,8 @@
     "processing": "Processing...",
     "addedProductQuantity": "{cartItems, plural, =1 {1 Item} other {# Items}} added to <cartLink> your cart</cartLink>",
     "errorAddingProductToCart": "Error adding product to cart. Please try again."
+  },
+  "StoreSelector": {
+    "heading": "Select a language and region"
   }
 }
diff --git a/core/messages/es-419.json b/core/messages/es-419.json
@@ -396,5 +396,8 @@
         "processing": "Procesando…",
         "addedProductQuantity": "{cartItems, plural, =1 {1 artículo} other {# artículos}} agregado(s) a <cartLink>tu carrito</cartLink>",
         "errorAddingProductToCart": "Error al agregar un producto al carrito. Vuelve a intentarlo."
+    },
+    "StoreSelector": {
+        "heading": "Select a language and region"
     }
 }
diff --git a/core/messages/es-AR.json b/core/messages/es-AR.json
@@ -396,5 +396,8 @@
         "processing": "Procesando…",
         "addedProductQuantity": "{cartItems, plural, =1 {1 artículo} other {# artículos}} agregado(s) a <cartLink>tu carrito</cartLink>",
         "errorAddingProductToCart": "Error al agregar un producto al carrito. Vuelve a intentarlo."
+    },
+    "StoreSelector": {
+        "heading": "Select a language and region"
     }
 }
diff --git a/core/messages/es-CL.json b/core/messages/es-CL.json
@@ -396,5 +396,8 @@
         "processing": "Procesando…",
         "addedProductQuantity": "{cartItems, plural, =1 {1 artículo} other {# artículos}} agregado(s) a <cartLink>tu carrito</cartLink>",
         "errorAddingProductToCart": "Error al agregar un producto al carrito. Vuelve a intentarlo."
+    },
+    "StoreSelector": {
+        "heading": "Select a language and region"
     }
 }
diff --git a/core/messages/es-CO.json b/core/messages/es-CO.json
@@ -396,5 +396,8 @@
         "processing": "Procesando…",
         "addedProductQuantity": "{cartItems, plural, =1 {1 artículo} other {# artículos}} agregado(s) a <cartLink>tu carrito</cartLink>",
         "errorAddingProductToCart": "Error al agregar un producto al carrito. Vuelve a intentarlo."
+    },
+    "StoreSelector": {
+        "heading": "Select a language and region"
     }
 }
diff --git a/core/messages/es-LA.json b/core/messages/es-LA.json
@@ -396,5 +396,8 @@
         "processing": "Procesando…",
         "addedProductQuantity": "{cartItems, plural, =1 {1 artículo} other {# artículos}} agregado(s) a <cartLink>tu carrito</cartLink>",
         "errorAddingProductToCart": "Error al agregar un producto al carrito. Vuelve a intentarlo."
+    },
+    "StoreSelector": {
+        "heading": "Select a language and region"
     }
 }
diff --git a/core/messages/es-MX.json b/core/messages/es-MX.json
@@ -396,5 +396,8 @@
         "processing": "Procesando…",
         "addedProductQuantity": "{cartItems, plural, =1 {1 artículo} other {# artículos}} agregado(s) a <cartLink>tu carrito</cartLink>",
         "errorAddingProductToCart": "Error al agregar un producto al carrito. Vuelve a intentarlo."
+    },
+    "StoreSelector": {
+        "heading": "Select a language and region"
     }
 }
diff --git a/core/messages/es-PE.json b/core/messages/es-PE.json
@@ -396,5 +396,8 @@
         "processing": "Procesando…",
         "addedProductQuantity": "{cartItems, plural, =1 {1 artículo} other {# artículos}} agregado(s) a <cartLink>tu carrito</cartLink>",
         "errorAddingProductToCart": "Error al agregar un producto al carrito. Vuelve a intentarlo."
+    },
+    "StoreSelector": {
+        "heading": "Select a language and region"
     }
 }
diff --git a/core/messages/es.json b/core/messages/es.json
@@ -396,5 +396,8 @@
         "processing": "Procesando...",
         "addedProductQuantity": "{cartItems, plural, =1 {1 Item} other {# Items}} añadidos <cartLink> al carrito</cartLink>",
         "errorAddingProductToCart": "Error al añadir el producto al carrito. Inténtalo de nuevo."
+    },
+    "StoreSelector": {
+        "heading": "Select a language and region"
     }
 }
diff --git a/core/messages/fr.json b/core/messages/fr.json
@@ -396,5 +396,8 @@
         "processing": "Traitement en cours…",
         "addedProductQuantity": "<cartLink>{CartItems, plural, =1 {1 article} other {# articles}} ajouté(s) à votre panier</cartLink>",
         "errorAddingProductToCart": "Erreur lors de l'ajout d'un produit au panier. Veuillez réessayer."
+    },
+    "StoreSelector": {
+        "heading": "Select a language and region"
     }
 }
diff --git a/core/messages/it.json b/core/messages/it.json
@@ -396,5 +396,8 @@
         "processing": "Elaborazione in corso...",
         "addedProductQuantity": "{cartItems, plural, =1 {1 articolo} other {# articoli}} aggiunto/i al <cartLink> carrello</cartLink>",
         "errorAddingProductToCart": "Errore durante l'aggiunta del prodotto al carrello. Riprova."
+    },
+    "StoreSelector": {
+        "heading": "Select a language and region"
     }
 }
diff --git a/core/messages/ja.json b/core/messages/ja.json
@@ -396,5 +396,8 @@
         "processing": "処理中...",
         "addedProductQuantity": "{cartItems, plural, =1 {1 Item} other {# Items}} added to <cartLink> your cart</cartLink>",
         "errorAddingProductToCart": "Error adding product to cart. Please try again."
+    },
+    "StoreSelector": {
+        "heading": "Select a language and region"
     }
 }
diff --git a/core/messages/nl.json b/core/messages/nl.json
@@ -396,5 +396,8 @@
         "processing": "Verwerken...",
         "addedProductQuantity": "{cartItems, plural, =1 {1 item} other {# items}} toegevoegd aan <cartLink> je winkelwagen</cartLink>",
         "errorAddingProductToCart": "Fout opgetreden bij het toevoegen van product aan winkelwagen. Probeer het opnieuw."
+    },
+    "StoreSelector": {
+        "heading": "Select a language and region"
     }
 }
diff --git a/core/messages/no.json b/core/messages/no.json
@@ -396,5 +396,8 @@
         "processing": "Behandler …",
         "addedProductQuantity": "{cartItems, plural, =1 {1 vare} other {# varer}} lagt til i <cartLink>handlekurven din</cartLink>",
         "errorAddingProductToCart": "Feil da produktet skulle legges til i handlekurven. Prøv igjen."
+    },
+    "StoreSelector": {
+        "heading": "Select a language and region"
     }
 }
diff --git a/core/messages/pl.json b/core/messages/pl.json
@@ -396,5 +396,8 @@
         "processing": "Przetwarzanie...",
         "addedProductQuantity": "Dodano {cartItems, plural, =1 {1 produkt} other {# produkty(-ów)}} <cartLink>do koszyka</cartLink>",
         "errorAddingProductToCart": "Błąd podczas dodawania produktu do koszyka. Spróbuj ponownie."
+    },
+    "StoreSelector": {
+        "heading": "Select a language and region"
     }
 }