@adlfe/campaign-management-library 2.14.4 → 2.15.1

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.
Files changed (23) hide show
  1. package/bundles/adlfe-campaign-management-library.umd.js +253 -82
  2. package/bundles/adlfe-campaign-management-library.umd.js.map +1 -1
  3. package/bundles/adlfe-campaign-management-library.umd.min.js +2 -2
  4. package/bundles/adlfe-campaign-management-library.umd.min.js.map +1 -1
  5. package/esm2015/lib/campaign-management/models/general-information-wa-req.model.js +24 -13
  6. package/esm2015/lib/campaign-management/modules/campaign-index/dialog/pending-approval-dialog-view/pending-approval-dialog-view.component.js +44 -26
  7. package/esm2015/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.js +139 -8
  8. package/esm2015/lib/campaign-management/modules/new-campaign/general-information/general-information.component.js +3 -3
  9. package/esm2015/lib/campaign-management/modules/new-campaign/new-campaign.component.js +42 -29
  10. package/esm2015/lib/campaign-management/modules/new-campaign/new-number-bases/new-number-bases.component.js +3 -9
  11. package/esm5/lib/campaign-management/models/general-information-wa-req.model.js +24 -13
  12. package/esm5/lib/campaign-management/modules/campaign-index/dialog/pending-approval-dialog-view/pending-approval-dialog-view.component.js +44 -26
  13. package/esm5/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.js +143 -8
  14. package/esm5/lib/campaign-management/modules/new-campaign/general-information/general-information.component.js +3 -3
  15. package/esm5/lib/campaign-management/modules/new-campaign/new-campaign.component.js +42 -29
  16. package/esm5/lib/campaign-management/modules/new-campaign/new-number-bases/new-number-bases.component.js +3 -9
  17. package/fesm2015/adlfe-campaign-management-library.js +249 -82
  18. package/fesm2015/adlfe-campaign-management-library.js.map +1 -1
  19. package/fesm5/adlfe-campaign-management-library.js +253 -82
  20. package/fesm5/adlfe-campaign-management-library.js.map +1 -1
  21. package/lib/campaign-management/models/general-information-wa-req.model.d.ts +1 -0
  22. package/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.d.ts +5 -0
  23. package/package.json +1 -1
package/fesm2015/adlfe-campaign-management-library.js CHANGED
@@ -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, _76;
1755
1755
  if (!resp)
1756
1756
  return;
1757
1757
  const generalInformation = {
@@ -1779,45 +1779,63 @@ 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
- otpValue: (_28 = [...(_27 = (_26 = (_25 = (_24 = resp.data) === null || _24 === void 0 ? void 0 : _24.details) === null || _25 === void 0 ? void 0 : _25.template) === null || _26 === void 0 ? void 0 : _26.data, (_27 !== null && _27 !== void 0 ? _27 : []))]) === null || _28 === void 0 ? void 0 : _28.pop(),
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: (_31 = (_30 = (_29 = resp.data) === null || _29 === void 0 ? void 0 : _29.details) === null || _30 === void 0 ? void 0 : _30.template) === null || _31 === void 0 ? void 0 : _31.id,
1785
- name: (_34 = (_33 = (_32 = resp.data) === null || _32 === void 0 ? void 0 : _32.details) === null || _33 === void 0 ? void 0 : _33.template) === null || _34 === void 0 ? void 0 : _34.name,
1786
- lang: (_37 = (_36 = (_35 = resp.data) === null || _35 === void 0 ? void 0 : _35.details) === null || _36 === void 0 ? void 0 : _36.template) === null || _37 === void 0 ? void 0 : _37.lang,
1787
- platform: (_38 = resp.data) === null || _38 === void 0 ? void 0 : _38.platform,
1788
- headerURL: (_41 = (_40 = (_39 = resp.data) === null || _39 === void 0 ? void 0 : _39.details) === null || _40 === void 0 ? void 0 : _40.template) === null || _41 === void 0 ? void 0 : _41.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: (_44 = (_43 = (_42 = resp.data) === null || _42 === void 0 ? void 0 : _42.details) === null || _43 === void 0 ? void 0 : _43.template) === null || _44 === void 0 ? void 0 : _44.header,
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: (_47 = (_46 = (_45 = resp.data) === null || _45 === void 0 ? void 0 : _45.details) === null || _46 === void 0 ? void 0 : _46.template) === null || _47 === void 0 ? void 0 : _47.data,
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: (_50 = (_49 = (_48 = resp.data) === null || _48 === void 0 ? void 0 : _48.details) === null || _49 === void 0 ? void 0 : _49.template) === null || _50 === void 0 ? void 0 : _50.button,
1796
- ClientId: (_51 = resp.data) === null || _51 === void 0 ? void 0 : _51.clientId,
1797
- ClientName: (_52 = resp.data) === null || _52 === void 0 ? void 0 : _52.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: ((_53 = resp.data) === null || _53 === void 0 ? void 0 : _53.fileId) !== '',
1800
- fileId: (_54 = resp.data) === null || _54 === void 0 ? void 0 : _54.fileId,
1816
+ isDownloadVariableXLS: ((_61 = resp.data) === null || _61 === void 0 ? void 0 : _61.fileId) !== '',
1817
+ isUpload: ((_62 = resp.data) === null || _62 === void 0 ? void 0 : _62.fileId) !== '',
1818
+ fileId: (_63 = resp.data) === null || _63 === void 0 ? void 0 : _63.fileId,
1801
1819
  };
1802
1820
  localStorage.setItem('telin.campaign', JSON.stringify(Object.assign(Object.assign({}, this.getCampaignStorage), {
1803
1821
  generalInformation: {
1804
- id: (_55 = resp.data) === null || _55 === void 0 ? void 0 : _55.id,
1822
+ id: (_64 = resp.data) === null || _64 === void 0 ? void 0 : _64.id,
1805
1823
  form: generalInformation,
1806
1824
  },
1807
- failover: (_56 = resp.data) === null || _56 === void 0 ? void 0 : _56.failover,
1808
- targetAudience: (_57 = resp.data) === null || _57 === void 0 ? void 0 : _57.targets,
1825
+ failover: (_65 = resp.data) === null || _65 === void 0 ? void 0 : _65.failover,
1826
+ targetAudience: (_66 = resp.data) === null || _66 === void 0 ? void 0 : _66.targets,
1809
1827
  targetAudienceFile: {
1810
- name: (_58 = resp.data) === null || _58 === void 0 ? void 0 : _58.fileName,
1811
- targetURL: (_59 = resp.data) === null || _59 === void 0 ? void 0 : _59.targetURL,
1828
+ name: (_67 = resp.data) === null || _67 === void 0 ? void 0 : _67.fileName,
1829
+ targetURL: (_68 = resp.data) === null || _68 === void 0 ? void 0 : _68.targetURL,
1812
1830
  },
1813
1831
  scheduler: {
1814
- schedulerType: ((_60 = resp.data) === null || _60 === void 0 ? void 0 : _60.scheduleType) === 'MULTI'
1832
+ schedulerType: ((_69 = resp.data) === null || _69 === void 0 ? void 0 : _69.scheduleType) === 'MULTI'
1815
1833
  ? 'ONE_TIME'
1816
- : (_61 = resp.data) === null || _61 === void 0 ? void 0 : _61.scheduleType,
1817
- startDate: (_63 = (_62 = resp.data) === null || _62 === void 0 ? void 0 : _62.startTime) === null || _63 === void 0 ? void 0 : _63.split(' ')[0],
1818
- startTime: (_65 = (_64 = resp.data) === null || _64 === void 0 ? void 0 : _64.startTime) === null || _65 === void 0 ? void 0 : _65.split(' ')[1],
1819
- isRepeat: ((_66 = resp.data) === null || _66 === void 0 ? void 0 : _66.scheduleType) === 'MULTI',
1820
- delivery: (_67 = resp.data) === null || _67 === void 0 ? void 0 : _67.repeat,
1834
+ : (_70 = resp.data) === null || _70 === void 0 ? void 0 : _70.scheduleType,
1835
+ startDate: (_72 = (_71 = resp.data) === null || _71 === void 0 ? void 0 : _71.startTime) === null || _72 === void 0 ? void 0 : _72.split(' ')[0],
1836
+ startTime: (_74 = (_73 = resp.data) === null || _73 === void 0 ? void 0 : _73.startTime) === null || _74 === void 0 ? void 0 : _74.split(' ')[1],
1837
+ isRepeat: ((_75 = resp.data) === null || _75 === void 0 ? void 0 : _75.scheduleType) === 'MULTI',
1838
+ delivery: (_76 = resp.data) === null || _76 === void 0 ? void 0 : _76.repeat,
1821
1839
  },
1822
1840
  })));
1823
1841
  this.isLoading = false;
@@ -2438,24 +2456,35 @@ class GeneralInformationWAReqModel {
2438
2456
  }
2439
2457
  return result;
2440
2458
  }, []), (_g !== null && _g !== void 0 ? _g : []));
2441
- this.template = {
2442
- id: source.template.ID,
2443
- name: source.template.name,
2444
- lang: source.template.lang,
2445
- headerUrl: source.targetURL,
2446
- header: (_j = (_h = source.paramHeader) === null || _h === void 0 ? void 0 : _h.map((t) => t.name), (_j !== null && _j !== void 0 ? _j : [])),
2447
- data: ((_k = source.variables) === null || _k === void 0 ? void 0 : _k.length) ? source.variables.map((v) => v.paramName)
2448
- : (_m = (_l = source.paramBody) === null || _l === void 0 ? void 0 : _l.map((t) => t.name), (_m !== null && _m !== void 0 ? _m : [])),
2449
- button: finalButtons,
2450
- buttonParams: source.buttonParams
2459
+ // CAROUSEL
2460
+ let carouselPayload = undefined;
2461
+ if (source.paramCarousel && source.paramCarousel.length > 0) {
2462
+ carouselPayload = source.paramCarousel.map((card) => {
2463
+ // Map Body Card
2464
+ const mappedBody = (card.bodyParams || []).map((b) => b.paramName);
2465
+ // Map Button Card -> Array of Arrays: [ ["sku-a"], ["info-a"] ]
2466
+ const mappedButtons = (card.buttonParams || []).map((btnGroup) => {
2467
+ return (btnGroup || []).map((btn) => btn.paramName);
2468
+ });
2469
+ return {
2470
+ headerURL: card.headerURL || '',
2471
+ body: mappedBody,
2472
+ button: mappedButtons,
2473
+ };
2474
+ });
2475
+ }
2476
+ 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)
2477
+ ? source.variables.map((v) => v.paramName)
2478
+ : (_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
2479
  ? source.buttonParams.map((btn) => {
2452
2480
  return {
2453
2481
  label: btn.label,
2454
2482
  payload: btn.payload ? btn.payload : btn.label,
2455
2483
  };
2456
2484
  })
2457
- : [],
2458
- };
2485
+ : [] }, (carouselPayload && carouselPayload.length > 0
2486
+ ? { carousel: carouselPayload }
2487
+ : {}));
2459
2488
  if (source.template.category === 'AUTHENTICATION')
2460
2489
  this.template = {
2461
2490
  name: source.template.name,
@@ -2614,7 +2643,7 @@ let NewCampaignComponent = class NewCampaignComponent {
2614
2643
  const subs = this.apiAdapterService
2615
2644
  .executeApiRequest([], `/campaign/${this.campaignID}`, 'GET')
2616
2645
  .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, _69, _70, _71, _72;
2646
+ 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
2647
  if (!resp)
2619
2648
  return;
2620
2649
  const generalInformation = {
@@ -2642,52 +2671,65 @@ let NewCampaignComponent = class NewCampaignComponent {
2642
2671
  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
2672
  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
2673
  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
- otpValue: (_28 = [...(_27 = (_26 = (_25 = (_24 = resp.data) === null || _24 === void 0 ? void 0 : _24.details) === null || _25 === void 0 ? void 0 : _25.template) === null || _26 === void 0 ? void 0 : _26.data, (_27 !== null && _27 !== void 0 ? _27 : []))]) === null || _28 === void 0 ? void 0 : _28.pop(),
2646
- variables: (((_31 = (_30 = (_29 = resp.data) === null || _29 === void 0 ? void 0 : _29.details) === null || _30 === void 0 ? void 0 : _30.template) === null || _31 === void 0 ? void 0 : _31.data) || []).map((val) => ({
2674
+ 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) => {
2675
+ return {
2676
+ headerURL: card.headerURL || '',
2677
+ bodyParams: (card.body || []).map((val) => ({
2678
+ paramName: val,
2679
+ })),
2680
+ buttonParams: (card.button || []).map((btnGroup) => {
2681
+ return (btnGroup || []).map((val) => ({
2682
+ paramName: val,
2683
+ }));
2684
+ }),
2685
+ };
2686
+ })) || [],
2687
+ 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(),
2688
+ 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) => ({
2647
2689
  paramName: val,
2648
2690
  })),
2649
- isUseExistingTemplate: !!((_32 = resp.data) === null || _32 === void 0 ? void 0 : _32.templateName),
2691
+ isUseExistingTemplate: !!((_36 = resp.data) === null || _36 === void 0 ? void 0 : _36.templateName),
2650
2692
  template: {
2651
- ID: (_35 = (_34 = (_33 = resp.data) === null || _33 === void 0 ? void 0 : _33.details) === null || _34 === void 0 ? void 0 : _34.template) === null || _35 === void 0 ? void 0 : _35.id,
2652
- name: (_38 = (_37 = (_36 = resp.data) === null || _36 === void 0 ? void 0 : _36.details) === null || _37 === void 0 ? void 0 : _37.template) === null || _38 === void 0 ? void 0 : _38.name,
2653
- lang: (_41 = (_40 = (_39 = resp.data) === null || _39 === void 0 ? void 0 : _39.details) === null || _40 === void 0 ? void 0 : _40.template) === null || _41 === void 0 ? void 0 : _41.lang,
2654
- platform: (_42 = resp.data) === null || _42 === void 0 ? void 0 : _42.platform,
2655
- headerURL: (_45 = (_44 = (_43 = resp.data) === null || _43 === void 0 ? void 0 : _43.details) === null || _44 === void 0 ? void 0 : _44.template) === null || _45 === void 0 ? void 0 : _45.headerURL,
2693
+ 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,
2694
+ 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,
2695
+ 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,
2696
+ platform: (_46 = resp.data) === null || _46 === void 0 ? void 0 : _46.platform,
2697
+ 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,
2656
2698
  header: {
2657
- examples: (_48 = (_47 = (_46 = resp.data) === null || _46 === void 0 ? void 0 : _46.details) === null || _47 === void 0 ? void 0 : _47.template) === null || _48 === void 0 ? void 0 : _48.header,
2699
+ 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,
2658
2700
  },
2659
2701
  body: {
2660
- examples: (_51 = (_50 = (_49 = resp.data) === null || _49 === void 0 ? void 0 : _49.details) === null || _50 === void 0 ? void 0 : _50.template) === null || _51 === void 0 ? void 0 : _51.data,
2702
+ 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,
2661
2703
  },
2662
- buttons: (_54 = (_53 = (_52 = resp.data) === null || _52 === void 0 ? void 0 : _52.details) === null || _53 === void 0 ? void 0 : _53.template) === null || _54 === void 0 ? void 0 : _54.button,
2663
- ClientId: (_55 = resp.data) === null || _55 === void 0 ? void 0 : _55.clientId,
2664
- ClientName: (_56 = resp.data) === null || _56 === void 0 ? void 0 : _56.clientName,
2704
+ 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,
2705
+ ClientId: (_59 = resp.data) === null || _59 === void 0 ? void 0 : _59.clientId,
2706
+ ClientName: (_60 = resp.data) === null || _60 === void 0 ? void 0 : _60.clientName,
2665
2707
  },
2666
- isUpload: ((_57 = resp.data) === null || _57 === void 0 ? void 0 : _57.fileId) !== '',
2667
- fileId: (_58 = resp.data) === null || _58 === void 0 ? void 0 : _58.fileId,
2708
+ isUpload: ((_61 = resp.data) === null || _61 === void 0 ? void 0 : _61.fileId) !== '',
2709
+ fileId: (_62 = resp.data) === null || _62 === void 0 ? void 0 : _62.fileId,
2668
2710
  };
2669
2711
  localStorage.setItem('telin.campaign', JSON.stringify(Object.assign(Object.assign({}, this.getCampaignStorage), {
2670
2712
  generalInformation: {
2671
- id: (_59 = resp.data) === null || _59 === void 0 ? void 0 : _59.id,
2713
+ id: (_63 = resp.data) === null || _63 === void 0 ? void 0 : _63.id,
2672
2714
  form: generalInformation,
2673
2715
  },
2674
- failover: (_60 = resp.data) === null || _60 === void 0 ? void 0 : _60.failover,
2675
- targetAudience: (_61 = resp.data) === null || _61 === void 0 ? void 0 : _61.targets,
2716
+ failover: (_64 = resp.data) === null || _64 === void 0 ? void 0 : _64.failover,
2717
+ targetAudience: (_65 = resp.data) === null || _65 === void 0 ? void 0 : _65.targets,
2676
2718
  targetAudienceFile: {
2677
- name: (_62 = resp.data) === null || _62 === void 0 ? void 0 : _62.fileName,
2678
- targetURL: (_63 = resp.data) === null || _63 === void 0 ? void 0 : _63.targetURL,
2719
+ name: (_66 = resp.data) === null || _66 === void 0 ? void 0 : _66.fileName,
2720
+ targetURL: (_67 = resp.data) === null || _67 === void 0 ? void 0 : _67.targetURL,
2679
2721
  },
2680
2722
  scheduler: {
2681
- schedulerType: ((_64 = resp.data) === null || _64 === void 0 ? void 0 : _64.scheduleType) === 'MULTI'
2723
+ schedulerType: ((_68 = resp.data) === null || _68 === void 0 ? void 0 : _68.scheduleType) === 'MULTI'
2682
2724
  ? 'ONE_TIME'
2683
- : (_65 = resp.data) === null || _65 === void 0 ? void 0 : _65.scheduleType,
2684
- startDate: (_67 = (_66 = resp.data) === null || _66 === void 0 ? void 0 : _66.startTime) === null || _67 === void 0 ? void 0 : _67.split(' ')[0],
2685
- startTime: (_69 = (_68 = resp.data) === null || _68 === void 0 ? void 0 : _68.startTime) === null || _69 === void 0 ? void 0 : _69.split(' ')[1],
2686
- isRepeat: ((_70 = resp.data) === null || _70 === void 0 ? void 0 : _70.scheduleType) === 'MULTI',
2687
- delivery: (_71 = resp.data) === null || _71 === void 0 ? void 0 : _71.repeat,
2725
+ : (_69 = resp.data) === null || _69 === void 0 ? void 0 : _69.scheduleType,
2726
+ startDate: (_71 = (_70 = resp.data) === null || _70 === void 0 ? void 0 : _70.startTime) === null || _71 === void 0 ? void 0 : _71.split(' ')[0],
2727
+ startTime: (_73 = (_72 = resp.data) === null || _72 === void 0 ? void 0 : _72.startTime) === null || _73 === void 0 ? void 0 : _73.split(' ')[1],
2728
+ isRepeat: ((_74 = resp.data) === null || _74 === void 0 ? void 0 : _74.scheduleType) === 'MULTI',
2729
+ delivery: (_75 = resp.data) === null || _75 === void 0 ? void 0 : _75.repeat,
2688
2730
  },
2689
2731
  })));
2690
- this.isLine = ((_72 = resp.data) === null || _72 === void 0 ? void 0 : _72.platform) === 'LINE';
2732
+ this.isLine = ((_76 = resp.data) === null || _76 === void 0 ? void 0 : _76.platform) === 'LINE';
2691
2733
  this.isLoading = false;
2692
2734
  this.initWizard();
2693
2735
  }, () => {
@@ -3935,6 +3977,7 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
3935
3977
  return campaignData ? JSON.parse(campaignData) : {};
3936
3978
  }
3937
3979
  initForm() {
3980
+ var _a;
3938
3981
  this.form = new FormGroup({
3939
3982
  channel: new FormControl(null, Validators$1.required),
3940
3983
  media: new FormControl(null),
@@ -3964,12 +4007,16 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
3964
4007
  variables: new FormArray([]),
3965
4008
  useXlsx: new FormControl(false),
3966
4009
  buttonParams: new FormArray([]),
4010
+ paramCarousel: new FormArray([]),
3967
4011
  });
3968
4012
  this.form.valueChanges.subscribe(() => {
3969
4013
  setTimeout(() => {
3970
4014
  this.updateGeneralInformationForm.emit(this.form);
3971
4015
  });
3972
4016
  });
4017
+ (_a = this.form.get('isUpload')) === null || _a === void 0 ? void 0 : _a.valueChanges.subscribe((val) => {
4018
+ this.toggleExcelValidation(val);
4019
+ });
3973
4020
  }
3974
4021
  initDisable() {
3975
4022
  if (!this.isReadOnlyMode) {
@@ -4007,7 +4054,10 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
4007
4054
  this.variables.clear();
4008
4055
  savedVariables.forEach((item) => {
4009
4056
  this.variables.push(new FormGroup({
4010
- paramName: new FormControl({ value: item.paramName || '', disabled: this.isReadOnlyMode }, Validators$1.required),
4057
+ paramName: new FormControl({
4058
+ value: item.paramName || '',
4059
+ disabled: this.isReadOnlyMode,
4060
+ }),
4011
4061
  }));
4012
4062
  });
4013
4063
  }
@@ -4255,6 +4305,21 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
4255
4305
  return (((_a = this.getControl('channel')) === null || _a === void 0 ? void 0 : _a.value) &&
4256
4306
  ((_c = (_b = this.getControl('channel')) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === 'utility');
4257
4307
  }
4308
+ get getCarouselControls() {
4309
+ return this.form.get('paramCarousel').controls;
4310
+ }
4311
+ getCarouselButtons(cardIndex) {
4312
+ var _a, _b, _c, _d;
4313
+ const templateValue = (_a = this.form.get('template')) === null || _a === void 0 ? void 0 : _a.value;
4314
+ 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) || [];
4315
+ }
4316
+ getCarouselBodyParams(cardIndex) {
4317
+ return this.getCarouselControls[cardIndex].get('bodyParams');
4318
+ }
4319
+ getCarouselBtnParams(cardIndex, btnIndex) {
4320
+ const btnParamsArray = this.getCarouselControls[cardIndex].get('buttonParams');
4321
+ return btnParamsArray.at(btnIndex);
4322
+ }
4258
4323
  getNextAccountBatch() {
4259
4324
  if (!this.isHaveNextAccountOption)
4260
4325
  return;
@@ -4334,7 +4399,7 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
4334
4399
  return ((_a = this.getControl('isUpload')) === null || _a === void 0 ? void 0 : _a.value) || false;
4335
4400
  }
4336
4401
  updateTemplate(template) {
4337
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40;
4402
+ 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;
4338
4403
  this.isShowParameter = false;
4339
4404
  if (!template)
4340
4405
  return;
@@ -4427,7 +4492,7 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
4427
4492
  paramName: new FormControl({
4428
4493
  value: finalValue,
4429
4494
  disabled: this.isReadOnlyMode,
4430
- }, Validators$1.required),
4495
+ }),
4431
4496
  }));
4432
4497
  });
4433
4498
  }
@@ -4436,7 +4501,60 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
4436
4501
  (_39 = this.getControl('text')) === null || _39 === void 0 ? void 0 : _39.updateValueAndValidity();
4437
4502
  }
4438
4503
  // ==========================================================
4439
- (_40 = template.buttons) === null || _40 === void 0 ? void 0 : _40.forEach((each, index) => {
4504
+ // ==========================================================
4505
+ // TAMBAHAN: Generate Form Carousel Dinamis
4506
+ // ==========================================================
4507
+ const carouselArray = this.form.get('paramCarousel');
4508
+ carouselArray.clear();
4509
+ const isUsingUpload = (_40 = this.getControl('isUpload')) === null || _40 === void 0 ? void 0 : _40.value;
4510
+ const dynamicValidator = isUsingUpload ? null : Validators$1.required;
4511
+ if (template.carousel && template.carousel.length > 0) {
4512
+ const isSavedTemplateMatches = ((_42 = (_41 = formStorage) === null || _41 === void 0 ? void 0 : _41.template) === null || _42 === void 0 ? void 0 : _42.name) === template.name;
4513
+ // BUKAN formStorage?.template?.carousel, TAPI formStorage?.paramCarousel (tempat lu ngetik)
4514
+ const savedUserInputs = isSavedTemplateMatches ? (_43 = formStorage) === null || _43 === void 0 ? void 0 : _43.paramCarousel : null;
4515
+ template.carousel.forEach((card, cardIdx) => {
4516
+ var _a, _b, _c, _d, _e;
4517
+ const cardGroup = new FormGroup({
4518
+ headerURL: new FormControl((_b = (_a = card.header) === null || _a === void 0 ? void 0 : _a.url, (_b !== null && _b !== void 0 ? _b : ''))),
4519
+ bodyParams: new FormArray([]),
4520
+ buttonParams: new FormArray([]),
4521
+ });
4522
+ // 1. Setup Body Params
4523
+ if (((_d = (_c = card.body) === null || _c === void 0 ? void 0 : _c.examples) === null || _d === void 0 ? void 0 : _d.length) > 0) {
4524
+ card.body.examples.forEach((_, bodyIdx) => {
4525
+ var _a, _b, _c, _d, _e;
4526
+ // AMBIL VALUE DARI INPUTAN SEBELUMNYA
4527
+ 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 : ''));
4528
+ cardGroup.get('bodyParams').push(new FormGroup({
4529
+ paramName: new FormControl({ value: savedBodyVal, disabled: this.isReadOnlyMode }, dynamicValidator),
4530
+ }));
4531
+ });
4532
+ }
4533
+ // 2. Setup Button Params
4534
+ if (((_e = card.buttons) === null || _e === void 0 ? void 0 : _e.length) > 0) {
4535
+ card.buttons.forEach((btn, btnIdx) => {
4536
+ var _a;
4537
+ const btnParamArray = new FormArray([]);
4538
+ if (((_a = btn.examples) === null || _a === void 0 ? void 0 : _a.length) > 0) {
4539
+ btn.examples.forEach((_, paramIdx) => {
4540
+ var _a, _b, _c, _d, _e, _f;
4541
+ // AMBIL VALUE DARI INPUTAN SEBELUMNYA
4542
+ 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 : ''));
4543
+ btnParamArray.push(new FormGroup({
4544
+ paramName: new FormControl({
4545
+ value: savedBtnVal,
4546
+ disabled: this.isReadOnlyMode,
4547
+ }, dynamicValidator),
4548
+ }));
4549
+ });
4550
+ }
4551
+ cardGroup.get('buttonParams').push(btnParamArray);
4552
+ });
4553
+ }
4554
+ carouselArray.push(cardGroup);
4555
+ });
4556
+ }
4557
+ (_44 = template.buttons) === null || _44 === void 0 ? void 0 : _44.forEach((each, index) => {
4440
4558
  var _a, _b, _c, _d;
4441
4559
  this.addParamButton();
4442
4560
  const button = this.getButton;
@@ -4468,6 +4586,7 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
4468
4586
  (_b = ctrl.get('name')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity();
4469
4587
  });
4470
4588
  paramBodyArray.updateValueAndValidity();
4589
+ this.toggleExcelValidation((_45 = this.form.get('isUpload')) === null || _45 === void 0 ? void 0 : _45.value);
4471
4590
  }
4472
4591
  updateMediaType(_mediaType) {
4473
4592
  if (_mediaType === EnumData.MEDIA_TYPE_LOCATION)
@@ -4552,6 +4671,31 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
4552
4671
  (_h = this.getControl('otpValue')) === null || _h === void 0 ? void 0 : _h.reset();
4553
4672
  (_j = this.getControl('otpValue')) === null || _j === void 0 ? void 0 : _j.clearValidators();
4554
4673
  (_k = this.getControl('otpValue')) === null || _k === void 0 ? void 0 : _k.updateValueAndValidity();
4674
+ this.variables.controls.forEach((ctrl) => {
4675
+ var _a, _b;
4676
+ (_a = ctrl.get('paramName')) === null || _a === void 0 ? void 0 : _a.clearValidators();
4677
+ (_b = ctrl.get('paramName')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity();
4678
+ });
4679
+ const carouselArray = this.form.get('paramCarousel');
4680
+ if (carouselArray) {
4681
+ carouselArray.controls.forEach((card) => {
4682
+ var _a, _b;
4683
+ const bodyParams = card.get('bodyParams');
4684
+ (_a = bodyParams) === null || _a === void 0 ? void 0 : _a.controls.forEach((bCtrl) => {
4685
+ var _a, _b;
4686
+ (_a = bCtrl.get('paramName')) === null || _a === void 0 ? void 0 : _a.clearValidators();
4687
+ (_b = bCtrl.get('paramName')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity();
4688
+ });
4689
+ const btnParams = card.get('buttonParams');
4690
+ (_b = btnParams) === null || _b === void 0 ? void 0 : _b.controls.forEach((btnGroup) => {
4691
+ btnGroup.controls.forEach((pBtnCtrl) => {
4692
+ var _a, _b;
4693
+ (_a = pBtnCtrl.get('paramName')) === null || _a === void 0 ? void 0 : _a.clearValidators();
4694
+ (_b = pBtnCtrl.get('paramName')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity();
4695
+ });
4696
+ });
4697
+ });
4698
+ }
4555
4699
  return;
4556
4700
  }
4557
4701
  this.updateTemplate((_l = this.getControl('template')) === null || _l === void 0 ? void 0 : _l.value);
@@ -4623,9 +4767,10 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
4623
4767
  const variablesArray = this.variables;
4624
4768
  if (isChecked) {
4625
4769
  variablesArray.controls.forEach((control) => {
4626
- var _a, _b;
4770
+ var _a, _b, _c;
4627
4771
  (_a = control.get('paramName')) === null || _a === void 0 ? void 0 : _a.clearValidators();
4628
- (_b = control.get('paramName')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity();
4772
+ (_b = control.get('paramName')) === null || _b === void 0 ? void 0 : _b.setValue('');
4773
+ (_c = control.get('paramName')) === null || _c === void 0 ? void 0 : _c.updateValueAndValidity();
4629
4774
  });
4630
4775
  }
4631
4776
  else {
@@ -4637,6 +4782,34 @@ let GeneralInformationWAComponent = class GeneralInformationWAComponent {
4637
4782
  }
4638
4783
  this.form.updateValueAndValidity();
4639
4784
  }
4785
+ toggleExcelValidation(isUpload) {
4786
+ const currentValidator = isUpload ? null : Validators$1.required;
4787
+ // ====================================================
4788
+ // 2. UPDATE VALIDASI CAROUSEL VARIABLES
4789
+ // ====================================================
4790
+ const carouselArray = this.form.get('paramCarousel');
4791
+ if (carouselArray) {
4792
+ carouselArray.controls.forEach((card) => {
4793
+ var _a, _b;
4794
+ const bodyParams = card.get('bodyParams');
4795
+ (_a = bodyParams) === null || _a === void 0 ? void 0 : _a.controls.forEach((bCtrl) => {
4796
+ var _a, _b;
4797
+ (_a = bCtrl.get('paramName')) === null || _a === void 0 ? void 0 : _a.setValidators(currentValidator);
4798
+ (_b = bCtrl.get('paramName')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity({ emitEvent: false });
4799
+ });
4800
+ const btnParams = card.get('buttonParams');
4801
+ (_b = btnParams) === null || _b === void 0 ? void 0 : _b.controls.forEach((btnGroup) => {
4802
+ btnGroup.controls.forEach((pBtnCtrl) => {
4803
+ var _a, _b;
4804
+ (_a = pBtnCtrl.get('paramName')) === null || _a === void 0 ? void 0 : _a.setValidators(currentValidator);
4805
+ (_b = pBtnCtrl.get('paramName')) === null || _b === void 0 ? void 0 : _b.updateValueAndValidity({ emitEvent: false });
4806
+ });
4807
+ });
4808
+ });
4809
+ carouselArray.updateValueAndValidity({ emitEvent: false });
4810
+ }
4811
+ this.form.updateValueAndValidity();
4812
+ }
4640
4813
  ngOnDestroy() {
4641
4814
  this.subscribers.forEach((each) => each.unsubscribe());
4642
4815
  }
@@ -4663,7 +4836,7 @@ __decorate([
4663
4836
  GeneralInformationWAComponent = __decorate([
4664
4837
  Component({
4665
4838
  selector: 'lib-general-information-wa',
4666
- template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Message Type</mat-label>\r\n <mat-select placeholder=\"Select message type\" formControlName=\"channel\">\r\n <mat-option\r\n *ngFor=\"let option of msgTypeWAOption\"\r\n [value]=\"option.code\"\r\n (click)=\"formReset()\"\r\n >\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.channel\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('channel')?.touched && form.get('channel')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n\r\n <div\r\n *ngIf=\"!getIsTemplate\"\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 16px; border: 1px solid rgb(243, 124, 44)\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n <div *ngIf=\"!getIsUtility\">\r\n If you select this channel, keep in mind that the message might not be delivered to\r\n all selected customers. This is because the customer must have had a conversation\r\n previously with BSP.\r\n </div>\r\n\r\n <div *ngIf=\"getIsUtility\">\r\n You can send directly a utility message. You can choose between existing utility\r\n templates or creating a new one. If you create a new template, the system may check\r\n whether the content already exists as a template.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getIsText\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label class=\"asterix--after\">Text</mat-label>\r\n\r\n <textarea\r\n matInput\r\n rows=\"6\"\r\n cols=\"50\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"2\"\r\n cdkAutosizeMaxRows=\"15\"\r\n formControlName=\"text\"\r\n placeholder=\"Enter text\"\r\n #autosize=\"cdkTextareaAutosize\"\r\n ></textarea>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('text')?.touched && form.get('text')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsMedia\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Media Type</mat-label>\r\n\r\n <mat-select\r\n placeholder=\"Select media type\"\r\n formControlName=\"media\"\r\n (selectionChange)=\"updateMediaType($event.value)\"\r\n >\r\n <mat-option *ngFor=\"let option of mediaTypeOption\" [value]=\"option.code\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.media\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('media').touched && form.get('media').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"form.get('media').value?.toLowerCase() !== 'location'\">\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n (click)=\"filePicker.click()\"\r\n formControlName=\"fileName\"\r\n />\r\n\r\n <button\r\n mat-button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Choose File\"\r\n (click)=\"filePicker.click()\"\r\n >\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n\r\n <input\r\n #filePicker\r\n hidden\r\n type=\"file\"\r\n [accept]=\"extFileAccepted\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.fileName\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('fileName').touched &&\r\n form.get('fileName').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('media').value?.toLowerCase() === 'location'\">\r\n <div class=\"w-100\">\r\n <h4 class=\"asterix--after\">Location</h4>\r\n\r\n <div class=\"w-100\">\r\n <agm-map\r\n style=\"width: 100%; height: 400px\"\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [disableDoubleClickZoom]=\"maps.isDoubleClickZoom\"\r\n [zoom]=\"maps.zoom\"\r\n >\r\n <agm-marker\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [markerDraggable]=\"maps.isDraggable\"\r\n (dragEnd)=\"markerDragEnd($event)\"\r\n ></agm-marker>\r\n </agm-map>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Location</mat-label>\r\n\r\n <input\r\n #mapSearch\r\n matInput\r\n type=\"text\"\r\n maxlength=\"100\"\r\n placeholder=\"Enter location here\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsTemplate\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n (selectionChange)=\"getTemplateOptionService($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"template\"\r\n placeholder=\"Select template\"\r\n [complete]=\"isHaveNextTemplateOption === false\"\r\n [compareWith]=\"templateSelectedDisplay\"\r\n (infiniteScroll)=\"getNextTemplateBatch()\"\r\n (selectionChange)=\"updateTemplate($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('template').value?.name\"\r\n (searchRes)=\"updateSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('template')?.touched &&\r\n form.get('template')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div *ngIf=\"isHaveTemplateParam\" class=\"d-flex justify-content-end\">\r\n <mat-checkbox\r\n labelPosition=\"before\"\r\n formControlName=\"isUpload\"\r\n (change)=\"updateDownloadCSV($event.checked)\"\r\n >\r\n Using Download XLSX\r\n </mat-checkbox>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!form.get('isUpload')?.value\">\r\n <div\r\n *ngIf=\"form.get('template')?.value?.category === 'AUTHENTICATION'\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label> OTP Value </mat-label>\r\n\r\n <input matInput type=\"text\" formControlName=\"otpValue\" />\r\n </mat-form-field>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getParamHeader?.length > 0\">\r\n <p class=\"font-16px font-PoppinsBold\">Header Parameter</p>\r\n\r\n <div\r\n *ngFor=\"let param of getParamHeader; let paramHeaderIndex = index\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramHeaderIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramHeaderIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getParamBody?.length > 0\">\r\n <p class=\"font-16px font-PoppinsBold mt-3\">Body Parameter</p>\r\n\r\n <div\r\n *ngFor=\"let param of getParamBody; let paramBodyIndex = index\"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramBodyIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramBodyIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n <!-- rizal -->\r\n <h5\r\n class=\"mb-3 font-weight-bold mt-4\"\r\n *ngIf=\"(!isUsingExcelBulk && buttonParamsControls.length > 0) || isShowParameter\"\r\n >\r\n Button Parameter\r\n </h5>\r\n <div\r\n class=\"button-parameter-section\"\r\n *ngIf=\"buttonParamsControls.length > 0 && !isUsingExcelBulk\"\r\n >\r\n <div formArrayName=\"buttonParams\">\r\n <div\r\n *ngFor=\"let btnControl of buttonParamsControls; let i = index\"\r\n [formGroupName]=\"i\"\r\n >\r\n <p class=\"font-14px font-PoppinsBold mt-3\">Button {{ i + 1 }}</p>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter 1</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"payload\"\r\n placeholder=\"Parameter 1\"\r\n maxlength=\"256\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- titus -->\r\n <ng-container *ngIf=\"isShowParameter\">\r\n <ng-container *ngFor=\"let button of getButton; let buttonIndex = index\">\r\n <ng-container *ngIf=\"getParamButton(buttonIndex)?.length > 0\">\r\n <p class=\"font-14px font-PoppinsBold mt-3\">Button {{ buttonIndex + 1 }}</p>\r\n\r\n <div\r\n *ngFor=\"\r\n let param of getParamButton(buttonIndex);\r\n let paramIndex = index\r\n \"\r\n class=\"form-group\"\r\n >\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Parameter {{ paramIndex + 1 }}</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n [placeholder]=\"'Parameter ' + (paramIndex + 1)\"\r\n [formControl]=\"param.get('name')\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"\r\n ['image', 'video', 'document'].includes(\r\n form.get('template')?.value?.header?.type?.toLowerCase()\r\n )\r\n \"\r\n >\r\n <p class=\"font-16px font-PoppinsBold mt-3\">File</p>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n (click)=\"filePicker.click()\"\r\n formControlName=\"fileName\"\r\n />\r\n\r\n <button\r\n mat-button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Choose File\"\r\n (click)=\"filePicker.click()\"\r\n >\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n\r\n <input\r\n #filePicker\r\n hidden\r\n type=\"file\"\r\n [accept]=\"extFileAccepted\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsCatalogue\">\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">Category</mat-label>\r\n\r\n <mat-select formControlName=\"category\" placeholder=\"Select category\">\r\n <mat-option *ngFor=\"let option of categoryOption\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.category\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('category')?.touched &&\r\n form.get('category')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">Catalog</mat-label>\r\n\r\n <mat-select formControlName=\"catalogue\" placeholder=\"Select catalog\">\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.catalogue\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('catalogue')?.touched &&\r\n form.get('catalogue')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"form.get('category')?.value === 'product'\"\r\n style=\"padding: 8px; border-radius: 8px; border: 1px solid #6177c4\"\r\n >\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Product</mat-label>\r\n\r\n <mat-select formControlName=\"product\" placeholder=\"Select product\">\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.product\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('product')?.touched &&\r\n form.get('product')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label>Body</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n maxlength=\"100\"\r\n formControlName=\"body\"\r\n placeholder=\"Enter body\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getIsUtility\">\r\n <div style=\"display: grid; gap: 0.5rem\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n <mat-radio-group\r\n style=\"display: flex; gap: 0.5rem; flex-wrap: wrap\"\r\n formControlName=\"isUseExistingTemplate\"\r\n (change)=\"handleChangeTemplate($event.value)\"\r\n >\r\n <mat-radio-button\r\n [value]=\"option.value\"\r\n *ngFor=\"let option of templates\"\r\n color=\"primary\"\r\n >\r\n {{ option.label }}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100\"\r\n style=\"margin-bottom: 20\"\r\n >\r\n <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"from\"\r\n placeholder=\"Select from\"\r\n [complete]=\"isHaveNextAccountOption === false\"\r\n [compareWith]=\"accountSelectedDisplay\"\r\n (infiniteScroll)=\"getNextAccountBatch()\"\r\n (selectionChange)=\"handleChangeFrom($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('from').value?.name\"\r\n (searchRes)=\"updateSearchAccount($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n {{ option.name + ' (' + option.accountNo + ')' }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!form.get('isUseExistingTemplate')?.value; else existingTmpl\">\r\n <ng-container *ngTemplateOutlet=\"stageAlertTmpl\"></ng-container>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label class=\"asterix--after\">Body</mat-label>\r\n\r\n <textarea\r\n matInput\r\n rows=\"6\"\r\n cols=\"50\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"2\"\r\n cdkAutosizeMaxRows=\"15\"\r\n formControlName=\"text\"\r\n placeholder=\"Enter text\"\r\n #autosize=\"cdkTextareaAutosize\"\r\n ></textarea>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('text').touched && form.get('text').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <app-input\r\n type=\"numeric\"\r\n formControlName=\"ttl\"\r\n label=\"TTL\"\r\n placeholder=\"Enter ttl\"\r\n [trimLeadingZeros]=\"true\"\r\n suffix=\"seconds\"\r\n hint=\"The default TTL is 30 days (2,592,000 seconds) if no value is provided.\"\r\n ></app-input>\r\n </div>\r\n\r\n <div *ngIf=\"!isReadOnlyMode\">\r\n <mat-checkbox formControlName=\"isNeedSave\">\r\n Save this message as future template\r\n </mat-checkbox>\r\n </div>\r\n </ng-container>\r\n <!-- variables start -->\r\n <ng-container *ngIf=\"!form.get('isDownloadVariableXLS')?.value\">\r\n <div class=\"template-container mt-5\" *ngIf=\"!form.get('isUseExistingTemplate')?.value\">\r\n <div class=\"add-variable-wrapper\">\r\n <button mat-button class=\"btn-add-variable\" (click)=\"addVariable()\">\r\n <mat-icon class=\"icon-small\">add</mat-icon> Add Variable\r\n </button>\r\n </div>\r\n\r\n <div class=\"body-content-wrapper\">\r\n <h3 class=\"body-content-title\">Body Content</h3>\r\n <p class=\"body-content-subtitle\">\r\n Input the parameter to show during the preview. You can use predefined\r\n variable, drag and drop to text field below\r\n </p>\r\n <div class=\"predefined-variable-wrapper\">\r\n <span class=\"btn-predefined\">\r\n <mat-icon class=\"icon-small\">attach_money</mat-icon>\r\n Unsubscribe Account\r\n </span>\r\n </div>\r\n <div class=\"variables-list\" formArrayName=\"variables\">\r\n <div\r\n class=\"variable-row d-flex align-items-start mb-3\"\r\n *ngFor=\"let variable of variables.controls; let i = index\"\r\n [formGroupName]=\"i\"\r\n >\r\n <div class=\"variable-sequence mr-3\">\r\n {{ '{' + '{' + (i + 1) + '}' + '}' }}\r\n </div>\r\n <div class=\"variable-input-wrapper flex-grow-1\">\r\n <mat-form-field\r\n appearance=\"outline\"\r\n class=\"w-100 custom-variable-field\"\r\n >\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"e.g. Name, Verification code\"\r\n />\r\n </mat-form-field>\r\n\r\n <ng-container\r\n *ngFor=\"let validation of validationMessages?.paramName\"\r\n >\r\n <div\r\n class=\"custom-error-text text-right\"\r\n *ngIf=\"\r\n variable.get('paramName')?.hasError(validation.type) &&\r\n (variable.get('paramName')?.touched ||\r\n variable.get('paramName')?.dirty)\r\n \"\r\n >\r\n <span class=\"font-12px m-0\">{{ validation.message }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"btn-delete ml-3\"\r\n (click)=\"removeVariable(i)\"\r\n >\r\n <mat-icon color=\"warn\">delete_outline</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- ====================================================== -->\r\n <!-- VIEW 2: USE EXISTING TEMPLATE (UI Clean, cuma input) -->\r\n <!-- ====================================================== -->\r\n <div\r\n class=\"existing-template-variables mt-4\"\r\n *ngIf=\"form.get('isUseExistingTemplate')?.value && variables.controls.length > 0\"\r\n >\r\n <div class=\"font-bold mb-3\">Variables</div>\r\n <!-- Looping array yang sama persis, tapi tanpa ornamen -->\r\n <div formArrayName=\"variables\">\r\n <div\r\n class=\"form-group mb-3\"\r\n *ngFor=\"let variable of variables.controls; let i = index\"\r\n [formGroupName]=\"i\"\r\n >\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"w-100 custom-variable-field\"\r\n >\r\n <!-- Label dinamis: {{1}}, {{2}}, dst -->\r\n <mat-label>{{ '{' + '{' + (i + 1) + '}' + '}' }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"paramName\"\r\n placeholder=\"Input value here...\"\r\n />\r\n </mat-form-field>\r\n\r\n <!-- Validasi Error -->\r\n <ng-container *ngFor=\"let validation of validationMessages?.paramName\">\r\n <div\r\n class=\"custom-error-text text-right\"\r\n *ngIf=\"\r\n variable.get('paramName')?.hasError(validation.type) &&\r\n (variable.get('paramName')?.touched ||\r\n variable.get('paramName')?.dirty)\r\n \"\r\n >\r\n <span class=\"font-12px m-0\">{{ validation.message }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"d-flex justify-content-end\">\r\n <mat-checkbox\r\n labelPosition=\"before\"\r\n formControlName=\"isDownloadVariableXLS\"\r\n (change)=\"updateVariableDownloadXLS($event.checked)\"\r\n >\r\n Using Download XLSX\r\n </mat-checkbox>\r\n </div>\r\n <!-- variables end -->\r\n <ng-template #existingTmpl>\r\n <ng-container *ngTemplateOutlet=\"stageAlertTmpl\"></ng-container>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n <mat-select\r\n matSelectInfiniteScroll\r\n formControlName=\"template\"\r\n placeholder=\"Select template\"\r\n [complete]=\"isHaveNextTemplateOption === false\"\r\n [compareWith]=\"templateSelectedDisplay\"\r\n (infiniteScroll)=\"getNextTemplateBatch()\"\r\n (selectionChange)=\"updateTemplate($event.value)\"\r\n >\r\n <div style=\"margin: 20px\">\r\n <lib-search\r\n [placeholder]=\"'Search'\"\r\n [currentValue]=\"form?.get('template').value?.name\"\r\n (searchRes)=\"updateSearch($event)\"\r\n ></lib-search>\r\n </div>\r\n\r\n <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n {{ option.name }}\r\n </mat-option>\r\n <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('template')?.touched &&\r\n form.get('template')?.hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <app-input\r\n type=\"numeric\"\r\n formControlName=\"ttl\"\r\n label=\"TTL\"\r\n placeholder=\"Enter ttl\"\r\n [trimLeadingZeros]=\"true\"\r\n suffix=\"Seconds\"\r\n hint=\"The default TTL is 30 days (2,592,000 seconds) if no value is provided.\"\r\n ></app-input>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n</form>\r\n\r\n<ng-template #stageAlertTmpl>\r\n <div\r\n role=\"alert\"\r\n class=\"alert alert-warning d-flex align-items-center\"\r\n style=\"margin-top: 8px; border: 1px solid rgb(243, 124, 44)\"\r\n *ngIf=\"form.get('from')?.value && form.get('from')?.value?.directSendRestrictionStage > 0\"\r\n >\r\n <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 1\">\r\n Direct Send misuse detected. Please review your messaging practices.\r\n </div>\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 2\">\r\n Direct Send access restricted for 7 days due to continued misuse.\r\n </div>\r\n\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 3\">\r\n Direct Send access restricted for 30 days due to continued misuse. Final warning before\r\n permanent revocation.\r\n </div>\r\n\r\n <div *ngIf=\"form.get('from')?.value?.directSendRestrictionStage === 4\">\r\n Direct Send access has been permanently revoked.\r\n </div>\r\n </div>\r\n</ng-template>\r\n",
4839
+ 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",
4667
4840
  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}"]
4668
4841
  })
4669
4842
  ], GeneralInformationWAComponent);
@@ -5180,8 +5353,8 @@ __decorate([
5180
5353
  GeneralInformationComponent = __decorate([
5181
5354
  Component({
5182
5355
  selector: 'lib-new-campaign-general-information',
5183
- 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",
5184
- 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}"]
5356
+ 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",
5357
+ 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)}"]
5185
5358
  })
5186
5359
  ], GeneralInformationComponent);
5187
5360
 
@@ -5392,7 +5565,7 @@ let NewNumberBasesComponent = class NewNumberBasesComponent {
5392
5565
  return found ? true : false;
5393
5566
  }
5394
5567
  onDownloadSampleService() {
5395
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
5568
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
5396
5569
  const genInfoForm = (_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.form;
5397
5570
  const isNeedSave = (_c = genInfoForm) === null || _c === void 0 ? void 0 : _c.isNeedSave;
5398
5571
  // 1. Parameter Wajib (Selalu dikirim di semua skenario)
@@ -5417,13 +5590,7 @@ let NewNumberBasesComponent = class NewNumberBasesComponent {
5417
5590
  // Variabel khusus Direct Send
5418
5591
  const safeBodyText = encodeURIComponent(((_v = genInfoForm) === null || _v === void 0 ? void 0 : _v.text) || '');
5419
5592
  parameterList.push(this.initParam('bodyText', safeBodyText, 'string'));
5420
- const variables = (_w = genInfoForm) === null || _w === void 0 ? void 0 : _w.variables;
5421
- if (variables && Array.isArray(variables) && variables.length > 0) {
5422
- const bodyExamplesString = variables.map((v) => v.paramName).join(',');
5423
- const safeBodyExamples = encodeURIComponent(bodyExamplesString);
5424
- parameterList.push(this.initParam('bodyExamples', safeBodyExamples, 'string'));
5425
- }
5426
- if ((_z = (_y = (_x = genInfoForm) === null || _x === void 0 ? void 0 : _x.template) === null || _y === void 0 ? void 0 : _y.header) === null || _z === void 0 ? void 0 : _z.text) {
5593
+ 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) {
5427
5594
  const safeHeaderText = encodeURIComponent(genInfoForm.template.header.text);
5428
5595
  parameterList.push(this.initParam('headerText', safeHeaderText, 'string'));
5429
5596
  }