From 51f208307e56af9e9bc502d6b633bcf240fb9cd6 Mon Sep 17 00:00:00 2001
From: Scott Duncombe <scott.duncombe@shopify.com>
Date: Fri, 27 Oct 2023 17:03:01 -0700
Subject: [PATCH] Send pizza module

---
 src/components.d.ts                           |  39 ++
 src/components/app-root/app-root.scss         |   1 +
 src/components/app-root/app-root.tsx          |   4 +-
 src/components/form-report/form-report.tsx    | 349 +++++++-----------
 src/components/page-home/Deliveries.tsx       |   1 -
 src/components/page-home/page-home.scss       |  46 +++
 src/components/page-home/page-home.tsx        |  14 +-
 src/components/page-report/page-report.scss   | 135 +++++++
 src/components/page-report/page-report.tsx    |  27 ++
 .../page-report/test/page-report.e2e.ts       |  11 +
 src/components/ui-card/ui-card.scss           |   3 +-
 .../ui-location-search/ui-location-search.tsx | 124 +++++++
 12 files changed, 542 insertions(+), 212 deletions(-)
 create mode 100644 src/components/page-report/page-report.scss
 create mode 100644 src/components/page-report/page-report.tsx
 create mode 100644 src/components/page-report/test/page-report.e2e.ts
 create mode 100644 src/components/ui-location-search/ui-location-search.tsx

diff --git a/src/components.d.ts b/src/components.d.ts
index f45ff39e..1a5377e4 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -12,6 +12,7 @@ export namespace Components {
         "location": LocationSegments | undefined;
     }
     interface FormReport {
+        "formattedAddress"?: string;
     }
     interface PageAbout {
     }
@@ -37,6 +38,7 @@ export namespace Components {
     interface PageGuidelines {
     }
     interface PageHome {
+        "history": RouterHistory;
     }
     interface PageInstructions {
     }
@@ -48,6 +50,9 @@ export namespace Components {
     }
     interface PagePrivacy {
     }
+    interface PageReport {
+        "history"?: RouterHistory;
+    }
     interface PageSession {
         "match": MatchResults;
     }
@@ -81,6 +86,11 @@ export namespace Components {
         "trucks"?: { coords: google.maps.LatLngLiteral; id: LocationId }[];
         "zoom"?: number;
     }
+    interface UiLocationSearch {
+        "error": string | null;
+        "placeholder": string;
+        "readOnly": boolean;
+    }
     interface UiMainContent {
         "background": "yellow" | "cyan" | "teal" | "red" | "none";
         "fullBleed": boolean;
@@ -208,6 +218,12 @@ declare global {
         prototype: HTMLPagePrivacyElement;
         new (): HTMLPagePrivacyElement;
     };
+    interface HTMLPageReportElement extends Components.PageReport, HTMLStencilElement {
+    }
+    var HTMLPageReportElement: {
+        prototype: HTMLPageReportElement;
+        new (): HTMLPageReportElement;
+    };
     interface HTMLPageSessionElement extends Components.PageSession, HTMLStencilElement {
     }
     var HTMLPageSessionElement: {
@@ -250,6 +266,12 @@ declare global {
         prototype: HTMLUiGeoMapElement;
         new (): HTMLUiGeoMapElement;
     };
+    interface HTMLUiLocationSearchElement extends Components.UiLocationSearch, HTMLStencilElement {
+    }
+    var HTMLUiLocationSearchElement: {
+        prototype: HTMLUiLocationSearchElement;
+        new (): HTMLUiLocationSearchElement;
+    };
     interface HTMLUiMainContentElement extends Components.UiMainContent, HTMLStencilElement {
     }
     var HTMLUiMainContentElement: {
@@ -298,6 +320,7 @@ declare global {
         "page-partners": HTMLPagePartnersElement;
         "page-press": HTMLPagePressElement;
         "page-privacy": HTMLPagePrivacyElement;
+        "page-report": HTMLPageReportElement;
         "page-session": HTMLPageSessionElement;
         "page-trucks": HTMLPageTrucksElement;
         "page-vax-and-snacks": HTMLPageVaxAndSnacksElement;
@@ -305,6 +328,7 @@ declare global {
         "ui-card": HTMLUiCardElement;
         "ui-dynamic-text": HTMLUiDynamicTextElement;
         "ui-geo-map": HTMLUiGeoMapElement;
+        "ui-location-search": HTMLUiLocationSearchElement;
         "ui-main-content": HTMLUiMainContentElement;
         "ui-modal": HTMLUiModalElement;
         "ui-pizza-list": HTMLUiPizzaListElement;
@@ -317,6 +341,7 @@ declare namespace LocalJSX {
         "location"?: LocationSegments | undefined;
     }
     interface FormReport {
+        "formattedAddress"?: string;
     }
     interface PageAbout {
     }
@@ -342,6 +367,7 @@ declare namespace LocalJSX {
     interface PageGuidelines {
     }
     interface PageHome {
+        "history": RouterHistory;
     }
     interface PageInstructions {
     }
@@ -353,6 +379,9 @@ declare namespace LocalJSX {
     }
     interface PagePrivacy {
     }
+    interface PageReport {
+        "history"?: RouterHistory;
+    }
     interface PageSession {
         "match": MatchResults;
     }
@@ -392,6 +421,12 @@ declare namespace LocalJSX {
         "trucks"?: { coords: google.maps.LatLngLiteral; id: LocationId }[];
         "zoom"?: number;
     }
+    interface UiLocationSearch {
+        "error"?: string | null;
+        "onLocationSelected"?: (event: CustomEvent<{ formattedAddress: string; locationName: string }>) => void;
+        "placeholder"?: string;
+        "readOnly"?: boolean;
+    }
     interface UiMainContent {
         "background"?: "yellow" | "cyan" | "teal" | "red" | "none";
         "fullBleed"?: boolean;
@@ -432,6 +467,7 @@ declare namespace LocalJSX {
         "page-partners": PagePartners;
         "page-press": PagePress;
         "page-privacy": PagePrivacy;
+        "page-report": PageReport;
         "page-session": PageSession;
         "page-trucks": PageTrucks;
         "page-vax-and-snacks": PageVaxAndSnacks;
@@ -439,6 +475,7 @@ declare namespace LocalJSX {
         "ui-card": UiCard;
         "ui-dynamic-text": UiDynamicText;
         "ui-geo-map": UiGeoMap;
+        "ui-location-search": UiLocationSearch;
         "ui-main-content": UiMainContent;
         "ui-modal": UiModal;
         "ui-pizza-list": UiPizzaList;
@@ -467,6 +504,7 @@ declare module "@stencil/core" {
             "page-partners": LocalJSX.PagePartners & JSXBase.HTMLAttributes<HTMLPagePartnersElement>;
             "page-press": LocalJSX.PagePress & JSXBase.HTMLAttributes<HTMLPagePressElement>;
             "page-privacy": LocalJSX.PagePrivacy & JSXBase.HTMLAttributes<HTMLPagePrivacyElement>;
+            "page-report": LocalJSX.PageReport & JSXBase.HTMLAttributes<HTMLPageReportElement>;
             "page-session": LocalJSX.PageSession & JSXBase.HTMLAttributes<HTMLPageSessionElement>;
             "page-trucks": LocalJSX.PageTrucks & JSXBase.HTMLAttributes<HTMLPageTrucksElement>;
             "page-vax-and-snacks": LocalJSX.PageVaxAndSnacks & JSXBase.HTMLAttributes<HTMLPageVaxAndSnacksElement>;
@@ -474,6 +512,7 @@ declare module "@stencil/core" {
             "ui-card": LocalJSX.UiCard & JSXBase.HTMLAttributes<HTMLUiCardElement>;
             "ui-dynamic-text": LocalJSX.UiDynamicText & JSXBase.HTMLAttributes<HTMLUiDynamicTextElement>;
             "ui-geo-map": LocalJSX.UiGeoMap & JSXBase.HTMLAttributes<HTMLUiGeoMapElement>;
+            "ui-location-search": LocalJSX.UiLocationSearch & JSXBase.HTMLAttributes<HTMLUiLocationSearchElement>;
             "ui-main-content": LocalJSX.UiMainContent & JSXBase.HTMLAttributes<HTMLUiMainContentElement>;
             "ui-modal": LocalJSX.UiModal & JSXBase.HTMLAttributes<HTMLUiModalElement>;
             "ui-pizza-list": LocalJSX.UiPizzaList & JSXBase.HTMLAttributes<HTMLUiPizzaListElement>;
diff --git a/src/components/app-root/app-root.scss b/src/components/app-root/app-root.scss
index 97dc1753..3636ac7d 100644
--- a/src/components/app-root/app-root.scss
+++ b/src/components/app-root/app-root.scss
@@ -166,6 +166,7 @@
 }
 
 footer {
+  margin-top: 16px;
   background: $light-red;
   color: $red;
 
diff --git a/src/components/app-root/app-root.tsx b/src/components/app-root/app-root.tsx
index 8f814385..15fbda25 100644
--- a/src/components/app-root/app-root.tsx
+++ b/src/components/app-root/app-root.tsx
@@ -49,7 +49,7 @@ export class AppRoot {
           </div>
           <ul class="menu" id="menu">
             <li>
-              <stencil-route-link url="/home">🍕 Send pizza</stencil-route-link>
+              <stencil-route-link url="/report">🍕 Send pizza</stencil-route-link>
             </li>
             <li>
               <stencil-route-link url="/donate">💵 Donate</stencil-route-link>
@@ -82,7 +82,7 @@ export class AppRoot {
               <stencil-route url="/partners" component="page-partners" />
               <stencil-route url="/press" component="page-press" />
               <stencil-route url="/privacy" component="page-privacy" />
-              <stencil-route url="/report" routeRender={() => <stencil-router-redirect url="/" />} />
+              <stencil-route url="/report" component="page-report" />
               <stencil-route url="/trucks" component="page-trucks" />
               <stencil-route url="/vax-and-snacks" component="page-vax-and-snacks" />
               <stencil-route component="page-home" />
diff --git a/src/components/form-report/form-report.tsx b/src/components/form-report/form-report.tsx
index aaa704e5..84b9ac51 100644
--- a/src/components/form-report/form-report.tsx
+++ b/src/components/form-report/form-report.tsx
@@ -1,6 +1,4 @@
-import { Build, Component, h, Host, State } from "@stencil/core";
-// @ts-ignore
-import {} from "googlemaps";
+import { Component, h, Host, Prop, State } from "@stencil/core";
 
 import { ApiError, PizzaApi, ReportPostResults } from "../../api";
 import shaFile from "../../util/shaFile";
@@ -15,6 +13,8 @@ const PHONE_REGEX = /^[+]?(1\-|1\s|1|\d{3}\-|\d{3}\s|)?((\(\d{3}\))|\d{3})(\-|\s
   styleUrl: "form-report.scss",
 })
 export class FormReport {
+  @Prop() public formattedAddress?: string;
+
   /**
    * *Always* required to hide form, regardless of other show booleans
    */
@@ -60,132 +60,19 @@ export class FormReport {
   @State() private photoUrl: string = "";
   @State() private userClickedGuidelinesLink: boolean = true;
 
-  public componentDidRender() {
-    if (Build.isBrowser && google && document.getElementById("autocomplete-input")) {
-      const autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocomplete-input") as HTMLInputElement, {
-        types: ["geocode", "establishment"],
-        componentRestrictions: { country: "us" },
-      });
-
-      autocomplete.addListener("place_changed", () => {
-        const place = autocomplete.getPlace();
-
-        const componentForm: { [key: string]: string } = {
-          street_number: "short_name",
-          route: "long_name",
-          locality: "long_name",
-          administrative_area_level_1: "short_name",
-          postal_code: "short_name",
-          premise: "name",
-          address: "formatted_address",
-        };
-
-        Object.keys(componentForm).forEach(component => {
-          const elem = document.getElementById(component) as HTMLInputElement;
-          if (elem) {
-            elem.value = "";
-          }
-        });
-
-        place.address_components?.forEach((address_component: { [key: string]: any }) => {
-          const addressType: string = address_component.types[0];
-          const mapping = componentForm[addressType];
-          const elem = document.getElementById(addressType) as HTMLInputElement;
-          if (mapping && elem) {
-            elem.value = address_component[mapping];
-          }
-        });
-
-        const premise = document.getElementById("premise") as HTMLInputElement;
-        if (premise) {
-          premise.value = place.name;
-        }
-        const formatted_address = document.getElementById("formatted_address") as HTMLInputElement;
-
-        if (formatted_address) {
-          formatted_address.value = place.formatted_address || "";
-        }
-
-        // Get readable address (either name or the address; remove USA)
-        this.locationName = place.formatted_address ? place.formatted_address.replace(/, USA/gi, "") : place.name ? place.name : "the location";
+  public componentWillLoad() {
+    if (this.formattedAddress) {
+      this.handleLocationSelected({
+        formattedAddress: this.formattedAddress,
+        locationName: this.formattedAddress.replace(/, USA/gi, ""),
       });
+      this.handleLoadStepTwo();
     }
   }
 
   public render() {
-    const handleAddressChange = () => {
-      const address = document.getElementById("autocomplete-input") as HTMLInputElement;
-      if (address && !address.value) {
-        this.locationName = "";
-      }
-    };
-
-    const handleLoadStepTwo = (e: Event) => {
-      e.preventDefault();
-      handleReportTypeChange();
-      this.showLocationInput = false;
-    };
-
-    const clearReportVerification = () => {
-      const socialLink = document.getElementById("social-link") as HTMLInputElement;
-      if (socialLink) {
-        socialLink.value = "";
-      }
-      removePhoto();
-    };
-
-    const handleReportTypeChange = () => {
-      const reportType = document.querySelector("input[name=reportType]:checked") as HTMLInputElement;
-      // Clear errors
-      clearFormError("reportType");
-      // Clear if changing report type
-      if (this.reportType !== reportType?.value) {
-        clearReportVerification();
-      }
-      this.reportType = reportType?.value;
-      // Scroll to top of form container
-      document.getElementById("form-report-component")?.scrollIntoView({
-        behavior: "smooth",
-      });
-    };
-
-    const resetForm = () => {
-      this.showConfirmation = false;
-      this.showServerError = false;
-      this.showFoodTruckOnSiteConfirmation = false;
-      this.showDistributorConfirmation = false;
-      this.showSuccessfulReportConfirmation = false;
-      this.showDuplicateReportConfirmation = false;
-      this.submitResponse = {};
-      this.submitError = {};
-      this.locationName = "";
-      this.reportType = "";
-      this.photoIsProcessing = false;
-      this.userClickedGuidelinesLink = false;
-      this.isLoading = false;
-      this.isDisabled = false;
-      removePhoto();
-      const form = document.getElementById("form-report") as HTMLFormElement;
-      if (form) {
-        form.reset();
-        // Reset select elements (some browsers need this extra step)
-        (document.getElementById("waitTime") as HTMLFormElement).value = "";
-        (document.getElementById("contactRole") as HTMLFormElement).value = "";
-      }
-      // Reset report type
-      const reportType = document.getElementById("report-type-social") as HTMLInputElement;
-      if (reportType) {
-        reportType.checked = true;
-      }
-      // Scroll to top
-      document.getElementById("form-report-component")?.scrollIntoView({
-        behavior: "smooth",
-      });
-      this.showLocationInput = true;
-    };
-
     const handleNewLocation = (e: Event) => {
-      resetForm();
+      this.resetForm();
       e.preventDefault();
     };
 
@@ -200,7 +87,7 @@ export class FormReport {
 
       // If no files
       if (!file) {
-        removePhoto();
+        this.removePhoto();
         // Reset
         this.photoIsProcessing = false;
         this.isDisabled = false;
@@ -219,7 +106,7 @@ export class FormReport {
         try {
           await uploadPhoto(file, addressInput.value);
         } catch ({ errors }) {
-          removePhoto();
+          this.removePhoto();
           this.submitError.photo = errors?.fileName || "Whoops! We could not upload that photo";
         } finally {
           // Always reset
@@ -228,7 +115,7 @@ export class FormReport {
         }
       } else {
         this.submitError.photo = "Whoops! We could not upload that photo. Try adding a link to a social media report instead.";
-        removePhoto();
+        this.removePhoto();
         // Always reset
         this.photoIsProcessing = false;
         this.isDisabled = false;
@@ -269,21 +156,6 @@ export class FormReport {
       this.photoUrl = `https://polls.pizza/${filePath}`;
     };
 
-    const removePhoto = () => {
-      const fileInput = document.getElementById("photo") as HTMLInputElement;
-      const imagePreview = document.getElementById("photo-preview");
-      if (fileInput) {
-        fileInput.value = "";
-      }
-      this.hasPhoto = false;
-      this.photoUrl = "";
-      clearFormError("photo");
-      if (imagePreview) {
-        imagePreview.style.backgroundImage = "";
-      }
-      this.photoIsProcessing = false;
-    };
-
     // Sharing
     const shareUrl = "https://polls.pizza/";
     const shareText = "Pizza to the Polls is making democracy delicious by delivering free food for all to polling places with long lines";
@@ -308,20 +180,14 @@ export class FormReport {
       const distributorDisclaimerAgree = (document.querySelector("input[name=distributorDisclaimer]") as HTMLInputElement)?.checked;
       // If checkbox is already checked, remove other error message
       if (distributorDisclaimerAgree) {
-        clearFormError("distributorDisclaimer");
+        this.clearFormError("distributorDisclaimer");
       }
-      clearFormError("viewGuidelines");
+      this.clearFormError("viewGuidelines");
       // Toggle boolean to allow user to submit form
       this.userClickedGuidelinesLink = true;
       this.isDisabled = false;
     };
 
-    const clearFormError = (field: string): void => {
-      // Remove field from existing errors
-      const { [field]: remove, ...rest } = this.submitError;
-      this.submitError = rest;
-    };
-
     const handleSubmit = async (event: Event) => {
       event.preventDefault();
 
@@ -520,59 +386,27 @@ export class FormReport {
                 <label class="label" htmlFor="address">
                   Where should we send pizza? <span class="required">*</span>
                 </label>
-                <input
-                  class={"input " + ("address" in this.submitError ? "has-error" : "")}
-                  type="text"
-                  id="autocomplete-input"
-                  name="full_place"
-                  placeholder="ex. St. John's Library"
-                  onInput={handleAddressChange}
+                <ui-location-search
+                  error={this.submitError.address}
                   readOnly={!this.showLocationInput}
-                  autocomplete="off"
+                  onLocationSelected={({ detail }: CustomEvent) => {
+                    this.handleLocationSelected(detail);
+                  }}
                 />
                 <span class="help">Search by the name of the place ("St. John's Library") or street address.</span>
-                <p class="help has-text-red" hidden={!("address" in this.submitError)}>
+                <p class="help has-text-red" hidden={"address" in this.submitError}>
                   {this.submitError.address}
                 </p>
               </div>
-              {/* Hidden address info (needed for submit) */}
-              <div id="address" class="form-item is-hidden" hidden={true}>
-                <table>
-                  <tr>
-                    <td class="label">Place</td>
-                    <td colSpan={4}>
-                      <input class="input" id="premise" disabled={true} readOnly />
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="label">Street address</td>
-                    <td class="slimField">
-                      <input name="street_number" class="input" id="street_number" disabled={true} readOnly />
-                    </td>
-                    <td class="wideField" colSpan={2}>
-                      <input name="route" class="input" id="route" disabled={true} readOnly />
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="label">City</td>
-                    <td class="wideField" colSpan={3}>
-                      <input name="locality" class="input" id="locality" disabled={true} readOnly />
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="label">State</td>
-                    <td class="slimField">
-                      <input name="state" class="input" id="administrative_area_level_1" disabled={true} readOnly />
-                    </td>
-                    <td class="label">Zip code</td>
-                    <td class="wideField">
-                      <input name="zip" class="input" id="postal_code" disabled={true} readOnly />
-                    </td>
-                    <input type="hidden" name="address" id="formatted_address" />
-                  </tr>
-                </table>
-              </div>
-              <button onClick={handleLoadStepTwo} class={"button is-teal is-marginless " + (!this.locationName ? "is-disabled" : "")} disabled={!this.locationName}>
+              <input type="hidden" name="address" id="formatted_address" />
+              <button
+                onClick={(e: Event) => {
+                  e.preventDefault();
+                  this.handleLoadStepTwo();
+                }}
+                class={"button is-teal is-marginless " + (!this.locationName ? "is-disabled" : "")}
+                disabled={!this.locationName}
+              >
                 Report line
               </button>
             </div>
@@ -591,13 +425,17 @@ export class FormReport {
                   Social media report <span class="is-hidden-tablet">or photo</span> <span class="required">*</span>
                 </label>
                 <div class="radio-group social-radio-group">
-                  <label class={"radio " + ("reportType" in this.submitError ? "has-error" : "")} htmlFor="report-type-social" onClick={handleReportTypeChange}>
+                  <label class={"radio " + ("reportType" in this.submitError ? "has-error" : "")} htmlFor="report-type-social" onClick={this.handleReportTypeChange}>
                     <input type="radio" value="social" id="report-type-social" name="reportType" checked />
                     <span class="label-text">Social link</span>
                     <span class="indicator"></span>
                   </label>
                   <div class="radio-group-spacer is-hidden-mobile"></div>
-                  <label class={"radio is-hidden-tablet " + ("reportType" in this.submitError ? "has-error" : "")} htmlFor="report-type-photo" onClick={handleReportTypeChange}>
+                  <label
+                    class={"radio is-hidden-tablet " + ("reportType" in this.submitError ? "has-error" : "")}
+                    htmlFor="report-type-photo"
+                    onClick={this.handleReportTypeChange}
+                  >
                     <input type="radio" value="photo" id="report-type-photo" name="reportType" />
                     <span class="label-text">Photo</span>
                     <span class="indicator"></span>
@@ -621,7 +459,7 @@ export class FormReport {
                     name="url"
                     placeholder="ex. Link to Twitter, IG, etc."
                     autocomplete="off"
-                    onInput={() => clearFormError("url")}
+                    onInput={() => this.clearFormError("url")}
                   />
                   <span class="help is-hidden-mobile">We'll make sure there's really a line.</span>
                   <p class="help has-text-red" hidden={!("url" in this.submitError)}>
@@ -643,7 +481,7 @@ export class FormReport {
                     </div>
                     <div class="photo-preview-container" hidden={!this.hasPhoto}>
                       <div id="photo-preview"></div>
-                      <div class="delete" onClick={removePhoto}></div>
+                      <div class="delete" onClick={this.removePhoto}></div>
                     </div>
                   </div>
                   <p class="help has-text-red" hidden={!("photo" in this.submitError)}>
@@ -664,7 +502,7 @@ export class FormReport {
                   How long is the wait in line? <span class="required">*</span>
                 </label>
                 <div class={"select is-fullwidth " + ("waitTime" in this.submitError ? "has-error " : "")}>
-                  <select id="waitTime" name="waitTime" onInput={() => clearFormError("waitTime")}>
+                  <select id="waitTime" name="waitTime" onInput={() => this.clearFormError("waitTime")}>
                     <option value="" disabled selected>
                       Select your best guess
                     </option>
@@ -686,7 +524,7 @@ export class FormReport {
                   What is your role at the polling location? <span class="required">*</span>
                 </label>
                 <div class={"select is-fullwidth " + ("contactRole" in this.submitError ? "has-error " : "")}>
-                  <select id="contactRole" name="contactRole" onInput={() => clearFormError("contactRole")}>
+                  <select id="contactRole" name="contactRole" onInput={() => this.clearFormError("contactRole")}>
                     <option value="" disabled selected>
                       Select your role
                     </option>
@@ -712,7 +550,7 @@ export class FormReport {
                     type="text"
                     name="contactFirstName"
                     autoComplete="given-name"
-                    onInput={() => clearFormError("contactFirstName")}
+                    onInput={() => this.clearFormError("contactFirstName")}
                   />
                   <p class="help">To give to the delivery driver.</p>
                   <p class="help has-text-red" hidden={!("contactFirstName" in this.submitError)}>
@@ -728,7 +566,7 @@ export class FormReport {
                     type="text"
                     name="contactLastName"
                     autoComplete="family-name"
-                    onInput={() => clearFormError("contactLastName")}
+                    onInput={() => this.clearFormError("contactLastName")}
                   />
                   <p class="help">To give to the delivery driver.</p>
                   <p class="help has-text-red" hidden={!("contactLastName" in this.submitError)}>
@@ -747,7 +585,7 @@ export class FormReport {
                   type="tel"
                   name="contactPhone"
                   autoComplete="tel-national"
-                  onInput={() => clearFormError("contactPhone")}
+                  onInput={() => this.clearFormError("contactPhone")}
                 />
                 <span class="help">So we can let you know when your order's sent!</span>
                 <p class="help has-text-red" hidden={!("contactPhone" in this.submitError)}>
@@ -761,7 +599,13 @@ export class FormReport {
                   class={"checkbox is-small is-marginless " + ("viewGuidelines" in this.submitError || "distributorDisclaimer" in this.submitError ? "has-error" : "")}
                   htmlFor="accept-distributor-disclaimer"
                 >
-                  <input type="checkbox" value="agree" id="accept-distributor-disclaimer" name="distributorDisclaimer" onChange={() => clearFormError("distributorDisclaimer")} />
+                  <input
+                    type="checkbox"
+                    value="agree"
+                    id="accept-distributor-disclaimer"
+                    name="distributorDisclaimer"
+                    onChange={() => this.clearFormError("distributorDisclaimer")}
+                  />
                   <span class="label-text">
                     I have read and understood the{" "}
                     <a href="/guidelines" target="_blank" onClick={handleGuidelinesClick}>
@@ -920,4 +764,97 @@ export class FormReport {
       </Host>
     );
   }
+
+  private handleLocationSelected({ formattedAddress, locationName }: { formattedAddress: string; locationName: string }) {
+    this.locationName = locationName;
+
+    const addressInput = document.getElementById("formatted_address") as HTMLInputElement;
+    if (addressInput) {
+      addressInput.value = formattedAddress;
+    }
+  }
+
+  private handleLoadStepTwo() {
+    this.handleReportTypeChange();
+    this.showLocationInput = false;
+  }
+
+  private handleReportTypeChange() {
+    const reportType = document.querySelector("input[name=reportType]:checked") as HTMLInputElement;
+    // Clear errors
+    this.clearFormError("reportType");
+    // Clear if changing report type
+    if (this.reportType !== reportType?.value) {
+      this.clearReportVerification();
+    }
+    this.reportType = reportType?.value;
+    // Scroll to top of form container
+    document.getElementById("form-report-component")?.scrollIntoView({
+      behavior: "smooth",
+    });
+  }
+
+  private clearFormError(field: string): void {
+    // Remove field from existing errors
+    const { [field]: remove, ...rest } = this.submitError;
+    this.submitError = rest;
+  }
+
+  private clearReportVerification() {
+    const socialLink = document.getElementById("social-link") as HTMLInputElement;
+    if (socialLink) {
+      socialLink.value = "";
+    }
+    this.removePhoto();
+  }
+
+  private resetForm() {
+    this.showConfirmation = false;
+    this.showServerError = false;
+    this.showFoodTruckOnSiteConfirmation = false;
+    this.showDistributorConfirmation = false;
+    this.showSuccessfulReportConfirmation = false;
+    this.showDuplicateReportConfirmation = false;
+    this.submitResponse = {};
+    this.submitError = {};
+    this.locationName = "";
+    this.reportType = "";
+    this.photoIsProcessing = false;
+    this.userClickedGuidelinesLink = false;
+    this.isLoading = false;
+    this.isDisabled = false;
+    this.removePhoto();
+    const form = document.getElementById("form-report") as HTMLFormElement;
+    if (form) {
+      form.reset();
+      // Reset select elements (some browsers need this extra step)
+      (document.getElementById("waitTime") as HTMLFormElement).value = "";
+      (document.getElementById("contactRole") as HTMLFormElement).value = "";
+    }
+    // Reset report type
+    const reportType = document.getElementById("report-type-social") as HTMLInputElement;
+    if (reportType) {
+      reportType.checked = true;
+    }
+    // Scroll to top
+    document.getElementById("form-report-component")?.scrollIntoView({
+      behavior: "smooth",
+    });
+    this.showLocationInput = true;
+  }
+
+  private removePhoto() {
+    const fileInput = document.getElementById("photo") as HTMLInputElement;
+    const imagePreview = document.getElementById("photo-preview");
+    if (fileInput) {
+      fileInput.value = "";
+    }
+    this.hasPhoto = false;
+    this.photoUrl = "";
+    this.clearFormError("photo");
+    if (imagePreview) {
+      imagePreview.style.backgroundImage = "";
+    }
+    this.photoIsProcessing = false;
+  }
 }
diff --git a/src/components/page-home/Deliveries.tsx b/src/components/page-home/Deliveries.tsx
index 3dec6458..24dc361a 100644
--- a/src/components/page-home/Deliveries.tsx
+++ b/src/components/page-home/Deliveries.tsx
@@ -31,7 +31,6 @@ const Delivery = ({ order }: { order: OrderDetails }) => (
 const Deliveries = ({ orders }: { orders?: OrderDetails[] }) => (
   <div class="deliveries">
     <h3 class="has-text-red">🚐 Deliveries</h3>
-    {console.log(orders)}
     {orders?.map(order => (
       <Delivery order={order} />
     ))}
diff --git a/src/components/page-home/page-home.scss b/src/components/page-home/page-home.scss
index c81497fa..7ff16e3e 100644
--- a/src/components/page-home/page-home.scss
+++ b/src/components/page-home/page-home.scss
@@ -71,6 +71,52 @@ page-home {
     }
   }
 
+  .order-pizzas {
+    background-color: $light-red;
+    ui-location-search {
+      input {
+        border: none;
+        background-color: $light-red;
+        box-shadow: none;
+        height: 2.2rem;
+        font-size: 2.2rem;
+
+        @media ($under-tablet) {
+          height: 1rem;
+          font-size: 1rem;
+        }
+
+        font-weight: 700;
+        &::placeholder,
+        & {
+          color: $blue;
+        }
+        margin-left: 10px;
+      }
+      &:before {
+        height: 2.8rem;
+        font-size: 2.8rem;
+        @media ($under-tablet) {
+          height: 1.3rem;
+          font-size: 1.3rem;
+        }
+
+        font-weight: 700;
+        color: $blue;
+        content: "\26B2";
+        width: 1px;
+        -webkit-transform: rotate(-45deg);
+        -moz-transform: rotate(-45deg);
+        -o-transform: rotate(-45deg);
+        transform: rotate(-45deg);
+        display: block;
+        position: absolute;
+        z-index: 1;
+        margin-top: -2px;
+      }
+    }
+  }
+
   .totals {
     background-attachment: fixed;
     background: linear-gradient(180deg, rgba(138, 203, 208, 0) 0%, rgba(138, 203, 208, 0.1) 100%);
diff --git a/src/components/page-home/page-home.tsx b/src/components/page-home/page-home.tsx
index 01d94861..b1099813 100644
--- a/src/components/page-home/page-home.tsx
+++ b/src/components/page-home/page-home.tsx
@@ -1,4 +1,5 @@
-import { Build, Component, h, State } from "@stencil/core";
+import { Build, Component, h, Prop, State } from "@stencil/core";
+import { RouterHistory } from "@stencil/router";
 
 import { OrderDetails, PizzaApi, PizzaTotals } from "../../api";
 
@@ -14,6 +15,7 @@ export class PageHome {
   @State() private totals?: PizzaTotals;
   @State() private orders?: OrderDetails[];
   @State() public available: string = "";
+  @Prop() public history!: RouterHistory;
 
   public async componentWillLoad() {
     document.title = `Home | Pizza to the Polls`;
@@ -25,6 +27,11 @@ export class PageHome {
   }
 
   public render() {
+    const handleLocationSelected = (e: CustomEvent) => {
+      console.log(e.detail);
+      this.history.push(`/report?q=${e.detail.formattedAddress.replace(/\s/g, "+", {})}`);
+    };
+
     return (
       <div>
         <div class="hero">
@@ -47,6 +54,11 @@ export class PageHome {
             </div>
           </div>
         </div>
+        <section class="order-pizzas">
+          <div class="container">
+            <ui-location-search placeholder="Search for a location to send pizza" onLocationSelected={handleLocationSelected} />
+          </div>
+        </section>
         <section class="totals">{this.totals && <Stats totals={this.totals} />}</section>
         <section class="tweets-deliveries">
           <div class="container">
diff --git a/src/components/page-report/page-report.scss b/src/components/page-report/page-report.scss
new file mode 100644
index 00000000..87e5558b
--- /dev/null
+++ b/src/components/page-report/page-report.scss
@@ -0,0 +1,135 @@
+page-donate {
+  ui-card {
+    background: $tan;
+  }
+  ul {
+    margin-bottom: 24px;
+    padding: 0;
+
+    li {
+      list-style: none;
+      margin: 0;
+    }
+  }
+
+  .donation-intro {
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  #donate-form {
+    margin-top: 32px;
+
+    p {
+      font-size: 14px;
+    }
+
+    label.radio {
+      border-color: $gray2;
+    }
+
+    .donation-amount-list {
+      margin: 0;
+    }
+
+    #custom-amount-text {
+      position: relative;
+      top: 4px;
+    }
+
+    #custom-amount {
+      display: inline-block;
+      border-radius: 0;
+      border: none;
+      border-bottom: 2px solid $blue;
+      box-shadow: none;
+      height: 30px;
+      margin-left: 0.25rem;
+      font-size: 18px;
+      color: $blue;
+      padding-left: 0;
+      padding-right: 0;
+      max-width: 80px;
+
+      &:focus {
+        border-bottom-color: $cyan;
+      }
+    }
+  }
+
+  .message {
+    padding: 10px 20px;
+    color: $blue;
+    background: $yellow;
+    border-radius: 8px;
+    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.05);
+
+    &.is-error {
+      background: $red;
+    }
+  }
+
+  #share-donation {
+    // Always hide (regardless of support) if not on mobile
+    @media ($tablet) {
+      display: none;
+    }
+
+    img,
+    span {
+      pointer-events: none;
+    }
+
+    img {
+      height: 1em;
+      width: 1em;
+      margin-right: 8px;
+    }
+  }
+
+  .share-donation-link-container {
+    &.can-native-share {
+      // Hide on mobile if native sharing is supported
+      display: none;
+      // Show if not on mobile regardless
+      @media ($tablet) {
+        display: block;
+      }
+    }
+  }
+
+  .share-donation-links {
+    padding: 0;
+
+    li {
+      display: block;
+      margin: 0 auto 10px;
+
+      @media ($tablet) {
+        display: inline-block;
+        margin: 0 10px 0 0;
+      }
+
+      .share-donation-link {
+        img,
+        span {
+          pointer-events: none; // important
+        }
+
+        img {
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+
+  #donation-error {
+    margin-bottom: 1rem;
+    h2 {
+      &,
+      & a {
+        color: $blue;
+      }
+    }
+  }
+}
diff --git a/src/components/page-report/page-report.tsx b/src/components/page-report/page-report.tsx
new file mode 100644
index 00000000..af6796ce
--- /dev/null
+++ b/src/components/page-report/page-report.tsx
@@ -0,0 +1,27 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import { RouterHistory } from "@stencil/router";
+
+@Component({
+  tag: "page-report",
+  styleUrl: "page-report.scss",
+})
+export class PageReport {
+  @Prop() public history?: RouterHistory;
+
+  public componentWillLoad() {
+    document.title = `Report | Pizza to the Polls`;
+  }
+
+  public render() {
+    console.log(this.history?.location.query.q);
+    return (
+      <Host>
+        <ui-main-content>
+          <ui-card>
+            <form-report formattedAddress={this.history?.location.query.q} />
+          </ui-card>
+        </ui-main-content>
+      </Host>
+    );
+  }
+}
diff --git a/src/components/page-report/test/page-report.e2e.ts b/src/components/page-report/test/page-report.e2e.ts
new file mode 100644
index 00000000..0e9cd394
--- /dev/null
+++ b/src/components/page-report/test/page-report.e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from "@stencil/core/testing";
+
+describe("page-report", () => {
+  it("renders", async () => {
+    const page = await newE2EPage();
+    await page.setContent("<page-report></page-report>");
+
+    const element = await page.find("page-report");
+    expect(element).toHaveClass("hydrated");
+  });
+});
diff --git a/src/components/ui-card/ui-card.scss b/src/components/ui-card/ui-card.scss
index 1c1fb500..822b55eb 100644
--- a/src/components/ui-card/ui-card.scss
+++ b/src/components/ui-card/ui-card.scss
@@ -1,7 +1,6 @@
 ui-card {
-  background-color: $white;
+  background-color: $tan;
   border-radius: $radius;
-  box-shadow: $box-shadow;
   color: $blue;
   display: block;
   padding: 1.5rem;
diff --git a/src/components/ui-location-search/ui-location-search.tsx b/src/components/ui-location-search/ui-location-search.tsx
new file mode 100644
index 00000000..bf0a949c
--- /dev/null
+++ b/src/components/ui-location-search/ui-location-search.tsx
@@ -0,0 +1,124 @@
+import { Build, Component, Event, EventEmitter, h, Host, Prop, State } from "@stencil/core";
+// @ts-ignore
+import {} from "googlemaps";
+
+@Component({
+  tag: "ui-location-search",
+  shadow: false,
+})
+export class UiLocationSearch {
+  @Prop() public error: string | null = null;
+  @Prop() public readOnly: boolean = false;
+  @Prop() public placeholder: string = "ex. St. John's Library";
+
+  @State() public locationName: string = "";
+  @Event() public locationSelected!: EventEmitter<{ formattedAddress: string; locationName: string }>;
+
+  public componentDidRender() {
+    if (Build.isBrowser && google && document.getElementById("autocomplete-input")) {
+      const autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocomplete-input") as HTMLInputElement, {
+        types: ["geocode", "establishment"],
+        componentRestrictions: { country: "us" },
+      });
+
+      autocomplete.addListener("place_changed", () => {
+        const place = autocomplete.getPlace();
+
+        const componentForm: { [key: string]: string } = {
+          street_number: "short_name",
+          route: "long_name",
+          locality: "long_name",
+          administrative_area_level_1: "short_name",
+          postal_code: "short_name",
+          premise: "name",
+        };
+
+        Object.keys(componentForm).forEach(component => {
+          const elem = document.getElementById(component) as HTMLInputElement;
+          if (elem) {
+            elem.value = "";
+          }
+        });
+
+        place.address_components?.forEach((address_component: { [key: string]: any }) => {
+          const addressType: string = address_component.types[0];
+          const mapping = componentForm[addressType];
+          const elem = document.getElementById(addressType) as HTMLInputElement;
+          if (mapping && elem) {
+            elem.value = address_component[mapping];
+          }
+        });
+
+        const premise = document.getElementById("premise") as HTMLInputElement;
+        if (premise) {
+          premise.value = place.name;
+        }
+
+        // Get readable address (either name or the address; remove USA)
+        const locationName = place.formatted_address ? place.formatted_address.replace(/, USA/gi, "") : place.name ? place.name : "the location";
+        const formattedAddress = place.formatted_address || "";
+        this.locationSelected.emit({ locationName, formattedAddress });
+      });
+    }
+  }
+
+  public render() {
+    const handleAddressChange = () => {
+      const address = document.getElementById("autocomplete-input") as HTMLInputElement;
+      if (address && !address.value) {
+        this.locationName = "";
+      }
+    };
+
+    return (
+      <Host>
+        <input
+          class={"input " + (!this.error ? "has-error" : "")}
+          type="text"
+          id="autocomplete-input"
+          name="full_place"
+          placeholder={this.placeholder}
+          onInput={handleAddressChange}
+          readOnly={this.readOnly}
+          autocomplete="off"
+        />
+        {/* Hidden address info (needed for submit) */}
+        <div id="address" class="form-item is-hidden" hidden={true}>
+          <table>
+            <tr>
+              <td class="label">Place</td>
+              <td colSpan={4}>
+                <input class="input" id="premise" disabled={true} readOnly />
+              </td>
+            </tr>
+            <tr>
+              <td class="label">Street address</td>
+              <td class="slimField">
+                <input name="street_number" class="input" id="street_number" disabled={true} readOnly />
+              </td>
+              <td class="wideField" colSpan={2}>
+                <input name="route" class="input" id="route" disabled={true} readOnly />
+              </td>
+            </tr>
+            <tr>
+              <td class="label">City</td>
+              <td class="wideField" colSpan={3}>
+                <input name="locality" class="input" id="locality" disabled={true} readOnly />
+              </td>
+            </tr>
+            <tr>
+              <td class="label">State</td>
+              <td class="slimField">
+                <input name="state" class="input" id="administrative_area_level_1" disabled={true} readOnly />
+              </td>
+              <td class="label">Zip code</td>
+              <td class="wideField">
+                <input name="zip" class="input" id="postal_code" disabled={true} readOnly />
+              </td>
+            </tr>
+          </table>
+        </div>
+      </Host>
+    );
+  }
+}