@bigbinary/neeto-payments-frontend 6.1.12 → 6.1.13

package/dist/StripeConnect.js

@@ -3,190 +3,180 @@ import Container from '@bigbinary/neeto-molecules/Container';
 import Header from '@bigbinary/neeto-molecules/Header';
 import { useTranslation } from 'react-i18next';
 import { useHistory, Switch, Route } from 'react-router-dom';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useEffect } from 'react';
 import DOMPurify from 'dompurify';
 import { buildUrl } from 'neetocommons/utils';
 import { Stripe } from '@bigbinary/neeto-icons/misc';
 import CardLayout from '@bigbinary/neeto-molecules/CardLayout';
 import { Button, Radio, Spinner, Callout, Typography } from '@bigbinary/neetoui';
-import { u as useFetchPaymentIntegrations } from './useIntegrationsApi-D1bkKtoy.js';
-import { y as STRIPE_CONNECT_ENDPOINT, B as BASE_URL, t as POLLING_INTERVAL, E as ERROR_TYPE, M as MAX_POLLING_TIME } from './index-C7irWceQ.js';
+import { u as useFetchPaymentIntegrations } from './useIntegrationsApi-D9eA_FrB.js';
+import { y as STRIPE_CONNECT_ENDPOINT, B as BASE_URL, t as POLLING_INTERVAL, E as ERROR_TYPE, M as MAX_POLLING_TIME } from './index-CNouM9_z.js';
 import { t } from 'i18next';
 import * as yup from 'yup';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Form, ActionBlock, Select } from '@bigbinary/neetoui/formik';
-import { a as useCreateStripeAccount, b as usePollingStripeAccountCreationStatus } from './useAccountsApi-DPem_UA-.js';
+import { a as useCreateStripeAccount, b as usePollingStripeAccountCreationStatus } from './useAccountsApi-C9_eNmEZ.js';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import axios from 'axios';
-import { Q as QUERY_KEYS } from './queryConstants-DFKKEEo0.js';
+import { Q as QUERY_KEYS } from './queryConstants-C7AqdemO.js';
 import { useQueryParams } from 'neetocommons/react-utils';
-import '@babel/runtime/helpers/defineProperty';
 import 'neetocommons/constants';
 import 'decimal.js';
 import 'ramda';
 
-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.object().shape({
+const VALIDATION_SCHEMA = yup.object().shape({
   country: yup.object().required(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 = useTranslation(),
-    t = _useTranslation.t;
-  var _useState = useState(INTEGRATION_METHOD.createNewAccount),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedOption = _useState2[0],
-    setSelectedOption = _useState2[1];
-  var history = useHistory();
-  var _useFetchPaymentInteg = 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
+  } = useTranslation();
+  const [selectedOption, setSelectedOption] = useState(INTEGRATION_METHOD.createNewAccount);
+  const history = useHistory();
+  const {
+    data: {
+      stripeStandardAccounts,
+      stripeStandardAccount
+    } = {}
+  } = 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 = buildUrl(STRIPE_CONNECT_ENDPOINT, params);
+    const stripeConnectUrl = buildUrl(STRIPE_CONNECT_ENDPOINT, params);
     return window.location.href = sanitize(stripeConnectUrl);
   };
-  useEffect(function () {
-    if (stripeAccount !== null && stripeAccount !== void 0 && stripeAccount.isConnected) {
+  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(Stripe, {
+  }, [stripeAccount?.isConnected]);
+  return /*#__PURE__*/jsx(CardLayout, {
+    icon: /*#__PURE__*/jsx(Stripe, {
       size: 48
     }),
     title: t("neetoPayments.stripeConnect.title"),
-    actionBlock: /*#__PURE__*/React.createElement(Button, {
+    actionBlock: /*#__PURE__*/jsx(Button, {
       label: t("neetoPayments.common.continue"),
       onClick: handleSubmit
     }),
     description: t("neetoPayments.stripeConnect.unlinkedDescription", {
-      productNameLabel: productNameLabel
+      productNameLabel
+    }),
+    children: /*#__PURE__*/jsxs(Radio, {
+      value: selectedOption,
+      onChange: ({
+        target: {
+          value
+        }
+      }) => setSelectedOption(value),
+      children: [/*#__PURE__*/jsx(Radio.Item, {
+        label: t("neetoPayments.stripeConnect.createNewAccount"),
+        name: "accountMethod",
+        value: INTEGRATION_METHOD.createNewAccount
+      }), /*#__PURE__*/jsx(Radio.Item, {
+        label: t("neetoPayments.stripeConnect.useExistingAccount"),
+        name: "accountMethod",
+        value: INTEGRATION_METHOD.useExistingAccount
+      })]
     })
-  }, /*#__PURE__*/React.createElement(Radio, {
-    value: selectedOption,
-    onChange: function onChange(_ref2) {
-      var value = _ref2.target.value;
-      return setSelectedOption(value);
-    }
-  }, /*#__PURE__*/React.createElement(Radio.Item, {
-    label: t("neetoPayments.stripeConnect.createNewAccount"),
-    name: "accountMethod",
-    value: INTEGRATION_METHOD.createNewAccount
-  }), /*#__PURE__*/React.createElement(Radio.Item, {
-    label: t("neetoPayments.stripeConnect.useExistingAccount"),
-    name: "accountMethod",
-    value: INTEGRATION_METHOD.useExistingAccount
-  })));
+  });
 };
 
-var fetchCountries = function fetchCountries() {
-  return axios.get("".concat(BASE_URL, "/api/v1/stripe/countries"));
-};
-var countriesApi = {
-  fetchCountries: fetchCountries
+const fetchCountries = () => axios.get(`${BASE_URL}/api/v1/stripe/countries`);
+const countriesApi = {
+  fetchCountries
 };
 
-var useFetchStripeCountries = function useFetchStripeCountries() {
-  return useQuery({
-    queryKey: [QUERY_KEYS.STRIPE_COUNTRIES],
-    queryFn: countriesApi.fetchCountries
-  });
-};
+const useFetchStripeCountries = () => useQuery({
+  queryKey: [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: 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: 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 = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPolling = _useState2[0],
-    setIsPolling = _useState2[1];
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var history = 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] = useState(false);
+  const {
+    t
+  } = useTranslation();
+  const history = 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 POLLING_INTERVAL;
   };
-  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;
-  var _useFetchPaymentInteg = 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
+  } = useCreateStripeAccount({
+    onSuccess: () => setIsPolling(true)
+  });
+  const {
+    data: {
+      stripeStandardAccounts,
+      stripeStandardAccount
+    } = {}
+  } = useFetchPaymentIntegrations();
+  const stripeAccount = getStripeAccount(stripeStandardAccounts) || stripeStandardAccount;
+  const {
+    isLoading,
+    data: {
+      countries = {}
+    } = {}
+  } = useFetchStripeCountries();
   usePollingStripeAccountCreationStatus(jobId, {
-    refetchInterval: refetchInterval,
+    refetchInterval,
     enabled: isPresent(jobId)
   });
-  var handleSubmit = function handleSubmit(values) {
+  const handleSubmit = values => {
     if (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) {
@@ -195,183 +185,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(Spinner, null));
+    return /*#__PURE__*/jsx("div", {
+      className: "flex items-center justify-center grow w-full",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
   }
-  return /*#__PURE__*/React.createElement(Form, {
+  return /*#__PURE__*/jsx(Form, {
     className: "w-full",
     formikProps: {
       enableReinitialize: true,
       initialValues: INITIAL_VALUES,
       validationSchema: VALIDATION_SCHEMA,
       onSubmit: handleSubmit
-    }
-  }, /*#__PURE__*/React.createElement(CardLayout, {
-    icon: /*#__PURE__*/React.createElement(Stripe, {
-      size: 48
-    }),
-    title: t("neetoPayments.stripeConnect.title"),
-    actionBlock: /*#__PURE__*/React.createElement(ActionBlock, {
-      cancelButtonProps: {
-        onClick: function onClick() {
-          return history.goBack();
+    },
+    children: /*#__PURE__*/jsx(CardLayout, {
+      icon: /*#__PURE__*/jsx(Stripe, {
+        size: 48
+      }),
+      title: t("neetoPayments.stripeConnect.title"),
+      actionBlock: /*#__PURE__*/jsx(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__*/jsx(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(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 = useQueryClient();
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPolling = _useState2[0],
-    setIsPolling = _useState2[1];
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var history = useHistory();
-  var _useQueryParams = 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 = useQueryClient();
+  const [isPolling, setIsPolling] = useState(false);
+  const {
+    t
+  } = useTranslation();
+  const history = useHistory();
+  const {
+    error,
+    errorDescription = ""
+  } = useQueryParams();
+  const refetchInterval = query => {
+    const {
+      stripeStandardAccounts,
+      stripeStandardAccount
+    } = query.state.data || {};
+    const stripeAccount = getStripeAccount(stripeStandardAccounts) || stripeStandardAccount;
+    if (!stripeAccount?.isConnected && isPolling) {
       return POLLING_INTERVAL;
     }
-    if (stripeAccount !== null && stripeAccount !== void 0 && stripeAccount.isConnected) {
+    if (stripeAccount?.isConnected) {
       setIsPolling(false);
       history.push(manageRoute);
     }
     return false;
   };
-  var _useFetchPaymentInteg = useFetchPaymentIntegrations({
-      refetchInterval: refetchInterval,
-      enabled: isNotPresent(error)
-    }),
-    _useFetchPaymentInteg2 = _useFetchPaymentInteg.data,
-    _useFetchPaymentInteg3 = _useFetchPaymentInteg2 === void 0 ? {} : _useFetchPaymentInteg2,
-    stripeStandardAccounts = _useFetchPaymentInteg3.stripeStandardAccounts,
-    stripeStandardAccount = _useFetchPaymentInteg3.stripeStandardAccount;
-  var errorMessage = error === ERROR_TYPE.processing_error ? errorDescription : humanize(errorDescription);
-  var stripeAccount = getStripeAccount(stripeStandardAccounts) || stripeStandardAccount;
-  var isAccountProcessingFailed = isPresent(error) && isPresent(errorDescription) || !isPolling && !(stripeAccount !== null && stripeAccount !== void 0 && stripeAccount.isConnected);
-  var handleRetry = function handleRetry() {
+  const {
+    data: {
+      stripeStandardAccounts,
+      stripeStandardAccount
+    } = {}
+  } = useFetchPaymentIntegrations({
+    refetchInterval,
+    enabled: isNotPresent(error)
+  });
+  const errorMessage = error === ERROR_TYPE.processing_error ? errorDescription : humanize(errorDescription);
+  const stripeAccount = getStripeAccount(stripeStandardAccounts) || stripeStandardAccount;
+  const isAccountProcessingFailed = isPresent(error) && isPresent(errorDescription) || !isPolling && !stripeAccount?.isConnected;
+  const handleRetry = () => {
     queryClient.invalidateQueries({
       queryKey: [QUERY_KEYS.PAYMENT_INTEGRATION_LIST]
     });
     history.push(baseRoute);
   };
-  useEffect(function () {
-    if (stripeAccount !== null && stripeAccount !== void 0 && stripeAccount.isConnected) {
+  useEffect(() => {
+    if (stripeAccount?.isConnected) {
       history.push(manageRoute);
     }
     if (isNotPresent(error)) {
       setIsPolling(true);
     }
-    var pollingTimeoutId = setTimeout(function () {
+    const pollingTimeoutId = setTimeout(() => {
       setIsPolling(false);
     }, MAX_POLLING_TIME);
-    return function () {
+    return () => {
       clearTimeout(pollingTimeoutId);
     };
   }, []);
-  return /*#__PURE__*/React.createElement(CardLayout, {
-    icon: /*#__PURE__*/React.createElement(Stripe, {
+  return /*#__PURE__*/jsxs(CardLayout, {
+    icon: /*#__PURE__*/jsx(Stripe, {
       size: 48
     }),
     title: t("neetoPayments.stripeConnect.title"),
-    actionBlock: isAccountProcessingFailed && /*#__PURE__*/React.createElement(Button, {
+    actionBlock: isAccountProcessingFailed && /*#__PURE__*/jsx(Button, {
       label: t("neetoPayments.common.tryAgain"),
       onClick: handleRetry
     }),
     description: isAccountProcessingFailed ? t("neetoPayments.common.processingFailed") : t("neetoPayments.stripeConnect.linkedDescription", {
-      productNameLabel: productNameLabel
-    })
-  }, isPolling && /*#__PURE__*/React.createElement(Callout, null, /*#__PURE__*/React.createElement("div", {
-    className: "flex space-x-4"
-  }, /*#__PURE__*/React.createElement(Spinner, null), /*#__PURE__*/React.createElement(Typography, {
-    style: "body1"
-  }, t("neetoPayments.stripeConnect.verifyingMessage")))), isAccountProcessingFailed && /*#__PURE__*/React.createElement(Callout, {
-    style: "danger"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "body1"
-  }, isPresent(errorDescription) ? errorMessage : t("neetoPayments.stripeConnect.failedProcessing"))));
+      productNameLabel
+    }),
+    children: [isPolling && /*#__PURE__*/jsx(Callout, {
+      children: /*#__PURE__*/jsxs("div", {
+        className: "flex space-x-4",
+        children: [/*#__PURE__*/jsx(Spinner, {}), /*#__PURE__*/jsx(Typography, {
+          style: "body1",
+          children: t("neetoPayments.stripeConnect.verifyingMessage")
+        })]
+      })
+    }), isAccountProcessingFailed && /*#__PURE__*/jsx(Callout, {
+      style: "danger",
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "body1",
+        children: 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 ? noop : _ref$getStripeAccount;
-  var _useTranslation = 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(Switch, null, /*#__PURE__*/React.createElement(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(Route, {
-    exact: true,
-    path: countryPageRoute,
-    component: function component() {
-      return /*#__PURE__*/React.createElement(Country, {
-        getStripeAccount: getStripeAccount,
-        holdableId: holdableId,
-        processingPageRoute: processingPageRoute,
-        productNameLabel: productNameLabel
-      });
-    }
-  }), /*#__PURE__*/React.createElement(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 = noop
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const countryPageRoute = `${baseRoute}/countries`;
+  const processingPageRoute = `${baseRoute}/processing`;
+  return /*#__PURE__*/jsxs(Container, {
+    children: [/*#__PURE__*/jsx(Header, {
+      breadcrumbs,
+      title: t("neetoPayments.common.connect")
+    }), /*#__PURE__*/jsxs(Switch, {
+      children: [/*#__PURE__*/jsx(Route, {
+        exact: true,
+        path: baseRoute,
+        render: () => /*#__PURE__*/jsx(Account, {
+          countryPageRoute,
+          getStripeAccount,
+          holdableId,
+          manageRoute,
+          processingPageRoute,
+          productNameLabel
+        })
+      }), /*#__PURE__*/jsx(Route, {
+        exact: true,
+        path: countryPageRoute,
+        component: () => /*#__PURE__*/jsx(Country, {
+          getStripeAccount,
+          holdableId,
+          processingPageRoute,
+          productNameLabel
+        })
+      }), /*#__PURE__*/jsx(Route, {
+        exact: true,
+        path: processingPageRoute,
+        component: () => /*#__PURE__*/jsx(Processing, {
+          baseRoute,
+          getStripeAccount,
+          manageRoute,
+          productNameLabel
+        })
+      })]
+    })]
+  });
 };
 
 export { StripeConnect as default };