@adlfe/campaign-management-library 2.11.7 → 2.12.0

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.
@@ -4512,16 +4512,18 @@
4512
4512
  };
4513
4513
  GeneralInformationWAComponent.prototype.validateText = function (account) {
4514
4514
  var _this = this;
4515
- var _a;
4515
+ var _a, _b;
4516
4516
  this.isCheckUtility = true;
4517
- var _b = this.form.value, from = _b.from, text = _b.text;
4518
- if (!text && !from)
4517
+ var _c = this.form.value, from = _c.from, text = _c.text;
4518
+ if (!text || !from)
4519
+ return;
4520
+ if (!((_a = from) === null || _a === void 0 ? void 0 : _a.directSendEnabled))
4519
4521
  return;
4520
4522
  var headers = new http.HttpHeaders()
4521
4523
  .set('Authorization', 'Bearer ' + localStorage.getItem('telin.accessToken'))
4522
4524
  .set('Access-Control-Allow-Origin', '*');
4523
4525
  this.httpClient
4524
- .post(environment.api + "/message/direct-send/" + ((_a = (from || account)) === null || _a === void 0 ? void 0 : _a.id), {
4526
+ .post(environment.api + "/message/direct-send/" + ((_b = (from || account)) === null || _b === void 0 ? void 0 : _b.id), {
4525
4527
  type: 'text',
4526
4528
  text: { body: text },
4527
4529
  }, { headers: headers })
@@ -4961,7 +4963,7 @@
4961
4963
  GeneralInformationWAComponent = __decorate([
4962
4964
  core.Component({
4963
4965
  selector: 'lib-general-information-wa',
4964
- template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Message Type</mat-label>\r\n\r\n <mat-select placeholder=\"Select message type\" formControlName=\"channel\">\r\n <mat-option\r\n *ngFor=\"let option of msgTypeWAOption\"\r\n [value]=\"option.code\"\r\n (click)=\"formReset()\"\r\n >\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.channel\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('channel')?.touched && form.get('channel')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n\r\n <div\r\n *ngIf=\"!getIsTemplate\"\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 16px; border: 1px solid rgb(243, 124, 44)\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n <div>\r\n If you select this channel, keep in mind that the message might not be delivered to\r\n all selected customers. This is because the customer must have had a conversation\r\n previously with BSP.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getIsText\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label class=\"asterix--after\">Text</mat-label>\r\n\r\n <textarea\r\n matInput\r\n rows=\"6\"\r\n cols=\"50\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"2\"\r\n cdkAutosizeMaxRows=\"15\"\r\n formControlName=\"text\"\r\n placeholder=\"Enter text\"\r\n #autosize=\"cdkTextareaAutosize\"\r\n ></textarea>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('text')?.touched && form.get('text')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsMedia\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Media Type</mat-label>\r\n\r\n <mat-select\r\n placeholder=\"Select media type\"\r\n formControlName=\"media\"\r\n (selectionChange)=\"updateMediaType($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let option of mediaTypeOption\" [value]=\"option.code\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.media\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('media').touched && form.get('media').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"form.get('media').value?.toLowerCase() !== 'location'\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n (click)=\"filePicker.click()\"\r\n formControlName=\"fileName\"\r\n />\r\n\r\n <button\r\n mat-button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Choose File\"\r\n (click)=\"filePicker.click()\"\r\n >\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n\r\n <input\r\n #filePicker\r\n hidden\r\n type=\"file\"\r\n [accept]=\"extFileAccepted\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.fileName\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('fileName').touched &&\r\n form.get('fileName').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('media').value?.toLowerCase() === 'location'\">\r\n <div class=\"w-100\">\r\n <h4 class=\"asterix--after\">Location</h4>\r\n\r\n <div class=\"w-100\">\r\n <agm-map\r\n style=\"width: 100%; height: 400px\"\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [disableDoubleClickZoom]=\"maps.isDoubleClickZoom\"\r\n [zoom]=\"maps.zoom\"\r\n >\r\n <agm-marker\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [markerDraggable]=\"maps.isDraggable\"\r\n (dragEnd)=\"markerDragEnd($event)\"\r\n ></agm-marker>\r\n </agm-map>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Location</mat-label>\r\n\r\n <input\r\n #mapSearch\r\n matInput\r\n type=\"text\"\r\n maxlength=\"100\"\r\n placeholder=\"Enter location here\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsTemplate\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n (selectionChange)=\"getTemplateOptionService($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"template\"\r\n placeholder=\"Select template\"\r\n [complete]=\"isHaveNextTemplateOption === false\"\r\n [compareWith]=\"templateSelectedDisplay\"\r\n (infiniteScroll)=\"getNextTemplateBatch()\"\r\n (selectionChange)=\"updateTemplate($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('template').value?.name\"\r\n (searchRes)=\"updateSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('template')?.touched &&\r\n form.get('template')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div *ngIf=\"isHaveTemplateParam\" class=\"d-flex justify-content-end\">\r\n <mat-checkbox\r\n labelPosition=\"before\"\r\n formControlName=\"isUpload\"\r\n (change)=\"updateDownloadCSV($event.checked)\"\r\n >\r\n Using Download XLSX\r\n </mat-checkbox>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!form.get('isUpload')?.value\">\r\n <div\r\n *ngIf=\"form.get('template')?.value?.category === 'AUTHENTICATION'\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label> OTP Value </mat-label>\r\n\r\n <input matInput type=\"text\" formControlName=\"otpValue\" />\r\n </mat-form-field>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getParamHeader?.length > 0\">\r\n <p class=\"font-16px font-PoppinsBold\">Header Parameter</p>\r\n\r\n <div\r\n *ngFor=\"let param of getParamHeader; let paramHeaderIndex = index\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramHeaderIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramHeaderIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getParamBody?.length > 0\">\r\n <p class=\"font-16px font-PoppinsBold mt-3\">Body Parameter</p>\r\n\r\n <div\r\n *ngFor=\"let param of getParamBody; let paramBodyIndex = index\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramBodyIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramBodyIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isShowParameter\">\r\n <p class=\"font-16px font-PoppinsBold mt-3\">Button Parameter</p>\r\n\r\n <ng-container *ngFor=\"let button of getButton; let buttonIndex = index\">\r\n <ng-container *ngIf=\"getParamButton(buttonIndex)?.length > 0\">\r\n <p class=\"font-14px font-PoppinsBold mt-3\">Button {{ buttonIndex + 1 }}</p>\r\n\r\n <div\r\n *ngFor=\"\r\n let param of getParamButton(buttonIndex);\r\n let paramIndex = index\r\n \"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"\r\n ['image', 'video', 'document'].includes(\r\n form.get('template')?.value?.header?.type?.toLowerCase()\r\n )\r\n \"\r\n >\r\n <p class=\"font-16px font-PoppinsBold mt-3\">File</p>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n (click)=\"filePicker.click()\"\r\n formControlName=\"fileName\"\r\n />\r\n\r\n <button\r\n mat-button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Choose File\"\r\n (click)=\"filePicker.click()\"\r\n >\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n\r\n <input\r\n #filePicker\r\n hidden\r\n type=\"file\"\r\n [accept]=\"extFileAccepted\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsCatalogue\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">Category</mat-label>\r\n\r\n <mat-select formControlName=\"category\" placeholder=\"Select category\">\r\n <mat-option *ngFor=\"let option of categoryOption\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.category\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('category')?.touched &&\r\n form.get('category')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">Catalog</mat-label>\r\n\r\n <mat-select formControlName=\"catalogue\" placeholder=\"Select catalog\">\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.catalogue\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('catalogue')?.touched &&\r\n form.get('catalogue')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"form.get('category')?.value === 'product'\"\r\n style=\"padding: 8px; border-radius: 8px; border: 1px solid #6177c4\"\r\n >\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Product</mat-label>\r\n\r\n <mat-select formControlName=\"product\" placeholder=\"Select product\">\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.product\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('product')?.touched &&\r\n form.get('product')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Body</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n maxlength=\"100\"\r\n formControlName=\"body\"\r\n placeholder=\"Enter body\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsUtility\">\r\n <div style=\"display: grid; gap: 0.5rem\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n <mat-radio-group\r\n style=\"display: flex; gap: 0.5rem; flex-wrap: wrap\"\r\n formControlName=\"isUseExistingTemplate\"\r\n (change)=\"handleChangeTemplate($event.value)\"\r\n >\r\n <mat-radio-button\r\n [value]=\"option.value\"\r\n *ngFor=\"let option of templates\"\r\n color=\"primary\"\r\n >\r\n {{ option.label }}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n (selectionChange)=\"handleChangeFrom($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!form.get('isUseExistingTemplate')?.value; else existingTmpl\">\r\n <div\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 8px; border: 1px solid rgb(243, 124, 44)\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n <div>\r\n Direct Send access restricted for 30 days due to continued misuse. Final warning\r\n before permanent revocation.\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label class=\"asterix--after\">Body</mat-label>\r\n\r\n <textarea\r\n matInput\r\n rows=\"6\"\r\n cols=\"50\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"2\"\r\n cdkAutosizeMaxRows=\"15\"\r\n formControlName=\"text\"\r\n placeholder=\"Enter text\"\r\n #autosize=\"cdkTextareaAutosize\"\r\n ></textarea>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('text').touched && form.get('text').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <app-input\r\n type=\"numeric\"\r\n formControlName=\"ttl\"\r\n label=\"TTL\"\r\n placeholder=\"Enter ttl\"\r\n [trimLeadingZeros]=\"true\"\r\n ></app-input>\r\n </div>\r\n\r\n <div *ngIf=\"!isReadOnlyMode\">\r\n <mat-checkbox formControlName=\"isNeedSave\">\r\n Save this message as future template\r\n </mat-checkbox>\r\n </div>\r\n\r\n <div\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 8px; border: 1px solid rgb(243, 124, 44)\"\r\n *ngIf=\"!isUtility\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n <div>\r\n Copy mismatch. This copy is not Utility content. Please revise to proceed.\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #existingTmpl>\r\n <div\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 8px; border: 1px solid rgb(243, 124, 44)\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n <div>\r\n Direct Send access restricted for 30 days due to continued misuse. Final warning\r\n before permanent revocation.\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"template\"\r\n placeholder=\"Select template\"\r\n [complete]=\"isHaveNextTemplateOption === false\"\r\n [compareWith]=\"templateSelectedDisplay\"\r\n (infiniteScroll)=\"getNextTemplateBatch()\"\r\n (selectionChange)=\"updateTemplate($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('template').value?.name\"\r\n (searchRes)=\"updateSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('template')?.touched &&\r\n form.get('template')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <app-input\r\n type=\"numeric\"\r\n formControlName=\"ttl\"\r\n label=\"TTL\"\r\n placeholder=\"Enter ttl\"\r\n [trimLeadingZeros]=\"true\"\r\n ></app-input>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n</form>\r\n",
4966
+ template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Message Type</mat-label>\r\n\r\n <mat-select placeholder=\"Select message type\" formControlName=\"channel\">\r\n <mat-option\r\n *ngFor=\"let option of msgTypeWAOption\"\r\n [value]=\"option.code\"\r\n (click)=\"formReset()\"\r\n >\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.channel\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('channel')?.touched && form.get('channel')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n\r\n <div\r\n *ngIf=\"!getIsTemplate\"\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 16px; border: 1px solid rgb(243, 124, 44)\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n <div *ngIf=\"!getIsUtility\">\r\n If you select this channel, keep in mind that the message might not be delivered to\r\n all selected customers. This is because the customer must have had a conversation\r\n previously with BSP.\r\n </div>\r\n\r\n <div *ngIf=\"getIsUtility\">\r\n You can send directly a utility message. You can choose between existing utility\r\n templates or creating a new one. If you create a new template, the system may check\r\n whether the content already exists as a template.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getIsText\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label class=\"asterix--after\">Text</mat-label>\r\n\r\n <textarea\r\n matInput\r\n rows=\"6\"\r\n cols=\"50\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"2\"\r\n cdkAutosizeMaxRows=\"15\"\r\n formControlName=\"text\"\r\n placeholder=\"Enter text\"\r\n #autosize=\"cdkTextareaAutosize\"\r\n ></textarea>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('text')?.touched && form.get('text')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsMedia\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Media Type</mat-label>\r\n\r\n <mat-select\r\n placeholder=\"Select media type\"\r\n formControlName=\"media\"\r\n (selectionChange)=\"updateMediaType($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let option of mediaTypeOption\" [value]=\"option.code\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.media\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('media').touched && form.get('media').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"form.get('media').value?.toLowerCase() !== 'location'\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n (click)=\"filePicker.click()\"\r\n formControlName=\"fileName\"\r\n />\r\n\r\n <button\r\n mat-button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Choose File\"\r\n (click)=\"filePicker.click()\"\r\n >\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n\r\n <input\r\n #filePicker\r\n hidden\r\n type=\"file\"\r\n [accept]=\"extFileAccepted\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.fileName\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('fileName').touched &&\r\n form.get('fileName').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('media').value?.toLowerCase() === 'location'\">\r\n <div class=\"w-100\">\r\n <h4 class=\"asterix--after\">Location</h4>\r\n\r\n <div class=\"w-100\">\r\n <agm-map\r\n style=\"width: 100%; height: 400px\"\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [disableDoubleClickZoom]=\"maps.isDoubleClickZoom\"\r\n [zoom]=\"maps.zoom\"\r\n >\r\n <agm-marker\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [markerDraggable]=\"maps.isDraggable\"\r\n (dragEnd)=\"markerDragEnd($event)\"\r\n ></agm-marker>\r\n </agm-map>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Location</mat-label>\r\n\r\n <input\r\n #mapSearch\r\n matInput\r\n type=\"text\"\r\n maxlength=\"100\"\r\n placeholder=\"Enter location here\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsTemplate\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n (selectionChange)=\"getTemplateOptionService($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"template\"\r\n placeholder=\"Select template\"\r\n [complete]=\"isHaveNextTemplateOption === false\"\r\n [compareWith]=\"templateSelectedDisplay\"\r\n (infiniteScroll)=\"getNextTemplateBatch()\"\r\n (selectionChange)=\"updateTemplate($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('template').value?.name\"\r\n (searchRes)=\"updateSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('template')?.touched &&\r\n form.get('template')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div *ngIf=\"isHaveTemplateParam\" class=\"d-flex justify-content-end\">\r\n <mat-checkbox\r\n labelPosition=\"before\"\r\n formControlName=\"isUpload\"\r\n (change)=\"updateDownloadCSV($event.checked)\"\r\n >\r\n Using Download XLSX\r\n </mat-checkbox>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!form.get('isUpload')?.value\">\r\n <div\r\n *ngIf=\"form.get('template')?.value?.category === 'AUTHENTICATION'\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label> OTP Value </mat-label>\r\n\r\n <input matInput type=\"text\" formControlName=\"otpValue\" />\r\n </mat-form-field>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getParamHeader?.length > 0\">\r\n <p class=\"font-16px font-PoppinsBold\">Header Parameter</p>\r\n\r\n <div\r\n *ngFor=\"let param of getParamHeader; let paramHeaderIndex = index\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramHeaderIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramHeaderIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getParamBody?.length > 0\">\r\n <p class=\"font-16px font-PoppinsBold mt-3\">Body Parameter</p>\r\n\r\n <div\r\n *ngFor=\"let param of getParamBody; let paramBodyIndex = index\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramBodyIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramBodyIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isShowParameter\">\r\n <p class=\"font-16px font-PoppinsBold mt-3\">Button Parameter</p>\r\n\r\n <ng-container *ngFor=\"let button of getButton; let buttonIndex = index\">\r\n <ng-container *ngIf=\"getParamButton(buttonIndex)?.length > 0\">\r\n <p class=\"font-14px font-PoppinsBold mt-3\">Button {{ buttonIndex + 1 }}</p>\r\n\r\n <div\r\n *ngFor=\"\r\n let param of getParamButton(buttonIndex);\r\n let paramIndex = index\r\n \"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"\r\n ['image', 'video', 'document'].includes(\r\n form.get('template')?.value?.header?.type?.toLowerCase()\r\n )\r\n \"\r\n >\r\n <p class=\"font-16px font-PoppinsBold mt-3\">File</p>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n (click)=\"filePicker.click()\"\r\n formControlName=\"fileName\"\r\n />\r\n\r\n <button\r\n mat-button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Choose File\"\r\n (click)=\"filePicker.click()\"\r\n >\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n\r\n <input\r\n #filePicker\r\n hidden\r\n type=\"file\"\r\n [accept]=\"extFileAccepted\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsCatalogue\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">Category</mat-label>\r\n\r\n <mat-select formControlName=\"category\" placeholder=\"Select category\">\r\n <mat-option *ngFor=\"let option of categoryOption\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.category\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('category')?.touched &&\r\n form.get('category')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">Catalog</mat-label>\r\n\r\n <mat-select formControlName=\"catalogue\" placeholder=\"Select catalog\">\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.catalogue\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('catalogue')?.touched &&\r\n form.get('catalogue')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"form.get('category')?.value === 'product'\"\r\n style=\"padding: 8px; border-radius: 8px; border: 1px solid #6177c4\"\r\n >\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Product</mat-label>\r\n\r\n <mat-select formControlName=\"product\" placeholder=\"Select product\">\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.product\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('product')?.touched &&\r\n form.get('product')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Body</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n maxlength=\"100\"\r\n formControlName=\"body\"\r\n placeholder=\"Enter body\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsUtility\">\r\n <div style=\"display: grid; gap: 0.5rem\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n <mat-radio-group\r\n style=\"display: flex; gap: 0.5rem; flex-wrap: wrap\"\r\n formControlName=\"isUseExistingTemplate\"\r\n (change)=\"handleChangeTemplate($event.value)\"\r\n >\r\n <mat-radio-button\r\n [value]=\"option.value\"\r\n *ngFor=\"let option of templates\"\r\n color=\"primary\"\r\n >\r\n {{ option.label }}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n (selectionChange)=\"handleChangeFrom($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!form.get('isUseExistingTemplate')?.value; else existingTmpl\">\r\n <ng-container *ngTemplateOutlet=\"stageAlertTmpl\"></ng-container>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label class=\"asterix--after\">Body</mat-label>\r\n\r\n <textarea\r\n matInput\r\n rows=\"6\"\r\n cols=\"50\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"2\"\r\n cdkAutosizeMaxRows=\"15\"\r\n formControlName=\"text\"\r\n placeholder=\"Enter text\"\r\n #autosize=\"cdkTextareaAutosize\"\r\n ></textarea>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('text').touched && form.get('text').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <app-input\r\n type=\"numeric\"\r\n formControlName=\"ttl\"\r\n label=\"TTL\"\r\n placeholder=\"Enter ttl\"\r\n [trimLeadingZeros]=\"true\"\r\n ></app-input>\r\n </div>\r\n\r\n <div *ngIf=\"!isReadOnlyMode\">\r\n <mat-checkbox formControlName=\"isNeedSave\">\r\n Save this message as future template\r\n </mat-checkbox>\r\n </div>\r\n\r\n <div\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 8px; border: 1px solid rgb(243, 124, 44)\"\r\n *ngIf=\"!isUtility\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n <div>\r\n Copy mismatch. This copy is not Utility content. Please revise to proceed.\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #existingTmpl>\r\n <ng-container *ngTemplateOutlet=\"stageAlertTmpl\"></ng-container>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"template\"\r\n placeholder=\"Select template\"\r\n [complete]=\"isHaveNextTemplateOption === false\"\r\n [compareWith]=\"templateSelectedDisplay\"\r\n (infiniteScroll)=\"getNextTemplateBatch()\"\r\n (selectionChange)=\"updateTemplate($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('template').value?.name\"\r\n (searchRes)=\"updateSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('template')?.touched &&\r\n form.get('template')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <app-input\r\n type=\"numeric\"\r\n formControlName=\"ttl\"\r\n label=\"TTL\"\r\n placeholder=\"Enter ttl\"\r\n [trimLeadingZeros]=\"true\"\r\n ></app-input>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n</form>\r\n\r\n<ng-template #stageAlertTmpl>\r\n <div\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 8px; border: 1px solid rgb(243, 124, 44)\"\r\n *ngIf=\"form.get('from')?.value && form.get('from')?.value?.directSendRestrictionStage > 0\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 1\">\r\n Direct Send misuse detected. Please review your messaging practices.\r\n </div>\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 2\">\r\n Direct Send access restricted for 7 days due to continued misuse.\r\n </div>\r\n\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 3\">\r\n Direct Send access restricted for 30 days due to continued misuse. Final warning before\r\n permanent revocation.\r\n </div>\r\n\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 4\">\r\n Direct Send access has been permanently revoked.\r\n </div>\r\n </div>\r\n</ng-template>\r\n",
4965
4967
  styles: [".asterix--after:after{content:\"*\";color:red}"]
4966
4968
  })
4967
4969
  ], GeneralInformationWAComponent);
@@ -5598,12 +5600,20 @@
5598
5600
  this.table = new TableModel();
5599
5601
  this.table.labels = [
5600
5602
  'select',
5603
+ 'Name',
5601
5604
  'Category',
5602
5605
  'No. Of Customer',
5603
5606
  'Created Date',
5604
5607
  'Updated Date',
5605
5608
  ];
5606
- this.table.columns = ['select', 'name', 'totalMembers', 'createdDate', 'updatedDate'];
5609
+ this.table.columns = [
5610
+ 'select',
5611
+ 'name',
5612
+ 'category',
5613
+ 'totalMembers',
5614
+ 'createdDate',
5615
+ 'updatedDate',
5616
+ ];
5607
5617
  };
5608
5618
  Object.defineProperty(NewNumberBasesComponent.prototype, "getCampaignStorage", {
5609
5619
  get: function () {
@@ -5651,14 +5661,31 @@
5651
5661
  .executeApiRequest(parameterList, '/admin/category', 'GET')
5652
5662
  .subscribe(function (resp) {
5653
5663
  var _a;
5664
+ var customerSegments = JSON.parse(localStorage.getItem('csegment') || '[]');
5665
+ var getDate = function (item) {
5666
+ return new Date(item.updatedDate || item.createdDate).getTime();
5667
+ };
5668
+ var data = (((_a = resp) === null || _a === void 0 ? void 0 : _a.data) || []).map(function (item) { return (__assign(__assign({}, item), { category: 'Customer Group' })); });
5669
+ if (_this.categoryParam.pageNo === 1) {
5670
+ customerSegments
5671
+ .sort(function (a, b) { return getDate(b) - getDate(a); })
5672
+ .forEach(function (segment) {
5673
+ var index = data.findIndex(function (group) { return getDate(group) < getDate(segment); });
5674
+ if (index === -1) {
5675
+ return;
5676
+ }
5677
+ var groupId = data[index].id;
5678
+ data[index] = __assign(__assign({}, segment), { id: groupId, totalMembers: segment.customerCount, updatedDate: segment.updatedDate || segment.createdDate, category: 'Customer Segment' });
5679
+ });
5680
+ }
5654
5681
  if (_this.isReadOnlyMode) {
5655
- _this.table.dataSource.data = (_a = resp.data) === null || _a === void 0 ? void 0 : _a.filter(function (each) { var _a, _b; return (_b = (_a = _this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.targetAudience) === null || _b === void 0 ? void 0 : _b.includes(each.id); });
5682
+ _this.table.dataSource.data = data.filter(function (each) { var _a, _b; return (_b = (_a = _this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.targetAudience) === null || _b === void 0 ? void 0 : _b.includes(each.id); });
5656
5683
  _this.categorySelected = _this.table.dataSource.data;
5657
5684
  _this.isLoading = false;
5658
5685
  _this.initEdit();
5659
5686
  return;
5660
5687
  }
5661
- _this.table.dataSource.data = resp.data;
5688
+ _this.table.dataSource.data = data;
5662
5689
  _this.table.setNextPage(resp.haveNext);
5663
5690
  _this.isLoading = false;
5664
5691
  _this.initEdit();
@@ -5896,7 +5923,7 @@
5896
5923
  NewNumberBasesComponent = __decorate([
5897
5924
  core.Component({
5898
5925
  selector: 'lib-new-number-bases',
5899
- template: "<h3 class=\"font-20px font-PoppinsBold asterix--after mb-2\"\r\n\t[ngClass]=\"{ 'mb-3': !isReadOnlyMode }\">\r\n\tTarget Audience\r\n</h3>\r\n<div *ngIf=\"!isReadOnlyMode\"\r\n\tclass=\"d-flex justify-content-between\">\r\n\t<p>Select your target audience (category)</p>\r\n\t<div *ngIf=\"isShowUploadCSV\">\r\n\t\t<button mat-stroked-button\r\n\t\t\tcolor=\"primary-telin\"\r\n\t\t\tclass=\"telin-font-color mr-2\"\r\n\t\t\t(click)=\"onDownloadSampleService()\">\r\n\t\t\tDownload Template\r\n\t\t</button>\r\n\r\n\t\t<button mat-flat-button\r\n\t\t\tcolor=\"primary-telin-blue2\"\r\n\t\t\t[disabled]=\"isUpload\"\r\n\t\t\t(click)=\"filePicker.click()\">\r\n\t\t\tUpload XLSX\r\n\t\t</button>\r\n\r\n\t\t<input #filePicker\r\n\t\t\thidden\r\n\t\t\ttype=\"file\"\r\n\t\t\t[accept]=\"extFileAccepted.join()\"\r\n\t\t\t(change)=\"onFileSelected($event)\" />\r\n\t</div>\r\n</div>\r\n\r\n<p *ngIf=\"!isReadOnlyMode && (getCampaignStorage?.targetAudienceFile?.name ||\r\ngetCampaignStorage?.targetAudienceFile?.targetURL)\"\r\n\tclass=\"text-right my-2\">\r\n\t<span class=\"fw-bold\">Filename:</span> {{ getCampaignStorage?.targetAudienceFile?.name ||\r\n\tgetCampaignStorage?.targetAudienceFile?.targetURL }}\r\n</p>\r\n\r\n<div *ngIf=\"!isReadOnlyMode || !fileSelected?.name\"\r\n\tclass=\"row align-items-center mb-3\">\r\n\t<div class=\"col-md-4 col-12\">\r\n\t\t<lib-search *ngIf=\"!isReadOnlyMode\"\r\n\t\t\t[placeholder]=\"'Search'\"\r\n\t\t\t(searchRes)=\"updateSearch($event)\"></lib-search>\r\n\t</div>\r\n\t<div class=\"col-md-8 col-12\">\r\n\t\t<p class=\"text-right mb-0\">\r\n\t\t\tCategory Selected:\r\n\t\t\t<span class=\"font-bold\">\r\n\t\t\t\t{{ categorySelected?.length || 0 }}\r\n\t\t\t</span>\r\n\t\t</p>\r\n\t</div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isReadOnlyMode || !fileSelected?.name; else isShowFile\">\r\n\t<table *ngIf=\"!isLoading; else isSpinner\"\r\n\t\tmat-table\r\n\t\tmatSort\r\n\t\tmatSortDisableClear\r\n\t\tclass=\"table w-100 mb-2\"\r\n\t\t[dataSource]=\"table.dataSource\"\r\n\t\t(matSortChange)=\"sort()\">\r\n\t\t<ng-container matColumnDef=\"select\">\r\n\t\t\t<th *matHeaderCellDef>\r\n\t\t\t\t<ng-container *ngIf=\"!isReadOnlyMode\">\r\n\t\t\t\t\t<mat-checkbox [aria-label]=\"checkboxLabel()\"\r\n\t\t\t\t\t\t[checked]=\"selection.hasValue() && isAllSelected()\"\r\n\t\t\t\t\t\t[indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n\t\t\t\t\t\t(change)=\"masterToggle($event.checked)\">\r\n\t\t\t\t\t</mat-checkbox>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</th>\r\n\t\t\t<td *matCellDef=\"let row\">\r\n\t\t\t\t<ng-container *ngIf=\"!isReadOnlyMode\">\r\n\t\t\t\t\t<mat-checkbox [aria-label]=\"checkboxLabel(row)\"\r\n\t\t\t\t\t\t[checked]=\"isChecked(row)\"\r\n\t\t\t\t\t\t(change)=\"onChecked($event.checked, row)\">\r\n\t\t\t\t\t</mat-checkbox>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\r\n\t\t<ng-container *ngFor=\"let index of [1, 2, 3, 4]\"\r\n\t\t\t[matColumnDef]=\"table.columns[index]\">\r\n\t\t\t<th *matHeaderCellDef\r\n\t\t\t\t[mat-sort-header]=\"table.columns[index]\">\r\n\t\t\t\t{{ table.labels[index] }}\r\n\t\t\t</th>\r\n\r\n\t\t\t<td *matCellDef=\"let row\">\r\n\t\t\t\t<ng-container *ngIf=\"[1, 2].includes(index)\">\r\n\t\t\t\t\t{{ row[table.columns[index]] }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<ng-container *ngIf=\"[3, 4].includes(index)\">\r\n\t\t\t\t\t{{ row[table.columns[index]] | date : ' d MMM y' }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\r\n\t\t<ng-container matColumnDef=\"no-content\">\r\n\t\t\t<th class=\"text-center\"\r\n\t\t\t\t*matHeaderCellDef\r\n\t\t\t\t[colSpan]=\"table.columns.length\">\r\n\t\t\t\tData Not Available\r\n\t\t\t</th>\r\n\t\t</ng-container>\r\n\r\n\t\t<tr mat-header-row\r\n\t\t\t*matHeaderRowDef=\"table.columns\"></tr>\r\n\r\n\t\t<tr mat-header-row\r\n\t\t\tclass=\"no-content\"\r\n\t\t\t*matHeaderRowDef=\"['no-content']\"\r\n\t\t\t[style.display]=\"table.dataSource?.data?.length === 0 ? 'table-row' : 'none'\"></tr>\r\n\r\n\t\t<tr mat-row\r\n\t\t\t*matRowDef=\"let row; columns: table.columns\"></tr>\r\n\t</table>\r\n\r\n\t<mat-paginator *ngIf=\"!isReadOnlyMode\"\r\n\t\tclass=\"campaign-paginator\"\r\n\t\t[length]=\"table.totalData\"\r\n\t\t[pageSize]=\"table.pageSize\"\r\n\t\t[pageIndex]=\"table.getPageIndex()\"\r\n\t\t[pageSizeOptions]=\"[10, 25, 50, 100, 250]\"\r\n\t\t(page)=\"updatePage($event)\"></mat-paginator>\r\n\r\n\t<ng-template #isSpinner>\r\n\t\t<div class=\"text-center my-auto\">\r\n\t\t\t<img src=\"../../../../../assets/images/spinner.svg\" />\r\n\t\t</div>\r\n\t</ng-template>\r\n</ng-container>\r\n\r\n<ng-template #isShowFile>\r\n\t<p class=\"font-PoppinsBold font-14px\">\r\n\t\tFile: <a [href]=\"fileSelected?.targetURL\"\r\n\t\t\ttarget=\"_blank\">{{ fileSelected?.name }}</a>\r\n\t</p>\r\n</ng-template>\r\n",
5926
+ template: "<h3 class=\"font-20px font-PoppinsBold asterix--after mb-2\" [ngClass]=\"{ 'mb-3': !isReadOnlyMode }\">\r\n Target Audience\r\n</h3>\r\n<div *ngIf=\"!isReadOnlyMode\" class=\"d-flex justify-content-between\">\r\n <p>Select your target audience (category)</p>\r\n <div *ngIf=\"isShowUploadCSV\">\r\n <button\r\n mat-stroked-button\r\n color=\"primary-telin\"\r\n class=\"telin-font-color mr-2\"\r\n (click)=\"onDownloadSampleService()\"\r\n >\r\n Download Template\r\n </button>\r\n\r\n <button\r\n mat-flat-button\r\n color=\"primary-telin-blue2\"\r\n [disabled]=\"isUpload\"\r\n (click)=\"filePicker.click()\"\r\n >\r\n Upload XLSX\r\n </button>\r\n\r\n <input\r\n #filePicker\r\n hidden\r\n type=\"file\"\r\n [accept]=\"extFileAccepted.join()\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </div>\r\n</div>\r\n\r\n<p\r\n *ngIf=\"\r\n !isReadOnlyMode &&\r\n (getCampaignStorage?.targetAudienceFile?.name ||\r\n getCampaignStorage?.targetAudienceFile?.targetURL)\r\n \"\r\n class=\"text-right my-2\"\r\n>\r\n <span class=\"fw-bold\">Filename:</span>\r\n {{\r\n getCampaignStorage?.targetAudienceFile?.name ||\r\n getCampaignStorage?.targetAudienceFile?.targetURL\r\n }}\r\n</p>\r\n\r\n<div *ngIf=\"!isReadOnlyMode || !fileSelected?.name\" class=\"row align-items-center mb-3\">\r\n <div class=\"col-md-4 col-12\">\r\n <lib-search\r\n *ngIf=\"!isReadOnlyMode\"\r\n [placeholder]=\"'Search'\"\r\n (searchRes)=\"updateSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n <div class=\"col-md-8 col-12\">\r\n <p class=\"text-right mb-0\">\r\n Category Selected:\r\n <span class=\"font-bold\">\r\n {{ categorySelected?.length || 0 }}\r\n </span>\r\n </p>\r\n </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isReadOnlyMode || !fileSelected?.name; else isShowFile\">\r\n <table\r\n *ngIf=\"!isLoading; else isSpinner\"\r\n mat-table\r\n matSort\r\n matSortDisableClear\r\n class=\"table w-100 mb-2\"\r\n [dataSource]=\"table.dataSource\"\r\n (matSortChange)=\"sort()\"\r\n >\r\n <ng-container matColumnDef=\"select\">\r\n <th *matHeaderCellDef>\r\n <ng-container *ngIf=\"!isReadOnlyMode\">\r\n <mat-checkbox\r\n [aria-label]=\"checkboxLabel()\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n (change)=\"masterToggle($event.checked)\"\r\n >\r\n </mat-checkbox>\r\n </ng-container>\r\n </th>\r\n <td *matCellDef=\"let row\">\r\n <ng-container *ngIf=\"!isReadOnlyMode\">\r\n <mat-checkbox\r\n [aria-label]=\"checkboxLabel(row)\"\r\n [checked]=\"isChecked(row)\"\r\n (change)=\"onChecked($event.checked, row)\"\r\n >\r\n </mat-checkbox>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let index of [1, 2, 3, 4, 5]\" [matColumnDef]=\"table.columns[index]\">\r\n <th *matHeaderCellDef [mat-sort-header]=\"table.columns[index]\">\r\n {{ table.labels[index] }}\r\n </th>\r\n\r\n <td *matCellDef=\"let row\">\r\n <ng-container *ngIf=\"[1, 2, 3].includes(index)\">\r\n {{ row[table.columns[index]] }}\r\n </ng-container>\r\n <ng-container *ngIf=\"[4, 5].includes(index)\">\r\n {{ row[table.columns[index]] | date: ' d MMM y' }}\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"no-content\">\r\n <th class=\"text-center\" *matHeaderCellDef [colSpan]=\"table.columns.length\">\r\n Data Not Available\r\n </th>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"table.columns\"></tr>\r\n\r\n <tr\r\n mat-header-row\r\n class=\"no-content\"\r\n *matHeaderRowDef=\"['no-content']\"\r\n [style.display]=\"table.dataSource?.data?.length === 0 ? 'table-row' : 'none'\"\r\n ></tr>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: table.columns\"></tr>\r\n </table>\r\n\r\n <mat-paginator\r\n *ngIf=\"!isReadOnlyMode\"\r\n class=\"campaign-paginator\"\r\n [length]=\"table.totalData\"\r\n [pageSize]=\"table.pageSize\"\r\n [pageIndex]=\"table.getPageIndex()\"\r\n [pageSizeOptions]=\"[10, 25, 50, 100, 250]\"\r\n (page)=\"updatePage($event)\"\r\n ></mat-paginator>\r\n\r\n <ng-template #isSpinner>\r\n <div class=\"text-center my-auto\">\r\n <img src=\"../../../../../assets/images/spinner.svg\" />\r\n </div>\r\n </ng-template>\r\n</ng-container>\r\n\r\n<ng-template #isShowFile>\r\n <p class=\"font-PoppinsBold font-14px\">\r\n File: <a [href]=\"fileSelected?.targetURL\" target=\"_blank\">{{ fileSelected?.name }}</a>\r\n </p>\r\n</ng-template>\r\n",
5900
5927
  styles: ["::ng-deep .mat-paginator.campaign-paginator .mat-paginator-container{align-items:normal}::ng-deep .mat-paginator.campaign-paginator .mat-tab-body{background-color:#fff}::ng-deep .mat-paginator.campaign-paginator .mat-form-field-underline{bottom:0}"]
5901
5928
  })
5902
5929
  ], NewNumberBasesComponent);