[Waste] Add calendar help page.

mysociety · Aug 1, 2024 · 9dd2453 · 9dd2453
1 parent 6bc9246
commit 9dd2453
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 9 deletions.
diff --git a/perllib/FixMyStreet/App/Controller/Waste.pm b/perllib/FixMyStreet/App/Controller/Waste.pm
@@ -742,7 +742,13 @@ sub bin_day_deny : Private {
     $c->detach('/page_error_403_access_denied', [ $msg ]);
 }
 
-sub calendar : Chained('property') : PathPart('calendar.ics') : Args(0) {
+sub calendar : Chained('property') : Args(0) {
+    my ($self, $c) = @_;
+
+    $c->forward('/about/page', ['waste-calendar']);
+}
+
+sub calendar_ics : Chained('property') : PathPart('calendar.ics') : Args(0) {
     my ($self, $c) = @_;
     $c->res->header(Content_Type => 'text/calendar');
     require Data::ICal::RFC7986;

diff --git a/perllib/FixMyStreet/Roles/Cobrand/Echo.pm b/perllib/FixMyStreet/Roles/Cobrand/Echo.pm
@@ -90,7 +90,7 @@ sub bin_addresses_for_postcode {
 sub _allow_async_echo_lookup {
     my $self = shift;
     my $action = $self->{c}->action;
-    return 0 if $action eq 'waste/pay_retry' || $action eq 'waste/direct_debit_error' || $action eq 'waste/calendar';
+    return 0 if $action eq 'waste/pay_retry' || $action eq 'waste/direct_debit_error' || $action eq 'waste/calendar_ics';
     return 1;
 }
 

diff --git a/t/app/controller/waste.t b/t/app/controller/waste.t
@@ -333,7 +333,8 @@ FixMyStreet::override_config {
         is $mech->uri->path, '/waste/12345';
     };
     subtest 'Checking calendar' => sub {
-        $mech->follow_link_ok({ text => 'Add to your calendar (.ics file)' });
+        $mech->follow_link_ok({ text => 'Add to your calendar' });
+        $mech->follow_link_ok({ text_regex => qr/this link/ });
         $mech->content_contains('BEGIN:VCALENDAR');
         my @events = split /BEGIN:VEVENT/, $mech->encoded_content;
         shift @events; # Header

diff --git a/t/app/controller/waste_bexley.t b/t/app/controller/waste_bexley.t
@@ -456,8 +456,8 @@ FixMyStreet::override_config {
     }
 
     subtest 'Checking calendar' => sub {
-        $mech->follow_link_ok(
-            { text => 'Add to your calendar (.ics file)' } );
+        $mech->follow_link_ok({ text => 'Add to your calendar' });
+        $mech->follow_link_ok({ text_regex => qr/this link/ });
         $mech->content_contains('BEGIN:VCALENDAR');
         my @events = split /BEGIN:VEVENT/, $mech->encoded_content;
         shift @events; # Header

diff --git a/templates/web/base/waste/bin_days.html b/templates/web/base/waste/bin_days.html
@@ -20,7 +20,7 @@ <h2 class="govuk-heading-l govuk-!-margin-bottom-2">Your collections</h2>
     <h2 class="govuk-heading-l govuk-!-margin-bottom-2">Your collections</h2>
     [% IF service_data.size %]
       [% TRY %][% PROCESS waste/_calendar.html %][% CATCH file %]
-      <a href="[% c.uri_for_action('waste/calendar', [ property.id ]) %]">Add to your calendar (.ics file)</a>
+      <a href="[% c.uri_for_action('waste/calendar', [ property.id ]) %]">Add to your calendar</a>
       [% END %]
     [% END %]
   </div>

diff --git a/templates/web/base/waste/bin_days_sidebar.html b/templates/web/base/waste/bin_days_sidebar.html
@@ -2,7 +2,7 @@
        <div class="aside-download">
          <h3>Download your collection schedule</h3>
          <ul>
-           <li><a href="[% c.uri_for_action('waste/calendar', [ property.id ]) %]">Add to your calendar (.ics file)</a></li>
+           <li><a href="[% c.uri_for_action('waste/calendar', [ property.id ]) %]">Add to your calendar</a></li>
         [% IF c.cobrand.moniker == 'kingston' %]
             <li><a href="https://kingston-self.achieveservice.com/service/In_my_Area_Results?displaymode=collections&amp;altVal=&amp;uprn=[% property.uprn %]">Download PDF waste calendar</a></li>
         [% ELSIF c.cobrand.moniker == 'sutton' %]

diff --git a/templates/web/base/waste/header.html b/templates/web/base/waste/header.html
@@ -5,6 +5,7 @@
 END;
 %]
 [% extra_js = [
+    [ version('/vendor/clipboard-copy-element.js'), { type = "module" } ],
     version('/vendor/accessible-autocomplete.min.js'),
     version('/js/waste.js')
 ] -%]

diff --git a/templates/web/borsetshire/waste/bin_days_sidebar.html b/templates/web/borsetshire/waste/bin_days_sidebar.html
@@ -2,7 +2,7 @@
         <h3>Free bin day reminders</h3>
         <ul>
             <li><a href="#">Get free email/text reminders</a></li>
-            <li><a href="[% c.uri_for_action('waste/calendar', [ property.id ]) %]">Add to your calendar (.ics file)</a></li>
+            <li><a href="[% c.uri_for_action('waste/calendar', [ property.id ]) %]">Add to your calendar</a></li>
         </ul>
     </div>
 

diff --git a/templates/web/fixmystreet-uk-councils/about/waste-calendar.html b/templates/web/fixmystreet-uk-councils/about/waste-calendar.html
@@ -0,0 +1,62 @@
+[%
+PROCESS 'waste/header.html', title = 'Add your waste collection days to your online calendar';
+SET ics_link = c.uri_for_action('waste/calendar_ics', [ property.id ]);
+%]
+
+<div class="waste__loading_wrapper">
+
+<script nonce="[% csp_nonce %]">
+(function(){
+    var userAgent = navigator.userAgent,
+        os = 'pc';
+    if (userAgent.indexOf('Mobi') > -1) os = 'phone';
+    else if (userAgent.indexOf('Mac') > -1) os = 'mac';
+    document.documentElement.classList.add('os-' + os);
+})();
+</script>
+
+<style>
+clipboard-copy:not(:defined) .ics-loaded { display: none; }
+clipboard-copy:defined .ics-loading { display: none; }
+.mac-only { display: none; }
+.os-mac .mac-only { display: initial; }
+.os-pc .phone-only, .os-mac .phone-only { display: none; }
+.os-phone .computer-only { display: none; }
+</style>
+
+<h1>Add your waste collection days to your online calendar</h1>
+
+<p>Subscribe using your smartphone or computer, and your online calendar will always show your next collection days.</p>
+
+<h2>Step 1: copy the link to the calendar</h2>
+
+<div aria-live="polite" id="ics-announce"></div>
+<p>Click the Copy button below to copy the calendar link to your clipboard:
+<p><clipboard-copy id="ics-copy" value="[% ics_link %]" class="btn">
+    <span class="ics-loading">Loading...</span>
+    <span class="ics-loaded">Copy</span>
+</clipboard-copy>
+</p>
+
+<p class="phone-only">Or press and hold <a href="[% ics_link %]">this link</a> until a menu appears, then tap “Copy Link” or “Copy Link Address”.</p>
+<p class="computer-only">Or right-click <span class="mac-only">/ Ctrl-click</span> <a href="[% ics_link %]">this link</a>, then click “Copy Link” or “Copy Link Address”.</p>
+
+<script nonce="[% csp_nonce %]">
+document.addEventListener('clipboard-copy', function(event) {
+    const t = event.target;
+    t.textContent = 'Copied!';
+    document.getElementById('ics-announce').setAttribute('aria-label', 'Copied');
+});
+</script>
+
+<h2>Step 2: subscribe to the calendar</h2>
+<p>Follow these instructions and paste in the link you just copied when it asks you for the calendar’s address or URL.</p>
+<ul>
+<li><a href="https://support.apple.com/en-gb/HT202361">iPhone, iPad, Mac</a></li>
+<li><a href="https://support.google.com/calendar/answer/37100?hl=en&amp;co=GENIE.Platform%3DDesktop#:~:text=Use%20a%20link%20to%20add%20a%20public%20calendar">Google Calendar</a></li>
+<li><a href="https://support.office.com/en-us/article/import-or-subscribe-to-a-calendar-in-outlook-com-cff1429c-5af6-41ec-a5b4-74f2c278e98c">Outlook</a></li>
+</ul>
+
+</div>
+
+[% INCLUDE footer.html %]
diff --git a/templates/web/peterborough/waste/_calendar.html b/templates/web/peterborough/waste/_calendar.html
@@ -1 +1 @@
-<a class="icon-link is--calendar" href="[% c.uri_for_action('waste/calendar', [ property.id ]) %]">Add to your calendar (.ics file)</a>
+<a class="icon-link is--calendar" href="[% c.uri_for_action('waste/calendar', [ property.id ]) %]">Add to your calendar</a>
diff --git a/web/vendor/clipboard-copy-element.js b/web/vendor/clipboard-copy-element.js