@bigbinary/neeto-payments-frontend 6.1.12 → 6.1.13

package/dist/cjs/StripeConnect.js

@@ -5,24 +5,23 @@ var Container = require('@bigbinary/neeto-molecules/Container');
 var Header = require('@bigbinary/neeto-molecules/Header');
 var reactI18next = require('react-i18next');
 var reactRouterDom = require('react-router-dom');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var DOMPurify = require('dompurify');
 var utils = require('neetocommons/utils');
 var misc = require('@bigbinary/neeto-icons/misc');
 var CardLayout = require('@bigbinary/neeto-molecules/CardLayout');
 var neetoui = require('@bigbinary/neetoui');
-var useIntegrationsApi = require('./useIntegrationsApi-BO9PhVVO.js');
-var constants = require('./index-CZ_VFGNj.js');
+var useIntegrationsApi = require('./useIntegrationsApi-CVlTmLKc.js');
+var constants = require('./index-D6V3Vofs.js');
 var i18next = require('i18next');
 var yup = require('yup');
+var jsxRuntime = require('react/jsx-runtime');
 var formik = require('@bigbinary/neetoui/formik');
-var useAccountsApi = require('./useAccountsApi-DC617yB4.js');
+var useAccountsApi = require('./useAccountsApi-B2MZWHMY.js');
 var reactQuery = require('@tanstack/react-query');
 var axios = require('axios');
-var queryConstants = require('./queryConstants-Cka1X6GX.js');
+var queryConstants = require('./queryConstants-Dc6wh21D.js');
 var reactUtils = require('neetocommons/react-utils');
-require('@babel/runtime/helpers/defineProperty');
 require('neetocommons/constants');
 require('decimal.js');
 require('ramda');
@@ -46,168 +45,159 @@ function _interopNamespaceDefault(e) {
 
 var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
 
-var INTEGRATION_METHOD = {
+const INTEGRATION_METHOD = {
   useExistingAccount: "use_existing_account",
   createNewAccount: "create_new_account"
 };
-var INITIAL_VALUES = {
+const INITIAL_VALUES = {
   country: "",
   return_url: ""
 };
-var VALIDATION_SCHEMA = yup__namespace.object().shape({
+const VALIDATION_SCHEMA = yup__namespace.object().shape({
   country: yup__namespace.object().required(i18next.t("neetoPayments.validations.countryRequired"))
 });
 
-var sanitize = DOMPurify.sanitize;
-var Account = function Account(_ref) {
-  var processingPageRoute = _ref.processingPageRoute,
-    countryPageRoute = _ref.countryPageRoute,
-    holdableId = _ref.holdableId,
-    productNameLabel = _ref.productNameLabel,
-    getStripeAccount = _ref.getStripeAccount,
-    manageRoute = _ref.manageRoute;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useState = react.useState(INTEGRATION_METHOD.createNewAccount),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedOption = _useState2[0],
-    setSelectedOption = _useState2[1];
-  var history = reactRouterDom.useHistory();
-  var _useFetchPaymentInteg = useIntegrationsApi.useFetchPaymentIntegrations(),
-    _useFetchPaymentInteg2 = _useFetchPaymentInteg.data,
-    _useFetchPaymentInteg3 = _useFetchPaymentInteg2 === void 0 ? {} : _useFetchPaymentInteg2,
-    stripeStandardAccounts = _useFetchPaymentInteg3.stripeStandardAccounts,
-    stripeStandardAccount = _useFetchPaymentInteg3.stripeStandardAccount;
-  var stripeAccount = getStripeAccount(stripeStandardAccounts) || stripeStandardAccount;
-  var handleSubmit = function handleSubmit() {
+const sanitize = DOMPurify.sanitize;
+const Account = ({
+  processingPageRoute,
+  countryPageRoute,
+  holdableId,
+  productNameLabel,
+  getStripeAccount,
+  manageRoute
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const [selectedOption, setSelectedOption] = react.useState(INTEGRATION_METHOD.createNewAccount);
+  const history = reactRouterDom.useHistory();
+  const {
+    data: {
+      stripeStandardAccounts,
+      stripeStandardAccount
+    } = {}
+  } = useIntegrationsApi.useFetchPaymentIntegrations();
+  const stripeAccount = getStripeAccount(stripeStandardAccounts) || stripeStandardAccount;
+  const handleSubmit = () => {
     if (selectedOption !== INTEGRATION_METHOD.useExistingAccount) {
       return history.push(countryPageRoute);
     }
-    var params = {
-      return_url: "".concat(window.location.origin).concat(processingPageRoute)
+    const params = {
+      return_url: `${window.location.origin}${processingPageRoute}`
     };
     if (holdableId) {
       params.holdable_id = holdableId;
     }
-    var stripeConnectUrl = utils.buildUrl(constants.STRIPE_CONNECT_ENDPOINT, params);
+    const stripeConnectUrl = utils.buildUrl(constants.STRIPE_CONNECT_ENDPOINT, params);
     return window.location.href = sanitize(stripeConnectUrl);
   };
-  react.useEffect(function () {
-    if (stripeAccount !== null && stripeAccount !== void 0 && stripeAccount.isConnected) {
+  react.useEffect(() => {
+    if (stripeAccount?.isConnected) {
       history.push(manageRoute);
     }
-  }, [stripeAccount === null || stripeAccount === void 0 ? void 0 : stripeAccount.isConnected]);
-  return /*#__PURE__*/React.createElement(CardLayout, {
-    icon: /*#__PURE__*/React.createElement(misc.Stripe, {
+  }, [stripeAccount?.isConnected]);
+  return /*#__PURE__*/jsxRuntime.jsx(CardLayout, {
+    icon: /*#__PURE__*/jsxRuntime.jsx(misc.Stripe, {
       size: 48
     }),
     title: t("neetoPayments.stripeConnect.title"),
-    actionBlock: /*#__PURE__*/React.createElement(neetoui.Button, {
+    actionBlock: /*#__PURE__*/jsxRuntime.jsx(neetoui.Button, {
       label: t("neetoPayments.common.continue"),
       onClick: handleSubmit
     }),
     description: t("neetoPayments.stripeConnect.unlinkedDescription", {
-      productNameLabel: productNameLabel
+      productNameLabel
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsxs(neetoui.Radio, {
+      value: selectedOption,
+      onChange: ({
+        target: {
+          value
+        }
+      }) => setSelectedOption(value),
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoui.Radio.Item, {
+        label: t("neetoPayments.stripeConnect.createNewAccount"),
+        name: "accountMethod",
+        value: INTEGRATION_METHOD.createNewAccount
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Radio.Item, {
+        label: t("neetoPayments.stripeConnect.useExistingAccount"),
+        name: "accountMethod",
+        value: INTEGRATION_METHOD.useExistingAccount
+      })]
     })
-  }, /*#__PURE__*/React.createElement(neetoui.Radio, {
-    value: selectedOption,
-    onChange: function onChange(_ref2) {
-      var value = _ref2.target.value;
-      return setSelectedOption(value);
-    }
-  }, /*#__PURE__*/React.createElement(neetoui.Radio.Item, {
-    label: t("neetoPayments.stripeConnect.createNewAccount"),
-    name: "accountMethod",
-    value: INTEGRATION_METHOD.createNewAccount
-  }), /*#__PURE__*/React.createElement(neetoui.Radio.Item, {
-    label: t("neetoPayments.stripeConnect.useExistingAccount"),
-    name: "accountMethod",
-    value: INTEGRATION_METHOD.useExistingAccount
-  })));
+  });
 };
 
-var fetchCountries = function fetchCountries() {
-  return axios.get("".concat(constants.BASE_URL, "/api/v1/stripe/countries"));
-};
-var countriesApi = {
-  fetchCountries: fetchCountries
+const fetchCountries = () => axios.get(`${constants.BASE_URL}/api/v1/stripe/countries`);
+const countriesApi = {
+  fetchCountries
 };
 
-var useFetchStripeCountries = function useFetchStripeCountries() {
-  return reactQuery.useQuery({
-    queryKey: [queryConstants.QUERY_KEYS.STRIPE_COUNTRIES],
-    queryFn: countriesApi.fetchCountries
-  });
-};
+const useFetchStripeCountries = () => reactQuery.useQuery({
+  queryKey: [queryConstants.QUERY_KEYS.STRIPE_COUNTRIES],
+  queryFn: countriesApi.fetchCountries
+});
 
-var buildRefreshUrl = function buildRefreshUrl(accountId, returnUrl) {
-  return "".concat(window.location.origin, "/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: neetocist.humanize(country[0]),
-      value: country[1]
-    };
-  });
-};
+const buildRefreshUrl = (accountId, returnUrl) => `${window.location.origin}/payments/api/v1/stripe/callbacks/${accountId}/refresh?return_url=${returnUrl}`;
+const buildCountryOptions = countries => Object.entries(countries)?.map(country => ({
+  label: neetocist.humanize(country[0]),
+  value: country[1]
+}));
 
-var Country = function Country(_ref) {
-  var processingPageRoute = _ref.processingPageRoute,
-    productNameLabel = _ref.productNameLabel,
-    getStripeAccount = _ref.getStripeAccount,
-    _ref$holdableId = _ref.holdableId,
-    holdableId = _ref$holdableId === void 0 ? "" : _ref$holdableId;
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPolling = _useState2[0],
-    setIsPolling = _useState2[1];
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var history = reactRouterDom.useHistory();
-  var refetchInterval = function refetchInterval(query) {
-    var _ref2 = query.state.data || {},
-      jobStatus = _ref2.jobStatus,
-      onboarding = _ref2.onboarding;
+const Country = ({
+  processingPageRoute,
+  productNameLabel,
+  getStripeAccount,
+  holdableId = ""
+}) => {
+  const [isPolling, setIsPolling] = react.useState(false);
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const history = reactRouterDom.useHistory();
+  const refetchInterval = query => {
+    const {
+      jobStatus,
+      onboarding
+    } = query.state.data || {};
     if (jobStatus === "complete") {
-      window.open(onboarding === null || onboarding === void 0 ? void 0 : onboarding.url, "_self");
+      window.open(onboarding?.url, "_self");
       return false;
     }
     return constants.POLLING_INTERVAL;
   };
-  var _useCreateStripeAccou = useAccountsApi.useCreateStripeAccount({
-      onSuccess: function onSuccess() {
-        return setIsPolling(true);
-      }
-    }),
-    isCreating = _useCreateStripeAccou.isPending,
-    _useCreateStripeAccou2 = _useCreateStripeAccou.data,
-    _useCreateStripeAccou3 = _useCreateStripeAccou2 === void 0 ? {} : _useCreateStripeAccou2,
-    jobId = _useCreateStripeAccou3.jobId,
-    createStripeAccount = _useCreateStripeAccou.mutate;
-  var _useFetchPaymentInteg = useIntegrationsApi.useFetchPaymentIntegrations(),
-    _useFetchPaymentInteg2 = _useFetchPaymentInteg.data,
-    _useFetchPaymentInteg3 = _useFetchPaymentInteg2 === void 0 ? {} : _useFetchPaymentInteg2,
-    stripeStandardAccounts = _useFetchPaymentInteg3.stripeStandardAccounts,
-    stripeStandardAccount = _useFetchPaymentInteg3.stripeStandardAccount;
-  var stripeAccount = getStripeAccount(stripeStandardAccounts) || stripeStandardAccount;
-  var _useFetchStripeCountr = useFetchStripeCountries(),
-    isLoading = _useFetchStripeCountr.isLoading,
-    _useFetchStripeCountr2 = _useFetchStripeCountr.data,
-    _useFetchStripeCountr3 = _useFetchStripeCountr2 === void 0 ? {} : _useFetchStripeCountr2,
-    _useFetchStripeCountr4 = _useFetchStripeCountr3.countries,
-    countries = _useFetchStripeCountr4 === void 0 ? {} : _useFetchStripeCountr4;
+  const {
+    isPending: isCreating,
+    data: {
+      jobId
+    } = {},
+    mutate: createStripeAccount
+  } = useAccountsApi.useCreateStripeAccount({
+    onSuccess: () => setIsPolling(true)
+  });
+  const {
+    data: {
+      stripeStandardAccounts,
+      stripeStandardAccount
+    } = {}
+  } = useIntegrationsApi.useFetchPaymentIntegrations();
+  const stripeAccount = getStripeAccount(stripeStandardAccounts) || stripeStandardAccount;
+  const {
+    isLoading,
+    data: {
+      countries = {}
+    } = {}
+  } = useFetchStripeCountries();
   useAccountsApi.usePollingStripeAccountCreationStatus(jobId, {
-    refetchInterval: refetchInterval,
+    refetchInterval,
     enabled: neetocist.isPresent(jobId)
   });
-  var handleSubmit = function handleSubmit(values) {
+  const handleSubmit = values => {
     if (neetocist.isPresent(stripeAccount)) {
-      return window.location.href = buildRefreshUrl(stripeAccount === null || stripeAccount === void 0 ? void 0 : stripeAccount.id, "".concat(window.location.origin).concat(processingPageRoute));
+      return window.location.href = buildRefreshUrl(stripeAccount?.id, `${window.location.origin}${processingPageRoute}`);
     }
-    var payload = {
-      returnUrl: "".concat(window.location.origin).concat(processingPageRoute),
+    const payload = {
+      returnUrl: `${window.location.origin}${processingPageRoute}`,
       country: values.country.value
     };
     if (holdableId) {
@@ -216,183 +206,191 @@ var Country = function Country(_ref) {
     return createStripeAccount(payload);
   };
   if (isLoading) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center justify-center grow w-full"
-    }, /*#__PURE__*/React.createElement(neetoui.Spinner, null));
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex items-center justify-center grow w-full",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Spinner, {})
+    });
   }
-  return /*#__PURE__*/React.createElement(formik.Form, {
+  return /*#__PURE__*/jsxRuntime.jsx(formik.Form, {
     className: "w-full",
     formikProps: {
       enableReinitialize: true,
       initialValues: INITIAL_VALUES,
       validationSchema: VALIDATION_SCHEMA,
       onSubmit: handleSubmit
-    }
-  }, /*#__PURE__*/React.createElement(CardLayout, {
-    icon: /*#__PURE__*/React.createElement(misc.Stripe, {
-      size: 48
-    }),
-    title: t("neetoPayments.stripeConnect.title"),
-    actionBlock: /*#__PURE__*/React.createElement(formik.ActionBlock, {
-      cancelButtonProps: {
-        onClick: function onClick() {
-          return history.goBack();
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(CardLayout, {
+      icon: /*#__PURE__*/jsxRuntime.jsx(misc.Stripe, {
+        size: 48
+      }),
+      title: t("neetoPayments.stripeConnect.title"),
+      actionBlock: /*#__PURE__*/jsxRuntime.jsx(formik.ActionBlock, {
+        cancelButtonProps: {
+          onClick: () => history.goBack()
+        },
+        isSubmitting: isCreating || isPolling,
+        submitButtonProps: {
+          label: t("neetoPayments.common.connect")
         }
-      },
-      isSubmitting: isCreating || isPolling,
-      submitButtonProps: {
-        label: t("neetoPayments.common.connect")
-      }
-    }),
-    description: t("neetoPayments.stripeConnect.unlinkedDescription", {
-      productNameLabel: productNameLabel
+      }),
+      description: t("neetoPayments.stripeConnect.unlinkedDescription", {
+        productNameLabel
+      }),
+      children: /*#__PURE__*/jsxRuntime.jsx(formik.Select, {
+        required: true,
+        helpText: t("neetoPayments.stripeConnect.countryHelpText"),
+        label: t("neetoPayments.common.country"),
+        name: "country",
+        options: buildCountryOptions(countries),
+        placeholder: t("neetoPayments.stripeConnect.countryPlaceholder")
+      })
     })
-  }, /*#__PURE__*/React.createElement(formik.Select, {
-    required: true,
-    helpText: t("neetoPayments.stripeConnect.countryHelpText"),
-    label: t("neetoPayments.common.country"),
-    name: "country",
-    options: buildCountryOptions(countries),
-    placeholder: t("neetoPayments.stripeConnect.countryPlaceholder")
-  })));
+  });
 };
 
-var Processing = function Processing(_ref) {
-  var baseRoute = _ref.baseRoute,
-    getStripeAccount = _ref.getStripeAccount,
-    productNameLabel = _ref.productNameLabel,
-    manageRoute = _ref.manageRoute;
-  var queryClient = reactQuery.useQueryClient();
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPolling = _useState2[0],
-    setIsPolling = _useState2[1];
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var history = reactRouterDom.useHistory();
-  var _useQueryParams = reactUtils.useQueryParams(),
-    error = _useQueryParams.error,
-    _useQueryParams$error = _useQueryParams.errorDescription,
-    errorDescription = _useQueryParams$error === void 0 ? "" : _useQueryParams$error;
-  var refetchInterval = function refetchInterval(query) {
-    var _ref2 = query.state.data || {},
-      stripeStandardAccounts = _ref2.stripeStandardAccounts,
-      stripeStandardAccount = _ref2.stripeStandardAccount;
-    var stripeAccount = getStripeAccount(stripeStandardAccounts) || stripeStandardAccount;
-    if (!(stripeAccount !== null && stripeAccount !== void 0 && stripeAccount.isConnected) && isPolling) {
+const Processing = ({
+  baseRoute,
+  getStripeAccount,
+  productNameLabel,
+  manageRoute
+}) => {
+  const queryClient = reactQuery.useQueryClient();
+  const [isPolling, setIsPolling] = react.useState(false);
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const history = reactRouterDom.useHistory();
+  const {
+    error,
+    errorDescription = ""
+  } = reactUtils.useQueryParams();
+  const refetchInterval = query => {
+    const {
+      stripeStandardAccounts,
+      stripeStandardAccount
+    } = query.state.data || {};
+    const stripeAccount = getStripeAccount(stripeStandardAccounts) || stripeStandardAccount;
+    if (!stripeAccount?.isConnected && isPolling) {
       return constants.POLLING_INTERVAL;
     }
-    if (stripeAccount !== null && stripeAccount !== void 0 && stripeAccount.isConnected) {
+    if (stripeAccount?.isConnected) {
       setIsPolling(false);
       history.push(manageRoute);
     }
     return false;
   };
-  var _useFetchPaymentInteg = useIntegrationsApi.useFetchPaymentIntegrations({
-      refetchInterval: refetchInterval,
-      enabled: neetocist.isNotPresent(error)
-    }),
-    _useFetchPaymentInteg2 = _useFetchPaymentInteg.data,
-    _useFetchPaymentInteg3 = _useFetchPaymentInteg2 === void 0 ? {} : _useFetchPaymentInteg2,
-    stripeStandardAccounts = _useFetchPaymentInteg3.stripeStandardAccounts,
-    stripeStandardAccount = _useFetchPaymentInteg3.stripeStandardAccount;
-  var errorMessage = error === constants.ERROR_TYPE.processing_error ? errorDescription : neetocist.humanize(errorDescription);
-  var stripeAccount = getStripeAccount(stripeStandardAccounts) || stripeStandardAccount;
-  var isAccountProcessingFailed = neetocist.isPresent(error) && neetocist.isPresent(errorDescription) || !isPolling && !(stripeAccount !== null && stripeAccount !== void 0 && stripeAccount.isConnected);
-  var handleRetry = function handleRetry() {
+  const {
+    data: {
+      stripeStandardAccounts,
+      stripeStandardAccount
+    } = {}
+  } = useIntegrationsApi.useFetchPaymentIntegrations({
+    refetchInterval,
+    enabled: neetocist.isNotPresent(error)
+  });
+  const errorMessage = error === constants.ERROR_TYPE.processing_error ? errorDescription : neetocist.humanize(errorDescription);
+  const stripeAccount = getStripeAccount(stripeStandardAccounts) || stripeStandardAccount;
+  const isAccountProcessingFailed = neetocist.isPresent(error) && neetocist.isPresent(errorDescription) || !isPolling && !stripeAccount?.isConnected;
+  const handleRetry = () => {
     queryClient.invalidateQueries({
       queryKey: [queryConstants.QUERY_KEYS.PAYMENT_INTEGRATION_LIST]
     });
     history.push(baseRoute);
   };
-  react.useEffect(function () {
-    if (stripeAccount !== null && stripeAccount !== void 0 && stripeAccount.isConnected) {
+  react.useEffect(() => {
+    if (stripeAccount?.isConnected) {
       history.push(manageRoute);
     }
     if (neetocist.isNotPresent(error)) {
       setIsPolling(true);
     }
-    var pollingTimeoutId = setTimeout(function () {
+    const pollingTimeoutId = setTimeout(() => {
       setIsPolling(false);
     }, constants.MAX_POLLING_TIME);
-    return function () {
+    return () => {
       clearTimeout(pollingTimeoutId);
     };
   }, []);
-  return /*#__PURE__*/React.createElement(CardLayout, {
-    icon: /*#__PURE__*/React.createElement(misc.Stripe, {
+  return /*#__PURE__*/jsxRuntime.jsxs(CardLayout, {
+    icon: /*#__PURE__*/jsxRuntime.jsx(misc.Stripe, {
       size: 48
     }),
     title: t("neetoPayments.stripeConnect.title"),
-    actionBlock: isAccountProcessingFailed && /*#__PURE__*/React.createElement(neetoui.Button, {
+    actionBlock: isAccountProcessingFailed && /*#__PURE__*/jsxRuntime.jsx(neetoui.Button, {
       label: t("neetoPayments.common.tryAgain"),
       onClick: handleRetry
     }),
     description: isAccountProcessingFailed ? t("neetoPayments.common.processingFailed") : t("neetoPayments.stripeConnect.linkedDescription", {
-      productNameLabel: productNameLabel
-    })
-  }, isPolling && /*#__PURE__*/React.createElement(neetoui.Callout, null, /*#__PURE__*/React.createElement("div", {
-    className: "flex space-x-4"
-  }, /*#__PURE__*/React.createElement(neetoui.Spinner, null), /*#__PURE__*/React.createElement(neetoui.Typography, {
-    style: "body1"
-  }, t("neetoPayments.stripeConnect.verifyingMessage")))), isAccountProcessingFailed && /*#__PURE__*/React.createElement(neetoui.Callout, {
-    style: "danger"
-  }, /*#__PURE__*/React.createElement(neetoui.Typography, {
-    style: "body1"
-  }, neetocist.isPresent(errorDescription) ? errorMessage : t("neetoPayments.stripeConnect.failedProcessing"))));
+      productNameLabel
+    }),
+    children: [isPolling && /*#__PURE__*/jsxRuntime.jsx(neetoui.Callout, {
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex space-x-4",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoui.Spinner, {}), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+          style: "body1",
+          children: t("neetoPayments.stripeConnect.verifyingMessage")
+        })]
+      })
+    }), isAccountProcessingFailed && /*#__PURE__*/jsxRuntime.jsx(neetoui.Callout, {
+      style: "danger",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+        style: "body1",
+        children: neetocist.isPresent(errorDescription) ? errorMessage : t("neetoPayments.stripeConnect.failedProcessing")
+      })
+    })]
+  });
 };
 
-var StripeConnect = function StripeConnect(_ref) {
-  var baseRoute = _ref.baseRoute,
-    manageRoute = _ref.manageRoute,
-    breadcrumbs = _ref.breadcrumbs,
-    holdableId = _ref.holdableId,
-    productNameLabel = _ref.productNameLabel,
-    _ref$getStripeAccount = _ref.getStripeAccount,
-    getStripeAccount = _ref$getStripeAccount === void 0 ? neetocist.noop : _ref$getStripeAccount;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var countryPageRoute = "".concat(baseRoute, "/countries");
-  var processingPageRoute = "".concat(baseRoute, "/processing");
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, {
-    breadcrumbs: breadcrumbs,
-    title: t("neetoPayments.common.connect")
-  }), /*#__PURE__*/React.createElement(reactRouterDom.Switch, null, /*#__PURE__*/React.createElement(reactRouterDom.Route, {
-    exact: true,
-    path: baseRoute,
-    render: function render() {
-      return /*#__PURE__*/React.createElement(Account, {
-        countryPageRoute: countryPageRoute,
-        getStripeAccount: getStripeAccount,
-        holdableId: holdableId,
-        manageRoute: manageRoute,
-        processingPageRoute: processingPageRoute,
-        productNameLabel: productNameLabel
-      });
-    }
-  }), /*#__PURE__*/React.createElement(reactRouterDom.Route, {
-    exact: true,
-    path: countryPageRoute,
-    component: function component() {
-      return /*#__PURE__*/React.createElement(Country, {
-        getStripeAccount: getStripeAccount,
-        holdableId: holdableId,
-        processingPageRoute: processingPageRoute,
-        productNameLabel: productNameLabel
-      });
-    }
-  }), /*#__PURE__*/React.createElement(reactRouterDom.Route, {
-    exact: true,
-    path: processingPageRoute,
-    component: function component() {
-      return /*#__PURE__*/React.createElement(Processing, {
-        baseRoute: baseRoute,
-        getStripeAccount: getStripeAccount,
-        manageRoute: manageRoute,
-        productNameLabel: productNameLabel
-      });
-    }
-  })));
+const StripeConnect = ({
+  baseRoute,
+  manageRoute,
+  breadcrumbs,
+  holdableId,
+  productNameLabel,
+  getStripeAccount = neetocist.noop
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const countryPageRoute = `${baseRoute}/countries`;
+  const processingPageRoute = `${baseRoute}/processing`;
+  return /*#__PURE__*/jsxRuntime.jsxs(Container, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
+      breadcrumbs,
+      title: t("neetoPayments.common.connect")
+    }), /*#__PURE__*/jsxRuntime.jsxs(reactRouterDom.Switch, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+        exact: true,
+        path: baseRoute,
+        render: () => /*#__PURE__*/jsxRuntime.jsx(Account, {
+          countryPageRoute,
+          getStripeAccount,
+          holdableId,
+          manageRoute,
+          processingPageRoute,
+          productNameLabel
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+        exact: true,
+        path: countryPageRoute,
+        component: () => /*#__PURE__*/jsxRuntime.jsx(Country, {
+          getStripeAccount,
+          holdableId,
+          processingPageRoute,
+          productNameLabel
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+        exact: true,
+        path: processingPageRoute,
+        component: () => /*#__PURE__*/jsxRuntime.jsx(Processing, {
+          baseRoute,
+          getStripeAccount,
+          manageRoute,
+          productNameLabel
+        })
+      })]
+    })]
+  });
 };
 
 module.exports = StripeConnect;