@chat21/chat21-ionic 3.0.107-rc.3 → 3.0.107-rc.5

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

@@ -43,6 +43,12 @@ ion-content {
   }
 }
 
+app-project-item{
+  width: 100%; 
+  margin: 0px 8px; 
+  border-bottom: 1px dashed var(--border-color-base);
+}
+
 ion-list {
   display: block;
   margin-block-start: 1em;
@@ -119,23 +125,6 @@ ion-list {
       font-family: Helvetica, Helvetica, Arial, sans-serif;
       line-height: 1.28;
       text-rendering: optimizeLegibility;
-      .conversation_with {
-        color: rgba(0, 0, 0, 1);
-        font-size: 15px;
-        font-weight: 400;
-        line-height: 1.4;
-      }
-      .conversation_message {
-        p {
-          color: rgba(153, 153, 153, 1);
-          font-size: 13px;
-          font-weight: 400;
-          height: 18px;
-          &.not-read {
-            font-weight: bold;
-          }
-        }
-      }
     }
     ion-note {
       position: absolute;

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

@@ -52,6 +52,7 @@ import { WebsocketService } from 'src/app/services/websocket/websocket.service';
 import { Globals } from 'src/app/utils/globals';
 import { TriggerEvents } from 'src/app/services/triggerEvents/triggerEvents';
 import { MessageModel } from 'src/chat21-core/models/message';
+import { Project } from 'src/chat21-core/models/projects';
 
 @Component({
   selector: 'app-conversations-list',
@@ -102,7 +103,7 @@ export class ConversationListPage implements OnInit {
   public isInitialized: boolean = false;
 
   // PROJECT AVAILABILITY INFO: start
-  project: { _id: string, name: string, type: string, isActiveSubscription: boolean, plan_name: string}
+  project: Project
   profile_name_translated: string;
   selectedStatus: any;
   teammateStatus = [
@@ -475,35 +476,25 @@ export class ConversationListPage implements OnInit {
         this.project = {
           _id: projectObjct['id_project']['_id'],
           name: projectObjct['id_project']['name'],
-          type: projectObjct['id_project']['profile']['type'],
+          profile: projectObjct['id_project']['profile'],
           isActiveSubscription: projectObjct['id_project']['isActiveSubscription'],
-          plan_name: projectObjct['id_project']['profile']['name']
+          trialExpired: projectObjct['id_project']['trialExpired']
         }
 
-        const trial_expired = projectObjct['id_project']['trialExpired']    
-        const profile_name = projectObjct['id_project']['profile']['name'];
-      
-        if (this.project.type === 'free') {
+        if (this.project.profile.type === 'free') {
 
-          if (trial_expired === false) {
+          if (this.project.trialExpired === false) {
             this.profile_name_translated = this.translationMapHeader.get('ProPlanTrial');
-          } else if (trial_expired === true) {
+          } else if (this.project.trialExpired === true) {
              this.profile_name_translated = this.translationMapHeader.get('FreePlan');
           }
-        } else if (this.project.type === 'payment' && profile_name === 'pro') {
+        } else if (this.project.profile.type === 'payment' && this.project.profile.name === 'pro') {
           this.profile_name_translated = this.translationMapHeader.get('PaydPlanNamePro');
-        } else if (this.project.type === 'payment' && profile_name === 'enterprise') {
+        } else if (this.project.profile.type === 'payment' && this.project.profile.name === 'enterprise') {
           this.profile_name_translated = this.translationMapHeader.get('PaydPlanNameEnterprise');
         }
       }
     })
-
-    try {
-      // this.tiledeskToken = this.appStorageService.getItem('tiledeskToken');
-      // console.log('[SIDEBAR-USER-DETAILS] - GET STORED TOKEN ', this.tiledeskToken)
-    } catch (err) {
-      this.logger.error('[CONVS-LIST-PAGE] - GET STORED TOKEN ', err)
-    }
   }
 
   listenTocurrentProjectUserUserAvailability$() {

package/src/app/pages/profile-info/profile-info.page.html

@@ -108,17 +108,17 @@
         <span class="material-icons user-details-plan-icon">apps</span>
         <span>
             <div> {{project?.name}} </div>
-            <div style="display: inline-block;    margin-left: 26px;"> {{ profile_name_translated }} </div>
+            <div style="margin-left: 26px;"> {{ profile_name_translated }} </div>
 
-            <div *ngIf="project?.type === 'payment' && project?.isActiveSubscription === false"
+            <div *ngIf="project?.profile?.type === 'payment' && project?.isActiveSubscription === false"
                 style="color:#f44336; position:relative; top: -1px;display: inline-block;">
-                <i *ngIf="project?.plan_name !== 'enterprise'" class="material-icons" style="vertical-align: middle; color:#f44336; cursor:pointer;    
+                <i *ngIf="project?.profile?.name !== 'enterprise'" class="material-icons" style="vertical-align: middle; color:#f44336; cursor:pointer;    
                     font-size: 16px;" matTooltipClass="custom-mat-tooltip"
                     matTooltip="{{ translationsMap.get('SubscriptionPaymentProblem') }}" #tooltip="matTooltip" matTooltipPosition='right'
                     matTooltipHideDelay="100">
                     error_outline
                 </i>
-                <i *ngIf="project?.plan_name === 'enterprise'" class="material-icons" style="vertical-align: middle; color:#f44336; cursor:pointer;    
+                <i *ngIf="project?.profile?.name === 'enterprise'" class="material-icons" style="vertical-align: middle; color:#f44336; cursor:pointer;    
                     font-size: 16px;" matTooltipClass="custom-mat-tooltip" matTooltip="{{ translationsMap.get('ThePlanHasExpired') }}"
                     #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
                     error_outline

package/src/app/pages/profile-info/profile-info.page.scss

@@ -71,13 +71,20 @@
 ion-toolbar{
     position: absolute;
     z-index: 2;
-    --ion-toolbar-background: transparent;
+    --background: transparent;
+
+    ion-icon{
+        color: var(--sidebar-icon-color);
+        &:hover {
+            opacity: 0.8 !important;
+        }
+    }
 }
 
 .availability-section {
     // top: 320px;
     text-align: center;
-    background-color: #2d323e;
+    background-color: var(--user-detail-select-background);
     padding: 4px 0px;
     width: 192px;
     border-radius: 4px;
@@ -91,14 +98,14 @@ ion-toolbar{
 .first-divider {
     // margin-top: 365px;
     border: 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    border-top: 1px solid var(--border-color-base);
     margin-bottom: 20px;
 }
 
 .user-details-plan-info {
     font-size: 13px;
     text-transform: capitalize;
-    color: #a9afbb;
+    color: var(--sidebar-user-detail-color);
     font-weight: 500;
     line-height: 21px;
 }
@@ -125,12 +132,15 @@ ion-toolbar{
     z-index: 1;
     // bottom: 50px;
     // bottom: 55px;
+    :hover .user-details-logout-icon,
+    :hover  .user-details-logout-text{
+        color: var(--sidebar-hover-icon-color);
+    }
     
 }
 
 .logout-btn-wpr {
     cursor: pointer;
-    color: #fff;
 }
 
 .footer-margin-top-pricing-no-visible {
@@ -138,13 +148,16 @@ ion-toolbar{
 }
 
 .user-details-logout-icon {
-    color: #a9afbb;
+    color: var(--sidebar-icon-color);
     font-size: 30px;
     // margin-top: 30px;
 }
 
 .user-details-logout-icon:hover {
-    color: #fff;
+    color: var(--sidebar-icon-color);
+}
+.user-details-logout-text{
+    color: var(--sidebar-icon-color);
 }
 
 
@@ -152,7 +165,7 @@ ion-toolbar{
     width: 100%;
     height: 100%;
     font-family: "Poppins";
-    --ion-background-color:#2d323e;
+    --ion-background-color:var(--sidebar-background-color);
     
     .buttons-header{
         position: absolute;
@@ -161,7 +174,6 @@ ion-toolbar{
     }
 
     .content-user-profile {
-        background-color: #2d323e;
         width: 100%;
         height: 230px;
         .user {
@@ -173,23 +185,31 @@ ion-toolbar{
             min-height: 160px;
             max-height: 160px;
             display: block;
-            background-color: #1e2129;
-            color: #fff;
+            background-color: var(--sidebar-header-background);
+            color: var(--sidebar-color);
             padding-top: 40px;
         }
         .email {
-            color: rgba(255,255,255,.5); 
-            font-size: 13px; 
+            font-size: 14px; 
             margin-top: 5px; 
-            font-weight: bold;
-            line-height: 1.4em;
-            margin-bottom: 15px;
+            font-family: "Poppins";
+            font-weight: 400;
+            line-height: 19px;
+            white-space: nowrap;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
         .username {
             font-size: 16px;
-            font-weight: bold;
+            font-family: "Poppins";
+            font-weight: 500;
+            line-height: 24px;
+            white-space: nowrap;
             margin-top: 15px;
             margin-bottom: 5px;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         // ion-toolbar {
@@ -203,8 +223,8 @@ ion-toolbar{
     }
 
     .avatar-container {
-        background-color: #2d323e;
-        color: #fff;
+        background-color:  var(--sidebar-header-background);
+        color: var(--sidebar-color);
         text-align: center;
         position: absolute;
         top: 110px;
@@ -215,9 +235,7 @@ ion-toolbar{
         left: 50%;
         min-width: 100px;
         min-height: 100px;
-        border-color: #2d323e;
-        border-style: solid;
-        border-width: 2px;
+        border: 2px solid  var(--sidebar-header-background);
         line-height: 100px;
         font-size: 32px;
     }
@@ -333,11 +351,11 @@ ion-toolbar{
 
 }
 ion-footer{
-    --ion-background-color: #1e2129;
+    background-color: var(--sidebar-background-color);
     .content-chat-version {
-        color: white;
+        color: var(--sidebar-color);;
         padding: 20px;
-        background-color: #1e2129;
+        text-align: center;
     }
     .chat-title{
         font-size: 14px;

package/src/app/pages/profile-info/profile-info.page.ts

@@ -22,6 +22,7 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { WebsocketService } from 'src/app/services/websocket/websocket.service';
 import { checkPlatformIsMobile, setLastDateWithLabels } from 'src/chat21-core/utils/utils';
+import { Project } from 'src/chat21-core/models/projects';
 
 @Component({
   selector: 'app-profile-info',
@@ -45,7 +46,7 @@ export class ProfileInfoPage implements OnInit {
   @Input() selectedStatus: number;
   @Input() profile_name_translated: string;
   @Input() token: string;
-  @Input() project: { _id: string, name: string, type: string, isActiveSubscription: boolean, plan_name: string}
+  @Input() project: Project;
 
   isVisiblePAY: boolean;
   teammateStatus = [

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

@@ -1,16 +1,16 @@
 <ion-header>
   <ion-toolbar [class.mobile]="isMobile">
+    <ion-buttons slot="start">
+      <ion-button ion-button fill="clear" (click)="onClose()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
     <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>
-      </ion-button>
-    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 

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

@@ -9,7 +9,7 @@ ion-toolbar {
   }
 
   ion-button{
-      --color: var(--basic-blue);
+      --color: var(--icon-color);
   }
 }
 
@@ -18,7 +18,7 @@ ion-content {
   --overflow: hidden;
   overflow: scroll;
   &:not(.mobile){
-    background: var(--list-bkg-color);
+    --background: var(--list-bkg-color);
   }
 
   &::-webkit-scrollbar {

package/src/assets/customStyle.css

@@ -0,0 +1,18 @@
+body.custom{
+    background-color: red;
+    --list-bkg-color: red;
+}
+
+body.light{
+    background-color: green;
+    --list-bkg-color: green;
+}
+
+body.dark{
+    background-color: blue;
+    --list-bkg-color: blue;
+}
+
+body.light .navbar{
+    background-color: red;
+}

package/src/assets/test.html

@@ -10,14 +10,47 @@
 <body style="height: 100%;">
   <div id="titolo">CHAT IONIC TEST PAGE</div>
 
+  <div class="event-wrp" id="onThemeColor">
+    <span class="badge">EVENT</span>
+    <label>themeColor </label>
+    <label class="switch">
+      <input type="checkbox" name="themeColor" onclick="onCLickThemeColor(this)">
+      <span class="slider round"></span>
+    </label>
+  </div>
+
+  <iframe id="myIFrame" frameBorder="0" width="100%" style="display: flex; height: 95vh" onload="onLoad()"
+  src="http://localhost:8080/#/conversation-detail?tiledesk_supportMode=false&jwt=JWT eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1ZmQzNGU0MjQ5NjEwZTAwMzQ5ODUwNzgiLCJlbWFpbCI6ImdhYnJpZWxlLnBhbmljb0Bmcm9udGllcmUyMS5pdCIsImZpcnN0bmFtZSI6IkdhYnJpZWxlMiIsImxhc3RuYW1lIjoiUGFuaWNvIC1wcmUiLCJlbWFpbHZlcmlmaWVkIjp0cnVlLCJpYXQiOjE2OTgzMzYyMTMsImF1ZCI6Imh0dHBzOi8vdGlsZWRlc2suY29tIiwiaXNzIjoiaHR0cHM6Ly90aWxlZGVzay5jb20iLCJzdWIiOiJ1c2VyIiwianRpIjoiNjAzZGY3NDQtZWY0OS00Mjg2LWJlMWQtYWM5OGYyYTNkMTJiIn0.bof5QPQP262yCQfpeSjqyoYPkSCttg5NQFkcV8d634xzeq7wJBdhtiO7IJY6hS81a1YyXrAsxlK7RiNS-UZdYiTXR81UXurQd1fnE9jtaggB82tyNL8vmiZEOs6xh4TqO3-kkBzRxQIp74bY53fk_mu5RmNbAjIgUWEufaNDiv8"></iframe>
+  
   <script>        
     window.addEventListener('message', event => {
         console.log('[CHAT-IONIC] test page event::', event)
-    })
-  </script>
+    });
+
+    function onLoad(){
+      // var cssLink = document.createElement("style");
+      // cssLink.src = "./assets/style.css"; 
+      // // cssLink.rel = "stylesheet"; 
+      // cssLink.type = "text/css"; 
+      // console.log('framessss', frames['myIFrame'])
+      // frames['myIFrame'].contentWindow.document.body.appendChild(cssLink);
+      let msg= { action: "style", type: 'light', parameter: 'http://localhost:8080/assets/customStyle.css'}
+      frames['myIFrame'].contentWindow.postMessage(msg, '*');
+    }
 
-  <iframe id="myIFrame" frameBorder="0" width="100%" style="display: flex; height: 95vh"
-    src="http://localhost:8080/#/conversation-detail?jwt=JWT eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1ZmQzNGU0MjQ5NjEwZTAwMzQ5ODUwNzgiLCJlbWFpbCI6ImdhYnJpZWxlLnBhbmljb0Bmcm9udGllcmUyMS5pdCIsImZpcnN0bmFtZSI6IkdhYnJpZWxlMiIsImxhc3RuYW1lIjoiUGFuaWNvIC1wcmUiLCJlbWFpbHZlcmlmaWVkIjp0cnVlLCJpYXQiOjE2OTgzMzYyMTMsImF1ZCI6Imh0dHBzOi8vdGlsZWRlc2suY29tIiwiaXNzIjoiaHR0cHM6Ly90aWxlZGVzay5jb20iLCJzdWIiOiJ1c2VyIiwianRpIjoiNjAzZGY3NDQtZWY0OS00Mjg2LWJlMWQtYWM5OGYyYTNkMTJiIn0.bof5QPQP262yCQfpeSjqyoYPkSCttg5NQFkcV8d634xzeq7wJBdhtiO7IJY6hS81a1YyXrAsxlK7RiNS-UZdYiTXR81UXurQd1fnE9jtaggB82tyNL8vmiZEOs6xh4TqO3-kkBzRxQIp74bY53fk_mu5RmNbAjIgUWEufaNDiv8"></iframe>
+
+    function onCLickThemeColor(event){
+      console.log('onCLickThemeColor: status-->',event.checked);
+      if(event.checked){
+        let msg= { action: "style", type: 'light', parameter: 'http://localhost:8080/assets/customStyle.css'}
+        frames['myIFrame'].contentWindow.postMessage(msg, '*');
+      }else{
+        let msg= { action: "style", parameter: ''}
+        frames['myIFrame'].contentWindow.postMessage(msg, '*');
+      }
+    }
+
+  </script>
 </body>
 
 </html>

package/src/chat21-core/providers/tiledesk/tiledesk-auth.service.ts

@@ -5,6 +5,7 @@ import { UserModel } from 'src/chat21-core/models/user';
 import { avatarPlaceholder, getColorBck } from 'src/chat21-core/utils/utils-user';
 import { AppStorageService } from '../abstract/app-storage.service';
 import { LoggerInstance } from '../logger/loggerInstance';
+import { BehaviorSubject } from 'rxjs';
 // import { BehaviorSubject } from 'rxjs';
 // import { EventsService } from 'src/app/services/events-service';
 
@@ -26,6 +27,8 @@ export class TiledeskAuthService {
   private currentUser: UserModel;
   private logger: LoggerService = LoggerInstance.getInstance()
 
+  private BS_IsONLINE: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false)
+
   constructor(
     public http: HttpClient,
     public appStorage: AppStorageService,
@@ -63,8 +66,8 @@ export class TiledeskAuthService {
         if (data['success'] && data['token']) {
           that.tiledeskToken = data['token'];
           that.createCompleteUser(data['user']);
-          // that.appStorage.setItem('tiledeskToken', that.tiledeskToken);
           this.checkAndSetInStorageTiledeskToken(that.tiledeskToken)
+          this.BS_IsONLINE.next(true)
           resolve(that.tiledeskToken)
         }
       }, (error) => {
@@ -93,8 +96,8 @@ export class TiledeskAuthService {
         if (data['success'] && data['token']) {
           that.tiledeskToken = data['token'];
           that.createCompleteUser(data['user']);
-          // that.appStorage.setItem('tiledeskToken', that.tiledeskToken);
           this.checkAndSetInStorageTiledeskToken(that.tiledeskToken)
+          this.BS_IsONLINE.next(true)
           resolve(that.tiledeskToken)
         }
       }, (error) => {
@@ -119,9 +122,9 @@ export class TiledeskAuthService {
         if (data['success'] && data['token']) {
           that.tiledeskToken = data['token'];
           that.createCompleteUser(data['user']);
-          // that.appStorage.setItem('tiledeskToken', that.tiledeskToken); // salvarlo esternamente nell'app.component
           this.checkAndSetInStorageTiledeskToken(that.tiledeskToken)
-          resolve(this.currentUser)
+          this.BS_IsONLINE.next(true)
+          resolve(data)
         }
       }, (error) => {
         reject(error)
@@ -133,6 +136,8 @@ export class TiledeskAuthService {
     this.logger.log('[TILEDESK-AUTH] - LOGOUT')
     this.appStorage.removeItem('tiledeskToken')
     this.appStorage.removeItem('currentUser')
+    localStorage.removeItem('tiledesk_token')
+    this.BS_IsONLINE.next(false)
     this.setCurrentUser(null);
     // this.isOnline$.next(false) 
     const stored_project = localStorage.getItem('last_project')
@@ -180,21 +185,28 @@ export class TiledeskAuthService {
 
   private checkAndSetInStorageTiledeskToken(tiledeskToken) {
     this.logger.log('[TILEDESK-AUTH] - checkAndSetInStorageTiledeskToken tiledeskToken from request', tiledeskToken)
-    const storedTiledeskToken = this.appStorage.getItem('tiledeskToken');
+    const storedTiledeskToken = localStorage.getItem('tiledesk_token');
     this.logger.log('[TILEDESK-AUTH] - checkAndSetInStorageTiledeskToken storedTiledeskToken ', storedTiledeskToken)
     if (!storedTiledeskToken) {
       this.logger.log('[TILEDESK-AUTH] - checkAndSetInStorageTiledeskToken TOKEN DOES NOT EXIST - RUN SET ')
-      this.appStorage.setItem('tiledeskToken', tiledeskToken);
+      localStorage.setItem('tiledesk_token', tiledeskToken)
     } else if (storedTiledeskToken && storedTiledeskToken !== tiledeskToken) {
       this.logger.log('[TILEDESK-AUTH] - checkAndSetInStorageTiledeskToken STORED-TOKEN EXIST BUT IS != FROM TOKEN - RUN SET ')
-      this.appStorage.setItem('tiledeskToken', tiledeskToken);
+      localStorage.setItem('tiledesk_token', tiledeskToken)
     } else if (storedTiledeskToken && storedTiledeskToken === tiledeskToken) {
       this.logger.log('[TILEDESK-AUTH] - checkAndSetInStorageTiledeskToken STORED-TOKEN EXIST AND IS = TO TOKEN ')
     }
-
-    localStorage.setItem('tiledesk_token', tiledeskToken)
+    this.appStorage.setItem('tiledeskToken', tiledeskToken)
   }
 
+  isLoggedIn(): Promise<boolean>{
+    return new Promise<boolean>((resolve, reject)=> {
+      this.BS_IsONLINE.subscribe((status)=> {
+        if(status)
+          resolve(true)
+      })
+    })
+  }
 
   getCurrentUser(): UserModel {
     return this.currentUser;