feat: Add session notify dialog

app/components/modals/session-notify-modal.hbs

@@ -0,0 +1,49 @@
+<i class="black close icon"></i>
+<div class="header">
+  {{t 'Notify Speakers'}}
+</div>
+<div class="content">
+  {{#if this.loading}}
+    <div class="ui active inverted dimmer">
+      <div class="ui text loader"></div>
+    </div>
+  {{/if}}
+  {{#if this.mail}}
+    <form class="ui form">
+      <div class="field">
+        <label>Subject</label>
+        <Input
+          type="text"
+          name="subject"
+          @value={{this.subject}} />
+      </div>
+      <div class="field">
+        <label>Message</label>
+        <Textarea
+          name="message"
+          @rows="15"
+          @value={{this.message}} />
+      </div>
+    </form>
+    <p class="m-2">
+      You can use these identifiers as placeholders for actual details sent in the email:
+      <div class="ui bulleted list">
+        <div class="item"><code>{session_name}</code> - Name of the Session</div>
+        <div class="item"><code>{session_link}</code> - Link of the Session</div>
+        <div class="item"><code>{session_state}</code> - Current state of the Session</div>
+        <div class="item"><code>{event_name}</code> - Name of the Event</div>
+        <div class="item"><code>{event_link}</code> - Link of the Event</div>
+        <div class="item"><code>{app_name}</code> - Name of the App (Site)</div>
+        <div class="item"><code>{frontend_link}</code> - Link of the Frontend Site</div>
+      </div>
+    </p>
+  {{/if}}
+</div>
+<div class="actions">
+  <button type="button" class="ui green button" {{action "notifySession"}}>
+    {{t 'Notify'}}
+  </button>
+  <button type="button" class="ui button" {{action 'close'}}>
+    {{t 'Cancel'}}
+  </button>
+</div>

app/components/modals/session-notify-modal.js

@@ -0,0 +1,77 @@
+import classic from 'ember-classic-decorator';
+import { action, computed } from '@ember/object';
+import ModalBase from 'open-event-frontend/components/modals/modal-base';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+let mailPromise = null;
+
+@classic
+export default class SessionNotifyModal extends ModalBase {
+  @service loader;
+  @tracked mails = null;
+  @tracked saving = false;
+  @tracked subject = '';
+  @tracked message = '';
+
+  constructor() {
+    super(...arguments);
+    this.initialize();
+  }
+
+  @computed('mails', 'saving')
+  get loading() {
+    return !this.mails || this.saving;
+  }
+
+  @computed('mails', 'sessionState')
+  get mail() {
+    if (!this.mails) {return null}
+    const mail =  this.mails[this.sessionState];
+
+    this.subject = mail.subject;
+    this.message = mail.message.replace(/<br\/>/g, '\n'); // Convert line breaks to newlines for display
+
+    return mail;
+  }
+
+  async initialize() {
+    if (!mailPromise) {
+      mailPromise = this.loader.load('/sessions/mails');
+    }
+    this.mails = await mailPromise;
+  }
+
+  @action
+  async notifySession() {
+    const { subject, message } = this.mail;
+    const payload = {};
+
+    if (subject !== this.subject) {
+      payload.subject = this.subject;
+    }
+
+    const newMessage = this.message.replace(/\n/g, '<br/>'); // Convert newlines to line breaks for HTML email
+    if (message !== newMessage) {
+      payload.message = newMessage;
+    }
+
+    this.saving = true;
+    try {
+      const response = await this.loader.post(`/sessions/${this.sessionId}/notify`, payload);
+      if (!response?.success) {throw response}
+      this.notify.success(this.l10n.t('Email scheduled to be sent successfully'), {
+        id: 'notify_email_succ'
+      });
+      this.close();
+    } catch (e) {
+      console.error('Error while sending session state change email', e);
+      this.notify.error(this.l10n.t('An unexpected error has occurred.'), {
+        id: 'notify_email_err'
+      });
+    } finally {
+      this.saving = false;
+    }
+  }
+
+}

app/components/ui-table/cell/events/view/sessions/cell-notify.hbs

@@ -0,0 +1,4 @@
+<button class="ui icon button" {{action "openModal"}}>
+  <i class="mail icon"></i>
+</button>
+<Modals::SessionNotifyModal @isOpen={{this.isModalOpen}} @sessionId={{@record}} @sessionState={{@extraRecords.status}} />

app/components/ui-table/cell/events/view/sessions/cell-notify.js

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class CellNotify extends Component {
+  @tracked isModalOpen = false;
+
+  @action
+  openModal() {
+    this.isModalOpen = true;
+  }
+}

app/controllers/events/view/sessions/list.js

@@ -10,10 +10,17 @@ export default class extends Controller.extend(EmberTableControllerMixin) {
     return [
       {
         name            : 'State',
+        headerComponent : 'tables/headers/sort',
+        cellComponent   : 'ui-table/cell/events/view/sessions/cell-buttons',
         valuePath       : 'state',
         isSortable      : true,
-        headerComponent : 'tables/headers/sort',
-        cellComponent   : 'ui-table/cell/events/view/sessions/cell-session-state'
+        extraValuePaths : ['status'],
+        options         : {
+          sessionStateMap: this.model.sessionStateMap
+        },
+        actions: {
+          changeState: this.changeState.bind(this)
+        }
       },
       {
         name            : 'Title',
@@ -74,21 +81,10 @@ export default class extends Controller.extend(EmberTableControllerMixin) {
         }
       },
       {
-        name          : 'Email Sent',
-        valuePath     : 'isMailSent',
-        cellComponent : 'ui-table/cell/events/view/sessions/cell-is-mail-sent'
-      },
-      {
-        name            : 'Change State',
-        cellComponent   : 'ui-table/cell/events/view/sessions/cell-buttons',
+        name            : 'Notify',
         valuePath       : 'id',
         extraValuePaths : ['status'],
-        options         : {
-          sessionStateMap: this.model.sessionStateMap
-        },
-        actions: {
-          changeState: this.changeState.bind(this)
-        }
+        cellComponent   : 'ui-table/cell/events/view/sessions/cell-notify'
       },
       {
         name            : 'Lock Session',

tests/integration/components/ui-table/cell/events/view/sessions/cell-notify-test.js

@@ -0,0 +1,13 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { module, test } from 'qunit';
+import { setupIntegrationTest } from 'open-event-frontend/tests/helpers/setup-integration-test';
+import { render } from '@ember/test-helpers';
+
+module('Integration | Component | ui table/cell/events/views/sessions/cell notify', function(hooks) {
+  setupIntegrationTest(hooks);
+
+  test('it renders', async function(assert) {
+    await render(hbs`{{ui-table/cell/events/views/sessions/cell-notify}}`);
+    assert.dom(this.element).exists();
+  });
+});