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

package/src/app/components/sidebar-user-details/sidebar-user-details.component.ts

@@ -13,6 +13,7 @@ import { EventsService } from 'src/app/services/events-service';
 import { tranlatedLanguage } from '../../../chat21-core/utils/constants';
 import { avatarPlaceholder, getColorBck } from 'src/chat21-core/utils/utils-user';
 import { environment } from 'src/environments/environment';
+import { Project } from 'src/chat21-core/models/projects';
 @Component({
   selector: 'app-sidebar-user-details',
   templateUrl: './sidebar-user-details.component.html',
@@ -36,7 +37,8 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   SubscriptionPaymentProblem: string;
   user: any
   tiledeskToken: string;
-  project: { _id: string, name: string, type: string, isActiveSubscription: boolean, plan_name: string}
+  // project: { _id: string, name: string, type: string, isActiveSubscription: boolean, plan_name: string}
+  project: Project;
   _prjct_profile_name: string;
 
   isVisiblePAY: boolean;
@@ -281,24 +283,21 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
         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.getProPlanTrialTranslation();
-          } else if (trial_expired === true) {
+          } else if (this.project.trialExpired === true) {
             this.getFreePlanTranslation();
           }
-        } else if (this.project.type === 'payment' && profile_name === 'pro') {
+        } else if (this.project.profile.type === 'payment' && this.project.profile.name === 'pro') {
           this.getProPlanTranslation();
-        } else if (this.project.type === 'payment' && profile_name === 'enterprise') {
+        } else if (this.project.profile.type === 'payment' && this.project.profile.name === 'enterprise') {
           this.getEnterprisePlanTranslation();
         }
       }
@@ -388,8 +387,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
       profilestatus = 'inactive'
     }
 
-    this.wsService.updateCurrentUserAvailability(this.tiledeskToken, this.project._id, IS_AVAILABLE, profilestatus)
-      .subscribe((projectUser: any) => {
+    this.wsService.updateCurrentUserAvailability(this.tiledeskToken, this.project._id, IS_AVAILABLE, profilestatus).subscribe((projectUser: any) => {
 
         this.logger.log('[SIDEBAR-USER-DETAILS] - PROJECT-USER UPDATED ', projectUser)
 

package/src/app/modals/create-canned-response/create-canned-response.page.html

@@ -18,14 +18,14 @@
   </ion-header> -->
   <ion-content>
     <ion-list>
-      <ion-item button (click)="addPlaceholdertoMsg('$recipient_name')"
+      <ion-item button color="none" (click)="addPlaceholdertoMsg('$recipient_name')"
         (mouseover)="mouseOverBtnAddRecipientNamePlaceholder = true"
         (mouseout)="mouseOverBtnAddRecipientNamePlaceholder = false">
         <ion-label>
           {{translationsMap?.get('First_name_of_recipient')}}
         </ion-label>
       </ion-item>
-      <ion-item button (click)="addPlaceholdertoMsg('$agent_name')"
+      <ion-item button color="none" (click)="addPlaceholdertoMsg('$agent_name')"
         (mouseover)="mouseOverBtnAddAgentNamePlaceholder = true"
         (mouseout)="mouseOverBtnAddAgentNamePlaceholder = false">
         <ion-label>
@@ -99,24 +99,6 @@
       
       </div>
 
-      <!-- <div class="field-wrapper-email">
-        <ion-textarea
-          id="message"
-          formControlName="message"
-          autosize="false" 
-          autoGrow="true" 
-          autofocus="true" 
-          (ngModelChange)="cannedResponseMessageChanged($event)"
-          placeholder="{{translationsMap?.get('WriteMsgToSendToYourVisitors')}}">
-        </ion-textarea>
-
-        
-
-        <div class="info-wrapper">
-          <ion-label>Powered by</ion-label>
-          <img src="https://support-pre.tiledesk.com/dashboard/assets/img/logos/tiledesk-logo_new_gray.svg">
-        </div>
-      </div> -->
 
       <div class="field-wrapper-submit">
         <ion-button [disabled]="cannedFormGroup.invalid" ion-button fill="clear" type="submit">{{translationsMap?.get('Add')}}</ion-button>

package/src/app/modals/create-canned-response/create-canned-response.page.scss

@@ -1,11 +1,35 @@
+ion-toolbar{
+    --background: var(--modal-header-background);
+    &:not(.mobile){
+        // --background: var(--list-bkg-color);
+        border: none;
+    }
+    &.mobile{
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+    ion-button,
+    ion-title{
+        --color: var(--modal-icon-color);
+    }
+}
+ion-content{
+    --background: var(--modal-content-background);
+
+    ion-list{
+        background: transparent;
+    }
+
+}
+
 #create-canned-response-content {
+
     .content-container{
         padding-top: 40px;
         padding-left: 64px;
         padding-right: 64px;
     }
 
-    on-label + ion-input:focus {
+    ion-label + ion-input:focus {
         color: rgb(5, 102, 255);
         font-weight: bold;
     }
@@ -38,7 +62,7 @@
             justify-content: flex-end;
 
             ion-button{
-                color: rgb(98, 112, 139);
+                color: var(--button-no-background-text-color)
             }
         }
         
@@ -55,9 +79,16 @@
         border-radius: 4px;
         width: 100%;
     }
+
+    .field-wrapper input:focus-visible,
+    .field-wrapper textarea:focus-visible{
+        outline: var(--border-focus-color) auto 1px;
+    }
+
+    
     
     .field-wrapper .field-placeholder{
-        font-size: 16px;
+        font-size: 15px;
         position: absolute;
         /* background: #fff; */
         bottom: 17px;
@@ -75,17 +106,18 @@
     }        
     
     .field-wrapper .field-placeholder span{
-        background: #ffffff;
-        padding: 0px 8px;
+        // background: #ffffff;
+        // padding: 0px 8px;
     }
     
     .field-wrapper input:not([disabled]):focus~.field-placeholder,
     .field-placeholder:target,
     .field-wrapper.hasValue input:not([disabled])~.field-placeholder{
-        -webkit-transform: scale(.75) translateY(-35px) translateX(-18px);
-        transform: scale(.75) translateY(-35px) translateX(-18px);
-        color:rgb(0,86,192);
+        -webkit-transform: scale(.75) translateY(-50px) translateX(-30px);
+        transform: scale(.75) translateY(-50px) translateX(-30px);
+        color:var(--title-focus-color);
         font-weight: bold; 
+        font-size: 18px;
     }
     
     .field-wrapper-email{
@@ -120,23 +152,7 @@
         font-weight: 400;
         max-width: 100%
     }
-    
-    .info-wrapper{
-        display: flex;
-        flex-direction: column;
-        -webkit-box-align: center;
-        align-items: center;
-        margin-top: 20px;
-        // padding-bottom: 30px;
-        position: relative;
-        text-align: center;
-        color: rgb(98, 112, 139);
-        font-size: 13px;
-    
-        img{
-            max-width: 35%;
-        }
-    }
+
     
     .field-wrapper-submit{
         margin-top: 20px;
@@ -144,8 +160,8 @@
         justify-content: center;
     
         ion-button{
-            background-color:rgb(0,86,192);
-            color:#f1f4f7;
+            background-color:var(--button-background-color);
+            color:var(--button-text-color);
             border-radius: 4px;
             font-size: 18px;
             height: 46px;
@@ -204,6 +220,7 @@
 
 .my-custom-menu {
     --width: 300px;
+    --background: var(--modal-content-background);
     margin-top: 57px;
 
     ion-item{

package/src/app/modals/create-ticket/create-ticket.page.html

@@ -9,7 +9,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content >
+<ion-content>
 
   <ion-grid class="ion-grid-custom-padding" [ngClass]="{'center-content': ticketCreationCompleted === true }">
     <ion-row *ngIf="ticketCreationCompleted === false">
@@ -141,9 +141,9 @@
       <ion-col size="12" style="text-align: center;">
         
         <!-- <ion-icon *ngIf="showSpinnerCreateTicket === false" style="font-size: 1.9em;" slot="start" name="checkmark-outline"></ion-icon> -->
-        <ion-button style="min-width: 153px;" color="primary" class="submit-btn" type="submit" (click)="createTicket()" [disabled]="ticket_subject === undefined || ticket_message  === undefined || ticket_subject?.length === 0 || ticket_message?.length === 0">
-          <ion-icon *ngIf="showSpinnerCreateTicket === false" style="font-size: 1.9em;" slot="start" name="add-circle-outline"></ion-icon>
-          <ion-spinner *ngIf="showSpinnerCreateTicket === true" style="color: #fff; margin: 0px 0.3em 0px -0.3em;" name="bubbles" duration="2" ></ion-spinner>
+        <ion-button color="primary" class="submit-btn" type="submit" (click)="createTicket()" [disabled]="ticket_subject === undefined || ticket_message  === undefined || ticket_subject?.length === 0 || ticket_message?.length === 0">
+          <ion-icon *ngIf="showSpinnerCreateTicket === false" slot="start" name="add-circle-outline"></ion-icon>
+          <ion-spinner *ngIf="showSpinnerCreateTicket === true" name="bubbles" duration="2" ></ion-spinner>
           {{'CreateTicket' | translate}}
         </ion-button>
       </ion-col>

package/src/app/modals/create-ticket/create-ticket.page.scss

@@ -1,3 +1,21 @@
+ion-toolbar{
+    --background: var(--modal-header-background);
+    &:not(.mobile){
+        // --background: var(--list-bkg-color);
+        border: none;
+    }
+    &.mobile{
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+    ion-button,
+    ion-title{
+        --color: var(--modal-icon-color);
+    }
+}
+ion-content{
+    --background: var(--modal-content-background);
+}
+
 .requester-role-or-type {
     font-size: 12px;
     font-weight: 400;
@@ -23,7 +41,7 @@
 
 .custom-create-ticket-label {
     font-size: 14px;
-    color: #7695a5;
+    color: var(--label-color);
     font-weight: 500;
 }
 
@@ -50,3 +68,18 @@
     align-items: center;
     justify-content: center;
 }
+
+.submit-btn{
+    min-width: 153px;
+    background: var(--button-background-color);
+    color: var(--button-text-color);
+
+    ion-icon{
+        color: var(--button-text-color);
+        font-size: 1.9em;
+    }
+    ion-spinner{
+        color: var(--button-text-color);
+        margin: 0px 0.3em 0px -0.3em;
+    }
+}

package/src/app/modals/json-message/json-message.page.scss

@@ -1,5 +1,19 @@
+ion-toolbar{
+    --background: var(--modal-header-background);
+    &:not(.mobile){
+        // --background: var(--list-bkg-color);
+        border: none;
+    }
+    &.mobile{
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+    ion-button,
+    ion-title{
+        --color: var(--modal-icon-color);
+    }
+}
 ion-content{
-
+    --background: var(--modal-content-background);
     .json{
         background: #354552;
         color: #d6e5db;

package/src/app/modals/loader-preview/loader-preview.page.html

@@ -24,7 +24,7 @@
 
   <div class="messageTextArea" #messageTextArea>
 
-    <ion-item>
+    <ion-item color="none">
       <ion-label color="primary" position="floating" floating> {{'AddACaption' | translate}}...</ion-label>
       <!-- <ion-input clearInput></ion-input> -->
       <ion-textarea #messageTextArea #imageCaptionTexarea 

package/src/app/modals/loader-preview/loader-preview.page.scss

@@ -1,3 +1,21 @@
+ion-toolbar{
+    --background: var(--modal-header-background);
+    &:not(.mobile){
+        // --background: var(--list-bkg-color);
+        border: none;
+    }
+    &.mobile{
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+    ion-button,
+    ion-title{
+        --color: var(--modal-icon-color);
+    }
+}
+ion-content{
+    --background: var(--modal-content-background);
+}
+
 .center-cropped {
     width: 50px;
     height: 50px;
@@ -59,7 +77,7 @@ ion-fab-button{
 }
 
 .thumbnailsPreview {
-    background-color: #efefef;
+    background-color: var(--preview-background);
     padding: 20px;
     width: 100%;
     height: 100px;

package/src/app/modals/maps/maps.page.scss

@@ -1,3 +1,21 @@
+ion-toolbar{
+    --background: var(--modal-header-background);
+    &:not(.mobile){
+        // --background: var(--list-bkg-color);
+        border: none;
+    }
+    &.mobile{
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+    ion-button,
+    ion-title{
+        --color: var(--modal-icon-color);
+    }
+}
+ion-content{
+    --background: var(--modal-content-background);
+}
+
 .container {
     width: 100%;
     height: 100%;

package/src/app/modals/send-email/send-email.page.scss

@@ -1,3 +1,20 @@
+ion-toolbar{
+    --background: var(--modal-header-background);
+    &:not(.mobile){
+        // --background: var(--list-bkg-color);
+        border: none;
+    }
+    &.mobile{
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+    ion-button,
+    ion-title{
+        --color: var(--modal-icon-color);
+    }
+}
+ion-content{
+    --background: var(--modal-content-background);
+}
 
 .content-container{
     padding-top: 40px;
@@ -61,6 +78,11 @@ ion-input{
     width: 100%;
 }
 
+.field-wrapper input:focus-visible,
+.field-wrapper textarea:focus-visible{
+    outline: var(--border-focus-color) auto 1px;
+}
+
 .field-wrapper .field-placeholder{
     font-size: 16px;
     position: absolute;
@@ -80,17 +102,18 @@ ion-input{
 }        
 
 .field-wrapper .field-placeholder span{
-    background: #ffffff;
-    padding: 0px 8px;
+    // background: #ffffff;
+    // padding: 0px 8px;
 }
 
 .field-wrapper input:not([disabled]):focus~.field-placeholder,
 .field-placeholder:target,
 .field-wrapper.hasValue input:not([disabled])~.field-placeholder{
-    -webkit-transform: scale(.75) translateY(-35px) translateX(-18px);
-    transform: scale(.75) translateY(-35px) translateX(-18px);
-    color:rgb(0,86,192);
+    -webkit-transform: scale(.75) translateY(-50px) translateX(-30px);
+    transform: scale(.75) translateY(-50px) translateX(-30px);
+    color:var(--title-focus-color);
     font-weight: bold; 
+    font-size: 18px;
 }
 
 .field-wrapper-email{
@@ -147,8 +170,8 @@ ion-label.message-placeholder{
     justify-content: center;
 
     ion-button{
-        background-color:rgb(0,86,192);
-        color:#f1f4f7;
+        background-color:var(--button-background-color);
+        color:var(--button-text-color);
         border-radius: 4px;
         font-size: 18px;
         height: 46px;

package/src/app/modals/send-whatsapp-template/send-whatsapp-template.page.html

@@ -13,7 +13,7 @@
 <ion-content *ngIf="selectionView && !displayError" class="content-container">
 
 
-  <ion-list lines="full">
+  <ion-list lines="full" color="none">
     <ion-item *ngFor="let template of templates" button detail="true" (click)="selectTemplate(template.id)">
       <ion-label>
         <div class="label-container">

package/src/app/modals/send-whatsapp-template/send-whatsapp-template.page.scss

@@ -1,3 +1,21 @@
+ion-toolbar{
+    --background: var(--modal-header-background);
+    &:not(.mobile){
+        // --background: var(--list-bkg-color);
+        border: none;
+    }
+    &.mobile{
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+    ion-button,
+    ion-title{
+        --color: var(--modal-icon-color);
+    }
+}
+ion-content{
+    --background: var(--modal-content-background);
+}
+
 .error-container {
     margin-top: 70px;
     display: flex;

package/src/app/pages/contacts-directory/contacts-directory.page.html

@@ -1,15 +1,14 @@
-<ion-header>
-  <ion-toolbar [class.mobile]="isMobile">
-    <ion-title>{{ 'LABEL_NEW_CHAT' | translate }}</ion-title>
+<ion-toolbar [class.mobile]="isMobile">
+  <ion-title>{{ 'LABEL_NEW_CHAT' | translate }}</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-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-toolbar>
-</ion-header>
 
 <ion-content>
   <component-contacts-directory 

package/src/app/pages/contacts-directory/contacts-directory.page.scss

@@ -1,15 +1,17 @@
 ion-toolbar {
     height: var(--header-height);   
+    --background: transparent;
     &:not(.mobile){
-        --background: var(--list-bkg-color);
+        // --background: var(--list-bkg-color);
         border: none;
     }
     &.mobile{
         border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     }
 
-    ion-button{
-        --color: var(--basic-blue);
+    ion-button,
+    ion-title{
+        --color: var(--icon-color);
     }
 }
 

package/src/app/pages/contacts-directory/contacts-directory.page.ts

@@ -83,21 +83,6 @@ export class ContactsDirectoryPage implements OnInit {
     });
   }
 
-  /** */
-  getTokenFromLocalStorage() {
-    let token = localStorage.getItem('tiledeskToken'); // ??? NN CREDO SIA USATO
-    this.logger.log('[CONTACT-DIRECTORY-PAGE] getTokenFromLocalStorage token ', token);
-    const user = JSON.parse(localStorage.getItem('user'));
-    if (user) {
-      this.logger.log('[CONTACT-DIRECTORY-PAGE] DSHBRD STORED USER: ', user);
-      if (user.token) {
-        token = user.token;
-        this.logger.log('[CONTACTS-DIRECTORY] DSHBRD STORED USER > TOKEN: ', user.token);
-      }
-    }
-    return token;
-  }
-
   /** */
   async onClose() {
     this.logger.log('[CONTACT-DIRECTORY-PAGE] - onClose MODAL')

package/src/app/pages/conversation-detail/conversation-detail.page.scss

@@ -60,7 +60,7 @@ ion-content {
     &#conv-details:not(.mobile){
         --background: var(--list-bkg-color);
     }
-    --background: white;
+    --background: transparent;;
 
     ion-item {
         --padding-end: 0px;
@@ -86,7 +86,7 @@ ion-content {
         position: absolute;
         top: 0;
         overflow: hidden;
-        background-color: white;
+        background-color: var(--conversation-detail-background);
 
         &:not(.mobile){
             border-radius: var(--border-radius-content);;
@@ -105,7 +105,6 @@ ion-content {
     }
     .row_message_text_area {
         min-height: 50px;
-        background-color: white;
         position: absolute;
         bottom: 0;
         width: calc(100% - 0px);
@@ -119,6 +118,7 @@ ion-content {
         height: 100%;
         margin: 0;
         padding: 0;
+        background: transparent;
         &.open {
             max-width: auto;
             min-width: calc(100% - 320px);
@@ -136,7 +136,7 @@ ion-content {
         padding: 0;
         margin: 0;
         border-left-style: solid;
-        border-color: var(--light-gray);
+        border-color: var(--border-color-base);
         border-left-width: thin;
         display: block;
         overflow: hidden;
@@ -229,7 +229,7 @@ ion-content {
 
 .ionContentChatArea {
     opacity: 0;
-    --background: white;
+    --background: var(--conversation-detail-background);
     &.active {
         opacity: 1;
     }

package/src/app/pages/conversation-detail/conversation-detail.page.ts

@@ -742,16 +742,16 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     //               .set('buttonTextColor', 'var(--buttonTextColor)')
     //               .set('buttonHoverBackgroundColor', 'var(--buttonHoverBackgroundColor)')
     //               .set('buttonHoverTextColor', 'var(--buttonHoverTextColor)')
-    this.styleMap.set('themeColor', '#2a69c1')
-                  .set('bubbleReceivedBackground', '#f0f2f7')
-                  .set('bubbleReceivedTextColor', '#06132b')
-                  .set('bubbleSentBackground', '#2a6ac1')
-                  .set('bubbleSentTextColor', '#ffffff')
-                  .set('buttonFontSize', '15px')
-                  .set('buttonBackgroundColor', '#ffffff')
-                  .set('buttonTextColor', '#2a6ac1')
-                  .set('buttonHoverBackgroundColor', '#2a6ac1')
-                  .set('buttonHoverTextColor', ' #ffffff')
+    this.styleMap.set('themeColor', 'var(--basic-blue)')
+                  .set('bubbleReceivedBackground', 'var(--bck-msg-received)')
+                  .set('bubbleReceivedTextColor', 'var(--col-msg-received)')
+                  .set('bubbleSentBackground', 'var(--bck-msg-sent)')
+                  .set('bubbleSentTextColor', 'var(--col-msg-sent)')
+                  .set('buttonFontSize', 'var(--button-in-msg-font-size)')
+                  .set('buttonBackgroundColor', 'var(--buttonBackgroundColor)')
+                  .set('buttonTextColor', 'var(--buttonTextColor)')
+                  .set('buttonHoverBackgroundColor', 'var(--buttonHoverBackgroundColor)')
+                  .set('buttonHoverTextColor', 'var(--buttonHoverTextColor)')
 
   }
   // -------------------------------------------------------------------------------------

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

@@ -39,7 +39,6 @@
           </ion-note> -->
      
           <app-project-item
-            style="width: 100%; margin: 0px 8px; border-bottom: 1px dashed #d3dbe5;" 
             (openUnsevedConvsEvent)="openUnsevedConversationIframe($event)"
             (projectIdEvent)="getLastProjectId($event)">
           </app-project-item>