@capillarytech/creatives-library 9.0.13-alpha.1 → 9.0.13
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/CommonTestAndPreview/UnifiedPreview/ViberPreviewContent.js +15 -108
- package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +1 -141
- package/v2Components/CommonTestAndPreview/index.js +26 -244
- package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/ViberPreviewContent.test.js +0 -364
- package/v2Components/ErrorInfoNote/index.js +1 -1
- package/v2Components/ErrorInfoNote/style.scss +3 -0
- package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/content.test.js.snap +216 -96
- package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/index.test.js.snap +37 -17
- package/v2Containers/Line/Container/Wrapper/tests/__snapshots__/index.test.js.snap +77 -37
- package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap +530 -250
- package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap +3 -3
- package/v2Containers/Templates/_templates.scss +1 -84
- package/v2Containers/Templates/index.js +10 -90
- package/v2Containers/Viber/constants.js +0 -21
- package/v2Containers/Viber/index.js +49 -719
- package/v2Containers/Viber/index.scss +0 -175
- package/v2Containers/Viber/messages.js +0 -121
- package/v2Containers/Viber/tests/index.test.js +0 -80
- package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +2645 -11346
- package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberCarouselPreviewCards.js +0 -132
- package/v2Components/CommonTestAndPreview/UnifiedPreview/_viberCarouselPreviewCards.scss +0 -132
|
@@ -4622,7 +4622,7 @@ FREE GIFTS-
|
|
|
4622
4622
|
}
|
|
4623
4623
|
>
|
|
4624
4624
|
<div
|
|
4625
|
-
className="cap-checkbox-wrapper"
|
|
4625
|
+
className="cap-checkbox-v2 cap-checkbox-wrapper"
|
|
4626
4626
|
>
|
|
4627
4627
|
<div
|
|
4628
4628
|
className=""
|
|
@@ -16334,7 +16334,7 @@ FREE GIFTS-
|
|
|
16334
16334
|
}
|
|
16335
16335
|
>
|
|
16336
16336
|
<div
|
|
16337
|
-
className="cap-checkbox-wrapper"
|
|
16337
|
+
className="cap-checkbox-v2 cap-checkbox-wrapper"
|
|
16338
16338
|
>
|
|
16339
16339
|
<div
|
|
16340
16340
|
className=""
|
|
@@ -28310,7 +28310,7 @@ FREE GIFTS-
|
|
|
28310
28310
|
}
|
|
28311
28311
|
>
|
|
28312
28312
|
<div
|
|
28313
|
-
className="cap-checkbox-wrapper"
|
|
28313
|
+
className="cap-checkbox-v2 cap-checkbox-wrapper"
|
|
28314
28314
|
>
|
|
28315
28315
|
<div
|
|
28316
28316
|
className=""
|
|
@@ -153,89 +153,6 @@
|
|
|
153
153
|
line-clamp: 3;
|
|
154
154
|
}
|
|
155
155
|
}
|
|
156
|
-
.viber-carousel-static-content {
|
|
157
|
-
width: 100%;
|
|
158
|
-
overflow: hidden;
|
|
159
|
-
.viber-carousel-static-message-box {
|
|
160
|
-
width: 100%;
|
|
161
|
-
min-height: 2.25rem;
|
|
162
|
-
height: auto;
|
|
163
|
-
border-radius: $CAP_SPACE_04;
|
|
164
|
-
background: $CAP_WHITE;
|
|
165
|
-
margin-bottom: $CAP_SPACE_08;
|
|
166
|
-
padding: $CAP_SPACE_04 $CAP_SPACE_08;
|
|
167
|
-
display: flex;
|
|
168
|
-
align-items: flex-start;
|
|
169
|
-
}
|
|
170
|
-
.viber-carousel-static-message {
|
|
171
|
-
display: -webkit-box;
|
|
172
|
-
width: 100%;
|
|
173
|
-
color: $CAP_G01;
|
|
174
|
-
line-height: 1.3;
|
|
175
|
-
overflow: hidden;
|
|
176
|
-
text-overflow: ellipsis;
|
|
177
|
-
-webkit-line-clamp: 2;
|
|
178
|
-
line-clamp: 2;
|
|
179
|
-
-webkit-box-orient: vertical;
|
|
180
|
-
white-space: normal;
|
|
181
|
-
word-break: break-word;
|
|
182
|
-
}
|
|
183
|
-
.viber-carousel-static-cards {
|
|
184
|
-
display: flex;
|
|
185
|
-
gap: $CAP_SPACE_08;
|
|
186
|
-
overflow: hidden;
|
|
187
|
-
}
|
|
188
|
-
.viber-carousel-static-card {
|
|
189
|
-
flex: 1;
|
|
190
|
-
min-width: 0;
|
|
191
|
-
background: $CAP_WHITE;
|
|
192
|
-
border-radius: $CAP_SPACE_04;
|
|
193
|
-
padding: $CAP_SPACE_06;
|
|
194
|
-
overflow: hidden;
|
|
195
|
-
}
|
|
196
|
-
.viber-carousel-static-image,
|
|
197
|
-
.viber-carousel-static-image-placeholder {
|
|
198
|
-
width: 100%;
|
|
199
|
-
height: 5.357rem;
|
|
200
|
-
border-radius: $CAP_SPACE_04;
|
|
201
|
-
}
|
|
202
|
-
.viber-carousel-static-image {
|
|
203
|
-
object-fit: cover;
|
|
204
|
-
}
|
|
205
|
-
.viber-carousel-static-image-placeholder {
|
|
206
|
-
background: $CAP_G07;
|
|
207
|
-
}
|
|
208
|
-
.viber-carousel-static-text {
|
|
209
|
-
display: block;
|
|
210
|
-
color: $CAP_G01;
|
|
211
|
-
margin: $CAP_SPACE_04 0;
|
|
212
|
-
line-height: 1.3;
|
|
213
|
-
overflow: hidden;
|
|
214
|
-
text-overflow: ellipsis;
|
|
215
|
-
white-space: normal;
|
|
216
|
-
}
|
|
217
|
-
.viber-carousel-static-buttons {
|
|
218
|
-
display: flex;
|
|
219
|
-
flex-direction: column;
|
|
220
|
-
gap: $CAP_SPACE_04;
|
|
221
|
-
}
|
|
222
|
-
.viber-carousel-static-button {
|
|
223
|
-
display: block;
|
|
224
|
-
min-height: 1.5rem;
|
|
225
|
-
border-radius: $CAP_SPACE_12;
|
|
226
|
-
background: $CAP_PURPLE01;
|
|
227
|
-
color: $CAP_WHITE;
|
|
228
|
-
text-align: center;
|
|
229
|
-
padding: 0.179rem $CAP_SPACE_08;
|
|
230
|
-
white-space: normal;
|
|
231
|
-
}
|
|
232
|
-
.viber-carousel-static-button-secondary {
|
|
233
|
-
color: $CAP_PURPLE01;
|
|
234
|
-
background: transparent;
|
|
235
|
-
border: none;
|
|
236
|
-
box-shadow: none;
|
|
237
|
-
}
|
|
238
|
-
}
|
|
239
156
|
|
|
240
157
|
}
|
|
241
158
|
|
|
@@ -577,7 +494,7 @@
|
|
|
577
494
|
}
|
|
578
495
|
|
|
579
496
|
.cap-link-v2-suffix {
|
|
580
|
-
margin-top:
|
|
497
|
+
margin-top: $CAP_SPACE_04;
|
|
581
498
|
}
|
|
582
499
|
}
|
|
583
500
|
}
|
|
@@ -73,7 +73,6 @@ import * as ebillActions from '../Ebill/actions';
|
|
|
73
73
|
import * as emailActions from '../Email/actions';
|
|
74
74
|
import * as lineActions from '../Line/Container/actions';
|
|
75
75
|
import * as viberActions from '../Viber/actions';
|
|
76
|
-
import { VIBER_MEDIA_TYPES } from '../Viber/constants';
|
|
77
76
|
import * as facebookActions from '../Facebook/actions';
|
|
78
77
|
import * as whatsappActions from '../Whatsapp/actions';
|
|
79
78
|
import * as rcsActions from '../Rcs/actions';
|
|
@@ -1378,11 +1377,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1378
1377
|
const image = viberContent.image || {};
|
|
1379
1378
|
const video = viberContent.video || {};
|
|
1380
1379
|
const button = viberContent.button || {};
|
|
1381
|
-
const messageType = viberContent.type || '';
|
|
1382
|
-
const cardsRaw = viberContent.cards;
|
|
1383
|
-
const cards = Array.isArray(cardsRaw) ? cardsRaw : [];
|
|
1384
|
-
const isCarousel =
|
|
1385
|
-
messageType === VIBER_MEDIA_TYPES.CAROUSEL || cards.length > 0;
|
|
1386
1380
|
|
|
1387
1381
|
const viberPreview = {
|
|
1388
1382
|
messageContent: text,
|
|
@@ -1400,39 +1394,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1400
1394
|
};
|
|
1401
1395
|
}
|
|
1402
1396
|
|
|
1403
|
-
if (isCarousel) {
|
|
1404
|
-
viberPreview.type = VIBER_MEDIA_TYPES.CAROUSEL;
|
|
1405
|
-
viberPreview.cards = cards.map((card) => ({
|
|
1406
|
-
text: card?.text || '',
|
|
1407
|
-
mediaUrl: card?.mediaUrl || '',
|
|
1408
|
-
buttons: (card?.buttons || []).map((btn) => ({
|
|
1409
|
-
title: btn?.title || '',
|
|
1410
|
-
action: btn?.action || '',
|
|
1411
|
-
})),
|
|
1412
|
-
}));
|
|
1413
|
-
viberPreview.showCarouselEditorPreview = true;
|
|
1414
|
-
}
|
|
1415
|
-
|
|
1416
1397
|
// Extract account name
|
|
1417
1398
|
const accountName = get(template, 'definition.accountName', '');
|
|
1418
1399
|
|
|
1419
1400
|
// Return Viber content object (same as Viber/index.js getTemplateContent)
|
|
1420
1401
|
return {
|
|
1421
1402
|
viberPreviewContent: viberPreview,
|
|
1422
|
-
accountName: accountName
|
|
1423
|
-
brandName: accountName
|
|
1424
|
-
messageContent: text,
|
|
1425
|
-
...(isCarousel && {
|
|
1426
|
-
type: VIBER_MEDIA_TYPES.CAROUSEL,
|
|
1427
|
-
cards: viberPreview.cards,
|
|
1428
|
-
}),
|
|
1429
|
-
...(!isCarousel && !isEmpty(button) && button.text && (button.url || viberContent.buttonURL) && {
|
|
1430
|
-
button: {
|
|
1431
|
-
text: button.text,
|
|
1432
|
-
url: button.url || viberContent.buttonURL || '',
|
|
1433
|
-
},
|
|
1434
|
-
}),
|
|
1435
|
-
buttonURL: button.url || viberContent.buttonURL || '',
|
|
1403
|
+
accountName: accountName ? [accountName] : [],
|
|
1404
|
+
brandName: accountName ? [accountName] : [],
|
|
1436
1405
|
};
|
|
1437
1406
|
}
|
|
1438
1407
|
|
|
@@ -2445,52 +2414,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
2445
2414
|
image = {},
|
|
2446
2415
|
button = {},
|
|
2447
2416
|
video = {},
|
|
2448
|
-
type = '',
|
|
2449
|
-
cards = [],
|
|
2450
2417
|
} = {},
|
|
2451
2418
|
} = {},
|
|
2452
2419
|
} = template.versions.base;
|
|
2453
|
-
const isViberCarousel = type === VIBER_MEDIA_TYPES.CAROUSEL;
|
|
2454
2420
|
templateData.content = text;
|
|
2455
|
-
if (isViberCarousel) {
|
|
2456
|
-
const previewCards = Array.isArray(cards) ? cards.slice(0, 1) : [];
|
|
2457
|
-
templateData.className = 'viber-carousel-static';
|
|
2458
|
-
templateData.content = (
|
|
2459
|
-
<CapRow className="viber-carousel-static-content">
|
|
2460
|
-
<CapRow className="viber-carousel-static-message-box">
|
|
2461
|
-
<CapLabel type="label1" className="viber-carousel-static-message">
|
|
2462
|
-
{text}
|
|
2463
|
-
</CapLabel>
|
|
2464
|
-
</CapRow>
|
|
2465
|
-
<CapRow className="viber-carousel-static-cards">
|
|
2466
|
-
{previewCards.map((card, cardIdx) => (
|
|
2467
|
-
<CapRow className="viber-carousel-static-card" key={`viber-static-card-${cardIdx}`}>
|
|
2468
|
-
{card?.mediaUrl ? (
|
|
2469
|
-
<CapImage src={card.mediaUrl} className="viber-carousel-static-image" />
|
|
2470
|
-
) : (
|
|
2471
|
-
<CapRow className="viber-carousel-static-image-placeholder" />
|
|
2472
|
-
)}
|
|
2473
|
-
<CapLabel type="label1" className="viber-carousel-static-text">
|
|
2474
|
-
{card?.text}
|
|
2475
|
-
</CapLabel>
|
|
2476
|
-
<CapRow className="viber-carousel-static-buttons">
|
|
2477
|
-
{(Array.isArray(card?.buttons) && card.buttons.length ? card.buttons : [{}, {}]).slice(0, 2).map((carouselButton, btnIdx) => (
|
|
2478
|
-
<CapLabel
|
|
2479
|
-
key={`viber-static-btn-${cardIdx}-${btnIdx}`}
|
|
2480
|
-
type="label1"
|
|
2481
|
-
className={`viber-carousel-static-button ${btnIdx === 1 ? 'viber-carousel-static-button-secondary' : ''}`}
|
|
2482
|
-
>
|
|
2483
|
-
{(carouselButton?.title || '').trim()}
|
|
2484
|
-
</CapLabel>
|
|
2485
|
-
))}
|
|
2486
|
-
</CapRow>
|
|
2487
|
-
</CapRow>
|
|
2488
|
-
))}
|
|
2489
|
-
</CapRow>
|
|
2490
|
-
</CapRow>
|
|
2491
|
-
);
|
|
2492
|
-
break;
|
|
2493
|
-
}
|
|
2494
2421
|
if (!isEmpty(image)) {
|
|
2495
2422
|
const { url = '' } = image;
|
|
2496
2423
|
templateData.url = url;
|
|
@@ -5074,22 +5001,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
5074
5001
|
? this.props.Templates.selectedWhatsappAccount.name
|
|
5075
5002
|
: null
|
|
5076
5003
|
}
|
|
5077
|
-
// Pass formData for
|
|
5004
|
+
// Pass formData for EMAIL and SMS channels for tag extraction
|
|
5078
5005
|
formData={
|
|
5079
|
-
|
|
5080
|
-
|
|
5081
|
-
|
|
5082
|
-
|
|
5083
|
-
|
|
5084
|
-
|
|
5085
|
-
|
|
5086
|
-
return previewContent.formData || null;
|
|
5087
|
-
}
|
|
5088
|
-
if (channelUpper === VIBER) {
|
|
5089
|
-
return previewContent;
|
|
5090
|
-
}
|
|
5091
|
-
return null;
|
|
5092
|
-
})()
|
|
5006
|
+
this.state.testAndPreviewContent &&
|
|
5007
|
+
(this.state.channel?.toUpperCase() === EMAIL ||
|
|
5008
|
+
this.state.channel?.toUpperCase() === SMS) &&
|
|
5009
|
+
typeof this.state.testAndPreviewContent === 'object' &&
|
|
5010
|
+
this.state.testAndPreviewContent?.formData
|
|
5011
|
+
? this.state.testAndPreviewContent.formData
|
|
5012
|
+
: null
|
|
5093
5013
|
}
|
|
5094
5014
|
/>
|
|
5095
5015
|
)}
|
|
@@ -47,24 +47,7 @@ export const VIBER_MEDIA_TYPES = {
|
|
|
47
47
|
TEXT: 'TEXT',
|
|
48
48
|
IMAGE: 'IMAGE',
|
|
49
49
|
VIDEO: 'VIDEO',
|
|
50
|
-
CAROUSEL: 'CAROUSEL',
|
|
51
50
|
};
|
|
52
|
-
export const VIBER_CAROUSEL_MIN_CARDS = 2;
|
|
53
|
-
export const VIBER_CAROUSEL_MAX_CARDS = 5;
|
|
54
|
-
export const VIBER_CAROUSEL_MAX_BUTTONS = 2;
|
|
55
|
-
export const VIBER_CAROUSEL_CARD_TITLE_MIN_LENGTH = 2;
|
|
56
|
-
export const VIBER_CAROUSEL_CARD_TITLE_MAX_LENGTH = 38;
|
|
57
|
-
export const VIBER_CAROUSEL_FIRST_BUTTON_TITLE_MAX_LENGTH = 10;
|
|
58
|
-
export const VIBER_CAROUSEL_SECOND_BUTTON_TITLE_MAX_LENGTH = 12;
|
|
59
|
-
export const VIBER_CAROUSEL_BUTTON_URL_MAX_LENGTH = 1000;
|
|
60
|
-
export const STATIC_URL = 'STATIC_URL';
|
|
61
|
-
export const DYNAMIC_URL = 'DYNAMIC_URL';
|
|
62
|
-
/** Recommended / validated carousel image height in pixels (passed to image upload). */
|
|
63
|
-
export const VIBER_CAROUSEL_IMG_HEIGHT = 600;
|
|
64
|
-
/** Recommended / validated carousel image width in pixels (passed to image upload). */
|
|
65
|
-
export const VIBER_CAROUSEL_IMG_WIDTH = 696;
|
|
66
|
-
/** Maximum carousel image file size (bytes). 10_000_000 ≈ 10 MB (decimal). */
|
|
67
|
-
export const VIBER_CAROUSEL_IMG_SIZE = 10000000;
|
|
68
51
|
export const ALLOWED_IMAGE_EXTENSIONS_REGEX_VIBER = /\.(jpe?g|png)$/i;
|
|
69
52
|
export const ALLOWED_EXTENSIONS_VIDEO_REGEX_VIBER = /\.(mp4|3gp|m4v|mov)$/i;
|
|
70
53
|
export const NONE = 'NONE';
|
|
@@ -86,10 +69,6 @@ export const mediaRadioOptions = [
|
|
|
86
69
|
value: VIBER_MEDIA_TYPES.VIDEO,
|
|
87
70
|
label: <FormattedMessage {...messages.mediaVideo} />,
|
|
88
71
|
},
|
|
89
|
-
{
|
|
90
|
-
value: VIBER_MEDIA_TYPES.CAROUSEL,
|
|
91
|
-
label: <FormattedMessage {...messages.mediaCarousel} />,
|
|
92
|
-
},
|
|
93
72
|
];
|
|
94
73
|
|
|
95
74
|
export const buttonRadioOptions = [
|