@chat21/chat21-web-widget 5.1.32-rc9 → 5.1.33-rc11

package/src/app/component/home/home.component.scss

@@ -90,7 +90,7 @@
                         max-height: 2.4em;
                         font-weight: 400;
                         font-size: 3.0em; 
-                        margin-bottom: 10px;
+                        margin: 0 0 10px 0;
                     }
                     .c21-text-intro {
                         display: inline-block;
@@ -98,6 +98,7 @@
                         font-weight: 300;
                         line-height: 1.2em;
                         max-height: 2.4em;
+                        margin: 0;
                     }
                 }
             }
@@ -132,7 +133,7 @@
                         max-height: 3em; //2.4em;
                         font-weight: 200;
                         font-size: 2.5em; //3.0em; 
-                        margin-bottom: 15px; //10px;
+                        margin: 0 0 15px 0;
                     }
                     .c21-text-intro {
                         display: inline-block;
@@ -140,6 +141,7 @@
                         font-weight: 600; //400;
                         line-height: 1.2em;
                         max-height: 2.4em;
+                        margin: 0;
                     }
                 }
             }

package/src/app/component/home/home.component.spec.ts

@@ -1,8 +1,14 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
 import { NGXLogger } from 'ngx-logger';
+import { ConversationModel } from 'src/chat21-core/models/conversation';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { HEADER_MENU_OPTION } from '../../utils/constants';
 import { Globals } from '../../utils/globals';
 
 import { HomeComponent } from './home.component';
@@ -10,31 +16,240 @@ import { HomeComponent } from './home.component';
 describe('HomeComponent', () => {
   let component: HomeComponent;
   let fixture: ComponentFixture<HomeComponent>;
-  let ngxlogger: NGXLogger;
-  let customLogger = new CustomLogger(ngxlogger)
+  let globals: Globals;
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+
+  const tiledeskAuthStub = {
+    getCurrentUser: jasmine.createSpy('getCurrentUser').and.returnValue({
+      uid: 'u-1',
+      firstname: 'Ada',
+      lastname: 'Lovelace',
+      email: 'ada@example.com',
+    }),
+  };
+
+  const translateStub = {
+    translateLanguage: jasmine.createSpy('translateLanguage').and.callFake((keys: string[]) => {
+      const m = new Map<string, string>();
+      keys.forEach((k) => m.set(k, `T:${k}`));
+      return m;
+    }),
+  };
 
   beforeEach(waitForAsync(() => {
+    LoggerInstance.setInstance(new CustomLogger(ngxlogger));
     TestBed.configureTestingModule({
-      declarations: [ HomeComponent ],
+      declarations: [HomeComponent],
       providers: [
         Globals,
-        NGXLogger
+        { provide: NGXLogger, useValue: ngxlogger },
+        { provide: TiledeskAuthService, useValue: tiledeskAuthStub },
+        { provide: CustomTranslateService, useValue: translateStub },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
-    })
-    .compileComponents();
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(HomeComponent);
     component = fixture.componentInstance;
-    let loggerInstance = LoggerInstance.setInstance(customLogger)
-    let logger = LoggerInstance.getInstance()
-    component['logger']= logger
+    globals = TestBed.inject(Globals);
+    globals.initDefafultParameters();
+    globals.welcomeTitle = 'Benvenuto';
+    globals.welcomeMsg = 'Intro';
+    globals.themeForegroundColor = '#fff';
+    globals.colorGradient = 'linear-gradient(red,blue)';
+    globals.project = { logoChat: 'nologo' } as any;
+    globals.poweredBy = '<a href="https://brand.example"><span id="pb-inner">Logo</span></a>';
+    globals.whatsappNumber = '1234567890';
+    globals.telegramUsername = '';
+    globals.messangerPageTitle = '';
+
+    component.listConversations = [];
+    component.archivedConversations = [];
+    component.hideSettings = true;
+    component.hideNewConversationButton = false;
+    component.stylesMap = new Map([
+      ['themeColor', '#111'],
+      ['foregroundColor', '#fff'],
+    ]);
+    component.size = 'min';
+    component.fullscreenMode = false;
+    component.hideHeaderConversationOptionsMenu = false;
+    component.isButtonsDisabled = false;
+    component.translationMap = new Map([
+      ['MAXIMIZE', 'Massimizza'],
+      ['MINIMIZE', 'Riduci'],
+      ['CENTER', 'Centra'],
+    ]);
+
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('translations and DOM shell', () => {
+    it('initiTranslations should fill header/footer maps via CustomTranslateService', () => {
+      component.initiTranslations();
+      expect(component.translationMapHeader?.get('BUTTON_CLOSE_TO_ICON')).toBe('T:BUTTON_CLOSE_TO_ICON');
+      expect(component.translationMapFooter?.get('SWITCH_TO')).toBe('T:SWITCH_TO');
+    });
+
+    it('should render region root, welcome title and close control', () => {
+      const region = fixture.debugElement.query(By.css('#chat21-home-component'));
+      expect(region).toBeTruthy();
+      const h1 = fixture.nativeElement.querySelector('.c21-text-welcome') as HTMLElement;
+      expect(h1.textContent).toContain('Benvenuto');
+      const closeBtn = fixture.debugElement.query(By.css('.c21-close-button-body'));
+      expect(closeBtn).toBeTruthy();
+    });
+
+    it('should set region aria-label from welcomeTitle (accessibility / MCP home shell)', () => {
+      globals.welcomeTitle = 'Ciao, benvenuto su BrandExample';
+      fixture.detectChanges();
+      const host = fixture.nativeElement.querySelector('#chat21-home-component') as HTMLElement;
+      expect(host.getAttribute('aria-label')).toBe('Ciao, benvenuto su BrandExample');
+    });
+
+    it('should render welcome intro paragraph when welcomeMsg is set', () => {
+      globals.welcomeMsg = 'Come possiamo aiutarti?';
+      fixture.detectChanges();
+      const intro = fixture.nativeElement.querySelector('.c21-text-intro') as HTMLElement;
+      expect(intro.textContent).toContain('Come possiamo aiutarti?');
+    });
+  });
+
+  describe('outputs and actions', () => {
+    it('f21_close should emit onCloseWidget and add start-animation class', () => {
+      spyOn(component.onCloseWidget, 'emit');
+      component.f21_close();
+      expect(component.onCloseWidget.emit).toHaveBeenCalled();
+      const root = fixture.debugElement.query(By.css('#chat21-home-component')).nativeElement as HTMLElement;
+      expect(root.classList.contains('start-animation')).toBe(true);
+    });
+
+    it('onChangeSize should emit correct HEADER_MENU_OPTION', () => {
+      spyOn(component.onMenuOptionClick, 'emit');
+      component.onChangeSize('min');
+      component.onChangeSize('max');
+      component.onChangeSize('top');
+      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.MINIMIZE);
+      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.MAXIMIZE);
+      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.TOP);
+    });
+
+    it('onNewConversationFN should emit onNewConversation and strip animation', () => {
+      spyOn(component.onNewConversation, 'emit');
+      const root = fixture.debugElement.query(By.css('#chat21-home-component')).nativeElement as HTMLElement;
+      root.classList.add('start-animation');
+      component.onNewConversationFN();
+      expect(component.onNewConversation.emit).toHaveBeenCalled();
+      expect(root.classList.contains('start-animation')).toBe(false);
+    });
+
+    it('onConversationSelectedFN should emit conversation', () => {
+      spyOn(component.onConversationSelected, 'emit');
+      const conv = { uid: 'c1' } as ConversationModel;
+      component.onConversationSelectedFN(conv);
+      expect(component.onConversationSelected.emit).toHaveBeenCalledWith(conv);
+    });
+
+    it('onConversationSelectedFN should ignore null', () => {
+      spyOn(component.onConversationSelected, 'emit');
+      component.onConversationSelectedFN(null as any);
+      expect(component.onConversationSelected.emit).not.toHaveBeenCalled();
+    });
+
+    it('onOpenAllConversation should emit onOpenAllConvesations', () => {
+      spyOn(component.onOpenAllConvesations, 'emit');
+      component.onOpenAllConversation();
+      expect(component.onOpenAllConvesations.emit).toHaveBeenCalled();
+    });
+
+    it('onSignOutFN should emit onSignOut', () => {
+      spyOn(component.onSignOut, 'emit');
+      component.onSignOutFN();
+      expect(component.onSignOut.emit).toHaveBeenCalled();
+    });
+
+    it('onImageLoadedFN / onConversationLoadedFN should forward emits', () => {
+      spyOn(component.onImageLoaded, 'emit');
+      spyOn(component.onConversationLoaded, 'emit');
+      const c = { uid: 'x' } as ConversationModel;
+      component.onImageLoadedFN(c);
+      component.onConversationLoadedFN(c);
+      expect(component.onImageLoaded.emit).toHaveBeenCalledWith(c);
+      expect(component.onConversationLoaded.emit).toHaveBeenCalledWith(c);
+    });
+  });
+
+  describe('hideMenuOptions and openConversationOnPlatform', () => {
+    it('hideMenuOptions should set isOpenMenuOptions on Globals', () => {
+      spyOn(globals, 'setParameter');
+      component.hideMenuOptions();
+      expect(globals.setParameter).toHaveBeenCalledWith('isOpenMenuOptions', false, true);
+    });
+
+    it('openConversationOnPlatform should open external URLs', () => {
+      spyOn(window, 'open');
+      globals.telegramUsername = 'mybot';
+      globals.whatsappNumber = '39333';
+      globals.messangerPageTitle = 'mypage';
+      component.openConversationOnPlatform('telegram');
+      component.openConversationOnPlatform('whatsapp');
+      component.openConversationOnPlatform('messanger');
+      expect(window.open).toHaveBeenCalledWith('https://telegram.me/mybot', '_blank');
+      expect(window.open).toHaveBeenCalledWith(jasmine.stringMatching(/^https:\/\/wa\.me\/39333/), '_blank');
+      expect(window.open).toHaveBeenCalledWith('https://m.me/mypage', '_blank');
+    });
+  });
+
+  describe('managePoweredBy and analytics', () => {
+    it('managePoweredBy should open parent anchor href', () => {
+      spyOn(window, 'open');
+      const anchor = document.createElement('a');
+      anchor.setAttribute('href', 'https://brand.example');
+      const inner = document.createElement('span');
+      anchor.appendChild(inner);
+      const ev = new MouseEvent('click', { bubbles: true });
+      Object.defineProperty(ev, 'target', { value: inner, configurable: true });
+      component.managePoweredBy(ev);
+      expect(window.open).toHaveBeenCalledWith('https://brand.example', '_blank');
+    });
+
+    it('segmentLogoClick should invoke analytics when present', () => {
+      (window as any).analytics = {
+        page: jasmine.createSpy('page'),
+        identify: jasmine.createSpy('identify'),
+        track: jasmine.createSpy('track'),
+      };
+      (component as any).segmentLogoClick();
+      expect((window as any).analytics.page).toHaveBeenCalled();
+      expect((window as any).analytics.identify).toHaveBeenCalled();
+      expect((window as any).analytics.track).toHaveBeenCalled();
+      delete (window as any).analytics;
+    });
+  });
+
+  describe('ngAfterViewInit', () => {
+    it('should add animation only on first open then clear flag', () => {
+      globals.firstOpen = true;
+      component.ngAfterViewInit();
+      const root = fixture.debugElement.query(By.css('#chat21-home-component')).nativeElement as HTMLElement;
+      expect(root.classList.contains('start-animation')).toBe(true);
+      expect(globals.firstOpen).toBe(false);
+    });
+
+    it('should focus aflistconv after delay when present', fakeAsync(() => {
+      const btn = document.createElement('button');
+      btn.setAttribute('aflistconv', '');
+      spyOn(btn, 'focus');
+      (component as any).aflistconv = { nativeElement: btn };
+      component.ngAfterViewInit();
+      tick(1000);
+      expect(btn.focus).toHaveBeenCalled();
+    }));
+  });
 });

package/src/app/component/home-conversations/home-conversations.component.html

@@ -1,32 +1,34 @@
 <div id='c21-app-list-conversations'>
-<!-- tabindex="1100"-->
 
   <div class="c21-header">
     <div *ngIf="checkShowAllConversation()">
         <div class="c21-title">{{g.PREV_CONVERSATIONS}}</div>
 
-        <div *ngIf="g.showAllConversations == true" class="c21-button" (click)="returnOpenAllConversation()">
-          <div style="display:inline-block; line-height: 40px; margin-right: 10px;" (click)="returnOpenAllConversation()">{{g.SHOW_ALL_CONV}} </div>
-          <button tabindex="1101" aria-label=" tutte le conversazioni" class="c21-button-clean">
-            <!-- <svg xmlns="http://www.w3.org/2000/svg" [ngStyle]="{'fill': g.themeColor }" width="18" height="18" viewBox="0 0 24 24">
-              <path fill="none" d="M0 0h24v24H0V0z" />
-              <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7zm-4 6h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
-            </svg> -->
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
-              <path d="M1.9,15.4h16.2v-1.8H1.9V15.4z M1.9,10.9h16.2V9.1H1.9V10.9z M1.9,4.6v1.8h16.2V4.6H1.9z"/>
-            </svg>
-          </button>
-        </div>
+        <button *ngIf="g.showAllConversations == true"
+            type="button"
+            class="c21-button c21-button-clean"
+            [attr.aria-label]="g.SHOW_ALL_CONV"
+            (click)="returnOpenAllConversation()">
+          <span style="display:inline-block; line-height: 40px; margin-right: 10px;">{{g.SHOW_ALL_CONV}} </span>
+          <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+            <path d="M1.9,15.4h16.2v-1.8H1.9V15.4z M1.9,10.9h16.2V9.1H1.9V10.9z M1.9,4.6v1.8h16.2V4.6H1.9z"/>
+          </svg>
+        </button>
 
     </div>
     <div *ngIf="!checkShowAllConversation()">
       <div class="c21-title">{{g.NO_CONVERSATION}}</div>
-      <div *ngIf="listConversations && listConversations.length > 0" class="c21-button" (click)="returnOpenAllConversation()">
-          <div style="display:inline-block; line-height: 40px; margin-right: 10px;">{{g.SHOW_ALL_CONV}}</div>
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+      <div *ngIf="listConversations && listConversations.length > 0">
+        <button type="button"
+            class="c21-button c21-button-clean"
+            [attr.aria-label]="g.SHOW_ALL_CONV"
+            (click)="returnOpenAllConversation()">
+          <span style="display:inline-block; line-height: 40px; margin-right: 10px;">{{g.SHOW_ALL_CONV}}</span>
+          <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
             <path fill="none" d="M0 0h24v24H0V0z" />
             <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7zm-4 6h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
           </svg>
+        </button>
       </div>
     </div>
   </div>
@@ -63,15 +65,18 @@
           <div *ngIf="isImageLoaded(agent)" #avatarImage class="c21-avatar-image" [style.background-image]="'url(' + agent.imageurl + ')'"></div>
         </div>
       </div>
-      <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openNewConversation()" [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor, 'color': g.themeForegroundColor }">
+      <button type="button" aflistconv #aflistconv class="c21-button-primary"
+          [attr.aria-label]="g.LABEL_START_NW_CONV"
+          (click)="openNewConversation()"
+          [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor, 'color': g.themeForegroundColor }">
         <span class="v-align-center">
-            <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
               <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"  [ngStyle]="{'fill': g.themeForegroundColor}"/>
             </svg>
           </span>
           <span class="v-align-center c21-label-button">
             {{g.LABEL_START_NW_CONV}}
-          </span> 
+          </span>
           <div class="clear"></div>
       </button>
     </div>
@@ -88,16 +93,15 @@
         (onConversationLoaded)="onConversationLoadedFN($event)">
       </chat-list-conversations>
 
-      <div class="c21-new-conversation" > 
-        <!--  *ngIf="this.g.supportMode" -->
-        <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openNewConversation()" [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor, 'color': g.themeForegroundColor }">
+      <div class="c21-new-conversation">
+        <button type="button" aflistconv #aflistconv class="c21-button-primary"
+            [attr.aria-label]="g.LABEL_START_NW_CONV"
+            (click)="openNewConversation()"
+            [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor, 'color': g.themeForegroundColor }">
           <span class="v-align-center">
-              <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+              <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                 <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"  [ngStyle]="{'fill': g.themeForegroundColor}"/>
               </svg>
-              <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"  width="20" height="20" style="enable-background:new 0 0 20 20;" xml:space="preserve" >
-                <path d="M16.3,10.9h-5.4v5.4H9.1v-5.4H3.7V9.1h5.4V3.7h1.8v5.4h5.4V10.9z" [ngStyle]="{'fill': g.themeForegroundColor}"/>
-              </svg> -->
             </span>
             <span class="v-align-center c21-label-button">
               <!-- {{LABEL_START_NW_CONV}} -->

package/src/app/component/home-conversations/home-conversations.component.scss

@@ -31,6 +31,9 @@
             padding: 0px 5px;
             float: right;
             fill: var(--blue);
+            color: var(--dark-gray);
+            font-weight: 300;
+            align-items: center;
             button {
                 width: 40px;
                 height: 40px;