@capillarytech/creatives-library 8.0.239 → 8.0.241

package/package.json

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

package/v2Containers/Rcs/index.js

@@ -3,7 +3,10 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import { get, isEmpty, cloneDeep } from 'lodash';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import cloneDeep from 'lodash/cloneDeep';
+import isNil from 'lodash/isNil';
 import styled from 'styled-components';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
@@ -282,9 +285,22 @@ export const Rcs = (props) => {
       if (type === MESSAGE_TEXT) setTemplateDescError(false);
       return;
     }
+
+    let contentForValidation = resolved;
+    const placeholderTokens = templateStr.match(rcsVarRegex) || [];
+    placeholderTokens.forEach((t) => {
+      const escaped = t.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+      contentForValidation = contentForValidation.replace(new RegExp(escaped, 'g'), '');
+    });
+    if (!contentForValidation.trim()) {
+      if (type === TITLE_TEXT) setTemplateTitleError(false);
+      if (type === MESSAGE_TEXT) setTemplateDescError(false);
+      return;
+    }
+
     const validationResponse =
       validateTags({
-        content: resolved,
+        content: contentForValidation,
       tagsParam: tags,
       injectedTagsParams: injectedTags,
       location,
@@ -322,7 +338,8 @@ export const Rcs = (props) => {
       if (rcsVarTestRegex.test(elem)) {
         const key = getVarNameFromToken(elem);
         const v = cardVarMapped?.[key];
-        return (v ?? '').toString();
+        if (isNil(v) || String(v)?.trim?.() === '') return elem;
+        return String(v);
       }
       return elem;
     }).join('');
@@ -330,7 +347,7 @@ export const Rcs = (props) => {
 
 
   useEffect(() => {
-    if (isFullMode) return;
+    if (isFullMode || isEditFlow) return;
     const tokens = [
       ...(templateTitle ? (templateTitle.match(rcsVarRegex) || []) : []),
       ...(templateDesc ? (templateDesc.match(rcsVarRegex) || []) : []),
@@ -1729,8 +1746,7 @@ const splitTemplateVarString = (str) => {
     const currentDimension =selectedDimension || Object.keys(RCS_VIDEO_THUMBNAIL_DIMENSIONS)[0];
           return (
             <>
-            {renderLabel('cardOrientationLabel')}
-            {/* Match image behavior: allow changing dimensions only in full-mode create flow */}
+            {isFullMode && renderLabel('cardOrientationLabel')}
             {!isEditFlow && isFullMode && (
             <CapSelect
               id="rcs-dimension-select"
@@ -1829,11 +1845,27 @@ const splitTemplateVarString = (str) => {
     if (!str) return '';
     if (!mapping || Object.keys(mapping).length === 0) return str;
     let result = str;
-    Object.keys(mapping).forEach((key) => {
-      const value = mapping[key];
-      if (!value) return;
-      const bracedValue = /^\{\{[\s\S]*\}\}$/.test(value) ? value : `{{${value}}}`;
-      const escaped = bracedValue.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+    const replacements = [];
+    Object.entries(mapping).forEach(([key, value]) => {
+      const raw = (value ?? '').toString();
+      if (!raw || raw?.trim?.() === '') return;
+      const braced = /^\{\{[\s\S]*\}\}$/.test(raw) ? raw : `{{${raw}}}`;
+      replacements.push({ key, needle: raw });
+      if (braced !== raw) replacements.push({ key, needle: braced });
+    });
+    const seen = new Set();
+    const uniq = replacements
+      .filter(({ key, needle }) => {
+        const id = `${key}::${needle}`;
+        if (seen.has(id)) return false;
+        seen.add(id);
+        return true;
+      })
+      .sort((a, b) => (b.needle.length - a.needle.length));
+
+    uniq.forEach(({ key, needle }) => {
+      if (!needle) return;
+      const escaped = needle.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
       const regex = new RegExp(escaped, 'g');
       result = result.replace(regex, `{{${key}}}`);
     });
@@ -1879,8 +1911,24 @@ const splitTemplateVarString = (str) => {
                         ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.heightType || MEDIUM
                         : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.heightType || MEDIUM,
                     }}),
-                    // ...(!isFullMode && {Status:RCS_STATUSES.approved}), //since, we anyways allow only approved templates to be sent, sending approved by default for edit functionality
-                    ...(!isFullMode && { cardVarMapped }),
+                    ...(!isFullMode && (() => {
+                      const tokens = [
+                        ...(templateTitle ? (templateTitle.match(rcsVarRegex) || []) : []),
+                        ...(templateDesc ? (templateDesc.match(rcsVarRegex) || []) : []),
+                      ];
+                      const allowedKeys = tokens
+                        .map((t) => getVarNameFromToken(t))
+                        .filter(Boolean);
+                      const nextMap = {};
+                      allowedKeys.forEach((k) => {
+                        if (Object.prototype.hasOwnProperty.call(cardVarMapped || {}, k)) {
+                          nextMap[k] = cardVarMapped[k];
+                        } else {
+                          nextMap[k] = '';
+                        }
+                      });
+                      return { cardVarMapped: nextMap };
+                    })()),
                     ...(suggestions.length > 0 && { suggestions }),
                   }
                 ],

package/v2Containers/Rcs/tests/index.test.js

@@ -968,6 +968,87 @@ describe('RCS createPayload', () => {
     expect(updatedTitleVarAreas.at(0).prop('value')).toBe('{{first_name}}');
     expect(updatedTitleVarAreas.at(1).prop('value')).toBe('{{first_name}}');
   });
+
+  it('should keep two tags + freetext inside the variable textarea in non-full mode edit (not merged into static text)', () => {
+    const templateData = {
+      name: 'TwoTagsAndFreeText',
+      versions: {
+        base: {
+          content: {
+            RCS: {
+              rcsContent: {
+                cardType: 'STANDALONE',
+                cardSettings: { cardOrientation: 'VERTICAL', cardWidth: 'SMALL' },
+                cardContent: [
+                  {
+                    // NOTE: In campaigns/edit flows, title/description can be stored "resolved" (values applied).
+                    // We expect RCS to "unmap" this back to placeholders and show values in variable textareas.
+                    title: 'Update for {{user_id_b64}} regarding {{first_name}}{{adv}}freeText',
+                    description: 'Hi {{user_id_b64}}, your {{first_name}}{{adv}}freeText is ready.',
+                    mediaType: 'NONE',
+                    cardVarMapped: {
+                      user_name: '{{user_id_b64}}',
+                      service_type: '{{first_name}}{{adv}}freeText',
+                    },
+                    suggestions: [],
+                  },
+                ],
+                contentType: 'RICHCARD',
+              },
+            },
+          },
+        },
+      },
+      type: 'RCS',
+    };
+
+    const wrapper = mountWithIntl(
+      <Provider store={store}>
+        <Rcs
+          actions={{
+            clearCreateResponse: jest.fn(),
+            getTemplateDetails: jest.fn(),
+            uploadRcsAsset: jest.fn(),
+            clearRcsMediaAsset: jest.fn(),
+            editTemplate: jest.fn(),
+            clearEditResponse: jest.fn(),
+          }}
+          globalActions={{ fetchSchemaForEntity }}
+          onCreateComplete={onCreateComplete}
+          handleClose={handleClose}
+          intl={{ formatMessage }}
+          location={{ pathname: '/rcs/edit', query: { type: false, module: 'default' }, search: '' }}
+          params={params}
+          templateData={templateData}
+          rcsData={{}}
+          isFullMode={false}
+          isEditFlow={false}
+          loadingTags={false}
+          metaEntities={[]}
+          isDltEnabled={false}
+          smsRegister={'DLT'}
+          getFormData={jest.fn()}
+        />
+      </Provider>,
+    );
+
+    wrapper.update();
+
+    // The placeholder {{service_type}} should exist as a variable textarea id, and its value should be the mixed string.
+    const serviceTypeAreas = wrapper.find('TextArea').filterWhere((n) => {
+      const id = n.prop('id') || '';
+      return id.includes('{{service_type}}_');
+    });
+    expect(serviceTypeAreas.length).toBeGreaterThanOrEqual(1);
+    expect(serviceTypeAreas.at(0).prop('value')).toBe('{{first_name}}{{adv}}freeText');
+
+    // Ensure freetext does NOT leak into static text blocks.
+    const staticAreas = wrapper.find('TextArea').filterWhere((n) => !!n.prop('disabled'));
+    const staticValues = staticAreas.map((n) => String(n.prop('value') || ''));
+    staticValues.forEach((v) => {
+      expect(v.includes('freeText')).toBe(false);
+    });
+  });
 });
 
 describe('Character Counting Functions', () => {