@adlfe/campaign-management-library 2.14.3 → 2.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/adlfe-campaign-management-library.umd.js +318 -102
- 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 +24 -13
- package/esm2015/lib/campaign-management/modules/campaign-index/dialog/pending-approval-dialog-view/pending-approval-dialog-view.component.js +43 -26
- package/esm2015/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.js +185 -24
- package/esm2015/lib/campaign-management/modules/new-campaign/general-information/general-information.component.js +3 -3
- package/esm2015/lib/campaign-management/modules/new-campaign/new-campaign.component.js +44 -27
- package/esm2015/lib/campaign-management/modules/new-campaign/new-number-bases/new-number-bases.component.js +21 -15
- package/esm5/lib/campaign-management/models/general-information-wa-req.model.js +24 -13
- package/esm5/lib/campaign-management/modules/campaign-index/dialog/pending-approval-dialog-view/pending-approval-dialog-view.component.js +43 -26
- package/esm5/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.js +189 -24
- package/esm5/lib/campaign-management/modules/new-campaign/general-information/general-information.component.js +3 -3
- package/esm5/lib/campaign-management/modules/new-campaign/new-campaign.component.js +44 -27
- package/esm5/lib/campaign-management/modules/new-campaign/new-number-bases/new-number-bases.component.js +21 -15
- package/fesm2015/adlfe-campaign-management-library.js +314 -102
- package/fesm2015/adlfe-campaign-management-library.js.map +1 -1
- package/fesm5/adlfe-campaign-management-library.js +318 -102
- 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/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.d.ts +5 -0
- package/package.json +1 -1
|
@@ -1751,7 +1751,7 @@ let PendingApprovalDialogViewComponent = class PendingApprovalDialogViewComponen
|
|
|
1751
1751
|
const subs = this.apiAdapterService
|
|
1752
1752
|
.executeApiRequest([], `/campaign/${(_d = (_c = this.getCampaignStorage) === null || _c === void 0 ? void 0 : _c.generalInformation) === null || _d === void 0 ? void 0 : _d.id}`, 'GET')
|
|
1753
1753
|
.subscribe((resp) => {
|
|
1754
|
-
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;
|
|
1754
|
+
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, _73, _74, _75;
|
|
1755
1755
|
if (!resp)
|
|
1756
1756
|
return;
|
|
1757
1757
|
const generalInformation = {
|
|
@@ -1779,45 +1779,62 @@ let PendingApprovalDialogViewComponent = class PendingApprovalDialogViewComponen
|
|
|
1779
1779
|
paramHeader: (_17 = (_16 = (_15 = resp.data) === null || _15 === void 0 ? void 0 : _15.details) === null || _16 === void 0 ? void 0 : _16.template) === null || _17 === void 0 ? void 0 : _17.header,
|
|
1780
1780
|
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,
|
|
1781
1781
|
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,
|
|
1782
|
-
|
|
1782
|
+
paramCarousel: ((_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.carousel) === null || _27 === void 0 ? void 0 : _27.map((card) => {
|
|
1783
|
+
return {
|
|
1784
|
+
headerURL: card.headerURL || '',
|
|
1785
|
+
bodyParams: (card.body || []).map((val) => ({
|
|
1786
|
+
paramName: val,
|
|
1787
|
+
})),
|
|
1788
|
+
buttonParams: (card.button || []).map((btnGroup) => {
|
|
1789
|
+
return (btnGroup || []).map((val) => ({
|
|
1790
|
+
paramName: val,
|
|
1791
|
+
}));
|
|
1792
|
+
}),
|
|
1793
|
+
};
|
|
1794
|
+
})) || [],
|
|
1795
|
+
otpValue: (_32 = [...(_31 = (_30 = (_29 = (_28 = resp.data) === null || _28 === void 0 ? void 0 : _28.details) === null || _29 === void 0 ? void 0 : _29.template) === null || _30 === void 0 ? void 0 : _30.data, (_31 !== null && _31 !== void 0 ? _31 : []))]) === null || _32 === void 0 ? void 0 : _32.pop(),
|
|
1796
|
+
variables: (((_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.data) || []).map((val) => ({
|
|
1797
|
+
paramName: val,
|
|
1798
|
+
})),
|
|
1799
|
+
isUseExistingTemplate: !!((_36 = resp.data) === null || _36 === void 0 ? void 0 : _36.templateName),
|
|
1783
1800
|
template: {
|
|
1784
|
-
ID: (
|
|
1785
|
-
name: (
|
|
1786
|
-
lang: (
|
|
1787
|
-
platform: (
|
|
1788
|
-
headerURL: (
|
|
1801
|
+
ID: (_39 = (_38 = (_37 = resp.data) === null || _37 === void 0 ? void 0 : _37.details) === null || _38 === void 0 ? void 0 : _38.template) === null || _39 === void 0 ? void 0 : _39.id,
|
|
1802
|
+
name: (_42 = (_41 = (_40 = resp.data) === null || _40 === void 0 ? void 0 : _40.details) === null || _41 === void 0 ? void 0 : _41.template) === null || _42 === void 0 ? void 0 : _42.name,
|
|
1803
|
+
lang: (_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.lang,
|
|
1804
|
+
platform: (_46 = resp.data) === null || _46 === void 0 ? void 0 : _46.platform,
|
|
1805
|
+
headerURL: (_49 = (_48 = (_47 = resp.data) === null || _47 === void 0 ? void 0 : _47.details) === null || _48 === void 0 ? void 0 : _48.template) === null || _49 === void 0 ? void 0 : _49.headerURL,
|
|
1789
1806
|
header: {
|
|
1790
|
-
examples: (
|
|
1807
|
+
examples: (_52 = (_51 = (_50 = resp.data) === null || _50 === void 0 ? void 0 : _50.details) === null || _51 === void 0 ? void 0 : _51.template) === null || _52 === void 0 ? void 0 : _52.header,
|
|
1791
1808
|
},
|
|
1792
1809
|
body: {
|
|
1793
|
-
examples: (
|
|
1810
|
+
examples: (_55 = (_54 = (_53 = resp.data) === null || _53 === void 0 ? void 0 : _53.details) === null || _54 === void 0 ? void 0 : _54.template) === null || _55 === void 0 ? void 0 : _55.data,
|
|
1794
1811
|
},
|
|
1795
|
-
buttons: (
|
|
1796
|
-
ClientId: (
|
|
1797
|
-
ClientName: (
|
|
1812
|
+
buttons: (_58 = (_57 = (_56 = resp.data) === null || _56 === void 0 ? void 0 : _56.details) === null || _57 === void 0 ? void 0 : _57.template) === null || _58 === void 0 ? void 0 : _58.button,
|
|
1813
|
+
ClientId: (_59 = resp.data) === null || _59 === void 0 ? void 0 : _59.clientId,
|
|
1814
|
+
ClientName: (_60 = resp.data) === null || _60 === void 0 ? void 0 : _60.clientName,
|
|
1798
1815
|
},
|
|
1799
|
-
isUpload: ((
|
|
1800
|
-
fileId: (
|
|
1816
|
+
isUpload: ((_61 = resp.data) === null || _61 === void 0 ? void 0 : _61.fileId) !== '',
|
|
1817
|
+
fileId: (_62 = resp.data) === null || _62 === void 0 ? void 0 : _62.fileId,
|
|
1801
1818
|
};
|
|
1802
1819
|
localStorage.setItem('telin.campaign', JSON.stringify(Object.assign(Object.assign({}, this.getCampaignStorage), {
|
|
1803
1820
|
generalInformation: {
|
|
1804
|
-
id: (
|
|
1821
|
+
id: (_63 = resp.data) === null || _63 === void 0 ? void 0 : _63.id,
|
|
1805
1822
|
form: generalInformation,
|
|
1806
1823
|
},
|
|
1807
|
-
failover: (
|
|
1808
|
-
targetAudience: (
|
|
1824
|
+
failover: (_64 = resp.data) === null || _64 === void 0 ? void 0 : _64.failover,
|
|
1825
|
+
targetAudience: (_65 = resp.data) === null || _65 === void 0 ? void 0 : _65.targets,
|
|
1809
1826
|
targetAudienceFile: {
|
|
1810
|
-
name: (
|
|
1811
|
-
targetURL: (
|
|
1827
|
+
name: (_66 = resp.data) === null || _66 === void 0 ? void 0 : _66.fileName,
|
|
1828
|
+
targetURL: (_67 = resp.data) === null || _67 === void 0 ? void 0 : _67.targetURL,
|
|
1812
1829
|
},
|
|
1813
1830
|
scheduler: {
|
|
1814
|
-
schedulerType: ((
|
|
1831
|
+
schedulerType: ((_68 = resp.data) === null || _68 === void 0 ? void 0 : _68.scheduleType) === 'MULTI'
|
|
1815
1832
|
? 'ONE_TIME'
|
|
1816
|
-
: (
|
|
1817
|
-
startDate: (
|
|
1818
|
-
startTime: (
|
|
1819
|
-
isRepeat: ((
|
|
1820
|
-
delivery: (
|
|
1833
|
+
: (_69 = resp.data) === null || _69 === void 0 ? void 0 : _69.scheduleType,
|
|
1834
|
+
startDate: (_71 = (_70 = resp.data) === null || _70 === void 0 ? void 0 : _70.startTime) === null || _71 === void 0 ? void 0 : _71.split(' ')[0],
|
|
1835
|
+
startTime: (_73 = (_72 = resp.data) === null || _72 === void 0 ? void 0 : _72.startTime) === null || _73 === void 0 ? void 0 : _73.split(' ')[1],
|
|
1836
|
+
isRepeat: ((_74 = resp.data) === null || _74 === void 0 ? void 0 : _74.scheduleType) === 'MULTI',
|
|
1837
|
+
delivery: (_75 = resp.data) === null || _75 === void 0 ? void 0 : _75.repeat,
|
|
1821
1838
|
},
|
|
1822
1839
|
})));
|
|
1823
1840
|
this.isLoading = false;
|
|
@@ -2438,24 +2455,35 @@ class GeneralInformationWAReqModel {
|
|
|
2438
2455
|
}
|
|
2439
2456
|
return result;
|
|
2440
2457
|
}, []), (_g !== null && _g !== void 0 ? _g : []));
|
|
2441
|
-
|
|
2442
|
-
|
|
2443
|
-
|
|
2444
|
-
|
|
2445
|
-
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
|
|
2458
|
+
// CAROUSEL
|
|
2459
|
+
let carouselPayload = undefined;
|
|
2460
|
+
if (source.paramCarousel && source.paramCarousel.length > 0) {
|
|
2461
|
+
carouselPayload = source.paramCarousel.map((card) => {
|
|
2462
|
+
// Map Body Card
|
|
2463
|
+
const mappedBody = (card.bodyParams || []).map((b) => b.paramName);
|
|
2464
|
+
// Map Button Card -> Array of Arrays: [ ["sku-a"], ["info-a"] ]
|
|
2465
|
+
const mappedButtons = (card.buttonParams || []).map((btnGroup) => {
|
|
2466
|
+
return (btnGroup || []).map((btn) => btn.paramName);
|
|
2467
|
+
});
|
|
2468
|
+
return {
|
|
2469
|
+
headerURL: card.headerURL || '',
|
|
2470
|
+
body: mappedBody,
|
|
2471
|
+
button: mappedButtons,
|
|
2472
|
+
};
|
|
2473
|
+
});
|
|
2474
|
+
}
|
|
2475
|
+
this.template = Object.assign({ id: source.template.ID, name: source.template.name, lang: source.template.lang, headerUrl: source.targetURL, header: (_j = (_h = source.paramHeader) === null || _h === void 0 ? void 0 : _h.map((t) => t.name), (_j !== null && _j !== void 0 ? _j : [])), data: source.isUseExistingTemplate && ((_k = source.variables) === null || _k === void 0 ? void 0 : _k.length)
|
|
2476
|
+
? source.variables.map((v) => v.paramName)
|
|
2477
|
+
: (_m = (_l = source.paramBody) === null || _l === void 0 ? void 0 : _l.map((t) => t.name), (_m !== null && _m !== void 0 ? _m : [])), button: finalButtons, buttonParams: source.buttonParams
|
|
2451
2478
|
? source.buttonParams.map((btn) => {
|
|
2452
2479
|
return {
|
|
2453
2480
|
label: btn.label,
|
|
2454
2481
|
payload: btn.payload ? btn.payload : btn.label,
|
|
2455
2482
|
};
|
|
2456
2483
|
})
|
|
2457
|
-
: [],
|
|
2458
|
-
|
|
2484
|
+
: [] }, (carouselPayload && carouselPayload.length > 0
|
|
2485
|
+
? { carousel: carouselPayload }
|
|
2486
|
+
: {}));
|
|
2459
2487
|
if (source.template.category === 'AUTHENTICATION')
|
|
2460
2488
|
this.template = {
|
|
2461
2489
|
name: source.template.name,
|
|
@@ -2614,7 +2642,7 @@ let NewCampaignComponent = class NewCampaignComponent {
|
|
|
2614
2642
|
const subs = this.apiAdapterService
|
|
2615
2643
|
.executeApiRequest([], `/campaign/${this.campaignID}`, 'GET')
|
|
2616
2644
|
.subscribe((resp) => {
|
|
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;
|
|
2645
|
+
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, _73, _74, _75, _76;
|
|
2618
2646
|
if (!resp)
|
|
2619
2647
|
return;
|
|
2620
2648
|
const generalInformation = {
|
|
@@ -2642,48 +2670,65 @@ let NewCampaignComponent = class NewCampaignComponent {
|
|
|
2642
2670
|
paramHeader: (_17 = (_16 = (_15 = resp.data) === null || _15 === void 0 ? void 0 : _15.details) === null || _16 === void 0 ? void 0 : _16.template) === null || _17 === void 0 ? void 0 : _17.header,
|
|
2643
2671
|
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,
|
|
2644
2672
|
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,
|
|
2645
|
-
|
|
2673
|
+
paramCarousel: ((_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.carousel) === null || _27 === void 0 ? void 0 : _27.map((card) => {
|
|
2674
|
+
return {
|
|
2675
|
+
headerURL: card.headerURL || '',
|
|
2676
|
+
bodyParams: (card.body || []).map((val) => ({
|
|
2677
|
+
paramName: val,
|
|
2678
|
+
})),
|
|
2679
|
+
buttonParams: (card.button || []).map((btnGroup) => {
|
|
2680
|
+
return (btnGroup || []).map((val) => ({
|
|
2681
|
+
paramName: val,
|
|
2682
|
+
}));
|
|
2683
|
+
}),
|
|
2684
|
+
};
|
|
2685
|
+
})) || [],
|
|
2686
|
+
otpValue: (_32 = [...(_31 = (_30 = (_29 = (_28 = resp.data) === null || _28 === void 0 ? void 0 : _28.details) === null || _29 === void 0 ? void 0 : _29.template) === null || _30 === void 0 ? void 0 : _30.data, (_31 !== null && _31 !== void 0 ? _31 : []))]) === null || _32 === void 0 ? void 0 : _32.pop(),
|
|
2687
|
+
variables: (((_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.data) || []).map((val) => ({
|
|
2688
|
+
paramName: val,
|
|
2689
|
+
})),
|
|
2690
|
+
isUseExistingTemplate: !!((_36 = resp.data) === null || _36 === void 0 ? void 0 : _36.templateName),
|
|
2646
2691
|
template: {
|
|
2647
|
-
ID: (
|
|
2648
|
-
name: (
|
|
2649
|
-
lang: (
|
|
2650
|
-
platform: (
|
|
2651
|
-
headerURL: (
|
|
2692
|
+
ID: (_39 = (_38 = (_37 = resp.data) === null || _37 === void 0 ? void 0 : _37.details) === null || _38 === void 0 ? void 0 : _38.template) === null || _39 === void 0 ? void 0 : _39.id,
|
|
2693
|
+
name: (_42 = (_41 = (_40 = resp.data) === null || _40 === void 0 ? void 0 : _40.details) === null || _41 === void 0 ? void 0 : _41.template) === null || _42 === void 0 ? void 0 : _42.name,
|
|
2694
|
+
lang: (_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.lang,
|
|
2695
|
+
platform: (_46 = resp.data) === null || _46 === void 0 ? void 0 : _46.platform,
|
|
2696
|
+
headerURL: (_49 = (_48 = (_47 = resp.data) === null || _47 === void 0 ? void 0 : _47.details) === null || _48 === void 0 ? void 0 : _48.template) === null || _49 === void 0 ? void 0 : _49.headerURL,
|
|
2652
2697
|
header: {
|
|
2653
|
-
examples: (
|
|
2698
|
+
examples: (_52 = (_51 = (_50 = resp.data) === null || _50 === void 0 ? void 0 : _50.details) === null || _51 === void 0 ? void 0 : _51.template) === null || _52 === void 0 ? void 0 : _52.header,
|
|
2654
2699
|
},
|
|
2655
2700
|
body: {
|
|
2656
|
-
examples: (
|
|
2701
|
+
examples: (_55 = (_54 = (_53 = resp.data) === null || _53 === void 0 ? void 0 : _53.details) === null || _54 === void 0 ? void 0 : _54.template) === null || _55 === void 0 ? void 0 : _55.data,
|
|
2657
2702
|
},
|
|
2658
|
-
buttons: (
|
|
2659
|
-
ClientId: (
|
|
2660
|
-
ClientName: (
|
|
2703
|
+
buttons: (_58 = (_57 = (_56 = resp.data) === null || _56 === void 0 ? void 0 : _56.details) === null || _57 === void 0 ? void 0 : _57.template) === null || _58 === void 0 ? void 0 : _58.button,
|
|
2704
|
+
ClientId: (_59 = resp.data) === null || _59 === void 0 ? void 0 : _59.clientId,
|
|
2705
|
+
ClientName: (_60 = resp.data) === null || _60 === void 0 ? void 0 : _60.clientName,
|
|
2661
2706
|
},
|
|
2662
|
-
isUpload: ((
|
|
2663
|
-
fileId: (
|
|
2707
|
+
isUpload: ((_61 = resp.data) === null || _61 === void 0 ? void 0 : _61.fileId) !== '',
|
|
2708
|
+
fileId: (_62 = resp.data) === null || _62 === void 0 ? void 0 : _62.fileId,
|
|
2664
2709
|
};
|
|
2665
2710
|
localStorage.setItem('telin.campaign', JSON.stringify(Object.assign(Object.assign({}, this.getCampaignStorage), {
|
|
2666
2711
|
generalInformation: {
|
|
2667
|
-
id: (
|
|
2712
|
+
id: (_63 = resp.data) === null || _63 === void 0 ? void 0 : _63.id,
|
|
2668
2713
|
form: generalInformation,
|
|
2669
2714
|
},
|
|
2670
|
-
failover: (
|
|
2671
|
-
targetAudience: (
|
|
2715
|
+
failover: (_64 = resp.data) === null || _64 === void 0 ? void 0 : _64.failover,
|
|
2716
|
+
targetAudience: (_65 = resp.data) === null || _65 === void 0 ? void 0 : _65.targets,
|
|
2672
2717
|
targetAudienceFile: {
|
|
2673
|
-
name: (
|
|
2674
|
-
targetURL: (
|
|
2718
|
+
name: (_66 = resp.data) === null || _66 === void 0 ? void 0 : _66.fileName,
|
|
2719
|
+
targetURL: (_67 = resp.data) === null || _67 === void 0 ? void 0 : _67.targetURL,
|
|
2675
2720
|
},
|
|
2676
2721
|
scheduler: {
|
|
2677
|
-
schedulerType: ((
|
|
2722
|
+
schedulerType: ((_68 = resp.data) === null || _68 === void 0 ? void 0 : _68.scheduleType) === 'MULTI'
|
|
2678
2723
|
? 'ONE_TIME'
|
|
2679
|
-
: (
|
|
2680
|
-
startDate: (
|
|
2681
|
-
startTime: (
|
|
2682
|
-
isRepeat: ((
|
|
2683
|
-
delivery: (
|
|
2724
|
+
: (_69 = resp.data) === null || _69 === void 0 ? void 0 : _69.scheduleType,
|
|
2725
|
+
startDate: (_71 = (_70 = resp.data) === null || _70 === void 0 ? void 0 : _70.startTime) === null || _71 === void 0 ? void 0 : _71.split(' ')[0],
|
|
2726
|
+
startTime: (_73 = (_72 = resp.data) === null || _72 === void 0 ? void 0 : _72.startTime) === null || _73 === void 0 ? void 0 : _73.split(' ')[1],
|
|
2727
|
+
isRepeat: ((_74 = resp.data) === null || _74 === void 0 ? void 0 : _74.scheduleType) === 'MULTI',
|
|
2728
|
+
delivery: (_75 = resp.data) === null || _75 === void 0 ? void 0 : _75.repeat,
|
|
2684
2729
|
},
|
|
2685
2730
|
})));
|
|
2686
|
-
this.isLine = ((
|
|
2731
|
+
this.isLine = ((_76 = resp.data) === null || _76 === void 0 ? void 0 : _76.platform) === 'LINE';
|
|
2687
2732
|
this.isLoading = false;
|
|
2688
2733
|
this.initWizard();
|
|
2689
2734
|
}, () => {
|
|
@@ -3931,6 +3976,7 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
3931
3976
|
return campaignData ? JSON.parse(campaignData) : {};
|
|
3932
3977
|
}
|
|
3933
3978
|
initForm() {
|
|
3979
|
+
var _a;
|
|
3934
3980
|
this.form = new FormGroup({
|
|
3935
3981
|
channel: new FormControl(null, Validators$1.required),
|
|
3936
3982
|
media: new FormControl(null),
|
|
@@ -3960,12 +4006,16 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
3960
4006
|
variables: new FormArray([]),
|
|
3961
4007
|
useXlsx: new FormControl(false),
|
|
3962
4008
|
buttonParams: new FormArray([]),
|
|
4009
|
+
paramCarousel: new FormArray([]),
|
|
3963
4010
|
});
|
|
3964
4011
|
this.form.valueChanges.subscribe(() => {
|
|
3965
4012
|
setTimeout(() => {
|
|
3966
4013
|
this.updateGeneralInformationForm.emit(this.form);
|
|
3967
4014
|
});
|
|
3968
4015
|
});
|
|
4016
|
+
(_a = this.form.get('isUpload')) === null || _a === void 0 ? void 0 : _a.valueChanges.subscribe((val) => {
|
|
4017
|
+
this.toggleExcelValidation(val);
|
|
4018
|
+
});
|
|
3969
4019
|
}
|
|
3970
4020
|
initDisable() {
|
|
3971
4021
|
if (!this.isReadOnlyMode) {
|
|
@@ -3974,7 +4024,7 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
3974
4024
|
this.form.disable();
|
|
3975
4025
|
}
|
|
3976
4026
|
initEdit() {
|
|
3977
|
-
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;
|
|
4027
|
+
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;
|
|
3978
4028
|
const storageData = this.getCampaignStorage;
|
|
3979
4029
|
const formValues = (_b = (_a = storageData) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.form;
|
|
3980
4030
|
if (!storageData ||
|
|
@@ -3992,20 +4042,26 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
3992
4042
|
(_v = this.getControl('isUpload')) === null || _v === void 0 ? void 0 : _v.setValue((_w = formValues) === null || _w === void 0 ? void 0 : _w.isUpload);
|
|
3993
4043
|
(_x = this.getControl('fileId')) === null || _x === void 0 ? void 0 : _x.setValue((_y = formValues) === null || _y === void 0 ? void 0 : _y.fileId);
|
|
3994
4044
|
(_z = this.getControl('otpValue')) === null || _z === void 0 ? void 0 : _z.setValue((_0 = formValues) === null || _0 === void 0 ? void 0 : _0.otpValue);
|
|
3995
|
-
(_1 = this.getControl('isUseExistingTemplate')) === null || _1 === void 0 ? void 0 : _1.setValue(
|
|
3996
|
-
|
|
3997
|
-
|
|
3998
|
-
|
|
4045
|
+
(_1 = this.getControl('isUseExistingTemplate')) === null || _1 === void 0 ? void 0 : _1.setValue(((_2 = formValues) === null || _2 === void 0 ? void 0 : _2.isUseExistingTemplate) !== undefined
|
|
4046
|
+
? formValues.isUseExistingTemplate
|
|
4047
|
+
: !!((_4 = (_3 = formValues) === null || _3 === void 0 ? void 0 : _3.template) === null || _4 === void 0 ? void 0 : _4.name));
|
|
4048
|
+
(_5 = this.getControl('isNeedSave')) === null || _5 === void 0 ? void 0 : _5.setValue(!!((_6 = formValues) === null || _6 === void 0 ? void 0 : _6.isNeedSave));
|
|
4049
|
+
(_7 = this.getControl('isDownloadVariableXLS')) === null || _7 === void 0 ? void 0 : _7.setValue((_8 = formValues) === null || _8 === void 0 ? void 0 : _8.isDownloadVariableXLS);
|
|
4050
|
+
(_9 = this.getControl('ttl')) === null || _9 === void 0 ? void 0 : _9.setValue((_10 = formValues) === null || _10 === void 0 ? void 0 : _10.ttl);
|
|
4051
|
+
const savedVariables = (_11 = formValues) === null || _11 === void 0 ? void 0 : _11.variables;
|
|
3999
4052
|
if (savedVariables && Array.isArray(savedVariables) && savedVariables.length > 0) {
|
|
4000
4053
|
this.variables.clear();
|
|
4001
4054
|
savedVariables.forEach((item) => {
|
|
4002
4055
|
this.variables.push(new FormGroup({
|
|
4003
|
-
paramName: new FormControl({
|
|
4056
|
+
paramName: new FormControl({
|
|
4057
|
+
value: item.paramName || '',
|
|
4058
|
+
disabled: this.isReadOnlyMode,
|
|
4059
|
+
}),
|
|
4004
4060
|
}));
|
|
4005
4061
|
});
|
|
4006
4062
|
}
|
|
4007
|
-
this.isHaveTemplateParam = (
|
|
4008
|
-
this.getTemplateOptionService(null, (
|
|
4063
|
+
this.isHaveTemplateParam = (_12 = this.getControl('isUpload')) === null || _12 === void 0 ? void 0 : _12.value;
|
|
4064
|
+
this.getTemplateOptionService(null, (_14 = (_13 = this.getControl('template')) === null || _13 === void 0 ? void 0 : _13.value) === null || _14 === void 0 ? void 0 : _14.name);
|
|
4009
4065
|
}
|
|
4010
4066
|
initValidation() {
|
|
4011
4067
|
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;
|
|
@@ -4248,6 +4304,21 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
4248
4304
|
return (((_a = this.getControl('channel')) === null || _a === void 0 ? void 0 : _a.value) &&
|
|
4249
4305
|
((_c = (_b = this.getControl('channel')) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === 'utility');
|
|
4250
4306
|
}
|
|
4307
|
+
get getCarouselControls() {
|
|
4308
|
+
return this.form.get('paramCarousel').controls;
|
|
4309
|
+
}
|
|
4310
|
+
getCarouselButtons(cardIndex) {
|
|
4311
|
+
var _a, _b, _c, _d;
|
|
4312
|
+
const templateValue = (_a = this.form.get('template')) === null || _a === void 0 ? void 0 : _a.value;
|
|
4313
|
+
return ((_d = (_c = (_b = templateValue) === null || _b === void 0 ? void 0 : _b.carousel) === null || _c === void 0 ? void 0 : _c[cardIndex]) === null || _d === void 0 ? void 0 : _d.buttons) || [];
|
|
4314
|
+
}
|
|
4315
|
+
getCarouselBodyParams(cardIndex) {
|
|
4316
|
+
return this.getCarouselControls[cardIndex].get('bodyParams');
|
|
4317
|
+
}
|
|
4318
|
+
getCarouselBtnParams(cardIndex, btnIndex) {
|
|
4319
|
+
const btnParamsArray = this.getCarouselControls[cardIndex].get('buttonParams');
|
|
4320
|
+
return btnParamsArray.at(btnIndex);
|
|
4321
|
+
}
|
|
4251
4322
|
getNextAccountBatch() {
|
|
4252
4323
|
if (!this.isHaveNextAccountOption)
|
|
4253
4324
|
return;
|
|
@@ -4327,7 +4398,7 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
4327
4398
|
return ((_a = this.getControl('isUpload')) === null || _a === void 0 ? void 0 : _a.value) || false;
|
|
4328
4399
|
}
|
|
4329
4400
|
updateTemplate(template) {
|
|
4330
|
-
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;
|
|
4401
|
+
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;
|
|
4331
4402
|
this.isShowParameter = false;
|
|
4332
4403
|
if (!template)
|
|
4333
4404
|
return;
|
|
@@ -4403,7 +4474,86 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
4403
4474
|
paramValue = each;
|
|
4404
4475
|
this.addParamBody(paramValue);
|
|
4405
4476
|
});
|
|
4406
|
-
|
|
4477
|
+
// ==========================================================
|
|
4478
|
+
// TAMBAHAN: Generate Variable Dinamis dari template.body.examples
|
|
4479
|
+
// ==========================================================
|
|
4480
|
+
this.variables.clear();
|
|
4481
|
+
if (((_34 = template.body) === null || _34 === void 0 ? void 0 : _34.examples) && template.body.examples.length > 0) {
|
|
4482
|
+
const isSavedTemplateMatches = ((_36 = (_35 = formStorage) === null || _35 === void 0 ? void 0 : _35.template) === null || _36 === void 0 ? void 0 : _36.name) === template.name;
|
|
4483
|
+
template.body.examples.forEach((exampleValue, index) => {
|
|
4484
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
4485
|
+
let savedVariable = '';
|
|
4486
|
+
if (isSavedTemplateMatches) {
|
|
4487
|
+
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]));
|
|
4488
|
+
}
|
|
4489
|
+
const finalValue = savedVariable ? savedVariable : '';
|
|
4490
|
+
this.variables.push(new FormGroup({
|
|
4491
|
+
paramName: new FormControl({
|
|
4492
|
+
value: finalValue,
|
|
4493
|
+
disabled: this.isReadOnlyMode,
|
|
4494
|
+
}),
|
|
4495
|
+
}));
|
|
4496
|
+
});
|
|
4497
|
+
}
|
|
4498
|
+
if ((_37 = template.body) === null || _37 === void 0 ? void 0 : _37.text) {
|
|
4499
|
+
(_38 = this.getControl('text')) === null || _38 === void 0 ? void 0 : _38.setValue(template.body.text);
|
|
4500
|
+
(_39 = this.getControl('text')) === null || _39 === void 0 ? void 0 : _39.updateValueAndValidity();
|
|
4501
|
+
}
|
|
4502
|
+
// ==========================================================
|
|
4503
|
+
// ==========================================================
|
|
4504
|
+
// TAMBAHAN: Generate Form Carousel Dinamis
|
|
4505
|
+
// ==========================================================
|
|
4506
|
+
const carouselArray = this.form.get('paramCarousel');
|
|
4507
|
+
carouselArray.clear();
|
|
4508
|
+
const isUsingUpload = (_40 = this.getControl('isUpload')) === null || _40 === void 0 ? void 0 : _40.value;
|
|
4509
|
+
const dynamicValidator = isUsingUpload ? null : Validators$1.required;
|
|
4510
|
+
if (template.carousel && template.carousel.length > 0) {
|
|
4511
|
+
const isSavedTemplateMatches = ((_42 = (_41 = formStorage) === null || _41 === void 0 ? void 0 : _41.template) === null || _42 === void 0 ? void 0 : _42.name) === template.name;
|
|
4512
|
+
// BUKAN formStorage?.template?.carousel, TAPI formStorage?.paramCarousel (tempat lu ngetik)
|
|
4513
|
+
const savedUserInputs = isSavedTemplateMatches ? (_43 = formStorage) === null || _43 === void 0 ? void 0 : _43.paramCarousel : null;
|
|
4514
|
+
template.carousel.forEach((card, cardIdx) => {
|
|
4515
|
+
var _a, _b, _c, _d, _e;
|
|
4516
|
+
const cardGroup = new FormGroup({
|
|
4517
|
+
headerURL: new FormControl((_b = (_a = card.header) === null || _a === void 0 ? void 0 : _a.url, (_b !== null && _b !== void 0 ? _b : ''))),
|
|
4518
|
+
bodyParams: new FormArray([]),
|
|
4519
|
+
buttonParams: new FormArray([]),
|
|
4520
|
+
});
|
|
4521
|
+
// 1. Setup Body Params
|
|
4522
|
+
if (((_d = (_c = card.body) === null || _c === void 0 ? void 0 : _c.examples) === null || _d === void 0 ? void 0 : _d.length) > 0) {
|
|
4523
|
+
card.body.examples.forEach((_, bodyIdx) => {
|
|
4524
|
+
var _a, _b, _c, _d, _e;
|
|
4525
|
+
// AMBIL VALUE DARI INPUTAN SEBELUMNYA
|
|
4526
|
+
const savedBodyVal = (_e = (_d = (_c = (_b = (_a = savedUserInputs) === null || _a === void 0 ? void 0 : _a[cardIdx]) === null || _b === void 0 ? void 0 : _b.bodyParams) === null || _c === void 0 ? void 0 : _c[bodyIdx]) === null || _d === void 0 ? void 0 : _d.paramName, (_e !== null && _e !== void 0 ? _e : ''));
|
|
4527
|
+
cardGroup.get('bodyParams').push(new FormGroup({
|
|
4528
|
+
paramName: new FormControl({ value: savedBodyVal, disabled: this.isReadOnlyMode }, dynamicValidator),
|
|
4529
|
+
}));
|
|
4530
|
+
});
|
|
4531
|
+
}
|
|
4532
|
+
// 2. Setup Button Params
|
|
4533
|
+
if (((_e = card.buttons) === null || _e === void 0 ? void 0 : _e.length) > 0) {
|
|
4534
|
+
card.buttons.forEach((btn, btnIdx) => {
|
|
4535
|
+
var _a;
|
|
4536
|
+
const btnParamArray = new FormArray([]);
|
|
4537
|
+
if (((_a = btn.examples) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
4538
|
+
btn.examples.forEach((_, paramIdx) => {
|
|
4539
|
+
var _a, _b, _c, _d, _e, _f;
|
|
4540
|
+
// AMBIL VALUE DARI INPUTAN SEBELUMNYA
|
|
4541
|
+
const savedBtnVal = (_f = (_e = (_d = (_c = (_b = (_a = savedUserInputs) === null || _a === void 0 ? void 0 : _a[cardIdx]) === null || _b === void 0 ? void 0 : _b.buttonParams) === null || _c === void 0 ? void 0 : _c[btnIdx]) === null || _d === void 0 ? void 0 : _d[paramIdx]) === null || _e === void 0 ? void 0 : _e.paramName, (_f !== null && _f !== void 0 ? _f : ''));
|
|
4542
|
+
btnParamArray.push(new FormGroup({
|
|
4543
|
+
paramName: new FormControl({
|
|
4544
|
+
value: savedBtnVal,
|
|
4545
|
+
disabled: this.isReadOnlyMode,
|
|
4546
|
+
}, dynamicValidator),
|
|
4547
|
+
}));
|
|
4548
|
+
});
|
|
4549
|
+
}
|
|
4550
|
+
cardGroup.get('buttonParams').push(btnParamArray);
|
|
4551
|
+
});
|
|
4552
|
+
}
|
|
4553
|
+
carouselArray.push(cardGroup);
|
|
4554
|
+
});
|
|
4555
|
+
}
|
|
4556
|
+
(_44 = template.buttons) === null || _44 === void 0 ? void 0 : _44.forEach((each, index) => {
|
|
4407
4557
|
var _a, _b, _c, _d;
|
|
4408
4558
|
this.addParamButton();
|
|
4409
4559
|
const button = this.getButton;
|
|
@@ -4427,6 +4577,15 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
4427
4577
|
(_d = lastControl) === null || _d === void 0 ? void 0 : _d.updateValueAndValidity();
|
|
4428
4578
|
}
|
|
4429
4579
|
});
|
|
4580
|
+
const paramBodyArray = this.form.get('paramBody');
|
|
4581
|
+
paramBodyArray.clearValidators();
|
|
4582
|
+
paramBodyArray.controls.forEach((ctrl) => {
|
|
4583
|
+
var _a, _b;
|
|
4584
|
+
(_a = ctrl.get('name')) === null || _a === void 0 ? void 0 : _a.clearValidators();
|
|
4585
|
+
(_b = ctrl.get('name')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity();
|
|
4586
|
+
});
|
|
4587
|
+
paramBodyArray.updateValueAndValidity();
|
|
4588
|
+
this.toggleExcelValidation((_45 = this.form.get('isUpload')) === null || _45 === void 0 ? void 0 : _45.value);
|
|
4430
4589
|
}
|
|
4431
4590
|
updateMediaType(_mediaType) {
|
|
4432
4591
|
if (_mediaType === EnumData.MEDIA_TYPE_LOCATION)
|
|
@@ -4511,6 +4670,31 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
4511
4670
|
(_h = this.getControl('otpValue')) === null || _h === void 0 ? void 0 : _h.reset();
|
|
4512
4671
|
(_j = this.getControl('otpValue')) === null || _j === void 0 ? void 0 : _j.clearValidators();
|
|
4513
4672
|
(_k = this.getControl('otpValue')) === null || _k === void 0 ? void 0 : _k.updateValueAndValidity();
|
|
4673
|
+
this.variables.controls.forEach((ctrl) => {
|
|
4674
|
+
var _a, _b;
|
|
4675
|
+
(_a = ctrl.get('paramName')) === null || _a === void 0 ? void 0 : _a.clearValidators();
|
|
4676
|
+
(_b = ctrl.get('paramName')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity();
|
|
4677
|
+
});
|
|
4678
|
+
const carouselArray = this.form.get('paramCarousel');
|
|
4679
|
+
if (carouselArray) {
|
|
4680
|
+
carouselArray.controls.forEach((card) => {
|
|
4681
|
+
var _a, _b;
|
|
4682
|
+
const bodyParams = card.get('bodyParams');
|
|
4683
|
+
(_a = bodyParams) === null || _a === void 0 ? void 0 : _a.controls.forEach((bCtrl) => {
|
|
4684
|
+
var _a, _b;
|
|
4685
|
+
(_a = bCtrl.get('paramName')) === null || _a === void 0 ? void 0 : _a.clearValidators();
|
|
4686
|
+
(_b = bCtrl.get('paramName')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity();
|
|
4687
|
+
});
|
|
4688
|
+
const btnParams = card.get('buttonParams');
|
|
4689
|
+
(_b = btnParams) === null || _b === void 0 ? void 0 : _b.controls.forEach((btnGroup) => {
|
|
4690
|
+
btnGroup.controls.forEach((pBtnCtrl) => {
|
|
4691
|
+
var _a, _b;
|
|
4692
|
+
(_a = pBtnCtrl.get('paramName')) === null || _a === void 0 ? void 0 : _a.clearValidators();
|
|
4693
|
+
(_b = pBtnCtrl.get('paramName')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity();
|
|
4694
|
+
});
|
|
4695
|
+
});
|
|
4696
|
+
});
|
|
4697
|
+
}
|
|
4514
4698
|
return;
|
|
4515
4699
|
}
|
|
4516
4700
|
this.updateTemplate((_l = this.getControl('template')) === null || _l === void 0 ? void 0 : _l.value);
|
|
@@ -4520,19 +4704,12 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
4520
4704
|
(_a = this.getControl('isDownloadVariableXLS')) === null || _a === void 0 ? void 0 : _a.setValue(false);
|
|
4521
4705
|
this.variables.clear();
|
|
4522
4706
|
this.updateVariableDownloadXLS(false);
|
|
4707
|
+
(_b = this.getControl('text')) === null || _b === void 0 ? void 0 : _b.setValue('');
|
|
4523
4708
|
if (useExisting) {
|
|
4524
|
-
(
|
|
4525
|
-
|
|
4526
|
-
(_c = this.getControl('text')) === null || _c === void 0 ? void 0 : _c.clearValidators();
|
|
4527
|
-
(_d = this.getControl('text')) === null || _d === void 0 ? void 0 : _d.setValue('Halo {{1}}, ini adalah kode verifikasi kamu: {{2}}');
|
|
4709
|
+
(_c = this.getControl('template')) === null || _c === void 0 ? void 0 : _c.setValidators(Validators$1.required);
|
|
4710
|
+
(_d = this.getControl('text')) === null || _d === void 0 ? void 0 : _d.clearValidators();
|
|
4528
4711
|
(_e = this.getControl('text')) === null || _e === void 0 ? void 0 : _e.updateValueAndValidity();
|
|
4529
4712
|
(_f = this.getControl('template')) === null || _f === void 0 ? void 0 : _f.updateValueAndValidity();
|
|
4530
|
-
this.variables.push(new FormGroup({
|
|
4531
|
-
paramName: new FormControl('', Validators$1.required),
|
|
4532
|
-
}));
|
|
4533
|
-
this.variables.push(new FormGroup({
|
|
4534
|
-
paramName: new FormControl('', Validators$1.required),
|
|
4535
|
-
}));
|
|
4536
4713
|
}
|
|
4537
4714
|
else {
|
|
4538
4715
|
(_g = this.getControl('template')) === null || _g === void 0 ? void 0 : _g.reset();
|
|
@@ -4589,9 +4766,10 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
4589
4766
|
const variablesArray = this.variables;
|
|
4590
4767
|
if (isChecked) {
|
|
4591
4768
|
variablesArray.controls.forEach((control) => {
|
|
4592
|
-
var _a, _b;
|
|
4769
|
+
var _a, _b, _c;
|
|
4593
4770
|
(_a = control.get('paramName')) === null || _a === void 0 ? void 0 : _a.clearValidators();
|
|
4594
|
-
(_b = control.get('paramName')) === null || _b === void 0 ? void 0 : _b.
|
|
4771
|
+
(_b = control.get('paramName')) === null || _b === void 0 ? void 0 : _b.setValue('');
|
|
4772
|
+
(_c = control.get('paramName')) === null || _c === void 0 ? void 0 : _c.updateValueAndValidity();
|
|
4595
4773
|
});
|
|
4596
4774
|
}
|
|
4597
4775
|
else {
|
|
@@ -4603,6 +4781,34 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
|
|
|
4603
4781
|
}
|
|
4604
4782
|
this.form.updateValueAndValidity();
|
|
4605
4783
|
}
|
|
4784
|
+
toggleExcelValidation(isUpload) {
|
|
4785
|
+
const currentValidator = isUpload ? null : Validators$1.required;
|
|
4786
|
+
// ====================================================
|
|
4787
|
+
// 2. UPDATE VALIDASI CAROUSEL VARIABLES
|
|
4788
|
+
// ====================================================
|
|
4789
|
+
const carouselArray = this.form.get('paramCarousel');
|
|
4790
|
+
if (carouselArray) {
|
|
4791
|
+
carouselArray.controls.forEach((card) => {
|
|
4792
|
+
var _a, _b;
|
|
4793
|
+
const bodyParams = card.get('bodyParams');
|
|
4794
|
+
(_a = bodyParams) === null || _a === void 0 ? void 0 : _a.controls.forEach((bCtrl) => {
|
|
4795
|
+
var _a, _b;
|
|
4796
|
+
(_a = bCtrl.get('paramName')) === null || _a === void 0 ? void 0 : _a.setValidators(currentValidator);
|
|
4797
|
+
(_b = bCtrl.get('paramName')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity({ emitEvent: false });
|
|
4798
|
+
});
|
|
4799
|
+
const btnParams = card.get('buttonParams');
|
|
4800
|
+
(_b = btnParams) === null || _b === void 0 ? void 0 : _b.controls.forEach((btnGroup) => {
|
|
4801
|
+
btnGroup.controls.forEach((pBtnCtrl) => {
|
|
4802
|
+
var _a, _b;
|
|
4803
|
+
(_a = pBtnCtrl.get('paramName')) === null || _a === void 0 ? void 0 : _a.setValidators(currentValidator);
|
|
4804
|
+
(_b = pBtnCtrl.get('paramName')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity({ emitEvent: false });
|
|
4805
|
+
});
|
|
4806
|
+
});
|
|
4807
|
+
});
|
|
4808
|
+
carouselArray.updateValueAndValidity({ emitEvent: false });
|
|
4809
|
+
}
|
|
4810
|
+
this.form.updateValueAndValidity();
|
|
4811
|
+
}
|
|
4606
4812
|
ngOnDestroy() {
|
|
4607
4813
|
this.subscribers.forEach((each) => each.unsubscribe());
|
|
4608
4814
|
}
|
|
@@ -4629,7 +4835,7 @@ __decorate([
|
|
|
4629
4835
|
GeneralInformationWAComponent = __decorate([
|
|
4630
4836
|
Component({
|
|
4631
4837
|
selector: 'lib-general-information-wa',
|
|
4632
|
-
template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Message Type</mat-label>\r\n <mat-select placeholder=\"Select message type\" formControlName=\"channel\">\r\n <mat-option\r\n *ngFor=\"let option of msgTypeWAOption\"\r\n [value]=\"option.code\"\r\n (click)=\"formReset()\"\r\n >\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.channel\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('channel')?.touched && form.get('channel')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n\r\n <div\r\n *ngIf=\"!getIsTemplate\"\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 16px; border: 1px solid rgb(243, 124, 44)\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n <div *ngIf=\"!getIsUtility\">\r\n If you select this channel, keep in mind that the message might not be delivered to\r\n all selected customers. This is because the customer must have had a conversation\r\n previously with BSP.\r\n </div>\r\n\r\n <div *ngIf=\"getIsUtility\">\r\n You can send directly a utility message. You can choose between existing utility\r\n templates or creating a new one. If you create a new template, the system may check\r\n whether the content already exists as a template.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getIsText\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label class=\"asterix--after\">Text</mat-label>\r\n\r\n <textarea\r\n matInput\r\n rows=\"6\"\r\n cols=\"50\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"2\"\r\n cdkAutosizeMaxRows=\"15\"\r\n formControlName=\"text\"\r\n placeholder=\"Enter text\"\r\n #autosize=\"cdkTextareaAutosize\"\r\n ></textarea>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('text')?.touched && form.get('text')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsMedia\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Media Type</mat-label>\r\n\r\n <mat-select\r\n placeholder=\"Select media type\"\r\n formControlName=\"media\"\r\n (selectionChange)=\"updateMediaType($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let option of mediaTypeOption\" [value]=\"option.code\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.media\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('media').touched && form.get('media').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"form.get('media').value?.toLowerCase() !== 'location'\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n (click)=\"filePicker.click()\"\r\n formControlName=\"fileName\"\r\n />\r\n\r\n <button\r\n mat-button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Choose File\"\r\n (click)=\"filePicker.click()\"\r\n >\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n\r\n <input\r\n #filePicker\r\n hidden\r\n type=\"file\"\r\n [accept]=\"extFileAccepted\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.fileName\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('fileName').touched &&\r\n form.get('fileName').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('media').value?.toLowerCase() === 'location'\">\r\n <div class=\"w-100\">\r\n <h4 class=\"asterix--after\">Location</h4>\r\n\r\n <div class=\"w-100\">\r\n <agm-map\r\n style=\"width: 100%; height: 400px\"\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [disableDoubleClickZoom]=\"maps.isDoubleClickZoom\"\r\n [zoom]=\"maps.zoom\"\r\n >\r\n <agm-marker\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [markerDraggable]=\"maps.isDraggable\"\r\n (dragEnd)=\"markerDragEnd($event)\"\r\n ></agm-marker>\r\n </agm-map>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Location</mat-label>\r\n\r\n <input\r\n #mapSearch\r\n matInput\r\n type=\"text\"\r\n maxlength=\"100\"\r\n placeholder=\"Enter location here\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsTemplate\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n (selectionChange)=\"getTemplateOptionService($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"template\"\r\n placeholder=\"Select template\"\r\n [complete]=\"isHaveNextTemplateOption === false\"\r\n [compareWith]=\"templateSelectedDisplay\"\r\n (infiniteScroll)=\"getNextTemplateBatch()\"\r\n (selectionChange)=\"updateTemplate($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('template').value?.name\"\r\n (searchRes)=\"updateSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('template')?.touched &&\r\n form.get('template')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div *ngIf=\"isHaveTemplateParam\" class=\"d-flex justify-content-end\">\r\n <mat-checkbox\r\n labelPosition=\"before\"\r\n formControlName=\"isUpload\"\r\n (change)=\"updateDownloadCSV($event.checked)\"\r\n >\r\n Using Download XLSX\r\n </mat-checkbox>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!form.get('isUpload')?.value\">\r\n <div\r\n *ngIf=\"form.get('template')?.value?.category === 'AUTHENTICATION'\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label> OTP Value </mat-label>\r\n\r\n <input matInput type=\"text\" formControlName=\"otpValue\" />\r\n </mat-form-field>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getParamHeader?.length > 0\">\r\n <p class=\"font-16px font-PoppinsBold\">Header Parameter</p>\r\n\r\n <div\r\n *ngFor=\"let param of getParamHeader; let paramHeaderIndex = index\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramHeaderIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramHeaderIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getParamBody?.length > 0\">\r\n <p class=\"font-16px font-PoppinsBold mt-3\">Body Parameter</p>\r\n\r\n <div\r\n *ngFor=\"let param of getParamBody; let paramBodyIndex = index\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramBodyIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramBodyIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n <!-- rizal -->\r\n <h5\r\n class=\"mb-3 font-weight-bold mt-4\"\r\n *ngIf=\"(!isUsingExcelBulk && buttonParamsControls.length > 0) || isShowParameter\"\r\n >\r\n Button Parameter\r\n </h5>\r\n <div\r\n class=\"button-parameter-section\"\r\n *ngIf=\"buttonParamsControls.length > 0 && !isUsingExcelBulk\"\r\n >\r\n <div formArrayName=\"buttonParams\">\r\n <div\r\n *ngFor=\"let btnControl of buttonParamsControls; let i = index\"\r\n [formGroupName]=\"i\"\r\n >\r\n <p class=\"font-14px font-PoppinsBold mt-3\">Button {{ i + 1 }}</p>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter 1</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"payload\"\r\n placeholder=\"Parameter 1\"\r\n maxlength=\"256\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- titus -->\r\n <ng-container *ngIf=\"isShowParameter\">\r\n <ng-container *ngFor=\"let button of getButton; let buttonIndex = index\">\r\n <ng-container *ngIf=\"getParamButton(buttonIndex)?.length > 0\">\r\n <p class=\"font-14px font-PoppinsBold mt-3\">Button {{ buttonIndex + 1 }}</p>\r\n\r\n <div\r\n *ngFor=\"\r\n let param of getParamButton(buttonIndex);\r\n let paramIndex = index\r\n \"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"\r\n ['image', 'video', 'document'].includes(\r\n form.get('template')?.value?.header?.type?.toLowerCase()\r\n )\r\n \"\r\n >\r\n <p class=\"font-16px font-PoppinsBold mt-3\">File</p>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n (click)=\"filePicker.click()\"\r\n formControlName=\"fileName\"\r\n />\r\n\r\n <button\r\n mat-button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Choose File\"\r\n (click)=\"filePicker.click()\"\r\n >\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n\r\n <input\r\n #filePicker\r\n hidden\r\n type=\"file\"\r\n [accept]=\"extFileAccepted\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsCatalogue\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">Category</mat-label>\r\n\r\n <mat-select formControlName=\"category\" placeholder=\"Select category\">\r\n <mat-option *ngFor=\"let option of categoryOption\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.category\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('category')?.touched &&\r\n form.get('category')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">Catalog</mat-label>\r\n\r\n <mat-select formControlName=\"catalogue\" placeholder=\"Select catalog\">\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.catalogue\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('catalogue')?.touched &&\r\n form.get('catalogue')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"form.get('category')?.value === 'product'\"\r\n style=\"padding: 8px; border-radius: 8px; border: 1px solid #6177c4\"\r\n >\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Product</mat-label>\r\n\r\n <mat-select formControlName=\"product\" placeholder=\"Select product\">\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.product\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('product')?.touched &&\r\n form.get('product')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Body</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n maxlength=\"100\"\r\n formControlName=\"body\"\r\n placeholder=\"Enter body\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsUtility\">\r\n <div style=\"display: grid; gap: 0.5rem\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n <mat-radio-group\r\n style=\"display: flex; gap: 0.5rem; flex-wrap: wrap\"\r\n formControlName=\"isUseExistingTemplate\"\r\n (change)=\"handleChangeTemplate($event.value)\"\r\n >\r\n <mat-radio-button\r\n [value]=\"option.value\"\r\n *ngFor=\"let option of templates\"\r\n color=\"primary\"\r\n >\r\n {{ option.label }}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n (selectionChange)=\"handleChangeFrom($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!form.get('isUseExistingTemplate')?.value; else existingTmpl\">\r\n <ng-container *ngTemplateOutlet=\"stageAlertTmpl\"></ng-container>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label class=\"asterix--after\">Body</mat-label>\r\n\r\n <textarea\r\n matInput\r\n rows=\"6\"\r\n cols=\"50\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"2\"\r\n cdkAutosizeMaxRows=\"15\"\r\n formControlName=\"text\"\r\n placeholder=\"Enter text\"\r\n #autosize=\"cdkTextareaAutosize\"\r\n ></textarea>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('text').touched && form.get('text').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <app-input\r\n type=\"numeric\"\r\n formControlName=\"ttl\"\r\n label=\"TTL\"\r\n placeholder=\"Enter ttl\"\r\n [trimLeadingZeros]=\"true\"\r\n suffix=\"seconds\"\r\n hint=\"The default TTL is 30 days (2,592,000 seconds) if no value is provided.\"\r\n ></app-input>\r\n </div>\r\n\r\n <div *ngIf=\"!isReadOnlyMode\">\r\n <mat-checkbox formControlName=\"isNeedSave\">\r\n Save this message as future template\r\n </mat-checkbox>\r\n </div>\r\n <div class=\"template-container mt-5\" *ngIf=\"!form.get('isDownloadVariableXLS')?.value\">\r\n <div class=\"add-variable-wrapper\">\r\n <button mat-button class=\"btn-add-variable\" (click)=\"addVariable()\">\r\n <mat-icon class=\"icon-small\">add</mat-icon> Add Variable\r\n </button>\r\n </div>\r\n\r\n <div class=\"body-content-wrapper\">\r\n <h3 class=\"body-content-title\">Body Content</h3>\r\n <p class=\"body-content-subtitle\">\r\n Input the parameter to show during the preview. You can use predefined\r\n variable, drag and drop to text field below\r\n </p>\r\n <div class=\"predefined-variable-wrapper\">\r\n <span class=\"btn-predefined\">\r\n <mat-icon class=\"icon-small\">attach_money</mat-icon>\r\n Unsubscribe Account\r\n </span>\r\n </div>\r\n <div class=\"variables-list\" formArrayName=\"variables\">\r\n <div\r\n class=\"variable-row d-flex align-items-start mb-3\"\r\n *ngFor=\"let variable of variables.controls; let i = index\"\r\n [formGroupName]=\"i\"\r\n >\r\n <div class=\"variable-sequence mr-3\">\r\n {{ '{' + '{' + (i + 1) + '}' + '}' }}\r\n </div>\r\n <div class=\"variable-input-wrapper flex-grow-1\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n class=\"w-100 custom-variable-field\"\r\n >\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"e.g. Name, Verification code\"\r\n />\r\n </mat-form-field>\r\n\r\n <ng-container\r\n *ngFor=\"let validation of validationMessages?.paramName\"\r\n >\r\n <div\r\n class=\"custom-error-text text-right\"\r\n *ngIf=\"\r\n variable.get('paramName')?.hasError(validation.type) &&\r\n (variable.get('paramName')?.touched ||\r\n variable.get('paramName')?.dirty)\r\n \"\r\n >\r\n <span class=\"font-12px m-0\">{{ validation.message }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"btn-delete ml-3\"\r\n (click)=\"removeVariable(i)\"\r\n >\r\n <mat-icon color=\"warn\">delete_outline</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <mat-checkbox\r\n labelPosition=\"before\"\r\n formControlName=\"isDownloadVariableXLS\"\r\n (change)=\"updateVariableDownloadXLS($event.checked)\"\r\n >\r\n Using Download XLSX\r\n </mat-checkbox>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #existingTmpl>\r\n <ng-container *ngTemplateOutlet=\"stageAlertTmpl\"></ng-container>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"template\"\r\n placeholder=\"Select template\"\r\n [complete]=\"isHaveNextTemplateOption === false\"\r\n [compareWith]=\"templateSelectedDisplay\"\r\n (infiniteScroll)=\"getNextTemplateBatch()\"\r\n (selectionChange)=\"updateTemplate($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('template').value?.name\"\r\n (searchRes)=\"updateSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('template')?.touched &&\r\n form.get('template')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <app-input\r\n type=\"numeric\"\r\n formControlName=\"ttl\"\r\n label=\"TTL\"\r\n placeholder=\"Enter ttl\"\r\n [trimLeadingZeros]=\"true\"\r\n suffix=\"Seconds\"\r\n hint=\"The default TTL is 30 days (2,592,000 seconds) if no value is provided.\"\r\n ></app-input>\r\n </div>\r\n <div\r\n class=\"template-container mt-5\"\r\n *ngIf=\"!form.get('isDownloadVariableXLS')?.value\"\r\n formArrayName=\"variables\"\r\n >\r\n <div class=\"font-bold mb-3\">Variables</div>\r\n\r\n <div class=\"form-group mb-3\" [formGroupName]=\"0\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100 custom-variable-field\"\r\n >\r\n <mat-label>{{ '{' + '{' + 1 + '}' + '}' }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"Name\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"form-group mb-3\" [formGroupName]=\"1\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100 custom-variable-field\"\r\n >\r\n <mat-label>{{ '{' + '{' + 2 + '}' + '}' }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"Verification code\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-end\">\r\n <mat-checkbox\r\n labelPosition=\"before\"\r\n formControlName=\"isDownloadVariableXLS\"\r\n (change)=\"updateVariableDownloadXLS($event.checked)\"\r\n >\r\n Using Download XLSX\r\n </mat-checkbox>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n</form>\r\n\r\n<ng-template #stageAlertTmpl>\r\n <div\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 8px; border: 1px solid rgb(243, 124, 44)\"\r\n *ngIf=\"form.get('from')?.value && form.get('from')?.value?.directSendRestrictionStage > 0\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 1\">\r\n Direct Send misuse detected. Please review your messaging practices.\r\n </div>\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 2\">\r\n Direct Send access restricted for 7 days due to continued misuse.\r\n </div>\r\n\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 3\">\r\n Direct Send access restricted for 30 days due to continued misuse. Final warning before\r\n permanent revocation.\r\n </div>\r\n\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 4\">\r\n Direct Send access has been permanently revoked.\r\n </div>\r\n </div>\r\n</ng-template>\r\n",
|
|
4838
|
+
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 <!-- ========================================== -->\r\n <!-- CAROUSEL DYNAMIC VARIABLES -->\r\n <!-- ========================================== -->\r\n <div\r\n class=\"existing-template-variables mt-4\"\r\n *ngIf=\"!form.get('isUpload')?.value && getCarouselControls.length > 0\"\r\n >\r\n <p class=\"font-16px font-PoppinsBold mt-3\">Carousel Configuration</p>\r\n <div formArrayName=\"paramCarousel\">\r\n <div\r\n *ngFor=\"let card of getCarouselControls; let cIndex = index\"\r\n [formGroupName]=\"cIndex\"\r\n class=\"card-container mb-4 p-3\"\r\n style=\"border: 1px solid #e0e0e0; border-radius: 8px\"\r\n >\r\n <div class=\"font-bold font-14px mb-3\">Card {{ cIndex + 1 }}</div>\r\n <div *ngIf=\"getCarouselBodyParams(cIndex).controls.length > 0\" class=\"mb-3\">\r\n <div class=\"font-bold font-12px mb-2\">Body Variables</div>\r\n <div formArrayName=\"bodyParams\">\r\n <div\r\n *ngFor=\"\r\n let bParam of getCarouselBodyParams(cIndex).controls;\r\n let bIndex = index\r\n \"\r\n [formGroupName]=\"bIndex\"\r\n class=\"form-group mb-3\"\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 <mat-label\r\n >Body {{ '{' + '{' + (bIndex + 1) + '}' + '}' }}</mat-label\r\n >\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 </div>\r\n </div>\r\n </div>\r\n <div formArrayName=\"buttonParams\">\r\n <div *ngFor=\"let btn of getCarouselButtons(cIndex); let btnIndex = index\">\r\n <div\r\n *ngIf=\"getCarouselBtnParams(cIndex, btnIndex).controls.length > 0\"\r\n [formGroupName]=\"btnIndex\"\r\n class=\"mt-2\"\r\n >\r\n <div class=\"font-bold font-12px mb-2\">Button: {{ btn.text }}</div>\r\n <div\r\n *ngFor=\"\r\n let pBtn of getCarouselBtnParams(cIndex, btnIndex).controls;\r\n let pBtnIdx = index\r\n \"\r\n [formGroupName]=\"pBtnIdx\"\r\n class=\"form-group mb-3\"\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 <mat-label>Param {{ pBtnIdx + 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 </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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\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\r\n </p>\r\n\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\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",
|
|
4633
4839
|
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}"]
|
|
4634
4840
|
})
|
|
4635
4841
|
], GeneralInformationWAComponent);
|
|
@@ -5146,8 +5352,8 @@ __decorate([
|
|
|
5146
5352
|
GeneralInformationComponent = __decorate([
|
|
5147
5353
|
Component({
|
|
5148
5354
|
selector: 'lib-new-campaign-general-information',
|
|
5149
|
-
template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n <div class=\"campaign-info\">\r\n <div class=\"campaign-info-child\">\r\n <mat-card>\r\n <mat-card-content>\r\n <h3 class=\"font-22px font-PoppinsBold mb-4\">General Information</h3>\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\">Broadcast Name</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"campaignName\"\r\n placeholder=\"Enter Broadcast name\"\r\n />\r\n </mat-form-field>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <mat-hint align=\"start\">\r\n {{ form.get('campaignName').value?.length || 0 }}/100\r\n </mat-hint>\r\n\r\n <div>\r\n <mat-error\r\n align=\"end\"\r\n *ngFor=\"let validation of validationMessages.campaignName\"\r\n >\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('campaignName').touched &&\r\n form.get('campaignName').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Channel</mat-label>\r\n\r\n <mat-select placeholder=\"Select channel\" formControlName=\"medium\">\r\n <mat-option\r\n *ngFor=\"let option of channelOption\"\r\n [value]=\"option.value\"\r\n >\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.medium\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('medium').touched &&\r\n form.get('medium').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 <ng-container *ngIf=\"form.get('medium').value === 'WA'\">\r\n <lib-general-information-wa\r\n [isTouchedForm]=\"isTouchedWAForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-wa>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'LINE'\">\r\n <lib-general-information-line\r\n [isTouchedForm]=\"isTouchedSMSForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-line>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'SMS'\">\r\n <lib-general-information-sms\r\n [isTouchedForm]=\"isTouchedSMSForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-sms>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'EMAIL'\">\r\n <lib-general-information-email\r\n [isTouchedForm]=\"isTouchedEmailForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-email>\r\n </ng-container>\r\n </mat-card-content>\r\n </mat-card>\r\n </div>\r\n\r\n <div class=\"campaign-info-child pl-20px\">\r\n <h3 class=\"font-22px font-PoppinsBold\">Broadcast Content</h3>\r\n\r\n <div\r\n [ngClass]=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n ? 'campaign-border-preview'\r\n : 'campaign-preview'\r\n \"\r\n >\r\n <section\r\n *ngIf=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n \"\r\n >\r\n <p\r\n *ngIf=\"getBody\"\r\n class=\"body my-2\"\r\n style=\"max-width: 500px; word-wrap: break-word\"\r\n [innerHTML]=\"getBody\"\r\n ></p>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'WA'\" class=\"campaign-preview__wa\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <section *ngIf=\"getBody || getMedia || displayFile\">\r\n <div\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplate?.buttons?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"\r\n (getMedia === 'IMAGE' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'image') &&\r\n displayFile\r\n \"\r\n style=\"max-width: 100%\"\r\n alt=\"image\"\r\n [src]=\"displayFile\"\r\n />\r\n\r\n <video\r\n *ngIf=\"\r\n (getMedia === 'VIDEO' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'video') &&\r\n displayFile\r\n \"\r\n id=\"video\"\r\n style=\"width: 100%\"\r\n [src]=\"displayFile\"\r\n controls\r\n ></video>\r\n\r\n <div *ngIf=\"getMedia === 'DOCUMENT'\" style=\"display: flex\">\r\n <img\r\n style=\"width: 13px; height: 18px\"\r\n alt=\"document\"\r\n src=\"../../../../../assets/images/icon-file.png\"\r\n />\r\n\r\n <span style=\"margin-left: 10px\">Document</span>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getMedia === 'LOCATION'\">\r\n <agm-map\r\n style=\"width: 100%; height: 200px\"\r\n [disableDefaultUI]=\"true\"\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [zoom]=\"maps.zoom\"\r\n >\r\n <agm-marker\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [markerDraggable]=\"false\"\r\n ></agm-marker>\r\n </agm-map>\r\n <a\r\n [href]=\"\r\n 'https://www.google.com/maps/search/?api=1&query=' +\r\n maps.latitude +\r\n ',' +\r\n maps.longitude\r\n \"\r\n >\r\n https://www.google.com/maps/search/?api=1&query={{\r\n maps.latitude\r\n }},{{ maps.longitude }}\r\n </a>\r\n </ng-container>\r\n\r\n <p *ngIf=\"getBody\" class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n\r\n <p\r\n *ngIf=\"getTemplate?.footer\"\r\n class=\"mb-2\"\r\n style=\"color: rgb(160, 160, 160)\"\r\n >\r\n {{ getTemplate.footer }}\r\n </p>\r\n </div>\r\n </section>\r\n <section *ngIf=\"getTemplate?.buttons?.length > 0\">\r\n <div\r\n *ngFor=\"let button of getTemplateButton\"\r\n class=\"params-btn pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text || button?.type }}\r\n </p>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"getTemplate?.buttons?.length > 3\"\r\n class=\"params-btn pb-0 pointer\"\r\n (click)=\"isShowMore = !isShowMore\"\r\n >\r\n <p class=\"mb-0\"><mat-icon>list</mat-icon> See all options</p>\r\n </div>\r\n </section>\r\n </div>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'LINE'\" class=\"campaign-preview__line\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <!-- Template Line Text -->\r\n <section *ngIf=\"isText || !isJSON\" class=\"chat\">\r\n <p class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n </section>\r\n\r\n <!-- Template Line Button | Confirmation -->\r\n <section\r\n *ngIf=\"['buttons', 'confirm'].includes(getTemplateLine?.type)\"\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplateLine?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"getTemplateLine?.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"getTemplateLine?.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"getTemplateLine?.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"getTemplateLine?.text\"\r\n ></p>\r\n </section>\r\n\r\n <!-- Template Line Carousel -->\r\n <div\r\n *ngIf=\"['carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <section\r\n class=\"chat w-100\"\r\n [ngClass]=\"{ 'no-bottom-border': column?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"column.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"column.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"column.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"column.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"column.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"column.text\"\r\n ></p>\r\n </section>\r\n <section *ngIf=\"column?.actions?.length > 0\">\r\n <div\r\n *ngFor=\"let button of column?.actions\"\r\n class=\"params-btn mw-100 pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n\r\n <!-- Template Line Image Carousel -->\r\n <div\r\n *ngIf=\"['image_carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <div class=\"image-container\">\r\n <img [src]=\"column.imageUrl\" alt=\"image\" />\r\n\r\n <div class=\"d-flex justify-content-center\">\r\n <p class=\"font-13px overlay-text\">\r\n {{ column.action.label }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Button Line -->\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type !== 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type === 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n class=\"d-flex justify-content-around mw-70 bg-white\"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn flex pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n <!-- ./ Button Line -->\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"d-flex\" style=\"flex-direction: column\">\r\n <span\r\n *ngIf=\"form.get('medium').value === 'SMS'\"\r\n style=\"text-align: right; width: 100%\"\r\n >\r\n {{ twilioResultCounter.fulltext }}\r\n </span>\r\n <span\r\n style=\"text-align: right; width: 100%; color: red\"\r\n *ngIf=\"twilioResultCounter.segments > 10 && form.get('medium').value === 'SMS'\"\r\n >\r\n Maximum Segment is 10\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<ng-template #isSpinner>\r\n <div class=\"text-center my-auto\">\r\n <img src=\"../../../../../assets/images/spinner.svg\" />\r\n </div>\r\n</ng-template>\r\n",
|
|
5150
|
-
styles: [".campaign-info{display:flex}.campaign-info-child{flex:1}.campaign-info .asterix--after:after{content:\"*\";color:red}.campaign-info .pl-20px{padding-left:20px}.campaign-info .mw-70{max-width:70%}.campaign-info .campaign-preview{width:75%}.campaign-info .campaign-preview .header-preview{padding:15px;min-height:60px;border-radius:10px 10px 0 0}.campaign-info .campaign-preview .header-preview .heading{width:100%;color:#e0e0e0;margin-left:5px;font-size:20px}.campaign-info .campaign-preview .body-preview{padding:15px;min-height:470px}.campaign-info .campaign-preview .body-preview .chat{width:70%;padding:11px;font-size:14px;line-height:22px;color:#494949;border-radius:8px;background:#fff;overflow-wrap:break-word;white-space:pre-line;box-shadow:12px 12px 20px rgba(44,59,113,.04)}.campaign-info .campaign-preview .body-preview .chat .body{max-height:400px;overflow-y:auto;overscroll-behavior-y:contain}.campaign-info .campaign-preview .body-preview .chat.no-bottom-border{border-bottom-left-radius:0;border-bottom-right-radius:0}.campaign-info .campaign-preview__wa .header-preview{background:#065f54}.campaign-info .campaign-preview__wa .body-preview{border-bottom-left-radius:8px;border-bottom-right-radius:8px;background-image:url(../../../../assets/svg/whatsapp-bg.svg);background-position:center;background-repeat:no-repeat;background-size:cover}.campaign-info .campaign-preview__wa .body-preview .params-btn{width:auto;max-width:70%;color:#34b7f1;background:#fff;box-shadow:12px 12px 20px rgba(44,59,113,.04);border-radius:0;font-size:16px;line-height:43px;padding:0;text-align:center;font-family:Poppins;overflow-wrap:break-word}.campaign-info .campaign-preview__wa .body-preview .params-btn b{font-family:PoppinsBold}.campaign-info .campaign-preview__line .header-preview{background:#273046}.campaign-info .campaign-preview__line .body-preview{background:#7692bf;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.campaign-info .campaign-preview__line .body-preview .params-btn{width:auto;max-width:70%;color:#34b7f1;background:#fff;box-shadow:12px 12px 20px rgba(44,59,113,.04);border-radius:0;font-size:16px;line-height:43px;padding:0;text-align:center;font-family:Poppins;overflow-wrap:break-word}.campaign-info .campaign-preview__line .body-preview .params-btn b{font-family:PoppinsBold}.campaign-info .campaign-preview__line .body-preview .image-container{position:relative;width:200px;height:200px}.campaign-info .campaign-preview__line .body-preview .image-container img{display:block;width:100%;height:100%}.campaign-info .campaign-preview__line .body-preview .image-container .overlay-text{top:170px;position:absolute;padding:2px 5px;color:#fff;background-color:rgba(49,57,60,.62);border-radius:10px}.campaign-info .campaign-border-preview{width:100%;min-height:100px;padding:32px;border:1px solid #e2e2e2;border-radius:8px}"]
|
|
5355
|
+
template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n <div class=\"campaign-info\">\r\n <div class=\"campaign-info-child\">\r\n <mat-card>\r\n <mat-card-content>\r\n <h3 class=\"font-22px font-PoppinsBold mb-4\">General Information</h3>\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\">Broadcast Name</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"campaignName\"\r\n placeholder=\"Enter Broadcast name\"\r\n />\r\n </mat-form-field>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <mat-hint align=\"start\">\r\n {{ form.get('campaignName').value?.length || 0 }}/100\r\n </mat-hint>\r\n\r\n <div>\r\n <mat-error\r\n align=\"end\"\r\n *ngFor=\"let validation of validationMessages.campaignName\"\r\n >\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('campaignName').touched &&\r\n form.get('campaignName').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Channel</mat-label>\r\n\r\n <mat-select placeholder=\"Select channel\" formControlName=\"medium\">\r\n <mat-option\r\n *ngFor=\"let option of channelOption\"\r\n [value]=\"option.value\"\r\n >\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.medium\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('medium').touched &&\r\n form.get('medium').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 <ng-container *ngIf=\"form.get('medium').value === 'WA'\">\r\n <lib-general-information-wa\r\n [isTouchedForm]=\"isTouchedWAForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-wa>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'LINE'\">\r\n <lib-general-information-line\r\n [isTouchedForm]=\"isTouchedSMSForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-line>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'SMS'\">\r\n <lib-general-information-sms\r\n [isTouchedForm]=\"isTouchedSMSForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-sms>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'EMAIL'\">\r\n <lib-general-information-email\r\n [isTouchedForm]=\"isTouchedEmailForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-email>\r\n </ng-container>\r\n </mat-card-content>\r\n </mat-card>\r\n </div>\r\n\r\n <div class=\"campaign-info-child pl-20px\">\r\n <h3 class=\"font-22px font-PoppinsBold\">Broadcast Content</h3>\r\n\r\n <div\r\n [ngClass]=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n ? 'campaign-border-preview'\r\n : 'campaign-preview'\r\n \"\r\n >\r\n <section\r\n *ngIf=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n \"\r\n >\r\n <p\r\n *ngIf=\"getBody\"\r\n class=\"body my-2\"\r\n style=\"max-width: 500px; word-wrap: break-word\"\r\n [innerHTML]=\"getBody\"\r\n ></p>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'WA'\" class=\"campaign-preview__wa\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <section *ngIf=\"getBody || getMedia || displayFile\">\r\n <div\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplate?.buttons?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"\r\n (getMedia === 'IMAGE' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'image') &&\r\n displayFile\r\n \"\r\n style=\"max-width: 100%\"\r\n alt=\"image\"\r\n [src]=\"displayFile\"\r\n />\r\n\r\n <video\r\n *ngIf=\"\r\n (getMedia === 'VIDEO' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'video') &&\r\n displayFile\r\n \"\r\n id=\"video\"\r\n style=\"width: 100%\"\r\n [src]=\"displayFile\"\r\n controls\r\n ></video>\r\n\r\n <div *ngIf=\"getMedia === 'DOCUMENT'\" style=\"display: flex\">\r\n <img\r\n style=\"width: 13px; height: 18px\"\r\n alt=\"document\"\r\n src=\"../../../../../assets/images/icon-file.png\"\r\n />\r\n\r\n <span style=\"margin-left: 10px\">Document</span>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getMedia === 'LOCATION'\">\r\n <agm-map\r\n style=\"width: 100%; height: 200px\"\r\n [disableDefaultUI]=\"true\"\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [zoom]=\"maps.zoom\"\r\n >\r\n <agm-marker\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [markerDraggable]=\"false\"\r\n ></agm-marker>\r\n </agm-map>\r\n <a\r\n [href]=\"\r\n 'https://www.google.com/maps/search/?api=1&query=' +\r\n maps.latitude +\r\n ',' +\r\n maps.longitude\r\n \"\r\n >\r\n https://www.google.com/maps/search/?api=1&query={{\r\n maps.latitude\r\n }},{{ maps.longitude }}\r\n </a>\r\n </ng-container>\r\n\r\n <p *ngIf=\"getBody\" class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n\r\n <p\r\n *ngIf=\"getTemplate?.footer\"\r\n class=\"mb-2\"\r\n style=\"color: rgb(160, 160, 160)\"\r\n >\r\n {{ getTemplate.footer }}\r\n </p>\r\n </div>\r\n </section>\r\n <section *ngIf=\"getTemplate?.buttons?.length > 0\">\r\n <div\r\n *ngFor=\"let button of getTemplateButton\"\r\n class=\"params-btn pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text || button?.type }}\r\n </p>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"getTemplate?.buttons?.length > 3\"\r\n class=\"params-btn pb-0 pointer\"\r\n (click)=\"isShowMore = !isShowMore\"\r\n >\r\n <p class=\"mb-0\"><mat-icon>list</mat-icon> See all options</p>\r\n </div>\r\n </section>\r\n <!-- ========================================== -->\r\n <!-- WA CAROUSEL PREVIEW -->\r\n <!-- ========================================== -->\r\n <div\r\n *ngIf=\"getTemplate?.carousel?.length > 0\"\r\n class=\"d-flex gap-2 mt-2 pb-2 wa-carousel-scroll\"\r\n style=\"\r\n width: 100%;\r\n padding-right: 16px;\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n \"\r\n >\r\n <div\r\n *ngFor=\"let card of getTemplate?.carousel\"\r\n class=\"chat\"\r\n style=\"\r\n min-width: 220px;\r\n flex-shrink: 0;\r\n padding: 0;\r\n overflow: hidden;\r\n background: #ffffff;\r\n border-radius: 8px;\r\n border: 1px solid #d1d7db;\r\n display: flex;\r\n flex-direction: column;\r\n \"\r\n >\r\n <img\r\n *ngIf=\"card.header?.url || card.headerURL\"\r\n style=\"width: 100%; height: 110px; object-fit: cover\"\r\n [src]=\"card.header?.url || card.headerURL\"\r\n alt=\"Carousel Header Image\"\r\n />\r\n <div style=\"padding: 8px 12px; flex-grow: 1\">\r\n <p\r\n *ngIf=\"card.body?.text\"\r\n class=\"mb-1\"\r\n style=\"\r\n white-space: pre-wrap;\r\n font-size: 13px;\r\n color: #111b21;\r\n \"\r\n >\r\n {{ card.body?.text }}\r\n </p>\r\n </div>\r\n <section\r\n *ngIf=\"card.buttons?.length > 0 || card.button?.length > 0\"\r\n style=\"width: 100%\"\r\n >\r\n <div\r\n *ngFor=\"let btn of card.buttons || card.button\"\r\n class=\"pointer\"\r\n style=\"\r\n border-top: 1px solid #e0e0e0;\r\n width: 100%;\r\n padding: 10px 0;\r\n background: #ffffff;\r\n \"\r\n >\r\n <p\r\n class=\"mb-0 text-center\"\r\n style=\"\r\n color: #00a5f4;\r\n font-size: 14px;\r\n font-weight: 500;\r\n \"\r\n >\r\n {{ btn?.text || btn?.type || 'Button' }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n <!-- ========================================== -->\r\n </div>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'LINE'\" class=\"campaign-preview__line\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <section *ngIf=\"isText || !isJSON\" class=\"chat\">\r\n <p class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n </section>\r\n\r\n <section\r\n *ngIf=\"['buttons', 'confirm'].includes(getTemplateLine?.type)\"\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplateLine?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"getTemplateLine?.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"getTemplateLine?.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"getTemplateLine?.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"getTemplateLine?.text\"\r\n ></p>\r\n </section>\r\n <div\r\n *ngIf=\"['carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <section\r\n class=\"chat w-100\"\r\n [ngClass]=\"{ 'no-bottom-border': column?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"column.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"column.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"column.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"column.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"column.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"column.text\"\r\n ></p>\r\n </section>\r\n <section *ngIf=\"column?.actions?.length > 0\">\r\n <div\r\n *ngFor=\"let button of column?.actions\"\r\n class=\"params-btn mw-100 pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"['image_carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <div class=\"image-container\">\r\n <img [src]=\"column.imageUrl\" alt=\"image\" />\r\n\r\n <div class=\"d-flex justify-content-center\">\r\n <p class=\"font-13px overlay-text\">\r\n {{ column.action.label }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type !== 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type === 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n class=\"d-flex justify-content-around mw-70 bg-white\"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn flex pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"d-flex\" style=\"flex-direction: column\">\r\n <span\r\n *ngIf=\"form.get('medium').value === 'SMS'\"\r\n style=\"text-align: right; width: 100%\"\r\n >\r\n {{ twilioResultCounter.fulltext }}\r\n </span>\r\n <span\r\n style=\"text-align: right; width: 100%; color: red\"\r\n *ngIf=\"twilioResultCounter.segments > 10 && form.get('medium').value === 'SMS'\"\r\n >\r\n Maximum Segment is 10\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<ng-template #isSpinner>\r\n <div class=\"text-center my-auto\">\r\n <img src=\"../../../../../assets/images/spinner.svg\" />\r\n </div>\r\n</ng-template>\r\n",
|
|
5356
|
+
styles: [".campaign-info{display:flex}.campaign-info-child{flex:1}.campaign-info .asterix--after:after{content:\"*\";color:red}.campaign-info .pl-20px{padding-left:20px}.campaign-info .mw-70{max-width:70%}.campaign-info .campaign-preview{width:75%}.campaign-info .campaign-preview .header-preview{padding:15px;min-height:60px;border-radius:10px 10px 0 0}.campaign-info .campaign-preview .header-preview .heading{width:100%;color:#e0e0e0;margin-left:5px;font-size:20px}.campaign-info .campaign-preview .body-preview{padding:15px;min-height:470px}.campaign-info .campaign-preview .body-preview .chat{width:70%;padding:11px;font-size:14px;line-height:22px;color:#494949;border-radius:8px;background:#fff;overflow-wrap:break-word;white-space:pre-line;box-shadow:12px 12px 20px rgba(44,59,113,.04)}.campaign-info .campaign-preview .body-preview .chat .body{max-height:400px;overflow-y:auto;overscroll-behavior-y:contain}.campaign-info .campaign-preview .body-preview .chat.no-bottom-border{border-bottom-left-radius:0;border-bottom-right-radius:0}.campaign-info .campaign-preview__wa .header-preview{background:#065f54}.campaign-info .campaign-preview__wa .body-preview{border-bottom-left-radius:8px;border-bottom-right-radius:8px;background-image:url(../../../../assets/svg/whatsapp-bg.svg);background-position:center;background-repeat:no-repeat;background-size:cover}.campaign-info .campaign-preview__wa .body-preview .params-btn{width:auto;max-width:70%;color:#34b7f1;background:#fff;box-shadow:12px 12px 20px rgba(44,59,113,.04);border-radius:0;font-size:16px;line-height:43px;padding:0;text-align:center;font-family:Poppins;overflow-wrap:break-word}.campaign-info .campaign-preview__wa .body-preview .params-btn b{font-family:PoppinsBold}.campaign-info .campaign-preview__line .header-preview{background:#273046}.campaign-info .campaign-preview__line .body-preview{background:#7692bf;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.campaign-info .campaign-preview__line .body-preview .params-btn{width:auto;max-width:70%;color:#34b7f1;background:#fff;box-shadow:12px 12px 20px rgba(44,59,113,.04);border-radius:0;font-size:16px;line-height:43px;padding:0;text-align:center;font-family:Poppins;overflow-wrap:break-word}.campaign-info .campaign-preview__line .body-preview .params-btn b{font-family:PoppinsBold}.campaign-info .campaign-preview__line .body-preview .image-container{position:relative;width:200px;height:200px}.campaign-info .campaign-preview__line .body-preview .image-container img{display:block;width:100%;height:100%}.campaign-info .campaign-preview__line .body-preview .image-container .overlay-text{top:170px;position:absolute;padding:2px 5px;color:#fff;background-color:rgba(49,57,60,.62);border-radius:10px}.campaign-info .campaign-border-preview{width:100%;min-height:100px;padding:32px;border:1px solid #e2e2e2;border-radius:8px}.wa-carousel-scroll::-webkit-scrollbar{height:4px}.wa-carousel-scroll::-webkit-scrollbar-track{background:0 0}.wa-carousel-scroll::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}.wa-carousel-scroll::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.3)}"]
|
|
5151
5357
|
})
|
|
5152
5358
|
], GeneralInformationComponent);
|
|
5153
5359
|
|
|
@@ -5358,26 +5564,32 @@ let NewNumberBasesComponent = class NewNumberBasesComponent {
|
|
|
5358
5564
|
return found ? true : false;
|
|
5359
5565
|
}
|
|
5360
5566
|
onDownloadSampleService() {
|
|
5361
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
5567
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
|
5362
5568
|
const genInfoForm = (_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.form;
|
|
5363
5569
|
const isNeedSave = (_c = genInfoForm) === null || _c === void 0 ? void 0 : _c.isNeedSave;
|
|
5570
|
+
// 1. Parameter Wajib (Selalu dikirim di semua skenario)
|
|
5364
5571
|
const parameterList = [
|
|
5365
5572
|
this.initParam('platform', ((_e = (_d = genInfoForm) === null || _d === void 0 ? void 0 : _d.template) === null || _e === void 0 ? void 0 : _e.platform) || 'WA', 'string'),
|
|
5366
|
-
this.initParam('
|
|
5367
|
-
|
|
5368
|
-
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'),
|
|
5573
|
+
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
|
|
5574
|
+
'string'),
|
|
5369
5575
|
];
|
|
5370
|
-
|
|
5371
|
-
|
|
5372
|
-
|
|
5373
|
-
|
|
5374
|
-
|
|
5375
|
-
|
|
5376
|
-
|
|
5377
|
-
|
|
5378
|
-
parameterList.push(this.initParam('
|
|
5576
|
+
if (isNeedSave) {
|
|
5577
|
+
// SKENARIO 1: USE EXISTING / TEMPLATE SUDAH DISAVE
|
|
5578
|
+
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'));
|
|
5579
|
+
}
|
|
5580
|
+
else {
|
|
5581
|
+
// SKENARIO 2: CREATE NEW / DIRECT SEND (Belum di-save)
|
|
5582
|
+
// Cek aman: Kirim templateName & Lang HANYA kalau ada (biar nggak undefined)
|
|
5583
|
+
if ((_o = (_m = genInfoForm) === null || _m === void 0 ? void 0 : _m.template) === null || _o === void 0 ? void 0 : _o.name) {
|
|
5584
|
+
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'));
|
|
5585
|
+
}
|
|
5586
|
+
if ((_s = (_r = genInfoForm) === null || _r === void 0 ? void 0 : _r.template) === null || _s === void 0 ? void 0 : _s.lang) {
|
|
5587
|
+
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'));
|
|
5379
5588
|
}
|
|
5380
|
-
|
|
5589
|
+
// Variabel khusus Direct Send
|
|
5590
|
+
const safeBodyText = encodeURIComponent(((_v = genInfoForm) === null || _v === void 0 ? void 0 : _v.text) || '');
|
|
5591
|
+
parameterList.push(this.initParam('bodyText', safeBodyText, 'string'));
|
|
5592
|
+
if ((_y = (_x = (_w = genInfoForm) === null || _w === void 0 ? void 0 : _w.template) === null || _x === void 0 ? void 0 : _x.header) === null || _y === void 0 ? void 0 : _y.text) {
|
|
5381
5593
|
const safeHeaderText = encodeURIComponent(genInfoForm.template.header.text);
|
|
5382
5594
|
parameterList.push(this.initParam('headerText', safeHeaderText, 'string'));
|
|
5383
5595
|
}
|