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

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

@@ -1,5 +1,6 @@
 import React, { useContext, useMemo } from 'react';
-import { LocationIcon, Button, Link, ConditionalWrapper, Typography } from '@shopgate/engage/components';
+import { LocationIcon, Link, ConditionalWrapper, Typography } from '@shopgate/engage/components';
+import { Button, ButtonBase } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getWeekDaysOrder } from '@shopgate/engage/core';
 import { i18n } from '@shopgate/engage/core/helpers';
@@ -53,9 +54,6 @@ const useStyles = makeStyles()(theme => ({
   phoneNumber: {
     textDecoration: 'underline'
   },
-  makeMyStoreButton: {
-    color: theme.palette.primary.main
-  },
   comingSoon: {
     fontStyle: 'italic'
   },
@@ -97,10 +95,8 @@ const StoreDetails = () => {
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx(ConditionalWrapper, {
       condition: !isRouteLocationPreferred,
-      wrapper: children => /*#__PURE__*/_jsx(Button, {
+      wrapper: children => /*#__PURE__*/_jsx(ButtonBase, {
         onClick: () => selectLocation(routeLocation, true),
-        role: "button",
-        type: "plain",
         children: children
       }),
       children: /*#__PURE__*/_jsxs("div", {
@@ -144,10 +140,9 @@ const StoreDetails = () => {
           children: [/*#__PURE__*/_jsx(GetDirectionsButton, {
             address: address
           }), !isComingSoon && !isRouteLocationPreferred && /*#__PURE__*/_jsx(Button, {
+            variant: "text",
+            color: "primary",
             onClick: () => selectLocation(routeLocation, true),
-            role: "button",
-            type: "plain",
-            className: classes.makeMyStoreButton,
             children: /*#__PURE__*/_jsx("span", {
               children: i18n.text('location.makeMyStore')
             })

package/locations/components/StoreDetails/components/StoresNearbyListItem.js

@@ -2,7 +2,8 @@ import React, { useContext } from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Button, Typography } from '@shopgate/engage/components';
+import { Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { historyPush } from '@shopgate/engage/core';
 import formatDistance from "../../../helpers/formatDistance";
@@ -10,9 +11,6 @@ import { STORE_DETAILS_PATH } from "../../../constants";
 import { StoreDetailsContext } from "../../../providers/StoreDetailsContext";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
-  button: {
-    padding: '0px !important'
-  },
   locationRow: {
     borderBottom: `1px solid ${theme.components.border.light}`,
     borderTop: `1px solid ${theme.components.border.light}`,
@@ -43,7 +41,7 @@ const useStyles = makeStyles()(theme => ({
     textAlign: 'start'
   },
   cellContainer: {
-    padding: '8px',
+    padding: 6,
     textAlign: 'end'
   },
   cell: {
@@ -51,7 +49,7 @@ const useStyles = makeStyles()(theme => ({
   },
   buttonContainer: {
     display: 'flex',
-    gap: '4px 16px',
+    gap: '0 16px',
     flexWrap: 'wrap',
     justifyContent: 'flex-end'
   }
@@ -121,13 +119,11 @@ const StoresNearbyListItem = ({
           children: [/*#__PURE__*/_jsxs("div", {
             className: classes.makeMyStore,
             children: [!isComingSoon && /*#__PURE__*/_jsx(Button, {
-              className: classes.button,
+              variant: "link",
+              color: "secondary",
+              size: "small",
               onClick: () => selectLocation(location, true),
-              role: "button",
-              type: "primary",
-              flat: true,
               disabled: isPreferredLocation,
-              wrapContent: false,
               children: /*#__PURE__*/_jsx(Typography, {
                 variant: "body2",
                 component: "span",
@@ -135,12 +131,10 @@ const StoresNearbyListItem = ({
                 children: `${i18n.text('location.makeMyStore')}`
               })
             }), isComingSoon && /*#__PURE__*/_jsx(Button, {
-              className: classes.button,
-              role: "button",
-              type: "primary",
-              flat: true,
+              variant: "link",
+              color: "secondary",
+              size: "small",
               disabled: true,
-              wrapContent: false,
               children: /*#__PURE__*/_jsx(Typography, {
                 variant: "body2",
                 component: "span",
@@ -151,12 +145,10 @@ const StoresNearbyListItem = ({
           }), /*#__PURE__*/_jsx("div", {
             className: classes.storeInfo,
             children: /*#__PURE__*/_jsx(Button, {
-              className: classes.button,
-              role: "button",
-              type: "primary",
-              flat: true,
+              variant: "link",
+              color: "secondary",
+              size: "small",
               onClick: () => openStoreDetails(code),
-              wrapContent: false,
               children: /*#__PURE__*/_jsx(Typography, {
                 variant: "body2",
                 component: "span",

package/locations/components/StoreFinder/StoreFinderSelectLocationButton.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useMemo } from 'react';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { StoreContext } from "./Store.context";
 import { i18n } from "../../../core/helpers";
@@ -8,14 +8,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   selectLocationButtonWrapper: {
     padding: theme.spacing(0, 2, 1, 2)
-  },
-  selectLocationButton: {
-    width: '100%',
-    fontSize: `${theme.typography.body2.fontSize} !important`,
-    ':not(:disabled)': {
-      background: `${theme.palette.primary.main} !important`,
-      color: `${theme.palette.primary.contrastText} !important`
-    }
   }
 }));
 
@@ -41,9 +33,11 @@ export const StoreFinderSelectLocationButton = () => {
   const isSelected = useMemo(() => selectedLocation?.code === store?.code, [selectedLocation, store]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.selectLocationButtonWrapper,
-    children: /*#__PURE__*/_jsx(RippleButton, {
+    children: /*#__PURE__*/_jsx(Button, {
+      color: "primary",
+      size: "small",
+      fullWidth: true,
       onClick: handleClick,
-      className: classes.selectLocationButton,
       disabled: isLoading || store?.isComingSoon || isSelected,
       children: i18n.text(store?.isComingSoon ? 'location.comingSoon' : 'locations.select_location')
     })

package/locations/components/StoreFinder/StoreFinderStoreInfoButton.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { historyPush } from '@shopgate/engage/core';
 import { connect } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
@@ -10,14 +10,6 @@ import { StoreFinderContext } from "../../locations.context";
 import { STORE_DETAILS_PATH } from "../../constants";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
-  showStoreInfoButton: {
-    width: '100%',
-    fontSize: `${theme.typography.body2.fontSize} !important`,
-    ':not(:disabled)': {
-      background: `${theme.palette.primary.main} !important`,
-      color: `${theme.palette.primary.contrastText} !important`
-    }
-  },
   showStoreInfoButtonWrapper: {
     padding: theme.spacing(0, 2, 1, 2)
   }
@@ -54,9 +46,11 @@ const StoreFinderStoreInfoButton = ({
   }, [openStoreDetail, store]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.showStoreInfoButtonWrapper,
-    children: /*#__PURE__*/_jsx(RippleButton, {
+    children: /*#__PURE__*/_jsx(Button, {
+      color: "primary",
+      size: "small",
+      fullWidth: true,
       onClick: handleClick,
-      className: classes.showStoreInfoButton,
       disabled: isLoading,
       children: i18n.text('locations.store_info')
     })

package/locations/components/StoreList/StoreListProduct.js

@@ -18,10 +18,9 @@ const useStyles = makeStyles()(theme => ({
   },
   productImage: {
     flex: '0 0 auto',
-    width: '2.5rem',
-    height: '2.5rem',
+    width: 70,
     background: theme.palette.background.emphasized,
-    marginRight: theme.spacing(2.5)
+    marginRight: theme.spacing(2)
   },
   productContent: {
     flexGrow: 1,

package/locations/components/StoreList/StoreListSearch.js

@@ -76,6 +76,7 @@ const useStyles = makeStyles()(theme => ({
   },
   input: {
     margin: '3px 0',
+    color: theme.palette.text.primary,
     width: '100%',
     lineHeight: '28px',
     outline: 'none',

package/locations/components/StoreList/StoreSelectLocationButton.js

@@ -1,5 +1,5 @@
 import React, { useContext, useCallback } from 'react';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { isProductAvailable } from "../../helpers";
@@ -11,14 +11,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   selectLocationButtonWrapper: {
     padding: theme.spacing(0, 2, 1, 2)
-  },
-  selectLocationButton: {
-    width: '100%',
-    fontSize: `${theme.typography.body2.fontSize} !important`,
-    ':not(:disabled)': {
-      background: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText
-    }
   }
 }));
 
@@ -54,9 +46,11 @@ const StoreSelectLocationButton = ({
   }, [isAvailable, noInventory, product, selectLocation, setPostalCode, setUserSearchZipLocationFromSelection, store]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.selectLocationButtonWrapper,
-    children: /*#__PURE__*/_jsx(RippleButton, {
+    children: /*#__PURE__*/_jsx(Button, {
+      color: "primary",
+      size: "small",
+      fullWidth: true,
       onClick: handleClick,
-      className: classes.selectLocationButton,
       disabled: isLoading || store?.isComingSoon || !noInventory && !isAvailable,
       children: i18n.text(store?.isComingSoon ? 'location.comingSoon' : 'locations.select_location')
     })

package/login/components/ForgotPassword/ForgotPassword.js

@@ -1,7 +1,8 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { RippleButton, I18n, ArrowIcon, Typography } from '@shopgate/engage/components';
+import { I18n, ArrowIcon, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { StylePresets } from '@shopgate/engage/components/Form';
 import TextField from '@shopgate/pwa-ui-shared/TextField';
 import { i18n, EUSERNOTFOUND } from '@shopgate/engage/core';
@@ -41,9 +42,6 @@ const useStyles = makeStyles()(theme => ({
     paddingTop: theme.spacing(4),
     paddingBottom: theme.spacing(3)
   },
-  button: {
-    width: '100%'
-  },
   input: {
     ' .label': {
       color: theme.palette.text.secondary
@@ -67,21 +65,11 @@ const useStyles = makeStyles()(theme => ({
   goBackButtonContainer: {
     padding: theme.spacing(2, 0)
   },
-  goBackButton: {
-    fontSize: `${theme.typography.body2.fontSize} !important`,
-    padding: '0 !important',
-    ' > div ': {
-      padding: 0,
-      display: 'flex'
-    }
-  },
   goBackButtonIcon: {
     display: 'inline-block',
-    fontSize: `${theme.components.icon.medium} !important`,
+    fontSize: theme.components.icon.medium,
     alignSelf: 'center',
-    marginRight: theme.spacing(0.5),
-    marginLeft: -3,
-    marginTop: -2
+    marginRight: theme.spacing(0.5)
   }
 }));
 
@@ -156,9 +144,10 @@ const ForgotPassword = ({
           errorText: validationError
         }), /*#__PURE__*/_jsx("div", {
           className: classes.buttonContainer,
-          children: /*#__PURE__*/_jsx(RippleButton, {
-            className: classes.button,
-            type: "secondary",
+          children: /*#__PURE__*/_jsx(Button, {
+            type: "submit",
+            color: "primary",
+            fullWidth: true,
             disabled: loading,
             children: /*#__PURE__*/_jsx(I18n.Text, {
               string: "common.submit"
@@ -180,10 +169,9 @@ const ForgotPassword = ({
         })
       }), /*#__PURE__*/_jsx("div", {
         className: classes.goBackButtonContainer,
-        children: /*#__PURE__*/_jsxs(RippleButton, {
-          flat: true,
-          className: classes.goBackButton,
-          type: "secondary",
+        children: /*#__PURE__*/_jsxs(Button, {
+          variant: "text",
+          color: "primary",
           onClick: handleBackToLogin,
           children: [/*#__PURE__*/_jsx(ArrowIcon, {
             className: classes.goBackButtonIcon

package/mocks/date.js

@@ -0,0 +1,31 @@
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _wrapNativeSuper from "@babel/runtime/helpers/wrapNativeSuper";
+const RealDate = global.Date;
+
+/**
+ * Replace the global Date with a mocked one.
+ * @param {string|number} isoDate Data and time to set
+ */
+export function mockDate(isoDate) {
+  global.Date = /*#__PURE__*/function (_Date) {
+    /**
+     * Builds a new Date object with a mocked date/time value.
+     */
+    function _class() {
+      var _this;
+      _this = _Date.call(this) || this;
+      // eslint-disable-next-line no-constructor-return
+      return new RealDate(isoDate) || _assertThisInitialized(_this);
+    }
+    _inheritsLoose(_class, _Date);
+    return _class;
+  }(/*#__PURE__*/_wrapNativeSuper(Date));
+}
+
+/**
+ * Resets a previously mocked Date class back to it's original.
+ */
+export function resetMockDate() {
+  global.Date = RealDate;
+}

package/mocks/index.js

@@ -0,0 +1,3 @@
+export * from "./date";
+export * from "./subscriptions";
+export * from "./pipelineRequest";

package/mocks/pipelineRequest.js

@@ -0,0 +1 @@
+export { mockedPipelineRequestFactory } from '@shopgate/pwa-core/classes/PipelineRequest/mock';

package/mocks/subscriptions.js

@@ -0,0 +1 @@
+export { subscribe, invoke as invokeSubscription, getSubscriptionCount, resetSubscriptions } from '@shopgate/pwa-common/subscriptions/mock';

package/orders/components/OrderDetails/OrderDetailsAuthenticate.js

@@ -1,6 +1,7 @@
 import React, { useMemo, useCallback } from 'react';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { FormBuilder, I18n, Link, RippleButton, MessageBar, ResponsiveContainer } from '@shopgate/engage/components';
+import { FormBuilder, I18n, Link, MessageBar, ResponsiveContainer } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { LOGIN_PATH, useRoute, i18n } from '@shopgate/engage/core';
 import { StylePresets } from '@shopgate/engage/components/Form';
 import generateFormConfig from "./OrderDetailsAuthenticateForm.config";
@@ -21,9 +22,6 @@ const useStyles = makeStyles()(theme => ({
   form: {
     ...StylePresets.getOutlinedFormFields(theme)
   },
-  submitButton: {
-    width: '100%'
-  },
   loginLink: {
     color: theme.palette.primary.main,
     ':hover': {
@@ -129,11 +127,11 @@ const OrderDetailsAuthenticate = () => {
           handleUpdate: handleUpdate,
           onSubmit: handleSubmit
         }), /*#__PURE__*/_jsx("div", {
-          children: /*#__PURE__*/_jsx(RippleButton, {
-            type: "secondary",
+          children: /*#__PURE__*/_jsx(Button, {
+            color: "primary",
+            fullWidth: true,
             onClick: handleSubmit,
             disabled: isLoading,
-            className: classes.submitButton,
             children: i18n.text('common.submit')
           })
         })]

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

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

package/orders/components/OrderHistory/OrderHistoryList.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { I18n, CardList, Link } from '@shopgate/engage/components';
+import { I18n, Card, Link } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { getTranslatedOrderStatus } from "../../helpers";
@@ -31,10 +31,7 @@ const useStyles = makeStyles()(theme => ({
     ':last-of-type': {
       marginBottom: 0
     },
-    background: theme.palette.background.surface,
-    boxSizing: 'border-box',
-    boxShadow: '0 4px 8px rgba(0,0,0,0.16)',
-    borderRadius: 10
+    boxSizing: 'border-box'
   }
 }));
 
@@ -47,9 +44,10 @@ export const Row = props => {
   const {
     classes
   } = useStyles();
-  return /*#__PURE__*/_jsx(CardList.Item, {
+  return /*#__PURE__*/_jsx(Card, {
     className: classes.card,
     onClick: props.openDetails,
+    component: "li",
     children: /*#__PURE__*/_jsxs(Link, {
       className: classes.cardContent,
       href: getOrderDetailsRoute(props.orderNumber),
@@ -99,10 +97,11 @@ export const List = ({
   children
 }) => {
   const {
-    classes
+    classes,
+    cx
   } = useStyles();
-  return /*#__PURE__*/_jsx(CardList, {
-    className: classes.list,
+  return /*#__PURE__*/_jsx("ul", {
+    className: cx(classes.list, 'engage__orders__order-history-list'),
     children: children
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"OrderHistoryTable.d.ts","sourceRoot":"","sources":["../../../../orders/components/OrderHistory/OrderHistoryTable.jsx"],"names":[],"mappings":"AAmCO,gCAHI,MAAM,GACJ,GAAG,CAkCf;;;;;;;;;;;;AAiBM,oCAHI,MAAM,GACJ,GAAG,CAuBf;;;;;;;sBAxGqB,YAAY"}
+{"version":3,"file":"OrderHistoryTable.d.ts","sourceRoot":"","sources":["../../../../orders/components/OrderHistory/OrderHistoryTable.jsx"],"names":[],"mappings":"AAsCO,gCAHI,MAAM,GACJ,GAAG,CAkCf;;;;;;;;;;;;AAiBM,oCAHI,MAAM,GACJ,GAAG,CAuBf;;;;;;;sBA3GqB,YAAY"}

package/orders/components/OrderHistory/OrderHistoryTable.js

@@ -6,6 +6,9 @@ import { i18n } from '@shopgate/engage/core/helpers';
 import { getTranslatedOrderStatus } from "../../helpers";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
+  card: {
+    margin: '5px 5px 10px'
+  },
   tableHeader: {
     '& > th': {
       padding: theme.spacing(2),
@@ -79,6 +82,7 @@ export const Table = ({
     classes
   } = useStyles();
   return /*#__PURE__*/_jsx(Card, {
+    className: classes.card,
     children: /*#__PURE__*/_jsxs("table", {
       children: [/*#__PURE__*/_jsx("thead", {
         children: /*#__PURE__*/_jsxs("tr", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.32.0-beta.2",
+  "version": "7.32.0-beta.20",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,13 +17,13 @@
   "scripts": {},
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.32.0-beta.2",
-    "@shopgate/pwa-common-commerce": "7.32.0-beta.2",
-    "@shopgate/pwa-core": "7.32.0-beta.2",
-    "@shopgate/pwa-ui-ios": "7.32.0-beta.2",
-    "@shopgate/pwa-ui-material": "7.32.0-beta.2",
-    "@shopgate/pwa-ui-shared": "7.32.0-beta.2",
+    "@shopgate/native-modules": "1.0.0-beta.34",
+    "@shopgate/pwa-common": "7.32.0-beta.20",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.20",
+    "@shopgate/pwa-core": "7.32.0-beta.20",
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.20",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.20",
+    "@shopgate/pwa-ui-shared": "7.32.0-beta.20",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",
@@ -46,7 +46,7 @@
     "validate.js": "^0.13.1"
   },
   "devDependencies": {
-    "@shopgate/pwa-unit-test": "7.32.0-beta.2",
+    "@shopgate/pwa-unit-test": "7.31.3",
     "@types/color": "^4.2.0",
     "@types/lodash": "^4.17.24",
     "@types/react-dom": "^17.0.2",

package/page/components/NotFound.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The NotFoundPage component renders a "Page Not Found" view
+ * with options to navigate back or to the home page.
+ */
+declare const NotFound: () => import("react").JSX.Element;
+export default NotFound;
+//# sourceMappingURL=NotFound.d.ts.map

package/page/components/NotFound.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotFound.d.ts","sourceRoot":"","sources":["../../../page/components/NotFound.tsx"],"names":[],"mappings":"AA8BA;;;GAGG;AACH,QAAA,MAAM,QAAQ,mCA2Bb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/page/components/NotFound.js

@@ -1,7 +1,7 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
-import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
 import { I18n, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { historyPop, historyResetTo } from '@shopgate/pwa-common/actions/router';
 import { i18n, INDEX_PATH } from "../../core";
@@ -16,7 +16,6 @@ const useStyles = makeStyles()(theme => ({
     paddingTop: theme.spacing(8)
   },
   button: {
-    width: '100%',
     maxWidth: 250
   },
   buttonContainer: {
@@ -32,7 +31,6 @@ const useStyles = makeStyles()(theme => ({
 /**
  * The NotFoundPage component renders a "Page Not Found" view
  * with options to navigate back or to the home page.
- * @returns {JSX.Element}
  */
 const NotFound = () => {
   const {
@@ -56,17 +54,19 @@ const NotFound = () => {
       })
     }), /*#__PURE__*/_jsxs("div", {
       className: classes.buttonContainer,
-      children: [/*#__PURE__*/_jsx(RippleButton, {
+      children: [/*#__PURE__*/_jsx(Button, {
         onClick: handleBack,
+        color: "primary",
+        fullWidth: true,
         className: classes.button,
-        type: "secondary",
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "common.back"
         })
-      }), /*#__PURE__*/_jsx(RippleButton, {
+      }), /*#__PURE__*/_jsx(Button, {
         onClick: handleHome,
+        color: "primary",
+        fullWidth: true,
         className: classes.button,
-        type: "secondary",
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "navigation.back",
           params: {

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.d.ts

@@ -0,0 +1,52 @@
+export default Protector;
+export type OnImageRatioChange = (ratio: string) => any;
+export type CustomResponsiveImageProps = {
+    /**
+     * Whether to enable the parallax effect.
+     */
+    enableParallax?: boolean | undefined;
+    /**
+     * The border radius to apply to the image.
+     */
+    borderRadius?: string | number | undefined;
+    /**
+     * The breakpoint from which on a higher resolution image should
+     * be loaded.
+     */
+    breakpoint?: import("../../../styles/theme").Breakpoint | undefined;
+    /**
+     * Whether the image is used as a banner (full width and height of
+     * its container).
+     */
+    isBanner?: boolean | undefined;
+    /**
+     * Called when the aspect ratio of the image
+     * changes.
+     */
+    onImageRatioChange?: OnImageRatioChange | undefined;
+};
+export type Theme = import("@shopgate/engage/styles").Theme;
+export type Breakpoint = Theme["breakpoints"]["keys"][0];
+export type ImgProps = React.ImgHTMLAttributes<HTMLImageElement>;
+export type ResponsiveImageProps = CustomResponsiveImageProps & ImgProps;
+/**
+ * The ResponsiveWidgetImage component renders an image that adapts to different screen sizes.
+ * It renders a image with higher resolution on larger screens
+ * It can apply a parallax effect when scrolling.
+ *
+ * @param {ResponsiveImageProps} props The component props.
+ * @returns {JSX.Element}
+ */
+declare function Protector({ src, ...rest }: ResponsiveImageProps): JSX.Element;
+declare namespace Protector {
+    namespace propTypes {
+        let src: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        let src_1: null;
+        export { src_1 as src };
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';
+//# sourceMappingURL=ResponsiveWidgetImage.d.ts.map

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveWidgetImage.d.ts","sourceRoot":"","sources":["../../../../page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.jsx"],"names":[],"mappings":";yCASW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;oBAeH,OAAO,yBAAyB,EAAE,KAAK;yBACvC,KAAK,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;uBAC/B,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;mCACzC,0BAA0B,GAAG,QAAQ;AAgKnD;;;;;;;GAOG;AACH,6CAHW,oBAAoB,GAClB,GAAG,CAAC,OAAO,CASvB;;;;;;;;;;kBA1MmD,OAAO;sBACrC,YAAY"}