fix(withdraw): reset amount if bank changes (#6273)

packages/blockchain-wallet-v4-frontend/src/components/Flyout/Brokerage/EnterAmount.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useDispatch } from 'react-redux'
 import { FormErrors, InjectedFormProps, reduxForm, stopAsyncValidation } from 'redux-form'
@@ -211,7 +211,7 @@ const ErrorMessage = ({ error, orderType }) => {
     return <>{error?.amount}</>
   }
 
-  return <></>
+  return null
 }
 
 const Amount = memoizer((props: AmountProps) => {
@@ -283,7 +283,6 @@ const PreviewButton = ({ invalid, orderType, paymentAccount, pristine, submittin
     type='submit'
     fullwidth
     disabled={invalid || pristine || submitting || !paymentAccount}
-    onClick={() => {}}
   >
     {submitting ? (
       <HeartbeatLoader height='16px' width='16px' color='white' />
@@ -298,6 +297,7 @@ const PreviewButton = ({ invalid, orderType, paymentAccount, pristine, submittin
 )
 
 const EnterAmount = ({
+  change,
   crossBorderLimits,
   fee,
   fiatCurrency,
@@ -326,6 +326,11 @@ const EnterAmount = ({
 
   const showError = !!formErrors
 
+  // If fees changes, reset just in case previous amount would be now be over any limit
+  useEffect(() => {
+    change('amount', undefined)
+  }, [fee])
+
   return (
     <CustomForm onSubmit={handleSubmit}>
       <FlyoutContainer>
@@ -370,7 +375,7 @@ const EnterAmount = ({
                 formActions.change(
                   'brokerageTx',
                   'amount',
-                  convertBaseToStandard('FIAT', withdrawableBalance || paymentMethod.limits.max)
+                  convertBaseToStandard('FIAT', minMaxLimits.max)
                 )
                 // record max click withdrawal
                 onMaxButtonClicked?.()

packages/blockchain-wallet-v4-frontend/src/components/Flyout/model.tsx

@@ -971,7 +971,7 @@ const getBrokerageLimits = (props: DepositBrokerageLimits | WithdrawalBrokerageL
       props.withdrawableBalance &&
       props.minWithdrawAmount
     ? {
-        max: (Number(props.withdrawableBalance) - Number(props.fee || '0')).toString(),
+        max: (Number(props.withdrawableBalance) - Number(props.fee ?? 0)).toString(),
         min: props.minWithdrawAmount
       }
     : { max: '0', min: '0' }

packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/BankPicker/index.tsx

@@ -35,14 +35,12 @@ const BankPicker = ({ fiatCurrency, handleClose }: Props) => {
       fiatCurrency={fiatCurrency}
       bankTransferAccounts={data.bankTransferAccounts}
       beneficiaries={data.beneficiaries}
-      defaultBeneficiary={data.defaultBeneficiary}
       defaultMethod={data.defaultMethod}
     />
   )
 }
 
 export type BankPickerProps = {
-  beneficiary?: BeneficiaryType
   fiatCurrency: WalletFiatType
 }
 

packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/BankPicker/selectors.ts

@@ -17,7 +17,6 @@ import { BankPickerProps } from '.'
 export type BankPickerSelectorProps = {
   bankTransferAccounts: BankTransferAccountType[]
   beneficiaries: BeneficiariesType
-  defaultBeneficiary?: BeneficiaryType
   defaultMethod?: BankTransferAccountType
 }
 
@@ -37,24 +36,19 @@ const getData = (
     bankTransferAccountsR = Remote.Success([])
   }
   const beneficiariesR = selectors.custodial.getBeneficiaries(state)
-  const defaultBeneficiaryR = selectors.custodial.getDefaultBeneficiary(
-    ownProps.fiatCurrency,
-    state
-  )
+
   return lift(
     (
       bankTransferAccounts: ExtractSuccess<typeof bankTransferAccountsR>,
-      beneficiaries: ExtractSuccess<typeof beneficiariesR>,
-      defaultBeneficiary: ExtractSuccess<typeof defaultBeneficiaryR>
+      beneficiaries: ExtractSuccess<typeof beneficiariesR>
     ) => ({
       bankTransferAccounts: bankTransferAccounts.filter(
         (value) => value.currency === ownProps.fiatCurrency
       ),
       beneficiaries: beneficiaries.filter((value) => value.currency === ownProps.fiatCurrency),
-      defaultBeneficiary,
       defaultMethod: defaultMethodR
     })
-  )(bankTransferAccountsR, beneficiariesR, defaultBeneficiaryR)
+  )(bankTransferAccountsR, beneficiariesR)
 }
 
 export default getData

packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/BankPicker/template.success.tsx

@@ -1,6 +1,6 @@
-import React, { ReactElement, useState } from 'react'
+import React, { useState } from 'react'
 import { FormattedMessage } from 'react-intl'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { AlertCard } from '@blockchain-com/constellation'
 import styled from 'styled-components'
 
@@ -10,6 +10,7 @@ import { AddNewButton } from 'components/Brokerage'
 import { FlyoutWrapper } from 'components/Flyout'
 import { Bank, BankWire } from 'components/Flyout/model'
 import { brokerage, withdraw } from 'data/components/actions'
+import { getBeneficiary } from 'data/components/withdraw/selectors'
 import { BankTransferAccountType, WithdrawStepEnum } from 'data/types'
 import { getBankLogoImageName } from 'services/images'
 
@@ -32,20 +33,16 @@ const getLinkedBankIcon = (bankName: string) => (
   <Image name={getBankLogoImageName(bankName)} height='48px' />
 )
 
-const Success = ({
-  bankTransferAccounts,
-  beneficiaries,
-  beneficiary,
-  defaultMethod,
-  fiatCurrency
-}: Props) => {
+const Success = ({ bankTransferAccounts, beneficiaries, defaultMethod, fiatCurrency }: Props) => {
   const [showAlert, setShowAlert] = useState(true)
   const dispatch = useDispatch()
 
   const withdrawalDisabled = bankTransferAccounts.find(
     (account) => account.capabilities?.withdrawal?.enabled === false
   )
 
+  const beneficiary = useSelector(getBeneficiary)
+
   const changeStep = (account?: BankTransferAccountType, beneficiary?: BeneficiaryType) => {
     dispatch(brokerage.setBankDetails({ account }))
     dispatch(
@@ -106,7 +103,7 @@ const Success = ({
             key={account.id}
             bankDetails={account.details}
             text={account.details.bankName}
-            isActive={account.id === defaultMethod?.id}
+            isActive={!beneficiary && account.id === defaultMethod?.id}
             icon={getLinkedBankIcon(account.details.bankName)}
             isDisabled={account.capabilities?.withdrawal?.enabled === false}
             onClick={() => changeStep(account)}

packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/EnterAmount/index.tsx

@@ -110,9 +110,7 @@ const EnterAmountContainer = (props: Props) => {
         step: WithdrawStepEnum.BANK_PICKER
       })
     } else {
-      props.buySellActions.setStep({
-        step: 'KYC_REQUIRED'
-      })
+      props.buySellActions.setStep({ step: 'KYC_REQUIRED' })
     }
   }
 
@@ -171,23 +169,24 @@ const EnterAmountContainer = (props: Props) => {
       // Connecting the paymentAccount to the submit handler here because there's some nasty logic
       // above here to determine the account being used to withdraw to. This should all ideally be refactored
       const submitter = handleSubmit(paymentAccount)
+
       return (
         <EnterAmount
-          onSubmit={submitter}
-          initialValues={{ currency: props.fiatCurrency }}
+          crossBorderLimits={crossBorderLimits}
           fee={val.fees.minorValue}
           fiatCurrency={props.fiatCurrency}
+          formActions={props.formActions}
+          formErrors={formErrors}
           handleBack={props.handleClose}
           handleMethodClick={handleBankSelection}
+          initialValues={{ currency: props.fiatCurrency }}
+          minWithdrawAmount={val.minAmount.minorValue}
+          onMaxButtonClicked={handleMaxButtonClicked}
+          onSubmit={submitter}
           orderType={BrokerageOrderType.WITHDRAW}
           paymentAccount={paymentAccount}
           paymentMethod={selectedPaymentMethod}
           withdrawableBalance={val.withdrawableBalance}
-          minWithdrawAmount={val.minAmount.minorValue}
-          crossBorderLimits={crossBorderLimits}
-          formErrors={formErrors}
-          formActions={props.formActions}
-          onMaxButtonClicked={handleMaxButtonClicked}
         />
       )
     }

packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/WithdrawalMethods/template.success.tsx

@@ -120,7 +120,7 @@ const Success = ({
             size='20px'
             color='grey600'
             role='button'
-            onClick={handleClose}
+            onClick={() => handleClose()}
           />
         </TopText>
       </WrapperHeader>

packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/index.tsx

@@ -27,31 +27,18 @@ const Withdraw = ({ close, position, total, userClickedOutside }: ModalPropsType
   const step = useSelector(selectors.components.withdraw.getStep)
   const kycState = useSelector(getUserKYCState).getOrElse('NONE')
 
-  const [show, setShow] = useState(false)
-
-  useEffect(() => {
-    setShow(true)
-  }, [])
-
-  const handleClose = () => {
-    setShow(false)
-    setTimeout(() => {
-      close()
-    }, duration)
-  }
-
   const isUserRejectedOrExpired = kycState === 'REJECTED' || kycState === 'EXPIRED'
   if (isUserRejectedOrExpired) {
     return (
       <Flyout
         position={position}
         userClickedOutside={userClickedOutside}
         total={total}
-        onClose={handleClose}
-        isOpen={show}
+        onClose={close}
+        isOpen
         data-e2e='custodyWithdrawModal'
       >
-        <Rejected handleClose={handleClose} />
+        <Rejected handleClose={close} />
       </Flyout>
     )
   }
@@ -60,37 +47,29 @@ const Withdraw = ({ close, position, total, userClickedOutside }: ModalPropsType
       position={position}
       userClickedOutside={userClickedOutside}
       total={total}
-      onClose={handleClose}
-      isOpen={show}
+      onClose={close}
+      isOpen
       data-e2e='custodyWithdrawModal'
     >
       <FlyoutChild>
         {step === WithdrawStepEnum.LOADING && <WithdrawLoading />}
         {step === WithdrawStepEnum.ENTER_AMOUNT && (
-          <EnterAmount
-            fiatCurrency={fiatCurrency}
-            beneficiary={beneficiary}
-            handleClose={handleClose}
-          />
+          <EnterAmount fiatCurrency={fiatCurrency} beneficiary={beneficiary} handleClose={close} />
         )}
         {step === WithdrawStepEnum.WITHDRAWAL_METHODS && (
-          <WithdrawalMethods fiatCurrency={fiatCurrency} handleClose={handleClose} />
+          <WithdrawalMethods fiatCurrency={fiatCurrency} handleClose={close} />
         )}
         {step === WithdrawStepEnum.BANK_PICKER && (
-          <BankPicker
-            fiatCurrency={fiatCurrency}
-            beneficiary={beneficiary}
-            handleClose={handleClose}
-          />
+          <BankPicker fiatCurrency={fiatCurrency} handleClose={close} />
         )}
         {step === WithdrawStepEnum.CONFIRM_WITHDRAW && (
           <ConfirmWithdraw beneficiary={beneficiary} fiatCurrency={fiatCurrency} />
         )}
         {step === WithdrawStepEnum.WITHDRAWAL_DETAILS && (
-          <WithdrawalDetails fiatCurrency={fiatCurrency} handleClose={handleClose} />
+          <WithdrawalDetails fiatCurrency={fiatCurrency} handleClose={close} />
         )}
         {step === WithdrawStepEnum.INELIGIBLE && <DataError message={INELIGIBLE_ERROR} />}
-        {step === WithdrawStepEnum.ON_HOLD && <OnHold handleClose={handleClose} />}
+        {step === WithdrawStepEnum.ON_HOLD && <OnHold handleClose={close} />}
       </FlyoutChild>
     </Flyout>
   )

packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/model.tsx

@@ -17,32 +17,29 @@ import { Col, Title, Value } from 'components/Flyout'
 import { BankDetails } from 'data/types'
 import { formatTextAmount } from 'services/forms'
 
-export const ActiveToggle = ({ isActive }: { isActive: boolean }): ReactElement => {
+export const ActiveToggle = ({ isActive }: { isActive: boolean }) => {
+  if (isActive) {
+    return (
+      <Icon
+        name='checkmark-circle-filled'
+        size='24px'
+        color='green600'
+        role='button'
+        style={{ justifyContent: 'flex-start' }}
+      />
+    )
+  }
   return (
-    <>
-      {isActive ? (
-        <Icon
-          name='checkmark-circle-filled'
-          size='24px'
-          color='green600'
-          role='button'
-          style={{ justifyContent: 'flex-start' }}
-        />
-      ) : (
-        <Image
-          name='circle-empty'
-          width='24px'
-          height='24px'
-          style={{ justifyContent: 'flex-start' }}
-        />
-      )}
-    </>
+    <Image
+      name='circle-empty'
+      width='24px'
+      height='24px'
+      style={{ justifyContent: 'flex-start' }}
+    />
   )
 }
 
-const RightArrowIcon = styled(Icon)<{
-  disabled?: boolean
-}>`
+const RightArrowIcon = styled(Icon)<{ disabled?: boolean }>`
   transform: rotate(180deg);
   ${(props) =>
     props.disabled &&
@@ -191,8 +188,7 @@ const DepositOrWithdrawal = (props: {
 }
 
 const normalizeAmount = (value, prevValue) => {
-  // eslint-disable-next-line no-restricted-globals
-  if (isNaN(Number(value)) && value !== '.' && value !== '') return prevValue
+  if (Number.isNaN(Number(value)) && value !== '.' && value !== '') return prevValue
   return formatTextAmount(value, true)
 }