@capillarytech/creatives-library 9.0.26 → 9.0.29-alpha.1

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 (149) hide show
  1. package/constants/unified.js +29 -0
  2. package/global-styles.js +1 -1
  3. package/package.json +1 -1
  4. package/services/tests/api.test.js +35 -20
  5. package/utils/commonUtils.js +22 -1
  6. package/utils/rcsPayloadUtils.js +102 -0
  7. package/utils/templateVarUtils.js +198 -0
  8. package/utils/tests/rcsPayloadUtils.test.js +295 -0
  9. package/utils/tests/templateVarUtils.test.js +204 -0
  10. package/v2Components/CapActionButton/constants.js +21 -1
  11. package/v2Components/CapActionButton/index.js +260 -144
  12. package/v2Components/CapActionButton/index.scss +245 -14
  13. package/v2Components/CapActionButton/messages.js +32 -3
  14. package/v2Components/CapActionButton/tests/index.test.js +74 -19
  15. package/v2Components/CapImageUpload/index.js +2 -2
  16. package/v2Components/CapTagList/index.js +9 -0
  17. package/v2Components/CommonTestAndPreview/CustomValuesEditor.js +70 -48
  18. package/v2Components/CommonTestAndPreview/DeliverySettings/DeliverySettings.scss +8 -2
  19. package/v2Components/CommonTestAndPreview/DeliverySettings/ModifyDeliverySettings.js +214 -21
  20. package/v2Components/CommonTestAndPreview/DeliverySettings/constants.js +16 -0
  21. package/v2Components/CommonTestAndPreview/DeliverySettings/index.js +83 -9
  22. package/v2Components/CommonTestAndPreview/DeliverySettings/messages.js +30 -0
  23. package/v2Components/CommonTestAndPreview/DeliverySettings/utils/parseSenderDetailsResponse.js +58 -11
  24. package/v2Components/CommonTestAndPreview/SendTestMessage.js +10 -5
  25. package/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js +186 -22
  26. package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +381 -80
  27. package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js +155 -8
  28. package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss +11 -0
  29. package/v2Components/CommonTestAndPreview/constants.js +35 -2
  30. package/v2Components/CommonTestAndPreview/index.js +770 -231
  31. package/v2Components/CommonTestAndPreview/messages.js +45 -3
  32. package/v2Components/CommonTestAndPreview/previewApiUtils.js +59 -0
  33. package/v2Components/CommonTestAndPreview/sagas.js +25 -6
  34. package/v2Components/CommonTestAndPreview/tests/CommonTestAndPreview.addTestCustomer.test.js +1 -0
  35. package/v2Components/CommonTestAndPreview/tests/CustomValuesEditor.test.js +412 -257
  36. package/v2Components/CommonTestAndPreview/tests/DeliverySettings/ModifyDeliverySettings.test.js +337 -63
  37. package/v2Components/CommonTestAndPreview/tests/DeliverySettings/index.test.js +118 -5
  38. package/v2Components/CommonTestAndPreview/tests/DeliverySettings/utils/parseSenderDetailsResponse.test.js +341 -0
  39. package/v2Components/CommonTestAndPreview/tests/PreviewSection.test.js +8 -1
  40. package/v2Components/CommonTestAndPreview/tests/SendTestMessage.test.js +108 -15
  41. package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/RcsPreviewContent.test.js +281 -283
  42. package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/index.test.js +199 -1
  43. package/v2Components/CommonTestAndPreview/tests/index.test.js +133 -4
  44. package/v2Components/CommonTestAndPreview/tests/previewApiUtils.test.js +67 -0
  45. package/v2Components/CommonTestAndPreview/tests/sagas.test.js +31 -24
  46. package/v2Components/CommonTestAndPreview/tests/utils.test.js +151 -0
  47. package/v2Components/CommonTestAndPreview/utils.js +84 -0
  48. package/v2Components/SmsFallback/SmsFallbackLocalSelector.js +91 -0
  49. package/v2Components/SmsFallback/constants.js +94 -0
  50. package/v2Components/SmsFallback/index.js +958 -0
  51. package/v2Components/SmsFallback/index.scss +266 -0
  52. package/v2Components/SmsFallback/messages.js +78 -0
  53. package/v2Components/SmsFallback/smsFallbackUtils.js +120 -0
  54. package/v2Components/SmsFallback/tests/SmsFallbackLocalSelector.test.js +50 -0
  55. package/v2Components/SmsFallback/tests/rcsSmsFallback.acceptance.test.js +147 -0
  56. package/v2Components/SmsFallback/tests/smsFallbackHandlers.test.js +304 -0
  57. package/v2Components/SmsFallback/tests/smsFallbackUi.test.js +208 -0
  58. package/v2Components/SmsFallback/tests/smsFallbackUtils.test.js +309 -0
  59. package/v2Components/SmsFallback/tests/useLocalTemplateList.test.js +471 -0
  60. package/v2Components/SmsFallback/useLocalTemplateList.js +92 -0
  61. package/v2Components/TemplatePreview/_templatePreview.scss +45 -25
  62. package/v2Components/TemplatePreview/constants.js +2 -0
  63. package/v2Components/TemplatePreview/index.js +147 -32
  64. package/v2Components/TemplatePreview/tests/index.test.js +142 -0
  65. package/v2Components/TestAndPreviewSlidebox/CustomValuesEditor.js +6 -6
  66. package/v2Components/TestAndPreviewSlidebox/index.js +13 -1
  67. package/v2Components/TestAndPreviewSlidebox/sagas.js +11 -4
  68. package/v2Components/TestAndPreviewSlidebox/tests/saga.test.js +3 -1
  69. package/v2Components/VarSegmentMessageEditor/constants.js +2 -0
  70. package/v2Components/VarSegmentMessageEditor/index.js +125 -0
  71. package/v2Components/VarSegmentMessageEditor/index.scss +46 -0
  72. package/v2Containers/CommunicationFlow/Tests/CommunicationFlow.test.js +4 -1
  73. package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/Tests/DeliverySettingsSection.test.js +4 -0
  74. package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/Tests/SenderDetails.test.js +20 -20
  75. package/v2Containers/CreativesContainer/CreativesSlideBoxWrapper.js +27 -0
  76. package/v2Containers/CreativesContainer/SlideBoxContent.js +37 -4
  77. package/v2Containers/CreativesContainer/SlideBoxFooter.js +14 -5
  78. package/v2Containers/CreativesContainer/SlideBoxHeader.js +36 -5
  79. package/v2Containers/CreativesContainer/constants.js +11 -0
  80. package/v2Containers/CreativesContainer/embeddedSlideboxUtils.js +77 -0
  81. package/v2Containers/CreativesContainer/index.js +328 -106
  82. package/v2Containers/CreativesContainer/index.scss +102 -1
  83. package/v2Containers/CreativesContainer/tests/CreativesSlideBoxWrapper.test.js +58 -0
  84. package/v2Containers/CreativesContainer/tests/SlideBoxContent.localTemplates.test.js +90 -0
  85. package/v2Containers/CreativesContainer/tests/SlideBoxContent.smsDltPreview.test.js +73 -0
  86. package/v2Containers/CreativesContainer/tests/SlideBoxContent.test.js +37 -0
  87. package/v2Containers/CreativesContainer/tests/SlideBoxFooter.test.js +103 -34
  88. package/v2Containers/CreativesContainer/tests/SlideBoxHeader.test.js +193 -15
  89. package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap +88 -0
  90. package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxHeader.test.js.snap +549 -57
  91. package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap +20 -15
  92. package/v2Containers/CreativesContainer/tests/embeddedSlideboxUtils.test.js +258 -0
  93. package/v2Containers/CreativesContainer/tests/index.test.js +71 -9
  94. package/v2Containers/CreativesContainer/tests/useLocalTemplatesProp.test.js +125 -0
  95. package/v2Containers/Email/index.js +3 -54
  96. package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js +4 -9
  97. package/v2Containers/MobilePush/Create/test/saga.test.js +2 -2
  98. package/v2Containers/Rcs/carouselUtils.js +224 -0
  99. package/v2Containers/Rcs/components/CarouselCard.js +317 -0
  100. package/v2Containers/Rcs/components/CarouselCardButtons.js +113 -0
  101. package/v2Containers/Rcs/components/CarouselCardMedia.js +136 -0
  102. package/v2Containers/Rcs/components/CarouselCharacterCount.js +31 -0
  103. package/v2Containers/Rcs/components/CarouselDimensionSelection.js +80 -0
  104. package/v2Containers/Rcs/constants.js +132 -16
  105. package/v2Containers/Rcs/index.js +1808 -949
  106. package/v2Containers/Rcs/index.scss +443 -8
  107. package/v2Containers/Rcs/messages.js +45 -22
  108. package/v2Containers/Rcs/rcsLibraryHydrationUtils.js +484 -0
  109. package/v2Containers/Rcs/tests/CarouselCard.test.js +464 -0
  110. package/v2Containers/Rcs/tests/CarouselCardButtons.test.js +211 -0
  111. package/v2Containers/Rcs/tests/CarouselCardMedia.test.js +160 -0
  112. package/v2Containers/Rcs/tests/CarouselCharacterCount.test.js +50 -0
  113. package/v2Containers/Rcs/tests/CarouselDimensionSelection.test.js +119 -0
  114. package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap +74176 -39409
  115. package/v2Containers/Rcs/tests/__snapshots__/utils.test.js.snap +10 -74
  116. package/v2Containers/Rcs/tests/carouselUtils.test.js +916 -0
  117. package/v2Containers/Rcs/tests/index.test.js +219 -40
  118. package/v2Containers/Rcs/tests/mockData.js +38 -0
  119. package/v2Containers/Rcs/tests/rcsLibraryHydrationUtils.test.js +873 -0
  120. package/v2Containers/Rcs/tests/utils.test.js +682 -30
  121. package/v2Containers/Rcs/utils.js +514 -12
  122. package/v2Containers/Sms/Create/index.js +115 -48
  123. package/v2Containers/Sms/smsFormDataHelpers.js +67 -0
  124. package/v2Containers/Sms/tests/smsFormDataHelpers.test.js +253 -0
  125. package/v2Containers/SmsTrai/Create/index.js +9 -4
  126. package/v2Containers/SmsTrai/Edit/constants.js +2 -0
  127. package/v2Containers/SmsTrai/Edit/index.js +678 -169
  128. package/v2Containers/SmsTrai/Edit/index.scss +126 -0
  129. package/v2Containers/SmsTrai/Edit/messages.js +14 -4
  130. package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap +5615 -3014
  131. package/v2Containers/SmsWrapper/index.js +37 -8
  132. package/v2Containers/TagList/index.js +5 -0
  133. package/v2Containers/Templates/TemplatesActionBar.js +101 -0
  134. package/v2Containers/Templates/_templates.scss +196 -12
  135. package/v2Containers/Templates/actions.js +11 -0
  136. package/v2Containers/Templates/constants.js +2 -0
  137. package/v2Containers/Templates/index.js +131 -59
  138. package/v2Containers/Templates/sagas.js +57 -13
  139. package/v2Containers/Templates/tests/TemplatesActionBar.test.js +129 -0
  140. package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +1060 -1015
  141. package/v2Containers/Templates/tests/sagas.test.js +199 -16
  142. package/v2Containers/Templates/tests/smsTemplatesListApi.test.js +180 -0
  143. package/v2Containers/Templates/utils/smsTemplatesListApi.js +79 -0
  144. package/v2Containers/TemplatesV2/TemplatesV2.style.js +72 -1
  145. package/v2Containers/TemplatesV2/index.js +88 -25
  146. package/v2Containers/TemplatesV2/tests/TemplatesV2.localTemplates.test.js +131 -0
  147. package/v2Containers/WeChat/MapTemplates/test/saga.test.js +9 -9
  148. package/v2Containers/Whatsapp/index.js +3 -20
  149. package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +578 -34
package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap CHANGED
@@ -213,33 +213,38 @@ exports[`Test Templates container Should render sms illustration when no templat
213
213
  <div
214
214
  className="action-container"
215
215
  >
216
- <ComponentWithLabel(CapInputSearch)
217
- className="search-text"
218
- disabled={false}
219
- onChange={[Function]}
220
- onClear={[Function]}
221
- onScroll={[Function]}
222
- placeholder="Search"
223
- style={
224
- Object {
225
- "width": "210px",
226
- }
227
- }
228
- value=""
229
- />
230
- <Component />
231
- <Component />
232
216
  <div
233
- className="template-listing-header-actions"
217
+ className="action-container__toolbar-row"
234
218
  >
235
- <CapButton
236
- className="create-new-sms margin-l-8 margin-b-12"
219
+ <ComponentWithLabel(CapInputSearch)
220
+ className="search-text"
237
221
  disabled={false}
238
- onClick={[Function]}
239
- type="primary"
222
+ onChange={[Function]}
223
+ onClear={[Function]}
224
+ onScroll={[Function]}
225
+ onSearch={[Function]}
226
+ placeholder="Search"
227
+ value=""
228
+ />
229
+ <Component />
230
+ <Component />
231
+ <div
232
+ className="template-listing-header-actions"
233
+ />
234
+ </div>
235
+ <div>
236
+ <div
237
+ className="action-container__create-row"
240
238
  >
241
- Create new
242
- </CapButton>
239
+ <CapButton
240
+ className="create-new-sms margin-l-8 margin-b-12"
241
+ disabled={false}
242
+ onClick={[Function]}
243
+ type="primary"
244
+ >
245
+ Create new
246
+ </CapButton>
247
+ </div>
243
248
  </div>
244
249
  </div>
245
250
  </div>
@@ -403,109 +408,114 @@ exports[`Test Templates container Should render temlates when whatsapp templates
403
408
  <div
404
409
  className="action-container"
405
410
  >
406
- <ComponentWithLabel(CapInputSearch)
407
- className="search-text"
408
- disabled={false}
409
- onChange={[Function]}
410
- onClear={[Function]}
411
- onScroll={[Function]}
412
- placeholder="Search"
413
- style={
414
- Object {
415
- "width": "210px",
416
- }
417
- }
418
- value=""
419
- />
420
- <CapRow
421
- align="middle"
422
- className="whatsapp-filters"
423
- gap={8}
424
- type="flex"
411
+ <div
412
+ className="action-container__toolbar-row"
425
413
  >
426
- <CapSelectFilter
427
- data={
428
- Array [
429
- Object {
430
- "key": "utility",
431
- "label": <FormattedMessage
432
- defaultMessage="Utility"
433
- id="creatives.containersV2.Whatsapp.utility"
434
- values={Object {}}
435
- />,
436
- "tagColor": "#f2e7fe",
437
- "tagTextColor": "#a451ff",
438
- "tooltipLabel": <FormattedMessage
439
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
440
- id="creatives.containersV2.Whatsapp.utilityTooltip"
441
- values={Object {}}
442
- />,
443
- "value": "UTILITY",
444
- },
445
- Object {
446
- "key": "marketing",
447
- "label": <FormattedMessage
448
- defaultMessage="Marketing"
449
- id="creatives.containersV2.Whatsapp.marketing"
450
- values={Object {}}
451
- />,
452
- "tagColor": "#ffe5d2",
453
- "tagTextColor": "#f87d23",
454
- "tooltipLabel": <FormattedMessage
455
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
456
- id="creatives.containersV2.Whatsapp.marketingTooltip"
457
- values={Object {}}
458
- />,
459
- "value": "MARKETING",
460
- },
414
+ <ComponentWithLabel(CapInputSearch)
415
+ className="search-text"
416
+ disabled={false}
417
+ onChange={[Function]}
418
+ onClear={[Function]}
419
+ onScroll={[Function]}
420
+ onSearch={[Function]}
421
+ placeholder="Search"
422
+ value=""
423
+ />
424
+ <CapRow
425
+ align="middle"
426
+ className="whatsapp-filters"
427
+ gap={8}
428
+ type="flex"
429
+ >
430
+ <CapSelectFilter
431
+ data={
432
+ Array [
433
+ Object {
434
+ "key": "utility",
435
+ "label": <FormattedMessage
436
+ defaultMessage="Utility"
437
+ id="creatives.containersV2.Whatsapp.utility"
438
+ values={Object {}}
439
+ />,
440
+ "tagColor": "#f2e7fe",
441
+ "tagTextColor": "#a451ff",
442
+ "tooltipLabel": <FormattedMessage
443
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
444
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
445
+ values={Object {}}
446
+ />,
447
+ "value": "UTILITY",
448
+ },
449
+ Object {
450
+ "key": "marketing",
451
+ "label": <FormattedMessage
452
+ defaultMessage="Marketing"
453
+ id="creatives.containersV2.Whatsapp.marketing"
454
+ values={Object {}}
455
+ />,
456
+ "tagColor": "#ffe5d2",
457
+ "tagTextColor": "#f87d23",
458
+ "tooltipLabel": <FormattedMessage
459
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
460
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
461
+ values={Object {}}
462
+ />,
463
+ "value": "MARKETING",
464
+ },
465
+ Object {
466
+ "key": "authentication",
467
+ "label": <FormattedMessage
468
+ defaultMessage="Authentication"
469
+ id="creatives.containersV2.Whatsapp.authentication"
470
+ values={Object {}}
471
+ />,
472
+ "tagColor": "#ecf7ec",
473
+ "tagTextColor": "#6bb56b",
474
+ "tooltipLabel": <FormattedMessage
475
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
476
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
477
+ values={Object {}}
478
+ />,
479
+ "value": "AUTHENTICATION",
480
+ },
481
+ ]
482
+ }
483
+ onSelect={[Function]}
484
+ overlayStyle={
461
485
  Object {
462
- "key": "authentication",
463
- "label": <FormattedMessage
464
- defaultMessage="Authentication"
465
- id="creatives.containersV2.Whatsapp.authentication"
466
- values={Object {}}
467
- />,
468
- "tagColor": "#ecf7ec",
469
- "tagTextColor": "#6bb56b",
470
- "tooltipLabel": <FormattedMessage
471
- defaultMessage="Send codes that allow your customers to securely access their accounts."
472
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
473
- values={Object {}}
474
- />,
475
- "value": "AUTHENTICATION",
476
- },
477
- ]
478
- }
479
- onSelect={[Function]}
480
- overlayStyle={
481
- Object {
482
- "overflowY": "hidden",
486
+ "overflowY": "hidden",
487
+ }
483
488
  }
484
- }
485
- placeholder="Category"
486
- placement="bottomLeft"
487
- selectedValue=""
488
- showBadge={true}
489
- width="105px"
490
- />
491
- </CapRow>
492
- <Component />
493
- <Component />
494
- <div
495
- className="template-listing-header-actions"
496
- >
497
- <CapLink
498
- className="create-new-link"
499
- onClick={[Function]}
500
- suffix={
501
- <CapIcon
502
- size="s"
503
- type="open-in-new"
504
- />
505
- }
506
- title="Create new template"
489
+ placeholder="Category"
490
+ placement="bottomLeft"
491
+ selectedValue=""
492
+ showBadge={true}
493
+ width="105px"
494
+ />
495
+ </CapRow>
496
+ <Component />
497
+ <Component />
498
+ <div
499
+ className="template-listing-header-actions"
507
500
  />
508
501
  </div>
502
+ <div>
503
+ <div
504
+ className="action-container__create-row"
505
+ >
506
+ <CapLink
507
+ className="create-new-link"
508
+ onClick={[Function]}
509
+ suffix={
510
+ <CapIcon
511
+ size="s"
512
+ type="open-in-new"
513
+ />
514
+ }
515
+ title="Create new template"
516
+ />
517
+ </div>
518
+ </div>
509
519
  </div>
510
520
  </div>
511
521
  </CapRow>
@@ -648,162 +658,167 @@ exports[`Test Templates container Should render temlates when whatsapp templates
648
658
  <div
649
659
  className="action-container"
650
660
  >
651
- <ComponentWithLabel(CapInputSearch)
652
- className="search-text"
653
- disabled={false}
654
- onChange={[Function]}
655
- onClear={[Function]}
656
- onScroll={[Function]}
657
- placeholder="Search"
658
- style={
659
- Object {
660
- "width": "210px",
661
- }
662
- }
663
- value=""
664
- />
665
- <CapRow
666
- align="middle"
667
- className="whatsapp-filters"
668
- gap={8}
669
- type="flex"
661
+ <div
662
+ className="action-container__toolbar-row"
670
663
  >
671
- <CapSelectFilter
672
- data={
673
- Array [
674
- Object {
675
- "key": "awaitingApproval",
676
- "label": <FormattedMessage
677
- defaultMessage="Awaiting approval"
678
- id="creatives.containersV2.Whatsapp.awaitingApproval"
679
- values={Object {}}
680
- />,
681
- "value": "awaitingApproval",
682
- },
683
- Object {
684
- "key": "approved",
685
- "label": <FormattedMessage
686
- defaultMessage="Approved"
687
- id="creatives.containersV2.Whatsapp.approved"
688
- values={Object {}}
689
- />,
690
- "value": "approved",
691
- },
692
- Object {
693
- "key": "rejected",
694
- "label": <FormattedMessage
695
- defaultMessage="Rejected"
696
- id="creatives.containersV2.Whatsapp.rejected"
697
- values={Object {}}
698
- />,
699
- "value": "rejected",
700
- },
701
- Object {
702
- "key": "pending",
703
- "label": <FormattedMessage
704
- defaultMessage="Pending"
705
- id="creatives.containersV2.Whatsapp.pending"
706
- values={Object {}}
707
- />,
708
- "value": "pending",
709
- },
710
- Object {
711
- "key": "paused",
712
- "label": <FormattedMessage
713
- defaultMessage="Paused"
714
- id="creatives.containersV2.Whatsapp.paused"
715
- values={Object {}}
716
- />,
717
- "value": "paused",
718
- },
719
- ]
720
- }
721
- onSelect={[Function]}
722
- placeholder="Status"
723
- placement="bottomLeft"
724
- selectedValue="approved"
725
- showBadge={true}
726
- width="90px"
664
+ <ComponentWithLabel(CapInputSearch)
665
+ className="search-text"
666
+ disabled={false}
667
+ onChange={[Function]}
668
+ onClear={[Function]}
669
+ onScroll={[Function]}
670
+ onSearch={[Function]}
671
+ placeholder="Search"
672
+ value=""
727
673
  />
728
- <CapSelectFilter
729
- data={
730
- Array [
731
- Object {
732
- "key": "utility",
733
- "label": <FormattedMessage
734
- defaultMessage="Utility"
735
- id="creatives.containersV2.Whatsapp.utility"
736
- values={Object {}}
737
- />,
738
- "tagColor": "#f2e7fe",
739
- "tagTextColor": "#a451ff",
740
- "tooltipLabel": <FormattedMessage
741
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
742
- id="creatives.containersV2.Whatsapp.utilityTooltip"
743
- values={Object {}}
744
- />,
745
- "value": "UTILITY",
746
- },
747
- Object {
748
- "key": "marketing",
749
- "label": <FormattedMessage
750
- defaultMessage="Marketing"
751
- id="creatives.containersV2.Whatsapp.marketing"
752
- values={Object {}}
753
- />,
754
- "tagColor": "#ffe5d2",
755
- "tagTextColor": "#f87d23",
756
- "tooltipLabel": <FormattedMessage
757
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
758
- id="creatives.containersV2.Whatsapp.marketingTooltip"
759
- values={Object {}}
760
- />,
761
- "value": "MARKETING",
762
- },
674
+ <CapRow
675
+ align="middle"
676
+ className="whatsapp-filters"
677
+ gap={8}
678
+ type="flex"
679
+ >
680
+ <CapSelectFilter
681
+ data={
682
+ Array [
683
+ Object {
684
+ "key": "awaitingApproval",
685
+ "label": <FormattedMessage
686
+ defaultMessage="Awaiting approval"
687
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
688
+ values={Object {}}
689
+ />,
690
+ "value": "awaitingApproval",
691
+ },
692
+ Object {
693
+ "key": "approved",
694
+ "label": <FormattedMessage
695
+ defaultMessage="Approved"
696
+ id="creatives.containersV2.Whatsapp.approved"
697
+ values={Object {}}
698
+ />,
699
+ "value": "approved",
700
+ },
701
+ Object {
702
+ "key": "rejected",
703
+ "label": <FormattedMessage
704
+ defaultMessage="Rejected"
705
+ id="creatives.containersV2.Whatsapp.rejected"
706
+ values={Object {}}
707
+ />,
708
+ "value": "rejected",
709
+ },
710
+ Object {
711
+ "key": "pending",
712
+ "label": <FormattedMessage
713
+ defaultMessage="Pending"
714
+ id="creatives.containersV2.Whatsapp.pending"
715
+ values={Object {}}
716
+ />,
717
+ "value": "pending",
718
+ },
719
+ Object {
720
+ "key": "paused",
721
+ "label": <FormattedMessage
722
+ defaultMessage="Paused"
723
+ id="creatives.containersV2.Whatsapp.paused"
724
+ values={Object {}}
725
+ />,
726
+ "value": "paused",
727
+ },
728
+ ]
729
+ }
730
+ onSelect={[Function]}
731
+ placeholder="Status"
732
+ placement="bottomLeft"
733
+ selectedValue="approved"
734
+ showBadge={true}
735
+ width="90px"
736
+ />
737
+ <CapSelectFilter
738
+ data={
739
+ Array [
740
+ Object {
741
+ "key": "utility",
742
+ "label": <FormattedMessage
743
+ defaultMessage="Utility"
744
+ id="creatives.containersV2.Whatsapp.utility"
745
+ values={Object {}}
746
+ />,
747
+ "tagColor": "#f2e7fe",
748
+ "tagTextColor": "#a451ff",
749
+ "tooltipLabel": <FormattedMessage
750
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
751
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
752
+ values={Object {}}
753
+ />,
754
+ "value": "UTILITY",
755
+ },
756
+ Object {
757
+ "key": "marketing",
758
+ "label": <FormattedMessage
759
+ defaultMessage="Marketing"
760
+ id="creatives.containersV2.Whatsapp.marketing"
761
+ values={Object {}}
762
+ />,
763
+ "tagColor": "#ffe5d2",
764
+ "tagTextColor": "#f87d23",
765
+ "tooltipLabel": <FormattedMessage
766
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
767
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
768
+ values={Object {}}
769
+ />,
770
+ "value": "MARKETING",
771
+ },
772
+ Object {
773
+ "key": "authentication",
774
+ "label": <FormattedMessage
775
+ defaultMessage="Authentication"
776
+ id="creatives.containersV2.Whatsapp.authentication"
777
+ values={Object {}}
778
+ />,
779
+ "tagColor": "#ecf7ec",
780
+ "tagTextColor": "#6bb56b",
781
+ "tooltipLabel": <FormattedMessage
782
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
783
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
784
+ values={Object {}}
785
+ />,
786
+ "value": "AUTHENTICATION",
787
+ },
788
+ ]
789
+ }
790
+ onSelect={[Function]}
791
+ overlayStyle={
763
792
  Object {
764
- "key": "authentication",
765
- "label": <FormattedMessage
766
- defaultMessage="Authentication"
767
- id="creatives.containersV2.Whatsapp.authentication"
768
- values={Object {}}
769
- />,
770
- "tagColor": "#ecf7ec",
771
- "tagTextColor": "#6bb56b",
772
- "tooltipLabel": <FormattedMessage
773
- defaultMessage="Send codes that allow your customers to securely access their accounts."
774
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
775
- values={Object {}}
776
- />,
777
- "value": "AUTHENTICATION",
778
- },
779
- ]
780
- }
781
- onSelect={[Function]}
782
- overlayStyle={
783
- Object {
784
- "overflowY": "hidden",
793
+ "overflowY": "hidden",
794
+ }
785
795
  }
786
- }
787
- placeholder="Category"
788
- placement="bottomLeft"
789
- selectedValue=""
790
- showBadge={true}
791
- width="105px"
796
+ placeholder="Category"
797
+ placement="bottomLeft"
798
+ selectedValue=""
799
+ showBadge={true}
800
+ width="105px"
801
+ />
802
+ </CapRow>
803
+ <Component />
804
+ <Component />
805
+ <div
806
+ className="template-listing-header-actions"
792
807
  />
793
- </CapRow>
794
- <Component />
795
- <Component />
796
- <div
797
- className="template-listing-header-actions"
798
- >
799
- <CapButton
800
- className="create-new-whatsapp margin-l-8 margin-b-12"
801
- disabled={false}
802
- onClick={[Function]}
803
- type="primary"
808
+ </div>
809
+ <div>
810
+ <div
811
+ className="action-container__create-row"
804
812
  >
805
- Create new
806
- </CapButton>
813
+ <CapButton
814
+ className="create-new-whatsapp margin-l-8 margin-b-12"
815
+ disabled={false}
816
+ onClick={[Function]}
817
+ type="primary"
818
+ >
819
+ Create new
820
+ </CapButton>
821
+ </div>
807
822
  </div>
808
823
  </div>
809
824
  </div>
@@ -1053,162 +1068,167 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
1053
1068
  <div
1054
1069
  className="action-container"
1055
1070
  >
1056
- <ComponentWithLabel(CapInputSearch)
1057
- className="search-text"
1058
- disabled={false}
1059
- onChange={[Function]}
1060
- onClear={[Function]}
1061
- onScroll={[Function]}
1062
- placeholder="Search"
1063
- style={
1064
- Object {
1065
- "width": "210px",
1066
- }
1067
- }
1068
- value=""
1069
- />
1070
- <CapRow
1071
- align="middle"
1072
- className="whatsapp-filters"
1073
- gap={8}
1074
- type="flex"
1071
+ <div
1072
+ className="action-container__toolbar-row"
1075
1073
  >
1076
- <CapSelectFilter
1077
- data={
1078
- Array [
1079
- Object {
1080
- "key": "awaitingApproval",
1081
- "label": <FormattedMessage
1082
- defaultMessage="Awaiting approval"
1083
- id="creatives.containersV2.Whatsapp.awaitingApproval"
1084
- values={Object {}}
1085
- />,
1086
- "value": "awaitingApproval",
1087
- },
1088
- Object {
1089
- "key": "approved",
1090
- "label": <FormattedMessage
1091
- defaultMessage="Approved"
1092
- id="creatives.containersV2.Whatsapp.approved"
1093
- values={Object {}}
1094
- />,
1095
- "value": "approved",
1096
- },
1097
- Object {
1098
- "key": "rejected",
1099
- "label": <FormattedMessage
1100
- defaultMessage="Rejected"
1101
- id="creatives.containersV2.Whatsapp.rejected"
1102
- values={Object {}}
1103
- />,
1104
- "value": "rejected",
1105
- },
1106
- Object {
1107
- "key": "pending",
1108
- "label": <FormattedMessage
1109
- defaultMessage="Pending"
1110
- id="creatives.containersV2.Whatsapp.pending"
1111
- values={Object {}}
1112
- />,
1113
- "value": "pending",
1114
- },
1115
- Object {
1116
- "key": "paused",
1117
- "label": <FormattedMessage
1118
- defaultMessage="Paused"
1119
- id="creatives.containersV2.Whatsapp.paused"
1120
- values={Object {}}
1121
- />,
1122
- "value": "paused",
1123
- },
1124
- ]
1125
- }
1126
- onSelect={[Function]}
1127
- placeholder="Status"
1128
- placement="bottomLeft"
1129
- selectedValue=""
1130
- showBadge={true}
1131
- width="90px"
1074
+ <ComponentWithLabel(CapInputSearch)
1075
+ className="search-text"
1076
+ disabled={false}
1077
+ onChange={[Function]}
1078
+ onClear={[Function]}
1079
+ onScroll={[Function]}
1080
+ onSearch={[Function]}
1081
+ placeholder="Search"
1082
+ value=""
1132
1083
  />
1133
- <CapSelectFilter
1134
- data={
1135
- Array [
1136
- Object {
1137
- "key": "utility",
1138
- "label": <FormattedMessage
1139
- defaultMessage="Utility"
1140
- id="creatives.containersV2.Whatsapp.utility"
1141
- values={Object {}}
1142
- />,
1143
- "tagColor": "#f2e7fe",
1144
- "tagTextColor": "#a451ff",
1145
- "tooltipLabel": <FormattedMessage
1146
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1147
- id="creatives.containersV2.Whatsapp.utilityTooltip"
1148
- values={Object {}}
1149
- />,
1150
- "value": "UTILITY",
1151
- },
1152
- Object {
1153
- "key": "marketing",
1154
- "label": <FormattedMessage
1155
- defaultMessage="Marketing"
1156
- id="creatives.containersV2.Whatsapp.marketing"
1157
- values={Object {}}
1158
- />,
1159
- "tagColor": "#ffe5d2",
1160
- "tagTextColor": "#f87d23",
1161
- "tooltipLabel": <FormattedMessage
1162
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1163
- id="creatives.containersV2.Whatsapp.marketingTooltip"
1164
- values={Object {}}
1165
- />,
1166
- "value": "MARKETING",
1167
- },
1084
+ <CapRow
1085
+ align="middle"
1086
+ className="whatsapp-filters"
1087
+ gap={8}
1088
+ type="flex"
1089
+ >
1090
+ <CapSelectFilter
1091
+ data={
1092
+ Array [
1093
+ Object {
1094
+ "key": "awaitingApproval",
1095
+ "label": <FormattedMessage
1096
+ defaultMessage="Awaiting approval"
1097
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
1098
+ values={Object {}}
1099
+ />,
1100
+ "value": "awaitingApproval",
1101
+ },
1102
+ Object {
1103
+ "key": "approved",
1104
+ "label": <FormattedMessage
1105
+ defaultMessage="Approved"
1106
+ id="creatives.containersV2.Whatsapp.approved"
1107
+ values={Object {}}
1108
+ />,
1109
+ "value": "approved",
1110
+ },
1111
+ Object {
1112
+ "key": "rejected",
1113
+ "label": <FormattedMessage
1114
+ defaultMessage="Rejected"
1115
+ id="creatives.containersV2.Whatsapp.rejected"
1116
+ values={Object {}}
1117
+ />,
1118
+ "value": "rejected",
1119
+ },
1120
+ Object {
1121
+ "key": "pending",
1122
+ "label": <FormattedMessage
1123
+ defaultMessage="Pending"
1124
+ id="creatives.containersV2.Whatsapp.pending"
1125
+ values={Object {}}
1126
+ />,
1127
+ "value": "pending",
1128
+ },
1129
+ Object {
1130
+ "key": "paused",
1131
+ "label": <FormattedMessage
1132
+ defaultMessage="Paused"
1133
+ id="creatives.containersV2.Whatsapp.paused"
1134
+ values={Object {}}
1135
+ />,
1136
+ "value": "paused",
1137
+ },
1138
+ ]
1139
+ }
1140
+ onSelect={[Function]}
1141
+ placeholder="Status"
1142
+ placement="bottomLeft"
1143
+ selectedValue=""
1144
+ showBadge={true}
1145
+ width="90px"
1146
+ />
1147
+ <CapSelectFilter
1148
+ data={
1149
+ Array [
1150
+ Object {
1151
+ "key": "utility",
1152
+ "label": <FormattedMessage
1153
+ defaultMessage="Utility"
1154
+ id="creatives.containersV2.Whatsapp.utility"
1155
+ values={Object {}}
1156
+ />,
1157
+ "tagColor": "#f2e7fe",
1158
+ "tagTextColor": "#a451ff",
1159
+ "tooltipLabel": <FormattedMessage
1160
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1161
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1162
+ values={Object {}}
1163
+ />,
1164
+ "value": "UTILITY",
1165
+ },
1166
+ Object {
1167
+ "key": "marketing",
1168
+ "label": <FormattedMessage
1169
+ defaultMessage="Marketing"
1170
+ id="creatives.containersV2.Whatsapp.marketing"
1171
+ values={Object {}}
1172
+ />,
1173
+ "tagColor": "#ffe5d2",
1174
+ "tagTextColor": "#f87d23",
1175
+ "tooltipLabel": <FormattedMessage
1176
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1177
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
1178
+ values={Object {}}
1179
+ />,
1180
+ "value": "MARKETING",
1181
+ },
1182
+ Object {
1183
+ "key": "authentication",
1184
+ "label": <FormattedMessage
1185
+ defaultMessage="Authentication"
1186
+ id="creatives.containersV2.Whatsapp.authentication"
1187
+ values={Object {}}
1188
+ />,
1189
+ "tagColor": "#ecf7ec",
1190
+ "tagTextColor": "#6bb56b",
1191
+ "tooltipLabel": <FormattedMessage
1192
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
1193
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1194
+ values={Object {}}
1195
+ />,
1196
+ "value": "AUTHENTICATION",
1197
+ },
1198
+ ]
1199
+ }
1200
+ onSelect={[Function]}
1201
+ overlayStyle={
1168
1202
  Object {
1169
- "key": "authentication",
1170
- "label": <FormattedMessage
1171
- defaultMessage="Authentication"
1172
- id="creatives.containersV2.Whatsapp.authentication"
1173
- values={Object {}}
1174
- />,
1175
- "tagColor": "#ecf7ec",
1176
- "tagTextColor": "#6bb56b",
1177
- "tooltipLabel": <FormattedMessage
1178
- defaultMessage="Send codes that allow your customers to securely access their accounts."
1179
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
1180
- values={Object {}}
1181
- />,
1182
- "value": "AUTHENTICATION",
1183
- },
1184
- ]
1185
- }
1186
- onSelect={[Function]}
1187
- overlayStyle={
1188
- Object {
1189
- "overflowY": "hidden",
1203
+ "overflowY": "hidden",
1204
+ }
1190
1205
  }
1191
- }
1192
- placeholder="Category"
1193
- placement="bottomLeft"
1194
- selectedValue=""
1195
- showBadge={true}
1196
- width="105px"
1206
+ placeholder="Category"
1207
+ placement="bottomLeft"
1208
+ selectedValue=""
1209
+ showBadge={true}
1210
+ width="105px"
1211
+ />
1212
+ </CapRow>
1213
+ <Component />
1214
+ <Component />
1215
+ <div
1216
+ className="template-listing-header-actions"
1197
1217
  />
1198
- </CapRow>
1199
- <Component />
1200
- <Component />
1201
- <div
1202
- className="template-listing-header-actions"
1203
- >
1204
- <CapButton
1205
- className="create-new-whatsapp margin-l-8 margin-b-12"
1206
- disabled={false}
1207
- onClick={[Function]}
1208
- type="primary"
1218
+ </div>
1219
+ <div>
1220
+ <div
1221
+ className="action-container__create-row"
1209
1222
  >
1210
- Create new
1211
- </CapButton>
1223
+ <CapButton
1224
+ className="create-new-whatsapp margin-l-8 margin-b-12"
1225
+ disabled={false}
1226
+ onClick={[Function]}
1227
+ type="primary"
1228
+ >
1229
+ Create new
1230
+ </CapButton>
1231
+ </div>
1212
1232
  </div>
1213
1233
  </div>
1214
1234
  </div>
@@ -1521,162 +1541,167 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
1521
1541
  <div
1522
1542
  className="action-container"
1523
1543
  >
1524
- <ComponentWithLabel(CapInputSearch)
1525
- className="search-text"
1526
- disabled={false}
1527
- onChange={[Function]}
1528
- onClear={[Function]}
1529
- onScroll={[Function]}
1530
- placeholder="Search"
1531
- style={
1532
- Object {
1533
- "width": "210px",
1534
- }
1535
- }
1536
- value=""
1537
- />
1538
- <CapRow
1539
- align="middle"
1540
- className="whatsapp-filters"
1541
- gap={8}
1542
- type="flex"
1544
+ <div
1545
+ className="action-container__toolbar-row"
1543
1546
  >
1544
- <CapSelectFilter
1545
- data={
1546
- Array [
1547
- Object {
1548
- "key": "awaitingApproval",
1549
- "label": <FormattedMessage
1550
- defaultMessage="Awaiting approval"
1551
- id="creatives.containersV2.Whatsapp.awaitingApproval"
1552
- values={Object {}}
1553
- />,
1554
- "value": "awaitingApproval",
1555
- },
1556
- Object {
1557
- "key": "approved",
1558
- "label": <FormattedMessage
1559
- defaultMessage="Approved"
1560
- id="creatives.containersV2.Whatsapp.approved"
1561
- values={Object {}}
1562
- />,
1563
- "value": "approved",
1564
- },
1565
- Object {
1566
- "key": "rejected",
1567
- "label": <FormattedMessage
1568
- defaultMessage="Rejected"
1569
- id="creatives.containersV2.Whatsapp.rejected"
1570
- values={Object {}}
1571
- />,
1572
- "value": "rejected",
1573
- },
1574
- Object {
1575
- "key": "pending",
1576
- "label": <FormattedMessage
1577
- defaultMessage="Pending"
1578
- id="creatives.containersV2.Whatsapp.pending"
1579
- values={Object {}}
1580
- />,
1581
- "value": "pending",
1582
- },
1583
- Object {
1584
- "key": "paused",
1585
- "label": <FormattedMessage
1586
- defaultMessage="Paused"
1587
- id="creatives.containersV2.Whatsapp.paused"
1588
- values={Object {}}
1589
- />,
1590
- "value": "paused",
1591
- },
1592
- ]
1593
- }
1594
- onSelect={[Function]}
1595
- placeholder="Status"
1596
- placement="bottomLeft"
1597
- selectedValue=""
1598
- showBadge={true}
1599
- width="90px"
1547
+ <ComponentWithLabel(CapInputSearch)
1548
+ className="search-text"
1549
+ disabled={false}
1550
+ onChange={[Function]}
1551
+ onClear={[Function]}
1552
+ onScroll={[Function]}
1553
+ onSearch={[Function]}
1554
+ placeholder="Search"
1555
+ value=""
1600
1556
  />
1601
- <CapSelectFilter
1602
- data={
1603
- Array [
1604
- Object {
1605
- "key": "utility",
1606
- "label": <FormattedMessage
1607
- defaultMessage="Utility"
1608
- id="creatives.containersV2.Whatsapp.utility"
1609
- values={Object {}}
1610
- />,
1611
- "tagColor": "#f2e7fe",
1612
- "tagTextColor": "#a451ff",
1613
- "tooltipLabel": <FormattedMessage
1614
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1615
- id="creatives.containersV2.Whatsapp.utilityTooltip"
1616
- values={Object {}}
1617
- />,
1618
- "value": "UTILITY",
1619
- },
1620
- Object {
1621
- "key": "marketing",
1622
- "label": <FormattedMessage
1623
- defaultMessage="Marketing"
1624
- id="creatives.containersV2.Whatsapp.marketing"
1625
- values={Object {}}
1626
- />,
1627
- "tagColor": "#ffe5d2",
1628
- "tagTextColor": "#f87d23",
1629
- "tooltipLabel": <FormattedMessage
1630
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1631
- id="creatives.containersV2.Whatsapp.marketingTooltip"
1632
- values={Object {}}
1633
- />,
1634
- "value": "MARKETING",
1635
- },
1557
+ <CapRow
1558
+ align="middle"
1559
+ className="whatsapp-filters"
1560
+ gap={8}
1561
+ type="flex"
1562
+ >
1563
+ <CapSelectFilter
1564
+ data={
1565
+ Array [
1566
+ Object {
1567
+ "key": "awaitingApproval",
1568
+ "label": <FormattedMessage
1569
+ defaultMessage="Awaiting approval"
1570
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
1571
+ values={Object {}}
1572
+ />,
1573
+ "value": "awaitingApproval",
1574
+ },
1575
+ Object {
1576
+ "key": "approved",
1577
+ "label": <FormattedMessage
1578
+ defaultMessage="Approved"
1579
+ id="creatives.containersV2.Whatsapp.approved"
1580
+ values={Object {}}
1581
+ />,
1582
+ "value": "approved",
1583
+ },
1584
+ Object {
1585
+ "key": "rejected",
1586
+ "label": <FormattedMessage
1587
+ defaultMessage="Rejected"
1588
+ id="creatives.containersV2.Whatsapp.rejected"
1589
+ values={Object {}}
1590
+ />,
1591
+ "value": "rejected",
1592
+ },
1593
+ Object {
1594
+ "key": "pending",
1595
+ "label": <FormattedMessage
1596
+ defaultMessage="Pending"
1597
+ id="creatives.containersV2.Whatsapp.pending"
1598
+ values={Object {}}
1599
+ />,
1600
+ "value": "pending",
1601
+ },
1602
+ Object {
1603
+ "key": "paused",
1604
+ "label": <FormattedMessage
1605
+ defaultMessage="Paused"
1606
+ id="creatives.containersV2.Whatsapp.paused"
1607
+ values={Object {}}
1608
+ />,
1609
+ "value": "paused",
1610
+ },
1611
+ ]
1612
+ }
1613
+ onSelect={[Function]}
1614
+ placeholder="Status"
1615
+ placement="bottomLeft"
1616
+ selectedValue=""
1617
+ showBadge={true}
1618
+ width="90px"
1619
+ />
1620
+ <CapSelectFilter
1621
+ data={
1622
+ Array [
1623
+ Object {
1624
+ "key": "utility",
1625
+ "label": <FormattedMessage
1626
+ defaultMessage="Utility"
1627
+ id="creatives.containersV2.Whatsapp.utility"
1628
+ values={Object {}}
1629
+ />,
1630
+ "tagColor": "#f2e7fe",
1631
+ "tagTextColor": "#a451ff",
1632
+ "tooltipLabel": <FormattedMessage
1633
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1634
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1635
+ values={Object {}}
1636
+ />,
1637
+ "value": "UTILITY",
1638
+ },
1639
+ Object {
1640
+ "key": "marketing",
1641
+ "label": <FormattedMessage
1642
+ defaultMessage="Marketing"
1643
+ id="creatives.containersV2.Whatsapp.marketing"
1644
+ values={Object {}}
1645
+ />,
1646
+ "tagColor": "#ffe5d2",
1647
+ "tagTextColor": "#f87d23",
1648
+ "tooltipLabel": <FormattedMessage
1649
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1650
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
1651
+ values={Object {}}
1652
+ />,
1653
+ "value": "MARKETING",
1654
+ },
1655
+ Object {
1656
+ "key": "authentication",
1657
+ "label": <FormattedMessage
1658
+ defaultMessage="Authentication"
1659
+ id="creatives.containersV2.Whatsapp.authentication"
1660
+ values={Object {}}
1661
+ />,
1662
+ "tagColor": "#ecf7ec",
1663
+ "tagTextColor": "#6bb56b",
1664
+ "tooltipLabel": <FormattedMessage
1665
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
1666
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1667
+ values={Object {}}
1668
+ />,
1669
+ "value": "AUTHENTICATION",
1670
+ },
1671
+ ]
1672
+ }
1673
+ onSelect={[Function]}
1674
+ overlayStyle={
1636
1675
  Object {
1637
- "key": "authentication",
1638
- "label": <FormattedMessage
1639
- defaultMessage="Authentication"
1640
- id="creatives.containersV2.Whatsapp.authentication"
1641
- values={Object {}}
1642
- />,
1643
- "tagColor": "#ecf7ec",
1644
- "tagTextColor": "#6bb56b",
1645
- "tooltipLabel": <FormattedMessage
1646
- defaultMessage="Send codes that allow your customers to securely access their accounts."
1647
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
1648
- values={Object {}}
1649
- />,
1650
- "value": "AUTHENTICATION",
1651
- },
1652
- ]
1653
- }
1654
- onSelect={[Function]}
1655
- overlayStyle={
1656
- Object {
1657
- "overflowY": "hidden",
1676
+ "overflowY": "hidden",
1677
+ }
1658
1678
  }
1659
- }
1660
- placeholder="Category"
1661
- placement="bottomLeft"
1662
- selectedValue=""
1663
- showBadge={true}
1664
- width="105px"
1679
+ placeholder="Category"
1680
+ placement="bottomLeft"
1681
+ selectedValue=""
1682
+ showBadge={true}
1683
+ width="105px"
1684
+ />
1685
+ </CapRow>
1686
+ <Component />
1687
+ <Component />
1688
+ <div
1689
+ className="template-listing-header-actions"
1665
1690
  />
1666
- </CapRow>
1667
- <Component />
1668
- <Component />
1669
- <div
1670
- className="template-listing-header-actions"
1671
- >
1672
- <CapButton
1673
- className="create-new-whatsapp margin-l-8 margin-b-12"
1674
- disabled={false}
1675
- onClick={[Function]}
1676
- type="primary"
1691
+ </div>
1692
+ <div>
1693
+ <div
1694
+ className="action-container__create-row"
1677
1695
  >
1678
- Create new
1679
- </CapButton>
1696
+ <CapButton
1697
+ className="create-new-whatsapp margin-l-8 margin-b-12"
1698
+ disabled={false}
1699
+ onClick={[Function]}
1700
+ type="primary"
1701
+ >
1702
+ Create new
1703
+ </CapButton>
1704
+ </div>
1680
1705
  </div>
1681
1706
  </div>
1682
1707
  </div>
@@ -1989,162 +2014,167 @@ exports[`Test Templates container Test max templates warning 1`] = `
1989
2014
  <div
1990
2015
  className="action-container"
1991
2016
  >
1992
- <ComponentWithLabel(CapInputSearch)
1993
- className="search-text"
1994
- disabled={false}
1995
- onChange={[Function]}
1996
- onClear={[Function]}
1997
- onScroll={[Function]}
1998
- placeholder="Search"
1999
- style={
2000
- Object {
2001
- "width": "210px",
2002
- }
2003
- }
2004
- value=""
2005
- />
2006
- <CapRow
2007
- align="middle"
2008
- className="whatsapp-filters"
2009
- gap={8}
2010
- type="flex"
2017
+ <div
2018
+ className="action-container__toolbar-row"
2011
2019
  >
2012
- <CapSelectFilter
2013
- data={
2014
- Array [
2015
- Object {
2016
- "key": "awaitingApproval",
2017
- "label": <FormattedMessage
2018
- defaultMessage="Awaiting approval"
2019
- id="creatives.containersV2.Whatsapp.awaitingApproval"
2020
- values={Object {}}
2021
- />,
2022
- "value": "awaitingApproval",
2023
- },
2024
- Object {
2025
- "key": "approved",
2026
- "label": <FormattedMessage
2027
- defaultMessage="Approved"
2028
- id="creatives.containersV2.Whatsapp.approved"
2029
- values={Object {}}
2030
- />,
2031
- "value": "approved",
2032
- },
2033
- Object {
2034
- "key": "rejected",
2035
- "label": <FormattedMessage
2036
- defaultMessage="Rejected"
2037
- id="creatives.containersV2.Whatsapp.rejected"
2038
- values={Object {}}
2039
- />,
2040
- "value": "rejected",
2041
- },
2042
- Object {
2043
- "key": "pending",
2044
- "label": <FormattedMessage
2045
- defaultMessage="Pending"
2046
- id="creatives.containersV2.Whatsapp.pending"
2047
- values={Object {}}
2048
- />,
2049
- "value": "pending",
2050
- },
2051
- Object {
2052
- "key": "paused",
2053
- "label": <FormattedMessage
2054
- defaultMessage="Paused"
2055
- id="creatives.containersV2.Whatsapp.paused"
2056
- values={Object {}}
2057
- />,
2058
- "value": "paused",
2059
- },
2060
- ]
2061
- }
2062
- onSelect={[Function]}
2063
- placeholder="Status"
2064
- placement="bottomLeft"
2065
- selectedValue=""
2066
- showBadge={true}
2067
- width="90px"
2020
+ <ComponentWithLabel(CapInputSearch)
2021
+ className="search-text"
2022
+ disabled={false}
2023
+ onChange={[Function]}
2024
+ onClear={[Function]}
2025
+ onScroll={[Function]}
2026
+ onSearch={[Function]}
2027
+ placeholder="Search"
2028
+ value=""
2068
2029
  />
2069
- <CapSelectFilter
2070
- data={
2071
- Array [
2072
- Object {
2073
- "key": "utility",
2074
- "label": <FormattedMessage
2075
- defaultMessage="Utility"
2076
- id="creatives.containersV2.Whatsapp.utility"
2077
- values={Object {}}
2078
- />,
2079
- "tagColor": "#f2e7fe",
2080
- "tagTextColor": "#a451ff",
2081
- "tooltipLabel": <FormattedMessage
2082
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2083
- id="creatives.containersV2.Whatsapp.utilityTooltip"
2084
- values={Object {}}
2085
- />,
2086
- "value": "UTILITY",
2087
- },
2088
- Object {
2089
- "key": "marketing",
2090
- "label": <FormattedMessage
2091
- defaultMessage="Marketing"
2092
- id="creatives.containersV2.Whatsapp.marketing"
2093
- values={Object {}}
2094
- />,
2095
- "tagColor": "#ffe5d2",
2096
- "tagTextColor": "#f87d23",
2097
- "tooltipLabel": <FormattedMessage
2098
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2099
- id="creatives.containersV2.Whatsapp.marketingTooltip"
2100
- values={Object {}}
2101
- />,
2102
- "value": "MARKETING",
2103
- },
2030
+ <CapRow
2031
+ align="middle"
2032
+ className="whatsapp-filters"
2033
+ gap={8}
2034
+ type="flex"
2035
+ >
2036
+ <CapSelectFilter
2037
+ data={
2038
+ Array [
2039
+ Object {
2040
+ "key": "awaitingApproval",
2041
+ "label": <FormattedMessage
2042
+ defaultMessage="Awaiting approval"
2043
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
2044
+ values={Object {}}
2045
+ />,
2046
+ "value": "awaitingApproval",
2047
+ },
2048
+ Object {
2049
+ "key": "approved",
2050
+ "label": <FormattedMessage
2051
+ defaultMessage="Approved"
2052
+ id="creatives.containersV2.Whatsapp.approved"
2053
+ values={Object {}}
2054
+ />,
2055
+ "value": "approved",
2056
+ },
2057
+ Object {
2058
+ "key": "rejected",
2059
+ "label": <FormattedMessage
2060
+ defaultMessage="Rejected"
2061
+ id="creatives.containersV2.Whatsapp.rejected"
2062
+ values={Object {}}
2063
+ />,
2064
+ "value": "rejected",
2065
+ },
2066
+ Object {
2067
+ "key": "pending",
2068
+ "label": <FormattedMessage
2069
+ defaultMessage="Pending"
2070
+ id="creatives.containersV2.Whatsapp.pending"
2071
+ values={Object {}}
2072
+ />,
2073
+ "value": "pending",
2074
+ },
2075
+ Object {
2076
+ "key": "paused",
2077
+ "label": <FormattedMessage
2078
+ defaultMessage="Paused"
2079
+ id="creatives.containersV2.Whatsapp.paused"
2080
+ values={Object {}}
2081
+ />,
2082
+ "value": "paused",
2083
+ },
2084
+ ]
2085
+ }
2086
+ onSelect={[Function]}
2087
+ placeholder="Status"
2088
+ placement="bottomLeft"
2089
+ selectedValue=""
2090
+ showBadge={true}
2091
+ width="90px"
2092
+ />
2093
+ <CapSelectFilter
2094
+ data={
2095
+ Array [
2096
+ Object {
2097
+ "key": "utility",
2098
+ "label": <FormattedMessage
2099
+ defaultMessage="Utility"
2100
+ id="creatives.containersV2.Whatsapp.utility"
2101
+ values={Object {}}
2102
+ />,
2103
+ "tagColor": "#f2e7fe",
2104
+ "tagTextColor": "#a451ff",
2105
+ "tooltipLabel": <FormattedMessage
2106
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2107
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2108
+ values={Object {}}
2109
+ />,
2110
+ "value": "UTILITY",
2111
+ },
2112
+ Object {
2113
+ "key": "marketing",
2114
+ "label": <FormattedMessage
2115
+ defaultMessage="Marketing"
2116
+ id="creatives.containersV2.Whatsapp.marketing"
2117
+ values={Object {}}
2118
+ />,
2119
+ "tagColor": "#ffe5d2",
2120
+ "tagTextColor": "#f87d23",
2121
+ "tooltipLabel": <FormattedMessage
2122
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2123
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2124
+ values={Object {}}
2125
+ />,
2126
+ "value": "MARKETING",
2127
+ },
2128
+ Object {
2129
+ "key": "authentication",
2130
+ "label": <FormattedMessage
2131
+ defaultMessage="Authentication"
2132
+ id="creatives.containersV2.Whatsapp.authentication"
2133
+ values={Object {}}
2134
+ />,
2135
+ "tagColor": "#ecf7ec",
2136
+ "tagTextColor": "#6bb56b",
2137
+ "tooltipLabel": <FormattedMessage
2138
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2139
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2140
+ values={Object {}}
2141
+ />,
2142
+ "value": "AUTHENTICATION",
2143
+ },
2144
+ ]
2145
+ }
2146
+ onSelect={[Function]}
2147
+ overlayStyle={
2104
2148
  Object {
2105
- "key": "authentication",
2106
- "label": <FormattedMessage
2107
- defaultMessage="Authentication"
2108
- id="creatives.containersV2.Whatsapp.authentication"
2109
- values={Object {}}
2110
- />,
2111
- "tagColor": "#ecf7ec",
2112
- "tagTextColor": "#6bb56b",
2113
- "tooltipLabel": <FormattedMessage
2114
- defaultMessage="Send codes that allow your customers to securely access their accounts."
2115
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
2116
- values={Object {}}
2117
- />,
2118
- "value": "AUTHENTICATION",
2119
- },
2120
- ]
2121
- }
2122
- onSelect={[Function]}
2123
- overlayStyle={
2124
- Object {
2125
- "overflowY": "hidden",
2149
+ "overflowY": "hidden",
2150
+ }
2126
2151
  }
2127
- }
2128
- placeholder="Category"
2129
- placement="bottomLeft"
2130
- selectedValue=""
2131
- showBadge={true}
2132
- width="105px"
2152
+ placeholder="Category"
2153
+ placement="bottomLeft"
2154
+ selectedValue=""
2155
+ showBadge={true}
2156
+ width="105px"
2157
+ />
2158
+ </CapRow>
2159
+ <Component />
2160
+ <Component />
2161
+ <div
2162
+ className="template-listing-header-actions"
2133
2163
  />
2134
- </CapRow>
2135
- <Component />
2136
- <Component />
2137
- <div
2138
- className="template-listing-header-actions"
2139
- >
2140
- <CapButton
2141
- className="create-new-whatsapp margin-l-8 margin-b-12"
2142
- disabled={false}
2143
- onClick={[Function]}
2144
- type="primary"
2164
+ </div>
2165
+ <div>
2166
+ <div
2167
+ className="action-container__create-row"
2145
2168
  >
2146
- Create new
2147
- </CapButton>
2169
+ <CapButton
2170
+ className="create-new-whatsapp margin-l-8 margin-b-12"
2171
+ disabled={false}
2172
+ onClick={[Function]}
2173
+ type="primary"
2174
+ >
2175
+ Create new
2176
+ </CapButton>
2177
+ </div>
2148
2178
  </div>
2149
2179
  </div>
2150
2180
  </div>
@@ -2457,109 +2487,114 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
2457
2487
  <div
2458
2488
  className="action-container"
2459
2489
  >
2460
- <ComponentWithLabel(CapInputSearch)
2461
- className="search-text"
2462
- disabled={false}
2463
- onChange={[Function]}
2464
- onClear={[Function]}
2465
- onScroll={[Function]}
2466
- placeholder="Search"
2467
- style={
2468
- Object {
2469
- "width": "210px",
2470
- }
2471
- }
2472
- value=""
2473
- />
2474
- <CapRow
2475
- align="middle"
2476
- className="whatsapp-filters"
2477
- gap={8}
2478
- type="flex"
2490
+ <div
2491
+ className="action-container__toolbar-row"
2479
2492
  >
2480
- <CapSelectFilter
2481
- data={
2482
- Array [
2483
- Object {
2484
- "key": "utility",
2485
- "label": <FormattedMessage
2486
- defaultMessage="Utility"
2487
- id="creatives.containersV2.Whatsapp.utility"
2488
- values={Object {}}
2489
- />,
2490
- "tagColor": "#f2e7fe",
2491
- "tagTextColor": "#a451ff",
2492
- "tooltipLabel": <FormattedMessage
2493
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2494
- id="creatives.containersV2.Whatsapp.utilityTooltip"
2495
- values={Object {}}
2496
- />,
2497
- "value": "UTILITY",
2498
- },
2499
- Object {
2500
- "key": "marketing",
2501
- "label": <FormattedMessage
2502
- defaultMessage="Marketing"
2503
- id="creatives.containersV2.Whatsapp.marketing"
2504
- values={Object {}}
2505
- />,
2506
- "tagColor": "#ffe5d2",
2507
- "tagTextColor": "#f87d23",
2508
- "tooltipLabel": <FormattedMessage
2509
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2510
- id="creatives.containersV2.Whatsapp.marketingTooltip"
2511
- values={Object {}}
2512
- />,
2513
- "value": "MARKETING",
2514
- },
2493
+ <ComponentWithLabel(CapInputSearch)
2494
+ className="search-text"
2495
+ disabled={false}
2496
+ onChange={[Function]}
2497
+ onClear={[Function]}
2498
+ onScroll={[Function]}
2499
+ onSearch={[Function]}
2500
+ placeholder="Search"
2501
+ value=""
2502
+ />
2503
+ <CapRow
2504
+ align="middle"
2505
+ className="whatsapp-filters"
2506
+ gap={8}
2507
+ type="flex"
2508
+ >
2509
+ <CapSelectFilter
2510
+ data={
2511
+ Array [
2512
+ Object {
2513
+ "key": "utility",
2514
+ "label": <FormattedMessage
2515
+ defaultMessage="Utility"
2516
+ id="creatives.containersV2.Whatsapp.utility"
2517
+ values={Object {}}
2518
+ />,
2519
+ "tagColor": "#f2e7fe",
2520
+ "tagTextColor": "#a451ff",
2521
+ "tooltipLabel": <FormattedMessage
2522
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2523
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2524
+ values={Object {}}
2525
+ />,
2526
+ "value": "UTILITY",
2527
+ },
2528
+ Object {
2529
+ "key": "marketing",
2530
+ "label": <FormattedMessage
2531
+ defaultMessage="Marketing"
2532
+ id="creatives.containersV2.Whatsapp.marketing"
2533
+ values={Object {}}
2534
+ />,
2535
+ "tagColor": "#ffe5d2",
2536
+ "tagTextColor": "#f87d23",
2537
+ "tooltipLabel": <FormattedMessage
2538
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2539
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2540
+ values={Object {}}
2541
+ />,
2542
+ "value": "MARKETING",
2543
+ },
2544
+ Object {
2545
+ "key": "authentication",
2546
+ "label": <FormattedMessage
2547
+ defaultMessage="Authentication"
2548
+ id="creatives.containersV2.Whatsapp.authentication"
2549
+ values={Object {}}
2550
+ />,
2551
+ "tagColor": "#ecf7ec",
2552
+ "tagTextColor": "#6bb56b",
2553
+ "tooltipLabel": <FormattedMessage
2554
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2555
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2556
+ values={Object {}}
2557
+ />,
2558
+ "value": "AUTHENTICATION",
2559
+ },
2560
+ ]
2561
+ }
2562
+ onSelect={[Function]}
2563
+ overlayStyle={
2515
2564
  Object {
2516
- "key": "authentication",
2517
- "label": <FormattedMessage
2518
- defaultMessage="Authentication"
2519
- id="creatives.containersV2.Whatsapp.authentication"
2520
- values={Object {}}
2521
- />,
2522
- "tagColor": "#ecf7ec",
2523
- "tagTextColor": "#6bb56b",
2524
- "tooltipLabel": <FormattedMessage
2525
- defaultMessage="Send codes that allow your customers to securely access their accounts."
2526
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
2527
- values={Object {}}
2528
- />,
2529
- "value": "AUTHENTICATION",
2530
- },
2531
- ]
2532
- }
2533
- onSelect={[Function]}
2534
- overlayStyle={
2535
- Object {
2536
- "overflowY": "hidden",
2565
+ "overflowY": "hidden",
2566
+ }
2537
2567
  }
2538
- }
2539
- placeholder="Category"
2540
- placement="bottomLeft"
2541
- selectedValue="ALERT_UPDATE"
2542
- showBadge={true}
2543
- width="105px"
2544
- />
2545
- </CapRow>
2546
- <Component />
2547
- <Component />
2548
- <div
2549
- className="template-listing-header-actions"
2550
- >
2551
- <CapLink
2552
- className="create-new-link"
2553
- onClick={[Function]}
2554
- suffix={
2555
- <CapIcon
2556
- size="s"
2557
- type="open-in-new"
2558
- />
2559
- }
2560
- title="Create new template"
2568
+ placeholder="Category"
2569
+ placement="bottomLeft"
2570
+ selectedValue="ALERT_UPDATE"
2571
+ showBadge={true}
2572
+ width="105px"
2573
+ />
2574
+ </CapRow>
2575
+ <Component />
2576
+ <Component />
2577
+ <div
2578
+ className="template-listing-header-actions"
2561
2579
  />
2562
2580
  </div>
2581
+ <div>
2582
+ <div
2583
+ className="action-container__create-row"
2584
+ >
2585
+ <CapLink
2586
+ className="create-new-link"
2587
+ onClick={[Function]}
2588
+ suffix={
2589
+ <CapIcon
2590
+ size="s"
2591
+ type="open-in-new"
2592
+ />
2593
+ }
2594
+ title="Create new template"
2595
+ />
2596
+ </div>
2597
+ </div>
2563
2598
  </div>
2564
2599
  </div>
2565
2600
  </CapRow>
@@ -2727,109 +2762,114 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
2727
2762
  <div
2728
2763
  className="action-container"
2729
2764
  >
2730
- <ComponentWithLabel(CapInputSearch)
2731
- className="search-text"
2732
- disabled={false}
2733
- onChange={[Function]}
2734
- onClear={[Function]}
2735
- onScroll={[Function]}
2736
- placeholder="Search"
2737
- style={
2738
- Object {
2739
- "width": "210px",
2740
- }
2741
- }
2742
- value=""
2743
- />
2744
- <CapRow
2745
- align="middle"
2746
- className="whatsapp-filters"
2747
- gap={8}
2748
- type="flex"
2765
+ <div
2766
+ className="action-container__toolbar-row"
2749
2767
  >
2750
- <CapSelectFilter
2751
- data={
2752
- Array [
2753
- Object {
2754
- "key": "utility",
2755
- "label": <FormattedMessage
2756
- defaultMessage="Utility"
2757
- id="creatives.containersV2.Whatsapp.utility"
2758
- values={Object {}}
2759
- />,
2760
- "tagColor": "#f2e7fe",
2761
- "tagTextColor": "#a451ff",
2762
- "tooltipLabel": <FormattedMessage
2763
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2764
- id="creatives.containersV2.Whatsapp.utilityTooltip"
2765
- values={Object {}}
2766
- />,
2767
- "value": "UTILITY",
2768
- },
2769
- Object {
2770
- "key": "marketing",
2771
- "label": <FormattedMessage
2772
- defaultMessage="Marketing"
2773
- id="creatives.containersV2.Whatsapp.marketing"
2774
- values={Object {}}
2775
- />,
2776
- "tagColor": "#ffe5d2",
2777
- "tagTextColor": "#f87d23",
2778
- "tooltipLabel": <FormattedMessage
2779
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2780
- id="creatives.containersV2.Whatsapp.marketingTooltip"
2781
- values={Object {}}
2782
- />,
2783
- "value": "MARKETING",
2784
- },
2768
+ <ComponentWithLabel(CapInputSearch)
2769
+ className="search-text"
2770
+ disabled={false}
2771
+ onChange={[Function]}
2772
+ onClear={[Function]}
2773
+ onScroll={[Function]}
2774
+ onSearch={[Function]}
2775
+ placeholder="Search"
2776
+ value=""
2777
+ />
2778
+ <CapRow
2779
+ align="middle"
2780
+ className="whatsapp-filters"
2781
+ gap={8}
2782
+ type="flex"
2783
+ >
2784
+ <CapSelectFilter
2785
+ data={
2786
+ Array [
2787
+ Object {
2788
+ "key": "utility",
2789
+ "label": <FormattedMessage
2790
+ defaultMessage="Utility"
2791
+ id="creatives.containersV2.Whatsapp.utility"
2792
+ values={Object {}}
2793
+ />,
2794
+ "tagColor": "#f2e7fe",
2795
+ "tagTextColor": "#a451ff",
2796
+ "tooltipLabel": <FormattedMessage
2797
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2798
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2799
+ values={Object {}}
2800
+ />,
2801
+ "value": "UTILITY",
2802
+ },
2803
+ Object {
2804
+ "key": "marketing",
2805
+ "label": <FormattedMessage
2806
+ defaultMessage="Marketing"
2807
+ id="creatives.containersV2.Whatsapp.marketing"
2808
+ values={Object {}}
2809
+ />,
2810
+ "tagColor": "#ffe5d2",
2811
+ "tagTextColor": "#f87d23",
2812
+ "tooltipLabel": <FormattedMessage
2813
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2814
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2815
+ values={Object {}}
2816
+ />,
2817
+ "value": "MARKETING",
2818
+ },
2819
+ Object {
2820
+ "key": "authentication",
2821
+ "label": <FormattedMessage
2822
+ defaultMessage="Authentication"
2823
+ id="creatives.containersV2.Whatsapp.authentication"
2824
+ values={Object {}}
2825
+ />,
2826
+ "tagColor": "#ecf7ec",
2827
+ "tagTextColor": "#6bb56b",
2828
+ "tooltipLabel": <FormattedMessage
2829
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2830
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2831
+ values={Object {}}
2832
+ />,
2833
+ "value": "AUTHENTICATION",
2834
+ },
2835
+ ]
2836
+ }
2837
+ onSelect={[Function]}
2838
+ overlayStyle={
2785
2839
  Object {
2786
- "key": "authentication",
2787
- "label": <FormattedMessage
2788
- defaultMessage="Authentication"
2789
- id="creatives.containersV2.Whatsapp.authentication"
2790
- values={Object {}}
2791
- />,
2792
- "tagColor": "#ecf7ec",
2793
- "tagTextColor": "#6bb56b",
2794
- "tooltipLabel": <FormattedMessage
2795
- defaultMessage="Send codes that allow your customers to securely access their accounts."
2796
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
2797
- values={Object {}}
2798
- />,
2799
- "value": "AUTHENTICATION",
2800
- },
2801
- ]
2802
- }
2803
- onSelect={[Function]}
2804
- overlayStyle={
2805
- Object {
2806
- "overflowY": "hidden",
2840
+ "overflowY": "hidden",
2841
+ }
2807
2842
  }
2808
- }
2809
- placeholder="Category"
2810
- placement="bottomLeft"
2811
- selectedValue={null}
2812
- showBadge={true}
2813
- width="105px"
2814
- />
2815
- </CapRow>
2816
- <Component />
2817
- <Component />
2818
- <div
2819
- className="template-listing-header-actions"
2820
- >
2821
- <CapLink
2822
- className="create-new-link"
2823
- onClick={[Function]}
2824
- suffix={
2825
- <CapIcon
2826
- size="s"
2827
- type="open-in-new"
2828
- />
2829
- }
2830
- title="Create new template"
2843
+ placeholder="Category"
2844
+ placement="bottomLeft"
2845
+ selectedValue={null}
2846
+ showBadge={true}
2847
+ width="105px"
2848
+ />
2849
+ </CapRow>
2850
+ <Component />
2851
+ <Component />
2852
+ <div
2853
+ className="template-listing-header-actions"
2831
2854
  />
2832
2855
  </div>
2856
+ <div>
2857
+ <div
2858
+ className="action-container__create-row"
2859
+ >
2860
+ <CapLink
2861
+ className="create-new-link"
2862
+ onClick={[Function]}
2863
+ suffix={
2864
+ <CapIcon
2865
+ size="s"
2866
+ type="open-in-new"
2867
+ />
2868
+ }
2869
+ title="Create new template"
2870
+ />
2871
+ </div>
2872
+ </div>
2833
2873
  </div>
2834
2874
  </div>
2835
2875
  </CapRow>
@@ -2972,109 +3012,114 @@ exports[`Test Templates container Test removing single filter 1`] = `
2972
3012
  <div
2973
3013
  className="action-container"
2974
3014
  >
2975
- <ComponentWithLabel(CapInputSearch)
2976
- className="search-text"
2977
- disabled={false}
2978
- onChange={[Function]}
2979
- onClear={[Function]}
2980
- onScroll={[Function]}
2981
- placeholder="Search"
2982
- style={
2983
- Object {
2984
- "width": "210px",
2985
- }
2986
- }
2987
- value=""
2988
- />
2989
- <CapRow
2990
- align="middle"
2991
- className="whatsapp-filters"
2992
- gap={8}
2993
- type="flex"
3015
+ <div
3016
+ className="action-container__toolbar-row"
2994
3017
  >
2995
- <CapSelectFilter
2996
- data={
2997
- Array [
2998
- Object {
2999
- "key": "utility",
3000
- "label": <FormattedMessage
3001
- defaultMessage="Utility"
3002
- id="creatives.containersV2.Whatsapp.utility"
3003
- values={Object {}}
3004
- />,
3005
- "tagColor": "#f2e7fe",
3006
- "tagTextColor": "#a451ff",
3007
- "tooltipLabel": <FormattedMessage
3008
- defaultMessage="Send account updates, order updates, alerts, and more to share important information."
3009
- id="creatives.containersV2.Whatsapp.utilityTooltip"
3010
- values={Object {}}
3011
- />,
3012
- "value": "UTILITY",
3013
- },
3014
- Object {
3015
- "key": "marketing",
3016
- "label": <FormattedMessage
3017
- defaultMessage="Marketing"
3018
- id="creatives.containersV2.Whatsapp.marketing"
3019
- values={Object {}}
3020
- />,
3021
- "tagColor": "#ffe5d2",
3022
- "tagTextColor": "#f87d23",
3023
- "tooltipLabel": <FormattedMessage
3024
- defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
3025
- id="creatives.containersV2.Whatsapp.marketingTooltip"
3026
- values={Object {}}
3027
- />,
3028
- "value": "MARKETING",
3029
- },
3018
+ <ComponentWithLabel(CapInputSearch)
3019
+ className="search-text"
3020
+ disabled={false}
3021
+ onChange={[Function]}
3022
+ onClear={[Function]}
3023
+ onScroll={[Function]}
3024
+ onSearch={[Function]}
3025
+ placeholder="Search"
3026
+ value=""
3027
+ />
3028
+ <CapRow
3029
+ align="middle"
3030
+ className="whatsapp-filters"
3031
+ gap={8}
3032
+ type="flex"
3033
+ >
3034
+ <CapSelectFilter
3035
+ data={
3036
+ Array [
3037
+ Object {
3038
+ "key": "utility",
3039
+ "label": <FormattedMessage
3040
+ defaultMessage="Utility"
3041
+ id="creatives.containersV2.Whatsapp.utility"
3042
+ values={Object {}}
3043
+ />,
3044
+ "tagColor": "#f2e7fe",
3045
+ "tagTextColor": "#a451ff",
3046
+ "tooltipLabel": <FormattedMessage
3047
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
3048
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
3049
+ values={Object {}}
3050
+ />,
3051
+ "value": "UTILITY",
3052
+ },
3053
+ Object {
3054
+ "key": "marketing",
3055
+ "label": <FormattedMessage
3056
+ defaultMessage="Marketing"
3057
+ id="creatives.containersV2.Whatsapp.marketing"
3058
+ values={Object {}}
3059
+ />,
3060
+ "tagColor": "#ffe5d2",
3061
+ "tagTextColor": "#f87d23",
3062
+ "tooltipLabel": <FormattedMessage
3063
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
3064
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
3065
+ values={Object {}}
3066
+ />,
3067
+ "value": "MARKETING",
3068
+ },
3069
+ Object {
3070
+ "key": "authentication",
3071
+ "label": <FormattedMessage
3072
+ defaultMessage="Authentication"
3073
+ id="creatives.containersV2.Whatsapp.authentication"
3074
+ values={Object {}}
3075
+ />,
3076
+ "tagColor": "#ecf7ec",
3077
+ "tagTextColor": "#6bb56b",
3078
+ "tooltipLabel": <FormattedMessage
3079
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
3080
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
3081
+ values={Object {}}
3082
+ />,
3083
+ "value": "AUTHENTICATION",
3084
+ },
3085
+ ]
3086
+ }
3087
+ onSelect={[Function]}
3088
+ overlayStyle={
3030
3089
  Object {
3031
- "key": "authentication",
3032
- "label": <FormattedMessage
3033
- defaultMessage="Authentication"
3034
- id="creatives.containersV2.Whatsapp.authentication"
3035
- values={Object {}}
3036
- />,
3037
- "tagColor": "#ecf7ec",
3038
- "tagTextColor": "#6bb56b",
3039
- "tooltipLabel": <FormattedMessage
3040
- defaultMessage="Send codes that allow your customers to securely access their accounts."
3041
- id="creatives.containersV2.Whatsapp.authenticationTooltip"
3042
- values={Object {}}
3043
- />,
3044
- "value": "AUTHENTICATION",
3045
- },
3046
- ]
3047
- }
3048
- onSelect={[Function]}
3049
- overlayStyle={
3050
- Object {
3051
- "overflowY": "hidden",
3090
+ "overflowY": "hidden",
3091
+ }
3052
3092
  }
3053
- }
3054
- placeholder="Category"
3055
- placement="bottomLeft"
3056
- selectedValue=""
3057
- showBadge={true}
3058
- width="105px"
3059
- />
3060
- </CapRow>
3061
- <Component />
3062
- <Component />
3063
- <div
3064
- className="template-listing-header-actions"
3065
- >
3066
- <CapLink
3067
- className="create-new-link"
3068
- onClick={[Function]}
3069
- suffix={
3070
- <CapIcon
3071
- size="s"
3072
- type="open-in-new"
3073
- />
3074
- }
3075
- title="Create new template"
3093
+ placeholder="Category"
3094
+ placement="bottomLeft"
3095
+ selectedValue=""
3096
+ showBadge={true}
3097
+ width="105px"
3098
+ />
3099
+ </CapRow>
3100
+ <Component />
3101
+ <Component />
3102
+ <div
3103
+ className="template-listing-header-actions"
3076
3104
  />
3077
3105
  </div>
3106
+ <div>
3107
+ <div
3108
+ className="action-container__create-row"
3109
+ >
3110
+ <CapLink
3111
+ className="create-new-link"
3112
+ onClick={[Function]}
3113
+ suffix={
3114
+ <CapIcon
3115
+ size="s"
3116
+ type="open-in-new"
3117
+ />
3118
+ }
3119
+ title="Create new template"
3120
+ />
3121
+ </div>
3122
+ </div>
3078
3123
  </div>
3079
3124
  </div>
3080
3125
  </CapRow>