@capillarytech/creatives-library 9.0.15-alpha.0 → 9.0.15-alpha.3

package/v2Components/CommonTestAndPreview/DeliverySettings/utils/parseSenderDetailsResponse.js

@@ -9,29 +9,72 @@
 
 import get from 'lodash/get';
 import { CHANNELS } from '../../constants';
+import { RCS_CONTACT_INFO_GSM_TYPE_KEYS } from '../constants';
+import { typeMatches, unwrapEntity } from '../../utils';
 
+/**
+ * Include row unless explicitly invalid — many APIs omit `valid`, which would
+ * otherwise filter out every sender (RCS/SMS lists empty in UI).
+ */
 const getSenderOptions = (contactInfo, key) =>
   (contactInfo || [])
-    .filter((contactInfoItem) => contactInfoItem.type === key && contactInfoItem.valid)
+    .filter((contactInfoItem) => typeMatches(contactInfoItem.type, key) && contactInfoItem.valid !== false)
     .sort((contact) => (contact.default ? -1 : 0));
 
+/** RCS APIs may label senders under several `contactInfo.type` keys — see `RCS_CONTACT_INFO_GSM_TYPE_KEYS`. */
+const getRcsLikeGsmSenders = (contactInfo) => {
+  const seen = new Set();
+  const mergedSenderRows = [];
+  RCS_CONTACT_INFO_GSM_TYPE_KEYS.forEach((key) => {
+    getSenderOptions(contactInfo, key).forEach((row) => {
+      const senderValue = row?.value;
+      // Skip empty/whitespace sender values to avoid polluting the RCS sender dropdown.
+      if (senderValue == null || String(senderValue).trim() === '' || seen.has(senderValue)) return;
+      seen.add(senderValue);
+      mergedSenderRows.push(row);
+    });
+  });
+  return mergedSenderRows.sort((a, b) => (a.default ? -1 : 0) - (b.default ? -1 : 0));
+};
+
 /**
  * Parse raw API response for one channel into { domains: [...] }
- * @param {string} channel - SMS | EMAIL | WHATSAPP
+ * @param {string} channel - SMS | EMAIL | WHATSAPP | RCS
  * @param {Object} response - API response (e.g. { entity: { SMS: [...] } } or { entity: [...] })
  * @returns {{ domains: Array }} - domains array compatible with campaigns DeliverySettingsV2
  */
 export function parseSenderDetailsResponse(channel, response) {
-  const entity = get(response, 'entity', response);
-  if (!entity) {
+  const entity = unwrapEntity(response);
+  if (entity == null || entity === '') {
     return { domains: [] };
   }
 
-  // Single-channel API: entity may be { [channel]: [...] } or direct array
-  let channelSenderDetails = get(entity, channel, null);
+  // Normalize once: entity keys may be any casing (SMS/sms/rcs) but downstream branches use CHANNELS.* (uppercase).
+  const normalizedChannel =
+    channel == null || String(channel).trim() === ''
+      ? ''
+      : String(channel).trim().toUpperCase();
+
+  // Single-channel API: entity may be { [channel]: [...] } or direct array.
+  // Some responses use different casing (e.g. rcs vs RCS) or a single domain object instead of an array.
+  let channelSenderDetails =
+    get(entity, channel, null)
+    ?? (normalizedChannel ? get(entity, normalizedChannel, null) : null)
+    ?? (normalizedChannel ? get(entity, normalizedChannel.toLowerCase(), null) : null);
+
   if (channelSenderDetails == null && Array.isArray(entity)) {
     channelSenderDetails = entity;
   }
+
+  if (channelSenderDetails != null && !Array.isArray(channelSenderDetails)) {
+    const single = channelSenderDetails;
+    if (single && typeof single === 'object' && single.domainProperties) {
+      channelSenderDetails = [single];
+    } else {
+      return { domains: [] };
+    }
+  }
+
   if (!Array.isArray(channelSenderDetails)) {
     return { domains: [] };
   }
@@ -42,6 +85,7 @@ export function parseSenderDetailsResponse(channel, response) {
     const { id: dgmId, priority, domainProperties = {} } = element;
     const {
       domainName,
+      hostName,
       id = -1,
       contactInfo,
       connectionProperties: {
@@ -51,21 +95,25 @@ export function parseSenderDetailsResponse(channel, response) {
       } = {},
     } = domainProperties;
 
+    const resolvedDomainName = domainName || hostName;
+
     const domain = {
       dgmId,
-      domainName,
+      domainName: resolvedDomainName,
       domainId: id,
       priority: priority != null ? priority : 0,
     };
 
-    if ([CHANNELS.SMS, CHANNELS.WHATSAPP].includes(channel)) {
+    if ([CHANNELS.SMS, CHANNELS.WHATSAPP, CHANNELS.RCS].includes(normalizedChannel)) {
       domain.cdmaSenders = getSenderOptions(contactInfo, 'cdma_sender_id');
-      domain.gsmSenders = getSenderOptions(contactInfo, 'gsm_sender_id');
+      domain.gsmSenders = normalizedChannel === CHANNELS.RCS
+        ? getRcsLikeGsmSenders(contactInfo)
+        : getSenderOptions(contactInfo, 'gsm_sender_id');
       domain.sourceAccountIdentifier =
         sourceAccountIdentifier || wabaId || userid || '';
     }
 
-    if (channel === CHANNELS.EMAIL) {
+    if (normalizedChannel === CHANNELS.EMAIL) {
       domain.emailSenders = getSenderOptions(contactInfo, 'sender_id');
       domain.emailRepliers = getSenderOptions(contactInfo, 'reply_to_id');
     }
@@ -76,7 +124,8 @@ export function parseSenderDetailsResponse(channel, response) {
   // Sort by priority and dedupe by domainName (match campaigns behaviour)
   domains.sort((a, b) => (a.priority || 0) - (b.priority || 0));
   const deduped = domains.reduce((acc, domain) => {
-    if (!acc.find((d) => d.domainName === domain.domainName)) {
+    const key = domain.domainName ?? domain.domainId;
+    if (!acc.find((existing) => (existing.domainName ?? existing.domainId) === key)) {
       acc.push(domain);
     }
     return acc;

package/v2Components/CommonTestAndPreview/SendTestMessage.js

@@ -6,12 +6,13 @@ import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapStepsAccordian from '@capillarytech/cap-ui-library/CapStepsAccordian';
 import CapTreeSelect from '@capillarytech/cap-ui-library/CapTreeSelect';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
 import isEmpty from 'lodash/isEmpty';
 import messages from './messages';
 import DeliverySettings from './DeliverySettings';
 import { CHANNELS } from './constants';
 
-const CHANNELS_WITH_DELIVERY_SETTINGS = [CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP];
+const CHANNELS_WITH_DELIVERY_SETTINGS = [CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP, CHANNELS.RCS];
 
 const SendTestMessage = ({
   isFetchingTestCustomers,
@@ -28,12 +29,13 @@ const SendTestMessage = ({
   searchValue,
   setSearchValue,
   deliverySettings,
-  senderDetailsOptions,
+  senderDetailsByChannel = {},
   wecrmAccounts,
   onSaveDeliverySettings,
   isLoadingSenderDetails,
   smsTraiDltEnabled,
   registeredSenderIds,
+  isChannelSmsFallbackPreviewEnabled,
 }) => {
   const addCustomerContent = renderAddTestCustomerButton ? renderAddTestCustomerButton() : null;
   return (
@@ -77,13 +79,14 @@ const SendTestMessage = ({
                 <DeliverySettings
                   channel={channel}
                   deliverySettings={deliverySettings || {}}
-                  senderDetailsOptions={senderDetailsOptions}
+                  senderDetailsByChannel={senderDetailsByChannel}
                   wecrmAccounts={wecrmAccounts || []}
                   onSaveDeliverySettings={onSaveDeliverySettings}
                   isLoadingSenderDetails={isLoadingSenderDetails}
                   formatMessage={formatMessage}
                   smsTraiDltEnabled={smsTraiDltEnabled}
                   registeredSenderIds={registeredSenderIds}
+                  isChannelSmsFallbackPreviewEnabled={isChannelSmsFallbackPreviewEnabled}
                   whatsappAccountFromForm={
                     channel === CHANNELS.WHATSAPP && formData?.accountName
                       ? { accountName: formData.accountName }
@@ -121,12 +124,13 @@ SendTestMessage.propTypes = {
   searchValue: PropTypes.string,
   setSearchValue: PropTypes.func,
   deliverySettings: PropTypes.object,
-  senderDetailsOptions: PropTypes.array,
+  senderDetailsByChannel: PropTypes.object,
   wecrmAccounts: PropTypes.array,
   onSaveDeliverySettings: PropTypes.func,
   isLoadingSenderDetails: PropTypes.bool,
   smsTraiDltEnabled: PropTypes.bool,
   registeredSenderIds: PropTypes.array,
+  isChannelSmsFallbackPreviewEnabled: PropTypes.bool,
 };
 
 SendTestMessage.defaultProps = {
@@ -136,12 +140,13 @@ SendTestMessage.defaultProps = {
   searchValue: '',
   setSearchValue: () => {}, // no-op when not provided; required by TreeSelect when showSearch is true
   deliverySettings: {},
-  senderDetailsOptions: [],
+  senderDetailsByChannel: {},
   wecrmAccounts: [],
   onSaveDeliverySettings: undefined,
   isLoadingSenderDetails: false,
   smsTraiDltEnabled: false,
   registeredSenderIds: [],
+  isChannelSmsFallbackPreviewEnabled: false,
 };
 
 export default SendTestMessage;

package/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js

@@ -25,6 +25,7 @@ import {
   TIME_FORMAT_MINUTE_PADDING_THRESHOLD,
   TIME_FORMAT_AM,
   TIME_FORMAT_PM,
+  MEDIA_TYPE_VIDEO,
 } from '../constants';
 import messages from '../messages';
 import { RCS_BUTTON_TYPES } from '../../../v2Containers/Rcs/constants';
@@ -50,39 +51,56 @@ const RcsPreviewContent = ({
   const deviceName = device === ANDROID ? ANDROID_DEVICE_NAME : IOS_DEVICE_NAME;
 
   // Render RCS suggestions (Quick Reply, CTA, Phone Number)
-  const renderRcsSuggestionsPreview = () => {
+  // options.isCarousel: stacked bars below card body with gap (Figma), no dividers between CTAs
+  const renderRcsSuggestionsPreview = (suggestionsArg, options = {}) => {
+    const { isCarousel = false } = options;
     const renderArray = [];
-    const { suggestions = [] } = content || {};
+    const rawSuggestions = Array.isArray(suggestionsArg)
+      ? suggestionsArg
+      : (content?.suggestions || []);
+    // Skip unsaved/empty draft suggestions (e.g. the pre-seeded default phone-number slot
+    // on carousel card 1, or a suggestion mid-edit via the pencil icon — both explicitly set
+    // `isSaved: false`) — but suggestions hydrated from an already-persisted template never
+    // carry `isSaved` at all (it's a client-only "saved this session" flag), so `undefined`
+    // must still render; only an explicit `false` means "hide this".
+    const suggestions = rawSuggestions.filter(
+      (suggestion) => suggestion?.isSaved !== false && String(suggestion?.text || '').trim(),
+    );
 
     if (suggestions.length === 0) {
       return null;
     }
 
+    const ctaClass = isCarousel ? 'rcs-cta-preview rcs-cta-preview--carousel-bar' : 'rcs-cta-preview';
+
     suggestions.forEach((suggestion) => {
       const { type, text } = suggestion || {};
       const suggestionKey = `${type}-${text || Math.random()}`;
 
-      if (renderArray.length > 0) {
+      if (renderArray.length > 0 && !isCarousel) {
         renderArray.push(<CapDivider key={`divider-${suggestionKey}`} className="whatsapp-divider" />);
       }
 
       if (type === RCS_BUTTON_TYPES.QUICK_REPLY) {
         renderArray.push(
-          <CapLabel key={suggestionKey} type="label21" className="rcs-cta-preview">
+          <CapLabel key={suggestionKey} type="label21" className={ctaClass}>
             <CapIcon type="small-link" size="xs" />
             {text}
           </CapLabel>
         );
       } else if (type === RCS_BUTTON_TYPES.CTA) {
         renderArray.push(
-          <CapLabel key={suggestionKey} type="label21" className="rcs-cta-preview">
-            <CapIcon type="launch" size="xs" />
+          <CapLabel key={suggestionKey} type="label21" className={ctaClass}>
+            {/* "launch" icon's SVG has hardcoded <defs>/<mask> ids, which collide
+                and render as a solid square when 2+ CTA buttons appear together —
+                "open-in-new" is a single flat path with no ids, so it can't collide. */}
+            <CapIcon type="open-in-new" size="xs" />
             {text}
           </CapLabel>
         );
       } else if (type === RCS_BUTTON_TYPES.PHONE_NUMBER) {
         renderArray.push(
-          <CapLabel key={suggestionKey} type="label21" className="rcs-cta-preview">
+          <CapLabel key={suggestionKey} type="label21" className={ctaClass}>
             <CapIcon type="call" size="xs" />
             {text}
           </CapLabel>
@@ -93,6 +111,109 @@ const RcsPreviewContent = ({
     return renderArray?.length > 0 ? renderArray : null;
   };
 
+  // Carousel media box: aspect matches RCS editor card size (SHORT/MEDIUM × SMALL/MEDIUM).
+  const getCarouselMediaAspectStyle = (isVideo) => {
+    const d = content?.carouselPreviewDimensions;
+    if (!d) return undefined;
+    if (isVideo) {
+      const { videoThumbWidth, videoThumbHeight } = d;
+      if (!videoThumbWidth || !videoThumbHeight) return undefined;
+      return { aspectRatio: `${videoThumbWidth} / ${videoThumbHeight}` };
+    }
+    const { imageWidth, imageHeight } = d;
+    if (!imageWidth || !imageHeight) return undefined;
+    return { aspectRatio: `${imageWidth} / ${imageHeight}` };
+  };
+
+  // Carousel preview (WhatsApp-style static horizontal scroll).
+  // Caller passes a non-empty array only (see hasCarousel); avoids duplicate guards that Sonar
+  // flagged as partially covered because inner checks were unreachable when hasCarousel was true.
+  const renderCarouselPreviewContent = (carouselCards) => (
+    <CapRow className="msg-container-carousel">
+      <CapRow className="scroll-container" type="flex" noWrap>
+        {carouselCards.map((card, idx) => {
+          const key = `rcs-carousel-${idx}-${card?.bodyText || card?.imageSrc || card?.videoPreviewImg || ''}`;
+          const isVideo =
+            (card?.mediaType || '').toLowerCase() === String(MEDIA_TYPE_VIDEO).toLowerCase();
+          const cardSuggestions = Array.isArray(card?.suggestions) ? card.suggestions : [];
+          const suggestionsNode = cardSuggestions.length > 0
+            ? renderRcsSuggestionsPreview(cardSuggestions, { isCarousel: true })
+            : null;
+          const titleTrimmed = String(card?.title ?? '').trim();
+          const bodyTrimmed = String(card?.bodyText ?? '').trim();
+          const titleShown = titleTrimmed || formatMessage(messages.rcsCarouselPreviewTitlePlaceholder);
+          const bodyShown = bodyTrimmed || formatMessage(messages.rcsCarouselPreviewBodyPlaceholder);
+          return (
+            <CapRow key={key} className="rcs-carousel-item">
+              <CapRow className="message-pop align-left message-pop-carousel">
+                <CapRow className="whatsapp-content">
+                  {!isVideo && (
+                    <CapRow
+                      className="whatsapp-image rcs-carousel-media-wrap"
+                      style={getCarouselMediaAspectStyle(false)}
+                    >
+                      <CapImage
+                        src={card?.imageSrc ? card.imageSrc : rcsImageEmptyPreview}
+                        className="rcs-carousel-img"
+                        alt={formatMessage(messages.previewGenerated)}
+                      />
+                    </CapRow>
+                  )}
+                  {isVideo && (
+                    <CapTooltip
+                      title={formatMessage(messages.videoPreviewTooltip)}
+                      wrapperClassName="rcs-carousel-video-tooltip-wrapper"
+                      triggerClassName="rcs-carousel-video-tooltip-trigger"
+                    >
+                      <CapRow className="video-preview">
+                        <CapRow
+                          className="whatsapp-image rcs-carousel-media-wrap"
+                          style={getCarouselMediaAspectStyle(true)}
+                        >
+                          <CapImage
+                            src={card?.videoPreviewImg ? card.videoPreviewImg : rcsVideoEmptyPreview}
+                            className="rcs-carousel-img"
+                            alt={formatMessage(messages.previewGenerated)}
+                          />
+                        </CapRow>
+                        <CapRow className="icon-position">
+                          <CapImage className="video-icon" src={videoPlay} alt="Play" />
+                        </CapRow>
+                      </CapRow>
+                    </CapTooltip>
+                  )}
+
+                  <CapRow className="carousel-content">
+                    <CapLabel
+                      type={card.titleLabelType || 'label1'}
+                      className={`carousel-title${titleTrimmed ? '' : ' rcs-carousel-field-placeholder'}`}
+                    >
+                      {titleShown}
+                    </CapLabel>
+                    <CapLabel
+                      type={card.bodyLabelType || 'label2'}
+                      className={`carousel-message${bodyTrimmed ? '' : ' rcs-carousel-field-placeholder'}`}
+                    >
+                      {bodyShown}
+                    </CapLabel>
+                  </CapRow>
+                </CapRow>
+              </CapRow>
+
+              {/* Deliberately OUTSIDE .message-pop-carousel — the CTA bar is its own
+                  floating element below the card, not clipped/rounded as part of it. */}
+              {!!suggestionsNode && (
+                <CapRow className="rcs-carousel-cta-stack" gutter={0}>
+                  {suggestionsNode}
+                </CapRow>
+              )}
+            </CapRow>
+          );
+        })}
+      </CapRow>
+    </CapRow>
+  );
+
   // Render text preview content
   const renderTextPreviewContent = () => {
     const {
@@ -226,11 +347,39 @@ const RcsPreviewContent = ({
   const timestamp = `${displayHours}:${displayMinutes} ${ampm}`;
 
   // Render normal RCS preview (same structure as SMS up to sms-message-container)
+  const carouselCardsNormalized = Array.isArray(content?.carouselData) ? content?.carouselData : [];
+  const hasCarousel = carouselCardsNormalized?.length > 0;
   const hasMedia = !!(content?.rcsImageSrc || content?.rcsVideoSrc);
-  const contentToRender = hasMedia ? renderMediaPreviewContent() : renderTextPreviewContent();
+  let contentToRender;
+  if (hasCarousel) {
+    contentToRender = renderCarouselPreviewContent(carouselCardsNormalized);
+  } else if (hasMedia) {
+    contentToRender = renderMediaPreviewContent();
+  } else {
+    contentToRender = renderTextPreviewContent();
+  }
+
+  const carouselPanelStyle = hasCarousel ? {
+    position: 'absolute',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    width: '100%',
+    maxWidth: '26.786rem',
+    boxSizing: 'border-box',
+    top: device === ANDROID ? '3.1rem' : '4.143rem',
+    height: device === ANDROID ? 'calc(100% - 3.8rem)' : device === IOS ? 'calc(100% - 5rem)' : 'calc(100% - 4.5rem)',
+    display: 'flex',
+    flexDirection: 'column',
+    paddingTop: '5.857rem',
+    paddingBottom: '1.142rem',
+  } : undefined;
 
   return (
-    <CapRow type='flex' align='middle' justify='center' className="sms-device-container">
+    <CapRow
+      type='flex' align='middle' justify='center'
+      className={`sms-device-container rcs-device-container ${hasCarousel ? 'rcs-device-container-carousel' : ''}`}
+      style={{ position: 'relative' }}
+    >
       {/* Device Background Image */}
       <CapImage
         className="sms-device-image"
@@ -238,8 +387,10 @@ const RcsPreviewContent = ({
         alt={`${deviceName} Device`}
       />
 
-      {/* Content Overlay */}
-      <CapRow className={`sms-content-overlay sms-content-overlay-${device} sms-preview sms-${device}`}>
+      {/* Content Overlay - nav bar + date separator always; message content only for non-carousel */}
+      <CapRow
+        className={`sms-content-overlay sms-content-overlay-${device} sms-preview sms-${device} rcs-content-overlay`}
+      >
         {/* Navigation Bar - Same as SMS */}
         <CapRow type='flex' className={`sms-navigation-bar ${!showHeader ? 'sms-navigation-bar-no-header' : ''}`}>
           <CapIcon type="chevron-left" className="sms-back-arrow" />
@@ -254,24 +405,41 @@ const RcsPreviewContent = ({
           <FormattedMessage {...messages.timeAgo} defaultMessage="Today" />
         </CapRow>
 
-        {/* Message Container - Same structure as SMS, only content inside is RCS-specific */}
-        <CapRow className="sms-message-container">
-          <CapRow useLegacy className="sms-message-bubble">
-            <CapRow useLegacy className="sms-message-text">
-              {/* RCS-specific content rendering */}
-              <CapRow useLegacy className="message-pop sms">
-                {contentToRender}
+        {/* Message Container - non-carousel only; carousel is rendered outside this overflow-x:hidden ancestor */}
+        {!hasCarousel && (
+          <CapRow className="sms-message-container">
+            <CapRow useLegacy className="sms-message-bubble">
+              <CapRow useLegacy className="sms-message-text">
+                <CapRow useLegacy className="message-pop sms">
+                  {contentToRender}
+                </CapRow>
               </CapRow>
             </CapRow>
+            <CapRow useLegacy className="sms-timestamp">
+              {timestamp}
+            </CapRow>
           </CapRow>
-          <CapRow useLegacy className="sms-timestamp">
+        )}
+      </CapRow>
+
+      {/* Carousel panel: sibling of overlay, no overflow-x:hidden ancestor → scroll-container
+          can receive horizontal scroll events. Positioned absolutely over the device image. */}
+      {hasCarousel && (
+        <CapRow
+          className={`rcs-carousel-panel rcs-carousel-panel-${device}`}
+          // style={carouselPanelStyle}
+        >
+          {renderCarouselPreviewContent(carouselCardsNormalized)}
+          <CapRow useLegacy className="sms-timestamp rcs-carousel-timestamp">
             {timestamp}
           </CapRow>
         </CapRow>
-      </CapRow>
+      )}
     </CapRow>
-  );
-};
+  )
+}
+
+
 
 RcsPreviewContent.propTypes = {
   content: PropTypes.shape({
@@ -282,6 +450,18 @@ RcsPreviewContent.propTypes = {
     rcsImageSrc: PropTypes.string,
     rcsVideoSrc: PropTypes.string,
     rcsThumbnailSrc: PropTypes.string,
+    carouselData: PropTypes.arrayOf(
+      PropTypes.shape({
+        titleLabelType: PropTypes.string,
+        bodyLabelType: PropTypes.string,
+      })
+    ),
+    carouselPreviewDimensions: PropTypes.shape({
+      imageWidth: PropTypes.number,
+      imageHeight: PropTypes.number,
+      videoThumbWidth: PropTypes.number,
+      videoThumbHeight: PropTypes.number,
+    }),
     suggestions: PropTypes.arrayOf(
       PropTypes.shape({
         type: PropTypes.string,