Merge pull request #231 from plone/erral-issue-226-ical-link

feat: show ical/ICS download link in the event infobox

Author: erral

frontend/src/components/Blocks/InfoBox/Body.jsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { When, Recurrence } from '@package/components';
 import { List } from 'semantic-ui-react';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import calendarSVG from '@plone/volto/icons/calendar.svg';
+import { expandToBackendURL } from '@plone/volto/helpers/Url/Url';
 
 const messages = defineMessages({
   date: {
@@ -32,6 +35,10 @@ const messages = defineMessages({
     id: 'attendees',
     defaultMessage: 'Attendees',
   },
+  downloadEvent: {
+    id: 'Download Event',
+    defaultMessage: 'Download Event',
+  },
 });
 
 const Body = (props) => {
@@ -121,6 +128,23 @@ const Body = (props) => {
           <List items={properties.attendees} />
         </>
       )}
+
+      {/* ICS link */}
+      <div className="download-event">
+        <Icon name={calendarSVG} />
+        <a
+          className="ics-download"
+          target="_blank"
+          rel="noreferrer"
+          href={
+            properties && properties['@id']
+              ? `${expandToBackendURL(properties['@id'])}/ics_view `
+              : ''
+          }
+        >
+          {intl.formatMessage(messages.downloadEvent)}
+        </a>
+      </div>
     </>
   ) : (
     <></>

frontend/theme/extras/site/components/blocks/infobox.less

@@ -28,4 +28,12 @@
       margin-bottom: 0.3rem;
     }
   }
+
+  .download-event {
+    display: flex;
+
+    a {
+      padding-top: 0.5rem;
+    }
+  }
 }