@capillarytech/creatives-library 9.0.46 → 9.0.48
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 +30 -241
- 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/SmsTrai/Edit/index.js +6 -10
- package/v2Containers/Templates/_templates.scss +1 -179
- package/v2Containers/Templates/index.js +29 -99
- 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';
|
|
@@ -1406,11 +1405,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1406
1405
|
const image = viberContent.image || {};
|
|
1407
1406
|
const video = viberContent.video || {};
|
|
1408
1407
|
const button = viberContent.button || {};
|
|
1409
|
-
const messageType = viberContent.type || '';
|
|
1410
|
-
const cardsRaw = viberContent.cards;
|
|
1411
|
-
const cards = Array.isArray(cardsRaw) ? cardsRaw : [];
|
|
1412
|
-
const isCarousel =
|
|
1413
|
-
messageType === VIBER_MEDIA_TYPES.CAROUSEL || cards.length > 0;
|
|
1414
1408
|
|
|
1415
1409
|
const viberPreview = {
|
|
1416
1410
|
messageContent: text,
|
|
@@ -1428,39 +1422,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1428
1422
|
};
|
|
1429
1423
|
}
|
|
1430
1424
|
|
|
1431
|
-
if (isCarousel) {
|
|
1432
|
-
viberPreview.type = VIBER_MEDIA_TYPES.CAROUSEL;
|
|
1433
|
-
viberPreview.cards = cards.map((card) => ({
|
|
1434
|
-
text: card?.text || '',
|
|
1435
|
-
mediaUrl: card?.mediaUrl || '',
|
|
1436
|
-
buttons: (card?.buttons || []).map((btn) => ({
|
|
1437
|
-
title: btn?.title || '',
|
|
1438
|
-
action: btn?.action || '',
|
|
1439
|
-
})),
|
|
1440
|
-
}));
|
|
1441
|
-
viberPreview.showCarouselEditorPreview = true;
|
|
1442
|
-
}
|
|
1443
|
-
|
|
1444
1425
|
// Extract account name
|
|
1445
1426
|
const accountName = get(template, 'definition.accountName', '');
|
|
1446
1427
|
|
|
1447
1428
|
// Return Viber content object (same as Viber/index.js getTemplateContent)
|
|
1448
1429
|
return {
|
|
1449
1430
|
viberPreviewContent: viberPreview,
|
|
1450
|
-
accountName: accountName
|
|
1451
|
-
brandName: accountName
|
|
1452
|
-
messageContent: text,
|
|
1453
|
-
...(isCarousel && {
|
|
1454
|
-
type: VIBER_MEDIA_TYPES.CAROUSEL,
|
|
1455
|
-
cards: viberPreview.cards,
|
|
1456
|
-
}),
|
|
1457
|
-
...(!isCarousel && !isEmpty(button) && button.text && (button.url || viberContent.buttonURL) && {
|
|
1458
|
-
button: {
|
|
1459
|
-
text: button.text,
|
|
1460
|
-
url: button.url || viberContent.buttonURL || '',
|
|
1461
|
-
},
|
|
1462
|
-
}),
|
|
1463
|
-
buttonURL: button.url || viberContent.buttonURL || '',
|
|
1431
|
+
accountName: accountName ? [accountName] : [],
|
|
1432
|
+
brandName: accountName ? [accountName] : [],
|
|
1464
1433
|
};
|
|
1465
1434
|
}
|
|
1466
1435
|
|
|
@@ -2084,9 +2053,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
2084
2053
|
const isAnyArchiveInProgress = isArchivalEnabled && !!(get(this.props, 'Templates.archiveInProgress') || get(this.props, 'Templates.unarchiveInProgress') || get(this.props, 'Templates.bulkArchiveInProgress') || get(this.props, 'Templates.bulkUnarchiveInProgress'));
|
|
2085
2054
|
const smsBaseForLegacyCheck = template?.versions?.base || {};
|
|
2086
2055
|
const updatedSmsEditorForLegacy = smsBaseForLegacyCheck['updated-sms-editor'];
|
|
2087
|
-
const
|
|
2056
|
+
const updatedSmsEditorForLegacyJoined = Array.isArray(updatedSmsEditorForLegacy)
|
|
2088
2057
|
? updatedSmsEditorForLegacy.join('')
|
|
2089
|
-
: updatedSmsEditorForLegacy
|
|
2058
|
+
: updatedSmsEditorForLegacy;
|
|
2059
|
+
const smsBodyForLegacyCheck = `${updatedSmsEditorForLegacyJoined || ''}${smsBaseForLegacyCheck['sms-editor'] || ''}`;
|
|
2090
2060
|
const isDltLegacyTemplate = currentChannel === SMS
|
|
2091
2061
|
&& isTraiDltFeature
|
|
2092
2062
|
&& !this.props.isFullMode
|
|
@@ -2528,59 +2498,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
2528
2498
|
image = {},
|
|
2529
2499
|
button = {},
|
|
2530
2500
|
video = {},
|
|
2531
|
-
type = '',
|
|
2532
|
-
cards = [],
|
|
2533
2501
|
} = {},
|
|
2534
2502
|
} = {},
|
|
2535
2503
|
} = template.versions.base;
|
|
2536
|
-
const isViberCarousel = type === VIBER_MEDIA_TYPES.CAROUSEL;
|
|
2537
2504
|
templateData.content = text;
|
|
2538
|
-
if (isViberCarousel) {
|
|
2539
|
-
const previewCards = Array.isArray(cards) ? cards.slice(0, 1) : [];
|
|
2540
|
-
// Bypass CapCustomCard Viber Meta + line-clamp (clips title/buttons for tall images).
|
|
2541
|
-
// Parent class `viber-carousel-static` scopes listing styles in _templates.scss.
|
|
2542
|
-
// cardType hits the default content path; keep VIBER for channel card styles.
|
|
2543
|
-
templateData.cardType = 'VIBER_CAROUSEL_PREVIEW';
|
|
2544
|
-
templateData.className = 'viber-carousel-static VIBER';
|
|
2545
|
-
templateData.content = (
|
|
2546
|
-
<CapRow vertical className="content">
|
|
2547
|
-
<CapRow className="message-box">
|
|
2548
|
-
<CapLabel type="label1" className="message">
|
|
2549
|
-
{text}
|
|
2550
|
-
</CapLabel>
|
|
2551
|
-
</CapRow>
|
|
2552
|
-
<CapRow className="cards">
|
|
2553
|
-
{previewCards?.map((card, cardIdx) => (
|
|
2554
|
-
<CapRow vertical className="card" key={`viber-carousel-static-card-${cardIdx}`}>
|
|
2555
|
-
{card?.mediaUrl ? (
|
|
2556
|
-
<CapImage src={card.mediaUrl} className="image" />
|
|
2557
|
-
) : (
|
|
2558
|
-
<CapRow className="image-placeholder" />
|
|
2559
|
-
)}
|
|
2560
|
-
<CapLabel type="label1" className="text">
|
|
2561
|
-
{card?.text}
|
|
2562
|
-
</CapLabel>
|
|
2563
|
-
<CapRow vertical className="buttons">
|
|
2564
|
-
{(Array.isArray(card?.buttons) && card.buttons.length
|
|
2565
|
-
? card.buttons
|
|
2566
|
-
: [{}, {}]
|
|
2567
|
-
).slice(0, 2).map((carouselButton, btnIdx) => (
|
|
2568
|
-
<CapLabel
|
|
2569
|
-
key={`viber-carousel-static-btn-${cardIdx}-${btnIdx}`}
|
|
2570
|
-
type="label1"
|
|
2571
|
-
className={`button${btnIdx === 1 ? ' button-secondary' : ''}`}
|
|
2572
|
-
>
|
|
2573
|
-
{(carouselButton?.title || '').trim()}
|
|
2574
|
-
</CapLabel>
|
|
2575
|
-
))}
|
|
2576
|
-
</CapRow>
|
|
2577
|
-
</CapRow>
|
|
2578
|
-
))}
|
|
2579
|
-
</CapRow>
|
|
2580
|
-
</CapRow>
|
|
2581
|
-
);
|
|
2582
|
-
break;
|
|
2583
|
-
}
|
|
2584
2505
|
if (!isEmpty(image)) {
|
|
2585
2506
|
const { url = '' } = image;
|
|
2586
2507
|
templateData.url = url;
|
|
@@ -3682,6 +3603,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
3682
3603
|
CapNotification.error({ message: this.props.intl.formatMessage(messages.cannotEditArchivedTemplate) });
|
|
3683
3604
|
return;
|
|
3684
3605
|
}
|
|
3606
|
+
if (!this.props.isFullMode
|
|
3607
|
+
&& this.checkDLTfeatureEnable()
|
|
3608
|
+
&& (this.state.channel || '').toLowerCase() === SMS_LOWERCASE) {
|
|
3609
|
+
const smsBase = template?.versions?.base || {};
|
|
3610
|
+
const updatedSms = smsBase['updated-sms-editor'];
|
|
3611
|
+
const updatedSmsJoined = Array.isArray(updatedSms) ? updatedSms.join('') : updatedSms;
|
|
3612
|
+
// Check BOTH candidate fields — some legacy templates keep the body only in `sms-editor`
|
|
3613
|
+
// while others have it in `updated-sms-editor`. Concatenating catches either.
|
|
3614
|
+
const smsBody = `${updatedSmsJoined || ''}${smsBase['sms-editor'] || ''}`;
|
|
3615
|
+
if (DLT_LEGACY_VAR_REGEX.test(smsBody)) {
|
|
3616
|
+
CapNotification.error({
|
|
3617
|
+
message: this.props.intl.formatMessage(messages.smsLegacyBlockedTooltip),
|
|
3618
|
+
});
|
|
3619
|
+
return;
|
|
3620
|
+
}
|
|
3621
|
+
}
|
|
3685
3622
|
if (modeType && modeType !== undefined) {
|
|
3686
3623
|
this.setState({modeType});
|
|
3687
3624
|
}
|
|
@@ -5251,22 +5188,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
5251
5188
|
? this.props.Templates.selectedWhatsappAccount.name
|
|
5252
5189
|
: null
|
|
5253
5190
|
}
|
|
5254
|
-
// Pass formData for
|
|
5191
|
+
// Pass formData for EMAIL and SMS channels for tag extraction
|
|
5255
5192
|
formData={
|
|
5256
|
-
|
|
5257
|
-
|
|
5258
|
-
|
|
5259
|
-
|
|
5260
|
-
|
|
5261
|
-
|
|
5262
|
-
|
|
5263
|
-
return previewContent.formData || null;
|
|
5264
|
-
}
|
|
5265
|
-
if (channelUpper === VIBER) {
|
|
5266
|
-
return previewContent;
|
|
5267
|
-
}
|
|
5268
|
-
return null;
|
|
5269
|
-
})()
|
|
5193
|
+
this.state.testAndPreviewContent &&
|
|
5194
|
+
(this.state.channel?.toUpperCase() === EMAIL ||
|
|
5195
|
+
this.state.channel?.toUpperCase() === SMS) &&
|
|
5196
|
+
typeof this.state.testAndPreviewContent === 'object' &&
|
|
5197
|
+
this.state.testAndPreviewContent?.formData
|
|
5198
|
+
? this.state.testAndPreviewContent.formData
|
|
5199
|
+
: null
|
|
5270
5200
|
}
|
|
5271
5201
|
/>
|
|
5272
5202
|
)}
|
|
@@ -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 = [
|