[fixmystreet.com] Experiment, no pins by default.

This changes the default flow to show no pins and a message about
reporting, with the second tab displaying existing problems (and showing
map pins). Those existing problems are the ones that would currently be
on "problems on the map" followed by those currently on "problems
nearby".

3 files changed, 83 insertions, 0 deletions

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..bd47a1b54
--- /dev/null
+++ b/templates/web/fixmystreet.com/around/_report_banner.html
@@ -0,0 +1,16 @@
+[%# Identical to parent, just with variant0s %]
+
+<h1 class="big-green-banner variant0">
+    [% loc( 'Click map to report a problem' ) %]
+    [% IF c.cobrand.moniker == 'bromley' %]
+        <span>Yellow pins show existing reports</span>
+    [% END %]
+</h1>
+<p id="skip-this-step" class="variant0">
+    [%
+        tprintf(
+            loc("Can't see the map? <a href='%s' rel='nofollow'>Skip this step</a>"),
+            url_skip
+        )
+    %]
+</p>
diff --git a/templates/web/fixmystreet.com/around/tabbed_lists.html b/templates/web/fixmystreet.com/around/tabbed_lists.html
new file mode 100644
index 000000000..6a3cdf8a9
--- /dev/null
+++ b/templates/web/fixmystreet.com/around/tabbed_lists.html
@@ -0,0 +1,46 @@
+<menu id="problems-nav" class="tab-nav">
+    <ul class="variant0">
+        <li><a href="#current_tab">[% loc('Problems on the map') %]</a></li>
+        <li><a href="#current_near_tab">[% loc( 'Problems nearby' ) %]</a></li>
+    </ul>
+    <ul class="variant1">
+        <li><a href="#reporting">[% loc('Report a problem') %]</a></li>
+        <li><a href="#current_near_tab">[% loc( 'Problems near here' ) %]</a></li>
+    </ul>
+</menu>
+
+<div class="variant1">
+<div id="reporting" class="tab">
+    <h1>[% loc( 'Click the map to<br/>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>
+
+    <p>Don’t worry if it’s not in precisely the right place,<br/>
+    you can move the pin afterwards.</p>
+</div>
+</div>
+
+<div class="variant0">
+<div id="current_tab" class="tab">
+    <ul id="current" class="issue-list-a">
+        [% INCLUDE "around/on_map_list_items.html" %]
+    </ul>
+</div>
+</div>
+
+<div id="current_near_tab" class="tab">
+    <ul id="current_near" class="issue-list-a">
+        [% INCLUDE "around/around_map_list_items.html" %]
+    </ul>
+</div>
+
+<script>
+if (typeof variation !== 'undefined' && variation == 1) {
+    fixmystreet.initial_hide_pins = true;
+    $(function(){
+        $('#current').insertBefore('#current_near');
+    });
+}
+</script>
diff --git a/templates/web/fixmystreet.com/header_extra.html b/templates/web/fixmystreet.com/header_extra.html
index 27ffc12a1..65f88be14 100644
--- a/templates/web/fixmystreet.com/header_extra.html
+++ b/templates/web/fixmystreet.com/header_extra.html
@@ -1,3 +1,24 @@
 <script src="[% start %][% version('/js/jquery.cookie.min.js') %]" type="text/javascript" charset="utf-8"></script>
 
+[%# We are conducting an A/B experiment on the first step of reporting process %]
+[% IF page == 'around' %]
+<script src="//www.google-analytics.com/cx/api.js?experiment=1gdSSsSMQgy99AsCPeBalg"></script>
+<script>
+if (window.matchMedia) {
+    var desktop = window.matchMedia("(min-width: 48em)").matches;
+    if (desktop) {
+        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>
+[% END %]
+
 [% INCLUDE 'tracking_code.html' %]