Merge branch '1341-friendly-ab-test'

21 files changed, 280 insertions, 3 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Report/New.pm b/perllib/FixMyStreet/App/Controller/Report/New.pm
index 6aaa4531f..66dc20a3a 100644
--- a/perllib/FixMyStreet/App/Controller/Report/New.pm
+++ b/perllib/FixMyStreet/App/Controller/Report/New.pm
@@ -1141,8 +1141,8 @@ sub generate_map : Private {
     my $longitude = $c->stash->{longitude};
 
     # Don't do anything if the user skipped the map
+    $c->stash->{page} = 'new';
     if ( $c->stash->{report}->used_map ) {
-        $c->stash->{page} = 'new';
         FixMyStreet::Map::display_map(
             $c,
             latitude  => $latitude,
diff --git a/perllib/FixMyStreet/Cobrand/FixMyStreet.pm b/perllib/FixMyStreet/Cobrand/FixMyStreet.pm
index f21d38ff8..159f2f5db 100644
--- a/perllib/FixMyStreet/Cobrand/FixMyStreet.pm
+++ b/perllib/FixMyStreet/Cobrand/FixMyStreet.pm
@@ -59,5 +59,26 @@ sub get_country_for_ip_address {
     return mySociety::Gaze::get_country_from_ip($ip);
 }
 
+sub report_form_extras {
+    ( { name => 'gender', required => 0 }, { name => 'variant', required => 0 } )
+}
+
+sub ask_gender_question {
+    my $self = shift;
+
+    return 1 unless $self->{c}->user;
+
+    my $reports = $self->{c}->model('DB::Problem')->search({
+        user_id => $self->{c}->user->id,
+        extra => { like => '%gender%' }
+    }, { order_by => { -desc => 'id' } });
+
+    while (my $report = $reports->next) {
+        my $gender = $report->get_extra_metadata('gender');
+        return 0 if $gender =~ /female|male|other|unknown/;
+    }
+    return 1;
+}
+
 1;
 
diff --git a/t/app/controller/report_import.t b/t/app/controller/report_import.t
index 220ebaac5..26acf7790 100644
--- a/t/app/controller/report_import.t
+++ b/t/app/controller/report_import.t
@@ -159,6 +159,7 @@ subtest "Submit a correct entry" => sub {
         phone         => '',
         may_show_name => '1',
         category      => '-- Pick a category --',
+        gender => undef,
       },
       "check imported fields are shown";
 
@@ -195,6 +196,7 @@ subtest "Submit a correct entry" => sub {
         phone         => '',
         may_show_name => '1',
         category      => '-- Pick a category --',
+        gender => undef,
       },
       "check imported fields are shown";
 
@@ -285,6 +287,7 @@ subtest "Submit a correct entry (with location)" => sub {
         phone         => '',
         may_show_name => '1',
         category      => '-- Pick a category --',
+        gender => undef,
       },
       "check imported fields are shown";
 
diff --git a/t/app/controller/report_new.t b/t/app/controller/report_new.t
index 4258a46a1..cf72221b4 100644
--- a/t/app/controller/report_new.t
+++ b/t/app/controller/report_new.t
@@ -498,6 +498,7 @@ foreach my $test (
         my $new_values = {
             %{ $test->{fields} },     # values added to form
             %{ $test->{changes} },    # changes we expect
+            gender => undef,
         };
         is_deeply $mech->visible_form_values, $new_values,
           "values correctly changed";
@@ -837,6 +838,7 @@ foreach my $test (
                     photo2        => '',
                     photo3        => '',
                     category      => '-- Pick a category --',
+                    gender => undef,
                 },
                 "user's details prefilled"
             );
diff --git a/t/app/controller/report_new_open311.t b/t/app/controller/report_new_open311.t
index b29642abe..22b37fd55 100644
--- a/t/app/controller/report_new_open311.t
+++ b/t/app/controller/report_new_open311.t
@@ -131,6 +131,7 @@ foreach my $test (
         my $new_values = {
             %{ $test->{fields} },     # values added to form
             %{ $test->{changes} },    # changes we expect
+            gender => undef,
         };
         is_deeply $mech->visible_form_values, $new_values,
           "values correctly changed";
diff --git a/templates/web/fixmystreet.com/around/_report_banner.html b/templates/web/fixmystreet.com/around/_report_banner.html
new file mode 100755
index 000000000..fb2134020
--- /dev/null
+++ b/templates/web/fixmystreet.com/around/_report_banner.html
@@ -0,0 +1,10 @@
+[%# Same as parent, with variant green banner text %]
+<h1 class="big-green-banner variant1">
+    Click map to request a fix
+</h1>
+<h1 class="big-green-banner variant0">
+    [% loc( 'Click map to report a problem' ) %]
+</h1>
+<a id="skip-this-step" href="[% url_skip %]" rel="nofollow">
+    [% loc("Can't see the map? <em>Skip this step</em>") %]
+</a>
diff --git a/templates/web/fixmystreet.com/around/intro.html b/templates/web/fixmystreet.com/around/intro.html
new file mode 100644
index 000000000..5b756cd31
--- /dev/null
+++ b/templates/web/fixmystreet.com/around/intro.html
@@ -0,0 +1,9 @@
+[%# Same as parent, with variant heading text %]
+<div class="variant1">
+    <h1>Get things fixed in your local community</h1>
+    <h2>(like blocked pavements, parks and playgrounds in need of maintenance)</h2>
+</div>
+<div class="variant0">
+    <h1>[% loc('Report, view, or discuss local problems') %]</h1>
+    <h2>[% loc('(like graffiti, fly tipping, broken paving slabs, or street lighting)') %]</h2>
+</div>
diff --git a/templates/web/fixmystreet.com/header_extra.html b/templates/web/fixmystreet.com/header_extra.html
index 6d3474c23..f65121445 100644
--- a/templates/web/fixmystreet.com/header_extra.html
+++ b/templates/web/fixmystreet.com/header_extra.html
@@ -3,4 +3,18 @@
 <script src="[% start %][% version('/js/jquery.cookie.min.js') %]"></script>
 <script src="[% start %][% version('/cobrands/fixmystreet.com/js.js') %]"></script>
 
+[%# We are conducting an A/B experiment %]
+<script src="//www.google-analytics.com/cx/api.js?experiment=ZwMlZkAhSbK_tP_QG64QrQ"></script>
+<script>
+var variation = cxApi.chooseVariation(),
+    docElement = document.documentElement,
+    className = docElement.className;
+docElement.className = className + ' variant' + variation;
+</script>
+<style>
+html .variant1 { display: none !important; }
+html.variant1 .variant0 { display: none !important; }
+html.variant1 .variant1 { display: block !important; }
+</style>
+
 [% INCLUDE 'tracking_code.html' %]
diff --git a/templates/web/fixmystreet.com/report/new/extra_name.html b/templates/web/fixmystreet.com/report/new/extra_name.html
new file mode 100644
index 000000000..d1eec5fa3
--- /dev/null
+++ b/templates/web/fixmystreet.com/report/new/extra_name.html
@@ -0,0 +1,42 @@
+[%# Same as parent, with added gender question %]
+
+[% IF (page == 'around' OR page == 'new') AND c.cobrand.ask_gender_question %]
+<p>
+We’re conducting research to make sure our site is good for everyone;
+please help us out by providing your gender. <em>This will not be
+shared with the council or displayed publicly.</em>
+</p>
+
+[% SET gender = report.get_extra_metadata('gender') %]
+<p class="radio-segmented-control" style="font-size: 80%">
+    <input type="radio" name="gender" id="gender_female" value="female"[% ' checked' IF gender == 'female' %]>
+    <label class="inline" for="gender_female">Female</label>
+    <input type="radio" name="gender" id="gender_male" value="male"[% ' checked' IF gender == 'male' %]>
+    <label class="inline" for="gender_male">Male</label>
+    <input type="radio" name="gender" id="gender_other" value="other"[% ' checked' IF gender == 'other' %]>
+    <label class="inline" for="gender_other">Other</label>
+    <input type="radio" name="gender" id="gender_unknown" value="unknown"[% ' checked' IF gender == 'unknown' %]>
+    <label class="inline" for="gender_unknown">Prefer not to say</label>
+</p>
+[% END %]
+
+<input type="hidden" name="variant" value="0">
+
+[% IF extra_name_info %]
+<label for="form_fms_extra_title">Title</label>
+[% IF field_errors.fms_extra_title %]
+    <p class='form-error'>[% field_errors.fms_extra_title %]</p>
+[% END %]
+[% title = '' %]
+[% IF fms_extra_title %][% title = fms_extra_title | upper %]
+[% ELSIF c.user && c.user.title %][% title = c.user.title | upper %][% END %]
+<select class="form-focus-trigger required" id="form_fms_extra_title"
+    name="fms_extra_title">
+    <option></option>
+    <option value="MR"[% ' selected' IF title == 'MR' %]>Mr</option>
+    <option value="MISS"[% ' selected' IF title == 'MISS' %]>Miss</option>
+    <option value="MRS"[% ' selected' IF title == 'MRS' %]>Mrs</option>
+    <option value="MS"[% ' selected' IF title == 'MS' %]>Ms</option>
+    <option value="DR"[% ' selected' IF title == 'DR' %]>Dr</option>
+</select>
+[% END %]
diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index 0f261e4cc..820d5ffb5 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -186,3 +186,56 @@
     }
 }
 
+.variant1 {
+    #site-header {
+        border-top-color: #fff;
+        background: #fad52a;
+    }
+
+    #report-cta {
+        border: none;
+        background-color: #fff;
+        color: mix(#fad52a, #000, 50%);
+        padding: 0.5em 0.5em 0.4em 0.5em;
+    }
+
+    #site-logo {
+        background-image: url(/cobrands/fixmystreet.com/images/friendly-logo-mobile.png);
+
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+            background-image: url(/cobrands/fixmystreet.com/images/friendly-logo-mobile@2.png);
+            background-size: 175px 40px;
+        }
+    }
+
+    &.frontpage {
+        background: #fad52a url(/cobrands/fixmystreet.com/images/friendly-homepage-mobile.jpg) top center no-repeat;
+        background-size: 100%;
+
+        #site-header {
+            border-top-color: #fff;
+            background: transparent;
+        }
+    }
+
+    #front-main #postcodeForm {
+        background: rgba(255,255,255,0.3);
+
+        input#sub {
+            @include background(linear-gradient(#49c0ff, #1091d5));
+
+            &:hover, &:focus {
+                @include background(linear-gradient(darken(#49c0ff, 10%), darken(#1091d5, 10%)));
+            }
+        }
+    }
+
+    #front-main a#geolocate_link {
+        background: transparent;
+        color: inherit;
+    }
+
+    #front-main + .container {
+        background: transparent;
+    }
+}
diff --git a/web/cobrands/fixmystreet.com/images/friendly-homepage-mobile.jpg b/web/cobrands/fixmystreet.com/images/friendly-homepage-mobile.jpg
new file mode 100644
index 000000000..d0560617c
--- /dev/null
+++ b/web/cobrands/fixmystreet.com/images/friendly-homepage-mobile.jpg
diff --git a/web/cobrands/fixmystreet.com/images/friendly-homepage.jpg b/web/cobrands/fixmystreet.com/images/friendly-homepage.jpg
new file mode 100644
index 000000000..9a3a82108
--- /dev/null
+++ b/web/cobrands/fixmystreet.com/images/friendly-homepage.jpg
diff --git a/web/cobrands/fixmystreet.com/images/friendly-logo-home.png b/web/cobrands/fixmystreet.com/images/friendly-logo-home.png
new file mode 100644
index 000000000..a80039895
--- /dev/null
+++ b/web/cobrands/fixmystreet.com/images/friendly-logo-home.png
diff --git a/web/cobrands/fixmystreet.com/images/friendly-logo-home@2.png b/web/cobrands/fixmystreet.com/images/friendly-logo-home@2.png
new file mode 100644
index 000000000..2e4ae4cf7
--- /dev/null
+++ b/web/cobrands/fixmystreet.com/images/friendly-logo-home@2.png
diff --git a/web/cobrands/fixmystreet.com/images/friendly-logo-mobile.png b/web/cobrands/fixmystreet.com/images/friendly-logo-mobile.png
new file mode 100644
index 000000000..ad16a2543
--- /dev/null
+++ b/web/cobrands/fixmystreet.com/images/friendly-logo-mobile.png
diff --git a/web/cobrands/fixmystreet.com/images/friendly-logo-mobile@2.png b/web/cobrands/fixmystreet.com/images/friendly-logo-mobile@2.png
new file mode 100644
index 000000000..3e0eb6423
--- /dev/null
+++ b/web/cobrands/fixmystreet.com/images/friendly-logo-mobile@2.png
diff --git a/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo.png b/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo.png
new file mode 100644
index 000000000..8f5ceec9a
--- /dev/null
+++ b/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo.png
diff --git a/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo@2.png b/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo@2.png
new file mode 100644
index 000000000..487b14ebe
--- /dev/null
+++ b/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo@2.png
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index e8e68553a..985f16ca8 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -322,3 +322,118 @@ body.unresponsive-council {
         background-size: 60px;
     }
 }
+
+.variant1 {
+    body {
+        background: #fad52a url(/cobrands/fixmystreet.com/images/friendly-homepage.jpg) top center no-repeat;
+        background-size: 100%;
+    }
+
+    #site-logo {
+        background-image: url(/cobrands/fixmystreet.com/images/friendly-logo-mobile.png);
+
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+            background-image: url(/cobrands/fixmystreet.com/images/friendly-logo-mobile@2.png);
+            background-size: 175px 40px;
+        }
+    }
+
+    body.frontpage {
+        background-image: url(/cobrands/fixmystreet.com/images/friendly-homepage.jpg);
+
+        #site-logo {
+            background: transparent url(/cobrands/fixmystreet.com/images/friendly-logo-home.png) 0 0 no-repeat;
+
+            @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+                background-image: url(/cobrands/fixmystreet.com/images/friendly-logo-home@2.png);
+                background-size: 300px 60px;
+            }
+        }
+    }
+
+    #front-main {
+        background: rgba(255, 255, 255, 0.3);
+        margin-top: 1em;
+
+        #postcodeForm {
+            background: transparent;
+
+            label {
+                margin: 1em 0;
+            }
+        }
+
+        a#geolocate_link {
+            height: auto;
+            padding: 0.5em 0 0.5em 1.5em;
+            margin-top: 0.5em;
+            font-weight: bold;
+            font-size: 1em;
+            background-size: 16px;
+            background-position: 0% 50%;
+        }
+    }
+
+    body.twothirdswidthpage #front-main,
+    body.fullwidthpage #front-main {
+        padding: 3em 2em 6em 2em;
+    }
+
+    #site-header {
+        background: transparent;
+    }
+
+    #main-nav {
+        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
+    }
+
+    .nav-menu--main {
+        span {
+            color: inherit;
+        }
+
+        a {
+            &:hover,
+            &:focus {
+                background: rgba(255, 255, 255, 0.2);
+            }
+        }
+
+        a.report-a-problem-btn {
+            background-color: #fff;
+            color: mix(#fad52a, #000, 50%);
+            padding: 0.25em 0.5em;
+            text-shadow: none;
+        }
+    }
+
+    .nav-wrapper .nav-wrapper-2 {
+        border-top-color: #fff;
+        border-image: none;
+    }
+
+    body.mappage .nav-wrapper .nav-wrapper-2 {
+        background: darken(#fad52a, 5%);
+    }
+
+    body.twothirdswidthpage .container .content footer .tablewrapper,
+    body.fullwidthpage .container .content footer .tablewrapper,
+    #footer-nav .tablewrapper {
+        background: #fad52a;
+    }
+
+    .nav-menu--mysoc {
+        background: #fff;
+    }
+
+    #mysoc-logo {
+        background-image: url(/cobrands/fixmystreet.com/images/friendly-mysoc-logo.png);
+        background-position: 50% 0%;
+        background-size: 90px auto;
+
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+            background-image: url(/cobrands/fixmystreet.com/images/friendly-mysoc-logo@2.png);
+            background-size: 90px auto;
+        }
+    }
+}
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 21701ce5f..d9f2c226a 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -80,6 +80,10 @@ $(function(){
 
     var cobrand = $('meta[name="cobrand"]').attr('content');
 
+    if (typeof variation !== undefined && variation === 1) {
+        $('input[name=variant]').val(1);
+    }
+
     // Deal with switching between mobile and desktop versions on resize
     var last_type;
     $(window).resize(function(){
@@ -130,7 +134,9 @@ $(function(){
                 var banner_text = translation_strings.report_problem_heading;
                 if (cobrand !== 'oxfordshire') {
                     $('#site-header').show();
-                    banner_text = translation_strings.report_problem_heading;
+                }
+                if (typeof variation !== undefined && variation === 1) {
+                    banner_text = 'Click map to request a fix';
                 }
                 $('.big-green-banner')
                     .removeClass('mobile-map-banner')
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index fa6a34a7a..a833bb7cf 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1741,7 +1741,8 @@ table.nicetable {
   display: flex; // fancy full-width buttons for browsers that support flexbox
 
   input {
-    display: none;
+    position: absolute;
+    left: -999px;
   }
 
   label {