@shopify/hydrogen-react 2023.7.3 → 2023.7.5

package/dist/types/load-script.d.ts

@@ -1,7 +1,9 @@
-export declare function loadScript(src: string, options?: {
+type LoadScriptOptions = {
     module?: boolean;
     in?: 'head' | 'body';
-}): Promise<boolean>;
+    attributes?: Record<string, string>;
+};
+export declare function loadScript(src: string, options?: LoadScriptOptions): Promise<boolean>;
 type LoadScriptParams = Parameters<typeof loadScript>;
 /**
  * The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load large third-party dependencies.

package/dist/types/useCartAPIStateMachine.d.ts

@@ -1,8 +1,8 @@
 import { StateMachine } from '@xstate/fsm';
 import { Cart, CartMachineActionEvent, CartMachineContext, CartMachineEvent, CartMachineFetchResultEvent, CartMachineTypeState } from './cart-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';
-export declare function useCartAPIStateMachine({ numCartLines, onCartActionEntry, onCartActionOptimisticUI, onCartActionComplete, data: cart, cartFragment, countryCode, }: {
+export declare function useCartAPIStateMachine({ numCartLines, onCartActionEntry, onCartActionOptimisticUI, onCartActionComplete, data: cart, cartFragment, countryCode, languageCode, }: {
     /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
     numCartLines?: number;
     /** A callback that is invoked just before a Cart API action executes. */
@@ -19,6 +19,8 @@ export declare function useCartAPIStateMachine({ numCartLines, onCartActionEntry
     cartFragment: string;
     /** The ISO country code for i18n. */
     countryCode?: CountryCode;
+    /** The ISO language code for i18n. */
+    languageCode?: LanguageCode;
 }): readonly [StateMachine.State<CartMachineContext, CartMachineEvent, CartMachineTypeState>, (event: "CART_FETCH" | "CART_CREATE" | "CART_SET" | "CARTLINE_ADD" | "CARTLINE_REMOVE" | "CARTLINE_UPDATE" | "NOTE_UPDATE" | "BUYER_IDENTITY_UPDATE" | "CART_ATTRIBUTES_UPDATE" | "DISCOUNT_CODES_UPDATE" | "CART_COMPLETED" | "RESOLVE" | "ERROR" | CartMachineEvent) => void, StateMachine.Service<CartMachineContext, CartMachineEvent, CartMachineTypeState>];
 export declare function cartFromGraphQL(cart: PartialDeep<CartType, {
     recurseIntoArrays: true;

package/dist/types/useCartActions.d.ts

@@ -1,4 +1,4 @@
-import { AttributeInput, CartBuyerIdentityInput, CartInput, CartLineInput, CartLineUpdateInput, CountryCode, Cart as CartType, MutationCartDiscountCodesUpdateArgs, MutationCartNoteUpdateArgs } from './storefront-api-types.js';
+import { AttributeInput, CartBuyerIdentityInput, CartInput, CartLineInput, CartLineUpdateInput, CountryCode, LanguageCode, Cart as CartType, MutationCartDiscountCodesUpdateArgs, MutationCartNoteUpdateArgs } from './storefront-api-types.js';
 import { PartialDeep } from 'type-fest';
 type CartResponse = PartialDeep<CartType, {
     recurseIntoArrays: true;
@@ -8,13 +8,15 @@ type CartResponse = PartialDeep<CartType, {
  *
  * See [cart API graphql mutations](https://shopify.dev/api/storefront/2023-07/objects/Cart)
  */
-export declare function useCartActions({ numCartLines, cartFragment, countryCode, }: {
+export declare function useCartActions({ numCartLines, cartFragment, countryCode, languageCode, }: {
     /**  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/2023-07/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. */
+    /** The ISO country code for i18n. Default to `US` */
     countryCode?: CountryCode;
+    /** The ISO language code for i18n. Default to `EN` */
+    languageCode?: LanguageCode;
 }): {
     cartFetch: (cartId: string) => Promise<import("./storefront-api-response.types.js").StorefrontApiResponseOkPartial<{
         cart: CartResponse;

package/dist/umd/hydrogen-react.dev.js

@@ -523,7 +523,8 @@
     $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
@@ -541,7 +542,8 @@
     $input: CartInput!
     $numCartLines: Int = 250
     $country: CountryCode = ZZ
-  ) @inContext(country: $country) {
+    $language: LanguageCode
+  ) @inContext(country: $country, language: $language) {
     cartCreate(input: $input) {
       cart {
         ...CartFragment
@@ -560,7 +562,8 @@
     $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
@@ -579,7 +582,8 @@
     $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
@@ -598,7 +602,8 @@
     $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
@@ -617,7 +622,8 @@
     $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
@@ -636,7 +642,8 @@
     $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
@@ -655,7 +662,8 @@
     $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
@@ -673,7 +681,8 @@
     $id: ID!
     $numCartLines: Int = 250
     $country: CountryCode = ZZ
-  ) @inContext(country: $country) {
+    $language: LanguageCode
+  ) @inContext(country: $country, language: $language) {
     cart(id: $id) {
       ...CartFragment
     }
@@ -1019,7 +1028,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
       perfNumber = 0;
     }
     const output = Math.abs(dateNumber + perfNumber).toString(16).toLowerCase();
-    return output.padStart(8 - output.length, "0");
+    return output.padStart(8, "0");
   }
   function getShopifyCookies(cookies) {
     const cookieData = u(cookies);
@@ -1065,7 +1074,8 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
   function useCartActions({
     numCartLines,
     cartFragment,
-    countryCode = "US"
+    countryCode = "US",
+    languageCode = "EN"
   }) {
     const fetchCart = useCartFetch();
     const cartFetch = React$1.useCallback(
@@ -1075,11 +1085,12 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
           variables: {
             id: cartId,
             numCartLines,
-            country: countryCode
+            country: countryCode,
+            language: languageCode
           }
         });
       },
-      [fetchCart, cartFragment, numCartLines, countryCode]
+      [fetchCart, cartFragment, numCartLines, countryCode, languageCode]
     );
     const cartCreate = React$1.useCallback(
       (cart) => {
@@ -1088,11 +1099,12 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
           variables: {
             input: cart,
             numCartLines,
-            country: countryCode
+            country: countryCode,
+            language: languageCode
           }
         });
       },
-      [cartFragment, countryCode, fetchCart, numCartLines]
+      [cartFragment, countryCode, fetchCart, numCartLines, languageCode]
     );
     const cartLineAdd = React$1.useCallback(
       (cartId, lines) => {
@@ -1102,11 +1114,12 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
             cartId,
             lines,
             numCartLines,
-            country: countryCode
+            country: countryCode,
+            language: languageCode
           }
         });
       },
-      [cartFragment, countryCode, fetchCart, numCartLines]
+      [cartFragment, countryCode, fetchCart, numCartLines, languageCode]
     );
     const cartLineUpdate = React$1.useCallback(
       (cartId, lines) => {
@@ -1116,11 +1129,12 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
             cartId,
             lines,
             numCartLines,
-            country: countryCode
+            country: countryCode,
+            language: languageCode
           }
         });
       },
-      [cartFragment, countryCode, fetchCart, numCartLines]
+      [cartFragment, countryCode, fetchCart, numCartLines, languageCode]
     );
     const cartLineRemove = React$1.useCallback(
       (cartId, lines) => {
@@ -1130,11 +1144,12 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
             cartId,
             lines,
             numCartLines,
-            country: countryCode
+            country: countryCode,
+            language: languageCode
           }
         });
       },
-      [cartFragment, countryCode, fetchCart, numCartLines]
+      [cartFragment, countryCode, fetchCart, numCartLines, languageCode]
     );
     const noteUpdate = React$1.useCallback(
       (cartId, note) => {
@@ -1144,11 +1159,12 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
             cartId,
             note,
             numCartLines,
-            country: countryCode
+            country: countryCode,
+            language: languageCode
           }
         });
       },
-      [fetchCart, cartFragment, numCartLines, countryCode]
+      [fetchCart, cartFragment, numCartLines, countryCode, languageCode]
     );
     const buyerIdentityUpdate = React$1.useCallback(
       (cartId, buyerIdentity) => {
@@ -1158,11 +1174,12 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
             cartId,
             buyerIdentity,
             numCartLines,
-            country: countryCode
+            country: countryCode,
+            language: languageCode
           }
         });
       },
-      [cartFragment, countryCode, fetchCart, numCartLines]
+      [cartFragment, countryCode, fetchCart, numCartLines, languageCode]
     );
     const cartAttributesUpdate = React$1.useCallback(
       (cartId, attributes) => {
@@ -1172,11 +1189,12 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
             cartId,
             attributes,
             numCartLines,
-            country: countryCode
+            country: countryCode,
+            language: languageCode
           }
         });
       },
-      [cartFragment, countryCode, fetchCart, numCartLines]
+      [cartFragment, countryCode, fetchCart, numCartLines, languageCode]
     );
     const discountCodesUpdate = React$1.useCallback(
       (cartId, discountCodes) => {
@@ -1186,11 +1204,12 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
             cartId,
             discountCodes,
             numCartLines,
-            country: countryCode
+            country: countryCode,
+            language: languageCode
           }
         });
       },
-      [cartFragment, countryCode, fetchCart, numCartLines]
+      [cartFragment, countryCode, fetchCart, numCartLines, languageCode]
     );
     return React$1.useMemo(
       () => ({
@@ -1367,7 +1386,8 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
     onCartActionComplete,
     data: cart,
     cartFragment,
-    countryCode
+    countryCode,
+    languageCode
   }) {
     const {
       cartFetch,
@@ -1382,7 +1402,8 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
     } = useCartActions({
       numCartLines,
       cartFragment,
-      countryCode
+      countryCode,
+      languageCode
     });
     const cartMachine = React$1.useMemo(() => createCartMachine(cart), [cart]);
     const [state, send, service] = useMachine(cartMachine, {
@@ -1608,7 +1629,8 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
     data: cart,
     cartFragment = defaultCartFragment,
     customerAccessToken,
-    countryCode
+    countryCode,
+    languageCode
   }) {
     var _a, _b, _c, _d, _e, _f, _g;
     const shop = useShop();
@@ -1617,6 +1639,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         "<CartProvider> needs to be a descendant of <ShopifyProvider>"
       );
     countryCode = (countryCode ?? shop.countryIsoCode ?? "US").toUpperCase();
+    languageCode = (languageCode ?? shop.languageIsoCode ?? "EN").toUpperCase();
     if (countryCode)
       countryCode = countryCode.toUpperCase();
     const [prevCountryCode, setPrevCountryCode] = React$1.useState(countryCode);
@@ -1632,6 +1655,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
       data: cart,
       cartFragment,
       countryCode,
+      languageCode,
       onCartActionEntry(_, event) {
         try {
           switch (event.type) {
@@ -3344,6 +3368,12 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
       } else {
         document.body.appendChild(script);
       }
+      const attributes = options == null ? void 0 : options.attributes;
+      if (attributes) {
+        Object.keys(attributes).forEach((key) => {
+          script.setAttribute(key, attributes[key]);
+        });
+      }
     });
     SCRIPTS_LOADED[src] = promise;
     return promise;