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

package/CHANGELOG.md

@@ -6,6 +6,13 @@
 ### **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
+
 # 5.0.83-rc.2
 - **changed**: ui improvements on audio elements 
 

package/deploy_amazon_beta.sh

@@ -2,7 +2,12 @@
 version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
 
-ng build --configuration="pre" --aot=true --base-href --output-hashing none --build-optimizer=true
+ng build --configuration="pre" --aot=true --base-href --build-optimizer=true
+
+### SET HASHING : START ###
+cp ./src/launch_template.js ./dist/launch.js
+node ./src/build_launch.js
+### SET HASHING : END ###
 
 # ########## --->>>> NATIVE-MQTT folder START <<<<<------ ########## #
 
@@ -23,11 +28,13 @@ ng build --configuration="pre" --aot=true --base-href --output-hashing none --bu
 
 # ########## --->>>> FIREBASE folder START <<<<<------ ########## #
 cd dist
-aws s3 sync . s3://tiledesk-widget-pre/v5/$version/ --cache-control max-age=300
-aws s3 sync . s3://tiledesk-widget-pre/v5/ --cache-control max-age=300
+aws s3 sync . s3://tiledesk-widget-pre/v5/$version/ --cache-control max-age=300 --exclude='launch.js' #7days
+aws s3 sync . s3://tiledesk-widget-pre/v5/$version/ --cache-control "no-store,no-cache,private" --exclude='*' --include='launch.js'
+aws s3 sync . s3://tiledesk-widget-pre/v5/ --cache-control max-age=300 --exclude='launch.js' #7days
+aws s3 sync . s3://tiledesk-widget-pre/v5/ --cache-control "no-store,no-cache,private" --exclude='*' --include='launch.js'
 cd ..
 
-#aws  cloudfront create-invalidation --distribution-id E3EJDWEHY08CZZ --paths "/*"
+aws  cloudfront create-invalidation --distribution-id E2V5O0YPR61V8P --paths "/*"
 # echo new version deployed $NEW_VER/$NEW_BUILD/ on s3://tiledesk-widget-pre/v2
 echo new version deployed $version/ on s3://tiledesk-widget-pre/v5 and s3://tiledesk-widget-pre/v5/$version/
 echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-widget-pre/v5/index.html

package/deploy_amazon_prod.sh

@@ -3,7 +3,13 @@ version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
 
 # --build-optimizer=false if localstorage is disabled (webview) appears https://github.com/firebase/angularfire/issues/970
-ng build --configuration="prod" --aot=true --base-href --output-hashing none --build-optimizer=true --vendor-chunk=true
+ng build --configuration="prod" --aot=true   --build-optimizer=true --vendor-chunk=true
+##--base-href='./v5/' --output-hashing none
+
+### SET HASHING : START ###
+cp ./src/launch_template.js ./dist/launch.js
+node ./src/build_launch.js
+### SET HASHING : END ###
 
 #### FIREBASE #####
 # cd dist
@@ -12,12 +18,13 @@ ng build --configuration="prod" --aot=true --base-href --output-hashing none --b
 # aws s3 sync . s3://tiledesk-widget/v5/ --cache-control max-age=300
 # cd ..
 
-
 # #### MQTT #####
 cd dist
 # aws s3 sync . s3://tiledesk-widget/v5/latest/
-aws s3 sync . s3://tiledesk-widget/v6/$version/ --cache-control max-age=300
-aws s3 sync . s3://tiledesk-widget/v6/ --cache-control max-age=300
+aws s3 sync . s3://tiledesk-widget/v6/$version/ --cache-control max-age=86400 --exclude='launch.js' #8days
+aws s3 sync . s3://tiledesk-widget/v6/$version/ --cache-control "no-store,no-cache,private" --exclude='*' --include='launch.js'
+aws s3 sync . s3://tiledesk-widget/v6/ --cache-control max-age=86400 --exclude='launch.js' #8days
+aws s3 sync . s3://tiledesk-widget/v6/ --cache-control "no-store,no-cache,private" --exclude='*' --include='launch.js'
 cd ..
 
 aws  cloudfront create-invalidation --distribution-id E3EJDWEHY08CZZ --paths "/*"

package/package.json

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

package/src/app/app.module.ts

@@ -135,6 +135,7 @@ import { ScriptService } from 'src/chat21-core/providers/scripts/script.service'
 import { CarouselComponent } from './component/message/carousel/carousel.component';
 import { BrandService } from './providers/brand.service';
 import { NetworkOfflineComponent } from './component/network-offline/network-offline.component';
+import { ConfirmCloseComponent } from './modals/confirm-close/confirm-close.component';
 
 
 
@@ -300,7 +301,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     TooltipDirective,
     CarouselComponent,
     NetworkOfflineComponent,
-    
+    ConfirmCloseComponent
   ],
   imports: [
     BrowserModule,

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

@@ -90,6 +90,15 @@
         (onCloseModalPreview)="onCloseModalPreview()">
     </chat-conversation-attachment-preview>
 
+
+    <dialog #mydialog>
+        <chat-confirm-close
+            [translationMap]="translationMapCloseChatDialog"
+            [stylesMap]="stylesMap"
+            (onDiaglogClosed)="onCloseDialog($event)">
+        </chat-confirm-close>
+    </dialog>
+
     <!-- FOOTER -->
     <!-- [class.maximize-width]="(g?.singleConversation && hideTextAreaContent) || (isConversationArchived && !g?.allowReopen)" -->
     <div id="chat21-footer">

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

@@ -50,6 +50,8 @@ import { ConversationContentComponent } from '../conversation-content/conversati
 })
 export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   @ViewChild('afConversationComponent') private afConversationComponent: ElementRef; // l'ID del div da scrollare
+  @ViewChild('mydialog') mydialog: ElementRef;
+
   // @HostListener('window:resize', ['$event'])
   // ========= begin:: Input/Output values
   // @Input() elRoot: ElementRef;
@@ -136,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;
@@ -255,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() {
@@ -978,19 +988,42 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   }
   /** CALLED BY: conv-header component */
   onCloseChat(){
-    this.logger.debug('[CONV-COMP] close chat with uid ', this.conversation.uid)
-    this.tiledeskRequestService.closeSupportGroup(this.conversation.uid).then(data => {
-      if(data === 'closed'){
-        this.isMenuShow = false
-        this.logger.debug('[CONV-COMP] chat closed successfully with uid ', this.conversation.uid)
-      }
-    }).catch(error => {
-      this.logger.error('[CONV-COMP] ERROR while closing chat with id: ', this.conversation.uid, error)
-    })
+    this.logger.debug('[CONV-COMP] close chat with uid ', this.conversation.uid, this.conversationId)
+    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(){
-    this.hideTextAreaContent = true
+    //restart SAME conversation calling /start againg
+    let attributes = {
+      subtype: 'info',
+      ... this.g.attributes
+    }
+    this.conversationFooter.sendMessage('/start', TYPE_MSG_TEXT, null, attributes) 
+
+    // this.hideTextAreaContent = true
   }
   /** CALLED BY: conv-header component */
   onWidgetHeightChange(mode){

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

@@ -0,0 +1,33 @@
+<div class="modal-container">
+    <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.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmCloseComponent } from './confirm-close.component';
+
+describe('ConfirmCloseComponent', () => {
+  let component: ConfirmCloseComponent;
+  let fixture: ComponentFixture<ConfirmCloseComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConfirmCloseComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ConfirmCloseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,33 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+
+
+@Component({
+  selector: 'chat-confirm-close',
+  templateUrl: './confirm-close.component.html',
+  styleUrls: ['./confirm-close.component.scss']
+})
+export class ConfirmCloseComponent implements OnInit{
+  
+  @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.showModal();
+  }
+
+  ngAfterViewInit(){
+  }
+
+  onBack(){
+    this.onDiaglogClosed.emit({type: 'back', data: null});
+  }
+
+  onConfirm(){
+    this.onDiaglogClosed.emit({type: 'confirm', data: null});
+  }
+
+}

package/src/app/utils/BrandResources.ts

@@ -25,6 +25,14 @@ export class BrandResources {
         // var icon = document.querySelector("link[rel~='icon']") as HTMLElement;
         // icon.setAttribute('href', this.brand['FAVICON_URL'])
 
+        /** META sharing ELEMENTS */
+        if(this.brand['META_SHARE_INFO'] && this.brand['META_SHARE_INFO'].length > 0){
+            Object.keys(this.brand['META_SHARE_INFO']).forEach(key => {
+                var meta = document.querySelector("meta[property^='og:"+key.toLowerCase()+"']") as HTMLElement;
+                meta.setAttribute('content', this.brand['META_SHARE_INFO'][key])
+            })
+        }
+        
         /** CSS */
         document.documentElement.style.setProperty('--base-brand-color', this.brand['BRAND_PRIMARY_COLOR']);
 

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 ",