@capillarytech/creatives-library 8.0.316-alpha.2 → 8.0.316-alpha.4

package/v2Components/CommonTestAndPreview/messages.js

@@ -24,6 +24,20 @@ export default defineMessages({
     id: `${scope}.personalizationTags`,
     defaultMessage: 'Personalization Tags',
   },
+  rcsTagsSectionTitle: {
+    id: `${scope}.rcsTagsSectionTitle`,
+    defaultMessage: 'RCS Tags',
+  },
+  /** Primary SMS section when channel is SMS — `messages[`${channel}TagsSectionTitle`]` resolves to this. */
+  SMSTagsSectionTitle: {
+    id: `${scope}.SMSTagsSectionTitle`,
+    defaultMessage: 'SMS tags',
+  },
+  /** Fallback SMS under RCS — same label as SMS Test & Preview for consistent personalization UX. */
+  smsFallbackTagsSectionTitle: {
+    id: `${scope}.smsFallbackTagsSectionTitle`,
+    defaultMessage: 'SMS tags',
+  },
   customValues: {
     id: `${scope}.customValues`,
     defaultMessage: 'Custom Values',
@@ -36,6 +50,14 @@ export default defineMessages({
     id: `${scope}.discardCustomValues`,
     defaultMessage: 'Discard custom values',
   },
+  rcsSenderIdLabel: {
+    id: `${scope}.rcsSenderIdLabel`,
+    defaultMessage: 'RCS Sender ID',
+  },
+  fallbackSmsSenderIdLabel: {
+    id: `${scope}.fallbackSmsSenderIdLabel`,
+    defaultMessage: 'Fallback SMS Sender ID',
+  },
   updatePreview: {
     id: `${scope}.updatePreview`,
     defaultMessage: 'Update Preview',
@@ -92,6 +114,14 @@ export default defineMessages({
     id: `${scope}.previewTitle`,
     defaultMessage: 'Preview',
   },
+  rcsTab: {
+    id: `${scope}.rcsTab`,
+    defaultMessage: 'RCS',
+  },
+  smsFallbackTab: {
+    id: `${scope}.smsFallbackTab`,
+    defaultMessage: 'Fallback SMS',
+  },
   previewPlaceholder: {
     id: `${scope}.previewPlaceholder`,
     defaultMessage: 'Click "Update Preview" to see the rendered email.',
@@ -180,14 +210,22 @@ export default defineMessages({
     id: `${scope}.lastModified`,
     defaultMessage: 'Last modified',
   },
-  by: {
-    id: `${scope}.by`,
-    defaultMessage: 'by',
+  byAuthor: {
+    id: `${scope}.byAuthor`,
+    defaultMessage: 'by {name}',
   },
   senderId: {
     id: `${scope}.senderId`,
     defaultMessage: 'Sender ID',
   },
+  rcsSenderIdLabel: {
+    id: `${scope}.rcsSenderIdLabel`,
+    defaultMessage: 'RCS sender ID',
+  },
+  domainLabel: {
+    id: `${scope}.domainLabel`,
+    defaultMessage: 'Domain',
+  },
   urlPreviewImage: {
     id: `${scope}.urlPreviewImage`,
     defaultMessage: 'URL Preview Image',

package/v2Components/CommonTestAndPreview/previewApiUtils.js

@@ -0,0 +1,59 @@
+/**
+ * Helpers for Liquid `/preview` (updateEmailPreview) responses.
+ * The API may nest the payload under `data` or return fields at the top level.
+ * SMS responses often use `messageBody` instead of `resolvedBody`.
+ */
+
+import { getFallbackResolvedContent } from '../../utils/templateVarUtils';
+import { RCS_SMS_FALLBACK_VAR_MAPPED_PROP } from './constants';
+
+export function normalizePreviewApiPayload(raw) {
+  if (!raw || typeof raw !== 'object') return raw;
+  const next = { ...raw };
+  if (next.resolvedBody == null) {
+    const alt = next.messageBody ?? next.previewMessage ?? next.previewText;
+    if (alt != null) next.resolvedBody = alt;
+  }
+  return next;
+}
+
+/**
+ * Returns a normalized preview object suitable for Redux `previewData`, or null on error / empty.
+ */
+export function extractPreviewFromLiquidResponse(response) {
+  if (!response || response.error) return null;
+  if (response.errors && Array.isArray(response.errors) && response.errors.length > 0) return null;
+
+  let body;
+  if (response.data !== undefined && response.data !== null && typeof response.data === 'object') {
+    body = normalizePreviewApiPayload(response.data);
+  } else if (typeof response === 'object' && !Array.isArray(response)) {
+    body = normalizePreviewApiPayload(response);
+  } else {
+    return null;
+  }
+
+  if (!body) return null;
+  if (body.resolvedBody === undefined && body.messageBody === undefined) {
+    return null;
+  }
+  return body;
+}
+
+/**
+ * RCS SMS fallback: merge template (`templateContent` / `content`) with VarSegment
+ * `rcsSmsFallbackVarMapped` before Liquid /preview, tag extraction, or createMessageMeta.
+ * Raw template alone is stale when the user edits slot values.
+ */
+export function getSmsFallbackTextForTagExtraction(smsFallbackContext) {
+  const rawTemplateBody =
+    smsFallbackContext?.templateContent ?? smsFallbackContext?.content ?? '';
+  if (!rawTemplateBody) return '';
+  const rcsSmsFallbackVarMapped = smsFallbackContext?.[RCS_SMS_FALLBACK_VAR_MAPPED_PROP];
+  const hasRcsSmsFallbackVarMappedEntries =
+    Object.keys(rcsSmsFallbackVarMapped ?? {}).length > 0;
+  if (hasRcsSmsFallbackVarMappedEntries) {
+    return getFallbackResolvedContent(rawTemplateBody, rcsSmsFallbackVarMapped ?? {});
+  }
+  return rawTemplateBody;
+}

package/v2Components/CommonTestAndPreview/sagas.js

@@ -3,7 +3,7 @@
  */
 
 import {
-  call, put, takeLatest, all,
+  call, put, takeLatest, takeEvery, all,
 } from 'redux-saga/effects';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
@@ -45,6 +45,7 @@ import {
   CHANNELS,
 } from './constants';
 import { parseSenderDetailsResponse } from './DeliverySettings/utils/parseSenderDetailsResponse';
+import { extractPreviewFromLiquidResponse } from './previewApiUtils';
 
 // Search Customers Saga
 export function* searchCustomersSaga(action) {
@@ -91,11 +92,12 @@ export function* updatePreviewSaga(action) {
     const customValues = action.payload.resolvedTags;
 
     const response = yield call(Api.updateEmailPreview, action.payload);
-    if (response?.data) {
+    const previewPayload = extractPreviewFromLiquidResponse(response);
+    if (previewPayload) {
       yield put({
         type: UPDATE_PREVIEW_SUCCESS,
         payload: {
-          previewData: response.data,
+          previewData: previewPayload,
           customValues, // Pass custom values to be preserved
         },
       });
@@ -236,8 +238,13 @@ export function* createMessageMetaSaga(action) {
 export function* getPrefilledValuesSaga(action) {
   try {
     const response = yield call(Api.updateEmailPreview, action.payload);
-    if (response?.data) {
-      yield put({ type: GET_PREFILLED_VALUES_SUCCESS, payload: { values: response?.data?.resolvedTagValues } });
+    const body =
+      response?.data !== undefined && response?.data !== null
+        ? response.data
+        : response;
+    const resolvedTagValues = body?.resolvedTagValues;
+    if (resolvedTagValues != null) {
+      yield put({ type: GET_PREFILLED_VALUES_SUCCESS, payload: { values: resolvedTagValues } });
     } else {
       // Pass all errors from API response to state
       yield put({
@@ -337,7 +344,9 @@ export function* getWeCrmAccountsSaga(action) {
 }
 
 export function* watchGetSenderDetails() {
-  yield takeLatest(GET_SENDER_DETAILS_REQUESTED, getSenderDetailsSaga);
+  // takeEvery: RCS test & preview dispatches RCS then SMS back-to-back; takeLatest would
+  // cancel the RCS fetch so senderDetailsByChannel.RCS stayed empty while SMS loaded.
+  yield takeEvery(GET_SENDER_DETAILS_REQUESTED, getSenderDetailsSaga);
 }
 
 export function* watchGetWeCrmAccounts() {

package/v2Components/CommonTestAndPreview/tests/CustomValuesEditor.test.js

@@ -0,0 +1,172 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+import CustomValuesEditor from '../CustomValuesEditor';
+
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => {
+  const React = require('react');
+  return function CapRow(props) {
+    return React.createElement('div', { className: props?.className, 'data-testid': 'cap-row' }, props?.children);
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapSpin', () => {
+  const React = require('react');
+  return function CapSpin() {
+    return React.createElement('div', { 'data-testid': 'cap-spin' }, 'spin');
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapSwitch', () => {
+  const React = require('react');
+  return function CapSwitch(props) {
+    return React.createElement('input', {
+      type: 'checkbox',
+      'data-testid': 'json-switch',
+      checked: props?.checked,
+      onChange: (e) => props?.onChange?.(e.target.checked),
+    });
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapButton', () => {
+  const React = require('react');
+  return function CapButton(props) {
+    return React.createElement('button', {
+      type: 'button',
+      'data-testid': 'cap-button',
+      onClick: props?.onClick,
+      disabled: props?.disabled,
+      'data-loading': props?.loading,
+    }, props?.children);
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapInput', () => {
+  const React = require('react');
+  return function CapInput(props) {
+    return React.createElement('input', {
+      'data-testid': 'tag-input',
+      value: props?.value,
+      placeholder: props?.placeholder,
+      onChange: props?.onChange,
+    });
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapLabel', () => {
+  const React = require('react');
+  return function CapLabel(props) {
+    return React.createElement('div', { className: props?.className, 'data-testid': 'cap-label' }, props?.children);
+  };
+});
+
+const formatMessage = (msg) => (typeof msg === 'object' && msg?.id ? msg.id : String(msg));
+
+const baseProps = {
+  isExtractingTags: false,
+  isUpdatePreviewDisabled: false,
+  showJSON: false,
+  setShowJSON: jest.fn(),
+  customValues: { 'tag.a': 'v1' },
+  handleJSONTextChange: jest.fn(),
+  sections: [
+    {
+      key: 'sec1',
+      title: 'Section A',
+      requiredTags: [{ fullPath: 'tag.a', name: 'a' }],
+      optionalTags: [{ fullPath: 'tag.b', name: 'b' }],
+    },
+  ],
+  handleCustomValueChange: jest.fn(),
+  handleDiscardCustomValues: jest.fn(),
+  handleUpdatePreview: jest.fn(),
+  isUpdatingPreview: false,
+  formatMessage,
+};
+
+describe('CustomValuesEditor', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('shows loading state when isExtractingTags', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor {...baseProps} isExtractingTags />
+      </IntlProvider>,
+    );
+    expect(screen.getByTestId('cap-spin')).toBeInTheDocument();
+  });
+
+  it('shows values missing label when isUpdatePreviewDisabled', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor {...baseProps} isUpdatePreviewDisabled />
+      </IntlProvider>,
+    );
+    expect(document.querySelector('.values-missing-message')).toBeTruthy();
+  });
+
+  it('toggles JSON mode and calls setShowJSON', () => {
+    const setShowJSON = jest.fn();
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor {...baseProps} setShowJSON={setShowJSON} />
+      </IntlProvider>,
+    );
+    fireEvent.click(screen.getByTestId('json-switch'));
+    expect(setShowJSON).toHaveBeenCalled();
+  });
+
+  it('renders JSON textarea and fires handleJSONTextChange', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor {...baseProps} showJSON />
+      </IntlProvider>,
+    );
+    const ta = document.querySelector('.json-textarea');
+    expect(ta).toBeTruthy();
+    fireEvent.change(ta, { target: { value: '{}' } });
+    expect(baseProps.handleJSONTextChange).toHaveBeenCalledWith('{}');
+  });
+
+  it('renders required and optional tag inputs when not JSON', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor {...baseProps} />
+      </IntlProvider>,
+    );
+    const inputs = screen.getAllByTestId('tag-input');
+    expect(inputs.length).toBeGreaterThan(0);
+    fireEvent.change(inputs[0], { target: { value: 'new' } });
+    expect(baseProps.handleCustomValueChange).toHaveBeenCalledWith('tag.a', 'new');
+  });
+
+  it('calls discard and update handlers', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor {...baseProps} />
+      </IntlProvider>,
+    );
+    const buttons = screen.getAllByTestId('cap-button');
+    fireEvent.click(buttons[0]);
+    fireEvent.click(buttons[buttons.length - 1]);
+    expect(baseProps.handleDiscardCustomValues).toHaveBeenCalled();
+    expect(baseProps.handleUpdatePreview).toHaveBeenCalled();
+  });
+
+  it('skips sections with no tags', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor
+          {...baseProps}
+          sections={[
+            { key: 'empty', requiredTags: [], optionalTags: [] },
+            baseProps.sections[0],
+          ]}
+        />
+      </IntlProvider>,
+    );
+    expect(screen.getAllByTestId('tag-input').length).toBeGreaterThan(0);
+  });
+});

package/v2Components/CommonTestAndPreview/tests/DeliverySettings/ModifyDeliverySettings.test.js

@@ -187,7 +187,7 @@ describe('ModifyDeliverySettings', () => {
       const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
       renderComponent({
-        channel: 'RCS',
+        channel: 'UNSUPPORTED_CHANNEL',
         onSaveDeliverySettings: onSave,
       });
 
@@ -614,6 +614,22 @@ describe('ModifyDeliverySettings', () => {
       expect(senderNameOptions).toEqual(expect.arrayContaining(['fallback@test.com']));
       expect(replyToOptions).toEqual(expect.arrayContaining(['Reply Label']));
     });
+
+    it('should use reply-to label when value is empty in reply-to options', () => {
+      renderComponent({
+        channel: CHANNELS.EMAIL,
+        senderDetailsOptions: [{
+          domainId: 90,
+          domainName: 'Reply Label Domain',
+          emailSenders: [{ value: 'a@test.com' }],
+          emailRepliers: [{ label: 'OnlyLabel', value: '' }],
+        }],
+        deliverySettings: { domainId: 90, domainGatewayMapId: 1 },
+      });
+
+      const replyToOptions = Array.from(getSelects()[3].querySelectorAll('option')).map((opt) => opt.textContent);
+      expect(replyToOptions).toEqual(expect.arrayContaining(['OnlyLabel']));
+    });
   });
 
   describe('WHATSAPP flow', () => {
@@ -838,6 +854,19 @@ describe('ModifyDeliverySettings', () => {
         sourceAccountIdentifier: 'waba-1',
       });
     });
+
+    it('should render disabled CapLabel with label3 for locked WhatsApp account row', () => {
+      renderComponent({
+        channel: CHANNELS.WHATSAPP,
+        senderDetailsOptions: whatsappDomains,
+        wecrmAccounts,
+        whatsappAccountFromForm: { accountName: 'Account One' },
+      });
+
+      const labels = screen.getAllByTestId('cap-label');
+      const disabledHint = labels.find((el) => el.getAttribute('data-type') === 'label3');
+      expect(disabledHint).toBeTruthy();
+    });
   });
 
   describe('Done and close handling', () => {
@@ -885,4 +914,243 @@ describe('ModifyDeliverySettings', () => {
       expect(onSave).toHaveBeenCalled();
     });
   });
+
+  describe('RCS flow', () => {
+    const rcsDomains = [
+      {
+        domainId: 51,
+        domainName: 'RCS Domain A',
+        dgmId: 511,
+        gsmSenders: [{ value: 'RCS_GSM_1' }, { value: 'RCS_GSM_2' }],
+      },
+      {
+        domainId: 52,
+        domainName: 'RCS Domain B',
+        dgmId: 522,
+        gsmSenders: [{ value: 'RCS_OTHER' }],
+      },
+    ];
+
+    const smsFallbackDomains = [
+      {
+        domainId: 61,
+        domainName: 'SMS Fallback',
+        gsmSenders: [{ value: 'SMS_FB_1' }],
+      },
+    ];
+
+    it('should render RCS domain and sender selects', () => {
+      renderComponent({
+        channel: CHANNELS.RCS,
+        senderDetailsOptions: rcsDomains,
+      });
+      expect(getSelects()).toHaveLength(2);
+    });
+
+    it('should set composite gsm sender id when RCS domain changes', () => {
+      const onSave = jest.fn();
+
+      renderComponent({
+        channel: CHANNELS.RCS,
+        senderDetailsOptions: rcsDomains,
+        onSaveDeliverySettings: onSave,
+      });
+
+      fireEvent.change(getSelects()[0], { target: { value: '51' } });
+      fireEvent.click(screen.getByText('Done'));
+
+      expect(onSave).toHaveBeenCalledWith(
+        expect.objectContaining({
+          domainId: 51,
+          gsmSenderId: '51|RCS_GSM_1',
+        }),
+      );
+    });
+
+    it('should render SMS fallback domain and sender when fallback options exist', () => {
+      renderComponent({
+        channel: CHANNELS.RCS,
+        senderDetailsOptions: rcsDomains,
+        smsFallbackSenderDetailsOptions: smsFallbackDomains,
+      });
+      expect(getSelects()).toHaveLength(4);
+    });
+
+    it('should strip gsm and fallback sender ids that are not in current options on Done', () => {
+      const onSave = jest.fn();
+
+      renderComponent({
+        channel: CHANNELS.RCS,
+        senderDetailsOptions: rcsDomains,
+        smsFallbackSenderDetailsOptions: smsFallbackDomains,
+        deliverySettings: {
+          domainId: 51,
+          gsmSenderId: 'not-a-valid-composite',
+          smsFallbackDomainId: 61,
+          cdmaSenderId: '61|SMS_FB_1',
+        },
+        onSaveDeliverySettings: onSave,
+      });
+
+      fireEvent.click(screen.getByText('Done'));
+
+      expect(onSave).toHaveBeenCalledWith(
+        expect.objectContaining({
+          domainId: 51,
+          gsmSenderId: '',
+          smsFallbackDomainId: 61,
+          cdmaSenderId: '61|SMS_FB_1',
+        }),
+      );
+    });
+
+    it('should strip invalid SMS fallback composite sender on Done', () => {
+      const onSave = jest.fn();
+
+      renderComponent({
+        channel: CHANNELS.RCS,
+        senderDetailsOptions: rcsDomains,
+        smsFallbackSenderDetailsOptions: smsFallbackDomains,
+        deliverySettings: {
+          domainId: 51,
+          gsmSenderId: '51|RCS_GSM_1',
+          smsFallbackDomainId: 61,
+          cdmaSenderId: 'bogus|value',
+        },
+        onSaveDeliverySettings: onSave,
+      });
+
+      fireEvent.click(screen.getByText('Done'));
+
+      expect(onSave).toHaveBeenCalledWith(
+        expect.objectContaining({
+          gsmSenderId: '51|RCS_GSM_1',
+          cdmaSenderId: '',
+        }),
+      );
+    });
+
+    it('should filter SMS fallback domains and GSM senders when TRAI DLT and registered sender IDs apply', () => {
+      const fallbackDlt = [
+        {
+          domainId: 71,
+          domainName: 'Has Registered GSM',
+          gsmSenders: [{ value: 'REG_OK' }, { value: 'NOT_ON_DLT' }],
+        },
+        {
+          domainId: 72,
+          domainName: 'No Match',
+          gsmSenders: [{ value: 'UNMATCHED' }],
+        },
+      ];
+      const onSave = jest.fn();
+
+      renderComponent({
+        channel: CHANNELS.RCS,
+        senderDetailsOptions: rcsDomains,
+        smsFallbackSenderDetailsOptions: fallbackDlt,
+        smsTraiDltEnabled: true,
+        registeredSenderIds: ['REG_OK'],
+        deliverySettings: {
+          domainId: 51,
+          gsmSenderId: '51|RCS_GSM_1',
+          smsFallbackDomainId: 71,
+          cdmaSenderId: '71|REG_OK',
+        },
+        onSaveDeliverySettings: onSave,
+      });
+
+      fireEvent.click(screen.getByText('Done'));
+
+      expect(onSave).toHaveBeenCalledWith(
+        expect.objectContaining({
+          smsFallbackDomainId: 71,
+          cdmaSenderId: '71|REG_OK',
+        }),
+      );
+    });
+
+    it('should set SMS fallback composite to first GSM after skipping domain-name echo row', () => {
+      const fallbackEcho = [
+        {
+          domainId: 80,
+          domainName: 'Echo',
+          gsmSenders: [{ value: 'Echo' }, { value: 'REAL_SENDER' }],
+        },
+      ];
+      const onSave = jest.fn();
+
+      renderComponent({
+        channel: CHANNELS.RCS,
+        senderDetailsOptions: rcsDomains,
+        smsFallbackSenderDetailsOptions: fallbackEcho,
+        deliverySettings: {
+          domainId: 51,
+          gsmSenderId: '51|RCS_GSM_1',
+        },
+        onSaveDeliverySettings: onSave,
+      });
+
+      fireEvent.change(getSelects()[2], { target: { value: '80' } });
+      fireEvent.click(screen.getByText('Done'));
+
+      expect(onSave).toHaveBeenCalledWith(
+        expect.objectContaining({
+          smsFallbackDomainId: 80,
+          cdmaSenderId: '80|REAL_SENDER',
+        }),
+      );
+    });
+
+    it('should only list RCS sender options for the selected RCS domain', () => {
+      const onSave = jest.fn();
+
+      renderComponent({
+        channel: CHANNELS.RCS,
+        senderDetailsOptions: rcsDomains,
+        onSaveDeliverySettings: onSave,
+        deliverySettings: {
+          domainId: 52,
+          gsmSenderId: '52|RCS_OTHER',
+        },
+      });
+
+      fireEvent.click(screen.getByText('Done'));
+
+      expect(onSave).toHaveBeenCalledWith(
+        expect.objectContaining({
+          domainId: 52,
+          gsmSenderId: '52|RCS_OTHER',
+        }),
+      );
+    });
+
+    it('should set composite RCS gsm when domain id is numeric zero', () => {
+      const rcsWithZero = [
+        {
+          domainId: 0,
+          domainName: 'Zero Id',
+          dgmId: 1,
+          gsmSenders: [{ value: 'Z_GSM' }],
+        },
+      ];
+      const onSave = jest.fn();
+
+      renderComponent({
+        channel: CHANNELS.RCS,
+        senderDetailsOptions: rcsWithZero,
+        onSaveDeliverySettings: onSave,
+      });
+
+      fireEvent.change(getSelects()[0], { target: { value: '0' } });
+      fireEvent.click(screen.getByText('Done'));
+
+      expect(onSave).toHaveBeenCalledWith(
+        expect.objectContaining({
+          domainId: 0,
+          gsmSenderId: '0|Z_GSM',
+        }),
+      );
+    });
+  });
 });