Add languageCode support to the CartProvider component (#2531)

* Add `languageCode` support to the `CartProvider` component
Shopify · Aug 2, 2023 · 6fb7848 · 6fb7848
1 parent 26470cb
commit 6fb7848
Show file tree

Hide file tree

Showing 29 changed files with 265 additions and 141 deletions.
diff --git a/.changeset/spotty-knives-live.md b/.changeset/spotty-knives-live.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Add support for `languageCode` to the `CartProvider` component
diff --git a/packages/hydrogen/graphql.schema.json b/packages/hydrogen/graphql.schema.json
diff --git a/packages/hydrogen/src/components/CartProvider/CartActions.client.tsx b/packages/hydrogen/src/components/CartProvider/CartActions.client.tsx
@@ -6,6 +6,7 @@ import {
   CartLineInput,
   CartLineUpdateInput,
   CountryCode,
+  LanguageCode,
 } from '../../storefront-api-types.js';
 import {
   CartAttributesUpdate,
@@ -62,13 +63,16 @@ export function useCartActions({
   numCartLines,
   cartFragment,
   countryCode = CountryCode.Us,
+  languageCode = LanguageCode.En,
 }: {
   /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
   numCartLines?: number;
   /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
   cartFragment: string;
   /** The ISO country code for i18n. */
   countryCode?: CountryCode;
+  /** The ISO country code for i18n. */
+  languageCode?: LanguageCode;
 }) {
   const fetchCart = useCartFetch();
 
@@ -80,10 +84,11 @@ export function useCartActions({
           id: cartId,
           numCartLines,
           country: countryCode,
+          language: languageCode,
         },
       });
     },
-    [fetchCart, cartFragment, numCartLines, countryCode]
+    [fetchCart, cartFragment, numCartLines, countryCode, languageCode]
   );
 
   const cartCreate = useCallback(
@@ -94,10 +99,11 @@ export function useCartActions({
           input: cart,
           numCartLines,
           country: countryCode,
+          language: languageCode,
         },
       });
     },
-    [cartFragment, countryCode, fetchCart, numCartLines]
+    [cartFragment, countryCode, fetchCart, numCartLines, languageCode]
   );
 
   const cartLineAdd = useCallback(
@@ -109,10 +115,11 @@ export function useCartActions({
           lines,
           numCartLines,
           country: countryCode,
+          language: languageCode,
         },
       });
     },
-    [cartFragment, countryCode, fetchCart, numCartLines]
+    [cartFragment, countryCode, fetchCart, numCartLines, languageCode]
   );
 
   const cartLineUpdate = useCallback(
@@ -125,11 +132,12 @@ export function useCartActions({
             lines,
             numCartLines,
             country: countryCode,
+            language: languageCode,
           },
         }
       );
     },
-    [cartFragment, countryCode, fetchCart, numCartLines]
+    [cartFragment, countryCode, fetchCart, numCartLines, languageCode]
   );
 
   const cartLineRemove = useCallback(
@@ -142,11 +150,12 @@ export function useCartActions({
             lines,
             numCartLines,
             country: countryCode,
+            language: languageCode,
           },
         }
       );
     },
-    [cartFragment, countryCode, fetchCart, numCartLines]
+    [cartFragment, countryCode, fetchCart, numCartLines, languageCode]
   );
 
   const noteUpdate = useCallback(
@@ -159,11 +168,12 @@ export function useCartActions({
             note,
             numCartLines,
             country: countryCode,
+            language: languageCode,
           },
         }
       );
     },
-    [fetchCart, cartFragment, numCartLines, countryCode]
+    [fetchCart, cartFragment, numCartLines, countryCode, languageCode]
   );
 
   const buyerIdentityUpdate = useCallback(
@@ -178,10 +188,11 @@ export function useCartActions({
           buyerIdentity,
           numCartLines,
           country: countryCode,
+          language: languageCode,
         },
       });
     },
-    [cartFragment, countryCode, fetchCart, numCartLines]
+    [cartFragment, countryCode, fetchCart, numCartLines, languageCode]
   );
 
   const cartAttributesUpdate = useCallback(
@@ -196,10 +207,11 @@ export function useCartActions({
           attributes,
           numCartLines,
           country: countryCode,
+          language: languageCode,
         },
       });
     },
-    [cartFragment, countryCode, fetchCart, numCartLines]
+    [cartFragment, countryCode, fetchCart, numCartLines, languageCode]
   );
 
   const discountCodesUpdate = useCallback(
@@ -217,10 +229,11 @@ export function useCartActions({
           discountCodes,
           numCartLines,
           country: countryCode,
+          language: languageCode,
         },
       });
     },
-    [cartFragment, countryCode, fetchCart, numCartLines]
+    [cartFragment, countryCode, fetchCart, numCartLines, languageCode]
   );
 
   return useMemo(

diff --git a/packages/hydrogen/src/components/CartProvider/CartProvider.client.tsx b/packages/hydrogen/src/components/CartProvider/CartProvider.client.tsx
@@ -14,6 +14,7 @@ import {
   CartLineInput,
   CartLineUpdateInput,
   CountryCode,
+  LanguageCode,
 } from '../../storefront-api-types.js';
 import {defaultCartFragment} from './cart-queries.js';
 import {CartContext} from './context.js';
@@ -59,6 +60,7 @@ export function CartProvider({
   cartFragment = defaultCartFragment,
   customerAccessToken,
   countryCode,
+  languageCode,
 }: {
   /** Any `ReactNode` elements. */
   children: React.ReactNode;
@@ -104,14 +106,21 @@ export function CartProvider({
   customerAccessToken?: CartBuyerIdentityInput['customerAccessToken'];
   /** The ISO country code for i18n. */
   countryCode?: CountryCode;
+  /** The ISO language code for i18n. */
+  languageCode?: LanguageCode;
 }) {
-  const {country} = useLocalization();
+  const {country, language} = useLocalization();
 
   countryCode = (
     (countryCode as string) ?? country.isoCode
   ).toUpperCase() as CountryCode;
 
+  languageCode = (
+    (languageCode as string) ?? language.isoCode
+  ).toUpperCase() as LanguageCode;
+
   if (countryCode) countryCode = countryCode.toUpperCase() as CountryCode;
+
   const [prevCountryCode, setPrevCountryCode] = useState(countryCode);
   const [prevCustomerAccessToken, setPrevCustomerAccessToken] =
     useState(customerAccessToken);
@@ -261,6 +270,7 @@ export function CartProvider({
     data: cart,
     cartFragment,
     countryCode,
+    languageCode,
     onCartActionEntry,
     onCartActionOptimisticUI,
     onCartActionComplete,

diff --git a/packages/hydrogen/src/components/CartProvider/cart-queries.ts b/packages/hydrogen/src/components/CartProvider/cart-queries.ts
@@ -1,5 +1,5 @@
 export const CartLineAdd = (cartFragment: string) => `
-mutation CartLineAdd($cartId: ID!, $lines: [CartLineInput!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {
+mutation CartLineAdd($cartId: ID!, $lines: [CartLineInput!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ, $language: LanguageCode) @inContext(country: $country, language: $language) {
   cartLinesAdd(cartId: $cartId, lines: $lines) {
     cart {
       ...CartFragment
@@ -11,7 +11,7 @@ ${cartFragment}
 `;
 
 export const CartCreate = (cartFragment: string) => `
-mutation CartCreate($input: CartInput!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {
+mutation CartCreate($input: CartInput!, $numCartLines: Int = 250, $country: CountryCode = ZZ, $language: LanguageCode) @inContext(country: $country, language: $language) {
   cartCreate(input: $input) {
     cart {
       ...CartFragment
@@ -23,7 +23,7 @@ ${cartFragment}
 `;
 
 export const CartLineRemove = (cartFragment: string) => `
-mutation CartLineRemove($cartId: ID!, $lines: [ID!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {
+mutation CartLineRemove($cartId: ID!, $lines: [ID!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ, $language: LanguageCode) @inContext(country: $country, language: $language) {
   cartLinesRemove(cartId: $cartId, lineIds: $lines) {
     cart {
       ...CartFragment
@@ -35,7 +35,7 @@ ${cartFragment}
 `;
 
 export const CartLineUpdate = (cartFragment: string) => `
-mutation CartLineUpdate($cartId: ID!, $lines: [CartLineUpdateInput!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {
+mutation CartLineUpdate($cartId: ID!, $lines: [CartLineUpdateInput!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ, $language: LanguageCode) @inContext(country: $country, language: $language) {
   cartLinesUpdate(cartId: $cartId, lines: $lines) {
     cart {
       ...CartFragment
@@ -47,7 +47,7 @@ ${cartFragment}
 `;
 
 export const CartNoteUpdate = (cartFragment: string) => `
-mutation CartNoteUpdate($cartId: ID!, $note: String, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {
+mutation CartNoteUpdate($cartId: ID!, $note: String, $numCartLines: Int = 250, $country: CountryCode = ZZ, $language: LanguageCode) @inContext(country: $country, language: $language) {
   cartNoteUpdate(cartId: $cartId, note: $note) {
     cart {
       ...CartFragment
@@ -64,7 +64,8 @@ mutation 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
@@ -76,7 +77,7 @@ ${cartFragment}
 `;
 
 export const CartAttributesUpdate = (cartFragment: string) => `
-mutation CartAttributesUpdate($attributes: [AttributeInput!]!, $cartId: ID!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {
+mutation CartAttributesUpdate($attributes: [AttributeInput!]!, $cartId: ID!, $numCartLines: Int = 250, $country: CountryCode = ZZ, $language: LanguageCode) @inContext(country: $country, language: $language) {
   cartAttributesUpdate(attributes: $attributes, cartId: $cartId) {
     cart {
       ...CartFragment
@@ -88,7 +89,7 @@ ${cartFragment}
 `;
 
 export const CartDiscountCodesUpdate = (cartFragment: string) => `
-mutation CartDiscountCodesUpdate($cartId: ID!, $discountCodes: [String!], $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {
+mutation CartDiscountCodesUpdate($cartId: ID!, $discountCodes: [String!], $numCartLines: Int = 250, $country: CountryCode = ZZ, $language: LanguageCode) @inContext(country: $country, language: $language) {
   cartDiscountCodesUpdate(cartId: $cartId, discountCodes: $discountCodes) {
     cart {
       ...CartFragment
@@ -100,7 +101,7 @@ ${cartFragment}
 `;
 
 export const CartQuery = (cartFragment: string) => `
-query CartQuery($id: ID!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {
+query CartQuery($id: ID!, $numCartLines: Int = 250, $country: CountryCode = ZZ, $language: LanguageCode) @inContext(country: $country, language: $language) {
   cart(id: $id) {
     ...CartFragment
   }

diff --git a/packages/hydrogen/src/components/CartProvider/graphql/CartAttributesUpdateMutation.graphql b/packages/hydrogen/src/components/CartProvider/graphql/CartAttributesUpdateMutation.graphql
@@ -5,7 +5,8 @@ mutation 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

diff --git a/packages/hydrogen/src/components/CartProvider/graphql/CartAttributesUpdateMutation.ts b/packages/hydrogen/src/components/CartProvider/graphql/CartAttributesUpdateMutation.ts
@@ -3,13 +3,15 @@
  * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
  */
 // @ts-nocheck
-import * as Types from '../../../storefront-api-types.js';
+// eslint-disable-next-line import/extensions
+import * as Types from '../../../storefront-api-types';
 
 export type CartAttributesUpdateMutationVariables = Types.Exact<{
   attributes: Array<Types.AttributeInput> | Types.AttributeInput;
   cartId: Types.Scalars['ID'];
   numCartLines?: Types.InputMaybe<Types.Scalars['Int']>;
   country?: Types.InputMaybe<Types.CountryCode>;
+  language?: Types.InputMaybe<Types.LanguageCode>;
 }>;
 
 export type CartAttributesUpdateMutation = {__typename?: 'Mutation'} & {

diff --git a/...ages/hydrogen/src/components/CartProvider/graphql/CartBuyerIdentityUpdateMutation.graphql b/...ages/hydrogen/src/components/CartProvider/graphql/CartBuyerIdentityUpdateMutation.graphql
@@ -5,7 +5,8 @@ mutation 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

diff --git a/packages/hydrogen/src/components/CartProvider/graphql/CartBuyerIdentityUpdateMutation.ts b/packages/hydrogen/src/components/CartProvider/graphql/CartBuyerIdentityUpdateMutation.ts
@@ -3,13 +3,15 @@
  * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
  */
 // @ts-nocheck
-import * as Types from '../../../storefront-api-types.js';
+// eslint-disable-next-line import/extensions
+import * as Types from '../../../storefront-api-types';
 
 export type CartBuyerIdentityUpdateMutationVariables = Types.Exact<{
   cartId: Types.Scalars['ID'];
   buyerIdentity: Types.CartBuyerIdentityInput;
   numCartLines?: Types.InputMaybe<Types.Scalars['Int']>;
   country?: Types.InputMaybe<Types.CountryCode>;
+  language?: Types.InputMaybe<Types.LanguageCode>;
 }>;
 
 export type CartBuyerIdentityUpdateMutation = {__typename?: 'Mutation'} & {

diff --git a/packages/hydrogen/src/components/CartProvider/graphql/CartCreateMutation.graphql b/packages/hydrogen/src/components/CartProvider/graphql/CartCreateMutation.graphql
@@ -4,7 +4,8 @@ mutation CartCreate(
   $input: CartInput!
   $numCartLines: Int = 250
   $country: CountryCode = ZZ
-) @inContext(country: $country) {
+  $language: LanguageCode
+) @inContext(country: $country, language: $language) {
   cartCreate(input: $input) {
     cart {
       ...CartFragment

diff --git a/packages/hydrogen/src/components/CartProvider/graphql/CartCreateMutation.ts b/packages/hydrogen/src/components/CartProvider/graphql/CartCreateMutation.ts
@@ -3,12 +3,14 @@
  * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
  */
 // @ts-nocheck
-import * as Types from '../../../storefront-api-types.js';
+// eslint-disable-next-line import/extensions
+import * as Types from '../../../storefront-api-types';
 
 export type CartCreateMutationVariables = Types.Exact<{
   input: Types.CartInput;
   numCartLines?: Types.InputMaybe<Types.Scalars['Int']>;
   country?: Types.InputMaybe<Types.CountryCode>;
+  language?: Types.InputMaybe<Types.LanguageCode>;
 }>;
 
 export type CartCreateMutation = {__typename?: 'Mutation'} & {

diff --git a/...ages/hydrogen/src/components/CartProvider/graphql/CartDiscountCodesUpdateMutation.graphql b/...ages/hydrogen/src/components/CartProvider/graphql/CartDiscountCodesUpdateMutation.graphql
@@ -5,7 +5,8 @@ mutation 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

diff --git a/packages/hydrogen/src/components/CartProvider/graphql/CartDiscountCodesUpdateMutation.ts b/packages/hydrogen/src/components/CartProvider/graphql/CartDiscountCodesUpdateMutation.ts
@@ -3,7 +3,8 @@
  * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
  */
 // @ts-nocheck
-import * as Types from '../../../storefront-api-types.js';
+// eslint-disable-next-line import/extensions
+import * as Types from '../../../storefront-api-types';
 
 export type CartDiscountCodesUpdateMutationVariables = Types.Exact<{
   cartId: Types.Scalars['ID'];
@@ -12,6 +13,7 @@ export type CartDiscountCodesUpdateMutationVariables = Types.Exact<{
   >;
   numCartLines?: Types.InputMaybe<Types.Scalars['Int']>;
   country?: Types.InputMaybe<Types.CountryCode>;
+  language?: Types.InputMaybe<Types.LanguageCode>;
 }>;
 
 export type CartDiscountCodesUpdateMutation = {__typename?: 'Mutation'} & {

diff --git a/packages/hydrogen/src/components/CartProvider/graphql/CartFragment.ts b/packages/hydrogen/src/components/CartProvider/graphql/CartFragment.ts
@@ -3,7 +3,8 @@
  * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
  */
 // @ts-nocheck
-import * as Types from '../../../storefront-api-types.js';
+// eslint-disable-next-line import/extensions
+import * as Types from '../../../storefront-api-types';
 
 export type CartFragmentFragment = {__typename?: 'Cart'} & Pick<
   Types.Cart,