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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (149) hide show
  1. package/account/components/Profile/ProfileAddressBook.d.ts.map +1 -1
  2. package/account/components/Profile/ProfileAddressBook.js +13 -22
  3. package/account/components/Profile/ProfileAddressCard.d.ts.map +1 -1
  4. package/account/components/Profile/ProfileAddressCard.js +8 -18
  5. package/account/components/Profile/ProfileForm.d.ts.map +1 -1
  6. package/account/components/Profile/ProfileForm.js +15 -42
  7. package/account/components/ProfileContact/ProfileContact.js +13 -21
  8. package/admin-preview/components/FrontendSettingsPreviewBridge/FrontendSettingsPreviewBridge.d.ts.map +1 -1
  9. package/admin-preview/components/FrontendSettingsPreviewBridge/FrontendSettingsPreviewBridge.js +40 -6
  10. package/admin-preview/components/FrontendSettingsPreviewBridge/types.d.ts +7 -0
  11. package/admin-preview/components/FrontendSettingsPreviewBridge/types.d.ts.map +1 -1
  12. package/admin-preview/initialization/_internal/initialFrontendSettings.d.ts +32 -0
  13. package/admin-preview/initialization/_internal/initialFrontendSettings.d.ts.map +1 -0
  14. package/admin-preview/initialization/_internal/initialFrontendSettings.js +43 -0
  15. package/admin-preview/initialization/awaitInitialFrontendSettings.d.ts +22 -0
  16. package/admin-preview/initialization/awaitInitialFrontendSettings.d.ts.map +1 -0
  17. package/admin-preview/initialization/awaitInitialFrontendSettings.js +84 -0
  18. package/back-in-stock/components/BackInStockButton/index.js +5 -5
  19. package/cart/components/CartItem/CartItemProductLayout.js +1 -0
  20. package/cart/components/CartItem/CartItemProductLayoutWideRemoveItem.js +7 -14
  21. package/cart/components/CartItems/CartItemCardReservationLabelChangeStore.js +6 -24
  22. package/cart/components/CartSummaryWide/CartSummaryWide.js +2 -2
  23. package/cart/components/CartSummaryWide/CartSummaryWideCheckoutButton.js +9 -23
  24. package/cart/components/PaymentBar/PaymentBarCheckoutButton.js +8 -30
  25. package/cart/components/PaymentBar/testUtils/mockFactories.js +4 -11
  26. package/category/components/CategoryImage/index.js +13 -2
  27. package/checkout/components/AddressBook/AddressList.js +14 -23
  28. package/checkout/components/Checkout/CheckoutActions.js +4 -3
  29. package/checkout/components/Checkout/CheckoutAddress.js +8 -0
  30. package/checkout/components/Checkout/CheckoutSection.js +6 -2
  31. package/checkout/components/CheckoutConfirmation/CheckoutConfirmation.js +6 -7
  32. package/checkout/components/ResponsiveBackButton/ResponsiveBackButton.js +7 -17
  33. package/components/Card/Card.js +1 -1
  34. package/components/ChipLayout/index.js +2 -4
  35. package/components/NavigationHandler/connector.js +1 -1
  36. package/components/NavigationHandler/spec.js +10 -1
  37. package/components/Paper/Paper.d.ts +1 -2
  38. package/components/Paper/Paper.d.ts.map +1 -1
  39. package/components/Tabs/components/Tab.d.ts.map +1 -1
  40. package/components/Tabs/components/Tab.js +14 -16
  41. package/components/Typography/Typography.d.ts +1 -1
  42. package/components/v2/Button/Button.d.ts +24 -13
  43. package/components/v2/Button/Button.d.ts.map +1 -1
  44. package/components/v2/Button/Button.js +89 -37
  45. package/components/v2/ButtonBase/ButtonBase.d.ts +50 -10
  46. package/components/v2/ButtonBase/ButtonBase.d.ts.map +1 -1
  47. package/components/v2/ButtonBase/ButtonBase.js +153 -16
  48. package/components/v2/ButtonBase/hooks.d.ts +0 -1
  49. package/components/v2/ButtonBase/hooks.d.ts.map +1 -1
  50. package/components/v2/ButtonBase/hooks.js +36 -12
  51. package/components/v2/ButtonGroup/ButtonGroup.d.ts +11 -5
  52. package/components/v2/ButtonGroup/ButtonGroup.d.ts.map +1 -1
  53. package/components/v2/ButtonGroup/ButtonGroup.js +30 -18
  54. package/components/v2/CircularProgress/CircularProgress.d.ts.map +1 -1
  55. package/components/v2/CircularProgress/CircularProgress.js +10 -5
  56. package/core/hooks/useNavigation.d.ts +10 -2
  57. package/core/hooks/useNavigation.d.ts.map +1 -1
  58. package/core/hooks/useNavigation.js +1 -2
  59. package/core/initialization/index.d.ts.map +1 -1
  60. package/core/initialization/index.js +24 -5
  61. package/core/router/conductor.d.ts +9 -0
  62. package/core/router/helpers.d.ts +28 -15
  63. package/core/router/helpers.d.ts.map +1 -1
  64. package/core/router/helpers.js +8 -8
  65. package/development/components/DevelopmentSettings/DevelopmentSettings.js +3 -3
  66. package/favorites/components/FavoriteButtonWide/FavoriteButtonWide.js +7 -17
  67. package/favorites/components/List/List.d.ts.map +1 -1
  68. package/favorites/components/List/List.js +0 -1
  69. package/favorites/components/List/ListContent.js +4 -5
  70. package/favorites/components/Lists/Lists.js +4 -5
  71. package/filter/components/FilterPageContent/components/ApplyButton/index.js +8 -10
  72. package/filter/components/FilterPageContent/components/ResetButton/index.js +8 -6
  73. package/locations/components/ChangeLocationButton/ChangeLocationButton.js +10 -14
  74. package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotDialog.js +4 -8
  75. package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcher.js +1 -1
  76. package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcherBar.js +8 -13
  77. package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcherDefault.js +10 -10
  78. package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcherBar.js +8 -14
  79. package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcherDefault.js +9 -10
  80. package/locations/components/ReserveForm/ReserveForm.js +6 -7
  81. package/locations/components/StoreDetails/components/GetDirectionsButton.js +2 -4
  82. package/locations/components/StoreDetails/components/StoreDetails.js +5 -10
  83. package/locations/components/StoreDetails/components/StoresNearbyListItem.js +13 -21
  84. package/locations/components/StoreFinder/StoreFinderSelectLocationButton.js +5 -11
  85. package/locations/components/StoreFinder/StoreFinderStoreInfoButton.js +5 -11
  86. package/locations/components/StoreList/StoreSelectLocationButton.js +5 -11
  87. package/login/components/ForgotPassword/ForgotPassword.js +11 -23
  88. package/orders/components/OrderDetails/OrderDetailsAuthenticate.js +5 -7
  89. package/package.json +7 -7
  90. package/page/components/NotFound.d.ts.map +1 -1
  91. package/page/components/NotFound.js +7 -6
  92. package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.d.ts +1 -1
  93. package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.js +2 -2
  94. package/page/components/WidgetVideo/WidgetVideo.d.ts +1 -1
  95. package/page/components/WidgetVideo/WidgetVideo.d.ts.map +1 -1
  96. package/page/helpers/index.d.ts +5 -2
  97. package/page/helpers/index.d.ts.map +1 -1
  98. package/page/helpers/index.js +8 -5
  99. package/page/widgets/Button/Button.js +2 -3
  100. package/page/widgets/NestedCategoryFilter/NestedCategoryFilter.js +8 -8
  101. package/page/widgets/ProductList/ProductList.js +18 -14
  102. package/page/widgets/Video/hooks.d.ts +2 -2
  103. package/product/components/ProductGrid/components/Item/components/ItemImage/index.js +1 -11
  104. package/product/components/ProductGrid/components/Item/index.js +3 -2
  105. package/product/components/ProductImage/ProductImage.d.ts.map +1 -1
  106. package/product/components/ProductImage/ProductImage.js +7 -2
  107. package/product/components/ProductImage/ProductImagePlaceholder.js +3 -3
  108. package/product/components/UnitQuantityPicker/UnitQuantityPicker.d.ts.map +1 -1
  109. package/product/components/UnitQuantityPicker/UnitQuantityPicker.js +14 -33
  110. package/push-opt-in/components/PushOptInModal/index.js +4 -4
  111. package/registration/components/Registration/RegistrationFormActions.js +4 -4
  112. package/reviews/components/Reviews/components/AllReviewsLink/index.js +6 -6
  113. package/reviews/components/Reviews/components/Header/components/WriteReviewLink/index.js +4 -3
  114. package/reviews/components/Reviews/components/Header/components/WriteReviewLink/spec.js +28 -22
  115. package/reviews/components/Reviews/spec.js +5 -6
  116. package/settings/reducers/appSettings.d.ts.map +1 -1
  117. package/settings/reducers/appSettings.js +9 -1
  118. package/settings/selectors/appSettings.d.ts +16 -0
  119. package/settings/selectors/appSettings.d.ts.map +1 -1
  120. package/settings/selectors/appSettings.js +11 -1
  121. package/settings/types/appSettings.d.ts +23 -2
  122. package/settings/types/appSettings.d.ts.map +1 -1
  123. package/styles/helpers/index.d.ts +1 -0
  124. package/styles/helpers/index.js +1 -0
  125. package/styles/helpers/loadFontCss.d.ts +22 -0
  126. package/styles/helpers/loadFontCss.d.ts.map +1 -0
  127. package/styles/helpers/loadFontCss.js +138 -0
  128. package/styles/helpers/loadThemeCss.d.ts.map +1 -1
  129. package/styles/helpers/loadThemeCss.js +11 -0
  130. package/styles/theme/createTheme/createComponents.types.d.ts +25 -0
  131. package/styles/theme/createTheme/createComponents.types.d.ts.map +1 -1
  132. package/styles/theme/createTheme/createComponents.types.js +25 -0
  133. package/styles/theme/createTheme/createShape.d.ts +2 -3
  134. package/styles/theme/createTheme/createShape.d.ts.map +1 -1
  135. package/styles/theme/createTheme/createShape.js +1 -2
  136. package/styles/theme/createTheme/createThemeFromColorScheme.d.ts +3 -1
  137. package/styles/theme/createTheme/createThemeFromColorScheme.d.ts.map +1 -1
  138. package/styles/theme/createTheme/createThemeFromColorScheme.js +4 -2
  139. package/styles/theme/createTheme/createTypography.d.ts +2 -1
  140. package/styles/theme/createTheme/createTypography.js +58 -18
  141. package/styles/theme/createTheme/index.js +1 -1
  142. package/styles/theme/index.d.ts +1 -0
  143. package/styles/theme/index.d.ts.map +1 -1
  144. package/tracking/components/CookieConsentModal/index.js +3 -4
  145. package/tracking/components/PrivacySettings/index.js +3 -3
  146. package/cart/components/PaymentBar/PaymentBarReserveButton.connector.js +0 -6
  147. package/cart/components/PaymentBar/PaymentBarReserveButton.js +0 -71
  148. package/locations/components/StoreFinder/StoreFinderGetDirectionsButton.connector.js +0 -16
  149. package/locations/components/StoreFinder/StoreFinderGetDirectionsButton.js +0 -52
@@ -1,19 +1,13 @@
1
1
  import React from 'react';
2
- import { RippleButton, I18n } from '@shopgate/engage/components';
2
+ import { I18n } from '@shopgate/engage/components';
3
+ import { Button } from '@shopgate/engage/components/v2';
3
4
  import { makeStyles } from '@shopgate/engage/styles';
4
5
  import { useCartItemProduct } from "./CartItem.hooks";
5
6
  import { jsx as _jsx } from "react/jsx-runtime";
6
7
  const useStyles = makeStyles()(theme => ({
7
8
  button: {
8
- fontSize: `${theme.typography.body2.fontSize} !important`,
9
- letterSpacing: '0.05em',
10
- padding: `${theme.spacing(2, 0)} !important`,
11
- ' *': {
12
- padding: '0 !important'
13
- }
14
- },
15
- ripple: {
16
- padding: 0
9
+ marginTop: theme.spacing(2),
10
+ textTransform: 'none'
17
11
  }
18
12
  }));
19
13
 
@@ -27,12 +21,11 @@ const CartItemProductLayoutWideRemoveItem = () => {
27
21
  const {
28
22
  handleRemove
29
23
  } = useCartItemProduct();
30
- return /*#__PURE__*/_jsx(RippleButton, {
24
+ return /*#__PURE__*/_jsx(Button, {
25
+ variant: "text",
26
+ color: "primary",
31
27
  onClick: handleRemove,
32
28
  className: classes.button,
33
- rippleClassName: classes.ripple,
34
- type: "secondary",
35
- flat: true,
36
29
  children: /*#__PURE__*/_jsx(I18n.Text, {
37
30
  string: "cart.remove_item"
38
31
  })
@@ -1,29 +1,13 @@
1
1
  import React, { useCallback } from 'react';
2
- import { RippleButton, I18n } from '@shopgate/engage/components';
3
- import { makeStyles } from '@shopgate/engage/styles';
2
+ import { I18n } from '@shopgate/engage/components';
3
+ import { Button } from '@shopgate/engage/components/v2';
4
4
  import { useCartItem } from "../CartItem";
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- const useStyles = makeStyles()(theme => ({
7
- button: {
8
- fontSize: `${theme.typography.body2.fontSize} !important`,
9
- letterSpacing: '0.05em',
10
- padding: '0px !important',
11
- ' *': {
12
- padding: '0px !important'
13
- }
14
- },
15
- ripple: {
16
- padding: 0
17
- }
18
- }));
19
5
 
20
6
  /**
21
7
  * @returns {JSX}
22
8
  */
9
+ import { jsx as _jsx } from "react/jsx-runtime";
23
10
  const CartItemCardReservationLabelChangeStore = () => {
24
- const {
25
- classes
26
- } = useStyles();
27
11
  const {
28
12
  invokeFulfillmentAction,
29
13
  cartItem
@@ -39,12 +23,10 @@ const CartItemCardReservationLabelChangeStore = () => {
39
23
  } = cartItem;
40
24
  invokeFulfillmentAction('changeLocation', method);
41
25
  }, [cartItem, invokeFulfillmentAction]);
42
- return /*#__PURE__*/_jsx(RippleButton, {
26
+ return /*#__PURE__*/_jsx(Button, {
27
+ variant: "link",
28
+ color: "primary",
43
29
  onClick: handleChangeLocationClick,
44
- className: classes.button,
45
- rippleClassName: classes.ripple,
46
- type: "secondary",
47
- flat: true,
48
30
  children: /*#__PURE__*/_jsx(I18n.Text, {
49
31
  string: "locations.change_location"
50
32
  })
@@ -25,12 +25,12 @@ const useStyles = makeStyles()(theme => ({
25
25
  padding: theme.spacing(2)
26
26
  },
27
27
  total: {
28
- fontSize: theme.typography.body1.fontSize,
28
+ fontSize: theme.typography.body2.fontSize,
29
29
  padding: theme.spacing(1, 0),
30
30
  color: theme.palette.text.primary
31
31
  },
32
32
  grandTotal: {
33
- fontSize: `${theme.typography.h3.fontSize} !important`,
33
+ fontSize: theme.typography.h4.fontSize,
34
34
  fontWeight: theme.typography.fontWeightMedium,
35
35
  borderTop: `1px solid ${theme.components.border.medium}`,
36
36
  padding: theme.spacing(1, 0),
@@ -1,8 +1,8 @@
1
1
  import React, { useContext, useMemo } from 'react';
2
- import { SurroundPortals, I18n, Link } from '@shopgate/engage/components';
2
+ import { SurroundPortals, I18n } from '@shopgate/engage/components';
3
3
  import { makeStyles } from '@shopgate/engage/styles';
4
4
  import { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
5
- import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
5
+ import { Button } from '@shopgate/engage/components/v2';
6
6
  import { CHECKOUT_PATH } from '@shopgate/pwa-common/constants/RoutePaths';
7
7
  import PropTypes from 'prop-types';
8
8
  import { CartContext } from "../../cart.context";
@@ -14,15 +14,7 @@ const useStyles = makeStyles()(theme => ({
14
14
  flexDirection: 'column'
15
15
  },
16
16
  button: {
17
- width: '100%',
18
- background: theme.components.ctaButton.background,
19
- color: `${theme.contrastColor(theme.components.ctaButton.background)}!important`,
20
- borderRadius: 4,
21
17
  margin: theme.spacing(2, 0)
22
- },
23
- disabledButton: {
24
- background: theme.palette.action.disabledBackground,
25
- color: `${theme.contrastColor(theme.palette.action.disabledBackground)}!important`
26
18
  }
27
19
  }));
28
20
 
@@ -35,16 +27,12 @@ const CartSummaryWideCheckoutButton = ({
35
27
  isOrderable
36
28
  }) => {
37
29
  const {
38
- classes,
39
- cx
30
+ classes
40
31
  } = useStyles();
41
32
  const {
42
33
  isLoading
43
34
  } = useContext(CartContext);
44
35
  const isActive = useMemo(() => isOrderable && !isLoading, [isLoading, isOrderable]);
45
- const buttonClassName = cx(classes.button, {
46
- [classes.disabledButton]: !isActive
47
- });
48
36
  return /*#__PURE__*/_jsx("div", {
49
37
  className: classes.container,
50
38
  children: /*#__PURE__*/_jsx(SurroundPortals, {
@@ -52,16 +40,14 @@ const CartSummaryWideCheckoutButton = ({
52
40
  portalProps: {
53
41
  isActive
54
42
  },
55
- children: /*#__PURE__*/_jsx(Link, {
43
+ children: /*#__PURE__*/_jsx(Button, {
56
44
  href: CHECKOUT_PATH,
45
+ color: "cta",
46
+ fullWidth: true,
57
47
  disabled: !isActive,
58
- children: /*#__PURE__*/_jsx(RippleButton, {
59
- disabled: !isActive,
60
- type: "regular",
61
- className: buttonClassName,
62
- children: /*#__PURE__*/_jsx(I18n.Text, {
63
- string: "cart.checkout"
64
- })
48
+ className: classes.button,
49
+ children: /*#__PURE__*/_jsx(I18n.Text, {
50
+ string: "cart.checkout"
65
51
  })
66
52
  })
67
53
  })
@@ -1,37 +1,21 @@
1
1
  import React, { useContext, useMemo } from 'react';
2
- import { I18n, Link, SurroundPortals } from '@shopgate/engage/components';
3
- import { makeStyles } from '@shopgate/engage/styles';
2
+ import { I18n, SurroundPortals } from '@shopgate/engage/components';
4
3
  import { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
5
- import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
4
+ import { Button } from '@shopgate/engage/components/v2';
6
5
  import { CHECKOUT_PATH } from '@shopgate/pwa-common/constants/RoutePaths';
7
6
  import PropTypes from 'prop-types';
8
7
  import { CartContext } from "../../cart.context";
9
8
  import connect from "./PaymentBarCheckoutButton.connector";
10
- import { jsx as _jsx } from "react/jsx-runtime";
11
- const useStyles = makeStyles()(theme => ({
12
- button: {
13
- width: '100%',
14
- background: theme.components.ctaButton.background,
15
- color: `${theme.contrastColor(theme.components.ctaButton.background)}!important`
16
- },
17
- disabledButton: {
18
- width: '100%',
19
- background: theme.palette.action.disabledBackground,
20
- color: `${theme.contrastColor(theme.palette.action.disabledBackground)}!important`
21
- }
22
- }));
23
9
 
24
10
  /**
25
11
  * Renders the cart payment bar checkout button.
26
12
  * @param {boolean} isOrderable Whether the cart is orderable.
27
13
  * @return {JSX.Element}
28
14
  */
15
+ import { jsx as _jsx } from "react/jsx-runtime";
29
16
  const PaymentBarCheckoutButton = ({
30
17
  isOrderable
31
18
  }) => {
32
- const {
33
- classes
34
- } = useStyles();
35
19
  const {
36
20
  isLoading
37
21
  } = useContext(CartContext);
@@ -41,19 +25,13 @@ const PaymentBarCheckoutButton = ({
41
25
  portalProps: {
42
26
  isActive
43
27
  },
44
- children: /*#__PURE__*/_jsx(Link, {
28
+ children: /*#__PURE__*/_jsx(Button, {
45
29
  href: CHECKOUT_PATH,
30
+ color: "cta",
31
+ fullWidth: true,
46
32
  disabled: !isActive,
47
- tabIndex: 0,
48
- role: "button",
49
- "aria-disabled": !isActive,
50
- children: /*#__PURE__*/_jsx(RippleButton, {
51
- disabled: !isActive,
52
- type: "regular",
53
- className: isActive ? classes.button : classes.disabledButton,
54
- children: /*#__PURE__*/_jsx(I18n.Text, {
55
- string: "cart.checkout"
56
- })
33
+ children: /*#__PURE__*/_jsx(I18n.Text, {
34
+ string: "cart.checkout"
57
35
  })
58
36
  })
59
37
  });
@@ -38,27 +38,20 @@ const createCartTotalLineMock = () => {
38
38
  };
39
39
  return CartTotalLine;
40
40
  };
41
- const createRippleButtonMock = () => function RippleButton(props) {
41
+ const createButtonMock = () => function Button(props) {
42
42
  return /*#__PURE__*/_jsx("button", {
43
43
  type: "button",
44
44
  className: props.className,
45
45
  disabled: props.disabled,
46
+ "data-color": props.color,
47
+ "data-href": props.href,
46
48
  children: props.children
47
49
  });
48
50
  };
49
- const createStylesMock = () => ({
50
- makeStyles: () => () => () => ({
51
- classes: {
52
- button: 'button',
53
- disabledButton: 'disabledButton'
54
- }
55
- })
56
- });
57
51
  module.exports = {
58
52
  createSurroundPortalsMock,
59
53
  createCartTotalLineMock,
60
- createRippleButtonMock,
61
- createStylesMock
54
+ createButtonMock
62
55
  };
63
56
 
64
57
  /* eslint-enable react/prop-types, require-jsdoc */
@@ -1,24 +1,35 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { Image } from '@shopgate/engage/components';
4
+ import { makeStyles } from '@shopgate/engage/styles';
4
5
  import connect from "./connector";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ const useStyles = makeStyles()(theme => ({
8
+ root: {
9
+ borderRadius: theme.shape.borderRadius,
10
+ overflow: 'hidden'
11
+ }
12
+ }));
5
13
 
6
14
  /**
7
15
  * The CategoryImage component
8
16
  * @param {Object} props The component props.
9
17
  * @returns {JSX.Element}
10
18
  */
11
- import { jsx as _jsx } from "react/jsx-runtime";
12
19
  const CategoryImage = ({
13
20
  className,
14
21
  src,
15
22
  placeholderSrc
16
23
  }) => {
24
+ const {
25
+ classes,
26
+ cx
27
+ } = useStyles();
17
28
  if (!src && !placeholderSrc) {
18
29
  return null;
19
30
  }
20
31
  return /*#__PURE__*/_jsx(Image, {
21
- className: className,
32
+ className: cx(classes.root, className),
22
33
  src: src
23
34
  // Unwrapped, so the fallback renders into the container the outer Image already provides
24
35
  // rather than nesting a second aspect ratio box inside it.
@@ -6,7 +6,8 @@ import PropTypes from 'prop-types';
6
6
  import { getCheckoutBillingAddress, getCheckoutShippingAddress } from '@shopgate/engage/checkout/selectors/order';
7
7
  import { i18n, historyPush } from '@shopgate/engage/core';
8
8
  import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
9
- import { RippleButton, ResponsiveContainer, Typography } from '@shopgate/engage/components';
9
+ import { ResponsiveContainer, Typography } from '@shopgate/engage/components';
10
+ import { Button } from '@shopgate/engage/components/v2';
10
11
  import { ResponsiveBackButton } from "../ResponsiveBackButton";
11
12
  import AddressCard from "../../../account/components/Profile/ProfileAddressCard";
12
13
  import { useProfileContext } from "../../../account/components/Profile/Profile.provider";
@@ -30,12 +31,11 @@ const mapStateToProps = state => ({
30
31
  const mapDispatchToProps = dispatch => ({
31
32
  push: props => dispatch(historyPush(props))
32
33
  });
33
- const useStyles = makeStyles()(theme => ({
34
+ const useStyles = makeStyles()(() => ({
34
35
  container: {
35
36
  display: 'flex',
36
37
  flexDirection: 'row',
37
38
  flexWrap: 'wrap',
38
- margin: -4,
39
39
  padding: 16
40
40
  },
41
41
  headline: {
@@ -43,25 +43,16 @@ const useStyles = makeStyles()(theme => ({
43
43
  margin: 0
44
44
  },
45
45
  button: {
46
- '&&': {
47
- marginTop: 8,
48
- marginRight: 16,
49
- backgroundColor: theme.palette.primary.main,
50
- borderRadius: 5,
51
- fontSize: theme.typography.body2.fontSize,
52
- textTransform: 'none',
53
- padding: 0,
54
- [responsiveMediaQuery('<md', {
55
- webOnly: false
56
- })]: {
57
- width: '100%',
58
- marginRight: 0
59
- }
46
+ marginTop: 8,
47
+ marginRight: 16,
48
+ textTransform: 'none',
49
+ [responsiveMediaQuery('<md', {
50
+ webOnly: false
51
+ })]: {
52
+ width: '100%',
53
+ marginRight: 0
60
54
  }
61
55
  },
62
- ripple: {
63
- padding: '8px 16px'
64
- },
65
56
  actions: {
66
57
  display: 'flex',
67
58
  justifyContent: 'flex-end',
@@ -131,10 +122,10 @@ const AddressList = ({
131
122
  }, contact.id))
132
123
  }), /*#__PURE__*/_jsx("div", {
133
124
  className: classes.actions,
134
- children: /*#__PURE__*/_jsx(RippleButton, {
125
+ children: /*#__PURE__*/_jsx(Button, {
126
+ color: "primary",
127
+ size: "small",
135
128
  className: classes.button,
136
- rippleClassName: classes.ripple,
137
- type: "primary",
138
129
  onClick: () => push({
139
130
  pathname: `${CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN}`.replace(':type', type)
140
131
  }),
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { i18n } from '@shopgate/engage/core/helpers';
3
- import { RippleButton, SurroundPortals } from '@shopgate/engage/components';
3
+ import { SurroundPortals } from '@shopgate/engage/components';
4
+ import { Button } from '@shopgate/engage/components/v2';
4
5
  import { makeStyles } from '@shopgate/engage/styles';
5
6
  import { useCheckoutContext } from "../../hooks/common";
6
7
  import { SupplementalContent } from "../SupplementalContent";
@@ -30,8 +31,8 @@ const Actions = () => {
30
31
  paymentButton: PaymentButton,
31
32
  isButtonLocked
32
33
  } = useCheckoutContext();
33
- const originalButton = /*#__PURE__*/_jsx(RippleButton, {
34
- type: "secondary",
34
+ const originalButton = /*#__PURE__*/_jsx(Button, {
35
+ color: "primary",
35
36
  onClick: handleSubmitOrder,
36
37
  disabled: isButtonLocked,
37
38
  children: i18n.text('checkout.submit_order')
@@ -95,29 +95,37 @@ const CheckoutAddress = ({
95
95
  children: address ? /*#__PURE__*/_jsxs(_Fragment, {
96
96
  children: [/*#__PURE__*/_jsx(Typography, {
97
97
  component: "span",
98
+ variant: "body2",
98
99
  children: address.middleName?.length ? `${address.firstName} ${address.middleName} ${address.lastName}` : `${address.firstName} ${address.lastName}`
99
100
  }), type === ADDRESS_TYPE_BILLING && isGuestCheckout && orderReserveOnly && /*#__PURE__*/_jsxs(_Fragment, {
100
101
  children: [/*#__PURE__*/_jsx(Typography, {
101
102
  component: "span",
103
+ variant: "body2",
102
104
  children: address.emailAddress
103
105
  }), /*#__PURE__*/_jsx(Typography, {
104
106
  component: "span",
107
+ variant: "body2",
105
108
  children: address.mobile
106
109
  })]
107
110
  }), /*#__PURE__*/_jsx(Typography, {
108
111
  component: "span",
112
+ variant: "body2",
109
113
  children: address.address1
110
114
  }), address.address2?.length ? /*#__PURE__*/_jsx(Typography, {
111
115
  component: "span",
116
+ variant: "body2",
112
117
  children: address.address2
113
118
  }) : null, address.address3?.length ? /*#__PURE__*/_jsx(Typography, {
114
119
  component: "span",
120
+ variant: "body2",
115
121
  children: address.address3
116
122
  }) : null, address.address4?.length ? /*#__PURE__*/_jsx(Typography, {
117
123
  component: "span",
124
+ variant: "body2",
118
125
  children: address.address4
119
126
  }) : null, address.postalCode || address.region || address.city || address.country ? /*#__PURE__*/_jsx(Typography, {
120
127
  component: "span",
128
+ variant: "body2",
121
129
  children: i18n.text(`checkout.${type}.address`, {
122
130
  postalCode: address.postalCode || '',
123
131
  region: iso3166?.[address.country]?.divisions?.[address.region] || address.region || '',
@@ -14,7 +14,7 @@ const useStyles = makeStyles()(theme => ({
14
14
  card: {
15
15
  display: 'flex',
16
16
  flexDirection: 'row',
17
- fontSize: theme.typography.body1.fontSize,
17
+ fontSize: theme.typography.body2.fontSize,
18
18
  width: '100%',
19
19
  overflow: 'inherit !important',
20
20
  marginBottom: theme.spacing(2),
@@ -43,7 +43,9 @@ const useStyles = makeStyles()(theme => ({
43
43
  ' tr:last-of-type td': {
44
44
  paddingTop: 8,
45
45
  borderTop: `1px solid ${theme.components.border.medium}`,
46
- fontWeight: theme.typography.fontWeightBold
46
+ '& span': {
47
+ fontWeight: `${theme.typography.fontWeightBold} !important`
48
+ }
47
49
  }
48
50
  },
49
51
  actionsContainer: {
@@ -116,6 +118,7 @@ const CheckoutSection = ({
116
118
  children: [/*#__PURE__*/_jsxs("td", {
117
119
  children: [/*#__PURE__*/_jsx(Typography, {
118
120
  component: "span",
121
+ variant: "body2",
119
122
  className: cx({
120
123
  [classes.labelWithInfoIcon]: !!info
121
124
  }),
@@ -126,6 +129,7 @@ const CheckoutSection = ({
126
129
  }), /*#__PURE__*/_jsx("td", {
127
130
  children: typeof text === 'string' ? /*#__PURE__*/_jsx(Typography, {
128
131
  component: "span",
132
+ variant: "body2",
129
133
  children: text
130
134
  }) : text
131
135
  })]
@@ -1,6 +1,7 @@
1
1
  import React, { useMemo, useEffect, useState } from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import { ResponsiveContainer, RippleButton, Typography } from '@shopgate/engage/components';
3
+ import { ResponsiveContainer, Typography } from '@shopgate/engage/components';
4
+ import { Button } from '@shopgate/engage/components/v2';
4
5
  import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
5
6
  import { CartItems } from '@shopgate/engage/cart';
6
7
  import { useRoute } from '@shopgate/engage/core';
@@ -72,9 +73,8 @@ const useStyles = makeStyles()(theme => ({
72
73
  border: 0
73
74
  },
74
75
  button: {
75
- flex: '0 0 auto !important',
76
- borderRadius: '2px !important',
77
- minWidth: '50% !important',
76
+ flex: '0 0 auto',
77
+ minWidth: '50%',
78
78
  [responsiveMediaQuery('<md')]: {
79
79
  width: '100%'
80
80
  }
@@ -218,9 +218,8 @@ const CheckoutConfirmation = ({
218
218
  })]
219
219
  }), /*#__PURE__*/_jsx("div", {
220
220
  className: classes.buttonWrapper,
221
- children: /*#__PURE__*/_jsx(RippleButton, {
222
- type: "secondary",
223
- disabled: false,
221
+ children: /*#__PURE__*/_jsx(Button, {
222
+ color: "primary",
224
223
  className: classes.button,
225
224
  onClick: onContinueShopping,
226
225
  children: i18n.text('checkout.success.continue')
@@ -1,6 +1,7 @@
1
1
  import React, { useCallback } from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import { RippleButton, I18n, ArrowIcon } from '@shopgate/engage/components';
3
+ import { I18n, ArrowIcon } from '@shopgate/engage/components';
4
+ import { Button } from '@shopgate/engage/components/v2';
4
5
  import { useNavigation } from '@shopgate/engage/core';
5
6
  import { makeStyles } from '@shopgate/engage/styles';
6
7
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -9,21 +10,11 @@ const useStyles = makeStyles()(theme => ({
9
10
  display: 'flex',
10
11
  padding: theme.spacing(4, 2, 2, 2)
11
12
  },
12
- button: {
13
- fontSize: `${theme.typography.body2.fontSize} !important`,
14
- padding: '0 !important',
15
- ' > div ': {
16
- padding: 0,
17
- display: 'flex'
18
- }
19
- },
20
13
  buttonIcon: {
21
14
  display: 'inline-block',
22
- fontSize: `${theme.components.icon.medium} !important`,
15
+ fontSize: theme.components.icon.medium,
23
16
  alignSelf: 'center',
24
- marginRight: theme.spacing(0.5),
25
- marginLeft: -3,
26
- marginTop: -2
17
+ marginRight: theme.spacing(0.5)
27
18
  }
28
19
  }));
29
20
 
@@ -50,10 +41,9 @@ const ResponsiveBackButton = ({
50
41
  }, [onClick, pop]);
51
42
  return /*#__PURE__*/_jsx("div", {
52
43
  className: classes.container,
53
- children: /*#__PURE__*/_jsxs(RippleButton, {
54
- flat: true,
55
- className: classes.button,
56
- type: "secondary",
44
+ children: /*#__PURE__*/_jsxs(Button, {
45
+ variant: "link",
46
+ color: "primary",
57
47
  onClick: handleClick,
58
48
  children: [/*#__PURE__*/_jsx(ArrowIcon, {
59
49
  className: classes.buttonIcon
@@ -44,7 +44,7 @@ const Card = /*#__PURE__*/forwardRef(({
44
44
  variant: paperVariant,
45
45
  elevation: isPlain ? 0 : elevation ?? appearance.elevation,
46
46
  square: square || isPlain,
47
- borderRadius: theme.shape.cardsBorderRadius,
47
+ borderRadius: theme.components.cards.borderRadius,
48
48
  background: isPlain ? 'transparent' : theme.components.cards.backgroundColor,
49
49
  border: theme.components.cards.border,
50
50
  shadowColor: theme.components.cards.shadowColor,
@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useMemo, useCallback, memo } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import debounce from 'lodash/debounce';
4
4
  import { I18n } from '@shopgate/engage/components';
5
- import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
5
+ import { ButtonBase } from '@shopgate/engage/components/v2';
6
6
  import { makeStyles, useTheme } from '@shopgate/engage/styles';
7
7
 
8
8
  /**
@@ -147,9 +147,7 @@ const ChipLayout = ({
147
147
  }), /*#__PURE__*/_jsx("div", {
148
148
  ref: moreButtonRef,
149
149
  className: classes.moreButtonWrapper,
150
- children: /*#__PURE__*/_jsx(RippleButton, {
151
- fill: true,
152
- type: "plain",
150
+ children: /*#__PURE__*/_jsx(ButtonBase, {
153
151
  className: moreButtonClassName,
154
152
  onClick: handleMoreButton,
155
153
  children: /*#__PURE__*/_jsx(I18n.Text, {
@@ -11,7 +11,7 @@ import { historyReset } from '@shopgate/pwa-common/actions/router/historyReset';
11
11
  function mapDispatchToProps(dispatch) {
12
12
  return {
13
13
  push: params => dispatch(historyPush(params)),
14
- pop: () => dispatch(historyPop()),
14
+ pop: params => dispatch(historyPop(params)),
15
15
  replace: params => dispatch(historyReplace(params)),
16
16
  reset: () => dispatch(historyReset())
17
17
  };
@@ -45,7 +45,16 @@ describe('<NavigationHandler />', () => {
45
45
  });
46
46
  it('should trigger the pop() callbacks on navigation.pop event', async () => {
47
47
  await pop();
48
- expect(UIEvents.emit).toBeCalledWith(NAVIGATION_POP);
48
+ expect(UIEvents.emit).toBeCalledWith(NAVIGATION_POP, undefined);
49
+ UIEvents.emit.mockClear();
50
+ });
51
+ it('should forward pop() params so that multiple routes can be popped', async () => {
52
+ await pop({
53
+ steps: 2
54
+ });
55
+ expect(UIEvents.emit).toBeCalledWith(NAVIGATION_POP, {
56
+ steps: 2
57
+ });
49
58
  UIEvents.emit.mockClear();
50
59
  });
51
60
  it('should trigger the replace() callbacks on navigation.replace event', async () => {
@@ -14,8 +14,7 @@ export interface PaperOwnProps {
14
14
  /** Removes the rounded corners. @default false */
15
15
  square?: boolean;
16
16
  /**
17
- * Corner radius. The theme carries a dedicated value per surface `shape.cardsBorderRadius` for
18
- * cards. Ignored when `square`.
17
+ * Corner radius per surface, e.g. `components.cards.borderRadius`. Ignored when `square`.
19
18
  * @default theme.shape.borderRadius
20
19
  */
21
20
  borderRadius?: number | string;
@@ -1 +1 @@
1
- {"version":3,"file":"Paper.d.ts","sourceRoot":"","sources":["../../../components/Paper/Paper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,UAAU,CAAC;AAEpD,MAAM,WAAW,aAAa;IAC5B,wDAAwD;IACxD,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAChC,oFAAoF;IACpF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,kDAAkD;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,CAAC,MAAM,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;IACpF;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,UAAU,GACpB,aAAa,GACX,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,aAAa,CAAC,GAC5D;IAAE,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAA;CAAE,CAAC;AA2BxC;;;GAGG;AACH,QAAA,MAAM,KAAK;;qCAkCT,CAAC;AAIH,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Paper.d.ts","sourceRoot":"","sources":["../../../components/Paper/Paper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,UAAU,CAAC;AAEpD,MAAM,WAAW,aAAa;IAC5B,wDAAwD;IACxD,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAChC,oFAAoF;IACpF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,kDAAkD;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,CAAC,MAAM,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;IACpF;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,UAAU,GACpB,aAAa,GACX,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,aAAa,CAAC,GAC5D;IAAE,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAA;CAAE,CAAC;AA2BxC;;;GAGG;AACH,QAAA,MAAM,KAAK;;qCAkCT,CAAC;AAIH,eAAe,KAAK,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../components/Tabs/components/Tab.jsx"],"names":[],"mappings":";AAqCA;;;;GAIG;AACH,4BAHW,MAAM,GACJ,GAAG,CA0Df;;;;;;;;;;;;;;;;;;;;;;;sBAjGqB,YAAY"}
1
+ {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../components/Tabs/components/Tab.jsx"],"names":[],"mappings":";AAmCA;;;;GAIG;AACH,4BAHW,MAAM,GACJ,GAAG,CA0Df;;;;;;;;;;;;;;;;;;;;;;;sBA/FqB,YAAY"}