@capillarytech/creatives-library 9.0.28 → 9.0.29-alpha.2

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

@@ -14,6 +14,19 @@ import TagList from '../../../v2Containers/TagList/index.js';
 import CapActionButton from '../../../v2Components/CapActionButton';
 import { INITIAL_SUGGESTIONS_DATA_STOP } from '../constants';
 
+// Ensure real UnifiedPreview: other suites mock the same module; parallel workers + load order
+// can leave a stub active. This factory wins for this file's resolution of UnifiedPreview.
+jest.mock('../../../v2Components/CommonTestAndPreview/UnifiedPreview', () =>
+  jest.requireActual('../../../v2Components/CommonTestAndPreview/UnifiedPreview'),
+);
+
+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,
@@ -142,7 +155,7 @@ const renderHelper = (args) => {
         isEditFlow={args.isEditFlow || false}
         loadingTags={false}
         metaEntities={[]}
-        getDefaultTags
+        {...(args.omitGetDefaultTags ? {} : { getDefaultTags: true })}
         isDltEnabled={args.isDltEnabled || false}
         smsRegister={'DLT'}
       />
@@ -186,21 +199,21 @@ describe('Creatives rcs test/>', () => {
     renderedComponent.update();
     expect(renderedComponent).toMatchSnapshot();
 
-    // Carousel option exists but is disabled
+    // Carousel option exists
     const options = radioGroup.props().options;
     expect(options).toHaveLength(3);
     expect(options[0].value).toBe('text_message');
     expect(options[1].value).toBe('rich_card');
-    expect(options[2].value).toBe('carousel');
-    expect(options[2].disabled).toBe(true);
+    expect(options[2].value).toBe('CAROUSEL');
+    expect(options[2].disabled).toBeFalsy();
 
-    // Disabled state in edit mode
-    renderHelper({ 
+    // Edit mode: radio group is replaced by a plain readonly value, not shown disabled
+    renderHelper({
       params,
       rcsData: { templateDetails: mockData.rcsRichCardTemplate }
     });
-    const editModeRadioGroup = renderedComponent.find('CapRadioGroup#select-rcs-template-type').at(0);
-    expect(editModeRadioGroup.props().disabled).toBe(true);
+    expect(renderedComponent.find('CapRadioGroup#select-rcs-template-type')).toHaveLength(0);
+    expect(renderedComponent.find('CapHeading.rcs-creative-name-value').length).toBeGreaterThan(0);
     expect(renderedComponent).toMatchSnapshot();
   });
 
@@ -445,8 +458,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,13 +467,375 @@ 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' }));
     });
   });
 });
 
+describe('RCS carousel label resolution in non-full mode', () => {
+  it('keeps every carousel variable slot independent, even when they share a literal tag name, in both inline preview and Test&Preview slidebox', async () => {
+    const templateData = {
+      name: 'CarouselVarsTemplate',
+      versions: {
+        base: {
+          content: {
+            RCS: {
+              rcsContent: {
+                cardType: 'CAROUSEL',
+                cardSettings: { cardOrientation: 'VERTICAL', cardWidth: 'SMALL' },
+                cardContent: [
+                  {
+                    title: 'Hi {{name}}',
+                    description: 'Welcome {{name}}',
+                    mediaType: 'IMAGE',
+                    media: { mediaUrl: 'https://cdn.example.com/c1.png', height: 'MEDIUM' },
+                    cardVarMapped: {}, // empty on load
+                    suggestions: [],
+                  },
+                  {
+                    title: 'Offer for {{name}}',
+                    description: 'Dear {{name}}',
+                    mediaType: 'IMAGE',
+                    media: { mediaUrl: 'https://cdn.example.com/c2.png', height: 'MEDIUM' },
+                    suggestions: [],
+                  },
+                ],
+                contentType: 'RICHCARD',
+              },
+            },
+          },
+        },
+      },
+      type: 'RCS',
+    };
+
+    const wrapper = mountWithIntl(
+      <Provider store={store}>
+        <Rcs
+          actions={{
+            uploadRcsAsset,
+            clearRcsMediaAsset,
+            createTemplate,
+            clearCreateResponse,
+            getTemplateDetails,
+            editTemplate,
+            clearEditResponse,
+          }}
+          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'}
+          showTestAndPreviewSlidebox
+        />
+      </Provider>,
+    );
+
+    // Flush hydration useEffects
+    await act(async () => {
+      await Promise.resolve();
+    });
+    wrapper.update();
+
+    // Sanity: carousel inline preview should be present (right preview column)
+    const inlinePreview = wrapper.find('UnifiedPreview').filterWhere((n) => n.prop('content')?.carouselData).at(0);
+    expect(inlinePreview.exists()).toBe(true);
+    expect(inlinePreview.props().content?.carouselData?.length).toBeGreaterThanOrEqual(2);
+
+    const nameVarAreaForCard = (cardIndex) =>
+      wrapper
+        .find('CarouselCard')
+        .filterWhere((n) => n.prop('cardIndex') === cardIndex)
+        .find('CapInputTextArea')
+        .filterWhere((n) => {
+          const id = String(n.prop('id') || '');
+          const key = String(n.key() || '');
+          return id.includes('{{name}}_') || key.includes('{{name}}_');
+        });
+
+    // Card 0 has two `{{name}}` occurrences — title's, then description's, in DOM order — and
+    // each is now its own independent slot despite sharing the literal name.
+    const card0NameAreas = nameVarAreaForCard(0);
+    expect(card0NameAreas.length).toBe(2);
+
+    act(() => {
+      const slotId = nameVarAreas.at(0).prop('id') || nameVarAreas.at(0).key();
+      nameVarAreas.at(0).props().onChange({ target: { id: slotId, value: 'madhavi' } });
+    });
+    wrapper.update();
+
+    // Only the title resolves — description's own `{{name}}` slot is untouched (independent slot).
+    const updatedInlinePreview = wrapper.find('UnifiedPreview').filterWhere((n) => n.prop('content')?.carouselData).at(0);
+    const inlineCards = updatedInlinePreview.props().content.carouselData;
+    expect(inlineCards[0].title).toBe('Hi madhavi');
+    expect(inlineCards[0].bodyText).toBe('Welcome {{name}}');
+    expect(inlineCards[1].title).toBe('Offer for {{name}}');
+    expect(inlineCards[1].bodyText).toBe('Dear {{name}}');
+
+    // Filling card 0's description slot separately resolves it without disturbing the title.
+    act(() => {
+      const descSlotId = nameVarAreaForCard(0).at(1).prop('id') || nameVarAreaForCard(0).at(1).key();
+      nameVarAreaForCard(0).at(1).props().onChange({ target: { id: descSlotId, value: 'lakshmi' } });
+    });
+    wrapper.update();
+
+    const afterDescInlinePreview = wrapper.find('UnifiedPreview').filterWhere((n) => n.prop('content')?.carouselData).at(0);
+    const afterDescInlineCards = afterDescInlinePreview.props().content.carouselData;
+    expect(afterDescInlineCards[0].title).toBe('Hi madhavi');
+    expect(afterDescInlineCards[0].bodyText).toBe('Welcome lakshmi');
+
+    // Slidebox content should mirror the same independent-slot resolution.
+    const slidebox = wrapper.find('TestAndPreviewSlidebox').at(0);
+    expect(slidebox.exists()).toBe(true);
+    const slideboxContent = slidebox.props().content;
+    expect(slideboxContent?.carouselData?.length).toBeGreaterThanOrEqual(2);
+    expect(slideboxContent.carouselData[0].title).toBe('Hi madhavi');
+    expect(slideboxContent.carouselData[0].bodyText).toBe('Welcome lakshmi');
+    expect(slideboxContent.carouselData[1].title).toBe('Offer for {{name}}');
+    expect(slideboxContent.carouselData[1].bodyText).toBe('Dear {{name}}');
+
+    // Setting card 1's own `{{name}}` slots independently resolves card 1 without disturbing card 0.
+    // Inactive tab panes aren't mounted until switched to, so activate card 1's tab first.
+    act(() => {
+      wrapper.find('CapTab').prop('onChange')('1');
+    });
+    wrapper.update();
+    const card1NameAreas = nameVarAreaForCard(1);
+    expect(card1NameAreas.length).toBe(2);
+    act(() => {
+      const slotId = card1NameAreas.at(0).prop('id') || card1NameAreas.at(0).key();
+      card1NameAreas.at(0).props().onChange({ target: { id: slotId, value: 'raghav' } });
+    });
+    wrapper.update();
+    act(() => {
+      const descSlotId = nameVarAreaForCard(1).at(1).prop('id') || nameVarAreaForCard(1).at(1).key();
+      nameVarAreaForCard(1).at(1).props().onChange({ target: { id: descSlotId, value: 'suresh' } });
+    });
+    wrapper.update();
+
+    const finalInlinePreview = wrapper.find('UnifiedPreview').filterWhere((n) => n.prop('content')?.carouselData).at(0);
+    const finalInlineCards = finalInlinePreview.props().content.carouselData;
+    expect(finalInlineCards[0].title).toBe('Hi madhavi');
+    expect(finalInlineCards[0].bodyText).toBe('Welcome lakshmi');
+    expect(finalInlineCards[1].title).toBe('Offer for raghav');
+    expect(finalInlineCards[1].bodyText).toBe('Dear suresh');
+  });
+
+  it('picking a tag from "Add Labels" for card 2\'s description (a bare semantic token with no numeric backing) shows the value live, without touching card 2\'s title slot', async () => {
+    const templateData = {
+      name: 'CarouselTagPickTemplate',
+      versions: {
+        base: {
+          content: {
+            RCS: {
+              rcsContent: {
+                cardType: 'CAROUSEL',
+                cardSettings: { cardOrientation: 'VERTICAL', cardWidth: 'SMALL' },
+                cardContent: [
+                  {
+                    title: 'Hi {{name}}',
+                    description: 'Welcome {{name}}',
+                    mediaType: 'IMAGE',
+                    media: { mediaUrl: 'https://cdn.example.com/c1.png', height: 'MEDIUM' },
+                    cardVarMapped: {},
+                    suggestions: [],
+                  },
+                  {
+                    title: 'sdvsdvs {{first_name_capital}}',
+                    description: 'dssdfv {{adv}}',
+                    mediaType: 'IMAGE',
+                    media: { mediaUrl: 'https://cdn.example.com/c2.png', height: 'MEDIUM' },
+                    cardVarMapped: {},
+                    suggestions: [],
+                  },
+                ],
+                contentType: 'RICHCARD',
+              },
+            },
+          },
+        },
+      },
+      type: 'RCS',
+    };
+
+    const wrapper = mountWithIntl(
+      <Provider store={store}>
+        <Rcs
+          actions={{
+            uploadRcsAsset,
+            clearRcsMediaAsset,
+            createTemplate,
+            clearCreateResponse,
+            getTemplateDetails,
+            editTemplate,
+            clearEditResponse,
+          }}
+          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'}
+        />
+      </Provider>,
+    );
+
+    // Flush hydration useEffects
+    await act(async () => {
+      await Promise.resolve();
+    });
+    wrapper.update();
+
+    // Card 2 is inactive until switched to.
+    act(() => {
+      wrapper.find('CapTab').prop('onChange')('1');
+    });
+    wrapper.update();
+
+    const card2 = wrapper.find('CarouselCard').filterWhere((n) => n.prop('cardIndex') === 1);
+
+    const descVarArea = card2
+      .find('CapInputTextArea')
+      .filterWhere((n) => String(n.prop('id') || '').includes('{{adv}}_'));
+    expect(descVarArea.length).toBeGreaterThanOrEqual(1);
+
+    // Focus card 2's description var slot, exactly like a user clicking into that box.
+    act(() => {
+      const id = descVarArea.at(0).prop('id');
+      descVarArea.at(0).props().onFocus({ target: { id } });
+    });
+    wrapper.update();
+
+    // Card 2's description TagList (the second .tag-mock under this card) picks "adv".
+    const card2AfterFocus = wrapper.find('CarouselCard').filterWhere((n) => n.prop('cardIndex') === 1);
+    const descTagList = card2AfterFocus.find('.tag-mock').at(1);
+    act(() => {
+      descTagList.props().onTagSelect('adv');
+    });
+    wrapper.update();
+
+    // Live (no save/reload) — the description's own box should now show the picked tag as its value.
+    const card2Final = wrapper.find('CarouselCard').filterWhere((n) => n.prop('cardIndex') === 1);
+    const descVarAreaAfterPick = card2Final
+      .find('CapInputTextArea')
+      .filterWhere((n) => String(n.prop('id') || '').includes('{{adv}}_'));
+    expect(descVarAreaAfterPick.at(0).prop('value')).toBe('{{adv}}');
+
+    // Title's own slot must be untouched by the description's tag pick.
+    const titleVarAreaAfterPick = card2Final
+      .find('CapInputTextArea')
+      .filterWhere((n) => String(n.prop('id') || '').includes('{{first_name_capital}}_'));
+    expect(titleVarAreaAfterPick.at(0).prop('value')).toBe('');
+  });
+
+  it('reopening a carousel after a prior save shows card 2\'s description value (persisted under its global positional key), not empty', async () => {
+    // Shape of a template that was already saved once: card 2 (index 1) picked "adv" for its
+    // description slot in an earlier session. Card 0 has 2 var tokens (title + desc), so card 2's
+    // title is global position 3 and its description is global position 4 — key "4".
+    const templateData = {
+      name: 'CarouselReopenTemplate',
+      versions: {
+        base: {
+          content: {
+            RCS: {
+              rcsContent: {
+                cardType: 'CAROUSEL',
+                cardSettings: { cardOrientation: 'VERTICAL', cardWidth: 'SMALL' },
+                cardContent: [
+                  {
+                    title: 'Hi {{name}}',
+                    description: 'Welcome {{name}}',
+                    mediaType: 'IMAGE',
+                    media: { mediaUrl: 'https://cdn.example.com/c1.png', height: 'MEDIUM' },
+                    cardVarMapped: {},
+                    suggestions: [],
+                  },
+                  {
+                    title: 'sdvsdvs {{first_name_capital}}',
+                    description: 'dssdfv {{adv}}',
+                    mediaType: 'IMAGE',
+                    media: { mediaUrl: 'https://cdn.example.com/c2.png', height: 'MEDIUM' },
+                    cardVarMapped: { '4': '{{adv}}' },
+                    suggestions: [],
+                  },
+                ],
+                contentType: 'RICHCARD',
+              },
+            },
+          },
+        },
+      },
+      type: 'RCS',
+    };
+
+    const wrapper = mountWithIntl(
+      <Provider store={store}>
+        <Rcs
+          actions={{
+            uploadRcsAsset,
+            clearRcsMediaAsset,
+            createTemplate,
+            clearCreateResponse,
+            getTemplateDetails,
+            editTemplate,
+            clearEditResponse,
+          }}
+          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'}
+        />
+      </Provider>,
+    );
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+    wrapper.update();
+
+    act(() => {
+      wrapper.find('CapTab').prop('onChange')('1');
+    });
+    wrapper.update();
+
+    const card2 = wrapper.find('CarouselCard').filterWhere((n) => n.prop('cardIndex') === 1);
+    const descVarArea = card2
+      .find('CapInputTextArea')
+      .filterWhere((n) => String(n.prop('id') || '').includes('{{adv}}_'));
+    expect(descVarArea.length).toBeGreaterThanOrEqual(1);
+    expect(descVarArea.at(0).prop('value')).toBe('{{adv}}');
+  });
+});
+
 describe('RCS orientation tests', () => {
   it('should default to MEDIUM_HEIGHT (vertical) orientation', () => {
     renderHelper({ isEditFlow: false }); // force CapSelect to render
@@ -547,7 +922,7 @@ describe('RCS orientation tests', () => {
 });
 
 describe('RCS createPayload', () => {
-  it('should build expected payload in full mode (IMAGE, horizontal-left)', async () => {
+  it('should build expected payload in full mode (IMAGE)', async () => {
     const createRcsTemplate = jest.fn();
     const getTemplateDetails = jest.fn();
     const getFormData = jest.fn();
@@ -630,15 +1005,10 @@ 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');
-    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(payloadArg.versions.base.content.RCS.rcsContent.cardSettings).toBeDefined();
+    // 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 +1074,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 +1127,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)', () => {
@@ -843,8 +1204,9 @@ describe('RCS createPayload', () => {
                     // same placeholder appears twice
                     title: 'Hello {{user_name}} and {{user_name}}',
                     description: 'Hi {{user_name}}',
+                    // Rich card so title VarSegment row mounts (NONE → text_message hides title slots)
                     mediaType: 'IMAGE',
-                    media: { mediaUrl: '', thumbnailUrl: '' },
+                    media: { mediaUrl: 'https://cdn.example.com/card.png' },
                     cardVarMapped: {}, // empty on load
                     suggestions: [],
                   },
@@ -1063,13 +1425,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('CapInputTextArea').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('CapInputTextArea').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('CapInputTextArea').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,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
 };