@shopgate/engage 7.32.0-beta.2 → 7.32.0-beta.20

package/filter/providers/FilterPageProvider.js

@@ -1,28 +1,40 @@
-import React, { useMemo, useState, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.replace.js";
+import { useMemo, useState, useEffect, useCallback } from 'react';
 import { connect } from 'react-redux';
 import debounce from 'lodash/debounce';
 import isEqual from 'lodash/isEqual';
 import { router } from '@shopgate/engage/core';
+import { useRoute } from '@shopgate/engage/core/hooks';
+import { parseObjectToQueryString } from '@shopgate/engage/core/helpers';
 import { getFiltersByHash } from '@shopgate/engage/filter';
-// eslint-disable-next-line no-unused-vars, import/named
-import Context, { APIFilter, RouteFilters } from "./FilterPageProvider.context";
+import Context from "./FilterPageProvider.context";
 import { buildInitialFilters, buildUpdatedFilters } from "../helpers";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FILTER_PATH_SUFFIX = '/filter';
 
 /**
- * @param {Object} state The application state.
- * @param {Object} props The component props.
- * @returns {Object}
+ * A single stored filter value carrying id and label.
+ */
+
+/**
+ * A filter as kept in the provider's internal state. `value` holds either the selected values of a
+ * list filter or the `[min, max]` tuple of a range filter.
+ */
+
+const buildInitialFiltersTyped = buildInitialFilters;
+const buildUpdatedFiltersTyped = buildUpdatedFilters;
+/**
+ * Maps the available filters from the application state onto the provider props.
+ * @returns The mapped state props.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const mapStateToProps = (state, props) => ({
   filters: getFiltersByHash(state, props)
 });
 
 /**
- * @param {Object} next The next component props.
- * @param {Object} prev The previous component props.
- * @returns {boolean}
+ * Compares the mapped state props to decide whether the connected component needs to re-render.
+ * @returns Whether the state props are considered equal.
  */
 const areStatePropsEqual = (next, prev) => {
   if (!prev.filters && next.filters || !isEqual(prev.filters, next.filters)) {
@@ -34,25 +46,19 @@ const areStatePropsEqual = (next, prev) => {
 /**
  * The FilterPageProvider component provides all relevant data and callbacks to represent and modify
  * the current state of the "filter" page.
- * @param {Object} props Provider props
- * @param {APIFilter[]} props.filters Array of available filters
- * @param {RouteFilters} props.activeFilters Object with the active filters for a filtered product
- * list
- * @param {string} props.parentRouteId Id of the route with the product list that's supposed to be
- * filtered
- * @param {Function} [props.onApply] Callback invoked when users pressed the apply button
- * @param {string} [props.categoryId] A category to be used for filter selection from Redux
- * @param {string} [props.searchPhrase] A search phrase to be used for filter selection from Redux
- * @param {NodeList} children Provider children
- * @returns {JSX.Element}
+ * @returns The rendered component.
  */
 const FilterPageProvider = ({
-  filters: filtersProp,
-  activeFilters: activeFiltersProp,
-  parentRouteId,
-  onApply,
-  children
+  filters: filtersProp = null,
+  activeFilters: activeFiltersProp = null,
+  parentRouteId = null,
+  onApply = () => setTimeout(router.pop, 250),
+  children = null
 }) => {
+  const {
+    pathname,
+    query
+  } = useRoute();
   const [currentFilters, setCurrentFilters] = useState(activeFiltersProp || {});
 
   /**
@@ -60,7 +66,7 @@ const FilterPageProvider = ({
    * It's created from the "filters" array that contains all available filters, and the
    * "activeFilters" object that represents filters with an active value selection.
    */
-  const [initialFilters, setInitialFilters] = useState(buildInitialFilters(filtersProp, activeFiltersProp));
+  const [initialFilters, setInitialFilters] = useState(buildInitialFiltersTyped(filtersProp, activeFiltersProp));
 
   /**
    * Storage that hosts an object that represents the a partial state of the filters page with
@@ -82,7 +88,7 @@ const FilterPageProvider = ({
       if (Object.keys(currentState).length > 0) {
         return currentState;
       }
-      return buildInitialFilters(filtersProp, activeFiltersProp);
+      return buildInitialFiltersTyped(filtersProp, activeFiltersProp);
     });
   }, [activeFiltersProp, filtersProp]);
 
@@ -91,37 +97,23 @@ const FilterPageProvider = ({
    *
    * Reset is possible whenever filters where selected by the user before, or when filters where
    * modified since the filters page was opened.
-   * @type {boolean}
    */
   const resetPossible = useMemo(() => !!(Object.keys(currentFilters).length || Object.keys(changedFilters).length), [changedFilters, currentFilters]);
 
   /**
    * Whether the filter selection has changed since the filters page was opened
-   * @type {boolean}
    */
   const hasChanged = useMemo(() => Object.keys(changedFilters).length > 0 || !!(Object.keys(currentFilters).length === 0 && activeFiltersProp), [activeFiltersProp, changedFilters, currentFilters]);
-
-  /**
-   * Retrieves a list of currently selected values for a filter
-   * @callback getSelectedFilterValues
-   * @param {string} filterId The id of the filter
-   * @returns {string[]}
-   */
-  const getSelectedFilterValues = useCallback(
-  /**
-   * @param {string} filterId The id of the filter
-   * @returns {string[]}
-   */
-  filterId => {
+  const getSelectedFilterValues = useCallback(filterId => {
     const value = changedFilters[filterId] ? changedFilters[filterId].value : initialFilters[filterId]?.value || [];
-    return value.map(entry => entry.id || entry);
+    return value.map(entry => typeof entry === 'object' ? entry.id : entry);
   }, [changedFilters, initialFilters]);
 
   /**
    * Resets all filters which have been changed by the user
    */
   const resetAllFilters = useCallback(() => {
-    setInitialFilters(buildInitialFilters(filtersProp, {}));
+    setInitialFilters(buildInitialFiltersTyped(filtersProp, {}));
     setCurrentFilters({});
     setChangedFilters({});
   }, [filtersProp]);
@@ -132,77 +124,33 @@ const FilterPageProvider = ({
   const resetChangedFilters = useCallback(() => {
     setChangedFilters({});
   }, []);
-
-  /**
-   * Adds or updates the selection for a changed filter
-   * @callback updateChangedFilterInternal
-   * @param {string} filterId The id of the filter to be updated
-   * @param {string[]} selectedValues The updated selected values
-   */
-  const updateChangedFilterInternal = useCallback(
-  /**
-   * @param {string} filterId The id of the filter to be updated
-   * @param {string[]} selectedValues The updated selected values
-   */
-  (filterId, selectedValues) => {
+  const updateChangedFilterInternal = useCallback((filterId, selectedValues) => {
     setChangedFilters(currentState => ({
       ...currentState,
       [filterId]: selectedValues
     }));
   }, []);
-
-  /**
-   * Removes a changed filter
-   * @callback removeChangedFilterInternal
-   * @param {string} filterId The id of the filter to be updated
-   * @param {string[]} selectedValues The updated selected values
-   */
-  const removeChangedFilterInternal = useCallback(
-  /**
-   * @param {string} filterId The id of the filter to be removed
-   */
-  filterId => {
+  const removeChangedFilterInternal = useCallback(filterId => {
     setChangedFilters(currentState => {
-      // Separate the given id from the other set filters.
-      const {
-        [filterId]: removed,
-        ...remainingFilters
-      } = currentState;
+      const remainingFilters = {
+        ...currentState
+      };
+      delete remainingFilters[filterId];
       return remainingFilters;
     });
   }, []);
-
-  /**
-   * Updates the selection for a filter
-   *
-   * @param {string} filterId The id of the filter to be updated
-   * @param {string[]} selectedValues The updated selected values
-   */
-  const updateSelectedFilterValues = useCallback(debounce(
-  /**
-   * @param {string} filterId The id of the filter to be updated
-   * @param {string[]} selectedValues The updated selected values
-   */
-  (filterId, selectedValues) => {
-    // Retrieve data of filter to be updated from the filters array.
-    const filter = filtersProp.find(entry => entry.id === filterId);
-
-    // Retrieve the values for the updated filter that where set when the filter page was opened
+  const updateSelectedFilterValues = useCallback(debounce((filterId, selectedValues) => {
+    const filter = (filtersProp || []).find(entry => entry.id === filterId);
+    if (!filter) {
+      return;
+    }
     const {
       value: initialValues
     } = initialFilters[filterId];
-
-    // Prepare the update payload
-    let stateValue = [].concat(selectedValues);
-
-    /**
-     * No initial values where set for this filter, and the update contains no values. So we
-     * can remove the filter from the changedFilters storage.
-     */
-    if (initialValues.length === 0 && selectedValues.length === 0) {
-      removeChangedFilterInternal(filterId);
-      return;
-    }
+    const hasValueList = Array.isArray(filter.values);
+    const orderByFilter = ids => hasValueList ? filter.values.filter(entry => ids.includes(entry.id)).map(entry => entry.id) : ids;
+    const selectedValueIds = orderByFilter(selectedValues);
+    const initialValueIds = orderByFilter(initialValues.map(entry => typeof entry === 'object' ? entry.id : entry));
 
     /**
      * When the filter update would recreate the state that the filter initially had, we
@@ -210,25 +158,21 @@ const FilterPageProvider = ({
      *
      * That enables proper behavior for the "reset" and "update" button states.
      */
-    if (initialValues.length !== 0 && selectedValues.length !== 0) {
-      if (initialValues.every((initial, i) => initial === selectedValues[i])) {
-        removeChangedFilterInternal(filterId);
-        return;
-      }
+    if (initialValueIds.length === selectedValueIds.length && initialValueIds.every((initial, i) => initial === selectedValueIds[i])) {
+      removeChangedFilterInternal(filterId);
+      return;
     }
-    if (Array.isArray(filter.values)) {
+    let stateValue = [].concat(selectedValueIds);
+    if (hasValueList) {
       /**
        * The selectedValues array only contains a list of ids.
        * For the getProducts request that's dispatched after the current filter selection was
        * applied, id and label is required at the filter values level.
        */
-      stateValue = selectedValues.map(valueId => {
-        const match = filter.values.find(entry => entry.id === valueId);
-        return {
-          id: match.id,
-          label: match.label
-        };
-      });
+      stateValue = selectedValueIds.map(valueId => filter.values.find(entry => entry.id === valueId)).filter(match => Boolean(match)).map(match => ({
+        id: match.id,
+        label: match.label
+      }));
     }
     updateChangedFilterInternal(filterId, {
       id: filterId,
@@ -242,15 +186,27 @@ const FilterPageProvider = ({
   }, 50), [filtersProp, initialFilters, removeChangedFilterInternal, updateChangedFilterInternal]);
 
   /**
-   * Applies the current filter selection to the parent route with a product list to be filtered
+   * Applies the current filter selection to the parent route with a product list to be filtered.
+   * When the filter page was entered directly, no parent route exists in the history stack. In
+   * that case the product list route is derived from the current pathname and replaces the
+   * filter page.
    */
   const applyFilters = useCallback(() => {
-    const filters = buildUpdatedFilters(currentFilters, changedFilters);
+    const filters = buildUpdatedFiltersTyped(currentFilters, changedFilters);
+    if (!parentRouteId) {
+      router.replace({
+        pathname: `${pathname.slice(0, -FILTER_PATH_SUFFIX.length)}${parseObjectToQueryString(query)}`,
+        state: {
+          filters
+        }
+      });
+      return;
+    }
     router.update(parentRouteId, {
       filters
     });
     onApply(filters);
-  }, [changedFilters, currentFilters, onApply, parentRouteId]);
+  }, [changedFilters, currentFilters, onApply, parentRouteId, pathname, query]);
   const value = useMemo(() => ({
     resetPossible,
     hasChanged,
@@ -267,17 +223,6 @@ const FilterPageProvider = ({
     children: children
   });
 };
-FilterPageProvider.defaultProps = {
-  children: null,
-  activeFilters: null,
-  parentRouteId: null,
-  filters: null,
-  onApply: () => setTimeout(router.pop, 250)
-};
-
-/**
- * @type FilterPageProvider
- */
 export default connect(mapStateToProps, null, null, {
   areStatePropsEqual
 })(FilterPageProvider);

package/locations/components/ChangeLocationButton/ChangeLocationButton.js

@@ -1,20 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n, SurroundPortals } from '@shopgate/engage/components';
+import { I18n, SurroundPortals } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { PRODUCT_FULFILLMENT_CHANGE_LOCATION } from "../../constants/Portals";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   button: {
-    fontSize: `${theme.typography.caption.fontSize} !important`,
-    letterSpacing: '0.05em',
-    padding: `${theme.spacing(0.375, 0)} !important`,
-    ' *': {
-      padding: '0 !important'
-    }
-  },
-  ripple: {
-    padding: 0
+    fontSize: theme.typography.caption.fontSize,
+    padding: 0,
+    letterSpacing: '0.05em'
   }
 }));
 
@@ -38,13 +33,14 @@ export const ChangeLocationButtonUnwrapped = ({
       onClick,
       disabled
     },
-    children: /*#__PURE__*/_jsx(RippleButton, {
+    children: /*#__PURE__*/_jsx(Button, {
+      variant: "link",
+      color: "primary",
+      size: "small",
+      dense: true,
       onClick: onClick,
       className: classes.button,
       disabled: disabled,
-      rippleClassName: classes.ripple,
-      type: "secondary",
-      flat: true,
       children: /*#__PURE__*/_jsx(I18n.Text, {
         string: "locations.change_location"
       })

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, Typography } 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";
@@ -105,11 +106,6 @@ const useStyles = makeStyles()(theme => ({
     background: theme.palette.background.surface,
     padding: 16,
     paddingBottom: 24
-  },
-  buttonSchedule: {
-    '&&': {
-      width: '100%'
-    }
   }
 }));
 
@@ -301,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/FulfillmentSlotSwitcher.js

@@ -14,7 +14,7 @@ const useStyles = makeStyles()(theme => ({
       borderBottom: 0
     },
     ' > div': {
-      borderRadius: 5,
+      borderRadius: theme.shape.borderRadius,
       margin: -1,
       background: theme.palette.background.surface,
       border: `1px solid ${theme.components.border.light}`

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcherBar.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n, Typography } 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";
@@ -29,15 +30,8 @@ const useStyles = makeStyles()(theme => ({
   },
   button: {
     marginLeft: 'auto',
-    letterSpacing: '0.05em',
-    padding: `${theme.spacing(0.375, 0)} !important`,
-    ' *': {
-      fontSize: theme.typography.body2.fontSize,
-      textTransform: 'initial',
-      padding: '0 !important',
-      color: theme.palette.text.primary,
-      fontWeight: theme.typography.fontWeightMedium
-    }
+    textTransform: 'none',
+    padding: theme.spacing(0.375, 0)
   }
 }));
 
@@ -71,11 +65,12 @@ const FulfillmentSlotSwitcherBar = ({
         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, Typography } 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";
@@ -13,12 +14,10 @@ const useStyles = makeStyles()(theme => ({
     flexShrink: 0
   },
   button: {
-    fontSize: `${theme.typography.caption.fontSize} !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'
   }
 }));
 
@@ -48,12 +47,13 @@ const FulfillmentSlotSwitcherDefault = ({
         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/GlobalLocationSwitcher/GlobalLocationSwitcherBar.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n, Typography } 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   wrapper: {
     color: theme.palette.text.primary,
-    background: theme.palette.background.emphasized
+    background: theme.palette.background.surface
   },
   inner: {
     display: 'flex',
@@ -15,7 +16,8 @@ const useStyles = makeStyles()(theme => ({
     margin: theme.spacing(0, 2),
     borderBottom: `1px solid ${theme.components.border.light}`,
     alignItems: 'center',
-    height: theme.components.filterBar.height
+    height: theme.components.filterBar.height,
+    justifyContent: 'space-between'
   },
   innerStandalone: {
     borderBottom: 'none'
@@ -24,16 +26,9 @@ const useStyles = makeStyles()(theme => ({
     paddingRight: theme.spacing(1)
   },
   button: {
-    marginLeft: 'auto',
-    letterSpacing: '0.05em',
-    padding: `${theme.spacing(0.375, 0)} !important`,
-    ' *': {
-      fontSize: theme.typography.body2.fontSize,
-      textTransform: 'initial',
-      padding: '0 !important',
-      color: theme.palette.text.primary,
-      fontWeight: theme.typography.fontWeightMedium
-    }
+    marginLeft: theme.spacing(2),
+    marginTop: theme.spacing(0.5),
+    textTransform: 'none'
   }
 }));
 
@@ -68,12 +63,13 @@ const GlobalLocationSwitcherBar = ({
           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"
         })

package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcherDefault.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n, Typography } 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -15,12 +16,8 @@ const useStyles = makeStyles()(theme => ({
     color: theme.palette.text.primary
   },
   button: {
-    fontSize: `${theme.typography.caption.fontSize} !important`,
-    letterSpacing: '0.05em',
-    padding: `${theme.spacing(0.375, 0)} !important`,
-    ' *': {
-      padding: '0 !important'
-    }
+    textTransform: 'none',
+    marginLeft: theme.spacing(1)
   }
 }));
 
@@ -49,12 +46,14 @@ const GlobalLocationSwitcherDefault = ({
         fontWeight: "medium",
         className: classes.name,
         children: locationName
-      }), /*#__PURE__*/_jsx(RippleButton, {
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "link",
+        color: "primary",
+        size: "small",
+        dense: true,
         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/ReserveForm/ReserveForm.js

@@ -1,7 +1,8 @@
 import 'react-phone-number-input/style.css';
 import React, { useState, useContext, useMemo, useRef, useLayoutEffect, useCallback } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
-import { TextField, RippleButton, RadioGroup, RadioGroupItem, ProgressBar, Typography } from '@shopgate/engage/components';
+import { TextField, RadioGroup, RadioGroupItem, ProgressBar, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { useFormState } from "../../../core/hooks/useFormState";
 import { FulfillmentContext } from "../../locations.context";
@@ -35,9 +36,6 @@ const useStyles = makeStyles()(theme => ({
       paddingRight: 0
     }
   },
-  button: {
-    width: '100%'
-  },
   progressBar: {
     height: '4px',
     position: 'relative'
@@ -239,10 +237,11 @@ function ReserveFormUnwrapped() {
           className: classes.formField,
           errorText: i18n.text(validationErrors.email2)
         })]
-      }), /*#__PURE__*/_jsx(RippleButton, {
-        type: "secondary",
+      }), /*#__PURE__*/_jsx(Button, {
+        type: "submit",
+        color: "primary",
+        fullWidth: true,
         disabled: changed || valid === false || isSubmitting,
-        className: classes.button,
         children: i18n.text('locations.place_reservation')
       })]
     })]

package/locations/components/StoreDetails/components/GetDirectionsButton.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { historyPush } from '@shopgate/pwa-common/actions/router';
 import PropTypes from 'prop-types';
-import { Button } from '@shopgate/engage/components';
+import { ButtonBase } from '@shopgate/engage/components/v2';
 import { generateGoogleMapsDirectionsUrl, i18n } from '@shopgate/engage/core';
 import { useDispatch } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
@@ -38,10 +38,8 @@ const GetDirectionsButton = ({
     }));
   };
   return /*#__PURE__*/_jsx("div", {
-    children: /*#__PURE__*/_jsx(Button, {
+    children: /*#__PURE__*/_jsx(ButtonBase, {
       onClick: handleClick,
-      role: "button",
-      type: "plain",
       children: /*#__PURE__*/_jsx("span", {
         className: classes.buttonText,
         children: i18n.text('location.getDirections')