Prospective application email work. (#2124)

* Prospective application email work.

* Lint fix.

app/components/navbar-area-vol-coords.hbs

@@ -14,12 +14,10 @@
       <NavbarMenuItem @menu={{menu}} @route="vc.photos" @item="Photos"/>
     </NavbarMenuSection>
     <NavbarMenuSection @section="Applications">
-      {{#if false}}
-        <NavbarMenuItem @menu={{menu}} @route="vc.applications" @item="Prospective Applications"/>
-        {{#if (has-role "admin" "salesforce-import")}}
-          <NavbarMenuItem @menu={{menu}} @route="vc.application-import" @item="Application Import"/>
-          <NavbarMenuItem @menu={{menu}} @route="vc.create-prospectives" @item="Create Prospectives"/>
-        {{/if}}
+      <NavbarMenuItem @menu={{menu}} @route="vc.applications" @item="Prospective Applications"/>
+      {{#if (has-role "admin" "salesforce-import")}}
+        <NavbarMenuItem @menu={{menu}} @route="vc.application-import" @item="Application Import"/>
+        <NavbarMenuItem @menu={{menu}} @route="vc.create-prospectives" @item="Create Prospectives"/>
       {{/if}}
       {{#if (has-role "admin" "salesforce-import")}}
         <NavbarMenuItem @menu={{menu}} @route="vc.salesforce" @item="Salesforce Import"/>

app/components/vc/application-audit-log.hbs

@@ -25,24 +25,17 @@
           </td>
           <td>
             {{#if row.data}}
-              <table>
-                <tbody>
-                {{#each-in row.data as |column changes|}}
-                  <tr>
-                    <td class="pe-2">{{this.columnLabel column}}</td>
-                    <td>
-                      {{this.changeValues changes column row.meta}}
-                    </td>
-                  </tr>
-                {{/each-in}}
-                </tbody>
-              </table>
+              {{#each-in row.data as |column changes|}}
+                <div class="mb-2">
+                  <b>{{this.columnLabel column}}</b><br>
+                  {{this.changeValues changes column row.meta}}
+                </div>
+              {{/each-in}}
             {{/if}}
           </td>
         </tr>
       {{/each}}
       </tbody>
     </UiTable>
-
   </:body>
 </UiSection>

app/components/vc/application-details.hbs

@@ -35,7 +35,7 @@
       <div class="col-auto">
         <b>BRC Events</b><br>
         {{#if @application.eventsList}}
-            {{pluralize @application.eventsList.length
+          {{pluralize @application.eventsList.length
                       (if @application.hasPandemicEvents "total event" "event")}}
           [{{year-range @application.eventsList}}]
           {{#if @application.hasPandemicEvents}}
@@ -158,6 +158,17 @@
     </div>
   </:view>
   <:edit as |f|>
+    <FormRow>
+      <FormLabel @fixed={{true}}>
+        Experience
+      </FormLabel>
+      <div class="col-auto">
+        <f.select @name="experience"
+                  @options={{this.experienceOptions}}
+        />
+      </div>
+    </FormRow>
+
     <FormRow>
       <FormLabel @fixed={{true}}>
         BRC Events Attended
@@ -256,10 +267,24 @@
         {{else}}
           Please confirm updating the status to "{{this.statusLabel this.newStatus}}"
         {{/if}}
+        <div class="mt-3">
+          {{#if this.doesStatusSendEmail}}
+            This action will email the applicant.
+          {{else}}
+            No emails will be sent to the applicant.
+          {{/if}}
+        </div>
       </Modal.body>
       <Modal.footer @align="start">
-        <f.submit @label={{if this.askForMessage "Submit" "Confirm"}} />
-        <UiCancelButton @onClick={{this.cancelStatusMessageDialog}} />
+        <UiButtonRow>
+          <f.submit @label={{if this.askForMessage "Submit" "Confirm"}} />
+          {{#if this.doesStatusSendEmail}}
+            <UiButton @onClick={{fn this.previewEmailAction f.model}} @type="secondary">
+              Preview Email
+            </UiButton>
+          {{/if}}
+          <UiCancelButton @onClick={{this.cancelStatusMessageDialog}} />
+        </UiButtonRow>
       </Modal.footer>
     </ChForm>
   </ModalDialog>

app/components/vc/application-details.js

@@ -6,7 +6,8 @@ import {
   STATUS_REJECT_UNQUALIFIED, STATUS_HOLD_RRN_CHECK,
   StatusLabels,
   WHY_VOLUNTEER_REVIEW_OKAY,
-  WHY_VOLUNTEER_REVIEW_PROBLEM
+  WHY_VOLUNTEER_REVIEW_PROBLEM,
+  ExperienceOptions, StatusesThatSendEmail
 } from "clubhouse/models/prospective-application";
 import {TYPE_VC_COMMENT} from "clubhouse/models/prospective-application-note";
 import {service} from '@ember/service';
@@ -32,6 +33,8 @@ export default class VcApplicationDetailsComponent extends Component {
   @tracked showStatusWithMessageDialog;
   @tracked showProblemReviewDialog;
 
+  experienceOptions = ExperienceOptions;
+
   @cached
   get eventYearOptions() {
     const years = [];
@@ -187,7 +190,6 @@ export default class VcApplicationDetailsComponent extends Component {
     }
   }
 
-
   _setupToAskMessage(status, askForMessage = null, message = '') {
     this.showStatusWithMessageDialog = true;
     this.newStatus = status;
@@ -206,6 +208,11 @@ export default class VcApplicationDetailsComponent extends Component {
     }
   }
 
+  get doesStatusSendEmail() {
+    return StatusesThatSendEmail.includes(this.newStatus);
+
+  }
+
   @action
   cancelStatusMessageDialog() {
     this.showStatusWithMessageDialog = false;
@@ -220,6 +227,19 @@ export default class VcApplicationDetailsComponent extends Component {
     await this._submitStatusUpdate(this.newStatus, this.askForMessage ? model.message : null);
   }
 
+  @action
+  async previewEmailAction(model) {
+    const data = {
+      status: this.newStatus,
+    };
+
+    if (this.askForMessage) {
+      data.message = model.message;
+    }
+
+    this.args.previewEmail(data);
+  }
+
   @action
   async _submitStatusUpdate(status, message = null) {
     try {

app/controllers/vc/applications/record.js

@@ -27,6 +27,8 @@ export default class VcApplicationsRecordController extends ClubhouseController
 
   @tracked initialTabId;
 
+  @tracked emailToPreview;
+
   emailValidation = {
     subject: [validatePresence({presence: true, message: "Please supply a subject."})],
     message: [validatePresence({presence: true, message: "Please supply a message to the applicant."})],
@@ -228,6 +230,49 @@ export default class VcApplicationsRecordController extends ClubhouseController
     }
   }
 
+  @action
+  previewRawEmail(model) {
+    this.previewEmail({
+      subject: model.subject,
+      message: model.message,
+      is_raw_email: 1
+    });
+  }
+
+  @action
+  async previewEmail(data) {
+    this.isSubmitting = true;
+    try {
+      const {mail} = await this.ajax.request(`prospective-application/${this.application.id}/preview-email`, {data});
+      this.emailToPreview = mail;
+    } catch (response) {
+      this.house.handleErrorResponse(response);
+    } finally {
+      this.isSubmitting = false;
+    }
+  }
+
+  @action
+  closePreviewEmailDialog() {
+    this.emailToPreview = null;
+  }
+
+  /**
+   * Load up the newly inserted iframe with the rejection email
+   *
+   * @param {HTMLElement} element
+   */
+
+  @action
+  insertPreviewEmail(element) {
+    const iframe = element.contentWindow.document;
+
+    iframe.open();
+    iframe.write(this.emailToPreview);
+    iframe.close();
+  }
+
+
   @action
   openStatusDialog() {
     this.showStatusDialog = true;

app/models/prospective-application.js

@@ -16,11 +16,13 @@ export const EXPERIENCE_BRC1R1 = 'brc1r1';
 export const EXPERIENCE_BRC2 = 'brc2';
 export const EXPERIENCE_NONE = 'none';
 
-export const ExperienceLabels = {
-  [EXPERIENCE_NONE]: 'None',
-  [EXPERIENCE_BRC1R1]: 'BRC1 + R1',
-  [EXPERIENCE_BRC2]: 'BRC2'
-};
+export const ExperienceOptions = [
+  ['None', EXPERIENCE_NONE],
+  ['BRC1 + R1', EXPERIENCE_BRC1R1],
+  ['BRC2', EXPERIENCE_BRC2]
+];
+
+export const ExperienceLabels = optionsToLabels(ExperienceOptions);
 
 export const STATUS_PENDING = 'pending';
 export const STATUS_APPROVED = 'approved';
@@ -95,6 +97,19 @@ export const WhyVolunteerReviewLabels = {
   [WHY_VOLUNTEER_REVIEW_UNREVIEWED]: 'Unreviewed'
 };
 
+export const StatusesThatSendEmail = [
+  STATUS_APPROVED,
+  STATUS_APPROVED_PII_ISSUE,
+  STATUS_MORE_HANDLES,
+  STATUS_REJECT_REGIONAL,
+  STATUS_REJECT_TOO_YOUNG,
+  STATUS_REJECT_UNQUALIFIED,
+  STATUS_HOLD_RRN_CHECK,
+  STATUS_HOLD_QUALIFICATION_ISSUE,
+  STATUS_REJECT_RETURNING_RANGER,
+];
+
+
 export const ColumnLabels = {
   status: 'Status',
   events_attended: 'Events Attended',
@@ -134,7 +149,7 @@ export const ColumnLabels = {
 export const BadHandleRegexps = [
   [/^\d\s*[.)-]?\s*\b/, 'Priority indicators detected (e.g., 1., 2), 3 -, etc) - remove the indicators.'],
   [/\branger\b/i, 'The word "Ranger" detected - remove the word.'],
-    [/[,."'!&-]/, 'Punctuation (commas, periods, quotes, ampersands, exclamations) detected - remove all punctuations. Dashes are okay IF its part of the actual handle'],
+  [/[,."'!&-]/, 'Punctuation (commas, periods, quotes, ampersands, exclamations) detected - remove all punctuations. Dashes are okay IF its part of the actual handle'],
 ];
 export default class ProspectiveApplicationModel extends Model {
   @attr('string', {defaultVault: STATUS_PENDING}) status;
@@ -374,12 +389,12 @@ export default class ProspectiveApplicationModel extends Model {
   get handleListIssues() {
     const issues = [];
 
-     BadHandleRegexps.forEach((regexp) => {
-       if (this.handles.match(regexp[0])) {
-         issues.push(regexp[1]);
-       }
-     });
+    BadHandleRegexps.forEach((regexp) => {
+      if (this.handles.match(regexp[0])) {
+        issues.push(regexp[1]);
+      }
+    });
 
-     return issues;
+    return issues;
   }
 }

app/templates/vc/applications/record.hbs

@@ -89,7 +89,7 @@
     {{else if this.assignedToOther}}
       <b class="text-danger">
         {{fa-icon "hand" right=1}}
-         Assigned to {{this.application.assigned_person.callsign}}.
+        Assigned to {{this.application.assigned_person.callsign}}.
       </b>
     {{else if (not this.application.assigned_person_id)}}
       Application is unassigned
@@ -162,14 +162,19 @@
 
   <div class="tab-content">
     <tab.pane @id="details">
-      <Vc::ApplicationDetails @application={{this.application}} />
+      <Vc::ApplicationDetails @application={{this.application}}
+                              @previewEmail={{this.previewEmail}}
+      />
     </tab.pane>
     <tab.pane @id="handles">
-      <Vc::ApplicationHandles @application={{this.application}} />
+      <Vc::ApplicationHandles @application={{this.application}}
+                              @previewEmail={{this.previewEmail}}
+      />
     </tab.pane>
     <tab.pane @id="personal-info">
       <Vc::ApplicationPersonalInfo @application={{this.application}}
                                    @onSubmit={{this.save}}
+
       />
     </tab.pane>
     <tab.pane @id="related">
@@ -233,8 +238,13 @@
         </FormRow>
       </Modal.body>
       <Modal.footer @align="start">
-        <f.submit @label="Send Email"/>
-        <UiCancelButton @onClick={{this.cancelSendEmailDialog}} />
+        <UiButtonRow>
+          <f.submit @label="Send Email"/>
+          <UiButton @onClick={{fn this.previewRawEmail f.model}} @type="secondary">
+            Preview Email
+          </UiButton>
+          <UiCancelButton @onClick={{this.cancelSendEmailDialog}} />
+        </UiButtonRow>
       </Modal.footer>
     </ChForm>
   </ModalDialog>
@@ -283,6 +293,24 @@
   </ModalDialog>
 {{/if}}
 
+{{#if this.emailToPreview}}
+  <ModalDialog @title="Preview Email " @onEscape={{this.closePreviewEmailDialog}} as |modal|>
+    <modal.body>
+      <div class="border">
+        <iframe {{on-insert this.insertPreviewEmail}}
+          id="mail-preview-iframe"
+          class="mail-preview-iframe"
+          title="preview email">
+        </iframe>
+      </div>
+    </modal.body>
+    <modal.footer>
+      <UiCloseButton @onClick={{this.closePreviewEmailDialog}} />
+    </modal.footer>
+  </ModalDialog>
+{{/if}}
+
+
 {{#if this.isSubmitting}}
   <LoadingDialog>
     Submitting your request