From 1c624949737d4c006558f644196077f4a39a30ef Mon Sep 17 00:00:00 2001
From: ViacheslavKlimov <viacheslavklimov11@gmail.com>
Date: Wed, 10 May 2023 18:20:58 +0300
Subject: [PATCH] UI: push-notifications to mobile

---
 .../pages/admin/sms-provider.component.html   | 25 ++++++++++-
 .../pages/admin/sms-provider.component.ts     | 18 +++++---
 .../sent-notification-dialog.component.html   | 43 +++++++++++++++++++
 .../sent/sent-notification-dialog.componet.ts |  3 +-
 .../template/template-configuration.ts        |  9 +++-
 ...emplate-notification-dialog.component.html | 26 +++++++++++
 .../app/shared/models/notification.models.ts  | 19 ++++++--
 .../assets/locale/locale.constant-en_US.json  |  9 +++-
 8 files changed, 135 insertions(+), 17 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html b/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
index 0ea223e8b8..0f21bd0fd9 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
@@ -58,7 +58,7 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <mat-card-content style="padding-top: 16px;">
-    <form [formGroup]="slackSettingsForm" (ngSubmit)="saveNotification()">
+    <form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
       <fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
         <section formGroupName="SLACK">
           <mat-form-field class="mat-block">
@@ -66,8 +66,29 @@
             <input matInput formControlName="botToken" />
           </mat-form-field>
         </section>
+      </fieldset>
+    </form>
+  </mat-card-content>
+  <mat-card-header>
+    <mat-card-title>
+      <span class="mat-headline-5" translate>admin.mobile-settings</span>
+    </mat-card-title>
+    <span fxFlex></span>
+<!--    <div tb-help="slackSettings"></div>-->
+  </mat-card-header>
+  <mat-card-content style="padding-top: 16px;">
+    <form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
+      <fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
+        <section formGroupName="MOBILE">
+          <tb-file-input style="margin-bottom: 16px;"
+                         required
+                         formControlName="firebaseServiceAccountCredentials"
+                         dropLabel="{{ 'admin.select-firebase-service-account-file' | translate }}"
+                         [label]="'admin.firebase-service-account-file' | translate">
+          </tb-file-input>
+        </section>
         <div fxLayout="row" fxLayoutAlign="end center" class="layout-wrap">
-          <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || slackSettingsForm.invalid || !slackSettingsForm.dirty"
+          <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
                   type="submit">{{'action.save' | translate}}
           </button>
         </div>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.ts b/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.ts
index e56f02c4e4..99eea3ab23 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.ts
@@ -42,7 +42,7 @@ export class SmsProviderComponent extends PageComponent implements HasConfirmFor
   smsProvider: FormGroup;
   private adminSettings: AdminSettings<SmsProviderConfiguration>;
 
-  slackSettingsForm: FormGroup;
+  notificationSettingsForm: FormGroup;
   private notificationSettings: NotificationSettings;
 
   private readonly authUser: AuthUser;
@@ -60,7 +60,7 @@ export class SmsProviderComponent extends PageComponent implements HasConfirmFor
     this.notificationService.getNotificationSettings().subscribe(
       (settings) => {
         this.notificationSettings = settings;
-        this.slackSettingsForm.reset(this.notificationSettings);
+        this.notificationSettingsForm.reset(this.notificationSettings);
       }
     );
     if (this.isSysAdmin()) {
@@ -108,24 +108,28 @@ export class SmsProviderComponent extends PageComponent implements HasConfirmFor
   }
 
   confirmForm(): FormGroup {
-    return this.smsProvider.dirty ? this.smsProvider : this.slackSettingsForm;
+    return this.smsProvider.dirty ? this.smsProvider : this.notificationSettingsForm;
   }
 
   private buildGeneralServerSettingsForm() {
-    this.slackSettingsForm = this.fb.group({
+    this.notificationSettingsForm = this.fb.group({
       deliveryMethodsConfigs: this.fb.group({
         SLACK: this.fb.group({
           botToken: ['']
+        }),
+        MOBILE: this.fb.group({
+          firebaseServiceAccountCredentialsFileName: [''],
+          firebaseServiceAccountCredentials: ['']
         })
       })
     });
-    this.registerDisableOnLoadFormControl(this.slackSettingsForm.get('deliveryMethodsConfigs'));
+    this.registerDisableOnLoadFormControl(this.notificationSettingsForm.get('deliveryMethodsConfigs'));
   }
 
   saveNotification(): void {
     this.notificationSettings = deepTrim({
       ...this.notificationSettings,
-      ...this.slackSettingsForm.value
+      ...this.notificationSettingsForm.value
     });
     // eslint-disable-next-line guard-for-in
     for (const method in this.notificationSettings.deliveryMethodsConfigs) {
@@ -138,7 +142,7 @@ export class SmsProviderComponent extends PageComponent implements HasConfirmFor
     }
     this.notificationService.saveNotificationSettings(this.notificationSettings).subscribe(setting => {
       this.notificationSettings = setting;
-      this.slackSettingsForm.reset(this.notificationSettings);
+      this.notificationSettingsForm.reset(this.notificationSettings);
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
index 27b8968344..e5ebab3947 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
@@ -334,6 +334,40 @@
         </mat-form-field>
       </form>
     </mat-step>
+    <mat-step *ngIf="!notificationRequestForm.get('useTemplate').value &&
+                     notificationRequestForm.get('template.configuration.deliveryMethodsTemplates.MOBILE.enabled').value"
+              [stepControl]="mobileTemplateForm">
+      <ng-template matStepLabel>{{ 'notification.delivery-method.mobile' | translate }}</ng-template>
+      <div class="tb-hint-available-params mat-body-2">
+        <span class="content">{{ 'notification.input-field-support-templatization' | translate}}</span>
+        <span tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).helpId }}"
+              tb-help-popup-placement="bottom"
+              trigger-style="letter-spacing:0.25px"
+              [tb-help-popup-style]="{maxWidth: '820px'}"
+              trigger-text="{{ 'notification.see-documentation' | translate }}"></span>
+      </div>
+      <form [formGroup]="mobileTemplateForm" fxLayoutGap="8px">
+        <mat-form-field class="mat-block">
+          <mat-label translate>notification.subject</mat-label>
+          <input matInput formControlName="subject">
+          <mat-error *ngIf="mobileTemplateForm.get('subject').hasError('required')">
+            {{ 'notification.subject-required' | translate }}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field class="mat-block">
+          <mat-label translate>notification.message</mat-label>
+          <textarea matInput
+                    cdkTextareaAutosize
+                    cols="1"
+                    cdkAutosizeMinRows="1"
+                    formControlName="body">
+          </textarea>
+          <mat-error *ngIf="mobileTemplateForm.get('body').hasError('required')">
+            {{ 'notification.message-required' | translate }}
+          </mat-error>
+        </mat-form-field>
+      </form>
+    </mat-step>
     <mat-step>
       <ng-template matStepLabel>{{ 'notification.review' | translate }}</ng-template>
       <mat-progress-spinner color="warn" mode="indeterminate"
@@ -378,6 +412,15 @@
             {{ preview.processedTemplates.SLACK.body }}
           </div>
         </section>
+        <section class="preview-group notification" *ngIf="preview.processedTemplates.MOBILE?.enabled">
+          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+            <mat-icon class="tb-mat-18" svgIcon="mdi:smartphone"></mat-icon>
+            <div class="group-title" translate>notification.delivery-method.mobile-preview</div>
+          </div>
+          <div class="notification-content">
+            {{ preview.processedTemplates.MOBILE.body }}
+          </div>
+        </section>
         <section class="preview-group">
           <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
             <mat-icon  class="tb-mat-18">supervisor_account</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
index 4846cd063d..938ec2756f 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
@@ -315,7 +315,7 @@ export class SentNotificationDialogComponent extends
     if(this.isSysAdmin()) {
       return true;
     } else if (this.isTenantAdmin()) {
-      return deliveryMethod === NotificationDeliveryMethod.SLACK;
+      return deliveryMethod === NotificationDeliveryMethod.SLACK || deliveryMethod === NotificationDeliveryMethod.MOBILE;
     }
     return false;
   }
@@ -330,6 +330,7 @@ export class SentNotificationDialogComponent extends
         return '/settings/outgoing-mail';
       case NotificationDeliveryMethod.SMS:
       case NotificationDeliveryMethod.SLACK:
+      case NotificationDeliveryMethod.MOBILE:
         return '/settings/notifications';
     }
   }
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-configuration.ts b/ui-ngx/src/app/modules/home/pages/notification/template/template-configuration.ts
index b3fa00ef72..90115738a6 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-configuration.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-configuration.ts
@@ -43,6 +43,7 @@ export abstract class TemplateConfiguration<T, R = any> extends DialogComponent<
   emailTemplateForm: FormGroup;
   smsTemplateForm: FormGroup;
   slackTemplateForm: FormGroup;
+  mobileTemplateForm: FormGroup;
 
   notificationDeliveryMethods = Object.keys(NotificationDeliveryMethod) as NotificationDeliveryMethod[];
   notificationDeliveryMethodTranslateMap = NotificationDeliveryMethodTranslateMap;
@@ -163,11 +164,17 @@ export abstract class TemplateConfiguration<T, R = any> extends DialogComponent<
       body: ['', Validators.required]
     });
 
+    this.mobileTemplateForm = this.fb.group({
+      subject: ['', Validators.required],
+      body: ['', Validators.required]
+    });
+
     this.deliveryMethodFormsMap = new Map<NotificationDeliveryMethod, FormGroup>([
       [NotificationDeliveryMethod.WEB, this.webTemplateForm],
       [NotificationDeliveryMethod.EMAIL, this.emailTemplateForm],
       [NotificationDeliveryMethod.SMS, this.smsTemplateForm],
-      [NotificationDeliveryMethod.SLACK, this.slackTemplateForm]
+      [NotificationDeliveryMethod.SLACK, this.slackTemplateForm],
+      [NotificationDeliveryMethod.MOBILE, this.mobileTemplateForm]
     ]);
   }
 
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
index 067258fa24..1a623af7b9 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
@@ -259,6 +259,32 @@
         </mat-form-field>
       </form>
     </mat-step>
+    <mat-step *ngIf="templateNotificationForm.get('configuration.deliveryMethodsTemplates.MOBILE.enabled').value"
+              [stepControl]="mobileTemplateForm">
+      <ng-template matStepLabel>{{ 'notification.delivery-method.mobile' | translate }}</ng-template>
+      <div class="tb-hint-available-params mat-body-2">
+        <span class="content">{{ 'notification.input-field-support-templatization' | translate}}</span>
+        <span tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).helpId }}"
+              tb-help-popup-placement="bottom"
+              trigger-style="letter-spacing:0.25px"
+              [tb-help-popup-style]="{maxWidth: '800px'}"
+              trigger-text="{{ 'notification.see-documentation' | translate }}"></span>
+      </div>
+      <form [formGroup]="mobileTemplateForm" fxLayoutGap="8px">
+        <mat-form-field class="mat-block">
+          <mat-label translate>notification.message</mat-label>
+          <textarea matInput
+                    cdkTextareaAutosize
+                    cols="1"
+                    cdkAutosizeMinRows="1"
+                    formControlName="body">
+          </textarea>
+          <mat-error *ngIf="mobileTemplateForm.get('body').hasError('required')">
+            {{ 'notification.message-required' | translate }}
+          </mat-error>
+        </mat-form-field>
+      </form>
+    </mat-step>
   </mat-horizontal-stepper>
 </div>
 <mat-divider></mat-divider>
diff --git a/ui-ngx/src/app/shared/models/notification.models.ts b/ui-ngx/src/app/shared/models/notification.models.ts
index fe554ba7f2..55dcb35b66 100644
--- a/ui-ngx/src/app/shared/models/notification.models.ts
+++ b/ui-ngx/src/app/shared/models/notification.models.ts
@@ -89,7 +89,7 @@ export interface NotificationSettings {
   deliveryMethodsConfigs: { [key in NotificationDeliveryMethod]: NotificationDeliveryMethodConfig };
 }
 
-export interface NotificationDeliveryMethodConfig extends Partial<SlackNotificationDeliveryMethodConfig>{
+export interface NotificationDeliveryMethodConfig extends Partial<SlackNotificationDeliveryMethodConfig & MobileNotificationDeliveryMethodConfig>{
   enabled: boolean;
   method: NotificationDeliveryMethod;
 }
@@ -98,6 +98,10 @@ interface SlackNotificationDeliveryMethodConfig {
   botToken: string;
 }
 
+interface MobileNotificationDeliveryMethodConfig {
+  firebaseServiceAccountCredentials: string;
+}
+
 export interface SlackConversation {
   id: string;
   title: string;
@@ -292,7 +296,8 @@ interface NotificationTemplateConfig {
 }
 
 export interface DeliveryMethodNotificationTemplate extends
-  Partial<WebDeliveryMethodNotificationTemplate & EmailDeliveryMethodNotificationTemplate & SlackDeliveryMethodNotificationTemplate>{
+  Partial<WebDeliveryMethodNotificationTemplate & EmailDeliveryMethodNotificationTemplate &
+    SlackDeliveryMethodNotificationTemplate & MobileDeliveryMethodNotificationTemplate> {
   body?: string;
   enabled: boolean;
   method: NotificationDeliveryMethod;
@@ -329,6 +334,10 @@ interface SlackDeliveryMethodNotificationTemplate {
   conversationId: string;
 }
 
+interface MobileDeliveryMethodNotificationTemplate {
+  subject: string;
+}
+
 export enum NotificationStatus {
   SENT = 'SENT',
   READ = 'READ'
@@ -338,14 +347,16 @@ export enum NotificationDeliveryMethod {
   WEB = 'WEB',
   SMS = 'SMS',
   EMAIL = 'EMAIL',
-  SLACK = 'SLACK'
+  SLACK = 'SLACK',
+  MOBILE = 'MOBILE'
 }
 
 export const NotificationDeliveryMethodTranslateMap = new Map<NotificationDeliveryMethod, string>([
   [NotificationDeliveryMethod.WEB, 'notification.delivery-method.web'],
   [NotificationDeliveryMethod.SMS, 'notification.delivery-method.sms'],
   [NotificationDeliveryMethod.EMAIL, 'notification.delivery-method.email'],
-  [NotificationDeliveryMethod.SLACK, 'notification.delivery-method.slack']
+  [NotificationDeliveryMethod.SLACK, 'notification.delivery-method.slack'],
+  [NotificationDeliveryMethod.MOBILE, 'notification.delivery-method.mobile']
 ]);
 
 export enum NotificationRequestStatus {
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index bcaa4a183f..14734c1a57 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -420,7 +420,10 @@
         "notifications-settings": "Notifications settings",
         "slack-api-token": "Slack API token",
         "slack": "Slack",
-        "slack-settings": "Slack settings"
+        "slack-settings": "Slack settings",
+        "mobile-settings": "Mobile settings",
+        "firebase-service-account-file": "Firebase service account credentials JSON file",
+        "select-firebase-service-account-file": "Drag and drop your Firebase service account credentials file or "
       },
     "alarm": {
         "alarm": "Alarm",
@@ -2847,7 +2850,9 @@
             "sms": "SMS",
             "sms-preview": "SMS notification preview",
             "web": "Web",
-            "web-preview": "Web notification preview"
+            "web-preview": "Web notification preview",
+            "mobile": "Mobile",
+            "mobile-preview": "Mobile notification preview"
         },
         "delivery-method-not-configure-click": "Delivery method is not configured. Click to setup.",
         "delivery-method-not-configure-contact": "Delivery method is not configured. Contact your system administrator.",