Merge pull request #3496 from blockchain/fix/FWN-731

fix(recurring buy): reconfigures how the frequency selection screen works by adding a new endpoint to check if payment method works for a particular frequency

packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts

@@ -1247,6 +1247,8 @@ type MessagesType = {
   'modals.recurringbuys.timeframe.2_weeks': 'Every 2 weeks'
   'modals.recurringbuys.timeframe.every_month': 'Every month'
 
+  'modals.recurringbuys.period_fetch_error': 'There was an error fetching recurring buy frequency options. Please try again.'
+  'modals.recurringbuys.time_options.one_time': 'One Time'
   'modals.recurringbuys.time_options.daily': 'Daily'
   'modals.recurringbuys.time_options.weekly': 'Weekly'
   'modals.recurringbuys.time_options.bi_weekly': 'Twice a Month'

packages/blockchain-wallet-v4-frontend/src/components/DataError/ErrorHandler.js

@@ -7,25 +7,22 @@ import { Button, Link, Text, TextGroup } from 'blockchain-info-components'
 import { FETCH_FEES_FAILURE } from 'blockchain-wallet-v4/src/redux/payment/model'
 import { checkForVulnerableAddressError } from 'services/misc'
 
-import {
-  BROKERAGE_INELIGIBLE,
-  IneligibleErrorMessage
-} from '../../modals/components'
+import { BROKERAGE_INELIGIBLE, IneligibleErrorMessage } from '../../modals/components'
+import { RECURRING_BUY_PERIOD_FETCH } from '../Flyout/model'
 
 const MessageText = styled(Text)`
   width: 80%;
   margin-bottom: 20px;
 `
 
-const ErrorHandler = props => {
+const ErrorHandler = (props) => {
   const { message, onClick } = props
   const e2e = props['data-e2e']
   const errorMessage = prop('message', message) || prop('description', message)
   const vulnerableAddress = checkForVulnerableAddressError(message)
-
   if (vulnerableAddress) {
     return (
-      <React.Fragment>
+      <>
         <MessageText size='18px' weight={400}>
           {message}
         </MessageText>
@@ -37,11 +34,13 @@ const ErrorHandler = props => {
             />
           </Text>
         </Button>
-      </React.Fragment>
+      </>
     )
-  } else if (errorMessage === BROKERAGE_INELIGIBLE) {
+  }
+  if (errorMessage === BROKERAGE_INELIGIBLE) {
     return <IneligibleErrorMessage />
-  } else if (errorMessage === FETCH_FEES_FAILURE) {
+  }
+  if (errorMessage === FETCH_FEES_FAILURE) {
     return (
       <Text size='16px' weight={400}>
         <FormattedMessage
@@ -50,36 +49,37 @@ const ErrorHandler = props => {
         />
       </Text>
     )
-  } else if (typeof errorMessage === 'string') {
+  }
+  if (errorMessage === RECURRING_BUY_PERIOD_FETCH) {
     return (
-      <Text size='16px' color='error' weight={500}>
-        {errorMessage}
+      <Text size='16px' weight={400} style={{ width: '300px' }}>
+        <FormattedMessage
+          id='modals.recurringbuys.period_fetch_error'
+          defaultMessage='There was an error fetching recurring buy frequency options. Please try again.'
+        />
       </Text>
     )
-  } else {
+  }
+  if (typeof errorMessage === 'string') {
     return (
-      <TextGroup inline>
-        <Text size='18px' weight={400}>
-          <FormattedMessage
-            id='components.dataerror.body'
-            defaultMessage='Please '
-          />
-        </Text>
-        <Link size='18px' data-e2e={e2e ? `${e2e}Link` : ''} onClick={onClick}>
-          <FormattedMessage
-            id='components.dataerror.click'
-            defaultMessage='click here'
-          />
-        </Link>
-        <Text size='18px' weight={400}>
-          <FormattedMessage
-            id='components.dataerror.refresh'
-            defaultMessage=' to refresh.'
-          />
-        </Text>
-      </TextGroup>
+      <Text size='16px' color='error' weight={500}>
+        {errorMessage}
+      </Text>
     )
   }
+  return (
+    <TextGroup inline>
+      <Text size='18px' weight={400}>
+        <FormattedMessage id='components.dataerror.body' defaultMessage='Please ' />
+      </Text>
+      <Link size='18px' data-e2e={e2e ? `${e2e}Link` : ''} onClick={onClick}>
+        <FormattedMessage id='components.dataerror.click' defaultMessage='click here' />
+      </Link>
+      <Text size='18px' weight={400}>
+        <FormattedMessage id='components.dataerror.refresh' defaultMessage=' to refresh.' />
+      </Text>
+    </TextGroup>
+  )
 }
 
 export default ErrorHandler

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

@@ -1,12 +1,41 @@
 import React from 'react'
 import { IntlProvider } from 'react-intl'
 import { action } from '@storybook/addon-actions'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { SBPaymentTypes } from 'blockchain-wallet-v4/src/network/api/simpleBuy/types'
 
 import FrequencyScreen from './FrequencyScreen'
 
 export default {
+  argTypes: {
+    method: { options: Object.values(SBPaymentTypes) }
+  },
   args: {
-    headerMode: 'back'
+    headerMode: 'back',
+    method: SBPaymentTypes.BANK_TRANSFER,
+    paymentInfo: [
+      {
+        eligibleMethods: ['FUNDS'],
+        nextPayment: '2021-08-20T22:26:52.494Z',
+        period: 'DAILY'
+      },
+      {
+        eligibleMethods: ['FUNDS', 'BANK_TRANSFER'],
+        nextPayment: '2021-08-26T22:26:52.494Z',
+        period: 'WEEKLY'
+      },
+      {
+        eligibleMethods: ['FUNDS', 'BANK_TRANSFER'],
+        nextPayment: '2021-09-02T22:26:52.494Z',
+        period: 'BI_WEEKLY'
+      },
+      {
+        eligibleMethods: ['FUNDS', 'BANK_TRANSFER'],
+        nextPayment: '2021-09-19T22:26:52.494Z',
+        period: 'MONTHLY'
+      }
+    ]
   },
   component: FrequencyScreen,
   decorators: [
@@ -17,9 +46,9 @@ export default {
     )
   ],
   title: 'Flyouts/FrequencySelection'
-}
+} as ComponentMeta<typeof FrequencyScreen>
 
-export const Default = (args) => (
+export const Default: ComponentStory<typeof FrequencyScreen> = (args) => (
   <FrequencyScreen
     {...args}
     headerAction={action('header action button clicked')}

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

@@ -2,25 +2,74 @@ import React, { useCallback } from 'react'
 import { FormattedMessage } from 'react-intl'
 
 import { Text } from 'blockchain-info-components'
+import { SBPaymentTypes } from 'blockchain-wallet-v4/src/network/api/simpleBuy/types'
 
-import { RecurringBuyPeriods } from '../../data/components/recurringBuy/types'
+import {
+  RecurringBuyNextPayment,
+  RecurringBuyPeriods
+} from '../../data/components/recurringBuy/types'
 import { OptionRightActionRow } from '../Rows'
 import Container from './Container'
 import Content from './Content'
 import Header, { Props as HeaderProps } from './Header'
 import { getPeriodSubTitleText, getPeriodTitleText } from './model'
 
-const FrequencyScreen = ({ children, headerAction, headerMode, setPeriod }: Props) => {
-  // ONE_TIME is not a recurring buy option so take it out before displaying
-  const periods = Object.values(RecurringBuyPeriods)
+const RowDisplay = ({ method, paymentInfo, period, setPeriod }: RowDisplayProps) => {
+  // The ONE_TIME option is not given to us from the API like other period option. It is a special
+  // it's used by the FE only when the user is making a purchase, but not as a recurring buy. It's added
+  // here manually so the FE code can treat it like the other period options.
+  const date = new Date()
+  const modifiedPaymentInfo: RecurringBuyNextPayment[] = [
+    {
+      eligibleMethods: Object.values(SBPaymentTypes),
+      nextPayment: date.toString(),
+      period: RecurringBuyPeriods.ONE_TIME
+    },
+    ...paymentInfo
+  ]
+
+  const currentPaymentPeriod: RecurringBuyNextPayment | undefined = modifiedPaymentInfo.filter(
+    (pi) => pi.period === period
+  )[0]
+
+  const eligibleMethod: boolean =
+    (currentPaymentPeriod && currentPaymentPeriod.eligibleMethods.includes(method)) || false
+
   const setPeriodCallback = useCallback(
     (period: RecurringBuyPeriods) => {
       return () => {
-        setPeriod(period)
+        if (eligibleMethod) {
+          setPeriod(period)
+        }
       }
     },
-    [setPeriod]
+    [setPeriod, eligibleMethod]
   )
+
+  return (
+    <OptionRightActionRow disabled={!eligibleMethod} onClick={setPeriodCallback(period)}>
+      <>
+        <Text weight={600} size='16px' color='grey900'>
+          {getPeriodTitleText(period)}
+        </Text>
+        <Text weight={500} size='14px' color='grey600'>
+          {getPeriodSubTitleText(period, currentPaymentPeriod?.nextPayment)}
+        </Text>
+      </>
+    </OptionRightActionRow>
+  )
+}
+
+const FrequencyScreen = ({
+  children,
+  headerAction,
+  headerMode,
+  method,
+  paymentInfo,
+  setPeriod
+}: Props) => {
+  const periods = Object.values(RecurringBuyPeriods)
+
   return (
     <Container>
       <Header
@@ -39,26 +88,25 @@ const FrequencyScreen = ({ children, headerAction, headerMode, setPeriod }: Prop
       </Header>
       <Content mode='top'>
         {periods.map((period) => (
-          <OptionRightActionRow key={period} onClick={setPeriodCallback(period)}>
-            <>
-              <Text weight={600} size='16px' color='grey900'>
-                {getPeriodTitleText(period)}
-              </Text>
-              <Text weight={500} size='14px' color='grey600'>
-                {getPeriodSubTitleText(period)}
-              </Text>
-            </>
-          </OptionRightActionRow>
+          <RowDisplay key={period} {...{ method, paymentInfo, period, setPeriod }} />
         ))}
       </Content>
     </Container>
   )
 }
+type RowDisplayProps = {
+  method: Props['method']
+  paymentInfo: Props['paymentInfo']
+  period: RecurringBuyPeriods
+  setPeriod: Props['setPeriod']
+}
 
 type Props = {
   children?: React.ReactNode
   headerAction: HeaderProps['onClick']
   headerMode: HeaderProps['mode']
+  method: SBPaymentTypes
+  paymentInfo: RecurringBuyNextPayment[]
   setPeriod: (period: RecurringBuyPeriods) => void
 }
 

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

@@ -6,6 +6,8 @@ import { SBPaymentTypes } from '../../../../blockchain-wallet-v4/src/network/api
 import { RecurringBuyPeriods } from '../../data/components/recurringBuy/types'
 import { ActionEnum } from '../../data/types'
 
+const RECURRING_BUY_PERIOD_FETCH = 'RECURRING_BUY_PERIOD_FETCH'
+
 const getPeriodTitleText = (period: RecurringBuyPeriods): React.ReactNode => {
   let text
   switch (period) {
@@ -224,5 +226,6 @@ export {
   getPeriodForSuccess,
   getPeriodSubTitleText,
   getPeriodText,
-  getPeriodTitleText
+  getPeriodTitleText,
+  RECURRING_BUY_PERIOD_FETCH
 }

packages/blockchain-wallet-v4-frontend/src/components/Rows/OptionRightAction.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import styled from 'styled-components'
 
 import { Icon } from 'blockchain-info-components'
@@ -11,13 +11,14 @@ const Row = styled.div`
     border-bottom: 1px solid ${(props) => props.theme.grey000};
   }
 `
-const FlexWrapper = styled(Row)`
+const FlexWrapper = styled(Row)<{ disabled?: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 0;
   padding-bottom: 0;
-  cursor: pointer;
+  cursor: ${(p) => (p.disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${(p) => (p.disabled ? '0.5' : '1')};
 
   & > div {
     height: 5rem;
@@ -27,9 +28,15 @@ const FlexWrapper = styled(Row)`
   }
 `
 
-const OptionRightActionRow = ({ children, onClick }: Props) => {
+const OptionRightActionRow = ({ children, disabled, onClick }: Props) => {
+  const onClickCallback = useCallback(() => {
+    if (!disabled) {
+      onClick()
+    }
+  }, [disabled, onClick])
+
   return (
-    <FlexWrapper role='button' onClick={onClick}>
+    <FlexWrapper disabled={disabled} role='button' onClick={onClickCallback}>
       <div>{children}</div>
       <Icon name='chevron-right' size='25px' color='grey400' />
     </FlexWrapper>
@@ -38,6 +45,7 @@ const OptionRightActionRow = ({ children, onClick }: Props) => {
 
 type Props = {
   children: React.ReactChild
+  disabled?: boolean
   onClick: () => void
 }
 

packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/sagaRegister.ts

@@ -7,7 +7,6 @@ import {
   fetchBankLinkCredentials,
   fetchBankTransferAccounts,
   fetchBankTransferUpdate,
-  fetchRBMethods,
   handleDepositFiatClick,
   handleWithdrawClick,
   showModal

packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/sagas.ts

@@ -370,11 +370,6 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
     }
   }
 
-  const fetchRBMethods = function* () {
-    const data: { eligibleMethods: SBPaymentTypes[] } = yield call(api.getRBPaymentMethods)
-    yield put(actions.form.change('recurringBuyScheduler', 'methods', data.eligibleMethods))
-  }
-
   return {
     createFiatDeposit,
     deleteSavedBank,

packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/slice.ts

@@ -61,7 +61,6 @@ const brokerageSlice = createSlice({
       state.bankTransferAccounts = Remote.Success(accounts)
     },
     fetchBankTransferUpdate: (state, action: PayloadAction<YodleeAccountType | string>) => {},
-    fetchRBMethods: () => {},
     handleDepositFiatClick: (state, action: PayloadAction<WalletFiatType>) => {
       state.fiatCurrency = action.payload
     },
@@ -113,7 +112,6 @@ export const {
   fetchBankTransferAccountsLoading,
   fetchBankTransferAccountsSuccess,
   fetchBankTransferUpdate,
-  fetchRBMethods,
   handleDepositFiatClick,
   handleWithdrawClick,
   setAddBankStep,