@shopgate/engage 7.30.0-alpha.8 → 7.30.0-beta.1

package/orders/components/OrderDetails/OrderDetailsOrderHeader.js

@@ -13,6 +13,7 @@ import { ORDER_STATUS_SUBMITTED } from "../../constants";
  * @param {Object} props The component props
  * @returns {JSX}
  */
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const OrderDetailsOrderHeader = ({
   order
 }) => {
@@ -31,37 +32,44 @@ const OrderDetailsOrderHeader = ({
   const fulfillmentSlot = lineItems[0]?.fulfillmentSlot;
 
   /* eslint-disable react/no-danger */
-  return /*#__PURE__*/React.createElement("div", {
-    className: wrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: subline
-  }, /*#__PURE__*/React.createElement("p", {
-    className: orderNum
-  }, i18n.text('order_details.subline.order_number', {
-    orderNumber
-  }), ' | ', i18n.text('order_details.subline.order_status', {
-    status: getTranslatedOrderStatus(status)
-  })), status === ORDER_STATUS_SUBMITTED && /*#__PURE__*/React.createElement(Button, {
-    className: cancel,
-    type: "secondary",
-    onClick: cancelOrder,
-    flat: true,
-    wrapContent: false
-  }, i18n.text('order_details.cancel.button'))), fulfillmentSlot ? /*#__PURE__*/React.createElement("div", {
-    className: time
-  }, /*#__PURE__*/React.createElement(TimeIcon, {
-    size: 20,
-    className: timeIcon
-  }), /*#__PURE__*/React.createElement("span", {
-    className: subline
-  }, moment(fulfillmentSlot?.date, 'YYYY:MM-DD').format('LL'), ' ', moment(fulfillmentSlot?.from, 'HH:mm').format('LT'), ' - ', moment(fulfillmentSlot?.to, 'HH:mm').format('LT'))) : null, statusText && /*#__PURE__*/React.createElement("div", {
-    className: instructions
-  }, /*#__PURE__*/React.createElement("p", {
-    className: body,
-    dangerouslySetInnerHTML: {
-      __html: statusText
-    }
-  })));
+  return /*#__PURE__*/_jsxs("div", {
+    className: wrapper,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: subline,
+      children: [/*#__PURE__*/_jsxs("p", {
+        className: orderNum,
+        children: [i18n.text('order_details.subline.order_number', {
+          orderNumber
+        }), ' | ', i18n.text('order_details.subline.order_status', {
+          status: getTranslatedOrderStatus(status)
+        })]
+      }), status === ORDER_STATUS_SUBMITTED && /*#__PURE__*/_jsx(Button, {
+        className: cancel,
+        type: "secondary",
+        onClick: cancelOrder,
+        flat: true,
+        wrapContent: false,
+        children: i18n.text('order_details.cancel.button')
+      })]
+    }), fulfillmentSlot ? /*#__PURE__*/_jsxs("div", {
+      className: time,
+      children: [/*#__PURE__*/_jsx(TimeIcon, {
+        size: 20,
+        className: timeIcon
+      }), /*#__PURE__*/_jsxs("span", {
+        className: subline,
+        children: [moment(fulfillmentSlot?.date, 'YYYY:MM-DD').format('LL'), ' ', moment(fulfillmentSlot?.from, 'HH:mm').format('LT'), ' - ', moment(fulfillmentSlot?.to, 'HH:mm').format('LT')]
+      })]
+    }) : null, statusText && /*#__PURE__*/_jsx("div", {
+      className: instructions,
+      children: /*#__PURE__*/_jsx("p", {
+        className: body,
+        dangerouslySetInnerHTML: {
+          __html: statusText
+        }
+      })
+    })]
+  });
   /* eslint-enable react/no-danger */
 };
 export default OrderDetailsOrderHeader;

package/orders/components/OrderDetails/OrderDetailsOrderPickupLocation.js

@@ -9,6 +9,7 @@ import { locationName } from "./OrderDetailsOrderPickupLocation.style";
  * OrderDetailsPickupLocation component
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const OrderDetailsPickupLocation = ({
   location,
   className
@@ -47,7 +48,7 @@ const OrderDetailsPickupLocation = ({
   if (!location) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(CheckoutConfirmationSection, {
+  return /*#__PURE__*/_jsx(CheckoutConfirmationSection, {
     title: "order_details.pickup_location.headline",
     content: content,
     className: className

package/orders/components/OrderHistory/OrderHistory.js

@@ -1,7 +1,7 @@
 import React from 'react';
+import { ResponsiveContainer, NoResults } from '@shopgate/engage/components';
 import { Table, TableRow } from "./OrderHistoryTable";
 import { List, Row } from "./OrderHistoryList";
-import { ResponsiveContainer, NoResults } from "../../../components";
 import OrderHistoryLoader from "./OrderHistoryLoader";
 import { useOrderHistory } from "../../hooks";
 import { root, noResult } from "./OrderHistory.style";
@@ -10,32 +10,37 @@ import { root, noResult } from "./OrderHistory.style";
  * The OrderDetails components
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const OrderHistory = () => {
   const {
     totalOrderCount
   } = useOrderHistory();
   if (totalOrderCount === 0) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: noResult
-    }, /*#__PURE__*/React.createElement(NoResults, {
-      headlineText: "orders.no_result.body",
-      bodyText: ""
-    }));
+    return /*#__PURE__*/_jsx("div", {
+      className: noResult,
+      children: /*#__PURE__*/_jsx(NoResults, {
+        headlineText: "orders.no_result.body",
+        bodyText: ""
+      })
+    });
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: root
-  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    appAlways: true,
-    breakpoint: "<=xs"
-  }, /*#__PURE__*/React.createElement(OrderHistoryLoader, {
-    wrapper: List,
-    iterator: Row
-  })), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    webOnly: true,
-    breakpoint: ">xs"
-  }, /*#__PURE__*/React.createElement(OrderHistoryLoader, {
-    wrapper: Table,
-    iterator: TableRow
-  })));
+  return /*#__PURE__*/_jsxs("div", {
+    className: root,
+    children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
+      appAlways: true,
+      breakpoint: "<=xs",
+      children: /*#__PURE__*/_jsx(OrderHistoryLoader, {
+        wrapper: List,
+        iterator: Row
+      })
+    }), /*#__PURE__*/_jsx(ResponsiveContainer, {
+      webOnly: true,
+      breakpoint: ">xs",
+      children: /*#__PURE__*/_jsx(OrderHistoryLoader, {
+        wrapper: Table,
+        iterator: TableRow
+      })
+    })]
+  });
 };
 export default OrderHistory;

package/orders/components/OrderHistory/OrderHistoryList.js

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import I18n from '@shopgate/pwa-common/components/I18n';
 import { i18n } from '@shopgate/engage/core';
+import { CardList, Link } from '@shopgate/engage/components';
 import { getTranslatedOrderStatus } from "../../helpers";
 import { card, list, orderNumber, column, rightAlign, cardContent } from "./OrderHistoryList.style";
-import { CardList, Link } from "../../../components";
 import { getOrderDetailsRoute } from "../../helpers/orderDetails";
 
 /**
@@ -12,38 +12,49 @@ import { getOrderDetailsRoute } from "../../helpers/orderDetails";
  * @param {Object} props props
  * @returns {JSX}
  */
-export const Row = props => /*#__PURE__*/React.createElement(CardList.Item, {
-  key: props.orderNumber,
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export const Row = props => /*#__PURE__*/_jsx(CardList.Item, {
   className: card,
-  onClick: props.openDetails
-}, /*#__PURE__*/React.createElement(Link, {
-  className: cardContent,
-  href: getOrderDetailsRoute(props.orderNumber)
-}, /*#__PURE__*/React.createElement("div", {
-  className: column
-}, /*#__PURE__*/React.createElement("span", {
-  className: orderNumber
-}, i18n.text('orders.header.orderNumber'), ":\xA0", props.orderNumber), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(I18n.Date, {
-  timestamp: new Date(props.submitDate).getTime(),
-  format: "short"
-}), "\xA0", /*#__PURE__*/React.createElement(I18n.Time, {
-  timestamp: new Date(props.submitDate).getTime(),
-  format: "short"
-})), /*#__PURE__*/React.createElement("span", null, i18n.text('orders.header.status'), ":\xA0", getTranslatedOrderStatus(props.status))), /*#__PURE__*/React.createElement("div", {
-  className: column
-}, /*#__PURE__*/React.createElement("span", {
-  className: rightAlign
-}, /*#__PURE__*/React.createElement(I18n.Price, {
-  currency: props.currencyCode,
-  price: props.total
-})), /*#__PURE__*/React.createElement("span", {
-  className: rightAlign
-}, /*#__PURE__*/React.createElement(I18n.Number, {
-  number: props.lineItemCount,
-  fractions: 0
-}), "\xA0", i18n.text('orders.itemCount', {
-  count: props.lineItemCount
-})))));
+  onClick: props.openDetails,
+  children: /*#__PURE__*/_jsxs(Link, {
+    className: cardContent,
+    href: getOrderDetailsRoute(props.orderNumber),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: column,
+      children: [/*#__PURE__*/_jsxs("span", {
+        className: orderNumber,
+        children: [i18n.text('orders.header.orderNumber'), ":\xA0", props.orderNumber]
+      }), /*#__PURE__*/_jsxs("span", {
+        children: [/*#__PURE__*/_jsx(I18n.Date, {
+          timestamp: new Date(props.submitDate).getTime(),
+          format: "short"
+        }), "\xA0", /*#__PURE__*/_jsx(I18n.Time, {
+          timestamp: new Date(props.submitDate).getTime(),
+          format: "short"
+        })]
+      }), /*#__PURE__*/_jsxs("span", {
+        children: [i18n.text('orders.header.status'), ":\xA0", getTranslatedOrderStatus(props.status)]
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: column,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: rightAlign,
+        children: /*#__PURE__*/_jsx(I18n.Price, {
+          currency: props.currencyCode,
+          price: props.total
+        })
+      }), /*#__PURE__*/_jsxs("span", {
+        className: rightAlign,
+        children: [/*#__PURE__*/_jsx(I18n.Number, {
+          number: props.lineItemCount,
+          fractions: 0
+        }), "\xA0", i18n.text('orders.itemCount', {
+          count: props.lineItemCount
+        })]
+      })]
+    })]
+  })
+}, props.orderNumber);
 /**
  * The Order History List component
  * @param {Object} props props
@@ -51,6 +62,7 @@ export const Row = props => /*#__PURE__*/React.createElement(CardList.Item, {
  */
 export const List = ({
   children
-}) => /*#__PURE__*/React.createElement(CardList, {
-  className: list
-}, children);
+}) => /*#__PURE__*/_jsx(CardList, {
+  className: list,
+  children: children
+});

package/orders/components/OrderHistory/OrderHistoryLoader.js

@@ -10,6 +10,7 @@ import { useOrderHistory } from "../../hooks";
  * The OrderDetails components
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const OrderHistoryLoader = ({
   wrapper,
   iterator
@@ -19,21 +20,23 @@ const OrderHistoryLoader = ({
     totalOrderCount,
     fetchOrderHistory
   } = useOrderHistory();
-  return /*#__PURE__*/React.createElement(ViewContext.Consumer, null, ({
-    getContentRef
-  }) => /*#__PURE__*/React.createElement(InfiniteContainer, {
-    containerRef: getContentRef(),
-    wrapper: wrapper,
-    iterator: iterator,
-    loader: offset => fetchOrderHistory({
-      limit: ITEMS_PER_LOAD,
-      offset
-    }),
-    items: orders,
-    loadingIndicator: /*#__PURE__*/React.createElement(LoadingIndicator, null),
-    totalItems: totalOrderCount,
-    initialLimit: ITEMS_PER_LOAD,
-    limit: ITEMS_PER_LOAD
-  }));
+  return /*#__PURE__*/_jsx(ViewContext.Consumer, {
+    children: ({
+      getContentRef
+    }) => /*#__PURE__*/_jsx(InfiniteContainer, {
+      containerRef: getContentRef(),
+      wrapper: wrapper,
+      iterator: iterator,
+      loader: offset => fetchOrderHistory({
+        limit: ITEMS_PER_LOAD,
+        offset
+      }),
+      items: orders,
+      loadingIndicator: /*#__PURE__*/_jsx(LoadingIndicator, {}),
+      totalItems: totalOrderCount,
+      initialLimit: ITEMS_PER_LOAD,
+      limit: ITEMS_PER_LOAD
+    })
+  });
 };
 export default OrderHistoryLoader;

package/orders/components/OrderHistory/OrderHistoryTable.js

@@ -2,36 +2,45 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import I18n from '@shopgate/pwa-common/components/I18n';
 import { i18n } from '@shopgate/engage/core';
+import { Card } from '@shopgate/engage/components';
 import { getTranslatedOrderStatus } from "../../helpers";
 import { tableHeader, tableRow } from "./OrderHistoryTable.style";
-import { Card } from "../../../components";
 
 /**
  * The Order History Table Row component
  * @param {Object} props props
  * @returns {JSX}
  */
-export const TableRow = props => /*#__PURE__*/React.createElement("tr", {
-  key: props.orderNumber,
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TableRow = props => /*#__PURE__*/_jsxs("tr", {
   className: tableRow,
-  onClick: props.openDetails
-}, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(I18n.Date, {
-  timestamp: new Date(props.submitDate).getTime(),
-  format: "short"
-}), "\xA0", /*#__PURE__*/React.createElement(I18n.Time, {
-  timestamp: new Date(props.submitDate).getTime(),
-  format: "short"
-})), /*#__PURE__*/React.createElement("td", null, props.orderNumber), /*#__PURE__*/React.createElement("td", null, getTranslatedOrderStatus(props.status)), /*#__PURE__*/React.createElement("td", {
-  align: "right"
-}, /*#__PURE__*/React.createElement(I18n.Number, {
-  number: props.lineItemCount,
-  fractions: 0
-})), /*#__PURE__*/React.createElement("td", {
-  align: "right"
-}, /*#__PURE__*/React.createElement(I18n.Price, {
-  currency: props.currencyCode,
-  price: props.total
-})));
+  onClick: props.openDetails,
+  children: [/*#__PURE__*/_jsxs("td", {
+    children: [/*#__PURE__*/_jsx(I18n.Date, {
+      timestamp: new Date(props.submitDate).getTime(),
+      format: "short"
+    }), "\xA0", /*#__PURE__*/_jsx(I18n.Time, {
+      timestamp: new Date(props.submitDate).getTime(),
+      format: "short"
+    })]
+  }), /*#__PURE__*/_jsx("td", {
+    children: props.orderNumber
+  }), /*#__PURE__*/_jsx("td", {
+    children: getTranslatedOrderStatus(props.status)
+  }), /*#__PURE__*/_jsx("td", {
+    align: "right",
+    children: /*#__PURE__*/_jsx(I18n.Number, {
+      number: props.lineItemCount,
+      fractions: 0
+    })
+  }), /*#__PURE__*/_jsx("td", {
+    align: "right",
+    children: /*#__PURE__*/_jsx(I18n.Price, {
+      currency: props.currencyCode,
+      price: props.total
+    })
+  })]
+}, props.orderNumber);
 /**
  * The Order History Table component
  * @param {Object} props props
@@ -39,16 +48,30 @@ export const TableRow = props => /*#__PURE__*/React.createElement("tr", {
  */
 export const Table = ({
   children
-}) => /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
-  className: tableHeader
-}, /*#__PURE__*/React.createElement("th", {
-  align: "left"
-}, i18n.text('orders.header.date')), /*#__PURE__*/React.createElement("th", {
-  align: "left"
-}, i18n.text('orders.header.orderNumber')), /*#__PURE__*/React.createElement("th", {
-  align: "left"
-}, i18n.text('orders.header.status')), /*#__PURE__*/React.createElement("th", {
-  align: "right"
-}, i18n.text('orders.header.lineItemCount')), /*#__PURE__*/React.createElement("th", {
-  align: "right"
-}, i18n.text('orders.header.total')))), /*#__PURE__*/React.createElement("tbody", null, children)));
+}) => /*#__PURE__*/_jsx(Card, {
+  children: /*#__PURE__*/_jsxs("table", {
+    children: [/*#__PURE__*/_jsx("thead", {
+      children: /*#__PURE__*/_jsxs("tr", {
+        className: tableHeader,
+        children: [/*#__PURE__*/_jsx("th", {
+          align: "left",
+          children: i18n.text('orders.header.date')
+        }), /*#__PURE__*/_jsx("th", {
+          align: "left",
+          children: i18n.text('orders.header.orderNumber')
+        }), /*#__PURE__*/_jsx("th", {
+          align: "left",
+          children: i18n.text('orders.header.status')
+        }), /*#__PURE__*/_jsx("th", {
+          align: "right",
+          children: i18n.text('orders.header.lineItemCount')
+        }), /*#__PURE__*/_jsx("th", {
+          align: "right",
+          children: i18n.text('orders.header.total')
+        })]
+      })
+    }), /*#__PURE__*/_jsx("tbody", {
+      children: children
+    })]
+  })
+});

package/orders/providers/OrderDetailsPrivateProvider.js

@@ -8,6 +8,7 @@ import Context from "./OrderDetailsProvider.context";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const OrderDetailsProvider = ({
   order,
   orderNumber,
@@ -52,9 +53,10 @@ const OrderDetailsProvider = ({
     fetchOrderDetails,
     cancelOrder: handleCancel
   }), [order, isLoading, shopSettings.supportedCountries, shopSettings.countrySortOrder, userLocation, fetchOrderDetails, handleCancel]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: children
+  });
 };
 OrderDetailsProvider.defaultProps = {
   children: null,

package/orders/providers/OrderDetailsProvider.js

@@ -6,6 +6,7 @@ import { useFormState } from '@shopgate/engage/core/hooks/useFormState';
 import { authenticateConstraints } from "./OrderDetailsProvider.constraints";
 import connect from "./OrderDetailsProvider.connector";
 import Context from "./OrderDetailsProvider.context";
+import { jsx as _jsx } from "react/jsx-runtime";
 const defaultFormState = {
   email: '',
   phone: ''
@@ -41,7 +42,7 @@ const OrderDetailsProvider = ({
   const [showForm, setShowForm] = useState(!isUserLoggedIn);
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
-  const orderTokenCookie = [`shopgate_order_token_${orderId}`];
+  const orderTokenCookie = useMemo(() => [`shopgate_order_token_${orderId}`], [orderId]);
   const [cookies, setCookie] = useCookies([orderTokenCookie]);
   const orderToken = cookies[orderTokenCookie];
 
@@ -161,9 +162,10 @@ const OrderDetailsProvider = ({
     cancelOrder: handleCancel,
     errorMessage
   }), [authenticateFormState.setValues, authenticateFormState.validationErrors, fetchOrderDetails, handleCancel, handleSubmit, isUserLoggedIn, showForm, isLoading, order, shopSettings.supportedCountries, shopSettings.countrySortOrder, userLocation, errorMessage]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: children
+  });
 };
 OrderDetailsProvider.defaultProps = {
   children: null,

package/orders/providers/OrderHistoryProvider.js

@@ -8,6 +8,7 @@ import { getOrderDetailsRoute } from "../helpers/orderDetails";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const OrderHistoryProvider = ({
   orders,
   fetchOrderHistory,
@@ -25,9 +26,10 @@ const OrderHistoryProvider = ({
     totalOrderCount,
     fetchOrderHistory
   }), [fetchOrderHistory, historyPush, orders, totalOrderCount]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: children
+  });
 };
 OrderHistoryProvider.defaultProps = {
   children: null,

package/orders/reducers/orders.js

@@ -24,7 +24,7 @@ const orders = (state = defaultState, action) => {
       case RECEIVE_ORDER_HISTORY:
         {
           draft.isFetching = false;
-          draft.orders = [...draft.orders.slice(0, action.offset), ...action.orders.map(order => order.orderNumber)];
+          draft.orders = [].concat(draft.orders.slice(0, action.offset), action.orders.map(order => order.orderNumber));
           draft.totalOrderCount = action.totalOrderCount;
           break;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.30.0-alpha.8",
+  "version": "7.30.0-beta.1",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,25 +17,23 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.30.0-alpha.8",
-    "@shopgate/pwa-common-commerce": "7.30.0-alpha.8",
-    "@shopgate/pwa-core": "7.30.0-alpha.8",
-    "@shopgate/pwa-ui-ios": "7.30.0-alpha.8",
-    "@shopgate/pwa-ui-material": "7.30.0-alpha.8",
-    "@shopgate/pwa-ui-shared": "7.30.0-alpha.8",
+    "@shopgate/pwa-common": "7.30.0-beta.1",
+    "@shopgate/pwa-common-commerce": "7.30.0-beta.1",
+    "@shopgate/pwa-core": "7.30.0-beta.1",
+    "@shopgate/pwa-ui-ios": "7.30.0-beta.1",
+    "@shopgate/pwa-ui-material": "7.30.0-beta.1",
+    "@shopgate/pwa-ui-shared": "7.30.0-beta.1",
     "@stripe/react-stripe-js": "^1.16.5",
-    "@stripe/stripe-js": "^1.3.1",
+    "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",
-    "babel-plugin-transform-es3-member-expression-literals": "^6.8.0",
-    "babel-plugin-transform-es3-property-literals": "^6.8.0",
     "color": "^3.1.2",
-    "focus-trap-react": "^11.0.3",
+    "focus-trap-react": "^10.3.1",
     "immer": "^8.0.1",
     "intersection-observer": "^0.6.0",
     "leaflet": "^1.8.0",
     "leaflet-gesture-handling": "^1.2.2",
     "lodash": "^4.17.21",
-    "moment": "^2.27.0",
+    "moment": "^2.30.1",
     "react-helmet": "^6.1.0",
     "react-leaflet": "^3.2.5",
     "react-phone-number-input": "^3.2.16",
@@ -47,10 +45,10 @@
   },
   "devDependencies": {
     "classnames": "2.5.1",
-    "jest-mock-console": "^0.4.2",
+    "jest-mock-console": "^2.0.0",
     "lodash": "^4.17.21",
     "prop-types": "~15.8.1",
-    "react": "~16.14.0",
+    "react": "^17.0.2",
     "react-redux": "^8.1.3",
     "redux": "^4.2.1",
     "redux-mock-store": "^1.5.4",

package/page/components/NotFound.js

@@ -6,6 +6,7 @@ import { I18n } from '@shopgate/engage/components';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { historyPop, historyResetTo } from '@shopgate/pwa-common/actions/router';
 import { i18n, INDEX_PATH } from "../../core";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -48,28 +49,32 @@ const NotFound = () => {
   const handleHome = useCallback(() => {
     dispatch(historyResetTo(INDEX_PATH));
   }, [dispatch]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.wrapper
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    className: styles.text,
-    string: "page.not_found"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.buttonContainer
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    onClick: handleBack,
-    className: styles.button,
-    type: "secondary"
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "common.back"
-  })), /*#__PURE__*/React.createElement(RippleButton, {
-    onClick: handleHome,
-    className: styles.button,
-    type: "secondary"
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "navigation.back",
-    params: {
-      title: i18n.text('navigation.home')
-    }
-  }))));
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.wrapper,
+    children: [/*#__PURE__*/_jsx(I18n.Text, {
+      className: styles.text,
+      string: "page.not_found"
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.buttonContainer,
+      children: [/*#__PURE__*/_jsx(RippleButton, {
+        onClick: handleBack,
+        className: styles.button,
+        type: "secondary",
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "common.back"
+        })
+      }), /*#__PURE__*/_jsx(RippleButton, {
+        onClick: handleHome,
+        className: styles.button,
+        type: "secondary",
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "navigation.back",
+          params: {
+            title: i18n.text('navigation.home')
+          }
+        })
+      })]
+    })]
+  });
 };
 export default NotFound;