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

package/package.json

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

package/services/api.js

@@ -722,21 +722,6 @@ 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,8 +31,6 @@ import {
   getCmsAccounts,
   getMembersLookup,
   createTestCustomer,
-  getCommDefinition,
-  getCommDefinitionVersion,
 } from '../api';
 import { mockData } from './mockData';
 import getSchema from '../getSchema';
@@ -1245,56 +1243,3 @@ 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

@@ -20,7 +20,7 @@ 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, getCommDefinition, getCommDefinitionVersion } from '../../services/api';
+import { createCommDefinition, editCommDefinition } from '../../services/api';
 import DynamicControlsStep from './steps/DynamicControlsStep';
 import MessageTypeStep from './steps/MessageTypeStep';
 import CommunicationStrategyStep from './steps/CommunicationStrategyStep';
@@ -41,10 +41,8 @@ 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';
 
@@ -78,26 +76,12 @@ 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 {
-      // 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),
+      messageType: initialData?.messageType || defaultMessageType,
+      communicationStrategy: initialData?.communicationStrategy || null,
       channel: initialData?.channel || config.channel || null,
       channels: initialData?.channels || [],
       selectedOfferDetails: initialData?.selectedOfferDetails || [],
@@ -108,29 +92,6 @@ const CommunicationFlow = ({
   });
   const [validationErrors, setValidationErrors] = useState({});
 
-  // 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]);
 
@@ -386,7 +347,6 @@ const CommunicationFlow = ({
               deliverySettingsData={config.features?.deliverySettingsData}
               config={config}
               capData={cap || capData}
-              isContentLoading={isFetchingCommDefinition}
             />
             {stepData.contentItems?.length > 0 && <CapDivider />}
           </CapRow>

package/v2Containers/CommunicationFlow/CommunicationFlowCard.js

@@ -20,15 +20,12 @@ 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';
@@ -93,40 +90,6 @@ 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);
@@ -236,16 +199,7 @@ const CommunicationFlowCard = ({
 
   return (
     <>
-      {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 ? (
+      {!firstItem ? (
         <CapCard
           className="communication-flow-card-empty"
           bodyStyle={{ padding: 0, height: 152 }}

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

@@ -38,25 +38,14 @@ jest.mock('@capillarytech/cap-ui-library/CapIcon', () => function MockCapIcon({
 
 jest.mock('../utils/getContentBody', () => jest.fn());
 
-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 { render, screen, fireEvent } 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 = {
@@ -722,52 +711,3 @@ 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

@@ -16,7 +16,6 @@ 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';
@@ -55,11 +54,6 @@ 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);
@@ -439,11 +433,7 @@ const ChannelSelectionStep = ({
             </CapHeading>
           )}
 
-          {contentItems?.length === 0 && isContentLoading ? (
-            <CapRow type="flex" justify="center" align="middle" className="content-template-section content-loading">
-              <CapSpin spinning />
-            </CapRow>
-          ) : contentItems?.length === 0 ? (
+          {contentItems?.length === 0 ? (
             <CapRow className={`content-template-section ${contentItems?.length === 0 ? 'no-content-items' : ''}`}>
               <CapDropdown
                 overlay={renderChannelDropdownOverlay() || <CapMenu />}
@@ -592,7 +582,6 @@ ChannelSelectionStep.propTypes = {
   intl: PropTypes.object.isRequired,
   capData: PropTypes.object, // Cap data from Redux (user/org info)
   config: PropTypes.object,
-  isContentLoading: PropTypes.bool,
 };
 
 ChannelSelectionStep.defaultProps = {
@@ -608,7 +597,6 @@ ChannelSelectionStep.defaultProps = {
   incentivesData: null,
   capData: {},
   config: {},
-  isContentLoading: false,
 };
 
 export default injectIntl(ChannelSelectionStep);

package/v2Containers/TagList/index.js

@@ -110,9 +110,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     } = prevProps;
 
     if (
-      tags !== prevTags
-      || injectedTags !== prevInjectedTags
-      || selectedOfferDetails !== prevSelectedOfferDetails
+      !_.isEqual(tags, prevTags)
+      || !_.isEqual(injectedTags, prevInjectedTags)
+      || !_.isEqual(selectedOfferDetails, prevSelectedOfferDetails)
       || !_.isEqual(eventContextTags, prevEventContextTags)
       || !_.isEqual(waitEventContextTags, prevWaitEventContextTags)
     ) {

package/v2Containers/TagList/tests/TagList.test.js

@@ -134,6 +134,22 @@ describe("TagList test :  UNIT", () => {
     expect(() => unmount()).not.toThrow();
   });
 
+  it('does not regenerate tags when selectedOfferDetails gets a new [] reference with same content', () => {
+    const spy = jest.spyOn(TagList.prototype, 'populateTags');
+    const { rerender, Component, store } = initializeTagList({
+      selectedOfferDetails: [],
+      tags: TagListData.tags,
+    });
+    spy.mockClear();
+    rerender(
+      <Provider store={store}>
+        <Component {...buildProps({ selectedOfferDetails: [], tags: TagListData.tags })} />
+      </Provider>
+    );
+    expect(spy).not.toHaveBeenCalled();
+    spy.mockRestore();
+  });
+
   it('regenerates tags when props.tags change (componentDidUpdate)', () => {
     const { rerender, Component, store } = initializeTagList({ tags: TagListData.tags });
     const extra = [

package/v2Containers/Viber/constants.js

@@ -13,6 +13,12 @@ export const VIBER_IMG_SIZE = 10000000;
 export const VIBER_VIDEO_SIZE = 209715200;
 export const charLimit = 1000;
 
+/** Stable fallbacks for TagList props — inline `= []` / `|| {}` allocate new refs every render. */
+export const EMPTY_OFFER_DETAILS = [];
+export const EMPTY_INJECTED_TAGS = {};
+export const EMPTY_TAGS = [];
+export const EMPTY_TEMPLATE_DATA = {};
+
 export const UPLOAD_VIBER_ASSET_REQUEST = 'app/v2Containers/Viber/UPLOAD_ASSET_REQUEST';
 export const UPLOAD_VIBER_ASSET_SUCCESS = 'app/v2Containers/Viber/UPLOAD_ASSET_SUCCESS';
 export const UPLOAD_VIBER_ASSET_FAILURE = 'app/v2Containers/Viber/UPLOAD_ASSET_FAILURE';

package/v2Containers/Viber/index.js

@@ -63,6 +63,10 @@ import {
   VIBER_CAROUSEL_IMG_SIZE,
   STATIC_URL,
   DYNAMIC_URL,
+  EMPTY_OFFER_DETAILS,
+  EMPTY_INJECTED_TAGS,
+  EMPTY_TAGS,
+  EMPTY_TEMPLATE_DATA,
 } from './constants';
 import withCreatives from '../../hoc/withCreatives';
 import {
@@ -129,12 +133,12 @@ export const Viber = (props) => {
     handleClose,
     onCreateComplete,
     params,
-    templateData = {},
+    templateData = EMPTY_TEMPLATE_DATA,
     actions,
     viber = {},
     getFormSubscriptionData,
     viberData = {},
-    selectedOfferDetails = [],
+    selectedOfferDetails = EMPTY_OFFER_DETAILS,
     eventContextTags,
     waitEventContextTags,
     // TestAndPreviewSlidebox props
@@ -258,7 +262,7 @@ export const Viber = (props) => {
         setTemplateMediaType(VIBER_MEDIA_TYPES.TEXT);
       }
     }
-  }, [viber.templateDetails || templateData]);
+  }, [params?.id, viber.templateDetails, templateData]);
 
   // Reports live message-content validity to a parent (e.g. CreativesContainer's
   // slidebox) so it can disable its own Done/Preview-and-test buttons whenever the
@@ -332,7 +336,8 @@ export const Viber = (props) => {
     globalActionsProps.fetchSchemaForEntity(query);
   };
 
-  const tags = metaEntities?.tags?.standard || [];
+  const tags = metaEntities?.tags?.standard ?? EMPTY_TAGS;
+  const resolvedInjectedTags = injectedTags ?? EMPTY_INJECTED_TAGS;
   // tags Code end here
 
   // validation on Text area and tags validation
@@ -393,7 +398,7 @@ export const Viber = (props) => {
           onContextChange={handleOnTagsContextChange}
           location={location}
           tags={tags}
-          injectedTags={injectedTags || {}}
+          injectedTags={resolvedInjectedTags}
           id="viber_tags"
           userLocale={localStorage.getItem("jlocale") || "en"}
           selectedOfferDetails={selectedOfferDetails}
@@ -882,7 +887,7 @@ export const Viber = (props) => {
               onContextChange={handleOnTagsContextChange}
               location={location}
               tags={tags}
-              injectedTags={injectedTags || {}}
+              injectedTags={resolvedInjectedTags}
               id={`viber_carousel_card_tags_${cardIndex}`}
               userLocale={localStorage.getItem("jlocale") || "en"}
               selectedOfferDetails={selectedOfferDetails}
@@ -1260,7 +1265,7 @@ export const Viber = (props) => {
         onContextChange={handleOnTagsContextChange}
         location={location}
         tags={tags}
-        injectedTags={injectedTags || {}}
+        injectedTags={resolvedInjectedTags}
         userLocale={localStorage.getItem("jlocale") || "en"}
         selectedOfferDetails={selectedOfferDetails}
         eventContextTags={eventContextTags}
@@ -1578,15 +1583,16 @@ export const Viber = (props) => {
           </CapButton>
         </ViberFooter>
       </CapSpin>
-      {/* Test and Preview Slidebox */}
-      <TestAndPreviewSlidebox
-        show={showTestAndPreviewSlidebox || propsShowTestAndPreviewSlidebox}
-        onClose={handleCloseTestAndPreview}
-        channel={VIBER}
-        formData={getTemplateContent()} // Pass templateContent as formData (contains all payload fields)
-        content={getTemplateContent()} // Also pass as content for preview (contains viberPreviewContent)
-        formatMessage={formatMessage}
-      />
+      {(showTestAndPreviewSlidebox || propsShowTestAndPreviewSlidebox) && (
+        <TestAndPreviewSlidebox
+          show={showTestAndPreviewSlidebox || propsShowTestAndPreviewSlidebox}
+          onClose={handleCloseTestAndPreview}
+          channel={VIBER}
+          formData={getTemplateContent()}
+          content={getTemplateContent()}
+          formatMessage={formatMessage}
+        />
+      )}
     </>
   );
 };

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

@@ -1,268 +0,0 @@
-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

@@ -1,155 +0,0 @@
-/**
- * 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);
-};