@capillarytech/creatives-library 8.0.348 → 8.0.349

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 (38) hide show
  1. package/package.json +1 -1
  2. package/services/api.js +20 -0
  3. package/services/tests/api.test.js +59 -0
  4. package/utils/tests/v2Common.test.js +46 -1
  5. package/utils/v2common.js +18 -0
  6. package/v2Components/CapCustomSkeleton/index.js +1 -1
  7. package/v2Components/CapCustomSkeleton/tests/__snapshots__/index.test.js.snap +12 -12
  8. package/v2Components/CommonTestAndPreview/UnifiedPreview/WhatsAppPreviewContent.js +6 -18
  9. package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +0 -27
  10. package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/WhatsAppPreviewContent.test.js +0 -48
  11. package/v2Components/TemplatePreview/_templatePreview.scss +0 -21
  12. package/v2Components/TemplatePreview/index.js +6 -18
  13. package/v2Components/TemplatePreview/tests/__snapshots__/index.test.js.snap +0 -1
  14. package/v2Containers/Assets/images/archive_Empty_Illustration.svg +9 -0
  15. package/v2Containers/CreativesContainer/SlideBoxFooter.js +3 -1
  16. package/v2Containers/CreativesContainer/index.js +6 -9
  17. package/v2Containers/CreativesContainer/messages.js +4 -0
  18. package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap +3 -0
  19. package/v2Containers/Templates/ChannelTypeIllustration.js +23 -6
  20. package/v2Containers/Templates/_templates.scss +179 -24
  21. package/v2Containers/Templates/actions.js +44 -0
  22. package/v2Containers/Templates/constants.js +31 -0
  23. package/v2Containers/Templates/index.js +361 -60
  24. package/v2Containers/Templates/messages.js +96 -0
  25. package/v2Containers/Templates/reducer.js +84 -1
  26. package/v2Containers/Templates/sagas.js +64 -0
  27. package/v2Containers/Templates/selectors.js +12 -0
  28. package/v2Containers/Templates/tests/ChannelTypeIllustration.test.js +12 -0
  29. package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +1300 -1122
  30. package/v2Containers/Templates/tests/index.test.js +6 -0
  31. package/v2Containers/Templates/tests/reducer.test.js +178 -0
  32. package/v2Containers/Templates/tests/sagas.test.js +390 -8
  33. package/v2Containers/Templates/tests/selector.test.js +32 -0
  34. package/v2Containers/TemplatesV2/TemplatesV2.style.js +1 -1
  35. package/v2Containers/Whatsapp/constants.js +0 -8
  36. package/v2Containers/Whatsapp/index.js +5 -142
  37. package/v2Containers/Whatsapp/index.scss +0 -8
  38. package/v2Containers/Whatsapp/messages.js +0 -16
package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap CHANGED
@@ -209,46 +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
- <_Class
216
- className="search-text"
217
- disabled={false}
218
- labelPosition="top"
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
218
  <div
233
- style={
234
- Object {
235
- "alignItems": "center",
236
- "display": "flex",
237
- "justifyContent": "space-between",
238
- }
239
- }
219
+ className="filter-row-content"
240
220
  >
241
- <CapButton
242
- className="create-new-sms margin-l-8 margin-b-12"
243
- disabled={false}
244
- isAddBtn={false}
245
- onClick={[Function]}
246
- type="primary"
221
+ <div
222
+ className="action-container"
247
223
  >
248
- Create new
249
- </CapButton>
224
+ <_Class
225
+ className="search-text"
226
+ disabled={false}
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"
243
+ >
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>
254
+ </div>
250
255
  </div>
251
- </div>
256
+ </CapRow>
252
257
  <div>
253
258
  <ChannelTypeIllustration
254
259
  createTemplate={[Function]}
@@ -403,120 +408,125 @@ exports[`Test Templates container Should render temlates when whatsapp templates
403
408
  }
404
409
  titleClass=""
405
410
  />
406
- <div
407
- className="action-container"
411
+ <CapRow
412
+ align="middle"
413
+ className="filter-row"
414
+ justify="space-between"
415
+ type="flex"
408
416
  >
409
- <_Class
410
- className="search-text"
411
- disabled={false}
412
- labelPosition="top"
413
- onChange={[Function]}
414
- onClear={[Function]}
415
- onScroll={[Function]}
416
- placeholder="Search"
417
- style={
418
- Object {
419
- "width": "210px",
420
- }
421
- }
422
- value=""
423
- />
424
417
  <div
425
- className="whatsapp-filters"
418
+ className="filter-row-content"
426
419
  >
427
- <CapSelectFilter
428
- data={
429
- Array [
430
- Object {
431
- "key": "utility",
432
- "label": <FormattedMessage
433
- defaultMessage="Utility"
434
- id="creatives.containersV2.Whatsapp.utility"
435
- values={Object {}}
436
- />,
437
- "tagColor": "#f2e7fe",
438
- "tagTextColor": "#a451ff",
439
- "tooltipLabel": <FormattedMessage
440
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
441
- id="creatives.containersV2.Whatsapp.utilityTooltip"
442
- values={Object {}}
443
- />,
444
- "value": "UTILITY",
445
- },
446
- Object {
447
- "key": "marketing",
448
- "label": <FormattedMessage
449
- defaultMessage="Marketing"
450
- id="creatives.containersV2.Whatsapp.marketing"
451
- values={Object {}}
452
- />,
453
- "tagColor": "#ffe5d2",
454
- "tagTextColor": "#f87d23",
455
- "tooltipLabel": <FormattedMessage
456
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
457
- id="creatives.containersV2.Whatsapp.marketingTooltip"
458
- values={Object {}}
459
- />,
460
- "value": "MARKETING",
461
- },
420
+ <div
421
+ className="action-container"
422
+ >
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={
462
432
  Object {
463
- "key": "authentication",
464
- "label": <FormattedMessage
465
- defaultMessage="Authentication"
466
- id="creatives.containersV2.Whatsapp.authentication"
467
- values={Object {}}
468
- />,
469
- "tagColor": "#ecf7ec",
470
- "tagTextColor": "#6bb56b",
471
- "tooltipLabel": <FormattedMessage
472
- defaultMessage="Send codes that allow your customers to securely access their accounts."
473
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
474
- values={Object {}}
475
- />,
476
- "value": "AUTHENTICATION",
477
- },
478
- ]
479
- }
480
- dropdownMaxHeight="320px"
481
- dropdownWidth="228px"
482
- onSelect={[Function]}
483
- overlayStyle={
484
- Object {
485
- "overflowY": "hidden",
433
+ "width": "210px",
434
+ }
486
435
  }
487
- }
488
- placeholder="Category"
489
- placement="bottomLeft"
490
- selectedValue=""
491
- showBadge={true}
492
- width="105px"
493
- />
494
- </div>
495
- <Component />
496
- <Component />
497
- <div
498
- style={
499
- Object {
500
- "alignItems": "center",
501
- "display": "flex",
502
- "justifyContent": "space-between",
503
- }
504
- }
505
- >
506
- <CapLink
507
- className="create-new-link"
508
- disabled={false}
509
- onClick={[Function]}
510
- suffix={
511
- <CapIcon
512
- size="s"
513
- type="open-in-new"
436
+ value=""
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"
514
507
  />
515
- }
516
- title="Create new template"
517
- />
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>
527
+ </div>
518
528
  </div>
519
- </div>
529
+ </CapRow>
520
530
  <CapRow
521
531
  align="middle"
522
532
  className="selected-whatsapp-filters"
@@ -650,176 +660,212 @@ exports[`Test Templates container Should render temlates when whatsapp templates
650
660
  }
651
661
  titleClass=""
652
662
  />
653
- <div
654
- className="action-container"
663
+ <CapRow
664
+ align="middle"
665
+ className="filter-row"
666
+ justify="space-between"
667
+ type="flex"
655
668
  >
656
- <_Class
657
- className="search-text"
658
- disabled={false}
659
- labelPosition="top"
660
- onChange={[Function]}
661
- onClear={[Function]}
662
- onScroll={[Function]}
663
- placeholder="Search"
664
- style={
665
- Object {
666
- "width": "210px",
667
- }
668
- }
669
- value=""
670
- />
671
669
  <div
672
- className="whatsapp-filters"
670
+ className="filter-row-content"
673
671
  >
674
- <CapSelectFilter
675
- data={
676
- Array [
677
- Object {
678
- "key": "awaitingApproval",
679
- "label": <FormattedMessage
680
- defaultMessage="Awaiting approval"
681
- id="creatives.containersV2.Whatsapp.awaitingApproval"
682
- values={Object {}}
683
- />,
684
- "value": "awaitingApproval",
685
- },
686
- Object {
687
- "key": "approved",
688
- "label": <FormattedMessage
689
- defaultMessage="Approved"
690
- id="creatives.containersV2.Whatsapp.approved"
691
- values={Object {}}
692
- />,
693
- "value": "approved",
694
- },
695
- Object {
696
- "key": "rejected",
697
- "label": <FormattedMessage
698
- defaultMessage="Rejected"
699
- id="creatives.containersV2.Whatsapp.rejected"
700
- values={Object {}}
701
- />,
702
- "value": "rejected",
703
- },
704
- Object {
705
- "key": "pending",
706
- "label": <FormattedMessage
707
- defaultMessage="Pending"
708
- id="creatives.containersV2.Whatsapp.pending"
709
- values={Object {}}
710
- />,
711
- "value": "pending",
712
- },
713
- Object {
714
- "key": "paused",
715
- "label": <FormattedMessage
716
- defaultMessage="Paused"
717
- id="creatives.containersV2.Whatsapp.paused"
718
- values={Object {}}
719
- />,
720
- "value": "paused",
721
- },
722
- ]
723
- }
724
- dropdownMaxHeight="320px"
725
- dropdownWidth="228px"
726
- onSelect={[Function]}
727
- placeholder="Status"
728
- placement="bottomLeft"
729
- selectedValue="approved"
730
- showBadge={true}
731
- width="90px"
732
- />
733
- <CapSelectFilter
734
- data={
735
- Array [
736
- Object {
737
- "key": "utility",
738
- "label": <FormattedMessage
739
- defaultMessage="Utility"
740
- id="creatives.containersV2.Whatsapp.utility"
741
- values={Object {}}
742
- />,
743
- "tagColor": "#f2e7fe",
744
- "tagTextColor": "#a451ff",
745
- "tooltipLabel": <FormattedMessage
746
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
747
- id="creatives.containersV2.Whatsapp.utilityTooltip"
748
- values={Object {}}
749
- />,
750
- "value": "UTILITY",
751
- },
752
- Object {
753
- "key": "marketing",
754
- "label": <FormattedMessage
755
- defaultMessage="Marketing"
756
- id="creatives.containersV2.Whatsapp.marketing"
757
- values={Object {}}
758
- />,
759
- "tagColor": "#ffe5d2",
760
- "tagTextColor": "#f87d23",
761
- "tooltipLabel": <FormattedMessage
762
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
763
- id="creatives.containersV2.Whatsapp.marketingTooltip"
764
- values={Object {}}
765
- />,
766
- "value": "MARKETING",
767
- },
672
+ <div
673
+ className="action-container"
674
+ >
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={
768
684
  Object {
769
- "key": "authentication",
770
- "label": <FormattedMessage
771
- defaultMessage="Authentication"
772
- id="creatives.containersV2.Whatsapp.authentication"
773
- values={Object {}}
774
- />,
775
- "tagColor": "#ecf7ec",
776
- "tagTextColor": "#6bb56b",
777
- "tooltipLabel": <FormattedMessage
778
- defaultMessage="Send codes that allow your customers to securely access their accounts."
779
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
780
- values={Object {}}
781
- />,
782
- "value": "AUTHENTICATION",
783
- },
784
- ]
785
- }
786
- dropdownMaxHeight="320px"
787
- dropdownWidth="228px"
788
- onSelect={[Function]}
789
- overlayStyle={
790
- Object {
791
- "overflowY": "hidden",
685
+ "width": "210px",
686
+ }
792
687
  }
793
- }
794
- placeholder="Category"
795
- placement="bottomLeft"
796
- selectedValue=""
797
- showBadge={true}
798
- width="105px"
799
- />
800
- </div>
801
- <Component />
802
- <Component />
803
- <div
804
- style={
805
- Object {
806
- "alignItems": "center",
807
- "display": "flex",
808
- "justifyContent": "space-between",
809
- }
810
- }
811
- >
812
- <CapButton
813
- className="create-new-whatsapp margin-l-8 margin-b-12"
814
- disabled={false}
815
- isAddBtn={false}
816
- onClick={[Function]}
817
- type="primary"
818
- >
819
- Create new
820
- </CapButton>
688
+ value=""
689
+ />
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"
824
+ >
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>
866
+ </div>
821
867
  </div>
822
- </div>
868
+ </CapRow>
823
869
  <CapRow
824
870
  align="middle"
825
871
  className="selected-whatsapp-filters"
@@ -1065,176 +1111,212 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
1065
1111
  }
1066
1112
  titleClass=""
1067
1113
  />
1068
- <div
1069
- className="action-container"
1114
+ <CapRow
1115
+ align="middle"
1116
+ className="filter-row"
1117
+ justify="space-between"
1118
+ type="flex"
1070
1119
  >
1071
- <_Class
1072
- className="search-text"
1073
- disabled={false}
1074
- labelPosition="top"
1075
- onChange={[Function]}
1076
- onClear={[Function]}
1077
- onScroll={[Function]}
1078
- placeholder="Search"
1079
- style={
1080
- Object {
1081
- "width": "210px",
1082
- }
1083
- }
1084
- value=""
1085
- />
1086
1120
  <div
1087
- className="whatsapp-filters"
1121
+ className="filter-row-content"
1088
1122
  >
1089
- <CapSelectFilter
1090
- data={
1091
- Array [
1092
- Object {
1093
- "key": "awaitingApproval",
1094
- "label": <FormattedMessage
1095
- defaultMessage="Awaiting approval"
1096
- id="creatives.containersV2.Whatsapp.awaitingApproval"
1097
- values={Object {}}
1098
- />,
1099
- "value": "awaitingApproval",
1100
- },
1101
- Object {
1102
- "key": "approved",
1103
- "label": <FormattedMessage
1104
- defaultMessage="Approved"
1105
- id="creatives.containersV2.Whatsapp.approved"
1106
- values={Object {}}
1107
- />,
1108
- "value": "approved",
1109
- },
1110
- Object {
1111
- "key": "rejected",
1112
- "label": <FormattedMessage
1113
- defaultMessage="Rejected"
1114
- id="creatives.containersV2.Whatsapp.rejected"
1115
- values={Object {}}
1116
- />,
1117
- "value": "rejected",
1118
- },
1119
- Object {
1120
- "key": "pending",
1121
- "label": <FormattedMessage
1122
- defaultMessage="Pending"
1123
- id="creatives.containersV2.Whatsapp.pending"
1124
- values={Object {}}
1125
- />,
1126
- "value": "pending",
1127
- },
1128
- Object {
1129
- "key": "paused",
1130
- "label": <FormattedMessage
1131
- defaultMessage="Paused"
1132
- id="creatives.containersV2.Whatsapp.paused"
1133
- values={Object {}}
1134
- />,
1135
- "value": "paused",
1136
- },
1137
- ]
1138
- }
1139
- dropdownMaxHeight="320px"
1140
- dropdownWidth="228px"
1141
- onSelect={[Function]}
1142
- placeholder="Status"
1143
- placement="bottomLeft"
1144
- selectedValue=""
1145
- showBadge={true}
1146
- width="90px"
1147
- />
1148
- <CapSelectFilter
1149
- data={
1150
- Array [
1151
- Object {
1152
- "key": "utility",
1153
- "label": <FormattedMessage
1154
- defaultMessage="Utility"
1155
- id="creatives.containersV2.Whatsapp.utility"
1156
- values={Object {}}
1157
- />,
1158
- "tagColor": "#f2e7fe",
1159
- "tagTextColor": "#a451ff",
1160
- "tooltipLabel": <FormattedMessage
1161
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1162
- id="creatives.containersV2.Whatsapp.utilityTooltip"
1163
- values={Object {}}
1164
- />,
1165
- "value": "UTILITY",
1166
- },
1167
- Object {
1168
- "key": "marketing",
1169
- "label": <FormattedMessage
1170
- defaultMessage="Marketing"
1171
- id="creatives.containersV2.Whatsapp.marketing"
1172
- values={Object {}}
1173
- />,
1174
- "tagColor": "#ffe5d2",
1175
- "tagTextColor": "#f87d23",
1176
- "tooltipLabel": <FormattedMessage
1177
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1178
- id="creatives.containersV2.Whatsapp.marketingTooltip"
1179
- values={Object {}}
1180
- />,
1181
- "value": "MARKETING",
1182
- },
1123
+ <div
1124
+ className="action-container"
1125
+ >
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={
1183
1135
  Object {
1184
- "key": "authentication",
1185
- "label": <FormattedMessage
1186
- defaultMessage="Authentication"
1187
- id="creatives.containersV2.Whatsapp.authentication"
1188
- values={Object {}}
1189
- />,
1190
- "tagColor": "#ecf7ec",
1191
- "tagTextColor": "#6bb56b",
1192
- "tooltipLabel": <FormattedMessage
1193
- defaultMessage="Send codes that allow your customers to securely access their accounts."
1194
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
1195
- values={Object {}}
1196
- />,
1197
- "value": "AUTHENTICATION",
1198
- },
1199
- ]
1200
- }
1201
- dropdownMaxHeight="320px"
1202
- dropdownWidth="228px"
1203
- onSelect={[Function]}
1204
- overlayStyle={
1205
- Object {
1206
- "overflowY": "hidden",
1136
+ "width": "210px",
1137
+ }
1207
1138
  }
1208
- }
1209
- placeholder="Category"
1210
- placement="bottomLeft"
1211
- selectedValue=""
1212
- showBadge={true}
1213
- width="105px"
1214
- />
1215
- </div>
1216
- <Component />
1217
- <Component />
1218
- <div
1219
- style={
1220
- Object {
1221
- "alignItems": "center",
1222
- "display": "flex",
1223
- "justifyContent": "space-between",
1224
- }
1225
- }
1226
- >
1227
- <CapButton
1228
- className="create-new-whatsapp margin-l-8 margin-b-12"
1229
- disabled={false}
1230
- isAddBtn={false}
1231
- onClick={[Function]}
1232
- type="primary"
1233
- >
1234
- Create new
1235
- </CapButton>
1139
+ value=""
1140
+ />
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"
1275
+ >
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>
1317
+ </div>
1236
1318
  </div>
1237
- </div>
1319
+ </CapRow>
1238
1320
  <CapRow
1239
1321
  align="middle"
1240
1322
  className="selected-whatsapp-filters"
@@ -1351,7 +1433,10 @@ Click {{unsubscribe}} to unsubscribe
1351
1433
  Overview
1352
1434
  </CapButton>,
1353
1435
  "key": "WHATSAPP-card-creatives_whatsapp6",
1354
- "title": <CapRow>
1436
+ "title": <CapRow
1437
+ align="middle"
1438
+ type="flex"
1439
+ >
1355
1440
  <CapLabel
1356
1441
  className="whatsapp-rcs-template-name"
1357
1442
  type="label1"
@@ -1530,176 +1615,212 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
1530
1615
  }
1531
1616
  titleClass=""
1532
1617
  />
1533
- <div
1534
- className="action-container"
1618
+ <CapRow
1619
+ align="middle"
1620
+ className="filter-row"
1621
+ justify="space-between"
1622
+ type="flex"
1535
1623
  >
1536
- <_Class
1537
- className="search-text"
1538
- disabled={false}
1539
- labelPosition="top"
1540
- onChange={[Function]}
1541
- onClear={[Function]}
1542
- onScroll={[Function]}
1543
- placeholder="Search"
1544
- style={
1545
- Object {
1546
- "width": "210px",
1547
- }
1548
- }
1549
- value=""
1550
- />
1551
1624
  <div
1552
- className="whatsapp-filters"
1625
+ className="filter-row-content"
1553
1626
  >
1554
- <CapSelectFilter
1555
- data={
1556
- Array [
1557
- Object {
1558
- "key": "awaitingApproval",
1559
- "label": <FormattedMessage
1560
- defaultMessage="Awaiting approval"
1561
- id="creatives.containersV2.Whatsapp.awaitingApproval"
1562
- values={Object {}}
1563
- />,
1564
- "value": "awaitingApproval",
1565
- },
1566
- Object {
1567
- "key": "approved",
1568
- "label": <FormattedMessage
1569
- defaultMessage="Approved"
1570
- id="creatives.containersV2.Whatsapp.approved"
1571
- values={Object {}}
1572
- />,
1573
- "value": "approved",
1574
- },
1575
- Object {
1576
- "key": "rejected",
1577
- "label": <FormattedMessage
1578
- defaultMessage="Rejected"
1579
- id="creatives.containersV2.Whatsapp.rejected"
1580
- values={Object {}}
1581
- />,
1582
- "value": "rejected",
1583
- },
1584
- Object {
1585
- "key": "pending",
1586
- "label": <FormattedMessage
1587
- defaultMessage="Pending"
1588
- id="creatives.containersV2.Whatsapp.pending"
1589
- values={Object {}}
1590
- />,
1591
- "value": "pending",
1592
- },
1593
- Object {
1594
- "key": "paused",
1595
- "label": <FormattedMessage
1596
- defaultMessage="Paused"
1597
- id="creatives.containersV2.Whatsapp.paused"
1598
- values={Object {}}
1599
- />,
1600
- "value": "paused",
1601
- },
1602
- ]
1603
- }
1604
- dropdownMaxHeight="320px"
1605
- dropdownWidth="228px"
1606
- onSelect={[Function]}
1607
- placeholder="Status"
1608
- placement="bottomLeft"
1609
- selectedValue=""
1610
- showBadge={true}
1611
- width="90px"
1612
- />
1613
- <CapSelectFilter
1614
- data={
1615
- Array [
1616
- Object {
1617
- "key": "utility",
1618
- "label": <FormattedMessage
1619
- defaultMessage="Utility"
1620
- id="creatives.containersV2.Whatsapp.utility"
1621
- values={Object {}}
1622
- />,
1623
- "tagColor": "#f2e7fe",
1624
- "tagTextColor": "#a451ff",
1625
- "tooltipLabel": <FormattedMessage
1626
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1627
- id="creatives.containersV2.Whatsapp.utilityTooltip"
1628
- values={Object {}}
1629
- />,
1630
- "value": "UTILITY",
1631
- },
1632
- Object {
1633
- "key": "marketing",
1634
- "label": <FormattedMessage
1635
- defaultMessage="Marketing"
1636
- id="creatives.containersV2.Whatsapp.marketing"
1637
- values={Object {}}
1638
- />,
1639
- "tagColor": "#ffe5d2",
1640
- "tagTextColor": "#f87d23",
1641
- "tooltipLabel": <FormattedMessage
1642
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1643
- id="creatives.containersV2.Whatsapp.marketingTooltip"
1644
- values={Object {}}
1645
- />,
1646
- "value": "MARKETING",
1647
- },
1627
+ <div
1628
+ className="action-container"
1629
+ >
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={
1648
1639
  Object {
1649
- "key": "authentication",
1650
- "label": <FormattedMessage
1651
- defaultMessage="Authentication"
1652
- id="creatives.containersV2.Whatsapp.authentication"
1653
- values={Object {}}
1654
- />,
1655
- "tagColor": "#ecf7ec",
1656
- "tagTextColor": "#6bb56b",
1657
- "tooltipLabel": <FormattedMessage
1658
- defaultMessage="Send codes that allow your customers to securely access their accounts."
1659
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
1660
- values={Object {}}
1661
- />,
1662
- "value": "AUTHENTICATION",
1663
- },
1664
- ]
1665
- }
1666
- dropdownMaxHeight="320px"
1667
- dropdownWidth="228px"
1668
- onSelect={[Function]}
1669
- overlayStyle={
1670
- Object {
1671
- "overflowY": "hidden",
1640
+ "width": "210px",
1641
+ }
1672
1642
  }
1673
- }
1674
- placeholder="Category"
1675
- placement="bottomLeft"
1676
- selectedValue=""
1677
- showBadge={true}
1678
- width="105px"
1679
- />
1680
- </div>
1681
- <Component />
1682
- <Component />
1683
- <div
1684
- style={
1685
- Object {
1686
- "alignItems": "center",
1687
- "display": "flex",
1688
- "justifyContent": "space-between",
1689
- }
1690
- }
1691
- >
1692
- <CapButton
1693
- className="create-new-whatsapp margin-l-8 margin-b-12"
1694
- disabled={false}
1695
- isAddBtn={false}
1696
- onClick={[Function]}
1697
- type="primary"
1698
- >
1699
- Create new
1700
- </CapButton>
1643
+ value=""
1644
+ />
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"
1779
+ >
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>
1821
+ </div>
1701
1822
  </div>
1702
- </div>
1823
+ </CapRow>
1703
1824
  <CapRow
1704
1825
  align="middle"
1705
1826
  className="selected-whatsapp-filters"
@@ -1816,7 +1937,10 @@ Click {{unsubscribe}} to unsubscribe
1816
1937
  Overview
1817
1938
  </CapButton>,
1818
1939
  "key": "WHATSAPP-card-creatives_whatsapp6",
1819
- "title": <CapRow>
1940
+ "title": <CapRow
1941
+ align="middle"
1942
+ type="flex"
1943
+ >
1820
1944
  <CapLabel
1821
1945
  className="whatsapp-rcs-template-name"
1822
1946
  type="label1"
@@ -1995,176 +2119,212 @@ exports[`Test Templates container Test max templates warning 1`] = `
1995
2119
  }
1996
2120
  titleClass=""
1997
2121
  />
1998
- <div
1999
- className="action-container"
2122
+ <CapRow
2123
+ align="middle"
2124
+ className="filter-row"
2125
+ justify="space-between"
2126
+ type="flex"
2000
2127
  >
2001
- <_Class
2002
- className="search-text"
2003
- disabled={false}
2004
- labelPosition="top"
2005
- onChange={[Function]}
2006
- onClear={[Function]}
2007
- onScroll={[Function]}
2008
- placeholder="Search"
2009
- style={
2010
- Object {
2011
- "width": "210px",
2012
- }
2013
- }
2014
- value=""
2015
- />
2016
2128
  <div
2017
- className="whatsapp-filters"
2129
+ className="filter-row-content"
2018
2130
  >
2019
- <CapSelectFilter
2020
- data={
2021
- Array [
2022
- Object {
2023
- "key": "awaitingApproval",
2024
- "label": <FormattedMessage
2025
- defaultMessage="Awaiting approval"
2026
- id="creatives.containersV2.Whatsapp.awaitingApproval"
2027
- values={Object {}}
2028
- />,
2029
- "value": "awaitingApproval",
2030
- },
2031
- Object {
2032
- "key": "approved",
2033
- "label": <FormattedMessage
2034
- defaultMessage="Approved"
2035
- id="creatives.containersV2.Whatsapp.approved"
2036
- values={Object {}}
2037
- />,
2038
- "value": "approved",
2039
- },
2040
- Object {
2041
- "key": "rejected",
2042
- "label": <FormattedMessage
2043
- defaultMessage="Rejected"
2044
- id="creatives.containersV2.Whatsapp.rejected"
2045
- values={Object {}}
2046
- />,
2047
- "value": "rejected",
2048
- },
2049
- Object {
2050
- "key": "pending",
2051
- "label": <FormattedMessage
2052
- defaultMessage="Pending"
2053
- id="creatives.containersV2.Whatsapp.pending"
2054
- values={Object {}}
2055
- />,
2056
- "value": "pending",
2057
- },
2058
- Object {
2059
- "key": "paused",
2060
- "label": <FormattedMessage
2061
- defaultMessage="Paused"
2062
- id="creatives.containersV2.Whatsapp.paused"
2063
- values={Object {}}
2064
- />,
2065
- "value": "paused",
2066
- },
2067
- ]
2068
- }
2069
- dropdownMaxHeight="320px"
2070
- dropdownWidth="228px"
2071
- onSelect={[Function]}
2072
- placeholder="Status"
2073
- placement="bottomLeft"
2074
- selectedValue=""
2075
- showBadge={true}
2076
- width="90px"
2077
- />
2078
- <CapSelectFilter
2079
- data={
2080
- Array [
2081
- Object {
2082
- "key": "utility",
2083
- "label": <FormattedMessage
2084
- defaultMessage="Utility"
2085
- id="creatives.containersV2.Whatsapp.utility"
2086
- values={Object {}}
2087
- />,
2088
- "tagColor": "#f2e7fe",
2089
- "tagTextColor": "#a451ff",
2090
- "tooltipLabel": <FormattedMessage
2091
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2092
- id="creatives.containersV2.Whatsapp.utilityTooltip"
2093
- values={Object {}}
2094
- />,
2095
- "value": "UTILITY",
2096
- },
2097
- Object {
2098
- "key": "marketing",
2099
- "label": <FormattedMessage
2100
- defaultMessage="Marketing"
2101
- id="creatives.containersV2.Whatsapp.marketing"
2102
- values={Object {}}
2103
- />,
2104
- "tagColor": "#ffe5d2",
2105
- "tagTextColor": "#f87d23",
2106
- "tooltipLabel": <FormattedMessage
2107
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2108
- id="creatives.containersV2.Whatsapp.marketingTooltip"
2109
- values={Object {}}
2110
- />,
2111
- "value": "MARKETING",
2112
- },
2131
+ <div
2132
+ className="action-container"
2133
+ >
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={
2113
2143
  Object {
2114
- "key": "authentication",
2115
- "label": <FormattedMessage
2116
- defaultMessage="Authentication"
2117
- id="creatives.containersV2.Whatsapp.authentication"
2118
- values={Object {}}
2119
- />,
2120
- "tagColor": "#ecf7ec",
2121
- "tagTextColor": "#6bb56b",
2122
- "tooltipLabel": <FormattedMessage
2123
- defaultMessage="Send codes that allow your customers to securely access their accounts."
2124
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
2125
- values={Object {}}
2126
- />,
2127
- "value": "AUTHENTICATION",
2128
- },
2129
- ]
2130
- }
2131
- dropdownMaxHeight="320px"
2132
- dropdownWidth="228px"
2133
- onSelect={[Function]}
2134
- overlayStyle={
2135
- Object {
2136
- "overflowY": "hidden",
2144
+ "width": "210px",
2145
+ }
2137
2146
  }
2138
- }
2139
- placeholder="Category"
2140
- placement="bottomLeft"
2141
- selectedValue=""
2142
- showBadge={true}
2143
- width="105px"
2144
- />
2145
- </div>
2146
- <Component />
2147
- <Component />
2148
- <div
2149
- style={
2150
- Object {
2151
- "alignItems": "center",
2152
- "display": "flex",
2153
- "justifyContent": "space-between",
2154
- }
2155
- }
2156
- >
2157
- <CapButton
2158
- className="create-new-whatsapp margin-l-8 margin-b-12"
2159
- disabled={false}
2160
- isAddBtn={false}
2161
- onClick={[Function]}
2162
- type="primary"
2163
- >
2164
- Create new
2165
- </CapButton>
2147
+ value=""
2148
+ />
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"
2283
+ >
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>
2325
+ </div>
2166
2326
  </div>
2167
- </div>
2327
+ </CapRow>
2168
2328
  <CapRow
2169
2329
  align="middle"
2170
2330
  className="selected-whatsapp-filters"
@@ -2281,7 +2441,10 @@ Click {{unsubscribe}} to unsubscribe
2281
2441
  Overview
2282
2442
  </CapButton>,
2283
2443
  "key": "WHATSAPP-card-creatives_whatsapp6",
2284
- "title": <CapRow>
2444
+ "title": <CapRow
2445
+ align="middle"
2446
+ type="flex"
2447
+ >
2285
2448
  <CapLabel
2286
2449
  className="whatsapp-rcs-template-name"
2287
2450
  type="label1"
@@ -2460,120 +2623,125 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
2460
2623
  }
2461
2624
  titleClass=""
2462
2625
  />
2463
- <div
2464
- className="action-container"
2626
+ <CapRow
2627
+ align="middle"
2628
+ className="filter-row"
2629
+ justify="space-between"
2630
+ type="flex"
2465
2631
  >
2466
- <_Class
2467
- className="search-text"
2468
- disabled={false}
2469
- labelPosition="top"
2470
- onChange={[Function]}
2471
- onClear={[Function]}
2472
- onScroll={[Function]}
2473
- placeholder="Search"
2474
- style={
2475
- Object {
2476
- "width": "210px",
2477
- }
2478
- }
2479
- value=""
2480
- />
2481
2632
  <div
2482
- className="whatsapp-filters"
2633
+ className="filter-row-content"
2483
2634
  >
2484
- <CapSelectFilter
2485
- data={
2486
- Array [
2487
- Object {
2488
- "key": "utility",
2489
- "label": <FormattedMessage
2490
- defaultMessage="Utility"
2491
- id="creatives.containersV2.Whatsapp.utility"
2492
- values={Object {}}
2493
- />,
2494
- "tagColor": "#f2e7fe",
2495
- "tagTextColor": "#a451ff",
2496
- "tooltipLabel": <FormattedMessage
2497
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2498
- id="creatives.containersV2.Whatsapp.utilityTooltip"
2499
- values={Object {}}
2500
- />,
2501
- "value": "UTILITY",
2502
- },
2503
- Object {
2504
- "key": "marketing",
2505
- "label": <FormattedMessage
2506
- defaultMessage="Marketing"
2507
- id="creatives.containersV2.Whatsapp.marketing"
2508
- values={Object {}}
2509
- />,
2510
- "tagColor": "#ffe5d2",
2511
- "tagTextColor": "#f87d23",
2512
- "tooltipLabel": <FormattedMessage
2513
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2514
- id="creatives.containersV2.Whatsapp.marketingTooltip"
2515
- values={Object {}}
2516
- />,
2517
- "value": "MARKETING",
2518
- },
2635
+ <div
2636
+ className="action-container"
2637
+ >
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={
2519
2647
  Object {
2520
- "key": "authentication",
2521
- "label": <FormattedMessage
2522
- defaultMessage="Authentication"
2523
- id="creatives.containersV2.Whatsapp.authentication"
2524
- values={Object {}}
2525
- />,
2526
- "tagColor": "#ecf7ec",
2527
- "tagTextColor": "#6bb56b",
2528
- "tooltipLabel": <FormattedMessage
2529
- defaultMessage="Send codes that allow your customers to securely access their accounts."
2530
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
2531
- values={Object {}}
2532
- />,
2533
- "value": "AUTHENTICATION",
2534
- },
2535
- ]
2536
- }
2537
- dropdownMaxHeight="320px"
2538
- dropdownWidth="228px"
2539
- onSelect={[Function]}
2540
- overlayStyle={
2541
- Object {
2542
- "overflowY": "hidden",
2648
+ "width": "210px",
2649
+ }
2543
2650
  }
2544
- }
2545
- placeholder="Category"
2546
- placement="bottomLeft"
2547
- selectedValue="ALERT_UPDATE"
2548
- showBadge={true}
2549
- width="105px"
2550
- />
2551
- </div>
2552
- <Component />
2553
- <Component />
2554
- <div
2555
- style={
2556
- Object {
2557
- "alignItems": "center",
2558
- "display": "flex",
2559
- "justifyContent": "space-between",
2560
- }
2561
- }
2562
- >
2563
- <CapLink
2564
- className="create-new-link"
2565
- disabled={false}
2566
- onClick={[Function]}
2567
- suffix={
2568
- <CapIcon
2569
- size="s"
2570
- type="open-in-new"
2651
+ value=""
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"
2571
2722
  />
2572
- }
2573
- title="Create new template"
2574
- />
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>
2742
+ </div>
2575
2743
  </div>
2576
- </div>
2744
+ </CapRow>
2577
2745
  <CapRow
2578
2746
  align="middle"
2579
2747
  className="selected-whatsapp-filters"
@@ -2733,120 +2901,125 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
2733
2901
  }
2734
2902
  titleClass=""
2735
2903
  />
2736
- <div
2737
- className="action-container"
2904
+ <CapRow
2905
+ align="middle"
2906
+ className="filter-row"
2907
+ justify="space-between"
2908
+ type="flex"
2738
2909
  >
2739
- <_Class
2740
- className="search-text"
2741
- disabled={false}
2742
- labelPosition="top"
2743
- onChange={[Function]}
2744
- onClear={[Function]}
2745
- onScroll={[Function]}
2746
- placeholder="Search"
2747
- style={
2748
- Object {
2749
- "width": "210px",
2750
- }
2751
- }
2752
- value=""
2753
- />
2754
2910
  <div
2755
- className="whatsapp-filters"
2911
+ className="filter-row-content"
2756
2912
  >
2757
- <CapSelectFilter
2758
- data={
2759
- Array [
2760
- Object {
2761
- "key": "utility",
2762
- "label": <FormattedMessage
2763
- defaultMessage="Utility"
2764
- id="creatives.containersV2.Whatsapp.utility"
2765
- values={Object {}}
2766
- />,
2767
- "tagColor": "#f2e7fe",
2768
- "tagTextColor": "#a451ff",
2769
- "tooltipLabel": <FormattedMessage
2770
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2771
- id="creatives.containersV2.Whatsapp.utilityTooltip"
2772
- values={Object {}}
2773
- />,
2774
- "value": "UTILITY",
2775
- },
2776
- Object {
2777
- "key": "marketing",
2778
- "label": <FormattedMessage
2779
- defaultMessage="Marketing"
2780
- id="creatives.containersV2.Whatsapp.marketing"
2781
- values={Object {}}
2782
- />,
2783
- "tagColor": "#ffe5d2",
2784
- "tagTextColor": "#f87d23",
2785
- "tooltipLabel": <FormattedMessage
2786
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2787
- id="creatives.containersV2.Whatsapp.marketingTooltip"
2788
- values={Object {}}
2789
- />,
2790
- "value": "MARKETING",
2791
- },
2913
+ <div
2914
+ className="action-container"
2915
+ >
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={
2792
2925
  Object {
2793
- "key": "authentication",
2794
- "label": <FormattedMessage
2795
- defaultMessage="Authentication"
2796
- id="creatives.containersV2.Whatsapp.authentication"
2797
- values={Object {}}
2798
- />,
2799
- "tagColor": "#ecf7ec",
2800
- "tagTextColor": "#6bb56b",
2801
- "tooltipLabel": <FormattedMessage
2802
- defaultMessage="Send codes that allow your customers to securely access their accounts."
2803
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
2804
- values={Object {}}
2805
- />,
2806
- "value": "AUTHENTICATION",
2807
- },
2808
- ]
2809
- }
2810
- dropdownMaxHeight="320px"
2811
- dropdownWidth="228px"
2812
- onSelect={[Function]}
2813
- overlayStyle={
2814
- Object {
2815
- "overflowY": "hidden",
2926
+ "width": "210px",
2927
+ }
2816
2928
  }
2817
- }
2818
- placeholder="Category"
2819
- placement="bottomLeft"
2820
- selectedValue={null}
2821
- showBadge={true}
2822
- width="105px"
2823
- />
2824
- </div>
2825
- <Component />
2826
- <Component />
2827
- <div
2828
- style={
2829
- Object {
2830
- "alignItems": "center",
2831
- "display": "flex",
2832
- "justifyContent": "space-between",
2833
- }
2834
- }
2835
- >
2836
- <CapLink
2837
- className="create-new-link"
2838
- disabled={false}
2839
- onClick={[Function]}
2840
- suffix={
2841
- <CapIcon
2842
- size="s"
2843
- type="open-in-new"
2929
+ value=""
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"
2844
3000
  />
2845
- }
2846
- title="Create new template"
2847
- />
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>
3020
+ </div>
2848
3021
  </div>
2849
- </div>
3022
+ </CapRow>
2850
3023
  <CapRow
2851
3024
  align="middle"
2852
3025
  className="selected-whatsapp-filters"
@@ -2980,120 +3153,125 @@ exports[`Test Templates container Test removing single filter 1`] = `
2980
3153
  }
2981
3154
  titleClass=""
2982
3155
  />
2983
- <div
2984
- className="action-container"
3156
+ <CapRow
3157
+ align="middle"
3158
+ className="filter-row"
3159
+ justify="space-between"
3160
+ type="flex"
2985
3161
  >
2986
- <_Class
2987
- className="search-text"
2988
- disabled={false}
2989
- labelPosition="top"
2990
- onChange={[Function]}
2991
- onClear={[Function]}
2992
- onScroll={[Function]}
2993
- placeholder="Search"
2994
- style={
2995
- Object {
2996
- "width": "210px",
2997
- }
2998
- }
2999
- value=""
3000
- />
3001
3162
  <div
3002
- className="whatsapp-filters"
3163
+ className="filter-row-content"
3003
3164
  >
3004
- <CapSelectFilter
3005
- data={
3006
- Array [
3007
- Object {
3008
- "key": "utility",
3009
- "label": <FormattedMessage
3010
- defaultMessage="Utility"
3011
- id="creatives.containersV2.Whatsapp.utility"
3012
- values={Object {}}
3013
- />,
3014
- "tagColor": "#f2e7fe",
3015
- "tagTextColor": "#a451ff",
3016
- "tooltipLabel": <FormattedMessage
3017
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
3018
- id="creatives.containersV2.Whatsapp.utilityTooltip"
3019
- values={Object {}}
3020
- />,
3021
- "value": "UTILITY",
3022
- },
3023
- Object {
3024
- "key": "marketing",
3025
- "label": <FormattedMessage
3026
- defaultMessage="Marketing"
3027
- id="creatives.containersV2.Whatsapp.marketing"
3028
- values={Object {}}
3029
- />,
3030
- "tagColor": "#ffe5d2",
3031
- "tagTextColor": "#f87d23",
3032
- "tooltipLabel": <FormattedMessage
3033
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
3034
- id="creatives.containersV2.Whatsapp.marketingTooltip"
3035
- values={Object {}}
3036
- />,
3037
- "value": "MARKETING",
3038
- },
3165
+ <div
3166
+ className="action-container"
3167
+ >
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={
3039
3177
  Object {
3040
- "key": "authentication",
3041
- "label": <FormattedMessage
3042
- defaultMessage="Authentication"
3043
- id="creatives.containersV2.Whatsapp.authentication"
3044
- values={Object {}}
3045
- />,
3046
- "tagColor": "#ecf7ec",
3047
- "tagTextColor": "#6bb56b",
3048
- "tooltipLabel": <FormattedMessage
3049
- defaultMessage="Send codes that allow your customers to securely access their accounts."
3050
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
3051
- values={Object {}}
3052
- />,
3053
- "value": "AUTHENTICATION",
3054
- },
3055
- ]
3056
- }
3057
- dropdownMaxHeight="320px"
3058
- dropdownWidth="228px"
3059
- onSelect={[Function]}
3060
- overlayStyle={
3061
- Object {
3062
- "overflowY": "hidden",
3178
+ "width": "210px",
3179
+ }
3063
3180
  }
3064
- }
3065
- placeholder="Category"
3066
- placement="bottomLeft"
3067
- selectedValue=""
3068
- showBadge={true}
3069
- width="105px"
3070
- />
3071
- </div>
3072
- <Component />
3073
- <Component />
3074
- <div
3075
- style={
3076
- Object {
3077
- "alignItems": "center",
3078
- "display": "flex",
3079
- "justifyContent": "space-between",
3080
- }
3081
- }
3082
- >
3083
- <CapLink
3084
- className="create-new-link"
3085
- disabled={false}
3086
- onClick={[Function]}
3087
- suffix={
3088
- <CapIcon
3089
- size="s"
3090
- type="open-in-new"
3181
+ value=""
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"
3091
3252
  />
3092
- }
3093
- title="Create new template"
3094
- />
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>
3272
+ </div>
3095
3273
  </div>
3096
- </div>
3274
+ </CapRow>
3097
3275
  <CapRow
3098
3276
  align="middle"
3099
3277
  className="selected-whatsapp-filters"