@capillarytech/creatives-library 8.0.129 → 8.0.131

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 (55) hide show
  1. package/containers/Login/index.js +1 -2
  2. package/containers/Templates/constants.js +10 -1
  3. package/containers/Templates/index.js +45 -45
  4. package/package.json +1 -1
  5. package/services/api.js +14 -7
  6. package/services/tests/haptic-api.test.js +387 -0
  7. package/utils/createMobilePushPayload.js +322 -0
  8. package/utils/tests/{createPayload.test.js → createMobilePushPayload.test.js} +333 -64
  9. package/utils/tests/vendorDataTransformers.test.js +512 -0
  10. package/utils/vendorDataTransformers.js +108 -0
  11. package/v2Components/CapDeviceContent/index.js +1 -1
  12. package/v2Components/CapDocumentUpload/index.js +2 -2
  13. package/v2Components/CapImageUpload/index.js +2 -2
  14. package/v2Components/CapMpushCTA/index.js +13 -12
  15. package/v2Components/CapTagList/index.js +5 -5
  16. package/v2Components/CapVideoUpload/index.js +17 -7
  17. package/v2Components/MobilePushPreviewV2/index.js +28 -15
  18. package/v2Components/TemplatePreview/_templatePreview.scss +131 -29
  19. package/v2Components/TemplatePreview/index.js +130 -131
  20. package/v2Components/TemplatePreview/tests/__snapshots__/index.test.js.snap +10 -10
  21. package/v2Containers/CreativesContainer/index.js +6 -4
  22. package/v2Containers/Line/Container/tests/__snapshots__/index.test.js.snap +4748 -4658
  23. package/v2Containers/Login/index.js +1 -2
  24. package/v2Containers/MobilePush/tests/commonMethods.test.js +401 -0
  25. package/v2Containers/MobilePushNew/components/CtaButtons.js +18 -16
  26. package/v2Containers/MobilePushNew/components/MediaUploaders.js +46 -45
  27. package/v2Containers/MobilePushNew/components/PlatformContentFields.js +12 -11
  28. package/v2Containers/MobilePushNew/components/tests/CtaButtons.test.js +134 -367
  29. package/v2Containers/MobilePushNew/components/tests/MediaUploaders.test.js +1209 -143
  30. package/v2Containers/MobilePushNew/components/tests/PlatformContentFields.test.js +314 -3
  31. package/v2Containers/MobilePushNew/constants.js +1 -0
  32. package/v2Containers/MobilePushNew/hooks/tests/usePlatformSync.test.js +163 -0
  33. package/v2Containers/MobilePushNew/hooks/tests/useUpload.test.js +1131 -895
  34. package/v2Containers/MobilePushNew/hooks/usePlatformSync.js +172 -52
  35. package/v2Containers/MobilePushNew/hooks/useUpload.js +88 -74
  36. package/v2Containers/MobilePushNew/index.js +278 -1532
  37. package/v2Containers/MobilePushNew/messages.js +30 -0
  38. package/v2Containers/MobilePushNew/sagas.js +2 -7
  39. package/v2Containers/MobilePushNew/tests/sagas.test.js +41 -40
  40. package/v2Containers/MobilePushNew/tests/selectors.test.js +240 -0
  41. package/v2Containers/MobilePushNew/tests/utils.test.js +118 -19
  42. package/v2Containers/MobilePushNew/utils.js +53 -2
  43. package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap +1171 -971
  44. package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap +684 -424
  45. package/v2Containers/Templates/_templates.scss +0 -1
  46. package/v2Containers/Templates/index.js +58 -29
  47. package/v2Containers/Templates/sagas.js +0 -1
  48. package/v2Containers/Whatsapp/constants.js +32 -0
  49. package/v2Containers/Whatsapp/index.js +104 -25
  50. package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +3992 -3677
  51. package/v2Containers/Whatsapp/tests/haptic.test.js +405 -0
  52. package/assets/loading_img.gif +0 -0
  53. package/utils/createPayload.js +0 -405
  54. /package/v2Components/TemplatePreview/assets/images/{Android _ With date and time.svg → Android_With_date_and_time.svg} +0 -0
  55. /package/v2Components/TemplatePreview/assets/images/{iOS _ With date and time.svg → iOS_With_date_and_time.svg} +0 -0
package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap CHANGED
@@ -6736,131 +6736,196 @@ new message content.",
6736
6736
  <div
6737
6737
  className="ant-col ant-col-24 cap-column-v2"
6738
6738
  >
6739
- <div
6739
+ <CapRow
6740
6740
  className="preview-container "
6741
6741
  key=".1"
6742
6742
  >
6743
- <div>
6743
+ <Row
6744
+ className="cap-row-v2 preview-container "
6745
+ gutter={0}
6746
+ >
6744
6747
  <div
6745
- className="shell-v2 align-center"
6746
- id="sms-preview"
6748
+ className="ant-row cap-row-v2 preview-container "
6747
6749
  >
6748
- <CapImage
6749
- alt="Preview is being generated"
6750
- className="preview-image sms"
6751
- src="test-file-stub"
6752
- >
6753
- <img
6754
- alt="Preview is being generated"
6755
- className="cap-image-v2 preview-image sms"
6756
- src="test-file-stub"
6757
- />
6758
- </CapImage>
6759
- <div
6760
- className="msg-container sms"
6761
- >
6762
- <div
6763
- className="message-pop sms"
6764
- >
6765
- <CapColumn
6766
- className="message-pop-item align-left"
6767
- key="\\"message-pop-content-0"
6768
- style={
6769
- Object {
6770
- "background": "#FFFFFF",
6771
- "color": "#091e42",
6772
- }
6773
- }
6774
- >
6775
- <Col
6776
- className="cap-column-v2 message-pop-item align-left"
6777
- style={
6778
- Object {
6779
- "background": "#FFFFFF",
6780
- "color": "#091e42",
6781
- }
6782
- }
6783
- >
6784
- <div
6785
- className="ant-col cap-column-v2 message-pop-item align-left"
6786
- style={
6787
- Object {
6788
- "background": "#FFFFFF",
6789
- "color": "#091e42",
6790
- }
6791
- }
6792
- />
6793
- </Col>
6794
- </CapColumn>
6795
- </div>
6796
- </div>
6797
- </div>
6798
- <div>
6799
- <CapColumn
6800
- className="character-count-col"
6801
- span={22}
6750
+ <CapRow
6751
+ key=".0"
6802
6752
  >
6803
- <Col
6804
- className="cap-column-v2 character-count-col"
6805
- span={22}
6753
+ <Row
6754
+ className="cap-row-v2"
6755
+ gutter={0}
6806
6756
  >
6807
6757
  <div
6808
- className="ant-col ant-col-22 cap-column-v2 character-count-col"
6758
+ className="ant-row cap-row-v2"
6809
6759
  >
6810
- <CapHeading
6760
+ <CapRow
6761
+ className="shell-v2 align-center"
6762
+ id="sms-preview"
6811
6763
  key=".0"
6812
- type="h3"
6813
6764
  >
6814
- <div
6815
- className="CapHeading-vrvcag-0 gPVQCv"
6816
- type="h3"
6765
+ <Row
6766
+ className="cap-row-v2 shell-v2 align-center"
6767
+ gutter={0}
6768
+ id="sms-preview"
6817
6769
  >
6818
- <FormattedMessage
6819
- defaultMessage="{smsCount} SMS ({charCount} characters)"
6820
- id="creatives.componentsV2.TemplatePreview.charactersTotal"
6821
- values={
6822
- Object {
6823
- "charCount": 29,
6824
- "smsCount": 1,
6825
- }
6826
- }
6770
+ <div
6771
+ className="ant-row cap-row-v2 shell-v2 align-center"
6772
+ id="sms-preview"
6827
6773
  >
6828
- <span>
6829
- 1 SMS (29 characters)
6830
- </span>
6831
- </FormattedMessage>
6832
- </div>
6833
- </CapHeading>
6834
- <CapHeading
6835
- className="optout-tag-heading"
6774
+ <CapImage
6775
+ alt="Preview is being generated"
6776
+ className="preview-image sms"
6777
+ key=".0"
6778
+ src="test-file-stub"
6779
+ >
6780
+ <img
6781
+ alt="Preview is being generated"
6782
+ className="cap-image-v2 preview-image sms"
6783
+ src="test-file-stub"
6784
+ />
6785
+ </CapImage>
6786
+ <CapRow
6787
+ className="msg-container sms"
6788
+ key=".1"
6789
+ >
6790
+ <Row
6791
+ className="cap-row-v2 msg-container sms"
6792
+ gutter={0}
6793
+ >
6794
+ <div
6795
+ className="ant-row cap-row-v2 msg-container sms"
6796
+ >
6797
+ <CapRow
6798
+ className="message-pop sms"
6799
+ key=".0"
6800
+ >
6801
+ <Row
6802
+ className="cap-row-v2 message-pop sms"
6803
+ gutter={0}
6804
+ >
6805
+ <div
6806
+ className="ant-row cap-row-v2 message-pop sms"
6807
+ >
6808
+ <CapColumn
6809
+ className="message-pop-item align-left"
6810
+ key=".$\\"message-pop-content-0"
6811
+ style={
6812
+ Object {
6813
+ "background": "#FFFFFF",
6814
+ "color": "#091e42",
6815
+ }
6816
+ }
6817
+ >
6818
+ <Col
6819
+ className="cap-column-v2 message-pop-item align-left"
6820
+ style={
6821
+ Object {
6822
+ "background": "#FFFFFF",
6823
+ "color": "#091e42",
6824
+ }
6825
+ }
6826
+ >
6827
+ <div
6828
+ className="ant-col cap-column-v2 message-pop-item align-left"
6829
+ style={
6830
+ Object {
6831
+ "background": "#FFFFFF",
6832
+ "color": "#091e42",
6833
+ }
6834
+ }
6835
+ />
6836
+ </Col>
6837
+ </CapColumn>
6838
+ </div>
6839
+ </Row>
6840
+ </CapRow>
6841
+ </div>
6842
+ </Row>
6843
+ </CapRow>
6844
+ </div>
6845
+ </Row>
6846
+ </CapRow>
6847
+ <CapRow
6836
6848
  key=".1"
6837
- type="h6"
6838
6849
  >
6839
- <div
6840
- className="CapHeading-vrvcag-0 gavZqN optout-tag-heading"
6841
- type="h6"
6850
+ <Row
6851
+ className="cap-row-v2"
6852
+ gutter={0}
6842
6853
  >
6843
- <FormattedMessage
6844
- defaultMessage="Includes optout tag ({optoutUrlLength} characters)"
6845
- id="app.components.TemplatePreview.optoutCharactersTotal"
6846
- values={
6847
- Object {
6848
- "optoutUrlLength": 9,
6849
- }
6850
- }
6854
+ <div
6855
+ className="ant-row cap-row-v2"
6851
6856
  >
6852
- <span>
6853
- Includes optout tag (9 characters)
6854
- </span>
6855
- </FormattedMessage>
6856
- </div>
6857
- </CapHeading>
6857
+ <CapColumn
6858
+ className="character-count-col"
6859
+ key=".0"
6860
+ span={22}
6861
+ >
6862
+ <Col
6863
+ className="cap-column-v2 character-count-col"
6864
+ span={22}
6865
+ >
6866
+ <div
6867
+ className="ant-col ant-col-22 cap-column-v2 character-count-col"
6868
+ >
6869
+ <CapHeading
6870
+ key=".0"
6871
+ type="h3"
6872
+ >
6873
+ <div
6874
+ className="CapHeading-vrvcag-0 gPVQCv"
6875
+ type="h3"
6876
+ >
6877
+ <FormattedMessage
6878
+ defaultMessage="{smsCount} SMS ({charCount} characters)"
6879
+ id="creatives.componentsV2.TemplatePreview.charactersTotal"
6880
+ values={
6881
+ Object {
6882
+ "charCount": 29,
6883
+ "smsCount": 1,
6884
+ }
6885
+ }
6886
+ >
6887
+ <span>
6888
+ 1 SMS (29 characters)
6889
+ </span>
6890
+ </FormattedMessage>
6891
+ </div>
6892
+ </CapHeading>
6893
+ <CapHeading
6894
+ className="optout-tag-heading"
6895
+ key=".1"
6896
+ type="h6"
6897
+ >
6898
+ <div
6899
+ className="CapHeading-vrvcag-0 gavZqN optout-tag-heading"
6900
+ type="h6"
6901
+ >
6902
+ <FormattedMessage
6903
+ defaultMessage="Includes optout tag ({optoutUrlLength} characters)"
6904
+ id="app.components.TemplatePreview.optoutCharactersTotal"
6905
+ values={
6906
+ Object {
6907
+ "optoutUrlLength": 9,
6908
+ }
6909
+ }
6910
+ >
6911
+ <span>
6912
+ Includes optout tag (9 characters)
6913
+ </span>
6914
+ </FormattedMessage>
6915
+ </div>
6916
+ </CapHeading>
6917
+ </div>
6918
+ </Col>
6919
+ </CapColumn>
6920
+ </div>
6921
+ </Row>
6922
+ </CapRow>
6858
6923
  </div>
6859
- </Col>
6860
- </CapColumn>
6924
+ </Row>
6925
+ </CapRow>
6861
6926
  </div>
6862
- </div>
6863
- </div>
6927
+ </Row>
6928
+ </CapRow>
6864
6929
  </div>
6865
6930
  </Col>
6866
6931
  </CapColumn>
@@ -13557,131 +13622,196 @@ new message content.",
13557
13622
  <div
13558
13623
  className="ant-col ant-col-24 cap-column-v2"
13559
13624
  >
13560
- <div
13625
+ <CapRow
13561
13626
  className="preview-container "
13562
13627
  key=".1"
13563
13628
  >
13564
- <div>
13629
+ <Row
13630
+ className="cap-row-v2 preview-container "
13631
+ gutter={0}
13632
+ >
13565
13633
  <div
13566
- className="shell-v2 align-center"
13567
- id="sms-preview"
13634
+ className="ant-row cap-row-v2 preview-container "
13568
13635
  >
13569
- <CapImage
13570
- alt="Preview is being generated"
13571
- className="preview-image sms"
13572
- src="test-file-stub"
13573
- >
13574
- <img
13575
- alt="Preview is being generated"
13576
- className="cap-image-v2 preview-image sms"
13577
- src="test-file-stub"
13578
- />
13579
- </CapImage>
13580
- <div
13581
- className="msg-container sms"
13582
- >
13583
- <div
13584
- className="message-pop sms"
13585
- >
13586
- <CapColumn
13587
- className="message-pop-item align-left"
13588
- key="\\"message-pop-content-0"
13589
- style={
13590
- Object {
13591
- "background": "#FFFFFF",
13592
- "color": "#091e42",
13593
- }
13594
- }
13595
- >
13596
- <Col
13597
- className="cap-column-v2 message-pop-item align-left"
13598
- style={
13599
- Object {
13600
- "background": "#FFFFFF",
13601
- "color": "#091e42",
13602
- }
13603
- }
13604
- >
13605
- <div
13606
- className="ant-col cap-column-v2 message-pop-item align-left"
13607
- style={
13608
- Object {
13609
- "background": "#FFFFFF",
13610
- "color": "#091e42",
13611
- }
13612
- }
13613
- />
13614
- </Col>
13615
- </CapColumn>
13616
- </div>
13617
- </div>
13618
- </div>
13619
- <div>
13620
- <CapColumn
13621
- className="character-count-col"
13622
- span={22}
13636
+ <CapRow
13637
+ key=".0"
13623
13638
  >
13624
- <Col
13625
- className="cap-column-v2 character-count-col"
13626
- span={22}
13639
+ <Row
13640
+ className="cap-row-v2"
13641
+ gutter={0}
13627
13642
  >
13628
13643
  <div
13629
- className="ant-col ant-col-22 cap-column-v2 character-count-col"
13644
+ className="ant-row cap-row-v2"
13630
13645
  >
13631
- <CapHeading
13646
+ <CapRow
13647
+ className="shell-v2 align-center"
13648
+ id="sms-preview"
13632
13649
  key=".0"
13633
- type="h3"
13634
13650
  >
13635
- <div
13636
- className="CapHeading-vrvcag-0 gPVQCv"
13637
- type="h3"
13651
+ <Row
13652
+ className="cap-row-v2 shell-v2 align-center"
13653
+ gutter={0}
13654
+ id="sms-preview"
13638
13655
  >
13639
- <FormattedMessage
13640
- defaultMessage="{smsCount} SMS ({charCount} characters)"
13641
- id="creatives.componentsV2.TemplatePreview.charactersTotal"
13642
- values={
13643
- Object {
13644
- "charCount": 29,
13645
- "smsCount": 1,
13646
- }
13647
- }
13656
+ <div
13657
+ className="ant-row cap-row-v2 shell-v2 align-center"
13658
+ id="sms-preview"
13648
13659
  >
13649
- <span>
13650
- 1 SMS (29 characters)
13651
- </span>
13652
- </FormattedMessage>
13653
- </div>
13654
- </CapHeading>
13655
- <CapHeading
13656
- className="optout-tag-heading"
13660
+ <CapImage
13661
+ alt="Preview is being generated"
13662
+ className="preview-image sms"
13663
+ key=".0"
13664
+ src="test-file-stub"
13665
+ >
13666
+ <img
13667
+ alt="Preview is being generated"
13668
+ className="cap-image-v2 preview-image sms"
13669
+ src="test-file-stub"
13670
+ />
13671
+ </CapImage>
13672
+ <CapRow
13673
+ className="msg-container sms"
13674
+ key=".1"
13675
+ >
13676
+ <Row
13677
+ className="cap-row-v2 msg-container sms"
13678
+ gutter={0}
13679
+ >
13680
+ <div
13681
+ className="ant-row cap-row-v2 msg-container sms"
13682
+ >
13683
+ <CapRow
13684
+ className="message-pop sms"
13685
+ key=".0"
13686
+ >
13687
+ <Row
13688
+ className="cap-row-v2 message-pop sms"
13689
+ gutter={0}
13690
+ >
13691
+ <div
13692
+ className="ant-row cap-row-v2 message-pop sms"
13693
+ >
13694
+ <CapColumn
13695
+ className="message-pop-item align-left"
13696
+ key=".$\\"message-pop-content-0"
13697
+ style={
13698
+ Object {
13699
+ "background": "#FFFFFF",
13700
+ "color": "#091e42",
13701
+ }
13702
+ }
13703
+ >
13704
+ <Col
13705
+ className="cap-column-v2 message-pop-item align-left"
13706
+ style={
13707
+ Object {
13708
+ "background": "#FFFFFF",
13709
+ "color": "#091e42",
13710
+ }
13711
+ }
13712
+ >
13713
+ <div
13714
+ className="ant-col cap-column-v2 message-pop-item align-left"
13715
+ style={
13716
+ Object {
13717
+ "background": "#FFFFFF",
13718
+ "color": "#091e42",
13719
+ }
13720
+ }
13721
+ />
13722
+ </Col>
13723
+ </CapColumn>
13724
+ </div>
13725
+ </Row>
13726
+ </CapRow>
13727
+ </div>
13728
+ </Row>
13729
+ </CapRow>
13730
+ </div>
13731
+ </Row>
13732
+ </CapRow>
13733
+ <CapRow
13657
13734
  key=".1"
13658
- type="h6"
13659
13735
  >
13660
- <div
13661
- className="CapHeading-vrvcag-0 gavZqN optout-tag-heading"
13662
- type="h6"
13736
+ <Row
13737
+ className="cap-row-v2"
13738
+ gutter={0}
13663
13739
  >
13664
- <FormattedMessage
13665
- defaultMessage="Includes optout tag ({optoutUrlLength} characters)"
13666
- id="app.components.TemplatePreview.optoutCharactersTotal"
13667
- values={
13668
- Object {
13669
- "optoutUrlLength": 9,
13670
- }
13671
- }
13740
+ <div
13741
+ className="ant-row cap-row-v2"
13672
13742
  >
13673
- <span>
13674
- Includes optout tag (9 characters)
13675
- </span>
13676
- </FormattedMessage>
13677
- </div>
13678
- </CapHeading>
13743
+ <CapColumn
13744
+ className="character-count-col"
13745
+ key=".0"
13746
+ span={22}
13747
+ >
13748
+ <Col
13749
+ className="cap-column-v2 character-count-col"
13750
+ span={22}
13751
+ >
13752
+ <div
13753
+ className="ant-col ant-col-22 cap-column-v2 character-count-col"
13754
+ >
13755
+ <CapHeading
13756
+ key=".0"
13757
+ type="h3"
13758
+ >
13759
+ <div
13760
+ className="CapHeading-vrvcag-0 gPVQCv"
13761
+ type="h3"
13762
+ >
13763
+ <FormattedMessage
13764
+ defaultMessage="{smsCount} SMS ({charCount} characters)"
13765
+ id="creatives.componentsV2.TemplatePreview.charactersTotal"
13766
+ values={
13767
+ Object {
13768
+ "charCount": 29,
13769
+ "smsCount": 1,
13770
+ }
13771
+ }
13772
+ >
13773
+ <span>
13774
+ 1 SMS (29 characters)
13775
+ </span>
13776
+ </FormattedMessage>
13777
+ </div>
13778
+ </CapHeading>
13779
+ <CapHeading
13780
+ className="optout-tag-heading"
13781
+ key=".1"
13782
+ type="h6"
13783
+ >
13784
+ <div
13785
+ className="CapHeading-vrvcag-0 gavZqN optout-tag-heading"
13786
+ type="h6"
13787
+ >
13788
+ <FormattedMessage
13789
+ defaultMessage="Includes optout tag ({optoutUrlLength} characters)"
13790
+ id="app.components.TemplatePreview.optoutCharactersTotal"
13791
+ values={
13792
+ Object {
13793
+ "optoutUrlLength": 9,
13794
+ }
13795
+ }
13796
+ >
13797
+ <span>
13798
+ Includes optout tag (9 characters)
13799
+ </span>
13800
+ </FormattedMessage>
13801
+ </div>
13802
+ </CapHeading>
13803
+ </div>
13804
+ </Col>
13805
+ </CapColumn>
13806
+ </div>
13807
+ </Row>
13808
+ </CapRow>
13679
13809
  </div>
13680
- </Col>
13681
- </CapColumn>
13810
+ </Row>
13811
+ </CapRow>
13682
13812
  </div>
13683
- </div>
13684
- </div>
13813
+ </Row>
13814
+ </CapRow>
13685
13815
  </div>
13686
13816
  </Col>
13687
13817
  </CapColumn>
@@ -20350,131 +20480,196 @@ new message content.",
20350
20480
  <div
20351
20481
  className="ant-col ant-col-24 cap-column-v2"
20352
20482
  >
20353
- <div
20483
+ <CapRow
20354
20484
  className="preview-container "
20355
20485
  key=".1"
20356
20486
  >
20357
- <div>
20487
+ <Row
20488
+ className="cap-row-v2 preview-container "
20489
+ gutter={0}
20490
+ >
20358
20491
  <div
20359
- className="shell-v2 align-center"
20360
- id="sms-preview"
20492
+ className="ant-row cap-row-v2 preview-container "
20361
20493
  >
20362
- <CapImage
20363
- alt="Preview is being generated"
20364
- className="preview-image sms"
20365
- src="test-file-stub"
20366
- >
20367
- <img
20368
- alt="Preview is being generated"
20369
- className="cap-image-v2 preview-image sms"
20370
- src="test-file-stub"
20371
- />
20372
- </CapImage>
20373
- <div
20374
- className="msg-container sms"
20375
- >
20376
- <div
20377
- className="message-pop sms"
20378
- >
20379
- <CapColumn
20380
- className="message-pop-item align-left"
20381
- key="\\"message-pop-content-0"
20382
- style={
20383
- Object {
20384
- "background": "#FFFFFF",
20385
- "color": "#091e42",
20386
- }
20387
- }
20388
- >
20389
- <Col
20390
- className="cap-column-v2 message-pop-item align-left"
20391
- style={
20392
- Object {
20393
- "background": "#FFFFFF",
20394
- "color": "#091e42",
20395
- }
20396
- }
20397
- >
20398
- <div
20399
- className="ant-col cap-column-v2 message-pop-item align-left"
20400
- style={
20401
- Object {
20402
- "background": "#FFFFFF",
20403
- "color": "#091e42",
20404
- }
20405
- }
20406
- />
20407
- </Col>
20408
- </CapColumn>
20409
- </div>
20410
- </div>
20411
- </div>
20412
- <div>
20413
- <CapColumn
20414
- className="character-count-col"
20415
- span={22}
20494
+ <CapRow
20495
+ key=".0"
20416
20496
  >
20417
- <Col
20418
- className="cap-column-v2 character-count-col"
20419
- span={22}
20497
+ <Row
20498
+ className="cap-row-v2"
20499
+ gutter={0}
20420
20500
  >
20421
20501
  <div
20422
- className="ant-col ant-col-22 cap-column-v2 character-count-col"
20502
+ className="ant-row cap-row-v2"
20423
20503
  >
20424
- <CapHeading
20504
+ <CapRow
20505
+ className="shell-v2 align-center"
20506
+ id="sms-preview"
20425
20507
  key=".0"
20426
- type="h3"
20427
20508
  >
20428
- <div
20429
- className="CapHeading-vrvcag-0 gPVQCv"
20430
- type="h3"
20509
+ <Row
20510
+ className="cap-row-v2 shell-v2 align-center"
20511
+ gutter={0}
20512
+ id="sms-preview"
20431
20513
  >
20432
- <FormattedMessage
20433
- defaultMessage="{smsCount} SMS ({charCount} characters)"
20434
- id="creatives.componentsV2.TemplatePreview.charactersTotal"
20435
- values={
20436
- Object {
20437
- "charCount": 29,
20438
- "smsCount": 1,
20439
- }
20440
- }
20514
+ <div
20515
+ className="ant-row cap-row-v2 shell-v2 align-center"
20516
+ id="sms-preview"
20441
20517
  >
20442
- <span>
20443
- 1 SMS (29 characters)
20444
- </span>
20445
- </FormattedMessage>
20446
- </div>
20447
- </CapHeading>
20448
- <CapHeading
20449
- className="optout-tag-heading"
20518
+ <CapImage
20519
+ alt="Preview is being generated"
20520
+ className="preview-image sms"
20521
+ key=".0"
20522
+ src="test-file-stub"
20523
+ >
20524
+ <img
20525
+ alt="Preview is being generated"
20526
+ className="cap-image-v2 preview-image sms"
20527
+ src="test-file-stub"
20528
+ />
20529
+ </CapImage>
20530
+ <CapRow
20531
+ className="msg-container sms"
20532
+ key=".1"
20533
+ >
20534
+ <Row
20535
+ className="cap-row-v2 msg-container sms"
20536
+ gutter={0}
20537
+ >
20538
+ <div
20539
+ className="ant-row cap-row-v2 msg-container sms"
20540
+ >
20541
+ <CapRow
20542
+ className="message-pop sms"
20543
+ key=".0"
20544
+ >
20545
+ <Row
20546
+ className="cap-row-v2 message-pop sms"
20547
+ gutter={0}
20548
+ >
20549
+ <div
20550
+ className="ant-row cap-row-v2 message-pop sms"
20551
+ >
20552
+ <CapColumn
20553
+ className="message-pop-item align-left"
20554
+ key=".$\\"message-pop-content-0"
20555
+ style={
20556
+ Object {
20557
+ "background": "#FFFFFF",
20558
+ "color": "#091e42",
20559
+ }
20560
+ }
20561
+ >
20562
+ <Col
20563
+ className="cap-column-v2 message-pop-item align-left"
20564
+ style={
20565
+ Object {
20566
+ "background": "#FFFFFF",
20567
+ "color": "#091e42",
20568
+ }
20569
+ }
20570
+ >
20571
+ <div
20572
+ className="ant-col cap-column-v2 message-pop-item align-left"
20573
+ style={
20574
+ Object {
20575
+ "background": "#FFFFFF",
20576
+ "color": "#091e42",
20577
+ }
20578
+ }
20579
+ />
20580
+ </Col>
20581
+ </CapColumn>
20582
+ </div>
20583
+ </Row>
20584
+ </CapRow>
20585
+ </div>
20586
+ </Row>
20587
+ </CapRow>
20588
+ </div>
20589
+ </Row>
20590
+ </CapRow>
20591
+ <CapRow
20450
20592
  key=".1"
20451
- type="h6"
20452
20593
  >
20453
- <div
20454
- className="CapHeading-vrvcag-0 gavZqN optout-tag-heading"
20455
- type="h6"
20594
+ <Row
20595
+ className="cap-row-v2"
20596
+ gutter={0}
20456
20597
  >
20457
- <FormattedMessage
20458
- defaultMessage="Includes optout tag ({optoutUrlLength} characters)"
20459
- id="app.components.TemplatePreview.optoutCharactersTotal"
20460
- values={
20461
- Object {
20462
- "optoutUrlLength": 9,
20463
- }
20464
- }
20598
+ <div
20599
+ className="ant-row cap-row-v2"
20465
20600
  >
20466
- <span>
20467
- Includes optout tag (9 characters)
20468
- </span>
20469
- </FormattedMessage>
20470
- </div>
20471
- </CapHeading>
20601
+ <CapColumn
20602
+ className="character-count-col"
20603
+ key=".0"
20604
+ span={22}
20605
+ >
20606
+ <Col
20607
+ className="cap-column-v2 character-count-col"
20608
+ span={22}
20609
+ >
20610
+ <div
20611
+ className="ant-col ant-col-22 cap-column-v2 character-count-col"
20612
+ >
20613
+ <CapHeading
20614
+ key=".0"
20615
+ type="h3"
20616
+ >
20617
+ <div
20618
+ className="CapHeading-vrvcag-0 gPVQCv"
20619
+ type="h3"
20620
+ >
20621
+ <FormattedMessage
20622
+ defaultMessage="{smsCount} SMS ({charCount} characters)"
20623
+ id="creatives.componentsV2.TemplatePreview.charactersTotal"
20624
+ values={
20625
+ Object {
20626
+ "charCount": 29,
20627
+ "smsCount": 1,
20628
+ }
20629
+ }
20630
+ >
20631
+ <span>
20632
+ 1 SMS (29 characters)
20633
+ </span>
20634
+ </FormattedMessage>
20635
+ </div>
20636
+ </CapHeading>
20637
+ <CapHeading
20638
+ className="optout-tag-heading"
20639
+ key=".1"
20640
+ type="h6"
20641
+ >
20642
+ <div
20643
+ className="CapHeading-vrvcag-0 gavZqN optout-tag-heading"
20644
+ type="h6"
20645
+ >
20646
+ <FormattedMessage
20647
+ defaultMessage="Includes optout tag ({optoutUrlLength} characters)"
20648
+ id="app.components.TemplatePreview.optoutCharactersTotal"
20649
+ values={
20650
+ Object {
20651
+ "optoutUrlLength": 9,
20652
+ }
20653
+ }
20654
+ >
20655
+ <span>
20656
+ Includes optout tag (9 characters)
20657
+ </span>
20658
+ </FormattedMessage>
20659
+ </div>
20660
+ </CapHeading>
20661
+ </div>
20662
+ </Col>
20663
+ </CapColumn>
20664
+ </div>
20665
+ </Row>
20666
+ </CapRow>
20472
20667
  </div>
20473
- </Col>
20474
- </CapColumn>
20668
+ </Row>
20669
+ </CapRow>
20475
20670
  </div>
20476
- </div>
20477
- </div>
20671
+ </Row>
20672
+ </CapRow>
20478
20673
  </div>
20479
20674
  </Col>
20480
20675
  </CapColumn>
@@ -27464,131 +27659,196 @@ new message content.",
27464
27659
  <div
27465
27660
  className="ant-col ant-col-24 cap-column-v2"
27466
27661
  >
27467
- <div
27662
+ <CapRow
27468
27663
  className="preview-container "
27469
27664
  key=".1"
27470
27665
  >
27471
- <div>
27666
+ <Row
27667
+ className="cap-row-v2 preview-container "
27668
+ gutter={0}
27669
+ >
27472
27670
  <div
27473
- className="shell-v2 align-center"
27474
- id="sms-preview"
27671
+ className="ant-row cap-row-v2 preview-container "
27475
27672
  >
27476
- <CapImage
27477
- alt="Preview is being generated"
27478
- className="preview-image sms"
27479
- src="test-file-stub"
27480
- >
27481
- <img
27482
- alt="Preview is being generated"
27483
- className="cap-image-v2 preview-image sms"
27484
- src="test-file-stub"
27485
- />
27486
- </CapImage>
27487
- <div
27488
- className="msg-container sms"
27489
- >
27490
- <div
27491
- className="message-pop sms"
27492
- >
27493
- <CapColumn
27494
- className="message-pop-item align-left"
27495
- key="\\"message-pop-content-0"
27496
- style={
27497
- Object {
27498
- "background": "#FFFFFF",
27499
- "color": "#091e42",
27500
- }
27501
- }
27502
- >
27503
- <Col
27504
- className="cap-column-v2 message-pop-item align-left"
27505
- style={
27506
- Object {
27507
- "background": "#FFFFFF",
27508
- "color": "#091e42",
27509
- }
27510
- }
27511
- >
27512
- <div
27513
- className="ant-col cap-column-v2 message-pop-item align-left"
27514
- style={
27515
- Object {
27516
- "background": "#FFFFFF",
27517
- "color": "#091e42",
27518
- }
27519
- }
27520
- />
27521
- </Col>
27522
- </CapColumn>
27523
- </div>
27524
- </div>
27525
- </div>
27526
- <div>
27527
- <CapColumn
27528
- className="character-count-col"
27529
- span={22}
27673
+ <CapRow
27674
+ key=".0"
27530
27675
  >
27531
- <Col
27532
- className="cap-column-v2 character-count-col"
27533
- span={22}
27676
+ <Row
27677
+ className="cap-row-v2"
27678
+ gutter={0}
27534
27679
  >
27535
27680
  <div
27536
- className="ant-col ant-col-22 cap-column-v2 character-count-col"
27681
+ className="ant-row cap-row-v2"
27537
27682
  >
27538
- <CapHeading
27683
+ <CapRow
27684
+ className="shell-v2 align-center"
27685
+ id="sms-preview"
27539
27686
  key=".0"
27540
- type="h3"
27541
27687
  >
27542
- <div
27543
- className="CapHeading-vrvcag-0 gPVQCv"
27544
- type="h3"
27688
+ <Row
27689
+ className="cap-row-v2 shell-v2 align-center"
27690
+ gutter={0}
27691
+ id="sms-preview"
27545
27692
  >
27546
- <FormattedMessage
27547
- defaultMessage="{smsCount} SMS ({charCount} characters)"
27548
- id="creatives.componentsV2.TemplatePreview.charactersTotal"
27549
- values={
27550
- Object {
27551
- "charCount": 29,
27552
- "smsCount": 1,
27553
- }
27554
- }
27693
+ <div
27694
+ className="ant-row cap-row-v2 shell-v2 align-center"
27695
+ id="sms-preview"
27555
27696
  >
27556
- <span>
27557
- 1 SMS (29 characters)
27558
- </span>
27559
- </FormattedMessage>
27560
- </div>
27561
- </CapHeading>
27562
- <CapHeading
27563
- className="optout-tag-heading"
27697
+ <CapImage
27698
+ alt="Preview is being generated"
27699
+ className="preview-image sms"
27700
+ key=".0"
27701
+ src="test-file-stub"
27702
+ >
27703
+ <img
27704
+ alt="Preview is being generated"
27705
+ className="cap-image-v2 preview-image sms"
27706
+ src="test-file-stub"
27707
+ />
27708
+ </CapImage>
27709
+ <CapRow
27710
+ className="msg-container sms"
27711
+ key=".1"
27712
+ >
27713
+ <Row
27714
+ className="cap-row-v2 msg-container sms"
27715
+ gutter={0}
27716
+ >
27717
+ <div
27718
+ className="ant-row cap-row-v2 msg-container sms"
27719
+ >
27720
+ <CapRow
27721
+ className="message-pop sms"
27722
+ key=".0"
27723
+ >
27724
+ <Row
27725
+ className="cap-row-v2 message-pop sms"
27726
+ gutter={0}
27727
+ >
27728
+ <div
27729
+ className="ant-row cap-row-v2 message-pop sms"
27730
+ >
27731
+ <CapColumn
27732
+ className="message-pop-item align-left"
27733
+ key=".$\\"message-pop-content-0"
27734
+ style={
27735
+ Object {
27736
+ "background": "#FFFFFF",
27737
+ "color": "#091e42",
27738
+ }
27739
+ }
27740
+ >
27741
+ <Col
27742
+ className="cap-column-v2 message-pop-item align-left"
27743
+ style={
27744
+ Object {
27745
+ "background": "#FFFFFF",
27746
+ "color": "#091e42",
27747
+ }
27748
+ }
27749
+ >
27750
+ <div
27751
+ className="ant-col cap-column-v2 message-pop-item align-left"
27752
+ style={
27753
+ Object {
27754
+ "background": "#FFFFFF",
27755
+ "color": "#091e42",
27756
+ }
27757
+ }
27758
+ />
27759
+ </Col>
27760
+ </CapColumn>
27761
+ </div>
27762
+ </Row>
27763
+ </CapRow>
27764
+ </div>
27765
+ </Row>
27766
+ </CapRow>
27767
+ </div>
27768
+ </Row>
27769
+ </CapRow>
27770
+ <CapRow
27564
27771
  key=".1"
27565
- type="h6"
27566
27772
  >
27567
- <div
27568
- className="CapHeading-vrvcag-0 gavZqN optout-tag-heading"
27569
- type="h6"
27773
+ <Row
27774
+ className="cap-row-v2"
27775
+ gutter={0}
27570
27776
  >
27571
- <FormattedMessage
27572
- defaultMessage="Includes optout tag ({optoutUrlLength} characters)"
27573
- id="app.components.TemplatePreview.optoutCharactersTotal"
27574
- values={
27575
- Object {
27576
- "optoutUrlLength": 9,
27577
- }
27578
- }
27777
+ <div
27778
+ className="ant-row cap-row-v2"
27579
27779
  >
27580
- <span>
27581
- Includes optout tag (9 characters)
27582
- </span>
27583
- </FormattedMessage>
27584
- </div>
27585
- </CapHeading>
27780
+ <CapColumn
27781
+ className="character-count-col"
27782
+ key=".0"
27783
+ span={22}
27784
+ >
27785
+ <Col
27786
+ className="cap-column-v2 character-count-col"
27787
+ span={22}
27788
+ >
27789
+ <div
27790
+ className="ant-col ant-col-22 cap-column-v2 character-count-col"
27791
+ >
27792
+ <CapHeading
27793
+ key=".0"
27794
+ type="h3"
27795
+ >
27796
+ <div
27797
+ className="CapHeading-vrvcag-0 gPVQCv"
27798
+ type="h3"
27799
+ >
27800
+ <FormattedMessage
27801
+ defaultMessage="{smsCount} SMS ({charCount} characters)"
27802
+ id="creatives.componentsV2.TemplatePreview.charactersTotal"
27803
+ values={
27804
+ Object {
27805
+ "charCount": 29,
27806
+ "smsCount": 1,
27807
+ }
27808
+ }
27809
+ >
27810
+ <span>
27811
+ 1 SMS (29 characters)
27812
+ </span>
27813
+ </FormattedMessage>
27814
+ </div>
27815
+ </CapHeading>
27816
+ <CapHeading
27817
+ className="optout-tag-heading"
27818
+ key=".1"
27819
+ type="h6"
27820
+ >
27821
+ <div
27822
+ className="CapHeading-vrvcag-0 gavZqN optout-tag-heading"
27823
+ type="h6"
27824
+ >
27825
+ <FormattedMessage
27826
+ defaultMessage="Includes optout tag ({optoutUrlLength} characters)"
27827
+ id="app.components.TemplatePreview.optoutCharactersTotal"
27828
+ values={
27829
+ Object {
27830
+ "optoutUrlLength": 9,
27831
+ }
27832
+ }
27833
+ >
27834
+ <span>
27835
+ Includes optout tag (9 characters)
27836
+ </span>
27837
+ </FormattedMessage>
27838
+ </div>
27839
+ </CapHeading>
27840
+ </div>
27841
+ </Col>
27842
+ </CapColumn>
27843
+ </div>
27844
+ </Row>
27845
+ </CapRow>
27586
27846
  </div>
27587
- </Col>
27588
- </CapColumn>
27847
+ </Row>
27848
+ </CapRow>
27589
27849
  </div>
27590
- </div>
27591
- </div>
27850
+ </Row>
27851
+ </CapRow>
27592
27852
  </div>
27593
27853
  </Col>
27594
27854
  </CapColumn>