@capillarytech/creatives-library 9.0.57 → 9.0.59-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.57",
+  "version": "9.0.59-alpha.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -722,6 +722,21 @@ export const sendTransactionalComm = (payload) => {
   return request(url, getAPICallObject(HTTP_METHODS.POST, payload, false, false, false, true));
 };
 
+// CommunicationFlow's own fetch-by-id path (see mapCommDefinitionToStepData in
+// CommunicationFlow/utils) — lets a consumer that only stored a commDefinitionId (no local
+// content copy) hand CommunicationFlow just that id on edit; it fetches metadata + content itself.
+export const getCommDefinition = (commDefinitionId, include) => {
+  const query = include ? `?include=${encodeURIComponent(include)}` : '';
+  const url = `${COMM_DEFINITIONS_PATH}/${commDefinitionId}${query}`;
+  return request(url, getAPICallObject(HTTP_METHODS.GET, false, false, false, true));
+};
+
+// CommDefinition GET returns metadata only; fetch the version separately for message content.
+export const getCommDefinitionVersion = (commDefinitionId, version) => {
+  const url = `${COMM_DEFINITIONS_PATH}/${commDefinitionId}/version/${version}`;
+  return request(url, getAPICallObject(HTTP_METHODS.GET, false, false, false, true));
+};
+
 export const getCentralCommsMetaIds = (metaIds, metaType = TRANSACTION) => {
   const url = `${API_ENDPOINT}/common/central-comms/meta-id/${metaType}?metaIds=${metaIds}`;
   return request(url, getAPICallObject(HTTP_METHODS.GET, null, false, false, false, true));

package/services/tests/api.test.js

@@ -31,6 +31,8 @@ import {
   getCmsAccounts,
   getMembersLookup,
   createTestCustomer,
+  getCommDefinition,
+  getCommDefinitionVersion,
 } from '../api';
 import { mockData } from './mockData';
 import getSchema from '../getSchema';
@@ -1243,3 +1245,56 @@ describe('bulkClaimAndApprove', () => {
     expect(result).toEqual({ error: 'Network error' });
   });
 });
+
+describe('getCommDefinition', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('builds the URL without an include query param when include is not supplied', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({ status: 200, response: { data: { id: 'cd_1' } } }),
+    }));
+    await getCommDefinition('cd_1');
+    expect(global.fetch).toHaveBeenCalled();
+    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
+    expect(lastCall[0]).toContain('/comm-definitions/cd_1?');
+    expect(lastCall[0]).not.toContain('include=');
+  });
+
+  it('appends an include query param when supplied', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({ status: 200, response: { data: { id: 'cd_1' } } }),
+    }));
+    await getCommDefinition('cd_1', 'versions');
+    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
+    expect(lastCall[0]).toContain('/comm-definitions/cd_1?include=versions');
+  });
+});
+
+describe('getCommDefinitionVersion', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('builds the URL with the commDefinitionId and version segments', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({ status: 200, response: { data: {} } }),
+    }));
+    await getCommDefinitionVersion('cd_1', 2);
+    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
+    expect(lastCall[0]).toContain('/comm-definitions/cd_1/version/2');
+    expect(lastCall[1].method).toBe('GET');
+  });
+});

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -16,11 +16,11 @@ import { createStructuredSelector } from 'reselect';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import injectReducer from '../../utils/injectReducer';
 import { makeSelectAuthenticated } from '../Cap/selectors';
 import capReducer from '../Cap/reducer';
-import { createCommDefinition, editCommDefinition } from '../../services/api';
+import { createCommDefinition, editCommDefinition, getCommDefinition, getCommDefinitionVersion } from '../../services/api';
 import DynamicControlsStep from './steps/DynamicControlsStep';
 import MessageTypeStep from './steps/MessageTypeStep';
 import CommunicationStrategyStep from './steps/CommunicationStrategyStep';
@@ -41,8 +41,10 @@ import {
   CCS_CHANNEL_NAME_MAP,
   CCS_CONTENT_TRANSFORMS,
   REFERENCE_ID_EXISTS,
+  SINGLE_TEMPLATE,
 } from './constants';
 import { getEnabledSteps } from './utils/getEnabledSteps';
+import { fetchAndMapCommDefinition } from './utils/mapCommDefinitionToStepData';
 import messages from './messages';
 import './CommunicationFlow.scss';
 
@@ -76,12 +78,26 @@ const CommunicationFlow = ({
 }) => {
   const { formatMessage } = intl || {};
   const { messageTypeData = {}, communicationStrategyData = {}, contentTemplateData = {} } = config?.features || {};
+
+  // A consumer other than CapNotify (which always pre-fetches and passes full initialData
+  // itself) may hand CommunicationFlow only a commDefinitionId — no local content copy at all
+  // — and rely on CommunicationFlow to fetch + populate its own content (see the fetch effect
+  // below, and mapCommDefinitionToStepData). Captured once at mount: initialData/config aren't
+  // expected to change identity across the component's lifetime for this decision.
+  const [shouldFetchCommDefinition] = useState(
+    () => !!config?.context?.existingCommDefinitionId && !initialData?.contentItems?.length,
+  );
+  const [isFetchingCommDefinition, setIsFetchingCommDefinition] = useState(shouldFetchCommDefinition);
+
   // Initialize step data from initialData or defaults
   const [stepData, setStepData] = useState(() => {
     const defaultMessageType = messageTypeData.defaultOption?.value || MESSAGE_TYPES_OPTIONS?.[1]?.value || null;
     return {
-      messageType: initialData?.messageType || defaultMessageType,
-      communicationStrategy: initialData?.communicationStrategy || null,
+      // Pre-set to CCS's only supported strategy so the Channel Selection step (which only
+      // renders once communicationStrategy is set) is already mounted — showing its own
+      // loading state — while the fetch below is in flight, instead of staying blank/unmounted.
+      messageType: initialData?.messageType || (shouldFetchCommDefinition ? 'transactional' : defaultMessageType),
+      communicationStrategy: initialData?.communicationStrategy || (shouldFetchCommDefinition ? SINGLE_TEMPLATE : null),
       channel: initialData?.channel || config.channel || null,
       channels: initialData?.channels || [],
       selectedOfferDetails: initialData?.selectedOfferDetails || [],
@@ -91,7 +107,29 @@ const CommunicationFlow = ({
     };
   });
   const [validationErrors, setValidationErrors] = useState({});
-  const [saveError, setSaveError] = useState(null);
+
+  // Fetch-by-id: populate stepData from the CommDefinition itself when the consumer only
+  // supplied a commDefinitionId (see shouldFetchCommDefinition above). Runs once on mount.
+  useEffect(() => {
+    if (!shouldFetchCommDefinition) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const mapped = await fetchAndMapCommDefinition(config.context.existingCommDefinitionId, {
+          getCommDefinition,
+          getCommDefinitionVersion,
+        });
+        if (!cancelled && mapped) {
+          setStepData((prevStepData) => ({ ...prevStepData, ...mapped }));
+        }
+      } catch (error) {
+        console.error('[CommunicationFlow] fetchAndMapCommDefinition error:', error);
+      } finally {
+        if (!cancelled) setIsFetchingCommDefinition(false);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, []);
 
   // Memoize enabled steps
   const enabledSteps = useMemo(() => getEnabledSteps(config), [config]);
@@ -151,7 +189,6 @@ const CommunicationFlow = ({
   }, []);
 
   const handleSave = useCallback(async () => {
-    setSaveError(null);
     const aggregatedData = getAggregatedData();
     const shouldUseCCS = config?.useCCS !== false;
     let ccsCommDefinition = null;
@@ -222,11 +259,11 @@ const CommunicationFlow = ({
             })
             : await createCommDefinition(payload);
           if (res?.isError) {
-            setSaveError(formatMessage(messages.genericSaveError));
+            CapNotification.error({ message: formatMessage(messages.genericSaveError) });
             return;
           }
           if (isDuplicateReferenceIdError(res)) {
-            setSaveError(formatMessage(messages.duplicateReferenceIdError));
+            CapNotification.error({ message: formatMessage(messages.duplicateReferenceIdError) });
             return;
           }
           const data = res?.response?.data;
@@ -239,7 +276,7 @@ const CommunicationFlow = ({
                 status: data.status,
               };
             } else {
-              setSaveError(formatMessage(messages.genericSaveError));
+              CapNotification.error({ message: formatMessage(messages.genericSaveError) });
               return;
             }
           } else if (data?.id) {
@@ -250,12 +287,12 @@ const CommunicationFlow = ({
               status: data.status,
             };
           } else {
-            setSaveError(formatMessage(messages.genericSaveError));
+            CapNotification.error({ message: formatMessage(messages.genericSaveError) });
             return;
           }
         } catch (error) {
           console.error('[CommunicationFlow] CCS createCommDefinition error:', error);
-          setSaveError(formatMessage(messages.genericSaveError));
+          CapNotification.error({ message: formatMessage(messages.genericSaveError) });
           return;
         }
       } else if (!name) {
@@ -349,6 +386,7 @@ const CommunicationFlow = ({
               deliverySettingsData={config.features?.deliverySettingsData}
               config={config}
               capData={cap || capData}
+              isContentLoading={isFetchingCommDefinition}
             />
             {stepData.contentItems?.length > 0 && <CapDivider />}
           </CapRow>
@@ -377,11 +415,6 @@ const CommunicationFlow = ({
       {renderSteps()}
       {onSave && (
         <CapRow useLegacy className="communication-flow-container__footer">
-          {saveError && (
-            <CapLabel type="label2" className="communication-flow-container__save-error">
-              {saveError}
-            </CapLabel>
-          )}
           <CapButton type="primary" onClick={handleSave} disabled={isSaveDisabled}>
             {formatMessage(messages.save)}
           </CapButton>

package/v2Containers/CommunicationFlow/Tests/CommunicationFlow.test.js

@@ -5,6 +5,13 @@ jest.mock('../../../services/api', () => ({
   editCommDefinition: jest.fn(),
 }));
 
+jest.mock('@capillarytech/cap-ui-library/CapNotification', () => ({
+  error: jest.fn(),
+  success: jest.fn(),
+  warning: jest.fn(),
+  info: jest.fn(),
+}));
+
 jest.mock('../../CreativesContainer', () => function MockCreativesContainer({
   getCreativesData,
   handleCloseCreatives,
@@ -38,6 +45,7 @@ import { IntlProvider } from 'react-intl';
 import history from '../../../utils/history';
 import { initialReducer } from '../../../initialReducer';
 import CommunicationFlow from '../CommunicationFlow';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import { createCommDefinition, editCommDefinition } from '../../../services/api';
 import { getEnabledSteps } from '../utils/getEnabledSteps';
 import {
@@ -705,7 +713,7 @@ describe('handleSave — CCS flow', () => {
 
     await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
 
-    await waitFor(() => expect(screen.getByText('Something went wrong while saving your content. Please try again.')).toBeInTheDocument());
+    await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith({ message: 'Something went wrong while saving your content. Please try again.' }));
     expect(onSave).not.toHaveBeenCalled();
   });
 
@@ -721,7 +729,7 @@ describe('handleSave — CCS flow', () => {
 
     await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
 
-    await waitFor(() => expect(screen.getByText('Something went wrong while saving your content. Please try again.')).toBeInTheDocument());
+    await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith({ message: 'Something went wrong while saving your content. Please try again.' }));
     expect(onSave).not.toHaveBeenCalled();
   });
 
@@ -737,7 +745,7 @@ describe('handleSave — CCS flow', () => {
 
     await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
 
-    await waitFor(() => expect(screen.getByText('Something went wrong while saving your content. Please try again.')).toBeInTheDocument());
+    await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith({ message: 'Something went wrong while saving your content. Please try again.' }));
     expect(onSave).not.toHaveBeenCalled();
   });
 
@@ -758,7 +766,9 @@ describe('handleSave — CCS flow', () => {
     await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
 
     await waitFor(() => expect(createCommDefinition).toHaveBeenCalledTimes(1));
-    expect(await screen.findByText(/already in use in your organization/i)).toBeInTheDocument();
+    await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith({
+      message: 'This reference ID is already in use in your organization. Please use a different reference ID.',
+    }));
     expect(onSave).not.toHaveBeenCalled();
   });
 
@@ -904,7 +914,9 @@ describe('handleSave — CCS flow', () => {
     await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
 
     await waitFor(() => expect(editCommDefinition).toHaveBeenCalledTimes(1));
-    expect(await screen.findByText(/already in use in your organization/i)).toBeInTheDocument();
+    await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith({
+      message: 'This reference ID is already in use in your organization. Please use a different reference ID.',
+    }));
     expect(onSave).not.toHaveBeenCalled();
   });
 });

package/v2Containers/CommunicationFlow/steps/ChannelSelectionStep/ChannelSelectionStep.js

@@ -16,6 +16,7 @@ import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapCustomCard from '@capillarytech/cap-ui-library/CapCustomCard';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CreativesContainer from '../../../CreativesContainer';
 import TestAndPreviewSlidebox from '../../../../v2Components/TestAndPreviewSlidebox';
 import { DeliverySettingsSection } from '../DeliverySettingsStep';
@@ -54,6 +55,11 @@ const ChannelSelectionStep = ({
   intl,
   capData, // From Redux - contains user/org info needed by CouponsWrapper
   config,
+  // True while CommunicationFlow is fetching an existing CommDefinition's content by id (see
+  // config.context.existingCommDefinitionId in CommunicationFlow.js) — shown in place of the
+  // empty "Add creative" state so a consumer that only stored a commDefinitionId doesn't flash
+  // an empty content step before the fetched content arrives.
+  isContentLoading = false,
 }) => {
   const contentItems = value?.contentItems || [];
   const [showCreativesContainer, setShowCreativesContainer] = useState(false);
@@ -433,7 +439,11 @@ const ChannelSelectionStep = ({
             </CapHeading>
           )}
 
-          {contentItems?.length === 0 ? (
+          {contentItems?.length === 0 && isContentLoading ? (
+            <CapRow type="flex" justify="center" align="middle" className="content-template-section content-loading">
+              <CapSpin spinning />
+            </CapRow>
+          ) : contentItems?.length === 0 ? (
             <CapRow className={`content-template-section ${contentItems?.length === 0 ? 'no-content-items' : ''}`}>
               <CapDropdown
                 overlay={renderChannelDropdownOverlay() || <CapMenu />}
@@ -582,6 +592,7 @@ ChannelSelectionStep.propTypes = {
   intl: PropTypes.object.isRequired,
   capData: PropTypes.object, // Cap data from Redux (user/org info)
   config: PropTypes.object,
+  isContentLoading: PropTypes.bool,
 };
 
 ChannelSelectionStep.defaultProps = {
@@ -597,6 +608,7 @@ ChannelSelectionStep.defaultProps = {
   incentivesData: null,
   capData: {},
   config: {},
+  isContentLoading: false,
 };
 
 export default injectIntl(ChannelSelectionStep);

package/v2Containers/CommunicationFlow/utils/Tests/mapCommDefinitionToStepData.test.js

@@ -0,0 +1,268 @@
+import {
+  mapCommDefinitionToStepData,
+  fetchAndMapCommDefinition,
+  getLatestVersionFromAuditInfos,
+} from '../mapCommDefinitionToStepData';
+
+describe('getLatestVersionFromAuditInfos', () => {
+  it('returns currentVersion (or 0) when there are no SUBMITTED audit entries', () => {
+    expect(getLatestVersionFromAuditInfos({ auditInfos: [], currentVersion: 3 })).toBe(3);
+    expect(getLatestVersionFromAuditInfos({})).toBe(0);
+  });
+
+  it('returns one less than the SUBMITTED count when there are submitted entries', () => {
+    const commDefinition = {
+      auditInfos: [
+        { action: 'CREATED' },
+        { action: 'SUBMITTED' },
+        { action: 'APPROVED' },
+        { action: 'SUBMITTED' },
+      ],
+    };
+    expect(getLatestVersionFromAuditInfos(commDefinition)).toBe(1);
+  });
+});
+
+describe('mapCommDefinitionToStepData', () => {
+  it('returns null when there is no variant at all', () => {
+    expect(mapCommDefinitionToStepData({})).toBeNull();
+  });
+
+  it('returns null when the variant has no recognized channel content', () => {
+    const commDefinition = {
+      id: 'cd_1',
+      singleChannelStrategy: { variant: { channel: 'SMS' } },
+    };
+    expect(mapCommDefinitionToStepData(commDefinition)).toBeNull();
+  });
+
+  it('maps an SMS CommDefinition (inverse of the SMS forward transform) into stepData', () => {
+    const commDefinition = {
+      id: 'cd_1',
+      referenceId: 'ref_1',
+      status: 'DRAFT',
+      singleChannelStrategy: {
+        variant: {
+          channel: 'SMS',
+          smsMessageContent: { message: 'Hello {{first_name}}', channel: 'SMS' },
+          smsDeliverySettings: { channelSettings: { senderId: 'ABC' } },
+        },
+      },
+    };
+
+    const result = mapCommDefinitionToStepData(commDefinition);
+
+    expect(result).toMatchObject({
+      messageType: 'transactional',
+      communicationStrategy: 'SINGLE_TEMPLATE',
+      channel: 'SMS',
+      contentItems: [
+        {
+          contentId: 'cd_1',
+          channel: 'SMS',
+          templateData: { messageBody: 'Hello {{first_name}}', channel: 'SMS' },
+        },
+      ],
+      deliverySetting: { channelSetting: { SMS: { senderId: 'ABC' } } },
+      ccsCommDefinition: {
+        id: 'cd_1',
+        referenceId: 'ref_1',
+        status: 'DRAFT',
+      },
+    });
+  });
+
+  it('maps a mobile push (PUSH) CommDefinition back to the MOBILEPUSH UI channel via CCS_CHANNEL_NAME_MAP', () => {
+    const commDefinition = {
+      id: 'cd_2',
+      singleChannelStrategy: {
+        variant: {
+          channel: 'PUSH',
+          mpushMessageContent: {
+            channel: 'PUSH',
+            androidContent: { title: 'Hi', message: 'There' },
+          },
+        },
+      },
+    };
+
+    const result = mapCommDefinitionToStepData(commDefinition);
+
+    expect(result.channel).toBe('MOBILEPUSH');
+    expect(result.contentItems[0].channel).toBe('MOBILEPUSH');
+    // channel is stamped last so it always reads MOBILEPUSH, not the raw CCS "PUSH".
+    expect(result.contentItems[0].templateData.channel).toBe('MOBILEPUSH');
+    expect(result.contentItems[0].templateData.androidContent).toEqual({ title: 'Hi', message: 'There' });
+  });
+
+  it('maps an EMAIL CommDefinition using the dedicated reverse transform', () => {
+    const commDefinition = {
+      id: 'cd_3',
+      singleChannelStrategy: {
+        variant: {
+          channel: 'EMAIL',
+          emailMessageContent: { messageSubject: 'Subject', messageBody: '<p>Body</p>' },
+        },
+      },
+    };
+
+    const result = mapCommDefinitionToStepData(commDefinition);
+
+    expect(result.contentItems[0].templateData).toEqual({
+      emailSubject: 'Subject',
+      emailBody: '<p>Body</p>',
+      channel: 'EMAIL',
+    });
+  });
+
+  it('reads the variant from commDefinition.version when top-level singleChannelStrategy is absent', () => {
+    const commDefinition = {
+      id: 'cd_4',
+      version: {
+        version: 2,
+        status: 'DRAFT',
+        singleChannelStrategy: {
+          variant: {
+            channel: 'SMS',
+            smsMessageContent: { message: 'From version' },
+          },
+        },
+      },
+    };
+
+    const result = mapCommDefinitionToStepData(commDefinition);
+
+    expect(result.contentItems[0].templateData.messageBody).toBe('From version');
+    expect(result.ccsCommDefinition.version).toBe(2);
+    expect(result.ccsCommDefinition.status).toBe('DRAFT');
+  });
+
+  it('falls back to getLatestVersionFromAuditInfos when version.version is absent', () => {
+    const commDefinition = {
+      id: 'cd_5',
+      auditInfos: [{ action: 'SUBMITTED' }, { action: 'SUBMITTED' }],
+      singleChannelStrategy: {
+        variant: { channel: 'SMS', smsMessageContent: { message: 'Hi' } },
+      },
+    };
+
+    const result = mapCommDefinitionToStepData(commDefinition);
+
+    expect(result.ccsCommDefinition.version).toBe(1);
+  });
+
+  it('maps additionalSettings into dynamicControls', () => {
+    const commDefinition = {
+      id: 'cd_6',
+      version: {
+        settings: {
+          additionalSettings: {
+            useTinyUrl: true,
+            encryptUrl: true,
+            linkTrackingEnabled: true,
+            userSubscriptionDisabled: true,
+          },
+        },
+      },
+      singleChannelStrategy: {
+        variant: { channel: 'SMS', smsMessageContent: { message: 'Hi' } },
+      },
+    };
+
+    const result = mapCommDefinitionToStepData(commDefinition);
+
+    expect(result.dynamicControls).toEqual({
+      useTinyUrl: true,
+      sendToControlCustomers: true,
+      overrideDailyLimit: true,
+      sendToBrandPocs: true,
+    });
+  });
+
+  it('passes through content for a channel with no dedicated reverse transform (e.g. RCS)', () => {
+    const commDefinition = {
+      id: 'cd_7',
+      singleChannelStrategy: {
+        variant: {
+          channel: 'RCS',
+          rcsMessageContent: {
+            channel: 'RCS',
+            accountId: 123,
+            rcsRichCardContent: { cardContent: [{ title: 'Card' }] },
+          },
+        },
+      },
+    };
+
+    const result = mapCommDefinitionToStepData(commDefinition);
+
+    expect(result.contentItems[0].templateData).toEqual({
+      accountId: 123,
+      rcsRichCardContent: { cardContent: [{ title: 'Card' }] },
+      channel: 'RCS',
+    });
+  });
+});
+
+describe('fetchAndMapCommDefinition', () => {
+  it('returns null when getCommDefinition resolves with no data', async () => {
+    const getCommDefinitionMock = jest.fn().mockResolvedValue({ response: {} });
+    const getCommDefinitionVersionMock = jest.fn();
+
+    const result = await fetchAndMapCommDefinition('cd_1', {
+      getCommDefinition: getCommDefinitionMock,
+      getCommDefinitionVersion: getCommDefinitionVersionMock,
+    });
+
+    expect(result).toBeNull();
+    expect(getCommDefinitionMock).toHaveBeenCalledWith('cd_1', 'versions');
+    expect(getCommDefinitionVersionMock).not.toHaveBeenCalled();
+  });
+
+  it('fetches metadata + latest version, merges them, and maps the result', async () => {
+    const getCommDefinitionMock = jest.fn().mockResolvedValue({
+      response: {
+        data: {
+          id: 'cd_1',
+          referenceId: 'ref_1',
+          status: 'DRAFT',
+          auditInfos: [],
+          currentVersion: 0,
+        },
+      },
+    });
+    const getCommDefinitionVersionMock = jest.fn().mockResolvedValue({
+      response: {
+        data: {
+          singleChannelStrategy: {
+            variant: { channel: 'SMS', smsMessageContent: { message: 'Hello' } },
+          },
+        },
+      },
+    });
+
+    const result = await fetchAndMapCommDefinition('cd_1', {
+      getCommDefinition: getCommDefinitionMock,
+      getCommDefinitionVersion: getCommDefinitionVersionMock,
+    });
+
+    expect(getCommDefinitionVersionMock).toHaveBeenCalledWith('cd_1', 0);
+    expect(result.contentItems[0].templateData.messageBody).toBe('Hello');
+    expect(result.ccsCommDefinition.id).toBe('cd_1');
+  });
+
+  it('swallows a version-fetch failure and still returns metadata-only mapping (null, since there is no content)', async () => {
+    const getCommDefinitionMock = jest.fn().mockResolvedValue({
+      response: { data: { id: 'cd_1', auditInfos: [] } },
+    });
+    const getCommDefinitionVersionMock = jest.fn().mockRejectedValue(new Error('network error'));
+
+    const result = await fetchAndMapCommDefinition('cd_1', {
+      getCommDefinition: getCommDefinitionMock,
+      getCommDefinitionVersion: getCommDefinitionVersionMock,
+    });
+
+    // No content ever arrived (version fetch failed), so there's nothing mappable.
+    expect(result).toBeNull();
+  });
+});

package/v2Containers/CommunicationFlow/utils/mapCommDefinitionToStepData.js

@@ -0,0 +1,155 @@
+/**
+ * Reverse-maps a CCS CommDefinition back into CommunicationFlow's own `stepData` shape.
+ *
+ * This is the general-purpose counterpart of cap-campaigns-v2's own
+ * mapCommDefinitionToCommunicationFlowData (app/containers/CapNotifySettings/utils.js) — that
+ * version is CapNotify/Alert-specific and lives in the consumer app. Other consumers of
+ * CommunicationFlow ("Pluggable Modules") only store a commDefinitionId, with no local content
+ * copy, so CommunicationFlow needs to be able to fetch + reverse-map a CommDefinition itself
+ * (see fetchAndMapCommDefinition below, wired into CommunicationFlow.js via
+ * config.context.existingCommDefinitionId).
+ */
+import {
+  CCS_CHANNEL_CONTENT_KEY_MAP,
+  CCS_CHANNEL_DELIVERY_KEY_MAP,
+  CCS_CHANNEL_NAME_MAP,
+} from '../constants';
+
+// Reverse of CCS_CHANNEL_NAME_MAP (UI channel -> CCS channel); only PUSH -> MOBILEPUSH differs today.
+const CCS_TO_UI_CHANNEL_MAP = Object.entries(CCS_CHANNEL_NAME_MAP).reduce(
+  (acc, [uiChannel, ccsChannel]) => ({ ...acc, [ccsChannel]: uiChannel }),
+  {},
+);
+const reverseUiChannel = (ccsChannel) => CCS_TO_UI_CHANNEL_MAP[ccsChannel] || ccsChannel;
+
+// Inverse of CCS_CONTENT_TRANSFORMS (./constants.js) — only channels with a dedicated forward
+// transform there need one here; every other channel's CCS content already matches the legacy
+// editor's templateData shape and is passed through unchanged (see the default branch below).
+const CCS_CONTENT_REVERSE_TRANSFORMS = {
+  EMAIL: (payload = {}) => ({
+    emailSubject: payload.messageSubject,
+    emailBody: payload.messageBody,
+  }),
+  SMS: (payload = {}) => ({
+    messageBody: payload.message || '',
+  }),
+  WEBPUSH: (payload = {}) => ({
+    messageContent: {
+      content: {
+        messageSubject: payload.messageSubject,
+        accountId: payload.accountId,
+        content: payload.content,
+      },
+    },
+  }),
+};
+
+const getCommDefinitionVariant = (commDefinition = {}) => (
+  commDefinition.singleChannelStrategy?.variant
+  || commDefinition.version?.singleChannelStrategy?.variant
+  || null
+);
+
+// Counts SUBMITTED audit entries to derive the latest version number when the CommDefinition
+// itself doesn't carry an explicit current version (mirrors cap-campaigns-v2's own helper).
+export const getLatestVersionFromAuditInfos = (commDefinition = {}) => {
+  const submittedCount = (commDefinition.auditInfos || []).filter(
+    (entry) => entry?.action === 'SUBMITTED',
+  ).length;
+  if (submittedCount === 0) return commDefinition.currentVersion ?? 0;
+  return submittedCount - 1;
+};
+
+// Reverse of CommunicationFlow's own additionalSettings mapping (see CommunicationFlow.js's
+// handleSave) — used to pre-populate the Advanced Controls step when editing existing content.
+const mapAdditionalSettingsToDynamicControls = (additionalSettings = {}) => ({
+  useTinyUrl: additionalSettings.useTinyUrl ?? false,
+  sendToControlCustomers: additionalSettings.encryptUrl ?? false,
+  overrideDailyLimit: additionalSettings.linkTrackingEnabled ?? false,
+  sendToBrandPocs: additionalSettings.userSubscriptionDisabled ?? false,
+});
+
+/**
+ * Maps a CCS CommDefinition (metadata + version content merged onto it — see
+ * fetchAndMapCommDefinition) into the subset of `stepData` CommunicationFlow needs to re-open
+ * its "Add content" editor with existing content, instead of starting empty. Returns null when
+ * there's no mappable channel/content (e.g. the version fetch failed or came back empty).
+ */
+export const mapCommDefinitionToStepData = (commDefinition = {}) => {
+  const variant = getCommDefinitionVariant(commDefinition);
+  const ccsChannel = variant?.channel;
+  if (!variant || !ccsChannel) return null;
+
+  const contentKey = CCS_CHANNEL_CONTENT_KEY_MAP[ccsChannel];
+  const rawContent = contentKey ? variant[contentKey] : null;
+  if (!rawContent) return null;
+
+  const uiChannel = reverseUiChannel(ccsChannel);
+  const reverseTransform = CCS_CONTENT_REVERSE_TRANSFORMS[ccsChannel];
+  // Spread channel after content: CCS content may carry its own raw `channel` ("PUSH"), which
+  // would otherwise overwrite `uiChannel` ("MOBILEPUSH") and break template rendering.
+  const templateData = reverseTransform
+    ? { ...reverseTransform(rawContent), channel: uiChannel }
+    : { ...rawContent, channel: uiChannel };
+
+  const deliveryKey = CCS_CHANNEL_DELIVERY_KEY_MAP[ccsChannel];
+  const channelSettings = deliveryKey ? variant[deliveryKey]?.channelSettings : undefined;
+
+  const version = commDefinition.version || {};
+
+  return {
+    // CCS create/edit only supports the SINGLE strategy today (see CommunicationFlow.js's
+    // handleSave, which skips CHANNEL_PRIORITY/AB_TEST) — a fetched CommDefinition is always one.
+    messageType: 'transactional',
+    communicationStrategy: 'SINGLE_TEMPLATE',
+    channel: uiChannel,
+    channels: [],
+    // contentId must be truthy — ChannelSelectionStep matches contentItems by it to resolve
+    // editingContentId; a falsy id collapses the reopen back to an empty template picker.
+    contentItems: [
+      { contentId: commDefinition.id, channel: uiChannel, templateData },
+    ],
+    deliverySetting: channelSettings
+      ? { channelSetting: { [uiChannel]: channelSettings } }
+      : undefined,
+    dynamicControls: mapAdditionalSettingsToDynamicControls(
+      version.settings?.additionalSettings || commDefinition.settings?.additionalSettings,
+    ),
+    ccsCommDefinition: {
+      id: commDefinition.id,
+      referenceId: commDefinition.referenceId,
+      version: version.version ?? getLatestVersionFromAuditInfos(commDefinition),
+      status: version.status ?? commDefinition.status,
+    },
+  };
+};
+
+/**
+ * Fetches a CommDefinition's metadata + latest version content (same two calls, same merge, as
+ * cap-campaigns-v2's getCapNotifyAlertById saga) and reverse-maps the result via
+ * mapCommDefinitionToStepData. Returns null if the CommDefinition can't be found; content-fetch
+ * failures are swallowed (matching the saga) so the caller still gets back whatever metadata it
+ * could — the "Add content" editor just won't have pre-filled content in that case.
+ *
+ * @param {string} commDefinitionId
+ * @param {{ getCommDefinition: Function, getCommDefinitionVersion: Function }} api - the two
+ *   service functions (app/services/api.js), injected so this stays testable without mocking fetch.
+ */
+export const fetchAndMapCommDefinition = async (commDefinitionId, { getCommDefinition, getCommDefinitionVersion }) => {
+  const response = await getCommDefinition(commDefinitionId, 'versions');
+  const commDefinition = response?.response?.data;
+  if (!commDefinition) return null;
+
+  const latestVersion = getLatestVersionFromAuditInfos(commDefinition);
+  try {
+    const versionResponse = await getCommDefinitionVersion(commDefinitionId, latestVersion);
+    const versionData = versionResponse?.response?.data;
+    if (versionData) {
+      commDefinition.version = { ...commDefinition.version, ...versionData };
+    }
+  } catch (versionError) {
+    // swallow — content just won't be available; caller still gets the CommDefinition's metadata.
+  }
+
+  return mapCommDefinitionToStepData(commDefinition);
+};

package/v2Containers/MobilePush/Edit/test/contentValidity.test.js

@@ -79,7 +79,7 @@ describe('MobilePush/Edit — onContentValidityChange reporting', () => {
     );
   });
 
-  it('treats content as empty when the iOS tab (tabCount 2) is cleared even if Android has content', () => {
+  it('treats content as present when the iOS tab (tabCount 2) is cleared but Android has content (single-device template allowed)', () => {
     const onContentValidityChange = jest.fn();
     const wrapper = shallow(<Edit {...baseProps()} onContentValidityChange={onContentValidityChange} />);
     wrapper.setState({
@@ -90,6 +90,22 @@ describe('MobilePush/Edit — onContentValidityChange reporting', () => {
       tabCount: 2,
     });
 
+    expect(onContentValidityChange).toHaveBeenCalledWith(
+      expect.objectContaining({ isContentEmpty: false }),
+    );
+  });
+
+  it('treats content as empty when both Android and iOS tabs (tabCount 2) are cleared', () => {
+    const onContentValidityChange = jest.fn();
+    const wrapper = shallow(<Edit {...baseProps()} onContentValidityChange={onContentValidityChange} />);
+    wrapper.setState({
+      formData: {
+        0: { 'message-title': '', 'message-editor': '' },
+        1: { 'message-title2': '', 'message-editor2': '' },
+      },
+      tabCount: 2,
+    });
+
     expect(onContentValidityChange).toHaveBeenCalledWith(
       expect.objectContaining({ isContentEmpty: true }),
     );

package/v2Containers/MobilePush/commonMethods.js

@@ -309,24 +309,23 @@ function getMobilePushTabContent(tabIndex, tabData) {
  * Live "is content empty" check for the legacy Mobile Push Edit/Create forms — the
  * Mobile Push analogue of Sms's `getSmsEmbeddedFooterValidity` (see
  * app/v2Containers/Sms/smsFormDataHelpers.js). Checks every active tab (Android, and
- * iOS when tabCount > 1); if any active tab's title+message are both empty, the
- * overall content is considered empty so Done/Preview-and-test can be disabled.
+ * iOS when tabCount > 1); Mobile Push allows saving with just one active platform
+ * filled in, so the overall content is empty only when EVERY active tab's
+ * title+message are both empty.
  * @param {object} formData FormBuilder state (same shape as this.state.formData)
  * @param {number} [tabCount] Total number of active tabs (1 = Android only, 2 = Android + iOS)
  * @returns {{ isContentEmpty: boolean }}
  */
 function getMobilePushEmbeddedContentValidity(formData, tabCount) {
   const count = tabCount != null && tabCount > 1 ? tabCount : 1;
-  let isContentEmpty = false;
   for (let i = 0; i < count; i++) {
     const content = getMobilePushTabContent(i, formData?.[i]);
     const trimmed = content != null && content !== '' ? String(content).trim() : '';
-    if (!trimmed) {
-      isContentEmpty = true;
-      break;
+    if (trimmed) {
+      return { isContentEmpty: false };
     }
   }
-  return { isContentEmpty };
+  return { isContentEmpty: true };
 }
 
 export {

package/v2Containers/MobilePushNew/index.js

@@ -1758,9 +1758,14 @@ export const MobilePushNew = ({
     onPersonalizationTokensChange,
   ]);
 
-  // Validation logic for template creation/update
+  // Validation logic for template creation/update.
   const isAndroidFieldsMissing = isPlatformFieldsMissing(isAndroidSupported, androidContent);
   const isIosFieldsMissing = isPlatformFieldsMissing(isIosSupported, iosContent);
+  const isMobilePushContentMissing = (
+    (isAndroidSupported || isIosSupported)
+    && (!isAndroidSupported || isAndroidFieldsMissing)
+    && (!isIosSupported || isIosFieldsMissing)
+  );
 
   // Ref to dedupe reporting of content emptiness to the parent, so we only
   // call onContentValidityChange when the computed value actually changes.
@@ -1770,19 +1775,10 @@ export const MobilePushNew = ({
   // supported platforms) changes, mirroring the Save-button gating logic.
   useEffect(() => {
     if (typeof onContentValidityChange !== 'function') return;
-    const isContentEmpty = isAndroidFieldsMissing || isIosFieldsMissing;
-    if (lastReportedIsContentEmptyRef.current === isContentEmpty) return;
-    lastReportedIsContentEmptyRef.current = isContentEmpty;
-    onContentValidityChange({ isContentEmpty });
-  }, [
-    androidContent,
-    iosContent,
-    isAndroidSupported,
-    isIosSupported,
-    isAndroidFieldsMissing,
-    isIosFieldsMissing,
-    onContentValidityChange,
-  ]);
+    if (lastReportedIsContentEmptyRef.current === isMobilePushContentMissing) return;
+    lastReportedIsContentEmptyRef.current = isMobilePushContentMissing;
+    onContentValidityChange({ isContentEmpty: isMobilePushContentMissing });
+  }, [isMobilePushContentMissing, onContentValidityChange]);
 
   // Add changeSourceRef for debounced sync
   const changeSourceRef = useRef(null);
@@ -2201,28 +2197,24 @@ export const MobilePushNew = ({
   const errorInTitle = activeTab === ANDROID ? androidTitleError : iosTitleError;
   const errorInMessage = activeTab === ANDROID ? androidMessageError : iosMessageError;
 
-  // Save button disabled logic: only check enabled platforms
+  // Save button disabled logic: only check enabled platforms, and allow
+  // saving with just one supported platform filled in (see isMobilePushContentMissing).
   const isSaveDisabled = (
-    (isAndroidSupported && (!androidContent?.title?.trim() || !androidContent?.message?.trim()))
-    || (isIosSupported && (!iosContent?.title?.trim() || !iosContent?.message?.trim()))
+    isMobilePushContentMissing
     || templateNameError
     || Object.values(carouselLinkErrors).some((error) => error !== null && error !== "")
     || !isCarouselDataValid()
     || errorInTitle || errorInMessage
   );
 
-  // Validation in handleSave: only show errors for enabled platforms
+  // Validation in handleSave: only enforce content on enabled platforms, and
+  // allow saving with just one supported platform filled in.
   const handleSave = useCallback(() => {
-    if (isAndroidSupported && (!androidContent?.title?.trim() || !androidContent?.message?.trim())) {
+    if (isMobilePushContentMissing) {
       CapNotification.error({
-        message: formatMessage(messages.androidValidationError),
-      });
-      if (onValidationFail) onValidationFail();
-      return;
-    }
-    if (isIosSupported && (!iosContent?.title?.trim() || !iosContent?.message?.trim())) {
-      CapNotification.error({
-        message: formatMessage(messages.iosValidationError),
+        message: formatMessage(
+          isAndroidSupported ? messages.androidValidationError : messages.iosValidationError,
+        ),
       });
       if (onValidationFail) onValidationFail();
       return;
@@ -2583,8 +2575,7 @@ export const MobilePushNew = ({
     createTimeoutRef,
     isAndroidSupported,
     isIosSupported,
-    isAndroidFieldsMissing,
-    isIosFieldsMissing,
+    isMobilePushContentMissing,
     isCarouselDataValid,
     isFullMode,
     templateId,

package/v2Containers/MobilePushNew/tests/utils.test.js

@@ -459,12 +459,21 @@ describe("utils.js", () => {
       })).toBe(true);
     });
 
-    it("returns true when both platforms are supported and one is missing fields", () => {
+    it("returns false when both platforms are supported and only one has valid fields (single-device template allowed)", () => {
       expect(computeIsContentEmpty({
         isAndroidSupported: true,
         isIosSupported: true,
         androidContent: { title: "t", message: "m" },
         iosContent: { title: "", message: "" },
+      })).toBe(false);
+    });
+
+    it("returns true when both platforms are supported and both are missing fields", () => {
+      expect(computeIsContentEmpty({
+        isAndroidSupported: true,
+        isIosSupported: true,
+        androidContent: { title: "", message: "" },
+        iosContent: { title: "", message: "" },
       })).toBe(true);
     });
 

package/v2Containers/MobilePushNew/utils.js

@@ -97,8 +97,10 @@ export const isPlatformFieldsMissing = (isSupported, content) => (
 
 /**
  * Compute whether the Mobile Push content is empty/invalid for reporting to
- * a parent component (e.g. via onContentValidityChange). Content is
- * considered empty when any supported platform is missing required fields.
+ * a parent component (e.g. via onContentValidityChange). Mobile Push allows
+ * saving a template with just one supported platform filled in, so content
+ * is only considered empty when EVERY supported platform is missing its
+ * required fields.
  * @param {Object} params
  * @param {boolean} params.isAndroidSupported
  * @param {boolean} params.isIosSupported
@@ -111,7 +113,9 @@ export const computeIsContentEmpty = ({
   isIosSupported,
   androidContent,
   iosContent,
-}) => (
-  isPlatformFieldsMissing(isAndroidSupported, androidContent)
-  || isPlatformFieldsMissing(isIosSupported, iosContent)
-);
+}) => {
+  if (!isAndroidSupported && !isIosSupported) return false;
+  const isAndroidMissing = isPlatformFieldsMissing(isAndroidSupported, androidContent);
+  const isIosMissing = isPlatformFieldsMissing(isIosSupported, iosContent);
+  return (!isAndroidSupported || isAndroidMissing) && (!isIosSupported || isIosMissing);
+};