feat(recurring buy): styles, polish, and functionality for success sc…

…reen

packages/blockchain-info-components/src/Flyouts/Content.tsx

@@ -1,23 +1,22 @@
 import React, { memo } from 'react'
 import styled from 'styled-components'
 
-const Content = styled.div`
+const Content = styled.div<{ mode: Props['mode'] }>`
   display: flex;
   flex: 1;
   flex-direction: column;
-  justify-content: flex-start;
+  justify-content: ${(p) =>
+    p.mode === 'top' ? 'flex-start' : p.mode === 'middle' ? 'space-around' : 'space-between'};
+  ${(p) => p.mode === 'middle' && 'align-items: center;'}
 `
 
 const FlyoutContent = (props: Props) => {
-  return (
-    <Content>
-      {props.children}
-    </Content>
-  )
+  return <Content mode={props.mode}>{props.children}</Content>
 }
 
 export type Props = {
   children: React.ReactNode
+  mode: 'top' | 'middle'
 }
 
 export default memo(FlyoutContent)

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

@@ -1250,6 +1250,9 @@ type MessagesType = {
   'modals.recurringbuys.get_started.get_started': 'Get Started'
   'modals.recurringbuys.get_started.maybe_later': 'Maybe Later'
 
+  'modals.recurringbuys.recurring_buy_started': 'Recurring Buy Started!'
+  'modals.recurringbuys.we_will_buy': 'We will buy {fiatAmount} of {coin} {period} at that moment’s market price. Cancel this recurring buy at anytime.'
+  'modals.recurringbuys.for_each_buy': 'For each buy, you will not be able to Send or Withdraw these funds for {days} days.'
   'modals.repayloan.chooseamttorepay': 'Choose how much you want to repay'
   'modals.repayloan.choosewaytopay': 'How do you want to repay?'
   'modals.repayloan.repayamount': 'Repay amount'

packages/blockchain-wallet-v4-frontend/src/modals/RecurringBuys/CheckoutConfirm/index.tsx

@@ -1,22 +1,48 @@
 import React, { useCallback } from 'react'
-import { bindActionCreators, Dispatch } from 'redux'
 import { FormattedMessage } from 'react-intl'
 import { connect, ConnectedProps } from 'react-redux'
+import { bindActionCreators, Dispatch } from 'redux'
 
-import { AmountSubHeader, Button, CheckoutRow, FlyoutContainer, FlyoutContent, FlyoutHeader, FlyoutFooter, Text, TextGroup, Link } from 'blockchain-info-components'
-import { RootState } from 'data/rootReducer'
-import { actions, selectors } from 'data'
-import { SBOrderType } from 'core/types'
+import {
+  AmountSubHeader,
+  Button,
+  CheckoutRow,
+  FlyoutContainer,
+  FlyoutContent,
+  FlyoutFooter,
+  FlyoutHeader,
+  Link,
+  Text,
+  TextGroup
+} from 'blockchain-info-components'
 import { fiatToString } from 'blockchain-wallet-v4/src/exchange/currency'
-
-import { getBankAccount, getBaseAmount, getBaseCurrency, getCounterAmount, getCounterCurrency, getPaymentMethodId } from 'data/components/simpleBuy/model'
+import { SBOrderType } from 'core/types'
+import { actions, selectors } from 'data'
+import {
+  getBankAccount,
+  getBaseAmount,
+  getBaseCurrency,
+  getCounterAmount,
+  getCounterCurrency,
+  getPaymentMethodId
+} from 'data/components/simpleBuy/model'
+import { RootState } from 'data/rootReducer'
 import { BankTransferAccountType, RecurringBuyPeriods } from 'data/types'
 
-import { Props as _P } from '..'
 import { displayFiat, getPaymentMethod, getPaymentMethodDetails } from '../../SimpleBuy/model'
+import { Props as _P } from '..'
 import { getPeriodSubTitleText, getPeriodTitleText } from '../Frequency/model'
 
-const Confirm = ({ bankAccounts, cards, close, order, period, recurringBuyActions, supportedCoins, quote }: Props) => {
+const Confirm = ({
+  bankAccounts,
+  cards,
+  close,
+  order,
+  period,
+  quote,
+  recurringBuyActions,
+  supportedCoins
+}: Props) => {
   const amount = getBaseAmount(order)
   const currency = order.outputCurrency
   const baseCurrency = getBaseCurrency(order, supportedCoins)
@@ -31,42 +57,32 @@ const Confirm = ({ bankAccounts, cards, close, order, period, recurringBuyAction
     value: getCounterAmount(order)
   })
   const bankAccount = getBankAccount(order, bankAccounts)
-  const cardDetails =
-    (cards.filter((card) => card.id === paymentMethodId)[0]) || null
+  const cardDetails = cards.filter((card) => card.id === paymentMethodId)[0] || null
   const createRecurringBuy = useCallback(() => {
     recurringBuyActions.createRecurringBuy()
   }, [])
   return (
     <FlyoutContainer>
-      <FlyoutHeader
-        data-e2e="closeRecurringBuyModalCheckoutStep"
-        mode="back"
-        onClick={close}
-      >
-        <FormattedMessage
-          id='simplebuy.checkoutconfirm'
-          defaultMessage='Checkout' />
+      <FlyoutHeader data-e2e='closeRecurringBuyModalCheckoutStep' mode='back' onClick={close}>
+        <FormattedMessage id='simplebuy.checkoutconfirm' defaultMessage='Checkout' />
       </FlyoutHeader>
-      <FlyoutContent>
+      <FlyoutContent mode='top'>
         <AmountSubHeader
           data-e2e='recurringBuySubTotalAmount'
           title={`${amount} ${currency}`}
           subTitle={subTotalAmount}
         />
 
         <CheckoutRow
-          title={(
-            <FormattedMessage
-              id='modals.simplebuy.confirm.rate'
-              defaultMessage='Exchange Rate'
-            />
-          )}
-          text={(
+          title={
+            <FormattedMessage id='modals.simplebuy.confirm.rate' defaultMessage='Exchange Rate' />
+          }
+          text={
             <div data-e2e='rbExchangeRate'>
               {displayFiat(order, supportedCoins, quote.rate)} / {baseCurrency}
             </div>
-          )}
-          toolTip={(
+          }
+          toolTip={
             <Text size='12px' weight={500} color='grey600'>
               <TextGroup inline>
                 <Text size='14px'>
@@ -88,66 +104,43 @@ const Confirm = ({ bankAccounts, cards, close, order, period, recurringBuyAction
                 </Link>
               </TextGroup>
             </Text>
-          )}
+          }
         />
 
         <CheckoutRow
-          title={(
-            <FormattedMessage
-              id='copy.fee'
-              defaultMessage='Fee'
-            />
-          )}
+          title={<FormattedMessage id='copy.fee' defaultMessage='Fee' />}
           text={displayFiat(order, supportedCoins, fee || '0')}
         />
 
         <CheckoutRow
-          title={(
-            <FormattedMessage
-              id='copy.total'
-              defaultMessage='Total'
-            />
-          )}
+          title={<FormattedMessage id='copy.total' defaultMessage='Total' />}
           text={totalAmount}
         />
 
         <CheckoutRow
-          title={(
-            <FormattedMessage
-              id='checkout.payment_method'
-              defaultMessage='Payment Method'
-            />
-          )}
+          title={<FormattedMessage id='checkout.payment_method' defaultMessage='Payment Method' />}
           text={getPaymentMethod(order, supportedCoins, {} as BankTransferAccountType)}
           additionalText={getPaymentMethodDetails(order, bankAccount, cardDetails)}
         />
 
         <CheckoutRow
-          title={(
-            <FormattedMessage
-              id='copy.frequency'
-              defaultMessage='Frequency'
-            />
-          )}
+          title={<FormattedMessage id='copy.frequency' defaultMessage='Frequency' />}
           text={getPeriodTitleText(period)}
           additionalText={getPeriodSubTitleText(period)}
         />
 
         <CheckoutRow
-          title={(
-            <FormattedMessage
-              id='copy.available_to_trade'
-              defaultMessage='Available to Trade'
-            />
-          )}
-          text={(
-            <FormattedMessage
-              id='copy.instantly'
-              defaultMessage='Instantly'
-            />
-          )}
+          title={
+            <FormattedMessage id='copy.available_to_trade' defaultMessage='Available to Trade' />
+          }
+          text={<FormattedMessage id='copy.instantly' defaultMessage='Instantly' />}
         />
-        <Text size='12px' weight={500} color='grey600' style={{ textAlign: 'center', padding: '40px' }}>
+        <Text
+          size='12px'
+          weight={500}
+          color='grey600'
+          style={{ padding: '40px', textAlign: 'center' }}
+        >
           <FormattedMessage
             id='modals.simplebuy.confirm.activity_card11'
             defaultMessage='Your final amount might change due to market activity. For your security, buy orders with a bank account are subject to up to a 14 day holding period. You can Swap or Sell during this time. We will notify you once the funds are fully available.'
@@ -166,10 +159,7 @@ const Confirm = ({ bankAccounts, cards, close, order, period, recurringBuyAction
           style={{ marginTop: '16px' }}
           onClick={createRecurringBuy}
         >
-          <FormattedMessage
-            id='copy.schdule'
-            defaultMessage='Schedule'
-          />
+          <FormattedMessage id='copy.schdule' defaultMessage='Schedule' />
         </Button>
         <Button
           bold
@@ -183,27 +173,22 @@ const Confirm = ({ bankAccounts, cards, close, order, period, recurringBuyAction
           style={{ marginTop: '16px' }}
           onClick={close}
         >
-          <FormattedMessage
-            id='copy.cancel'
-            defaultMessage='Cancel'
-          />
+          <FormattedMessage id='copy.cancel' defaultMessage='Cancel' />
         </Button>
       </FlyoutFooter>
     </FlyoutContainer>
   )
 }
 
 const mapStateToProps = (state: RootState) => ({
-  bankAccounts: selectors.components.brokerage.getBankTransferAccounts(
-    state
-  ).getOrElse([]),
+  bankAccounts: selectors.components.brokerage.getBankTransferAccounts(state).getOrElse([]),
   cards: selectors.components.simpleBuy.getSBCards(state).getOrElse([]),
   order: selectors.components.simpleBuy.getSBOrder(state) as SBOrderType,
   period: selectors.components.recurringBuy.getPeriod(state) as RecurringBuyPeriods,
+  quote: selectors.components.simpleBuy.getSBQuote(state).getOrFail('Could not get exchange rate'),
   supportedCoins: selectors.core.walletOptions
     .getSupportedCoins(state)
-    .getOrFail('Failed to load coin models'),
-  quote: selectors.components.simpleBuy.getSBQuote(state).getOrFail('Could not get exchange rate')
+    .getOrFail('Failed to load coin models')
 })
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({

packages/blockchain-wallet-v4-frontend/src/modals/RecurringBuys/Frequency/index.tsx

@@ -1,49 +1,48 @@
 import React, { useCallback } from 'react'
-import { bindActionCreators, Dispatch } from 'redux'
 import { FormattedMessage } from 'react-intl'
 import { connect, ConnectedProps } from 'react-redux'
+import { bindActionCreators, Dispatch } from 'redux'
 
 import { FlyoutHeader, Text } from 'blockchain-info-components'
-import { RootState } from 'data/rootReducer'
-import { actions, selectors } from 'data'
 import { SBOrderType } from 'core/types'
-
+import { actions, selectors } from 'data'
 import { getBaseAmount } from 'data/components/simpleBuy/model'
+import { RootState } from 'data/rootReducer'
 import { RecurringBuyPeriods, RecurringBuyStepType } from 'data/types'
 
-import { getPeriodTitleText, getPeriodSubTitleText, OptionRightActionRow } from './model'
 import { Props as _P } from '..'
+import { getPeriodSubTitleText, getPeriodTitleText, OptionRightActionRow } from './model'
 
 const Frequency = ({ close, order, recurringBuyActions }: Props) => {
   const amount = getBaseAmount(order)
   const currency = order.outputCurrency
   // ONE_TIME is not a recurring buy option so take it out before displaying
-  const periods = Object.values(RecurringBuyPeriods).filter((p) => p !== RecurringBuyPeriods.ONE_TIME)
+  const periods = Object.values(RecurringBuyPeriods).filter(
+    (p) => p !== RecurringBuyPeriods.ONE_TIME
+  )
   const setPeriod = (period: RecurringBuyPeriods) => () => {
     recurringBuyActions.setPeriod(period)
     recurringBuyActions.setStep({ step: RecurringBuyStepType.CHECKOUT_CONFIRM })
   }
 
   return (
     <>
-      <FlyoutHeader
-        data-e2e="closeRecurringBuyModalFrequencyStep"
-        mode="back"
-        onClick={close}
-      >
+      <FlyoutHeader data-e2e='closeRecurringBuyModalFrequencyStep' mode='back' onClick={close}>
         <FormattedMessage
           id='modals.recurringbuys.get_started.buy_amount_of_currency'
           defaultMessage='Buy {amount} of {currency}'
-          values={{ amount, currency }} />
+          values={{ amount, currency }}
+        />
       </FlyoutHeader>
       {periods.map((period) => (
-        <OptionRightActionRow
-          key={period}
-          onClick={setPeriod(period)}
-        >
+        <OptionRightActionRow key={period} onClick={setPeriod(period)}>
           <>
-            <Text weight={500} size='14px' color='grey600'>{getPeriodTitleText(period)}</Text>
-            <Text weight={600} size='16px' color='grey900'>{getPeriodSubTitleText(period)}</Text>
+            <Text weight={600} size='16px' color='grey900'>
+              {getPeriodTitleText(period)}
+            </Text>
+            <Text weight={500} size='14px' color='grey600'>
+              {getPeriodSubTitleText(period)}
+            </Text>
           </>
         </OptionRightActionRow>
       ))}