From 0b0f07808e02b6e97c61b93890350453323199d4 Mon Sep 17 00:00:00 2001
From: "Juan P. Prieto" <juanpablo.prieto@shopify.com>
Date: Tue, 4 Oct 2022 16:31:22 -0700
Subject: [PATCH 01/12] add useCart and remove prop drilling

---
 app/components/Layout.tsx  | 68 +++++++++++---------------------------
 app/hooks/useCart.tsx      | 11 ++++++
 app/hooks/useRouteData.tsx |  8 +++++
 3 files changed, 38 insertions(+), 49 deletions(-)
 create mode 100644 app/hooks/useCart.tsx
 create mode 100644 app/hooks/useRouteData.tsx

diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx
index 3406f79c19..edc5c2d8cf 100644
--- a/app/components/Layout.tsx
+++ b/app/components/Layout.tsx
@@ -16,7 +16,7 @@ import {
   CartDetails,
   CartEmpty,
 } from "~/components";
-import { Await, Link, useFetcher } from "@remix-run/react";
+import { Link, useFetcher } from "@remix-run/react";
 import { useWindowScroll } from "react-use";
 import { Disclosure } from "@headlessui/react";
 import type { LayoutData } from "~/data";
@@ -24,7 +24,8 @@ import type {
   Cart,
   Country,
 } from "@shopify/hydrogen-ui-alpha/storefront-api-types";
-import { Suspense, useEffect } from "react";
+import { useEffect } from "react";
+import {useCart} from '~/hooks/useCart'
 
 export function Layout({
   children,
@@ -35,10 +36,9 @@ export function Layout({
     layout: LayoutData;
     countries: Array<Country>;
     defaultCountry: Country;
-    cart: Promise<Cart>;
   };
 }) {
-  const { layout, countries, defaultCountry, cart } = data || {};
+  const { layout, countries, defaultCountry } = data || {};
 
   return (
     <>
@@ -51,7 +51,6 @@ export function Layout({
         <Header
           title={layout?.shop.name ?? "Hydrogen"}
           menu={layout?.headerMenu}
-          cart={cart}
         />
         <main role="main" id="mainContent" className="flex-grow">
           {children}
@@ -69,11 +68,9 @@ export function Layout({
 function Header({
   title,
   menu,
-  cart,
 }: {
   title: string;
   menu?: EnhancedMenu;
-  cart?: Promise<Cart>;
 }) {
   const { pathname } = useLocation();
 
@@ -96,7 +93,7 @@ function Header({
 
   return (
     <>
-      <CartDrawer isOpen={isCartOpen} onClose={closeCart} cart={cart} />
+      <CartDrawer isOpen={isCartOpen} onClose={closeCart} />
       {menu && (
         <MenuDrawer isOpen={isMenuOpen} onClose={closeMenu} menu={menu} />
       )}
@@ -106,7 +103,6 @@ function Header({
         title={title}
         menu={menu}
         openCart={openCart}
-        cart={cart}
       />
       <MobileHeader
         countryCode={countryCode}
@@ -114,7 +110,6 @@ function Header({
         title={title}
         openCart={openCart}
         openMenu={openMenu}
-        cart={cart}
       />
     </>
   );
@@ -176,12 +171,11 @@ function Footer({
 function CartDrawer({
   isOpen,
   onClose,
-  cart,
 }: {
   isOpen: boolean;
   onClose: () => void;
-  cart?: Promise<Cart>;
 }) {
+  const cart = useCart();
   /**
    * Whenever a component that uses a fetcher is _unmounted_, that fetcher is removed
    * from the internal Remix cache. By defining the fetcher outside of the component,
@@ -195,26 +189,20 @@ function CartDrawer({
    * drawer is opened.
    */
   useEffect(() => {
-    topProductsFetcher.load("/cart");
+    isOpen && topProductsFetcher.load("/cart");
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isOpen]);
 
   return (
     <Drawer open={isOpen} onClose={onClose} heading="Cart" openFrom="right">
       <div className="grid">
         {cart ? (
-          <Suspense fallback={<div>Loading...</div>}>
-            <Await errorElement="Hey, the cart didn't load LOL" resolve={cart}>
-              {(cart) => (
-                <CartDetails
-                  fetcher={topProductsFetcher}
-                  layout="drawer"
-                  onClose={onClose}
-                  cart={cart}
-                />
-              )}
-            </Await>
-          </Suspense>
+          <CartDetails
+            fetcher={topProductsFetcher}
+            layout="drawer"
+            onClose={onClose}
+            cart={cart}
+          />
         ) : (
           <CartEmpty
             fetcher={topProductsFetcher}
@@ -272,14 +260,12 @@ function MobileHeader({
   isHome,
   openCart,
   openMenu,
-  cart,
 }: {
   countryCode?: string | null;
   title: string;
   isHome: boolean;
   openCart: () => void;
   openMenu: () => void;
-  cart?: Promise<Cart>;
 }) {
   const { y } = useWindowScroll();
 
@@ -336,13 +322,7 @@ function MobileHeader({
         </Link>
         <button onClick={openCart} className={styles.button}>
           <IconBag />
-          {cart && (
-            <Suspense fallback={null}>
-              <Await resolve={cart}>
-                {(cart) => <CartBadge cart={cart} dark={isHome} />}
-              </Await>
-            </Suspense>
-          )}
+          <CartBadge dark={isHome} />
         </button>
       </div>
     </header>
@@ -423,25 +403,15 @@ function DesktopHeader({
         </Link>
         <button onClick={openCart} className={styles.button}>
           <IconBag />
-          {cart && (
-            <Suspense fallback={null}>
-              <Await resolve={cart}>
-                {(cart) => <CartBadge cart={cart} dark={isHome} />}
-              </Await>
-            </Suspense>
-          )}
+          <CartBadge dark={isHome} />
         </button>
       </div>
     </header>
   );
 }
 
-function CartBadge({ cart, dark }: { cart: Cart; dark: boolean }) {
-  const { totalQuantity } = cart;
-
-  if (totalQuantity < 1) {
-    return null;
-  }
+function CartBadge({ dark }: { dark: boolean }) {
+  const cart = useCart();
   return (
     <div
       className={`${
@@ -450,7 +420,7 @@ function CartBadge({ cart, dark }: { cart: Cart; dark: boolean }) {
           : "text-contrast bg-primary"
       } absolute bottom-1 right-1 text-[0.625rem] font-medium subpixel-antialiased h-3 min-w-[0.75rem] flex items-center justify-center leading-none text-center rounded-full w-auto px-[0.125rem] pb-px`}
     >
-      <span>{totalQuantity}</span>
+      <span>{cart?.totalQuantity || ''}</span>
     </div>
   );
 }
diff --git a/app/hooks/useCart.tsx b/app/hooks/useCart.tsx
new file mode 100644
index 0000000000..3373553e03
--- /dev/null
+++ b/app/hooks/useCart.tsx
@@ -0,0 +1,11 @@
+import {useParentRouteData} from './useRouteData';
+
+import type {
+  Cart,
+} from "@shopify/hydrogen-ui-alpha/storefront-api-types";
+
+export function useCart(): Cart | undefined {
+  const rootData = useParentRouteData('/');
+
+  return rootData?.cart?._data
+}
diff --git a/app/hooks/useRouteData.tsx b/app/hooks/useRouteData.tsx
new file mode 100644
index 0000000000..19a8041a94
--- /dev/null
+++ b/app/hooks/useRouteData.tsx
@@ -0,0 +1,8 @@
+import {useMatches} from '@remix-run/react';
+
+export function useParentRouteData(pathname: string): any {
+  let matches = useMatches();
+  let parentMatch = matches.find((match) => match.pathname === pathname);
+  if (!parentMatch) return null;
+  return parentMatch.data;
+}

From d089439a8c237bb27066cce2436560b21da3a146 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Mon, 3 Oct 2022 16:31:28 -0700
Subject: [PATCH 02/12] internationalization setup

---
 app/components/AccountDetails.tsx             |  8 ++---
 app/components/CartDetails.tsx                |  7 +++--
 app/components/CountrySelector.tsx            |  6 ++--
 app/components/Layout.tsx                     | 29 ++++++++++---------
 app/components/LinkI18n.tsx                   |  9 ++++++
 app/components/Modal.tsx                      |  7 ++---
 app/components/OrderCard.tsx                  | 11 ++++---
 app/components/ProductCard.tsx                |  7 ++---
 app/components/ProductGrid.tsx                |  8 ++---
 app/components/index.ts                       |  1 +
 app/routes/$language/[robots.txt].tsx         |  1 +
 app/routes/$language/[sitemap.xml].tsx        |  1 +
 app/routes/$language/account.login.tsx        |  4 +++
 app/routes/$language/account.logout.tsx       |  1 +
 app/routes/$language/account.tsx              |  4 +++
 app/routes/$language/account/edit.tsx         |  4 +++
 app/routes/$language/cart.tsx                 |  4 +++
 .../collections/$collectionHandle.tsx         |  4 +++
 app/routes/$language/collections/all.tsx      |  1 +
 app/routes/$language/collections/index.tsx    |  4 +++
 app/routes/$language/index.tsx                |  7 +++++
 .../$language/journal/$journalHandle.tsx      |  4 +++
 app/routes/$language/journal/index.tsx        |  4 +++
 .../$language/products/$productHandle.tsx     |  4 +++
 app/routes/$language/products/index.tsx       |  4 +++
 app/routes/account.login.tsx                  | 11 +++----
 app/routes/collections/index.tsx              |  8 ++---
 app/routes/journal/index.tsx                  |  8 ++---
 app/routes/products/$productHandle.tsx        | 10 +++----
 29 files changed, 122 insertions(+), 59 deletions(-)
 create mode 100644 app/components/LinkI18n.tsx
 create mode 100644 app/routes/$language/[robots.txt].tsx
 create mode 100644 app/routes/$language/[sitemap.xml].tsx
 create mode 100644 app/routes/$language/account.login.tsx
 create mode 100644 app/routes/$language/account.logout.tsx
 create mode 100644 app/routes/$language/account.tsx
 create mode 100644 app/routes/$language/account/edit.tsx
 create mode 100644 app/routes/$language/cart.tsx
 create mode 100644 app/routes/$language/collections/$collectionHandle.tsx
 create mode 100644 app/routes/$language/collections/all.tsx
 create mode 100644 app/routes/$language/collections/index.tsx
 create mode 100644 app/routes/$language/index.tsx
 create mode 100644 app/routes/$language/journal/$journalHandle.tsx
 create mode 100644 app/routes/$language/journal/index.tsx
 create mode 100644 app/routes/$language/products/$productHandle.tsx
 create mode 100644 app/routes/$language/products/index.tsx

diff --git a/app/components/AccountDetails.tsx b/app/components/AccountDetails.tsx
index ce757b9318..57a95a57b7 100644
--- a/app/components/AccountDetails.tsx
+++ b/app/components/AccountDetails.tsx
@@ -1,6 +1,6 @@
-import { Link, Outlet, useOutlet } from "@remix-run/react";
+import { Outlet, useOutlet } from "@remix-run/react";
 import type { Customer } from "@shopify/hydrogen-ui-alpha/storefront-api-types";
-import { Modal } from "~/components";
+import { Modal, LinkI18n } from "~/components";
 import type { AccountDetailsOutletContext } from "~/routes/account/edit";
 
 export function AccountDetails({ customer }: { customer: Customer }) {
@@ -20,9 +20,9 @@ export function AccountDetails({ customer }: { customer: Customer }) {
         <div className="lg:p-8 p-6 border border-gray-200 rounded">
           <div className="flex">
             <h3 className="font-bold text-base flex-1">Profile & Security</h3>
-            <Link className="underline text-sm font-normal" to="edit">
+            <LinkI18n className="underline text-sm font-normal" to="edit">
               Edit
-            </Link>
+            </LinkI18n>
           </div>
           <div className="mt-4 text-sm text-primary/50">Name</div>
           <p className="mt-1">
diff --git a/app/components/CartDetails.tsx b/app/components/CartDetails.tsx
index 1fdfa25f68..4bf90e6c4c 100644
--- a/app/components/CartDetails.tsx
+++ b/app/components/CartDetails.tsx
@@ -3,9 +3,9 @@ import { useScroll } from "react-use";
 import { flattenConnection, Money } from "@shopify/hydrogen-ui-alpha";
 import {
   type FetcherWithComponents,
-  Link,
   useFetcher,
   useLocation,
+  Link,
 } from "@remix-run/react";
 
 import {
@@ -15,6 +15,7 @@ import {
   ProductCard,
   Skeleton,
   Text,
+  LinkI18n,
 } from "~/components";
 import type {
   Cart,
@@ -185,9 +186,9 @@ function CartLineItem({
       <div className="flex justify-between flex-grow">
         <div className="grid gap-2">
           <Heading as="h3" size="copy">
-            <Link to={`/products/${merchandise.product.handle}`}>
+            <LinkI18n to={`/products/${merchandise.product.handle}`}>
               {merchandise.product.title}
-            </Link>
+            </LinkI18n>
           </Heading>
 
           <div className="grid pb-2">
diff --git a/app/components/CountrySelector.tsx b/app/components/CountrySelector.tsx
index 17b0688888..eb4406dfd4 100644
--- a/app/components/CountrySelector.tsx
+++ b/app/components/CountrySelector.tsx
@@ -1,4 +1,4 @@
-import { Link, useAsyncValue, useLocation, Await } from "@remix-run/react";
+import { Link, useAsyncValue, useLocation, Await, useParams } from "@remix-run/react";
 import { Country } from "@shopify/hydrogen-ui-alpha/storefront-api-types";
 
 import {Listbox} from '@headlessui/react';
@@ -50,6 +50,8 @@ function CountrySelectorElement({
   const [listboxOpen, setListboxOpen] = useState(false);
   const countries = useAsyncValue<Array <Country>>();
   const { pathname } = useLocation();
+  const { language } = useParams();
+  const strippedPathname = pathname.replace(new RegExp(`^\/${language}\/`), '/')
   const currentCountry = countries.find(country => country.isoCode === selectedCountry) || defaultCountry;
 
   return (
@@ -83,7 +85,7 @@ function CountrySelectorElement({
                     <Listbox.Option key={country.isoCode} value={country}>
                       {({active}) => (
                         <Link
-                          to={countryIsoCode !== 'us' ? `/${countryIsoCode}${pathname}` : '/'}
+                          to={countryIsoCode !== 'us' ? `/${countryIsoCode}${strippedPathname}` : strippedPathname}
                           className={`text-contrast dark:text-primary text-contrast dark:text-primary bg-primary
                           dark:bg-contrast w-full p-2 transition rounded
                           flex justify-start items-center text-left cursor-pointer ${
diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx
index edc5c2d8cf..94f0cad5e4 100644
--- a/app/components/Layout.tsx
+++ b/app/components/Layout.tsx
@@ -15,6 +15,7 @@ import {
   CountrySelector,
   CartDetails,
   CartEmpty,
+  LinkI18n
 } from "~/components";
 import { Link, useFetcher } from "@remix-run/react";
 import { useWindowScroll } from "react-use";
@@ -244,11 +245,11 @@ function MenuMobileNav({
     <nav className="grid gap-4 p-6 sm:gap-6 sm:px-12 sm:py-8">
       {/* Top level menu items */}
       {(menu?.items || []).map((item) => (
-        <Link key={item.id} to={item.to} target={item.target} onClick={onClose}>
+        <LinkI18n key={item.id} to={item.to} target={item.target} onClick={onClose}>
           <Text as="span" size="copy">
             {item.title}
           </Text>
-        </Link>
+        </LinkI18n>
       ))}
     </nav>
   );
@@ -307,19 +308,19 @@ function MobileHeader({
         </form>
       </div>
 
-      <Link
+      <LinkI18n
         className="flex items-center self-stretch leading-[3rem] md:leading-[4rem] justify-center flex-grow w-full h-full"
         to="/"
       >
         <Heading className="font-bold text-center" as={isHome ? "h1" : "h2"}>
           {title}
         </Heading>
-      </Link>
+      </LinkI18n>
 
       <div className="flex items-center justify-end w-full gap-4">
-        <Link to={"/account"} className={styles.button}>
+        <LinkI18n to={"/account"} className={styles.button}>
           <IconAccount />
-        </Link>
+        </LinkI18n>
         <button onClick={openCart} className={styles.button}>
           <IconBag />
           <CartBadge dark={isHome} />
@@ -361,20 +362,20 @@ function DesktopHeader({
   return (
     <header role="banner" className={styles.container}>
       <div className="flex gap-12">
-        <Link className={`font-bold`} to="/" prefetch="intent">
+        <LinkI18n className={`font-bold`} to="/" prefetch="intent">
           {title}
-        </Link>
+        </LinkI18n>
         <nav className="flex gap-8">
           {/* Top level menu items */}
           {(menu?.items || []).map((item) => (
-            <Link
+            <LinkI18n
               key={item.id}
               to={item.to}
               target={item.target}
               prefetch="intent"
             >
               {item.title}
-            </Link>
+            </LinkI18n>
           ))}
         </nav>
       </div>
@@ -398,9 +399,9 @@ function DesktopHeader({
             <IconSearch />
           </button>
         </form>
-        <Link to={"/account"} className={styles.button}>
+        <LinkI18n to={"/account"} className={styles.button}>
           <IconAccount />
-        </Link>
+        </LinkI18n>
         <button onClick={openCart} className={styles.button}>
           <IconBag />
           <CartBadge dark={isHome} />
@@ -441,9 +442,9 @@ function FooterMenu({ menu }: { menu?: EnhancedMenu }) {
     }
 
     return (
-      <Link to={item.to} target={item.target} prefetch="intent">
+      <LinkI18n to={item.to} target={item.target} prefetch="intent">
         {item.title}
-      </Link>
+      </LinkI18n>
     );
   };
 
diff --git a/app/components/LinkI18n.tsx b/app/components/LinkI18n.tsx
new file mode 100644
index 0000000000..c495d8f814
--- /dev/null
+++ b/app/components/LinkI18n.tsx
@@ -0,0 +1,9 @@
+import { Link, useParams } from "@remix-run/react";
+
+export function LinkI18n(props: any) {
+  const { to, ...resOfProps } = props;
+  const { language } = useParams();
+  const hrefWithCountryLang = language ? `/${language}${to}` : to;
+
+  return <Link to={hrefWithCountryLang} {...resOfProps} />
+}
diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx
index df7a5d35e9..abcf423e40 100644
--- a/app/components/Modal.tsx
+++ b/app/components/Modal.tsx
@@ -1,5 +1,4 @@
-import { Link } from "@remix-run/react";
-import { IconClose } from "~/components";
+import { IconClose, LinkI18n } from "~/components";
 
 export function Modal({
   children,
@@ -31,12 +30,12 @@ export function Modal({
             tabIndex={0}
           >
             <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-              <Link
+              <LinkI18n
                 to={cancelLink}
                 className="p-4 -m-4 transition text-primary hover:text-primary/50"
               >
                 <IconClose aria-label="Close panel" />
-              </Link>
+              </LinkI18n>
             </div>
             {children}
           </div>
diff --git a/app/components/OrderCard.tsx b/app/components/OrderCard.tsx
index 0670dbe67f..80b44345ac 100644
--- a/app/components/OrderCard.tsx
+++ b/app/components/OrderCard.tsx
@@ -1,10 +1,9 @@
-import { Link } from "@remix-run/react";
 import { flattenConnection } from "@shopify/hydrogen-ui-alpha";
 import type {
   Order,
   OrderLineItem,
 } from "@shopify/hydrogen-ui-alpha/storefront-api-types";
-import { Heading, Text } from "~/components";
+import { Heading, Text, LinkI18n } from "~/components";
 import { statusMessage } from "~/lib/utils";
 
 export function OrderCard({ order }: { order: Order }) {
@@ -14,7 +13,7 @@ export function OrderCard({ order }: { order: Order }) {
 
   return (
     <li className="grid text-center border rounded">
-      <Link
+      <LinkI18n
         className="grid items-center gap-4 p-4 md:gap-6 md:p-6 md:grid-cols-2"
         to={`/account/orders/${legacyOrderId}`}
       >
@@ -68,16 +67,16 @@ export function OrderCard({ order }: { order: Order }) {
             </dd>
           </dl>
         </div>
-      </Link>
+      </LinkI18n>
       <div className="self-end border-t">
-        <Link
+        <LinkI18n
           className="block w-full p-2 text-center"
           to={`/account/orders/${legacyOrderId}`}
         >
           <Text color="subtle" className="ml-3">
             View Details
           </Text>
-        </Link>
+        </LinkI18n>
       </div>
     </li>
   );
diff --git a/app/components/ProductCard.tsx b/app/components/ProductCard.tsx
index 795bfd4f6e..df7c6c2e2b 100644
--- a/app/components/ProductCard.tsx
+++ b/app/components/ProductCard.tsx
@@ -6,7 +6,7 @@ import {
   useMoney,
 } from "@shopify/hydrogen-ui-alpha";
 
-import { Text } from "~/components";
+import { Text, LinkI18n } from "~/components";
 import { isDiscounted, isNewArrival } from "~/lib/utils";
 import { getProductPlaceholder } from "~/lib/placeholders";
 import type {
@@ -15,7 +15,6 @@ import type {
   ProductVariant,
   ProductVariantConnection,
 } from "@shopify/hydrogen-ui-alpha/storefront-api-types";
-import { Link } from "@remix-run/react";
 
 export function ProductCard({
   product,
@@ -53,7 +52,7 @@ export function ProductCard({
   const styles = clsx("grid gap-6", className);
 
   return (
-    <Link
+    <LinkI18n
       onClick={onClick}
       to={`/products/${product.handle}`}
       prefetch="intent"
@@ -105,7 +104,7 @@ export function ProductCard({
           </div>
         </div>
       </div>
-    </Link>
+    </LinkI18n>
   );
 }
 
diff --git a/app/components/ProductGrid.tsx b/app/components/ProductGrid.tsx
index be2b4f3c3f..b3f6c52420 100644
--- a/app/components/ProductGrid.tsx
+++ b/app/components/ProductGrid.tsx
@@ -1,10 +1,10 @@
-import { Button, Grid, ProductCard } from "~/components";
+import { Button, Grid, ProductCard, LinkI18n } from "~/components";
 import { getImageLoadingPriority } from "~/lib/const";
 import type {
   Collection,
   Product,
 } from "@shopify/hydrogen-ui-alpha/storefront-api-types";
-import { Link, useFetcher } from "@remix-run/react";
+import { useFetcher } from "@remix-run/react";
 import { useEffect, useState } from "react";
 
 export function ProductGrid({
@@ -43,9 +43,9 @@ export function ProductGrid({
     return (
       <>
         <p>No products found on this collection</p>
-        <Link to="/products">
+        <LinkI18n to="/products">
           <p className="underline">Browse catalog</p>
-        </Link>
+        </LinkI18n>
       </>
     );
   }
diff --git a/app/components/index.ts b/app/components/index.ts
index bad412b063..5f660f33f2 100644
--- a/app/components/index.ts
+++ b/app/components/index.ts
@@ -14,5 +14,6 @@ export { CartDetails, CartEmpty } from "./CartDetails";
 export { OrderCard } from "./OrderCard";
 export { AccountDetails } from "./AccountDetails";
 export { Modal } from "./Modal";
+export { LinkI18n } from './LinkI18n';
 // Sue me
 export * from "./Icon";
diff --git a/app/routes/$language/[robots.txt].tsx b/app/routes/$language/[robots.txt].tsx
new file mode 100644
index 0000000000..c4ce41ce3d
--- /dev/null
+++ b/app/routes/$language/[robots.txt].tsx
@@ -0,0 +1 @@
+export { loader } from '~/routes/[robots.txt]';
diff --git a/app/routes/$language/[sitemap.xml].tsx b/app/routes/$language/[sitemap.xml].tsx
new file mode 100644
index 0000000000..4a1afbd015
--- /dev/null
+++ b/app/routes/$language/[sitemap.xml].tsx
@@ -0,0 +1 @@
+export { loader } from '~/routes/[sitemap.xml]';
diff --git a/app/routes/$language/account.login.tsx b/app/routes/$language/account.login.tsx
new file mode 100644
index 0000000000..da16b3f5bd
--- /dev/null
+++ b/app/routes/$language/account.login.tsx
@@ -0,0 +1,4 @@
+import Component, { loader, action } from '~/routes/account.login';
+
+export { loader, action };
+export default Component;
diff --git a/app/routes/$language/account.logout.tsx b/app/routes/$language/account.logout.tsx
new file mode 100644
index 0000000000..2bfccac9e5
--- /dev/null
+++ b/app/routes/$language/account.logout.tsx
@@ -0,0 +1 @@
+export { logout, loader, action } from '~/routes/account.logout';
diff --git a/app/routes/$language/account.tsx b/app/routes/$language/account.tsx
new file mode 100644
index 0000000000..0468a5ac0b
--- /dev/null
+++ b/app/routes/$language/account.tsx
@@ -0,0 +1,4 @@
+import Component, { loader } from '~/routes/account';
+
+export { loader };
+export default Component;
diff --git a/app/routes/$language/account/edit.tsx b/app/routes/$language/account/edit.tsx
new file mode 100644
index 0000000000..f41c1ecf9d
--- /dev/null
+++ b/app/routes/$language/account/edit.tsx
@@ -0,0 +1,4 @@
+import Component, { action } from '~/routes/account/edit';
+
+export { action };
+export default Component;
diff --git a/app/routes/$language/cart.tsx b/app/routes/$language/cart.tsx
new file mode 100644
index 0000000000..2e66254c82
--- /dev/null
+++ b/app/routes/$language/cart.tsx
@@ -0,0 +1,4 @@
+import Component, { loader, action } from '~/routes/cart';
+
+export { loader, action };
+export default Component;
diff --git a/app/routes/$language/collections/$collectionHandle.tsx b/app/routes/$language/collections/$collectionHandle.tsx
new file mode 100644
index 0000000000..cf02ccbf86
--- /dev/null
+++ b/app/routes/$language/collections/$collectionHandle.tsx
@@ -0,0 +1,4 @@
+import Component, { loader, meta } from '~/routes/collections/$collectionHandle';
+
+export { loader, meta };
+export default Component;
diff --git a/app/routes/$language/collections/all.tsx b/app/routes/$language/collections/all.tsx
new file mode 100644
index 0000000000..fc179d414e
--- /dev/null
+++ b/app/routes/$language/collections/all.tsx
@@ -0,0 +1 @@
+export { loader } from '~/routes/collections/all';
diff --git a/app/routes/$language/collections/index.tsx b/app/routes/$language/collections/index.tsx
new file mode 100644
index 0000000000..54a4f9448a
--- /dev/null
+++ b/app/routes/$language/collections/index.tsx
@@ -0,0 +1,4 @@
+import Component, { loader, meta } from '~/routes/collections/index';
+
+export { loader, meta };
+export default Component;
diff --git a/app/routes/$language/index.tsx b/app/routes/$language/index.tsx
new file mode 100644
index 0000000000..c369d93701
--- /dev/null
+++ b/app/routes/$language/index.tsx
@@ -0,0 +1,7 @@
+import Component from '~/routes/index';
+
+export default Component;
+
+// Everything in the #countryLang folder is a re-export of the route folder
+// Wondering if we can just have it as a build process (dynamically creates these
+// files based on the files in the routes folder) during build/hot reload process
diff --git a/app/routes/$language/journal/$journalHandle.tsx b/app/routes/$language/journal/$journalHandle.tsx
new file mode 100644
index 0000000000..f92ace8742
--- /dev/null
+++ b/app/routes/$language/journal/$journalHandle.tsx
@@ -0,0 +1,4 @@
+import Component, { loader, meta, links, CatchBoundary } from '~/routes/journal/$journalHandle';
+
+export { loader, meta, links, CatchBoundary };
+export default Component;
diff --git a/app/routes/$language/journal/index.tsx b/app/routes/$language/journal/index.tsx
new file mode 100644
index 0000000000..2754f4a262
--- /dev/null
+++ b/app/routes/$language/journal/index.tsx
@@ -0,0 +1,4 @@
+import Component, { loader, meta } from '~/routes/journal/index';
+
+export { loader, meta };
+export default Component;
diff --git a/app/routes/$language/products/$productHandle.tsx b/app/routes/$language/products/$productHandle.tsx
new file mode 100644
index 0000000000..3b405d6c74
--- /dev/null
+++ b/app/routes/$language/products/$productHandle.tsx
@@ -0,0 +1,4 @@
+import Component, { loader, action, ProductForm } from '~/routes/products/$productHandle';
+
+export { loader, action, ProductForm };
+export default Component;
diff --git a/app/routes/$language/products/index.tsx b/app/routes/$language/products/index.tsx
new file mode 100644
index 0000000000..d7886eba8e
--- /dev/null
+++ b/app/routes/$language/products/index.tsx
@@ -0,0 +1,4 @@
+import Component, { loader, meta } from '~/routes/products/index';
+
+export { loader, meta };
+export default Component;
diff --git a/app/routes/account.login.tsx b/app/routes/account.login.tsx
index 1ddd67a6ab..e1fca2d1ec 100644
--- a/app/routes/account.login.tsx
+++ b/app/routes/account.login.tsx
@@ -5,11 +5,12 @@ import {
   type ActionFunction,
   type LoaderArgs,
 } from "@remix-run/cloudflare";
-import { Form, Link, useActionData, useLoaderData } from "@remix-run/react";
+import { Form, useActionData, useLoaderData } from "@remix-run/react";
 import { useState } from "react";
 import { login, StorefrontApiError } from "~/data";
 import { getSession } from "~/lib/session.server";
 import { getInputStyleClasses } from "~/lib/utils";
+import { LinkI18n } from '~/components';
 
 export async function loader({ request, context }: LoaderArgs) {
   const session = await getSession(request, context);
@@ -173,20 +174,20 @@ export default function Login() {
           <div className="flex items-center mt-8 border-t border-gray-300">
             <p className="align-baseline text-sm mt-6">
               New to {shopName}? &nbsp;
-              <Link className="inline underline" to="/account/register">
+              <LinkI18n className="inline underline" to="/account/register">
                 Create an account
-              </Link>
+              </LinkI18n>
             </p>
           </div>
 
           <div className="flex items-center justify-between mt-4">
             <div className="flex-1"></div>
-            <Link
+            <LinkI18n
               className="inline-block align-baseline text-sm text-primary/50"
               to="/account/recover"
             >
               Forgot password
-            </Link>
+            </LinkI18n>
           </div>
         </Form>
       </div>
diff --git a/app/routes/collections/index.tsx b/app/routes/collections/index.tsx
index 9510d04061..6eb5b4fb93 100644
--- a/app/routes/collections/index.tsx
+++ b/app/routes/collections/index.tsx
@@ -1,7 +1,7 @@
 import { json, type MetaFunction } from "@remix-run/cloudflare";
-import { Link, useLoaderData } from "@remix-run/react";
+import { useLoaderData } from "@remix-run/react";
 import type { Collection } from "@shopify/hydrogen-ui-alpha/storefront-api-types";
-import { Grid, Heading, PageHeader, Section } from "~/components";
+import { Grid, Heading, PageHeader, Section, LinkI18n } from "~/components";
 import { getCollections } from "~/data";
 import { getImageLoadingPriority } from "~/lib/const";
 
@@ -46,7 +46,7 @@ function CollectionCard({
   loading?: HTMLImageElement["loading"];
 }) {
   return (
-    <Link to={`/collections/${collection.handle}`} className="grid gap-4">
+    <LinkI18n to={`/collections/${collection.handle}`} className="grid gap-4">
       <div className="card-image bg-primary/5 aspect-[3/2]">
         {collection?.image && (
           <img
@@ -62,6 +62,6 @@ function CollectionCard({
       <Heading as="h3" size="copy">
         {collection.title}
       </Heading>
-    </Link>
+    </LinkI18n>
   );
 }
diff --git a/app/routes/journal/index.tsx b/app/routes/journal/index.tsx
index 62a24baf8d..b04d286144 100644
--- a/app/routes/journal/index.tsx
+++ b/app/routes/journal/index.tsx
@@ -1,8 +1,8 @@
 import { json, type MetaFunction } from "@remix-run/cloudflare";
-import { Link, useLoaderData } from "@remix-run/react";
+import { useLoaderData } from "@remix-run/react";
 import { flattenConnection, Image } from "@shopify/hydrogen-ui-alpha";
 import type { Article } from "@shopify/hydrogen-ui-alpha/storefront-api-types";
-import { Grid, PageHeader, Section } from "~/components";
+import { Grid, PageHeader, Section, LinkI18n } from "~/components";
 import { getBlog } from "~/data";
 import { getImageLoadingPriority, PAGINATION_SIZE } from "~/lib/const";
 
@@ -80,7 +80,7 @@ function ArticleCard({
 }) {
   return (
     <li key={article.id}>
-      <Link to={`/${blogHandle}/${article.handle}`}>
+      <LinkI18n to={`/${blogHandle}/${article.handle}`}>
         {article.image && (
           <div className="card-image aspect-[3/2]">
             <Image
@@ -100,7 +100,7 @@ function ArticleCard({
         )}
         <h2 className="mt-4 font-medium">{article.title}</h2>
         <span className="block mt-1">{article.publishedAt}</span>
-      </Link>
+      </LinkI18n>
     </li>
   );
 }
diff --git a/app/routes/products/$productHandle.tsx b/app/routes/products/$productHandle.tsx
index d147eea10d..34cdb44982 100644
--- a/app/routes/products/$productHandle.tsx
+++ b/app/routes/products/$productHandle.tsx
@@ -6,7 +6,6 @@ import {
   redirect,
 } from "@remix-run/cloudflare";
 import {
-  Link,
   useLoaderData,
   Await,
   useSearchParams,
@@ -26,6 +25,7 @@ import {
   Section,
   Skeleton,
   Text,
+  LinkI18n,
 } from "~/components";
 import {
   addLineItem,
@@ -380,7 +380,7 @@ function ProductOptionLink({
   clonedSearchParams.set(optionName, optionValue);
 
   return (
-    <Link
+    <LinkI18n
       {...props}
       prefetch="intent"
       replace
@@ -390,7 +390,7 @@ function ProductOptionLink({
       }}
     >
       {children ?? optionValue}
-    </Link>
+    </LinkI18n>
   );
 }
 
@@ -428,12 +428,12 @@ function ProductDetail({
             />
             {learnMore && (
               <div className="">
-                <Link
+                <LinkI18n
                   className="pb-px border-b border-primary/30 text-primary/50"
                   to={learnMore}
                 >
                   Learn more
-                </Link>
+                </LinkI18n>
               </div>
             )}
           </Disclosure.Panel>

From 832e9a7d86df7b567bb8e30a8cad3efbb0e17626 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 4 Oct 2022 14:51:05 -0700
Subject: [PATCH 03/12] working internationization

---
 app/components/CountrySelector.tsx            |  38 +++--
 app/components/LinkI18n.tsx                   |   4 +-
 app/data/index.ts                             | 153 ++++++++++--------
 app/lib/utils.ts                              |  21 +++
 app/root.tsx                                  |  13 +-
 .../{$language => $lang}/[robots.txt].tsx     |   0
 .../{$language => $lang}/[sitemap.xml].tsx    |   0
 .../{$language => $lang}/account.login.tsx    |   0
 .../{$language => $lang}/account.logout.tsx   |   0
 app/routes/{$language => $lang}/account.tsx   |   0
 .../{$language => $lang}/account/edit.tsx     |   0
 app/routes/{$language => $lang}/cart.tsx      |   0
 .../collections/$collectionHandle.tsx         |   0
 .../{$language => $lang}/collections/all.tsx  |   0
 .../collections/index.tsx                     |   0
 app/routes/{$language => $lang}/index.tsx     |   0
 .../journal/$journalHandle.tsx                |   0
 .../{$language => $lang}/journal/index.tsx    |   0
 .../products/$productHandle.tsx               |   0
 .../{$language => $lang}/products/index.tsx   |   0
 app/routes/[sitemap.xml].tsx                  |   4 +-
 app/routes/account/edit.tsx                   |   4 +-
 app/routes/cart.tsx                           |  12 +-
 app/routes/collections/$collectionHandle.tsx  |   2 +-
 app/routes/collections/index.tsx              |   6 +-
 app/routes/journal/$journalHandle.tsx         |  11 +-
 app/routes/journal/index.tsx                  |  15 +-
 app/routes/products/$productHandle.tsx        |   7 +-
 app/routes/products/index.tsx                 |   4 +-
 29 files changed, 165 insertions(+), 129 deletions(-)
 rename app/routes/{$language => $lang}/[robots.txt].tsx (100%)
 rename app/routes/{$language => $lang}/[sitemap.xml].tsx (100%)
 rename app/routes/{$language => $lang}/account.login.tsx (100%)
 rename app/routes/{$language => $lang}/account.logout.tsx (100%)
 rename app/routes/{$language => $lang}/account.tsx (100%)
 rename app/routes/{$language => $lang}/account/edit.tsx (100%)
 rename app/routes/{$language => $lang}/cart.tsx (100%)
 rename app/routes/{$language => $lang}/collections/$collectionHandle.tsx (100%)
 rename app/routes/{$language => $lang}/collections/all.tsx (100%)
 rename app/routes/{$language => $lang}/collections/index.tsx (100%)
 rename app/routes/{$language => $lang}/index.tsx (100%)
 rename app/routes/{$language => $lang}/journal/$journalHandle.tsx (100%)
 rename app/routes/{$language => $lang}/journal/index.tsx (100%)
 rename app/routes/{$language => $lang}/products/$productHandle.tsx (100%)
 rename app/routes/{$language => $lang}/products/index.tsx (100%)

diff --git a/app/components/CountrySelector.tsx b/app/components/CountrySelector.tsx
index eb4406dfd4..5754beaf9d 100644
--- a/app/components/CountrySelector.tsx
+++ b/app/components/CountrySelector.tsx
@@ -1,9 +1,10 @@
 import { Link, useAsyncValue, useLocation, Await, useParams } from "@remix-run/react";
-import { Country } from "@shopify/hydrogen-ui-alpha/storefront-api-types";
+import { Country, CountryCode } from "@shopify/hydrogen-ui-alpha/storefront-api-types";
 
 import {Listbox} from '@headlessui/react';
 import { useState, Suspense } from "react";
 import { IconCaret, IconCheck } from "./Icon";
+import { getLocalizationFromLang } from "~/lib/utils";
 
 export function CountrySelector({
   defaultCountry,
@@ -16,10 +17,7 @@ export function CountrySelector({
   return (
     <Suspense fallback={<CountrySelectorFallback />}>
       <Await resolve={countries}>
-        <CountrySelectorElement
-          defaultCountry={defaultCountry}
-          selectedCountry={selectedCountry}
-        />
+        <CountrySelectorElement />
       </Await>
     </Suspense>
   )
@@ -32,7 +30,7 @@ function CountrySelectorFallback() {
       <Listbox.Button
           className={'flex items-center justify-between w-full py-3 px-4 border rounded border-contrast/30 dark:border-white'}
         >
-          <span className="">--</span>
+          <span>--</span>
           <IconCaret direction={'down'} />
         </Listbox.Button>
       </Listbox>
@@ -40,19 +38,15 @@ function CountrySelectorFallback() {
   )
 }
 
-function CountrySelectorElement({
-  defaultCountry,
-  selectedCountry
-}: {
-  defaultCountry: Country;
-  selectedCountry: string;
-}) {
+function CountrySelectorElement() {
   const [listboxOpen, setListboxOpen] = useState(false);
   const countries = useAsyncValue<Array <Country>>();
   const { pathname } = useLocation();
-  const { language } = useParams();
-  const strippedPathname = pathname.replace(new RegExp(`^\/${language}\/`), '/')
-  const currentCountry = countries.find(country => country.isoCode === selectedCountry) || defaultCountry;
+  const { lang } = useParams();
+  const { language, country } = getLocalizationFromLang(lang);
+  const languageIsoCode = language.toLowerCase();
+  const strippedPathname = pathname.replace(new RegExp(`^\/${lang}\/`), '/')
+  const currentCountry = countries.find(c => c.isoCode === country);
 
   return (
     <div className="relative">
@@ -66,7 +60,11 @@ function CountrySelectorElement({
                   open ? 'rounded-b md:rounded-t md:rounded-b-none' : 'rounded'
                 } border-contrast/30 dark:border-white`}
               >
-                <span className="">{currentCountry.name} ({currentCountry.currency.isoCode} {currentCountry.currency.symbol})</span>
+                <span>{
+                  currentCountry ?
+                    `${currentCountry.name} (${currentCountry.currency.isoCode} ${currentCountry.currency.symbol})` :
+                    '--'
+                }</span>
                 <IconCaret direction={open ? 'up' : 'down'} />
               </Listbox.Button>
 
@@ -79,13 +77,13 @@ function CountrySelectorElement({
                 }`}
               >
                 {listboxOpen && Object.values(countries).map(country => {
-                  const isSelected = country.isoCode === currentCountry.isoCode;
-                  const countryIsoCode = country.isoCode.toLocaleLowerCase();
+                  const isSelected = country.isoCode === currentCountry?.isoCode;
+                  const countryIsoCode = country.isoCode.toLowerCase();
                   return (
                     <Listbox.Option key={country.isoCode} value={country}>
                       {({active}) => (
                         <Link
-                          to={countryIsoCode !== 'us' ? `/${countryIsoCode}${strippedPathname}` : strippedPathname}
+                          to={countryIsoCode !== 'us' ? `/${languageIsoCode}-${countryIsoCode}${strippedPathname}` : strippedPathname}
                           className={`text-contrast dark:text-primary text-contrast dark:text-primary bg-primary
                           dark:bg-contrast w-full p-2 transition rounded
                           flex justify-start items-center text-left cursor-pointer ${
diff --git a/app/components/LinkI18n.tsx b/app/components/LinkI18n.tsx
index c495d8f814..a91524cf00 100644
--- a/app/components/LinkI18n.tsx
+++ b/app/components/LinkI18n.tsx
@@ -2,8 +2,8 @@ import { Link, useParams } from "@remix-run/react";
 
 export function LinkI18n(props: any) {
   const { to, ...resOfProps } = props;
-  const { language } = useParams();
-  const hrefWithCountryLang = language ? `/${language}${to}` : to;
+  const { lang } = useParams();
+  const hrefWithCountryLang = lang ? `/${lang}${to}` : to;
 
   return <Link to={hrefWithCountryLang} {...resOfProps} />
 }
diff --git a/app/data/index.ts b/app/data/index.ts
index 10c3300a97..637b63eabe 100644
--- a/app/data/index.ts
+++ b/app/data/index.ts
@@ -10,7 +10,6 @@ import type {
   ProductConnection,
   ProductVariant,
   SelectedOptionInput,
-  LanguageCode,
   Blog,
   PageConnection,
   Shop,
@@ -27,10 +26,11 @@ import {
   getPublicTokenHeaders,
   getStorefrontApiUrl,
 } from "~/lib/shopify-client";
-import { type EnhancedMenu, parseMenu, getApiErrorMessage } from "~/lib/utils";
+import { type EnhancedMenu, parseMenu, getApiErrorMessage, getLocalizationFromLang } from "~/lib/utils";
 import invariant from "tiny-invariant";
 import { logout } from "~/routes/account.logout";
 import type { AppLoadContext } from "@remix-run/cloudflare";
+import { type Params } from "@remix-run/react";
 
 type StorefrontApiResponse<T> = StorefrontApiResponseOk<T>;
 
@@ -78,8 +78,8 @@ export interface LayoutData {
   cart?: Promise<Cart>;
 }
 
-export async function getLayoutData() {
-  const languageCode = "EN";
+export async function getLayoutData(params: Params) {
+  const { language } = getLocalizationFromLang(params.lang);
 
   const HEADER_MENU_HANDLE = "main-menu";
   const FOOTER_MENU_HANDLE = "footer";
@@ -87,7 +87,7 @@ export async function getLayoutData() {
   const { data } = await getStorefrontData<LayoutData>({
     query: LAYOUT_QUERY,
     variables: {
-      language: languageCode,
+      language: language,
       headerMenuHandle: HEADER_MENU_HANDLE,
       footerMenuHandle: FOOTER_MENU_HANDLE,
     },
@@ -188,11 +188,10 @@ const COUNTRIES_QUERY = `#graphql
 
 export async function getProductData(
   handle: string,
-  searchParams: URLSearchParams
+  searchParams: URLSearchParams,
+  params: Params
 ) {
-  // TODO: Figure out localization stuff
-  const languageCode = "EN";
-  const countryCode = "US";
+  const { language, country } = getLocalizationFromLang(params.lang);
 
   let selectedOptions: SelectedOptionInput[] = [];
   searchParams.forEach((value, name) => {
@@ -205,8 +204,8 @@ export async function getProductData(
   }>({
     query: PRODUCT_QUERY,
     variables: {
-      country: countryCode,
-      language: languageCode,
+      country,
+      language,
       selectedOptions,
       handle,
     },
@@ -388,11 +387,12 @@ const RECOMMENDED_PRODUCTS_QUERY = `#graphql
   }
 `;
 
-export async function getRecommendedProducts(productId: string, count = 12) {
-  // TODO: You know what to do
-  const languageCode = "EN";
-  const countryCode = "US";
-
+export async function getRecommendedProducts(
+  productId: string,
+  params: Params,
+  count = 12
+) {
+  const { language, country } = getLocalizationFromLang(params.lang);
   const { data: products } = await getStorefrontData<{
     recommended: Product[];
     additional: ProductConnection;
@@ -401,8 +401,8 @@ export async function getRecommendedProducts(productId: string, count = 12) {
     variables: {
       productId,
       count,
-      language: languageCode,
-      country: countryCode,
+      language,
+      country,
     },
   });
 
@@ -453,11 +453,10 @@ const COLLECTIONS_QUERY = `#graphql
 `;
 
 export async function getCollections(
+  params: Params,
   { paginationSize } = { paginationSize: 8 }
 ) {
-  // TODO: You know what to do
-  const languageCode = "EN";
-  const countryCode = "US";
+  const { language, country } = getLocalizationFromLang(params.lang);
 
   const { data } = await getStorefrontData<{
     collections: CollectionConnection;
@@ -465,8 +464,8 @@ export async function getCollections(
     query: COLLECTIONS_QUERY,
     variables: {
       pageBy: paginationSize,
-      country: countryCode,
-      language: languageCode,
+      country,
+      language,
     },
   });
 
@@ -517,14 +516,14 @@ export async function getCollection({
   handle,
   paginationSize = 48,
   cursor,
+  params,
 }: {
   handle: string;
   paginationSize?: number;
   cursor?: string;
+  params: Params;
 }) {
-  // TODO: You know what to do
-  const languageCode = "EN";
-  const countryCode = "US";
+  const { language, country } = getLocalizationFromLang(params.lang);
 
   const { data } = await getStorefrontData<{
     collection: Collection;
@@ -533,8 +532,8 @@ export async function getCollection({
     variables: {
       handle,
       cursor,
-      language: languageCode,
-      country: countryCode,
+      language,
+      country,
       pageBy: paginationSize,
     },
   });
@@ -572,13 +571,13 @@ const ALL_PRODUCTS_QUERY = `#graphql
 export async function getAllProducts({
   paginationSize = 48,
   cursor,
+  params,
 }: {
   paginationSize?: number;
   cursor?: string;
+  params: Params;
 }) {
-  // TODO: You know what to do
-  const languageCode = "EN";
-  const countryCode = "US";
+  const { language, country } = getLocalizationFromLang(params.lang);
 
   const { data } = await getStorefrontData<{
     products: ProductConnection;
@@ -586,8 +585,8 @@ export async function getAllProducts({
     query: ALL_PRODUCTS_QUERY,
     variables: {
       cursor,
-      language: languageCode,
-      country: countryCode,
+      language,
+      country,
       pageBy: paginationSize,
     },
   });
@@ -709,9 +708,8 @@ mutation CartCreate($input: CartInput!, $country: CountryCode = ZZ) @inContext(c
 }
 `;
 
-export async function createCart({ cart }: { cart: CartInput }) {
-  // TODO: You know what to do
-  const countryCode = "US";
+export async function createCart({ cart, params }: { cart: CartInput, params: Params }) {
+  const { country } = getLocalizationFromLang(params.lang);
 
   const { data } = await getStorefrontData<{
     cartCreate: {
@@ -721,7 +719,7 @@ export async function createCart({ cart }: { cart: CartInput }) {
     query: CREATE_CART_MUTATION,
     variables: {
       input: cart,
-      country: countryCode,
+      country,
     },
   });
 
@@ -743,12 +741,13 @@ const ADD_LINE_ITEM_QUERY = `#graphql
 export async function addLineItem({
   cartId,
   lines,
+  params
 }: {
   cartId: string;
   lines: CartLineInput[];
+  params: Params;
 }) {
-  // TODO: You know what to do
-  const countryCode = "US";
+  const { country } = getLocalizationFromLang(params.lang);
 
   const { data } = await getStorefrontData<{
     cartLinesAdd: {
@@ -756,7 +755,7 @@ export async function addLineItem({
     };
   }>({
     query: ADD_LINE_ITEM_QUERY,
-    variables: { cartId, lines, country: countryCode },
+    variables: { cartId, lines, country },
   });
 
   invariant(data, "No data returned from Shopify API");
@@ -774,15 +773,17 @@ const CART_QUERY = `#graphql
   ${CART_FRAGMENT}
 `;
 
-export async function getCart({ cartId }: { cartId: string }) {
-  // TODO: Yes
-  const countryCode = "US";
+export async function getCart({ cartId, params }: {
+  cartId: string;
+  params: Params;
+}) {
+  const { country } = getLocalizationFromLang(params.lang);
 
   const { data } = await getStorefrontData<{ cart: Cart }>({
     query: CART_QUERY,
     variables: {
       cartId,
-      country: countryCode,
+      country,
     },
   });
 
@@ -806,11 +807,13 @@ const UPDATE_LINE_ITEM_QUERY = `#graphql
 export async function updateLineItem({
   cartId,
   lineItem,
+  params,
 }: {
   cartId: string;
   lineItem: CartLineUpdateInput;
+  params: Params;
 }) {
-  const countryCode = "US";
+  const { country } = getLocalizationFromLang(params.lang);
 
   const { data } = await getStorefrontData<{ cartLinesUpdate: { cart: Cart } }>(
     {
@@ -818,7 +821,7 @@ export async function updateLineItem({
       variables: {
         cartId,
         lines: [lineItem],
-        country: countryCode,
+        country,
       },
     }
   );
@@ -832,8 +835,8 @@ const TOP_PRODUCTS_QUERY = `#graphql
   ${PRODUCT_CARD_FRAGMENT}
   query topProducts(
     $count: Int
-    $countryCode: CountryCode
-    $languageCode: LanguageCode
+    $country: CountryCode
+    $language: LanguageCode
   ) @inContext(country: $countryCode, language: $languageCode) {
     products(first: $count, sortKey: BEST_SELLING) {
       nodes {
@@ -843,9 +846,11 @@ const TOP_PRODUCTS_QUERY = `#graphql
   }
 `;
 
-export async function getTopProducts({ count = 4 }: { count?: number } = {}) {
-  const countryCode = "US";
-  const languageCode = "EN";
+export async function getTopProducts({ params, count = 4 }: {
+  params: Params;
+  count?: number
+}) {
+  const { language, country } = getLocalizationFromLang(params.lang);
 
   const { data } = await getStorefrontData<{
     products: ProductConnection;
@@ -853,8 +858,8 @@ export async function getTopProducts({ count = 4 }: { count?: number } = {}) {
     query: TOP_PRODUCTS_QUERY,
     variables: {
       count,
-      countryCode,
-      languageCode,
+      country,
+      language,
     },
   });
 
@@ -913,13 +918,20 @@ interface SitemapQueryData {
   pages: PageConnection;
 }
 
-export async function getSitemap(variables: {
-  language: string;
+export async function getSitemap({
+  params,
+  urlLimits,
+}: {
+  params: Params;
   urlLimits: number;
 }) {
+  const { language } = getLocalizationFromLang(params.lang);
   const { data } = await getStorefrontData<SitemapQueryData>({
     query: SITEMAP_QUERY,
-    variables,
+    variables: {
+      urlLimits,
+      language,
+    },
   });
 
   invariant(data, "Sitemap data is missing");
@@ -961,14 +973,15 @@ query Blog(
 `;
 
 export async function getBlog({
-  language,
+  params,
   paginationSize,
   blogHandle,
 }: {
-  language: LanguageCode;
+  params: Params;
   blogHandle: string;
   paginationSize: number;
 }) {
+  const { language } = getLocalizationFromLang(params.lang);
   const { data } = await getStorefrontData<{
     blog: Blog;
   }>({
@@ -1015,16 +1028,25 @@ const ARTICLE_QUERY = `#graphql
   }
 `;
 
-export async function getArticle(variables: {
-  language: LanguageCode;
+export async function getArticle({
+  params,
+  blogHandle,
+  articleHandle,
+}: {
+  params: Params;
   blogHandle: string;
   articleHandle: string;
 }) {
+  const { language } = getLocalizationFromLang(params.lang);
   const { data } = await getStorefrontData<{
     blog: Blog;
   }>({
     query: ARTICLE_QUERY,
-    variables,
+    variables: {
+      blogHandle,
+      articleHandle,
+      language
+    },
   });
 
   invariant(data, "No data returned from Shopify API");
@@ -1254,13 +1276,14 @@ export async function getCustomer({
   request,
   context,
   customerAccessToken,
+  params,
 }: {
   request: Request;
   context: AppLoadContext;
   customerAccessToken: string;
+  params: Params;
 }) {
-  const countryCode = "US";
-  const languageCode = "EN";
+  const { language, country } = getLocalizationFromLang(params.lang);
 
   const { data } = await getStorefrontData<{
     customer: Customer;
@@ -1268,8 +1291,8 @@ export async function getCustomer({
     query: CUSTOMER_QUERY,
     variables: {
       customerAccessToken,
-      country: countryCode,
-      language: languageCode,
+      country,
+      language,
     },
   });
 
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index 50b60d2878..b336831264 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -1,8 +1,11 @@
+import { type Params } from "@remix-run/react";
 import type {
   MenuItem,
   Menu,
   MoneyV2,
   UserError,
+  CountryCode,
+  LanguageCode,
 } from "@shopify/hydrogen-ui-alpha/storefront-api-types";
 
 // @ts-expect-error types not available
@@ -250,3 +253,21 @@ export function getApiErrorMessage(
     return data[field].customerUserErrors[0].message;
   return null;
 }
+
+export function getLocalizationFromLang(lang?: String): {
+  language: LanguageCode,
+  country: CountryCode
+} {
+  if (lang) {
+    const [language, country] = lang.split('-');
+
+    return {
+      language: language.toUpperCase() as LanguageCode,
+      country: (country.toUpperCase() || 'US') as CountryCode,
+    }
+  }
+  return {
+    language: 'EN' as LanguageCode,
+    country: 'US' as CountryCode,
+  }
+}
diff --git a/app/root.tsx b/app/root.tsx
index 1a10e1eda0..ee3b3946dc 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -47,22 +47,15 @@ export const meta: MetaFunction = () => ({
 export const loader: LoaderFunction = async function loader({
   request,
   context,
+  params
 }) {
   const session = await getSession(request, context);
   const cartId = await session.get("cartId");
 
   return defer({
-    layout: await getLayoutData(),
-    defaultCountry: await {
-      currency: {
-        isoCode: "USD",
-        symbol: "$",
-      },
-      isoCode: "US",
-      name: "United States",
-    },
+    layout: await getLayoutData(params),
     countries: getCountries(),
-    cart: cartId ? getCart({ cartId }) : undefined,
+    cart: cartId ? getCart({ cartId, params }) : undefined,
   });
 };
 
diff --git a/app/routes/$language/[robots.txt].tsx b/app/routes/$lang/[robots.txt].tsx
similarity index 100%
rename from app/routes/$language/[robots.txt].tsx
rename to app/routes/$lang/[robots.txt].tsx
diff --git a/app/routes/$language/[sitemap.xml].tsx b/app/routes/$lang/[sitemap.xml].tsx
similarity index 100%
rename from app/routes/$language/[sitemap.xml].tsx
rename to app/routes/$lang/[sitemap.xml].tsx
diff --git a/app/routes/$language/account.login.tsx b/app/routes/$lang/account.login.tsx
similarity index 100%
rename from app/routes/$language/account.login.tsx
rename to app/routes/$lang/account.login.tsx
diff --git a/app/routes/$language/account.logout.tsx b/app/routes/$lang/account.logout.tsx
similarity index 100%
rename from app/routes/$language/account.logout.tsx
rename to app/routes/$lang/account.logout.tsx
diff --git a/app/routes/$language/account.tsx b/app/routes/$lang/account.tsx
similarity index 100%
rename from app/routes/$language/account.tsx
rename to app/routes/$lang/account.tsx
diff --git a/app/routes/$language/account/edit.tsx b/app/routes/$lang/account/edit.tsx
similarity index 100%
rename from app/routes/$language/account/edit.tsx
rename to app/routes/$lang/account/edit.tsx
diff --git a/app/routes/$language/cart.tsx b/app/routes/$lang/cart.tsx
similarity index 100%
rename from app/routes/$language/cart.tsx
rename to app/routes/$lang/cart.tsx
diff --git a/app/routes/$language/collections/$collectionHandle.tsx b/app/routes/$lang/collections/$collectionHandle.tsx
similarity index 100%
rename from app/routes/$language/collections/$collectionHandle.tsx
rename to app/routes/$lang/collections/$collectionHandle.tsx
diff --git a/app/routes/$language/collections/all.tsx b/app/routes/$lang/collections/all.tsx
similarity index 100%
rename from app/routes/$language/collections/all.tsx
rename to app/routes/$lang/collections/all.tsx
diff --git a/app/routes/$language/collections/index.tsx b/app/routes/$lang/collections/index.tsx
similarity index 100%
rename from app/routes/$language/collections/index.tsx
rename to app/routes/$lang/collections/index.tsx
diff --git a/app/routes/$language/index.tsx b/app/routes/$lang/index.tsx
similarity index 100%
rename from app/routes/$language/index.tsx
rename to app/routes/$lang/index.tsx
diff --git a/app/routes/$language/journal/$journalHandle.tsx b/app/routes/$lang/journal/$journalHandle.tsx
similarity index 100%
rename from app/routes/$language/journal/$journalHandle.tsx
rename to app/routes/$lang/journal/$journalHandle.tsx
diff --git a/app/routes/$language/journal/index.tsx b/app/routes/$lang/journal/index.tsx
similarity index 100%
rename from app/routes/$language/journal/index.tsx
rename to app/routes/$lang/journal/index.tsx
diff --git a/app/routes/$language/products/$productHandle.tsx b/app/routes/$lang/products/$productHandle.tsx
similarity index 100%
rename from app/routes/$language/products/$productHandle.tsx
rename to app/routes/$lang/products/$productHandle.tsx
diff --git a/app/routes/$language/products/index.tsx b/app/routes/$lang/products/index.tsx
similarity index 100%
rename from app/routes/$language/products/index.tsx
rename to app/routes/$lang/products/index.tsx
diff --git a/app/routes/[sitemap.xml].tsx b/app/routes/[sitemap.xml].tsx
index c2ac98a48e..9c23b88448 100644
--- a/app/routes/[sitemap.xml].tsx
+++ b/app/routes/[sitemap.xml].tsx
@@ -4,9 +4,9 @@ import { getSitemap } from "~/data";
 
 const MAX_URLS = 250; // the google limit is 50K, however, SF API only allow querying for 250 resources each time
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request, params }: LoaderArgs) {
   const data = await getSitemap({
-    language: "EN",
+    params,
     urlLimits: MAX_URLS,
   });
 
diff --git a/app/routes/account/edit.tsx b/app/routes/account/edit.tsx
index 5d192cfd8a..e0cba527da 100644
--- a/app/routes/account/edit.tsx
+++ b/app/routes/account/edit.tsx
@@ -43,7 +43,7 @@ const formDataHas = (formData: FormData, key: string) => {
   return typeof value === "string" && value.length > 0;
 };
 
-export const action: ActionFunction = async ({ request, context }) => {
+export const action: ActionFunction = async ({ request, context, params }) => {
   const [formData, session] = await Promise.all([
     request.formData(),
     getSession(request, context),
@@ -58,7 +58,7 @@ export const action: ActionFunction = async ({ request, context }) => {
 
   // Double-check current user is logged in.
   // Will throw a logout redirect if not.
-  await getCustomer({ customerAccessToken, request, context });
+  await getCustomer({ customerAccessToken, request, context, params });
 
   if (
     formDataHas(formData, "newPassword") &&
diff --git a/app/routes/cart.tsx b/app/routes/cart.tsx
index 81b8df00d1..548b0e86cf 100644
--- a/app/routes/cart.tsx
+++ b/app/routes/cart.tsx
@@ -1,15 +1,15 @@
-import { type ActionFunction, json, defer } from "@remix-run/cloudflare";
+import { type ActionFunction, json, defer, LoaderArgs } from "@remix-run/cloudflare";
 import invariant from "tiny-invariant";
 import { getTopProducts, updateLineItem } from "~/data";
 import { getSession } from "~/lib/session.server";
 
-export async function loader() {
+export async function loader({params}: LoaderArgs) {
   return defer({
-    topProducts: getTopProducts(),
+    topProducts: getTopProducts({params}),
   });
 }
 
-export const action: ActionFunction = async ({ request, context }) => {
+export const action: ActionFunction = async ({ request, context, params }) => {
   const [session, formData] = await Promise.all([
     getSession(request, context),
     new URLSearchParams(await request.text()),
@@ -30,7 +30,7 @@ export const action: ActionFunction = async ({ request, context }) => {
   switch (intent) {
     case "set-quantity": {
       const quantity = Number(formData.get("quantity"));
-      await updateLineItem({ cartId, lineItem: { id: lineId, quantity } });
+      await updateLineItem({ cartId, lineItem: { id: lineId, quantity }, params });
       break;
     }
 
@@ -39,7 +39,7 @@ export const action: ActionFunction = async ({ request, context }) => {
        * We're re-using the same mutation as setting a quantity of 0,
        * but theoretically we could use the `cartLinesRemove` mutation.
        */
-      await updateLineItem({ cartId, lineItem: { id: lineId, quantity: 0 } });
+      await updateLineItem({ cartId, lineItem: { id: lineId, quantity: 0 }, params });
       break;
     }
   }
diff --git a/app/routes/collections/$collectionHandle.tsx b/app/routes/collections/$collectionHandle.tsx
index 9542f5e265..48711d7210 100644
--- a/app/routes/collections/$collectionHandle.tsx
+++ b/app/routes/collections/$collectionHandle.tsx
@@ -17,7 +17,7 @@ export async function loader({ params, request }: LoaderArgs) {
   invariant(collectionHandle, "Missing collectionHandle param");
 
   const cursor = new URL(request.url).searchParams.get("cursor") ?? undefined;
-  const collection = await getCollection({ handle: collectionHandle, cursor });
+  const collection = await getCollection({ handle: collectionHandle, cursor, params });
 
   return json({ collection });
 }
diff --git a/app/routes/collections/index.tsx b/app/routes/collections/index.tsx
index 6eb5b4fb93..81b52f8521 100644
--- a/app/routes/collections/index.tsx
+++ b/app/routes/collections/index.tsx
@@ -1,12 +1,12 @@
-import { json, type MetaFunction } from "@remix-run/cloudflare";
+import { json, LoaderArgs, type MetaFunction } from "@remix-run/cloudflare";
 import { useLoaderData } from "@remix-run/react";
 import type { Collection } from "@shopify/hydrogen-ui-alpha/storefront-api-types";
 import { Grid, Heading, PageHeader, Section, LinkI18n } from "~/components";
 import { getCollections } from "~/data";
 import { getImageLoadingPriority } from "~/lib/const";
 
-export const loader = async () => {
-  const collections = await getCollections();
+export const loader = async ({ params }: LoaderArgs) => {
+  const collections = await getCollections(params);
 
   return json({ collections });
 };
diff --git a/app/routes/journal/$journalHandle.tsx b/app/routes/journal/$journalHandle.tsx
index 93114be941..915868e4f7 100644
--- a/app/routes/journal/$journalHandle.tsx
+++ b/app/routes/journal/$journalHandle.tsx
@@ -11,25 +11,24 @@ import invariant from "tiny-invariant";
 import { PageHeader, Section } from "~/components";
 import { getArticle } from "~/data";
 import { ATTR_LOADING_EAGER } from "~/lib/const";
+import { getLocalizationFromLang } from "~/lib/utils";
 import styles from "../../styles/custom-font.css";
 
 const BLOG_HANDLE = "journal";
 
-export async function loader({ request, params }: LoaderArgs) {
-  // TODO figure out localization
-  const languageCode = "EN";
-  const countryCode = "US";
+export async function loader({ params }: LoaderArgs) {
+  const { language, country } = getLocalizationFromLang(params.lang);
 
   invariant(params.journalHandle, "Missing journal handle");
 
   const article = await getArticle({
     blogHandle: BLOG_HANDLE,
     articleHandle: params.journalHandle,
-    language: languageCode,
+    params,
   });
 
   const formattedDate = new Intl.DateTimeFormat(
-    `${languageCode}-${countryCode}`,
+    `${language}-${country}`,
     {
       year: "numeric",
       month: "long",
diff --git a/app/routes/journal/index.tsx b/app/routes/journal/index.tsx
index b04d286144..c26dd1f897 100644
--- a/app/routes/journal/index.tsx
+++ b/app/routes/journal/index.tsx
@@ -1,29 +1,28 @@
-import { json, type MetaFunction } from "@remix-run/cloudflare";
+import { json, LoaderArgs, type MetaFunction } from "@remix-run/cloudflare";
 import { useLoaderData } from "@remix-run/react";
 import { flattenConnection, Image } from "@shopify/hydrogen-ui-alpha";
 import type { Article } from "@shopify/hydrogen-ui-alpha/storefront-api-types";
 import { Grid, PageHeader, Section, LinkI18n } from "~/components";
 import { getBlog } from "~/data";
 import { getImageLoadingPriority, PAGINATION_SIZE } from "~/lib/const";
+import { getLocalizationFromLang } from "~/lib/utils";
 
 const BLOG_HANDLE = "Journal";
 
-export const loader = async () => {
-  // TODO figure out localization
-  const languageCode = "EN";
-  const countryCode = "US";
-
+export const loader = async ({params}: LoaderArgs) => {
   const journals = await getBlog({
-    language: languageCode,
+    params,
     blogHandle: BLOG_HANDLE,
     paginationSize: PAGINATION_SIZE,
   });
 
+  const { language, country } = getLocalizationFromLang(params.lang);
+
   const articles = flattenConnection(journals).map((article) => {
     const { publishedAt } = article;
     return {
       ...article,
-      publishedAt: new Intl.DateTimeFormat(`${languageCode}-${countryCode}`, {
+      publishedAt: new Intl.DateTimeFormat(`${language}-${country}`, {
         year: "numeric",
         month: "long",
         day: "numeric",
diff --git a/app/routes/products/$productHandle.tsx b/app/routes/products/$productHandle.tsx
index 34cdb44982..11e70bdf11 100644
--- a/app/routes/products/$productHandle.tsx
+++ b/app/routes/products/$productHandle.tsx
@@ -44,13 +44,14 @@ export const loader = async ({ params, request }: LoaderArgs) => {
 
   const { shop, product } = await getProductData(
     productHandle,
-    new URL(request.url).searchParams
+    new URL(request.url).searchParams,
+    params
   );
 
   return defer({
     product,
     shop,
-    recommended: getRecommendedProducts(product.id),
+    recommended: getRecommendedProducts(product.id, params),
   });
 };
 
@@ -75,6 +76,7 @@ export const action: ActionFunction = async ({ request, context, params }) => {
   if (!cartId) {
     const cart = await createCart({
       cart: { lines: [{ merchandiseId: variantId }] },
+      params
     });
 
     session.set("cartId", cart.id);
@@ -84,6 +86,7 @@ export const action: ActionFunction = async ({ request, context, params }) => {
     await addLineItem({
       cartId,
       lines: [{ merchandiseId: variantId }],
+      params,
     });
   }
 
diff --git a/app/routes/products/index.tsx b/app/routes/products/index.tsx
index 40b4bc62c8..d4a154390c 100644
--- a/app/routes/products/index.tsx
+++ b/app/routes/products/index.tsx
@@ -4,9 +4,9 @@ import type { Collection } from "@shopify/hydrogen-ui-alpha/storefront-api-types
 import { PageHeader, Section, ProductGrid } from "~/components";
 import { getAllProducts } from "~/data";
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request, params }: LoaderArgs) {
   const cursor = new URL(request.url).searchParams.get("cursor") ?? undefined;
-  const products = await getAllProducts({ cursor });
+  const products = await getAllProducts({ cursor, params });
 
   return products;
 }

From c6f2ca90c1268c305165169e6d5b354f9371363f Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 4 Oct 2022 15:18:08 -0700
Subject: [PATCH 04/12] clean up

---
 app/components/CountrySelector.tsx | 175 +++++++++++++----------------
 app/components/Layout.tsx          |  57 ++--------
 app/components/LinkI18n.tsx        |   8 +-
 app/hooks/useCountries.tsx         |  12 ++
 app/lib/utils.ts                   |  10 +-
 5 files changed, 113 insertions(+), 149 deletions(-)
 create mode 100644 app/hooks/useCountries.tsx

diff --git a/app/components/CountrySelector.tsx b/app/components/CountrySelector.tsx
index 5754beaf9d..ce4acc3c4c 100644
--- a/app/components/CountrySelector.tsx
+++ b/app/components/CountrySelector.tsx
@@ -1,111 +1,92 @@
-import { Link, useAsyncValue, useLocation, Await, useParams } from "@remix-run/react";
-import { Country, CountryCode } from "@shopify/hydrogen-ui-alpha/storefront-api-types";
-
+import { Link, useLocation, useParams } from "@remix-run/react";
 import {Listbox} from '@headlessui/react';
-import { useState, Suspense } from "react";
 import { IconCaret, IconCheck } from "./Icon";
+import {useRef} from 'react';
 import { getLocalizationFromLang } from "~/lib/utils";
+import {useCountries} from '~/hooks/useCountries'
+import {Heading} from '~/components'
 
-export function CountrySelector({
-  defaultCountry,
-  countries,
-}: {
-  defaultCountry: Country;
-  countries: Array <Country>;
-}) {
-  const selectedCountry = defaultCountry.isoCode;
-  return (
-    <Suspense fallback={<CountrySelectorFallback />}>
-      <Await resolve={countries}>
-        <CountrySelectorElement />
-      </Await>
-    </Suspense>
-  )
-}
-
-function CountrySelectorFallback() {
-  return (
-    <div className="relative">
-      <Listbox>
-      <Listbox.Button
-          className={'flex items-center justify-between w-full py-3 px-4 border rounded border-contrast/30 dark:border-white'}
-        >
-          <span>--</span>
-          <IconCaret direction={'down'} />
-        </Listbox.Button>
-      </Listbox>
-    </div>
-  )
-}
-
-function CountrySelectorElement() {
-  const [listboxOpen, setListboxOpen] = useState(false);
-  const countries = useAsyncValue<Array <Country>>();
+export function CountrySelector() {
+  const countries = useCountries();
+  const closeRef = useRef<HTMLButtonElement | undefined>();
   const { pathname } = useLocation();
   const { lang } = useParams();
   const { language, country } = getLocalizationFromLang(lang);
   const languageIsoCode = language.toLowerCase();
   const strippedPathname = pathname.replace(new RegExp(`^\/${lang}\/`), '/')
-  const currentCountry = countries.find(c => c.isoCode === country);
+  const currentCountry = countries?.length
+    ? countries.find(c => c.isoCode === country)
+    : null
 
   return (
-    <div className="relative">
-      <Listbox>
-        {({open}) => {
-          setTimeout(() => setListboxOpen(open));
-          return (
-            <>
-              <Listbox.Button
-                className={`flex items-center justify-between w-full py-3 px-4 border ${
-                  open ? 'rounded-b md:rounded-t md:rounded-b-none' : 'rounded'
-                } border-contrast/30 dark:border-white`}
-              >
-                <span>{
-                  currentCountry ?
-                    `${currentCountry.name} (${currentCountry.currency.isoCode} ${currentCountry.currency.symbol})` :
-                    '--'
-                }</span>
-                <IconCaret direction={open ? 'up' : 'down'} />
-              </Listbox.Button>
+    !countries ? null : (
+      <section className="grid gap-4 w-full md:max-w-[335px] md:ml-auto">
+        <Heading size="lead" className="cursor-default" as="h3">
+          Country
+        </Heading>
+        <div className="relative">
+          <Listbox>
+            {({open}) => {
+              return (
+                <>
+                  <Listbox.Button
+                    ref={closeRef}
+                    className={`flex items-center justify-between w-full py-3 px-4 border ${
+                      open ? 'rounded-b md:rounded-t md:rounded-b-none' : 'rounded'
+                    } border-contrast/30 dark:border-white`}
+                  >
+                    <span>{
+                      currentCountry ?
+                        `${currentCountry.name} (${currentCountry.currency.isoCode} ${currentCountry.currency.symbol})` :
+                        '--'
+                    }</span>
+                    <IconCaret direction={open ? 'up' : 'down'} />
+                  </Listbox.Button>
 
-              <Listbox.Options
-                className={`border-t-contrast/30 border-contrast/30 bg-primary dark:bg-contrast absolute bottom-12 z-10 grid
-                h-48 w-full overflow-y-scroll rounded-t border dark:border-white px-2 py-2
-                transition-[max-height] duration-150 sm:bottom-auto md:rounded-b md:rounded-t-none
-                md:border-t-0 md:border-b ${
-                  listboxOpen ? 'max-h-48' : 'max-h-0'
-                }`}
-              >
-                {listboxOpen && Object.values(countries).map(country => {
-                  const isSelected = country.isoCode === currentCountry?.isoCode;
-                  const countryIsoCode = country.isoCode.toLowerCase();
-                  return (
-                    <Listbox.Option key={country.isoCode} value={country}>
-                      {({active}) => (
-                        <Link
-                          to={countryIsoCode !== 'us' ? `/${languageIsoCode}-${countryIsoCode}${strippedPathname}` : strippedPathname}
-                          className={`text-contrast dark:text-primary text-contrast dark:text-primary bg-primary
-                          dark:bg-contrast w-full p-2 transition rounded
-                          flex justify-start items-center text-left cursor-pointer ${
-                            active ? 'bg-primary/10' : null
-                          }`}
-                        >
-                          {country.name} ({country.currency.isoCode} {country.currency.symbol})
-                          {isSelected ? (
-                            <span className="ml-2">
-                              <IconCheck />
-                            </span>
-                          ) : null}
-                        </Link>
-                      )}
-                    </Listbox.Option>
-                  );
-                })}
-              </Listbox.Options>
-            </>
-          );
-        }}
-      </Listbox>
-    </div>
+                  <Listbox.Options
+                    className={`border-t-contrast/30 border-contrast/30 bg-primary dark:bg-contrast absolute bottom-12 z-10 grid
+                    h-48 w-full overflow-y-scroll rounded-t border dark:border-white px-2 py-2
+                    transition-[max-height] duration-150 sm:bottom-auto md:rounded-b md:rounded-t-none
+                    md:border-t-0 md:border-b ${
+                      open ? 'max-h-48' : 'max-h-0'
+                    }`}
+                  >
+                    {open && Object.values(countries).map(country => {
+                      const isSelected = country.isoCode === currentCountry?.isoCode;
+                      const countryIsoCode = country.isoCode.toLowerCase();
+                      return (
+                        <Listbox.Option key={country.isoCode} value={country}>
+                          {({active}) => (
+                            <Link
+                              to={countryIsoCode !== 'us' ? `/${languageIsoCode}-${countryIsoCode}${strippedPathname}` : strippedPathname}
+                              className={`text-contrast dark:text-primary text-contrast dark:text-primary bg-primary
+                              dark:bg-contrast w-full p-2 transition rounded
+                              flex justify-start items-center text-left cursor-pointer ${
+                                active ? 'bg-primary/10' : null
+                              }`}
+                              onClick={() => {
+                                if (!closeRef?.current) return;
+                                closeRef?.current?.click();
+                              }}
+                            >
+                              {country.name} ({country.currency.isoCode} {country.currency.symbol})
+                              {isSelected ? (
+                                <span className="ml-2">
+                                  <IconCheck />
+                                </span>
+                              ) : null}
+                            </Link>
+                          )}
+                        </Listbox.Option>
+                      );
+                    })}
+                  </Listbox.Options>
+                </>
+              );
+            }}
+          </Listbox>
+        </div>
+      </section>
+    )
   );
 }
diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx
index 94f0cad5e4..623274bd7e 100644
--- a/app/components/Layout.tsx
+++ b/app/components/Layout.tsx
@@ -1,5 +1,4 @@
-import { useLocation } from "react-router";
-import type { EnhancedMenu, EnhancedMenuItem } from "~/lib/utils";
+import { type EnhancedMenu, type EnhancedMenuItem, isHomePath } from "~/lib/utils";
 import {
   Drawer,
   useDrawer,
@@ -17,14 +16,10 @@ import {
   CartEmpty,
   LinkI18n
 } from "~/components";
-import { Link, useFetcher } from "@remix-run/react";
+import { useFetcher } from "@remix-run/react";
 import { useWindowScroll } from "react-use";
 import { Disclosure } from "@headlessui/react";
 import type { LayoutData } from "~/data";
-import type {
-  Cart,
-  Country,
-} from "@shopify/hydrogen-ui-alpha/storefront-api-types";
 import { useEffect } from "react";
 import {useCart} from '~/hooks/useCart'
 
@@ -35,11 +30,9 @@ export function Layout({
   children: React.ReactNode;
   data?: {
     layout: LayoutData;
-    countries: Array<Country>;
-    defaultCountry: Country;
   };
 }) {
-  const { layout, countries, defaultCountry } = data || {};
+  const { layout } = data || {};
 
   return (
     <>
@@ -59,8 +52,6 @@ export function Layout({
       </div>
       <Footer
         menu={layout?.footerMenu}
-        countries={countries}
-        defaultCountry={defaultCountry}
       />
     </>
   );
@@ -73,12 +64,7 @@ function Header({
   title: string;
   menu?: EnhancedMenu;
 }) {
-  const { pathname } = useLocation();
-
-  // TODO: Ensure locale support like in Hydrogen
-  const isHome = pathname === "/";
-  const localeMatch = /^\/([a-z]{2})(\/|$)/i.exec(pathname);
-  const countryCode = localeMatch ? localeMatch[1] : null;
+  const isHome = isHomePath();
 
   const {
     isOpen: isCartOpen,
@@ -99,14 +85,12 @@ function Header({
         <MenuDrawer isOpen={isMenuOpen} onClose={closeMenu} menu={menu} />
       )}
       <DesktopHeader
-        countryCode={countryCode}
         isHome={isHome}
         title={title}
         menu={menu}
         openCart={openCart}
       />
       <MobileHeader
-        countryCode={countryCode}
         isHome={isHome}
         title={title}
         openCart={openCart}
@@ -116,22 +100,8 @@ function Header({
   );
 }
 
-function Footer({
-  menu,
-  countries,
-  defaultCountry,
-}: {
-  menu?: EnhancedMenu;
-  countries?: Array<Country>;
-  defaultCountry?: Country;
-}) {
-  const { pathname } = useLocation();
-
-  // TODO: Ensure locale support like in Hydrogen
-  const localeMatch = /^\/([a-z]{2})(\/|$)/i.exec(pathname);
-  const countryCode = localeMatch ? localeMatch[1] : null;
-
-  const isHome = pathname === `/${countryCode ? countryCode + "/" : ""}`;
+function Footer({ menu }: { menu?: EnhancedMenu }) {
+  const isHome = isHomePath();
   const itemsCount = menu
     ? menu?.items?.length + 1 > 4
       ? 4
@@ -148,17 +118,7 @@ function Footer({
         bg-primary dark:bg-contrast dark:text-primary text-contrast overflow-hidden`}
     >
       <FooterMenu menu={menu} />
-      {countries && defaultCountry && (
-        <section className="grid gap-4 w-full md:max-w-[335px] md:ml-auto">
-          <Heading size="lead" className="cursor-default" as="h3">
-            Country
-          </Heading>
-          <CountrySelector
-            countries={countries}
-            defaultCountry={defaultCountry}
-          />
-        </section>
-      )}
+      <CountrySelector />
       <div
         className={`self-end pt-8 opacity-50 md:col-span-2 lg:col-span-${itemsCount}`}
       >
@@ -336,14 +296,12 @@ function DesktopHeader({
   menu,
   openCart,
   title,
-  cart,
 }: {
   countryCode?: string | null;
   isHome: boolean;
   openCart: () => void;
   menu?: EnhancedMenu;
   title: string;
-  cart?: Promise<Cart>;
 }) {
   const { y } = useWindowScroll();
 
@@ -488,3 +446,4 @@ function FooterMenu({ menu }: { menu?: EnhancedMenu }) {
     </>
   );
 }
+
diff --git a/app/components/LinkI18n.tsx b/app/components/LinkI18n.tsx
index a91524cf00..96089782ae 100644
--- a/app/components/LinkI18n.tsx
+++ b/app/components/LinkI18n.tsx
@@ -2,8 +2,12 @@ import { Link, useParams } from "@remix-run/react";
 
 export function LinkI18n(props: any) {
   const { to, ...resOfProps } = props;
-  const { lang } = useParams();
-  const hrefWithCountryLang = lang ? `/${lang}${to}` : to;
+  const hrefWithCountryLang = getI18nPath(to);
 
   return <Link to={hrefWithCountryLang} {...resOfProps} />
 }
+
+export function getI18nPath(to: string) {
+  const { lang } = useParams();
+  return lang ? `/${lang}${to}` : to;
+}
diff --git a/app/hooks/useCountries.tsx b/app/hooks/useCountries.tsx
new file mode 100644
index 0000000000..49a86ce6f6
--- /dev/null
+++ b/app/hooks/useCountries.tsx
@@ -0,0 +1,12 @@
+import {useParentRouteData} from './useRouteData';
+
+import type {
+  Country,
+} from "@shopify/hydrogen-ui-alpha/storefront-api-types";
+
+export function useCountries(): Array<Country> | undefined {
+  const rootData = useParentRouteData('/');
+
+  return rootData?.countries?._data
+}
+
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index b336831264..c3b7824ff9 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -1,4 +1,4 @@
-import { type Params } from "@remix-run/react";
+import { useLocation, useParams, type Params } from "@remix-run/react";
 import type {
   MenuItem,
   Menu,
@@ -271,3 +271,11 @@ export function getLocalizationFromLang(lang?: String): {
     country: 'US' as CountryCode,
   }
 }
+
+export function isHomePath() {
+  const { pathname } = useLocation();
+  const { lang } = useParams();
+  const strippedPathname = pathname.replace(new RegExp(`^\/${lang}\/`), '/')
+
+  return strippedPathname === '/';
+}

From 3c52bcd714b60eda151dc6e3ba1b2ed6cd846321 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 4 Oct 2022 15:27:37 -0700
Subject: [PATCH 05/12] miss a couple lang mappings

---
 app/data/index.ts                | 36 ++++++++++++++++++++------------
 app/routes/featured-products.tsx |  6 +++---
 app/routes/pages/$pageHandle.tsx |  5 +----
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/app/data/index.ts b/app/data/index.ts
index 637b63eabe..030fb3a62c 100644
--- a/app/data/index.ts
+++ b/app/data/index.ts
@@ -373,9 +373,9 @@ const RECOMMENDED_PRODUCTS_QUERY = `#graphql
   query productRecommendations(
     $productId: ID!
     $count: Int
-    $countryCode: CountryCode
-    $languageCode: LanguageCode
-  ) @inContext(country: $countryCode, language: $languageCode) {
+    $country: CountryCode
+    $language: LanguageCode
+  ) @inContext(country: $country, language: $language) {
     recommended: productRecommendations(productId: $productId) {
       ...ProductCard
     }
@@ -837,7 +837,7 @@ const TOP_PRODUCTS_QUERY = `#graphql
     $count: Int
     $country: CountryCode
     $language: LanguageCode
-  ) @inContext(country: $countryCode, language: $languageCode) {
+  ) @inContext(country: $country, language: $language) {
     products(first: $count, sortKey: BEST_SELLING) {
       nodes {
         ...ProductCard
@@ -1059,8 +1059,8 @@ export async function getArticle({
 }
 
 const PAGE_QUERY = `#graphql
-  query PageDetails($languageCode: LanguageCode, $handle: String!)
-  @inContext(language: $languageCode) {
+  query PageDetails($language: LanguageCode, $handle: String!)
+  @inContext(language: $language) {
     page(handle: $handle) {
       id
       title
@@ -1073,13 +1073,20 @@ const PAGE_QUERY = `#graphql
   }
 `;
 
-export async function getPageData(variables: {
-  language: LanguageCode;
+export async function getPageData({
+  params,
+  handle,
+}: {
+  params: Params;
   handle: string;
 }) {
+  const { language } = getLocalizationFromLang(params.lang);
   const { data } = await getStorefrontData<{ page: Page }>({
     query: PAGE_QUERY,
-    variables,
+    variables: {
+      language,
+      handle
+    },
   });
 
   invariant(data, "No data returned from Shopify API");
@@ -1115,16 +1122,19 @@ const NOT_FOUND_QUERY = `#graphql
   }
 `;
 
-export async function getFeaturedData(variables: {
-  language: LanguageCode;
-  country: CountryCode;
+export async function getFeaturedData({params}: {
+  params: Params;
 }) {
+  const { language, country } = getLocalizationFromLang(params.lang);
   const { data } = await getStorefrontData<{
     featuredCollections: CollectionConnection;
     featuredProducts: ProductConnection;
   }>({
     query: NOT_FOUND_QUERY,
-    variables,
+    variables: {
+      language,
+      country,
+    },
   });
 
   return data;
diff --git a/app/routes/featured-products.tsx b/app/routes/featured-products.tsx
index 125b539df8..a75ffbacb9 100644
--- a/app/routes/featured-products.tsx
+++ b/app/routes/featured-products.tsx
@@ -1,6 +1,6 @@
-import { json } from "@remix-run/cloudflare";
+import { json, LoaderArgs } from "@remix-run/cloudflare";
 import { getFeaturedData } from "~/data";
 
-export async function loader() {
-  return json(await getFeaturedData({ language: "EN", country: "US" }));
+export async function loader({params}: LoaderArgs) {
+  return json(await getFeaturedData({ params }));
 }
diff --git a/app/routes/pages/$pageHandle.tsx b/app/routes/pages/$pageHandle.tsx
index 12e957d297..92932bcb31 100644
--- a/app/routes/pages/$pageHandle.tsx
+++ b/app/routes/pages/$pageHandle.tsx
@@ -10,14 +10,11 @@ import { PageHeader } from "~/components";
 import { getPageData } from "~/data";
 
 export async function loader({ params }: LoaderArgs) {
-  // TODO figure out localization
-  const languageCode = "EN";
-
   invariant(params.pageHandle, "Missing page handle");
 
   const page = await getPageData({
     handle: params.pageHandle,
-    language: languageCode,
+    params,
   });
 
   return json(

From 36df0d8e5e3166aa6764e8f8d1ea08ba935c0805 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 4 Oct 2022 15:29:49 -0700
Subject: [PATCH 06/12] fix comment

---
 app/routes/$lang/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/routes/$lang/index.tsx b/app/routes/$lang/index.tsx
index c369d93701..114bf5d14d 100644
--- a/app/routes/$lang/index.tsx
+++ b/app/routes/$lang/index.tsx
@@ -2,6 +2,6 @@ import Component from '~/routes/index';
 
 export default Component;
 
-// Everything in the #countryLang folder is a re-export of the route folder
+// Everything in the $lang folder is a re-export of the route folder
 // Wondering if we can just have it as a build process (dynamically creates these
 // files based on the files in the routes folder) during build/hot reload process

From 48810935639c4741e1bbb7c890cbaa5b062d13af Mon Sep 17 00:00:00 2001
From: "Juan P. Prieto" <juanpablo.prieto@shopify.com>
Date: Tue, 4 Oct 2022 17:52:09 -0700
Subject: [PATCH 07/12] fix: product options selector when lang is enabled

---
 app/lib/utils.ts                       |  2 +-
 app/routes/products/$productHandle.tsx | 14 ++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index c3b7824ff9..a9f92fd34f 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -1,4 +1,4 @@
-import { useLocation, useParams, type Params } from "@remix-run/react";
+import { useLocation, useParams } from "@remix-run/react";
 import type {
   MenuItem,
   Menu,
diff --git a/app/routes/products/$productHandle.tsx b/app/routes/products/$productHandle.tsx
index 11e70bdf11..94faa69252 100644
--- a/app/routes/products/$productHandle.tsx
+++ b/app/routes/products/$productHandle.tsx
@@ -10,6 +10,7 @@ import {
   Await,
   useSearchParams,
   Form,
+  useLocation,
   useTransition,
 } from "@remix-run/react";
 import { Money, ShopPayButton } from "@shopify/hydrogen-ui-alpha";
@@ -379,18 +380,23 @@ function ProductOptionLink({
   children?: ReactNode;
   [key: string]: any;
 }) {
+  const { pathname } = useLocation();
+  const isLangPathname = /\/[a-zA-Z]{2}-[a-zA-Z]{2}\//g.test(pathname);
+  // fixes internalized pathname
+  const path = isLangPathname
+    ? `/${pathname.split('/').slice(2).join('/')}`
+    : pathname
+
   const clonedSearchParams = new URLSearchParams(searchParams);
   clonedSearchParams.set(optionName, optionValue);
+  console.log({searchParams: clonedSearchParams.toString()})
 
   return (
     <LinkI18n
       {...props}
       prefetch="intent"
       replace
-      to={{
-        pathname: ".",
-        search: clonedSearchParams.toString(),
-      }}
+      to={`${path}?${clonedSearchParams.toString()}`}
     >
       {children ?? optionValue}
     </LinkI18n>

From 57a8f7782fe1ff935cf4c63ef80b7b2c49a029db Mon Sep 17 00:00:00 2001
From: "Juan P. Prieto" <juanpablo.prieto@shopify.com>
Date: Tue, 4 Oct 2022 17:53:13 -0700
Subject: [PATCH 08/12] remove log

---
 app/routes/products/$productHandle.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/routes/products/$productHandle.tsx b/app/routes/products/$productHandle.tsx
index 94faa69252..15d27557f2 100644
--- a/app/routes/products/$productHandle.tsx
+++ b/app/routes/products/$productHandle.tsx
@@ -389,7 +389,6 @@ function ProductOptionLink({
 
   const clonedSearchParams = new URLSearchParams(searchParams);
   clonedSearchParams.set(optionName, optionValue);
-  console.log({searchParams: clonedSearchParams.toString()})
 
   return (
     <LinkI18n

From ca5e6981ae3f25949e1e18a77f8764c3606afcea Mon Sep 17 00:00:00 2001
From: "Juan P. Prieto" <juanpablo.prieto@shopify.com>
Date: Tue, 4 Oct 2022 18:40:37 -0700
Subject: [PATCH 09/12] re add getI18nPath

---
 app/components/Layout.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx
index 623274bd7e..371a30f47f 100644
--- a/app/components/Layout.tsx
+++ b/app/components/Layout.tsx
@@ -20,9 +20,11 @@ import { useFetcher } from "@remix-run/react";
 import { useWindowScroll } from "react-use";
 import { Disclosure } from "@headlessui/react";
 import type { LayoutData } from "~/data";
+import { getI18nPath } from "./LinkI18n";
 import { useEffect } from "react";
 import {useCart} from '~/hooks/useCart'
 
+
 export function Layout({
   children,
   data,
@@ -248,7 +250,7 @@ function MobileHeader({
           <IconMenu />
         </button>
         <form
-          action={`/${countryCode ? countryCode + "/" : ""}search`}
+          action={getI18nPath('/search')}
           className="items-center gap-2 sm:flex"
         >
           <button type="submit" className={styles.button}>
@@ -339,7 +341,7 @@ function DesktopHeader({
       </div>
       <div className="flex items-center gap-1">
         <form
-          action={`/${countryCode ? countryCode + "/" : ""}search`}
+          action={getI18nPath('/search')}
           className="flex items-center gap-2"
         >
           <Input

From 681f58581c7db3628cb8faf0709e9db5045ce438 Mon Sep 17 00:00:00 2001
From: "Juan P. Prieto" <jp@calltheguys.co>
Date: Wed, 5 Oct 2022 08:18:20 -0700
Subject: [PATCH 10/12] Update app/components/CountrySelector.tsx

Co-authored-by: Josh Larson <jplhomer@gmail.com>
---
 app/components/CountrySelector.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/components/CountrySelector.tsx b/app/components/CountrySelector.tsx
index ce4acc3c4c..ede0be85df 100644
--- a/app/components/CountrySelector.tsx
+++ b/app/components/CountrySelector.tsx
@@ -14,9 +14,7 @@ export function CountrySelector() {
   const { language, country } = getLocalizationFromLang(lang);
   const languageIsoCode = language.toLowerCase();
   const strippedPathname = pathname.replace(new RegExp(`^\/${lang}\/`), '/')
-  const currentCountry = countries?.length
-    ? countries.find(c => c.isoCode === country)
-    : null
+  const currentCountry = countries?.find(c => c.isoCode === country);
 
   return (
     !countries ? null : (

From a4448d4deae428a3bb445d0d048368c212a3e694 Mon Sep 17 00:00:00 2001
From: "Juan P. Prieto" <juanpablo.prieto@shopify.com>
Date: Wed, 5 Oct 2022 08:21:07 -0700
Subject: [PATCH 11/12] add Cache-Control to getTopProducts response

---
 app/routes/cart.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/routes/cart.tsx b/app/routes/cart.tsx
index 548b0e86cf..ac2e6f4ed6 100644
--- a/app/routes/cart.tsx
+++ b/app/routes/cart.tsx
@@ -1,4 +1,5 @@
-import { type ActionFunction, json, defer, LoaderArgs } from "@remix-run/cloudflare";
+import type { LoaderArgs } from "@remix-run/cloudflare";
+import { type ActionFunction, json, defer } from "@remix-run/cloudflare";
 import invariant from "tiny-invariant";
 import { getTopProducts, updateLineItem } from "~/data";
 import { getSession } from "~/lib/session.server";
@@ -6,6 +7,10 @@ import { getSession } from "~/lib/session.server";
 export async function loader({params}: LoaderArgs) {
   return defer({
     topProducts: getTopProducts({params}),
+  }, {
+    headers: {
+      'Cache-Control': 'max-age=600'
+    }
   });
 }
 

From 3e93532d2e3fcd5c7c2e6bba3ce436d266c7d703 Mon Sep 17 00:00:00 2001
From: "Juan P. Prieto" <juanpablo.prieto@shopify.com>
Date: Wed, 5 Oct 2022 09:29:35 -0700
Subject: [PATCH 12/12] remove ternary

---
 app/components/CountrySelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/CountrySelector.tsx b/app/components/CountrySelector.tsx
index ede0be85df..4fbc70dc96 100644
--- a/app/components/CountrySelector.tsx
+++ b/app/components/CountrySelector.tsx
@@ -17,7 +17,7 @@ export function CountrySelector() {
   const currentCountry = countries?.find(c => c.isoCode === country);
 
   return (
-    !countries ? null : (
+    countries && (
       <section className="grid gap-4 w-full md:max-w-[335px] md:ml-auto">
         <Heading size="lead" className="cursor-default" as="h3">
           Country