feat(simple buy): billing addr form

blockchain · Apr 28, 2020 · e3b0475 · e3b0475
1 parent eeb237a
commit e3b0475
Show file tree

Hide file tree

Showing 9 changed files with 193 additions and 38 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actionTypes.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actionTypes.ts
@@ -84,6 +84,8 @@ export const FETCH_SB_SUGGESTED_AMOUNTS_SUCCESS =
 export const HANDLE_SB_SUGGESTED_AMOUNT_CLICK =
   '@EVENT.HANDLE_SB_SUGGESTED_AMOUNT_CLICK'
 
+export const INITIALIZE_BILLING_ADDRESS = '@EVENT.INITIALIZE_SB_BILLING_ADDRESS'
+
 export const INITIALIZE_CHECKOUT = '@EVENT.INITIALIZE_SB_CHECKOUT'
 
 export const POLL_SB_CARD = '@EVENT.POLL_SB_CARD'

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actions.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actions.ts
@@ -352,6 +352,10 @@ export const handleSBSuggestedAmountClick = (amount: string) => ({
   }
 })
 
+export const initializeBillingAddress = () => ({
+  type: AT.INITIALIZE_BILLING_ADDRESS
+})
+
 export const initializeCheckout = (
   pairs: Array<SBPairType>,
   paymentMethods: SBPaymentMethodsType,

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagaRegister.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagaRegister.ts
@@ -47,6 +47,10 @@ export default ({ api, coreSagas, networks }) => {
       AT.HANDLE_SB_SUGGESTED_AMOUNT_CLICK,
       simpleBuySagas.handleSBSuggestedAmountClick
     )
+    yield takeLatest(
+      AT.INITIALIZE_BILLING_ADDRESS,
+      simpleBuySagas.initializeBillingAddress
+    )
     yield takeLatest(AT.INITIALIZE_CHECKOUT, simpleBuySagas.initializeCheckout)
     yield takeLatest(AT.POLL_SB_CARD, simpleBuySagas.pollSBCard)
     yield takeLatest(AT.POLL_SB_ORDER, simpleBuySagas.pollSBOrder)

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts
@@ -407,6 +407,28 @@ export default ({
     yield put(actions.form.change('simpleBuyCheckout', 'amount', standardAmt))
   }
 
+  const initializeBillingAddress = function * () {
+    yield call(waitForUserData)
+    const userDataR = selectors.modules.profile.getUserData(yield select())
+    const userData = userDataR.getOrElse(null)
+    const address = userData
+      ? userData.address
+      : {
+          country: 'GB',
+          line1: '',
+          line2: '',
+          city: '',
+          postCode: '',
+          state: ''
+        }
+
+    yield put(
+      actions.form.initialize('ccBillingAddress', {
+        ...address
+      })
+    )
+  }
+
   const initializeCheckout = function * ({
     pairs,
     paymentMethods,
@@ -543,6 +565,7 @@ export default ({
     fetchSBQuote,
     fetchSBSuggestedAmounts,
     handleSBSuggestedAmountClick,
+    initializeBillingAddress,
     initializeCheckout,
     pollSBCard,
     pollSBOrder,

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/types.ts
@@ -4,6 +4,7 @@ import {
   Everypay3DSResponseType,
   FiatEligibleType,
   FiatType,
+  NabuAddressType,
   RemoteDataType,
   SBAccountType,
   SBBalancesType,
@@ -24,6 +25,7 @@ export type SBAddCardFormValuesType = {
   'expiry-date': string
   'name-on-card': string
 }
+export type SBBillingAddressFormValuesType = NabuAddressType
 export type SBCheckoutFormValuesType = {
   amount: string
   method?: SBFormPaymentMethod

diff --git a/...blockchain-wallet-v4-frontend/src/modals/SimpleBuy/BillingAddress/CountrySelect/index.tsx b/...blockchain-wallet-v4-frontend/src/modals/SimpleBuy/BillingAddress/CountrySelect/index.tsx
@@ -11,6 +11,12 @@ const SelectBoxCountry = styled(SelectBox)`
   .bc__dropdown-indicator {
     color: ${props => props.theme.grey600};
   }
+  .bc__single-value {
+    position: relative;
+    top: 0;
+    transform: initial;
+    margin: 0;
+  }
 `
 const DisplayContainer = styled.div<{
   isItem: boolean
@@ -30,20 +36,14 @@ const Display = styled.div`
   cursor: pointer;
   font-size: 16px;
   font-weight: 500;
+  margin-left: 12px;
   color: ${props => props.theme.grey800};
-  .bc__single-value {
-    position: relative;
-    top: 0;
-    transform: initial;
-    margin: 0;
-  }
-  input {
-    height: 0;
-  }
 `
 const IconContainer = styled.div`
-  width: 38px;
+  min-width: 32px;
   height: 32px;
+  font-size: 40px;
+  overflow: hidden;
   border-radius: 16px;
   background-color: ${props => props.theme.blue000};
   display: flex;

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/BillingAddress/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/BillingAddress/index.tsx
@@ -4,13 +4,17 @@ import { connect, ConnectedProps } from 'react-redux'
 import { getData } from './selectors'
 import { RemoteDataType } from 'core/types'
 import { RootState } from 'data/rootReducer'
-import { UserDataType } from 'data/types'
+import { SBBillingAddressFormValuesType, UserDataType } from 'data/types'
 import DataError from 'components/DataError'
 import Loading from './template.loading'
 import React, { PureComponent } from 'react'
 import Success from './template.success'
 
 class BillingAddress extends PureComponent<Props> {
+  componentDidMount () {
+    this.props.simpleBuyActions.initializeBillingAddress()
+  }
+
   render () {
     return this.props.data.cata({
       Success: val => <Success {...val} {...this.props} />,
@@ -44,7 +48,7 @@ type OwnProps = {
   handleClose: () => void
 }
 export type SuccessStateType = {
-  formValues: any
+  formValues: SBBillingAddressFormValuesType
   userData: UserDataType
 }
 type LinkStatePropsType = {

diff --git a/...es/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/BillingAddress/template.success.tsx b/...es/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/BillingAddress/template.success.tsx
@@ -1,7 +1,20 @@
+import {
+  countryUsesPostalcode,
+  countryUsesZipcode,
+  required,
+  requiredZipCode
+} from 'services/FormHelper'
+import { Field, Form, InjectedFormProps, reduxForm } from 'redux-form'
 import { FlyoutWrapper } from 'components/Flyout'
 import { FormattedMessage } from 'react-intl'
+import {
+  FormGroup,
+  FormItem,
+  FormLabel,
+  SelectBoxUSState,
+  TextBox
+} from 'components/Form'
 import { Icon, Text } from 'blockchain-info-components'
-import { InjectedFormProps, reduxForm } from 'redux-form'
 import { Props as OwnProps, SuccessStateType } from '.'
 import CountrySelect from './CountrySelect'
 import React from 'react'
@@ -20,33 +33,135 @@ const Top = styled(Text)`
 export type Props = OwnProps & SuccessStateType
 
 const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
+  if (!props.formValues) return null
+
+  const countryCode = props.formValues.country
+  const countryIsUS = countryCode === 'US'
+  const countryUsesZipOrPostcode =
+    countryUsesZipcode(countryCode) || countryUsesPostalcode(countryCode)
+
   return (
     <>
-      <CustomFlyoutWrapper>
-        <Top color='grey800' size='20px' weight={600}>
-          <Icon
-            cursor
-            name='arrow-left'
-            size='20px'
-            color='grey600'
-            style={{ marginRight: '24px' }}
-            role='button'
-            onClick={() =>
-              props.simpleBuyActions.setStep({
-                step: 'ADD_CARD'
-              })
-            }
-          />
-          <FormattedMessage
-            id='modals.simplebuy.billing_address'
-            defaultMessage='Billing Address'
-          />
-        </Top>
-        <CountrySelect {...props} />
-      </CustomFlyoutWrapper>
-      <FlyoutWrapper>Here</FlyoutWrapper>
+      <Form>
+        <CustomFlyoutWrapper>
+          <Top color='grey800' size='20px' weight={600}>
+            <Icon
+              cursor
+              name='arrow-left'
+              size='20px'
+              color='grey600'
+              style={{ marginRight: '24px' }}
+              role='button'
+              onClick={() =>
+                props.simpleBuyActions.setStep({
+                  step: 'ADD_CARD'
+                })
+              }
+            />
+            <FormattedMessage
+              id='modals.simplebuy.billing_address'
+              defaultMessage='Billing Address'
+            />
+          </Top>
+          <CountrySelect {...props} />
+        </CustomFlyoutWrapper>
+        <FlyoutWrapper>
+          <FormGroup margin='24px'>
+            <FormLabel>
+              {countryIsUS ? (
+                <FormattedMessage
+                  id='identityverification.personal.address_line1required'
+                  defaultMessage='Address Line 1 *'
+                />
+              ) : (
+                <FormattedMessage
+                  id='identityverification.personal.streetline1required'
+                  defaultMessage='Street Line 1 *'
+                />
+              )}
+            </FormLabel>
+            <Field name='line1' validate={required} component={TextBox} />
+          </FormGroup>
+          <FormGroup margin='24px'>
+            <FormLabel>
+              {countryIsUS ? (
+                <FormattedMessage
+                  id='identityverification.personal.address_line2'
+                  defaultMessage='Address Line 2'
+                />
+              ) : (
+                <FormattedMessage
+                  id='identityverification.personal.streetline2'
+                  defaultMessage='Street Line 2'
+                />
+              )}
+            </FormLabel>
+            <Field name='line2' component={TextBox} />
+          </FormGroup>
+          <FormGroup margin='24px'>
+            <FormLabel>
+              <FormattedMessage
+                id='identityverification.personal.cityrequired'
+                defaultMessage='City *'
+              />
+            </FormLabel>
+            <Field name='city' validate={required} component={TextBox} />
+          </FormGroup>
+          <FormGroup inline>
+            <FormItem>
+              <FormLabel>
+                {countryIsUS ? (
+                  <FormattedMessage
+                    id='identityverification.personal.staterequired'
+                    defaultMessage='State *'
+                  />
+                ) : (
+                  <FormattedMessage
+                    id='identityverification.personal.region'
+                    defaultMessage='Region'
+                  />
+                )}
+              </FormLabel>
+              {countryIsUS ? (
+                <Field
+                  name='state'
+                  component={SelectBoxUSState}
+                  validate={[required]}
+                />
+              ) : (
+                <Field name='state' component={TextBox} />
+              )}
+            </FormItem>
+            {countryUsesZipOrPostcode && (
+              <FormItem>
+                <FormLabel htmlFor='postCode'>
+                  {countryUsesZipcode(countryCode) ? (
+                    <FormattedMessage
+                      id='identityverification.personal.zip'
+                      defaultMessage='Zip Code *'
+                    />
+                  ) : (
+                    <FormattedMessage
+                      id='identityverification.personal.postcoderequired'
+                      defaultMessage='Postcode *'
+                    />
+                  )}
+                </FormLabel>
+                <Field
+                  name='postCode'
+                  validate={requiredZipCode}
+                  component={TextBox}
+                />
+              </FormItem>
+            )}
+          </FormGroup>
+        </FlyoutWrapper>
+      </Form>
     </>
   )
 }
 
-export default reduxForm<{}, Props>({ form: 'ccBillingAddress' })(Success)
+export default reduxForm<{}, Props>({
+  form: 'ccBillingAddress',
+  destroyOnUnmount: false
+})(Success)
diff --git a/packages/blockchain-wallet-v4-frontend/src/services/FormHelper/validators.js b/packages/blockchain-wallet-v4-frontend/src/services/FormHelper/validators.js
@@ -200,7 +200,8 @@ export const countryUsesPostalcode = countryCode => {
 export const countryUsesZipcode = countryCode => countryCode === 'US'
 
 export const requiredZipCode = (value, allVals) => {
-  const countryCode = path(['country', 'code'], allVals)
+  const countryCode =
+    path(['country', 'code'], allVals) || path(['country'], allVals)
   if (!path([countryCode, 'postalCodeFormat'], postalCodes)) return undefined
   if (!value) return <M.RequiredMessage />