@chat21/chat21-ionic 3.0.59-rc5 → 3.0.60-rc1

package/src/app/app.module.ts

@@ -103,7 +103,7 @@ export function createTranslateLoader(http: HttpClient) {
 
 }
 
-export function authenticationFactory(http: HttpClient, appConfig: AppConfigProvider, chat21Service: Chat21Service, appSorage: AppStorageService, network: Network, connectionService:ConnectionService) {
+export function authenticationFactory(http: HttpClient, appConfig: AppConfigProvider, chat21Service: Chat21Service, appSorage: AppStorageService, network: Network, connectionService: ConnectionService) {
   const config = appConfig.getConfig()
   if (config.chatEngine === CHAT_ENGINE_MQTT) {
 
@@ -112,8 +112,13 @@ export function authenticationFactory(http: HttpClient, appConfig: AppConfigProv
 
     const auth = new MQTTAuthService(http, chat21Service, appSorage);
 
-    auth.setBaseUrl(appConfig.getConfig().apiUrl)
-    
+    auth.setBaseUrl(appConfig.getConfig().apiUrl);
+
+    if (config.pushEngine = PUSH_ENGINE_MQTT) {
+      // FOR PUSH NOTIFICATIONS INIT FIREBASE APP
+      FirebaseInitService.initFirebase(config.firebaseConfig);
+    }
+
     return auth
   } else {
 
@@ -121,7 +126,7 @@ export function authenticationFactory(http: HttpClient, appConfig: AppConfigProv
     // console.log('[APP-MOD] FirebaseInitService config ', config)
     const auth = new FirebaseAuthService(http, network, connectionService);
     auth.setBaseUrl(config.apiUrl)
-  
+
     return auth
   }
 }
@@ -217,12 +222,12 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigProvider, ap
   }
 }
 
-export function notificationsServiceFactory(appConfig: AppConfigProvider) {
+export function notificationsServiceFactory(appConfig: AppConfigProvider, chat21Service: Chat21Service) {
   const config = appConfig.getConfig()
   if (config.pushEngine === PUSH_ENGINE_FIREBASE) {
     return new FirebaseNotifications();
   } else if (config.pushEngine === PUSH_ENGINE_MQTT) {
-    return new MQTTNotifications();
+    return new MQTTNotifications(chat21Service);
   } else {
     return;
   }
@@ -340,7 +345,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     {
       provide: NotificationsService,
       useFactory: notificationsServiceFactory,
-      deps: [AppConfigProvider]
+      deps: [AppConfigProvider, Chat21Service]
     },
     {
       provide: AppStorageService,

package/src/app/chatlib/conversation-detail/conversation-content/conversation-content.component.html

@@ -10,7 +10,7 @@
             <div class="chat21-bounce1" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
             <div class="chat21-bounce2" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
             <div class="chat21-bounce3" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
-            <span>{{translationMap.get('LABEL_LOADING')}}</span>
+            <span>{{translationMap?.get('LABEL_LOADING')}}</span>
         </div>
       </span>
       

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.html

@@ -74,7 +74,8 @@
   </ion-item-options>
 </ion-item-sliding> -->
 
-<ion-item button="true" lines="none" class="ion-no-padding" [class.ion-selected]="conversation.uid === uidConvSelected"
+
+<ion-item button="true" lines="none" class="ion-no-padding" [class.ion-selected]="conversation?.uid === uidConvSelected"
   *ngFor="let conversation of listConversations" (click)="openConversationByID(conversation)" detail=false>
   <div tabindex="0"></div>
 
@@ -117,7 +118,8 @@
   <ion-note *ngIf="!conversation.archived" class="conversation_time">{{conversation.timestamp | amTimeAgo}}</ion-note>
 
   <ion-buttons slot="end">
-    <ion-button *ngIf="!conversation.archived" [ngClass]="{'hide': !isApp, 'button-on-desktop': !isApp, 'button-on-mobile': isApp  }"
+    <ion-button *ngIf="!conversation.archived"
+      [ngClass]="{'hide': !isApp, 'button-on-desktop': !isApp, 'button-on-mobile': isApp  }"
       id="{{ 'close_conversation_button' + conversation.uid }}" class="close-conversation-button" ion-button clear
       item-end (click)="closeConversation(conversation);$event.stopPropagation();" padding>
       <ion-icon slot="icon-only" style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}"
@@ -132,21 +134,20 @@
 
   <div item-end *ngIf="conversation?.archived" class="achived-icon-wpr">
     <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') === currentYear" class="time-in-archived">
-      {{browserLang === 'it' ? (conversation.timestamp| amDateFormat:'DD MMM') : (conversation.timestamp |
-      amDateFormat:'MMM DD')}}
+      {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD') : (conversation.timestamp| amDateFormat:'DD MMM')}}
 
       <!-- {{conversation.timestamp | amDateFormat:'DD MMM'}} -->
     </span>
     <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') !== currentYear" class="time-in-archived">
-      {{browserLang === 'it' ? (conversation.timestamp| amDateFormat:'DD MMM') : (conversation.timestamp |
-      amDateFormat:'MMM DD YYYY')}}
+      {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD YYYY') : (conversation.timestamp| amDateFormat:'DD MMM YYYY') }}
       <!-- {{conversation.timestamp | amDateFormat:'DD MMM YYYY'}} -->
     </span>
     <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i>
   </div>
 
   <!-- && !conversation?.archived -->
-  <div item-end class="notification_point" [ngClass]="{'notification_point-on-desktop': !isApp, 'notification_point-on-mobile': isApp }"
+  <div item-end class="notification_point"
+    [ngClass]="{'notification_point-on-desktop': !isApp, 'notification_point-on-mobile': isApp }"
     *ngIf="conversation.is_new">
   </div>
 

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.ts

@@ -78,9 +78,10 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     this.isApp = this.platform.is('ios') || this.platform.is('android')
     this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - IS-APP ', this.isApp)
     this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - Platform', this.platform.platforms());
-   
   }
 
+ 
+
 
 
   // --------------------------------------------------

package/src/app/chatlib/list-conversations-component/list-conversations/list-conversations.component.html

@@ -34,7 +34,7 @@
               width="24px" height="24px" viewBox="0 0 24 24">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
-              <title id="altIconTitle">{{ translationMap.get('CLOSED') }}</title>
+              <title id="altIconTitle">{{ translationMap?.get('CLOSED') }}</title>
             </svg>
           </button>
         </div>

package/src/app/components/authentication/login/login.component.html

@@ -8,25 +8,25 @@
 
     <div class="signin-title" style="text-align:center">
       <h2 style="font-family: 'Montserrat', sans-serif; font-weight: 400;">
-        {{ translationMap.get('LABEL_SIGNIN_TO') }}
+        {{ translationMap?.get('LABEL_SIGNIN_TO') }}
         {{companyName}}
       </h2>
     </div>
     <div class="login-container">
       <form [formGroup]="userForm" (ngSubmit)="signInWithEmailAndPassword()" novalidate>
 
-        <ion-label stacked for="email">{{ translationMap.get('LABEL_EMAIL') }}</ion-label>
+        <ion-label stacked for="email">{{ translationMap?.get('LABEL_EMAIL') }}</ion-label>
         <ion-input #email formControlName="email" type="email" id="email" required autocapitalize="off" spellcheck="false"
-        placeholder="{{ translationMap.get('LABEL_PLACEHOLDER_EMAIL') }}"
+        placeholder="{{ translationMap?.get('LABEL_PLACEHOLDER_EMAIL') }}"
         [class.invalid]="!userForm.controls.email.valid" ></ion-input>
         <div *ngIf="formErrors.email" class="is-danger">
           {{ formErrors.email }}
         </div>
 
        
-        <ion-label stacked for="password">{{ translationMap.get('LABEL_PASSWORD') }}</ion-label>
+        <ion-label stacked for="password">{{ translationMap?.get('LABEL_PASSWORD') }}</ion-label>
         <ion-input #password formControlName="password" type="password" id="password" required
-        placeholder="{{ translationMap.get('LABEL_PLACEHOLDER_PASSWORD') }}"
+        placeholder="{{ translationMap?.get('LABEL_PLACEHOLDER_PASSWORD') }}"
         [class.invalid]="!userForm.controls.password.valid"></ion-input>
 
         <div *ngIf="formErrors.password" class="is-danger">
@@ -36,7 +36,7 @@
         
         <button type="submit" class="btn signin-button ion-activatable ripple-parent" [ngClass]="{'signin-button-is-disabled': !userForm.valid}" [disabled]="!userForm.valid">
           <span class="signin-button-label" *ngIf="showSpinnerInLoginBtn === false" >
-            {{ translationMap.get('LABEL_SIGNIN') }}
+            {{ translationMap?.get('LABEL_SIGNIN') }}
           </span>
           <ion-ripple-effect type="unbounded"></ion-ripple-effect>
           <ion-spinner *ngIf="showSpinnerInLoginBtn === true" name="bubbles" color="white" duration="2" ></ion-spinner>
@@ -50,9 +50,9 @@
         </p> -->
 
         <p style="color: #666666; font-size: 1.1em; text-align: center; margin-top: 16px;">
-           {{ translationMap.get('LABEL_FORGOT_YOUR_PASSWORD') }}
+           {{ translationMap?.get('LABEL_FORGOT_YOUR_PASSWORD') }}
           <span style="color: #03a5e8; cursor:pointer" (click)="goToResetPsw()">
-             {{ translationMap.get('LABEL_CLICK_HERE') }} 
+             {{ translationMap?.get('LABEL_CLICK_HERE') }} 
           </span>
         </p>
 

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.html

@@ -3,10 +3,8 @@
   <ion-toolbar>
     
     <ion-buttons slot="start">
-      <!-- (click)="pushPage('conversations-list')" -->
-      <ion-back-button text="" *ngIf="isMobile"
-          defaultHref="/conversations-list"
-         >
+      <!-- (click)="pushPage('conversations-list')" defaultHref="/conversations-list" -->
+      <ion-back-button style="display: block;" text="" *ngIf="isMobile" (click)="goBackToConversationList()">
       </ion-back-button> 
     </ion-buttons>
 

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
 
 // Logger
@@ -43,7 +43,8 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   constructor(
     public imageRepoService: ImageRepoService,
     private route: ActivatedRoute,
-    public platform: Platform
+    public platform: Platform,
+    private router: Router
   ) {
     this.route.paramMap.subscribe(params => {
 
@@ -125,4 +126,8 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   /** */
   pushPage(event) { }
 
+  goBackToConversationList() {
+    this.router.navigateByUrl('/conversations-list');
+  }
+
 }

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.html

@@ -1,64 +1,82 @@
-<ion-grid>
+<!-- <ion-grid>
   <ion-row id="message-text-area">
-
     <ion-col col-auto>
-
       <div class="buttons-left">
-    
-        <!-- <ion-button class="attach-button" ion-button fill="clear" style="display: none;">
-          <input type="file" accept="image/*" capture="camera" (change)="onFileSelected($event)" id="fileInput" />
-          <label for="fileInput" icon-only ion-button>
-            <ion-icon slot="icon-only" name="attach"></ion-icon>
-          </label>
-        </ion-button> -->
 
         <ion-button ion-button fill="clear" class="upload-image-btn">
-          
-          <ion-icon slot="icon-only" lazy="true" name="attach-outline" style="font-size: 30px;transform: rotate(42deg);"></ion-icon>
-          <!-- <ion-label slot="end">Upload Image</ion-label> -->
-          <!-- <input #fileInput type="file" (change)="onFileSelected($event)" capture="camera" id="file-input" accept="image/*, .pdf,.zip"> -->
-          <!-- https://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv?rq=1 -->
-          <!-- <input #fileInput type="file" (change)="onFileSelected($event)" capture="camera" id="file-input" accept="image/*, audio/* ,video/*, text/html, text/plain, .csv, .pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document, .scss, .css, .json"> -->
+          <ion-icon slot="icon-only" lazy="true" name="attach-outline"
+            style="font-size: 30px;transform: rotate(42deg);"></ion-icon>
           <input #fileInput type="file" (change)="onFileSelected($event)" capture="camera" id="file-input"
             [accept]="fileUploadAccept">
-
         </ion-button>
       </div>
 
-
       <div class="text-message">
-        <!-- [value]=""  -->
-        <!-- placeholder="{{ 'LABEL_ENTER_MSG' | translate }}" -->
-        <!-- (ionBlur)="txtfocus(0)" -->
-        <!-- autofocus="true" -->
-        <!-- autoFocus="true" // directive -->
-
-        <ion-textarea id="ion-textarea" #messageTextArea #message_text_area #textArea rows="1" 
-          [placeholder]="TEXAREA_PLACEHOLDER"
-          autosize="false" 
-          auto-grow="true" 
-          autofocus="true"
-          [value]=""
-          [(ngModel)]="messageString" 
-          (ionChange)="ionChange($event);"
-          (keydown.enter)="onKeydown($event, messageString)"
-          (paste)="onPaste($event)">
+        <ion-textarea id="ion-textarea" #messageTextArea #message_text_area #textArea rows="1"
+          [placeholder]="TEXAREA_PLACEHOLDER" autosize="false" auto-grow="true" autofocus="true" [value]=""
+          [(ngModel)]="messageString" (ionChange)="ionChange($event);"
+          (keydown.enter)="onKeydown($event, messageString)" (paste)="onPaste($event)">
         </ion-textarea>
-        <!-- (ionInput)="onChange($event);" -->
       </div>
 
       <div class="buttons-right">
-        <!-- [disabled]="conversationEnabled === false" -->
-        <ion-button [disabled]="conversationEnabled === false"  class="send-button right active" ion-button fill="clear"
+        <ion-button [disabled]="conversationEnabled === false" class="send-button right active" ion-button fill="clear"
           (click)="sendMessage(messageString)">
-          <ion-icon [ngClass]="{'send-msg-disabled': conversationEnabled === false,'send-msg-activated': conversationEnabled === true }" slot="icon-only" name="send"></ion-icon>
+          <ion-icon
+            [ngClass]="{'send-msg-disabled': conversationEnabled === false,'send-msg-activated': conversationEnabled === true }"
+            slot="icon-only" name="send"></ion-icon>
         </ion-button>
       </div>
     </ion-col>
+  </ion-row>
+</ion-grid> -->
 
+<!-- --------------------------------------------------------------------------------------------------------------------- -->
+<!-- ----------new -->
+<ion-grid>
+  <ion-row id="message-text-area">
 
+    <ion-col col-auto>
 
+      <div class="start-buttons" style="position: absolute;display: flex;"> 
 
-  </ion-row>
+        <div class="canned-responses-btn-wpr" style="margin-left: -5px;" tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top">
+          
+          <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()" [disabled]="!IS_SUPPORT_GROUP_CONVERSATION">
+            <ion-icon slot="icon-only" lazy="true" name="flash-outline" style="font-size: 24px;"></ion-icon>
+          </ion-button>
+       
+        </div>
 
+        <div class="upload-image-btn-wpr" tooltip="{{translationMap?.get('UPLOAD')}}" [options]="tooltipOptions">
+          <ion-button ion-button fill="clear" class="upload-image-btn">
+            <ion-icon slot="icon-only" lazy="true" name="attach-outline"
+              style="font-size: 30px;transform: rotate(42deg);"></ion-icon>
+            <input #fileInput type="file" (change)="onFileSelected($event)" capture="camera" id="file-input"
+              [accept]="fileUploadAccept">
+             
+          </ion-button>
+         
+        </div>
+      </div>
+
+      <div class="text-message">
+        <ion-textarea id="ion-textarea" #messageTextArea #message_text_area #textArea rows="1"
+          [placeholder]="TEXAREA_PLACEHOLDER" autosize="false" auto-grow="true" autofocus="true" [value]=""
+          [(ngModel)]="messageString" (ionChange)="ionChange($event);"
+          (keydown.enter)="onKeydown($event, messageString)" (paste)="onPaste($event)">
+        </ion-textarea>
+      </div>
+
+      <div class="buttons-right">
+        <ion-button [disabled]="conversationEnabled === false" class="send-button right active" ion-button fill="clear"
+          (click)="sendMessage(messageString)">
+          <ion-icon
+            [ngClass]="{'send-msg-disabled': conversationEnabled === false,'send-msg-activated': conversationEnabled === true }"
+            slot="icon-only" name="send"></ion-icon>
+        </ion-button>
+      </div>
+    </ion-col>
+
+  </ion-row>
 </ion-grid>

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.scss

@@ -42,8 +42,10 @@
     }
     .text-message {
         position: relative;
-        margin: 0 35px;
-        width: calc(100% - 70px);
+        // margin: 0 35px;
+        // width: calc(100% - 70px);
+        margin: 0 70px;
+        width: calc(100% - 100px);
         ion-textarea {
             // border-radius: 4px;
             border-radius: 20px; // NK edited
@@ -97,10 +99,21 @@
     --border-radius: 50%;
     --padding-end: 1px;
     --padding-start: 1px;
-
     height: 33px !important;
 }
 
+
+.canned-responses-btn {
+    --padding-bottom: 0px;
+    --padding-top: 0px;
+    --border-radius: 50%;
+    --padding-end: 1px;
+    --padding-start: 1px;
+    height: 33px !important;
+    width: 30px;
+} 
+
+
 .upload-image-btn .button-native {
     border-radius: 50%;
 }