@jetshop/template-trend 6.1.4 → 6.1.5

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { SizeSelector } from '@jetshop/ui/Select';
+import { styled } from 'linaria/react';
+const StyledSizePicker = styled(SizeSelector) `
+  margin-left: -1.25rem;
+  max-width: 20rem;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: 16px;
+  button {
+    border: none;
+    padding: 0;
+    line-height: 36px;
+    font-size: 16px;
+    outline: none;
+    border-radius: 50%;
+    height: 40px;
+    width: 40px;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0.5rem 1rem;
+    align-items: center;
+    justify-content: center;
+    ${({ active }) => active
+    ? `border: .75px solid black;`
+    : `border: .75px solid transparent;`};
+    :focus {
+      div {
+        border: 1px solid black;
+        border-radius: 50%;
+      }
+    }
+  }
+`;
+const SizePicker = props => React.createElement(StyledSizePicker, Object.assign({ maxButtons: 8 }, props));
+export default SizePicker;
+//# sourceMappingURL=SizePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SizePicker.js","sourceRoot":"","sources":["../../../../src/components/ProductPage/SizePicker.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;MAoBvC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CACf,MAAM;IACJ,CAAC,CAAC,4BAA4B;IAC9B,CAAC,CAAC,kCAAkC;;;;;;;;CAQ3C,CAAC;AAEF,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,CAAC,oBAAC,gBAAgB,kBAAC,UAAU,EAAE,CAAC,IAAM,KAAK,EAAI,CAAC;AAE3E,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,93 @@
+import { styled } from 'linaria/react';
+import React from 'react';
+import { useStockNotifications } from '@jetshop/core/hooks/Subscriptions/useStockNotifications';
+import { useIntl } from '@jetshop/intl';
+import { theme } from '../../Theme';
+import UIButton from '../../ui/Button';
+const Button = styled(UIButton) `
+  background: ${theme.colors.black};
+  width: 100%;
+  margin-bottom: 20px;
+`;
+const Error = styled('p') `
+  color: #eb5757;
+  font-size: 0.875rem;
+  position: absolute;
+  top: 50px;
+`;
+const Form = styled.form `
+  display: flex;
+  border: 1px solid #bfbdbd;
+  padding: 0 0.5rem;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  opacity: 1;
+
+  &:disabled {
+    opacity: 0.5;
+  }
+
+  input {
+    flex: 1 1 auto;
+  }
+
+  input,
+  button {
+    height: 3rem;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    font-size: 1rem;
+    border: 0;
+    padding: 0 0.25rem;
+    :focus {
+      outline: none;
+    }
+  }
+
+  button {
+    justify-content: center;
+  }
+`;
+const Wrapper = styled('div') `
+  position: relative;
+  width: 100%;
+
+  [data-visible='false'] {
+    transform: scaleY(0);
+  }
+  [data-visible='true'] {
+    transform: scaleY(1);
+  }
+
+  [data-visible='true'],
+  [data-visible='false'] {
+    transition: transform 0.1s linear;
+  }
+`;
+const Completed = styled.div `
+  position: absolute;
+  top: 0;
+  font-weight: 600;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+`;
+function NotifyWhenBack({ articleNumber }) {
+    const { toggle, submit, inputProps, active, inactive, submitting, submitted, failed } = useStockNotifications({ articleNumber });
+    const t = useIntl();
+    const disabled = inputProps.value.length === 0 || submitting;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Wrapper, null,
+            React.createElement("div", { className: "toggle-button", "data-visible": inactive },
+                React.createElement(Button, { onClick: toggle, "data-testid": "notify-when-back-button" }, t('Notify me when back in stock'))),
+            failed && (React.createElement(Error, null, t('Something went wrong. Please check your email and try again.'))),
+            React.createElement(Form, { onSubmit: submit, "data-visible": active || failed, disabled: disabled },
+                React.createElement("input", Object.assign({ type: "email", id: "stock-notifications", "data-testid": "notify-when-back-input", "aria-label": t('E-mail address'), placeholder: t('E-mail address'), required: true }, inputProps)),
+                React.createElement("button", { "data-testid": "notify-when-back-ok", disabled: disabled }, t('OK'))),
+            React.createElement(Completed, { "data-visible": submitted },
+                React.createElement("p", { "data-testid": "notify-when-back-success" }, t('You are now subscribed.'))))));
+}
+export default NotifyWhenBack;
+//# sourceMappingURL=NotifyWhenBack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotifyWhenBack.js","sourceRoot":"","sources":["../../../../../src/components/ProductPage/StockStatus/NotifyWhenBack.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yDAAyD,CAAC;AAChG,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AAEvC,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;gBACf,KAAK,CAAC,MAAM,CAAC,KAAK;;;CAGjC,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;CAKxB,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCvB,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;;;;;;;;;CAe5B,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO3B,CAAC;AAEF,SAAS,cAAc,CAAC,EAAE,aAAa,EAAE;IACvC,MAAM,EACJ,MAAM,EACN,MAAM,EACN,UAAU,EACV,MAAM,EACN,QAAQ,EACR,UAAU,EACV,SAAS,EACT,MAAM,EACP,GAAG,qBAAqB,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC;IAE7C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,UAAU,CAAC;IAE7D,OAAO,CACL;QACE,oBAAC,OAAO;YACN,6BAAK,SAAS,EAAC,eAAe,kBAAe,QAAQ;gBACnD,oBAAC,MAAM,IAAC,OAAO,EAAE,MAAM,iBAAc,yBAAyB,IAC3D,CAAC,CAAC,8BAA8B,CAAC,CAC3B,CACL;YACL,MAAM,IAAI,CACT,oBAAC,KAAK,QACH,CAAC,CAAC,8DAA8D,CAAC,CAC5D,CACT;YACD,oBAAC,IAAI,IACH,QAAQ,EAAE,MAAM,kBACF,MAAM,IAAI,MAAM,EAC9B,QAAQ,EAAE,QAAQ;gBAElB,6CACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,qBAAqB,iBACZ,wBAAwB,gBACxB,CAAC,CAAC,gBAAgB,CAAC,EAC/B,WAAW,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAChC,QAAQ,UACJ,UAAU,EACd;gBACF,+CAAoB,qBAAqB,EAAC,QAAQ,EAAE,QAAQ,IACzD,CAAC,CAAC,IAAI,CAAC,CACD,CACJ;YACP,oBAAC,SAAS,oBAAe,SAAS;gBAChC,0CAAe,0BAA0B,IACtC,CAAC,CAAC,yBAAyB,CAAC,CAC3B,CACM,CACJ,CACT,CACJ,CAAC;AACJ,CAAC;AAED,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,31 @@
+import { styled } from 'linaria/react';
+const stockColors = {
+    inStock: '#27AE60',
+    outOfStock: '#EB5757',
+    notifyWhenBack: '#F2C94C'
+};
+const StockOrb = styled('span') `
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  border-radius: 50%;
+  transition: all 0.2s linear;
+  background-color: ${({ status }) => stockColors[status]};
+  margin-right: 0.5rem;
+  border: 1px solid transparent;
+  &.inStock {
+    background-color: ${stockColors['inStock']};
+  }
+  &.outOfStock {
+    background-color: ${stockColors['outOfStock']};
+  }
+  &.notifyWhenBack {
+    background-color: ${stockColors['notifyWhenBack']};
+  }
+  &.missingVariant {
+    background-color: transparent;
+    border-color: ${stockColors['outOfStock']};
+  }
+`;
+export default StockOrb;
+//# sourceMappingURL=StockOrb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StockOrb.js","sourceRoot":"","sources":["../../../../../src/components/ProductPage/StockStatus/StockOrb.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,SAAS;IACrB,cAAc,EAAE,SAAS;CAC1B,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;;sBAMT,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC;;;;wBAIjC,WAAW,CAAC,SAAS,CAAC;;;wBAGtB,WAAW,CAAC,YAAY,CAAC;;;wBAGzB,WAAW,CAAC,gBAAgB,CAAC;;;;oBAIjC,WAAW,CAAC,YAAY,CAAC;;CAE5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,33 @@
+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 PropTypes from 'prop-types';
+import React from 'react';
+import StockOrb from './StockOrb';
+import { styled } from 'linaria/react';
+const StockStatusWrapper = styled('p') `
+  margin-top: 16px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+`;
+const StockStatusIndicator = (_a) => {
+    var { status, text } = _a, props = __rest(_a, ["status", "text"]);
+    return (React.createElement(StockStatusWrapper, Object.assign({}, props),
+        React.createElement(StockOrb, { status: status }),
+        React.createElement("span", null, text)));
+};
+StockStatusIndicator.propTypes = {
+    status: PropTypes.oneOf(['inStock', 'outOfStock', 'notifyWhenBack']),
+    text: PropTypes.string
+};
+export default StockStatusIndicator;
+//# sourceMappingURL=StockStatusIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StockStatusIndicator.js","sourceRoot":"","sources":["../../../../../src/components/ProductPage/StockStatus/StockStatusIndicator.js"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;CAKrC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,EAA0B,EAAE,EAAE;QAA9B,EAAE,MAAM,EAAE,IAAI,OAAY,EAAP,KAAK,cAAxB,kBAA0B,CAAF;IACpD,OAAO,CACL,oBAAC,kBAAkB,oBAAK,KAAK;QAC3B,oBAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,GAAI;QAC5B,kCAAO,IAAI,CAAQ,CACA,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,SAAS,GAAG;IAC/B,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,SAAS,EAAE,YAAY,EAAE,gBAAgB,CAAC,CAAC;IACpE,IAAI,EAAE,SAAS,CAAC,MAAM;CACvB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -0,0 +1,255 @@
+import React, { useState } from 'react';
+import { styled } from 'linaria/react';
+import { cx } from 'linaria';
+import t from '@jetshop/intl';
+import { ReactComponent as StoreIcon } from '../../../svg/Store.svg';
+import { ReactComponent as Caret } from '../../../svg/Caret.svg';
+import StockOrb from './StockOrb';
+import { theme } from '../../Theme';
+const WarehouseStockWrapper = styled('div') `
+  display: block;
+  width: 100%;
+  padding: 1em 0px;
+  background: ${theme.colors.white};
+  border-radius: 4px;
+  margin: 16px 0;
+  .wrapper {
+    position: relative;
+  }
+
+  .stock-status-header {
+    margin: 0px 1em;
+    display: inline-flex;
+    align-items: center;
+    margin-bottom: 0.25em;
+
+    .header-title {
+      padding-top: 3px;
+      font-size: 1rem;
+      letter-spacing: 0.05em;
+      color: ${theme.colors.darkgrey};
+    }
+
+    .store-icon {
+      margin-right: 12px;
+      width: 20px;
+    }
+  }
+
+  .stock-status-info {
+    margin-top: 0.25em;
+    margin-left: 1em;
+    margin-right: 1em;
+    font-size: 0.875rem;
+    line-height: 1.8;
+    color: ${theme.colors.darkerGrey};
+  }
+
+  ul.warehouse-list {
+    display: block;
+    padding-bottom: 45px;
+    overflow: hidden;
+    margin-left: 1em;
+    margin-right: 1em;
+    margin-top: 0.8rem;
+
+    & > li + li {
+      margin-top: 0.625rem;
+    }
+  }
+
+  .warehouse-list-item {
+    display: flex;
+    align-items: center;
+    height: auto;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.4;
+    color: ${theme.colors.darkgrey};
+
+    .warehouse-name {
+      flex-basis: 55%;
+    }
+
+    .warehouse-stock {
+      flex-basis: 35%;
+      flex-grow: 1;
+      display: inline-flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-wrap: nowrap;
+      white-space: nowrap;
+
+      .variant-size {
+        margin-right: 0.5rem;
+      }
+      .stock-status-text {
+        margin-left: 0.875em;
+        font-weight: 400;
+        letter-spacing: 0.01em;
+      }
+    }
+
+    ${theme.below.md} {
+      flex-direction: column;
+      padding-bottom: 0.6em;
+      margin-bottom: 0.6em;
+
+      .warehouse-name {
+        width: 100%;
+      }
+
+      .warehouse-stock {
+        width: 100%;
+      }
+    }
+  }
+
+  .toggle-list {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 2.2rem;
+    padding-top: 0.65rem;
+    border: 0;
+    outline: 0;
+    font-size: 0.938em;
+    text-align: center;
+    letter-spacing: 0.05em;
+    color: ${theme.colors.grey};
+    background: ${theme.colors.white};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    :hover {
+      color: ${theme.colors.black};
+    }
+
+    :hover svg path {
+      stroke: ${theme.colors.black};
+    }
+
+    svg {
+      margin-left: 0.65em;
+      width: 12px;
+      transition: transform 0.3s ease;
+      path {
+        stroke: ${theme.colors.grey};
+      }
+    }
+  }
+
+  .toggle-expanded {
+    color: ${theme.colors.black};
+
+    svg {
+      transform: rotate(180deg);
+      path {
+        stroke: ${theme.colors.black};
+      }
+    }
+  }
+`;
+const Overlay = styled('div') `
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    180deg,
+    rgba(248, 247, 243, 0) 0%,
+    rgb(248, 248, 248) 100%
+  );
+  transition: opacity 200ms ease;
+  opacity: 1;
+  pointer-events: none;
+  &.open {
+    opacity: 0;
+  }
+`;
+const WarehouseStock = ({ product, variantHandler }) => {
+    var _a;
+    if (!product.hasVariants) {
+        return product.warehouseStock ? (React.createElement(WarehouseStockItem, { item: product, validation: true })) : null;
+    }
+    const hasWarehouseStock = (_a = product === null || product === void 0 ? void 0 : product.variants) === null || _a === void 0 ? void 0 : _a.values.some(value => value.warehouseStock.length > 0);
+    if (!hasWarehouseStock)
+        return null;
+    const { selectedVariant: selectedVariation, getMissingOptions, validation } = variantHandler;
+    const missingOptions = !selectedVariation
+        ? getMissingOptions()
+            .map(option => option.name)
+            .join(', ')
+        : '';
+    return (React.createElement(WarehouseStockItem, { item: selectedVariation, missingOptions: missingOptions, validation: validation }));
+};
+const WarehouseStockItem = ({ item, missingOptions, validation }) => {
+    return (React.createElement(WarehouseStockWrapper, { className: "warehouse-stock-wrapper" },
+        React.createElement("p", { className: "stock-status-header" },
+            React.createElement("span", { className: "store-icon" },
+                React.createElement(StoreIcon, null)),
+            React.createElement("span", { className: "header-title" }, t('Find product in store'))),
+        React.createElement(WarehouseValidation, { validation: validation, missingOptions: missingOptions, item: item })));
+};
+function WarehouseValidation({ validation, missingOptions, item }) {
+    var _a;
+    const initialItemsToShow = 3;
+    const [itemsToShow, setItemsToShow] = useState(initialItemsToShow);
+    const expanded = itemsToShow !== initialItemsToShow;
+    const showExpand = initialItemsToShow < (item === null || item === void 0 ? void 0 : item.warehouseStock.length);
+    function toggleList() {
+        if (expanded) {
+            setItemsToShow(initialItemsToShow);
+        }
+        else {
+            setItemsToShow(item.warehouseStock.length);
+        }
+    }
+    // Handle article number for products with multiple variants
+    const productVariant = (_a = item === null || item === void 0 ? void 0 : item.values) === null || _a === void 0 ? void 0 : _a.join('-');
+    if (validation === 'incomplete') {
+        return (React.createElement("p", { className: "stock-status-info" }, t('Select {missingOptions} to see store status in store', {
+            missingOptions: missingOptions
+        })));
+    }
+    else if (item.warehouseStock.length > 0) {
+        return (React.createElement("div", { className: "wrapper" },
+            React.createElement("ul", { className: "warehouse-list" }, item.warehouseStock.slice(0, itemsToShow).map(warehouse => {
+                var _a;
+                return (React.createElement(WarehouseStockItemContent, { warehouse: warehouse, productVariant: productVariant, key: (_a = warehouse.location) === null || _a === void 0 ? void 0 : _a.id }));
+            })),
+            showExpand && React.createElement(Overlay, { className: expanded ? 'open' : '' }),
+            showExpand && (React.createElement("button", { className: cx('toggle-list', expanded && 'toggle-expanded'), onClick: toggleList },
+                expanded ? t('Show fewer stores') : t('View all stores'),
+                React.createElement(Caret, null))),
+            ' '));
+    }
+    else if (validation === 'outOfStock') {
+        return (React.createElement("p", { className: "stock-status-info" }, t('This product is out of stock.')));
+    }
+    else {
+        return null;
+    }
+}
+const WarehouseStockItemContent = ({ warehouse, productVariant }) => {
+    var _a;
+    let itemStockStatus, stockStatusText;
+    if (warehouse.stockLevel >= 1) {
+        stockStatusText = t('In Stock');
+        itemStockStatus = 'inStock';
+    }
+    if (warehouse.stockLevel === 0) {
+        stockStatusText = t('Out of Stock');
+        itemStockStatus = 'outOfStock';
+    }
+    return (React.createElement("li", { className: "warehouse-list-item" },
+        React.createElement("div", { className: "warehouse-name" },
+            React.createElement("span", null, (_a = warehouse.location) === null || _a === void 0 ? void 0 : _a.name)),
+        React.createElement("div", { className: "warehouse-stock" },
+            productVariant && (React.createElement("span", { className: "variant-size" }, productVariant)),
+            React.createElement(StockOrb, { status: itemStockStatus }),
+            React.createElement("span", { className: "stock-status-text" }, stockStatusText))));
+};
+export default WarehouseStock;
+//# sourceMappingURL=WarehouseStock.js.map

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

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

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

@@ -0,0 +1,138 @@
+import { useIntl } from '@jetshop/intl';
+import { DropdownMenu, DropdownMenuButton, DropdownMenuItem, DropdownMenuItems } from '@jetshop/ui/DropdownMenu';
+import React from 'react';
+import { css, cx } from 'linaria';
+import { ReactComponent as Caret } from '../../svg/Caret.svg';
+import { ReactComponent as Check } from '../../svg/Check.svg';
+import ButtonWithLoading from '../ui/Button';
+import StockOrb from './StockStatus/StockOrb';
+export function VariantSelector({ product, variantHandler, showValidation, disableOutOfStock }) {
+    return (React.createElement("div", { className: sharedStyles }, product.variants.options.map((option, index) => {
+        var _a;
+        let showValidationMessage = false;
+        if (showValidation &&
+            ((_a = variantHandler.getMissingOptions()) === null || _a === void 0 ? void 0 : _a.includes(option))) {
+            showValidationMessage = true;
+        }
+        if (option.values.length < 4) {
+            return (React.createElement(ButtonSelect, { option: option, variantHandler: variantHandler, key: option.name, showValidationMessage: showValidationMessage, disableOutOfStock: disableOutOfStock, doNotDisable: index === 0 }));
+        }
+        return (React.createElement(DropdownVariantSelect, { key: option.name, option: option, variantHandler: variantHandler, showValidationMessage: showValidationMessage, doNotDisable: index === 0 }));
+    })));
+}
+const sharedStyles = css `
+  label {
+    display: flex;
+    padding-bottom: 0.25em;
+    margin-top: 1em;
+    font-size: 0.875em;
+    align-items: center;
+  }
+  .invalid {
+    label {
+      color: #eb5757;
+    }
+  }
+  .missingVariant {
+    margin-right: 0.25em;
+    height: 10px;
+    width: 10px;
+  }
+`;
+function ButtonSelect({ option, variantHandler, showValidationMessage, disableOutOfStock, doNotDisable }) {
+    const { getSelectedValue, validateSelection, selectValue } = variantHandler;
+    const selectedValue = getSelectedValue(option);
+    const t = useIntl();
+    return (React.createElement("div", { className: cx(buttonSelectStyles, showValidationMessage && 'invalid') },
+        React.createElement("label", null,
+            showValidationMessage && React.createElement(StockOrb, { className: "missingVariant" }),
+            t('Select {optionName}', { optionName: option.name })),
+        option.values.map(value => {
+            const validation = validateSelection(value, option);
+            return (React.createElement(ButtonWithLoading, { "data-testid": option.name + value, key: option.name + value, onClick: () => selectValue(value, option), disabled: !doNotDisable &&
+                    (validation === 'invalid' ||
+                        (disableOutOfStock && validation === 'outOfStock')), secondary: value !== selectedValue, "aria-pressed": value === selectedValue }, value));
+        })));
+}
+const buttonSelectStyles = css `
+  margin: 1em 0;
+  button {
+    width: auto;
+    border: 1px solid #dedede !important;
+    + button {
+      margin-left: 0.5em;
+    }
+  }
+  &.invalid button {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+`;
+function DropdownVariantSelect({ option, variantHandler, showValidationMessage, doNotDisable }) {
+    const { getSelectedValue, validateSelection, selectValue } = variantHandler;
+    const t = useIntl();
+    const selectedValue = getSelectedValue(option);
+    return (React.createElement("div", { className: cx(dropdownStyles, showValidationMessage && 'invalid') },
+        React.createElement("label", { htmlFor: `option-${option.name}` },
+            showValidationMessage && React.createElement(StockOrb, { className: "missingVariant" }),
+            option.name),
+        React.createElement(DropdownMenu, null,
+            React.createElement(DropdownMenuButton, { id: `option-${option.name}` },
+                selectedValue
+                    ? selectedValue
+                    : t.rich('Select {option}', { option: option.name }),
+                React.createElement(Caret, null)),
+            React.createElement(DropdownMenuItems, { style: { zIndex: 9999 } }, option.values.map(value => {
+                const validation = validateSelection(value, option);
+                return (React.createElement(DropdownMenuItem, { "data-testid": value + option.name, key: value + option.name, disabled: !doNotDisable && validation === 'invalid', onSelect: ({ setIsOpen }) => {
+                        selectValue(value, option);
+                        setIsOpen(false);
+                    }, style: { opacity: validation === 'invalid' ? 0.5 : 1 } },
+                    value,
+                    selectedValue === value && React.createElement(Check, null)));
+            })))));
+}
+export const dropdownStyles = css `
+  // && wrapping needed to avoid non-deterministic styling
+  && {
+    margin: 1em 0;
+    [data-flight-dropdown] {
+      background: white;
+    }
+    [data-flight-dropdown-button] {
+      background: white;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      border: 1px solid #dedede;
+    }
+    [data-flight-dropdown-open='true'] {
+      [data-flight-dropdown-button] {
+        border-bottom-color: transparent;
+        border-radius: 3px 3px 0 0;
+      }
+    }
+    [data-flight-dropdown-items] {
+      width: 100%;
+      border: 1px solid #dedede;
+      margin-top: -1px;
+      border-radius: 0 0 3px 3px;
+    }
+    [data-flight-dropdown-item] {
+      display: flex;
+      align-items: center;
+      label {
+        width: 100%;
+      }
+      :last-child {
+        border-radius: 0 0 3px 3px;
+      }
+    }
+    &.invalid [data-flight-dropdown-button] {
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+    svg {
+      margin-left: auto;
+    }
+  }
+`;
+//# sourceMappingURL=VariantSelector.js.map

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

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

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

@@ -0,0 +1,11 @@
+import { styled } from 'linaria/react';
+import MaxWidth from '../Layout/MaxWidth';
+const Container = styled(MaxWidth) `
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+export { Container };
+//# sourceMappingURL=styledComponents.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styledComponents.js","sourceRoot":"","sources":["../../../../src/components/ProductPage/styledComponents.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,QAAQ,MAAM,oBAAoB,CAAC;AAE1C,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;;;;;;CAMjC,CAAC;AACF,OAAO,EAAE,SAAS,EAAE,CAAC"}

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

@@ -0,0 +1,24 @@
+import { useIntl } from '@jetshop/intl';
+import { useReducer } from 'react';
+export function useProductValidationMessage({ missingOptions, variantValidation, hasVariants, stockStatus }) {
+    const t = useIntl();
+    // Track submits, so we can enable after the first one
+    const [submitCount, enableValidation] = useReducer(count => count + 1, 0);
+    let validationMessage = null;
+    if (submitCount > 0) {
+        if ((missingOptions === null || missingOptions === void 0 ? void 0 : missingOptions.length) > 0) {
+            validationMessage = t(`Select { option }`, {
+                option: missingOptions[0].name
+            });
+        }
+    }
+    if ((!validationMessage && variantValidation === 'outOfStock') ||
+        (!hasVariants && stockStatus.status === 'outOfStock')) {
+        validationMessage = t('Out of stock');
+    }
+    return {
+        enableValidation,
+        validationMessage
+    };
+}
+//# sourceMappingURL=useProductValidationMessage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useProductValidationMessage.js","sourceRoot":"","sources":["../../../../src/components/ProductPage/useProductValidationMessage.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,MAAM,UAAU,2BAA2B,CAAC,EAC1C,cAAc,EACd,iBAAiB,EACjB,WAAW,EACX,WAAW,EACZ;IACC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,sDAAsD;IACtD,MAAM,CAAC,WAAW,EAAE,gBAAgB,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IAE1E,IAAI,iBAAiB,GAAG,IAAI,CAAC;IAE7B,IAAI,WAAW,GAAG,CAAC,EAAE;QACnB,IAAI,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,IAAG,CAAC,EAAE;YAC9B,iBAAiB,GAAG,CAAC,CAAC,mBAAmB,EAAE;gBACzC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI;aAC/B,CAAC,CAAC;SACJ;KACF;IAED,IACE,CAAC,CAAC,iBAAiB,IAAI,iBAAiB,KAAK,YAAY,CAAC;QAC1D,CAAC,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,YAAY,CAAC,EACrD;QACA,iBAAiB,GAAG,CAAC,CAAC,cAAc,CAAC,CAAC;KACvC;IAED,OAAO;QACL,gBAAgB;QAChB,iBAAiB;KAClB,CAAC;AACJ,CAAC"}