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

package/locations/components/FulfillmentSelector/FulfillmentSelectorAlternativeLocation.js

@@ -2,22 +2,43 @@ import React, { useEffect, memo } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { withWidgetSettings } from '@shopgate/engage/core';
+import { makeStyles } from '@shopgate/engage/styles';
 import { Grid, ResponsiveContainer, SurroundPortals } from '@shopgate/engage/components';
 import { MERCHANT_SETTINGS_PRODUCT_SHOW_ALTERNATIVE_LOCATION } from "../../../core/constants";
 import { provideProductAlternativeLocation } from "../../action-creators";
 import { StockInfo } from "../StockInfo";
-import { locationName, alternativeLocation as gridClassName } from "./FulfillmentSelectorLocation.style";
-import { itemColumn, itemSpacer } from "./FulfillmentSelectorItem.style";
 import { useFulfillmentSelectorState } from "./FulfillmentSelector.hooks";
 import { PRODUCT_FULFILLMENT_SELECTOR_ALTERNATIVE_LOCATION } from "../../constants/Portals";
 import { getProductAlternativeLocations } from "../../selectors";
 import { SORT_CLOSEST_LOCATION_WITH_INVENTORY } from "../../constants";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  locationName: {
+    color: 'var(--color-text-medium-emphasis)'
+  },
+  gridClassName: {
+    fontSize: '0.825rem',
+    padding: theme.spacing(0, 2, 1, 6)
+  },
+  itemColumn: {
+    display: 'block',
+    width: '50%',
+    '&:first-of-type': {
+      paddingRight: theme.spacing(1)
+    },
+    '&:last-of-type': {
+      textAlign: 'right'
+    }
+  },
+  itemSpacer: {
+    marginLeft: 16
+  }
+}));
 
 /**
  * The FulfillmentSelectorLocation component
  * @returns {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function FulfillmentSelectorAlternativeLocation({
   productId,
   show,
@@ -25,6 +46,9 @@ function FulfillmentSelectorAlternativeLocation({
   provideAlternativeLocation,
   widgetSettings
 }) {
+  const {
+    classes
+  } = useStyles();
   const {
     merchantSettings = {},
     selectedLocation
@@ -58,21 +82,21 @@ function FulfillmentSelectorAlternativeLocation({
     },
     children: alternativeLocation && /*#__PURE__*/_jsxs(Grid, {
       component: "div",
-      className: gridClassName,
+      className: classes.gridClassName,
       children: [/*#__PURE__*/_jsxs(ResponsiveContainer, {
         appAlways: true,
         breakpoint: "xs",
         children: [/*#__PURE__*/_jsx(Grid.Item, {
-          className: itemColumn,
+          className: classes.itemColumn,
           grow: 1,
           shrink: 0,
           component: "div",
           children: /*#__PURE__*/_jsx("div", {
-            className: locationName,
+            className: classes.locationName,
             children: alternativeLocation.name
           })
         }), /*#__PURE__*/_jsx(Grid.Item, {
-          className: itemColumn,
+          className: classes.itemColumn,
           grow: 1,
           shrink: 0,
           component: "div",
@@ -85,9 +109,9 @@ function FulfillmentSelectorAlternativeLocation({
         webOnly: true,
         breakpoint: ">xs",
         children: /*#__PURE__*/_jsxs("div", {
-          className: locationName,
+          className: classes.locationName,
           children: [alternativeLocation.name, /*#__PURE__*/_jsx("span", {
-            className: itemSpacer,
+            className: classes.itemSpacer,
             children: /*#__PURE__*/_jsx(StockInfo, {
               productId: productId,
               location: alternativeLocation

package/locations/components/FulfillmentSelector/FulfillmentSelectorBOPIS.js

@@ -1,25 +1,33 @@
 import React from 'react';
-import classNames from 'classnames';
+import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { IN_STORE_PICKUP_BOPIS_LABEL } from "../../constants";
-import { itemRowDisabled } from "./FulfillmentSelectorItem.style";
 import { useFulfillmentSelectorState } from "./FulfillmentSelector.hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  itemRowDisabled: {
+    opacity: 0.3
+  }
+});
 
 /**
  * Renders the FulfillmentSelectorBOPIS components.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export const FulfillmentSelectorBOPIS = () => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     isBOPISEnabled,
     isReady
   } = useFulfillmentSelectorState();
-  const classes = classNames({
-    [itemRowDisabled.toString()]: !isReady || !isBOPISEnabled
+  const className = cx({
+    [classes.itemRowDisabled]: !isReady || !isBOPISEnabled
   });
   return /*#__PURE__*/_jsx("div", {
-    className: classes,
+    className: className,
     children: i18n.text(IN_STORE_PICKUP_BOPIS_LABEL)
   });
 };

package/locations/components/FulfillmentSelector/FulfillmentSelectorDirectShip.js

@@ -1,19 +1,41 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { makeStyles } from '@shopgate/engage/styles';
 import { Grid } from '@shopgate/engage/components';
 import { i18n } from "../../../core";
 import { Availability } from "../../../product";
 import { DIRECT_SHIP_LABEL, DIRECT_SHIP } from "../../constants";
-import { itemRow, itemColumn, itemRowDisabled } from "./FulfillmentSelectorItem.style";
 import { useFulfillmentSelectorState } from "./FulfillmentSelector.hooks";
 import { FulfillmentSelectorImpossibleError } from "./FulfillmentSelectorImpossibleError";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  itemRow: {
+    alignContent: 'stretch',
+    alignItems: 'baseline'
+  },
+  itemColumn: {
+    display: 'block',
+    width: '50%',
+    '&:first-of-type': {
+      paddingRight: theme.spacing(1)
+    },
+    '&:last-of-type': {
+      textAlign: 'right'
+    }
+  },
+  itemRowDisabled: {
+    opacity: 0.3
+  }
+}));
 
 /**
  * Renders the direct ship item label.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export const FulfillmentSelectorDirectShip = () => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     productId,
     selection,
@@ -21,9 +43,9 @@ export const FulfillmentSelectorDirectShip = () => {
     isDirectShipEnabled,
     isReady
   } = useFulfillmentSelectorState();
-  const rowClasses = React.useMemo(() => classNames(itemRow, {
-    [itemRowDisabled.toString()]: !isReady || !isDirectShipEnabled
-  }), [isDirectShipEnabled, isReady]);
+  const rowClasses = React.useMemo(() => cx(classes.itemRow, {
+    [classes.itemRowDisabled]: !isReady || !isDirectShipEnabled
+  }), [classes.itemRow, classes.itemRowDisabled, isDirectShipEnabled, isReady, cx]);
   const selected = selection === DIRECT_SHIP;
   if (selected && !isOrderable) {
     return /*#__PURE__*/_jsxs(_Fragment, {
@@ -36,13 +58,13 @@ export const FulfillmentSelectorDirectShip = () => {
     className: rowClasses,
     component: "div",
     children: [/*#__PURE__*/_jsx(Grid.Item, {
-      className: itemColumn,
+      className: classes.itemColumn,
       grow: 1,
       shrink: 0,
       component: "div",
       children: i18n.text(DIRECT_SHIP_LABEL)
     }), /*#__PURE__*/_jsx(Grid.Item, {
-      className: itemColumn,
+      className: classes.itemColumn,
       grow: 1,
       shrink: 0,
       component: "div",

package/locations/components/FulfillmentSelector/FulfillmentSelectorHeader.js

@@ -1,17 +1,29 @@
 import React from 'react';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { container } from "./FulfillmentSelectorHeader.style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    fontWeight: 500,
+    marginBottom: theme.spacing(0.5)
+  }
+}));
 
 /**
  * Renders the fulfillment selector title.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-export const FulfillmentSelectorHeader = () =>
-/*#__PURE__*/
-// eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-_jsx("div", {
-  role: "heading",
-  className: container,
-  children: i18n.text('locations.fulfillment.heading')
-});
+export const FulfillmentSelectorHeader = () => {
+  const {
+    classes
+  } = useStyles();
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+    _jsx("div", {
+      role: "heading",
+      className: classes.container,
+      children: i18n.text('locations.fulfillment.heading')
+    })
+  );
+};

package/locations/components/FulfillmentSelector/FulfillmentSelectorImpossibleError.js

@@ -1,17 +1,26 @@
+import "core-js/modules/es.array.includes.js";
 import React, { useMemo, useContext } from 'react';
 import { Availability } from '@shopgate/engage/components';
 import { i18n, LoadingContext, useRoute } from '@shopgate/engage/core';
+import { makeStyles } from '@shopgate/engage/styles';
 import { AVAILABILITY_STATE_ALERT } from '@shopgate/engage/product';
 import { DIRECT_SHIP, ROPIS, BOPIS } from "../../constants";
 import { useFulfillmentSelectorState } from "./FulfillmentSelector.hooks";
-import { container } from "./FulfillmentSelectorImpossibleError.style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  container: {
+    fontSize: '0.625rem'
+  }
+});
 
 /**
  * Renders the "not possible" error for each item.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function FulfillmentSelectorImpossibleError() {
+  const {
+    classes
+  } = useStyles();
   const {
     selection,
     selectedLocation
@@ -35,7 +44,7 @@ export function FulfillmentSelectorImpossibleError() {
     label = i18n.text('locations.fulfillment.error.not_ready');
   }
   return /*#__PURE__*/_jsx(Availability, {
-    className: container,
+    className: classes.container,
     showWhenAvailable: true,
     text: label,
     state: AVAILABILITY_STATE_ALERT

package/locations/components/FulfillmentSelector/FulfillmentSelectorItem.js

@@ -1,13 +1,64 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { makeStyles } from '@shopgate/engage/styles';
 import CheckedIcon from '@shopgate/pwa-ui-shared/icons/RadioCheckedIcon';
 import UncheckedIcon from '@shopgate/pwa-ui-shared/icons/RadioUncheckedIcon';
-import { radioContainer, disabled as radioContainerDisabled, activeIcon, activeIconDisabled, inactiveIcon, inactiveIconDisabled, radio, content } from "./FulfillmentSelectorItem.style";
 import { useFulfillmentSelectorState } from "./FulfillmentSelector.hooks";
 import { DIRECT_SHIP, ROPIS, BOPIS } from "../../constants";
 
 /** @typedef {import('./FulfillmentSelector.types').Selection} Selection */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  radioContainer: {
+    display: 'flex',
+    flexFlow: 'row nowrap',
+    padding: theme.spacing(0.5, 0)
+  },
+  disabled: {
+    cursor: 'not-allowed'
+  },
+  inactiveIcon: {
+    width: 24,
+    height: 24,
+    flexShrink: 0,
+    marginTop: '-1px',
+    marginRight: theme.spacing(1),
+    color: 'var(--color-text-medium-emphasis)'
+  },
+  inactiveIconDisabled: {
+    width: 24,
+    height: 24,
+    flexShrink: 0,
+    marginTop: '-1px',
+    marginRight: theme.spacing(1),
+    color: 'var(--color-text-medium-emphasis)',
+    opacity: 0.3
+  },
+  activeIcon: {
+    width: 24,
+    height: 24,
+    flexShrink: 0,
+    marginTop: '-1px',
+    marginRight: theme.spacing(1),
+    color: 'var(--color-primary)'
+  },
+  activeIconDisabled: {
+    width: 24,
+    height: 24,
+    flexShrink: 0,
+    marginTop: '-1px',
+    marginRight: theme.spacing(1),
+    color: 'var(--color-primary)',
+    opacity: 0.3
+  },
+  radio: {
+    display: 'none'
+  },
+  content: {
+    flexGrow: 1,
+    color: theme.palette.text.primary
+  }
+}));
 
 /**
  * Renders a fulfillment selector radio item.
@@ -18,13 +69,16 @@ import { DIRECT_SHIP, ROPIS, BOPIS } from "../../constants";
  * @param {boolean} [props.disabled=false] Whether the item is disabled.
  * @returns {JSX.Element} The rendered component.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FulfillmentSelectorItemUnwrapped = ({
   name,
   children,
   onChange,
   disabled
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     selection
   } = useFulfillmentSelectorState();
@@ -41,8 +95,8 @@ const FulfillmentSelectorItemUnwrapped = ({
     }
     onChange(name);
   };
-  const containerClasses = classNames(radioContainer.toString(), {
-    [radioContainerDisabled.toString()]: disabled
+  const containerClasses = cx(classes.radioContainer, {
+    [classes.disabled]: disabled
   });
   return (
     /*#__PURE__*/
@@ -57,17 +111,17 @@ const FulfillmentSelectorItemUnwrapped = ({
       "aria-checked": checked,
       tabIndex: "0",
       children: [checked ? /*#__PURE__*/_jsx(CheckedIcon, {
-        className: disabled ? activeIconDisabled : activeIcon
+        className: disabled ? classes.activeIconDisabled : classes.activeIcon
       }) : /*#__PURE__*/_jsx(UncheckedIcon, {
-        className: disabled ? inactiveIconDisabled : inactiveIcon
+        className: disabled ? classes.inactiveIconDisabled : classes.inactiveIcon
       }), /*#__PURE__*/_jsx("input", {
         type: "radio",
         checked: checked,
         name: name,
-        className: radio,
+        className: classes.radio,
         readOnly: true
       }), /*#__PURE__*/_jsx("div", {
-        className: content,
+        className: classes.content,
         children: children
       })]
     })

package/locations/components/FulfillmentSelector/FulfillmentSelectorLocation.js

@@ -1,7 +1,9 @@
-import React, { useCallback, useMemo, Fragment } from 'react';
-import classNames from 'classnames';
+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 { 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";
@@ -9,18 +11,55 @@ import { ChangeLocationButton } from "../ChangeLocationButton";
 import { StockInfo } from "../StockInfo";
 import { FulfillmentSelectorImpossibleError } from "./FulfillmentSelectorImpossibleError";
 import { useFulfillmentSelectorState } from "./FulfillmentSelector.hooks";
-import { container, unavailable, locationName } from "./FulfillmentSelectorLocation.style";
-import { itemRow, itemColumn, itemSpacer } from "./FulfillmentSelectorItem.style";
 import { PRODUCT_FULFILLMENT_SELECTOR_LOCATION } from "../../constants/Portals";
 import { FulfillmentSelectorLocationMethodNotAvailable } from "./FulfillmentSelectorLocationMethodNotAvailable";
 import FulfillmentSelectorAlternativeLocation from "./FulfillmentSelectorAlternativeLocation";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    fontSize: '0.75rem',
+    padding: theme.spacing(0, 2, 1, 6),
+    marginTop: theme.spacing(-1),
+    flexDirection: 'column'
+  },
+  unavailable: {
+    color: themeColors.dark,
+    fontSize: '0.625rem',
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+    opacity: 0.5
+  },
+  locationName: {
+    color: 'var(--color-text-medium-emphasis)'
+  },
+  itemRow: {
+    alignContent: 'stretch',
+    alignItems: 'baseline'
+  },
+  itemColumn: {
+    display: 'block',
+    width: '50%',
+    '&:first-of-type': {
+      paddingRight: theme.spacing(1)
+    },
+    '&:last-of-type': {
+      textAlign: 'right'
+    }
+  },
+  itemSpacer: {
+    marginLeft: 16
+  }
+}));
 
 /**
  * The FulfillmentSelectorLocation component
  * @returns {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function FulfillmentSelectorLocation() {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     selection,
     preferredLocation,
@@ -65,7 +104,7 @@ export function FulfillmentSelectorLocation() {
         inventory
       },
       children: [isRopeMethodEnabled && isOrderable && usedLocation && /*#__PURE__*/_jsxs(Grid, {
-        className: classNames(itemRow, container),
+        className: cx(classes.itemRow, classes.container),
         component: "div",
         children: [/*#__PURE__*/_jsxs(Grid, {
           component: "div",
@@ -73,16 +112,16 @@ export function FulfillmentSelectorLocation() {
             appAlways: true,
             breakpoint: "xs",
             children: [/*#__PURE__*/_jsx(Grid.Item, {
-              className: itemColumn,
+              className: classes.itemColumn,
               grow: 1,
               shrink: 0,
               component: "div",
               children: /*#__PURE__*/_jsx("div", {
-                className: locationName,
+                className: classes.locationName,
                 children: usedLocation.name
               })
             }), /*#__PURE__*/_jsx(Grid.Item, {
-              className: itemColumn,
+              className: classes.itemColumn,
               grow: 1,
               shrink: 0,
               component: "div",
@@ -96,11 +135,11 @@ export function FulfillmentSelectorLocation() {
             breakpoint: ">xs",
             children: [/*#__PURE__*/_jsx("div", {
               children: /*#__PURE__*/_jsx("div", {
-                className: locationName,
+                className: classes.locationName,
                 children: usedLocation.name
               })
             }), /*#__PURE__*/_jsx("div", {
-              className: itemSpacer,
+              className: classes.itemSpacer,
               children: /*#__PURE__*/_jsx(StockInfo, {
                 productId: productId,
                 location: usedLocation
@@ -114,15 +153,15 @@ export function FulfillmentSelectorLocation() {
           disabled: !selected
         })]
       }), isRopeMethodEnabled && selected && !isOrderable && /*#__PURE__*/_jsxs("div", {
-        className: container,
+        className: classes.container,
         children: [/*#__PURE__*/_jsx("div", {
-          className: locationName,
+          className: classes.locationName,
           children: usedLocation?.name || ''
         }), /*#__PURE__*/_jsx(FulfillmentSelectorImpossibleError, {}), /*#__PURE__*/_jsx(ChangeLocationButton, {
           onClick: handleChangeLocation
         })]
       }), false && !isRopeMethodEnabled ? /*#__PURE__*/_jsx("div", {
-        className: classNames(unavailable, container),
+        className: cx(classes.unavailable, classes.container),
         children: i18n.text('locations.no_available')
       }) : null]
     }), /*#__PURE__*/_jsx(FulfillmentSelectorAlternativeLocation, {

package/locations/components/FulfillmentSelector/FulfillmentSelectorLocationMethodNotAvailable.js

@@ -1,14 +1,16 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
 import { Availability } from '@shopgate/engage/components';
-import { i18n } from '@shopgate/engage/core';
+import { makeStyles } from '@shopgate/engage/styles';
+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";
-export const container = css({
-  fontSize: '0.625rem'
-}).toString();
+const useStyles = makeStyles()({
+  container: {
+    fontSize: '0.625rem'
+  }
+});
 
 /**
  * @returns {JSX}
@@ -16,6 +18,9 @@ export const container = css({
 export function FulfillmentSelectorLocationMethodNotAvailable({
   method
 }) {
+  const {
+    classes
+  } = useStyles();
   const label = useMemo(() => {
     if (method === ROPIS) {
       return i18n.text('locations.fulfillment.error.ropis');
@@ -29,7 +34,7 @@ export function FulfillmentSelectorLocationMethodNotAvailable({
     return null;
   }
   return /*#__PURE__*/_jsx(Availability, {
-    className: container,
+    className: classes.container,
     showWhenAvailable: true,
     text: label,
     state: AVAILABILITY_STATE_ALERT

package/locations/components/FulfillmentSelector/FulfillmentSelectorROPIS.js

@@ -1,25 +1,33 @@
 import React from 'react';
-import classNames from 'classnames';
+import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from "../../../core";
 import { IN_STORE_PICKUP_ROPIS_LABEL } from "../../constants";
-import { itemRowDisabled } from "./FulfillmentSelectorItem.style";
 import { useFulfillmentSelectorState } from "./FulfillmentSelector.hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  itemRowDisabled: {
+    opacity: 0.3
+  }
+});
 
 /**
  * Renders the FulfillmentSelectorROPIS components.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function FulfillmentSelectorROPIS() {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     isROPISEnabled,
     isReady
   } = useFulfillmentSelectorState();
-  const classes = classNames({
-    [itemRowDisabled.toString()]: !isReady || !isROPISEnabled
+  const className = cx({
+    [classes.itemRowDisabled]: !isReady || !isROPISEnabled
   });
   return /*#__PURE__*/_jsx("div", {
-    className: classes,
+    className: className,
     children: i18n.text(IN_STORE_PICKUP_ROPIS_LABEL)
   });
 }

package/locations/components/FulfillmentSheet/FulfillmentSheetContent.js

@@ -1,5 +1,7 @@
 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";
@@ -7,7 +9,20 @@ import { StoreList } from "../StoreList";
 import { ReserveForm } from "../ReserveForm";
 import { ReservationSuccess, ReservationError } from "../ReservationResponses";
 import { FulfillmentPath } from "../FulfillmentPath";
-import { sheet } from "./FulfillmentSheet.style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  variables
+} = themeConfig;
+const useStyles = makeStyles()({
+  sheet: {
+    maxHeight: `calc(var(--vh-100, 100vh) - ${variables.navigator.height}px)`,
+    [responsiveMediaQuery('>sm', {
+      webOnly: true
+    })]: {
+      maxHeight: `calc(var(--vh-80, 80vh) - ${variables.navigator.height}px)`
+    }
+  }
+});
 
 /**
  * Renders the content of the fulfillment sheet.
@@ -15,10 +30,12 @@ import { sheet } from "./FulfillmentSheet.style";
  * @param {boolean} props.allowClose Whether the sheet can be closed via a button
  * @return {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const FulfillmentSheetContent = ({
   allowClose = true
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     isStage,
     title,
@@ -33,7 +50,7 @@ export const FulfillmentSheetContent = ({
     allowClose: allowClose,
     isLoading: isLoading,
     children: /*#__PURE__*/_jsxs("div", {
-      className: sheet,
+      className: classes.sheet,
       children: [isStage(STAGE_SELECT_STORE) && /*#__PURE__*/_jsx(StoreList, {}), isStage(STAGE_RESERVE_FORM) && /*#__PURE__*/_jsx(ReserveForm, {}), isStage(STAGE_RESPONSE_SUCCESS) && /*#__PURE__*/_jsx(ReservationSuccess, {}), isStage(STAGE_RESPONSE_ERROR) && /*#__PURE__*/_jsx(ReservationError, {}), isStage(STAGE_FULFILLMENT_METHOD) && /*#__PURE__*/_jsx(FulfillmentPath, {})]
     })
   });