feat(recurring buy): added new flyout layout and styling shared compo…

…nents and implemented recurring buy first time period picker and confirm screens

packages/blockchain-info-components/.storybook/preview.js

@@ -7,7 +7,6 @@ import { Palette } from '../src/Colors/index'
 import { FontGlobalStyles, IconGlobalStyles } from '../src'
 
 const withTheme = () => (story, context) => {
-  console.log('fooo', context)
   const theme1= Palette('default')
   const theme2 = Palette('darkmode')
   const theme3 = Palette('compliment')

packages/blockchain-info-components/index.d.ts

@@ -10,16 +10,24 @@ import { IcoMoonType } from './src/Icons/Icomoon'
 import { ImageType } from './src/Images/Images'
 import { CoinType, WalletCurrencyType } from 'core/types'
 import { SwapBaseCounterTypes } from 'data/types'
+import { Props as FlyoutContainerPropsType } from './src/Flyouts/Container' 
+import { Props as FlyoutContentPropsType } from './src/Flyouts/Content' 
 import { Props as FlyoutHeaderPropsType } from './src/Flyouts/Header' 
+import { Props as AmountSubHeaderPropsType } from './src/Flyouts/AmountSubHeader' 
 import { Props as FlyoutFooterPropsType } from './src/Flyouts/' 
+import { Props as CheckoutRowPropsType } from './src/Rows/CheckoutRow' 
 
 type AllCoinsType = WalletCurrencyType | 'STX'
 
 export const Badge: FunctionComponent<any>
 export const Banner: FunctionComponent<any>
 export const Box: FunctionComponent<any>
+export const FlyoutContainer: FunctionComponent<FlyoutContainerPropsType>
+export const FlyoutContent: FunctionComponent<FlyoutContentPropsType>
 export const FlyoutHeader: FunctionComponent<FlyoutHeaderPropsType>
+export const AmountSubHeader: FunctionComponent<AmountSubHeaderPropsType>
 export const FlyoutFooter: FunctionComponent<FlyoutFooterPropsType>
+export const CheckoutRow: FunctionComponent<CheckoutRowPropsType>
 export const BlockchainLoader: FunctionComponent<{
   width?: string
   height?: string

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

@@ -0,0 +1,42 @@
+import React, { memo } from 'react'
+import styled, { css } from 'styled-components'
+
+import { Icon } from '../Icons'
+import { Text } from '../Text'
+
+const Amount = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0 40px 24px;
+  > div {
+    display: flex;
+    flex-direction: row;
+  }
+`
+
+const AmountSubHeader = (props: Props) => {
+  return (
+    <Amount data-e2e={props['data-e2e']}>
+      <div>
+        <Text size='32px' weight={600} color='grey800'>
+          {props.title}
+        </Text>
+      </div>
+      <div>
+        <Text size='20px' weight={600} color='grey600' style={{ marginTop: '8px' }}>
+          {props.subTitle}
+        </Text>
+      </div>
+    </Amount>
+  )
+}
+
+export type Props = {
+  'data-e2e': string
+  title: string
+  subTitle: string
+}
+
+export default memo(AmountSubHeader,
+  (prevProps, nextProps) => 
+    prevProps.title === nextProps.title && prevProps.subTitle === nextProps.subTitle)

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

@@ -0,0 +1,24 @@
+import React, { memo } from 'react'
+import styled from 'styled-components'
+
+const Container = styled.div`
+  display: flex;
+  flex: 1;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+`
+
+const FlyoutContainer = (props: Props) => {
+  return (
+    <Container>
+      {props.children}
+    </Container>    
+  )
+}
+
+export type Props = {
+  children: React.ReactNode
+}
+
+export default memo(FlyoutContainer)

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

@@ -0,0 +1,23 @@
+import React, { memo } from 'react'
+import styled from 'styled-components'
+
+const Content = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-start;
+`
+
+const FlyoutContent = (props: Props) => {
+  return (
+    <Content>
+      {props.children}
+    </Content>
+  )
+}
+
+export type Props = {
+  children: React.ReactNode
+}
+
+export default memo(FlyoutContent)

packages/blockchain-info-components/src/Rows/CheckoutRow.tsx

@@ -0,0 +1,122 @@
+import React, { memo, useState } from 'react'
+import styled, { css } from 'styled-components'
+
+import { Icon } from '../Icons'
+import { Text } from '../Text'
+
+const Row = styled.div`
+  padding: 0 40px;
+  box-sizing: border-box;
+  border-top: 1px solid ${(props) => props.theme.grey000};
+
+  &:last-child {
+    border-bottom: 1px solid ${(props) => props.theme.grey000};
+  }
+`
+
+const RowVisible = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 60px;
+  align-items: center;
+`
+
+const FlatRow = styled.div`
+  display: flex;
+`
+
+const RowTitle = styled(Text)`
+  font-size: 14px;
+  font-weight: 500;
+  color: ${(props) => props.theme.grey900};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`
+
+const RowValue = styled.div`
+  text-align: right;
+`
+
+const RowText = styled(RowTitle)`
+  font-weight: 600;
+`
+
+const AdditionalText = styled(Text)`
+  font-weight: 500;
+  color: ${(props) => props.theme.grey400};
+  text-align: right;
+  font-size: 12px;
+`
+
+const IconWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  cursor: pointer;
+  margin-left: 4px;
+`
+
+const ToolTipContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  border-radius: 8px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  padding: 16px;
+  background-color: ${(props) => props.theme.grey000};
+
+  animation: fadeIn 0.3s ease-in-out;
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`
+const CheckoutRow = (props: Props) => {
+  const [isActiveTooltip, setToolTip] = useState(false)
+  return (
+    <Row>
+      <RowVisible>
+        <FlatRow>
+          <RowTitle>{props.title}</RowTitle>
+          {props.toolTip && (
+            <IconWrapper>
+              <Icon
+                name='question-in-circle-filled'
+                size='16px'
+                color={isActiveTooltip ? 'blue600' : 'grey300'}
+                onClick={() => setToolTip(!isActiveTooltip)}
+              />
+            </IconWrapper>
+          )}
+        </FlatRow>
+        <RowValue>
+          <RowText>{props.text}</RowText>
+          {props.additionalText && (
+            <AdditionalText>{props.additionalText}</AdditionalText>
+          )}
+        </RowValue>
+      </RowVisible>
+      {props.toolTip && isActiveTooltip && (
+        <ToolTipContainer>
+          {props.toolTip}
+        </ToolTipContainer>
+      )}
+    </Row>
+  )
+}
+
+export type Props = {
+  title: string | React.ReactNode
+  text: string | React.ReactNode
+  additionalText?: string | React.ReactNode
+  toolTip?: string | React.ReactNode
+}
+
+export default memo(CheckoutRow)

packages/blockchain-info-components/src/Text/Text.js

@@ -26,6 +26,18 @@ const Text = ({ children, ...props }) => {
   )
 }
 
+// type Props = {
+//   weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
+//   size: string
+//   uppercase: boolean
+//   capitalize: boolean
+//   lineHeight: string
+//   italic: boolean
+//   altFont: boolean
+//   cursor: string
+//   opacity: number
+// }
+
 Text.propTypes = {
   weight: PropTypes.oneOf([100, 200, 300, 400, 500, 600, 700, 800, 900]),
   size: PropTypes.string,

packages/blockchain-info-components/src/index.js

@@ -5,8 +5,12 @@ export { Button, ButtonGroup, IconButton } from './Buttons'
 export { Carousel } from './Carousels'
 export { Color, Palette } from './Colors/index.ts'
 export { ComponentDropdown, SimpleDropdown } from './Dropdowns'
+export { default as FlyoutContainer } from './Flyouts/Container'
 export { default as FlyoutFooter } from './Flyouts/Footer'
+export { default as FlyoutContent } from './Flyouts/Content'
 export { default as FlyoutHeader } from './Flyouts/Header'
+export { default as AmountSubHeader } from './Flyouts/AmountSubHeader'
+export { default as CheckoutRow } from './Rows/CheckoutRow'
 export { FontGlobalStyles, IconGlobalStyles } from './Fonts'
 export {
   AutosizeTextInput,

packages/blockchain-info-components/stories/chapters/flyoutAmountSubHeader.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { AmountSubHeader } from '../../src'
+
+export default {
+  title: 'Flyouts/AmountSubHeader',
+  component: AmountSubHeader,
+  args: {
+    'data-e2e': 'foooo',
+    title: '10.0000 BTC',
+    subTitle: '$100'
+  },
+}
+
+export const Default = (args) => <AmountSubHeader {...args} />

packages/blockchain-info-components/stories/chapters/rows.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { CheckoutRow } from '../../src'
+
+export default {
+  title: 'Rows/CheckoutRow',
+  component: CheckoutRow,
+  args: {
+    title: 'Frequency',
+    text: 'One Time',
+    additionalText: ''
+  },
+}
+
+export const Default = (args) => <CheckoutRow {...args} />
+export const WithAdditionalText = (args) => <CheckoutRow {...args} additionalText='Some other text' />
+export const WithToolTip = (args) => <CheckoutRow {...args} toolTip={'foooooooooo'} additionalText='Some other text' />
+export const ToolTipNoAdditional = (args) => <CheckoutRow {...args} toolTip={'foooooooooo'} />

packages/blockchain-info-components/stories/chapters/text.stories.js

@@ -5,8 +5,6 @@ import { addDecorator } from '@storybook/react'
 import { Text } from '../../src'
 import Layout from '../components/layout'
 
-addDecorator(withInfo)
-
 const sample =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cras id tortor lectus.Pellentesque pulvinar sit amet massa quis auctor.Ut consectetur dui mi, eu vestibulum felis ornare sit amet.Sed vel interdum massa, a gravida arcu.Vestibulum sed dictum elit.Nulla pharetra euismod quam, ut iaculis nisi tincidunt et.Donec justo neque, pulvinar sit amet sollicitudin nec, fermentum vel sem.Mauris varius ultrices viverra.Donec condimentum velit id aliquam aliquet.Donec dapibus, tortor vehicula mollis venenatis, felis nisi porttitor nisl, vitae imperdiet leo tortor sed eros.'
 
@@ -15,7 +13,6 @@ export default {
   parameters: {
     info: { text: 'Documentation', inline: true }
   },
-  decorators: [(story) => <Layout>{story()}</Layout>]
 }
 
 export const _Text = () => <Text>{sample}</Text>

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

@@ -398,6 +398,7 @@ type MessagesType = {
   'copy.holdings': 'Holdings'
   'copy.in_review': 'In Review'
   'copy.incoming_fee': 'Incoming Fee'
+  'copy.instantly': 'Instantly'
   'copy.instantly_available': 'Instantly Available'
   'copy.instantly_exchange': 'Instantly exchange your crypto into any currency we offer in your wallet.'
   'copy.instantly_fund': 'Send, Receive and instantly fund your trades using the Trading Account.'
@@ -496,6 +497,7 @@ type MessagesType = {
   'copy.view_outgoing_tx': 'View Outgoing Transaction'
   'copy.yourlink': 'Your Link'
   'copy.all': 'All'
+  'copy.available_to_trade': 'Available to Trade'
   'copy.day': '1D'
   'copy.month': '1M'
   'copy.week': '1W'
@@ -1231,8 +1233,14 @@ type MessagesType = {
   'modals.recurringbuys.timeframe.2_weeks': 'Every 2 weeks'
   'modals.recurringbuys.timeframe.every_month': 'Every month'
 
+  'modals.recurringbuys.time_options.daily': 'Daily'
+  'modals.recurringbuys.time_options.weekly': 'Weekly'
+  'modals.recurringbuys.time_options.bi_weekly': 'Twice a Month'
+  '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.buy_amount_of_currency': 'Buy {amount} of {currency}'
   'modals.recurringbuys.get_started.get_started': 'Get Started'
   'modals.recurringbuys.get_started.maybe_later': 'Maybe Later'
 

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

@@ -24,7 +24,6 @@ export default ({ api, coreSagas, networks }) => {
     yield takeLatest(createFiatDeposit.type, brokerageSagas.createFiatDeposit)
     yield takeLatest(deleteSavedBank.type, brokerageSagas.deleteSavedBank)
     yield takeLatest(fetchBankLinkCredentials.type, brokerageSagas.fetchBankLinkCredentials)
-    yield takeLatest(fetchRBMethods.type, brokerageSagas.fetchRBMethods)
     yield takeLatest(showModal.type, brokerageSagas.showModal)
   }
 }

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

@@ -381,7 +381,6 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
     fetchBankLinkCredentials,
     fetchBankTransferAccounts,
     fetchBankTransferUpdate,
-    fetchRBMethods,
     handleDepositFiatClick,
     handleWithdrawClick,
     showModal

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

@@ -169,14 +169,6 @@ export enum BrokerageModalOriginType {
   WITHDRAWAL = 'WithdrawModal'
 }
 
-export enum RecurringBuyPeriods {
-  BI_WEEKLY = 'BI_WEEKLY',
-  DAILY = 'DAILY',
-  MONTHLY = 'MONTHLY',
-  ONE_TIME = 'ONE_TIME',
-  WEEKLY = 'WEEKLY'
-}
-
 export type BrokerageTxFormValuesType =
   | {
       amount?: number