fix(BuySell): handle unsupported locations

blockchain · Jun 20, 2018 · bfa08de · bfa08de
1 parent b42a092
commit bfa08de
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/index.js
@@ -82,8 +82,12 @@ class BuySellContainer extends React.PureComponent {
   }
 
   submitEmail () {
-    // TODO: submit the email address somewhere
     this.props.updateUI({ submittedEmail: true })
+    let email = encodeURIComponent(path(['fields', 'email'], this.props))
+    let country = path(['fields', 'country'], this.props)
+    let state = path(['fields', 'country'], this.props) === 'US' ? path(['fields', 'stateSelection', 'name'], this.props) : undefined
+    let url = 'https://docs.google.com/forms/d/e/1FAIpQLSeYiTe7YsqEIvaQ-P1NScFLCSPlxRh24zv06FFpNcxY_Hs0Ow/viewform?entry.1192956638=' + email + '&entry.644018680=' + country + '&entry.387129390=' + state
+    window.open(url, '_blank')
   }
 
   render () {

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/template.success.js b/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/template.success.js
@@ -7,7 +7,7 @@ import { concat, equals, path, prop } from 'ramda'
 import { Text, Button } from 'blockchain-info-components'
 import { FormGroup, FormItem, SelectBoxUSState, SelectBoxCountry, TextBox } from 'components/Form'
 import { spacing } from 'services/StyleService'
-import { required, onPartnerCountryWhitelist } from 'services/FormHelper'
+import { required, onPartnerCountryWhitelist, onPartnerStateWhitelist, validEmail } from 'services/FormHelper'
 import BuySellAnimation from './BuySellAnimation'
 
 const Row = styled.div`
@@ -89,18 +89,22 @@ const SelectPartner = (props) => {
     if (!pristine && ((country && onPartnerCountryWhitelist(country, null, null, null, countries)) || (stateSelection && onSfoxWhitelist(stateSelection)))) {
       return (
         <UnavailableContainer>
-          <Text size='14px' weight={300} style={spacing('mb-15')}>
-            {
-              equals(country, 'US')
-                ? <FormattedMessage id='selectpartner.unavailable.unfortunatelystate' defaultMessage='Unfortunately buy & sell is not available in your state at this time. To be notified when we expand to your location, sign up below.' />
-                : <FormattedMessage id='selectpartner.unavailable.unfortunatelycountry' defaultMessage='Unfortunately buy & sell is not available in your country at this time. To be notified when we expand to your location, sign up below.' />
-            }
-          </Text>
+          {
+            !ui.submittedEmail
+              ? <Text size='14px' weight={300} style={spacing('mb-15')}>
+                {
+                  equals(country, 'US')
+                    ? <FormattedMessage id='selectpartner.unavailable.unfortunatelystate' defaultMessage='Unfortunately buy & sell is not available in your state at this time. To be notified when we expand to your location, sign up below.' />
+                    : <FormattedMessage id='selectpartner.unavailable.unfortunatelycountry' defaultMessage='Unfortunately buy & sell is not available in your country at this time. To be notified when we expand to your location, sign up below.' />
+                }
+              </Text>
+              : null
+          }
           {
             !ui.submittedEmail
               ? <span>
-                <Field name='email' component={TextBox} placeholder='Add your email here' />
-                <Button style={spacing('mt-15')} nature='primary' onClick={submitEmail}>
+                <Field name='email' validate={validEmail} component={TextBox} placeholder='Add your email here' />
+                <Button style={spacing('mt-15')} nature='primary' onClick={submitEmail} disabled={validEmail(email)}>
                   <FormattedMessage id='selectpartner.unavailable.notifyme' defaultMessage='Notify Me When This Becomes Available' />
                 </Button>
               </span>
@@ -155,7 +159,7 @@ const SelectPartner = (props) => {
                   ? (
                     <FormGroup style={spacing('mt-5')}>
                       <FormItem>
-                        <Field name='state' validate={[required]} component={SelectBoxUSState} errorBottom />
+                        <Field name='state' validate={[required, onPartnerStateWhitelist]} component={SelectBoxUSState} errorBottom />
                       </FormItem>
                     </FormGroup>
                   )

diff --git a/packages/blockchain-wallet-v4-frontend/src/services/FormHelper/index.js b/packages/blockchain-wallet-v4-frontend/src/services/FormHelper/index.js
@@ -7,7 +7,7 @@ import { isValidNumber } from 'libphonenumber-js'
 import zxcvbn from 'zxcvbn'
 import { utils } from 'blockchain-wallet-v4/src'
 import * as M from './validationMessages'
-import { concat, path, takeWhile } from 'ramda'
+import { concat, path, takeWhile, prop } from 'ramda'
 
 const required = value => value ? undefined : <M.RequiredMessage />
 
@@ -70,11 +70,19 @@ const onPartnerCountryWhitelist = (val, allVals, props, name, countries) => {
   return (country && allCountries.includes(country)) ? undefined : true
 }
 
+const onPartnerStateWhitelist = (val, allVals, props, name, states) => {
+  const usState = prop('code', val)
+  const options = path(['options', 'platforms', 'web'], props)
+  const sfoxStates = path(['sfox', 'states'], options)
+  return (usState && sfoxStates.includes(usState)) ? undefined : true
+}
+
 export {
   required,
   requiredDOB,
   normalizePhone,
   onPartnerCountryWhitelist,
+  onPartnerStateWhitelist,
   optional,
   requiredNumber,
   requiredSSN,