@chat21/chat21-ionic 3.0.59-rc10 → 3.0.59-rc12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +5 -0
  3. package/package.json +1 -1
  4. package/src/app/app.component.ts +4 -2
  5. package/src/app/chatlib/conversation-detail/conversation-content/conversation-content.component.html +1 -1
  6. package/src/app/chatlib/list-conversations-component/list-conversations/list-conversations.component.html +1 -1
  7. package/src/app/components/authentication/login/login.component.html +8 -8
  8. package/src/app/components/project-item/project-item.component.html +1 -1
  9. package/src/app/components/project-item/project-item.component.scss +6 -6
  10. package/src/app/components/project-item/project-item.component.ts +3 -2
  11. package/src/app/pages/authentication/login/login.page.html +1 -2
  12. package/src/app/pages/conversations-list/conversations-list.page.html +12 -7
  13. package/src/app/pages/conversations-list/conversations-list.page.scss +279 -261
  14. package/src/app/pages/conversations-list/conversations-list.page.ts +47 -5
  15. package/src/app/services/websocket/websocket-js.ts +1 -3
  16. package/src/chat21-core/providers/tiledesk/tiledesk-auth.service.ts +12 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # chat21-ionic ver 3.0
2
2
 
3
+ ### 3.0.59-rc12
4
+ - Fixes the bug: Cannot read properties of undefined (reading 'get') when "translationMap" in not yet defined
5
+ - Fixes the bug: when the log out is performed, the item with the number of new conversations remains visible in the left side panel of the conversations list
6
+
7
+ ### 3.0.59-rc11
8
+ - Fixed bug: the item in the left side panel showing the number of new conversations is not displayed if there are no conversations
9
+ - Removes the "last_project" object and the "contacts" object on logout from local storage
10
+
3
11
  ### 3.0.59-rc10
4
12
  - Changes in config.xml the site URL of the author
5
13
  - Changes the splash screen images
package/README.md CHANGED
@@ -60,6 +60,7 @@ In progress git
60
60
  pushEngine:"none", // OR YOUR CUSTOM PUSH ENGINE
61
61
  fileUploadAccept:"*/*",
62
62
  logLevel":"<YOUR-PREFERRED-LOG-LEVEL>",
63
+ supportMode: false,
63
64
  firebaseConfig: {
64
65
  tenant:"tilechat",
65
66
  apiKey: '123ABC..',
@@ -79,6 +80,7 @@ In progress git
79
80
  "apiUrl": "https://<YOUR-TILEDESK-API-URL>",
80
81
  "baseImageUrl": "https://<YOUR-BASE-IMAGE-URL>",
81
82
  "dashboardUrl": "https://<YOUR-DASHBOARD-URL>"
83
+ "wsUrl": 'ws://' + window.location.hostname + '/ws/',
82
84
  }
83
85
  };
84
86
  ```
@@ -88,6 +90,9 @@ In progress git
88
90
 
89
91
  * `fileUploadAccept`: The Chat21-ionic allows you to manage the type of files that can be uploaded. By default, all file types are accepted.
90
92
 
93
+ * `wsUrl`: allows you to know in real time the agent's availability status, the agent's busy status and the number of unassigned conversations for a selected project
94
+
95
+ * `supportMode`: if set to true it allows you to view the list of contacts from which you can make direct conversations and the item at the top of the list of conversations that shows the number of unassigned conversations of a selected project and that the agent can view and take over by clicking on it
91
96
 
92
97
  ### Push notification
93
98
  * open `/src/firebase-messaging-sw.js` and replace messagingSenderId: with < your messagingSenderId >
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chat21/chat21-ionic",
3
- "version": "3.0.59-rc10",
3
+ "version": "3.0.59-rc12",
4
4
  "author": "Tiledesk SRL",
5
5
  "homepage": "https://ionicframework.com/",
6
6
  "scripts": {
package/src/app/app.component.ts CHANGED
@@ -577,13 +577,14 @@ export class AppComponent implements OnInit {
577
577
  * @param user
578
578
  */
579
579
  goOnLine = () => {
580
+ console.log('[APP-COMP] - GO-ONLINE ');
580
581
  // this.isOnline = true;
581
582
  // this.logger.info('initialize FROM [APP-COMP] - [APP-COMP] - GO-ONLINE isOnline ', this.isOnline);
582
583
 
583
584
  // clearTimeout(this.timeModalLogin);
584
585
  const tiledeskToken = this.tiledeskAuthService.getTiledeskToken();
585
586
  this.connetWebsocket(tiledeskToken)
586
-
587
+ this.events.publish('go:online', true);
587
588
  const currentUser = this.tiledeskAuthService.getCurrentUser();
588
589
  // this.logger.printDebug('APP-COMP - goOnLine****', currentUser);
589
590
  this.logger.log('[APP-COMP] - GO-ONLINE - currentUser ', currentUser);
@@ -619,10 +620,11 @@ export class AppComponent implements OnInit {
619
620
  webSocketClose() {
620
621
  this.logger.log('[APP-COMP] - GO-OFFLINE - webSocketClose');
621
622
  this.webSocketJs.close()
623
+ this.events.publish('go:offline', true);
622
624
  }
623
625
 
624
626
  goOffLine = () => {
625
- this.logger.log('[APP-COMP] - GO-OFFLINE');
627
+ console.log('[APP-COMP] - GO-OFFLINE');
626
628
 
627
629
  this.webSocketClose()
628
630
  // this.isOnline = false;
package/src/app/chatlib/conversation-detail/conversation-content/conversation-content.component.html CHANGED
@@ -10,7 +10,7 @@
10
10
  <div class="chat21-bounce1" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
11
11
  <div class="chat21-bounce2" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
12
12
  <div class="chat21-bounce3" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
13
- <span>{{translationMap.get('LABEL_LOADING')}}</span>
13
+ <span>{{translationMap?.get('LABEL_LOADING')}}</span>
14
14
  </div>
15
15
  </span>
16
16
 
package/src/app/chatlib/list-conversations-component/list-conversations/list-conversations.component.html CHANGED
@@ -34,7 +34,7 @@
34
34
  width="24px" height="24px" viewBox="0 0 24 24">
35
35
  <path fill="none" d="M0 0h24v24H0z"/>
36
36
  <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
37
- <title id="altIconTitle">{{ translationMap.get('CLOSED') }}</title>
37
+ <title id="altIconTitle">{{ translationMap?.get('CLOSED') }}</title>
38
38
  </svg>
39
39
  </button>
40
40
  </div>
package/src/app/components/authentication/login/login.component.html CHANGED
@@ -8,25 +8,25 @@
8
8
 
9
9
  <div class="signin-title" style="text-align:center">
10
10
  <h2 style="font-family: 'Montserrat', sans-serif; font-weight: 400;">
11
- {{ translationMap.get('LABEL_SIGNIN_TO') }}
11
+ {{ translationMap?.get('LABEL_SIGNIN_TO') }}
12
12
  {{companyName}}
13
13
  </h2>
14
14
  </div>
15
15
  <div class="login-container">
16
16
  <form [formGroup]="userForm" (ngSubmit)="signInWithEmailAndPassword()" novalidate>
17
17
 
18
- <ion-label stacked for="email">{{ translationMap.get('LABEL_EMAIL') }}</ion-label>
18
+ <ion-label stacked for="email">{{ translationMap?.get('LABEL_EMAIL') }}</ion-label>
19
19
  <ion-input #email formControlName="email" type="email" id="email" required autocapitalize="off" spellcheck="false"
20
- placeholder="{{ translationMap.get('LABEL_PLACEHOLDER_EMAIL') }}"
20
+ placeholder="{{ translationMap?.get('LABEL_PLACEHOLDER_EMAIL') }}"
21
21
  [class.invalid]="!userForm.controls.email.valid" ></ion-input>
22
22
  <div *ngIf="formErrors.email" class="is-danger">
23
23
  {{ formErrors.email }}
24
24
  </div>
25
25
 
26
26
 
27
- <ion-label stacked for="password">{{ translationMap.get('LABEL_PASSWORD') }}</ion-label>
27
+ <ion-label stacked for="password">{{ translationMap?.get('LABEL_PASSWORD') }}</ion-label>
28
28
  <ion-input #password formControlName="password" type="password" id="password" required
29
- placeholder="{{ translationMap.get('LABEL_PLACEHOLDER_PASSWORD') }}"
29
+ placeholder="{{ translationMap?.get('LABEL_PLACEHOLDER_PASSWORD') }}"
30
30
  [class.invalid]="!userForm.controls.password.valid"></ion-input>
31
31
 
32
32
  <div *ngIf="formErrors.password" class="is-danger">
@@ -36,7 +36,7 @@
36
36
 
37
37
  <button type="submit" class="btn signin-button ion-activatable ripple-parent" [ngClass]="{'signin-button-is-disabled': !userForm.valid}" [disabled]="!userForm.valid">
38
38
  <span class="signin-button-label" *ngIf="showSpinnerInLoginBtn === false" >
39
- {{ translationMap.get('LABEL_SIGNIN') }}
39
+ {{ translationMap?.get('LABEL_SIGNIN') }}
40
40
  </span>
41
41
  <ion-ripple-effect type="unbounded"></ion-ripple-effect>
42
42
  <ion-spinner *ngIf="showSpinnerInLoginBtn === true" name="bubbles" color="white" duration="2" ></ion-spinner>
@@ -50,9 +50,9 @@
50
50
  </p> -->
51
51
 
52
52
  <p style="color: #666666; font-size: 1.1em; text-align: center; margin-top: 16px;">
53
- {{ translationMap.get('LABEL_FORGOT_YOUR_PASSWORD') }}
53
+ {{ translationMap?.get('LABEL_FORGOT_YOUR_PASSWORD') }}
54
54
  <span style="color: #03a5e8; cursor:pointer" (click)="goToResetPsw()">
55
- {{ translationMap.get('LABEL_CLICK_HERE') }}
55
+ {{ translationMap?.get('LABEL_CLICK_HERE') }}
56
56
  </span>
57
57
  </p>
58
58
 
package/src/app/components/project-item/project-item.component.html CHANGED
@@ -130,7 +130,7 @@
130
130
  </svg>
131
131
  </div>
132
132
  <span *ngIf="project?.ws_projct_user_isBusy === true" class="project-item--isBusy-busy-text text-pulse-animation">
133
- {{translationMap.get('Busy')}}
133
+ {{translationMap?.get('Busy')}}
134
134
  </span>
135
135
  </div>
136
136
 
package/src/app/components/project-item/project-item.component.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  padding-top: 0px;
5
5
  margin-top: 0px !important;
6
6
  padding-bottom: 0px !important;
7
- background: #fff;
7
+ // background: #fff;
8
8
  padding-left: 0px;
9
9
  width: 100%;
10
10
  // min-height: 70px;
@@ -12,12 +12,12 @@
12
12
  min-height: 55px;
13
13
  height: 55px;
14
14
  position: relative;
15
- top: -4px;
15
+ top: -5px;
16
16
  }
17
17
 
18
- .main-content-project-for-panel:hover {
19
- background-color: rgb(244, 243, 244);
20
- }
18
+ // .main-content-project-for-panel:hover {
19
+ // background-color: rgb(244, 243, 244);
20
+ // }
21
21
  .container-project-for-panel {
22
22
  padding: 0px !important;
23
23
  width: 296px;
@@ -298,7 +298,7 @@
298
298
 
299
299
  .availabily-and-busy-wpr {
300
300
  // margin-top: 6px;
301
- margin-top: 4px;
301
+ margin-top: 7px;
302
302
  margin-left: 11px;
303
303
  }
304
304
 
package/src/app/components/project-item/project-item.component.ts CHANGED
@@ -117,13 +117,14 @@ export class ProjectItemComponent implements OnInit {
117
117
  let stored_project = ''
118
118
  try {
119
119
  stored_project = localStorage.getItem('last_project')
120
+ this.logger.log('PROJECT-ITEM - THERE IS A STORED PROJECT ', stored_project)
120
121
  } catch (err) {
121
- console.log('Get loacal storage item LAST PROJECT ', err)
122
+ this.logger.log('Get local storage LAST PROJECT ', err)
122
123
  }
123
124
 
124
125
 
125
126
  if (!stored_project) {
126
- console.log('PROJECT-ITEM - THERE IS NOT STORED LAST PROJECT ', stored_project)
127
+ this.logger.log('PROJECT-ITEM - THERE IS NOT STORED LAST PROJECT ', stored_project)
127
128
  const tiledeskToken = this.appStorageService.getItem('tiledeskToken');
128
129
  this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTS - tiledeskToken', tiledeskToken);
129
130
  this.tiledeskService.getProjects(tiledeskToken).subscribe(projects => {
package/src/app/pages/authentication/login/login.page.html CHANGED
@@ -3,6 +3,5 @@
3
3
  [translationMap] = translationMap
4
4
  [companyLogoBlackUrl]= companyLogoBlackUrl
5
5
  [companyName]= companyName
6
- (eventSignInWithEmailAndPassword)="returnSignInWithEmailAndPassword($event)"
7
- >
6
+ (eventSignInWithEmailAndPassword)="returnSignInWithEmailAndPassword($event)">
8
7
  </component-login>
package/src/app/pages/conversations-list/conversations-list.page.html CHANGED
@@ -12,13 +12,8 @@
12
12
 
13
13
  <div id="scrollbar2">
14
14
  <ion-list>
15
- <span
16
- *ngIf="(conversations.length > 0 && conversationType ==='active') || (archivedConversations.length > 0 && conversationType ==='archived');then contentConversations else contentMessageWelcome">
17
- here is ignored
18
- </span>
19
15
 
20
- <ng-template #contentConversations>
21
- <!-- -------------------------------------------------------------------------- -->
16
+ <!-- -------------------------------------------------------------------------- -->
22
17
  <!-- New <ion-spinner class="spinner-middle" style="margin-left: 19px;"></ion-spinner> -->
23
18
  <!-- -------------------------------------------------------------------------- -->
24
19
  <ion-item *ngIf="isOnline === false" style="padding-left:0px!important ;padding-right:0px!important" button="true" lines="none" class="ion-no-padding waiting-for-connection">
@@ -42,11 +37,21 @@
42
37
  <ion-label part="message-text" class="waiting-for-network-msg"> Waiting for network</ion-label>
43
38
  </ion-item>
44
39
 
45
- <ion-item *ngIf="supportMode" class="ion-no-padding open-iframe-item" style="padding-left:0px!important ;padding-right:0px!important; height:55px" button="true"
40
+ <ion-item *ngIf="supportMode && displayNewConvsItem" class="ion-no-padding open-iframe-item"
41
+ button="true"
46
42
  (click)="openUnsevedConversationIframe()">
47
43
  <div tabindex="0"></div>
48
44
  <app-project-item (projectIdEvent)="getLastProjectId($event)"></app-project-item>
49
45
  </ion-item>
46
+
47
+ <span
48
+ *ngIf="(conversations.length > 0 && conversationType ==='active') || (archivedConversations.length > 0 && conversationType ==='archived');then contentConversations else contentMessageWelcome">
49
+ here is ignored
50
+ </span>
51
+
52
+
53
+
54
+ <ng-template #contentConversations>
50
55
  <!-- ---------------------------------- -->
51
56
  <!-- ACTIVE CONVERSATION LIST -->
52
57
  <!-- ---------------------------------- -->
package/src/app/pages/conversations-list/conversations-list.page.scss CHANGED
@@ -1,284 +1,302 @@
1
1
  ion-header {
2
- border-bottom-style: solid;
3
- border-color: var(--light-gray);
4
- border-bottom-width: thin;
2
+ border-bottom-style: solid;
3
+ border-color: var(--light-gray);
4
+ border-bottom-width: thin;
5
5
  }
6
6
 
7
-
8
-
9
7
  ion-list {
10
- display: block;
11
- margin-block-start: 1em;
12
- margin-block-end: 1em;
13
- margin-inline-start: 0px;
14
- margin-inline-end: 0px;
15
- padding-inline-start: 40px;
16
- list-style-type: none;
17
- margin: 0;
18
- padding: 0;
8
+ display: block;
9
+ margin-block-start: 1em;
10
+ margin-block-end: 1em;
11
+ margin-inline-start: 0px;
12
+ margin-inline-end: 0px;
13
+ padding-inline-start: 40px;
14
+ list-style-type: none;
15
+ margin: 0;
16
+ padding: 0;
19
17
 
20
- ion-item {
21
- cursor: pointer;
22
- height: 64px;
18
+ ion-item {
19
+ cursor: pointer;
20
+ height: 64px;
21
+ position: relative;
22
+ display: flex;
23
+ text-decoration: none;
24
+ padding-left: 8px;
25
+ padding-right: 8px;
26
+ --padding-start: 0;
27
+ --inner-padding-end: 0;
28
+ .selected {
29
+ border-radius: 10px;
30
+ padding-left: 8px;
31
+ padding-right: 8px;
32
+ position: absolute;
33
+ width: 100%;
34
+ height: 100%;
35
+ z-index: -1;
36
+ background-color: rgba(0, 0, 0, 0.05);
37
+ }
38
+ ion-avatar {
39
+ position: relative;
40
+ padding: 0;
41
+ margin: 0 12px 0 8px;
42
+ height: 50px;
43
+ width: 50px;
44
+ min-width: 50px;
45
+ min-height: 50px;
46
+ line-height: 50px;
47
+ .avatar-placeholder {
48
+ position: absolute;
49
+ top: 0;
50
+ left: 0;
51
+ width: 100%;
52
+ height: 100%;
53
+ border-radius: 50%;
54
+ text-align: center;
55
+ font-size: 20px;
56
+ color: #ffffff;
57
+ font-weight: 500;
58
+ }
59
+ .avatar-profile {
23
60
  position: relative;
24
- display: flex;
25
- text-decoration: none;
26
- padding-left: 8px;
27
- padding-right: 8px;
28
- --padding-start: 0;
29
- --inner-padding-end: 0;
30
- .selected {
31
- border-radius: 10px;
32
- padding-left: 8px;
33
- padding-right: 8px;
34
- position: absolute;
35
- width: 100%;
36
- height: 100%;
37
- z-index:-1;
38
- background-color: rgba(0, 0, 0, .05);
39
- }
40
- ion-avatar {
41
- position: relative;
42
- padding:0;
43
- margin:0 12px 0 8px;
44
- height: 50px;
45
- width: 50px;
46
- min-width: 50px;
47
- min-height: 50px;
48
- line-height: 50px;
49
- .avatar-placeholder {
50
- position: absolute;
51
- top:0;
52
- left:0;
53
- width: 100%;
54
- height: 100%;
55
- border-radius: 50%;
56
- text-align: center;
57
- font-size: 20px;
58
- color:#ffffff;
59
- font-weight: 500;
60
- }
61
- .avatar-profile {
62
- position: relative;
63
- display: inline-block;
64
- width: 100%;
65
- height: 100%;
66
- background-color: transparent;
67
- background-size: cover;
68
- background-position: top center;
69
- border-radius: 50%;
70
- border-color: #c3c3c3;
71
- border-style: solid;
72
- border-width: 0px;
73
- }
74
- }
75
- ion-label {
76
- flex: 1 1 0px;
77
- justify-content: center;
78
- min-width: 0;
79
- padding: 0;
80
- font-family: Helvetica, Helvetica, Arial, sans-serif;
81
- line-height: 1.28;
82
- text-rendering: optimizeLegibility;
83
- .conversation_with {
84
- color: rgba(0, 0, 0, 1);
85
- font-size: 15px;
86
- font-weight: 400;
87
- line-height: 1.4;
88
- }
89
- .conversation_message {
90
- p {
91
- color: rgba(153, 153, 153, 1);
92
- font-size: 13px;
93
- font-weight: 400;
94
- height: 18px;
95
- &.not-read {
96
- font-weight:bold;
97
- }
98
- }
99
-
100
- }
101
-
102
- }
103
- ion-note {
104
- position: absolute;
105
- right: 8px;
106
- top: 4px;
107
- font-size: 10px;
108
- }
109
- ion-buttons {
110
- margin: 0;
111
- ion-button {
112
- padding: 0;
113
- margin: 0;
114
- height: 24px;
115
- width: 24px;
116
- font-size: 10px;
117
- --padding-start: 0px;
118
- --padding-end: 0px;
119
- color: rgba(153, 153, 153, 1);
120
- background-color: transparent;
121
- &:hover {
122
- background-color: rgba(0, 0, 0, .05)
123
- }
124
- }
61
+ display: inline-block;
62
+ width: 100%;
63
+ height: 100%;
64
+ background-color: transparent;
65
+ background-size: cover;
66
+ background-position: top center;
67
+ border-radius: 50%;
68
+ border-color: #c3c3c3;
69
+ border-style: solid;
70
+ border-width: 0px;
71
+ }
72
+ }
73
+ ion-label {
74
+ flex: 1 1 0px;
75
+ justify-content: center;
76
+ min-width: 0;
77
+ padding: 0;
78
+ font-family: Helvetica, Helvetica, Arial, sans-serif;
79
+ line-height: 1.28;
80
+ text-rendering: optimizeLegibility;
81
+ .conversation_with {
82
+ color: rgba(0, 0, 0, 1);
83
+ font-size: 15px;
84
+ font-weight: 400;
85
+ line-height: 1.4;
86
+ }
87
+ .conversation_message {
88
+ p {
89
+ color: rgba(153, 153, 153, 1);
90
+ font-size: 13px;
91
+ font-weight: 400;
92
+ height: 18px;
93
+ &.not-read {
94
+ font-weight: bold;
95
+ }
125
96
  }
126
-
127
- .notification_point {
128
- width: 10px;
129
- height: 10px;
130
- border-radius: 50%;
131
- background-color: #0b5c89;
132
- position: absolute;
133
- right: 6px;
134
- bottom: 8px;
97
+ }
98
+ }
99
+ ion-note {
100
+ position: absolute;
101
+ right: 8px;
102
+ top: 4px;
103
+ font-size: 10px;
104
+ }
105
+ ion-buttons {
106
+ margin: 0;
107
+ ion-button {
108
+ padding: 0;
109
+ margin: 0;
110
+ height: 24px;
111
+ width: 24px;
112
+ font-size: 10px;
113
+ --padding-start: 0px;
114
+ --padding-end: 0px;
115
+ color: rgba(153, 153, 153, 1);
116
+ background-color: transparent;
117
+ &:hover {
118
+ background-color: rgba(0, 0, 0, 0.05);
135
119
  }
120
+ }
136
121
  }
137
122
 
123
+ .notification_point {
124
+ width: 10px;
125
+ height: 10px;
126
+ border-radius: 50%;
127
+ background-color: #0b5c89;
128
+ position: absolute;
129
+ right: 6px;
130
+ bottom: 8px;
131
+ }
132
+ }
138
133
  }
139
134
 
140
135
  .waiting-for-connection {
141
- --background: #fdd764;
142
- --min-height: 70px
136
+ --background: #fdd764;
137
+ --min-height: 70px;
143
138
  }
144
139
 
145
140
  // -------------------------------
146
141
  // Spinner
147
142
  // -------------------------------
148
143
  .sk-fading-circle {
149
- // margin: 100px auto;
150
- width: 25px;
151
- height: 25px;
152
- position: relative;
153
- margin-left: 10px;
154
- margin-top: 13px;
155
- }
156
-
157
- .sk-fading-circle .sk-circle {
158
- width: 100%;
159
- height: 100%;
160
- position: absolute;
161
- left: 0;
162
- top: 0;
163
- }
164
-
165
- .sk-fading-circle .sk-circle:before {
166
- content: '';
167
- display: block;
168
- margin: 0 auto;
169
- width: 15%;
170
- height: 15%;
171
- background-color: #333;
172
- border-radius: 100%;
173
- -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
174
- animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
175
- }
176
- .sk-fading-circle .sk-circle2 {
177
- -webkit-transform: rotate(30deg);
178
- -ms-transform: rotate(30deg);
179
- transform: rotate(30deg);
180
- }
181
- .sk-fading-circle .sk-circle3 {
182
- -webkit-transform: rotate(60deg);
183
- -ms-transform: rotate(60deg);
184
- transform: rotate(60deg);
185
- }
186
- .sk-fading-circle .sk-circle4 {
187
- -webkit-transform: rotate(90deg);
188
- -ms-transform: rotate(90deg);
189
- transform: rotate(90deg);
190
- }
191
- .sk-fading-circle .sk-circle5 {
192
- -webkit-transform: rotate(120deg);
193
- -ms-transform: rotate(120deg);
194
- transform: rotate(120deg);
195
- }
196
- .sk-fading-circle .sk-circle6 {
197
- -webkit-transform: rotate(150deg);
198
- -ms-transform: rotate(150deg);
199
- transform: rotate(150deg);
200
- }
201
- .sk-fading-circle .sk-circle7 {
202
- -webkit-transform: rotate(180deg);
203
- -ms-transform: rotate(180deg);
204
- transform: rotate(180deg);
205
- }
206
- .sk-fading-circle .sk-circle8 {
207
- -webkit-transform: rotate(210deg);
208
- -ms-transform: rotate(210deg);
209
- transform: rotate(210deg);
210
- }
211
- .sk-fading-circle .sk-circle9 {
212
- -webkit-transform: rotate(240deg);
213
- -ms-transform: rotate(240deg);
214
- transform: rotate(240deg);
215
- }
216
- .sk-fading-circle .sk-circle10 {
217
- -webkit-transform: rotate(270deg);
218
- -ms-transform: rotate(270deg);
219
- transform: rotate(270deg);
220
- }
221
- .sk-fading-circle .sk-circle11 {
222
- -webkit-transform: rotate(300deg);
223
- -ms-transform: rotate(300deg);
224
- transform: rotate(300deg);
225
- }
226
- .sk-fading-circle .sk-circle12 {
227
- -webkit-transform: rotate(330deg);
228
- -ms-transform: rotate(330deg);
229
- transform: rotate(330deg);
230
- }
231
- .sk-fading-circle .sk-circle2:before {
232
- -webkit-animation-delay: -1.1s;
233
- animation-delay: -1.1s;
234
- }
235
- .sk-fading-circle .sk-circle3:before {
236
- -webkit-animation-delay: -1s;
237
- animation-delay: -1s;
238
- }
239
- .sk-fading-circle .sk-circle4:before {
240
- -webkit-animation-delay: -0.9s;
241
- animation-delay: -0.9s;
242
- }
243
- .sk-fading-circle .sk-circle5:before {
244
- -webkit-animation-delay: -0.8s;
245
- animation-delay: -0.8s;
246
- }
247
- .sk-fading-circle .sk-circle6:before {
248
- -webkit-animation-delay: -0.7s;
249
- animation-delay: -0.7s;
250
- }
251
- .sk-fading-circle .sk-circle7:before {
252
- -webkit-animation-delay: -0.6s;
253
- animation-delay: -0.6s;
254
- }
255
- .sk-fading-circle .sk-circle8:before {
256
- -webkit-animation-delay: -0.5s;
257
- animation-delay: -0.5s;
258
- }
259
- .sk-fading-circle .sk-circle9:before {
260
- -webkit-animation-delay: -0.4s;
261
- animation-delay: -0.4s;
262
- }
263
- .sk-fading-circle .sk-circle10:before {
264
- -webkit-animation-delay: -0.3s;
265
- animation-delay: -0.3s;
266
- }
267
- .sk-fading-circle .sk-circle11:before {
268
- -webkit-animation-delay: -0.2s;
269
- animation-delay: -0.2s;
144
+ // margin: 100px auto;
145
+ width: 25px;
146
+ height: 25px;
147
+ position: relative;
148
+ margin-left: 10px;
149
+ margin-top: 13px;
150
+ }
151
+
152
+ .sk-fading-circle .sk-circle {
153
+ width: 100%;
154
+ height: 100%;
155
+ position: absolute;
156
+ left: 0;
157
+ top: 0;
158
+ }
159
+
160
+ .sk-fading-circle .sk-circle:before {
161
+ content: "";
162
+ display: block;
163
+ margin: 0 auto;
164
+ width: 15%;
165
+ height: 15%;
166
+ background-color: #333;
167
+ border-radius: 100%;
168
+ -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
169
+ animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
170
+ }
171
+ .sk-fading-circle .sk-circle2 {
172
+ -webkit-transform: rotate(30deg);
173
+ -ms-transform: rotate(30deg);
174
+ transform: rotate(30deg);
175
+ }
176
+ .sk-fading-circle .sk-circle3 {
177
+ -webkit-transform: rotate(60deg);
178
+ -ms-transform: rotate(60deg);
179
+ transform: rotate(60deg);
180
+ }
181
+ .sk-fading-circle .sk-circle4 {
182
+ -webkit-transform: rotate(90deg);
183
+ -ms-transform: rotate(90deg);
184
+ transform: rotate(90deg);
185
+ }
186
+ .sk-fading-circle .sk-circle5 {
187
+ -webkit-transform: rotate(120deg);
188
+ -ms-transform: rotate(120deg);
189
+ transform: rotate(120deg);
190
+ }
191
+ .sk-fading-circle .sk-circle6 {
192
+ -webkit-transform: rotate(150deg);
193
+ -ms-transform: rotate(150deg);
194
+ transform: rotate(150deg);
195
+ }
196
+ .sk-fading-circle .sk-circle7 {
197
+ -webkit-transform: rotate(180deg);
198
+ -ms-transform: rotate(180deg);
199
+ transform: rotate(180deg);
200
+ }
201
+ .sk-fading-circle .sk-circle8 {
202
+ -webkit-transform: rotate(210deg);
203
+ -ms-transform: rotate(210deg);
204
+ transform: rotate(210deg);
205
+ }
206
+ .sk-fading-circle .sk-circle9 {
207
+ -webkit-transform: rotate(240deg);
208
+ -ms-transform: rotate(240deg);
209
+ transform: rotate(240deg);
210
+ }
211
+ .sk-fading-circle .sk-circle10 {
212
+ -webkit-transform: rotate(270deg);
213
+ -ms-transform: rotate(270deg);
214
+ transform: rotate(270deg);
215
+ }
216
+ .sk-fading-circle .sk-circle11 {
217
+ -webkit-transform: rotate(300deg);
218
+ -ms-transform: rotate(300deg);
219
+ transform: rotate(300deg);
220
+ }
221
+ .sk-fading-circle .sk-circle12 {
222
+ -webkit-transform: rotate(330deg);
223
+ -ms-transform: rotate(330deg);
224
+ transform: rotate(330deg);
225
+ }
226
+ .sk-fading-circle .sk-circle2:before {
227
+ -webkit-animation-delay: -1.1s;
228
+ animation-delay: -1.1s;
229
+ }
230
+ .sk-fading-circle .sk-circle3:before {
231
+ -webkit-animation-delay: -1s;
232
+ animation-delay: -1s;
233
+ }
234
+ .sk-fading-circle .sk-circle4:before {
235
+ -webkit-animation-delay: -0.9s;
236
+ animation-delay: -0.9s;
237
+ }
238
+ .sk-fading-circle .sk-circle5:before {
239
+ -webkit-animation-delay: -0.8s;
240
+ animation-delay: -0.8s;
241
+ }
242
+ .sk-fading-circle .sk-circle6:before {
243
+ -webkit-animation-delay: -0.7s;
244
+ animation-delay: -0.7s;
245
+ }
246
+ .sk-fading-circle .sk-circle7:before {
247
+ -webkit-animation-delay: -0.6s;
248
+ animation-delay: -0.6s;
249
+ }
250
+ .sk-fading-circle .sk-circle8:before {
251
+ -webkit-animation-delay: -0.5s;
252
+ animation-delay: -0.5s;
253
+ }
254
+ .sk-fading-circle .sk-circle9:before {
255
+ -webkit-animation-delay: -0.4s;
256
+ animation-delay: -0.4s;
257
+ }
258
+ .sk-fading-circle .sk-circle10:before {
259
+ -webkit-animation-delay: -0.3s;
260
+ animation-delay: -0.3s;
261
+ }
262
+ .sk-fading-circle .sk-circle11:before {
263
+ -webkit-animation-delay: -0.2s;
264
+ animation-delay: -0.2s;
265
+ }
266
+ .sk-fading-circle .sk-circle12:before {
267
+ -webkit-animation-delay: -0.1s;
268
+ animation-delay: -0.1s;
269
+ }
270
+
271
+ @-webkit-keyframes sk-circleFadeDelay {
272
+ 0%,
273
+ 39%,
274
+ 100% {
275
+ opacity: 0;
270
276
  }
271
- .sk-fading-circle .sk-circle12:before {
272
- -webkit-animation-delay: -0.1s;
273
- animation-delay: -0.1s;
277
+ 40% {
278
+ opacity: 1;
274
279
  }
275
-
276
- @-webkit-keyframes sk-circleFadeDelay {
277
- 0%, 39%, 100% { opacity: 0; }
278
- 40% { opacity: 1; }
280
+ }
281
+
282
+ @keyframes sk-circleFadeDelay {
283
+ 0%,
284
+ 39%,
285
+ 100% {
286
+ opacity: 0;
279
287
  }
280
-
281
- @keyframes sk-circleFadeDelay {
282
- 0%, 39%, 100% { opacity: 0; }
283
- 40% { opacity: 1; }
288
+ 40% {
289
+ opacity: 1;
284
290
  }
291
+ }
292
+
293
+ #no-convs-wpr {
294
+ margin: 100px auto;
295
+ }
296
+
297
+ .open-iframe-item {
298
+ padding-left: 0px !important ;
299
+ padding-right: 0px !important;
300
+ height: 55px !important;
301
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
302
+ }
package/src/app/pages/conversations-list/conversations-list.page.ts CHANGED
@@ -35,7 +35,8 @@ import { Platform } from '@ionic/angular';
35
35
  import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
36
36
  import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
37
37
  import { NetworkService } from 'src/app/services/network-service/network.service';
38
-
38
+ import { Subject } from 'rxjs';
39
+ import { takeUntil } from 'rxjs/operators'
39
40
 
40
41
  @Component({
41
42
  selector: 'app-conversations-list',
@@ -43,7 +44,10 @@ import { NetworkService } from 'src/app/services/network-service/network.service
43
44
  styleUrls: ['./conversations-list.page.scss'],
44
45
  })
45
46
  export class ConversationListPage implements OnInit {
47
+
46
48
  @ViewChild('ioncontentconvlist', { static: false }) ionContentConvList: IonContent;
49
+
50
+ private unsubscribe$: Subject<any> = new Subject<any>();
47
51
  private subscriptions: Array<string>;
48
52
  public tenant: string;
49
53
  public loggedUserUid: string;
@@ -72,6 +76,11 @@ export class ConversationListPage implements OnInit {
72
76
  public lastProjectId: string;
73
77
  public isOnline: boolean = true;
74
78
  public checkInternet: boolean;
79
+
80
+ public displayNewConvsItem: boolean = true
81
+
82
+
83
+
75
84
  constructor(
76
85
  private router: Router,
77
86
  private route: ActivatedRoute,
@@ -90,10 +99,12 @@ export class ConversationListPage implements OnInit {
90
99
  public appConfigProvider: AppConfigProvider,
91
100
  public platform: Platform,
92
101
  private networkService: NetworkService,
93
-
102
+
94
103
  ) {
95
104
  this.listenToAppCompConvsLengthOnInitConvs();
96
105
  this.listenToLogoutEvent();
106
+ this.listenGoOnline();
107
+ this.listenGoOffline();
97
108
  this.listenToSwPostMessage();
98
109
 
99
110
  }
@@ -218,11 +229,19 @@ export class ConversationListPage implements OnInit {
218
229
 
219
230
  private listnerStart() {
220
231
  const that = this;
221
- this.chatManager.BSStart.subscribe((data: any) => {
222
- this.logger.log('[CONVS-LIST-PAGE] ***** BSStart Current user *****', data);
232
+ this.chatManager.BSStart
233
+ .pipe(
234
+ takeUntil(that.unsubscribe$)
235
+ )
236
+ .subscribe((data: any) => {
237
+ console.log('[CONVS-LIST-PAGE] - BSStart SUBSCR DATA - Current user *****', data);
223
238
  if (data) {
224
239
  that.initialize();
225
240
  }
241
+ }, error => {
242
+ this.logger.error('[CONVS-LIST-PAGE] - BSStart SUBSCR - ERROR: ', error);
243
+ }, () => {
244
+ this.logger.log('[CONVS-LIST-PAGE] - BSStart SUBSCR * COMPLETE *')
226
245
  });
227
246
  }
228
247
 
@@ -259,7 +278,6 @@ export class ConversationListPage implements OnInit {
259
278
  if (!this.archivedConversations || this.archivedConversations.length === 0) {
260
279
  this.loadingIsActive = false;
261
280
  }
262
-
263
281
  }
264
282
 
265
283
 
@@ -279,9 +297,33 @@ export class ConversationListPage implements OnInit {
279
297
  });
280
298
  }
281
299
 
300
+ listenGoOnline() {
301
+
302
+ this.events.subscribe('go:online', (goonline) => {
303
+ this.logger.info('[CONVS-LIST-PAGE] - listen To go:online - goonline', goonline);
304
+ // this.events.unsubscribe('profileInfoButtonClick:logout')
305
+ if (goonline === true) {
306
+ this.displayNewConvsItem = true
307
+ }
308
+ });
309
+ }
310
+
311
+ listenGoOffline(){
312
+
313
+ this.events.subscribe('go:offline', (offline) => {
314
+ this.logger.info('[CONVS-LIST-PAGE] - listen To go:offline - offline', offline);
315
+ // this.events.unsubscribe('profileInfoButtonClick:logout')
316
+ if (offline === true) {
317
+ this.displayNewConvsItem = false
318
+ }
319
+ });
320
+ }
321
+
282
322
  listenToLogoutEvent() {
283
323
  this.events.subscribe('profileInfoButtonClick:logout', (hasclickedlogout) => {
284
324
  this.logger.info('[CONVS-LIST-PAGE] - listenToLogoutEvent - hasclickedlogout', hasclickedlogout);
325
+
326
+
285
327
  this.conversations = []
286
328
  this.conversationsHandlerService.conversations = [];
287
329
  this.uidConvSelected = null;
package/src/app/services/websocket/websocket-js.ts CHANGED
@@ -78,10 +78,8 @@ export class WebSocketJs {
78
78
  this.callbacks.set(topic, { onCreate: onCreate, onUpdate: onUpdate, onData: onData });
79
79
  this.logger.log('[WEBSOCKET-JS] - CALLBACK-SET - callbacks', this.callbacks);
80
80
 
81
- this.logger.log('[WEBSOCKET-JS] - REF - READY STATE ', this.ws.readyState);
82
-
83
81
  if (this.ws && this.ws.readyState == 1) {
84
-
82
+ this.logger.log('[WEBSOCKET-JS] - REF - READY STATE ', this.ws.readyState);
85
83
  this.logger.log('[WEBSOCKET-JS] - REF - READY STATE = 1 > SUBSCRIBE TO TOPICS ');
86
84
 
87
85
  this.subscribe(topic);
package/src/chat21-core/providers/tiledesk/tiledesk-auth.service.ts CHANGED
@@ -31,7 +31,7 @@ export class TiledeskAuthService {
31
31
  public http: HttpClient,
32
32
  public appStorage: AppStorageService,
33
33
  // private events: EventsService,
34
- ) { }
34
+ ) { }
35
35
 
36
36
 
37
37
  initialize(serverBaseUrl: string) {
@@ -134,10 +134,19 @@ export class TiledeskAuthService {
134
134
  logOut() {
135
135
  this.logger.log('[TILEDESK-AUTH] - LOGOUT')
136
136
  this.appStorage.removeItem('tiledeskToken')
137
+ this.appStorage.removeItem('currentUser')
138
+
137
139
  this.appStorage.removeItem('currentUser')
138
140
  this.setCurrentUser(null);
139
141
  // this.isOnline$.next(false)
140
-
142
+ const stored_project = localStorage.getItem('last_project')
143
+ if (stored_project) {
144
+ localStorage.removeItem('last_project')
145
+ }
146
+ const stored_contacts = localStorage.getItem('contacts')
147
+ if (stored_contacts) {
148
+ localStorage.removeItem('contacts')
149
+ }
141
150
  }
142
151
 
143
152
 
@@ -183,7 +192,7 @@ export class TiledeskAuthService {
183
192
  } else if (storedTiledeskToken && storedTiledeskToken !== tiledeskToken) {
184
193
  this.logger.log('[TILEDESK-AUTH] - checkAndSetInStorageTiledeskToken STORED-TOKEN EXIST BUT IS != FROM TOKEN - RUN SET ')
185
194
  this.appStorage.setItem('tiledeskToken', tiledeskToken);
186
- } else if (storedTiledeskToken && storedTiledeskToken === tiledeskToken){
195
+ } else if (storedTiledeskToken && storedTiledeskToken === tiledeskToken) {
187
196
  this.logger.log('[TILEDESK-AUTH] - checkAndSetInStorageTiledeskToken STORED-TOKEN EXIST AND IS = TO TOKEN ')
188
197
  }
189
198
  }