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

package/a11y/components/FocusTrap/index.js

@@ -1,2 +1,2 @@
-import { FocusTrap } from 'focus-trap-react';
+import FocusTrap from 'focus-trap-react';
 export default FocusTrap;

package/a11y/components/LiveMessage/index.js

@@ -10,18 +10,20 @@ import styles from "./styles";
  * @param {string} 'aria-live' The aria-live type.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const LiveMessage = ({
   message,
   params,
   'aria-live': ariaLive
-}) => /*#__PURE__*/React.createElement("div", {
+}) => /*#__PURE__*/_jsx("div", {
   className: styles,
   role: "log",
-  "aria-live": ariaLive
-}, /*#__PURE__*/React.createElement(I18n.Text, {
-  string: message,
-  params: params
-}));
+  "aria-live": ariaLive,
+  children: /*#__PURE__*/_jsx(I18n.Text, {
+    string: message,
+    params: params
+  })
+});
 LiveMessage.defaultProps = {
   'aria-live': 'polite',
   params: null

package/a11y/components/LiveMessenger/index.js

@@ -11,6 +11,7 @@ import { EVENT_LIVE_MESSAGE, LIVE_MESSAGE_TYPE_ASSERTIVE, LIVE_MESSAGE_TYPE_POLI
  * @param {string} id An optional id for the messenger.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const LiveMessenger = ({
   id
 }) => {
@@ -51,15 +52,17 @@ const LiveMessenger = ({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LiveMessage, {
-    "aria-live": "assertive",
-    message: assertive.message,
-    params: assertive.params
-  }), /*#__PURE__*/React.createElement(LiveMessage, {
-    "aria-live": "polite",
-    message: polite.message,
-    params: polite.params
-  }));
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx(LiveMessage, {
+      "aria-live": "assertive",
+      message: assertive.message,
+      params: assertive.params
+    }), /*#__PURE__*/_jsx(LiveMessage, {
+      "aria-live": "polite",
+      message: polite.message,
+      params: polite.params
+    })]
+  });
 };
 LiveMessenger.defaultProps = {
   id: null

package/a11y/components/Navigation/index.js

@@ -10,6 +10,7 @@ import styles from "./style";
  * @param {Object} context  The component context.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Navigation = ({
   title,
   entries
@@ -20,20 +21,23 @@ const Navigation = ({
   if (!entries || !entries.length) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("nav", {
-    "aria-label": title ? __(title) : null
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: styles
-  }, entries.map(({
-    title: entryTitle,
-    link
-  }) => /*#__PURE__*/React.createElement("li", {
-    key: link
-  }, /*#__PURE__*/React.createElement(Link, {
-    href: link
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: entryTitle
-  }))))));
+  return /*#__PURE__*/_jsx("nav", {
+    "aria-label": title ? __(title) : null,
+    children: /*#__PURE__*/_jsx("ul", {
+      className: styles,
+      children: entries.map(({
+        title: entryTitle,
+        link
+      }) => /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsx(Link, {
+          href: link,
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: entryTitle
+          })
+        })
+      }, link))
+    })
+  });
 };
 Navigation.defaultProps = {
   title: null,

package/a11y/components/Section/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useRef, useState, useMemo, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import kebabCase from 'lodash/kebabCase';
@@ -11,6 +10,7 @@ import VisuallyHidden from "../VisuallyHidden";
  * @param {string} headlineId The ID of the section headline.
  * @returns {bool}
 */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const hasChildNodes = (ref, headlineId) => {
   if (!ref.current) {
     return false;
@@ -55,19 +55,26 @@ function Section(props) {
     };
   }, [contentRef, id, observer]);
   if (!hasContent) {
-    return /*#__PURE__*/React.createElement("section", _extends({}, rest, {
-      ref: contentRef
-    }), children);
+    return /*#__PURE__*/_jsx("section", {
+      ...rest,
+      ref: contentRef,
+      children: children
+    });
   }
-  return /*#__PURE__*/React.createElement("section", _extends({}, rest, {
+  return /*#__PURE__*/_jsxs("section", {
+    ...rest,
     ref: contentRef,
-    "aria-labelledby": id
-  }), /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("h2", {
-    id: id
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: title,
-    params: titleParams
-  }))), children);
+    "aria-labelledby": id,
+    children: [/*#__PURE__*/_jsx(VisuallyHidden, {
+      children: /*#__PURE__*/_jsx("h2", {
+        id: id,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: title,
+          params: titleParams
+        })
+      })
+    }), children]
+  });
 }
 Section.defaultProps = {
   children: null,

package/account/components/Account/Account.js

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import I18n from '@shopgate/pwa-common/components/I18n';
 import appConfig from '@shopgate/pwa-common/helpers/config';
 import { i18n, useRoute } from '@shopgate/engage/core';
+import { ResponsiveContainer } from '@shopgate/engage/components';
 import OrderHistory from "../../../orders/components/OrderHistory";
 import OrderHistoryProvider from "../../../orders/providers/OrderHistoryProvider";
 import { Tabs, Tab, TabPanel } from "../../../components/Tabs";
 import { tabs, title, tabPanel } from "./Account.style";
-import { ResponsiveContainer } from "../../../components";
 import Lists from "../../../favorites/components/Lists";
 import connect from "./Account.connector";
 import { TabContext } from "../../../components/Tabs/TabContext";
@@ -17,6 +17,7 @@ import Profile from "../Profile";
  * The Tabs components
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Account = ({
   historyReplace
 }) => {
@@ -25,42 +26,52 @@ const Account = ({
       tab = 'profile'
     }
   } = useRoute();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TabContext, {
-    value: tab
-  }, /*#__PURE__*/React.createElement("div", {
-    className: tabs
-  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    webOnly: true,
-    breakpoint: ">xs"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: title
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "titles.your_account"
-  }))), /*#__PURE__*/React.createElement(Tabs, {
-    indicatorColor: "primary",
-    textColor: "primary",
-    onChange: (event, newValue) => historyReplace({
-      pathname: `/account/${newValue}`
-    }),
-    "aria-label": "disabled tabs example"
-  }, /*#__PURE__*/React.createElement(Tab, {
-    value: "profile",
-    label: i18n.text('titles.profile')
-  }), /*#__PURE__*/React.createElement(Tab, {
-    value: "orders",
-    label: i18n.text('titles.order_history')
-  }), appConfig.hasFavorites ? /*#__PURE__*/React.createElement(Tab, {
-    value: "wish-list",
-    label: i18n.text('titles.favorites')
-  }) : null)), /*#__PURE__*/React.createElement(TabPanel, {
-    className: tabPanel,
-    value: "profile"
-  }, /*#__PURE__*/React.createElement(Profile, null)), /*#__PURE__*/React.createElement(TabPanel, {
-    className: tabPanel,
-    value: "orders"
-  }, /*#__PURE__*/React.createElement(OrderHistoryProvider, null, /*#__PURE__*/React.createElement(OrderHistory, null))), appConfig.hasFavorites ? /*#__PURE__*/React.createElement(TabPanel, {
-    className: tabPanel,
-    value: "wish-list"
-  }, /*#__PURE__*/React.createElement(Lists, null)) : null));
+  return /*#__PURE__*/_jsxs(TabContext, {
+    value: tab,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: tabs,
+      children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
+        webOnly: true,
+        breakpoint: ">xs",
+        children: /*#__PURE__*/_jsx("div", {
+          className: title,
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: "titles.your_account"
+          })
+        })
+      }), /*#__PURE__*/_jsxs(Tabs, {
+        indicatorColor: "primary",
+        textColor: "primary",
+        onChange: (event, newValue) => historyReplace({
+          pathname: `/account/${newValue}`
+        }),
+        "aria-label": "disabled tabs example",
+        children: [/*#__PURE__*/_jsx(Tab, {
+          value: "profile",
+          label: i18n.text('titles.profile')
+        }), /*#__PURE__*/_jsx(Tab, {
+          value: "orders",
+          label: i18n.text('titles.order_history')
+        }), appConfig.hasFavorites ? /*#__PURE__*/_jsx(Tab, {
+          value: "wish-list",
+          label: i18n.text('titles.favorites')
+        }) : null]
+      })]
+    }), /*#__PURE__*/_jsx(TabPanel, {
+      className: tabPanel,
+      value: "profile",
+      children: /*#__PURE__*/_jsx(Profile, {})
+    }), /*#__PURE__*/_jsx(TabPanel, {
+      className: tabPanel,
+      value: "orders",
+      children: /*#__PURE__*/_jsx(OrderHistoryProvider, {
+        children: /*#__PURE__*/_jsx(OrderHistory, {})
+      })
+    }), appConfig.hasFavorites ? /*#__PURE__*/_jsx(TabPanel, {
+      className: tabPanel,
+      value: "wish-list",
+      children: /*#__PURE__*/_jsx(Lists, {})
+    }) : null]
+  });
 };
 export default connect(Account);

package/account/components/Profile/Profile.js

@@ -4,6 +4,7 @@ import Provider from "./Profile.provider";
 import AddressBook from "./ProfileAddressBook";
 import Header from "./ProfileHeader";
 import Form from "./ProfileForm";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: css({
     padding: 8
@@ -13,12 +14,14 @@ const styles = {
 /** @returns {JSX} */
 const Profile = () => {
   const formContainerRef = useRef(null);
-  return /*#__PURE__*/React.createElement(Provider, {
-    formContainerRef: formContainerRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(Form, {
-    ref: formContainerRef
-  }), /*#__PURE__*/React.createElement(AddressBook, null)));
+  return /*#__PURE__*/_jsx(Provider, {
+    formContainerRef: formContainerRef,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: styles.root,
+      children: [/*#__PURE__*/_jsx(Header, {}), /*#__PURE__*/_jsx(Form, {
+        ref: formContainerRef
+      }), /*#__PURE__*/_jsx(AddressBook, {})]
+    })
+  });
 };
 export default Profile;

package/account/components/Profile/Profile.provider.js

@@ -21,6 +21,7 @@ import { getContacts } from "../../selectors/contacts";
 import { getCustomer } from "../../selectors/customer";
 import { extractAttributes, extractDefaultValues, convertPipelineValidationErrors } from "../../helper/form";
 import createConstraints from "./Profile.constraints";
+import { jsx as _jsx } from "react/jsx-runtime";
 const ProfileContext = /*#__PURE__*/createContext();
 
 /**
@@ -223,9 +224,10 @@ const ProfileProvider = ({
   if (!customer) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(ProfileContext.Provider, {
-    value: contextValue
-  }, children);
+  return /*#__PURE__*/_jsx(ProfileContext.Provider, {
+    value: contextValue,
+    children: children
+  });
 };
 ProfileProvider.defaultProps = {
   customer: null,

package/account/components/Profile/ProfileAddressBook.js

@@ -13,6 +13,7 @@ import { PROFILE_ADDRESS_PATH } from "../../constants/routes";
  * @param {Object} dispatch Dispatch
  * @returns {Object}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const mapDispatchToProps = dispatch => ({
   push: props => dispatch(historyPush(props))
 });
@@ -72,24 +73,29 @@ const ProfileAddressBook = ({
     deleteContact,
     editContact
   } = useProfileContext();
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-    className: styles.title
-  }, i18n.text('account.profile.address_book.title')), /*#__PURE__*/React.createElement("div", {
-    className: styles.container
-  }, contacts && contacts.map(contact => /*#__PURE__*/React.createElement(AddressCard, {
-    key: contact.id,
-    contact: contact,
-    deleteContact: () => deleteContact(contact.id),
-    editContact: () => editContact(contact)
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: styles.actions
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    className: styles.button,
-    rippleClassName: styles.ripple,
-    type: "primary",
-    onClick: () => push({
-      pathname: PROFILE_ADDRESS_PATH
-    })
-  }, i18n.text('account.profile.address_book.add'))));
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx("span", {
+      className: styles.title,
+      children: i18n.text('account.profile.address_book.title')
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.container,
+      children: contacts && contacts.map(contact => /*#__PURE__*/_jsx(AddressCard, {
+        contact: contact,
+        deleteContact: () => deleteContact(contact.id),
+        editContact: () => editContact(contact)
+      }, contact.id))
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.actions,
+      children: /*#__PURE__*/_jsx(RippleButton, {
+        className: styles.button,
+        rippleClassName: styles.ripple,
+        type: "primary",
+        onClick: () => push({
+          pathname: PROFILE_ADDRESS_PATH
+        }),
+        children: i18n.text('account.profile.address_book.add')
+      })
+    })]
+  });
 };
 export default connect(null, mapDispatchToProps)(ProfileAddressBook);

package/account/components/Profile/ProfileAddressCard.js

@@ -7,6 +7,7 @@ import { responsiveMediaQuery } from '@shopgate/engage/styles';
 import { useAddressBook, ADDRESS_TYPE_BILLING, ADDRESS_TYPE_SHIPPING } from '@shopgate/engage/checkout';
 import { RippleButton, Card, ContextMenu } from '@shopgate/engage/components';
 import iso3166 from "../../../components/Form/Builder/helpers/iso-3166-2";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: css({
     padding: 16,
@@ -102,56 +103,75 @@ const ProfileAddressCard = ({
     isCheckout,
     type
   } = useAddressBook();
-  return /*#__PURE__*/React.createElement(Card, {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.header
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles.name
-  }, contact.middleName ? `${contact.firstName} ${contact.middleName} ${contact.lastName}` : `${contact.firstName} ${contact.lastName}`), /*#__PURE__*/React.createElement(ContextMenu, {
-    classes: {
-      container: styles.contextMenu
-    }
-  }, /*#__PURE__*/React.createElement(ContextMenu.Item, {
-    onClick: editContact
-  }, i18n.text('account.profile.address_book.context.edit')), /*#__PURE__*/React.createElement(ContextMenu.Item, {
-    onClick: deleteContact
-  }, i18n.text('account.profile.address_book.context.remove')))), /*#__PURE__*/React.createElement("div", {
-    className: styles.body
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.column
-  }, !isCheckout && contact.emailAddress ? /*#__PURE__*/React.createElement("span", {
-    className: styles.others
-  }, contact.emailAddress) : null, contact.postalCode || contact.region || contact.city || contact.country ? /*#__PURE__*/React.createElement("span", {
-    className: styles.others
-  }, i18n.text('checkout.billing.address', {
-    postalCode: contact.postalCode || '',
-    region: iso3166?.[contact.country]?.divisions?.[contact.region] || contact.region || '',
-    city: contact.city || '',
-    country: contact.country || ''
-  })) : null, contact.address1 ? /*#__PURE__*/React.createElement("span", {
-    className: styles.others
-  }, contact.address1) : null, contact.address2 ? /*#__PURE__*/React.createElement("span", {
-    className: styles.others
-  }, contact.address2) : null, contact.address3 ? /*#__PURE__*/React.createElement("span", {
-    className: styles.others
-  }, contact.address3) : null, contact.address4 ? /*#__PURE__*/React.createElement("span", {
-    className: styles.others
-  }, contact.address4) : null, !isCheckout && contact.mobile ? /*#__PURE__*/React.createElement("span", {
-    className: styles.others
-  }, contact.mobile) : null, (!isCheckout || type === ADDRESS_TYPE_BILLING) && contact.isDefaultBilling ? /*#__PURE__*/React.createElement("span", {
-    className: styles.defaultLabel
-  }, i18n.text('account.profile.address_book.default_billing')) : null, (!isCheckout || type === ADDRESS_TYPE_SHIPPING) && contact.isDefaultShipping ? /*#__PURE__*/React.createElement("span", {
-    className: styles.defaultLabel
-  }, i18n.text('account.profile.address_book.default_shipping')) : null), /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.column, styles.selectButtonColumn)
-  }, isCheckout ? /*#__PURE__*/React.createElement(RippleButton, {
-    className: styles.button,
-    rippleClassName: styles.ripple,
-    type: "secondary",
-    disabled: selected,
-    onClick: selectContact
-  }, i18n.text(`account.profile.address_book.${selected ? 'selected' : 'select'}`)) : null)));
+  return /*#__PURE__*/_jsxs(Card, {
+    className: styles.root,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: styles.header,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: styles.name,
+        children: contact.middleName ? `${contact.firstName} ${contact.middleName} ${contact.lastName}` : `${contact.firstName} ${contact.lastName}`
+      }), /*#__PURE__*/_jsxs(ContextMenu, {
+        classes: {
+          container: styles.contextMenu
+        },
+        children: [/*#__PURE__*/_jsx(ContextMenu.Item, {
+          onClick: editContact,
+          children: i18n.text('account.profile.address_book.context.edit')
+        }), /*#__PURE__*/_jsx(ContextMenu.Item, {
+          onClick: deleteContact,
+          children: i18n.text('account.profile.address_book.context.remove')
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.body,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: styles.column,
+        children: [!isCheckout && contact.emailAddress ? /*#__PURE__*/_jsx("span", {
+          className: styles.others,
+          children: contact.emailAddress
+        }) : null, contact.postalCode || contact.region || contact.city || contact.country ? /*#__PURE__*/_jsx("span", {
+          className: styles.others,
+          children: i18n.text('checkout.billing.address', {
+            postalCode: contact.postalCode || '',
+            region: iso3166?.[contact.country]?.divisions?.[contact.region] || contact.region || '',
+            city: contact.city || '',
+            country: contact.country || ''
+          })
+        }) : null, contact.address1 ? /*#__PURE__*/_jsx("span", {
+          className: styles.others,
+          children: contact.address1
+        }) : null, contact.address2 ? /*#__PURE__*/_jsx("span", {
+          className: styles.others,
+          children: contact.address2
+        }) : null, contact.address3 ? /*#__PURE__*/_jsx("span", {
+          className: styles.others,
+          children: contact.address3
+        }) : null, contact.address4 ? /*#__PURE__*/_jsx("span", {
+          className: styles.others,
+          children: contact.address4
+        }) : null, !isCheckout && contact.mobile ? /*#__PURE__*/_jsx("span", {
+          className: styles.others,
+          children: contact.mobile
+        }) : null, (!isCheckout || type === ADDRESS_TYPE_BILLING) && contact.isDefaultBilling ? /*#__PURE__*/_jsx("span", {
+          className: styles.defaultLabel,
+          children: i18n.text('account.profile.address_book.default_billing')
+        }) : null, (!isCheckout || type === ADDRESS_TYPE_SHIPPING) && contact.isDefaultShipping ? /*#__PURE__*/_jsx("span", {
+          className: styles.defaultLabel,
+          children: i18n.text('account.profile.address_book.default_shipping')
+        }) : null]
+      }), /*#__PURE__*/_jsx("div", {
+        className: classNames(styles.column, styles.selectButtonColumn),
+        children: isCheckout ? /*#__PURE__*/_jsx(RippleButton, {
+          className: styles.button,
+          rippleClassName: styles.ripple,
+          type: "secondary",
+          disabled: selected,
+          onClick: selectContact,
+          children: i18n.text(`account.profile.address_book.${selected ? 'selected' : 'select'}`)
+        }) : null
+      })]
+    })]
+  });
 };
 ProfileAddressCard.defaultProps = {
   selectContact: null,

package/account/components/Profile/ProfileForm.js

@@ -6,6 +6,7 @@ import { FormBuilder, RippleButton } from '@shopgate/engage/components';
 import { StylePresets } from '@shopgate/engage/components/Form';
 import { useProfileContext } from "./Profile.provider";
 import generateFormConfig from "./Profile.config";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: css({
     display: 'flex',
@@ -104,28 +105,32 @@ const ProfileForm = /*#__PURE__*/forwardRef((_, ref) => {
   if (!customer) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: styles.root,
-    ref: ref
-  }, /*#__PURE__*/React.createElement(FormBuilder, {
-    name: "ProfileForm",
-    className: styles.form,
-    config: formConfig,
-    defaults: customer,
-    validationErrors: validationErrors,
-    handleUpdate: handleUpdate
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.actions
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    className: styles.buttonDelete,
-    rippleClassName: styles.ripple,
-    type: "primary",
-    onClick: deleteCustomer
-  }, i18n.text('account.profile.delete')), /*#__PURE__*/React.createElement(RippleButton, {
-    className: styles.button,
-    rippleClassName: styles.ripple,
-    type: "primary",
-    onClick: saveForm
-  }, i18n.text('account.profile.form.save'))));
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(FormBuilder, {
+      name: "ProfileForm",
+      className: styles.form,
+      config: formConfig,
+      defaults: customer,
+      validationErrors: validationErrors,
+      handleUpdate: handleUpdate
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.actions,
+      children: [/*#__PURE__*/_jsx(RippleButton, {
+        className: styles.buttonDelete,
+        rippleClassName: styles.ripple,
+        type: "primary",
+        onClick: deleteCustomer,
+        children: i18n.text('account.profile.delete')
+      }), /*#__PURE__*/_jsx(RippleButton, {
+        className: styles.button,
+        rippleClassName: styles.ripple,
+        type: "primary",
+        onClick: saveForm,
+        children: i18n.text('account.profile.form.save')
+      })]
+    })]
+  });
 });
 export default ProfileForm;

package/account/components/Profile/ProfileHeader.js

@@ -3,6 +3,7 @@ import { css } from 'glamor';
 import { i18n } from '@shopgate/engage/core';
 import { responsiveMediaQuery } from '@shopgate/engage/styles';
 import { useProfileContext } from "./Profile.provider";
+import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   root: css({
     marginTop: 8,
@@ -25,12 +26,14 @@ const ProfileHeader = () => {
   const {
     internalCustomerNumber
   } = useProfileContext().customer || {};
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles.title
-  }, i18n.text('account.profile.customer.number', {
-    customerNumber: internalCustomerNumber
-  })));
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.root,
+    children: /*#__PURE__*/_jsx("span", {
+      className: styles.title,
+      children: i18n.text('account.profile.customer.number', {
+        customerNumber: internalCustomerNumber
+      })
+    })
+  });
 };
 export default ProfileHeader;