@jetshop/core 5.13.12-0 → 5.14.0-alpha.49df897e

package/hooks/useProductVariants/useProductVariants.js

@@ -1,203 +1,203 @@
-import { useMemo, useState, useEffect } from 'react';
-/**
- * Given a product, this hook provides methods for getting and setting variants on that product,
- * as well as methods to validate the current and proposed combination of values.
- */
-export function useProductVariants(product, { initialVariant, preselectCheapest } = {}) {
-    var _a, _b;
-    const variantOptions = (_a = product === null || product === void 0 ? void 0 : product.variants) === null || _a === void 0 ? void 0 : _a.options;
-    const variantValues = (_b = product === null || product === void 0 ? void 0 : product.variants) === null || _b === void 0 ? void 0 : _b.values;
-    // Results in the following data structure:
-    // { "Black:Small": { …variant } }
-    const normalisedValues = useMemo(() => {
-        if (!variantValues)
-            return;
-        return variantValues.reduce((acc, curr) => {
-            const valueIdentifier = curr.values.join(':');
-            acc[valueIdentifier] = curr;
-            return acc;
-        }, {});
-    }, [variantValues]);
-    const preselectedVariant = useMemo(() => {
-        var _a;
-        if (((_a = initialVariant === null || initialVariant === void 0 ? void 0 : initialVariant.values) === null || _a === void 0 ? void 0 : _a.length) > 0)
-            return initialVariant;
-        if (!preselectCheapest)
-            return initialVariant;
-        if (typeof normalisedValues === 'undefined' || normalisedValues === null)
-            return initialVariant;
-        var cheapestVariantValues = Object.values(normalisedValues).reduce((prev, curr) => {
-            var _a, _b;
-            return ((_a = prev.price) === null || _a === void 0 ? void 0 : _a.incVat) <= ((_b = curr.price) === null || _b === void 0 ? void 0 : _b.incVat) ? prev : curr;
-        }, { price: { incVat: undefined }, values: [] }).values;
-        return { values: cheapestVariantValues };
-    }, [initialVariant, normalisedValues]);
-    const [selectedValues, selectValues] = useVariantState({
-        variantOptions,
-        initialVariant: preselectedVariant
-    });
-    const selectedVariant = useMemo(() => {
-        return getSelectedVariant(normalisedValues, selectedValues);
-    }, [normalisedValues, selectedValues]);
-    const validation = useMemo(() => {
-        if (!variantOptions || variantOptions.length === 0)
-            return 'valid';
-        const selectedValueLength = selectedValues.filter(Boolean).length;
-        const allValuesSelected = variantOptions.length === selectedValueLength;
-        const invalidValueCombination = allValuesSelected && !selectedVariant;
-        if (invalidValueCombination) {
-            return 'invalid';
-        }
-        if (!allValuesSelected)
-            return 'incomplete';
-        const variantIsInStock = selectedVariant.stockStatus.buyable;
-        return variantIsInStock ? 'valid' : 'outOfStock';
-    }, [selectedValues, selectedVariant, variantOptions]);
-    function getSelectedValue(option) {
-        const optionIndex = variantOptions.indexOf(option);
-        return selectedValues[optionIndex];
-    }
-    function selectValue(value, option) {
-        const selectedIndex = variantOptions.indexOf(option);
-        const currentValueForOption = selectedValues[selectedIndex];
-        const valueIsValid = valueIsValidForOption(variantOptions, option, value);
-        if (!valueIsValid) {
-            throw new Error(`${value} is not a valid value for ${option.name}`);
-        }
-        if (currentValueForOption === value)
-            return;
-        const validation = validateSelection(value, option);
-        if (validation !== 'invalid') {
-            selectValues((state) => {
-                const newState = [...state];
-                newState[selectedIndex] = value;
-                return newState;
-            });
-        }
-        else {
-            selectValues(() => {
-                const newState = [];
-                newState[selectedIndex] = value;
-                return newState;
-            });
-        }
-    }
-    /**
-     * Takes a value and an option and checks if the value is selectable for that option.
-     */
-    function validateSelection(value, option) {
-        const totalOptionsLength = variantOptions.length;
-        const selectedValuesLength = selectedValues.filter(Boolean).length;
-        const optionLevel = variantOptions.indexOf(option);
-        const selectedValue = selectedValues[optionLevel];
-        if (!valueIsValidForOption(variantOptions, option, value)) {
-            return 'invalid';
-        }
-        if (selectedValuesLength < totalOptionsLength - 1) {
-            return 'incomplete';
-        }
-        if (selectedValue && selectedValuesLength !== totalOptionsLength) {
-            return 'incomplete';
-        }
-        const variant = getProposedVariant({
-            currentState: selectedValues,
-            variantTable: normalisedValues,
-            optionLevel,
-            value
-        });
-        if (!variant)
-            return 'invalid';
-        const variantIsBuyable = variant.stockStatus.buyable;
-        if (!variantIsBuyable)
-            return 'outOfStock';
-        return 'valid';
-    }
-    const missingOptions = useMemo(() => {
-        if (!variantOptions)
-            return null;
-        const noneMissing = selectedValues.filter(Boolean).length === variantOptions.length;
-        const allMissing = selectedValues.length === 0;
-        if (noneMissing)
-            return null;
-        if (allMissing)
-            return variantOptions;
-        const unselectedOptions = variantOptions.filter((_, index) => {
-            const optionIsNotSelected = typeof selectedValues[index] === 'undefined';
-            return optionIsNotSelected;
-        });
-        return unselectedOptions;
-    }, [selectedValues, variantOptions]);
-    function getVariantForSelection(value, option) {
-        return getProposedVariant({
-            currentState: selectedValues,
-            variantTable: normalisedValues,
-            optionLevel: variantOptions.indexOf(option),
-            value
-        });
-    }
-    function getMissingOptions() {
-        return missingOptions;
-    }
-    return {
-        selectedVariant,
-        validation,
-        getSelectedValue,
-        selectValue,
-        validateSelection,
-        getVariantForSelection,
-        missingOptions,
-        getMissingOptions
-    };
-}
-function useVariantState({ variantOptions, initialVariant }) {
-    const defaultValues = useMemo(() => getDefaultValues(variantOptions, initialVariant), [initialVariant, variantOptions]);
-    const [selectedValues, selectValues] = useState(defaultValues);
-    useEffect(() => {
-        if (defaultValues.length > 0 && selectedValues.length === 0) {
-            selectValues(defaultValues);
-        }
-    }, [defaultValues]);
-    return [selectedValues, selectValues];
-}
-/**
- * Determine the initially selected values for the product's variant options
- * - If an initialVariant is provided, use it
- * - If there are options that have only 1 value, select them
- * - Otherwise, select nothing
- */
-function getDefaultValues(options, initialVariant) {
-    if (initialVariant === null || initialVariant === void 0 ? void 0 : initialVariant.values)
-        return initialVariant.values;
-    if (!options)
-        return [];
-    const optionsWithSingleValue = options
-        .map((option, index) => {
-        return option.values.length === 1
-            ? { value: option.values[0], index }
-            : null;
-    })
-        .filter(Boolean);
-    if (optionsWithSingleValue.length === 0)
-        return [];
-    const defaultValues = [];
-    for (const { value, index } of optionsWithSingleValue) {
-        defaultValues[index] = value;
-    }
-    return defaultValues;
-}
-function getSelectedVariant(normalisedValues, selectedValues) {
-    return normalisedValues === null || normalisedValues === void 0 ? void 0 : normalisedValues[selectedValues.join(':')];
-}
-function valueIsValidForOption(variantOptions, option, value) {
-    const optionLevel = variantOptions.indexOf(option);
-    const possibleValues = variantOptions[optionLevel].values;
-    const isValid = possibleValues.includes(value);
-    return isValid;
-}
-function getProposedVariant({ currentState, variantTable, optionLevel, value }) {
-    const proposedState = [...currentState];
-    proposedState[optionLevel] = value;
-    const variant = getSelectedVariant(variantTable, proposedState);
-    return variant;
-}
+import { useMemo, useState, useEffect } from 'react';
+/**
+ * Given a product, this hook provides methods for getting and setting variants on that product,
+ * as well as methods to validate the current and proposed combination of values.
+ */
+export function useProductVariants(product, { initialVariant, preselectCheapest } = {}) {
+    var _a, _b;
+    const variantOptions = (_a = product === null || product === void 0 ? void 0 : product.variants) === null || _a === void 0 ? void 0 : _a.options;
+    const variantValues = (_b = product === null || product === void 0 ? void 0 : product.variants) === null || _b === void 0 ? void 0 : _b.values;
+    // Results in the following data structure:
+    // { "Black:Small": { …variant } }
+    const normalisedValues = useMemo(() => {
+        if (!variantValues)
+            return;
+        return variantValues.reduce((acc, curr) => {
+            const valueIdentifier = curr.values.join(':');
+            acc[valueIdentifier] = curr;
+            return acc;
+        }, {});
+    }, [variantValues]);
+    const preselectedVariant = useMemo(() => {
+        var _a;
+        if (((_a = initialVariant === null || initialVariant === void 0 ? void 0 : initialVariant.values) === null || _a === void 0 ? void 0 : _a.length) > 0)
+            return initialVariant;
+        if (!preselectCheapest)
+            return initialVariant;
+        if (typeof normalisedValues === 'undefined' || normalisedValues === null)
+            return initialVariant;
+        var cheapestVariantValues = Object.values(normalisedValues).reduce((prev, curr) => {
+            var _a, _b;
+            return ((_a = prev.price) === null || _a === void 0 ? void 0 : _a.incVat) <= ((_b = curr.price) === null || _b === void 0 ? void 0 : _b.incVat) ? prev : curr;
+        }, { price: { incVat: undefined }, values: [] }).values;
+        return { values: cheapestVariantValues };
+    }, [initialVariant, normalisedValues]);
+    const [selectedValues, selectValues] = useVariantState({
+        variantOptions,
+        initialVariant: preselectedVariant
+    });
+    const selectedVariant = useMemo(() => {
+        return getSelectedVariant(normalisedValues, selectedValues);
+    }, [normalisedValues, selectedValues]);
+    const validation = useMemo(() => {
+        if (!variantOptions || variantOptions.length === 0)
+            return 'valid';
+        const selectedValueLength = selectedValues.filter(Boolean).length;
+        const allValuesSelected = variantOptions.length === selectedValueLength;
+        const invalidValueCombination = allValuesSelected && !selectedVariant;
+        if (invalidValueCombination) {
+            return 'invalid';
+        }
+        if (!allValuesSelected)
+            return 'incomplete';
+        const variantIsInStock = selectedVariant.stockStatus.buyable;
+        return variantIsInStock ? 'valid' : 'outOfStock';
+    }, [selectedValues, selectedVariant, variantOptions]);
+    function getSelectedValue(option) {
+        const optionIndex = variantOptions.indexOf(option);
+        return selectedValues[optionIndex];
+    }
+    function selectValue(value, option) {
+        const selectedIndex = variantOptions.indexOf(option);
+        const currentValueForOption = selectedValues[selectedIndex];
+        const valueIsValid = valueIsValidForOption(variantOptions, option, value);
+        if (!valueIsValid) {
+            throw new Error(`${value} is not a valid value for ${option.name}`);
+        }
+        if (currentValueForOption === value)
+            return;
+        const validation = validateSelection(value, option);
+        if (validation !== 'invalid') {
+            selectValues((state) => {
+                const newState = [...state];
+                newState[selectedIndex] = value;
+                return newState;
+            });
+        }
+        else {
+            selectValues(() => {
+                const newState = [];
+                newState[selectedIndex] = value;
+                return newState;
+            });
+        }
+    }
+    /**
+     * Takes a value and an option and checks if the value is selectable for that option.
+     */
+    function validateSelection(value, option) {
+        const totalOptionsLength = variantOptions.length;
+        const selectedValuesLength = selectedValues.filter(Boolean).length;
+        const optionLevel = variantOptions.indexOf(option);
+        const selectedValue = selectedValues[optionLevel];
+        if (!valueIsValidForOption(variantOptions, option, value)) {
+            return 'invalid';
+        }
+        if (selectedValuesLength < totalOptionsLength - 1) {
+            return 'incomplete';
+        }
+        if (selectedValue && selectedValuesLength !== totalOptionsLength) {
+            return 'incomplete';
+        }
+        const variant = getProposedVariant({
+            currentState: selectedValues,
+            variantTable: normalisedValues,
+            optionLevel,
+            value
+        });
+        if (!variant)
+            return 'invalid';
+        const variantIsBuyable = variant.stockStatus.buyable;
+        if (!variantIsBuyable)
+            return 'outOfStock';
+        return 'valid';
+    }
+    const missingOptions = useMemo(() => {
+        if (!variantOptions)
+            return null;
+        const noneMissing = selectedValues.filter(Boolean).length === variantOptions.length;
+        const allMissing = selectedValues.length === 0;
+        if (noneMissing)
+            return null;
+        if (allMissing)
+            return variantOptions;
+        const unselectedOptions = variantOptions.filter((_, index) => {
+            const optionIsNotSelected = typeof selectedValues[index] === 'undefined';
+            return optionIsNotSelected;
+        });
+        return unselectedOptions;
+    }, [selectedValues, variantOptions]);
+    function getVariantForSelection(value, option) {
+        return getProposedVariant({
+            currentState: selectedValues,
+            variantTable: normalisedValues,
+            optionLevel: variantOptions.indexOf(option),
+            value
+        });
+    }
+    function getMissingOptions() {
+        return missingOptions;
+    }
+    return {
+        selectedVariant,
+        validation,
+        getSelectedValue,
+        selectValue,
+        validateSelection,
+        getVariantForSelection,
+        missingOptions,
+        getMissingOptions
+    };
+}
+function useVariantState({ variantOptions, initialVariant }) {
+    const defaultValues = useMemo(() => getDefaultValues(variantOptions, initialVariant), [initialVariant, variantOptions]);
+    const [selectedValues, selectValues] = useState(defaultValues);
+    useEffect(() => {
+        if (defaultValues.length > 0 && selectedValues.length === 0) {
+            selectValues(defaultValues);
+        }
+    }, [defaultValues]);
+    return [selectedValues, selectValues];
+}
+/**
+ * Determine the initially selected values for the product's variant options
+ * - If an initialVariant is provided, use it
+ * - If there are options that have only 1 value, select them
+ * - Otherwise, select nothing
+ */
+function getDefaultValues(options, initialVariant) {
+    if (initialVariant === null || initialVariant === void 0 ? void 0 : initialVariant.values)
+        return initialVariant.values;
+    if (!options)
+        return [];
+    const optionsWithSingleValue = options
+        .map((option, index) => {
+        return option.values.length === 1
+            ? { value: option.values[0], index }
+            : null;
+    })
+        .filter(Boolean);
+    if (optionsWithSingleValue.length === 0)
+        return [];
+    const defaultValues = [];
+    for (const { value, index } of optionsWithSingleValue) {
+        defaultValues[index] = value;
+    }
+    return defaultValues;
+}
+function getSelectedVariant(normalisedValues, selectedValues) {
+    return normalisedValues === null || normalisedValues === void 0 ? void 0 : normalisedValues[selectedValues.join(':')];
+}
+function valueIsValidForOption(variantOptions, option, value) {
+    const optionLevel = variantOptions.indexOf(option);
+    const possibleValues = variantOptions[optionLevel].values;
+    const isValid = possibleValues.includes(value);
+    return isValid;
+}
+function getProposedVariant({ currentState, variantTable, optionLevel, value }) {
+    const proposedState = [...currentState];
+    proposedState[optionLevel] = value;
+    const variant = getSelectedVariant(variantTable, proposedState);
+    return variant;
+}
 //# sourceMappingURL=useProductVariants.js.map