@jetshop/template-trend 6.1.4 → 6.1.5

package/dist/src/components/ProductPage/PackageProduct/PackageProductItem.js

@@ -0,0 +1,92 @@
+import { usePackageProductItem } from '@jetshop/core/hooks/PackageProducts';
+import Image from '@jetshop/ui/Image';
+import { Price } from '@jetshop/ui/Price';
+import ProductLink from '@jetshop/ui/ProductLink';
+import React from 'react';
+import { styled } from 'linaria/react';
+import StockStatusIndicator from '../StockStatus/StockStatusIndicator';
+import { VariantSelector } from '../VariantSelector';
+const PackageProductItemWrapper = styled('div') `
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  color: black;
+  display: flex;
+  align-items: flex-start;
+
+  .product-link {
+    width: 72px;
+    margin-right: 12px;
+    img {
+      :hover {
+        opacity: 0.8 !important;
+      }
+    }
+  }
+
+  .product-name {
+    font-weight: 600;
+    font-size: 18px;
+    text-decoration: none;
+    color: black;
+    :hover {
+      text-decoration: underline;
+    }
+  }
+
+  .product-detail {
+    width: 100%;
+    > * + * {
+      margin-top: 0.5em;
+      margin-bottom: 0;
+    }
+  }
+
+  .flex {
+    display: flex;
+    align-items: center;
+  }
+  .price-quantity-wrapper {
+    margin-left: auto;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    .package-product-price {
+      .price,
+      .new-price,
+      .old-price {
+        display: inline-block;
+        margin-right: 0px;
+        margin-left: 8px;
+      }
+      .price,
+      .new-price {
+        color: #ca0c0c;
+        font-size: 18px;
+      }
+      .old-price {
+        color: black;
+      }
+    }
+  }
+`;
+export function PackageProductItem({ item, updatePackageItem, validationEnabled, price, fetchingPrice }) {
+    const { stockStatus, variantHandler } = usePackageProductItem(item, updatePackageItem, { preselectCheapest: true });
+    const product = item.product;
+    return (React.createElement(PackageProductItemWrapper, null,
+        React.createElement(ProductLink, { product: product, className: "product-link" },
+            React.createElement(Image, { sizes: [1 / 10], aspect: '1:1', alt: product.images[0].alt, src: product.images[0].url })),
+        React.createElement("div", { className: "product-detail" },
+            React.createElement("header", null,
+                React.createElement(ProductLink, { product: product, className: "product-name" }, product.name),
+                React.createElement("p", null, product.subName)),
+            product.hasVariants && (React.createElement(VariantSelector, { product: product, variantHandler: variantHandler, showValidation: validationEnabled, disableOutOfStock: true })),
+            React.createElement("div", { className: "flex" },
+                React.createElement(StockStatusIndicator, { status: stockStatus.status, text: stockStatus.text, style: { marginTop: 0 } }),
+                React.createElement("div", { className: "price-quantity-wrapper", style: {
+                        opacity: fetchingPrice ? 0.3 : 1
+                    } },
+                    item.minQuantity > 1 && `${item.minQuantity} x`,
+                    React.createElement(Price, Object.assign({}, price, { className: "package-product-price" })))))));
+}
+//# sourceMappingURL=PackageProductItem.js.map

package/dist/src/components/ProductPage/PackageProduct/PackageProductItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PackageProductItem.js","sourceRoot":"","sources":["../../../../../src/components/ProductPage/PackageProduct/PackageProductItem.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAClD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,oBAAoB,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,yBAAyB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+D9C,CAAC;AAEF,MAAM,UAAU,kBAAkB,CAAC,EACjC,IAAI,EACJ,iBAAiB,EACjB,iBAAiB,EACjB,KAAK,EACL,aAAa,EACd;IACC,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,qBAAqB,CAC3D,IAAI,EACJ,iBAAiB,EACjB,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAC5B,CAAC;IAEF,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAE7B,OAAO,CACL,oBAAC,yBAAyB;QACxB,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,cAAc;YACrD,oBAAC,KAAK,IACJ,KAAK,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EACf,MAAM,EAAE,KAAK,EACb,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,EAC1B,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,GACnB,CACG;QACd,6BAAK,SAAS,EAAC,gBAAgB;YAC7B;gBACE,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,cAAc,IACpD,OAAO,CAAC,IAAI,CACD;gBACd,+BAAI,OAAO,CAAC,OAAO,CAAK,CACjB;YACR,OAAO,CAAC,WAAW,IAAI,CACtB,oBAAC,eAAe,IACd,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,iBAAiB,EACjC,iBAAiB,SACjB,CACH;YACD,6BAAK,SAAS,EAAC,MAAM;gBACnB,oBAAC,oBAAoB,IACnB,MAAM,EAAE,WAAW,CAAC,MAAM,EAC1B,IAAI,EAAE,WAAW,CAAC,IAAI,EACtB,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,GACvB;gBACF,6BACE,SAAS,EAAC,wBAAwB,EAClC,KAAK,EAAE;wBACL,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;qBACjC;oBAEA,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,IAAI;oBAChD,oBAAC,KAAK,oBAAK,KAAK,IAAE,SAAS,EAAC,uBAAuB,IAAG,CAClD,CACF,CACF,CACoB,CAC7B,CAAC;AACJ,CAAC"}

package/dist/src/components/ProductPage/PriceHistory.js

@@ -0,0 +1,99 @@
+import { useQuery } from '@apollo/client';
+import t from '@jetshop/intl';
+import React, { useContext } from 'react';
+import PriceHistoryQuery from './PriceHistoryQuery.gql';
+import { styled } from 'linaria/react';
+import { Price } from '@jetshop/ui/Price';
+import { FlyoutTrigger } from '@jetshop/ui/Modal/Flyout';
+import { FlyoutTarget } from '@jetshop/ui/Modal/Flyout';
+import ChannelContext from '@jetshop/core/components/ChannelContext/ChannelContext';
+const Wrapper = styled.div `
+  --innerFontSize: 0.85rem;
+  position: relative;
+
+  .label {
+    font-size: 0.75rem;
+    cursor: pointer;
+    background: transparent;
+  }
+
+  .price-table {
+    position: absolute;
+    padding: 0.35rem 0.9rem;
+    background: white;
+    border: 1px solid #e5e5e5;
+    max-height: 30rem;
+    overflow: scroll;
+    z-index: 2;
+    min-width: 14rem;
+    max-width: 18rem;
+
+    .label {
+      font-size: var(--innerFontSize);
+    }
+
+    li {
+      display: flex;
+      justify-content: space-between;
+
+      .timestamp {
+        font-size: var(--innerFontSize);
+      }
+
+      [data-flight-price=''] {
+        > .price {
+          font-size: var(--innerFontSize);
+          font-weight: normal;
+        }
+      }
+    }
+  }
+`;
+export function PriceHistoryWrapper(props) {
+    return (React.createElement(Wrapper, null,
+        React.createElement(FlyoutTrigger, { id: "price-history-flyout", coverStyles: { zIndex: 0, background: 'transparent' } }, ({ isOpen, hideTarget, showTarget }) => (React.createElement("button", { onClick: () => {
+                if (isOpen) {
+                    hideTarget();
+                }
+                else {
+                    showTarget();
+                }
+            }, className: "label" }, t('View price history')))),
+        React.createElement(FlyoutTarget, { id: "price-history-flyout" }, () => React.createElement(PriceHistory, Object.assign({}, props)))));
+}
+const days = 30;
+function PriceHistory({ articleNumber, variant }) {
+    const { error, loading, data } = useQuery(PriceHistoryQuery, {
+        variables: { articleNumber, days },
+        errorPolicy: 'all',
+        skip: !articleNumber
+    });
+    if (loading || error) {
+        return (React.createElement("div", { className: "price-table" },
+            loading && (React.createElement("span", { className: "label" }, t('Getting the last { days } days price changes...', {
+                days
+            }))),
+            error && React.createElement("span", { className: "label" }, t('Something went wrong'))));
+    }
+    const { product } = data;
+    if (!variant) {
+        return React.createElement(Table, { history: product.history, days: days });
+    }
+    const selectedVariant = product.variants.values.find(value => value.articleNumber === variant.articleNumber);
+    return React.createElement(Table, { history: selectedVariant.history, days: days });
+}
+const Table = ({ history, days }) => {
+    var _a;
+    const { selectedChannel } = useContext(ChannelContext);
+    if (((_a = history === null || history === void 0 ? void 0 : history.previousPrice) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+        return (React.createElement("div", { className: "price-table" },
+            React.createElement("span", { className: "label" }, t('The price has not changed in the last { days } days', { days }))));
+    }
+    return (React.createElement("div", { className: "price-table" },
+        React.createElement("ul", null, history.previousPrice.map(({ timestamp, price }) => (React.createElement("li", { key: timestamp },
+            React.createElement("span", { className: "timestamp" }, new Date(timestamp).toLocaleDateString([
+                selectedChannel.language.culture
+            ])),
+            React.createElement(Price, { price: price, as: "span" })))))));
+};
+//# sourceMappingURL=PriceHistory.js.map

package/dist/src/components/ProductPage/PriceHistory.js.map

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

package/dist/src/components/ProductPage/ProductInfo.js

@@ -0,0 +1,55 @@
+import ProductSpecifications from '@jetshop/ui/ProductSpecifications/ProductSpecifications';
+import React from 'react';
+import { styled } from 'linaria/react';
+import t from '@jetshop/intl';
+import { theme } from '../Theme';
+const Description = styled('article') `
+  margin-bottom: 42px;
+  color: #707070;
+`;
+export const SectionHeading = styled('h2') `
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 0.25em;
+`;
+export const ProductSection = styled('section') `
+  line-height: 1.5;
+
+  width: 100%;
+  padding-bottom: 3rem;
+
+  ${theme.below.md} {
+    margin: 0;
+  }
+
+  ${theme.above.md} {
+    width: calc(50% - 16px);
+  }
+
+  ${theme.above.lg} {
+    :nth-of-type(odd) {
+      width: calc(60% - 24px);
+    }
+    :nth-of-type(even) {
+      width: calc(40% - 24px);
+    }
+  }
+  ul.payment-options-list {
+    font-size: 16px;
+    font-weight: 600;
+  }
+`;
+const ProductInfo = ({ product }) => {
+    var _a;
+    return (React.createElement(React.Fragment, null,
+        product.description && (React.createElement(ProductSection, null,
+            React.createElement(SectionHeading, null, t('Product description')),
+            React.createElement(Description, { dangerouslySetInnerHTML: {
+                    __html: product.description
+                } }))),
+        ((_a = product.customFields) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React.createElement(ProductSection, null,
+            React.createElement(SectionHeading, null, t('Specifications')),
+            React.createElement(ProductSpecifications, { fields: product.customFields })))));
+};
+export default ProductInfo;
+//# sourceMappingURL=ProductInfo.js.map

package/dist/src/components/ProductPage/ProductInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductInfo.js","sourceRoot":"","sources":["../../../../src/components/ProductPage/ProductInfo.js"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,MAAM,yDAAyD,CAAC;AAC5F,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA;;;CAGpC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAIzC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA;;;;;;IAM3C,KAAK,CAAC,KAAK,CAAC,EAAE;;;;IAId,KAAK,CAAC,KAAK,CAAC,EAAE;;;;IAId,KAAK,CAAC,KAAK,CAAC,EAAE;;;;;;;;;;;;CAYjB,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;;IAClC,OAAO,CACL;QACG,OAAO,CAAC,WAAW,IAAI,CACtB,oBAAC,cAAc;YACb,oBAAC,cAAc,QAAE,CAAC,CAAC,qBAAqB,CAAC,CAAkB;YAC3D,oBAAC,WAAW,IACV,uBAAuB,EAAE;oBACvB,MAAM,EAAE,OAAO,CAAC,WAAW;iBAC5B,GACD,CACa,CAClB;QACA,CAAA,MAAA,OAAO,CAAC,YAAY,0CAAE,MAAM,IAAG,CAAC,IAAI,CACnC,oBAAC,cAAc;YACb,oBAAC,cAAc,QAAE,CAAC,CAAC,gBAAgB,CAAC,CAAkB;YACtD,oBAAC,qBAAqB,IAAC,MAAM,EAAE,OAAO,CAAC,YAAY,GAAI,CACxC,CAClB,CACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/src/components/ProductPage/ProductInfoAccordion.js

@@ -0,0 +1,46 @@
+import t from '@jetshop/intl';
+import Accordion from '@jetshop/ui/Accordion/Accordion';
+import ProductSpecifications from '@jetshop/ui/ProductSpecifications/ProductSpecifications';
+import React, { Fragment } from 'react';
+import { styled } from 'linaria/react';
+import { ProductSection as UIProductSection, SectionHeading } from './ProductInfo';
+const Description = styled('article') `
+  line-height: 25px;
+`;
+const ProductSection = styled(UIProductSection) `
+  border-bottom: 1px solid #e8e8e8;
+  padding: 1rem 0;
+  margin: 1rem 0;
+  font-size: 0.875rem;
+  ${SectionHeading} {
+    display: flex;
+    justify-items: space-between;
+    align-items: center;
+    margin-bottom: 0;
+    + * > :first-child {
+      margin-top: 1rem;
+    }
+  }
+`;
+const IndicatorIcon = styled('span') `
+  margin-left: auto;
+  font-size: 1.25rem;
+`;
+const AccordionIndicator = ({ isOpen }) => (React.createElement(IndicatorIcon, null, isOpen ? '-' : '+'));
+const ProductInfoAccordion = ({ product }) => (React.createElement(Accordion, { single: true }, ({ openIndexes, handleClick, AccordionContent }) => (React.createElement(Fragment, null,
+    React.createElement(ProductSection, null,
+        React.createElement(SectionHeading, { onClick: () => handleClick(0) },
+            React.createElement("span", null, t('Product description')),
+            React.createElement(AccordionIndicator, { isOpen: openIndexes.includes(0) })),
+        React.createElement(AccordionContent, { isOpen: openIndexes.includes(0) },
+            React.createElement(Description, { dangerouslySetInnerHTML: {
+                    __html: product.description
+                } }))),
+    React.createElement(ProductSection, null,
+        React.createElement(SectionHeading, { onClick: () => handleClick(1) },
+            React.createElement("span", null, t('Specifications')),
+            React.createElement(AccordionIndicator, { isOpen: openIndexes.includes(1) })),
+        React.createElement(AccordionContent, { isOpen: openIndexes.includes(1) },
+            React.createElement(ProductSpecifications, { fields: product.customFields })))))));
+export default ProductInfoAccordion;
+//# sourceMappingURL=ProductInfoAccordion.js.map

package/dist/src/components/ProductPage/ProductInfoAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductInfoAccordion.js","sourceRoot":"","sources":["../../../../src/components/ProductPage/ProductInfoAccordion.js"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,SAAS,MAAM,iCAAiC,CAAC;AACxD,OAAO,qBAAqB,MAAM,yDAAyD,CAAC;AAC5F,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EACL,cAAc,IAAI,gBAAgB,EAClC,cAAc,EACf,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA;;CAEpC,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;;;;;IAK3C,cAAc;;;;;;;;;CASjB,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;CAGnC,CAAC;AACF,MAAM,kBAAkB,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACzC,oBAAC,aAAa,QAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAiB,CACpD,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAC5C,oBAAC,SAAS,IAAC,MAAM,UACd,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CACnD,oBAAC,QAAQ;IACP,oBAAC,cAAc;QACb,oBAAC,cAAc,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;YAC3C,kCAAO,CAAC,CAAC,qBAAqB,CAAC,CAAQ;YACvC,oBAAC,kBAAkB,IAAC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CACxC;QACjB,oBAAC,gBAAgB,IAAC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC/C,oBAAC,WAAW,IACV,uBAAuB,EAAE;oBACvB,MAAM,EAAE,OAAO,CAAC,WAAW;iBAC5B,GACD,CACe,CACJ;IACjB,oBAAC,cAAc;QACb,oBAAC,cAAc,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;YAC3C,kCAAO,CAAC,CAAC,gBAAgB,CAAC,CAAQ;YAClC,oBAAC,kBAAkB,IAAC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CACxC;QACjB,oBAAC,gBAAgB,IAAC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC/C,oBAAC,qBAAqB,IAAC,MAAM,EAAE,OAAO,CAAC,YAAY,GAAI,CACtC,CACJ,CACR,CACZ,CACS,CACb,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -0,0 +1,174 @@
+import { useProductVariants } from '@jetshop/core/hooks/useProductVariants';
+import { useVariantFromUrl } from '@jetshop/core/hooks/useProductVariants/useVariantFromUrl';
+import { useIntl } from '@jetshop/intl';
+import { default as Breadcrumbs } from '@jetshop/ui/Breadcrumbs';
+import getParentOrCanonicalRoute from '@jetshop/ui/Breadcrumbs/getParentsOrCanonicalRoute';
+import { Above } from '@jetshop/ui/Breakpoints';
+import loadable from '@loadable/component';
+import { styled } from 'linaria/react';
+import React from 'react';
+import { ReactComponent as DeliveryCheck } from '../../svg/DeliveryCheck.svg';
+import MaxWidth from '../Layout/MaxWidth';
+import { Favourite } from '../ProductList/Favourite';
+import Spinner from '../ui/Spinner';
+import AddToCartForm from './AddToCart/AddToCartForm';
+import ImageContainer from './Images/ImageContainer';
+import ProductInfo, { ProductSection } from './ProductInfo';
+import ProductInfoAccordion from './ProductInfoAccordion';
+import ProductPageLoadingState from './ProductPageLoadingState';
+import { RelatedProducts } from './RelatedProducts';
+import { Container } from './styledComponents';
+import { theme } from '../Theme';
+const LoadablePackageProduct = loadable(() => import('./PackageProduct/PackageProduct'), {
+    fallback: React.createElement(Spinner, null)
+});
+const ProductContainer = styled('div') `
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-top: 1rem;
+  header {
+    h1 {
+      font-size: 28px;
+      line-height: 1.25;
+      + h2 {
+        font-size: 16px;
+        font-weight: 600;
+      }
+    }
+    margin-bottom: 24px;
+  }
+  .customer-comment-input-wrapper {
+    width: 100%;
+    .customer-comment-input {
+      height: 44px;
+    }
+    .status-wrapper {
+      top: -39px;
+    }
+  }
+  .quantity-input-wrapper {
+    margin-bottom: 0rem;
+    margin-right: 10px;
+    width: 54px;
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    input[type='number'] {
+      border-radius: 4px;
+      -moz-appearance: textfield; /* Firefox */
+    }
+    input {
+      width: 54px;
+      height: 54px;
+      text-align: center;
+      padding: 0px;
+      margin-bottom: 0px;
+    }
+    label {
+      text-align: center;
+    }
+  }
+  .short-description {
+    line-height: 1.5;
+    font-size: 16px;
+    margin-bottom: 24px;
+    color: #707070;
+    p {
+      margin-bottom: 1rem;
+    }
+  }
+  .delivery-list {
+    li {
+      display: flex;
+      align-items: center;
+      svg {
+        margin-right: 16px;
+      }
+      margin-bottom: 16px;
+    }
+  }
+  .product-details {
+    ${theme.above.md} {
+      align-items: flex-start;
+    }
+
+    .price,
+    .new-price,
+    .old-price {
+      font-weight: 600;
+      display: inline-block;
+    }
+    .price,
+    .new-price {
+      font-size: 1.5rem;
+    }
+    .new-price {
+      margin-right: 8px;
+      color: ${theme.colors.red};
+    }
+    .old-price {
+      color: #707070;
+    }
+  }
+`;
+const Product = ({ result: { data, loading }, product, partialProduct }) => {
+    var _a, _b, _c;
+    const initialVariant = useVariantFromUrl();
+    const t = useIntl();
+    const variantHandler = useProductVariants(product, {
+        initialVariant,
+        preselectCheapest: true
+    });
+    const { selectedVariant: selectedVariation, getMissingOptions } = variantHandler;
+    if (!product) {
+        product = partialProduct;
+    }
+    // Return early if there is no product
+    if (!product) {
+        return (React.createElement(ProductContainer, null,
+            React.createElement(ProductPageLoadingState, null)));
+    }
+    const images = (_a = product.images) !== null && _a !== void 0 ? _a : [];
+    const parents = getParentOrCanonicalRoute((_b = data === null || data === void 0 ? void 0 : data.route) === null || _b === void 0 ? void 0 : _b.parents, product);
+    const relatedProducts = product.relatedProducts;
+    return (React.createElement(ProductContainer, null,
+        React.createElement(MaxWidth, null,
+            React.createElement(Breadcrumbs, { breadcrumbs: ((_c = data === null || data === void 0 ? void 0 : data.route) === null || _c === void 0 ? void 0 : _c.breadcrumbs) || [], parents: parents })),
+        React.createElement(Container, null,
+            React.createElement(ProductSection, null, images && (React.createElement(ImageContainer, { images: images, variant: selectedVariation, badges: product.badges }))),
+            React.createElement(ProductSection, null,
+                React.createElement("div", { className: "product-details" },
+                    React.createElement("header", null,
+                        React.createElement(Favourite, { product: product, variant: selectedVariation, style: {
+                                float: 'right',
+                                marginLeft: 'auto',
+                                fontSize: '1.5em'
+                            } }),
+                        React.createElement("h1", { "data-testid": "product-title" }, product.name || 'Loading...'),
+                        React.createElement("h2", null, product.subName),
+                        product.articleNumber),
+                    React.createElement("div", { className: "short-description", dangerouslySetInnerHTML: {
+                            __html: product.shortDescription
+                        } }),
+                    (product === null || product === void 0 ? void 0 : product.isPackage) ? (React.createElement(LoadablePackageProduct, { product: product })) : (React.createElement(AddToCartForm, { product: product, variant: selectedVariation, getMissingOptions: getMissingOptions, variantHandler: variantHandler })),
+                    React.createElement("ul", { className: "delivery-list", css: { marginTop: '36px' } },
+                        React.createElement("li", null,
+                            React.createElement(DeliveryCheck, null),
+                            " ",
+                            t('Express 1–2 working days')),
+                        React.createElement("li", null,
+                            React.createElement(DeliveryCheck, null),
+                            " ",
+                            t('Standard 2–5 working days')),
+                        React.createElement("li", null,
+                            React.createElement(DeliveryCheck, null),
+                            " ",
+                            t('Free shipping and return'))))),
+            React.createElement(Above, { breakpoint: "md" }, matches => matches ? (React.createElement(ProductInfo, { product: product })) : (React.createElement(ProductInfoAccordion, { product: product })))),
+        relatedProducts && React.createElement(RelatedProducts, Object.assign({}, { relatedProducts, loading }))));
+};
+export default Product;
+//# sourceMappingURL=ProductPage.js.map

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

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

package/dist/src/components/ProductPage/ProductPage.loadable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import LoadingPage from '../LoadingPage';
+export default loadable(() => import('./ProductPage'), {
+    fallback: React.createElement(LoadingPage, null)
+});
+//# sourceMappingURL=ProductPage.loadable.js.map

package/dist/src/components/ProductPage/ProductPage.loadable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductPage.loadable.js","sourceRoot":"","sources":["../../../../src/components/ProductPage/ProductPage.loadable.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,eAAe,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE;IACrD,QAAQ,EAAE,oBAAC,WAAW,OAAG;CAC1B,CAAC,CAAC"}

package/dist/src/components/ProductPage/ProductPageLoadingState.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Container } from './styledComponents';
+import { ProductSection } from './ProductInfo';
+import { LoadingLine } from '@jetshop/ui/Loading/LoadingLine';
+import { styled } from 'linaria/react';
+const MockImage = styled('div') `
+  padding-top: 100%;
+  background: #f6f6f6;
+`;
+const MockThumbnails = styled('div') `
+  margin-top: 1rem;
+  display: flex;
+  justify-content: space-between;
+`;
+const MockThumbnail = styled('div') `
+  width: 22%;
+`;
+export default function ProductPageLoadingState() {
+    return (React.createElement(Container, { style: {
+            marginTop: '2'
+        } },
+        React.createElement(ProductSection, null,
+            React.createElement(MockImage, null),
+            React.createElement(MockThumbnails, null,
+                React.createElement(MockThumbnail, null,
+                    React.createElement(MockImage, null)),
+                React.createElement(MockThumbnail, null,
+                    React.createElement(MockImage, null)),
+                React.createElement(MockThumbnail, null,
+                    React.createElement(MockImage, null)),
+                React.createElement(MockThumbnail, null,
+                    React.createElement(MockImage, null)))),
+        React.createElement(ProductSection, null,
+            React.createElement(LoadingLine, { heightPx: 24, widthRem: 15, style: {
+                    marginBottom: '12px'
+                } }),
+            React.createElement(LoadingLine, { heightPx: 16, style: {
+                    marginBottom: '14px'
+                } }),
+            React.createElement(LoadingLine, { heightPx: 12, widthRem: 10, style: {
+                    marginBottom: '31px'
+                } }),
+            React.createElement(LoadingLine, { heightPx: 12, widthRem: 14, count: 2, style: {
+                    marginBottom: '8px'
+                } }),
+            React.createElement(LoadingLine, { heightPx: 24, style: {
+                    marginTop: '16px',
+                    marginBottom: '14px'
+                } }),
+            React.createElement(LoadingLine, { heightPx: 54, widthRem: 50, style: {
+                    marginTop: '16px',
+                    marginBottom: '14px'
+                } }))));
+}
+//# sourceMappingURL=ProductPageLoadingState.js.map

package/dist/src/components/ProductPage/ProductPageLoadingState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductPageLoadingState.js","sourceRoot":"","sources":["../../../../src/components/ProductPage/ProductPageLoadingState.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;CAG9B,CAAC;AACF,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;CAInC,CAAC;AACF,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;CAElC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,uBAAuB;IAC7C,OAAO,CACL,oBAAC,SAAS,IACR,KAAK,EAAE;YACL,SAAS,EAAE,GAAG;SACf;QAED,oBAAC,cAAc;YACb,oBAAC,SAAS,OAAG;YACb,oBAAC,cAAc;gBACb,oBAAC,aAAa;oBACZ,oBAAC,SAAS,OAAG,CACC;gBAChB,oBAAC,aAAa;oBACZ,oBAAC,SAAS,OAAG,CACC;gBAChB,oBAAC,aAAa;oBACZ,oBAAC,SAAS,OAAG,CACC;gBAChB,oBAAC,aAAa;oBACZ,oBAAC,SAAS,OAAG,CACC,CACD,CACF;QACjB,oBAAC,cAAc;YACb,oBAAC,WAAW,IACV,QAAQ,EAAE,EAAE,EACZ,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAE;oBACL,YAAY,EAAE,MAAM;iBACrB,GACD;YACF,oBAAC,WAAW,IACV,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAE;oBACL,YAAY,EAAE,MAAM;iBACrB,GACD;YACF,oBAAC,WAAW,IACV,QAAQ,EAAE,EAAE,EACZ,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAE;oBACL,YAAY,EAAE,MAAM;iBACrB,GACD;YACF,oBAAC,WAAW,IACV,QAAQ,EAAE,EAAE,EACZ,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAE,CAAC,EACR,KAAK,EAAE;oBACL,YAAY,EAAE,KAAK;iBACpB,GACD;YACF,oBAAC,WAAW,IACV,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAE;oBACL,SAAS,EAAE,MAAM;oBACjB,YAAY,EAAE,MAAM;iBACrB,GACD;YAEF,oBAAC,WAAW,IACV,QAAQ,EAAE,EAAE,EACZ,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAE;oBACL,SAAS,EAAE,MAAM;oBACjB,YAAY,EAAE,MAAM;iBACrB,GACD,CACa,CACP,CACb,CAAC;AACJ,CAAC"}

package/dist/src/components/ProductPage/QuantityContainer.js

@@ -0,0 +1,21 @@
+import { Component } from 'react';
+export default class QuantityContainer extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            qty: 1
+        };
+        this.setQuantity = qty => {
+            // Ensure negative numbers can't be added
+            const limitedQty = qty < 1 ? 1 : qty;
+            this.setState({ qty: limitedQty });
+        };
+    }
+    render() {
+        return this.props.children({
+            quantity: this.state.qty,
+            setQuantity: this.setQuantity
+        });
+    }
+}
+//# sourceMappingURL=QuantityContainer.js.map

package/dist/src/components/ProductPage/QuantityContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuantityContainer.js","sourceRoot":"","sources":["../../../../src/components/ProductPage/QuantityContainer.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,SAAS;IAAxD;;QACE,UAAK,GAAG;YACN,GAAG,EAAE,CAAC;SACP,CAAC;QAEF,gBAAW,GAAG,GAAG,CAAC,EAAE;YAClB,yCAAyC;YACzC,MAAM,UAAU,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;YACrC,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC;QACrC,CAAC,CAAC;IAQJ,CAAC;IANC,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;YACzB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG;YACxB,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAC,CAAC;IACL,CAAC;CACF"}

package/dist/src/components/ProductPage/RelatedProducts.js

@@ -0,0 +1,45 @@
+import t from '@jetshop/intl';
+import React from 'react';
+import { styled } from 'linaria/react';
+import { Container as BaseContainer } from './styledComponents';
+import { ProductGrid } from '../CategoryPage/ProductGrid';
+import { theme } from '../Theme';
+const Container = styled(BaseContainer) `
+  background: transparent;
+  /* padding: 0; */
+
+  h2 {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 0.75em;
+  }
+
+  .product-grid {
+    width: 100%;
+    .product-card {
+      width: 16.667%;
+    }
+    /* Let products overflow on smaller devices */
+    ${theme.below.md} {
+      overflow-x: auto;
+      display: flex;
+      flex-wrap: nowrap;
+      .product-card {
+        min-width: 34%;
+        margin: 0 0.5em;
+      }
+    }
+  }
+  .product-card {
+    font-size: 0.875em;
+  }
+`;
+const RelatedProducts = React.memo(({ relatedProducts, loading }) => {
+    if (!relatedProducts || relatedProducts.length === 0)
+        return null;
+    return (React.createElement(Container, null,
+        React.createElement("h2", null, t('Related products')),
+        React.createElement(ProductGrid, { listName: "related-products", products: relatedProducts, loading: loading, imageSizes: [1 / 3, 1 / 3, 1 / 6] })));
+});
+export { RelatedProducts };
+//# sourceMappingURL=RelatedProducts.js.map

package/dist/src/components/ProductPage/RelatedProducts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelatedProducts.js","sourceRoot":"","sources":["../../../../src/components/ProductPage/RelatedProducts.js"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;;;;;;;;;;;;;;;MAgBjC,KAAK,CAAC,KAAK,CAAC,EAAE;;;;;;;;;;;;;CAanB,CAAC;AAEF,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,eAAe,EAAE,OAAO,EAAE,EAAE,EAAE;IAClE,IAAI,CAAC,eAAe,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAElE,OAAO,CACL,oBAAC,SAAS;QACR,gCAAK,CAAC,CAAC,kBAAkB,CAAC,CAAM;QAChC,oBAAC,WAAW,IACV,QAAQ,EAAC,kBAAkB,EAC3B,QAAQ,EAAE,eAAe,EACzB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,GACjC,CACQ,CACb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,OAAO,EAAE,eAAe,EAAE,CAAC"}