UI: Improvement notification components styles

ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html

@@ -100,6 +100,23 @@
             {{ 'notification.create-new' | translate }}
           </button>
         </tb-entity-list>
+        <section formGroupName="additionalConfig" class="additional-config-group">
+          <mat-slide-toggle formControlName="enabled" class="toggle">
+            {{ 'notification.scheduler-later' | translate }}
+          </mat-slide-toggle>
+          <div *ngIf="notificationRequestForm.get('additionalConfig.enabled').value" fxLayout="column">
+            <tb-timezone-select userTimezoneByDefault
+                                required
+                                formControlName="timezone">
+            </tb-timezone-select>
+            <mat-form-field>
+              <mat-label translate>notification.time</mat-label>
+              <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
+              <mat-datetimepicker #startTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
+              <input required matInput fxFlex formControlName="time" [min]="minDate()" [max]="maxDate()" [matDatetimepicker]="startTimePicker">
+            </mat-form-field>
+          </div>
+        </section>
       </form>
     </mat-step>
     <mat-step optional *ngIf="!notificationRequestForm.get('useTemplate').value &&
@@ -222,21 +239,50 @@
         </mat-form-field>
       </form>
     </mat-step>
-    <mat-step [stepControl]="notificationRequestAdditionalConfigForm">
+    <mat-step>
       <ng-template matStepLabel>{{ 'notification.review' | translate }}</ng-template>
       <mat-progress-spinner color="warn" mode="indeterminate"
                             strokeWidth="5" *ngIf="(isLoading$ | async) && !preview">
       </mat-progress-spinner>
       <div *ngIf="preview" style="padding-bottom: 16px">
-        <section class="preview-group notification" *ngIf="preview.processedTemplates.PUSH.enabled">
+        <section class="preview-group notification" *ngIf="preview.processedTemplates.PUSH?.enabled">
           <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
             <mat-icon svgIcon="mdi:bell-badge"></mat-icon>
-            <div class="group-title">Web notification preview</div>
+            <div class="group-title" translate>notification.delivery-method-type.push-preview</div>
           </div>
           <div class="web-preview">
             <tb-notification preview [notification]="preview.processedTemplates.PUSH"></tb-notification>
           </div>
         </section>
+        <section class="preview-group notification" *ngIf="preview.processedTemplates.EMAIL?.enabled">
+          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+            <mat-icon svgIcon="mdi:email"></mat-icon>
+            <div class="group-title" translate>notification.delivery-method-type.email-preview</div>
+          </div>
+          <div class="notification-content">
+            <div class="subject">{{ preview.processedTemplates.EMAIL.subject }}</div>
+            <mat-divider></mat-divider>
+            <div class="html-content" [innerHTML]="(preview.processedTemplates.EMAIL.body | safe: 'html')"></div>
+          </div>
+        </section>
+        <section class="preview-group notification" *ngIf="preview.processedTemplates.SMS?.enabled">
+          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+            <mat-icon svgIcon="mdi:message-processing"></mat-icon>
+            <div class="group-title" translate>notification.delivery-method-type.sms-preview</div>
+          </div>
+          <div class="notification-content">
+            {{ preview.processedTemplates.SMS.body }}
+          </div>
+        </section>
+        <section class="preview-group notification" *ngIf="preview.processedTemplates.SLACK?.enabled">
+          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+            <mat-icon svgIcon="mdi:slack"></mat-icon>
+            <div class="group-title" translate>notification.delivery-method-type.slack-preview</div>
+          </div>
+          <div class="notification-content">
+            {{ preview.processedTemplates.SLACK.body }}
+          </div>
+        </section>
         <section class="preview-group">
           <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
             <mat-icon>supervisor_account</mat-icon>
@@ -248,23 +294,6 @@
             </div>
           </div>
         </section>
-        <form [formGroup]="notificationRequestAdditionalConfigForm" class="additional-config-group">
-          <mat-slide-toggle formControlName="enabled" class="toggle">
-            {{ 'notification.scheduler-later' | translate }}
-          </mat-slide-toggle>
-          <div *ngIf="notificationRequestAdditionalConfigForm.get('enabled').value" fxLayout="column">
-            <tb-timezone-select userTimezoneByDefault
-                                required
-                                formControlName="timezone">
-            </tb-timezone-select>
-            <mat-form-field>
-              <mat-label translate>notification.time</mat-label>
-              <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
-              <mat-datetimepicker #startTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
-              <input required matInput fxFlex formControlName="time" [min]="minDate()" [max]="maxDate()" [matDatetimepicker]="startTimePicker">
-            </mat-form-field>
-          </div>
-        </form>
       </div>
     </mat-step>
   </mat-horizontal-stepper>

ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss

@@ -114,6 +114,26 @@
         background-color: #fff;
       }
     }
+
+    .notification-content {
+      border: 1px solid rgba(0, 0, 0, 0.12);
+      border-radius: 4px;
+      background: #fff;
+      padding: 12px 16px;
+
+      .subject {
+        padding-bottom: 12px;
+        font-weight: 500;
+        letter-spacing: 0.25px;
+      }
+
+      .html-content {
+        margin-top: 12px;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+      }
+    }
   }
 
   @media #{$mat-gt-xs} {
@@ -240,4 +260,13 @@
       }
     }
   }
+
+  .preview-group {
+    .notification-content {
+      .html-content,
+      .html-content * {
+        all: revert;
+      }
+    }
+  }
 }

ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.componet.ts

@@ -65,7 +65,6 @@ export class RequestNotificationDialogComponent extends
   notificationType = NotificationType;
 
   notificationRequestForm: FormGroup;
-  notificationRequestAdditionalConfigForm: FormGroup;
 
   notificationDeliveryMethods = Object.keys(NotificationDeliveryMethod) as NotificationDeliveryMethod[];
   notificationDeliveryMethodTranslateMap = NotificationDeliveryMethodTranslateMap;
@@ -92,7 +91,12 @@ export class RequestNotificationDialogComponent extends
       useTemplate: [true],
       templateId: [null, Validators.required],
       targets: [null, Validators.required],
-      template: this.templateNotificationForm
+      template: this.templateNotificationForm,
+      additionalConfig: this.fb.group({
+        enabled: [false],
+        timezone: [{value: '', disabled: true}, Validators.required],
+        time: [{value: 0, disabled: true}, Validators.required]
+      })
     });
 
     this.notificationRequestForm.get('template').disable({emitEvent: false});
@@ -111,21 +115,15 @@ export class RequestNotificationDialogComponent extends
       }
     });
 
-    this.notificationRequestAdditionalConfigForm = this.fb.group({
+    this.notificationRequestForm.get('additionalConfig.enabled').valueChanges.pipe(
-      enabled: [false],
-      timezone: [{value: '', disabled: true}, Validators.required],
-      time: [{value: 0, disabled: true}, Validators.required]
-    });
-
-    this.notificationRequestAdditionalConfigForm.get('enabled').valueChanges.pipe(
       takeUntil(this.destroy$)
     ).subscribe(value => {
       if (value) {
-        this.notificationRequestAdditionalConfigForm.get('timezone').enable({emitEvent: false});
+        this.notificationRequestForm.get('additionalConfig.timezone').enable({emitEvent: false});
-        this.notificationRequestAdditionalConfigForm.get('time').enable({emitEvent: false});
+        this.notificationRequestForm.get('additionalConfig.time').enable({emitEvent: false});
       } else {
-        this.notificationRequestAdditionalConfigForm.get('timezone').disable({emitEvent: false});
+        this.notificationRequestForm.get('additionalConfig.timezone').disable({emitEvent: false});
-        this.notificationRequestAdditionalConfigForm.get('time').disable({emitEvent: false});
+        this.notificationRequestForm.get('additionalConfig.time').disable({emitEvent: false});
       }
     });
 
@@ -208,8 +206,8 @@ export class RequestNotificationDialogComponent extends
     delete formValue.useTemplate;
     delete formValue.template;
     let delay = 0;
-    if (this.notificationRequestAdditionalConfigForm.value.enabled) {
+    if (formValue.additionalConfig.enabled) {
-      delay = (this.notificationRequestAdditionalConfigForm.value.time.valueOf() - this.minDate().valueOf()) / 1000;
+      delay = (this.notificationRequestForm.value.additionalConfig.time.valueOf() - this.minDate().valueOf()) / 1000;
     }
     formValue.additionalConfig = {
       sendingDelayInSec: delay > 0 ? delay : 0
@@ -230,7 +228,7 @@ export class RequestNotificationDialogComponent extends
   }
 
   minDate(): Date {
-    return new Date(getCurrentTime(this.notificationRequestAdditionalConfigForm.get('timezone').value).format('lll'));
+    return new Date(getCurrentTime(this.notificationRequestForm.get('additionalConfig.timezone').value).format('lll'));
   }
 
   maxDate(): Date {

ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.html

@@ -207,10 +207,6 @@
   <button mat-stroked-button *ngIf="selectedIndex > 0"
           (click)="backStep()">{{ 'action.back' | translate }}</button>
   <span fxFlex></span>
-  <button *ngIf="selectedIndex > 0"
-          mat-button mat-stroked-button color="primary">
-    {{ 'notification.send-test-notification' | translate }}
-  </button>
   <button mat-raised-button
           color="primary"
           (click)="nextStep()">{{ nextStepLabel() | translate }}</button>

ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.scss

@@ -17,7 +17,7 @@
 @import "../../../../../../theme";
 
 :host-context(.tb-fullscreen-dialog .mat-dialog-container) {
-  width: 720px;
+  width: 830px;
   max-height: 100vh;
 
   .tb-form-fields {

ui-ngx/src/app/modules/home/pages/profile/profile.component.html

@@ -57,7 +57,7 @@
             <input matInput formControlName="lastName"/>
           </mat-form-field>
           <tb-phone-input [required]="false"
-                          [label]="'contact.phone'"
+                          label="{{ 'contact.phone' | translate }}"
                           [enableFlagsSelect]="true"
                           formControlName="phone">
           </tb-phone-input>

ui-ngx/src/app/modules/home/pages/user/user.component.html

@@ -93,7 +93,7 @@
         <input matInput formControlName="lastName">
       </mat-form-field>
       <tb-phone-input [required]="false"
-                      [label]="'contact.phone'"
+                      label="{{ 'contact.phone' | translate }}"
                       [enableFlagsSelect]="true"
                       formControlName="phone">
       </tb-phone-input>

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -2726,9 +2726,13 @@
         "delivery-method": "Delivery method",
         "delivery-method-type": {
             "email": "Email",
+            "email-preview": "Email notification preview",
             "push": "Web",
+            "push-preview": "Web notification preview",
             "slack": "Slack",
-            "sms": "SMS"
+            "slack-preview": "Slack notification preview",
+            "sms": "SMS",
+            "sms-preview": "SMS notification preview"
         },
         "delivery-methods": "Delivery methods",
         "description": "Description",
@@ -2794,7 +2798,6 @@
         "search-targets": "Search recipients",
         "search-templates": "Search templates",
         "send-notification": "Send notification",
-        "send-test-notification": "Send test notification",
         "sent": "Sent",
         "settings": "Notification settings",
         "slack": "Slack",