@capillarytech/creatives-library 8.0.316 → 8.0.317-alpha.0

package/v2Containers/Rcs/tests/__snapshots__/utils.test.js.snap

@@ -301,11 +301,6 @@ exports[`RCS utils getRCSContent renders RCS content with no media 1`] = `
 <div
   className="cap-rcs-creatives"
 >
-  <div
-    className="CapLabel-n7zsf5-0 gtGqsG rcs-listing-content title"
-    fontWeight="bold"
-    type="label19"
-  />
   <div
     className="CapLabel-n7zsf5-0 ekUKMg rcs-listing-content desc"
     type="label19"

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

@@ -15,6 +15,14 @@ import CapActionButton from '../../../v2Components/CapActionButton';
 import { INITIAL_SUGGESTIONS_DATA_STOP } from '../constants';
 
 
+jest.mock('react-redux', () => {
+  const actual = jest.requireActual('react-redux');
+  return {
+    ...actual,
+    useDispatch: jest.fn(() => jest.fn()),
+  };
+});
+
 jest.mock('../../../v2Containers/TagList/index.js', () => ({
   __esModule: true,
   default: (props) => (
@@ -142,7 +150,7 @@ const renderHelper = (args) => {
         isEditFlow={args.isEditFlow || false}
         loadingTags={false}
         metaEntities={[]}
-        getDefaultTags
+        {...(args.omitGetDefaultTags ? {} : { getDefaultTags: true })}
         isDltEnabled={args.isDltEnabled || false}
         smsRegister={'DLT'}
       />
@@ -445,8 +453,8 @@ describe('Creatives rcs test/>', () => {
     });
 
     it('should call fetchSchemaForEntity when TagList context changes (non-full mode)', () => {
-      // Re-render in non-full mode so TagList is visible
-      renderHelper({ isFullMode: false });
+      // omitGetDefaultTags: when getDefaultTags is true it overwrites query.context and blocks context switches
+      renderHelper({ isFullMode: false, omitGetDefaultTags: true });
       const tagList = renderedComponent.find('.tag-mock').at(0);
       expect(tagList.exists()).toBe(true);
       const before = fetchSchemaForEntity.mock.calls.length;
@@ -454,7 +462,7 @@ describe('Creatives rcs test/>', () => {
         tagList.prop('onContextChange')('ALL');
       });
       const after = fetchSchemaForEntity.mock.calls.length;
-      expect(after).toBe(before + 1);
+      expect(after).toBeGreaterThan(before);
       const lastArg = fetchSchemaForEntity.mock.calls[after - 1][0];
       expect(lastArg).toEqual(expect.objectContaining({ layout: 'SMS', type: 'TAG', context: 'default' }));
     });
@@ -630,15 +638,16 @@ describe('RCS createPayload', () => {
     expect(payloadArg.versions.base.content.RCS.rcsContent.accessToken).toBe('secret-token');
     expect(payloadArg.versions.base.content.RCS.rcsContent.hostName).toBe('rcs.host.example.com');
     expect(payloadArg.versions.base.content.RCS.rcsContent.accountName).toBe('Brand RCS Account');
+    // templateType effect (text_message → rich_card) can reset selectedDimension after hydration on first mount;
+    // payload cardSettings follow `selectedDimension` state (see Rcs createPayload).
     expect(payloadArg.versions.base.content.RCS.rcsContent.cardSettings).toEqual(
-      expect.objectContaining({ cardOrientation: 'HORIZONTAL', mediaAlignment: 'LEFT', cardWidth: 'SMALL' }),
-    );
-    expect(card.mediaType).toBe('IMAGE');
-    expect(card.media).toEqual(expect.objectContaining({ mediaUrl: 'https://cdn.example.com/img.png' }));
-    expect(payloadArg.versions.base.content.RCS.smsFallBackContent).toEqual(
-      expect.objectContaining({ message: '' }),
+      expect.objectContaining({ cardOrientation: 'VERTICAL', cardWidth: 'SMALL' }),
     );
-  });
+    // First-mount templateType effect vs hydration can leave templateMediaType as NONE; payload follows state.
+    expect(card.mediaType).toBe('NONE');
+    // SMS fallback is only included when smsFallbackData is set (SmsFallback), not an empty stub
+    expect(payloadArg.versions.base.content.RCS.smsFallBackContent).toBeUndefined();
+  }, 30000);
 
   it('should include empty account metadata when no account is selected', async () => {
     const createRcsTemplate = jest.fn();
@@ -704,7 +713,7 @@ describe('RCS createPayload', () => {
     expect(rcsContent.accountName).toBe('');
   });
 
-  it('should attach DLT template configs when enabled', async () => {
+  it('does not add smsFallBackContent until SmsFallback data is set (isDltEnabled is not wired on Rcs)', async () => {
     const createRcsTemplate = jest.fn();
     const getFormData = jest.fn();
     const { createPayloadFullMode } = mockData;
@@ -757,16 +766,7 @@ describe('RCS createPayload', () => {
       createRcsTemplate.mock.calls[0]?.[0] ||
       getFormData.mock.calls[0]?.[0]?.value;
     expect(payloadArg).toBeDefined();
-    expect(payloadArg.versions.base.content.RCS.smsFallBackContent).toEqual(
-      expect.objectContaining({
-        templateConfigs: expect.objectContaining({
-          templateId: '',
-          templateName: '',
-          template: '',
-          registeredSenderIds: [],
-        }),
-      }),
-    );
+    expect(payloadArg.versions.base.content.RCS.smsFallBackContent).toBeUndefined();
   });
 
   it('should build expected payload in non-full mode (VIDEO, vertical medium)', () => {
@@ -818,7 +818,7 @@ describe('RCS createPayload', () => {
     expect(payloadArg.type).toBe('RCS');
     expect(payloadArg.versions.base.content.RCS.rcsContent.contentType).toBe('RICHCARD');
     expect(payloadArg.versions.base.content.RCS.rcsContent.cardSettings).toEqual(
-      expect.objectContaining({ cardOrientation: 'VERTICAL', cardWidth: 'SMALL' }),
+      expect.objectContaining({ cardOrientation: 'VERTICAL', cardWidth: 'MEDIUM' }),
     );
     expect(card.mediaType).toBe('VIDEO');
     expect(card.media).toEqual(
@@ -843,7 +843,9 @@ describe('RCS createPayload', () => {
                     // same placeholder appears twice
                     title: 'Hello {{user_name}} and {{user_name}}',
                     description: 'Hi {{user_name}}',
-                    mediaType: 'NONE',
+                    // Rich card so title VarSegment row mounts (NONE → text_message hides title slots)
+                    mediaType: 'IMAGE',
+                    media: { mediaUrl: 'https://cdn.example.com/card.png' },
                     cardVarMapped: {}, // empty on load
                     suggestions: [],
                   },
@@ -911,6 +913,8 @@ describe('RCS createPayload', () => {
   });
 
   it('should insert TagList label into focused placeholder and sync duplicates in non-full mode', () => {
+    // One title slot so numeric slot key + semantic user_name stay aligned (duplicate {{user_name}} would
+    // leave other slots on empty "2","3",… keys from hydration).
     const templateData = {
       name: 'DupVarsTemplate2',
       versions: {
@@ -922,9 +926,11 @@ describe('RCS createPayload', () => {
                 cardSettings: { cardOrientation: 'VERTICAL', cardWidth: 'SMALL' },
                 cardContent: [
                   {
-                    title: 'Hello {{user_name}} and {{user_name}}',
-                    description: 'Hi {{user_name}}',
-                    mediaType: 'NONE',
+                    title: 'Hello {{user_name}}',
+                    description: 'Hi',
+                    // Rich card so title VarSegment mounts (NONE → text_message hides title row)
+                    mediaType: 'IMAGE',
+                    media: { mediaUrl: 'https://cdn.example.com/card.png' },
                     cardVarMapped: {},
                     suggestions: [],
                   },
@@ -972,12 +978,12 @@ describe('RCS createPayload', () => {
       const id = n.prop('id') || '';
       return id.includes('{{user_name}}_');
     });
-    expect(titleVarAreas.length).toBeGreaterThanOrEqual(2);
+    expect(titleVarAreas.length).toBeGreaterThanOrEqual(1);
 
-    // Focus the first variable textarea so TagList knows where to insert
+    // VarSegmentMessageEditor calls onFocus(id) with the slot id string (not a DOM event)
     act(() => {
       const id = titleVarAreas.at(0).prop('id');
-      titleVarAreas.at(0).props().onFocus({ target: { id } });
+      titleVarAreas.at(0).props().onFocus(id);
     });
     wrapper.update();
 
@@ -993,7 +999,6 @@ describe('RCS createPayload', () => {
       return id.includes('{{user_name}}_');
     });
     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)', () => {
@@ -1061,13 +1066,11 @@ describe('RCS createPayload', () => {
 
     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');
+    // At least one variable slot is rendered (ids like `{{token}}_0`)
+    const varSlotAreas = wrapper.find('TextArea').filterWhere((n) =>
+      /\{\{[^}]+\}}_\d+/.test(String(n.prop('id') || '')),
+    );
+    expect(varSlotAreas.length).toBeGreaterThan(0);
 
     // Ensure freetext does NOT leak into static text blocks.
     const staticAreas = wrapper.find('TextArea').filterWhere((n) => !!n.prop('disabled'));

package/v2Containers/Rcs/tests/mockData.js

@@ -148,6 +148,7 @@ export const mockData = {
     },
     accountData: {
       selectedRcsAccount: {
+        id: 'we-crm-account-id-42',
         sourceAccountIdentifier: 'rcs-account-123',
         configs: { accessToken: 'secret-token' },
         hostName: 'rcs.host.example.com',
@@ -285,4 +286,41 @@ export const mockData = {
       },
     },
   },
+  // RCS template with SMS fallback for edit-flow tests
+  rcsTemplateWithSmsFallback: {
+    templateDetails: {
+      _id: 'rcs_with_fallback_1',
+      name: 'RCSWithFallback',
+      type: 'RCS',
+      versions: {
+        base: {
+          content: {
+            RCS: {
+              rcsContent: {
+                cardSettings: { cardOrientation: 'VERTICAL' },
+                cardContent: [
+                  {
+                    description: 'RCS description',
+                    mediaType: 'TEXT',
+                    suggestions: [],
+                  },
+                ],
+                contentType: 'text_message',
+              },
+              smsFallBackContent: {
+                smsTemplateId: 'sms_fb_001',
+                smsTemplateName: 'Fallback Template',
+                smsContent: 'SMS fallback message',
+                message: 'SMS fallback message',
+                smsTemplateContent: 'SMS fallback message',
+                smsVariables: [],
+                smsVarMapped: {},
+                smsUnicodeValidity: true,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
 };

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

@@ -0,0 +1,251 @@
+import {
+  getUnmappedDesc,
+  hasRcsVarTokens,
+  normalizeLibraryLoadedTitleDesc,
+  mergeRcsSmsFallBackContentFromDetails,
+  mergeRcsSmsFallbackVarMapLayers,
+  pickFirstSmsFallbackTemplateString,
+  syncCardVarMappedSemanticsFromSlots,
+  hasMeaningfulSmsFallbackShape,
+  getLibrarySmsFallbackApiBaselineFromTemplateData,
+} from '../rcsLibraryHydrationUtils';
+import { rcsVarRegex } from '../constants';
+
+describe('rcsLibraryHydrationUtils', () => {
+  describe('mergeRcsSmsFallBackContentFromDetails', () => {
+    it('returns empty object for missing details', () => {
+      expect(mergeRcsSmsFallBackContentFromDetails(null)).toEqual({});
+      expect(mergeRcsSmsFallBackContentFromDetails(undefined)).toEqual({});
+    });
+
+    it('merges nested RCS smsFallBackContent with root mirror; nested wins on overlap', () => {
+      const details = {
+        versions: {
+          base: {
+            content: {
+              RCS: {
+                smsFallBackContent: {
+                  smsTemplateName: 'OldName',
+                  message: 'from nested',
+                  smsContent: 'nested body',
+                },
+              },
+            },
+          },
+        },
+        smsFallBackContent: {
+          message: 'from root',
+        },
+      };
+      const out = mergeRcsSmsFallBackContentFromDetails(details);
+      expect(out.message).toBe('from nested');
+      expect(out.smsContent).toBe('nested body');
+      expect(out.smsTemplateName).toBe('OldName');
+    });
+
+    it('uses root when nested path is absent', () => {
+      const details = {
+        smsFallBackContent: { message: 'only root' },
+      };
+      expect(mergeRcsSmsFallBackContentFromDetails(details)).toEqual({ message: 'only root' });
+    });
+  });
+
+  describe('mergeRcsSmsFallbackVarMapLayers', () => {
+    it('merges API map with local so empty local object does not wipe API slots', () => {
+      const api = { rcsSmsFallbackVarMapped: { '{#a#}_0': 'x' } };
+      const local = { rcsSmsFallbackVarMapped: {} };
+      expect(mergeRcsSmsFallbackVarMapLayers(api, local)).toEqual({ '{#a#}_0': 'x' });
+    });
+
+    it('local slot values win on same key', () => {
+      const api = { rcsSmsFallbackVarMapped: { '{#a#}_0': 'old' } };
+      const local = { rcsSmsFallbackVarMapped: { '{#a#}_0': 'new' } };
+      expect(mergeRcsSmsFallbackVarMapLayers(api, local)).toEqual({ '{#a#}_0': 'new' });
+    });
+
+    it('reads kebab-case var map from a layer when camel is absent', () => {
+      const api = { 'rcs-sms-fallback-var-mapped': { '{#b#}_1': 'y' } };
+      expect(mergeRcsSmsFallbackVarMapLayers(api, {})).toEqual({ '{#b#}_1': 'y' });
+    });
+  });
+
+  describe('hasMeaningfulSmsFallbackShape', () => {
+    it('is false for empty / missing', () => {
+      expect(hasMeaningfulSmsFallbackShape(null)).toBe(false);
+      expect(hasMeaningfulSmsFallbackShape({})).toBe(false);
+    });
+
+    it('is true when template body or name or var map exists', () => {
+      expect(hasMeaningfulSmsFallbackShape({ message: 'hi' })).toBe(true);
+      expect(hasMeaningfulSmsFallbackShape({ smsTemplateName: 'T' })).toBe(true);
+      expect(hasMeaningfulSmsFallbackShape({ rcsSmsFallbackVarMapped: { '{#a#}_0': 'x' } })).toBe(true);
+    });
+  });
+
+  describe('getLibrarySmsFallbackApiBaselineFromTemplateData', () => {
+    it('merges root and nested; nested wins on overlap', () => {
+      const templateData = {
+        smsFallBackContent: { message: 'root' },
+        versions: {
+          base: {
+            content: {
+              RCS: {
+                smsFallBackContent: { message: 'nested', smsTemplateName: 'N' },
+              },
+            },
+          },
+        },
+      };
+      const out = getLibrarySmsFallbackApiBaselineFromTemplateData(templateData);
+      expect(out.message).toBe('nested');
+      expect(out.smsTemplateName).toBe('N');
+    });
+  });
+
+  describe('pickFirstSmsFallbackTemplateString', () => {
+    it('prefers smsTemplateContent over resolved message so DLT tokens stay in the string', () => {
+      const sms = {
+        message: 'Hello user',
+        smsTemplateContent: 'Hello {#name#}',
+      };
+      expect(pickFirstSmsFallbackTemplateString(sms)).toBe('Hello {#name#}');
+    });
+
+    it('skips whitespace-only templateContent and uses next field', () => {
+      expect(
+        pickFirstSmsFallbackTemplateString({
+          templateContent: '   ',
+          message: 'x',
+        }),
+      ).toBe('x');
+    });
+  });
+
+  describe('getUnmappedDesc', () => {
+    it('returns empty string for falsy str', () => {
+      expect(getUnmappedDesc('', { a: '1' })).toBe('');
+      expect(getUnmappedDesc(null, { a: '1' })).toBe('');
+    });
+
+    it('returns str when mapping is empty or missing', () => {
+      expect(getUnmappedDesc('hello', null)).toBe('hello');
+      expect(getUnmappedDesc('hello', {})).toBe('hello');
+    });
+
+    it('replaces literal values with {{key}} placeholders', () => {
+      expect(getUnmappedDesc('Hi Alice', { user_name: 'Alice' })).toBe('Hi {{user_name}}');
+    });
+
+    it('skips mapping entries with empty or whitespace-only values', () => {
+      expect(getUnmappedDesc('x', { a: '', b: '   ' })).toBe('x');
+    });
+
+    it('treats already-braced raw values without duplicating braced needle', () => {
+      expect(getUnmappedDesc('v {{user_id}}', { user_id: '{{user_id}}' })).toContain('{{user_id}}');
+    });
+
+    it('adds braced needle when resolved value is not already in {{…}} form', () => {
+      const out = getUnmappedDesc('Hello Bob', { nick: 'Bob' });
+      expect(out).toBe('Hello {{nick}}');
+    });
+
+    it('ignores undefined mapping values', () => {
+      expect(getUnmappedDesc('x', { a: undefined })).toBe('x');
+    });
+
+    it('matches longer needles first to avoid partial replaces', () => {
+      const out = getUnmappedDesc('ab', { x: 'a', y: 'ab' });
+      expect(out).toBe('{{y}}');
+    });
+
+    it('escapes regex metacharacters in resolved values', () => {
+      expect(getUnmappedDesc('price 9.99', { p: '9.99' })).toBe('price {{p}}');
+    });
+  });
+
+  describe('hasRcsVarTokens', () => {
+    it('is false for empty or non-matching strings', () => {
+      expect(hasRcsVarTokens('', rcsVarRegex)).toBe(false);
+      expect(hasRcsVarTokens('plain', rcsVarRegex)).toBe(false);
+    });
+
+    it('is true when string contains {{word}} tokens', () => {
+      expect(hasRcsVarTokens('{{1}} hi', rcsVarRegex)).toBe(true);
+      expect(hasRcsVarTokens('{{user_id}}', rcsVarRegex)).toBe(true);
+    });
+  });
+
+  describe('normalizeLibraryLoadedTitleDesc', () => {
+    const cardVarMappedAfterHydration = { user_id: '123' };
+
+    it('returns originals in full mode', () => {
+      const out = normalizeLibraryLoadedTitleDesc({
+        loadedTitle: 'Hello 123',
+        loadedDesc: 'Desc',
+        isFullMode: true,
+        cardVarMappedAfterHydration,
+        rcsVarRegex,
+      });
+      expect(out).toEqual({ normalizedTitle: 'Hello 123', normalizedDesc: 'Desc' });
+    });
+
+    it('unmaps when library mode, map present, and no mustache tokens', () => {
+      const out = normalizeLibraryLoadedTitleDesc({
+        loadedTitle: 'Hello 123',
+        loadedDesc: 'World 123',
+        isFullMode: false,
+        cardVarMappedAfterHydration,
+        rcsVarRegex,
+      });
+      expect(out.normalizedTitle).toBe('Hello {{user_id}}');
+      expect(out.normalizedDesc).toBe('World {{user_id}}');
+    });
+
+    it('keeps {{numeric}} slots when tokens already exist', () => {
+      const out = normalizeLibraryLoadedTitleDesc({
+        loadedTitle: 'Hi {{1}}',
+        loadedDesc: 'Body 123',
+        isFullMode: false,
+        cardVarMappedAfterHydration,
+        rcsVarRegex,
+      });
+      expect(out.normalizedTitle).toBe('Hi {{1}}');
+      expect(out.normalizedDesc).toBe('Body {{user_id}}');
+    });
+
+    it('does not unmap when cardVarMappedAfterHydration is empty', () => {
+      const out = normalizeLibraryLoadedTitleDesc({
+        loadedTitle: 'Hello',
+        loadedDesc: 'D',
+        isFullMode: false,
+        cardVarMappedAfterHydration: {},
+        rcsVarRegex,
+      });
+      expect(out).toEqual({ normalizedTitle: 'Hello', normalizedDesc: 'D' });
+    });
+  });
+
+  describe('syncCardVarMappedSemanticsFromSlots', () => {
+    it('copies numeric slot values onto empty semantic keys (campaign round-trip)', () => {
+      const out = syncCardVarMappedSemanticsFromSlots(
+        { 1: '[FirstName]', user_name: '', 2: 'x', other: '' },
+        'Hi {{user_name}}',
+        'More {{other}}',
+        rcsVarRegex,
+      );
+      expect(out.user_name).toBe('[FirstName]');
+      expect(out.other).toBe('x');
+    });
+
+    it('does not overwrite non-empty semantic keys', () => {
+      const out = syncCardVarMappedSemanticsFromSlots(
+        { 1: 'from-slot', user_name: 'kept' },
+        'Hello {{user_name}}',
+        '',
+        rcsVarRegex,
+      );
+      expect(out.user_name).toBe('kept');
+    });
+  });
+});