Add address lookup field

Makefile

@@ -25,6 +25,7 @@ nuclear:
 	-docker rm -vf $$(docker ps -a -q)
 	-docker rmi -f $$(docker images -a -q)
 	-docker system prune -af --volumes
+	-docker volume rm donations_checkout_node_modules-vol
 
 # original commands
 interactive: build backing

package.json

@@ -63,6 +63,7 @@
     "vee-validate": "^3.2.1",
     "vue": "^2.7.0",
     "vue-clipboard2": "^0.3.0",
+    "vue-google-autocomplete": "^1.1.4",
     "vue-js-modal": "^2.0.1",
     "vue-loader": "^15.7.0",
     "vue-router": "^3.5.2",

server/app.py

@@ -602,6 +602,7 @@ def donate_form():
         bundles=bundles,
         stripe=app.config["STRIPE_KEYS"]["publishable_key"],
         recaptcha=app.config["RECAPTCHA_KEYS"]["site_key"],
+        autocomplete=app.config["ADDRESS_AUTOCOMPLETE_KEY"],
         use_thermometer=USE_THERMOMETER,
     )
 

server/config.py

@@ -144,3 +144,8 @@ def bool_env(val):
 BAD_ACTOR_API_URL = os.getenv("BAD_ACTOR_API_URL", None)
 BAD_ACTOR_NOTIFICATION_URL = os.getenv("BAD_ACTOR_NOTIFICATION_URL", None)
 BLOCK_LIST = os.getenv("BLOCK_LIST", None)
+
+########
+# Google APIs
+#
+ADDRESS_AUTOCOMPLETE_KEY = os.getenv("ADDRESS_AUTOCOMPLETE_KEY", None)

server/forms.py

@@ -76,6 +76,9 @@ class DonateForm(BaseForm):
         u"Installment Period", [validators.AnyOf(["yearly", "monthly", "None"])]
     )
     zipcode = StringField(u"ZIP Code", [validators.Length(max=5)])
+    address = StringField(u"Address")
+    city = StringField(u"City")
+    state = StringField(u"State")
 
 
 class CircleForm(BaseForm):

server/static/js/src/entry/donate/TopForm.vue

@@ -82,15 +82,53 @@
       </div>
     </div>
 
+    <div class="grid_row grid_separator">
+      <div class="col">
+        <div class="form__text form__text--standard">
+          <label>Address Lookup</label>
+          <vue-google-autocomplete
+            id="map"
+            classname="form-control"
+            placeholder="Lookup your address"
+            @placechanged="getAddressData"
+          >
+          </vue-google-autocomplete>
+        </div>
+      </div>
+    </div>
+
     <div class="grid_row grid_wrap--s">
       <div class="col_6 grid_separator">
         <text-input
           :store-module="storeModule"
           :required="false"
           :show-error="showErrors"
-          label-text="I am giving because"
+          label-text="address"
           base-classes="form__text form__text--standard"
-          name="reason"
+          name="address"
+        />
+      </div>
+      <div class="col_6 grid_separator">
+        <text-input
+          :store-module="storeModule"
+          :required="false"
+          :show-error="showErrors"
+          label-text="city"
+          base-classes="form__text form__text--standard"
+          name="city"
+        />
+      </div>
+    </div>
+
+    <div class="grid_row grid_wrap--s">
+      <div class="col_6 grid_separator">
+        <text-input
+          :store-module="storeModule"
+          :required="false"
+          :show-error="showErrors"
+          label-text="State"
+          base-classes="form__text form__text--standard"
+          name="state"
         />
       </div>
       <div class="col_6 grid_separator">
@@ -106,6 +144,19 @@
       </div>
     </div>
 
+    <div class="grid_row grid_separator">
+      <div class="col">
+        <text-input
+          :store-module="storeModule"
+          :required="false"
+          :show-error="showErrors"
+          label-text="I am giving because"
+          base-classes="form__text form__text--standard"
+          name="reason"
+        />
+      </div>
+    </div>
+
     <div class="grid_row grid_separator">
       <div class="col">
         <pay-fees :store-module="storeModule" base-classes="form__fees" />
@@ -130,7 +181,8 @@
       v-if="nativeIsSupported && showManualPay"
       class="grid_separator--l"
       aria-hidden="true"
-    />
+    >
+    </div>
 
     <div
       :aria-live="nativeIsSupported ? 'polite' : false"
@@ -196,6 +248,7 @@
 </template>
 
 <script>
+import VueGoogleAutocomplete from 'vue-google-autocomplete';
 import Hidden from '../../connected-elements/Hidden.vue';
 import LocalHidden from '../../local-elements/Hidden.vue';
 import Radios from '../../connected-elements/Radios.vue';
@@ -219,6 +272,7 @@ export default {
     ManualPay,
     ManualSubmit,
     NativePay,
+    VueGoogleAutocomplete,
   },
 
   mixins: [formStarter, updateValue],
@@ -235,5 +289,30 @@ export default {
       ],
     };
   },
+
+  methods: {
+    getAddressData(addressData, placeResultData) {
+      this.updateValue({
+        storeModule: this.storeModule,
+        key: 'address',
+        value: placeResultData.name,
+      });
+      this.updateValue({
+        storeModule: this.storeModule,
+        key: 'city',
+        value: addressData.locality,
+      });
+      this.updateValue({
+        storeModule: this.storeModule,
+        key: 'state',
+        value: addressData.administrative_area_level_1
+      });
+      this.updateValue({
+        storeModule: this.storeModule,
+        key: 'zipcode',
+        value: addressData.postal_code
+      });
+    }
+  }
 };
 </script>

server/static/js/src/entry/donate/constants.js

@@ -26,6 +26,24 @@ export const BASE_FORM_STATE = {
     validator: validators.isNotEmpty,
     message: 'Enter your last name',
   },
+  address: {
+    value: '',
+    isValid: false,
+    validator: validators.isNotEmpty,
+    message: 'Enter your address',
+  },
+  city: {
+    value: '',
+    isValid: false,
+    validator: validators.isNotEmpty,
+    message: 'Enter your city',
+  },
+  state: {
+    value: '',
+    isValid: false,
+    validator: validators.isNotEmpty,
+    message: 'Enter your state',
+  },
   reason: {
     value: '',
     isValid: false,

server/templates/donate-form.html

@@ -10,11 +10,12 @@
 {% endblock %}
 
 {% block head_scripts %}
-{% if form_data and message %}
-<script>
-  window.location.replace('#join-today');
-</script>
-{% endif %}
+  <script src="https://maps.googleapis.com/maps/api/js?key={{autocomplete}}&libraries=places"></script>
+  {% if form_data and message %}
+  <script>
+    window.location.replace('#join-today');
+  </script>
+  {% endif %}
 {% endblock %}
 
 {% block content %}

webpack/config.common.js

@@ -62,7 +62,6 @@ module.exports = {
 
       {
         test: /\.vue$/,
-        exclude: /node_modules/,
         loader: 'vue-loader',
       },