@capillarytech/creatives-library 7.14.38 → 7.14.41

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 (37) hide show
  1. package/package.json +1 -1
  2. package/reducers.js +2 -0
  3. package/services/api.js +9 -1
  4. package/tests/integration/TemplateCreation/TemplateCreation.integration.test.js +420 -0
  5. package/tests/integration/TemplateCreation/api-response.js +1663 -0
  6. package/tests/integration/TemplateCreation/helper.js +23 -0
  7. package/tests/integration/TemplateCreation/mocks/initialState.js +428 -0
  8. package/tests/integration/TemplateCreation/msw-handler.js +48 -0
  9. package/v2Components/CapActionButton/index.js +1 -0
  10. package/v2Components/FormBuilder/index.js +28 -4
  11. package/v2Containers/Assets/Gallery/index.js +1 -1
  12. package/v2Containers/CreativesContainer/constants.js +2 -0
  13. package/v2Containers/CreativesContainer/selectors.js +2 -2
  14. package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap +8 -0
  15. package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/content.test.js.snap +3 -0
  16. package/v2Containers/Line/Container/Text/index.js +3 -2
  17. package/v2Containers/Line/Container/Wrapper/tests/__snapshots__/index.test.js.snap +4 -0
  18. package/v2Containers/Line/Container/index.js +1 -1
  19. package/v2Containers/Rcs/index.js +3 -0
  20. package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap +250 -3
  21. package/v2Containers/Sms/Create/actions.js +9 -0
  22. package/v2Containers/Sms/Create/constants.js +2 -0
  23. package/v2Containers/Sms/Create/index.js +12 -0
  24. package/v2Containers/Sms/Create/sagas.js +19 -3
  25. package/v2Containers/Sms/Create/tests/sagas.test.js +82 -0
  26. package/v2Containers/Templates/index.js +26 -11
  27. package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +96 -80
  28. package/v2Containers/TemplatesV2/index.js +1 -1
  29. package/v2Containers/Viber/index.js +1 -0
  30. package/v2Containers/Whatsapp/constants.js +27 -8
  31. package/v2Containers/Whatsapp/index.js +14 -2
  32. package/v2Containers/Whatsapp/messages.js +21 -4
  33. package/v2Containers/Whatsapp/styles.scss +3 -0
  34. package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +180 -128
  35. package/v2Containers/Whatsapp/tests/utils.test.js +1 -1
  36. package/v2Containers/Whatsapp/utils.js +2 -1
  37. package/v2Containers/mockdata.js +5 -5
@@ -72,20 +72,20 @@ exports[`Test Templates container Should render temlates when whatsapp templates
72
72
  data={
73
73
  Array [
74
74
  Object {
75
- "key": "transactional",
75
+ "key": "utility",
76
76
  "label": <FormattedMessage
77
- defaultMessage="Transactional"
78
- id="creatives.containersV2.Whatsapp.transactional"
77
+ defaultMessage="Utility"
78
+ id="creatives.containersV2.Whatsapp.utility"
79
79
  values={Object {}}
80
80
  />,
81
81
  "tagColor": "#f2e7fe",
82
82
  "tagTextColor": "#a451ff",
83
83
  "tooltipLabel": <FormattedMessage
84
84
  defaultMessage="Send account updates, order updates, alerts, and more to share important information."
85
- id="creatives.containersV2.Whatsapp.transactionalTooltip"
85
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
86
86
  values={Object {}}
87
87
  />,
88
- "value": "TRANSACTIONAL",
88
+ "value": "UTILITY",
89
89
  },
90
90
  Object {
91
91
  "key": "marketing",
@@ -104,20 +104,20 @@ exports[`Test Templates container Should render temlates when whatsapp templates
104
104
  "value": "MARKETING",
105
105
  },
106
106
  Object {
107
- "key": "otp",
107
+ "key": "authentication",
108
108
  "label": <FormattedMessage
109
- defaultMessage="Otp"
110
- id="creatives.containersV2.Whatsapp.otp"
109
+ defaultMessage="Authentication"
110
+ id="creatives.containersV2.Whatsapp.authentication"
111
111
  values={Object {}}
112
112
  />,
113
113
  "tagColor": "#ecf7ec",
114
114
  "tagTextColor": "#6bb56b",
115
115
  "tooltipLabel": <FormattedMessage
116
116
  defaultMessage="Send codes that allow your customers to securely access their accounts."
117
- id="creatives.containersV2.Whatsapp.otpTooltip"
117
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
118
118
  values={Object {}}
119
119
  />,
120
- "value": "OTP",
120
+ "value": "AUTHENTICATION",
121
121
  },
122
122
  ]
123
123
  }
@@ -219,7 +219,9 @@ exports[`Test Templates container Should render temlates when whatsapp templates
219
219
  <CapRow />
220
220
  <CapRow>
221
221
  <CapSlideBox
222
+ closeIconPosition="right"
222
223
  closeIconSize="m"
224
+ closeIconType="close"
223
225
  content={
224
226
  <CardGrid
225
227
  className=""
@@ -349,20 +351,20 @@ exports[`Test Templates container Should render temlates when whatsapp templates
349
351
  data={
350
352
  Array [
351
353
  Object {
352
- "key": "transactional",
354
+ "key": "utility",
353
355
  "label": <FormattedMessage
354
- defaultMessage="Transactional"
355
- id="creatives.containersV2.Whatsapp.transactional"
356
+ defaultMessage="Utility"
357
+ id="creatives.containersV2.Whatsapp.utility"
356
358
  values={Object {}}
357
359
  />,
358
360
  "tagColor": "#f2e7fe",
359
361
  "tagTextColor": "#a451ff",
360
362
  "tooltipLabel": <FormattedMessage
361
363
  defaultMessage="Send account updates, order updates, alerts, and more to share important information."
362
- id="creatives.containersV2.Whatsapp.transactionalTooltip"
364
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
363
365
  values={Object {}}
364
366
  />,
365
- "value": "TRANSACTIONAL",
367
+ "value": "UTILITY",
366
368
  },
367
369
  Object {
368
370
  "key": "marketing",
@@ -381,20 +383,20 @@ exports[`Test Templates container Should render temlates when whatsapp templates
381
383
  "value": "MARKETING",
382
384
  },
383
385
  Object {
384
- "key": "otp",
386
+ "key": "authentication",
385
387
  "label": <FormattedMessage
386
- defaultMessage="Otp"
387
- id="creatives.containersV2.Whatsapp.otp"
388
+ defaultMessage="Authentication"
389
+ id="creatives.containersV2.Whatsapp.authentication"
388
390
  values={Object {}}
389
391
  />,
390
392
  "tagColor": "#ecf7ec",
391
393
  "tagTextColor": "#6bb56b",
392
394
  "tooltipLabel": <FormattedMessage
393
395
  defaultMessage="Send codes that allow your customers to securely access their accounts."
394
- id="creatives.containersV2.Whatsapp.otpTooltip"
396
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
395
397
  values={Object {}}
396
398
  />,
397
- "value": "OTP",
399
+ "value": "AUTHENTICATION",
398
400
  },
399
401
  ]
400
402
  }
@@ -511,7 +513,9 @@ exports[`Test Templates container Should render temlates when whatsapp templates
511
513
  <CapRow />
512
514
  <CapRow>
513
515
  <CapSlideBox
516
+ closeIconPosition="right"
514
517
  closeIconSize="m"
518
+ closeIconType="close"
515
519
  content={
516
520
  <CardGrid
517
521
  className=""
@@ -655,20 +659,20 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
655
659
  data={
656
660
  Array [
657
661
  Object {
658
- "key": "transactional",
662
+ "key": "utility",
659
663
  "label": <FormattedMessage
660
- defaultMessage="Transactional"
661
- id="creatives.containersV2.Whatsapp.transactional"
664
+ defaultMessage="Utility"
665
+ id="creatives.containersV2.Whatsapp.utility"
662
666
  values={Object {}}
663
667
  />,
664
668
  "tagColor": "#f2e7fe",
665
669
  "tagTextColor": "#a451ff",
666
670
  "tooltipLabel": <FormattedMessage
667
671
  defaultMessage="Send account updates, order updates, alerts, and more to share important information."
668
- id="creatives.containersV2.Whatsapp.transactionalTooltip"
672
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
669
673
  values={Object {}}
670
674
  />,
671
- "value": "TRANSACTIONAL",
675
+ "value": "UTILITY",
672
676
  },
673
677
  Object {
674
678
  "key": "marketing",
@@ -687,20 +691,20 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
687
691
  "value": "MARKETING",
688
692
  },
689
693
  Object {
690
- "key": "otp",
694
+ "key": "authentication",
691
695
  "label": <FormattedMessage
692
- defaultMessage="Otp"
693
- id="creatives.containersV2.Whatsapp.otp"
696
+ defaultMessage="Authentication"
697
+ id="creatives.containersV2.Whatsapp.authentication"
694
698
  values={Object {}}
695
699
  />,
696
700
  "tagColor": "#ecf7ec",
697
701
  "tagTextColor": "#6bb56b",
698
702
  "tooltipLabel": <FormattedMessage
699
703
  defaultMessage="Send codes that allow your customers to securely access their accounts."
700
- id="creatives.containersV2.Whatsapp.otpTooltip"
704
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
701
705
  values={Object {}}
702
706
  />,
703
- "value": "OTP",
707
+ "value": "AUTHENTICATION",
704
708
  },
705
709
  ]
706
710
  }
@@ -978,7 +982,9 @@ Click {{3}} to unsubscribe",
978
982
  <CapRow />
979
983
  <CapRow>
980
984
  <CapSlideBox
985
+ closeIconPosition="right"
981
986
  closeIconSize="m"
987
+ closeIconType="close"
982
988
  content={
983
989
  <CardGrid
984
990
  className=""
@@ -1108,20 +1114,20 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
1108
1114
  data={
1109
1115
  Array [
1110
1116
  Object {
1111
- "key": "transactional",
1117
+ "key": "utility",
1112
1118
  "label": <FormattedMessage
1113
- defaultMessage="Transactional"
1114
- id="creatives.containersV2.Whatsapp.transactional"
1119
+ defaultMessage="Utility"
1120
+ id="creatives.containersV2.Whatsapp.utility"
1115
1121
  values={Object {}}
1116
1122
  />,
1117
1123
  "tagColor": "#f2e7fe",
1118
1124
  "tagTextColor": "#a451ff",
1119
1125
  "tooltipLabel": <FormattedMessage
1120
1126
  defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1121
- id="creatives.containersV2.Whatsapp.transactionalTooltip"
1127
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1122
1128
  values={Object {}}
1123
1129
  />,
1124
- "value": "TRANSACTIONAL",
1130
+ "value": "UTILITY",
1125
1131
  },
1126
1132
  Object {
1127
1133
  "key": "marketing",
@@ -1140,20 +1146,20 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
1140
1146
  "value": "MARKETING",
1141
1147
  },
1142
1148
  Object {
1143
- "key": "otp",
1149
+ "key": "authentication",
1144
1150
  "label": <FormattedMessage
1145
- defaultMessage="Otp"
1146
- id="creatives.containersV2.Whatsapp.otp"
1151
+ defaultMessage="Authentication"
1152
+ id="creatives.containersV2.Whatsapp.authentication"
1147
1153
  values={Object {}}
1148
1154
  />,
1149
1155
  "tagColor": "#ecf7ec",
1150
1156
  "tagTextColor": "#6bb56b",
1151
1157
  "tooltipLabel": <FormattedMessage
1152
1158
  defaultMessage="Send codes that allow your customers to securely access their accounts."
1153
- id="creatives.containersV2.Whatsapp.otpTooltip"
1159
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1154
1160
  values={Object {}}
1155
1161
  />,
1156
- "value": "OTP",
1162
+ "value": "AUTHENTICATION",
1157
1163
  },
1158
1164
  ]
1159
1165
  }
@@ -1413,7 +1419,9 @@ Click {{3}} to unsubscribe",
1413
1419
  <CapRow />
1414
1420
  <CapRow>
1415
1421
  <CapSlideBox
1422
+ closeIconPosition="right"
1416
1423
  closeIconSize="m"
1424
+ closeIconType="close"
1417
1425
  content={
1418
1426
  <CardGrid
1419
1427
  className=""
@@ -1543,20 +1551,20 @@ exports[`Test Templates container Test max templates warning 1`] = `
1543
1551
  data={
1544
1552
  Array [
1545
1553
  Object {
1546
- "key": "transactional",
1554
+ "key": "utility",
1547
1555
  "label": <FormattedMessage
1548
- defaultMessage="Transactional"
1549
- id="creatives.containersV2.Whatsapp.transactional"
1556
+ defaultMessage="Utility"
1557
+ id="creatives.containersV2.Whatsapp.utility"
1550
1558
  values={Object {}}
1551
1559
  />,
1552
1560
  "tagColor": "#f2e7fe",
1553
1561
  "tagTextColor": "#a451ff",
1554
1562
  "tooltipLabel": <FormattedMessage
1555
1563
  defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1556
- id="creatives.containersV2.Whatsapp.transactionalTooltip"
1564
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1557
1565
  values={Object {}}
1558
1566
  />,
1559
- "value": "TRANSACTIONAL",
1567
+ "value": "UTILITY",
1560
1568
  },
1561
1569
  Object {
1562
1570
  "key": "marketing",
@@ -1575,20 +1583,20 @@ exports[`Test Templates container Test max templates warning 1`] = `
1575
1583
  "value": "MARKETING",
1576
1584
  },
1577
1585
  Object {
1578
- "key": "otp",
1586
+ "key": "authentication",
1579
1587
  "label": <FormattedMessage
1580
- defaultMessage="Otp"
1581
- id="creatives.containersV2.Whatsapp.otp"
1588
+ defaultMessage="Authentication"
1589
+ id="creatives.containersV2.Whatsapp.authentication"
1582
1590
  values={Object {}}
1583
1591
  />,
1584
1592
  "tagColor": "#ecf7ec",
1585
1593
  "tagTextColor": "#6bb56b",
1586
1594
  "tooltipLabel": <FormattedMessage
1587
1595
  defaultMessage="Send codes that allow your customers to securely access their accounts."
1588
- id="creatives.containersV2.Whatsapp.otpTooltip"
1596
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1589
1597
  values={Object {}}
1590
1598
  />,
1591
- "value": "OTP",
1599
+ "value": "AUTHENTICATION",
1592
1600
  },
1593
1601
  ]
1594
1602
  }
@@ -1848,7 +1856,9 @@ Click {{3}} to unsubscribe",
1848
1856
  <CapRow />
1849
1857
  <CapRow>
1850
1858
  <CapSlideBox
1859
+ closeIconPosition="right"
1851
1860
  closeIconSize="m"
1861
+ closeIconType="close"
1852
1862
  content={
1853
1863
  <CardGrid
1854
1864
  className=""
@@ -1937,20 +1947,20 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
1937
1947
  data={
1938
1948
  Array [
1939
1949
  Object {
1940
- "key": "transactional",
1950
+ "key": "utility",
1941
1951
  "label": <FormattedMessage
1942
- defaultMessage="Transactional"
1943
- id="creatives.containersV2.Whatsapp.transactional"
1952
+ defaultMessage="Utility"
1953
+ id="creatives.containersV2.Whatsapp.utility"
1944
1954
  values={Object {}}
1945
1955
  />,
1946
1956
  "tagColor": "#f2e7fe",
1947
1957
  "tagTextColor": "#a451ff",
1948
1958
  "tooltipLabel": <FormattedMessage
1949
1959
  defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1950
- id="creatives.containersV2.Whatsapp.transactionalTooltip"
1960
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1951
1961
  values={Object {}}
1952
1962
  />,
1953
- "value": "TRANSACTIONAL",
1963
+ "value": "UTILITY",
1954
1964
  },
1955
1965
  Object {
1956
1966
  "key": "marketing",
@@ -1969,20 +1979,20 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
1969
1979
  "value": "MARKETING",
1970
1980
  },
1971
1981
  Object {
1972
- "key": "otp",
1982
+ "key": "authentication",
1973
1983
  "label": <FormattedMessage
1974
- defaultMessage="Otp"
1975
- id="creatives.containersV2.Whatsapp.otp"
1984
+ defaultMessage="Authentication"
1985
+ id="creatives.containersV2.Whatsapp.authentication"
1976
1986
  values={Object {}}
1977
1987
  />,
1978
1988
  "tagColor": "#ecf7ec",
1979
1989
  "tagTextColor": "#6bb56b",
1980
1990
  "tooltipLabel": <FormattedMessage
1981
1991
  defaultMessage="Send codes that allow your customers to securely access their accounts."
1982
- id="creatives.containersV2.Whatsapp.otpTooltip"
1992
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1983
1993
  values={Object {}}
1984
1994
  />,
1985
- "value": "OTP",
1995
+ "value": "AUTHENTICATION",
1986
1996
  },
1987
1997
  ]
1988
1998
  }
@@ -2110,7 +2120,9 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
2110
2120
  <CapRow />
2111
2121
  <CapRow>
2112
2122
  <CapSlideBox
2123
+ closeIconPosition="right"
2113
2124
  closeIconSize="m"
2125
+ closeIconType="close"
2114
2126
  content={
2115
2127
  <CardGrid
2116
2128
  className=""
@@ -2199,20 +2211,20 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
2199
2211
  data={
2200
2212
  Array [
2201
2213
  Object {
2202
- "key": "transactional",
2214
+ "key": "utility",
2203
2215
  "label": <FormattedMessage
2204
- defaultMessage="Transactional"
2205
- id="creatives.containersV2.Whatsapp.transactional"
2216
+ defaultMessage="Utility"
2217
+ id="creatives.containersV2.Whatsapp.utility"
2206
2218
  values={Object {}}
2207
2219
  />,
2208
2220
  "tagColor": "#f2e7fe",
2209
2221
  "tagTextColor": "#a451ff",
2210
2222
  "tooltipLabel": <FormattedMessage
2211
2223
  defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2212
- id="creatives.containersV2.Whatsapp.transactionalTooltip"
2224
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2213
2225
  values={Object {}}
2214
2226
  />,
2215
- "value": "TRANSACTIONAL",
2227
+ "value": "UTILITY",
2216
2228
  },
2217
2229
  Object {
2218
2230
  "key": "marketing",
@@ -2231,20 +2243,20 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
2231
2243
  "value": "MARKETING",
2232
2244
  },
2233
2245
  Object {
2234
- "key": "otp",
2246
+ "key": "authentication",
2235
2247
  "label": <FormattedMessage
2236
- defaultMessage="Otp"
2237
- id="creatives.containersV2.Whatsapp.otp"
2248
+ defaultMessage="Authentication"
2249
+ id="creatives.containersV2.Whatsapp.authentication"
2238
2250
  values={Object {}}
2239
2251
  />,
2240
2252
  "tagColor": "#ecf7ec",
2241
2253
  "tagTextColor": "#6bb56b",
2242
2254
  "tooltipLabel": <FormattedMessage
2243
2255
  defaultMessage="Send codes that allow your customers to securely access their accounts."
2244
- id="creatives.containersV2.Whatsapp.otpTooltip"
2256
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2245
2257
  values={Object {}}
2246
2258
  />,
2247
- "value": "OTP",
2259
+ "value": "AUTHENTICATION",
2248
2260
  },
2249
2261
  ]
2250
2262
  }
@@ -2346,7 +2358,9 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
2346
2358
  <CapRow />
2347
2359
  <CapRow>
2348
2360
  <CapSlideBox
2361
+ closeIconPosition="right"
2349
2362
  closeIconSize="m"
2363
+ closeIconType="close"
2350
2364
  content={
2351
2365
  <CardGrid
2352
2366
  className=""
@@ -2435,20 +2449,20 @@ exports[`Test Templates container Test removing single filter 1`] = `
2435
2449
  data={
2436
2450
  Array [
2437
2451
  Object {
2438
- "key": "transactional",
2452
+ "key": "utility",
2439
2453
  "label": <FormattedMessage
2440
- defaultMessage="Transactional"
2441
- id="creatives.containersV2.Whatsapp.transactional"
2454
+ defaultMessage="Utility"
2455
+ id="creatives.containersV2.Whatsapp.utility"
2442
2456
  values={Object {}}
2443
2457
  />,
2444
2458
  "tagColor": "#f2e7fe",
2445
2459
  "tagTextColor": "#a451ff",
2446
2460
  "tooltipLabel": <FormattedMessage
2447
2461
  defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2448
- id="creatives.containersV2.Whatsapp.transactionalTooltip"
2462
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2449
2463
  values={Object {}}
2450
2464
  />,
2451
- "value": "TRANSACTIONAL",
2465
+ "value": "UTILITY",
2452
2466
  },
2453
2467
  Object {
2454
2468
  "key": "marketing",
@@ -2467,20 +2481,20 @@ exports[`Test Templates container Test removing single filter 1`] = `
2467
2481
  "value": "MARKETING",
2468
2482
  },
2469
2483
  Object {
2470
- "key": "otp",
2484
+ "key": "authentication",
2471
2485
  "label": <FormattedMessage
2472
- defaultMessage="Otp"
2473
- id="creatives.containersV2.Whatsapp.otp"
2486
+ defaultMessage="Authentication"
2487
+ id="creatives.containersV2.Whatsapp.authentication"
2474
2488
  values={Object {}}
2475
2489
  />,
2476
2490
  "tagColor": "#ecf7ec",
2477
2491
  "tagTextColor": "#6bb56b",
2478
2492
  "tooltipLabel": <FormattedMessage
2479
2493
  defaultMessage="Send codes that allow your customers to securely access their accounts."
2480
- id="creatives.containersV2.Whatsapp.otpTooltip"
2494
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2481
2495
  values={Object {}}
2482
2496
  />,
2483
- "value": "OTP",
2497
+ "value": "AUTHENTICATION",
2484
2498
  },
2485
2499
  ]
2486
2500
  }
@@ -2582,7 +2596,9 @@ exports[`Test Templates container Test removing single filter 1`] = `
2582
2596
  <CapRow />
2583
2597
  <CapRow>
2584
2598
  <CapSlideBox
2599
+ closeIconPosition="right"
2585
2600
  closeIconSize="m"
2601
+ closeIconType="close"
2586
2602
  content={
2587
2603
  <CardGrid
2588
2604
  className=""
@@ -297,7 +297,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
297
297
  }
298
298
  return (
299
299
  !isCreativeAccessible ? <AccessForbidden /> : (
300
- <div className={`${className} creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`}>
300
+ <div className={`${className} creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`} data-testid="cap-wrapper">
301
301
  {isFullMode && <Helmet
302
302
  title={this.props.intl.formatMessage(messages.creatives)}
303
303
  meta={[
@@ -690,6 +690,7 @@ const Viber = (props) => {
690
690
  size="default"
691
691
  label={formatMessage(messages.textMessageTitleLabel)}
692
692
  style={{marginBottom: 20}}
693
+ data-testid="template_name"
693
694
  />
694
695
  )
695
696
  : null
@@ -38,17 +38,20 @@ export const WHATSAPP_CATEGORIES = {
38
38
  appointmentUpdate: 'APPOINTMENT_UPDATE',
39
39
  paymentUpdate: 'PAYMENT_UPDATE',
40
40
  reservationUpdate: 'RESERVATION_UPDATE',
41
- transactional: 'TRANSACTIONAL',
41
+ utility: 'UTILITY',
42
42
  marketing: 'MARKETING',
43
+ authentication: 'AUTHENTICATION',
44
+ // older karix & gupshup category, supporting for older template filter in listing page
43
45
  otp: 'OTP',
46
+ transactional: 'TRANSACTIONAL',
44
47
  };
45
48
 
46
49
  export const KARIX_GUPSHUP_CATEGORY_OPTIONS = [
47
50
  {
48
- key: 'transactional',
49
- value: WHATSAPP_CATEGORIES.transactional,
50
- label: <FormattedMessage {...messages.transactional} />,
51
- tooltipLabel: <FormattedMessage {...messages.transactionalTooltip} />,
51
+ key: 'utility',
52
+ value: WHATSAPP_CATEGORIES.utility,
53
+ label: <FormattedMessage {...messages.utility} />,
54
+ tooltipLabel: <FormattedMessage {...messages.utilityTooltip} />,
52
55
  tagColor: CAP_PURPLE03,
53
56
  tagTextColor: CAP_PURPLE02,
54
57
  },
@@ -60,16 +63,32 @@ export const KARIX_GUPSHUP_CATEGORY_OPTIONS = [
60
63
  tagColor: CAP_ORANGE01,
61
64
  tagTextColor: CAP_ORANGE,
62
65
  },
66
+ {
67
+ key: 'authentication',
68
+ value: WHATSAPP_CATEGORIES.authentication,
69
+ label: <FormattedMessage {...messages.authentication} />,
70
+ tooltipLabel: <FormattedMessage {...messages.authenticationTooltip} />,
71
+ tagColor: CAP_GREEN02,
72
+ tagTextColor: CAP_GREEN01,
73
+ },
74
+ ];
75
+ // older karix & gupshup category, supporting for older template filter in listing page
76
+ export const KARIX_GUPSHUP_OLDER_CATEGORY_OPTIONS = [
77
+ {
78
+ key: 'transactional',
79
+ value: WHATSAPP_CATEGORIES.transactional,
80
+ label: <FormattedMessage {...messages.utility} />,
81
+ tagColor: CAP_PURPLE03,
82
+ tagTextColor: CAP_PURPLE02,
83
+ },
63
84
  {
64
85
  key: 'otp',
65
86
  value: WHATSAPP_CATEGORIES.otp,
66
- label: <FormattedMessage {...messages.otp} />,
67
- tooltipLabel: <FormattedMessage {...messages.otpTooltip} />,
87
+ label: <FormattedMessage {...messages.authentication} />,
68
88
  tagColor: CAP_GREEN02,
69
89
  tagTextColor: CAP_GREEN01,
70
90
  },
71
91
  ];
72
-
73
92
  export const TWILIO_CATEGORY_OPTIONS = [
74
93
  {
75
94
  key: 'alertUpdate',
@@ -23,6 +23,7 @@ import CapButton from '@capillarytech/cap-ui-library/CapButton';
23
23
  import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
24
24
  import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
25
25
  import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
26
+ import CapLink from '@capillarytech/cap-ui-library/CapLink';
26
27
  import moment from 'moment';
27
28
  import {
28
29
  CAP_SPACE_04,
@@ -1241,11 +1242,22 @@ export const Whatsapp = (props) => {
1241
1242
  return formatMessage(messages.tagContentMismatchError);
1242
1243
  case 'INVALID_FORMAT':
1243
1244
  return formatMessage(messages.invalidFormatError);
1245
+ case 'INCORRECT_CATEGORY':
1246
+ return (<FormattedMessage
1247
+ {...messages.IncorrectCategoryError} values={{ here: <CapLink
1248
+ className="cap-incorrect-cat-link"
1249
+ title={<FormattedMessage {...messages.here}/>}
1250
+ onClick={onClickIncorrectFormat}
1251
+ /> }} />);
1244
1252
  default:
1245
1253
  return '';
1246
1254
  }
1247
1255
  };
1248
1256
 
1257
+ const onClickIncorrectFormat = () => {
1258
+ window.open('https://developers.facebook.com/docs/whatsapp/updates-to-pricing/new-template-guidelines', "_blank");
1259
+ };
1260
+
1249
1261
  const getTemplateStatusType = () => {
1250
1262
  switch (templateStatus) {
1251
1263
  case WHATSAPP_STATUSES.approved:
@@ -1382,14 +1394,14 @@ export const Whatsapp = (props) => {
1382
1394
  };
1383
1395
 
1384
1396
  const tagValidationErrorMessage = () => {
1385
- const { unsupportedTags = [] , isBraceError} = tagValidationResponse;
1397
+ const { unsupportedTags = [], isBraceError} = tagValidationResponse;
1386
1398
  let tagError = '';
1387
1399
  if (unsupportedTags.length > 0) {
1388
1400
  tagError = formatMessage(globalMessages.unsupportedTagsValidationError, {
1389
1401
  unsupportedTags,
1390
1402
  });
1391
1403
  }
1392
- if (isBraceError){
1404
+ if (isBraceError) {
1393
1405
  tagError = formatMessage(globalMessages.unbalanacedCurlyBraces);
1394
1406
  }
1395
1407
  return <CapError>{tagError}</CapError>;