@capillarytech/creatives-library 9.0.15-alpha.3 → 9.0.16-beta.0

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

@@ -102,7 +102,7 @@ exports[`RCS utils getRCSContent renders RCS content with image and CTA suggesti
     style={Object {}}
   >
     <i
-      className="cap-icon-v2 cap-icon-v2-open-in-new xs"
+      className="cap-icon-v2 cap-icon-v2-launch xs"
       onClick={[Function]}
       style={
         Object {
@@ -113,12 +113,40 @@ exports[`RCS utils getRCSContent renders RCS content with image and CTA suggesti
       <svg
         fill="currentColor"
         height="1em"
-        viewBox="0 0 16 16"
+        viewBox="0 0 24 24"
         width="1em"
       >
-        <path
-          d="M12 12H4V4h2a1 1 0 1 0 0-2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8c1.1 0 2-.9 2-2v-2a1 1 0 0 0-2 0v2zM8.142 2.976c0 .54.437.977.977.977h1.552L7.285 7.338a.973.973 0 1 0 1.377 1.377l3.385-3.386v1.552a.976.976 0 1 0 1.953 0V3a1 1 0 0 0-1-1H9.119a.976.976 0 0 0-.977.976z"
-        />
+        <defs>
+          <path
+            d="M19 19H5V5h5a1 1 0 0 0 0-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-6a1 1 0 0 0-2 0v6zM14 4a1 1 0 0 0 1 1h2.59l-6.297 6.297a.997.997 0 0 0 1.41 1.41L19 6.41V9a1 1 0 0 0 2 0V4a1 1 0 0 0-1-1h-5a1 1 0 0 0-1 1z"
+            id="launch_svg__a"
+          />
+        </defs>
+        <g
+          fill="none"
+          fillRule="evenodd"
+        >
+          <mask
+            fill="currentColor"
+            id="launch_svg__b"
+          >
+            <use
+              xlinkHref="#launch_svg__a"
+            />
+          </mask>
+          <use
+            fill="currentColor"
+            xlinkHref="#launch_svg__a"
+          />
+          <g
+            fill="currentColor"
+            mask="url(#launch_svg__b)"
+          >
+            <path
+              d="M0 0h24v24H0z"
+            />
+          </g>
+        </g>
       </svg>
     </i>
     Shop
@@ -228,7 +256,7 @@ exports[`RCS utils getRCSContent renders RCS content with multiple suggestion ty
     style={Object {}}
   >
     <i
-      className="cap-icon-v2 cap-icon-v2-open-in-new xs"
+      className="cap-icon-v2 cap-icon-v2-launch xs"
       onClick={[Function]}
       style={
         Object {
@@ -239,12 +267,40 @@ exports[`RCS utils getRCSContent renders RCS content with multiple suggestion ty
       <svg
         fill="currentColor"
         height="1em"
-        viewBox="0 0 16 16"
+        viewBox="0 0 24 24"
         width="1em"
       >
-        <path
-          d="M12 12H4V4h2a1 1 0 1 0 0-2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8c1.1 0 2-.9 2-2v-2a1 1 0 0 0-2 0v2zM8.142 2.976c0 .54.437.977.977.977h1.552L7.285 7.338a.973.973 0 1 0 1.377 1.377l3.385-3.386v1.552a.976.976 0 1 0 1.953 0V3a1 1 0 0 0-1-1H9.119a.976.976 0 0 0-.977.976z"
-        />
+        <defs>
+          <path
+            d="M19 19H5V5h5a1 1 0 0 0 0-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-6a1 1 0 0 0-2 0v6zM14 4a1 1 0 0 0 1 1h2.59l-6.297 6.297a.997.997 0 0 0 1.41 1.41L19 6.41V9a1 1 0 0 0 2 0V4a1 1 0 0 0-1-1h-5a1 1 0 0 0-1 1z"
+            id="launch_svg__a"
+          />
+        </defs>
+        <g
+          fill="none"
+          fillRule="evenodd"
+        >
+          <mask
+            fill="currentColor"
+            id="launch_svg__b"
+          >
+            <use
+              xlinkHref="#launch_svg__a"
+            />
+          </mask>
+          <use
+            fill="currentColor"
+            xlinkHref="#launch_svg__a"
+          />
+          <g
+            fill="currentColor"
+            mask="url(#launch_svg__b)"
+          >
+            <path
+              d="M0 0h24v24H0z"
+            />
+          </g>
+        </g>
       </svg>
     </i>
     URL Action
@@ -287,6 +343,14 @@ exports[`RCS utils getRCSContent renders RCS content with no media 1`] = `
 <div
   className="cap-rcs-creatives"
 >
+  <div
+    className="cap-label cap-label-div label19 rcs-listing-content title"
+    style={
+      Object {
+        "fontWeight": "bold",
+      }
+    }
+  />
   <div
     className="cap-label cap-label-div label19 rcs-listing-content desc"
     style={Object {}}

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

@@ -14,19 +14,6 @@ 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,
@@ -155,7 +142,7 @@ const renderHelper = (args) => {
         isEditFlow={args.isEditFlow || false}
         loadingTags={false}
         metaEntities={[]}
-        {...(args.omitGetDefaultTags ? {} : { getDefaultTags: true })}
+        getDefaultTags
         isDltEnabled={args.isDltEnabled || false}
         smsRegister={'DLT'}
       />
@@ -199,21 +186,21 @@ describe('Creatives rcs test/>', () => {
     renderedComponent.update();
     expect(renderedComponent).toMatchSnapshot();
 
-    // Carousel option exists
+    // Carousel option exists but is disabled
     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).toBeFalsy();
+    expect(options[2].value).toBe('carousel');
+    expect(options[2].disabled).toBe(true);
 
-    // Edit mode: radio group is replaced by a plain readonly value, not shown disabled
-    renderHelper({
+    // Disabled state in edit mode
+    renderHelper({ 
       params,
       rcsData: { templateDetails: mockData.rcsRichCardTemplate }
     });
-    expect(renderedComponent.find('CapRadioGroup#select-rcs-template-type')).toHaveLength(0);
-    expect(renderedComponent.find('CapHeading.rcs-creative-name-value').length).toBeGreaterThan(0);
+    const editModeRadioGroup = renderedComponent.find('CapRadioGroup#select-rcs-template-type').at(0);
+    expect(editModeRadioGroup.props().disabled).toBe(true);
     expect(renderedComponent).toMatchSnapshot();
   });
 
@@ -458,8 +445,8 @@ describe('Creatives rcs test/>', () => {
     });
 
     it('should call fetchSchemaForEntity when TagList context changes (non-full mode)', () => {
-      // omitGetDefaultTags: when getDefaultTags is true it overwrites query.context and blocks context switches
-      renderHelper({ isFullMode: false, omitGetDefaultTags: true });
+      // Re-render in non-full mode so TagList is visible
+      renderHelper({ isFullMode: false });
       const tagList = renderedComponent.find('.tag-mock').at(0);
       expect(tagList.exists()).toBe(true);
       const before = fetchSchemaForEntity.mock.calls.length;
@@ -467,126 +454,13 @@ describe('Creatives rcs test/>', () => {
         tagList.prop('onContextChange')('ALL');
       });
       const after = fetchSchemaForEntity.mock.calls.length;
-      expect(after).toBeGreaterThan(before);
+      expect(after).toBe(before + 1);
       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('should resolve shared variables across multiple carousel cards 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);
-
-    // Variable slot id may live on `id` or React `key` depending on CapInput/TextArea wiring.
-    const nameVarAreas = wrapper.find('CapInputTextArea').filterWhere((n) => {
-      const id = String(n.prop('id') || '');
-      const key = String(n.key() || '');
-      return id.includes('{{name}}_') || key.includes('{{name}}_');
-    });
-    expect(nameVarAreas.length).toBeGreaterThanOrEqual(1);
-
-    act(() => {
-      const slotId = nameVarAreas.at(0).prop('id') || nameVarAreas.at(0).key();
-      nameVarAreas.at(0).props().onChange({ target: { id: slotId, value: 'madhavi' } });
-    });
-    wrapper.update();
-
-    // Inline preview should now show resolved values across BOTH cards
-    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 madhavi');
-    expect(inlineCards[1].title).toBe('Offer for madhavi');
-    expect(inlineCards[1].bodyText).toBe('Dear madhavi');
-
-    // Slidebox content should also be resolved (same underlying mapping)
-    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 madhavi');
-    expect(slideboxContent.carouselData[1].title).toBe('Offer for madhavi');
-    expect(slideboxContent.carouselData[1].bodyText).toBe('Dear madhavi');
-  });
-});
-
 describe('RCS orientation tests', () => {
   it('should default to MEDIUM_HEIGHT (vertical) orientation', () => {
     renderHelper({ isEditFlow: false }); // force CapSelect to render
@@ -673,7 +547,7 @@ describe('RCS orientation tests', () => {
 });
 
 describe('RCS createPayload', () => {
-  it('should build expected payload in full mode (IMAGE)', async () => {
+  it('should build expected payload in full mode (IMAGE, horizontal-left)', async () => {
     const createRcsTemplate = jest.fn();
     const getTemplateDetails = jest.fn();
     const getFormData = jest.fn();
@@ -756,10 +630,15 @@ 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).toBeDefined();
-    // SMS fallback is only included when smsFallbackData is set (SmsFallback), not an empty stub
-    expect(payloadArg.versions.base.content.RCS.smsFallBackContent).toBeUndefined();
-  }, 30000);
+    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: '' }),
+    );
+  });
 
   it('should include empty account metadata when no account is selected', async () => {
     const createRcsTemplate = jest.fn();
@@ -825,7 +704,7 @@ describe('RCS createPayload', () => {
     expect(rcsContent.accountName).toBe('');
   });
 
-  it('does not add smsFallBackContent until SmsFallback data is set (isDltEnabled is not wired on Rcs)', async () => {
+  it('should attach DLT template configs when enabled', async () => {
     const createRcsTemplate = jest.fn();
     const getFormData = jest.fn();
     const { createPayloadFullMode } = mockData;
@@ -878,7 +757,16 @@ describe('RCS createPayload', () => {
       createRcsTemplate.mock.calls[0]?.[0] ||
       getFormData.mock.calls[0]?.[0]?.value;
     expect(payloadArg).toBeDefined();
-    expect(payloadArg.versions.base.content.RCS.smsFallBackContent).toBeUndefined();
+    expect(payloadArg.versions.base.content.RCS.smsFallBackContent).toEqual(
+      expect.objectContaining({
+        templateConfigs: expect.objectContaining({
+          templateId: '',
+          templateName: '',
+          template: '',
+          registeredSenderIds: [],
+        }),
+      }),
+    );
   });
 
   it('should build expected payload in non-full mode (VIDEO, vertical medium)', () => {
@@ -955,9 +843,8 @@ 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: 'https://cdn.example.com/card.png' },
+                    media: { mediaUrl: '', thumbnailUrl: '' },
                     cardVarMapped: {}, // empty on load
                     suggestions: [],
                   },
@@ -1176,11 +1063,13 @@ describe('RCS createPayload', () => {
 
     wrapper.update();
 
-    // 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);
+    // 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');
 
     // 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,7 +148,6 @@ export const mockData = {
     },
     accountData: {
       selectedRcsAccount: {
-        id: 'we-crm-account-id-42',
         sourceAccountIdentifier: 'rcs-account-123',
         configs: { accessToken: 'secret-token' },
         hostName: 'rcs.host.example.com',
@@ -286,41 +285,4 @@ 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,
-              },
-            },
-          },
-        },
-      },
-    },
-  },
 };