chore(settings): unify styling accross linked banks (#6226)

* chore(settings): unify styling accross linked banks * feat(wirebanks): updates after ux review * feat(wire): change field and validation * feat(wirebanks): revert name change until BE is deployed
blockchain · Jan 23, 2024 · a770bb6 · a770bb6
1 parent 3968ac5
commit a770bb6
Show file tree

Hide file tree

Showing 15 changed files with 197 additions and 192 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Flyout/model.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Flyout/model.tsx
@@ -902,7 +902,7 @@ const BankWire = ({
     <Col style={{ width: '100%' }}>
       <Content>
         <Value asTitle>{beneficiary.name}</Value>
-        <Title asValue>{beneficiary.agent.account}</Title>
+        <Title asValue>Wire Account ending in {beneficiary.address.slice(-4)}</Title>
 
         {type === 'DEPOSIT' && (
           <CartridgeContainer>

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
@@ -1,5 +1,4 @@
 import { getFormValues } from 'redux-form'
-import { END } from 'redux-saga'
 import { call, delay, put, race, retry, select, take } from 'redux-saga/effects'
 
 import { Remote } from '@core'
@@ -50,7 +49,6 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
   }: ReturnType<typeof A.deleteSavedBank>) {
     try {
       yield put(actions.form.startSubmit('linkedBanks'))
-      yield put(actions.modals.closeModal(ModalName.REMOVE_BANK_MODAL))
       yield call(api.deleteSavedAccount, bankId, bankType)
       if (bankType === 'banktransfer') {
         yield put(A.fetchBankTransferAccounts())
@@ -63,7 +61,9 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
         ])
       }
       yield put(actions.modals.closeModal(ModalName.BANK_DETAILS_MODAL))
+      yield put(actions.modals.closeModal(ModalName.REMOVE_BANK_MODAL))
       yield put(actions.form.stopSubmit('linkedBanks'))
+      yield put(actions.form.destroy('linkedBanks'))
       yield put(actions.alerts.displaySuccess('Bank removed.'))
     } catch (e) {
       const error = errorHandler(e)

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
@@ -19,39 +19,38 @@ export enum OBEntityType {
   SAFE_CONNECT_UK = 'Safeconnect(UK)'
 }
 
-export type YodleeAttributesType = {
-  fastlinkParams: {
-    configName: 'Verification'
-  }
-  fastlinkUrl: string
-  token: string
-  tokenExpiresAt: string
-}
-
 export type FastLinkType = {
-  attributes: YodleeAttributesType
+  attributes: {
+    fastlinkParams: {
+      configName: 'Verification'
+    }
+    fastlinkUrl: string
+    token: string
+    tokenExpiresAt: string
+  }
   id: string
   partner: BankPartners.YODLEE
 }
 
 export type OBType = {
-  attributes: OBAttributesType
+  attributes: {
+    entity: OBEntityType
+    institutions: OBInstitution[]
+  }
   id: string
   partner: BankPartners.YAPILY
 }
 
-export type PlaidAttributesType = {
-  link_token: string
-  tokenExpiresAt: string
+type PlaidType = {
+  attributes: {
+    link_token: string
+    tokenExpiresAt: string
+  }
+  id: string
+  partner: BankPartners.PLAID
 }
 
-export type BankCredentialsType = {
-  id: string
-} & (
-  | { attributes: OBAttributesType; partner: BankPartners.YAPILY }
-  | { attributes: PlaidAttributesType; partner: BankPartners.PLAID }
-  | { attributes: YodleeAttributesType; partner: BankPartners.YODLEE }
-)
+export type BankCredentialsType = OBType | FastLinkType | PlaidType
 
 interface OBCountryType {
   countryCode2: string
@@ -72,10 +71,6 @@ export interface OBInstitution {
   media: OBMediaType[]
   name: string
 }
-interface OBAttributesType {
-  entity: OBEntityType
-  institutions: OBInstitution[]
-}
 
 export enum BankStatusType {
   ACTIVE = 'ACTIVE',

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
@@ -8,26 +8,39 @@ import { ModalPropsType } from '../../../types'
 import Template from './template'
 import { BankDetailsModalProps } from './types'
 
-const BankDetails = (props: BankDetailsModalProps & ModalPropsType) => {
+const BankDetails = ({
+  accountId,
+  accountNumber,
+  accountType,
+  bankName,
+  bankType,
+  close,
+  position,
+  total
+}: BankDetailsModalProps & ModalPropsType) => {
   const [show, setShow] = useState(false)
 
   const handleClose = () => {
     setShow(false)
     setTimeout(() => {
-      props.close()
+      close()
     }, duration)
   }
 
   useEffect(() => {
     setShow(true)
   }, [])
 
-  if (!props.accountId) return null
-
-  const { accountId, accountNumber, accountType, bankName, bankType } = props
+  if (!accountId) return null
 
   return (
-    <Flyout {...props} onClose={handleClose} isOpen={show} data-e2e='bankDetailsModal'>
+    <Flyout
+      total={total}
+      position={position}
+      onClose={handleClose}
+      isOpen={show}
+      data-e2e='bankDetailsModal'
+    >
       <FlyoutChild>
         <Template
           handleClose={handleClose}

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
@@ -5,6 +5,7 @@ import { InjectedFormProps, reduxForm } from 'redux-form'
 import styled from 'styled-components'
 
 import { getCurrency } from '@core/redux/settings/selectors'
+import { BSPaymentTypes } from '@core/types'
 import { Button, HeartbeatLoader, Icon, Image, Text } from 'blockchain-info-components'
 import { FlyoutWrapper } from 'components/Flyout'
 import { modals } from 'data/actions'
@@ -130,10 +131,17 @@ const Template: React.FC<InjectedFormProps<{}, Props> & Props> = ({
           weight={500}
           style={{ marginTop: '40px', textAlign: 'center' }}
         >
-          <FormattedMessage
-            id='modals.brokerage.bank_preview.disclaimer'
-            defaultMessage='This account can be used for buys, sells & withdrawals.'
-          />
+          {bankType === BSPaymentTypes.BANK_ACCOUNT ? (
+            <FormattedMessage
+              id='modals.brokerage.bank_preview.disclaimer_wires'
+              defaultMessage='This account can be used for withdrawals only.'
+            />
+          ) : (
+            <FormattedMessage
+              id='modals.brokerage.bank_preview.disclaimer'
+              defaultMessage='This account can be used for buys, sells & withdrawals.'
+            />
+          )}
         </Text>
       </DisclaimerWrapper>
       <BankFlyoutWrapper>

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
@@ -8,27 +8,40 @@ import { ModalPropsType } from '../../../types'
 import Template from './template'
 import { RemoveBankModalProps } from './types'
 
-const RemoveBankFlyout = (props: RemoveBankModalProps & ModalPropsType) => {
+const RemoveBank = ({
+  accountId,
+  accountNumber,
+  bankName,
+  bankType,
+  close,
+  position,
+  total
+}: RemoveBankModalProps & ModalPropsType) => {
   const [show, setShow] = useState(false)
 
   const handleClose = () => {
     setShow(false)
     setTimeout(() => {
-      props.close()
+      close()
     }, duration)
   }
 
   useEffect(() => {
     setShow(true)
   }, [])
 
-  if (!props.accountId) return null
+  if (!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'>
+    <Flyout
+      total={total}
+      position={position}
+      onClose={handleClose}
+      isOpen={show}
+      data-e2e='bankRemoveModal'
+    >
       <FlyoutChild>
         <Template
           handleClose={handleClose}
@@ -42,6 +55,4 @@ const RemoveBankFlyout = (props: RemoveBankModalProps & ModalPropsType) => {
   )
 }
 
-export default ModalEnhancer(ModalName.REMOVE_BANK_MODAL, { transition: duration })(
-  RemoveBankFlyout
-)
+export default ModalEnhancer(ModalName.REMOVE_BANK_MODAL, { transition: duration })(RemoveBank)
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
@@ -18,7 +18,7 @@ const Wrapper = styled.div`
   height: 100%;
   display: flex;
 `
-const RemoveBankFlyout = styled(FlyoutWrapper)`
+const ContentFlyout = styled(FlyoutWrapper)`
   display: flex;
   flex-direction: column;
 `
@@ -66,7 +66,7 @@ const Template: React.FC<InjectedFormProps<{}, Props> & Props> = ({
 
   return (
     <Wrapper>
-      <RemoveBankFlyout>
+      <ContentFlyout>
         {redirectBackToStep ? (
           <TopText color='grey800' size='20px' weight={600}>
             <LeftTopCol>
@@ -147,7 +147,7 @@ const Template: React.FC<InjectedFormProps<{}, Props> & Props> = ({
             <FormattedMessage id='buttons.cancel' defaultMessage='Cancel' />
           </Button>
         </CustomForm>
-      </RemoveBankFlyout>
+      </ContentFlyout>
     </Wrapper>
   )
 }

diff --git a/...ntend/src/modals/Brokerage/Banks/Withdraw/AddBankWireForm/Steps/EnterIntermediaryData.tsx b/...ntend/src/modals/Brokerage/Banks/Withdraw/AddBankWireForm/Steps/EnterIntermediaryData.tsx
@@ -6,15 +6,16 @@ import { Field, formValueSelector, reduxForm } from 'redux-form'
 import { Button, Text } from 'blockchain-info-components'
 import FlyoutFooter from 'components/Flyout/Footer'
 import FormLabel from 'components/Form/FormLabel'
-import NumberBox from 'components/Form/NumberBox'
 import TextBox from 'components/Form/TextBox'
-import { required, validBankName, validRoutingNumber } from 'services/forms'
+import { maxLength, onlyNumbers, required, validRoutingNumber } from 'services/forms'
 
 import { Header } from '../Header'
 import { WIRE_BANK_FORM } from './constants'
 import { FieldsWrapper } from './StepsStyles'
 import { StepProps, WireBankFormType } from './StepsTypes'
 
+const validBankName = maxLength(35)
+
 const EnterIntermediaryBank = ({ onClickBack, onNextStep }: StepProps) => {
   const { intermediaryAccountNumber, intermediaryBankName, intermediaryRoutingNumber } =
     useSelector((state) =>
@@ -59,6 +60,7 @@ const EnterIntermediaryBank = ({ onClickBack, onNextStep }: StepProps) => {
             name='intermediaryBankName'
             noLastPass
             validate={[required, validBankName]}
+            errorBottom
           />
         </div>
         <div>
@@ -69,12 +71,13 @@ const EnterIntermediaryBank = ({ onClickBack, onNextStep }: StepProps) => {
             />
           </FormLabel>
           <Field
-            component={NumberBox}
+            component={TextBox}
             placeholder='Enter 9-digit routing number'
             data-e2e='intermediaryRoutingNumber'
             name='intermediaryRoutingNumber'
             noLastPass
-            validate={[required, validRoutingNumber]}
+            validate={[required, validRoutingNumber, onlyNumbers]}
+            errorBottom
           />
         </div>
         <div>
@@ -85,13 +88,14 @@ const EnterIntermediaryBank = ({ onClickBack, onNextStep }: StepProps) => {
             />
           </FormLabel>
           <Field
-            component={NumberBox}
+            component={TextBox}
             type='number'
             placeholder='Enter account number'
             data-e2e='intermediaryAccountNumber'
             name='intermediaryAccountNumber'
             noLastPass
-            validate={[required]}
+            validate={[required, onlyNumbers]}
+            errorBottom
           />
         </div>
       </FieldsWrapper>

diff --git a/...t-v4-frontend/src/modals/Brokerage/Banks/Withdraw/AddBankWireForm/Steps/EnterUserData.tsx b/...t-v4-frontend/src/modals/Brokerage/Banks/Withdraw/AddBankWireForm/Steps/EnterUserData.tsx
@@ -6,15 +6,16 @@ import { Field, formValueSelector, reduxForm } from 'redux-form'
 import { Button, Text } from 'blockchain-info-components'
 import FlyoutFooter from 'components/Flyout/Footer'
 import FormLabel from 'components/Form/FormLabel'
-import NumberBox from 'components/Form/NumberBox'
 import TextBox from 'components/Form/TextBox'
-import { required, validBankName, validRoutingNumber } from 'services/forms'
+import { maxLength, onlyNumbers, required, validRoutingNumber } from 'services/forms'
 
 import { Header } from '../Header'
 import { WIRE_BANK_FORM } from './constants'
 import { FieldsWrapper } from './StepsStyles'
 import { StepProps, WireBankFormType } from './StepsTypes'
 
+const validBankName = maxLength(35)
+
 const EnterUserData = ({ onClickBack, onNextStep }: StepProps) => {
   const { accountNumber, bankName, hasIntermediaryBank, routingNumber } = useSelector((state) =>
     formValueSelector(WIRE_BANK_FORM)(
@@ -65,6 +66,7 @@ const EnterUserData = ({ onClickBack, onNextStep }: StepProps) => {
             data-e2e='bankName'
             name='bankName'
             validate={[required, validBankName]}
+            errorBottom
           />
         </div>
 
@@ -80,11 +82,12 @@ const EnterUserData = ({ onClickBack, onNextStep }: StepProps) => {
             bank&apos;s ACH routing number
           </Text>
           <Field
-            component={NumberBox}
+            component={TextBox}
             placeholder='Enter 9-digit Routing Number'
             data-e2e='routingNumber'
             name='routingNumber'
-            validate={[required, validRoutingNumber]}
+            validate={[required, onlyNumbers, validRoutingNumber]}
+            errorBottom
           />
         </div>
         <div>
@@ -95,13 +98,14 @@ const EnterUserData = ({ onClickBack, onNextStep }: StepProps) => {
             />
           </FormLabel>
           <Field
-            component={NumberBox}
+            component={TextBox}
             type='number'
             placeholder='Enter account number'
             data-e2e='accountNumber'
             name='accountNumber'
             noLastPass
-            validate={[required]}
+            validate={[required, onlyNumbers]}
+            errorBottom
           />
         </div>
 
@@ -158,6 +162,10 @@ const EnterUserData = ({ onClickBack, onNextStep }: StepProps) => {
   )
 }
 
-export default reduxForm<{}, StepProps>({ destroyOnUnmount: false, form: 'addWireBank' })(
-  EnterUserData
-)
+export default reduxForm<{}, StepProps>({
+  destroyOnUnmount: false,
+  form: 'addWireBank',
+  initialValues: {
+    hasIntermediaryBank: 'NO'
+  }
+})(EnterUserData)