@capillarytech/creatives-library 8.0.319 → 8.0.320

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

@@ -9,29 +9,91 @@
 
 import get from 'lodash/get';
 import { CHANNELS } from '../../constants';
+import { RCS_CONTACT_INFO_GSM_TYPE_KEYS } from '../constants';
 
+/** Match API contactInfo.type (some envs use different casing). */
+const typeMatches = (itemType, expectedKey) => {
+  if (!itemType || !expectedKey) return false;
+  const a = String(itemType).toLowerCase().replace(/-/g, '_');
+  const b = String(expectedKey).toLowerCase().replace(/-/g, '_');
+  return a === b;
+};
+
+/**
+ * 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 merged = [];
+  RCS_CONTACT_INFO_GSM_TYPE_KEYS.forEach((key) => {
+    getSenderOptions(contactInfo, key).forEach((row) => {
+      const v = row?.value;
+      // Skip empty/whitespace — they still pass `v != null` for "" and pollute RCS sender dropdowns.
+      if (v == null || String(v).trim() === '' || seen.has(v)) return;
+      seen.add(v);
+      merged.push(row);
+    });
+  });
+  return merged.sort((a, b) => (a.default ? -1 : 0) - (b.default ? -1 : 0));
+};
+
+/**
+ * Campaigns domainProperties may return { entity } or { result: { entity } } / { data: { entity } }.
+ */
+function unwrapEntity(response) {
+  if (!response || typeof response !== 'object') return null;
+  if (response.entity != null) return response.entity;
+  const nested = get(response, 'result.entity') ?? get(response, 'data.entity');
+  if (nested != null) return nested;
+  if (response.entity === null) return null;
+  return response;
+}
+
 /**
  * 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 +104,7 @@ export function parseSenderDetailsResponse(channel, response) {
     const { id: dgmId, priority, domainProperties = {} } = element;
     const {
       domainName,
+      hostName,
       id = -1,
       contactInfo,
       connectionProperties: {
@@ -51,21 +114,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 +143,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,
@@ -25,12 +26,13 @@ const SendTestMessage = ({
   isSendingTestMessage,
   formatMessage,
   deliverySettings,
-  senderDetailsOptions,
+  senderDetailsByChannel = {},
   wecrmAccounts,
   onSaveDeliverySettings,
   isLoadingSenderDetails,
   smsTraiDltEnabled,
   registeredSenderIds,
+  isChannelSmsFallbackPreviewEnabled,
 }) => (
   <CapStepsAccordian
     showNumberSteps={false}
@@ -54,18 +56,20 @@ const SendTestMessage = ({
               value={selectedTestEntities}
               multiple
               placeholder={formatMessage(messages.testCustomersPlaceholder)}
+              getPopupContainer={(triggerNode) => triggerNode.parentNode}
             />
             {CHANNELS_WITH_DELIVERY_SETTINGS.includes(channel) && (
               <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 }
@@ -95,24 +99,26 @@ SendTestMessage.propTypes = {
   isSendingTestMessage: PropTypes.bool.isRequired,
   formatMessage: PropTypes.func.isRequired,
   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 = {
   formData: undefined,
   channel: undefined,
   deliverySettings: {},
-  senderDetailsOptions: [],
+  senderDetailsByChannel: {},
   wecrmAccounts: [],
   onSaveDeliverySettings: undefined,
   isLoadingSenderDetails: false,
   smsTraiDltEnabled: false,
   registeredSenderIds: [],
+  isChannelSmsFallbackPreviewEnabled: false,
 };
 
 export default SendTestMessage;

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -11,7 +11,6 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    background: $CAP_WHITE;
     overflow: hidden;
   
     // Preview Chrome wrapper (matches old TestAndPreviewSlidebox design)
@@ -62,7 +61,27 @@
         }
       }
     }
+
+    .unified-preview.unified-preview-rcs-tabs {  
+      .ant-tabs-nav {
+        margin: 0;
+        padding: 0 $CAP_SPACE_16;
+      }
   
+      // Prevent white hover/active backgrounds from default antd styles
+      .ant-tabs-tab,
+      .ant-tabs-tab:hover,
+      .ant-tabs-tab-active {
+        background: transparent;
+      }
+  
+      .ant-tabs-tab-btn,
+      .ant-tabs-tab-btn:hover,
+      .ant-tabs-tab-btn:active {
+        background: transparent;
+      }
+    }
+
     // Preview Content Container
     .preview-content-container {
       flex: 1;

package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js

@@ -21,8 +21,21 @@ import InAppPreviewContent from './InAppPreviewContent';
 import MobilePushPreviewContent from './MobilePushPreviewContent';
 import ViberPreviewContent from './ViberPreviewContent';
 import ZaloPreviewContent from './ZaloPreviewContent';
-import { CHANNELS, DESKTOP, TABLET, MOBILE, ANDROID, IOS } from '../constants';
+import CapTab from '@capillarytech/cap-ui-library/CapTab';
+import {
+  CHANNELS,
+  DESKTOP,
+  TABLET,
+  MOBILE,
+  ANDROID,
+  IOS,
+  PREVIEW_TAB_RCS,
+  PREVIEW_TAB_SMS_FALLBACK,
+  PREVIEW_TAB_KEYS,
+  RCS_SMS_FALLBACK_VAR_MAPPED_PROP,
+} from '../constants';
 import messages from '../messages';
+import { getFallbackResolvedContent } from '../../../utils/templateVarUtils';
 import './_unifiedPreview.scss';
 
 const UnifiedPreview = ({
@@ -38,7 +51,24 @@ const UnifiedPreview = ({
   lastModified,
   updatedByName,
   showHeader, // Default to true for Test and Preview flow, false for channel component previews
+  smsFallbackContent,
+  smsFallbackResolvedText,
+  activePreviewTab,
+  onPreviewTabChange,
 }) => {
+  const hasFallbackSmsTemplate = !!(smsFallbackContent?.templateContent || smsFallbackContent?.content);
+  const showRcsSmsFallbackTabs = channel === CHANNELS.RCS && hasFallbackSmsTemplate;
+  const rawFallbackTemplate = smsFallbackContent?.templateContent ?? smsFallbackContent?.content ?? '';
+  const rcsFallbackVarMapped = smsFallbackContent?.[RCS_SMS_FALLBACK_VAR_MAPPED_PROP] ?? {};
+  const hasRcsFallbackVarMapped = Object.keys(rcsFallbackVarMapped).length > 0;
+  // When no varmap is present, show raw template so {{tags}} remain visible in the preview.
+  // Only apply slot substitution when varmap entries exist or a resolved text is available.
+  const smsFallbackDisplayContent =
+    smsFallbackResolvedText != null && smsFallbackResolvedText !== ''
+      ? smsFallbackResolvedText
+      : hasRcsFallbackVarMapped
+        ? getFallbackResolvedContent(rawFallbackTemplate, rcsFallbackVarMapped)
+        : rawFallbackTemplate;
   /**
    * Render channel-specific preview content
    * For Phase 5, we'll render placeholders
@@ -124,6 +154,21 @@ const UnifiedPreview = ({
       case CHANNELS.RCS: {
         // RCS content is an object with rcsTitle, rcsDesc, rcsImageSrc, suggestions, etc.
         const rcsContent = typeof content === 'object' ? content : {};
+
+        if (showRcsSmsFallbackTabs && activePreviewTab === PREVIEW_TAB_SMS_FALLBACK) {
+          return (
+            <SmsPreviewContent
+              content={smsFallbackDisplayContent}
+              device={ANDROID}
+              isUpdating={isUpdating}
+              error={error}
+              formatMessage={formatMessage}
+              senderId={smsFallbackContent?.senderId}
+              showHeader={showHeader}
+            />
+          );
+        }
+
         return (
           <RcsPreviewContent
             content={rcsContent}
@@ -268,6 +313,79 @@ const UnifiedPreview = ({
    * PreviewHeader is shown only when showHeader is true (for Test and Preview flow)
    * Channel-specific content will be in separate files in future phases
    */
+  if (showRcsSmsFallbackTabs) {
+    const renderPane = ({ paneChannel, paneDevice, paneShowDeviceToggle, paneContent }) => (
+      <CapRow className="unified-preview-tab-pane">
+        {showHeader && (
+          <PreviewHeader
+            selectedCustomer={selectedCustomer}
+            device={paneDevice}
+            showDeviceToggle={paneShowDeviceToggle}
+            onDeviceChange={onDeviceChange}
+            channel={paneChannel}
+          />
+        )}
+
+        <CapRow className={`preview-content-container ${!showHeader ? 'preview-content-container-no-header' : ''}`}>
+          {paneContent}
+        </CapRow>
+
+       
+      </CapRow>
+    );
+
+    return (
+      <CapRow className="unified-preview unified-preview-rcs-tabs">
+        <CapTab
+          activeKey={activePreviewTab}
+          onChange={onPreviewTabChange}
+          panes={[
+            {
+              tab: formatMessage(messages.rcsTab),
+              key: PREVIEW_TAB_RCS,
+              content: renderPane({
+                paneChannel: CHANNELS.RCS,
+                paneDevice: device,
+                paneShowDeviceToggle: showDeviceToggle,
+                paneContent: (
+                  <RcsPreviewContent
+                    content={typeof content === 'object' ? content : {}}
+                    device={device}
+                    isUpdating={isUpdating}
+                    error={error}
+                    formatMessage={formatMessage}
+                    senderId={content?.senderId}
+                    showHeader={showHeader}
+                  />
+                ),
+              }),
+            },
+            {
+              tab: formatMessage(messages.smsFallbackTab),
+              key: PREVIEW_TAB_SMS_FALLBACK,
+              content: renderPane({
+                paneChannel: CHANNELS.SMS,
+                paneDevice: device,
+                paneShowDeviceToggle: showDeviceToggle,
+                paneContent: (
+                  <SmsPreviewContent
+                    content={smsFallbackDisplayContent}
+                    device={device}
+                    isUpdating={isUpdating}
+                    error={error}
+                    formatMessage={formatMessage}
+                    senderId={smsFallbackContent?.senderId}
+                    showHeader={showHeader}
+                  />
+                ),
+              }),
+            },
+          ]}
+        />
+      </CapRow>
+    );
+  }
+
   return (
     <CapRow className="unified-preview">
       {/* PreviewHeader - shown only in Test and Preview flow, hidden in channel component previews */}
@@ -305,9 +423,7 @@ const UnifiedPreview = ({
           )}
           {updatedByName && (
             <span className="metadata-item">
-              {formatMessage(messages.by)}
-              {' '}
-              {updatedByName}
+              {formatMessage(messages.byAuthor, { name: updatedByName })}
             </span>
           )}
         </CapRow>
@@ -348,6 +464,15 @@ UnifiedPreview.propTypes = {
 
   // Header display
   showHeader: PropTypes.bool, // Show PreviewHeader (true for Test and Preview flow, false for channel component previews)
+
+  // RCS: SMS fallback preview support (same shape as SmsFallback / RCS smsFallbackData)
+  smsFallbackContent: PropTypes.shape({
+    templateContent: PropTypes.string,
+    senderId: PropTypes.string,
+    templateName: PropTypes.string,
+  }),
+  activePreviewTab: PropTypes.oneOf(PREVIEW_TAB_KEYS),
+  onPreviewTabChange: PropTypes.func,
 };
 
 UnifiedPreview.defaultProps = {
@@ -360,6 +485,10 @@ UnifiedPreview.defaultProps = {
   lastModified: null,
   updatedByName: null,
   showHeader: true, // Default to true for Test and Preview flow
+  smsFallbackContent: null,
+  smsFallbackResolvedText: undefined,
+  activePreviewTab: PREVIEW_TAB_RCS,
+  onPreviewTabChange: () => {},
 };
 
 export default UnifiedPreview;

package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss

@@ -150,6 +150,11 @@
   margin-right: 0.5rem;
 }
 
+/* CapSlideBox defaults to z-index 100; RCS SMS fallback slidebox + tag popovers use 10010–10020 — must stack above or close control is not clickable. */
+.cap-slide-box-v2.common-test-and-preview-slidebox {
+  z-index: 10030;
+}
+
 .common-test-and-preview-slidebox {
   .common-test-preview-modal-wrap {
     z-index: 10003;
@@ -419,6 +424,13 @@
       }
     }
 
+    .tags-section-title {
+      margin: $CAP_SPACE_12 0;
+      display: block;
+      color: $CAP_G01;
+      font-weight: $FONT_WEIGHT_MEDIUM;
+    }
+
     .values-table {
       margin-bottom: $CAP_SPACE_16;
       border: $CAP_SPACE_01 solid $CAP_G12;

package/v2Components/CommonTestAndPreview/constants.js

@@ -79,6 +79,44 @@ export const CHANNELS = {
   ZALO: 'ZALO',
 };
 
+/** Unified preview tab keys when RCS shows RCS + SMS fallback panes. */
+export const PREVIEW_TAB_RCS = 'rcs';
+export const PREVIEW_TAB_SMS_FALLBACK = 'smsFallback';
+export const PREVIEW_TAB_KEYS = [PREVIEW_TAB_RCS, PREVIEW_TAB_SMS_FALLBACK];
+
+/** Channels whose Test & Preview defaults to Android/iOS device frame (not desktop). */
+export const CHANNELS_USING_ANDROID_PREVIEW_DEVICE = [
+  CHANNELS.SMS,
+  CHANNELS.WHATSAPP,
+  CHANNELS.RCS,
+  CHANNELS.INAPP,
+  CHANNELS.MOBILEPUSH,
+  CHANNELS.VIBER,
+];
+
+/** RCS createMessageMeta test payload — rich card envelope literals. */
+export const RCS_TEST_META_CONTENT_TYPE_RICHCARD = 'RICHCARD';
+export const RCS_TEST_META_CARD_TYPE_STANDALONE = 'STANDALONE';
+export const RCS_TEST_META_CARD_ORIENTATION_VERTICAL = 'VERTICAL';
+export const RCS_TEST_META_CARD_WIDTH_SMALL = 'SMALL';
+
+/** React key fallback when a custom-values section has no `key` or title id. */
+export const CUSTOM_VALUES_EDITOR_SECTION_FALLBACK_KEY = 'section';
+
+/**
+ * Matches at least one `{{variableName}}` token in SMS / RCS fallback template text.
+ */
+export const SMS_MUSTACHE_TAG_PATTERN = /\{\{[^}]+\}\}/;
+
+/** TRAI DLT `{#…#}` placeholders (same idea as `COMBINED_SMS_TEMPLATE_VAR_REGEX` in unified constants). */
+export const SMS_DLT_HASH_TAG_PATTERN = /\{\#[^#]*\#\}/;
+
+/**
+ * Key on `smsFallbackContent` passed into Test & Preview — RCS slot map from SmsTraiEdit
+ * (`onRcsFallbackEditorStateChange`), merged before tag extraction like the embedded SMS editor.
+ */
+export const RCS_SMS_FALLBACK_VAR_MAPPED_PROP = 'rcsSmsFallbackVarMapped';
+
 // ============================================
 // DEVICE CONSTANTS
 // ============================================