@chat21/chat21-ionic 3.0.82-rc.7 → 3.0.83

package/src/global.scss

@@ -107,6 +107,189 @@ app-conversations-list {
     font-size: 13px;
 }
 
+// .popover-md .popover-content{
+//     width: auto!important;
+// }
+
+// ion-backdrop{
+//     display: block;
+//     background-color: #000000!important;
+//     width: 100%;
+//     height: 100%;
+//     opacity: 0.0!important;
+// }
+
+// ion-app, ion-nav, ion-tab, ion-tabs, .app-root, .ion-page {
+//     contain: none!important;
+// }
+
+// .avatar-profile {
+//     position: absolute;
+//     top: 0px;
+//     left: 0px;
+//     display: inline-block;
+//     width: 50px;
+//     height: 50px;
+//     background-color: transparent;
+//     background-size: cover;
+//     background-position: top center;
+//     border-radius: 50%;
+//     border-color: #c3c3c3;
+//     border-style: solid;
+//     border-width: 0px;
+// }
+// .chat21-avatar.big{
+//     width: 200px;
+//     height: 200px;
+// }
+
+// /* LOADING */
+// /*http://tobiasahlin.com/spinkit/*/
+// #chat21-spinner {
+//     min-height: 20px;
+//     display: none;
+//     margin: 20px auto 0;
+//     width: 70px;
+//     text-align: center;
+// }
+// #chat21-spinner.active {
+//     display: block;
+// }
+// #chat21-spinner > div {
+//     width: 12px;
+//     height: 12px;
+//     background-color: #2a69c1;
+//     border-radius: 100%;
+//     display: inline-block;
+//     -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+//     animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+// }
+// #chat21-spinner .chat21-bounce1 {
+//     -webkit-animation-delay: -0.32s;
+//     animation-delay: -0.32s;
+// }
+// #chat21-spinner .chat21-bounce2 {
+//     -webkit-animation-delay: -0.16s;
+//     animation-delay: -0.16s;
+// }
+// #chat21-spinner span {
+//     display: block;
+//     margin: 0.5em 0 0 0;
+//     color: #2a6ac1;
+//     /* text-transform: uppercase; */
+//     font-family: 'Roboto', sans-serif;
+//     -webkit-animation: pulse 2000ms linear infinite;
+//     -moz-animation: pulse 2000ms linear infinite;
+//     animation: pulse 2000ms linear infinite;
+//     text-align: center;
+//   }
+
+// @-webkit-keyframes sk-bouncedelay {
+//     0%, 80%, 100% { -webkit-transform: scale(0) }
+//     40% { -webkit-transform: scale(1.0) }
+// }
+
+// @keyframes sk-bouncedelay {
+//     0%, 80%, 100% {
+//     -webkit-transform: scale(0);
+//     transform: scale(0);
+//     } 40% {
+//     -webkit-transform: scale(1.0);
+//     transform: scale(1.0);
+//     }
+// }
+
+// .c21-right{
+//     float: right;
+// }
+// .c21-left{
+//     float: left;
+// }
+// .clearfix:after {
+//     display: block;
+//     clear: both;
+//     content: '';
+// }
+// .clear{
+//     clear: both;
+// }
+
+// /* END LOADIN */
+
+// .c21-alert {
+//     &.c21-alert-notification {
+//         display: inline-block;
+//         margin: 0 auto;
+//         position: fixed;
+//         -webkit-transition: all .5s ease-in-out 0s;
+//         transition: all .5s ease-in-out 0s;
+//         z-index: 1031;
+//         top: -100px;
+//         left: 0px;
+//         right: 0px;
+//         max-width: 450px;
+//         width: 80%;
+//         padding: 10px;
+//         cursor: pointer;
+//         display: block;
+//     }
+//     &.alert-danger {
+//         background-color: #f55a4e;
+//         color: #fff;
+//         border-radius: 3px;
+//         -webkit-box-shadow: 0 12px 20px -10px rgba(244,67,54,.28), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(244,67,54,.2);
+//         box-shadow: 0 12px 20px -10px rgba(244,67,54,.28), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(244,67,54,.2);
+//     }
+//     &.animated {
+//         top: 10px;
+//         -webkit-animation-duration: 1s;
+//         animation-duration: 1s;
+//         -webkit-animation-fill-mode: both;
+//         animation-fill-mode: both;
+//     }
+
+// }
+
+// ion-navbar {
+//     .toolbar-background{
+//         /* height: 55px; */
+//         box-shadow: inset 0px -1px 0px #f7f7f7;
+//     }
+
+// }
+
+// ion-toolbar {
+//     .toolbar-background {
+//         background-color: #ffffff;
+//     }
+//     .transparent{
+//         .toolbar-background {
+//             background-color: transparent;
+//         }
+//     }
+// }
+
+// .footer:before {
+//     height: 1px;
+// }
+// // .modal-page {
+// //     z-index: 1;
+// //     background-color: transparent;
+// //     opacity: 0;
+// //     transition: all 0.2s;
+// //     right: -100%;
+// //     &.open {
+// //         // background-color: $trasp-black;
+// //         opacity: 1;
+// //         transition: all 0.3s;
+// //         right: 0px;
+// //     }
+// // }
+
+// .split-pane-side {
+//     border-right: 1px solid rgba(169, 169, 169, 0.1)!important;
+// }
+
 // START GESTIONE SIDEBAR ESTERNA CON IFRAME //
 #tld-sidebar {
     position: absolute;
@@ -179,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);
 }
@@ -228,6 +423,11 @@ select:-webkit-autofill:focus {
     font-weight: 300;
 }
 
+// da rivedere
+// :host ::ng-deep tiledeskwidget-bubble-message > div > div > tiledeskwidget-image > div > img {
+//     display: none !important;
+// }
+
 /*
  * Canned responses
  * -------------------------------------------- */
@@ -236,10 +436,6 @@ select:-webkit-autofill:focus {
         opacity: 10 !important;
         cursor: pointer;
     }
-    .native-textarea[disabled] {
-        opacity: 10 !important;
-        cursor: pointer;
-    }
 }
 
 
@@ -285,7 +481,18 @@ select:-webkit-autofill:focus {
     line-height: 42px;
 }
 /* End rules for the member list refactoring in the "info-group.component.html" (replacement of ion-grid with ion-list) */
+.missing-connection-toast {
+    --background: #fdd764;
+    --color: #2e3939;
+    font-weight: 500;
+    font-size: 16px;
+}
 
+.missing-connection-toast::part(message) {
+    // display: none;
+    display: flex;
+    align-items: center;
+}
 
 // User details Sidebar
 .user-details-sidebar {
@@ -588,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,6 +33,15 @@
   <!-- <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";
+    analytics.load("qaTU0wG6VH6xPAhOzD2kneI70Txg1fTB");
+    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);
-    }
-}