Add EnableBanking synchronization

src/pages/settings/bank-accounts/common/components/ConnectAccounts.tsx

@@ -19,6 +19,7 @@ import { useTranslation } from 'react-i18next';
 import { MdLink } from 'react-icons/md';
 import yodleeLogo from '/dap-logos/yodlee.svg';
 import goCardlessLogo from '/dap-logos/goCardless.png';
+import enableBankingLogo from '/dap-logos/enableBanking.svg';
 import { useAccentColor } from '$app/common/hooks/useAccentColor';
 import { useClickAway } from 'react-use';
 import { useColorScheme } from '$app/common/colors';
@@ -32,7 +33,7 @@ export function ConnectAccounts() {
 
   const divRef = useRef<HTMLDivElement>(null);
 
-  const [account, setAccount] = useState<'yodlee' | 'nordigen'>();
+  const [account, setAccount] = useState<'yodlee' | 'nordigen' | 'enablebanking'>();
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
 
   useClickAway(divRef, () => {
@@ -74,6 +75,21 @@ export function ConnectAccounts() {
     });
   };
 
+  const handleConnectEnableBanking = () => {
+    request('POST', endpoint('/api/v1/one_time_token'), {
+      context: 'enablebanking',
+      platform: 'react',
+    }).then((tokenResponse) => {
+      handleClose();
+
+      window.open(
+        endpoint('/enablebanking/connect/:hash', {
+          hash: tokenResponse?.data?.hash,
+        })
+      );
+    });
+  };
+
   const handleConnectAccount = () => {
     if (account === 'yodlee') {
       handleConnectYodlee();
@@ -82,14 +98,18 @@ export function ConnectAccounts() {
     if (account === 'nordigen') {
       handleConnectNordigen();
     }
+
+    if (account === 'enablebanking') {
+      handleConnectEnableBanking();
+    }
   };
 
   return (
     <>
       <Button
         type="secondary"
         onClick={() =>
-          isSelfHosted() ? handleConnectNordigen() : setIsModalVisible(true)
+          setIsModalVisible(true)
         }
       >
         <span className="mr-2">{<Icon element={MdLink} size={20} />}</span>
@@ -102,7 +122,7 @@ export function ConnectAccounts() {
         onClose={handleClose}
       >
         <div ref={divRef} className="flex flex-col space-y-6">
-          {enterprisePlan() && (
+          {!isSelfHosted() && enterprisePlan() && (
             <div
               className="flex flex-col cursor-pointer border-4"
               style={{
@@ -161,6 +181,37 @@ export function ConnectAccounts() {
             </div>
           )}
 
+          {enterprisePlan() && (
+            <div
+              data-cy="enableBankingBox"
+              className="flex flex-col items-center cursor-pointer border-4"
+              style={{
+                borderColor: account === 'enablebanking' ? accentColor : colors.$24,
+                height: '10.25rem',
+              }}
+              onClick={() => setAccount('enablebanking')}
+            >
+              <div className="flex flex-1 items-center justify-center">
+                <img src={enableBankingLogo} style={{ width: '15rem' }} />
+              </div>
+
+              <div
+                className="flex items-center justify-center space-x-2 text-xs pb-3"
+                onClick={(event) => event.stopPropagation()}
+              >
+                <p className="text-gray-500">{t('enableBanking_regions')}.</p>
+
+                <Link
+                  className="text-xs"
+                  to="https://enablebanking.com/open-banking-apis"
+                  external
+                >
+                  {t('learn_more')}.
+                </Link>
+              </div>
+            </div>
+          )}
+
           <Button
             behavior="button"
             onClick={handleConnectAccount}

src/pages/settings/bank-accounts/common/hooks/useBankAccountColumns.tsx

@@ -24,6 +24,7 @@ import { Tooltip } from '$app/components/Tooltip';
 enum IntegrationType {
   Yodlee = 'YODLEE',
   Nordigen = 'NORDIGEN',
+  EnableBanking = 'ENABLEBANKING',
 }
 
 export const useBankAccountColumns = () => {
@@ -60,6 +61,19 @@ export const useBankAccountColumns = () => {
     });
   };
 
+  const handleConnectEnableBanking = () => {
+    request('POST', endpoint('/api/v1/one_time_token'), {
+      context: 'enablebanking',
+      platform: 'react',
+    }).then((tokenResponse) => {
+      window.open(
+        endpoint('/enablebanking/connect/:hash', {
+          hash: tokenResponse?.data?.hash,
+        })
+      );
+    });
+  }
+
   const columns: DataTableColumns<BankAccount> = [
     {
       id: 'bank_account_name',
@@ -75,7 +89,8 @@ export const useBankAccountColumns = () => {
           </Link>
 
           {(bankAccount.integration_type === IntegrationType.Nordigen ||
-            bankAccount.integration_type === IntegrationType.Yodlee) &&
+            bankAccount.integration_type === IntegrationType.Yodlee ||
+              bankAccount.integration_type === IntegrationType.EnableBanking) &&
             bankAccount.disabled_upstream && (
               <Tooltip
                 message={t('reconnect') as string}
@@ -100,6 +115,12 @@ export const useBankAccountColumns = () => {
                     ) {
                       handleConnectYodlee();
                     }
+
+                    if (
+                      bankAccount.integration_type === IntegrationType.EnableBanking
+                    ) {
+                      handleConnectEnableBanking();
+                    }
                   }}
                 >
                   <MdWarning color="red" size={22} />