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

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

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
+import { makeStyles } from '@shopgate/engage/styles';
 import { Button } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { historyPush } from '@shopgate/engage/core';
@@ -9,54 +9,54 @@ import formatDistance from "../../../helpers/formatDistance";
 import { STORE_DETAILS_PATH } from "../../../constants";
 import { StoreDetailsContext } from "../../../providers/StoreDetailsContext";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = {
-  button: css({
+const useStyles = makeStyles()({
+  button: {
     fontSize: '14px !important',
     padding: '0px !important'
-  }).toString(),
-  locationRow: css({
+  },
+  locationRow: {
     borderBottom: '1px solid #e8e8e8',
     borderTop: '1px solid #e8e8e8',
-    '> td:first-child > div': {
+    '> td:first-of-type > div': {
       paddingLeft: 0
     },
-    '> td:last-child > div': {
+    '> td:last-of-type > div': {
       paddingRight: 0
     }
-  }),
-  distance: css({
+  },
+  distance: {
     textWrapMode: 'nowrap',
     alignContent: 'center',
     verticalAlign: 'middle',
     fontWeight: '500'
-  }),
-  makeMyStore: css({
+  },
+  makeMyStore: {
     textWrapMode: 'nowrap',
     alignContent: 'center',
     verticalAlign: 'middle'
-  }),
-  storeInfo: css({
+  },
+  storeInfo: {
     textWrapMode: 'nowrap',
     alignContent: 'center',
     verticalAlign: 'middle'
-  }),
-  name: css({
+  },
+  name: {
     textAlign: 'start'
-  }),
-  cellContainer: css({
+  },
+  cellContainer: {
     padding: '8px',
     textAlign: 'end'
-  }),
-  cell: css({
+  },
+  cell: {
     verticalAlign: 'middle'
-  }),
-  buttonContainer: css({
+  },
+  buttonContainer: {
     display: 'flex',
     gap: '4px 16px',
     flexWrap: 'wrap',
     justifyContent: 'flex-end'
-  })
-};
+  }
+});
 
 /**
 * Shows a location in a row
@@ -67,6 +67,9 @@ const styles = {
 const StoresNearbyListItem = ({
   location
 }) => {
+  const {
+    classes
+  } = useStyles();
   const dispatch = useDispatch();
   const {
     preferredLocation,
@@ -91,35 +94,35 @@ const StoresNearbyListItem = ({
     }));
   };
   return /*#__PURE__*/_jsxs("tr", {
-    className: styles.locationRow,
+    className: classes.locationRow,
     children: [/*#__PURE__*/_jsx("td", {
-      className: styles.cell,
+      className: classes.cell,
       children: /*#__PURE__*/_jsx("div", {
-        className: styles.cellContainer,
+        className: classes.cellContainer,
         children: /*#__PURE__*/_jsx("div", {
-          className: styles.name,
+          className: classes.name,
           children: name
         })
       })
     }), /*#__PURE__*/_jsx("td", {
-      className: styles.cell,
+      className: classes.cell,
       children: /*#__PURE__*/_jsx("div", {
-        className: styles.cellContainer,
+        className: classes.cellContainer,
         children: /*#__PURE__*/_jsx("div", {
-          className: styles.distance,
+          className: classes.distance,
           children: formatDistance(distance || 0, unitSystem === 'imperial')
         })
       })
     }), /*#__PURE__*/_jsx("td", {
-      className: styles.cell,
+      className: classes.cell,
       children: /*#__PURE__*/_jsx("div", {
-        className: styles.cellContainer,
+        className: classes.cellContainer,
         children: /*#__PURE__*/_jsxs("div", {
-          className: styles.buttonContainer,
+          className: classes.buttonContainer,
           children: [/*#__PURE__*/_jsxs("div", {
-            className: styles.makeMyStore,
+            className: classes.makeMyStore,
             children: [!isComingSoon && /*#__PURE__*/_jsx(Button, {
-              className: styles.button,
+              className: classes.button,
               onClick: () => selectLocation(location, true),
               role: "button",
               type: "primary",
@@ -128,7 +131,7 @@ const StoresNearbyListItem = ({
               wrapContent: false,
               children: `${i18n.text('location.makeMyStore')}`
             }), isComingSoon && /*#__PURE__*/_jsx(Button, {
-              className: styles.button,
+              className: classes.button,
               role: "button",
               type: "primary",
               flat: true,
@@ -137,9 +140,9 @@ const StoresNearbyListItem = ({
               children: i18n.text('location.comingSoon')
             })]
           }), /*#__PURE__*/_jsx("div", {
-            className: styles.storeInfo,
+            className: classes.storeInfo,
             children: /*#__PURE__*/_jsx(Button, {
-              className: styles.button,
+              className: classes.button,
               role: "button",
               type: "primary",
               flat: true,

package/locations/components/StoreDetails/index.js

@@ -1,26 +1,30 @@
 import React from 'react';
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/engage';
+import { makeStyles } from '@shopgate/engage/styles';
 import StoreDetails from "./components/StoreDetails";
 import StoreLocationMap from "./components/StoreLocationMap";
 import StoresNearby from "./components/StoresNearby";
 import FindMoreStores from "./components/FindMoreStores";
 import { StoreDetailsProvider } from "../../providers";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = {
-  page: css({
-    padding: `${themeConfig.variables.gap.small}px ${themeConfig.variables.gap.big}px`
-  }).toString()
-};
+const useStyles = makeStyles()(theme => ({
+  page: {
+    padding: theme.spacing(1, 2)
+  }
+}));
 
 /**
- * @param {Object} props .
+ * The StoreDetailsContent component.
  * @returns {JSX}
  */
-const StoreDetailsContent = () => /*#__PURE__*/_jsx(StoreDetailsProvider, {
-  children: /*#__PURE__*/_jsxs("div", {
-    className: styles.page,
-    children: [/*#__PURE__*/_jsx(StoreDetails, {}), /*#__PURE__*/_jsx(StoreLocationMap, {}), /*#__PURE__*/_jsx(StoresNearby, {}), /*#__PURE__*/_jsx(FindMoreStores, {})]
-  })
-});
+const StoreDetailsContent = () => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx(StoreDetailsProvider, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classes.page,
+      children: [/*#__PURE__*/_jsx(StoreDetails, {}), /*#__PURE__*/_jsx(StoreLocationMap, {}), /*#__PURE__*/_jsx(StoresNearby, {}), /*#__PURE__*/_jsx(FindMoreStores, {})]
+    })
+  });
+};
 export default StoreDetailsContent;

package/locations/components/StoreFinder/StoreFinder.js

@@ -1,24 +1,49 @@
 import React, { useRef } from 'react';
+import { makeStyles } from '@shopgate/engage/styles';
 import { StoreFinderProvider } from "../../providers";
 import StoreFinderSearch from "./StoreFinderSearch";
 import StoreFinderLocations from "./StoreFinderLocations";
-import { container, storeSearch, storeList } from "./StoreFinder.style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    display: 'grid',
+    gridTemplateColumns: '1fr',
+    gridTemplateRows: 'auto 1fr',
+    gridTemplateAreas: '"search" "store-list"',
+    height: 'inherit'
+  },
+  storeSearch: {
+    gridArea: 'search',
+    padding: theme.spacing(2, 0.5, 0, 0.5),
+    ' select': {
+      color: 'var(--color-text-medium-emphasis)'
+    }
+  },
+  storeList: {
+    gridArea: 'store-list',
+    width: '100%',
+    overflow: 'hidden',
+    padding: '0 12px 8px 12px'
+  }
+}));
 
 /**
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StoreFinder = () => {
+  const {
+    classes
+  } = useStyles();
   const storeListRef = useRef(null);
   return /*#__PURE__*/_jsx(StoreFinderProvider, {
     storeListRef: storeListRef,
     children: /*#__PURE__*/_jsxs("div", {
-      className: container,
+      className: classes.container,
       children: [/*#__PURE__*/_jsx("div", {
-        className: storeSearch,
+        className: classes.storeSearch,
         children: /*#__PURE__*/_jsx(StoreFinderSearch, {})
       }), /*#__PURE__*/_jsx("div", {
-        className: storeList,
+        className: classes.storeList,
         children: /*#__PURE__*/_jsx(StoreFinderLocations, {
           ref: storeListRef
         })

package/locations/components/StoreFinder/StoreFinderGetDirectionsButton.js

@@ -1,21 +1,33 @@
 import React, { useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { i18n, generateGoogleMapsDirectionsUrl } from '@shopgate/engage/core';
+import { makeStyles } from '@shopgate/engage/styles';
 import { RippleButton } from '@shopgate/engage/components';
-import { container, button } from "./StoreFinderGetDirectionsButton.style";
 import connect from "./StoreFinderGetDirectionsButton.connector";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  container: {},
+  button: {
+    width: '100%',
+    background: 'var(--color-primary)!important',
+    color: 'var(--color-primary-contrast)!important',
+    fontSize: '0.875rem !important'
+  }
+});
 
 /**
  * @param {Object} props The component props
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const StoreFinderGetDirectionsButton = ({
   address,
   openMap,
   className
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const url = useMemo(() => address && generateGoogleMapsDirectionsUrl(address), [address]);
   const handleClick = useCallback(() => {
     openMap(url);
@@ -24,10 +36,10 @@ const StoreFinderGetDirectionsButton = ({
     return null;
   }
   return /*#__PURE__*/_jsx("div", {
-    className: classNames(container, className),
+    className: cx(classes.container, className),
     children: /*#__PURE__*/_jsx(RippleButton, {
       onClick: handleClick,
-      className: button,
+      className: classes.button,
       children: i18n.text('locations.get_directions')
     })
   });

package/locations/components/StoreFinder/StoreFinderLocation.js

@@ -1,17 +1,24 @@
 import React, { useContext, useMemo } from 'react';
-import classNames from 'classnames';
+import { makeStyles } from '@shopgate/engage/styles';
 import { StoreContext } from "./Store.context";
 import { StoreFinderContext } from "../../locations.context";
 import StoreFinderLocationHeader from "./StoreFinderLocationHeader";
-import { container, selected } from "./StoreFinderLocation.style";
 import { StoreFinderSelectLocationButton } from "./StoreFinderSelectLocationButton";
 import StoreFinderStoreInfoButton from "./StoreFinderStoreInfoButton";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  container: {},
+  selected: {}
+});
 
 /**
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StoreFinderLocation = () => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const store = useContext(StoreContext);
   const {
     selectedLocation
@@ -23,8 +30,8 @@ const StoreFinderLocation = () => {
     return store.code === code;
   }, [selectedLocation, store.code]);
   return /*#__PURE__*/_jsxs("div", {
-    className: classNames(container, {
-      [selected]: isSelected
+    className: cx(classes.container, {
+      [classes.selected]: isSelected
     }),
     "data-location-code": store.code,
     children: [/*#__PURE__*/_jsx(StoreFinderLocationHeader, {}), /*#__PURE__*/_jsx(StoreFinderSelectLocationButton, {}), /*#__PURE__*/_jsx(StoreFinderStoreInfoButton, {})]

package/locations/components/StoreFinder/StoreFinderLocationDetails.js

@@ -1,16 +1,35 @@
 import _isEmpty from "lodash/isEmpty";
 import _every from "lodash/every";
 import React, { useContext } from 'react';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { StoreContext } from "./Store.context";
 import { StoreOpeningHours } from "../StoreList/StoreOpeningHours";
 import { Accordion, I18n } from "../../../components";
-import { accordionHeader, accordionContent } from "./StoreFinderLocationDetails.style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  accordionHeader: {
+    borderTop: `1px solid ${themeColors.shade7}`,
+    cursor: 'pointer',
+    ' svg': {
+      display: 'inline'
+    }
+  },
+  accordionContent: {
+    fontSize: '0.875rem',
+    ' > div': {
+      padding: 0
+    }
+  }
+});
 
 /**
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const StoreFinderLocationDetails = () => {
+  const {
+    classes
+  } = useStyles();
   const {
     operationHours
   } = useContext(StoreContext);
@@ -18,12 +37,12 @@ const StoreFinderLocationDetails = () => {
     return null;
   }
   return /*#__PURE__*/_jsx(Accordion, {
-    className: accordionHeader,
+    className: classes.accordionHeader,
     renderLabel: () => /*#__PURE__*/_jsx(I18n.Text, {
       string: "locations.details"
     }),
     children: /*#__PURE__*/_jsx("div", {
-      className: accordionContent,
+      className: classes.accordionContent,
       children: /*#__PURE__*/_jsx(StoreOpeningHours, {
         hours: operationHours,
         pure: true

package/locations/components/StoreFinder/StoreFinderLocationHeader.js

@@ -1,19 +1,93 @@
 import React, { useContext, useMemo } from 'react';
 import { Grid, LocationIcon } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
+import { makeStyles } from '@shopgate/engage/styles';
 import { StoreContext } from "./Store.context";
 import { StoreFinderContext } from "../../locations.context";
 import { StoreDistance } from "../StoreList/StoreDistance";
 import { StoreHoursToday } from "../StoreList/StoreHoursToday";
 import { StoreAddress } from "../StoreList/StoreAddress";
 import StoreFinderLocationHeaderPhoneNumber from "./StoreFinderLocationHeaderPhoneNumber";
-import { container, storeName, storeDistance, storeHoursToday, clickable, storeNameWrapper, myStore, myStoreIcon, myStoreWrapper } from "./StoreFinderLocationHeader.style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    padding: theme.spacing(2),
+    display: 'flex',
+    flexDirection: 'column',
+    color: theme.palette.text.secondary,
+    ' > *': {
+      margin: 0
+    },
+    ' svg': {
+      color: theme.palette.text.secondary
+    },
+    ' li': {
+      paddingTop: 0
+    },
+    ' a': {
+      color: 'var(--color-primary)',
+      textDecoration: 'underline'
+    },
+    fontSize: '0.875rem',
+    lineHeight: '1.5rem',
+    ' > *:not(:last-child)': {
+      paddingBottom: theme.spacing(0.5),
+      paddingTop: 0
+    }
+  },
+  clickable: {
+    ' > *': {
+      margin: 0,
+      paddingTop: 0
+    },
+    ' > *:not(:last-child)': {
+      paddingBottom: theme.spacing(0.5),
+      paddingTop: 0
+    }
+  },
+  storeName: {
+    fontSize: '1rem',
+    fontWeight: 500,
+    color: theme.palette.text.primary
+  },
+  myStoreWrapper: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  myStore: {
+    color: 'var(--color-primary)',
+    fontSize: '1rem',
+    fontWeight: 500
+  },
+  myStoreIcon: {
+    ' svg': {
+      color: 'var(--color-primary)'
+    },
+    marginRight: '4px'
+  },
+  storeNameWrapper: {
+    flexWrap: 'wrap',
+    display: 'flex',
+    gap: '2px 12px'
+  },
+  storeDistance: {
+    lineHeight: '1.65rem',
+    paddingLeft: theme.spacing(1)
+  },
+  storeHoursToday: {
+    ' > *': {
+      color: theme.palette.text.secondary
+    }
+  }
+}));
 
 /**
  * @returns {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StoreFinderLocationHeader = () => {
+  const {
+    classes
+  } = useStyles();
   const store = useContext(StoreContext);
   const {
     name,
@@ -27,39 +101,39 @@ const StoreFinderLocationHeader = () => {
   } = useContext(StoreFinderContext);
   const isSelectedLocation = useMemo(() => selectedLocation?.code === store?.code, [selectedLocation, store]);
   return /*#__PURE__*/_jsxs("div", {
-    className: container,
+    className: classes.container,
     children: [/*#__PURE__*/_jsxs("div", {
-      className: clickable,
+      className: classes.clickable,
       children: [/*#__PURE__*/_jsxs(Grid, {
         children: [/*#__PURE__*/_jsx(Grid.Item, {
           grow: 1,
           children: /*#__PURE__*/_jsxs("div", {
-            className: storeNameWrapper,
+            className: classes.storeNameWrapper,
             children: [/*#__PURE__*/_jsx("div", {
-              className: storeName,
+              className: classes.storeName,
               children: name
             }), isSelectedLocation && /*#__PURE__*/_jsxs("div", {
-              className: myStoreWrapper,
+              className: classes.myStoreWrapper,
               children: [/*#__PURE__*/_jsx("div", {
-                className: myStoreIcon,
+                className: classes.myStoreIcon,
                 children: /*#__PURE__*/_jsx(LocationIcon, {
                   size: 20
                 })
               }), /*#__PURE__*/_jsx("div", {
-                className: myStore,
+                className: classes.myStore,
                 children: i18n.text('location.myStore')
               })]
             })]
           })
         }), /*#__PURE__*/_jsx(Grid.Item, {
-          className: storeDistance,
+          className: classes.storeDistance,
           children: /*#__PURE__*/_jsx(StoreDistance, {
             distance: distance,
             unitSystem: unitSystem
           })
         })]
       }), /*#__PURE__*/_jsx("div", {
-        className: storeHoursToday,
+        className: classes.storeHoursToday,
         children: /*#__PURE__*/_jsx(StoreHoursToday, {
           hours: operationHours
         })

package/locations/components/StoreFinder/StoreFinderLocations.js

@@ -1,17 +1,45 @@
 import React, { useContext, forwardRef } from 'react';
 import { CardList } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { StoreFinderContext } from "../../locations.context";
 import { StoreContext } from "./Store.context";
 import StoreFinderLocation from "./StoreFinderLocation";
-import { container, cardList, card } from "./StoreFinderLocations.style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()(theme => ({
+  container: {
+    paddingTop: 2,
+    borderTop: 'none',
+    overflowY: 'unset',
+    WebkitOverflowScrolling: 'unset'
+  },
+  cardList: {
+    paddingTop: 0
+  },
+  card: {
+    background: colors.light,
+    border: `1px solid ${colors.shade7}`,
+    boxSizing: 'border-box',
+    boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.25)',
+    borderRadius: 3,
+    ':not(:last-child)': {
+      marginBottom: theme.spacing(1.5)
+    }
+  }
+}));
 
 /**
  * @param {Object} props The component props
  * @param {Object} ref A forwarded ref
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const StoreFinderLocations = (props, ref) => {
+  const {
+    classes
+  } = useStyles();
   const {
     locations
   } = useContext(StoreFinderContext);
@@ -20,11 +48,11 @@ const StoreFinderLocations = (props, ref) => {
   }
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
-    className: container,
+    className: classes.container,
     children: /*#__PURE__*/_jsx(CardList, {
-      className: cardList,
+      className: classes.cardList,
       children: locations.map(location => /*#__PURE__*/_jsx(CardList.Item, {
-        className: card,
+        className: classes.card,
         children: /*#__PURE__*/_jsx(StoreContext.Provider, {
           value: location,
           children: /*#__PURE__*/_jsx(StoreFinderLocation, {})

package/locations/components/StoreFinder/StoreFinderSearch.js

@@ -1,15 +1,25 @@
 import React from 'react';
+import { makeStyles } from '@shopgate/engage/styles';
 import StoreListSearch from "../StoreList/StoreListSearch";
-import { container } from "./StoreFinderSearch.style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    paddingBottom: theme.spacing(1)
+  }
+}));
 
 /**
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-const StoreFinderSearch = () => /*#__PURE__*/_jsx("div", {
-  className: container,
-  children: /*#__PURE__*/_jsx(StoreListSearch, {
-    isStoreFinder: true
-  })
-});
+const StoreFinderSearch = () => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx("div", {
+    className: classes.container,
+    children: /*#__PURE__*/_jsx(StoreListSearch, {
+      isStoreFinder: true
+    })
+  });
+};
 export default StoreFinderSearch;