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

package/src/global.scss

@@ -362,7 +362,19 @@ app-message-text-area {
     z-index: 99999; // nk
     background: #fff; // nk
 }
-
+app-bubble-day-message {
+    width: 100%;
+}
+app-bubble-system-message {
+    max-width: 80%;
+    margin: 0 auto;
+}
+app-bubble-my-message {
+    width: 100%;
+}
+app-bubble-others-message {
+    width: 100%;
+}
 app-conversation-info {
     height: calc(100% - 60px);
 }
@@ -422,6 +434,7 @@ select:-webkit-autofill:focus {
 .canned-list {
     .native-input[disabled] {
         opacity: 10 !important;
+        cursor: pointer;
     }
 }
 
@@ -782,70 +795,66 @@ select:-webkit-autofill:focus {
 }
 
 // select teammate status in user detail drawer
-.teammate-status-in-drawer {
-
-    &.ng-select {
+.ng-select.teammate-status-in-drawer {
 
+    .ng-select-container {
+        background-color: #2d323e;
+        color: #fff;
+        border: 1px solid #2d323e;
+    }
+    &.ng-select-opened{
         .ng-select-container {
             background-color: #2d323e;
-            color: #fff;
             border: 1px solid #2d323e;
         }
-        &.ng-select-opened{
-            .ng-select-container {
-                background-color: #2d323e;
-                border: 1px solid #2d323e;
-            }
-        }
-    
-        &.ng-select-focused:not(.ng-select-opened){
-             >.ng-select-container{
-                border: 1px solid #2d323e;
-                box-shadow: unset;
-             }
-        }
-    
-        
     }
 
-    .ng-dropdown-panel {
-        background-color: #2d323e;
-        border: 1px solid #2d323e;
-    
-        &.ng-select-bottom {
+    &.ng-select-focused:not(.ng-select-opened){
+         >.ng-select-container{
             border: 1px solid #2d323e;
-            margin-top: 8px;
-            border-top-right-radius: 4px;
-            border-top-left-radius: 4px;
-        }
+            box-shadow: unset;
+         }
+    }
+
     
-        .ng-dropdown-panel-items {
-            .ng-option {
+}
+
+.ng-dropdown-panel {
+    background-color: #2d323e;
+    border: 1px solid #2d323e;
+
+    &.ng-select-bottom {
+        border: 1px solid #2d323e;
+        margin-top: 8px;
+        border-top-right-radius: 4px;
+        border-top-left-radius: 4px;
+    }
+
+    .ng-dropdown-panel-items {
+        .ng-option {
+            background-color: #2d323e;
+            color: #fff;
+
+            &.ng-option-marked {
+                background-color: rgba(30, 33, 41, 0.3);
+                color: #fff;
+            }
+
+            &.ng-option-selected {
                 background-color: #2d323e;
                 color: #fff;
-    
-                &.ng-option-marked {
-                    background-color: rgba(30, 33, 41, 0.3);
-                    color: #fff;
-                }
-    
-                &.ng-option-selected {
-                    background-color: #2d323e;
-                    color: #fff;
-                }
-    
-                &.ng-option-marked.ng-option-selected{
-                    background-color: rgba(30, 33, 41, 0.3);
-                    color: #fff;
-                }
             }
-            
+
+            &.ng-option-marked.ng-option-selected{
+                background-color: rgba(30, 33, 41, 0.3);
+                color: #fff;
+            }
         }
+        
     }
 }
 
 
-
 /* *** SMALL SIDEBAR STYLE ***  */
 .small-sidebar-tiledesk-nav-user {
     height: 40px;

package/src/index.html

@@ -33,7 +33,7 @@
   <!-- <script src="https://unpkg.com/mqtt@4.1.0/dist/mqtt.min.js"></script> -->
   <!-- <script src="./assets/js/watchToConnectionAtStartUp.js"></script> -->
 
-
+  
   <!-- segment analytics -->
   <script>
     !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="qaTU0wG6VH6xPAhOzD2kneI70Txg1fTB";;analytics.SNIPPET_VERSION="4.15.3";
@@ -41,7 +41,7 @@
     analytics.page();
     }}();
   </script>
-
+  
   <!-- add to homescreen for ios -->
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />

package/src/variables.scss

@@ -1,4 +1,4 @@
-body {
+:root {
     /* Color palette */
     --white: #ffffff;
     --black: #000000;
@@ -7,47 +7,27 @@ body {
     --basic-green: #0A7D41;
     --dark-green: #005f3b;
     --light-green: #8cc841;
+    
     --light-gray: #F2F2F2;
     --basic-gray: #666666;
     --dark-gray: #363636;
+    
+
     --light-blue: #C9E4F6;
     --basic-blue: #2a69c1;
     --bubble-blue: rgb(0, 153, 255);
-    
+    --bubble-lightyellow: rgb(255, 247, 237);
+    --bubble-privateMsg: rgb(254, 214, 168);
+    --bubble-privateMsgColor: rgb(47, 57, 65);
 
     --basic-yellow: #FFC627;
     --basic-red: #EB1E23;
 
-    --bck-msg-sent: #2a6ac1;
+    --bck-msg-sent: #62a8ea;
     --col-msg-sent:#ffffff;
-
-    --bck-msg-received: #f0f2f7;
-    --col-msg-received: #06132b;
-
-    --bubble-lightyellow: rgb(255, 247, 237);
-    --bubble-privateMsg: rgb(254, 214, 168);
-    --bubble-privateMsgColor: rgb(47, 57, 65);
-
     --light-white: #f7f7f7;
     --black: #1a1a1a;
     --gray: #aaaaaa;
 
-    --header-height: 60px;
-    --list-bkg-color: #f8fafc;
-    --list-bkg-color-selected: rgba(24, 119, 242, 0.12); //rgba(24, 119, 242, 0.04);
-
-    --button-in-msg-font-size: 15px;
-    --buttonBackgroundColor: #ffffff;
-    --buttonTextColor: #2a6ac1;
-    --buttonHoverBackgroundColor: #2a6ac1;
-    --buttonHoverTextColor: #ffffff;
-
-    --padding-conversation-detail: 10px;
-
-    --border-radius-item: 16px;
-    --border-radius-content: 16px;
-
-    --sidebar-width: 60px;
-    --nav-bar-heigth: 60px;
-
-}
+    
+  }

package/deploy_amazon_beta.sh

@@ -1,29 +0,0 @@
-#npm version prerelease --preid=beta
-version=`node -e 'console.log(require("./package.json").version)'`
-echo "version $version"
-
-URL_VER=${version//[.]//}
-echo 'URL_VER: ---->'$URL_VER
-
-sed -i -e "s/$URL_VER/g" src/utils/constants.ts
-
-# ng build --prod --base-href /$NEW_BUILD/
-#ionic cordova build browser --prod
-
-ionic cordova platform add browser --save
-#ionic cordova build browser --prod --release
-ionic cordova build --configuration="pre" browser #--prod  --verbose 
-
-cp -p src/firebase-messaging-sw.js platforms/browser/www/
-cp -p src/manifest.json platforms/browser/www/
-cp -p src/chat-config.json platforms/browser/www/
-
-cd platforms/browser/www
-aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5/$version/ --cache-control max-age=300
-aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5/ --cache-control max-age=300
-cd ../../../
-
-#aws cloudfront create-invalidation --distribution-id E13L8CUUKUWAJF --paths "/*"
-
-echo new version deployed on s3://tiledesk-dashboard-pre/chat-ionic5/$version/
-echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat-ionic5/$version/index.html

package/deploy_amazon_prod.sh

@@ -1,30 +0,0 @@
-# npm version patch
-version=`node -e 'console.log(require("./package.json").version)'`
-echo "version $version"
-
-URL_VER=${version//[.]//}
-echo 'URL_VER: ---->'$URL_VER
-
-# sed -i -e "s/$start$ver.$build/$start$NEW_VER.$NEW_BUILD/g" src/utils/constants.ts
-sed -i -e "s/$URL_VER/g" src/utils/constants.ts
-
-
-ionic cordova platform add browser --save
-#ionic cordova build --env=prod browser  -- --base-href /www/ --prod
-ionic cordova build --env=prod browser --prod 
-
-cp -p src/firebase-messaging-sw.js platforms/browser/www/
-cp -p src/manifest.json platforms/browser/www/
-cp -p src/chat-config.json platforms/browser/www/
-
-cd platforms/browser/www
-aws s3 sync . s3://tiledesk-console/v2/chat/ --cache-control max-age=172800
-aws s3 sync . s3://tiledesk-console/v2/chat/$version/ --cache-control max-age=172800
-# aws s3 sync . s3://tiledesk-console/v2/chat/latest/ --cache-control max-age=172800
-cd ../../../
-
-# aws cloudfront create-invalidation --distribution-id E36UIP90GOSFPM --paths "/*"
-
-# echo new version deployed on s3://tiledesk-dashboard/chat/$NEW_BUILD/
-echo new version deployed on s3://tiledesk-console/v2/chat/$version/
-echo available on https://console.tiledesk.com/v2/chat/$version/index.html

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

@@ -1,116 +0,0 @@
-<ion-header no-border class="ion-no-border">
-  <ion-toolbar style="height:60px">
-    <div class="flex-container">
-      <div class="back-flex-container">
-        <ion-buttons slot="start" style="height:60px">
-          <!-- (click)="pushPage('conversations-list')" defaultHref="/conversations-list" -->
-          <ion-back-button style="display: block;" text="" *ngIf="isMobile" (click)="goBackToConversationList()">
-          </ion-back-button>
-        </ion-buttons>
-      </div>
-      <div class="user-info-flex-container">
-        <div style="display: flex;">
-          <div>1</div>
-          <div>2</div>
-        </div>
-      </div>
-
-      <div class="resolve-flex-container">
-        <ion-buttons slot="end">
-
-          <!-- <ion-button ion-button fill="clear" color="primary" size="small" (click)="presentCreateTicketModal()" [ngClass]="{'resolve-conv-margin-right': !isMobile}">
-            <ion-icon name="ticket-outline"></ion-icon>
-            <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Crea ticket' | translate}} </span>
-          </ion-button> -->
-        
-          <ion-button *ngIf="conversationUid?.startsWith('support-group') && conv_type !== 'archived'" ion-button fill="clear" color="primary" size="small" 
-          (click)="closeConversation()" [ngClass]="{'resolve-conv-margin-right': !isMobile}" [disabled]="conv_closed === true">
-            <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
-            <ion-icon name="archive-outline"></ion-icon>
-            <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
-            <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Resolve' | translate}} </span>
-          </ion-button>
-        
-          <ion-button *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
-            <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
-            <ion-icon slot="icon-only" name="information-circle-outline"></ion-icon>
-            <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
-        
-          </ion-button>
-          <ion-button *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
-            <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
-          </ion-button>
-        
-        </ion-buttons>
-      </div>
-
-    </div>
-  </ion-toolbar>
-</ion-header>
-
-
-
-
-<ion-title>
-
-  <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" >
-    <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
-    <div *ngIf="conversationAvatar" class="avatar-container" (click)="onOpenCloseInfoConversation()" style="cursor: pointer"
-      [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
-      <app-avatar-profile [itemAvatar]=conversationAvatar></app-avatar-profile>
-    </div>
-    <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '63px' : ''  }" -->
-    <div *ngIf="isDirect" class="user-presence" [ngClass]="{ 'user-presence-ios': platformName === 'ios' }">
-      <app-user-presence [idUser]=conversationAvatar.conversation_with [translationMap]=translationMap
-        [borderColor]=borderColor [fontColor]=fontColor>
-      </app-user-presence>
-    </div>
-
-    <div *ngIf="conversationAvatar" class="user-typing">
-      <app-user-typing [idConversation]=conversationAvatar.uid [idCurrentUser]=idLoggedUser [isDirect]=isDirect
-        [translationMap]=translationMap [color]=fontColor [membersConversation]=membersConversation>
-      </app-user-typing>
-    </div>
-
-  </div>
-  <!-- [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' ? '82px' : ''82px''  }" -->
-  <!-- (click)="onOpenCloseInfoConversation()" -->
-  <div *ngIf="conversationAvatar" class="tile-info-with" 
-    [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
-    <span class="tile-username">{{ conversationAvatar.conversation_with_fullname | truncate:50 }} </span>
-    <!-- <span class="tile-username">{{ conversation_with_fullname }} </span> -->
-
-  </div>
-
-  <!-- <div *ngIf="conversationWithFullname" class="tile-info-with" (click)="onOpenCloseInfoConversation()">        
-    <span class="tile-username">{{ conversationWithFullname }} </span>
-  </div> -->
-
-</ion-title>
-<!-- openInfoConversation  {{openInfoConversation}} -->
-<ion-buttons slot="end">
-
-  <!-- <ion-button ion-button fill="clear" color="primary" size="small" (click)="presentCreateTicketModal()" [ngClass]="{'resolve-conv-margin-right': !isMobile}">
-    <ion-icon name="ticket-outline"></ion-icon>
-    <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Crea ticket' | translate}} </span>
-  </ion-button> -->
-
-  <ion-button *ngIf="conversationUid?.startsWith('support-group') && conv_type !== 'archived'" ion-button fill="clear" color="primary" size="small" 
-  (click)="closeConversation()" [ngClass]="{'resolve-conv-margin-right': !isMobile}" [disabled]="conv_closed === true">
-    <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
-    <ion-icon name="archive-outline"></ion-icon>
-    <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
-    <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Resolve' | translate}} </span>
-  </ion-button>
-
-  <ion-button *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
-    <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
-    <ion-icon slot="icon-only" name="information-circle-outline"></ion-icon>
-    <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
-
-  </ion-button>
-  <ion-button *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
-    <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
-  </ion-button>
-
-</ion-buttons>

package/src/app/components/conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.html

@@ -1,12 +0,0 @@
-<ion-toolbar [class.mobile]="isMobile">
-  
-  <ion-buttons slot="start">
-    <ion-button ion-button (click)="onBackButtonHandler()">
-      <ion-icon slot="icon-only" name="arrow-back-outline"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-
-  <ion-title> {{headerTitle}}</ion-title>
-
-</ion-toolbar>
-

package/src/app/components/conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.scss

@@ -1,14 +0,0 @@
-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);
-    }
-}

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

@@ -1,103 +0,0 @@
-<ion-navbar class="navbar navbar-absolute">
-  <div class="container-fluid">
-      <!-- <div class="navbar-left">
-        left
-      </div> -->
-      <div class="navbar-right">
-        <!-- test site -->
-        <ng-container *ngIf="project">
-          <button class="btn simulate-visitor-btn btn-success-no-boxshadow " (click)="testWidgetPage()">
-            <i class="material-icons" style="padding-top: 0px;font-size: 24px;">play_arrow</i>
-            {{translationsMap.get('NAVBAR.SIMULATE_VISITOR')}}
-          </button>
-        </ng-container>
-
-        <!--  ------ PROJECTS  DROPDOWN ------ -->
-        <ng-container *ngIf="project">
-            <li>
-              <button class="btn dropdown-toggle project-dropdown" (click)="openDropdownProjects = !openDropdownProjects">
-                <i class="material-icons" style="margin-right: 3px;">keyboard_arrow_down</i>
-                <span style="text-transform: none"> {{ project?.id_project?.name }} </span>
-              </button>
-              <div class="ripple-container"></div>
-              <div id="navbar_dropdown" class="dropdown-menu" [ngClass]="{'open': openDropdownProjects}">
-                
-                <!--  PROJECT SETTINGS  -->
-                <!-- <li *ngIf="USER_ROLE !== 'agent'">
-                  <a (click)="onClickDropdownOption('projectSettings')">
-                    <i class="material-icons" style="padding-right: 5px; margin-bottom: 2px; font-size: 20px">settings</i>
-                    {{translationsMap?.get('NAVBAR.PROJECT_SETTINGS')}}
-                  </a>
-                </li> -->
-  
-                <!--  ALL PROJECTS -->
-                <li (click)="onClickDropdownOption('allProjects')">
-                  <a style="cursor: pointer">
-                    <i class="material-icons" style="padding-right: 5px; margin-bottom: 2px; font-size: 20px">view_list</i>
-                    {{translationsMap?.get('NAVBAR.VIEW_ALL_PROJECTS')}}
-                  </a>
-                </li>
-  
-                <!--  ADD PROJECT -->
-                <li id="navbar_create_prjct" *ngIf="MT === true" (click)="onClickDropdownOption('addProject')">
-                  <a style="cursor: pointer">
-                    <i class="material-icons" style="padding-right: 5px; margin-bottom: 2px; font-size: 20px">add_circle_outline </i>
-                    {{translationsMap?.get('NAVBAR.ADD_PROJECT')}}
-                  </a>
-                </li>
-  
-                <li class="divider"></li>
-  
-                <!--  RECENT PROJECTS -->
-                <li>
-                  <span style="padding-left: 24px;font-size: 12px; color: rgb(118,149,165);font-weight: 400">
-                    {{translationsMap?.get('NAVBAR.RECENT_PROJECTS')}}
-                  </span>
-                </li>
-                <!-- 
-                ***** ngFor - reverse order of output using the index *****
-                Reverse() works in place. It means, it will change the original array. 
-                Slice without parameters returns a copy of projects, so original array, in this case, stays unchanged.  
-                let prjct of projects?.reverse()
-                -->
-                <!-- *ngFor="let prjct of projects?.slice().reverse() | slice:0:5; let i=index" -->
-                <li *ngFor="let prjct of projects?.slice() | slice:0:5; let i=index" style="cursor: pointer">
-                  <a (click)="goToHome(prjct?.id_project?._id, prjct?.id_project?.name)"
-                    [ngClass]="{'li-selected' : prjct?.id_project?._id === project?.id_project?.id }">
-  
-                    <span> {{ prjct?.id_project?.name }} </span>
-                  </a>
-                </li>
-
-                <ng-container *ngIf="projects?.length > 5">
-                  <li class="divider"></li>
-                  <li>
-                    <span style="padding-left: 24px;font-size: 12px; color: rgb(118,149,165);font-weight: 400">
-                      {{translationsMap?.get('NAVBAR.OTHER_PROJECTS')}}
-                    </span>
-                  </li>
-    
-                  <!-- *ngFor="let prjct of projects?.slice().reverse() | slice:5:10; let i=index" -->
-                  <li *ngFor="let prjct of projects?.slice() | slice:5:10; let i=index" style="cursor: pointer">
-                    <a (click)="goToHome(prjct?.id_project?._id, prjct?.id_project?.name)">
-                      {{ prjct?.id_project?.name }}
-                    </a>
-                  </li>
-                </ng-container>
-  
-              </div>
-            </li>
-        </ng-container>
-
-        <!--  Sound on / off -->
-        <ng-container *ngIf="project">
-          <button class="btn volume" style="cursor: pointer;" *ngIf="isSoundEnabled" (click)="onClickSound('disabled')">
-            <i class="material-icons">volume_up</i>
-          </button>
-          <button class="btn volume" style="cursor: pointer;" *ngIf="!isSoundEnabled" (click)="onClickSound('enabled')">
-            <i class="material-icons">volume_off</i>
-          </button>
-        </ng-container>
-      </div>
-  </div>
-</ion-navbar>