@capillarytech/creatives-library 8.0.318 → 8.0.320

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 (139) hide show
  1. package/constants/unified.js +15 -0
  2. package/package.json +1 -1
  3. package/services/api.js +6 -0
  4. package/services/tests/api.test.js +7 -0
  5. package/utils/common.js +6 -1
  6. package/utils/templateVarUtils.js +172 -0
  7. package/utils/tests/templateVarUtils.test.js +160 -0
  8. package/v2Components/CapTagList/index.js +10 -0
  9. package/v2Components/CommonTestAndPreview/CustomValuesEditor.js +70 -49
  10. package/v2Components/CommonTestAndPreview/DeliverySettings/DeliverySettings.scss +8 -2
  11. package/v2Components/CommonTestAndPreview/DeliverySettings/ModifyDeliverySettings.js +207 -21
  12. package/v2Components/CommonTestAndPreview/DeliverySettings/constants.js +16 -0
  13. package/v2Components/CommonTestAndPreview/DeliverySettings/index.js +85 -10
  14. package/v2Components/CommonTestAndPreview/DeliverySettings/messages.js +30 -0
  15. package/v2Components/CommonTestAndPreview/DeliverySettings/utils/parseSenderDetailsResponse.js +79 -11
  16. package/v2Components/CommonTestAndPreview/SendTestMessage.js +11 -5
  17. package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +20 -1
  18. package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js +133 -4
  19. package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss +12 -0
  20. package/v2Components/CommonTestAndPreview/constants.js +38 -0
  21. package/v2Components/CommonTestAndPreview/index.js +693 -155
  22. package/v2Components/CommonTestAndPreview/messages.js +41 -3
  23. package/v2Components/CommonTestAndPreview/previewApiUtils.js +59 -0
  24. package/v2Components/CommonTestAndPreview/sagas.js +15 -6
  25. package/v2Components/CommonTestAndPreview/tests/CustomValuesEditor.test.js +352 -0
  26. package/v2Components/CommonTestAndPreview/tests/DeliverySettings/ModifyDeliverySettings.test.js +269 -1
  27. package/v2Components/CommonTestAndPreview/tests/DeliverySettings/index.test.js +118 -5
  28. package/v2Components/CommonTestAndPreview/tests/DeliverySettings/utils/parseSenderDetailsResponse.test.js +341 -0
  29. package/v2Components/CommonTestAndPreview/tests/SendTestMessage.test.js +25 -4
  30. package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/index.test.js +199 -1
  31. package/v2Components/CommonTestAndPreview/tests/index.test.js +132 -4
  32. package/v2Components/CommonTestAndPreview/tests/previewApiUtils.test.js +67 -0
  33. package/v2Components/CommonTestAndPreview/tests/sagas.test.js +2 -2
  34. package/v2Components/FormBuilder/index.js +7 -1
  35. package/v2Components/SmsFallback/SmsFallbackLocalSelector.js +87 -0
  36. package/v2Components/SmsFallback/constants.js +73 -0
  37. package/v2Components/SmsFallback/index.js +956 -0
  38. package/v2Components/SmsFallback/index.scss +265 -0
  39. package/v2Components/SmsFallback/messages.js +78 -0
  40. package/v2Components/SmsFallback/smsFallbackUtils.js +107 -0
  41. package/v2Components/SmsFallback/tests/SmsFallbackLocalSelector.test.js +50 -0
  42. package/v2Components/SmsFallback/tests/rcsSmsFallback.acceptance.test.js +147 -0
  43. package/v2Components/SmsFallback/tests/smsFallbackHandlers.test.js +304 -0
  44. package/v2Components/SmsFallback/tests/smsFallbackUi.test.js +197 -0
  45. package/v2Components/SmsFallback/tests/smsFallbackUtils.test.js +261 -0
  46. package/v2Components/SmsFallback/tests/useLocalTemplateList.test.js +422 -0
  47. package/v2Components/SmsFallback/useLocalTemplateList.js +92 -0
  48. package/v2Components/TestAndPreviewSlidebox/index.js +8 -1
  49. package/v2Components/TestAndPreviewSlidebox/sagas.js +11 -4
  50. package/v2Components/TestAndPreviewSlidebox/tests/saga.test.js +3 -1
  51. package/v2Components/VarSegmentMessageEditor/constants.js +2 -0
  52. package/v2Components/VarSegmentMessageEditor/index.js +125 -0
  53. package/v2Components/VarSegmentMessageEditor/index.scss +46 -0
  54. package/v2Containers/CommunicationFlow/CommunicationFlow.js +291 -0
  55. package/v2Containers/CommunicationFlow/CommunicationFlow.scss +25 -0
  56. package/v2Containers/CommunicationFlow/Tests/CommunicationFlow.test.js +255 -0
  57. package/v2Containers/CommunicationFlow/constants.js +200 -0
  58. package/v2Containers/CommunicationFlow/index.js +102 -0
  59. package/v2Containers/CommunicationFlow/messages.js +346 -0
  60. package/v2Containers/CommunicationFlow/steps/ChannelSelectionStep/ChannelSelectionStep.js +522 -0
  61. package/v2Containers/CommunicationFlow/steps/ChannelSelectionStep/ChannelSelectionStep.scss +170 -0
  62. package/v2Containers/CommunicationFlow/steps/ChannelSelectionStep/Tests/ChannelSelectionStep.test.js +796 -0
  63. package/v2Containers/CommunicationFlow/steps/ChannelSelectionStep/index.js +5 -0
  64. package/v2Containers/CommunicationFlow/steps/CommunicationStrategyStep/CommunicationStrategyStep.js +95 -0
  65. package/v2Containers/CommunicationFlow/steps/CommunicationStrategyStep/Tests/CommunicationStrategyStep.test.js +133 -0
  66. package/v2Containers/CommunicationFlow/steps/CommunicationStrategyStep/index.js +5 -0
  67. package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/DeliverySettingsSection.js +289 -0
  68. package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/DeliverySettingsSection.scss +70 -0
  69. package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/SenderDetails.js +319 -0
  70. package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/SenderDetails.scss +69 -0
  71. package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/Tests/DeliverySettingsSection.test.js +616 -0
  72. package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/Tests/SenderDetails.test.js +577 -0
  73. package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/Tests/deliverySettingsConfig.test.js +1111 -0
  74. package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/deliverySettingsConfig.js +696 -0
  75. package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/index.js +7 -0
  76. package/v2Containers/CommunicationFlow/steps/DynamicControlsStep/DynamicControlsStep.js +102 -0
  77. package/v2Containers/CommunicationFlow/steps/DynamicControlsStep/DynamicControlsStep.scss +36 -0
  78. package/v2Containers/CommunicationFlow/steps/DynamicControlsStep/Tests/DynamicControlsStep.test.js +91 -0
  79. package/v2Containers/CommunicationFlow/steps/DynamicControlsStep/index.js +5 -0
  80. package/v2Containers/CommunicationFlow/steps/MessageTypeStep/MessageTypeStep.js +86 -0
  81. package/v2Containers/CommunicationFlow/steps/MessageTypeStep/Tests/MessageTypeStep.test.js +100 -0
  82. package/v2Containers/CommunicationFlow/steps/MessageTypeStep/index.js +5 -0
  83. package/v2Containers/CommunicationFlow/utils/getEnabledSteps.js +30 -0
  84. package/v2Containers/CreativesContainer/CreativesSlideBoxWrapper.js +43 -0
  85. package/v2Containers/CreativesContainer/SlideBoxContent.js +36 -4
  86. package/v2Containers/CreativesContainer/SlideBoxFooter.js +10 -1
  87. package/v2Containers/CreativesContainer/SlideBoxHeader.js +29 -4
  88. package/v2Containers/CreativesContainer/constants.js +12 -0
  89. package/v2Containers/CreativesContainer/embeddedSlideboxUtils.js +67 -0
  90. package/v2Containers/CreativesContainer/index.js +289 -99
  91. package/v2Containers/CreativesContainer/index.scss +51 -1
  92. package/v2Containers/CreativesContainer/tests/SlideBoxContent.localTemplates.test.js +90 -0
  93. package/v2Containers/CreativesContainer/tests/SlideBoxFooter.test.js +104 -0
  94. package/v2Containers/CreativesContainer/tests/SlideBoxHeader.test.js +110 -0
  95. package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap +8 -0
  96. package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxHeader.test.js.snap +363 -0
  97. package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap +20 -10
  98. package/v2Containers/CreativesContainer/tests/embeddedSlideboxUtils.test.js +258 -0
  99. package/v2Containers/CreativesContainer/tests/index.test.js +71 -9
  100. package/v2Containers/CreativesContainer/tests/useLocalTemplatesProp.test.js +125 -0
  101. package/v2Containers/Rcs/constants.js +32 -1
  102. package/v2Containers/Rcs/index.js +950 -873
  103. package/v2Containers/Rcs/index.scss +85 -6
  104. package/v2Containers/Rcs/messages.js +10 -1
  105. package/v2Containers/Rcs/rcsLibraryHydrationUtils.js +205 -0
  106. package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap +40834 -1963
  107. package/v2Containers/Rcs/tests/__snapshots__/utils.test.js.snap +0 -5
  108. package/v2Containers/Rcs/tests/index.test.js +41 -38
  109. package/v2Containers/Rcs/tests/mockData.js +38 -0
  110. package/v2Containers/Rcs/tests/rcsLibraryHydrationUtils.test.js +251 -0
  111. package/v2Containers/Rcs/tests/utils.test.js +379 -1
  112. package/v2Containers/Rcs/utils.js +358 -10
  113. package/v2Containers/Sms/Create/index.js +81 -36
  114. package/v2Containers/Sms/smsFormDataHelpers.js +67 -0
  115. package/v2Containers/Sms/tests/smsFormDataHelpers.test.js +253 -0
  116. package/v2Containers/SmsTrai/Create/index.js +9 -4
  117. package/v2Containers/SmsTrai/Edit/constants.js +2 -0
  118. package/v2Containers/SmsTrai/Edit/index.js +609 -128
  119. package/v2Containers/SmsTrai/Edit/index.scss +121 -0
  120. package/v2Containers/SmsTrai/Edit/messages.js +9 -4
  121. package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap +4327 -2374
  122. package/v2Containers/SmsWrapper/index.js +37 -8
  123. package/v2Containers/TagList/index.js +6 -0
  124. package/v2Containers/Templates/TemplatesActionBar.js +101 -0
  125. package/v2Containers/Templates/_templates.scss +61 -2
  126. package/v2Containers/Templates/actions.js +11 -0
  127. package/v2Containers/Templates/constants.js +2 -0
  128. package/v2Containers/Templates/index.js +90 -40
  129. package/v2Containers/Templates/sagas.js +57 -12
  130. package/v2Containers/Templates/tests/TemplatesActionBar.test.js +120 -0
  131. package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +1043 -1079
  132. package/v2Containers/Templates/tests/sagas.test.js +193 -12
  133. package/v2Containers/Templates/tests/smsTemplatesListApi.test.js +180 -0
  134. package/v2Containers/Templates/utils/smsTemplatesListApi.js +79 -0
  135. package/v2Containers/TemplatesV2/TemplatesV2.style.js +72 -1
  136. package/v2Containers/TemplatesV2/index.js +86 -23
  137. package/v2Containers/TemplatesV2/tests/TemplatesV2.localTemplates.test.js +131 -0
  138. package/v2Containers/Whatsapp/index.js +3 -20
  139. package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +578 -34
package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap CHANGED
@@ -212,41 +212,37 @@ exports[`Test Templates container Should render sms illustration when no templat
212
212
  <div
213
213
  className="action-container"
214
214
  >
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
215
  <div
233
- style={
234
- Object {
235
- "alignItems": "center",
236
- "display": "flex",
237
- "justifyContent": "space-between",
238
- }
239
- }
216
+ className="action-container__toolbar-row"
240
217
  >
241
- <CapButton
242
- className="create-new-sms margin-l-8 margin-b-12"
218
+ <_Class
219
+ className="search-text"
243
220
  disabled={false}
244
- isAddBtn={false}
245
- onClick={[Function]}
246
- type="primary"
221
+ labelPosition="top"
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
+ <div>
233
+ <div
234
+ className="action-container__create-row"
247
235
  >
248
- Create new
249
- </CapButton>
236
+ <CapButton
237
+ className="create-new-sms margin-l-8 margin-b-12"
238
+ disabled={false}
239
+ isAddBtn={false}
240
+ onClick={[Function]}
241
+ type="primary"
242
+ >
243
+ Create new
244
+ </CapButton>
245
+ </div>
250
246
  </div>
251
247
  </div>
252
248
  <div>
@@ -406,115 +402,111 @@ exports[`Test Templates container Should render temlates when whatsapp templates
406
402
  <div
407
403
  className="action-container"
408
404
  >
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
405
  <div
425
- className="whatsapp-filters"
406
+ className="action-container__toolbar-row"
426
407
  >
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
- },
408
+ <_Class
409
+ className="search-text"
410
+ disabled={false}
411
+ labelPosition="top"
412
+ onChange={[Function]}
413
+ onClear={[Function]}
414
+ onScroll={[Function]}
415
+ onSearch={[Function]}
416
+ placeholder="Search"
417
+ value=""
418
+ />
419
+ <div
420
+ className="whatsapp-filters"
421
+ >
422
+ <CapSelectFilter
423
+ data={
424
+ Array [
425
+ Object {
426
+ "key": "utility",
427
+ "label": <FormattedMessage
428
+ defaultMessage="Utility"
429
+ id="creatives.containersV2.Whatsapp.utility"
430
+ values={Object {}}
431
+ />,
432
+ "tagColor": "#f2e7fe",
433
+ "tagTextColor": "#a451ff",
434
+ "tooltipLabel": <FormattedMessage
435
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
436
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
437
+ values={Object {}}
438
+ />,
439
+ "value": "UTILITY",
440
+ },
441
+ Object {
442
+ "key": "marketing",
443
+ "label": <FormattedMessage
444
+ defaultMessage="Marketing"
445
+ id="creatives.containersV2.Whatsapp.marketing"
446
+ values={Object {}}
447
+ />,
448
+ "tagColor": "#ffe5d2",
449
+ "tagTextColor": "#f87d23",
450
+ "tooltipLabel": <FormattedMessage
451
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
452
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
453
+ values={Object {}}
454
+ />,
455
+ "value": "MARKETING",
456
+ },
457
+ Object {
458
+ "key": "authentication",
459
+ "label": <FormattedMessage
460
+ defaultMessage="Authentication"
461
+ id="creatives.containersV2.Whatsapp.authentication"
462
+ values={Object {}}
463
+ />,
464
+ "tagColor": "#ecf7ec",
465
+ "tagTextColor": "#6bb56b",
466
+ "tooltipLabel": <FormattedMessage
467
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
468
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
469
+ values={Object {}}
470
+ />,
471
+ "value": "AUTHENTICATION",
472
+ },
473
+ ]
474
+ }
475
+ dropdownMaxHeight="320px"
476
+ dropdownWidth="228px"
477
+ onSelect={[Function]}
478
+ overlayStyle={
462
479
  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",
480
+ "overflowY": "hidden",
481
+ }
486
482
  }
487
- }
488
- placeholder="Category"
489
- placement="bottomLeft"
490
- selectedValue=""
491
- showBadge={true}
492
- width="105px"
493
- />
483
+ placeholder="Category"
484
+ placement="bottomLeft"
485
+ selectedValue=""
486
+ showBadge={true}
487
+ width="105px"
488
+ />
489
+ </div>
490
+ <Component />
491
+ <Component />
494
492
  </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"
514
- />
515
- }
516
- title="Create new template"
517
- />
493
+ <div>
494
+ <div
495
+ className="action-container__create-row"
496
+ >
497
+ <CapLink
498
+ className="create-new-link"
499
+ disabled={false}
500
+ onClick={[Function]}
501
+ suffix={
502
+ <CapIcon
503
+ size="s"
504
+ type="open-in-new"
505
+ />
506
+ }
507
+ title="Create new template"
508
+ />
509
+ </div>
518
510
  </div>
519
511
  </div>
520
512
  <CapRow
@@ -653,171 +645,167 @@ exports[`Test Templates container Should render temlates when whatsapp templates
653
645
  <div
654
646
  className="action-container"
655
647
  >
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
648
  <div
672
- className="whatsapp-filters"
649
+ className="action-container__toolbar-row"
673
650
  >
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"
651
+ <_Class
652
+ className="search-text"
653
+ disabled={false}
654
+ labelPosition="top"
655
+ onChange={[Function]}
656
+ onClear={[Function]}
657
+ onScroll={[Function]}
658
+ onSearch={[Function]}
659
+ placeholder="Search"
660
+ value=""
732
661
  />
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
- },
662
+ <div
663
+ className="whatsapp-filters"
664
+ >
665
+ <CapSelectFilter
666
+ data={
667
+ Array [
668
+ Object {
669
+ "key": "awaitingApproval",
670
+ "label": <FormattedMessage
671
+ defaultMessage="Awaiting approval"
672
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
673
+ values={Object {}}
674
+ />,
675
+ "value": "awaitingApproval",
676
+ },
677
+ Object {
678
+ "key": "approved",
679
+ "label": <FormattedMessage
680
+ defaultMessage="Approved"
681
+ id="creatives.containersV2.Whatsapp.approved"
682
+ values={Object {}}
683
+ />,
684
+ "value": "approved",
685
+ },
686
+ Object {
687
+ "key": "rejected",
688
+ "label": <FormattedMessage
689
+ defaultMessage="Rejected"
690
+ id="creatives.containersV2.Whatsapp.rejected"
691
+ values={Object {}}
692
+ />,
693
+ "value": "rejected",
694
+ },
695
+ Object {
696
+ "key": "pending",
697
+ "label": <FormattedMessage
698
+ defaultMessage="Pending"
699
+ id="creatives.containersV2.Whatsapp.pending"
700
+ values={Object {}}
701
+ />,
702
+ "value": "pending",
703
+ },
704
+ Object {
705
+ "key": "paused",
706
+ "label": <FormattedMessage
707
+ defaultMessage="Paused"
708
+ id="creatives.containersV2.Whatsapp.paused"
709
+ values={Object {}}
710
+ />,
711
+ "value": "paused",
712
+ },
713
+ ]
714
+ }
715
+ dropdownMaxHeight="320px"
716
+ dropdownWidth="228px"
717
+ onSelect={[Function]}
718
+ placeholder="Status"
719
+ placement="bottomLeft"
720
+ selectedValue="approved"
721
+ showBadge={true}
722
+ width="90px"
723
+ />
724
+ <CapSelectFilter
725
+ data={
726
+ Array [
727
+ Object {
728
+ "key": "utility",
729
+ "label": <FormattedMessage
730
+ defaultMessage="Utility"
731
+ id="creatives.containersV2.Whatsapp.utility"
732
+ values={Object {}}
733
+ />,
734
+ "tagColor": "#f2e7fe",
735
+ "tagTextColor": "#a451ff",
736
+ "tooltipLabel": <FormattedMessage
737
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
738
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
739
+ values={Object {}}
740
+ />,
741
+ "value": "UTILITY",
742
+ },
743
+ Object {
744
+ "key": "marketing",
745
+ "label": <FormattedMessage
746
+ defaultMessage="Marketing"
747
+ id="creatives.containersV2.Whatsapp.marketing"
748
+ values={Object {}}
749
+ />,
750
+ "tagColor": "#ffe5d2",
751
+ "tagTextColor": "#f87d23",
752
+ "tooltipLabel": <FormattedMessage
753
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
754
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
755
+ values={Object {}}
756
+ />,
757
+ "value": "MARKETING",
758
+ },
759
+ Object {
760
+ "key": "authentication",
761
+ "label": <FormattedMessage
762
+ defaultMessage="Authentication"
763
+ id="creatives.containersV2.Whatsapp.authentication"
764
+ values={Object {}}
765
+ />,
766
+ "tagColor": "#ecf7ec",
767
+ "tagTextColor": "#6bb56b",
768
+ "tooltipLabel": <FormattedMessage
769
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
770
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
771
+ values={Object {}}
772
+ />,
773
+ "value": "AUTHENTICATION",
774
+ },
775
+ ]
776
+ }
777
+ dropdownMaxHeight="320px"
778
+ dropdownWidth="228px"
779
+ onSelect={[Function]}
780
+ overlayStyle={
768
781
  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",
782
+ "overflowY": "hidden",
783
+ }
792
784
  }
793
- }
794
- placeholder="Category"
795
- placement="bottomLeft"
796
- selectedValue=""
797
- showBadge={true}
798
- width="105px"
799
- />
785
+ placeholder="Category"
786
+ placement="bottomLeft"
787
+ selectedValue=""
788
+ showBadge={true}
789
+ width="105px"
790
+ />
791
+ </div>
792
+ <Component />
793
+ <Component />
800
794
  </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"
795
+ <div>
796
+ <div
797
+ className="action-container__create-row"
818
798
  >
819
- Create new
820
- </CapButton>
799
+ <CapButton
800
+ className="create-new-whatsapp margin-l-8 margin-b-12"
801
+ disabled={false}
802
+ isAddBtn={false}
803
+ onClick={[Function]}
804
+ type="primary"
805
+ >
806
+ Create new
807
+ </CapButton>
808
+ </div>
821
809
  </div>
822
810
  </div>
823
811
  <CapRow
@@ -1068,171 +1056,167 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
1068
1056
  <div
1069
1057
  className="action-container"
1070
1058
  >
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
1059
  <div
1087
- className="whatsapp-filters"
1060
+ className="action-container__toolbar-row"
1088
1061
  >
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"
1062
+ <_Class
1063
+ className="search-text"
1064
+ disabled={false}
1065
+ labelPosition="top"
1066
+ onChange={[Function]}
1067
+ onClear={[Function]}
1068
+ onScroll={[Function]}
1069
+ onSearch={[Function]}
1070
+ placeholder="Search"
1071
+ value=""
1147
1072
  />
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
- },
1073
+ <div
1074
+ className="whatsapp-filters"
1075
+ >
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
+ dropdownMaxHeight="320px"
1127
+ dropdownWidth="228px"
1128
+ onSelect={[Function]}
1129
+ placeholder="Status"
1130
+ placement="bottomLeft"
1131
+ selectedValue=""
1132
+ showBadge={true}
1133
+ width="90px"
1134
+ />
1135
+ <CapSelectFilter
1136
+ data={
1137
+ Array [
1138
+ Object {
1139
+ "key": "utility",
1140
+ "label": <FormattedMessage
1141
+ defaultMessage="Utility"
1142
+ id="creatives.containersV2.Whatsapp.utility"
1143
+ values={Object {}}
1144
+ />,
1145
+ "tagColor": "#f2e7fe",
1146
+ "tagTextColor": "#a451ff",
1147
+ "tooltipLabel": <FormattedMessage
1148
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1149
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1150
+ values={Object {}}
1151
+ />,
1152
+ "value": "UTILITY",
1153
+ },
1154
+ Object {
1155
+ "key": "marketing",
1156
+ "label": <FormattedMessage
1157
+ defaultMessage="Marketing"
1158
+ id="creatives.containersV2.Whatsapp.marketing"
1159
+ values={Object {}}
1160
+ />,
1161
+ "tagColor": "#ffe5d2",
1162
+ "tagTextColor": "#f87d23",
1163
+ "tooltipLabel": <FormattedMessage
1164
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1165
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
1166
+ values={Object {}}
1167
+ />,
1168
+ "value": "MARKETING",
1169
+ },
1170
+ Object {
1171
+ "key": "authentication",
1172
+ "label": <FormattedMessage
1173
+ defaultMessage="Authentication"
1174
+ id="creatives.containersV2.Whatsapp.authentication"
1175
+ values={Object {}}
1176
+ />,
1177
+ "tagColor": "#ecf7ec",
1178
+ "tagTextColor": "#6bb56b",
1179
+ "tooltipLabel": <FormattedMessage
1180
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
1181
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1182
+ values={Object {}}
1183
+ />,
1184
+ "value": "AUTHENTICATION",
1185
+ },
1186
+ ]
1187
+ }
1188
+ dropdownMaxHeight="320px"
1189
+ dropdownWidth="228px"
1190
+ onSelect={[Function]}
1191
+ overlayStyle={
1183
1192
  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",
1193
+ "overflowY": "hidden",
1194
+ }
1207
1195
  }
1208
- }
1209
- placeholder="Category"
1210
- placement="bottomLeft"
1211
- selectedValue=""
1212
- showBadge={true}
1213
- width="105px"
1214
- />
1196
+ placeholder="Category"
1197
+ placement="bottomLeft"
1198
+ selectedValue=""
1199
+ showBadge={true}
1200
+ width="105px"
1201
+ />
1202
+ </div>
1203
+ <Component />
1204
+ <Component />
1215
1205
  </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"
1206
+ <div>
1207
+ <div
1208
+ className="action-container__create-row"
1233
1209
  >
1234
- Create new
1235
- </CapButton>
1210
+ <CapButton
1211
+ className="create-new-whatsapp margin-l-8 margin-b-12"
1212
+ disabled={false}
1213
+ isAddBtn={false}
1214
+ onClick={[Function]}
1215
+ type="primary"
1216
+ >
1217
+ Create new
1218
+ </CapButton>
1219
+ </div>
1236
1220
  </div>
1237
1221
  </div>
1238
1222
  <CapRow
@@ -1533,171 +1517,167 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
1533
1517
  <div
1534
1518
  className="action-container"
1535
1519
  >
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
1520
  <div
1552
- className="whatsapp-filters"
1521
+ className="action-container__toolbar-row"
1553
1522
  >
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"
1523
+ <_Class
1524
+ className="search-text"
1525
+ disabled={false}
1526
+ labelPosition="top"
1527
+ onChange={[Function]}
1528
+ onClear={[Function]}
1529
+ onScroll={[Function]}
1530
+ onSearch={[Function]}
1531
+ placeholder="Search"
1532
+ value=""
1612
1533
  />
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
- },
1534
+ <div
1535
+ className="whatsapp-filters"
1536
+ >
1537
+ <CapSelectFilter
1538
+ data={
1539
+ Array [
1540
+ Object {
1541
+ "key": "awaitingApproval",
1542
+ "label": <FormattedMessage
1543
+ defaultMessage="Awaiting approval"
1544
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
1545
+ values={Object {}}
1546
+ />,
1547
+ "value": "awaitingApproval",
1548
+ },
1549
+ Object {
1550
+ "key": "approved",
1551
+ "label": <FormattedMessage
1552
+ defaultMessage="Approved"
1553
+ id="creatives.containersV2.Whatsapp.approved"
1554
+ values={Object {}}
1555
+ />,
1556
+ "value": "approved",
1557
+ },
1558
+ Object {
1559
+ "key": "rejected",
1560
+ "label": <FormattedMessage
1561
+ defaultMessage="Rejected"
1562
+ id="creatives.containersV2.Whatsapp.rejected"
1563
+ values={Object {}}
1564
+ />,
1565
+ "value": "rejected",
1566
+ },
1567
+ Object {
1568
+ "key": "pending",
1569
+ "label": <FormattedMessage
1570
+ defaultMessage="Pending"
1571
+ id="creatives.containersV2.Whatsapp.pending"
1572
+ values={Object {}}
1573
+ />,
1574
+ "value": "pending",
1575
+ },
1576
+ Object {
1577
+ "key": "paused",
1578
+ "label": <FormattedMessage
1579
+ defaultMessage="Paused"
1580
+ id="creatives.containersV2.Whatsapp.paused"
1581
+ values={Object {}}
1582
+ />,
1583
+ "value": "paused",
1584
+ },
1585
+ ]
1586
+ }
1587
+ dropdownMaxHeight="320px"
1588
+ dropdownWidth="228px"
1589
+ onSelect={[Function]}
1590
+ placeholder="Status"
1591
+ placement="bottomLeft"
1592
+ selectedValue=""
1593
+ showBadge={true}
1594
+ width="90px"
1595
+ />
1596
+ <CapSelectFilter
1597
+ data={
1598
+ Array [
1599
+ Object {
1600
+ "key": "utility",
1601
+ "label": <FormattedMessage
1602
+ defaultMessage="Utility"
1603
+ id="creatives.containersV2.Whatsapp.utility"
1604
+ values={Object {}}
1605
+ />,
1606
+ "tagColor": "#f2e7fe",
1607
+ "tagTextColor": "#a451ff",
1608
+ "tooltipLabel": <FormattedMessage
1609
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
1610
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
1611
+ values={Object {}}
1612
+ />,
1613
+ "value": "UTILITY",
1614
+ },
1615
+ Object {
1616
+ "key": "marketing",
1617
+ "label": <FormattedMessage
1618
+ defaultMessage="Marketing"
1619
+ id="creatives.containersV2.Whatsapp.marketing"
1620
+ values={Object {}}
1621
+ />,
1622
+ "tagColor": "#ffe5d2",
1623
+ "tagTextColor": "#f87d23",
1624
+ "tooltipLabel": <FormattedMessage
1625
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
1626
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
1627
+ values={Object {}}
1628
+ />,
1629
+ "value": "MARKETING",
1630
+ },
1631
+ Object {
1632
+ "key": "authentication",
1633
+ "label": <FormattedMessage
1634
+ defaultMessage="Authentication"
1635
+ id="creatives.containersV2.Whatsapp.authentication"
1636
+ values={Object {}}
1637
+ />,
1638
+ "tagColor": "#ecf7ec",
1639
+ "tagTextColor": "#6bb56b",
1640
+ "tooltipLabel": <FormattedMessage
1641
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
1642
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
1643
+ values={Object {}}
1644
+ />,
1645
+ "value": "AUTHENTICATION",
1646
+ },
1647
+ ]
1648
+ }
1649
+ dropdownMaxHeight="320px"
1650
+ dropdownWidth="228px"
1651
+ onSelect={[Function]}
1652
+ overlayStyle={
1648
1653
  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",
1654
+ "overflowY": "hidden",
1655
+ }
1672
1656
  }
1673
- }
1674
- placeholder="Category"
1675
- placement="bottomLeft"
1676
- selectedValue=""
1677
- showBadge={true}
1678
- width="105px"
1679
- />
1657
+ placeholder="Category"
1658
+ placement="bottomLeft"
1659
+ selectedValue=""
1660
+ showBadge={true}
1661
+ width="105px"
1662
+ />
1663
+ </div>
1664
+ <Component />
1665
+ <Component />
1680
1666
  </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"
1667
+ <div>
1668
+ <div
1669
+ className="action-container__create-row"
1698
1670
  >
1699
- Create new
1700
- </CapButton>
1671
+ <CapButton
1672
+ className="create-new-whatsapp margin-l-8 margin-b-12"
1673
+ disabled={false}
1674
+ isAddBtn={false}
1675
+ onClick={[Function]}
1676
+ type="primary"
1677
+ >
1678
+ Create new
1679
+ </CapButton>
1680
+ </div>
1701
1681
  </div>
1702
1682
  </div>
1703
1683
  <CapRow
@@ -1998,171 +1978,167 @@ exports[`Test Templates container Test max templates warning 1`] = `
1998
1978
  <div
1999
1979
  className="action-container"
2000
1980
  >
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
1981
  <div
2017
- className="whatsapp-filters"
1982
+ className="action-container__toolbar-row"
2018
1983
  >
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"
1984
+ <_Class
1985
+ className="search-text"
1986
+ disabled={false}
1987
+ labelPosition="top"
1988
+ onChange={[Function]}
1989
+ onClear={[Function]}
1990
+ onScroll={[Function]}
1991
+ onSearch={[Function]}
1992
+ placeholder="Search"
1993
+ value=""
2077
1994
  />
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
- },
1995
+ <div
1996
+ className="whatsapp-filters"
1997
+ >
1998
+ <CapSelectFilter
1999
+ data={
2000
+ Array [
2001
+ Object {
2002
+ "key": "awaitingApproval",
2003
+ "label": <FormattedMessage
2004
+ defaultMessage="Awaiting approval"
2005
+ id="creatives.containersV2.Whatsapp.awaitingApproval"
2006
+ values={Object {}}
2007
+ />,
2008
+ "value": "awaitingApproval",
2009
+ },
2010
+ Object {
2011
+ "key": "approved",
2012
+ "label": <FormattedMessage
2013
+ defaultMessage="Approved"
2014
+ id="creatives.containersV2.Whatsapp.approved"
2015
+ values={Object {}}
2016
+ />,
2017
+ "value": "approved",
2018
+ },
2019
+ Object {
2020
+ "key": "rejected",
2021
+ "label": <FormattedMessage
2022
+ defaultMessage="Rejected"
2023
+ id="creatives.containersV2.Whatsapp.rejected"
2024
+ values={Object {}}
2025
+ />,
2026
+ "value": "rejected",
2027
+ },
2028
+ Object {
2029
+ "key": "pending",
2030
+ "label": <FormattedMessage
2031
+ defaultMessage="Pending"
2032
+ id="creatives.containersV2.Whatsapp.pending"
2033
+ values={Object {}}
2034
+ />,
2035
+ "value": "pending",
2036
+ },
2037
+ Object {
2038
+ "key": "paused",
2039
+ "label": <FormattedMessage
2040
+ defaultMessage="Paused"
2041
+ id="creatives.containersV2.Whatsapp.paused"
2042
+ values={Object {}}
2043
+ />,
2044
+ "value": "paused",
2045
+ },
2046
+ ]
2047
+ }
2048
+ dropdownMaxHeight="320px"
2049
+ dropdownWidth="228px"
2050
+ onSelect={[Function]}
2051
+ placeholder="Status"
2052
+ placement="bottomLeft"
2053
+ selectedValue=""
2054
+ showBadge={true}
2055
+ width="90px"
2056
+ />
2057
+ <CapSelectFilter
2058
+ data={
2059
+ Array [
2060
+ Object {
2061
+ "key": "utility",
2062
+ "label": <FormattedMessage
2063
+ defaultMessage="Utility"
2064
+ id="creatives.containersV2.Whatsapp.utility"
2065
+ values={Object {}}
2066
+ />,
2067
+ "tagColor": "#f2e7fe",
2068
+ "tagTextColor": "#a451ff",
2069
+ "tooltipLabel": <FormattedMessage
2070
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2071
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2072
+ values={Object {}}
2073
+ />,
2074
+ "value": "UTILITY",
2075
+ },
2076
+ Object {
2077
+ "key": "marketing",
2078
+ "label": <FormattedMessage
2079
+ defaultMessage="Marketing"
2080
+ id="creatives.containersV2.Whatsapp.marketing"
2081
+ values={Object {}}
2082
+ />,
2083
+ "tagColor": "#ffe5d2",
2084
+ "tagTextColor": "#f87d23",
2085
+ "tooltipLabel": <FormattedMessage
2086
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2087
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2088
+ values={Object {}}
2089
+ />,
2090
+ "value": "MARKETING",
2091
+ },
2092
+ Object {
2093
+ "key": "authentication",
2094
+ "label": <FormattedMessage
2095
+ defaultMessage="Authentication"
2096
+ id="creatives.containersV2.Whatsapp.authentication"
2097
+ values={Object {}}
2098
+ />,
2099
+ "tagColor": "#ecf7ec",
2100
+ "tagTextColor": "#6bb56b",
2101
+ "tooltipLabel": <FormattedMessage
2102
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2103
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2104
+ values={Object {}}
2105
+ />,
2106
+ "value": "AUTHENTICATION",
2107
+ },
2108
+ ]
2109
+ }
2110
+ dropdownMaxHeight="320px"
2111
+ dropdownWidth="228px"
2112
+ onSelect={[Function]}
2113
+ overlayStyle={
2113
2114
  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",
2115
+ "overflowY": "hidden",
2116
+ }
2137
2117
  }
2138
- }
2139
- placeholder="Category"
2140
- placement="bottomLeft"
2141
- selectedValue=""
2142
- showBadge={true}
2143
- width="105px"
2144
- />
2118
+ placeholder="Category"
2119
+ placement="bottomLeft"
2120
+ selectedValue=""
2121
+ showBadge={true}
2122
+ width="105px"
2123
+ />
2124
+ </div>
2125
+ <Component />
2126
+ <Component />
2145
2127
  </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"
2128
+ <div>
2129
+ <div
2130
+ className="action-container__create-row"
2163
2131
  >
2164
- Create new
2165
- </CapButton>
2132
+ <CapButton
2133
+ className="create-new-whatsapp margin-l-8 margin-b-12"
2134
+ disabled={false}
2135
+ isAddBtn={false}
2136
+ onClick={[Function]}
2137
+ type="primary"
2138
+ >
2139
+ Create new
2140
+ </CapButton>
2141
+ </div>
2166
2142
  </div>
2167
2143
  </div>
2168
2144
  <CapRow
@@ -2463,115 +2439,111 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
2463
2439
  <div
2464
2440
  className="action-container"
2465
2441
  >
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
2442
  <div
2482
- className="whatsapp-filters"
2443
+ className="action-container__toolbar-row"
2483
2444
  >
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
- },
2445
+ <_Class
2446
+ className="search-text"
2447
+ disabled={false}
2448
+ labelPosition="top"
2449
+ onChange={[Function]}
2450
+ onClear={[Function]}
2451
+ onScroll={[Function]}
2452
+ onSearch={[Function]}
2453
+ placeholder="Search"
2454
+ value=""
2455
+ />
2456
+ <div
2457
+ className="whatsapp-filters"
2458
+ >
2459
+ <CapSelectFilter
2460
+ data={
2461
+ Array [
2462
+ Object {
2463
+ "key": "utility",
2464
+ "label": <FormattedMessage
2465
+ defaultMessage="Utility"
2466
+ id="creatives.containersV2.Whatsapp.utility"
2467
+ values={Object {}}
2468
+ />,
2469
+ "tagColor": "#f2e7fe",
2470
+ "tagTextColor": "#a451ff",
2471
+ "tooltipLabel": <FormattedMessage
2472
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2473
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2474
+ values={Object {}}
2475
+ />,
2476
+ "value": "UTILITY",
2477
+ },
2478
+ Object {
2479
+ "key": "marketing",
2480
+ "label": <FormattedMessage
2481
+ defaultMessage="Marketing"
2482
+ id="creatives.containersV2.Whatsapp.marketing"
2483
+ values={Object {}}
2484
+ />,
2485
+ "tagColor": "#ffe5d2",
2486
+ "tagTextColor": "#f87d23",
2487
+ "tooltipLabel": <FormattedMessage
2488
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2489
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2490
+ values={Object {}}
2491
+ />,
2492
+ "value": "MARKETING",
2493
+ },
2494
+ Object {
2495
+ "key": "authentication",
2496
+ "label": <FormattedMessage
2497
+ defaultMessage="Authentication"
2498
+ id="creatives.containersV2.Whatsapp.authentication"
2499
+ values={Object {}}
2500
+ />,
2501
+ "tagColor": "#ecf7ec",
2502
+ "tagTextColor": "#6bb56b",
2503
+ "tooltipLabel": <FormattedMessage
2504
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2505
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2506
+ values={Object {}}
2507
+ />,
2508
+ "value": "AUTHENTICATION",
2509
+ },
2510
+ ]
2511
+ }
2512
+ dropdownMaxHeight="320px"
2513
+ dropdownWidth="228px"
2514
+ onSelect={[Function]}
2515
+ overlayStyle={
2519
2516
  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",
2517
+ "overflowY": "hidden",
2518
+ }
2543
2519
  }
2544
- }
2545
- placeholder="Category"
2546
- placement="bottomLeft"
2547
- selectedValue="ALERT_UPDATE"
2548
- showBadge={true}
2549
- width="105px"
2550
- />
2520
+ placeholder="Category"
2521
+ placement="bottomLeft"
2522
+ selectedValue="ALERT_UPDATE"
2523
+ showBadge={true}
2524
+ width="105px"
2525
+ />
2526
+ </div>
2527
+ <Component />
2528
+ <Component />
2551
2529
  </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"
2571
- />
2572
- }
2573
- title="Create new template"
2574
- />
2530
+ <div>
2531
+ <div
2532
+ className="action-container__create-row"
2533
+ >
2534
+ <CapLink
2535
+ className="create-new-link"
2536
+ disabled={false}
2537
+ onClick={[Function]}
2538
+ suffix={
2539
+ <CapIcon
2540
+ size="s"
2541
+ type="open-in-new"
2542
+ />
2543
+ }
2544
+ title="Create new template"
2545
+ />
2546
+ </div>
2575
2547
  </div>
2576
2548
  </div>
2577
2549
  <CapRow
@@ -2736,115 +2708,111 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
2736
2708
  <div
2737
2709
  className="action-container"
2738
2710
  >
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
2711
  <div
2755
- className="whatsapp-filters"
2712
+ className="action-container__toolbar-row"
2756
2713
  >
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
- },
2714
+ <_Class
2715
+ className="search-text"
2716
+ disabled={false}
2717
+ labelPosition="top"
2718
+ onChange={[Function]}
2719
+ onClear={[Function]}
2720
+ onScroll={[Function]}
2721
+ onSearch={[Function]}
2722
+ placeholder="Search"
2723
+ value=""
2724
+ />
2725
+ <div
2726
+ className="whatsapp-filters"
2727
+ >
2728
+ <CapSelectFilter
2729
+ data={
2730
+ Array [
2731
+ Object {
2732
+ "key": "utility",
2733
+ "label": <FormattedMessage
2734
+ defaultMessage="Utility"
2735
+ id="creatives.containersV2.Whatsapp.utility"
2736
+ values={Object {}}
2737
+ />,
2738
+ "tagColor": "#f2e7fe",
2739
+ "tagTextColor": "#a451ff",
2740
+ "tooltipLabel": <FormattedMessage
2741
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2742
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2743
+ values={Object {}}
2744
+ />,
2745
+ "value": "UTILITY",
2746
+ },
2747
+ Object {
2748
+ "key": "marketing",
2749
+ "label": <FormattedMessage
2750
+ defaultMessage="Marketing"
2751
+ id="creatives.containersV2.Whatsapp.marketing"
2752
+ values={Object {}}
2753
+ />,
2754
+ "tagColor": "#ffe5d2",
2755
+ "tagTextColor": "#f87d23",
2756
+ "tooltipLabel": <FormattedMessage
2757
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
2758
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
2759
+ values={Object {}}
2760
+ />,
2761
+ "value": "MARKETING",
2762
+ },
2763
+ Object {
2764
+ "key": "authentication",
2765
+ "label": <FormattedMessage
2766
+ defaultMessage="Authentication"
2767
+ id="creatives.containersV2.Whatsapp.authentication"
2768
+ values={Object {}}
2769
+ />,
2770
+ "tagColor": "#ecf7ec",
2771
+ "tagTextColor": "#6bb56b",
2772
+ "tooltipLabel": <FormattedMessage
2773
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
2774
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
2775
+ values={Object {}}
2776
+ />,
2777
+ "value": "AUTHENTICATION",
2778
+ },
2779
+ ]
2780
+ }
2781
+ dropdownMaxHeight="320px"
2782
+ dropdownWidth="228px"
2783
+ onSelect={[Function]}
2784
+ overlayStyle={
2792
2785
  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",
2786
+ "overflowY": "hidden",
2787
+ }
2816
2788
  }
2817
- }
2818
- placeholder="Category"
2819
- placement="bottomLeft"
2820
- selectedValue={null}
2821
- showBadge={true}
2822
- width="105px"
2823
- />
2789
+ placeholder="Category"
2790
+ placement="bottomLeft"
2791
+ selectedValue={null}
2792
+ showBadge={true}
2793
+ width="105px"
2794
+ />
2795
+ </div>
2796
+ <Component />
2797
+ <Component />
2824
2798
  </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"
2844
- />
2845
- }
2846
- title="Create new template"
2847
- />
2799
+ <div>
2800
+ <div
2801
+ className="action-container__create-row"
2802
+ >
2803
+ <CapLink
2804
+ className="create-new-link"
2805
+ disabled={false}
2806
+ onClick={[Function]}
2807
+ suffix={
2808
+ <CapIcon
2809
+ size="s"
2810
+ type="open-in-new"
2811
+ />
2812
+ }
2813
+ title="Create new template"
2814
+ />
2815
+ </div>
2848
2816
  </div>
2849
2817
  </div>
2850
2818
  <CapRow
@@ -2983,115 +2951,111 @@ exports[`Test Templates container Test removing single filter 1`] = `
2983
2951
  <div
2984
2952
  className="action-container"
2985
2953
  >
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
2954
  <div
3002
- className="whatsapp-filters"
2955
+ className="action-container__toolbar-row"
3003
2956
  >
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
- },
2957
+ <_Class
2958
+ className="search-text"
2959
+ disabled={false}
2960
+ labelPosition="top"
2961
+ onChange={[Function]}
2962
+ onClear={[Function]}
2963
+ onScroll={[Function]}
2964
+ onSearch={[Function]}
2965
+ placeholder="Search"
2966
+ value=""
2967
+ />
2968
+ <div
2969
+ className="whatsapp-filters"
2970
+ >
2971
+ <CapSelectFilter
2972
+ data={
2973
+ Array [
2974
+ Object {
2975
+ "key": "utility",
2976
+ "label": <FormattedMessage
2977
+ defaultMessage="Utility"
2978
+ id="creatives.containersV2.Whatsapp.utility"
2979
+ values={Object {}}
2980
+ />,
2981
+ "tagColor": "#f2e7fe",
2982
+ "tagTextColor": "#a451ff",
2983
+ "tooltipLabel": <FormattedMessage
2984
+ defaultMessage="Send account updates, order updates, alerts, and more to share important information."
2985
+ id="creatives.containersV2.Whatsapp.utilityTooltip"
2986
+ values={Object {}}
2987
+ />,
2988
+ "value": "UTILITY",
2989
+ },
2990
+ Object {
2991
+ "key": "marketing",
2992
+ "label": <FormattedMessage
2993
+ defaultMessage="Marketing"
2994
+ id="creatives.containersV2.Whatsapp.marketing"
2995
+ values={Object {}}
2996
+ />,
2997
+ "tagColor": "#ffe5d2",
2998
+ "tagTextColor": "#f87d23",
2999
+ "tooltipLabel": <FormattedMessage
3000
+ defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
3001
+ id="creatives.containersV2.Whatsapp.marketingTooltip"
3002
+ values={Object {}}
3003
+ />,
3004
+ "value": "MARKETING",
3005
+ },
3006
+ Object {
3007
+ "key": "authentication",
3008
+ "label": <FormattedMessage
3009
+ defaultMessage="Authentication"
3010
+ id="creatives.containersV2.Whatsapp.authentication"
3011
+ values={Object {}}
3012
+ />,
3013
+ "tagColor": "#ecf7ec",
3014
+ "tagTextColor": "#6bb56b",
3015
+ "tooltipLabel": <FormattedMessage
3016
+ defaultMessage="Send codes that allow your customers to securely access their accounts."
3017
+ id="creatives.containersV2.Whatsapp.authenticationTooltip"
3018
+ values={Object {}}
3019
+ />,
3020
+ "value": "AUTHENTICATION",
3021
+ },
3022
+ ]
3023
+ }
3024
+ dropdownMaxHeight="320px"
3025
+ dropdownWidth="228px"
3026
+ onSelect={[Function]}
3027
+ overlayStyle={
3039
3028
  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",
3029
+ "overflowY": "hidden",
3030
+ }
3063
3031
  }
3064
- }
3065
- placeholder="Category"
3066
- placement="bottomLeft"
3067
- selectedValue=""
3068
- showBadge={true}
3069
- width="105px"
3070
- />
3032
+ placeholder="Category"
3033
+ placement="bottomLeft"
3034
+ selectedValue=""
3035
+ showBadge={true}
3036
+ width="105px"
3037
+ />
3038
+ </div>
3039
+ <Component />
3040
+ <Component />
3071
3041
  </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"
3091
- />
3092
- }
3093
- title="Create new template"
3094
- />
3042
+ <div>
3043
+ <div
3044
+ className="action-container__create-row"
3045
+ >
3046
+ <CapLink
3047
+ className="create-new-link"
3048
+ disabled={false}
3049
+ onClick={[Function]}
3050
+ suffix={
3051
+ <CapIcon
3052
+ size="s"
3053
+ type="open-in-new"
3054
+ />
3055
+ }
3056
+ title="Create new template"
3057
+ />
3058
+ </div>
3095
3059
  </div>
3096
3060
  </div>
3097
3061
  <CapRow