@shopify/hydrogen-react 2024.10.0 → 2024.10.1

package/dist/node-prod/getProductOptions.mjs

@@ -0,0 +1,239 @@
+import { isOptionValueCombinationInEncodedVariant } from "./optionValueDecoder.mjs";
+function mapProductOptions(options) {
+  return options.map((option) => {
+    return Object.assign(
+      {},
+      ...(option == null ? void 0 : option.optionValues) ? option.optionValues.map((value, index) => {
+        return { [value.name]: index };
+      }) : []
+    );
+  });
+}
+function mapSelectedProductOptionToObject(options) {
+  return Object.assign(
+    {},
+    ...options.map((key) => {
+      return { [key.name]: key.value };
+    })
+  );
+}
+function mapSelectedProductOptionToObjectAsString(options) {
+  return JSON.stringify(mapSelectedProductOptionToObject(options));
+}
+function encodeSelectedProductOptionAsKey(selectedOption, productOptionMappings) {
+  if (Array.isArray(selectedOption)) {
+    return JSON.stringify(
+      selectedOption.map((key, index) => {
+        return productOptionMappings[index][key.value];
+      })
+    );
+  } else {
+    return JSON.stringify(
+      Object.keys(selectedOption).map((key, index) => {
+        return productOptionMappings[index][selectedOption[key]];
+      })
+    );
+  }
+}
+function mapVariants(variants, productOptionMappings) {
+  return Object.assign(
+    {},
+    ...variants.map((variant) => {
+      const variantKey = encodeSelectedProductOptionAsKey(
+        variant.selectedOptions || [],
+        productOptionMappings
+      );
+      return { [variantKey]: variant };
+    })
+  );
+}
+const PRODUCT_INPUTS = [
+  "options",
+  "selectedOrFirstAvailableVariant",
+  "adjacentVariants"
+];
+const PRODUCT_INPUTS_EXTRA = [
+  "handle",
+  "encodedVariantExistence",
+  "encodedVariantAvailability"
+];
+function logErrorAndReturnFalse(key) {
+  console.error(
+    `[h2:error:getProductOptions] product.${key} is missing. Make sure you query for this field from the Storefront API.`
+  );
+  return false;
+}
+function checkProductParam(product, checkAll = false) {
+  var _a;
+  let validParam = true;
+  const productKeys = Object.keys(product);
+  (checkAll ? [...PRODUCT_INPUTS, ...PRODUCT_INPUTS_EXTRA] : PRODUCT_INPUTS).forEach((key) => {
+    if (!productKeys.includes(key)) {
+      validParam = logErrorAndReturnFalse(key);
+    }
+  });
+  if (product.options) {
+    const firstOption = product == null ? void 0 : product.options[0];
+    if (checkAll && !(firstOption == null ? void 0 : firstOption.name)) {
+      validParam = logErrorAndReturnFalse("options.name");
+    }
+    if ((_a = product == null ? void 0 : product.options[0]) == null ? void 0 : _a.optionValues) {
+      const firstOptionValues = product.options[0].optionValues[0];
+      if (checkAll && !(firstOptionValues == null ? void 0 : firstOptionValues.name)) {
+        validParam = logErrorAndReturnFalse("options.optionValues.name");
+      }
+      if (firstOptionValues == null ? void 0 : firstOptionValues.firstSelectableVariant) {
+        validParam = checkProductVariantParam(
+          firstOptionValues.firstSelectableVariant,
+          "options.optionValues.firstSelectableVariant",
+          validParam,
+          checkAll
+        );
+      } else {
+        validParam = logErrorAndReturnFalse(
+          "options.optionValues.firstSelectableVariant"
+        );
+      }
+    } else {
+      validParam = logErrorAndReturnFalse("options.optionValues");
+    }
+  }
+  if (product.selectedOrFirstAvailableVariant) {
+    validParam = checkProductVariantParam(
+      product.selectedOrFirstAvailableVariant,
+      "selectedOrFirstAvailableVariant",
+      validParam,
+      checkAll
+    );
+  }
+  if (!!product.adjacentVariants && product.adjacentVariants[0]) {
+    validParam = checkProductVariantParam(
+      product.adjacentVariants[0],
+      "adjacentVariants",
+      validParam,
+      checkAll
+    );
+  }
+  return validParam ? product : {};
+}
+function checkProductVariantParam(variant, key, currentValidParamState, checkAll) {
+  var _a;
+  let validParam = currentValidParamState;
+  if (checkAll && !((_a = variant.product) == null ? void 0 : _a.handle)) {
+    validParam = logErrorAndReturnFalse(`${key}.product.handle`);
+  }
+  if (variant.selectedOptions) {
+    const firstSelectedOption = variant.selectedOptions[0];
+    if (!(firstSelectedOption == null ? void 0 : firstSelectedOption.name)) {
+      validParam = logErrorAndReturnFalse(`${key}.selectedOptions.name`);
+    }
+    if (!(firstSelectedOption == null ? void 0 : firstSelectedOption.value)) {
+      validParam = logErrorAndReturnFalse(`${key}.selectedOptions.value`);
+    }
+  } else {
+    validParam = logErrorAndReturnFalse(`${key}.selectedOptions`);
+  }
+  return validParam;
+}
+function getAdjacentAndFirstAvailableVariants(product) {
+  const checkedProduct = checkProductParam(product);
+  if (!checkedProduct.options)
+    return [];
+  const availableVariants = {};
+  checkedProduct.options.map((option) => {
+    var _a;
+    (_a = option.optionValues) == null ? void 0 : _a.map((value) => {
+      if (value.firstSelectableVariant) {
+        const variantKey = mapSelectedProductOptionToObjectAsString(
+          value.firstSelectableVariant.selectedOptions
+        );
+        availableVariants[variantKey] = value.firstSelectableVariant;
+      }
+    });
+  });
+  checkedProduct.adjacentVariants.map((variant) => {
+    const variantKey = mapSelectedProductOptionToObjectAsString(
+      variant.selectedOptions
+    );
+    availableVariants[variantKey] = variant;
+  });
+  const selectedVariant = checkedProduct.selectedOrFirstAvailableVariant;
+  if (selectedVariant) {
+    const variantKey = mapSelectedProductOptionToObjectAsString(
+      selectedVariant.selectedOptions
+    );
+    availableVariants[variantKey] = selectedVariant;
+  }
+  return Object.values(availableVariants);
+}
+function getProductOptions(product) {
+  const checkedProduct = checkProductParam(product, true);
+  if (!checkedProduct.options)
+    return [];
+  const {
+    options,
+    selectedOrFirstAvailableVariant: selectedVariant,
+    adjacentVariants,
+    encodedVariantExistence,
+    encodedVariantAvailability,
+    handle: productHandle
+  } = checkedProduct;
+  const productOptionMappings = mapProductOptions(options);
+  const variants = mapVariants(
+    selectedVariant ? [selectedVariant, ...adjacentVariants] : adjacentVariants,
+    productOptionMappings
+  );
+  const selectedOptions = mapSelectedProductOptionToObject(
+    selectedVariant ? selectedVariant.selectedOptions : []
+  );
+  const productOptions = options.map((option, optionIndex) => {
+    return {
+      ...option,
+      optionValues: option.optionValues.map((value) => {
+        var _a;
+        const targetOptionParams = { ...selectedOptions };
+        targetOptionParams[option.name] = value.name;
+        const targetKey = encodeSelectedProductOptionAsKey(
+          targetOptionParams || [],
+          productOptionMappings
+        );
+        const topDownKey = JSON.parse(targetKey).slice(
+          0,
+          optionIndex + 1
+        );
+        const exists = isOptionValueCombinationInEncodedVariant(
+          topDownKey,
+          encodedVariantExistence || ""
+        );
+        const available = isOptionValueCombinationInEncodedVariant(
+          topDownKey,
+          encodedVariantAvailability || ""
+        );
+        const variant = variants[targetKey] || value.firstSelectableVariant;
+        const variantOptionParam = mapSelectedProductOptionToObject(
+          variant.selectedOptions || []
+        );
+        const searchParams = new URLSearchParams(variantOptionParam);
+        const handle = (_a = variant == null ? void 0 : variant.product) == null ? void 0 : _a.handle;
+        return {
+          ...value,
+          variant,
+          handle,
+          variantUriQuery: searchParams.toString(),
+          selected: selectedOptions[option.name] === value.name,
+          exists,
+          available,
+          isDifferentProduct: handle !== productHandle
+        };
+      })
+    };
+  });
+  return productOptions;
+}
+export {
+  checkProductParam,
+  getAdjacentAndFirstAvailableVariants,
+  getProductOptions,
+  mapSelectedProductOptionToObject
+};
+//# sourceMappingURL=getProductOptions.mjs.map

package/dist/node-prod/getProductOptions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getProductOptions.mjs","sources":["../../src/getProductOptions.ts"],"sourcesContent":["import {isOptionValueCombinationInEncodedVariant} from './optionValueDecoder.js';\nimport type {\n  Product,\n  ProductOption,\n  ProductOptionValue,\n  ProductVariant,\n  SelectedOption,\n} from './storefront-api-types';\n\nexport type RecursivePartial<T> = {\n  [P in keyof T]?: RecursivePartial<T[P]>;\n};\ntype ProductOptionsMapping = Record<string, number>;\ntype ProductOptionValueState = {\n  variant: ProductVariant;\n  handle: string;\n  variantUriQuery: string;\n  selected: boolean;\n  exists: boolean;\n  available: boolean;\n  isDifferentProduct: boolean;\n};\ntype MappedProductOptionValue = ProductOptionValue & ProductOptionValueState;\n\n/**\n * Creates a mapping of product options to their index for matching encoded values\n * For example, a product option of\n *  [\n *    \\{\n *      name: 'Color',\n *      optionValues: [\\{name: 'Red'\\}, \\{name: 'Blue'\\}]\n *    \\},\n *    \\{\n *      name: 'Size',\n *      optionValues: [\\{name: 'Small'\\}, \\{name: 'Medium'\\}, \\{name: 'Large'\\}]\n *    \\}\n *  ]\n * Would return\n *  [\n *    \\{Red: 0, Blue: 1\\},\n *    \\{Small: 0, Medium: 1, Large: 2\\}\n *  ]\n */\nfunction mapProductOptions(options: ProductOption[]): ProductOptionsMapping[] {\n  return options.map((option: ProductOption) => {\n    return Object.assign(\n      {},\n      ...(option?.optionValues\n        ? option.optionValues.map((value, index) => {\n            return {[value.name]: index};\n          })\n        : []),\n    ) as ProductOptionsMapping;\n  });\n}\n\n/**\n * Converts the product option into an Object\\<key, value\\> for building query params\n * For example, a selected product option of\n *  [\n *    \\{\n *      name: 'Color',\n *      value: 'Red',\n *    \\},\n *    \\{\n *      name: 'Size',\n *      value: 'Medium',\n *    \\}\n *  ]\n * Would return\n *  \\{\n *    Color: 'Red',\n *    Size: 'Medium',\n *  \\}\n */\nexport function mapSelectedProductOptionToObject(\n  options: Pick<SelectedOption, 'name' | 'value'>[],\n): Record<string, string> {\n  return Object.assign(\n    {},\n    ...options.map((key) => {\n      return {[key.name]: key.value};\n    }),\n  ) as Record<string, string>;\n}\n\n/**\n * Returns the JSON stringify result of mapSelectedProductOptionToObject\n */\nfunction mapSelectedProductOptionToObjectAsString(\n  options: Pick<SelectedOption, 'name' | 'value'>[],\n): string {\n  return JSON.stringify(mapSelectedProductOptionToObject(options));\n}\n\n/**\n * Encode the selected product option as a key for mapping to the encoded variants\n * For example, a selected product option of\n *  [\n *    \\{\n *      name: 'Color',\n *      value: 'Red',\n *    \\},\n *    \\{\n *      name: 'Size',\n *      value: 'Medium',\n *    \\}\n *  ]\n * Would return\n *  [0,1]\n *\n * Also works with the result of mapSelectedProductOption. For example:\n *  \\{\n *    Color: 'Red',\n *    Size: 'Medium',\n *  \\}\n * Would return\n *  [0,1]\n *\n * @param selectedOption - The selected product option\n * @param productOptionMappings - The result of product option mapping from mapProductOptions\n * @returns\n */\nfunction encodeSelectedProductOptionAsKey(\n  selectedOption:\n    | Pick<SelectedOption, 'name' | 'value'>[]\n    | Record<string, string>,\n  productOptionMappings: ProductOptionsMapping[],\n): string {\n  if (Array.isArray(selectedOption)) {\n    return JSON.stringify(\n      selectedOption.map((key, index) => {\n        return productOptionMappings[index][key.value];\n      }),\n    );\n  } else {\n    return JSON.stringify(\n      Object.keys(selectedOption).map((key, index) => {\n        return productOptionMappings[index][selectedOption[key]];\n      }),\n    );\n  }\n}\n\n/**\n * Takes an array of product variants and maps them to an object with the encoded selected option values as the key.\n * For example, a product variant of\n * [\n *  \\{\n *    id: 1,\n *    selectedOptions: [\n *      \\{name: 'Color', value: 'Red'\\},\n *      \\{name: 'Size', value: 'Small'\\},\n *    ],\n *  \\},\n *  \\{\n *    id: 2,\n *    selectedOptions: [\n *      \\{name: 'Color', value: 'Red'\\},\n *      \\{name: 'Size', value: 'Medium'\\},\n *    ],\n *  \\}\n * ]\n * Would return\n * \\{\n *    '[0,0]': \\{id: 1, selectedOptions: [\\{name: 'Color', value: 'Red'\\}, \\{name: 'Size', value: 'Small'\\}]\\},\n *    '[0,1]': \\{id: 2, selectedOptions: [\\{name: 'Color', value: 'Red'\\}, \\{name: 'Size', value: 'Medium'\\}]\\},\n * \\}\n */\nfunction mapVariants(\n  variants: ProductVariant[],\n  productOptionMappings: ProductOptionsMapping[],\n): Record<string, ProductVariant> {\n  return Object.assign(\n    {},\n    ...variants.map((variant) => {\n      const variantKey = encodeSelectedProductOptionAsKey(\n        variant.selectedOptions || [],\n        productOptionMappings,\n      );\n      return {[variantKey]: variant};\n    }),\n  ) as Record<string, ProductVariant>;\n}\n\nexport type MappedProductOptions = Omit<ProductOption, 'optionValues'> & {\n  optionValues: MappedProductOptionValue[];\n};\n\nconst PRODUCT_INPUTS = [\n  'options',\n  'selectedOrFirstAvailableVariant',\n  'adjacentVariants',\n];\n\nconst PRODUCT_INPUTS_EXTRA = [\n  'handle',\n  'encodedVariantExistence',\n  'encodedVariantAvailability',\n];\n\nfunction logErrorAndReturnFalse(key: string): boolean {\n  console.error(\n    `[h2:error:getProductOptions] product.${key} is missing. Make sure you query for this field from the Storefront API.`,\n  );\n  return false;\n}\n\nexport function checkProductParam(\n  product: RecursivePartial<Product>,\n  checkAll = false,\n): Product {\n  let validParam = true;\n  const productKeys = Object.keys(product);\n\n  // Check product input\n  (checkAll\n    ? [...PRODUCT_INPUTS, ...PRODUCT_INPUTS_EXTRA]\n    : PRODUCT_INPUTS\n  ).forEach((key) => {\n    if (!productKeys.includes(key)) {\n      validParam = logErrorAndReturnFalse(key);\n    }\n  });\n\n  // Check for nested options requirements\n  if (product.options) {\n    const firstOption = product?.options[0];\n\n    if (checkAll && !firstOption?.name) {\n      validParam = logErrorAndReturnFalse('options.name');\n    }\n\n    // Check for options.optionValues\n    if (product?.options[0]?.optionValues) {\n      const firstOptionValues = product.options[0].optionValues[0];\n\n      // Check for options.optionValues.name\n      if (checkAll && !firstOptionValues?.name) {\n        validParam = logErrorAndReturnFalse('options.optionValues.name');\n      }\n\n      // Check for options.optionValues.firstSelectableVariant\n      if (firstOptionValues?.firstSelectableVariant) {\n        // check product variant\n        validParam = checkProductVariantParam(\n          firstOptionValues.firstSelectableVariant,\n          'options.optionValues.firstSelectableVariant',\n          validParam,\n          checkAll,\n        );\n      } else {\n        validParam = logErrorAndReturnFalse(\n          'options.optionValues.firstSelectableVariant',\n        );\n      }\n    } else {\n      validParam = logErrorAndReturnFalse('options.optionValues');\n    }\n  }\n\n  // Check for nested selectedOrFirstAvailableVariant requirements\n  if (product.selectedOrFirstAvailableVariant) {\n    validParam = checkProductVariantParam(\n      product.selectedOrFirstAvailableVariant,\n      'selectedOrFirstAvailableVariant',\n      validParam,\n      checkAll,\n    );\n  }\n\n  // Check for nested adjacentVariants requirements\n  if (!!product.adjacentVariants && product.adjacentVariants[0]) {\n    validParam = checkProductVariantParam(\n      product.adjacentVariants[0],\n      'adjacentVariants',\n      validParam,\n      checkAll,\n    );\n  }\n\n  return (validParam ? product : {}) as Product;\n}\n\nfunction checkProductVariantParam(\n  variant: RecursivePartial<ProductVariant>,\n  key: string,\n  currentValidParamState: boolean,\n  checkAll: boolean,\n): boolean {\n  let validParam = currentValidParamState;\n\n  if (checkAll && !variant.product?.handle) {\n    validParam = logErrorAndReturnFalse(`${key}.product.handle`);\n  }\n  if (variant.selectedOptions) {\n    const firstSelectedOption = variant.selectedOptions[0];\n    if (!firstSelectedOption?.name) {\n      validParam = logErrorAndReturnFalse(`${key}.selectedOptions.name`);\n    }\n    if (!firstSelectedOption?.value) {\n      validParam = logErrorAndReturnFalse(`${key}.selectedOptions.value`);\n    }\n  } else {\n    validParam = logErrorAndReturnFalse(`${key}.selectedOptions`);\n  }\n\n  return validParam;\n}\n\n/**\n * Finds all the variants provided by adjacentVariants, options.optionValues.firstAvailableVariant,\n * and selectedOrFirstAvailableVariant and return them in a single array\n */\nexport function getAdjacentAndFirstAvailableVariants(\n  product: RecursivePartial<Product>,\n): ProductVariant[] {\n  // Checks for valid product input\n  const checkedProduct = checkProductParam(product);\n\n  if (!checkedProduct.options) return [];\n\n  const availableVariants: Record<string, ProductVariant> = {};\n  checkedProduct.options.map((option) => {\n    option.optionValues?.map((value) => {\n      if (value.firstSelectableVariant) {\n        const variantKey = mapSelectedProductOptionToObjectAsString(\n          value.firstSelectableVariant.selectedOptions,\n        );\n        availableVariants[variantKey] = value.firstSelectableVariant;\n      }\n    });\n  });\n\n  checkedProduct.adjacentVariants.map((variant) => {\n    const variantKey = mapSelectedProductOptionToObjectAsString(\n      variant.selectedOptions,\n    );\n    availableVariants[variantKey] = variant;\n  });\n\n  const selectedVariant = checkedProduct.selectedOrFirstAvailableVariant;\n  if (selectedVariant) {\n    const variantKey = mapSelectedProductOptionToObjectAsString(\n      selectedVariant.selectedOptions,\n    );\n    availableVariants[variantKey] = selectedVariant;\n  }\n\n  return Object.values(availableVariants);\n}\n\n/**\n * Returns a product options array with its relevant information\n * about the variant\n */\nexport function getProductOptions(\n  product: RecursivePartial<Product>,\n): MappedProductOptions[] {\n  // Checks for valid product input\n  const checkedProduct = checkProductParam(product, true);\n\n  if (!checkedProduct.options) return [];\n\n  const {\n    options,\n    selectedOrFirstAvailableVariant: selectedVariant,\n    adjacentVariants,\n    encodedVariantExistence,\n    encodedVariantAvailability,\n    handle: productHandle,\n  } = checkedProduct;\n  // Get a mapping of product option names to their index for matching encoded values\n  const productOptionMappings = mapProductOptions(options);\n\n  // Get the adjacent variants mapped to the encoded selected option values\n  const variants = mapVariants(\n    selectedVariant ? [selectedVariant, ...adjacentVariants] : adjacentVariants,\n    productOptionMappings,\n  );\n\n  // Get the key:value version of selected options for building url query params\n  const selectedOptions = mapSelectedProductOptionToObject(\n    selectedVariant ? selectedVariant.selectedOptions : [],\n  );\n\n  const productOptions = options.map((option, optionIndex) => {\n    return {\n      ...option,\n      optionValues: option.optionValues.map((value) => {\n        const targetOptionParams = {...selectedOptions}; // Clones the selected options\n\n        // Modify the selected option value to the current option value\n        targetOptionParams[option.name] = value.name;\n\n        // Encode the new selected option values as a key for mapping to the product variants\n        const targetKey = encodeSelectedProductOptionAsKey(\n          targetOptionParams || [],\n          productOptionMappings,\n        );\n\n        // Top-down option check for existence and availability\n        const topDownKey = (JSON.parse(targetKey) as number[]).slice(\n          0,\n          optionIndex + 1,\n        );\n        const exists = isOptionValueCombinationInEncodedVariant(\n          topDownKey,\n          encodedVariantExistence || '',\n        );\n        const available = isOptionValueCombinationInEncodedVariant(\n          topDownKey,\n          encodedVariantAvailability || '',\n        );\n\n        // Get the variant for the current option value if exists, else use the first selectable variant\n        const variant: ProductVariant =\n          variants[targetKey] || value.firstSelectableVariant;\n\n        // Build the query params for this option value\n        const variantOptionParam = mapSelectedProductOptionToObject(\n          variant.selectedOptions || [],\n        );\n        const searchParams = new URLSearchParams(variantOptionParam);\n        const handle = variant?.product?.handle;\n\n        return {\n          ...value,\n          variant,\n          handle,\n          variantUriQuery: searchParams.toString(),\n          selected: selectedOptions[option.name] === value.name,\n          exists,\n          available,\n          isDifferentProduct: handle !== productHandle,\n        };\n      }),\n    };\n  });\n\n  return productOptions;\n}\n"],"names":[],"mappings":"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"}

package/dist/node-prod/index.js

@@ -16,6 +16,7 @@ const codegen_helpers = require("./codegen.helpers.js");
 const cookiesUtils = require("./cookies-utils.js");
 const ExternalVideo = require("./ExternalVideo.js");
 const flattenConnection = require("./flatten-connection.js");
+const getProductOptions = require("./getProductOptions.js");
 const Image = require("./Image.js");
 const loadScript = require("./load-script.js");
 const MediaFile = require("./MediaFile.js");
@@ -30,6 +31,7 @@ const ShopifyProvider = require("./ShopifyProvider.js");
 const ShopPayButton = require("./ShopPayButton.js");
 const storefrontClient = require("./storefront-client.js");
 const useMoney = require("./useMoney.js");
+const useSelectedOptionInUrlParam = require("./useSelectedOptionInUrlParam.js");
 const useShopifyCookies = require("./useShopifyCookies.js");
 const Video = require("./Video.js");
 exports.AddToCartButton = AddToCartButton.AddToCartButton;
@@ -58,6 +60,9 @@ exports.storefrontApiCustomScalars = codegen_helpers.storefrontApiCustomScalars;
 exports.getShopifyCookies = cookiesUtils.getShopifyCookies;
 exports.ExternalVideo = ExternalVideo.ExternalVideo;
 exports.flattenConnection = flattenConnection.flattenConnection;
+exports.getAdjacentAndFirstAvailableVariants = getProductOptions.getAdjacentAndFirstAvailableVariants;
+exports.getProductOptions = getProductOptions.getProductOptions;
+exports.mapSelectedProductOptionToObject = getProductOptions.mapSelectedProductOptionToObject;
 exports.IMAGE_FRAGMENT = Image.IMAGE_FRAGMENT;
 exports.Image = Image.Image;
 exports.useLoadScript = loadScript.useLoadScript;
@@ -76,6 +81,7 @@ exports.useShop = ShopifyProvider.useShop;
 exports.ShopPayButton = ShopPayButton.ShopPayButton;
 exports.createStorefrontClient = storefrontClient.createStorefrontClient;
 exports.useMoney = useMoney.useMoney;
+exports.useSelectedOptionInUrlParam = useSelectedOptionInUrlParam.useSelectedOptionInUrlParam;
 exports.useShopifyCookies = useShopifyCookies.useShopifyCookies;
 exports.Video = Video.Video;
 //# sourceMappingURL=index.js.map

package/dist/node-prod/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/node-prod/index.mjs

@@ -14,6 +14,7 @@ import { customerAccountApiCustomScalars, storefrontApiCustomScalars } from "./c
 import { getShopifyCookies } from "./cookies-utils.mjs";
 import { ExternalVideo } from "./ExternalVideo.mjs";
 import { flattenConnection } from "./flatten-connection.mjs";
+import { getAdjacentAndFirstAvailableVariants, getProductOptions, mapSelectedProductOptionToObject } from "./getProductOptions.mjs";
 import { IMAGE_FRAGMENT, Image } from "./Image.mjs";
 import { useLoadScript } from "./load-script.mjs";
 import { MediaFile } from "./MediaFile.mjs";
@@ -28,6 +29,7 @@ import { ShopifyProvider, useShop } from "./ShopifyProvider.mjs";
 import { ShopPayButton } from "./ShopPayButton.mjs";
 import { createStorefrontClient } from "./storefront-client.mjs";
 import { useMoney } from "./useMoney.mjs";
+import { useSelectedOptionInUrlParam } from "./useSelectedOptionInUrlParam.mjs";
 import { useShopifyCookies } from "./useShopifyCookies.mjs";
 import { Video } from "./Video.mjs";
 export {
@@ -63,9 +65,12 @@ export {
   customerAccountApiCustomScalars,
   decodeEncodedVariant,
   flattenConnection,
+  getAdjacentAndFirstAvailableVariants,
   getClientBrowserParameters,
+  getProductOptions,
   getShopifyCookies,
   isOptionValueCombinationInEncodedVariant,
+  mapSelectedProductOptionToObject,
   parseGid,
   parseMetafield,
   sendShopifyAnalytics,
@@ -75,6 +80,7 @@ export {
   useLoadScript,
   useMoney,
   useProduct,
+  useSelectedOptionInUrlParam,
   useShop,
   useShopifyCookies
 };

package/dist/node-prod/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/node-prod/packages/hydrogen-react/package.json.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const version = "2024.10.0";
+const version = "2024.10.1";
 exports.version = version;
 //# sourceMappingURL=package.json.js.map

package/dist/node-prod/packages/hydrogen-react/package.json.mjs

@@ -1,4 +1,4 @@
-const version = "2024.10.0";
+const version = "2024.10.1";
 export {
   version
 };

package/dist/node-prod/useSelectedOptionInUrlParam.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const getProductOptions = require("./getProductOptions.js");
+function useSelectedOptionInUrlParam(selectedOptions) {
+  React.useEffect(() => {
+    const optionsSearchParams = new URLSearchParams(
+      getProductOptions.mapSelectedProductOptionToObject(selectedOptions || [])
+    );
+    const currentSearchParams = new URLSearchParams(window.location.search);
+    const combinedSearchParams = new URLSearchParams({
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ...Object.fromEntries(currentSearchParams),
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ...Object.fromEntries(optionsSearchParams)
+    });
+    if (combinedSearchParams.size > 0) {
+      window.history.replaceState(
+        {},
+        "",
+        `${window.location.pathname}?${combinedSearchParams.toString()}`
+      );
+    }
+  }, [JSON.stringify(selectedOptions)]);
+  return null;
+}
+exports.useSelectedOptionInUrlParam = useSelectedOptionInUrlParam;
+//# sourceMappingURL=useSelectedOptionInUrlParam.js.map

package/dist/node-prod/useSelectedOptionInUrlParam.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectedOptionInUrlParam.js","sources":["../../src/useSelectedOptionInUrlParam.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {mapSelectedProductOptionToObject} from './getProductOptions.js';\nimport {SelectedOption} from './storefront-api-types.js';\n\nexport function useSelectedOptionInUrlParam(\n  selectedOptions: Pick<SelectedOption, 'name' | 'value'>[],\n): null {\n  useEffect(() => {\n    const optionsSearchParams = new URLSearchParams(\n      mapSelectedProductOptionToObject(selectedOptions || []),\n    );\n    const currentSearchParams = new URLSearchParams(window.location.search);\n\n    // ts ignoring the URLSearchParams not iterable error for now\n    // https://stackoverflow.com/questions/72522489/urlsearchparams-not-accepting-string#answer-72522838\n    // TODO: update ts lib\n    const combinedSearchParams = new URLSearchParams({\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      ...Object.fromEntries(currentSearchParams),\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      ...Object.fromEntries(optionsSearchParams),\n    });\n\n    if (combinedSearchParams.size > 0) {\n      window.history.replaceState(\n        {},\n        '',\n        `${window.location.pathname}?${combinedSearchParams.toString()}`,\n      );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(selectedOptions)]);\n\n  return null;\n}\n"],"names":["useEffect","mapSelectedProductOptionToObject"],"mappings":";;;;AAIO,SAAS,4BACd,iBACM;AACNA,QAAAA,UAAU,MAAM;AACd,UAAM,sBAAsB,IAAI;AAAA,MAC9BC,kBAAA,iCAAiC,mBAAmB,EAAE;AAAA,IAAA;AAExD,UAAM,sBAAsB,IAAI,gBAAgB,OAAO,SAAS,MAAM;AAKhE,UAAA,uBAAuB,IAAI,gBAAgB;AAAA;AAAA;AAAA,MAG/C,GAAG,OAAO,YAAY,mBAAmB;AAAA;AAAA;AAAA,MAGzC,GAAG,OAAO,YAAY,mBAAmB;AAAA,IAAA,CAC1C;AAEG,QAAA,qBAAqB,OAAO,GAAG;AACjC,aAAO,QAAQ;AAAA,QACb,CAAC;AAAA,QACD;AAAA,QACA,GAAG,OAAO,SAAS,QAAQ,IAAI,qBAAqB,UAAU;AAAA,MAAA;AAAA,IAElE;AAAA,KAEC,CAAC,KAAK,UAAU,eAAe,CAAC,CAAC;AAE7B,SAAA;AACT;;"}

package/dist/node-prod/useSelectedOptionInUrlParam.mjs

@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+import { mapSelectedProductOptionToObject } from "./getProductOptions.mjs";
+function useSelectedOptionInUrlParam(selectedOptions) {
+  useEffect(() => {
+    const optionsSearchParams = new URLSearchParams(
+      mapSelectedProductOptionToObject(selectedOptions || [])
+    );
+    const currentSearchParams = new URLSearchParams(window.location.search);
+    const combinedSearchParams = new URLSearchParams({
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ...Object.fromEntries(currentSearchParams),
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ...Object.fromEntries(optionsSearchParams)
+    });
+    if (combinedSearchParams.size > 0) {
+      window.history.replaceState(
+        {},
+        "",
+        `${window.location.pathname}?${combinedSearchParams.toString()}`
+      );
+    }
+  }, [JSON.stringify(selectedOptions)]);
+  return null;
+}
+export {
+  useSelectedOptionInUrlParam
+};
+//# sourceMappingURL=useSelectedOptionInUrlParam.mjs.map

package/dist/node-prod/useSelectedOptionInUrlParam.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectedOptionInUrlParam.mjs","sources":["../../src/useSelectedOptionInUrlParam.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {mapSelectedProductOptionToObject} from './getProductOptions.js';\nimport {SelectedOption} from './storefront-api-types.js';\n\nexport function useSelectedOptionInUrlParam(\n  selectedOptions: Pick<SelectedOption, 'name' | 'value'>[],\n): null {\n  useEffect(() => {\n    const optionsSearchParams = new URLSearchParams(\n      mapSelectedProductOptionToObject(selectedOptions || []),\n    );\n    const currentSearchParams = new URLSearchParams(window.location.search);\n\n    // ts ignoring the URLSearchParams not iterable error for now\n    // https://stackoverflow.com/questions/72522489/urlsearchparams-not-accepting-string#answer-72522838\n    // TODO: update ts lib\n    const combinedSearchParams = new URLSearchParams({\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      ...Object.fromEntries(currentSearchParams),\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      ...Object.fromEntries(optionsSearchParams),\n    });\n\n    if (combinedSearchParams.size > 0) {\n      window.history.replaceState(\n        {},\n        '',\n        `${window.location.pathname}?${combinedSearchParams.toString()}`,\n      );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(selectedOptions)]);\n\n  return null;\n}\n"],"names":[],"mappings":";;AAIO,SAAS,4BACd,iBACM;AACN,YAAU,MAAM;AACd,UAAM,sBAAsB,IAAI;AAAA,MAC9B,iCAAiC,mBAAmB,EAAE;AAAA,IAAA;AAExD,UAAM,sBAAsB,IAAI,gBAAgB,OAAO,SAAS,MAAM;AAKhE,UAAA,uBAAuB,IAAI,gBAAgB;AAAA;AAAA;AAAA,MAG/C,GAAG,OAAO,YAAY,mBAAmB;AAAA;AAAA;AAAA,MAGzC,GAAG,OAAO,YAAY,mBAAmB;AAAA,IAAA,CAC1C;AAEG,QAAA,qBAAqB,OAAO,GAAG;AACjC,aAAO,QAAQ;AAAA,QACb,CAAC;AAAA,QACD;AAAA,QACA,GAAG,OAAO,SAAS,QAAQ,IAAI,qBAAqB,UAAU;AAAA,MAAA;AAAA,IAElE;AAAA,KAEC,CAAC,KAAK,UAAU,eAAe,CAAC,CAAC;AAE7B,SAAA;AACT;"}

package/dist/types/CartProvider.d.ts

@@ -53,7 +53,7 @@ type CartProviderProps = {
     customerAccessToken?: CartBuyerIdentityInput['customerAccessToken'];
     /** The ISO country code for i18n. */
     countryCode?: CountryCode;
-    /** The ISO luanguage code for i18n. */
+    /** The ISO language code for i18n. */
     languageCode?: LanguageCode;
 };
 /**
@@ -67,8 +67,9 @@ type CartProviderProps = {
  * The `CartProvider` component must be a descendant of the `ShopifyProvider` component.
  */
 export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, onCreateComplete, onLineAddComplete, onLineRemoveComplete, onLineUpdateComplete, onNoteUpdateComplete, onBuyerIdentityUpdateComplete, onAttributesUpdateComplete, onDiscountCodesUpdateComplete, data: cart, cartFragment, customerAccessToken, countryCode, languageCode, }: CartProviderProps): JSX.Element;
-/** Check for storage availability funciton obtained from
- * https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
+/**
+ * Check for storage availability function obtained from
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
  */
 export declare function storageAvailable(type: 'localStorage' | 'sessionStorage'): boolean;
 export {};

package/dist/types/getProductOptions.d.ts

@@ -0,0 +1,49 @@
+import type { Product, ProductOption, ProductOptionValue, ProductVariant, SelectedOption } from './storefront-api-types';
+export type RecursivePartial<T> = {
+    [P in keyof T]?: RecursivePartial<T[P]>;
+};
+type ProductOptionValueState = {
+    variant: ProductVariant;
+    handle: string;
+    variantUriQuery: string;
+    selected: boolean;
+    exists: boolean;
+    available: boolean;
+    isDifferentProduct: boolean;
+};
+type MappedProductOptionValue = ProductOptionValue & ProductOptionValueState;
+/**
+ * Converts the product option into an Object\<key, value\> for building query params
+ * For example, a selected product option of
+ *  [
+ *    \{
+ *      name: 'Color',
+ *      value: 'Red',
+ *    \},
+ *    \{
+ *      name: 'Size',
+ *      value: 'Medium',
+ *    \}
+ *  ]
+ * Would return
+ *  \{
+ *    Color: 'Red',
+ *    Size: 'Medium',
+ *  \}
+ */
+export declare function mapSelectedProductOptionToObject(options: Pick<SelectedOption, 'name' | 'value'>[]): Record<string, string>;
+export type MappedProductOptions = Omit<ProductOption, 'optionValues'> & {
+    optionValues: MappedProductOptionValue[];
+};
+export declare function checkProductParam(product: RecursivePartial<Product>, checkAll?: boolean): Product;
+/**
+ * Finds all the variants provided by adjacentVariants, options.optionValues.firstAvailableVariant,
+ * and selectedOrFirstAvailableVariant and return them in a single array
+ */
+export declare function getAdjacentAndFirstAvailableVariants(product: RecursivePartial<Product>): ProductVariant[];
+/**
+ * Returns a product options array with its relevant information
+ * about the variant
+ */
+export declare function getProductOptions(product: RecursivePartial<Product>): MappedProductOptions[];
+export {};

package/dist/types/index.d.cts

@@ -16,6 +16,7 @@ export { customerAccountApiCustomScalars, storefrontApiCustomScalars, } from './
 export { getShopifyCookies } from './cookies-utils.js';
 export { ExternalVideo } from './ExternalVideo.js';
 export { flattenConnection } from './flatten-connection.js';
+export { getAdjacentAndFirstAvailableVariants, getProductOptions, type MappedProductOptions, mapSelectedProductOptionToObject, } from './getProductOptions.js';
 export { Image, IMAGE_FRAGMENT } from './Image.js';
 export { useLoadScript } from './load-script.js';
 export { MediaFile } from './MediaFile.js';
@@ -32,5 +33,6 @@ export type { StorefrontApiResponse, StorefrontApiResponseError, StorefrontApiRe
 export type { StorefrontClientProps } from './storefront-client.js';
 export { createStorefrontClient } from './storefront-client.js';
 export { useMoney } from './useMoney.js';
+export { useSelectedOptionInUrlParam } from './useSelectedOptionInUrlParam.js';
 export { useShopifyCookies } from './useShopifyCookies.js';
 export { Video } from './Video.js';

package/dist/types/index.d.ts

@@ -16,6 +16,7 @@ export { customerAccountApiCustomScalars, storefrontApiCustomScalars, } from './
 export { getShopifyCookies } from './cookies-utils.js';
 export { ExternalVideo } from './ExternalVideo.js';
 export { flattenConnection } from './flatten-connection.js';
+export { getAdjacentAndFirstAvailableVariants, getProductOptions, type MappedProductOptions, mapSelectedProductOptionToObject, } from './getProductOptions.js';
 export { Image, IMAGE_FRAGMENT } from './Image.js';
 export { useLoadScript } from './load-script.js';
 export { MediaFile } from './MediaFile.js';
@@ -32,5 +33,6 @@ export type { StorefrontApiResponse, StorefrontApiResponseError, StorefrontApiRe
 export type { StorefrontClientProps } from './storefront-client.js';
 export { createStorefrontClient } from './storefront-client.js';
 export { useMoney } from './useMoney.js';
+export { useSelectedOptionInUrlParam } from './useSelectedOptionInUrlParam.js';
 export { useShopifyCookies } from './useShopifyCookies.js';
 export { Video } from './Video.js';

package/dist/types/storefront-api-response.types.d.ts

@@ -7,14 +7,14 @@ import type { PartialDeep } from 'type-fest';
 type StorefrontApiExtensions = {
     /**
      * Shows error codes common to Shopify. Additional error codes may also be shown.
-     * https://shopify.dev/api/storefront#status_and_error_codes
+     * @see https://shopify.dev/api/storefront#status_and_error_codes
      */
     code?: 'THROTTLED' | 'ACCESS_DENIED' | 'SHOP_INACTIVE' | 'INTERNAL_SERVER_ERROR' | (string & {});
 };
 /**
  * The Storefront API can return a 200 OK response code when the query succeeds, and will populate the `data` property. The generic you pass in through type parameters will be the shape of the `data` object if successful. If you prefer a "deeply-partial" version of that generic object, consider using `StorefrontApiResponseOkPartial` instead.
  *
- * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will propulate the `errors` property.
+ * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will populate the `errors` property.
  *
  * Refer to https://shopify.dev/api/storefront#status_and_error_codes for more information.
  */
@@ -22,7 +22,7 @@ export type StorefrontApiResponseOk<DataGeneric> = FormattedExecutionResult<Data
 /**
  * The Storefront API can return a 200 OK response code when the query succeeds, and will populate the `data` property. The generic you pass in through type parameters will be the shape of the `data` object, with `Partial` deeply-applied to all nested objects and properties, if successful. If you prefer not using this "deeply-partial" generic data object, consider using `StorefrontApiResponseOk` instead.
  *
- * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will propulate the `errors` property.
+ * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will populate the `errors` property.
  *
  * Refer to https://shopify.dev/api/storefront#status_and_error_codes for more information.
  */
@@ -48,7 +48,7 @@ export type StorefrontApiResponseError = string | {
 /**
  * The Storefront API can return a 200 OK response code when the query succeeds, and will populate the `data` property. The generic you pass in through type parameters will be the shape of the `data` object if successful. If you prefer a "deeply-partial" version of that generic object, consider using `StorefrontApiResponseOkPartial` instead.
  *
- * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will propulate the `errors` property.
+ * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will populate the `errors` property.
  *
  * 4xx and 5xx errors occur infrequently. They are often related to network communications, your account, or an issue with Shopify’s services.  Commonly the response is a `JSON.parse`-able string, but in rare occasions may also return HTML which is not `JSON.parse()`-able.
  *
@@ -58,7 +58,7 @@ export type StorefrontApiResponse<DataGeneric> = StorefrontApiResponseOk<DataGen
 /**
  * The Storefront API can return a 200 OK response code when the query succeeds, and will populate the `data` property. The generic you pass in through type parameters will be the shape of the `data` object, with `Partial` deeply-applied to all nested objects and properties, if successful. If you prefer not using this "deeply-partial" generic data object, consider using `StorefrontApiResponseOk` instead.
  *
- * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will propulate the `errors` property.
+ * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will populate the `errors` property.
  *
  * 4xx and 5xx errors occur infrequently. They are often related to network communications, your account, or an issue with Shopify’s services. Commonly the response is a `JSON.parse`-able string, but in rare occasions may also return HTML which is not `JSON.parse()`-able.
  *

package/dist/types/useSelectedOptionInUrlParam.d.ts

@@ -0,0 +1,2 @@
+import { SelectedOption } from './storefront-api-types.js';
+export declare function useSelectedOptionInUrlParam(selectedOptions: Pick<SelectedOption, 'name' | 'value'>[]): null;