tango-app-ui-store-ticket-infra 3.0.23-dev → 3.0.25-dev

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 (13) hide show
  1. package/esm2022/lib/components/analyze-report/analyze-report.component.mjs +24 -8
  2. package/esm2022/lib/components/create-ticket/create-ticket.component.mjs +5 -4
  3. package/esm2022/lib/components/raise-ticket/raise-ticket.component.mjs +7 -16
  4. package/esm2022/lib/components/tango-store-infra/tango-store-infra.component.mjs +11 -4
  5. package/esm2022/lib/components/ticket-infra/ticket-infra.component.mjs +7 -11
  6. package/esm2022/lib/services/tickets.service.mjs +4 -1
  7. package/fesm2022/tango-app-ui-store-ticket-infra.mjs +51 -38
  8. package/fesm2022/tango-app-ui-store-ticket-infra.mjs.map +1 -1
  9. package/lib/components/analyze-report/analyze-report.component.d.ts +5 -1
  10. package/lib/components/raise-ticket/raise-ticket.component.d.ts +2 -2
  11. package/lib/components/tango-store-infra/tango-store-infra.component.d.ts +1 -0
  12. package/lib/services/tickets.service.d.ts +1 -0
  13. package/package.json +1 -1
package/fesm2022/tango-app-ui-store-ticket-infra.mjs CHANGED
@@ -89,6 +89,9 @@ class TicketsService {
89
89
  cameraAngleChange(data) {
90
90
  return this.http.post(`${this.ticketsApiUrl}/storeInfra/cameraAngleChange`, data);
91
91
  }
92
+ getStreamAngleChange(data) {
93
+ return this.http.post(`${this.dataMismatchApiUrl}/get-stream-angle-change`, data);
94
+ }
92
95
  dataMismatchActivityList(data) {
93
96
  return this.http.post(`${this.ticketsApiUrl}/dataMismatch/activityList`, data);
94
97
  }
@@ -123,6 +126,7 @@ class RaiseTicketComponent {
123
126
  errorMessage;
124
127
  dayjs = dayjs;
125
128
  formData = new FormData();
129
+ fileName;
126
130
  constructor(modalService, activeModal, fb, service, toastservice, router) {
127
131
  this.modalService = modalService;
128
132
  this.activeModal = activeModal;
@@ -139,18 +143,11 @@ class RaiseTicketComponent {
139
143
  filePath: ['']
140
144
  });
141
145
  }
142
- filepath() {
143
- const filePath = this.raiseTicket?.value?.filePath;
144
- if (!filePath) {
145
- return 'Attachments';
146
- }
147
- const segments = filePath.split(/[\/\\]/); // Split by both '/' and '\'
148
- return segments.pop() || 'Attachments'; // Get the last segment or return 'Attachments' if the path is empty
149
- }
150
146
  onFileSelected(event) {
151
147
  if (event.target.files && event.target.files.length > 0) {
152
148
  for (let i = 0; i < event.target.files.length; i++) {
153
149
  let file = event.target.files[i];
150
+ this.fileName = file?.name;
154
151
  this.formData.append('img', file);
155
152
  if (!file.type.startsWith('image/')) {
156
153
  this.errorMessage = 'Only image files are allowed!';
@@ -166,9 +163,6 @@ class RaiseTicketComponent {
166
163
  this.Ticketcreation();
167
164
  const modalRef = this.modalService.open(this.createTicket, { centered: true });
168
165
  }
169
- // confirmTicket() {
170
- // this.Ticketcreation();
171
- // }
172
166
  omit_special_char(event) {
173
167
  var k;
174
168
  k = event.charCode; // k = event.keyCode; (Both can be used)
@@ -202,15 +196,15 @@ class RaiseTicketComponent {
202
196
  this.service.changeData(data);
203
197
  // this.router.navigateByUrl('/manage/stores/infra-ticket?storeId='+this.data?.storeId)
204
198
  }
205
- dateFormat() {
206
- return this.dayjs(this.data?.date).format('DD-MM-YYYY');
199
+ dateFormat(date) {
200
+ return this.dayjs(date).format('DD-MM-YYYY');
207
201
  }
208
202
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: RaiseTicketComponent, deps: [{ token: i1$1.NgbModal }, { token: i1$1.NgbActiveModal }, { token: i2$2.FormBuilder }, { token: TicketsService }, { token: i3.ToastService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
209
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: RaiseTicketComponent, selector: "lib-raise-ticket", inputs: { data: "data" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "createTicket", first: true, predicate: ["createTicket"], descendants: true }], ngImport: i0, template: "<div class=\"card py-0 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"row w-100 my-5\">\r\n <div class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Raise Ticket</a>\r\n <div class=\"my-2\"><span class=\"sub-title\">For Store {{data?.storeName}} on</span> <span class=\"sub-title1 ms-2\">{{data?.date}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"raiseTicket\" class=\"row my-3\">\r\n <div class=\"col-md-6 my-3\">\r\n <label class=\"form-label\">Actual Billing Count</label>\r\n <input type=\"text\" formControlName=\"actualBilling\" (keypress)=\"omit_special_char($event)\" class=\"form-control\">\r\n </div>\r\n <div class=\"col-md-6 my-3\">\r\n <label class=\"form-label\">Your Expected Footfall</label>\r\n <input type=\"text\" formControlName=\"expectedFootfall\" (keypress)=\"omit_special_char($event)\" class=\"form-control\">\r\n </div>\r\n <div class=\"col-md-12 my-3\">\r\n <textarea class=\"type\" formControlName=\"description\" row=\"3\" class=\"form-control\" placeholder=\"Enter a description...\"></textarea>\r\n </div>\r\n <div class=\"col-md-12 my-3\">\r\n <span > <input type=\"file\" formControlName=\"filePath\" #fileInput style=\"display: none;\" accept=\"image/*\" (change)=\"onFileSelected($event)\">\r\n <button (click)=\"openFileInput()\" class=\"cursor-pointer btn btn-default p-0\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.8666 9.20835L10.2082 16.8667C9.27005 17.8049 7.99757 18.332 6.67075 18.332C5.34393 18.332 4.07145 17.8049 3.13325 16.8667C2.19505 15.9285 1.66797 14.656 1.66797 13.3292C1.66797 12.0024 2.19505 10.7299 3.13325 9.79168L10.7916 2.13335C11.4171 1.50788 12.2654 1.15649 13.1499 1.15649C14.0345 1.15649 14.8828 1.50788 15.5082 2.13335C16.1337 2.75882 16.4851 3.60713 16.4851 4.49168C16.4851 5.37623 16.1337 6.22455 15.5082 6.85002L7.84158 14.5083C7.52885 14.8211 7.10469 14.9968 6.66242 14.9968C6.22014 14.9968 5.79598 14.8211 5.48325 14.5083C5.17051 14.1956 4.99482 13.7715 4.99482 13.3292C4.99482 12.8869 5.17051 12.4627 5.48325 12.15L12.5582 5.08335\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-2 sub-title text-capitalize\">{{filepath()}}</span></button></span>\r\n </div>\r\n <div class=\"text-danger\" *ngIf=\"errorMessage\">{{ errorMessage }}</div>\r\n <div class=\"d-flex my-5\" role=\"group\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"activeModal.close()\" >Cancel</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" [disabled]=\"!raiseTicket.valid\" id=\"alert-toast\" (click)=\"submitTicket();activeModal.close()\"\r\n >Submit</button>\r\n </div>\r\n </form>\r\n \r\n </div>\r\n</div>\r\n\r\n<ng-template #createTicket let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/Images/Successtoast.png\">\r\n </div> \r\n <div class=\"mt-5 ticketData\">\r\n <span class=\"camera fw-bold\">Ticket Created Successfully</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">your ticket for {{dateFormat()}} have been created successful !</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-primary w-100 me-2\" (click)=\"redirectToTickets();modal.dismiss()\">Okay</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n", styles: [".camera{color:var(--Gray-900, #101828)!important;font-size:18px!important;line-height:28px!important}.sub-header{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px}.sub-title1{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:700;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
203
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: RaiseTicketComponent, selector: "lib-raise-ticket", inputs: { data: "data" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "createTicket", first: true, predicate: ["createTicket"], descendants: true }], ngImport: i0, template: "<div class=\"card py-0 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"row w-100 my-5\">\r\n <div class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Raise Ticket</a>\r\n <div class=\"my-2\"><span class=\"sub-title\">For Store {{data?.storeName}} on</span> <span class=\"sub-title1 ms-2\">{{dateFormat(this.data?.date)}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"raiseTicket\" class=\"row my-3\">\r\n <div class=\"col-md-6 my-3\">\r\n <label class=\"form-label\">Actual Billing Count</label>\r\n <input type=\"text\" formControlName=\"actualBilling\" (keypress)=\"omit_special_char($event)\" class=\"form-control\">\r\n </div>\r\n <div class=\"col-md-6 my-3\">\r\n <label class=\"form-label\">Your Expected Footfall</label>\r\n <input type=\"text\" formControlName=\"expectedFootfall\" (keypress)=\"omit_special_char($event)\" class=\"form-control\">\r\n </div>\r\n <div class=\"col-md-12 my-3\">\r\n <textarea class=\"type\" formControlName=\"description\" row=\"3\" class=\"form-control\" placeholder=\"Enter a description...\"></textarea>\r\n </div>\r\n <div class=\"col-md-12 my-3\">\r\n <span > <input type=\"file\" formControlName=\"filePath\" #fileInput style=\"display: none;\" accept=\"image/*\" (change)=\"onFileSelected($event)\">\r\n <button (click)=\"openFileInput()\" class=\"cursor-pointer btn btn-default p-0\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.8666 9.20835L10.2082 16.8667C9.27005 17.8049 7.99757 18.332 6.67075 18.332C5.34393 18.332 4.07145 17.8049 3.13325 16.8667C2.19505 15.9285 1.66797 14.656 1.66797 13.3292C1.66797 12.0024 2.19505 10.7299 3.13325 9.79168L10.7916 2.13335C11.4171 1.50788 12.2654 1.15649 13.1499 1.15649C14.0345 1.15649 14.8828 1.50788 15.5082 2.13335C16.1337 2.75882 16.4851 3.60713 16.4851 4.49168C16.4851 5.37623 16.1337 6.22455 15.5082 6.85002L7.84158 14.5083C7.52885 14.8211 7.10469 14.9968 6.66242 14.9968C6.22014 14.9968 5.79598 14.8211 5.48325 14.5083C5.17051 14.1956 4.99482 13.7715 4.99482 13.3292C4.99482 12.8869 5.17051 12.4627 5.48325 12.15L12.5582 5.08335\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-2 sub-title text-capitalize\">{{fileName ? fileName : 'Attachments'}}</span></button></span>\r\n </div>\r\n <div class=\"text-danger\" *ngIf=\"errorMessage\">{{ errorMessage }}</div>\r\n <div class=\"d-flex my-5\" role=\"group\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"activeModal.close()\" >Cancel</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" [disabled]=\"!raiseTicket.valid\" id=\"alert-toast\" (click)=\"submitTicket();activeModal.close(true)\"\r\n >Submit</button>\r\n </div>\r\n </form>\r\n \r\n </div>\r\n</div>\r\n\r\n<ng-template #createTicket let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/Images/Successtoast.png\">\r\n </div> \r\n <div class=\"mt-5 ticketData\">\r\n <span class=\"camera fw-bold\">Ticket Created Successfully</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">your ticket for {{dateFormat(this.data?.date)}} have been created successful !</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-primary w-100 me-2\" (click)=\"redirectToTickets();modal.dismiss()\">Okay</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n", styles: [".camera{color:var(--Gray-900, #101828)!important;font-size:18px!important;line-height:28px!important}.sub-header{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px}.sub-title1{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:700;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
210
204
  }
211
205
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: RaiseTicketComponent, decorators: [{
212
206
  type: Component,
213
- args: [{ selector: 'lib-raise-ticket', template: "<div class=\"card py-0 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"row w-100 my-5\">\r\n <div class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Raise Ticket</a>\r\n <div class=\"my-2\"><span class=\"sub-title\">For Store {{data?.storeName}} on</span> <span class=\"sub-title1 ms-2\">{{data?.date}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"raiseTicket\" class=\"row my-3\">\r\n <div class=\"col-md-6 my-3\">\r\n <label class=\"form-label\">Actual Billing Count</label>\r\n <input type=\"text\" formControlName=\"actualBilling\" (keypress)=\"omit_special_char($event)\" class=\"form-control\">\r\n </div>\r\n <div class=\"col-md-6 my-3\">\r\n <label class=\"form-label\">Your Expected Footfall</label>\r\n <input type=\"text\" formControlName=\"expectedFootfall\" (keypress)=\"omit_special_char($event)\" class=\"form-control\">\r\n </div>\r\n <div class=\"col-md-12 my-3\">\r\n <textarea class=\"type\" formControlName=\"description\" row=\"3\" class=\"form-control\" placeholder=\"Enter a description...\"></textarea>\r\n </div>\r\n <div class=\"col-md-12 my-3\">\r\n <span > <input type=\"file\" formControlName=\"filePath\" #fileInput style=\"display: none;\" accept=\"image/*\" (change)=\"onFileSelected($event)\">\r\n <button (click)=\"openFileInput()\" class=\"cursor-pointer btn btn-default p-0\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.8666 9.20835L10.2082 16.8667C9.27005 17.8049 7.99757 18.332 6.67075 18.332C5.34393 18.332 4.07145 17.8049 3.13325 16.8667C2.19505 15.9285 1.66797 14.656 1.66797 13.3292C1.66797 12.0024 2.19505 10.7299 3.13325 9.79168L10.7916 2.13335C11.4171 1.50788 12.2654 1.15649 13.1499 1.15649C14.0345 1.15649 14.8828 1.50788 15.5082 2.13335C16.1337 2.75882 16.4851 3.60713 16.4851 4.49168C16.4851 5.37623 16.1337 6.22455 15.5082 6.85002L7.84158 14.5083C7.52885 14.8211 7.10469 14.9968 6.66242 14.9968C6.22014 14.9968 5.79598 14.8211 5.48325 14.5083C5.17051 14.1956 4.99482 13.7715 4.99482 13.3292C4.99482 12.8869 5.17051 12.4627 5.48325 12.15L12.5582 5.08335\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-2 sub-title text-capitalize\">{{filepath()}}</span></button></span>\r\n </div>\r\n <div class=\"text-danger\" *ngIf=\"errorMessage\">{{ errorMessage }}</div>\r\n <div class=\"d-flex my-5\" role=\"group\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"activeModal.close()\" >Cancel</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" [disabled]=\"!raiseTicket.valid\" id=\"alert-toast\" (click)=\"submitTicket();activeModal.close()\"\r\n >Submit</button>\r\n </div>\r\n </form>\r\n \r\n </div>\r\n</div>\r\n\r\n<ng-template #createTicket let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/Images/Successtoast.png\">\r\n </div> \r\n <div class=\"mt-5 ticketData\">\r\n <span class=\"camera fw-bold\">Ticket Created Successfully</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">your ticket for {{dateFormat()}} have been created successful !</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-primary w-100 me-2\" (click)=\"redirectToTickets();modal.dismiss()\">Okay</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n", styles: [".camera{color:var(--Gray-900, #101828)!important;font-size:18px!important;line-height:28px!important}.sub-header{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px}.sub-title1{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:700;line-height:20px}\n"] }]
207
+ args: [{ selector: 'lib-raise-ticket', template: "<div class=\"card py-0 scroll\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"row w-100 my-5\">\r\n <div class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Raise Ticket</a>\r\n <div class=\"my-2\"><span class=\"sub-title\">For Store {{data?.storeName}} on</span> <span class=\"sub-title1 ms-2\">{{dateFormat(this.data?.date)}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"raiseTicket\" class=\"row my-3\">\r\n <div class=\"col-md-6 my-3\">\r\n <label class=\"form-label\">Actual Billing Count</label>\r\n <input type=\"text\" formControlName=\"actualBilling\" (keypress)=\"omit_special_char($event)\" class=\"form-control\">\r\n </div>\r\n <div class=\"col-md-6 my-3\">\r\n <label class=\"form-label\">Your Expected Footfall</label>\r\n <input type=\"text\" formControlName=\"expectedFootfall\" (keypress)=\"omit_special_char($event)\" class=\"form-control\">\r\n </div>\r\n <div class=\"col-md-12 my-3\">\r\n <textarea class=\"type\" formControlName=\"description\" row=\"3\" class=\"form-control\" placeholder=\"Enter a description...\"></textarea>\r\n </div>\r\n <div class=\"col-md-12 my-3\">\r\n <span > <input type=\"file\" formControlName=\"filePath\" #fileInput style=\"display: none;\" accept=\"image/*\" (change)=\"onFileSelected($event)\">\r\n <button (click)=\"openFileInput()\" class=\"cursor-pointer btn btn-default p-0\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.8666 9.20835L10.2082 16.8667C9.27005 17.8049 7.99757 18.332 6.67075 18.332C5.34393 18.332 4.07145 17.8049 3.13325 16.8667C2.19505 15.9285 1.66797 14.656 1.66797 13.3292C1.66797 12.0024 2.19505 10.7299 3.13325 9.79168L10.7916 2.13335C11.4171 1.50788 12.2654 1.15649 13.1499 1.15649C14.0345 1.15649 14.8828 1.50788 15.5082 2.13335C16.1337 2.75882 16.4851 3.60713 16.4851 4.49168C16.4851 5.37623 16.1337 6.22455 15.5082 6.85002L7.84158 14.5083C7.52885 14.8211 7.10469 14.9968 6.66242 14.9968C6.22014 14.9968 5.79598 14.8211 5.48325 14.5083C5.17051 14.1956 4.99482 13.7715 4.99482 13.3292C4.99482 12.8869 5.17051 12.4627 5.48325 12.15L12.5582 5.08335\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-2 sub-title text-capitalize\">{{fileName ? fileName : 'Attachments'}}</span></button></span>\r\n </div>\r\n <div class=\"text-danger\" *ngIf=\"errorMessage\">{{ errorMessage }}</div>\r\n <div class=\"d-flex my-5\" role=\"group\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"activeModal.close()\" >Cancel</button>\r\n <button class=\"btn btn-primary w-100 ms-3\" [disabled]=\"!raiseTicket.valid\" id=\"alert-toast\" (click)=\"submitTicket();activeModal.close(true)\"\r\n >Submit</button>\r\n </div>\r\n </form>\r\n \r\n </div>\r\n</div>\r\n\r\n<ng-template #createTicket let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/Images/Successtoast.png\">\r\n </div> \r\n <div class=\"mt-5 ticketData\">\r\n <span class=\"camera fw-bold\">Ticket Created Successfully</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">your ticket for {{dateFormat(this.data?.date)}} have been created successful !</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-primary w-100 me-2\" (click)=\"redirectToTickets();modal.dismiss()\">Okay</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n", styles: [".camera{color:var(--Gray-900, #101828)!important;font-size:18px!important;line-height:28px!important}.sub-header{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px}.sub-title1{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:700;line-height:20px}\n"] }]
214
208
  }], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i1$1.NgbActiveModal }, { type: i2$2.FormBuilder }, { type: TicketsService }, { type: i3.ToastService }, { type: i2.Router }], propDecorators: { fileInput: [{
215
209
  type: ViewChild,
216
210
  args: ['fileInput']
@@ -242,6 +236,8 @@ class AnalyzeReportComponent {
242
236
  activeStream;
243
237
  successRate;
244
238
  angleImage = '';
239
+ dayjs = dayjs;
240
+ selectedValue;
245
241
  constructor(modalService, activeModal, service, cd) {
246
242
  this.modalService = modalService;
247
243
  this.activeModal = activeModal;
@@ -253,9 +249,10 @@ class AnalyzeReportComponent {
253
249
  this.activeDate = this.selectedDate[this.currentIdx].date;
254
250
  this.getIssues();
255
251
  }
256
- handleClick(event) {
257
- event.preventDefault();
258
- event.stopImmediatePropagation();
252
+ handleClick(i) {
253
+ this.currentIdx = i;
254
+ this.activeDate = this.selectedDate[this.currentIdx]?.date;
255
+ this.getIssues();
259
256
  }
260
257
  getIssues() {
261
258
  let data = {
@@ -293,7 +290,7 @@ class AnalyzeReportComponent {
293
290
  "StreamName": this.activeStream?.streamName,
294
291
  "storeId": this.analyzereport?.filteredStoreId
295
292
  };
296
- this.service.cameraAngleChange(data).pipe(takeUntil(this.destroy$)).subscribe({
293
+ this.service.getStreamAngleChange(data).pipe(takeUntil(this.destroy$)).subscribe({
297
294
  next: (res) => {
298
295
  if (res && res.code == 200) {
299
296
  this.angleChange = res.data;
@@ -313,7 +310,7 @@ class AnalyzeReportComponent {
313
310
  this.getCameraAngle();
314
311
  }
315
312
  raiseTicket() {
316
- this.activeModal.close();
313
+ // this.activeModal.close();
317
314
  const modalRef = this.modalService.open(RaiseTicketComponent, {
318
315
  centered: true,
319
316
  size: "md",
@@ -329,10 +326,19 @@ class AnalyzeReportComponent {
329
326
  };
330
327
  modalRef.componentInstance.data = data;
331
328
  modalRef.result.then((result) => {
329
+ if (result === true) {
330
+ this.selectedDate[this.currentIdx].isSelected = true;
331
+ if (this.currentIdx < this.selectedDate?.length - 1 && this.currentIdx >= 0) {
332
+ this.currentIdx = this.currentIdx + 1;
333
+ this.activeDate = this.selectedDate[this.currentIdx].date;
334
+ }
335
+ this.getIssues();
336
+ }
332
337
  });
333
338
  }
334
339
  closeTicket() {
335
340
  this.getIssues();
341
+ this.selectedDate[this.currentIdx].isSelected = true;
336
342
  if (this.currentIdx < this.selectedDate?.length - 1 && this.currentIdx >= 0) {
337
343
  this.currentIdx = this.currentIdx + 1;
338
344
  this.activeDate = this.selectedDate[this.currentIdx].date;
@@ -355,12 +361,15 @@ class AnalyzeReportComponent {
355
361
  handleImageError(event) {
356
362
  this.angleImage = event?.type;
357
363
  }
364
+ getDateFormat(date) {
365
+ return this.dayjs(date).format('DD-MM-YYYY');
366
+ }
358
367
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AnalyzeReportComponent, deps: [{ token: i1$1.NgbModal }, { token: i1$1.NgbActiveModal }, { token: TicketsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
359
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: AnalyzeReportComponent, selector: "lib-analyze-report", inputs: { analyzereport: "analyzereport" }, viewQueries: [{ propertyName: "confirmationModal", first: true, predicate: ["confirmationModal"], descendants: true }, { propertyName: "ReconfirmationModal", first: true, predicate: ["ReconfirmationModal"], descendants: true }], ngImport: i0, template: "<div class=\"card py-0 scroll-y\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Images/edgeapp icon.svg\">\r\n </div>\r\n </div>\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Analyze Report</a>\r\n <div class=\"sub-title q-query-text\">Your Queries reported below stores are got {{analyzereport?.countType}} {{analyzereport?.filteredFeature}} on {{selectedDate[0]?.date}} to\r\n {{selectedDate[selectedDate.length - 1]?.date}}</div>\r\n </div>\r\n </div>\r\n <ul class=\"nav my-3 w-100 mt-5\">\r\n <li *ngFor=\"let date of selectedDate;let i=index\" class=\"nav-item pe-none\" (click)=\"handleClick($event)\" ><a data-bs-toggle=\"tab\" [ngClass]=\"activeDate === date.date ? 'active':''\"\r\n class=\"nav-link btn btn-sm btn-color-muted btn-active fw-bolder px-10 me-1 show\">\r\n {{date.date}} <span *ngIf=\"activeDate === date.date && date?.showIcon\" class=\"mx-2\"><svg width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g style=\"mix-blend-mode:multiply\">\r\n <rect x=\"0.25\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#EAF8FF\" />\r\n <g clip-path=\"url(#clip0_8713_10379)\">\r\n <path\r\n d=\"M10.25 8V10M10.25 12H10.255M15.25 10C15.25 12.7614 13.0114 15 10.25 15C7.48858 15 5.25 12.7614 5.25 10C5.25 7.23858 7.48858 5 10.25 5C13.0114 5 15.25 7.23858 15.25 10Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_8713_10379\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(4.25 4)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span *ngIf=\"activeDate !== date.date && date?.showIcon\" class=\"mx-2\">\r\n <svg width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g style=\"mix-blend-mode:multiply\">\r\n <rect x=\"0.25\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#F2F4F7\" />\r\n <g clip-path=\"url(#clip0_8713_10379)\">\r\n <path\r\n d=\"M10.25 8V10M10.25 12H10.255M15.25 10C15.25 12.7614 13.0114 15 10.25 15C7.48858 15 5.25 12.7614 5.25 10C5.25 7.23858 7.48858 5 10.25 5C13.0114 5 15.25 7.23858 15.25 10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_8713_10379\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(4.25 4)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a></li>\r\n </ul>\r\n <div *ngIf=\"activeArray?.primaryIssue\" class=\"my-3 mt-5\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div *ngIf=\"!activeArray?.primaryIssue\" class=\"my-3 mt-5\">\r\n <img style=\"width:50px; height:50px\" src=\"./assets/tango/Images/Successtoast.png\">\r\n </div>\r\n <div *ngIf=\"activeArray && activeArray.length > 0\" class=\"ul-list\">\r\n <ul>\r\n <li *ngIf=\"activeArray?.primaryIssue\" class=\"list-size my-3\">The primary issue was <span class=\"fw-bold-700\">{{activeArray?.primaryIssue}}</span> where\r\n the <span *ngFor=\"let data of activeArray?.secondaryReason let last = last\" class=\"fw-bold-700\">data <span *ngIf=\"!last\">,</span></span> was the secondary concern. </li>\r\n <li *ngIf=\"activeArray?.downTime > 0\" class=\"list-size my-3\">Store Experienced a downtime of <span class=\"fw-bold-700\">{{activeArray?.downTime}} mins</span>\r\n dated <span class=\"fw-bold-700\">{{activeArray?.issueDate}}</span> where \"N Files Lost\" and was unable to send to our\r\n cloud due to speed being <span class=\"fw-bold-700\">{{activeArray?.speedTest}} Mbps.</span> </li>\r\n <!-- <li class=\"list-size my-3\">We were able to capture only <span class=\"fw-bold-700\">100 Footfalls</span>\r\n despite the <span class=\"fw-bold-700\">Internet slow</span> issue </li> -->\r\n\r\n </ul>\r\n </div> \r\n </div>\r\n <div class=\"card-header border-0 d-flex justify-content-between\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"c-label fw-bolder fs-3 mb-1\">Tango Pre-Requisite <span class=\"badge badge-light-warning ms-2\">Warning</span></span>\r\n </h3>\r\n <div class=\"card-toolbar text-end\">\r\n <span class=\"list-size\">{{activeStream?.cameraNumber}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mx-5 px-2\"> \r\n <div class=\"rounded-2 overflow-hidden\">\r\n <span class=\"list-size \"> Camera Angle</span>\r\n <div *ngIf=\"angleImage !=='error'\" class=\"mt-3\">\r\n <img class=\"w-100 mh-150px\" [src]=\"angleChange?.angleChangeImage ? angleChange?.angleChangeImage :activeStream?.thumbnailImage\" (error)=\"handleImageError($event)\">\r\n </div>\r\n <div *ngIf=\"angleImage ==='error'\" class=\"w-100 h-250px rounded-3 overflow-hidden Nopreview align-content-center mt-3\">\r\n <div class=\"previewTitle text-center mb-5\">\r\n Preview not available\r\n </div>\r\n <div class=\"previewsubTitle fw-semibold\">\r\n The selected camera is not available at the moment.\r\n </div>\r\n </div>\r\n <div class=\"row p-0\" *ngIf=\"(angleChange?.angleChangeImage || activeStream?.thumbnailImage) && angleImage !=='error'\">\r\n <div class=\"col-md-6 m-0 pe-0\">\r\n <div class=\"d-flex justify-content-center align-items-center bg-light-primary py-3\">\r\n <span class=\"actualspan\">Expected</span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6 m-0 ps-0\">\r\n <div class=\"d-flex justify-content-center align-items-center bg-light-primary py-3\">\r\n <span class=\"actualspan\">Actual</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"table-reponsive mt-5\">\r\n <table class=\"bottom-border w-100\">\r\n <thead>\r\n <tr>\r\n <th>Instances</th>\r\n <th>Excepted</th>\r\n <th>Actual</th>\r\n <th>Result</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <!-- <tr>\r\n <td>Camera Angle</td>\r\n <td></td>\r\n <td><img [src]=\"angleChange?.angleChangeImage ? angleChange?.angleChangeImage :activeStream?.thumbnailImage\"></td>\r\n <td *ngIf=\"!angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationsuccess.svg\"></td>\r\n <td *ngIf=\"angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationfailed.svg\"></td>\r\n </tr> -->\r\n <tr>\r\n <td>Resolution</td>\r\n <td>1080 x 908</td>\r\n <td>{{angleChange?.resolution ? angleChange?.resolution : '--'}}</td>\r\n <!-- <td *ngIf=\"angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationfailed.svg\"></td> -->\r\n <td><img src=\"./assets/tango/Image/verificationsuccess.svg\"></td>\r\n </tr>\r\n <!-- <tr>\r\n <td>Downtime</td>\r\n <td>4.00 AM</td>\r\n <td>9.00 AM</td>\r\n <td><img src=\"./assets/tango/Image/verificationdanger.svg\"></td>\r\n </tr> -->\r\n </tbody>\r\n </table>\r\n <div *ngIf=\"streamDetails?.length\" class=\"d-flex justify-content-center align-items-center mt-10\">\r\n <div *ngFor=\"let stream of streamDetails\" [ngClass]=\"stream?.streamName === activeStream?.streamName? 'bg-dark' : 'bg-opacity-25'\" class=\"w-10px h-10px rounded-5 bg-dark cursor-pointer mx-3\" (click)=\"getstreambasedAngle(stream)\"></div>\r\n </div>\r\n <div class=\"card-header p-0 border-0 pt-5 d-flex justify-content-between\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"c-label-title mb-1\">Queries History</span>\r\n </h3>\r\n <div (click)=\"viewMore()\" class=\"card-toolbar text-end\">\r\n <span class=\"primary-list cursor-pointer\">View more Details</span>\r\n </div>\r\n </div>\r\n <div class=\" q-query-text\">From the date of installation till today the below queries success rate has been maintained</div>\r\n <div class=\"d-flex flex-wrap py-3\">\r\n <div class=\" min-w-125px py-3 me-6 mb-3\">\r\n <div class=\"h-history-count\">Total : <span class=\"h-history-title\">{{successRate?.total}} {{successRate?.total > 1 ? 'Tickets' : 'Ticket'}}</span></div>\r\n </div>\r\n <div *ngIf=\"successRate?.successRate !== 'null' && successRate?.successRate > 0 && successRate?.successRate !== ''\" class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"h-history-count\">Success Rate : <span class=\"h-history-title\">{{successRate?.successRate}}%</span></div>\r\n </div>\r\n <!-- <div class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"fw-bold fs-6 text-gray-500\">Earnings</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"fs-2 fw-bolder\">4500$</div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 text-end\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3 cursor-pointer \"\r\n (click)=\"raiseTicket()\">Raise a Ticket</button>\r\n <button *ngIf=\"(currentIdx + 1) !== selectedDate.length\" type=\"button\" class=\"btn btn-primary rounded-3\" (click)=\"closeTicket()\">Accept & Close</button>\r\n <button *ngIf=\"(currentIdx + 1) === selectedDate.length\" type=\"button\" class=\"btn btn-primary rounded-3\" (click)=\"openPopup()\">Close</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #confirmationModal let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div class=\" mt-5\">\r\n <span class=\"cameraDetail fw-bold\">Unsaved Changes</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">Do you want to close the tickets?</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.dismiss()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-2\" (click)=\"confirmSave();modal.close()\">Confirm</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #ReconfirmationModal let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div class=\" mt-5\">\r\n <span class=\"cameraDetail fw-bold\">Are you sure, want to view more details?</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">If so you will redirect to Queries summary & can\u2019t able to come back to the screen.</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.dismiss()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-2\" (click)=\"confirmMore();modal.dismiss()\">Confirm</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n ", styles: [".nav-line-tabs1.nav-line-tabs-2x .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;color:var(--Primary-700, #009BF3)!important}.nav-line-tabs1 .nav-link{color:var(--Gray-500, #667085)!important;font-size:16px;font-weight:500!important;line-height:24px}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.drops-down-down.ltr.double.show-ranges.shown{left:0!important;height:350px}:host::ng-deep .md-drppicker td{border-radius:44px}:host::ng-deep .md-drppicker .btn{border-radius:7px!important;background-color:#019df5!important}:host::ng-deep .md-drppicker .btn{right:99px;top:300px}:host::ng-deep .md-drppicker .ranges ul li button.active{background-color:#029cf3!important}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important}.title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.active{border-radius:6px!important;padding:8px 25px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.list-size{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.fw-bold-700{font-weight:700!important}.c-label{color:var(--Gray-800, #1D2939)!important;font-size:16px!important;font-weight:500!important;line-height:24px}.c-label-title{color:#000!important;font-size:16px!important;font-weight:500;line-height:24px!important}.primary-list{color:var(--Primary-700, #009BF3)!important;font-size:12px!important;font-weight:600;line-height:18px;text-transform:capitalize}.h-history-title{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.h-history-count{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.q-query-text{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.cameraDetail{color:var(--Gray-900, #101828)!important;font-size:18px!important;line-height:28px!important}.sub-header{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.actualspan{color:var(--Black, #101828);font-size:12px;font-weight:400;line-height:18px}.Nopreview{border:1px solid var(--Gray-500, #667085);background:var(--Gray-100, #F2F4F7);color:var(--Gray-500, #667085)}.Nopreview .previewTitle{font-size:20px;font-weight:700;line-height:20px}.Nopreview .previewsubTitle{text-align:center;font-size:12px;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
368
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: AnalyzeReportComponent, selector: "lib-analyze-report", inputs: { analyzereport: "analyzereport" }, viewQueries: [{ propertyName: "confirmationModal", first: true, predicate: ["confirmationModal"], descendants: true }, { propertyName: "ReconfirmationModal", first: true, predicate: ["ReconfirmationModal"], descendants: true }], ngImport: i0, template: "<div class=\"card py-0 scroll-y\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Images/edgeapp icon.svg\">\r\n </div>\r\n </div>\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Analyze Report</a>\r\n <div class=\"sub-title q-query-text\">Your Queries reported below stores are got {{analyzereport?.countType}} {{analyzereport?.filteredFeature}} on {{getDateFormat(selectedDate[0]?.date)}} to\r\n {{getDateFormat(selectedDate[selectedDate.length - 1]?.date)}}</div>\r\n </div>\r\n </div>\r\n <ul class=\"nav my-3 w-100 mt-5\">\r\n <li *ngFor=\"let date of selectedDate;let i=index\" class=\"nav-item\"><a data-bs-toggle=\"tab\" [ngClass]=\"activeDate === date?.date ? 'active':''\" (click)=\"handleClick(i)\" \r\n class=\"nav-link btn btn-sm btn-color-muted btn-active fw-bolder px-5 me-1 show\">\r\n {{getDateFormat(date?.date)}} <span *ngIf=\"activeDate === date?.date && !date?.isSelected\" class=\"mx-2\"><svg width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g style=\"mix-blend-mode:multiply\">\r\n <rect x=\"0.25\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#EAF8FF\" />\r\n <g clip-path=\"url(#clip0_8713_10379)\">\r\n <path\r\n d=\"M10.25 8V10M10.25 12H10.255M15.25 10C15.25 12.7614 13.0114 15 10.25 15C7.48858 15 5.25 12.7614 5.25 10C5.25 7.23858 7.48858 5 10.25 5C13.0114 5 15.25 7.23858 15.25 10Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_8713_10379\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(4.25 4)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span *ngIf=\"activeDate !== date?.date && !date?.isSelected\" class=\"mx-2\">\r\n <svg width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g style=\"mix-blend-mode:multiply\">\r\n <rect x=\"0.25\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#F2F4F7\" />\r\n <g clip-path=\"url(#clip0_8713_10379)\">\r\n <path\r\n d=\"M10.25 8V10M10.25 12H10.255M15.25 10C15.25 12.7614 13.0114 15 10.25 15C7.48858 15 5.25 12.7614 5.25 10C5.25 7.23858 7.48858 5 10.25 5C13.0114 5 15.25 7.23858 15.25 10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_8713_10379\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(4.25 4)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a></li>\r\n </ul>\r\n <div *ngIf=\"!selectedDate[currentIdx].isSelected\" class=\"my-3 mt-5\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div *ngIf=\"selectedDate[currentIdx].isSelected\" class=\"my-3 mt-5\">\r\n <img style=\"width:50px; height:50px\" src=\"./assets/tango/Images/Successtoast.png\">\r\n </div>\r\n <div *ngIf=\"activeArray && activeArray.length > 0\" class=\"ul-list\">\r\n <ul>\r\n <li *ngIf=\"activeArray?.primaryIssue\" class=\"list-size my-3\">The primary issue was <span class=\"fw-bold-700\">{{activeArray?.primaryIssue}}</span> where\r\n the <span *ngFor=\"let data of activeArray?.secondaryReason let last = last\" class=\"fw-bold-700\">data <span *ngIf=\"!last\">,</span></span> was the secondary concern. </li>\r\n <li *ngIf=\"activeArray?.downTime > 0\" class=\"list-size my-3\">Store Experienced a downtime of <span class=\"fw-bold-700\">{{activeArray?.downTime}} mins</span>\r\n dated <span class=\"fw-bold-700\">{{activeArray?.issueDate}}</span> where \"N Files Lost\" and was unable to send to our\r\n cloud due to speed being <span class=\"fw-bold-700\">{{activeArray?.speedTest}} Mbps.</span> </li>\r\n <!-- <li class=\"list-size my-3\">We were able to capture only <span class=\"fw-bold-700\">100 Footfalls</span>\r\n despite the <span class=\"fw-bold-700\">Internet slow</span> issue </li> -->\r\n\r\n </ul>\r\n </div> \r\n </div>\r\n <div class=\"card-header border-0 d-flex justify-content-between\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"c-label fw-bolder fs-3 mb-1\">Tango Pre-Requisite <span *ngIf=\"activeArray?.primaryIssue\" class=\"badge badge-light-warning ms-2\">Warning</span></span>\r\n </h3>\r\n <div class=\"card-toolbar text-end\">\r\n <span class=\"list-size\">{{activeStream?.cameraNumber}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mx-5 px-2\"> \r\n <!-- <div class=\"rounded-2 overflow-hidden\">\r\n \r\n <span class=\"list-size\"> Camera Angle</span>\r\n <div class=\"mt-3\">\r\n <img *ngIf=\"angleChange && angleChange?.angleChangeImage\" class=\"w-100 mh-150px\" [src]=\"angleChange?.angleChangeImage ? angleChange?.angleChangeImage :activeStream?.thumbnailImage\" (error)=\"angleChange.angleChangeImage = null\">\r\n <img *ngIf=\"!angleChange?.angleChangeImage && activeStream?.thumbnailImage\" class=\"w-100 mh-150px\" [src]=\"angleChange?.angleChangeImage ? angleChange?.angleChangeImage :activeStream?.thumbnailImage\" (error)=\"activeStream.thumbnailImage = null\">\r\n </div>\r\n <div *ngIf=\"!activeStream?.thumbnailImage && !angleChange?.angleChangeImage\" class=\"w-100 h-200px rounded-3 overflow-hidden Nopreview align-content-center mt-3\">\r\n <div class=\"previewTitle text-center mb-5\">\r\n Preview not available\r\n </div>\r\n <div class=\"previewsubTitle fw-semibold\">\r\n The selected camera is not available at the moment.\r\n </div>\r\n </div>\r\n <div class=\"row p-0\" *ngIf=\"angleChange?.angleChangeImage\">\r\n <div class=\"col-md-6 m-0 pe-0\">\r\n <div class=\"d-flex justify-content-center align-items-center bg-light-primary py-3\">\r\n <span class=\"actualspan\">Expected</span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6 m-0 ps-0\">\r\n <div class=\"d-flex justify-content-center align-items-center bg-light-primary py-3\">\r\n <span class=\"actualspan\">Actual</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div class=\"table-reponsive mt-5\">\r\n <table class=\"bottom-border w-100\">\r\n <thead>\r\n <tr>\r\n <th>Instances</th>\r\n <th class=\"text-center\">Excepted</th>\r\n <th class=\"text-center\">Actual</th>\r\n <th class=\"text-center\">Result</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>Camera Angle</td>\r\n <td *ngIf=\"angleChange\"><div class=\"align-content-center text-center align-items-center\">\r\n <img class=\"h-70px w-75 rounded-3\" [src]=\"angleChange?.expected\">\r\n </div></td>\r\n <td *ngIf=\"angleChange\"><div class=\"align-content-center text-center align-items-center\">\r\n <img class=\"h-70px w-75 rounded-3\" [src]=\"angleChange?.actual\">\r\n </div></td>\r\n <td *ngIf=\"!angleChange || !angleChange?.expected\">\r\n <div class=\"d-flex align-items-center text-align-center justify-content-center\">\r\n <div class=\"w-75 h-70px rounded-3 align-content-center Nopreview mt-3\">\r\n <div class=\"previewTitle text-center\">\r\n Preview not available\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td *ngIf=\"!angleChange || !angleChange?.actual\">\r\n <div class=\"d-flex align-items-center text-align-center justify-content-center\">\r\n <div class=\"w-75 h-70px rounded-3 align-content-center Nopreview mt-3\">\r\n <div class=\"previewTitle text-center\">\r\n Preview not available\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td *ngIf=\"!angleChange\" class=\"text-center\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\">\r\n <path d=\"M22.25 11.0799V11.9999C22.2488 14.1563 21.5505 16.2545 20.2593 17.9817C18.9682 19.7088 17.1533 20.9723 15.0854 21.5838C13.0174 22.1952 10.8073 22.1218 8.78447 21.3744C6.76168 20.6271 5.03465 19.246 3.86096 17.4369C2.68727 15.6279 2.12979 13.4879 2.27168 11.3362C2.41356 9.18443 3.24721 7.13619 4.64828 5.49694C6.04935 3.85768 7.94279 2.71525 10.0462 2.24001C12.1496 1.76477 14.3503 1.9822 16.32 2.85986M22.25 3.99986L12.25 14.0099L9.25001 11.0099\" stroke=\"#039855\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></td>\r\n <td *ngIf=\"angleChange\" class=\"text-center\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"32\" viewBox=\"0 0 33 32\" fill=\"none\">\r\n <path d=\"M16.25 28.1905C22.9827 28.1905 28.4405 22.7327 28.4405 16C28.4405 9.26743 22.9827 3.80957 16.25 3.80957C9.51743 3.80957 4.05957 9.26743 4.05957 16C4.05957 22.7327 9.51743 28.1905 16.25 28.1905Z\" stroke=\"#D92D20\" stroke-width=\"1.52381\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M11.6787 11.4287L20.8216 20.5716M20.8216 11.4287L11.6787 20.5716\" stroke=\"#D92D20\" stroke-width=\"1.52381\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></td>\r\n </tr>\r\n <tr>\r\n <td>Resolution</td>\r\n <td class=\"text-center\">{{angleChange?.resolution ? angleChange?.resolution : '--'}}</td>\r\n <td class=\"text-center\">{{angleChange?.resolution ? angleChange?.resolution : '--'}}</td>\r\n <!-- <td *ngIf=\"angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationfailed.svg\"></td> -->\r\n <td class=\"text-center\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\">\r\n <path d=\"M22.25 11.0799V11.9999C22.2488 14.1563 21.5505 16.2545 20.2593 17.9817C18.9682 19.7088 17.1533 20.9723 15.0854 21.5838C13.0174 22.1952 10.8073 22.1218 8.78447 21.3744C6.76168 20.6271 5.03465 19.246 3.86096 17.4369C2.68727 15.6279 2.12979 13.4879 2.27168 11.3362C2.41356 9.18443 3.24721 7.13619 4.64828 5.49694C6.04935 3.85768 7.94279 2.71525 10.0462 2.24001C12.1496 1.76477 14.3503 1.9822 16.32 2.85986M22.25 3.99986L12.25 14.0099L9.25001 11.0099\" stroke=\"#039855\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></td>\r\n </tr>\r\n <!-- <tr>\r\n <td>Downtime</td>\r\n <td>4.00 AM</td>\r\n <td>9.00 AM</td>\r\n <td><img src=\"./assets/tango/Image/verificationdanger.svg\"></td>\r\n </tr> -->\r\n </tbody>\r\n </table>\r\n <div *ngIf=\"streamDetails?.length\" class=\"d-flex justify-content-center align-items-center mt-10\">\r\n <div *ngFor=\"let stream of streamDetails\" [ngClass]=\"stream?.streamName === activeStream?.streamName? 'bg-dark' : 'bg-opacity-25'\" class=\"w-10px h-10px rounded-5 bg-dark cursor-pointer mx-3\" (click)=\"getstreambasedAngle(stream)\"></div>\r\n </div>\r\n <div class=\"card-header p-0 border-0 pt-5 d-flex justify-content-between\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"c-label-title mb-1\">Queries History</span>\r\n </h3>\r\n <div (click)=\"viewMore()\" class=\"card-toolbar text-end\">\r\n <span class=\"primary-list cursor-pointer text-decoration-underline\">View more Details</span>\r\n </div>\r\n </div>\r\n <div class=\"q-query-text\">From the date of installation till today the below queries success rate has been maintained</div>\r\n <div class=\"d-flex flex-wrap py-3\">\r\n <div class=\" min-w-125px py-3 me-6 mb-3\">\r\n <div class=\"h-history-count\">Total : <span class=\"h-history-title\">{{successRate?.total}} {{successRate?.total > 1 ? 'Tickets' : 'Ticket'}}</span></div>\r\n </div>\r\n <div *ngIf=\"successRate?.successRate !== 'null' && successRate?.successRate > 0 && successRate?.successRate !== ''\" class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"h-history-count\">Success Rate : <span class=\"h-history-title\">{{successRate?.successRate}}%</span></div>\r\n </div>\r\n <!-- <div class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"fw-bold fs-6 text-gray-500\">Earnings</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"fs-2 fw-bolder\">4500$</div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 text-end\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3 cursor-pointer \"\r\n (click)=\"raiseTicket()\">Raise a Ticket</button>\r\n <button *ngIf=\"(currentIdx + 1) !== selectedDate.length\" type=\"button\" class=\"btn btn-primary rounded-3\" (click)=\"closeTicket()\">Accept & Close</button>\r\n <button *ngIf=\"(currentIdx + 1) === selectedDate.length\" type=\"button\" class=\"btn btn-primary rounded-3\" (click)=\"openPopup()\">Close</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #confirmationModal let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div class=\" mt-5\">\r\n <span class=\"cameraDetail fw-bold\">Unsaved Changes</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">Do you want to close the tickets?</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.dismiss()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-2\" (click)=\"confirmSave();modal.close()\">Confirm</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #ReconfirmationModal let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div class=\" mt-5\">\r\n <span class=\"cameraDetail fw-bold\">Are you sure, want to view more details?</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">If so you will redirect to Queries summary & can\u2019t able to come back to the screen.</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.dismiss()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-2\" (click)=\"confirmMore();modal.dismiss()\">Confirm</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n ", styles: [".nav-line-tabs1.nav-line-tabs-2x .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;color:var(--Primary-700, #009BF3)!important}.nav-line-tabs1 .nav-link{color:var(--Gray-500, #667085)!important;font-size:16px;font-weight:500!important;line-height:24px}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.drops-down-down.ltr.double.show-ranges.shown{left:0!important;height:350px}:host::ng-deep .md-drppicker td{border-radius:44px}:host::ng-deep .md-drppicker .btn{border-radius:7px!important;background-color:#019df5!important}:host::ng-deep .md-drppicker .btn{right:99px;top:300px}:host::ng-deep .md-drppicker .ranges ul li button.active{background-color:#029cf3!important}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important}.title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.active{border-radius:6px!important;padding:8px 25px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.list-size{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.fw-bold-700{font-weight:700!important}.c-label{color:var(--Gray-800, #1D2939)!important;font-size:16px!important;font-weight:500!important;line-height:24px}.c-label-title{color:#000!important;font-size:16px!important;font-weight:500;line-height:24px!important}.primary-list{color:var(--Primary-700, #009BF3)!important;font-size:12px!important;font-weight:600;line-height:18px;text-transform:capitalize}.h-history-title{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.h-history-count{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.q-query-text{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.cameraDetail{color:var(--Gray-900, #101828)!important;font-size:18px!important;line-height:28px!important}.sub-header{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.actualspan{color:var(--Black, #101828);font-size:12px;font-weight:400;line-height:18px}.Nopreview{border:1px solid var(--Gray-500, #667085);background:var(--Gray-100, #F2F4F7);color:var(--Gray-500, #667085)}.Nopreview .previewTitle{font-size:10px;font-weight:700;line-height:20px}.Nopreview .previewsubTitle{text-align:center;font-size:12px;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
360
369
  }
361
370
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AnalyzeReportComponent, decorators: [{
362
371
  type: Component,
363
- args: [{ selector: 'lib-analyze-report', template: "<div class=\"card py-0 scroll-y\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Images/edgeapp icon.svg\">\r\n </div>\r\n </div>\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Analyze Report</a>\r\n <div class=\"sub-title q-query-text\">Your Queries reported below stores are got {{analyzereport?.countType}} {{analyzereport?.filteredFeature}} on {{selectedDate[0]?.date}} to\r\n {{selectedDate[selectedDate.length - 1]?.date}}</div>\r\n </div>\r\n </div>\r\n <ul class=\"nav my-3 w-100 mt-5\">\r\n <li *ngFor=\"let date of selectedDate;let i=index\" class=\"nav-item pe-none\" (click)=\"handleClick($event)\" ><a data-bs-toggle=\"tab\" [ngClass]=\"activeDate === date.date ? 'active':''\"\r\n class=\"nav-link btn btn-sm btn-color-muted btn-active fw-bolder px-10 me-1 show\">\r\n {{date.date}} <span *ngIf=\"activeDate === date.date && date?.showIcon\" class=\"mx-2\"><svg width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g style=\"mix-blend-mode:multiply\">\r\n <rect x=\"0.25\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#EAF8FF\" />\r\n <g clip-path=\"url(#clip0_8713_10379)\">\r\n <path\r\n d=\"M10.25 8V10M10.25 12H10.255M15.25 10C15.25 12.7614 13.0114 15 10.25 15C7.48858 15 5.25 12.7614 5.25 10C5.25 7.23858 7.48858 5 10.25 5C13.0114 5 15.25 7.23858 15.25 10Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_8713_10379\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(4.25 4)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span *ngIf=\"activeDate !== date.date && date?.showIcon\" class=\"mx-2\">\r\n <svg width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g style=\"mix-blend-mode:multiply\">\r\n <rect x=\"0.25\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#F2F4F7\" />\r\n <g clip-path=\"url(#clip0_8713_10379)\">\r\n <path\r\n d=\"M10.25 8V10M10.25 12H10.255M15.25 10C15.25 12.7614 13.0114 15 10.25 15C7.48858 15 5.25 12.7614 5.25 10C5.25 7.23858 7.48858 5 10.25 5C13.0114 5 15.25 7.23858 15.25 10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_8713_10379\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(4.25 4)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a></li>\r\n </ul>\r\n <div *ngIf=\"activeArray?.primaryIssue\" class=\"my-3 mt-5\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div *ngIf=\"!activeArray?.primaryIssue\" class=\"my-3 mt-5\">\r\n <img style=\"width:50px; height:50px\" src=\"./assets/tango/Images/Successtoast.png\">\r\n </div>\r\n <div *ngIf=\"activeArray && activeArray.length > 0\" class=\"ul-list\">\r\n <ul>\r\n <li *ngIf=\"activeArray?.primaryIssue\" class=\"list-size my-3\">The primary issue was <span class=\"fw-bold-700\">{{activeArray?.primaryIssue}}</span> where\r\n the <span *ngFor=\"let data of activeArray?.secondaryReason let last = last\" class=\"fw-bold-700\">data <span *ngIf=\"!last\">,</span></span> was the secondary concern. </li>\r\n <li *ngIf=\"activeArray?.downTime > 0\" class=\"list-size my-3\">Store Experienced a downtime of <span class=\"fw-bold-700\">{{activeArray?.downTime}} mins</span>\r\n dated <span class=\"fw-bold-700\">{{activeArray?.issueDate}}</span> where \"N Files Lost\" and was unable to send to our\r\n cloud due to speed being <span class=\"fw-bold-700\">{{activeArray?.speedTest}} Mbps.</span> </li>\r\n <!-- <li class=\"list-size my-3\">We were able to capture only <span class=\"fw-bold-700\">100 Footfalls</span>\r\n despite the <span class=\"fw-bold-700\">Internet slow</span> issue </li> -->\r\n\r\n </ul>\r\n </div> \r\n </div>\r\n <div class=\"card-header border-0 d-flex justify-content-between\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"c-label fw-bolder fs-3 mb-1\">Tango Pre-Requisite <span class=\"badge badge-light-warning ms-2\">Warning</span></span>\r\n </h3>\r\n <div class=\"card-toolbar text-end\">\r\n <span class=\"list-size\">{{activeStream?.cameraNumber}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mx-5 px-2\"> \r\n <div class=\"rounded-2 overflow-hidden\">\r\n <span class=\"list-size \"> Camera Angle</span>\r\n <div *ngIf=\"angleImage !=='error'\" class=\"mt-3\">\r\n <img class=\"w-100 mh-150px\" [src]=\"angleChange?.angleChangeImage ? angleChange?.angleChangeImage :activeStream?.thumbnailImage\" (error)=\"handleImageError($event)\">\r\n </div>\r\n <div *ngIf=\"angleImage ==='error'\" class=\"w-100 h-250px rounded-3 overflow-hidden Nopreview align-content-center mt-3\">\r\n <div class=\"previewTitle text-center mb-5\">\r\n Preview not available\r\n </div>\r\n <div class=\"previewsubTitle fw-semibold\">\r\n The selected camera is not available at the moment.\r\n </div>\r\n </div>\r\n <div class=\"row p-0\" *ngIf=\"(angleChange?.angleChangeImage || activeStream?.thumbnailImage) && angleImage !=='error'\">\r\n <div class=\"col-md-6 m-0 pe-0\">\r\n <div class=\"d-flex justify-content-center align-items-center bg-light-primary py-3\">\r\n <span class=\"actualspan\">Expected</span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6 m-0 ps-0\">\r\n <div class=\"d-flex justify-content-center align-items-center bg-light-primary py-3\">\r\n <span class=\"actualspan\">Actual</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"table-reponsive mt-5\">\r\n <table class=\"bottom-border w-100\">\r\n <thead>\r\n <tr>\r\n <th>Instances</th>\r\n <th>Excepted</th>\r\n <th>Actual</th>\r\n <th>Result</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <!-- <tr>\r\n <td>Camera Angle</td>\r\n <td></td>\r\n <td><img [src]=\"angleChange?.angleChangeImage ? angleChange?.angleChangeImage :activeStream?.thumbnailImage\"></td>\r\n <td *ngIf=\"!angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationsuccess.svg\"></td>\r\n <td *ngIf=\"angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationfailed.svg\"></td>\r\n </tr> -->\r\n <tr>\r\n <td>Resolution</td>\r\n <td>1080 x 908</td>\r\n <td>{{angleChange?.resolution ? angleChange?.resolution : '--'}}</td>\r\n <!-- <td *ngIf=\"angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationfailed.svg\"></td> -->\r\n <td><img src=\"./assets/tango/Image/verificationsuccess.svg\"></td>\r\n </tr>\r\n <!-- <tr>\r\n <td>Downtime</td>\r\n <td>4.00 AM</td>\r\n <td>9.00 AM</td>\r\n <td><img src=\"./assets/tango/Image/verificationdanger.svg\"></td>\r\n </tr> -->\r\n </tbody>\r\n </table>\r\n <div *ngIf=\"streamDetails?.length\" class=\"d-flex justify-content-center align-items-center mt-10\">\r\n <div *ngFor=\"let stream of streamDetails\" [ngClass]=\"stream?.streamName === activeStream?.streamName? 'bg-dark' : 'bg-opacity-25'\" class=\"w-10px h-10px rounded-5 bg-dark cursor-pointer mx-3\" (click)=\"getstreambasedAngle(stream)\"></div>\r\n </div>\r\n <div class=\"card-header p-0 border-0 pt-5 d-flex justify-content-between\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"c-label-title mb-1\">Queries History</span>\r\n </h3>\r\n <div (click)=\"viewMore()\" class=\"card-toolbar text-end\">\r\n <span class=\"primary-list cursor-pointer\">View more Details</span>\r\n </div>\r\n </div>\r\n <div class=\" q-query-text\">From the date of installation till today the below queries success rate has been maintained</div>\r\n <div class=\"d-flex flex-wrap py-3\">\r\n <div class=\" min-w-125px py-3 me-6 mb-3\">\r\n <div class=\"h-history-count\">Total : <span class=\"h-history-title\">{{successRate?.total}} {{successRate?.total > 1 ? 'Tickets' : 'Ticket'}}</span></div>\r\n </div>\r\n <div *ngIf=\"successRate?.successRate !== 'null' && successRate?.successRate > 0 && successRate?.successRate !== ''\" class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"h-history-count\">Success Rate : <span class=\"h-history-title\">{{successRate?.successRate}}%</span></div>\r\n </div>\r\n <!-- <div class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"fw-bold fs-6 text-gray-500\">Earnings</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"fs-2 fw-bolder\">4500$</div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 text-end\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3 cursor-pointer \"\r\n (click)=\"raiseTicket()\">Raise a Ticket</button>\r\n <button *ngIf=\"(currentIdx + 1) !== selectedDate.length\" type=\"button\" class=\"btn btn-primary rounded-3\" (click)=\"closeTicket()\">Accept & Close</button>\r\n <button *ngIf=\"(currentIdx + 1) === selectedDate.length\" type=\"button\" class=\"btn btn-primary rounded-3\" (click)=\"openPopup()\">Close</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #confirmationModal let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div class=\" mt-5\">\r\n <span class=\"cameraDetail fw-bold\">Unsaved Changes</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">Do you want to close the tickets?</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.dismiss()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-2\" (click)=\"confirmSave();modal.close()\">Confirm</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #ReconfirmationModal let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div class=\" mt-5\">\r\n <span class=\"cameraDetail fw-bold\">Are you sure, want to view more details?</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">If so you will redirect to Queries summary & can\u2019t able to come back to the screen.</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.dismiss()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-2\" (click)=\"confirmMore();modal.dismiss()\">Confirm</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n ", styles: [".nav-line-tabs1.nav-line-tabs-2x .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;color:var(--Primary-700, #009BF3)!important}.nav-line-tabs1 .nav-link{color:var(--Gray-500, #667085)!important;font-size:16px;font-weight:500!important;line-height:24px}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.drops-down-down.ltr.double.show-ranges.shown{left:0!important;height:350px}:host::ng-deep .md-drppicker td{border-radius:44px}:host::ng-deep .md-drppicker .btn{border-radius:7px!important;background-color:#019df5!important}:host::ng-deep .md-drppicker .btn{right:99px;top:300px}:host::ng-deep .md-drppicker .ranges ul li button.active{background-color:#029cf3!important}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important}.title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.active{border-radius:6px!important;padding:8px 25px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.list-size{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.fw-bold-700{font-weight:700!important}.c-label{color:var(--Gray-800, #1D2939)!important;font-size:16px!important;font-weight:500!important;line-height:24px}.c-label-title{color:#000!important;font-size:16px!important;font-weight:500;line-height:24px!important}.primary-list{color:var(--Primary-700, #009BF3)!important;font-size:12px!important;font-weight:600;line-height:18px;text-transform:capitalize}.h-history-title{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.h-history-count{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.q-query-text{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.cameraDetail{color:var(--Gray-900, #101828)!important;font-size:18px!important;line-height:28px!important}.sub-header{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.actualspan{color:var(--Black, #101828);font-size:12px;font-weight:400;line-height:18px}.Nopreview{border:1px solid var(--Gray-500, #667085);background:var(--Gray-100, #F2F4F7);color:var(--Gray-500, #667085)}.Nopreview .previewTitle{font-size:20px;font-weight:700;line-height:20px}.Nopreview .previewsubTitle{text-align:center;font-size:12px;line-height:18px}\n"] }]
372
+ args: [{ selector: 'lib-analyze-report', template: "<div class=\"card py-0 scroll-y\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Images/edgeapp icon.svg\">\r\n </div>\r\n </div>\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Analyze Report</a>\r\n <div class=\"sub-title q-query-text\">Your Queries reported below stores are got {{analyzereport?.countType}} {{analyzereport?.filteredFeature}} on {{getDateFormat(selectedDate[0]?.date)}} to\r\n {{getDateFormat(selectedDate[selectedDate.length - 1]?.date)}}</div>\r\n </div>\r\n </div>\r\n <ul class=\"nav my-3 w-100 mt-5\">\r\n <li *ngFor=\"let date of selectedDate;let i=index\" class=\"nav-item\"><a data-bs-toggle=\"tab\" [ngClass]=\"activeDate === date?.date ? 'active':''\" (click)=\"handleClick(i)\" \r\n class=\"nav-link btn btn-sm btn-color-muted btn-active fw-bolder px-5 me-1 show\">\r\n {{getDateFormat(date?.date)}} <span *ngIf=\"activeDate === date?.date && !date?.isSelected\" class=\"mx-2\"><svg width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g style=\"mix-blend-mode:multiply\">\r\n <rect x=\"0.25\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#EAF8FF\" />\r\n <g clip-path=\"url(#clip0_8713_10379)\">\r\n <path\r\n d=\"M10.25 8V10M10.25 12H10.255M15.25 10C15.25 12.7614 13.0114 15 10.25 15C7.48858 15 5.25 12.7614 5.25 10C5.25 7.23858 7.48858 5 10.25 5C13.0114 5 15.25 7.23858 15.25 10Z\"\r\n stroke=\"#33B5FF\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_8713_10379\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(4.25 4)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span *ngIf=\"activeDate !== date?.date && !date?.isSelected\" class=\"mx-2\">\r\n <svg width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g style=\"mix-blend-mode:multiply\">\r\n <rect x=\"0.25\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#F2F4F7\" />\r\n <g clip-path=\"url(#clip0_8713_10379)\">\r\n <path\r\n d=\"M10.25 8V10M10.25 12H10.255M15.25 10C15.25 12.7614 13.0114 15 10.25 15C7.48858 15 5.25 12.7614 5.25 10C5.25 7.23858 7.48858 5 10.25 5C13.0114 5 15.25 7.23858 15.25 10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_8713_10379\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(4.25 4)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a></li>\r\n </ul>\r\n <div *ngIf=\"!selectedDate[currentIdx].isSelected\" class=\"my-3 mt-5\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div *ngIf=\"selectedDate[currentIdx].isSelected\" class=\"my-3 mt-5\">\r\n <img style=\"width:50px; height:50px\" src=\"./assets/tango/Images/Successtoast.png\">\r\n </div>\r\n <div *ngIf=\"activeArray && activeArray.length > 0\" class=\"ul-list\">\r\n <ul>\r\n <li *ngIf=\"activeArray?.primaryIssue\" class=\"list-size my-3\">The primary issue was <span class=\"fw-bold-700\">{{activeArray?.primaryIssue}}</span> where\r\n the <span *ngFor=\"let data of activeArray?.secondaryReason let last = last\" class=\"fw-bold-700\">data <span *ngIf=\"!last\">,</span></span> was the secondary concern. </li>\r\n <li *ngIf=\"activeArray?.downTime > 0\" class=\"list-size my-3\">Store Experienced a downtime of <span class=\"fw-bold-700\">{{activeArray?.downTime}} mins</span>\r\n dated <span class=\"fw-bold-700\">{{activeArray?.issueDate}}</span> where \"N Files Lost\" and was unable to send to our\r\n cloud due to speed being <span class=\"fw-bold-700\">{{activeArray?.speedTest}} Mbps.</span> </li>\r\n <!-- <li class=\"list-size my-3\">We were able to capture only <span class=\"fw-bold-700\">100 Footfalls</span>\r\n despite the <span class=\"fw-bold-700\">Internet slow</span> issue </li> -->\r\n\r\n </ul>\r\n </div> \r\n </div>\r\n <div class=\"card-header border-0 d-flex justify-content-between\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"c-label fw-bolder fs-3 mb-1\">Tango Pre-Requisite <span *ngIf=\"activeArray?.primaryIssue\" class=\"badge badge-light-warning ms-2\">Warning</span></span>\r\n </h3>\r\n <div class=\"card-toolbar text-end\">\r\n <span class=\"list-size\">{{activeStream?.cameraNumber}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mx-5 px-2\"> \r\n <!-- <div class=\"rounded-2 overflow-hidden\">\r\n \r\n <span class=\"list-size\"> Camera Angle</span>\r\n <div class=\"mt-3\">\r\n <img *ngIf=\"angleChange && angleChange?.angleChangeImage\" class=\"w-100 mh-150px\" [src]=\"angleChange?.angleChangeImage ? angleChange?.angleChangeImage :activeStream?.thumbnailImage\" (error)=\"angleChange.angleChangeImage = null\">\r\n <img *ngIf=\"!angleChange?.angleChangeImage && activeStream?.thumbnailImage\" class=\"w-100 mh-150px\" [src]=\"angleChange?.angleChangeImage ? angleChange?.angleChangeImage :activeStream?.thumbnailImage\" (error)=\"activeStream.thumbnailImage = null\">\r\n </div>\r\n <div *ngIf=\"!activeStream?.thumbnailImage && !angleChange?.angleChangeImage\" class=\"w-100 h-200px rounded-3 overflow-hidden Nopreview align-content-center mt-3\">\r\n <div class=\"previewTitle text-center mb-5\">\r\n Preview not available\r\n </div>\r\n <div class=\"previewsubTitle fw-semibold\">\r\n The selected camera is not available at the moment.\r\n </div>\r\n </div>\r\n <div class=\"row p-0\" *ngIf=\"angleChange?.angleChangeImage\">\r\n <div class=\"col-md-6 m-0 pe-0\">\r\n <div class=\"d-flex justify-content-center align-items-center bg-light-primary py-3\">\r\n <span class=\"actualspan\">Expected</span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6 m-0 ps-0\">\r\n <div class=\"d-flex justify-content-center align-items-center bg-light-primary py-3\">\r\n <span class=\"actualspan\">Actual</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div class=\"table-reponsive mt-5\">\r\n <table class=\"bottom-border w-100\">\r\n <thead>\r\n <tr>\r\n <th>Instances</th>\r\n <th class=\"text-center\">Excepted</th>\r\n <th class=\"text-center\">Actual</th>\r\n <th class=\"text-center\">Result</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>Camera Angle</td>\r\n <td *ngIf=\"angleChange\"><div class=\"align-content-center text-center align-items-center\">\r\n <img class=\"h-70px w-75 rounded-3\" [src]=\"angleChange?.expected\">\r\n </div></td>\r\n <td *ngIf=\"angleChange\"><div class=\"align-content-center text-center align-items-center\">\r\n <img class=\"h-70px w-75 rounded-3\" [src]=\"angleChange?.actual\">\r\n </div></td>\r\n <td *ngIf=\"!angleChange || !angleChange?.expected\">\r\n <div class=\"d-flex align-items-center text-align-center justify-content-center\">\r\n <div class=\"w-75 h-70px rounded-3 align-content-center Nopreview mt-3\">\r\n <div class=\"previewTitle text-center\">\r\n Preview not available\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td *ngIf=\"!angleChange || !angleChange?.actual\">\r\n <div class=\"d-flex align-items-center text-align-center justify-content-center\">\r\n <div class=\"w-75 h-70px rounded-3 align-content-center Nopreview mt-3\">\r\n <div class=\"previewTitle text-center\">\r\n Preview not available\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td *ngIf=\"!angleChange\" class=\"text-center\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\">\r\n <path d=\"M22.25 11.0799V11.9999C22.2488 14.1563 21.5505 16.2545 20.2593 17.9817C18.9682 19.7088 17.1533 20.9723 15.0854 21.5838C13.0174 22.1952 10.8073 22.1218 8.78447 21.3744C6.76168 20.6271 5.03465 19.246 3.86096 17.4369C2.68727 15.6279 2.12979 13.4879 2.27168 11.3362C2.41356 9.18443 3.24721 7.13619 4.64828 5.49694C6.04935 3.85768 7.94279 2.71525 10.0462 2.24001C12.1496 1.76477 14.3503 1.9822 16.32 2.85986M22.25 3.99986L12.25 14.0099L9.25001 11.0099\" stroke=\"#039855\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></td>\r\n <td *ngIf=\"angleChange\" class=\"text-center\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"32\" viewBox=\"0 0 33 32\" fill=\"none\">\r\n <path d=\"M16.25 28.1905C22.9827 28.1905 28.4405 22.7327 28.4405 16C28.4405 9.26743 22.9827 3.80957 16.25 3.80957C9.51743 3.80957 4.05957 9.26743 4.05957 16C4.05957 22.7327 9.51743 28.1905 16.25 28.1905Z\" stroke=\"#D92D20\" stroke-width=\"1.52381\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M11.6787 11.4287L20.8216 20.5716M20.8216 11.4287L11.6787 20.5716\" stroke=\"#D92D20\" stroke-width=\"1.52381\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></td>\r\n </tr>\r\n <tr>\r\n <td>Resolution</td>\r\n <td class=\"text-center\">{{angleChange?.resolution ? angleChange?.resolution : '--'}}</td>\r\n <td class=\"text-center\">{{angleChange?.resolution ? angleChange?.resolution : '--'}}</td>\r\n <!-- <td *ngIf=\"angleChange?.anglechange\"><img src=\"./assets/tango/Image/verificationfailed.svg\"></td> -->\r\n <td class=\"text-center\"><span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\">\r\n <path d=\"M22.25 11.0799V11.9999C22.2488 14.1563 21.5505 16.2545 20.2593 17.9817C18.9682 19.7088 17.1533 20.9723 15.0854 21.5838C13.0174 22.1952 10.8073 22.1218 8.78447 21.3744C6.76168 20.6271 5.03465 19.246 3.86096 17.4369C2.68727 15.6279 2.12979 13.4879 2.27168 11.3362C2.41356 9.18443 3.24721 7.13619 4.64828 5.49694C6.04935 3.85768 7.94279 2.71525 10.0462 2.24001C12.1496 1.76477 14.3503 1.9822 16.32 2.85986M22.25 3.99986L12.25 14.0099L9.25001 11.0099\" stroke=\"#039855\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></td>\r\n </tr>\r\n <!-- <tr>\r\n <td>Downtime</td>\r\n <td>4.00 AM</td>\r\n <td>9.00 AM</td>\r\n <td><img src=\"./assets/tango/Image/verificationdanger.svg\"></td>\r\n </tr> -->\r\n </tbody>\r\n </table>\r\n <div *ngIf=\"streamDetails?.length\" class=\"d-flex justify-content-center align-items-center mt-10\">\r\n <div *ngFor=\"let stream of streamDetails\" [ngClass]=\"stream?.streamName === activeStream?.streamName? 'bg-dark' : 'bg-opacity-25'\" class=\"w-10px h-10px rounded-5 bg-dark cursor-pointer mx-3\" (click)=\"getstreambasedAngle(stream)\"></div>\r\n </div>\r\n <div class=\"card-header p-0 border-0 pt-5 d-flex justify-content-between\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"c-label-title mb-1\">Queries History</span>\r\n </h3>\r\n <div (click)=\"viewMore()\" class=\"card-toolbar text-end\">\r\n <span class=\"primary-list cursor-pointer text-decoration-underline\">View more Details</span>\r\n </div>\r\n </div>\r\n <div class=\"q-query-text\">From the date of installation till today the below queries success rate has been maintained</div>\r\n <div class=\"d-flex flex-wrap py-3\">\r\n <div class=\" min-w-125px py-3 me-6 mb-3\">\r\n <div class=\"h-history-count\">Total : <span class=\"h-history-title\">{{successRate?.total}} {{successRate?.total > 1 ? 'Tickets' : 'Ticket'}}</span></div>\r\n </div>\r\n <div *ngIf=\"successRate?.successRate !== 'null' && successRate?.successRate > 0 && successRate?.successRate !== ''\" class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"h-history-count\">Success Rate : <span class=\"h-history-title\">{{successRate?.successRate}}%</span></div>\r\n </div>\r\n <!-- <div class=\" min-w-125px py-3 px-4 me-6 mb-3\">\r\n <div class=\"fw-bold fs-6 text-gray-500\">Earnings</div>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"fs-2 fw-bolder\">4500$</div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 text-end\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3 cursor-pointer \"\r\n (click)=\"raiseTicket()\">Raise a Ticket</button>\r\n <button *ngIf=\"(currentIdx + 1) !== selectedDate.length\" type=\"button\" class=\"btn btn-primary rounded-3\" (click)=\"closeTicket()\">Accept & Close</button>\r\n <button *ngIf=\"(currentIdx + 1) === selectedDate.length\" type=\"button\" class=\"btn btn-primary rounded-3\" (click)=\"openPopup()\">Close</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #confirmationModal let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div class=\" mt-5\">\r\n <span class=\"cameraDetail fw-bold\">Unsaved Changes</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">Do you want to close the tickets?</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.dismiss()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-2\" (click)=\"confirmSave();modal.close()\">Confirm</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #ReconfirmationModal let-modal>\r\n <div class=\"p-8\">\r\n <div class=\"\">\r\n <img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\">\r\n </div>\r\n <div class=\" mt-5\">\r\n <span class=\"cameraDetail fw-bold\">Are you sure, want to view more details?</span>\r\n <div class=\"mt-3 sub-header fw-bold-400\">If so you will redirect to Queries summary & can\u2019t able to come back to the screen.</div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <button type=\"button\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"modal.dismiss()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary w-50 ms-2\" (click)=\"confirmMore();modal.dismiss()\">Confirm</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n ", styles: [".nav-line-tabs1.nav-line-tabs-2x .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;color:var(--Primary-700, #009BF3)!important}.nav-line-tabs1 .nav-link{color:var(--Gray-500, #667085)!important;font-size:16px;font-weight:500!important;line-height:24px}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.drops-down-down.ltr.double.show-ranges.shown{left:0!important;height:350px}:host::ng-deep .md-drppicker td{border-radius:44px}:host::ng-deep .md-drppicker .btn{border-radius:7px!important;background-color:#019df5!important}:host::ng-deep .md-drppicker .btn{right:99px;top:300px}:host::ng-deep .md-drppicker .ranges ul li button.active{background-color:#029cf3!important}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important}.title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.active{border-radius:6px!important;padding:8px 25px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.list-size{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.fw-bold-700{font-weight:700!important}.c-label{color:var(--Gray-800, #1D2939)!important;font-size:16px!important;font-weight:500!important;line-height:24px}.c-label-title{color:#000!important;font-size:16px!important;font-weight:500;line-height:24px!important}.primary-list{color:var(--Primary-700, #009BF3)!important;font-size:12px!important;font-weight:600;line-height:18px;text-transform:capitalize}.h-history-title{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.h-history-count{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:500!important;line-height:24px!important}.q-query-text{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.cameraDetail{color:var(--Gray-900, #101828)!important;font-size:18px!important;line-height:28px!important}.sub-header{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.actualspan{color:var(--Black, #101828);font-size:12px;font-weight:400;line-height:18px}.Nopreview{border:1px solid var(--Gray-500, #667085);background:var(--Gray-100, #F2F4F7);color:var(--Gray-500, #667085)}.Nopreview .previewTitle{font-size:10px;font-weight:700;line-height:20px}.Nopreview .previewsubTitle{text-align:center;font-size:12px;line-height:18px}\n"] }]
364
373
  }], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i1$1.NgbActiveModal }, { type: TicketsService }, { type: i0.ChangeDetectorRef }], propDecorators: { analyzereport: [{
365
374
  type: Input
366
375
  }], confirmationModal: [{
@@ -380,7 +389,7 @@ class CreateTicketComponent {
380
389
  storeDetails;
381
390
  Features = ['Footfall'];
382
391
  filteredStore;
383
- filteredFeature;
392
+ filteredFeature = 'footfall';
384
393
  searchData;
385
394
  dropDownFeature;
386
395
  dropDownStore;
@@ -406,6 +415,9 @@ class CreateTicketComponent {
406
415
  this.modalService = modalService;
407
416
  this.activeModal = activeModal;
408
417
  this.service = service;
418
+ let userInfo = JSON.parse(localStorage.getItem('user-info') || '{}');
419
+ this.email = userInfo?.email;
420
+ this.emailValidation();
409
421
  }
410
422
  onClick(event) {
411
423
  const target = event.target;
@@ -417,7 +429,6 @@ class CreateTicketComponent {
417
429
  ngOnInit() {
418
430
  this.clientId = this.clientDetails?.clientId;
419
431
  this.filteredStoreId = this.clientDetails?.storeId;
420
- console.log('filteredStore', this.clientDetails?.storeId);
421
432
  this.selectedDateRange = {
422
433
  startDate: this.dayjs().format("DD-MM-YYYY"),
423
434
  endDate: this.dayjs().format("DD-MM-YYYY"),
@@ -478,7 +489,6 @@ class CreateTicketComponent {
478
489
  let currentDate = event.startDate;
479
490
  while (currentDate.isBefore(event.endDate) || currentDate.isSame(event.endDate, 'day')) {
480
491
  this.dateRange.push(this.dayjs(currentDate, "DD-MM-YYYY").format("YYYY-MM-DD"));
481
- // console.log(this.dateRange)
482
492
  currentDate = currentDate.add(1, 'day');
483
493
  }
484
494
  // var datetime = {
@@ -725,10 +735,12 @@ class TicketInfraComponent {
725
735
  clientId: this.clientId,
726
736
  storeId: this.headerFilter?.store,
727
737
  };
728
- console.log('storeId', this.headerFilter?.store);
729
738
  modalRef.result.then((result) => {
730
739
  });
731
740
  }
741
+ // convertDateFormat(date:any){
742
+ // return this.dayjs(date,'DD-MM-YYYY').format('DD MMM, YYYY');
743
+ // }
732
744
  ShowTicket(value, index) {
733
745
  this.selectedIssue = '';
734
746
  this.selectCard = index;
@@ -757,7 +769,6 @@ class TicketInfraComponent {
757
769
  next: (res) => {
758
770
  if (res && res.code == 200) {
759
771
  this.cameraListImages = res?.data;
760
- // console.log(res);
761
772
  this.cd.detectChanges();
762
773
  if (this.cameraListImages == 0) {
763
774
  this.showcamIssue = true;
@@ -980,7 +991,6 @@ class TicketInfraComponent {
980
991
  "filter": this.filteredIssue,
981
992
  "export": false
982
993
  };
983
- // console.log('getdataMismatchActivityList',data)
984
994
  this.ticketservice.dataMismatchActivityList(data).subscribe({
985
995
  next: (res) => {
986
996
  if (res && res.code == 200) {
@@ -1010,7 +1020,6 @@ class TicketInfraComponent {
1010
1020
  let obj = {
1011
1021
  "ticketId": this.ticketId
1012
1022
  };
1013
- // console.log('getdataMismatchShowActivity',obj)
1014
1023
  this.ticketservice.dataMismatchShowActivity(obj).subscribe({
1015
1024
  next: (res) => {
1016
1025
  if (res && res?.code == 200 && Array.isArray(res.data.ticketActivity)) {
@@ -1021,7 +1030,6 @@ class TicketInfraComponent {
1021
1030
  });
1022
1031
  if (this.ticketInfo?.cameraList?.length > 0) {
1023
1032
  let notworkingCamera = this.ticketInfo.cameraList.filter((e) => e.status != "working");
1024
- // console.log(notworkingCamera);
1025
1033
  if (notworkingCamera.length > 0) {
1026
1034
  this.getCameraList(notworkingCamera);
1027
1035
  }
@@ -1112,7 +1120,6 @@ class TicketInfraComponent {
1112
1120
  });
1113
1121
  if (this.ticketInfo.cameraList.length > 0) {
1114
1122
  let notworkingCamera = this.ticketInfo.cameraList.filter((e) => e.status != "working");
1115
- // console.log(notworkingCamera);
1116
1123
  if (notworkingCamera.length > 0) {
1117
1124
  this.getCameraList(notworkingCamera);
1118
1125
  }
@@ -1121,7 +1128,7 @@ class TicketInfraComponent {
1121
1128
  const dataTime = this.viewTicketData.filter((e) => e.actionType === "statusCheck");
1122
1129
  if (dataTime.length > 0) {
1123
1130
  this.isGreaterThan5_30Hours = this.isResponseGreaterThan5_30Hours(dataTime[0].statusCheckAlertTime);
1124
- if (this.isGreaterThan5_30Hours && this.userpermission.manage_tickets_isEdit && this.userType == 'client') {
1131
+ if (this.isGreaterThan5_30Hours && this.ticketInfo.status != 'closed' && this.userpermission.manage_tickets_isEdit && this.userType == 'client') {
1125
1132
  this.viewTicketData = [...this.viewTicketData];
1126
1133
  }
1127
1134
  else {
@@ -1140,7 +1147,6 @@ class TicketInfraComponent {
1140
1147
  const currentDatetime = new Date();
1141
1148
  const calculatedDatetime = new Date(responseDatetime);
1142
1149
  const diffInMinutes = dayjs(currentDatetime).diff(dayjs(calculatedDatetime), 'minute');
1143
- // console.log("diffInMinutes", diffInMinutes);
1144
1150
  return diffInMinutes > 0;
1145
1151
  }
1146
1152
  secondaryReason(value) {
@@ -1170,11 +1176,11 @@ class TicketInfraComponent {
1170
1176
  link.click();
1171
1177
  }
1172
1178
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TicketInfraComponent, deps: [{ token: TicketsService }, { token: i0.ChangeDetectorRef }, { token: i1.GlobalStateService }, { token: i3.ToastService }, { token: ExcelService }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
1173
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: TicketInfraComponent, selector: "lib-ticket-infra", inputs: { selectedTab: "selectedTab" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span *ngIf=\"selectedTab === 'infra'\" class=\"card-label mb-2\">Infra Tickets</span>\r\n <span *ngIf=\"selectedTab === 'dataMismatch'\" class=\"card-label mb-2\">Data Mismatch</span>\r\n <span class=\"text-sub mb-2\">An overview of all the tickets for {{headerFilter?.date?.startDate |\r\n customDateFormat}} - {{headerFilter?.date?.endDate | customDateFormat}}</span>\r\n </h3>\r\n <div *ngIf=\"selectedTab==='infra'\" class=\"card-toolbar\">\r\n <div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"openDropdown($event)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Filter</span> </button>\r\n <div *ngIf=\"dropDown\" class=\"card py-1 w-200px position-absolute top-50px end-0 z-1\">\r\n <ul *ngFor=\"let item of dropdownItems\" class=\"list-unstyled\">\r\n <li [ngClass]=\"this.filteredIssue === item ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem(item)\">\r\n {{item}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_stores_isDownload && !storeListNodata\" type=\"button\"\r\n (click)=\"exportStoreListasXlsx()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span> </button>\r\n </div>\r\n <div *ngIf=\"selectedTab==='dataMismatch'\" class=\"card-toolbar\">\r\n <button type=\"button\" (click)=\"createTicket()\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap border-val\">\r\n <span class=\"ms-2\">Create Ticket</span> </button>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div class=\"d-flex justify-content-between mb-7\">\r\n <div *ngFor=\"let issue of ticketCard\" class=\"issuecard\">\r\n <div>\r\n <span class=\"title\">{{issue.count}}</span>\r\n </div>\r\n <span class=\"label fw-semibold\">{{issue.name}}</span>\r\n </div>\r\n </div>\r\n <div class=\"maincard-content\">\r\n <div class=\"row p-10\">\r\n <div class=\"col-sm-6 cursor-pointer \">\r\n <div *ngIf=\"!storeListLoading && !storeListNodata\">\r\n <div *ngFor=\"let data of ticketList;let index = index\" class=\"issuecard w-100 mb-4\"\r\n (click)=\"ShowTicket(data.ticketId,index)\"\r\n [ngClass]=\"(selectCard ? selectCard : 0) === index ? 'active' : ''\">\r\n <div class=\"maincard-label fw-bold d-flex justify-content-between mb-5\"><span> <img\r\n src='./assets/tango/Images/ticket.svg'>\r\n {{data.ticketId}}</span>\r\n <span class=\"badge\"\r\n [ngClass]=\"data.status === 'closed' ? 'badge-light-success' :(data.status === 'inprogress' ? 'badge-light-primary':'badge-light-warning')\">{{data.status | titlecase}}</span>\r\n </div>\r\n <div *ngIf=\"data.issueType ==='highcount'\" class=\"mb-5 maincard-label fw-bold\">\r\n High Count\r\n </div>\r\n <div *ngIf=\"data.issueType ==='lowcount'\" class=\"mb-5 maincard-label fw-bold\">\r\n Low Count\r\n </div>\r\n <div *ngIf=\"data.description\" class=\"mb-5 contenttext fw-semibold\">\r\n {{data.description}}\r\n </div>\r\n <div *ngIf=\"data.issueStatus === 'notidentified'\" class=\"mb-5 contenttext fw-semibold\">\r\n We have not received data from your store. We are currently investigating the issue.\r\n </div>\r\n <div *ngIf=\"data.issueStatus ==='identified'\" class=\"mb-5 contenttext fw-semibold\">Store is\r\n currently encountering a <span class=\"fw-bold-700\">{{data.primaryIssue}}</span> which is\r\n <span *ngFor=\"let secondary of data.secondaryIssue; let last = last\"\r\n class=\"fw-bold-700\">{{secondary?.name}}<ng-container *ngIf=\"!last\"> ,</ng-container>\r\n </span>.\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"profile d-flex align-items-centre justify-content-centre\">\r\n <img src=\"./assets/tango/Images/userProfile.svg\" alt=\"\">\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <span *ngIf=\"data?.ticketType === 'refreshticket'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"14\"\r\n viewBox=\"0 0 17 14\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M5.94602 4.98881L2.66602 6.33881L2.00602 6.07881L0.666016 2.83881L1.58602 2.45881L2.39602 4.40881C2.93977 3.04801 3.92872 1.91169 5.20145 1.18532C6.47419 0.458951 7.95554 0.185426 9.40375 0.409387C10.852 0.633349 12.1815 1.34157 13.1754 2.41846C14.1692 3.49535 14.7687 4.87732 14.876 6.33881H13.876C13.7616 5.09008 13.2224 3.91836 12.3484 3.01919C11.4743 2.12003 10.3184 1.54781 9.0734 1.39804C7.82842 1.24826 6.56973 1.53 5.50739 2.19622C4.44505 2.86244 3.64332 3.87284 3.23602 5.05881L5.55602 4.05881L5.94602 4.98881ZM14.806 7.66881L16.146 10.8988L15.226 11.3388L14.406 9.33881C13.858 10.7049 12.8618 11.8442 11.581 12.5696C10.3001 13.295 8.81077 13.5634 7.35728 13.3309C5.9038 13.0983 4.57255 12.3786 3.582 11.2898C2.59145 10.2009 2.00046 8.80775 1.90602 7.33881H2.90602V6.83881C2.90882 8.12627 3.36402 9.3718 4.19203 10.3577C5.02005 11.3436 6.16821 12.0071 7.43584 12.2322C8.70346 12.4574 10.0099 12.2299 11.1268 11.5895C12.2437 10.9491 13.1 9.93655 13.546 8.72881L11.296 9.65881L10.906 8.73881L14.156 7.38881L14.806 7.66881Z\"\r\n fill=\"#98A2B3\" />\r\n <path\r\n d=\"M8.40625 7.54004C8.95853 7.54004 9.40625 7.09232 9.40625 6.54004C9.40625 5.98775 8.95853 5.54004 8.40625 5.54004C7.85397 5.54004 7.40625 5.98775 7.40625 6.54004C7.40625 7.09232 7.85397 7.54004 8.40625 7.54004Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n </span>\r\n <span class=\"contenttext fw-semibold px-3\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M14 10C14 10.3536 13.8595 10.6928 13.6095 10.9428C13.3594 11.1929 13.0203 11.3333 12.6667 11.3333H4.66667L2 14V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H12.6667C13.0203 2 13.3594 2.14048 13.6095 2.39052C13.8595 2.64057 14 2.97971 14 3.33333V10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-1\">{{data.comments}}</span> comments </span>\r\n <span *ngIf=\"data.status !== 'closed'\" class=\"contenttext fw-semibold px-3\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M10.6667 1.33398V4.00065M5.33333 1.33398V4.00065M2 6.66732H14M3.33333 2.66732H12.6667C13.403 2.66732 14 3.26427 14 4.00065V13.334C14 14.0704 13.403 14.6673 12.6667 14.6673H3.33333C2.59695 14.6673 2 14.0704 2 13.334V4.00065C2 3.26427 2.59695 2.66732 3.33333 2.66732Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-1\">{{data.Date}}</span></span>\r\n <span *ngIf=\"data.status === 'closed'\" class=\"contenttext fw-semibold px-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M10.6667 1.33398V4.00065M5.33333 1.33398V4.00065M2 6.66732H14M3.33333 2.66732H12.6667C13.403 2.66732 14 3.26427 14 4.00065V13.334C14 14.0704 13.403 14.6673 12.6667 14.6673H3.33333C2.59695 14.6673 2 14.0704 2 13.334V4.00065C2 3.26427 2.59695 2.66732 3.33333 2.66732Z\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg> {{data?.issueClosedDate | date:'dd-MM-yyyy' }} </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"storeListLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"storeListNodata\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"ticketInfo?.status && selectedTab === 'infra'\" class=\"col-sm-6\">\r\n <div>\r\n <div class=\"maincard-label fw-bold d-flex justify-content-between mb-10\">\r\n <span><img src='./assets/tango/Images/ticket.svg'><span\r\n class=\"mx-2\">{{ticketInfo?.ticketId}}</span></span>\r\n <span [ngClass]=\"ticketInfo.status === 'closed' ? 'badge-light-success' :(ticketInfo.status === 'inprogress' ? 'badge-light-primary':'badge-light-warning')\" class=\"badge badge-light-primary\">{{ticketInfo?.status | titlecase}}</span>\r\n </div>\r\n <div *ngIf=\"selectedIssue === ''&&ticketInfo?.ticketDetails?.issueStatus !== 'identified'&&ticketInfo?.status!=='closed'&&(gs.userAccess | async)?.manage_tickets_isEdit&&userType==='client'||ticketInfo?.ticketDetails?.ticketType==='refreshticket'&&ticketInfo?.ticketDetails?.refreshTicketStatus==='notidentified'&&(gs.userAccess | async)?.manage_tickets_isEdit&&userType==='client'\"\r\n class=\"investigation fw-semibold mt-2\">\r\n Kindly choose the option below that corresponds to the issue you are\r\n experiencing in the store.\r\n <ul class=\"list-unstyled px-4\">\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Internet Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> <span class=\"px-3\">Internet Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Camera Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M23 17C23 17.5304 22.7893 18.0391 22.4142 18.4142C22.0391 18.7893 21.5304 19 21 19H3C2.46957 19 1.96086 18.7893 1.58579 18.4142C1.21071 18.0391 1 17.5304 1 17V6C1 5.46957 1.21071 4.96086 1.58579 4.58579C1.96086 4.21071 2.46957 4 3 4H7L9 1H15L17 4H21C21.5304 4 22.0391 4.21071 22.4142 4.58579C22.7893 4.96086 23 5.46957 23 6V17Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 15C14.2091 15 16 13.2091 16 11C16 8.79086 14.2091 7 12 7C9.79086 7 8 8.79086 8 11C8 13.2091 9.79086 15 12 15Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> <span class=\"px-3\">Camera Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('System Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"14\" viewBox=\"0 0 20 14\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 2V9H2V2H12ZM2 0C0.896875 0 0 0.896875 0 2V9C0 10.1031 0.896875 11 2 11H5.66563L5.33125 12H3C2.44688 12 2 12.4469 2 13C2 13.5531 2.44688 14 3 14H11C11.5531 14 12 13.5531 12 13C12 12.4469 11.5531 12 11 12H8.66562L8.33125 11H12C13.1031 11 14 10.1031 14 9V2C14 0.896875 13.1031 0 12 0H2ZM16.5 0C15.6719 0 15 0.671875 15 1.5V12.5C15 13.3281 15.6719 14 16.5 14H18.5C19.3281 14 20 13.3281 20 12.5V1.5C20 0.671875 19.3281 0 18.5 0H16.5ZM17 2H18C18.275 2 18.5 2.225 18.5 2.5C18.5 2.775 18.275 3 18 3H17C16.725 3 16.5 2.775 16.5 2.5C16.5 2.225 16.725 2 17 2ZM16.5 4.5C16.5 4.225 16.725 4 17 4H18C18.275 4 18.5 4.225 18.5 4.5C18.5 4.775 18.275 5 18 5H17C16.725 5 16.5 4.775 16.5 4.5ZM17.5 9.5C17.7652 9.5 18.0196 9.60536 18.2071 9.79289C18.3946 9.98043 18.5 10.2348 18.5 10.5C18.5 10.7652 18.3946 11.0196 18.2071 11.2071C18.0196 11.3946 17.7652 11.5 17.5 11.5C17.2348 11.5 16.9804 11.3946 16.7929 11.2071C16.6054 11.0196 16.5 10.7652 16.5 10.5C16.5 10.2348 16.6054 9.98043 16.7929 9.79289C16.9804 9.60536 17.2348 9.5 17.5 9.5Z\"\r\n fill=\"#475467\" />\r\n </svg> <span class=\"px-3\">System Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Others')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.09 8C8.3251 7.33167 8.78915 6.76811 9.39995 6.40913C10.0108 6.05016 10.7289 5.91894 11.4272 6.03871C12.1255 6.15849 12.7588 6.52152 13.2151 7.06353C13.6713 7.60553 13.9211 8.29152 13.92 9C13.92 11 10.92 12 10.92 12M11 16H11.01M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> <span class=\"px-3\">Others</span>\r\n </li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"selectedIssue !== ''&&ticketInfo?.ticketDetails?.issueStatus !=='identified'&&ticketInfo?.status!=='closed'&&userType==='client'\"\r\n class=\"\">\r\n <div class=\"openedissue d-flex justify-content-between align-items-center\">\r\n <span class=\"profile-label fw-semibold\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> {{selectedIssue}}\r\n </span>\r\n <div (click)=\"choosenIssue('')\" class=\"maincard-content bg-white px-3 py-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12.8327 6.99935H1.16602M1.16602 6.99935L6.99935 12.8327M1.16602 6.99935L6.99935 1.16602\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Internet Issues'||selectedIssue === 'Camera Issues'&&showcamIssue||selectedIssue === 'System Issues' \"\r\n class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\">\r\n <div class=\"maincard-label fw-semibold py-2\"> Please select the relevant problem facing\r\n from the following </div>\r\n <div *ngFor=\"let issue of secondaryIssues;let index = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4\"\r\n (click)=\"toggleCheckbox(index)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{issue.name}}</span>\r\n <span class=\"w-300px\" [ngbTooltip]=\"tooltipContent\"\r\n triggers=\"mouseenter:mouseleave\" placement=\"left\">\r\n <svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <!-- Define tooltip content -->\r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-content\">\r\n <ul>\r\n <li *ngFor=\"let tooltipItem of issue?.toolTips\">{{ tooltipItem?.name }}\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-template>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"checkbox\" [checked]=\"issue.checked\" class=\"p-0\">\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Others'\" class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\">\r\n <div class=\"maincard-label fw-semibold py-2\"> Please select the relevant problem facing\r\n from the following </div>\r\n <div *ngFor=\"let others of othersIssue;let i = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4\"\r\n (click)=\"toggleRadiobox(others)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{others.name}}</span>\r\n <span><svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"radio\" name=\"radioGroup{{i}}\" [value]=\"others.name\"\r\n [(ngModel)]=\"selectedOption\" class=\"p-0\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\"\r\n *ngIf=\"selectedIssue === 'Camera Issues'&&!showcamIssue&&cameraListImages.length>0\">\r\n <div class=\"maincard-label fw-semibold py-2\">\r\n Please make sure all of your surveillance cameras are functioning and verify the\r\n footage you have. </div>\r\n <div class=\"row\">\r\n <div class=\"col-sm-6\" *ngFor=\"let item of cameraListImages;let i = index\">\r\n <span class=\"camera fw-bold mt-2\">{{item?.cameraName?item?.cameraName:\"--\"}}</span>\r\n <div\r\n class=\"d-flex align-items-centre justify-content-centre rounded-3 overflow-hidden mt-3\">\r\n <img class=\"w-100\"\r\n [src]=\"item?.thumbnailImage?item?.thumbnailImage:'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvcmV8ZW58MHx8MHx8fDA%3D'\">\r\n <!-- <img class=\"w-100\" src='https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvcmV8ZW58MHx8MHx8fDA%3D'> -->\r\n\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-5\">\r\n <button (click)=\"cameraSelection(i,'working')\" type=\"button\"\r\n class=\"btn btn-default btn-outline w-50 me-2\"\r\n [ngClass]=\"item.cameraNumber==='working'?'text-primary bg-light-primary':''\">\r\n Working\r\n </button>\r\n <button (click)=\"cameraSelection(i,'notworking')\" type=\"button\"\r\n class=\"btn btn-default btn-outline w-50 ms-2\"\r\n [ngClass]=\"item.cameraNumber==='notworking'?'text-danger bg-light-danger':''\">\r\n Not Working\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <button *ngIf=\"!showcamIssue\" class=\"btn btn-primary w-100 mt-6\"\r\n (click)=\"updateCamStatus()\">Proceed</button>\r\n </div>\r\n <div class=\"mt-3 mb-3\">\r\n <button *ngIf=\"showcamIssue\" class=\"btn btn-primary w-100\" (click)=\"submitData()\">\r\n Submit\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngFor=\"let obj of viewTicketData;let i=index\">\r\n <!-- User code start -->\r\n <div *ngIf=\"obj.actionBy === 'User'\" class=\"d-flex ms-5\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\"\r\n class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <img class=\"msgprofile\" src=\"./assets/tango/Images/userProfile.svg\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\">\r\n <div class=\"d-flex mb-3\">\r\n <span\r\n class=\"headingtext text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <span class=\"profile-label font-bold-400\">User has replied </span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Issue has been <b><span\r\n *ngIf=\"obj.statusCheckReply==='No'\">not</span> resolved.</b>\r\n\r\n </div>\r\n <div class=\"textupdates fw-bold-400\" *ngIf=\"obj.statusCheckReply==='No'\"> It\r\n takes {{obj?.hibernationDays}} more days to resolve.</div>\r\n </div>\r\n\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-semibold mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div\r\n *ngIf=\"res.primaryIssue ==='Camera Issues'&&notworkingCamaralist.length>0\">\r\n <div class=\"row\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3 my-3\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n </div>\r\n <span>The above camera streaming are not working </span>\r\n </div>\r\n <div class=\"mt-3\" *ngIf=\"res?.secondaryIssue.length>0\">\r\n <span class=\"investigation fw-bold-400\">The following are the relevant\r\n problem facing</span>\r\n <ul class=\"profile-label fw-bold-400 mt-3\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">{{obj?.comment}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- <div *ngIf=\"selectedIssue === ''\" class=\"profile-label fw-semibold mt-2\">\r\n Kindly choose the option below that corresponds to the issue you are\r\n experiencing in the store.\r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- User code end -->\r\n <!-- Tango code start -->\r\n <div *ngIf=\"obj.actionBy === 'Tango' || obj.actionBy === 'automated'\" class=\"d-flex mb-5 ms-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <img class=\"msgprofile\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div class=\"d-flex mb-3\">\r\n <span\r\n class=\"headingtext text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <div class=\"mb-3\">\r\n <span class=\"profile-label fw-bold-400\" (click)=\"tangoReply()\">tango has replied\r\n to the issue</span>\r\n <div *ngIf=\"obj.actionType === 'dataRecived'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for your assistance. We\r\n have received the data from your Store.\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckMonitor'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for the update. We\u2019ll\r\n get back after the buffer time you provided.\r\n </div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">{{obj?.comment}}</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='stepsToResolve'\" class=\"mt-3\">\r\n <span class=\"textupdates fw-bold-400\">Please follow the below steps to\r\n resolve the above issue</span>\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"mt-5\">\r\n <span class=\"headingtext fw-semibold\">{{res.primaryIssue}}</span>\r\n <ul class=\"mt-3 profile-label fw-bold-400\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-semibold mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div\r\n *ngIf=\"res.primaryIssue ==='Camera Issues'&&notworkingCamaralist.length>0\">\r\n <div class=\"row\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n </div>\r\n <span>The above camera streaming are not working </span>\r\n </div>\r\n <div class=\"mt-3\" *ngIf=\"res?.secondaryIssue.length>0\">\r\n <span class=\"investigation fw-bold-400\">The following are the\r\n relevant\r\n problem facing</span>\r\n <ul class=\"profile-label fw-bold-400 mt-3\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">{{obj?.comment}}</span>\r\n\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='statusCheck' && isGreaterThan5_30Hours\"\r\n class=\"issuecard w-100 mt-3\">\r\n <span class=\"maincard-label\"> Has the issue been resolved?</span>\r\n <div class=\"mt-3 d-flex justify-content-between\">\r\n <button class=\"btn btn-outline w-45\" (click)=\"replyYesforIssue('yes')\">\r\n Yes\r\n </button>\r\n <button class=\"btn w-45\"\r\n [ngClass]=\"repliedIssue === 'No' ? 'bg-light-primary text-primary':'btn-outline'\"\r\n (click)=\"enableNoforIssue('No')\"> No </button>\r\n </div>\r\n <div class=\"mt-5\" *ngIf=\"repliedIssue === 'No'\">\r\n <div class=\"mb-3 mt-3\">\r\n <span>*When we can call back ? </span>\r\n <input [(ngModel)]=\"hibernationDays\" class=\"w-100 mt-3\" type=\"text\" (keypress)=\"omit_special_char($event)\">\r\n </div>\r\n <div class=\"mb-3 mt-5\">\r\n <span>comments</span>\r\n <textarea class=\"w-100 mt-3\" [(ngModel)]=\"comment\"\r\n placeholder=\"Enter your comments...\"></textarea>\r\n </div>\r\n <button class=\"btn btn-primary w-100 mt-3\"\r\n (click)=\"replyNoforIssue('No')\">Submit</button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Issue has been <b><span\r\n *ngIf=\"obj.statusCheckReply==='No'\">not</span> resolved.</b>\r\n \r\n </div>\r\n <div class=\"textupdates fw-bold-400\" *ngIf=\"obj.statusCheckReply==='No'\"> It\r\n takes {{obj?.hibernationDays}} more days to resolve.</div>\r\n </div>\r\n <!-- <div *ngIf=\"obj.actionType == 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for the Update.\r\n <span\r\n *ngIf=\"\">The ticket will be closed when the data is processed.</span></div>\r\n </div> -->\r\n\r\n </div>\r\n <!-- defaultInfra start -->\r\n <div *ngIf=\"obj.actionType ==='defaultInfra'\" class=\"investigation fw-bold-400\">We\r\n have not received data from your store. We are currently investigating the issue\r\n </div>\r\n\r\n <!-- <div *ngIf=\"selectedIssue === ''&&ticketInfo.ticketDetails.issueStatus !== 'identified' && (gs.userAccess | async)?.manage_tickets_isEdit\"\r\n class=\"investigation fw-semibold mt-2\">\r\n Kindly choose the option below that corresponds to the issue you are\r\n experiencing in the store.\r\n <ul class=\"list-unstyled px-4\">\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Internet Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> <span class=\"px-3\">Internet Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Camera Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\"\r\n viewBox=\"0 0 24 20\" fill=\"none\">\r\n <path\r\n d=\"M23 17C23 17.5304 22.7893 18.0391 22.4142 18.4142C22.0391 18.7893 21.5304 19 21 19H3C2.46957 19 1.96086 18.7893 1.58579 18.4142C1.21071 18.0391 1 17.5304 1 17V6C1 5.46957 1.21071 4.96086 1.58579 4.58579C1.96086 4.21071 2.46957 4 3 4H7L9 1H15L17 4H21C21.5304 4 22.0391 4.21071 22.4142 4.58579C22.7893 4.96086 23 5.46957 23 6V17Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 15C14.2091 15 16 13.2091 16 11C16 8.79086 14.2091 7 12 7C9.79086 7 8 8.79086 8 11C8 13.2091 9.79086 15 12 15Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> <span class=\"px-3\">Camera Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('System Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"14\"\r\n viewBox=\"0 0 20 14\" fill=\"none\">\r\n <path\r\n d=\"M12 2V9H2V2H12ZM2 0C0.896875 0 0 0.896875 0 2V9C0 10.1031 0.896875 11 2 11H5.66563L5.33125 12H3C2.44688 12 2 12.4469 2 13C2 13.5531 2.44688 14 3 14H11C11.5531 14 12 13.5531 12 13C12 12.4469 11.5531 12 11 12H8.66562L8.33125 11H12C13.1031 11 14 10.1031 14 9V2C14 0.896875 13.1031 0 12 0H2ZM16.5 0C15.6719 0 15 0.671875 15 1.5V12.5C15 13.3281 15.6719 14 16.5 14H18.5C19.3281 14 20 13.3281 20 12.5V1.5C20 0.671875 19.3281 0 18.5 0H16.5ZM17 2H18C18.275 2 18.5 2.225 18.5 2.5C18.5 2.775 18.275 3 18 3H17C16.725 3 16.5 2.775 16.5 2.5C16.5 2.225 16.725 2 17 2ZM16.5 4.5C16.5 4.225 16.725 4 17 4H18C18.275 4 18.5 4.225 18.5 4.5C18.5 4.775 18.275 5 18 5H17C16.725 5 16.5 4.775 16.5 4.5ZM17.5 9.5C17.7652 9.5 18.0196 9.60536 18.2071 9.79289C18.3946 9.98043 18.5 10.2348 18.5 10.5C18.5 10.7652 18.3946 11.0196 18.2071 11.2071C18.0196 11.3946 17.7652 11.5 17.5 11.5C17.2348 11.5 16.9804 11.3946 16.7929 11.2071C16.6054 11.0196 16.5 10.7652 16.5 10.5C16.5 10.2348 16.6054 9.98043 16.7929 9.79289C16.9804 9.60536 17.2348 9.5 17.5 9.5Z\"\r\n fill=\"#475467\" />\r\n </svg> <span class=\"px-3\">System Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Others')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\"\r\n viewBox=\"0 0 22 22\" fill=\"none\">\r\n <path\r\n d=\"M8.09 8C8.3251 7.33167 8.78915 6.76811 9.39995 6.40913C10.0108 6.05016 10.7289 5.91894 11.4272 6.03871C12.1255 6.15849 12.7588 6.52152 13.2151 7.06353C13.6713 7.60553 13.9211 8.29152 13.92 9C13.92 11 10.92 12 10.92 12M11 16H11.01M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> <span class=\"px-3\">Others</span>\r\n </li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"selectedIssue !== ''&&ticketInfo.ticketDetails.issueStatus !=='identified' \"\r\n class=\"\">\r\n <div class=\"openedissue d-flex justify-content-between align-items-center\">\r\n <span class=\"profile-label fw-semibold\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> {{selectedIssue}}\r\n </span>\r\n <div (click)=\"choosenIssue('')\" class=\"maincard-content bg-white px-3 py-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path\r\n d=\"M12.8327 6.99935H1.16602M1.16602 6.99935L6.99935 12.8327M1.16602 6.99935L6.99935 1.16602\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Internet Issues'||selectedIssue === 'Camera Issues'||selectedIssue === 'System Issues' \" class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\">\r\n <div class=\"maincard-label fw-semibold py-2\"> Please select the relevant problem facing from the following </div>\r\n <div *ngFor=\"let issue of secondaryIssues;let index = index\" class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4\" \r\n (click)=\"toggleCheckbox(index)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span> \r\n <span class=\"headingtext\">{{issue.name}}</span> \r\n <span class=\"w-300px\" [ngbTooltip]=\"tooltipContent\" triggers=\"mouseenter:mouseleave\" placement=\"left\">\r\n <svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n \r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-content\" >\r\n <ul>\r\n <li *ngFor=\"let tooltipItem of issue?.toolTips\">{{ tooltipItem?.name }}</li>\r\n </ul>\r\n </div>\r\n </ng-template>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"checkbox\" [checked]=\"issue.checked\" class=\"p-0\">\r\n </div>\r\n </div>\r\n \r\n \r\n \r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Others'\" class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\">\r\n <div class=\"maincard-label fw-semibold py-2\"> Please select the relevant problem facing from the following </div>\r\n <div *ngFor=\"let others of othersIssue;let i = index\" class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4\" \r\n (click)=\"toggleRadiobox(others)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span> \r\n <span class=\"headingtext\">{{others.name}}</span> \r\n <span><svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"radio\" name=\"radioGroup{{i}}\" [value]=\"others.name\" [(ngModel)]=\"selectedOption\" class=\"p-0\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <button class=\"btn btn-primary w-100\" (click)=\"submitData()\">\r\n Submit\r\n </button>\r\n </div>\r\n </div> -->\r\n <!-- defaultInfra end -->\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <!-- Tango code end -->\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"viewTicketLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!viewTicketLoading && viewTicketNodata\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n \r\n <div *ngIf=\"ticketInfo?.status && selectedTab === 'dataMismatch'\" class=\"col-sm-6\">\r\n <div class=\"maincard-label fw-bold d-flex justify-content-between mb-10\">\r\n <span><img src='./assets/tango/Images/ticket.svg'><span\r\n class=\"mx-2\">{{ticketInfo?.ticketId}}</span></span>\r\n <span [ngClass]=\"ticketInfo.status === 'closed' ? 'badge-light-success' :(ticketInfo.status === 'inprogress' ? 'badge-light-primary':'badge-light-warning')\" class=\"badge badge-light-primary\">{{ticketInfo?.status | titlecase}}</span>\r\n </div>\r\n <div *ngFor=\"let obj of viewTicketData;let i=index\" class=\"\">\r\n <!-- User code start -->\r\n <div *ngIf=\"obj.actionBy === 'User'\" class=\"d-flex mb-5 ms-5\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\"\r\n class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <img class=\"msgprofile\" src=\"./assets/tango/Images/userProfile.svg\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\">\r\n <div class=\"d-flex mb-3\">\r\n <span\r\n class=\"headingtext text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <span *ngIf=\"obj.actionType === 'final-upload'\" class=\"profile-label font-bold-400\">User has re-initiated the Ticket </span>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'final-upload'\">\r\n <div *ngIf=\"obj.attachments[0].fileName\" class=\"textupdates1 d-flex align-content-center fw-semibold mt-3\">\r\n <img class=\"me-3 w-40px h-40px\" src=\"./assets/tango/Images/document.svg\">\r\n <span class=\"cursor-pointer mt-2\" (click)=\"downloadUrl(obj.attachments[0].signedUrl)\">\r\n {{obj.attachments[0].fileName}}\r\n <!-- <br><span class=\"timingtext fw-bold-400\">720 KB</span> -->\r\n </span>\r\n </div>\r\n \r\n <span class=\"timingtext pe-3 pt-5 fw-bold-400\">\"{{obj?.description}}\"</span> \r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'Created'\">\r\n <div *ngIf=\"obj.attachments[0].fileName\" class=\"textupdates1 d-flex align-content-center fw-semibold mt-3\">\r\n <img class=\"me-3 w-40px h-40px\" src=\"./assets/tango/Images/document.svg\">\r\n <span class=\"cursor-pointer mt-2\" (click)=\"downloadUrl(obj.attachments[0].signedUrl)\">\r\n {{obj.attachments[0].fileName}}\r\n <!-- <br><span class=\"timingtext fw-bold-400\">720 KB</span> -->\r\n </span>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-5 fw-bold-400\">\"{{obj?.description}}\"</span>\r\n </div>\r\n <!-- defaultInfra start -->\r\n <div *ngIf=\"obj.actionType === 'Created' && ticketInfo.issueType\" class=\"contenttext fw-bold-400 mt-5\"> <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Raised <span *ngIf=\"ticketInfo.issueType ==='lowcount'\"\r\n class=\"timingtext fw-semibold text-primary1\">Low Count Issue</span> <span *ngIf=\"ticketInfo.issueType ==='highcount'\"\r\n class=\"timingtext fw-semibold text-primary1\">High Count Issue</span> in \r\n <span class=\"timingtext fw-semibold text-primary1\">{{ticketInfo.basicDetails.storeId}}</span>\r\n </span></div>\r\n <!-- defaultInfra end -->\r\n </div>\r\n \r\n </div> \r\n\r\n <!-- User code end -->\r\n <!-- Tango code start -->\r\n <div *ngIf=\"obj.actionBy === 'Tango'\" class=\"d-flex mb-5 ms-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <div class=\"symbol symbol-35px symbol-circle\" *ngIf=\"obj?.IdentifiedBy&&obj?.IdentifiedBy!==''&&obj?.IdentifiedBy!=='Tango'\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{obj?.IdentifiedBy?.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <img *ngIf=\"!obj?.IdentifiedBy||obj?.IdentifiedBy===''||obj?.IdentifiedBy==='Tango'\" class=\"msgprofile1\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n \r\n <div class=\"py-3 pt-0\">\r\n <div class=\"d-flex mb-3\" >\r\n <span class=\"headingtext fw-bold text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext fw-bold-400 px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <div class=\"mb-3\">\r\n <span *ngIf=\"obj.actionType === 'final-upload'\" class=\"profile-label fw-bold-400\">tango has replied to the\r\n issue</span>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'dataRecived'\">\r\n <span class=\"timingtext pe-3 pt-5 fw-bold-400\">Updated the status <span class=\"text-primary1\">Inprogress -> Closed</span></span>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'final-upload'\">\r\n <div *ngIf=\"obj.attachments[0].fileName\" class=\"textupdates1 d-flex align-content-center fw-semibold mt-3\">\r\n <img class=\"me-3 w-40px h-40px\" src=\"./assets/tango/Images/document.svg\">\r\n <span class=\"cursor-pointer mt-2\" (click)=\"downloadUrl(obj.attachments[0].signedUrl)\">\r\n {{obj.attachments[0].fileName}}\r\n <!-- <br><span class=\"timingtext fw-bold-400\">720 KB</span> -->\r\n </span>\r\n </div>\r\n <div class=\"mt-3\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">\"{{obj?.description}}\"</span>\r\n </div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-5 fw-bold-400\">Updated the status <span class=\"text-primary1\">Open -> Inprogress</span></span>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'Created'\">\r\n <div *ngIf=\"obj.attachments[0].fileName\" class=\"textupdates1 d-flex align-content-center fw-semibold mt-3\">\r\n <img class=\"me-3 w-40px h-40px\" src=\"./assets/tango/Images/document.svg\">\r\n <span class=\"cursor-pointer mt-2\" (click)=\"downloadUrl(obj.attachments[0].signedUrl)\">\r\n {{obj.attachments[0].fileName}}\r\n <!-- <br><span class=\"timingtext fw-bold-400\">720 KB</span> -->\r\n </span>\r\n </div>\r\n <div class=\"mt-3\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">\"{{obj?.description}}\"</span>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <!-- defaultInfra start -->\r\n <div *ngIf=\"obj.actionType === 'Created' && ticketInfo.issueType\" class=\"contenttext fw-bold-400\"> <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Raised <span *ngIf=\"ticketInfo.issueType ==='lowcount'\"\r\n class=\"timingtext fw-semibold text-primary1\">Low Count Issue</span> <span *ngIf=\"ticketInfo.issueType ==='highcount'\"\r\n class=\"timingtext fw-semibold text-primary1\">High Count Issue</span> in \r\n <span class=\"timingtext fw-semibold text-primary1\">{{ticketInfo.basicDetails.storeId}}</span>\r\n </span></div>\r\n <!-- defaultInfra end -->\r\n\r\n \r\n \r\n </div>\r\n </div>\r\n <!-- Tango code end -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".card-label{font-size:18px!important}.roundedcheck input[type=checkbox]{width:16px!important;height:16px!important;border-radius:10px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.roundedcheck input[type=checkbox]:checked{outline:none;background-color:var(--primary-50, #00A3FF)}.roundedcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid white;border-right:2px solid white;display:inline-block;width:4px;padding:5px 0 2px 3px;margin-top:2px}.issuecard{width:19%;border-radius:10px;border:1px solid var(--Gray-200, #EAECF0);padding:16px}.issuecard label{color:var(--Black, #101828);font-size:14px;line-height:20px}.issuecard.active{border:none!important;background:var(--Primary-25, #F6FCFF);box-shadow:0 0 0 4px #e9f7ff}.contenttext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.maincard-content{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.maincard-label{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}.profile{width:24px;height:24px;overflow:hidden;border-radius:200px}.fw-bold-700{font-weight:700!important}.fw-bold-400{font-weight:400!important}.msgprofile{width:48px!important;height:48px!important;border-radius:200px;overflow:hidden}.msgprofile1{width:35px!important;height:35px!important;border-radius:200px;overflow:hidden}.timingtext{color:var(--Gray-500, #667085);font-size:14px;line-height:18px}.profile-label{font-size:12px;color:var(--Gray-500, #667085);line-height:18px}.investigation{color:var(--Gray-500, #667085);font-size:16px;line-height:24px}.openedissue{border-radius:6px;background:var(--Gray-50, #F9FAFB);padding:8px 12px}.w-45{width:49%}input,textarea{padding:10px 14px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}::placeholder{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}textarea{min-height:128px}.textupdates{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.textupdates1{color:var(--Gray-700, #344054);font-size:14px;line-height:24px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.img-src{width:25%}.text-primary1{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }, { kind: "pipe", type: i3.CustomDateFormatPipe, name: "customDateFormat" }] });
1179
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: TicketInfraComponent, selector: "lib-ticket-infra", inputs: { selectedTab: "selectedTab" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span *ngIf=\"selectedTab === 'infra'\" class=\"card-label mb-2\">Infra Tickets</span>\r\n <span *ngIf=\"selectedTab === 'dataMismatch'\" class=\"card-label mb-2\">Data Mismatch</span>\r\n <span class=\"text-sub mb-2\">An overview of all the tickets for {{headerFilter?.date?.startDate |\r\n customDateFormat}} - {{headerFilter?.date?.endDate | customDateFormat}}</span>\r\n </h3>\r\n <div *ngIf=\"selectedTab==='infra'\" class=\"card-toolbar\">\r\n <div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"openDropdown($event)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Filter</span> </button>\r\n <div *ngIf=\"dropDown\" class=\"card py-1 w-200px position-absolute top-50px end-0 z-1\">\r\n <ul *ngFor=\"let item of dropdownItems\" class=\"list-unstyled\">\r\n <li [ngClass]=\"this.filteredIssue === item ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem(item)\">\r\n {{item}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_stores_isDownload && !storeListNodata\" type=\"button\"\r\n (click)=\"exportStoreListasXlsx()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span> </button>\r\n </div>\r\n <div *ngIf=\"selectedTab==='dataMismatch'\" class=\"card-toolbar\">\r\n <button type=\"button\" (click)=\"createTicket()\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap border-val\">\r\n <span class=\"ms-2\">Create Ticket</span> </button>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div class=\"d-flex justify-content-between mb-7\">\r\n <div *ngFor=\"let issue of ticketCard\" class=\"issuecard\">\r\n <div>\r\n <span class=\"title\">{{issue.count}}</span>\r\n </div>\r\n <span class=\"label fw-semibold\">{{issue.name}}</span>\r\n </div>\r\n </div>\r\n <div class=\"maincard-content\">\r\n <div class=\"row p-10\">\r\n <div class=\"col-sm-6 cursor-pointer \">\r\n <div *ngIf=\"!storeListLoading && !storeListNodata\">\r\n <div *ngFor=\"let data of ticketList;let index = index\" class=\"issuecard w-100 mb-4\"\r\n (click)=\"ShowTicket(data.ticketId,index)\"\r\n [ngClass]=\"(selectCard ? selectCard : 0) === index ? 'active' : ''\">\r\n <div class=\"maincard-label fw-bold d-flex justify-content-between mb-5\"><span> <img\r\n src='./assets/tango/Images/ticket.svg'>\r\n {{data.ticketId}}</span>\r\n <div class=\"contenttext d-flex justify-content-center align-items-center text-center fw-semibold px-3\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M10.6667 1.33398V4.00065M5.33333 1.33398V4.00065M2 6.66732H14M3.33333 2.66732H12.6667C13.403 2.66732 14 3.26427 14 4.00065V13.334C14 14.0704 13.403 14.6673 12.6667 14.6673H3.33333C2.59695 14.6673 2 14.0704 2 13.334V4.00065C2 3.26427 2.59695 2.66732 3.33333 2.66732Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-1\">{{(data?.Date)}}</span><span *ngIf=\"data.status === 'closed'\" class=\"contenttext fw-semibold pe-3\">- {{data?.issueClosedDate | date:'dd-MM-yyyy'}} </span></div> \r\n </div>\r\n <div *ngIf=\"data.issueType ==='highcount'\" class=\"mb-5 maincard-label fw-bold\">\r\n High Count\r\n </div>\r\n <div *ngIf=\"data.issueType ==='lowcount'\" class=\"mb-5 maincard-label fw-bold\">\r\n Low Count\r\n </div>\r\n <div *ngIf=\"data.description\" class=\"mb-5 contenttext fw-semibold\">\r\n {{data.description}}\r\n </div>\r\n <div *ngIf=\"data.issueStatus === 'notidentified'\" class=\"mb-5 contenttext fw-semibold\">\r\n We have not received data from your store. We are currently investigating the issue.\r\n </div>\r\n <div *ngIf=\"data.issueStatus ==='identified'\" class=\"mb-5 contenttext fw-semibold\">Store is\r\n currently encountering a <span class=\"fw-bold-700\">{{data.primaryIssue}}</span> which is\r\n <span *ngFor=\"let secondary of data.secondaryIssue; let last = last\"\r\n class=\"fw-bold-700\">{{secondary?.name}}<ng-container *ngIf=\"!last\"> ,</ng-container>\r\n </span>.\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"profile d-flex align-items-centre justify-content-centre\">\r\n <img src=\"./assets/tango/Images/userProfile.svg\" alt=\"\">\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <span *ngIf=\"data?.ticketType === 'refreshticket'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"14\"\r\n viewBox=\"0 0 17 14\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M5.94602 4.98881L2.66602 6.33881L2.00602 6.07881L0.666016 2.83881L1.58602 2.45881L2.39602 4.40881C2.93977 3.04801 3.92872 1.91169 5.20145 1.18532C6.47419 0.458951 7.95554 0.185426 9.40375 0.409387C10.852 0.633349 12.1815 1.34157 13.1754 2.41846C14.1692 3.49535 14.7687 4.87732 14.876 6.33881H13.876C13.7616 5.09008 13.2224 3.91836 12.3484 3.01919C11.4743 2.12003 10.3184 1.54781 9.0734 1.39804C7.82842 1.24826 6.56973 1.53 5.50739 2.19622C4.44505 2.86244 3.64332 3.87284 3.23602 5.05881L5.55602 4.05881L5.94602 4.98881ZM14.806 7.66881L16.146 10.8988L15.226 11.3388L14.406 9.33881C13.858 10.7049 12.8618 11.8442 11.581 12.5696C10.3001 13.295 8.81077 13.5634 7.35728 13.3309C5.9038 13.0983 4.57255 12.3786 3.582 11.2898C2.59145 10.2009 2.00046 8.80775 1.90602 7.33881H2.90602V6.83881C2.90882 8.12627 3.36402 9.3718 4.19203 10.3577C5.02005 11.3436 6.16821 12.0071 7.43584 12.2322C8.70346 12.4574 10.0099 12.2299 11.1268 11.5895C12.2437 10.9491 13.1 9.93655 13.546 8.72881L11.296 9.65881L10.906 8.73881L14.156 7.38881L14.806 7.66881Z\"\r\n fill=\"#98A2B3\" />\r\n <path\r\n d=\"M8.40625 7.54004C8.95853 7.54004 9.40625 7.09232 9.40625 6.54004C9.40625 5.98775 8.95853 5.54004 8.40625 5.54004C7.85397 5.54004 7.40625 5.98775 7.40625 6.54004C7.40625 7.09232 7.85397 7.54004 8.40625 7.54004Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n </span>\r\n <span class=\"contenttext fw-semibold px-3\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M14 10C14 10.3536 13.8595 10.6928 13.6095 10.9428C13.3594 11.1929 13.0203 11.3333 12.6667 11.3333H4.66667L2 14V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H12.6667C13.0203 2 13.3594 2.14048 13.6095 2.39052C13.8595 2.64057 14 2.97971 14 3.33333V10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-1\">{{data.comments}}</span> comments </span>\r\n <span class=\"badge\"\r\n [ngClass]=\"data.status === 'closed' ? 'badge-light-success' :(data.status === 'inprogress' ? 'badge-light-primary':'badge-light-warning')\">{{data.status | titlecase}}</span>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"ticketInfo?.status && selectedTab === 'infra'\" class=\"col-sm-6\">\r\n <div>\r\n <div class=\"maincard-label fw-bold d-flex justify-content-between mb-10\">\r\n <span><img src='./assets/tango/Images/ticket.svg'><span\r\n class=\"mx-2\">{{ticketInfo?.ticketId}}</span></span>\r\n <span [ngClass]=\"ticketInfo.status === 'closed' ? 'badge-light-success' :(ticketInfo.status === 'inprogress' ? 'badge-light-primary':'badge-light-warning')\" class=\"badge badge-light-primary\">{{ticketInfo?.status | titlecase}}</span>\r\n </div>\r\n <div *ngIf=\"selectedIssue === ''&&ticketInfo?.ticketDetails?.issueStatus !== 'identified'&&ticketInfo?.status!=='closed'&&(gs.userAccess | async)?.manage_tickets_isEdit&&userType==='client'||ticketInfo?.status!=='closed'&&ticketInfo?.ticketDetails?.ticketType==='refreshticket'&&ticketInfo?.ticketDetails?.refreshTicketStatus==='notidentified'&&(gs.userAccess | async)?.manage_tickets_isEdit&&userType==='client'\"\r\n class=\"investigation fw-semibold mt-2\">\r\n Kindly choose the option below that corresponds to the issue you are\r\n experiencing in the store.\r\n <ul class=\"list-unstyled px-4\">\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Internet Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> <span class=\"px-3\">Internet Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Camera Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M23 17C23 17.5304 22.7893 18.0391 22.4142 18.4142C22.0391 18.7893 21.5304 19 21 19H3C2.46957 19 1.96086 18.7893 1.58579 18.4142C1.21071 18.0391 1 17.5304 1 17V6C1 5.46957 1.21071 4.96086 1.58579 4.58579C1.96086 4.21071 2.46957 4 3 4H7L9 1H15L17 4H21C21.5304 4 22.0391 4.21071 22.4142 4.58579C22.7893 4.96086 23 5.46957 23 6V17Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 15C14.2091 15 16 13.2091 16 11C16 8.79086 14.2091 7 12 7C9.79086 7 8 8.79086 8 11C8 13.2091 9.79086 15 12 15Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> <span class=\"px-3\">Camera Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('System Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"14\" viewBox=\"0 0 20 14\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 2V9H2V2H12ZM2 0C0.896875 0 0 0.896875 0 2V9C0 10.1031 0.896875 11 2 11H5.66563L5.33125 12H3C2.44688 12 2 12.4469 2 13C2 13.5531 2.44688 14 3 14H11C11.5531 14 12 13.5531 12 13C12 12.4469 11.5531 12 11 12H8.66562L8.33125 11H12C13.1031 11 14 10.1031 14 9V2C14 0.896875 13.1031 0 12 0H2ZM16.5 0C15.6719 0 15 0.671875 15 1.5V12.5C15 13.3281 15.6719 14 16.5 14H18.5C19.3281 14 20 13.3281 20 12.5V1.5C20 0.671875 19.3281 0 18.5 0H16.5ZM17 2H18C18.275 2 18.5 2.225 18.5 2.5C18.5 2.775 18.275 3 18 3H17C16.725 3 16.5 2.775 16.5 2.5C16.5 2.225 16.725 2 17 2ZM16.5 4.5C16.5 4.225 16.725 4 17 4H18C18.275 4 18.5 4.225 18.5 4.5C18.5 4.775 18.275 5 18 5H17C16.725 5 16.5 4.775 16.5 4.5ZM17.5 9.5C17.7652 9.5 18.0196 9.60536 18.2071 9.79289C18.3946 9.98043 18.5 10.2348 18.5 10.5C18.5 10.7652 18.3946 11.0196 18.2071 11.2071C18.0196 11.3946 17.7652 11.5 17.5 11.5C17.2348 11.5 16.9804 11.3946 16.7929 11.2071C16.6054 11.0196 16.5 10.7652 16.5 10.5C16.5 10.2348 16.6054 9.98043 16.7929 9.79289C16.9804 9.60536 17.2348 9.5 17.5 9.5Z\"\r\n fill=\"#475467\" />\r\n </svg> <span class=\"px-3\">System Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Others')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.09 8C8.3251 7.33167 8.78915 6.76811 9.39995 6.40913C10.0108 6.05016 10.7289 5.91894 11.4272 6.03871C12.1255 6.15849 12.7588 6.52152 13.2151 7.06353C13.6713 7.60553 13.9211 8.29152 13.92 9C13.92 11 10.92 12 10.92 12M11 16H11.01M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> <span class=\"px-3\">Others</span>\r\n </li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"selectedIssue !== ''&&ticketInfo?.ticketDetails?.issueStatus !=='identified'&&ticketInfo?.status!=='closed'&&userType==='client'\"\r\n class=\"\">\r\n <div class=\"openedissue d-flex justify-content-between align-items-center\">\r\n <span class=\"profile-label fw-semibold\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> {{selectedIssue}}\r\n </span>\r\n <div (click)=\"choosenIssue('')\" class=\"maincard-content bg-white px-3 py-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12.8327 6.99935H1.16602M1.16602 6.99935L6.99935 12.8327M1.16602 6.99935L6.99935 1.16602\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Internet Issues'||selectedIssue === 'Camera Issues'&&showcamIssue||selectedIssue === 'System Issues' \"\r\n class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\">\r\n <div class=\"maincard-label fw-semibold py-2\"> Please select the relevant problem facing\r\n from the following </div>\r\n <div *ngFor=\"let issue of secondaryIssues;let index = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4\"\r\n (click)=\"toggleCheckbox(index)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{issue.name}}</span>\r\n <span class=\"w-300px\" [ngbTooltip]=\"tooltipContent\"\r\n triggers=\"mouseenter:mouseleave\" placement=\"left\">\r\n <svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <!-- Define tooltip content -->\r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-content\">\r\n <ul>\r\n <li *ngFor=\"let tooltipItem of issue?.toolTips\">{{ tooltipItem?.name }}\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-template>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"checkbox\" [checked]=\"issue.checked\" class=\"p-0\">\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Others'\" class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\">\r\n <div class=\"maincard-label fw-semibold py-2\"> Please select the relevant problem facing\r\n from the following </div>\r\n <div *ngFor=\"let others of othersIssue;let i = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4\"\r\n (click)=\"toggleRadiobox(others)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{others.name}}</span>\r\n <span><svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"radio\" name=\"radioGroup{{i}}\" [value]=\"others.name\"\r\n [(ngModel)]=\"selectedOption\" class=\"p-0\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\"\r\n *ngIf=\"selectedIssue === 'Camera Issues'&&!showcamIssue&&cameraListImages.length>0\">\r\n <div class=\"maincard-label fw-semibold py-2\">\r\n Please make sure all of your surveillance cameras are functioning and verify the\r\n footage you have. </div>\r\n <div class=\"row\">\r\n <div class=\"col-sm-6\" *ngFor=\"let item of cameraListImages;let i = index\">\r\n <span class=\"camera fw-bold mt-2\">{{item?.cameraName?item?.cameraName:\"--\"}}</span>\r\n <div\r\n class=\"d-flex align-items-centre justify-content-centre rounded-3 overflow-hidden mt-3\">\r\n <img class=\"w-100\"\r\n [src]=\"item?.thumbnailImage?item?.thumbnailImage:'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvcmV8ZW58MHx8MHx8fDA%3D'\">\r\n <!-- <img class=\"w-100\" src='https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvcmV8ZW58MHx8MHx8fDA%3D'> -->\r\n\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-5\">\r\n <button (click)=\"cameraSelection(i,'working')\" type=\"button\"\r\n class=\"btn btn-default btn-outline w-50 me-2\"\r\n [ngClass]=\"item.cameraNumber==='working'?'text-primary bg-light-primary':''\">\r\n Working\r\n </button>\r\n <button (click)=\"cameraSelection(i,'notworking')\" type=\"button\"\r\n class=\"btn btn-default btn-outline w-50 ms-2\"\r\n [ngClass]=\"item.cameraNumber==='notworking'?'text-danger bg-light-danger':''\">\r\n Not Working\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <button *ngIf=\"!showcamIssue\" class=\"btn btn-primary w-100 mt-6\"\r\n (click)=\"updateCamStatus()\">Proceed</button>\r\n </div>\r\n <div class=\"mt-3 mb-3\">\r\n <button *ngIf=\"showcamIssue\" class=\"btn btn-primary w-100\" (click)=\"submitData()\">\r\n Submit\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngFor=\"let obj of viewTicketData;let i=index\">\r\n <!-- User code start -->\r\n <div *ngIf=\"obj.actionBy === 'User'\" class=\"d-flex ms-5\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\"\r\n class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <img class=\"msgprofile\" src=\"./assets/tango/Images/userProfile.svg\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\">\r\n <div class=\"d-flex mb-3\">\r\n <span\r\n class=\"headingtext text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <span class=\"profile-label font-bold-400\">User has replied </span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Issue has been <b><span\r\n *ngIf=\"obj.statusCheckReply==='No'\">not</span> resolved.</b>\r\n\r\n </div>\r\n <div class=\"textupdates fw-bold-400\" *ngIf=\"obj.statusCheckReply==='No'\"> It\r\n takes {{obj?.hibernationDays}} more days to resolve.</div>\r\n </div>\r\n\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-semibold mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div\r\n *ngIf=\"res.primaryIssue ==='Camera Issues'&&notworkingCamaralist.length>0\">\r\n <div class=\"row\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3 my-3\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n </div>\r\n <span>The above camera streaming are not working </span>\r\n </div>\r\n <div class=\"mt-3\" *ngIf=\"res?.secondaryIssue.length>0\">\r\n <span class=\"investigation fw-bold-400\">The following are the relevant\r\n problem facing</span>\r\n <ul class=\"profile-label fw-bold-400 mt-3\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">{{obj?.comment}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- <div *ngIf=\"selectedIssue === ''\" class=\"profile-label fw-semibold mt-2\">\r\n Kindly choose the option below that corresponds to the issue you are\r\n experiencing in the store.\r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- User code end -->\r\n <!-- Tango code start -->\r\n <div *ngIf=\"obj.actionBy === 'Tango' || obj.actionBy === 'automated'\" class=\"d-flex mb-5 ms-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <img class=\"msgprofile\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div class=\"d-flex mb-3\">\r\n <span\r\n class=\"headingtext text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <div class=\"mb-3\">\r\n <span class=\"profile-label fw-bold-400\" (click)=\"tangoReply()\">tango has replied\r\n to the issue</span>\r\n <div *ngIf=\"obj.actionType === 'dataRecived'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for your assistance. We\r\n have received the data from your Store.\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckMonitor'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for the update. We\u2019ll\r\n get back after the buffer time you provided.\r\n </div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">{{obj?.comment}}</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='stepsToResolve'\" class=\"mt-3\">\r\n <span class=\"textupdates fw-bold-400\">Please follow the below steps to\r\n resolve the above issue</span>\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"mt-5\">\r\n <span class=\"headingtext fw-semibold\">{{res.primaryIssue}}</span>\r\n <ul class=\"mt-3 profile-label fw-bold-400\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-semibold mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div\r\n *ngIf=\"res.primaryIssue ==='Camera Issues'&&notworkingCamaralist.length>0\">\r\n <div class=\"row\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n </div>\r\n <span>The above camera streaming are not working </span>\r\n </div>\r\n <div class=\"mt-3\" *ngIf=\"res?.secondaryIssue.length>0\">\r\n <span class=\"investigation fw-bold-400\">The following are the\r\n relevant\r\n problem facing</span>\r\n <ul class=\"profile-label fw-bold-400 mt-3\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">{{obj?.comment}}</span>\r\n\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='statusCheck' && isGreaterThan5_30Hours\"\r\n class=\"issuecard w-100 mt-3\">\r\n <span class=\"maincard-label\"> Has the issue been resolved?</span>\r\n <div class=\"mt-3 d-flex justify-content-between\">\r\n <button class=\"btn btn-outline w-45\" (click)=\"replyYesforIssue('yes')\">\r\n Yes\r\n </button>\r\n <button class=\"btn w-45\"\r\n [ngClass]=\"repliedIssue === 'No' ? 'bg-light-primary text-primary':'btn-outline'\"\r\n (click)=\"enableNoforIssue('No')\"> No </button>\r\n </div>\r\n <div class=\"mt-5\" *ngIf=\"repliedIssue === 'No'\">\r\n <div class=\"mb-3 mt-3\">\r\n <span>*When we can call back ? </span>\r\n <input [(ngModel)]=\"hibernationDays\" class=\"w-100 mt-3\" type=\"text\" (keypress)=\"omit_special_char($event)\">\r\n </div>\r\n <div class=\"mb-3 mt-5\">\r\n <span>comments</span>\r\n <textarea class=\"w-100 mt-3\" [(ngModel)]=\"comment\"\r\n placeholder=\"Enter your comments...\"></textarea>\r\n </div>\r\n <button class=\"btn btn-primary w-100 mt-3\"\r\n (click)=\"replyNoforIssue('No')\">Submit</button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Issue has been <b><span\r\n *ngIf=\"obj.statusCheckReply==='No'\">not</span> resolved.</b>\r\n \r\n </div>\r\n <div class=\"textupdates fw-bold-400\" *ngIf=\"obj.statusCheckReply==='No'\"> It\r\n takes {{obj?.hibernationDays}} more days to resolve.</div>\r\n </div>\r\n <!-- <div *ngIf=\"obj.actionType == 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for the Update.\r\n <span\r\n *ngIf=\"\">The ticket will be closed when the data is processed.</span></div>\r\n </div> -->\r\n\r\n </div>\r\n <!-- defaultInfra start -->\r\n <div *ngIf=\"obj.actionType ==='defaultInfra'\" class=\"investigation fw-bold-400\">We\r\n have not received data from your store. We are currently investigating the issue\r\n </div>\r\n\r\n <!-- <div *ngIf=\"selectedIssue === ''&&ticketInfo.ticketDetails.issueStatus !== 'identified' && (gs.userAccess | async)?.manage_tickets_isEdit\"\r\n class=\"investigation fw-semibold mt-2\">\r\n Kindly choose the option below that corresponds to the issue you are\r\n experiencing in the store.\r\n <ul class=\"list-unstyled px-4\">\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Internet Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> <span class=\"px-3\">Internet Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Camera Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\"\r\n viewBox=\"0 0 24 20\" fill=\"none\">\r\n <path\r\n d=\"M23 17C23 17.5304 22.7893 18.0391 22.4142 18.4142C22.0391 18.7893 21.5304 19 21 19H3C2.46957 19 1.96086 18.7893 1.58579 18.4142C1.21071 18.0391 1 17.5304 1 17V6C1 5.46957 1.21071 4.96086 1.58579 4.58579C1.96086 4.21071 2.46957 4 3 4H7L9 1H15L17 4H21C21.5304 4 22.0391 4.21071 22.4142 4.58579C22.7893 4.96086 23 5.46957 23 6V17Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 15C14.2091 15 16 13.2091 16 11C16 8.79086 14.2091 7 12 7C9.79086 7 8 8.79086 8 11C8 13.2091 9.79086 15 12 15Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> <span class=\"px-3\">Camera Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('System Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"14\"\r\n viewBox=\"0 0 20 14\" fill=\"none\">\r\n <path\r\n d=\"M12 2V9H2V2H12ZM2 0C0.896875 0 0 0.896875 0 2V9C0 10.1031 0.896875 11 2 11H5.66563L5.33125 12H3C2.44688 12 2 12.4469 2 13C2 13.5531 2.44688 14 3 14H11C11.5531 14 12 13.5531 12 13C12 12.4469 11.5531 12 11 12H8.66562L8.33125 11H12C13.1031 11 14 10.1031 14 9V2C14 0.896875 13.1031 0 12 0H2ZM16.5 0C15.6719 0 15 0.671875 15 1.5V12.5C15 13.3281 15.6719 14 16.5 14H18.5C19.3281 14 20 13.3281 20 12.5V1.5C20 0.671875 19.3281 0 18.5 0H16.5ZM17 2H18C18.275 2 18.5 2.225 18.5 2.5C18.5 2.775 18.275 3 18 3H17C16.725 3 16.5 2.775 16.5 2.5C16.5 2.225 16.725 2 17 2ZM16.5 4.5C16.5 4.225 16.725 4 17 4H18C18.275 4 18.5 4.225 18.5 4.5C18.5 4.775 18.275 5 18 5H17C16.725 5 16.5 4.775 16.5 4.5ZM17.5 9.5C17.7652 9.5 18.0196 9.60536 18.2071 9.79289C18.3946 9.98043 18.5 10.2348 18.5 10.5C18.5 10.7652 18.3946 11.0196 18.2071 11.2071C18.0196 11.3946 17.7652 11.5 17.5 11.5C17.2348 11.5 16.9804 11.3946 16.7929 11.2071C16.6054 11.0196 16.5 10.7652 16.5 10.5C16.5 10.2348 16.6054 9.98043 16.7929 9.79289C16.9804 9.60536 17.2348 9.5 17.5 9.5Z\"\r\n fill=\"#475467\" />\r\n </svg> <span class=\"px-3\">System Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Others')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\"\r\n viewBox=\"0 0 22 22\" fill=\"none\">\r\n <path\r\n d=\"M8.09 8C8.3251 7.33167 8.78915 6.76811 9.39995 6.40913C10.0108 6.05016 10.7289 5.91894 11.4272 6.03871C12.1255 6.15849 12.7588 6.52152 13.2151 7.06353C13.6713 7.60553 13.9211 8.29152 13.92 9C13.92 11 10.92 12 10.92 12M11 16H11.01M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> <span class=\"px-3\">Others</span>\r\n </li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"selectedIssue !== ''&&ticketInfo.ticketDetails.issueStatus !=='identified' \"\r\n class=\"\">\r\n <div class=\"openedissue d-flex justify-content-between align-items-center\">\r\n <span class=\"profile-label fw-semibold\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> {{selectedIssue}}\r\n </span>\r\n <div (click)=\"choosenIssue('')\" class=\"maincard-content bg-white px-3 py-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path\r\n d=\"M12.8327 6.99935H1.16602M1.16602 6.99935L6.99935 12.8327M1.16602 6.99935L6.99935 1.16602\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Internet Issues'||selectedIssue === 'Camera Issues'||selectedIssue === 'System Issues' \" class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\">\r\n <div class=\"maincard-label fw-semibold py-2\"> Please select the relevant problem facing from the following </div>\r\n <div *ngFor=\"let issue of secondaryIssues;let index = index\" class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4\" \r\n (click)=\"toggleCheckbox(index)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span> \r\n <span class=\"headingtext\">{{issue.name}}</span> \r\n <span class=\"w-300px\" [ngbTooltip]=\"tooltipContent\" triggers=\"mouseenter:mouseleave\" placement=\"left\">\r\n <svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n \r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-content\" >\r\n <ul>\r\n <li *ngFor=\"let tooltipItem of issue?.toolTips\">{{ tooltipItem?.name }}</li>\r\n </ul>\r\n </div>\r\n </ng-template>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"checkbox\" [checked]=\"issue.checked\" class=\"p-0\">\r\n </div>\r\n </div>\r\n \r\n \r\n \r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Others'\" class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\">\r\n <div class=\"maincard-label fw-semibold py-2\"> Please select the relevant problem facing from the following </div>\r\n <div *ngFor=\"let others of othersIssue;let i = index\" class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4\" \r\n (click)=\"toggleRadiobox(others)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span> \r\n <span class=\"headingtext\">{{others.name}}</span> \r\n <span><svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"radio\" name=\"radioGroup{{i}}\" [value]=\"others.name\" [(ngModel)]=\"selectedOption\" class=\"p-0\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <button class=\"btn btn-primary w-100\" (click)=\"submitData()\">\r\n Submit\r\n </button>\r\n </div>\r\n </div> -->\r\n <!-- defaultInfra end -->\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <!-- Tango code end -->\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n <!-- <ng-container *ngIf=\"viewTicketLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!viewTicketLoading && viewTicketNodata\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n </div>\r\n \r\n <div *ngIf=\"ticketInfo?.status && selectedTab === 'dataMismatch'\" class=\"col-sm-6\">\r\n <div class=\"maincard-label fw-bold d-flex justify-content-between mb-10\">\r\n <span><img src='./assets/tango/Images/ticket.svg'><span\r\n class=\"mx-2\">{{ticketInfo?.ticketId}}</span></span>\r\n <span [ngClass]=\"ticketInfo.status === 'closed' ? 'badge-light-success' :(ticketInfo.status === 'inprogress' ? 'badge-light-primary':'badge-light-warning')\" class=\"badge badge-light-primary\">{{ticketInfo?.status | titlecase}}</span>\r\n </div>\r\n <div *ngFor=\"let obj of viewTicketData;let i=index\" class=\"\">\r\n <!-- User code start -->\r\n <div *ngIf=\"obj.actionBy === 'User'\" class=\"d-flex mb-5 ms-5\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\"\r\n class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <img class=\"msgprofile\" src=\"./assets/tango/Images/userProfile.svg\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\">\r\n <div class=\"d-flex mb-3\">\r\n <span\r\n class=\"headingtext text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <span *ngIf=\"obj.actionType === 'final-upload'\" class=\"profile-label font-bold-400\">User has re-initiated the Ticket </span>\r\n </div>\r\n <div class=\"mt-2 text-break\" *ngIf=\"obj.actionType === 'final-upload'\">\r\n <div *ngIf=\"obj.attachments[0].fileName\" class=\"textupdates1 d-flex align-content-center fw-semibold mt-3\">\r\n <img class=\"me-3 w-40px h-40px\" src=\"./assets/tango/Images/document.svg\">\r\n <span class=\"cursor-pointer mt-2\" (click)=\"downloadUrl(obj.attachments[0].signedUrl)\">\r\n {{obj.attachments[0].fileName}}\r\n <!-- <br><span class=\"timingtext fw-bold-400\">720 KB</span> -->\r\n </span>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-5 fw-bold-400\">\"{{obj?.description}}\"</span> \r\n </div>\r\n <div class=\"mt-2 text-break\" *ngIf=\"obj.actionType === 'Created'\">\r\n <div *ngIf=\"obj.attachments[0].fileName\" class=\"textupdates1 d-flex align-content-center fw-semibold mt-3\">\r\n <img class=\"me-3 w-40px h-40px\" src=\"./assets/tango/Images/document.svg\">\r\n <span class=\"cursor-pointer mt-2\" (click)=\"downloadUrl(obj.attachments[0].signedUrl)\">\r\n {{obj.attachments[0].fileName}}\r\n <!-- <br><span class=\"timingtext fw-bold-400\">720 KB</span> -->\r\n </span>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-5 fw-bold-400\">\"{{obj?.description}}\"</span>\r\n </div>\r\n <!-- defaultInfra start -->\r\n <div *ngIf=\"obj.actionType === 'Created' && ticketInfo.issueType\" class=\"contenttext fw-bold-400 mt-5\"> <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Raised <span *ngIf=\"ticketInfo.issueType ==='lowcount'\"\r\n class=\"timingtext fw-semibold text-primary1\">Low Count Issue</span> <span *ngIf=\"ticketInfo.issueType ==='highcount'\"\r\n class=\"timingtext fw-semibold text-primary1\">High Count Issue</span> in \r\n <span class=\"timingtext fw-semibold text-primary1\">{{ticketInfo.basicDetails.storeId}}</span>\r\n </span></div>\r\n <!-- defaultInfra end -->\r\n </div>\r\n \r\n </div> \r\n\r\n <!-- User code end -->\r\n <!-- Tango code start -->\r\n <div *ngIf=\"obj.actionBy === 'Tango'\" class=\"d-flex mb-5 ms-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <div class=\"symbol symbol-35px symbol-circle\" *ngIf=\"obj?.IdentifiedBy&&obj?.IdentifiedBy!==''&&obj?.IdentifiedBy!=='Tango'\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{obj?.IdentifiedBy?.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <img *ngIf=\"!obj?.IdentifiedBy||obj?.IdentifiedBy===''||obj?.IdentifiedBy==='Tango'\" class=\"msgprofile1\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n \r\n <div class=\"py-3 pt-0\">\r\n <div class=\"d-flex mb-3\" >\r\n <span class=\"headingtext fw-bold text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext fw-bold-400 px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <div class=\"mb-3\">\r\n <span *ngIf=\"obj.actionType === 'final-upload'\" class=\"profile-label fw-bold-400\">tango has replied to the\r\n issue</span>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'dataRecived'\">\r\n <span class=\"timingtext pe-3 pt-5 fw-bold-400\">Updated the status <span class=\"text-primary1\">Inprogress -> Closed</span></span>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'final-upload'\">\r\n <div *ngIf=\"obj.attachments[0].fileName\" class=\"textupdates1 d-flex align-content-center fw-semibold mt-3\">\r\n <img class=\"me-3 w-40px h-40px\" src=\"./assets/tango/Images/document.svg\">\r\n <span class=\"cursor-pointer mt-2\" (click)=\"downloadUrl(obj.attachments[0].signedUrl)\">\r\n {{obj.attachments[0].fileName}}\r\n <!-- <br><span class=\"timingtext fw-bold-400\">720 KB</span> -->\r\n </span>\r\n </div>\r\n <div class=\"mt-3 text-break\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">\"{{obj?.description}}\"</span>\r\n </div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-5 fw-bold-400\">Updated the status <span class=\"text-primary1\">Open -> Inprogress</span></span>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'Created'\">\r\n <div *ngIf=\"obj.attachments[0].fileName\" class=\"textupdates1 d-flex align-content-center fw-semibold mt-3\">\r\n <img class=\"me-3 w-40px h-40px\" src=\"./assets/tango/Images/document.svg\">\r\n <span class=\"cursor-pointer mt-2\" (click)=\"downloadUrl(obj.attachments[0].signedUrl)\">\r\n {{obj.attachments[0].fileName}}\r\n <!-- <br><span class=\"timingtext fw-bold-400\">720 KB</span> -->\r\n </span>\r\n </div>\r\n <div class=\"mt-3 text-break\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">\"{{obj?.description}}\"</span>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <!-- defaultInfra start -->\r\n <div *ngIf=\"obj.actionType === 'Created' && ticketInfo.issueType\" class=\"contenttext fw-bold-400\"> <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Raised <span *ngIf=\"ticketInfo.issueType ==='lowcount'\"\r\n class=\"timingtext fw-semibold text-primary1\">Low Count Issue</span> <span *ngIf=\"ticketInfo.issueType ==='highcount'\"\r\n class=\"timingtext fw-semibold text-primary1\">High Count Issue</span> in \r\n <span class=\"timingtext fw-semibold text-primary1\">{{ticketInfo.basicDetails.storeId}}</span>\r\n </span></div>\r\n <!-- defaultInfra end -->\r\n\r\n \r\n \r\n </div>\r\n </div>\r\n <!-- Tango code end -->\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"storeListLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"storeListNodata\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".card-label{font-size:18px!important}.roundedcheck input[type=checkbox]{width:16px!important;height:16px!important;border-radius:10px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.roundedcheck input[type=checkbox]:checked{outline:none;background-color:var(--primary-50, #00A3FF)}.roundedcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid white;border-right:2px solid white;display:inline-block;width:4px;padding:5px 0 2px 3px;margin-top:2px}.issuecard{width:19%;border-radius:10px;border:1px solid var(--Gray-200, #EAECF0);padding:16px}.issuecard label{color:var(--Black, #101828);font-size:14px;line-height:20px}.issuecard.active{border:none!important;background:var(--Primary-25, #F6FCFF);box-shadow:0 0 0 4px #e9f7ff}.contenttext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.maincard-content{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.maincard-label{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}.profile{width:24px;height:24px;overflow:hidden;border-radius:200px}.fw-bold-700{font-weight:700!important}.fw-bold-400{font-weight:400!important}.msgprofile{width:48px!important;height:48px!important;border-radius:200px;overflow:hidden}.msgprofile1{width:35px!important;height:35px!important;border-radius:200px;overflow:hidden}.timingtext{color:var(--Gray-500, #667085);font-size:14px;line-height:18px}.profile-label{font-size:12px;color:var(--Gray-500, #667085);line-height:18px}.investigation{color:var(--Gray-500, #667085);font-size:16px;line-height:24px}.openedissue{border-radius:6px;background:var(--Gray-50, #F9FAFB);padding:8px 12px}.w-45{width:49%}input,textarea{padding:10px 14px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}::placeholder{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}textarea{min-height:128px}.textupdates{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.textupdates1{color:var(--Gray-700, #344054);font-size:14px;line-height:24px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.img-src{width:25%}.text-primary1{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }, { kind: "pipe", type: i3.CustomDateFormatPipe, name: "customDateFormat" }] });
1174
1180
  }
1175
1181
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TicketInfraComponent, decorators: [{
1176
1182
  type: Component,
1177
- args: [{ selector: 'lib-ticket-infra', template: "<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span *ngIf=\"selectedTab === 'infra'\" class=\"card-label mb-2\">Infra Tickets</span>\r\n <span *ngIf=\"selectedTab === 'dataMismatch'\" class=\"card-label mb-2\">Data Mismatch</span>\r\n <span class=\"text-sub mb-2\">An overview of all the tickets for {{headerFilter?.date?.startDate |\r\n customDateFormat}} - {{headerFilter?.date?.endDate | customDateFormat}}</span>\r\n </h3>\r\n <div *ngIf=\"selectedTab==='infra'\" class=\"card-toolbar\">\r\n <div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"openDropdown($event)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Filter</span> </button>\r\n <div *ngIf=\"dropDown\" class=\"card py-1 w-200px position-absolute top-50px end-0 z-1\">\r\n <ul *ngFor=\"let item of dropdownItems\" class=\"list-unstyled\">\r\n <li [ngClass]=\"this.filteredIssue === item ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem(item)\">\r\n {{item}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_stores_isDownload && !storeListNodata\" type=\"button\"\r\n (click)=\"exportStoreListasXlsx()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span> </button>\r\n </div>\r\n <div *ngIf=\"selectedTab==='dataMismatch'\" class=\"card-toolbar\">\r\n <button type=\"button\" (click)=\"createTicket()\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap border-val\">\r\n <span class=\"ms-2\">Create Ticket</span> </button>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div class=\"d-flex justify-content-between mb-7\">\r\n <div *ngFor=\"let issue of ticketCard\" class=\"issuecard\">\r\n <div>\r\n <span class=\"title\">{{issue.count}}</span>\r\n </div>\r\n <span class=\"label fw-semibold\">{{issue.name}}</span>\r\n </div>\r\n </div>\r\n <div class=\"maincard-content\">\r\n <div class=\"row p-10\">\r\n <div class=\"col-sm-6 cursor-pointer \">\r\n <div *ngIf=\"!storeListLoading && !storeListNodata\">\r\n <div *ngFor=\"let data of ticketList;let index = index\" class=\"issuecard w-100 mb-4\"\r\n (click)=\"ShowTicket(data.ticketId,index)\"\r\n [ngClass]=\"(selectCard ? selectCard : 0) === index ? 'active' : ''\">\r\n <div class=\"maincard-label fw-bold d-flex justify-content-between mb-5\"><span> <img\r\n src='./assets/tango/Images/ticket.svg'>\r\n {{data.ticketId}}</span>\r\n <span class=\"badge\"\r\n [ngClass]=\"data.status === 'closed' ? 'badge-light-success' :(data.status === 'inprogress' ? 'badge-light-primary':'badge-light-warning')\">{{data.status | titlecase}}</span>\r\n </div>\r\n <div *ngIf=\"data.issueType ==='highcount'\" class=\"mb-5 maincard-label fw-bold\">\r\n High Count\r\n </div>\r\n <div *ngIf=\"data.issueType ==='lowcount'\" class=\"mb-5 maincard-label fw-bold\">\r\n Low Count\r\n </div>\r\n <div *ngIf=\"data.description\" class=\"mb-5 contenttext fw-semibold\">\r\n {{data.description}}\r\n </div>\r\n <div *ngIf=\"data.issueStatus === 'notidentified'\" class=\"mb-5 contenttext fw-semibold\">\r\n We have not received data from your store. We are currently investigating the issue.\r\n </div>\r\n <div *ngIf=\"data.issueStatus ==='identified'\" class=\"mb-5 contenttext fw-semibold\">Store is\r\n currently encountering a <span class=\"fw-bold-700\">{{data.primaryIssue}}</span> which is\r\n <span *ngFor=\"let secondary of data.secondaryIssue; let last = last\"\r\n class=\"fw-bold-700\">{{secondary?.name}}<ng-container *ngIf=\"!last\"> ,</ng-container>\r\n </span>.\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"profile d-flex align-items-centre justify-content-centre\">\r\n <img src=\"./assets/tango/Images/userProfile.svg\" alt=\"\">\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <span *ngIf=\"data?.ticketType === 'refreshticket'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"14\"\r\n viewBox=\"0 0 17 14\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M5.94602 4.98881L2.66602 6.33881L2.00602 6.07881L0.666016 2.83881L1.58602 2.45881L2.39602 4.40881C2.93977 3.04801 3.92872 1.91169 5.20145 1.18532C6.47419 0.458951 7.95554 0.185426 9.40375 0.409387C10.852 0.633349 12.1815 1.34157 13.1754 2.41846C14.1692 3.49535 14.7687 4.87732 14.876 6.33881H13.876C13.7616 5.09008 13.2224 3.91836 12.3484 3.01919C11.4743 2.12003 10.3184 1.54781 9.0734 1.39804C7.82842 1.24826 6.56973 1.53 5.50739 2.19622C4.44505 2.86244 3.64332 3.87284 3.23602 5.05881L5.55602 4.05881L5.94602 4.98881ZM14.806 7.66881L16.146 10.8988L15.226 11.3388L14.406 9.33881C13.858 10.7049 12.8618 11.8442 11.581 12.5696C10.3001 13.295 8.81077 13.5634 7.35728 13.3309C5.9038 13.0983 4.57255 12.3786 3.582 11.2898C2.59145 10.2009 2.00046 8.80775 1.90602 7.33881H2.90602V6.83881C2.90882 8.12627 3.36402 9.3718 4.19203 10.3577C5.02005 11.3436 6.16821 12.0071 7.43584 12.2322C8.70346 12.4574 10.0099 12.2299 11.1268 11.5895C12.2437 10.9491 13.1 9.93655 13.546 8.72881L11.296 9.65881L10.906 8.73881L14.156 7.38881L14.806 7.66881Z\"\r\n fill=\"#98A2B3\" />\r\n <path\r\n d=\"M8.40625 7.54004C8.95853 7.54004 9.40625 7.09232 9.40625 6.54004C9.40625 5.98775 8.95853 5.54004 8.40625 5.54004C7.85397 5.54004 7.40625 5.98775 7.40625 6.54004C7.40625 7.09232 7.85397 7.54004 8.40625 7.54004Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n </span>\r\n <span class=\"contenttext fw-semibold px-3\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M14 10C14 10.3536 13.8595 10.6928 13.6095 10.9428C13.3594 11.1929 13.0203 11.3333 12.6667 11.3333H4.66667L2 14V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H12.6667C13.0203 2 13.3594 2.14048 13.6095 2.39052C13.8595 2.64057 14 2.97971 14 3.33333V10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-1\">{{data.comments}}</span> comments </span>\r\n <span *ngIf=\"data.status !== 'closed'\" class=\"contenttext fw-semibold px-3\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M10.6667 1.33398V4.00065M5.33333 1.33398V4.00065M2 6.66732H14M3.33333 2.66732H12.6667C13.403 2.66732 14 3.26427 14 4.00065V13.334C14 14.0704 13.403 14.6673 12.6667 14.6673H3.33333C2.59695 14.6673 2 14.0704 2 13.334V4.00065C2 3.26427 2.59695 2.66732 3.33333 2.66732Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-1\">{{data.Date}}</span></span>\r\n <span *ngIf=\"data.status === 'closed'\" class=\"contenttext fw-semibold px-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M10.6667 1.33398V4.00065M5.33333 1.33398V4.00065M2 6.66732H14M3.33333 2.66732H12.6667C13.403 2.66732 14 3.26427 14 4.00065V13.334C14 14.0704 13.403 14.6673 12.6667 14.6673H3.33333C2.59695 14.6673 2 14.0704 2 13.334V4.00065C2 3.26427 2.59695 2.66732 3.33333 2.66732Z\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg> {{data?.issueClosedDate | date:'dd-MM-yyyy' }} </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"storeListLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"storeListNodata\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"ticketInfo?.status && selectedTab === 'infra'\" class=\"col-sm-6\">\r\n <div>\r\n <div class=\"maincard-label fw-bold d-flex justify-content-between mb-10\">\r\n <span><img src='./assets/tango/Images/ticket.svg'><span\r\n class=\"mx-2\">{{ticketInfo?.ticketId}}</span></span>\r\n <span [ngClass]=\"ticketInfo.status === 'closed' ? 'badge-light-success' :(ticketInfo.status === 'inprogress' ? 'badge-light-primary':'badge-light-warning')\" class=\"badge badge-light-primary\">{{ticketInfo?.status | titlecase}}</span>\r\n </div>\r\n <div *ngIf=\"selectedIssue === ''&&ticketInfo?.ticketDetails?.issueStatus !== 'identified'&&ticketInfo?.status!=='closed'&&(gs.userAccess | async)?.manage_tickets_isEdit&&userType==='client'||ticketInfo?.ticketDetails?.ticketType==='refreshticket'&&ticketInfo?.ticketDetails?.refreshTicketStatus==='notidentified'&&(gs.userAccess | async)?.manage_tickets_isEdit&&userType==='client'\"\r\n class=\"investigation fw-semibold mt-2\">\r\n Kindly choose the option below that corresponds to the issue you are\r\n experiencing in the store.\r\n <ul class=\"list-unstyled px-4\">\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Internet Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> <span class=\"px-3\">Internet Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Camera Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M23 17C23 17.5304 22.7893 18.0391 22.4142 18.4142C22.0391 18.7893 21.5304 19 21 19H3C2.46957 19 1.96086 18.7893 1.58579 18.4142C1.21071 18.0391 1 17.5304 1 17V6C1 5.46957 1.21071 4.96086 1.58579 4.58579C1.96086 4.21071 2.46957 4 3 4H7L9 1H15L17 4H21C21.5304 4 22.0391 4.21071 22.4142 4.58579C22.7893 4.96086 23 5.46957 23 6V17Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 15C14.2091 15 16 13.2091 16 11C16 8.79086 14.2091 7 12 7C9.79086 7 8 8.79086 8 11C8 13.2091 9.79086 15 12 15Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> <span class=\"px-3\">Camera Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('System Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"14\" viewBox=\"0 0 20 14\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 2V9H2V2H12ZM2 0C0.896875 0 0 0.896875 0 2V9C0 10.1031 0.896875 11 2 11H5.66563L5.33125 12H3C2.44688 12 2 12.4469 2 13C2 13.5531 2.44688 14 3 14H11C11.5531 14 12 13.5531 12 13C12 12.4469 11.5531 12 11 12H8.66562L8.33125 11H12C13.1031 11 14 10.1031 14 9V2C14 0.896875 13.1031 0 12 0H2ZM16.5 0C15.6719 0 15 0.671875 15 1.5V12.5C15 13.3281 15.6719 14 16.5 14H18.5C19.3281 14 20 13.3281 20 12.5V1.5C20 0.671875 19.3281 0 18.5 0H16.5ZM17 2H18C18.275 2 18.5 2.225 18.5 2.5C18.5 2.775 18.275 3 18 3H17C16.725 3 16.5 2.775 16.5 2.5C16.5 2.225 16.725 2 17 2ZM16.5 4.5C16.5 4.225 16.725 4 17 4H18C18.275 4 18.5 4.225 18.5 4.5C18.5 4.775 18.275 5 18 5H17C16.725 5 16.5 4.775 16.5 4.5ZM17.5 9.5C17.7652 9.5 18.0196 9.60536 18.2071 9.79289C18.3946 9.98043 18.5 10.2348 18.5 10.5C18.5 10.7652 18.3946 11.0196 18.2071 11.2071C18.0196 11.3946 17.7652 11.5 17.5 11.5C17.2348 11.5 16.9804 11.3946 16.7929 11.2071C16.6054 11.0196 16.5 10.7652 16.5 10.5C16.5 10.2348 16.6054 9.98043 16.7929 9.79289C16.9804 9.60536 17.2348 9.5 17.5 9.5Z\"\r\n fill=\"#475467\" />\r\n </svg> <span class=\"px-3\">System Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Others')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.09 8C8.3251 7.33167 8.78915 6.76811 9.39995 6.40913C10.0108 6.05016 10.7289 5.91894 11.4272 6.03871C12.1255 6.15849 12.7588 6.52152 13.2151 7.06353C13.6713 7.60553 13.9211 8.29152 13.92 9C13.92 11 10.92 12 10.92 12M11 16H11.01M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> <span class=\"px-3\">Others</span>\r\n </li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"selectedIssue !== ''&&ticketInfo?.ticketDetails?.issueStatus !=='identified'&&ticketInfo?.status!=='closed'&&userType==='client'\"\r\n class=\"\">\r\n <div class=\"openedissue d-flex justify-content-between align-items-center\">\r\n <span class=\"profile-label fw-semibold\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> {{selectedIssue}}\r\n </span>\r\n <div (click)=\"choosenIssue('')\" class=\"maincard-content bg-white px-3 py-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12.8327 6.99935H1.16602M1.16602 6.99935L6.99935 12.8327M1.16602 6.99935L6.99935 1.16602\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Internet Issues'||selectedIssue === 'Camera Issues'&&showcamIssue||selectedIssue === 'System Issues' \"\r\n class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\">\r\n <div class=\"maincard-label fw-semibold py-2\"> Please select the relevant problem facing\r\n from the following </div>\r\n <div *ngFor=\"let issue of secondaryIssues;let index = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4\"\r\n (click)=\"toggleCheckbox(index)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{issue.name}}</span>\r\n <span class=\"w-300px\" [ngbTooltip]=\"tooltipContent\"\r\n triggers=\"mouseenter:mouseleave\" placement=\"left\">\r\n <svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <!-- Define tooltip content -->\r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-content\">\r\n <ul>\r\n <li *ngFor=\"let tooltipItem of issue?.toolTips\">{{ tooltipItem?.name }}\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-template>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"checkbox\" [checked]=\"issue.checked\" class=\"p-0\">\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Others'\" class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\">\r\n <div class=\"maincard-label fw-semibold py-2\"> Please select the relevant problem facing\r\n from the following </div>\r\n <div *ngFor=\"let others of othersIssue;let i = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4\"\r\n (click)=\"toggleRadiobox(others)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{others.name}}</span>\r\n <span><svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"radio\" name=\"radioGroup{{i}}\" [value]=\"others.name\"\r\n [(ngModel)]=\"selectedOption\" class=\"p-0\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\"\r\n *ngIf=\"selectedIssue === 'Camera Issues'&&!showcamIssue&&cameraListImages.length>0\">\r\n <div class=\"maincard-label fw-semibold py-2\">\r\n Please make sure all of your surveillance cameras are functioning and verify the\r\n footage you have. </div>\r\n <div class=\"row\">\r\n <div class=\"col-sm-6\" *ngFor=\"let item of cameraListImages;let i = index\">\r\n <span class=\"camera fw-bold mt-2\">{{item?.cameraName?item?.cameraName:\"--\"}}</span>\r\n <div\r\n class=\"d-flex align-items-centre justify-content-centre rounded-3 overflow-hidden mt-3\">\r\n <img class=\"w-100\"\r\n [src]=\"item?.thumbnailImage?item?.thumbnailImage:'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvcmV8ZW58MHx8MHx8fDA%3D'\">\r\n <!-- <img class=\"w-100\" src='https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvcmV8ZW58MHx8MHx8fDA%3D'> -->\r\n\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-5\">\r\n <button (click)=\"cameraSelection(i,'working')\" type=\"button\"\r\n class=\"btn btn-default btn-outline w-50 me-2\"\r\n [ngClass]=\"item.cameraNumber==='working'?'text-primary bg-light-primary':''\">\r\n Working\r\n </button>\r\n <button (click)=\"cameraSelection(i,'notworking')\" type=\"button\"\r\n class=\"btn btn-default btn-outline w-50 ms-2\"\r\n [ngClass]=\"item.cameraNumber==='notworking'?'text-danger bg-light-danger':''\">\r\n Not Working\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <button *ngIf=\"!showcamIssue\" class=\"btn btn-primary w-100 mt-6\"\r\n (click)=\"updateCamStatus()\">Proceed</button>\r\n </div>\r\n <div class=\"mt-3 mb-3\">\r\n <button *ngIf=\"showcamIssue\" class=\"btn btn-primary w-100\" (click)=\"submitData()\">\r\n Submit\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngFor=\"let obj of viewTicketData;let i=index\">\r\n <!-- User code start -->\r\n <div *ngIf=\"obj.actionBy === 'User'\" class=\"d-flex ms-5\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\"\r\n class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <img class=\"msgprofile\" src=\"./assets/tango/Images/userProfile.svg\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\">\r\n <div class=\"d-flex mb-3\">\r\n <span\r\n class=\"headingtext text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <span class=\"profile-label font-bold-400\">User has replied </span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Issue has been <b><span\r\n *ngIf=\"obj.statusCheckReply==='No'\">not</span> resolved.</b>\r\n\r\n </div>\r\n <div class=\"textupdates fw-bold-400\" *ngIf=\"obj.statusCheckReply==='No'\"> It\r\n takes {{obj?.hibernationDays}} more days to resolve.</div>\r\n </div>\r\n\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-semibold mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div\r\n *ngIf=\"res.primaryIssue ==='Camera Issues'&&notworkingCamaralist.length>0\">\r\n <div class=\"row\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3 my-3\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n </div>\r\n <span>The above camera streaming are not working </span>\r\n </div>\r\n <div class=\"mt-3\" *ngIf=\"res?.secondaryIssue.length>0\">\r\n <span class=\"investigation fw-bold-400\">The following are the relevant\r\n problem facing</span>\r\n <ul class=\"profile-label fw-bold-400 mt-3\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">{{obj?.comment}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- <div *ngIf=\"selectedIssue === ''\" class=\"profile-label fw-semibold mt-2\">\r\n Kindly choose the option below that corresponds to the issue you are\r\n experiencing in the store.\r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- User code end -->\r\n <!-- Tango code start -->\r\n <div *ngIf=\"obj.actionBy === 'Tango' || obj.actionBy === 'automated'\" class=\"d-flex mb-5 ms-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <img class=\"msgprofile\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div class=\"d-flex mb-3\">\r\n <span\r\n class=\"headingtext text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <div class=\"mb-3\">\r\n <span class=\"profile-label fw-bold-400\" (click)=\"tangoReply()\">tango has replied\r\n to the issue</span>\r\n <div *ngIf=\"obj.actionType === 'dataRecived'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for your assistance. We\r\n have received the data from your Store.\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckMonitor'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for the update. We\u2019ll\r\n get back after the buffer time you provided.\r\n </div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">{{obj?.comment}}</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='stepsToResolve'\" class=\"mt-3\">\r\n <span class=\"textupdates fw-bold-400\">Please follow the below steps to\r\n resolve the above issue</span>\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"mt-5\">\r\n <span class=\"headingtext fw-semibold\">{{res.primaryIssue}}</span>\r\n <ul class=\"mt-3 profile-label fw-bold-400\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-semibold mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div\r\n *ngIf=\"res.primaryIssue ==='Camera Issues'&&notworkingCamaralist.length>0\">\r\n <div class=\"row\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n </div>\r\n <span>The above camera streaming are not working </span>\r\n </div>\r\n <div class=\"mt-3\" *ngIf=\"res?.secondaryIssue.length>0\">\r\n <span class=\"investigation fw-bold-400\">The following are the\r\n relevant\r\n problem facing</span>\r\n <ul class=\"profile-label fw-bold-400 mt-3\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">{{obj?.comment}}</span>\r\n\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='statusCheck' && isGreaterThan5_30Hours\"\r\n class=\"issuecard w-100 mt-3\">\r\n <span class=\"maincard-label\"> Has the issue been resolved?</span>\r\n <div class=\"mt-3 d-flex justify-content-between\">\r\n <button class=\"btn btn-outline w-45\" (click)=\"replyYesforIssue('yes')\">\r\n Yes\r\n </button>\r\n <button class=\"btn w-45\"\r\n [ngClass]=\"repliedIssue === 'No' ? 'bg-light-primary text-primary':'btn-outline'\"\r\n (click)=\"enableNoforIssue('No')\"> No </button>\r\n </div>\r\n <div class=\"mt-5\" *ngIf=\"repliedIssue === 'No'\">\r\n <div class=\"mb-3 mt-3\">\r\n <span>*When we can call back ? </span>\r\n <input [(ngModel)]=\"hibernationDays\" class=\"w-100 mt-3\" type=\"text\" (keypress)=\"omit_special_char($event)\">\r\n </div>\r\n <div class=\"mb-3 mt-5\">\r\n <span>comments</span>\r\n <textarea class=\"w-100 mt-3\" [(ngModel)]=\"comment\"\r\n placeholder=\"Enter your comments...\"></textarea>\r\n </div>\r\n <button class=\"btn btn-primary w-100 mt-3\"\r\n (click)=\"replyNoforIssue('No')\">Submit</button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Issue has been <b><span\r\n *ngIf=\"obj.statusCheckReply==='No'\">not</span> resolved.</b>\r\n \r\n </div>\r\n <div class=\"textupdates fw-bold-400\" *ngIf=\"obj.statusCheckReply==='No'\"> It\r\n takes {{obj?.hibernationDays}} more days to resolve.</div>\r\n </div>\r\n <!-- <div *ngIf=\"obj.actionType == 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for the Update.\r\n <span\r\n *ngIf=\"\">The ticket will be closed when the data is processed.</span></div>\r\n </div> -->\r\n\r\n </div>\r\n <!-- defaultInfra start -->\r\n <div *ngIf=\"obj.actionType ==='defaultInfra'\" class=\"investigation fw-bold-400\">We\r\n have not received data from your store. We are currently investigating the issue\r\n </div>\r\n\r\n <!-- <div *ngIf=\"selectedIssue === ''&&ticketInfo.ticketDetails.issueStatus !== 'identified' && (gs.userAccess | async)?.manage_tickets_isEdit\"\r\n class=\"investigation fw-semibold mt-2\">\r\n Kindly choose the option below that corresponds to the issue you are\r\n experiencing in the store.\r\n <ul class=\"list-unstyled px-4\">\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Internet Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> <span class=\"px-3\">Internet Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Camera Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\"\r\n viewBox=\"0 0 24 20\" fill=\"none\">\r\n <path\r\n d=\"M23 17C23 17.5304 22.7893 18.0391 22.4142 18.4142C22.0391 18.7893 21.5304 19 21 19H3C2.46957 19 1.96086 18.7893 1.58579 18.4142C1.21071 18.0391 1 17.5304 1 17V6C1 5.46957 1.21071 4.96086 1.58579 4.58579C1.96086 4.21071 2.46957 4 3 4H7L9 1H15L17 4H21C21.5304 4 22.0391 4.21071 22.4142 4.58579C22.7893 4.96086 23 5.46957 23 6V17Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 15C14.2091 15 16 13.2091 16 11C16 8.79086 14.2091 7 12 7C9.79086 7 8 8.79086 8 11C8 13.2091 9.79086 15 12 15Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> <span class=\"px-3\">Camera Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('System Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"14\"\r\n viewBox=\"0 0 20 14\" fill=\"none\">\r\n <path\r\n d=\"M12 2V9H2V2H12ZM2 0C0.896875 0 0 0.896875 0 2V9C0 10.1031 0.896875 11 2 11H5.66563L5.33125 12H3C2.44688 12 2 12.4469 2 13C2 13.5531 2.44688 14 3 14H11C11.5531 14 12 13.5531 12 13C12 12.4469 11.5531 12 11 12H8.66562L8.33125 11H12C13.1031 11 14 10.1031 14 9V2C14 0.896875 13.1031 0 12 0H2ZM16.5 0C15.6719 0 15 0.671875 15 1.5V12.5C15 13.3281 15.6719 14 16.5 14H18.5C19.3281 14 20 13.3281 20 12.5V1.5C20 0.671875 19.3281 0 18.5 0H16.5ZM17 2H18C18.275 2 18.5 2.225 18.5 2.5C18.5 2.775 18.275 3 18 3H17C16.725 3 16.5 2.775 16.5 2.5C16.5 2.225 16.725 2 17 2ZM16.5 4.5C16.5 4.225 16.725 4 17 4H18C18.275 4 18.5 4.225 18.5 4.5C18.5 4.775 18.275 5 18 5H17C16.725 5 16.5 4.775 16.5 4.5ZM17.5 9.5C17.7652 9.5 18.0196 9.60536 18.2071 9.79289C18.3946 9.98043 18.5 10.2348 18.5 10.5C18.5 10.7652 18.3946 11.0196 18.2071 11.2071C18.0196 11.3946 17.7652 11.5 17.5 11.5C17.2348 11.5 16.9804 11.3946 16.7929 11.2071C16.6054 11.0196 16.5 10.7652 16.5 10.5C16.5 10.2348 16.6054 9.98043 16.7929 9.79289C16.9804 9.60536 17.2348 9.5 17.5 9.5Z\"\r\n fill=\"#475467\" />\r\n </svg> <span class=\"px-3\">System Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Others')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\"\r\n viewBox=\"0 0 22 22\" fill=\"none\">\r\n <path\r\n d=\"M8.09 8C8.3251 7.33167 8.78915 6.76811 9.39995 6.40913C10.0108 6.05016 10.7289 5.91894 11.4272 6.03871C12.1255 6.15849 12.7588 6.52152 13.2151 7.06353C13.6713 7.60553 13.9211 8.29152 13.92 9C13.92 11 10.92 12 10.92 12M11 16H11.01M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> <span class=\"px-3\">Others</span>\r\n </li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"selectedIssue !== ''&&ticketInfo.ticketDetails.issueStatus !=='identified' \"\r\n class=\"\">\r\n <div class=\"openedissue d-flex justify-content-between align-items-center\">\r\n <span class=\"profile-label fw-semibold\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> {{selectedIssue}}\r\n </span>\r\n <div (click)=\"choosenIssue('')\" class=\"maincard-content bg-white px-3 py-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path\r\n d=\"M12.8327 6.99935H1.16602M1.16602 6.99935L6.99935 12.8327M1.16602 6.99935L6.99935 1.16602\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Internet Issues'||selectedIssue === 'Camera Issues'||selectedIssue === 'System Issues' \" class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\">\r\n <div class=\"maincard-label fw-semibold py-2\"> Please select the relevant problem facing from the following </div>\r\n <div *ngFor=\"let issue of secondaryIssues;let index = index\" class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4\" \r\n (click)=\"toggleCheckbox(index)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span> \r\n <span class=\"headingtext\">{{issue.name}}</span> \r\n <span class=\"w-300px\" [ngbTooltip]=\"tooltipContent\" triggers=\"mouseenter:mouseleave\" placement=\"left\">\r\n <svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n \r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-content\" >\r\n <ul>\r\n <li *ngFor=\"let tooltipItem of issue?.toolTips\">{{ tooltipItem?.name }}</li>\r\n </ul>\r\n </div>\r\n </ng-template>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"checkbox\" [checked]=\"issue.checked\" class=\"p-0\">\r\n </div>\r\n </div>\r\n \r\n \r\n \r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Others'\" class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\">\r\n <div class=\"maincard-label fw-semibold py-2\"> Please select the relevant problem facing from the following </div>\r\n <div *ngFor=\"let others of othersIssue;let i = index\" class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4\" \r\n (click)=\"toggleRadiobox(others)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span> \r\n <span class=\"headingtext\">{{others.name}}</span> \r\n <span><svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"radio\" name=\"radioGroup{{i}}\" [value]=\"others.name\" [(ngModel)]=\"selectedOption\" class=\"p-0\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <button class=\"btn btn-primary w-100\" (click)=\"submitData()\">\r\n Submit\r\n </button>\r\n </div>\r\n </div> -->\r\n <!-- defaultInfra end -->\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <!-- Tango code end -->\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"viewTicketLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!viewTicketLoading && viewTicketNodata\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n \r\n <div *ngIf=\"ticketInfo?.status && selectedTab === 'dataMismatch'\" class=\"col-sm-6\">\r\n <div class=\"maincard-label fw-bold d-flex justify-content-between mb-10\">\r\n <span><img src='./assets/tango/Images/ticket.svg'><span\r\n class=\"mx-2\">{{ticketInfo?.ticketId}}</span></span>\r\n <span [ngClass]=\"ticketInfo.status === 'closed' ? 'badge-light-success' :(ticketInfo.status === 'inprogress' ? 'badge-light-primary':'badge-light-warning')\" class=\"badge badge-light-primary\">{{ticketInfo?.status | titlecase}}</span>\r\n </div>\r\n <div *ngFor=\"let obj of viewTicketData;let i=index\" class=\"\">\r\n <!-- User code start -->\r\n <div *ngIf=\"obj.actionBy === 'User'\" class=\"d-flex mb-5 ms-5\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\"\r\n class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <img class=\"msgprofile\" src=\"./assets/tango/Images/userProfile.svg\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\">\r\n <div class=\"d-flex mb-3\">\r\n <span\r\n class=\"headingtext text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <span *ngIf=\"obj.actionType === 'final-upload'\" class=\"profile-label font-bold-400\">User has re-initiated the Ticket </span>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'final-upload'\">\r\n <div *ngIf=\"obj.attachments[0].fileName\" class=\"textupdates1 d-flex align-content-center fw-semibold mt-3\">\r\n <img class=\"me-3 w-40px h-40px\" src=\"./assets/tango/Images/document.svg\">\r\n <span class=\"cursor-pointer mt-2\" (click)=\"downloadUrl(obj.attachments[0].signedUrl)\">\r\n {{obj.attachments[0].fileName}}\r\n <!-- <br><span class=\"timingtext fw-bold-400\">720 KB</span> -->\r\n </span>\r\n </div>\r\n \r\n <span class=\"timingtext pe-3 pt-5 fw-bold-400\">\"{{obj?.description}}\"</span> \r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'Created'\">\r\n <div *ngIf=\"obj.attachments[0].fileName\" class=\"textupdates1 d-flex align-content-center fw-semibold mt-3\">\r\n <img class=\"me-3 w-40px h-40px\" src=\"./assets/tango/Images/document.svg\">\r\n <span class=\"cursor-pointer mt-2\" (click)=\"downloadUrl(obj.attachments[0].signedUrl)\">\r\n {{obj.attachments[0].fileName}}\r\n <!-- <br><span class=\"timingtext fw-bold-400\">720 KB</span> -->\r\n </span>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-5 fw-bold-400\">\"{{obj?.description}}\"</span>\r\n </div>\r\n <!-- defaultInfra start -->\r\n <div *ngIf=\"obj.actionType === 'Created' && ticketInfo.issueType\" class=\"contenttext fw-bold-400 mt-5\"> <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Raised <span *ngIf=\"ticketInfo.issueType ==='lowcount'\"\r\n class=\"timingtext fw-semibold text-primary1\">Low Count Issue</span> <span *ngIf=\"ticketInfo.issueType ==='highcount'\"\r\n class=\"timingtext fw-semibold text-primary1\">High Count Issue</span> in \r\n <span class=\"timingtext fw-semibold text-primary1\">{{ticketInfo.basicDetails.storeId}}</span>\r\n </span></div>\r\n <!-- defaultInfra end -->\r\n </div>\r\n \r\n </div> \r\n\r\n <!-- User code end -->\r\n <!-- Tango code start -->\r\n <div *ngIf=\"obj.actionBy === 'Tango'\" class=\"d-flex mb-5 ms-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <div class=\"symbol symbol-35px symbol-circle\" *ngIf=\"obj?.IdentifiedBy&&obj?.IdentifiedBy!==''&&obj?.IdentifiedBy!=='Tango'\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{obj?.IdentifiedBy?.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <img *ngIf=\"!obj?.IdentifiedBy||obj?.IdentifiedBy===''||obj?.IdentifiedBy==='Tango'\" class=\"msgprofile1\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n \r\n <div class=\"py-3 pt-0\">\r\n <div class=\"d-flex mb-3\" >\r\n <span class=\"headingtext fw-bold text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext fw-bold-400 px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <div class=\"mb-3\">\r\n <span *ngIf=\"obj.actionType === 'final-upload'\" class=\"profile-label fw-bold-400\">tango has replied to the\r\n issue</span>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'dataRecived'\">\r\n <span class=\"timingtext pe-3 pt-5 fw-bold-400\">Updated the status <span class=\"text-primary1\">Inprogress -> Closed</span></span>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'final-upload'\">\r\n <div *ngIf=\"obj.attachments[0].fileName\" class=\"textupdates1 d-flex align-content-center fw-semibold mt-3\">\r\n <img class=\"me-3 w-40px h-40px\" src=\"./assets/tango/Images/document.svg\">\r\n <span class=\"cursor-pointer mt-2\" (click)=\"downloadUrl(obj.attachments[0].signedUrl)\">\r\n {{obj.attachments[0].fileName}}\r\n <!-- <br><span class=\"timingtext fw-bold-400\">720 KB</span> -->\r\n </span>\r\n </div>\r\n <div class=\"mt-3\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">\"{{obj?.description}}\"</span>\r\n </div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-5 fw-bold-400\">Updated the status <span class=\"text-primary1\">Open -> Inprogress</span></span>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'Created'\">\r\n <div *ngIf=\"obj.attachments[0].fileName\" class=\"textupdates1 d-flex align-content-center fw-semibold mt-3\">\r\n <img class=\"me-3 w-40px h-40px\" src=\"./assets/tango/Images/document.svg\">\r\n <span class=\"cursor-pointer mt-2\" (click)=\"downloadUrl(obj.attachments[0].signedUrl)\">\r\n {{obj.attachments[0].fileName}}\r\n <!-- <br><span class=\"timingtext fw-bold-400\">720 KB</span> -->\r\n </span>\r\n </div>\r\n <div class=\"mt-3\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">\"{{obj?.description}}\"</span>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <!-- defaultInfra start -->\r\n <div *ngIf=\"obj.actionType === 'Created' && ticketInfo.issueType\" class=\"contenttext fw-bold-400\"> <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Raised <span *ngIf=\"ticketInfo.issueType ==='lowcount'\"\r\n class=\"timingtext fw-semibold text-primary1\">Low Count Issue</span> <span *ngIf=\"ticketInfo.issueType ==='highcount'\"\r\n class=\"timingtext fw-semibold text-primary1\">High Count Issue</span> in \r\n <span class=\"timingtext fw-semibold text-primary1\">{{ticketInfo.basicDetails.storeId}}</span>\r\n </span></div>\r\n <!-- defaultInfra end -->\r\n\r\n \r\n \r\n </div>\r\n </div>\r\n <!-- Tango code end -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".card-label{font-size:18px!important}.roundedcheck input[type=checkbox]{width:16px!important;height:16px!important;border-radius:10px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.roundedcheck input[type=checkbox]:checked{outline:none;background-color:var(--primary-50, #00A3FF)}.roundedcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid white;border-right:2px solid white;display:inline-block;width:4px;padding:5px 0 2px 3px;margin-top:2px}.issuecard{width:19%;border-radius:10px;border:1px solid var(--Gray-200, #EAECF0);padding:16px}.issuecard label{color:var(--Black, #101828);font-size:14px;line-height:20px}.issuecard.active{border:none!important;background:var(--Primary-25, #F6FCFF);box-shadow:0 0 0 4px #e9f7ff}.contenttext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.maincard-content{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.maincard-label{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}.profile{width:24px;height:24px;overflow:hidden;border-radius:200px}.fw-bold-700{font-weight:700!important}.fw-bold-400{font-weight:400!important}.msgprofile{width:48px!important;height:48px!important;border-radius:200px;overflow:hidden}.msgprofile1{width:35px!important;height:35px!important;border-radius:200px;overflow:hidden}.timingtext{color:var(--Gray-500, #667085);font-size:14px;line-height:18px}.profile-label{font-size:12px;color:var(--Gray-500, #667085);line-height:18px}.investigation{color:var(--Gray-500, #667085);font-size:16px;line-height:24px}.openedissue{border-radius:6px;background:var(--Gray-50, #F9FAFB);padding:8px 12px}.w-45{width:49%}input,textarea{padding:10px 14px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}::placeholder{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}textarea{min-height:128px}.textupdates{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.textupdates1{color:var(--Gray-700, #344054);font-size:14px;line-height:24px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.img-src{width:25%}.text-primary1{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500;line-height:20px}\n"] }]
1183
+ args: [{ selector: 'lib-ticket-infra', template: "<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span *ngIf=\"selectedTab === 'infra'\" class=\"card-label mb-2\">Infra Tickets</span>\r\n <span *ngIf=\"selectedTab === 'dataMismatch'\" class=\"card-label mb-2\">Data Mismatch</span>\r\n <span class=\"text-sub mb-2\">An overview of all the tickets for {{headerFilter?.date?.startDate |\r\n customDateFormat}} - {{headerFilter?.date?.endDate | customDateFormat}}</span>\r\n </h3>\r\n <div *ngIf=\"selectedTab==='infra'\" class=\"card-toolbar\">\r\n <div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"openDropdown($event)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Filter</span> </button>\r\n <div *ngIf=\"dropDown\" class=\"card py-1 w-200px position-absolute top-50px end-0 z-1\">\r\n <ul *ngFor=\"let item of dropdownItems\" class=\"list-unstyled\">\r\n <li [ngClass]=\"this.filteredIssue === item ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem(item)\">\r\n {{item}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_stores_isDownload && !storeListNodata\" type=\"button\"\r\n (click)=\"exportStoreListasXlsx()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span> </button>\r\n </div>\r\n <div *ngIf=\"selectedTab==='dataMismatch'\" class=\"card-toolbar\">\r\n <button type=\"button\" (click)=\"createTicket()\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap border-val\">\r\n <span class=\"ms-2\">Create Ticket</span> </button>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div class=\"d-flex justify-content-between mb-7\">\r\n <div *ngFor=\"let issue of ticketCard\" class=\"issuecard\">\r\n <div>\r\n <span class=\"title\">{{issue.count}}</span>\r\n </div>\r\n <span class=\"label fw-semibold\">{{issue.name}}</span>\r\n </div>\r\n </div>\r\n <div class=\"maincard-content\">\r\n <div class=\"row p-10\">\r\n <div class=\"col-sm-6 cursor-pointer \">\r\n <div *ngIf=\"!storeListLoading && !storeListNodata\">\r\n <div *ngFor=\"let data of ticketList;let index = index\" class=\"issuecard w-100 mb-4\"\r\n (click)=\"ShowTicket(data.ticketId,index)\"\r\n [ngClass]=\"(selectCard ? selectCard : 0) === index ? 'active' : ''\">\r\n <div class=\"maincard-label fw-bold d-flex justify-content-between mb-5\"><span> <img\r\n src='./assets/tango/Images/ticket.svg'>\r\n {{data.ticketId}}</span>\r\n <div class=\"contenttext d-flex justify-content-center align-items-center text-center fw-semibold px-3\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M10.6667 1.33398V4.00065M5.33333 1.33398V4.00065M2 6.66732H14M3.33333 2.66732H12.6667C13.403 2.66732 14 3.26427 14 4.00065V13.334C14 14.0704 13.403 14.6673 12.6667 14.6673H3.33333C2.59695 14.6673 2 14.0704 2 13.334V4.00065C2 3.26427 2.59695 2.66732 3.33333 2.66732Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-1\">{{(data?.Date)}}</span><span *ngIf=\"data.status === 'closed'\" class=\"contenttext fw-semibold pe-3\">- {{data?.issueClosedDate | date:'dd-MM-yyyy'}} </span></div> \r\n </div>\r\n <div *ngIf=\"data.issueType ==='highcount'\" class=\"mb-5 maincard-label fw-bold\">\r\n High Count\r\n </div>\r\n <div *ngIf=\"data.issueType ==='lowcount'\" class=\"mb-5 maincard-label fw-bold\">\r\n Low Count\r\n </div>\r\n <div *ngIf=\"data.description\" class=\"mb-5 contenttext fw-semibold\">\r\n {{data.description}}\r\n </div>\r\n <div *ngIf=\"data.issueStatus === 'notidentified'\" class=\"mb-5 contenttext fw-semibold\">\r\n We have not received data from your store. We are currently investigating the issue.\r\n </div>\r\n <div *ngIf=\"data.issueStatus ==='identified'\" class=\"mb-5 contenttext fw-semibold\">Store is\r\n currently encountering a <span class=\"fw-bold-700\">{{data.primaryIssue}}</span> which is\r\n <span *ngFor=\"let secondary of data.secondaryIssue; let last = last\"\r\n class=\"fw-bold-700\">{{secondary?.name}}<ng-container *ngIf=\"!last\"> ,</ng-container>\r\n </span>.\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"profile d-flex align-items-centre justify-content-centre\">\r\n <img src=\"./assets/tango/Images/userProfile.svg\" alt=\"\">\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <span *ngIf=\"data?.ticketType === 'refreshticket'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"14\"\r\n viewBox=\"0 0 17 14\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M5.94602 4.98881L2.66602 6.33881L2.00602 6.07881L0.666016 2.83881L1.58602 2.45881L2.39602 4.40881C2.93977 3.04801 3.92872 1.91169 5.20145 1.18532C6.47419 0.458951 7.95554 0.185426 9.40375 0.409387C10.852 0.633349 12.1815 1.34157 13.1754 2.41846C14.1692 3.49535 14.7687 4.87732 14.876 6.33881H13.876C13.7616 5.09008 13.2224 3.91836 12.3484 3.01919C11.4743 2.12003 10.3184 1.54781 9.0734 1.39804C7.82842 1.24826 6.56973 1.53 5.50739 2.19622C4.44505 2.86244 3.64332 3.87284 3.23602 5.05881L5.55602 4.05881L5.94602 4.98881ZM14.806 7.66881L16.146 10.8988L15.226 11.3388L14.406 9.33881C13.858 10.7049 12.8618 11.8442 11.581 12.5696C10.3001 13.295 8.81077 13.5634 7.35728 13.3309C5.9038 13.0983 4.57255 12.3786 3.582 11.2898C2.59145 10.2009 2.00046 8.80775 1.90602 7.33881H2.90602V6.83881C2.90882 8.12627 3.36402 9.3718 4.19203 10.3577C5.02005 11.3436 6.16821 12.0071 7.43584 12.2322C8.70346 12.4574 10.0099 12.2299 11.1268 11.5895C12.2437 10.9491 13.1 9.93655 13.546 8.72881L11.296 9.65881L10.906 8.73881L14.156 7.38881L14.806 7.66881Z\"\r\n fill=\"#98A2B3\" />\r\n <path\r\n d=\"M8.40625 7.54004C8.95853 7.54004 9.40625 7.09232 9.40625 6.54004C9.40625 5.98775 8.95853 5.54004 8.40625 5.54004C7.85397 5.54004 7.40625 5.98775 7.40625 6.54004C7.40625 7.09232 7.85397 7.54004 8.40625 7.54004Z\"\r\n fill=\"#98A2B3\" />\r\n </svg>\r\n </span>\r\n <span class=\"contenttext fw-semibold px-3\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M14 10C14 10.3536 13.8595 10.6928 13.6095 10.9428C13.3594 11.1929 13.0203 11.3333 12.6667 11.3333H4.66667L2 14V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H12.6667C13.0203 2 13.3594 2.14048 13.6095 2.39052C13.8595 2.64057 14 2.97971 14 3.33333V10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"mx-1\">{{data.comments}}</span> comments </span>\r\n <span class=\"badge\"\r\n [ngClass]=\"data.status === 'closed' ? 'badge-light-success' :(data.status === 'inprogress' ? 'badge-light-primary':'badge-light-warning')\">{{data.status | titlecase}}</span>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"ticketInfo?.status && selectedTab === 'infra'\" class=\"col-sm-6\">\r\n <div>\r\n <div class=\"maincard-label fw-bold d-flex justify-content-between mb-10\">\r\n <span><img src='./assets/tango/Images/ticket.svg'><span\r\n class=\"mx-2\">{{ticketInfo?.ticketId}}</span></span>\r\n <span [ngClass]=\"ticketInfo.status === 'closed' ? 'badge-light-success' :(ticketInfo.status === 'inprogress' ? 'badge-light-primary':'badge-light-warning')\" class=\"badge badge-light-primary\">{{ticketInfo?.status | titlecase}}</span>\r\n </div>\r\n <div *ngIf=\"selectedIssue === ''&&ticketInfo?.ticketDetails?.issueStatus !== 'identified'&&ticketInfo?.status!=='closed'&&(gs.userAccess | async)?.manage_tickets_isEdit&&userType==='client'||ticketInfo?.status!=='closed'&&ticketInfo?.ticketDetails?.ticketType==='refreshticket'&&ticketInfo?.ticketDetails?.refreshTicketStatus==='notidentified'&&(gs.userAccess | async)?.manage_tickets_isEdit&&userType==='client'\"\r\n class=\"investigation fw-semibold mt-2\">\r\n Kindly choose the option below that corresponds to the issue you are\r\n experiencing in the store.\r\n <ul class=\"list-unstyled px-4\">\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Internet Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> <span class=\"px-3\">Internet Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Camera Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M23 17C23 17.5304 22.7893 18.0391 22.4142 18.4142C22.0391 18.7893 21.5304 19 21 19H3C2.46957 19 1.96086 18.7893 1.58579 18.4142C1.21071 18.0391 1 17.5304 1 17V6C1 5.46957 1.21071 4.96086 1.58579 4.58579C1.96086 4.21071 2.46957 4 3 4H7L9 1H15L17 4H21C21.5304 4 22.0391 4.21071 22.4142 4.58579C22.7893 4.96086 23 5.46957 23 6V17Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 15C14.2091 15 16 13.2091 16 11C16 8.79086 14.2091 7 12 7C9.79086 7 8 8.79086 8 11C8 13.2091 9.79086 15 12 15Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> <span class=\"px-3\">Camera Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('System Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"14\" viewBox=\"0 0 20 14\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 2V9H2V2H12ZM2 0C0.896875 0 0 0.896875 0 2V9C0 10.1031 0.896875 11 2 11H5.66563L5.33125 12H3C2.44688 12 2 12.4469 2 13C2 13.5531 2.44688 14 3 14H11C11.5531 14 12 13.5531 12 13C12 12.4469 11.5531 12 11 12H8.66562L8.33125 11H12C13.1031 11 14 10.1031 14 9V2C14 0.896875 13.1031 0 12 0H2ZM16.5 0C15.6719 0 15 0.671875 15 1.5V12.5C15 13.3281 15.6719 14 16.5 14H18.5C19.3281 14 20 13.3281 20 12.5V1.5C20 0.671875 19.3281 0 18.5 0H16.5ZM17 2H18C18.275 2 18.5 2.225 18.5 2.5C18.5 2.775 18.275 3 18 3H17C16.725 3 16.5 2.775 16.5 2.5C16.5 2.225 16.725 2 17 2ZM16.5 4.5C16.5 4.225 16.725 4 17 4H18C18.275 4 18.5 4.225 18.5 4.5C18.5 4.775 18.275 5 18 5H17C16.725 5 16.5 4.775 16.5 4.5ZM17.5 9.5C17.7652 9.5 18.0196 9.60536 18.2071 9.79289C18.3946 9.98043 18.5 10.2348 18.5 10.5C18.5 10.7652 18.3946 11.0196 18.2071 11.2071C18.0196 11.3946 17.7652 11.5 17.5 11.5C17.2348 11.5 16.9804 11.3946 16.7929 11.2071C16.6054 11.0196 16.5 10.7652 16.5 10.5C16.5 10.2348 16.6054 9.98043 16.7929 9.79289C16.9804 9.60536 17.2348 9.5 17.5 9.5Z\"\r\n fill=\"#475467\" />\r\n </svg> <span class=\"px-3\">System Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Others')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.09 8C8.3251 7.33167 8.78915 6.76811 9.39995 6.40913C10.0108 6.05016 10.7289 5.91894 11.4272 6.03871C12.1255 6.15849 12.7588 6.52152 13.2151 7.06353C13.6713 7.60553 13.9211 8.29152 13.92 9C13.92 11 10.92 12 10.92 12M11 16H11.01M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> <span class=\"px-3\">Others</span>\r\n </li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"selectedIssue !== ''&&ticketInfo?.ticketDetails?.issueStatus !=='identified'&&ticketInfo?.status!=='closed'&&userType==='client'\"\r\n class=\"\">\r\n <div class=\"openedissue d-flex justify-content-between align-items-center\">\r\n <span class=\"profile-label fw-semibold\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> {{selectedIssue}}\r\n </span>\r\n <div (click)=\"choosenIssue('')\" class=\"maincard-content bg-white px-3 py-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12.8327 6.99935H1.16602M1.16602 6.99935L6.99935 12.8327M1.16602 6.99935L6.99935 1.16602\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Internet Issues'||selectedIssue === 'Camera Issues'&&showcamIssue||selectedIssue === 'System Issues' \"\r\n class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\">\r\n <div class=\"maincard-label fw-semibold py-2\"> Please select the relevant problem facing\r\n from the following </div>\r\n <div *ngFor=\"let issue of secondaryIssues;let index = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4\"\r\n (click)=\"toggleCheckbox(index)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{issue.name}}</span>\r\n <span class=\"w-300px\" [ngbTooltip]=\"tooltipContent\"\r\n triggers=\"mouseenter:mouseleave\" placement=\"left\">\r\n <svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <!-- Define tooltip content -->\r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-content\">\r\n <ul>\r\n <li *ngFor=\"let tooltipItem of issue?.toolTips\">{{ tooltipItem?.name }}\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-template>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"checkbox\" [checked]=\"issue.checked\" class=\"p-0\">\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Others'\" class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\">\r\n <div class=\"maincard-label fw-semibold py-2\"> Please select the relevant problem facing\r\n from the following </div>\r\n <div *ngFor=\"let others of othersIssue;let i = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4\"\r\n (click)=\"toggleRadiobox(others)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{others.name}}</span>\r\n <span><svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"radio\" name=\"radioGroup{{i}}\" [value]=\"others.name\"\r\n [(ngModel)]=\"selectedOption\" class=\"p-0\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\"\r\n *ngIf=\"selectedIssue === 'Camera Issues'&&!showcamIssue&&cameraListImages.length>0\">\r\n <div class=\"maincard-label fw-semibold py-2\">\r\n Please make sure all of your surveillance cameras are functioning and verify the\r\n footage you have. </div>\r\n <div class=\"row\">\r\n <div class=\"col-sm-6\" *ngFor=\"let item of cameraListImages;let i = index\">\r\n <span class=\"camera fw-bold mt-2\">{{item?.cameraName?item?.cameraName:\"--\"}}</span>\r\n <div\r\n class=\"d-flex align-items-centre justify-content-centre rounded-3 overflow-hidden mt-3\">\r\n <img class=\"w-100\"\r\n [src]=\"item?.thumbnailImage?item?.thumbnailImage:'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvcmV8ZW58MHx8MHx8fDA%3D'\">\r\n <!-- <img class=\"w-100\" src='https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvcmV8ZW58MHx8MHx8fDA%3D'> -->\r\n\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-5\">\r\n <button (click)=\"cameraSelection(i,'working')\" type=\"button\"\r\n class=\"btn btn-default btn-outline w-50 me-2\"\r\n [ngClass]=\"item.cameraNumber==='working'?'text-primary bg-light-primary':''\">\r\n Working\r\n </button>\r\n <button (click)=\"cameraSelection(i,'notworking')\" type=\"button\"\r\n class=\"btn btn-default btn-outline w-50 ms-2\"\r\n [ngClass]=\"item.cameraNumber==='notworking'?'text-danger bg-light-danger':''\">\r\n Not Working\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <button *ngIf=\"!showcamIssue\" class=\"btn btn-primary w-100 mt-6\"\r\n (click)=\"updateCamStatus()\">Proceed</button>\r\n </div>\r\n <div class=\"mt-3 mb-3\">\r\n <button *ngIf=\"showcamIssue\" class=\"btn btn-primary w-100\" (click)=\"submitData()\">\r\n Submit\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngFor=\"let obj of viewTicketData;let i=index\">\r\n <!-- User code start -->\r\n <div *ngIf=\"obj.actionBy === 'User'\" class=\"d-flex ms-5\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\"\r\n class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <img class=\"msgprofile\" src=\"./assets/tango/Images/userProfile.svg\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\">\r\n <div class=\"d-flex mb-3\">\r\n <span\r\n class=\"headingtext text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <span class=\"profile-label font-bold-400\">User has replied </span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Issue has been <b><span\r\n *ngIf=\"obj.statusCheckReply==='No'\">not</span> resolved.</b>\r\n\r\n </div>\r\n <div class=\"textupdates fw-bold-400\" *ngIf=\"obj.statusCheckReply==='No'\"> It\r\n takes {{obj?.hibernationDays}} more days to resolve.</div>\r\n </div>\r\n\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-semibold mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div\r\n *ngIf=\"res.primaryIssue ==='Camera Issues'&&notworkingCamaralist.length>0\">\r\n <div class=\"row\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3 my-3\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n </div>\r\n <span>The above camera streaming are not working </span>\r\n </div>\r\n <div class=\"mt-3\" *ngIf=\"res?.secondaryIssue.length>0\">\r\n <span class=\"investigation fw-bold-400\">The following are the relevant\r\n problem facing</span>\r\n <ul class=\"profile-label fw-bold-400 mt-3\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">{{obj?.comment}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- <div *ngIf=\"selectedIssue === ''\" class=\"profile-label fw-semibold mt-2\">\r\n Kindly choose the option below that corresponds to the issue you are\r\n experiencing in the store.\r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- User code end -->\r\n <!-- Tango code start -->\r\n <div *ngIf=\"obj.actionBy === 'Tango' || obj.actionBy === 'automated'\" class=\"d-flex mb-5 ms-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <img class=\"msgprofile\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div class=\"d-flex mb-3\">\r\n <span\r\n class=\"headingtext text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <div class=\"mb-3\">\r\n <span class=\"profile-label fw-bold-400\" (click)=\"tangoReply()\">tango has replied\r\n to the issue</span>\r\n <div *ngIf=\"obj.actionType === 'dataRecived'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for your assistance. We\r\n have received the data from your Store.\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckMonitor'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for the update. We\u2019ll\r\n get back after the buffer time you provided.\r\n </div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">{{obj?.comment}}</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='stepsToResolve'\" class=\"mt-3\">\r\n <span class=\"textupdates fw-bold-400\">Please follow the below steps to\r\n resolve the above issue</span>\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"mt-5\">\r\n <span class=\"headingtext fw-semibold\">{{res.primaryIssue}}</span>\r\n <ul class=\"mt-3 profile-label fw-bold-400\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-semibold mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div\r\n *ngIf=\"res.primaryIssue ==='Camera Issues'&&notworkingCamaralist.length>0\">\r\n <div class=\"row\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n </div>\r\n <span>The above camera streaming are not working </span>\r\n </div>\r\n <div class=\"mt-3\" *ngIf=\"res?.secondaryIssue.length>0\">\r\n <span class=\"investigation fw-bold-400\">The following are the\r\n relevant\r\n problem facing</span>\r\n <ul class=\"profile-label fw-bold-400 mt-3\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">{{obj?.comment}}</span>\r\n\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='statusCheck' && isGreaterThan5_30Hours\"\r\n class=\"issuecard w-100 mt-3\">\r\n <span class=\"maincard-label\"> Has the issue been resolved?</span>\r\n <div class=\"mt-3 d-flex justify-content-between\">\r\n <button class=\"btn btn-outline w-45\" (click)=\"replyYesforIssue('yes')\">\r\n Yes\r\n </button>\r\n <button class=\"btn w-45\"\r\n [ngClass]=\"repliedIssue === 'No' ? 'bg-light-primary text-primary':'btn-outline'\"\r\n (click)=\"enableNoforIssue('No')\"> No </button>\r\n </div>\r\n <div class=\"mt-5\" *ngIf=\"repliedIssue === 'No'\">\r\n <div class=\"mb-3 mt-3\">\r\n <span>*When we can call back ? </span>\r\n <input [(ngModel)]=\"hibernationDays\" class=\"w-100 mt-3\" type=\"text\" (keypress)=\"omit_special_char($event)\">\r\n </div>\r\n <div class=\"mb-3 mt-5\">\r\n <span>comments</span>\r\n <textarea class=\"w-100 mt-3\" [(ngModel)]=\"comment\"\r\n placeholder=\"Enter your comments...\"></textarea>\r\n </div>\r\n <button class=\"btn btn-primary w-100 mt-3\"\r\n (click)=\"replyNoforIssue('No')\">Submit</button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Issue has been <b><span\r\n *ngIf=\"obj.statusCheckReply==='No'\">not</span> resolved.</b>\r\n \r\n </div>\r\n <div class=\"textupdates fw-bold-400\" *ngIf=\"obj.statusCheckReply==='No'\"> It\r\n takes {{obj?.hibernationDays}} more days to resolve.</div>\r\n </div>\r\n <!-- <div *ngIf=\"obj.actionType == 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for the Update.\r\n <span\r\n *ngIf=\"\">The ticket will be closed when the data is processed.</span></div>\r\n </div> -->\r\n\r\n </div>\r\n <!-- defaultInfra start -->\r\n <div *ngIf=\"obj.actionType ==='defaultInfra'\" class=\"investigation fw-bold-400\">We\r\n have not received data from your store. We are currently investigating the issue\r\n </div>\r\n\r\n <!-- <div *ngIf=\"selectedIssue === ''&&ticketInfo.ticketDetails.issueStatus !== 'identified' && (gs.userAccess | async)?.manage_tickets_isEdit\"\r\n class=\"investigation fw-semibold mt-2\">\r\n Kindly choose the option below that corresponds to the issue you are\r\n experiencing in the store.\r\n <ul class=\"list-unstyled px-4\">\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Internet Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> <span class=\"px-3\">Internet Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Camera Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\"\r\n viewBox=\"0 0 24 20\" fill=\"none\">\r\n <path\r\n d=\"M23 17C23 17.5304 22.7893 18.0391 22.4142 18.4142C22.0391 18.7893 21.5304 19 21 19H3C2.46957 19 1.96086 18.7893 1.58579 18.4142C1.21071 18.0391 1 17.5304 1 17V6C1 5.46957 1.21071 4.96086 1.58579 4.58579C1.96086 4.21071 2.46957 4 3 4H7L9 1H15L17 4H21C21.5304 4 22.0391 4.21071 22.4142 4.58579C22.7893 4.96086 23 5.46957 23 6V17Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 15C14.2091 15 16 13.2091 16 11C16 8.79086 14.2091 7 12 7C9.79086 7 8 8.79086 8 11C8 13.2091 9.79086 15 12 15Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> <span class=\"px-3\">Camera Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('System Issues')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"14\"\r\n viewBox=\"0 0 20 14\" fill=\"none\">\r\n <path\r\n d=\"M12 2V9H2V2H12ZM2 0C0.896875 0 0 0.896875 0 2V9C0 10.1031 0.896875 11 2 11H5.66563L5.33125 12H3C2.44688 12 2 12.4469 2 13C2 13.5531 2.44688 14 3 14H11C11.5531 14 12 13.5531 12 13C12 12.4469 11.5531 12 11 12H8.66562L8.33125 11H12C13.1031 11 14 10.1031 14 9V2C14 0.896875 13.1031 0 12 0H2ZM16.5 0C15.6719 0 15 0.671875 15 1.5V12.5C15 13.3281 15.6719 14 16.5 14H18.5C19.3281 14 20 13.3281 20 12.5V1.5C20 0.671875 19.3281 0 18.5 0H16.5ZM17 2H18C18.275 2 18.5 2.225 18.5 2.5C18.5 2.775 18.275 3 18 3H17C16.725 3 16.5 2.775 16.5 2.5C16.5 2.225 16.725 2 17 2ZM16.5 4.5C16.5 4.225 16.725 4 17 4H18C18.275 4 18.5 4.225 18.5 4.5C18.5 4.775 18.275 5 18 5H17C16.725 5 16.5 4.775 16.5 4.5ZM17.5 9.5C17.7652 9.5 18.0196 9.60536 18.2071 9.79289C18.3946 9.98043 18.5 10.2348 18.5 10.5C18.5 10.7652 18.3946 11.0196 18.2071 11.2071C18.0196 11.3946 17.7652 11.5 17.5 11.5C17.2348 11.5 16.9804 11.3946 16.7929 11.2071C16.6054 11.0196 16.5 10.7652 16.5 10.5C16.5 10.2348 16.6054 9.98043 16.7929 9.79289C16.9804 9.60536 17.2348 9.5 17.5 9.5Z\"\r\n fill=\"#475467\" />\r\n </svg> <span class=\"px-3\">System Issues</span>\r\n </li>\r\n <li class=\"py-4 cursor-pointer\" (click)=\"choosenIssue('Others')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\"\r\n viewBox=\"0 0 22 22\" fill=\"none\">\r\n <path\r\n d=\"M8.09 8C8.3251 7.33167 8.78915 6.76811 9.39995 6.40913C10.0108 6.05016 10.7289 5.91894 11.4272 6.03871C12.1255 6.15849 12.7588 6.52152 13.2151 7.06353C13.6713 7.60553 13.9211 8.29152 13.92 9C13.92 11 10.92 12 10.92 12M11 16H11.01M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> <span class=\"px-3\">Others</span>\r\n </li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"selectedIssue !== ''&&ticketInfo.ticketDetails.issueStatus !=='identified' \"\r\n class=\"\">\r\n <div class=\"openedissue d-flex justify-content-between align-items-center\">\r\n <span class=\"profile-label fw-semibold\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> {{selectedIssue}}\r\n </span>\r\n <div (click)=\"choosenIssue('')\" class=\"maincard-content bg-white px-3 py-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path\r\n d=\"M12.8327 6.99935H1.16602M1.16602 6.99935L6.99935 12.8327M1.16602 6.99935L6.99935 1.16602\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Internet Issues'||selectedIssue === 'Camera Issues'||selectedIssue === 'System Issues' \" class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\">\r\n <div class=\"maincard-label fw-semibold py-2\"> Please select the relevant problem facing from the following </div>\r\n <div *ngFor=\"let issue of secondaryIssues;let index = index\" class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4\" \r\n (click)=\"toggleCheckbox(index)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span> \r\n <span class=\"headingtext\">{{issue.name}}</span> \r\n <span class=\"w-300px\" [ngbTooltip]=\"tooltipContent\" triggers=\"mouseenter:mouseleave\" placement=\"left\">\r\n <svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n \r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-content\" >\r\n <ul>\r\n <li *ngFor=\"let tooltipItem of issue?.toolTips\">{{ tooltipItem?.name }}</li>\r\n </ul>\r\n </div>\r\n </ng-template>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"checkbox\" [checked]=\"issue.checked\" class=\"p-0\">\r\n </div>\r\n </div>\r\n \r\n \r\n \r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Others'\" class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\">\r\n <div class=\"maincard-label fw-semibold py-2\"> Please select the relevant problem facing from the following </div>\r\n <div *ngFor=\"let others of othersIssue;let i = index\" class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4\" \r\n (click)=\"toggleRadiobox(others)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span> \r\n <span class=\"headingtext\">{{others.name}}</span> \r\n <span><svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"radio\" name=\"radioGroup{{i}}\" [value]=\"others.name\" [(ngModel)]=\"selectedOption\" class=\"p-0\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <button class=\"btn btn-primary w-100\" (click)=\"submitData()\">\r\n Submit\r\n </button>\r\n </div>\r\n </div> -->\r\n <!-- defaultInfra end -->\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <!-- Tango code end -->\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n <!-- <ng-container *ngIf=\"viewTicketLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!viewTicketLoading && viewTicketNodata\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n </div>\r\n \r\n <div *ngIf=\"ticketInfo?.status && selectedTab === 'dataMismatch'\" class=\"col-sm-6\">\r\n <div class=\"maincard-label fw-bold d-flex justify-content-between mb-10\">\r\n <span><img src='./assets/tango/Images/ticket.svg'><span\r\n class=\"mx-2\">{{ticketInfo?.ticketId}}</span></span>\r\n <span [ngClass]=\"ticketInfo.status === 'closed' ? 'badge-light-success' :(ticketInfo.status === 'inprogress' ? 'badge-light-primary':'badge-light-warning')\" class=\"badge badge-light-primary\">{{ticketInfo?.status | titlecase}}</span>\r\n </div>\r\n <div *ngFor=\"let obj of viewTicketData;let i=index\" class=\"\">\r\n <!-- User code start -->\r\n <div *ngIf=\"obj.actionBy === 'User'\" class=\"d-flex mb-5 ms-5\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\"\r\n class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <img class=\"msgprofile\" src=\"./assets/tango/Images/userProfile.svg\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\">\r\n <div class=\"d-flex mb-3\">\r\n <span\r\n class=\"headingtext text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <span *ngIf=\"obj.actionType === 'final-upload'\" class=\"profile-label font-bold-400\">User has re-initiated the Ticket </span>\r\n </div>\r\n <div class=\"mt-2 text-break\" *ngIf=\"obj.actionType === 'final-upload'\">\r\n <div *ngIf=\"obj.attachments[0].fileName\" class=\"textupdates1 d-flex align-content-center fw-semibold mt-3\">\r\n <img class=\"me-3 w-40px h-40px\" src=\"./assets/tango/Images/document.svg\">\r\n <span class=\"cursor-pointer mt-2\" (click)=\"downloadUrl(obj.attachments[0].signedUrl)\">\r\n {{obj.attachments[0].fileName}}\r\n <!-- <br><span class=\"timingtext fw-bold-400\">720 KB</span> -->\r\n </span>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-5 fw-bold-400\">\"{{obj?.description}}\"</span> \r\n </div>\r\n <div class=\"mt-2 text-break\" *ngIf=\"obj.actionType === 'Created'\">\r\n <div *ngIf=\"obj.attachments[0].fileName\" class=\"textupdates1 d-flex align-content-center fw-semibold mt-3\">\r\n <img class=\"me-3 w-40px h-40px\" src=\"./assets/tango/Images/document.svg\">\r\n <span class=\"cursor-pointer mt-2\" (click)=\"downloadUrl(obj.attachments[0].signedUrl)\">\r\n {{obj.attachments[0].fileName}}\r\n <!-- <br><span class=\"timingtext fw-bold-400\">720 KB</span> -->\r\n </span>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-5 fw-bold-400\">\"{{obj?.description}}\"</span>\r\n </div>\r\n <!-- defaultInfra start -->\r\n <div *ngIf=\"obj.actionType === 'Created' && ticketInfo.issueType\" class=\"contenttext fw-bold-400 mt-5\"> <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Raised <span *ngIf=\"ticketInfo.issueType ==='lowcount'\"\r\n class=\"timingtext fw-semibold text-primary1\">Low Count Issue</span> <span *ngIf=\"ticketInfo.issueType ==='highcount'\"\r\n class=\"timingtext fw-semibold text-primary1\">High Count Issue</span> in \r\n <span class=\"timingtext fw-semibold text-primary1\">{{ticketInfo.basicDetails.storeId}}</span>\r\n </span></div>\r\n <!-- defaultInfra end -->\r\n </div>\r\n \r\n </div> \r\n\r\n <!-- User code end -->\r\n <!-- Tango code start -->\r\n <div *ngIf=\"obj.actionBy === 'Tango'\" class=\"d-flex mb-5 ms-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <div class=\"symbol symbol-35px symbol-circle\" *ngIf=\"obj?.IdentifiedBy&&obj?.IdentifiedBy!==''&&obj?.IdentifiedBy!=='Tango'\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{obj?.IdentifiedBy?.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <img *ngIf=\"!obj?.IdentifiedBy||obj?.IdentifiedBy===''||obj?.IdentifiedBy==='Tango'\" class=\"msgprofile1\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n \r\n <div class=\"py-3 pt-0\">\r\n <div class=\"d-flex mb-3\" >\r\n <span class=\"headingtext fw-bold text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext fw-bold-400 px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <div class=\"mb-3\">\r\n <span *ngIf=\"obj.actionType === 'final-upload'\" class=\"profile-label fw-bold-400\">tango has replied to the\r\n issue</span>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'dataRecived'\">\r\n <span class=\"timingtext pe-3 pt-5 fw-bold-400\">Updated the status <span class=\"text-primary1\">Inprogress -> Closed</span></span>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'final-upload'\">\r\n <div *ngIf=\"obj.attachments[0].fileName\" class=\"textupdates1 d-flex align-content-center fw-semibold mt-3\">\r\n <img class=\"me-3 w-40px h-40px\" src=\"./assets/tango/Images/document.svg\">\r\n <span class=\"cursor-pointer mt-2\" (click)=\"downloadUrl(obj.attachments[0].signedUrl)\">\r\n {{obj.attachments[0].fileName}}\r\n <!-- <br><span class=\"timingtext fw-bold-400\">720 KB</span> -->\r\n </span>\r\n </div>\r\n <div class=\"mt-3 text-break\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">\"{{obj?.description}}\"</span>\r\n </div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-5 fw-bold-400\">Updated the status <span class=\"text-primary1\">Open -> Inprogress</span></span>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'Created'\">\r\n <div *ngIf=\"obj.attachments[0].fileName\" class=\"textupdates1 d-flex align-content-center fw-semibold mt-3\">\r\n <img class=\"me-3 w-40px h-40px\" src=\"./assets/tango/Images/document.svg\">\r\n <span class=\"cursor-pointer mt-2\" (click)=\"downloadUrl(obj.attachments[0].signedUrl)\">\r\n {{obj.attachments[0].fileName}}\r\n <!-- <br><span class=\"timingtext fw-bold-400\">720 KB</span> -->\r\n </span>\r\n </div>\r\n <div class=\"mt-3 text-break\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">\"{{obj?.description}}\"</span>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <!-- defaultInfra start -->\r\n <div *ngIf=\"obj.actionType === 'Created' && ticketInfo.issueType\" class=\"contenttext fw-bold-400\"> <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Raised <span *ngIf=\"ticketInfo.issueType ==='lowcount'\"\r\n class=\"timingtext fw-semibold text-primary1\">Low Count Issue</span> <span *ngIf=\"ticketInfo.issueType ==='highcount'\"\r\n class=\"timingtext fw-semibold text-primary1\">High Count Issue</span> in \r\n <span class=\"timingtext fw-semibold text-primary1\">{{ticketInfo.basicDetails.storeId}}</span>\r\n </span></div>\r\n <!-- defaultInfra end -->\r\n\r\n \r\n \r\n </div>\r\n </div>\r\n <!-- Tango code end -->\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"storeListLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"storeListNodata\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".card-label{font-size:18px!important}.roundedcheck input[type=checkbox]{width:16px!important;height:16px!important;border-radius:10px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.roundedcheck input[type=checkbox]:checked{outline:none;background-color:var(--primary-50, #00A3FF)}.roundedcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid white;border-right:2px solid white;display:inline-block;width:4px;padding:5px 0 2px 3px;margin-top:2px}.issuecard{width:19%;border-radius:10px;border:1px solid var(--Gray-200, #EAECF0);padding:16px}.issuecard label{color:var(--Black, #101828);font-size:14px;line-height:20px}.issuecard.active{border:none!important;background:var(--Primary-25, #F6FCFF);box-shadow:0 0 0 4px #e9f7ff}.contenttext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.maincard-content{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.maincard-label{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}.profile{width:24px;height:24px;overflow:hidden;border-radius:200px}.fw-bold-700{font-weight:700!important}.fw-bold-400{font-weight:400!important}.msgprofile{width:48px!important;height:48px!important;border-radius:200px;overflow:hidden}.msgprofile1{width:35px!important;height:35px!important;border-radius:200px;overflow:hidden}.timingtext{color:var(--Gray-500, #667085);font-size:14px;line-height:18px}.profile-label{font-size:12px;color:var(--Gray-500, #667085);line-height:18px}.investigation{color:var(--Gray-500, #667085);font-size:16px;line-height:24px}.openedissue{border-radius:6px;background:var(--Gray-50, #F9FAFB);padding:8px 12px}.w-45{width:49%}input,textarea{padding:10px 14px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}::placeholder{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}textarea{min-height:128px}.textupdates{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.textupdates1{color:var(--Gray-700, #344054);font-size:14px;line-height:24px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.img-src{width:25%}.text-primary1{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500;line-height:20px}\n"] }]
1178
1184
  }], ctorParameters: () => [{ type: TicketsService }, { type: i0.ChangeDetectorRef }, { type: i1.GlobalStateService }, { type: i3.ToastService }, { type: ExcelService }, { type: i1$1.NgbModal }], propDecorators: { selectedTab: [{
1179
1185
  type: Input
1180
1186
  }], onClick: [{
@@ -1187,14 +1193,18 @@ class TangoStoreInfraComponent {
1187
1193
  router;
1188
1194
  gs;
1189
1195
  route;
1190
- selectedTab = 'infra';
1196
+ selectedTab;
1191
1197
  detach = new Subject();
1192
1198
  storeId;
1199
+ type;
1193
1200
  constructor(pageInfo, router, gs, route) {
1194
1201
  this.pageInfo = pageInfo;
1195
1202
  this.router = router;
1196
1203
  this.gs = gs;
1197
1204
  this.route = route;
1205
+ this.route.queryParams.subscribe(params => {
1206
+ this.selectedTab = params['type'] ? params['type'] : 'infra';
1207
+ });
1198
1208
  }
1199
1209
  ngOnDestroy() {
1200
1210
  this.detach.next(true);
@@ -1239,13 +1249,13 @@ class TangoStoreInfraComponent {
1239
1249
  },
1240
1250
  {
1241
1251
  title: this.storeId,
1242
- path: "/manage/stores/" + this.storeId,
1252
+ path: "",
1243
1253
  isActive: false,
1244
1254
  isSeparator: false,
1245
1255
  },
1246
1256
  {
1247
1257
  title: this.storeId,
1248
- path: "/manage/stores/" + this.storeId,
1258
+ path: "",
1249
1259
  isActive: false,
1250
1260
  isSeparator: true,
1251
1261
  },
@@ -1253,6 +1263,9 @@ class TangoStoreInfraComponent {
1253
1263
  }
1254
1264
  selectedTabs(value) {
1255
1265
  this.selectedTab = value;
1266
+ const queryParams = { ...this.route.snapshot.queryParams };
1267
+ delete queryParams['type'];
1268
+ this.router.navigate([], { relativeTo: this.route, queryParams: queryParams });
1256
1269
  }
1257
1270
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TangoStoreInfraComponent, deps: [{ token: i1.PageInfoService }, { token: i2.Router }, { token: i1.GlobalStateService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
1258
1271
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: TangoStoreInfraComponent, selector: "lib-tango-store-infra", ngImport: i0, template: "<div class=\"card mb-5 py-3 px-5\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item\" (click)=\"selectedTabs('infra')\"><a [ngClass]=\"selectedTab ==='infra' ? 'active' :''\"\r\n class=\"nav-link cursor-pointer no-border me-6 \">Infra</a>\r\n </li>\r\n <li class=\"nav-item\" (click)=\"selectedTabs('dataMismatch')\">\r\n <a [ngClass]=\"selectedTab ==='dataMismatch' ? 'active' :''\" class=\"nav-link cursor-pointer me-6\">Data Mismatch</a>\r\n </li>\r\n </ul>\r\n</div>\r\n<div *ngIf=\"selectedTab ==='infra'\">\r\n <lib-ticket-infra [selectedTab]=\"selectedTab\"></lib-ticket-infra>\r\n</div>\r\n<div *ngIf=\"selectedTab ==='dataMismatch'\">\r\n <lib-ticket-infra [selectedTab]=\"selectedTab\"></lib-ticket-infra>\r\n</div>\r\n<router-outlet></router-outlet>", styles: [".nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: TicketInfraComponent, selector: "lib-ticket-infra", inputs: ["selectedTab"] }] });