@shopgate/engage 7.30.0-alpha.8 → 7.30.0-alpha.9

package/cart/components/CartItem/CartItemProduct.js

@@ -22,7 +22,6 @@ const messageStyles = {
 
 /**
  * The CartProduct component.
- * @param {Object} props The component props.
  * @returns {JSX}
  */
 const CartItemProduct = () => {

package/cart/components/CartItem/CartItemProductLayoutWide.js

@@ -15,7 +15,6 @@ import { useCartItem, useCartItemProduct } from "./CartItem.hooks";
 import { container, containerInactive, imageColumn, detailsColumn, priceColumnWide, productName, productProperties, column, quantityPicker, quantityPickerDisabled, price, priceInfo, priceListEntry, priceListPromo, contextMenu, messageContainer, messageContainerRope } from "./CartItemProductLayoutWide.style";
 
 /**
- * @param {Object} props The component properties.
  * @returns {JSX}
  */
 const CartItemProductLayoutWide = () => {

package/cart/components/CartItem/CartItemProductLayoutWide.style.js

@@ -42,11 +42,11 @@ export const locationColumn = css(column, {
   lineHeight: '1.625rem',
   fontWeight: 500,
   flexGrow: 2
-});
+}).toString();
 export const statusColumn = css(column, {
   fontSize: '1.25rem',
   lineHeight: '1.625rem'
-});
+}).toString();
 export const productName = css({
   fontSize: '1.25rem',
   lineHeight: '1.5rem',

package/cart/components/CartItem/CartItemProductLayoutWideFulfillmentLabel.js

@@ -5,8 +5,7 @@ import { label } from "./CartItemProductLayoutWideFulfillmentLabel.style";
 import { useCartItemProduct } from "./CartItem.hooks";
 
 /**
- * @param {Object} props The component props
- * @returns {JSX}
+ * @returns {JSX.Element}
  */
 const CartItemProductLayoutWideFulfillmentLabel = () => {
   const {

package/cart/components/CartItem/CartItemProductLayoutWideFulfillmentLabel.style.js

@@ -7,4 +7,4 @@ export const label = css({
   color: `var(--color-secondary, ${colors.accent})`,
   fontSize: '0.875rem',
   marginTop: 'auto'
-});
+}).toString();

package/cart/components/CartItem/CartItemProductLayoutWideOrderDetails.js

@@ -5,7 +5,7 @@ import { useCartItem, useCartItemProduct } from "./CartItem.hooks";
 import { column, locationColumn, statusColumn, quantityPickerDisabled } from "./CartItemProductLayoutWide.style";
 
 /**
- * @returns {JSX}
+ * @returns {JSX.Element}
  */
 const CartItemProductLayoutWide = () => {
   const {

package/cart/components/CartItem/CartItemProductLayoutWideRemoveItem.js

@@ -4,8 +4,7 @@ import { button, ripple } from "./CartItemProductLayoutWideRemoveItem.style";
 import { useCartItemProduct } from "./CartItem.hooks";
 
 /**
- * @param {Object} props The component props
- * @returns {JSX}
+ * @returns {JSX.Element}
  */
 const CartItemProductLayoutWideRemoveItem = () => {
   const {

package/cart/components/CartItem/CartItemProductPriceCaption.js

@@ -9,7 +9,7 @@ import { useCartItemProduct } from "./CartItem.hooks";
 import { caption } from "./CartItemProductPriceCaption.style";
 
 /**
- * @returns {JSX}
+ * @returns {JSX.Element}
  */
 const CartItemProductPriceCaption = ({
   className

package/cart/components/CartItem/CartItemProductPriceList.js

@@ -27,7 +27,10 @@ const styles = {
 
 /**
  * @param {Object} props The component props
- * @returns {JSX}
+ * @param {Object} [props.classes] CSS class names
+ * @param {boolean} [props.isSubtotal] Whether to show subtotal prices
+ * @param {boolean} [props.showLabels] Whether to show promotion labels
+ * @returns {JSX.Element}
  */
 const CartItemProductPriceList = ({
   classes,

package/cart/components/CartItem/CartItemProductPriceListPromotion.js

@@ -73,7 +73,9 @@ const mapDispatchToProps = dispatch => ({
 
 /**
  * @param {Object} props The component props
- * @returns {JSX}
+ * @param {string} props.text The promotional text
+ * @param {Function} props.showText The function to show the promotional text
+ * @returns {JSX.Element}
  */
 const PromotionalTextInfoIcon = ({
   text,

package/cart/components/CartItem/CartItemSubstitution.js

@@ -10,7 +10,9 @@ import { root } from "./CartItemSubstitution.style";
 /**
  * Renders the cart reservation card label.
  * @param {Object} props The component props.
- * @returns {JSX}
+ * @param {Function} props.setSubstitutionAllowed The action to set substitution allowed flag.
+ * @param {boolean} props.editable Whether the substitution option is editable.
+ * @returns {JSX.Element}
  */
 const CartItemSubstitution = ({
   setSubstitutionAllowed,

package/checkout/providers/CheckoutProvider.js

@@ -72,6 +72,7 @@ const initialOptInFormState = {
 
 /**
  * Checkout Provider
+ * @param {CheckoutProviderProps} props The component props.
  * @returns {JSX.Element}
  */
 const CheckoutProvider = ({
@@ -448,13 +449,18 @@ const CheckoutProvider = ({
   }, children);
 };
 CheckoutProvider.defaultProps = {
+  billingAddress: null,
+  campaignAttribution: null,
+  fulfillmentSlot: null,
+  isGuestCheckout: false,
+  isPickupContactSelectionEnabled: false,
+  isShippingAddressSelectionEnabled: false,
+  order: null,
   orderInitialized: false,
   orderReadOnly: false,
   orderReserveOnly: false,
-  isShippingAddressSelectionEnabled: false,
-  isPickupContactSelectionEnabled: false,
-  isGuestCheckout: false,
-  campaignAttribution: null
+  pickupAddress: null,
+  shippingAddress: null
 };
 export default connect(CheckoutProvider);
 /* eslint-enable no-unused-expressions */

package/components/SideNavigation/SideNavigationNestedItem.js

@@ -1,11 +1,18 @@
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import ArrowDrop from '@shopgate/pwa-ui-shared/icons/ArrowDropIcon';
+import PropTypes from 'prop-types';
 import { chevronButton, chevronUp, chevronDown, open } from "./SideNavigationCategoriesItem.style";
 import SideNavigationItem from "./SideNavigationItem";
 
 /**
  * The SideNavigationCategoriesItem component
- * @returns {JSX}
+ * @param {Object} props The component props.
+ * @param {number} props.level The nesting level.
+ * @param {string} props.label The item label.
+ * @param {string} props.href The item href.
+ * @param {JSX.Element} props.children The nested items.
+ * @param {boolean} props.forceActive Whether the item should be forced open.
+ * @returns {JSX.Element}
  */
 const SideNavigationNestedItem = ({
   level,

package/filter/components/FilterPageContent/components/Selector/spec.js

@@ -7,11 +7,7 @@ jest.mock('@shopgate/engage/core', () => ({
     text: string => string
   }
 }));
-jest.mock('@shopgate/engage/components', () => ({
-  Accordion: ({
-    children
-  }) => children
-}));
+jest.mock('@shopgate/engage/components');
 jest.mock('@shopgate/engage/filter', () => ({
   FilterItem: ({
     children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.30.0-alpha.8",
+  "version": "7.30.0-alpha.9",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,17 +17,15 @@
   "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-alpha.9",
+    "@shopgate/pwa-common-commerce": "7.30.0-alpha.9",
+    "@shopgate/pwa-core": "7.30.0-alpha.9",
+    "@shopgate/pwa-ui-ios": "7.30.0-alpha.9",
+    "@shopgate/pwa-ui-material": "7.30.0-alpha.9",
+    "@shopgate/pwa-ui-shared": "7.30.0-alpha.9",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.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",
     "immer": "^8.0.1",
@@ -35,7 +33,7 @@
     "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,7 +45,7 @@
   },
   "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",

package/page/widgets/Button/Button.js

@@ -22,7 +22,8 @@ const ButtonWidget = () => {
     classes
   } = useStyles();
   const {
-    config
+    config,
+    isPreview
   } = useWidget();
   const {
     text,
@@ -32,12 +33,14 @@ const ButtonWidget = () => {
     push
   } = useNavigation();
   const handleClick = useCallback(e => {
-    e.stopPropagation();
     if (!link) return;
+    if (!isPreview) {
+      e.stopPropagation();
+    }
     push({
       pathname: link
     });
-  }, [link, push]);
+  }, [link, isPreview, push]);
   if (!text) return null;
   return /*#__PURE__*/React.createElement("div", {
     className: classes.root

package/product/components/Options/components/Content/spec.js

@@ -3,16 +3,18 @@ import { mount, shallow } from 'enzyme';
 import { PickerUtilize as Picker } from '@shopgate/engage/components';
 import Options from "./index";
 jest.mock('@shopgate/engage/components');
-jest.mock('@shopgate/engage/product/contexts', () => ({
-  ProductContext: {
-    Consumer: jest.fn(({
-      children
-    }) => children({
+jest.mock('@shopgate/engage/product/components', () => ({
+  PriceDifference: () => null
+}));
+jest.mock('@shopgate/engage/product/contexts', () => {
+  const ReactCopy = jest.requireActual('react');
+  return {
+    ProductContext: ReactCopy.createContext({
       setOption: jest.fn(),
       currency: 'EUR'
-    }))
-  }
-}));
+    })
+  };
+});
 
 // Mock the redux connect() method instead of providing a fake store.
 jest.mock("./connector", () => obj => {

package/product/components/ProductGrid/components/Item/components/ItemImage/spec.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import ItemImage from "./index";
-jest.mock('@shopgate/engage/components', () => ({
-  ProductImage: () => null
-}));
+jest.mock('@shopgate/engage/components');
+jest.mock('@shopgate/engage/product');
 describe('<ItemImage />', () => {
   it('should render', () => {
     const wrapper = shallow(/*#__PURE__*/React.createElement(ItemImage, {

package/product/components/ProductGrid/components/Item/components/ItemName/spec.js

@@ -4,6 +4,7 @@ import ItemName from "./index";
 jest.mock('@shopgate/engage/product', () => ({
   ProductName: () => null
 }));
+jest.mock('@shopgate/engage/components');
 const props = {
   productId: '1234',
   name: 'Foo'

package/product/components/ProductGrid/components/Item/components/ItemPrice/spec.js

@@ -5,11 +5,7 @@ import ItemPrice from "./index";
 jest.mock('@shopgate/engage/product', () => ({
   ProductGridPrice: () => null
 }));
-jest.mock('@shopgate/engage/components', () => ({
-  Portal: ({
-    children
-  }) => children
-}));
+jest.mock('@shopgate/engage/components');
 jest.mock('@shopgate/engage/category', () => ({
   PRODUCT_ITEM_PRICE: 'PRODUCT_ITEM_PRICE',
   PRODUCT_ITEM_PRICE_AFTER: 'PRODUCT_ITEM_PRICE_AFTER',