@adlfe/campaign-management-library 2.11.7 → 2.11.8
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.
- package/bundles/adlfe-campaign-management-library.umd.js +7 -5
- package/bundles/adlfe-campaign-management-library.umd.js.map +1 -1
- package/bundles/adlfe-campaign-management-library.umd.min.js +1 -1
- package/bundles/adlfe-campaign-management-library.umd.min.js.map +1 -1
- package/esm2015/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.js +7 -5
- package/esm5/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.js +8 -6
- package/fesm2015/adlfe-campaign-management-library.js +6 -4
- package/fesm2015/adlfe-campaign-management-library.js.map +1 -1
- package/fesm5/adlfe-campaign-management-library.js +7 -5
- package/fesm5/adlfe-campaign-management-library.js.map +1 -1
- package/package.json +1 -1
|
@@ -4333,16 +4333,18 @@ var GeneralInformationWAComponent = /** @class */ (function () {
|
|
|
4333
4333
|
};
|
|
4334
4334
|
GeneralInformationWAComponent.prototype.validateText = function (account) {
|
|
4335
4335
|
var _this = this;
|
|
4336
|
-
var _a;
|
|
4336
|
+
var _a, _b;
|
|
4337
4337
|
this.isCheckUtility = true;
|
|
4338
|
-
var
|
|
4339
|
-
if (!text
|
|
4338
|
+
var _c = this.form.value, from = _c.from, text = _c.text;
|
|
4339
|
+
if (!text || !from)
|
|
4340
|
+
return;
|
|
4341
|
+
if (!((_a = from) === null || _a === void 0 ? void 0 : _a.directSendEnabled))
|
|
4340
4342
|
return;
|
|
4341
4343
|
var headers = new HttpHeaders()
|
|
4342
4344
|
.set('Authorization', 'Bearer ' + localStorage.getItem('telin.accessToken'))
|
|
4343
4345
|
.set('Access-Control-Allow-Origin', '*');
|
|
4344
4346
|
this.httpClient
|
|
4345
|
-
.post(environment.api + "/message/direct-send/" + ((
|
|
4347
|
+
.post(environment.api + "/message/direct-send/" + ((_b = (from || account)) === null || _b === void 0 ? void 0 : _b.id), {
|
|
4346
4348
|
type: 'text',
|
|
4347
4349
|
text: { body: text },
|
|
4348
4350
|
}, { headers: headers })
|
|
@@ -4782,7 +4784,7 @@ var GeneralInformationWAComponent = /** @class */ (function () {
|
|
|
4782
4784
|
GeneralInformationWAComponent = __decorate([
|
|
4783
4785
|
Component({
|
|
4784
4786
|
selector: 'lib-general-information-wa',
|
|
4785
|
-
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",
|
|
4787
|
+
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",
|
|
4786
4788
|
styles: [".asterix--after:after{content:\"*\";color:red}"]
|
|
4787
4789
|
})
|
|
4788
4790
|
], GeneralInformationWAComponent);
|