@capillarytech/creatives-library 9.0.13 → 9.0.14

package/v2Containers/CommunicationFlow/steps/ChannelSelectionStep/extractContentForPreview.js

@@ -0,0 +1,183 @@
+import {
+  VIBER, MOBILE_PUSH, MPUSH, SMS, EMAIL, WEBPUSH, ZALO, INAPP, WHATSAPP, RCS,
+  TEXT, IMAGE, VIDEO, DOCUMENT, CTA, QUICK_REPLY,
+} from '../../../CreativesContainer/constants';
+import { getWhatsappDocPreview } from '../../../Whatsapp/utils';
+
+const extractSmsContent = (templateData) => {
+  const smsBody = templateData.messageBody || templateData.smsBody || '';
+  return {
+    content: smsBody,
+    formData: [{ 'sms-editor': smsBody, activeTab: 'base', base: { 'sms-editor': smsBody } }],
+  };
+};
+
+const extractEmailContent = (templateData) => {
+  const emailContent = templateData.emailBody || templateData.emailHtml || '';
+  const emailSubject = templateData.emailSubject || '';
+  const formData = [{ 'template-subject': emailSubject, activeTab: 'base', base: { 'template-content': emailContent } }];
+  formData['template-subject'] = emailSubject;
+  return { content: emailContent, formData };
+};
+
+const extractMobilePushDevice = ({
+  title = '',
+  message = '',
+  expandableDetails: {
+    image = '', media = [], ctas = [], carouselData = [],
+  } = {},
+} = {}) => ({
+  header: title,
+  bodyText: message,
+  bodyImage: image,
+  bodyVideo: media[0] || null,
+  bodyGif: '',
+  actions: ctas,
+  carouselData,
+});
+
+const extractMobilePushContent = (templateData) => ({
+  content: {
+    androidContent: extractMobilePushDevice(templateData.androidContent),
+    iosContent: extractMobilePushDevice(templateData.iosContent),
+  },
+  formData: null,
+  accountId: templateData.accountId,
+});
+
+const extractInAppDevice = (deviceData = {}) => {
+  const ctas = deviceData.expandableDetails?.ctas || [];
+  return {
+    mediaPreview: { inAppImageSrcAndroid: deviceData.expandableDetails?.image || undefined },
+    templateTitle: deviceData.title || '',
+    templateMsg: deviceData.message || '',
+    ctaData: ctas,
+    templateLayoutType: deviceData.bodyType || '',
+    deepLinkValue: ctas[0]?.actionLink || null,
+  };
+};
+
+const extractInAppContent = (templateData) => ({
+  content: {
+    androidContent: extractInAppDevice(templateData.androidContent),
+    iosContent: {
+      ...extractInAppDevice(templateData.iosContent),
+      mediaPreview: { inAppImageSrcIos: templateData.iosContent?.expandableDetails?.image || undefined },
+    },
+    templateLayoutType: templateData.androidContent?.bodyType || '',
+    templateMediaType: templateData.androidContent?.expandableDetails?.image ? IMAGE : TEXT,
+  },
+  formData: null,
+  accountId: templateData.accountId,
+});
+
+const extractWhatsappContent = (templateData) => {
+  const configs = templateData.templateConfigs || {};
+  const media = configs.whatsappMedia || {};
+  const buttonType = configs.buttonType || '';
+  const buttons = configs.buttons || [];
+  return {
+    content: {
+      templateMsg: templateData.messageBody || '',
+      templateHeader: media.header || '',
+      templateFooter: media.footer || '',
+      whatsappImageSrc: configs.mediaType === IMAGE ? media.url : '',
+      whatsappVideoPreviewImg: configs.mediaType === VIDEO ? media.previewUrl : '',
+      docPreview: configs.mediaType === DOCUMENT && media.docParams
+        ? getWhatsappDocPreview({ ...media.docParams, whatsappDocImg: media.previewUrl || '' })
+        : null,
+      ctaData: buttonType === CTA ? buttons : [],
+      quickReplyData: buttonType === QUICK_REPLY ? buttons : [],
+      carouselData: configs.cards || [],
+      accountId: templateData.accountId,
+      sourceAccountIdentifier: templateData.sourceAccountIdentifier,
+      accountName: templateData.accountName,
+    },
+    formData: null,
+    accountId: templateData.accountId,
+    sourceAccountIdentifier: templateData.sourceAccountIdentifier,
+    accountName: templateData.accountName,
+  };
+};
+
+const parseJson = (value) => {
+  try {
+    return typeof value === 'string' ? JSON.parse(value || '{}') : (value || {});
+  } catch {
+    return {};
+  }
+};
+
+const extractViberContent = (templateData) => {
+  const parsedBody = parseJson(templateData.messageBody);
+  const accountDetails = parseJson(templateData.accountDetails);
+  const content = parsedBody.content || parsedBody;
+  const accountName = accountDetails?.name || accountDetails?.accountName || '';
+  const result = {
+    viberPreviewContent: {
+      messageContent: content.text || '',
+      buttonText: content.button?.text || '',
+      imageURL: content.image?.url || undefined,
+    },
+    accountName: accountName ? [accountName] : [],
+    brandName: accountName ? [accountName] : [],
+  };
+  if (content.video?.url) {
+    result.videoParams = {
+      viberVideoSrc: content.video.url,
+      viberVideoPreviewImg: content.video.thumbnailUrl || '',
+    };
+  }
+  return { content: result, formData: null };
+};
+
+const extractRcsContent = (templateData) => {
+  const cardContent = templateData.rcsContent?.cardContent?.[0] || {};
+  const media = cardContent.media || {};
+  return {
+    content: {
+      templateHeader: cardContent.title || '',
+      templateMessage: cardContent.description || '',
+      rcsImageSrc: media.mediaType === IMAGE ? media.mediaUrl : undefined,
+      rcsVideoSrc: media.mediaType === VIDEO ? media.mediaUrl : undefined,
+      rcsThumbnailSrc: media.mediaType === VIDEO ? media.thumbnailUrl : undefined,
+      suggestions: cardContent.suggestions || [],
+    },
+    formData: null,
+  };
+};
+
+const extractWebpushContent = (templateData) => ({
+  content: templateData?.messageContent?.content || {},
+  formData: null,
+});
+
+const extractZaloContent = (templateData) => ({
+  content: {
+    ...templateData,
+    templatePreviewUrl: templateData?.templateConfigs?.template || templateData?.templatePreviewUrl || '',
+  },
+  formData: null,
+});
+
+const CHANNEL_EXTRACTORS = {
+  [SMS]: extractSmsContent,
+  [EMAIL]: extractEmailContent,
+  [MOBILE_PUSH]: extractMobilePushContent,
+  [MPUSH]: extractMobilePushContent,
+  [INAPP]: extractInAppContent,
+  [WHATSAPP]: extractWhatsappContent,
+  [VIBER]: extractViberContent,
+  [RCS]: extractRcsContent,
+  [WEBPUSH]: extractWebpushContent,
+  [ZALO]: extractZaloContent,
+};
+
+const extractContentForPreview = (item) => {
+  const templateData = item?.templateData || {};
+  const upperChannel = item?.channel?.toUpperCase();
+  const extractor = CHANNEL_EXTRACTORS[upperChannel];
+  return extractor ? extractor(templateData) : { content: templateData, formData: null };
+};
+
+export default extractContentForPreview;

package/v2Containers/CommunicationFlow/steps/CommunicationStrategyStep/CommunicationStrategyStep.js

@@ -40,6 +40,7 @@ const CommunicationStrategyStep = ({
       key: option?.value,
       value: option?.value,
       label: customLabel,
+      simpleLabel: option?.label,
       disabled: option?.disabled,
     };
   }), [optionsProp, formatMessage]);
@@ -63,6 +64,8 @@ const CommunicationStrategyStep = ({
         onChange={handleChange}
         placeholder={formatMessage(messages.communicationStrategyPlaceholder)}
         options={options}
+        propToBeMadeLabel="simpleLabel"
+        optionLabelProp="label"
         style={{ width: '20.375rem' }}
         disabled={disabled}
       />

package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/DeliverySettingsSection.js

@@ -174,6 +174,45 @@ const DeliverySettingsSection = ({
     return merged;
   }, [domainPropertiesData, wecrmViberData]);
 
+  // Helper: returns true if a channelSetting entry has at least one real (non-empty) value
+  const hasRealData = (settings) => settings && Object.values(settings).some((value) => value !== null && value !== '' && value !== undefined);
+
+  // When the domain properties API response arrives, auto-save the default sender IDs
+  // into channelSetting so they are included in the payload even if the user never
+  // opens the SenderDetails slidebox.
+  //
+  // Rules:
+  //  - Only run for channels that are currently selected (deliveryChannels)
+  //  - Only save a channel if the API returned a real sender ID for it (not empty)
+  //  - Never overwrite a channel the user has already configured manually
+  useEffect(() => {
+    if (!entityWithWecrmViber || !onDeliverySettingChange || deliveryChannels.length === 0) return;
+
+    // Convert the API entity into the channelSetting shape (e.g. { SMS: { gsmSenderId: '...' } })
+    const senderDetailsFromAPI = parseSenderDetailsFromEntity(entityWithWecrmViber, { whatsappSourceAccountId });
+    const channelSettingFromAPI = buildChannelSettingFromFieldValues(senderDetailsFromAPI);
+
+    const savedChannelSetting = deliverySetting?.channelSetting || {};
+    const updatedChannelSetting = { ...savedChannelSetting };
+    let didChange = false;
+
+    deliveryChannels.forEach((channel) => {
+      const apiDataForChannel = channelSettingFromAPI[channel];
+      const userSavedDataForChannel = savedChannelSetting[channel];
+
+      const apiHasRealSenderId = hasRealData(apiDataForChannel);
+      const userAlreadyConfigured = hasRealData(userSavedDataForChannel);
+
+      if (apiHasRealSenderId && !userAlreadyConfigured) {
+        updatedChannelSetting[channel] = apiDataForChannel;
+        didChange = true;
+      }
+    });
+
+    if (!didChange) return;
+    onDeliverySettingChange({ ...deliverySetting, channelSetting: updatedChannelSetting });
+  }, [entityWithWecrmViber]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const parsedSenderDetails = useMemo(() => {
     if (!entityWithWecrmViber) return null;
     const fromEntity = parseSenderDetailsFromEntity(entityWithWecrmViber, { whatsappSourceAccountId });

package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/Tests/DeliverySettingsSection.test.js

@@ -278,10 +278,10 @@ describe('DeliverySettingsSection — marketer flows', () => {
 
       await waitFor(() => {
         expect(screen.getByText('zalo-sender-77')).toBeInTheDocument();
-        expect(screen.getByText('Account')).toBeInTheDocument();
-        expect(screen.getByText('line@account-id')).toBeInTheDocument();
         expect(screen.getByText('+12025550123')).toBeInTheDocument();
       });
+      // LINE is excluded from delivery settings (CHANNELS_WITHOUT_DELIVERY), so no account row
+      expect(screen.queryByText('line@account-id')).not.toBeInTheDocument();
     });
   });
 
@@ -538,6 +538,10 @@ describe('DeliverySettingsSection — marketer flows', () => {
       });
 
       await waitFor(() => expect(screen.getByText('Sender details')).toBeInTheDocument());
+      // The auto-save effect fires when domainProperties loads, calling onDeliverySettingChange
+      // with the API default (+1002003001). Wait for it, then clear so only the manual save is checked.
+      await waitFor(() => expect(onDeliverySettingChange).toHaveBeenCalled());
+      onDeliverySettingChange.mockClear();
       await openSenderDetailsFromSummary();
 
       const slidebox = document.querySelector('.sender-details');

package/v2Containers/CommunicationFlow/utils/getContentBody.js

@@ -0,0 +1,369 @@
+import React from 'react';
+import CapImage from '@capillarytech/cap-ui-library/CapImage';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import { CAP_SPACE_04 } from '@capillarytech/cap-ui-library/styled/variables';
+import { getWhatsappDocPreview, getWhatsappQuickReply, getWhatsappCarouselButtonView } from '../../Whatsapp/utils';
+import { PHONE_NUMBER } from '../../Whatsapp/constants';
+import {
+  VIBER, MOBILE_PUSH, MPUSH, SMS, EMAIL, INAPP, WEBPUSH, RCS, ZALO, WHATSAPP, LINE, IMAGE, VIDEO, DOCUMENT, CTA,
+} from '../../CreativesContainer/constants';
+import videoPlay from '../../../assets/videoPlay.svg';
+import './getContentBody.scss';
+
+const getContentBody = (item) => {
+  const templateData = item?.templateData || {};
+  const channel = item?.channel?.toUpperCase();
+
+  switch (channel) {
+    case SMS: {
+      const smsText = templateData.messageBody || templateData.smsBody || '';
+      return <CapLabel type="label2">{smsText}</CapLabel>;
+    }
+
+    case EMAIL: {
+      return <CapLabel type="label2">{templateData.emailSubject || ''}</CapLabel>;
+    }
+
+    case MOBILE_PUSH:
+    case MPUSH: {
+      const deviceData = templateData.androidContent || templateData.iosContent || {};
+      const title = deviceData.title || '';
+      const message = deviceData.message || '';
+      const image = deviceData.expandableDetails?.image || '';
+      const media = deviceData.expandableDetails?.media?.[0] || null;
+      const ctas = deviceData.expandableDetails?.ctas || [];
+      const carouselData = deviceData.expandableDetails?.carouselData || [];
+      return (
+        <CapRow className="mobilepush-container">
+          <CapRow className="app-header">
+            <CapRow className="app-header-left">
+              <CapRow className="app-icon" />
+              <CapLabel type="label4">{title}</CapLabel>
+            </CapRow>
+          </CapRow>
+          <CapLabel className="mobilepush-message" type="label1">{message}</CapLabel>
+          {image && !media && !carouselData.length && (
+            <CapImage src={image} className="mobilepush-image mobilepush-image-padding" />
+          )}
+          {media?.url && (
+            <CapRow className="video-preview">
+              <video controls={false} tabIndex="0">
+                <source src={media.url} type="video/mp4" />
+              </video>
+              <CapRow className="icon-position">
+                <CapImage className="video-icon" src={videoPlay} />
+              </CapRow>
+            </CapRow>
+          )}
+          {carouselData.length > 0 && (
+            <CapRow className="scroll-container">
+              {carouselData.map((data, index) => (
+                <CapRow key={`carousel-${index}`} className="whatsapp-carousel-container" role="group">
+                  <CapRow className="whatsapp-carousel-card">
+                    {data?.imageUrl && (
+                      <CapImage src={data?.imageUrl} className="whatsapp-image" />
+                    )}
+                  </CapRow>
+                </CapRow>
+              ))}
+            </CapRow>
+          )}
+          {ctas.length > 0 && (
+            <CapRow className="actions">
+              {ctas.map((cta) => (
+                <CapLabel className="action" key={cta?.actionText}>
+                  {cta?.actionText?.toUpperCase()}
+                </CapLabel>
+              ))}
+            </CapRow>
+          )}
+        </CapRow>
+      );
+    }
+
+    case INAPP: {
+      const deviceData = templateData.androidContent || templateData.iosContent || {};
+      const title = deviceData.title || '';
+      const message = deviceData.message || '';
+      const image = deviceData.expandableDetails?.image || '';
+      const ctas = deviceData.expandableDetails?.ctas || [];
+      return (
+        <>
+          {title && <CapLabel type="label2">{title}</CapLabel>}
+          {message && <CapLabel type="label1">{message}</CapLabel>}
+          {image && <CapImage src={image} className="mobilepush-image" />}
+          {ctas.length > 0 && (
+            <CapRow className="actions">
+              {ctas.map((cta) => (
+                <CapLabel className="action" key={cta?.actionText}>
+                  {cta?.actionText?.toUpperCase()}
+                </CapLabel>
+              ))}
+            </CapRow>
+          )}
+        </>
+      );
+    }
+
+    case WEBPUSH: {
+      const innerContent = templateData?.messageContent?.content?.content || {};
+      const notificationTitle = innerContent.title || '';
+      const notificationMessage = innerContent.message || '';
+      const iconImageUrl = innerContent.iconImageUrl || '';
+      const mediaImage = innerContent.expandableDetails?.image || '';
+      const rawCtas = innerContent.cta ? [innerContent.cta] : (innerContent.ctas || []);
+      const visibleCtas = rawCtas.slice(0, 2);
+      return (
+        <CapRow className="sms-template-content webpush-template-content">
+          <CapRow className="webpush-template-card">
+            <CapRow className="webpush-template-meta">
+              {iconImageUrl
+                ? <CapImage src={iconImageUrl} alt="Brand Icon" className="webpush-brand-icon" />
+                : <CapRow className="webpush-brand-icon-placeholder" />
+              }
+              <CapRow className="webpush-template-text">
+                <CapRow className="webpush-template-header">
+                  <CapLabel className="webpush-template-title">{notificationTitle}</CapLabel>
+                </CapRow>
+                {notificationMessage && (
+                  <CapLabel className="webpush-template-message">{notificationMessage}</CapLabel>
+                )}
+                {mediaImage && (
+                  <CapImage src={mediaImage} alt="Media" className="webpush-media-image" />
+                )}
+              </CapRow>
+            </CapRow>
+            {visibleCtas.length > 0 && (
+              <CapRow className={`webpush-template-cta-section${visibleCtas.length === 1 ? ' single-cta' : ''}`}>
+                {visibleCtas.map((cta, index) => (
+                  <CapRow className="webpush-template-cta-item" key={`webpush-cta-${index}`}>
+                    <CapLabel className="webpush-template-cta-text">{cta.text || cta.actionText}</CapLabel>
+                  </CapRow>
+                ))}
+              </CapRow>
+            )}
+          </CapRow>
+        </CapRow>
+      );
+    }
+
+    case VIBER: {
+      let content = {};
+      try {
+        const parsed = typeof templateData.messageBody === 'string'
+          ? JSON.parse(templateData.messageBody || '{}')
+          : (templateData.messageBody || {});
+        content = parsed.content || parsed;
+      } catch {
+        content = {};
+      }
+      const { text = '', image = {}, button = {}, video = {} } = content;
+      return (
+        <>
+          {text && <CapLabel type="label1">{text}</CapLabel>}
+          {image?.url && (
+            <CapImage src={image.url} className="viber-image" />
+          )}
+          {video?.url && (
+            <CapRow className="video-preview">
+              <CapImage src={video.thumbnailUrl || video.url} className="viber-image" />
+              <CapRow className="icon-position">
+                <CapImage className="video-icon" src={videoPlay} />
+              </CapRow>
+            </CapRow>
+          )}
+          {button?.text && (
+            <CapRow className="button-content viber-button-content">{button.text}</CapRow>
+          )}
+        </>
+      );
+    }
+
+    case WHATSAPP: {
+      const configs = templateData.templateConfigs || {};
+      const media = configs.whatsappMedia || {};
+      const mediaType = configs.mediaType || '';
+      const buttonType = configs.buttonType || '';
+      const buttons = configs.buttons || [];
+      const carouselData = configs.cards || [];
+      const bodyText = templateData.messageBody || '';
+      const header = media.header || '';
+      const footer = media.footer || '';
+      const imageUrl = mediaType === IMAGE ? media.url : '';
+      const videoPreviewImg = mediaType === VIDEO ? media.previewUrl : '';
+      const docPreview = mediaType === DOCUMENT && media.docParams
+        ? getWhatsappDocPreview({ ...media.docParams, whatsappDocImg: media.previewUrl || '' })
+        : null;
+      const hasMedia = imageUrl || videoPreviewImg || docPreview;
+      return (
+        <>
+          <CapRow className="whatsapp-container">
+            {imageUrl && <CapImage src={imageUrl} className="whatsapp-image" />}
+            {videoPreviewImg && (
+              <CapRow className="video-preview">
+                <CapImage src={videoPreviewImg} className="whatsapp-image" />
+                <CapRow className="icon-position">
+                  <CapImage className="video-icon" src={videoPlay} />
+                </CapRow>
+              </CapRow>
+            )}
+            {docPreview && <CapRow className="whatsapp-doc">{docPreview}</CapRow>}
+            <CapRow className={hasMedia ? 'whatsapp-message-with-media' : 'whatsapp-message-without-media'}>
+              {header && <CapLabel className="whatsapp-template-list-header-preview">{header}</CapLabel>}
+              <CapLabel type="label9">{bodyText}</CapLabel>
+              {footer && <CapLabel className="whatsapp-template-list-footer-preview">{footer}</CapLabel>}
+            </CapRow>
+            {buttonType === CTA && buttons.map((cta) => cta.text && (
+              <CapLabel type="label21" className="whatsapp-cta-label" key={cta.text}>
+                <CapIcon
+                  type={cta.type === PHONE_NUMBER ? 'call' : 'launch'}
+                  size="xs"
+                  svgProps={{ style: { marginRight: CAP_SPACE_04 } }}
+                />
+                {cta.text}
+              </CapLabel>
+            ))}
+            {getWhatsappQuickReply({ buttonType, buttons }, true)}
+          </CapRow>
+          {carouselData.length > 0 && (
+            <CapRow className="scroll-container">
+              {carouselData.map((data, index) => (
+                <CapRow key={`carousel-${index}`} className="whatsapp-carousel-container" role="group">
+                  <CapRow className="whatsapp-carousel-card">
+                    {data?.mediaType?.toUpperCase() === IMAGE && (
+                      <CapImage src={data?.imageUrl} className="whatsapp-image" />
+                    )}
+                    {data?.mediaType?.toUpperCase() === VIDEO && (
+                      <CapRow className="video-preview">
+                        <CapImage src={data?.videoPreviewImg} className="whatsapp-image" />
+                        <CapRow className="icon-position">
+                          <CapImage className="video-icon" src={videoPlay} />
+                        </CapRow>
+                      </CapRow>
+                    )}
+                    <CapRow className={data?.imageUrl || data?.videoPreviewImg ? 'whatsapp-message-with-media' : 'whatsapp-message-without-media'}>
+                      <CapLabel type="label9" className="whatsapp-carousel-body">{data?.bodyText}</CapLabel>
+                    </CapRow>
+                    {getWhatsappCarouselButtonView(data?.buttons, false)}
+                  </CapRow>
+                </CapRow>
+              ))}
+            </CapRow>
+          )}
+        </>
+      );
+    }
+
+    case RCS: {
+      const cardContent = templateData.rcsContent?.cardContent?.[0] || {};
+      const media = cardContent.media || {};
+      const title = cardContent.title || '';
+      const description = cardContent.description || '';
+      const suggestions = cardContent.suggestions || [];
+      return (
+        <>
+          {media.mediaType === IMAGE && (
+            <CapImage src={media.mediaUrl} className="rcs-image" />
+          )}
+          {media.mediaType === VIDEO && (
+            <CapRow className="video-preview">
+              <CapImage src={media.thumbnailUrl || media.mediaUrl} className="rcs-image" />
+              <CapRow className="icon-position">
+                <CapImage className="video-icon" src={videoPlay} />
+              </CapRow>
+            </CapRow>
+          )}
+          {title && <CapLabel type="label4">{title}</CapLabel>}
+          {description && <CapLabel type="label1">{description}</CapLabel>}
+          {suggestions.length > 0 && (
+            <CapRow className="actions">
+              {suggestions.map((s) => (
+                <CapLabel className="action" key={s.label || s.text || s.postback?.data}>{s.label || s.text}</CapLabel>
+              ))}
+            </CapRow>
+          )}
+        </>
+      );
+    }
+
+    case ZALO: {
+      // templateData = { ...createPayload() } — name is nested under templateConfigs.name
+      const zaloName = templateData?.templateConfigs?.name || '';
+      return (
+        <CapLabel type="label19" className="zalo-listing-content desc">
+          {zaloName}
+        </CapLabel>
+      );
+    }
+
+    case LINE: {
+      let lineContent = {};
+      try {
+        lineContent = typeof templateData.messageBody === 'string'
+          ? JSON.parse(templateData.messageBody || '{}')
+          : (templateData.messageBody || {});
+      } catch {
+        lineContent = {};
+      }
+      const [firstMessage = {}] = lineContent.messages || [];
+      const { type: msgType = '' } = firstMessage;
+
+      if (msgType === 'flex') {
+        const flexContents = firstMessage.contents?.contents || [];
+        const heroUrl = flexContents[0]?.hero?.url || firstMessage.contents?.hero?.url || '';
+        return heroUrl ? <CapImage src={heroUrl} className="line-image" /> : null;
+      }
+
+      if (msgType === 'template') {
+        const columns = firstMessage.template?.columns || [];
+        return (
+          <CapRow>
+            {columns.map(({ imageUrl, action: { label: actionLabel } = {} }, idx) => (
+              <CapImage
+                key={`${imageUrl}_${idx}`}
+                src={imageUrl}
+                alt={actionLabel}
+                className="line-template-image"
+              />
+            ))}
+          </CapRow>
+        );
+      }
+
+      if (msgType === 'video') {
+        const videoUrl = firstMessage.video?.originalContentUrl || '';
+        return videoUrl ? (
+          <CapRow className="video-preview">
+            <video controls={false} tabIndex="0">
+              <source src={videoUrl} type="video/mp4" />
+            </video>
+            <CapRow className="icon-position">
+              <CapImage className="video-icon" src={videoPlay} />
+            </CapRow>
+          </CapRow>
+        ) : null;
+      }
+
+      // image / sticker / imagemap
+      const imageUrl = firstMessage.originalContentUrl
+        || firstMessage.animatedStickerUrl
+        || firstMessage.stickerUrl
+        || (firstMessage.baseUrl ? `${firstMessage.baseUrl}/1040` : '');
+      if (imageUrl) {
+        return <CapImage src={imageUrl} className="line-image" />;
+      }
+
+      // text
+      return firstMessage.text
+        ? <CapLabel type="label2">{firstMessage.text}</CapLabel>
+        : null;
+    }
+
+    default:
+      return <CapLabel type="label2">{templateData.messageBody || templateData.message || item.channel || ''}</CapLabel>;
+  }
+};
+
+export default getContentBody;

package/v2Containers/CommunicationFlow/utils/getContentBody.scss

@@ -0,0 +1,19 @@
+@import '~@capillarytech/cap-ui-library/styles/variables';
+
+.viber-button-content {
+  margin-top: 0.5rem;
+}
+
+.whatsapp-cta-label {
+  text-align: center;
+  margin-top: 0.75rem;
+}
+
+.whatsapp-cta-icon {
+  margin-right: 0.25rem;
+}
+
+.line-template-image {
+  width: 13rem;
+  height: 17.4375rem;
+}

package/v2Containers/CommunicationFlow/utils/getEnabledSteps.js

@@ -23,7 +23,7 @@ export const getEnabledSteps = (config) => {
   if (features.deliverySettingsData?.required) {
     steps.push(STEPS.DELIVERY_SETTINGS);
   }
-  if (features.dynamicControlsData?.required) {
+  if (features.showDynamicControls) {
     steps.push(STEPS.DYNAMIC_CONTROLS);
   }
   return steps;

package/v2Containers/CreativesContainer/constants.js

@@ -43,6 +43,12 @@ export const LIQUID_SUPPORTED_CHANNELS = [EMAIL, SMS, MOBILE_PUSH, INAPP];
 export const EMF = "EMF";
 export const VENENO = "VENENO";
 export const TEXT = "TEXT";
+export const IMAGE = "IMAGE";
+export const VIDEO = "VIDEO";
+export const DOCUMENT = "DOCUMENT";
+export const CTA = "CTA";
+export const QUICK_REPLY = "QUICK_REPLY";
+export const BEE = "BEE";
 export const IOS = "IOS";
 export const ANDROID = "ANDROID";
 export const EXTERNAL_URL = "EXTERNAL_URL";