@chat21/chat21-ionic 3.0.85 → 3.0.86-rc.2

package/src/app/components/utils/user-presence/user-presence.component.scss

@@ -1,24 +1,41 @@
-.status-icon {
-    position: absolute;
-    width: 14px;
-    height: 14px;
-    top: 0px;
-    left: 0;
-    border: 2px solid #ffffff;
+#presence-container{
+    display: flex;
+}
+
+.status-icon-container{
+    position: fixed;
+    top: 22px;
+    left: 30px;
+    background-color: white;
+    height: 17px;
+    width: 17px;
     border-radius: 50%;
-    background-color: #f44336;
-    &.online {
-        background-color: #4caf50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.mobile{
+        top: 36px;
+        left: 50px;
+    }
+
+    svg{
+        fill: #f44336;
+
+        &.online{
+            fill: #4caf50;
+        }
     }
     
 }
+
 .online-point {
-    position: absolute;
-    display: inline-block;
-    top: 0;
-    left: 20px;
-    color: rgba(255, 255, 255, 0.5);
-    font-size: 12px;
-    line-height: 14px;
-    text-align: left;
+    display: inline-flex;
+    align-items: center;
+    line-height: 1.2rem;
+    font-weight: 500;
+    color: #779bbb;
+    font-size: 10px;
+    max-width: 90%;
+    margin-right: 5px;
 }

package/src/app/components/utils/user-presence/user-presence.component.ts

@@ -17,11 +17,10 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 })
 
 export class UserPresenceComponent implements OnInit, OnDestroy {
+  
   @Input() idUser: string;
+  @Input() isMobile: boolean;
   @Input() translationMap: Map<string, string>;
-  @Input() fontColor: string;
-  @Input() borderColor: string;
-
 
   public online = true;
   public status = '';
@@ -47,9 +46,6 @@ export class UserPresenceComponent implements OnInit, OnDestroy {
 
   /** */
   initialize() {
-    if (this.translationMap) {
-      this.status = this.translationMap.get('LABEL_ACTIVE_NOW');
-    }
     this.logger.log('[USER-PRESENCE-COMP] - initialize - this.translationMap', this.translationMap);
     this.logger.log('[USER-PRESENCE-COMP] - initialize - this.status', this.status);
     this.logger.log('[USER-PRESENCE-COMP] - initialize - idUser ->', this.idUser);
@@ -122,11 +118,11 @@ export class UserPresenceComponent implements OnInit, OnDestroy {
     this.logger.log('[USER-PRESENCE-COMP] userIsOnLine - userId: ', userId, ' - isOnline: ', isOnline);
     this.online = isOnline;
     if (isOnline) {
-      this.status = this.translationMap.get('LABEL_AVAILABLE');
+      this.status = this.translationMap.get('LABEL_ONLINE');
     } else {
-      this.status = this.translationMap.get('LABEL_NOT_AVAILABLE');
+      this.status = this.translationMap.get('LABEL_OFFLINE');
       if (this.lastConnectionDate && this.lastConnectionDate.trim() !== '') {
-        this.status = this.lastConnectionDate;
+        this.status = this.status + ' (' + this.lastConnectionDate + ')'
       }
     }
   }
@@ -141,7 +137,7 @@ export class UserPresenceComponent implements OnInit, OnDestroy {
       this.logger.log('[USER-PRESENCE-COMP] userLastConnection - lastConnectionDate', lastConnectionDate);
       this.lastConnectionDate = lastConnectionDate;
       if (this.online === false) {
-        this.status = this.lastConnectionDate;
+        this.status = this.translationMap.get('LABEL_OFFLINE') + ' (' + this.lastConnectionDate + ')'
       }
     }
   }

package/src/app/{pages → modals}/create-canned-response/create-canned-response.page.ts

@@ -1,3 +1,4 @@
+import { CannedResponsesService } from 'src/app/services/canned-responses/canned-responses.service';
 import { Component, Input, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
@@ -38,6 +39,7 @@ export class CreateCannedResponsePage implements OnInit {
     private translate: TranslateService,
     public tiledeskAuthService: TiledeskAuthService,
     public tiledeskService: TiledeskService,
+    public cannedResponsesService: CannedResponsesService,
     private menu: MenuController,
     public events: EventsService,
     private route: ActivatedRoute,
@@ -181,19 +183,17 @@ export class CreateCannedResponsePage implements OnInit {
     this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP - MSG ', canned_response_message);
     this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP - TITLE ', canned_response_title);
 
-    this.tiledeskService.createCannedResponse(canned_response_message.trim(), canned_response_title.trim(), this.prjctID, this.tiledeskToken)
-      .subscribe((responses: any) => {
-        this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP - RES ', responses);
-
-      }, (error) => {
-        this.logger.error('[CREATE-CANNED-RES]- CREATE CANNED RESP - ERROR  ', error);
-        this.showSpinnerCreateCannedResponse = false;
-      }, () => {
-        this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP * COMPLETE *');
-        this.showSpinnerCreateCannedResponse = false;
-        this.closeModalCreateCannedResponseModal()
-        this.events.publish('newcannedresponse:created', true);
-      });
+    this.cannedResponsesService.add(this.tiledeskToken, this.prjctID, canned_response_title.trim(), canned_response_message.trim()).subscribe((responses: any) => {
+      this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP - RES ', responses);
+    }, (error) => {
+      this.logger.error('[CREATE-CANNED-RES]- CREATE CANNED RESP - ERROR  ', error);
+      this.showSpinnerCreateCannedResponse = false;
+    }, () => {
+      this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP * COMPLETE *');
+      this.showSpinnerCreateCannedResponse = false;
+      this.closeModalCreateCannedResponseModal()
+      this.events.publish('newcannedresponse:created', true);
+    });
   }
 
   openAddPersonalisationMenu() {

package/src/app/{pages → modals}/loader-preview/loader-preview.page.html

@@ -55,7 +55,7 @@
 
   <!-- fab placed to the (vertical) center and end -->
   <ion-fab vertical="end" horizontal="end" slot="fixed" class="sendButton">
-    <ion-fab-button color="primary" (click)="onSendMessage()">
+    <ion-fab-button (click)="onSendMessage()">
       <ion-icon name="send"></ion-icon>
     </ion-fab-button>
   </ion-fab>

package/src/app/{pages → modals}/loader-preview/loader-preview.page.scss

@@ -11,6 +11,10 @@
     transform: translateX(-50%);
 }
 
+ion-fab-button{
+    --background: var(--basic-blue);
+}
+
 .previewSelected {
     width: 100%;
     height: auto;

package/src/app/{pages → modals}/loader-preview/loader-preview.page.ts

@@ -1,5 +1,4 @@
-import {
-  Component, OnInit, Input, ViewChild, ElementRef,  HostListener, AfterViewInit} from '@angular/core'
+import {Component, OnInit, Input, ViewChild, ElementRef,  HostListener, AfterViewInit} from '@angular/core'
 import { TYPE_MSG_IMAGE } from 'src/chat21-core/utils/constants'
 import { ModalController } from '@ionic/angular'
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'

package/src/app/modals/send-email/send-email-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SendEmailModal } from './send-email.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SendEmailModal
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SendEmailPageRoutingModule {}

package/src/app/modals/send-email/send-email.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { SendEmailPageRoutingModule } from './send-email-routing.module';
+
+import { SendEmailModal } from './send-email.page';
+import { TranslateModule } from '@ngx-translate/core';
+import { createTranslateLoader } from 'src/chat21-core/utils/utils';
+import { HttpClient } from '@angular/common/http';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SendEmailPageRoutingModule,
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateModule,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      }
+    }),
+    ReactiveFormsModule
+  ],
+  declarations: [SendEmailModal]
+})
+export class SendEmailModalModule {}

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

@@ -0,0 +1,46 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>{{'LABEL_EMAIL' | 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-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="content-container">
+    <form [formGroup]="emailFormGroup" (ngSubmit)="onSubmit()">
+      <!-- <div class="form-group row">
+        <ion-item lines="none">
+          <ion-label position="floating">Oggetto</ion-label>
+          <ion-input type="text"  formControlName="topic"></ion-input>
+        </ion-item>
+      </div> -->
+      <div class="field-wrapper" id="div_input_topic" #div_input_topic>
+        <input type="text" formControlName="subject" >
+        <div class="field-placeholder"><span>{{translationMap?.get('SUBJECT')}}</span></div>
+      </div>
+
+      <ion-label class="message-placeholder">{{translationMap?.get('MESSAGE')}}</ion-label>
+      <div class="field-wrapper-email">
+        <ion-textarea 
+          formControlName="text"
+          autosize="false" 
+          auto-grow="true" 
+          autofocus="true" 
+          placeholder="{{translationMap?.get('MESSAGE_PLACEHOLDER')}}">
+        </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]="emailFormGroup.invalid" ion-button fill="clear" type="submit">{{translationMap?.get('LABEL_SEND')}}</ion-button>
+      </div>
+    </form>
+  </div>
+</ion-content>

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

@@ -0,0 +1,161 @@
+ion-content{
+}
+
+.content-container{
+    padding-top: 40px;
+    padding-left: 64px;
+    padding-right: 64px;
+}
+
+ion-label + ion-input:focus {
+    color: rgb(5, 102, 255);
+    font-weight: bold;
+}
+ion-input{
+    --padding-top: 20px;
+    --padding-bottom: 10px;
+    // display: block;
+    // width: 100%;
+    // font-size: 16px;
+    // line-height: 20px;
+    // letter-spacing: -0.01em;
+    // height: 51px;
+    // color: rgb(8, 15, 26);
+    border-style: solid;
+    border-width: 2px;
+    border-color: rgb(211, 219, 229);
+    border-radius: 4px;
+    // padding: 16px 14px;
+    // outline: none;
+}
+
+ion-input:focus{
+    // border-color: rgb(5, 102, 255);
+}
+
+// ion-label{
+//     align-self: flex-start;
+//     display: inline-block;
+//     font-size: 12px;
+//     line-height: 16px;
+//     letter-spacing: -0.01em;
+//     padding: 0px 8px 2px;
+//     margin-left: 8px;
+//     background-color: rgb(255, 255, 255);
+//     position: absolute;
+//     top: 0px;
+//     transform: translateY(-7px);
+//     transition: transform 0.1s ease 0s;
+//     border-radius: 4px;
+// }
+
+.field-wrapper{
+    position: relative;
+    margin-bottom: 15px;
+}
+
+.field-wrapper input{
+    border-style: solid;
+    border-width: 2px;
+    border-color: rgb(211, 219, 229);
+    color: rgb(98, 112, 139);
+    border-radius: 4px;
+    padding: 15px;
+    border-radius: 4px;
+    width: 100%;
+}
+
+.field-wrapper .field-placeholder{
+    font-size: 16px;
+    position: absolute;
+    /* background: #fff; */
+    bottom: 17px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    color: #80868b;
+    left: 8px;
+    padding: 0 8px;
+    -webkit-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
+    transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
+    z-index: 1;
+
+    text-align: left;
+    width: 100%;
+}        
+
+.field-wrapper .field-placeholder span{
+    background: #ffffff;
+    padding: 0px 8px;
+}
+
+.field-wrapper input:not([disabled]):focus~.field-placeholder,
+.field-wrapper.hasValue input:not([disabled])~.field-placeholder{
+    -webkit-transform: scale(.75) translateY(-35px) translateX(-75px);
+    transform: scale(.75) translateY(-35px) translateX(-75px);
+    color:#1A73E8;
+    font-weight: bold; 
+}
+
+.field-wrapper-email{
+    background-color: #f1f4f7;
+    border: 0;
+    border-radius: 6px;
+    padding: 34px;
+    font-size: 16px;
+    overflow: hidden;
+
+    ion-textarea{
+        border-radius: 6px; // NK edited
+        padding: 0;
+        margin: 0;
+        height: auto;
+        overflow: auto;
+        background-color: white;
+        --padding-top: 12px;
+        --padding-bottom: 12px;
+        --padding-start:12px;
+        --padding-end: 12px;
+        min-height: 184px;
+        max-height: 184px;
+        color: rgb(98, 112, 139);
+    }
+}
+
+ion-label.message-placeholder{
+    display: inline-block;
+    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;
+    display: flex;
+    justify-content: center;
+
+    ion-button{
+        background-color: #f1f4f7;
+        color: rgb(98, 112, 139);
+        border-radius: 4px;
+        font-size: 18px;
+        height: 46px;
+        line-height: 23px;
+        min-width: 160px;
+    }
+}

package/src/app/modals/send-email/send-email.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { SendEmailModal } from './send-email.page';
+
+describe('SendEmailPage', () => {
+  let component: SendEmailModal;
+  let fixture: ComponentFixture<SendEmailModal>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SendEmailModal ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SendEmailModal);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,89 @@
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ModalController, ToastController } from '@ionic/angular';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { UserModel } from 'src/chat21-core/models/user';
+
+@Component({
+  selector: 'send-email-modal',
+  templateUrl: './send-email.page.html',
+  styleUrls: ['./send-email.page.scss'],
+})
+export class SendEmailModal implements OnInit {
+
+  @Input() enableBackdropDismiss: any
+  @Input() conversationWith: string;
+  @Input() msg: string;
+  @Input() email: string;
+  @Input() projectId: string;
+  @Input() translationMap: Map<string, string>;
+  @Output() onSubmitForm = new EventEmitter<{}>();
+
+  @ViewChild('div_input_topic', {static: true}) input_topic: ElementRef;
+  
+  emailFormGroup: FormGroup;
+  private logger: LoggerService = LoggerInstance.getInstance()
+  
+  constructor(
+    public viewCtrl: ModalController,
+    private formBuilder: FormBuilder,
+    private tiledeskService: TiledeskService,
+    private tiledeskAuthService: TiledeskAuthService,
+    private toastController: ToastController
+  ) { }
+
+  ngOnInit() {
+    this.logger.log('[SEND-EMAIL-MODAL] Hello!')
+    this.emailFormGroup = this.buildFormGroup();
+    this.emailFormGroup.valueChanges.subscribe((value)=> {
+      value.subject !== ''? this.input_topic.nativeElement.classList.add('hasValue') : this.input_topic.nativeElement.classList.remove('hasValue')
+    })
+    if(this.msg && (this.msg !== '' || this.msg !== null)){
+      this.emailFormGroup.patchValue({ message: this.msg})
+    }
+  }
+
+  buildFormGroup(): FormGroup{
+    return this.formBuilder.group({
+      subject: ['', [Validators.required]],
+      text: ['', Validators.required],
+      to: this.email,
+      request_id: this.conversationWith
+    })
+  }
+  async onClose() {
+    this.viewCtrl.dismiss()
+  }
+
+  onSubmit(){
+    this.logger.log('[SEND-EMAIL-MODAL] onSubmit -->',this.emailFormGroup)
+    const tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
+    this.tiledeskService.sendEmail(tiledeskToken, this.projectId, this.emailFormGroup.value).subscribe((res)=> {
+      console.log('[SEND-EMAIL-MODAL] subscribe to sendEmail API response -->', res)
+      if(res && res.queued){
+        this.viewCtrl.dismiss({form: this.emailFormGroup.value})
+        this.presentToast(this.translationMap.get('SEND_EMAIL_SUCCESS'), 'success')
+      }
+    },(error)=> {
+      this.logger.error('[SEND-EMAIL-MODAL] subscribe to sendEmail API CALL  - ERROR  ', error)
+      this.presentToast(this.translationMap.get('SEND_EMAIL_ERROR'), 'danger')
+    }, ()=> {
+      this.logger.log('[SEND-EMAIL-MODAL] subscribe to sendEmail API CALL /* COMPLETE */')
+    })
+    
+  }
+
+  async presentToast(text, color) {
+    const toast = await this.toastController.create({
+      message: text,
+      duration: 2000,
+      color: color,
+      // position: 'bottom'
+    });
+    toast.present();
+  }
+
+}

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

@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar [class.mobile]="isMobile">
     <ion-title>{{ 'LABEL_NEW_CHAT' | translate }}</ion-title>
 
     <ion-buttons slot="end">

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

@@ -0,0 +1,47 @@
+ion-toolbar {
+    height: var(--header-height);   
+    &:not(.mobile){
+        --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-content {
+    // overwrite inline styles
+    --offset-bottom: auto!important;
+    --overflow: hidden;
+    overflow: scroll;
+
+    /* For Firefox */
+    @-moz-document url-prefix() {
+      scrollbar-width: none;
+    }
+
+    &:not(.mobile){
+      background: var(--list-bkg-color);
+    }
+  
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 8px;
+      display: none;
+    }
+  
+    &::-webkit-scrollbar-track {
+      background: #f9f9f9;
+    }
+    &::-webkit-scrollbar-thumb {
+         background-color: #b9b9b9;
+          border-radius: 0px;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+        background-color: #727272;
+    }
+}

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

@@ -17,7 +17,9 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
   styleUrls: ['./contacts-directory.page.scss'],
 })
 export class ContactsDirectoryPage implements OnInit {
+  
   @Input() token: string;
+  @Input() isMobile: boolean;
   // @Input() user: string;
 
   public contacts: Array<UserModel>;

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

@@ -21,10 +21,6 @@ import { ConversationDetailPage } from './conversation-detail.page';
 // tslint:disable-next-line: max-line-length
 import { HeaderConversationDetailComponent } from '../../components/conversation-detail/header-conversation-detail/header-conversation-detail.component';
 import { MessageTextAreaComponent } from '../../components/conversation-detail/message-text-area/message-text-area.component';
-import { BubbleDayMessageComponent } from '../../components/conversation-detail/bubble-day-message/bubble-day-message.component';
-import { BubbleSystemMessageComponent } from '../../components/conversation-detail/bubble-system-message/bubble-system-message.component';
-import { BubbleMyMessageComponent } from '../../components/conversation-detail/bubble-my-message/bubble-my-message.component';
-import { BubbleOthersMessageComponent } from '../../components/conversation-detail/bubble-others-message/bubble-others-message.component';
 // import { InfoContentComponent } from '../../components/conversation-info/info-content/info-content.component';
 // import { InfoDirectComponent } from '../../components/conversation-info/info-direct/info-direct.component';
 import { InfoContentComponent } from 'src/app/components/conversation-info/info-content/info-content.component';
@@ -65,10 +61,6 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
     HeaderConversationDetailComponent,
     MessageTextAreaComponent,
     CannedResponseComponent,
-    // BubbleDayMessageComponent,
-    // BubbleSystemMessageComponent,
-    // BubbleMyMessageComponent,
-    // BubbleOthersMessageComponent,
     // InfoContentComponent,
     // InfoSupportGroupComponent,
     // InfoDirectComponent,