@capillarytech/creatives-library 9.0.41 → 9.0.42
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 -106
- package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +1 -139
- package/v2Components/CommonTestAndPreview/constants.js +0 -2
- package/v2Components/CommonTestAndPreview/index.js +26 -240
- package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/ViberPreviewContent.test.js +0 -364
- package/v2Components/CommonTestAndPreview/tests/utils.test.js +0 -49
- package/v2Components/CommonTestAndPreview/utils.js +0 -20
- package/v2Containers/CreativesContainer/index.js +3 -0
- package/v2Containers/Templates/_templates.scss +1 -179
- package/v2Containers/Templates/index.js +10 -97
- 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/v2Components/CommonTestAndPreview/UnifiedPreview/ViberCarouselPreviewCards.js +0 -127
- package/v2Components/CommonTestAndPreview/UnifiedPreview/_viberCarouselPreviewCards.scss +0 -133
|
@@ -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';
|
|
@@ -1400,11 +1399,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1400
1399
|
const image = viberContent.image || {};
|
|
1401
1400
|
const video = viberContent.video || {};
|
|
1402
1401
|
const button = viberContent.button || {};
|
|
1403
|
-
const messageType = viberContent.type || '';
|
|
1404
|
-
const cardsRaw = viberContent.cards;
|
|
1405
|
-
const cards = Array.isArray(cardsRaw) ? cardsRaw : [];
|
|
1406
|
-
const isCarousel =
|
|
1407
|
-
messageType === VIBER_MEDIA_TYPES.CAROUSEL || cards.length > 0;
|
|
1408
1402
|
|
|
1409
1403
|
const viberPreview = {
|
|
1410
1404
|
messageContent: text,
|
|
@@ -1422,39 +1416,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1422
1416
|
};
|
|
1423
1417
|
}
|
|
1424
1418
|
|
|
1425
|
-
if (isCarousel) {
|
|
1426
|
-
viberPreview.type = VIBER_MEDIA_TYPES.CAROUSEL;
|
|
1427
|
-
viberPreview.cards = cards.map((card) => ({
|
|
1428
|
-
text: card?.text || '',
|
|
1429
|
-
mediaUrl: card?.mediaUrl || '',
|
|
1430
|
-
buttons: (card?.buttons || []).map((btn) => ({
|
|
1431
|
-
title: btn?.title || '',
|
|
1432
|
-
action: btn?.action || '',
|
|
1433
|
-
})),
|
|
1434
|
-
}));
|
|
1435
|
-
viberPreview.showCarouselEditorPreview = true;
|
|
1436
|
-
}
|
|
1437
|
-
|
|
1438
1419
|
// Extract account name
|
|
1439
1420
|
const accountName = get(template, 'definition.accountName', '');
|
|
1440
1421
|
|
|
1441
1422
|
// Return Viber content object (same as Viber/index.js getTemplateContent)
|
|
1442
1423
|
return {
|
|
1443
1424
|
viberPreviewContent: viberPreview,
|
|
1444
|
-
accountName: accountName
|
|
1445
|
-
brandName: accountName
|
|
1446
|
-
messageContent: text,
|
|
1447
|
-
...(isCarousel && {
|
|
1448
|
-
type: VIBER_MEDIA_TYPES.CAROUSEL,
|
|
1449
|
-
cards: viberPreview.cards,
|
|
1450
|
-
}),
|
|
1451
|
-
...(!isCarousel && !isEmpty(button) && button.text && (button.url || viberContent.buttonURL) && {
|
|
1452
|
-
button: {
|
|
1453
|
-
text: button.text,
|
|
1454
|
-
url: button.url || viberContent.buttonURL || '',
|
|
1455
|
-
},
|
|
1456
|
-
}),
|
|
1457
|
-
buttonURL: button.url || viberContent.buttonURL || '',
|
|
1425
|
+
accountName: accountName ? [accountName] : [],
|
|
1426
|
+
brandName: accountName ? [accountName] : [],
|
|
1458
1427
|
};
|
|
1459
1428
|
}
|
|
1460
1429
|
|
|
@@ -2466,59 +2435,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
2466
2435
|
image = {},
|
|
2467
2436
|
button = {},
|
|
2468
2437
|
video = {},
|
|
2469
|
-
type = '',
|
|
2470
|
-
cards = [],
|
|
2471
2438
|
} = {},
|
|
2472
2439
|
} = {},
|
|
2473
2440
|
} = template.versions.base;
|
|
2474
|
-
const isViberCarousel = type === VIBER_MEDIA_TYPES.CAROUSEL;
|
|
2475
2441
|
templateData.content = text;
|
|
2476
|
-
if (isViberCarousel) {
|
|
2477
|
-
const previewCards = Array.isArray(cards) ? cards.slice(0, 1) : [];
|
|
2478
|
-
// Bypass CapCustomCard Viber Meta + line-clamp (clips title/buttons for tall images).
|
|
2479
|
-
// Parent class `viber-carousel-static` scopes listing styles in _templates.scss.
|
|
2480
|
-
// cardType hits the default content path; keep VIBER for channel card styles.
|
|
2481
|
-
templateData.cardType = 'VIBER_CAROUSEL_PREVIEW';
|
|
2482
|
-
templateData.className = 'viber-carousel-static VIBER';
|
|
2483
|
-
templateData.content = (
|
|
2484
|
-
<CapRow vertical className="content">
|
|
2485
|
-
<CapRow className="message-box">
|
|
2486
|
-
<CapLabel type="label1" className="message">
|
|
2487
|
-
{text}
|
|
2488
|
-
</CapLabel>
|
|
2489
|
-
</CapRow>
|
|
2490
|
-
<CapRow className="cards">
|
|
2491
|
-
{previewCards?.map((card, cardIdx) => (
|
|
2492
|
-
<CapRow vertical className="card" key={`viber-carousel-static-card-${cardIdx}`}>
|
|
2493
|
-
{card?.mediaUrl ? (
|
|
2494
|
-
<CapImage src={card.mediaUrl} className="image" />
|
|
2495
|
-
) : (
|
|
2496
|
-
<CapRow className="image-placeholder" />
|
|
2497
|
-
)}
|
|
2498
|
-
<CapLabel type="label1" className="text">
|
|
2499
|
-
{card?.text}
|
|
2500
|
-
</CapLabel>
|
|
2501
|
-
<CapRow vertical className="buttons">
|
|
2502
|
-
{(Array.isArray(card?.buttons) && card.buttons.length
|
|
2503
|
-
? card.buttons
|
|
2504
|
-
: [{}, {}]
|
|
2505
|
-
).slice(0, 2).map((carouselButton, btnIdx) => (
|
|
2506
|
-
<CapLabel
|
|
2507
|
-
key={`viber-carousel-static-btn-${cardIdx}-${btnIdx}`}
|
|
2508
|
-
type="label1"
|
|
2509
|
-
className={`button${btnIdx === 1 ? ' button-secondary' : ''}`}
|
|
2510
|
-
>
|
|
2511
|
-
{(carouselButton?.title || '').trim()}
|
|
2512
|
-
</CapLabel>
|
|
2513
|
-
))}
|
|
2514
|
-
</CapRow>
|
|
2515
|
-
</CapRow>
|
|
2516
|
-
))}
|
|
2517
|
-
</CapRow>
|
|
2518
|
-
</CapRow>
|
|
2519
|
-
);
|
|
2520
|
-
break;
|
|
2521
|
-
}
|
|
2522
2442
|
if (!isEmpty(image)) {
|
|
2523
2443
|
const { url = '' } = image;
|
|
2524
2444
|
templateData.url = url;
|
|
@@ -5186,22 +5106,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
5186
5106
|
? this.props.Templates.selectedWhatsappAccount.name
|
|
5187
5107
|
: null
|
|
5188
5108
|
}
|
|
5189
|
-
// Pass formData for
|
|
5109
|
+
// Pass formData for EMAIL and SMS channels for tag extraction
|
|
5190
5110
|
formData={
|
|
5191
|
-
|
|
5192
|
-
|
|
5193
|
-
|
|
5194
|
-
|
|
5195
|
-
|
|
5196
|
-
|
|
5197
|
-
|
|
5198
|
-
return previewContent.formData || null;
|
|
5199
|
-
}
|
|
5200
|
-
if (channelUpper === VIBER) {
|
|
5201
|
-
return previewContent;
|
|
5202
|
-
}
|
|
5203
|
-
return null;
|
|
5204
|
-
})()
|
|
5111
|
+
this.state.testAndPreviewContent &&
|
|
5112
|
+
(this.state.channel?.toUpperCase() === EMAIL ||
|
|
5113
|
+
this.state.channel?.toUpperCase() === SMS) &&
|
|
5114
|
+
typeof this.state.testAndPreviewContent === 'object' &&
|
|
5115
|
+
this.state.testAndPreviewContent?.formData
|
|
5116
|
+
? this.state.testAndPreviewContent.formData
|
|
5117
|
+
: null
|
|
5205
5118
|
}
|
|
5206
5119
|
/>
|
|
5207
5120
|
)}
|
|
@@ -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 = [
|