@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.8

package/checkout/selectors/order.js

@@ -1,59 +1,188 @@
-import{createSelector}from'reselect';import{isUserLoggedIn}from'@shopgate/pwa-common/selectors/user';import{DIRECT_SHIP,ROPIS,BOPIS}from'@shopgate/engage/locations';import{convertLineItemsToCartItems,getCheckoutTaxLinesFromOrder,isReserveOnlyOrder}from"../helpers";/**
+import { createSelector } from 'reselect';
+import { isUserLoggedIn } from '@shopgate/pwa-common/selectors/user';
+import { DIRECT_SHIP, ROPIS, BOPIS } from '@shopgate/engage/locations';
+import { convertLineItemsToCartItems, getCheckoutTaxLinesFromOrder, isReserveOnlyOrder } from "../helpers";
+
+/**
  * Returns the current order created in the checkout process.
  * @param {Object} state The application state.
  * @returns {Object}
- */export var getCheckoutOrder=function getCheckoutOrder(state){return state.checkout.checkoutOrder.data||null;};/**
+ */
+export const getCheckoutOrder = state => state.checkout.checkoutOrder.data || null;
+
+/**
  * Returns the checkout totals
  * @param {Object} state The application state.
  * @return {number}
- */export var getCheckoutOrderTotal=function getCheckoutOrderTotal(state){var _getCheckoutOrder;return(_getCheckoutOrder=getCheckoutOrder(state))===null||_getCheckoutOrder===void 0?void 0:_getCheckoutOrder.total;};/**
+ */
+export const getCheckoutOrderTotal = state => getCheckoutOrder(state)?.total;
+
+/**
  * Returns the current attached customer of the active order.
  * @param {Object} state The application state.
  * @returns {Object}
- */export var getCheckoutOrderCustomer=function getCheckoutOrderCustomer(state){var _state$checkout$check,_state$checkout$check2;return((_state$checkout$check=state.checkout.checkoutOrder)===null||_state$checkout$check===void 0?void 0:(_state$checkout$check2=_state$checkout$check.data)===null||_state$checkout$check2===void 0?void 0:_state$checkout$check2.customer)||null;};/**
+ */
+export const getCheckoutOrderCustomer = state => state.checkout.checkoutOrder?.data?.customer || null;
+
+/**
  * Returns the current orders payment transaction created in the checkout process.
  * @param {Object} state The application state.
  * @returns {Object}
- */export var getCheckoutPaymentTransactions=function getCheckoutPaymentTransactions(state){var _getCheckoutOrder2;return((_getCheckoutOrder2=getCheckoutOrder(state))===null||_getCheckoutOrder2===void 0?void 0:_getCheckoutOrder2.paymentTransactions)||[];};export var getCheckoutFulfillmentSlot=createSelector(getCheckoutOrder,function(order){var _order$lineItems,_order$lineItems$;return(order===null||order===void 0?void 0:(_order$lineItems=order.lineItems)===null||_order$lineItems===void 0?void 0:(_order$lineItems$=_order$lineItems[0])===null||_order$lineItems$===void 0?void 0:_order$lineItems$.fulfillmentSlot)||null;});/**
+ */
+export const getCheckoutPaymentTransactions = state => getCheckoutOrder(state)?.paymentTransactions || [];
+export const getCheckoutFulfillmentSlot = createSelector(getCheckoutOrder, order => order?.lineItems?.[0]?.fulfillmentSlot || null);
+
+/**
  * Returns the billing address of the order.
  * @param {Object} state The application state.
  * @returns {Object}
- */export var getCheckoutBillingAddress=createSelector(getCheckoutOrder,function(order){if(!order)return null;var addresses=order.addressSequences||[];return addresses.find(function(_ref){var type=_ref.type;return type==='billing';});});/**
+ */
+export const getCheckoutBillingAddress = createSelector(getCheckoutOrder, order => {
+  if (!order) return null;
+  const addresses = order.addressSequences || [];
+  return addresses.find(({
+    type
+  }) => type === 'billing');
+});
+
+/**
  * Returns the shipping address of the order.
  * @param {Object} state The application state.
  * @returns {Object}
- */export var getCheckoutShippingAddress=createSelector(getCheckoutOrder,function(order){if(!order)return null;var addresses=order.addressSequences||[];return addresses.find(function(_ref2){var type=_ref2.type;return type==='shipping';});});/**
+ */
+export const getCheckoutShippingAddress = createSelector(getCheckoutOrder, order => {
+  if (!order) return null;
+  const addresses = order.addressSequences || [];
+  return addresses.find(({
+    type
+  }) => type === 'shipping');
+});
+
+/**
  * Returns the pickup address of the order.
  * @param {Object} state The application state.
  * @returns {Object}
- */export var getCheckoutPickupAddress=createSelector(getCheckoutOrder,function(order){if(!order)return null;var addresses=order.addressSequences||[];return addresses.find(function(_ref3){var type=_ref3.type;return type==='pickup';});});/**
+ */
+export const getCheckoutPickupAddress = createSelector(getCheckoutOrder, order => {
+  if (!order) return null;
+  const addresses = order.addressSequences || [];
+  return addresses.find(({
+    type
+  }) => type === 'pickup');
+});
+
+/**
  * Returns whether the billing and pickup address are the same.
  * @param {Object} state The application state.
  * @returns {Object}
- */export var isPickupAndBillingEquals=createSelector(getCheckoutBillingAddress,getCheckoutPickupAddress,function(billing,pickup){if(!billing||!pickup)return true;if(billing.mobile!==pickup.mobile)return false;if(billing.emailAddress!==pickup.emailAddress)return false;if(billing.firstName!==pickup.firstName)return false;if(billing.lastName!==pickup.lastName)return false;return true;});/**
+ */
+export const isPickupAndBillingEquals = createSelector(getCheckoutBillingAddress, getCheckoutPickupAddress, (billing, pickup) => {
+  if (!billing || !pickup) return true;
+  if (billing.mobile !== pickup.mobile) return false;
+  if (billing.emailAddress !== pickup.emailAddress) return false;
+  if (billing.firstName !== pickup.firstName) return false;
+  if (billing.lastName !== pickup.lastName) return false;
+  return true;
+});
+
+/**
  * Returns whether the billing and shipping address are the same.
  * @param {Object} state The application state.
  * @returns {Object}
- */export var isShippingBillingEquals=createSelector(getCheckoutBillingAddress,getCheckoutShippingAddress,function(billing,shipping){if(!billing||!shipping)return true;var positiveList=['index','type','customerContactId'];return Object.keys(billing).every(function(key){if(positiveList.includes(key))return true;return billing[key]===shipping[key];});});/**
+ */
+export const isShippingBillingEquals = createSelector(getCheckoutBillingAddress, getCheckoutShippingAddress, (billing, shipping) => {
+  if (!billing || !shipping) return true;
+  const positiveList = ['index', 'type', 'customerContactId'];
+  return Object.keys(billing).every(key => {
+    if (positiveList.includes(key)) return true;
+    return billing[key] === shipping[key];
+  });
+});
+
+/**
  * Returns the number of the order.
  * @param {Object} state The application state.
  * @returns {Object}
- */export var getCheckoutOrderNumber=createSelector(getCheckoutOrder,function(order){if(!order){return null;}return order.orderNumber;});/**
+ */
+export const getCheckoutOrderNumber = createSelector(getCheckoutOrder, order => {
+  if (!order) {
+    return null;
+  }
+  return order.orderNumber;
+});
+
+/**
  * Returns the line items of the order.
  * @param {Object} state The application state.
  * @returns {Object}
- */export var getCheckoutOrderLineItems=createSelector(getCheckoutOrder,function(order){if(!order){return null;}return order.lineItems;});/**
+ */
+export const getCheckoutOrderLineItems = createSelector(getCheckoutOrder, order => {
+  if (!order) {
+    return null;
+  }
+  return order.lineItems;
+});
+
+/**
  * Returns the line items of the order converted to the data structure of cart items
  * @param {Object} state The application state.
  * @returns {Object}
- */export var getCheckoutOrderLineItemsAsCartItems=createSelector(getCheckoutOrderLineItems,function(lineItems){if(!lineItems){return null;}return convertLineItemsToCartItems(lineItems);});/**
+ */
+export const getCheckoutOrderLineItemsAsCartItems = createSelector(getCheckoutOrderLineItems, lineItems => {
+  if (!lineItems) {
+    return null;
+  }
+  return convertLineItemsToCartItems(lineItems);
+});
+
+/**
  * Returns whether the active order is a pure reservation.
- */export var getIsReserveOnly=createSelector(getCheckoutOrder,function(order){if(!order)return null;return isReserveOnlyOrder(order);});/**
+ */
+export const getIsReserveOnly = createSelector(getCheckoutOrder, order => {
+  if (!order) return null;
+  return isReserveOnlyOrder(order);
+});
+
+/**
  * Returns whether the current order just consists out of directShip items
- */export var getIsDirectShipOnly=createSelector(getCheckoutOrderLineItems,function(lineItems){if(!Array.isArray(lineItems)||lineItems.length===0){return false;}return lineItems.every(function(_ref4){var fulfillmentMethod=_ref4.fulfillmentMethod;return fulfillmentMethod===DIRECT_SHIP;});});export var getHasDirectShipItems=createSelector(getCheckoutOrderLineItems,function(lineItems){if(!Array.isArray(lineItems)||lineItems.length===0){return false;}return lineItems.some(function(_ref5){var fulfillmentMethod=_ref5.fulfillmentMethod;return fulfillmentMethod===DIRECT_SHIP;});});export var getHasROPEItems=createSelector(getCheckoutOrderLineItems,function(lineItems){if(!Array.isArray(lineItems)||lineItems.length===0){return false;}return lineItems.some(function(_ref6){var fulfillmentMethod=_ref6.fulfillmentMethod;return[ROPIS,BOPIS].includes(fulfillmentMethod);});});/**
+ */
+export const getIsDirectShipOnly = createSelector(getCheckoutOrderLineItems, lineItems => {
+  if (!Array.isArray(lineItems) || lineItems.length === 0) {
+    return false;
+  }
+  return lineItems.every(({
+    fulfillmentMethod
+  }) => fulfillmentMethod === DIRECT_SHIP);
+});
+export const getHasDirectShipItems = createSelector(getCheckoutOrderLineItems, lineItems => {
+  if (!Array.isArray(lineItems) || lineItems.length === 0) {
+    return false;
+  }
+  return lineItems.some(({
+    fulfillmentMethod
+  }) => fulfillmentMethod === DIRECT_SHIP);
+});
+export const getHasROPEItems = createSelector(getCheckoutOrderLineItems, lineItems => {
+  if (!Array.isArray(lineItems) || lineItems.length === 0) {
+    return false;
+  }
+  return lineItems.some(({
+    fulfillmentMethod
+  }) => [ROPIS, BOPIS].includes(fulfillmentMethod));
+});
+
+/**
  * Returns whether the shipping address selection is enabled
- */export var getIsShippingAddressSelectionEnabled=createSelector(getHasDirectShipItems,isUserLoggedIn,function(hasDirectShipItems){return hasDirectShipItems;});export var getIsPickupContactSelectionEnabled=getHasROPEItems;/**
+ */
+export const getIsShippingAddressSelectionEnabled = createSelector(getHasDirectShipItems, isUserLoggedIn, hasDirectShipItems => hasDirectShipItems);
+export const getIsPickupContactSelectionEnabled = getHasROPEItems;
+
+/**
  * Returns a list of tax lines for the order summary.
  * @param {Object} state The application state.
  * @returns {Object}
- */export var getCheckoutTaxLines=createSelector(getCheckoutOrder,function(order){if(!order)return[];return getCheckoutTaxLinesFromOrder(order);});
+ */
+export const getCheckoutTaxLines = createSelector(getCheckoutOrder, order => {
+  if (!order) return [];
+  return getCheckoutTaxLinesFromOrder(order);
+});

package/checkout/selectors/payment.js

@@ -1,17 +1,35 @@
-import{createSelector}from'reselect';import{getIsReserveOnly}from"./order";/**
+import { createSelector } from 'reselect';
+import { getIsReserveOnly } from "./order";
+
+/**
  * Returns all available payment methods.
  * @param {Object} state The application state.
  * @returns {Array}
- */export var getPaymentMethods=function getPaymentMethods(state){return state.checkout.paymentMethods.data;};/**
+ */
+export const getPaymentMethods = state => state.checkout.paymentMethods.data;
+
+/**
  * Creates a selector that will return the first payment method found that
  * implements the given by provider code.
  * @param {Object} getProviderCode Function to select provider code.
  * @returns {Object}
- */export var makeGetPaymentMethodByProviderCode=function makeGetPaymentMethodByProviderCode(getProviderCode){return createSelector(getPaymentMethods,getProviderCode,function(paymentMethods,providerCode){return paymentMethods.find(function(methods){var _methods$paymentProvi;return((_methods$paymentProvi=methods.paymentProvider)===null||_methods$paymentProvi===void 0?void 0:_methods$paymentProvi.code)===providerCode;});});};/**
+ */
+export const makeGetPaymentMethodByProviderCode = getProviderCode => createSelector(getPaymentMethods, getProviderCode, (paymentMethods, providerCode) => paymentMethods.find(methods => methods.paymentProvider?.code === providerCode));
+
+/**
  * Selects the default payment method
  * @param {Object} state App state
  * @returns {Object}
- */export var getDefaultPaymentMethod=function getDefaultPaymentMethod(state){return getPaymentMethods(state)[0];};var getPaymentMethodForStripe=makeGetPaymentMethodByProviderCode(function(){return'stripe';});export var getStripePublishableKey=createSelector(getPaymentMethodForStripe,function(paymentMethod){var _paymentMethod$settin;if(!paymentMethod)return null;return(_paymentMethod$settin=paymentMethod.settings)===null||_paymentMethod$settin===void 0?void 0:_paymentMethod$settin.publishableKey;});/**
+ */
+export const getDefaultPaymentMethod = state => getPaymentMethods(state)[0];
+const getPaymentMethodForStripe = makeGetPaymentMethodByProviderCode(() => 'stripe');
+export const getStripePublishableKey = createSelector(getPaymentMethodForStripe, paymentMethod => {
+  if (!paymentMethod) return null;
+  return paymentMethod.settings?.publishableKey;
+});
+
+/**
  * @param {Object} state App state
  * @returns {boolean}
- */export var getNeedsPaymentForOrder=function getNeedsPaymentForOrder(state){return!getIsReserveOnly(state);};
+ */
+export const getNeedsPaymentForOrder = state => !getIsReserveOnly(state);

package/checkout/selectors/route.js

@@ -1,4 +1,15 @@
-import{createSelector}from'reselect';import pathMatch from'path-match';import{getCurrentPathname}from'@shopgate/pwa-common/selectors/router';import{checkoutRoutes}from'@shopgate/engage/checkout/constants';var matcher=pathMatch({sensitive:false,strict:false,end:true});/**
+import { createSelector } from 'reselect';
+import pathMatch from 'path-match';
+import { getCurrentPathname } from '@shopgate/pwa-common/selectors/router';
+import { checkoutRoutes } from '@shopgate/engage/checkout/constants';
+const matcher = pathMatch({
+  sensitive: false,
+  strict: false,
+  end: true
+});
+
+/**
  * Creates a selector that determines if a route belongs to the checkout process
  * @returns {Function}
- */export var makeIsCheckoutRoute=function makeIsCheckoutRoute(){return createSelector(getCurrentPathname,function(pathname){return checkoutRoutes.some(function(route){return matcher(route)(pathname);});});};
+ */
+export const makeIsCheckoutRoute = () => createSelector(getCurrentPathname, pathname => checkoutRoutes.some(route => matcher(route)(pathname)));

package/checkout/streams/index.js

@@ -1 +1,13 @@
-import{main$}from'@shopgate/pwa-common/streams';import{routeDidLeave$}from'@shopgate/engage/core';import{CHECKOUT_CONFIRMATION_PATTERN}from"../constants";import{SUBMIT_CHECKOUT_ORDER_SUCCESS,FETCH_CHECKOUT_ORDER_SUCCESS}from"../constants/actionTypes";export var checkoutConfirmationDidLeave$=routeDidLeave$.filter(function(_ref){var action=_ref.action;return action.route.pattern===CHECKOUT_CONFIRMATION_PATTERN;});export var checkoutOrderFetched$=main$.filter(function(_ref2){var action=_ref2.action;return action.type===FETCH_CHECKOUT_ORDER_SUCCESS;});export var checkoutSuccess$=main$.filter(function(_ref3){var action=_ref3.action;return action.type===SUBMIT_CHECKOUT_ORDER_SUCCESS;}).switchMap(function(){return checkoutOrderFetched$.first();});
+import { main$ } from '@shopgate/pwa-common/streams';
+import { routeDidLeave$ } from '@shopgate/engage/core';
+import { CHECKOUT_CONFIRMATION_PATTERN } from "../constants";
+import { SUBMIT_CHECKOUT_ORDER_SUCCESS, FETCH_CHECKOUT_ORDER_SUCCESS } from "../constants/actionTypes";
+export const checkoutConfirmationDidLeave$ = routeDidLeave$.filter(({
+  action
+}) => action.route.pattern === CHECKOUT_CONFIRMATION_PATTERN);
+export const checkoutOrderFetched$ = main$.filter(({
+  action
+}) => action.type === FETCH_CHECKOUT_ORDER_SUCCESS);
+export const checkoutSuccess$ = main$.filter(({
+  action
+}) => action.type === SUBMIT_CHECKOUT_ORDER_SUCCESS).switchMap(() => checkoutOrderFetched$.first());

package/checkout/subscriptions/index.js

@@ -1,3 +1,54 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import{main$}from'@shopgate/pwa-common/streams';import{OPEN_PUSH_NOTIFICATION}from'@shopgate/pwa-common/constants/ActionTypes';import{userDidLogout$}from'@shopgate/engage/user';import{addCheckoutCampaign}from"../action-creators";import{checkoutConfirmationDidLeave$}from"../streams";import{clearCheckoutOrder}from"../index";/**
+import { main$ } from '@shopgate/pwa-common/streams';
+import { OPEN_PUSH_NOTIFICATION } from '@shopgate/pwa-common/constants/ActionTypes';
+import { userDidLogout$ } from '@shopgate/engage/user';
+import { addCheckoutCampaign } from "../action-creators";
+import { checkoutConfirmationDidLeave$ } from "../streams";
+import { clearCheckoutOrder } from "../index";
+
+/**
  * @param {Function} subscribe Subscribes to an observable.
- */export default function checkout(subscribe){var pushOpened$=main$.filter(function(_ref){var action=_ref.action;return action.type===OPEN_PUSH_NOTIFICATION;});subscribe(checkoutConfirmationDidLeave$,function(_ref2){var dispatch=_ref2.dispatch;dispatch(clearCheckoutOrder());});subscribe(userDidLogout$,function(_ref3){var dispatch=_ref3.dispatch;dispatch(clearCheckoutOrder());});subscribe(pushOpened$,function(_ref4){var dispatch=_ref4.dispatch,action=_ref4.action;var originalNotificationId=action.notificationId;if(!originalNotificationId){return;}var segments=originalNotificationId.split(';');if(segments.length===1){return;}var _segments=_slicedToArray(segments,5),campaignCode=_segments[0],sentTime=_segments[1],notificationId=_segments[2],locale=_segments[3],distributionIndex=_segments[4];var data={channel:'push',sentTime:Number.parseInt(sentTime,10)||undefined,openedTime:Math.round(Date.now()/1000),distributionIndex:null,campaignCode:campaignCode,notificationId:notificationId,locale:locale};if(typeof distributionIndex==='string'){data.distributionIndex=parseInt(distributionIndex,10);}dispatch(addCheckoutCampaign(data));});}
+ */
+export default function checkout(subscribe) {
+  const pushOpened$ = main$.filter(({
+    action
+  }) => action.type === OPEN_PUSH_NOTIFICATION);
+  subscribe(checkoutConfirmationDidLeave$, ({
+    dispatch
+  }) => {
+    dispatch(clearCheckoutOrder());
+  });
+  subscribe(userDidLogout$, ({
+    dispatch
+  }) => {
+    dispatch(clearCheckoutOrder());
+  });
+  subscribe(pushOpened$, ({
+    dispatch,
+    action
+  }) => {
+    const {
+      notificationId: originalNotificationId
+    } = action;
+    if (!originalNotificationId) {
+      return;
+    }
+    const segments = originalNotificationId.split(';');
+    if (segments.length === 1) {
+      return;
+    }
+    const [campaignCode, sentTime, notificationId, locale, distributionIndex] = segments;
+    const data = {
+      channel: 'push',
+      sentTime: Number.parseInt(sentTime, 10) || undefined,
+      openedTime: Math.round(Date.now() / 1000),
+      distributionIndex: null,
+      campaignCode,
+      notificationId,
+      locale
+    };
+    if (typeof distributionIndex === 'string') {
+      data.distributionIndex = parseInt(distributionIndex, 10);
+    }
+    dispatch(addCheckoutCampaign(data));
+  });
+}

package/components/BrandingColorBanner/BrandingColorBanner.js

@@ -1,5 +1,23 @@
-import React from'react';import ResponsiveContainer from'@shopgate/engage/components/ResponsiveContainer';import{css}from'glamor';var brandingColorBanner=css({position:'fixed',backgroundColor:'var(--color-background-gutter-header, var(--color-primary))',left:0,right:0,height:288});/**
+import React from 'react';
+import ResponsiveContainer from '@shopgate/engage/components/ResponsiveContainer';
+import { css } from 'glamor';
+const brandingColorBanner = css({
+  position: 'fixed',
+  backgroundColor: 'var(--color-background-gutter-header, var(--color-primary))',
+  left: 0,
+  right: 0,
+  height: 288
+});
+
+/**
  * The Viewport component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var BrandingColorBanner=function BrandingColorBanner(){return React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},React.createElement("div",{className:brandingColorBanner}));};export default BrandingColorBanner;
+ */
+const BrandingColorBanner = () => /*#__PURE__*/React.createElement(ResponsiveContainer, {
+  breakpoint: ">xs",
+  webOnly: true
+}, /*#__PURE__*/React.createElement("div", {
+  className: brandingColorBanner
+}));
+export default BrandingColorBanner;

package/components/BrandingColorBanner/index.js

@@ -1 +1 @@
-export{default}from"./BrandingColorBanner";
+export { default } from "./BrandingColorBanner";

package/components/ChipLayout/index.js

@@ -1,16 +1,45 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import debounce from'lodash/debounce';import I18n from'@shopgate/pwa-common/components/I18n';import RippleButton from'@shopgate/pwa-ui-shared/RippleButton';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import styles from"./style";var variables=themeConfig.variables;/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import debounce from 'lodash/debounce';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import styles from "./style";
+const {
+  variables
+} = themeConfig;
+
+/**
  * The height of one row.
  * @type {number}
- */export var CHIP_ROW_HEIGHT=34;/**
+ */
+export const CHIP_ROW_HEIGHT = 34;
+
+/**
  * The minimum width that a chip should have.
  * @type {number}
- */export var CHIP_MINIMUM_WIDTH=60;/**
+ */
+export const CHIP_MINIMUM_WIDTH = 60;
+
+/**
  * The ChipLayout component.
- */var ChipLayout=/*#__PURE__*/function(_Component){function ChipLayout(){var _this2;_classCallCheck(this,ChipLayout);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,ChipLayout,[].concat(args));/**
-   * Debounced, eg. layout effect
-   */_defineProperty(_this2,"processHiddenElementsDebounced",debounce(_this2.processHiddenElements,50));return _this2;}_inherits(ChipLayout,_Component);return _createClass(ChipLayout,[{key:"componentDidMount",value:/**
+ */
+class ChipLayout extends Component {
+  constructor(...args) {
+    super(...args);
+    /**
+     * Debounced, eg. layout effect
+     */
+    this.processHiddenElementsDebounced = debounce(this.processHiddenElements, 50);
+  }
+  /**
    * When the component mounts we need to initially process all children.
-   */function componentDidMount(){this.processHiddenElementsDebounced();}/**
+   */
+  componentDidMount() {
+    this.processHiddenElementsDebounced();
+  }
+
+  /**
    * Eveyry time pathname or other prop changes this callback is called.
    * This funtion will start processing hidden elements in order to check if "more" button
    * should be rendered.
@@ -18,21 +47,124 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
    * It must be done on every prop change, including the pathname.
    * Sometimes this component is rendered invisible, then since `.processHiddenElements` uses
    * refs.clientHeight it would always be zero.
-   */},{key:"componentDidUpdate",value:function componentDidUpdate(){this.processHiddenElementsDebounced();}/**
+   */
+  componentDidUpdate() {
+    this.processHiddenElementsDebounced();
+  }
+
+  /**
    * Returns the maximum height the container should have.
    * @returns {number}
-   */},{key:"maxContentHeight",get:function get(){// 8 -> container padding.
-return CHIP_ROW_HEIGHT*this.props.maxRows+8;}/**
+   */
+  get maxContentHeight() {
+    // 8 -> container padding.
+    return CHIP_ROW_HEIGHT * this.props.maxRows + 8;
+  }
+
+  /**
    * Returns the more button styles.
    * @return {string} The store button class name.
-   */},{key:"moreButtonStyles",get:function get(){if(this.props.invertMoreButton){return styles.moreButtonInverted;}return styles.moreButton;}/**
+   */
+  get moreButtonStyles() {
+    if (this.props.invertMoreButton) {
+      return styles.moreButtonInverted;
+    }
+    return styles.moreButton;
+  }
+
+  /**
    * Loops through all children to make sure the more button appears if there is too much content.
-   */},{key:"processHiddenElements",value:function processHiddenElements(){var _this3=this;if(!this.containerRef){return;}// Find out if there are overflowing elements.
-var lastVisibleElement=0;var showMoreButton=this.containerRef.scrollHeight>this.containerRef.clientHeight;var containerHeight=this.containerRef.clientHeight;var chips=Array.from(this.layoutRef.children);this.moreButtonRef.style.display=showMoreButton?'block':'none';this.layoutRef.style.minHeight=showMoreButton?"".concat(this.maxContentHeight,"px"):'0px';// If the more button is not visible we don't need to process anything.
-if(!showMoreButton){return;}// Hide or show chips that are hidden due to overflow.
-chips.forEach(function(child,index){var isVisible=child.offsetTop+child.clientHeight<containerHeight;child.setAttribute('style',"display: ".concat(isVisible?'flex':'none',";"));if(isVisible){lastVisibleElement=index;}});// Hide the more button if previous assumption was incorrect.
-if(lastVisibleElement===chips.length-1){this.moreButtonRef.style.display='none';return;}// Hide elements so that the 'more button' has enough space.
-chips.slice(0,lastVisibleElement+1).reverse().every(function(element){var offsetBottom=element.offsetTop+element.clientHeight;if(_this3.moreButtonRef.offsetTop>offsetBottom){return true;}var buttonSpaceRequired=_this3.moreButtonRef.clientWidth+variables.gap.big;var elementRight=_this3.containerRef.clientWidth-(element.offsetLeft+element.clientWidth);var spaceDiff=buttonSpaceRequired-elementRight;var remainingChipWidth=element.clientWidth-spaceDiff;if(remainingChipWidth>CHIP_MINIMUM_WIDTH){element.setAttribute('style',"max-width: ".concat(remainingChipWidth,"px"));return false;}if(element.offsetTop!==chips[lastVisibleElement].offsetTop){element.setAttribute('style','display: none');return false;}element.setAttribute('style','display: none');return true;});}},{key:"render",value:/**
+   */
+  processHiddenElements() {
+    if (!this.containerRef) {
+      return;
+    }
+    // Find out if there are overflowing elements.
+    let lastVisibleElement = 0;
+    const showMoreButton = this.containerRef.scrollHeight > this.containerRef.clientHeight;
+    const containerHeight = this.containerRef.clientHeight;
+    const chips = Array.from(this.layoutRef.children);
+    this.moreButtonRef.style.display = showMoreButton ? 'block' : 'none';
+    this.layoutRef.style.minHeight = showMoreButton ? `${this.maxContentHeight}px` : '0px';
+
+    // If the more button is not visible we don't need to process anything.
+    if (!showMoreButton) {
+      return;
+    }
+
+    // Hide or show chips that are hidden due to overflow.
+    chips.forEach((child, index) => {
+      const isVisible = child.offsetTop + child.clientHeight < containerHeight;
+      child.setAttribute('style', `display: ${isVisible ? 'flex' : 'none'};`);
+      if (isVisible) {
+        lastVisibleElement = index;
+      }
+    });
+
+    // Hide the more button if previous assumption was incorrect.
+    if (lastVisibleElement === chips.length - 1) {
+      this.moreButtonRef.style.display = 'none';
+      return;
+    }
+
+    // Hide elements so that the 'more button' has enough space.
+    chips.slice(0, lastVisibleElement + 1).reverse().every(element => {
+      const offsetBottom = element.offsetTop + element.clientHeight;
+      if (this.moreButtonRef.offsetTop > offsetBottom) {
+        return true;
+      }
+      const buttonSpaceRequired = this.moreButtonRef.clientWidth + variables.gap.big;
+      const elementRight = this.containerRef.clientWidth - (element.offsetLeft + element.clientWidth);
+      const spaceDiff = buttonSpaceRequired - elementRight;
+      const remainingChipWidth = element.clientWidth - spaceDiff;
+      if (remainingChipWidth > CHIP_MINIMUM_WIDTH) {
+        element.setAttribute('style', `max-width: ${remainingChipWidth}px`);
+        return false;
+      }
+      if (element.offsetTop !== chips[lastVisibleElement].offsetTop) {
+        element.setAttribute('style', 'display: none');
+        return false;
+      }
+      element.setAttribute('style', 'display: none');
+      return true;
+    });
+  }
+  /**
    * Renders the component.
    * @returns {JSX}
-   */function render(){var _this4=this;return React.createElement("div",{ref:function ref(element){_this4.containerRef=element;},className:"".concat(styles.container(this.maxContentHeight)," engage__chip-layout")},React.createElement("div",{ref:function ref(element){_this4.layoutRef=element;},className:styles.layout},this.props.children),React.createElement("div",{ref:function ref(element){_this4.moreButtonRef=element;},className:styles.moreButtonWrapper},React.createElement(RippleButton,{fill:true,type:"plain",className:this.moreButtonStyles,onClick:this.props.handleMoreButton},React.createElement(I18n.Text,{string:this.props.moreLabel}))));}}]);}(Component);_defineProperty(ChipLayout,"defaultProps",{children:null,handleMoreButton:function handleMoreButton(){},invertMoreButton:false,maxRows:2,moreLabel:'more',pathname:''});export default ChipLayout;
+   */
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: element => {
+        this.containerRef = element;
+      },
+      className: `${styles.container(this.maxContentHeight)} engage__chip-layout`
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: element => {
+        this.layoutRef = element;
+      },
+      className: styles.layout
+    }, this.props.children), /*#__PURE__*/React.createElement("div", {
+      ref: element => {
+        this.moreButtonRef = element;
+      },
+      className: styles.moreButtonWrapper
+    }, /*#__PURE__*/React.createElement(RippleButton, {
+      fill: true,
+      type: "plain",
+      className: this.moreButtonStyles,
+      onClick: this.props.handleMoreButton
+    }, /*#__PURE__*/React.createElement(I18n.Text, {
+      string: this.props.moreLabel
+    }))));
+  }
+}
+ChipLayout.defaultProps = {
+  children: null,
+  handleMoreButton: () => {},
+  invertMoreButton: false,
+  maxRows: 2,
+  moreLabel: 'more',
+  pathname: ''
+};
+export default ChipLayout;

package/components/ChipLayout/spec.js

@@ -1,5 +1,33 @@
-import React from'react';import{mount}from'enzyme';import Chip from'@shopgate/pwa-ui-shared/Chip';import ChipsLayout from"./index";/**
+import React from 'react';
+import { mount } from 'enzyme';
+import Chip from '@shopgate/pwa-ui-shared/Chip';
+import ChipsLayout from "./index";
+
+/**
  * Since the component uses the <Measure> component it needs an actual
  * browser to be tested as it needs a full browser that supports styling and
  * width/height calculation.
- */describe('<ChipsLayout />',function(){it('should render with one chip',function(){var Component=React.createElement(ChipsLayout,null,React.createElement(Chip,{id:"some-id"},"foo"));var wrapper=mount(Component);expect(wrapper).toMatchSnapshot();expect(wrapper.find(Chip).length).toEqual(1);expect(wrapper.find(Chip).at(0).find('button').at(1).text()).toEqual('foo');});it('should render with two chips',function(){var Component=React.createElement(ChipsLayout,null,React.createElement(Chip,{id:"some-id"},"foo"),React.createElement(Chip,{id:"some-other-id"},"bar"));var wrapper=mount(Component);expect(wrapper).toMatchSnapshot();expect(wrapper.find(Chip).length).toEqual(2);expect(wrapper.find(Chip).at(0).find('button').at(1).text()).toEqual('foo');expect(wrapper.find(Chip).at(1).find('button').at(1).text()).toEqual('bar');});});
+ */
+describe('<ChipsLayout />', () => {
+  it('should render with one chip', () => {
+    const Component = /*#__PURE__*/React.createElement(ChipsLayout, null, /*#__PURE__*/React.createElement(Chip, {
+      id: "some-id"
+    }, "foo"));
+    const wrapper = mount(Component);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Chip).length).toEqual(1);
+    expect(wrapper.find(Chip).at(0).find('button').at(1).text()).toEqual('foo');
+  });
+  it('should render with two chips', () => {
+    const Component = /*#__PURE__*/React.createElement(ChipsLayout, null, /*#__PURE__*/React.createElement(Chip, {
+      id: "some-id"
+    }, "foo"), /*#__PURE__*/React.createElement(Chip, {
+      id: "some-other-id"
+    }, "bar"));
+    const wrapper = mount(Component);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Chip).length).toEqual(2);
+    expect(wrapper.find(Chip).at(0).find('button').at(1).text()).toEqual('foo');
+    expect(wrapper.find(Chip).at(1).find('button').at(1).text()).toEqual('bar');
+  });
+});