@capillarytech/creatives-library 9.0.59-alpha.1 → 9.0.59

package/package.json

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

package/services/api.js

@@ -722,9 +722,7 @@ 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.
+// CommunicationFlow fetch-by-id path — lets consumers with only a commDefinitionId load metadata and content on edit.
 export const getCommDefinition = (commDefinitionId, include) => {
   const query = include ? `?include=${encodeURIComponent(include)}` : '';
   const url = `${COMM_DEFINITIONS_PATH}/${commDefinitionId}${query}`;

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -79,11 +79,7 @@ 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.
+  // Other consumers may provide only commDefinitionId and rely on CommunicationFlow to fetch content; capture this decision once at mount.
   const [shouldFetchCommDefinition] = useState(
     () => !!config?.context?.existingCommDefinitionId && !initialData?.contentItems?.length,
   );
@@ -93,9 +89,7 @@ const CommunicationFlow = ({
   const [stepData, setStepData] = useState(() => {
     const defaultMessageType = messageTypeData.defaultOption?.value || MESSAGE_TYPES_OPTIONS?.[1]?.value || null;
     return {
-      // 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.
+      // Pre-set CCS's only supported strategy so Channel Selection mounts and shows its loading state while the fetch is in flight.
       messageType: initialData?.messageType || (shouldFetchCommDefinition ? 'transactional' : defaultMessageType),
       communicationStrategy: initialData?.communicationStrategy || (shouldFetchCommDefinition ? SINGLE_TEMPLATE : null),
       channel: initialData?.channel || config.channel || null,

package/v2Containers/CommunicationFlow/CommunicationFlowCard.js

@@ -20,12 +20,15 @@ import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CommunicationFlow from './index';
 import { CHANNELS, DEFAULT_COMMUNICATION_STRATEGY_OPTIONS, DYNAMIC_CONTROLS_CONFIG } from './constants';
 import {
   VIBER, SMS, EMAIL, WHATSAPP, RCS, ZALO,
 } from '../CreativesContainer/constants';
 import getContentBody from './utils/getContentBody';
+import { getCommDefinition, getCommDefinitionVersion } from '../../services/api';
+import { fetchAndMapCommDefinition } from './utils/mapCommDefinitionToStepData';
 import messages from './messages';
 import addCreativesIllustration from '../Assets/images/addCreativesIllustration.svg';
 import './CommunicationFlow.scss';
@@ -90,6 +93,33 @@ const CommunicationFlowCard = ({
     }
   }, [initialData]);
 
+  // Other consumers may provide only commDefinitionId; fetch it here so the summary card shows configured content immediately instead of "Add creatives".
+  const [isFetchingCommDefinition, setIsFetchingCommDefinition] = useState(
+    () => !!config?.context?.existingCommDefinitionId && !initialData?.contentItems?.length,
+  );
+
+  useEffect(() => {
+    const existingCommDefinitionId = config?.context?.existingCommDefinitionId;
+    if (!existingCommDefinitionId || initialData?.contentItems?.length) return undefined;
+    let cancelled = false;
+    (async () => {
+      try {
+        const mapped = await fetchAndMapCommDefinition(existingCommDefinitionId, {
+          getCommDefinition,
+          getCommDefinitionVersion,
+        });
+        if (!cancelled && mapped) {
+          setSavedData((prevSavedData) => ({ ...prevSavedData, ...mapped }));
+        }
+      } catch (error) {
+        console.error('[CommunicationFlowCard] fetchAndMapCommDefinition error:', error);
+      } finally {
+        if (!cancelled) setIsFetchingCommDefinition(false);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, []);
+
   const handleSave = useCallback((data) => {
     setSavedData(data);
     setShowSlideBox(false);
@@ -199,7 +229,16 @@ const CommunicationFlowCard = ({
 
   return (
     <>
-      {!firstItem ? (
+      {isFetchingCommDefinition ? (
+        <CapCard
+          className="communication-flow-card-loading"
+          bodyStyle={{ padding: 0, height: 152 }}
+        >
+          <CapRow type="flex" justify="center" align="middle" className="loading-card-body-row">
+            <CapSpin spinning />
+          </CapRow>
+        </CapCard>
+      ) : !firstItem ? (
         <CapCard
           className="communication-flow-card-empty"
           bodyStyle={{ padding: 0, height: 152 }}

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

@@ -3,6 +3,12 @@ import React from 'react';
 jest.mock('../../../services/api', () => ({
   createCommDefinition: jest.fn(),
   editCommDefinition: jest.fn(),
+  getCommDefinition: jest.fn(),
+  getCommDefinitionVersion: jest.fn(),
+}));
+
+jest.mock('../utils/mapCommDefinitionToStepData', () => ({
+  fetchAndMapCommDefinition: jest.fn(),
 }));
 
 jest.mock('@capillarytech/cap-ui-library/CapNotification', () => ({
@@ -47,6 +53,7 @@ import { initialReducer } from '../../../initialReducer';
 import CommunicationFlow from '../CommunicationFlow';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import { createCommDefinition, editCommDefinition } from '../../../services/api';
+import { fetchAndMapCommDefinition } from '../utils/mapCommDefinitionToStepData';
 import { getEnabledSteps } from '../utils/getEnabledSteps';
 import {
   CHANNELS,
@@ -921,6 +928,82 @@ describe('handleSave — CCS flow', () => {
   });
 });
 
+describe('CommunicationFlow — fetch-by-id (config.context.existingCommDefinitionId, no local content)', () => {
+  const ccsConfig = { ...baseConfig, context: { name: 'Order Placed Notification' }, features: {} };
+  const configWithId = {
+    ...ccsConfig,
+    context: { ...ccsConfig.context, existingCommDefinitionId: 'cd_fetch_1' },
+  };
+
+  beforeEach(() => {
+    fetchAndMapCommDefinition.mockReset();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('fetches and merges the mapped data into stepData when only a commDefinitionId is supplied', async () => {
+    fetchAndMapCommDefinition.mockResolvedValue({
+      channel: 'SMS',
+      contentItems: [{ contentId: 'cd_fetch_1', channel: 'SMS', templateData: { messageBody: 'Hi' } }],
+      ccsCommDefinition: { id: 'cd_fetch_1', referenceId: 'ref_1', version: 1, status: 'DRAFT' },
+    });
+    const onChange = jest.fn();
+    renderWithFlow({ features: {}, config: configWithId, initialData: null, onChange });
+
+    await waitFor(() => expect(fetchAndMapCommDefinition).toHaveBeenCalledWith(
+      'cd_fetch_1',
+      expect.objectContaining({
+        getCommDefinition: expect.any(Function),
+        getCommDefinitionVersion: expect.any(Function),
+      }),
+    ));
+
+    await waitFor(() => {
+      const payload = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+      expect(payload.contentItems).toEqual([
+        { contentId: 'cd_fetch_1', channel: 'SMS', templateData: { messageBody: 'Hi' } },
+      ]);
+    });
+  });
+
+  it('does not crash and leaves stepData unchanged when the fetch resolves with nothing mappable', async () => {
+    fetchAndMapCommDefinition.mockResolvedValue(null);
+    const onChange = jest.fn();
+    renderWithFlow({ features: {}, config: configWithId, initialData: null, onChange });
+
+    await waitFor(() => expect(fetchAndMapCommDefinition).toHaveBeenCalledTimes(1));
+    const payload = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+    expect(payload.contentItems).toEqual([]);
+  });
+
+  it('does not crash when the fetch rejects', async () => {
+    fetchAndMapCommDefinition.mockRejectedValue(new Error('network error'));
+    renderWithFlow({ features: {}, config: configWithId, initialData: null });
+
+    await waitFor(() => expect(fetchAndMapCommDefinition).toHaveBeenCalledTimes(1));
+  });
+
+  it('does not fetch when initialData already has contentItems (e.g. CapNotify, which always pre-fetches itself)', async () => {
+    renderWithFlow({
+      features: {},
+      config: configWithId,
+      initialData: { contentItems: [{ channel: 'SMS', templateData: {} }] },
+    });
+
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(fetchAndMapCommDefinition).not.toHaveBeenCalled();
+  });
+
+  it('does not fetch when config.context.existingCommDefinitionId is absent', async () => {
+    renderWithFlow({ features: {}, config: ccsConfig, initialData: null });
+
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(fetchAndMapCommDefinition).not.toHaveBeenCalled();
+  });
+});
+
 describe('renderSteps — null returns and edge cases', () => {
   it('returns null for CHANNEL_SELECTION when communicationStrategy is null', () => {
     renderWithFlow({

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

@@ -38,14 +38,25 @@ jest.mock('@capillarytech/cap-ui-library/CapIcon', () => function MockCapIcon({
 
 jest.mock('../utils/getContentBody', () => jest.fn());
 
-import { render, screen, fireEvent } from '@testing-library/react';
+jest.mock('../../../services/api', () => ({
+  getCommDefinition: jest.fn(),
+  getCommDefinitionVersion: jest.fn(),
+}));
+
+jest.mock('../utils/mapCommDefinitionToStepData', () => ({
+  fetchAndMapCommDefinition: jest.fn(),
+}));
+
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { IntlProvider } from 'react-intl';
 import CommunicationFlowCard from '../CommunicationFlowCard';
 import getContentBody from '../utils/getContentBody';
+import { fetchAndMapCommDefinition } from '../utils/mapCommDefinitionToStepData';
 
 beforeEach(() => {
   getContentBody.mockReturnValue(<span data-testid="content-body">Content</span>);
+  fetchAndMapCommDefinition.mockReset();
 });
 
 const baseConfig = {
@@ -711,3 +722,52 @@ describe('CommunicationFlowCard', () => {
     });
   });
 });
+
+describe('CommunicationFlowCard — fetch-by-id (config.context.existingCommDefinitionId)', () => {
+  const configWithId = {
+    ...baseConfig,
+    context: { existingCommDefinitionId: 'cd_1' },
+  };
+
+  it('shows a loading state (not the empty "Add creatives" state) while fetching', () => {
+    fetchAndMapCommDefinition.mockReturnValue(new Promise(() => {})); // never resolves
+    renderCard({ config: configWithId, initialData: null });
+    expect(screen.queryByText('Add creatives')).not.toBeInTheDocument();
+    expect(screen.queryByText('Message:')).not.toBeInTheDocument();
+  });
+
+  it('shows the configured summary card once the fetch resolves, without opening the slidebox', async () => {
+    fetchAndMapCommDefinition.mockResolvedValue(makeSavedData());
+    renderCard({ config: configWithId, initialData: null });
+
+    await waitFor(() => expect(screen.getByText('Message:')).toBeInTheDocument());
+    expect(screen.queryByText('Add creatives')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('slide-box')).not.toBeInTheDocument();
+  });
+
+  it('falls back to the empty "Add creatives" state when the fetch resolves with nothing mappable', async () => {
+    fetchAndMapCommDefinition.mockResolvedValue(null);
+    renderCard({ config: configWithId, initialData: null });
+
+    await waitFor(() => expect(screen.getByText('Add creatives')).toBeInTheDocument());
+  });
+
+  it('falls back to the empty "Add creatives" state when the fetch rejects', async () => {
+    fetchAndMapCommDefinition.mockRejectedValue(new Error('network error'));
+    renderCard({ config: configWithId, initialData: null });
+
+    await waitFor(() => expect(screen.getByText('Add creatives')).toBeInTheDocument());
+  });
+
+  it('does not fetch when initialData already has content (e.g. CapNotify, which always pre-fetches itself)', () => {
+    renderCard({ config: configWithId, initialData: makeSavedData() });
+    expect(fetchAndMapCommDefinition).not.toHaveBeenCalled();
+    expect(screen.getByText('Message:')).toBeInTheDocument();
+  });
+
+  it('does not fetch when config.context.existingCommDefinitionId is absent', () => {
+    renderCard({ config: baseConfig, initialData: null });
+    expect(fetchAndMapCommDefinition).not.toHaveBeenCalled();
+    expect(screen.getByText('Add creatives')).toBeInTheDocument();
+  });
+});

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

@@ -55,11 +55,7 @@ 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,
+  isContentLoading = false, // True while fetching existing CommDefinition content by id.
 }) => {
   const contentItems = value?.contentItems || [];
   const [showCreativesContainer, setShowCreativesContainer] = useState(false);

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

@@ -138,6 +138,34 @@ describe('ChannelSelectionStep', () => {
     expect(screen.queryByTestId('creatives-mock')).not.toBeInTheDocument();
   });
 
+  it('shows a loading spinner instead of the "Add creative" empty state while isContentLoading is true', () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{ contentItems: [] }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+        isContentLoading
+      />,
+    );
+
+    expect(screen.queryByRole('button', { name: /add creative/i })).not.toBeInTheDocument();
+    expect(document.querySelector('.content-loading')).toBeInTheDocument();
+  });
+
+  it('shows the empty "Add creative" state (not the loading spinner) once isContentLoading is false, even with no content', () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{ contentItems: [] }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+        isContentLoading={false}
+      />,
+    );
+
+    expect(screen.getByRole('button', { name: /add creative/i })).toBeInTheDocument();
+    expect(document.querySelector('.content-loading')).not.toBeInTheDocument();
+  });
+
   it('shows validation error when error prop is set', () => {
     renderStep(
       <ChannelSelectionStep

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

@@ -115,6 +115,35 @@ describe('mapCommDefinitionToStepData', () => {
     });
   });
 
+  it('maps a WEBPUSH CommDefinition using the dedicated reverse transform (nested messageContent.content shape)', () => {
+    const commDefinition = {
+      id: 'cd_webpush_1',
+      singleChannelStrategy: {
+        variant: {
+          channel: 'WEBPUSH',
+          webPushMessageContent: {
+            messageSubject: 'New offer',
+            accountId: 'acc_1',
+            content: { title: 'Title', body: 'Body text' },
+          },
+        },
+      },
+    };
+
+    const result = mapCommDefinitionToStepData(commDefinition);
+
+    expect(result.contentItems[0].templateData).toEqual({
+      messageContent: {
+        content: {
+          messageSubject: 'New offer',
+          accountId: 'acc_1',
+          content: { title: 'Title', body: 'Body text' },
+        },
+      },
+      channel: 'WEBPUSH',
+    });
+  });
+
   it('reads the variant from commDefinition.version when top-level singleChannelStrategy is absent', () => {
     const commDefinition = {
       id: 'cd_4',

package/v2Containers/CommunicationFlow/utils/mapCommDefinitionToStepData.js

@@ -22,9 +22,7 @@ const CCS_TO_UI_CHANNEL_MAP = Object.entries(CCS_CHANNEL_NAME_MAP).reduce(
 );
 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).
+// Inverse of CCS_CONTENT_TRANSFORMS — transforms CCS content back to the legacy editor's templateData shape.
 const CCS_CONTENT_REVERSE_TRANSFORMS = {
   EMAIL: (payload = {}) => ({
     emailSubject: payload.messageSubject,
@@ -50,8 +48,7 @@ const getCommDefinitionVariant = (commDefinition = {}) => (
   || 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).
+// Counts SUBMITTED audit entries to derive the latest version when CommDefinition has no explicit current version.
 export const getLatestVersionFromAuditInfos = (commDefinition = {}) => {
   const submittedCount = (commDefinition.auditInfos || []).filter(
     (entry) => entry?.action === 'SUBMITTED',
@@ -60,8 +57,7 @@ export const getLatestVersionFromAuditInfos = (commDefinition = {}) => {
   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.
+// Reverse-maps CommunicationFlow's additionalSettings to pre-populate Advanced Controls when editing.
 const mapAdditionalSettingsToDynamicControls = (additionalSettings = {}) => ({
   useTinyUrl: additionalSettings.useTinyUrl ?? false,
   sendToControlCustomers: additionalSettings.encryptUrl ?? false,
@@ -86,8 +82,7 @@ export const mapCommDefinitionToStepData = (commDefinition = {}) => {
 
   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.
+  // Spread channel after content so CCS's raw `channel` ("PUSH") cannot overwrite `uiChannel` ("MOBILEPUSH").
   const templateData = reverseTransform
     ? { ...reverseTransform(rawContent), channel: uiChannel }
     : { ...rawContent, channel: uiChannel };
@@ -98,14 +93,12 @@ export const mapCommDefinitionToStepData = (commDefinition = {}) => {
   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.
+    // CCS create/edit currently supports only SINGLE strategy; fetched CommDefinitions are always single-strategy.
     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.
+    // contentId must be truthy so ChannelSelectionStep can resolve editingContentId instead of reopening the empty template picker.
     contentItems: [
       { contentId: commDefinition.id, channel: uiChannel, templateData },
     ],