@jetshop/core 7.0.0-alpha-2 → 7.0.1-canary

package/hooks/Filters/useListFilter.d.ts

@@ -0,0 +1,10 @@
+import { ListFilter } from '../../types';
+export declare function useListFilter(args: {
+    filter: ListFilter;
+}): {
+    apply: ({ value, set }: {
+        value: string;
+        set?: boolean;
+    }) => Promise<import("@apollo/client").FetchResult<ListFilter, Record<string, any>, Record<string, any>>>;
+    clear: () => Promise<import("@apollo/client").FetchResult<any, Record<string, any>, Record<string, any>>>;
+};

package/hooks/Filters/useListFilter.js

@@ -0,0 +1,37 @@
+import { useMutation, gql } from '@apollo/client';
+export function useListFilter(args) {
+    const [toggleActiveMutation] = useMutation(gql `
+    mutation toggleActiveListItem(
+      $value: String!
+      $parentId: String!
+      $set: Boolean
+    ) {
+      toggleListFilterItem(value: $value, parentId: $parentId, set: $set)
+        @client {
+        isActive @client
+      }
+    }
+  `);
+    const [clearFilterMutation] = useMutation(gql `
+    mutation ClearListFilter($id: String!) {
+      clearListFilter(id: $id) @client
+    }
+  `);
+    function clear() {
+        const filter = args.filter;
+        return clearFilterMutation({ variables: { id: filter.id } });
+    }
+    function apply({ value, set }) {
+        const filter = args.filter;
+        // Update filters in the client state
+        return toggleActiveMutation({
+            variables: {
+                parentId: filter.id,
+                value,
+                set
+            }
+        });
+    }
+    return { apply, clear };
+}
+//# sourceMappingURL=useListFilter.js.map

package/hooks/Filters/useListFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListFilter.js","sourceRoot":"","sources":["useListFilter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAOlD,MAAM,UAAU,aAAa,CAAC,IAA4B;IACxD,MAAM,CAAC,oBAAoB,CAAC,GAAG,WAAW,CAGxC,GAAG,CAAA;;;;;;;;;;;GAWJ,CAAC,CAAC;IAEH,MAAM,CAAC,mBAAmB,CAAC,GAAG,WAAW,CAAC,GAAG,CAAA;;;;GAI5C,CAAC,CAAC;IAEH,SAAS,KAAK;QACZ,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAE3B,OAAO,mBAAmB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/D,CAAC;IAED,SAAS,KAAK,CAAC,EAAE,KAAK,EAAE,GAAG,EAAoC;QAC7D,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,qCAAqC;QACrC,OAAO,oBAAoB,CAAC;YAC1B,SAAS,EAAE;gBACT,QAAQ,EAAE,MAAM,CAAC,EAAE;gBACnB,KAAK;gBACL,GAAG;aACJ;SACF,CAAC,CAAC;IACL,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;AAC1B,CAAC"}

package/hooks/Filters/useMultiFilter.d.ts

@@ -0,0 +1,13 @@
+import { MultiListFilter } from '../../types';
+export declare function useMultiFilter(args: {
+    filter: MultiListFilter;
+}): {
+    apply: ({ value, listIndex }: {
+        value: string;
+        listIndex: number;
+    }) => Promise<import("@apollo/client").FetchResult<MultiListFilter, Record<string, any>, Record<string, any>>>;
+    clearList: ({ listIndex }: {
+        listIndex: number;
+    }) => Promise<import("@apollo/client").FetchResult<MultiListFilter, Record<string, any>, Record<string, any>>>;
+    clearFilter: () => Promise<import("@apollo/client").FetchResult<MultiListFilter, Record<string, any>, Record<string, any>>>;
+};

package/hooks/Filters/useMultiFilter.js

@@ -0,0 +1,49 @@
+import { useMutation, gql } from '@apollo/client';
+export function useMultiFilter(args) {
+    const [toggleMultiListFilterItemMutation] = useMutation(gql `
+    mutation toggleMultiListItem {
+      toggleMultiListFilterItem(
+        value: $value
+        filter: $filter
+        listIndex: $listIndex
+      ) @client {
+        isActive @client
+      }
+    }
+  `);
+    /** Applies a value at the given listIndex */
+    function apply({ value, listIndex }) {
+        const filter = args.filter;
+        return toggleMultiListFilterItemMutation({
+            variables: {
+                filter,
+                listIndex,
+                value
+            }
+        });
+    }
+    const [clearMultiListFilterListMutation] = useMutation(gql `
+    mutation ClearMultiList {
+      clearMultiListFilterList(listIndex: $listIndex, filter: $filter) @client
+    }
+  `);
+    /** Clears a specific list of the filter */
+    function clearList({ listIndex }) {
+        return clearMultiListFilterListMutation({
+            variables: { listIndex, filter: args.filter }
+        });
+    }
+    const [clearMultiListFilterMutation] = useMutation(gql `
+    mutation ClearMultiFilter {
+      clearMultiListFilter(id: $id) @client
+    }
+  `);
+    /** Clears the entire list filter, resetting it */
+    function clearFilter() {
+        return clearMultiListFilterMutation({
+            variables: { id: args.filter.id }
+        });
+    }
+    return { apply, clearList, clearFilter };
+}
+//# sourceMappingURL=useMultiFilter.js.map

package/hooks/Filters/useMultiFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMultiFilter.js","sourceRoot":"","sources":["useMultiFilter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AASlD,MAAM,UAAU,cAAc,CAAC,IAAiC;IAC9D,MAAM,CAAC,iCAAiC,CAAC,GAAG,WAAW,CAGrD,GAAG,CAAA;;;;;;;;;;GAUJ,CAAC,CAAC;IAEH,6CAA6C;IAC7C,SAAS,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAwC;QACvE,MAAM,MAAM,GAAG,IAAI,CAAC,MAAyB,CAAC;QAC9C,OAAO,iCAAiC,CAAC;YACvC,SAAS,EAAE;gBACT,MAAM;gBACN,SAAS;gBACT,KAAK;aACN;SACF,CAAC,CAAC;IACL,CAAC;IAED,MAAM,CAAC,gCAAgC,CAAC,GAAG,WAAW,CAGpD,GAAG,CAAA;;;;GAIJ,CAAC,CAAC;IAEH,2CAA2C;IAC3C,SAAS,SAAS,CAAC,EAAE,SAAS,EAAyB;QACrD,OAAO,gCAAgC,CAAC;YACtC,SAAS,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;SAC9C,CAAC,CAAC;IACL,CAAC;IAED,MAAM,CAAC,4BAA4B,CAAC,GAAG,WAAW,CAGhD,GAAG,CAAA;;;;GAIJ,CAAC,CAAC;IAEH,kDAAkD;IAClD,SAAS,WAAW;QAClB,OAAO,4BAA4B,CAAC;YAClC,SAAS,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE;SAClC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;AAC3C,CAAC"}

package/hooks/Filters/useRangeFilter.d.ts

@@ -0,0 +1,10 @@
+import { NumericRangeFilter } from '../../types';
+export declare function useRangeFilter(args: {
+    filter: NumericRangeFilter;
+}): {
+    apply: ({ min, max }: {
+        min: number;
+        max: number;
+    }) => Promise<import("@apollo/client").FetchResult<NumericRangeFilter, Record<string, any>, Record<string, any>>>;
+    clear: () => Promise<import("@apollo/client").FetchResult<NumericRangeFilter, Record<string, any>, Record<string, any>>>;
+};

package/hooks/Filters/useRangeFilter.js

@@ -0,0 +1,35 @@
+import { useMutation, gql } from '@apollo/client';
+import throwErrorInDev from '../../helpers/throwErrorInDev';
+export function useRangeFilter(args) {
+    const [applyRangeFilterMutation] = useMutation(gql `
+    mutation setRange {
+      setRangeFilter(id: $id, value: $value) @client {
+        isActive @client
+      }
+    }
+  `);
+    const [clearRangeFilterMutation] = useMutation(gql `
+    mutation ClearRangeFilter($id: String!) {
+      clearRangeFilter(id: $id) @client
+    }
+  `);
+    function apply({ min, max }) {
+        if (!min || !min)
+            throwErrorInDev(true, 'You must provide a min and max to applyRangeFilter');
+        return applyRangeFilterMutation({
+            variables: {
+                id: args.filter.id,
+                value: [min, max]
+            }
+        });
+    }
+    function clear() {
+        return clearRangeFilterMutation({
+            variables: {
+                id: args.filter.id
+            }
+        });
+    }
+    return { apply, clear };
+}
+//# sourceMappingURL=useRangeFilter.js.map

package/hooks/Filters/useRangeFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRangeFilter.js","sourceRoot":"","sources":["useRangeFilter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAMlD,OAAO,eAAe,MAAM,+BAA+B,CAAC;AAE5D,MAAM,UAAU,cAAc,CAAC,IAAoC;IACjE,MAAM,CAAC,wBAAwB,CAAC,GAAG,WAAW,CAG5C,GAAG,CAAA;;;;;;GAMJ,CAAC,CAAC;IAEH,MAAM,CAAC,wBAAwB,CAAC,GAAG,WAAW,CAG5C,GAAG,CAAA;;;;GAIJ,CAAC,CAAC;IAEH,SAAS,KAAK,CAAC,EAAE,GAAG,EAAE,GAAG,EAAgC;QACvD,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG;YACd,eAAe,CACb,IAAI,EACJ,oDAAoD,CACrD,CAAC;QACJ,OAAO,wBAAwB,CAAC;YAC9B,SAAS,EAAE;gBACT,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE;gBAClB,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;aAClB;SACF,CAAC,CAAC;IACL,CAAC;IAED,SAAS,KAAK;QACZ,OAAO,wBAAwB,CAAC;YAC9B,SAAS,EAAE;gBACT,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE;aACnB;SACF,CAAC,CAAC;IACL,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;AAC1B,CAAC"}

package/hooks/Filters/useSortOrder.d.ts

@@ -0,0 +1,16 @@
+import { ProductSortOrder } from '@jetshop/core/types';
+interface MappedSortOrder {
+    direction: 'ASCENDING' | 'DESCENDING';
+    value: string;
+    text: string;
+}
+export declare function useSortOrder({ sortOrders }: {
+    sortOrders: ProductSortOrder[];
+}): {
+    changeSortOrder: (value: string, direction: import("@jetshop/core/components/SortOrder/SortOrderContext").Direction) => void;
+    direction: import("@jetshop/core/components/SortOrder/SortOrderContext").Direction;
+    sortOrder: string;
+    mappedSortOrder: MappedSortOrder[];
+};
+export declare function getMappedSortOrder(sortOrders: ProductSortOrder[]): MappedSortOrder[];
+export {};

package/hooks/Filters/useSortOrder.js

@@ -0,0 +1,23 @@
+import { sortTypes, sortValues } from '@jetshop/core/components/SortOrder/SortOrderContainer';
+import SortOrderContext from '@jetshop/core/components/SortOrder/SortOrderContext';
+import * as React from 'react';
+export function useSortOrder({ sortOrders }) {
+    // Mutate sort order obj to include asc/desc & appropriate text
+    // eg { text: 'Price low to high', direction: 'ASCENDING' }
+    const { changeSortOrder, direction, sortOrder } = React.useContext(SortOrderContext);
+    const mappedSortOrder = getMappedSortOrder(sortOrders);
+    return { changeSortOrder, direction, sortOrder, mappedSortOrder };
+}
+export function getMappedSortOrder(sortOrders) {
+    return sortOrders.reduce((sorts, curr) => {
+        const mutatedSorts = sortValues[sortTypes[curr.value]].map((type) => {
+            return Object.assign(Object.assign({}, curr), { text: (React.createElement("span", null,
+                    React.createElement(React.Fragment, null,
+                        curr['text'],
+                        " ",
+                        type.text))), direction: type.direction });
+        });
+        return [...sorts, ...mutatedSorts];
+    }, []);
+}
+//# sourceMappingURL=useSortOrder.js.map

package/hooks/Filters/useSortOrder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSortOrder.js","sourceRoot":"","sources":["useSortOrder.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,UAAU,EACX,MAAM,uDAAuD,CAAC;AAC/D,OAAO,gBAAgB,MAAM,qDAAqD,CAAC;AAEnF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,UAAU,YAAY,CAAC,EAC3B,UAAU,EAGX;IACC,+DAA+D;IAC/D,2DAA2D;IAC3D,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,GAC7C,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACrC,MAAM,eAAe,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;IACvD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;AACpE,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,UAA8B;IAE9B,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;QACvC,MAAM,YAAY,GAAG,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAClE,uCACK,IAAI,KACP,IAAI,EAAE,CACJ;oBACE;wBACG,IAAI,CAAC,MAAM,CAAC;;wBAAG,IAAI,CAAC,IAAI,CACxB,CACE,CACR,EACD,SAAS,EAAE,IAAI,CAAC,SAAS,IACzB;QACJ,CAAC,CAAC,CAAC;QACH,OAAO,CAAC,GAAG,KAAK,EAAE,GAAG,YAAY,CAAC,CAAC;IACrC,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}

package/hooks/PackageProducts/index.d.ts

@@ -0,0 +1,2 @@
+export { usePackageProduct } from './usePackageProducts';
+export { usePackageProductItem } from './usePackageProductItem';

package/hooks/PackageProducts/index.js

@@ -0,0 +1,3 @@
+export { usePackageProduct } from './usePackageProducts';
+export { usePackageProductItem } from './usePackageProductItem';
+//# sourceMappingURL=index.js.map

package/hooks/PackageProducts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/hooks/PackageProducts/usePackageProductItem.d.ts

@@ -0,0 +1,17 @@
+import { PackageItem } from '../../types';
+export type UpdateItem = (articleNumber: string, variantArticleNumber: string, valid: boolean) => void;
+export declare function usePackageProductItem(item: PackageItem, updateItem: UpdateItem, { preselectCheapest }?: {
+    preselectCheapest?: boolean;
+}): {
+    stockStatus: import("@jetshop/core/hooks/useStockStatus").StockStatusContainerRender;
+    variantHandler: {
+        selectedVariant: import("../../types").ProductVariant;
+        validation: import("../useProductVariants/useProductVariants").VariantValidation;
+        getSelectedValue: (option: import("../../types").ProductVariantOption) => string;
+        selectValue: (value: string, option: import("../../types").ProductVariantOption) => void;
+        validateSelection: (value: string, option: import("../../types").ProductVariantOption) => import("../useProductVariants/useProductVariants").VariantValidation;
+        getVariantForSelection: (value: string, option: import("../../types").ProductVariantOption) => import("../../types").ProductVariant;
+        missingOptions: import("../../types").ProductVariantOption[];
+        getMissingOptions: () => import("../../types").ProductVariantOption[];
+    };
+};

package/hooks/PackageProducts/usePackageProductItem.js

@@ -0,0 +1,27 @@
+import { useProductVariants } from '../useProductVariants';
+import { useStockStatus } from '@jetshop/core/hooks/useStockStatus';
+import { useEffect } from 'react';
+export function usePackageProductItem(item, updateItem, { preselectCheapest } = {}) {
+    var _a;
+    const { product } = item;
+    const variantHandler = useProductVariants(product, {
+        preselectCheapest: preselectCheapest
+    });
+    const variantValidation = variantHandler.validation;
+    const selectedVariantArticleNumber = (_a = variantHandler.selectedVariant) === null || _a === void 0 ? void 0 : _a.articleNumber;
+    const stockStatus = useStockStatus(variantHandler.selectedVariant || product);
+    useEffect(() => {
+        updateItem(product.articleNumber, selectedVariantArticleNumber, variantValidation === 'valid');
+    }, [
+        product.articleNumber,
+        selectedVariantArticleNumber,
+        updateItem,
+        variantHandler.selectedVariant,
+        variantValidation
+    ]);
+    return {
+        stockStatus,
+        variantHandler
+    };
+}
+//# sourceMappingURL=usePackageProductItem.js.map

package/hooks/PackageProducts/usePackageProductItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePackageProductItem.js","sourceRoot":"","sources":["usePackageProductItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASlC,MAAM,UAAU,qBAAqB,CACnC,IAAiB,EACjB,UAAsB,EACtB,EACE,iBAAiB,KAGf,EAAE;;IAEN,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IACzB,MAAM,cAAc,GAAG,kBAAkB,CAAC,OAAO,EAAE;QACjD,iBAAiB,EAAE,iBAAiB;KACrC,CAAC,CAAC;IACH,MAAM,iBAAiB,GAAG,cAAc,CAAC,UAAU,CAAC;IACpD,MAAM,4BAA4B,GAChC,MAAA,cAAc,CAAC,eAAe,0CAAE,aAAa,CAAC;IAChD,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,eAAe,IAAI,OAAO,CAAC,CAAC;IAE9E,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CACR,OAAO,CAAC,aAAa,EACrB,4BAA4B,EAC5B,iBAAiB,KAAK,OAAO,CAC9B,CAAC;IACJ,CAAC,EAAE;QACD,OAAO,CAAC,aAAa;QACrB,4BAA4B;QAC5B,UAAU;QACV,cAAc,CAAC,eAAe;QAC9B,iBAAiB;KAClB,CAAC,CAAC;IAEH,OAAO;QACL,WAAW;QACX,cAAc;KACf,CAAC;AACJ,CAAC"}

package/hooks/PackageProducts/usePackageProducts.d.ts

@@ -0,0 +1,19 @@
+import { Package, Product } from '../../types';
+import { AddMultipleToCartQueries } from '../useAddMultipleToCart';
+import { DocumentNode } from 'graphql';
+export declare function usePackageProduct({ product, packageProductQuery, priceQuery }: {
+    product: Product;
+    packageProductQuery?: DocumentNode;
+    priceQuery?: DocumentNode;
+}): {
+    status: string;
+    price: Partial<Package>;
+    addPackageToCart: (queries: AddMultipleToCartQueries) => void;
+    updatePackageItem: (articleNumber: string, variantArticleNumber: string, valid: boolean) => void;
+    packageProduct: Product;
+    error: {
+        fromState: string;
+        messages: string[];
+    };
+    retry: () => void;
+};

package/hooks/PackageProducts/usePackageProducts.js

@@ -0,0 +1,346 @@
+import { useMachine } from '@xstate/react';
+import { useApolloClient, useQuery } from '@apollo/client';
+import { produce } from 'immer';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { assign, Machine } from 'xstate';
+import { useAddMultipleToCart } from '../useAddMultipleToCart';
+import packagePriceQuery from './packagePriceQuery.gql';
+// defaults to valid state if items have no variants
+// defaults to invalid if items have variants or are out of stock
+//   selecting a variant triggers validate
+//     (validate GUARD validates all items)
+//     if valid, move to fetching_price state
+//       once resolved, move to buyable state
+//     if invalid, remain in invalid state
+//
+function itemHasVariants(item) {
+    return item.product.hasVariants;
+}
+function itemIsOutOfStock(item) {
+    return !item.product.stockStatus.buyable;
+}
+const stateMachine = Machine({
+    id: 'package',
+    initial: 'loading',
+    context: { packageProduct: null, items: {}, price: {}, error: null },
+    on: {
+        UPDATE_ITEM: {
+            actions: 'updateItems',
+            target: 'validating',
+            cond: (context) => Object.keys(context.items).length > 0
+        }
+    },
+    states: {
+        loading: {
+            // During SSR, we already have the package and can head right on to
+            // validating.
+            always: [
+                {
+                    target: 'validating',
+                    actions: assign({
+                        items: (context) => {
+                            return getInitialState(context.packageProduct).items;
+                        },
+                        price: (context) => {
+                            return getInitialState(context.packageProduct).price;
+                        }
+                    }),
+                    cond: (context) => {
+                        return !!context.packageProduct.package;
+                    }
+                }
+            ],
+            on: {
+                // On the client, we need to wait for the LOADED event to tell us
+                // that the package has been retrieved
+                LOADED: {
+                    target: 'validating',
+                    actions: assign({
+                        items: (_, event) => {
+                            return getInitialState(event.packageProduct).items;
+                        },
+                        price: (_, event) => {
+                            return getInitialState(event.packageProduct).price;
+                        },
+                        packageProduct: (_, event) => {
+                            return event.packageProduct;
+                        }
+                    })
+                }
+            }
+        },
+        invalid: {},
+        validating: {
+            always: [
+                {
+                    target: 'valid',
+                    cond: (context) => {
+                        return deriveStatus(context.items) === 'valid';
+                    }
+                },
+                {
+                    target: 'invalid',
+                    cond: (context) => {
+                        return deriveStatus(context.items) !== 'valid';
+                    }
+                }
+            ]
+        },
+        valid: {
+            initial: 'fetchingPrice',
+            states: {
+                fetchingPrice: {
+                    invoke: {
+                        id: 'fetchPrice',
+                        src: 'fetchPrice',
+                        onDone: {
+                            target: 'buyable',
+                            actions: assign({
+                                price: (_, event) => {
+                                    return event.data;
+                                }
+                            })
+                        },
+                        onError: {
+                            target: 'error',
+                            actions: assign({
+                                error: (_, event) => {
+                                    const errors = event.data;
+                                    return {
+                                        fromState: 'fetchingPrice',
+                                        messages: errors
+                                            .map((err) => err.message)
+                                            .filter(Boolean)
+                                    };
+                                }
+                            })
+                        }
+                    }
+                },
+                buyable: {
+                    on: {
+                        ADD_TO_CART: 'adding',
+                        ERROR: 'error'
+                    }
+                },
+                adding: {
+                    invoke: {
+                        id: 'add-to-cart',
+                        src: 'addToCart',
+                        onDone: 'added',
+                        onError: {
+                            target: 'error',
+                            actions: assign({
+                                error: (_, event) => {
+                                    const errors = event.data;
+                                    return {
+                                        fromState: 'adding',
+                                        messages: errors
+                                            .map((err) => err.message)
+                                            .filter(Boolean)
+                                    };
+                                }
+                            })
+                        }
+                    }
+                },
+                added: {
+                    invoke: {
+                        id: 'added-refetch',
+                        src: () => {
+                            return new Promise((resolve) => {
+                                setTimeout(() => {
+                                    resolve(400);
+                                }, 800);
+                            });
+                        },
+                        onDone: {
+                            target: '#package.validating'
+                        }
+                    }
+                },
+                error: {
+                    on: {
+                        RETRY: '#package.validating'
+                    }
+                }
+            }
+        }
+    }
+}, {
+    actions: {
+        updateItems: assign({
+            items: (context, event) => {
+                if (event.type === 'UPDATE_ITEM') {
+                    const item = context.items[event.articleNumber];
+                    if (!item) {
+                        throw new Error('article does not exist in package');
+                    }
+                    if (event.variantArticleNumber) {
+                        const match = item.variants.includes(event.variantArticleNumber);
+                        if (!match) {
+                            throw new Error('variant does not exist on article');
+                        }
+                    }
+                    const { articleNumber, valid, variantArticleNumber } = event;
+                    const items = produce(context.items, (draft) => {
+                        draft[articleNumber] = Object.assign(Object.assign({}, draft[articleNumber]), { valid,
+                            variantArticleNumber });
+                    });
+                    return items;
+                }
+            }
+        })
+    }
+});
+function getInitialState(packageProduct) {
+    var _a, _b;
+    const items = (_b = (_a = packageProduct === null || packageProduct === void 0 ? void 0 : packageProduct.package) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.reduce((dict, item) => {
+        var _a;
+        dict[item.product.articleNumber] = {
+            product: item.product,
+            articleNumber: item.product.articleNumber,
+            hasVariants: item.product.hasVariants,
+            variantArticleNumber: null,
+            variants: item.product.hasVariants
+                ? (_a = item.product.variants) === null || _a === void 0 ? void 0 : _a.values.map((variant) => variant.articleNumber)
+                : null,
+            valid: !itemHasVariants(item) && !itemIsOutOfStock(item),
+            quantity: item.minQuantity
+        };
+        return dict;
+    }, {});
+    const price = packageProduct.package;
+    return { items, price };
+}
+function flattenItems(items) {
+    // perhaps we need the rest of the product detail?
+    // Or otherwise the types need to be changed
+    return Object.entries(items).map((entry) => {
+        const { articleNumber, variantArticleNumber, quantity, product } = entry[1];
+        return Object.assign(Object.assign({}, product), { articleNumber: variantArticleNumber || articleNumber, quantity });
+    });
+}
+function deriveStatus(packageItems) {
+    const packageIsValid = Object.values(packageItems).every((item) => item.valid);
+    if (packageIsValid) {
+        return 'valid';
+    }
+    return 'invalid';
+}
+function fetchPrice(packageArticleNumber, items, opts) {
+    return opts.apolloClient
+        .query({
+        query: opts.query || packagePriceQuery,
+        variables: {
+            articleNumber: packageArticleNumber,
+            products: Object.entries(items).map((entry) => {
+                // This should be cleaned up - we have to transform to the structure
+                // that the API expects
+                const { articleNumber, variantArticleNumber } = entry[1];
+                return {
+                    product: articleNumber,
+                    // if you want to test error handling, just pass a random string for variant
+                    // variant: 'sdfgsdfg'
+                    variant: variantArticleNumber
+                };
+            })
+        }
+    })
+        .then(({ data }) => {
+        return data.product.package;
+    }, (err) => {
+        return Promise.reject(err.graphQLErrors);
+    });
+}
+export function usePackageProduct({ product, packageProductQuery, priceQuery }) {
+    const mounted = useRef(false);
+    useEffect(() => {
+        mounted.current = true;
+    }, []);
+    const client = useApolloClient();
+    const { data } = useQuery(packageProductQuery, {
+        variables: { articleNumber: product.articleNumber }
+    });
+    const [current, send] = useMachine(stateMachine, {
+        // During SSR, data.product will have resolved, and we can initialise with
+        // it. Otherwise, use the product passed in
+        context: { packageProduct: (data === null || data === void 0 ? void 0 : data.product) || product },
+        services: {
+            fetchPrice: (context) => {
+                return fetchPrice(product.articleNumber, context.items, {
+                    apolloClient: client,
+                    query: priceQuery
+                });
+            },
+            addToCart: (_, event) => {
+                // eslint-disable-next-line
+                return addToCartMutation(event.queries).then((result) => {
+                    if (result.errors) {
+                        return Promise.reject(result.errors);
+                    }
+                    else {
+                        return result;
+                    }
+                });
+            }
+        }
+    });
+    useEffect(() => {
+        // On the client we send the LOADED event once the package query resolves
+        if (current.value !== 'loading')
+            return;
+        if (!(data === null || data === void 0 ? void 0 : data.product))
+            return;
+        send({ type: 'LOADED', packageProduct: data.product });
+    }, [current.value, data, send]);
+    const [addToCartMutation] = useAddMultipleToCart(flattenItems(current.context.items));
+    const addPackageToCart = (queries) => {
+        // invokes addToCart
+        send({ type: 'ADD_TO_CART', queries });
+    };
+    const updatePackageItem = useCallback(function updatePackageItem(articleNumber, variantArticleNumber, valid) {
+        send({
+            type: 'UPDATE_ITEM',
+            articleNumber,
+            variantArticleNumber,
+            valid
+        });
+    }, [send]);
+    // Just doing this to simplify the status we expose
+    const status = useMemo(() => {
+        switch (true) {
+            case current.matches({ valid: 'fetchingPrice' }):
+                return 'fetching_price';
+            case current.matches({ valid: 'buyable' }):
+                return 'buyable';
+            case current.matches({ valid: 'adding' }):
+                return 'adding';
+            case current.matches({ valid: 'added' }):
+                return 'added';
+            case current.matches({ valid: 'error' }):
+                return 'error';
+            case current.matches('loading'):
+                return 'loading';
+            default:
+                return 'invalid';
+        }
+    }, [current]);
+    const retry = useCallback(function retry() {
+        if (status === 'error') {
+            send({
+                type: 'RETRY'
+            });
+        }
+    }, [send, status]);
+    return {
+        status,
+        price: current.context.price,
+        addPackageToCart,
+        updatePackageItem,
+        packageProduct: current.context.packageProduct,
+        error: current.context.error,
+        retry
+    };
+}
+//# sourceMappingURL=usePackageProducts.js.map