@capillarytech/creatives-library 8.0.340-beta.0.5 → 8.0.340-beta.0.6

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 (61) hide show
  1. package/constants/unified.js +1 -0
  2. package/package.json +1 -1
  3. package/services/api.js +20 -0
  4. package/services/tests/api.test.js +59 -0
  5. package/utils/common.js +6 -0
  6. package/utils/test-utils.js +2 -2
  7. package/utils/tests/v2Common.test.js +46 -1
  8. package/utils/v2common.js +18 -0
  9. package/v2Components/CapTagList/index.js +5 -6
  10. package/v2Components/CommonTestAndPreview/UnifiedPreview/WhatsAppPreviewContent.js +18 -6
  11. package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +27 -0
  12. package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/WhatsAppPreviewContent.test.js +48 -0
  13. package/v2Components/TemplatePreview/_templatePreview.scss +21 -0
  14. package/v2Components/TemplatePreview/index.js +18 -6
  15. package/v2Components/TemplatePreview/tests/__snapshots__/index.test.js.snap +1 -0
  16. package/v2Containers/Assets/images/archive_Empty_Illustration.svg +9 -0
  17. package/v2Containers/CommunicationFlow/steps/ChannelSelectionStep/Tests/ChannelSelectionStep.test.js +28 -20
  18. package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/Tests/SenderDetails.test.js +24 -16
  19. package/v2Containers/CreativesContainer/SlideBoxContent.js +16 -5
  20. package/v2Containers/CreativesContainer/SlideBoxFooter.js +3 -1
  21. package/v2Containers/CreativesContainer/index.js +14 -1
  22. package/v2Containers/CreativesContainer/messages.js +4 -0
  23. package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap +2 -4
  24. package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap +3 -0
  25. package/v2Containers/Email/reducer.js +12 -3
  26. package/v2Containers/Email/sagas.js +9 -4
  27. package/v2Containers/Email/tests/__snapshots__/reducer.test.js.snap +4 -0
  28. package/v2Containers/Email/tests/reducer.test.js +47 -0
  29. package/v2Containers/Email/tests/sagas.test.js +146 -6
  30. package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js +8 -1
  31. package/v2Containers/EmailWrapper/tests/useEmailWrapper.edgeCases.test.js +1 -0
  32. package/v2Containers/EmailWrapper/tests/useEmailWrapper.test.js +7 -0
  33. package/v2Containers/Sms/Create/index.js +3 -0
  34. package/v2Containers/Templates/ChannelTypeIllustration.js +23 -6
  35. package/v2Containers/Templates/_templates.scss +155 -24
  36. package/v2Containers/Templates/actions.js +44 -0
  37. package/v2Containers/Templates/constants.js +31 -0
  38. package/v2Containers/Templates/index.js +400 -59
  39. package/v2Containers/Templates/messages.js +96 -0
  40. package/v2Containers/Templates/reducer.js +84 -1
  41. package/v2Containers/Templates/sagas.js +64 -0
  42. package/v2Containers/Templates/selectors.js +12 -0
  43. package/v2Containers/Templates/tests/ChannelTypeIllustration.test.js +12 -0
  44. package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +1166 -1112
  45. package/v2Containers/Templates/tests/index.test.js +6 -0
  46. package/v2Containers/Templates/tests/reducer.test.js +178 -0
  47. package/v2Containers/Templates/tests/sagas.test.js +390 -8
  48. package/v2Containers/Templates/tests/selector.test.js +32 -0
  49. package/v2Containers/TemplatesV2/TemplatesV2.style.js +1 -1
  50. package/v2Containers/Viber/constants.js +8 -0
  51. package/v2Containers/Viber/index.js +5 -0
  52. package/v2Containers/Viber/messages.js +4 -0
  53. package/v2Containers/Viber/reducer.js +26 -3
  54. package/v2Containers/Viber/sagas.js +50 -8
  55. package/v2Containers/Viber/tests/index.test.js +80 -0
  56. package/v2Containers/Viber/tests/reducer.test.js +297 -0
  57. package/v2Containers/Viber/tests/saga.test.js +412 -40
  58. package/v2Containers/Whatsapp/constants.js +8 -0
  59. package/v2Containers/Whatsapp/index.js +145 -5
  60. package/v2Containers/Whatsapp/index.scss +12 -0
  61. package/v2Containers/Whatsapp/messages.js +16 -0
package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap CHANGED
@@ -201,44 +201,49 @@ exports[`Test Templates container Should render sms illustration when no templat
201
201
  onPageChange={[Function]}
202
202
  >
203
203
  <div>
204
- <div
205
- className="action-container"
204
+ <CapRow
205
+ align="middle"
206
+ className="filter-row"
207
+ justify="space-between"
208
+ type="flex"
206
209
  >
207
- <ComponentWithLabel(CapInputSearch)
208
- className="search-text"
209
- disabled={false}
210
- onChange={[Function]}
211
- onClear={[Function]}
212
- onScroll={[Function]}
213
- placeholder="Search"
214
- style={
215
- Object {
216
- "width": "210px",
217
- }
218
- }
219
- value=""
220
- />
221
- <Component />
222
- <Component />
223
210
  <div
224
- style={
225
- Object {
226
- "alignItems": "center",
227
- "display": "flex",
228
- "justifyContent": "space-between",
229
- }
230
- }
211
+ className="filter-row-content"
231
212
  >
232
- <CapButton
233
- className="create-new-sms margin-l-8 margin-b-12"
234
- disabled={false}
235
- onClick={[Function]}
236
- type="primary"
213
+ <div
214
+ className="action-container"
237
215
  >
238
- Create new
239
- </CapButton>
216
+ <ComponentWithLabel(CapInputSearch)
217
+ className="search-text"
218
+ disabled={false}
219
+ onChange={[Function]}
220
+ onClear={[Function]}
221
+ onScroll={[Function]}
222
+ placeholder="Search"
223
+ style={
224
+ Object {
225
+ "width": "210px",
226
+ }
227
+ }
228
+ value=""
229
+ />
230
+ <Component />
231
+ <Component />
232
+ <div
233
+ className="template-listing-header-actions"
234
+ >
235
+ <CapButton
236
+ className="create-new-sms margin-l-8 margin-b-12"
237
+ disabled={false}
238
+ onClick={[Function]}
239
+ type="primary"
240
+ >
241
+ Create new
242
+ </CapButton>
243
+ </div>
244
+ </div>
240
245
  </div>
241
- </div>
246
+ </CapRow>
242
247
  <div>
243
248
  <ChannelTypeIllustration
244
249
  createTemplate={[Function]}
@@ -386,119 +391,124 @@ exports[`Test Templates container Should render temlates when whatsapp templates
386
391
  </CapHeading>
387
392
  }
388
393
  />
389
- <div
390
- className="action-container"
394
+ <CapRow
395
+ align="middle"
396
+ className="filter-row"
397
+ justify="space-between"
398
+ type="flex"
391
399
  >
392
- <ComponentWithLabel(CapInputSearch)
393
- className="search-text"
394
- disabled={false}
395
- onChange={[Function]}
396
- onClear={[Function]}
397
- onScroll={[Function]}
398
- placeholder="Search"
399
- style={
400
- Object {
401
- "width": "210px",
402
- }
403
- }
404
- value=""
405
- />
406
- <CapRow
407
- align="middle"
408
- className="whatsapp-filters"
409
- gap={8}
410
- type="flex"
400
+ <div
401
+ className="filter-row-content"
411
402
  >
412
- <CapSelectFilter
413
- data={
414
- Array [
415
- Object {
416
- "key": "utility",
417
- "label": <FormattedMessage
418
- defaultMessage="Utility"
419
- id="creatives.containersV2.Whatsapp.utility"
420
- values={Object {}}
421
- />,
422
- "tagColor": "#f2e7fe",
423
- "tagTextColor": "#a451ff",
424
- "tooltipLabel": <FormattedMessage
425
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
426
- id="creatives.containersV2.Whatsapp.utilityTooltip"
427
- values={Object {}}
428
- />,
429
- "value": "UTILITY",
430
- },
431
- Object {
432
- "key": "marketing",
433
- "label": <FormattedMessage
434
- defaultMessage="Marketing"
435
- id="creatives.containersV2.Whatsapp.marketing"
436
- values={Object {}}
437
- />,
438
- "tagColor": "#ffe5d2",
439
- "tagTextColor": "#f87d23",
440
- "tooltipLabel": <FormattedMessage
441
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
442
- id="creatives.containersV2.Whatsapp.marketingTooltip"
443
- values={Object {}}
444
- />,
445
- "value": "MARKETING",
446
- },
403
+ <div
404
+ className="action-container"
405
+ >
406
+ <ComponentWithLabel(CapInputSearch)
407
+ className="search-text"
408
+ disabled={false}
409
+ onChange={[Function]}
410
+ onClear={[Function]}
411
+ onScroll={[Function]}
412
+ placeholder="Search"
413
+ style={
447
414
  Object {
448
- "key": "authentication",
449
- "label": <FormattedMessage
450
- defaultMessage="Authentication"
451
- id="creatives.containersV2.Whatsapp.authentication"
452
- values={Object {}}
453
- />,
454
- "tagColor": "#ecf7ec",
455
- "tagTextColor": "#6bb56b",
456
- "tooltipLabel": <FormattedMessage
457
- defaultMessage="Send codes that allow your customers to securely access their accounts."
458
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
459
- values={Object {}}
460
- />,
461
- "value": "AUTHENTICATION",
462
- },
463
- ]
464
- }
465
- onSelect={[Function]}
466
- overlayStyle={
467
- Object {
468
- "overflowY": "hidden",
415
+ "width": "210px",
416
+ }
469
417
  }
470
- }
471
- placeholder="Category"
472
- placement="bottomLeft"
473
- selectedValue=""
474
- showBadge={true}
475
- width="105px"
476
- />
477
- </CapRow>
478
- <Component />
479
- <Component />
480
- <div
481
- style={
482
- Object {
483
- "alignItems": "center",
484
- "display": "flex",
485
- "justifyContent": "space-between",
486
- }
487
- }
488
- >
489
- <CapLink
490
- className="create-new-link"
491
- onClick={[Function]}
492
- suffix={
493
- <CapIcon
494
- size="s"
495
- type="open-in-new"
418
+ value=""
419
+ />
420
+ <CapRow
421
+ align="middle"
422
+ className="whatsapp-filters"
423
+ gap={8}
424
+ type="flex"
425
+ >
426
+ <CapSelectFilter
427
+ data={
428
+ Array [
429
+ Object {
430
+ "key": "utility",
431
+ "label": <FormattedMessage
432
+ defaultMessage="Utility"
433
+ id="creatives.containersV2.Whatsapp.utility"
434
+ values={Object {}}
435
+ />,
436
+ "tagColor": "#f2e7fe",
437
+ "tagTextColor": "#a451ff",
438
+ "tooltipLabel": <FormattedMessage
439
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
440
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
441
+ values={Object {}}
442
+ />,
443
+ "value": "UTILITY",
444
+ },
445
+ Object {
446
+ "key": "marketing",
447
+ "label": <FormattedMessage
448
+ defaultMessage="Marketing"
449
+ id="creatives.containersV2.Whatsapp.marketing"
450
+ values={Object {}}
451
+ />,
452
+ "tagColor": "#ffe5d2",
453
+ "tagTextColor": "#f87d23",
454
+ "tooltipLabel": <FormattedMessage
455
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
456
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
457
+ values={Object {}}
458
+ />,
459
+ "value": "MARKETING",
460
+ },
461
+ Object {
462
+ "key": "authentication",
463
+ "label": <FormattedMessage
464
+ defaultMessage="Authentication"
465
+ id="creatives.containersV2.Whatsapp.authentication"
466
+ values={Object {}}
467
+ />,
468
+ "tagColor": "#ecf7ec",
469
+ "tagTextColor": "#6bb56b",
470
+ "tooltipLabel": <FormattedMessage
471
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
472
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
473
+ values={Object {}}
474
+ />,
475
+ "value": "AUTHENTICATION",
476
+ },
477
+ ]
478
+ }
479
+ onSelect={[Function]}
480
+ overlayStyle={
481
+ Object {
482
+ "overflowY": "hidden",
483
+ }
484
+ }
485
+ placeholder="Category"
486
+ placement="bottomLeft"
487
+ selectedValue=""
488
+ showBadge={true}
489
+ width="105px"
496
490
  />
497
- }
498
- title="Create new template"
499
- />
491
+ </CapRow>
492
+ <Component />
493
+ <Component />
494
+ <div
495
+ className="template-listing-header-actions"
496
+ >
497
+ <CapLink
498
+ className="create-new-link"
499
+ onClick={[Function]}
500
+ suffix={
501
+ <CapIcon
502
+ size="s"
503
+ type="open-in-new"
504
+ />
505
+ }
506
+ title="Create new template"
507
+ />
508
+ </div>
509
+ </div>
500
510
  </div>
501
- </div>
511
+ </CapRow>
502
512
  <CapRow
503
513
  align="middle"
504
514
  className="selected-whatsapp-filters"
@@ -626,173 +636,178 @@ exports[`Test Templates container Should render temlates when whatsapp templates
626
636
  </CapHeading>
627
637
  }
628
638
  />
629
- <div
630
- className="action-container"
639
+ <CapRow
640
+ align="middle"
641
+ className="filter-row"
642
+ justify="space-between"
643
+ type="flex"
631
644
  >
632
- <ComponentWithLabel(CapInputSearch)
633
- className="search-text"
634
- disabled={false}
635
- onChange={[Function]}
636
- onClear={[Function]}
637
- onScroll={[Function]}
638
- placeholder="Search"
639
- style={
640
- Object {
641
- "width": "210px",
642
- }
643
- }
644
- value=""
645
- />
646
- <CapRow
647
- align="middle"
648
- className="whatsapp-filters"
649
- gap={8}
650
- type="flex"
651
- >
652
- <CapSelectFilter
653
- data={
654
- Array [
655
- Object {
656
- "key": "awaitingApproval",
657
- "label": <FormattedMessage
658
- defaultMessage="Awaiting approval"
659
- id="creatives.containersV2.Whatsapp.awaitingApproval"
660
- values={Object {}}
661
- />,
662
- "value": "awaitingApproval",
663
- },
664
- Object {
665
- "key": "approved",
666
- "label": <FormattedMessage
667
- defaultMessage="Approved"
668
- id="creatives.containersV2.Whatsapp.approved"
669
- values={Object {}}
670
- />,
671
- "value": "approved",
672
- },
673
- Object {
674
- "key": "rejected",
675
- "label": <FormattedMessage
676
- defaultMessage="Rejected"
677
- id="creatives.containersV2.Whatsapp.rejected"
678
- values={Object {}}
679
- />,
680
- "value": "rejected",
681
- },
682
- Object {
683
- "key": "pending",
684
- "label": <FormattedMessage
685
- defaultMessage="Pending"
686
- id="creatives.containersV2.Whatsapp.pending"
687
- values={Object {}}
688
- />,
689
- "value": "pending",
690
- },
691
- Object {
692
- "key": "paused",
693
- "label": <FormattedMessage
694
- defaultMessage="Paused"
695
- id="creatives.containersV2.Whatsapp.paused"
696
- values={Object {}}
697
- />,
698
- "value": "paused",
699
- },
700
- ]
701
- }
702
- onSelect={[Function]}
703
- placeholder="Status"
704
- placement="bottomLeft"
705
- selectedValue="approved"
706
- showBadge={true}
707
- width="90px"
708
- />
709
- <CapSelectFilter
710
- data={
711
- Array [
712
- Object {
713
- "key": "utility",
714
- "label": <FormattedMessage
715
- defaultMessage="Utility"
716
- id="creatives.containersV2.Whatsapp.utility"
717
- values={Object {}}
718
- />,
719
- "tagColor": "#f2e7fe",
720
- "tagTextColor": "#a451ff",
721
- "tooltipLabel": <FormattedMessage
722
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
723
- id="creatives.containersV2.Whatsapp.utilityTooltip"
724
- values={Object {}}
725
- />,
726
- "value": "UTILITY",
727
- },
728
- Object {
729
- "key": "marketing",
730
- "label": <FormattedMessage
731
- defaultMessage="Marketing"
732
- id="creatives.containersV2.Whatsapp.marketing"
733
- values={Object {}}
734
- />,
735
- "tagColor": "#ffe5d2",
736
- "tagTextColor": "#f87d23",
737
- "tooltipLabel": <FormattedMessage
738
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
739
- id="creatives.containersV2.Whatsapp.marketingTooltip"
740
- values={Object {}}
741
- />,
742
- "value": "MARKETING",
743
- },
744
- Object {
745
- "key": "authentication",
746
- "label": <FormattedMessage
747
- defaultMessage="Authentication"
748
- id="creatives.containersV2.Whatsapp.authentication"
749
- values={Object {}}
750
- />,
751
- "tagColor": "#ecf7ec",
752
- "tagTextColor": "#6bb56b",
753
- "tooltipLabel": <FormattedMessage
754
- defaultMessage="Send codes that allow your customers to securely access their accounts."
755
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
756
- values={Object {}}
757
- />,
758
- "value": "AUTHENTICATION",
759
- },
760
- ]
761
- }
762
- onSelect={[Function]}
763
- overlayStyle={
764
- Object {
765
- "overflowY": "hidden",
766
- }
767
- }
768
- placeholder="Category"
769
- placement="bottomLeft"
770
- selectedValue=""
771
- showBadge={true}
772
- width="105px"
773
- />
774
- </CapRow>
775
- <Component />
776
- <Component />
777
645
  <div
778
- style={
779
- Object {
780
- "alignItems": "center",
781
- "display": "flex",
782
- "justifyContent": "space-between",
783
- }
784
- }
646
+ className="filter-row-content"
785
647
  >
786
- <CapButton
787
- className="create-new-whatsapp margin-l-8 margin-b-12"
788
- disabled={false}
789
- onClick={[Function]}
790
- type="primary"
648
+ <div
649
+ className="action-container"
791
650
  >
792
- Create new
793
- </CapButton>
651
+ <ComponentWithLabel(CapInputSearch)
652
+ className="search-text"
653
+ disabled={false}
654
+ onChange={[Function]}
655
+ onClear={[Function]}
656
+ onScroll={[Function]}
657
+ placeholder="Search"
658
+ style={
659
+ Object {
660
+ "width": "210px",
661
+ }
662
+ }
663
+ value=""
664
+ />
665
+ <CapRow
666
+ align="middle"
667
+ className="whatsapp-filters"
668
+ gap={8}
669
+ type="flex"
670
+ >
671
+ <CapSelectFilter
672
+ data={
673
+ Array [
674
+ Object {
675
+ "key": "awaitingApproval",
676
+ "label": <FormattedMessage
677
+ defaultMessage="Awaiting approval"
678
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
679
+ values={Object {}}
680
+ />,
681
+ "value": "awaitingApproval",
682
+ },
683
+ Object {
684
+ "key": "approved",
685
+ "label": <FormattedMessage
686
+ defaultMessage="Approved"
687
+ id="creatives.containersV2.Whatsapp.approved"
688
+ values={Object {}}
689
+ />,
690
+ "value": "approved",
691
+ },
692
+ Object {
693
+ "key": "rejected",
694
+ "label": <FormattedMessage
695
+ defaultMessage="Rejected"
696
+ id="creatives.containersV2.Whatsapp.rejected"
697
+ values={Object {}}
698
+ />,
699
+ "value": "rejected",
700
+ },
701
+ Object {
702
+ "key": "pending",
703
+ "label": <FormattedMessage
704
+ defaultMessage="Pending"
705
+ id="creatives.containersV2.Whatsapp.pending"
706
+ values={Object {}}
707
+ />,
708
+ "value": "pending",
709
+ },
710
+ Object {
711
+ "key": "paused",
712
+ "label": <FormattedMessage
713
+ defaultMessage="Paused"
714
+ id="creatives.containersV2.Whatsapp.paused"
715
+ values={Object {}}
716
+ />,
717
+ "value": "paused",
718
+ },
719
+ ]
720
+ }
721
+ onSelect={[Function]}
722
+ placeholder="Status"
723
+ placement="bottomLeft"
724
+ selectedValue="approved"
725
+ showBadge={true}
726
+ width="90px"
727
+ />
728
+ <CapSelectFilter
729
+ data={
730
+ Array [
731
+ Object {
732
+ "key": "utility",
733
+ "label": <FormattedMessage
734
+ defaultMessage="Utility"
735
+ id="creatives.containersV2.Whatsapp.utility"
736
+ values={Object {}}
737
+ />,
738
+ "tagColor": "#f2e7fe",
739
+ "tagTextColor": "#a451ff",
740
+ "tooltipLabel": <FormattedMessage
741
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
742
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
743
+ values={Object {}}
744
+ />,
745
+ "value": "UTILITY",
746
+ },
747
+ Object {
748
+ "key": "marketing",
749
+ "label": <FormattedMessage
750
+ defaultMessage="Marketing"
751
+ id="creatives.containersV2.Whatsapp.marketing"
752
+ values={Object {}}
753
+ />,
754
+ "tagColor": "#ffe5d2",
755
+ "tagTextColor": "#f87d23",
756
+ "tooltipLabel": <FormattedMessage
757
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
758
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
759
+ values={Object {}}
760
+ />,
761
+ "value": "MARKETING",
762
+ },
763
+ Object {
764
+ "key": "authentication",
765
+ "label": <FormattedMessage
766
+ defaultMessage="Authentication"
767
+ id="creatives.containersV2.Whatsapp.authentication"
768
+ values={Object {}}
769
+ />,
770
+ "tagColor": "#ecf7ec",
771
+ "tagTextColor": "#6bb56b",
772
+ "tooltipLabel": <FormattedMessage
773
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
774
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
775
+ values={Object {}}
776
+ />,
777
+ "value": "AUTHENTICATION",
778
+ },
779
+ ]
780
+ }
781
+ onSelect={[Function]}
782
+ overlayStyle={
783
+ Object {
784
+ "overflowY": "hidden",
785
+ }
786
+ }
787
+ placeholder="Category"
788
+ placement="bottomLeft"
789
+ selectedValue=""
790
+ showBadge={true}
791
+ width="105px"
792
+ />
793
+ </CapRow>
794
+ <Component />
795
+ <Component />
796
+ <div
797
+ className="template-listing-header-actions"
798
+ >
799
+ <CapButton
800
+ className="create-new-whatsapp margin-l-8 margin-b-12"
801
+ disabled={false}
802
+ onClick={[Function]}
803
+ type="primary"
804
+ >
805
+ Create new
806
+ </CapButton>
807
+ </div>
808
+ </div>
794
809
  </div>
795
- </div>
810
+ </CapRow>
796
811
  <CapRow
797
812
  align="middle"
798
813
  className="selected-whatsapp-filters"
@@ -1026,173 +1041,178 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
1026
1041
  </CapHeading>
1027
1042
  }
1028
1043
  />
1029
- <div
1030
- className="action-container"
1044
+ <CapRow
1045
+ align="middle"
1046
+ className="filter-row"
1047
+ justify="space-between"
1048
+ type="flex"
1031
1049
  >
1032
- <ComponentWithLabel(CapInputSearch)
1033
- className="search-text"
1034
- disabled={false}
1035
- onChange={[Function]}
1036
- onClear={[Function]}
1037
- onScroll={[Function]}
1038
- placeholder="Search"
1039
- style={
1040
- Object {
1041
- "width": "210px",
1042
- }
1043
- }
1044
- value=""
1045
- />
1046
- <CapRow
1047
- align="middle"
1048
- className="whatsapp-filters"
1049
- gap={8}
1050
- type="flex"
1051
- >
1052
- <CapSelectFilter
1053
- data={
1054
- Array [
1055
- Object {
1056
- "key": "awaitingApproval",
1057
- "label": <FormattedMessage
1058
- defaultMessage="Awaiting approval"
1059
- id="creatives.containersV2.Whatsapp.awaitingApproval"
1060
- values={Object {}}
1061
- />,
1062
- "value": "awaitingApproval",
1063
- },
1064
- Object {
1065
- "key": "approved",
1066
- "label": <FormattedMessage
1067
- defaultMessage="Approved"
1068
- id="creatives.containersV2.Whatsapp.approved"
1069
- values={Object {}}
1070
- />,
1071
- "value": "approved",
1072
- },
1073
- Object {
1074
- "key": "rejected",
1075
- "label": <FormattedMessage
1076
- defaultMessage="Rejected"
1077
- id="creatives.containersV2.Whatsapp.rejected"
1078
- values={Object {}}
1079
- />,
1080
- "value": "rejected",
1081
- },
1082
- Object {
1083
- "key": "pending",
1084
- "label": <FormattedMessage
1085
- defaultMessage="Pending"
1086
- id="creatives.containersV2.Whatsapp.pending"
1087
- values={Object {}}
1088
- />,
1089
- "value": "pending",
1090
- },
1091
- Object {
1092
- "key": "paused",
1093
- "label": <FormattedMessage
1094
- defaultMessage="Paused"
1095
- id="creatives.containersV2.Whatsapp.paused"
1096
- values={Object {}}
1097
- />,
1098
- "value": "paused",
1099
- },
1100
- ]
1101
- }
1102
- onSelect={[Function]}
1103
- placeholder="Status"
1104
- placement="bottomLeft"
1105
- selectedValue=""
1106
- showBadge={true}
1107
- width="90px"
1108
- />
1109
- <CapSelectFilter
1110
- data={
1111
- Array [
1112
- Object {
1113
- "key": "utility",
1114
- "label": <FormattedMessage
1115
- defaultMessage="Utility"
1116
- id="creatives.containersV2.Whatsapp.utility"
1117
- values={Object {}}
1118
- />,
1119
- "tagColor": "#f2e7fe",
1120
- "tagTextColor": "#a451ff",
1121
- "tooltipLabel": <FormattedMessage
1122
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1123
- id="creatives.containersV2.Whatsapp.utilityTooltip"
1124
- values={Object {}}
1125
- />,
1126
- "value": "UTILITY",
1127
- },
1128
- Object {
1129
- "key": "marketing",
1130
- "label": <FormattedMessage
1131
- defaultMessage="Marketing"
1132
- id="creatives.containersV2.Whatsapp.marketing"
1133
- values={Object {}}
1134
- />,
1135
- "tagColor": "#ffe5d2",
1136
- "tagTextColor": "#f87d23",
1137
- "tooltipLabel": <FormattedMessage
1138
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1139
- id="creatives.containersV2.Whatsapp.marketingTooltip"
1140
- values={Object {}}
1141
- />,
1142
- "value": "MARKETING",
1143
- },
1144
- Object {
1145
- "key": "authentication",
1146
- "label": <FormattedMessage
1147
- defaultMessage="Authentication"
1148
- id="creatives.containersV2.Whatsapp.authentication"
1149
- values={Object {}}
1150
- />,
1151
- "tagColor": "#ecf7ec",
1152
- "tagTextColor": "#6bb56b",
1153
- "tooltipLabel": <FormattedMessage
1154
- defaultMessage="Send codes that allow your customers to securely access their accounts."
1155
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
1156
- values={Object {}}
1157
- />,
1158
- "value": "AUTHENTICATION",
1159
- },
1160
- ]
1161
- }
1162
- onSelect={[Function]}
1163
- overlayStyle={
1164
- Object {
1165
- "overflowY": "hidden",
1166
- }
1167
- }
1168
- placeholder="Category"
1169
- placement="bottomLeft"
1170
- selectedValue=""
1171
- showBadge={true}
1172
- width="105px"
1173
- />
1174
- </CapRow>
1175
- <Component />
1176
- <Component />
1177
1050
  <div
1178
- style={
1179
- Object {
1180
- "alignItems": "center",
1181
- "display": "flex",
1182
- "justifyContent": "space-between",
1183
- }
1184
- }
1051
+ className="filter-row-content"
1185
1052
  >
1186
- <CapButton
1187
- className="create-new-whatsapp margin-l-8 margin-b-12"
1188
- disabled={false}
1189
- onClick={[Function]}
1190
- type="primary"
1053
+ <div
1054
+ className="action-container"
1191
1055
  >
1192
- Create new
1193
- </CapButton>
1056
+ <ComponentWithLabel(CapInputSearch)
1057
+ className="search-text"
1058
+ disabled={false}
1059
+ onChange={[Function]}
1060
+ onClear={[Function]}
1061
+ onScroll={[Function]}
1062
+ placeholder="Search"
1063
+ style={
1064
+ Object {
1065
+ "width": "210px",
1066
+ }
1067
+ }
1068
+ value=""
1069
+ />
1070
+ <CapRow
1071
+ align="middle"
1072
+ className="whatsapp-filters"
1073
+ gap={8}
1074
+ type="flex"
1075
+ >
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
+ onSelect={[Function]}
1127
+ placeholder="Status"
1128
+ placement="bottomLeft"
1129
+ selectedValue=""
1130
+ showBadge={true}
1131
+ width="90px"
1132
+ />
1133
+ <CapSelectFilter
1134
+ data={
1135
+ Array [
1136
+ Object {
1137
+ "key": "utility",
1138
+ "label": <FormattedMessage
1139
+ defaultMessage="Utility"
1140
+ id="creatives.containersV2.Whatsapp.utility"
1141
+ values={Object {}}
1142
+ />,
1143
+ "tagColor": "#f2e7fe",
1144
+ "tagTextColor": "#a451ff",
1145
+ "tooltipLabel": <FormattedMessage
1146
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1147
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1148
+ values={Object {}}
1149
+ />,
1150
+ "value": "UTILITY",
1151
+ },
1152
+ Object {
1153
+ "key": "marketing",
1154
+ "label": <FormattedMessage
1155
+ defaultMessage="Marketing"
1156
+ id="creatives.containersV2.Whatsapp.marketing"
1157
+ values={Object {}}
1158
+ />,
1159
+ "tagColor": "#ffe5d2",
1160
+ "tagTextColor": "#f87d23",
1161
+ "tooltipLabel": <FormattedMessage
1162
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1163
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
1164
+ values={Object {}}
1165
+ />,
1166
+ "value": "MARKETING",
1167
+ },
1168
+ Object {
1169
+ "key": "authentication",
1170
+ "label": <FormattedMessage
1171
+ defaultMessage="Authentication"
1172
+ id="creatives.containersV2.Whatsapp.authentication"
1173
+ values={Object {}}
1174
+ />,
1175
+ "tagColor": "#ecf7ec",
1176
+ "tagTextColor": "#6bb56b",
1177
+ "tooltipLabel": <FormattedMessage
1178
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
1179
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1180
+ values={Object {}}
1181
+ />,
1182
+ "value": "AUTHENTICATION",
1183
+ },
1184
+ ]
1185
+ }
1186
+ onSelect={[Function]}
1187
+ overlayStyle={
1188
+ Object {
1189
+ "overflowY": "hidden",
1190
+ }
1191
+ }
1192
+ placeholder="Category"
1193
+ placement="bottomLeft"
1194
+ selectedValue=""
1195
+ showBadge={true}
1196
+ width="105px"
1197
+ />
1198
+ </CapRow>
1199
+ <Component />
1200
+ <Component />
1201
+ <div
1202
+ className="template-listing-header-actions"
1203
+ >
1204
+ <CapButton
1205
+ className="create-new-whatsapp margin-l-8 margin-b-12"
1206
+ disabled={false}
1207
+ onClick={[Function]}
1208
+ type="primary"
1209
+ >
1210
+ Create new
1211
+ </CapButton>
1212
+ </div>
1213
+ </div>
1194
1214
  </div>
1195
- </div>
1215
+ </CapRow>
1196
1216
  <CapRow
1197
1217
  align="middle"
1198
1218
  className="selected-whatsapp-filters"
@@ -1309,7 +1329,10 @@ Click {{unsubscribe}} to unsubscribe
1309
1329
  </CapButton>,
1310
1330
  "key": "WHATSAPP-card-creatives_whatsapp6",
1311
1331
  "title": <CapRow
1312
- useLegacy={true}
1332
+ align="middle"
1333
+ gap={12}
1334
+ justify="start"
1335
+ type="flex"
1313
1336
  >
1314
1337
  <CapLabel
1315
1338
  className="whatsapp-rcs-template-name"
@@ -1486,173 +1509,178 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
1486
1509
  </CapHeading>
1487
1510
  }
1488
1511
  />
1489
- <div
1490
- className="action-container"
1512
+ <CapRow
1513
+ align="middle"
1514
+ className="filter-row"
1515
+ justify="space-between"
1516
+ type="flex"
1491
1517
  >
1492
- <ComponentWithLabel(CapInputSearch)
1493
- className="search-text"
1494
- disabled={false}
1495
- onChange={[Function]}
1496
- onClear={[Function]}
1497
- onScroll={[Function]}
1498
- placeholder="Search"
1499
- style={
1500
- Object {
1501
- "width": "210px",
1502
- }
1503
- }
1504
- value=""
1505
- />
1506
- <CapRow
1507
- align="middle"
1508
- className="whatsapp-filters"
1509
- gap={8}
1510
- type="flex"
1511
- >
1512
- <CapSelectFilter
1513
- data={
1514
- Array [
1515
- Object {
1516
- "key": "awaitingApproval",
1517
- "label": <FormattedMessage
1518
- defaultMessage="Awaiting approval"
1519
- id="creatives.containersV2.Whatsapp.awaitingApproval"
1520
- values={Object {}}
1521
- />,
1522
- "value": "awaitingApproval",
1523
- },
1524
- Object {
1525
- "key": "approved",
1526
- "label": <FormattedMessage
1527
- defaultMessage="Approved"
1528
- id="creatives.containersV2.Whatsapp.approved"
1529
- values={Object {}}
1530
- />,
1531
- "value": "approved",
1532
- },
1533
- Object {
1534
- "key": "rejected",
1535
- "label": <FormattedMessage
1536
- defaultMessage="Rejected"
1537
- id="creatives.containersV2.Whatsapp.rejected"
1538
- values={Object {}}
1539
- />,
1540
- "value": "rejected",
1541
- },
1542
- Object {
1543
- "key": "pending",
1544
- "label": <FormattedMessage
1545
- defaultMessage="Pending"
1546
- id="creatives.containersV2.Whatsapp.pending"
1547
- values={Object {}}
1548
- />,
1549
- "value": "pending",
1550
- },
1551
- Object {
1552
- "key": "paused",
1553
- "label": <FormattedMessage
1554
- defaultMessage="Paused"
1555
- id="creatives.containersV2.Whatsapp.paused"
1556
- values={Object {}}
1557
- />,
1558
- "value": "paused",
1559
- },
1560
- ]
1561
- }
1562
- onSelect={[Function]}
1563
- placeholder="Status"
1564
- placement="bottomLeft"
1565
- selectedValue=""
1566
- showBadge={true}
1567
- width="90px"
1568
- />
1569
- <CapSelectFilter
1570
- data={
1571
- Array [
1572
- Object {
1573
- "key": "utility",
1574
- "label": <FormattedMessage
1575
- defaultMessage="Utility"
1576
- id="creatives.containersV2.Whatsapp.utility"
1577
- values={Object {}}
1578
- />,
1579
- "tagColor": "#f2e7fe",
1580
- "tagTextColor": "#a451ff",
1581
- "tooltipLabel": <FormattedMessage
1582
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1583
- id="creatives.containersV2.Whatsapp.utilityTooltip"
1584
- values={Object {}}
1585
- />,
1586
- "value": "UTILITY",
1587
- },
1588
- Object {
1589
- "key": "marketing",
1590
- "label": <FormattedMessage
1591
- defaultMessage="Marketing"
1592
- id="creatives.containersV2.Whatsapp.marketing"
1593
- values={Object {}}
1594
- />,
1595
- "tagColor": "#ffe5d2",
1596
- "tagTextColor": "#f87d23",
1597
- "tooltipLabel": <FormattedMessage
1598
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1599
- id="creatives.containersV2.Whatsapp.marketingTooltip"
1600
- values={Object {}}
1601
- />,
1602
- "value": "MARKETING",
1603
- },
1604
- Object {
1605
- "key": "authentication",
1606
- "label": <FormattedMessage
1607
- defaultMessage="Authentication"
1608
- id="creatives.containersV2.Whatsapp.authentication"
1609
- values={Object {}}
1610
- />,
1611
- "tagColor": "#ecf7ec",
1612
- "tagTextColor": "#6bb56b",
1613
- "tooltipLabel": <FormattedMessage
1614
- defaultMessage="Send codes that allow your customers to securely access their accounts."
1615
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
1616
- values={Object {}}
1617
- />,
1618
- "value": "AUTHENTICATION",
1619
- },
1620
- ]
1621
- }
1622
- onSelect={[Function]}
1623
- overlayStyle={
1624
- Object {
1625
- "overflowY": "hidden",
1626
- }
1627
- }
1628
- placeholder="Category"
1629
- placement="bottomLeft"
1630
- selectedValue=""
1631
- showBadge={true}
1632
- width="105px"
1633
- />
1634
- </CapRow>
1635
- <Component />
1636
- <Component />
1637
1518
  <div
1638
- style={
1639
- Object {
1640
- "alignItems": "center",
1641
- "display": "flex",
1642
- "justifyContent": "space-between",
1643
- }
1644
- }
1519
+ className="filter-row-content"
1645
1520
  >
1646
- <CapButton
1647
- className="create-new-whatsapp margin-l-8 margin-b-12"
1648
- disabled={false}
1649
- onClick={[Function]}
1650
- type="primary"
1521
+ <div
1522
+ className="action-container"
1651
1523
  >
1652
- Create new
1653
- </CapButton>
1524
+ <ComponentWithLabel(CapInputSearch)
1525
+ className="search-text"
1526
+ disabled={false}
1527
+ onChange={[Function]}
1528
+ onClear={[Function]}
1529
+ onScroll={[Function]}
1530
+ placeholder="Search"
1531
+ style={
1532
+ Object {
1533
+ "width": "210px",
1534
+ }
1535
+ }
1536
+ value=""
1537
+ />
1538
+ <CapRow
1539
+ align="middle"
1540
+ className="whatsapp-filters"
1541
+ gap={8}
1542
+ type="flex"
1543
+ >
1544
+ <CapSelectFilter
1545
+ data={
1546
+ Array [
1547
+ Object {
1548
+ "key": "awaitingApproval",
1549
+ "label": <FormattedMessage
1550
+ defaultMessage="Awaiting approval"
1551
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
1552
+ values={Object {}}
1553
+ />,
1554
+ "value": "awaitingApproval",
1555
+ },
1556
+ Object {
1557
+ "key": "approved",
1558
+ "label": <FormattedMessage
1559
+ defaultMessage="Approved"
1560
+ id="creatives.containersV2.Whatsapp.approved"
1561
+ values={Object {}}
1562
+ />,
1563
+ "value": "approved",
1564
+ },
1565
+ Object {
1566
+ "key": "rejected",
1567
+ "label": <FormattedMessage
1568
+ defaultMessage="Rejected"
1569
+ id="creatives.containersV2.Whatsapp.rejected"
1570
+ values={Object {}}
1571
+ />,
1572
+ "value": "rejected",
1573
+ },
1574
+ Object {
1575
+ "key": "pending",
1576
+ "label": <FormattedMessage
1577
+ defaultMessage="Pending"
1578
+ id="creatives.containersV2.Whatsapp.pending"
1579
+ values={Object {}}
1580
+ />,
1581
+ "value": "pending",
1582
+ },
1583
+ Object {
1584
+ "key": "paused",
1585
+ "label": <FormattedMessage
1586
+ defaultMessage="Paused"
1587
+ id="creatives.containersV2.Whatsapp.paused"
1588
+ values={Object {}}
1589
+ />,
1590
+ "value": "paused",
1591
+ },
1592
+ ]
1593
+ }
1594
+ onSelect={[Function]}
1595
+ placeholder="Status"
1596
+ placement="bottomLeft"
1597
+ selectedValue=""
1598
+ showBadge={true}
1599
+ width="90px"
1600
+ />
1601
+ <CapSelectFilter
1602
+ data={
1603
+ Array [
1604
+ Object {
1605
+ "key": "utility",
1606
+ "label": <FormattedMessage
1607
+ defaultMessage="Utility"
1608
+ id="creatives.containersV2.Whatsapp.utility"
1609
+ values={Object {}}
1610
+ />,
1611
+ "tagColor": "#f2e7fe",
1612
+ "tagTextColor": "#a451ff",
1613
+ "tooltipLabel": <FormattedMessage
1614
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1615
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1616
+ values={Object {}}
1617
+ />,
1618
+ "value": "UTILITY",
1619
+ },
1620
+ Object {
1621
+ "key": "marketing",
1622
+ "label": <FormattedMessage
1623
+ defaultMessage="Marketing"
1624
+ id="creatives.containersV2.Whatsapp.marketing"
1625
+ values={Object {}}
1626
+ />,
1627
+ "tagColor": "#ffe5d2",
1628
+ "tagTextColor": "#f87d23",
1629
+ "tooltipLabel": <FormattedMessage
1630
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1631
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
1632
+ values={Object {}}
1633
+ />,
1634
+ "value": "MARKETING",
1635
+ },
1636
+ Object {
1637
+ "key": "authentication",
1638
+ "label": <FormattedMessage
1639
+ defaultMessage="Authentication"
1640
+ id="creatives.containersV2.Whatsapp.authentication"
1641
+ values={Object {}}
1642
+ />,
1643
+ "tagColor": "#ecf7ec",
1644
+ "tagTextColor": "#6bb56b",
1645
+ "tooltipLabel": <FormattedMessage
1646
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
1647
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1648
+ values={Object {}}
1649
+ />,
1650
+ "value": "AUTHENTICATION",
1651
+ },
1652
+ ]
1653
+ }
1654
+ onSelect={[Function]}
1655
+ overlayStyle={
1656
+ Object {
1657
+ "overflowY": "hidden",
1658
+ }
1659
+ }
1660
+ placeholder="Category"
1661
+ placement="bottomLeft"
1662
+ selectedValue=""
1663
+ showBadge={true}
1664
+ width="105px"
1665
+ />
1666
+ </CapRow>
1667
+ <Component />
1668
+ <Component />
1669
+ <div
1670
+ className="template-listing-header-actions"
1671
+ >
1672
+ <CapButton
1673
+ className="create-new-whatsapp margin-l-8 margin-b-12"
1674
+ disabled={false}
1675
+ onClick={[Function]}
1676
+ type="primary"
1677
+ >
1678
+ Create new
1679
+ </CapButton>
1680
+ </div>
1681
+ </div>
1654
1682
  </div>
1655
- </div>
1683
+ </CapRow>
1656
1684
  <CapRow
1657
1685
  align="middle"
1658
1686
  className="selected-whatsapp-filters"
@@ -1769,7 +1797,10 @@ Click {{unsubscribe}} to unsubscribe
1769
1797
  </CapButton>,
1770
1798
  "key": "WHATSAPP-card-creatives_whatsapp6",
1771
1799
  "title": <CapRow
1772
- useLegacy={true}
1800
+ align="middle"
1801
+ gap={12}
1802
+ justify="start"
1803
+ type="flex"
1773
1804
  >
1774
1805
  <CapLabel
1775
1806
  className="whatsapp-rcs-template-name"
@@ -1946,173 +1977,178 @@ exports[`Test Templates container Test max templates warning 1`] = `
1946
1977
  </CapHeading>
1947
1978
  }
1948
1979
  />
1949
- <div
1950
- className="action-container"
1980
+ <CapRow
1981
+ align="middle"
1982
+ className="filter-row"
1983
+ justify="space-between"
1984
+ type="flex"
1951
1985
  >
1952
- <ComponentWithLabel(CapInputSearch)
1953
- className="search-text"
1954
- disabled={false}
1955
- onChange={[Function]}
1956
- onClear={[Function]}
1957
- onScroll={[Function]}
1958
- placeholder="Search"
1959
- style={
1960
- Object {
1961
- "width": "210px",
1962
- }
1963
- }
1964
- value=""
1965
- />
1966
- <CapRow
1967
- align="middle"
1968
- className="whatsapp-filters"
1969
- gap={8}
1970
- type="flex"
1971
- >
1972
- <CapSelectFilter
1973
- data={
1974
- Array [
1975
- Object {
1976
- "key": "awaitingApproval",
1977
- "label": <FormattedMessage
1978
- defaultMessage="Awaiting approval"
1979
- id="creatives.containersV2.Whatsapp.awaitingApproval"
1980
- values={Object {}}
1981
- />,
1982
- "value": "awaitingApproval",
1983
- },
1984
- Object {
1985
- "key": "approved",
1986
- "label": <FormattedMessage
1987
- defaultMessage="Approved"
1988
- id="creatives.containersV2.Whatsapp.approved"
1989
- values={Object {}}
1990
- />,
1991
- "value": "approved",
1992
- },
1993
- Object {
1994
- "key": "rejected",
1995
- "label": <FormattedMessage
1996
- defaultMessage="Rejected"
1997
- id="creatives.containersV2.Whatsapp.rejected"
1998
- values={Object {}}
1999
- />,
2000
- "value": "rejected",
2001
- },
2002
- Object {
2003
- "key": "pending",
2004
- "label": <FormattedMessage
2005
- defaultMessage="Pending"
2006
- id="creatives.containersV2.Whatsapp.pending"
2007
- values={Object {}}
2008
- />,
2009
- "value": "pending",
2010
- },
2011
- Object {
2012
- "key": "paused",
2013
- "label": <FormattedMessage
2014
- defaultMessage="Paused"
2015
- id="creatives.containersV2.Whatsapp.paused"
2016
- values={Object {}}
2017
- />,
2018
- "value": "paused",
2019
- },
2020
- ]
2021
- }
2022
- onSelect={[Function]}
2023
- placeholder="Status"
2024
- placement="bottomLeft"
2025
- selectedValue=""
2026
- showBadge={true}
2027
- width="90px"
2028
- />
2029
- <CapSelectFilter
2030
- data={
2031
- Array [
2032
- Object {
2033
- "key": "utility",
2034
- "label": <FormattedMessage
2035
- defaultMessage="Utility"
2036
- id="creatives.containersV2.Whatsapp.utility"
2037
- values={Object {}}
2038
- />,
2039
- "tagColor": "#f2e7fe",
2040
- "tagTextColor": "#a451ff",
2041
- "tooltipLabel": <FormattedMessage
2042
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2043
- id="creatives.containersV2.Whatsapp.utilityTooltip"
2044
- values={Object {}}
2045
- />,
2046
- "value": "UTILITY",
2047
- },
2048
- Object {
2049
- "key": "marketing",
2050
- "label": <FormattedMessage
2051
- defaultMessage="Marketing"
2052
- id="creatives.containersV2.Whatsapp.marketing"
2053
- values={Object {}}
2054
- />,
2055
- "tagColor": "#ffe5d2",
2056
- "tagTextColor": "#f87d23",
2057
- "tooltipLabel": <FormattedMessage
2058
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2059
- id="creatives.containersV2.Whatsapp.marketingTooltip"
2060
- values={Object {}}
2061
- />,
2062
- "value": "MARKETING",
2063
- },
2064
- Object {
2065
- "key": "authentication",
2066
- "label": <FormattedMessage
2067
- defaultMessage="Authentication"
2068
- id="creatives.containersV2.Whatsapp.authentication"
2069
- values={Object {}}
2070
- />,
2071
- "tagColor": "#ecf7ec",
2072
- "tagTextColor": "#6bb56b",
2073
- "tooltipLabel": <FormattedMessage
2074
- defaultMessage="Send codes that allow your customers to securely access their accounts."
2075
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
2076
- values={Object {}}
2077
- />,
2078
- "value": "AUTHENTICATION",
2079
- },
2080
- ]
2081
- }
2082
- onSelect={[Function]}
2083
- overlayStyle={
2084
- Object {
2085
- "overflowY": "hidden",
2086
- }
2087
- }
2088
- placeholder="Category"
2089
- placement="bottomLeft"
2090
- selectedValue=""
2091
- showBadge={true}
2092
- width="105px"
2093
- />
2094
- </CapRow>
2095
- <Component />
2096
- <Component />
2097
1986
  <div
2098
- style={
2099
- Object {
2100
- "alignItems": "center",
2101
- "display": "flex",
2102
- "justifyContent": "space-between",
2103
- }
2104
- }
1987
+ className="filter-row-content"
2105
1988
  >
2106
- <CapButton
2107
- className="create-new-whatsapp margin-l-8 margin-b-12"
2108
- disabled={false}
2109
- onClick={[Function]}
2110
- type="primary"
1989
+ <div
1990
+ className="action-container"
2111
1991
  >
2112
- Create new
2113
- </CapButton>
1992
+ <ComponentWithLabel(CapInputSearch)
1993
+ className="search-text"
1994
+ disabled={false}
1995
+ onChange={[Function]}
1996
+ onClear={[Function]}
1997
+ onScroll={[Function]}
1998
+ placeholder="Search"
1999
+ style={
2000
+ Object {
2001
+ "width": "210px",
2002
+ }
2003
+ }
2004
+ value=""
2005
+ />
2006
+ <CapRow
2007
+ align="middle"
2008
+ className="whatsapp-filters"
2009
+ gap={8}
2010
+ type="flex"
2011
+ >
2012
+ <CapSelectFilter
2013
+ data={
2014
+ Array [
2015
+ Object {
2016
+ "key": "awaitingApproval",
2017
+ "label": <FormattedMessage
2018
+ defaultMessage="Awaiting approval"
2019
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
2020
+ values={Object {}}
2021
+ />,
2022
+ "value": "awaitingApproval",
2023
+ },
2024
+ Object {
2025
+ "key": "approved",
2026
+ "label": <FormattedMessage
2027
+ defaultMessage="Approved"
2028
+ id="creatives.containersV2.Whatsapp.approved"
2029
+ values={Object {}}
2030
+ />,
2031
+ "value": "approved",
2032
+ },
2033
+ Object {
2034
+ "key": "rejected",
2035
+ "label": <FormattedMessage
2036
+ defaultMessage="Rejected"
2037
+ id="creatives.containersV2.Whatsapp.rejected"
2038
+ values={Object {}}
2039
+ />,
2040
+ "value": "rejected",
2041
+ },
2042
+ Object {
2043
+ "key": "pending",
2044
+ "label": <FormattedMessage
2045
+ defaultMessage="Pending"
2046
+ id="creatives.containersV2.Whatsapp.pending"
2047
+ values={Object {}}
2048
+ />,
2049
+ "value": "pending",
2050
+ },
2051
+ Object {
2052
+ "key": "paused",
2053
+ "label": <FormattedMessage
2054
+ defaultMessage="Paused"
2055
+ id="creatives.containersV2.Whatsapp.paused"
2056
+ values={Object {}}
2057
+ />,
2058
+ "value": "paused",
2059
+ },
2060
+ ]
2061
+ }
2062
+ onSelect={[Function]}
2063
+ placeholder="Status"
2064
+ placement="bottomLeft"
2065
+ selectedValue=""
2066
+ showBadge={true}
2067
+ width="90px"
2068
+ />
2069
+ <CapSelectFilter
2070
+ data={
2071
+ Array [
2072
+ Object {
2073
+ "key": "utility",
2074
+ "label": <FormattedMessage
2075
+ defaultMessage="Utility"
2076
+ id="creatives.containersV2.Whatsapp.utility"
2077
+ values={Object {}}
2078
+ />,
2079
+ "tagColor": "#f2e7fe",
2080
+ "tagTextColor": "#a451ff",
2081
+ "tooltipLabel": <FormattedMessage
2082
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2083
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2084
+ values={Object {}}
2085
+ />,
2086
+ "value": "UTILITY",
2087
+ },
2088
+ Object {
2089
+ "key": "marketing",
2090
+ "label": <FormattedMessage
2091
+ defaultMessage="Marketing"
2092
+ id="creatives.containersV2.Whatsapp.marketing"
2093
+ values={Object {}}
2094
+ />,
2095
+ "tagColor": "#ffe5d2",
2096
+ "tagTextColor": "#f87d23",
2097
+ "tooltipLabel": <FormattedMessage
2098
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2099
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2100
+ values={Object {}}
2101
+ />,
2102
+ "value": "MARKETING",
2103
+ },
2104
+ Object {
2105
+ "key": "authentication",
2106
+ "label": <FormattedMessage
2107
+ defaultMessage="Authentication"
2108
+ id="creatives.containersV2.Whatsapp.authentication"
2109
+ values={Object {}}
2110
+ />,
2111
+ "tagColor": "#ecf7ec",
2112
+ "tagTextColor": "#6bb56b",
2113
+ "tooltipLabel": <FormattedMessage
2114
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2115
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2116
+ values={Object {}}
2117
+ />,
2118
+ "value": "AUTHENTICATION",
2119
+ },
2120
+ ]
2121
+ }
2122
+ onSelect={[Function]}
2123
+ overlayStyle={
2124
+ Object {
2125
+ "overflowY": "hidden",
2126
+ }
2127
+ }
2128
+ placeholder="Category"
2129
+ placement="bottomLeft"
2130
+ selectedValue=""
2131
+ showBadge={true}
2132
+ width="105px"
2133
+ />
2134
+ </CapRow>
2135
+ <Component />
2136
+ <Component />
2137
+ <div
2138
+ className="template-listing-header-actions"
2139
+ >
2140
+ <CapButton
2141
+ className="create-new-whatsapp margin-l-8 margin-b-12"
2142
+ disabled={false}
2143
+ onClick={[Function]}
2144
+ type="primary"
2145
+ >
2146
+ Create new
2147
+ </CapButton>
2148
+ </div>
2149
+ </div>
2114
2150
  </div>
2115
- </div>
2151
+ </CapRow>
2116
2152
  <CapRow
2117
2153
  align="middle"
2118
2154
  className="selected-whatsapp-filters"
@@ -2229,7 +2265,10 @@ Click {{unsubscribe}} to unsubscribe
2229
2265
  </CapButton>,
2230
2266
  "key": "WHATSAPP-card-creatives_whatsapp6",
2231
2267
  "title": <CapRow
2232
- useLegacy={true}
2268
+ align="middle"
2269
+ gap={12}
2270
+ justify="start"
2271
+ type="flex"
2233
2272
  >
2234
2273
  <CapLabel
2235
2274
  className="whatsapp-rcs-template-name"
@@ -2406,119 +2445,124 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
2406
2445
  </CapHeading>
2407
2446
  }
2408
2447
  />
2409
- <div
2410
- className="action-container"
2448
+ <CapRow
2449
+ align="middle"
2450
+ className="filter-row"
2451
+ justify="space-between"
2452
+ type="flex"
2411
2453
  >
2412
- <ComponentWithLabel(CapInputSearch)
2413
- className="search-text"
2414
- disabled={false}
2415
- onChange={[Function]}
2416
- onClear={[Function]}
2417
- onScroll={[Function]}
2418
- placeholder="Search"
2419
- style={
2420
- Object {
2421
- "width": "210px",
2422
- }
2423
- }
2424
- value=""
2425
- />
2426
- <CapRow
2427
- align="middle"
2428
- className="whatsapp-filters"
2429
- gap={8}
2430
- type="flex"
2454
+ <div
2455
+ className="filter-row-content"
2431
2456
  >
2432
- <CapSelectFilter
2433
- data={
2434
- Array [
2435
- Object {
2436
- "key": "utility",
2437
- "label": <FormattedMessage
2438
- defaultMessage="Utility"
2439
- id="creatives.containersV2.Whatsapp.utility"
2440
- values={Object {}}
2441
- />,
2442
- "tagColor": "#f2e7fe",
2443
- "tagTextColor": "#a451ff",
2444
- "tooltipLabel": <FormattedMessage
2445
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2446
- id="creatives.containersV2.Whatsapp.utilityTooltip"
2447
- values={Object {}}
2448
- />,
2449
- "value": "UTILITY",
2450
- },
2451
- Object {
2452
- "key": "marketing",
2453
- "label": <FormattedMessage
2454
- defaultMessage="Marketing"
2455
- id="creatives.containersV2.Whatsapp.marketing"
2456
- values={Object {}}
2457
- />,
2458
- "tagColor": "#ffe5d2",
2459
- "tagTextColor": "#f87d23",
2460
- "tooltipLabel": <FormattedMessage
2461
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2462
- id="creatives.containersV2.Whatsapp.marketingTooltip"
2463
- values={Object {}}
2464
- />,
2465
- "value": "MARKETING",
2466
- },
2457
+ <div
2458
+ className="action-container"
2459
+ >
2460
+ <ComponentWithLabel(CapInputSearch)
2461
+ className="search-text"
2462
+ disabled={false}
2463
+ onChange={[Function]}
2464
+ onClear={[Function]}
2465
+ onScroll={[Function]}
2466
+ placeholder="Search"
2467
+ style={
2467
2468
  Object {
2468
- "key": "authentication",
2469
- "label": <FormattedMessage
2470
- defaultMessage="Authentication"
2471
- id="creatives.containersV2.Whatsapp.authentication"
2472
- values={Object {}}
2473
- />,
2474
- "tagColor": "#ecf7ec",
2475
- "tagTextColor": "#6bb56b",
2476
- "tooltipLabel": <FormattedMessage
2477
- defaultMessage="Send codes that allow your customers to securely access their accounts."
2478
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
2479
- values={Object {}}
2480
- />,
2481
- "value": "AUTHENTICATION",
2482
- },
2483
- ]
2484
- }
2485
- onSelect={[Function]}
2486
- overlayStyle={
2487
- Object {
2488
- "overflowY": "hidden",
2469
+ "width": "210px",
2470
+ }
2489
2471
  }
2490
- }
2491
- placeholder="Category"
2492
- placement="bottomLeft"
2493
- selectedValue="ALERT_UPDATE"
2494
- showBadge={true}
2495
- width="105px"
2496
- />
2497
- </CapRow>
2498
- <Component />
2499
- <Component />
2500
- <div
2501
- style={
2502
- Object {
2503
- "alignItems": "center",
2504
- "display": "flex",
2505
- "justifyContent": "space-between",
2506
- }
2507
- }
2508
- >
2509
- <CapLink
2510
- className="create-new-link"
2511
- onClick={[Function]}
2512
- suffix={
2513
- <CapIcon
2514
- size="s"
2515
- type="open-in-new"
2472
+ value=""
2473
+ />
2474
+ <CapRow
2475
+ align="middle"
2476
+ className="whatsapp-filters"
2477
+ gap={8}
2478
+ type="flex"
2479
+ >
2480
+ <CapSelectFilter
2481
+ data={
2482
+ Array [
2483
+ Object {
2484
+ "key": "utility",
2485
+ "label": <FormattedMessage
2486
+ defaultMessage="Utility"
2487
+ id="creatives.containersV2.Whatsapp.utility"
2488
+ values={Object {}}
2489
+ />,
2490
+ "tagColor": "#f2e7fe",
2491
+ "tagTextColor": "#a451ff",
2492
+ "tooltipLabel": <FormattedMessage
2493
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2494
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2495
+ values={Object {}}
2496
+ />,
2497
+ "value": "UTILITY",
2498
+ },
2499
+ Object {
2500
+ "key": "marketing",
2501
+ "label": <FormattedMessage
2502
+ defaultMessage="Marketing"
2503
+ id="creatives.containersV2.Whatsapp.marketing"
2504
+ values={Object {}}
2505
+ />,
2506
+ "tagColor": "#ffe5d2",
2507
+ "tagTextColor": "#f87d23",
2508
+ "tooltipLabel": <FormattedMessage
2509
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2510
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2511
+ values={Object {}}
2512
+ />,
2513
+ "value": "MARKETING",
2514
+ },
2515
+ Object {
2516
+ "key": "authentication",
2517
+ "label": <FormattedMessage
2518
+ defaultMessage="Authentication"
2519
+ id="creatives.containersV2.Whatsapp.authentication"
2520
+ values={Object {}}
2521
+ />,
2522
+ "tagColor": "#ecf7ec",
2523
+ "tagTextColor": "#6bb56b",
2524
+ "tooltipLabel": <FormattedMessage
2525
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2526
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2527
+ values={Object {}}
2528
+ />,
2529
+ "value": "AUTHENTICATION",
2530
+ },
2531
+ ]
2532
+ }
2533
+ onSelect={[Function]}
2534
+ overlayStyle={
2535
+ Object {
2536
+ "overflowY": "hidden",
2537
+ }
2538
+ }
2539
+ placeholder="Category"
2540
+ placement="bottomLeft"
2541
+ selectedValue="ALERT_UPDATE"
2542
+ showBadge={true}
2543
+ width="105px"
2516
2544
  />
2517
- }
2518
- title="Create new template"
2519
- />
2545
+ </CapRow>
2546
+ <Component />
2547
+ <Component />
2548
+ <div
2549
+ className="template-listing-header-actions"
2550
+ >
2551
+ <CapLink
2552
+ className="create-new-link"
2553
+ onClick={[Function]}
2554
+ suffix={
2555
+ <CapIcon
2556
+ size="s"
2557
+ type="open-in-new"
2558
+ />
2559
+ }
2560
+ title="Create new template"
2561
+ />
2562
+ </div>
2563
+ </div>
2520
2564
  </div>
2521
- </div>
2565
+ </CapRow>
2522
2566
  <CapRow
2523
2567
  align="middle"
2524
2568
  className="selected-whatsapp-filters"
@@ -2671,119 +2715,124 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
2671
2715
  </CapHeading>
2672
2716
  }
2673
2717
  />
2674
- <div
2675
- className="action-container"
2718
+ <CapRow
2719
+ align="middle"
2720
+ className="filter-row"
2721
+ justify="space-between"
2722
+ type="flex"
2676
2723
  >
2677
- <ComponentWithLabel(CapInputSearch)
2678
- className="search-text"
2679
- disabled={false}
2680
- onChange={[Function]}
2681
- onClear={[Function]}
2682
- onScroll={[Function]}
2683
- placeholder="Search"
2684
- style={
2685
- Object {
2686
- "width": "210px",
2687
- }
2688
- }
2689
- value=""
2690
- />
2691
- <CapRow
2692
- align="middle"
2693
- className="whatsapp-filters"
2694
- gap={8}
2695
- type="flex"
2724
+ <div
2725
+ className="filter-row-content"
2696
2726
  >
2697
- <CapSelectFilter
2698
- data={
2699
- Array [
2700
- Object {
2701
- "key": "utility",
2702
- "label": <FormattedMessage
2703
- defaultMessage="Utility"
2704
- id="creatives.containersV2.Whatsapp.utility"
2705
- values={Object {}}
2706
- />,
2707
- "tagColor": "#f2e7fe",
2708
- "tagTextColor": "#a451ff",
2709
- "tooltipLabel": <FormattedMessage
2710
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2711
- id="creatives.containersV2.Whatsapp.utilityTooltip"
2712
- values={Object {}}
2713
- />,
2714
- "value": "UTILITY",
2715
- },
2716
- Object {
2717
- "key": "marketing",
2718
- "label": <FormattedMessage
2719
- defaultMessage="Marketing"
2720
- id="creatives.containersV2.Whatsapp.marketing"
2721
- values={Object {}}
2722
- />,
2723
- "tagColor": "#ffe5d2",
2724
- "tagTextColor": "#f87d23",
2725
- "tooltipLabel": <FormattedMessage
2726
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2727
- id="creatives.containersV2.Whatsapp.marketingTooltip"
2728
- values={Object {}}
2729
- />,
2730
- "value": "MARKETING",
2731
- },
2727
+ <div
2728
+ className="action-container"
2729
+ >
2730
+ <ComponentWithLabel(CapInputSearch)
2731
+ className="search-text"
2732
+ disabled={false}
2733
+ onChange={[Function]}
2734
+ onClear={[Function]}
2735
+ onScroll={[Function]}
2736
+ placeholder="Search"
2737
+ style={
2732
2738
  Object {
2733
- "key": "authentication",
2734
- "label": <FormattedMessage
2735
- defaultMessage="Authentication"
2736
- id="creatives.containersV2.Whatsapp.authentication"
2737
- values={Object {}}
2738
- />,
2739
- "tagColor": "#ecf7ec",
2740
- "tagTextColor": "#6bb56b",
2741
- "tooltipLabel": <FormattedMessage
2742
- defaultMessage="Send codes that allow your customers to securely access their accounts."
2743
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
2744
- values={Object {}}
2745
- />,
2746
- "value": "AUTHENTICATION",
2747
- },
2748
- ]
2749
- }
2750
- onSelect={[Function]}
2751
- overlayStyle={
2752
- Object {
2753
- "overflowY": "hidden",
2739
+ "width": "210px",
2740
+ }
2754
2741
  }
2755
- }
2756
- placeholder="Category"
2757
- placement="bottomLeft"
2758
- selectedValue={null}
2759
- showBadge={true}
2760
- width="105px"
2761
- />
2762
- </CapRow>
2763
- <Component />
2764
- <Component />
2765
- <div
2766
- style={
2767
- Object {
2768
- "alignItems": "center",
2769
- "display": "flex",
2770
- "justifyContent": "space-between",
2771
- }
2772
- }
2773
- >
2774
- <CapLink
2775
- className="create-new-link"
2776
- onClick={[Function]}
2777
- suffix={
2778
- <CapIcon
2779
- size="s"
2780
- type="open-in-new"
2742
+ value=""
2743
+ />
2744
+ <CapRow
2745
+ align="middle"
2746
+ className="whatsapp-filters"
2747
+ gap={8}
2748
+ type="flex"
2749
+ >
2750
+ <CapSelectFilter
2751
+ data={
2752
+ Array [
2753
+ Object {
2754
+ "key": "utility",
2755
+ "label": <FormattedMessage
2756
+ defaultMessage="Utility"
2757
+ id="creatives.containersV2.Whatsapp.utility"
2758
+ values={Object {}}
2759
+ />,
2760
+ "tagColor": "#f2e7fe",
2761
+ "tagTextColor": "#a451ff",
2762
+ "tooltipLabel": <FormattedMessage
2763
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2764
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2765
+ values={Object {}}
2766
+ />,
2767
+ "value": "UTILITY",
2768
+ },
2769
+ Object {
2770
+ "key": "marketing",
2771
+ "label": <FormattedMessage
2772
+ defaultMessage="Marketing"
2773
+ id="creatives.containersV2.Whatsapp.marketing"
2774
+ values={Object {}}
2775
+ />,
2776
+ "tagColor": "#ffe5d2",
2777
+ "tagTextColor": "#f87d23",
2778
+ "tooltipLabel": <FormattedMessage
2779
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2780
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2781
+ values={Object {}}
2782
+ />,
2783
+ "value": "MARKETING",
2784
+ },
2785
+ Object {
2786
+ "key": "authentication",
2787
+ "label": <FormattedMessage
2788
+ defaultMessage="Authentication"
2789
+ id="creatives.containersV2.Whatsapp.authentication"
2790
+ values={Object {}}
2791
+ />,
2792
+ "tagColor": "#ecf7ec",
2793
+ "tagTextColor": "#6bb56b",
2794
+ "tooltipLabel": <FormattedMessage
2795
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2796
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2797
+ values={Object {}}
2798
+ />,
2799
+ "value": "AUTHENTICATION",
2800
+ },
2801
+ ]
2802
+ }
2803
+ onSelect={[Function]}
2804
+ overlayStyle={
2805
+ Object {
2806
+ "overflowY": "hidden",
2807
+ }
2808
+ }
2809
+ placeholder="Category"
2810
+ placement="bottomLeft"
2811
+ selectedValue={null}
2812
+ showBadge={true}
2813
+ width="105px"
2781
2814
  />
2782
- }
2783
- title="Create new template"
2784
- />
2815
+ </CapRow>
2816
+ <Component />
2817
+ <Component />
2818
+ <div
2819
+ className="template-listing-header-actions"
2820
+ >
2821
+ <CapLink
2822
+ className="create-new-link"
2823
+ onClick={[Function]}
2824
+ suffix={
2825
+ <CapIcon
2826
+ size="s"
2827
+ type="open-in-new"
2828
+ />
2829
+ }
2830
+ title="Create new template"
2831
+ />
2832
+ </div>
2833
+ </div>
2785
2834
  </div>
2786
- </div>
2835
+ </CapRow>
2787
2836
  <CapRow
2788
2837
  align="middle"
2789
2838
  className="selected-whatsapp-filters"
@@ -2911,119 +2960,124 @@ exports[`Test Templates container Test removing single filter 1`] = `
2911
2960
  </CapHeading>
2912
2961
  }
2913
2962
  />
2914
- <div
2915
- className="action-container"
2963
+ <CapRow
2964
+ align="middle"
2965
+ className="filter-row"
2966
+ justify="space-between"
2967
+ type="flex"
2916
2968
  >
2917
- <ComponentWithLabel(CapInputSearch)
2918
- className="search-text"
2919
- disabled={false}
2920
- onChange={[Function]}
2921
- onClear={[Function]}
2922
- onScroll={[Function]}
2923
- placeholder="Search"
2924
- style={
2925
- Object {
2926
- "width": "210px",
2927
- }
2928
- }
2929
- value=""
2930
- />
2931
- <CapRow
2932
- align="middle"
2933
- className="whatsapp-filters"
2934
- gap={8}
2935
- type="flex"
2969
+ <div
2970
+ className="filter-row-content"
2936
2971
  >
2937
- <CapSelectFilter
2938
- data={
2939
- Array [
2940
- Object {
2941
- "key": "utility",
2942
- "label": <FormattedMessage
2943
- defaultMessage="Utility"
2944
- id="creatives.containersV2.Whatsapp.utility"
2945
- values={Object {}}
2946
- />,
2947
- "tagColor": "#f2e7fe",
2948
- "tagTextColor": "#a451ff",
2949
- "tooltipLabel": <FormattedMessage
2950
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2951
- id="creatives.containersV2.Whatsapp.utilityTooltip"
2952
- values={Object {}}
2953
- />,
2954
- "value": "UTILITY",
2955
- },
2956
- Object {
2957
- "key": "marketing",
2958
- "label": <FormattedMessage
2959
- defaultMessage="Marketing"
2960
- id="creatives.containersV2.Whatsapp.marketing"
2961
- values={Object {}}
2962
- />,
2963
- "tagColor": "#ffe5d2",
2964
- "tagTextColor": "#f87d23",
2965
- "tooltipLabel": <FormattedMessage
2966
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2967
- id="creatives.containersV2.Whatsapp.marketingTooltip"
2968
- values={Object {}}
2969
- />,
2970
- "value": "MARKETING",
2971
- },
2972
+ <div
2973
+ className="action-container"
2974
+ >
2975
+ <ComponentWithLabel(CapInputSearch)
2976
+ className="search-text"
2977
+ disabled={false}
2978
+ onChange={[Function]}
2979
+ onClear={[Function]}
2980
+ onScroll={[Function]}
2981
+ placeholder="Search"
2982
+ style={
2972
2983
  Object {
2973
- "key": "authentication",
2974
- "label": <FormattedMessage
2975
- defaultMessage="Authentication"
2976
- id="creatives.containersV2.Whatsapp.authentication"
2977
- values={Object {}}
2978
- />,
2979
- "tagColor": "#ecf7ec",
2980
- "tagTextColor": "#6bb56b",
2981
- "tooltipLabel": <FormattedMessage
2982
- defaultMessage="Send codes that allow your customers to securely access their accounts."
2983
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
2984
- values={Object {}}
2985
- />,
2986
- "value": "AUTHENTICATION",
2987
- },
2988
- ]
2989
- }
2990
- onSelect={[Function]}
2991
- overlayStyle={
2992
- Object {
2993
- "overflowY": "hidden",
2984
+ "width": "210px",
2985
+ }
2994
2986
  }
2995
- }
2996
- placeholder="Category"
2997
- placement="bottomLeft"
2998
- selectedValue=""
2999
- showBadge={true}
3000
- width="105px"
3001
- />
3002
- </CapRow>
3003
- <Component />
3004
- <Component />
3005
- <div
3006
- style={
3007
- Object {
3008
- "alignItems": "center",
3009
- "display": "flex",
3010
- "justifyContent": "space-between",
3011
- }
3012
- }
3013
- >
3014
- <CapLink
3015
- className="create-new-link"
3016
- onClick={[Function]}
3017
- suffix={
3018
- <CapIcon
3019
- size="s"
3020
- type="open-in-new"
2987
+ value=""
2988
+ />
2989
+ <CapRow
2990
+ align="middle"
2991
+ className="whatsapp-filters"
2992
+ gap={8}
2993
+ type="flex"
2994
+ >
2995
+ <CapSelectFilter
2996
+ data={
2997
+ Array [
2998
+ Object {
2999
+ "key": "utility",
3000
+ "label": <FormattedMessage
3001
+ defaultMessage="Utility"
3002
+ id="creatives.containersV2.Whatsapp.utility"
3003
+ values={Object {}}
3004
+ />,
3005
+ "tagColor": "#f2e7fe",
3006
+ "tagTextColor": "#a451ff",
3007
+ "tooltipLabel": <FormattedMessage
3008
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
3009
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
3010
+ values={Object {}}
3011
+ />,
3012
+ "value": "UTILITY",
3013
+ },
3014
+ Object {
3015
+ "key": "marketing",
3016
+ "label": <FormattedMessage
3017
+ defaultMessage="Marketing"
3018
+ id="creatives.containersV2.Whatsapp.marketing"
3019
+ values={Object {}}
3020
+ />,
3021
+ "tagColor": "#ffe5d2",
3022
+ "tagTextColor": "#f87d23",
3023
+ "tooltipLabel": <FormattedMessage
3024
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
3025
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
3026
+ values={Object {}}
3027
+ />,
3028
+ "value": "MARKETING",
3029
+ },
3030
+ Object {
3031
+ "key": "authentication",
3032
+ "label": <FormattedMessage
3033
+ defaultMessage="Authentication"
3034
+ id="creatives.containersV2.Whatsapp.authentication"
3035
+ values={Object {}}
3036
+ />,
3037
+ "tagColor": "#ecf7ec",
3038
+ "tagTextColor": "#6bb56b",
3039
+ "tooltipLabel": <FormattedMessage
3040
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
3041
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
3042
+ values={Object {}}
3043
+ />,
3044
+ "value": "AUTHENTICATION",
3045
+ },
3046
+ ]
3047
+ }
3048
+ onSelect={[Function]}
3049
+ overlayStyle={
3050
+ Object {
3051
+ "overflowY": "hidden",
3052
+ }
3053
+ }
3054
+ placeholder="Category"
3055
+ placement="bottomLeft"
3056
+ selectedValue=""
3057
+ showBadge={true}
3058
+ width="105px"
3021
3059
  />
3022
- }
3023
- title="Create new template"
3024
- />
3060
+ </CapRow>
3061
+ <Component />
3062
+ <Component />
3063
+ <div
3064
+ className="template-listing-header-actions"
3065
+ >
3066
+ <CapLink
3067
+ className="create-new-link"
3068
+ onClick={[Function]}
3069
+ suffix={
3070
+ <CapIcon
3071
+ size="s"
3072
+ type="open-in-new"
3073
+ />
3074
+ }
3075
+ title="Create new template"
3076
+ />
3077
+ </div>
3078
+ </div>
3025
3079
  </div>
3026
- </div>
3080
+ </CapRow>
3027
3081
  <CapRow
3028
3082
  align="middle"
3029
3083
  className="selected-whatsapp-filters"