@capillarytech/creatives-library 9.0.56-betaa.0 → 9.0.56

package/v2Components/FormBuilder/tests/entryGate.test.js

@@ -5,10 +5,10 @@
  * implementations are mocked with trivial stubs so this stays a fast unit test
  * of the gate, independent of the 4,400-line monolith.
  *
- * Contract pinned here (per-channel flag map — SMS Phase 1, MOBILEPUSH Phase 2):
- *   - flags OFF -> Classic, for every channel (the default until rollout)
- *   - a channel's flag ON + that channel (via `channel` prop OR `schema.channel`) -> Functional
- *   - a channel's flag ON + any OTHER channel -> Classic (flags are independent)
+ * Contract pinned here:
+ *   - flag OFF  -> Classic, for every channel (the default until rollout)
+ *   - flag ON + SMS channel (via `channel` prop OR `schema.channel`) -> Functional
+ *   - flag ON + non-SMS channel -> Classic (other channels untouched)
  *   - flag ON + channel unknown (async schema not yet arrived) -> Classic
  *   - flag read throws (bootstrap/test race) -> Classic, no crash
  */
@@ -25,26 +25,20 @@ jest.mock('../Functional', () => (props) => (
   <div data-testid="impl-functional">functional:{(props.schema && props.schema.channel) || props.channel || ''}</div>
 ));
 
-// Mock only the flag readers the gate uses; keep the rest of common.js intact.
+// Mock only the one flag reader the gate uses; keep the rest of common.js intact.
 jest.mock('../../../utils/common', () => ({
   ...jest.requireActual('../../../utils/common'),
   hasNewFormBuilderEnabledForSms: jest.fn(),
-  hasNewFormBuilderEnabledForMpush: jest.fn(),
 }));
 
 // eslint-disable-next-line import/first
 import FormBuilder from '../index';
 // eslint-disable-next-line import/first
-import { hasNewFormBuilderEnabledForSms, hasNewFormBuilderEnabledForMpush } from '../../../utils/common';
+import { hasNewFormBuilderEnabledForSms } from '../../../utils/common';
 
 const renderGate = (props = {}) => render(<FormBuilder {...props} />);
 
 describe('FormBuilder entry gate — routing', () => {
-  beforeEach(() => {
-    hasNewFormBuilderEnabledForSms.mockReturnValue(false);
-    hasNewFormBuilderEnabledForMpush.mockReturnValue(false);
-  });
-
   describe('flag OFF (default)', () => {
     beforeEach(() => hasNewFormBuilderEnabledForSms.mockReturnValue(false));
 
@@ -99,80 +93,8 @@ describe('FormBuilder entry gate — routing', () => {
     });
   });
 
-  describe('MPUSH flag (ENABLE_NEW_FORMBUILDER_MPUSH — Phase 2)', () => {
-    it('flag OFF: MOBILEPUSH renders Classic', () => {
-      renderGate({ schema: { channel: 'MOBILEPUSH' } });
-      expect(screen.getByTestId('impl-classic')).toBeInTheDocument();
-    });
-
-    it('flag ON: routes MOBILEPUSH to Functional (schema.channel)', () => {
-      hasNewFormBuilderEnabledForMpush.mockReturnValue(true);
-      renderGate({ schema: { channel: 'MOBILEPUSH' } });
-      expect(screen.getByTestId('impl-functional')).toBeInTheDocument();
-      expect(screen.queryByTestId('impl-classic')).toBeNull();
-    });
-
-    it('flag ON: is case-insensitive and honors the channel prop', () => {
-      hasNewFormBuilderEnabledForMpush.mockReturnValue(true);
-      renderGate({ channel: 'mobilepush', schema: {} });
-      expect(screen.getByTestId('impl-functional')).toBeInTheDocument();
-    });
-
-    it('flags are independent: MPUSH flag ON does not move SMS (and vice versa)', () => {
-      hasNewFormBuilderEnabledForMpush.mockReturnValue(true);
-      renderGate({ schema: { channel: 'SMS' } });
-      expect(screen.getByTestId('impl-classic')).toBeInTheDocument();
-    });
-
-    it('SMS flag ON does not move MOBILEPUSH', () => {
-      hasNewFormBuilderEnabledForSms.mockReturnValue(true);
-      renderGate({ schema: { channel: 'MOBILEPUSH' } });
-      expect(screen.getByTestId('impl-classic')).toBeInTheDocument();
-    });
-
-    it('both flags ON route each channel to Functional', () => {
-      hasNewFormBuilderEnabledForSms.mockReturnValue(true);
-      hasNewFormBuilderEnabledForMpush.mockReturnValue(true);
-      renderGate({ schema: { channel: 'MOBILEPUSH' } });
-      expect(screen.getByTestId('impl-functional')).toHaveTextContent('functional:MOBILEPUSH');
-    });
-
-    it('unmigrated channels stay on Classic even with both flags ON', () => {
-      hasNewFormBuilderEnabledForSms.mockReturnValue(true);
-      hasNewFormBuilderEnabledForMpush.mockReturnValue(true);
-      renderGate({ schema: { channel: 'EMAIL' } });
-      expect(screen.getByTestId('impl-classic')).toBeInTheDocument();
-    });
-  });
-
-  describe('localStorage session override (QA enabler / kill switch)', () => {
-    afterEach(() => {
-      window.localStorage.removeItem('ENABLE_NEW_FORMBUILDER_MPUSH');
-      window.localStorage.removeItem('ENABLE_NEW_FORMBUILDER_SMS');
-    });
-
-    it("'true' override routes the channel to Functional even with the org flag OFF", () => {
-      window.localStorage.setItem('ENABLE_NEW_FORMBUILDER_MPUSH', 'true');
-      renderGate({ schema: { channel: 'MOBILEPUSH' } });
-      expect(screen.getByTestId('impl-functional')).toBeInTheDocument();
-    });
-
-    it("'false' override (kill switch) forces Classic even with the org flag ON", () => {
-      hasNewFormBuilderEnabledForMpush.mockReturnValue(true);
-      window.localStorage.setItem('ENABLE_NEW_FORMBUILDER_MPUSH', 'false');
-      renderGate({ schema: { channel: 'MOBILEPUSH' } });
-      expect(screen.getByTestId('impl-classic')).toBeInTheDocument();
-    });
-
-    it('an override on one channel does not affect the other', () => {
-      window.localStorage.setItem('ENABLE_NEW_FORMBUILDER_MPUSH', 'true');
-      renderGate({ schema: { channel: 'SMS' } });
-      expect(screen.getByTestId('impl-classic')).toBeInTheDocument();
-    });
-  });
-
   describe('resilience', () => {
-    it('falls back to Classic if a flag read throws (window.capAuth not initialized)', () => {
+    it('falls back to Classic if the flag read throws (window.capAuth not initialized)', () => {
       hasNewFormBuilderEnabledForSms.mockImplementation(() => {
         throw new Error('capAuth not initialized');
       });
@@ -180,14 +102,5 @@ describe('FormBuilder entry gate — routing', () => {
       expect(screen.getByTestId('impl-classic')).toBeInTheDocument();
       expect(screen.queryByTestId('impl-functional')).toBeNull();
     });
-
-    it('one flag reader throwing routes EVERY channel to Classic (whole map falls back)', () => {
-      hasNewFormBuilderEnabledForSms.mockReturnValue(true);
-      hasNewFormBuilderEnabledForMpush.mockImplementation(() => {
-        throw new Error('capAuth not initialized');
-      });
-      renderGate({ schema: { channel: 'SMS' } });
-      expect(screen.getByTestId('impl-classic')).toBeInTheDocument();
-    });
   });
 });

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -36,6 +36,7 @@ import {
   makeSelectMessageMetaConfigId,
   makeSelectPrefilledValues,
   makeSelectIsSendingTestMessage,
+  makeSelectIsSendingCcsTestMessage,
   makeSelectUpdatePreviewError,
   makeSelectUpdatePreviewErrors,
   makeSelectFetchPrefilledValuesError,
@@ -103,11 +104,17 @@ TestAndPreviewSlidebox.propTypes = {
   messageMetaConfigId: PropTypes.string,
   prefilledValues: PropTypes.object,
   isSendingTestMessage: PropTypes.bool.isRequired,
+  isSendingCcsTestMessage: PropTypes.bool.isRequired,
   intl: PropTypes.object.isRequired,
   senderDetailsByChannel: PropTypes.object,
   wecrmAccounts: PropTypes.array,
   isLoadingSenderDetails: PropTypes.bool,
   orgUnitId: PropTypes.number,
+  /** notify/ui only — see CommonTestAndPreview's handleSendTestMessage. */
+  ccsSendTransaction: PropTypes.shape({
+    commDefinitionId: PropTypes.string,
+    referenceId: PropTypes.string,
+  }),
 };
 
 TestAndPreviewSlidebox.defaultProps = {
@@ -125,6 +132,7 @@ TestAndPreviewSlidebox.defaultProps = {
   isLoadingSenderDetails: false,
   orgUnitId: -1,
   smsFallbackContent: null,
+  ccsSendTransaction: null,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -145,6 +153,7 @@ const mapStateToProps = createStructuredSelector({
   fetchPrefilledValuesError: makeSelectFetchPrefilledValuesError(),
   fetchPrefilledValuesErrors: makeSelectFetchPrefilledValuesErrors(),
   isSendingTestMessage: makeSelectIsSendingTestMessage(),
+  isSendingCcsTestMessage: makeSelectIsSendingCcsTestMessage(),
   senderDetailsByChannel: makeSelectSenderDetailsByChannel(),
   wecrmAccounts: makeSelectWeCrmAccounts(),
   isLoadingSenderDetails: makeSelectIsLoadingSenderDetails(),

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -13,14 +13,14 @@ import { injectIntl } from 'react-intl';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
-// import { CouponsCapContainer } from '@capillarytech/cap-coupons'; // Commented - cap-coupons flows disabled
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
-// import injectSaga from '../../utils/injectSaga';   // cap-coupons flows disabled
-// import injectReducer from '../../utils/injectReducer';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import injectReducer from '../../utils/injectReducer';
 import { makeSelectAuthenticated } from '../Cap/selectors';
-import { createCentralCommsMetaId, getCentralCommsMetaIds } from '../../services/api';
+import capReducer from '../Cap/reducer';
+import { createCommDefinition, editCommDefinition } from '../../services/api';
 import DynamicControlsStep from './steps/DynamicControlsStep';
 import MessageTypeStep from './steps/MessageTypeStep';
 import CommunicationStrategyStep from './steps/CommunicationStrategyStep';
@@ -35,23 +35,20 @@ import {
   CHANNELS,
   INCENTIVE_TYPES,
   DYNAMIC_CONTROLS_CONFIG,
-  CHANNEL_CONTENT_KEY_MAP,
-  CHANNEL_DELIVERY_KEY_MAP,
-  CAMPAIGNS,
+  CCS_STRATEGY_TYPE_SINGLE,
+  CCS_CHANNEL_CONTENT_KEY_MAP,
+  CCS_CHANNEL_DELIVERY_KEY_MAP,
+  CCS_CHANNEL_NAME_MAP,
+  CCS_CONTENT_TRANSFORMS,
+  REFERENCE_ID_EXISTS,
 } from './constants';
 import { getEnabledSteps } from './utils/getEnabledSteps';
 import messages from './messages';
 import './CommunicationFlow.scss';
 
-// Inject couponsCap reducer and saga - commented out (cap-coupons flows disabled)
-// const withCouponsReducer = injectReducer({
-//   key: 'couponsCap',
-//   reducer: CouponsCapContainer.couponsCapReducer,
-// });
-// const withCouponsSaga = injectSaga({
-//   key: 'couponsCapSaga',
-//   saga: CouponsCapContainer.couponsCapSaga,
-// });
+// Self-injects the same 'cap' reducer CreativesContainer already injects under this key;
+// idempotent, so it's a no-op if the consumer's own store already provides it.
+const withCapReducer = injectReducer({ key: 'cap', reducer: capReducer });
 
 const getDeliveryChannels = (contentItems) => {
   const channels = contentItems.map((item) => (item.channel || '').toUpperCase()).filter(Boolean);
@@ -64,6 +61,9 @@ const hasDeliverySettingForChannel = (channelSetting, channel) => {
   return !!settings && Object.values(settings).some((v) => v !== null && v !== '' && v !== undefined);
 };
 
+// Duplicate referenceId within the org returns a 409 CCS error envelope.
+const isDuplicateReferenceIdError = (res) => res?.success === false && res?.status?.message === REFERENCE_ID_EXISTS;
+
 const CommunicationFlow = ({
   config,
   initialData,
@@ -91,6 +91,7 @@ const CommunicationFlow = ({
     };
   });
   const [validationErrors, setValidationErrors] = useState({});
+  const [saveError, setSaveError] = useState(null);
 
   // Memoize enabled steps
   const enabledSteps = useMemo(() => getEnabledSteps(config), [config]);
@@ -150,74 +151,123 @@ const CommunicationFlow = ({
   }, []);
 
   const handleSave = useCallback(async () => {
+    setSaveError(null);
     const aggregatedData = getAggregatedData();
     const shouldUseCCS = config?.useCCS !== false;
+    let ccsCommDefinition = null;
 
     if (shouldUseCCS) {
-      const ouId = config?.context?.ouId || -1;
-      const module = config?.context?.module
-        || (config?.consumer ? config.consumer.toUpperCase() : CAMPAIGNS);
+      const isMultiChannel = [CHANNEL_PRIORITY, AB_TEST].includes(aggregatedData.communicationStrategy);
+      const contentItem = (aggregatedData.contentItems || [])[0];
+      // Consumer-supplied (e.g. CapNotify's Alert Name field) — CommunicationFlow has no name input of its own.
+      const name = config?.context?.name;
 
-      const channelContentKeyMap = CHANNEL_CONTENT_KEY_MAP;
-      const channelDeliveryKeyMap = CHANNEL_DELIVERY_KEY_MAP;
+      // CCS create only supports SINGLE strategy; CHANNEL_PRIORITY/AB_TEST have no CCS equivalent yet.
+      if (!isMultiChannel && contentItem && name) {
+        const rawChannel = (contentItem.channel || '').toUpperCase();
+        const channel = CCS_CHANNEL_NAME_MAP[rawChannel] || rawChannel;
+        const contentKey = CCS_CHANNEL_CONTENT_KEY_MAP[channel];
+        const deliveryKey = CCS_CHANNEL_DELIVERY_KEY_MAP[channel];
+        const contentTransform = CCS_CONTENT_TRANSFORMS[channel];
+        const contentPayload = contentTransform ? contentTransform(contentItem.templateData) : contentItem.templateData;
+        const { dynamicControls = {} } = aggregatedData;
+        const channelSettings = aggregatedData.deliverySetting?.channelSetting?.[channel] || {};
+        // Optional fields — sent as '' rather than omitted when left blank.
+        const referenceId = config?.context?.referenceId || '';
+        const description = config?.context?.description || '';
 
-      const contentItems = aggregatedData.contentItems || [];
-      const { dynamicControls = {} } = aggregatedData;
+        const payload = {
+          referenceId,
+          name,
+          description,
+          strategyType: CCS_STRATEGY_TYPE_SINGLE,
+          settings: {
+            additionalSettings: {
+              useTinyUrl: dynamicControls.useTinyUrl ?? false,
+              encryptUrl: dynamicControls.sendToControlCustomers ?? false,
+              linkTrackingEnabled: dynamicControls.overrideDailyLimit ?? false,
+              userSubscriptionDisabled: dynamicControls.sendToBrandPocs ?? false,
+            },
+            executionParams: {},
+          },
+          singleChannelStrategy: {
+            variant: {
+              channel,
+              // `channel` spread last so CCS's normalized enum overrides the UI's internal identifier.
+              ...(contentKey && { [contentKey]: { ...contentPayload, channel } }),
+              ...(deliveryKey && { [deliveryKey]: { channelSettings: { ...channelSettings, channel } } }),
+            },
+          },
+        };
 
-      const additionalSettings = {
-        useTinyUrl: dynamicControls.useTinyUrl ?? false,
-        encryptUrl: dynamicControls.sendToControlCustomers ?? false,
-        linkTrackingEnabled: dynamicControls.overrideDailyLimit ?? false,
-        userSubscriptionDisabled: dynamicControls.sendToBrandPocs ?? false,
-      };
+        // existingCommDefinitionId (set when editing, e.g. a rejected alert) creates a new
+        // DRAFT version on the same CommDefinition instead of a new one.
+        const { existingCommDefinitionId } = config?.context || {};
+        const {
+          referenceId: payloadReferenceId,
+          description: payloadDescription,
+          strategyType,
+          settings,
+          singleChannelStrategy,
+        } = payload;
 
-      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] || {}),
-                      },
-                    },
-                  }),
-                },
+          const res = existingCommDefinitionId
+            ? await editCommDefinition(existingCommDefinitionId, {
+              referenceId: payloadReferenceId,
+              description: payloadDescription,
+              strategyType,
+              settings,
+              singleChannelStrategy,
+            })
+            : await createCommDefinition(payload);
+          if (res?.isError) {
+            setSaveError(formatMessage(messages.genericSaveError));
+            return;
+          }
+          if (isDuplicateReferenceIdError(res)) {
+            setSaveError(formatMessage(messages.duplicateReferenceIdError));
+            return;
+          }
+          const data = res?.response?.data;
+          if (existingCommDefinitionId) {
+            if (data) {
+              ccsCommDefinition = {
+                id: existingCommDefinitionId,
+                referenceId: referenceId || data.referenceId,
+                version: data.version?.version ?? data.version ?? 1,
+                status: data.status,
               };
-              return createCentralCommsMetaId(payload);
-            }),
-          );
-
-          const metaIds = responses
-            .map((res) => res?.response?.data?.id)
-            .filter(Boolean)
-            .join(',');
-
-          if (metaIds) {
-            const getResponse = await getCentralCommsMetaIds(metaIds);
+            } else {
+              setSaveError(formatMessage(messages.genericSaveError));
+              return;
+            }
+          } else if (data?.id) {
+            ccsCommDefinition = {
+              id: data.id,
+              referenceId: data.referenceId,
+              version: data.version?.version ?? 1,
+              status: data.status,
+            };
+          } else {
+            setSaveError(formatMessage(messages.genericSaveError));
+            return;
           }
         } catch (error) {
-          console.error('[CommunicationFlow] CCS createCentralCommsMetaId error:', error);
+          console.error('[CommunicationFlow] CCS createCommDefinition error:', error);
+          setSaveError(formatMessage(messages.genericSaveError));
+          return;
         }
+      } else if (!name) {
+        console.warn('[CommunicationFlow] Skipping CCS createCommDefinition — config.context.name is required');
+      } else if (isMultiChannel) {
+        console.warn('[CommunicationFlow] Skipping CCS createCommDefinition — CHANNEL_PRIORITY/AB_TEST strategies are not supported by CCS create yet (SINGLE only)');
+      } else if (!contentItem) {
+        console.warn('[CommunicationFlow] Skipping CCS createCommDefinition — no content item found (contentItems is empty)');
       }
     }
 
-    onSave(aggregatedData);
+    onSave(ccsCommDefinition ? { ...aggregatedData, ccsCommDefinition } : aggregatedData);
   }, [getAggregatedData, config, onSave]);
 
   // Call onChange callback when stepData changes
@@ -252,9 +302,17 @@ const CommunicationFlow = ({
             <CapDivider />
           </CapRow>
         );
-      case STEPS.COMMUNICATION_STRATEGY:
+      case STEPS.COMMUNICATION_STRATEGY: {
+        // No divider when there's no content yet, but the spacing above the Channel
+        // card must stay either way — see .communication-strategy-row in the scss.
+        const templateStepFollows = enabledSteps.includes(STEPS.CHANNEL_SELECTION);
+        const hasContent = stepData.contentItems?.length > 0;
         return (
-          <CapRow useLegacy key={step}>
+          <CapRow
+            useLegacy
+            key={step}
+            className={(!templateStepFollows || hasContent) ? '' : 'communication-strategy-row--no-divider'}
+          >
             <CommunicationStrategyStep
               {...commonProps}
               value={stepData.communicationStrategy}
@@ -263,9 +321,10 @@ const CommunicationFlow = ({
               disabled={communicationStrategyData.disabled}
               onChange={(communicationStrategy) => handleStepChange(step, { communicationStrategy })}
             />
-            <CapDivider />
+            {(!templateStepFollows || hasContent) && <CapDivider />}
           </CapRow>
         );
+      }
       case STEPS.CHANNEL_SELECTION:
         // Only show ChannelSelectionStep if communication strategy is selected
         if (!stepData.communicationStrategy) {
@@ -280,6 +339,7 @@ const CommunicationFlow = ({
               onChange={(data) => handleStepChange(step, data)}
               channelsToHide={contentTemplateData.channelsToHide}
               channelsToDisable={contentTemplateData.channelsToDisable}
+              disablePreviewAndTest={!!contentTemplateData.disablePreviewAndTest}
               creativesMode={config.mode || 'create'}
               selectedOfferDetails={stepData.selectedOfferDetails}
               incentivesData={{
@@ -290,7 +350,7 @@ const CommunicationFlow = ({
               config={config}
               capData={cap || capData}
             />
-            <CapDivider />
+            {stepData.contentItems?.length > 0 && <CapDivider />}
           </CapRow>
         );
       case STEPS.DYNAMIC_CONTROLS:
@@ -317,6 +377,11 @@ const CommunicationFlow = ({
       {renderSteps()}
       {onSave && (
         <CapRow useLegacy className="communication-flow-container__footer">
+          {saveError && (
+            <CapLabel type="label2" className="communication-flow-container__save-error">
+              {saveError}
+            </CapLabel>
+          )}
           <CapButton type="primary" onClick={handleSave} disabled={isSaveDisabled}>
             {formatMessage(messages.save)}
           </CapButton>
@@ -328,7 +393,7 @@ const CommunicationFlow = ({
 
 CommunicationFlow.propTypes = {
   config: PropTypes.shape({
-    consumer: PropTypes.oneOf(['campaigns', 'loyalty', 'adiona']).isRequired,
+    consumer: PropTypes.oneOf(['campaigns', 'loyalty', 'adiona', 'coupons', 'cartPromotions']).isRequired,
     channel: PropTypes.string,
     mode: PropTypes.oneOf(['create', 'edit', 'preview']).isRequired,
     channelsToHide: PropTypes.arrayOf(PropTypes.string),
@@ -362,6 +427,7 @@ CommunicationFlow.propTypes = {
       contentTemplateData: PropTypes.shape({
         required: PropTypes.bool,
         channels: PropTypes.object,
+        disablePreviewAndTest: PropTypes.bool,
       }),
       enableIncentives: PropTypes.bool,
       enableDeliverySettings: PropTypes.bool,
@@ -394,8 +460,7 @@ const mapStateToProps = createStructuredSelector({
 const withConnect = connect(mapStateToProps);
 
 export default compose(
-  // withCouponsReducer, // cap-coupons flows disabled
-  // withCouponsSaga,   // cap-coupons flows disabled
+  withCapReducer,
   withConnect,
   injectIntl,
 )(CommunicationFlow);

package/v2Containers/CommunicationFlow/CommunicationFlow.scss

@@ -128,16 +128,32 @@
 }
 
 .communication-flow-container {
+  // Anchor the Save footer to the bottom without flex, avoiding .ant-row-legacy overrides and flexbox stretching nested fixed-size content.
+  &.ant-row-legacy {
+    position: relative !important;
+    min-height: calc(100vh - 6.571rem) !important;
+    padding-bottom: 6rem !important;
+  }
+
   .step-divider {
     margin: $CAP_SPACE_32 0;
   }
 
+  // Hide the divider when empty but preserve its margin gap so the section doesn’t sit flush against the Channel card.
+  .communication-strategy-row--no-divider {
+    margin-bottom: $CAP_SPACE_32;
+  }
+
   .heading-style {
     margin-bottom: $CAP_SPACE_08;
   }
 
-  &__footer {
-    padding: $CAP_SPACE_16 0 $CAP_SPACE_08;
+  &__footer.ant-row-legacy {
+    position: absolute !important;
+    left: 0;
+    right: 0;
+    bottom: 0 !important;
+    padding: 3.142rem 0 $CAP_SPACE_08;
   }
 }