@bigbinary/neeto-payments-frontend 2.2.0 → 2.2.2

package/dist/StripeConnect.js

@@ -1,9 +1,11 @@
-import * as React$1 from 'react';
+import { _ as _defineProperty } from './defineProperty-e90a259c.js';
+import { _ as _slicedToArray } from './slicedToArray-b4278ecd.js';
+import * as React from 'react';
 import { useState, useEffect, useMemo } from 'react';
 import { humanize, isPresent } from '@bigbinary/neeto-cist';
 import { useQueryParams, withT, useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { Finish as Finish$1, Modal, Demo } from 'neetointegrations';
-import { d as useCreateStripeAccount, e as usePollingStripeAccountCreationStatus, a as useFetchConnectedStripeAccount, f as useDestroyStripeAccount, g as usePollingStripeAccount } from './useConnectApi-36a92bd8.js';
+import { d as useCreateStripeAccount, e as usePollingStripeAccountCreationStatus, a as useFetchConnectedStripeAccount, f as useDestroyStripeAccount, g as usePollingStripeAccount } from './useConnectApi-b4fc32db.js';
 import Label from '@bigbinary/neetoui/Label';
 import Typography from '@bigbinary/neetoui/Typography';
 import { useTranslation, Trans } from 'react-i18next';
@@ -15,63 +17,69 @@ import { useHistory } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { BASE_URL } from './constants.js';
-import { Q as QUERY_KEYS } from './queryConstants-7d91832f.js';
+import { Q as QUERY_KEYS } from './queryConstants-fada3549.js';
 import { t } from 'i18next';
 import * as yup from 'yup';
 import 'ramda';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Alert from '@bigbinary/neetoui/Alert';
 import Button from '@bigbinary/neetoui/Button';
 import Radio from '@bigbinary/neetoui/Radio';
 import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
+import './_commonjsHelpers-ae89b920.js';
 import 'util';
 import '@bigbinary/neeto-commons-frontend/constants';
 
 var _path, _path2, _path3;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const SvgStripe = props => /*#__PURE__*/React$1.createElement("svg", _extends({
+const SvgStripe = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: 54,
   height: 54,
   fill: "#6772e5",
   viewBox: "0 0 32 32"
-}, props), _path || (_path = /*#__PURE__*/React$1.createElement("path", {
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   d: "M111.328 15.602c0-4.97-2.415-8.9-7.013-8.9s-7.423 3.924-7.423 8.863c0 5.85 3.32 8.8 8.036 8.8 2.318 0 4.06-.528 5.377-1.26V19.22a10.246 10.246 0 0 1-4.764 1.075c-1.9 0-3.556-.67-3.774-2.943h9.497a39.64 39.64 0 0 0 .063-1.748zm-9.606-1.835c0-2.186 1.35-3.1 2.56-3.1s2.454.906 2.454 3.1zM89.4 6.712a5.434 5.434 0 0 0-3.801 1.509l-.254-1.208h-4.27v22.64l4.85-1.032v-5.488a5.434 5.434 0 0 0 3.444 1.265c3.472 0 6.64-2.792 6.64-8.957.003-5.66-3.206-8.73-6.614-8.73zM88.23 20.1a2.898 2.898 0 0 1-2.288-.906l-.03-7.2a2.928 2.928 0 0 1 2.315-.96c1.775 0 2.998 2 2.998 4.528.003 2.593-1.198 4.546-2.995 4.546zM79.25.57l-4.87 1.035v3.95l4.87-1.032z"
-})), _path2 || (_path2 = /*#__PURE__*/React$1.createElement("path", {
+})), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
   d: "M74.38 7.035h4.87V24.04h-4.87z"
-})), _path3 || (_path3 = /*#__PURE__*/React$1.createElement("path", {
+})), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   d: "m69.164 8.47-.302-1.434h-4.196V24.04h4.848V12.5c1.147-1.5 3.082-1.208 3.698-1.017V7.038c-.646-.232-2.913-.658-4.048 1.43zm-9.73-5.646L54.698 3.83l-.02 15.562c0 2.87 2.158 4.993 5.038 4.993 1.585 0 2.756-.302 3.405-.643v-3.95c-.622.248-3.683 1.138-3.683-1.72v-6.9h3.683V7.035h-3.683zM46.3 11.97c0-.758.63-1.05 1.648-1.05a10.868 10.868 0 0 1 4.83 1.25V7.6a12.815 12.815 0 0 0-4.83-.888c-3.924 0-6.557 2.056-6.557 5.488 0 5.37 7.375 4.498 7.375 6.813 0 .906-.78 1.186-1.863 1.186-1.606 0-3.68-.664-5.307-1.55v4.63a13.461 13.461 0 0 0 5.307 1.117c4.033 0 6.813-1.992 6.813-5.485 0-5.796-7.417-4.76-7.417-6.943zM13.88 9.515c0-1.37 1.14-1.9 2.982-1.9A19.661 19.661 0 0 1 25.6 9.876v-8.27A23.184 23.184 0 0 0 16.862.001C9.762.001 5 3.72 5 9.93c0 9.716 13.342 8.138 13.342 12.326 0 1.638-1.4 2.146-3.37 2.146-2.905 0-6.657-1.202-9.6-2.802v8.378A24.353 24.353 0 0 0 14.973 32C22.27 32 27.3 28.395 27.3 22.077c0-10.486-13.42-8.613-13.42-12.56z"
 })));
 
-const fetchCountries = () => axios.get(`${BASE_URL}/api/v1/stripe/countries`);
-const countriesApi = {
-  fetchCountries
+var fetchCountries = function fetchCountries() {
+  return axios.get("".concat(BASE_URL, "/api/v1/stripe/countries"));
+};
+var countriesApi = {
+  fetchCountries: fetchCountries
 };
 
-const useFetchStripeCountries = () => useQuery({
-  queryKey: [QUERY_KEYS.STRIPE_COUNTRIES],
-  queryFn: countriesApi.fetchCountries
-});
+var useFetchStripeCountries = function useFetchStripeCountries() {
+  return useQuery({
+    queryKey: [QUERY_KEYS.STRIPE_COUNTRIES],
+    queryFn: countriesApi.fetchCountries
+  });
+};
 
-const POLLING_INTERVAL = 5000;
-const MAX_POLLING_TIME = 30000;
-const INITIAL_VALUES = {
+var POLLING_INTERVAL = 5000;
+var MAX_POLLING_TIME = 30000;
+var INITIAL_VALUES = {
   country: "",
   return_url: ""
 };
-const VALIDATION_SCHEMA = yup.object().shape({
+var VALIDATION_SCHEMA = yup.object().shape({
   country: yup.object().required(t("neetoPayments.validations.countryRequired")),
   returnUrl: yup.string().url(t("neetoPayments.validations.invalidUrl"))
 });
 
-const STEPS = {
+var STEPS = {
   connect: "connect",
   configure: "configure",
   finish: "finish",
   demo: "demo"
 };
-const INTEGRATION_STEPS = [{
+var INTEGRATION_STEPS = [{
   step: "1",
   label: t("neetoPayments.common.connect"),
   isActive: false,
@@ -90,184 +98,199 @@ const INTEGRATION_STEPS = [{
 // { step: "4", label: "demo", isActive: false, isCompleted: false },
 ];
 
-const INTEGRATION_METHOD = {
+var INTEGRATION_METHOD = {
   useExistingAccount: "use_existing_account",
   createNewAccount: "create_new_account"
 };
-const STRIPE_CONNECT_URL = `/${BASE_URL}/api/v1/integrations/connect/stripe`;
+var STRIPE_CONNECT_URL = "/".concat(BASE_URL, "/api/v1/integrations/connect/stripe");
 
-const buildRefreshUrl = (accountId, returnUrl) => `/payments/api/v1/stripe/callbacks/${accountId}/refresh?return_url=${returnUrl}`;
-const buildCountryOptions = countries => Object.entries(countries)?.map(country => ({
-  label: humanize(country[0]),
-  value: country[1]
-}));
+var buildRefreshUrl = function buildRefreshUrl(accountId, returnUrl) {
+  return "/payments/api/v1/stripe/callbacks/".concat(accountId, "/refresh?return_url=").concat(returnUrl);
+};
+var buildCountryOptions = function buildCountryOptions(countries) {
+  var _Object$entries;
+  return (_Object$entries = Object.entries(countries)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map(function (country) {
+    return {
+      label: humanize(country[0]),
+      value: country[1]
+    };
+  });
+};
 
-const AccountForm = _ref => {
-  let {
-    holdableId,
-    returnUrl
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  const history = useHistory();
-  const [isPolling, setIsPolling] = useState(false);
-  const submitButtonLabel = isPolling ? t("neetoPayments.integrationModal.creating") : t("neetoPayments.common.connect");
-  const refetchInterval = function () {
-    let {
-      jobStatus,
-      onboarding
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+var AccountForm = function AccountForm(_ref) {
+  var holdableId = _ref.holdableId,
+    returnUrl = _ref.returnUrl;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var history = useHistory();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPolling = _useState2[0],
+    setIsPolling = _useState2[1];
+  var submitButtonLabel = isPolling ? t("neetoPayments.integrationModal.creating") : t("neetoPayments.common.connect");
+  var refetchInterval = function refetchInterval() {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      jobStatus = _ref2.jobStatus,
+      onboarding = _ref2.onboarding;
     if (jobStatus === "complete") {
-      window.open(onboarding?.url, "_self");
+      window.open(onboarding === null || onboarding === void 0 ? void 0 : onboarding.url, "_self");
       return false;
     }
     return POLLING_INTERVAL;
   };
-  const {
-    isPending: isCreating,
-    data: {
-      jobId
-    } = {},
-    mutate: createStripeAccount
-  } = useCreateStripeAccount({
-    onSuccess: () => setIsPolling(true)
-  });
+  var _useCreateStripeAccou = useCreateStripeAccount({
+      onSuccess: function onSuccess() {
+        return setIsPolling(true);
+      }
+    }),
+    isCreating = _useCreateStripeAccou.isPending,
+    _useCreateStripeAccou2 = _useCreateStripeAccou.data,
+    _useCreateStripeAccou3 = _useCreateStripeAccou2 === void 0 ? {} : _useCreateStripeAccou2,
+    jobId = _useCreateStripeAccou3.jobId,
+    createStripeAccount = _useCreateStripeAccou.mutate;
   usePollingStripeAccountCreationStatus(jobId, {
-    refetchInterval,
+    refetchInterval: refetchInterval,
     enabled: isPresent(jobId)
   });
-  const {
-    isLoading,
-    data: {
-      countries = {}
-    } = {}
-  } = useFetchStripeCountries();
-  const handleSubmit = _ref2 => {
-    let {
-      country
-    } = _ref2;
-    const payload = {
-      returnUrl,
+  var _useFetchStripeCountr = useFetchStripeCountries(),
+    isLoading = _useFetchStripeCountr.isLoading,
+    _useFetchStripeCountr2 = _useFetchStripeCountr.data,
+    _useFetchStripeCountr3 = _useFetchStripeCountr2 === void 0 ? {} : _useFetchStripeCountr2,
+    _useFetchStripeCountr4 = _useFetchStripeCountr3.countries,
+    countries = _useFetchStripeCountr4 === void 0 ? {} : _useFetchStripeCountr4;
+  var handleSubmit = function handleSubmit(_ref3) {
+    var country = _ref3.country;
+    var payload = {
+      returnUrl: returnUrl,
       country: country.value,
-      holdableId
+      holdableId: holdableId
     };
     createStripeAccount(payload);
   };
   if (isLoading) {
-    return /*#__PURE__*/React.createElement(PageLoader, null);
+    return /*#__PURE__*/jsx(PageLoader, {});
   }
-  return /*#__PURE__*/React.createElement(Form, {
+  return /*#__PURE__*/jsx(Form, {
     formikProps: {
       enableReinitialize: true,
       initialValues: INITIAL_VALUES,
       validationSchema: VALIDATION_SCHEMA,
       onSubmit: handleSubmit
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "space-y-3"
-  }, /*#__PURE__*/React.createElement(Select, {
-    required: true,
-    helpText: t("neetoPayments.integrationModal.form.helpText"),
-    label: t("neetoPayments.integrationModal.form.label"),
-    name: "country",
-    options: buildCountryOptions(countries),
-    placeholder: t("neetoPayments.integrationModal.form.placeholder")
-  }), /*#__PURE__*/React.createElement(ActionBlock, {
-    cancelButtonProps: {
-      onClick: () => history.goBack()
     },
-    isSubmitting: isCreating || isPolling,
-    submitButtonProps: {
-      label: submitButtonLabel
-    }
-  })));
+    children: /*#__PURE__*/jsxs("div", {
+      className: "space-y-3",
+      children: [/*#__PURE__*/jsx(Select, {
+        required: true,
+        helpText: t("neetoPayments.integrationModal.form.helpText"),
+        label: t("neetoPayments.integrationModal.form.label"),
+        name: "country",
+        options: buildCountryOptions(countries),
+        placeholder: t("neetoPayments.integrationModal.form.placeholder")
+      }), /*#__PURE__*/jsx(ActionBlock, {
+        cancelButtonProps: {
+          onClick: function onClick() {
+            return history.goBack();
+          }
+        },
+        isSubmitting: isCreating || isPolling,
+        submitButtonProps: {
+          label: submitButtonLabel
+        }
+      })]
+    })
+  });
 };
 
-const AccountDetails = _ref => {
-  let {
-    holdableId
-  } = _ref;
-  const {
-    data: {
-      account: stripeAccount
-    } = {}
-  } = useFetchConnectedStripeAccount(holdableId);
-  const {
-    t
-  } = useTranslation();
-  return /*#__PURE__*/React.createElement("div", {
-    className: "mb-6 space-y-3"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "h5",
-    weight: "medium"
-  }, t("neetoPayments.integrationModal.account.title")), /*#__PURE__*/React.createElement("div", {
-    className: "grid grid-cols-4 gap-y-3"
-  }, /*#__PURE__*/React.createElement(Label, {
-    className: "neeto-ui-text-gray-800"
-  }, t("neetoPayments.common.id")), /*#__PURE__*/React.createElement(Label, {
-    className: "neeto-ui-text-gray-800 col-span-3"
-  }, stripeAccount?.identifier), /*#__PURE__*/React.createElement(Label, {
-    className: "neeto-ui-text-gray-800"
-  }, t("neetoPayments.common.email")), /*#__PURE__*/React.createElement(Label, {
-    className: "neeto-ui-text-gray-800 col-span-3"
-  }, stripeAccount?.email), /*#__PURE__*/React.createElement(Label, {
-    className: "neeto-ui-text-gray-800"
-  }, t("neetoPayments.common.country")), /*#__PURE__*/React.createElement(Label, {
-    className: "neeto-ui-text-gray-800 col-span-3"
-  }, stripeAccount?.country)));
+var AccountDetails = function AccountDetails(_ref) {
+  var holdableId = _ref.holdableId;
+  var _useFetchConnectedStr = useFetchConnectedStripeAccount(holdableId),
+    _useFetchConnectedStr2 = _useFetchConnectedStr.data,
+    _useFetchConnectedStr3 = _useFetchConnectedStr2 === void 0 ? {} : _useFetchConnectedStr2,
+    stripeAccount = _useFetchConnectedStr3.account;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: "mb-6 space-y-3",
+    children: [/*#__PURE__*/jsx(Typography, {
+      style: "h5",
+      weight: "medium",
+      children: t("neetoPayments.integrationModal.account.title")
+    }), /*#__PURE__*/jsxs("div", {
+      className: "grid grid-cols-4 gap-y-3",
+      children: [/*#__PURE__*/jsx(Label, {
+        className: "neeto-ui-text-gray-800",
+        children: t("neetoPayments.common.id")
+      }), /*#__PURE__*/jsx(Label, {
+        className: "neeto-ui-text-gray-800 col-span-3",
+        children: stripeAccount === null || stripeAccount === void 0 ? void 0 : stripeAccount.identifier
+      }), /*#__PURE__*/jsx(Label, {
+        className: "neeto-ui-text-gray-800",
+        children: t("neetoPayments.common.email")
+      }), /*#__PURE__*/jsx(Label, {
+        className: "neeto-ui-text-gray-800 col-span-3",
+        children: stripeAccount === null || stripeAccount === void 0 ? void 0 : stripeAccount.email
+      }), /*#__PURE__*/jsx(Label, {
+        className: "neeto-ui-text-gray-800",
+        children: t("neetoPayments.common.country")
+      }), /*#__PURE__*/jsx(Label, {
+        className: "neeto-ui-text-gray-800 col-span-3",
+        children: stripeAccount === null || stripeAccount === void 0 ? void 0 : stripeAccount.country
+      })]
+    })]
+  });
 };
 
-const AccountProcessing = _ref => {
-  let {
-    holdableId,
-    returnUrl
-  } = _ref;
-  const {
-    app
-  } = useQueryParams();
-  const [isAlertOpen, setIsAlertOpen] = useState(false);
-  const [isPolling, setIsPolling] = useState(false);
-  const {
-    t
-  } = useTranslation();
-  const isStripeCallback = app === "stripe";
-  useEffect(() => {
+var AccountProcessing = function AccountProcessing(_ref) {
+  var holdableId = _ref.holdableId,
+    returnUrl = _ref.returnUrl;
+  var _useQueryParams = useQueryParams(),
+    app = _useQueryParams.app;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAlertOpen = _useState2[0],
+    setIsAlertOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isPolling = _useState4[0],
+    setIsPolling = _useState4[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var isStripeCallback = app === "stripe";
+  useEffect(function () {
     if (!isStripeCallback) return;
     setIsPolling(true);
-    setInterval(() => {
+    setInterval(function () {
       setIsPolling(false);
     }, MAX_POLLING_TIME);
   }, [isStripeCallback]);
-  const {
-    data: {
-      account: stripeAccount
-    } = {}
-  } = useFetchConnectedStripeAccount(holdableId);
-  const {
-    isPending: isStripeAccountDestroying,
-    mutate: destroyStripeAccount
-  } = useDestroyStripeAccount({
-    onSuccess: () => setIsAlertOpen(false),
-    holdableId
-  });
-  const refetchInterval = function () {
-    let {
-      account
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    if (isStripeCallback && !account?.isConnected && isPolling) {
+  var _useFetchConnectedStr = useFetchConnectedStripeAccount(holdableId),
+    _useFetchConnectedStr2 = _useFetchConnectedStr.data,
+    _useFetchConnectedStr3 = _useFetchConnectedStr2 === void 0 ? {} : _useFetchConnectedStr2,
+    stripeAccount = _useFetchConnectedStr3.account;
+  var _useDestroyStripeAcco = useDestroyStripeAccount({
+      onSuccess: function onSuccess() {
+        return setIsAlertOpen(false);
+      },
+      holdableId: holdableId
+    }),
+    isStripeAccountDestroying = _useDestroyStripeAcco.isPending,
+    destroyStripeAccount = _useDestroyStripeAcco.mutate;
+  var refetchInterval = function refetchInterval() {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      account = _ref2.account;
+    if (isStripeCallback && !(account !== null && account !== void 0 && account.isConnected) && isPolling) {
       return POLLING_INTERVAL;
     }
-    if (account?.isConnected) {
+    if (account !== null && account !== void 0 && account.isConnected) {
       setIsPolling(false);
     }
     return false;
   };
   usePollingStripeAccount(holdableId, {
-    refetchInterval
+    refetchInterval: refetchInterval
   });
-  const isAccountProcessingFailed = isStripeCallback && !isPolling && !stripeAccount?.isConnected;
-  const buttonLabel = () => {
+  var isAccountProcessingFailed = isStripeCallback && !isPolling && !(stripeAccount !== null && stripeAccount !== void 0 && stripeAccount.isConnected);
+  var buttonLabel = function buttonLabel() {
     if (isPolling) {
       return t("neetoPayments.integrationModal.creating");
     }
@@ -276,76 +299,81 @@ const AccountProcessing = _ref => {
     }
     return t("neetoPayments.common.continue");
   };
-  const handleUseAnotherStripeAccount = () => {
-    destroyStripeAccount(stripeAccount?.id);
+  var handleUseAnotherStripeAccount = function handleUseAnotherStripeAccount() {
+    destroyStripeAccount(stripeAccount === null || stripeAccount === void 0 ? void 0 : stripeAccount.id);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AccountDetails, null), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col items-start space-y-2"
-  }, /*#__PURE__*/React.createElement(Button, {
-    disabled: isPolling,
-    href: buildRefreshUrl(stripeAccount?.id, returnUrl),
-    label: buttonLabel(),
-    loading: isPolling,
-    size: "small"
-  }), !isPolling && !isAccountProcessingFailed && /*#__PURE__*/React.createElement(Button, {
-    disabled: isStripeAccountDestroying || isPolling,
-    label: t("neetoPayments.integrationModal.anotherAccount"),
-    size: "small",
-    style: "link",
-    onClick: () => setIsAlertOpen(true)
-  })), /*#__PURE__*/React.createElement(Alert, {
-    isOpen: isAlertOpen,
-    title: t("neetoPayments.integrationModal.alert.changeTitle"),
-    message: /*#__PURE__*/React.createElement(Trans, {
-      i18nKey: "neetoPayments.integrationModal.alert.changeMessage",
-      values: {
-        account: stripeAccount?.email
-      }
-    }),
-    onClose: () => setIsAlertOpen(false),
-    onSubmit: handleUseAnotherStripeAccount
-  }));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(AccountDetails, {}), /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col items-start space-y-2",
+      children: [/*#__PURE__*/jsx(Button, {
+        disabled: isPolling,
+        href: buildRefreshUrl(stripeAccount === null || stripeAccount === void 0 ? void 0 : stripeAccount.id, returnUrl),
+        label: buttonLabel(),
+        loading: isPolling,
+        size: "small"
+      }), !isPolling && !isAccountProcessingFailed && /*#__PURE__*/jsx(Button, {
+        disabled: isStripeAccountDestroying || isPolling,
+        label: t("neetoPayments.integrationModal.anotherAccount"),
+        size: "small",
+        style: "link",
+        onClick: function onClick() {
+          return setIsAlertOpen(true);
+        }
+      })]
+    }), /*#__PURE__*/jsx(Alert, {
+      isOpen: isAlertOpen,
+      title: t("neetoPayments.integrationModal.alert.changeTitle"),
+      message: /*#__PURE__*/jsx(Trans, {
+        i18nKey: "neetoPayments.integrationModal.alert.changeMessage",
+        values: {
+          account: stripeAccount === null || stripeAccount === void 0 ? void 0 : stripeAccount.email
+        }
+      }),
+      onClose: function onClose() {
+        return setIsAlertOpen(false);
+      },
+      onSubmit: handleUseAnotherStripeAccount
+    })]
+  });
 };
 
-const Configure = _ref => {
-  let {
-    holdableId,
-    returnUrl
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  const {
-    data: {
-      account: stripeAccount
-    } = {}
-  } = useFetchConnectedStripeAccount(holdableId);
-  const handleStripeAccountCreated = _ref2 => {
-    let {
-      onboarding
-    } = _ref2;
-    window.open(onboarding?.url, "_self");
+var Configure = function Configure(_ref) {
+  var holdableId = _ref.holdableId,
+    returnUrl = _ref.returnUrl;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchConnectedStr = useFetchConnectedStripeAccount(holdableId),
+    _useFetchConnectedStr2 = _useFetchConnectedStr.data,
+    _useFetchConnectedStr3 = _useFetchConnectedStr2 === void 0 ? {} : _useFetchConnectedStr2,
+    stripeAccount = _useFetchConnectedStr3.account;
+  var handleStripeAccountCreated = function handleStripeAccountCreated(_ref2) {
+    var onboarding = _ref2.onboarding;
+    window.open(onboarding === null || onboarding === void 0 ? void 0 : onboarding.url, "_self");
   };
-  const connectDescription = isPresent(stripeAccount) ? t("neetoPayments.integrationModal.linkedDescription") : t("neetoPayments.integrationModal.subtitle");
-  return /*#__PURE__*/React.createElement("div", {
-    className: "mx-auto w-full max-w-lg space-y-8"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "space-y-2"
-  }, /*#__PURE__*/React.createElement(SvgStripe, null), /*#__PURE__*/React.createElement(Typography, {
-    "data-cy": "configure-payment-title",
-    style: "h2",
-    weight: "semibold"
-  }, t("neetoPayments.integrationModal.title")), /*#__PURE__*/React.createElement(Label, {
-    className: "leading-snug"
-  }, connectDescription)), isPresent(stripeAccount) ? /*#__PURE__*/React.createElement(AccountProcessing, {
-    onAccountCreated: handleStripeAccountCreated,
-    holdableId,
-    returnUrl
-  }) : /*#__PURE__*/React.createElement(AccountForm, {
-    holdableId,
-    returnUrl,
-    onAccountCreated: handleStripeAccountCreated
-  }));
+  var connectDescription = isPresent(stripeAccount) ? t("neetoPayments.integrationModal.linkedDescription") : t("neetoPayments.integrationModal.subtitle");
+  return /*#__PURE__*/jsxs("div", {
+    className: "mx-auto w-full max-w-lg space-y-8",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "space-y-2",
+      children: [/*#__PURE__*/jsx(SvgStripe, {}), /*#__PURE__*/jsx(Typography, {
+        "data-cy": "configure-payment-title",
+        style: "h2",
+        weight: "semibold",
+        children: t("neetoPayments.integrationModal.title")
+      }), /*#__PURE__*/jsx(Label, {
+        className: "leading-snug",
+        children: connectDescription
+      })]
+    }), isPresent(stripeAccount) ? /*#__PURE__*/jsx(AccountProcessing, {
+      onAccountCreated: handleStripeAccountCreated,
+      holdableId: holdableId,
+      returnUrl: returnUrl
+    }) : /*#__PURE__*/jsx(AccountForm, {
+      holdableId: holdableId,
+      returnUrl: returnUrl,
+      onAccountCreated: handleStripeAccountCreated
+    })]
+  });
 };
 
 /*! @license DOMPurify 3.0.2 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.2/LICENSE */
@@ -1941,8 +1969,8 @@ function createDOMPurify() {
 
 var purify = createDOMPurify();
 
-const getInitialTab = stripeAccount => {
-  if (stripeAccount?.isConnected) {
+var getInitialTab = function getInitialTab(stripeAccount) {
+  if (stripeAccount !== null && stripeAccount !== void 0 && stripeAccount.isConnected) {
     return STEPS.finish;
   }
   if (isPresent(stripeAccount)) {
@@ -1950,120 +1978,133 @@ const getInitialTab = stripeAccount => {
   }
   return STEPS.connect;
 };
-const buildStripeConnectUrl = (holdableId, returnUrl) => buildUrl(STRIPE_CONNECT_URL, {
-  holdable_id: holdableId,
-  return_url: returnUrl
-});
+var buildStripeConnectUrl = function buildStripeConnectUrl(holdableId, returnUrl) {
+  return buildUrl(STRIPE_CONNECT_URL, {
+    holdable_id: holdableId,
+    return_url: returnUrl
+  });
+};
 
-const Connect = _ref => {
-  let {
-    setActiveTab,
-    holdableId,
-    returnUrl
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  const [selectedOption, setSelectedOption] = useState(INTEGRATION_METHOD.createNewAccount);
-  const stripeConnectUrl = buildStripeConnectUrl(holdableId, returnUrl);
-  const handleSubmit = () => {
+var Connect = function Connect(_ref) {
+  var setActiveTab = _ref.setActiveTab,
+    holdableId = _ref.holdableId,
+    returnUrl = _ref.returnUrl;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(INTEGRATION_METHOD.createNewAccount),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedOption = _useState2[0],
+    setSelectedOption = _useState2[1];
+  var stripeConnectUrl = buildStripeConnectUrl(holdableId, returnUrl);
+  var handleSubmit = function handleSubmit() {
     if (selectedOption !== INTEGRATION_METHOD.useExistingAccount) {
       setActiveTab(STEPS.configure);
       return;
     }
     window.location.href = purify.sanitize(stripeConnectUrl);
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "mx-auto w-full max-w-lg space-y-8"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "space-y-2"
-  }, /*#__PURE__*/React.createElement(SvgStripe, null), /*#__PURE__*/React.createElement(Typography, {
-    "data-cy": "configure-payment-title",
-    style: "h2",
-    weight: "semibold"
-  }, t("neetoPayments.integrationModal.title")), /*#__PURE__*/React.createElement(Label, {
-    className: "leading-snug"
-  }, t("neetoPayments.integrationModal.subtitle"))), /*#__PURE__*/React.createElement(Radio, {
-    stacked: true,
-    value: selectedOption,
-    onChange: event => setSelectedOption(event.target.value)
-  }, /*#__PURE__*/React.createElement(Radio.Item, {
-    className: "neeto-ui-border-black w-96 py-2",
-    label: t("neetoPayments.integrationModal.createAccount"),
-    name: "accountMethod",
-    value: INTEGRATION_METHOD.createNewAccount
-  }), /*#__PURE__*/React.createElement(Radio.Item, {
-    className: "neeto-ui-border-black w-96 py-2",
-    label: t("neetoPayments.integrationModal.connectAccount"),
-    name: "accountMethod",
-    value: INTEGRATION_METHOD.useExistingAccount
-  })), /*#__PURE__*/React.createElement(Button, {
-    label: t("neetoPayments.common.continue"),
-    onClick: handleSubmit
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: "mx-auto w-full max-w-lg space-y-8",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "space-y-2",
+      children: [/*#__PURE__*/jsx(SvgStripe, {}), /*#__PURE__*/jsx(Typography, {
+        "data-cy": "configure-payment-title",
+        style: "h2",
+        weight: "semibold",
+        children: t("neetoPayments.integrationModal.title")
+      }), /*#__PURE__*/jsx(Label, {
+        className: "leading-snug",
+        children: t("neetoPayments.integrationModal.subtitle")
+      })]
+    }), /*#__PURE__*/jsxs(Radio, {
+      stacked: true,
+      value: selectedOption,
+      onChange: function onChange(event) {
+        return setSelectedOption(event.target.value);
+      },
+      children: [/*#__PURE__*/jsx(Radio.Item, {
+        className: "neeto-ui-border-black w-96 py-2",
+        label: t("neetoPayments.integrationModal.createAccount"),
+        name: "accountMethod",
+        value: INTEGRATION_METHOD.createNewAccount
+      }), /*#__PURE__*/jsx(Radio.Item, {
+        className: "neeto-ui-border-black w-96 py-2",
+        label: t("neetoPayments.integrationModal.connectAccount"),
+        name: "accountMethod",
+        value: INTEGRATION_METHOD.useExistingAccount
+      })]
+    }), /*#__PURE__*/jsx(Button, {
+      label: t("neetoPayments.common.continue"),
+      onClick: handleSubmit
+    })]
+  });
 };
 
-const Finish = withT(_ref => {
-  let {
-    t,
-    onSuccess
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Finish$1, {
+var Finish = withT(function (_ref) {
+  var t = _ref.t,
+    onSuccess = _ref.onSuccess;
+  return /*#__PURE__*/jsx(Finish$1, {
     title: t("v2.payment.finishTitle"),
-    onClick: onSuccess
-  }, /*#__PURE__*/React.createElement(AccountDetails, null));
+    onClick: onSuccess,
+    children: /*#__PURE__*/jsx(AccountDetails, {})
+  });
 });
 
-const StripeConnect = _ref => {
-  let {
-    holdableId = null,
-    isOpen,
-    onClose,
-    isPlatform = false,
-    returnUrl
-  } = _ref;
-  const {
-    data: {
-      account: stripeAccount
-    } = {}
-  } = useFetchConnectedStripeAccount(holdableId);
-  const [activeTab, setActiveTab] = useStateWithDependency(getInitialTab(stripeAccount), [stripeAccount]);
-  const steps = useMemo(() => {
-    const [connect, configure, finish, demo] = INTEGRATION_STEPS;
-    return [{
-      ...connect,
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var StripeConnect = function StripeConnect(_ref) {
+  var _ref$holdableId = _ref.holdableId,
+    holdableId = _ref$holdableId === void 0 ? null : _ref$holdableId,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    _ref$isPlatform = _ref.isPlatform,
+    isPlatform = _ref$isPlatform === void 0 ? false : _ref$isPlatform,
+    returnUrl = _ref.returnUrl;
+  var _useFetchConnectedStr = useFetchConnectedStripeAccount(holdableId),
+    _useFetchConnectedStr2 = _useFetchConnectedStr.data,
+    _useFetchConnectedStr3 = _useFetchConnectedStr2 === void 0 ? {} : _useFetchConnectedStr2,
+    stripeAccount = _useFetchConnectedStr3.account;
+  var _useStateWithDependen = useStateWithDependency(getInitialTab(stripeAccount), [stripeAccount]),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    activeTab = _useStateWithDependen2[0],
+    setActiveTab = _useStateWithDependen2[1];
+  var steps = useMemo(function () {
+    var _INTEGRATION_STEPS = _slicedToArray(INTEGRATION_STEPS, 4),
+      connect = _INTEGRATION_STEPS[0],
+      configure = _INTEGRATION_STEPS[1],
+      finish = _INTEGRATION_STEPS[2],
+      demo = _INTEGRATION_STEPS[3];
+    return [_objectSpread(_objectSpread({}, connect), {}, {
       isActive: activeTab === STEPS.connect,
       isCompleted: isPresent(stripeAccount) || activeTab === STEPS.configure || isPlatform
-    }, {
-      ...configure,
+    }), _objectSpread(_objectSpread({}, configure), {}, {
       isActive: activeTab === STEPS.configure,
-      isCompleted: !!stripeAccount?.isConnected
-    }, {
-      ...finish,
+      isCompleted: !!(stripeAccount !== null && stripeAccount !== void 0 && stripeAccount.isConnected)
+    }), _objectSpread(_objectSpread({}, finish), {}, {
       isActive: activeTab === STEPS.finish,
       isCompleted: activeTab === STEPS.finish || activeTab === STEPS.demo
-    }, {
-      ...demo,
+    }), _objectSpread(_objectSpread({}, demo), {}, {
       isActive: activeTab === STEPS.demo,
       isCompleted: activeTab === STEPS.demo
-    }];
+    })];
   }, [activeTab, stripeAccount]);
-  return /*#__PURE__*/React.createElement(Modal, {
-    isOpen,
-    onClose,
-    steps
-  }, activeTab === STEPS.connect && /*#__PURE__*/React.createElement(Connect, {
-    holdableId,
-    returnUrl,
-    setActiveTab
-  }), activeTab === STEPS.configure && /*#__PURE__*/React.createElement(Configure, {
-    holdableId,
-    returnUrl
-  }), activeTab === STEPS.finish && /*#__PURE__*/React.createElement(Finish, {
-    onSuccess: onClose
-  }), activeTab === STEPS.demo && /*#__PURE__*/React.createElement(Demo, {
-    onClose
-  }));
+  return /*#__PURE__*/jsxs(Modal, {
+    isOpen: isOpen,
+    onClose: onClose,
+    steps: steps,
+    children: [activeTab === STEPS.connect && /*#__PURE__*/jsx(Connect, {
+      holdableId: holdableId,
+      returnUrl: returnUrl,
+      setActiveTab: setActiveTab
+    }), activeTab === STEPS.configure && /*#__PURE__*/jsx(Configure, {
+      holdableId: holdableId,
+      returnUrl: returnUrl
+    }), activeTab === STEPS.finish && /*#__PURE__*/jsx(Finish, {
+      onSuccess: onClose
+    }), activeTab === STEPS.demo && /*#__PURE__*/jsx(Demo, {
+      onClose: onClose
+    })]
+  });
 };
 
 export { StripeConnect as default };