Merge pull request #3491 from blockchain/hide-country-signup

feat(signup): put country logic on signup under feature flag

config/mocks/wallet-options-v4.json

@@ -23,7 +23,8 @@
         "legacyMagicEmailLink": true,
         "legacyMobilePairing": false,
         "legacyWalletRecovery": false,
-        "recurringBuys": true
+        "recurringBuys": true,
+        "signupCountry": false
       }
     }
   },

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

@@ -311,7 +311,10 @@ export default ({ api, coreSagas, networks }) => {
       yield put(actions.components.swap.fetchTrades())
       // check/update btc account names
       yield call(coreSagas.wallet.checkAndUpdateWalletNames)
-      if (firstLogin) {
+      const signupCountryEnabled = (yield select(
+        selectors.core.walletOptions.getFeatureSignupCountry
+      )).getOrElse(false)
+      if (firstLogin && signupCountryEnabled) {
         // create nabu user
         yield call(createUser)
         // store initial address in case of US state we add prefix

packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SignupForm/index.tsx

@@ -70,8 +70,15 @@ const scrollToPassword = () => scrollToId('password')
 const scrollToSecondPassword = () => scrollToId('confirmationPassword')
 
 const SignupForm = (props: InjectedFormProps<{}, SubviewProps> & SubviewProps) => {
-  const { formValues, invalid, isFormSubmitting, onCountrySelect, onSignupSubmit, showState } =
-    props
+  const {
+    formValues,
+    invalid,
+    isFormSubmitting,
+    onCountrySelect,
+    onSignupSubmit,
+    showState,
+    signupCountryEnabled
+  } = props
   const { password = '' } = formValues || {}
   const passwordScore = window.zxcvbn ? window.zxcvbn(password).score : 0
 
@@ -164,48 +171,50 @@ const SignupForm = (props: InjectedFormProps<{}, SubviewProps> & SubviewProps) =
           />
         </FormItem>
       </FormGroup>
-      <FormGroup>
-        <FieldWithoutBottomRadius setBorder={showState}>
-          <FormLabel htmlFor='country' id='country'>
-            <FormattedMessage
-              defaultMessage='Country of Residence'
-              id='scenes.register.countryofresidence'
-            />
-          </FormLabel>
-          <Field
-            data-e2e='selectCountryDropdown'
-            name='country'
-            validate={required}
-            component={SelectBoxCountry}
-            menuPlacement='auto'
-            // @ts-ignore
-            onChange={onCountrySelect}
-            label={
+      {signupCountryEnabled && (
+        <FormGroup>
+          <FieldWithoutBottomRadius setBorder={showState}>
+            <FormLabel htmlFor='country' id='country'>
               <FormattedMessage
-                id='components.selectboxcountry.label'
-                defaultMessage='Select country'
+                defaultMessage='Country of Residence'
+                id='scenes.register.countryofresidence'
               />
-            }
-          />
-        </FieldWithoutBottomRadius>
-        {showState ? (
-          <FieldWithoutTopRadius setBorder={showState}>
+            </FormLabel>
             <Field
-              name='state'
-              component={SelectBoxUSState}
-              errorBottom
-              validate={[required]}
-              normalize={(val) => val && val.code}
+              data-e2e='selectCountryDropdown'
+              name='country'
+              validate={required}
+              component={SelectBoxCountry}
+              menuPlacement='auto'
+              // @ts-ignore
+              onChange={onCountrySelect}
               label={
                 <FormattedMessage
-                  id='components.selectboxstate.label'
-                  defaultMessage='Select state'
+                  id='components.selectboxcountry.label'
+                  defaultMessage='Select country'
                 />
               }
             />
-          </FieldWithoutTopRadius>
-        ) : null}
-      </FormGroup>
+          </FieldWithoutBottomRadius>
+          {showState ? (
+            <FieldWithoutTopRadius setBorder={showState}>
+              <Field
+                name='state'
+                component={SelectBoxUSState}
+                errorBottom
+                validate={[required]}
+                normalize={(val) => val && val.code}
+                label={
+                  <FormattedMessage
+                    id='components.selectboxstate.label'
+                    defaultMessage='Select state'
+                  />
+                }
+              />
+            </FieldWithoutTopRadius>
+          ) : null}
+        </FormGroup>
+      )}
 
       <FormGroup inline>
         <FieldWrapper>

packages/blockchain-wallet-v4-frontend/src/scenes/Signup/index.tsx

@@ -8,7 +8,6 @@ import styled from 'styled-components'
 import { Remote } from 'blockchain-wallet-v4/src'
 import { RemoteDataType } from 'blockchain-wallet-v4/src/types'
 import { actions, selectors } from 'data'
-import { GoalsType } from 'data/goals/types'
 import { RootState } from 'data/rootReducer'
 
 import BuyGoal from './BuyGoal'
@@ -62,13 +61,13 @@ class SignupContainer extends React.PureComponent<
   }
 
   render() {
-    const { goals, isLoadingR, userGeoData } = this.props
+    const { goals, isLoadingR, signupCountryEnabled, userGeoData } = this.props
     const isFormSubmitting = Remote.Loading.is(isLoadingR)
 
     // pull email from simple buy goal if it exists
     const email = pathOr('', ['data', 'email'], find(propEq('name', 'simpleBuy'), goals))
     const signupInitialValues = (email ? { email } : {}) as SignupFormInitValuesType
-    if (userGeoData?.countryCode) {
+    if (userGeoData?.countryCode && signupCountryEnabled) {
       signupInitialValues.country = userGeoData.countryCode
     }
     const isLinkAccountGoal = !!find(propEq('name', 'linkAccount'), goals)
@@ -82,6 +81,7 @@ class SignupContainer extends React.PureComponent<
       onSignupSubmit: this.onSubmit,
       showForm: this.state.showForm,
       showState: this.state.showState,
+      signupCountryEnabled,
       toggleSignupFormVisibility: this.toggleSignupFormVisibility,
       ...this.props
     }
@@ -102,6 +102,9 @@ const mapStateToProps = (state: RootState): LinkStatePropsType => ({
   isLoadingR: selectors.auth.getRegistering(state) as RemoteDataType<string, undefined>,
   language: selectors.preferences.getLanguage(state),
   search: selectors.router.getSearch(state) as string,
+  signupCountryEnabled: selectors.core.walletOptions
+    .getFeatureSignupCountry(state)
+    .getOrElse(false) as boolean,
   userGeoData: selectors.auth.getUserGeoData(state) as GeoLocationType
 })
 
@@ -120,6 +123,7 @@ type LinkStatePropsType = {
   isLoadingR: RemoteDataType<string, undefined>
   language: string
   search: string
+  signupCountryEnabled: boolean
   userGeoData: GeoLocationType
 }
 type StateProps = {

packages/blockchain-wallet-v4/src/redux/walletOptions/selectors.ts

@@ -1,6 +1,7 @@
 import { path, prop } from 'ramda'
 
 import { /* AccountTokensBalancesResponseType, */ RemoteDataType } from 'core/types'
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { RootState } from 'data/rootReducer'
 
 import { WalletOptionsType } from './types'
@@ -21,7 +22,9 @@ export const getAnalyticsSiteId = (state) =>
 export const getAnnouncements = (state) =>
   getWebOptions(state).map(path(['application', 'announcements']))
 
+// eslint-disable-next-line
 export const getXlmSendTimeOutSeconds = (state) => 600
+// eslint-disable-next-line
 export const getXlmExchangeAddresses = (state) => []
 
 // domains
@@ -55,3 +58,7 @@ export const getFeatureLegacyWalletRecovery = (state: RootState) =>
 // legacy magic email link
 export const getFeatureLegacyMagicEmailLink = (state: RootState) =>
   getWebOptions(state).map(path(['featureFlags', 'legacyMagicEmailLink']))
+
+// signup country feature flag
+export const getFeatureSignupCountry = (state: RootState) =>
+  getWebOptions(state).map(path(['featureFlags', 'signupCountry']))