@capillarytech/creatives-library 8.0.345-alpha.12 → 8.0.345-alpha.13

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 (138) hide show
  1. package/constants/unified.js +0 -29
  2. package/package.json +1 -1
  3. package/services/api.js +20 -0
  4. package/services/tests/api.test.js +59 -13
  5. package/utils/commonUtils.js +1 -19
  6. package/v2Components/CapActionButton/constants.js +0 -7
  7. package/v2Components/CapActionButton/index.js +109 -167
  8. package/v2Components/CapActionButton/index.scss +6 -157
  9. package/v2Components/CapActionButton/messages.js +3 -19
  10. package/v2Components/CapActionButton/tests/index.test.js +17 -41
  11. package/v2Components/CapCustomSkeleton/index.js +1 -1
  12. package/v2Components/CapCustomSkeleton/tests/__snapshots__/index.test.js.snap +12 -12
  13. package/v2Components/CapTagList/index.js +0 -10
  14. package/v2Components/CommonTestAndPreview/CustomValuesEditor.js +49 -70
  15. package/v2Components/CommonTestAndPreview/DeliverySettings/DeliverySettings.scss +2 -8
  16. package/v2Components/CommonTestAndPreview/DeliverySettings/ModifyDeliverySettings.js +21 -207
  17. package/v2Components/CommonTestAndPreview/DeliverySettings/constants.js +0 -16
  18. package/v2Components/CommonTestAndPreview/DeliverySettings/index.js +10 -85
  19. package/v2Components/CommonTestAndPreview/DeliverySettings/messages.js +0 -30
  20. package/v2Components/CommonTestAndPreview/DeliverySettings/utils/parseSenderDetailsResponse.js +11 -79
  21. package/v2Components/CommonTestAndPreview/SendTestMessage.js +5 -10
  22. package/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js +15 -160
  23. package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +76 -341
  24. package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js +4 -133
  25. package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss +0 -11
  26. package/v2Components/CommonTestAndPreview/constants.js +2 -38
  27. package/v2Components/CommonTestAndPreview/index.js +186 -676
  28. package/v2Components/CommonTestAndPreview/messages.js +3 -49
  29. package/v2Components/CommonTestAndPreview/sagas.js +6 -15
  30. package/v2Components/CommonTestAndPreview/tests/CustomValuesEditor.test.js +284 -308
  31. package/v2Components/CommonTestAndPreview/tests/DeliverySettings/ModifyDeliverySettings.test.js +65 -231
  32. package/v2Components/CommonTestAndPreview/tests/DeliverySettings/index.test.js +5 -118
  33. package/v2Components/CommonTestAndPreview/tests/DeliverySettings/utils/parseSenderDetailsResponse.test.js +0 -341
  34. package/v2Components/CommonTestAndPreview/tests/PreviewSection.test.js +1 -8
  35. package/v2Components/CommonTestAndPreview/tests/SendTestMessage.test.js +13 -34
  36. package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/RcsPreviewContent.test.js +283 -281
  37. package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/index.test.js +1 -199
  38. package/v2Components/CommonTestAndPreview/tests/index.test.js +4 -132
  39. package/v2Components/CommonTestAndPreview/tests/sagas.test.js +2 -2
  40. package/v2Components/FormBuilder/index.js +10 -8
  41. package/v2Components/TemplatePreview/_templatePreview.scss +23 -33
  42. package/v2Components/TemplatePreview/index.js +28 -143
  43. package/v2Components/TemplatePreview/tests/index.test.js +0 -142
  44. package/v2Components/TestAndPreviewSlidebox/index.js +1 -13
  45. package/v2Components/TestAndPreviewSlidebox/sagas.js +4 -11
  46. package/v2Components/TestAndPreviewSlidebox/tests/saga.test.js +1 -3
  47. package/v2Containers/Assets/images/archive_Empty_Illustration.svg +9 -0
  48. package/v2Containers/CreativesContainer/SlideBoxContent.js +4 -36
  49. package/v2Containers/CreativesContainer/SlideBoxFooter.js +4 -11
  50. package/v2Containers/CreativesContainer/SlideBoxHeader.js +4 -29
  51. package/v2Containers/CreativesContainer/constants.js +0 -9
  52. package/v2Containers/CreativesContainer/index.js +108 -300
  53. package/v2Containers/CreativesContainer/index.scss +1 -51
  54. package/v2Containers/CreativesContainer/messages.js +4 -0
  55. package/v2Containers/CreativesContainer/tests/SlideBoxFooter.test.js +34 -78
  56. package/v2Containers/CreativesContainer/tests/SlideBoxHeader.test.js +16 -79
  57. package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap +0 -8
  58. package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxHeader.test.js.snap +98 -357
  59. package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap +18 -20
  60. package/v2Containers/CreativesContainer/tests/index.test.js +9 -71
  61. package/v2Containers/Rcs/constants.js +8 -119
  62. package/v2Containers/Rcs/index.js +812 -2375
  63. package/v2Containers/Rcs/index.scss +6 -276
  64. package/v2Containers/Rcs/messages.js +3 -38
  65. package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap +70345 -98302
  66. package/v2Containers/Rcs/tests/__snapshots__/utils.test.js.snap +5 -0
  67. package/v2Containers/Rcs/tests/index.test.js +121 -152
  68. package/v2Containers/Rcs/tests/mockData.js +0 -38
  69. package/v2Containers/Rcs/tests/utils.test.js +30 -646
  70. package/v2Containers/Rcs/utils.js +11 -478
  71. package/v2Containers/Sms/Create/index.js +40 -100
  72. package/v2Containers/SmsTrai/Create/index.js +4 -9
  73. package/v2Containers/SmsTrai/Edit/constants.js +0 -2
  74. package/v2Containers/SmsTrai/Edit/index.js +130 -636
  75. package/v2Containers/SmsTrai/Edit/messages.js +4 -14
  76. package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap +2296 -4249
  77. package/v2Containers/SmsWrapper/index.js +8 -37
  78. package/v2Containers/TagList/index.js +0 -6
  79. package/v2Containers/Templates/ChannelTypeIllustration.js +23 -6
  80. package/v2Containers/Templates/_templates.scss +126 -181
  81. package/v2Containers/Templates/actions.js +36 -11
  82. package/v2Containers/Templates/constants.js +23 -2
  83. package/v2Containers/Templates/index.js +333 -142
  84. package/v2Containers/Templates/messages.js +68 -0
  85. package/v2Containers/Templates/reducer.js +68 -0
  86. package/v2Containers/Templates/sagas.js +98 -55
  87. package/v2Containers/Templates/selectors.js +12 -0
  88. package/v2Containers/Templates/tests/ChannelTypeIllustration.test.js +12 -0
  89. package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +1256 -1042
  90. package/v2Containers/Templates/tests/index.test.js +6 -0
  91. package/v2Containers/Templates/tests/reducer.test.js +178 -0
  92. package/v2Containers/Templates/tests/sagas.test.js +436 -200
  93. package/v2Containers/Templates/tests/selector.test.js +32 -0
  94. package/v2Containers/TemplatesV2/TemplatesV2.style.js +1 -72
  95. package/v2Containers/TemplatesV2/index.js +23 -86
  96. package/v2Containers/Whatsapp/index.js +20 -3
  97. package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +34 -578
  98. package/utils/rcsPayloadUtils.js +0 -92
  99. package/utils/templateVarUtils.js +0 -201
  100. package/utils/tests/templateVarUtils.test.js +0 -204
  101. package/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js.rej +0 -18
  102. package/v2Components/CommonTestAndPreview/previewApiUtils.js +0 -59
  103. package/v2Components/CommonTestAndPreview/tests/previewApiUtils.test.js +0 -67
  104. package/v2Components/SmsFallback/SmsFallbackLocalSelector.js +0 -87
  105. package/v2Components/SmsFallback/constants.js +0 -73
  106. package/v2Components/SmsFallback/index.js +0 -955
  107. package/v2Components/SmsFallback/index.scss +0 -265
  108. package/v2Components/SmsFallback/messages.js +0 -78
  109. package/v2Components/SmsFallback/smsFallbackUtils.js +0 -118
  110. package/v2Components/SmsFallback/tests/SmsFallbackLocalSelector.test.js +0 -50
  111. package/v2Components/SmsFallback/tests/rcsSmsFallback.acceptance.test.js +0 -147
  112. package/v2Components/SmsFallback/tests/smsFallbackHandlers.test.js +0 -304
  113. package/v2Components/SmsFallback/tests/smsFallbackUi.test.js +0 -197
  114. package/v2Components/SmsFallback/tests/smsFallbackUtils.test.js +0 -277
  115. package/v2Components/SmsFallback/tests/useLocalTemplateList.test.js +0 -422
  116. package/v2Components/SmsFallback/useLocalTemplateList.js +0 -92
  117. package/v2Components/TemplatePreview/constants.js +0 -2
  118. package/v2Components/VarSegmentMessageEditor/constants.js +0 -2
  119. package/v2Components/VarSegmentMessageEditor/index.js +0 -125
  120. package/v2Components/VarSegmentMessageEditor/index.scss +0 -46
  121. package/v2Containers/CreativesContainer/CreativesSlideBoxWrapper.js +0 -43
  122. package/v2Containers/CreativesContainer/embeddedSlideboxUtils.js +0 -67
  123. package/v2Containers/CreativesContainer/tests/SlideBoxContent.localTemplates.test.js +0 -90
  124. package/v2Containers/CreativesContainer/tests/embeddedSlideboxUtils.test.js +0 -258
  125. package/v2Containers/CreativesContainer/tests/useLocalTemplatesProp.test.js +0 -125
  126. package/v2Containers/Rcs/index.js.rej +0 -1336
  127. package/v2Containers/Rcs/index.scss.rej +0 -74
  128. package/v2Containers/Rcs/rcsLibraryHydrationUtils.js +0 -225
  129. package/v2Containers/Rcs/tests/__snapshots__/utils.test.js.snap.rej +0 -128
  130. package/v2Containers/Rcs/tests/rcsLibraryHydrationUtils.test.js +0 -318
  131. package/v2Containers/Sms/smsFormDataHelpers.js +0 -67
  132. package/v2Containers/Sms/tests/smsFormDataHelpers.test.js +0 -253
  133. package/v2Containers/SmsTrai/Edit/index.scss +0 -121
  134. package/v2Containers/Templates/TemplatesActionBar.js +0 -101
  135. package/v2Containers/Templates/tests/TemplatesActionBar.test.js +0 -120
  136. package/v2Containers/Templates/tests/smsTemplatesListApi.test.js +0 -180
  137. package/v2Containers/Templates/utils/smsTemplatesListApi.js +0 -79
  138. package/v2Containers/TemplatesV2/tests/TemplatesV2.localTemplates.test.js +0 -131
package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap CHANGED
@@ -209,42 +209,51 @@ exports[`Test Templates container Should render sms illustration when no templat
209
209
  onPageChange={[Function]}
210
210
  >
211
211
  <div>
212
- <div
213
- className="action-container"
212
+ <CapRow
213
+ align="middle"
214
+ className="filter-row"
215
+ justify="space-between"
216
+ type="flex"
214
217
  >
215
218
  <div
216
- className="action-container__toolbar-row"
219
+ className="filter-row-content"
217
220
  >
218
- <_Class
219
- className="search-text"
220
- disabled={false}
221
- labelPosition="top"
222
- onChange={[Function]}
223
- onClear={[Function]}
224
- onScroll={[Function]}
225
- onSearch={[Function]}
226
- placeholder="Search"
227
- value=""
228
- />
229
- <Component />
230
- <Component />
231
- </div>
232
- <div>
233
221
  <div
234
- className="action-container__create-row"
222
+ className="action-container"
235
223
  >
236
- <CapButton
237
- className="create-new-sms margin-l-8 margin-b-12"
224
+ <_Class
225
+ className="search-text"
238
226
  disabled={false}
239
- isAddBtn={false}
240
- onClick={[Function]}
241
- type="primary"
227
+ labelPosition="top"
228
+ onChange={[Function]}
229
+ onClear={[Function]}
230
+ onScroll={[Function]}
231
+ placeholder="Search"
232
+ style={
233
+ Object {
234
+ "width": "210px",
235
+ }
236
+ }
237
+ value=""
238
+ />
239
+ <Component />
240
+ <Component />
241
+ <div
242
+ className="template-listing-header-actions"
242
243
  >
243
- Create new
244
- </CapButton>
244
+ <CapButton
245
+ className="create-new-sms margin-l-8 margin-b-12"
246
+ disabled={false}
247
+ isAddBtn={false}
248
+ onClick={[Function]}
249
+ type="primary"
250
+ >
251
+ Create new
252
+ </CapButton>
253
+ </div>
245
254
  </div>
246
255
  </div>
247
- </div>
256
+ </CapRow>
248
257
  <div>
249
258
  <ChannelTypeIllustration
250
259
  createTemplate={[Function]}
@@ -399,116 +408,125 @@ exports[`Test Templates container Should render temlates when whatsapp templates
399
408
  }
400
409
  titleClass=""
401
410
  />
402
- <div
403
- className="action-container"
411
+ <CapRow
412
+ align="middle"
413
+ className="filter-row"
414
+ justify="space-between"
415
+ type="flex"
404
416
  >
405
417
  <div
406
- className="action-container__toolbar-row"
418
+ className="filter-row-content"
407
419
  >
408
- <_Class
409
- className="search-text"
410
- disabled={false}
411
- labelPosition="top"
412
- onChange={[Function]}
413
- onClear={[Function]}
414
- onScroll={[Function]}
415
- onSearch={[Function]}
416
- placeholder="Search"
417
- value=""
418
- />
419
420
  <div
420
- className="whatsapp-filters"
421
+ className="action-container"
421
422
  >
422
- <CapSelectFilter
423
- data={
424
- Array [
425
- Object {
426
- "key": "utility",
427
- "label": <FormattedMessage
428
- defaultMessage="Utility"
429
- id="creatives.containersV2.Whatsapp.utility"
430
- values={Object {}}
431
- />,
432
- "tagColor": "#f2e7fe",
433
- "tagTextColor": "#a451ff",
434
- "tooltipLabel": <FormattedMessage
435
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
436
- id="creatives.containersV2.Whatsapp.utilityTooltip"
437
- values={Object {}}
438
- />,
439
- "value": "UTILITY",
440
- },
441
- Object {
442
- "key": "marketing",
443
- "label": <FormattedMessage
444
- defaultMessage="Marketing"
445
- id="creatives.containersV2.Whatsapp.marketing"
446
- values={Object {}}
447
- />,
448
- "tagColor": "#ffe5d2",
449
- "tagTextColor": "#f87d23",
450
- "tooltipLabel": <FormattedMessage
451
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
452
- id="creatives.containersV2.Whatsapp.marketingTooltip"
453
- values={Object {}}
454
- />,
455
- "value": "MARKETING",
456
- },
457
- Object {
458
- "key": "authentication",
459
- "label": <FormattedMessage
460
- defaultMessage="Authentication"
461
- id="creatives.containersV2.Whatsapp.authentication"
462
- values={Object {}}
463
- />,
464
- "tagColor": "#ecf7ec",
465
- "tagTextColor": "#6bb56b",
466
- "tooltipLabel": <FormattedMessage
467
- defaultMessage="Send codes that allow your customers to securely access their accounts."
468
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
469
- values={Object {}}
470
- />,
471
- "value": "AUTHENTICATION",
472
- },
473
- ]
474
- }
475
- dropdownMaxHeight="320px"
476
- dropdownWidth="228px"
477
- onSelect={[Function]}
478
- overlayStyle={
423
+ <_Class
424
+ className="search-text"
425
+ disabled={false}
426
+ labelPosition="top"
427
+ onChange={[Function]}
428
+ onClear={[Function]}
429
+ onScroll={[Function]}
430
+ placeholder="Search"
431
+ style={
479
432
  Object {
480
- "overflowY": "hidden",
433
+ "width": "210px",
481
434
  }
482
435
  }
483
- placeholder="Category"
484
- placement="bottomLeft"
485
- selectedValue=""
486
- showBadge={true}
487
- width="105px"
488
- />
489
- </div>
490
- <Component />
491
- <Component />
492
- </div>
493
- <div>
494
- <div
495
- className="action-container__create-row"
496
- >
497
- <CapLink
498
- className="create-new-link"
499
- disabled={false}
500
- onClick={[Function]}
501
- suffix={
502
- <CapIcon
503
- size="s"
504
- type="open-in-new"
505
- />
506
- }
507
- title="Create new template"
436
+ value=""
508
437
  />
438
+ <div
439
+ className="whatsapp-filters"
440
+ >
441
+ <CapSelectFilter
442
+ data={
443
+ Array [
444
+ Object {
445
+ "key": "utility",
446
+ "label": <FormattedMessage
447
+ defaultMessage="Utility"
448
+ id="creatives.containersV2.Whatsapp.utility"
449
+ values={Object {}}
450
+ />,
451
+ "tagColor": "#f2e7fe",
452
+ "tagTextColor": "#a451ff",
453
+ "tooltipLabel": <FormattedMessage
454
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
455
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
456
+ values={Object {}}
457
+ />,
458
+ "value": "UTILITY",
459
+ },
460
+ Object {
461
+ "key": "marketing",
462
+ "label": <FormattedMessage
463
+ defaultMessage="Marketing"
464
+ id="creatives.containersV2.Whatsapp.marketing"
465
+ values={Object {}}
466
+ />,
467
+ "tagColor": "#ffe5d2",
468
+ "tagTextColor": "#f87d23",
469
+ "tooltipLabel": <FormattedMessage
470
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
471
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
472
+ values={Object {}}
473
+ />,
474
+ "value": "MARKETING",
475
+ },
476
+ Object {
477
+ "key": "authentication",
478
+ "label": <FormattedMessage
479
+ defaultMessage="Authentication"
480
+ id="creatives.containersV2.Whatsapp.authentication"
481
+ values={Object {}}
482
+ />,
483
+ "tagColor": "#ecf7ec",
484
+ "tagTextColor": "#6bb56b",
485
+ "tooltipLabel": <FormattedMessage
486
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
487
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
488
+ values={Object {}}
489
+ />,
490
+ "value": "AUTHENTICATION",
491
+ },
492
+ ]
493
+ }
494
+ dropdownMaxHeight="320px"
495
+ dropdownWidth="228px"
496
+ onSelect={[Function]}
497
+ overlayStyle={
498
+ Object {
499
+ "overflowY": "hidden",
500
+ }
501
+ }
502
+ placeholder="Category"
503
+ placement="bottomLeft"
504
+ selectedValue=""
505
+ showBadge={true}
506
+ width="105px"
507
+ />
508
+ </div>
509
+ <Component />
510
+ <Component />
511
+ <div
512
+ className="template-listing-header-actions"
513
+ >
514
+ <CapLink
515
+ className="create-new-link"
516
+ disabled={false}
517
+ onClick={[Function]}
518
+ suffix={
519
+ <CapIcon
520
+ size="s"
521
+ type="open-in-new"
522
+ />
523
+ }
524
+ title="Create new template"
525
+ />
526
+ </div>
509
527
  </div>
510
528
  </div>
511
- </div>
529
+ </CapRow>
512
530
  <CapRow
513
531
  align="middle"
514
532
  className="selected-whatsapp-filters"
@@ -642,172 +660,212 @@ exports[`Test Templates container Should render temlates when whatsapp templates
642
660
  }
643
661
  titleClass=""
644
662
  />
645
- <div
646
- className="action-container"
663
+ <CapRow
664
+ align="middle"
665
+ className="filter-row"
666
+ justify="space-between"
667
+ type="flex"
647
668
  >
648
669
  <div
649
- className="action-container__toolbar-row"
670
+ className="filter-row-content"
650
671
  >
651
- <_Class
652
- className="search-text"
653
- disabled={false}
654
- labelPosition="top"
655
- onChange={[Function]}
656
- onClear={[Function]}
657
- onScroll={[Function]}
658
- onSearch={[Function]}
659
- placeholder="Search"
660
- value=""
661
- />
662
672
  <div
663
- className="whatsapp-filters"
673
+ className="action-container"
664
674
  >
665
- <CapSelectFilter
666
- data={
667
- Array [
668
- Object {
669
- "key": "awaitingApproval",
670
- "label": <FormattedMessage
671
- defaultMessage="Awaiting approval"
672
- id="creatives.containersV2.Whatsapp.awaitingApproval"
673
- values={Object {}}
674
- />,
675
- "value": "awaitingApproval",
676
- },
677
- Object {
678
- "key": "approved",
679
- "label": <FormattedMessage
680
- defaultMessage="Approved"
681
- id="creatives.containersV2.Whatsapp.approved"
682
- values={Object {}}
683
- />,
684
- "value": "approved",
685
- },
686
- Object {
687
- "key": "rejected",
688
- "label": <FormattedMessage
689
- defaultMessage="Rejected"
690
- id="creatives.containersV2.Whatsapp.rejected"
691
- values={Object {}}
692
- />,
693
- "value": "rejected",
694
- },
695
- Object {
696
- "key": "pending",
697
- "label": <FormattedMessage
698
- defaultMessage="Pending"
699
- id="creatives.containersV2.Whatsapp.pending"
700
- values={Object {}}
701
- />,
702
- "value": "pending",
703
- },
704
- Object {
705
- "key": "paused",
706
- "label": <FormattedMessage
707
- defaultMessage="Paused"
708
- id="creatives.containersV2.Whatsapp.paused"
709
- values={Object {}}
710
- />,
711
- "value": "paused",
712
- },
713
- ]
714
- }
715
- dropdownMaxHeight="320px"
716
- dropdownWidth="228px"
717
- onSelect={[Function]}
718
- placeholder="Status"
719
- placement="bottomLeft"
720
- selectedValue="approved"
721
- showBadge={true}
722
- width="90px"
723
- />
724
- <CapSelectFilter
725
- data={
726
- Array [
727
- Object {
728
- "key": "utility",
729
- "label": <FormattedMessage
730
- defaultMessage="Utility"
731
- id="creatives.containersV2.Whatsapp.utility"
732
- values={Object {}}
733
- />,
734
- "tagColor": "#f2e7fe",
735
- "tagTextColor": "#a451ff",
736
- "tooltipLabel": <FormattedMessage
737
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
738
- id="creatives.containersV2.Whatsapp.utilityTooltip"
739
- values={Object {}}
740
- />,
741
- "value": "UTILITY",
742
- },
743
- Object {
744
- "key": "marketing",
745
- "label": <FormattedMessage
746
- defaultMessage="Marketing"
747
- id="creatives.containersV2.Whatsapp.marketing"
748
- values={Object {}}
749
- />,
750
- "tagColor": "#ffe5d2",
751
- "tagTextColor": "#f87d23",
752
- "tooltipLabel": <FormattedMessage
753
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
754
- id="creatives.containersV2.Whatsapp.marketingTooltip"
755
- values={Object {}}
756
- />,
757
- "value": "MARKETING",
758
- },
759
- Object {
760
- "key": "authentication",
761
- "label": <FormattedMessage
762
- defaultMessage="Authentication"
763
- id="creatives.containersV2.Whatsapp.authentication"
764
- values={Object {}}
765
- />,
766
- "tagColor": "#ecf7ec",
767
- "tagTextColor": "#6bb56b",
768
- "tooltipLabel": <FormattedMessage
769
- defaultMessage="Send codes that allow your customers to securely access their accounts."
770
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
771
- values={Object {}}
772
- />,
773
- "value": "AUTHENTICATION",
774
- },
775
- ]
776
- }
777
- dropdownMaxHeight="320px"
778
- dropdownWidth="228px"
779
- onSelect={[Function]}
780
- overlayStyle={
675
+ <_Class
676
+ className="search-text"
677
+ disabled={false}
678
+ labelPosition="top"
679
+ onChange={[Function]}
680
+ onClear={[Function]}
681
+ onScroll={[Function]}
682
+ placeholder="Search"
683
+ style={
781
684
  Object {
782
- "overflowY": "hidden",
685
+ "width": "210px",
783
686
  }
784
687
  }
785
- placeholder="Category"
786
- placement="bottomLeft"
787
- selectedValue=""
788
- showBadge={true}
789
- width="105px"
688
+ value=""
790
689
  />
791
- </div>
792
- <Component />
793
- <Component />
794
- </div>
795
- <div>
796
- <div
797
- className="action-container__create-row"
798
- >
799
- <CapButton
800
- className="create-new-whatsapp margin-l-8 margin-b-12"
801
- disabled={false}
802
- isAddBtn={false}
803
- onClick={[Function]}
804
- type="primary"
690
+ <div
691
+ className="whatsapp-filters"
692
+ >
693
+ <CapSelectFilter
694
+ data={
695
+ Array [
696
+ Object {
697
+ "key": "awaitingApproval",
698
+ "label": <FormattedMessage
699
+ defaultMessage="Awaiting approval"
700
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
701
+ values={Object {}}
702
+ />,
703
+ "value": "awaitingApproval",
704
+ },
705
+ Object {
706
+ "key": "approved",
707
+ "label": <FormattedMessage
708
+ defaultMessage="Approved"
709
+ id="creatives.containersV2.Whatsapp.approved"
710
+ values={Object {}}
711
+ />,
712
+ "value": "approved",
713
+ },
714
+ Object {
715
+ "key": "rejected",
716
+ "label": <FormattedMessage
717
+ defaultMessage="Rejected"
718
+ id="creatives.containersV2.Whatsapp.rejected"
719
+ values={Object {}}
720
+ />,
721
+ "value": "rejected",
722
+ },
723
+ Object {
724
+ "key": "pending",
725
+ "label": <FormattedMessage
726
+ defaultMessage="Pending"
727
+ id="creatives.containersV2.Whatsapp.pending"
728
+ values={Object {}}
729
+ />,
730
+ "value": "pending",
731
+ },
732
+ Object {
733
+ "key": "paused",
734
+ "label": <FormattedMessage
735
+ defaultMessage="Paused"
736
+ id="creatives.containersV2.Whatsapp.paused"
737
+ values={Object {}}
738
+ />,
739
+ "value": "paused",
740
+ },
741
+ ]
742
+ }
743
+ dropdownMaxHeight="320px"
744
+ dropdownWidth="228px"
745
+ onSelect={[Function]}
746
+ placeholder="Status"
747
+ placement="bottomLeft"
748
+ selectedValue="approved"
749
+ showBadge={true}
750
+ width="90px"
751
+ />
752
+ <CapSelectFilter
753
+ data={
754
+ Array [
755
+ Object {
756
+ "key": "utility",
757
+ "label": <FormattedMessage
758
+ defaultMessage="Utility"
759
+ id="creatives.containersV2.Whatsapp.utility"
760
+ values={Object {}}
761
+ />,
762
+ "tagColor": "#f2e7fe",
763
+ "tagTextColor": "#a451ff",
764
+ "tooltipLabel": <FormattedMessage
765
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
766
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
767
+ values={Object {}}
768
+ />,
769
+ "value": "UTILITY",
770
+ },
771
+ Object {
772
+ "key": "marketing",
773
+ "label": <FormattedMessage
774
+ defaultMessage="Marketing"
775
+ id="creatives.containersV2.Whatsapp.marketing"
776
+ values={Object {}}
777
+ />,
778
+ "tagColor": "#ffe5d2",
779
+ "tagTextColor": "#f87d23",
780
+ "tooltipLabel": <FormattedMessage
781
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
782
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
783
+ values={Object {}}
784
+ />,
785
+ "value": "MARKETING",
786
+ },
787
+ Object {
788
+ "key": "authentication",
789
+ "label": <FormattedMessage
790
+ defaultMessage="Authentication"
791
+ id="creatives.containersV2.Whatsapp.authentication"
792
+ values={Object {}}
793
+ />,
794
+ "tagColor": "#ecf7ec",
795
+ "tagTextColor": "#6bb56b",
796
+ "tooltipLabel": <FormattedMessage
797
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
798
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
799
+ values={Object {}}
800
+ />,
801
+ "value": "AUTHENTICATION",
802
+ },
803
+ ]
804
+ }
805
+ dropdownMaxHeight="320px"
806
+ dropdownWidth="228px"
807
+ onSelect={[Function]}
808
+ overlayStyle={
809
+ Object {
810
+ "overflowY": "hidden",
811
+ }
812
+ }
813
+ placeholder="Category"
814
+ placement="bottomLeft"
815
+ selectedValue=""
816
+ showBadge={true}
817
+ width="105px"
818
+ />
819
+ </div>
820
+ <Component />
821
+ <Component />
822
+ <div
823
+ className="template-listing-header-actions"
805
824
  >
806
- Create new
807
- </CapButton>
825
+ <CapButton
826
+ className="create-new-whatsapp margin-l-8 margin-b-12"
827
+ disabled={false}
828
+ isAddBtn={false}
829
+ onClick={[Function]}
830
+ type="primary"
831
+ >
832
+ Create new
833
+ </CapButton>
834
+ <CapDropdown
835
+ overlay={
836
+ <CapMenu>
837
+ <withItemHOC
838
+ onClick={[Function]}
839
+ >
840
+ <FormattedMessage
841
+ defaultMessage="Archived templates"
842
+ id="creatives.containersV2.Templates.archivedTemplates"
843
+ values={Object {}}
844
+ />
845
+ </withItemHOC>
846
+ </CapMenu>
847
+ }
848
+ placement="bottomRight"
849
+ trigger={
850
+ Array [
851
+ "click",
852
+ ]
853
+ }
854
+ >
855
+ <CapButton
856
+ className="template-listing-more-btn"
857
+ isAddBtn={false}
858
+ type="flat"
859
+ >
860
+ <CapIcon
861
+ type="more"
862
+ />
863
+ </CapButton>
864
+ </CapDropdown>
865
+ </div>
808
866
  </div>
809
867
  </div>
810
- </div>
868
+ </CapRow>
811
869
  <CapRow
812
870
  align="middle"
813
871
  className="selected-whatsapp-filters"
@@ -1053,172 +1111,212 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
1053
1111
  }
1054
1112
  titleClass=""
1055
1113
  />
1056
- <div
1057
- className="action-container"
1114
+ <CapRow
1115
+ align="middle"
1116
+ className="filter-row"
1117
+ justify="space-between"
1118
+ type="flex"
1058
1119
  >
1059
1120
  <div
1060
- className="action-container__toolbar-row"
1121
+ className="filter-row-content"
1061
1122
  >
1062
- <_Class
1063
- className="search-text"
1064
- disabled={false}
1065
- labelPosition="top"
1066
- onChange={[Function]}
1067
- onClear={[Function]}
1068
- onScroll={[Function]}
1069
- onSearch={[Function]}
1070
- placeholder="Search"
1071
- value=""
1072
- />
1073
1123
  <div
1074
- className="whatsapp-filters"
1124
+ className="action-container"
1075
1125
  >
1076
- <CapSelectFilter
1077
- data={
1078
- Array [
1079
- Object {
1080
- "key": "awaitingApproval",
1081
- "label": <FormattedMessage
1082
- defaultMessage="Awaiting approval"
1083
- id="creatives.containersV2.Whatsapp.awaitingApproval"
1084
- values={Object {}}
1085
- />,
1086
- "value": "awaitingApproval",
1087
- },
1088
- Object {
1089
- "key": "approved",
1090
- "label": <FormattedMessage
1091
- defaultMessage="Approved"
1092
- id="creatives.containersV2.Whatsapp.approved"
1093
- values={Object {}}
1094
- />,
1095
- "value": "approved",
1096
- },
1097
- Object {
1098
- "key": "rejected",
1099
- "label": <FormattedMessage
1100
- defaultMessage="Rejected"
1101
- id="creatives.containersV2.Whatsapp.rejected"
1102
- values={Object {}}
1103
- />,
1104
- "value": "rejected",
1105
- },
1106
- Object {
1107
- "key": "pending",
1108
- "label": <FormattedMessage
1109
- defaultMessage="Pending"
1110
- id="creatives.containersV2.Whatsapp.pending"
1111
- values={Object {}}
1112
- />,
1113
- "value": "pending",
1114
- },
1115
- Object {
1116
- "key": "paused",
1117
- "label": <FormattedMessage
1118
- defaultMessage="Paused"
1119
- id="creatives.containersV2.Whatsapp.paused"
1120
- values={Object {}}
1121
- />,
1122
- "value": "paused",
1123
- },
1124
- ]
1125
- }
1126
- dropdownMaxHeight="320px"
1127
- dropdownWidth="228px"
1128
- onSelect={[Function]}
1129
- placeholder="Status"
1130
- placement="bottomLeft"
1131
- selectedValue=""
1132
- showBadge={true}
1133
- width="90px"
1134
- />
1135
- <CapSelectFilter
1136
- data={
1137
- Array [
1138
- Object {
1139
- "key": "utility",
1140
- "label": <FormattedMessage
1141
- defaultMessage="Utility"
1142
- id="creatives.containersV2.Whatsapp.utility"
1143
- values={Object {}}
1144
- />,
1145
- "tagColor": "#f2e7fe",
1146
- "tagTextColor": "#a451ff",
1147
- "tooltipLabel": <FormattedMessage
1148
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1149
- id="creatives.containersV2.Whatsapp.utilityTooltip"
1150
- values={Object {}}
1151
- />,
1152
- "value": "UTILITY",
1153
- },
1154
- Object {
1155
- "key": "marketing",
1156
- "label": <FormattedMessage
1157
- defaultMessage="Marketing"
1158
- id="creatives.containersV2.Whatsapp.marketing"
1159
- values={Object {}}
1160
- />,
1161
- "tagColor": "#ffe5d2",
1162
- "tagTextColor": "#f87d23",
1163
- "tooltipLabel": <FormattedMessage
1164
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1165
- id="creatives.containersV2.Whatsapp.marketingTooltip"
1166
- values={Object {}}
1167
- />,
1168
- "value": "MARKETING",
1169
- },
1170
- Object {
1171
- "key": "authentication",
1172
- "label": <FormattedMessage
1173
- defaultMessage="Authentication"
1174
- id="creatives.containersV2.Whatsapp.authentication"
1175
- values={Object {}}
1176
- />,
1177
- "tagColor": "#ecf7ec",
1178
- "tagTextColor": "#6bb56b",
1179
- "tooltipLabel": <FormattedMessage
1180
- defaultMessage="Send codes that allow your customers to securely access their accounts."
1181
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
1182
- values={Object {}}
1183
- />,
1184
- "value": "AUTHENTICATION",
1185
- },
1186
- ]
1187
- }
1188
- dropdownMaxHeight="320px"
1189
- dropdownWidth="228px"
1190
- onSelect={[Function]}
1191
- overlayStyle={
1126
+ <_Class
1127
+ className="search-text"
1128
+ disabled={false}
1129
+ labelPosition="top"
1130
+ onChange={[Function]}
1131
+ onClear={[Function]}
1132
+ onScroll={[Function]}
1133
+ placeholder="Search"
1134
+ style={
1192
1135
  Object {
1193
- "overflowY": "hidden",
1136
+ "width": "210px",
1194
1137
  }
1195
1138
  }
1196
- placeholder="Category"
1197
- placement="bottomLeft"
1198
- selectedValue=""
1199
- showBadge={true}
1200
- width="105px"
1139
+ value=""
1201
1140
  />
1202
- </div>
1203
- <Component />
1204
- <Component />
1205
- </div>
1206
- <div>
1207
- <div
1208
- className="action-container__create-row"
1209
- >
1210
- <CapButton
1211
- className="create-new-whatsapp margin-l-8 margin-b-12"
1212
- disabled={false}
1213
- isAddBtn={false}
1214
- onClick={[Function]}
1215
- type="primary"
1141
+ <div
1142
+ className="whatsapp-filters"
1143
+ >
1144
+ <CapSelectFilter
1145
+ data={
1146
+ Array [
1147
+ Object {
1148
+ "key": "awaitingApproval",
1149
+ "label": <FormattedMessage
1150
+ defaultMessage="Awaiting approval"
1151
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
1152
+ values={Object {}}
1153
+ />,
1154
+ "value": "awaitingApproval",
1155
+ },
1156
+ Object {
1157
+ "key": "approved",
1158
+ "label": <FormattedMessage
1159
+ defaultMessage="Approved"
1160
+ id="creatives.containersV2.Whatsapp.approved"
1161
+ values={Object {}}
1162
+ />,
1163
+ "value": "approved",
1164
+ },
1165
+ Object {
1166
+ "key": "rejected",
1167
+ "label": <FormattedMessage
1168
+ defaultMessage="Rejected"
1169
+ id="creatives.containersV2.Whatsapp.rejected"
1170
+ values={Object {}}
1171
+ />,
1172
+ "value": "rejected",
1173
+ },
1174
+ Object {
1175
+ "key": "pending",
1176
+ "label": <FormattedMessage
1177
+ defaultMessage="Pending"
1178
+ id="creatives.containersV2.Whatsapp.pending"
1179
+ values={Object {}}
1180
+ />,
1181
+ "value": "pending",
1182
+ },
1183
+ Object {
1184
+ "key": "paused",
1185
+ "label": <FormattedMessage
1186
+ defaultMessage="Paused"
1187
+ id="creatives.containersV2.Whatsapp.paused"
1188
+ values={Object {}}
1189
+ />,
1190
+ "value": "paused",
1191
+ },
1192
+ ]
1193
+ }
1194
+ dropdownMaxHeight="320px"
1195
+ dropdownWidth="228px"
1196
+ onSelect={[Function]}
1197
+ placeholder="Status"
1198
+ placement="bottomLeft"
1199
+ selectedValue=""
1200
+ showBadge={true}
1201
+ width="90px"
1202
+ />
1203
+ <CapSelectFilter
1204
+ data={
1205
+ Array [
1206
+ Object {
1207
+ "key": "utility",
1208
+ "label": <FormattedMessage
1209
+ defaultMessage="Utility"
1210
+ id="creatives.containersV2.Whatsapp.utility"
1211
+ values={Object {}}
1212
+ />,
1213
+ "tagColor": "#f2e7fe",
1214
+ "tagTextColor": "#a451ff",
1215
+ "tooltipLabel": <FormattedMessage
1216
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1217
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1218
+ values={Object {}}
1219
+ />,
1220
+ "value": "UTILITY",
1221
+ },
1222
+ Object {
1223
+ "key": "marketing",
1224
+ "label": <FormattedMessage
1225
+ defaultMessage="Marketing"
1226
+ id="creatives.containersV2.Whatsapp.marketing"
1227
+ values={Object {}}
1228
+ />,
1229
+ "tagColor": "#ffe5d2",
1230
+ "tagTextColor": "#f87d23",
1231
+ "tooltipLabel": <FormattedMessage
1232
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1233
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
1234
+ values={Object {}}
1235
+ />,
1236
+ "value": "MARKETING",
1237
+ },
1238
+ Object {
1239
+ "key": "authentication",
1240
+ "label": <FormattedMessage
1241
+ defaultMessage="Authentication"
1242
+ id="creatives.containersV2.Whatsapp.authentication"
1243
+ values={Object {}}
1244
+ />,
1245
+ "tagColor": "#ecf7ec",
1246
+ "tagTextColor": "#6bb56b",
1247
+ "tooltipLabel": <FormattedMessage
1248
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
1249
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1250
+ values={Object {}}
1251
+ />,
1252
+ "value": "AUTHENTICATION",
1253
+ },
1254
+ ]
1255
+ }
1256
+ dropdownMaxHeight="320px"
1257
+ dropdownWidth="228px"
1258
+ onSelect={[Function]}
1259
+ overlayStyle={
1260
+ Object {
1261
+ "overflowY": "hidden",
1262
+ }
1263
+ }
1264
+ placeholder="Category"
1265
+ placement="bottomLeft"
1266
+ selectedValue=""
1267
+ showBadge={true}
1268
+ width="105px"
1269
+ />
1270
+ </div>
1271
+ <Component />
1272
+ <Component />
1273
+ <div
1274
+ className="template-listing-header-actions"
1216
1275
  >
1217
- Create new
1218
- </CapButton>
1276
+ <CapButton
1277
+ className="create-new-whatsapp margin-l-8 margin-b-12"
1278
+ disabled={false}
1279
+ isAddBtn={false}
1280
+ onClick={[Function]}
1281
+ type="primary"
1282
+ >
1283
+ Create new
1284
+ </CapButton>
1285
+ <CapDropdown
1286
+ overlay={
1287
+ <CapMenu>
1288
+ <withItemHOC
1289
+ onClick={[Function]}
1290
+ >
1291
+ <FormattedMessage
1292
+ defaultMessage="Archived templates"
1293
+ id="creatives.containersV2.Templates.archivedTemplates"
1294
+ values={Object {}}
1295
+ />
1296
+ </withItemHOC>
1297
+ </CapMenu>
1298
+ }
1299
+ placement="bottomRight"
1300
+ trigger={
1301
+ Array [
1302
+ "click",
1303
+ ]
1304
+ }
1305
+ >
1306
+ <CapButton
1307
+ className="template-listing-more-btn"
1308
+ isAddBtn={false}
1309
+ type="flat"
1310
+ >
1311
+ <CapIcon
1312
+ type="more"
1313
+ />
1314
+ </CapButton>
1315
+ </CapDropdown>
1316
+ </div>
1219
1317
  </div>
1220
1318
  </div>
1221
- </div>
1319
+ </CapRow>
1222
1320
  <CapRow
1223
1321
  align="middle"
1224
1322
  className="selected-whatsapp-filters"
@@ -1335,7 +1433,10 @@ Click {{unsubscribe}} to unsubscribe
1335
1433
  Overview
1336
1434
  </CapButton>,
1337
1435
  "key": "WHATSAPP-card-creatives_whatsapp6",
1338
- "title": <CapRow>
1436
+ "title": <CapRow
1437
+ align="middle"
1438
+ type="flex"
1439
+ >
1339
1440
  <CapLabel
1340
1441
  className="whatsapp-rcs-template-name"
1341
1442
  type="label1"
@@ -1514,172 +1615,212 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
1514
1615
  }
1515
1616
  titleClass=""
1516
1617
  />
1517
- <div
1518
- className="action-container"
1618
+ <CapRow
1619
+ align="middle"
1620
+ className="filter-row"
1621
+ justify="space-between"
1622
+ type="flex"
1519
1623
  >
1520
1624
  <div
1521
- className="action-container__toolbar-row"
1625
+ className="filter-row-content"
1522
1626
  >
1523
- <_Class
1524
- className="search-text"
1525
- disabled={false}
1526
- labelPosition="top"
1527
- onChange={[Function]}
1528
- onClear={[Function]}
1529
- onScroll={[Function]}
1530
- onSearch={[Function]}
1531
- placeholder="Search"
1532
- value=""
1533
- />
1534
1627
  <div
1535
- className="whatsapp-filters"
1628
+ className="action-container"
1536
1629
  >
1537
- <CapSelectFilter
1538
- data={
1539
- Array [
1540
- Object {
1541
- "key": "awaitingApproval",
1542
- "label": <FormattedMessage
1543
- defaultMessage="Awaiting approval"
1544
- id="creatives.containersV2.Whatsapp.awaitingApproval"
1545
- values={Object {}}
1546
- />,
1547
- "value": "awaitingApproval",
1548
- },
1549
- Object {
1550
- "key": "approved",
1551
- "label": <FormattedMessage
1552
- defaultMessage="Approved"
1553
- id="creatives.containersV2.Whatsapp.approved"
1554
- values={Object {}}
1555
- />,
1556
- "value": "approved",
1557
- },
1558
- Object {
1559
- "key": "rejected",
1560
- "label": <FormattedMessage
1561
- defaultMessage="Rejected"
1562
- id="creatives.containersV2.Whatsapp.rejected"
1563
- values={Object {}}
1564
- />,
1565
- "value": "rejected",
1566
- },
1567
- Object {
1568
- "key": "pending",
1569
- "label": <FormattedMessage
1570
- defaultMessage="Pending"
1571
- id="creatives.containersV2.Whatsapp.pending"
1572
- values={Object {}}
1573
- />,
1574
- "value": "pending",
1575
- },
1576
- Object {
1577
- "key": "paused",
1578
- "label": <FormattedMessage
1579
- defaultMessage="Paused"
1580
- id="creatives.containersV2.Whatsapp.paused"
1581
- values={Object {}}
1582
- />,
1583
- "value": "paused",
1584
- },
1585
- ]
1586
- }
1587
- dropdownMaxHeight="320px"
1588
- dropdownWidth="228px"
1589
- onSelect={[Function]}
1590
- placeholder="Status"
1591
- placement="bottomLeft"
1592
- selectedValue=""
1593
- showBadge={true}
1594
- width="90px"
1595
- />
1596
- <CapSelectFilter
1597
- data={
1598
- Array [
1599
- Object {
1600
- "key": "utility",
1601
- "label": <FormattedMessage
1602
- defaultMessage="Utility"
1603
- id="creatives.containersV2.Whatsapp.utility"
1604
- values={Object {}}
1605
- />,
1606
- "tagColor": "#f2e7fe",
1607
- "tagTextColor": "#a451ff",
1608
- "tooltipLabel": <FormattedMessage
1609
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1610
- id="creatives.containersV2.Whatsapp.utilityTooltip"
1611
- values={Object {}}
1612
- />,
1613
- "value": "UTILITY",
1614
- },
1615
- Object {
1616
- "key": "marketing",
1617
- "label": <FormattedMessage
1618
- defaultMessage="Marketing"
1619
- id="creatives.containersV2.Whatsapp.marketing"
1620
- values={Object {}}
1621
- />,
1622
- "tagColor": "#ffe5d2",
1623
- "tagTextColor": "#f87d23",
1624
- "tooltipLabel": <FormattedMessage
1625
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1626
- id="creatives.containersV2.Whatsapp.marketingTooltip"
1627
- values={Object {}}
1628
- />,
1629
- "value": "MARKETING",
1630
- },
1631
- Object {
1632
- "key": "authentication",
1633
- "label": <FormattedMessage
1634
- defaultMessage="Authentication"
1635
- id="creatives.containersV2.Whatsapp.authentication"
1636
- values={Object {}}
1637
- />,
1638
- "tagColor": "#ecf7ec",
1639
- "tagTextColor": "#6bb56b",
1640
- "tooltipLabel": <FormattedMessage
1641
- defaultMessage="Send codes that allow your customers to securely access their accounts."
1642
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
1643
- values={Object {}}
1644
- />,
1645
- "value": "AUTHENTICATION",
1646
- },
1647
- ]
1648
- }
1649
- dropdownMaxHeight="320px"
1650
- dropdownWidth="228px"
1651
- onSelect={[Function]}
1652
- overlayStyle={
1630
+ <_Class
1631
+ className="search-text"
1632
+ disabled={false}
1633
+ labelPosition="top"
1634
+ onChange={[Function]}
1635
+ onClear={[Function]}
1636
+ onScroll={[Function]}
1637
+ placeholder="Search"
1638
+ style={
1653
1639
  Object {
1654
- "overflowY": "hidden",
1640
+ "width": "210px",
1655
1641
  }
1656
1642
  }
1657
- placeholder="Category"
1658
- placement="bottomLeft"
1659
- selectedValue=""
1660
- showBadge={true}
1661
- width="105px"
1643
+ value=""
1662
1644
  />
1663
- </div>
1664
- <Component />
1665
- <Component />
1666
- </div>
1667
- <div>
1668
- <div
1669
- className="action-container__create-row"
1670
- >
1671
- <CapButton
1672
- className="create-new-whatsapp margin-l-8 margin-b-12"
1673
- disabled={false}
1674
- isAddBtn={false}
1675
- onClick={[Function]}
1676
- type="primary"
1645
+ <div
1646
+ className="whatsapp-filters"
1647
+ >
1648
+ <CapSelectFilter
1649
+ data={
1650
+ Array [
1651
+ Object {
1652
+ "key": "awaitingApproval",
1653
+ "label": <FormattedMessage
1654
+ defaultMessage="Awaiting approval"
1655
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
1656
+ values={Object {}}
1657
+ />,
1658
+ "value": "awaitingApproval",
1659
+ },
1660
+ Object {
1661
+ "key": "approved",
1662
+ "label": <FormattedMessage
1663
+ defaultMessage="Approved"
1664
+ id="creatives.containersV2.Whatsapp.approved"
1665
+ values={Object {}}
1666
+ />,
1667
+ "value": "approved",
1668
+ },
1669
+ Object {
1670
+ "key": "rejected",
1671
+ "label": <FormattedMessage
1672
+ defaultMessage="Rejected"
1673
+ id="creatives.containersV2.Whatsapp.rejected"
1674
+ values={Object {}}
1675
+ />,
1676
+ "value": "rejected",
1677
+ },
1678
+ Object {
1679
+ "key": "pending",
1680
+ "label": <FormattedMessage
1681
+ defaultMessage="Pending"
1682
+ id="creatives.containersV2.Whatsapp.pending"
1683
+ values={Object {}}
1684
+ />,
1685
+ "value": "pending",
1686
+ },
1687
+ Object {
1688
+ "key": "paused",
1689
+ "label": <FormattedMessage
1690
+ defaultMessage="Paused"
1691
+ id="creatives.containersV2.Whatsapp.paused"
1692
+ values={Object {}}
1693
+ />,
1694
+ "value": "paused",
1695
+ },
1696
+ ]
1697
+ }
1698
+ dropdownMaxHeight="320px"
1699
+ dropdownWidth="228px"
1700
+ onSelect={[Function]}
1701
+ placeholder="Status"
1702
+ placement="bottomLeft"
1703
+ selectedValue=""
1704
+ showBadge={true}
1705
+ width="90px"
1706
+ />
1707
+ <CapSelectFilter
1708
+ data={
1709
+ Array [
1710
+ Object {
1711
+ "key": "utility",
1712
+ "label": <FormattedMessage
1713
+ defaultMessage="Utility"
1714
+ id="creatives.containersV2.Whatsapp.utility"
1715
+ values={Object {}}
1716
+ />,
1717
+ "tagColor": "#f2e7fe",
1718
+ "tagTextColor": "#a451ff",
1719
+ "tooltipLabel": <FormattedMessage
1720
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1721
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1722
+ values={Object {}}
1723
+ />,
1724
+ "value": "UTILITY",
1725
+ },
1726
+ Object {
1727
+ "key": "marketing",
1728
+ "label": <FormattedMessage
1729
+ defaultMessage="Marketing"
1730
+ id="creatives.containersV2.Whatsapp.marketing"
1731
+ values={Object {}}
1732
+ />,
1733
+ "tagColor": "#ffe5d2",
1734
+ "tagTextColor": "#f87d23",
1735
+ "tooltipLabel": <FormattedMessage
1736
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1737
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
1738
+ values={Object {}}
1739
+ />,
1740
+ "value": "MARKETING",
1741
+ },
1742
+ Object {
1743
+ "key": "authentication",
1744
+ "label": <FormattedMessage
1745
+ defaultMessage="Authentication"
1746
+ id="creatives.containersV2.Whatsapp.authentication"
1747
+ values={Object {}}
1748
+ />,
1749
+ "tagColor": "#ecf7ec",
1750
+ "tagTextColor": "#6bb56b",
1751
+ "tooltipLabel": <FormattedMessage
1752
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
1753
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1754
+ values={Object {}}
1755
+ />,
1756
+ "value": "AUTHENTICATION",
1757
+ },
1758
+ ]
1759
+ }
1760
+ dropdownMaxHeight="320px"
1761
+ dropdownWidth="228px"
1762
+ onSelect={[Function]}
1763
+ overlayStyle={
1764
+ Object {
1765
+ "overflowY": "hidden",
1766
+ }
1767
+ }
1768
+ placeholder="Category"
1769
+ placement="bottomLeft"
1770
+ selectedValue=""
1771
+ showBadge={true}
1772
+ width="105px"
1773
+ />
1774
+ </div>
1775
+ <Component />
1776
+ <Component />
1777
+ <div
1778
+ className="template-listing-header-actions"
1677
1779
  >
1678
- Create new
1679
- </CapButton>
1780
+ <CapButton
1781
+ className="create-new-whatsapp margin-l-8 margin-b-12"
1782
+ disabled={false}
1783
+ isAddBtn={false}
1784
+ onClick={[Function]}
1785
+ type="primary"
1786
+ >
1787
+ Create new
1788
+ </CapButton>
1789
+ <CapDropdown
1790
+ overlay={
1791
+ <CapMenu>
1792
+ <withItemHOC
1793
+ onClick={[Function]}
1794
+ >
1795
+ <FormattedMessage
1796
+ defaultMessage="Archived templates"
1797
+ id="creatives.containersV2.Templates.archivedTemplates"
1798
+ values={Object {}}
1799
+ />
1800
+ </withItemHOC>
1801
+ </CapMenu>
1802
+ }
1803
+ placement="bottomRight"
1804
+ trigger={
1805
+ Array [
1806
+ "click",
1807
+ ]
1808
+ }
1809
+ >
1810
+ <CapButton
1811
+ className="template-listing-more-btn"
1812
+ isAddBtn={false}
1813
+ type="flat"
1814
+ >
1815
+ <CapIcon
1816
+ type="more"
1817
+ />
1818
+ </CapButton>
1819
+ </CapDropdown>
1820
+ </div>
1680
1821
  </div>
1681
1822
  </div>
1682
- </div>
1823
+ </CapRow>
1683
1824
  <CapRow
1684
1825
  align="middle"
1685
1826
  className="selected-whatsapp-filters"
@@ -1796,7 +1937,10 @@ Click {{unsubscribe}} to unsubscribe
1796
1937
  Overview
1797
1938
  </CapButton>,
1798
1939
  "key": "WHATSAPP-card-creatives_whatsapp6",
1799
- "title": <CapRow>
1940
+ "title": <CapRow
1941
+ align="middle"
1942
+ type="flex"
1943
+ >
1800
1944
  <CapLabel
1801
1945
  className="whatsapp-rcs-template-name"
1802
1946
  type="label1"
@@ -1975,172 +2119,212 @@ exports[`Test Templates container Test max templates warning 1`] = `
1975
2119
  }
1976
2120
  titleClass=""
1977
2121
  />
1978
- <div
1979
- className="action-container"
2122
+ <CapRow
2123
+ align="middle"
2124
+ className="filter-row"
2125
+ justify="space-between"
2126
+ type="flex"
1980
2127
  >
1981
2128
  <div
1982
- className="action-container__toolbar-row"
2129
+ className="filter-row-content"
1983
2130
  >
1984
- <_Class
1985
- className="search-text"
1986
- disabled={false}
1987
- labelPosition="top"
1988
- onChange={[Function]}
1989
- onClear={[Function]}
1990
- onScroll={[Function]}
1991
- onSearch={[Function]}
1992
- placeholder="Search"
1993
- value=""
1994
- />
1995
2131
  <div
1996
- className="whatsapp-filters"
2132
+ className="action-container"
1997
2133
  >
1998
- <CapSelectFilter
1999
- data={
2000
- Array [
2001
- Object {
2002
- "key": "awaitingApproval",
2003
- "label": <FormattedMessage
2004
- defaultMessage="Awaiting approval"
2005
- id="creatives.containersV2.Whatsapp.awaitingApproval"
2006
- values={Object {}}
2007
- />,
2008
- "value": "awaitingApproval",
2009
- },
2010
- Object {
2011
- "key": "approved",
2012
- "label": <FormattedMessage
2013
- defaultMessage="Approved"
2014
- id="creatives.containersV2.Whatsapp.approved"
2015
- values={Object {}}
2016
- />,
2017
- "value": "approved",
2018
- },
2019
- Object {
2020
- "key": "rejected",
2021
- "label": <FormattedMessage
2022
- defaultMessage="Rejected"
2023
- id="creatives.containersV2.Whatsapp.rejected"
2024
- values={Object {}}
2025
- />,
2026
- "value": "rejected",
2027
- },
2028
- Object {
2029
- "key": "pending",
2030
- "label": <FormattedMessage
2031
- defaultMessage="Pending"
2032
- id="creatives.containersV2.Whatsapp.pending"
2033
- values={Object {}}
2034
- />,
2035
- "value": "pending",
2036
- },
2037
- Object {
2038
- "key": "paused",
2039
- "label": <FormattedMessage
2040
- defaultMessage="Paused"
2041
- id="creatives.containersV2.Whatsapp.paused"
2042
- values={Object {}}
2043
- />,
2044
- "value": "paused",
2045
- },
2046
- ]
2047
- }
2048
- dropdownMaxHeight="320px"
2049
- dropdownWidth="228px"
2050
- onSelect={[Function]}
2051
- placeholder="Status"
2052
- placement="bottomLeft"
2053
- selectedValue=""
2054
- showBadge={true}
2055
- width="90px"
2056
- />
2057
- <CapSelectFilter
2058
- data={
2059
- Array [
2060
- Object {
2061
- "key": "utility",
2062
- "label": <FormattedMessage
2063
- defaultMessage="Utility"
2064
- id="creatives.containersV2.Whatsapp.utility"
2065
- values={Object {}}
2066
- />,
2067
- "tagColor": "#f2e7fe",
2068
- "tagTextColor": "#a451ff",
2069
- "tooltipLabel": <FormattedMessage
2070
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2071
- id="creatives.containersV2.Whatsapp.utilityTooltip"
2072
- values={Object {}}
2073
- />,
2074
- "value": "UTILITY",
2075
- },
2076
- Object {
2077
- "key": "marketing",
2078
- "label": <FormattedMessage
2079
- defaultMessage="Marketing"
2080
- id="creatives.containersV2.Whatsapp.marketing"
2081
- values={Object {}}
2082
- />,
2083
- "tagColor": "#ffe5d2",
2084
- "tagTextColor": "#f87d23",
2085
- "tooltipLabel": <FormattedMessage
2086
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2087
- id="creatives.containersV2.Whatsapp.marketingTooltip"
2088
- values={Object {}}
2089
- />,
2090
- "value": "MARKETING",
2091
- },
2092
- Object {
2093
- "key": "authentication",
2094
- "label": <FormattedMessage
2095
- defaultMessage="Authentication"
2096
- id="creatives.containersV2.Whatsapp.authentication"
2097
- values={Object {}}
2098
- />,
2099
- "tagColor": "#ecf7ec",
2100
- "tagTextColor": "#6bb56b",
2101
- "tooltipLabel": <FormattedMessage
2102
- defaultMessage="Send codes that allow your customers to securely access their accounts."
2103
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
2104
- values={Object {}}
2105
- />,
2106
- "value": "AUTHENTICATION",
2107
- },
2108
- ]
2109
- }
2110
- dropdownMaxHeight="320px"
2111
- dropdownWidth="228px"
2112
- onSelect={[Function]}
2113
- overlayStyle={
2134
+ <_Class
2135
+ className="search-text"
2136
+ disabled={false}
2137
+ labelPosition="top"
2138
+ onChange={[Function]}
2139
+ onClear={[Function]}
2140
+ onScroll={[Function]}
2141
+ placeholder="Search"
2142
+ style={
2114
2143
  Object {
2115
- "overflowY": "hidden",
2144
+ "width": "210px",
2116
2145
  }
2117
2146
  }
2118
- placeholder="Category"
2119
- placement="bottomLeft"
2120
- selectedValue=""
2121
- showBadge={true}
2122
- width="105px"
2147
+ value=""
2123
2148
  />
2124
- </div>
2125
- <Component />
2126
- <Component />
2127
- </div>
2128
- <div>
2129
- <div
2130
- className="action-container__create-row"
2131
- >
2132
- <CapButton
2133
- className="create-new-whatsapp margin-l-8 margin-b-12"
2134
- disabled={false}
2135
- isAddBtn={false}
2136
- onClick={[Function]}
2137
- type="primary"
2149
+ <div
2150
+ className="whatsapp-filters"
2151
+ >
2152
+ <CapSelectFilter
2153
+ data={
2154
+ Array [
2155
+ Object {
2156
+ "key": "awaitingApproval",
2157
+ "label": <FormattedMessage
2158
+ defaultMessage="Awaiting approval"
2159
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
2160
+ values={Object {}}
2161
+ />,
2162
+ "value": "awaitingApproval",
2163
+ },
2164
+ Object {
2165
+ "key": "approved",
2166
+ "label": <FormattedMessage
2167
+ defaultMessage="Approved"
2168
+ id="creatives.containersV2.Whatsapp.approved"
2169
+ values={Object {}}
2170
+ />,
2171
+ "value": "approved",
2172
+ },
2173
+ Object {
2174
+ "key": "rejected",
2175
+ "label": <FormattedMessage
2176
+ defaultMessage="Rejected"
2177
+ id="creatives.containersV2.Whatsapp.rejected"
2178
+ values={Object {}}
2179
+ />,
2180
+ "value": "rejected",
2181
+ },
2182
+ Object {
2183
+ "key": "pending",
2184
+ "label": <FormattedMessage
2185
+ defaultMessage="Pending"
2186
+ id="creatives.containersV2.Whatsapp.pending"
2187
+ values={Object {}}
2188
+ />,
2189
+ "value": "pending",
2190
+ },
2191
+ Object {
2192
+ "key": "paused",
2193
+ "label": <FormattedMessage
2194
+ defaultMessage="Paused"
2195
+ id="creatives.containersV2.Whatsapp.paused"
2196
+ values={Object {}}
2197
+ />,
2198
+ "value": "paused",
2199
+ },
2200
+ ]
2201
+ }
2202
+ dropdownMaxHeight="320px"
2203
+ dropdownWidth="228px"
2204
+ onSelect={[Function]}
2205
+ placeholder="Status"
2206
+ placement="bottomLeft"
2207
+ selectedValue=""
2208
+ showBadge={true}
2209
+ width="90px"
2210
+ />
2211
+ <CapSelectFilter
2212
+ data={
2213
+ Array [
2214
+ Object {
2215
+ "key": "utility",
2216
+ "label": <FormattedMessage
2217
+ defaultMessage="Utility"
2218
+ id="creatives.containersV2.Whatsapp.utility"
2219
+ values={Object {}}
2220
+ />,
2221
+ "tagColor": "#f2e7fe",
2222
+ "tagTextColor": "#a451ff",
2223
+ "tooltipLabel": <FormattedMessage
2224
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2225
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2226
+ values={Object {}}
2227
+ />,
2228
+ "value": "UTILITY",
2229
+ },
2230
+ Object {
2231
+ "key": "marketing",
2232
+ "label": <FormattedMessage
2233
+ defaultMessage="Marketing"
2234
+ id="creatives.containersV2.Whatsapp.marketing"
2235
+ values={Object {}}
2236
+ />,
2237
+ "tagColor": "#ffe5d2",
2238
+ "tagTextColor": "#f87d23",
2239
+ "tooltipLabel": <FormattedMessage
2240
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2241
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2242
+ values={Object {}}
2243
+ />,
2244
+ "value": "MARKETING",
2245
+ },
2246
+ Object {
2247
+ "key": "authentication",
2248
+ "label": <FormattedMessage
2249
+ defaultMessage="Authentication"
2250
+ id="creatives.containersV2.Whatsapp.authentication"
2251
+ values={Object {}}
2252
+ />,
2253
+ "tagColor": "#ecf7ec",
2254
+ "tagTextColor": "#6bb56b",
2255
+ "tooltipLabel": <FormattedMessage
2256
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2257
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2258
+ values={Object {}}
2259
+ />,
2260
+ "value": "AUTHENTICATION",
2261
+ },
2262
+ ]
2263
+ }
2264
+ dropdownMaxHeight="320px"
2265
+ dropdownWidth="228px"
2266
+ onSelect={[Function]}
2267
+ overlayStyle={
2268
+ Object {
2269
+ "overflowY": "hidden",
2270
+ }
2271
+ }
2272
+ placeholder="Category"
2273
+ placement="bottomLeft"
2274
+ selectedValue=""
2275
+ showBadge={true}
2276
+ width="105px"
2277
+ />
2278
+ </div>
2279
+ <Component />
2280
+ <Component />
2281
+ <div
2282
+ className="template-listing-header-actions"
2138
2283
  >
2139
- Create new
2140
- </CapButton>
2284
+ <CapButton
2285
+ className="create-new-whatsapp margin-l-8 margin-b-12"
2286
+ disabled={false}
2287
+ isAddBtn={false}
2288
+ onClick={[Function]}
2289
+ type="primary"
2290
+ >
2291
+ Create new
2292
+ </CapButton>
2293
+ <CapDropdown
2294
+ overlay={
2295
+ <CapMenu>
2296
+ <withItemHOC
2297
+ onClick={[Function]}
2298
+ >
2299
+ <FormattedMessage
2300
+ defaultMessage="Archived templates"
2301
+ id="creatives.containersV2.Templates.archivedTemplates"
2302
+ values={Object {}}
2303
+ />
2304
+ </withItemHOC>
2305
+ </CapMenu>
2306
+ }
2307
+ placement="bottomRight"
2308
+ trigger={
2309
+ Array [
2310
+ "click",
2311
+ ]
2312
+ }
2313
+ >
2314
+ <CapButton
2315
+ className="template-listing-more-btn"
2316
+ isAddBtn={false}
2317
+ type="flat"
2318
+ >
2319
+ <CapIcon
2320
+ type="more"
2321
+ />
2322
+ </CapButton>
2323
+ </CapDropdown>
2324
+ </div>
2141
2325
  </div>
2142
2326
  </div>
2143
- </div>
2327
+ </CapRow>
2144
2328
  <CapRow
2145
2329
  align="middle"
2146
2330
  className="selected-whatsapp-filters"
@@ -2257,7 +2441,10 @@ Click {{unsubscribe}} to unsubscribe
2257
2441
  Overview
2258
2442
  </CapButton>,
2259
2443
  "key": "WHATSAPP-card-creatives_whatsapp6",
2260
- "title": <CapRow>
2444
+ "title": <CapRow
2445
+ align="middle"
2446
+ type="flex"
2447
+ >
2261
2448
  <CapLabel
2262
2449
  className="whatsapp-rcs-template-name"
2263
2450
  type="label1"
@@ -2436,116 +2623,125 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
2436
2623
  }
2437
2624
  titleClass=""
2438
2625
  />
2439
- <div
2440
- className="action-container"
2626
+ <CapRow
2627
+ align="middle"
2628
+ className="filter-row"
2629
+ justify="space-between"
2630
+ type="flex"
2441
2631
  >
2442
2632
  <div
2443
- className="action-container__toolbar-row"
2633
+ className="filter-row-content"
2444
2634
  >
2445
- <_Class
2446
- className="search-text"
2447
- disabled={false}
2448
- labelPosition="top"
2449
- onChange={[Function]}
2450
- onClear={[Function]}
2451
- onScroll={[Function]}
2452
- onSearch={[Function]}
2453
- placeholder="Search"
2454
- value=""
2455
- />
2456
2635
  <div
2457
- className="whatsapp-filters"
2636
+ className="action-container"
2458
2637
  >
2459
- <CapSelectFilter
2460
- data={
2461
- Array [
2462
- Object {
2463
- "key": "utility",
2464
- "label": <FormattedMessage
2465
- defaultMessage="Utility"
2466
- id="creatives.containersV2.Whatsapp.utility"
2467
- values={Object {}}
2468
- />,
2469
- "tagColor": "#f2e7fe",
2470
- "tagTextColor": "#a451ff",
2471
- "tooltipLabel": <FormattedMessage
2472
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2473
- id="creatives.containersV2.Whatsapp.utilityTooltip"
2474
- values={Object {}}
2475
- />,
2476
- "value": "UTILITY",
2477
- },
2478
- Object {
2479
- "key": "marketing",
2480
- "label": <FormattedMessage
2481
- defaultMessage="Marketing"
2482
- id="creatives.containersV2.Whatsapp.marketing"
2483
- values={Object {}}
2484
- />,
2485
- "tagColor": "#ffe5d2",
2486
- "tagTextColor": "#f87d23",
2487
- "tooltipLabel": <FormattedMessage
2488
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2489
- id="creatives.containersV2.Whatsapp.marketingTooltip"
2490
- values={Object {}}
2491
- />,
2492
- "value": "MARKETING",
2493
- },
2494
- Object {
2495
- "key": "authentication",
2496
- "label": <FormattedMessage
2497
- defaultMessage="Authentication"
2498
- id="creatives.containersV2.Whatsapp.authentication"
2499
- values={Object {}}
2500
- />,
2501
- "tagColor": "#ecf7ec",
2502
- "tagTextColor": "#6bb56b",
2503
- "tooltipLabel": <FormattedMessage
2504
- defaultMessage="Send codes that allow your customers to securely access their accounts."
2505
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
2506
- values={Object {}}
2507
- />,
2508
- "value": "AUTHENTICATION",
2509
- },
2510
- ]
2511
- }
2512
- dropdownMaxHeight="320px"
2513
- dropdownWidth="228px"
2514
- onSelect={[Function]}
2515
- overlayStyle={
2638
+ <_Class
2639
+ className="search-text"
2640
+ disabled={false}
2641
+ labelPosition="top"
2642
+ onChange={[Function]}
2643
+ onClear={[Function]}
2644
+ onScroll={[Function]}
2645
+ placeholder="Search"
2646
+ style={
2516
2647
  Object {
2517
- "overflowY": "hidden",
2648
+ "width": "210px",
2518
2649
  }
2519
2650
  }
2520
- placeholder="Category"
2521
- placement="bottomLeft"
2522
- selectedValue="ALERT_UPDATE"
2523
- showBadge={true}
2524
- width="105px"
2525
- />
2526
- </div>
2527
- <Component />
2528
- <Component />
2529
- </div>
2530
- <div>
2531
- <div
2532
- className="action-container__create-row"
2533
- >
2534
- <CapLink
2535
- className="create-new-link"
2536
- disabled={false}
2537
- onClick={[Function]}
2538
- suffix={
2539
- <CapIcon
2540
- size="s"
2541
- type="open-in-new"
2542
- />
2543
- }
2544
- title="Create new template"
2651
+ value=""
2545
2652
  />
2653
+ <div
2654
+ className="whatsapp-filters"
2655
+ >
2656
+ <CapSelectFilter
2657
+ data={
2658
+ Array [
2659
+ Object {
2660
+ "key": "utility",
2661
+ "label": <FormattedMessage
2662
+ defaultMessage="Utility"
2663
+ id="creatives.containersV2.Whatsapp.utility"
2664
+ values={Object {}}
2665
+ />,
2666
+ "tagColor": "#f2e7fe",
2667
+ "tagTextColor": "#a451ff",
2668
+ "tooltipLabel": <FormattedMessage
2669
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2670
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2671
+ values={Object {}}
2672
+ />,
2673
+ "value": "UTILITY",
2674
+ },
2675
+ Object {
2676
+ "key": "marketing",
2677
+ "label": <FormattedMessage
2678
+ defaultMessage="Marketing"
2679
+ id="creatives.containersV2.Whatsapp.marketing"
2680
+ values={Object {}}
2681
+ />,
2682
+ "tagColor": "#ffe5d2",
2683
+ "tagTextColor": "#f87d23",
2684
+ "tooltipLabel": <FormattedMessage
2685
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2686
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2687
+ values={Object {}}
2688
+ />,
2689
+ "value": "MARKETING",
2690
+ },
2691
+ Object {
2692
+ "key": "authentication",
2693
+ "label": <FormattedMessage
2694
+ defaultMessage="Authentication"
2695
+ id="creatives.containersV2.Whatsapp.authentication"
2696
+ values={Object {}}
2697
+ />,
2698
+ "tagColor": "#ecf7ec",
2699
+ "tagTextColor": "#6bb56b",
2700
+ "tooltipLabel": <FormattedMessage
2701
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2702
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2703
+ values={Object {}}
2704
+ />,
2705
+ "value": "AUTHENTICATION",
2706
+ },
2707
+ ]
2708
+ }
2709
+ dropdownMaxHeight="320px"
2710
+ dropdownWidth="228px"
2711
+ onSelect={[Function]}
2712
+ overlayStyle={
2713
+ Object {
2714
+ "overflowY": "hidden",
2715
+ }
2716
+ }
2717
+ placeholder="Category"
2718
+ placement="bottomLeft"
2719
+ selectedValue="ALERT_UPDATE"
2720
+ showBadge={true}
2721
+ width="105px"
2722
+ />
2723
+ </div>
2724
+ <Component />
2725
+ <Component />
2726
+ <div
2727
+ className="template-listing-header-actions"
2728
+ >
2729
+ <CapLink
2730
+ className="create-new-link"
2731
+ disabled={false}
2732
+ onClick={[Function]}
2733
+ suffix={
2734
+ <CapIcon
2735
+ size="s"
2736
+ type="open-in-new"
2737
+ />
2738
+ }
2739
+ title="Create new template"
2740
+ />
2741
+ </div>
2546
2742
  </div>
2547
2743
  </div>
2548
- </div>
2744
+ </CapRow>
2549
2745
  <CapRow
2550
2746
  align="middle"
2551
2747
  className="selected-whatsapp-filters"
@@ -2705,116 +2901,125 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
2705
2901
  }
2706
2902
  titleClass=""
2707
2903
  />
2708
- <div
2709
- className="action-container"
2904
+ <CapRow
2905
+ align="middle"
2906
+ className="filter-row"
2907
+ justify="space-between"
2908
+ type="flex"
2710
2909
  >
2711
2910
  <div
2712
- className="action-container__toolbar-row"
2911
+ className="filter-row-content"
2713
2912
  >
2714
- <_Class
2715
- className="search-text"
2716
- disabled={false}
2717
- labelPosition="top"
2718
- onChange={[Function]}
2719
- onClear={[Function]}
2720
- onScroll={[Function]}
2721
- onSearch={[Function]}
2722
- placeholder="Search"
2723
- value=""
2724
- />
2725
2913
  <div
2726
- className="whatsapp-filters"
2914
+ className="action-container"
2727
2915
  >
2728
- <CapSelectFilter
2729
- data={
2730
- Array [
2731
- Object {
2732
- "key": "utility",
2733
- "label": <FormattedMessage
2734
- defaultMessage="Utility"
2735
- id="creatives.containersV2.Whatsapp.utility"
2736
- values={Object {}}
2737
- />,
2738
- "tagColor": "#f2e7fe",
2739
- "tagTextColor": "#a451ff",
2740
- "tooltipLabel": <FormattedMessage
2741
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2742
- id="creatives.containersV2.Whatsapp.utilityTooltip"
2743
- values={Object {}}
2744
- />,
2745
- "value": "UTILITY",
2746
- },
2747
- Object {
2748
- "key": "marketing",
2749
- "label": <FormattedMessage
2750
- defaultMessage="Marketing"
2751
- id="creatives.containersV2.Whatsapp.marketing"
2752
- values={Object {}}
2753
- />,
2754
- "tagColor": "#ffe5d2",
2755
- "tagTextColor": "#f87d23",
2756
- "tooltipLabel": <FormattedMessage
2757
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2758
- id="creatives.containersV2.Whatsapp.marketingTooltip"
2759
- values={Object {}}
2760
- />,
2761
- "value": "MARKETING",
2762
- },
2763
- Object {
2764
- "key": "authentication",
2765
- "label": <FormattedMessage
2766
- defaultMessage="Authentication"
2767
- id="creatives.containersV2.Whatsapp.authentication"
2768
- values={Object {}}
2769
- />,
2770
- "tagColor": "#ecf7ec",
2771
- "tagTextColor": "#6bb56b",
2772
- "tooltipLabel": <FormattedMessage
2773
- defaultMessage="Send codes that allow your customers to securely access their accounts."
2774
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
2775
- values={Object {}}
2776
- />,
2777
- "value": "AUTHENTICATION",
2778
- },
2779
- ]
2780
- }
2781
- dropdownMaxHeight="320px"
2782
- dropdownWidth="228px"
2783
- onSelect={[Function]}
2784
- overlayStyle={
2916
+ <_Class
2917
+ className="search-text"
2918
+ disabled={false}
2919
+ labelPosition="top"
2920
+ onChange={[Function]}
2921
+ onClear={[Function]}
2922
+ onScroll={[Function]}
2923
+ placeholder="Search"
2924
+ style={
2785
2925
  Object {
2786
- "overflowY": "hidden",
2926
+ "width": "210px",
2787
2927
  }
2788
2928
  }
2789
- placeholder="Category"
2790
- placement="bottomLeft"
2791
- selectedValue={null}
2792
- showBadge={true}
2793
- width="105px"
2794
- />
2795
- </div>
2796
- <Component />
2797
- <Component />
2798
- </div>
2799
- <div>
2800
- <div
2801
- className="action-container__create-row"
2802
- >
2803
- <CapLink
2804
- className="create-new-link"
2805
- disabled={false}
2806
- onClick={[Function]}
2807
- suffix={
2808
- <CapIcon
2809
- size="s"
2810
- type="open-in-new"
2811
- />
2812
- }
2813
- title="Create new template"
2929
+ value=""
2814
2930
  />
2931
+ <div
2932
+ className="whatsapp-filters"
2933
+ >
2934
+ <CapSelectFilter
2935
+ data={
2936
+ Array [
2937
+ Object {
2938
+ "key": "utility",
2939
+ "label": <FormattedMessage
2940
+ defaultMessage="Utility"
2941
+ id="creatives.containersV2.Whatsapp.utility"
2942
+ values={Object {}}
2943
+ />,
2944
+ "tagColor": "#f2e7fe",
2945
+ "tagTextColor": "#a451ff",
2946
+ "tooltipLabel": <FormattedMessage
2947
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2948
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2949
+ values={Object {}}
2950
+ />,
2951
+ "value": "UTILITY",
2952
+ },
2953
+ Object {
2954
+ "key": "marketing",
2955
+ "label": <FormattedMessage
2956
+ defaultMessage="Marketing"
2957
+ id="creatives.containersV2.Whatsapp.marketing"
2958
+ values={Object {}}
2959
+ />,
2960
+ "tagColor": "#ffe5d2",
2961
+ "tagTextColor": "#f87d23",
2962
+ "tooltipLabel": <FormattedMessage
2963
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2964
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2965
+ values={Object {}}
2966
+ />,
2967
+ "value": "MARKETING",
2968
+ },
2969
+ Object {
2970
+ "key": "authentication",
2971
+ "label": <FormattedMessage
2972
+ defaultMessage="Authentication"
2973
+ id="creatives.containersV2.Whatsapp.authentication"
2974
+ values={Object {}}
2975
+ />,
2976
+ "tagColor": "#ecf7ec",
2977
+ "tagTextColor": "#6bb56b",
2978
+ "tooltipLabel": <FormattedMessage
2979
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2980
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2981
+ values={Object {}}
2982
+ />,
2983
+ "value": "AUTHENTICATION",
2984
+ },
2985
+ ]
2986
+ }
2987
+ dropdownMaxHeight="320px"
2988
+ dropdownWidth="228px"
2989
+ onSelect={[Function]}
2990
+ overlayStyle={
2991
+ Object {
2992
+ "overflowY": "hidden",
2993
+ }
2994
+ }
2995
+ placeholder="Category"
2996
+ placement="bottomLeft"
2997
+ selectedValue={null}
2998
+ showBadge={true}
2999
+ width="105px"
3000
+ />
3001
+ </div>
3002
+ <Component />
3003
+ <Component />
3004
+ <div
3005
+ className="template-listing-header-actions"
3006
+ >
3007
+ <CapLink
3008
+ className="create-new-link"
3009
+ disabled={false}
3010
+ onClick={[Function]}
3011
+ suffix={
3012
+ <CapIcon
3013
+ size="s"
3014
+ type="open-in-new"
3015
+ />
3016
+ }
3017
+ title="Create new template"
3018
+ />
3019
+ </div>
2815
3020
  </div>
2816
3021
  </div>
2817
- </div>
3022
+ </CapRow>
2818
3023
  <CapRow
2819
3024
  align="middle"
2820
3025
  className="selected-whatsapp-filters"
@@ -2948,116 +3153,125 @@ exports[`Test Templates container Test removing single filter 1`] = `
2948
3153
  }
2949
3154
  titleClass=""
2950
3155
  />
2951
- <div
2952
- className="action-container"
3156
+ <CapRow
3157
+ align="middle"
3158
+ className="filter-row"
3159
+ justify="space-between"
3160
+ type="flex"
2953
3161
  >
2954
3162
  <div
2955
- className="action-container__toolbar-row"
3163
+ className="filter-row-content"
2956
3164
  >
2957
- <_Class
2958
- className="search-text"
2959
- disabled={false}
2960
- labelPosition="top"
2961
- onChange={[Function]}
2962
- onClear={[Function]}
2963
- onScroll={[Function]}
2964
- onSearch={[Function]}
2965
- placeholder="Search"
2966
- value=""
2967
- />
2968
3165
  <div
2969
- className="whatsapp-filters"
3166
+ className="action-container"
2970
3167
  >
2971
- <CapSelectFilter
2972
- data={
2973
- Array [
2974
- Object {
2975
- "key": "utility",
2976
- "label": <FormattedMessage
2977
- defaultMessage="Utility"
2978
- id="creatives.containersV2.Whatsapp.utility"
2979
- values={Object {}}
2980
- />,
2981
- "tagColor": "#f2e7fe",
2982
- "tagTextColor": "#a451ff",
2983
- "tooltipLabel": <FormattedMessage
2984
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2985
- id="creatives.containersV2.Whatsapp.utilityTooltip"
2986
- values={Object {}}
2987
- />,
2988
- "value": "UTILITY",
2989
- },
2990
- Object {
2991
- "key": "marketing",
2992
- "label": <FormattedMessage
2993
- defaultMessage="Marketing"
2994
- id="creatives.containersV2.Whatsapp.marketing"
2995
- values={Object {}}
2996
- />,
2997
- "tagColor": "#ffe5d2",
2998
- "tagTextColor": "#f87d23",
2999
- "tooltipLabel": <FormattedMessage
3000
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
3001
- id="creatives.containersV2.Whatsapp.marketingTooltip"
3002
- values={Object {}}
3003
- />,
3004
- "value": "MARKETING",
3005
- },
3006
- Object {
3007
- "key": "authentication",
3008
- "label": <FormattedMessage
3009
- defaultMessage="Authentication"
3010
- id="creatives.containersV2.Whatsapp.authentication"
3011
- values={Object {}}
3012
- />,
3013
- "tagColor": "#ecf7ec",
3014
- "tagTextColor": "#6bb56b",
3015
- "tooltipLabel": <FormattedMessage
3016
- defaultMessage="Send codes that allow your customers to securely access their accounts."
3017
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
3018
- values={Object {}}
3019
- />,
3020
- "value": "AUTHENTICATION",
3021
- },
3022
- ]
3023
- }
3024
- dropdownMaxHeight="320px"
3025
- dropdownWidth="228px"
3026
- onSelect={[Function]}
3027
- overlayStyle={
3168
+ <_Class
3169
+ className="search-text"
3170
+ disabled={false}
3171
+ labelPosition="top"
3172
+ onChange={[Function]}
3173
+ onClear={[Function]}
3174
+ onScroll={[Function]}
3175
+ placeholder="Search"
3176
+ style={
3028
3177
  Object {
3029
- "overflowY": "hidden",
3178
+ "width": "210px",
3030
3179
  }
3031
3180
  }
3032
- placeholder="Category"
3033
- placement="bottomLeft"
3034
- selectedValue=""
3035
- showBadge={true}
3036
- width="105px"
3037
- />
3038
- </div>
3039
- <Component />
3040
- <Component />
3041
- </div>
3042
- <div>
3043
- <div
3044
- className="action-container__create-row"
3045
- >
3046
- <CapLink
3047
- className="create-new-link"
3048
- disabled={false}
3049
- onClick={[Function]}
3050
- suffix={
3051
- <CapIcon
3052
- size="s"
3053
- type="open-in-new"
3054
- />
3055
- }
3056
- title="Create new template"
3181
+ value=""
3057
3182
  />
3183
+ <div
3184
+ className="whatsapp-filters"
3185
+ >
3186
+ <CapSelectFilter
3187
+ data={
3188
+ Array [
3189
+ Object {
3190
+ "key": "utility",
3191
+ "label": <FormattedMessage
3192
+ defaultMessage="Utility"
3193
+ id="creatives.containersV2.Whatsapp.utility"
3194
+ values={Object {}}
3195
+ />,
3196
+ "tagColor": "#f2e7fe",
3197
+ "tagTextColor": "#a451ff",
3198
+ "tooltipLabel": <FormattedMessage
3199
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
3200
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
3201
+ values={Object {}}
3202
+ />,
3203
+ "value": "UTILITY",
3204
+ },
3205
+ Object {
3206
+ "key": "marketing",
3207
+ "label": <FormattedMessage
3208
+ defaultMessage="Marketing"
3209
+ id="creatives.containersV2.Whatsapp.marketing"
3210
+ values={Object {}}
3211
+ />,
3212
+ "tagColor": "#ffe5d2",
3213
+ "tagTextColor": "#f87d23",
3214
+ "tooltipLabel": <FormattedMessage
3215
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
3216
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
3217
+ values={Object {}}
3218
+ />,
3219
+ "value": "MARKETING",
3220
+ },
3221
+ Object {
3222
+ "key": "authentication",
3223
+ "label": <FormattedMessage
3224
+ defaultMessage="Authentication"
3225
+ id="creatives.containersV2.Whatsapp.authentication"
3226
+ values={Object {}}
3227
+ />,
3228
+ "tagColor": "#ecf7ec",
3229
+ "tagTextColor": "#6bb56b",
3230
+ "tooltipLabel": <FormattedMessage
3231
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
3232
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
3233
+ values={Object {}}
3234
+ />,
3235
+ "value": "AUTHENTICATION",
3236
+ },
3237
+ ]
3238
+ }
3239
+ dropdownMaxHeight="320px"
3240
+ dropdownWidth="228px"
3241
+ onSelect={[Function]}
3242
+ overlayStyle={
3243
+ Object {
3244
+ "overflowY": "hidden",
3245
+ }
3246
+ }
3247
+ placeholder="Category"
3248
+ placement="bottomLeft"
3249
+ selectedValue=""
3250
+ showBadge={true}
3251
+ width="105px"
3252
+ />
3253
+ </div>
3254
+ <Component />
3255
+ <Component />
3256
+ <div
3257
+ className="template-listing-header-actions"
3258
+ >
3259
+ <CapLink
3260
+ className="create-new-link"
3261
+ disabled={false}
3262
+ onClick={[Function]}
3263
+ suffix={
3264
+ <CapIcon
3265
+ size="s"
3266
+ type="open-in-new"
3267
+ />
3268
+ }
3269
+ title="Create new template"
3270
+ />
3271
+ </div>
3058
3272
  </div>
3059
3273
  </div>
3060
- </div>
3274
+ </CapRow>
3061
3275
  <CapRow
3062
3276
  align="middle"
3063
3277
  className="selected-whatsapp-filters"