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

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

@@ -9,72 +9,29 @@
 
 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) => typeMatches(contactInfoItem.type, key) && contactInfoItem.valid !== false)
+    .filter((contactInfoItem) => contactInfoItem.type === key && contactInfoItem.valid)
     .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 | RCS
+ * @param {string} channel - SMS | EMAIL | WHATSAPP
  * @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 = unwrapEntity(response);
-  if (entity == null || entity === '') {
+  const entity = get(response, 'entity', response);
+  if (!entity) {
     return { domains: [] };
   }
 
-  // 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);
-
+  // Single-channel API: entity may be { [channel]: [...] } or direct array
+  let channelSenderDetails = get(entity, channel, 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: [] };
   }
@@ -85,7 +42,6 @@ export function parseSenderDetailsResponse(channel, response) {
     const { id: dgmId, priority, domainProperties = {} } = element;
     const {
       domainName,
-      hostName,
       id = -1,
       contactInfo,
       connectionProperties: {
@@ -95,25 +51,21 @@ export function parseSenderDetailsResponse(channel, response) {
       } = {},
     } = domainProperties;
 
-    const resolvedDomainName = domainName || hostName;
-
     const domain = {
       dgmId,
-      domainName: resolvedDomainName,
+      domainName,
       domainId: id,
       priority: priority != null ? priority : 0,
     };
 
-    if ([CHANNELS.SMS, CHANNELS.WHATSAPP, CHANNELS.RCS].includes(normalizedChannel)) {
+    if ([CHANNELS.SMS, CHANNELS.WHATSAPP].includes(channel)) {
       domain.cdmaSenders = getSenderOptions(contactInfo, 'cdma_sender_id');
-      domain.gsmSenders = normalizedChannel === CHANNELS.RCS
-        ? getRcsLikeGsmSenders(contactInfo)
-        : getSenderOptions(contactInfo, 'gsm_sender_id');
+      domain.gsmSenders = getSenderOptions(contactInfo, 'gsm_sender_id');
       domain.sourceAccountIdentifier =
         sourceAccountIdentifier || wabaId || userid || '';
     }
 
-    if (normalizedChannel === CHANNELS.EMAIL) {
+    if (channel === CHANNELS.EMAIL) {
       domain.emailSenders = getSenderOptions(contactInfo, 'sender_id');
       domain.emailRepliers = getSenderOptions(contactInfo, 'reply_to_id');
     }
@@ -124,8 +76,7 @@ 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) => {
-    const key = domain.domainName ?? domain.domainId;
-    if (!acc.find((existing) => (existing.domainName ?? existing.domainId) === key)) {
+    if (!acc.find((d) => d.domainName === domain.domainName)) {
       acc.push(domain);
     }
     return acc;

package/v2Components/CommonTestAndPreview/SendTestMessage.js

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

package/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js

@@ -25,7 +25,6 @@ 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';
@@ -51,56 +50,39 @@ const RcsPreviewContent = ({
   const deviceName = device === ANDROID ? ANDROID_DEVICE_NAME : IOS_DEVICE_NAME;
 
   // Render RCS suggestions (Quick Reply, CTA, Phone Number)
-  // options.isCarousel: stacked bars below card body with gap (Figma), no dividers between CTAs
-  const renderRcsSuggestionsPreview = (suggestionsArg, options = {}) => {
-    const { isCarousel = false } = options;
+  const renderRcsSuggestionsPreview = () => {
     const renderArray = [];
-    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(),
-    );
+    const { suggestions = [] } = content || {};
 
     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 && !isCarousel) {
+      if (renderArray.length > 0) {
         renderArray.push(<CapDivider key={`divider-${suggestionKey}`} className="whatsapp-divider" />);
       }
 
       if (type === RCS_BUTTON_TYPES.QUICK_REPLY) {
         renderArray.push(
-          <CapLabel key={suggestionKey} type="label21" className={ctaClass}>
+          <CapLabel key={suggestionKey} type="label21" className="rcs-cta-preview">
             <CapIcon type="small-link" size="xs" />
             {text}
           </CapLabel>
         );
       } else if (type === RCS_BUTTON_TYPES.CTA) {
         renderArray.push(
-          <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" />
+          <CapLabel key={suggestionKey} type="label21" className="rcs-cta-preview">
+            <CapIcon type="launch" size="xs" />
             {text}
           </CapLabel>
         );
       } else if (type === RCS_BUTTON_TYPES.PHONE_NUMBER) {
         renderArray.push(
-          <CapLabel key={suggestionKey} type="label21" className={ctaClass}>
+          <CapLabel key={suggestionKey} type="label21" className="rcs-cta-preview">
             <CapIcon type="call" size="xs" />
             {text}
           </CapLabel>
@@ -111,109 +93,6 @@ 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 {
@@ -347,39 +226,11 @@ 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);
-  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;
+  const contentToRender = hasMedia ? renderMediaPreviewContent() : renderTextPreviewContent();
 
   return (
-    <CapRow
-      type='flex' align='middle' justify='center'
-      className={`sms-device-container rcs-device-container ${hasCarousel ? 'rcs-device-container-carousel' : ''}`}
-      style={{ position: 'relative' }}
-    >
+    <CapRow type='flex' align='middle' justify='center' className="sms-device-container">
       {/* Device Background Image */}
       <CapImage
         className="sms-device-image"
@@ -387,10 +238,8 @@ const RcsPreviewContent = ({
         alt={`${deviceName} 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`}
-      >
+      {/* Content Overlay */}
+      <CapRow className={`sms-content-overlay sms-content-overlay-${device} sms-preview sms-${device}`}>
         {/* 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" />
@@ -405,41 +254,24 @@ const RcsPreviewContent = ({
           <FormattedMessage {...messages.timeAgo} defaultMessage="Today" />
         </CapRow>
 
-        {/* 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>
+        {/* 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}
               </CapRow>
             </CapRow>
-            <CapRow useLegacy className="sms-timestamp">
-              {timestamp}
-            </CapRow>
           </CapRow>
-        )}
-      </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">
+          <CapRow useLegacy className="sms-timestamp">
             {timestamp}
           </CapRow>
         </CapRow>
-      )}
+      </CapRow>
     </CapRow>
-  )
-}
-
-
+  );
+};
 
 RcsPreviewContent.propTypes = {
   content: PropTypes.shape({
@@ -450,18 +282,6 @@ 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,