@chat21/chat21-ionic 3.0.79 → 3.0.80-rc.1

package/src/app/components/navbar/navbar.component.scss

@@ -0,0 +1,249 @@
+.navbar-absolute{
+    position: absolute;
+    width: calc(100%  - var(--sidebar-width));
+    margin-left: var(--sidebar-width);
+    padding-top: 5px;
+    z-index: 1;
+    padding-bottom: 5px;
+    border-bottom: 1px solid #e7e7e7;
+    top: 0;
+
+    -webkit-font-smoothing: auto;
+}
+
+.navbar{
+    background-color: #fff;
+    color: #555;
+    min-height: var(--nav-bar-heigth);
+    transition: all 150ms ease 0s;
+}
+
+.container-fluid{
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+
+    width: 100%;
+}
+
+ion-navbar{
+    display: flex;
+    align-items: center;
+}
+
+.navbar-collapse{
+    border-top: none;
+    box-shadow: none;
+
+    padding-right: 15px;
+    padding-left: 15px;
+}
+
+.navbar-right{
+    float: right;
+
+    display: inline-flex;
+    align-items: center;
+}
+
+.navbar-left{
+    float: left;
+}
+
+.simulate-visitor-btn{
+    font-size: 12px;
+    padding: 0px 11px 0px 4px !important;
+    max-height: 24px;
+    border-radius: 30px;
+    font-family: 'Poppins';
+
+    box-shadow: unset!important;
+    text-transform: none!important;
+    background: #3ecf8e!important;
+    color: #fff;
+
+}
+
+.btn{
+    display: flex;
+    position: relative;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+
+    border: 1px solid transparent;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
+}
+
+
+.dropdown-toggle, .volume{
+    background-color: transparent;
+    color: inherit;
+
+    padding: 0px 15px;
+    font-weight: 400;
+}
+
+.project-dropdown {
+    max-width: 180px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 12px;
+}
+
+li{
+    position: relative;
+    display: block
+}
+
+.dropdown-menu {
+    border-radius: 3px;
+    box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.26);
+
+    position: absolute;
+    top: 100%;
+    right: 0;
+    left: auto;
+    z-index: 1000;
+    display: none;
+    float: left;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+}
+.dropdown-menu{
+    max-height: 240px;
+    overflow-y: auto;
+}
+.dropdown-menu:not(.open){
+    margin-top: -20px;
+    opacity: 0;
+    visibility: hidden;
+    display: block;
+}
+
+.dropdown-menu.open{
+    margin-top: 12px; //0;
+    opacity: 1;
+    visibility: visible;
+    display: block;
+    transition: all 150ms linear;
+}
+
+.dropdown-menu li {
+    position: relative;
+
+    .li-selected{
+        color: #4285f4;
+        background-color: #eee;
+    }
+}
+
+.dropdown-menu .divider{
+    background-color: rgba(0,0,0,.12);
+    margin: 5px 0;
+
+    height: 1px;
+    overflow: hidden;
+}
+
+.dropdown-menu li>a{
+    font-size: 13px;
+    padding: 10px 20px;
+    margin: 0 5px;
+    border-radius: 2px;
+    transition: all 150ms linear;
+
+    display: block;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.42857143;
+    color: #333;
+    white-space: nowrap;
+    text-decoration: none;
+
+    cursor: pointer;
+
+    .material-icons {
+        vertical-align: middle;
+    }
+
+    &:hover{
+        background-color: #3ea9f5;
+        color: #fff;
+        box-shadow: 0 12px 20px -10px rgba(62, 169, 245, 0.28), 0 4px 20px 0 rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(62, 169, 245, 0.2);
+    }
+}
+
+
+.material-icons {
+    font-family: "Material Icons";
+    font-weight: 400;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "liga";
+
+    top: 0;
+    position: relative;
+    font-size: 20px;
+    vertical-align: middle;
+}
+
+.ripple-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: inherit;
+    pointer-events: none;
+
+    .disabled &{
+        display: none;
+    }
+}
+.ripple {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    margin-left: -10px;
+    margin-top: -10px;
+    border-radius: 100%;
+    background-color: #000; // fallback color
+    background-color: rgba(0,0,0,0.05);
+    transform: scale(1);
+    transform-origin: 50%;
+    opacity: 0;
+    pointer-events: none;
+}
+.ripple.ripple-on {
+    transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+    opacity: 0.1;
+}
+.ripple.ripple-out {
+    transition: opacity 0.1s linear 0s !important;
+    opacity: 0;
+}
+
+
+

package/src/app/components/{ddp-header/ddp-header.component.spec.ts → navbar/navbar.component.spec.ts}

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 
-import { DdpHeaderComponent } from './ddp-header.component';
+import { NavbarComponent } from './navbar.component';
 
-describe('DdpHeaderComponent', () => {
-  let component: DdpHeaderComponent;
-  let fixture: ComponentFixture<DdpHeaderComponent>;
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DdpHeaderComponent ],
+      declarations: [ NavbarComponent ],
       imports: [IonicModule.forRoot()]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(DdpHeaderComponent);
+    fixture = TestBed.createComponent(NavbarComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));

package/src/app/components/navbar/navbar.component.ts

@@ -0,0 +1,189 @@
+import { AppConfigProvider } from 'src/app/services/app-config';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { EventsService } from 'src/app/services/events-service';
+import { ProjectsService } from './../../services/projects/projects.service';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { Project } from 'src/chat21-core/models/projects';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.scss'],
+})
+export class NavbarComponent implements OnInit {
+
+  @Input() isSoundEnabled: boolean;
+  @Output() onSoundChange = new EventEmitter<string>();
+
+  private logger: LoggerService = LoggerInstance.getInstance();
+  private tiledeskToken: string;
+
+  public projects: Project[];
+  public project: any;
+  private USER_ROLE: string;
+
+  public translationsMap: Map<string, string> = new Map();
+
+  public openDropdownProjects: boolean = false
+  private public_Key: string;
+  public isVisible: boolean;
+  public MT: boolean;
+
+  constructor(
+    private projectsService: ProjectsService,
+    private tiledeskAuthService: TiledeskAuthService,
+    private appConfigProvider: AppConfigProvider,
+    private translateService: CustomTranslateService, 
+    private events: EventsService,  
+  ) { }
+
+  ngOnInit() {
+    this.listenToUserGoOnline();
+    this.getStoredProjectAndUserRole();
+    this.initTranslations();
+    this.getOSCODE();
+  }
+
+  initTranslations(){
+    let keys= [
+      "NAVBAR.SIMULATE_VISITOR",
+      "NAVBAR.PROJECT_SETTINGS",
+      "NAVBAR.VIEW_ALL_PROJECTS",
+      "NAVBAR.ADD_PROJECT",
+      "NAVBAR.RECENT_PROJECTS",
+      "NAVBAR.OTHER_PROJECTS"
+    ]
+
+    this.translationsMap = this.translateService.translateLanguage(keys)
+  }
+
+  listenToUserGoOnline(){
+    this.events.subscribe('go:online', (isOnline)=> {
+      this.logger.log('[NAVBAR] listen to go:online --> ', isOnline);
+      if(isOnline){
+        this.tiledeskToken = this.tiledeskAuthService.getTiledeskToken();
+        this.getProjects()
+      }
+    });
+  }
+
+  getProjects() {
+    this.logger.log('[NAVBAR] calling getProjects ... ');
+    this.projectsService.getProjects(this.tiledeskToken).subscribe((projects: any) => {
+      this.logger.log('[NAVBAR] getProjects PROJECTS ', projects);
+      if (projects) {
+          // this.projects = projects;
+          this.projects = projects.filter((project: any) => {
+              // this.logger.log('[NAVBAR] getProjects PROJECTS status ', project.id_project.status);
+              return project.id_project.status === 100;
+          });
+          this.logger.log('[NAVBAR] getProjects this.projects ', this.projects);
+      }
+    }, (error) => {
+        this.logger.error('[NAVBAR] getProjects - ERROR ', error)
+    }, () => {
+        this.logger.log('[NAVBAR] getProjects - COMPLETE')
+    });
+  }
+
+  getStoredProjectAndUserRole() {
+    this.events.subscribe('storage:last_project',project =>{
+      this.logger.log('[NAVBAR] stored_project ', project)
+      if (project && project !== 'undefined') {
+        this.project = project;
+        this.USER_ROLE = project.role;
+      }
+    })
+  }
+
+  getOSCODE() {
+    this.public_Key = this.appConfigProvider.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
+    this.logger.log('[NAVBAR] AppConfigService getAppConfig public_Key', this.public_Key)
+    this.logger.log('[NAVBAR] public_Key', this.public_Key)
+
+    let keys = this.public_Key.split("-");
+    // this.logger.log('PUBLIC-KEY (Navbar) - public_Key keys', keys)
+
+    keys.forEach(key => {
+        // this.logger.log('NavbarComponent public_Key key', key)
+        if (key.includes("PAY")) {
+            // this.logger.log('PUBLIC-KEY (Navbar) - key', key);
+            let pay = key.split(":");
+            // this.logger.log('PUBLIC-KEY (Navbar) - pay key&value', pay);
+            if (pay[1] === "F") {
+                this.isVisible = false;
+                // this.logger.log('PUBLIC-KEY (Navbar) - pay isVisible', this.isVisible);
+            } else {
+                this.isVisible = true;
+                // this.logger.log('PUBLIC-KEY (Navbar) - pay isVisible', this.isVisible);
+            }
+        }
+
+        if (key.includes("MTT")) {
+            // this.logger.log('PUBLIC-KEY (Navbar) - key', key);
+            let mt = key.split(":");
+            // this.logger.log('PUBLIC-KEY (Navbar) - mt key&value', mt);
+            if (mt[1] === "F") {
+                this.MT = false;
+                // this.logger.log('PUBLIC-KEY (Navbar) - mt is', this.MT);
+            } else {
+                this.MT = true;
+                // this.logger.log('PUBLIC-KEY (Navbar) - mt is', this.MT);
+            }
+        }
+    });
+
+    if (!this.public_Key.includes("MTT")) {
+        this.MT = false;
+        // this.logger.log('PUBLIC-KEY (Navbar) - mt is', this.MT);
+    }
+
+  }
+
+
+  onClickSound(event: string){
+    this.onSoundChange.emit(event)
+  }
+
+
+  testWidgetPage() {
+    const simulateVisitorBtnElem = <HTMLElement>document.querySelector('.simulate-visitor-btn');
+    simulateVisitorBtnElem.blur();
+    // + '&isOpen=true'
+    const url = this.appConfigProvider.getConfig().testsiteBaseUrl + '?tiledesk_projectid=' + this.project.id_project.id + '&project_name=' + this.project.id_project.name + '&role=' + this.USER_ROLE
+    window.open(url, '_blank');
+  }
+
+  onClickDropdownOption(event: string){
+    const baseUrl = this.appConfigProvider.getConfig().dashboardUrl
+    let url = baseUrl
+    if(event === 'projectSettings'){
+      url = baseUrl + 'project/' + this.project.id_project.id + '/project-settings/general'
+    }else if(event ==='allProjects'){
+      url = baseUrl + 'project/'
+    }else if('addProject'){
+      url = baseUrl + 'create-new-project/' 
+    }
+    window.open(url, '_blank');
+  }
+
+  goToHome(id_project: string, project_name: string,) {
+    // this.logger.log('!NAVBAR  goToHome prjct ', prjct)
+    this.logger.log('[NAVBAR] goToHome id_project ', id_project, 'project_name', project_name)
+    // RUNS ONLY IF THE THE USER CLICK OVER A PROJECT WITH THE ID DIFFERENT FROM THE CURRENT PROJECT ID
+    const baseUrl = this.appConfigProvider.getConfig().dashboardUrl
+    if (id_project !== this.project.id_project.id) {
+      // this.subscription.unsubscribe();
+      // this.unsubscribe$.next();
+      // this.unsubscribe$.complete();
+
+      const url = this.appConfigProvider.getConfig().dashboardUrl + `/project/${id_project}/home`
+      window.open(url, '_blank');
+
+    }
+}
+
+}