@shopgate/engage 7.27.3-alpha.17 → 7.27.3-alpha.18

package/orders/constants/routes.js

@@ -0,0 +1 @@
+export var ORDER_DETAILS_PATTERN='/orders/:orderId';export var ORDER_DETAILS_PRIVATE_PATH='/order-details';export var ORDER_DETAILS_PRIVATE_PATTERN='/order-details/:orderNumber';

package/orders/constants/status.js

@@ -0,0 +1,12 @@
+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;}export var ORDER_STATUS_NEW='new';export var ORDER_STATUS_OPEN='open';export var ORDER_STATUS_REJECTED='rejected';export var ORDER_STATUS_CANCELED='canceled';export var ORDER_STATUS_READY='ready';export var ORDER_STATUS_FULFILLED='fulfilled';export var ORDER_STATUS_COMPLETED='completed';export var ORDER_STATUS_IN_PROGRESS='inProgress';// Does not come from the API
+export var ORDER_STATUS_SUBMITTED='submitted';var orderStatusMapping=_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},ORDER_STATUS_NEW,ORDER_STATUS_SUBMITTED),ORDER_STATUS_OPEN,ORDER_STATUS_SUBMITTED),ORDER_STATUS_IN_PROGRESS,ORDER_STATUS_IN_PROGRESS),ORDER_STATUS_READY,ORDER_STATUS_READY),ORDER_STATUS_FULFILLED,ORDER_STATUS_COMPLETED),ORDER_STATUS_COMPLETED,ORDER_STATUS_COMPLETED),ORDER_STATUS_CANCELED,ORDER_STATUS_CANCELED),ORDER_STATUS_REJECTED,ORDER_STATUS_CANCELED);/**
+ * Retrieves a final mapped order status of an original order status.
+ * @param {string} orderStatus The original order status
+ * @returns {string}
+ */export var getEngageOrderStatus=function getEngageOrderStatus(orderStatus){return orderStatusMapping[orderStatus]||orderStatus;};export var LINE_ITEM_STATUS_OPEN='open';export var LINE_ITEM_STATUS_IN_PROGRESS='inProgress';export var LINE_ITEM_STATUS_REJECTED='rejected';export var LINE_ITEM_STATUS_CANCELED='canceled';export var LINE_ITEM_STATUS_FULFILLED='fulfilled';// Does not come from the API
+export var LINE_ITEM_STATUS_PENDING='pending';export var LINE_ITEM_STATUS_UNAVAILABLE='unavailable';export var LINE_ITEM_SUB_STATUS_SUBSTITUTED='substituted';export var LINE_ITEM_SUB_STATUS_REPLACED='replaced';var lineItemInactiveStatuses=[{status:LINE_ITEM_STATUS_CANCELED,subStatus:null},{status:LINE_ITEM_STATUS_CANCELED,subStatus:LINE_ITEM_SUB_STATUS_SUBSTITUTED}];/**
+ * Retrieves a final mapped line item status of an original line item status.
+ * @param {string} lineItemStatus The original line item status
+ * @param {string} lineItemSubStatus The original line item sub status
+ * @returns {string}
+ */export var getEngageLineItemStatus=function getEngageLineItemStatus(lineItemStatus,lineItemSubStatus){var active=!lineItemInactiveStatuses.find(function(entry){return entry.status===lineItemStatus&&entry.subStatus===lineItemSubStatus;});return{status:lineItemStatus,active:active};};

package/orders/helpers/index.js

@@ -0,0 +1 @@
+export{getTranslatedOrderStatus,getTranslatedLineItemStatus,getLineItemActiveStatus}from"./orderStatus";

package/orders/helpers/orderDetails.js

@@ -0,0 +1,5 @@
+import{ORDER_DETAILS_PRIVATE_PATH}from"../constants/routes";/**
+ * Generate route to order details.
+ * @param {string} orderNumber The order number.
+ * @returns {string}
+ */export var getOrderDetailsRoute=function getOrderDetailsRoute(orderNumber){return"".concat(ORDER_DETAILS_PRIVATE_PATH,"/").concat(orderNumber);};

package/orders/helpers/orderStatus.js

@@ -0,0 +1,15 @@
+import{i18n}from'@shopgate/engage/core';import{getEngageOrderStatus,getEngageLineItemStatus}from"../constants";/**
+ * Generates a translated order status.
+ * @param {string} status The status from the API.
+ * @returns {string}
+ */export var getTranslatedOrderStatus=function getTranslatedOrderStatus(status){var path="order.status.order.".concat(getEngageOrderStatus(status));var translated=i18n.text(path);return translated!==path?translated:status;};/**
+ * Generates a translated line item status.
+ * @param {string} status The status from the API.
+ * @param {string} subStatus The sub status from the API.
+ * @returns {string}
+ */export var getTranslatedLineItemStatus=function getTranslatedLineItemStatus(status,subStatus){var _getEngageLineItemSta;var statusText=(_getEngageLineItemSta=getEngageLineItemStatus(status,subStatus))===null||_getEngageLineItemSta===void 0?void 0:_getEngageLineItemSta.status;var path="order.status.line_item.".concat(statusText);var translated=i18n.text(path);return translated!==path?translated:status;};/**
+ * Determines the active status of a line item.
+ * @param {string} status The status from the API.
+ * @param {string} subStatus The sub status from the API.
+ * @returns {boolean}
+ */export var getLineItemActiveStatus=function getLineItemActiveStatus(status,subStatus){var _getEngageLineItemSta2;return(_getEngageLineItemSta2=getEngageLineItemStatus(status,subStatus))===null||_getEngageLineItemSta2===void 0?void 0:_getEngageLineItemSta2.active;};

package/orders/hooks/index.js

@@ -0,0 +1,7 @@
+import React from'react';import OrderDetails from"../providers/OrderDetailsProvider.context";import OrderHistory from"../providers/OrderHistoryProvider.context";/**
+ * Returns the value of the order details provider state.
+ * @returns {Object}
+ */export var useOrderDetails=function useOrderDetails(){return React.useContext(OrderDetails);};/**
+ * Returns the value of the order details provider state.
+ * @returns {Object}
+ */export var useOrderHistory=function useOrderHistory(){return React.useContext(OrderHistory);};

package/orders/index.js

@@ -1,2 +1,2 @@
 /** @module orders */import{CHECKOUT_PATH}from'@shopgate/pwa-common/constants/RoutePaths';// CONSTANTS
-export*from'@shopgate/pwa-common-commerce/orders/constants';export{CHECKOUT_PATH};
+export*from'@shopgate/pwa-common-commerce/orders/constants';export{CHECKOUT_PATH};export{makeGetOrderById}from"./selectors";export{getTranslatedOrderStatus,getTranslatedLineItemStatus,getLineItemActiveStatus}from"./helpers";

package/orders/providers/OrderDetailsPrivateProvider.connector.js

@@ -0,0 +1,11 @@
+import{connect}from'react-redux';import{getShopSettings,getConfigFetching}from'@shopgate/engage/core/config';import{getPreferredLocationAddress}from'@shopgate/engage/locations/selectors';import{isUserLoggedIn}from'@shopgate/pwa-common/selectors/user';import{makeGetOrderByNumber}from"../selectors";import{fetchOrderDetails as _fetchOrderDetails,cancelOrder as _cancelOrder}from"../actions";/**
+ * @return {Function}
+ */var makeMapStateToProps=function makeMapStateToProps(){var getOrderByNumber=makeGetOrderByNumber();/**
+   * @param {Object} state The application state.
+   * @param {Object} props The component props.
+   * @returns {Object}
+   */return function(state,props){return{isDataReady:!getConfigFetching(state),isUserLoggedIn:isUserLoggedIn(state),shopSettings:getShopSettings(state),userLocation:getPreferredLocationAddress(state),order:getOrderByNumber(state,props)};};};/**
+ * Connects the dispatch function to a callable function in the props.
+ * @param {Function} dispatch The redux dispatch function.
+ * @return {Object} The extended component props.
+ */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{fetchOrderDetails:function fetchOrderDetails(orderNumber){return dispatch(_fetchOrderDetails({orderNumber:orderNumber}));},cancelOrder:function cancelOrder(orderNumber){return dispatch(_cancelOrder({orderNumber:orderNumber}));}};};export default connect(makeMapStateToProps,mapDispatchToProps);

package/orders/providers/OrderDetailsPrivateProvider.js

@@ -0,0 +1,5 @@
+import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}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 React,{useState,useMemo,useCallback,useEffect}from'react';import PropTypes from'prop-types';import{useRoute,LoadingProvider}from'@shopgate/engage/core';import connect from"./OrderDetailsPrivateProvider.connector";import Context from"./OrderDetailsProvider.context";/**
+ * @param {Object} props The component props.
+ * @returns {JSX}
+ */var OrderDetailsProvider=function OrderDetailsProvider(_ref){var order=_ref.order,orderNumber=_ref.orderNumber,shopSettings=_ref.shopSettings,userLocation=_ref.userLocation,fetchOrderDetails=_ref.fetchOrderDetails,cancelOrder=_ref.cancelOrder,children=_ref.children;var _useRoute=useRoute(),pathname=_useRoute.pathname;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isLoading=_useState2[0],setIsLoading=_useState2[1];var handleRequest=useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:setIsLoading(true);_context.next=3;return fetchOrderDetails(orderNumber);case 3:setIsLoading(false);case 4:case"end":return _context.stop();}},_callee);})),[fetchOrderDetails,orderNumber]);var handleCancel=useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(){return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:setIsLoading(true);_context2.next=3;return cancelOrder(orderNumber);case 3:setIsLoading(false);case 4:case"end":return _context2.stop();}},_callee2);})),[cancelOrder,orderNumber]);// Loading state
+useEffect(function(){if(isLoading){LoadingProvider.setLoading(pathname);return;}LoadingProvider.unsetLoading(pathname);},[isLoading,pathname]);useEffect(function(){handleRequest();},[handleRequest]);var value=useMemo(function(){return{order:order,isLoading:isLoading,supportedCountries:shopSettings.supportedCountries,countrySortOrder:shopSettings.countrySortOrder,userLocation:userLocation,fetchOrderDetails:fetchOrderDetails,cancelOrder:handleCancel};},[order,isLoading,shopSettings.supportedCountries,shopSettings.countrySortOrder,userLocation,fetchOrderDetails,handleCancel]);return React.createElement(Context.Provider,{value:value},children);};OrderDetailsProvider.defaultProps={children:null,shopSettings:null,userLocation:null,order:null};export default connect(OrderDetailsProvider);

package/orders/providers/OrderDetailsProvider.connector.js

@@ -0,0 +1,11 @@
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{connect}from'react-redux';import{getShopSettings,getConfigFetching}from'@shopgate/engage/core/config';import{getPreferredLocationAddress}from'@shopgate/engage/locations/selectors';import{isUserLoggedIn}from'@shopgate/pwa-common/selectors/user';import{makeGetOrderById}from"../selectors";import{fetchOrderDetails as _fetchOrderDetails,cancelOrder as _cancelOrder}from"../actions";/**
+ * @return {Function}
+ */var makeMapStateToProps=function makeMapStateToProps(){var getOrderById=makeGetOrderById();/**
+   * @param {Object} state The application state.
+   * @param {Object} props The component props.
+   * @returns {Object}
+   */return function(state,props){return{isDataReady:!getConfigFetching(state),isUserLoggedIn:isUserLoggedIn(state),shopSettings:getShopSettings(state),userLocation:getPreferredLocationAddress(state),order:getOrderById(state,props)};};};/**
+ * Connects the dispatch function to a callable function in the props.
+ * @param {Function} dispatch The redux dispatch function.
+ * @return {Object} The extended component props.
+ */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{fetchOrderDetails:function fetchOrderDetails(orderId,params){return dispatch(_fetchOrderDetails(_extends({orderId:orderId},params)));},cancelOrder:function cancelOrder(orderId,token){return dispatch(_cancelOrder({orderId:orderId,token:token}));}};};export default connect(makeMapStateToProps,mapDispatchToProps);

package/orders/providers/OrderDetailsProvider.constraints.js

@@ -0,0 +1 @@
+export var authenticateConstraints={email:{presence:{message:'validation.required',allowEmpty:false},email:{message:'validation.email'}},phone:{presence:{message:'validation.required',allowEmpty:false},format:{pattern:'^[+0-9]+',message:'validation.mobileNumber'}}};

package/orders/providers/OrderDetailsProvider.context.js

@@ -0,0 +1 @@
+import React from'react';var initialContext={};export default React.createContext(initialContext);

package/orders/providers/OrderDetailsProvider.js

@@ -0,0 +1,11 @@
+import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}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 React,{useState,useMemo,useCallback,useEffect}from'react';import PropTypes from'prop-types';import{useCookies}from'react-cookie';import{useRoute,i18n,LoadingProvider,EUNAUTHORIZED,EAUTHENTICATION,ENOTFOUND}from'@shopgate/engage/core';import{useFormState}from'@shopgate/engage/core/hooks/useFormState';import{authenticateConstraints}from"./OrderDetailsProvider.constraints";import connect from"./OrderDetailsProvider.connector";import Context from"./OrderDetailsProvider.context";var defaultFormState={email:'',phone:''};/**
+ * Converts validation errors into errors for form builder.
+ * @param {Object} validationErrors The validation errors.
+ * @returns {Array}
+ */var convertValidationErrors=function convertValidationErrors(validationErrors){return Object.keys(validationErrors).map(function(key){return{path:key,message:i18n.text(validationErrors[key])};});};/**
+ * @param {Object} props The component props.
+ * @returns {JSX}
+ */var OrderDetailsProvider=function OrderDetailsProvider(_ref){var isUserLoggedIn=_ref.isUserLoggedIn,order=_ref.order,orderId=_ref.orderId,shopSettings=_ref.shopSettings,userLocation=_ref.userLocation,fetchOrderDetails=_ref.fetchOrderDetails,cancelOrder=_ref.cancelOrder,children=_ref.children;var _useRoute=useRoute(),pathname=_useRoute.pathname;var _useState=useState(!isUserLoggedIn),_useState2=_slicedToArray(_useState,2),showForm=_useState2[0],setShowForm=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isLoading=_useState4[0],setIsLoading=_useState4[1];var _useState5=useState(''),_useState6=_slicedToArray(_useState5,2),errorMessage=_useState6[0],setErrorMessage=_useState6[1];var orderTokenCookie=["shopgate_order_token_".concat(orderId)];var _useCookies=useCookies([orderTokenCookie]),_useCookies2=_slicedToArray(_useCookies,2),cookies=_useCookies2[0],setCookie=_useCookies2[1];var orderToken=cookies[orderTokenCookie];// Form visibility
+useEffect(function(){if(isUserLoggedIn){setShowForm(errorMessage);}else{setShowForm(!order&&!orderToken||errorMessage);}},[errorMessage,isUserLoggedIn,order,orderToken]);var handleRequest=useCallback(/*#__PURE__*/function(){var _ref2=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(email,phone,token){var message,response,code;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:setIsLoading(true);_context.prev=1;_context.next=4;return fetchOrderDetails(orderId,{email:email,phone:phone,token:token});case 4:response=_context.sent;if(response.token&&response.tokenExpires){setCookie(orderTokenCookie,response.token,{expires:new Date(response.tokenExpires)});}setErrorMessage('');_context.next=13;break;case 9:_context.prev=9;_context.t0=_context["catch"](1);code=_context.t0.code;if(code===EUNAUTHORIZED){message='order_details.errors.authorize';}else if(code===EAUTHENTICATION){message='order_details.errors.authenticate';}else if(code===ENOTFOUND){message='order_details.errors.not_found';}case 13:if(message){setErrorMessage(i18n.text(message));}setIsLoading(false);case 15:case"end":return _context.stop();}},_callee,null,[[1,9]]);}));return function(_x,_x2,_x3){return _ref2.apply(this,arguments);};}(),[fetchOrderDetails,orderTokenCookie,orderId,setCookie]);var handleCancel=useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(){var message,code;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:setIsLoading(true);_context2.prev=1;_context2.next=4;return cancelOrder(orderId,orderToken);case 4:setErrorMessage('');_context2.next=11;break;case 7:_context2.prev=7;_context2.t0=_context2["catch"](1);code=_context2.t0.code;if(code===EAUTHENTICATION){message='order_details.errors.expired';}else if(code===ENOTFOUND){message='order_details.errors.not_found';}case 11:if(message){setErrorMessage(i18n.text(message));}setIsLoading(false);case 13:case"end":return _context2.stop();}},_callee2,null,[[1,7]]);})),[cancelOrder,orderId,orderToken]);// Loading state
+useEffect(function(){if(isLoading){LoadingProvider.setLoading(pathname);return;}LoadingProvider.unsetLoading(pathname);},[isLoading,pathname]);useEffect(function(){if(!isUserLoggedIn&&!orderToken){return;}_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(){return _regeneratorRuntime.wrap(function _callee3$(_context3){while(1)switch(_context3.prev=_context3.next){case 0:_context3.next=2;return handleRequest(undefined,undefined,!isUserLoggedIn?orderToken:undefined);case 2:case"end":return _context3.stop();}},_callee3);}))();/* eslint-disable react-hooks/exhaustive-deps */},[]);/* eslint-enable react-hooks/exhaustive-deps */var authenticateFormState={valid:false,values:[]};// Authentication form
+var handleAuthenticateFormSubmit=useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(){var _authenticateFormStat,email,phone;return _regeneratorRuntime.wrap(function _callee4$(_context4){while(1)switch(_context4.prev=_context4.next){case 0:if(authenticateFormState.valid){_context4.next=2;break;}return _context4.abrupt("return");case 2:_authenticateFormStat=authenticateFormState.values,email=_authenticateFormStat.email,phone=_authenticateFormStat.phone;_context4.next=5;return handleRequest(email,phone);case 5:case"end":return _context4.stop();}},_callee4);})),[authenticateFormState.valid,authenticateFormState.values,handleRequest]);authenticateFormState=useFormState(defaultFormState,handleAuthenticateFormSubmit,authenticateConstraints);var handleSubmit=useCallback(function(){authenticateFormState.handleSubmit(new Event('submit'));},[authenticateFormState]);var value=useMemo(function(){return{isUserLoggedIn:isUserLoggedIn,order:order,handleSubmit:handleSubmit,isLoading:isLoading,showForm:showForm,supportedCountries:shopSettings.supportedCountries,countrySortOrder:shopSettings.countrySortOrder,validationErrors:convertValidationErrors(authenticateFormState.validationErrors||{}),updateForm:authenticateFormState.setValues,defaultFormState:defaultFormState,userLocation:userLocation,fetchOrderDetails:fetchOrderDetails,cancelOrder:handleCancel,errorMessage:errorMessage};},[authenticateFormState.setValues,authenticateFormState.validationErrors,fetchOrderDetails,handleCancel,handleSubmit,isUserLoggedIn,showForm,isLoading,order,shopSettings.supportedCountries,shopSettings.countrySortOrder,userLocation,errorMessage]);return React.createElement(Context.Provider,{value:value},children);};OrderDetailsProvider.defaultProps={children:null,shopSettings:null,userLocation:null,order:null,orderId:null};export default connect(OrderDetailsProvider);

package/orders/providers/OrderHistoryProvider.connector.js

@@ -0,0 +1,9 @@
+import{connect}from'react-redux';import{historyPush}from'@shopgate/engage/core';import{fetchOrderHistory}from"../actions";import{getOrders,getTotalOrderCount}from"../selectors";/**
+   * @param {Object} state The application state.
+   * @param {Object} props The component props.
+   * @returns {Object}
+   */var mapStateToProps=function mapStateToProps(state){return{orders:getOrders(state),totalOrderCount:getTotalOrderCount(state)};};/**
+ * Connects the dispatch function to a callable function in the props.
+ * @param {Function} dispatch The redux dispatch function.
+ * @return {Object} The extended component props.
+ */var mapDispatchToProps={fetchOrderHistory:fetchOrderHistory,historyPush:historyPush};export default connect(mapStateToProps,mapDispatchToProps);

package/orders/providers/OrderHistoryProvider.context.js

@@ -0,0 +1 @@
+import React from'react';var initialContext={};export default React.createContext(initialContext);

package/orders/providers/OrderHistoryProvider.js

@@ -0,0 +1,4 @@
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useMemo}from'react';import PropTypes from'prop-types';import connect from"./OrderHistoryProvider.connector";import Context from"./OrderHistoryProvider.context";import{getOrderDetailsRoute}from"../helpers/orderDetails";/**
+ * @param {Object} props The component props.
+ * @returns {JSX}
+ */var OrderHistoryProvider=function OrderHistoryProvider(_ref){var orders=_ref.orders,fetchOrderHistory=_ref.fetchOrderHistory,children=_ref.children,historyPush=_ref.historyPush,totalOrderCount=_ref.totalOrderCount;var value=useMemo(function(){return{orders:orders.map(function(order){return _extends({},order,{openDetails:function openDetails(){return historyPush({pathname:getOrderDetailsRoute(order.orderNumber)});}});}),totalOrderCount:totalOrderCount,fetchOrderHistory:fetchOrderHistory};},[fetchOrderHistory,historyPush,orders,totalOrderCount]);return React.createElement(Context.Provider,{value:value},children);};OrderHistoryProvider.defaultProps={children:null,totalOrderCount:null};export default connect(OrderHistoryProvider);

package/orders/reducers/index.js

@@ -0,0 +1 @@
+import{combineReducers}from'redux';import ordersById from"./ordersById";import ordersByNumber from"./ordersByNumber";import orders from"./orders";export default combineReducers({ordersById:ordersById,ordersByNumber:ordersByNumber,orders:orders});

package/orders/reducers/orders.js

@@ -0,0 +1,7 @@
+import{produce}from'immer';import{REQUEST_ORDER_HISTORY,RECEIVE_ORDER_HISTORY,ERROR_ORDER_HISTORY,CLEAR_ORDERS}from"../constants";export var CACHE_TIME=60*60*1000;// 1 hr in milliseconds
+var defaultState={orders:[]};/**
+ * Stores orders by the order number.
+ * @param {Object} [state={}] The current state.
+ * @param {Object} action The action object.
+ * @returns {Object} The new state.
+ */var orders=function orders(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:defaultState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(function(draft){switch(action.type){case REQUEST_ORDER_HISTORY:{draft.isFetching=true;break;}case RECEIVE_ORDER_HISTORY:{draft.isFetching=false;draft.orders=[].concat(draft.orders.slice(0,action.offset),action.orders.map(function(order){return order.orderNumber;}));draft.totalOrderCount=action.totalOrderCount;break;}case ERROR_ORDER_HISTORY:{draft.isFetching=false;break;}case CLEAR_ORDERS:{return defaultState;}default:break;}return undefined;});/* eslint-enable no-param-reassign */return producer(state);};export default orders;

package/orders/reducers/ordersById.js

@@ -0,0 +1,7 @@
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{produce}from'immer';import{REQUEST_ORDER_DETAILS,RECEIVE_ORDER_DETAILS,ERROR_ORDER_DETAILS,CLEAR_ORDERS}from"../constants";export var CACHE_TIME=60*60*1000;// 1 hr in milliseconds
+var defaultState={};/**
+ * Stores orders by the order number.
+ * @param {Object} [state={}] The current state.
+ * @param {Object} action The action object.
+ * @returns {Object} The new state.
+ */var ordersById=function ordersById(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:defaultState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(function(draft){switch(action.type){case REQUEST_ORDER_DETAILS:{if(action.orderId){draft[action.orderId]=_extends({},draft[action.orderId],{isFetching:true,expires:0});}break;}case RECEIVE_ORDER_DETAILS:{if(action.orderId){draft[action.orderId]=_extends({},draft[action.orderId],{order:action.order,isFetching:false,expires:Date.now()+CACHE_TIME});}break;}case ERROR_ORDER_DETAILS:{if(action.orderId){draft[action.orderId]={isFetching:false,expires:0};}break;}case CLEAR_ORDERS:{return defaultState;}default:break;}return undefined;});/* eslint-enable no-param-reassign */return producer(state);};export default ordersById;

package/orders/reducers/ordersByNumber.js

@@ -0,0 +1,7 @@
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{produce}from'immer';import{REQUEST_ORDER_DETAILS,RECEIVE_ORDER_DETAILS,RECEIVE_ORDER_HISTORY,ERROR_ORDER_DETAILS,CLEAR_ORDERS}from"../constants";export var CACHE_TIME=60*60*1000;// 1 hr in milliseconds
+var defaultState={};/**
+ * Stores orders by the order number.
+ * @param {Object} [state={}] The current state.
+ * @param {Object} action The action object.
+ * @returns {Object} The new state.
+ */var ordersByNumber=function ordersByNumber(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:defaultState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(function(draft){switch(action.type){case REQUEST_ORDER_DETAILS:{if(!action.orderNumber)break;draft[action.orderNumber]=_extends({},draft[action.orderNumber],{isFetching:true,expires:0});break;}case RECEIVE_ORDER_DETAILS:{draft[action.order.orderNumber]=_extends({},draft[action.order.orderNumber],{order:_extends({},action.order,{lineItemCount:action.order.lineItems.length}),isFetching:false,expires:Date.now()+CACHE_TIME});break;}case RECEIVE_ORDER_HISTORY:{action.orders.forEach(function(order){var _draft$order$orderNum;draft[order.orderNumber]=_extends({},draft[order.orderNumber],{order:_extends({},(_draft$order$orderNum=draft[order.orderNumber])===null||_draft$order$orderNum===void 0?void 0:_draft$order$orderNum.order,{},order)});});break;}case ERROR_ORDER_DETAILS:{if(!action.orderNumber)break;draft[action.orderNumber]={isFetching:false,expires:0};break;}case CLEAR_ORDERS:{return defaultState;}default:break;}return undefined;});/* eslint-enable no-param-reassign */return producer(state);};export default ordersByNumber;

package/orders/selectors/index.js

@@ -0,0 +1,27 @@
+import{createSelector}from'reselect';/**
+ * Retrieves the orders state from the store.
+ * @param {Object} state The current application state.
+ * @return {Object} The orders state.
+ */var getOrdersState=function getOrdersState(state){return state.orders||{};};/**
+ * Retrieves the ordersById state from the store.
+ * @param {Object} state The current application state.
+ * @return {Object} The orders state.
+ */var getOrdersByIdState=function getOrdersByIdState(state){return getOrdersState(state).ordersById||{};};/**
+ * Retrieves the ordersByNumber state from the store.
+ * @param {Object} state The current application state.
+ * @return {Object} The orders state.
+ */var getOrdersByNumberState=function getOrdersByNumberState(state){return getOrdersState(state).ordersByNumber||{};};/**
+ * Retrieves the orders from the store.
+ * @param {Object} state The current application state.
+ * @return {Object} The orders state.
+ */export var getOrders=createSelector(getOrdersState,getOrdersByNumberState,function(orders,ordersByNumber){return orders.orders.orders.map(function(orderNumber){var _ordersByNumber$order;return(_ordersByNumber$order=ordersByNumber[orderNumber])===null||_ordersByNumber$order===void 0?void 0:_ordersByNumber$order.order;});});/**
+ * Retrieves total count of orders from the store.
+ * @param {Object} state The current application state.
+ * @return {Object} The orders state.
+ */export var getTotalOrderCount=function getTotalOrderCount(state){return getOrdersState(state).orders.totalOrderCount;};/**
+ * Creates the selector that retrieves an order by its number.
+ * @returns {Function}
+ */export var makeGetOrderById=function makeGetOrderById(){return createSelector(function(state,props){return props.orderId;},getOrdersByIdState,function(orderId,orders){var _orders$orderId;return(orders===null||orders===void 0?void 0:(_orders$orderId=orders[orderId])===null||_orders$orderId===void 0?void 0:_orders$orderId.order)||null;});};/**
+ * Creates the selector that retrieves an order by its number.
+ * @returns {Function}
+ */export var makeGetOrderByNumber=function makeGetOrderByNumber(){return createSelector(function(state,props){return props.orderNumber;},getOrdersByNumberState,function(orderNumber,orders){var _orders$orderNumber;return(orders===null||orders===void 0?void 0:(_orders$orderNumber=orders[orderNumber])===null||_orders$orderNumber===void 0?void 0:_orders$orderNumber.order)||null;});};

package/orders/subscriptions/index.js

@@ -0,0 +1,4 @@
+import{main$}from'@shopgate/pwa-common/streams/main';import{clearOrders}from"../action-creators";import{SUBMIT_CHECKOUT_ORDER_SUCCESS}from"../../checkout/constants/actionTypes";/**
+ * Orders subscriptions.
+ * @param {Function} subscribe The subscribe function.
+ */var orders=function orders(subscribe){var checkoutSuccess$=main$.filter(function(_ref){var action=_ref.action;return action.type===SUBMIT_CHECKOUT_ORDER_SUCCESS;});subscribe(checkoutSuccess$,function(_ref2){var dispatch=_ref2.dispatch;dispatch(clearOrders());});};export default orders;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.27.3-alpha.17",
+  "version": "7.27.3-alpha.18",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -15,34 +15,42 @@
     "connect"
   ],
   "dependencies": {
-    "@shopgate/pwa-common": "7.27.3-alpha.17",
-    "@shopgate/pwa-common-commerce": "7.27.3-alpha.17",
-    "@shopgate/pwa-core": "7.27.3-alpha.17",
-    "@shopgate/pwa-ui-ios": "7.27.3-alpha.17",
-    "@shopgate/pwa-ui-material": "7.27.3-alpha.17",
-    "@shopgate/pwa-ui-shared": "7.27.3-alpha.17",
-    "@virtuous/conductor": "~2.4.0",
+    "@shopgate/native-modules": "1.0.0-beta.25",
+    "@shopgate/pwa-common": "7.27.3-alpha.18",
+    "@shopgate/pwa-common-commerce": "7.27.3-alpha.18",
+    "@shopgate/pwa-core": "7.27.3-alpha.18",
+    "@shopgate/pwa-ui-ios": "7.27.3-alpha.18",
+    "@shopgate/pwa-ui-material": "7.27.3-alpha.18",
+    "@shopgate/pwa-ui-shared": "7.27.3-alpha.18",
+    "@stripe/react-stripe-js": "^1.16.5",
+    "@stripe/stripe-js": "^1.3.1",
+    "@virtuous/conductor": "~2.5.0",
     "babel-plugin-transform-es3-member-expression-literals": "^6.8.0",
     "babel-plugin-transform-es3-property-literals": "^6.8.0",
     "color": "^3.1.2",
-    "immer": "^10.0.1",
+    "focus-trap-react": "^11.0.3",
+    "immer": "^8.0.1",
     "intersection-observer": "^0.6.0",
+    "leaflet": "^1.8.0",
+    "leaflet-gesture-handling": "^1.2.2",
     "lodash": "^4.17.11",
+    "moment": "^2.27.0",
     "react-helmet": "^5.1.3",
+    "react-leaflet": "^3.2.5",
+    "react-phone-number-input": "^3.2.16",
     "react-player": "1.11.0",
     "react-portal": "^3.1.0",
-    "react-swipeable": "^4.0.1",
-    "rxjs": "~5.5.12"
+    "validate.js": "^0.13.1"
   },
   "devDependencies": {
-    "classnames": "^2.2.6",
+    "classnames": "2.5.1",
     "jest-mock-console": "^0.4.2",
     "lodash": "^4.17.11",
-    "prop-types": "~15.7.2",
-    "react": "~16.12.0",
-    "react-redux": "^5.1.2",
-    "redux": "^4.0.1",
-    "redux-mock-store": "^1.5.3",
-    "reselect": "^3.0.1"
+    "prop-types": "~15.8.1",
+    "react": "~16.14.0",
+    "react-redux": "^8.1.3",
+    "redux": "^4.2.1",
+    "redux-mock-store": "^1.5.4",
+    "reselect": "^4.1.8"
   }
 }

package/page/actions/index.js

@@ -0,0 +1 @@
+export{default as fetchPageConfig}from'@shopgate/pwa-common/actions/page/fetchPageConfig';

package/page/components/NotFound.js

@@ -0,0 +1,3 @@
+import React,{useCallback}from'react';import PropTypes from'prop-types';import{css}from'glamor';import{connect}from'react-redux';import RippleButton from'@shopgate/pwa-ui-shared/RippleButton';import{I18n}from'@shopgate/engage/components';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{historyPop}from'@shopgate/pwa-common/actions/router';var mapDispatchToProps={onClick:historyPop};var variables=themeConfig.variables;var styles={wrapper:css({display:'flex',justifyContent:'center',flexDirection:'column',textAlign:'center',padding:variables.gap.big,paddingTop:variables.gap.xxbig}).toString(),text:css({fontSize:'1.5rem'}).toString(),button:css({width:'100%',maxWidth:250}).toString(),buttonContainer:css({flexGrow:'0',padding:"".concat(variables.emptyPage.buttonVerticalGap,"px ").concat(variables.gap.big,"px")}).toString()};/**
+ * @returns {JSX}
+ */var NotFound=function NotFound(_ref){var onClick=_ref.onClick;var handleClick=useCallback(function(){onClick();},[onClick]);return React.createElement("div",{className:styles.wrapper},React.createElement(I18n.Text,{className:styles.text,string:"page.not_found"}),React.createElement("div",{className:styles.buttonContainer},React.createElement(RippleButton,{onClick:handleClick,className:styles.button,type:"secondary"},React.createElement(I18n.Text,{string:"page.continue"}))));};export default connect(null,mapDispatchToProps)(NotFound);

package/page/components/index.js

@@ -0,0 +1 @@
+export{default as NotFound}from"./NotFound";

package/page/index.js

@@ -1,4 +1,2 @@
-/** @module page */ // ACTIONS
-export{default as fetchPageConfig}from'@shopgate/pwa-common/actions/page/fetchPageConfig';// CONSTANTS
-export*from"./constants";// SELECTORS
-export*from'@shopgate/pwa-common/selectors/page';
+/** @module page */export*from"./actions";export*from"./components";export*from"./constants";// eslint-disable-next-line import/export
+export*from"./selectors";

package/page/selectors/index.js

@@ -0,0 +1,7 @@
+import{createSelector}from'reselect';import{makeGetMenu,makeGetIsFetchingMenu}from'@shopgate/engage/core/selectors';import{LEGAL_MENU}from'@shopgate/engage/core/constants';import{hasNewServices}from'@shopgate/engage/core';import{PRIVACY_PATH}from"../constants";export*from'@shopgate/pwa-common/selectors/page';/**
+ * Creates a selector that retrieves the privacy policy link.
+ *
+ * When the new services are active, the link is extracted from the "shopgate.cms.getMenu" response.
+ * Otherwise it's a static link to the legacy privacy page.
+ * @returns {string|null}
+ */export var makeGetPrivacyPolicyLink=function makeGetPrivacyPolicyLink(){var getMenu=makeGetMenu(LEGAL_MENU);var getIsFetchingMenu=makeGetIsFetchingMenu(LEGAL_MENU);return createSelector(getMenu,getIsFetchingMenu,function(menu,fetching){if(!hasNewServices()){return PRIVACY_PATH;}if(fetching||!menu){return null;}var entry=menu.find(function(item){return item.url.includes('privacy');})||{};return(entry===null||entry===void 0?void 0:entry.url)||null;});};

package/product/collections/index.js

@@ -0,0 +1 @@
+export{default as productImageFormats}from'@shopgate/pwa-common-commerce/product/collections/ProductImageFormats';

package/product/components/Availability/Availability.connector.js

@@ -0,0 +1,5 @@
+import{connect}from'react-redux';import{getProduct}from'@shopgate/pwa-common-commerce/product/selectors/product';import{AVAILABILITY_STATE_OK}from'@shopgate/pwa-common-commerce/product/constants';/**
+ * Creates the mapStateToProps connector function.
+ * @returns {Function}
+ */var makeMapStateToProps=function makeMapStateToProps(){return function(state,props){var product=getProduct(state,props);if(!product){return{availability:null,fulfillmentMethods:null};}return{// Show stock info always as availability on PDP
+availability:!product.stock?null:{text:product.stock.info,state:AVAILABILITY_STATE_OK},fulfillmentMethods:product.fulfillmentMethods||null};};};export default connect(makeMapStateToProps);

package/product/components/Availability/Availability.js

@@ -0,0 +1,6 @@
+import*as React from'react';import PropTypes from'prop-types';import classNames from'classnames';import{AVAILABILITY_STATE_OK,AVAILABILITY_STATE_WARNING,AVAILABILITY_STATE_ALERT}from'@shopgate/pwa-common-commerce/product/constants';import{SurroundPortals,PlaceholderLabel,Availability as AvailableText}from'@shopgate/engage/components';import{PRODUCT_AVAILABILITY}from'@shopgate/engage/product';import{hasNewServices}from'@shopgate/engage/core/helpers';import connect from"./Availability.connector";import{placeholder,availability as availabilityStyle}from"./Availability.style";/**
+ * The Availability component.
+ * @param {Object} props The component props.
+ * @return {JSX}
+ */function Availability(_ref){var availability=_ref.availability,fulfillmentMethods=_ref.fulfillmentMethods,fulfillmentSelection=_ref.fulfillmentSelection,className=_ref.className;// Render only when no fulfillment methods are available or when the given method exists
+if(hasNewServices()&&(!fulfillmentMethods||fulfillmentMethods.indexOf(fulfillmentSelection)!==-1)){return null;}var classes=classNames(placeholder,className?className.toString():null);return React.createElement(SurroundPortals,{portalName:PRODUCT_AVAILABILITY,portalProps:{availability:availability}},React.createElement(PlaceholderLabel,{className:classes,ready:availability!==null},availability&&React.createElement(AvailableText,{className:availabilityStyle,showWhenAvailable:true,text:availability.text||'',state:availability.state})));}Availability.defaultProps={availability:null,fulfillmentMethods:null,fulfillmentSelection:'',className:null};export default connect(React.memo(Availability));

package/product/components/Availability/Availability.style.js

@@ -0,0 +1 @@
+import{css}from'glamor';export var placeholder=css({height:16,width:'70%',marginTop:5,marginBottom:2}).toString();export var availability=css({fontSize:'0.875rem'}).toString();

package/product/components/Availability/index.js

@@ -0,0 +1 @@
+export{default as Availability}from"./Availability";

package/product/components/Characteristics/Characteristic/components/Sheet/index.js

@@ -1,8 +1,20 @@
-function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}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}});Object.defineProperty(subClass,"prototype",{writable:false});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 _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}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 _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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,{PureComponent}from'react';import PropTypes from'prop-types';import{SheetDrawer,SheetList}from'@shopgate/engage/components';import{VariantContext,ProductContext}from'@shopgate/engage/product';import{ViewContext}from'@shopgate/engage/components/View';import Item from"../SheetItem";import VariantAvailability from"../VariantAvailability";/**
+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 _objectDestructuringEmpty(obj){if(obj==null)throw new TypeError("Cannot destructure undefined");}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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,{PureComponent,Fragment}from'react';import PropTypes from'prop-types';import{SheetDrawer,SheetList,Menu,ResponsiveContainer}from'@shopgate/engage/components';import{ThemeContext}from'@shopgate/engage/core/contexts';import{VariantContext,ProductContext}from'@shopgate/engage/product/contexts';import{VariantAvailability}from'@shopgate/engage/product/components';import{ViewContext}from'@shopgate/engage/components/View';import Item from"../SheetItem";/**
  * The CharacteristicSheet component.
- */var CharacteristicSheet=/*#__PURE__*/function(_PureComponent){_inherits(CharacteristicSheet,_PureComponent);var _super=_createSuper(CharacteristicSheet);function CharacteristicSheet(){var _this;_classCallCheck(this,CharacteristicSheet);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_super.call.apply(_super,[this].concat(args));_defineProperty(_assertThisInitialized(_this),"firstSelectableItemRef",/*#__PURE__*/React.createRef());_defineProperty(_assertThisInitialized(_this),"onDidOpen",function(){if(_this.firstSelectableItemRef.current){_this.firstSelectableItemRef.current.focus();}_this.props.setViewAriaHidden(true);});_defineProperty(_assertThisInitialized(_this),"onClose",function(e){_this.props.onClose(e);_this.props.setViewAriaHidden(false);});_defineProperty(_assertThisInitialized(_this),"handleItemClick",function(event,itemId){event.stopPropagation();_this.props.onSelect(itemId);});_defineProperty(_assertThisInitialized(_this),"renderAvailability",function(value){var selection=_extends({},_this.props.selection,_defineProperty({},_this.props.charId,value));return/*#__PURE__*/React.createElement(VariantAvailability,{characteristics:selection,productId:_this.props.productId});});return _this;}_createClass(CharacteristicSheet,[{key:"render",value:/**
+ */var CharacteristicSheet=/*#__PURE__*/function(_PureComponent){function CharacteristicSheet(){var _this2;_classCallCheck(this,CharacteristicSheet);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,CharacteristicSheet,[].concat(args));_defineProperty(_this2,"firstSelectableItemRef",React.createRef());/**
+   * Focuses the first selectable item and hides the view for screen readers.
+   */_defineProperty(_this2,"onDidOpen",function(){if(_this2.firstSelectableItemRef.current){_this2.firstSelectableItemRef.current.focus();}_this2.props.setViewAriaHidden(true);});/**
+   * Shows the view for screen readers.
+   * @param {Object} e The event payload.
+   */_defineProperty(_this2,"onClose",function(e){_this2.props.onClose(e);_this2.props.setViewAriaHidden(false);});/**
+   * @param {Object} event The event object.
+   * @param {string} itemId The id that was selected
+   */_defineProperty(_this2,"handleItemClick",function(event,itemId){event.stopPropagation();_this2.props.onSelect(itemId);});/**
+   * Renders the availability text inside the sheet item.
+   * @param {string} value The value that the sheet item represents.
+   * @return {React.Component|null}
+   */_defineProperty(_this2,"renderAvailability",function(value){var _this2$props=_this2.props,fulfillmentMethods=_this2$props.fulfillmentMethods,isFetching=_this2$props.isFetching;if(fulfillmentMethods||isFetching){return null;}var selection=_extends({},_this2.props.selection,_defineProperty({},_this2.props.charId,value));return React.createElement(VariantAvailability,{characteristics:selection,productId:_this2.props.productId});});return _this2;}_inherits(CharacteristicSheet,_PureComponent);return _createClass(CharacteristicSheet,[{key:"render",value:/**
    * @return {JSX}
-   */function render(){var _this2=this;var _this$props=this.props,items=_this$props.items,label=_this$props.label,open=_this$props.open,selectedValue=_this$props.selectedValue;var selectedIndex;if(selectedValue){selectedIndex=items.findIndex(function(item){return item.id===selectedValue;});}else{selectedIndex=items.findIndex(function(item){return item.selectable;});}return/*#__PURE__*/React.createElement(SheetDrawer,{title:label,isOpen:open,onClose:this.onClose,onDidOpen:this.onDidOpen},/*#__PURE__*/React.createElement(SheetList,{className:"theme__product__characteristic__sheet"},items.map(function(item,index){return/*#__PURE__*/React.createElement(Item,{item:item,key:item.id,onClick:_this2.handleItemClick,rightComponent:function rightComponent(){return _this2.renderAvailability(item.id);},selected:item.id===selectedValue,ref:index===selectedIndex?_this2.firstSelectableItemRef:null,characteristics:_extends({},_this2.props.selection,_defineProperty({},_this2.props.charId,item.id))});})));}}]);return CharacteristicSheet;}(PureComponent);/**
+   */function render(){var _this3=this;var _this$props=this.props,items=_this$props.items,label=_this$props.label,open=_this$props.open,selectedValue=_this$props.selectedValue,contextRef=_this$props.contextRef,onDidClose=_this$props.onDidClose;var selectedIndex;if(selectedValue){selectedIndex=items.findIndex(function(item){return item.id===selectedValue;});}else{selectedIndex=items.findIndex(function(item){return item.selectable;});}return React.createElement(Fragment,null,React.createElement(ResponsiveContainer,{appAlways:true,breakpoint:"xs"},React.createElement(SheetDrawer,{title:label,isOpen:open,onClose:this.onClose,onDidOpen:this.onDidOpen,onDidClose:onDidClose},React.createElement(SheetList,{className:"theme__product__characteristic__sheet"},items.map(function(item,index){return React.createElement(Item,{item:item,key:item.id,onClick:_this3.handleItemClick,rightComponent:function rightComponent(){return _this3.renderAvailability(item.id);},selected:item.id===selectedValue,ref:index===selectedIndex?_this3.firstSelectableItemRef:null,characteristics:_extends({},_this3.props.selection,_defineProperty({},_this3.props.charId,item.id))});})))),React.createElement(ResponsiveContainer,{webOnly:true,breakpoint:">xs"},React.createElement(ThemeContext.Consumer,null,function(_ref){var contextProps=_extends({},(_objectDestructuringEmpty(_ref),_ref));return React.createElement(Menu,{isOpen:open,onClose:_this3.onClose,contextRef:contextRef},React.createElement(ThemeContext.Provider,{value:contextProps},items.map(function(item,index){return React.createElement(Item,{key:item.id,item:item,onClick:_this3.handleItemClick,rightComponent:function rightComponent(){return _this3.renderAvailability(item.id);},selected:item.id===selectedValue,ref:index===selectedIndex?_this3.firstSelectableItemRef:null,characteristics:_extends({},_this3.props.selection,_defineProperty({},_this3.props.charId,item.id))});})));})));}}]);}(PureComponent);/**
  * @param {Object} props The original component props.
  * @returns {JSX}
- */_defineProperty(CharacteristicSheet,"defaultProps",{onClose:function onClose(){},onSelect:function onSelect(){},productId:null,selectedValue:null,selection:null});var SheetComponent=function SheetComponent(props){return/*#__PURE__*/React.createElement(ViewContext.Consumer,null,function(_ref){var setAriaHidden=_ref.setAriaHidden;return/*#__PURE__*/React.createElement(ProductContext.Consumer,null,function(_ref2){var productId=_ref2.productId;return/*#__PURE__*/React.createElement(VariantContext.Consumer,null,function(_ref3){var characteristics=_ref3.characteristics;return/*#__PURE__*/React.createElement(CharacteristicSheet,_extends({productId:productId,selection:characteristics,setViewAriaHidden:setAriaHidden},props));});});});};export default SheetComponent;
+ */_defineProperty(CharacteristicSheet,"defaultProps",{fulfillmentMethods:null,onClose:function onClose(){},onSelect:function onSelect(){},onDidClose:function onDidClose(){},productId:null,selectedValue:null,contextRef:null,selection:null,isFetching:false});var SheetComponent=function SheetComponent(props){return React.createElement(ViewContext.Consumer,null,function(_ref2){var setAriaHidden=_ref2.setAriaHidden;return React.createElement(ProductContext.Consumer,null,function(_ref3){var productId=_ref3.productId,fulfillmentMethods=_ref3.fulfillmentMethods,isFetching=_ref3.isFetching;return React.createElement(VariantContext.Consumer,null,function(_ref4){var characteristics=_ref4.characteristics;return React.createElement(CharacteristicSheet,_extends({productId:productId,selection:characteristics,setViewAriaHidden:setAriaHidden,fulfillmentMethods:fulfillmentMethods,isFetching:isFetching},props));});});});};export default SheetComponent;

package/product/components/Characteristics/Characteristic/components/SheetItem/index.js

@@ -1,5 +1,10 @@
-function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}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}});Object.defineProperty(subClass,"prototype",{writable:false});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 _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}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 _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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,{PureComponent}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{withForwardedRef}from'@shopgate/engage/core';import{CharacteristicsButton}from'@shopgate/engage/back-in-stock/components';import styles from"./style";/**
+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 _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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,{PureComponent}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{withForwardedRef}from'@shopgate/engage/core/hocs';import{CharacteristicsButton}from'@shopgate/engage/back-in-stock/components';import styles from"./style";/**
  * The SheetItem component.
- */var SheetItem=/*#__PURE__*/function(_PureComponent){_inherits(SheetItem,_PureComponent);var _super=_createSuper(SheetItem);function SheetItem(){var _this;_classCallCheck(this,SheetItem);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_super.call.apply(_super,[this].concat(args));_defineProperty(_assertThisInitialized(_this),"getStyle",function(selectable){if(!selectable){return styles.buttonDisabled;}return styles.button;});_defineProperty(_assertThisInitialized(_this),"buildProps",function(){var _this$props=_this.props,item=_this$props.item,_onClick=_this$props.onClick,forwardedRef=_this$props.forwardedRef;return _extends({className:"".concat(_this.getStyle(item.selectable).toString()," theme__product__characteristic__option"),key:item.id,ref:forwardedRef,value:item.id,'aria-hidden':!item.selectable},item.selectable&&{onClick:function onClick(event){return _onClick(event,item.id);}});});return _this;}_createClass(SheetItem,[{key:"render",value:/**
+ */var SheetItem=/*#__PURE__*/function(_PureComponent){function SheetItem(){var _this2;_classCallCheck(this,SheetItem);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,SheetItem,[].concat(args));/**
+   * @param {boolean} selectable Whether or not the item can be selected.
+   * @returns {string}
+   */_defineProperty(_this2,"getStyle",function(selectable){if(!selectable){return styles.buttonDisabled;}return styles.button;});/**
+   * @returns {Object}
+   */_defineProperty(_this2,"buildProps",function(){var _this2$props=_this2.props,item=_this2$props.item,_onClick=_this2$props.onClick,forwardedRef=_this2$props.forwardedRef;return _extends({className:"".concat(_this2.getStyle(item.selectable).toString()," theme__product__characteristic__option"),key:item.id,ref:forwardedRef,value:item.id,'aria-hidden':!item.selectable},item.selectable&&{onClick:function onClick(event){return _onClick(event,item.id);}});});return _this2;}_inherits(SheetItem,_PureComponent);return _createClass(SheetItem,[{key:"render",value:/**
    * @returns {JSX}
-   */function render(){var _this$props2=this.props,item=_this$props2.item,Right=_this$props2.rightComponent,selected=_this$props2.selected,characteristics=_this$props2.characteristics;var buildProps=this.buildProps();return/*#__PURE__*/React.createElement("div",{className:classNames(styles.root,_defineProperty({},styles.rootSelected,selected))},/*#__PURE__*/React.createElement("button",_extends({},buildProps,{"data-test-id":item.label,"aria-selected":selected,role:"option",type:"button"}),/*#__PURE__*/React.createElement("div",{className:styles.mainRow},/*#__PURE__*/React.createElement("div",null,item.label),/*#__PURE__*/React.createElement("div",{className:styles.mainRowRight},item.selectable&&/*#__PURE__*/React.createElement(Right,null)))),/*#__PURE__*/React.createElement("div",{className:styles.bottomRow},item.selectable&&/*#__PURE__*/React.createElement(CharacteristicsButton,{characteristics:characteristics})));}}]);return SheetItem;}(PureComponent);_defineProperty(SheetItem,"defaultProps",{forwardedRef:null,onClick:function onClick(){},rightComponent:null,selected:false});export default withForwardedRef(SheetItem);
+   */function render(){var _this$props=this.props,item=_this$props.item,Right=_this$props.rightComponent,selected=_this$props.selected,characteristics=_this$props.characteristics;return React.createElement("div",{className:classNames(styles.root,_defineProperty({},styles.rootSelected,selected))},React.createElement("button",_extends({},this.buildProps(),{"data-test-id":item.label,"aria-selected":selected,role:"option",type:"button"}),React.createElement("div",{className:styles.mainRow},React.createElement("div",null,item.label),React.createElement("div",{className:styles.mainRowRight},item.selectable&&React.createElement(Right,null)))),React.createElement("div",{className:styles.bottomRow},item.selectable&&React.createElement(CharacteristicsButton,{characteristics:characteristics})));}}]);}(PureComponent);_defineProperty(SheetItem,"defaultProps",{forwardedRef:null,onClick:function onClick(){},rightComponent:null,selected:false});export default withForwardedRef(SheetItem);

package/product/components/Characteristics/Characteristic/components/SheetItem/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;var button=css({outline:0,textAlign:'left',paddingLeft:0,paddingRight:0,width:'100%',display:'flex',justifyContent:'space-between',flexWrap:'wrap'});var buttonDisabled=css(button,{color:colors.shade4});var bgColor=colors.darkGray;var boxShadowOffset=variables.gap.bigger;var root=css({padding:'16px 0'});var rootSelected=css(root,{background:bgColor,boxShadow:"-".concat(boxShadowOffset,"px 0 0 ").concat(bgColor,", ").concat(boxShadowOffset,"px 0 0 ").concat(bgColor),paddingTop:17,paddingBottom:17,margin:'-1px 0'}).toString();var mainRow=css({display:'flex',flexWrap:'wrap',gap:'4px 8px',justifyContent:'space-between',width:'100%'}).toString();var mainRowRight=css({marginLeft:'auto'}).toString();var bottomRow=css({'&:not(:empty)':{marginTop:8,textAlign:'right'}}).toString();export default{root:root,rootSelected:rootSelected,button:button,buttonDisabled:buttonDisabled,mainRow:mainRow,mainRowRight:mainRowRight,bottomRow:bottomRow};
+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{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{responsiveMediaQuery}from'@shopgate/engage/styles';var colors=themeConfig.colors;var button=css({outline:0,textAlign:'left',paddingLeft:0,paddingRight:0,width:'100%',display:'flex',justifyContent:'space-between',flexWrap:'wrap',color:'var(--color-text-high-emphasis)'});var buttonDisabled=css(button,{color:colors.shade4});var root=css(_defineProperty({padding:'16px 0'},responsiveMediaQuery('>xs',{webOnly:true}),{padding:'8px 16px'}));var rootSelected=css(button,_defineProperty({background:"var(--color-background-accent, ".concat(colors.darkGray,")"),boxShadow:"-16px 0 0 var(--color-background-accent, ".concat(colors.darkGray,"), 16px 0 0 var(--color-background-accent, ").concat(colors.darkGray,")"),margin:'-1px 0',paddingTop:17,paddingBottom:17,fontWeight:500},responsiveMediaQuery('>xs',{webOnly:true}),{margin:0,paddingTop:8,paddingBottom:8,padding:'8px 16px',boxShadow:'none'}));var mainRow=css({display:'flex',flexWrap:'wrap',gap:'4px 8px',justifyContent:'space-between',width:'100%'}).toString();var mainRowRight=css({marginLeft:'auto'}).toString();var bottomRow=css({'&:not(:empty)':{textAlign:'right'}}).toString();export default{root:root,rootSelected:rootSelected,button:button,buttonDisabled:buttonDisabled,mainRow:mainRow,mainRowRight:mainRowRight,bottomRow:bottomRow};

package/product/components/Characteristics/Characteristic/index.js

@@ -1,10 +1,19 @@
-function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}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}});Object.defineProperty(subClass,"prototype",{writable:false});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 _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}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 _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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,{PureComponent,Fragment}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Transition from'react-transition-group/Transition';import Sheet from"./components/Sheet";import styles from"./style";import transition from"../transition";/**
+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 _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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,{PureComponent,Fragment}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Transition from'react-transition-group/Transition';import{ResponsiveContainer,ArrowDropIcon}from'@shopgate/engage/components';import Sheet from"./components/Sheet";import styles from"./style";import transition from"../transition";/**
  * A single characteristic.
- */var Characteristic=/*#__PURE__*/function(_PureComponent){_inherits(Characteristic,_PureComponent);var _super=_createSuper(Characteristic);function Characteristic(){var _this;_classCallCheck(this,Characteristic);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_super.call.apply(_super,[this].concat(args));_defineProperty(_assertThisInitialized(_this),"state",{highlight:false,sheet:false});_defineProperty(_assertThisInitialized(_this),"getButtonLabel",function(defaultLabel){if(!_this.props.selected){return defaultLabel;}var value=_this.props.values.find(function(val){return val.id===_this.props.selected;});return value.label;});_defineProperty(_assertThisInitialized(_this),"handleButtonClick",function(event){event.preventDefault();if(_this.props.disabled){return;}_this.setState({sheet:true});});_defineProperty(_assertThisInitialized(_this),"handleItemSelection",function(valueId){_this.props.select({id:_this.props.id,value:valueId});_this.closeSheet();});_defineProperty(_assertThisInitialized(_this),"closeSheet",function(){_this.setState({sheet:false});if(_this.props.charRef&&_this.props.charRef.current){_this.props.charRef.current.focus();}});_defineProperty(_assertThisInitialized(_this),"removeHighlight",function(){_this.setState({highlight:false});});_defineProperty(_assertThisInitialized(_this),"transitionRenderer",function(state){var _this$context$i18n=_this.context.i18n(),__=_this$context$i18n.__;var _this$props=_this.props,disabled=_this$props.disabled,selected=_this$props.selected,charRef=_this$props.charRef,label=_this$props.label;var translatedLabel=__('product.pick_an_attribute',[label]);var buttonLabel=_this.getButtonLabel(translatedLabel);var classes=classNames(styles.button,_defineProperty({},styles.buttonDisabled,disabled),'theme__product__characteristic');return/*#__PURE__*/React.createElement("div",{role:"button","aria-disabled":disabled,"aria-haspopup":!disabled,tabIndex:0,className:classes,onClick:_this.handleButtonClick,onKeyDown:function onKeyDown(){},ref:charRef,style:transition[state],"data-test-id":label},selected&&/*#__PURE__*/React.createElement("div",{className:"".concat(styles.label," theme__product__characteristic__label")},label),/*#__PURE__*/React.createElement("div",_extends({className:"".concat(styles.selection," theme__product__characteristic__selection")},selected&&{'data-selected':true}),buttonLabel));});return _this;}_createClass(Characteristic,[{key:"UNSAFE_componentWillReceiveProps",value:/**
-   * @param {Object} nextProps The next component props.
-   */function UNSAFE_componentWillReceiveProps(nextProps){this.setState({highlight:nextProps.highlight});}/**
+ */var Characteristic=/*#__PURE__*/function(_PureComponent){function Characteristic(){var _this2;_classCallCheck(this,Characteristic);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,Characteristic,[].concat(args));_defineProperty(_this2,"state",{highlight:false,sheet:false});/**
    * @param {string} defaultLabel The default button label.
    * @return {string}
-   */},{key:"render",value:/**
+   */_defineProperty(_this2,"getButtonLabel",function(defaultLabel){if(!_this2.props.selected){return defaultLabel;}var value=_this2.props.values.find(function(val){return val.id===_this2.props.selected;});return value.label;});/**
+   * @param {Object} event The event object.
+   */_defineProperty(_this2,"handleButtonClick",function(event){event.preventDefault();if(_this2.props.disabled){return;}_this2.setState({sheet:true});});/**
+   * @param {string} valueId The ID of the selected value.
+   */_defineProperty(_this2,"handleItemSelection",function(valueId){_this2.props.select({id:_this2.props.id,value:valueId});_this2.closeSheet();});_defineProperty(_this2,"closeSheet",function(){_this2.setState({sheet:false});});_defineProperty(_this2,"sheetDidClose",function(){if(_this2.props.charRef&&_this2.props.charRef.current){// Focus the element that triggered the CharacteristicsSheet after it closes
+_this2.props.charRef.current.focus();}});_defineProperty(_this2,"removeHighlight",function(){_this2.setState({highlight:false});});/**
+   * Renders the transition contents.
+   * @param {string} state The current transition state.
+   * @returns {JSX}
+   */_defineProperty(_this2,"transitionRenderer",function(state){var _this2$context$i18n=_this2.context.i18n(),__=_this2$context$i18n.__;var _this2$props=_this2.props,disabled=_this2$props.disabled,selected=_this2$props.selected,charRef=_this2$props.charRef,label=_this2$props.label;var translatedLabel=__('product.pick_an_attribute',[label]);var buttonLabel=_this2.getButtonLabel(translatedLabel);var classes=classNames(styles.button,_defineProperty({},styles.buttonDisabled,disabled),'theme__product__characteristic');return React.createElement("div",{role:"button","aria-disabled":disabled,"aria-haspopup":!disabled,tabIndex:0,className:classes,onClick:_this2.handleButtonClick,onKeyDown:function onKeyDown(){},ref:charRef,style:transition[state],"data-test-id":label},selected&&React.createElement("div",{className:"".concat(styles.label," theme__product__characteristic__label")},label),React.createElement("div",_extends({className:"".concat(styles.selection," theme__product__characteristic__selection")},selected&&{'data-selected':true}),buttonLabel),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},React.createElement("div",{className:styles.arrow},React.createElement(ArrowDropIcon,null))));});return _this2;}_inherits(Characteristic,_PureComponent);return _createClass(Characteristic,[{key:"UNSAFE_componentWillReceiveProps",value:/**
+   * @param {Object} nextProps The next component props.
+   */function UNSAFE_componentWillReceiveProps(nextProps){this.setState({highlight:nextProps.highlight});}},{key:"render",value:/**
    * @return {JSX}
-   */function render(){var _this$context$i18n2=this.context.i18n(),__=_this$context$i18n2.__;var _this$props2=this.props,id=_this$props2.id,selected=_this$props2.selected,values=_this$props2.values;var displayLabel=this.props.label;var translatedLabel=__('product.pick_an_attribute',[displayLabel]);return/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement(Transition,{"in":this.state.highlight,timeout:500,onEntered:this.removeHighlight},this.transitionRenderer),/*#__PURE__*/React.createElement(Sheet,{charId:id,items:values,label:translatedLabel,onClose:this.closeSheet,onSelect:this.handleItemSelection,open:this.state.sheet,selectedValue:selected}));}}]);return Characteristic;}(PureComponent);_defineProperty(Characteristic,"contextTypes",{i18n:PropTypes.func});_defineProperty(Characteristic,"defaultProps",{selected:null});export default Characteristic;
+   */function render(){var _this$context$i18n=this.context.i18n(),__=_this$context$i18n.__;var _this$props=this.props,id=_this$props.id,selected=_this$props.selected,values=_this$props.values,charRef=_this$props.charRef;var displayLabel=this.props.label;var translatedLabel=__('product.pick_an_attribute',[displayLabel]);return React.createElement(Fragment,null,React.createElement(Transition,{"in":this.state.highlight,timeout:500,onEntered:this.removeHighlight},this.transitionRenderer),React.createElement(Sheet,{charId:id,contextRef:charRef,items:values,label:translatedLabel,onClose:this.closeSheet,onDidClose:this.sheetDidClose,onSelect:this.handleItemSelection,open:this.state.sheet,selectedValue:selected}));}}]);}(PureComponent);_defineProperty(Characteristic,"contextTypes",{i18n:PropTypes.func});_defineProperty(Characteristic,"defaultProps",{selected:null});export default Characteristic;

package/product/components/Characteristics/Characteristic/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';var button=css({background:themeColors.overlay,display:'flex',flexDirection:'column',justifyContent:'center',minHeight:56,outline:0,padding:'12px 16px',marginBottom:8,transition:'background 250ms ease-in, color 250ms ease-in'}).toString();var buttonDisabled=css({color:themeColors.shade4}).toString();var label=css({fontSize:12,marginTop:-2,marginBottom:4}).toString();var selection=css({fontWeight:500,lineHeight:1.125}).toString();export default{button:button,buttonDisabled:buttonDisabled,label:label,selection:selection};
+import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';var button=css({background:"var(--color-background-accent, ".concat(themeColors.overlay,")"),color:'var(--color-text-high-emphasis)',position:'relative',cursor:'pointer',display:'flex',flexDirection:'column',justifyContent:'center',minHeight:56,outline:0,padding:'12px 16px',marginBottom:8,transition:'background 250ms ease-in, color 250ms ease-in'}).toString();var buttonDisabled=css({color:"".concat(themeColors.shade4," !important")}).toString();var label=css({fontSize:12,marginTop:-2,marginBottom:4}).toString();var selection=css({fontWeight:500,lineHeight:1.125}).toString();var arrow=css({position:'absolute',right:32,fontSize:20}).toString();export default{arrow:arrow,button:button,buttonDisabled:buttonDisabled,label:label,selection:selection};