@capillarytech/creatives-library 8.0.353-alpha.6 → 8.0.354
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 -29
- package/index.html +1 -0
- package/package.json +1 -1
- package/services/tests/api.test.js +20 -35
- package/utils/cdnTransformation.js +63 -3
- package/utils/commonUtils.js +1 -19
- package/utils/tests/cdnTransformation.test.js +111 -0
- package/v2Components/CapActionButton/constants.js +0 -7
- package/v2Components/CapActionButton/index.js +108 -166
- package/v2Components/CapActionButton/index.scss +6 -157
- package/v2Components/CapActionButton/messages.js +3 -19
- package/v2Components/CapActionButton/tests/index.test.js +17 -41
- package/v2Components/CapTagList/index.js +0 -10
- package/v2Components/CommonTestAndPreview/CustomValuesEditor.js +49 -72
- package/v2Components/CommonTestAndPreview/DeliverySettings/DeliverySettings.scss +2 -8
- package/v2Components/CommonTestAndPreview/DeliverySettings/ModifyDeliverySettings.js +21 -213
- package/v2Components/CommonTestAndPreview/DeliverySettings/constants.js +0 -16
- package/v2Components/CommonTestAndPreview/DeliverySettings/index.js +10 -85
- package/v2Components/CommonTestAndPreview/DeliverySettings/messages.js +0 -30
- package/v2Components/CommonTestAndPreview/DeliverySettings/utils/parseSenderDetailsResponse.js +11 -79
- package/v2Components/CommonTestAndPreview/SendTestMessage.js +5 -10
- package/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js +15 -157
- package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +76 -346
- package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js +4 -133
- package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss +0 -11
- package/v2Components/CommonTestAndPreview/constants.js +2 -38
- package/v2Components/CommonTestAndPreview/index.js +186 -691
- package/v2Components/CommonTestAndPreview/messages.js +3 -45
- package/v2Components/CommonTestAndPreview/sagas.js +6 -25
- package/v2Components/CommonTestAndPreview/tests/CustomValuesEditor.test.js +284 -308
- package/v2Components/CommonTestAndPreview/tests/DeliverySettings/ModifyDeliverySettings.test.js +65 -231
- package/v2Components/CommonTestAndPreview/tests/DeliverySettings/index.test.js +5 -118
- package/v2Components/CommonTestAndPreview/tests/DeliverySettings/utils/parseSenderDetailsResponse.test.js +0 -341
- package/v2Components/CommonTestAndPreview/tests/PreviewSection.test.js +1 -8
- package/v2Components/CommonTestAndPreview/tests/SendTestMessage.test.js +13 -34
- package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/RcsPreviewContent.test.js +283 -281
- package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/index.test.js +1 -199
- package/v2Components/CommonTestAndPreview/tests/index.test.js +4 -132
- package/v2Components/CommonTestAndPreview/tests/sagas.test.js +26 -36
- package/v2Components/FormBuilder/index.js +6 -11
- package/v2Components/TemplatePreview/_templatePreview.scss +23 -38
- package/v2Components/TemplatePreview/index.js +31 -143
- package/v2Components/TemplatePreview/tests/index.test.js +0 -142
- package/v2Components/TestAndPreviewSlidebox/index.js +1 -13
- package/v2Components/TestAndPreviewSlidebox/sagas.js +4 -11
- package/v2Components/TestAndPreviewSlidebox/tests/saga.test.js +1 -3
- package/v2Containers/CreativesContainer/SlideBoxContent.js +4 -36
- package/v2Containers/CreativesContainer/SlideBoxFooter.js +1 -10
- package/v2Containers/CreativesContainer/SlideBoxHeader.js +4 -29
- package/v2Containers/CreativesContainer/constants.js +0 -9
- package/v2Containers/CreativesContainer/index.js +103 -322
- package/v2Containers/CreativesContainer/index.scss +1 -51
- package/v2Containers/CreativesContainer/tests/SlideBoxFooter.test.js +34 -78
- package/v2Containers/CreativesContainer/tests/SlideBoxHeader.test.js +16 -79
- package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap +0 -8
- package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxHeader.test.js.snap +98 -357
- package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap +15 -20
- package/v2Containers/CreativesContainer/tests/index.test.js +9 -71
- package/v2Containers/MobilePush/Create/test/saga.test.js +2 -2
- package/v2Containers/Rcs/constants.js +10 -119
- package/v2Containers/Rcs/index.js +818 -2450
- package/v2Containers/Rcs/index.scss +8 -280
- package/v2Containers/Rcs/messages.js +3 -34
- package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap +70073 -98018
- package/v2Containers/Rcs/tests/__snapshots__/utils.test.js.snap +5 -0
- package/v2Containers/Rcs/tests/index.test.js +121 -152
- package/v2Containers/Rcs/tests/mockData.js +0 -38
- package/v2Containers/Rcs/tests/utils.test.js +30 -646
- package/v2Containers/Rcs/utils.js +11 -478
- package/v2Containers/Sms/Create/index.js +40 -106
- package/v2Containers/SmsTrai/Create/index.js +4 -9
- package/v2Containers/SmsTrai/Edit/constants.js +0 -2
- package/v2Containers/SmsTrai/Edit/index.js +130 -640
- package/v2Containers/SmsTrai/Edit/messages.js +4 -14
- package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap +2296 -4249
- package/v2Containers/SmsWrapper/index.js +8 -37
- package/v2Containers/TagList/index.js +0 -6
- package/v2Containers/Templates/_templates.scss +9 -166
- package/v2Containers/Templates/actions.js +0 -11
- package/v2Containers/Templates/constants.js +0 -2
- package/v2Containers/Templates/index.js +52 -120
- package/v2Containers/Templates/sagas.js +18 -57
- package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +1017 -1062
- package/v2Containers/Templates/tests/sagas.test.js +39 -205
- package/v2Containers/TemplatesV2/TemplatesV2.style.js +1 -72
- package/v2Containers/TemplatesV2/index.js +23 -86
- package/v2Containers/WeChat/MapTemplates/test/saga.test.js +9 -9
- package/v2Containers/Whatsapp/index.js +20 -3
- package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +34 -578
- package/utils/rcsPayloadUtils.js +0 -92
- package/utils/templateVarUtils.js +0 -201
- package/utils/tests/rcsPayloadUtils.test.js +0 -226
- package/utils/tests/templateVarUtils.test.js +0 -204
- package/v2Components/CommonTestAndPreview/previewApiUtils.js +0 -59
- package/v2Components/CommonTestAndPreview/tests/previewApiUtils.test.js +0 -67
- package/v2Components/SmsFallback/SmsFallbackLocalSelector.js +0 -91
- package/v2Components/SmsFallback/constants.js +0 -73
- package/v2Components/SmsFallback/index.js +0 -956
- package/v2Components/SmsFallback/index.scss +0 -265
- package/v2Components/SmsFallback/messages.js +0 -78
- package/v2Components/SmsFallback/smsFallbackUtils.js +0 -119
- package/v2Components/SmsFallback/tests/SmsFallbackLocalSelector.test.js +0 -50
- package/v2Components/SmsFallback/tests/rcsSmsFallback.acceptance.test.js +0 -147
- package/v2Components/SmsFallback/tests/smsFallbackHandlers.test.js +0 -304
- package/v2Components/SmsFallback/tests/smsFallbackUi.test.js +0 -223
- package/v2Components/SmsFallback/tests/smsFallbackUtils.test.js +0 -309
- package/v2Components/SmsFallback/tests/useLocalTemplateList.test.js +0 -422
- package/v2Components/SmsFallback/useLocalTemplateList.js +0 -92
- package/v2Components/TemplatePreview/constants.js +0 -2
- package/v2Components/VarSegmentMessageEditor/constants.js +0 -2
- package/v2Components/VarSegmentMessageEditor/index.js +0 -125
- package/v2Components/VarSegmentMessageEditor/index.scss +0 -46
- package/v2Containers/CreativesContainer/CreativesSlideBoxWrapper.js +0 -43
- package/v2Containers/CreativesContainer/embeddedSlideboxUtils.js +0 -79
- package/v2Containers/CreativesContainer/tests/SlideBoxContent.localTemplates.test.js +0 -90
- package/v2Containers/CreativesContainer/tests/embeddedSlideboxUtils.test.js +0 -258
- package/v2Containers/CreativesContainer/tests/useLocalTemplatesProp.test.js +0 -125
- package/v2Containers/Rcs/rcsLibraryHydrationUtils.js +0 -225
- package/v2Containers/Rcs/tests/rcsLibraryHydrationUtils.test.js +0 -318
- package/v2Containers/Sms/smsFormDataHelpers.js +0 -67
- package/v2Containers/Sms/tests/smsFormDataHelpers.test.js +0 -253
- package/v2Containers/SmsTrai/Edit/index.scss +0 -121
- package/v2Containers/Templates/TemplatesActionBar.js +0 -101
- package/v2Containers/Templates/tests/TemplatesActionBar.test.js +0 -120
- package/v2Containers/Templates/tests/smsTemplatesListApi.test.js +0 -180
- package/v2Containers/Templates/utils/smsTemplatesListApi.js +0 -79
- package/v2Containers/TemplatesV2/tests/TemplatesV2.localTemplates.test.js +0 -131
|
@@ -52,7 +52,6 @@ import { QUICK_REPLY, WHATSAPP_CATEGORIES, PHONE_NUMBER, TEMPLATE_VARIABLE_REGEX
|
|
|
52
52
|
import { RCS_BUTTON_TYPES, LEFT, HORIZONTAL, VERTICAL, RIGHT} from '../../v2Containers/Rcs/constants';
|
|
53
53
|
import { ANDROID, INAPP_MESSAGE_LAYOUT_TYPES } from '../../v2Containers/InApp/constants';
|
|
54
54
|
import { CAROUSEL } from '../../v2Containers/MobilePushNew/constants';
|
|
55
|
-
import { TEMPLATE_VAR_REGEX } from './constants';
|
|
56
55
|
|
|
57
56
|
const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
|
|
58
57
|
const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
|
|
@@ -237,23 +236,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
237
236
|
let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
|
|
238
237
|
const { formatMessage } = intl;
|
|
239
238
|
const { rcsPreviewContent, inAppPreviewContent, viberPreviewContent, isBeeFreeTemplate } = content || {};
|
|
240
|
-
const
|
|
241
|
-
? { carouselData: rcsPreviewContent }
|
|
242
|
-
: (rcsPreviewContent || {});
|
|
243
|
-
const {
|
|
244
|
-
rcsImageSrc,
|
|
245
|
-
rcsVideoSrc,
|
|
246
|
-
rcsTitle,
|
|
247
|
-
rcsDesc,
|
|
248
|
-
rcsSuggestions,
|
|
249
|
-
carouselData: rcsCarouselData,
|
|
250
|
-
rcsCarouselData: rcsCarouselDataAlt,
|
|
251
|
-
cardVarMapped: rcsCardVarMapped,
|
|
252
|
-
} = normalizedRcsPreviewContent;
|
|
253
|
-
const resolvedRcsCarouselData =
|
|
254
|
-
Array.isArray(rcsCarouselData) && rcsCarouselData.length > 0
|
|
255
|
-
? rcsCarouselData
|
|
256
|
-
: rcsCarouselDataAlt;
|
|
239
|
+
const { rcsImageSrc, rcsVideoSrc, rcsTitle, rcsDesc, rcsSuggestions } = rcsPreviewContent || {};
|
|
257
240
|
const {
|
|
258
241
|
videoParams,
|
|
259
242
|
imageURL,
|
|
@@ -334,18 +317,6 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
334
317
|
'flex-shrink': 0,
|
|
335
318
|
'left': 0,
|
|
336
319
|
};
|
|
337
|
-
|
|
338
|
-
const resolveVarsWithMap = (input, varMap) => {
|
|
339
|
-
if (input === null || input === undefined) return '';
|
|
340
|
-
const str = typeof input === 'string' ? input : String(input);
|
|
341
|
-
return str.replace(TEMPLATE_VAR_REGEX, (token, varName) => {
|
|
342
|
-
const mappedValue = varMap?.[varName];
|
|
343
|
-
if (mappedValue === null || mappedValue === undefined || String(mappedValue) === '') {
|
|
344
|
-
return token;
|
|
345
|
-
}
|
|
346
|
-
return String(mappedValue);
|
|
347
|
-
});
|
|
348
|
-
};
|
|
349
320
|
const getVideoContent = ({
|
|
350
321
|
video,
|
|
351
322
|
actionUrl,
|
|
@@ -502,15 +473,13 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
502
473
|
const whatsappUpdatedAccountName = whatsappAccountName || templateData?.versions?.base?.content?.whatsapp?.accountName || '';
|
|
503
474
|
const whatsappUpdatedLen = whatsappContentLen !== undefined ? whatsappContentLen : content?.charCount;
|
|
504
475
|
|
|
505
|
-
const renderRcsSuggestionsPreview = (
|
|
476
|
+
const renderRcsSuggestionsPreview = () => {
|
|
506
477
|
const renderArray = [];
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
const suggestionKey = `${suggestion?.type || 'unknown'}-${suggestion?.text || ''}-${idx}`;
|
|
510
|
-
renderArray.push(<CapDivider key={`rcs-divider-${suggestionKey}`} className="whatsapp-divider" />);
|
|
478
|
+
(rcsSuggestions || []).forEach((suggestion) => {
|
|
479
|
+
renderArray.push(<CapDivider className="whatsapp-divider" />);
|
|
511
480
|
if (suggestion.type === RCS_BUTTON_TYPES.QUICK_REPLY) {
|
|
512
481
|
renderArray.push(
|
|
513
|
-
<CapLabel
|
|
482
|
+
<CapLabel type="label21" className="rcs-cta-preview">
|
|
514
483
|
<CapIcon
|
|
515
484
|
type='small-link'
|
|
516
485
|
size="xs"
|
|
@@ -520,14 +489,14 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
520
489
|
);
|
|
521
490
|
} else if (suggestion.type === RCS_BUTTON_TYPES.CTA) {
|
|
522
491
|
renderArray.push(
|
|
523
|
-
<CapLabel
|
|
492
|
+
<CapLabel type="label21" className="rcs-cta-preview">
|
|
524
493
|
<CapIcon type="launch" size="xs" />
|
|
525
494
|
{suggestion.text}
|
|
526
495
|
</CapLabel>,
|
|
527
496
|
);
|
|
528
497
|
} else if (suggestion.type === RCS_BUTTON_TYPES.PHONE_NUMBER) {
|
|
529
498
|
renderArray.push(
|
|
530
|
-
<CapLabel
|
|
499
|
+
<CapLabel type="label21" className="rcs-cta-preview">
|
|
531
500
|
<CapIcon type="call" size="xs" />
|
|
532
501
|
{suggestion.text}
|
|
533
502
|
</CapLabel>,
|
|
@@ -540,20 +509,23 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
540
509
|
const renderTextPreviewContent = () => (
|
|
541
510
|
<>
|
|
542
511
|
{rcsTitle && (
|
|
512
|
+
<>
|
|
543
513
|
<CapLabel
|
|
544
514
|
type="label5"
|
|
545
515
|
className="message-pop-item align-left rcs-content"
|
|
546
516
|
fontWeight="bold"
|
|
547
517
|
>
|
|
548
|
-
{
|
|
518
|
+
{rcsTitle}
|
|
549
519
|
</CapLabel>
|
|
520
|
+
<CapDivider className="whatsapp-divider" />
|
|
521
|
+
</>
|
|
550
522
|
)}
|
|
551
523
|
{rcsDesc && (
|
|
552
524
|
<CapLabel
|
|
553
525
|
type="label5"
|
|
554
526
|
className="message-pop-item align-left rcs-desc rcs-content"
|
|
555
527
|
>
|
|
556
|
-
{
|
|
528
|
+
{rcsDesc}
|
|
557
529
|
</CapLabel>
|
|
558
530
|
)}
|
|
559
531
|
{renderRcsSuggestionsPreview()}
|
|
@@ -570,134 +542,50 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
570
542
|
/>
|
|
571
543
|
)}
|
|
572
544
|
{rcsVideoSrc && (
|
|
573
|
-
<
|
|
545
|
+
<div className="video-preview">
|
|
574
546
|
<CapImage
|
|
575
547
|
src={rcsVideoSrc}
|
|
576
548
|
className="rcs-image"
|
|
577
549
|
alt={formatMessage(messages.previewGenerated)}
|
|
578
550
|
/>
|
|
579
|
-
<
|
|
551
|
+
<div className="icon-position">
|
|
580
552
|
<CapImage
|
|
581
553
|
className="video-icon"
|
|
582
554
|
src={videoPlay}
|
|
583
555
|
/>
|
|
584
|
-
</
|
|
585
|
-
</
|
|
556
|
+
</div>
|
|
557
|
+
</div>
|
|
586
558
|
)}
|
|
587
559
|
</>
|
|
588
560
|
);
|
|
589
561
|
|
|
590
562
|
const renderRcsPreviewContent = () => {
|
|
591
|
-
const carouselCards = Array.isArray(resolvedRcsCarouselData) ? resolvedRcsCarouselData : [];
|
|
592
|
-
if (carouselCards.length > 0) {
|
|
593
|
-
return (
|
|
594
|
-
<CapRow className="msg-container sms">
|
|
595
|
-
<CapRow className="message-pop sms">
|
|
596
|
-
<CapRow className="msg-container-carousel">
|
|
597
|
-
<CapRow className="scroll-container">
|
|
598
|
-
{carouselCards.map((card, idx) => {
|
|
599
|
-
const key = `rcs-carousel-${idx}-${card?.bodyText || card?.imageSrc || card?.videoPreviewImg || ''}`;
|
|
600
|
-
const isVideo = (card?.mediaType || '').toLowerCase() === 'video';
|
|
601
|
-
const cardSuggestions = Array.isArray(card?.suggestions) ? card.suggestions : [];
|
|
602
|
-
const effectiveCardVarMap = card?.cardVarMapped || rcsCardVarMapped;
|
|
603
|
-
const suggestionsNode = cardSuggestions.length > 0
|
|
604
|
-
? renderRcsSuggestionsPreview(cardSuggestions)
|
|
605
|
-
: null;
|
|
606
|
-
|
|
607
|
-
const resolvedCardTitle = resolveVarsWithMap(card?.title, effectiveCardVarMap);
|
|
608
|
-
const resolvedCardBodyText = resolveVarsWithMap(card?.bodyText, effectiveCardVarMap);
|
|
609
|
-
|
|
610
|
-
return (
|
|
611
|
-
<CapRow
|
|
612
|
-
key={key}
|
|
613
|
-
className="message-pop align-left message-pop-carousel rcs-carousel-card"
|
|
614
|
-
>
|
|
615
|
-
<CapRow className="whatsapp-content">
|
|
616
|
-
{!isVideo && (
|
|
617
|
-
<CapImage
|
|
618
|
-
src={card?.imageSrc ? card.imageSrc : whatsappImageEmptyPreview}
|
|
619
|
-
className="whatsapp-image"
|
|
620
|
-
alt={formatMessage(messages.previewGenerated)}
|
|
621
|
-
/>
|
|
622
|
-
)}
|
|
623
|
-
{isVideo && (
|
|
624
|
-
<CapTooltip title={formatMessage(messages.videoPreviewTooltip)}>
|
|
625
|
-
<CapRow className="video-preview">
|
|
626
|
-
<CapImage
|
|
627
|
-
src={card?.videoPreviewImg ? card.videoPreviewImg : whatsappVideoEmptyPreview}
|
|
628
|
-
className="whatsapp-image"
|
|
629
|
-
alt={formatMessage(messages.previewGenerated)}
|
|
630
|
-
/>
|
|
631
|
-
<CapRow className="icon-position">
|
|
632
|
-
<CapImage className="video-icon" src={videoPlay} alt="Play" />
|
|
633
|
-
</CapRow>
|
|
634
|
-
</CapRow>
|
|
635
|
-
</CapTooltip>
|
|
636
|
-
)}
|
|
637
|
-
|
|
638
|
-
{(resolvedCardTitle || resolvedCardBodyText) && (
|
|
639
|
-
<CapRow className="carousel-content">
|
|
640
|
-
{!!resolvedCardTitle && (
|
|
641
|
-
<CapLabel
|
|
642
|
-
type={card?.titleLabelType || 'label1'}
|
|
643
|
-
className="carousel-title"
|
|
644
|
-
>
|
|
645
|
-
{resolvedCardTitle}
|
|
646
|
-
</CapLabel>
|
|
647
|
-
)}
|
|
648
|
-
{!!resolvedCardBodyText && (
|
|
649
|
-
<CapLabel
|
|
650
|
-
type={card?.bodyLabelType || 'label2'}
|
|
651
|
-
className="carousel-message"
|
|
652
|
-
>
|
|
653
|
-
{resolvedCardBodyText}
|
|
654
|
-
</CapLabel>
|
|
655
|
-
)}
|
|
656
|
-
</CapRow>
|
|
657
|
-
)}
|
|
658
|
-
|
|
659
|
-
{!!suggestionsNode && (
|
|
660
|
-
<>
|
|
661
|
-
{suggestionsNode}
|
|
662
|
-
</>
|
|
663
|
-
)}
|
|
664
|
-
</CapRow>
|
|
665
|
-
</CapRow>
|
|
666
|
-
);
|
|
667
|
-
})}
|
|
668
|
-
</CapRow>
|
|
669
|
-
</CapRow>
|
|
670
|
-
</CapRow>
|
|
671
|
-
</CapRow>
|
|
672
|
-
);
|
|
673
|
-
}
|
|
674
|
-
|
|
675
563
|
if (rcsOrientation === HORIZONTAL) {
|
|
676
564
|
return rcsType === RIGHT ? (
|
|
677
|
-
<
|
|
678
|
-
<
|
|
565
|
+
<div className="msg-container sms">
|
|
566
|
+
<div className="message-pop sms horizontal">
|
|
679
567
|
<CapColumn className="rcs-preview-text" span={12}>{renderTextPreviewContent()}</CapColumn>
|
|
680
568
|
<CapColumn span={12}>{renderMediaPreviewContent()}</CapColumn>
|
|
681
|
-
</
|
|
682
|
-
</
|
|
569
|
+
</div>
|
|
570
|
+
</div>
|
|
683
571
|
|
|
684
572
|
) : (
|
|
685
|
-
<
|
|
686
|
-
<
|
|
573
|
+
<div className="msg-container sms">
|
|
574
|
+
<div className="message-pop sms horizontal">
|
|
687
575
|
<CapColumn span={12}>{renderMediaPreviewContent()}</CapColumn>
|
|
688
576
|
<CapColumn className="rcs-preview-text" span={12}>{renderTextPreviewContent()}</CapColumn>
|
|
689
|
-
</
|
|
690
|
-
</
|
|
577
|
+
</div>
|
|
578
|
+
</div>
|
|
691
579
|
);
|
|
692
580
|
}
|
|
693
581
|
|
|
694
582
|
return (
|
|
695
|
-
<
|
|
696
|
-
<
|
|
583
|
+
<div className="msg-container sms">
|
|
584
|
+
<div className="message-pop sms">
|
|
697
585
|
{renderMediaPreviewContent()}
|
|
698
586
|
{renderTextPreviewContent()}
|
|
699
|
-
</
|
|
700
|
-
</
|
|
587
|
+
</div>
|
|
588
|
+
</div>
|
|
701
589
|
);
|
|
702
590
|
};
|
|
703
591
|
|
|
@@ -1415,14 +1303,14 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
1415
1303
|
""
|
|
1416
1304
|
)}
|
|
1417
1305
|
{channel?.toUpperCase() === RCS && (
|
|
1418
|
-
<
|
|
1306
|
+
<div className="shell-v2 align-center rcs-preview">
|
|
1419
1307
|
<CapImage
|
|
1420
1308
|
className="preview-image"
|
|
1421
1309
|
src={rcsIosPreview ? smsMobileIos : smsMobileAndroid}
|
|
1422
1310
|
alt={formatMessage(messages.previewGenerated)}
|
|
1423
1311
|
/>
|
|
1424
1312
|
{renderRcsPreviewContent()}
|
|
1425
|
-
</
|
|
1313
|
+
</div>
|
|
1426
1314
|
|
|
1427
1315
|
)}
|
|
1428
1316
|
{channel?.toUpperCase() === ZALO && (
|
|
@@ -1623,4 +1511,4 @@ TemplatePreview.propTypes = {
|
|
|
1623
1511
|
rcsOrientation: PropTypes.string,
|
|
1624
1512
|
};
|
|
1625
1513
|
|
|
1626
|
-
export default (injectIntl(TemplatePreview));
|
|
1514
|
+
export default (injectIntl(TemplatePreview));
|
|
@@ -2,9 +2,6 @@ import React from 'react';
|
|
|
2
2
|
import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
|
|
3
3
|
|
|
4
4
|
import { TemplatePreview } from '../index';
|
|
5
|
-
import { RCS } from '../../../v2Containers/CreativesContainer/constants';
|
|
6
|
-
import whatsappImageEmptyPreview from '../assets/images/empty_image_preview.svg';
|
|
7
|
-
import whatsappVideoEmptyPreview from '../assets/images/empty_video_preview.svg';
|
|
8
5
|
|
|
9
6
|
describe('Test Templates container', () => {
|
|
10
7
|
let renderedComponent;
|
|
@@ -72,143 +69,4 @@ describe('Test Templates container', () => {
|
|
|
72
69
|
});
|
|
73
70
|
expect(renderedComponent).toMatchSnapshot();
|
|
74
71
|
});
|
|
75
|
-
|
|
76
|
-
describe('RCS carousel preview branches', () => {
|
|
77
|
-
const buildRcsContent = (cards) => ({
|
|
78
|
-
rcsPreviewContent: {
|
|
79
|
-
carouselData: cards,
|
|
80
|
-
},
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
const getNodesByClassName = (className) =>
|
|
84
|
-
renderedComponent.findWhere((node) => node.prop('className') === className);
|
|
85
|
-
|
|
86
|
-
it('renders image and video cards with proper media-specific markup', () => {
|
|
87
|
-
renderFunction(
|
|
88
|
-
RCS,
|
|
89
|
-
buildRcsContent([
|
|
90
|
-
{
|
|
91
|
-
mediaType: 'image',
|
|
92
|
-
imageSrc: 'https://example.com/image-card.jpg',
|
|
93
|
-
bodyText: 'image body',
|
|
94
|
-
suggestions: [],
|
|
95
|
-
},
|
|
96
|
-
{
|
|
97
|
-
mediaType: 'video',
|
|
98
|
-
videoPreviewImg: 'https://example.com/video-thumb.jpg',
|
|
99
|
-
bodyText: 'video body',
|
|
100
|
-
suggestions: [],
|
|
101
|
-
},
|
|
102
|
-
]),
|
|
103
|
-
'',
|
|
104
|
-
0,
|
|
105
|
-
);
|
|
106
|
-
|
|
107
|
-
// Video card should render tooltip/video icon path; image-only card should not.
|
|
108
|
-
expect(renderedComponent.find('CapTooltip')).toHaveLength(1);
|
|
109
|
-
expect(
|
|
110
|
-
renderedComponent.findWhere((node) => node.prop('className') === 'video-icon')
|
|
111
|
-
).toHaveLength(1);
|
|
112
|
-
|
|
113
|
-
// Both cards render media containers.
|
|
114
|
-
expect(
|
|
115
|
-
renderedComponent.findWhere((node) => node.prop('className') === 'whatsapp-image')
|
|
116
|
-
).toHaveLength(2);
|
|
117
|
-
});
|
|
118
|
-
|
|
119
|
-
it('renders per-card suggestions only for cards that provide suggestions', () => {
|
|
120
|
-
renderFunction(
|
|
121
|
-
RCS,
|
|
122
|
-
buildRcsContent([
|
|
123
|
-
{
|
|
124
|
-
mediaType: 'image',
|
|
125
|
-
imageSrc: 'https://example.com/with-suggestions.jpg',
|
|
126
|
-
bodyText: 'has suggestions',
|
|
127
|
-
suggestions: [
|
|
128
|
-
{ type: 'QUICK_REPLY', text: 'Reply 1' },
|
|
129
|
-
{ type: 'CTA', text: 'Visit' },
|
|
130
|
-
],
|
|
131
|
-
},
|
|
132
|
-
{
|
|
133
|
-
mediaType: 'image',
|
|
134
|
-
imageSrc: 'https://example.com/no-suggestions.jpg',
|
|
135
|
-
bodyText: 'no suggestions',
|
|
136
|
-
suggestions: [],
|
|
137
|
-
},
|
|
138
|
-
]),
|
|
139
|
-
'',
|
|
140
|
-
0,
|
|
141
|
-
);
|
|
142
|
-
|
|
143
|
-
// Suggestion labels/icons should be rendered only from first card.
|
|
144
|
-
expect(getNodesByClassName('rcs-cta-preview')).toHaveLength(2);
|
|
145
|
-
expect(getNodesByClassName('whatsapp-divider')).not.toHaveLength(0);
|
|
146
|
-
});
|
|
147
|
-
|
|
148
|
-
it('falls back to empty preview assets when image/video media src is missing', () => {
|
|
149
|
-
renderFunction(
|
|
150
|
-
RCS,
|
|
151
|
-
buildRcsContent([
|
|
152
|
-
{
|
|
153
|
-
mediaType: 'image',
|
|
154
|
-
bodyText: 'fallback image',
|
|
155
|
-
suggestions: [],
|
|
156
|
-
},
|
|
157
|
-
{
|
|
158
|
-
mediaType: 'video',
|
|
159
|
-
bodyText: 'fallback video',
|
|
160
|
-
suggestions: [],
|
|
161
|
-
},
|
|
162
|
-
]),
|
|
163
|
-
'',
|
|
164
|
-
0,
|
|
165
|
-
);
|
|
166
|
-
|
|
167
|
-
const mediaImageNodes = renderedComponent.findWhere(
|
|
168
|
-
(node) => node.name() === 'CapImage' && node.prop('className') === 'whatsapp-image'
|
|
169
|
-
);
|
|
170
|
-
const mediaSrcs = mediaImageNodes.map((node) => node.prop('src'));
|
|
171
|
-
|
|
172
|
-
expect(mediaSrcs).toContain(whatsappImageEmptyPreview);
|
|
173
|
-
expect(mediaSrcs).toContain(whatsappVideoEmptyPreview);
|
|
174
|
-
});
|
|
175
|
-
|
|
176
|
-
it('generates unique carousel keys using rcs-carousel-<idx>-<bodyText|imageSrc|videoPreviewImg>', () => {
|
|
177
|
-
renderFunction(
|
|
178
|
-
RCS,
|
|
179
|
-
buildRcsContent([
|
|
180
|
-
{
|
|
181
|
-
mediaType: 'image',
|
|
182
|
-
imageSrc: 'https://example.com/one.jpg',
|
|
183
|
-
bodyText: 'same body',
|
|
184
|
-
suggestions: [],
|
|
185
|
-
},
|
|
186
|
-
{
|
|
187
|
-
mediaType: 'image',
|
|
188
|
-
imageSrc: 'https://example.com/two.jpg',
|
|
189
|
-
bodyText: 'same body',
|
|
190
|
-
suggestions: [],
|
|
191
|
-
},
|
|
192
|
-
{
|
|
193
|
-
mediaType: 'video',
|
|
194
|
-
videoPreviewImg: 'https://example.com/three-thumb.jpg',
|
|
195
|
-
bodyText: 'same body',
|
|
196
|
-
suggestions: [],
|
|
197
|
-
},
|
|
198
|
-
]),
|
|
199
|
-
'',
|
|
200
|
-
0,
|
|
201
|
-
);
|
|
202
|
-
|
|
203
|
-
const cardNodes = getNodesByClassName('message-pop align-left message-pop-carousel rcs-carousel-card');
|
|
204
|
-
const keys = cardNodes.map((node) => node.key());
|
|
205
|
-
|
|
206
|
-
expect(keys).toEqual([
|
|
207
|
-
'rcs-carousel-0-same body',
|
|
208
|
-
'rcs-carousel-1-same body',
|
|
209
|
-
'rcs-carousel-2-same body',
|
|
210
|
-
]);
|
|
211
|
-
expect(new Set(keys).size).toBe(keys.length);
|
|
212
|
-
});
|
|
213
|
-
});
|
|
214
72
|
});
|
|
@@ -18,7 +18,7 @@ import injectReducer from '../../utils/injectReducer';
|
|
|
18
18
|
import injectSaga from '../../utils/injectSaga';
|
|
19
19
|
|
|
20
20
|
import CommonTestAndPreview from '../CommonTestAndPreview';
|
|
21
|
-
import { CHANNELS
|
|
21
|
+
import { CHANNELS } from '../CommonTestAndPreview/constants';
|
|
22
22
|
import * as commonTestAndPreviewActions from '../CommonTestAndPreview/actions';
|
|
23
23
|
import { commonTestAndPreviewSaga } from '../CommonTestAndPreview/sagas';
|
|
24
24
|
import commonTestAndPreviewReducer from '../CommonTestAndPreview/reducer';
|
|
@@ -78,16 +78,6 @@ TestAndPreviewSlidebox.propTypes = {
|
|
|
78
78
|
content: PropTypes.string,
|
|
79
79
|
beeInstance: PropTypes.object,
|
|
80
80
|
currentTab: PropTypes.number,
|
|
81
|
-
smsFallbackContent: PropTypes.shape({
|
|
82
|
-
templateContent: PropTypes.string,
|
|
83
|
-
senderId: PropTypes.string,
|
|
84
|
-
templateName: PropTypes.string,
|
|
85
|
-
[RCS_SMS_FALLBACK_VAR_MAPPED_PROP]: PropTypes.object,
|
|
86
|
-
}),
|
|
87
|
-
/** Passed to CommonTestAndPreview for RCS test-meta resolution (slot semantics vs full-mode). */
|
|
88
|
-
rcsTestPreviewOptions: PropTypes.shape({
|
|
89
|
-
isLibraryMode: PropTypes.bool,
|
|
90
|
-
}),
|
|
91
81
|
// Redux props are passed through
|
|
92
82
|
actions: PropTypes.object.isRequired,
|
|
93
83
|
extractedTags: PropTypes.array.isRequired,
|
|
@@ -119,12 +109,10 @@ TestAndPreviewSlidebox.defaultProps = {
|
|
|
119
109
|
currentTab: 1,
|
|
120
110
|
messageMetaConfigId: null,
|
|
121
111
|
prefilledValues: {},
|
|
122
|
-
rcsTestPreviewOptions: undefined,
|
|
123
112
|
senderDetailsByChannel: {},
|
|
124
113
|
wecrmAccounts: [],
|
|
125
114
|
isLoadingSenderDetails: false,
|
|
126
115
|
orgUnitId: -1,
|
|
127
|
-
smsFallbackContent: null,
|
|
128
116
|
};
|
|
129
117
|
|
|
130
118
|
const mapStateToProps = createStructuredSelector({
|
|
@@ -34,7 +34,6 @@ import {
|
|
|
34
34
|
GET_PREFILLED_VALUES_SUCCESS,
|
|
35
35
|
GET_PREFILLED_VALUES_FAILURE,
|
|
36
36
|
} from './constants';
|
|
37
|
-
import { extractPreviewFromLiquidResponse } from '../CommonTestAndPreview/previewApiUtils';
|
|
38
37
|
|
|
39
38
|
// Search Customers Saga
|
|
40
39
|
export function* searchCustomersSaga(action) {
|
|
@@ -81,12 +80,11 @@ export function* updatePreviewSaga(action) {
|
|
|
81
80
|
const customValues = action.payload.resolvedTags;
|
|
82
81
|
|
|
83
82
|
const response = yield call(Api.updateEmailPreview, action.payload);
|
|
84
|
-
|
|
85
|
-
if (previewPayload) {
|
|
83
|
+
if (response?.data) {
|
|
86
84
|
yield put({
|
|
87
85
|
type: UPDATE_PREVIEW_SUCCESS,
|
|
88
86
|
payload: {
|
|
89
|
-
previewData:
|
|
87
|
+
previewData: response.data,
|
|
90
88
|
customValues, // Pass custom values to be preserved
|
|
91
89
|
},
|
|
92
90
|
});
|
|
@@ -223,13 +221,8 @@ export function* createMessageMetaSaga(action) {
|
|
|
223
221
|
export function* getPrefilledValuesSaga(action) {
|
|
224
222
|
try {
|
|
225
223
|
const response = yield call(Api.updateEmailPreview, action.payload);
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
? response.data
|
|
229
|
-
: response;
|
|
230
|
-
const resolvedTagValues = body?.resolvedTagValues;
|
|
231
|
-
if (resolvedTagValues != null) {
|
|
232
|
-
yield put({ type: GET_PREFILLED_VALUES_SUCCESS, payload: { values: resolvedTagValues } });
|
|
224
|
+
if (response?.data) {
|
|
225
|
+
yield put({ type: GET_PREFILLED_VALUES_SUCCESS, payload: { values: response?.data?.resolvedTagValues } });
|
|
233
226
|
} else {
|
|
234
227
|
yield put({ type: GET_PREFILLED_VALUES_FAILURE, payload: { error: response.error || 'Failed to fetch prefilled values' } });
|
|
235
228
|
}
|
|
@@ -136,9 +136,7 @@ describe('TestAndPreviewSlidebox Sagas', () => {
|
|
|
136
136
|
describe('updatePreviewSaga', () => {
|
|
137
137
|
it('should handle successful preview update', () => {
|
|
138
138
|
const mockResponse = {
|
|
139
|
-
data:
|
|
140
|
-
resolvedBody: 'Test Preview Data',
|
|
141
|
-
},
|
|
139
|
+
data: 'Test Preview Data',
|
|
142
140
|
};
|
|
143
141
|
const customValues = { test: 'value' };
|
|
144
142
|
return expectSaga(sagas.updatePreviewSaga, {
|
|
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import get from 'lodash/get';
|
|
5
5
|
import isEmpty from 'lodash/isEmpty';
|
|
6
|
-
import pick from 'lodash/pick';
|
|
7
6
|
import cloneDeep from 'lodash/cloneDeep';
|
|
8
7
|
import TemplatesV2 from '../TemplatesV2';
|
|
9
8
|
import TemplatePreview from '../../v2Components/TemplatePreview';
|
|
@@ -26,7 +25,6 @@ import Viber from '../Viber';
|
|
|
26
25
|
import Whatsapp from '../Whatsapp';
|
|
27
26
|
import InApp from '../InApp';
|
|
28
27
|
import Rcs from '../Rcs';
|
|
29
|
-
import { isRcsTextOnlyCardMediaType, resolveRcsCardPreviewStrings } from '../Rcs/utils';
|
|
30
28
|
import { getWhatsappContent } from '../Whatsapp/utils';
|
|
31
29
|
import * as commonUtil from '../../utils/common';
|
|
32
30
|
import Zalo from '../Zalo';
|
|
@@ -182,8 +180,6 @@ export function SlideBoxContent(props) {
|
|
|
182
180
|
isTestAndPreviewMode,
|
|
183
181
|
onHtmlEditorValidationStateChange,
|
|
184
182
|
} = props;
|
|
185
|
-
const localTemplatesConfig = props.localTemplatesConfig || pick(props, constants.LOCAL_TEMPLATE_CONFIG_KEYS);
|
|
186
|
-
const useLocalTemplates = !!get(localTemplatesConfig, 'useLocalTemplates');
|
|
187
183
|
const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
|
|
188
184
|
const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
|
|
189
185
|
const creativesLocationProps = {
|
|
@@ -403,37 +399,12 @@ export function SlideBoxContent(props) {
|
|
|
403
399
|
}
|
|
404
400
|
case constants.RCS: {
|
|
405
401
|
const template = cloneDeep(templateDataObject);
|
|
406
|
-
const
|
|
407
|
-
const card = get(template, cardPath, {}) || {};
|
|
408
|
-
const {
|
|
409
|
-
description = '',
|
|
410
|
-
media: { mediaUrl = '' } = {},
|
|
411
|
-
title = '',
|
|
412
|
-
mediaType: cardMediaType,
|
|
413
|
-
suggestions = [],
|
|
414
|
-
cardVarMapped: nestedCardVarMapped,
|
|
415
|
-
} = card;
|
|
416
|
-
const rootMirror = templateDataObject?.rcsCardVarMapped;
|
|
417
|
-
const nestedRecord =
|
|
418
|
-
nestedCardVarMapped != null && typeof nestedCardVarMapped === 'object'
|
|
419
|
-
? nestedCardVarMapped
|
|
420
|
-
: {};
|
|
421
|
-
const rootRecord =
|
|
422
|
-
rootMirror != null && typeof rootMirror === 'object' ? rootMirror : {};
|
|
423
|
-
const mergedCardVarMapped = { ...rootRecord, ...nestedRecord };
|
|
424
|
-
const textOnlyCard = isRcsTextOnlyCardMediaType(cardMediaType);
|
|
425
|
-
const { rcsTitle, rcsDesc } = resolveRcsCardPreviewStrings(
|
|
426
|
-
title,
|
|
427
|
-
description,
|
|
428
|
-
mergedCardVarMapped,
|
|
429
|
-
!isFullMode,
|
|
430
|
-
textOnlyCard,
|
|
431
|
-
);
|
|
402
|
+
const { description = "", media: { mediaUrl = "" } = {}, title = "", suggestions = [] } = get(template, 'versions.base.content.RCS.rcsContent.cardContent[0]', {});
|
|
432
403
|
return {
|
|
433
404
|
rcsPreviewContent: {
|
|
434
405
|
rcsImageSrc: mediaUrl,
|
|
435
|
-
rcsTitle,
|
|
436
|
-
rcsDesc,
|
|
406
|
+
rcsTitle: title,
|
|
407
|
+
rcsDesc: description,
|
|
437
408
|
...(suggestions.length > 0 && {
|
|
438
409
|
buttonText: suggestions[0]?.text,
|
|
439
410
|
}),
|
|
@@ -459,7 +430,7 @@ export function SlideBoxContent(props) {
|
|
|
459
430
|
|
|
460
431
|
return (
|
|
461
432
|
<CreativesWrapper>
|
|
462
|
-
{slidBoxContent === 'templates' && (
|
|
433
|
+
{!isFullMode && slidBoxContent === 'templates' && (
|
|
463
434
|
<TemplatesV2
|
|
464
435
|
isFullMode={isFullMode}
|
|
465
436
|
onSelectTemplate={onSelectTemplate}
|
|
@@ -492,7 +463,6 @@ export function SlideBoxContent(props) {
|
|
|
492
463
|
waitEventContextTags={waitEventContextTags}
|
|
493
464
|
loyaltyMetaData={loyaltyMetaData}
|
|
494
465
|
isLoyaltyModule={isLoyaltyModule}
|
|
495
|
-
localTemplatesConfig={localTemplatesConfig}
|
|
496
466
|
/>
|
|
497
467
|
)}
|
|
498
468
|
{isPreview && (
|
|
@@ -663,7 +633,6 @@ export function SlideBoxContent(props) {
|
|
|
663
633
|
route={{ name: 'sms' }}
|
|
664
634
|
isCreateSms={isCreateSms}
|
|
665
635
|
isComponent
|
|
666
|
-
templateData={templateData}
|
|
667
636
|
isGetFormData={isGetFormData}
|
|
668
637
|
getFormSubscriptionData={getFormData}
|
|
669
638
|
getLiquidTags={getLiquidTags}
|
|
@@ -1270,7 +1239,6 @@ export function SlideBoxContent(props) {
|
|
|
1270
1239
|
)}
|
|
1271
1240
|
{isCreateRcs && (<Rcs
|
|
1272
1241
|
{...rcsCommonProps}
|
|
1273
|
-
templateData={templateData}
|
|
1274
1242
|
showLiquidErrorInFooter={showLiquidErrorInFooter}
|
|
1275
1243
|
showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
|
|
1276
1244
|
handleTestAndPreview={handleTestAndPreview}
|
|
@@ -49,8 +49,6 @@ function SlideBoxFooter(props) {
|
|
|
49
49
|
isAnonymousType = false,
|
|
50
50
|
templateData = {},
|
|
51
51
|
hasPersonalizationTokenError: hasPersonalizationTokenErrorProp = false,
|
|
52
|
-
/** When set (e.g. SMS library create), overrides `creativesTemplatesSave` (“Done”) for the primary button */
|
|
53
|
-
primarySaveButtonMessage,
|
|
54
52
|
} = props;
|
|
55
53
|
// Calculate if buttons should be disabled
|
|
56
54
|
// Only apply validation state checks for EMAIL channel in HTML Editor mode (not BEE/DragDrop)
|
|
@@ -189,9 +187,7 @@ function SlideBoxFooter(props) {
|
|
|
189
187
|
onClick={onSave}
|
|
190
188
|
disabled={isTemplateNameEmpty || fetchingCmsData || shouldDisableButtons || hasPersonalizationTokenError}
|
|
191
189
|
>
|
|
192
|
-
{
|
|
193
|
-
<FormattedMessage {...primarySaveButtonMessage} />
|
|
194
|
-
) : isFullMode ? (
|
|
190
|
+
{isFullMode ? (
|
|
195
191
|
getFullModeSaveBtn(slidBoxContent, isCreatingTemplate)
|
|
196
192
|
) : (
|
|
197
193
|
<FormattedMessage {...messages.creativesTemplatesSave} />
|
|
@@ -268,10 +264,6 @@ SlideBoxFooter.propTypes = {
|
|
|
268
264
|
templateData: PropTypes.object,
|
|
269
265
|
formData: PropTypes.array,
|
|
270
266
|
hasPersonalizationTokenError: PropTypes.bool,
|
|
271
|
-
primarySaveButtonMessage: PropTypes.shape({
|
|
272
|
-
id: PropTypes.string,
|
|
273
|
-
defaultMessage: PropTypes.string,
|
|
274
|
-
}),
|
|
275
267
|
};
|
|
276
268
|
|
|
277
269
|
SlideBoxFooter.defaultProps = {
|
|
@@ -299,6 +291,5 @@ SlideBoxFooter.defaultProps = {
|
|
|
299
291
|
selectedEmailCreateMode: '',
|
|
300
292
|
formData: [],
|
|
301
293
|
hasPersonalizationTokenError: false,
|
|
302
|
-
primarySaveButtonMessage: undefined,
|
|
303
294
|
};
|
|
304
295
|
export default SlideBoxFooter;
|