@capillarytech/creatives-library 9.0.46 → 9.0.47
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/constants/unified.js +0 -1
- package/package.json +1 -1
- package/v2Components/CommonTestAndPreview/UnifiedPreview/SmsPreviewContent.js +1 -21
- package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberPreviewContent.js +15 -106
- package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +1 -144
- package/v2Components/CommonTestAndPreview/constants.js +0 -2
- package/v2Components/CommonTestAndPreview/index.js +26 -240
- package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/SmsPreviewContent.test.js +0 -32
- 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/v2Components/SmsFallback/constants.js +0 -19
- package/v2Components/SmsFallback/index.js +3 -0
- package/v2Containers/SmsTrai/Edit/constants.js +0 -2
- package/v2Containers/SmsTrai/Edit/index.js +96 -206
- package/v2Containers/SmsTrai/Edit/index.scss +1 -117
- package/v2Containers/SmsTrai/Edit/messages.js +0 -40
- package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap +4591 -21196
- package/v2Containers/Templates/_templates.scss +1 -202
- package/v2Containers/Templates/index.js +42 -193
- package/v2Containers/Templates/messages.js +0 -12
- 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
- package/v2Containers/SmsTrai/Edit/dltVarTypes.js +0 -88
- package/v2Containers/SmsTrai/Edit/tests/dltVarTypes.test.js +0 -100
|
@@ -160,6 +160,7 @@
|
|
|
160
160
|
line-clamp: 3;
|
|
161
161
|
}
|
|
162
162
|
}
|
|
163
|
+
|
|
163
164
|
}
|
|
164
165
|
|
|
165
166
|
&.no-image .ant-card-meta {
|
|
@@ -167,44 +168,6 @@
|
|
|
167
168
|
word-wrap: break-word;
|
|
168
169
|
}
|
|
169
170
|
}
|
|
170
|
-
|
|
171
|
-
&.viber-carousel-static {
|
|
172
|
-
height: auto;
|
|
173
|
-
min-height: 21.125rem;
|
|
174
|
-
overflow: visible;
|
|
175
|
-
|
|
176
|
-
.ant-card-body {
|
|
177
|
-
height: auto;
|
|
178
|
-
overflow: visible;
|
|
179
|
-
padding-bottom: $CAP_SPACE_12;
|
|
180
|
-
|
|
181
|
-
.ant-card-meta,
|
|
182
|
-
.ant-card-meta-detail,
|
|
183
|
-
.ant-card-meta-description {
|
|
184
|
-
height: auto;
|
|
185
|
-
max-height: none;
|
|
186
|
-
overflow: visible;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
.truncate-text-viber {
|
|
190
|
-
.ant-card-meta-description {
|
|
191
|
-
display: block;
|
|
192
|
-
overflow: visible;
|
|
193
|
-
max-height: none;
|
|
194
|
-
-webkit-box-orient: unset;
|
|
195
|
-
-webkit-line-clamp: unset;
|
|
196
|
-
line-clamp: unset;
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
.content,
|
|
201
|
-
.cards,
|
|
202
|
-
.card {
|
|
203
|
-
overflow: visible;
|
|
204
|
-
height: auto;
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
171
|
|
|
209
172
|
|
|
210
173
|
&.carousel-img-section {
|
|
@@ -1259,147 +1222,6 @@
|
|
|
1259
1222
|
max-height: 11rem;
|
|
1260
1223
|
margin-bottom: $CAP_SPACE_04;
|
|
1261
1224
|
}
|
|
1262
|
-
|
|
1263
|
-
/* Listing carousel preview: always grow with content so title + buttons stay visible for any image */
|
|
1264
|
-
.cap-custom-card.ant-card.VIBER.viber-carousel-static {
|
|
1265
|
-
height: auto;
|
|
1266
|
-
min-height: 21.125rem;
|
|
1267
|
-
overflow: visible;
|
|
1268
|
-
|
|
1269
|
-
> .ant-card-body {
|
|
1270
|
-
height: auto;
|
|
1271
|
-
max-height: none;
|
|
1272
|
-
overflow: visible;
|
|
1273
|
-
padding-bottom: $CAP_SPACE_12;
|
|
1274
|
-
}
|
|
1275
|
-
|
|
1276
|
-
.ant-card-meta,
|
|
1277
|
-
.ant-card-meta-detail,
|
|
1278
|
-
.ant-card-meta-description,
|
|
1279
|
-
.truncate-text-viber,
|
|
1280
|
-
.truncate-text-viber .ant-card-meta-description {
|
|
1281
|
-
height: auto;
|
|
1282
|
-
max-height: none;
|
|
1283
|
-
overflow: visible;
|
|
1284
|
-
display: block;
|
|
1285
|
-
-webkit-line-clamp: unset;
|
|
1286
|
-
line-clamp: unset;
|
|
1287
|
-
-webkit-box-orient: unset;
|
|
1288
|
-
}
|
|
1289
|
-
}
|
|
1290
|
-
|
|
1291
|
-
.viber-carousel-static {
|
|
1292
|
-
.content {
|
|
1293
|
-
width: 100%;
|
|
1294
|
-
overflow: visible;
|
|
1295
|
-
display: flex;
|
|
1296
|
-
flex-direction: column;
|
|
1297
|
-
height: auto;
|
|
1298
|
-
|
|
1299
|
-
.message-box {
|
|
1300
|
-
width: 100%;
|
|
1301
|
-
height: auto;
|
|
1302
|
-
border-radius: $CAP_SPACE_04;
|
|
1303
|
-
background: $CAP_WHITE;
|
|
1304
|
-
margin-bottom: $CAP_SPACE_08;
|
|
1305
|
-
display: flex;
|
|
1306
|
-
align-items: flex-start;
|
|
1307
|
-
|
|
1308
|
-
.message {
|
|
1309
|
-
display: -webkit-box;
|
|
1310
|
-
width: 100%;
|
|
1311
|
-
color: $CAP_G01;
|
|
1312
|
-
line-height: 1.3;
|
|
1313
|
-
overflow: hidden;
|
|
1314
|
-
text-overflow: ellipsis;
|
|
1315
|
-
-webkit-line-clamp: 2;
|
|
1316
|
-
line-clamp: 2;
|
|
1317
|
-
-webkit-box-orient: vertical;
|
|
1318
|
-
white-space: normal;
|
|
1319
|
-
word-break: break-word;
|
|
1320
|
-
}
|
|
1321
|
-
}
|
|
1322
|
-
|
|
1323
|
-
.cards {
|
|
1324
|
-
display: flex;
|
|
1325
|
-
gap: $CAP_SPACE_08;
|
|
1326
|
-
overflow: visible;
|
|
1327
|
-
width: 100%;
|
|
1328
|
-
height: auto;
|
|
1329
|
-
|
|
1330
|
-
.card {
|
|
1331
|
-
flex: 1;
|
|
1332
|
-
min-width: 0;
|
|
1333
|
-
width: 100%;
|
|
1334
|
-
background: $CAP_WHITE;
|
|
1335
|
-
border-radius: $CAP_SPACE_04;
|
|
1336
|
-
overflow: visible;
|
|
1337
|
-
display: flex;
|
|
1338
|
-
flex-direction: column;
|
|
1339
|
-
height: auto;
|
|
1340
|
-
|
|
1341
|
-
.image {
|
|
1342
|
-
width: 100%;
|
|
1343
|
-
max-height: 11rem;
|
|
1344
|
-
margin-bottom: $CAP_SPACE_04;
|
|
1345
|
-
border-radius: $CAP_SPACE_04;
|
|
1346
|
-
display: block;
|
|
1347
|
-
flex-shrink: 0;
|
|
1348
|
-
}
|
|
1349
|
-
|
|
1350
|
-
.image-placeholder {
|
|
1351
|
-
width: 100%;
|
|
1352
|
-
height: 7.143rem;
|
|
1353
|
-
border-radius: $CAP_SPACE_04;
|
|
1354
|
-
background: $CAP_G07;
|
|
1355
|
-
}
|
|
1356
|
-
|
|
1357
|
-
.text {
|
|
1358
|
-
display: -webkit-box;
|
|
1359
|
-
color: $CAP_G01;
|
|
1360
|
-
margin: $CAP_SPACE_04 0;
|
|
1361
|
-
line-height: 1.3;
|
|
1362
|
-
overflow: hidden;
|
|
1363
|
-
text-overflow: ellipsis;
|
|
1364
|
-
white-space: normal;
|
|
1365
|
-
-webkit-line-clamp: 2;
|
|
1366
|
-
line-clamp: 2;
|
|
1367
|
-
-webkit-box-orient: vertical;
|
|
1368
|
-
flex-shrink: 0;
|
|
1369
|
-
width: 100%;
|
|
1370
|
-
visibility: visible;
|
|
1371
|
-
}
|
|
1372
|
-
|
|
1373
|
-
.buttons {
|
|
1374
|
-
display: flex;
|
|
1375
|
-
flex-direction: column;
|
|
1376
|
-
gap: $CAP_SPACE_04;
|
|
1377
|
-
flex-shrink: 0;
|
|
1378
|
-
width: 100%;
|
|
1379
|
-
visibility: visible;
|
|
1380
|
-
|
|
1381
|
-
.button {
|
|
1382
|
-
display: block;
|
|
1383
|
-
min-height: 1.5rem;
|
|
1384
|
-
border-radius: $CAP_SPACE_12;
|
|
1385
|
-
background: $CAP_PURPLE01;
|
|
1386
|
-
color: $CAP_WHITE;
|
|
1387
|
-
text-align: center;
|
|
1388
|
-
padding: 0.179rem $CAP_SPACE_08;
|
|
1389
|
-
white-space: normal;
|
|
1390
|
-
}
|
|
1391
|
-
|
|
1392
|
-
.button-secondary {
|
|
1393
|
-
color: $CAP_PURPLE01;
|
|
1394
|
-
background: transparent;
|
|
1395
|
-
border: none;
|
|
1396
|
-
box-shadow: none;
|
|
1397
|
-
}
|
|
1398
|
-
}
|
|
1399
|
-
}
|
|
1400
|
-
}
|
|
1401
|
-
}
|
|
1402
|
-
}
|
|
1403
1225
|
.whatsapp-doc {
|
|
1404
1226
|
width: 100%;
|
|
1405
1227
|
max-height: 123px;
|
|
@@ -1658,29 +1480,6 @@
|
|
|
1658
1480
|
cursor: not-allowed;
|
|
1659
1481
|
}
|
|
1660
1482
|
|
|
1661
|
-
.sms-service-explicit-retired-banner.ant-alert {
|
|
1662
|
-
margin: 0 $CAP_SPACE_16 $CAP_SPACE_16 $CAP_SPACE_16;
|
|
1663
|
-
padding: $CAP_SPACE_08 $CAP_SPACE_12;
|
|
1664
|
-
align-items: center;
|
|
1665
|
-
}
|
|
1666
|
-
|
|
1667
|
-
.sms-template-category-tag {
|
|
1668
|
-
margin-bottom: $CAP_SPACE_12;
|
|
1669
|
-
padding: 0 $CAP_SPACE_12;
|
|
1670
|
-
border-radius: 62.5rem;
|
|
1671
|
-
}
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
.sms-template-legacy-warning.ant-alert {
|
|
1675
|
-
margin-top: $CAP_SPACE_12;
|
|
1676
|
-
|
|
1677
|
-
.ant-alert-title,
|
|
1678
|
-
.ant-alert-title span {
|
|
1679
|
-
font-weight: 400;
|
|
1680
|
-
white-space: normal;
|
|
1681
|
-
}
|
|
1682
|
-
}
|
|
1683
|
-
|
|
1684
1483
|
.template-action-dropdown {
|
|
1685
1484
|
min-width: 14.286rem !important;
|
|
1686
1485
|
.template-action-menu {
|
|
@@ -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';
|
|
@@ -143,10 +142,7 @@ import {CREATIVE} from '../Facebook/constants';
|
|
|
143
142
|
import videoPlay from '../../assets/videoPlay.svg';
|
|
144
143
|
import whatsappImageEmptyPreview from '../../v2Components/TemplatePreview/assets/images/empty_image_preview.svg';
|
|
145
144
|
import whatsappVideoEmptyPreview from '../../v2Components/TemplatePreview/assets/images/empty_video_preview.svg';
|
|
146
|
-
import {
|
|
147
|
-
CAP_SPACE_16, CAP_G08, CAP_G05, CAP_SPACE_08, CAP_SPACE_12, CAP_YELLOW01,
|
|
148
|
-
} from '@capillarytech/cap-ui-library/styled/variables';
|
|
149
|
-
import { SMS_CATEGORY_TAG_STYLES, SMS_CATEGORY_LABELS } from '../../v2Components/SmsFallback/constants';
|
|
145
|
+
import { CAP_SPACE_16, CAP_G08, CAP_G05, CAP_SPACE_08, CAP_SPACE_12 } from '@capillarytech/cap-ui-library/styled/variables';
|
|
150
146
|
import { GA } from '@capillarytech/cap-ui-utils';
|
|
151
147
|
import { MAPP_SDK } from '../InApp/constants';
|
|
152
148
|
import injectReducer from '../../utils/injectReducer';
|
|
@@ -162,7 +158,6 @@ import { v2MobilePushSagas } from '../MobilePushNew/sagas';
|
|
|
162
158
|
import { AUTO_CAROUSEL, BIG_PICTURE, FILMSTRIP_CAROUSEL, MANUAL_CAROUSEL } from '../MobilePushNew/constants';
|
|
163
159
|
import CapPageSpinner from '../../v2Components/CapPageSpinner';
|
|
164
160
|
import webPushSagas from '../WebPush/sagas';
|
|
165
|
-
import { DLT_LEGACY_VAR_REGEX } from '../SmsTrai/Edit/dltVarTypes';
|
|
166
161
|
const withMobilePushNewSaga = injectSaga({ key: 'mobilePushNew', saga: v2MobilePushSagas, mode: DAEMON });
|
|
167
162
|
const withWebPushSaga = injectSaga({ key: 'webPush', saga: webPushSagas, mode: DAEMON });
|
|
168
163
|
|
|
@@ -459,11 +454,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
459
454
|
}
|
|
460
455
|
|
|
461
456
|
checkDLTfeatureEnable() {
|
|
462
|
-
const {
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
// the feature, even if the parent context wasn't marked `smsRegister === 'DLT'`.
|
|
466
|
-
return !!localTemplatesConfig?.useLocalTemplates && commonUtil.hasTraiDltFeature();
|
|
457
|
+
const {smsRegister, isFullMode} = this.props;
|
|
458
|
+
const isTraiDlt = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
|
|
459
|
+
return isTraiDlt;
|
|
467
460
|
}
|
|
468
461
|
|
|
469
462
|
componentDidMount() {
|
|
@@ -1406,11 +1399,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1406
1399
|
const image = viberContent.image || {};
|
|
1407
1400
|
const video = viberContent.video || {};
|
|
1408
1401
|
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
1402
|
|
|
1415
1403
|
const viberPreview = {
|
|
1416
1404
|
messageContent: text,
|
|
@@ -1428,39 +1416,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1428
1416
|
};
|
|
1429
1417
|
}
|
|
1430
1418
|
|
|
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
1419
|
// Extract account name
|
|
1445
1420
|
const accountName = get(template, 'definition.accountName', '');
|
|
1446
1421
|
|
|
1447
1422
|
// Return Viber content object (same as Viber/index.js getTemplateContent)
|
|
1448
1423
|
return {
|
|
1449
1424
|
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 || '',
|
|
1425
|
+
accountName: accountName ? [accountName] : [],
|
|
1426
|
+
brandName: accountName ? [accountName] : [],
|
|
1464
1427
|
};
|
|
1465
1428
|
}
|
|
1466
1429
|
|
|
@@ -2082,20 +2045,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
2082
2045
|
const isCardArchiveEligible = isArchivalEnabled && this.isChannelArchiveEligible(currentChannel, cardWhatsappStatus, cardRcsStatus);
|
|
2083
2046
|
const isArchivedMode = isArchivalEnabled && get(this.props, 'Templates.isArchivedMode', false);
|
|
2084
2047
|
const isAnyArchiveInProgress = isArchivalEnabled && !!(get(this.props, 'Templates.archiveInProgress') || get(this.props, 'Templates.unarchiveInProgress') || get(this.props, 'Templates.bulkArchiveInProgress') || get(this.props, 'Templates.bulkUnarchiveInProgress'));
|
|
2085
|
-
const smsBaseForLegacyCheck = template?.versions?.base || {};
|
|
2086
|
-
const updatedSmsEditorForLegacy = smsBaseForLegacyCheck['updated-sms-editor'];
|
|
2087
|
-
const smsBodyForLegacyCheck = Array.isArray(updatedSmsEditorForLegacy)
|
|
2088
|
-
? updatedSmsEditorForLegacy.join('')
|
|
2089
|
-
: updatedSmsEditorForLegacy ?? smsBaseForLegacyCheck['sms-editor'] ?? '';
|
|
2090
|
-
const isDltLegacyTemplate = currentChannel === SMS
|
|
2091
|
-
&& isTraiDltFeature
|
|
2092
|
-
&& !this.props.isFullMode
|
|
2093
|
-
&& DLT_LEGACY_VAR_REGEX.test(smsBodyForLegacyCheck);
|
|
2094
2048
|
const templateData = {
|
|
2095
2049
|
key: `${currentChannel}-card-${template?.name}`,
|
|
2096
2050
|
title: (
|
|
2097
2051
|
<span className="template-card-title" title={template?.name}>
|
|
2098
|
-
{isCardArchiveEligible && this.renderCardSelectionCheckbox({ templateId: template._id, selectedIds: selectedIdsArrayForCard, isDisabled: isAnyArchiveInProgress
|
|
2052
|
+
{isCardArchiveEligible && this.renderCardSelectionCheckbox({ templateId: template._id, selectedIds: selectedIdsArrayForCard, isDisabled: isAnyArchiveInProgress })}
|
|
2099
2053
|
<CapLabel.CapLabelInline type="label1" title={template?.name} className="template-card-name">
|
|
2100
2054
|
{template?.name}
|
|
2101
2055
|
{currentChannel === INAPP && (
|
|
@@ -2155,39 +2109,20 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
2155
2109
|
})()
|
|
2156
2110
|
],
|
|
2157
2111
|
hoverOption: isArchivedMode || !this.canPerform(PERMISSIONS.CREATIVE_EDIT) ? null : (
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
</CapButton>
|
|
2173
|
-
</CapLabel.CapLabelInline>
|
|
2174
|
-
</CapTooltip>
|
|
2175
|
-
) : (
|
|
2176
|
-
<CapButton
|
|
2177
|
-
className={
|
|
2178
|
-
this.props.isFullMode
|
|
2179
|
-
? `edit-${channelLowerCase}`
|
|
2180
|
-
: `select-${channelLowerCase}`
|
|
2181
|
-
}
|
|
2182
|
-
onClick={e =>
|
|
2183
|
-
handlers.handleEditClick(e, template, undefined, undefined, {
|
|
2184
|
-
account: this.state.selectedAccount
|
|
2185
|
-
})
|
|
2186
|
-
}
|
|
2187
|
-
>
|
|
2188
|
-
{hoverButtonText}
|
|
2189
|
-
</CapButton>
|
|
2190
|
-
)
|
|
2112
|
+
<CapButton
|
|
2113
|
+
className={
|
|
2114
|
+
this.props.isFullMode
|
|
2115
|
+
? `edit-${channelLowerCase}`
|
|
2116
|
+
: `select-${channelLowerCase}`
|
|
2117
|
+
}
|
|
2118
|
+
onClick={e =>
|
|
2119
|
+
handlers.handleEditClick(e, template, undefined, undefined, {
|
|
2120
|
+
account: this.state.selectedAccount
|
|
2121
|
+
})
|
|
2122
|
+
}
|
|
2123
|
+
>
|
|
2124
|
+
{hoverButtonText}
|
|
2125
|
+
</CapButton>
|
|
2191
2126
|
)
|
|
2192
2127
|
};
|
|
2193
2128
|
const {
|
|
@@ -2287,49 +2222,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
2287
2222
|
);
|
|
2288
2223
|
}
|
|
2289
2224
|
switch (currentChannel) {
|
|
2290
|
-
case SMS:
|
|
2291
|
-
const smsBaseForCard = template.versions.base || {};
|
|
2292
|
-
const updatedSmsEditor = smsBaseForCard['updated-sms-editor'];
|
|
2293
|
-
const normalizedUpdatedSmsEditor = Array.isArray(updatedSmsEditor)
|
|
2294
|
-
? updatedSmsEditor.join('')
|
|
2295
|
-
: updatedSmsEditor;
|
|
2296
|
-
const smsBodyForCard = normalizedUpdatedSmsEditor || smsBaseForCard['sms-editor'] || '';
|
|
2297
|
-
const hasLegacyVarToken = DLT_LEGACY_VAR_REGEX.test(smsBodyForCard);
|
|
2298
|
-
const rawCategoryLabel = smsBaseForCard.type || '';
|
|
2299
|
-
const categoryLabel = rawCategoryLabel.toLowerCase() === SMS_CATEGORY_LABELS.SERVICE_EXPLICIT
|
|
2300
|
-
? this.props.intl.formatMessage(messages.promotional)
|
|
2301
|
-
: rawCategoryLabel;
|
|
2302
|
-
const categoryTagStyle = SMS_CATEGORY_TAG_STYLES[categoryLabel.toLowerCase()] || {};
|
|
2225
|
+
case SMS:
|
|
2303
2226
|
templateData.content = isTraiDltFeature ? (
|
|
2304
2227
|
<>
|
|
2305
|
-
{
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
{this.props.intl.formatMessage(messages.smsLegacyFormatBadge)}
|
|
2314
|
-
</CapColoredTag>
|
|
2315
|
-
) : categoryLabel ? (
|
|
2316
|
-
<CapColoredTag
|
|
2317
|
-
tagColor={categoryTagStyle.tagColor}
|
|
2318
|
-
tagTextColor={categoryTagStyle.tagTextColor}
|
|
2319
|
-
tagHeight="1.25rem"
|
|
2320
|
-
tagFontSize="0.75rem"
|
|
2321
|
-
className="sms-template-category-tag"
|
|
2322
|
-
>
|
|
2323
|
-
{categoryLabel}
|
|
2324
|
-
</CapColoredTag>
|
|
2325
|
-
) : null}
|
|
2326
|
-
<CapLabel type="label1">{smsBodyForCard}</CapLabel>
|
|
2228
|
+
<CapLabel type="label3" style={{ marginBottom: CAP_SPACE_16 }}>
|
|
2229
|
+
{template.versions.base.type}
|
|
2230
|
+
</CapLabel>
|
|
2231
|
+
<CapLabel type="label1">
|
|
2232
|
+
{template.versions.base['updated-sms-editor'] === ''
|
|
2233
|
+
? template.versions.base['sms-editor']
|
|
2234
|
+
: template.versions.base['updated-sms-editor']?.join('')}
|
|
2235
|
+
</CapLabel>
|
|
2327
2236
|
</>
|
|
2328
2237
|
) : (
|
|
2329
2238
|
template.versions.base['sms-editor']
|
|
2330
2239
|
);
|
|
2331
2240
|
break;
|
|
2332
|
-
}
|
|
2333
2241
|
case EMAIL: {
|
|
2334
2242
|
const url = template.versions.base.preview_http_url;
|
|
2335
2243
|
if (url) {
|
|
@@ -2528,59 +2436,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
2528
2436
|
image = {},
|
|
2529
2437
|
button = {},
|
|
2530
2438
|
video = {},
|
|
2531
|
-
type = '',
|
|
2532
|
-
cards = [],
|
|
2533
2439
|
} = {},
|
|
2534
2440
|
} = {},
|
|
2535
2441
|
} = template.versions.base;
|
|
2536
|
-
const isViberCarousel = type === VIBER_MEDIA_TYPES.CAROUSEL;
|
|
2537
2442
|
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
2443
|
if (!isEmpty(image)) {
|
|
2585
2444
|
const { url = '' } = image;
|
|
2586
2445
|
templateData.url = url;
|
|
@@ -2902,12 +2761,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
2902
2761
|
)}
|
|
2903
2762
|
</CapRow>
|
|
2904
2763
|
{[WHATSAPP, ZALO, INAPP,RCS].includes(currentChannel) && this.selectedFilters()}
|
|
2905
|
-
{currentChannel === SMS && this.checkDLTfeatureEnable() && (
|
|
2906
|
-
<CapInfoNote
|
|
2907
|
-
className="sms-service-explicit-retired-banner"
|
|
2908
|
-
message={this.props.intl.formatMessage(messages.smsServiceExplicitRetiredBanner)}
|
|
2909
|
-
/>
|
|
2910
|
-
)}
|
|
2911
2764
|
{<div>
|
|
2912
2765
|
{!isEmpty(filteredTemplates) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError) ? (
|
|
2913
2766
|
<div className={!isEmpty(this.state.searchText) && isEmpty(cardDataList) ? '' : this.isFullMode() ? "v2-pagination-container" : "v2-pagination-container-half"}>
|
|
@@ -4935,7 +4788,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
4935
4788
|
<CapRadio.CapRadioGroup className="line-filters" defaultValue={smsFilter} onChange={this.setSMSFilter}>
|
|
4936
4789
|
{
|
|
4937
4790
|
(() => {
|
|
4938
|
-
const { ALL, SERVICE_IMPLICIT, PROMOTIONAL } = SMS_FILTERS;
|
|
4791
|
+
const { ALL, SERVICE_IMPLICIT, SERVICE_EXPLICIT, PROMOTIONAL } = SMS_FILTERS;
|
|
4939
4792
|
return (
|
|
4940
4793
|
<>
|
|
4941
4794
|
<CapRadio.Button value={ALL}><CapLabel type="label2">
|
|
@@ -4944,6 +4797,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
4944
4797
|
<CapRadio.Button value={PROMOTIONAL}><CapLabel type="label2">
|
|
4945
4798
|
<FormattedMessage {...messages.promotional} />
|
|
4946
4799
|
</CapLabel></CapRadio.Button>
|
|
4800
|
+
<CapRadio.Button value={SERVICE_EXPLICIT}><CapLabel type="label2">
|
|
4801
|
+
<FormattedMessage {...messages.serviceExplicit} />
|
|
4802
|
+
</CapLabel></CapRadio.Button>
|
|
4947
4803
|
<CapRadio.Button value={SERVICE_IMPLICIT}><CapLabel type="label2">
|
|
4948
4804
|
<FormattedMessage {...messages.serviceImplicit} />
|
|
4949
4805
|
</CapLabel></CapRadio.Button>
|
|
@@ -5251,22 +5107,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
5251
5107
|
? this.props.Templates.selectedWhatsappAccount.name
|
|
5252
5108
|
: null
|
|
5253
5109
|
}
|
|
5254
|
-
// Pass formData for
|
|
5110
|
+
// Pass formData for EMAIL and SMS channels for tag extraction
|
|
5255
5111
|
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
|
-
})()
|
|
5112
|
+
this.state.testAndPreviewContent &&
|
|
5113
|
+
(this.state.channel?.toUpperCase() === EMAIL ||
|
|
5114
|
+
this.state.channel?.toUpperCase() === SMS) &&
|
|
5115
|
+
typeof this.state.testAndPreviewContent === 'object' &&
|
|
5116
|
+
this.state.testAndPreviewContent?.formData
|
|
5117
|
+
? this.state.testAndPreviewContent.formData
|
|
5118
|
+
: null
|
|
5270
5119
|
}
|
|
5271
5120
|
/>
|
|
5272
5121
|
)}
|
|
@@ -538,18 +538,6 @@ export default defineMessages({
|
|
|
538
538
|
id: `${scope}.serviceImplicit`,
|
|
539
539
|
defaultMessage: 'Service implicit',
|
|
540
540
|
},
|
|
541
|
-
"smsServiceExplicitRetiredBanner": {
|
|
542
|
-
id: `${scope}.smsServiceExplicitRetiredBanner`,
|
|
543
|
-
defaultMessage: 'Service Explicit is retired. Existing Service Explicit templates have been moved under the Promotional category.',
|
|
544
|
-
},
|
|
545
|
-
"smsLegacyFormatBadge": {
|
|
546
|
-
id: `${scope}.smsLegacyFormatBadge`,
|
|
547
|
-
defaultMessage: 'Legacy format',
|
|
548
|
-
},
|
|
549
|
-
"smsLegacyBlockedTooltip": {
|
|
550
|
-
id: `${scope}.smsLegacyBlockedTooltip`,
|
|
551
|
-
defaultMessage: "This template can't be used until re-registered with typed variables on the DLT portal.",
|
|
552
|
-
},
|
|
553
541
|
"uploadTemplate": {
|
|
554
542
|
id: `${scope}.uploadTemplate`,
|
|
555
543
|
defaultMessage: 'Upload template',
|
|
@@ -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 = [
|