@shopgate/engage 7.30.3 → 7.31.0-alpha.1

package/locations/components/ReservationResponses/ReservationSuccess.js

@@ -1,30 +1,57 @@
 import React, { useContext } from 'react';
+import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from "../../../core/helpers/i18n";
 import { FulfillmentContext } from "../../locations.context";
-import { container, heading, body, orderNum } from "./ReservationResponse.style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    background: theme.palette.background.default,
+    padding: theme.spacing(2, 1.5, 16),
+    boxShadow: 'inset rgba(0, 0, 0, .117647) 0 1px 6px, inset rgba(0, 0, 0, .117647) 0 1px 4px'
+  },
+  heading: {
+    fontSize: '1.125rem',
+    fontWeight: 'bold',
+    margin: theme.spacing(1, 0, 2.5)
+  },
+  body: {
+    padding: theme.spacing(2, 0, 0),
+    margin: theme.spacing(0, 0, 2.5),
+    border: 0
+  },
+  orderNum: {
+    padding: 0,
+    fontSize: '1.1875rem',
+    fontWeight: 'bold',
+    margin: theme.spacing(0, 0, 2),
+    border: 0
+  }
+}));
 
 /**
  * Renders the reservation success screen.
  * @returns {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ReservationSuccess() {
+  const {
+    classes
+  } = useStyles();
   const {
     orderNumbers
   } = useContext(FulfillmentContext);
   return /*#__PURE__*/_jsxs("div", {
-    className: container,
+    className: classes.container,
     children: [/*#__PURE__*/_jsx("h2", {
-      className: heading,
+      className: classes.heading,
       children: i18n.text('locations.success_title')
     }), /*#__PURE__*/_jsx("p", {
-      className: body,
+      className: classes.body,
       children: i18n.text('locations.success_copy')
     }), /*#__PURE__*/_jsx("p", {
-      className: body,
+      className: classes.body,
       children: i18n.text('locations.success_order_num')
     }), orderNumbers !== null && /*#__PURE__*/_jsx("p", {
-      className: orderNum,
+      className: classes.orderNum,
       children: orderNumbers[0]
     })]
   });

package/locations/components/ReserveForm/ReserveForm.js

@@ -1,16 +1,53 @@
 import 'react-phone-number-input/style.css';
-import React, { useState, useContext, useMemo, useRef, useLayoutEffect, useCallback, Fragment } from 'react';
+import React, { useState, useContext, useMemo, useRef, useLayoutEffect, useCallback } from 'react';
+import { makeStyles } from '@shopgate/engage/styles';
 import { TextField, RippleButton, RadioGroup, RadioGroupItem, ProgressBar } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { useFormState } from "../../../core/hooks/useFormState";
 import { FulfillmentContext } from "../../locations.context";
 import { ReserveFormPhone } from "./ReserveFormPhone";
 import { constraints } from "./ReserveForm.constraints";
-import { form, fieldset, formField, formHeading, pickerSwitch, pickerItem, button, progressBar } from "./ReserveForm.style";
-
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  form: {
+    background: theme.palette.background.default,
+    padding: theme.spacing(1.5, 1.5, 2),
+    boxShadow: 'inset rgba(0, 0, 0, .117647) 0 1px 6px, inset rgba(0, 0, 0, .117647) 0 1px 4px'
+  },
+  formHeading: {
+    fontSize: '1.125rem',
+    fontWeight: 'bold',
+    margin: theme.spacing(0, 0, 1)
+  },
+  fieldset: {
+    padding: 0,
+    margin: theme.spacing(0, 0, 2),
+    border: 0
+  },
+  formField: {
+    width: '100%',
+    paddingBottom: theme.spacing(1)
+  },
+  pickerSwitch: {
+    marginTop: '-1rem'
+  },
+  pickerItem: {
+    paddingRight: theme.spacing(4),
+    ':last-of-type': {
+      paddingRight: 0
+    }
+  },
+  button: {
+    width: '100%'
+  },
+  progressBar: {
+    height: '4px',
+    position: 'relative'
+  }
+}));
 // eslint-disable-next-line max-len
 /** @typedef {import('@shopgate/engage/locations/locations.types').ReservationFormValues} ReservationFormValues */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+
 const PICKUP_PERSON_ME = 'me';
 const PICKUP_PERSON_OTHER = 'someoneelse';
 
@@ -39,6 +76,9 @@ const determinePickupPerson = userInput => {
  * @returns {JSX.Element}
  */
 function ReserveFormUnwrapped() {
+  const {
+    classes
+  } = useStyles();
   const {
     sendReservation,
     userInput
@@ -110,28 +150,28 @@ function ReserveFormUnwrapped() {
   }, [picker, someoneElseRef]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
-      className: progressBar,
+      className: classes.progressBar,
       children: /*#__PURE__*/_jsx(ProgressBar, {
         isVisible: isSubmitting
       })
     }), /*#__PURE__*/_jsxs("form", {
       onSubmit: handleSubmit,
-      className: form,
+      className: classes.form,
       children: [/*#__PURE__*/_jsxs("fieldset", {
-        className: fieldset,
+        className: classes.fieldset,
         children: [/*#__PURE__*/_jsx(TextField, {
           name: "firstName",
           value: values.firstName,
           onChange: handleChange,
           label: i18n.text('locations.firstName'),
-          className: formField,
+          className: classes.formField,
           errorText: i18n.text(validationErrors.firstName)
         }), /*#__PURE__*/_jsx(TextField, {
           name: "lastName",
           value: values.lastName,
           onChange: handleChange,
           label: i18n.text('locations.lastName'),
-          className: formField,
+          className: classes.formField,
           errorText: i18n.text(validationErrors.lastName)
         }), /*#__PURE__*/_jsx(ReserveFormPhone, {
           name: "cellPhone",
@@ -144,14 +184,14 @@ function ReserveFormUnwrapped() {
           value: values.email,
           onChange: handleChange,
           label: i18n.text('locations.emailAddress'),
-          className: formField,
+          className: classes.formField,
           errorText: i18n.text(validationErrors.email)
         })]
       }), /*#__PURE__*/_jsx("p", {
-        className: formHeading,
+        className: classes.formHeading,
         children: i18n.text('locations.who_will_pickup')
       }), /*#__PURE__*/_jsx("div", {
-        className: pickerSwitch,
+        className: classes.pickerSwitch,
         children: /*#__PURE__*/_jsxs(RadioGroup, {
           name: "picker",
           direction: "row",
@@ -160,29 +200,29 @@ function ReserveFormUnwrapped() {
           children: [/*#__PURE__*/_jsx(RadioGroupItem, {
             label: i18n.text('locations.me'),
             name: PICKUP_PERSON_ME,
-            className: pickerItem
+            className: classes.pickerItem
           }), /*#__PURE__*/_jsx(RadioGroupItem, {
             label: i18n.text('locations.someone_else'),
             name: PICKUP_PERSON_OTHER,
-            className: pickerItem
+            className: classes.pickerItem
           })]
         })
       }), picker === PICKUP_PERSON_OTHER && /*#__PURE__*/_jsxs("fieldset", {
-        className: fieldset,
+        className: classes.fieldset,
         ref: someoneElseRef,
         children: [/*#__PURE__*/_jsx(TextField, {
           name: "firstName2",
           value: values.firstName2,
           onChange: handleChange,
           label: i18n.text('locations.firstName'),
-          className: formField,
+          className: classes.formField,
           errorText: i18n.text(validationErrors.firstName2)
         }), /*#__PURE__*/_jsx(TextField, {
           name: "lastName2",
           value: values.lastName2,
           onChange: handleChange,
           label: i18n.text('locations.lastName'),
-          className: formField,
+          className: classes.formField,
           errorText: i18n.text(validationErrors.lastName2)
         }), /*#__PURE__*/_jsx(ReserveFormPhone, {
           name: "cellPhone2",
@@ -195,13 +235,13 @@ function ReserveFormUnwrapped() {
           value: values.email2,
           onChange: handleChange,
           label: i18n.text('locations.emailAddress'),
-          className: formField,
+          className: classes.formField,
           errorText: i18n.text(validationErrors.email2)
         })]
       }), /*#__PURE__*/_jsx(RippleButton, {
         type: "secondary",
         disabled: changed || valid === false || isSubmitting,
-        className: button,
+        className: classes.button,
         children: i18n.text('locations.place_reservation')
       })]
     })]

package/locations/components/ReserveForm/ReserveFormPhone.js

@@ -1,7 +1,8 @@
 import React, { useMemo, useContext, memo, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { i18n } from '@shopgate/engage/core';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { i18n } from '@shopgate/engage/core/helpers';
 import { parsePhoneNumber } from 'react-phone-number-input';
 import PhoneInput from 'react-phone-number-input/mobile';
 import { getCountries } from 'react-phone-number-input/input';
@@ -14,8 +15,53 @@ import flags from 'react-phone-number-input/flags';
 import TextField from '@shopgate/pwa-ui-shared/TextField';
 import { useCountriesNames } from '@shopgate/engage/i18n';
 import { FulfillmentContext } from "../../locations.context";
-import { formField, phoneField, phoneFieldError, phoneFieldErrorText } from "./ReserveForm.style";
 import connect from "./ReserveFormPhone.connector";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()(theme => ({
+  formField: {
+    width: '100%',
+    paddingBottom: theme.spacing(1)
+  },
+  phoneField: {
+    position: 'relative',
+    width: '100%',
+    paddingTop: theme.spacing(1.5),
+    paddingBottom: theme.spacing(2.5),
+    marginBottom: theme.spacing(1),
+    ' input.PhoneInputInput': {
+      outline: 'none',
+      fontSize: '1rem',
+      lineHeight: '1.1875rem',
+      borderRadius: 0,
+      paddingBottom: theme.spacing(0.75),
+      borderBottom: `1px solid ${colors.shade12}`,
+      '&:focus': {
+        borderBottom: `2px solid ${theme.palette.primary.main}`,
+        paddingBottom: theme.spacing(0.75) - 1
+      }
+    }
+  },
+  phoneFieldError: {
+    ' input.PhoneInputInput': {
+      borderBottom: `2px solid ${theme.palette.error.main} !important`,
+      paddingBottom: theme.spacing(0.75) - 1
+    }
+  },
+  phoneFieldErrorText: {
+    position: 'absolute',
+    width: '100%',
+    bottom: 2,
+    fontSize: '0.75rem',
+    lineHeight: 0.875,
+    color: theme.palette.error.main,
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis'
+  }
+}));
 
 /**
  * @typedef {import('./ReserveFormPhone.types').OwnProps} OwnProps
@@ -25,7 +71,7 @@ import connect from "./ReserveFormPhone.connector";
 /**
  * @typedef {OwnProps & StateProps} Props
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
 const builtInCountries = getCountries();
 const locales = {
   en,
@@ -41,6 +87,10 @@ const locales = {
  * @returns {JSX.Element}
  */
 const ReserveFormPhoneUnwrapped = /*#__PURE__*/memo(props => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     name,
     value,
@@ -101,9 +151,9 @@ const ReserveFormPhoneUnwrapped = /*#__PURE__*/memo(props => {
       }
     });
   }, [name, onChange]);
-  const phoneClasses = classnames({
-    [phoneField]: true,
-    [phoneFieldError]: !!errorText
+  const phoneClasses = cx({
+    [classes.phoneField]: true,
+    [classes.phoneFieldError]: !!errorText
   });
   if (!countries || countries.length === 0) {
     return /*#__PURE__*/_jsx(TextField, {
@@ -111,7 +161,7 @@ const ReserveFormPhoneUnwrapped = /*#__PURE__*/memo(props => {
       value: value,
       onChange: onChange,
       label: label,
-      className: formField,
+      className: classes.formField,
       errorText: errorText
     });
   }
@@ -128,7 +178,7 @@ const ReserveFormPhoneUnwrapped = /*#__PURE__*/memo(props => {
       countries: countries,
       labels: labels
     }), !!errorText && /*#__PURE__*/_jsx("div", {
-      className: phoneFieldErrorText,
+      className: classes.phoneFieldErrorText,
       children: errorText
     })]
   });

package/locations/components/StockInfo/StockInfo.defaultSettings.js

@@ -1,13 +1,18 @@
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { AVAILABILITY_TYPE_AVAILABLE, AVAILABILITY_TYPE_LIMITED_AVAILABILITY, AVAILABILITY_TYPE_NOT_AVAILABLE, AVAILABILITY_TYPE_CUSTOM_AVAILABILITY, AVAILABILITY_TYPE_COMING_SOON } from '@shopgate/engage/product/constants';
-export default {
+
+/**
+ * Default stock info settings with theme palette colors.
+ * @param {Object} theme Engage theme from `useTheme()` / `makeStyles`.
+ * @returns {Object}
+ */
+export const createStockInfoDefaultSettings = theme => ({
   [AVAILABILITY_TYPE_AVAILABLE]: {
     visibleInventoryFrom: 11,
     visibleInventoryTo: null,
     includeInventoryBlind: false,
     includeNoRecordStores: false,
     availabilityText: 'locations.stock_info.availableInventory',
-    availabilityTextColor: `var(--color-state-ok, ${themeColors.success})`
+    availabilityTextColor: theme.palette.success.main
   },
   [AVAILABILITY_TYPE_COMING_SOON]: {
     comingSoon: true,
@@ -16,7 +21,7 @@ export default {
     includeInventoryBlind: true,
     includeNoRecordStores: true,
     availabilityText: `locations.stock_info.${AVAILABILITY_TYPE_COMING_SOON}`,
-    availabilityTextColor: `var(--color-state-warning, ${themeColors.warning})`
+    availabilityTextColor: theme.palette.warning.main
   },
   [AVAILABILITY_TYPE_LIMITED_AVAILABILITY]: {
     visibleInventoryFrom: 1,
@@ -24,7 +29,7 @@ export default {
     includeInventoryBlind: false,
     includeNoRecordStores: false,
     availabilityText: `locations.stock_info.${AVAILABILITY_TYPE_LIMITED_AVAILABILITY}`,
-    availabilityTextColor: `var(--color-state-warning, ${themeColors.warning})`
+    availabilityTextColor: theme.palette.warning.main
   },
   [AVAILABILITY_TYPE_NOT_AVAILABLE]: {
     visibleInventoryFrom: 0,
@@ -32,7 +37,7 @@ export default {
     includeInventoryBlind: false,
     includeNoRecordStores: false,
     availabilityText: `locations.stock_info.${AVAILABILITY_TYPE_NOT_AVAILABLE}`,
-    availabilityTextColor: `var(--color-state-alert, ${themeColors.error})`,
+    availabilityTextColor: theme.palette.error.main,
     allowOrderingToStore: true
   },
   [AVAILABILITY_TYPE_CUSTOM_AVAILABILITY]: {
@@ -41,9 +46,9 @@ export default {
     includeInventoryBlind: false,
     includeNoRecordStores: true,
     availabilityText: `locations.stock_info.${AVAILABILITY_TYPE_CUSTOM_AVAILABILITY}`,
-    availabilityTextColor: `var(--color-state-alert, ${themeColors.error})`,
+    availabilityTextColor: theme.palette.error.main,
     allowOrderingToStore: true
   },
   maxNumberOfVisibleInventory: 100,
   aboveMaxExtension: '+'
-};
+});

package/locations/components/StockInfo/StockInfo.js

@@ -1,22 +1,33 @@
 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 { makeStyles, useTheme } from '@shopgate/engage/styles';
 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 { createStockInfoDefaultSettings } from "./StockInfo.defaultSettings";
 import { StockInfoInventory } from "./StockInfoInventory";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()((theme, {
+  availabilityTextColor
+}) => ({
+  defaultClassName: {
+    color: availabilityTextColor,
+    fontSize: '0.75rem',
+    margin: 0,
+    ':not(:empty) ~ *': {
+      marginLeft: 14
+    }
+  }
+}));
 
 /**
  * Creates a mapper for redux.
  * @returns {Function}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const makeMapStateToProps = () => {
   const getInventory = makeGetLocationInventory((_, props) => props.location?.code, (_, props) => props.productId || props.product?.id);
   return (state, props) => ({
@@ -34,23 +45,22 @@ const StockInfoUnwrapped = ({
   inventory,
   className
 }) => {
+  const theme = useTheme();
   const {
     locationStockInfo
   } = getThemeSettings('product') || {};
-  const settings = defaultsDeep(locationStockInfo, defaultSettings);
+  const settings = React.useMemo(() => defaultsDeep(locationStockInfo, createStockInfoDefaultSettings(theme)), [locationStockInfo, theme]);
   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 {
+    classes,
+    cx
+  } = useStyles({
+    availabilityTextColor
+  });
   const portalProps = React.useMemo(() => ({
     location,
     inventory,
@@ -64,7 +74,7 @@ const StockInfoUnwrapped = ({
     portalName: PRODUCT_LOCATION_STOCK_INFO,
     portalProps: portalProps,
     children: /*#__PURE__*/_jsx("span", {
-      className: classNames(defaultClassName, css(className).toString()),
+      className: cx(classes.defaultClassName, className),
       children: /*#__PURE__*/_jsx(StockInfoInventory, {
         availabilityText: availabilityText,
         comingSoon: comingSoon,

package/locations/components/StockInfoLists/index.js

@@ -1,8 +1,8 @@
 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 { makeStyles } from '@shopgate/engage/styles';
 import { getPreferredLocation, makeGetLocationInventory } from "../../selectors";
 import { I18n, SurroundPortals } from "../../../components";
 import { StockInfo } from "../StockInfo";
@@ -23,19 +23,19 @@ const makeMapStateToProps = () => {
     showStockInfo: showInventoryInLists(state)
   });
 };
-const styles = {
-  wrapper: css({
+const useStyles = makeStyles()({
+  wrapper: {
     flexDirection: 'row',
     alignItems: 'flex-end',
     fontSize: '0.65rem'
-  }),
-  text: css({
+  },
+  text: {
     margin: '0 !important'
-  }).toString(),
-  location: css({
+  },
+  location: {
     marginLeft: '0 !important'
-  })
-};
+  }
+});
 
 /**
  * Renders visible stock information based on the given location.
@@ -48,6 +48,9 @@ const StockInfoLists = ({
   inventory,
   showStockInfo
 }) => {
+  const {
+    classes
+  } = useStyles();
   if (!showStockInfo || !preferredLocation) {
     return null;
   }
@@ -61,7 +64,7 @@ const StockInfoLists = ({
     portalName: PRODUCT_LOCATION_STOCK_INFO_LIST,
     portalProps: portalProps,
     children: /*#__PURE__*/_jsx("div", {
-      className: styles.wrapper,
+      className: classes.wrapper,
       role: "text",
       children: /*#__PURE__*/_jsxs(PlaceholderLabel, {
         ready: !!inventory,
@@ -73,9 +76,9 @@ const StockInfoLists = ({
           params: {
             storeName: ''
           },
-          className: styles.text
+          className: classes.text
         }), ' ', /*#__PURE__*/_jsx("span", {
-          className: styles.location,
+          className: classes.location,
           children: preferredLocation.name
         })]
       })