[UK] Dual submit buttons on homepage postcode form

Present "report" vs "browse" choice at time of postcode entry, so we
can track intent, as part of a temporary experiment into what people
expect to see on the fixmystreet.com/around page.

Google Analytics will be able detect which button was pressed by
looking for the `intent=report` or `intent=report` query string param
in the resulting pageview location.

We supply a *third* submit button, immediately before the other two,
and hidden from visual users and assistive devices, to prevent either
of the "intent" submit values being sent when the user submits the
form via the Return/Enter key.

Part of #2021.

4 files changed, 123 insertions, 5 deletions

diff --git a/.cypress/cypress/integration/simple_spec.js b/.cypress/cypress/integration/simple_spec.js
index 39000a022..a1adbd06f 100644
--- a/.cypress/cypress/integration/simple_spec.js
+++ b/.cypress/cypress/integration/simple_spec.js
@@ -1,16 +1,21 @@
-describe('My First Test', function() {
-    it('Visits the home page', function() {
+describe('Clicking the map', function() {
+    before(function(){
         cy.visit('/');
         cy.contains('Go');
         cy.get('[name=pc]').type('BS10 5EE');
-        cy.get('#postcodeForm').submit();
+        cy.get('[name=pc]').parents('form').submit();
+    });
+
+    it('allows me to report a new problem', function() {
         cy.url().should('include', '/around');
         cy.get('#map_box').click(200, 200);
         cy.get('[name=title]').type('Title');
         cy.get('[name=detail]').type('Detail');
         cy.get('[name=username]').type('user@example.org');
         cy.get('[name=password_sign_in]').type('password');
-        cy.get('form').submit();
-        cy.get('form').submit();
+        cy.get('[name=password_sign_in]').parents('form').submit();
+        cy.get('#map_sidebar').should('contain', 'check and confirm your details');
+        cy.get('#map_sidebar').parents('form').submit();
+        cy.get('body').should('contain', 'Thank you for reporting this issue');
     });
 });
diff --git a/templates/web/fixmystreet.com/around/postcode_form.html b/templates/web/fixmystreet.com/around/postcode_form.html
new file mode 100644
index 000000000..c1d3198c0
--- /dev/null
+++ b/templates/web/fixmystreet.com/around/postcode_form.html
@@ -0,0 +1,34 @@
+<div id="front-main">
+    <div id="front-main-container">
+        [% UNLESS possible_location_matches %]
+            [% INCLUDE 'around/intro.html' %]
+        [% END %]
+
+        [%
+            question = c.cobrand.enter_postcode_text || loc('Enter a nearby street name and area');
+        %]
+
+        <form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm" class="js-geolocate postcode-form-test">
+            <label for="pc">[% question %]:</label>
+            <input type="text" name="pc" value="[% pc | html %]" id="pc" size="10" maxlength="200" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]" class="postcode-form-test__postcode">
+            <a href="[% c.uri_for('/around') %]" id="geolocate_link" class="btn btn--geolocate">[% loc('or locate me automatically') %]</a>
+
+            [%# Form will be submitted via this button when user presses Enter key %]
+            <button type="submit" class="visuallyhidden" aria-hidden="true" tabindex="-1">Go</button>
+
+            <div class="postcode-form-test__buttons">
+                [%# We can now segment users in Google Analytics by looking at "intent" query string param %]
+                <button type="submit" name="intent" value="report" class="btn">[% loc('Report a new problem') %]</button>
+                <button type="submit" name="intent" value="browse" class="btn">[% loc('Show problems') %]</button>
+            </div>
+
+            [% IF partial_token %]
+                <input type="hidden" name="partial" value="[% partial_token.token %]">
+            [% END %]
+
+            [% IF c.user_exists AND c.user.categories.size %]
+              <input type="hidden" name="filter_category" value="[% c.user.categories.join(",") | html %]">
+            [% END %]
+        </form>
+    </div>
+</div>
diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index 0cc23c539..6088f842c 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -299,3 +299,67 @@ html.lazyload .js-lazyload {
     margin-bottom: 0;
   }
 }
+
+.postcode-form-test {
+    margin: 0 -1em;
+    padding: 1em;
+    background-color: $primary;
+    color: $primary_text;
+
+    label {
+        margin: 0;
+    }
+
+    // Lots of !important flags here to overpower
+    // selectors like `#front-main a#geolocate_link` and
+    // `body.fullwidthpage #front-main a#geolocate_link`
+    // in the core and fixmystreet.com styles.
+    #geolocate_link {
+        background: transparent !important;
+        border: none;
+        height: auto !important;
+        margin-top: 0 !important;
+        padding: 1em !important;
+
+        &:before {
+            vertical-align: -0.3em;
+        }
+    }
+}
+
+// Overloaded selector to beat input[type="text"]
+input.postcode-form-test__postcode {
+    max-width: 100%;
+    width: 30em;
+    margin: 0.5em auto 0 auto;
+    padding: 0.75em;
+    border: 1px solid darken($primary, 10%);
+    box-shadow: 0 1px 1px rgba(#000, 0.2);
+}
+
+.postcode-form-test__buttons {
+    margin: 1em -10px 0 -10px;
+
+    // Browsers without flex support will just lay out the buttons
+    // side-by-side, breaking onto two lines at narrow widths.
+    @include flex-container();
+    @include justify-content(center);
+
+    $btn-blue: #469bfc;
+
+    .btn {
+        color: #fff !important;
+        background: $btn-blue;
+        background-image: linear-gradient($btn-blue, darken($btn-blue, 5%));
+        border: none;
+        border-radius: 2px;
+        text-shadow: 0 1px 1px rgba(0,0,0,0.2);
+        box-shadow: 0 1px 1px rgba(0,0,0,0.2);
+        margin: 0 10px 10px 10px;
+
+        &:hover, &:focus {
+            background-color: darken($btn-blue, 5%);
+            background-image: linear-gradient(darken($btn-blue, 5%), darken($btn-blue, 10%));
+        }
+    }
+}
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index 9a8768562..9c7f575a2 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -171,6 +171,21 @@ body.fullwidthpage {
     }
 }
 
+.postcode-form-test {
+    background: transparent;
+    padding-top: 1.5em;
+}
+
+// Overloaded selector to beat input[type="text"]
+input.postcode-form-test__postcode {
+    max-width: 25em; // down from 27em, now that "GO" button has gone
+    font-size: 1.2em;
+}
+
+.postcode-form-test__buttons .btn {
+    font-size: 1.2em;
+}
+
 body.frontpage {
     #site-logo {
         margin: 2em 0;