@chat21/chat21-ionic 3.0.60-rc2 → 3.0.60

package/src/app/pages/conversation-detail/conversation-detail.page.ts

@@ -92,6 +92,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   public conv_type: string;
 
   public tagsCanned: any = [];
+  public tagsCannedCount: number
   public tagsCannedFilter: any = [];
   public HIDE_CANNED_RESPONSES: boolean = false;
 
@@ -104,14 +105,16 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
 
   arrowkeyLocation = -1;
-
+  public_Key: any;
+  areVisibleCAR: boolean
   //SOUND
   setTimeoutSound: any;
   audio: any
   isOpenInfoConversation: boolean;
   USER_HAS_OPENED_CLOSE_INFO_CONV: boolean = false
   isHovering: boolean = false;
-
+  conversation_count: number;
+  showSpinner: boolean = true
   dropEvent: any
   isMine = isMine;
   isInfo = isInfo;
@@ -180,7 +183,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.conversationWithFullname = params.get('FullNameConv');
       this.conv_type = params.get('Convtype');
 
-      this.events.publish('supportconvid:haschanged', this.conversationWith);  
+      this.events.publish('supportconvid:haschanged', this.conversationWith);
     });
 
   }
@@ -205,7 +208,70 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
     //   }
     // });
+    this.getConversations();
     this.watchToConnectionStatus();
+    this.getOSCODE()
+  }
+
+  getConversations() {
+    this.conversationsHandlerService.conversationAdded.subscribe((conv) => {
+      // console.log('[CONVS-DETAIL]  - conv  ', conv)
+      const conversations = this.conversationsHandlerService.conversations;
+      // console.log('[CONVS-DETAIL] conversations', conversations);
+      this.conversation_count = conversations.length;
+      this.logger.log('[CONVS-DETAIL] conversation_count', this.conversation_count);
+    });
+
+    this.conversationsHandlerService.conversationChanged.subscribe((conv) => {
+      // console.log('[CONVS-DETAIL]  - conv  ', conv)
+      const conversations = this.conversationsHandlerService.conversations;
+      // console.log('[CONVS-DETAIL] conversations', conversations);
+      this.conversation_count = conversations.length;
+      this.logger.log('[CONVS-DETAIL] conversation_count', this.conversation_count);
+    });
+
+    this.conversationsHandlerService.conversationRemoved.subscribe((conv) => {
+      // console.log('[CONVS-DETAIL]  - conv  ', conv)
+      const conversations = this.conversationsHandlerService.conversations;
+      // console.log('[CONVS-DETAIL] conversations', conversations);
+      this.conversation_count = conversations.length;
+      this.logger.log('[CONVS-DETAIL] conversation_count', this.conversation_count);
+    });
+
+    setTimeout(() => {
+      this.showSpinner = false
+    }, 2000);
+
+  }
+
+
+  getOSCODE() {
+    this.public_Key = this.appConfigProvider.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
+    this.logger.log('[CONVS-DETAIL] AppConfigService getAppConfig public_Key', this.public_Key);
+
+    let keys = this.public_Key.split("-");
+    this.logger.log('[CONVS-DETAIL] PUBLIC-KEY - public_Key keys', keys)
+
+    keys.forEach(key => {
+
+
+      if (key.includes("CAR")) {
+        let car = key.split(":");
+        if (car[1] === "F") {
+          this.areVisibleCAR = false;
+          this.logger.log('[CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR', this.areVisibleCAR)
+        } else {
+          this.areVisibleCAR = true;
+          this.logger.log('[CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR', this.areVisibleCAR)
+        }
+      }
+
+    });
+
+    if (!this.public_Key.includes("CAR")) {
+      this.areVisibleCAR = false;
+      this.logger.log('[CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR', this.areVisibleCAR)
+    }
   }
 
   watchToConnectionStatus() {
@@ -327,6 +393,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.subscriptions = [];
     this.setHeightTextArea();
     this.tagsCanned = []; // list of canned
+
     this.messages = []; // list messages of conversation
     this.isFileSelected = false; // indicates if a file has been selected (image to upload)
     this.openInfoMessage = false; // indicates whether the info message panel is open
@@ -417,7 +484,11 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       'CONTACT_ID',
       'USER_ID',
       "UPLOAD",
-      "CANNED_RESPONSES"
+      "CANNED_RESPONSES",
+      "NO_CANNED_RESPONSES",
+      "YES_CANNED_RESPONSES",
+      "THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE",
+      "TO_CREATE_THEM_GO_TO_THE_PROJECT"
     ];
 
     this.translationMap = this.customTranslateService.translateLanguage(keys);
@@ -435,6 +506,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       'INFO_SUPPORT_USER_ADDED_VERB',
       'INFO_SUPPORT_CHAT_REOPENED',
       'INFO_SUPPORT_CHAT_CLOSED',
+      'INFO_A_NEW_SUPPORT_REQUEST_HAS_BEEN_ASSIGNED_TO_YOU',
       'LABEL_TODAY',
       'LABEL_TOMORROW',
       'LABEL_LAST_ACCESS',
@@ -894,90 +966,93 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       // ----------------------------------------------------------
       // DISPLAY CANNED RESPONSES if message.lastIndexOf("/")
       // ----------------------------------------------------------
-      setTimeout(() => {
-        if (this.conversationWith.startsWith("support-group")) {
-
-          const pos = message.lastIndexOf("/");
-          // console.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses pos of / (using lastIndexOf) ", pos);
-
-          // test
-          // var rest = message.substring(0, message.lastIndexOf("/") + 1);
-          // var last = message.substring(message.lastIndexOf("/") + 1, message.length);
-          // console.log('[CONVS-DETAIL] - returnChangeTextArea rest', rest);
-          // console.log('[CONVS-DETAIL] - returnChangeTextArea last', last);
-          // console.log('[CONVS-DETAIL] - returnChangeTextArea last', last.length);
-          // if (last.length === 1 && last.trim() === '') {
-          //   console.log('[CONVS-DETAIL] - returnChangeTextArea last is a white space ');
-          // } else if (last.length === 1 && last.trim() !== '') {
-          //   console.log('[CONVS-DETAIL] - returnChangeTextArea last is NOT space ');
-          // }
-
-
-          if (pos >= 0) {
-            var strSearch = message.substr(pos + 1);
-            this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses strSearch ", strSearch);
-
-            // --------------------------------------------
-            // Load canned responses
-            // --------------------------------------------
-            this.loadTagsCanned(strSearch, this.conversationWith);
-
-            // ------------------------------------------------------------------------------------------------------------------------------------------
-            // Hide / display Canned when the SLASH has POSITION POS 0 and checking if there is a space after the SLASH (in this case it will be hidden)
-            // ------------------------------------------------------------------------------------------------------------------------------------------
-
-            var after_slash = message.substring(message.lastIndexOf("/") + 1, message.length);
-            if (pos === 0 && after_slash.length === 1 && after_slash.trim() === '') {
-              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea after_slash --> there is a white space after ');
-              this.HIDE_CANNED_RESPONSES = true
-              this.tagsCannedFilter = []
-            } else if (pos === 0 && after_slash.length === 0) {
-              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea after_slash --> there is NOT a white space after');
-              this.HIDE_CANNED_RESPONSES = false
-            }
-
-
-            if (pos > 0) {
+      if (this.areVisibleCAR) {
+        setTimeout(() => {
+          if (this.conversationWith.startsWith("support-group")) {
+
+            const pos = message.lastIndexOf("/");
+            // console.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses pos of / (using lastIndexOf) ", pos);
+
+            // test
+            // var rest = message.substring(0, message.lastIndexOf("/") + 1);
+            // var last = message.substring(message.lastIndexOf("/") + 1, message.length);
+            // console.log('[CONVS-DETAIL] - returnChangeTextArea rest', rest);
+            // console.log('[CONVS-DETAIL] - returnChangeTextArea last', last);
+            // console.log('[CONVS-DETAIL] - returnChangeTextArea last', last.length);
+            // if (last.length === 1 && last.trim() === '') {
+            //   console.log('[CONVS-DETAIL] - returnChangeTextArea last is a white space ');
+            // } else if (last.length === 1 && last.trim() !== '') {
+            //   console.log('[CONVS-DETAIL] - returnChangeTextArea last is NOT space ');
+            // }
+
+
+            if (pos >= 0) {
+              var strSearch = message.substr(pos + 1);
+              this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses strSearch ", strSearch);
+
+              // --------------------------------------------
+              // Load canned responses
+              // --------------------------------------------
+              this.loadTagsCanned(strSearch, this.conversationWith);
 
               // ------------------------------------------------------------------------------------------------------------------------------------------
-              // Hide / display Canned when the SLASH has POSITION POS > and checking if there is a space after the SLASH (in this case they it be hidden)
-              // and if there is not a space before the SLASH (in this it will be hidden)
+              // Hide / display Canned when the SLASH has POSITION POS 0 and checking if there is a space after the SLASH (in this case it will be hidden)
               // ------------------------------------------------------------------------------------------------------------------------------------------
 
-              let beforeSlash = message.substr(pos - 1)
-              let afterSlash = message.substr(pos + 1)
-              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea * POS ', pos);
-
-              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash', beforeSlash);
-              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> afterSlash', afterSlash);
-              var afterSlashParts = afterSlash.split("/")
-              var beforeSlashParts = beforeSlash.split("/")
-              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> afterSlash parts', afterSlashParts);
-              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash parts', beforeSlashParts);
-
-              if (beforeSlashParts.length === 2) {
-                if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0] === '') {
-                  this.HIDE_CANNED_RESPONSES = false
-                  this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash there is a white space After Not');
-                  // if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0].indexOf(' ') >= 0)
-                } else if (beforeSlashParts[0].indexOf(' ') < 0 && afterSlashParts[0] === '') {
-                  this.HIDE_CANNED_RESPONSES = true;
-                  this.tagsCannedFilter = []
-                  this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash not thete is a white space After Not');
-                } else if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0] === ' ') {
-                  this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash not thete is a white space After YES');
-                  this.HIDE_CANNED_RESPONSES = true;
-                  this.tagsCannedFilter = []
+              var after_slash = message.substring(message.lastIndexOf("/") + 1, message.length);
+              if (pos === 0 && after_slash.length === 1 && after_slash.trim() === '') {
+                this.logger.log('[CONVS-DETAIL] - returnChangeTextArea after_slash --> there is a white space after ');
+                this.HIDE_CANNED_RESPONSES = true
+                this.tagsCannedFilter = []
+              } else if (pos === 0 && after_slash.length === 0) {
+                this.logger.log('[CONVS-DETAIL] - returnChangeTextArea after_slash --> there is NOT a white space after');
+                this.HIDE_CANNED_RESPONSES = false
+              }
+
+
+              if (pos > 0) {
+
+                // ------------------------------------------------------------------------------------------------------------------------------------------
+                // Hide / display Canned when the SLASH has POSITION POS > and checking if there is a space after the SLASH (in this case they it be hidden)
+                // and if there is not a space before the SLASH (in this it will be hidden)
+                // ------------------------------------------------------------------------------------------------------------------------------------------
+
+                let beforeSlash = message.substr(pos - 1)
+                let afterSlash = message.substr(pos + 1)
+                this.logger.log('[CONVS-DETAIL] - returnChangeTextArea * POS ', pos);
+
+                this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash', beforeSlash);
+                this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> afterSlash', afterSlash);
+                var afterSlashParts = afterSlash.split("/")
+                var beforeSlashParts = beforeSlash.split("/")
+                this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> afterSlash parts', afterSlashParts);
+                this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash parts', beforeSlashParts);
+
+                if (beforeSlashParts.length === 2) {
+                  if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0] === '') {
+                    this.HIDE_CANNED_RESPONSES = false
+                    this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash there is a white space After Not');
+                    // if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0].indexOf(' ') >= 0)
+                  } else if (beforeSlashParts[0].indexOf(' ') < 0 && afterSlashParts[0] === '') {
+                    this.HIDE_CANNED_RESPONSES = true;
+                    this.tagsCannedFilter = []
+                    this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash not thete is a white space After Not');
+                  } else if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0] === ' ') {
+                    this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash not thete is a white space After YES');
+                    this.HIDE_CANNED_RESPONSES = true;
+                    this.tagsCannedFilter = []
+                  }
                 }
               }
-            }
 
 
-          } else {
-            this.tagsCannedFilter = [];
+            } else {
+              this.tagsCannedFilter = [];
+            }
           }
-        }
-      }, 300);
+        }, 300);
+
+      }
       // ./ CANNED RESPONSES //
 
     } catch (err) {
@@ -1056,7 +1131,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.logger.log('[CONVS-DETAIL] - loadTagsCanned  getCannedResponses RES', res);
 
       this.tagsCanned = res
-
+      this.tagsCannedCount = res.length
+      this.logger.log('[CONVS-DETAIL] - loadTagsCanned  getCannedResponses tagsCannedCount', this.tagsCannedCount);
       if (this.HIDE_CANNED_RESPONSES === false) {
         this.showTagsCanned(strSearch);
       }
@@ -1086,10 +1162,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       strReplace = "<b class='highlight-search-string'>" + strSearch + "</b>";
     }
     for (var i = 0; i < this.tagsCannedFilter.length; i++) {
-
       const textCanned = "<div class='cannedText'>" + this.replacePlaceholderInCanned(this.tagsCannedFilter[i].text) + "</div>";
       this.tagsCannedFilter[i].title = "<div class='cannedContent'><div class='cannedTitle'>" + this.tagsCannedFilter[i].title.toString().replace(strSearch, strReplace.trim()) + "</div>" + textCanned + '</div>';
-
+    }
+    if (this.tagsCannedCount === 0) {
+      const nocanned = { 'title': "<div class='cannedContent'><div class='cannedTitle nocannedTitle'>" + this.translationMap.get('THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE') + ".</div><div class='cannedText'>" + this.translationMap.get('TO_CREATE_THEM_GO_TO_THE_PROJECT') + "</div></div>", "text": "There are no canned responses available" }
+      this.tagsCannedFilter.push(nocanned)
     }
   }
 
@@ -1105,10 +1183,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   replacePlaceholderInCanned(str) {
     this.logger.log('[CONVS-DETAIL] - replacePlaceholderInCanned str ', str);
-
-
     str = str.replace('$recipient_name', this.conversationWithFullname);
-
     if (this.loggedUser && this.loggedUser.fullname) {
       str = str.replace('$agent_name', this.loggedUser.fullname);
     }
@@ -1133,8 +1208,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.arrowkeyLocation = -1
     this.tagsCannedFilter = [];
     this.logger.log("[CONVS-DETAIL] replaceTagInMessage  canned text ", canned.text);
-    // // prendo val input
-
 
 
     // replace text
@@ -1158,23 +1231,43 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
 
   hasClickedOpenCannedResponses($event) {
-    this.logger.log('[CONVS-DETAIL] - hasClickedOpenCannedResponses ',  $event) 
+    this.logger.log('[CONVS-DETAIL] - hasClickedOpenCannedResponses ', $event)
     const elTextArea = this.rowTextArea['el'];
     const textArea = elTextArea.getElementsByTagName('ion-textarea')[0];
- 
-    this.logger.log("[CONVS-DETAIL] replaceTagInMessage  textArea ", textArea);
-    this.logger.log("[CONVS-DETAIL] replaceTagInMessage  textArea value", textArea.value)
-    this.insertAtCursor(textArea, '/')
-   }
 
-   insertAtCursor(myField, myValue) {
-    this.logger.log('[CANNED-RES-EDIT-CREATE] - insertAtCursor - myValue ', myValue );
-    this.logger.log('[CANNED-RES-EDIT-CREATE] - insertAtCursor - myField ', myField ); 
-    
+    this.logger.log("[CONVS-DETAIL] hasClickedOpenCannedResponses  textArea ", textArea);
+    this.logger.log("[CONVS-DETAIL] hasClickedOpenCannedResponses  textArea value", textArea.value)
+    this.insertAtCursor(textArea, '/');
+    // console.log('[CONVS-DETAIL] hasClickedOpenCannedResponses textArea.value', textArea.value)
+    // setTimeout(() => {
+    //   // if (textArea.value === '/') {
+    //     // textArea.focus();
+    //     textArea.setFocus();
+    //   // }
+    // }, 1500);
+
+    this.setCaretPosition(textArea)
+  }
+
+  setCaretPosition(ctrl) {
+    ctrl.value.trim()
+    ctrl.setFocus();
+  }
+
+  insertAtCursor(myField, myValue) {
+    this.logger.log('[CONVS-DETAIL] - insertAtCursor - myValue ', myValue);
+    this.logger.log('[CONVS-DETAIL] - insertAtCursor - myField ', myField);
+
+
+    // myValue = ' ' + myValue;
+
+    // console.log('[CONVS-DETAIL] - GET TEXT AREA - Here yes myValue ', myValue);
+    // console.log('[CONVS-DETAIL] - GET TEXT AREA - Here yes textArea value length', myField.value.length);
+
+    if (myField.value.length > 0) {
       myValue = ' ' + myValue;
-      this.logger.log('[CANNED-RES-EDIT-CREATE] - GET TEXT AREA - QUI ENTRO myValue ', myValue );
-    
-   
+    }
+
     //IE support
     if (myField.selection) {
       myField.focus();
@@ -1185,19 +1278,19 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     //MOZILLA and others
     else if (myField.selectionStart || myField.selectionStart == '0') {
       var startPos = myField.selectionStart;
-      this.logger.log('[CANNED-RES-EDIT-CREATE] - insertAtCursor - startPos ', startPos);
-      
+      this.logger.log('[CONVS-DETAIL] - insertAtCursor - startPos ', startPos);
+
       var endPos = myField.selectionEnd;
-      this.logger.log('[CANNED-RES-EDIT-CREATE] - insertAtCursor - endPos ', endPos);
-      
+      this.logger.log('[CONVS-DETAIL] - insertAtCursor - endPos ', endPos);
+
       myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
-  
+
       // place cursor at end of text in text input element
       myField.focus();
       var val = myField.value; //store the value of the element
       myField.value = ''; //clear the value of the element
       myField.value = val + ' '; //set that value back. 
-  
+
       // this.cannedResponseMessage = myField.value;
 
       // this.texareaIsEmpty = false;
@@ -1208,10 +1301,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     }
   }
 
-
-   
-
-
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
     // this.logger.log("CONVERSATION-DETAIL handleKeyboardEvent  event.key ", event.key);

package/src/app/pages/conversations-list/conversations-list.page.html

@@ -36,12 +36,16 @@
           </ion-avatar>
           <ion-label part="message-text" class="waiting-for-network-msg"> Waiting for network</ion-label>
         </ion-item>
-
-        <ion-item  *ngIf="supportMode && displayNewConvsItem" class="ion-no-padding open-iframe-item"
-        button="true"
-          (click)="openUnsevedConversationIframe()">
+        <!-- button="true"  (click)="openUnsevedConversationIframe()" -->
+        <ion-item  *ngIf="supportMode && displayNewConvsItem" class="ion-no-padding open-iframe-item">
           <div tabindex="0"></div>
-          <app-project-item (projectIdEvent)="getLastProjectId($event)"></app-project-item>
+          <!-- <ion-note class="pinned-project">
+            {{ 'PINNED_PROJECT' | translate }}
+          </ion-note> -->
+     
+          <app-project-item style="width: 100%;" 
+          (openUnsevedConvsEvent)="openUnsevedConversationIframe($event)"  
+          (projectIdEvent)="getLastProjectId($event)"></app-project-item>
         </ion-item>
 
       <span

package/src/app/pages/conversations-list/conversations-list.page.scss

@@ -297,6 +297,17 @@ ion-list {
 .open-iframe-item {
   padding-left: 0px !important ;
   padding-right: 0px !important;
-  height: 55px !important;
+  // height: 55px !important;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  --background-hover: #ffffff;
+  cursor:default !important;
+}
+
+.pinned-project {
+
+  color: #3880ff;
+  position: absolute;
+  right: 8px;
+  top: 2px;
+  // font-size: 12px !important;
 }

package/src/app/pages/conversations-list/conversations-list.page.ts

@@ -72,6 +72,8 @@ export class ConversationListPage implements OnInit {
   subscription: Subscription;
 
   public UNASSIGNED_CONVS_URL: any;
+  public PROJECTS_FOR_PANEL_URL: any;
+  public IFRAME_URL: any;
   public hasClickedOpenUnservedConvIframe: boolean = false;
   public lastProjectId: string;
   public isOnline: boolean = true;
@@ -239,24 +241,40 @@ export class ConversationListPage implements OnInit {
     this.lastProjectId = projectid;
   }
 
-  openUnsevedConversationIframe() {
+  openUnsevedConversationIframe(event) {
+    this.logger.log('[CONVS-LIST-PAGE] openUnsevedConversationIframe ', event)
     this.hasClickedOpenUnservedConvIframe = true
     this.logger.log('[CONVS-LIST-PAGE] - HAS CLIKED OPEN UNSERVED REQUEST IFRAME', this.hasClickedOpenUnservedConvIframe);
     const DASHBOARD_BASE_URL = this.appConfigProvider.getConfig().dashboardUrl;
+    // http://localhost:4204/#/projects-for-panel
+    this.PROJECTS_FOR_PANEL_URL = DASHBOARD_BASE_URL + '#/projects-for-panel';
     this.UNASSIGNED_CONVS_URL = DASHBOARD_BASE_URL + '#/project/' + this.lastProjectId + '/unserved-request-for-panel';
+
+    if (event === 'pinbtn') {
+      this.IFRAME_URL = this.PROJECTS_FOR_PANEL_URL
+    } else {
+      this.IFRAME_URL = this.UNASSIGNED_CONVS_URL
+    }
+
     this.logger.log('[CONVS-LIST-PAGE] - HAS CLIKED OPEN UNSERVED REQUEST IFRAME > UNASSIGNED CONVS URL', this.UNASSIGNED_CONVS_URL);
-    this.openUnassignedConversations(this.UNASSIGNED_CONVS_URL)
+    this.openUnassignedConversations(this.IFRAME_URL, event)
   }
 
   // ---------------------------------------------------------
   // Opens the Unassigned Conversations iframe
   // ---------------------------------------------------------
-  openUnassignedConversations(UNASSIGNED_CONVS_URL) {
-
+  openUnassignedConversations(IFRAME_URL: string, event) {
     if (checkPlatformIsMobile()) {
-      presentModal(this.modalController, UnassignedConversationsPage, { unassigned_convs_url: UNASSIGNED_CONVS_URL });
+      presentModal(this.modalController, UnassignedConversationsPage, {
+        iframe_URL: IFRAME_URL,
+        callerBtn: event
+      });
     } else {
-      this.navService.push(UnassignedConversationsPage, { unassigned_convs_url: UNASSIGNED_CONVS_URL });
+      this.navService.push(UnassignedConversationsPage, {
+        iframe_URL: IFRAME_URL,
+        callerBtn: event
+
+      });
     }
   }
 

package/src/app/pages/unassigned-conversations/unassigned-conversations.page.html

@@ -1,6 +1,11 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>{{translationMap?.get('NewConversations') }}</ion-title>
+    <ion-title *ngIf="callerBtn !== 'pinbtn'" style="font-size: 16px;">
+      {{translationMap?.get('UnassignedConversations') }}
+    </ion-title>
+    <ion-title *ngIf="callerBtn === 'pinbtn'" style="font-size: 16px;">
+      {{translationMap?.get('PIN_A_PROJECT') }}
+    </ion-title>
     <ion-buttons slot="end">
       <ion-button ion-button fill="clear" (click)="onClose()">
         <ion-icon slot="icon-only" name="close"></ion-icon>
@@ -9,14 +14,14 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content overflow-scroll="true" id="iframe-ion-content" 
-[ngClass]="{'ion-content-black-background' : isProjectsForPanel === true}">
+<ion-content overflow-scroll="true" id="iframe-ion-content"
+  [ngClass]="{'ion-content-black-background' : isProjectsForPanel === true}">
   <!-- <iframe  id="i_frame"  style="width:100%; height:99%" frameBorder="0" allowfullscreen [src]="unassigned_convs_url_sanitized"></iframe> -->
-  <!-- <div class="stretchspinner-unassigned-convs">
-    <div class="rect1"></div>
-    <div class="rect2"></div>
-    <div class="rect3"></div>
-    <div class="rect4"></div>
-    <div class="rect5"></div>
-  </div> -->
-</ion-content>
+  <div class="loader-spinner-wpr">
+    <div id="loader" class="loader">
+      <svg class="circular" viewBox="25 25 50 50">
+        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
+      </svg>
+    </div>
+  </div>
+</ion-content>