@capillarytech/creatives-library 8.0.346 → 8.0.347

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 (28) hide show
  1. package/package.json +1 -1
  2. package/services/api.js +20 -0
  3. package/services/tests/api.test.js +59 -0
  4. package/utils/tests/v2Common.test.js +46 -1
  5. package/utils/v2common.js +18 -0
  6. package/v2Components/CapCustomSkeleton/index.js +1 -1
  7. package/v2Components/CapCustomSkeleton/tests/__snapshots__/index.test.js.snap +12 -12
  8. package/v2Containers/Assets/images/archive_Empty_Illustration.svg +9 -0
  9. package/v2Containers/CreativesContainer/SlideBoxFooter.js +3 -1
  10. package/v2Containers/CreativesContainer/index.js +5 -0
  11. package/v2Containers/CreativesContainer/messages.js +4 -0
  12. package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap +3 -0
  13. package/v2Containers/Templates/ChannelTypeIllustration.js +23 -6
  14. package/v2Containers/Templates/_templates.scss +179 -24
  15. package/v2Containers/Templates/actions.js +44 -0
  16. package/v2Containers/Templates/constants.js +23 -0
  17. package/v2Containers/Templates/index.js +378 -58
  18. package/v2Containers/Templates/messages.js +88 -0
  19. package/v2Containers/Templates/reducer.js +84 -1
  20. package/v2Containers/Templates/sagas.js +64 -0
  21. package/v2Containers/Templates/selectors.js +12 -0
  22. package/v2Containers/Templates/tests/ChannelTypeIllustration.test.js +12 -0
  23. package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +1345 -1122
  24. package/v2Containers/Templates/tests/index.test.js +6 -0
  25. package/v2Containers/Templates/tests/reducer.test.js +178 -0
  26. package/v2Containers/Templates/tests/sagas.test.js +390 -8
  27. package/v2Containers/Templates/tests/selector.test.js +32 -0
  28. package/v2Containers/TemplatesV2/TemplatesV2.style.js +1 -1
package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap CHANGED
@@ -192,6 +192,11 @@ exports[`Test Templates container Should render sms illustration when no templat
192
192
  <Fragment>
193
193
  <div
194
194
  className="creatives-templates-list library-mode"
195
+ style={
196
+ Object {
197
+ "position": "relative",
198
+ }
199
+ }
195
200
  >
196
201
  <input
197
202
  accept=".zip, .html, .htm"
@@ -209,46 +214,51 @@ exports[`Test Templates container Should render sms illustration when no templat
209
214
  onPageChange={[Function]}
210
215
  >
211
216
  <div>
212
- <div
213
- className="action-container"
217
+ <CapRow
218
+ align="middle"
219
+ className="filter-row"
220
+ justify="space-between"
221
+ type="flex"
214
222
  >
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
223
  <div
233
- style={
234
- Object {
235
- "alignItems": "center",
236
- "display": "flex",
237
- "justifyContent": "space-between",
238
- }
239
- }
224
+ className="filter-row-content"
240
225
  >
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"
226
+ <div
227
+ className="action-container"
247
228
  >
248
- Create new
249
- </CapButton>
229
+ <_Class
230
+ className="search-text"
231
+ disabled={false}
232
+ labelPosition="top"
233
+ onChange={[Function]}
234
+ onClear={[Function]}
235
+ onScroll={[Function]}
236
+ placeholder="Search"
237
+ style={
238
+ Object {
239
+ "width": "210px",
240
+ }
241
+ }
242
+ value=""
243
+ />
244
+ <Component />
245
+ <Component />
246
+ <div
247
+ className="template-listing-header-actions"
248
+ >
249
+ <CapButton
250
+ className="create-new-sms margin-l-8 margin-b-12"
251
+ disabled={false}
252
+ isAddBtn={false}
253
+ onClick={[Function]}
254
+ type="primary"
255
+ >
256
+ Create new
257
+ </CapButton>
258
+ </div>
259
+ </div>
250
260
  </div>
251
- </div>
261
+ </CapRow>
252
262
  <div>
253
263
  <ChannelTypeIllustration
254
264
  createTemplate={[Function]}
@@ -371,6 +381,11 @@ exports[`Test Templates container Should render temlates when whatsapp templates
371
381
  <Fragment>
372
382
  <div
373
383
  className="creatives-templates-list library-mode"
384
+ style={
385
+ Object {
386
+ "position": "relative",
387
+ }
388
+ }
374
389
  >
375
390
  <input
376
391
  accept=".zip, .html, .htm"
@@ -403,120 +418,125 @@ exports[`Test Templates container Should render temlates when whatsapp templates
403
418
  }
404
419
  titleClass=""
405
420
  />
406
- <div
407
- className="action-container"
421
+ <CapRow
422
+ align="middle"
423
+ className="filter-row"
424
+ justify="space-between"
425
+ type="flex"
408
426
  >
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
427
  <div
425
- className="whatsapp-filters"
428
+ className="filter-row-content"
426
429
  >
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
- },
430
+ <div
431
+ className="action-container"
432
+ >
433
+ <_Class
434
+ className="search-text"
435
+ disabled={false}
436
+ labelPosition="top"
437
+ onChange={[Function]}
438
+ onClear={[Function]}
439
+ onScroll={[Function]}
440
+ placeholder="Search"
441
+ style={
462
442
  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",
443
+ "width": "210px",
444
+ }
486
445
  }
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"
446
+ value=""
447
+ />
448
+ <div
449
+ className="whatsapp-filters"
450
+ >
451
+ <CapSelectFilter
452
+ data={
453
+ Array [
454
+ Object {
455
+ "key": "utility",
456
+ "label": <FormattedMessage
457
+ defaultMessage="Utility"
458
+ id="creatives.containersV2.Whatsapp.utility"
459
+ values={Object {}}
460
+ />,
461
+ "tagColor": "#f2e7fe",
462
+ "tagTextColor": "#a451ff",
463
+ "tooltipLabel": <FormattedMessage
464
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
465
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
466
+ values={Object {}}
467
+ />,
468
+ "value": "UTILITY",
469
+ },
470
+ Object {
471
+ "key": "marketing",
472
+ "label": <FormattedMessage
473
+ defaultMessage="Marketing"
474
+ id="creatives.containersV2.Whatsapp.marketing"
475
+ values={Object {}}
476
+ />,
477
+ "tagColor": "#ffe5d2",
478
+ "tagTextColor": "#f87d23",
479
+ "tooltipLabel": <FormattedMessage
480
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
481
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
482
+ values={Object {}}
483
+ />,
484
+ "value": "MARKETING",
485
+ },
486
+ Object {
487
+ "key": "authentication",
488
+ "label": <FormattedMessage
489
+ defaultMessage="Authentication"
490
+ id="creatives.containersV2.Whatsapp.authentication"
491
+ values={Object {}}
492
+ />,
493
+ "tagColor": "#ecf7ec",
494
+ "tagTextColor": "#6bb56b",
495
+ "tooltipLabel": <FormattedMessage
496
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
497
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
498
+ values={Object {}}
499
+ />,
500
+ "value": "AUTHENTICATION",
501
+ },
502
+ ]
503
+ }
504
+ dropdownMaxHeight="320px"
505
+ dropdownWidth="228px"
506
+ onSelect={[Function]}
507
+ overlayStyle={
508
+ Object {
509
+ "overflowY": "hidden",
510
+ }
511
+ }
512
+ placeholder="Category"
513
+ placement="bottomLeft"
514
+ selectedValue=""
515
+ showBadge={true}
516
+ width="105px"
514
517
  />
515
- }
516
- title="Create new template"
517
- />
518
+ </div>
519
+ <Component />
520
+ <Component />
521
+ <div
522
+ className="template-listing-header-actions"
523
+ >
524
+ <CapLink
525
+ className="create-new-link"
526
+ disabled={false}
527
+ onClick={[Function]}
528
+ suffix={
529
+ <CapIcon
530
+ size="s"
531
+ type="open-in-new"
532
+ />
533
+ }
534
+ title="Create new template"
535
+ />
536
+ </div>
537
+ </div>
518
538
  </div>
519
- </div>
539
+ </CapRow>
520
540
  <CapRow
521
541
  align="middle"
522
542
  className="selected-whatsapp-filters"
@@ -618,6 +638,11 @@ exports[`Test Templates container Should render temlates when whatsapp templates
618
638
  <Fragment>
619
639
  <div
620
640
  className="creatives-templates-list full-mode"
641
+ style={
642
+ Object {
643
+ "position": "relative",
644
+ }
645
+ }
621
646
  >
622
647
  <input
623
648
  accept=".zip, .html, .htm"
@@ -650,176 +675,212 @@ exports[`Test Templates container Should render temlates when whatsapp templates
650
675
  }
651
676
  titleClass=""
652
677
  />
653
- <div
654
- className="action-container"
678
+ <CapRow
679
+ align="middle"
680
+ className="filter-row"
681
+ justify="space-between"
682
+ type="flex"
655
683
  >
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
684
  <div
672
- className="whatsapp-filters"
685
+ className="filter-row-content"
673
686
  >
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
- },
687
+ <div
688
+ className="action-container"
689
+ >
690
+ <_Class
691
+ className="search-text"
692
+ disabled={false}
693
+ labelPosition="top"
694
+ onChange={[Function]}
695
+ onClear={[Function]}
696
+ onScroll={[Function]}
697
+ placeholder="Search"
698
+ style={
768
699
  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",
700
+ "width": "210px",
701
+ }
792
702
  }
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>
703
+ value=""
704
+ />
705
+ <div
706
+ className="whatsapp-filters"
707
+ >
708
+ <CapSelectFilter
709
+ data={
710
+ Array [
711
+ Object {
712
+ "key": "awaitingApproval",
713
+ "label": <FormattedMessage
714
+ defaultMessage="Awaiting approval"
715
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
716
+ values={Object {}}
717
+ />,
718
+ "value": "awaitingApproval",
719
+ },
720
+ Object {
721
+ "key": "approved",
722
+ "label": <FormattedMessage
723
+ defaultMessage="Approved"
724
+ id="creatives.containersV2.Whatsapp.approved"
725
+ values={Object {}}
726
+ />,
727
+ "value": "approved",
728
+ },
729
+ Object {
730
+ "key": "rejected",
731
+ "label": <FormattedMessage
732
+ defaultMessage="Rejected"
733
+ id="creatives.containersV2.Whatsapp.rejected"
734
+ values={Object {}}
735
+ />,
736
+ "value": "rejected",
737
+ },
738
+ Object {
739
+ "key": "pending",
740
+ "label": <FormattedMessage
741
+ defaultMessage="Pending"
742
+ id="creatives.containersV2.Whatsapp.pending"
743
+ values={Object {}}
744
+ />,
745
+ "value": "pending",
746
+ },
747
+ Object {
748
+ "key": "paused",
749
+ "label": <FormattedMessage
750
+ defaultMessage="Paused"
751
+ id="creatives.containersV2.Whatsapp.paused"
752
+ values={Object {}}
753
+ />,
754
+ "value": "paused",
755
+ },
756
+ ]
757
+ }
758
+ dropdownMaxHeight="320px"
759
+ dropdownWidth="228px"
760
+ onSelect={[Function]}
761
+ placeholder="Status"
762
+ placement="bottomLeft"
763
+ selectedValue="approved"
764
+ showBadge={true}
765
+ width="90px"
766
+ />
767
+ <CapSelectFilter
768
+ data={
769
+ Array [
770
+ Object {
771
+ "key": "utility",
772
+ "label": <FormattedMessage
773
+ defaultMessage="Utility"
774
+ id="creatives.containersV2.Whatsapp.utility"
775
+ values={Object {}}
776
+ />,
777
+ "tagColor": "#f2e7fe",
778
+ "tagTextColor": "#a451ff",
779
+ "tooltipLabel": <FormattedMessage
780
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
781
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
782
+ values={Object {}}
783
+ />,
784
+ "value": "UTILITY",
785
+ },
786
+ Object {
787
+ "key": "marketing",
788
+ "label": <FormattedMessage
789
+ defaultMessage="Marketing"
790
+ id="creatives.containersV2.Whatsapp.marketing"
791
+ values={Object {}}
792
+ />,
793
+ "tagColor": "#ffe5d2",
794
+ "tagTextColor": "#f87d23",
795
+ "tooltipLabel": <FormattedMessage
796
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
797
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
798
+ values={Object {}}
799
+ />,
800
+ "value": "MARKETING",
801
+ },
802
+ Object {
803
+ "key": "authentication",
804
+ "label": <FormattedMessage
805
+ defaultMessage="Authentication"
806
+ id="creatives.containersV2.Whatsapp.authentication"
807
+ values={Object {}}
808
+ />,
809
+ "tagColor": "#ecf7ec",
810
+ "tagTextColor": "#6bb56b",
811
+ "tooltipLabel": <FormattedMessage
812
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
813
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
814
+ values={Object {}}
815
+ />,
816
+ "value": "AUTHENTICATION",
817
+ },
818
+ ]
819
+ }
820
+ dropdownMaxHeight="320px"
821
+ dropdownWidth="228px"
822
+ onSelect={[Function]}
823
+ overlayStyle={
824
+ Object {
825
+ "overflowY": "hidden",
826
+ }
827
+ }
828
+ placeholder="Category"
829
+ placement="bottomLeft"
830
+ selectedValue=""
831
+ showBadge={true}
832
+ width="105px"
833
+ />
834
+ </div>
835
+ <Component />
836
+ <Component />
837
+ <div
838
+ className="template-listing-header-actions"
839
+ >
840
+ <CapButton
841
+ className="create-new-whatsapp margin-l-8 margin-b-12"
842
+ disabled={false}
843
+ isAddBtn={false}
844
+ onClick={[Function]}
845
+ type="primary"
846
+ >
847
+ Create new
848
+ </CapButton>
849
+ <CapDropdown
850
+ overlay={
851
+ <CapMenu>
852
+ <withItemHOC
853
+ onClick={[Function]}
854
+ >
855
+ <FormattedMessage
856
+ defaultMessage="Archived templates"
857
+ id="creatives.containersV2.Templates.archivedTemplates"
858
+ values={Object {}}
859
+ />
860
+ </withItemHOC>
861
+ </CapMenu>
862
+ }
863
+ placement="bottomRight"
864
+ trigger={
865
+ Array [
866
+ "click",
867
+ ]
868
+ }
869
+ >
870
+ <CapButton
871
+ className="template-listing-more-btn"
872
+ isAddBtn={false}
873
+ type="flat"
874
+ >
875
+ <CapIcon
876
+ type="more"
877
+ />
878
+ </CapButton>
879
+ </CapDropdown>
880
+ </div>
881
+ </div>
821
882
  </div>
822
- </div>
883
+ </CapRow>
823
884
  <CapRow
824
885
  align="middle"
825
886
  className="selected-whatsapp-filters"
@@ -1033,6 +1094,11 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
1033
1094
  <Fragment>
1034
1095
  <div
1035
1096
  className="creatives-templates-list full-mode"
1097
+ style={
1098
+ Object {
1099
+ "position": "relative",
1100
+ }
1101
+ }
1036
1102
  >
1037
1103
  <input
1038
1104
  accept=".zip, .html, .htm"
@@ -1065,176 +1131,212 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
1065
1131
  }
1066
1132
  titleClass=""
1067
1133
  />
1068
- <div
1069
- className="action-container"
1134
+ <CapRow
1135
+ align="middle"
1136
+ className="filter-row"
1137
+ justify="space-between"
1138
+ type="flex"
1070
1139
  >
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
1140
  <div
1087
- className="whatsapp-filters"
1141
+ className="filter-row-content"
1088
1142
  >
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
- },
1143
+ <div
1144
+ className="action-container"
1145
+ >
1146
+ <_Class
1147
+ className="search-text"
1148
+ disabled={false}
1149
+ labelPosition="top"
1150
+ onChange={[Function]}
1151
+ onClear={[Function]}
1152
+ onScroll={[Function]}
1153
+ placeholder="Search"
1154
+ style={
1183
1155
  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",
1156
+ "width": "210px",
1157
+ }
1207
1158
  }
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>
1159
+ value=""
1160
+ />
1161
+ <div
1162
+ className="whatsapp-filters"
1163
+ >
1164
+ <CapSelectFilter
1165
+ data={
1166
+ Array [
1167
+ Object {
1168
+ "key": "awaitingApproval",
1169
+ "label": <FormattedMessage
1170
+ defaultMessage="Awaiting approval"
1171
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
1172
+ values={Object {}}
1173
+ />,
1174
+ "value": "awaitingApproval",
1175
+ },
1176
+ Object {
1177
+ "key": "approved",
1178
+ "label": <FormattedMessage
1179
+ defaultMessage="Approved"
1180
+ id="creatives.containersV2.Whatsapp.approved"
1181
+ values={Object {}}
1182
+ />,
1183
+ "value": "approved",
1184
+ },
1185
+ Object {
1186
+ "key": "rejected",
1187
+ "label": <FormattedMessage
1188
+ defaultMessage="Rejected"
1189
+ id="creatives.containersV2.Whatsapp.rejected"
1190
+ values={Object {}}
1191
+ />,
1192
+ "value": "rejected",
1193
+ },
1194
+ Object {
1195
+ "key": "pending",
1196
+ "label": <FormattedMessage
1197
+ defaultMessage="Pending"
1198
+ id="creatives.containersV2.Whatsapp.pending"
1199
+ values={Object {}}
1200
+ />,
1201
+ "value": "pending",
1202
+ },
1203
+ Object {
1204
+ "key": "paused",
1205
+ "label": <FormattedMessage
1206
+ defaultMessage="Paused"
1207
+ id="creatives.containersV2.Whatsapp.paused"
1208
+ values={Object {}}
1209
+ />,
1210
+ "value": "paused",
1211
+ },
1212
+ ]
1213
+ }
1214
+ dropdownMaxHeight="320px"
1215
+ dropdownWidth="228px"
1216
+ onSelect={[Function]}
1217
+ placeholder="Status"
1218
+ placement="bottomLeft"
1219
+ selectedValue=""
1220
+ showBadge={true}
1221
+ width="90px"
1222
+ />
1223
+ <CapSelectFilter
1224
+ data={
1225
+ Array [
1226
+ Object {
1227
+ "key": "utility",
1228
+ "label": <FormattedMessage
1229
+ defaultMessage="Utility"
1230
+ id="creatives.containersV2.Whatsapp.utility"
1231
+ values={Object {}}
1232
+ />,
1233
+ "tagColor": "#f2e7fe",
1234
+ "tagTextColor": "#a451ff",
1235
+ "tooltipLabel": <FormattedMessage
1236
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1237
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1238
+ values={Object {}}
1239
+ />,
1240
+ "value": "UTILITY",
1241
+ },
1242
+ Object {
1243
+ "key": "marketing",
1244
+ "label": <FormattedMessage
1245
+ defaultMessage="Marketing"
1246
+ id="creatives.containersV2.Whatsapp.marketing"
1247
+ values={Object {}}
1248
+ />,
1249
+ "tagColor": "#ffe5d2",
1250
+ "tagTextColor": "#f87d23",
1251
+ "tooltipLabel": <FormattedMessage
1252
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1253
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
1254
+ values={Object {}}
1255
+ />,
1256
+ "value": "MARKETING",
1257
+ },
1258
+ Object {
1259
+ "key": "authentication",
1260
+ "label": <FormattedMessage
1261
+ defaultMessage="Authentication"
1262
+ id="creatives.containersV2.Whatsapp.authentication"
1263
+ values={Object {}}
1264
+ />,
1265
+ "tagColor": "#ecf7ec",
1266
+ "tagTextColor": "#6bb56b",
1267
+ "tooltipLabel": <FormattedMessage
1268
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
1269
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1270
+ values={Object {}}
1271
+ />,
1272
+ "value": "AUTHENTICATION",
1273
+ },
1274
+ ]
1275
+ }
1276
+ dropdownMaxHeight="320px"
1277
+ dropdownWidth="228px"
1278
+ onSelect={[Function]}
1279
+ overlayStyle={
1280
+ Object {
1281
+ "overflowY": "hidden",
1282
+ }
1283
+ }
1284
+ placeholder="Category"
1285
+ placement="bottomLeft"
1286
+ selectedValue=""
1287
+ showBadge={true}
1288
+ width="105px"
1289
+ />
1290
+ </div>
1291
+ <Component />
1292
+ <Component />
1293
+ <div
1294
+ className="template-listing-header-actions"
1295
+ >
1296
+ <CapButton
1297
+ className="create-new-whatsapp margin-l-8 margin-b-12"
1298
+ disabled={false}
1299
+ isAddBtn={false}
1300
+ onClick={[Function]}
1301
+ type="primary"
1302
+ >
1303
+ Create new
1304
+ </CapButton>
1305
+ <CapDropdown
1306
+ overlay={
1307
+ <CapMenu>
1308
+ <withItemHOC
1309
+ onClick={[Function]}
1310
+ >
1311
+ <FormattedMessage
1312
+ defaultMessage="Archived templates"
1313
+ id="creatives.containersV2.Templates.archivedTemplates"
1314
+ values={Object {}}
1315
+ />
1316
+ </withItemHOC>
1317
+ </CapMenu>
1318
+ }
1319
+ placement="bottomRight"
1320
+ trigger={
1321
+ Array [
1322
+ "click",
1323
+ ]
1324
+ }
1325
+ >
1326
+ <CapButton
1327
+ className="template-listing-more-btn"
1328
+ isAddBtn={false}
1329
+ type="flat"
1330
+ >
1331
+ <CapIcon
1332
+ type="more"
1333
+ />
1334
+ </CapButton>
1335
+ </CapDropdown>
1336
+ </div>
1337
+ </div>
1236
1338
  </div>
1237
- </div>
1339
+ </CapRow>
1238
1340
  <CapRow
1239
1341
  align="middle"
1240
1342
  className="selected-whatsapp-filters"
@@ -1351,7 +1453,10 @@ Click {{unsubscribe}} to unsubscribe
1351
1453
  Overview
1352
1454
  </CapButton>,
1353
1455
  "key": "WHATSAPP-card-creatives_whatsapp6",
1354
- "title": <CapRow>
1456
+ "title": <CapRow
1457
+ align="middle"
1458
+ type="flex"
1459
+ >
1355
1460
  <CapLabel
1356
1461
  className="whatsapp-rcs-template-name"
1357
1462
  type="label1"
@@ -1498,6 +1603,11 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
1498
1603
  <Fragment>
1499
1604
  <div
1500
1605
  className="creatives-templates-list full-mode"
1606
+ style={
1607
+ Object {
1608
+ "position": "relative",
1609
+ }
1610
+ }
1501
1611
  >
1502
1612
  <input
1503
1613
  accept=".zip, .html, .htm"
@@ -1530,176 +1640,212 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
1530
1640
  }
1531
1641
  titleClass=""
1532
1642
  />
1533
- <div
1534
- className="action-container"
1643
+ <CapRow
1644
+ align="middle"
1645
+ className="filter-row"
1646
+ justify="space-between"
1647
+ type="flex"
1535
1648
  >
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
1649
  <div
1552
- className="whatsapp-filters"
1650
+ className="filter-row-content"
1553
1651
  >
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
- },
1652
+ <div
1653
+ className="action-container"
1654
+ >
1655
+ <_Class
1656
+ className="search-text"
1657
+ disabled={false}
1658
+ labelPosition="top"
1659
+ onChange={[Function]}
1660
+ onClear={[Function]}
1661
+ onScroll={[Function]}
1662
+ placeholder="Search"
1663
+ style={
1648
1664
  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",
1665
+ "width": "210px",
1666
+ }
1672
1667
  }
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>
1668
+ value=""
1669
+ />
1670
+ <div
1671
+ className="whatsapp-filters"
1672
+ >
1673
+ <CapSelectFilter
1674
+ data={
1675
+ Array [
1676
+ Object {
1677
+ "key": "awaitingApproval",
1678
+ "label": <FormattedMessage
1679
+ defaultMessage="Awaiting approval"
1680
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
1681
+ values={Object {}}
1682
+ />,
1683
+ "value": "awaitingApproval",
1684
+ },
1685
+ Object {
1686
+ "key": "approved",
1687
+ "label": <FormattedMessage
1688
+ defaultMessage="Approved"
1689
+ id="creatives.containersV2.Whatsapp.approved"
1690
+ values={Object {}}
1691
+ />,
1692
+ "value": "approved",
1693
+ },
1694
+ Object {
1695
+ "key": "rejected",
1696
+ "label": <FormattedMessage
1697
+ defaultMessage="Rejected"
1698
+ id="creatives.containersV2.Whatsapp.rejected"
1699
+ values={Object {}}
1700
+ />,
1701
+ "value": "rejected",
1702
+ },
1703
+ Object {
1704
+ "key": "pending",
1705
+ "label": <FormattedMessage
1706
+ defaultMessage="Pending"
1707
+ id="creatives.containersV2.Whatsapp.pending"
1708
+ values={Object {}}
1709
+ />,
1710
+ "value": "pending",
1711
+ },
1712
+ Object {
1713
+ "key": "paused",
1714
+ "label": <FormattedMessage
1715
+ defaultMessage="Paused"
1716
+ id="creatives.containersV2.Whatsapp.paused"
1717
+ values={Object {}}
1718
+ />,
1719
+ "value": "paused",
1720
+ },
1721
+ ]
1722
+ }
1723
+ dropdownMaxHeight="320px"
1724
+ dropdownWidth="228px"
1725
+ onSelect={[Function]}
1726
+ placeholder="Status"
1727
+ placement="bottomLeft"
1728
+ selectedValue=""
1729
+ showBadge={true}
1730
+ width="90px"
1731
+ />
1732
+ <CapSelectFilter
1733
+ data={
1734
+ Array [
1735
+ Object {
1736
+ "key": "utility",
1737
+ "label": <FormattedMessage
1738
+ defaultMessage="Utility"
1739
+ id="creatives.containersV2.Whatsapp.utility"
1740
+ values={Object {}}
1741
+ />,
1742
+ "tagColor": "#f2e7fe",
1743
+ "tagTextColor": "#a451ff",
1744
+ "tooltipLabel": <FormattedMessage
1745
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1746
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1747
+ values={Object {}}
1748
+ />,
1749
+ "value": "UTILITY",
1750
+ },
1751
+ Object {
1752
+ "key": "marketing",
1753
+ "label": <FormattedMessage
1754
+ defaultMessage="Marketing"
1755
+ id="creatives.containersV2.Whatsapp.marketing"
1756
+ values={Object {}}
1757
+ />,
1758
+ "tagColor": "#ffe5d2",
1759
+ "tagTextColor": "#f87d23",
1760
+ "tooltipLabel": <FormattedMessage
1761
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1762
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
1763
+ values={Object {}}
1764
+ />,
1765
+ "value": "MARKETING",
1766
+ },
1767
+ Object {
1768
+ "key": "authentication",
1769
+ "label": <FormattedMessage
1770
+ defaultMessage="Authentication"
1771
+ id="creatives.containersV2.Whatsapp.authentication"
1772
+ values={Object {}}
1773
+ />,
1774
+ "tagColor": "#ecf7ec",
1775
+ "tagTextColor": "#6bb56b",
1776
+ "tooltipLabel": <FormattedMessage
1777
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
1778
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1779
+ values={Object {}}
1780
+ />,
1781
+ "value": "AUTHENTICATION",
1782
+ },
1783
+ ]
1784
+ }
1785
+ dropdownMaxHeight="320px"
1786
+ dropdownWidth="228px"
1787
+ onSelect={[Function]}
1788
+ overlayStyle={
1789
+ Object {
1790
+ "overflowY": "hidden",
1791
+ }
1792
+ }
1793
+ placeholder="Category"
1794
+ placement="bottomLeft"
1795
+ selectedValue=""
1796
+ showBadge={true}
1797
+ width="105px"
1798
+ />
1799
+ </div>
1800
+ <Component />
1801
+ <Component />
1802
+ <div
1803
+ className="template-listing-header-actions"
1804
+ >
1805
+ <CapButton
1806
+ className="create-new-whatsapp margin-l-8 margin-b-12"
1807
+ disabled={false}
1808
+ isAddBtn={false}
1809
+ onClick={[Function]}
1810
+ type="primary"
1811
+ >
1812
+ Create new
1813
+ </CapButton>
1814
+ <CapDropdown
1815
+ overlay={
1816
+ <CapMenu>
1817
+ <withItemHOC
1818
+ onClick={[Function]}
1819
+ >
1820
+ <FormattedMessage
1821
+ defaultMessage="Archived templates"
1822
+ id="creatives.containersV2.Templates.archivedTemplates"
1823
+ values={Object {}}
1824
+ />
1825
+ </withItemHOC>
1826
+ </CapMenu>
1827
+ }
1828
+ placement="bottomRight"
1829
+ trigger={
1830
+ Array [
1831
+ "click",
1832
+ ]
1833
+ }
1834
+ >
1835
+ <CapButton
1836
+ className="template-listing-more-btn"
1837
+ isAddBtn={false}
1838
+ type="flat"
1839
+ >
1840
+ <CapIcon
1841
+ type="more"
1842
+ />
1843
+ </CapButton>
1844
+ </CapDropdown>
1845
+ </div>
1846
+ </div>
1701
1847
  </div>
1702
- </div>
1848
+ </CapRow>
1703
1849
  <CapRow
1704
1850
  align="middle"
1705
1851
  className="selected-whatsapp-filters"
@@ -1816,7 +1962,10 @@ Click {{unsubscribe}} to unsubscribe
1816
1962
  Overview
1817
1963
  </CapButton>,
1818
1964
  "key": "WHATSAPP-card-creatives_whatsapp6",
1819
- "title": <CapRow>
1965
+ "title": <CapRow
1966
+ align="middle"
1967
+ type="flex"
1968
+ >
1820
1969
  <CapLabel
1821
1970
  className="whatsapp-rcs-template-name"
1822
1971
  type="label1"
@@ -1963,6 +2112,11 @@ exports[`Test Templates container Test max templates warning 1`] = `
1963
2112
  <Fragment>
1964
2113
  <div
1965
2114
  className="creatives-templates-list full-mode"
2115
+ style={
2116
+ Object {
2117
+ "position": "relative",
2118
+ }
2119
+ }
1966
2120
  >
1967
2121
  <input
1968
2122
  accept=".zip, .html, .htm"
@@ -1995,176 +2149,212 @@ exports[`Test Templates container Test max templates warning 1`] = `
1995
2149
  }
1996
2150
  titleClass=""
1997
2151
  />
1998
- <div
1999
- className="action-container"
2152
+ <CapRow
2153
+ align="middle"
2154
+ className="filter-row"
2155
+ justify="space-between"
2156
+ type="flex"
2000
2157
  >
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
2158
  <div
2017
- className="whatsapp-filters"
2159
+ className="filter-row-content"
2018
2160
  >
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
- },
2161
+ <div
2162
+ className="action-container"
2163
+ >
2164
+ <_Class
2165
+ className="search-text"
2166
+ disabled={false}
2167
+ labelPosition="top"
2168
+ onChange={[Function]}
2169
+ onClear={[Function]}
2170
+ onScroll={[Function]}
2171
+ placeholder="Search"
2172
+ style={
2113
2173
  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",
2174
+ "width": "210px",
2175
+ }
2137
2176
  }
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>
2177
+ value=""
2178
+ />
2179
+ <div
2180
+ className="whatsapp-filters"
2181
+ >
2182
+ <CapSelectFilter
2183
+ data={
2184
+ Array [
2185
+ Object {
2186
+ "key": "awaitingApproval",
2187
+ "label": <FormattedMessage
2188
+ defaultMessage="Awaiting approval"
2189
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
2190
+ values={Object {}}
2191
+ />,
2192
+ "value": "awaitingApproval",
2193
+ },
2194
+ Object {
2195
+ "key": "approved",
2196
+ "label": <FormattedMessage
2197
+ defaultMessage="Approved"
2198
+ id="creatives.containersV2.Whatsapp.approved"
2199
+ values={Object {}}
2200
+ />,
2201
+ "value": "approved",
2202
+ },
2203
+ Object {
2204
+ "key": "rejected",
2205
+ "label": <FormattedMessage
2206
+ defaultMessage="Rejected"
2207
+ id="creatives.containersV2.Whatsapp.rejected"
2208
+ values={Object {}}
2209
+ />,
2210
+ "value": "rejected",
2211
+ },
2212
+ Object {
2213
+ "key": "pending",
2214
+ "label": <FormattedMessage
2215
+ defaultMessage="Pending"
2216
+ id="creatives.containersV2.Whatsapp.pending"
2217
+ values={Object {}}
2218
+ />,
2219
+ "value": "pending",
2220
+ },
2221
+ Object {
2222
+ "key": "paused",
2223
+ "label": <FormattedMessage
2224
+ defaultMessage="Paused"
2225
+ id="creatives.containersV2.Whatsapp.paused"
2226
+ values={Object {}}
2227
+ />,
2228
+ "value": "paused",
2229
+ },
2230
+ ]
2231
+ }
2232
+ dropdownMaxHeight="320px"
2233
+ dropdownWidth="228px"
2234
+ onSelect={[Function]}
2235
+ placeholder="Status"
2236
+ placement="bottomLeft"
2237
+ selectedValue=""
2238
+ showBadge={true}
2239
+ width="90px"
2240
+ />
2241
+ <CapSelectFilter
2242
+ data={
2243
+ Array [
2244
+ Object {
2245
+ "key": "utility",
2246
+ "label": <FormattedMessage
2247
+ defaultMessage="Utility"
2248
+ id="creatives.containersV2.Whatsapp.utility"
2249
+ values={Object {}}
2250
+ />,
2251
+ "tagColor": "#f2e7fe",
2252
+ "tagTextColor": "#a451ff",
2253
+ "tooltipLabel": <FormattedMessage
2254
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2255
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2256
+ values={Object {}}
2257
+ />,
2258
+ "value": "UTILITY",
2259
+ },
2260
+ Object {
2261
+ "key": "marketing",
2262
+ "label": <FormattedMessage
2263
+ defaultMessage="Marketing"
2264
+ id="creatives.containersV2.Whatsapp.marketing"
2265
+ values={Object {}}
2266
+ />,
2267
+ "tagColor": "#ffe5d2",
2268
+ "tagTextColor": "#f87d23",
2269
+ "tooltipLabel": <FormattedMessage
2270
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2271
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2272
+ values={Object {}}
2273
+ />,
2274
+ "value": "MARKETING",
2275
+ },
2276
+ Object {
2277
+ "key": "authentication",
2278
+ "label": <FormattedMessage
2279
+ defaultMessage="Authentication"
2280
+ id="creatives.containersV2.Whatsapp.authentication"
2281
+ values={Object {}}
2282
+ />,
2283
+ "tagColor": "#ecf7ec",
2284
+ "tagTextColor": "#6bb56b",
2285
+ "tooltipLabel": <FormattedMessage
2286
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2287
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2288
+ values={Object {}}
2289
+ />,
2290
+ "value": "AUTHENTICATION",
2291
+ },
2292
+ ]
2293
+ }
2294
+ dropdownMaxHeight="320px"
2295
+ dropdownWidth="228px"
2296
+ onSelect={[Function]}
2297
+ overlayStyle={
2298
+ Object {
2299
+ "overflowY": "hidden",
2300
+ }
2301
+ }
2302
+ placeholder="Category"
2303
+ placement="bottomLeft"
2304
+ selectedValue=""
2305
+ showBadge={true}
2306
+ width="105px"
2307
+ />
2308
+ </div>
2309
+ <Component />
2310
+ <Component />
2311
+ <div
2312
+ className="template-listing-header-actions"
2313
+ >
2314
+ <CapButton
2315
+ className="create-new-whatsapp margin-l-8 margin-b-12"
2316
+ disabled={false}
2317
+ isAddBtn={false}
2318
+ onClick={[Function]}
2319
+ type="primary"
2320
+ >
2321
+ Create new
2322
+ </CapButton>
2323
+ <CapDropdown
2324
+ overlay={
2325
+ <CapMenu>
2326
+ <withItemHOC
2327
+ onClick={[Function]}
2328
+ >
2329
+ <FormattedMessage
2330
+ defaultMessage="Archived templates"
2331
+ id="creatives.containersV2.Templates.archivedTemplates"
2332
+ values={Object {}}
2333
+ />
2334
+ </withItemHOC>
2335
+ </CapMenu>
2336
+ }
2337
+ placement="bottomRight"
2338
+ trigger={
2339
+ Array [
2340
+ "click",
2341
+ ]
2342
+ }
2343
+ >
2344
+ <CapButton
2345
+ className="template-listing-more-btn"
2346
+ isAddBtn={false}
2347
+ type="flat"
2348
+ >
2349
+ <CapIcon
2350
+ type="more"
2351
+ />
2352
+ </CapButton>
2353
+ </CapDropdown>
2354
+ </div>
2355
+ </div>
2166
2356
  </div>
2167
- </div>
2357
+ </CapRow>
2168
2358
  <CapRow
2169
2359
  align="middle"
2170
2360
  className="selected-whatsapp-filters"
@@ -2281,7 +2471,10 @@ Click {{unsubscribe}} to unsubscribe
2281
2471
  Overview
2282
2472
  </CapButton>,
2283
2473
  "key": "WHATSAPP-card-creatives_whatsapp6",
2284
- "title": <CapRow>
2474
+ "title": <CapRow
2475
+ align="middle"
2476
+ type="flex"
2477
+ >
2285
2478
  <CapLabel
2286
2479
  className="whatsapp-rcs-template-name"
2287
2480
  type="label1"
@@ -2428,6 +2621,11 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
2428
2621
  <Fragment>
2429
2622
  <div
2430
2623
  className="creatives-templates-list library-mode"
2624
+ style={
2625
+ Object {
2626
+ "position": "relative",
2627
+ }
2628
+ }
2431
2629
  >
2432
2630
  <input
2433
2631
  accept=".zip, .html, .htm"
@@ -2460,120 +2658,125 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
2460
2658
  }
2461
2659
  titleClass=""
2462
2660
  />
2463
- <div
2464
- className="action-container"
2661
+ <CapRow
2662
+ align="middle"
2663
+ className="filter-row"
2664
+ justify="space-between"
2665
+ type="flex"
2465
2666
  >
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
2667
  <div
2482
- className="whatsapp-filters"
2668
+ className="filter-row-content"
2483
2669
  >
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
- },
2670
+ <div
2671
+ className="action-container"
2672
+ >
2673
+ <_Class
2674
+ className="search-text"
2675
+ disabled={false}
2676
+ labelPosition="top"
2677
+ onChange={[Function]}
2678
+ onClear={[Function]}
2679
+ onScroll={[Function]}
2680
+ placeholder="Search"
2681
+ style={
2519
2682
  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",
2683
+ "width": "210px",
2684
+ }
2543
2685
  }
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"
2686
+ value=""
2687
+ />
2688
+ <div
2689
+ className="whatsapp-filters"
2690
+ >
2691
+ <CapSelectFilter
2692
+ data={
2693
+ Array [
2694
+ Object {
2695
+ "key": "utility",
2696
+ "label": <FormattedMessage
2697
+ defaultMessage="Utility"
2698
+ id="creatives.containersV2.Whatsapp.utility"
2699
+ values={Object {}}
2700
+ />,
2701
+ "tagColor": "#f2e7fe",
2702
+ "tagTextColor": "#a451ff",
2703
+ "tooltipLabel": <FormattedMessage
2704
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2705
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2706
+ values={Object {}}
2707
+ />,
2708
+ "value": "UTILITY",
2709
+ },
2710
+ Object {
2711
+ "key": "marketing",
2712
+ "label": <FormattedMessage
2713
+ defaultMessage="Marketing"
2714
+ id="creatives.containersV2.Whatsapp.marketing"
2715
+ values={Object {}}
2716
+ />,
2717
+ "tagColor": "#ffe5d2",
2718
+ "tagTextColor": "#f87d23",
2719
+ "tooltipLabel": <FormattedMessage
2720
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2721
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2722
+ values={Object {}}
2723
+ />,
2724
+ "value": "MARKETING",
2725
+ },
2726
+ Object {
2727
+ "key": "authentication",
2728
+ "label": <FormattedMessage
2729
+ defaultMessage="Authentication"
2730
+ id="creatives.containersV2.Whatsapp.authentication"
2731
+ values={Object {}}
2732
+ />,
2733
+ "tagColor": "#ecf7ec",
2734
+ "tagTextColor": "#6bb56b",
2735
+ "tooltipLabel": <FormattedMessage
2736
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2737
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2738
+ values={Object {}}
2739
+ />,
2740
+ "value": "AUTHENTICATION",
2741
+ },
2742
+ ]
2743
+ }
2744
+ dropdownMaxHeight="320px"
2745
+ dropdownWidth="228px"
2746
+ onSelect={[Function]}
2747
+ overlayStyle={
2748
+ Object {
2749
+ "overflowY": "hidden",
2750
+ }
2751
+ }
2752
+ placeholder="Category"
2753
+ placement="bottomLeft"
2754
+ selectedValue="ALERT_UPDATE"
2755
+ showBadge={true}
2756
+ width="105px"
2571
2757
  />
2572
- }
2573
- title="Create new template"
2574
- />
2758
+ </div>
2759
+ <Component />
2760
+ <Component />
2761
+ <div
2762
+ className="template-listing-header-actions"
2763
+ >
2764
+ <CapLink
2765
+ className="create-new-link"
2766
+ disabled={false}
2767
+ onClick={[Function]}
2768
+ suffix={
2769
+ <CapIcon
2770
+ size="s"
2771
+ type="open-in-new"
2772
+ />
2773
+ }
2774
+ title="Create new template"
2775
+ />
2776
+ </div>
2777
+ </div>
2575
2778
  </div>
2576
- </div>
2779
+ </CapRow>
2577
2780
  <CapRow
2578
2781
  align="middle"
2579
2782
  className="selected-whatsapp-filters"
@@ -2701,6 +2904,11 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
2701
2904
  <Fragment>
2702
2905
  <div
2703
2906
  className="creatives-templates-list library-mode"
2907
+ style={
2908
+ Object {
2909
+ "position": "relative",
2910
+ }
2911
+ }
2704
2912
  >
2705
2913
  <input
2706
2914
  accept=".zip, .html, .htm"
@@ -2733,120 +2941,125 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
2733
2941
  }
2734
2942
  titleClass=""
2735
2943
  />
2736
- <div
2737
- className="action-container"
2944
+ <CapRow
2945
+ align="middle"
2946
+ className="filter-row"
2947
+ justify="space-between"
2948
+ type="flex"
2738
2949
  >
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
2950
  <div
2755
- className="whatsapp-filters"
2951
+ className="filter-row-content"
2756
2952
  >
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
- },
2953
+ <div
2954
+ className="action-container"
2955
+ >
2956
+ <_Class
2957
+ className="search-text"
2958
+ disabled={false}
2959
+ labelPosition="top"
2960
+ onChange={[Function]}
2961
+ onClear={[Function]}
2962
+ onScroll={[Function]}
2963
+ placeholder="Search"
2964
+ style={
2792
2965
  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",
2966
+ "width": "210px",
2967
+ }
2816
2968
  }
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"
2969
+ value=""
2970
+ />
2971
+ <div
2972
+ className="whatsapp-filters"
2973
+ >
2974
+ <CapSelectFilter
2975
+ data={
2976
+ Array [
2977
+ Object {
2978
+ "key": "utility",
2979
+ "label": <FormattedMessage
2980
+ defaultMessage="Utility"
2981
+ id="creatives.containersV2.Whatsapp.utility"
2982
+ values={Object {}}
2983
+ />,
2984
+ "tagColor": "#f2e7fe",
2985
+ "tagTextColor": "#a451ff",
2986
+ "tooltipLabel": <FormattedMessage
2987
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2988
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2989
+ values={Object {}}
2990
+ />,
2991
+ "value": "UTILITY",
2992
+ },
2993
+ Object {
2994
+ "key": "marketing",
2995
+ "label": <FormattedMessage
2996
+ defaultMessage="Marketing"
2997
+ id="creatives.containersV2.Whatsapp.marketing"
2998
+ values={Object {}}
2999
+ />,
3000
+ "tagColor": "#ffe5d2",
3001
+ "tagTextColor": "#f87d23",
3002
+ "tooltipLabel": <FormattedMessage
3003
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
3004
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
3005
+ values={Object {}}
3006
+ />,
3007
+ "value": "MARKETING",
3008
+ },
3009
+ Object {
3010
+ "key": "authentication",
3011
+ "label": <FormattedMessage
3012
+ defaultMessage="Authentication"
3013
+ id="creatives.containersV2.Whatsapp.authentication"
3014
+ values={Object {}}
3015
+ />,
3016
+ "tagColor": "#ecf7ec",
3017
+ "tagTextColor": "#6bb56b",
3018
+ "tooltipLabel": <FormattedMessage
3019
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
3020
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
3021
+ values={Object {}}
3022
+ />,
3023
+ "value": "AUTHENTICATION",
3024
+ },
3025
+ ]
3026
+ }
3027
+ dropdownMaxHeight="320px"
3028
+ dropdownWidth="228px"
3029
+ onSelect={[Function]}
3030
+ overlayStyle={
3031
+ Object {
3032
+ "overflowY": "hidden",
3033
+ }
3034
+ }
3035
+ placeholder="Category"
3036
+ placement="bottomLeft"
3037
+ selectedValue={null}
3038
+ showBadge={true}
3039
+ width="105px"
2844
3040
  />
2845
- }
2846
- title="Create new template"
2847
- />
3041
+ </div>
3042
+ <Component />
3043
+ <Component />
3044
+ <div
3045
+ className="template-listing-header-actions"
3046
+ >
3047
+ <CapLink
3048
+ className="create-new-link"
3049
+ disabled={false}
3050
+ onClick={[Function]}
3051
+ suffix={
3052
+ <CapIcon
3053
+ size="s"
3054
+ type="open-in-new"
3055
+ />
3056
+ }
3057
+ title="Create new template"
3058
+ />
3059
+ </div>
3060
+ </div>
2848
3061
  </div>
2849
- </div>
3062
+ </CapRow>
2850
3063
  <CapRow
2851
3064
  align="middle"
2852
3065
  className="selected-whatsapp-filters"
@@ -2948,6 +3161,11 @@ exports[`Test Templates container Test removing single filter 1`] = `
2948
3161
  <Fragment>
2949
3162
  <div
2950
3163
  className="creatives-templates-list library-mode"
3164
+ style={
3165
+ Object {
3166
+ "position": "relative",
3167
+ }
3168
+ }
2951
3169
  >
2952
3170
  <input
2953
3171
  accept=".zip, .html, .htm"
@@ -2980,120 +3198,125 @@ exports[`Test Templates container Test removing single filter 1`] = `
2980
3198
  }
2981
3199
  titleClass=""
2982
3200
  />
2983
- <div
2984
- className="action-container"
3201
+ <CapRow
3202
+ align="middle"
3203
+ className="filter-row"
3204
+ justify="space-between"
3205
+ type="flex"
2985
3206
  >
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
3207
  <div
3002
- className="whatsapp-filters"
3208
+ className="filter-row-content"
3003
3209
  >
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
- },
3210
+ <div
3211
+ className="action-container"
3212
+ >
3213
+ <_Class
3214
+ className="search-text"
3215
+ disabled={false}
3216
+ labelPosition="top"
3217
+ onChange={[Function]}
3218
+ onClear={[Function]}
3219
+ onScroll={[Function]}
3220
+ placeholder="Search"
3221
+ style={
3039
3222
  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",
3223
+ "width": "210px",
3224
+ }
3063
3225
  }
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"
3226
+ value=""
3227
+ />
3228
+ <div
3229
+ className="whatsapp-filters"
3230
+ >
3231
+ <CapSelectFilter
3232
+ data={
3233
+ Array [
3234
+ Object {
3235
+ "key": "utility",
3236
+ "label": <FormattedMessage
3237
+ defaultMessage="Utility"
3238
+ id="creatives.containersV2.Whatsapp.utility"
3239
+ values={Object {}}
3240
+ />,
3241
+ "tagColor": "#f2e7fe",
3242
+ "tagTextColor": "#a451ff",
3243
+ "tooltipLabel": <FormattedMessage
3244
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
3245
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
3246
+ values={Object {}}
3247
+ />,
3248
+ "value": "UTILITY",
3249
+ },
3250
+ Object {
3251
+ "key": "marketing",
3252
+ "label": <FormattedMessage
3253
+ defaultMessage="Marketing"
3254
+ id="creatives.containersV2.Whatsapp.marketing"
3255
+ values={Object {}}
3256
+ />,
3257
+ "tagColor": "#ffe5d2",
3258
+ "tagTextColor": "#f87d23",
3259
+ "tooltipLabel": <FormattedMessage
3260
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
3261
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
3262
+ values={Object {}}
3263
+ />,
3264
+ "value": "MARKETING",
3265
+ },
3266
+ Object {
3267
+ "key": "authentication",
3268
+ "label": <FormattedMessage
3269
+ defaultMessage="Authentication"
3270
+ id="creatives.containersV2.Whatsapp.authentication"
3271
+ values={Object {}}
3272
+ />,
3273
+ "tagColor": "#ecf7ec",
3274
+ "tagTextColor": "#6bb56b",
3275
+ "tooltipLabel": <FormattedMessage
3276
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
3277
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
3278
+ values={Object {}}
3279
+ />,
3280
+ "value": "AUTHENTICATION",
3281
+ },
3282
+ ]
3283
+ }
3284
+ dropdownMaxHeight="320px"
3285
+ dropdownWidth="228px"
3286
+ onSelect={[Function]}
3287
+ overlayStyle={
3288
+ Object {
3289
+ "overflowY": "hidden",
3290
+ }
3291
+ }
3292
+ placeholder="Category"
3293
+ placement="bottomLeft"
3294
+ selectedValue=""
3295
+ showBadge={true}
3296
+ width="105px"
3091
3297
  />
3092
- }
3093
- title="Create new template"
3094
- />
3298
+ </div>
3299
+ <Component />
3300
+ <Component />
3301
+ <div
3302
+ className="template-listing-header-actions"
3303
+ >
3304
+ <CapLink
3305
+ className="create-new-link"
3306
+ disabled={false}
3307
+ onClick={[Function]}
3308
+ suffix={
3309
+ <CapIcon
3310
+ size="s"
3311
+ type="open-in-new"
3312
+ />
3313
+ }
3314
+ title="Create new template"
3315
+ />
3316
+ </div>
3317
+ </div>
3095
3318
  </div>
3096
- </div>
3319
+ </CapRow>
3097
3320
  <CapRow
3098
3321
  align="middle"
3099
3322
  className="selected-whatsapp-filters"