@shopgate/engage 7.32.0-beta.6 → 7.32.0-beta.8

package/styles/theme/createTheme/createTypography.js

@@ -1,19 +1,41 @@
 import _merge from "lodash/merge";
-import { isDev } from '@shopgate/engage/core/helpers';
+// Imported from the defining modules rather than a barrel: this module runs at import time in
+// every spec that touches the theme, and specs that replace a barrel with a partial mock would
+// leave these undefined.
+import { isDev } from '@shopgate/pwa-common/helpers/environment';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  fontWeight: buttonFontWeight = 600,
+  textTransform: buttonTextTransform
+} = themeConfig?.variables?.buttonBase ?? {};
 const caseAllCaps = {
   textTransform: 'uppercase'
 };
+const caseButton = {
+  textTransform: buttonTextTransform === 'uppercase' ? 'uppercase' : 'none'
+};
 const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
 
+/**
+ * Builds the prefix of the custom properties that cssVarsParser derives from the `typography` keys.
+ * Mirrors how the parser composes a name, so a theme configured with a different `cssVarPrefix`
+ * references the properties it actually emits.
+ * @param {string} cssVarPrefix The theme's css variable prefix.
+ * @returns {string} The prefix, e.g. `--sg-typography`.
+ */
+const typographyVarPrefix = cssVarPrefix => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}typography`;
+
 /**
  * Creates the typography object for the theme.
  * @param {Object} palette The theme palette.
  * @param {Object|Function} typography The typography options or a function that returns them.
+ * @param {string} [cssVarPrefix] The theme's css variable prefix, matching the one cssVarsParser
+ * generates the properties with. Defaults to the `sg` default of createTheme.
  * @returns {Object} The typography object.
  * @see @link{https://material.io/design/typography/the-type-system.html}
  * @see @link{https://material.io/design/typography/understanding-typography.html}
  */
-export default function createTypography(palette, typography) {
+export default function createTypography(palette, typography, cssVarPrefix = 'sg') {
   const {
     fontFamily = defaultFontFamily,
     // The default font size of the Material Specification.
@@ -37,6 +59,23 @@ export default function createTypography(palette, typography) {
     }
   }
   const coef = fontSize / 14;
+  const fontWeights = {
+    fontWeightLight,
+    fontWeightRegular,
+    fontWeightMedium,
+    fontWeightBold
+  };
+
+  /**
+   * Builds a reference to one of the shared font weight custom properties. The property itself is
+   * emitted by cssVarsParser from `typography.fontWeight*`, so overriding it on `:root` (admin css,
+   * live preview, an extension) cascades into every variant that uses that token. The resolved
+   * weight stays as the fallback, so the variant still renders when the property is absent.
+   * @param {string} token One of `fontWeightLight`, `fontWeightRegular`, `fontWeightMedium`,
+   * `fontWeightBold`.
+   * @returns {string} The css var reference.
+   */
+  const fontWeightVar = token => `var(${typographyVarPrefix(cssVarPrefix)}-${token}, ${fontWeights[token]})`;
 
   /**
    * Calculates a rem value for a passed pixel value.
@@ -47,34 +86,35 @@ export default function createTypography(palette, typography) {
 
   /**
    * Creates a typography variant object.
-   * @param {number} fontWeight The font weight to use for the variant.
+   * @param {string} fontWeightToken The name of the shared font weight token to use, e.g.
+   * `fontWeightBold`. The variant references it as a custom property instead of inlining its value.
    * @param {number} size Font size in pixels.
    * @param {number} lineHeight Line height as a unitless number.
    * @param {Object} casing Casing styles to apply, e.g. textTransform.
    * @returns {Object} The typography variant object.
    */
-  const buildVariant = (fontWeight, size, lineHeight, casing) => ({
+  const buildVariant = (fontWeightToken, size, lineHeight, casing) => ({
     fontFamily,
-    fontWeight,
+    fontWeight: fontWeightVar(fontWeightToken),
     fontSize: pxToRem(size),
     lineHeight,
     ...casing,
     ...allVariants
   });
   const variants = {
-    h1: buildVariant(fontWeightBold, 34, 1.15),
-    h2: buildVariant(fontWeightBold, 22, 1.3),
-    h3: buildVariant(fontWeightMedium, 20, 1.35),
-    h4: buildVariant(fontWeightMedium, 18, 1.4),
-    h5: buildVariant(fontWeightMedium, 16, 1.5),
-    h6: buildVariant(fontWeightMedium, 14, 1.5),
-    subtitle1: buildVariant(fontWeightRegular, 16, 1.75),
-    subtitle2: buildVariant(fontWeightMedium, 14, 1.57),
-    body1: buildVariant(fontWeightRegular, 16, 1.5),
-    body2: buildVariant(fontWeightRegular, 14, 1.43),
-    button: buildVariant(fontWeightMedium, 14, 1.75, caseAllCaps),
-    caption: buildVariant(fontWeightRegular, 12, 1.66),
-    overline: buildVariant(fontWeightRegular, 12, 2.66, caseAllCaps)
+    h1: buildVariant('fontWeightBold', 34, 1.15),
+    h2: buildVariant('fontWeightBold', 22, 1.3),
+    h3: buildVariant('fontWeightMedium', 20, 1.35),
+    h4: buildVariant('fontWeightMedium', 18, 1.4),
+    h5: buildVariant('fontWeightMedium', 16, 1.5),
+    h6: buildVariant('fontWeightMedium', 14, 1.5),
+    subtitle1: buildVariant('fontWeightRegular', 16, 1.75),
+    subtitle2: buildVariant('fontWeightMedium', 14, 1.57),
+    body1: buildVariant('fontWeightRegular', 16, 1.5),
+    body2: buildVariant('fontWeightRegular', 14, 1.43),
+    button: buildVariant(buttonFontWeight > fontWeightMedium ? 'fontWeightBold' : 'fontWeightMedium', 16, 1.75, caseButton),
+    caption: buildVariant('fontWeightRegular', 12, 1.66),
+    overline: buildVariant('fontWeightRegular', 12, 2.66, caseAllCaps)
   };
   return _merge({
     pxToRem,

package/styles/theme/createTheme/index.js

@@ -38,7 +38,7 @@ export const createTheme = (options = {}) => {
       palette: {
         mode: type
       }
-    }, defaultScheme, scheme));
+    }, defaultScheme, scheme), cssVarPrefix);
     return acc;
   }, {});
   const getColorSchemeSelector = createGetColorSchemeSelector(colorSchemeSelector);

package/styles/theme/createTheme/shadows.d.ts

@@ -1,4 +1,14 @@
-declare const shadows: readonly ["none", string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string];
+/**
+ * The elevations the admin offers. Offset, blur and spread are not configurable — a shop picks
+ * one of these presets so the surfaces stay visually consistent, and only the color is free.
+ */
+export type ShadowSize = 'none' | 'low' | 'medium' | 'strong';
+export declare const SHADOW_COLOR_VAR = "--sg-palette-shadow";
+declare const shadows: readonly ["none", ...string[]];
 export type Shadows = typeof shadows;
+/**
+ * The finished shadow for each size the admin offers, for a single `theme.shadowSizes[size]` lookup.
+ */
+export declare const shadowSizes: Record<ShadowSize, string>;
 export default shadows;
 //# sourceMappingURL=shadows.d.ts.map

package/styles/theme/createTheme/shadows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/shadows.ts"],"names":[],"mappings":"AAaA,QAAA,MAAM,OAAO,mNA0BH,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAA;AAEpC,eAAe,OAAO,CAAC"}
+{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/shadows.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AA+D9D,eAAO,MAAM,gBAAgB,wBAAwB,CAAC;AAEtD,QAAA,MAAM,OAAO,gCAMH,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAA;AAEpC;;GAEG;AACH,eAAO,MAAM,WAAW,EAEnB,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AAEhC,eAAe,OAAO,CAAC"}

package/styles/theme/createTheme/shadows.js

@@ -1,10 +1,44 @@
-const shadowKeyUmbraOpacity = 0.2;
-const shadowKeyPenumbraOpacity = 0.14;
-const shadowAmbientShadowOpacity = 0.12;
-function createShadow(...px) {
-  return [`${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`, `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0,0,0,${shadowKeyPenumbraOpacity})`, `${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0,0,0,${shadowAmbientShadowOpacity})`].join(',');
-}
+// Share of the shadow color each of the three layers is drawn with, in percent.
+const shadowKeyUmbraPercent = 20;
+const shadowKeyPenumbraPercent = 14;
+const shadowAmbientShadowPercent = 12;
+
+/**
+ * The elevations the admin offers. Offset, blur and spread are not configurable — a shop picks
+ * one of these presets so the surfaces stay visually consistent, and only the color is free.
+ */
+
+/**
+ * Elevation from the scale below used for each shadow size the admin offers. Keeping the mapping
+ * next to the scale means a size never introduces geometry of its own.
+ */
+const SHADOW_SIZE_ELEVATIONS = {
+  none: 0,
+  low: 2,
+  medium: 4,
+  strong: 8
+};
 
+// Offset-x, offset-y, blur and spread of the three layers that make up one elevation, starting at
+// elevation 1 (elevation 0 draws no shadow at all).
 // Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
-const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
+const elevationGeometries = [[0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0], [0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0], [0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0], [0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0], [0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0], [0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0], [0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1], [0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2], [0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2], [0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3], [0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3], [0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4], [0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4], [0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4], [0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5], [0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5], [0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5], [0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6], [0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6], [0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7], [0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7], [0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7], [0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8], [0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8]];
+
+/**
+ * Builds one elevation from its geometry.
+ * @param px The twelve lengths of the elevation's three layers.
+ * @param renderColor Renders the color of a layer from the share of the shadow color it is drawn
+ * with, in percent.
+ * @returns A box-shadow value.
+ */
+function createShadow(px, renderColor) {
+  const layer = (offset, percent) => `${px[offset]}px ${px[offset + 1]}px ${px[offset + 2]}px ${px[offset + 3]}px ` + `${renderColor(percent)}`;
+  return [layer(0, shadowKeyUmbraPercent), layer(4, shadowKeyPenumbraPercent), layer(8, shadowAmbientShadowPercent)].join(',');
+}
+export const SHADOW_COLOR_VAR = '--sg-palette-shadow';
+const shadows = ['none'].concat(elevationGeometries.map(geometry => createShadow(geometry, percent => `rgb(from var(${SHADOW_COLOR_VAR}) r g b / ${percent / 100})`)));
+/**
+ * The finished shadow for each size the admin offers, for a single `theme.shadowSizes[size]` lookup.
+ */
+export const shadowSizes = Object.fromEntries(Object.entries(SHADOW_SIZE_ELEVATIONS).map(([size, elevation]) => [size, shadows[elevation]]));
 export default shadows;

package/styles/theme/createTheme/types.d.ts

@@ -10,7 +10,7 @@ import type { ApplyStyles } from './applyStyles';
 import type { GetColorSchemeSelector, ActiveColorSchemeSwitcher } from './helpers';
 import type { CreateCssVarsForColorSchemeThemesReturnValue } from './createCssVarsForColorSchemeThemes';
 import type { Shape, ShapeOptions } from './createShape';
-import type { Shadows } from './shadows';
+import type { Shadows, ShadowSize } from './shadows';
 export type { Breakpoint } from './createBreakpoints';
 export type { PaletteColorsWithMain } from './createPalette';
 export declare const COLOR_SCHEME_NAMES: readonly ["light", "dark"];
@@ -94,6 +94,10 @@ export interface BaseTheme {
      * Pre-defined shadow styles for different elevation levels, following Material Design guidelines.
      */
     shadows: Shadows;
+    /**
+     * The finished box-shadow size (`none` | `low` | `medium` | `strong`)
+     */
+    shadowSizes: Record<ShadowSize, string>;
     /**
      * Adds an alpha value to a color, returning a new color string with the applied alpha.
      * @param color The color to modify.

package/styles/theme/createTheme/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/types.ts"],"names":[],"mappings":"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"}

package/styles/theme/index.d.ts

@@ -1,5 +1,7 @@
 export { default as ThemeProvider } from './providers/ThemeProvider';
 export { createTheme } from './createTheme';
+export { type ShadowSize } from './createTheme/shadows';
+export type { Variant as TypographyVariant } from './createTheme/createTypography';
 export type { Theme, Breakpoint, PaletteColorsWithMain, ColorSchemeName, } from './createTheme';
 export { useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, } from './hooks';
 export { withTheme, type WithThemeProps } from './hocs';

package/styles/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../styles/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,KAAK,EAAE,UAAU,EAAE,qBAAqB,EAAE,eAAe,GAC1D,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,GACf,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../styles/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnF,YAAY,EACV,KAAK,EAAE,UAAU,EAAE,qBAAqB,EAAE,eAAe,GAC1D,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,GACf,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC"}

package/tracking/components/CookieConsentModal/index.js

@@ -2,7 +2,8 @@ import React, { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Grid, I18n, Button, Modal, Link, ConditionalWrapper, Typography } from '@shopgate/engage/components';
+import { Grid, I18n, Modal, Link, ConditionalWrapper, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { appConfig } from '@shopgate/engage';
 import connect from "./connector";
 import cookieImage from "./tracking-opt-in.svg";
@@ -164,21 +165,19 @@ const CookieConsentModal = ({
           className: classes.buttonWrapper,
           children: [/*#__PURE__*/_jsx(Button, {
             onClick: handleAcceptAllCookies,
-            type: "primary",
+            color: "secondary",
             className: cx(classes.button, 'cookie-consent-modal__button-accept-all'),
             children: /*#__PURE__*/_jsx(I18n.Text, {
               string: modalButtonAcceptAll || 'cookieConsentModal.buttonAcceptAll'
             })
           }), showRequiredCookiesButton ? /*#__PURE__*/_jsx(Button, {
             onClick: handleAcceptRequiredCookies,
-            type: "simple",
             className: cx(classes.button, 'cookie-consent-modal__button-accept-required'),
             children: /*#__PURE__*/_jsx(I18n.Text, {
               string: modalButtonOnlyRequired || 'cookieConsentModal.modalButtonOnlyRequired'
             })
           }) : null, /*#__PURE__*/_jsx(Button, {
             onClick: handleOpenPrivacySettings,
-            type: "simple",
             className: cx(classes.button, 'cookie-consent-modal__button-open-settings'),
             children: /*#__PURE__*/_jsx(I18n.Text, {
               string: modalButtonConfigureSettings || 'cookieConsentModal.buttonConfigure'

package/tracking/components/PrivacySettings/index.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import { Button, Grid, I18n, Link, Switch, ConditionalWrapper } from '@shopgate/engage/components';
+import { Grid, I18n, Link, Switch, ConditionalWrapper } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { appConfig } from '@shopgate/engage';
@@ -148,7 +149,7 @@ const PrivacySettings = ({
       className: classes.buttonWrapper,
       children: [/*#__PURE__*/_jsx(Button, {
         onClick: () => handleAcceptAllCookies(),
-        type: "primary",
+        color: "secondary",
         className: cx(classes.button, 'privacy-settings__button-accept-all'),
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "cookieConsentModal.buttonAcceptAll"
@@ -158,7 +159,6 @@ const PrivacySettings = ({
           comfortCookiesAccepted: areComfortCookiesSelected,
           statisticsCookiesAccepted: areStatisticsCookiesSelected
         }),
-        type: "simple",
         className: cx(classes.button, 'privacy-settings__button-accept-selected'),
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "cookieConsentModal.modalButtonConfirmSelected"

package/cart/components/PaymentBar/PaymentBarReserveButton.connector.js

@@ -1,6 +0,0 @@
-import { connect } from 'react-redux';
-import { historyReset } from '@shopgate/pwa-common/actions/router';
-const mapDispatchToProps = {
-  historyReset
-};
-export default connect(null, mapDispatchToProps);

package/cart/components/PaymentBar/PaymentBarReserveButton.js

@@ -1,71 +0,0 @@
-import "core-js/modules/es.regexp.flags.js";
-import React from 'react';
-import PropTypes from 'prop-types';
-import { I18n, SurroundPortals, RippleButton } from '@shopgate/engage/components';
-import { makeStyles } from '@shopgate/engage/styles';
-import { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
-import { FulfillmentSheet, STAGE_RESERVE_FORM } from "../../../locations";
-import { CartContext } from "../../cart.context";
-import connect from "./PaymentBarReserveButton.connector";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  button: {
-    width: '100%',
-    background: theme.components.ctaButton.background,
-    color: `${theme.contrastColor(theme.components.ctaButton.background)}!important`
-  },
-  disabledButton: {
-    width: '100%',
-    background: theme.palette.action.disabledBackground,
-    color: `${theme.contrastColor(theme.palette.action.disabledBackground)}!important`
-  }
-}));
-
-/**
- * The reserve button component.
- * @param {Object} props The component props.
- * @param {Function} props.historyReset The history reset function.
- * @return {JSX.Element} The rendered component.
- */
-const PaymentBarReserveButton = ({
-  historyReset
-}) => {
-  const {
-    classes
-  } = useStyles();
-  const {
-    flags: {
-      orderable
-    }
-  } = React.useContext(CartContext);
-
-  /**
-   * Handles the click on the button.
-   */
-  const handleClick = React.useCallback(() => {
-    FulfillmentSheet.open({
-      stage: STAGE_RESERVE_FORM,
-      callback: (_location, _product, orderSuccess) => {
-        if (orderSuccess === true) {
-          historyReset();
-        }
-      }
-    });
-  }, [historyReset]);
-  return /*#__PURE__*/_jsx(SurroundPortals, {
-    portalName: CART_CHECKOUT_BUTTON,
-    portalProps: {
-      isActive: orderable
-    },
-    children: /*#__PURE__*/_jsx(RippleButton, {
-      onClick: handleClick,
-      disabled: !orderable,
-      type: "regular",
-      className: orderable ? classes.button : classes.disabledButton,
-      children: /*#__PURE__*/_jsx(I18n.Text, {
-        string: "cart.reserve"
-      })
-    })
-  });
-};
-export default connect(PaymentBarReserveButton);

package/locations/components/StoreFinder/StoreFinderGetDirectionsButton.connector.js

@@ -1,16 +0,0 @@
-import { connect } from 'react-redux';
-import { historyPush } from '@shopgate/pwa-common/actions/router/historyPush';
-
-/**
- * @param {Function} dispatch The redux dispatch function.
- * @return {Object} The extended component props.
- */
-const mapDispatchToProps = dispatch => ({
-  openMap: url => dispatch(historyPush({
-    pathname: url,
-    state: {
-      target: '_blank'
-    }
-  }))
-});
-export default connect(null, mapDispatchToProps);

package/locations/components/StoreFinder/StoreFinderGetDirectionsButton.js

@@ -1,52 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { i18n, generateGoogleMapsDirectionsUrl } from '@shopgate/engage/core';
-import { makeStyles } from '@shopgate/engage/styles';
-import { RippleButton } from '@shopgate/engage/components';
-import connect from "./StoreFinderGetDirectionsButton.connector";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  container: {},
-  button: {
-    width: '100%',
-    background: `${theme.palette.primary.main} !important`,
-    color: `${theme.palette.primary.contrastText} !important`,
-    fontSize: `${theme.typography.body2.fontSize} !important`
-  }
-}));
-
-/**
- * @param {Object} props The component props
- * @returns {JSX}
- */
-const StoreFinderGetDirectionsButton = ({
-  address,
-  openMap,
-  className
-}) => {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  const url = useMemo(() => address && generateGoogleMapsDirectionsUrl(address), [address]);
-  const handleClick = useCallback(() => {
-    openMap(url);
-  }, [openMap, url]);
-  if (!address) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx("div", {
-    className: cx(classes.container, className),
-    children: /*#__PURE__*/_jsx(RippleButton, {
-      onClick: handleClick,
-      className: classes.button,
-      children: i18n.text('locations.get_directions')
-    })
-  });
-};
-StoreFinderGetDirectionsButton.defaultProps = {
-  address: null,
-  openMap: () => {},
-  className: null
-};
-export default connect(StoreFinderGetDirectionsButton);