@capillarytech/creatives-library 8.0.333 → 8.0.334-alpha.0

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 (21) 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/v2Components/CapCustomSkeleton/index.js +1 -1
  5. package/v2Components/CapCustomSkeleton/tests/__snapshots__/index.test.js.snap +12 -12
  6. package/v2Containers/Assets/images/archive_Empty_Illustration.svg +9 -0
  7. package/v2Containers/Templates/ChannelTypeIllustration.js +23 -6
  8. package/v2Containers/Templates/_templates.scss +99 -24
  9. package/v2Containers/Templates/actions.js +36 -0
  10. package/v2Containers/Templates/constants.js +23 -0
  11. package/v2Containers/Templates/index.js +287 -30
  12. package/v2Containers/Templates/messages.js +68 -0
  13. package/v2Containers/Templates/reducer.js +68 -0
  14. package/v2Containers/Templates/sagas.js +89 -1
  15. package/v2Containers/Templates/selectors.js +12 -0
  16. package/v2Containers/Templates/tests/ChannelTypeIllustration.test.js +12 -0
  17. package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +1375 -1114
  18. package/v2Containers/Templates/tests/index.test.js +6 -0
  19. package/v2Containers/Templates/tests/reducer.test.js +178 -0
  20. package/v2Containers/Templates/tests/sagas.test.js +306 -8
  21. package/v2Containers/Templates/tests/selector.test.js +32 -0
package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap CHANGED
@@ -209,46 +209,58 @@ 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
+ style={
243
+ Object {
244
+ "alignItems": "center",
245
+ "display": "flex",
246
+ "gap": "0.571rem",
247
+ "justifyContent": "space-between",
248
+ }
249
+ }
250
+ >
251
+ <CapButton
252
+ className="create-new-sms margin-l-8 margin-b-12"
253
+ disabled={false}
254
+ isAddBtn={false}
255
+ onClick={[Function]}
256
+ type="primary"
257
+ >
258
+ Create new
259
+ </CapButton>
260
+ </div>
261
+ </div>
250
262
  </div>
251
- </div>
263
+ </CapRow>
252
264
  <div>
253
265
  <ChannelTypeIllustration
254
266
  createTemplate={[Function]}
@@ -403,120 +415,132 @@ exports[`Test Templates container Should render temlates when whatsapp templates
403
415
  }
404
416
  titleClass=""
405
417
  />
406
- <div
407
- className="action-container"
418
+ <CapRow
419
+ align="middle"
420
+ className="filter-row"
421
+ justify="space-between"
422
+ type="flex"
408
423
  >
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
424
  <div
425
- className="whatsapp-filters"
425
+ className="filter-row-content"
426
426
  >
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
- },
427
+ <div
428
+ className="action-container"
429
+ >
430
+ <_Class
431
+ className="search-text"
432
+ disabled={false}
433
+ labelPosition="top"
434
+ onChange={[Function]}
435
+ onClear={[Function]}
436
+ onScroll={[Function]}
437
+ placeholder="Search"
438
+ style={
446
439
  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
- },
440
+ "width": "210px",
441
+ }
442
+ }
443
+ value=""
444
+ />
445
+ <div
446
+ className="whatsapp-filters"
447
+ >
448
+ <CapSelectFilter
449
+ data={
450
+ Array [
451
+ Object {
452
+ "key": "utility",
453
+ "label": <FormattedMessage
454
+ defaultMessage="Utility"
455
+ id="creatives.containersV2.Whatsapp.utility"
456
+ values={Object {}}
457
+ />,
458
+ "tagColor": "#f2e7fe",
459
+ "tagTextColor": "#a451ff",
460
+ "tooltipLabel": <FormattedMessage
461
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
462
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
463
+ values={Object {}}
464
+ />,
465
+ "value": "UTILITY",
466
+ },
467
+ Object {
468
+ "key": "marketing",
469
+ "label": <FormattedMessage
470
+ defaultMessage="Marketing"
471
+ id="creatives.containersV2.Whatsapp.marketing"
472
+ values={Object {}}
473
+ />,
474
+ "tagColor": "#ffe5d2",
475
+ "tagTextColor": "#f87d23",
476
+ "tooltipLabel": <FormattedMessage
477
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
478
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
479
+ values={Object {}}
480
+ />,
481
+ "value": "MARKETING",
482
+ },
483
+ Object {
484
+ "key": "authentication",
485
+ "label": <FormattedMessage
486
+ defaultMessage="Authentication"
487
+ id="creatives.containersV2.Whatsapp.authentication"
488
+ values={Object {}}
489
+ />,
490
+ "tagColor": "#ecf7ec",
491
+ "tagTextColor": "#6bb56b",
492
+ "tooltipLabel": <FormattedMessage
493
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
494
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
495
+ values={Object {}}
496
+ />,
497
+ "value": "AUTHENTICATION",
498
+ },
499
+ ]
500
+ }
501
+ dropdownMaxHeight="320px"
502
+ dropdownWidth="228px"
503
+ onSelect={[Function]}
504
+ overlayStyle={
505
+ Object {
506
+ "overflowY": "hidden",
507
+ }
508
+ }
509
+ placeholder="Category"
510
+ placement="bottomLeft"
511
+ selectedValue=""
512
+ showBadge={true}
513
+ width="105px"
514
+ />
515
+ </div>
516
+ <Component />
517
+ <Component />
518
+ <div
519
+ style={
462
520
  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",
521
+ "alignItems": "center",
522
+ "display": "flex",
523
+ "gap": "0.571rem",
524
+ "justifyContent": "space-between",
525
+ }
486
526
  }
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"
527
+ >
528
+ <CapLink
529
+ className="create-new-link"
530
+ disabled={false}
531
+ onClick={[Function]}
532
+ suffix={
533
+ <CapIcon
534
+ size="s"
535
+ type="open-in-new"
536
+ />
537
+ }
538
+ title="Create new template"
514
539
  />
515
- }
516
- title="Create new template"
517
- />
540
+ </div>
541
+ </div>
518
542
  </div>
519
- </div>
543
+ </CapRow>
520
544
  <CapRow
521
545
  align="middle"
522
546
  className="selected-whatsapp-filters"
@@ -650,176 +674,224 @@ exports[`Test Templates container Should render temlates when whatsapp templates
650
674
  }
651
675
  titleClass=""
652
676
  />
653
- <div
654
- className="action-container"
677
+ <CapRow
678
+ align="middle"
679
+ className="filter-row"
680
+ justify="space-between"
681
+ type="flex"
655
682
  >
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
683
  <div
672
- className="whatsapp-filters"
684
+ className="filter-row-content"
673
685
  >
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
- },
686
+ <div
687
+ className="action-container"
688
+ >
689
+ <_Class
690
+ className="search-text"
691
+ disabled={false}
692
+ labelPosition="top"
693
+ onChange={[Function]}
694
+ onClear={[Function]}
695
+ onScroll={[Function]}
696
+ placeholder="Search"
697
+ style={
752
698
  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
- },
699
+ "width": "210px",
700
+ }
701
+ }
702
+ value=""
703
+ />
704
+ <div
705
+ className="whatsapp-filters"
706
+ >
707
+ <CapSelectFilter
708
+ data={
709
+ Array [
710
+ Object {
711
+ "key": "awaitingApproval",
712
+ "label": <FormattedMessage
713
+ defaultMessage="Awaiting approval"
714
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
715
+ values={Object {}}
716
+ />,
717
+ "value": "awaitingApproval",
718
+ },
719
+ Object {
720
+ "key": "approved",
721
+ "label": <FormattedMessage
722
+ defaultMessage="Approved"
723
+ id="creatives.containersV2.Whatsapp.approved"
724
+ values={Object {}}
725
+ />,
726
+ "value": "approved",
727
+ },
728
+ Object {
729
+ "key": "rejected",
730
+ "label": <FormattedMessage
731
+ defaultMessage="Rejected"
732
+ id="creatives.containersV2.Whatsapp.rejected"
733
+ values={Object {}}
734
+ />,
735
+ "value": "rejected",
736
+ },
737
+ Object {
738
+ "key": "pending",
739
+ "label": <FormattedMessage
740
+ defaultMessage="Pending"
741
+ id="creatives.containersV2.Whatsapp.pending"
742
+ values={Object {}}
743
+ />,
744
+ "value": "pending",
745
+ },
746
+ Object {
747
+ "key": "paused",
748
+ "label": <FormattedMessage
749
+ defaultMessage="Paused"
750
+ id="creatives.containersV2.Whatsapp.paused"
751
+ values={Object {}}
752
+ />,
753
+ "value": "paused",
754
+ },
755
+ ]
756
+ }
757
+ dropdownMaxHeight="320px"
758
+ dropdownWidth="228px"
759
+ onSelect={[Function]}
760
+ placeholder="Status"
761
+ placement="bottomLeft"
762
+ selectedValue="approved"
763
+ showBadge={true}
764
+ width="90px"
765
+ />
766
+ <CapSelectFilter
767
+ data={
768
+ Array [
769
+ Object {
770
+ "key": "utility",
771
+ "label": <FormattedMessage
772
+ defaultMessage="Utility"
773
+ id="creatives.containersV2.Whatsapp.utility"
774
+ values={Object {}}
775
+ />,
776
+ "tagColor": "#f2e7fe",
777
+ "tagTextColor": "#a451ff",
778
+ "tooltipLabel": <FormattedMessage
779
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
780
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
781
+ values={Object {}}
782
+ />,
783
+ "value": "UTILITY",
784
+ },
785
+ Object {
786
+ "key": "marketing",
787
+ "label": <FormattedMessage
788
+ defaultMessage="Marketing"
789
+ id="creatives.containersV2.Whatsapp.marketing"
790
+ values={Object {}}
791
+ />,
792
+ "tagColor": "#ffe5d2",
793
+ "tagTextColor": "#f87d23",
794
+ "tooltipLabel": <FormattedMessage
795
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
796
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
797
+ values={Object {}}
798
+ />,
799
+ "value": "MARKETING",
800
+ },
801
+ Object {
802
+ "key": "authentication",
803
+ "label": <FormattedMessage
804
+ defaultMessage="Authentication"
805
+ id="creatives.containersV2.Whatsapp.authentication"
806
+ values={Object {}}
807
+ />,
808
+ "tagColor": "#ecf7ec",
809
+ "tagTextColor": "#6bb56b",
810
+ "tooltipLabel": <FormattedMessage
811
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
812
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
813
+ values={Object {}}
814
+ />,
815
+ "value": "AUTHENTICATION",
816
+ },
817
+ ]
818
+ }
819
+ dropdownMaxHeight="320px"
820
+ dropdownWidth="228px"
821
+ onSelect={[Function]}
822
+ overlayStyle={
823
+ Object {
824
+ "overflowY": "hidden",
825
+ }
826
+ }
827
+ placeholder="Category"
828
+ placement="bottomLeft"
829
+ selectedValue=""
830
+ showBadge={true}
831
+ width="105px"
832
+ />
833
+ </div>
834
+ <Component />
835
+ <Component />
836
+ <div
837
+ style={
768
838
  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",
839
+ "alignItems": "center",
840
+ "display": "flex",
841
+ "gap": "0.571rem",
842
+ "justifyContent": "space-between",
843
+ }
792
844
  }
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>
845
+ >
846
+ <CapButton
847
+ className="create-new-whatsapp margin-l-8 margin-b-12"
848
+ disabled={false}
849
+ isAddBtn={false}
850
+ onClick={[Function]}
851
+ type="primary"
852
+ >
853
+ Create new
854
+ </CapButton>
855
+ <CapDropdown
856
+ overlay={
857
+ <CapMenu>
858
+ <withItemHOC
859
+ onClick={[Function]}
860
+ >
861
+ <FormattedMessage
862
+ defaultMessage="Archived templates"
863
+ id="creatives.containersV2.Templates.archivedTemplates"
864
+ values={Object {}}
865
+ />
866
+ </withItemHOC>
867
+ </CapMenu>
868
+ }
869
+ placement="bottomRight"
870
+ trigger={
871
+ Array [
872
+ "click",
873
+ ]
874
+ }
875
+ >
876
+ <CapButton
877
+ isAddBtn={false}
878
+ style={
879
+ Object {
880
+ "minWidth": "auto",
881
+ "padding": "0 0.571rem",
882
+ }
883
+ }
884
+ type="flat"
885
+ >
886
+ <CapIcon
887
+ type="more"
888
+ />
889
+ </CapButton>
890
+ </CapDropdown>
891
+ </div>
892
+ </div>
821
893
  </div>
822
- </div>
894
+ </CapRow>
823
895
  <CapRow
824
896
  align="middle"
825
897
  className="selected-whatsapp-filters"
@@ -1065,176 +1137,224 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
1065
1137
  }
1066
1138
  titleClass=""
1067
1139
  />
1068
- <div
1069
- className="action-container"
1140
+ <CapRow
1141
+ align="middle"
1142
+ className="filter-row"
1143
+ justify="space-between"
1144
+ type="flex"
1070
1145
  >
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
1146
  <div
1087
- className="whatsapp-filters"
1147
+ className="filter-row-content"
1088
1148
  >
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
- },
1149
+ <div
1150
+ className="action-container"
1151
+ >
1152
+ <_Class
1153
+ className="search-text"
1154
+ disabled={false}
1155
+ labelPosition="top"
1156
+ onChange={[Function]}
1157
+ onClear={[Function]}
1158
+ onScroll={[Function]}
1159
+ placeholder="Search"
1160
+ style={
1167
1161
  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
- },
1162
+ "width": "210px",
1163
+ }
1164
+ }
1165
+ value=""
1166
+ />
1167
+ <div
1168
+ className="whatsapp-filters"
1169
+ >
1170
+ <CapSelectFilter
1171
+ data={
1172
+ Array [
1173
+ Object {
1174
+ "key": "awaitingApproval",
1175
+ "label": <FormattedMessage
1176
+ defaultMessage="Awaiting approval"
1177
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
1178
+ values={Object {}}
1179
+ />,
1180
+ "value": "awaitingApproval",
1181
+ },
1182
+ Object {
1183
+ "key": "approved",
1184
+ "label": <FormattedMessage
1185
+ defaultMessage="Approved"
1186
+ id="creatives.containersV2.Whatsapp.approved"
1187
+ values={Object {}}
1188
+ />,
1189
+ "value": "approved",
1190
+ },
1191
+ Object {
1192
+ "key": "rejected",
1193
+ "label": <FormattedMessage
1194
+ defaultMessage="Rejected"
1195
+ id="creatives.containersV2.Whatsapp.rejected"
1196
+ values={Object {}}
1197
+ />,
1198
+ "value": "rejected",
1199
+ },
1200
+ Object {
1201
+ "key": "pending",
1202
+ "label": <FormattedMessage
1203
+ defaultMessage="Pending"
1204
+ id="creatives.containersV2.Whatsapp.pending"
1205
+ values={Object {}}
1206
+ />,
1207
+ "value": "pending",
1208
+ },
1209
+ Object {
1210
+ "key": "paused",
1211
+ "label": <FormattedMessage
1212
+ defaultMessage="Paused"
1213
+ id="creatives.containersV2.Whatsapp.paused"
1214
+ values={Object {}}
1215
+ />,
1216
+ "value": "paused",
1217
+ },
1218
+ ]
1219
+ }
1220
+ dropdownMaxHeight="320px"
1221
+ dropdownWidth="228px"
1222
+ onSelect={[Function]}
1223
+ placeholder="Status"
1224
+ placement="bottomLeft"
1225
+ selectedValue=""
1226
+ showBadge={true}
1227
+ width="90px"
1228
+ />
1229
+ <CapSelectFilter
1230
+ data={
1231
+ Array [
1232
+ Object {
1233
+ "key": "utility",
1234
+ "label": <FormattedMessage
1235
+ defaultMessage="Utility"
1236
+ id="creatives.containersV2.Whatsapp.utility"
1237
+ values={Object {}}
1238
+ />,
1239
+ "tagColor": "#f2e7fe",
1240
+ "tagTextColor": "#a451ff",
1241
+ "tooltipLabel": <FormattedMessage
1242
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1243
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1244
+ values={Object {}}
1245
+ />,
1246
+ "value": "UTILITY",
1247
+ },
1248
+ Object {
1249
+ "key": "marketing",
1250
+ "label": <FormattedMessage
1251
+ defaultMessage="Marketing"
1252
+ id="creatives.containersV2.Whatsapp.marketing"
1253
+ values={Object {}}
1254
+ />,
1255
+ "tagColor": "#ffe5d2",
1256
+ "tagTextColor": "#f87d23",
1257
+ "tooltipLabel": <FormattedMessage
1258
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1259
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
1260
+ values={Object {}}
1261
+ />,
1262
+ "value": "MARKETING",
1263
+ },
1264
+ Object {
1265
+ "key": "authentication",
1266
+ "label": <FormattedMessage
1267
+ defaultMessage="Authentication"
1268
+ id="creatives.containersV2.Whatsapp.authentication"
1269
+ values={Object {}}
1270
+ />,
1271
+ "tagColor": "#ecf7ec",
1272
+ "tagTextColor": "#6bb56b",
1273
+ "tooltipLabel": <FormattedMessage
1274
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
1275
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1276
+ values={Object {}}
1277
+ />,
1278
+ "value": "AUTHENTICATION",
1279
+ },
1280
+ ]
1281
+ }
1282
+ dropdownMaxHeight="320px"
1283
+ dropdownWidth="228px"
1284
+ onSelect={[Function]}
1285
+ overlayStyle={
1286
+ Object {
1287
+ "overflowY": "hidden",
1288
+ }
1289
+ }
1290
+ placeholder="Category"
1291
+ placement="bottomLeft"
1292
+ selectedValue=""
1293
+ showBadge={true}
1294
+ width="105px"
1295
+ />
1296
+ </div>
1297
+ <Component />
1298
+ <Component />
1299
+ <div
1300
+ style={
1183
1301
  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",
1302
+ "alignItems": "center",
1303
+ "display": "flex",
1304
+ "gap": "0.571rem",
1305
+ "justifyContent": "space-between",
1306
+ }
1207
1307
  }
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>
1308
+ >
1309
+ <CapButton
1310
+ className="create-new-whatsapp margin-l-8 margin-b-12"
1311
+ disabled={false}
1312
+ isAddBtn={false}
1313
+ onClick={[Function]}
1314
+ type="primary"
1315
+ >
1316
+ Create new
1317
+ </CapButton>
1318
+ <CapDropdown
1319
+ overlay={
1320
+ <CapMenu>
1321
+ <withItemHOC
1322
+ onClick={[Function]}
1323
+ >
1324
+ <FormattedMessage
1325
+ defaultMessage="Archived templates"
1326
+ id="creatives.containersV2.Templates.archivedTemplates"
1327
+ values={Object {}}
1328
+ />
1329
+ </withItemHOC>
1330
+ </CapMenu>
1331
+ }
1332
+ placement="bottomRight"
1333
+ trigger={
1334
+ Array [
1335
+ "click",
1336
+ ]
1337
+ }
1338
+ >
1339
+ <CapButton
1340
+ isAddBtn={false}
1341
+ style={
1342
+ Object {
1343
+ "minWidth": "auto",
1344
+ "padding": "0 0.571rem",
1345
+ }
1346
+ }
1347
+ type="flat"
1348
+ >
1349
+ <CapIcon
1350
+ type="more"
1351
+ />
1352
+ </CapButton>
1353
+ </CapDropdown>
1354
+ </div>
1355
+ </div>
1236
1356
  </div>
1237
- </div>
1357
+ </CapRow>
1238
1358
  <CapRow
1239
1359
  align="middle"
1240
1360
  className="selected-whatsapp-filters"
@@ -1351,7 +1471,10 @@ Click {{unsubscribe}} to unsubscribe
1351
1471
  Overview
1352
1472
  </CapButton>,
1353
1473
  "key": "WHATSAPP-card-creatives_whatsapp6",
1354
- "title": <CapRow>
1474
+ "title": <CapRow
1475
+ align="middle"
1476
+ type="flex"
1477
+ >
1355
1478
  <CapLabel
1356
1479
  className="whatsapp-rcs-template-name"
1357
1480
  type="label1"
@@ -1530,176 +1653,224 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
1530
1653
  }
1531
1654
  titleClass=""
1532
1655
  />
1533
- <div
1534
- className="action-container"
1656
+ <CapRow
1657
+ align="middle"
1658
+ className="filter-row"
1659
+ justify="space-between"
1660
+ type="flex"
1535
1661
  >
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
1662
  <div
1552
- className="whatsapp-filters"
1663
+ className="filter-row-content"
1553
1664
  >
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
- },
1665
+ <div
1666
+ className="action-container"
1667
+ >
1668
+ <_Class
1669
+ className="search-text"
1670
+ disabled={false}
1671
+ labelPosition="top"
1672
+ onChange={[Function]}
1673
+ onClear={[Function]}
1674
+ onScroll={[Function]}
1675
+ placeholder="Search"
1676
+ style={
1632
1677
  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
- },
1678
+ "width": "210px",
1679
+ }
1680
+ }
1681
+ value=""
1682
+ />
1683
+ <div
1684
+ className="whatsapp-filters"
1685
+ >
1686
+ <CapSelectFilter
1687
+ data={
1688
+ Array [
1689
+ Object {
1690
+ "key": "awaitingApproval",
1691
+ "label": <FormattedMessage
1692
+ defaultMessage="Awaiting approval"
1693
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
1694
+ values={Object {}}
1695
+ />,
1696
+ "value": "awaitingApproval",
1697
+ },
1698
+ Object {
1699
+ "key": "approved",
1700
+ "label": <FormattedMessage
1701
+ defaultMessage="Approved"
1702
+ id="creatives.containersV2.Whatsapp.approved"
1703
+ values={Object {}}
1704
+ />,
1705
+ "value": "approved",
1706
+ },
1707
+ Object {
1708
+ "key": "rejected",
1709
+ "label": <FormattedMessage
1710
+ defaultMessage="Rejected"
1711
+ id="creatives.containersV2.Whatsapp.rejected"
1712
+ values={Object {}}
1713
+ />,
1714
+ "value": "rejected",
1715
+ },
1716
+ Object {
1717
+ "key": "pending",
1718
+ "label": <FormattedMessage
1719
+ defaultMessage="Pending"
1720
+ id="creatives.containersV2.Whatsapp.pending"
1721
+ values={Object {}}
1722
+ />,
1723
+ "value": "pending",
1724
+ },
1725
+ Object {
1726
+ "key": "paused",
1727
+ "label": <FormattedMessage
1728
+ defaultMessage="Paused"
1729
+ id="creatives.containersV2.Whatsapp.paused"
1730
+ values={Object {}}
1731
+ />,
1732
+ "value": "paused",
1733
+ },
1734
+ ]
1735
+ }
1736
+ dropdownMaxHeight="320px"
1737
+ dropdownWidth="228px"
1738
+ onSelect={[Function]}
1739
+ placeholder="Status"
1740
+ placement="bottomLeft"
1741
+ selectedValue=""
1742
+ showBadge={true}
1743
+ width="90px"
1744
+ />
1745
+ <CapSelectFilter
1746
+ data={
1747
+ Array [
1748
+ Object {
1749
+ "key": "utility",
1750
+ "label": <FormattedMessage
1751
+ defaultMessage="Utility"
1752
+ id="creatives.containersV2.Whatsapp.utility"
1753
+ values={Object {}}
1754
+ />,
1755
+ "tagColor": "#f2e7fe",
1756
+ "tagTextColor": "#a451ff",
1757
+ "tooltipLabel": <FormattedMessage
1758
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1759
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1760
+ values={Object {}}
1761
+ />,
1762
+ "value": "UTILITY",
1763
+ },
1764
+ Object {
1765
+ "key": "marketing",
1766
+ "label": <FormattedMessage
1767
+ defaultMessage="Marketing"
1768
+ id="creatives.containersV2.Whatsapp.marketing"
1769
+ values={Object {}}
1770
+ />,
1771
+ "tagColor": "#ffe5d2",
1772
+ "tagTextColor": "#f87d23",
1773
+ "tooltipLabel": <FormattedMessage
1774
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1775
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
1776
+ values={Object {}}
1777
+ />,
1778
+ "value": "MARKETING",
1779
+ },
1780
+ Object {
1781
+ "key": "authentication",
1782
+ "label": <FormattedMessage
1783
+ defaultMessage="Authentication"
1784
+ id="creatives.containersV2.Whatsapp.authentication"
1785
+ values={Object {}}
1786
+ />,
1787
+ "tagColor": "#ecf7ec",
1788
+ "tagTextColor": "#6bb56b",
1789
+ "tooltipLabel": <FormattedMessage
1790
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
1791
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1792
+ values={Object {}}
1793
+ />,
1794
+ "value": "AUTHENTICATION",
1795
+ },
1796
+ ]
1797
+ }
1798
+ dropdownMaxHeight="320px"
1799
+ dropdownWidth="228px"
1800
+ onSelect={[Function]}
1801
+ overlayStyle={
1802
+ Object {
1803
+ "overflowY": "hidden",
1804
+ }
1805
+ }
1806
+ placeholder="Category"
1807
+ placement="bottomLeft"
1808
+ selectedValue=""
1809
+ showBadge={true}
1810
+ width="105px"
1811
+ />
1812
+ </div>
1813
+ <Component />
1814
+ <Component />
1815
+ <div
1816
+ style={
1648
1817
  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",
1818
+ "alignItems": "center",
1819
+ "display": "flex",
1820
+ "gap": "0.571rem",
1821
+ "justifyContent": "space-between",
1822
+ }
1672
1823
  }
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>
1824
+ >
1825
+ <CapButton
1826
+ className="create-new-whatsapp margin-l-8 margin-b-12"
1827
+ disabled={false}
1828
+ isAddBtn={false}
1829
+ onClick={[Function]}
1830
+ type="primary"
1831
+ >
1832
+ Create new
1833
+ </CapButton>
1834
+ <CapDropdown
1835
+ overlay={
1836
+ <CapMenu>
1837
+ <withItemHOC
1838
+ onClick={[Function]}
1839
+ >
1840
+ <FormattedMessage
1841
+ defaultMessage="Archived templates"
1842
+ id="creatives.containersV2.Templates.archivedTemplates"
1843
+ values={Object {}}
1844
+ />
1845
+ </withItemHOC>
1846
+ </CapMenu>
1847
+ }
1848
+ placement="bottomRight"
1849
+ trigger={
1850
+ Array [
1851
+ "click",
1852
+ ]
1853
+ }
1854
+ >
1855
+ <CapButton
1856
+ isAddBtn={false}
1857
+ style={
1858
+ Object {
1859
+ "minWidth": "auto",
1860
+ "padding": "0 0.571rem",
1861
+ }
1862
+ }
1863
+ type="flat"
1864
+ >
1865
+ <CapIcon
1866
+ type="more"
1867
+ />
1868
+ </CapButton>
1869
+ </CapDropdown>
1870
+ </div>
1871
+ </div>
1701
1872
  </div>
1702
- </div>
1873
+ </CapRow>
1703
1874
  <CapRow
1704
1875
  align="middle"
1705
1876
  className="selected-whatsapp-filters"
@@ -1816,7 +1987,10 @@ Click {{unsubscribe}} to unsubscribe
1816
1987
  Overview
1817
1988
  </CapButton>,
1818
1989
  "key": "WHATSAPP-card-creatives_whatsapp6",
1819
- "title": <CapRow>
1990
+ "title": <CapRow
1991
+ align="middle"
1992
+ type="flex"
1993
+ >
1820
1994
  <CapLabel
1821
1995
  className="whatsapp-rcs-template-name"
1822
1996
  type="label1"
@@ -1995,176 +2169,224 @@ exports[`Test Templates container Test max templates warning 1`] = `
1995
2169
  }
1996
2170
  titleClass=""
1997
2171
  />
1998
- <div
1999
- className="action-container"
2172
+ <CapRow
2173
+ align="middle"
2174
+ className="filter-row"
2175
+ justify="space-between"
2176
+ type="flex"
2000
2177
  >
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
2178
  <div
2017
- className="whatsapp-filters"
2179
+ className="filter-row-content"
2018
2180
  >
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
- },
2181
+ <div
2182
+ className="action-container"
2183
+ >
2184
+ <_Class
2185
+ className="search-text"
2186
+ disabled={false}
2187
+ labelPosition="top"
2188
+ onChange={[Function]}
2189
+ onClear={[Function]}
2190
+ onScroll={[Function]}
2191
+ placeholder="Search"
2192
+ style={
2097
2193
  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
- },
2194
+ "width": "210px",
2195
+ }
2196
+ }
2197
+ value=""
2198
+ />
2199
+ <div
2200
+ className="whatsapp-filters"
2201
+ >
2202
+ <CapSelectFilter
2203
+ data={
2204
+ Array [
2205
+ Object {
2206
+ "key": "awaitingApproval",
2207
+ "label": <FormattedMessage
2208
+ defaultMessage="Awaiting approval"
2209
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
2210
+ values={Object {}}
2211
+ />,
2212
+ "value": "awaitingApproval",
2213
+ },
2214
+ Object {
2215
+ "key": "approved",
2216
+ "label": <FormattedMessage
2217
+ defaultMessage="Approved"
2218
+ id="creatives.containersV2.Whatsapp.approved"
2219
+ values={Object {}}
2220
+ />,
2221
+ "value": "approved",
2222
+ },
2223
+ Object {
2224
+ "key": "rejected",
2225
+ "label": <FormattedMessage
2226
+ defaultMessage="Rejected"
2227
+ id="creatives.containersV2.Whatsapp.rejected"
2228
+ values={Object {}}
2229
+ />,
2230
+ "value": "rejected",
2231
+ },
2232
+ Object {
2233
+ "key": "pending",
2234
+ "label": <FormattedMessage
2235
+ defaultMessage="Pending"
2236
+ id="creatives.containersV2.Whatsapp.pending"
2237
+ values={Object {}}
2238
+ />,
2239
+ "value": "pending",
2240
+ },
2241
+ Object {
2242
+ "key": "paused",
2243
+ "label": <FormattedMessage
2244
+ defaultMessage="Paused"
2245
+ id="creatives.containersV2.Whatsapp.paused"
2246
+ values={Object {}}
2247
+ />,
2248
+ "value": "paused",
2249
+ },
2250
+ ]
2251
+ }
2252
+ dropdownMaxHeight="320px"
2253
+ dropdownWidth="228px"
2254
+ onSelect={[Function]}
2255
+ placeholder="Status"
2256
+ placement="bottomLeft"
2257
+ selectedValue=""
2258
+ showBadge={true}
2259
+ width="90px"
2260
+ />
2261
+ <CapSelectFilter
2262
+ data={
2263
+ Array [
2264
+ Object {
2265
+ "key": "utility",
2266
+ "label": <FormattedMessage
2267
+ defaultMessage="Utility"
2268
+ id="creatives.containersV2.Whatsapp.utility"
2269
+ values={Object {}}
2270
+ />,
2271
+ "tagColor": "#f2e7fe",
2272
+ "tagTextColor": "#a451ff",
2273
+ "tooltipLabel": <FormattedMessage
2274
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2275
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2276
+ values={Object {}}
2277
+ />,
2278
+ "value": "UTILITY",
2279
+ },
2280
+ Object {
2281
+ "key": "marketing",
2282
+ "label": <FormattedMessage
2283
+ defaultMessage="Marketing"
2284
+ id="creatives.containersV2.Whatsapp.marketing"
2285
+ values={Object {}}
2286
+ />,
2287
+ "tagColor": "#ffe5d2",
2288
+ "tagTextColor": "#f87d23",
2289
+ "tooltipLabel": <FormattedMessage
2290
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2291
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2292
+ values={Object {}}
2293
+ />,
2294
+ "value": "MARKETING",
2295
+ },
2296
+ Object {
2297
+ "key": "authentication",
2298
+ "label": <FormattedMessage
2299
+ defaultMessage="Authentication"
2300
+ id="creatives.containersV2.Whatsapp.authentication"
2301
+ values={Object {}}
2302
+ />,
2303
+ "tagColor": "#ecf7ec",
2304
+ "tagTextColor": "#6bb56b",
2305
+ "tooltipLabel": <FormattedMessage
2306
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2307
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2308
+ values={Object {}}
2309
+ />,
2310
+ "value": "AUTHENTICATION",
2311
+ },
2312
+ ]
2313
+ }
2314
+ dropdownMaxHeight="320px"
2315
+ dropdownWidth="228px"
2316
+ onSelect={[Function]}
2317
+ overlayStyle={
2318
+ Object {
2319
+ "overflowY": "hidden",
2320
+ }
2321
+ }
2322
+ placeholder="Category"
2323
+ placement="bottomLeft"
2324
+ selectedValue=""
2325
+ showBadge={true}
2326
+ width="105px"
2327
+ />
2328
+ </div>
2329
+ <Component />
2330
+ <Component />
2331
+ <div
2332
+ style={
2113
2333
  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",
2334
+ "alignItems": "center",
2335
+ "display": "flex",
2336
+ "gap": "0.571rem",
2337
+ "justifyContent": "space-between",
2338
+ }
2137
2339
  }
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>
2340
+ >
2341
+ <CapButton
2342
+ className="create-new-whatsapp margin-l-8 margin-b-12"
2343
+ disabled={false}
2344
+ isAddBtn={false}
2345
+ onClick={[Function]}
2346
+ type="primary"
2347
+ >
2348
+ Create new
2349
+ </CapButton>
2350
+ <CapDropdown
2351
+ overlay={
2352
+ <CapMenu>
2353
+ <withItemHOC
2354
+ onClick={[Function]}
2355
+ >
2356
+ <FormattedMessage
2357
+ defaultMessage="Archived templates"
2358
+ id="creatives.containersV2.Templates.archivedTemplates"
2359
+ values={Object {}}
2360
+ />
2361
+ </withItemHOC>
2362
+ </CapMenu>
2363
+ }
2364
+ placement="bottomRight"
2365
+ trigger={
2366
+ Array [
2367
+ "click",
2368
+ ]
2369
+ }
2370
+ >
2371
+ <CapButton
2372
+ isAddBtn={false}
2373
+ style={
2374
+ Object {
2375
+ "minWidth": "auto",
2376
+ "padding": "0 0.571rem",
2377
+ }
2378
+ }
2379
+ type="flat"
2380
+ >
2381
+ <CapIcon
2382
+ type="more"
2383
+ />
2384
+ </CapButton>
2385
+ </CapDropdown>
2386
+ </div>
2387
+ </div>
2166
2388
  </div>
2167
- </div>
2389
+ </CapRow>
2168
2390
  <CapRow
2169
2391
  align="middle"
2170
2392
  className="selected-whatsapp-filters"
@@ -2281,7 +2503,10 @@ Click {{unsubscribe}} to unsubscribe
2281
2503
  Overview
2282
2504
  </CapButton>,
2283
2505
  "key": "WHATSAPP-card-creatives_whatsapp6",
2284
- "title": <CapRow>
2506
+ "title": <CapRow
2507
+ align="middle"
2508
+ type="flex"
2509
+ >
2285
2510
  <CapLabel
2286
2511
  className="whatsapp-rcs-template-name"
2287
2512
  type="label1"
@@ -2460,120 +2685,132 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
2460
2685
  }
2461
2686
  titleClass=""
2462
2687
  />
2463
- <div
2464
- className="action-container"
2688
+ <CapRow
2689
+ align="middle"
2690
+ className="filter-row"
2691
+ justify="space-between"
2692
+ type="flex"
2465
2693
  >
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
2694
  <div
2482
- className="whatsapp-filters"
2695
+ className="filter-row-content"
2483
2696
  >
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
- },
2697
+ <div
2698
+ className="action-container"
2699
+ >
2700
+ <_Class
2701
+ className="search-text"
2702
+ disabled={false}
2703
+ labelPosition="top"
2704
+ onChange={[Function]}
2705
+ onClear={[Function]}
2706
+ onScroll={[Function]}
2707
+ placeholder="Search"
2708
+ style={
2503
2709
  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
- },
2710
+ "width": "210px",
2711
+ }
2712
+ }
2713
+ value=""
2714
+ />
2715
+ <div
2716
+ className="whatsapp-filters"
2717
+ >
2718
+ <CapSelectFilter
2719
+ data={
2720
+ Array [
2721
+ Object {
2722
+ "key": "utility",
2723
+ "label": <FormattedMessage
2724
+ defaultMessage="Utility"
2725
+ id="creatives.containersV2.Whatsapp.utility"
2726
+ values={Object {}}
2727
+ />,
2728
+ "tagColor": "#f2e7fe",
2729
+ "tagTextColor": "#a451ff",
2730
+ "tooltipLabel": <FormattedMessage
2731
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2732
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2733
+ values={Object {}}
2734
+ />,
2735
+ "value": "UTILITY",
2736
+ },
2737
+ Object {
2738
+ "key": "marketing",
2739
+ "label": <FormattedMessage
2740
+ defaultMessage="Marketing"
2741
+ id="creatives.containersV2.Whatsapp.marketing"
2742
+ values={Object {}}
2743
+ />,
2744
+ "tagColor": "#ffe5d2",
2745
+ "tagTextColor": "#f87d23",
2746
+ "tooltipLabel": <FormattedMessage
2747
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2748
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2749
+ values={Object {}}
2750
+ />,
2751
+ "value": "MARKETING",
2752
+ },
2753
+ Object {
2754
+ "key": "authentication",
2755
+ "label": <FormattedMessage
2756
+ defaultMessage="Authentication"
2757
+ id="creatives.containersV2.Whatsapp.authentication"
2758
+ values={Object {}}
2759
+ />,
2760
+ "tagColor": "#ecf7ec",
2761
+ "tagTextColor": "#6bb56b",
2762
+ "tooltipLabel": <FormattedMessage
2763
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2764
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2765
+ values={Object {}}
2766
+ />,
2767
+ "value": "AUTHENTICATION",
2768
+ },
2769
+ ]
2770
+ }
2771
+ dropdownMaxHeight="320px"
2772
+ dropdownWidth="228px"
2773
+ onSelect={[Function]}
2774
+ overlayStyle={
2775
+ Object {
2776
+ "overflowY": "hidden",
2777
+ }
2778
+ }
2779
+ placeholder="Category"
2780
+ placement="bottomLeft"
2781
+ selectedValue="ALERT_UPDATE"
2782
+ showBadge={true}
2783
+ width="105px"
2784
+ />
2785
+ </div>
2786
+ <Component />
2787
+ <Component />
2788
+ <div
2789
+ style={
2519
2790
  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",
2791
+ "alignItems": "center",
2792
+ "display": "flex",
2793
+ "gap": "0.571rem",
2794
+ "justifyContent": "space-between",
2795
+ }
2543
2796
  }
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"
2797
+ >
2798
+ <CapLink
2799
+ className="create-new-link"
2800
+ disabled={false}
2801
+ onClick={[Function]}
2802
+ suffix={
2803
+ <CapIcon
2804
+ size="s"
2805
+ type="open-in-new"
2806
+ />
2807
+ }
2808
+ title="Create new template"
2571
2809
  />
2572
- }
2573
- title="Create new template"
2574
- />
2810
+ </div>
2811
+ </div>
2575
2812
  </div>
2576
- </div>
2813
+ </CapRow>
2577
2814
  <CapRow
2578
2815
  align="middle"
2579
2816
  className="selected-whatsapp-filters"
@@ -2733,120 +2970,132 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
2733
2970
  }
2734
2971
  titleClass=""
2735
2972
  />
2736
- <div
2737
- className="action-container"
2973
+ <CapRow
2974
+ align="middle"
2975
+ className="filter-row"
2976
+ justify="space-between"
2977
+ type="flex"
2738
2978
  >
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
2979
  <div
2755
- className="whatsapp-filters"
2980
+ className="filter-row-content"
2756
2981
  >
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
- },
2982
+ <div
2983
+ className="action-container"
2984
+ >
2985
+ <_Class
2986
+ className="search-text"
2987
+ disabled={false}
2988
+ labelPosition="top"
2989
+ onChange={[Function]}
2990
+ onClear={[Function]}
2991
+ onScroll={[Function]}
2992
+ placeholder="Search"
2993
+ style={
2776
2994
  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
- },
2995
+ "width": "210px",
2996
+ }
2997
+ }
2998
+ value=""
2999
+ />
3000
+ <div
3001
+ className="whatsapp-filters"
3002
+ >
3003
+ <CapSelectFilter
3004
+ data={
3005
+ Array [
3006
+ Object {
3007
+ "key": "utility",
3008
+ "label": <FormattedMessage
3009
+ defaultMessage="Utility"
3010
+ id="creatives.containersV2.Whatsapp.utility"
3011
+ values={Object {}}
3012
+ />,
3013
+ "tagColor": "#f2e7fe",
3014
+ "tagTextColor": "#a451ff",
3015
+ "tooltipLabel": <FormattedMessage
3016
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
3017
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
3018
+ values={Object {}}
3019
+ />,
3020
+ "value": "UTILITY",
3021
+ },
3022
+ Object {
3023
+ "key": "marketing",
3024
+ "label": <FormattedMessage
3025
+ defaultMessage="Marketing"
3026
+ id="creatives.containersV2.Whatsapp.marketing"
3027
+ values={Object {}}
3028
+ />,
3029
+ "tagColor": "#ffe5d2",
3030
+ "tagTextColor": "#f87d23",
3031
+ "tooltipLabel": <FormattedMessage
3032
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
3033
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
3034
+ values={Object {}}
3035
+ />,
3036
+ "value": "MARKETING",
3037
+ },
3038
+ Object {
3039
+ "key": "authentication",
3040
+ "label": <FormattedMessage
3041
+ defaultMessage="Authentication"
3042
+ id="creatives.containersV2.Whatsapp.authentication"
3043
+ values={Object {}}
3044
+ />,
3045
+ "tagColor": "#ecf7ec",
3046
+ "tagTextColor": "#6bb56b",
3047
+ "tooltipLabel": <FormattedMessage
3048
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
3049
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
3050
+ values={Object {}}
3051
+ />,
3052
+ "value": "AUTHENTICATION",
3053
+ },
3054
+ ]
3055
+ }
3056
+ dropdownMaxHeight="320px"
3057
+ dropdownWidth="228px"
3058
+ onSelect={[Function]}
3059
+ overlayStyle={
3060
+ Object {
3061
+ "overflowY": "hidden",
3062
+ }
3063
+ }
3064
+ placeholder="Category"
3065
+ placement="bottomLeft"
3066
+ selectedValue={null}
3067
+ showBadge={true}
3068
+ width="105px"
3069
+ />
3070
+ </div>
3071
+ <Component />
3072
+ <Component />
3073
+ <div
3074
+ style={
2792
3075
  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",
3076
+ "alignItems": "center",
3077
+ "display": "flex",
3078
+ "gap": "0.571rem",
3079
+ "justifyContent": "space-between",
3080
+ }
2816
3081
  }
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"
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"
3091
+ />
3092
+ }
3093
+ title="Create new template"
2844
3094
  />
2845
- }
2846
- title="Create new template"
2847
- />
3095
+ </div>
3096
+ </div>
2848
3097
  </div>
2849
- </div>
3098
+ </CapRow>
2850
3099
  <CapRow
2851
3100
  align="middle"
2852
3101
  className="selected-whatsapp-filters"
@@ -2980,120 +3229,132 @@ exports[`Test Templates container Test removing single filter 1`] = `
2980
3229
  }
2981
3230
  titleClass=""
2982
3231
  />
2983
- <div
2984
- className="action-container"
3232
+ <CapRow
3233
+ align="middle"
3234
+ className="filter-row"
3235
+ justify="space-between"
3236
+ type="flex"
2985
3237
  >
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
3238
  <div
3002
- className="whatsapp-filters"
3239
+ className="filter-row-content"
3003
3240
  >
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
- },
3241
+ <div
3242
+ className="action-container"
3243
+ >
3244
+ <_Class
3245
+ className="search-text"
3246
+ disabled={false}
3247
+ labelPosition="top"
3248
+ onChange={[Function]}
3249
+ onClear={[Function]}
3250
+ onScroll={[Function]}
3251
+ placeholder="Search"
3252
+ style={
3023
3253
  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
- },
3254
+ "width": "210px",
3255
+ }
3256
+ }
3257
+ value=""
3258
+ />
3259
+ <div
3260
+ className="whatsapp-filters"
3261
+ >
3262
+ <CapSelectFilter
3263
+ data={
3264
+ Array [
3265
+ Object {
3266
+ "key": "utility",
3267
+ "label": <FormattedMessage
3268
+ defaultMessage="Utility"
3269
+ id="creatives.containersV2.Whatsapp.utility"
3270
+ values={Object {}}
3271
+ />,
3272
+ "tagColor": "#f2e7fe",
3273
+ "tagTextColor": "#a451ff",
3274
+ "tooltipLabel": <FormattedMessage
3275
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
3276
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
3277
+ values={Object {}}
3278
+ />,
3279
+ "value": "UTILITY",
3280
+ },
3281
+ Object {
3282
+ "key": "marketing",
3283
+ "label": <FormattedMessage
3284
+ defaultMessage="Marketing"
3285
+ id="creatives.containersV2.Whatsapp.marketing"
3286
+ values={Object {}}
3287
+ />,
3288
+ "tagColor": "#ffe5d2",
3289
+ "tagTextColor": "#f87d23",
3290
+ "tooltipLabel": <FormattedMessage
3291
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
3292
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
3293
+ values={Object {}}
3294
+ />,
3295
+ "value": "MARKETING",
3296
+ },
3297
+ Object {
3298
+ "key": "authentication",
3299
+ "label": <FormattedMessage
3300
+ defaultMessage="Authentication"
3301
+ id="creatives.containersV2.Whatsapp.authentication"
3302
+ values={Object {}}
3303
+ />,
3304
+ "tagColor": "#ecf7ec",
3305
+ "tagTextColor": "#6bb56b",
3306
+ "tooltipLabel": <FormattedMessage
3307
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
3308
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
3309
+ values={Object {}}
3310
+ />,
3311
+ "value": "AUTHENTICATION",
3312
+ },
3313
+ ]
3314
+ }
3315
+ dropdownMaxHeight="320px"
3316
+ dropdownWidth="228px"
3317
+ onSelect={[Function]}
3318
+ overlayStyle={
3319
+ Object {
3320
+ "overflowY": "hidden",
3321
+ }
3322
+ }
3323
+ placeholder="Category"
3324
+ placement="bottomLeft"
3325
+ selectedValue=""
3326
+ showBadge={true}
3327
+ width="105px"
3328
+ />
3329
+ </div>
3330
+ <Component />
3331
+ <Component />
3332
+ <div
3333
+ style={
3039
3334
  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",
3335
+ "alignItems": "center",
3336
+ "display": "flex",
3337
+ "gap": "0.571rem",
3338
+ "justifyContent": "space-between",
3339
+ }
3063
3340
  }
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"
3341
+ >
3342
+ <CapLink
3343
+ className="create-new-link"
3344
+ disabled={false}
3345
+ onClick={[Function]}
3346
+ suffix={
3347
+ <CapIcon
3348
+ size="s"
3349
+ type="open-in-new"
3350
+ />
3351
+ }
3352
+ title="Create new template"
3091
3353
  />
3092
- }
3093
- title="Create new template"
3094
- />
3354
+ </div>
3355
+ </div>
3095
3356
  </div>
3096
- </div>
3357
+ </CapRow>
3097
3358
  <CapRow
3098
3359
  align="middle"
3099
3360
  className="selected-whatsapp-filters"