Add fixmystreet.com reporting form A/B tests.

Testing two things:
* Putting the email box above the Yes/No, or repeating it inside.
* Showing the contents of the Yes/No sections at first, or not.

9 files changed, 247 insertions, 107 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Report/New.pm b/perllib/FixMyStreet/App/Controller/Report/New.pm
index 1e9f83aec..c885e1a8a 100644
--- a/perllib/FixMyStreet/App/Controller/Report/New.pm
+++ b/perllib/FixMyStreet/App/Controller/Report/New.pm
@@ -719,7 +719,8 @@ sub process_user : Private {
 
     # Extract all the params to a hash to make them easier to work with
     my %params = map { $_ => scalar $c->req->param($_) }
-      ( 'email', 'name', 'phone', 'password_register', 'fms_extra_title' );
+      ( 'email', 'name', 'phone', 'password_register', 'fms_extra_title',
+        'email_y', 'email_n' );
 
     my $user_title = Utils::trim_text( $params{fms_extra_title} );
 
@@ -744,6 +745,9 @@ sub process_user : Private {
 
     # cleanup the email address
     my $email = $params{email} ? lc $params{email} : '';
+    my $email_y = $params{email_y} ? lc $params{email_y} : '';
+    my $email_n = $params{email_n} ? lc $params{email_n} : '';
+    $email = $email || $email_y || $email_n;
     $email =~ s{\s+}{}g;
 
     $report->user( $c->model('DB::User')->find_or_new( { email => $email } ) )
diff --git a/perllib/FixMyStreet/TestMech.pm b/perllib/FixMyStreet/TestMech.pm
index be8f004a5..5b3cc39a7 100644
--- a/perllib/FixMyStreet/TestMech.pm
+++ b/perllib/FixMyStreet/TestMech.pm
@@ -238,7 +238,10 @@ sub page_errors {
         process 'div.form-error, p.form-error, p.error, ul.error li', 'errors[]', 'TEXT';
     }
     ->scrape( $mech->response );
-    return $result->{errors} || [];
+    my $err = $result->{errors} || [];
+    my %seen = ();
+    $err = [ grep { not $seen{$_}++ } @$err ];
+    return $err;
 }
 
 =head2 import_errors
@@ -479,6 +482,10 @@ sub visible_form_values {
 
     my %params = map { $_ => $form->value($_) } @visible_field_names;
 
+    # Ignore content experiment fields
+    delete $params{email_y};
+    delete $params{email_n};
+
     return \%params;
 }
 
diff --git a/templates/web/fixmystreet.com/header_extra.html b/templates/web/fixmystreet.com/header_extra.html
index f31d846f3..38208277c 100644
--- a/templates/web/fixmystreet.com/header_extra.html
+++ b/templates/web/fixmystreet.com/header_extra.html
@@ -1,2 +1,36 @@
 <script src="[% start %][% version('/js/jquery.cookie.min.js') %]" type="text/javascript" charset="utf-8"></script>
+
+[%# We are conducting an A/B experiment on people not logged in, on the new report form %]
+[% IF ( NOT c.user_exists ) AND ( page == 'around' OR page == 'new' ) %]
+<script src="//www.google-analytics.com/cx/api.js?experiment=Ln84qfBuQc6X51-kLqy5YA"></script>
+<script>
+var variation = cxApi.chooseVariation(),
+    docElement = document.documentElement,
+    className = docElement.className;
+docElement.className = className + ' ' + 'variant' + variation;
+
+if (variation == 2 || variation == 3) {
+    $(function(){
+        $('h5.variant-click').click(function(){
+            $(this).next().show();
+        });
+    [%- IF field_errors AND field_errors.size %]
+        $('h5.variant-click').click();
+    [%- END %]
+    });
+}
+</script>
+<style>
+html.variant0 .variant1, html.variant0 .variant2, html.variant0 .variant3 { display: none; }
+html.variant0 .variant0 { display: block; }
+html.variant1 .variant0, html.variant1 .variant2, html.variant1 .variant3 { display: none; }
+html.variant1 .variant1 { display: block; }
+html.variant2 .variant0, html.variant2 .variant1, html.variant2 .variant3 { display: none; }
+html.variant2 .variant2 { display: block; }
+html.variant3 .variant0, html.variant3 .variant1, html.variant3 .variant2 { display: none; }
+html.variant3 .variant3 { display: block; }
+html.variant2 .variant-click, html.variant3 .variant-click { cursor: pointer; }
+</style>
+[% END %]
+
 [% INCLUDE 'tracking_code.html' %]
diff --git a/templates/web/fixmystreet.com/report/new/form_user_loggedout.html b/templates/web/fixmystreet.com/report/new/form_user_loggedout.html
new file mode 100644
index 000000000..bfe4e9f14
--- /dev/null
+++ b/templates/web/fixmystreet.com/report/new/form_user_loggedout.html
@@ -0,0 +1,91 @@
+<div class="variant0 variant2">
+<label for="form_email">[% loc('Your email') %]</label>
+[% IF field_errors.email %]
+    <p class='form-error'>[% field_errors.email %]</p>
+[% END %]
+<input type="email" value="[% report.user.email | html %]" name="email" id="form_email" placeholder="[% loc('Please enter your email address') %]" required>
+</div>
+
+<div id="form_sign_in">
+    <h3>[% loc("Now to submit your report&hellip;") %]</h3>
+    <h2>[% loc("Do you have a FixMyStreet password?") %]</h2>
+
+    <div id="form_sign_in_yes" class="form-box">
+
+        <h5 class="variant-click">[% loc('<strong>Yes</strong> I have a password') %]</h5>
+
+        <div class="variant0 variant1">
+            <div class="variant1 variant3">
+                <label for="form_email_y">[% loc('Your email') %]</label>
+                [% IF field_errors.email %]
+                    <p class='form-error'>[% field_errors.email %]</p>
+                [% END %]
+                <input type="email" value="[% report.user.email | html %]" name="email_y" id="form_email_y" placeholder="[% loc('Please enter your email address') %]">
+            </div>
+
+            <label class="hidden-js n" for="password_sign_in">[% loc('Yes I have a password') %]</label>
+            [% IF field_errors.password %]
+                <p class='form-error'>[% field_errors.password %]</p>
+            [% END %]
+            <div class="form-txt-submit-box">
+                <input type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value="">
+                <input class="green-btn" type="submit" id="submit_sign_in" name="submit_sign_in" value="[% loc('Submit') %]">
+            </div>
+
+            <div class="checkbox-group">
+                <input type="checkbox" id="remember_me" name="remember_me" value='1'[% ' checked' IF remember_me %]>
+                <label class="n inline" for="remember_me">[% loc('Keep me signed in on this computer') %]</label>
+            </div>
+
+            <div class="general-sidebar-notes" id="forgotten-pw">
+                <p class="dark">[% loc('Forgotten your password?') %]</p>
+                <p>[% loc('Confirm by email below, providing a new password at that point. When you confirm, your password will be updated.') %]</p>
+            </div>
+
+        </div>
+    </div>
+
+    <div id="form_sign_in_no" class="form-box">
+        <h5 class="variant-click">[% loc('<strong>No</strong> Let me confirm my report by email') %]</h5>
+
+        <div class="variant0 variant1">
+            <div class="variant1 variant3">
+                <label for="form_email_n">[% loc('Your email') %]</label>
+                [% IF field_errors.email %]
+                    <p class='form-error'>[% field_errors.email %]</p>
+                [% END %]
+                <input type="email" class="form-focus-trigger" value="[% report.user.email | html %]" name="email_n" id="form_email_n" placeholder="[% loc('Please enter your email address') %]">
+            </div>
+
+            [% INCLUDE 'report/new/extra_name.html' %]
+
+            <label for="form_name">[% loc('Name') %]</label>
+            [% IF field_errors.name %]
+                <p class='form-error'>[% field_errors.name %]</p>
+            [% END %]
+
+            <input type="text" class="form-focus-trigger validName" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]">
+
+            [%# if there is nothing in the name field then set check box as default on form %]
+            <div class="checkbox-group">
+                <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1"[% ' checked' IF report.anonymous==0 OR (c.cobrand.default_show_name AND report.anonymous=='') %]>
+                <label class="inline" for="form_may_show_name">[% loc('Show my name publicly') %]</label>
+            </div>
+
+            <div class="general-sidebar-notes form-focus-hidden">
+                <p class="dark">[% loc('We never show your email address or phone number.') %]</p>
+                <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</p>
+            </div>
+
+            <label class="form-focus-hidden" for="form_phone">[% loc('Phone number (optional)') %]</label>
+            <input class="form-focus-hidden" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]">
+
+            <label class="form-focus-hidden" for="password_register">[% loc('Password (optional)') %]</label>
+
+            <div class="form-txt-submit-box form-focus-hidden">
+                <input type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
+                <input class="green-btn" type="submit" id="submit_register" name="submit_register" value="[% loc('Submit') %]">
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/templates/web/fixmystreet/report/new/fill_in_details_form.html b/templates/web/fixmystreet/report/new/fill_in_details_form.html
index e2e091460..9f25145a7 100644
--- a/templates/web/fixmystreet/report/new/fill_in_details_form.html
+++ b/templates/web/fixmystreet/report/new/fill_in_details_form.html
@@ -110,110 +110,9 @@
             [% END %]
 
             [% IF c.user_exists %]
-                <div class="form-box">
-
-                    <label for="form_email">[% loc('Your email') %]</label>
-                    <input disabled type="text" value="[% c.user.email | html %]">
-
-                    [% INCLUDE 'report/new/extra_name.html' %]
-
-                    <label for="form_name">[% loc('Name') %]</label>
-                    [% IF field_errors.name %]
-                        <p class='form-error'>[% field_errors.name %]</p>
-                    [% END %]
-                    <input type="text" class="validName" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]">
-
-                    [%# if there is nothing in the name field then set check box as default on form %]
-                    <div class="checkbox-group">
-                        <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1"[% ' checked' IF report.anonymous==0 OR (c.cobrand.default_show_name AND report.anonymous=='') %]>
-                        <label class="inline" for="form_may_show_name">[% loc('Show my name publicly') %] </label>
-                    </div>
-
-                        [% IF c.cobrand.moniker != 'fixmybarangay' || c.user.from_body %]
-                        <div class="general-sidebar-notes">
-                            <p>[% loc('We never show your email address or phone number.') %]</p>
-                        </div>
-                        [% END %]
-
-                    <label for="form_phone">[% loc('Phone number (optional)') %]</label>
-                    <input class="" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]">
-            
-                    <div class="form-txt-submit-box">
-                        <input class="green-btn" type="submit" id="submit_register" name="submit_register" value="[% loc('Submit') %]">
-                    </div>
-                </div>
+                [% PROCESS "report/new/form_user_loggedin.html" %]
             [% ELSE %]
-
-                <label for="form_email">[% loc('Your email') %]</label>
-                [% IF field_errors.email %]
-                    <p class='form-error'>[% field_errors.email %]</p>
-                [% END %]
-                <input type="email" value="[% report.user.email | html %]" name="email" id="form_email" placeholder="[% loc('Please enter your email address') %]" required>
-
-                <div id="form_sign_in">
-                    <h3>[% loc("Now to submit your report&hellip;") %]</h3>
-                    <h2>[% loc("Do you have a FixMyStreet password?") %]</h2>
-
-                    <div id="form_sign_in_yes" class="form-box">
-
-                        <h5>[% loc('<strong>Yes</strong> I have a password') %]</h5>
-
-                        <label class="hidden-js n" for="password_sign_in">[% loc('Yes I have a password') %]</label>
-                        <div class="form-txt-submit-box">
-                            [% IF field_errors.password %]
-                                <p class='form-error'>[% field_errors.password %]</p>
-                            [% END %]
-                            <input type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value="">
-                            <input class="green-btn" type="submit" id="submit_sign_in" name="submit_sign_in" value="[% loc('Submit') %]">
-                        </div>
-                        
-                        <div class="checkbox-group">
-                            <input type="checkbox" id="remember_me" name="remember_me" value='1'[% ' checked' IF remember_me %]>
-                            <label class="n inline" for="remember_me">[% loc('Keep me signed in on this computer') %]</label>
-                        </div>
-
-                        <div class="general-sidebar-notes" id="forgotten-pw">
-                            <p class="dark">[% loc('Forgotten your password?') %]</p>
-                            <p>[% loc('Confirm by email below, providing a new password at that point. When you confirm, your password will be updated.') %]</p>
-                        </div>
-
-                    </div>
-
-                    <div id="form_sign_in_no" class="form-box">
-                        <h5>[% loc('<strong>No</strong> Let me confirm my report by email') %]</h5>
-
-                        [% INCLUDE 'report/new/extra_name.html' %]
-
-                        <label for="form_name">[% loc('Name') %]</label>
-                        [% IF field_errors.name %]
-                            <p class='form-error'>[% field_errors.name %]</p>
-                        [% END %]
-
-                        <input type="text" class="form-focus-trigger validName" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]">
-
-                        [%# if there is nothing in the name field then set check box as default on form %]
-                        <div class="checkbox-group">
-                            <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1"[% ' checked' IF report.anonymous==0 OR (c.cobrand.default_show_name AND report.anonymous=='') %]>
-                            <label class="inline" for="form_may_show_name">[% loc('Show my name publicly') %]</label>
-                        </div>
-
-                        <div class="general-sidebar-notes form-focus-hidden">
-                            <p class="dark">[% loc('We never show your email address or phone number.') %]</p>
-                            <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</p>
-                        </div>
-
-                        <label class="form-focus-hidden" for="form_phone">[% loc('Phone number (optional)') %]</label>
-                        <input class="form-focus-hidden" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]">
-                
-                        <label class="form-focus-hidden" for="password_register">[% loc('Password (optional)') %]</label>
-
-                        <div class="form-txt-submit-box form-focus-hidden">
-                            <input type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
-                            <input class="green-btn" type="submit" id="submit_register" name="submit_register" value="[% loc('Submit') %]">
-                        </div>
-                    </div>
-                </div>
-
+                [% PROCESS "report/new/form_user_loggedout.html" %]
             [% END %]
         </div>
     </fieldset>
diff --git a/templates/web/fixmystreet/report/new/form_user_loggedin.html b/templates/web/fixmystreet/report/new/form_user_loggedin.html
new file mode 100644
index 000000000..8cdf98e3d
--- /dev/null
+++ b/templates/web/fixmystreet/report/new/form_user_loggedin.html
@@ -0,0 +1,32 @@
+<div class="form-box">
+
+    <label for="form_email">[% loc('Your email') %]</label>
+    <input disabled type="text" value="[% c.user.email | html %]">
+
+    [% INCLUDE 'report/new/extra_name.html' %]
+
+    <label for="form_name">[% loc('Name') %]</label>
+    [% IF field_errors.name %]
+        <p class='form-error'>[% field_errors.name %]</p>
+    [% END %]
+    <input type="text" class="validName" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]">
+
+    [%# if there is nothing in the name field then set check box as default on form %]
+    <div class="checkbox-group">
+        <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1"[% ' checked' IF report.anonymous==0 OR (c.cobrand.default_show_name AND report.anonymous=='') %]>
+        <label class="inline" for="form_may_show_name">[% loc('Show my name publicly') %] </label>
+    </div>
+
+        [% IF c.cobrand.moniker != 'fixmybarangay' || c.user.from_body %]
+        <div class="general-sidebar-notes">
+            <p>[% loc('We never show your email address or phone number.') %]</p>
+        </div>
+        [% END %]
+
+    <label for="form_phone">[% loc('Phone number (optional)') %]</label>
+    <input class="" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]">
+
+    <div class="form-txt-submit-box">
+        <input class="green-btn" type="submit" id="submit_register" name="submit_register" value="[% loc('Submit') %]">
+    </div>
+</div>
diff --git a/templates/web/fixmystreet/report/new/form_user_loggedout.html b/templates/web/fixmystreet/report/new/form_user_loggedout.html
new file mode 100644
index 000000000..a35beca24
--- /dev/null
+++ b/templates/web/fixmystreet/report/new/form_user_loggedout.html
@@ -0,0 +1,69 @@
+<label for="form_email">[% loc('Your email') %]</label>
+[% IF field_errors.email %]
+    <p class='form-error'>[% field_errors.email %]</p>
+[% END %]
+<input type="email" value="[% report.user.email | html %]" name="email" id="form_email" placeholder="[% loc('Please enter your email address') %]" required>
+
+<div id="form_sign_in">
+    <h3>[% loc("Now to submit your report&hellip;") %]</h3>
+    <h2>[% loc("Do you have a FixMyStreet password?") %]</h2>
+
+    <div id="form_sign_in_yes" class="form-box">
+
+        <h5>[% loc('<strong>Yes</strong> I have a password') %]</h5>
+
+        <label class="hidden-js n" for="password_sign_in">[% loc('Yes I have a password') %]</label>
+        [% IF field_errors.password %]
+            <p class='form-error'>[% field_errors.password %]</p>
+        [% END %]
+        <div class="form-txt-submit-box">
+            <input type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value="">
+            <input class="green-btn" type="submit" id="submit_sign_in" name="submit_sign_in" value="[% loc('Submit') %]">
+        </div>
+
+        <div class="checkbox-group">
+            <input type="checkbox" id="remember_me" name="remember_me" value='1'[% ' checked' IF remember_me %]>
+            <label class="n inline" for="remember_me">[% loc('Keep me signed in on this computer') %]</label>
+        </div>
+
+        <div class="general-sidebar-notes" id="forgotten-pw">
+            <p class="dark">[% loc('Forgotten your password?') %]</p>
+            <p>[% loc('Confirm by email below, providing a new password at that point. When you confirm, your password will be updated.') %]</p>
+        </div>
+
+    </div>
+
+    <div id="form_sign_in_no" class="form-box">
+        <h5>[% loc('<strong>No</strong> Let me confirm my report by email') %]</h5>
+
+        [% INCLUDE 'report/new/extra_name.html' %]
+
+        <label for="form_name">[% loc('Name') %]</label>
+        [% IF field_errors.name %]
+            <p class='form-error'>[% field_errors.name %]</p>
+        [% END %]
+
+        <input type="text" class="form-focus-trigger validName" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]">
+
+        [%# if there is nothing in the name field then set check box as default on form %]
+        <div class="checkbox-group">
+            <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1"[% ' checked' IF report.anonymous==0 OR (c.cobrand.default_show_name AND report.anonymous=='') %]>
+            <label class="inline" for="form_may_show_name">[% loc('Show my name publicly') %]</label>
+        </div>
+
+        <div class="general-sidebar-notes form-focus-hidden">
+            <p class="dark">[% loc('We never show your email address or phone number.') %]</p>
+            <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</p>
+        </div>
+
+        <label class="form-focus-hidden" for="form_phone">[% loc('Phone number (optional)') %]</label>
+        <input class="form-focus-hidden" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]">
+
+        <label class="form-focus-hidden" for="password_register">[% loc('Password (optional)') %]</label>
+
+        <div class="form-txt-submit-box form-focus-hidden">
+            <input type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
+            <input class="green-btn" type="submit" id="submit_register" name="submit_register" value="[% loc('Submit') %]">
+        </div>
+    </div>
+</div>
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index df44a3af2..0faafd20d 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -322,7 +322,7 @@ label{
   margin: 0 -2em 0.25em -2em;
   background:#eeeeee;
   padding:1em 2em 1em 2em;
-  >input[type=text] {
+  >input[type=text], input[type=email] {
     margin-bottom:1em;
   }
   .title {
@@ -351,7 +351,7 @@ label{
 // Prevent grey displaying oddly by giving it a width, and stop odd left margin issue
 .ie7 .form-box {
     width: 100%;
-    > input[type=text] {
+    > input[type=text], input[type=email] {
         margin-left: 2em;
     }
 }
diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js
index 7d75c8b65..158ba8bb4 100644
--- a/web/js/fixmystreet.js
+++ b/web/js/fixmystreet.js
@@ -104,6 +104,8 @@ $(function(){
         $('#form_first_name').removeClass();
         $('#form_last_name').removeClass();
         $('#form_fms_extra_title').removeClass();
+        $('#form_email_y').addClass('required');
+        $('#form_email_n').removeClass();
     } );
 
     $('#submit_register').click( function(e) {
@@ -115,6 +117,8 @@ $(function(){
         $('#form_first_name').addClass('required');
         $('#form_last_name').addClass('required');
         $('#form_fms_extra_title').addClass('required');
+        $('#form_email_y').removeClass();
+        $('#form_email_n').addClass('required');
     } );
 
     $('#problem_submit > input[type="submit"]').click( function(e) {