@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/locations/components/FulfillmentSelector/FulfillmentSelectorLocation.js

@@ -1,9 +1,8 @@
 import "core-js/modules/es.array.includes.js";
 import React, { useCallback, useMemo } from 'react';
 import intersection from 'lodash/intersection';
-import { Grid, ResponsiveContainer, SurroundPortals } from '@shopgate/engage/components';
+import { Grid, ResponsiveContainer, SurroundPortals, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { ROPIS, BOPIS, DIRECT_SHIP } from "../../constants";
 import { i18n } from "../../../core";
 import { isProductAvailable } from "../../helpers";
@@ -17,21 +16,17 @@ import FulfillmentSelectorAlternativeLocation from "./FulfillmentSelectorAlterna
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
-    fontSize: '0.75rem',
+    fontSize: theme.typography.caption.fontSize,
     padding: theme.spacing(0, 2, 1, 6),
     marginTop: theme.spacing(-1),
     flexDirection: 'column'
   },
   unavailable: {
-    color: themeColors.dark,
-    fontSize: '0.625rem',
+    color: theme.palette.common.black,
     textTransform: 'uppercase',
     letterSpacing: '0.05em',
     opacity: 0.5
   },
-  locationName: {
-    color: 'var(--color-text-medium-emphasis)'
-  },
   itemRow: {
     alignContent: 'stretch',
     alignItems: 'baseline'
@@ -116,8 +111,10 @@ export function FulfillmentSelectorLocation() {
               grow: 1,
               shrink: 0,
               component: "div",
-              children: /*#__PURE__*/_jsx("div", {
-                className: classes.locationName,
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "caption",
+                component: "div",
+                color: "textSecondary",
                 children: usedLocation.name
               })
             }), /*#__PURE__*/_jsx(Grid.Item, {
@@ -134,8 +131,10 @@ export function FulfillmentSelectorLocation() {
             webOnly: true,
             breakpoint: ">xs",
             children: [/*#__PURE__*/_jsx("div", {
-              children: /*#__PURE__*/_jsx("div", {
-                className: classes.locationName,
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "caption",
+                component: "div",
+                color: "textSecondary",
                 children: usedLocation.name
               })
             }), /*#__PURE__*/_jsx("div", {
@@ -154,13 +153,17 @@ export function FulfillmentSelectorLocation() {
         })]
       }), isRopeMethodEnabled && selected && !isOrderable && /*#__PURE__*/_jsxs("div", {
         className: classes.container,
-        children: [/*#__PURE__*/_jsx("div", {
-          className: classes.locationName,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          component: "div",
+          color: "textSecondary",
           children: usedLocation?.name || ''
         }), /*#__PURE__*/_jsx(FulfillmentSelectorImpossibleError, {}), /*#__PURE__*/_jsx(ChangeLocationButton, {
           onClick: handleChangeLocation
         })]
-      }), false && !isRopeMethodEnabled ? /*#__PURE__*/_jsx("div", {
+      }), false && !isRopeMethodEnabled ? /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        component: "div",
         className: cx(classes.unavailable, classes.container),
         children: i18n.text('locations.no_available')
       }) : null]

package/locations/components/FulfillmentSelector/FulfillmentSelectorLocationMethodNotAvailable.js

@@ -6,11 +6,11 @@ import { i18n } from '@shopgate/engage/core/helpers';
 import { AVAILABILITY_STATE_ALERT } from '@shopgate/engage/product';
 import { ROPIS, BOPIS } from "../../constants";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
-    fontSize: '0.625rem'
+    fontSize: theme.typography.caption.fontSize
   }
-});
+}));
 
 /**
  * @returns {JSX}

package/locations/components/FulfillmentSheet/FulfillmentSheetContent.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { FulfillmentContext } from "../../locations.context";
 import { STAGE_SELECT_STORE, STAGE_RESERVE_FORM, STAGE_RESPONSE_SUCCESS, STAGE_RESPONSE_ERROR, STAGE_FULFILLMENT_METHOD } from "../../constants";
 import SheetDrawer from "../../../components/SheetDrawer";
@@ -10,19 +9,16 @@ import { ReserveForm } from "../ReserveForm";
 import { ReservationSuccess, ReservationError } from "../ReservationResponses";
 import { FulfillmentPath } from "../FulfillmentPath";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   sheet: {
-    maxHeight: `calc(var(--vh-100, 100vh) - ${variables.navigator.height}px)`,
+    maxHeight: `calc(var(--vh-100, 100vh) - ${theme.components.navigator.height})`,
     [responsiveMediaQuery('>sm', {
       webOnly: true
     })]: {
-      maxHeight: `calc(var(--vh-80, 80vh) - ${variables.navigator.height}px)`
+      maxHeight: `calc(var(--vh-80, 80vh) - ${theme.components.navigator.height})`
     }
   }
-});
+}));
 
 /**
  * Renders the content of the fulfillment sheet.

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotDialog.js

@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import groupBy from 'lodash/groupBy';
-import { SheetDrawer, Button } from '@shopgate/engage/components';
+import { SheetDrawer, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { getActiveFulfillmentSlot } from '@shopgate/engage/cart/cart.selectors';
 import { makeGetFulfillmentSlotsForLocation, getPreferredLocation } from "../../selectors";
@@ -33,7 +34,7 @@ const makeMapStateToProps = () => {
 const mapDispatchToProps = dispatch => ({
   fetch: locationCode => dispatch(fetchFulfillmentSlots(locationCode))
 });
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     position: 'relative',
     display: 'flex',
@@ -42,13 +43,9 @@ const useStyles = makeStyles()({
     paddingBottom: 0
   },
   title: {
-    fontSize: 24,
-    fontWeight: '500',
     marginBottom: 8
   },
   subtitle: {
-    fontSize: 20,
-    fontWeight: '500',
     marginBottom: 8,
     marginTop: 16
   },
@@ -66,15 +63,15 @@ const useStyles = makeStyles()({
     margin: 8,
     justifyContent: 'center',
     alignItems: 'center',
-    border: '1px solid var(--color-secondary)',
+    border: `1px solid ${theme.palette.secondary.main}`,
     borderRadius: 4,
-    background: '#fff',
+    background: theme.palette.common.white,
     transition: 'background, color 500ms',
     outline: 'none'
   },
   buttonActive: {
-    color: '#fff',
-    background: 'var(--color-secondary)'
+    color: theme.palette.common.white,
+    background: theme.palette.secondary.main
   },
   buttonDate: {
     width: 124,
@@ -82,22 +79,20 @@ const useStyles = makeStyles()({
     lineHeight: 1.3
   },
   buttonLabel: {
-    fontSize: 20,
     textAlign: 'center'
   },
   buttonLabelSlot: {
     padding: 2,
-    fontSize: 16,
     textAlign: 'center'
   },
   buttonDisabled: {
     cursor: 'blocked',
     pointerEvents: 'none',
-    border: '1px solid #444'
+    border: `1px solid ${theme.palette.action.disabled}`
   },
   buttonStrikethrough: {
     position: 'absolute',
-    background: '#444',
+    background: theme.palette.action.disabled,
     left: 0,
     right: 0,
     height: 2,
@@ -108,16 +103,11 @@ const useStyles = makeStyles()({
     bottom: 'calc(-1 * env(safe-area-inset-bottom))',
     margin: -16,
     marginTop: 8,
-    background: '#fff',
+    background: theme.palette.background.surface,
     padding: 16,
     paddingBottom: 24
-  },
-  buttonSchedule: {
-    '&&': {
-      width: '100%'
-    }
   }
-});
+}));
 
 /**
  * Get Month day time.
@@ -161,7 +151,7 @@ const RANGES = {
 
 /**
  * @param {Object} props Props.
- * @returns {JSX}
+ * @returns {JSX.Element}
  */
 const FulfillmentSlotSheet = ({
   isOpen,
@@ -260,7 +250,9 @@ const FulfillmentSlotSheet = ({
     allowClose: allowClose,
     children: /*#__PURE__*/_jsxs("div", {
       className: classes.root,
-      children: [/*#__PURE__*/_jsx("span", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h3",
+        component: "span",
         className: classes.title,
         children: i18n.text('locations.your_current_timeslot.dialog.date')
       }), /*#__PURE__*/_jsx("div", {
@@ -271,13 +263,17 @@ const FulfillmentSlotSheet = ({
             [classes.buttonActive]: selectedDate === date
           }),
           onClick: () => setSelectedDate(date),
-          children: /*#__PURE__*/_jsxs("span", {
+          children: /*#__PURE__*/_jsxs(Typography, {
+            variant: "h3",
+            component: "span",
             className: classes.buttonLabel,
             children: [moment(date, 'YYYY-MM-DD').format('dddd'), ' ', getMonthDay(date)]
           })
         }, date))
       }), slotGroups && slotGroups.map(group => /*#__PURE__*/_jsxs(Fragment, {
-        children: [/*#__PURE__*/_jsx("span", {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "h3",
+          component: "span",
           className: classes.subtitle,
           children: i18n.text(`locations.your_current_timeslot.dialog.${group.name}`)
         }), /*#__PURE__*/_jsx("div", {
@@ -289,7 +285,8 @@ const FulfillmentSlotSheet = ({
               [classes.buttonDisabled]: slot.status !== 'active',
               [classes.buttonActive]: slot.id === selectedSlot
             }),
-            children: [/*#__PURE__*/_jsx("span", {
+            children: [/*#__PURE__*/_jsx(Typography, {
+              component: "span",
               className: classes.buttonLabelSlot,
               children: getRange(slot.from, slot.to)
             }), slot.status !== 'active' ? /*#__PURE__*/_jsx("div", {
@@ -300,8 +297,8 @@ const FulfillmentSlotSheet = ({
       }, group.name)), /*#__PURE__*/_jsx("div", {
         className: classes.buttonScheduleContainer,
         children: /*#__PURE__*/_jsx(Button, {
-          className: classes.buttonSchedule,
-          type: "secondary",
+          color: "primary",
+          fullWidth: true,
           onClick: handleChange,
           disabled: !selectedDate || !selectedSlot,
           children: i18n.text('locations.your_current_timeslot.dialog.schedule')

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotProvider.connector.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { getFulfillmentSchedulingEnabled } from '@shopgate/engage/core';
+import { getFulfillmentSchedulingEnabled } from '@shopgate/engage/settings/selectors/merchantSettings';
 import setFulfillmentSlot from '@shopgate/pwa-common-commerce/cart/action-creators/setFulfillmentSlot';
 
 /**

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcher.connector.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { getFulfillmentSchedulingEnabled } from '@shopgate/engage/core';
+import { getFulfillmentSchedulingEnabled } from '@shopgate/engage/settings/selectors/merchantSettings';
 import { getActiveFulfillmentSlot, checkActiveFulfillmentSlotBelongsToPreferredLocation } from '@shopgate/engage/cart/cart.selectors';
 import { getIsCartStateConfigurable } from "../../selectors";
 

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcher.js

@@ -6,7 +6,7 @@ import FulfillmentSlotSwitcherBar from "./FulfillmentSlotSwitcherBar";
 import connect from "./FulfillmentSlotSwitcher.connector";
 import { forceOpenFulfillmentSlotDialog } from "./FulfillmentSlotProvider";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   card: {
     boxShadow: '0px 4px 2px rgba(0, 0, 0, 0.05)',
     marginBottom: 16,
@@ -14,13 +14,13 @@ const useStyles = makeStyles()({
       borderBottom: 0
     },
     ' > div': {
-      borderRadius: 5,
+      borderRadius: theme.shape.borderRadius,
       margin: -1,
-      background: '#fff',
-      border: '1px solid #eaeaea'
+      background: theme.palette.background.surface,
+      border: `1px solid ${theme.components.border.light}`
     }
   }
-});
+}));
 
 /**
  * @returns {JSX}

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcherBar.js

@@ -1,27 +1,23 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n } from '@shopgate/engage/components';
+import { I18n, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { getTimeSlotDisplayText } from "./time";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   wrapper: {
-    fontSize: '0.875rem',
     color: theme.palette.text.primary,
-    background: 'var(--color-background-accent)'
+    background: theme.palette.background.emphasized
   },
   inner: {
     display: 'flex',
     flexShrink: 0,
     margin: theme.spacing(0, 2),
-    borderBottom: '1px solid #eaeaea',
+    borderBottom: `1px solid ${theme.components.border.light}`,
     alignItems: 'center',
-    height: variables.filterbar.height
+    height: theme.components.filterBar.height
   },
   innerStandalone: {
     borderBottom: 'none'
@@ -32,25 +28,15 @@ const useStyles = makeStyles()(theme => ({
       content: '":"'
     }
   },
-  name: {
-    fontWeight: 500
-  },
   button: {
     marginLeft: 'auto',
-    letterSpacing: '0.05em',
-    padding: `${theme.spacing(0.375, 0)} !important`,
-    ' *': {
-      fontSize: '0.875rem',
-      textTransform: 'initial',
-      padding: '0 !important',
-      color: theme.palette.text.primary,
-      fontWeight: 500
-    }
+    textTransform: 'none',
+    padding: theme.spacing(0.375, 0)
   }
 }));
 
 /**
- * @returns {JSX}
+ * @returns {JSX.Element}
  */
 const FulfillmentSlotSwitcherBar = ({
   fulfillmentSlot,
@@ -69,17 +55,22 @@ const FulfillmentSlotSwitcherBar = ({
       className: cx(classes.inner, {
         [classes.innerStandalone]: standalone
       }),
-      children: [/*#__PURE__*/_jsx("span", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "span",
         className: classes.heading,
         children: i18n.text('locations.your_current_timeslot.heading')
-      }), /*#__PURE__*/_jsx("span", {
-        className: classes.name,
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "span",
+        fontWeight: "medium",
         children: displayTime
-      }), editable && /*#__PURE__*/_jsx(RippleButton, {
+      }), editable && /*#__PURE__*/_jsx(Button, {
+        variant: "text",
+        color: "inherit",
+        size: "small",
         onClick: handleChange,
-        type: "secondary",
         className: classes.button,
-        flat: true,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "locations.your_current_location.change"
         })

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcherDefault.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n } from '@shopgate/engage/components';
+import { I18n, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getTimeSlotDisplayText } from "./time";
@@ -9,29 +10,19 @@ const useStyles = makeStyles()(theme => ({
   wrapper: {
     display: 'flex',
     flexDirection: 'column',
-    fontSize: '0.875rem',
     padding: theme.spacing(0, 2),
     flexShrink: 0
   },
-  heading: {
-    color: 'var(--color-text-medium-emphasis)'
-  },
-  name: {
-    fontWeight: 500,
-    color: theme.palette.text.primary
-  },
   button: {
-    fontSize: '0.625rem !important',
-    letterSpacing: '0.05em',
-    padding: `${theme.spacing(0.375, 0)} !important`,
-    ' *': {
-      padding: '0 !important'
-    }
+    // Inline affordance that follows the location name, so it carries no button chrome and
+    // stays sentence case - matching the switcher bars that render the same action.
+    padding: theme.spacing(0.375, 0),
+    textTransform: 'none'
   }
 }));
 
 /**
- * @returns {JSX}
+ * @returns {JSX.Element}
  */
 const FulfillmentSlotSwitcherDefault = ({
   handleChange,
@@ -44,19 +35,25 @@ const FulfillmentSlotSwitcherDefault = ({
   const displayTime = useMemo(() => getTimeSlotDisplayText(fulfillmentSlot), [fulfillmentSlot]);
   return /*#__PURE__*/_jsxs("div", {
     className: classes.wrapper,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: classes.heading,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      component: "div",
+      color: "textSecondary",
       children: i18n.text('locations.your_current_timeslot.heading')
     }), /*#__PURE__*/_jsxs("div", {
-      className: classes.name,
-      children: [/*#__PURE__*/_jsx("span", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "span",
+        color: "textPrimary",
+        fontWeight: "medium",
         children: displayTime
-      }), /*#__PURE__*/_jsx(RippleButton, {
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "text",
+        color: "primary",
+        size: "small",
         onClick: handleChange,
-        type: "secondary",
         className: classes.button,
         disabled: !editable,
-        flat: true,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "locations.your_current_location.change"
         })

package/locations/components/GlobalLocationSelector/GlobalLocationSelector.js

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { getCurrentRoute } from '@shopgate/pwa-common/selectors/router';
 import { selectGlobalLocation } from '@shopgate/engage/locations/action-creators';
+import { getIsLocationBasedShopping } from '@shopgate/engage/settings/selectors/merchantSettings';
 import { getPreferredLocation, getIsPending } from "../../selectors";
-import { getIsLocationBasedShopping } from "../../../core/selectors";
 import { FulfillmentSheet } from "../FulfillmentSheet";
 import { STAGE_SELECT_STORE, MULTI_LINE_RESERVE } from "../../constants";
 

package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcher.connector.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { getIsLocationBasedShopping } from '@shopgate/engage/core';
+import { getIsLocationBasedShopping } from '@shopgate/engage/settings/selectors/merchantSettings';
 import { getPreferredLocation } from '@shopgate/engage/locations/selectors';
 import { selectGlobalLocation } from '@shopgate/engage/locations/action-creators';
 import { getIsCartStateConfigurable } from "../../selectors";

package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcherBar.js

@@ -1,26 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n } from '@shopgate/engage/components';
+import { I18n, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   wrapper: {
-    fontSize: '0.875rem',
     color: theme.palette.text.primary,
-    background: 'var(--color-background-accent)'
+    background: theme.palette.background.emphasized
   },
   inner: {
     display: 'flex',
     flexShrink: 0,
     margin: theme.spacing(0, 2),
-    borderBottom: '1px solid #eaeaea',
+    borderBottom: `1px solid ${theme.components.border.light}`,
     alignItems: 'center',
-    height: variables.filterbar.height
+    height: theme.components.filterBar.height
   },
   innerStandalone: {
     borderBottom: 'none'
@@ -28,20 +24,9 @@ const useStyles = makeStyles()(theme => ({
   heading: {
     paddingRight: theme.spacing(1)
   },
-  name: {
-    fontWeight: 500
-  },
   button: {
-    marginLeft: 'auto',
-    letterSpacing: '0.05em',
-    padding: `${theme.spacing(0.375, 0)} !important`,
-    ' *': {
-      fontSize: '0.875rem',
-      textTransform: 'initial',
-      padding: '0 !important',
-      color: theme.palette.text.primary,
-      fontWeight: 500
-    }
+    marginLeft: theme.spacing(2),
+    textTransform: 'none'
   }
 }));
 
@@ -65,19 +50,24 @@ const GlobalLocationSwitcherBar = ({
       }),
       children: [/*#__PURE__*/_jsxs("span", {
         "aria-label": `${i18n.text('locations.your_current_location.heading')}: ${locationName}`,
-        children: [/*#__PURE__*/_jsx("span", {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          component: "span",
           className: classes.heading,
           children: `${i18n.text('locations.your_current_location.heading')}:`
-        }), /*#__PURE__*/_jsx("span", {
-          className: classes.name,
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          component: "span",
+          fontWeight: "medium",
           children: locationName
         })]
-      }), /*#__PURE__*/_jsx(RippleButton, {
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "link",
+        size: "small",
+        dense: true,
         onClick: handleChange,
-        type: "secondary",
         className: classes.button,
         "aria-haspopup": true,
-        flat: true,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "locations.your_current_location.change"
         })