fix(recurring buy): fixes several small design issues related to recurring buy

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

@@ -1252,13 +1252,11 @@ type MessagesType = {
   'modals.recurringbuys.time_options.monthly': 'Monthly'
 
   'modals.recurringbuys.get_started.title': 'Set Up a Recurring Buy'
-  'modals.recurringbuys.get_started.description': 'Buy {amount} of {currency} every day, week or month with a Recurring Buy. No need to ever time the market.'
+  'modals.recurringbuys.get_started.description': 'Buy {amount} of {outputCurrency} every day, week or month with a Recurring Buy. No need to ever time the market.'
   'modals.recurringbuys.get_started.buy_amount_of_currency': 'Buy {amount} of {currency}'
   'modals.recurringbuys.get_started.get_started': 'Get Started'
   'modals.recurringbuys.get_started.maybe_later': 'Maybe Later'
 
-  'modals.recurringbuys.get_started.title': 'Set Up a Recurring Buy'
-  'modals.recurringbuys.get_started.description': 'Buy {amount} of {currency} every day, week or month with a Recurring Buy. No need to ever time the market.'
   'modals.recurringbuys.get_started.get_started': 'Get Started'
   'modals.recurringbuys.get_started.maybe_later': 'Maybe Later'
 
@@ -1904,6 +1902,7 @@ type MessagesType = {
   'scenes.borrow.warning.safe': 'Your collateralization ratio is <span class="green600">{currentRatio}</span>, no action needed at this time.'
   'scenes.borrow.warning.unsafe': 'Your collateralization ratio is below {unsafeRatio}. Your loan is in danger of being liquidated.'
   'scenes.buysell.exchangecheckout.rate': "The rate offered by your region's exchange partner. May include fees."
+  'scenes.coin.recurringbuy.next_buy_is_today': 'Next Buy is Today'
   'scenes.coin.recurringbuy.next_buy_on_date': 'Next Buy on {date}'
   'scenes.coin.recurringbuy.next_sell_on_date': 'Next Sell on {date}'
   'scenes.coin.recurringbuy.next_swap_on_date': 'Next Swap on {date}'

packages/blockchain-wallet-v4-frontend/src/components/Box/SavedRecurringBuy.stories.tsx

@@ -37,3 +37,4 @@ export default {
 }
 
 export const Default = (args) => <SavedRecurringBuy {...args} />
+export const Today = (args) => <SavedRecurringBuy {...args} nextPayment={new Date()} />

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { IntlProvider } from 'react-intl'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import GettingStarted from './GettingStarted'
+
+export default {
+  args: {
+    amount: '$20',
+    close: () => {},
+    nextStep: () => {},
+    outputCurrency: 'BTC'
+  },
+  component: GettingStarted,
+  decorators: [
+    (Story) => (
+      <IntlProvider locale='en'>
+        <div style={{ display: 'flex', height: '100vh' }}>
+          <div style={{ border: '1px solid #ddd', width: '480px' }}>
+            <Story />
+          </div>
+        </div>
+      </IntlProvider>
+    )
+  ],
+  title: 'Flyouts/RecurringBuy/GettingStarted'
+} as ComponentMeta<typeof GettingStarted>
+
+export const Default: ComponentStory<typeof GettingStarted> = (args) => <GettingStarted {...args} />

packages/blockchain-wallet-v4-frontend/src/modals/RecurringBuys/GetStarted/template.success.tsx → packages/blockchain-wallet-v4-frontend/src/components/Flyout/RecurringBuy/GettingStarted.tsx

@@ -3,23 +3,12 @@ import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 
 import { Button, Image, Link, Text } from 'blockchain-info-components'
-import { FlyoutFooter, FlyoutHeader, FlyoutWrapper } from 'components/Flyout'
-import { getBaseAmount } from 'data/components/simpleBuy/model'
+import { FiatType } from 'core/types'
 
-import { Props as _P } from '.'
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 480px;
-  height: 100vh;
-`
-const MainContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  justify-content: center;
-`
+import Container from '../Container'
+import Content from '../Content'
+import Footer from '../Footer'
+import Header from '../Header'
 
 const ContentWrapper = styled.div`
   display: flex;
@@ -41,58 +30,54 @@ const Description = styled(Text)`
   text-align: center;
   line-height: 24px;
   font-size: 14px;
+  margin: 0 25px;
   color: ${(props) => props.theme.grey900};
 `
 
-const FooterWrapper = styled(FlyoutWrapper)`
-  padding-top: 0px;
-`
-const GetStarted = ({ close, nextStep, order }: Props) => {
-  const amount = getBaseAmount(order)
-  const currency = order.outputCurrency
+const GettingStarted = ({ amount, close, nextStep, outputCurrency }: Props) => {
   const closeModal = useCallback(() => {
     close()
   }, [])
 
   return (
-    <Wrapper>
-      <FlyoutHeader data-e2e='RecurringBuysCloseButton' mode='close' onClick={closeModal} />
-      <MainContent>
-        <ContentWrapper>
-          <Image name='recurring-buy-get-started' height='130px' width='222px' />
-        </ContentWrapper>
-        <TextContentWrapper>
+    <Container>
+      <Header data-e2e='RecurringBuysCloseButton' mode='close' onClick={closeModal} />
+      <Content mode='middle'>
+        <div>
           <ContentWrapper>
-            <Text size='20px' weight={600} color='grey900' lineHeight='30px'>
-              <FormattedMessage
-                id='modals.recurringbuys.get_started.title'
-                defaultMessage='Set Up a Recurring Buy'
-              />
-            </Text>
+            <Image name='recurring-buy-get-started' height='130px' width='222px' />
           </ContentWrapper>
-          <>
+          <TextContentWrapper>
+            <ContentWrapper>
+              <Text size='20px' weight={600} color='grey900' lineHeight='30px'>
+                <FormattedMessage
+                  id='modals.recurringbuys.get_started.title'
+                  defaultMessage='Set Up a Recurring Buy'
+                />
+              </Text>
+            </ContentWrapper>
             <Description>
               <FormattedMessage
                 id='modals.recurringbuys.get_started.description'
-                defaultMessage='Buy {amount} of {currency} every day, week or month with a Recurring Buy. No need to ever time the market.'
+                defaultMessage='Buy {amount} of {outputCurrency} every day, week or month with a Recurring Buy. No need to ever time the market.'
                 values={{
                   amount,
-                  currency
+                  outputCurrency
                 }}
               />
               <Link
-                size='16px'
+                size='14px'
                 weight={500}
                 target='_blank'
                 href='https://support.blockchain.com/hc/en-us/'
               >
                 <FormattedMessage id='buttons.learn_more_arrow' defaultMessage='Learn more ->' />
               </Link>
             </Description>
-          </>
-        </TextContentWrapper>
-      </MainContent>
-      <FlyoutFooter>
+          </TextContentWrapper>
+        </div>
+      </Content>
+      <Footer>
         <Button
           nature='primary'
           data-e2e='getStartedWithRecurringBuys'
@@ -121,12 +106,16 @@ const GetStarted = ({ close, nextStep, order }: Props) => {
             defaultMessage='Maybe Later'
           />
         </Button>
-      </FlyoutFooter>
-    </Wrapper>
+      </Footer>
+    </Container>
   )
 }
 
-type OwnProps = { nextStep: () => void }
-type Props = _P & OwnProps
+export type Props = {
+  amount: string
+  close: () => void
+  nextStep: () => void
+  outputCurrency: string
+}
 
-export default GetStarted
+export default GettingStarted

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

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react'
 import { FormattedMessage } from 'react-intl'
 import moment from 'moment'
+import styled from 'styled-components'
 
 import { Banner, Button } from 'blockchain-info-components'
 import { FiatType, SBPaymentTypes } from 'core/types'
@@ -15,6 +16,10 @@ import Footer from './Footer'
 import Header from './Header'
 import { getPaymentMethodText, getPeriodSubTitleText, getPeriodTitleText } from './model'
 
+const StyledBanner = styled(Banner)`
+  border: unset;
+`
+
 const RecurringBuyDetails = ({
   closeClick,
   complete,
@@ -47,7 +52,7 @@ const RecurringBuyDetails = ({
       <Content mode='top'>
         <AmountSubHeader
           data-e2e='recurringBuyAmount'
-          subTitle={<Banner {...bannerProps} />}
+          subTitle={<StyledBanner {...bannerProps} />}
           title={`${amountString} of ${crypto}`}
         />
         <CheckoutRow

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

@@ -13,6 +13,7 @@ import FlyoutFooter from './Footer'
 import FrequencyScreen from './FrequencyScreen'
 // These are the newest versions of flyout layouts and should eventually replace/integrate FlyoutWrapper etc.
 import FlyoutHeader from './Header'
+import RecurringBuyGettingStarted from './RecurringBuy/GettingStarted'
 import RecurringBuyDetails from './RecurringBuyDetails'
 import RecurringBuyRemoveConfirm from './RecurringBuyRemoveConfirm'
 
@@ -25,6 +26,7 @@ export {
   FlyoutHeader,
   FrequencyScreen,
   RecurringBuyDetails,
+  RecurringBuyGettingStarted,
   RecurringBuyRemoveConfirm
 }
 

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
-import moment from 'moment'
+import moment, { Moment } from 'moment'
 
 import { SBPaymentTypes } from '../../../../blockchain-wallet-v4/src/network/api/simpleBuy/types'
 import { RecurringBuyPeriods } from '../../data/components/recurringBuy/types'
@@ -128,18 +128,31 @@ const getPeriodText = (period: RecurringBuyPeriods): React.ReactNode => {
   return text
 }
 
-const getActionText = (action: ActionEnum, date: string | number) => {
+const getActionText = (action: ActionEnum, nextDate: string | number) => {
   let text
+  let isToday = false
+  let date: Moment | string = moment()
+
+  if (nextDate) {
+    isToday = moment(nextDate).calendar().startsWith('Today')
+    date = moment(nextDate)
+  }
+
+  date = date.format('ddd, MMMM Do')
+
   switch (action) {
     default:
     case ActionEnum.BUY:
-      text = (
+      text = isToday ? (
+        <FormattedMessage
+          id='scenes.coin.recurringbuy.next_buy_is_today'
+          defaultMessage='Next Buy is Today'
+        />
+      ) : (
         <FormattedMessage
           id='scenes.coin.recurringbuy.next_buy_on_date'
           defaultMessage='Next Buy on {date}'
-          values={{
-            date: moment(date).format('ddd, MMMM Do')
-          }}
+          values={{ date }}
         />
       )
       break
@@ -148,9 +161,7 @@ const getActionText = (action: ActionEnum, date: string | number) => {
         <FormattedMessage
           id='scenes.coin.recurringbuy.next_sell_on_date'
           defaultMessage='Next Sell on {date}'
-          values={{
-            date: moment(date).format('ddd, MMMM Do')
-          }}
+          values={{ date }}
         />
       )
       break
@@ -159,9 +170,7 @@ const getActionText = (action: ActionEnum, date: string | number) => {
         <FormattedMessage
           id='scenes.coin.recurringbuy.next_deposit_on_date'
           defaultMessage='Next Deposit on {date}'
-          values={{
-            date: moment(date).format('ddd, MMMM Do')
-          }}
+          values={{ date }}
         />
       )
       break
@@ -170,9 +179,7 @@ const getActionText = (action: ActionEnum, date: string | number) => {
         <FormattedMessage
           id='scenes.coin.recurringbuy.next_withdrawal_on_date'
           defaultMessage='Next Withdrawal on {date}'
-          values={{
-            date: moment(date).format('ddd, MMMM Do')
-          }}
+          values={{ date }}
         />
       )
       break
@@ -181,9 +188,7 @@ const getActionText = (action: ActionEnum, date: string | number) => {
         <FormattedMessage
           id='scenes.coin.recurringbuy.next_swap_on_date'
           defaultMessage='Next Swap on {date}'
-          values={{
-            date: moment(date).format('ddd, MMMM Do')
-          }}
+          values={{ date }}
         />
       )
       break

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

@@ -1,24 +1,28 @@
 import React, { useCallback } from 'react'
 import { connect, ConnectedProps } from 'react-redux'
 
+import { RecurringBuyGettingStarted } from 'components/Flyout'
 import { SBOrderType } from 'core/types'
 import { selectors } from 'data'
+import { getCounterAmount } from 'data/components/simpleBuy/model'
 import { RootState } from 'data/rootReducer'
 import { RecurringBuyStepType } from 'data/types'
 
 import { Props as _P } from '..'
-import Success from './template.success'
 
-const GetStartedContainer = (props: Props) => {
+const GetStartedContainer = ({ close, order, recurringBuyActions }: Props) => {
   const nextStep = useCallback(
     () =>
-      props.recurringBuyActions.setStep({
+      recurringBuyActions.setStep({
         step: RecurringBuyStepType.FREQUENCY
       }),
     [RecurringBuyStepType.FREQUENCY]
   )
+  const { outputCurrency } = order
+  const amount = getCounterAmount(order)
+  const gettingStartedProps = { amount, close, nextStep, outputCurrency }
 
-  return <Success nextStep={nextStep} {...props} />
+  return <RecurringBuyGettingStarted {...gettingStartedProps} />
 }
 
 const mapStateToProps = (state: RootState) => ({

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

@@ -36,6 +36,7 @@ class AnimatedCarousel extends React.PureComponent<Props, State> {
   }
 
   handleClick = (index: number) => {
+    this.props.stepChange(index)
     this.setState({ index })
   }
 

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

@@ -5,15 +5,19 @@ import styled from 'styled-components'
 import animationData from '../graph.json'
 
 const GraphAnimation = styled.div`
-  background-color: #ffffff;
+  background-color: ${(props) => props.theme.white};
   width: 100%;
-  height: 100%;
+  height: 14.4rem;
   display: block;
   overflow: hidden;
   transform: translate3d(0, 0, 0);
   text-align: center;
   opacity: 1;
   background-image: none;
+
+  & > svg {
+    height: 10.4rem !important;
+  }
 `
 
 const AnimatedGraph = ({ stepIndex }: { stepIndex: number }) => {

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

@@ -31,7 +31,7 @@ const Slide = styled.div`
   height: 100%;
 `
 const SlideStart = styled(Slide)`
-  justify-content: flex-start;
+  justify-content: center;
 `
 
 const SlideContent = styled.div`