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

package/components/Footer/helpers.js

@@ -1,75 +0,0 @@
-import{logger,isDev}from'@shopgate/engage/core/helpers';import{DATA_IGNORED}from"./constants";/**
- * Determines if an element is visually present in the DOM.
- * Checks for display, visibility, opacity, and transform-based hiding.
- *
- * @param {HTMLElement} el The element to evaluate.
- * @returns {boolean} True if the element is visually visible; false otherwise.
- */export var isElementVisible=function isElementVisible(el){if(!el||!(el instanceof HTMLElement))return false;var style=window.getComputedStyle(el);if(style.display==='none'||style.visibility==='hidden'||parseFloat(style.opacity)===0)return false;var transform=style.transform;if(transform&&transform!=='none'){var match=transform.match(/translateY\((-?\d+)(px)?\)/);if(match){var translateY=parseInt(match[1],10);if(translateY>window.innerHeight)return false;}}return true;};/**
- * Finds the widest nested element inside a given container that has a background color
- * explicitly set via CSS (ignores transparent, inherited, or unset values), and returns
- * that background color.
- *
- * @param {HTMLElement} container The parent element to search within. Must be an actual DOM node.
- * @returns {string|null} The detected background color (e.g., "rgb(255, 0, 0)")
- */export var getElementBackgroundColor=function getElementBackgroundColor(container){if(!container){return null;}var widestElement=null;var maxWidth=-Infinity;/**
-   * Recursively traverses the DOM tree starting from the given node,
-   * tracking the widest element that has a background color explicitly set via CSS.
-   *
-   * @param {HTMLElement} node The DOM node to begin traversal from.
-   */function walk(node){if(!(node instanceof HTMLElement))return;var style=window.getComputedStyle(node);var bgColor=style.backgroundColor;var isStyledColor=bgColor&&!['transparent','rgba(0, 0, 0, 0)','inherit','initial','unset'].includes(bgColor);var rect=node.getBoundingClientRect();if(isElementVisible(node)&&isStyledColor&&rect.width>maxWidth){maxWidth=rect.width;widestElement=node;}Array.from(node.children).forEach(walk);}walk(container);if(widestElement){var result=window.getComputedStyle(widestElement).backgroundColor;return result;}return null;};/**
- * Checks if any of the provided class names reference the custom property in any loaded stylesheet.
- *
- * @param {string[]} classList Array of class names to check.
- * @param {string} customProp The custom property to search for in the stylesheets.
- * @returns {boolean} True if any class rule uses the custom property.
- */var classNamesUseCustomProp=function classNamesUseCustomProp(classList,customProp){var allRules=Array.from(document.styleSheets).filter(function(sheet){try{return sheet.cssRules;}catch(e){return false;// Skip cross-origin or restricted stylesheets
-}}).flatMap(function(sheet){return Array.from(sheet.cssRules||[]);});// eslint-disable-next-line no-restricted-syntax
-var _iteratorNormalCompletion=true;var _didIteratorError=false;var _iteratorError=undefined;try{for(var _iterator=allRules[Symbol.iterator](),_step;!(_iteratorNormalCompletion=(_step=_iterator.next()).done);_iteratorNormalCompletion=true){var rule=_step.value;// eslint-disable-next-line no-continue
-if(!rule.selectorText||!rule.cssText.includes("var(".concat(customProp,")")))continue;// eslint-disable-next-line no-restricted-syntax
-var _iteratorNormalCompletion2=true;var _didIteratorError2=false;var _iteratorError2=undefined;try{for(var _iterator2=classList[Symbol.iterator](),_step2;!(_iteratorNormalCompletion2=(_step2=_iterator2.next()).done);_iteratorNormalCompletion2=true){var className=_step2.value;if(rule.selectorText.includes(".".concat(className))){return true;}}}catch(err){_didIteratorError2=true;_iteratorError2=err;}finally{try{if(!_iteratorNormalCompletion2&&_iterator2["return"]!=null){_iterator2["return"]();}}finally{if(_didIteratorError2){throw _iteratorError2;}}}}}catch(err){_didIteratorError=true;_iteratorError=err;}finally{try{if(!_iteratorNormalCompletion&&_iterator["return"]!=null){_iterator["return"]();}}finally{if(_didIteratorError){throw _iteratorError;}}}return false;};/**
- * Checks if a single element uses the custom property via inline styles or class-based rules.
- *
- * @param {HTMLElement} el The element to check.
- * @param {string} customProp The CSS custom property to search for.
- * @returns {boolean} True if the element uses the custom property.
- */var elementUsesCustomProp=function elementUsesCustomProp(el,customProp){var _el$getAttribute;if(!(el instanceof Element))return false;var styleAttr=(_el$getAttribute=el.getAttribute)===null||_el$getAttribute===void 0?void 0:_el$getAttribute.call(el,'style');if(styleAttr&&styleAttr.includes("var(".concat(customProp,")"))){return true;}var classList=Array.from(el.classList||[]);return classList.length>0&&classNamesUseCustomProp(classList,customProp);};/**
- * Checks if an element or any of its descendants use the custom property.
- *
- * @param {HTMLElement} el The root element to inspect.
- * @param {string} customProp The CSS custom property to look for.
- * @returns {boolean} True if the element or any descendant uses the custom property.
- */var elementOrDescendantsUseCustomProp=function elementOrDescendantsUseCustomProp(el,customProp){// Check if the element itself uses the custom property
-if(elementUsesCustomProp(el,customProp))return true;var descendants=el.querySelectorAll('*');// eslint-disable-next-line no-restricted-syntax
-var _iteratorNormalCompletion3=true;var _didIteratorError3=false;var _iteratorError3=undefined;try{for(var _iterator3=descendants[Symbol.iterator](),_step3;!(_iteratorNormalCompletion3=(_step3=_iterator3.next()).done);_iteratorNormalCompletion3=true){var node=_step3.value;// eslint-disable-next-line no-continue
-if(!(node instanceof Element))continue;if(elementUsesCustomProp(node,customProp))return true;}}catch(err){_didIteratorError3=true;_iteratorError3=err;}finally{try{if(!_iteratorNormalCompletion3&&_iterator3["return"]!=null){_iterator3["return"]();}}finally{if(_didIteratorError3){throw _iteratorError3;}}}return false;};/**
- * Returns footer entries that do NOT have safe area insets applied,
- * either on themselves or in any of their descendants.
- *
- * @param {HTMLElement[]} footerElements The footer elements to check.
- * @returns {HTMLElement[]} An array of direct children that do not use safe area insets.
- */var getFooterEntriesWithoutSafeAreaInsets=function getFooterEntriesWithoutSafeAreaInsets(footerElements){return footerElements.filter(function(child){return!elementOrDescendantsUseCustomProp(child,'--safe-area-inset-bottom');});};/**
- * Searches for footer elements that do not have safe area insets applied, and adds a fallback.
- * @param {HTMLElement} footerEl The footer element whose children are to be checked.
- */export var handleSafeAreaInsets=function handleSafeAreaInsets(footerEl){if(!footerEl||!(footerEl instanceof HTMLElement)){return;}var directChildren=Array.from(footerEl.children);// Filter out elements that where already handled before
-var childrenToInspect=directChildren.filter(function(child){return child.getAttribute('data-has-safe-area-inset')!=='true';}).filter(function(child){return child.getAttribute(DATA_IGNORED)!=='true';});// Detect footer elements without safe area insets
-var childrenWithoutInsets=getFooterEntriesWithoutSafeAreaInsets(childrenToInspect);// Apply fallback and mark the elements as handled
-childrenWithoutInsets.forEach(function(child){child.style.setProperty('padding-bottom','var(--safe-area-inset-bottom)');child.style.setProperty('background-color',getElementBackgroundColor(child));child.setAttribute('data-has-safe-area-inset','true');});if(isDev&&childrenWithoutInsets.length>0){logger.warn('Footer elements without safe area insets detected. Please use the "--safe-area-inset-bottom" CSS custom property for bottom insets.',childrenWithoutInsets);}// Mark all other elements which already had insets as handled
-directChildren.filter(function(child){return childrenWithoutInsets.indexOf(child)===-1;}).forEach(function(child){if(!child.hasAttribute('data-has-safe-area-inset')){child.setAttribute('data-has-safe-area-inset','true');}});};var style=document.documentElement.style;/**
- * Update the footer height custom property
- * @param {number} height height
- */export var updateFooterHeight=function updateFooterHeight(height){// The TabBar is positioned with `position: fixed`, so it doesn’t contribute to the measured
-// height of the Footer. Additionally, it’s sometimes animated in/out, which makes dynamic
-// measurement via JavaScript more complex and error-prone.
-//
-// To simplify everything, we include the --tabbar-height CSS custom property to the calculation
-// of the --footer-height value.
-var footerHeight="max(".concat(height,"px, var(--tabbar-height, 0px))");if(style.getPropertyValue('--footer-height')!==footerHeight){style.setProperty('--footer-height',footerHeight);}// The View component wraps every app page and applies a bottom offset to centrally manage
-// safe area insets across screens.
-//
-// If the measured footer height is > 0px, it means the footer is rendering content that already
-// accounts for the safe area, so no additional offset is needed.
-//
-// If the measured footer height is 0px, the footer is either empty or only contains the tab bar
-// (which is measured via the CSS variable --footer-height). In that case, we still need to apply
-// an offset equal to the larger of the bottom safe area inset or the tab bar height.
-var pageContentOffset=height===0?'max(var(--footer-height), var(--safe-area-inset-bottom))':'0px';if(style.getPropertyValue('--page-content-offset-bottom')!==pageContentOffset){style.setProperty('--page-content-offset-bottom',pageContentOffset);}};

package/components/Form/Builder/ElementMultiSelect.js

@@ -1,6 +0,0 @@
-import _camelCase from"lodash/camelCase";import React,{memo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Select from'@shopgate/pwa-ui-shared/Form/Select';import SelectContextChoices from'@shopgate/pwa-ui-shared/Form/SelectContextChoices';import ResponsiveContainer from"../../ResponsiveContainer/ResponsiveContainer";import FormHelper from"./FormHelper";/**
- * Takes an element and renders it, if the type matches
- * @param {Object} props Component props.
- * @param {Object} props.element The data of the element to be rendered
- * @returns {JSX}
- */var ElementMultiSelect=function ElementMultiSelect(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible,formName=props.formName;if(!visible){return null;}var values=[].concat(value).filter(Boolean);return React.createElement("div",{className:classNames(_camelCase(name),'engage__form-multi-select','formBuilderField',{validationError:!!errorText})},React.createElement(ResponsiveContainer,{appAlways:true,breakpoint:"xs"},React.createElement(Select,{name:name,required:element===null||element===void 0?void 0:element.required,label:element.label,placeholder:element.placeholder,value:values,options:element.options,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false,showErrorText:false,disabled:element.disabled,multiple:true,"aria-invalid":!!errorText,"aria-describedby":errorText.length>0?"ariaError-".concat(name):null})),React.createElement(ResponsiveContainer,{webOnly:true,breakpoint:">xs"},React.createElement(SelectContextChoices,{label:element.label,placeholder:element.placeholder,value:values,options:element.options,onChange:element.handleChange,errorText:errorText,showErrorText:false})),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));};ElementMultiSelect.defaultProps={value:'',visible:true};export default memo(ElementMultiSelect);

package/components/Form/Builder/ElementPhoneNumber.js

@@ -1,20 +0,0 @@
-import _isEqual from"lodash/isEqual";import _upperCase from"lodash/upperCase";import _camelCase from"lodash/camelCase";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 _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;}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*as React from'react';import PropTypes from'prop-types';import classnames from'classnames';import{i18n}from'@shopgate/engage/core/helpers';import{parsePhoneNumber}from'react-phone-number-input';import PhoneInputCountrySelect from'react-phone-number-input/mobile';import PhoneInput from'react-phone-number-input/input-mobile';import{getCountries}from'react-phone-number-input/input';import en from'react-phone-number-input/locale/en';import de from'react-phone-number-input/locale/de';import es from'react-phone-number-input/locale/es';import fr from'react-phone-number-input/locale/fr';import pt from'react-phone-number-input/locale/pt';import flags from'react-phone-number-input/flags';import{useCountriesNames}from'@shopgate/engage/i18n';import{css}from'glamor';import{themeConfig}from'@shopgate/engage';import Label from'@shopgate/pwa-ui-shared/TextField/components/Label';import FormHelper from"./FormHelper";var variables=themeConfig.variables,colors=themeConfig.colors;var styles={formField:css({width:'100%',marginBottom:'0px !important'}).toString(),phoneField:css({position:'relative',width:'100%',paddingTop:variables.gap.big*0.75,paddingBottom:variables.gap.big*1.25,' input.PhoneInputInput':{outline:'none',fontSize:'1rem',lineHeight:'1.1875rem',borderRadius:0,paddingBottom:variables.gap.xsmall*1.5,borderBottom:"1px solid ".concat(colors.shade12),'&:focus':{borderBottom:"2px solid ".concat(colors.primary),paddingBottom:variables.gap.xsmall*1.5-1}}}),phoneFieldError:css({' input.PhoneInputInput':{borderBottom:"2px solid var(--color-state-alert, ".concat(colors.error,")"),paddingBottom:variables.gap.xsmall*1.5-1}}).toString(),phoneFieldErrorText:css({position:'absolute',width:'100%',bottom:'-10px',fontSize:'0.75rem',lineHeight:0.875,color:"var(--color-state-alert, ".concat(colors.error,")"),overflow:'hidden',whiteSpace:'nowrap',textOverflow:'ellipsis',marginLeft:'38px'})};var builtInCountries=getCountries();var locales={en:en,de:de,es:es,fr:fr,pt:pt};/**
- * Renders the reserve form phone input maybe with country selection.
- * @param {Object} props The component props.
- * @returns {JSX.Element}
- */var UnwrappedElementPhoneNumber=React.memo(function(props){var element=props.element,name=props.name,errorText=props.errorText,value=props.value,visible=props.visible,formName=props.formName;var label=element.label,handleChange=element.handleChange,_element$disabled=element.disabled,disabled=_element$disabled===void 0?false:_element$disabled,_element$required=element.required,required=_element$required===void 0?false:_element$required,_element$config=element.config,_element$config2=_element$config===void 0?{}:_element$config,_element$config2$supp=_element$config2.supportedCountries,supportedCountries=_element$config2$supp===void 0?[]:_element$config2$supp,_element$config2$coun=_element$config2.countrySortOrder,countrySortOrder=_element$config2$coun===void 0?[]:_element$config2$coun,_element$config2$user=_element$config2.userLocation,userLocation=_element$config2$user===void 0?{}:_element$config2$user;var _React$useState=React.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isFocused=_React$useState2[0],setIsFocused=_React$useState2[1];// Maps available countries to correct format.
-var countries=React.useMemo(function(){if(supportedCountries.length===0){return builtInCountries;}return supportedCountries.map(function(country){var pieces=country.split('_');return _upperCase(pieces[0]);});},[supportedCountries]);var countriesNames=useCountriesNames(countries,locales);// Get labels for supported countries.
-var labels=React.useMemo(function(){var output={};if(!countries){return output;}countries.forEach(function(key){var pieces=key.split('_');output[pieces[0]]=countriesNames[key];});return output;},[countries,countriesNames]);var defaultCountry=React.useMemo(function(){var country;if(value){// Try to parse the value to determine a country
-var phoneNumber=parsePhoneNumber(value||'');if(phoneNumber&&phoneNumber.country){country=phoneNumber.country;}}if(!country&&userLocation){// Take the country from the user location if present
-country=userLocation.country;}if(!country){// If no country could be determined yet, take the country from the language
-var _i18n$getLang$split=i18n.getLang().split('-');var _i18n$getLang$split2=_slicedToArray(_i18n$getLang$split,2);country=_i18n$getLang$split2[1];}// Check if the determined country is included inside the available countries
-if(!countries.includes(country)){if((countrySortOrder===null||countrySortOrder===void 0?void 0:countrySortOrder.length)&&countries.includes(countrySortOrder[0])){// Take first country if the sort order list if present
-var _countrySortOrder=_slicedToArray(countrySortOrder,1);country=_countrySortOrder[0];}else{// Take first country from the list
-var _countries=_slicedToArray(countries,1);country=_countries[0];}}return country;},[countries,countrySortOrder,userLocation,value]);var countryOptionsOrder=React.useMemo(function(){/**
-     * To avoid component errors remove countries from the sort order array that are not part
-     * of the counties array.
-     */var sanitizedCountrySortOrder=countrySortOrder.filter(function(countryCode){return countries.includes(countryCode);});var countryListsEqual=_isEqual([].concat(countries).sort(),[].concat(sanitizedCountrySortOrder).sort());/**
-     * When list with supported countries has the same entries as the country sort order, we don't
-     * need to add a separator to the countryOptionsOrder array since the country picker lists
-     * will not show a section with unordered countries.
-     */return sanitizedCountrySortOrder.length?[].concat(sanitizedCountrySortOrder,countryListsEqual?[]:['|']):[];},[countries,countrySortOrder]);var hasCountrySelect=React.useMemo(function(){return countries.length>1;},[countries.length]);var handleChangeWrapped=React.useCallback(function(phoneValue){handleChange(phoneValue,{target:{name:name}});},[handleChange,name]);var phoneClasses=classnames('textField',_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({simpleInput:!hasCountrySelect},_camelCase(name),true),"phonePicker",true),"phonePickerError",!!errorText),"validationError",!!errorText),"phonePickerFocused",isFocused),styles.phoneField,true),styles.phoneFieldError,!!errorText));if(!visible){return null;}var Component=hasCountrySelect?PhoneInputCountrySelect:PhoneInput;return React.createElement("div",{className:classnames('formBuilderField','engage__form-phone-number',{validationError:!!errorText})},React.createElement("div",{className:phoneClasses},React.createElement(Label,{label:label,isFocused:isFocused,isFloating:isFocused||!!value}),React.createElement(Component,_extends({defaultCountry:defaultCountry,name:name,value:value||'',onChange:handleChangeWrapped,onFocus:function onFocus(){return setIsFocused(true);},onBlur:function onBlur(){return setIsFocused(false);},disabled:disabled,required:required,"aria-invalid":!!errorText,"aria-describedby":errorText.length>0?"ariaError-".concat(name):null},hasCountrySelect?{countryOptionsOrder:countryOptionsOrder,addInternationalOption:false,flags:flags,countries:countries,labels:labels}:{className:'PhoneInputInput'}))),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));});UnwrappedElementPhoneNumber.defaultProps={value:'',visible:true};export default UnwrappedElementPhoneNumber;

package/components/Form/Builder/FormHelper.js

@@ -1,5 +0,0 @@
-import React from'react';import PropTypes from'prop-types';import ErrorTextCmp from'@shopgate/pwa-ui-shared/FormElement/components/ErrorText';import{SurroundPortals}from'@shopgate/engage/components';import{sanitizePortalName}from"./helpers/common";/**
- * Component for error texts
- * @param {Object} props Component props.
- * @returns {JSX.Element}
- */var FormHelper=function FormHelper(_ref){var errorText=_ref.errorText,element=_ref.element,formName=_ref.formName,elementName=_ref.elementName;return React.createElement("div",{className:"formHelper"},React.createElement(SurroundPortals,{portalName:"".concat(sanitizePortalName(formName),".").concat(sanitizePortalName(element.id),".formHelper"),portalProps:{formName:formName,element:element,errorText:errorText}},!!errorText&&React.createElement(ErrorTextCmp,{errorText:errorText,translate:false,elementName:elementName,ariaHidden:true})));};FormHelper.defaultProps={errorText:null,elementName:null};export default FormHelper;

package/components/Form/Builder/helpers/common.js

@@ -1,6 +0,0 @@
-/**
- * Takes a string and converts it to a part to be used in a portal name
- * @package FormBuilder
- * @param {string} s The string to be sanitized
- * @return {string}
- */export var sanitizePortalName=function sanitizePortalName(s){return s.replace(/[\\._]/,'-');};

package/components/Form/Builder/stylePresets.js

@@ -1 +0,0 @@
-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{themeConfig}from'@shopgate/engage';import{responsiveMediaQuery}from'@shopgate/engage/styles';var colors=themeConfig.colors;export var TWO_COLUMN_LAYOUT=_defineProperty({},responsiveMediaQuery('>=md',{webOnly:false}),{display:'flex',flexDirection:'row',flexWrap:'wrap',margin:-8,marginTop:16,marginBottom:8,'>div':{flex:'1 1 50%',padding:'0 8px',maxWidth:'50%'},'>.phonePicker':{marginLeft:8,marginRight:8,flexBasis:'calc(50% - 16px)'}});export var OUTLINED_FORM_FIELDS={' .formHelper':{minHeight:32,' .errorText':{position:'relative',textOverflow:'unset',whiteSpace:'unset',lineHeight:'15px',bottom:'unset',padding:'8px 8px 8px 16px'}},' .formBuilderField':{' .textField, .formElement:not(.radioGroup):not(.checkbox), .phonePicker':{marginBottom:'unset',paddingBottom:'unset'}},' .radioGroup + .formHelper, .checkbox + .formHelper':{minHeight:16},' .checkbox':{paddingBottom:0},' .textField, .formElement:not(.radioGroup):not(.checkbox), .phonePicker':{paddingBottom:8,background:"var(--color-background-accent, ".concat(colors.shade8,")"),padding:0,marginBottom:32,borderTopLeftRadius:4,borderTopRightRadius:4,borderBottom:"1px solid ".concat(colors.shade12)},' .phonePickerError':{borderBottom:"2px solid var(--color-state-alert, ".concat(colors.error,")")},' .phonePickerFocused:not(.phonePickerError)':{borderBottom:'2px solid var(--color-primary)'},' .formElement:not(.radioGroup) label':{paddingLeft:24,color:'var(--color-text-low-emphasis)',transform:'translate3d(0, -18px, 0) scale3d(0.75, 0.75, 0.75)'},' .textField label':{paddingLeft:17,color:'var(--color-text-low-emphasis)','.floating':{transform:'translate3d(3px, -18px, 0) scale3d(0.75, 0.75, 0.75)'}},' .formElement:not(.radioGroup) select, .formElement .info-field':{paddingLeft:16,color:'var(--color-text-high-emphasis)'},' .formElement:not(.radioGroup):not(.checkbox) svg':{marginTop:8,right:8},' .formElement:not(.radioGroup) .placeholder':{paddingLeft:20,color:'var(--color-text-low-emphasis)'},' .formElement.disabled, .textField.disabled':{' input, select, svg':{opacity:0.28},' .label':{opacity:0.6}},' .textField input':{paddingLeft:16,color:'var(--color-text-high-emphasis)'},' .underline':{marginBottom:0,borderBottom:'none'},' .errorText':{bottom:-20,paddingLeft:16},' .phonePicker':{paddingTop:24,paddingBottom:2},' .textField.phonePicker:not(.simpleInput) .label':{paddingLeft:70,'&.floating':{paddingLeft:0}},' .textField.phonePicker:not(.simpleInput) input':{paddingLeft:0},' .phonePicker > .PhoneInputInput':{paddingLeft:16,width:'100%'},' .phonePicker .PhoneInputInput':{borderBottom:'none',color:'var(--color-text-high-emphasis)','&:focus':{borderBottom:'none'},'::placeholder':{color:'var(--color-text-low-emphasis)'}},' .phonePicker .errorText':{marginLeft:-8},' .PhoneInputCountryIcon':{marginBottom:8,marginLeft:16},' .PhoneInputCountrySelectArrow':{marginRight:6,marginLeft:10,marginBottom:8},' .placeholder':{color:colors.shade12}};

package/components/Logo/connector.js

@@ -1,4 +0,0 @@
-import{connect}from'react-redux';import{hasWebBridge,makeGetShopSettingByKey,SHOP_SETTING_SHOW_SHOP_LOGO_IN_APP,SHOP_SETTING_SHOW_SHOP_LOGO_IN_WEB}from'@shopgate/engage/core';/**
- * Creates the mapStateToProps connector function.
- * @returns {Function}
- */var makeMapStateToProps=function makeMapStateToProps(){var getShowShopLogoInApp=makeGetShopSettingByKey(SHOP_SETTING_SHOW_SHOP_LOGO_IN_APP);var getShowShopLogoInWeb=makeGetShopSettingByKey(SHOP_SETTING_SHOW_SHOP_LOGO_IN_WEB);return function(state){return{showLogo:hasWebBridge()?getShowShopLogoInWeb(state):getShowShopLogoInApp(state)};};};export default connect(makeMapStateToProps);

package/components/Menu/components/Item/index.js

@@ -1,8 +0,0 @@
-import React,{useCallback}from'react';import PropTypes from'prop-types';import compose from'lodash/fp/compose';import Glow from'@shopgate/pwa-ui-shared/Glow';import{getItemClass}from"./style";/**
- * A delay in ms after that the closeMenu callback gets triggered.
- * @type {number}
- */var CLOSE_DELAY=250;/**
- * The Context Menu Item component.
- * @param {Object} props The component props.
- * @returns {JSX.Element}
- */var Item=function Item(_ref){var children=_ref.children,closeMenu=_ref.closeMenu,onClick=_ref.onClick;var handleClick=compose(onClick,function(){return setTimeout(closeMenu,CLOSE_DELAY);});var handleKeyPress=useCallback(function(event){if(event.key==='Enter'||event.key===' '){event.preventDefault();handleClick(event);}},[handleClick]);return React.createElement(Glow,null,React.createElement("div",{className:getItemClass(),onClick:handleClick,role:"button","data-test-id":"contextMenuButton",onKeyDown:handleKeyPress,tabIndex:0},children));};Item.defaultProps={children:null,closeMenu:function closeMenu(){},onClick:function onClick(){}};export default Item;

package/components/Menu/components/Item/style.js

@@ -1,4 +0,0 @@
-import{css}from'glamor';import Color from'color';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{getCSSCustomProp}from'@shopgate/engage/styles';/**
- * Get the item class.
- * @returns {string}
- */export var getItemClass=function getItemClass(){var background=themeConfig.colors.shade8;var customPropColor=getCSSCustomProp('--color-primary');if(customPropColor){background=Color(customPropColor).alpha(0.04);}return css({position:'relative',whiteSpace:'nowrap',padding:"".concat(themeConfig.variables.gap.big*0.875,"px ").concat(themeConfig.variables.gap.big*1.375,"px"),lineHeight:1,zIndex:1,cursor:'pointer',':hover':{background:background}}).toString();};

package/components/Menu/components/Position/index.js

@@ -1,16 +0,0 @@
-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 _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;}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 clamp from'lodash/clamp';import styles from"./style";/**
- * The Context Menu Position component.
- */var Position=/*#__PURE__*/function(_Component){/**
-   * The Constructor.
-   * @param {Object} props The component props.
-   */function Position(props){var _this2;_classCallCheck(this,Position);_this2=_callSuper(this,Position,[props]);_this2.elementRef=null;return _this2;}/**
-   * Calculate and apply the correct menu position after mounting.
-   */_inherits(Position,_Component);return _createClass(Position,[{key:"componentDidMount",value:function componentDidMount(){var offset=this.props.offset;// Get ref to the actual child DOM element and calculate bounding rect.
-var _this$elementRef$chil=_slicedToArray(this.elementRef.childNodes,1),child=_this$elementRef$chil[0];var bounds=child.getBoundingClientRect();// Get window dimensions
-var width=window.innerWidth;var height=window.innerHeight;// Get the outer gap from styles
-var gap=styles.outerGap;// Calculate clamped menu position
-var left=clamp(offset.left,0,width-bounds.width-gap*2);var top=clamp(offset.top-gap,0,height-bounds.height-gap*2);// Assign position directly w/o re-rendering the component
-this.elementRef.style.left="".concat(left,"px");this.elementRef.style.top="".concat(top,"px");}/**
-   * Renders the component.
-   * @returns {JSX}
-   */},{key:"render",value:function render(){var _this3=this;return React.createElement("div",{ref:function ref(_ref){_this3.elementRef=_ref;},className:styles.container},this.props.children);}}]);}(Component);_defineProperty(Position,"defaultProps",{children:null,offset:{top:0,left:0}});export default Position;

package/components/Menu/components/Position/style.js

@@ -1 +0,0 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var outerGap=themeConfig.variables.gap.small;var container=css({position:'absolute',margin:outerGap}).toString();export default{container:container,outerGap:outerGap};

package/components/Menu/index.js

@@ -1,12 +0,0 @@
-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,Children}from'react';import PropTypes from'prop-types';import{ConnectedReactPortal}from'@shopgate/engage/components';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import Position from"./components/Position";import Item from"./components/Item";import styles from"./style";/**
- * The Menu component.
- */var Menu=/*#__PURE__*/function(_Component){function Menu(){var _this2;_classCallCheck(this,Menu);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,Menu,[].concat(args));/**
-   * Handles any menu toggling interactions.
-   * @param {Object} [e] Event
-   */_defineProperty(_this2,"handleMenuToggle",function(e){var _this2$props$contextR;if(e){e.preventDefault();e.stopPropagation();}if((_this2$props$contextR=_this2.props.contextRef)===null||_this2$props$contextR===void 0?void 0:_this2$props$contextR.current){_this2.props.onClose();}});return _this2;}_inherits(Menu,_Component);return _createClass(Menu,[{key:"offset",get:/**
-   * Gets the offset of the DOM element.
-   * @returns {Object}
-   */function get(){var _this$props$contextRe;if((_this$props$contextRe=this.props.contextRef)===null||_this$props$contextRe===void 0?void 0:_this$props$contextRe.current){var bounds=this.props.contextRef.current.getBoundingClientRect();return{height:bounds.height,width:bounds.width,left:bounds.left,right:bounds.right,bottom:bounds.bottom,top:bounds.top+bounds.height};}return{top:0,left:0};}},{key:"render",value:/**
-   * Renders the component.
-   * @returns {JSX}
-   */function render(){var _this$props=this.props,children=_this$props.children,isOpen=_this$props.isOpen,onClose=_this$props.onClose;return React.createElement(ConnectedReactPortal,{isOpened:isOpen},React.createElement("div",{className:styles.overlay},React.createElement(Backdrop,{isVisible:true,level:0,opacity:0,onClick:onClose}),React.createElement(Position,{offset:this.offset},React.createElement("div",{className:styles.menu},Children.map(children,function(child){if(!child){return null;}return React.cloneElement(child,{closeMenu:onClose});})))));}}]);}(Component);_defineProperty(Menu,"Item",Item);_defineProperty(Menu,"defaultProps",{children:null,contextRef:null,isOpen:false,onClose:function onClose(){}});export default Menu;

package/components/Menu/style.js

@@ -1 +0,0 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var container=css({position:'relative'}).toString();var button=css({display:'block',fontSize:'1.5rem',outline:0,padding:0}).toString();var disabled=css({cursor:'none'}).toString();var overlay=css({position:'fixed',top:0,right:0,bottom:0,left:0,zIndex:10}).toString();var menu=css({position:'absolute',top:0,left:0,padding:"".concat(themeConfig.variables.gap.small,"px 0"),minWidth:130,background:themeConfig.colors.light,borderRadius:2,boxShadow:themeConfig.shadows.contextMenu}).toString();export default{container:container,button:button,menu:menu,overlay:overlay,disabled:disabled};

package/components/MessageBar/MessageBar.js

@@ -1,9 +0,0 @@
-import{hot}from'react-hot-loader/root';import*as React from'react';import PropTypes from'prop-types';import classnames from'classnames';import{i18n,errorBehavior}from'@shopgate/engage/core/helpers';import StopIcon from'@shopgate/pwa-ui-shared/icons/StopIcon';import InfoIcon from'@shopgate/pwa-ui-shared/icons/InfoIcon';import WarningIcon from'@shopgate/pwa-ui-shared/icons/WarningIcon';import*as styles from"./MessageBar.style";var iconMapping={info:InfoIcon,warning:WarningIcon,error:StopIcon};/**
- * The MessageBar component.
- * @param {Object} props The component props.
- * @property {Array} props.messages The message content.
- * @property {Object} props.classNames Styling.
- * @property {boolean} props.raised whether to use specific styling.
- * @property {boolean} props.showIcons whether to show icons.
- * @return {JSX.Element}
- */var MessageBar=function MessageBar(_ref){var messages=_ref.messages,classNames=_ref.classNames,raised=_ref.raised,showIcons=_ref.showIcons;var containerClass=React.useMemo(function(){if(raised){return classnames(styles.containerRaised,classNames.containerRaised);}return classnames(styles.container,classNames.container);},[classNames.container,classNames.containerRaised,raised]);return React.createElement("div",{className:containerClass,role:messages.length>0?'alert':null},messages.map(function(item){var _item$type=item.type,type=_item$type===void 0?'info':_item$type,message=item.message,_item$messageParams=item.messageParams,messageParams=_item$messageParams===void 0?null:_item$messageParams,_item$additionalParam=item.additionalParams,additionalParams=_item$additionalParam===void 0?null:_item$additionalParam,_item$translated=item.translated,translated=_item$translated===void 0?false:_item$translated;var _item$icon=item.icon,Icon=_item$icon===void 0?null:_item$icon;if(Icon===null&&showIcons){Icon=iconMapping[type];}var messageOutput=!translated?errorBehavior.getErrorMessage(message,messageParams||additionalParams):message;return React.createElement("div",{key:"".concat(type,"-").concat(message),className:classnames(styles[type]?styles[type]():null,classNames.message,Icon?styles.withIcon:null),"aria-live":"assertive","aria-atomic":"true"},Icon&&React.createElement(Icon,{className:classnames(classNames.icon,styles.icon)}),React.createElement("span",{className:"sr-only"},"".concat(i18n.text("cart.message_type_".concat(type)),": ").concat(messageOutput)),React.createElement("span",{"aria-hidden":true,className:Icon?styles.messageToIcon:null},messageOutput));}));};MessageBar.defaultProps={classNames:{container:null,containerRaised:null,message:null,icon:null},raised:false,showIcons:false};export default hot(React.memo(MessageBar));

package/components/MessageBar/MessageBar.style.js

@@ -1,11 +0,0 @@
-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 _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 Color from'color';import{responsiveMediaQuery,getCSSCustomProp}from'@shopgate/engage/styles';import{themeColors,themeVariables}from'@shopgate/pwa-common/helpers/config';var containerBase=_defineProperty({background:themeColors.background,display:'flex',flexDirection:'column',flexShrink:0,overflow:'hidden'},responsiveMediaQuery('>xs',{webOnly:true}),{fontWeight:'normal',border:'none',borderRadius:'inherit',margin:themeVariables.gap.big,boxShadow:'none',background:'none'});export var container=css(containerBase).toString();export var containerRaised=css(containerBase,{borderRadius:'0 0 5px 5px',boxShadow:'0px 4px 4px rgba(0, 0, 0, 0.25)',zIndex:10}).toString();var messageBase=_defineProperty({padding:"".concat(themeVariables.gap.big,"px ").concat(themeVariables.gap.big,"px"),fontSize:'0.875rem',lineHeight:1.3,fontWeight:500,':not(:last-child)':{marginBottom:themeVariables.gap.small*0.5},' > svg':{fontSize:'1.5rem !important'}},responsiveMediaQuery('>xs',{webOnly:true}),{padding:"".concat(themeVariables.gap.small*1.5,"px ").concat(themeVariables.gap.big,"px"),fontWeight:'normal',border:'1px solid',borderRadius:4,':not(:last-child)':{marginBottom:themeVariables.gap.small}});/**
- * @param {string|Object} sourceColor The source color.
- * @param {string} [textColor] AN optional text color.
- * @returns {Object}
- */var getMessageColors=function getMessageColors(sourceColor,textColor){var background=Color(sourceColor).fade(0.9);var color=textColor||'var(--color-text-height-emphasis)';var borderColor=sourceColor;return{background:background,color:color,borderColor:borderColor};};/**
- * @returns {string}
- */export var info=function info(){return css(messageBase,_defineProperty({background:"var(--color-secondary, ".concat(themeColors.accent,")"),color:"var(--color-secondary-contrast, ".concat(themeColors.accentContrast,")")},responsiveMediaQuery('>xs',{webOnly:true}),_extends({},getMessageColors(getCSSCustomProp('--color-secondary')||themeColors.accent),{' > svg':{color:"var(--color-secondary, ".concat(themeColors.accent,")")}}))).toString();};/**
- * @returns {string}
- */export var error=function error(){return css(messageBase,_defineProperty({background:themeColors.error,color:themeColors.light},responsiveMediaQuery('>xs',{webOnly:true}),_extends({},getMessageColors(themeColors.error),{' > svg':{color:themeColors.error}}))).toString();};/**
- * @returns {string}
- */export var warning=function warning(){return css(messageBase,_defineProperty({background:themeColors.warning,color:themeColors.light},responsiveMediaQuery('>xs',{webOnly:true}),_extends({},getMessageColors(themeColors.warning),{' > svg':{color:themeColors.warning}}))).toString();};export var withIcon=css({display:'flex',minWidth:'100%',alignItems:'center'}).toString();export var icon=css({flexGrow:0,flexShrink:0}).toString();export var messageToIcon=css({flexGrow:1,paddingLeft:themeVariables.gap.big});

package/components/QuantityLabel/QuantityLabel.js

@@ -1,4 +0,0 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import{formatFloat}from"../QuantityInput/helper";/**
- * @param {Object} props The component props.
- * @returns {JSX}
- */var QuantityLabel=function QuantityLabel(_ref){var value=_ref.value,maxDecimals=_ref.maxDecimals,unit=_ref.unit,className=_ref.className;var output=useMemo(function(){var formatted=formatFloat(value,maxDecimals);return unit?"".concat(formatted," ").concat(unit):formatted;},[maxDecimals,unit,value]);return React.createElement("span",{className:className},output);};QuantityLabel.defaultProps={className:'',maxDecimals:2,unit:null};export default QuantityLabel;

package/components/QuantityLabel/index.js

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

package/components/Radio/Radio.js

@@ -1,5 +0,0 @@
-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;}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{hot}from'react-hot-loader/root';import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import{css}from'glamor';import CheckedIcon from'@shopgate/pwa-ui-shared/icons/RadioCheckedIcon';import UncheckedIcon from'@shopgate/pwa-ui-shared/icons/RadioUncheckedIcon';import{Ripple}from'@shopgate/engage/components';import{useRadioGroup}from"../RadioGroup";var styles={root:css({display:'inline-flex',alignItems:'inherit',justifyContent:'inherit',position:'relative',borderRadius:'50%'}).toString(),input:css({top:0,left:0,margin:0,opacity:0,padding:0,position:'absolute',zIndex:1,width:'100%',height:'100%'}).toString(),radioContainer:css({display:'flex',position:'relative',width:24,height:24}).toString(),radio:css({height:'100%',width:'100%'}).toString(),radioChecked:css({color:'var(--color-primary)'}).toString(),radioDisabled:css({opacity:0.5,pointerEvents:'none'}).toString(),ripple:css({padding:12}).toString()};/**
- * The Radio component
- * @param {Object} props The component props
- * @returns {JSX}
- */var Radio=function Radio(_ref){var classes=_ref.classes,nameProp=_ref.name,onChangeProp=_ref.onChange,checkedProp=_ref.checked,disabledProp=_ref.disabled,valueProp=_ref.value,attributes=_ref.attributes;var radioGroup=useRadioGroup();var name=nameProp;var checked=checkedProp;var onChange=onChangeProp;if(radioGroup){if(checked===null){checked=radioGroup.value===valueProp;}if(typeof radioGroup.name!=='undefined'){name=radioGroup.name;}if(typeof radioGroup.onChange!=='undefined'){onChange=radioGroup.onChange;}}return React.createElement("span",{className:classNames(styles.root,classes.root)},React.createElement(Ripple,{className:styles.ripple,color:"var(--color-primary)"},React.createElement("input",_extends({className:styles.input,type:"radio",name:name,value:valueProp,checked:checked,onChange:onChange,disabled:disabledProp,id:"".concat(name,"_").concat(valueProp)},attributes)),React.createElement("div",{className:classNames(styles.radioContainer,_defineProperty(_defineProperty({},styles.radioDisabled,disabledProp),classes.disabled,disabledProp))},checked&&React.createElement(CheckedIcon,{className:classNames(styles.radio,styles.radioChecked,classes.radioChecked,'checkedIcon')}),!checked&&React.createElement(UncheckedIcon,{className:classNames(styles.radio,classes.radioUnchecked,'uncheckedIcon')}))));};Radio.defaultProps={classes:{},checked:null,disabled:false,onChange:null,name:null,value:null,attributes:null};export default hot(Radio);

package/components/Radio/index.js

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

package/components/RadioCard/RadioCard.js

@@ -1,9 +0,0 @@
-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{hot}from'react-hot-loader/root';import React from'react';import PropTypes from'prop-types';import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import classNames from'classnames';import Card from'@shopgate/pwa-ui-shared/Card';import{useRadioGroup}from"../RadioGroup";import Radio from"../Radio";var variables=themeConfig.variables;var styles={card:css({borderRadius:4,padding:'8px 8px 8px 4px',display:'flex',alignItems:'center'}).toString(),content:css({padding:"".concat(variables.gap.small,"px ").concat(variables.gap.small,"px ").concat(variables.gap.small,"px 0"),width:'100%'}).toString(),contentDisabled:css({opacity:0.5,pointerEvents:'none'}).toString(),radio:css({alignItems:'center'}).toString()};/**
- * The default card component
- * @param {Object} props The component props
- * @returns {JSX}
- */var CardComponent=function CardComponent(_ref){var children=_ref.children,className=_ref.className;return React.createElement(Card,{className:classNames(styles.card,className)},children);};CardComponent.defaultProps={children:null,className:null};/**
- * The RadioCard component
- * @param {Object} props The component props
- * @returns {JSX}
- */var RadioCard=function RadioCard(_ref2){var children=_ref2.children,nameProp=_ref2.name,onChange=_ref2.onChange,checked=_ref2.checked,disabledProp=_ref2.disabled,value=_ref2.value,attributes=_ref2.attributes,classes=_ref2.classes,RenderCard=_ref2.renderCard;var radioGroup=useRadioGroup();var name=nameProp;var disabled=disabledProp;if(radioGroup){if(typeof radioGroup.name!=='undefined'){name=radioGroup.name;}if(typeof radioGroup.disabled!=='undefined'){disabled=radioGroup.disabled;}}return React.createElement(RenderCard,{className:classes.root},React.createElement(Radio,{name:name,value:value,onChange:onChange,disabled:disabled,checked:checked,attributes:attributes,classes:{root:styles.radio}}),React.createElement("label",{htmlFor:"".concat(name,"_").concat(value),className:classNames(styles.content,_defineProperty(_defineProperty({},styles.contentDisabled,disabled),classes.disabled,disabled))},children));};RadioCard.defaultProps={children:null,checked:null,classes:{},disabled:false,onChange:null,name:null,value:null,attributes:null,renderCard:CardComponent};export default hot(RadioCard);

package/components/RadioCard/index.js

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

package/components/RadioGroup/RadioGroup.context.js

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

package/components/RadioGroup/RadioGroup.js

@@ -1,4 +0,0 @@
-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{hot}from'react-hot-loader/root';import React,{useState,useCallback,useEffect}from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import RadioGroupContext from"./RadioGroup.context";var styles={root:css({display:'flex',flexDirection:'column'}).toString()};/**
- * @param {Object} props The component props
- * @returns {JSX}
- */var RadioGroup=function RadioGroup(_ref){var classes=_ref.classes,children=_ref.children,name=_ref.name,disabled=_ref.disabled,valueProp=_ref.value,defaultValue=_ref.defaultValue,onChange=_ref.onChange,Component=_ref.component;var _useState=useState(valueProp||defaultValue),_useState2=_slicedToArray(_useState,2),value=_useState2[0],setValue=_useState2[1];useEffect(function(){setValue(valueProp||defaultValue);},[defaultValue,valueProp]);var handleChange=useCallback(function(event){setValue(event.target.value);if(onChange){onChange(event,event.target.value);}},[onChange]);return React.createElement(RadioGroupContext.Provider,{value:{name:name,onChange:handleChange,value:value,disabled:disabled}},React.createElement(Component,{role:"radiogroup",className:classNames(styles.root,classes.root)},children));};RadioGroup.defaultProps={classes:{},children:null,defaultValue:null,disabled:false,value:null,onChange:null,component:'div'};export default hot(RadioGroup);

package/components/RadioGroup/index.js

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

package/components/RadioGroup/useRadioGroup.js

@@ -1,4 +0,0 @@
-import{useContext}from'react';import RadioGroupContext from"./RadioGroup.context";/**
- * Provides a radio group context
- * @returns {Object}
- */export default function useRadioGroup(){return useContext(RadioGroupContext);}

package/components/ResponsiveContainer/ResponsiveContainer.js

@@ -1,6 +0,0 @@
-import PropTypes from'prop-types';import{useResponsiveValue}from"./hooks";/**
- * Renders a responsive container that allows to render based on width.
- * @param {Object} props Component props.
- * @returns {React.Node}
- */var ResponsiveContainer=function ResponsiveContainer(_ref){var breakpoint=_ref.breakpoint,webOnly=_ref.webOnly,webAlways=_ref.webAlways,appOnly=_ref.appOnly,appAlways=_ref.appAlways,children=_ref.children;var render=useResponsiveValue(breakpoint,{webOnly:webOnly,webAlways:webAlways,appOnly:appOnly,appAlways:appAlways});if(!render){return null;}return children;};ResponsiveContainer.propTypes={appAlways:PropTypes.bool,appOnly:PropTypes.bool,breakpoint:PropTypes.string,// eslint-disable-next-line react/forbid-prop-types
-children:PropTypes.any,webAlways:PropTypes.bool,webOnly:PropTypes.bool};ResponsiveContainer.defaultProps={children:null,breakpoint:'>=xs',appAlways:false,webAlways:false,webOnly:false,appOnly:false};export default ResponsiveContainer;

package/components/ResponsiveContainer/breakpoints.js

@@ -1,14 +0,0 @@
-// Ugly imports to avoid breaking tests due to circular dependencies
-import{isIOSTheme}from'@shopgate/engage/core/helpers/isIOSTheme';import{hasWebBridge}from'@shopgate/engage/core/helpers/bridge';var iosThemeActive=isIOSTheme();/* eslint-disable extra-rules/no-single-line-objects */var breakpoints=[{name:'xs',from:0,to:600},{name:'sm',from:600,to:960},{name:'md',from:960,to:1280},{name:'lg',from:1280,to:1920},{name:'xl',from:1920,to:Number.MAX_VALUE}];/* eslint-enable extra-rules/no-single-line-objects */ /**
- * Generates a media query for different breakpoints and platform.
- * @param {Object} comparators Comparators.
- * @param {string} breakpoint Breakpoint rule.
- * @param {Object} params Parameters needed to generation.
- * @returns {string}
- */export var parser=function parser(comparators,breakpoint){var _ref=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{},_ref$appAlways=_ref.appAlways,appAlways=_ref$appAlways===void 0?false:_ref$appAlways,_ref$appOnly=_ref.appOnly,appOnly=_ref$appOnly===void 0?false:_ref$appOnly,_ref$webOnly=_ref.webOnly,webOnly=_ref$webOnly===void 0?false:_ref$webOnly,_ref$webAlways=_ref.webAlways,webAlways=_ref$webAlways===void 0?false:_ref$webAlways;// Parse breakpoint prop into the comparator and the breakpoint name.
-var breakpointStart=breakpoint.search(/[a-zA-Z]/);var comparatorString=breakpoint.substring(0,breakpointStart===-1?0:breakpointStart);var breakpointString=breakpoint.substring(breakpointStart===-1?0:breakpointStart);// Get configuration.
-var comparator=comparators[comparatorString];var config=breakpoints.find(function(b){return b.name===breakpointString;});// Web / App config.
-// Handle iOS theme as app for now so that media queries in shared components only work for app
-var isWeb=hasWebBridge()&&!iosThemeActive;// Always mode.
-if(webAlways&&isWeb||appAlways&&!isWeb){return true;}// Return media query that never evaluates for now.
-if(appOnly&&isWeb||webOnly&&!isWeb){return false;}return comparator(config.from,config.to,window.innerWidth);};export default breakpoints;

package/components/ResponsiveContainer/condition.js

@@ -1,6 +0,0 @@
-import{parser}from"./breakpoints";var comparators={'>=':function _(from,to,width){return width>=from;},'>':function _(from,to,width){return width>=to;},'<':function _(from,to,width){return width<from;},'<=':function _(from,to,width){return width<to;},'':function _(from,to,width){return width>=from&&width<to;}};/**
- * Tests if responsive condition applies.
- * @param {string} breakpoint Breakpoint rule.
- * @param {Object} params Parameters needed to generation.
- * @returns {string}
- */export var responsiveCondition=function responsiveCondition(breakpoint){var params=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var parsed=parser(comparators,breakpoint,params);return parsed;};

package/components/ResponsiveContainer/hooks.js

@@ -1,20 +0,0 @@
-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;}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{useState,useMemo,useEffect}from'react';import{addListener}from"./listener";import{parser}from"./breakpoints";var comparators={'>=':function _(from,to,width){return width>=from;},'>':function _(from,to,width){return width>=to;},'<':function _(from,to,width){return width<from;},'<=':function _(from,to,width){return width<to;},'':function _(from,to,width){return width>=from&&width<to;}};/**
- * Custom hook to determine the visibility or value based on the current active breakpoint
- * and provided conditions.
- * It listens for changes in the viewport or platform breakpoints and returns a value.
- *
- * @param {string} [breakpoint=">=xs"] - The breakpoint condition to match (e.g., '>=md', '<lg').
- * @param {Object} [options={}] - Additional options for customizing behavior.
- * @param {*} [options.valueMatch=true] - Return value when the provided conditions match.
- * @param {*} [options.valueMiss=false] - Return value when the provided conditions do not match.
- * @param {boolean} [options.webOnly=false] If true, the hook will only match in PWA website mode.
- * @param {boolean} [options.webAlways=false] If true, the hook will always match in PWA website
- * mode regardless of the breakpoint.
- * @param {boolean} [options.appOnly=false] If true, the hook will only match in PWA app mode.
- * @param {boolean} [options.appAlways=false] If true, the hook will always match in PWA app mode,
- * regardless of the breakpoint.
- * @returns {boolean}
- */export var useResponsiveValue=function useResponsiveValue(){var breakpoint=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'>=xs';var options=arguments.length>1?arguments[1]:undefined;var _valueMatch$valueMiss=_extends({valueMatch:true,valueMiss:false,appAlways:false,appOnly:false,webAlways:false,webOnly:false},options),webOnly=_valueMatch$valueMiss.webOnly,webAlways=_valueMatch$valueMiss.webAlways,appOnly=_valueMatch$valueMiss.appOnly,appAlways=_valueMatch$valueMiss.appAlways,valueMiss=_valueMatch$valueMiss.valueMiss,valueMatch=_valueMatch$valueMiss.valueMatch;// Active breakpoint used for triggering rerenders on resize.
-var _useState=useState(null),_useState2=_slicedToArray(_useState,2),activeBreakpoint=_useState2[0],setActiveBreakpoint=_useState2[1];// Calculate if we have a match for the conditions
-/* eslint-disable react-hooks/exhaustive-deps */var isMatch=useMemo(function(){var parsed=parser(comparators,breakpoint,{breakpoint:breakpoint,webOnly:webOnly,webAlways:webAlways,appOnly:appOnly,appAlways:appAlways});return parsed;},[activeBreakpoint,breakpoint]);/* eslint-enable react-hooks/exhaustive-deps */ // Watch for resize changes.
-useEffect(function(){return addListener(function(newBreakpoint){setActiveBreakpoint(newBreakpoint);});},[]);return isMatch?valueMatch:valueMiss;};

package/components/ResponsiveContainer/index.js

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

package/components/ResponsiveContainer/listener.js

@@ -1,10 +0,0 @@
-import debounce from'lodash/debounce';import breakpoints from"./breakpoints";var listeners=[];/**
- * Adds a new listener to breakpoint changes.
- * @param {Function} cb The callback that shall be triggered.
- * @returns {Function}
- */export var addListener=function addListener(cb){listeners.push(cb);return function(){listeners=listeners.filter(function(a){return a!==cb;});};};/**
- * Calculates the active breakpoint.
- * @returns {Object}
- */var getActiveBreakpoint=function getActiveBreakpoint(){return breakpoints.find(function(bp){return bp.from<=document.documentElement.clientWidth&&bp.to>=document.documentElement.clientWidth;});};var activeBreakpoint=getActiveBreakpoint();/**
- * Handles any event that might cause a breakpoint change.
- */var handleEvent=function handleEvent(){var newBreakpoint=getActiveBreakpoint();if(activeBreakpoint.name!==newBreakpoint.name){activeBreakpoint=newBreakpoint;listeners.forEach(function(listener){return listener(newBreakpoint);});}};window.addEventListener('resize',debounce(handleEvent,200));window.addEventListener('orientationchange',handleEvent);

package/components/ResponsiveContainer/mediaQuery.js

@@ -1,8 +0,0 @@
-import{parser}from"./breakpoints";var comparators={'>=':function _(from){return"@media (min-width: ".concat(from,"px)");},'>':function _(from,to){return"@media (min-width: ".concat(to,"px)");},'<':function _(from){return"@media (max-width: ".concat(from+1,"px)");},'<=':function _(from,to){return"@media (max-width: ".concat(to-1,"px)");},'':function _(from,to){return"@media (min-width: ".concat(from,"px) and (max-width: ").concat(to,"px)");}};/**
- * Generates a media query for different breakpoints and platform.
- * @param {string} breakpoint Breakpoint rule.
- * @param {Object} params Parameters needed to generation.
- * @returns {string}
- */export var responsiveMediaQuery=function responsiveMediaQuery(breakpoint){var params=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var parsed=parser(comparators,breakpoint,params);// Return media query that never evaluates for now.
-if(!parsed){return'@media (height: 0)';}// Return media query that evaluates always.
-if(parsed===true){return'@media (min-height: 0)';}return parsed;};

package/components/SideNavigation/SideNavigation.hooks.js

@@ -1,4 +0,0 @@
-import{useContext}from'react';import SideNavigationContext from"./SideNavigationProvider.context";/**
- * Returns the value of the side navigation provider state.
- * @returns {Object}
- */export var useSideNavigation=function useSideNavigation(){return useContext(SideNavigationContext);};

package/components/SideNavigation/SideNavigation.js

@@ -1,4 +0,0 @@
-import React from'react';import{hot}from'react-hot-loader/root';import SideNavigationProvider from"./SideNavigationProvider";import SideNavigationContent from"./SideNavigationContent";/**
- * The SideNavigation component
- * @returns {JSX}
- */var SideNavigation=function SideNavigation(_ref){var maxCategoryNesting=_ref.maxCategoryNesting,routePatternBlacklist=_ref.routePatternBlacklist,classNames=_ref.classNames;return React.createElement(SideNavigationProvider,{maxCategoryNesting:maxCategoryNesting,routePatternBlacklist:routePatternBlacklist},React.createElement(SideNavigationContent,{classNames:classNames}));};SideNavigation.defaultProps={maxCategoryNesting:3,routePatternBlacklist:[],classNames:null};export default hot(SideNavigation);

package/components/SideNavigation/SideNavigationCategories.connector.js

@@ -1,8 +0,0 @@
-import{connect}from'react-redux';import{fetchCategoryOrRootCategories}from'@shopgate/engage/category';import{makeGetAreRootCategoriesFetching,makeGetSubcategoriesByCategoryId}from"./selectors";/**
- * Creates the mapStateToProps connector function.
- * @returns {Function}
- */var makeMapStateToProps=function makeMapStateToProps(){var getAreRootCategoriesFetching=makeGetAreRootCategoriesFetching();var getSubcategoriesByCategoryId=makeGetSubcategoriesByCategoryId();return function(state,_ref){var categoryId=_ref.categoryId;return{rootCategoriesFetching:getAreRootCategoriesFetching(state),subcategories:getSubcategoriesByCategoryId(state,{categoryId:categoryId})};};};/**
- * Maps the contents of the state to the component props.
- * @param  {Function} dispatch The redux dispatch function.
- * @return {Object} The extended component props.
- */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{fetchCategory:function fetchCategory(id){return dispatch(fetchCategoryOrRootCategories(id));}};};export default connect(makeMapStateToProps,mapDispatchToProps);

package/components/SideNavigation/SideNavigationCategories.js

@@ -1,4 +0,0 @@
-import React,{useEffect}from'react';import{LoadingIndicator}from'@shopgate/pwa-ui-shared';import SideNavigationCategoriesItemChildren from"./SideNavigationCategoriesItemChildren";import connect from"./SideNavigationCategories.connector";import{list,loadingIndicator}from"./SideNavigationCategories.style";import{item}from"./SideNavigationItem.style";/**
- * The SideNavigationCategories component
- * @returns {JSX}
- */var SideNavigationCategories=function SideNavigationCategories(_ref){var categoryId=_ref.categoryId,subcategories=_ref.subcategories,fetchCategory=_ref.fetchCategory,rootCategoriesFetching=_ref.rootCategoriesFetching;useEffect(function(){if(!subcategories){fetchCategory(categoryId);}},[categoryId,fetchCategory,subcategories]);if(!subcategories&&rootCategoriesFetching){return React.createElement("li",{className:item},React.createElement(LoadingIndicator,{className:loadingIndicator}));}if(!subcategories||Array.isArray(subcategories)&&subcategories.length===0){return null;}return React.createElement("li",{className:list},React.createElement(SideNavigationCategoriesItemChildren,{level:0,subcategories:subcategories}));};SideNavigationCategories.defaultProps={subcategories:null,categoryId:null,rootCategoriesFetching:false};export default connect(SideNavigationCategories);

package/components/SideNavigation/SideNavigationCategories.style.js

@@ -1 +0,0 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export var list=css({borderBottom:"1px solid ".concat(colors.shade7)});export var loadingIndicator=css({padding:0,margin:'auto'}).toString();

package/components/SideNavigation/SideNavigationCategoriesItem.connector.js

@@ -1,8 +0,0 @@
-import{connect}from'react-redux';import _fetchCategory from'@shopgate/pwa-common-commerce/category/actions/getCategory';import{getCategory}from'@shopgate/pwa-common-commerce/category/selectors';import{makeGetSubcategoriesByCategoryId,makeGetAreChildCategoriesFetching}from"./selectors";/**
- * Creates the mapStateToProps connector function.
- * @returns {Function}
- */var makeMapStateToProps=function makeMapStateToProps(){var getSubcategoriesByCategoryId=makeGetSubcategoriesByCategoryId();var getAreChildCategoriesFetching=makeGetAreChildCategoriesFetching();return function(state,_ref){var categoryId=_ref.categoryId;return{category:getCategory(state,{categoryId:categoryId}),subcategories:getSubcategoriesByCategoryId(state,{categoryId:categoryId}),subcategoriesFetching:getAreChildCategoriesFetching(state,{categoryId:categoryId})};};};/**
- * Maps the contents of the state to the component props.
- * @param  {Function} dispatch The redux dispatch function.
- * @return {Object} The extended component props.
- */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{fetchCategory:function fetchCategory(id){return dispatch(_fetchCategory(id));}};};export default connect(makeMapStateToProps,mapDispatchToProps);

package/components/SideNavigation/SideNavigationCategoriesItem.js

@@ -1,5 +0,0 @@
-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,useCallback,useMemo,useEffect}from'react';import ArrowDrop from'@shopgate/pwa-ui-shared/icons/ArrowDropIcon';import{bin2hex}from'@shopgate/pwa-common/helpers/data';import{CATEGORY_PATH}from'@shopgate/pwa-common-commerce/category/constants';import{ProgressBar}from'@shopgate/pwa-ui-shared';// eslint-disable-next-line import/no-cycle
-import SideNavigationCategoriesItemChildren from"./SideNavigationCategoriesItemChildren";import SideNavigationItem from"./SideNavigationItem";import connect from"./SideNavigationCategoriesItem.connector";import{chevronButton,chevronUp,chevronDown,progressBar,open}from"./SideNavigationCategoriesItem.style";import{useSideNavigation}from"./SideNavigation.hooks";/**
- * The SideNavigationCategoriesItem component
- * @returns {JSX}
- */var SideNavigationCategoriesItem=function SideNavigationCategoriesItem(_ref){var categoryId=_ref.categoryId,category=_ref.category,subcategories=_ref.subcategories,subcategoriesFetching=_ref.subcategoriesFetching,fetchCategory=_ref.fetchCategory,level=_ref.level;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isOpen=_useState2[0],setIsOpen=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isLoading=_useState4[0],setIsLoading=_useState4[1];var _useSideNavigation=useSideNavigation(),maxCategoryNesting=_useSideNavigation.maxCategoryNesting,activeCategoryId=_useSideNavigation.activeCategoryId;var hasSubcategories=useMemo(function(){return category.childrenCount!==0;},[category.childrenCount]);var maxNestingReached=useMemo(function(){return level+1===maxCategoryNesting;},[level,maxCategoryNesting]);var handleClick=useCallback(function(){setIsOpen(!isOpen);if(hasSubcategories&&!subcategories){setIsLoading(true);fetchCategory(categoryId);}},[categoryId,fetchCategory,hasSubcategories,isOpen,subcategories]);useEffect(function(){if(isLoading&&(subcategories||!subcategoriesFetching)){setIsLoading(false);}},[isLoading,subcategories,subcategoriesFetching]);var buttonRight=useMemo(function(){if(!maxNestingReached&&hasSubcategories){return React.createElement("button",{type:"button",onClick:handleClick,className:chevronButton},React.createElement(ArrowDrop,{className:(isOpen&&subcategories?chevronUp:chevronDown).toString()}));}return null;},[handleClick,hasSubcategories,isOpen,maxNestingReached,subcategories]);if(!category){return null;}return React.createElement(SideNavigationItem,{href:"".concat(CATEGORY_PATH,"/").concat(bin2hex(categoryId)),label:category.name,level:level,buttonRight:buttonRight,forceActive:activeCategoryId===categoryId,className:level===0&&isOpen?open:null},isLoading&&React.createElement("div",{className:progressBar},React.createElement(ProgressBar,null)),!maxNestingReached&&isOpen&&hasSubcategories&&subcategories&&React.createElement(SideNavigationCategoriesItemChildren,{subcategories:subcategories,level:level+1}));};SideNavigationCategoriesItem.defaultProps={subcategories:null,subcategoriesFetching:false,categoryId:null,level:0};export default connect(SideNavigationCategoriesItem);

package/components/SideNavigation/SideNavigationCategoriesItem.style.js

@@ -1,2 +0,0 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var chevronButton=css({flexShrink:0,outline:0,margin:"0 -".concat(variables.gap.big,"px 0 ").concat(variables.gap.small,"px"),fontSize:'1.6em',color:'#373D41',position:'relative'});export var chevron=css({transformOrigin:'center center',transition:'transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1)'});export var chevronDown=css(chevron,{transform:'rotateZ(0deg)'});export var chevronUp=css(chevron,{transform:'rotateZ(180deg)'});export var progressBar=css({position:'absolute',overflow:'hidden',width:'100%',bottom:0,height:3});export var open=css({//  borderRight: '2px solid var(--color-primary)',
-}).toString();export var loadingIndicator=css({position:'absolute',padding:0,top:'50%',marginTop:'-50%',paddingTop:1,right:3}).toString();

package/components/SideNavigation/SideNavigationCategoriesItemChildren.js

@@ -1,5 +0,0 @@
-import React from'react';// eslint-disable-next-line import/no-cycle
-import SideNavigationCategoriesItem from"./SideNavigationCategoriesItem";/**
- * The SideNavigationCategoriesItemChildren component
- * @returns {JSX}
- */var SideNavigationCategoriesItemChildren=function SideNavigationCategoriesItemChildren(_ref){var subcategories=_ref.subcategories,level=_ref.level;return React.createElement("ul",null,subcategories.map(function(category){return React.createElement(SideNavigationCategoriesItem,{key:category.id,level:level,categoryId:category.id});}));};export default SideNavigationCategoriesItemChildren;

package/components/SideNavigation/SideNavigationContent.js

@@ -1,3 +0,0 @@
-import React,{useMemo}from'react';import{INDEX_PATH}from'@shopgate/pwa-common/constants/RoutePaths';import SideNavigationCategories from"./SideNavigationCategories";import SideNavigationLinks from"./SideNavigationLinks";import SideNavigationItem from"./SideNavigationItem";import{useSideNavigation}from"./SideNavigation.hooks";import{container}from"./SideNavigationContent.style";/**
- * @returns {JSX}
- */var SideNavigationContent=function SideNavigationContent(_ref){var classNames=_ref.classNames;var _useSideNavigation=useSideNavigation(),isVisible=_useSideNavigation.isVisible;var wrapperClass=useMemo(function(){if(!classNames){return'';}var _classNames$visible=classNames.visible,visible=_classNames$visible===void 0?'':_classNames$visible,_classNames$hidden=classNames.hidden,hidden=_classNames$hidden===void 0?'':_classNames$hidden;return isVisible?visible:hidden;},[classNames,isVisible]);return React.createElement("div",{className:wrapperClass},isVisible&&React.createElement("nav",{className:container},React.createElement("ul",null,React.createElement(SideNavigationItem,{href:INDEX_PATH,label:"navigation.home"}),React.createElement(SideNavigationCategories,null),React.createElement(SideNavigationLinks,null))));};SideNavigationContent.defaultProps={classNames:null};export default SideNavigationContent;

package/components/SideNavigation/SideNavigationContent.style.js

@@ -1,4 +0,0 @@
-import{css}from'glamor';export var container=css({background:'#fff'/*
-  position: 'sticky',
-  top: 'var(--app-bar-height)',
-  */});

package/components/SideNavigation/SideNavigationItem.js

@@ -1,4 +0,0 @@
-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,{useMemo,memo}from'react';import classNames from'classnames';import Link from'@shopgate/pwa-common/components/Link';import{i18n}from'@shopgate/engage/core';import{getIndentation,item,itemActive,link,linkActive,list}from"./SideNavigationItem.style";import{useSideNavigation}from"./SideNavigation.hooks";/**
- * SideNavigationItem component
- * @returns {JSX}
- */var SideNavigationItem=function SideNavigationItem(_ref){var level=_ref.level,href=_ref.href,label=_ref.label,buttonRight=_ref.buttonRight,children=_ref.children,forceActive=_ref.forceActive,forceInactive=_ref.forceInactive,className=_ref.className,onClick=_ref.onClick;var _useSideNavigation=useSideNavigation(),currentPathname=_useSideNavigation.currentPathname;var isActive=useMemo(function(){return!forceInactive&&(currentPathname===href||forceActive);},[currentPathname,forceActive,forceInactive,href]);return React.createElement("li",{className:classNames(list,className)},React.createElement("div",{className:classNames(item,_defineProperty({},itemActive,isActive))},href?React.createElement(Link,{tag:"a",href:href,className:classNames(link,getIndentation(level),_defineProperty({},linkActive,isActive))},i18n.text(label)):React.createElement("button",{type:"button",className:classNames(link,getIndentation(level),_defineProperty({},linkActive,isActive)),onClick:onClick},i18n.text(label)),buttonRight),children);};SideNavigationItem.defaultProps={buttonRight:null,children:null,forceActive:false,forceInactive:false,level:0,href:null,className:null,onClick:function onClick(){}};export default memo(SideNavigationItem);

package/components/SideNavigation/SideNavigationItem.style.js

@@ -1,4 +0,0 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;/**
- * @param {number} level The indentation level
- * @returns {string}
- */export var getIndentation=function getIndentation(){var level=arguments.length>0&&arguments[0]!==undefined?arguments[0]:0;return css({paddingLeft:level*variables.gap.big}).toString();};export var list=css({position:'relative'}).toString();export var item=css({alignItems:'center',display:'flex',textAlign:'left',outline:0,padding:variables.gap.big,position:'relative',width:'100%',lineHeight:'1.45em'}).toString();export var itemActive=css({background:'var(--color-side-navigation-active-background)'}).toString();export var link=css({flexGrow:1,textAlign:'left',outline:0,color:'var(--color-text-high-emphasis)',':hover':{color:'var(--color-primary)'}}).toString();export var linkActive=css({color:'var(--color-primary) !important'}).toString();

package/components/SideNavigation/SideNavigationLinks.js

@@ -1,4 +0,0 @@
-import React,{Fragment}from'react';import{FAVORITES_PATH}from'@shopgate/pwa-common-commerce/favorites/constants';import{CART_PATH}from'@shopgate/pwa-common-commerce/cart/constants';import{LOGIN_PATH}from'@shopgate/pwa-common/constants/RoutePaths';import appConfig from'@shopgate/pwa-common/helpers/config';import{useSideNavigation}from"./SideNavigation.hooks";import SideNavigationItem from"./SideNavigationItem";import SideNavigationNestedItem from"./SideNavigationNestedItem";import SideNavigationLinksQuicklinks from"./SideNavigationLinksQuicklinks";import SideNavigationLinksLegal from"./SideNavigationLinksLegal";import{PROFILE_PATH,WISH_LIST_PATH,ORDERS_PATH}from"../../account";/**
- * SideNavigationLinks component
- * @returns {JSX}
- */var SideNavigationLinks=function SideNavigationLinks(){var _useSideNavigation=useSideNavigation(),isLoggedIn=_useSideNavigation.isLoggedIn,logout=_useSideNavigation.logout,currentPathname=_useSideNavigation.currentPathname;var isAccountActive=currentPathname===PROFILE_PATH||currentPathname===ORDERS_PATH||currentPathname===WISH_LIST_PATH;return React.createElement(Fragment,null,React.createElement(SideNavigationItem,{href:CART_PATH,label:"navigation.cart"}),!isLoggedIn&&appConfig.hasFavorites?React.createElement(SideNavigationItem,{href:FAVORITES_PATH,label:"navigation.favorites"}):null,isLoggedIn&&React.createElement(SideNavigationNestedItem,{href:PROFILE_PATH,label:"navigation.your_account",forceActive:isAccountActive,level:0},React.createElement("ul",null,React.createElement(SideNavigationItem,{level:1,href:PROFILE_PATH,label:"titles.profile"}),React.createElement(SideNavigationItem,{level:1,href:ORDERS_PATH,label:"titles.order_history"}),appConfig.hasFavorites?React.createElement(SideNavigationItem,{level:1,href:WISH_LIST_PATH,label:"titles.favorites"}):null)),React.createElement(SideNavigationLinksQuicklinks,null),React.createElement(SideNavigationLinksLegal,null),isLoggedIn?React.createElement(SideNavigationItem,{onClick:logout,label:"navigation.logout"}):React.createElement(SideNavigationItem,{href:LOGIN_PATH,label:"navigation.login_register"}));};export default SideNavigationLinks;

package/components/SideNavigation/SideNavigationLinksLegal.connector.js

@@ -1,4 +0,0 @@
-import{connect}from'react-redux';import{makeGetMenu,makeGetIsFetchingMenu}from'@shopgate/engage/core';import{LEGAL_MENU}from'@shopgate/pwa-common/constants/MenuIDs';/**
- * Creates the mapStateToProps connector function.
- * @returns {Function}
- */var makeMapStateToProps=function makeMapStateToProps(){var getMenu=makeGetMenu(LEGAL_MENU);var getIsFetchingMenu=makeGetIsFetchingMenu(LEGAL_MENU);return function(state){return{links:getMenu(state),isFetching:getIsFetchingMenu(state)};};};export default connect(makeMapStateToProps);

package/components/SideNavigation/SideNavigationLinksLegal.js

@@ -1,5 +0,0 @@
-import React from'react';import SideNavigationItem from"./SideNavigationItem";import connect from"./SideNavigationLinksLegal.connector";/**
- *
- * @param {Object} props The component props
- * @returns {JSX}
- */var SideNavigationLinksLegal=function SideNavigationLinksLegal(_ref){var links=_ref.links;if(!links){return null;}return links.map(function(_ref2){var label=_ref2.label,url=_ref2.url;return React.createElement(SideNavigationItem,{key:url,href:url,label:label});});};SideNavigationLinksLegal.defaultProps={links:null,isFetching:false};export default connect(SideNavigationLinksLegal);

package/components/SideNavigation/SideNavigationLinksQuicklinks.connector.js

@@ -1,4 +0,0 @@
-import{connect}from'react-redux';import{makeGetMenu,makeGetIsFetchingMenu}from'@shopgate/engage/core';import{QUICKLINKS_MENU}from'@shopgate/pwa-common/constants/MenuIDs';/**
- * Creates the mapStateToProps connector function.
- * @returns {Function}
- */var makeMapStateToProps=function makeMapStateToProps(){var getMenu=makeGetMenu(QUICKLINKS_MENU);var getIsFetchingMenu=makeGetIsFetchingMenu(QUICKLINKS_MENU);return function(state){return{links:getMenu(state),isFetching:getIsFetchingMenu(state)};};};export default connect(makeMapStateToProps);