[UK] Area summary dashboards with plug for FMS Pro

Fixes mysociety/fixmystreet-commercial#943.

8 files changed, 205 insertions, 4 deletions

diff --git a/templates/web/fixmystreet.com/reports/summary.html b/templates/web/fixmystreet.com/reports/summary.html
index 11ee5df28..d796f9b64 100644
--- a/templates/web/fixmystreet.com/reports/summary.html
+++ b/templates/web/fixmystreet.com/reports/summary.html
@@ -9,11 +9,60 @@
 [% INCLUDE 'header.html', title = loc('Dashboard'), bodyclass => 'dashboard fullwidthpage' %]
 
 <div class="dashboard-header">
-    <h1>FMS [% loc('Dashboard') %]
-    [% IF body %] – [% body.name %] [% END %]
-    </h1>
+    <h1>FMS [% loc('Dashboard') %] – [% body.name %]</h1>
 </div>
 
+[% IF body.send_method == 'Email' OR body.send_method == '' %]
+<div class="dashboard-row">
+    <div class="dashboard-item dashboard-item--12">
+        <div class="healthcheck-unit healthcheck-unit--good">
+            <h3>Email delivery</h3>
+            <p>
+                Along with most UK councils, [% body.name %] receives reports
+                from FixMyStreet.com via email; you can see a full list of
+                the email addresses we send reports to at the bottom of this page.
+            </p>
+        </div>
+        <div class="healthcheck-unit healthcheck-unit--bad">
+            <h3>Integration with back end systems</h3>
+            <p>
+                [% body.name %] is not currently taking advantage of
+                <a href="https://www.fixmystreet.com/pro">FixMyStreet Pro</a>,
+                to create efficiencies and make savings. By submitting reports
+                directly into your asset management system or CRM, FixMyStreet
+                Pro can reduce duplication and re-keying costs.
+            </p>
+            <p>
+                The <a href="https://www.fixmystreet.com/pro">FixMyStreet Pro</a>
+                integration will create a two way flow of information and
+                significantly improve the customer journey whilst encouraging
+                citizens to engage with you digitally.
+            </p>
+            <div class="healthcheck-cta-trio">
+                <div class="dashboard-item dashboard-item--4">
+                    <h3 style="margin-top: 0;">Join one of our regular&nbsp;webinars</h3>
+                    <a href="https://www.fixmystreet.com/pro/webinar-schedule/" class="btn">
+                        Show webinar schedule
+                    </a>
+                </div>
+                <div class="dashboard-item dashboard-item--4">
+                    <h3 style="margin-top: 0;">Schedule a<br>one-to-one demo</h3>
+                    <a href="https://www.fixmystreet.com/pro/contact/" class="btn">
+                        Request a callback
+                    </a>
+                </div>
+                <div class="dashboard-item dashboard-item--4">
+                    <h3 style="margin-top: 0;">See FixMyStreet Pro for&nbsp;yourself</h3>
+                    <a href="https://demo.fixmystreet.com/" class="btn">
+                        Try our live demo
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+[% END %]
+
 <form method="GET">
     <div class="filters">
         <p>
@@ -122,6 +171,26 @@
     </div>
 </div>
 
+[% IF body.send_method == 'Email' OR body.send_method == '' %]
+<div class="dashboard-row dashboard-row--yellow">
+    <div class="dashboard-item dashboard-item--12 dashboard-fms-case-studies">
+        <h2 style="margin-bottom: 1em">How FixMyStreet Pro helps other councils</h2>
+        <div>
+            <a href="https://www.fixmystreet.com/pro/take-a-tour/oxfordshire/">
+                <small>Case study</small>
+                <h3>East Herts District Council</h3>
+                <p>FixMyStreet Pro plays beautifully with Yotta’s Mayrise system, with two-way integration extending the power of both services.</p>
+            </a>
+            <a href="https://www.fixmystreet.com/pro/take-a-tour/bristol/">
+                <small>Case study</small>
+                <h3>Bristol City Council</h3>
+                <p>Bristol have put FixMyStreet at the heart of their anti-litter campaign, and are involving many citizens in their work.</p>
+            </a>
+        </div>
+    </div>
+</div>
+[% END %]
+
 <div class="dashboard-row">
     <div class="dashboard-item dashboard-item--12">
         <h2 class="dashboard-subheading">[% tprintf( loc('Where we send %s reports'), body.name ) %]</h2>
@@ -171,4 +240,25 @@
     </div>
 </div>
 
-[% INCLUDE 'footer.html' pagefooter = 'yes' %]
+<div class="dashboard-row dashboard-row--yellow" style="text-align: center; margin-bottom: -1em;">
+    <div class="dashboard-item dashboard-item--4">
+        <h3 style="margin-top: 0;">Join one of our regular&nbsp;webinars</h3>
+        <a href="https://www.fixmystreet.com/pro/webinar-schedule/" class="btn">
+            Show webinar schedule
+        </a>
+    </div>
+    <div class="dashboard-item dashboard-item--4">
+        <h3 style="margin-top: 0;">Schedule a one-to-one demo</h3>
+        <a href="https://www.fixmystreet.com/pro/contact/" class="btn">
+            Request a callback
+        </a>
+    </div>
+    <div class="dashboard-item dashboard-item--4">
+        <h3 style="margin-top: 0;">See FixMyStreet Pro for&nbsp;yourself</h3>
+        <a href="https://demo.fixmystreet.com/" class="btn">
+            Try our live demo
+        </a>
+    </div>
+</div>
+
+[% INCLUDE 'footer.html' %]
diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index b78d5ce5b..16cefb666 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -387,3 +387,74 @@ input.postcode-form-test__postcode {
         }
     }
 }
+
+.healthcheck-unit {
+    padding-left: 50px;
+    @include svg-background-image('/cobrands/fixmystreet.com/images/healthcheck-good');
+    background-size: 32px;
+    background-repeat: no-repeat;
+    background-position: $left 0;
+
+    & > :first-child {
+        margin-top: 0;
+    }
+
+    & > :last-child {
+        margin-bottom: 0;
+    }
+
+    & + & {
+        margin-top: 1em;
+    }
+}
+
+.healthcheck-unit--bad {
+    @include svg-background-image('/cobrands/fixmystreet.com/images/healthcheck-bad');
+}
+
+.healthcheck-cta-trio {
+    margin: -1em;
+
+    h3 {
+        font-size: 1em;
+        font-weight: bold;
+    }
+}
+
+.dashboard-row--yellow {
+    border-top: $primary solid 0.75em;
+    background-color: mix(#fff, $primary, 60%);
+}
+
+.dashboard-fms-case-studies {
+    & > div {
+        a {
+            display: block;
+            box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
+            padding: 1.5em;
+            background-color: #fff;
+            margin-bottom: 1em;
+            border-radius: 3px;
+
+            & > :first-child {
+                margin-top: 0;
+            }
+
+            & > :last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        small {
+            display: inline-block; // prevent inheritance of underline from parent
+            text-transform: uppercase;
+            color: #767676;
+            font-weight: bold;
+            font-style: normal;
+        }
+
+        h3 {
+            margin-top: 0.8em;
+        }
+    }
+}
diff --git a/web/cobrands/fixmystreet.com/images/healthcheck-bad.png b/web/cobrands/fixmystreet.com/images/healthcheck-bad.png
new file mode 100644
index 000000000..b8d8d2d35
--- /dev/null
+++ b/web/cobrands/fixmystreet.com/images/healthcheck-bad.png
diff --git a/web/cobrands/fixmystreet.com/images/healthcheck-bad.svg b/web/cobrands/fixmystreet.com/images/healthcheck-bad.svg
new file mode 100644
index 000000000..1722d5ecc
--- /dev/null
+++ b/web/cobrands/fixmystreet.com/images/healthcheck-bad.svg
@@ -0,0 +1 @@
+<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#F4A140" cx="32" cy="32" r="32"/><path fill="#FFF" d="M39.8 19.3l5 5-20.6 20.4-5-5z"/><path fill="#FFF" d="M24.2 19.3l20.5 20.5-5 5-20.4-20.6z"/></g></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet.com/images/healthcheck-good.png b/web/cobrands/fixmystreet.com/images/healthcheck-good.png
new file mode 100644
index 000000000..4ead6ce9a
--- /dev/null
+++ b/web/cobrands/fixmystreet.com/images/healthcheck-good.png
diff --git a/web/cobrands/fixmystreet.com/images/healthcheck-good.svg b/web/cobrands/fixmystreet.com/images/healthcheck-good.svg
new file mode 100644
index 000000000..3343297c9
--- /dev/null
+++ b/web/cobrands/fixmystreet.com/images/healthcheck-good.svg
@@ -0,0 +1 @@
+<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#62B356" cx="32" cy="32" r="32"/><path fill="#FFF" fill-rule="nonzero" d="M43 20L28 35l-7-7-5 5 12 12 20-20z"/></g></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index 9c7f575a2..afbc426c0 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -352,3 +352,38 @@ footer {
 .footer-marketing {
   color: #ccc;
 }
+
+.healthcheck-unit {
+    padding-left: 94px;
+    background-size: 64px;
+
+    & + & {
+        margin-top: 2em;
+    }
+}
+
+.healthcheck-cta-trio {
+    @include clearfix();
+    margin: 0 -2em;
+    text-align: center;
+
+    .dashboard-item {
+        padding-top: 1em;
+        padding-bottom: 1em;
+    }
+}
+
+.dashboard-fms-case-studies {
+    & > div {
+        @include flex-container();
+        @include flex-wrap(wrap);
+        @include justify-content(space-between);
+
+        a {
+            @include box-sizing(border-box);
+            display: block;
+            width: 48%;
+            margin-bottom: 0;
+        }
+    }
+}
diff --git a/web/cobrands/sass/_dashboard.scss b/web/cobrands/sass/_dashboard.scss
index 9f2f36720..3c4eb969e 100644
--- a/web/cobrands/sass/_dashboard.scss
+++ b/web/cobrands/sass/_dashboard.scss
@@ -43,6 +43,9 @@
     .dashboard-item--6 {
         width: 50%;
     }
+    .dashboard-item--4 {
+        width: 33.3%;
+    }
 }
 
 .dashboard-subheading {