Withdraw - do not have ACH bank selected by default (#6277)

* chore(withdraw): use dispatch in EnterAmount

* feat(withdraw): do not allow selection of ach for withdraw

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

@@ -167,30 +167,21 @@ const LimitSection = ({ fee = '0', fiatCurrency, limitAmount, orderType }: Limit
 // to type without running validation on every keystroke. It waits 750 ms after
 // the user has stopped typing to run validation and manually dispatches the error
 // if needed. This makes for a nice error UX when typing
-const debounceValidate = (
-  limits,
-  crossBorderLimits,
-  orderType,
-  fiatCurrency,
-  bankText,
-  formActions,
-  dispatch
-) =>
+const debounceValidate = (limits, crossBorderLimits, orderType, fiatCurrency, bankText, dispatch) =>
   debounce((event, newValue) => {
     // check cross border limits
     const limitError = checkCrossBorderLimit(
       crossBorderLimits,
       newValue,
       orderType,
       fiatCurrency,
-      bankText,
-      formActions
+      bankText
     )
     if (limitError) {
       dispatch(stopAsyncValidation('brokerageTx', limitError))
     }
 
-    const error = minMaxAmount(limits, orderType, fiatCurrency, newValue, bankText, formActions)
+    const error = minMaxAmount(limits, orderType, fiatCurrency, newValue, bankText)
     if (error) {
       dispatch(stopAsyncValidation('brokerageTx', error))
     }
@@ -236,7 +227,6 @@ const Amount = memoizer((props: AmountProps) => {
           props.orderType,
           props.fiatCurrency,
           props.bankText,
-          props.formActions,
           dispatch
         )}
       />
@@ -301,7 +291,6 @@ const EnterAmount = ({
   crossBorderLimits,
   fee,
   fiatCurrency,
-  formActions,
   formErrors,
   handleBack,
   handleMethodClick,
@@ -360,7 +349,6 @@ const EnterAmount = ({
               orderType={orderType}
               crossBorderLimits={crossBorderLimits}
               showError={showError}
-              formActions={formActions}
               bankText={
                 orderType === BrokerageOrderType.DEPOSIT ? renderBankFullName(paymentAccount) : ''
               }
@@ -372,11 +360,7 @@ const EnterAmount = ({
             <MaxButton
               type={orderType === BrokerageOrderType.DEPOSIT ? 'Deposit' : 'Withdrawal'}
               onClick={() => {
-                formActions.change(
-                  'brokerageTx',
-                  'amount',
-                  convertBaseToStandard('FIAT', minMaxLimits.max)
-                )
+                change('amount', convertBaseToStandard('FIAT', minMaxLimits.max))
                 // record max click withdrawal
                 onMaxButtonClicked?.()
               }}
@@ -408,7 +392,6 @@ export type OwnProps = {
   crossBorderLimits: CrossBorderLimits
   fiatCurrency: FiatType
   // formErrors: FormErrors<{ amount?: 'ABOVE_MAX' | 'BELOW_MIN' | false }, string> | undefined
-  formActions: typeof actions.form
   formErrors: FormErrors<{}, string> | undefined
   handleBack: () => void
   handleMethodClick: () => void

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

@@ -1,6 +1,7 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import { AlertButton } from 'blockchain-wallet-v4-frontend/src/modals/components'
+import { change } from 'redux-form'
 
 import { fiatToString } from '@core/exchange/utils'
 import { CrossBorderLimits, FiatType } from '@core/types'
@@ -15,8 +16,7 @@ export const minMaxAmount = (
   orderType: BrokerageOrderType,
   fiatCurrency: FiatType,
   amount: string,
-  bankText: string,
-  formActions
+  bankText: string
 ) => {
   const max = convertBaseToStandard('FIAT', limits.max)
   const min = convertBaseToStandard('FIAT', limits.min)
@@ -44,7 +44,7 @@ export const minMaxAmount = (
         <>
           <AlertButton
             onClick={() => {
-              formActions.change(BROKERAGE_FORM, 'amount', max)
+              change(BROKERAGE_FORM, 'amount', max)
             }}
           >
             {orderType === BrokerageOrderType.DEPOSIT ? (
@@ -111,7 +111,7 @@ export const minMaxAmount = (
         <>
           <AlertButton
             onClick={() => {
-              formActions.change(BROKERAGE_FORM, 'amount', min)
+              change(BROKERAGE_FORM, 'amount', min)
             }}
           >
             <FormattedMessage
@@ -143,8 +143,7 @@ export const checkCrossBorderLimit = (
   amount: string,
   orderType: BrokerageOrderType,
   fiatCurrency: FiatType,
-  bankText: string,
-  formActions
+  bankText: string
 ) => {
   if (!crossBorderLimits?.current) {
     return false
@@ -166,7 +165,7 @@ export const checkCrossBorderLimit = (
         <>
           <AlertButton
             onClick={() => {
-              formActions.change(BROKERAGE_FORM, 'amount', effectiveLimit?.limit.value.toString())
+              change(BROKERAGE_FORM, 'amount', effectiveLimit?.limit.value.toString())
             }}
           >
             <FormattedMessage id='copy.over_your_limit' defaultMessage='Over Your Limit' />

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

@@ -20,8 +20,7 @@ const EnterAmountContainer = ({
   buySellActions,
   data,
   defaultMethod,
-  fiatCurrency,
-  formActions
+  fiatCurrency
 }: Props) => {
   useEffect(() => {
     if (fiatCurrency && !Remote.Success.is(data)) {
@@ -117,7 +116,6 @@ const EnterAmountContainer = ({
           paymentMethod={paymentMethod}
           crossBorderLimits={crossBorderLimits}
           formErrors={formErrors}
-          formActions={formActions}
         />
       ) : (
         <FlyoutOopsError

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

@@ -9,9 +9,9 @@ import { Icon, Image, Text } from 'blockchain-info-components'
 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 { withdraw } from 'data/components/actions'
 import { getBeneficiary } from 'data/components/withdraw/selectors'
-import { BankTransferAccountType, WithdrawStepEnum } from 'data/types'
+import { WithdrawStepEnum } from 'data/types'
 import { getBankLogoImageName } from 'services/images'
 
 import { BankPickerProps } from '.'
@@ -22,19 +22,22 @@ const Top = styled.div`
   align-items: center;
 `
 const AlertWrapper = styled(FlyoutWrapper)`
+  padding-bottom: 1rem;
+  padding-top: 0;
   & > div {
     width: 100% !important;
   }
 `
 
+const noOp = () => {}
+
 type Props = BankPickerProps & BankPickerSelectorProps
 
 const getLinkedBankIcon = (bankName: string) => (
   <Image name={getBankLogoImageName(bankName)} height='48px' />
 )
 
-const Success = ({ bankTransferAccounts, beneficiaries, defaultMethod, fiatCurrency }: Props) => {
-  const [showAlert, setShowAlert] = useState(true)
+const Success = ({ bankTransferAccounts, beneficiaries, fiatCurrency }: Props) => {
   const dispatch = useDispatch()
 
   const withdrawalDisabled = bankTransferAccounts.find(
@@ -43,8 +46,7 @@ const Success = ({ bankTransferAccounts, beneficiaries, defaultMethod, fiatCurre
 
   const beneficiary = useSelector(getBeneficiary)
 
-  const changeStep = (account?: BankTransferAccountType, beneficiary?: BeneficiaryType) => {
-    dispatch(brokerage.setBankDetails({ account }))
+  const changeStep = (beneficiary?: BeneficiaryType) => {
     dispatch(
       withdraw.setStep({
         beneficiary,
@@ -82,45 +84,41 @@ const Success = ({ bankTransferAccounts, beneficiaries, defaultMethod, fiatCurre
           </Text>
         </Top>
       </FlyoutWrapper>
-      {withdrawalDisabled && showAlert && (
+      {withdrawalDisabled && (
         <AlertWrapper>
           <AlertCard
             variant='warning'
             content={
               withdrawalDisabled?.capabilities?.withdrawal?.ux?.message ||
               'Withdrawals via ACH are disabled'
             }
-            onCloseClick={() => setShowAlert((showAlert) => !showAlert)}
             title={
               withdrawalDisabled?.capabilities?.withdrawal?.ux?.title ?? 'Important Information'
             }
           />
         </AlertWrapper>
       )}
-      {bankTransferAccounts.map((account) => {
-        return (
-          <Bank
-            key={account.id}
-            bankDetails={account.details}
-            text={account.details.bankName}
-            isActive={!beneficiary && account.id === defaultMethod?.id}
-            icon={getLinkedBankIcon(account.details.bankName)}
-            isDisabled={account.capabilities?.withdrawal?.enabled === false}
-            onClick={() => changeStep(account)}
-          />
-        )
-      })}
-      {beneficiaries.map((localBeneficiary) => {
-        return (
-          <BankWire
-            key={localBeneficiary.id}
-            beneficiary={localBeneficiary}
-            isActive={beneficiary?.id === localBeneficiary.id}
-            onClick={() => changeStep(undefined, localBeneficiary)}
-            type='WITHDRAWAL'
-          />
-        )
-      })}
+
+      {bankTransferAccounts.map((account) => (
+        <Bank
+          key={account.id}
+          bankDetails={account.details}
+          text={account.details.bankName}
+          isActive={false} // Not selectable on withdrawals so safe to asume shouldn't be active
+          icon={getLinkedBankIcon(account.details.bankName)}
+          isDisabled={account.capabilities?.withdrawal?.enabled === false}
+          onClick={noOp}
+        />
+      ))}
+      {beneficiaries.map((localBeneficiary) => (
+        <BankWire
+          key={localBeneficiary.id}
+          beneficiary={localBeneficiary}
+          isActive={beneficiary?.id === localBeneficiary.id}
+          onClick={() => changeStep(localBeneficiary)}
+          type='WITHDRAWAL'
+        />
+      ))}
       <AddNewButton data-e2e='DepositAddNewPaymentMethod' onClick={onAddNew}>
         <Text color='blue600' size='16px' weight={600}>
           <FormattedMessage id='buttons.add_new' defaultMessage='+ Add New' />