@shopgate/engage 7.31.4-beta.1 → 7.32.0-beta.2

package/locations/components/StoreList/StoreListLocations.js

@@ -1,7 +1,6 @@
 import React, { useContext } from 'react';
-import { CardList, SurroundPortals } from '@shopgate/engage/components';
+import { CardList, SurroundPortals, Typography } 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";
@@ -10,18 +9,17 @@ 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)',
+    background: theme.palette.background.emphasized,
     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,
+    background: theme.palette.background.surface,
     marginBottom: theme.spacing(1.5),
     ':last-of-type': {
       marginBottom: 0
     },
-    border: `1px solid ${themeColors.shade7}`,
+    border: `1px solid ${theme.components.border.light}`,
     boxSizing: 'border-box',
     boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.25)',
     borderRadius: '0px 0px 3px 3px'
@@ -53,18 +51,22 @@ function StoreListLocations() {
     portalProps: {
       locations
     },
-    children: /*#__PURE__*/_jsx(CardList, {
-      className: classes.stores,
-      children: /*#__PURE__*/_jsx(PlaceholderLabel, {
-        className: classes.storeCardPlaceholder,
-        ready: !showPlaceholder,
-        children: locations.map(location => /*#__PURE__*/_jsx(CardList.Item, {
-          className: classes.storeCard,
-          children: /*#__PURE__*/_jsx(StoreContext.Provider, {
-            value: location,
-            children: /*#__PURE__*/_jsx(StoreCard, {})
-          })
-        }, location.code))
+    children: /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      component: "div",
+      children: /*#__PURE__*/_jsx(CardList, {
+        className: classes.stores,
+        children: /*#__PURE__*/_jsx(PlaceholderLabel, {
+          className: classes.storeCardPlaceholder,
+          ready: !showPlaceholder,
+          children: locations.map(location => /*#__PURE__*/_jsx(CardList.Item, {
+            className: classes.storeCard,
+            children: /*#__PURE__*/_jsx(StoreContext.Provider, {
+              value: location,
+              children: /*#__PURE__*/_jsx(StoreCard, {})
+            })
+          }, location.code))
+        })
       })
     })
   });

package/locations/components/StoreList/StoreListProduct.js

@@ -1,6 +1,5 @@
 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";
@@ -11,7 +10,7 @@ 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}`
+    boxShadow: `inset 0 1px 0 ${theme.palette.grey.light}`
   },
   productContainerInner: {
     display: 'flex',
@@ -21,7 +20,7 @@ const useStyles = makeStyles()(theme => ({
     flex: '0 0 auto',
     width: '2.5rem',
     height: '2.5rem',
-    background: themeColors.placeholder,
+    background: theme.palette.background.emphasized,
     marginRight: theme.spacing(2.5)
   },
   productContent: {

package/locations/components/StoreList/StoreListProductInfo.js

@@ -1,7 +1,6 @@
 import React, { useContext } from 'react';
-import { Grid, ProductProperties } from '@shopgate/engage/components';
+import { Grid, ProductProperties, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { ProductGridPrice } from "../../../product";
 import { FulfillmentContext } from "../../locations.context";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -11,8 +10,7 @@ const useStyles = makeStyles()(theme => ({
     color: theme.palette.text.primary
   },
   productInfoLeft: {
-    fontSize: '0.875rem',
-    color: themeColors.shade11
+    color: theme.palette.grey.dark
   },
   priceInfo: {
     color: theme.palette.primary.main,
@@ -47,8 +45,13 @@ function StoreListProductInfo() {
     children: [/*#__PURE__*/_jsx(Grid.Item, {
       grow: 1,
       className: classes.productInfoLeft,
-      children: characteristics && /*#__PURE__*/_jsx(ProductProperties, {
-        properties: characteristics
+      children: characteristics && /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "div",
+        className: classes.productInfoLeft,
+        children: /*#__PURE__*/_jsx(ProductProperties, {
+          properties: characteristics
+        })
       })
     }), /*#__PURE__*/_jsx(Grid.Item, {
       shrink: 0,

package/locations/components/StoreList/StoreListProductName.js

@@ -1,12 +1,11 @@
 import React, { useContext } from 'react';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { Ellipsis } from "../../../components";
 import { FulfillmentContext } from "../../locations.context";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   productName: {
-    fontSize: '1.25rem',
-    fontWeight: 600,
     marginBottom: theme.spacing(1)
   }
 }));
@@ -25,7 +24,9 @@ function StoreListProductName() {
   if (!baseProduct) {
     return null;
   }
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "h3",
+    component: "div",
     className: classes.productName,
     children: /*#__PURE__*/_jsx(Ellipsis, {
       children: /*#__PURE__*/_jsx("span", {

package/locations/components/StoreList/StoreListSearch.js

@@ -3,7 +3,6 @@ import React, { memo, useCallback, useContext, useEffect, useLayoutEffect, useRe
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { InfoIcon, LocatorIcon, MagnifierIcon, MessageBar, SurroundPortals } from '@shopgate/engage/components';
 import { useCountriesNames } from '@shopgate/engage/i18n';
 import StoreListSearchRadius from "./StoreListSearchRadius";
@@ -14,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
     padding: '0 12px 8px 12px',
-    background: themeColors.light,
+    background: theme.palette.background.surface,
     display: 'grid',
     gridTemplateColumns: 'auto 1fr',
     gridTemplateRows: 'auto',
@@ -54,22 +53,22 @@ const useStyles = makeStyles()(theme => ({
       width: 5,
       height: 5,
       border: '5px solid transparent',
-      borderTopColor: themeColors.shade6
+      borderTopColor: theme.components.border.dark
     }
   },
   select: {
     appearance: 'none',
-    border: `1px solid ${themeColors.shade7}`,
+    border: `1px solid ${theme.components.border.light}`,
     padding: theme.spacing(0, 4, 0, 1.5),
-    color: themeColors.shade11,
-    fontSize: '1rem',
+    color: theme.palette.grey.dark,
+    fontSize: theme.typography.body1.fontSize,
     borderRadius: 4,
     width: '100%',
     outline: 0
   },
   inputContainer: {
-    background: themeColors.light,
-    border: `1px solid ${themeColors.shade7}`,
+    background: theme.palette.background.surface,
+    border: `1px solid ${theme.components.border.light}`,
     borderRadius: 4,
     display: 'flex',
     alignItems: 'center',
@@ -86,13 +85,13 @@ const useStyles = makeStyles()(theme => ({
   inputIcon: {
     padding: 0,
     margin: '0 8px',
-    color: themeColors.shade9,
-    fontSize: '1.23rem',
+    color: theme.palette.grey.dark,
+    fontSize: theme.components.icon.small,
     flexShrink: 0,
     outline: 0
   },
   iconClass: {
-    fontSize: '1.25rem !important'
+    fontSize: `${theme.components.icon.small} !important`
   }
 }));
 

package/locations/components/StoreList/StoreListSearchRadius.js

@@ -2,7 +2,6 @@ import React, { useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import connector from "./StoreListSearchRadius.connector";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -22,15 +21,15 @@ const useStyles = makeStyles()(theme => ({
       width: 5,
       height: 5,
       border: '5px solid transparent',
-      borderTopColor: themeColors.shade6
+      borderTopColor: theme.components.border.dark
     }
   },
   select: {
     appearance: 'none',
-    border: `1px solid ${themeColors.shade7}`,
+    border: `1px solid ${theme.components.border.light}`,
     padding: theme.spacing(0, 4, 0, 1.5),
-    color: themeColors.shade11,
-    fontSize: '1rem',
+    color: theme.palette.grey.dark,
+    fontSize: theme.typography.body1.fontSize,
     borderRadius: 4,
     width: '100%',
     outline: 0

package/locations/components/StoreList/StoreOpeningHours.js

@@ -2,22 +2,18 @@ import _isEmpty from "lodash/isEmpty";
 import _every from "lodash/every";
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getWeekDaysOrder } from '@shopgate/engage/core';
+import { i18n, getWeekDaysOrder } from '@shopgate/engage/core';
 import { makeStyles } from '@shopgate/engage/styles';
-import { I18n, TimeIcon } from '@shopgate/engage/components';
+import { TimeIcon, Typography } from '@shopgate/engage/components';
 import { StoreDetailsLine } from "./StoreDetailsLine";
 import { StoreOpeningHoursLine } from "./StoreOpeningHoursLine";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   openingHours: {
     display: 'table',
-    color: 'var(--color-text-medium-emphasis)'
-  },
-  detailsSecondary: {
-    color: 'var(--color-text-medium-emphasis)',
-    fontSize: '0.75rem'
+    color: theme.palette.text.secondary
   }
-});
+}));
 
 /**
  * Renders the store's opening hours.
@@ -52,9 +48,11 @@ export function StoreOpeningHours({
   }
   return /*#__PURE__*/_jsxs(StoreDetailsLine, {
     icon: TimeIcon,
-    children: [/*#__PURE__*/_jsx(I18n.Text, {
-      string: "locations.hours_details",
-      className: classes.detailsSecondary
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "caption",
+      component: "span",
+      color: "textSecondary",
+      children: i18n.text('locations.hours_details')
     }), storeHours]
   });
 }

package/locations/components/StoreList/StorePhoneNumber.js

@@ -1,21 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { I18n, PhoneIcon } from '@shopgate/engage/components';
+import { PhoneIcon, Typography } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { StoreDetailsLine } from "./StoreDetailsLine";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   detailsPrimary: {
     margin: 0,
-    color: 'var(--color-primary)',
+    color: theme.palette.primary.main,
     lineHeight: '1.375rem'
-  },
-  detailsSecondary: {
-    color: 'var(--color-text-medium-emphasis)',
-    fontSize: '0.75rem'
   }
-});
+}));
 
 /**
  * Renders the store's phone number.
@@ -43,10 +39,12 @@ export function StorePhoneNumber({
         className: classes.detailsPrimary,
         "aria-hidden": true,
         children: phone
-      }), /*#__PURE__*/_jsx(I18n.Text, {
-        string: "locations.phone",
-        className: classes.detailsSecondary,
-        "aria-hidden": true
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        component: "span",
+        color: "textSecondary",
+        "aria-hidden": true,
+        children: i18n.text('locations.phone')
       })]
     })
   });

package/locations/components/StoreList/StoreSelectLocationButton.js

@@ -14,10 +14,10 @@ const useStyles = makeStyles()(theme => ({
   },
   selectLocationButton: {
     width: '100%',
-    fontSize: '.875rem !important',
+    fontSize: `${theme.typography.body2.fontSize} !important`,
     ':not(:disabled)': {
-      background: 'var(--color-primary)!important',
-      color: 'var(--color-primary-contrast)!important'
+      background: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText
     }
   }
 }));

package/locations/helpers/showInventoryInLists.js

@@ -1,6 +1,6 @@
 import { setABFeatureFlag, isFeatureEnabled } from '@shopgate/engage/core';
 import appConfig from '@shopgate/pwa-common/helpers/config';
-import { getProductListShowInventory } from "../../core/selectors";
+import { getProductListShowInventory } from '@shopgate/engage/settings/selectors/merchantSettings';
 const STORE_KEY = 'showInventoryInLists.v1';
 let enabled = null;
 

package/locations/providers/FulfillmentProvider.connector.js

@@ -5,7 +5,7 @@ import addProductsToCart from '@shopgate/pwa-common-commerce/cart/actions/addPro
 import updateProductsInCart from '@shopgate/pwa-common-commerce/cart/actions/updateProductsInCart';
 import { getCartProducts, getActiveFulfillmentSlot, getActiveFulfillmentSlotLocationCode } from '@shopgate/engage/cart/cart.selectors';
 import { makeGetFulfillmentPaths, makeGetEnabledFulfillmentMethods, getShopSettings } from '@shopgate/engage/core/config';
-import { getRestrictMultiLocationOrders, getFulfillmentSchedulingEnabled } from '@shopgate/engage/core';
+import { getRestrictMultiLocationOrders, getFulfillmentSchedulingEnabled } from '@shopgate/engage/settings/selectors/merchantSettings';
 import { selectLocation, storeFormInput } from "../action-creators";
 import { getFilteredLocations, makeGetLocationInventory, makeGetLocationsForProduct, getPreferredLocation, getUserFormInput, getProductFulfillmentMethods, getIsFetching } from "../selectors";
 import { submitReservation } from "../actions";

package/locations/reducers/index.js

@@ -9,7 +9,7 @@ import user from "./user";
  * @typedef {import('../locations.types').LocationsState} LocationsState
  */
 
-export default combineReducers(/** @type {LocationsState} */{
+export default combineReducers({
   userFormInput,
   userSearch,
   user,

package/locations/selectors/index.js

@@ -5,7 +5,8 @@ import { getExternalCustomerNumber, getUserData, getUserId } from '@shopgate/eng
 import { generateSortedHash } from '@shopgate/pwa-common/helpers/redux/generateSortedHash';
 import { getProduct } from '@shopgate/engage/product/selectors/product';
 import { getCurrentRoute } from '@shopgate/pwa-common/selectors/router';
-import { getIsLocationBasedShopping, makeUseLocationFulfillmentMethods } from '@shopgate/engage/core/selectors';
+import { makeUseLocationFulfillmentMethods } from '@shopgate/engage/core/selectors';
+import { getIsLocationBasedShopping } from '@shopgate/engage/settings/selectors/merchantSettings';
 import { makeGetEnabledFulfillmentMethods } from "../../core/config";
 import { makeIsProductActive, makeIsBaseProductActive } from "../../product/selectors/product";
 import { isProductAvailable } from "../helpers/productInventory";

package/locations/subscriptions.js

@@ -9,7 +9,7 @@ import { categoryDidBackEnter$ } from '@shopgate/pwa-common-commerce/category/st
 import { searchDidBackEntered$ } from '@shopgate/pwa-common-commerce/search/streams';
 import { hasNewServices } from '@shopgate/engage/core/helpers';
 import { cookieConsentInitialized$ } from '@shopgate/engage/tracking/streams';
-import { IS_PAGE_PREVIEW_ACTIVE } from '@shopgate/engage/page/constants';
+import { isAdminPreviewActive } from '@shopgate/engage/admin-preview/helpers';
 import { getUserSearch, getStoreFinderSearch, getPreferredLocation, getIsPending, getProductAlternativeLocationParams, getProductAlternativeLocations, makeGetLocation } from "./selectors";
 import { fetchDefaultLocation, fetchLocations, fetchProductLocations, setPending, setUserGeolocation } from "./actions";
 import { setShowInventoryInLists, showInventoryInLists } from "./helpers";
@@ -66,7 +66,7 @@ function locationsSubscriber(subscribe) {
     }) => {
       // Skip fetching the default location if the page preview is active, since it blocks
       // iFrame communication.
-      if (hasNewServices() && !IS_PAGE_PREVIEW_ACTIVE) {
+      if (hasNewServices() && !isAdminPreviewActive()) {
         await dispatch(fetchDefaultLocation());
       }
     });

package/login/components/ForgotPassword/ForgotPassword.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { RippleButton, I18n, ArrowIcon } from '@shopgate/engage/components';
+import { RippleButton, I18n, ArrowIcon, Typography } from '@shopgate/engage/components';
 import { StylePresets } from '@shopgate/engage/components/Form';
 import TextField from '@shopgate/pwa-ui-shared/TextField';
 import { i18n, EUSERNOTFOUND } from '@shopgate/engage/core';
@@ -18,20 +18,15 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   headline: {
-    fontSize: '2.1875rem',
-    lineHeight: 1,
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     paddingBottom: theme.spacing(2),
     [responsiveMediaQuery('>sm', {
       webOnly: true
     })]: {
-      fontSize: '2rem',
-      fontWeight: 'normal'
+      fontWeight: theme.typography.fontWeightRegular
     }
   },
   subline: {
-    fontSize: '1.125rem',
-    color: 'var(--color-text-medium-emphasis)',
     marginBottom: theme.spacing(2),
     marginTop: 4
   },
@@ -51,10 +46,10 @@ const useStyles = makeStyles()(theme => ({
   },
   input: {
     ' .label': {
-      color: 'var(--color-text-medium-emphasis)'
+      color: theme.palette.text.secondary
     },
     ' .placeholder': {
-      color: 'var(--color-text-medium-emphasis)'
+      color: theme.palette.text.secondary
     },
     ' .simpleInput': {
       color: theme.palette.text.primary
@@ -66,14 +61,14 @@ const useStyles = makeStyles()(theme => ({
     alignItems: 'center'
   },
   resetInstructionsEmail: {
-    fontWeight: 'bold',
-    color: 'var(--color-secondary)'
+    fontWeight: theme.typography.fontWeightBold,
+    color: theme.palette.secondary.main
   },
   goBackButtonContainer: {
     padding: theme.spacing(2, 0)
   },
   goBackButton: {
-    fontSize: '0.875rem !important',
+    fontSize: `${theme.typography.body2.fontSize} !important`,
     padding: '0 !important',
     ' > div ': {
       padding: 0,
@@ -82,7 +77,7 @@ const useStyles = makeStyles()(theme => ({
   },
   goBackButtonIcon: {
     display: 'inline-block',
-    fontSize: '1.375rem !important',
+    fontSize: `${theme.components.icon.medium} !important`,
     alignSelf: 'center',
     marginRight: theme.spacing(0.5),
     marginLeft: -3,
@@ -132,13 +127,18 @@ const ForgotPassword = ({
   }, [goBack]);
   return /*#__PURE__*/_jsxs("div", {
     className: classes.container,
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h1",
+      component: "div",
       className: classes.headline,
       children: /*#__PURE__*/_jsx(I18n.Text, {
         string: "login.forgot_password"
       })
     }), !showSuccess ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h4",
+        component: "div",
+        color: "textSecondary",
         className: classes.subline,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "login.reset_password.subline"

package/orders/components/OrderDetails/OrderDetailsAuthenticate.js

@@ -25,7 +25,7 @@ const useStyles = makeStyles()(theme => ({
     width: '100%'
   },
   loginLink: {
-    color: 'var(--color-primary)',
+    color: theme.palette.primary.main,
     ':hover': {
       textDecoration: 'underline'
     }

package/orders/components/OrderDetails/OrderDetailsContent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { I18n } from '@shopgate/engage/components';
+import { I18n, Typography } from '@shopgate/engage/components';
 import { useOrderDetails } from "../../hooks";
 import OrderDetailsOrder from "./OrderDetailsOrder";
 import OrderDetailsAuthenticate from "./OrderDetailsAuthenticate";
@@ -12,8 +12,6 @@ const useStyles = makeStyles()(theme => ({
       webOnly: true
     })]: {
       display: 'block',
-      fontSize: '2rem',
-      fontWeight: 'normal',
       paddingBottom: theme.spacing(2),
       padding: theme.spacing(2, 2, 0)
     }
@@ -33,7 +31,10 @@ const OrderDetailsContent = () => {
     order
   } = useOrderDetails();
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [(showForm || order || errorMessage) && /*#__PURE__*/_jsx("div", {
+    children: [(showForm || order || errorMessage) && /*#__PURE__*/_jsx(Typography, {
+      variant: "h1",
+      component: "div",
+      fontWeight: "regular",
       className: classes.headline,
       children: /*#__PURE__*/_jsx(I18n.Text, {
         string: "titles.order_details"

package/orders/components/OrderDetails/OrderDetailsOrderHeader.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from '@shopgate/engage/core/helpers';
 import TimeIcon from '@shopgate/pwa-ui-shared/icons/TimeIcon';
@@ -16,14 +17,11 @@ const useStyles = makeStyles()(theme => ({
   instructions: {},
   body: {
     border: 0,
-    fontSize: '0.875rem',
     lineHeight: '1.25rem',
     marginBottom: 0
   },
   orderNum: {
     padding: 0,
-    fontSize: '1.25rem',
-    fontWeight: 500,
     lineHeight: '1.5rem',
     margin: theme.spacing(0, 0, 2),
     border: 0
@@ -72,13 +70,13 @@ const OrderDetailsOrderHeader = ({
     lineItems
   } = order;
   const fulfillmentSlot = lineItems[0]?.fulfillmentSlot;
-
-  /* eslint-disable react/no-danger */
   return /*#__PURE__*/_jsxs("div", {
     className: classes.wrapper,
     children: [/*#__PURE__*/_jsxs("div", {
       className: classes.subline,
-      children: [/*#__PURE__*/_jsxs("p", {
+      children: [/*#__PURE__*/_jsxs(Typography, {
+        variant: "h3",
+        component: "p",
         className: classes.orderNum,
         children: [i18n.text('order_details.subline.order_number', {
           orderNumber
@@ -104,7 +102,9 @@ const OrderDetailsOrderHeader = ({
       })]
     }) : null, statusText && /*#__PURE__*/_jsx("div", {
       className: classes.instructions,
-      children: /*#__PURE__*/_jsx("p", {
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "p",
         className: classes.body,
         dangerouslySetInnerHTML: {
           __html: statusText
@@ -112,6 +112,5 @@ const OrderDetailsOrderHeader = ({
       })
     })]
   });
-  /* eslint-enable react/no-danger */
 };
 export default OrderDetailsOrderHeader;

package/orders/components/OrderDetails/OrderDetailsOrderPickupLocation.js

@@ -9,8 +9,8 @@ const useStyles = makeStyles()(theme => ({
   locationName: {
     margin: 0,
     color: theme.palette.text.primary,
-    fontSize: '1rem',
-    fontWeight: 500
+    fontSize: theme.typography.body1.fontSize,
+    fontWeight: theme.typography.fontWeightMedium
   }
 }));
 

package/orders/components/OrderHistory/OrderHistoryList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrderHistoryList.d.ts","sourceRoot":"","sources":["../../../../orders/components/OrderHistory/OrderHistoryList.jsx"],"names":[],"mappings":"AAiDO,2BAHI,MAAM,GACJ,GAAG,CAkDf;;;;;;;;;;;;AAiBM,mCAHI,MAAM,GACJ,GAAG,CAUf;;;;;;;sBAzHqB,YAAY"}
+{"version":3,"file":"OrderHistoryList.d.ts","sourceRoot":"","sources":["../../../../orders/components/OrderHistory/OrderHistoryList.jsx"],"names":[],"mappings":"AA6CO,2BAHI,MAAM,GACJ,GAAG,CAkDf;;;;;;;;;;;;AAiBM,mCAHI,MAAM,GACJ,GAAG,CAUf;;;;;;;sBArHqB,YAAY"}

package/orders/components/OrderHistory/OrderHistoryList.js

@@ -1,20 +1,16 @@
-import "core-js/modules/es.array.includes.js";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { I18n, CardList, Link } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig, themeColors, themeName } from '@shopgate/pwa-common/helpers/config';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { getTranslatedOrderStatus } from "../../helpers";
 import { getOrderDetailsRoute } from "../../helpers/orderDetails";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const isIOS = themeName.includes('ios');
 const useStyles = makeStyles()(theme => ({
   orderNumber: {
-    fontWeight: 500
+    fontWeight: theme.typography.fontWeightMedium
   },
   list: {
-    background: 'var(--color-background-accent)',
     marginBottom: theme.spacing(-1.5)
   },
   cardContent: {
@@ -35,10 +31,10 @@ const useStyles = makeStyles()(theme => ({
     ':last-of-type': {
       marginBottom: 0
     },
-    background: themeColors.light,
+    background: theme.palette.background.surface,
     boxSizing: 'border-box',
-    boxShadow: themeConfig.shadows.productCard,
-    borderRadius: isIOS ? 10 : 2
+    boxShadow: '0 4px 8px rgba(0,0,0,0.16)',
+    borderRadius: 10
   }
 }));