New signup requirements

client/api/real/calculator.api.js

@@ -59,7 +59,12 @@ class CalculatorApi {
     });
   }
 
-    // eg: location = {input_location: 06704, input_location_mode: 1, input_income: 1, input_size: 0}
+  /* eg: location = {
+    input_location: 06704,
+    input_location_mode: 1,
+    input_income: 1,
+    input_size: 3}
+    */
   static getDefaultsAndResults(location) {
     const params = Object.assign({
       op: 'get_defaults_and_results',

server/assets/translations/en.json

@@ -7,6 +7,9 @@
         "email": "Email",
         "password": "Password",
         "city": "City",
+        "state":"State",
+        "country":"Country",
+        "county":"County",
         "input_location": "City",
         "public": "Yes, make my profile page public.",
         "enter_location": "Enter your location",
@@ -91,7 +94,7 @@
             "label": "How many people live in your household?"
         },
         "United States": "United States",
-        "average_household_size": "Avg (2.5)",
+        "average_household_size": "3 (Avg)",
         "restore_defaults": "Your answers are saved in browser storage.",
         "restore_defaults_button": "Click here to reset to defaults"
     },

shared/components/common/graphs/graphs.scss

@@ -138,8 +138,12 @@
 
 .d3-value-arc {
   text {
-    fill: black;
+    fill: #333;
     cursor:pointer;
+    &:hover {
+      fill: #555;
+      text-decoration: underline;
+    }
   }
   path {
     stroke: white;

shared/components/common/leaders/leaders.component.js

@@ -7,7 +7,7 @@ import footprintContainer, { footprintPropTypes } from 'shared/containers/footpr
 import template from './leaders.rt.html';
 import loader from './loader.rt.html';
 
-const HOUSEHOLD_SIZES = [[1, '1'], [2, '2'], [0, 'Average'], [3, '3'], [4, '4'], [5, '5+']];
+const HOUSEHOLD_SIZES = [[1, '1'], [2, '2'], [3, '3 (Avg)'], [4, '4'], [5, '5+']];
 
 class LeadersComponent extends Panel {
 

shared/components/pages/get_started/get_started.component.js

@@ -4,11 +4,10 @@ import React from 'react';
 import Panel from 'shared/lib/base_classes/panel';
 import SnapSlider from 'd3-object-charts/src/slider/snap_slider';
 import CalculatorApi from 'api/calculator.api';
-import { setLocation } from 'api/user.api';
 import footprintContainer, { footprintPropTypes } from 'shared/containers/footprint.container';
 import template from './get_started.rt.html';
 
-const DEFAULT_LOCATION = { input_location_mode: 5, input_income: 1, input_size: 0 };
+const DEFAULT_LOCATION = { input_location_mode: 5, input_income: 1, input_size: 3 };
 
 class GetStartedComponent extends Panel {
 
@@ -18,9 +17,11 @@ class GetStartedComponent extends Panel {
     get_started.initResizeListener();
     get_started.state = {
       locations: {},
-      input_location: get_started.userApiValue('input_location'),
+      input_location_zipcode: get_started.userApiValue('input_location'),
+      input_location: '',
       input_location_mode: parseInt(get_started.input_location_mode, 10),
       input_location_changed: false,
+      input_location_edited: false,
       input_location_mode_changed: get_started.props.ui.get('location_mode_changed'),
       show_location_suggestions: false,
     };
@@ -30,6 +31,9 @@ class GetStartedComponent extends Panel {
     const get_started = this;
     get_started.initializeSizeSlider();
     get_started.initializeIncomeSlider();
+
+    const token = this.props.auth.getIn(['data', 'token']);
+    this.props.retrieveProfile({ user_id: this.user_id, token });
   }
 
   componentDidUpdate() {
@@ -59,16 +63,29 @@ class GetStartedComponent extends Panel {
     return this.state.input_location_mode_changed ? this.input_location_mode === 5 : false;
   }
 
+  get user_id() {
+    return this.props.auth.getIn(['data', 'user_id']);
+  }
+
   get input_location_display() {
     const get_started = this;
-    const display_location = get_started.props.ui.get('display_location');
-
     if (get_started.country_mode) {
       return get_started.t('get_started.United States');
-    } else if (display_location) {
-      return display_location;
+    } else if (get_started.state.input_location || get_started.state.input_location_edited) {
+      return get_started.state.input_location;
+    }
+    switch (get_started.state.input_location_mode) {
+      case 1:
+        return get_started.state.input_location_zipcode;
+      case 2:
+        return get_started.props.profile.getIn(['data', 'city']);
+      case 3:
+        return get_started.props.profile.getIn(['data', 'county']);
+      case 4:
+        return get_started.props.profile.getIn(['data', 'state']);
+      default:
+        return '';
     }
-    return get_started.state.input_location;
   }
 
   get default_location() {
@@ -165,9 +182,29 @@ class GetStartedComponent extends Panel {
     const zipcode = event.target.dataset.zipcode;
     const suggestion = event.target.dataset.suggestion;
 
+    const index = get_started.state.locations.data.findIndex(l => l === zipcode);
+    const location_data = get_started.state.locations.selected_location[index];
+    let input_location;
+    switch (get_started.state.input_location_mode) {
+      case 1:
+        input_location = zipcode;
+        break;
+      case 2:
+        input_location = location_data.city;
+        break;
+      case 3:
+        input_location = location_data.county;
+        break;
+      case 4:
+        input_location = location_data.state;
+        break;
+      default:
+        input_location = '';
+    }
     get_started.setState({
       display_location: suggestion,
-      input_location: suggestion,
+      input_location_zipcode: zipcode,
+      input_location,
       show_location_suggestions: false,
       input_location_changed: true,
     });
@@ -186,13 +223,13 @@ class GetStartedComponent extends Panel {
       input_location_mode = 1;
     }
 
-    get_started.updateDefaults({ input_location: zipcode, input_location_mode });
-
+    get_started.updateDefaults({
+      input_location: zipcode,
+      input_location_mode,
+      input_size: 3,
+    });
 
     if (get_started.user_authenticated) {
-      const index = get_started.state.locations.data.findIndex(l => l === zipcode);
-      const location_data = get_started.state.locations.selected_location[index];
-
       get_started.setUserLocation(location_data);
     }
   }
@@ -203,7 +240,10 @@ class GetStartedComponent extends Panel {
     const user_location = location;
 
     user_location.country = 'us';
-    return setLocation(user_location, token);
+    get_started.props.setLocation({ userLocation: user_location, token, user_id: this.user_id });
+    get_started.setState({
+      input_location_edited: false,
+    });
   }
 
   // called when input_location input changed.
@@ -212,12 +252,13 @@ class GetStartedComponent extends Panel {
     const get_started = this;
     const new_location = {
       input_location_mode: get_started.display_location_mode,
-      input_location: event.target.value,
+      input_location: get_started.display_location_mode === 1 ? event.target.value : event.target.value.replace(/,/g, ' '),
     };
 
     get_started.setState({
       input_location: event.target.value,
       show_location_suggestions: true,
+      input_location_edited: true,
     });
 
     if (get_started.$set_location_suggestions) {
@@ -227,7 +268,13 @@ class GetStartedComponent extends Panel {
     // debounce location suggestions by 500ms.
     get_started.$set_location_suggestions = setTimeout(() => {
       CalculatorApi.getAutoComplete(new_location)
-        .then((locations) => {
+        .then((l) => {
+          const locations = l;
+          if (new_location.input_location_mode === 2) {
+            locations.suggestions.forEach((s, i) => {
+              locations.suggestions[i] = s.replace(/,.*,/, ',');
+            });
+          }
           get_started.setState({
             locations,
             show_location_suggestions: true,
@@ -267,10 +314,9 @@ class GetStartedComponent extends Panel {
       outer_width: get_started.slider_width,
       handle_r: 14,
       tick_labels: {
-        0: get_started.t('get_started.average_household_size'),
         1: '1',
         2: '2',
-        3: '3',
+        3: get_started.t('get_started.average_household_size'),
         4: '4',
         5: '5+',
       },
@@ -283,7 +329,7 @@ class GetStartedComponent extends Panel {
     });
 
     get_started.size_slider.drawData({
-      abs_min: 0,
+      abs_min: 1,
       abs_max: 5,
       current_value: get_started.input_size,
     });

shared/components/pages/get_started/get_started.scss

@@ -1,4 +1,4 @@
-#location_suggestions_container {
+#get_started #location_suggestions_container {
   position:relative;
   max-width: 404px;
   margin: 0 auto;

shared/components/pages/settings/user/logout/logout.component.js

@@ -21,8 +21,11 @@ class LogoutComponent extends Translatable {
   submitLogout(event) {
     event.preventDefault();
     this.props.resetAlerts();
-    const response = window.FB.getLoginStatus(res => res);
-    (response && response.status === 'connected') ? window.FB.logout() : this.props.logout();
+    if (window.FB) {
+      const response = window.FB.getLoginStatus(res => res);
+      if (response && response.status === 'connected') window.FB.logout();
+    }
+    this.props.logout();
   }
 
   componentDidMount() {

shared/components/pages/settings/user/sign_up/sign_up.component.js

@@ -29,7 +29,10 @@ class SignUpComponent extends Panel {
       password: '',
       answers: '',
       city: '',
-      location: {},
+      location: {
+        state: '',
+        country: '',
+      },
       public: true,
     };
   }
@@ -47,7 +50,7 @@ class SignUpComponent extends Panel {
   }
 
   get input_location_display() {
-    return this.state.input_location;
+    return this.state.location.city;
   }
 
   paramValid(param) {
@@ -144,7 +147,7 @@ class SignUpComponent extends Panel {
     const sign_up = this;
     const new_location = {
       input_location_mode: 2,
-      input_location: event.target.value,
+      input_location: event.target.value.replace(/,/g, ' '),
     };
 
     sign_up.setState({
@@ -159,7 +162,11 @@ class SignUpComponent extends Panel {
     // debounce location suggestions by 500ms.
     sign_up.$set_location_suggestions = setTimeout(() => {
       CalculatorApi.getAutoComplete(new_location)
-        .then((locations) => {
+        .then((l) => {
+          const locations = l;
+          locations.suggestions.forEach((s, i) => {
+            locations.suggestions[i] = s.replace(/,.*,/, ',');
+          });
           sign_up.setState({
             locations,
             show_location_suggestions: true,

shared/components/pages/settings/user/sign_up/sign_up.rt.html

@@ -71,6 +71,24 @@
                   className="location-suggestion"
                   onClick="{this.setLocation.bind(this)}">{suggestion}</div>
               </div>
+            </div>
+             <div className="form-group">
+                <label for="inputState" className="control-label">
+                  {this.t('sign_up.state')}
+                </label>
+                <input type="text" className="form-control" id="inputState"
+                value="{this.state.location.state}"
+                readonly={true}
+                placeholder="{this.t('sign_up.state')}"/>
+            </div>
+            <div className="form-group">
+                <label for="inputCountry" className="control-label">
+                  {this.t('sign_up.county')}
+                </label>
+                <input type="text" className="form-control" id="inputCounty"
+                value="{this.state.location.county}"
+                readonly={true}
+                placeholder="{this.t('sign_up.county')}"/>
             </div>
             <div className="checkbox">
               <label>

shared/components/pages/settings/user/sign_up/sign_up.scss

@@ -7,7 +7,8 @@
   #location_suggestions {
     margin-top: 35px;
     z-index: 9999;
-    width: 75%;
-    margin-left: 25%;
+    width: 23%;
+    margin-left: 8%;
   }
+
 }

shared/containers/auth.container.js

@@ -8,6 +8,7 @@ const mapStateToProps = state => ({
   auth: state.auth,
   ui: state.ui,
   location: state.location,
+  user_footprint: state.user_footprint,
 });
 
 const mapDispatchToProps = dispatch => ({

shared/containers/footprint.container.js

@@ -5,7 +5,7 @@ import { ensureDefaults, averageFootprintUpdated } from 'shared/reducers/average
 import { ensureFootprintComputed, userFootprintUpdated, userFootprintReset, updatedFootprintComputed, updateTakeactionResult, updateActionStatus } from 'shared/reducers/user_footprint/user_footprint.actions';
 import { updateUI, pushAlert, resetAlerts } from 'shared/reducers/ui/ui.actions';
 import { sendEmailConfirmation } from 'shared/reducers/auth/auth.actions';
-import { retrieveProfile } from 'shared/reducers/profile/profile.actions';
+import { retrieveProfile, setLocation } from 'shared/reducers/profile/profile.actions';
 
 
 const mapStateToProps = state => ({
@@ -18,6 +18,10 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
+  setLocation: (payload) => {
+    setLocation.assignTo(dispatch);
+    setLocation(payload);
+  },
   retrieveProfile: (user_id) => {
     retrieveProfile.assignTo(dispatch);
     retrieveProfile(user_id);

shared/lib/state_manager/state_manager.js

@@ -15,7 +15,7 @@ import uiReducers from 'shared/reducers/ui/ui.reducers';
 import profileReducers from 'shared/reducers/profile/profile.reducers';
 import { getLocalStorageItem } from '../utils/utils';
 
-const DEFAULT_LOCATION = { input_location_mode: 5, input_income: 1, input_size: 0 };
+const DEFAULT_LOCATION = { input_location_mode: 5, input_income: 1, input_size: 3 };
 const CATEGORY_COLORS = {
   result_transport_total: '#0D7A3E',
   result_housing_total: '#45813C',