@chat21/chat21-ionic 3.0.97 → 3.0.98-rc.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # chat21-ionic ver 3.0
 
+### 3.0.98-rc.2
+- added: maps modal for whatsapp location templates
+- changed: changed: conversation?.attributes?.channel with conversation?.attributes?.request_channel
+
+### 3.0.98-rc.1
+- changed: conversation.attributes.channel with conversation.attributes.request_channel to get the current convesation channel
+- bug-fixed: whatsapp template not enabled when agent is added to a whatsapp channel request
+
 ### 3.0.97 in PROD
 
 ### 3.0.97-rc.5

package/README.md

@@ -105,7 +105,8 @@ Use [Docker Compose Tiledesk installation guide](https://github.com/Tiledesk/til
         "testsiteBaseUrl": "https:<YOUR-WIDGET-URL>/test_widget_page/index.html"
         "wsUrl": 'ws://' + window.location.hostname + '/ws/',
         "emailSection": true,
-        "whatsappTemplatesSection": true
+        "whatsappTemplatesSection": true,
+        "googleMapsApiKey":"<YOUR-GOOGLE-MAPS-API-KEY>"
     }
   };
   ```
@@ -132,6 +133,7 @@ Use [Docker Compose Tiledesk installation guide](https://github.com/Tiledesk/til
 
 * `whatsappTemplatesSection`: if set to true, allows agents to set and send a whatsapp already configured template to users in an incoming whatsapp conversation
 
+* `googleMapsApiKey`:
 ### Push notification
 * open `/src/firebase-messaging-sw.js` and replace messagingSenderId: with < your messagingSenderId >
 More info here :  https://angularfirebase.com/lessons/send-push-notifications-in-angular-with-firebase-cloud-messaging/

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.97",
+    "version": "3.0.98-rc.2",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {
@@ -23,6 +23,7 @@
         "@angular/common": "~8.2.14",
         "@angular/core": "~8.2.14",
         "@angular/forms": "~8.2.14",
+        "@angular/google-maps": "^8.2.14",
         "@angular/material": "^8.2.3",
         "@angular/platform-browser": "~8.2.14",
         "@angular/platform-browser-dynamic": "~8.2.14",

package/src/app/app-routing.module.ts

@@ -72,15 +72,12 @@ const routes: Routes = [
   {
     path: 'send-whatsapp-template',
     loadChildren: () => import('./modals/send-whatsapp-template/send-whatsapp-template.module').then( m => m.SendWhatsappTemplateModalModule)
+  },
+  {
+    path: 'maps',
+    loadChildren: () => import('./modals/maps/maps.module').then( m => m.MapsPageModule)
   }
 
-
-
-
-
-
-
-
   // {
   //   path: 'conversation-detail/:IDConv',
   //   loadChildren: () => import('./pages/conversation-detail/conversation-detail.module').then( m => m.ConversationDetailPageModule)

package/src/app/app.module.ts

@@ -2,7 +2,7 @@ import { ScriptService } from './services/scripts/script.service';
 import { ConvertRequestToConversation } from './../chat21-core/utils/convertRequestToConversation';
 import { LogLevel, PUSH_ENGINE_FIREBASE, PUSH_ENGINE_MQTT } from './../chat21-core/utils/constants';
 import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
-import { NgModule, ErrorHandler, APP_INITIALIZER } from '@angular/core';
+import { NgModule, ErrorHandler, APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouteReuseStrategy } from '@angular/router';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -106,6 +106,8 @@ import { Network } from '@ionic-native/network/ngx';
 import { WebSocketJs } from './services/websocket/websocket-js';
 import { UnassignedConversationsPageModule } from './pages/unassigned-conversations/unassigned-conversations.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MapsPageModule } from './modals/maps/maps.module';
+import { GoogleMapsModule } from '@angular/google-maps';
 
 // FACTORIES
 export function createTranslateLoader(http: HttpClient) {
@@ -293,13 +295,15 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     LoaderPreviewPageModule,
     SendEmailModalModule,
     SendWhatsappTemplateModalModule,
+    MapsPageModule,
     CreateTicketPageModule,
     CreateRequesterPageModule,
     CreateCannedResponsePageModule,
-    JsonMessagePageModule
+    JsonMessagePageModule,
+    GoogleMapsModule
   ],
   bootstrap: [AppComponent],
-
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers: [
     AppConfigProvider, // https://juristr.com/blog/2018/01/ng-app-runtime-config/
     {

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.html

@@ -133,14 +133,12 @@
           (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
           (onElementRendered)="onElementRenderedFN($event)"
           (onOptionsMessage)="onClickOptionsMessage($event)">
-      </chat-bubble-message>
+        </chat-bubble-message>
       </div>
 
       <!-- icon status message -->
       <chat-return-receipt 
-        [status]="message.status" 
-        [message]="message" 
-        [senderId]="senderId">
+        [status]="message.status">
       </chat-return-receipt>
 
       

package/src/app/chatlib/conversation-detail/message/text/text.component.scss

@@ -36,4 +36,16 @@ p ::ng-deep p{
     margin-block-start: 0em
 }
 
+p ::ng-deep ol{
+    margin-block-end: 0em;
+    margin-block-start: 0em;
+    padding-inline-start: 15px;
+    
+    li:before {
+        content:"";
+        font-size: 1.4em;
+        vertical-align:middle;
+    }
+}
+
 

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.html

@@ -106,12 +106,12 @@
         </div>
         <!-- SUPPORT-GROUP CONV -->
         <div  *ngIf="conversation.uid.startsWith(TYPE_SUPPORT_GROUP) && !IS_ON_MOBILE_DEVICE">
-          <img class="channel-icon" src="assets/images/channel_icons/chat21.svg" *ngIf="conversation?.attributes && ( (conversation?.attributes?.channel && conversation?.attributes?.channel === CHANNEL_TYPE_CHAT21) ||  !conversation?.attributes?.channel) " >
-          <img class="channel-icon" src="assets/images/channel_icons/email-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.channel && conversation?.attributes?.channel === CHANNEL_TYPE_EMAIL" >
-          <img class="channel-icon" src="assets/images/channel_icons/form-logo_v2.svg" *ngIf="conversation?.attributes && conversation?.attributes?.channel && conversation?.attributes?.channel === CHANNEL_TYPE_FORM" >
-          <img class="channel-icon" src="assets/images/channel_icons/messenger-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.channel && conversation?.attributes?.channel === CHANNEL_TYPE_MESSANGER" >
-          <img class="channel-icon" src="assets/images/channel_icons/whatsapp-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.channel && conversation?.attributes?.channel === CHANNEL_TYPE_WHATSAPP" >
-          <img class="channel-icon" src="assets/images/channel_icons/telegram-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.channel && conversation?.attributes?.channel === CHANNEL_TYPE_TELEGRAM" >
+          <img class="channel-icon" src="assets/images/channel_icons/chat21.svg" *ngIf="conversation?.attributes && ( (conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE_CHAT21) ||  !conversation?.attributes?.request_channel) " >
+          <img class="channel-icon" src="assets/images/channel_icons/email-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE_EMAIL" >
+          <img class="channel-icon" src="assets/images/channel_icons/form-logo_v2.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE_FORM" >
+          <img class="channel-icon" src="assets/images/channel_icons/messenger-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE_MESSANGER" >
+          <img class="channel-icon" src="assets/images/channel_icons/whatsapp-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE_WHATSAPP" >
+          <img class="channel-icon" src="assets/images/channel_icons/telegram-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE_TELEGRAM" >
           <span *ngIf="conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.project_name}}</span>
           <span *ngIf="!conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.projectId}}</span>
         </div>

package/src/app/components/authentication/login/login.component.scss

@@ -26,6 +26,7 @@
       border-top: 1px solid silver;
       border-radius: 5px;
       color: #000;
+      appearance: none;
       -webkit-appearance: none;
       box-sizing: border-box;
       -moz-box-sizing: border-box;

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.html

@@ -44,12 +44,12 @@
               </div>
               <!-- SUPPORT-GROUP CONV -->
               <div  *ngIf="conversationUid?.startsWith(TYPE_SUPPORT_GROUP) && !IS_ON_MOBILE_DEVICE">
-                <img class="channel-icon" src="assets/images/channel_icons/chat21.svg" *ngIf="( (conversationAvatar?.channel && conversationAvatar?.channel === CHANNEL_TYPE_CHAT21) ||  !conversationAvatar?.channel) " >
-                <img class="channel-icon" src="assets/images/channel_icons/email-logo.svg" *ngIf="conversationAvatar?.channel && conversationAvatar?.channel === CHANNEL_TYPE_EMAIL" >
-                <img class="channel-icon" src="assets/images/channel_icons/form-logo_v2.svg" *ngIf="conversationAvatar?.channel && conversationAvatar?.channel === CHANNEL_TYPE_FORM" >
-                <img class="channel-icon" src="assets/images/channel_icons/messenger-logo.svg" *ngIf="conversationAvatar?.channel && conversationAvatar?.channel === CHANNEL_TYPE_MESSANGER" >
-                <img class="channel-icon" src="assets/images/channel_icons/whatsapp-logo.svg" *ngIf="conversationAvatar?.channel && conversationAvatar?.channel === CHANNEL_TYPE_WHATSAPP" >
-                <img class="channel-icon" src="assets/images/channel_icons/telegram-logo.svg" *ngIf="conversationAvatar?.channel && conversationAvatar?.channel === CHANNEL_TYPE_TELEGRAM" >
+                <img class="channel-icon" src="assets/images/channel_icons/chat21.svg" *ngIf="( (conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE_CHAT21) ||  !conversationAvatar?.request_channel) " >
+                <img class="channel-icon" src="assets/images/channel_icons/email-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE_EMAIL" >
+                <img class="channel-icon" src="assets/images/channel_icons/form-logo_v2.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE_FORM" >
+                <img class="channel-icon" src="assets/images/channel_icons/messenger-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE_MESSANGER" >
+                <img class="channel-icon" src="assets/images/channel_icons/whatsapp-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE_WHATSAPP" >
+                <img class="channel-icon" src="assets/images/channel_icons/telegram-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE_TELEGRAM" >
                 <span *ngIf="conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.project_name}}</span>
                 <span *ngIf="!conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.projectId}}</span>
               </div>

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -426,6 +426,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   private async prensentTemplateModal():Promise<any> {
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] openTemplateModal');
     const attributes = {
+      loggedUser: this.loggedUser,
       enableBackdropDismiss: false, 
       conversationWith: this.conversationWith,
       projectId: this.leadInfo.projectId,

package/src/app/modals/maps/maps-routing.module.ts

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

package/src/app/modals/maps/maps.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { MapsPageRoutingModule } from './maps-routing.module';
+
+import { MapsPage } from './maps.page';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    MapsPageRoutingModule
+  ],
+  declarations: [MapsPage],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class MapsPageModule {}

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

@@ -0,0 +1,83 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Select a place</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="gmaps-container" style="height: 100%; padding: 10px 20px;">
+
+    <div class="pac-card" id="pac-card">
+      <div id="pac-container">
+        <input id="pac-input" type="text" placeholder="Enter a location" />
+      </div>
+    </div>
+
+    <div id="map" class="map"></div>
+
+    <div *ngIf="selected_place" class="selected-place">
+      <div class="share-location-title">
+        <ion-icon name="locate"></ion-icon>
+        <p>Share location</p>
+      </div>
+      <div class="place-info">
+        <p class="place-name">{{ selected_place.name }}</p>
+        <p class="place-address">{{ selected_place.address }}</p>
+        <p class="place-coords">{{ selected_place.latitude }} - {{ selected_place.longitude }}</p>
+      </div>
+      <div class="place-footer">
+        <ion-button ion-button fill="clear" type="submit" (click)="shareLocation()"><ion-icon name="share-social-outline"></ion-icon>Share
+        </ion-button>
+      </div>
+
+    </div>
+
+  </div>
+
+   <!-- <div class="pac-card" id="pac-card">
+    <div>
+      <div id="type-selector" class="pac-controls">
+        <input type="radio" name="type" id="changetype-all" checked="checked" />
+        <label for="changetype-all">All</label>
+
+        <input type="radio" name="type" id="changetype-establishment" />
+        <label for="changetype-establishment">establishment</label>
+
+        <input type="radio" name="type" id="changetype-address" />
+        <label for="changetype-address">address</label>
+
+        <input type="radio" name="type" id="changetype-geocode" />
+        <label for="changetype-geocode">geocode</label>
+
+        <input type="radio" name="type" id="changetype-cities" />
+        <label for="changetype-cities">(cities)</label>
+
+        <input type="radio" name="type" id="changetype-regions" />
+        <label for="changetype-regions">(regions)</label>
+      </div>
+      <br />
+      <div id="strict-bounds-selector" class="pac-controls">
+        <input type="checkbox" id="use-location-bias" value="" checked />
+        <label for="use-location-bias">Bias to map viewport</label>
+
+        <input type="checkbox" id="use-strict-bounds" value="" />
+        <label for="use-strict-bounds">Strict bounds</label>
+      </div>
+    </div>
+    <div id="pac-container">
+      <input id="pac-input" type="text" placeholder="Enter a location" />
+    </div>
+  </div>
+  <div id="map"></div>
+  <div id="infowindow-content">
+    <span id="place-name" class="title"></span><br />
+    <span id="place-address"></span>
+  </div> -->
+
+</ion-content>

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

@@ -0,0 +1,181 @@
+.container {
+    width: 100%;
+    height: 100%;
+}
+
+capacitor-google-map {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+}
+
+// google maps
+
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* 
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map. 
+ */
+.map {
+    height: 50%;
+    //box-shadow: 0px 0px 3px #aaa;
+    border: solid 2px #e8e8e8;
+}
+
+#description {
+    font-family: Roboto;
+    font-size: 15px;
+    font-weight: 300;
+}
+
+#infowindow-content .title {
+    font-weight: bold;
+}
+
+#infowindow-content {
+    display: none;
+}
+
+#map #infowindow-content {
+    display: inline;
+}
+
+.pac-card {
+    margin-top: 10px;
+    background-color: transparent;
+    // border: 0;
+    // border-radius: 2px;
+    // box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
+    //margin: 10px;
+    width: 100%;
+    padding: 0 0.5em;
+    //font: 400 18px Roboto, Arial, sans-serif;
+    overflow: hidden;
+    //font-family: Roboto;
+    padding: 0;
+}
+
+#pac-container {
+    padding-bottom: 12px;
+    //margin-right: 12px;
+}
+
+.pac-controls {
+    display: inline-block;
+    padding: 5px 11px;
+}
+
+.pac-controls label {
+    font-family: Roboto;
+    font-size: 13px;
+    font-weight: 300;
+}
+
+#pac-input {
+    background-color: #fff;
+    //font-family: Roboto;
+    font-size: 15px;
+    font-weight: 400;
+    margin-left: 12px;
+    padding: 0 11px 0 13px;
+    text-overflow: ellipsis;
+    //width: 400px;
+    width: 100%;
+    margin-left: 0px;
+    height: 36px;
+    border-radius: 6px;
+    border: solid 2px #e8e8e8;
+    //box-shadow: 0px 0px 3px #aaa;
+}
+
+#pac-input:focus {
+    border-color: #00a5f4;
+}
+
+#title {
+    color: #fff;
+    background-color: #4d90fe;
+    font-size: 25px;
+    font-weight: 500;
+    padding: 6px 12px;
+}
+
+.selected-place {
+    background-color: #f3f3f3;
+    padding: 8px 8px;
+    border-radius: 6px;
+    margin-top: 20px;
+
+    .share-location-title {
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 10px;
+        align-items: center;
+        color: #006a9b;
+
+        ion-icon {
+            margin-right: 4px;
+        }
+
+        p {
+            font-size: 14px;
+            font-weight: 600;
+        }
+    }
+
+    p {
+        margin: 0px;
+        font-size: 14px;
+    }
+
+    .place-info {
+        padding-left: 20px;
+
+        .place-name {
+            font-weight: 500;
+        }
+
+        .place-address {
+            font-style: italic;
+        }
+
+        .place-coords {
+            font-size: 12px;
+            font-weight: 500;
+            color: #aaa;
+        }
+    }
+
+    .place-footer {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+
+        ion-button {
+            background-color: rgb(0, 86, 192);
+            color: #f1f4f7;
+            border-radius: 6px;
+            font-size: 12px;
+            height: 30px;
+            line-height: 23px;
+            min-width: 120px;
+        }
+
+        ion-icon {
+            margin-right: 6px;
+        }
+    }
+}
+
+#map > div > div > div > div {
+    display: none !important;
+}
+
+#map > div > div > div > div > div.gmnoproint {
+    display: none !important;
+}

package/src/app/modals/maps/maps.page.spec.ts

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