feat(recurring buy): adding new shared flyout header component and ad…

…ding data and functionality to recurring buy first time buyer flyout

package.json

@@ -105,11 +105,13 @@
     "@commitlint/cli": "12.1.1",
     "@commitlint/config-conventional": "12.1.1",
     "@formatjs/cli": "4.2.2",
+    "@react-theming/storybook-addon": "1.1.1",
     "@storybook/addon-actions": "6.3.0",
     "@storybook/addon-essentials": "^6.3.0",
     "@storybook/addon-info": "5.3.21",
     "@storybook/addon-links": "6.3.0",
     "@storybook/cli": "6.3.0",
+    "storybook-dark-mode": "1.0.8",
     "@storybook/react": "6.3.0",
     "@storybook/storybook-deployer": "2.8.10",
     "@types/axios": "0.14.0",

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

@@ -1,9 +1,20 @@
 module.exports = {
-  stories: ['../stories/**/*.stories.js'],
+  stories: ['../stories/**/*.stories.@(js|tsx)'],
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-actions',
     '@storybook/addon-links',
-    'themeprovider-storybook/register'
-  ]
+    'themeprovider-storybook/register',
+    '@react-theming/storybook-addon',
+    'storybook-dark-mode'
+  ],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+    }
+  }
 }

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { addDecorator } from '@storybook/react';
+import { withThemes } from '@react-theming/storybook-addon';
+
+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')
+  const theme4 = Palette('greyscale')
+  const theme5 = Palette('invert')
+  const theme = context.args.theme ? Palette(context.args.theme) : theme1
+
+  return (
+    <ThemeProvider theme={theme}>
+      {story()}
+    </ThemeProvider>
+  )
+}
+
+const withIconsAndFonts = () => (story) => {
+  return (
+    <>
+      {story()}
+      <IconGlobalStyles />
+      <FontGlobalStyles />
+    </>
+  )
+}
+addDecorator(withTheme())
+addDecorator(withIconsAndFonts())

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

@@ -10,12 +10,14 @@ 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 FlyoutHeaderPropsType } from './src/Flyouts/Header' 
 
 type AllCoinsType = WalletCurrencyType | 'STX'
 
 export const Badge: FunctionComponent<any>
 export const Banner: FunctionComponent<any>
 export const Box: FunctionComponent<any>
+export const FlyoutHeader: FunctionComponent<FlyoutHeaderPropsType>
 export const BlockchainLoader: FunctionComponent<{
   width?: string
   height?: string

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

@@ -0,0 +1,67 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+import { Icon } from '../Icons'
+import { Text } from '../Text'
+
+const Header = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  padding: 40px;
+  border-bottom: ${(p) => p.theme.grey000};
+`
+
+const TopText = styled(Text)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+`
+const LeftTopCol = styled.div`
+  display: flex;
+  align-items: center;
+`    
+
+const FlyoutHeader = (props: Props) => {
+  return (
+    <Header>
+      <TopText color='grey800' size='20px' weight={600}>
+          <LeftTopCol>
+            {props.mode === 'back' && (
+              <Icon
+                cursor
+                data-e2e={props['data-e2e']}
+                name='arrow-back'
+                size='20px'
+                color='grey600'
+                role='button'
+                style={{ marginRight: '8px' }}
+                onClick={props.onClick}
+              />
+            )}
+            {props.children}
+          </LeftTopCol>
+        {props.mode === 'close' && (
+          <Icon
+            cursor
+            data-e2e='RecurringBuysCloseButton'
+            name='close'
+            size='20px'
+            color='grey600'
+            role='button'
+            onClick={props.onClick}
+          />
+        )}
+      </TopText>
+    </Header>
+  )
+}
+
+export type Props = {
+  children?: React.ReactNode,
+  mode: 'close' | 'back'
+  'data-e2e': string,
+  onClick: () => void,
+}
+
+export default FlyoutHeader

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

@@ -4,6 +4,8 @@ import { ThemeProvider } from 'styled-components'
 
 import { Palette } from '../Colors/index.ts'
 
+console.log(Palette)
+
 const Themes = props => {
   const { children, theme } = props
   const colors = Palette(theme)

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

@@ -1,6 +1,7 @@
 export { Badge } from './Badges'
 export { Banner } from './Banners'
 export { default as Box } from './Box'
+export { default as FlyoutHeader } from './Flyouts/Header'
 export { Button, ButtonGroup, IconButton } from './Buttons'
 export { Carousel } from './Carousels'
 export { Color, Palette } from './Colors/index.ts'

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

@@ -32,6 +32,4 @@ export default {
 
 export const BrokerageBox = (args) => <Box {...args}>Brokerage Box</Box>
 
-BrokerageBox.story = {
-  name: 'Brokerage Box'
-}
+BrokerageBox.storyName = 'Brokerage Box'

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

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { FlyoutHeader } from '../../src'
+
+export default {
+  title: 'Flyouts/Header',
+  component: FlyoutHeader,
+  args: {
+    'data-e2e': 'foooo',
+    onClick: () => {},
+    mode: 'back'
+  }
+}
+
+export const BackArrowHeader = (args) => <FlyoutHeader {...args}>Buy Bitcoin</FlyoutHeader>
+
+export const CloseOnlyHeader = (args) => <FlyoutHeader {...args} mode='close' />

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

@@ -62,6 +62,7 @@ import {
 import * as S from './selectors'
 import * as T from './types'
 import { getDirection } from './utils'
+import { RecurringBuyPeriods } from '../brokerage/types'
 
 export const logLocation = 'components/simpleBuy/sagas'
 
@@ -1091,6 +1092,7 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
           amount,
           cryptoAmount,
           fix,
+          frequency: RecurringBuyPeriods.ONE_TIME,
           orderType
         } as T.SBCheckoutFormValuesType)
       )

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

@@ -10,27 +10,24 @@ import { LoadingUpdating as Loading } from '../../components'
 import { getData } from './selectors'
 // import Failure from './template.error'
 import Success from './template.success'
+import { SBOrderType } from 'core/types'
+import { Props as _P } from '../'
 
 const GetStartedContainer = (props: Props) => {
   return (
-    <>
-      <>{props.rbFormValues?.frequency}</>
-      <>{props.sbFormValues?.amount}</>
-    </>
+    <Success {...props} />
   )
 }
 
 const mapStateToProps = (state: RootState) => ({
   rbFormValues: selectors.form.getFormValues('recurringBuyScheduler')(state) as
     | { frequency: RecurringBuyPeriods }
     | undefined,
-  sbFormValues: selectors.form.getFormValues('simpleBuyCheckout')(state) as
-    | SBCheckoutFormValuesType
-    | undefined,
+  order: selectors.components.simpleBuy.getSBOrder(state) as SBOrderType
 })
 
 const connector = connect(mapStateToProps)
 
-export type Props = ConnectedProps<typeof connector>
+export type Props = _P & ConnectedProps<typeof connector>
 
 export default connector(GetStartedContainer)

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

@@ -2,8 +2,13 @@ import React, { PureComponent } from 'react'
 import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 
-import { Button, Icon, Image, Link, Text } from 'blockchain-info-components'
+import { Button, Icon, Image, Link, Text, FlyoutHeader } from 'blockchain-info-components'
 import { FlyoutWrapper } from 'components/Flyout'
+import { RecurringBuyPeriods, SBCheckoutFormValuesType } from 'data/types'
+import { SBOrderType } from 'core/types'
+import { getBaseAmount } from 'data/components/simpleBuy/model'
+
+import { Props } from '.'
 
 const Wrapper = styled.div`
   display: flex;
@@ -56,22 +61,15 @@ class GetStarted extends PureComponent<Props> {
   }
 
   render() {
+    const baseAmount = getBaseAmount(this.props.order)
+    const closeModal = () => this.props.close()
     return (
       <Wrapper>
-        <FlyoutWrapper>
-          <IconsContainer>
-            <Icon
-              cursor
-              data-e2e='RecurringBuysCloseButton'
-              name='close'
-              size='20px'
-              color='grey600'
-              role='button'
-              onClick={this.props.handleClose}
-            />
-          </IconsContainer>
-        </FlyoutWrapper>
-
+        <FlyoutHeader
+          data-e2e="RecurringBuysCloseButton"
+          mode="close"
+          onClick={closeModal}
+        />
         <MainContent>
           <ContentWrapper>
             <Image name='recurring-buy-get-started' height='130px' width='222px' />
@@ -91,8 +89,8 @@ class GetStarted extends PureComponent<Props> {
                   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.'
                   values={{
-                    amount: '100',
-                    currency: 'BTC'
+                    amount: baseAmount,
+                    currency: this.props.order.outputCurrency 
                   }}
                 />
                 <Link
@@ -131,9 +129,7 @@ class GetStarted extends PureComponent<Props> {
             fullwidth
             height='48px'
             style={{ marginTop: '16px' }}
-            onClick={() => {
-              // alert
-            }}
+            onClick={closeModal}
           >
             <FormattedMessage
               id='modals.recurringbuys.get_started.maybe_later'
@@ -146,8 +142,4 @@ class GetStarted extends PureComponent<Props> {
   }
 }
 
-type Props = {
-  handleClose: () => void
-}
-
 export default GetStarted

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

@@ -9,25 +9,25 @@ import Success from './template.success'
 
 const SchedulerContainer = (props: Props) => {
   const dispatch = useDispatch()
-  const { methods } = props.formValues
+  // const { methods } = props.formValues
   const { method } = props
-  const showScheduler = methods.some((m) => method && method.type === m)
+  // const showScheduler = methods.some((m) => method && method.type === m)
 
   useEffect(() => {
     dispatch(actions.components.brokerage.fetchRBMethods())
-  }, [methods.join(''), method])
+  }, [method])
 
   return (
     <>
-      <Success disabled={!showScheduler} />
+      <Success disabled={false} />
     </>
   )
 }
 
 const mapStateToProps = (state: RootState) => ({
-  formValues: (selectors.form.getFormValues('recurringBuyScheduler')(state) as {
-    methods: SBPaymentTypes[]
-  }) || { methods: [] }
+  // formValues: (selectors.form.getFormValues('recurringBuyScheduler')(state) as {
+  //   methods: SBPaymentTypes[]
+  // }) || { methods: [] }
 })
 
 const connector = connect(mapStateToProps)

packages/blockchain-wallet-v4-frontend/src/modals/RecurringBuys/Scheduler/template.success.tsx

@@ -153,11 +153,12 @@ const SchedulerContainer = (props) => {
   )
 }
 
-const Scheduler = (props: InjectedFormProps & { disabled: boolean }) => {
-  return <Field {...props} component={SchedulerContainer} name='frequency' />
+const Scheduler = ({ disabled: boolean }) => {
+  return <Field component={SchedulerContainer} name='frequency' />
 }
 
-export default reduxForm<{}, { disabled: boolean }>({
-  destroyOnUnmount: false,
-  form: 'recurringBuyScheduler'
-})(Scheduler)
+// export default reduxForm<{}, { disabled: boolean }>({
+//   destroyOnUnmount: false,
+//   form: 'recurringBuyScheduler'
+// })(Scheduler)
+export default Scheduler

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

@@ -41,7 +41,7 @@ class RecurringBuys extends PureComponent<Props, State> {
         )}
         {this.props.step === RecurringBuysStepType.GET_STARTED && (
           <FlyoutChild>
-            <GetStarted handleClose={this.handleClose} {...this.props} />
+            <GetStarted {...this.props} />
           </FlyoutChild>
         )}
       </Flyout>