feat: Add to Google Calendar (#5392)

Co-authored-by: Areeb Jamal <jamal.areeb@gmail.com>

app/components/public/add-to-calender.hbs

@@ -0,0 +1,15 @@
+<div class="ui list basic segment m-0 pb-0">
+  <div class="item">
+    <i class="clock alternate outline icon pt-1"></i>
+    <div class="content">
+      {{#if this.isSingleDay}}
+        {{general-date @event.startsAt @event.timezone "dddd, MMMM DD, YYYY"}}<br>{{general-date @event.startsAt @event.timezone "h:mm A"}} {{t 'to'}} {{general-date @event.endsAt @event.timezone "h:mm A"}} 
+      {{else}}
+        {{general-date @event.startsAt @event.timezone "dddd, MMMM DD, YYYY h:mm A"}} {{t 'to'}} {{general-date @event.endsAt @event.timezone "dddd, MMMM DD, YYYY h:mm A"}} 
+      {{/if}}
+      ({{this.timezone}})
+      <br>
+      <a href={{this.calendarUrl}} target="_blank" rel="noreferrer nofollow">{{t 'Add to Google Calendar'}}</a>
+    </div>
+  </div>
+</div>

app/components/public/add-to-calender.ts

@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import moment, { Moment } from 'moment';
+import Event from 'open-event-frontend/models/event';
+
+interface Args {
+  event: Event,
+  location: string
+}
+
+export default class AddToCalender extends Component<Args> {
+
+  get timezone(): string {
+    return moment.tz(this.args.event.timezone).format('z');
+  }
+
+  get startsAt(): Moment {
+    const { event } = this.args;
+    return moment(event.startsAt).tz(event.timezone);
+  }
+
+  get endsAt(): Moment {
+    const { event } = this.args;
+    return moment(event.endsAt).tz(event.timezone);
+  }
+
+  get isSingleDay(): boolean {
+    return this.startsAt.isSame(this.endsAt, 'day');
+  }
+
+  get calendarUrl(): string {
+    const { event } = this.args;
+    const startTime = this.startsAt.utc().format('YYYYMMDD[T]HHmmSS[Z]');
+    const endTime = this.endsAt.utc().format('YYYYMMDD[T]HHmmSS[Z]');
+    return `https://calendar.google.com/calendar/render?action=TEMPLATE&dates=${startTime}/${endTime}&text=${event.name}&location=${this.args.location}&ctz=${event.timezone}&details=${event.description}`;
+  }
+
+}

app/components/public/social-links.js

@@ -3,7 +3,7 @@ import Component from '@ember/component';
 import { computed } from '@ember/object';
 
 export default Component.extend({
-  classNames: ['ui', 'basic', 'segment'],
+  classNames: ['ui', 'basic', 'segment', 'm-0', 'pt-0'],
 
   socialLinks: A(),
 

app/styles/partials/utils.scss

@@ -49,6 +49,10 @@
   padding: .25rem !important;
 }
 
+.pt-1 {
+  padding-top: .25rem !important;
+}
+
 .p-4 {
   padding: 1rem !important;
 }

app/templates/public.hbs

@@ -77,7 +77,8 @@
               {{/each}}
             </div>
           {{/if}}
-          <Public::SocialLinks @externalUrl={{this.model.externalEventUrl}} @socialLinks={{this.model.socialLinks}} />
+          <Public::AddToCalender @event={{this.model}} @location={{this.headerLocation}}/>
+          <Public::SocialLinks @externalUrl={{this.model.externalEventUrl}} @socialLinks={{this.model.socialLinks}}/>
         {{/if}}
       </div>
     </div>