@adlfe/campaign-management-library 2.14.2 → 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 +169 -100
- 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/models/general-information-wa-req.model.js +19 -10
- package/esm2015/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.js +99 -58
- package/esm2015/lib/campaign-management/modules/new-campaign/new-campaign.component.js +33 -26
- package/esm2015/lib/campaign-management/modules/new-campaign/new-number-bases/new-number-bases.component.js +22 -10
- package/esm5/lib/campaign-management/models/general-information-wa-req.model.js +19 -10
- package/esm5/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.js +99 -58
- package/esm5/lib/campaign-management/modules/new-campaign/new-campaign.component.js +33 -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 +169 -100
- package/fesm2015/adlfe-campaign-management-library.js.map +1 -1
- package/fesm5/adlfe-campaign-management-library.js +169 -100
- package/fesm5/adlfe-campaign-management-library.js.map +1 -1
- package/lib/campaign-management/models/general-information-wa-req.model.d.ts +1 -0
- package/package.json +1 -1
|
@@ -2423,22 +2423,21 @@ class GeneralInformationWAReqModel {
|
|
|
2423
2423
|
}
|
|
2424
2424
|
if (source.template) {
|
|
2425
2425
|
let qrIndex = 0;
|
|
2426
|
-
const finalButtons = (_g = (_f = source.
|
|
2427
|
-
var _a, _b, _c;
|
|
2428
|
-
|
|
2426
|
+
const finalButtons = (_g = (_f = source.paramButton) === null || _f === void 0 ? void 0 : _f.reduce((result, each, idx) => {
|
|
2427
|
+
var _a, _b, _c, _d, _e;
|
|
2428
|
+
const btnDef = (_b = (_a = source.template) === null || _a === void 0 ? void 0 : _a.buttons) === null || _b === void 0 ? void 0 : _b[idx];
|
|
2429
|
+
if (((_c = btnDef) === null || _c === void 0 ? void 0 : _c.type) === 'QUICK_REPLY') {
|
|
2429
2430
|
const qrParam = source.buttonParams && source.buttonParams[qrIndex]
|
|
2430
2431
|
? source.buttonParams[qrIndex]
|
|
2431
2432
|
: null;
|
|
2432
2433
|
qrIndex++;
|
|
2433
|
-
|
|
2434
|
+
result.push(qrParam ? [qrParam.payload ? qrParam.payload : qrParam.label] : []);
|
|
2434
2435
|
}
|
|
2435
2436
|
else {
|
|
2436
|
-
|
|
2437
|
-
? source.paramButton[idx]
|
|
2438
|
-
: null;
|
|
2439
|
-
return _c = (_b = (_a = otherParam) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.map((t) => t.name), (_c !== null && _c !== void 0 ? _c : []);
|
|
2437
|
+
result.push((_e = (_d = each.name) === null || _d === void 0 ? void 0 : _d.map((t) => t.name), (_e !== null && _e !== void 0 ? _e : [])));
|
|
2440
2438
|
}
|
|
2441
|
-
|
|
2439
|
+
return result;
|
|
2440
|
+
}, []), (_g !== null && _g !== void 0 ? _g : []));
|
|
2442
2441
|
this.template = {
|
|
2443
2442
|
id: source.template.ID,
|
|
2444
2443
|
name: source.template.name,
|
|
@@ -2448,6 +2447,14 @@ class GeneralInformationWAReqModel {
|
|
|
2448
2447
|
data: ((_k = source.variables) === null || _k === void 0 ? void 0 : _k.length) ? source.variables.map((v) => v.paramName)
|
|
2449
2448
|
: (_m = (_l = source.paramBody) === null || _l === void 0 ? void 0 : _l.map((t) => t.name), (_m !== null && _m !== void 0 ? _m : [])),
|
|
2450
2449
|
button: finalButtons,
|
|
2450
|
+
buttonParams: source.buttonParams
|
|
2451
|
+
? source.buttonParams.map((btn) => {
|
|
2452
|
+
return {
|
|
2453
|
+
label: btn.label,
|
|
2454
|
+
payload: btn.payload ? btn.payload : btn.label,
|
|
2455
|
+
};
|
|
2456
|
+
})
|
|
2457
|
+
: [],
|
|
2451
2458
|
};
|
|
2452
2459
|
if (source.template.category === 'AUTHENTICATION')
|
|
2453
2460
|
this.template = {
|
|
@@ -2456,6 +2463,7 @@ class GeneralInformationWAReqModel {
|
|
|
2456
2463
|
header: null,
|
|
2457
2464
|
data: [source.otpValue],
|
|
2458
2465
|
button: [[source.otpValue]],
|
|
2466
|
+
buttonParams: [],
|
|
2459
2467
|
};
|
|
2460
2468
|
if (source.template.ID)
|
|
2461
2469
|
this.template.id = source.template.ID;
|
|
@@ -2475,6 +2483,7 @@ class GeneralInformationWAReqModel {
|
|
|
2475
2483
|
header: null,
|
|
2476
2484
|
button: null,
|
|
2477
2485
|
data: mappedVariables,
|
|
2486
|
+
buttonParams: [],
|
|
2478
2487
|
};
|
|
2479
2488
|
}
|
|
2480
2489
|
this.isNeedSave = source.isNeedSave;
|
|
@@ -2605,7 +2614,7 @@ let NewCampaignComponent = class NewCampaignComponent {
|
|
|
2605
2614
|
const subs = this.apiAdapterService
|
|
2606
2615
|
.executeApiRequest([], `/campaign/${this.campaignID}`, 'GET')
|
|
2607
2616
|
.subscribe((resp) => {
|
|
2608
|
-
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;
|
|
2617
|
+
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;
|
|
2609
2618
|
if (!resp)
|
|
2610
2619
|
return;
|
|
2611
2620
|
const generalInformation = {
|
|
@@ -2634,47 +2643,51 @@ let NewCampaignComponent = class NewCampaignComponent {
|
|
|
2634
2643
|
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,
|
|
2635
2644
|
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,
|
|
2636
2645
|
otpValue: (_28 = [...(_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(),
|
|
2646
|
+
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((val) => ({
|
|
2647
|
+
paramName: val,
|
|
2648
|
+
})),
|
|
2649
|
+
isUseExistingTemplate: !!((_32 = resp.data) === null || _32 === void 0 ? void 0 : _32.templateName),
|
|
2637
2650
|
template: {
|
|
2638
|
-
ID: (
|
|
2639
|
-
name: (
|
|
2640
|
-
lang: (
|
|
2641
|
-
platform: (
|
|
2642
|
-
headerURL: (
|
|
2651
|
+
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,
|
|
2652
|
+
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,
|
|
2653
|
+
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,
|
|
2654
|
+
platform: (_42 = resp.data) === null || _42 === void 0 ? void 0 : _42.platform,
|
|
2655
|
+
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,
|
|
2643
2656
|
header: {
|
|
2644
|
-
examples: (
|
|
2657
|
+
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,
|
|
2645
2658
|
},
|
|
2646
2659
|
body: {
|
|
2647
|
-
examples: (
|
|
2660
|
+
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,
|
|
2648
2661
|
},
|
|
2649
|
-
buttons: (
|
|
2650
|
-
ClientId: (
|
|
2651
|
-
ClientName: (
|
|
2662
|
+
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,
|
|
2663
|
+
ClientId: (_55 = resp.data) === null || _55 === void 0 ? void 0 : _55.clientId,
|
|
2664
|
+
ClientName: (_56 = resp.data) === null || _56 === void 0 ? void 0 : _56.clientName,
|
|
2652
2665
|
},
|
|
2653
|
-
isUpload: ((
|
|
2654
|
-
fileId: (
|
|
2666
|
+
isUpload: ((_57 = resp.data) === null || _57 === void 0 ? void 0 : _57.fileId) !== '',
|
|
2667
|
+
fileId: (_58 = resp.data) === null || _58 === void 0 ? void 0 : _58.fileId,
|
|
2655
2668
|
};
|
|
2656
2669
|
localStorage.setItem('telin.campaign', JSON.stringify(Object.assign(Object.assign({}, this.getCampaignStorage), {
|
|
2657
2670
|
generalInformation: {
|
|
2658
|
-
id: (
|
|
2671
|
+
id: (_59 = resp.data) === null || _59 === void 0 ? void 0 : _59.id,
|
|
2659
2672
|
form: generalInformation,
|
|
2660
2673
|
},
|
|
2661
|
-
failover: (
|
|
2662
|
-
targetAudience: (
|
|
2674
|
+
failover: (_60 = resp.data) === null || _60 === void 0 ? void 0 : _60.failover,
|
|
2675
|
+
targetAudience: (_61 = resp.data) === null || _61 === void 0 ? void 0 : _61.targets,
|
|
2663
2676
|
targetAudienceFile: {
|
|
2664
|
-
name: (
|
|
2665
|
-
targetURL: (
|
|
2677
|
+
name: (_62 = resp.data) === null || _62 === void 0 ? void 0 : _62.fileName,
|
|
2678
|
+
targetURL: (_63 = resp.data) === null || _63 === void 0 ? void 0 : _63.targetURL,
|
|
2666
2679
|
},
|
|
2667
2680
|
scheduler: {
|
|
2668
|
-
schedulerType: ((
|
|
2681
|
+
schedulerType: ((_64 = resp.data) === null || _64 === void 0 ? void 0 : _64.scheduleType) === 'MULTI'
|
|
2669
2682
|
? 'ONE_TIME'
|
|
2670
|
-
: (
|
|
2671
|
-
startDate: (
|
|
2672
|
-
startTime: (
|
|
2673
|
-
isRepeat: ((
|
|
2674
|
-
delivery: (
|
|
2683
|
+
: (_65 = resp.data) === null || _65 === void 0 ? void 0 : _65.scheduleType,
|
|
2684
|
+
startDate: (_67 = (_66 = resp.data) === null || _66 === void 0 ? void 0 : _66.startTime) === null || _67 === void 0 ? void 0 : _67.split(' ')[0],
|
|
2685
|
+
startTime: (_69 = (_68 = resp.data) === null || _68 === void 0 ? void 0 : _68.startTime) === null || _69 === void 0 ? void 0 : _69.split(' ')[1],
|
|
2686
|
+
isRepeat: ((_70 = resp.data) === null || _70 === void 0 ? void 0 : _70.scheduleType) === 'MULTI',
|
|
2687
|
+
delivery: (_71 = resp.data) === null || _71 === void 0 ? void 0 : _71.repeat,
|
|
2675
2688
|
},
|
|
2676
2689
|
})));
|
|
2677
|
-
this.isLine = ((
|
|
2690
|
+
this.isLine = ((_72 = resp.data) === null || _72 === void 0 ? void 0 : _72.platform) === 'LINE';
|
|
2678
2691
|
this.isLoading = false;
|
|
2679
2692
|
this.initWizard();
|
|
2680
2693
|
}, () => {
|
|
@@ -2765,6 +2778,9 @@ let NewCampaignComponent = class NewCampaignComponent {
|
|
|
2765
2778
|
withoutKeyData: true,
|
|
2766
2779
|
},
|
|
2767
2780
|
];
|
|
2781
|
+
if (payloadValue.template && payloadValue.template.buttonParams) {
|
|
2782
|
+
delete payloadValue.template.buttonParams;
|
|
2783
|
+
}
|
|
2768
2784
|
const subs = this.apiAdapterService
|
|
2769
2785
|
.executeApiRequest(parameterList, this.generalInformationData.id
|
|
2770
2786
|
? `/campaign/${this.generalInformationData.id}`
|
|
@@ -3962,7 +3978,7 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
3962
3978
|
this.form.disable();
|
|
3963
3979
|
}
|
|
3964
3980
|
initEdit() {
|
|
3965
|
-
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;
|
|
3981
|
+
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;
|
|
3966
3982
|
const storageData = this.getCampaignStorage;
|
|
3967
3983
|
const formValues = (_b = (_a = storageData) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.form;
|
|
3968
3984
|
if (!storageData ||
|
|
@@ -3980,10 +3996,13 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
3980
3996
|
(_v = this.getControl('isUpload')) === null || _v === void 0 ? void 0 : _v.setValue((_w = formValues) === null || _w === void 0 ? void 0 : _w.isUpload);
|
|
3981
3997
|
(_x = this.getControl('fileId')) === null || _x === void 0 ? void 0 : _x.setValue((_y = formValues) === null || _y === void 0 ? void 0 : _y.fileId);
|
|
3982
3998
|
(_z = this.getControl('otpValue')) === null || _z === void 0 ? void 0 : _z.setValue((_0 = formValues) === null || _0 === void 0 ? void 0 : _0.otpValue);
|
|
3983
|
-
(_1 = this.getControl('isUseExistingTemplate')) === null || _1 === void 0 ? void 0 : _1.setValue(
|
|
3984
|
-
|
|
3985
|
-
|
|
3986
|
-
|
|
3999
|
+
(_1 = this.getControl('isUseExistingTemplate')) === null || _1 === void 0 ? void 0 : _1.setValue(((_2 = formValues) === null || _2 === void 0 ? void 0 : _2.isUseExistingTemplate) !== undefined
|
|
4000
|
+
? formValues.isUseExistingTemplate
|
|
4001
|
+
: !!((_4 = (_3 = formValues) === null || _3 === void 0 ? void 0 : _3.template) === null || _4 === void 0 ? void 0 : _4.name));
|
|
4002
|
+
(_5 = this.getControl('isNeedSave')) === null || _5 === void 0 ? void 0 : _5.setValue(!!((_6 = formValues) === null || _6 === void 0 ? void 0 : _6.isNeedSave));
|
|
4003
|
+
(_7 = this.getControl('isDownloadVariableXLS')) === null || _7 === void 0 ? void 0 : _7.setValue((_8 = formValues) === null || _8 === void 0 ? void 0 : _8.isDownloadVariableXLS);
|
|
4004
|
+
(_9 = this.getControl('ttl')) === null || _9 === void 0 ? void 0 : _9.setValue((_10 = formValues) === null || _10 === void 0 ? void 0 : _10.ttl);
|
|
4005
|
+
const savedVariables = (_11 = formValues) === null || _11 === void 0 ? void 0 : _11.variables;
|
|
3987
4006
|
if (savedVariables && Array.isArray(savedVariables) && savedVariables.length > 0) {
|
|
3988
4007
|
this.variables.clear();
|
|
3989
4008
|
savedVariables.forEach((item) => {
|
|
@@ -3992,8 +4011,8 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
3992
4011
|
}));
|
|
3993
4012
|
});
|
|
3994
4013
|
}
|
|
3995
|
-
this.isHaveTemplateParam = (
|
|
3996
|
-
this.getTemplateOptionService(null, (
|
|
4014
|
+
this.isHaveTemplateParam = (_12 = this.getControl('isUpload')) === null || _12 === void 0 ? void 0 : _12.value;
|
|
4015
|
+
this.getTemplateOptionService(null, (_14 = (_13 = this.getControl('template')) === null || _13 === void 0 ? void 0 : _13.value) === null || _14 === void 0 ? void 0 : _14.name);
|
|
3997
4016
|
}
|
|
3998
4017
|
initValidation() {
|
|
3999
4018
|
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;
|
|
@@ -4315,72 +4334,109 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
4315
4334
|
return ((_a = this.getControl('isUpload')) === null || _a === void 0 ? void 0 : _a.value) || false;
|
|
4316
4335
|
}
|
|
4317
4336
|
updateTemplate(template) {
|
|
4318
|
-
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;
|
|
4337
|
+
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;
|
|
4319
4338
|
this.isShowParameter = false;
|
|
4320
4339
|
if (!template)
|
|
4321
4340
|
return;
|
|
4322
4341
|
const formStorage = (_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.form;
|
|
4323
|
-
const savedButtonParams = ((_c = formStorage) === null || _c === void 0 ? void 0 : _c.buttonParams) || [];
|
|
4324
4342
|
const buttonParamsArray = this.form.get('buttonParams');
|
|
4325
4343
|
buttonParamsArray.clear();
|
|
4326
4344
|
if (template && template.buttons && template.buttons.length > 0) {
|
|
4327
|
-
|
|
4328
|
-
|
|
4329
|
-
var _a;
|
|
4330
|
-
|
|
4331
|
-
|
|
4332
|
-
|
|
4333
|
-
|
|
4334
|
-
|
|
4335
|
-
|
|
4336
|
-
}
|
|
4337
|
-
|
|
4345
|
+
let qrIndexLocal = 0;
|
|
4346
|
+
template.buttons.forEach((btn, index) => {
|
|
4347
|
+
var _a, _b, _c;
|
|
4348
|
+
if (btn.type === 'QUICK_REPLY') {
|
|
4349
|
+
let existingPayload = '';
|
|
4350
|
+
// SKENARIO 1: Data dari Local State
|
|
4351
|
+
if (((_a = formStorage) === null || _a === void 0 ? void 0 : _a.buttonParams) && formStorage.buttonParams.length > 0) {
|
|
4352
|
+
existingPayload = ((_b = formStorage.buttonParams[qrIndexLocal]) === null || _b === void 0 ? void 0 : _b.payload) || '';
|
|
4353
|
+
qrIndexLocal++;
|
|
4354
|
+
}
|
|
4355
|
+
// SKENARIO 2: Data dari BE
|
|
4356
|
+
else if (((_c = formStorage) === null || _c === void 0 ? void 0 : _c.paramButton) &&
|
|
4357
|
+
Array.isArray(formStorage.paramButton[index])) {
|
|
4358
|
+
existingPayload = formStorage.paramButton[index][0] || '';
|
|
4359
|
+
}
|
|
4360
|
+
buttonParamsArray.push(new FormGroup({
|
|
4361
|
+
label: new FormControl(btn.text),
|
|
4362
|
+
payload: new FormControl({
|
|
4363
|
+
value: existingPayload,
|
|
4364
|
+
disabled: this.isReadOnlyMode,
|
|
4365
|
+
}, [Validators$1.maxLength(256)]),
|
|
4366
|
+
}));
|
|
4367
|
+
}
|
|
4338
4368
|
});
|
|
4339
4369
|
}
|
|
4340
4370
|
this.isHaveTemplateParam =
|
|
4341
|
-
(
|
|
4342
|
-
(
|
|
4343
|
-
(
|
|
4344
|
-
if (['image', 'video', 'document'].includes((
|
|
4345
|
-
(
|
|
4346
|
-
(
|
|
4347
|
-
this.fileTypeChange((
|
|
4348
|
-
}
|
|
4349
|
-
(
|
|
4350
|
-
? (
|
|
4351
|
-
(
|
|
4352
|
-
? (
|
|
4353
|
-
(
|
|
4354
|
-
? (
|
|
4371
|
+
(_e = (_d = (_c = template.header) === null || _c === void 0 ? void 0 : _c.examples) === null || _d === void 0 ? void 0 : _d.length, (_e !== null && _e !== void 0 ? _e : 0)) > 0 ||
|
|
4372
|
+
(_h = (_g = (_f = template.body) === null || _f === void 0 ? void 0 : _f.examples) === null || _g === void 0 ? void 0 : _g.length, (_h !== null && _h !== void 0 ? _h : 0)) > 0 ||
|
|
4373
|
+
(_k = (_j = template.buttons) === null || _j === void 0 ? void 0 : _j.length, (_k !== null && _k !== void 0 ? _k : 0)) > 0;
|
|
4374
|
+
if (['image', 'video', 'document'].includes((_o = (_m = (_l = template) === null || _l === void 0 ? void 0 : _l.header) === null || _m === void 0 ? void 0 : _m.type) === null || _o === void 0 ? void 0 : _o.toLowerCase())) {
|
|
4375
|
+
(_p = this.getControl('fileName')) === null || _p === void 0 ? void 0 : _p.setValue((_v = (_s = (_r = (_q = this.getCampaignStorage) === null || _q === void 0 ? void 0 : _q.generalInformation) === null || _r === void 0 ? void 0 : _r.form.fileName, (_s !== null && _s !== void 0 ? _s : (_u = (_t = this.getCampaignStorage) === null || _t === void 0 ? void 0 : _t.generalInformation) === null || _u === void 0 ? void 0 : _u.form.targetURL)), (_v !== null && _v !== void 0 ? _v : template.header.url)));
|
|
4376
|
+
(_w = this.getControl('targetURL')) === null || _w === void 0 ? void 0 : _w.setValue((_z = (_y = (_x = this.getCampaignStorage) === null || _x === void 0 ? void 0 : _x.generalInformation) === null || _y === void 0 ? void 0 : _y.form.targetURL, (_z !== null && _z !== void 0 ? _z : template.header.url)));
|
|
4377
|
+
this.fileTypeChange((_2 = (_1 = (_0 = template) === null || _0 === void 0 ? void 0 : _0.header) === null || _1 === void 0 ? void 0 : _1.type) === null || _2 === void 0 ? void 0 : _2.toLowerCase());
|
|
4378
|
+
}
|
|
4379
|
+
(_4 = (_3 = template.header.examples) === null || _3 === void 0 ? void 0 : _3.length, (_4 !== null && _4 !== void 0 ? _4 : 0)) > 0
|
|
4380
|
+
? (_5 = this.getControl('paramHeader')) === null || _5 === void 0 ? void 0 : _5.setValidators(Validators$1.required) : (_6 = this.getControl('paramHeader')) === null || _6 === void 0 ? void 0 : _6.clearValidators();
|
|
4381
|
+
(_8 = (_7 = template.body.examples) === null || _7 === void 0 ? void 0 : _7.length, (_8 !== null && _8 !== void 0 ? _8 : 0)) > 0
|
|
4382
|
+
? (_9 = this.getControl('paramBody')) === null || _9 === void 0 ? void 0 : _9.setValidators(Validators$1.required) : (_10 = this.getControl('paramBody')) === null || _10 === void 0 ? void 0 : _10.clearValidators();
|
|
4383
|
+
(_12 = (_11 = template.buttons) === null || _11 === void 0 ? void 0 : _11.length, (_12 !== null && _12 !== void 0 ? _12 : 0)) > 0
|
|
4384
|
+
? (_13 = this.getControl('paramButton')) === null || _13 === void 0 ? void 0 : _13.setValidators(Validators$1.required) : (_14 = this.getControl('paramButton')) === null || _14 === void 0 ? void 0 : _14.clearValidators();
|
|
4355
4385
|
this.form.get('paramHeader').controls = [];
|
|
4356
4386
|
this.form.get('paramHeader').reset();
|
|
4357
|
-
(
|
|
4387
|
+
(_15 = this.getControl('paramHeader')) === null || _15 === void 0 ? void 0 : _15.updateValueAndValidity();
|
|
4358
4388
|
this.form.get('paramBody').controls = [];
|
|
4359
4389
|
this.form.get('paramBody').reset();
|
|
4360
|
-
(
|
|
4390
|
+
(_16 = this.getControl('paramBody')) === null || _16 === void 0 ? void 0 : _16.updateValueAndValidity();
|
|
4361
4391
|
this.form.get('paramButton').controls = [];
|
|
4362
4392
|
this.form.get('paramButton').reset();
|
|
4363
|
-
(
|
|
4364
|
-
(
|
|
4365
|
-
(
|
|
4366
|
-
(
|
|
4393
|
+
(_17 = this.getControl('paramButton')) === null || _17 === void 0 ? void 0 : _17.updateValueAndValidity();
|
|
4394
|
+
(_18 = this.getControl('otpValue')) === null || _18 === void 0 ? void 0 : _18.setValue('');
|
|
4395
|
+
(_19 = this.getControl('otpValue')) === null || _19 === void 0 ? void 0 : _19.clearValidators();
|
|
4396
|
+
(_20 = this.getControl('otpValue')) === null || _20 === void 0 ? void 0 : _20.updateValueAndValidity();
|
|
4367
4397
|
if (template.category === 'AUTHENTICATION') {
|
|
4368
|
-
(
|
|
4369
|
-
(
|
|
4370
|
-
(
|
|
4398
|
+
(_21 = this.getControl('otpValue')) === null || _21 === void 0 ? void 0 : _21.setValue((_29 = (_23 = (_22 = formStorage) === null || _22 === void 0 ? void 0 : _22.otpValue, (_23 !== null && _23 !== void 0 ? _23 : (_28 = [...(_27 = (_26 = (_25 = (_24 = formStorage) === null || _24 === void 0 ? void 0 : _24.template) === null || _25 === void 0 ? void 0 : _25.body) === null || _26 === void 0 ? void 0 : _26.examples, (_27 !== null && _27 !== void 0 ? _27 : []))]) === null || _28 === void 0 ? void 0 : _28.pop())), (_29 !== null && _29 !== void 0 ? _29 : '')));
|
|
4399
|
+
(_30 = this.getControl('otpValue')) === null || _30 === void 0 ? void 0 : _30.setValidators(Validators$1.required);
|
|
4400
|
+
(_31 = this.getControl('otpValue')) === null || _31 === void 0 ? void 0 : _31.updateValueAndValidity();
|
|
4371
4401
|
}
|
|
4372
|
-
(
|
|
4402
|
+
(_32 = template.header.examples) === null || _32 === void 0 ? void 0 : _32.forEach((each, index) => {
|
|
4373
4403
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
4374
4404
|
this.addParamHeader((_g = (_d = (_c = (_b = (_a = formStorage) === null || _a === void 0 ? void 0 : _a.paramHeader) === null || _b === void 0 ? void 0 : _b[index]) === null || _c === void 0 ? void 0 : _c.name, (_d !== null && _d !== void 0 ? _d : (_f = (_e = formStorage) === null || _e === void 0 ? void 0 : _e.paramHeader) === null || _f === void 0 ? void 0 : _f[index])), (_g !== null && _g !== void 0 ? _g : '')));
|
|
4375
4405
|
});
|
|
4376
|
-
(
|
|
4406
|
+
(_33 = template.body.examples) === null || _33 === void 0 ? void 0 : _33.forEach((each, index) => {
|
|
4377
4407
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
4378
4408
|
let paramValue = (_g = (_d = (_c = (_b = (_a = formStorage) === null || _a === void 0 ? void 0 : _a.paramBody) === null || _b === void 0 ? void 0 : _b[index]) === null || _c === void 0 ? void 0 : _c.name, (_d !== null && _d !== void 0 ? _d : (_f = (_e = formStorage) === null || _e === void 0 ? void 0 : _e.paramBody) === null || _f === void 0 ? void 0 : _f[index])), (_g !== null && _g !== void 0 ? _g : ''));
|
|
4379
4409
|
if (['$UnsubscribeAccount'].includes(each))
|
|
4380
4410
|
paramValue = each;
|
|
4381
4411
|
this.addParamBody(paramValue);
|
|
4382
4412
|
});
|
|
4383
|
-
|
|
4413
|
+
// ==========================================================
|
|
4414
|
+
// TAMBAHAN: Generate Variable Dinamis dari template.body.examples
|
|
4415
|
+
// ==========================================================
|
|
4416
|
+
this.variables.clear();
|
|
4417
|
+
if (((_34 = template.body) === null || _34 === void 0 ? void 0 : _34.examples) && template.body.examples.length > 0) {
|
|
4418
|
+
const isSavedTemplateMatches = ((_36 = (_35 = formStorage) === null || _35 === void 0 ? void 0 : _35.template) === null || _36 === void 0 ? void 0 : _36.name) === template.name;
|
|
4419
|
+
template.body.examples.forEach((exampleValue, index) => {
|
|
4420
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
4421
|
+
let savedVariable = '';
|
|
4422
|
+
if (isSavedTemplateMatches) {
|
|
4423
|
+
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]));
|
|
4424
|
+
}
|
|
4425
|
+
const finalValue = savedVariable ? savedVariable : '';
|
|
4426
|
+
this.variables.push(new FormGroup({
|
|
4427
|
+
paramName: new FormControl({
|
|
4428
|
+
value: finalValue,
|
|
4429
|
+
disabled: this.isReadOnlyMode,
|
|
4430
|
+
}, Validators$1.required),
|
|
4431
|
+
}));
|
|
4432
|
+
});
|
|
4433
|
+
}
|
|
4434
|
+
if ((_37 = template.body) === null || _37 === void 0 ? void 0 : _37.text) {
|
|
4435
|
+
(_38 = this.getControl('text')) === null || _38 === void 0 ? void 0 : _38.setValue(template.body.text);
|
|
4436
|
+
(_39 = this.getControl('text')) === null || _39 === void 0 ? void 0 : _39.updateValueAndValidity();
|
|
4437
|
+
}
|
|
4438
|
+
// ==========================================================
|
|
4439
|
+
(_40 = template.buttons) === null || _40 === void 0 ? void 0 : _40.forEach((each, index) => {
|
|
4384
4440
|
var _a, _b, _c, _d;
|
|
4385
4441
|
this.addParamButton();
|
|
4386
4442
|
const button = this.getButton;
|
|
@@ -4404,6 +4460,14 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
4404
4460
|
(_d = lastControl) === null || _d === void 0 ? void 0 : _d.updateValueAndValidity();
|
|
4405
4461
|
}
|
|
4406
4462
|
});
|
|
4463
|
+
const paramBodyArray = this.form.get('paramBody');
|
|
4464
|
+
paramBodyArray.clearValidators();
|
|
4465
|
+
paramBodyArray.controls.forEach((ctrl) => {
|
|
4466
|
+
var _a, _b;
|
|
4467
|
+
(_a = ctrl.get('name')) === null || _a === void 0 ? void 0 : _a.clearValidators();
|
|
4468
|
+
(_b = ctrl.get('name')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity();
|
|
4469
|
+
});
|
|
4470
|
+
paramBodyArray.updateValueAndValidity();
|
|
4407
4471
|
}
|
|
4408
4472
|
updateMediaType(_mediaType) {
|
|
4409
4473
|
if (_mediaType === EnumData.MEDIA_TYPE_LOCATION)
|
|
@@ -4497,19 +4561,12 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
4497
4561
|
(_a = this.getControl('isDownloadVariableXLS')) === null || _a === void 0 ? void 0 : _a.setValue(false);
|
|
4498
4562
|
this.variables.clear();
|
|
4499
4563
|
this.updateVariableDownloadXLS(false);
|
|
4564
|
+
(_b = this.getControl('text')) === null || _b === void 0 ? void 0 : _b.setValue('');
|
|
4500
4565
|
if (useExisting) {
|
|
4501
|
-
(
|
|
4502
|
-
|
|
4503
|
-
(_c = this.getControl('text')) === null || _c === void 0 ? void 0 : _c.clearValidators();
|
|
4504
|
-
(_d = this.getControl('text')) === null || _d === void 0 ? void 0 : _d.setValue('Halo {{1}}, ini adalah kode verifikasi kamu: {{2}}');
|
|
4566
|
+
(_c = this.getControl('template')) === null || _c === void 0 ? void 0 : _c.setValidators(Validators$1.required);
|
|
4567
|
+
(_d = this.getControl('text')) === null || _d === void 0 ? void 0 : _d.clearValidators();
|
|
4505
4568
|
(_e = this.getControl('text')) === null || _e === void 0 ? void 0 : _e.updateValueAndValidity();
|
|
4506
4569
|
(_f = this.getControl('template')) === null || _f === void 0 ? void 0 : _f.updateValueAndValidity();
|
|
4507
|
-
this.variables.push(new FormGroup({
|
|
4508
|
-
paramName: new FormControl('', Validators$1.required),
|
|
4509
|
-
}));
|
|
4510
|
-
this.variables.push(new FormGroup({
|
|
4511
|
-
paramName: new FormControl('', Validators$1.required),
|
|
4512
|
-
}));
|
|
4513
4570
|
}
|
|
4514
4571
|
else {
|
|
4515
4572
|
(_g = this.getControl('template')) === null || _g === void 0 ? void 0 : _g.reset();
|
|
@@ -4606,7 +4663,7 @@ __decorate([
|
|
|
4606
4663
|
GeneralInformationWAComponent = __decorate([
|
|
4607
4664
|
Component({
|
|
4608
4665
|
selector: 'lib-general-information-wa',
|
|
4609
|
-
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\r\n class=\"button-parameter-section mt-4\"\r\n *ngIf=\"buttonParamsControls.length > 0 && !isUsingExcelBulk\"\r\n >\r\n <h5 class=\"mb-3 font-weight-bold\">Button Parameter</h5>\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 class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Button {{ i + 1 }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"payload\"\r\n [placeholder]=\"'Parameter ' + (i + 1)\"\r\n maxlength=\"256\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\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 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",
|
|
4666
|
+
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",
|
|
4610
4667
|
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}"]
|
|
4611
4668
|
})
|
|
4612
4669
|
], GeneralInformationWAComponent);
|
|
@@ -5335,26 +5392,38 @@ let NewNumberBasesComponent = class NewNumberBasesComponent {
|
|
|
5335
5392
|
return found ? true : false;
|
|
5336
5393
|
}
|
|
5337
5394
|
onDownloadSampleService() {
|
|
5338
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
5395
|
+
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;
|
|
5339
5396
|
const genInfoForm = (_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.form;
|
|
5340
5397
|
const isNeedSave = (_c = genInfoForm) === null || _c === void 0 ? void 0 : _c.isNeedSave;
|
|
5398
|
+
// 1. Parameter Wajib (Selalu dikirim di semua skenario)
|
|
5341
5399
|
const parameterList = [
|
|
5342
5400
|
this.initParam('platform', ((_e = (_d = genInfoForm) === null || _d === void 0 ? void 0 : _d.template) === null || _e === void 0 ? void 0 : _e.platform) || 'WA', 'string'),
|
|
5343
|
-
this.initParam('
|
|
5344
|
-
|
|
5345
|
-
this.initParam('category', (_l = (_k = this.categorySelected) === null || _k === void 0 ? void 0 : _k.map((t) => t.id).join(), (_l !== null && _l !== void 0 ? _l : '')), 'string'),
|
|
5401
|
+
this.initParam('category', (_g = (_f = this.categorySelected) === null || _f === void 0 ? void 0 : _f.map((t) => t.id).join(), (_g !== null && _g !== void 0 ? _g : '')), // <-- Category selalu dikirim
|
|
5402
|
+
'string'),
|
|
5346
5403
|
];
|
|
5347
|
-
|
|
5348
|
-
|
|
5349
|
-
|
|
5404
|
+
if (isNeedSave) {
|
|
5405
|
+
// SKENARIO 1: USE EXISTING / TEMPLATE SUDAH DISAVE
|
|
5406
|
+
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'));
|
|
5407
|
+
}
|
|
5408
|
+
else {
|
|
5409
|
+
// SKENARIO 2: CREATE NEW / DIRECT SEND (Belum di-save)
|
|
5410
|
+
// Cek aman: Kirim templateName & Lang HANYA kalau ada (biar nggak undefined)
|
|
5411
|
+
if ((_o = (_m = genInfoForm) === null || _m === void 0 ? void 0 : _m.template) === null || _o === void 0 ? void 0 : _o.name) {
|
|
5412
|
+
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'));
|
|
5413
|
+
}
|
|
5414
|
+
if ((_s = (_r = genInfoForm) === null || _r === void 0 ? void 0 : _r.template) === null || _s === void 0 ? void 0 : _s.lang) {
|
|
5415
|
+
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'));
|
|
5416
|
+
}
|
|
5417
|
+
// Variabel khusus Direct Send
|
|
5418
|
+
const safeBodyText = encodeURIComponent(((_v = genInfoForm) === null || _v === void 0 ? void 0 : _v.text) || '');
|
|
5350
5419
|
parameterList.push(this.initParam('bodyText', safeBodyText, 'string'));
|
|
5351
|
-
const variables = (
|
|
5420
|
+
const variables = (_w = genInfoForm) === null || _w === void 0 ? void 0 : _w.variables;
|
|
5352
5421
|
if (variables && Array.isArray(variables) && variables.length > 0) {
|
|
5353
5422
|
const bodyExamplesString = variables.map((v) => v.paramName).join(',');
|
|
5354
5423
|
const safeBodyExamples = encodeURIComponent(bodyExamplesString);
|
|
5355
5424
|
parameterList.push(this.initParam('bodyExamples', safeBodyExamples, 'string'));
|
|
5356
5425
|
}
|
|
5357
|
-
if ((
|
|
5426
|
+
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) {
|
|
5358
5427
|
const safeHeaderText = encodeURIComponent(genInfoForm.template.header.text);
|
|
5359
5428
|
parameterList.push(this.initParam('headerText', safeHeaderText, 'string'));
|
|
5360
5429
|
}
|