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

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,352 @@
+/**
+ * @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);
+  });
+
+  it('renders section title as FormattedMessage when title is an intl message object (not a string)', () => {
+    render(
+      <IntlProvider locale="en" messages={{ 'section.title.id': 'Intl Section Title' }}>
+        <CustomValuesEditor
+          {...baseProps}
+          sections={[
+            {
+              key: 'intl-sec',
+              title: { id: 'section.title.id', defaultMessage: 'Intl Section Title' },
+              requiredTags: [{ fullPath: 'tag.a', name: 'a' }],
+              optionalTags: [],
+            },
+          ]}
+        />
+      </IntlProvider>,
+    );
+    expect(screen.getByText('Intl Section Title')).toBeInTheDocument();
+  });
+
+  it('renders section title as plain text when title is a string', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor
+          {...baseProps}
+          sections={[
+            {
+              key: 'str-sec',
+              title: 'Plain String Title',
+              requiredTags: [{ fullPath: 'tag.a', name: 'a' }],
+              optionalTags: [],
+            },
+          ]}
+        />
+      </IntlProvider>,
+    );
+    expect(screen.getByText('Plain String Title')).toBeInTheDocument();
+  });
+
+  it('renders nothing for section title when title is null (does not crash)', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor
+          {...baseProps}
+          sections={[
+            {
+              key: 'no-title-sec',
+              title: null,
+              requiredTags: [{ fullPath: 'tag.a', name: 'a' }],
+              optionalTags: [],
+            },
+          ]}
+        />
+      </IntlProvider>,
+    );
+    const inputs = screen.getAllByTestId('tag-input');
+    expect(inputs.length).toBeGreaterThan(0);
+  });
+
+  it('uses tag.name as column label when fullPath is absent', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor
+          {...baseProps}
+          sections={[
+            {
+              key: 'name-only',
+              title: 'Section',
+              requiredTags: [{ name: 'myTag' }],
+              optionalTags: [],
+            },
+          ]}
+        />
+      </IntlProvider>,
+    );
+    expect(screen.getByText('myTag')).toBeInTheDocument();
+  });
+
+  it('uses empty string as column label when both fullPath and name are absent', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor
+          {...baseProps}
+          sections={[
+            {
+              key: 'no-label',
+              title: 'Section',
+              requiredTags: [{}],
+              optionalTags: [],
+            },
+          ]}
+        />
+      </IntlProvider>,
+    );
+    const inputs = screen.getAllByTestId('tag-input');
+    expect(inputs.length).toBeGreaterThan(0);
+  });
+
+  it('renders optional-only section (no requiredTags) correctly', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor
+          {...baseProps}
+          sections={[
+            {
+              key: 'optional-only',
+              title: 'Optional Section',
+              requiredTags: [],
+              optionalTags: [{ fullPath: 'tag.opt', name: 'opt' }],
+            },
+          ]}
+        />
+      </IntlProvider>,
+    );
+    expect(screen.getByText('Optional Section')).toBeInTheDocument();
+    const inputs = screen.getAllByTestId('tag-input');
+    expect(inputs.length).toBeGreaterThan(0);
+  });
+
+  it('renders required-only section (no optionalTags) correctly', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor
+          {...baseProps}
+          sections={[
+            {
+              key: 'required-only',
+              title: 'Required Section',
+              requiredTags: [{ fullPath: 'tag.req', name: 'req' }],
+              optionalTags: [],
+            },
+          ]}
+        />
+      </IntlProvider>,
+    );
+    expect(screen.getByText('Required Section')).toBeInTheDocument();
+    const inputs = screen.getAllByTestId('tag-input');
+    expect(inputs.length).toBeGreaterThan(0);
+  });
+
+  it('renders line numbers in JSON mode matching JSON line count', () => {
+    const multiValueCustomValues = { a: 'val1', b: 'val2', c: 'val3' };
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor
+          {...baseProps}
+          showJSON
+          customValues={multiValueCustomValues}
+        />
+      </IntlProvider>,
+    );
+    const lineNumbers = document.querySelectorAll('.line-number');
+    const expectedLineCount = JSON.stringify(multiValueCustomValues, null, 2).split('\n').length;
+    expect(lineNumbers.length).toBe(expectedLineCount);
+  });
+
+  it('passes fullPath as key for required tag row when fullPath is present', () => {
+    const handleChange = jest.fn();
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor
+          {...baseProps}
+          sections={[
+            {
+              key: 'sec',
+              title: 'S',
+              requiredTags: [{ fullPath: 'my.full.path', name: 'name' }],
+              optionalTags: [],
+            },
+          ]}
+          handleCustomValueChange={handleChange}
+          customValues={{ 'my.full.path': 'existing' }}
+        />
+      </IntlProvider>,
+    );
+    const input = screen.getByTestId('tag-input');
+    expect(input.value).toBe('existing');
+    fireEvent.change(input, { target: { value: 'updated' } });
+    expect(handleChange).toHaveBeenCalledWith('my.full.path', 'updated');
+  });
+});