@chat21/chat21-web-widget 5.0.83-rc.3 → 5.0.83-rc.4

package/CHANGELOG.md

@@ -6,6 +6,9 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.0.83-rc.4
+- **added**: confirm-close modal before close a chat
+
 # 5.0.83-rc.3
 - **added**: send '/start' info message on restart header menu option
 - **bug-fixed**: close header menu option not send the last conversation id to close

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.83-rc.3",
+  "version": "5.0.83-rc.4",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

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

@@ -92,8 +92,10 @@
 
 
     <dialog #mydialog>
-        <chat-confirm-close>
-        
+        <chat-confirm-close
+            [translationMap]="translationMapCloseChatDialog"
+            [stylesMap]="stylesMap"
+            (onDiaglogClosed)="onCloseDialog($event)">
         </chat-confirm-close>
     </dialog>
 

package/src/app/component/conversation-detail/conversation/conversation.component.scss

@@ -160,6 +160,17 @@
     }
 }
 
+dialog:-internal-dialog-in-top-layer{
+    border: 0px;
+    border-radius: 16px;
+    padding: 15px 15px;
+    &::backdrop {
+        border-radius: 16px;
+    }
+}
+
+
+
 /* ==================== MOBILE VERSION ==================== */ 
 @media (max-width: 451px) {
     #chat21-conversation-component {

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

@@ -138,6 +138,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   translationMapFooter: Map<string, string>;
   translationMapContent: Map<string, string>;
   translationMapPreview: Map<string, string>;
+  translationMapCloseChatDialog: Map<string, string>;
 
   // ========== begin:: typying =======
   public isTypings = false;
@@ -257,11 +258,18 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'LABEL_PREVIEW'
     ];
 
+    const keysCloseChatDialog= [
+      'BACK', 
+      'CLOSE',
+      'CLOSE_CHAT'
+    ];
+
     
     this.translationMapHeader = this.customTranslateService.translateLanguage(keysHeader);
     this.translationMapFooter = this.customTranslateService.translateLanguage(keysFooter);
     this.translationMapContent = this.customTranslateService.translateLanguage(keysContent);
     this.translationMapPreview = this.customTranslateService.translateLanguage(keysPreview);
+    this.translationMapCloseChatDialog = this.customTranslateService.translateLanguage(keysCloseChatDialog)
   }
 
   ngAfterViewInit() {
@@ -980,17 +988,32 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   }
   /** CALLED BY: conv-header component */
   onCloseChat(){
-    // this.mydialog.nativeElement.showModal()
     this.logger.debug('[CONV-COMP] close chat with uid ', this.conversation.uid, this.conversationId)
-    this.tiledeskRequestService.closeSupportGroup(this.conversationId).then(data => {
-      if(data === 'closed'){
-        this.isMenuShow = false
-        this.logger.debug('[CONV-COMP] chat closed successfully with uid ', this.conversationId)
-      }
-    }).catch(error => {
-      this.logger.error('[CONV-COMP] ERROR while closing chat with id: ', this.conversationId, error)
-    })
+    this.mydialog.nativeElement.showModal();
+    this.isMenuShow = false
+  }
+  /** CALLED BY: confirm-close modal component */
+  onCloseDialog(event: {type: string, data: any}){
+    this.logger.debug('[CONV-COMP] onCloseDialog data returned ', event)
+    switch(event.type){
+      case 'back':
+        this.mydialog.nativeElement.close()
+        break;
+      case 'confirm':
+        this.tiledeskRequestService.closeSupportGroup(this.conversationId).then(data => {
+          if(data === 'closed'){
+            this.mydialog.nativeElement.close()
+            this.logger.debug('[CONV-COMP] chat closed successfully with uid ', this.conversationId) 
+          }
+        }).catch(error => {
+          this.logger.error('[CONV-COMP] ERROR while closing chat with id: ', this.conversationId, error)
+        })
+        break;
+    }
+    
+    
   }
+
   /** CALLED BY: conv-header component */
   onRestartChat(){
     //restart SAME conversation calling /start againg

package/src/app/modals/confirm-close/confirm-close.component.html

@@ -1,5 +1,32 @@
 <div class="modal-container">
-    CLOSE CONVERSATION MODAL
+    <div class="header">
+        <!-- ICON CLOSE CHAT -->
+        <button tabindex="-1" class="c21-header-button c21-right c21-close c21-button-clean" (click)="onBack()">
+            <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('themeColor') }" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+                <path fill="none" d="M0 0h24v24H0V0z" />
+                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                <title id="altIconTitle">{{ translationMap?.get('CLOSE') }}</title>
+            </svg>
+        </button>
+    </div>
+    <div class="content">
+        <div class="text">Are you sure you wanna close this chat?</div>
+        <div class="options">
+
+            <!-- BUTTON CANCEL-->
+            <span class="v-align-center c21-label-button back-button" (click)="onBack()">
+                {{translationMap?.get('BACK')}}
+            </span> 
+
+            <!-- BUTTON CLOSE-->
+            <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="onConfirm()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('themeForegroundColor') }">
+                <span class="v-align-center c21-label-button">
+                    {{translationMap?.get('CLOSE_CHAT')}}
+                </span> 
+                <div class="clear"></div>
+            </button>
+        </div>
+    </div>
 </div>
 
 

package/src/app/modals/confirm-close/confirm-close.component.scss

@@ -0,0 +1,51 @@
+.modal-container{
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.header{
+    display: flex;
+    justify-content: flex-end;
+}
+
+.content{
+    font-size: 1.2em;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    .text{
+        max-width: calc(100% - 30px);
+    }
+    .options{
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 15px;
+
+        &:hover{
+            cursor: pointer;
+        }
+
+        .back-button{
+            color: #777777
+        }
+
+    }
+
+    
+}
+
+.c21-header-button{
+    width: 30px;
+    height: 30px;
+}
+
+button.c21-button-primary{
+    margin: 0 !important;
+    height: 30px !important;
+
+    .c21-label-button{
+        margin: 0 !important;
+    }
+}

package/src/app/modals/confirm-close/confirm-close.component.ts

@@ -1,4 +1,5 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+
 
 @Component({
   selector: 'chat-confirm-close',
@@ -7,18 +8,26 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 })
 export class ConfirmCloseComponent implements OnInit{
   
-  @ViewChild('mydialog') mydialog: ElementRef;
+  @Input() translationMap: Map< string, string>;
+  @Input() stylesMap: Map<string, string>;
+  @Output() onDiaglogClosed = new EventEmitter<{type: string, data: any}>();
 
   constructor() { }
 
   ngOnInit(): void {
-    // console.log('[CONFIRM CLOSE MODAL] onInit-->', this.dialog);
+    console.log('[CONFIRM CLOSE MODAL] onInit');
     // this.dialog.showModal();
   }
 
   ngAfterViewInit(){
-    // console.log('[CONFIRM CLOSE MODAL] ngAfterViewInit-->', this.mydialog);
-    // this.mydialog.nativeElement.showModal()
+  }
+
+  onBack(){
+    this.onDiaglogClosed.emit({type: 'back', data: null});
+  }
+
+  onConfirm(){
+    this.onDiaglogClosed.emit({type: 'confirm', data: null});
   }
 
 }

package/src/assets/i18n/en.json

@@ -55,6 +55,7 @@
     "CLOSE_CHAT": "Close chat",
     "MINIMIZE":"Minimize",
     "MAXIMIZE":"Maximize",
+    "CONFIRM_CLOSE_CHAT":"Are you sure you wanna close this chat?",
     
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"you",
     "INFO_SUPPORT_USER_ADDED_YOU_VERB":"have been added to ",

package/src/assets/i18n/es.json

@@ -55,6 +55,7 @@
     "CLOSE_CHAT": "Cerrar chat",
     "MINIMIZE":"Minimizar",
     "MAXIMIZE":"Maximizar",
+    "CONFIRM_CLOSE_CHAT":"¿Estás segura de que quieres cerrar este chat?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tú",
     "INFO_SUPPORT_USER_ADDED_YOU_VERB":"han sido agregados a ",

package/src/assets/i18n/fr.json

@@ -55,6 +55,7 @@
     "CLOSE_CHAT": "Fermer le chat",
     "MINIMIZE":"Minimiser",
     "MAXIMIZE":"Maximiser",
+    "CONFIRM_CLOSE_CHAT":"Etes-vous sûr de vouloir fermer cette discussion?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"toi",
     "INFO_SUPPORT_USER_ADDED_YOU_VERB":"ont été ajoutés à ",

package/src/assets/i18n/it.json

@@ -55,6 +55,7 @@
     "CLOSE_CHAT": "Chiudi chat",
     "MINIMIZE":"Minimizza",
     "MAXIMIZE":"Massimizza",
+    "CONFIRM_CLOSE_CHAT":"Vuoi davvero chiudere questa chat?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tu",
     "INFO_SUPPORT_USER_ADDED_YOU_VERB":"sei stato aggiunto ",