@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

package/product/components/UnitQuantityPicker/UnitQuantityPickerWithSection.js

@@ -9,6 +9,7 @@ import { Section } from '@shopgate/engage/a11y/components';
 import { makeGetCurrentProductPropertyByLabel } from '@shopgate/engage/product/selectors/product';
 import ProductUnitQuantityPicker from "./ProductUnitQuantityPicker";
 import OrderQuantityHint from "../OrderQuantityHint";
+import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   quantityPicker: css({
     display: 'flex',
@@ -50,20 +51,22 @@ const UnitQuantityPickerWithSection = ({
   if (!show) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Section, {
-    title: "product.sections.quantity"
-  }, /*#__PURE__*/React.createElement(ProductUnitQuantityPicker, {
-    className: styles.quantityPicker,
-    classes: {
-      picker: styles.quantityPickerPicker
-    },
-    size: "large",
-    quantityLabel: quantityLabel,
-    hideHeadline: true
-  }, /*#__PURE__*/React.createElement(OrderQuantityHint, {
-    productId: variantId || productId,
-    className: styles.quantityHint
-  })));
+  return /*#__PURE__*/_jsx(Section, {
+    title: "product.sections.quantity",
+    children: /*#__PURE__*/_jsx(ProductUnitQuantityPicker, {
+      className: styles.quantityPicker,
+      classes: {
+        picker: styles.quantityPickerPicker
+      },
+      size: "large",
+      quantityLabel: quantityLabel,
+      hideHeadline: true,
+      children: /*#__PURE__*/_jsx(OrderQuantityHint, {
+        productId: variantId || productId,
+        className: styles.quantityHint
+      })
+    })
+  });
 };
 UnitQuantityPickerWithSection.defaultProps = {
   productId: null,

package/product/hocs/withMapPricing.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable react/prop-types */
 import React from 'react';
 import TimeBoundary from "../../components/TimeBoundary";
@@ -8,42 +7,55 @@ import { useWidgetSettings } from "../../core";
  * @param {Function|React.Component} PriceComponent price component with product price shape
  * @returns {Function}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const withMapPricing = PriceComponent => props => {
   const settings = useWidgetSettings('@shopgate/engage/product/MapPrice');
   if (!settings.show) {
-    return /*#__PURE__*/React.createElement(PriceComponent, props);
+    return /*#__PURE__*/_jsx(PriceComponent, {
+      ...props
+    });
   }
 
   // price is null OR no map pricing
   if (!props.price || !props.price.mapPricing) {
-    return /*#__PURE__*/React.createElement(PriceComponent, props);
+    return /*#__PURE__*/_jsx(PriceComponent, {
+      ...props
+    });
   }
 
   // Same logic as in selector
   const mapPrice = [].concat(props.price.mapPricing)[0];
   if (!mapPrice) {
-    return /*#__PURE__*/React.createElement(PriceComponent, props);
+    return /*#__PURE__*/_jsx(PriceComponent, {
+      ...props
+    });
   }
 
   // Show original when map is equal or less
   if (props.price.unitPrice >= mapPrice.price) {
-    return /*#__PURE__*/React.createElement(PriceComponent, props);
+    return /*#__PURE__*/_jsx(PriceComponent, {
+      ...props
+    });
   }
-  return /*#__PURE__*/React.createElement(TimeBoundary, {
+  return /*#__PURE__*/_jsx(TimeBoundary, {
     start: new Date(mapPrice.startDate),
-    end: new Date(mapPrice.endDate)
-  }, ({
-    between
-  }) => {
-    if (!between) {
-      return /*#__PURE__*/React.createElement(PriceComponent, props);
-    }
-    return /*#__PURE__*/React.createElement(PriceComponent, _extends({}, props, {
-      price: {
-        ...props.price,
-        unitPriceStriked: mapPrice.price
+    end: new Date(mapPrice.endDate),
+    children: ({
+      between
+    }) => {
+      if (!between) {
+        return /*#__PURE__*/_jsx(PriceComponent, {
+          ...props
+        });
       }
-    }));
+      return /*#__PURE__*/_jsx(PriceComponent, {
+        ...props,
+        price: {
+          ...props.price,
+          unitPriceStriked: mapPrice.price
+        }
+      });
+    }
   });
 };
 export default withMapPricing;

package/product/hocs/withPriceCalculation.js

@@ -7,10 +7,13 @@ import withMapPricing from "./withMapPricing";
  * @param {Function|React.Component} PriceComponent price component with product price shape
  * @returns {Function}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const withPriceCalculation = PriceComponent => props => {
   // price is null
   if (!props.price) {
-    return /*#__PURE__*/React.createElement(PriceComponent, props);
+    return /*#__PURE__*/_jsx(PriceComponent, {
+      ...props
+    });
   }
 
   // HOC for map price
@@ -18,7 +21,9 @@ const withPriceCalculation = PriceComponent => props => {
     return withMapPricing(PriceComponent)(props);
   }
   // Fallback to default
-  return /*#__PURE__*/React.createElement(PriceComponent, props);
+  return /*#__PURE__*/_jsx(PriceComponent, {
+    ...props
+  });
 };
 export default withPriceCalculation;
 /* eslint-enable react/prop-types */

package/product/hocs/withProductListEntry.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import ProductListEntryContext from "../providers/ProductListEntry/context";
 
@@ -9,15 +8,19 @@ import ProductListEntryContext from "../providers/ProductListEntry/context";
  * @param {Function} WrappedComponent The react component to wrap.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function withProductListEntry(WrappedComponent) {
   /**
    * The actual HOC.
    * @param {Object} props The component props.
    * @returns {JSX}
    */
-  const WithApp = props => /*#__PURE__*/React.createElement(ProductListEntryContext.Consumer, null, contextValue => /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
-    productListEntry: contextValue
-  })));
+  const WithApp = props => /*#__PURE__*/_jsx(ProductListEntryContext.Consumer, {
+    children: contextValue => /*#__PURE__*/_jsx(WrappedComponent, {
+      ...props,
+      productListEntry: contextValue
+    })
+  });
   const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WithApp.displayName = `WithProductListEntry(${displayName})`;
   return WithApp;

package/product/hocs/withProductListEntryProduct.js

@@ -12,6 +12,7 @@ import { getProduct } from "../selectors/product";
  * product into the wrapped component.
  * @returns {Function}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function withProductListEntryProduct(WrappedComponent, options = {}) {
   const injectedProp = options.prop || 'product';
   /**
@@ -32,6 +33,8 @@ export default function withProductListEntryProduct(WrappedComponent, options =
   const connector = connect(makeMapStateToProps);
   return props => {
     const Connected = withProductListEntry(connector(WrappedComponent));
-    return /*#__PURE__*/React.createElement(Connected, props);
+    return /*#__PURE__*/_jsx(Connected, {
+      ...props
+    });
   };
 }

package/product/hocs/withProductListType.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import ProductListTypeContext from "../providers/ProductListType/context";
 
@@ -9,15 +8,19 @@ import ProductListTypeContext from "../providers/ProductListType/context";
  * @param {Function} WrappedComponent The react component to wrap.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function withProductListType(WrappedComponent) {
   /**
    * The actual HOC.
    * @param {Object} props The component props.
    * @returns {JSX}
    */
-  const WithApp = props => /*#__PURE__*/React.createElement(ProductListTypeContext.Consumer, null, contextValue => /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
-    productListType: contextValue
-  })));
+  const WithApp = props => /*#__PURE__*/_jsx(ProductListTypeContext.Consumer, {
+    children: contextValue => /*#__PURE__*/_jsx(WrappedComponent, {
+      ...props,
+      productListType: contextValue
+    })
+  });
   const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WithApp.displayName = `WithProductListType(${displayName})`;
   return WithApp;

package/product/providers/ProductListEntry/index.js

@@ -14,6 +14,7 @@ import Context from "./context";
  * @param {string} param.productId Product identifier.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function ProductListEntryProvider({
   children,
   productId
@@ -27,9 +28,10 @@ function ProductListEntryProvider({
     productListSubType: subType,
     productId
   }), [productId, subType, type]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: children
+  });
 }
 ProductListEntryProvider.defaultProps = {
   children: null

package/product/providers/ProductListType/index.js

@@ -17,6 +17,7 @@ import Context from "./context";
  * @param {Object} param.meta Optional meta information that can be used by child components
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function ProductListTypeProvider({
   children,
   type,
@@ -28,9 +29,10 @@ function ProductListTypeProvider({
     subType,
     meta
   }), [meta, subType, type]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: children
+  });
 }
 ProductListTypeProvider.defaultProps = {
   children: null,

package/product/selectors/helpers/wrapMemoizedSelector.js

@@ -4,8 +4,8 @@
  * @returns {Function}
  */
 export const wrapMemoizedSelector = selector => (...args) => {
-  const result = selector(...args);
-  if (selector(...args) !== result) {
+  const result = selector.apply(void 0, args);
+  if (selector.apply(void 0, args) !== result) {
     throw new Error('Memoization check failed.');
   }
   return result;

package/push-opt-in/components/PushOptInModal/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import classNames from 'classnames';
@@ -14,6 +14,7 @@ import { svgToDataUrl } from "../../../core";
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PushOptInModal = ({
   isPushOptInModalVisible,
   allowPushOptIn,
@@ -40,56 +41,65 @@ const PushOptInModal = ({
   }, [modalImageSVG, modalImageURL]);
 
   // Button event handlers are throttled to prevent multiple clicks
-  const handleAllowPushOptIn = useCallback(throttle(allowPushOptIn, 1000, {
+  const handleAllowPushOptIn = useMemo(() => throttle(allowPushOptIn, 1000, {
     leading: true,
     trailing: false
-  }), []);
-  const handleDenyPushOptIn = useCallback(throttle(denyPushOptIn, 1000, {
+  }), [allowPushOptIn]);
+  const handleDenyPushOptIn = useMemo(() => throttle(denyPushOptIn, 1000, {
     leading: true,
     trailing: false
-  }), []);
+  }), [denyPushOptIn]);
+  useEffect(() => () => {
+    handleAllowPushOptIn.cancel();
+    handleDenyPushOptIn.cancel();
+  }, [handleAllowPushOptIn, handleDenyPushOptIn]);
   if (!isPushOptInModalVisible) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Modal, {
+  return /*#__PURE__*/_jsx(Modal, {
     classes: {
       content: styles.modalContent,
       layout: styles.modalLayout
-    }
-  }, /*#__PURE__*/React.createElement(Grid, {
-    className: classNames(styles.container, 'push-opt-in-modal__container'),
-    role: "alertdialog",
-    "aria-modal": true,
-    "aria-labelledby": "pushOptInDialogTitle",
-    "aria-describedby": "pushOptInDialogMessage"
-  }, /*#__PURE__*/React.createElement(Grid.Item, {
-    className: styles.item
-  }, /*#__PURE__*/React.createElement("img", {
-    src: imageSRC,
-    className: classNames(styles.image, 'push-opt-in-modal__image'),
-    alt: "",
-    "aria-hidden": "true"
-  }), /*#__PURE__*/React.createElement(I18n.Text, {
-    className: classNames(styles.title, 'push-opt-in-modal__title'),
-    string: modalTitle || 'pushOptInModal.title',
-    id: "pushOptInDialogTitle"
-  }), /*#__PURE__*/React.createElement(I18n.Text, {
-    className: classNames('push-opt-in-modal__message'),
-    string: modalMessage || 'pushOptInModal.message',
-    id: "pushOptInDialogMessage"
-  }), /*#__PURE__*/React.createElement(Button, {
-    onClick: handleAllowPushOptIn,
-    type: "primary",
-    className: classNames(styles.button, 'push-opt-in-modal__button-allow')
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: modalButtonAllow || 'pushOptInModal.buttonAllow'
-  })), /*#__PURE__*/React.createElement(Button, {
-    onClick: handleDenyPushOptIn,
-    type: "plain",
-    className: classNames(styles.button, 'push-opt-in-modal__button-deny')
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: modalButtonDeny || 'pushOptInModal.buttonDeny',
-    className: styles.buttonText
-  })))));
+    },
+    children: /*#__PURE__*/_jsx(Grid, {
+      className: classNames(styles.container, 'push-opt-in-modal__container'),
+      role: "alertdialog",
+      "aria-modal": true,
+      "aria-labelledby": "pushOptInDialogTitle",
+      "aria-describedby": "pushOptInDialogMessage",
+      children: /*#__PURE__*/_jsxs(Grid.Item, {
+        className: styles.item,
+        children: [/*#__PURE__*/_jsx("img", {
+          src: imageSRC,
+          className: classNames(styles.image, 'push-opt-in-modal__image'),
+          alt: "",
+          "aria-hidden": "true"
+        }), /*#__PURE__*/_jsx(I18n.Text, {
+          className: classNames(styles.title, 'push-opt-in-modal__title'),
+          string: modalTitle || 'pushOptInModal.title',
+          id: "pushOptInDialogTitle"
+        }), /*#__PURE__*/_jsx(I18n.Text, {
+          className: classNames('push-opt-in-modal__message'),
+          string: modalMessage || 'pushOptInModal.message',
+          id: "pushOptInDialogMessage"
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: handleAllowPushOptIn,
+          type: "primary",
+          className: classNames(styles.button, 'push-opt-in-modal__button-allow'),
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: modalButtonAllow || 'pushOptInModal.buttonAllow'
+          })
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: handleDenyPushOptIn,
+          type: "plain",
+          className: classNames(styles.button, 'push-opt-in-modal__button-deny'),
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: modalButtonDeny || 'pushOptInModal.buttonDeny',
+            className: styles.buttonText
+          })
+        })]
+      })
+    })
+  });
 };
 export default connect(PushOptInModal);

package/registration/components/GuestRegistration/GuestRegistration.js

@@ -7,16 +7,19 @@ import GuestCheckoutContent from "./GuestRegistrationContent";
  * The GuestRegistration component.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const GuestRegistration = () => {
   const formContainerRef = useRef(null);
   const {
     id
   } = useRoute();
-  return /*#__PURE__*/React.createElement(GuestRegistrationProvider, {
+  return /*#__PURE__*/_jsx(GuestRegistrationProvider, {
     formContainerRef: formContainerRef,
-    routeId: id
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: formContainerRef
-  }, /*#__PURE__*/React.createElement(GuestCheckoutContent, null)));
+    routeId: id,
+    children: /*#__PURE__*/_jsx("div", {
+      ref: formContainerRef,
+      children: /*#__PURE__*/_jsx(GuestCheckoutContent, {})
+    })
+  });
 };
 export default GuestRegistration;

package/registration/components/GuestRegistration/GuestRegistrationContent.js

@@ -9,6 +9,7 @@ import RegistrationFormToggle from "../Registration/RegistrationFormToggle";
 import RegistrationFormActions from "../Registration/RegistrationFormActions";
 import RegistrationFormPickup from "./GuestRegistrationFormPickup";
 import { useRegistration } from "../../hooks";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -40,22 +41,25 @@ const GuestRegistrationContent = () => {
     }
     return 'titles.checkout';
   }, [guestRegistrationEditMode, orderReserveOnly]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(CheckoutHeader, {
-    stepFrom: !guestRegistrationEditMode ? 1 : null,
-    stepTo: !guestRegistrationEditMode ? 2 : null,
-    headline: headline
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.container
-  }, /*#__PURE__*/React.createElement(RegistrationFormBilling, {
-    isGuest: true
-  }), /*#__PURE__*/React.createElement(RegistrationFormToggle, {
-    isGuest: true
-  }), /*#__PURE__*/React.createElement(RegistrationFormShipping, {
-    isGuest: true
-  }), /*#__PURE__*/React.createElement(RegistrationFormExtra, {
-    isGuest: true
-  }), /*#__PURE__*/React.createElement(RegistrationFormPickup, null)), /*#__PURE__*/React.createElement(RegistrationFormActions, {
-    isGuest: true
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(CheckoutHeader, {
+      stepFrom: !guestRegistrationEditMode ? 1 : null,
+      stepTo: !guestRegistrationEditMode ? 2 : null,
+      headline: headline
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.container,
+      children: [/*#__PURE__*/_jsx(RegistrationFormBilling, {
+        isGuest: true
+      }), /*#__PURE__*/_jsx(RegistrationFormToggle, {
+        isGuest: true
+      }), /*#__PURE__*/_jsx(RegistrationFormShipping, {
+        isGuest: true
+      }), /*#__PURE__*/_jsx(RegistrationFormExtra, {
+        isGuest: true
+      }), /*#__PURE__*/_jsx(RegistrationFormPickup, {})]
+    }), /*#__PURE__*/_jsx(RegistrationFormActions, {
+      isGuest: true
+    })]
+  });
 };
 export default GuestRegistrationContent;

package/registration/components/GuestRegistration/GuestRegistrationFormPickup.js

@@ -7,6 +7,7 @@ import { ELEMENT_ID_PICKUP_CONTACT } from "../../constants";
 import generateFormConfig from "./GuestRegistrationFormPickup.config";
 import Section from "../../../checkout/components/Checkout/CheckoutSection";
 import { useRegistration } from "../../hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -65,19 +66,21 @@ const GuestRegistrationFormPickup = () => {
   if (!isPickupContactSelectionEnabled) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement(Section, {
-    title: headline,
-    hasForm: true,
-    id: ELEMENT_ID_PICKUP_CONTACT
-  }, /*#__PURE__*/React.createElement(FormBuilder, {
-    className: styles.form,
-    name: "GuestForm",
-    config: formConfig,
-    defaults: defaultPickupFormState,
-    validationErrors: pickupFormValidationErrors,
-    handleUpdate: handleUpdate
-  })));
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.root,
+    children: /*#__PURE__*/_jsx(Section, {
+      title: headline,
+      hasForm: true,
+      id: ELEMENT_ID_PICKUP_CONTACT,
+      children: /*#__PURE__*/_jsx(FormBuilder, {
+        className: styles.form,
+        name: "GuestForm",
+        config: formConfig,
+        defaults: defaultPickupFormState,
+        validationErrors: pickupFormValidationErrors,
+        handleUpdate: handleUpdate
+      })
+    })
+  });
 };
 export default GuestRegistrationFormPickup;

package/registration/components/Registration/Registration.js

@@ -6,12 +6,14 @@ import RegistrationContent from "./RegistrationContent";
  * The Registration component.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Registration = () => {
   const formContainerRef = useRef(null);
-  return /*#__PURE__*/React.createElement(RegistrationProvider, {
-    formContainerRef: formContainerRef
-  }, /*#__PURE__*/React.createElement(RegistrationContent, {
-    ref: formContainerRef
-  }));
+  return /*#__PURE__*/_jsx(RegistrationProvider, {
+    formContainerRef: formContainerRef,
+    children: /*#__PURE__*/_jsx(RegistrationContent, {
+      ref: formContainerRef
+    })
+  });
 };
 export default Registration;

package/registration/components/Registration/RegistrationContent.js

@@ -13,18 +13,24 @@ import { useRegistration } from "../../hooks";
  * The Registration component.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const Registration = /*#__PURE__*/forwardRef((_, ref) => {
   const {
     registrationMode
   } = useRegistration();
   const renderSingleColumn = registrationMode === SHOP_SETTING_REGISTRATION_MODE_SIMPLE;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: container,
-    ref: ref
-  }, /*#__PURE__*/React.createElement("div", {
-    className: containerItem
-  }, !renderSingleColumn && /*#__PURE__*/React.createElement(RegistrationFormBase, null)), /*#__PURE__*/React.createElement("div", {
-    className: containerItem
-  }, renderSingleColumn && /*#__PURE__*/React.createElement(RegistrationFormBase, null), /*#__PURE__*/React.createElement(RegistrationFormBilling, null), /*#__PURE__*/React.createElement(RegistrationFormToggle, null), /*#__PURE__*/React.createElement(RegistrationFormShipping, null), /*#__PURE__*/React.createElement(RegistrationFormExtra, null))), /*#__PURE__*/React.createElement(RegistrationFormActions, null));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: container,
+      ref: ref,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: containerItem,
+        children: !renderSingleColumn && /*#__PURE__*/_jsx(RegistrationFormBase, {})
+      }), /*#__PURE__*/_jsxs("div", {
+        className: containerItem,
+        children: [renderSingleColumn && /*#__PURE__*/_jsx(RegistrationFormBase, {}), /*#__PURE__*/_jsx(RegistrationFormBilling, {}), /*#__PURE__*/_jsx(RegistrationFormToggle, {}), /*#__PURE__*/_jsx(RegistrationFormShipping, {}), /*#__PURE__*/_jsx(RegistrationFormExtra, {})]
+      })]
+    }), /*#__PURE__*/_jsx(RegistrationFormActions, {})]
+  });
 });
 export default Registration;

package/registration/components/Registration/RegistrationFormActions.js

@@ -10,6 +10,7 @@ import { submitButton, submitButtonContainer } from "./RegistrationContent.style
  * @param {Object} props The component props
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const RegisterFormActions = ({
   isGuest
 }) => {
@@ -28,14 +29,16 @@ const RegisterFormActions = ({
     }
     return 'registration.create_account';
   }, [guestRegistrationEditMode, isGuest, orderNeedsPayment]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: submitButtonContainer
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    type: "secondary",
-    onClick: handleSubmit,
-    disabled: isLocked,
-    className: submitButton
-  }, i18n.text(label)));
+  return /*#__PURE__*/_jsx("div", {
+    className: submitButtonContainer,
+    children: /*#__PURE__*/_jsx(RippleButton, {
+      type: "secondary",
+      onClick: handleSubmit,
+      disabled: isLocked,
+      className: submitButton,
+      children: i18n.text(label)
+    })
+  });
 };
 RegisterFormActions.defaultProps = {
   isGuest: false

package/registration/components/Registration/RegistrationFormBase.js

@@ -9,6 +9,7 @@ import { form, section } from "./RegistrationContent.style";
  * The RegistrationFormBase component.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const RegistrationFormBase = () => {
   const {
     defaultBaseFormState,
@@ -22,17 +23,18 @@ const RegistrationFormBase = () => {
   const handleUpdate = useCallback(values => {
     updateBaseForm(values);
   }, [updateBaseForm]);
-  return /*#__PURE__*/React.createElement(Section, {
+  return /*#__PURE__*/_jsx(Section, {
     title: "registration.headlines.create_new_account",
     className: section,
-    hasForm: true
-  }, /*#__PURE__*/React.createElement(FormBuilder, {
-    className: form,
-    name: "RegistrationBase",
-    config: formConfig,
-    defaults: defaultBaseFormState,
-    validationErrors: baseFormValidationErrors,
-    handleUpdate: handleUpdate
-  }));
+    hasForm: true,
+    children: /*#__PURE__*/_jsx(FormBuilder, {
+      className: form,
+      name: "RegistrationBase",
+      config: formConfig,
+      defaults: defaultBaseFormState,
+      validationErrors: baseFormValidationErrors,
+      handleUpdate: handleUpdate
+    })
+  });
 };
 export default RegistrationFormBase;