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

package/hooks/PackageProducts/usePackageProducts.js

@@ -1,346 +1,346 @@
-import { useApolloClient, useQuery } from '@apollo/react-hooks';
-import { useMachine } from '@xstate/react';
-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
-    };
-}
+import { useApolloClient, useQuery } from '@apollo/react-hooks';
+import { useMachine } from '@xstate/react';
+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