@capillarytech/creatives-library 9.0.13 → 9.0.14

package/package.json

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

package/services/api.js

@@ -693,6 +693,16 @@ export const createCentralCommsMetaId = (payload, metaType = TRANSACTION) => {
   return request(url, getAPICallObject('POST', payload, 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('GET', null, false, false, false, true));
+};
+
+export const bulkClaimAndApprove = (payload, metaType = TRANSACTION) => {
+  const url = `${API_ENDPOINT}/common/central-comms/bulk-claim-approve/${metaType}`;
+  return request(url, getAPICallObject('POST', payload, false, false, false, true));
+};
+
 export const updateMetaConfig = (payload, metaType = TRANSACTION, metaId) => {
   const url = `${API_ENDPOINT}/common/central-comms/meta-id/${metaType}/${metaId}`;
   return request(url, getAPICallObject('PATCH', payload, false, false, false, true));

package/services/tests/api.test.js

@@ -1092,6 +1092,8 @@ import {
   unarchiveTemplate,
   bulkArchiveTemplates,
   bulkUnarchiveTemplates,
+  getCentralCommsMetaIds,
+  bulkClaimAndApprove,
 } from '../api';
 
 describe('archiveTemplate', () => {
@@ -1145,3 +1147,84 @@ describe('bulkUnarchiveTemplates', () => {
     expect(lastCall[1].method).toBe('PUT');
   });
 });
+
+describe('getCentralCommsMetaIds', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn().mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({ status: 200, response: [] }),
+    }));
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should return a Promise', () => {
+    const result = getCentralCommsMetaIds('1,2,3');
+    expect(result).toBeInstanceOf(Promise);
+  });
+
+  it('should call GET on central-comms/meta-id endpoint with default TRANSACTION type', () => {
+    getCentralCommsMetaIds('1,2,3');
+    expect(global.fetch).toHaveBeenCalled();
+    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
+    expect(lastCall[0]).toContain('central-comms/meta-id/TRANSACTION');
+    expect(lastCall[0]).toContain('metaIds=1,2,3');
+    expect(lastCall[1].method).toBe('GET');
+  });
+
+  it('should use provided metaType in URL', () => {
+    getCentralCommsMetaIds('4,5', 'EVENT');
+    expect(global.fetch).toHaveBeenCalled();
+    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
+    expect(lastCall[0]).toContain('central-comms/meta-id/EVENT');
+  });
+
+  it('should handle fetch failure', async () => {
+    global.fetch.mockRejectedValue({ error: 'Network error' });
+    const result = await getCentralCommsMetaIds('1,2,3');
+    expect(result).toEqual({ error: 'Network error' });
+  });
+});
+
+describe('bulkClaimAndApprove', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn().mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({ status: 200, response: { success: true } }),
+    }));
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should return a Promise', () => {
+    const result = bulkClaimAndApprove({ ids: ['1', '2'] });
+    expect(result).toBeInstanceOf(Promise);
+  });
+
+  it('should call POST on central-comms/bulk-claim-approve endpoint with default TRANSACTION type', () => {
+    const payload = { ids: ['1', '2'] };
+    bulkClaimAndApprove(payload);
+    expect(global.fetch).toHaveBeenCalled();
+    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
+    expect(lastCall[0]).toContain('central-comms/bulk-claim-approve/TRANSACTION');
+    expect(lastCall[1].method).toBe('POST');
+    expect(lastCall[1].body).toBe(JSON.stringify(payload));
+  });
+
+  it('should use provided metaType in URL', () => {
+    bulkClaimAndApprove({ ids: ['3'] }, 'EVENT');
+    expect(global.fetch).toHaveBeenCalled();
+    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
+    expect(lastCall[0]).toContain('central-comms/bulk-claim-approve/EVENT');
+  });
+
+  it('should handle fetch failure', async () => {
+    global.fetch.mockRejectedValue({ error: 'Network error' });
+    const result = await bulkClaimAndApprove({ ids: ['1'] });
+    expect(result).toEqual({ error: 'Network error' });
+  });
+});

package/v2Components/CommonTestAndPreview/UnifiedPreview/WhatsAppPreviewContent.js

@@ -17,7 +17,7 @@ import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import { ANDROID, IOS } from '../constants';
 import messages from '../messages';
-import { getWhatsappQuickReply, getWhatsappCarouselButtonView } from '../../../v2Containers/Whatsapp/utils';
+import { getWhatsappQuickReply, getWhatsappCarouselButtonView, getWhatsappDocPreview } from '../../../v2Containers/Whatsapp/utils';
 import { QUICK_REPLY, PHONE_NUMBER, WHATSAPP_CATEGORIES, TEMPLATE_VARIABLE_REGEX } from '../../../v2Containers/Whatsapp/constants';
 import videoPlay from '../../../assets/videoPlay.svg';
 import whatsappImageEmptyPreview from '../../TemplatePreview/assets/images/empty_image_preview.svg';
@@ -258,8 +258,10 @@ const WhatsAppPreviewContent = ({
 
         {/* Document Preview */}
         {content?.docPreview && (
-          <CapRow useLegacy className="whatsapp-image">
-            {content.docPreview}
+          <CapRow className="whatsapp-image">
+            {React.isValidElement(content.docPreview)
+              ? content.docPreview
+              : getWhatsappDocPreview(content.docPreview)}
           </CapRow>
         )}
 

package/v2Components/CommonTestAndPreview/index.js

@@ -394,6 +394,13 @@ const CommonTestAndPreview = (props) => {
       return '';
     }
 
+    // WHATSAPP channel - return template message string (content is a complex object with JSX nodes,
+    // JSON.stringify would crash; the preview uses the content prop directly via WhatsAppPreviewContent)
+    if (channel === CHANNELS.WHATSAPP) {
+      if (typeof content === 'string') return content;
+      return content?.templateMsg || '';
+    }
+
     // For SMS and other string-based channels, return content as-is if it's already a string
     // Don't stringify strings as it adds unnecessary quotes
     if (channel === CHANNELS.SMS && typeof content === 'string') {

package/v2Components/NavigationBar/index.js

@@ -67,11 +67,23 @@ export class NavigationBar extends React.Component {
         return {
           selectedProduct: formatMessage(messages.loyaltyProgram),
           helpUrl: LOYALTY_HELP_URL,
+          settingsIcon: {
+            iconType: 'settings',
+            key: 'settings',
+            placement: 'bottomRight',
+            className: 'navigation-setting-icon',
+            toolTip: formatMessage(messages.loyaltyCreativeSettings),
+          },
         };
       default:
         return {
           selectedProduct: formatMessage(messages.selectedProductDefault),
           helpUrl: HELP_URL,
+          settingsIcon: {
+            iconType: 'settings',
+            key: 'settings',
+            onClickHandler: this.onSettingsIconClick,
+          },
         };
     }
   }
@@ -83,6 +95,16 @@ export class NavigationBar extends React.Component {
     }
   };
 
+  onSettingsIconClick = () => {
+    const { settingsUrl } = this.props;
+    if (settingsUrl) {
+      const stateObj = {
+        page: "settings",
+      };
+      window.history.pushState(stateObj, 'Settings', window.location.replace(settingsUrl));
+    }
+  };
+
   onHelpIconClick = () => {
     const { helpUrl } = this.state;
     if (helpUrl) {
@@ -91,6 +113,7 @@ export class NavigationBar extends React.Component {
   };
 
   getTopbarIcons = (showDocumentationBot = false) => {
+    const { settingsIcon } = this.state;
     const ICONS = [
       {
         iconType: 'help',
@@ -98,6 +121,9 @@ export class NavigationBar extends React.Component {
         onClickHandler: this.onHelpIconClick,
       },
     ];
+    if (settingsIcon) {
+      ICONS.push(settingsIcon);
+    }
     return showDocumentationBot ? ICONS.slice(1) : ICONS; // If showDocumentationBot is true, help icon will be replaced by Aira icon on UI
   };
 
@@ -196,6 +222,7 @@ NavigationBar.propTypes = {
   topbarMenuData: PropTypes.array,
   logout: PropTypes.func,
   changeOrg: PropTypes.func,
+  settingsUrl: PropTypes.string,
   children: PropTypes.node,
   orgSettingsUrl: PropTypes.string,
   intl: intlShape.isRequired,

package/v2Components/NavigationBar/messages.js

@@ -65,5 +65,9 @@ export default defineMessages({
   "selectOrganization": {
     id: `${scope}.selectOrganization`,
     defaultMessage: 'Select organization',
+  },
+  "loyaltyCreativeSettings": {
+    id: `${scope}.loyaltyCreativeSettings`,
+    defaultMessage: 'There are no settings for creatives within Loyalty+. Channel-related settings are available within organisation settings',
   }
 });

package/v2Components/NavigationBar/tests/index.test.js

@@ -71,4 +71,23 @@ describe('NavigationBar', () => {
     const loyaltyProduct = screen.getByText('Loyalty+');
     expect(loyaltyProduct).toBeInTheDocument();
   });
+
+  // Regression: AntD v3 -> v6 migration (CAP-183930) dropped the settings (gear)
+  // icon from the top nav. These tests ensure the gear keeps rendering.
+  it('Should render the settings (gear) icon in the top nav bar', () => {
+    const updatedProps = cloneDeep(props);
+    updatedProps.location.pathname = '/creatives/ui/v2';
+    updatedProps.settingsUrl = '/campaigns/ui/creatives/settings/message';
+    renderComponent(updatedProps);
+    const settingsIcon = document.querySelector('.cap-icon-v2-settings');
+    expect(settingsIcon).toBeInTheDocument();
+  });
+
+  it('Should render the settings (gear) icon for the loyalty product', () => {
+    const updatedProps = cloneDeep(props);
+    updatedProps.location.pathname = '/creatives/ui/v2/loyalty';
+    renderComponent(updatedProps);
+    const settingsIcon = document.querySelector('.cap-icon-v2-settings.navigation-setting-icon');
+    expect(settingsIcon).toBeInTheDocument();
+  });
 });

package/v2Components/NewCallTask/index.js

@@ -16,6 +16,7 @@ import CallTaskPreview from '../CallTaskPreview';
 import messages from './messages';
 import './_newCallTask.scss';
 import { hasStore2DoorFeature } from '../../utils/common';
+import { EDIT } from '../../constants/unified';
 
 const CALL = 'CALL';
 const STOREMAX_WHATSAPP = 'STOREMAX_WHATSAPP';
@@ -27,7 +28,11 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
 
   getInitialState = () => {
     const { templateData, messageDetails, mode } = this.props;
-    const actionType = mode === 'edit' ? messageDetails.messageContent.message_content_id_1.callTaskActionType : CALL;
+    const actionType = mode === EDIT
+      ? (messageDetails?.messageContent?.message_content_id_1?.callTaskActionType
+          || templateData?.callTaskActionType
+          || CALL)
+      : CALL;
     return {
       subject: templateData && templateData.subject ? templateData.subject : '',
       messageBody: templateData && templateData.messageBody ? templateData.messageBody : '',

package/v2Components/TemplatePreview/index.js

@@ -47,7 +47,7 @@ import { handlePreviewInNewTab } from '../../utils/common';
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
 import CapFacebookPreview from '../../v2Containers/CapFacebookPreview';
 import WhatsappStatusContainer from '../WhatsappStatusContainer';
-import { getWhatsappQuickReply, getWhatsappCarouselButtonView } from '../../v2Containers/Whatsapp/utils';
+import { getWhatsappQuickReply, getWhatsappCarouselButtonView, getWhatsappDocPreview } from '../../v2Containers/Whatsapp/utils';
 import { QUICK_REPLY, WHATSAPP_CATEGORIES, PHONE_NUMBER, TEMPLATE_VARIABLE_REGEX } from '../../v2Containers/Whatsapp/constants';
 import { RCS_BUTTON_TYPES, LEFT, HORIZONTAL, VERTICAL, RIGHT} from '../../v2Containers/Rcs/constants';
 import { ANDROID, INAPP_MESSAGE_LAYOUT_TYPES } from '../../v2Containers/InApp/constants';
@@ -1234,7 +1234,9 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         )}
                         {content?.docPreview && (
                           <div className="whatsapp-image">
-                            {content?.docPreview}
+                            {React.isValidElement(content.docPreview)
+                              ? content.docPreview
+                              : getWhatsappDocPreview(content.docPreview)}
                           </div>
                         )}
                         {content?.templateHeaderPreview || ""}

package/v2Containers/Cap/index.js

@@ -18,7 +18,7 @@ import * as locationActions from '../LanguageProvider/actions';
 import * as appActions from '../App/actions';
 import config from '../../config/app';
 import NavigationBar from '../../v2Components/NavigationBar';
-import { publicPath } from '../../config/path';
+import { engagePlusPublicPath, publicPath } from '../../config/path';
 import { GTM_TRACKING_ID, CREATIVES_UI_VIEW, FAILURE } from '../App/constants';
 import { makeSelectLocale } from '../../v2Containers/LanguageProvider/selectors';
 import CapSupportVideosWrapper from '@capillarytech/cap-ui-library/CapSupportVideosWrapper';
@@ -30,6 +30,7 @@ import {
   REQUEST,
   DEFAULT,
   ENABLE_PRODUCT_SUPPORT_VIDEOS,
+  CAMPAIGN_SETTINGS_URL,
 } from './constants';
 import './_cap.scss';
 import { Switch } from 'react-router';
@@ -528,6 +529,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
                   changeOrg={this.changeOrg}
                   isCreativesAccessible={isCreativesAccessible}
                   logout={this.logout}
+                  settingsUrl={`${engagePlusPublicPath}${CAMPAIGN_SETTINGS_URL}`}
                   orgSettingsUrl={ORG_SETTINGS_URL}
                   loggedIn={isLoggedIn}
                   topbarMenuData={topbarMenuDataOptions}

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -20,6 +20,7 @@ import CapButton from '@capillarytech/cap-ui-library/CapButton';
 // import injectSaga from '../../utils/injectSaga';   // cap-coupons flows disabled
 // import injectReducer from '../../utils/injectReducer';
 import { makeSelectAuthenticated } from '../Cap/selectors';
+import { createCentralCommsMetaId, getCentralCommsMetaIds } from '../../services/api';
 import DynamicControlsStep from './steps/DynamicControlsStep';
 import MessageTypeStep from './steps/MessageTypeStep';
 import CommunicationStrategyStep from './steps/CommunicationStrategyStep';
@@ -28,6 +29,15 @@ import {
   STEPS,
   CHANNEL_PRIORITY,
   AB_TEST,
+  DEFAULT_COMMUNICATION_STRATEGY_OPTIONS,
+  CHANNELS_WITHOUT_DELIVERY,
+  MESSAGE_TYPES_OPTIONS,
+  CHANNELS,
+  INCENTIVE_TYPES,
+  DYNAMIC_CONTROLS_CONFIG,
+  CHANNEL_CONTENT_KEY_MAP,
+  CHANNEL_DELIVERY_KEY_MAP,
+  CAMPAIGNS,
 } from './constants';
 import { getEnabledSteps } from './utils/getEnabledSteps';
 import messages from './messages';
@@ -43,6 +53,17 @@ import './CommunicationFlow.scss';
 //   saga: CouponsCapContainer.couponsCapSaga,
 // });
 
+const getDeliveryChannels = (contentItems) => {
+  const channels = contentItems.map((item) => (item.channel || '').toUpperCase()).filter(Boolean);
+  const unique = [...new Set(channels)];
+  return unique.filter((channel) => !CHANNELS_WITHOUT_DELIVERY.includes(channel));
+};
+
+const hasDeliverySettingForChannel = (channelSetting, channel) => {
+  const settings = channelSetting[channel];
+  return !!settings && Object.values(settings).some((v) => v !== null && v !== '' && v !== undefined);
+};
+
 const CommunicationFlow = ({
   config,
   initialData,
@@ -50,13 +71,14 @@ const CommunicationFlow = ({
   onCancel, // eslint-disable-line
   onChange,
   intl,
-  capData, // From Redux - contains user/org info needed by CouponsWrapper
+  cap, // From parent consumer (e.g. campaigns passes campaignCap) — takes priority over Redux capData
+  capData, // From Redux - fallback when cap is not provided by consumer
 }) => {
   const { formatMessage } = intl || {};
   const { messageTypeData = {}, communicationStrategyData = {}, contentTemplateData = {} } = config?.features || {};
   // Initialize step data from initialData or defaults
   const [stepData, setStepData] = useState(() => {
-    const defaultMessageType = messageTypeData.defaultOption?.value || null;
+    const defaultMessageType = messageTypeData.defaultOption?.value || MESSAGE_TYPES_OPTIONS?.[1]?.value || null;
     return {
       messageType: initialData?.messageType || defaultMessageType,
       communicationStrategy: initialData?.communicationStrategy || null,
@@ -73,6 +95,27 @@ const CommunicationFlow = ({
   // Memoize enabled steps
   const enabledSteps = useMemo(() => getEnabledSteps(config), [config]);
 
+  const isSaveDisabled = useMemo(() => {
+    const strategyRequired = enabledSteps.includes(STEPS.COMMUNICATION_STRATEGY);
+    const templateRequired = enabledSteps.includes(STEPS.CHANNEL_SELECTION);
+    const isMultiChannel = [CHANNEL_PRIORITY, AB_TEST].includes(stepData.communicationStrategy);
+
+    if (strategyRequired && !stepData.communicationStrategy) return true;
+    if (templateRequired && !isMultiChannel && (!stepData.contentItems || stepData.contentItems.length === 0)) return true;
+
+    const deliverySettingsEnabled = !!config?.features?.deliverySettingsData;
+    if (deliverySettingsEnabled && templateRequired) {
+      const deliveryChannels = getDeliveryChannels(stepData.contentItems || []);
+      const channelSetting = stepData.deliverySetting?.channelSetting || {};
+      const anyChannelMissingSenderDetails = deliveryChannels.some(
+        (channel) => !hasDeliverySettingForChannel(channelSetting, channel),
+      );
+      if (anyChannelMissingSenderDetails) return true;
+    }
+
+    return false;
+  }, [enabledSteps, stepData.communicationStrategy, stepData.contentItems, stepData.deliverySetting, config?.features?.deliverySettingsData]);
+
   /**
    * Get aggregated data from all steps
    */
@@ -106,6 +149,77 @@ const CommunicationFlow = ({
     }));
   }, []);
 
+  const handleSave = useCallback(async () => {
+    const aggregatedData = getAggregatedData();
+    const shouldUseCCS = config?.useCCS !== false;
+
+    if (shouldUseCCS) {
+      const ouId = config?.context?.ouId || -1;
+      const module = config?.context?.module
+        || (config?.consumer ? config.consumer.toUpperCase() : CAMPAIGNS);
+
+      const channelContentKeyMap = CHANNEL_CONTENT_KEY_MAP;
+      const channelDeliveryKeyMap = CHANNEL_DELIVERY_KEY_MAP;
+
+      const contentItems = aggregatedData.contentItems || [];
+      const { dynamicControls = {} } = aggregatedData;
+
+      const additionalSettings = {
+        useTinyUrl: dynamicControls.useTinyUrl ?? false,
+        encryptUrl: dynamicControls.sendToControlCustomers ?? false,
+        linkTrackingEnabled: dynamicControls.overrideDailyLimit ?? false,
+        userSubscriptionDisabled: dynamicControls.sendToBrandPocs ?? false,
+      };
+
+      if (contentItems.length > 0) {
+        try {
+          const responses = await Promise.all(
+            contentItems.map((item) => {
+              const channel = (item.channel || '').toUpperCase();
+              const contentKey = channelContentKeyMap[channel];
+              const deliveryKey = channelDeliveryKeyMap[channel];
+              const payload = {
+                centralCommsPayload: {
+                  ouId,
+                  channel,
+                  module,
+                  executionParams: {},
+                  clientName: 'EMF',
+                  ...(contentKey && {
+                    [contentKey]: { channel, ...item.templateData },
+                  }),
+                  ...(deliveryKey && {
+                    [deliveryKey]: {
+                      additionalSettings,
+                      channelSettings: {
+                        channel,
+                        ...(aggregatedData.deliverySetting?.channelSetting?.[channel] || {}),
+                      },
+                    },
+                  }),
+                },
+              };
+              return createCentralCommsMetaId(payload);
+            }),
+          );
+
+          const metaIds = responses
+            .map((res) => res?.response?.data?.id)
+            .filter(Boolean)
+            .join(',');
+
+          if (metaIds) {
+            const getResponse = await getCentralCommsMetaIds(metaIds);
+          }
+        } catch (error) {
+          console.error('[CommunicationFlow] CCS createCentralCommsMetaId error:', error);
+        }
+      }
+    }
+
+    onSave(aggregatedData);
+  }, [getAggregatedData, config, onSave]);
+
   // Call onChange callback when stepData changes
   useEffect(() => {
     if (onChange) {
@@ -131,8 +245,8 @@ const CommunicationFlow = ({
             <MessageTypeStep
               {...commonProps}
               value={stepData.messageType}
-              options={messageTypeData.options}
-              defaultOption={messageTypeData.defaultOption}
+              options={messageTypeData.options || MESSAGE_TYPES_OPTIONS}
+              defaultOption={messageTypeData.defaultOption || MESSAGE_TYPES_OPTIONS?.[1]}
               onChange={(messageType) => handleStepChange(step, { messageType })}
             />
             <CapDivider />
@@ -145,7 +259,7 @@ const CommunicationFlow = ({
               {...commonProps}
               value={stepData.communicationStrategy}
               // messageType={stepData.messageType}
-              options={communicationStrategyData.options}
+              options={communicationStrategyData.options || DEFAULT_COMMUNICATION_STRATEGY_OPTIONS}
               disabled={communicationStrategyData.disabled}
               onChange={(communicationStrategy) => handleStepChange(step, { communicationStrategy })}
             />
@@ -162,30 +276,23 @@ const CommunicationFlow = ({
             <ChannelSelectionStep
               {...commonProps}
               value={stepData}
-              channels={contentTemplateData.channels}
+              channels={contentTemplateData.channels || CHANNELS}
               onChange={(data) => handleStepChange(step, data)}
               channelsToHide={contentTemplateData.channelsToHide}
               channelsToDisable={contentTemplateData.channelsToDisable}
               creativesMode={config.mode || 'create'}
               selectedOfferDetails={stepData.selectedOfferDetails}
-              incentivesData={config.features?.incentivesData}
+              incentivesData={{
+                ...config.features?.incentivesData,
+                types: config.features?.incentivesData?.types || INCENTIVE_TYPES,
+              }}
               deliverySettingsData={config.features?.deliverySettingsData}
               config={config}
-              capData={capData}
+              capData={cap || capData}
             />
             <CapDivider />
           </CapRow>
         );
-      // This will be added back in when coupons/points are integrated so keeping it commented out for now
-      // case STEPS.INCENTIVES:
-      //   return (
-      //     <IncentivesStep
-      //       key={step}
-      //       {...commonProps}
-      //       value={stepData.selectedOfferDetails}
-      //       onChange={(selectedOfferDetails) => handleStepChange(step, { selectedOfferDetails })}
-      //     />
-      //   );
       case STEPS.DYNAMIC_CONTROLS:
         // Only show DynamicControlsStep if communication strategy is selected
         if (!stepData.communicationStrategy) {
@@ -196,7 +303,7 @@ const CommunicationFlow = ({
             key={step}
             {...commonProps}
             value={{ dynamicControls: stepData.dynamicControls }}
-            controls={config.features?.dynamicControlsData?.controls || []}
+            controls={config.features?.dynamicControlsData?.controls || DYNAMIC_CONTROLS_CONFIG}
             onChange={(data) => handleStepChange(step, { dynamicControls: data.dynamicControls })}
           />
         );
@@ -210,7 +317,7 @@ const CommunicationFlow = ({
       {renderSteps()}
       {onSave && (
         <CapRow useLegacy className="communication-flow-container__footer">
-          <CapButton type="primary" onClick={() => onSave(getAggregatedData())}>
+          <CapButton type="primary" onClick={handleSave} disabled={isSaveDisabled}>
             {formatMessage(messages.save)}
           </CapButton>
         </CapRow>
@@ -262,18 +369,21 @@ CommunicationFlow.propTypes = {
       incentivesTypes: PropTypes.arrayOf(PropTypes.oneOf(['coupons', 'points', 'promotions', 'giftVouchers', 'badges'])),
     }),
     context: PropTypes.object,
+    useCCS: PropTypes.bool,
   }).isRequired,
   initialData: PropTypes.object,
   onSave: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
   onChange: PropTypes.func,
   intl: PropTypes.object.isRequired,
+  cap: PropTypes.object,
   capData: PropTypes.object,
 };
 
 CommunicationFlow.defaultProps = {
   initialData: null,
   onChange: null,
+  cap: null,
   capData: {},
 };