@chat21/chat21-web-widget 5.0.89-rc.1 → 5.0.89-rc.2

package/CHANGELOG.md

@@ -6,6 +6,9 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.0.89-rc.2
+- minor fix
+
 # 5.0.89-rc.1
 - **added**: remove recipientId from storage after conversation is closed
 

package/package.json

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

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

@@ -93,6 +93,7 @@
 
     <dialog #mydialog>
         <chat-confirm-close
+            [conversationId]="conversationId"
             [translationMap]="translationMapCloseChatDialog"
             [stylesMap]="stylesMap"
             (onDiaglogClosed)="onCloseDialog($event)">

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

@@ -262,7 +262,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     const keysCloseChatDialog= [
       'BACK', 
       'CLOSE',
-      'CLOSE_CHAT'
+      'CLOSE_CHAT',
+      'CONFIRM_CLOSE_CHAT'
     ];
 
     
@@ -991,6 +992,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   onCloseChat(){
     this.logger.debug('[CONV-COMP] close chat with uid ', this.conversation.uid, this.conversationId)
     this.mydialog.nativeElement.showModal();
+    // this.isClosingConversation = false;
     this.isMenuShow = false
   }
   /** CALLED BY: confirm-close modal component */

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

@@ -10,20 +10,20 @@
         </button>
     </div>
     <div class="content">
-        <div class="text">Are you sure you wanna close this chat?</div>
+        <div class="text">{{ translationMap?.get('CONFIRM_CLOSE_CHAT') }}</div>
         <div class="options">
 
             <!-- BUTTON CANCEL-->
-            <span class="v-align-center c21-label-button back-button" (click)="onBack()">
+            <span class="v-align-center c21-label-button back-button" [class.disabled]="isLoadingActive" (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 *ngIf="isLoadingActive" style="height: inherit; width: inherit;">
-                    <svg xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" with="25" height="25"
+            <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('foregroundColor') }">
+                <span *ngIf="isLoadingActive" class="spinner-container">
+                    <svg xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25" height="25" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }"
                         viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
-                        <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
+                        <path fill="inherit" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                         <animateTransform 
                             attributeName="transform" 
                             attributeType="XML" 

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

@@ -28,12 +28,23 @@
         }
 
         .back-button{
-            color: #777777
+            color: #777777;
+
+            &.disabled{
+                cursor: not-allowed;
+                pointer-events: none;
+                opacity: 0.6
+            }
         }
 
-    }
+        .spinner-container{
+            width: inherit;
+            height: inherit;
+            display: flex;
+            align-items: center;
+        }
 
-    
+    }
 }
 
 .c21-header-button{

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

@@ -1,4 +1,6 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChange, SimpleChanges, ViewChild, OnDestroy } from '@angular/core';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
 
 @Component({
@@ -7,20 +9,33 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild }
   styleUrls: ['./confirm-close.component.scss']
 })
 export class ConfirmCloseComponent implements OnInit{
-  
-  isLoadingActive: boolean = false;
+
+  @Input() isLoadingActive: boolean;
+  @Input() conversationId: string;
 
   @Input() translationMap: Map< string, string>;
   @Input() stylesMap: Map<string, string>;
   @Output() onDiaglogClosed = new EventEmitter<{type: string, data: any}>();
 
+  private logger: LoggerService = LoggerInstance.getInstance();
   constructor() { }
 
   ngOnInit(): void {
-    console.log('[CONFIRM CLOSE MODAL] onInit');
+    this.logger.log('[CONFIRM CLOSE MODAL] onInit', this.isLoadingActive, this.stylesMap);
     // this.dialog.showModal();
   }
 
+  ngOnChanges(changes: SimpleChanges){
+    if(changes && 
+      changes['conversationId'] && 
+      changes['conversationId'].previousValue !== undefined && 
+      (changes['conversationId'].previousValue !== changes['conversationId'].currentValue) &&
+      changes['conversationId'].currentValue
+    ){
+    this.isLoadingActive = false;
+  }
+  }
+
   ngAfterViewInit(){
   }