@capillarytech/creatives-library 7.12.21 → 7.12.22
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.
- package/package.json +1 -1
- package/v2Components/CapActionButton/index.js +3 -2
- package/v2Components/CapActionButton/tests/__snapshots__/index.test.js.snap +226 -0
- package/v2Components/CapActionButton/tests/index.test.js +42 -0
- package/v2Components/TemplatePreview/_templatePreview.scss +3 -0
- package/v2Components/TemplatePreview/index.js +27 -24
- package/v2Containers/CreativesContainer/SlideBoxContent.js +4 -1
- package/v2Containers/Rcs/index.js +3 -0
- package/v2Containers/Rcs/index.scss +4 -0
- package/v2Containers/Rcs/tests/mockData.js +16 -0
- package/v2Containers/Rcs/utils.js +7 -1
package/package.json
CHANGED
|
@@ -14,7 +14,7 @@ import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
|
|
|
14
14
|
import globalMessages from '../../v2Containers/Cap/messages';
|
|
15
15
|
import messages from './messages';
|
|
16
16
|
import './index.scss';
|
|
17
|
-
const CapActionButton = (props) => {
|
|
17
|
+
export const CapActionButton = (props) => {
|
|
18
18
|
const {
|
|
19
19
|
intl,
|
|
20
20
|
buttonTextlen,
|
|
@@ -106,9 +106,10 @@ const CapActionButton = (props) => {
|
|
|
106
106
|
|
|
107
107
|
CapActionButton.propTypes = {
|
|
108
108
|
intl: intlShape.isRequired,
|
|
109
|
-
buttonTextlen:
|
|
109
|
+
buttonTextlen: PropTypes.number,
|
|
110
110
|
type: PropTypes.string,
|
|
111
111
|
updateButtonChange: PropTypes.fun,
|
|
112
112
|
suggestions: PropTypes.array,
|
|
113
113
|
};
|
|
114
|
+
|
|
114
115
|
export default injectIntl(CapActionButton);
|
|
@@ -0,0 +1,226 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`CapActionButton test Test if CapActionButton component renders 1`] = `
|
|
4
|
+
<CapRow
|
|
5
|
+
className="cap-action-button"
|
|
6
|
+
>
|
|
7
|
+
<CapHeading
|
|
8
|
+
type="h4"
|
|
9
|
+
>
|
|
10
|
+
<FormattedMessage
|
|
11
|
+
defaultMessage="Button text"
|
|
12
|
+
id="creatives.componentsV2.CapActionButton.templateButtonText"
|
|
13
|
+
values={Object {}}
|
|
14
|
+
/>
|
|
15
|
+
</CapHeading>
|
|
16
|
+
<_class
|
|
17
|
+
id="rcs-template-Button-Text"
|
|
18
|
+
labelPosition="top"
|
|
19
|
+
maxLength={200}
|
|
20
|
+
onChange={[Function]}
|
|
21
|
+
placeholder="Enter button text"
|
|
22
|
+
size="default"
|
|
23
|
+
suffix={
|
|
24
|
+
<CapLabel
|
|
25
|
+
type="label1"
|
|
26
|
+
>
|
|
27
|
+
4 / 200
|
|
28
|
+
</CapLabel>
|
|
29
|
+
}
|
|
30
|
+
value="text"
|
|
31
|
+
/>
|
|
32
|
+
<CapHeading
|
|
33
|
+
style={
|
|
34
|
+
Object {
|
|
35
|
+
"paddingTop": "20px",
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
type="h4"
|
|
39
|
+
>
|
|
40
|
+
<FormattedMessage
|
|
41
|
+
defaultMessage="Button link"
|
|
42
|
+
id="creatives.componentsV2.CapActionButton.templateButtonLink"
|
|
43
|
+
values={Object {}}
|
|
44
|
+
/>
|
|
45
|
+
</CapHeading>
|
|
46
|
+
<_class
|
|
47
|
+
errorMessage={false}
|
|
48
|
+
id="rcs-template-Button-link"
|
|
49
|
+
labelPosition="top"
|
|
50
|
+
onChange={[Function]}
|
|
51
|
+
placeholder="Enter button link"
|
|
52
|
+
size="default"
|
|
53
|
+
value="url"
|
|
54
|
+
/>
|
|
55
|
+
<CapDivider
|
|
56
|
+
style={
|
|
57
|
+
Object {
|
|
58
|
+
"marginBottom": 16,
|
|
59
|
+
"marginTop": 23,
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
/>
|
|
63
|
+
<CapTooltip
|
|
64
|
+
placement="topLeft"
|
|
65
|
+
title="Not enabled yet. Coming soon!"
|
|
66
|
+
>
|
|
67
|
+
<CapButton
|
|
68
|
+
className="disabled-button"
|
|
69
|
+
isAddBtn={true}
|
|
70
|
+
type="flat"
|
|
71
|
+
>
|
|
72
|
+
Add button
|
|
73
|
+
</CapButton>
|
|
74
|
+
</CapTooltip>
|
|
75
|
+
</CapRow>
|
|
76
|
+
`;
|
|
77
|
+
|
|
78
|
+
exports[`CapActionButton test Test if CapActionButton component renders 2`] = `
|
|
79
|
+
<CapRow
|
|
80
|
+
className="cap-action-button"
|
|
81
|
+
>
|
|
82
|
+
<CapHeading
|
|
83
|
+
type="h4"
|
|
84
|
+
>
|
|
85
|
+
<FormattedMessage
|
|
86
|
+
defaultMessage="Button text"
|
|
87
|
+
id="creatives.componentsV2.CapActionButton.templateButtonText"
|
|
88
|
+
values={Object {}}
|
|
89
|
+
/>
|
|
90
|
+
</CapHeading>
|
|
91
|
+
<_class
|
|
92
|
+
id="rcs-template-Button-Text"
|
|
93
|
+
labelPosition="top"
|
|
94
|
+
maxLength={200}
|
|
95
|
+
onChange={[Function]}
|
|
96
|
+
placeholder="Enter button text"
|
|
97
|
+
size="default"
|
|
98
|
+
suffix={
|
|
99
|
+
<CapLabel
|
|
100
|
+
type="label1"
|
|
101
|
+
>
|
|
102
|
+
9 / 200
|
|
103
|
+
</CapLabel>
|
|
104
|
+
}
|
|
105
|
+
value="testValue"
|
|
106
|
+
/>
|
|
107
|
+
<CapHeading
|
|
108
|
+
style={
|
|
109
|
+
Object {
|
|
110
|
+
"paddingTop": "20px",
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
type="h4"
|
|
114
|
+
>
|
|
115
|
+
<FormattedMessage
|
|
116
|
+
defaultMessage="Button link"
|
|
117
|
+
id="creatives.componentsV2.CapActionButton.templateButtonLink"
|
|
118
|
+
values={Object {}}
|
|
119
|
+
/>
|
|
120
|
+
</CapHeading>
|
|
121
|
+
<_class
|
|
122
|
+
errorMessage="Button URL is not valid"
|
|
123
|
+
id="rcs-template-Button-link"
|
|
124
|
+
labelPosition="top"
|
|
125
|
+
onChange={[Function]}
|
|
126
|
+
placeholder="Enter button link"
|
|
127
|
+
size="default"
|
|
128
|
+
value="testValue"
|
|
129
|
+
/>
|
|
130
|
+
<CapDivider
|
|
131
|
+
style={
|
|
132
|
+
Object {
|
|
133
|
+
"marginBottom": 16,
|
|
134
|
+
"marginTop": 23,
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
/>
|
|
138
|
+
<CapTooltip
|
|
139
|
+
placement="topLeft"
|
|
140
|
+
title="Not enabled yet. Coming soon!"
|
|
141
|
+
>
|
|
142
|
+
<CapButton
|
|
143
|
+
className="disabled-button"
|
|
144
|
+
isAddBtn={true}
|
|
145
|
+
type="flat"
|
|
146
|
+
>
|
|
147
|
+
Add button
|
|
148
|
+
</CapButton>
|
|
149
|
+
</CapTooltip>
|
|
150
|
+
</CapRow>
|
|
151
|
+
`;
|
|
152
|
+
|
|
153
|
+
exports[`CapActionButton test Test if CapActionButton component renders 3`] = `
|
|
154
|
+
<CapRow
|
|
155
|
+
className="cap-action-button"
|
|
156
|
+
>
|
|
157
|
+
<CapHeading
|
|
158
|
+
type="h4"
|
|
159
|
+
>
|
|
160
|
+
<FormattedMessage
|
|
161
|
+
defaultMessage="Button text"
|
|
162
|
+
id="creatives.componentsV2.CapActionButton.templateButtonText"
|
|
163
|
+
values={Object {}}
|
|
164
|
+
/>
|
|
165
|
+
</CapHeading>
|
|
166
|
+
<_class
|
|
167
|
+
id="rcs-template-Button-Text"
|
|
168
|
+
labelPosition="top"
|
|
169
|
+
maxLength={200}
|
|
170
|
+
onChange={[Function]}
|
|
171
|
+
placeholder="Enter button text"
|
|
172
|
+
size="default"
|
|
173
|
+
suffix={
|
|
174
|
+
<CapLabel
|
|
175
|
+
type="label1"
|
|
176
|
+
>
|
|
177
|
+
9 / 200
|
|
178
|
+
</CapLabel>
|
|
179
|
+
}
|
|
180
|
+
value="testValue"
|
|
181
|
+
/>
|
|
182
|
+
<CapHeading
|
|
183
|
+
style={
|
|
184
|
+
Object {
|
|
185
|
+
"paddingTop": "20px",
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
type="h4"
|
|
189
|
+
>
|
|
190
|
+
<FormattedMessage
|
|
191
|
+
defaultMessage="Button link"
|
|
192
|
+
id="creatives.componentsV2.CapActionButton.templateButtonLink"
|
|
193
|
+
values={Object {}}
|
|
194
|
+
/>
|
|
195
|
+
</CapHeading>
|
|
196
|
+
<_class
|
|
197
|
+
errorMessage={false}
|
|
198
|
+
id="rcs-template-Button-link"
|
|
199
|
+
labelPosition="top"
|
|
200
|
+
onChange={[Function]}
|
|
201
|
+
placeholder="Enter button link"
|
|
202
|
+
size="default"
|
|
203
|
+
value="https://www.google.com"
|
|
204
|
+
/>
|
|
205
|
+
<CapDivider
|
|
206
|
+
style={
|
|
207
|
+
Object {
|
|
208
|
+
"marginBottom": 16,
|
|
209
|
+
"marginTop": 23,
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
/>
|
|
213
|
+
<CapTooltip
|
|
214
|
+
placement="topLeft"
|
|
215
|
+
title="Not enabled yet. Coming soon!"
|
|
216
|
+
>
|
|
217
|
+
<CapButton
|
|
218
|
+
className="disabled-button"
|
|
219
|
+
isAddBtn={true}
|
|
220
|
+
type="flat"
|
|
221
|
+
>
|
|
222
|
+
Add button
|
|
223
|
+
</CapButton>
|
|
224
|
+
</CapTooltip>
|
|
225
|
+
</CapRow>
|
|
226
|
+
`;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { CapActionButton } from "../index";
|
|
3
|
+
import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
|
|
4
|
+
|
|
5
|
+
describe("CapActionButton test", () => {
|
|
6
|
+
let renderedComponent;
|
|
7
|
+
beforeEach(() => {
|
|
8
|
+
renderedComponent = shallowWithIntl(
|
|
9
|
+
<CapActionButton
|
|
10
|
+
type="CTA"
|
|
11
|
+
buttonTextlen={200}
|
|
12
|
+
updateButtonChange={() => {}}
|
|
13
|
+
suggestions={[{text: "text", url: 'url'}]}
|
|
14
|
+
/>
|
|
15
|
+
);
|
|
16
|
+
});
|
|
17
|
+
it("Test if CapActionButton component renders", () => {
|
|
18
|
+
expect(renderedComponent).toMatchSnapshot();
|
|
19
|
+
const event = {
|
|
20
|
+
target: {
|
|
21
|
+
value: 'testValue',
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
const linkEvent = {
|
|
25
|
+
target: {
|
|
26
|
+
value: 'https://www.google.com',
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
renderedComponent
|
|
30
|
+
.find('#rcs-template-Button-Text')
|
|
31
|
+
.simulate('change', event);
|
|
32
|
+
|
|
33
|
+
renderedComponent
|
|
34
|
+
.find('#rcs-template-Button-link')
|
|
35
|
+
.simulate('change', event);
|
|
36
|
+
|
|
37
|
+
renderedComponent
|
|
38
|
+
.find('#rcs-template-Button-link')
|
|
39
|
+
.simulate('change', linkEvent);
|
|
40
|
+
expect(renderedComponent).toMatchSnapshot();
|
|
41
|
+
});
|
|
42
|
+
});
|
|
@@ -22,7 +22,7 @@ import {
|
|
|
22
22
|
import Carousel from '../Carousel';
|
|
23
23
|
import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
|
|
24
24
|
import { UNSUBSCRIBE_TEXT_LENGTH } from '../../v2Containers/Whatsapp/constants';
|
|
25
|
-
import whatsappMobileAndroid from './assets/images/whatsapp_mobile_android.svg'
|
|
25
|
+
import whatsappMobileAndroid from './assets/images/whatsapp_mobile_android.svg';
|
|
26
26
|
const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
|
|
27
27
|
const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
|
|
28
28
|
const smsMobileIos = require('./assets/images/sms_mobile_ios.svg');
|
|
@@ -35,7 +35,7 @@ const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
|
|
|
35
35
|
const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
|
|
36
36
|
const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
|
|
37
37
|
|
|
38
|
-
import {
|
|
38
|
+
import {
|
|
39
39
|
CAP_COLOR_03,
|
|
40
40
|
CAP_WHITE,
|
|
41
41
|
FONT_COLOR_01,
|
|
@@ -150,7 +150,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
150
150
|
|
|
151
151
|
render() {
|
|
152
152
|
let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
|
|
153
|
-
const {
|
|
153
|
+
const {
|
|
154
154
|
channel,
|
|
155
155
|
showTestAndPreviewIcon,
|
|
156
156
|
module,
|
|
@@ -164,7 +164,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
164
164
|
} = this.props;
|
|
165
165
|
const { formatMessage } = intl;
|
|
166
166
|
const { buttonText, imageURL, rcsPreviewContent, messageContent: viberMessageContent } = content || {};
|
|
167
|
-
const { rcsImageSrc, rcsTitle, rcsDesc } = rcsPreviewContent || {};
|
|
167
|
+
const { rcsImageSrc, rcsTitle, rcsDesc, buttonText: rcsButtonText } = rcsPreviewContent || {};
|
|
168
168
|
let smsDetails = {};
|
|
169
169
|
// let smsText = '';
|
|
170
170
|
if (this.props.content && this.props.charCounterEnabled) {
|
|
@@ -315,7 +315,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
315
315
|
{channel?.toLowerCase() === WHATSAPP.toLowerCase() ? (
|
|
316
316
|
<>
|
|
317
317
|
<WhatsappStatusContainer template={templateData} />
|
|
318
|
-
<CapHeading type="h3" className=
|
|
318
|
+
<CapHeading type="h3" className="margin-t-12">
|
|
319
319
|
<FormattedMessage {...messages.whatsappCharactersTotal} values={{charCount: whatsappUpdatedLen}} />
|
|
320
320
|
</CapHeading>
|
|
321
321
|
<CapHeading type="h6">
|
|
@@ -388,7 +388,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
388
388
|
{channel && channel.toLowerCase() === 'wechat' ?
|
|
389
389
|
( <div className="shell-v2 align-center" id="sms-preview">
|
|
390
390
|
<CapImage className="preview-image" src={(channel || '').toLowerCase() === 'wechat' ? wechatBodyNew : smsMobileAndroid} alt="Preview is being generated"/>
|
|
391
|
-
|
|
391
|
+
<div className="msg-container wechat">
|
|
392
392
|
<div className="message-pop align-left" style={{ background: `${this.props.channel.toLowerCase() === 'wechat' ? '#ffffff' : '#3F51B5'}`, color: `${this.props.channel.toLowerCase() === 'wechat' ? '#333333' : '#ffffff'}`}}>{content}
|
|
393
393
|
</div>
|
|
394
394
|
</div>
|
|
@@ -448,7 +448,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
448
448
|
<div className="shell-v2 align-center" id="sms-preview">
|
|
449
449
|
<CapImage className="preview-image" src={lineMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
|
|
450
450
|
<div
|
|
451
|
-
|
|
451
|
+
className="msg-container line-preview"
|
|
452
452
|
style={{
|
|
453
453
|
maxHeight: 330,
|
|
454
454
|
overflow: 'auto',
|
|
@@ -617,7 +617,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
617
617
|
<CapImage className="preview-image" src={viberMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
|
|
618
618
|
<div style={{ position: 'absolute', top: '12%', left: '36%'}}>{viberBrandName}</div>
|
|
619
619
|
<div
|
|
620
|
-
|
|
620
|
+
className="msg-container viber-preview"
|
|
621
621
|
style={{
|
|
622
622
|
maxHeight: 292,
|
|
623
623
|
marginLeft: 28,
|
|
@@ -694,27 +694,27 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
694
694
|
{
|
|
695
695
|
channel?.toUpperCase() === WHATSAPP ? (
|
|
696
696
|
<>
|
|
697
|
-
<div className=
|
|
697
|
+
<div className="shell-v2 align-center">
|
|
698
698
|
<CapImage
|
|
699
|
-
className=
|
|
699
|
+
className="preview-image"
|
|
700
700
|
src={whatsappMobileAndroid}
|
|
701
701
|
alt={formatMessage(messages.previewGenerated)}
|
|
702
702
|
/>
|
|
703
|
-
<CapLabel className=
|
|
703
|
+
<CapLabel className="whatsapp-brand-name">
|
|
704
704
|
{whatsappUpdatedAccountName || ''}
|
|
705
705
|
</CapLabel>
|
|
706
|
-
<div className=
|
|
707
|
-
<div className=
|
|
708
|
-
<CapLabel className=
|
|
706
|
+
<div className="msg-container whatsapp-message-container">
|
|
707
|
+
<div className="message-pop align-left" style={whatsappSectionStyle}>
|
|
708
|
+
<CapLabel className="whatsapp-content">
|
|
709
709
|
{content?.templateMsg || ''}
|
|
710
710
|
</CapLabel>
|
|
711
711
|
</div>
|
|
712
712
|
</div>
|
|
713
713
|
</div>
|
|
714
714
|
<CapHeading
|
|
715
|
-
type=
|
|
715
|
+
type="h3"
|
|
716
716
|
style={{ textAlign: 'center' }}
|
|
717
|
-
className=
|
|
717
|
+
className="margin-t-16"
|
|
718
718
|
>
|
|
719
719
|
<FormattedMessage
|
|
720
720
|
{...messages.whatsappMessageLength}
|
|
@@ -728,35 +728,38 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
728
728
|
}
|
|
729
729
|
{
|
|
730
730
|
channel?.toUpperCase() === RCS && (
|
|
731
|
-
<div className=
|
|
731
|
+
<div className="shell-v2 align-center">
|
|
732
732
|
<CapImage
|
|
733
|
-
className=
|
|
733
|
+
className="preview-image"
|
|
734
734
|
src={rcsIosPreview ? smsMobileIos : smsMobileAndroid}
|
|
735
735
|
alt={formatMessage(messages.previewGenerated)}
|
|
736
736
|
/>
|
|
737
|
-
<div className=
|
|
738
|
-
<div className=
|
|
737
|
+
<div className="msg-container sms">
|
|
738
|
+
<div className="message-pop sms">
|
|
739
739
|
{rcsImageSrc && (
|
|
740
740
|
<CapImage
|
|
741
741
|
src={rcsImageSrc}
|
|
742
|
-
className=
|
|
742
|
+
className="rcs-image"
|
|
743
743
|
alt={formatMessage(messages.previewGenerated)}
|
|
744
744
|
/>
|
|
745
745
|
)}
|
|
746
746
|
{rcsTitle && (
|
|
747
747
|
<CapLabel
|
|
748
748
|
type="label5"
|
|
749
|
-
className=
|
|
750
|
-
fontWeight=
|
|
749
|
+
className="message-pop-item align-left rcs-content"
|
|
750
|
+
fontWeight="bold"
|
|
751
751
|
>
|
|
752
752
|
{rcsTitle}
|
|
753
753
|
</CapLabel>
|
|
754
754
|
)}
|
|
755
755
|
{rcsDesc && (
|
|
756
|
-
<CapLabel type="label5" className=
|
|
756
|
+
<CapLabel type="label5" className="message-pop-item align-left rcs-content rcs-desc">
|
|
757
757
|
{rcsDesc}
|
|
758
758
|
</CapLabel>
|
|
759
759
|
)}
|
|
760
|
+
{rcsButtonText && (<CapLabel className="message-pop-item align-center rcs-content rcs-button-text" type="label21">
|
|
761
|
+
<CapIcon type="earth" size="xs" svgProps={{style: {marginRight: "4px"}}}/>{rcsButtonText}
|
|
762
|
+
</CapLabel>)}
|
|
760
763
|
</div>
|
|
761
764
|
</div>
|
|
762
765
|
</div>
|
|
@@ -339,12 +339,15 @@ export function SlideBoxContent(props) {
|
|
|
339
339
|
}
|
|
340
340
|
case constants.RCS: {
|
|
341
341
|
const template = cloneDeep(templateDataObject);
|
|
342
|
-
const { description = "", media: { mediaUrl = "" } = {}, title = "" } = get(template, 'versions.base.content.RCS.cardContent[0]', {});
|
|
342
|
+
const { description = "", media: { mediaUrl = "" } = {}, title = "", suggestions = [] } = get(template, 'versions.base.content.RCS.cardContent[0]', {});
|
|
343
343
|
return {
|
|
344
344
|
rcsPreviewContent: {
|
|
345
345
|
rcsImageSrc: mediaUrl,
|
|
346
346
|
rcsTitle: title,
|
|
347
347
|
rcsDesc: description,
|
|
348
|
+
...(suggestions.length > 0 && {
|
|
349
|
+
buttonText: suggestions[0]?.text,
|
|
350
|
+
}),
|
|
348
351
|
},
|
|
349
352
|
};
|
|
350
353
|
}
|
|
@@ -19,8 +19,14 @@ export const mockData = {
|
|
|
19
19
|
'https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/62f8c77c-f132-44d8-a822-0e90f57c.jpg',
|
|
20
20
|
height: 'MEDIUM',
|
|
21
21
|
},
|
|
22
|
+
suggestions: [{
|
|
23
|
+
type: "CTA",
|
|
24
|
+
text: "text",
|
|
25
|
+
url: "url",
|
|
26
|
+
}],
|
|
22
27
|
},
|
|
23
28
|
],
|
|
29
|
+
|
|
24
30
|
cardSettings: {
|
|
25
31
|
cardOrientation: 'VERTICAL',
|
|
26
32
|
},
|
|
@@ -60,6 +66,11 @@ export const mockData = {
|
|
|
60
66
|
mediaUrl: '',
|
|
61
67
|
height: 'MEDIUM',
|
|
62
68
|
},
|
|
69
|
+
suggestions: [{
|
|
70
|
+
type: "CTA",
|
|
71
|
+
text: "text",
|
|
72
|
+
url: "url",
|
|
73
|
+
}],
|
|
63
74
|
},
|
|
64
75
|
],
|
|
65
76
|
cardSettings: {
|
|
@@ -103,6 +114,11 @@ export const mockData = {
|
|
|
103
114
|
'https://s3.amazonaws.com/test_files_cache_bkp/intouch_creative_assets/8fcb2fdce8f92e4a48d4.png',
|
|
104
115
|
height: 'MEDIUM',
|
|
105
116
|
},
|
|
117
|
+
suggestions: [{
|
|
118
|
+
type: "CTA",
|
|
119
|
+
text: "text",
|
|
120
|
+
url: "url",
|
|
121
|
+
}],
|
|
106
122
|
},
|
|
107
123
|
],
|
|
108
124
|
cardSettings: {
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
|
|
3
3
|
import CapImage from '@capillarytech/cap-ui-library/CapImage';
|
|
4
|
+
import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
|
|
5
|
+
|
|
4
6
|
import { RCS } from '../CreativesContainer/constants';
|
|
5
7
|
import './index.scss';
|
|
6
8
|
export const getRCSContent = (template) => {
|
|
@@ -15,7 +17,8 @@ export const getRCSContent = (template) => {
|
|
|
15
17
|
} = {},
|
|
16
18
|
} = {},
|
|
17
19
|
} = template;
|
|
18
|
-
const { media = {}, description, title } = cardContent[0];
|
|
20
|
+
const { media = {}, description, title, suggestions = []} = cardContent[0];
|
|
21
|
+
const {text: rcsButtonText} = suggestions[0] || {};
|
|
19
22
|
const { mediaUrl } = media;
|
|
20
23
|
return (
|
|
21
24
|
<div className="cap-rcs-creatives">
|
|
@@ -35,6 +38,9 @@ export const getRCSContent = (template) => {
|
|
|
35
38
|
<CapLabel type="label19" className="rcs-listing-content desc">
|
|
36
39
|
{description}
|
|
37
40
|
</CapLabel>
|
|
41
|
+
{rcsButtonText && (<CapLabel className="rcs-listing-content rcs-button-text" type="label21">
|
|
42
|
+
<CapIcon type="earth" size="xs" svgProps={{style: {marginRight: "4px"}}}/>{rcsButtonText}
|
|
43
|
+
</CapLabel>)}
|
|
38
44
|
</div>
|
|
39
45
|
);
|
|
40
46
|
};
|