Use react-leaflet and google maps to recreate retail maps page

[flurmbo]

This issue consists of:

1. Switch to using Google Maps' API. We have had issues with the MapQuest CDN, and the check-in page uses Google Maps.
2. Rewrite the filtering behavior with react.
3. Recreate the "How do I get these discounts?" modal.
4. Recreate the "Become a retail partner" modal. When this form is submitted, an HTTP request should be made to the backend.
5. Recreate the "Print Selected Coupons" functionality. This was made previously with some nifty javascript and CSS by a previous volunteer, so you'll want to look at their code.

It might be a good idea to separate this issue out into separate issues, but I'm not sure how to do that on Github at this moment.

The current retail page can be viewed here.

[rossedwardsus]

Any thoughts about using Mapbox instead? Also is there a need for address search/autocomplete?

[flurmbo]

Hey Ross, I'm not familiar with Mapbox, what would be the advantages of that over Google Maps?

As far as address search and autocomplete, the retail map does not need that, however the check-in form does use something like that.

You can try for yourself here, after you put in addresses for home and work address it shows the address on the map and then comes up with some sample commutes using google maps.

[rossedwardsus]

I think the main difference is price. But i don't think that is an issue with this application.

What is currently being used? You mention about making a switch.

[flurmbo]

Currently the check-in page uses Google maps, but the retail page here is using MapQuest. Last month there were issues with the CDN not working intermittenatly, and the version of the MapQuest API we currently have has been deprecated. We also do not seem to have information on the account that was used to set up the MapQuest API token. I also think it would be simpler to have the check-in and retail page both use the same map library

[rossedwardsus]

Ok. Thanks!