Add address lookup field

[matthewdylan]

What's this PR do?

Adds address fields and an accompanying address lookup field to the main donation form.

Why are we doing this? How does it help us?

This is the front-end element of a larger project geared towards getting address information at time of donation. This will keep membership from having to do extra work when wanting to send something to a member via the mail. Also, getting address information at time of donation is fairly common.

How should this be manually tested?

Locally or on staging...

• on the main donation form, find the address lookup field halfway down the form
• enter an address and then select the desired address from the drop-down
• ensure that the address pieces populate the address, city, state and zip code fields appropriately

How should this change be communicated to end users?

We're going to let the membership team play around with these updates as well to give us feedback on layout/design.

Are there any smells or added technical debt to note?

Not really a smell, but worth mentioning that we added a new front-end library called "vue-google-autocomplete" to simplify some of the lookup implementation.

What are the relevant tickets?

https://airtable.com/appyo1zuQd8f4hBVx/tbloNZu8GkM52NKFR/viwS1XPty68eK4Ett/rec2Gm8BTDPBefvFI?blocks=hide

Have you done the following, if applicable:

(optional: add explanation between parentheses)

• Added automated tests? ( )
• Tested manually on mobile? ( )
• Checked BrowserStack? ( )
• Checked for performance implications? ( )
• Checked accessibility? ( )
• Checked for security implications? ( )
• Updated the documentation/wiki? ( )

TODOs / next steps:

• your TODO here

[ashley-hebler]

This is slick! The implementation seems really straightforward thanks to that UI vue package (good call to abstract it out with that.)

I treated this more like a design review/functionality review and I have a few ideas on that I wanted to bounce off you:

Autocomplete behavior
Is it possible to make the autocomplete field the actual street field but still have it populate city, state, zip?

Something like this...

1. start typing in an address field

2. autocomplete fills the address and the corresponding fields below

Field styles
Now that we have more going on in the form, I'm trying to think of some way to make the form look less daunting and flow better. The membership/product teams will have some good ideas on this but for the demo, how about some of these changes?

• move the reason field above address
• add a div wrapper around all the payment info
  • address, city, state, zip, cc (not sure if the button belongs in there too or not)
  • could give that wrapper a subtle gray background (like #f3f3f3 or #fbfbfb)
• give that new section a title like "Payment information" or "Billing information"
• if the above, autocomplete behavior change I suggested above is possible, rename the label above the street field to "Billing address"
  • h/t to @ReeseOxner who noted that being more explicit about what kind of address we want makes good sense here
• on desktop, bring city, state, zip into the same row. city can be 50% width (col-6 in this grid) while state/zip don't need as much room (maybe col-3?)

I sorta mocked up in the browser here, but it deviates a little from some of the above notes. I refreshed my browser so I couldn't change it ha. We can chat more on this together in realtime today too.

[ashley-hebler]

suggestion (non-blocking): Would it make sense to add this to the env list table in the readme?

[matthewdylan]

This is slick! The implementation seems really straightforward thanks to that UI vue package (good call to abstract it out with that.)

I treated this more like a design review/functionality review and I have a few ideas on that I wanted to bounce off you:

Autocomplete behavior Is it possible to make the autocomplete field the actual street field but still have it populate city, state, zip?

Something like this...

1. start typing in an address field

2. autocomplete fills the address and the corresponding fields below **Field styles** Now that we have more going on in the form, I'm trying to think of some way to make the form look less daunting and flow better. The membership/product teams will have some good ideas on this but for the demo, how about some of these changes?

• move the reason field above address

• add a div wrapper around all the payment info

  • address, city, state, zip, cc (not sure if the button belongs in there too or not)
  • could give that wrapper a subtle gray background (like #f3f3f3 or #fbfbfb)

• give that new section a title like "Payment information" or "Billing information"

• if the above, autocomplete behavior change I suggested above is possible, rename the label above the street field to "Billing address"

  • h/t to @ReeseOxner who noted that being more explicit about what kind of address we want makes good sense here

• on desktop, bring city, state, zip into the same row. city can be 50% width (col-6 in this grid) while state/zip don't need as much room (maybe col-3?)

I sorta mocked up in the browser here, but it deviates a little from some of the above notes. I refreshed my browser so I couldn't change it ha. We can chat more on this together in realtime today too.

On making the address field the lookup, I did toy with that as I've seen other forms working that way too. It might be complicated by the way those fields work, but I'll give it a go.

Not to blow smoke, but I love all the design suggestions. Some great updates and I really don't have an argument against anything you suggested so I'll go with it! Thanks for the review and I'll hit you up when I've got everything updated.