@capillarytech/creatives-library 8.0.345-alpha.15 → 8.0.345-alpha.17

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.345-alpha.15",
+  "version": "8.0.345-alpha.17",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/templateVarUtils.js

@@ -82,7 +82,7 @@ export const splitTemplateVarString = (str = '', varRegex = DEFAULT_MUSTACHE_VAR
   if (!str) return [];
   const matchedVariableTokens = str.match(varRegex) || [];
   return splitContentByOrderedVarTokens(matchedVariableTokens, str).filter(
-    (segment) => segment === 0 || segment
+    (segment) => segment !== ''
   );
 };
 

package/utils/tests/rcsPayloadUtils.test.js

@@ -0,0 +1,226 @@
+import { normalizeRcsMessageContentForApi } from '../rcsPayloadUtils';
+
+describe('normalizeRcsMessageContentForApi', () => {
+  it('defaults missing rcsContent to empty object and still normalizes root smsFallBackContent', () => {
+    const item = {
+      smsFallBackContent: { message: 'root-only' },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.rcsContent).toEqual({});
+    expect(item.smsFallBackContent).toEqual({ message: 'root-only' });
+  });
+
+  it('moves nested smsFallBackContent out of rcsContent and merges onto root', () => {
+    const item = {
+      rcsContent: {
+        contentType: 'RICHCARD',
+        smsFallBackContent: {
+          message: 'nested-msg',
+          templateConfigs: { registeredSenderIds: ['H1'] },
+        },
+      },
+      smsFallBackContent: { message: 'root-msg' },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.rcsContent).toEqual({ contentType: 'RICHCARD' });
+    expect(item.smsFallBackContent.message).toBe('root-msg');
+    expect(item.smsFallBackContent.templateConfigs).toEqual({
+      registeredSenderIds: ['H1'],
+    });
+  });
+
+  it('nested message merges when root has no message key', () => {
+    const item = {
+      rcsContent: {
+        smsFallBackContent: { message: 'from-nested' },
+      },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.rcsContent).toEqual({});
+    expect(item.smsFallBackContent).toEqual({ message: 'from-nested' });
+  });
+
+  it('removes smsFallBackContent when nothing to serialize', () => {
+    const item = {
+      rcsContent: { smsFallBackContent: {} },
+      smsFallBackContent: {},
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.rcsContent).toEqual({});
+    expect(item.smsFallBackContent).toBeUndefined();
+  });
+
+  it('does not add templateConfigs when empty', () => {
+    const item = {
+      rcsContent: {},
+      smsFallBackContent: { message: 'x', templateConfigs: {} },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.smsFallBackContent).toEqual({ message: 'x' });
+  });
+
+  it('serializes templateConfigs only when message is absent but templateConfigs has data', () => {
+    const item = {
+      rcsContent: {
+        smsFallBackContent: {
+          templateConfigs: { registeredSenderIds: ['Z'] },
+        },
+      },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.smsFallBackContent).toEqual({
+      templateConfigs: { registeredSenderIds: ['Z'] },
+    });
+  });
+
+  it('includes message in api payload when key exists with empty string', () => {
+    const item = {
+      smsFallBackContent: { message: '', templateConfigs: { id: 't1' } },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.smsFallBackContent).toEqual({
+      message: '',
+      templateConfigs: { id: 't1' },
+    });
+  });
+
+  it('merges when legacy nested is null-coalesced', () => {
+    const item = {
+      rcsContent: {
+        contentType: 'TEXT',
+        smsFallBackContent: null,
+      },
+      smsFallBackContent: { message: 'from-root' },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.rcsContent).toEqual({ contentType: 'TEXT' });
+    expect(item.smsFallBackContent).toEqual({ message: 'from-root' });
+  });
+
+  it('folds rcsSmsFallbackVarMapped into message and omits var map from API shape', () => {
+    const msg = '{{optout}} {{fullname}} test SMS';
+    const varMapped = {
+      '{{optout}}_0': '{{city}}',
+      '{{fullname}}_2': '{{fullname}}',
+    };
+    const item = {
+      rcsContent: { contentType: 'RICHCARD' },
+      smsFallBackContent: {
+        message: msg,
+        rcsSmsFallbackVarMapped: varMapped,
+      },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.smsFallBackContent).toEqual({
+      message: '{{city}} {{fullname}} test SMS',
+    });
+    expect(item.smsFallBackContent.rcsSmsFallbackVarMapped).toBeUndefined();
+  });
+
+  it('merges nested rcsSmsFallbackVarMapped with root message; root message wins on key clash', () => {
+    const nestedVar = { '{{a}}_0': '{{nested}}' };
+    const item = {
+      rcsContent: {
+        contentType: 'RICHCARD',
+        smsFallBackContent: {
+          message: '{{a}} tail',
+          rcsSmsFallbackVarMapped: nestedVar,
+        },
+      },
+      smsFallBackContent: {
+        message: '{{a}} tail',
+        rcsSmsFallbackVarMapped: { '{{a}}_0': '{{root}}' },
+      },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.smsFallBackContent.message).toBe('{{root}} tail');
+    expect(item.smsFallBackContent.rcsSmsFallbackVarMapped).toBeUndefined();
+  });
+
+  it('non-slot var map keys do not change message but var map is still stripped', () => {
+    const varMapped = { 0: { label: 'City', tag: '{{city}}' } };
+    const item = {
+      rcsContent: { contentType: 'RICHCARD' },
+      smsFallBackContent: {
+        message: 'Hello',
+        rcsSmsFallbackVarMapped: varMapped,
+      },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.smsFallBackContent).toEqual({ message: 'Hello' });
+  });
+
+  it('omits rcsSmsFallbackVarMapped when merged value is empty object', () => {
+    const item = {
+      rcsContent: {
+        smsFallBackContent: { rcsSmsFallbackVarMapped: {} },
+      },
+      smsFallBackContent: { message: 'only-msg' },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.smsFallBackContent).toEqual({ message: 'only-msg' });
+    expect(item.smsFallBackContent.rcsSmsFallbackVarMapped).toBeUndefined();
+  });
+
+  it('removes root-level templateConfigs from RCS message content item', () => {
+    const item = {
+      rcsContent: { cardType: 'STANDALONE' },
+      templateConfigs: {
+        templateId: '69b3d33934a7bd0db5bada8e',
+        template: '{{registered_store_name}} Its a test message',
+      },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.templateConfigs).toBeUndefined();
+    expect(item.rcsContent).toEqual({ cardType: 'STANDALONE' });
+  });
+
+  it('removes templateConfigs nested inside rcsContent', () => {
+    const item = {
+      rcsContent: {
+        cardType: 'STANDALONE',
+        templateConfigs: {
+          templateId: '69b3d33934a7bd0db5bada8e',
+          template: '{{registered_store_name}} Its a test message',
+        },
+        cardContent: [{ title: 'Card' }],
+      },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.templateConfigs).toBeUndefined();
+    expect(item.rcsContent.templateConfigs).toBeUndefined();
+    expect(item.rcsContent.cardContent).toEqual([{ title: 'Card' }]);
+  });
+
+  it('strips isSaved from each suggestion in cardContent', () => {
+    const item = {
+      rcsContent: {
+        cardContent: [
+          {
+            title: 'Card 1',
+            suggestions: [
+              { type: 'QUICK_REPLY', text: 'Yes', isSaved: true },
+              { type: 'CTA', text: 'Go', url: 'https://example.com', isSaved: false },
+            ],
+          },
+        ],
+      },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.rcsContent.cardContent[0].suggestions).toEqual([
+      { type: 'QUICK_REPLY', text: 'Yes' },
+      { type: 'CTA', text: 'Go', url: 'https://example.com' },
+    ]);
+  });
+
+  it('handles cardContent with no suggestions gracefully', () => {
+    const item = {
+      rcsContent: {
+        cardContent: [{ title: 'Card 1' }, { title: 'Card 2', suggestions: [] }],
+      },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.rcsContent.cardContent[0].suggestions).toBeUndefined();
+    expect(item.rcsContent.cardContent[1].suggestions).toEqual([]);
+  });
+});

package/v2Components/CommonTestAndPreview/messages.js

@@ -324,10 +324,6 @@ export default defineMessages({
     id: `${scope}.senderId`,
     defaultMessage: 'Sender ID',
   },
-  rcsSenderIdLabel: {
-    id: `${scope}.rcsSenderIdLabel`,
-    defaultMessage: 'RCS sender ID',
-  },
   domainLabel: {
     id: `${scope}.domainLabel`,
     defaultMessage: 'Domain',

package/v2Components/SmsFallback/smsFallbackUtils.js

@@ -23,7 +23,7 @@ export function buildFallbackDataFromTemplate(template) {
     || base['template-name']
     || '';
   return {
-    smsTemplateId: template._id || '',
+    smsTemplateId: base.template_id || '',
     templateName,
     content,
     templateContent,

package/v2Components/SmsFallback/tests/smsFallbackUtils.test.js

@@ -13,13 +13,13 @@ describe('smsFallbackUtils', () => {
   describe('buildFallbackDataFromTemplate', () => {
     it('maps template versions.base and header sender list', () => {
       const template = {
-        _id: 'tid',
         name: 'My SMS',
         versions: {
           base: {
             'sms-editor': 'Hello {{1}}',
             header: ['S1', 'S2'],
             'unicode-validity': false,
+            template_id: 'tid',
           },
         },
       };

package/v2Containers/CreativesContainer/index.js

@@ -746,6 +746,7 @@ export class Creatives extends React.Component {
             creativeName = "",
             channel = constants.RCS,
             rcsCardVarMapped,
+            accountId = "",
           } = templateData || {};
           const { isFullMode: isFullModeForRcsPayload } = this.props;
           const firstCardIn = (rcsContent.cardContent && rcsContent.cardContent[0]) || {};
@@ -791,6 +792,7 @@ export class Creatives extends React.Component {
                   RCS: {
                     rcsContent: {
                       ...rcsContent,
+                      ...(accountId && !isFullMode && { accountId }),
                       cardContent: [
                         {
                           ...cardContent,
@@ -1242,7 +1244,7 @@ export class Creatives extends React.Component {
           };
         }
         break;
-      case constants.FACEBOOK: {
+      case constants.FACEBOOK:
         if (template.value) {
           const FacebookAd = template?.value?.versions?.base?.content?.FacebookAd;
           const { type } = FacebookAd[0];
@@ -1286,9 +1288,8 @@ export class Creatives extends React.Component {
             selectedMarketingObjective: template.value.selectedMarketingObjective,
           };
         }
-      }
         break;
-      case constants.RCS: {
+      case constants.RCS:
         if (template.value) {
           const { isFullMode: isFullModeForRcsConsumerPayload } = this.props;
           const { name = "", versions = {} } = template.value || {};
@@ -1336,6 +1337,7 @@ export class Creatives extends React.Component {
             contentType = "",
             cardType = "",
             cardSettings = {},
+            accountId = "",
           } = get(versions, 'base.content.RCS.rcsContent', {});
           const rootRcsCardVarMappedFromSubmit = get(template, 'value.rcsCardVarMapped');
           const firstCardFromSubmit = Array.isArray(cardContentFromSubmit)
@@ -1365,6 +1367,7 @@ export class Creatives extends React.Component {
             channel,
             creativeName: name,
             rcsContent,
+            accountId,
             ...(includeRootRcsCardVarMappedOnConsumerPayload
               ? { rcsCardVarMapped: cardVarMappedFromFirstRcsCard }
               : {}),
@@ -1387,9 +1390,8 @@ export class Creatives extends React.Component {
           }
           normalizeRcsMessageContentForApi(templateData);
         }
-      }
         break;
-      case constants.ZALO: {
+      case constants.ZALO:
         if (template.value) {
           templateData = {
             ...template.value,
@@ -1398,7 +1400,6 @@ export class Creatives extends React.Component {
             delete templateData.type;
           }
         }
-      }
         break;
       case constants.WEBPUSH: {
         if (template.value) {

package/v2Containers/Rcs/constants.js

@@ -206,8 +206,6 @@ export const RCS_CAROUSEL_IMAGE_DIMENSIONS = {
 
 export const RCS_VIDEO_THUMBNAIL_DIMENSIONS = {
   SHORT_HEIGHT: {
-    width: 770,
-    height: 257,
     type: 'SHORT_HEIGHT',
     heightType: 'SHORT',
     label: 'Vertical Short',

package/v2Containers/Rcs/index.js

@@ -34,6 +34,13 @@ import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
 import CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
 import CapLink from '@capillarytech/cap-ui-library/CapLink';
 import CapTab from '@capillarytech/cap-ui-library/CapTab';
+import { flushSync } from 'react-dom';
+import { isUrl, isValidText } from '../Line/Container/Wrapper/utils';
+import {
+  invalidVarRegex,
+  RCS_CTA_URL_TYPE,
+  URL_MAX_LENGTH,
+} from '../../v2Components/CapActionButton/constants';
 
 import {
   CAP_G01,
@@ -352,6 +359,7 @@ export const Rcs = (props) => {
   useEffect(() => {
     setSuggestions(isHostIcs ? INITIAL_SUGGESTIONS_DATA_STOP : []);
   }, [isHostIcs]);
+  const [rcsAccount, setRcsAccount] = useState('');
   useEffect(() => {
     const accountObj = accountData.selectedRcsAccount || {};
     if (!isEmpty(accountObj)) {
@@ -367,6 +375,7 @@ export const Rcs = (props) => {
       setAccessToken(configs.accessToken || '');
       setHostName(accountObj.hostName || '');
       setAccountName(accountObj.name || '');
+      setRcsAccount(accountObj.id || '');
     } else {
       setAccountId('');
       setWecrmAccountId('');
@@ -1700,6 +1709,10 @@ export const Rcs = (props) => {
         get(details, 'versions.base.content.RCS.rcsContent.cardSettings', '')
         || get(details, 'rcsContent.cardSettings', '');
       setMediaData(mediaData, mediaType, cardSettings);
+      if (details?.edit) {
+        const rcsAccountId = get(details, 'versions.base.content.RCS.rcsContent.accountId', '');
+        setRcsAccount(rcsAccountId);
+      }
 
       const smsFallbackContent = mergeRcsSmsFallBackContentFromDetails(details);
       const base = get(smsFallbackContent, 'versions.base', {});
@@ -1963,8 +1976,8 @@ export const Rcs = (props) => {
   const onTagSelectFallback = (data) => {
     const tempMsg = `${fallbackMessage}{{${data}}}`;
     const error = fallbackMessageErrorHandler(tempMsg);
-    setFallbackMessage(tempMsg);
-    setFallbackMessageError(error);
+    // setFallbackMessage(tempMsg);
+    // setFallbackMessageError(error);
   };
 
 
@@ -2136,8 +2149,8 @@ export const Rcs = (props) => {
 
   const onFallbackMessageChange = ({ target: { value } }) => {
     const error = fallbackMessageErrorHandler(value);
-    setFallbackMessage(value);
-    setFallbackMessageError(error);
+    // setFallbackMessage(value);
+    // setFallbackMessageError(error);
   };
 
   const fallbackMessageErrorHandler = (value) => {
@@ -2714,8 +2727,8 @@ const onTitleAddVar = () => {
   const rcsDltCardDeleteHandler = () => {
     closeDltContainerHandler();
     setDltEditData({});
-    setFallbackMessage('');
-    setFallbackMessageError(false);
+    // setFallbackMessage('');
+    // setFallbackMessageError(false);
     setShowDltCard(false);
   };
 
@@ -3295,6 +3308,36 @@ const onTitleAddVar = () => {
       return hasMeaningfulSmsFallbackShape(mapped) ? mapped : null;
     })();
 
+    const carouselCardContent = isCarouselType
+      ? (carouselData || []).map((card = {}) => {
+          const cardMediaType = card.mediaType;
+          const isCardVideo = cardMediaType === RCS_MEDIA_TYPES.VIDEO;
+          const isCardImage = cardMediaType === RCS_MEDIA_TYPES.IMAGE;
+          const mediaUrl = isCardVideo
+            ? (card.videoAsset?.videoSrc || '')
+            : (card.imageSrc || '');
+          const thumbnailUrl = isCardVideo
+            ? (card.thumbnailSrc || card.videoAsset?.videoThumbnail || '')
+            : '';
+          return {
+            title: card.title || '',
+            description: card.description || '',
+            mediaType: cardMediaType,
+            ...((isCardImage || isCardVideo) && {
+              media: {
+                mediaUrl,
+                thumbnailUrl,
+                height: selectedCarouselHeight || MEDIUM,
+                ...(isCardVideo && card.videoAsset?.videoName && { videoName: card.videoAsset.videoName }),
+              },
+            }),
+            ...(Array.isArray(card.suggestions) && card.suggestions.length > 0 && {
+              suggestions: card.suggestions,
+            }),
+          };
+        })
+      : null;
+
     const payload = {
       name: templateName,
       versions: {
@@ -3302,13 +3345,18 @@ const onTitleAddVar = () => {
           content: {
             RCS: {
               rcsContent: {
-                cardType: STANDALONE,
-                cardSettings: {
-                  cardOrientation: isMediaTypeImage ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.orientation || VERTICAL : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.orientation || VERTICAL,
-                  ...(alignment && { mediaAlignment: alignment }),
-                  cardWidth: cardWidthFromSelection,
-                },
-                cardContent: [
+                ...(rcsAccount && !isFullMode && { accountId: rcsAccount }),
+                cardType: isCarouselType ? contentType.carousel : STANDALONE,
+                cardSettings: isCarouselType
+                  ? { cardWidth: selectedCarouselWidth || SMALL }
+                  : {
+                      cardOrientation: isMediaTypeImage ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.orientation || VERTICAL : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.orientation || VERTICAL,
+                      ...(alignment && { mediaAlignment: alignment }),
+                      cardWidth: cardWidthFromSelection,
+                    },
+                cardContent: isCarouselType
+                  ? carouselCardContent
+                  : [
                   {
                     // Persist raw template copy + cardVarMapped — not resolveTemplateWithMap output — so library
                     // / getFormData round-trip keeps {{…}} and slot values (resolved strings broke reopen hydration).
@@ -3429,8 +3477,29 @@ const onTitleAddVar = () => {
                         }),
                       }
                     : {
-                        // campaign payload: non-DLT → message only; DLT → message + templateConfigs
+                        // Round-trip storage: full shape so reopening the editor restores template
+                        // name, sender IDs, and var mappings. normalizeRcsMessageContentForApi
+                        // (called in CreativesContainer getCreativesData) strips this to
+                        // { message, templateConfigs } before the API call — the extra fields here
+                        // are only used for re-hydration, never sent to the API.
                         message: smsBodyText,
+                        ...(smsFallbackForPayload.templateName && {
+                          smsTemplateName: smsFallbackForPayload.templateName,
+                        }),
+                        ...(smsFallbackForPayload.templateContent && {
+                          templateContent: smsFallbackForPayload.templateContent,
+                        }),
+                        ...(typeof smsFallbackForPayload.unicodeValidity === 'boolean' && {
+                          unicodeValidity: smsFallbackForPayload.unicodeValidity,
+                        }),
+                        ...(Array.isArray(registeredSenderIdsForPayload) && {
+                          registeredSenderIds: registeredSenderIdsForPayload,
+                        }),
+                        ...(smsFallbackForPayload[RCS_SMS_FALLBACK_VAR_MAPPED_PROP]
+                          && Object.keys(smsFallbackForPayload[RCS_SMS_FALLBACK_VAR_MAPPED_PROP]).length > 0 && {
+                          [RCS_SMS_FALLBACK_VAR_MAPPED_PROP]:
+                            smsFallbackForPayload[RCS_SMS_FALLBACK_VAR_MAPPED_PROP],
+                        }),
                         ...(isDltCampaign && smsFallbackTemplateConfigs && {
                           templateConfigs: smsFallbackTemplateConfigs,
                         }),
@@ -3757,18 +3826,18 @@ const onTitleAddVar = () => {
       return true;
     }
 
-    if (isMediaTypeText && templateDesc.trim() === '') {
+    if (!isCarouselType && isMediaTypeText && templateDesc.trim() === '') {
       return true;
     }
-    if (isMediaTypeImage && rcsImageSrc === '') {
+    if (!isCarouselType && isMediaTypeImage && rcsImageSrc === '') {
       return true;
     }
-    if(isMediaTypeVideo && (rcsThumbnailSrc === '' || rcsVideoSrc.videoSrc === '')) {
+    if (!isCarouselType && isMediaTypeVideo && (rcsThumbnailSrc === '' || rcsVideoSrc.videoSrc === '')) {
       return true;
     }
 
     if (buttonType.includes(CTA)) {
-      const hasValidButtons = suggestions.every(suggestion => 
+      const hasValidButtons = suggestions.every(suggestion =>
         suggestion.text && suggestion.url && !suggestionError && !forbiddenCharactersValidation(suggestion.text)
       );
       if (!hasValidButtons) {

package/v2Containers/Rcs/messages.js

@@ -47,10 +47,6 @@ export default defineMessages({
     id: `${prefix}.btnLabel`,
     defaultMessage: 'Buttons',
   },
-  carouselMediaVideoOption:{
-    id: `${prefix}.carouselMediaVideoOption`,
-    defaultMessage: 'Video',
-  },
   btnTypeNone: {
     id: `${prefix}.btnTypeNone`,
     defaultMessage: 'None',

package/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js.rej

@@ -1,18 +0,0 @@
-diff a/app/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js b/app/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js	(rejected hunks)
-@@ -226,11 +361,16 @@ const RcsPreviewContent = ({
-   const timestamp = `${displayHours}:${displayMinutes} ${ampm}`;
- 
-   // Render normal RCS preview (same structure as SMS up to sms-message-container)
-+  const hasCarousel = Array.isArray(content?.carouselData) && content.carouselData.length > 0;
-   const hasMedia = !!(content?.rcsImageSrc || content?.rcsVideoSrc);
-+  const contentToRender = hasCarousel
-+    ? renderCarouselPreviewContent()
-+    : (hasMedia ? renderMediaPreviewContent() : renderTextPreviewContent());
- 
-   return (
-+    <CapRow
-+      className={`sms-device-container rcs-device-container ${hasCarousel ? 'rcs-device-container-carousel' : ''}`}
-+    >
-       {/* Device Background Image */}
-       <CapImage
-         className="sms-device-image"