@shopgate/engage 7.30.4-beta.1 → 7.31.0-alpha.2

package/locations/components/StoreFinder/StoreFinderSelectLocationButton.js

@@ -1,17 +1,33 @@
 import React, { useCallback, useContext, useMemo } from 'react';
 import { RippleButton } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import { StoreContext } from "./Store.context";
-import { i18n } from "../../../core";
+import { i18n } from "../../../core/helpers";
 import { StoreFinderContext } from "../../locations.context";
-import { selectLocationButton, selectLocationButtonWrapper } from "../StoreList/Store.style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  selectLocationButtonWrapper: {
+    padding: theme.spacing(0, 2, 1, 2)
+  },
+  selectLocationButton: {
+    width: '100%',
+    fontSize: '.875rem !important',
+    ':not(:disabled)': {
+      background: 'var(--color-primary)!important',
+      color: 'var(--color-primary-contrast)!important'
+    }
+  }
+}));
 
 /**
  * The StoreFinderSelectLocationButton component.
  * Renders if route query.selectLocation param is passed
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export const StoreFinderSelectLocationButton = () => {
+  const {
+    classes
+  } = useStyles();
   const store = useContext(StoreContext);
   const {
     selectLocation,
@@ -24,10 +40,10 @@ export const StoreFinderSelectLocationButton = () => {
   }, [selectLocation, store]);
   const isSelected = useMemo(() => selectedLocation?.code === store?.code, [selectedLocation, store]);
   return /*#__PURE__*/_jsx("div", {
-    className: selectLocationButtonWrapper,
+    className: classes.selectLocationButtonWrapper,
     children: /*#__PURE__*/_jsx(RippleButton, {
       onClick: handleClick,
-      className: selectLocationButton.toString(),
+      className: classes.selectLocationButton,
       disabled: isLoading || store?.isComingSoon || isSelected,
       children: i18n.text(store?.isComingSoon ? 'location.comingSoon' : 'locations.select_location')
     })

package/locations/components/StoreFinder/StoreFinderStoreInfoButton.js

@@ -1,32 +1,27 @@
 import React, { useCallback, useContext } from 'react';
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { RippleButton } from '@shopgate/engage/components';
 import { historyPush } from '@shopgate/engage/core';
 import { connect } from 'react-redux';
-import { css } from 'glamor';
-import { themeColors, themeVariables } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import { StoreContext } from "./Store.context";
 import { i18n } from "../../../core";
 import { StoreFinderContext } from "../../locations.context";
 import { STORE_DETAILS_PATH } from "../../constants";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  gap
-} = themeVariables;
-const styles = {
-  showStoreInfoButton: css({
+const useStyles = makeStyles()(theme => ({
+  showStoreInfoButton: {
     width: '100%',
     fontSize: '.875rem !important',
     ':not(:disabled)': {
-      background: `var(--color-primary, ${themeColors.primary})!important`,
-      color: `var(--color-primary-contrast, ${themeColors.primaryContrast})!important`
+      background: 'var(--color-primary)!important',
+      color: 'var(--color-primary-contrast)!important'
     }
-  }),
-  showStoreInfoButtonWrapper: css({
-    padding: `0 ${gap.big}px ${gap.small}px ${gap.big}px`
-  })
-};
+  },
+  showStoreInfoButtonWrapper: {
+    padding: theme.spacing(0, 2, 1, 2)
+  }
+}));
 
 /**
  * @param {Function} dispatch The dispatch function.
@@ -46,6 +41,9 @@ const mapDispatchToProps = dispatch => ({
 const StoreFinderStoreInfoButton = ({
   openStoreDetail
 }) => {
+  const {
+    classes
+  } = useStyles();
   const store = useContext(StoreContext);
   const {
     isLoading
@@ -55,10 +53,10 @@ const StoreFinderStoreInfoButton = ({
     openStoreDetail(store?.code);
   }, [openStoreDetail, store]);
   return /*#__PURE__*/_jsx("div", {
-    className: styles.showStoreInfoButtonWrapper,
+    className: classes.showStoreInfoButtonWrapper,
     children: /*#__PURE__*/_jsx(RippleButton, {
       onClick: handleClick,
-      className: classNames(styles.showStoreInfoButton),
+      className: classes.showStoreInfoButton,
       disabled: isLoading,
       children: i18n.text('locations.store_info')
     })

package/locations/components/StoreList/StoreAddress.js

@@ -1,11 +1,31 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
 import { StoreContext } from "./Store.context";
 import { FulfillmentContext } from "../../locations.context";
 import { StockInfo } from "../StockInfo";
 import { LocationIcon } from "../../../components";
-import { i18n } from "../../../core";
-import { address as container, addressIcon, stockInfoContainer } from "./Store.style";
+import { i18n } from "../../../core/helpers";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    display: 'flex',
+    flexFlow: 'row nowrap',
+    color: 'var(--color-text-medium-emphasis)',
+    marginBottom: 4
+  },
+  addressIcon: {
+    color: 'var(--color-text-medium-emphasis)',
+    fontSize: '1.4rem',
+    padding: theme.spacing(0.5, 2, 0, 0)
+  },
+  stockInfoContainer: {
+    marginTop: 8,
+    ':empty': {
+      display: 'none'
+    }
+  }
+}));
 
 /**
  * Renders the pickup location's address information.
@@ -14,11 +34,13 @@ import { address as container, addressIcon, stockInfoContainer } from "./Store.s
  * @param {boolean} props.pure Whether to only render the address without any wrapper components.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StoreAddress({
   address,
   pure
 }) {
+  const {
+    classes
+  } = useStyles();
   const store = React.useContext(StoreContext);
   const {
     product
@@ -45,14 +67,14 @@ export function StoreAddress({
     return addressContent;
   }
   return /*#__PURE__*/_jsxs("div", {
-    className: container,
+    className: classes.container,
     children: [/*#__PURE__*/_jsx("div", {
-      className: addressIcon,
+      className: classes.addressIcon,
       "aria-hidden": true,
       children: /*#__PURE__*/_jsx(LocationIcon, {})
     }), /*#__PURE__*/_jsxs("div", {
       children: [addressContent, product && /*#__PURE__*/_jsx("div", {
-        className: stockInfoContainer,
+        className: classes.stockInfoContainer,
         children: /*#__PURE__*/_jsx(StockInfo, {
           location: store,
           product: product,

package/locations/components/StoreList/StoreAddressShort.js

@@ -1,9 +1,21 @@
-import React, { Fragment, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { i18n, generateGoogleMapsDirectionsUrl } from '@shopgate/engage/core';
+import { makeStyles } from '@shopgate/engage/styles';
 import { LocationIcon, Link, Ellipsis, I18n } from '@shopgate/engage/components';
 import { StoreDetailsLine } from "./StoreDetailsLine";
-import { detailsPrimary, detailsSecondary } from "./Store.style";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  detailsPrimary: {
+    margin: 0,
+    color: 'var(--color-primary)',
+    lineHeight: '1.375rem'
+  },
+  detailsSecondary: {
+    color: 'var(--color-text-medium-emphasis)',
+    fontSize: '0.75rem'
+  }
+});
 
 /**
  * Renders the pickup location's address information.
@@ -12,11 +24,13 @@ import { detailsPrimary, detailsSecondary } from "./Store.style";
  * @param {boolean} props.showFull Whether to show the full address.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function StoreAddressShort({
   address,
   showFull
 }) {
+  const {
+    classes
+  } = useStyles();
   const mapsUrl = useMemo(() => address && generateGoogleMapsDirectionsUrl(address), [address]);
   if (!address) {
     return null;
@@ -32,25 +46,25 @@ export function StoreAddressShort({
       linked: true,
       children: [showFull && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx("p", {
-          className: detailsPrimary,
+          className: classes.detailsPrimary,
           children: address.street
         }), address.street2 && address.street2 !== '' && /*#__PURE__*/_jsx("p", {
-          className: detailsPrimary,
+          className: classes.detailsPrimary,
           children: address.street2
         }), address.street3 && address.street3 !== '' && /*#__PURE__*/_jsx("p", {
-          className: detailsPrimary,
+          className: classes.detailsPrimary,
           children: address.street3
         }), address.street4 && address.street4 !== '' && /*#__PURE__*/_jsx("p", {
-          className: detailsPrimary,
+          className: classes.detailsPrimary,
           children: address.street4
         })]
       }), /*#__PURE__*/_jsx(Ellipsis, {
         rows: 1,
-        className: detailsPrimary,
+        className: classes.detailsPrimary,
         children: i18n.text('locations.address', address)
       }), /*#__PURE__*/_jsx(I18n.Text, {
         string: "locations.map_open",
-        className: detailsSecondary,
+        className: classes.detailsSecondary,
         "aria-label": `: ${i18n.text('locations.map_open')}`
       })]
     })

package/locations/components/StoreList/StoreCard.js

@@ -1,4 +1,4 @@
-import React, { useContext, Fragment } from 'react';
+import React, { useContext } from 'react';
 import { StoreContext } from "./Store.context";
 import { StoreHeader } from "./StoreHeader";
 import { StoreDetails } from "./StoreDetails";

package/locations/components/StoreList/StoreDetails.js

@@ -1,28 +1,41 @@
 import React, { useContext } from 'react';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { Accordion } from "../../../components";
 import { StoreContext } from "./Store.context";
 import { StoreOpeningHours } from "./StoreOpeningHours";
 import { StoreAddress } from "./StoreAddress";
 import { StorePhoneNumber } from "./StorePhoneNumber";
 import { StoreAddressShort } from "./StoreAddressShort";
-import { storeDetailsBody, storeDetailsAccordion } from "./Store.style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  storeDetailsBody: {
+    padding: theme.spacing(1, 2),
+    borderTop: `1px solid ${themeColors.shade7}`
+  },
+  storeDetailsAccordion: {
+    justifyContent: 'space-between'
+  }
+}));
 
 /**
  * Renders a single store details.
  * @returns {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StoreDetails() {
+  const {
+    classes
+  } = useStyles();
   const store = useContext(StoreContext);
   if (!store) {
     return null;
   }
   return /*#__PURE__*/_jsxs(Accordion, {
-    className: storeDetailsAccordion,
+    className: classes.storeDetailsAccordion,
     renderLabel: () => /*#__PURE__*/_jsx(StoreAddress, {
       address: store.address
     }),
-    contentClassName: storeDetailsBody,
+    contentClassName: classes.storeDetailsBody,
     children: [/*#__PURE__*/_jsx(StoreOpeningHours, {
       hours: store.operationHours
     }), store.address && /*#__PURE__*/_jsx(StorePhoneNumber, {

package/locations/components/StoreList/StoreDetailsLine.js

@@ -1,8 +1,24 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { Grid } from '@shopgate/engage/components';
-import { detailsLine, detailsIcon, detailsIconLinked, details } from "./Store.style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  detailsLine: {
+    marginTop: theme.spacing(1.5)
+  },
+  detailsIcon: {
+    color: 'var(--color-text-medium-emphasis)',
+    fontSize: '1.4rem',
+    padding: theme.spacing(0.5, 2, 0, 0)
+  },
+  detailsIconLinked: {
+    color: 'var(--color-primary)'
+  },
+  details: {
+    paddingTop: theme.spacing(0.5)
+  }
+}));
 
 /**
  * Renders a single store headline.
@@ -12,25 +28,28 @@ import { detailsLine, detailsIcon, detailsIconLinked, details } from "./Store.st
  * @param {React.ReactNode} props.children The component children.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StoreDetailsLine({
   icon: Icon,
   children,
   linked
 }) {
+  const {
+    classes,
+    cx
+  } = useStyles();
   return /*#__PURE__*/_jsxs(Grid, {
-    className: detailsLine,
+    className: classes.detailsLine,
     children: [/*#__PURE__*/_jsx(Grid.Item, {
       shrink: 0,
-      className: classNames(detailsIcon, {
-        [detailsIconLinked]: linked
+      className: cx(classes.detailsIcon, {
+        [classes.detailsIconLinked]: linked
       }),
       children: /*#__PURE__*/_jsx(Icon, {
         "aria-hidden": true
       })
     }), /*#__PURE__*/_jsx(Grid.Item, {
       grow: 1,
-      className: details,
+      className: classes.details,
       children: children
     })]
   });

package/locations/components/StoreList/StoreDistance.js

@@ -1,8 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import formatDistance from "../../helpers/formatDistance";
-import { storeDistance } from "./Store.style";
 import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  storeDistance: {
+    whiteSpace: 'nowrap',
+    color: 'var(--color-text-medium-emphasis)',
+    [responsiveMediaQuery('>sm', {
+      webOnly: true
+    })]: {
+      fontSize: '0.875rem'
+    }
+  }
+});
 export const UNIT_SYSTEM_METRIC = 'metric';
 export const UNIT_SYSTEM_IMPERIAL = 'imperial';
 
@@ -17,11 +28,14 @@ export function StoreDistance({
   distance = null,
   unitSystem = UNIT_SYSTEM_METRIC
 }) {
+  const {
+    classes
+  } = useStyles();
   if (distance === null) {
     return null;
   }
   return /*#__PURE__*/_jsx("span", {
-    className: storeDistance,
+    className: classes.storeDistance,
     children: formatDistance(distance, unitSystem === UNIT_SYSTEM_IMPERIAL)
   });
 }

package/locations/components/StoreList/StoreHeader.js

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import classNames from 'classnames';
 import { Grid, ResponsiveContainer } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import { isProductAvailable } from "../../helpers";
 import { FulfillmentContext } from "../../locations.context";
 import { StoreContext } from "./Store.context";
@@ -8,14 +8,30 @@ import { StoreDistance } from "./StoreDistance";
 import { StoreHoursToday } from "./StoreHoursToday";
 import { StoreSelectLocationButton } from "./StoreSelectLocationButton";
 import { StockInfo } from "../StockInfo";
-import { storeHeader, storeName, disabled } from "./Store.style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  storeHeader: {
+    cursor: 'pointer',
+    padding: theme.spacing(1, 2, 0.5)
+  },
+  storeName: {
+    fontSize: '1rem',
+    fontWeight: 500
+  },
+  disabled: {
+    cursor: 'not-allowed'
+  }
+}));
 
 /**
  * Renders a single store headline.
  * @returns {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StoreHeader() {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const store = useContext(StoreContext);
   const {
     product
@@ -27,13 +43,13 @@ export function StoreHeader() {
     unitSystem
   } = store;
   return /*#__PURE__*/_jsxs("div", {
-    className: classNames(storeHeader, {
-      [disabled]: !isAvailable
+    className: cx(classes.storeHeader, {
+      [classes.disabled]: !isAvailable
     }),
     children: [/*#__PURE__*/_jsxs(Grid, {
       children: [/*#__PURE__*/_jsxs(Grid.Item, {
         grow: 1,
-        className: storeName,
+        className: classes.storeName,
         children: [name, /*#__PURE__*/_jsx(ResponsiveContainer, {
           breakpoint: ">=sm",
           webOnly: true,

package/locations/components/StoreList/StoreHoursToday.js

@@ -1,8 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from "../../../core";
-import { storeHoursToday } from "./Store.style";
 import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  storeHoursToday: {
+    color: 'var(--color-text-medium-emphasis)'
+  }
+});
 const weekdays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
 
 /**
@@ -16,6 +21,9 @@ export function StoreHoursToday({
   hours,
   longLabel
 }) {
+  const {
+    classes
+  } = useStyles();
   if (!hours) {
     return null;
   }
@@ -26,7 +34,7 @@ export function StoreHoursToday({
   }
   const label = longLabel ? 'locations.today_hours_long' : 'locations.today_hours';
   return /*#__PURE__*/_jsx("div", {
-    className: storeHoursToday,
+    className: classes.storeHoursToday,
     children: i18n.text(label, {
       hours: hoursToday
     })

package/locations/components/StoreList/StoreListLocations.js

@@ -1,18 +1,45 @@
 import React, { useContext } from 'react';
 import { CardList, SurroundPortals } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import PlaceholderLabel from '@shopgate/pwa-ui-shared/PlaceholderLabel';
 import { FulfillmentContext } from "../../locations.context";
 import { StoreContext } from "./Store.context";
 import { StoreCard } from "./StoreCard";
-import { stores, storeCard, storeCardPlaceholder } from "./Store.style";
 import { FULFILLMENT_SHEET_STORE_LIST } from "../../constants/Portals";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  stores: {
+    background: 'var(--color-background-accent)',
+    padding: theme.spacing(1.5, 1.5, 2),
+    fontSize: '0.875rem',
+    boxShadow: 'inset rgba(0, 0, 0, .117647) 0 1px 6px, inset rgba(0, 0, 0, .117647) 0 1px 4px'
+  },
+  storeCard: {
+    background: themeColors.light,
+    marginBottom: theme.spacing(1.5),
+    ':last-of-type': {
+      marginBottom: 0
+    },
+    border: `1px solid ${themeColors.shade7}`,
+    boxSizing: 'border-box',
+    boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.25)',
+    borderRadius: '0px 0px 3px 3px'
+  },
+  storeCardPlaceholder: {
+    margin: '10px 0',
+    height: 36
+  }
+}));
 
 /**
  * Renders the locations.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 function StoreListLocations() {
+  const {
+    classes
+  } = useStyles();
   const {
     locations,
     isLoading
@@ -27,12 +54,12 @@ function StoreListLocations() {
       locations
     },
     children: /*#__PURE__*/_jsx(CardList, {
-      className: stores,
+      className: classes.stores,
       children: /*#__PURE__*/_jsx(PlaceholderLabel, {
-        className: storeCardPlaceholder,
+        className: classes.storeCardPlaceholder,
         ready: !showPlaceholder,
         children: locations.map(location => /*#__PURE__*/_jsx(CardList.Item, {
-          className: storeCard,
+          className: classes.storeCard,
           children: /*#__PURE__*/_jsx(StoreContext.Provider, {
             value: location,
             children: /*#__PURE__*/_jsx(StoreCard, {})

package/locations/components/StoreList/StoreListProduct.js

@@ -1,18 +1,43 @@
 import React, { useContext } from 'react';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { ProductImage } from "../../../product";
 import { FulfillmentContext } from "../../locations.context";
 import StoreListProductName from "./StoreListProductName";
 import StoreListProductInfo from "./StoreListProductInfo";
-import * as styles from "./StoreListProduct.style";
 import { SurroundPortals } from "../../../components";
 import { FULFILLMENT_SHEET_PRODUCT } from "../../constants/Portals";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  productContainer: {
+    padding: theme.spacing(2.5, 2.5, 1),
+    boxShadow: `inset 0 1px 0 ${themeColors.shade7}`
+  },
+  productContainerInner: {
+    display: 'flex',
+    flexFlow: 'row nowrap'
+  },
+  productImage: {
+    flex: '0 0 auto',
+    width: '2.5rem',
+    height: '2.5rem',
+    background: themeColors.placeholder,
+    marginRight: theme.spacing(2.5)
+  },
+  productContent: {
+    flexGrow: 1,
+    display: 'block'
+  }
+}));
 
 /**
  * Renders the product information of the store list.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function StoreListProduct() {
+  const {
+    classes
+  } = useStyles();
   const {
     product
   } = useContext(FulfillmentContext);
@@ -27,17 +52,17 @@ function StoreListProduct() {
       product
     },
     children: /*#__PURE__*/_jsx("div", {
-      className: styles.productContainer,
+      className: classes.productContainer,
       role: "text",
       children: /*#__PURE__*/_jsxs("div", {
-        className: styles.productContainerInner,
+        className: classes.productContainerInner,
         children: [/*#__PURE__*/_jsx("div", {
-          className: styles.productImage,
+          className: classes.productImage,
           children: /*#__PURE__*/_jsx(ProductImage, {
             src: product.featuredImageBaseUrl
           })
         }), /*#__PURE__*/_jsxs("div", {
-          className: styles.productContent,
+          className: classes.productContent,
           children: [/*#__PURE__*/_jsx(StoreListProductName, {}), /*#__PURE__*/_jsx(StoreListProductInfo, {})]
         })]
       })