@capillarytech/creatives-library 8.0.348 → 8.0.350

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 (40) 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/tests/v2Common.test.js +46 -1
  7. package/utils/v2common.js +18 -0
  8. package/v2Components/CapCustomSkeleton/index.js +1 -1
  9. package/v2Components/CapCustomSkeleton/tests/__snapshots__/index.test.js.snap +12 -12
  10. package/v2Components/CommonTestAndPreview/UnifiedPreview/WhatsAppPreviewContent.js +6 -18
  11. package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +0 -27
  12. package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/WhatsAppPreviewContent.test.js +0 -48
  13. package/v2Components/TemplatePreview/_templatePreview.scss +0 -21
  14. package/v2Components/TemplatePreview/index.js +6 -18
  15. package/v2Components/TemplatePreview/tests/__snapshots__/index.test.js.snap +0 -1
  16. package/v2Containers/Assets/images/archive_Empty_Illustration.svg +9 -0
  17. package/v2Containers/CreativesContainer/SlideBoxFooter.js +3 -1
  18. package/v2Containers/CreativesContainer/index.js +6 -9
  19. package/v2Containers/CreativesContainer/messages.js +4 -0
  20. package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap +3 -0
  21. package/v2Containers/Templates/ChannelTypeIllustration.js +23 -6
  22. package/v2Containers/Templates/_templates.scss +180 -24
  23. package/v2Containers/Templates/actions.js +44 -0
  24. package/v2Containers/Templates/constants.js +31 -0
  25. package/v2Containers/Templates/index.js +364 -60
  26. package/v2Containers/Templates/messages.js +96 -0
  27. package/v2Containers/Templates/reducer.js +84 -1
  28. package/v2Containers/Templates/sagas.js +64 -0
  29. package/v2Containers/Templates/selectors.js +12 -0
  30. package/v2Containers/Templates/tests/ChannelTypeIllustration.test.js +12 -0
  31. package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +1176 -1122
  32. package/v2Containers/Templates/tests/index.test.js +6 -0
  33. package/v2Containers/Templates/tests/reducer.test.js +178 -0
  34. package/v2Containers/Templates/tests/sagas.test.js +390 -8
  35. package/v2Containers/Templates/tests/selector.test.js +32 -0
  36. package/v2Containers/TemplatesV2/TemplatesV2.style.js +1 -1
  37. package/v2Containers/Whatsapp/constants.js +0 -8
  38. package/v2Containers/Whatsapp/index.js +5 -142
  39. package/v2Containers/Whatsapp/index.scss +0 -8
  40. 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,181 @@ 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
+ </div>
835
+ </div>
821
836
  </div>
822
- </div>
837
+ </CapRow>
823
838
  <CapRow
824
839
  align="middle"
825
840
  className="selected-whatsapp-filters"
@@ -1065,176 +1080,181 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
1065
1080
  }
1066
1081
  titleClass=""
1067
1082
  />
1068
- <div
1069
- className="action-container"
1083
+ <CapRow
1084
+ align="middle"
1085
+ className="filter-row"
1086
+ justify="space-between"
1087
+ type="flex"
1070
1088
  >
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
1089
  <div
1087
- className="whatsapp-filters"
1090
+ className="filter-row-content"
1088
1091
  >
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
- },
1092
+ <div
1093
+ className="action-container"
1094
+ >
1095
+ <_Class
1096
+ className="search-text"
1097
+ disabled={false}
1098
+ labelPosition="top"
1099
+ onChange={[Function]}
1100
+ onClear={[Function]}
1101
+ onScroll={[Function]}
1102
+ placeholder="Search"
1103
+ style={
1183
1104
  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",
1105
+ "width": "210px",
1106
+ }
1207
1107
  }
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>
1108
+ value=""
1109
+ />
1110
+ <div
1111
+ className="whatsapp-filters"
1112
+ >
1113
+ <CapSelectFilter
1114
+ data={
1115
+ Array [
1116
+ Object {
1117
+ "key": "awaitingApproval",
1118
+ "label": <FormattedMessage
1119
+ defaultMessage="Awaiting approval"
1120
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
1121
+ values={Object {}}
1122
+ />,
1123
+ "value": "awaitingApproval",
1124
+ },
1125
+ Object {
1126
+ "key": "approved",
1127
+ "label": <FormattedMessage
1128
+ defaultMessage="Approved"
1129
+ id="creatives.containersV2.Whatsapp.approved"
1130
+ values={Object {}}
1131
+ />,
1132
+ "value": "approved",
1133
+ },
1134
+ Object {
1135
+ "key": "rejected",
1136
+ "label": <FormattedMessage
1137
+ defaultMessage="Rejected"
1138
+ id="creatives.containersV2.Whatsapp.rejected"
1139
+ values={Object {}}
1140
+ />,
1141
+ "value": "rejected",
1142
+ },
1143
+ Object {
1144
+ "key": "pending",
1145
+ "label": <FormattedMessage
1146
+ defaultMessage="Pending"
1147
+ id="creatives.containersV2.Whatsapp.pending"
1148
+ values={Object {}}
1149
+ />,
1150
+ "value": "pending",
1151
+ },
1152
+ Object {
1153
+ "key": "paused",
1154
+ "label": <FormattedMessage
1155
+ defaultMessage="Paused"
1156
+ id="creatives.containersV2.Whatsapp.paused"
1157
+ values={Object {}}
1158
+ />,
1159
+ "value": "paused",
1160
+ },
1161
+ ]
1162
+ }
1163
+ dropdownMaxHeight="320px"
1164
+ dropdownWidth="228px"
1165
+ onSelect={[Function]}
1166
+ placeholder="Status"
1167
+ placement="bottomLeft"
1168
+ selectedValue=""
1169
+ showBadge={true}
1170
+ width="90px"
1171
+ />
1172
+ <CapSelectFilter
1173
+ data={
1174
+ Array [
1175
+ Object {
1176
+ "key": "utility",
1177
+ "label": <FormattedMessage
1178
+ defaultMessage="Utility"
1179
+ id="creatives.containersV2.Whatsapp.utility"
1180
+ values={Object {}}
1181
+ />,
1182
+ "tagColor": "#f2e7fe",
1183
+ "tagTextColor": "#a451ff",
1184
+ "tooltipLabel": <FormattedMessage
1185
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1186
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1187
+ values={Object {}}
1188
+ />,
1189
+ "value": "UTILITY",
1190
+ },
1191
+ Object {
1192
+ "key": "marketing",
1193
+ "label": <FormattedMessage
1194
+ defaultMessage="Marketing"
1195
+ id="creatives.containersV2.Whatsapp.marketing"
1196
+ values={Object {}}
1197
+ />,
1198
+ "tagColor": "#ffe5d2",
1199
+ "tagTextColor": "#f87d23",
1200
+ "tooltipLabel": <FormattedMessage
1201
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1202
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
1203
+ values={Object {}}
1204
+ />,
1205
+ "value": "MARKETING",
1206
+ },
1207
+ Object {
1208
+ "key": "authentication",
1209
+ "label": <FormattedMessage
1210
+ defaultMessage="Authentication"
1211
+ id="creatives.containersV2.Whatsapp.authentication"
1212
+ values={Object {}}
1213
+ />,
1214
+ "tagColor": "#ecf7ec",
1215
+ "tagTextColor": "#6bb56b",
1216
+ "tooltipLabel": <FormattedMessage
1217
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
1218
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1219
+ values={Object {}}
1220
+ />,
1221
+ "value": "AUTHENTICATION",
1222
+ },
1223
+ ]
1224
+ }
1225
+ dropdownMaxHeight="320px"
1226
+ dropdownWidth="228px"
1227
+ onSelect={[Function]}
1228
+ overlayStyle={
1229
+ Object {
1230
+ "overflowY": "hidden",
1231
+ }
1232
+ }
1233
+ placeholder="Category"
1234
+ placement="bottomLeft"
1235
+ selectedValue=""
1236
+ showBadge={true}
1237
+ width="105px"
1238
+ />
1239
+ </div>
1240
+ <Component />
1241
+ <Component />
1242
+ <div
1243
+ className="template-listing-header-actions"
1244
+ >
1245
+ <CapButton
1246
+ className="create-new-whatsapp margin-l-8 margin-b-12"
1247
+ disabled={false}
1248
+ isAddBtn={false}
1249
+ onClick={[Function]}
1250
+ type="primary"
1251
+ >
1252
+ Create new
1253
+ </CapButton>
1254
+ </div>
1255
+ </div>
1236
1256
  </div>
1237
- </div>
1257
+ </CapRow>
1238
1258
  <CapRow
1239
1259
  align="middle"
1240
1260
  className="selected-whatsapp-filters"
@@ -1351,7 +1371,10 @@ Click {{unsubscribe}} to unsubscribe
1351
1371
  Overview
1352
1372
  </CapButton>,
1353
1373
  "key": "WHATSAPP-card-creatives_whatsapp6",
1354
- "title": <CapRow>
1374
+ "title": <CapRow
1375
+ align="middle"
1376
+ type="flex"
1377
+ >
1355
1378
  <CapLabel
1356
1379
  className="whatsapp-rcs-template-name"
1357
1380
  type="label1"
@@ -1530,176 +1553,181 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
1530
1553
  }
1531
1554
  titleClass=""
1532
1555
  />
1533
- <div
1534
- className="action-container"
1556
+ <CapRow
1557
+ align="middle"
1558
+ className="filter-row"
1559
+ justify="space-between"
1560
+ type="flex"
1535
1561
  >
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
1562
  <div
1552
- className="whatsapp-filters"
1563
+ className="filter-row-content"
1553
1564
  >
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
- },
1565
+ <div
1566
+ className="action-container"
1567
+ >
1568
+ <_Class
1569
+ className="search-text"
1570
+ disabled={false}
1571
+ labelPosition="top"
1572
+ onChange={[Function]}
1573
+ onClear={[Function]}
1574
+ onScroll={[Function]}
1575
+ placeholder="Search"
1576
+ style={
1648
1577
  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",
1578
+ "width": "210px",
1579
+ }
1672
1580
  }
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>
1581
+ value=""
1582
+ />
1583
+ <div
1584
+ className="whatsapp-filters"
1585
+ >
1586
+ <CapSelectFilter
1587
+ data={
1588
+ Array [
1589
+ Object {
1590
+ "key": "awaitingApproval",
1591
+ "label": <FormattedMessage
1592
+ defaultMessage="Awaiting approval"
1593
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
1594
+ values={Object {}}
1595
+ />,
1596
+ "value": "awaitingApproval",
1597
+ },
1598
+ Object {
1599
+ "key": "approved",
1600
+ "label": <FormattedMessage
1601
+ defaultMessage="Approved"
1602
+ id="creatives.containersV2.Whatsapp.approved"
1603
+ values={Object {}}
1604
+ />,
1605
+ "value": "approved",
1606
+ },
1607
+ Object {
1608
+ "key": "rejected",
1609
+ "label": <FormattedMessage
1610
+ defaultMessage="Rejected"
1611
+ id="creatives.containersV2.Whatsapp.rejected"
1612
+ values={Object {}}
1613
+ />,
1614
+ "value": "rejected",
1615
+ },
1616
+ Object {
1617
+ "key": "pending",
1618
+ "label": <FormattedMessage
1619
+ defaultMessage="Pending"
1620
+ id="creatives.containersV2.Whatsapp.pending"
1621
+ values={Object {}}
1622
+ />,
1623
+ "value": "pending",
1624
+ },
1625
+ Object {
1626
+ "key": "paused",
1627
+ "label": <FormattedMessage
1628
+ defaultMessage="Paused"
1629
+ id="creatives.containersV2.Whatsapp.paused"
1630
+ values={Object {}}
1631
+ />,
1632
+ "value": "paused",
1633
+ },
1634
+ ]
1635
+ }
1636
+ dropdownMaxHeight="320px"
1637
+ dropdownWidth="228px"
1638
+ onSelect={[Function]}
1639
+ placeholder="Status"
1640
+ placement="bottomLeft"
1641
+ selectedValue=""
1642
+ showBadge={true}
1643
+ width="90px"
1644
+ />
1645
+ <CapSelectFilter
1646
+ data={
1647
+ Array [
1648
+ Object {
1649
+ "key": "utility",
1650
+ "label": <FormattedMessage
1651
+ defaultMessage="Utility"
1652
+ id="creatives.containersV2.Whatsapp.utility"
1653
+ values={Object {}}
1654
+ />,
1655
+ "tagColor": "#f2e7fe",
1656
+ "tagTextColor": "#a451ff",
1657
+ "tooltipLabel": <FormattedMessage
1658
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1659
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1660
+ values={Object {}}
1661
+ />,
1662
+ "value": "UTILITY",
1663
+ },
1664
+ Object {
1665
+ "key": "marketing",
1666
+ "label": <FormattedMessage
1667
+ defaultMessage="Marketing"
1668
+ id="creatives.containersV2.Whatsapp.marketing"
1669
+ values={Object {}}
1670
+ />,
1671
+ "tagColor": "#ffe5d2",
1672
+ "tagTextColor": "#f87d23",
1673
+ "tooltipLabel": <FormattedMessage
1674
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1675
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
1676
+ values={Object {}}
1677
+ />,
1678
+ "value": "MARKETING",
1679
+ },
1680
+ Object {
1681
+ "key": "authentication",
1682
+ "label": <FormattedMessage
1683
+ defaultMessage="Authentication"
1684
+ id="creatives.containersV2.Whatsapp.authentication"
1685
+ values={Object {}}
1686
+ />,
1687
+ "tagColor": "#ecf7ec",
1688
+ "tagTextColor": "#6bb56b",
1689
+ "tooltipLabel": <FormattedMessage
1690
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
1691
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1692
+ values={Object {}}
1693
+ />,
1694
+ "value": "AUTHENTICATION",
1695
+ },
1696
+ ]
1697
+ }
1698
+ dropdownMaxHeight="320px"
1699
+ dropdownWidth="228px"
1700
+ onSelect={[Function]}
1701
+ overlayStyle={
1702
+ Object {
1703
+ "overflowY": "hidden",
1704
+ }
1705
+ }
1706
+ placeholder="Category"
1707
+ placement="bottomLeft"
1708
+ selectedValue=""
1709
+ showBadge={true}
1710
+ width="105px"
1711
+ />
1712
+ </div>
1713
+ <Component />
1714
+ <Component />
1715
+ <div
1716
+ className="template-listing-header-actions"
1717
+ >
1718
+ <CapButton
1719
+ className="create-new-whatsapp margin-l-8 margin-b-12"
1720
+ disabled={false}
1721
+ isAddBtn={false}
1722
+ onClick={[Function]}
1723
+ type="primary"
1724
+ >
1725
+ Create new
1726
+ </CapButton>
1727
+ </div>
1728
+ </div>
1701
1729
  </div>
1702
- </div>
1730
+ </CapRow>
1703
1731
  <CapRow
1704
1732
  align="middle"
1705
1733
  className="selected-whatsapp-filters"
@@ -1816,7 +1844,10 @@ Click {{unsubscribe}} to unsubscribe
1816
1844
  Overview
1817
1845
  </CapButton>,
1818
1846
  "key": "WHATSAPP-card-creatives_whatsapp6",
1819
- "title": <CapRow>
1847
+ "title": <CapRow
1848
+ align="middle"
1849
+ type="flex"
1850
+ >
1820
1851
  <CapLabel
1821
1852
  className="whatsapp-rcs-template-name"
1822
1853
  type="label1"
@@ -1995,176 +2026,181 @@ exports[`Test Templates container Test max templates warning 1`] = `
1995
2026
  }
1996
2027
  titleClass=""
1997
2028
  />
1998
- <div
1999
- className="action-container"
2029
+ <CapRow
2030
+ align="middle"
2031
+ className="filter-row"
2032
+ justify="space-between"
2033
+ type="flex"
2000
2034
  >
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
2035
  <div
2017
- className="whatsapp-filters"
2036
+ className="filter-row-content"
2018
2037
  >
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
- },
2038
+ <div
2039
+ className="action-container"
2040
+ >
2041
+ <_Class
2042
+ className="search-text"
2043
+ disabled={false}
2044
+ labelPosition="top"
2045
+ onChange={[Function]}
2046
+ onClear={[Function]}
2047
+ onScroll={[Function]}
2048
+ placeholder="Search"
2049
+ style={
2113
2050
  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",
2051
+ "width": "210px",
2052
+ }
2137
2053
  }
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>
2054
+ value=""
2055
+ />
2056
+ <div
2057
+ className="whatsapp-filters"
2058
+ >
2059
+ <CapSelectFilter
2060
+ data={
2061
+ Array [
2062
+ Object {
2063
+ "key": "awaitingApproval",
2064
+ "label": <FormattedMessage
2065
+ defaultMessage="Awaiting approval"
2066
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
2067
+ values={Object {}}
2068
+ />,
2069
+ "value": "awaitingApproval",
2070
+ },
2071
+ Object {
2072
+ "key": "approved",
2073
+ "label": <FormattedMessage
2074
+ defaultMessage="Approved"
2075
+ id="creatives.containersV2.Whatsapp.approved"
2076
+ values={Object {}}
2077
+ />,
2078
+ "value": "approved",
2079
+ },
2080
+ Object {
2081
+ "key": "rejected",
2082
+ "label": <FormattedMessage
2083
+ defaultMessage="Rejected"
2084
+ id="creatives.containersV2.Whatsapp.rejected"
2085
+ values={Object {}}
2086
+ />,
2087
+ "value": "rejected",
2088
+ },
2089
+ Object {
2090
+ "key": "pending",
2091
+ "label": <FormattedMessage
2092
+ defaultMessage="Pending"
2093
+ id="creatives.containersV2.Whatsapp.pending"
2094
+ values={Object {}}
2095
+ />,
2096
+ "value": "pending",
2097
+ },
2098
+ Object {
2099
+ "key": "paused",
2100
+ "label": <FormattedMessage
2101
+ defaultMessage="Paused"
2102
+ id="creatives.containersV2.Whatsapp.paused"
2103
+ values={Object {}}
2104
+ />,
2105
+ "value": "paused",
2106
+ },
2107
+ ]
2108
+ }
2109
+ dropdownMaxHeight="320px"
2110
+ dropdownWidth="228px"
2111
+ onSelect={[Function]}
2112
+ placeholder="Status"
2113
+ placement="bottomLeft"
2114
+ selectedValue=""
2115
+ showBadge={true}
2116
+ width="90px"
2117
+ />
2118
+ <CapSelectFilter
2119
+ data={
2120
+ Array [
2121
+ Object {
2122
+ "key": "utility",
2123
+ "label": <FormattedMessage
2124
+ defaultMessage="Utility"
2125
+ id="creatives.containersV2.Whatsapp.utility"
2126
+ values={Object {}}
2127
+ />,
2128
+ "tagColor": "#f2e7fe",
2129
+ "tagTextColor": "#a451ff",
2130
+ "tooltipLabel": <FormattedMessage
2131
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2132
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2133
+ values={Object {}}
2134
+ />,
2135
+ "value": "UTILITY",
2136
+ },
2137
+ Object {
2138
+ "key": "marketing",
2139
+ "label": <FormattedMessage
2140
+ defaultMessage="Marketing"
2141
+ id="creatives.containersV2.Whatsapp.marketing"
2142
+ values={Object {}}
2143
+ />,
2144
+ "tagColor": "#ffe5d2",
2145
+ "tagTextColor": "#f87d23",
2146
+ "tooltipLabel": <FormattedMessage
2147
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2148
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2149
+ values={Object {}}
2150
+ />,
2151
+ "value": "MARKETING",
2152
+ },
2153
+ Object {
2154
+ "key": "authentication",
2155
+ "label": <FormattedMessage
2156
+ defaultMessage="Authentication"
2157
+ id="creatives.containersV2.Whatsapp.authentication"
2158
+ values={Object {}}
2159
+ />,
2160
+ "tagColor": "#ecf7ec",
2161
+ "tagTextColor": "#6bb56b",
2162
+ "tooltipLabel": <FormattedMessage
2163
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2164
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2165
+ values={Object {}}
2166
+ />,
2167
+ "value": "AUTHENTICATION",
2168
+ },
2169
+ ]
2170
+ }
2171
+ dropdownMaxHeight="320px"
2172
+ dropdownWidth="228px"
2173
+ onSelect={[Function]}
2174
+ overlayStyle={
2175
+ Object {
2176
+ "overflowY": "hidden",
2177
+ }
2178
+ }
2179
+ placeholder="Category"
2180
+ placement="bottomLeft"
2181
+ selectedValue=""
2182
+ showBadge={true}
2183
+ width="105px"
2184
+ />
2185
+ </div>
2186
+ <Component />
2187
+ <Component />
2188
+ <div
2189
+ className="template-listing-header-actions"
2190
+ >
2191
+ <CapButton
2192
+ className="create-new-whatsapp margin-l-8 margin-b-12"
2193
+ disabled={false}
2194
+ isAddBtn={false}
2195
+ onClick={[Function]}
2196
+ type="primary"
2197
+ >
2198
+ Create new
2199
+ </CapButton>
2200
+ </div>
2201
+ </div>
2166
2202
  </div>
2167
- </div>
2203
+ </CapRow>
2168
2204
  <CapRow
2169
2205
  align="middle"
2170
2206
  className="selected-whatsapp-filters"
@@ -2281,7 +2317,10 @@ Click {{unsubscribe}} to unsubscribe
2281
2317
  Overview
2282
2318
  </CapButton>,
2283
2319
  "key": "WHATSAPP-card-creatives_whatsapp6",
2284
- "title": <CapRow>
2320
+ "title": <CapRow
2321
+ align="middle"
2322
+ type="flex"
2323
+ >
2285
2324
  <CapLabel
2286
2325
  className="whatsapp-rcs-template-name"
2287
2326
  type="label1"
@@ -2460,120 +2499,125 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
2460
2499
  }
2461
2500
  titleClass=""
2462
2501
  />
2463
- <div
2464
- className="action-container"
2502
+ <CapRow
2503
+ align="middle"
2504
+ className="filter-row"
2505
+ justify="space-between"
2506
+ type="flex"
2465
2507
  >
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
2508
  <div
2482
- className="whatsapp-filters"
2509
+ className="filter-row-content"
2483
2510
  >
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
- },
2511
+ <div
2512
+ className="action-container"
2513
+ >
2514
+ <_Class
2515
+ className="search-text"
2516
+ disabled={false}
2517
+ labelPosition="top"
2518
+ onChange={[Function]}
2519
+ onClear={[Function]}
2520
+ onScroll={[Function]}
2521
+ placeholder="Search"
2522
+ style={
2519
2523
  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",
2524
+ "width": "210px",
2525
+ }
2543
2526
  }
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"
2527
+ value=""
2528
+ />
2529
+ <div
2530
+ className="whatsapp-filters"
2531
+ >
2532
+ <CapSelectFilter
2533
+ data={
2534
+ Array [
2535
+ Object {
2536
+ "key": "utility",
2537
+ "label": <FormattedMessage
2538
+ defaultMessage="Utility"
2539
+ id="creatives.containersV2.Whatsapp.utility"
2540
+ values={Object {}}
2541
+ />,
2542
+ "tagColor": "#f2e7fe",
2543
+ "tagTextColor": "#a451ff",
2544
+ "tooltipLabel": <FormattedMessage
2545
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2546
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2547
+ values={Object {}}
2548
+ />,
2549
+ "value": "UTILITY",
2550
+ },
2551
+ Object {
2552
+ "key": "marketing",
2553
+ "label": <FormattedMessage
2554
+ defaultMessage="Marketing"
2555
+ id="creatives.containersV2.Whatsapp.marketing"
2556
+ values={Object {}}
2557
+ />,
2558
+ "tagColor": "#ffe5d2",
2559
+ "tagTextColor": "#f87d23",
2560
+ "tooltipLabel": <FormattedMessage
2561
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2562
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2563
+ values={Object {}}
2564
+ />,
2565
+ "value": "MARKETING",
2566
+ },
2567
+ Object {
2568
+ "key": "authentication",
2569
+ "label": <FormattedMessage
2570
+ defaultMessage="Authentication"
2571
+ id="creatives.containersV2.Whatsapp.authentication"
2572
+ values={Object {}}
2573
+ />,
2574
+ "tagColor": "#ecf7ec",
2575
+ "tagTextColor": "#6bb56b",
2576
+ "tooltipLabel": <FormattedMessage
2577
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2578
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2579
+ values={Object {}}
2580
+ />,
2581
+ "value": "AUTHENTICATION",
2582
+ },
2583
+ ]
2584
+ }
2585
+ dropdownMaxHeight="320px"
2586
+ dropdownWidth="228px"
2587
+ onSelect={[Function]}
2588
+ overlayStyle={
2589
+ Object {
2590
+ "overflowY": "hidden",
2591
+ }
2592
+ }
2593
+ placeholder="Category"
2594
+ placement="bottomLeft"
2595
+ selectedValue="ALERT_UPDATE"
2596
+ showBadge={true}
2597
+ width="105px"
2571
2598
  />
2572
- }
2573
- title="Create new template"
2574
- />
2599
+ </div>
2600
+ <Component />
2601
+ <Component />
2602
+ <div
2603
+ className="template-listing-header-actions"
2604
+ >
2605
+ <CapLink
2606
+ className="create-new-link"
2607
+ disabled={false}
2608
+ onClick={[Function]}
2609
+ suffix={
2610
+ <CapIcon
2611
+ size="s"
2612
+ type="open-in-new"
2613
+ />
2614
+ }
2615
+ title="Create new template"
2616
+ />
2617
+ </div>
2618
+ </div>
2575
2619
  </div>
2576
- </div>
2620
+ </CapRow>
2577
2621
  <CapRow
2578
2622
  align="middle"
2579
2623
  className="selected-whatsapp-filters"
@@ -2733,120 +2777,125 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
2733
2777
  }
2734
2778
  titleClass=""
2735
2779
  />
2736
- <div
2737
- className="action-container"
2780
+ <CapRow
2781
+ align="middle"
2782
+ className="filter-row"
2783
+ justify="space-between"
2784
+ type="flex"
2738
2785
  >
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
2786
  <div
2755
- className="whatsapp-filters"
2787
+ className="filter-row-content"
2756
2788
  >
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
- },
2789
+ <div
2790
+ className="action-container"
2791
+ >
2792
+ <_Class
2793
+ className="search-text"
2794
+ disabled={false}
2795
+ labelPosition="top"
2796
+ onChange={[Function]}
2797
+ onClear={[Function]}
2798
+ onScroll={[Function]}
2799
+ placeholder="Search"
2800
+ style={
2792
2801
  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",
2802
+ "width": "210px",
2803
+ }
2816
2804
  }
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"
2805
+ value=""
2806
+ />
2807
+ <div
2808
+ className="whatsapp-filters"
2809
+ >
2810
+ <CapSelectFilter
2811
+ data={
2812
+ Array [
2813
+ Object {
2814
+ "key": "utility",
2815
+ "label": <FormattedMessage
2816
+ defaultMessage="Utility"
2817
+ id="creatives.containersV2.Whatsapp.utility"
2818
+ values={Object {}}
2819
+ />,
2820
+ "tagColor": "#f2e7fe",
2821
+ "tagTextColor": "#a451ff",
2822
+ "tooltipLabel": <FormattedMessage
2823
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2824
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2825
+ values={Object {}}
2826
+ />,
2827
+ "value": "UTILITY",
2828
+ },
2829
+ Object {
2830
+ "key": "marketing",
2831
+ "label": <FormattedMessage
2832
+ defaultMessage="Marketing"
2833
+ id="creatives.containersV2.Whatsapp.marketing"
2834
+ values={Object {}}
2835
+ />,
2836
+ "tagColor": "#ffe5d2",
2837
+ "tagTextColor": "#f87d23",
2838
+ "tooltipLabel": <FormattedMessage
2839
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2840
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2841
+ values={Object {}}
2842
+ />,
2843
+ "value": "MARKETING",
2844
+ },
2845
+ Object {
2846
+ "key": "authentication",
2847
+ "label": <FormattedMessage
2848
+ defaultMessage="Authentication"
2849
+ id="creatives.containersV2.Whatsapp.authentication"
2850
+ values={Object {}}
2851
+ />,
2852
+ "tagColor": "#ecf7ec",
2853
+ "tagTextColor": "#6bb56b",
2854
+ "tooltipLabel": <FormattedMessage
2855
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2856
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2857
+ values={Object {}}
2858
+ />,
2859
+ "value": "AUTHENTICATION",
2860
+ },
2861
+ ]
2862
+ }
2863
+ dropdownMaxHeight="320px"
2864
+ dropdownWidth="228px"
2865
+ onSelect={[Function]}
2866
+ overlayStyle={
2867
+ Object {
2868
+ "overflowY": "hidden",
2869
+ }
2870
+ }
2871
+ placeholder="Category"
2872
+ placement="bottomLeft"
2873
+ selectedValue={null}
2874
+ showBadge={true}
2875
+ width="105px"
2844
2876
  />
2845
- }
2846
- title="Create new template"
2847
- />
2877
+ </div>
2878
+ <Component />
2879
+ <Component />
2880
+ <div
2881
+ className="template-listing-header-actions"
2882
+ >
2883
+ <CapLink
2884
+ className="create-new-link"
2885
+ disabled={false}
2886
+ onClick={[Function]}
2887
+ suffix={
2888
+ <CapIcon
2889
+ size="s"
2890
+ type="open-in-new"
2891
+ />
2892
+ }
2893
+ title="Create new template"
2894
+ />
2895
+ </div>
2896
+ </div>
2848
2897
  </div>
2849
- </div>
2898
+ </CapRow>
2850
2899
  <CapRow
2851
2900
  align="middle"
2852
2901
  className="selected-whatsapp-filters"
@@ -2980,120 +3029,125 @@ exports[`Test Templates container Test removing single filter 1`] = `
2980
3029
  }
2981
3030
  titleClass=""
2982
3031
  />
2983
- <div
2984
- className="action-container"
3032
+ <CapRow
3033
+ align="middle"
3034
+ className="filter-row"
3035
+ justify="space-between"
3036
+ type="flex"
2985
3037
  >
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
3038
  <div
3002
- className="whatsapp-filters"
3039
+ className="filter-row-content"
3003
3040
  >
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
- },
3041
+ <div
3042
+ className="action-container"
3043
+ >
3044
+ <_Class
3045
+ className="search-text"
3046
+ disabled={false}
3047
+ labelPosition="top"
3048
+ onChange={[Function]}
3049
+ onClear={[Function]}
3050
+ onScroll={[Function]}
3051
+ placeholder="Search"
3052
+ style={
3039
3053
  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",
3054
+ "width": "210px",
3055
+ }
3063
3056
  }
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"
3057
+ value=""
3058
+ />
3059
+ <div
3060
+ className="whatsapp-filters"
3061
+ >
3062
+ <CapSelectFilter
3063
+ data={
3064
+ Array [
3065
+ Object {
3066
+ "key": "utility",
3067
+ "label": <FormattedMessage
3068
+ defaultMessage="Utility"
3069
+ id="creatives.containersV2.Whatsapp.utility"
3070
+ values={Object {}}
3071
+ />,
3072
+ "tagColor": "#f2e7fe",
3073
+ "tagTextColor": "#a451ff",
3074
+ "tooltipLabel": <FormattedMessage
3075
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
3076
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
3077
+ values={Object {}}
3078
+ />,
3079
+ "value": "UTILITY",
3080
+ },
3081
+ Object {
3082
+ "key": "marketing",
3083
+ "label": <FormattedMessage
3084
+ defaultMessage="Marketing"
3085
+ id="creatives.containersV2.Whatsapp.marketing"
3086
+ values={Object {}}
3087
+ />,
3088
+ "tagColor": "#ffe5d2",
3089
+ "tagTextColor": "#f87d23",
3090
+ "tooltipLabel": <FormattedMessage
3091
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
3092
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
3093
+ values={Object {}}
3094
+ />,
3095
+ "value": "MARKETING",
3096
+ },
3097
+ Object {
3098
+ "key": "authentication",
3099
+ "label": <FormattedMessage
3100
+ defaultMessage="Authentication"
3101
+ id="creatives.containersV2.Whatsapp.authentication"
3102
+ values={Object {}}
3103
+ />,
3104
+ "tagColor": "#ecf7ec",
3105
+ "tagTextColor": "#6bb56b",
3106
+ "tooltipLabel": <FormattedMessage
3107
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
3108
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
3109
+ values={Object {}}
3110
+ />,
3111
+ "value": "AUTHENTICATION",
3112
+ },
3113
+ ]
3114
+ }
3115
+ dropdownMaxHeight="320px"
3116
+ dropdownWidth="228px"
3117
+ onSelect={[Function]}
3118
+ overlayStyle={
3119
+ Object {
3120
+ "overflowY": "hidden",
3121
+ }
3122
+ }
3123
+ placeholder="Category"
3124
+ placement="bottomLeft"
3125
+ selectedValue=""
3126
+ showBadge={true}
3127
+ width="105px"
3091
3128
  />
3092
- }
3093
- title="Create new template"
3094
- />
3129
+ </div>
3130
+ <Component />
3131
+ <Component />
3132
+ <div
3133
+ className="template-listing-header-actions"
3134
+ >
3135
+ <CapLink
3136
+ className="create-new-link"
3137
+ disabled={false}
3138
+ onClick={[Function]}
3139
+ suffix={
3140
+ <CapIcon
3141
+ size="s"
3142
+ type="open-in-new"
3143
+ />
3144
+ }
3145
+ title="Create new template"
3146
+ />
3147
+ </div>
3148
+ </div>
3095
3149
  </div>
3096
- </div>
3150
+ </CapRow>
3097
3151
  <CapRow
3098
3152
  align="middle"
3099
3153
  className="selected-whatsapp-filters"