@jetshop/template-trend 6.1.4 → 6.1.5

package/dist/src/components/ProductList/AddToCart.js

@@ -0,0 +1,46 @@
+import { useMutation } from '@apollo/client';
+import React, { useContext } from 'react';
+import { css } from 'linaria';
+import t from '@jetshop/intl';
+import { CartIdContext } from '@jetshop/core/components/Cart/CartIdContext';
+import { addToCartSuccess } from '@jetshop/core/components/Mutation/AddToCart/addToCartUtils';
+import { useNotification } from '@jetshop/core/components/Notifications';
+import ProductToastWrapper from '../ProductPage/AddToCart/ProductToast';
+import { addToCart } from '../Cart/queries/addToCart.gql';
+const addButton = css `
+  background: white;
+  border: 0.75px solid #bfbdbd;
+  text-align: center;
+  padding: 1em;
+  width: 100%;
+`;
+/**
+ *
+ * @param {object} props
+ * @param {import('@jetshop/core/hooks/ProductList').ProductListProduct} props.product
+ */
+export function AddToCart({ product }) {
+    var _a, _b, _c;
+    const { cartId, setCartId } = useContext(CartIdContext);
+    const articleNumber = ((_a = product.variant) === null || _a === void 0 ? void 0 : _a.articleNumber) || product.articleNumber;
+    const price = {
+        price: ((_b = product.variant) === null || _b === void 0 ? void 0 : _b.price) || product.price,
+        previousPrice: ((_c = product.variant) === null || _c === void 0 ? void 0 : _c.previousPrice) || product.previousPrice
+    };
+    const [trigger] = useNotification();
+    const [add] = useMutation(addToCart, {
+        variables: {
+            input: {
+                cartId,
+                articleNumber,
+                quantity: 1
+            }
+        },
+        onCompleted: data => {
+            trigger(React.createElement(ProductToastWrapper, { selectedVariation: product.variant, product: product, quantity: 1, price: price }), { type: 'add-to-cart' });
+            addToCartSuccess({ cartId, setCartId })({ data });
+        }
+    });
+    return (React.createElement("button", { className: addButton, onClick: () => add(), disabled: product.hidePrice }, t('Add to cart')));
+}
+//# sourceMappingURL=AddToCart.js.map

package/dist/src/components/ProductList/AddToCart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddToCart.js","sourceRoot":"","sources":["../../../../src/components/ProductList/AddToCart.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,SAAS,CAAC;AAE9B,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,4DAA4D,CAAC;AAC9F,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAEzE,OAAO,mBAAmB,MAAM,uCAAuC,CAAC;AAExE,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE1D,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;CAMpB,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,OAAO,EAAE;;IACnC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,CAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,aAAa,KAAI,OAAO,CAAC,aAAa,CAAC;IAC9E,MAAM,KAAK,GAAG;QACZ,KAAK,EAAE,CAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,KAAK,KAAI,OAAO,CAAC,KAAK;QAC9C,aAAa,EAAE,CAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,aAAa,KAAI,OAAO,CAAC,aAAa;KACvE,CAAC;IAEF,MAAM,CAAC,OAAO,CAAC,GAAG,eAAe,EAAE,CAAC;IAEpC,MAAM,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,SAAS,EAAE;QACnC,SAAS,EAAE;YACT,KAAK,EAAE;gBACL,MAAM;gBACN,aAAa;gBACb,QAAQ,EAAE,CAAC;aACZ;SACF;QACD,WAAW,EAAE,IAAI,CAAC,EAAE;YAClB,OAAO,CACL,oBAAC,mBAAmB,IAClB,iBAAiB,EAAE,OAAO,CAAC,OAAO,EAClC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,KAAK,GACZ,EACF,EAAE,IAAI,EAAE,aAAa,EAAE,CACxB,CAAC;YAEF,gBAAgB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;QACpD,CAAC;KACF,CAAC,CAAC;IAEH,OAAO,CACL,gCACE,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,EACpB,QAAQ,EAAE,OAAO,CAAC,SAAS,IAE1B,CAAC,CAAC,aAAa,CAAC,CACV,CACV,CAAC;AACJ,CAAC"}

package/dist/src/components/ProductList/Favourite.js

@@ -0,0 +1,46 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useProductList } from '@jetshop/core/hooks/ProductList';
+import React from 'react';
+import { css } from 'linaria';
+import { ReactComponent as HeartSVG } from '../../svg/Heart.svg';
+const favourite = css `
+  button {
+    background: transparent;
+    svg {
+      &.active {
+        fill: currentColor;
+      }
+    }
+  }
+`;
+export function Favourite(_a) {
+    var { product, variant, listId } = _a, rest = __rest(_a, ["product", "variant", "listId"]);
+    const articleNumber = product.articleNumber;
+    const selectedVariation = product.variant || variant;
+    const variantArticleNumber = selectedVariation === null || selectedVariation === void 0 ? void 0 : selectedVariation.articleNumber;
+    const { toggle, inList } = useProductList(listId);
+    function toggleWithoutBubble(e) {
+        e.preventDefault();
+        toggle(articleNumber, {
+            variantArticleNumber,
+            productName: product.name
+        });
+    }
+    const isInList = inList(articleNumber, {
+        variantArticleNumber
+    });
+    return (React.createElement("div", Object.assign({ className: favourite }, rest),
+        React.createElement("button", { onClick: toggleWithoutBubble, "aria-label": "Add to favourites" },
+            React.createElement(HeartSVG, { className: isInList ? 'active' : 'inactive', style: { height: '1em', width: '1em' } }))));
+}
+//# sourceMappingURL=Favourite.js.map

package/dist/src/components/ProductList/Favourite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Favourite.js","sourceRoot":"","sources":["../../../../src/components/ProductList/Favourite.js"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEjE,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;CASpB,CAAC;AAEF,MAAM,UAAU,SAAS,CAAC,EAAqC;QAArC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,OAAW,EAAN,IAAI,cAAnC,gCAAqC,CAAF;IAC3D,MAAM,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC;IAE5C,MAAM,iBAAiB,GAAG,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC;IACrD,MAAM,oBAAoB,GAAG,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,aAAa,CAAC;IAE9D,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IAElD,SAAS,mBAAmB,CAAC,CAAC;QAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,CAAC,aAAa,EAAE;YACpB,oBAAoB;YACpB,WAAW,EAAE,OAAO,CAAC,IAAI;SAC1B,CAAC,CAAC;IACL,CAAC;IAED,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,EAAE;QACrC,oBAAoB;KACrB,CAAC,CAAC;IAEH,OAAO,CACL,2CAAK,SAAS,EAAE,SAAS,IAAM,IAAI;QACjC,gCAAQ,OAAO,EAAE,mBAAmB,gBAAa,mBAAmB;YAClE,oBAAC,QAAQ,IACP,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,EAC3C,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GACtC,CACK,CACL,CACP,CAAC;AACJ,CAAC"}

package/dist/src/components/ProductList/FavouriteCount.js

@@ -0,0 +1,15 @@
+import { useProductList } from '@jetshop/core/hooks/ProductList';
+import t from '@jetshop/intl';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ReactComponent as HeartSVG } from '../../svg/Heart.svg';
+import Badge from '../ui/Badge';
+export function FavouriteCount({ className, listId }) {
+    const { count } = useProductList(listId);
+    return (React.createElement(Link, { to: "/favourites", className: className },
+        React.createElement("div", { className: "badge-svg-wrapper" },
+            count > 0 && React.createElement(Badge, { text: count }),
+            React.createElement(HeartSVG, null)),
+        React.createElement("span", null, t('Favourites'))));
+}
+//# sourceMappingURL=FavouriteCount.js.map

package/dist/src/components/ProductList/FavouriteCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavouriteCount.js","sourceRoot":"","sources":["../../../../src/components/ProductList/FavouriteCount.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,KAAK,MAAM,aAAa,CAAC;AAEhC,MAAM,UAAU,cAAc,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;IAClD,MAAM,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IAEzC,OAAO,CACL,oBAAC,IAAI,IAAC,EAAE,EAAC,aAAa,EAAC,SAAS,EAAE,SAAS;QACzC,6BAAK,SAAS,EAAC,mBAAmB;YAC/B,KAAK,GAAG,CAAC,IAAI,oBAAC,KAAK,IAAC,IAAI,EAAE,KAAK,GAAI;YACpC,oBAAC,QAAQ,OAAG,CACR;QACN,kCAAO,CAAC,CAAC,YAAY,CAAC,CAAQ,CACzB,CACR,CAAC;AACJ,CAAC"}

package/dist/src/components/ProductList/Favourites.js

@@ -0,0 +1,187 @@
+import React from 'react';
+import { css, cx } from 'linaria';
+import { useProductList, useProductListItems } from '@jetshop/core/hooks/ProductList';
+import { useAddMultipleToCart } from '@jetshop/core/hooks/useAddMultipleToCart';
+import t from '@jetshop/intl';
+import { useNotification } from '@jetshop/core/components/Notifications';
+import { ReactComponent as CartIcon } from '../../svg/Cart.svg';
+import MaxWidth from '../Layout/MaxWidth';
+import { theme } from '../Theme';
+import Button from '../ui/Button';
+import { Product } from './Product';
+import { Helmet } from 'react-helmet-async';
+import addMultipleToCartMutation from '../Cart/queries/addMultipleToCart.gql';
+import cartQuery from '../Cart/queries/cartQuery.gql';
+export function Favourites() {
+    const listId = null;
+    const { products, loading } = useProductListItems(listId);
+    const [trigger] = useNotification();
+    const validItems = getItemsForAddToCart(products);
+    const validItemCount = validItems.length;
+    const [addToCart, { loading: mutationLoading }] = useAddMultipleToCart(validItems, {
+        addMultipleToCartMutation,
+        cartQuery
+    }, {
+        onCompleted: () => {
+            trigger(React.createElement(AddAllSuccessToast, null,
+                React.createElement(CartIcon, null),
+                t('{productCount, plural, =1 {# product added to the cart.} other {# products added to the cart.}}', { productCount: validItemCount })));
+        }
+    });
+    const noProductsInList = products.length === 0 && !loading;
+    const loadingInitialRender = products.length === 0 && loading;
+    if (noProductsInList) {
+        return (React.createElement(MaxWidth, { className: cx(container, loading ? 'loading' : null) },
+            React.createElement(Helmet, null,
+                React.createElement("meta", { name: "robots", content: "noindex" })),
+            React.createElement("h1", null, t('Saved items')),
+            React.createElement("p", null, t('There are no products in your saved items list.'))));
+    }
+    if (loadingInitialRender) {
+        return (React.createElement(MaxWidth, { className: cx(container, loading ? 'loading' : null) },
+            React.createElement("h1", null, t('Saved items')),
+            React.createElement("p", null, t('Loading your saved items…'))));
+    }
+    return (React.createElement(MaxWidth, { className: cx(container, loading ? 'loading' : null) },
+        React.createElement("ul", { className: "product-grid" }, products.map((product, index) => {
+            var _a;
+            return (React.createElement("li", { key: ((_a = product.variant) === null || _a === void 0 ? void 0 : _a.articleNumber) || product.articleNumber, "data-valid": product.validation.status },
+                React.createElement(Product, { listId: listId, product: product })));
+        })),
+        React.createElement("div", { className: "add-clear" },
+            React.createElement(Button, { style: { marginTop: '2em' }, onClick: addToCart, loading: mutationLoading, className: "add-all", disabled: validItemCount === 0 }, validItemCount > 0
+                ? mutationLoading
+                    ? t('One moment…')
+                    : t('{productCount, plural, =1 {Add # product to cart} other {Add # products to cart}}', { productCount: validItemCount })
+                : t('No valid items to add to cart')),
+            React.createElement(ClearList, { listId: listId }, t('Clear list'))),
+        React.createElement(Helmet, null,
+            React.createElement("meta", { name: "robots", content: "noindex" }))));
+}
+function AddAllSuccessToast({ children }) {
+    return React.createElement("div", { className: addAllToastStyles }, children);
+}
+function ClearList({ children, listId }) {
+    const { clear } = useProductList(listId);
+    return (React.createElement(Button, { secondary: true, onClick: clear }, children));
+}
+function getItemsForAddToCart(products) {
+    // When adding to cart we only want valid items, and each articleNumber needs
+    // to be the variant rather than the base product
+    return products
+        .filter(product => {
+        return product.validation.status === 'valid' && !product.hidePrice;
+    })
+        .map(product => (Object.assign(Object.assign({}, product), { articleNumber: product.isVariant
+            ? product.variant.articleNumber
+            : product.articleNumber })));
+}
+const container = css `
+  margin-top: 2em;
+  &.loading {
+    opacity: 0.6;
+  }
+
+  h1 {
+    margin-bottom: 1em;
+    font-weight: 600;
+  }
+
+  .product-grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: stretch;
+    margin-right: -${theme.space[1]};
+    margin-left: -${theme.space[1]};
+    width: 100%;
+
+    > * {
+      line-height: 19px;
+      min-width: 0;
+      margin: ${theme.space[1]};
+      width: calc(50% - ${theme.space[2]});
+
+      ${theme.above.md} {
+        width: calc(33.333% - ${theme.space[2]});
+      }
+      ${theme.above.lg} {
+        width: calc(25% - ${theme.space[2]});
+      }
+    }
+  }
+
+  [data-valid] .product-card {
+    border: 1px solid ${theme.colors.beige};
+  }
+  [data-valid='valid'] .product-card {
+    border: 1px solid ${theme.colors.tablegrey};
+  }
+  .product-card {
+    a {
+      margin: 0;
+      border: 0;
+    }
+  }
+  .product-card-detail,
+  .product-card,
+  .product-card a {
+    background: white;
+  }
+  li:not([data-valid='valid']) .product-card {
+    background: rgba(255, 255, 255, 0.2);
+    a {
+      opacity: 0.5;
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  .select-variant {
+    margin: 0;
+    padding: 1em;
+    position: relative;
+    z-index: 999;
+    [data-flight-dropdown] {
+      + [data-flight-dropdown] {
+        margin-top: 0.5em;
+      }
+      button,
+      ul,
+      li {
+        width: 100%;
+      }
+      li {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+  }
+
+  .add-clear button {
+    max-width: 30ch;
+    display: block;
+    margin: 0.5em auto;
+  }
+
+  .new-price,
+  .old-price {
+    display: inline-block;
+  }
+  .old-price {
+    margin-left: 0.5em;
+  }
+`;
+const addAllToastStyles = css `
+  background: white;
+  color: ${theme.colors.black};
+  padding: 1em;
+  display: flex;
+  align-items: center;
+
+  svg {
+    max-width: 1.5em;
+    max-height: 1.5em;
+    margin-right: 0.5em;
+  }
+`;
+//# sourceMappingURL=Favourites.js.map

package/dist/src/components/ProductList/Favourites.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Favourites.js","sourceRoot":"","sources":["../../../../src/components/ProductList/Favourites.js"],"names":[],"mappings":"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"}

package/dist/src/components/ProductList/Lister.js

@@ -0,0 +1,22 @@
+/*
+ * TODO This is temporary, delete before merging
+ *
+ */
+import React from 'react';
+import { useContext } from 'react';
+import { ProductListContext } from '@jetshop/core/hooks/ProductList/ProductListContext';
+import { Link } from 'react-router-dom';
+import useAuth from '@jetshop/core/components/AuthContext/useAuth';
+export default function Lister() {
+    const { state, createList, deleteList } = useContext(ProductListContext);
+    const { loggedIn } = useAuth();
+    return (React.createElement(React.Fragment, null,
+        React.createElement("h2", null, "Product lists"),
+        loggedIn ? (React.createElement("button", { onClick: () => createList('BOOM') }, "Create a list a new list called BOOM")) : (React.createElement(React.Fragment, null)),
+        React.createElement("br", null),
+        React.createElement("ul", null, Array.from(state.lists.entries()).map(([listId, obj]) => (React.createElement("li", { key: listId, style: { padding: '0.5em' } },
+            React.createElement(Link, { to: `/favourites/${listId || ''}` }, listId === null ? 'Default list' : obj.name),
+            listId === null ? (React.createElement(React.Fragment, null)) : (React.createElement("button", { onClick: () => deleteList(listId) }, "DELETE")))))),
+        React.createElement("hr", null)));
+}
+//# sourceMappingURL=Lister.js.map

package/dist/src/components/ProductList/Lister.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lister.js","sourceRoot":"","sources":["../../../../src/components/ProductList/Lister.js"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AACxF,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,OAAO,MAAM,8CAA8C,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,MAAM;IAC5B,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACzE,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,CAAC;IAC/B,OAAO,CACL;QACE,gDAAsB;QACrB,QAAQ,CAAC,CAAC,CAAC,CACV,gCAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,2CAEhC,CACV,CAAC,CAAC,CAAC,CACF,yCAAK,CACN;QAED,+BAAM;QAEN,gCACG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,CACxD,4BAAI,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;YAC1C,oBAAC,IAAI,IAAC,EAAE,EAAE,eAAe,MAAM,IAAI,EAAE,EAAE,IACpC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CACvC;YACN,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,CACjB,yCAAK,CACN,CAAC,CAAC,CAAC,CACF,gCAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,aAAiB,CAC3D,CACE,CACN,CAAC,CACC;QACL,+BAAM,CACL,CACJ,CAAC;AACJ,CAAC"}

package/dist/src/components/ProductList/Product.js

@@ -0,0 +1,62 @@
+import t from '@jetshop/intl';
+import React from 'react';
+import { css } from 'linaria';
+import { ProductCard } from '../CategoryPage/ProductCard';
+import { AddToCart } from './AddToCart';
+import { SelectVariant } from './SelectVariant';
+import { ReactComponent as TrashSVG } from '../../svg/trash.svg';
+import { useProductList } from '@jetshop/core/hooks/ProductList';
+export function Product({ product, loading, children, listId }) {
+    // Use the variant's image for display
+    const productForDisplay = Object.assign({}, product);
+    if (product.isVariant &&
+        product.variant.images &&
+        product.variant.images.length > 0) {
+        productForDisplay.images = product.variant.images;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ProductCard, { product: productForDisplay, as: "div" },
+            product.hasVariants && (React.createElement("div", { className: "select-variant" },
+                React.createElement(SelectVariant, { listId: listId, product: product }))),
+            product.validation.status === 'valid' ? (React.createElement(AddToCart, { product: product })) : (React.createElement(InvalidProduct, { validation: product.validation })),
+            React.createElement(RemoveFromList, { listId: listId, articleNumber: product.articleNumber, variant: product.variant }))));
+}
+function RemoveFromList({ children, articleNumber, variant, listId }) {
+    const { remove } = useProductList(listId);
+    const variantArticleNumber = variant === null || variant === void 0 ? void 0 : variant.articleNumber;
+    return (React.createElement("button", { className: removeStyles, onClick: () => remove(articleNumber, { variantArticleNumber }) },
+        React.createElement(TrashSVG, null)));
+}
+function InvalidProduct({ validation }) {
+    const { status } = validation;
+    const reasonMessages = {
+        outOfStock: t('Out of stock'),
+        missingVariant: t('Select options'),
+        preOrder: t('Visit product page to add'),
+        configurations: t('Visit product page to add'),
+        package: t('Visit product page to add')
+    };
+    return (React.createElement("div", { className: invalidProductStyles }, reasonMessages[status] || t('Not available')));
+}
+const removeStyles = css `
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+  background: white;
+  border: 1px solid silver;
+  border-radius: 50%;
+  padding: 0.5em;
+  svg {
+    height: 1.25em;
+    width: 1.25em;
+  }
+`;
+const invalidProductStyles = css `
+  background: #e7e7e7;
+  border: 0.75px solid #bfbdbd;
+  text-align: center;
+  padding: 1em;
+
+  color: #555555;
+`;
+//# sourceMappingURL=Product.js.map

package/dist/src/components/ProductList/Product.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Product.js","sourceRoot":"","sources":["../../../../src/components/ProductList/Product.js"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE,MAAM,UAAU,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE;IAC5D,sCAAsC;IACtC,MAAM,iBAAiB,qBAAQ,OAAO,CAAE,CAAC;IACzC,IACE,OAAO,CAAC,SAAS;QACjB,OAAO,CAAC,OAAO,CAAC,MAAM;QACtB,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EACjC;QACA,iBAAiB,CAAC,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC;KACnD;IAED,OAAO,CACL;QACE,oBAAC,WAAW,IAAC,OAAO,EAAE,iBAAiB,EAAE,EAAE,EAAC,KAAK;YAC9C,OAAO,CAAC,WAAW,IAAI,CACtB,6BAAK,SAAS,EAAC,gBAAgB;gBAC7B,oBAAC,aAAa,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAI,CAC/C,CACP;YACA,OAAO,CAAC,UAAU,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CACvC,oBAAC,SAAS,IAAC,OAAO,EAAE,OAAO,GAAI,CAChC,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IAAC,UAAU,EAAE,OAAO,CAAC,UAAU,GAAI,CACnD;YACD,oBAAC,cAAc,IACb,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,OAAO,CAAC,aAAa,EACpC,OAAO,EAAE,OAAO,CAAC,OAAO,GACxB,CACU,CACb,CACJ,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE;IAClE,MAAM,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IAC1C,MAAM,oBAAoB,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAC;IACpD,OAAO,CACL,gCACE,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,oBAAoB,EAAE,CAAC;QAE9D,oBAAC,QAAQ,OAAG,CACL,CACV,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,EAAE,UAAU,EAAE;IACpC,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;IAC9B,MAAM,cAAc,GAAG;QACrB,UAAU,EAAE,CAAC,CAAC,cAAc,CAAC;QAC7B,cAAc,EAAE,CAAC,CAAC,gBAAgB,CAAC;QACnC,QAAQ,EAAE,CAAC,CAAC,2BAA2B,CAAC;QACxC,cAAc,EAAE,CAAC,CAAC,2BAA2B,CAAC;QAC9C,OAAO,EAAE,CAAC,CAAC,2BAA2B,CAAC;KACxC,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,oBAAoB,IACjC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,CACzC,CACP,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;CAYvB,CAAC;AAEF,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;CAO/B,CAAC"}

package/dist/src/components/ProductList/SelectVariant.js

@@ -0,0 +1,47 @@
+import { useProductList } from '@jetshop/core/hooks/ProductList';
+import { useProductVariants } from '@jetshop/core/hooks/useProductVariants';
+import t from '@jetshop/intl';
+import { DropdownMenu, DropdownMenuButton, DropdownMenuItem, DropdownMenuItems } from '@jetshop/ui/DropdownMenu';
+import { ReactComponent as Check } from '@jetshop/ui/svg/Check.svg';
+import React from 'react';
+export function SelectVariant({ product, listId }) {
+    const { update } = useProductList(listId);
+    const initialVariant = product.variant;
+    const { selectedVariant, selectValue, getSelectedValue, validateSelection } = useProductVariants(product, {
+        initialVariant
+    });
+    React.useEffect(() => {
+        var _a;
+        // When a variant is selected, call the update function from useProductList to update the list
+        function setVariant(variantArticleNumber) {
+            var _a;
+            update(product.articleNumber, {
+                variantArticleNumber,
+                variantToReplace: (_a = product.variant) === null || _a === void 0 ? void 0 : _a.articleNumber,
+                quantity: 1
+            });
+        }
+        const currentArticleNumber = (_a = product.variant) === null || _a === void 0 ? void 0 : _a.articleNumber;
+        if (!selectedVariant)
+            return;
+        if (currentArticleNumber !== selectedVariant.articleNumber) {
+            setVariant(selectedVariant.articleNumber);
+        }
+    }, [product.articleNumber, product.variant, selectedVariant, update]);
+    return (React.createElement(React.Fragment, null, product.variants.options.map(option => {
+        const selectedValue = getSelectedValue(option);
+        return (React.createElement(DropdownMenu, { key: option.name },
+            React.createElement(DropdownMenuButton, null, selectedValue
+                ? `${option.name}: ${selectedValue}`
+                : t.rich('Select {option}', { option: option.name })),
+            React.createElement(DropdownMenuItems, { style: { zIndex: 9999 } }, option.values.map(value => {
+                const validation = validateSelection(value, option);
+                return (React.createElement(DropdownMenuItem, { key: value, disabled: validation === 'invalid', closeOnSelect: true, onSelect: () => {
+                        selectValue(value, option);
+                    }, style: { opacity: validation !== 'invalid' ? 1 : 0.5 } },
+                    value,
+                    selectedValue === value && React.createElement(Check, null)));
+            }))));
+    })));
+}
+//# sourceMappingURL=SelectVariant.js.map

package/dist/src/components/ProductList/SelectVariant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectVariant.js","sourceRoot":"","sources":["../../../../src/components/ProductList/SelectVariant.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,cAAc,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,UAAU,aAAa,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE;IAC/C,MAAM,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IAC1C,MAAM,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC;IAEvC,MAAM,EAAE,eAAe,EAAE,WAAW,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,GACzE,kBAAkB,CAAC,OAAO,EAAE;QAC1B,cAAc;KACf,CAAC,CAAC;IAEL,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACnB,8FAA8F;QAC9F,SAAS,UAAU,CAAC,oBAAoB;;YACtC,MAAM,CAAC,OAAO,CAAC,aAAa,EAAE;gBAC5B,oBAAoB;gBACpB,gBAAgB,EAAE,MAAA,OAAO,CAAC,OAAO,0CAAE,aAAa;gBAChD,QAAQ,EAAE,CAAC;aACZ,CAAC,CAAC;QACL,CAAC;QAED,MAAM,oBAAoB,GAAG,MAAA,OAAO,CAAC,OAAO,0CAAE,aAAa,CAAC;QAE5D,IAAI,CAAC,eAAe;YAAE,OAAO;QAE7B,IAAI,oBAAoB,KAAK,eAAe,CAAC,aAAa,EAAE;YAC1D,UAAU,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SAC3C;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,OAAO,EAAE,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IAEtE,OAAO,CACL,0CACG,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QACrC,MAAM,aAAa,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAC/C,OAAO,CACL,oBAAC,YAAY,IAAC,GAAG,EAAE,MAAM,CAAC,IAAI;YAC5B,oBAAC,kBAAkB,QAChB,aAAa;gBACZ,CAAC,CAAC,GAAG,MAAM,CAAC,IAAI,KAAK,aAAa,EAAE;gBACpC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,CACnC;YACrB,oBAAC,iBAAiB,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IACvC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;gBACzB,MAAM,UAAU,GAAG,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;gBAEpD,OAAO,CACL,oBAAC,gBAAgB,IACf,GAAG,EAAE,KAAK,EACV,QAAQ,EAAE,UAAU,KAAK,SAAS,EAClC,aAAa,EAAE,IAAI,EACnB,QAAQ,EAAE,GAAG,EAAE;wBACb,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;oBAC7B,CAAC,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE;oBAErD,KAAK;oBACL,aAAa,KAAK,KAAK,IAAI,oBAAC,KAAK,OAAG,CACpB,CACpB,CAAC;YACJ,CAAC,CAAC,CACgB,CACP,CAChB,CAAC;IACJ,CAAC,CAAC,CACD,CACJ,CAAC;AACJ,CAAC"}

package/dist/src/components/ProductList/productListQueries.js

@@ -0,0 +1,15 @@
+import queries from '@jetshop/core/data/queries/ProductLists.gql';
+import mutations from '@jetshop/core/data/mutations/productListMutations.gql';
+import * as ProductListQueries from './ProductLists.gql';
+export const productListQueries = {
+    createList: mutations.CreateProductList,
+    deleteList: mutations.DeleteProductList,
+    all: queries.ProductLists,
+    query: ProductListQueries.ProductList,
+    productsQuery: ProductListQueries.ProductsFromProductList,
+    add: ProductListQueries.AddToProductList,
+    login: ProductListQueries.MergeProductLists,
+    update: ProductListQueries.UpdateProductListItem,
+    remove: ProductListQueries.RemoveFromProductList
+};
+//# sourceMappingURL=productListQueries.js.map

package/dist/src/components/ProductList/productListQueries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"productListQueries.js","sourceRoot":"","sources":["../../../../src/components/ProductList/productListQueries.js"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,6CAA6C,CAAC;AAClE,OAAO,SAAS,MAAM,uDAAuD,CAAC;AAC9E,OAAO,KAAK,kBAAkB,MAAM,oBAAoB,CAAC;AAEzD,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,UAAU,EAAE,SAAS,CAAC,iBAAiB;IACvC,UAAU,EAAE,SAAS,CAAC,iBAAiB;IACvC,GAAG,EAAE,OAAO,CAAC,YAAY;IACzB,KAAK,EAAE,kBAAkB,CAAC,WAAW;IACrC,aAAa,EAAE,kBAAkB,CAAC,uBAAuB;IACzD,GAAG,EAAE,kBAAkB,CAAC,gBAAgB;IACxC,KAAK,EAAE,kBAAkB,CAAC,iBAAiB;IAC3C,MAAM,EAAE,kBAAkB,CAAC,qBAAqB;IAChD,MAAM,EAAE,kBAAkB,CAAC,qBAAqB;CACjD,CAAC"}

package/dist/src/components/ProductPage/AddToCart/AddToCartForm.js

@@ -0,0 +1,110 @@
+import React, { useContext } from 'react';
+import { styled } from 'linaria/react';
+import { css, cx } from 'linaria';
+import { Form } from 'formik';
+import AddToCartFormik from '@jetshop/core/cart/AddToCartFormik';
+import ProductConfigurationContext from '@jetshop/core/components/ProductConfigurationProvider/ProductConfigurationContext';
+import { useDynamicPrice } from '@jetshop/core/hooks/useDynamicPrice';
+import t from '@jetshop/intl';
+import { Price } from '@jetshop/ui/Price';
+import { useStockStatus } from '@jetshop/ui/Stock/StockStatusContainer';
+import { PreOrderDateSelector } from '@jetshop/ui/PreOrderDateSelector';
+import { useNotification } from '@jetshop/core/components/Notifications';
+import InputWithLabel from '../../Forms/Input';
+import Button from '../../ui/Button';
+import { IncludedInPackages } from '../PackageProduct/IncludedInPackages';
+import { Campaigns } from '../Campaigns';
+import NotifyWhenBack from '../StockStatus/NotifyWhenBack';
+import StockStatusIndicator from '../StockStatus/StockStatusIndicator';
+import { useProductValidationMessage } from '../useProductValidationMessage';
+import { VariantSelector, dropdownStyles } from '../VariantSelector';
+import { theme } from '../../Theme';
+import ProductToastWrapper from './ProductToast';
+import { ConfigurationSelector } from '../ConfigurationSelector';
+import WarehouseStock from '../StockStatus/WarehouseStock';
+import addToCartMutation from '../../Cart/queries/addToCart.gql';
+import CartQuery from '../../Cart/queries/cartQuery.gql';
+import { PriceHistoryWrapper } from '../PriceHistory';
+const StyledForm = styled(Form) `
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  margin-bottom: 36px;
+  ${theme.below.md} {
+    align-items: center;
+  }
+`;
+const QuantityAddToCartWrapper = styled('div') `
+  margin-top: 16px;
+  display: flex;
+  width: 100%;
+  align-items: flex-end;
+`;
+const preOrderDateSelectorStyles = css `
+  && {
+    [data-flight-dropdown-items] {
+      width: 100%;
+      height: 200px;
+      overflow: scroll;
+    }
+  }
+`;
+function AddToCartForm({ product, variant, getMissingOptions, variantHandler }) {
+    const configurationContext = useContext(ProductConfigurationContext);
+    const price = useDynamicPrice(product, variant);
+    const stockStatus = useStockStatus(variant || product);
+    const outOfStockNotify = stockStatus.status === 'notifyWhenBack';
+    const { validation: variantValidation, missingOptions } = variantHandler;
+    const { hasVariants, hidePrice } = product;
+    const { validationMessage, enableValidation } = useProductValidationMessage({
+        missingOptions,
+        variantValidation,
+        hasVariants,
+        stockStatus
+    });
+    const [trigger, dismiss] = useNotification();
+    const onAddToCartInit = ({ mutationId, quantity }) => {
+        trigger(React.createElement(ProductToastWrapper, { selectedVariation: variant, product: product, quantity: quantity }), {
+            id: mutationId,
+            type: 'add-to-cart'
+        });
+    };
+    const onAddToCartError = () => {
+        return ({ mutationId, quantity, error }) => {
+            dismiss(mutationId);
+            trigger(React.createElement(ProductToastWrapper, { selectedVariation: variant, product: product, quantity: quantity, error: error }), {
+                type: 'add-to-cart'
+            });
+        };
+    };
+    return (React.createElement(AddToCartFormik, { onAddToCartInit: onAddToCartInit, onAddToCartError: onAddToCartError, cartQuery: CartQuery, cartMutation: addToCartMutation, product: product, variant: variant, getMissingOptions: getMissingOptions }, () => {
+        var _a, _b, _c, _d;
+        return (React.createElement(React.Fragment, null,
+            product.hasVariants && (React.createElement(VariantSelector, { product: product, variantHandler: variantHandler, showValidation: !!validationMessage })),
+            product.hasConfigurations && (React.createElement(ConfigurationSelector, { product: product })),
+            product.isPreorder && (React.createElement(PreOrderDateSelector, { className: cx(dropdownStyles, preOrderDateSelectorStyles), product: product })),
+            React.createElement(Price, Object.assign({ hidePrice: product.hidePrice }, price, { css: {
+                    marginBottom: '24px',
+                    opacity: configurationContext && configurationContext.loading ? 0.3 : 1
+                } })),
+            !hidePrice && (React.createElement(PriceHistoryWrapper, { articleNumber: product.articleNumber, variant: variant })),
+            React.createElement(Campaigns, { campaigns: product.campaigns, css: { marginTop: '-16px', marginBottom: '24px' } }),
+            React.createElement(IncludedInPackages, { packages: product.inPackages }),
+            React.createElement(StyledForm, null,
+                product.customerComments &&
+                    product.customerComments.map(comment => (React.createElement(InputWithLabel, { wrapperClassName: "customer-comment-input-wrapper", className: "customer-comment-input", "data-testid": `${comment.name}-input`, id: `comments['${comment.name}']`, name: `comments['${comment.name}']`, label: comment.name, key: comment.name }))),
+                React.createElement(StockStatusIndicator, { status: stockStatus.status, text: stockStatus.text }),
+                !outOfStockNotify && !hidePrice && (React.createElement(QuantityAddToCartWrapper, null,
+                    React.createElement(InputWithLabel, { disableValidation: true, wrapperClassName: "quantity-input-wrapper", min: "1", type: "number", name: "quantity", label: "Quantity" }),
+                    React.createElement(Button, { "data-testid": "add-to-cart", type: "submit", disabled: !!validationMessage, onClick: enableValidation, style: {
+                            opacity: !!validationMessage ? 0.7 : 1,
+                            cursor: !!validationMessage ? 'not-allowed' : 'pointer',
+                            width: '100%'
+                        } }, validationMessage ? validationMessage : t('Add to cart'))))),
+            (((_a = product === null || product === void 0 ? void 0 : product.warehouseStock) === null || _a === void 0 ? void 0 : _a.length) > 0 ||
+                ((_d = (_c = (_b = product === null || product === void 0 ? void 0 : product.variants) === null || _b === void 0 ? void 0 : _b.values[0]) === null || _c === void 0 ? void 0 : _c.warehouseStock) === null || _d === void 0 ? void 0 : _d.length) > 0) && (React.createElement(WarehouseStock, { product: product, variantHandler: variantHandler })),
+            outOfStockNotify && (React.createElement(NotifyWhenBack, { articleNumber: (variant || product).articleNumber }))));
+    }));
+}
+export default AddToCartForm;
+//# sourceMappingURL=AddToCartForm.js.map

package/dist/src/components/ProductPage/AddToCart/AddToCartForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddToCartForm.js","sourceRoot":"","sources":["../../../../../src/components/ProductPage/AddToCart/AddToCartForm.js"],"names":[],"mappings":"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"}