@capillarytech/creatives-library 7.17.78 → 7.17.80

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 (7) hide show
  1. package/package.json +1 -1
  2. package/utils/common.js +9 -0
  3. package/utils/tests/common.test.js +14 -1
  4. package/v2Components/EmailMobilePreview/index.js +4 -2
  5. package/v2Components/EmailPreviewV2/index.js +4 -3
  6. package/v2Components/EmailPreviewV2/tests/__snapshots__/index.test.js.snap +0 -3
  7. package/v2Components/MobilePushPreviewV2/index.js +7 -6
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capillarytech/creatives-library",
3
3
  "author": "meharaj",
4
- "version": "7.17.78",
4
+ "version": "7.17.80",
5
5
  "description": "Capillary creatives ui",
6
6
  "main": "./index.js",
7
7
  "module": "./index.es.js",
package/utils/common.js CHANGED
@@ -51,6 +51,15 @@ export function removeLinksFromHtmlContent(content) {
51
51
  return copyContent;
52
52
  }
53
53
 
54
+ export function iframePreviewAdjustWidth(content) {
55
+ const doc = document.createElement('html');
56
+ doc.innerHTML = content;
57
+ let copyContent = doc.cloneNode(true).outerHTML;
58
+ copyContent = copyContent.replace(/<img /g, '<img width="310" ');
59
+ doc.remove();
60
+ return copyContent;
61
+ }
62
+
54
63
  export const hasStore2DoorFeature = Auth.hasFeatureAccess.bind(
55
64
  null,
56
65
  STORE2DOOR_PLUS_ENABLED,
package/utils/tests/common.test.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { FormattedMessage } from 'react-intl';
3
3
  import "@testing-library/jest-dom";
4
- import { filterTags, getTreeStructuredTags, handleInjectedData, intlKeyGenerator, bytes2Size, getUserNameById } from "../common";
4
+ import { filterTags, getTreeStructuredTags, handleInjectedData, intlKeyGenerator, bytes2Size, getUserNameById, iframePreviewAdjustWidth } from "../common";
5
5
  import * as mockdata from "./common.mockdata";
6
6
 
7
7
  describe("getTreeStructuredTags test", () => {
@@ -208,3 +208,16 @@ describe('bytes2Size', () => {
208
208
  expect(bytes2Size(1024, -3)).toBe('1 KB');
209
209
  });
210
210
  });
211
+
212
+ describe('iframeAdjustWidth', () => {
213
+ it("should Add the width in iframe image", () => {
214
+ const data = [
215
+ <head>
216
+ <meta httpEquiv="Content-Type" content="text/html; charset=utf-8">
217
+ <meta name="viewport" content="width=device-width">
218
+ </meta></meta></head>,
219
+
220
+ ];
221
+ expect(iframePreviewAdjustWidth(data)).toBe("<html><head></head><body>[object Object]</body></html>");
222
+ });
223
+ });
package/v2Components/EmailMobilePreview/index.js CHANGED
@@ -18,7 +18,7 @@ import EmailPreviewV2 from '../EmailPreviewV2';
18
18
  import messages from '../EmailPreviewV2/messages';
19
19
  import './index.scss';
20
20
  import mobileBody from '../../assets/DeviceForEmail.png';
21
- import { removeLinksFromHtmlContent } from './../../utils/common';
21
+ import { iframePreviewAdjustWidth, removeLinksFromHtmlContent } from './../../utils/common';
22
22
  import {selectTemplateContent} from '../../containers/Templates/selectors';
23
23
  import * as templateActions from '../../containers/Templates/actions';
24
24
 
@@ -68,6 +68,8 @@ class EmailMobilePreview extends React.Component {
68
68
  templateSubject,
69
69
  } = this.props;
70
70
  const copyContent = templateContent && removeLinksFromHtmlContent(templateContent);
71
+ const updateCopyContent = templateContent && iframePreviewAdjustWidth(copyContent);
72
+
71
73
  const { showAllDevices } = this.state;
72
74
 
73
75
  const emailSubjectLabel = templateSubject && (
@@ -98,7 +100,7 @@ class EmailMobilePreview extends React.Component {
98
100
  <img src={mobileBody} alt="capillary" width="386" />
99
101
  <div className={`${messageContainerName} ${emailSubjectLabel ? 'with-subject' : ''}`}>
100
102
  {emailSubjectLabel}
101
- <iframe srcDoc={copyContent} {...deviceAspectRatio.mobile} >
103
+ <iframe srcDoc={updateCopyContent} {...deviceAspectRatio.mobile} >
102
104
  <p><FormattedMessage {...messages.noIframeSupport}/></p>
103
105
  </iframe>
104
106
  </div>
package/v2Components/EmailPreviewV2/index.js CHANGED
@@ -19,7 +19,7 @@ import messages from './messages';
19
19
  import './_emailPreviewV2.scss';
20
20
  import tabletBody from '../../assets/iPad.svg';
21
21
  import mobileBody from '../../assets/DeviceForEmail.png';
22
- import { removeLinksFromHtmlContent } from './../../utils/common';
22
+ import { iframePreviewAdjustWidth, removeLinksFromHtmlContent } from './../../utils/common';
23
23
 
24
24
  import {selectTemplateContent} from '../../v2Containers/Templates/selectors';
25
25
  import * as templateActions from '../../v2Containers/Templates/actions';
@@ -72,7 +72,8 @@ export class EmailPreviewV2 extends React.Component {
72
72
  let messageContainerName = '';
73
73
  const {currentDevice} = this.state;
74
74
  const { templateContent, templateData = {}, templateSubject } = this.props;
75
- const copyContent = removeLinksFromHtmlContent(templateContent);
75
+ const copyContent = templateContent && removeLinksFromHtmlContent(templateContent);
76
+ const updateCopyContent = templateContent && iframePreviewAdjustWidth(copyContent);
76
77
  let subjectClassName = 'email-subject-desktop';
77
78
  if (currentDevice === devices.tablet) {
78
79
  messageContainerName = 'tablet-message-container';
@@ -88,7 +89,7 @@ export class EmailPreviewV2 extends React.Component {
88
89
  );
89
90
  const iframeDiv = (<div className={`${messageContainerName}`}>
90
91
  {emailSubjectLabel}
91
- <iframe srcDoc={copyContent} {...deviceAspectRatio[currentDevice](emailSubject)} >
92
+ <iframe srcDoc={updateCopyContent} {...deviceAspectRatio[currentDevice](emailSubject)} >
92
93
  <p><FormattedMessage {...messages.browserDoesntSupportIframe} /></p>
93
94
  </iframe>
94
95
  </div>);
package/v2Components/EmailPreviewV2/tests/__snapshots__/index.test.js.snap CHANGED
@@ -31,7 +31,6 @@ exports[`<EmailPreviewV2 /> <EmailPreviewV2 /> without the templateData 1`] = `
31
31
  >
32
32
  <iframe
33
33
  height="500"
34
- srcDoc="<html><head></head><body>undefined</body></html>"
35
34
  width="1024"
36
35
  >
37
36
  <p>
@@ -67,7 +66,6 @@ exports[`<EmailPreviewV2 /> <EmailPreviewV2 /> without the templateData 1`] = `
67
66
  >
68
67
  <iframe
69
68
  height="500"
70
- srcDoc="<html><head></head><body>undefined</body></html>"
71
69
  width="1024"
72
70
  >
73
71
  <p>
@@ -104,7 +102,6 @@ exports[`<EmailPreviewV2 /> <EmailPreviewV2 /> without the templateData 1`] = `
104
102
  >
105
103
  <iframe
106
104
  height="500"
107
- srcDoc="<html><head></head><body>undefined</body></html>"
108
105
  width="1024"
109
106
  >
110
107
  <p>
package/v2Components/MobilePushPreviewV2/index.js CHANGED
@@ -40,18 +40,19 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
40
40
  const iosContent = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
41
41
 
42
42
  const data = device === "android" ? androidContent : iosContent;
43
+ const { title = '', message = '', expandableDetails: { ctas = [], image = '' } = {}} = data || {};
43
44
  const content = {
44
- header: data?.title,
45
- bodyText: data?.message,
46
- bodyImage: data?.expandableDetails && data?.expandableDetails?.image,
45
+ header: title,
46
+ bodyText: message,
47
+ bodyImage: image,
47
48
  actions: [],
48
49
  appName: templateData?.appName,
49
50
  };
50
- if (data?.expandableDetails && data?.expandableDetails?.ctas && data?.expandableDetails?.ctas?.length) {
51
+ if (ctas && ctas?.length) {
51
52
  if (device === "android" ) {
52
- content.actions = map(data?.expandableDetails?.ctas, (cta) => ({label: cta?.actionText}));
53
+ content.actions = map(ctas, (cta) => ({label: cta?.actionText}));
53
54
  } else {
54
- content.actions = [{label: data?.expandableDetails?.ctas[0]?.actionLabel}, {label: data?.expandableDetails?.ctas[0]?.actionLabel2}];
55
+ content.actions = [{label: ctas[0]?.actionLabel}, {label: ctas[0]?.actionLabel2}];
55
56
  }
56
57
  }
57
58
  return content;