@adlfe/campaign-management-library 2.14.3 → 2.14.4
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 +100 -54
- package/bundles/adlfe-campaign-management-library.umd.js.map +1 -1
- package/bundles/adlfe-campaign-management-library.umd.min.js +2 -2
- 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 +51 -21
- package/esm2015/lib/campaign-management/modules/new-campaign/new-campaign.component.js +30 -26
- package/esm2015/lib/campaign-management/modules/new-campaign/new-number-bases/new-number-bases.component.js +22 -10
- package/esm5/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.js +51 -21
- package/esm5/lib/campaign-management/modules/new-campaign/new-campaign.component.js +30 -26
- package/esm5/lib/campaign-management/modules/new-campaign/new-number-bases/new-number-bases.component.js +22 -10
- package/fesm2015/adlfe-campaign-management-library.js +100 -54
- package/fesm2015/adlfe-campaign-management-library.js.map +1 -1
- package/fesm5/adlfe-campaign-management-library.js +100 -54
- package/fesm5/adlfe-campaign-management-library.js.map +1 -1
- package/package.json +1 -1
|
@@ -2920,7 +2920,7 @@
|
|
|
2920
2920
|
var subs = this.apiAdapterService
|
|
2921
2921
|
.executeApiRequest([], "/campaign/" + this.campaignID, 'GET')
|
|
2922
2922
|
.subscribe(function (resp) {
|
|
2923
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68;
|
|
2923
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72;
|
|
2924
2924
|
if (!resp)
|
|
2925
2925
|
return;
|
|
2926
2926
|
var generalInformation = {
|
|
@@ -2949,47 +2949,51 @@
|
|
|
2949
2949
|
paramBody: (_20 = (_19 = (_18 = resp.data) === null || _18 === void 0 ? void 0 : _18.details) === null || _19 === void 0 ? void 0 : _19.template) === null || _20 === void 0 ? void 0 : _20.data,
|
|
2950
2950
|
paramButton: (_23 = (_22 = (_21 = resp.data) === null || _21 === void 0 ? void 0 : _21.details) === null || _22 === void 0 ? void 0 : _22.template) === null || _23 === void 0 ? void 0 : _23.button,
|
|
2951
2951
|
otpValue: (_28 = __spread((_27 = (_26 = (_25 = (_24 = resp.data) === null || _24 === void 0 ? void 0 : _24.details) === null || _25 === void 0 ? void 0 : _25.template) === null || _26 === void 0 ? void 0 : _26.data, (_27 !== null && _27 !== void 0 ? _27 : [])))) === null || _28 === void 0 ? void 0 : _28.pop(),
|
|
2952
|
+
variables: (((_31 = (_30 = (_29 = resp.data) === null || _29 === void 0 ? void 0 : _29.details) === null || _30 === void 0 ? void 0 : _30.template) === null || _31 === void 0 ? void 0 : _31.data) || []).map(function (val) { return ({
|
|
2953
|
+
paramName: val,
|
|
2954
|
+
}); }),
|
|
2955
|
+
isUseExistingTemplate: !!((_32 = resp.data) === null || _32 === void 0 ? void 0 : _32.templateName),
|
|
2952
2956
|
template: {
|
|
2953
|
-
ID: (
|
|
2954
|
-
name: (
|
|
2955
|
-
lang: (
|
|
2956
|
-
platform: (
|
|
2957
|
-
headerURL: (
|
|
2957
|
+
ID: (_35 = (_34 = (_33 = resp.data) === null || _33 === void 0 ? void 0 : _33.details) === null || _34 === void 0 ? void 0 : _34.template) === null || _35 === void 0 ? void 0 : _35.id,
|
|
2958
|
+
name: (_38 = (_37 = (_36 = resp.data) === null || _36 === void 0 ? void 0 : _36.details) === null || _37 === void 0 ? void 0 : _37.template) === null || _38 === void 0 ? void 0 : _38.name,
|
|
2959
|
+
lang: (_41 = (_40 = (_39 = resp.data) === null || _39 === void 0 ? void 0 : _39.details) === null || _40 === void 0 ? void 0 : _40.template) === null || _41 === void 0 ? void 0 : _41.lang,
|
|
2960
|
+
platform: (_42 = resp.data) === null || _42 === void 0 ? void 0 : _42.platform,
|
|
2961
|
+
headerURL: (_45 = (_44 = (_43 = resp.data) === null || _43 === void 0 ? void 0 : _43.details) === null || _44 === void 0 ? void 0 : _44.template) === null || _45 === void 0 ? void 0 : _45.headerURL,
|
|
2958
2962
|
header: {
|
|
2959
|
-
examples: (
|
|
2963
|
+
examples: (_48 = (_47 = (_46 = resp.data) === null || _46 === void 0 ? void 0 : _46.details) === null || _47 === void 0 ? void 0 : _47.template) === null || _48 === void 0 ? void 0 : _48.header,
|
|
2960
2964
|
},
|
|
2961
2965
|
body: {
|
|
2962
|
-
examples: (
|
|
2966
|
+
examples: (_51 = (_50 = (_49 = resp.data) === null || _49 === void 0 ? void 0 : _49.details) === null || _50 === void 0 ? void 0 : _50.template) === null || _51 === void 0 ? void 0 : _51.data,
|
|
2963
2967
|
},
|
|
2964
|
-
buttons: (
|
|
2965
|
-
ClientId: (
|
|
2966
|
-
ClientName: (
|
|
2968
|
+
buttons: (_54 = (_53 = (_52 = resp.data) === null || _52 === void 0 ? void 0 : _52.details) === null || _53 === void 0 ? void 0 : _53.template) === null || _54 === void 0 ? void 0 : _54.button,
|
|
2969
|
+
ClientId: (_55 = resp.data) === null || _55 === void 0 ? void 0 : _55.clientId,
|
|
2970
|
+
ClientName: (_56 = resp.data) === null || _56 === void 0 ? void 0 : _56.clientName,
|
|
2967
2971
|
},
|
|
2968
|
-
isUpload: ((
|
|
2969
|
-
fileId: (
|
|
2972
|
+
isUpload: ((_57 = resp.data) === null || _57 === void 0 ? void 0 : _57.fileId) !== '',
|
|
2973
|
+
fileId: (_58 = resp.data) === null || _58 === void 0 ? void 0 : _58.fileId,
|
|
2970
2974
|
};
|
|
2971
2975
|
localStorage.setItem('telin.campaign', JSON.stringify(__assign(__assign({}, _this.getCampaignStorage), {
|
|
2972
2976
|
generalInformation: {
|
|
2973
|
-
id: (
|
|
2977
|
+
id: (_59 = resp.data) === null || _59 === void 0 ? void 0 : _59.id,
|
|
2974
2978
|
form: generalInformation,
|
|
2975
2979
|
},
|
|
2976
|
-
failover: (
|
|
2977
|
-
targetAudience: (
|
|
2980
|
+
failover: (_60 = resp.data) === null || _60 === void 0 ? void 0 : _60.failover,
|
|
2981
|
+
targetAudience: (_61 = resp.data) === null || _61 === void 0 ? void 0 : _61.targets,
|
|
2978
2982
|
targetAudienceFile: {
|
|
2979
|
-
name: (
|
|
2980
|
-
targetURL: (
|
|
2983
|
+
name: (_62 = resp.data) === null || _62 === void 0 ? void 0 : _62.fileName,
|
|
2984
|
+
targetURL: (_63 = resp.data) === null || _63 === void 0 ? void 0 : _63.targetURL,
|
|
2981
2985
|
},
|
|
2982
2986
|
scheduler: {
|
|
2983
|
-
schedulerType: ((
|
|
2987
|
+
schedulerType: ((_64 = resp.data) === null || _64 === void 0 ? void 0 : _64.scheduleType) === 'MULTI'
|
|
2984
2988
|
? 'ONE_TIME'
|
|
2985
|
-
: (
|
|
2986
|
-
startDate: (
|
|
2987
|
-
startTime: (
|
|
2988
|
-
isRepeat: ((
|
|
2989
|
-
delivery: (
|
|
2989
|
+
: (_65 = resp.data) === null || _65 === void 0 ? void 0 : _65.scheduleType,
|
|
2990
|
+
startDate: (_67 = (_66 = resp.data) === null || _66 === void 0 ? void 0 : _66.startTime) === null || _67 === void 0 ? void 0 : _67.split(' ')[0],
|
|
2991
|
+
startTime: (_69 = (_68 = resp.data) === null || _68 === void 0 ? void 0 : _68.startTime) === null || _69 === void 0 ? void 0 : _69.split(' ')[1],
|
|
2992
|
+
isRepeat: ((_70 = resp.data) === null || _70 === void 0 ? void 0 : _70.scheduleType) === 'MULTI',
|
|
2993
|
+
delivery: (_71 = resp.data) === null || _71 === void 0 ? void 0 : _71.repeat,
|
|
2990
2994
|
},
|
|
2991
2995
|
})));
|
|
2992
|
-
_this.isLine = ((
|
|
2996
|
+
_this.isLine = ((_72 = resp.data) === null || _72 === void 0 ? void 0 : _72.platform) === 'LINE';
|
|
2993
2997
|
_this.isLoading = false;
|
|
2994
2998
|
_this.initWizard();
|
|
2995
2999
|
}, function () {
|
|
@@ -4397,7 +4401,7 @@
|
|
|
4397
4401
|
};
|
|
4398
4402
|
GeneralInformationWAComponent.prototype.initEdit = function () {
|
|
4399
4403
|
var _this = this;
|
|
4400
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
|
|
4404
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14;
|
|
4401
4405
|
var storageData = this.getCampaignStorage;
|
|
4402
4406
|
var formValues = (_b = (_a = storageData) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.form;
|
|
4403
4407
|
if (!storageData ||
|
|
@@ -4415,10 +4419,13 @@
|
|
|
4415
4419
|
(_v = this.getControl('isUpload')) === null || _v === void 0 ? void 0 : _v.setValue((_w = formValues) === null || _w === void 0 ? void 0 : _w.isUpload);
|
|
4416
4420
|
(_x = this.getControl('fileId')) === null || _x === void 0 ? void 0 : _x.setValue((_y = formValues) === null || _y === void 0 ? void 0 : _y.fileId);
|
|
4417
4421
|
(_z = this.getControl('otpValue')) === null || _z === void 0 ? void 0 : _z.setValue((_0 = formValues) === null || _0 === void 0 ? void 0 : _0.otpValue);
|
|
4418
|
-
(_1 = this.getControl('isUseExistingTemplate')) === null || _1 === void 0 ? void 0 : _1.setValue(
|
|
4419
|
-
|
|
4420
|
-
|
|
4421
|
-
|
|
4422
|
+
(_1 = this.getControl('isUseExistingTemplate')) === null || _1 === void 0 ? void 0 : _1.setValue(((_2 = formValues) === null || _2 === void 0 ? void 0 : _2.isUseExistingTemplate) !== undefined
|
|
4423
|
+
? formValues.isUseExistingTemplate
|
|
4424
|
+
: !!((_4 = (_3 = formValues) === null || _3 === void 0 ? void 0 : _3.template) === null || _4 === void 0 ? void 0 : _4.name));
|
|
4425
|
+
(_5 = this.getControl('isNeedSave')) === null || _5 === void 0 ? void 0 : _5.setValue(!!((_6 = formValues) === null || _6 === void 0 ? void 0 : _6.isNeedSave));
|
|
4426
|
+
(_7 = this.getControl('isDownloadVariableXLS')) === null || _7 === void 0 ? void 0 : _7.setValue((_8 = formValues) === null || _8 === void 0 ? void 0 : _8.isDownloadVariableXLS);
|
|
4427
|
+
(_9 = this.getControl('ttl')) === null || _9 === void 0 ? void 0 : _9.setValue((_10 = formValues) === null || _10 === void 0 ? void 0 : _10.ttl);
|
|
4428
|
+
var savedVariables = (_11 = formValues) === null || _11 === void 0 ? void 0 : _11.variables;
|
|
4422
4429
|
if (savedVariables && Array.isArray(savedVariables) && savedVariables.length > 0) {
|
|
4423
4430
|
this.variables.clear();
|
|
4424
4431
|
savedVariables.forEach(function (item) {
|
|
@@ -4427,8 +4434,8 @@
|
|
|
4427
4434
|
}));
|
|
4428
4435
|
});
|
|
4429
4436
|
}
|
|
4430
|
-
this.isHaveTemplateParam = (
|
|
4431
|
-
this.getTemplateOptionService(null, (
|
|
4437
|
+
this.isHaveTemplateParam = (_12 = this.getControl('isUpload')) === null || _12 === void 0 ? void 0 : _12.value;
|
|
4438
|
+
this.getTemplateOptionService(null, (_14 = (_13 = this.getControl('template')) === null || _13 === void 0 ? void 0 : _13.value) === null || _14 === void 0 ? void 0 : _14.name);
|
|
4432
4439
|
};
|
|
4433
4440
|
GeneralInformationWAComponent.prototype.initValidation = function () {
|
|
4434
4441
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17;
|
|
@@ -4804,7 +4811,7 @@
|
|
|
4804
4811
|
});
|
|
4805
4812
|
GeneralInformationWAComponent.prototype.updateTemplate = function (template) {
|
|
4806
4813
|
var _this = this;
|
|
4807
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34;
|
|
4814
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40;
|
|
4808
4815
|
this.isShowParameter = false;
|
|
4809
4816
|
if (!template)
|
|
4810
4817
|
return;
|
|
@@ -4880,7 +4887,33 @@
|
|
|
4880
4887
|
paramValue = each;
|
|
4881
4888
|
_this.addParamBody(paramValue);
|
|
4882
4889
|
});
|
|
4883
|
-
|
|
4890
|
+
// ==========================================================
|
|
4891
|
+
// TAMBAHAN: Generate Variable Dinamis dari template.body.examples
|
|
4892
|
+
// ==========================================================
|
|
4893
|
+
this.variables.clear();
|
|
4894
|
+
if (((_34 = template.body) === null || _34 === void 0 ? void 0 : _34.examples) && template.body.examples.length > 0) {
|
|
4895
|
+
var isSavedTemplateMatches_1 = ((_36 = (_35 = formStorage) === null || _35 === void 0 ? void 0 : _35.template) === null || _36 === void 0 ? void 0 : _36.name) === template.name;
|
|
4896
|
+
template.body.examples.forEach(function (exampleValue, index) {
|
|
4897
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
4898
|
+
var savedVariable = '';
|
|
4899
|
+
if (isSavedTemplateMatches_1) {
|
|
4900
|
+
savedVariable = (_d = (_c = (_b = (_a = formStorage) === null || _a === void 0 ? void 0 : _a.variables) === null || _b === void 0 ? void 0 : _b[index]) === null || _c === void 0 ? void 0 : _c.paramName, (_d !== null && _d !== void 0 ? _d : (_g = (_f = (_e = formStorage) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g[index]));
|
|
4901
|
+
}
|
|
4902
|
+
var finalValue = savedVariable ? savedVariable : '';
|
|
4903
|
+
_this.variables.push(new forms.FormGroup({
|
|
4904
|
+
paramName: new forms.FormControl({
|
|
4905
|
+
value: finalValue,
|
|
4906
|
+
disabled: _this.isReadOnlyMode,
|
|
4907
|
+
}, forms.Validators.required),
|
|
4908
|
+
}));
|
|
4909
|
+
});
|
|
4910
|
+
}
|
|
4911
|
+
if ((_37 = template.body) === null || _37 === void 0 ? void 0 : _37.text) {
|
|
4912
|
+
(_38 = this.getControl('text')) === null || _38 === void 0 ? void 0 : _38.setValue(template.body.text);
|
|
4913
|
+
(_39 = this.getControl('text')) === null || _39 === void 0 ? void 0 : _39.updateValueAndValidity();
|
|
4914
|
+
}
|
|
4915
|
+
// ==========================================================
|
|
4916
|
+
(_40 = template.buttons) === null || _40 === void 0 ? void 0 : _40.forEach(function (each, index) {
|
|
4884
4917
|
var _a, _b, _c, _d;
|
|
4885
4918
|
_this.addParamButton();
|
|
4886
4919
|
var button = _this.getButton;
|
|
@@ -4904,6 +4937,14 @@
|
|
|
4904
4937
|
(_d = lastControl) === null || _d === void 0 ? void 0 : _d.updateValueAndValidity();
|
|
4905
4938
|
}
|
|
4906
4939
|
});
|
|
4940
|
+
var paramBodyArray = this.form.get('paramBody');
|
|
4941
|
+
paramBodyArray.clearValidators();
|
|
4942
|
+
paramBodyArray.controls.forEach(function (ctrl) {
|
|
4943
|
+
var _a, _b;
|
|
4944
|
+
(_a = ctrl.get('name')) === null || _a === void 0 ? void 0 : _a.clearValidators();
|
|
4945
|
+
(_b = ctrl.get('name')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity();
|
|
4946
|
+
});
|
|
4947
|
+
paramBodyArray.updateValueAndValidity();
|
|
4907
4948
|
};
|
|
4908
4949
|
GeneralInformationWAComponent.prototype.updateMediaType = function (_mediaType) {
|
|
4909
4950
|
if (_mediaType === EnumData.MEDIA_TYPE_LOCATION)
|
|
@@ -4999,19 +5040,12 @@
|
|
|
4999
5040
|
(_a = this.getControl('isDownloadVariableXLS')) === null || _a === void 0 ? void 0 : _a.setValue(false);
|
|
5000
5041
|
this.variables.clear();
|
|
5001
5042
|
this.updateVariableDownloadXLS(false);
|
|
5043
|
+
(_b = this.getControl('text')) === null || _b === void 0 ? void 0 : _b.setValue('');
|
|
5002
5044
|
if (useExisting) {
|
|
5003
|
-
(
|
|
5004
|
-
|
|
5005
|
-
(_c = this.getControl('text')) === null || _c === void 0 ? void 0 : _c.clearValidators();
|
|
5006
|
-
(_d = this.getControl('text')) === null || _d === void 0 ? void 0 : _d.setValue('Halo {{1}}, ini adalah kode verifikasi kamu: {{2}}');
|
|
5045
|
+
(_c = this.getControl('template')) === null || _c === void 0 ? void 0 : _c.setValidators(forms.Validators.required);
|
|
5046
|
+
(_d = this.getControl('text')) === null || _d === void 0 ? void 0 : _d.clearValidators();
|
|
5007
5047
|
(_e = this.getControl('text')) === null || _e === void 0 ? void 0 : _e.updateValueAndValidity();
|
|
5008
5048
|
(_f = this.getControl('template')) === null || _f === void 0 ? void 0 : _f.updateValueAndValidity();
|
|
5009
|
-
this.variables.push(new forms.FormGroup({
|
|
5010
|
-
paramName: new forms.FormControl('', forms.Validators.required),
|
|
5011
|
-
}));
|
|
5012
|
-
this.variables.push(new forms.FormGroup({
|
|
5013
|
-
paramName: new forms.FormControl('', forms.Validators.required),
|
|
5014
|
-
}));
|
|
5015
5049
|
}
|
|
5016
5050
|
else {
|
|
5017
5051
|
(_g = this.getControl('template')) === null || _g === void 0 ? void 0 : _g.reset();
|
|
@@ -5111,7 +5145,7 @@
|
|
|
5111
5145
|
GeneralInformationWAComponent = __decorate([
|
|
5112
5146
|
core.Component({
|
|
5113
5147
|
selector: 'lib-general-information-wa',
|
|
5114
|
-
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 <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 <!-- rizal -->\r\n <h5\r\n class=\"mb-3 font-weight-bold mt-4\"\r\n *ngIf=\"(!isUsingExcelBulk && buttonParamsControls.length > 0) || isShowParameter\"\r\n >\r\n Button Parameter\r\n </h5>\r\n <div\r\n class=\"button-parameter-section\"\r\n *ngIf=\"buttonParamsControls.length > 0 && !isUsingExcelBulk\"\r\n >\r\n <div formArrayName=\"buttonParams\">\r\n <div\r\n *ngFor=\"let btnControl of buttonParamsControls; let i = index\"\r\n [formGroupName]=\"i\"\r\n >\r\n <p class=\"font-14px font-PoppinsBold mt-3\">Button {{ i + 1 }}</p>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter 1</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"payload\"\r\n placeholder=\"Parameter 1\"\r\n maxlength=\"256\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- titus -->\r\n <ng-container *ngIf=\"isShowParameter\">\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 suffix=\"seconds\"\r\n hint=\"The default TTL is 30 days (2,592,000 seconds) if no value is provided.\"\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 <div class=\"template-container mt-5\" *ngIf=\"!form.get('isDownloadVariableXLS')?.value\">\r\n <div class=\"add-variable-wrapper\">\r\n <button mat-button class=\"btn-add-variable\" (click)=\"addVariable()\">\r\n <mat-icon class=\"icon-small\">add</mat-icon> Add Variable\r\n </button>\r\n </div>\r\n\r\n <div class=\"body-content-wrapper\">\r\n <h3 class=\"body-content-title\">Body Content</h3>\r\n <p class=\"body-content-subtitle\">\r\n Input the parameter to show during the preview. You can use predefined\r\n variable, drag and drop to text field below\r\n </p>\r\n <div class=\"predefined-variable-wrapper\">\r\n <span class=\"btn-predefined\">\r\n <mat-icon class=\"icon-small\">attach_money</mat-icon>\r\n Unsubscribe Account\r\n </span>\r\n </div>\r\n <div class=\"variables-list\" formArrayName=\"variables\">\r\n <div\r\n class=\"variable-row d-flex align-items-start mb-3\"\r\n *ngFor=\"let variable of variables.controls; let i = index\"\r\n [formGroupName]=\"i\"\r\n >\r\n <div class=\"variable-sequence mr-3\">\r\n {{ '{' + '{' + (i + 1) + '}' + '}' }}\r\n </div>\r\n <div class=\"variable-input-wrapper flex-grow-1\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n class=\"w-100 custom-variable-field\"\r\n >\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"e.g. Name, Verification code\"\r\n />\r\n </mat-form-field>\r\n\r\n <ng-container\r\n *ngFor=\"let validation of validationMessages?.paramName\"\r\n >\r\n <div\r\n class=\"custom-error-text text-right\"\r\n *ngIf=\"\r\n variable.get('paramName')?.hasError(validation.type) &&\r\n (variable.get('paramName')?.touched ||\r\n variable.get('paramName')?.dirty)\r\n \"\r\n >\r\n <span class=\"font-12px m-0\">{{ validation.message }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"btn-delete ml-3\"\r\n (click)=\"removeVariable(i)\"\r\n >\r\n <mat-icon color=\"warn\">delete_outline</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <mat-checkbox\r\n labelPosition=\"before\"\r\n formControlName=\"isDownloadVariableXLS\"\r\n (change)=\"updateVariableDownloadXLS($event.checked)\"\r\n >\r\n Using Download XLSX\r\n </mat-checkbox>\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 suffix=\"Seconds\"\r\n hint=\"The default TTL is 30 days (2,592,000 seconds) if no value is provided.\"\r\n ></app-input>\r\n </div>\r\n <div\r\n class=\"template-container mt-5\"\r\n *ngIf=\"!form.get('isDownloadVariableXLS')?.value\"\r\n formArrayName=\"variables\"\r\n >\r\n <div class=\"font-bold mb-3\">Variables</div>\r\n\r\n <div class=\"form-group mb-3\" [formGroupName]=\"0\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100 custom-variable-field\"\r\n >\r\n <mat-label>{{ '{' + '{' + 1 + '}' + '}' }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"Name\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"form-group mb-3\" [formGroupName]=\"1\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100 custom-variable-field\"\r\n >\r\n <mat-label>{{ '{' + '{' + 2 + '}' + '}' }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"Verification code\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <mat-checkbox\r\n labelPosition=\"before\"\r\n formControlName=\"isDownloadVariableXLS\"\r\n (change)=\"updateVariableDownloadXLS($event.checked)\"\r\n >\r\n Using Download XLSX\r\n </mat-checkbox>\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",
|
|
5148
|
+
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 <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 <!-- rizal -->\r\n <h5\r\n class=\"mb-3 font-weight-bold mt-4\"\r\n *ngIf=\"(!isUsingExcelBulk && buttonParamsControls.length > 0) || isShowParameter\"\r\n >\r\n Button Parameter\r\n </h5>\r\n <div\r\n class=\"button-parameter-section\"\r\n *ngIf=\"buttonParamsControls.length > 0 && !isUsingExcelBulk\"\r\n >\r\n <div formArrayName=\"buttonParams\">\r\n <div\r\n *ngFor=\"let btnControl of buttonParamsControls; let i = index\"\r\n [formGroupName]=\"i\"\r\n >\r\n <p class=\"font-14px font-PoppinsBold mt-3\">Button {{ i + 1 }}</p>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter 1</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"payload\"\r\n placeholder=\"Parameter 1\"\r\n maxlength=\"256\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- titus -->\r\n <ng-container *ngIf=\"isShowParameter\">\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 suffix=\"seconds\"\r\n hint=\"The default TTL is 30 days (2,592,000 seconds) if no value is provided.\"\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 </ng-container>\r\n <!-- variables start -->\r\n <ng-container *ngIf=\"!form.get('isDownloadVariableXLS')?.value\">\r\n <div class=\"template-container mt-5\" *ngIf=\"!form.get('isUseExistingTemplate')?.value\">\r\n <div class=\"add-variable-wrapper\">\r\n <button mat-button class=\"btn-add-variable\" (click)=\"addVariable()\">\r\n <mat-icon class=\"icon-small\">add</mat-icon> Add Variable\r\n </button>\r\n </div>\r\n\r\n <div class=\"body-content-wrapper\">\r\n <h3 class=\"body-content-title\">Body Content</h3>\r\n <p class=\"body-content-subtitle\">\r\n Input the parameter to show during the preview. You can use predefined\r\n variable, drag and drop to text field below\r\n </p>\r\n <div class=\"predefined-variable-wrapper\">\r\n <span class=\"btn-predefined\">\r\n <mat-icon class=\"icon-small\">attach_money</mat-icon>\r\n Unsubscribe Account\r\n </span>\r\n </div>\r\n <div class=\"variables-list\" formArrayName=\"variables\">\r\n <div\r\n class=\"variable-row d-flex align-items-start mb-3\"\r\n *ngFor=\"let variable of variables.controls; let i = index\"\r\n [formGroupName]=\"i\"\r\n >\r\n <div class=\"variable-sequence mr-3\">\r\n {{ '{' + '{' + (i + 1) + '}' + '}' }}\r\n </div>\r\n <div class=\"variable-input-wrapper flex-grow-1\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n class=\"w-100 custom-variable-field\"\r\n >\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"e.g. Name, Verification code\"\r\n />\r\n </mat-form-field>\r\n\r\n <ng-container\r\n *ngFor=\"let validation of validationMessages?.paramName\"\r\n >\r\n <div\r\n class=\"custom-error-text text-right\"\r\n *ngIf=\"\r\n variable.get('paramName')?.hasError(validation.type) &&\r\n (variable.get('paramName')?.touched ||\r\n variable.get('paramName')?.dirty)\r\n \"\r\n >\r\n <span class=\"font-12px m-0\">{{ validation.message }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"btn-delete ml-3\"\r\n (click)=\"removeVariable(i)\"\r\n >\r\n <mat-icon color=\"warn\">delete_outline</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- ====================================================== -->\r\n <!-- VIEW 2: USE EXISTING TEMPLATE (UI Clean, cuma input) -->\r\n <!-- ====================================================== -->\r\n <div\r\n class=\"existing-template-variables mt-4\"\r\n *ngIf=\"form.get('isUseExistingTemplate')?.value && variables.controls.length > 0\"\r\n >\r\n <div class=\"font-bold mb-3\">Variables</div>\r\n <!-- Looping array yang sama persis, tapi tanpa ornamen -->\r\n <div formArrayName=\"variables\">\r\n <div\r\n class=\"form-group mb-3\"\r\n *ngFor=\"let variable of variables.controls; let i = index\"\r\n [formGroupName]=\"i\"\r\n >\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100 custom-variable-field\"\r\n >\r\n <!-- Label dinamis: {{1}}, {{2}}, dst -->\r\n <mat-label>{{ '{' + '{' + (i + 1) + '}' + '}' }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"Input value here...\"\r\n />\r\n </mat-form-field>\r\n\r\n <!-- Validasi Error -->\r\n <ng-container *ngFor=\"let validation of validationMessages?.paramName\">\r\n <div\r\n class=\"custom-error-text text-right\"\r\n *ngIf=\"\r\n variable.get('paramName')?.hasError(validation.type) &&\r\n (variable.get('paramName')?.touched ||\r\n variable.get('paramName')?.dirty)\r\n \"\r\n >\r\n <span class=\"font-12px m-0\">{{ validation.message }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"d-flex justify-content-end\">\r\n <mat-checkbox\r\n labelPosition=\"before\"\r\n formControlName=\"isDownloadVariableXLS\"\r\n (change)=\"updateVariableDownloadXLS($event.checked)\"\r\n >\r\n Using Download XLSX\r\n </mat-checkbox>\r\n </div>\r\n <!-- variables end -->\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 suffix=\"Seconds\"\r\n hint=\"The default TTL is 30 days (2,592,000 seconds) if no value is provided.\"\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",
|
|
5115
5149
|
styles: [".asterix--after:after{content:\"*\";color:red}.template-container{background-color:#fff;border-radius:.5rem;width:100%;max-width:56rem;box-sizing:border-box}.template-container .variable-wapper{margin-bottom:.5rem;display:flex;align-items:center}.template-container .add-variable-wrapper{display:flex;align-items:center;justify-content:flex-end;margin-bottom:.5rem}.template-container .add-variable-wrapper .btn-add-variable{color:#3b82f6!important}.template-container .body-content-wrapper{background-color:#d1e4fd;border-radius:.5rem;padding:1.5rem;margin-bottom:.5rem}.template-container .body-content-wrapper .body-content-title{color:#1e293b;font-size:1.125rem;font-weight:700;margin:0 0 .5rem}.template-container .body-content-wrapper .body-content-subtitle{color:#6b7280;font-size:.875rem;margin:0 0 1.25rem}.template-container .body-content-wrapper .predefined-variable-wrapper{margin-bottom:1.5rem}.template-container .body-content-wrapper .predefined-variable-wrapper .btn-predefined{display:inline-flex;align-items:center;background-color:#22c55e;color:#fff;font-size:.75rem;font-weight:600;padding:.375rem .75rem;border-radius:9999px;cursor:grab;transition:background-color .2s}.template-container .body-content-wrapper .predefined-variable-wrapper .btn-predefined:hover{background-color:#16a34a}.template-container .body-content-wrapper .predefined-variable-wrapper .btn-predefined .icon-small{font-size:16px;width:16px;height:16px;margin-right:.25rem;line-height:16px}.template-container .body-content-wrapper .custom-variable-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important;margin-bottom:0!important}.template-container .body-content-wrapper .custom-variable-field ::ng-deep .mat-form-field-outline{background-color:#fff!important;border-radius:5px}.template-container .body-content-wrapper .custom-variable-field ::ng-deep .mat-form-field-flex{background-color:transparent!important}.template-container .body-content-wrapper .custom-variable-field ::ng-deep input.mat-input-element{margin-top:-8px!important}.template-container .body-content-wrapper .custom-error-text{color:#f44336;margin-top:4px;padding-right:12px}.template-container .body-content-wrapper .variable-sequence{background-color:#fff;border:1px solid #e2e8f0;color:#4b5563;border-radius:5px;font-weight:500;min-width:3.5rem;text-align:center;height:51px;display:flex;align-items:center;justify-content:center;margin-top:4px}.template-container .body-content-wrapper .btn-delete{background:0 0;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;height:51px;margin-top:4px;transition:transform .2s}.template-container .body-content-wrapper .btn-delete:hover{transform:scale(1.1)}.template-container .checkbox-wrapper{display:flex;justify-content:flex-end;margin-top:.5rem}.template-container .checkbox-wrapper .checkbox-xlsx{font-size:.875rem;font-weight:500;color:#374151}"]
|
|
5116
5150
|
})
|
|
5117
5151
|
], GeneralInformationWAComponent);
|
|
@@ -5937,26 +5971,38 @@
|
|
|
5937
5971
|
return found ? true : false;
|
|
5938
5972
|
};
|
|
5939
5973
|
NewNumberBasesComponent.prototype.onDownloadSampleService = function () {
|
|
5940
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
5974
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
|
5941
5975
|
var genInfoForm = (_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.form;
|
|
5942
5976
|
var isNeedSave = (_c = genInfoForm) === null || _c === void 0 ? void 0 : _c.isNeedSave;
|
|
5977
|
+
// 1. Parameter Wajib (Selalu dikirim di semua skenario)
|
|
5943
5978
|
var parameterList = [
|
|
5944
5979
|
this.initParam('platform', ((_e = (_d = genInfoForm) === null || _d === void 0 ? void 0 : _d.template) === null || _e === void 0 ? void 0 : _e.platform) || 'WA', 'string'),
|
|
5945
|
-
this.initParam('
|
|
5946
|
-
|
|
5947
|
-
this.initParam('category', (_l = (_k = this.categorySelected) === null || _k === void 0 ? void 0 : _k.map(function (t) { return t.id; }).join(), (_l !== null && _l !== void 0 ? _l : '')), 'string'),
|
|
5980
|
+
this.initParam('category', (_g = (_f = this.categorySelected) === null || _f === void 0 ? void 0 : _f.map(function (t) { return t.id; }).join(), (_g !== null && _g !== void 0 ? _g : '')), // <-- Category selalu dikirim
|
|
5981
|
+
'string'),
|
|
5948
5982
|
];
|
|
5949
|
-
|
|
5950
|
-
|
|
5951
|
-
|
|
5983
|
+
if (isNeedSave) {
|
|
5984
|
+
// SKENARIO 1: USE EXISTING / TEMPLATE SUDAH DISAVE
|
|
5985
|
+
parameterList.push(this.initParam('templateName', (_j = (_h = genInfoForm) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.name, 'string'), this.initParam('templateLang', (_l = (_k = genInfoForm) === null || _k === void 0 ? void 0 : _k.template) === null || _l === void 0 ? void 0 : _l.lang, 'string'));
|
|
5986
|
+
}
|
|
5987
|
+
else {
|
|
5988
|
+
// SKENARIO 2: CREATE NEW / DIRECT SEND (Belum di-save)
|
|
5989
|
+
// Cek aman: Kirim templateName & Lang HANYA kalau ada (biar nggak undefined)
|
|
5990
|
+
if ((_o = (_m = genInfoForm) === null || _m === void 0 ? void 0 : _m.template) === null || _o === void 0 ? void 0 : _o.name) {
|
|
5991
|
+
parameterList.push(this.initParam('templateName', (_q = (_p = genInfoForm) === null || _p === void 0 ? void 0 : _p.template) === null || _q === void 0 ? void 0 : _q.name, 'string'));
|
|
5992
|
+
}
|
|
5993
|
+
if ((_s = (_r = genInfoForm) === null || _r === void 0 ? void 0 : _r.template) === null || _s === void 0 ? void 0 : _s.lang) {
|
|
5994
|
+
parameterList.push(this.initParam('templateLang', (_u = (_t = genInfoForm) === null || _t === void 0 ? void 0 : _t.template) === null || _u === void 0 ? void 0 : _u.lang, 'string'));
|
|
5995
|
+
}
|
|
5996
|
+
// Variabel khusus Direct Send
|
|
5997
|
+
var safeBodyText = encodeURIComponent(((_v = genInfoForm) === null || _v === void 0 ? void 0 : _v.text) || '');
|
|
5952
5998
|
parameterList.push(this.initParam('bodyText', safeBodyText, 'string'));
|
|
5953
|
-
var variables = (
|
|
5999
|
+
var variables = (_w = genInfoForm) === null || _w === void 0 ? void 0 : _w.variables;
|
|
5954
6000
|
if (variables && Array.isArray(variables) && variables.length > 0) {
|
|
5955
6001
|
var bodyExamplesString = variables.map(function (v) { return v.paramName; }).join(',');
|
|
5956
6002
|
var safeBodyExamples = encodeURIComponent(bodyExamplesString);
|
|
5957
6003
|
parameterList.push(this.initParam('bodyExamples', safeBodyExamples, 'string'));
|
|
5958
6004
|
}
|
|
5959
|
-
if ((
|
|
6005
|
+
if ((_z = (_y = (_x = genInfoForm) === null || _x === void 0 ? void 0 : _x.template) === null || _y === void 0 ? void 0 : _y.header) === null || _z === void 0 ? void 0 : _z.text) {
|
|
5960
6006
|
var safeHeaderText = encodeURIComponent(genInfoForm.template.header.text);
|
|
5961
6007
|
parameterList.push(this.initParam('headerText', safeHeaderText, 'string'));
|
|
5962
6008
|
}
|