Merge branch 'master' of github.com:okbel/e-comm-example

components/core/Footer/Footer.tsx

@@ -1,11 +1,13 @@
 import { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
+import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import getSlug from '@utils/get-slug'
 import { Github } from '@components/icon'
 import { Logo, Container } from '@components/ui'
-import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import { I18nWidget } from '@components/core'
+
 interface Props {
   className?: string
   children?: any
@@ -15,8 +17,8 @@ interface Props {
 const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy']
 
 const Footer: FC<Props> = ({ className, pages }) => {
+  const { sitePages, legalPages } = usePages(pages)
   const rootClassName = cn(className)
-  const { sitePages, legalPages } = getPages(pages)
 
   return (
     <footer className={rootClassName}>
@@ -106,18 +108,22 @@ const Footer: FC<Props> = ({ className, pages }) => {
   )
 }
 
-function getPages(pages?: Page[]) {
+function usePages(pages?: Page[]) {
+  const { locale } = useRouter()
   const sitePages: Page[] = []
   const legalPages: Page[] = []
 
   if (pages) {
     pages.forEach((page) => {
-      if (page.url) {
-        if (LEGAL_PAGES.includes(getSlug(page.url))) {
-          legalPages.push(page)
-        } else {
-          sitePages.push(page)
-        }
+      const slug = page.url && getSlug(page.url)
+
+      if (!slug) return
+      if (locale && !slug.startsWith(`${locale}/`)) return
+
+      if (isLegalPage(slug, locale)) {
+        legalPages.push(page)
+      } else {
+        sitePages.push(page)
       }
     })
   }
@@ -128,6 +134,11 @@ function getPages(pages?: Page[]) {
   }
 }
 
+const isLegalPage = (slug: string, locale?: string) =>
+  locale
+    ? LEGAL_PAGES.some((p) => `${locale}/${p}` === slug)
+    : LEGAL_PAGES.includes(slug)
+
 // Sort pages by the sort order assigned in the BC dashboard
 function bySortOrder(a: Page, b: Page) {
   return (a.sort_order ?? 0) - (b.sort_order ?? 0)

components/core/I18nWidget/I18nWidget.tsx

@@ -1,35 +1,48 @@
 import { FC } from 'react'
-import s from './I18nWidget.module.css'
+import cn from 'classnames'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
 import { Menu } from '@headlessui/react'
 import { DoubleChevron } from '@components/icon'
-import cn from 'classnames'
+import s from './I18nWidget.module.css'
+
+const LOCALES_MAP: Record<string, string> = {
+  es: 'Español',
+  'en-US': 'English',
+}
 
 const I18nWidget: FC = () => {
+  const { locale, locales, defaultLocale = 'en-US' } = useRouter()
+  const options = locales?.filter((val) => val !== locale)
+
   return (
     <nav className={s.root}>
       <Menu>
         <Menu.Button className={s.button} aria-label="Language selector">
           <img className="" src="/flag-us.png" alt="US Flag" />
-          <span>English</span>
-          <span className="">
-            <DoubleChevron />
-          </span>
+          <span>{LOCALES_MAP[locale || defaultLocale]}</span>
+          {options && (
+            <span className="">
+              <DoubleChevron />
+            </span>
+          )}
         </Menu.Button>
-        <Menu.Items className={s.dropdownMenu}>
-          <Menu.Item>
-            {({ active }) => (
-              <a
-                className={cn(s.item, { [s.active]: active })}
-                href="#"
-                onClick={(e) => {
-                  e.preventDefault()
-                }}
-              >
-                Español
-              </a>
-            )}
-          </Menu.Item>
-        </Menu.Items>
+
+        {options?.length ? (
+          <Menu.Items className={s.dropdownMenu}>
+            {options.map((locale) => (
+              <Menu.Item key={locale}>
+                {({ active }) => (
+                  <Link href="/" locale={locale}>
+                    <a className={cn(s.item, { [s.active]: active })}>
+                      {LOCALES_MAP[locale]}
+                    </a>
+                  </Link>
+                )}
+              </Menu.Item>
+            ))}
+          </Menu.Items>
+        ) : null}
       </Menu>
     </nav>
   )

components/core/Layout/Layout.tsx

@@ -21,6 +21,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
   const [hasScrolled, setHasScrolled] = useState(false)
 
   // TODO: Update code, add throttle and more.
+  // TODO: Make sure to not do any unnecessary updates as it's doing right now
   useEffect(() => {
     const offset = 0
     function handleScroll() {

components/core/UserNav/DropdownMenu.tsx

@@ -40,13 +40,13 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
     >
       <Menu.Items className={s.dropdownMenu}>
         {LINKS.map(({ name, href }) => (
-          <Link href={href} key={href}>
-            <Menu.Item>
-              {({ active }) => (
+          <Menu.Item key={href}>
+            {({ active }) => (
+              <Link href={href}>
                 <a className={cn(s.link, { [s.active]: active })}>{name}</a>
-              )}
-            </Menu.Item>
-          </Link>
+              </Link>
+            )}
+          </Menu.Item>
         ))}
         <Menu.Item>
           <a