Hydrogen React - Add Language to CartProvider (#1408)

Add languageCode --------- Co-authored-by: Bret Little <bret.little@gmail.com>
Shopify · Oct 16, 2023 · d30e265 · d30e265
1 parent 49fb53d
commit d30e265
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 39 deletions.
diff --git a/.changeset/nine-clouds-try.md b/.changeset/nine-clouds-try.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen-react': minor
+---
+
+Add Language to CartProvider
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/hydrogen-react/src/CartProvider.tsx b/packages/hydrogen-react/src/CartProvider.tsx
@@ -15,6 +15,7 @@ import {
   CartLineInput,
   CartLineUpdateInput,
   CountryCode,
+  LanguageCode,
   Cart as CartType,
   MutationCartNoteUpdateArgs,
 } from './storefront-api-types.js';
@@ -95,6 +96,8 @@ type CartProviderProps = {
   customerAccessToken?: CartBuyerIdentityInput['customerAccessToken'];
   /** The ISO country code for i18n. */
   countryCode?: CountryCode;
+  /** The ISO luanguage code for i18n. */
+  languageCode?: LanguageCode;
 };
 
 /**
@@ -130,6 +133,7 @@ export function CartProvider({
   cartFragment = defaultCartFragment,
   customerAccessToken,
   countryCode,
+  languageCode,
 }: CartProviderProps): JSX.Element {
   const shop = useShop();
 
@@ -144,7 +148,14 @@ export function CartProvider({
     'US'
   ).toUpperCase() as CountryCode;
 
+  languageCode = (
+    (languageCode as string) ??
+    shop.languageIsoCode ??
+    'EN'
+  ).toUpperCase() as LanguageCode;
+
   if (countryCode) countryCode = countryCode.toUpperCase() as CountryCode;
+
   const [prevCountryCode, setPrevCountryCode] = useState(countryCode);
   const [prevCustomerAccessToken, setPrevCustomerAccessToken] =
     useState(customerAccessToken);
@@ -164,6 +175,7 @@ export function CartProvider({
     data: cart,
     cartFragment,
     countryCode,
+    languageCode,
     onCartActionEntry(_, event) {
       try {
         switch (event.type) {

diff --git a/packages/hydrogen-react/src/cart-queries.ts b/packages/hydrogen-react/src/cart-queries.ts
@@ -4,7 +4,8 @@ export const CartLineAdd = (cartFragment: string): string => /* GraphQL */ `
     $lines: [CartLineInput!]!
     $numCartLines: Int = 250
     $country: CountryCode = ZZ
-  ) @inContext(country: $country) {
+    $language: LanguageCode
+  ) @inContext(country: $country, language: $language) {
     cartLinesAdd(cartId: $cartId, lines: $lines) {
       cart {
         ...CartFragment
@@ -20,7 +21,8 @@ export const CartCreate = (cartFragment: string): string => /* GraphQL */ `
     $input: CartInput!
     $numCartLines: Int = 250
     $country: CountryCode = ZZ
-  ) @inContext(country: $country) {
+    $language: LanguageCode
+  ) @inContext(country: $country, language: $language) {
     cartCreate(input: $input) {
       cart {
         ...CartFragment
@@ -37,7 +39,8 @@ export const CartLineRemove = (cartFragment: string): string => /* GraphQL */ `
     $lines: [ID!]!
     $numCartLines: Int = 250
     $country: CountryCode = ZZ
-  ) @inContext(country: $country) {
+    $language: LanguageCode
+  ) @inContext(country: $country, language: $language) {
     cartLinesRemove(cartId: $cartId, lineIds: $lines) {
       cart {
         ...CartFragment
@@ -54,7 +57,8 @@ export const CartLineUpdate = (cartFragment: string): string => /* GraphQL */ `
     $lines: [CartLineUpdateInput!]!
     $numCartLines: Int = 250
     $country: CountryCode = ZZ
-  ) @inContext(country: $country) {
+    $language: LanguageCode
+  ) @inContext(country: $country, language: $language) {
     cartLinesUpdate(cartId: $cartId, lines: $lines) {
       cart {
         ...CartFragment
@@ -71,7 +75,8 @@ export const CartNoteUpdate = (cartFragment: string): string => /* GraphQL */ `
     $note: String
     $numCartLines: Int = 250
     $country: CountryCode = ZZ
-  ) @inContext(country: $country) {
+    $language: LanguageCode
+  ) @inContext(country: $country, language: $language) {
     cartNoteUpdate(cartId: $cartId, note: $note) {
       cart {
         ...CartFragment
@@ -90,7 +95,8 @@ export const CartBuyerIdentityUpdate = (
     $buyerIdentity: CartBuyerIdentityInput!
     $numCartLines: Int = 250
     $country: CountryCode = ZZ
-  ) @inContext(country: $country) {
+    $language: LanguageCode
+  ) @inContext(country: $country, language: $language) {
     cartBuyerIdentityUpdate(cartId: $cartId, buyerIdentity: $buyerIdentity) {
       cart {
         ...CartFragment
@@ -109,7 +115,8 @@ export const CartAttributesUpdate = (
     $cartId: ID!
     $numCartLines: Int = 250
     $country: CountryCode = ZZ
-  ) @inContext(country: $country) {
+    $language: LanguageCode
+  ) @inContext(country: $country, language: $language) {
     cartAttributesUpdate(attributes: $attributes, cartId: $cartId) {
       cart {
         ...CartFragment
@@ -128,7 +135,8 @@ export const CartDiscountCodesUpdate = (
     $discountCodes: [String!]
     $numCartLines: Int = 250
     $country: CountryCode = ZZ
-  ) @inContext(country: $country) {
+    $language: LanguageCode
+  ) @inContext(country: $country, language: $language) {
     cartDiscountCodesUpdate(cartId: $cartId, discountCodes: $discountCodes) {
       cart {
         ...CartFragment
@@ -144,7 +152,8 @@ export const CartQuery = (cartFragment: string): string => /* GraphQL */ `
     $id: ID!
     $numCartLines: Int = 250
     $country: CountryCode = ZZ
-  ) @inContext(country: $country) {
+    $language: LanguageCode
+  ) @inContext(country: $country, language: $language) {
     cart(id: $id) {
       ...CartFragment
     }

diff --git a/packages/hydrogen-react/src/useCartAPIStateMachine.tsx b/packages/hydrogen-react/src/useCartAPIStateMachine.tsx
@@ -13,7 +13,11 @@ import {flattenConnection} from './flatten-connection.js';
 import {useCartActions} from './useCartActions.js';
 import {useMemo} from 'react';
 import {InitEvent} from '@xstate/fsm/lib/types.js';
-import {CountryCode, Cart as CartType} from './storefront-api-types.js';
+import {
+  CountryCode,
+  Cart as CartType,
+  LanguageCode,
+} from './storefront-api-types.js';
 import type {PartialDeep} from 'type-fest';
 
 function invokeCart(
@@ -184,6 +188,7 @@ export function useCartAPIStateMachine({
   data: cart,
   cartFragment,
   countryCode,
+  languageCode,
 }: {
   /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
   numCartLines?: number;
@@ -208,6 +213,8 @@ export function useCartAPIStateMachine({
   cartFragment: string;
   /** The ISO country code for i18n. */
   countryCode?: CountryCode;
+  /** The ISO language code for i18n. */
+  languageCode?: LanguageCode;
 }) {
   const {
     cartFetch,
@@ -223,6 +230,7 @@ export function useCartAPIStateMachine({
     numCartLines,
     cartFragment,
     countryCode,
+    languageCode,
   });
 
   const cartMachine = useMemo(() => createCartMachine(cart), [cart]);