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

package/package.json

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

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,40 @@ const CommunicationFlowCard = ({
     }
   }, [initialData]);
 
+  // A consumer other than CapNotify (which always pre-fetches and passes full initialData
+  // itself) may hand this card only a commDefinitionId — no local content copy at all — and
+  // rely on CommunicationFlowCard to fetch + show the configured summary itself, instead of
+  // the empty "Add creatives" state. Mirrors CommunicationFlow.js's own fetch-by-id path
+  // (config.context.existingCommDefinitionId); doing it here too means the SUMMARY CARD
+  // reflects fetched content immediately, without the user having to open the slidebox and
+  // click Save first — CommunicationFlow's own fetch would only ever reach this card's
+  // savedData via that save round-trip, since nothing here listens for its internal onChange.
+  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 +236,16 @@ const CommunicationFlowCard = ({
 
   return (
     <>
-      {!firstItem ? (
+      {isFetchingCommDefinition ? (
+        <CapCard
+          className="communication-flow-card-loading"
+          bodyStyle={{ padding: 0, height: 152 }}
+        >
+          <CapRow type="flex" justify="center" align="middle" style={{ height: '100%' }}>
+            <CapSpin spinning />
+          </CapRow>
+        </CapCard>
+      ) : !firstItem ? (
         <CapCard
           className="communication-flow-card-empty"
           bodyStyle={{ padding: 0, height: 152 }}

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();
+  });
+});