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

package/locations/components/StockInfo/StockInfo.js

@@ -1,8 +1,80 @@
-import*as React from'react';import{css}from'glamor';import{connect}from'react-redux';import classNames from'classnames';import defaultsDeep from'lodash/defaultsDeep';import PropTypes from'prop-types';import{makeGetLocationInventory}from"../../selectors";import{getThemeSettings}from"../../../core";import{SurroundPortals}from"../../../components";import{PRODUCT_LOCATION_STOCK_INFO}from"../../constants";import{getAvailabilitySettings}from"../../helpers";import defaultSettings from"./StockInfo.defaultSettings";import{StockInfoInventory}from"./StockInfoInventory";/**
+import * as React from 'react';
+import { css } from 'glamor';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import defaultsDeep from 'lodash/defaultsDeep';
+import PropTypes from 'prop-types';
+import { makeGetLocationInventory } from "../../selectors";
+import { getThemeSettings } from "../../../core";
+import { SurroundPortals } from "../../../components";
+import { PRODUCT_LOCATION_STOCK_INFO } from "../../constants";
+import { getAvailabilitySettings } from "../../helpers";
+import defaultSettings from "./StockInfo.defaultSettings";
+import { StockInfoInventory } from "./StockInfoInventory";
+
+/**
  * Creates a mapper for redux.
  * @returns {Function}
- */var makeMapStateToProps=function makeMapStateToProps(){var getInventory=makeGetLocationInventory(function(_,props){var _props$location;return(_props$location=props.location)===null||_props$location===void 0?void 0:_props$location.code;},function(_,props){var _props$product;return props.productId||((_props$product=props.product)===null||_props$product===void 0?void 0:_props$product.id);});return function(state,props){return{inventory:getInventory(state,props)};};};/**
+ */
+const makeMapStateToProps = () => {
+  const getInventory = makeGetLocationInventory((_, props) => props.location?.code, (_, props) => props.productId || props.product?.id);
+  return (state, props) => ({
+    inventory: getInventory(state, props)
+  });
+};
+
+/**
  * Renders visible stock information based on the given location.
  * @param {Object} props The component props.
  * @return {JSX}
- */var StockInfoUnwrapped=function StockInfoUnwrapped(_ref){var location=_ref.location,inventory=_ref.inventory,className=_ref.className;var _ref2=getThemeSettings('product')||{},locationStockInfo=_ref2.locationStockInfo;var settings=defaultsDeep(locationStockInfo,defaultSettings);var _getAvailabilitySetti=getAvailabilitySettings(settings,location,inventory),_getAvailabilitySetti2=_getAvailabilitySetti.availabilityText,availabilityText=_getAvailabilitySetti2===void 0?'':_getAvailabilitySetti2,_getAvailabilitySetti3=_getAvailabilitySetti.availabilityTextColor,availabilityTextColor=_getAvailabilitySetti3===void 0?'inherit':_getAvailabilitySetti3,_getAvailabilitySetti4=_getAvailabilitySetti.comingSoon,comingSoon=_getAvailabilitySetti4===void 0?false:_getAvailabilitySetti4;var defaultClassName=css({color:availabilityTextColor,fontSize:'0.75rem',margin:0,':not(:empty) ~ *':{marginLeft:14}}).toString();var portalProps=React.useMemo(function(){return{location:location,inventory:inventory,comingSoon:comingSoon,settings:settings,className:className,availabilityText:availabilityText,availabilityTextColor:availabilityTextColor};},[availabilityText,availabilityTextColor,className,comingSoon,inventory,location,settings]);return React.createElement(SurroundPortals,{portalName:PRODUCT_LOCATION_STOCK_INFO,portalProps:portalProps},React.createElement("span",{className:classNames(defaultClassName,css(className).toString())},React.createElement(StockInfoInventory,{availabilityText:availabilityText,comingSoon:comingSoon,location:location,inventory:inventory,maxNumberVisible:settings.maxNumberOfVisibleInventory,aboveMaxExtension:settings.aboveMaxExtension})));};StockInfoUnwrapped.defaultProps={className:null,inventory:null};export var StockInfo=connect(makeMapStateToProps)(StockInfoUnwrapped);
+ */
+const StockInfoUnwrapped = ({
+  location,
+  inventory,
+  className
+}) => {
+  const {
+    locationStockInfo
+  } = getThemeSettings('product') || {};
+  const settings = defaultsDeep(locationStockInfo, defaultSettings);
+  const {
+    availabilityText = '',
+    availabilityTextColor = 'inherit',
+    comingSoon = false
+  } = getAvailabilitySettings(settings, location, inventory);
+  const defaultClassName = css({
+    color: availabilityTextColor,
+    fontSize: '0.75rem',
+    margin: 0,
+    ':not(:empty) ~ *': {
+      marginLeft: 14
+    }
+  }).toString();
+  const portalProps = React.useMemo(() => ({
+    location,
+    inventory,
+    comingSoon,
+    settings,
+    className,
+    availabilityText,
+    availabilityTextColor
+  }), [availabilityText, availabilityTextColor, className, comingSoon, inventory, location, settings]);
+  return /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: PRODUCT_LOCATION_STOCK_INFO,
+    portalProps: portalProps
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classNames(defaultClassName, css(className).toString())
+  }, /*#__PURE__*/React.createElement(StockInfoInventory, {
+    availabilityText: availabilityText,
+    comingSoon: comingSoon,
+    location: location,
+    inventory: inventory,
+    maxNumberVisible: settings.maxNumberOfVisibleInventory,
+    aboveMaxExtension: settings.aboveMaxExtension
+  })));
+};
+StockInfoUnwrapped.defaultProps = {
+  className: null,
+  inventory: null
+};
+export const StockInfo = connect(makeMapStateToProps)(StockInfoUnwrapped);

package/locations/components/StockInfo/StockInfoInventory.js

@@ -1,4 +1,8 @@
-import*as React from'react';import PropTypes from'prop-types';import{I18n}from"../../../components";/**
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { I18n } from "../../../components";
+
+/**
  * Renders the inventory given by the location into a given translation string.
  * @param {Object} props The component props.
  * @param {string} props.availabilityText The translation string to use.
@@ -6,4 +10,36 @@ import*as React from'react';import PropTypes from'prop-types';import{I18n}from".
  * @param {number|undefined} props.maxNumberVisible The component props.
  * @param {string} props.aboveMaxExtension The component props.
  * @return {JSX}
- */export function StockInfoInventory(props){var availabilityText=props.availabilityText,comingSoon=props.comingSoon,location=props.location,inventory=props.inventory,maxNumberVisible=props.maxNumberVisible,aboveMaxExtension=props.aboveMaxExtension;var visibleInventory=React.useMemo(function(){if(!location||!inventory){return null;}if(inventory.visible!==null&&inventory.visible>maxNumberVisible){return"".concat(maxNumberVisible).concat(aboveMaxExtension);}return inventory.visible;},[aboveMaxExtension,inventory,location,maxNumberVisible]);if((!location||!availabilityText||!inventory)&&!comingSoon){return null;}return React.createElement(I18n.Text,{string:availabilityText,params:{visibleInventory:visibleInventory}});}StockInfoInventory.defaultProps={comingSoon:false,inventory:null};
+ */
+export function StockInfoInventory(props) {
+  const {
+    availabilityText,
+    comingSoon,
+    location,
+    inventory,
+    maxNumberVisible,
+    aboveMaxExtension
+  } = props;
+  const visibleInventory = React.useMemo(() => {
+    if (!location || !inventory) {
+      return null;
+    }
+    if (inventory.visible !== null && inventory.visible > maxNumberVisible) {
+      return `${maxNumberVisible}${aboveMaxExtension}`;
+    }
+    return inventory.visible;
+  }, [aboveMaxExtension, inventory, location, maxNumberVisible]);
+  if ((!location || !availabilityText || !inventory) && !comingSoon) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(I18n.Text, {
+    string: availabilityText,
+    params: {
+      visibleInventory
+    }
+  });
+}
+StockInfoInventory.defaultProps = {
+  comingSoon: false,
+  inventory: null
+};

package/locations/components/StockInfo/index.js

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

package/locations/components/StockInfoLists/index.js

@@ -1,9 +1,85 @@
-import React from'react';import{css}from'glamor';import{connect}from'react-redux';import PlaceholderLabel from'@shopgate/pwa-ui-shared/PlaceholderLabel';import PropTypes from'prop-types';import{getPreferredLocation,makeGetLocationInventory}from"../../selectors";import{I18n,SurroundPortals}from"../../../components";import{StockInfo}from"../StockInfo";import{PRODUCT_LOCATION_STOCK_INFO_LIST}from"../../constants/Portals";import{showInventoryInLists}from"../../helpers/showInventoryInLists";/**
+import React from 'react';
+import { css } from 'glamor';
+import { connect } from 'react-redux';
+import PlaceholderLabel from '@shopgate/pwa-ui-shared/PlaceholderLabel';
+import PropTypes from 'prop-types';
+import { getPreferredLocation, makeGetLocationInventory } from "../../selectors";
+import { I18n, SurroundPortals } from "../../../components";
+import { StockInfo } from "../StockInfo";
+import { PRODUCT_LOCATION_STOCK_INFO_LIST } from "../../constants/Portals";
+import { showInventoryInLists } from "../../helpers/showInventoryInLists";
+
+/**
  * Creates a mapper for redux.
  * @returns {Function}
  *
- */var makeMapStateToProps=function makeMapStateToProps(){var getInventory=makeGetLocationInventory(function(_,props){var _getPreferredLocation;return(_getPreferredLocation=getPreferredLocation(_,props))===null||_getPreferredLocation===void 0?void 0:_getPreferredLocation.code;},function(_,props){var _props$product;return props.productId||((_props$product=props.product)===null||_props$product===void 0?void 0:_props$product.id);});return function(state,props){return{inventory:getInventory(state,props),preferredLocation:getPreferredLocation(state,props),showStockInfo:showInventoryInLists(state)};};};var styles={wrapper:css({flexDirection:'row',alignItems:'flex-end',fontSize:'0.65rem'}),text:css({margin:'0 !important'}).toString(),location:css({marginLeft:'0 !important'})};/**
+ */
+const makeMapStateToProps = () => {
+  const getInventory = makeGetLocationInventory((_, props) => getPreferredLocation(_, props)?.code, (_, props) => props.productId || props.product?.id);
+  return (state, props) => ({
+    inventory: getInventory(state, props),
+    preferredLocation: getPreferredLocation(state, props),
+    showStockInfo: showInventoryInLists(state)
+  });
+};
+const styles = {
+  wrapper: css({
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    fontSize: '0.65rem'
+  }),
+  text: css({
+    margin: '0 !important'
+  }).toString(),
+  location: css({
+    marginLeft: '0 !important'
+  })
+};
+
+/**
  * Renders visible stock information based on the given location.
  * @param {Object} props The component props.
  * @return {JSX}
- */var StockInfoLists=function StockInfoLists(_ref){var preferredLocation=_ref.preferredLocation,product=_ref.product,inventory=_ref.inventory,showStockInfo=_ref.showStockInfo;if(!showStockInfo||!preferredLocation){return null;}var portalProps={inventory:inventory,location:preferredLocation,product:product};/* eslint-disable jsx-a11y/aria-role */return React.createElement(SurroundPortals,{portalName:PRODUCT_LOCATION_STOCK_INFO_LIST,portalProps:portalProps},React.createElement("div",{className:styles.wrapper,role:"text"},React.createElement(PlaceholderLabel,{ready:!!inventory},React.createElement(StockInfo,{product:product,location:preferredLocation}),' ',React.createElement(I18n.Text,{string:"locations.stock_info.pick_up_at",params:{storeName:''},className:styles.text}),' ',React.createElement("span",{className:styles.location},preferredLocation.name))));/* eslint-enable jsx-a11y/aria-role */};StockInfoLists.defaultProps={inventory:null,preferredLocation:null};export default connect(makeMapStateToProps)(StockInfoLists);
+ */
+const StockInfoLists = ({
+  preferredLocation,
+  product,
+  inventory,
+  showStockInfo
+}) => {
+  if (!showStockInfo || !preferredLocation) {
+    return null;
+  }
+  const portalProps = {
+    inventory,
+    location: preferredLocation,
+    product
+  };
+  /* eslint-disable jsx-a11y/aria-role */
+  return /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: PRODUCT_LOCATION_STOCK_INFO_LIST,
+    portalProps: portalProps
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.wrapper,
+    role: "text"
+  }, /*#__PURE__*/React.createElement(PlaceholderLabel, {
+    ready: !!inventory
+  }, /*#__PURE__*/React.createElement(StockInfo, {
+    product: product,
+    location: preferredLocation
+  }), ' ', /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "locations.stock_info.pick_up_at",
+    params: {
+      storeName: ''
+    },
+    className: styles.text
+  }), ' ', /*#__PURE__*/React.createElement("span", {
+    className: styles.location
+  }, preferredLocation.name))));
+  /* eslint-enable jsx-a11y/aria-role */
+};
+StockInfoLists.defaultProps = {
+  inventory: null,
+  preferredLocation: null
+};
+export default connect(makeMapStateToProps)(StockInfoLists);

package/locations/components/StoreDetails/components/FindMoreStores.js

@@ -1,4 +1,86 @@
-import React from'react';import{css}from'glamor';import{i18n}from'@shopgate/engage/core/helpers';import{MagnifierIcon,LocatorIcon,Link}from'@shopgate/engage/components';import{themeColors}from'@shopgate/pwa-common/helpers/config';import classNames from'classnames';import{STORE_FINDER_PATTERN}from"../../../constants";var styles={container:css({margin:'16px 0px'}),title:css({fontSize:'20px',fontWeight:'500',color:'var(--color-primary)',marginBottom:'8px'}),inputCell:css({gridArea:'input'}),inputContainer:css({position:'relative',background:themeColors.light,border:"1px solid ".concat(themeColors.shade7),borderRadius:4,display:'flex',alignItems:'center',width:'100%'}),inputIcon:css({padding:0,margin:'0 8px',color:themeColors.shade9,fontSize:'1.23rem',flexShrink:0,outline:0}),input:css({margin:'3px 0',width:'100%',lineHeight:'28px',outline:'none',verticalAlign:'middle',WebkitAppearance:'none'}),inputOverlay:css({position:'absolute',height:'100%',width:'100%'})};/**
+import React from 'react';
+import { css } from 'glamor';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { MagnifierIcon, LocatorIcon, Link } from '@shopgate/engage/components';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+import classNames from 'classnames';
+import { STORE_FINDER_PATTERN } from "../../../constants";
+const styles = {
+  container: css({
+    margin: '16px 0px'
+  }),
+  title: css({
+    fontSize: '20px',
+    fontWeight: '500',
+    color: 'var(--color-primary)',
+    marginBottom: '8px'
+  }),
+  inputCell: css({
+    gridArea: 'input'
+  }),
+  inputContainer: css({
+    position: 'relative',
+    background: themeColors.light,
+    border: `1px solid ${themeColors.shade7}`,
+    borderRadius: 4,
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%'
+  }),
+  inputIcon: css({
+    padding: 0,
+    margin: '0 8px',
+    color: themeColors.shade9,
+    fontSize: '1.23rem',
+    flexShrink: 0,
+    outline: 0
+  }),
+  input: css({
+    margin: '3px 0',
+    width: '100%',
+    lineHeight: '28px',
+    outline: 'none',
+    verticalAlign: 'middle',
+    WebkitAppearance: 'none'
+  }),
+  inputOverlay: css({
+    position: 'absolute',
+    height: '100%',
+    width: '100%'
+  })
+};
+
+/**
  * Find more stores component.
   * @returns {JSX}
-  * */var FindMoreStores=function FindMoreStores(){return React.createElement("div",{className:styles.container},React.createElement("div",{className:styles.title,"aria-hidden":true},i18n.text('location.findMoreStores')),React.createElement("div",{className:styles.inputCell},React.createElement("div",{className:styles.inputContainer},React.createElement("span",{className:styles.inputIcon,"aria-hidden":true},React.createElement(MagnifierIcon,null)),React.createElement("input",{name:"postalCode",className:styles.input,disabled:true,type:"search",autoComplete:"off",autoCorrect:"off",placeholder:"","aria-hidden":true}),React.createElement("div",{className:styles.inputIcon},React.createElement(LocatorIcon,null)),React.createElement(Link,{href:STORE_FINDER_PATTERN,className:classNames(styles.inputOverlay),role:"button","aria-label":i18n.text('location.findMoreStores')},React.createElement("div",null)))));};export default FindMoreStores;
+  * */
+const FindMoreStores = () => /*#__PURE__*/React.createElement("div", {
+  className: styles.container
+}, /*#__PURE__*/React.createElement("div", {
+  className: styles.title,
+  "aria-hidden": true
+}, i18n.text('location.findMoreStores')), /*#__PURE__*/React.createElement("div", {
+  className: styles.inputCell
+}, /*#__PURE__*/React.createElement("div", {
+  className: styles.inputContainer
+}, /*#__PURE__*/React.createElement("span", {
+  className: styles.inputIcon,
+  "aria-hidden": true
+}, /*#__PURE__*/React.createElement(MagnifierIcon, null)), /*#__PURE__*/React.createElement("input", {
+  name: "postalCode",
+  className: styles.input,
+  disabled: true,
+  type: "search",
+  autoComplete: "off",
+  autoCorrect: "off",
+  placeholder: "",
+  "aria-hidden": true
+}), /*#__PURE__*/React.createElement("div", {
+  className: styles.inputIcon
+}, /*#__PURE__*/React.createElement(LocatorIcon, null)), /*#__PURE__*/React.createElement(Link, {
+  href: STORE_FINDER_PATTERN,
+  className: classNames(styles.inputOverlay),
+  role: "button",
+  "aria-label": i18n.text('location.findMoreStores')
+}, /*#__PURE__*/React.createElement("div", null)))));
+export default FindMoreStores;

package/locations/components/StoreDetails/components/GetDirectionsButton.js

@@ -1,7 +1,50 @@
-import React,{useMemo}from'react';import{css}from'glamor';import{historyPush}from'@shopgate/pwa-common/actions/router';import PropTypes from'prop-types';import{Button}from'@shopgate/engage/components';import{generateGoogleMapsDirectionsUrl,i18n}from'@shopgate/engage/core';import{useDispatch}from'react-redux';var styles={container:css({}),buttonText:css({color:'var(--color-primary)'})};/**
+import React, { useMemo } from 'react';
+import { css } from 'glamor';
+import { historyPush } from '@shopgate/pwa-common/actions/router';
+import PropTypes from 'prop-types';
+import { Button } from '@shopgate/engage/components';
+import { generateGoogleMapsDirectionsUrl, i18n } from '@shopgate/engage/core';
+import { useDispatch } from 'react-redux';
+const styles = {
+  container: css({}),
+  buttonText: css({
+    color: 'var(--color-primary)'
+  })
+};
+
+/**
  * @param {Object} props The component props
  * @param {Object} props.address The address object.
  * @returns {JSX}
- */var GetDirectionsButton=function GetDirectionsButton(_ref){var address=_ref.address;var dispatch=useDispatch();var url=useMemo(function(){return address&&generateGoogleMapsDirectionsUrl(address);},[address]);/**
+ */
+const GetDirectionsButton = ({
+  address
+}) => {
+  const dispatch = useDispatch();
+  const url = useMemo(() => address && generateGoogleMapsDirectionsUrl(address), [address]);
+
+  /**
    * Handles the button click.
-   */var handleClick=function handleClick(){dispatch(historyPush({pathname:url,state:{target:'_blank'}}));};return React.createElement("div",{className:styles.container},React.createElement(Button,{onClick:handleClick,role:"button",type:"plain"},React.createElement("span",{className:styles.buttonText},i18n.text('location.getDirections'))));};GetDirectionsButton.defaultProps={address:null};export default GetDirectionsButton;
+   */
+  const handleClick = () => {
+    dispatch(historyPush({
+      pathname: url,
+      state: {
+        target: '_blank'
+      }
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleClick,
+    role: "button",
+    type: "plain"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.buttonText
+  }, i18n.text('location.getDirections'))));
+};
+GetDirectionsButton.defaultProps = {
+  address: null
+};
+export default GetDirectionsButton;

package/locations/components/StoreDetails/components/StoreDetails.js

@@ -1,5 +1,174 @@
-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,{useContext,useMemo}from'react';import{css}from'glamor';import{LocationIcon,Button,Link,ConditionalWrapper}from'@shopgate/engage/components';import{getWeekDaysOrder}from'@shopgate/engage/core';import{i18n}from'@shopgate/engage/core/helpers';import classNames from'classnames';import moment from'moment';import{StoreDetailsContext}from"../../../providers/StoreDetailsContext";import GetDirectionsButton from"./GetDirectionsButton";var styles={headerWrapper:css({display:'flex'}),headerIcon:css({color:'var(--color-primary)',fontSize:20,alignContent:'center',marginRight:4}),header:css({color:'var(--color-primary)',fontWeight:'600',fontSize:20}),locationName:css({fontSize:20,fontWeight:'600',marginBottom:8}),locationRow:css({display:'flex',gap:8,flexWrap:'wrap'}),locationColumn:css({flex:1,minWidth:'200px','& > p':{margin:0}}),storeHoursColumn:css({flex:1,minWidth:'250px',maxWidth:'455px'}),storeHours:css({fontSize:17,fontWeight:'600'}),storeHoursLine:css({}),storeHoursWeekday:css({textAlign:'left'}),bold:css({fontWeight:'600'}),storeHoursOpeningTime:css({textAlign:'right'}),phone:css({fontSize:17,fontWeight:'600'}),phoneNumber:css({textDecoration:'underline'}),makeMyStoreButton:css({color:'var(--color-primary)'}),comingSoon:css({fontStyle:'italic'}),buttonRow:css({display:'flex',alignItems:'center',gap:'8px 30px',flexWrap:'wrap',margin:'8px 0'})};/**
+import React, { useContext, useMemo } from 'react';
+import { css } from 'glamor';
+import { LocationIcon, Button, Link, ConditionalWrapper } from '@shopgate/engage/components';
+import { getWeekDaysOrder } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
+import classNames from 'classnames';
+import moment from 'moment';
+import { StoreDetailsContext } from "../../../providers/StoreDetailsContext";
+import GetDirectionsButton from "./GetDirectionsButton";
+const styles = {
+  headerWrapper: css({
+    display: 'flex'
+  }),
+  headerIcon: css({
+    color: 'var(--color-primary)',
+    fontSize: 20,
+    alignContent: 'center',
+    marginRight: 4
+  }),
+  header: css({
+    color: 'var(--color-primary)',
+    fontWeight: '600',
+    fontSize: 20
+  }),
+  locationName: css({
+    fontSize: 20,
+    fontWeight: '600',
+    marginBottom: 8
+  }),
+  locationRow: css({
+    display: 'flex',
+    gap: 8,
+    flexWrap: 'wrap'
+  }),
+  locationColumn: css({
+    flex: 1,
+    minWidth: '200px',
+    '& > p': {
+      margin: 0
+    }
+  }),
+  storeHoursColumn: css({
+    flex: 1,
+    minWidth: '250px',
+    maxWidth: '455px'
+  }),
+  storeHours: css({
+    fontSize: 17,
+    fontWeight: '600'
+  }),
+  storeHoursLine: css({}),
+  storeHoursWeekday: css({
+    textAlign: 'left'
+  }),
+  bold: css({
+    fontWeight: '600'
+  }),
+  storeHoursOpeningTime: css({
+    textAlign: 'right'
+  }),
+  phone: css({
+    fontSize: 17,
+    fontWeight: '600'
+  }),
+  phoneNumber: css({
+    textDecoration: 'underline'
+  }),
+  makeMyStoreButton: css({
+    color: 'var(--color-primary)'
+  }),
+  comingSoon: css({
+    fontStyle: 'italic'
+  }),
+  buttonRow: css({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px 30px',
+    flexWrap: 'wrap',
+    margin: '8px 0'
+  })
+};
+
+/**
  * Store details component.
   * @returns {JSX}
-  */var StoreDetails=function StoreDetails(){var _useContext=useContext(StoreDetailsContext),selectLocation=_useContext.selectLocation,routeLocation=_useContext.routeLocation,isRouteLocationPreferred=_useContext.isRouteLocationPreferred;var _ref=routeLocation||{},_ref$address=_ref.address,address=_ref$address===void 0?{}:_ref$address,_ref$operationHours=_ref.operationHours,operationHours=_ref$operationHours===void 0?{}:_ref$operationHours,isComingSoon=_ref.isComingSoon;var currentDay=moment().format('ddd').toLowerCase();// Check if there are any opening hours to hide the section if not
-var hasOpeningHours=useMemo(function(){return Object.keys(operationHours).length>0&&Object.values(operationHours).some(function(value){return value&&typeof value==='string'&&value.length>0;});},[operationHours]);if(!routeLocation){return null;}return React.createElement("div",null,React.createElement(ConditionalWrapper,{condition:!isRouteLocationPreferred,wrapper:function wrapper(children){return React.createElement(Button,{onClick:function onClick(){return selectLocation(routeLocation,true);},role:"button",type:"plain"},children);}},React.createElement("div",{className:styles.headerWrapper},React.createElement("div",{className:styles.headerIcon},React.createElement(LocationIcon,{className:styles.icon,size:20})),React.createElement("div",{className:styles.header},isRouteLocationPreferred?i18n.text('location.myStore'):i18n.text('location.makeMyStore')))),React.createElement("div",{className:styles.locationName},routeLocation.name),React.createElement("div",{className:styles.locationRow},React.createElement("div",{className:styles.locationColumn},React.createElement("p",null,address===null||address===void 0?void 0:address.street),(address===null||address===void 0?void 0:address.street2)&&address.street2!==''&&React.createElement("p",null,address.street2),(address===null||address===void 0?void 0:address.street3)&&address.street3!==''&&React.createElement("p",null,address.street3),(address===null||address===void 0?void 0:address.street4)&&address.street4!==''&&React.createElement("p",null,address.street4),React.createElement("p",null,i18n.text('locations.address',address)),React.createElement("div",{className:styles.buttonRow},React.createElement(GetDirectionsButton,{address:address}),!isComingSoon&&!isRouteLocationPreferred&&React.createElement(Button,{onClick:function onClick(){return selectLocation(routeLocation,true);},role:"button",type:"plain",className:classNames(styles.makeMyStoreButton)},React.createElement("span",null,i18n.text('location.makeMyStore'))),isComingSoon&&React.createElement("div",{className:styles.comingSoon},i18n.text('location.comingSoon'))),(address===null||address===void 0?void 0:address.phoneNumber)&&React.createElement(React.Fragment,null,React.createElement("div",{className:styles.phone},"".concat(i18n.text('location.phone'),": ")),React.createElement("div",{className:styles.phoneNumber},React.createElement(Link,{href:"tel:".concat(address.phoneNumber),className:classNames(styles.phoneNumber),target:"_blank",role:"button","aria-label":address.phoneNumber},address.phoneNumber)))),hasOpeningHours&&React.createElement("div",{className:styles.storeHoursColumn},React.createElement("div",{className:styles.storeHours},"".concat(i18n.text('location.storeHours'),":")),React.createElement("table",null,React.createElement("tbody",null,getWeekDaysOrder().map(function(weekDay){if(!operationHours[weekDay]){return null;}return React.createElement("tr",{className:styles.storeHoursLine,key:weekDay,"aria-label":"".concat(i18n.text("locations.".concat(weekDay)),": ").concat(operationHours[weekDay]),tabIndex:0},React.createElement("td",{className:classNames(styles.storeHoursWeekday,_defineProperty({},styles.bold,weekDay===currentDay)),"aria-hidden":true},"".concat(i18n.text("locations.".concat(weekDay)),":")),React.createElement("td",{className:classNames(styles.storeHoursOpeningTime,_defineProperty({},styles.bold,weekDay===currentDay)),"aria-hidden":true},operationHours[weekDay]));}))))));};export default StoreDetails;
+  */
+const StoreDetails = () => {
+  const {
+    selectLocation,
+    routeLocation,
+    isRouteLocationPreferred
+  } = useContext(StoreDetailsContext);
+  const {
+    address = {},
+    operationHours = {},
+    isComingSoon
+  } = routeLocation || {};
+  const currentDay = moment().format('ddd').toLowerCase();
+
+  // Check if there are any opening hours to hide the section if not
+  const hasOpeningHours = useMemo(() => Object.keys(operationHours).length > 0 && Object.values(operationHours).some(value => value && typeof value === 'string' && value.length > 0), [operationHours]);
+  if (!routeLocation) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ConditionalWrapper, {
+    condition: !isRouteLocationPreferred,
+    wrapper: children => /*#__PURE__*/React.createElement(Button, {
+      onClick: () => selectLocation(routeLocation, true),
+      role: "button",
+      type: "plain"
+    }, children)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.headerWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.headerIcon
+  }, /*#__PURE__*/React.createElement(LocationIcon, {
+    className: styles.icon,
+    size: 20
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.header
+  }, isRouteLocationPreferred ? i18n.text('location.myStore') : i18n.text('location.makeMyStore')))), /*#__PURE__*/React.createElement("div", {
+    className: styles.locationName
+  }, routeLocation.name), /*#__PURE__*/React.createElement("div", {
+    className: styles.locationRow
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.locationColumn
+  }, /*#__PURE__*/React.createElement("p", null, address?.street), address?.street2 && address.street2 !== '' && /*#__PURE__*/React.createElement("p", null, address.street2), address?.street3 && address.street3 !== '' && /*#__PURE__*/React.createElement("p", null, address.street3), address?.street4 && address.street4 !== '' && /*#__PURE__*/React.createElement("p", null, address.street4), /*#__PURE__*/React.createElement("p", null, i18n.text('locations.address', address)), /*#__PURE__*/React.createElement("div", {
+    className: styles.buttonRow
+  }, /*#__PURE__*/React.createElement(GetDirectionsButton, {
+    address: address
+  }), !isComingSoon && !isRouteLocationPreferred && /*#__PURE__*/React.createElement(Button, {
+    onClick: () => selectLocation(routeLocation, true),
+    role: "button",
+    type: "plain",
+    className: classNames(styles.makeMyStoreButton)
+  }, /*#__PURE__*/React.createElement("span", null, i18n.text('location.makeMyStore'))), isComingSoon && /*#__PURE__*/React.createElement("div", {
+    className: styles.comingSoon
+  }, i18n.text('location.comingSoon'))), address?.phoneNumber && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles.phone
+  }, `${i18n.text('location.phone')}: `), /*#__PURE__*/React.createElement("div", {
+    className: styles.phoneNumber
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: `tel:${address.phoneNumber}`,
+    className: classNames(styles.phoneNumber),
+    target: "_blank",
+    role: "button",
+    "aria-label": address.phoneNumber
+  }, address.phoneNumber)))), hasOpeningHours && /*#__PURE__*/React.createElement("div", {
+    className: styles.storeHoursColumn
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.storeHours
+  }, `${i18n.text('location.storeHours')}:`), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, getWeekDaysOrder().map(weekDay => {
+    if (!operationHours[weekDay]) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("tr", {
+      className: styles.storeHoursLine,
+      key: weekDay,
+      "aria-label": `${i18n.text(`locations.${weekDay}`)}: ${operationHours[weekDay]}`,
+      tabIndex: 0
+    }, /*#__PURE__*/React.createElement("td", {
+      className: classNames(styles.storeHoursWeekday, {
+        [styles.bold]: weekDay === currentDay
+      }),
+      "aria-hidden": true
+    }, `${i18n.text(`locations.${weekDay}`)}:`), /*#__PURE__*/React.createElement("td", {
+      className: classNames(styles.storeHoursOpeningTime, {
+        [styles.bold]: weekDay === currentDay
+      }),
+      "aria-hidden": true
+    }, operationHours[weekDay]));
+  }))))));
+};
+export default StoreDetails;