@shopgate/engage 7.32.0-beta.1 → 7.32.0-beta.10

package/core/initialization/index.js

@@ -1,118 +1,41 @@
-import { withScope, captureMessage, Severity as SentrySeverity } from '@sentry/browser';
 import moment from 'moment';
 import { configureStore } from '@shopgate/pwa-common/store';
 import { appWillInit, appWillStart } from '@shopgate/pwa-common/action-creators/app';
 import { i18n, getAppBaseUrl, isDev, hasSGJavaScriptBridge, hasWebBridge } from '@shopgate/engage/core/helpers';
 import fetchClientInformation from '@shopgate/pwa-common/actions/client/fetchClientInformation';
-import appConfig from '@shopgate/pwa-common/helpers/config';
+import { appConfig } from '@shopgate/engage';
 import { appInitialization, configuration } from '@shopgate/engage/core/collections';
 import { CONFIGURATION_COLLECTION_KEY_BASE_URL } from '@shopgate/engage/core/constants';
-import { loadCustomStyles } from '@shopgate/engage/styles';
-import { receiveShopSettings, errorShopSettings } from '@shopgate/engage/settings/action-creators/shopSettings';
-import { receiveMerchantSettings } from '@shopgate/engage/settings/action-creators/merchantSettings';
-const {
-  locales: {
-    currency: currencyLocale = null
-  } = {},
-  settingsUrl,
-  merchantSettingsUrl
-} = appConfig;
-const REQUEST_TIMEOUT = 3000;
-/**
- * Injects a script tag to fetch the shop settings JSONP.
- * @param {string} id The script id
- * @param {string} src The script url
- * @param {Function} onError Callback for error situations.
- */
-const injectScript = (id, src, onError) => {
-  let scriptTag = document.querySelector(`#${id}`);
-  if (scriptTag) {
-    scriptTag.remove();
-  }
-  scriptTag = document.createElement('script');
-  scriptTag.setAttribute('src', src);
-  scriptTag.setAttribute('id', id);
-  scriptTag.onerror = onError;
-  document.querySelector('head').appendChild(scriptTag);
-};
+import { loadCustomStyles, loadThemeCss, loadFontCss } from '@shopgate/engage/styles';
+import { getTypographyFontCssUrls } from '@shopgate/engage/settings/selectors/appSettings';
+// Imported via its module path rather than the admin-preview helpers barrel, which ThemeProvider
+// and loadThemeCss already import - this module reaches into the settings action creators.
+import { awaitInitialFrontendSettings } from '@shopgate/engage/admin-preview/initialization/awaitInitialFrontendSettings';
+import { fetchSettings } from "./fetchSettings";
 
 /**
- * Fetches settings
- * @param {Object} store Reference to the store
- * @returns {Promise}
+ * The app's redux store. Assembled here because configureStore is untyped JS whose JSDoc widens
+ * the return value to `Object`.
+ *
+ * dispatch stays permissive rather than using redux-thunk's ThunkDispatch: the action creators
+ * this module dispatches are untyped JS annotated `@returns {Object}` / `{Function}`, which match
+ * neither UnknownAction nor ThunkAction. Tightening it here would only force casts at every call
+ * site - it needs the JSDoc on those action creators to be fixed first.
  */
-const fetchSettings = store => new Promise((resolve, reject) => {
-  if (!settingsUrl) {
-    reject();
-    return;
-  }
-  let timeout;
-  let merchantReceived = null;
-  let shopReceived = null;
 
-  /**
-   * Evaluates if completed.
-   */
-  const evaluateEnd = () => {
-    if (!merchantReceived && merchantSettingsUrl || !shopReceived) {
-      return;
-    }
-    clearTimeout(timeout);
-    timeout = null;
-    resolve();
-  };
-
-  // Add the callbacks for the JSONP
-  window.setShopSettings = settings => {
-    store.dispatch(receiveShopSettings(settings));
-    shopReceived = true;
-    evaluateEnd();
-  };
-  window.setMerchantSettings = settings => {
-    store.dispatch(receiveMerchantSettings(settings));
-    merchantReceived = true;
-    evaluateEnd();
-  };
-
-  // Error handling
-  injectScript('shop-settings-jsonp', settingsUrl, error => {
-    withScope(scope => {
-      scope.setLevel(SentrySeverity.Error);
-      scope.setExtra('settingsUrl', settingsUrl);
-      captureMessage('Fetching shop settings failed');
-    });
-    clearTimeout(timeout);
-    timeout = null;
-    store.dispatch(errorShopSettings(error));
-    reject();
-  });
-  if (merchantSettingsUrl) {
-    injectScript('merchant-settings-jsonp', merchantSettingsUrl, () => {
-      withScope(scope => {
-        scope.setLevel(SentrySeverity.Error);
-        scope.setExtra('settingsUrl', merchantSettingsUrl);
-        captureMessage('Fetching merchant settings failed');
-      });
-      clearTimeout(timeout);
-      timeout = null;
-      reject();
-    });
-  }
-  timeout = setTimeout(() => {
-    withScope(scope => {
-      scope.setLevel(SentrySeverity.Warning);
-      scope.setExtra('settingsUrl', settingsUrl);
-      scope.setExtra('timeout', REQUEST_TIMEOUT);
-      captureMessage('Fetching shop settings took too long');
-    });
-  }, REQUEST_TIMEOUT);
-});
+const {
+  locales: {
+    currency: currencyLocale = null
+  } = {}
+} = appConfig;
 
 /**
- *
- * @param {Object} locales An object with locales.
- * @param {Function} reducers The reducers from the theme.
- * @param {Array} subscribers The subscribers to the streams middleware.
+ * Initializes the app: sets up i18n, creates the store, fetches the client information and the
+ * dynamic settings, and runs all registered app initialization handlers.
+ * @param locales An object with locales.
+ * @param reducers The reducers from the theme.
+ * @param subscribers The subscribers to the streams middleware.
+ * @returns The initialized store.
  */
 export const initialize = async (locales, reducers, subscribers) => {
   moment.locale(process.env.LOCALE);
@@ -142,12 +65,30 @@ export const initialize = async (locales, reducers, subscribers) => {
   configuration.set(CONFIGURATION_COLLECTION_KEY_BASE_URL, getAppBaseUrl());
   store.dispatch(appWillInit(`${window.location.pathname}${window.location.search}`));
   try {
-    const promises = [fetchSettings(store), loadCustomStyles()];
+    // The order of the style loaders does not affect the cascade: loadThemeCss and loadFontCss pin
+    // their links to their insertion points in the html template, while loadCustomStyles appends
+    // its link to the end of the head.
+    //
+    // The font css urls come from the app settings, so that loader is chained onto fetchSettings
+    // rather than started alongside it. Chaining keeps the other two running in parallel with the
+    // settings request instead of serializing everything behind it.
+    const promises = [fetchSettings(store).then(() => loadFontCss(getTypographyFontCssUrls(store.getState()))), loadCustomStyles(), loadThemeCss()];
     await Promise.all(promises);
   } catch (e) {
     // Nothing to see here.
   }
 
+  // Resolves at once outside the admin preview. Inside it, this holds app start until the admin
+  // sent its first settings payload, so the preview renders styled instead of painting the theme
+  // defaults first. Runs after fetchSettings, since the reducer merges and the preview has to be
+  // the later write.
+  await awaitInitialFrontendSettings(store);
+
+  // That payload can replace the configured font files, which were loaded above from whatever the
+  // jsonp settings carried, so they are synced again before anything renders. Outside the preview
+  // the urls are unchanged, and loadFontCss leaves the existing tags alone and resolves at once.
+  await loadFontCss(getTypographyFontCssUrls(store.getState()));
+
   // Execute all registered handlers from the AppInitialization collection
   await appInitialization.initialize({
     dispatch: store.dispatch,

package/core/router/conductor.d.ts

@@ -0,0 +1,9 @@
+import { Router } from '@virtuous/conductor';
+
+/**
+ * `@virtuous/conductor` ships types for the `Router` class but not for the singleton instance it
+ * exports at runtime. Declared here so that TypeScript consumers can use it.
+ */
+declare module '@virtuous/conductor' {
+  export const router: Router;
+}

package/core/router/helpers.d.ts

@@ -1,30 +1,43 @@
+export interface NavigationState {
+    target?: string;
+    [key: string]: unknown;
+}
+export interface NavigationParams {
+    pathname: string;
+    state?: NavigationState;
+    silent?: boolean;
+}
+export interface PopParams {
+    steps?: number;
+    state?: NavigationState;
+}
+export declare const NAVIGATION_PUSH = "navigation.push";
+export declare const NAVIGATION_POP = "navigation.pop";
+export declare const NAVIGATION_REPLACE = "navigation.replace";
+export declare const NAVIGATION_RESET = "navigation.reset";
 /**
  * Performs the PUSH navigation action.
- * @param {Object} params The history params.
+ * @param params The history params.
  */
-export function push(params: Object): void;
+export declare function push(params: NavigationParams): void;
 /**
  * Performs the POP navigation action.
+ * @param params The history params. Pass `steps` to pop more than one route.
  */
-export function pop(): void;
+export declare function pop(params?: PopParams): void;
 /**
  * Performs the REPLACE navigation action.
- * @param {Object} params The history params.
+ * @param params The history params.
  */
-export function replace(params: Object): void;
+export declare function replace(params: NavigationParams): void;
 /**
  * Performs the RESET navigation action.
- * @param {Object} params The history params.
  */
-export function reset(): void;
+export declare function reset(): void;
 /**
- * Performs the UPDATE navigation action.
- * @param {Object} state The meta state to add to a existing route.
- * @param {string} [routeId] The ID of the route to update.
+ * Adds meta state to an existing route.
+ * @param state The meta state to merge into the route.
+ * @param routeId The ID of the route to update. Defaults to the current route.
  */
-export function update(state: Object, routeId?: string): void;
-export const NAVIGATION_PUSH: "navigation.push";
-export const NAVIGATION_POP: "navigation.pop";
-export const NAVIGATION_REPLACE: "navigation.replace";
-export const NAVIGATION_RESET: "navigation.reset";
+export declare function update(state: NavigationState, routeId?: string): void;
 //# sourceMappingURL=helpers.d.ts.map

package/core/router/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../core/router/helpers.js"],"names":[],"mappings":"AAQA;;;GAGG;AACH,6BAFW,MAAM,QAIhB;AAED;;GAEG;AACH,4BAEC;AAED;;;GAGG;AACH,gCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,8BAEC;AAED;;;;GAIG;AACH,8BAHW,MAAM,YACN,MAAM,QAIhB;AA3CD,8BAA+B,iBAAiB,CAAC;AACjD,6BAA8B,gBAAgB,CAAC;AAC/C,iCAAkC,oBAAoB,CAAC;AACvD,+BAAgC,kBAAkB,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../core/router/helpers.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,cAAc,mBAAmB,CAAC;AAC/C,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AACvD,eAAO,MAAM,gBAAgB,qBAAqB,CAAC;AAEnD;;;GAGG;AACH,wBAAgB,IAAI,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAEnD;AAED;;;GAGG;AACH,wBAAgB,GAAG,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,IAAI,CAE5C;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAEtD;AAED;;GAEG;AACH,wBAAgB,KAAK,IAAI,IAAI,CAE5B;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CACpB,KAAK,EAAE,eAAe,EACtB,OAAO,GAAE,MAAoC,GAC5C,IAAI,CAEN"}

package/core/router/helpers.js

@@ -7,7 +7,7 @@ export const NAVIGATION_RESET = 'navigation.reset';
 
 /**
  * Performs the PUSH navigation action.
- * @param {Object} params The history params.
+ * @param params The history params.
  */
 export function push(params) {
   UIEvents.emit(NAVIGATION_PUSH, params);
@@ -15,14 +15,15 @@ export function push(params) {
 
 /**
  * Performs the POP navigation action.
+ * @param params The history params. Pass `steps` to pop more than one route.
  */
-export function pop() {
-  UIEvents.emit(NAVIGATION_POP);
+export function pop(params) {
+  UIEvents.emit(NAVIGATION_POP, params);
 }
 
 /**
  * Performs the REPLACE navigation action.
- * @param {Object} params The history params.
+ * @param params The history params.
  */
 export function replace(params) {
   UIEvents.emit(NAVIGATION_REPLACE, params);
@@ -30,16 +31,15 @@ export function replace(params) {
 
 /**
  * Performs the RESET navigation action.
- * @param {Object} params The history params.
  */
 export function reset() {
   UIEvents.emit(NAVIGATION_RESET);
 }
 
 /**
- * Performs the UPDATE navigation action.
- * @param {Object} state The meta state to add to a existing route.
- * @param {string} [routeId] The ID of the route to update.
+ * Adds meta state to an existing route.
+ * @param state The meta state to merge into the route.
+ * @param routeId The ID of the route to update. Defaults to the current route.
  */
 export function update(state, routeId = router.getCurrentRoute().id) {
   router.update(routeId, state);

package/development/components/DevelopmentSettings/DevelopmentSettings.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
-import { SheetDrawer, RippleButton } from '@shopgate/engage/components';
+import { SheetDrawer } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getEnabledCMSVersion } from '@shopgate/engage/settings/selectors/merchantSettings';
 import { getEnableCms2ForAllShoppers } from '@shopgate/engage/settings/selectors/shopSettings';
@@ -49,9 +50,8 @@ const DevelopmentSettings = ({
     onClose: onClose,
     children: /*#__PURE__*/_jsx("div", {
       className: classes.container,
-      children: /*#__PURE__*/_jsx(RippleButton, {
+      children: /*#__PURE__*/_jsx(Button, {
         className: classes.button,
-        type: "simple",
         onClick: () => {
           onClose();
           setTimeout(() => {

package/development/components/SimulatedInsets/SimulatedInsetBottom.js

@@ -2,14 +2,14 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     position: 'fixed',
     bottom: 0,
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    height: 'var(--safe-area-inset-bottom)',
+    height: theme.layout.safeArea.bottom,
     width: '100%',
     zIndex: 10000000,
     pointerEvents: 'auto',
@@ -26,7 +26,7 @@ const useStyles = makeStyles()({
     border: '1px solid rgba(255, 255, 255, 0.5)',
     boxSizing: 'content-box'
   }
-});
+}));
 
 /**
  * Renders a simulated iOS bottom inset in development.

package/development/components/SimulatedInsets/SimulatedInsetTop.js

@@ -11,7 +11,7 @@ const useStyles = makeStyles()(theme => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    height: 'var(--safe-area-inset-top)',
+    height: theme.layout.safeArea.top,
     width: '100%',
     zIndex: 10000000,
     pointerEvents: 'auto',
@@ -38,7 +38,7 @@ const useStyles = makeStyles()(theme => ({
   notch: {
     flex: 1,
     background: 'black',
-    height: 'calc(var(--safe-area-inset-top) - 16px)',
+    height: `calc(${theme.layout.safeArea.top} - 16px)`,
     maxWidth: 150,
     borderRadius: 16,
     border: '1px solid rgba(255, 255, 255, 0.5)'

package/favorites/components/FavoriteButtonWide/FavoriteButtonWide.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { toggleFavoriteWithListChooser } from '@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';
@@ -29,20 +29,10 @@ const makeMapStateToProps = () => {
 const mapDispatchToProps = dispatch => ({
   toggle: productId => dispatch(toggleFavoriteWithListChooser(productId))
 });
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()(() => ({
   root: {
-    '&&': {
-      margin: '0 0px 16px 16px',
-      backgroundColor: theme.palette.background.surface,
-      border: `1px solid ${theme.palette.primary.main}`,
-      borderRadius: 5,
-      fontSize: theme.typography.body2.fontSize,
-      textTransform: 'none',
-      padding: 0
-    }
-  },
-  ripple: {
-    padding: '8px 16px'
+    margin: '0 0 16px 16px',
+    textTransform: 'none'
   }
 }));
 
@@ -70,10 +60,10 @@ const FavoriteButtonWide = ({
   if (!appConfig.hasFavorites) {
     return null;
   }
-  return /*#__PURE__*/_jsx(RippleButton, {
+  return /*#__PURE__*/_jsx(Button, {
+    variant: "outlined",
+    color: "primary",
     className: classes.root,
-    rippleClassName: classes.ripple,
-    type: "primary",
     onClick: () => toggle(productId),
     children: i18n.text(label)
   });

package/favorites/components/Item/Item.d.ts

@@ -40,11 +40,11 @@ declare const _default: import("react-redux").ConnectedComponent<{
         quantity: number;
     };
 }, {
+    product: NonNullable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
     historyPush: (...args: any[]) => any;
     quantity?: number | null | undefined;
     notes?: string | null | undefined;
     listId: string;
-    product: NonNullable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
     remove: (...args: any[]) => any;
     addToCart: (...args: any[]) => any;
     isBaseProduct?: boolean | null | undefined;

package/favorites/components/Item/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Item/Item.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;QA2KY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAnKD,YAAY"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Item/Item.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;QA0KY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAlKD,YAAY"}

package/favorites/components/Item/Item.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { MODAL_VARIANT_SELECT } from '@shopgate/pwa-ui-shared/Dialog/constants';
 import { ProductImage, ITEM_PATH, PriceInfo, isBaseProduct as isBaseProductSelector, isProductOrderable, hasProductVariants, ProductListEntryProvider } from '@shopgate/engage/product';
-import { bin2hex, showModal as showModalAction, historyPush as historyPushAction, getThemeSettings, i18n } from '@shopgate/engage/core';
+import { bin2hex, showModal as showModalAction, historyPush as historyPushAction, i18n } from '@shopgate/engage/core';
 import { hasNewServices } from '@shopgate/engage/core/helpers';
 import { Link, TextLink, SurroundPortals, Typography } from '@shopgate/engage/components';
 import { makeIsRopeProductOrderable, getPreferredLocation, StockInfoLists } from '@shopgate/engage/locations';
@@ -153,9 +153,6 @@ const FavoriteItem = ({
     classes,
     cx
   } = useStyles();
-  const {
-    ListImage: gridResolutions
-  } = getThemeSettings('AppImages') || {};
   const [isDisabled, setIsDisabled] = useState(!isOrderable && !hasVariants);
   const currency = product.price?.currency || 'EUR';
   const defaultPrice = product.price?.unitPrice || 0;
@@ -193,8 +190,11 @@ const FavoriteItem = ({
       });
       return false;
     }
-    if (hasNewServices() && !isRopeProductOrderable) {
-      // Product is not orderable for ROPE. So users need to do some corrections. Just redirect.
+    if (hasNewServices() && isRopeProductOrderable === false) {
+      // Product is explicitly not orderable for ROPE (a fulfillment method other than direct ship
+      // that isn't available for the current product/location). Users need to correct the
+      // selection on the PDP, so redirect. `null` means ROPE doesn't apply (direct ship) and must
+      // fall through to the regular add-to-cart below.
       historyPush({
         pathname: productLink
       });
@@ -264,7 +264,7 @@ const FavoriteItem = ({
           children: /*#__PURE__*/_jsx(ProductImage, {
             className: cx('engage__favorites__item__image'),
             src: product.featuredImageBaseUrl,
-            resolutions: gridResolutions
+            context: "list"
           })
         }), /*#__PURE__*/_jsxs("div", {
           className: cx(classes.infoContainer, 'engage__favorites__item__info-container'),

package/favorites/components/List/List.d.ts

@@ -26,8 +26,8 @@ declare const _default: import("react-redux").ConnectedComponent<{
         useGetFavoriteIdsPipeline: boolean;
     };
 }, {
-    id: string;
     name: string;
+    id: string;
     remove: (...args: any[]) => any;
     addToCart: (...args: any[]) => any;
     removeItem: (...args: any[]) => any;

package/favorites/components/List/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../favorites/components/List/List.jsx"],"names":[],"mappings":";;;;;;;;;;;QAwEY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBArED,YAAY"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../favorites/components/List/List.jsx"],"names":[],"mappings":";;;;;;;;;;;QAuEY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBApED,YAAY"}

package/favorites/components/List/List.js

@@ -15,7 +15,6 @@ const useStyles = makeStyles()(theme => ({
     margin: '8px 8px 10px'
   },
   rootNoFavoritesLists: {
-    background: theme.palette.background.surface,
     flexGrow: 1,
     paddingBottom: theme.spacing(1),
     paddingLeft: '16px',

package/favorites/components/List/ListContent.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { ProductListTypeProvider, ProductProvider } from '@shopgate/engage/product/providers';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { getUseGetFavoriteIdsPipeline } from '@shopgate/engage/favorites';
 import ListItemWrapper from "./ListItemWrapper";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -19,8 +19,7 @@ const useStyles = makeStyles()({
   },
   loadMoreButton: {
     width: 'calc(100% - 32px)',
-    margin: '16px 16px 0 16px',
-    borderRadius: 5
+    margin: '16px 16px 0 16px'
   }
 });
 
@@ -86,8 +85,8 @@ const ListContent = ({
         removeItem: removeItem,
         index: index
       }, product.id))]
-    }), showLoadMoreButton && /*#__PURE__*/_jsx(RippleButton, {
-      type: "primary",
+    }), showLoadMoreButton && /*#__PURE__*/_jsx(Button, {
+      color: "secondary",
       className: classes.loadMoreButton,
       onClick: onLoadMore,
       children: i18n.text('favorites.load_more_button')

package/favorites/components/Lists/Lists.js

@@ -1,7 +1,8 @@
 import React, { useState, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { RippleButton, SurroundPortals } from '@shopgate/engage/components';
+import { SurroundPortals } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { hasNewServices, i18n } from '@shopgate/engage/core/helpers';
 import { getFavoritesLists, isInitialLoading, getHasMultipleFavoritesListsSupport } from '@shopgate/pwa-common-commerce/favorites/selectors';
 import addFavoritesList from '@shopgate/pwa-common-commerce/favorites/actions/addFavoritesList';
@@ -9,7 +10,7 @@ import updateFavoritesList from '@shopgate/pwa-common-commerce/favorites/actions
 import removeFavoritesList from '@shopgate/pwa-common-commerce/favorites/actions/removeFavoritesList';
 import { removeFavorites } from '@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';
 import addProductsToCart from '@shopgate/pwa-common-commerce/cart/actions/addProductsToCart';
-import { FulfillmentSheet, MULTI_LINE_RESERVE, STAGE_SELECT_STORE } from '@shopgate/engage/locations';
+import { FulfillmentSheet, MULTI_LINE_RESERVE, STAGE_SELECT_STORE, DIRECT_SHIP } from '@shopgate/engage/locations';
 import { openSheet } from '@shopgate/engage/locations/providers/FulfillmentProvider';
 import { getWishlistMode } from '@shopgate/engage/settings/selectors/shopSettings';
 import { WISHLIST_MODE_PERSIST_ON_ADD } from '@shopgate/engage/settings/constants/shopSettings';
@@ -64,7 +65,6 @@ const useStyles = makeStyles()({
   addButton: {
     width: 'calc(100% - 32px)',
     margin: 16,
-    borderRadius: 5,
     [responsiveMediaQuery('>=md', {
       webOnly: true
     })]: {
@@ -174,6 +174,18 @@ const FavoriteLists = ({
       [activeFulfillmentMethod] = availableFulfillmentMethods;
     }
 
+    // Direct ship needs neither a location nor an explicit method selection. When it's the only
+    // available fulfillment method for the product, add straight to the cart without prompting
+    // the user with the fulfillment method chooser.
+    if (!activeFulfillmentMethod && availableFulfillmentMethods.length === 1 && availableFulfillmentMethods[0] === DIRECT_SHIP) {
+      addToCart([{
+        productId: product.id,
+        quantity
+      }]);
+      promiseRef.current.resolve();
+      return promise;
+    }
+
     // If all options are already configured immediately add it to the cart.
     if (activeFulfillmentMethod && activeLocation) {
       addToCart([{
@@ -271,11 +283,10 @@ const FavoriteLists = ({
       onClose: handleMethodClose
     }), /*#__PURE__*/_jsx(SurroundPortals, {
       portalName: FAVORITES_LIST_ADD_BUTTON,
-      children: hasMultipleFavoritesListsSupport ? /*#__PURE__*/_jsx(RippleButton, {
-        type: "primary",
+      children: hasMultipleFavoritesListsSupport ? /*#__PURE__*/_jsx(Button, {
+        color: "secondary",
         className: classes.addButton,
         onClick: openAddModal,
-        disabled: false,
         children: i18n.text('favorites.add_list')
       }) : null
     })]

package/filter/components/FilterPageContent/components/ApplyButton/index.js

@@ -1,18 +1,17 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { I18n, Button, 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 { PORTAL_FILTER_APPLY_BUTTON } from '@shopgate/engage/filter/constants';
 import { withWidgetSettings } from '@shopgate/engage/core';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   wrapper: {
-    display: 'flex'
-  },
-  button: {
-    padding: '0 !important'
+    display: 'flex',
+    marginRight: theme.spacing(2)
   }
-});
+}));
 
 /**
  * The filter apply button component.
@@ -44,9 +43,8 @@ const FilterApplyButton = ({
     children: /*#__PURE__*/_jsx("div", {
       className: classes.wrapper,
       children: /*#__PURE__*/_jsx(Button, {
-        className: classes.button,
-        flat: true,
-        type: "primary",
+        variant: "link",
+        color: "secondary",
         onClick: onClick,
         disabled: disabled,
         testId: "applyFilterButton",