feat(settings): allow to delete wire banks (#6223)

blockchain · Jan 10, 2024 · cff9291 · cff9291
1 parent a7e2647
commit cff9291
Show file tree

Hide file tree

Showing 13 changed files with 161 additions and 103 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/sagas.ts
@@ -24,6 +24,7 @@ import {
   BrokerageModalOriginType,
   BSCheckoutFormValuesType,
   CustodialSanctionsEnum,
+  DeleteBankEndpointTypes,
   ModalName,
   ProductEligibilityForUser,
   VerifyIdentityOriginType
@@ -44,12 +45,22 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
     coreSagas,
     networks
   })
-  const deleteSavedBank = function* ({ payload: bankId }: ReturnType<typeof A.deleteSavedBank>) {
+  const deleteSavedBank = function* ({
+    payload: { bankId, bankType = 'banktransfer' }
+  }: ReturnType<typeof A.deleteSavedBank>) {
     try {
       yield put(actions.form.startSubmit('linkedBanks'))
-      yield call(api.deleteSavedAccount, bankId, 'banktransfer')
-      yield put(A.fetchBankTransferAccounts())
-      yield take([A.fetchBankTransferAccountsSuccess.type, A.fetchBankTransferAccountsError.type])
+      yield call(api.deleteSavedAccount, bankId, bankType)
+      if (bankType === 'banktransfer') {
+        yield put(A.fetchBankTransferAccounts())
+        yield take([A.fetchBankTransferAccountsSuccess.type, A.fetchBankTransferAccountsError.type])
+      } else {
+        yield put(actions.custodial.fetchCustodialBeneficiaries({}))
+        yield take([
+          actions.custodial.fetchCustodialBeneficiariesSuccess.type,
+          actions.custodial.fetchCustodialBeneficiariesFailure.type
+        ])
+      }
       yield put(actions.form.stopSubmit('linkedBanks'))
       yield put(actions.alerts.displaySuccess('Bank removed.'))
       yield put(actions.modals.closeModal(ModalName.BANK_DETAILS_MODAL))

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/slice.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/slice.ts
@@ -10,7 +10,7 @@ import {
 } from '@core/types'
 import { PartialClientErrorProperties } from 'data/analytics/types/errors'
 import { ModalNameType } from 'data/modals/types'
-import { BankTransferAccountType } from 'data/types'
+import { BankTransferAccountType, DeleteBankEndpointTypes } from 'data/types'
 
 import {
   AddBankStepType,
@@ -48,7 +48,13 @@ const brokerageSlice = createSlice({
   name: 'brokerage',
   reducers: {
     createFiatDeposit: () => {},
-    deleteSavedBank: (state, action: PayloadAction<BankTransferAccountType['id']>) => {},
+    deleteSavedBank: (
+      state,
+      action: PayloadAction<{
+        bankId: BankTransferAccountType['id']
+        bankType: DeleteBankEndpointTypes
+      }>
+    ) => {},
     fetchBankLinkCredentials: (state, action: PayloadAction<WalletFiatType>) => {},
     fetchBankLinkCredentialsError: (state, action: PayloadAction<string | Error>) => {
       state.bankCredentials = Remote.Failure(action.payload)
@@ -145,6 +151,9 @@ const brokerageSlice = createSlice({
     setReason: (state, action: PayloadAction<PlaidSettlementErrorReasons | undefined>) => {
       state.reason = action.payload
     },
+    setRedirectBackToStep: (state, action: PayloadAction<boolean>) => {
+      state.redirectBackToStep = action.payload ?? false
+    },
     setupBankTransferProvider: () => {},
     showModal: (
       state,
@@ -176,6 +185,7 @@ export const {
   setBankCredentials,
   setBankDetails,
   setDWStep,
+  setRedirectBackToStep,
   showModal
 } = brokerageSlice.actions
 const { actions } = brokerageSlice

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/types.ts
@@ -295,3 +295,5 @@ export type DepositTerms = {
   settlementType: SettlementType
   withdrawalLockDays: number
 }
+
+export type DeleteBankEndpointTypes = 'banks' | 'banktransfer'
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/BankDetails/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/BankDetails/index.tsx
@@ -1,20 +1,17 @@
 import React, { useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
 import { compose } from 'redux'
 
 import Flyout, { duration, FlyoutChild } from 'components/Flyout'
-import { selectors } from 'data'
 import { ModalName } from 'data/types'
 import ModalEnhancer from 'providers/ModalEnhancer'
 
 import { ModalPropsType } from '../../../types'
 import Template from './template'
+import { BankDetailsModalProps } from './types'
 
-const BankDetails = (props: ModalPropsType) => {
+const BankDetails = (props: BankDetailsModalProps & ModalPropsType) => {
   const [show, setShow] = useState(false)
 
-  const account = useSelector(selectors.components.brokerage.getAccount)
-
   const handleClose = () => {
     setShow(false)
     setTimeout(() => {
@@ -26,12 +23,21 @@ const BankDetails = (props: ModalPropsType) => {
     setShow(true)
   }, [])
 
-  if (!account) return null
+  if (!props.accountId) return null
+
+  const { accountId, accountNumber, accountType, bankName, bankType } = props
 
   return (
     <Flyout {...props} onClose={handleClose} isOpen={show} data-e2e='bankDetailsModal'>
       <FlyoutChild>
-        <Template account={account} handleClose={handleClose} />
+        <Template
+          handleClose={handleClose}
+          accountId={accountId}
+          accountType={accountType}
+          bankType={bankType}
+          accountNumber={accountNumber}
+          bankName={bankName}
+        />
       </FlyoutChild>
     </Flyout>
   )

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/BankDetails/template.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/BankDetails/template.tsx
@@ -7,10 +7,13 @@ import styled from 'styled-components'
 import { getCurrency } from '@core/redux/settings/selectors'
 import { Button, HeartbeatLoader, Icon, Image, Text } from 'blockchain-info-components'
 import { FlyoutWrapper } from 'components/Flyout'
+import { modals } from 'data/actions'
 import { brokerage } from 'data/components/actions'
-import { BankTransferAccountType, BrokerageModalOriginType } from 'data/types'
+import { ModalName } from 'data/types'
 import { getBankLogoImageName } from 'services/images'
 
+import { BankDetailsModalProps } from './types'
+
 const Wrapper = styled.div`
   width: 100%;
   height: 100%;
@@ -51,38 +54,35 @@ export const BankDetails = styled.div`
 `
 
 type Props = {
-  account: BankTransferAccountType
   handleClose: () => void
-}
+} & BankDetailsModalProps
 
 const Template: React.FC<InjectedFormProps<{}, Props> & Props> = ({
-  account,
+  accountId,
+  accountNumber,
+  accountType,
+  bankName,
+  bankType,
   handleClose,
   submitting
 }) => {
   const dispatch = useDispatch()
   const walletCurrency = useSelector(getCurrency).getOrElse('USD')
 
-  const { details } = account
-
-  const bankAccountName = details ? (
-    `${details?.bankName || ''} ${details?.accountNumber || ''}`
-  ) : (
-    <FormattedMessage id='copy.bank_account' defaultMessage='Bank Account' />
-  )
-
   const onClick = () => {
+    dispatch(brokerage.setRedirectBackToStep(true))
+
     dispatch(
-      brokerage.showModal({
-        modalType: 'REMOVE_BANK_MODAL',
-        origin: BrokerageModalOriginType.BANK
-      })
-    )
-    dispatch(
-      brokerage.setBankDetails({
-        account,
-        redirectBackToStep: true
-      })
+      modals.showModal(
+        ModalName.REMOVE_BANK_MODAL,
+        { origin: 'BankDetailsModal' },
+        {
+          accountId,
+          accountNumber,
+          bankName,
+          bankType
+        }
+      )
     )
   }
 
@@ -102,16 +102,16 @@ const Template: React.FC<InjectedFormProps<{}, Props> & Props> = ({
         </CloseContainer>
 
         <BankIconWrapper>
-          {details && <Image name={getBankLogoImageName(details.bankName)} />}
+          <Image name={getBankLogoImageName(bankName)} />
         </BankIconWrapper>
         <BankDetails>
-          <Text size='24px' color='grey900' weight={600}>
-            {bankAccountName}
+          <Text size='24px' color='grey900' weight={600} capitalize>
+            {bankName ?? <FormattedMessage id='copy.bank_account' defaultMessage='Bank Account' />}
           </Text>
-          <Text size='24px' color='grey600' weight={500}>
-            {details.bankAccountType?.toLowerCase() || ''}{' '}
+          <Text size='24px' color='grey600' weight={500} capitalize>
+            {accountType.toLowerCase() || ''}{' '}
             <FormattedMessage id='scenes.settings.general.account' defaultMessage='account' />{' '}
-            {account.details?.accountNumber || ''}
+            {accountNumber || ''}
           </Text>
         </BankDetails>
       </FlyoutWrapper>

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/BankDetails/types.ts b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/BankDetails/types.ts
@@ -0,0 +1,9 @@
+import { BSPaymentTypes } from '@core/types'
+
+export type BankDetailsModalProps = {
+  accountId: string
+  accountNumber: string
+  accountType: string
+  bankName: string
+  bankType: BSPaymentTypes.BANK_ACCOUNT | BSPaymentTypes.BANK_TRANSFER
+}
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/RemoveBank/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/RemoveBank/index.tsx
@@ -1,20 +1,17 @@
 import React, { useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
 import { compose } from 'redux'
 
 import Flyout, { duration, FlyoutChild } from 'components/Flyout'
-import { selectors } from 'data'
 import { ModalName } from 'data/types'
 import ModalEnhancer from 'providers/ModalEnhancer'
 
 import { ModalPropsType } from '../../../types'
 import Template from './template'
+import { RemoveBankModalProps } from './types'
 
-const RemoveBankFlyout = (props: ModalPropsType) => {
+const RemoveBankFlyout = (props: RemoveBankModalProps & ModalPropsType) => {
   const [show, setShow] = useState(false)
 
-  const account = useSelector(selectors.components.brokerage.getAccount)
-
   const handleClose = () => {
     setShow(false)
     setTimeout(() => {
@@ -26,12 +23,21 @@ const RemoveBankFlyout = (props: ModalPropsType) => {
     setShow(true)
   }, [])
 
-  if (!account) return null
+  if (!props.accountId) return null
+
+  const { accountId, accountNumber, bankName, bankType } = props
+  const entityType = bankType === 'BANK_ACCOUNT' ? 'banks' : 'banktransfer'
 
   return (
     <Flyout {...props} onClose={handleClose} isOpen={show} data-e2e='bankRemoveModal'>
       <FlyoutChild>
-        <Template account={account} handleClose={handleClose} />
+        <Template
+          handleClose={handleClose}
+          accountId={accountId}
+          accountNumber={accountNumber}
+          bankName={bankName}
+          entityType={entityType}
+        />
       </FlyoutChild>
     </Flyout>
   )

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/RemoveBank/template.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/RemoveBank/template.tsx
@@ -9,7 +9,9 @@ import { FlyoutWrapper } from 'components/Flyout'
 import Form from 'components/Form/Form'
 import { getRedirectBackToStep } from 'data/components/brokerage/selectors'
 import { deleteSavedBank } from 'data/components/brokerage/slice'
-import { BankTransferAccountType } from 'data/types'
+import { DeleteBankEndpointTypes } from 'data/types'
+
+import { RemoveBankModalProps } from './types'
 
 const Wrapper = styled.div`
   width: 100%;
@@ -41,12 +43,15 @@ const LeftTopCol = styled.div`
 `
 
 type Props = {
-  account: BankTransferAccountType
+  entityType: DeleteBankEndpointTypes
   handleClose: () => void
-}
+} & Omit<RemoveBankModalProps, 'bankType'>
 
 const Template: React.FC<InjectedFormProps<{}, Props> & Props> = ({
-  account,
+  accountId,
+  accountNumber,
+  bankName,
+  entityType,
   handleClose,
   submitting
 }) => {
@@ -56,13 +61,9 @@ const Template: React.FC<InjectedFormProps<{}, Props> & Props> = ({
 
   const handleSubmit = (e) => {
     e.preventDefault()
-    dispatch(deleteSavedBank(account.id))
+    dispatch(deleteSavedBank({ bankId: accountId, bankType: entityType }))
   }
 
-  const bankAccountName = account?.details
-    ? `${account.details?.bankName} ${account.details?.accountNumber || ''}`
-    : `bank account`
-
   return (
     <Wrapper>
       <RemoveBankFlyout>
@@ -113,8 +114,8 @@ const Template: React.FC<InjectedFormProps<{}, Props> & Props> = ({
           >
             <FormattedMessage
               id='modals.brokerage.remove_bank.description'
-              defaultMessage="You're about to remove your {bankAccountName}"
-              values={{ bankAccountName }}
+              defaultMessage="You're about to remove your {bankName} account ending in {accountNumber}"
+              values={{ accountNumber, bankName }}
             />
           </Text>
           <Button

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/RemoveBank/types.ts b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/RemoveBank/types.ts
@@ -0,0 +1,8 @@
+import { BSPaymentTypes } from '@core/types'
+
+export type RemoveBankModalProps = {
+  accountId: string
+  accountNumber: string
+  bankName: string
+  bankType: BSPaymentTypes.BANK_ACCOUNT | BSPaymentTypes.BANK_TRANSFER
+}
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedBanks/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedBanks/index.tsx
@@ -22,7 +22,7 @@ const LinkedBanks = () => {
 
   if (isLoading || isNotAsked) return <Loading />
   if (hasError || !data) return null
-  return <Success {...data} />
+  return <Success bankAccounts={data.bankAccounts} paymentMethods={data.paymentMethods} />
 }
 
 export default LinkedBanks