@capillarytech/creatives-library 8.0.345-alpha.15 → 8.0.345-alpha.16
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/package.json +1 -1
- package/services/tests/api.test.js +0 -13
- package/utils/commonUtils.js +1 -19
- package/v2Components/CapActionButton/constants.js +0 -7
- package/v2Components/CapActionButton/index.js +109 -167
- 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 -70
- package/v2Components/CommonTestAndPreview/DeliverySettings/DeliverySettings.scss +2 -8
- package/v2Components/CommonTestAndPreview/DeliverySettings/ModifyDeliverySettings.js +21 -207
- 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 -160
- package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +76 -341
- 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 -676
- package/v2Components/CommonTestAndPreview/messages.js +3 -49
- package/v2Components/CommonTestAndPreview/sagas.js +6 -15
- 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 +2 -2
- package/v2Components/FormBuilder/index.js +10 -8
- package/v2Components/TemplatePreview/_templatePreview.scss +23 -33
- package/v2Components/TemplatePreview/index.js +28 -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 -300
- 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/Email/reducer.js +12 -3
- package/v2Containers/Email/sagas.js +9 -4
- package/v2Containers/Email/tests/__snapshots__/reducer.test.js.snap +4 -0
- package/v2Containers/Email/tests/reducer.test.js +47 -0
- package/v2Containers/Email/tests/sagas.test.js +146 -6
- package/v2Containers/Rcs/constants.js +8 -119
- package/v2Containers/Rcs/index.js +811 -2383
- package/v2Containers/Rcs/index.scss +6 -276
- package/v2Containers/Rcs/messages.js +3 -38
- 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 -100
- package/v2Containers/SmsTrai/Create/index.js +4 -9
- package/v2Containers/SmsTrai/Edit/constants.js +0 -2
- package/v2Containers/SmsTrai/Edit/index.js +130 -636
- 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 +2 -163
- package/v2Containers/Templates/actions.js +0 -11
- package/v2Containers/Templates/constants.js +0 -2
- package/v2Containers/Templates/index.js +54 -119
- package/v2Containers/Templates/sagas.js +12 -57
- package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +1079 -1043
- package/v2Containers/Templates/tests/sagas.test.js +123 -193
- package/v2Containers/TemplatesV2/TemplatesV2.style.js +1 -72
- package/v2Containers/TemplatesV2/index.js +23 -86
- 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/templateVarUtils.test.js +0 -204
- package/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js.rej +0 -18
- package/v2Components/CommonTestAndPreview/previewApiUtils.js +0 -59
- package/v2Components/CommonTestAndPreview/tests/previewApiUtils.test.js +0 -67
- package/v2Components/SmsFallback/SmsFallbackLocalSelector.js +0 -87
- package/v2Components/SmsFallback/constants.js +0 -73
- package/v2Components/SmsFallback/index.js +0 -955
- package/v2Components/SmsFallback/index.scss +0 -265
- package/v2Components/SmsFallback/messages.js +0 -78
- package/v2Components/SmsFallback/smsFallbackUtils.js +0 -118
- 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 -197
- package/v2Components/SmsFallback/tests/smsFallbackUtils.test.js +0 -277
- 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 -67
- 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/index.js.rej +0 -1336
- package/v2Containers/Rcs/index.scss.rej +0 -74
- package/v2Containers/Rcs/rcsLibraryHydrationUtils.js +0 -225
- package/v2Containers/Rcs/tests/__snapshots__/utils.test.js.snap.rej +0 -128
- 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 } from '../../v2Containe
|
|
|
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');
|
|
@@ -235,23 +234,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
235
234
|
let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
|
|
236
235
|
const { formatMessage } = intl;
|
|
237
236
|
const { rcsPreviewContent, inAppPreviewContent, viberPreviewContent, isBeeFreeTemplate } = content || {};
|
|
238
|
-
const
|
|
239
|
-
? { carouselData: rcsPreviewContent }
|
|
240
|
-
: (rcsPreviewContent || {});
|
|
241
|
-
const {
|
|
242
|
-
rcsImageSrc,
|
|
243
|
-
rcsVideoSrc,
|
|
244
|
-
rcsTitle,
|
|
245
|
-
rcsDesc,
|
|
246
|
-
rcsSuggestions,
|
|
247
|
-
carouselData: rcsCarouselData,
|
|
248
|
-
rcsCarouselData: rcsCarouselDataAlt,
|
|
249
|
-
cardVarMapped: rcsCardVarMapped,
|
|
250
|
-
} = normalizedRcsPreviewContent;
|
|
251
|
-
const resolvedRcsCarouselData =
|
|
252
|
-
Array.isArray(rcsCarouselData) && rcsCarouselData.length > 0
|
|
253
|
-
? rcsCarouselData
|
|
254
|
-
: rcsCarouselDataAlt;
|
|
237
|
+
const { rcsImageSrc, rcsVideoSrc, rcsTitle, rcsDesc, rcsSuggestions } = rcsPreviewContent || {};
|
|
255
238
|
const {
|
|
256
239
|
videoParams,
|
|
257
240
|
imageURL,
|
|
@@ -332,18 +315,6 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
332
315
|
'flex-shrink': 0,
|
|
333
316
|
'left': 0,
|
|
334
317
|
};
|
|
335
|
-
|
|
336
|
-
const resolveVarsWithMap = (input, varMap) => {
|
|
337
|
-
if (input === null || input === undefined) return '';
|
|
338
|
-
const str = typeof input === 'string' ? input : String(input);
|
|
339
|
-
return str.replace(TEMPLATE_VAR_REGEX, (token, varName) => {
|
|
340
|
-
const mappedValue = varMap?.[varName];
|
|
341
|
-
if (mappedValue === null || mappedValue === undefined || String(mappedValue) === '') {
|
|
342
|
-
return token;
|
|
343
|
-
}
|
|
344
|
-
return String(mappedValue);
|
|
345
|
-
});
|
|
346
|
-
};
|
|
347
318
|
const getVideoContent = ({
|
|
348
319
|
video,
|
|
349
320
|
actionUrl,
|
|
@@ -500,15 +471,13 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
500
471
|
const whatsappUpdatedAccountName = whatsappAccountName || templateData?.versions?.base?.content?.whatsapp?.accountName || '';
|
|
501
472
|
const whatsappUpdatedLen = whatsappContentLen !== undefined ? whatsappContentLen : content?.charCount;
|
|
502
473
|
|
|
503
|
-
const renderRcsSuggestionsPreview = (
|
|
474
|
+
const renderRcsSuggestionsPreview = () => {
|
|
504
475
|
const renderArray = [];
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
const suggestionKey = `${suggestion?.type || 'unknown'}-${suggestion?.text || ''}-${idx}`;
|
|
508
|
-
renderArray.push(<CapDivider key={`rcs-divider-${suggestionKey}`} className="whatsapp-divider" />);
|
|
476
|
+
(rcsSuggestions || []).forEach((suggestion) => {
|
|
477
|
+
renderArray.push(<CapDivider className="whatsapp-divider" />);
|
|
509
478
|
if (suggestion.type === RCS_BUTTON_TYPES.QUICK_REPLY) {
|
|
510
479
|
renderArray.push(
|
|
511
|
-
<CapLabel
|
|
480
|
+
<CapLabel type="label21" className="rcs-cta-preview">
|
|
512
481
|
<CapIcon
|
|
513
482
|
type='small-link'
|
|
514
483
|
size="xs"
|
|
@@ -518,14 +487,14 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
518
487
|
);
|
|
519
488
|
} else if (suggestion.type === RCS_BUTTON_TYPES.CTA) {
|
|
520
489
|
renderArray.push(
|
|
521
|
-
<CapLabel
|
|
490
|
+
<CapLabel type="label21" className="rcs-cta-preview">
|
|
522
491
|
<CapIcon type="launch" size="xs" />
|
|
523
492
|
{suggestion.text}
|
|
524
493
|
</CapLabel>,
|
|
525
494
|
);
|
|
526
495
|
} else if (suggestion.type === RCS_BUTTON_TYPES.PHONE_NUMBER) {
|
|
527
496
|
renderArray.push(
|
|
528
|
-
<CapLabel
|
|
497
|
+
<CapLabel type="label21" className="rcs-cta-preview">
|
|
529
498
|
<CapIcon type="call" size="xs" />
|
|
530
499
|
{suggestion.text}
|
|
531
500
|
</CapLabel>,
|
|
@@ -544,7 +513,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
544
513
|
className="message-pop-item align-left rcs-content"
|
|
545
514
|
fontWeight="bold"
|
|
546
515
|
>
|
|
547
|
-
{
|
|
516
|
+
{rcsTitle}
|
|
548
517
|
</CapLabel>
|
|
549
518
|
<CapDivider className="whatsapp-divider" />
|
|
550
519
|
</>
|
|
@@ -554,7 +523,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
554
523
|
type="label5"
|
|
555
524
|
className="message-pop-item align-left rcs-desc rcs-content"
|
|
556
525
|
>
|
|
557
|
-
{
|
|
526
|
+
{rcsDesc}
|
|
558
527
|
</CapLabel>
|
|
559
528
|
)}
|
|
560
529
|
{renderRcsSuggestionsPreview()}
|
|
@@ -571,134 +540,50 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
571
540
|
/>
|
|
572
541
|
)}
|
|
573
542
|
{rcsVideoSrc && (
|
|
574
|
-
<
|
|
543
|
+
<div className="video-preview">
|
|
575
544
|
<CapImage
|
|
576
545
|
src={rcsVideoSrc}
|
|
577
546
|
className="rcs-image"
|
|
578
547
|
alt={formatMessage(messages.previewGenerated)}
|
|
579
548
|
/>
|
|
580
|
-
<
|
|
549
|
+
<div className="icon-position">
|
|
581
550
|
<CapImage
|
|
582
551
|
className="video-icon"
|
|
583
552
|
src={videoPlay}
|
|
584
553
|
/>
|
|
585
|
-
</
|
|
586
|
-
</
|
|
554
|
+
</div>
|
|
555
|
+
</div>
|
|
587
556
|
)}
|
|
588
557
|
</>
|
|
589
558
|
);
|
|
590
559
|
|
|
591
560
|
const renderRcsPreviewContent = () => {
|
|
592
|
-
const carouselCards = Array.isArray(resolvedRcsCarouselData) ? resolvedRcsCarouselData : [];
|
|
593
|
-
if (carouselCards.length > 0) {
|
|
594
|
-
return (
|
|
595
|
-
<CapRow className="msg-container sms">
|
|
596
|
-
<CapRow className="message-pop sms">
|
|
597
|
-
<CapRow className="msg-container-carousel">
|
|
598
|
-
<CapRow className="scroll-container">
|
|
599
|
-
{carouselCards.map((card, idx) => {
|
|
600
|
-
const key = `rcs-carousel-${idx}-${card?.bodyText || card?.imageSrc || card?.videoPreviewImg || ''}`;
|
|
601
|
-
const isVideo = (card?.mediaType || '').toLowerCase() === 'video';
|
|
602
|
-
const cardSuggestions = Array.isArray(card?.suggestions) ? card.suggestions : [];
|
|
603
|
-
const effectiveCardVarMap = card?.cardVarMapped || rcsCardVarMapped;
|
|
604
|
-
const suggestionsNode = cardSuggestions.length > 0
|
|
605
|
-
? renderRcsSuggestionsPreview(cardSuggestions)
|
|
606
|
-
: null;
|
|
607
|
-
|
|
608
|
-
const resolvedCardTitle = resolveVarsWithMap(card?.title, effectiveCardVarMap);
|
|
609
|
-
const resolvedCardBodyText = resolveVarsWithMap(card?.bodyText, effectiveCardVarMap);
|
|
610
|
-
|
|
611
|
-
return (
|
|
612
|
-
<CapRow
|
|
613
|
-
key={key}
|
|
614
|
-
className="message-pop align-left message-pop-carousel rcs-carousel-card"
|
|
615
|
-
>
|
|
616
|
-
<CapRow className="whatsapp-content">
|
|
617
|
-
{!isVideo && (
|
|
618
|
-
<CapImage
|
|
619
|
-
src={card?.imageSrc ? card.imageSrc : whatsappImageEmptyPreview}
|
|
620
|
-
className="whatsapp-image"
|
|
621
|
-
alt={formatMessage(messages.previewGenerated)}
|
|
622
|
-
/>
|
|
623
|
-
)}
|
|
624
|
-
{isVideo && (
|
|
625
|
-
<CapTooltip title={formatMessage(messages.videoPreviewTooltip)}>
|
|
626
|
-
<CapRow className="video-preview">
|
|
627
|
-
<CapImage
|
|
628
|
-
src={card?.videoPreviewImg ? card.videoPreviewImg : whatsappVideoEmptyPreview}
|
|
629
|
-
className="whatsapp-image"
|
|
630
|
-
alt={formatMessage(messages.previewGenerated)}
|
|
631
|
-
/>
|
|
632
|
-
<CapRow className="icon-position">
|
|
633
|
-
<CapImage className="video-icon" src={videoPlay} alt="Play" />
|
|
634
|
-
</CapRow>
|
|
635
|
-
</CapRow>
|
|
636
|
-
</CapTooltip>
|
|
637
|
-
)}
|
|
638
|
-
|
|
639
|
-
{(resolvedCardTitle || resolvedCardBodyText) && (
|
|
640
|
-
<CapRow className="carousel-content">
|
|
641
|
-
{!!resolvedCardTitle && (
|
|
642
|
-
<CapLabel
|
|
643
|
-
type={card?.titleLabelType || 'label1'}
|
|
644
|
-
className="carousel-title"
|
|
645
|
-
>
|
|
646
|
-
{resolvedCardTitle}
|
|
647
|
-
</CapLabel>
|
|
648
|
-
)}
|
|
649
|
-
{!!resolvedCardBodyText && (
|
|
650
|
-
<CapLabel
|
|
651
|
-
type={card?.bodyLabelType || 'label2'}
|
|
652
|
-
className="carousel-message"
|
|
653
|
-
>
|
|
654
|
-
{resolvedCardBodyText}
|
|
655
|
-
</CapLabel>
|
|
656
|
-
)}
|
|
657
|
-
</CapRow>
|
|
658
|
-
)}
|
|
659
|
-
|
|
660
|
-
{!!suggestionsNode && (
|
|
661
|
-
<>
|
|
662
|
-
{suggestionsNode}
|
|
663
|
-
</>
|
|
664
|
-
)}
|
|
665
|
-
</CapRow>
|
|
666
|
-
</CapRow>
|
|
667
|
-
);
|
|
668
|
-
})}
|
|
669
|
-
</CapRow>
|
|
670
|
-
</CapRow>
|
|
671
|
-
</CapRow>
|
|
672
|
-
</CapRow>
|
|
673
|
-
);
|
|
674
|
-
}
|
|
675
|
-
|
|
676
561
|
if (rcsOrientation === HORIZONTAL) {
|
|
677
562
|
return rcsType === RIGHT ? (
|
|
678
|
-
<
|
|
679
|
-
<
|
|
563
|
+
<div className="msg-container sms">
|
|
564
|
+
<div className="message-pop sms horizontal">
|
|
680
565
|
<CapColumn className="rcs-preview-text" span={12}>{renderTextPreviewContent()}</CapColumn>
|
|
681
566
|
<CapColumn span={12}>{renderMediaPreviewContent()}</CapColumn>
|
|
682
|
-
</
|
|
683
|
-
</
|
|
567
|
+
</div>
|
|
568
|
+
</div>
|
|
684
569
|
|
|
685
570
|
) : (
|
|
686
|
-
<
|
|
687
|
-
<
|
|
571
|
+
<div className="msg-container sms">
|
|
572
|
+
<div className="message-pop sms horizontal">
|
|
688
573
|
<CapColumn span={12}>{renderMediaPreviewContent()}</CapColumn>
|
|
689
574
|
<CapColumn className="rcs-preview-text" span={12}>{renderTextPreviewContent()}</CapColumn>
|
|
690
|
-
</
|
|
691
|
-
</
|
|
575
|
+
</div>
|
|
576
|
+
</div>
|
|
692
577
|
);
|
|
693
578
|
}
|
|
694
579
|
|
|
695
580
|
return (
|
|
696
|
-
<
|
|
697
|
-
<
|
|
581
|
+
<div className="msg-container sms">
|
|
582
|
+
<div className="message-pop sms">
|
|
698
583
|
{renderMediaPreviewContent()}
|
|
699
584
|
{renderTextPreviewContent()}
|
|
700
|
-
</
|
|
701
|
-
</
|
|
585
|
+
</div>
|
|
586
|
+
</div>
|
|
702
587
|
);
|
|
703
588
|
};
|
|
704
589
|
|
|
@@ -1406,14 +1291,14 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
|
|
|
1406
1291
|
""
|
|
1407
1292
|
)}
|
|
1408
1293
|
{channel?.toUpperCase() === RCS && (
|
|
1409
|
-
<
|
|
1294
|
+
<div className="shell-v2 align-center rcs-preview">
|
|
1410
1295
|
<CapImage
|
|
1411
1296
|
className="preview-image"
|
|
1412
1297
|
src={rcsIosPreview ? smsMobileIos : smsMobileAndroid}
|
|
1413
1298
|
alt={formatMessage(messages.previewGenerated)}
|
|
1414
1299
|
/>
|
|
1415
1300
|
{renderRcsPreviewContent()}
|
|
1416
|
-
</
|
|
1301
|
+
</div>
|
|
1417
1302
|
|
|
1418
1303
|
)}
|
|
1419
1304
|
{channel?.toUpperCase() === ZALO && (
|
|
@@ -1614,4 +1499,4 @@ TemplatePreview.propTypes = {
|
|
|
1614
1499
|
rcsOrientation: PropTypes.string,
|
|
1615
1500
|
};
|
|
1616
1501
|
|
|
1617
|
-
export default (injectIntl(TemplatePreview));
|
|
1502
|
+
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}
|
|
@@ -48,8 +48,6 @@ function SlideBoxFooter(props) {
|
|
|
48
48
|
isAnonymousType = false,
|
|
49
49
|
templateData = {},
|
|
50
50
|
hasPersonalizationTokenError: hasPersonalizationTokenErrorProp = false,
|
|
51
|
-
/** When set (e.g. SMS library create), overrides `creativesTemplatesSave` (“Done”) for the primary button */
|
|
52
|
-
primarySaveButtonMessage,
|
|
53
51
|
} = props;
|
|
54
52
|
// Calculate if buttons should be disabled
|
|
55
53
|
// Only apply validation state checks for EMAIL channel in HTML Editor mode (not BEE/DragDrop)
|
|
@@ -188,9 +186,7 @@ function SlideBoxFooter(props) {
|
|
|
188
186
|
onClick={onSave}
|
|
189
187
|
disabled={isTemplateNameEmpty || fetchingCmsData || shouldDisableButtons || hasPersonalizationTokenError}
|
|
190
188
|
>
|
|
191
|
-
{
|
|
192
|
-
<FormattedMessage {...primarySaveButtonMessage} />
|
|
193
|
-
) : isFullMode ? (
|
|
189
|
+
{isFullMode ? (
|
|
194
190
|
getFullModeSaveBtn(slidBoxContent, isCreatingTemplate)
|
|
195
191
|
) : (
|
|
196
192
|
<FormattedMessage {...messages.creativesTemplatesSave} />
|
|
@@ -266,10 +262,6 @@ SlideBoxFooter.propTypes = {
|
|
|
266
262
|
templateData: PropTypes.object,
|
|
267
263
|
formData: PropTypes.array,
|
|
268
264
|
hasPersonalizationTokenError: PropTypes.bool,
|
|
269
|
-
primarySaveButtonMessage: PropTypes.shape({
|
|
270
|
-
id: PropTypes.string,
|
|
271
|
-
defaultMessage: PropTypes.string,
|
|
272
|
-
}),
|
|
273
265
|
};
|
|
274
266
|
|
|
275
267
|
SlideBoxFooter.defaultProps = {
|
|
@@ -297,6 +289,5 @@ SlideBoxFooter.defaultProps = {
|
|
|
297
289
|
selectedEmailCreateMode: '',
|
|
298
290
|
formData: [],
|
|
299
291
|
hasPersonalizationTokenError: false,
|
|
300
|
-
primarySaveButtonMessage: undefined,
|
|
301
292
|
};
|
|
302
293
|
export default SlideBoxFooter;
|