Add current locale to commerce provider

components/core/Layout/Layout.tsx

@@ -1,14 +1,16 @@
+import { FC, useEffect, useState } from 'react'
 import cn from 'classnames'
-import s from './Layout.module.css'
+import { useRouter } from 'next/router'
-import React, { FC, useEffect, useState } from 'react'
+import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
+import { CommerceProvider } from '@lib/bigcommerce'
 import { CartSidebarView } from '@components/cart'
 import { Container, Sidebar, Button, Modal } from '@components/ui'
 import { Navbar, Featurebar, Footer } from '@components/core'
 import { LoginView, SignUpView } from '@components/auth'
 import { useUI } from '@components/ui/context'
 import { usePreventScroll } from '@react-aria/overlays'
-import { CommerceProvider } from '@lib/bigcommerce'
+import s from './Layout.module.css'
-import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
+
 interface Props {
   pageProps: {
     pages?: Page[]
@@ -25,6 +27,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
   } = useUI()
   const [acceptedCookies, setAcceptedCookies] = useState(false)
   const [hasScrolled, setHasScrolled] = useState(false)
+  const { locale = 'en-US' } = useRouter()
 
   // TODO: Update code, add throttle and more.
   // TODO: Make sure to not do any unnecessary updates as it's doing right now
@@ -47,7 +50,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
   })
 
   return (
-    <CommerceProvider locale="en-us">
+    <CommerceProvider locale={locale}>
       <div className={cn(s.root)}>
         <header
           className={cn(

components/product/ProductCard/ProductCard.tsx

@@ -26,6 +26,11 @@ const ProductCard: FC<Props> = ({
   priority,
 }) => {
   const src = p.images.edges?.[0]?.node.urlLarge!
+  const { price } = usePrice({
+    amount: p.prices?.price?.value,
+    baseAmount: p.prices?.retailPrice?.value,
+    currencyCode: p.prices?.price?.currencyCode!,
+  })
 
   if (variant === 'slim') {
     return (
@@ -47,12 +52,6 @@ const ProductCard: FC<Props> = ({
     )
   }
 
-  const { price } = usePrice({
-    amount: p.prices?.price?.value,
-    baseAmount: p.prices?.retailPrice?.value,
-    currencyCode: p.prices?.price?.currencyCode!,
-  })
-
   return (
     <Link href={`product${p.path}`}>
       <a