@capillarytech/creatives-library 9.0.55 → 9.0.56-alpha.0

package/constants/unified.js

@@ -63,7 +63,6 @@ export const ENABLE_AI_SUGGESTIONS = 'ENABLE_AI_SUGGESTIONS';
 export const AI_CONTENT_BOT_DISABLED = 'AI_CONTENT_BOT_DISABLED';
 export const AI_DOCUMENTATION_BOT_ENABLED = 'AI_DOCUMENTATION_BOT_ENABLED';
 export const ENABLE_PRODUCT_SUPPORT_VIDEOS = 'ENABLE_PRODUCT_SUPPORT_VIDEOS';
-export const SUPPORT_ENGAGEMENT_MODULE = 'SUPPORT_ENGAGEMENT_MODULE';
 export const EMBEDDED = 'embedded';
 // --- Tag/Validation Constants ---
 export const CARD_RELATED_TAGS = [

package/package.json

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

package/services/api.js

@@ -701,6 +701,18 @@ export const createCentralCommsMetaId = (payload, metaType = TRANSACTION) => {
   return request(url, getAPICallObject('POST', payload, false, false, false, true));
 };
 
+// CCS CommDefinition API (new Veyron /api/v1/commdefinition surface, proxied through cap-creatives-api /comm-definitions); used by CommunicationFlow's Save, while legacy messageMeta functions remain for CreativesContainer's save flow (Cap/sagas.js).
+export const createCommDefinition = (payload) => {
+  const url = `${API_ENDPOINT}/comm-definitions`;
+  return request(url, getAPICallObject('POST', payload, false, false, false, true));
+};
+
+// Opens a new DRAFT version with the supplied content on an existing CommDefinition (same id/referenceId); used by CommunicationFlow edit-mode saves to preserve the alert's identity instead of creating a new CommDefinition. Route verified against Veyron's /commdefinition/{id}/edit endpoint.
+export const editCommDefinition = (commDefinitionId, payload) => {
+  const url = `${API_ENDPOINT}/comm-definitions/${commDefinitionId}/edit`;
+  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));

package/utils/common.js

@@ -99,10 +99,6 @@ export const hasSupportCKEditor = Auth.hasFeatureAccess.bind(
   null,
   SUPPORT_CK_EDITOR,
 );
-export const hasSupportEngagementModule = Auth.hasFeatureAccess.bind(
-  null,
-  SUPPORT_ENGAGEMENT_MODULE,
-);
 
 export const hasGiftVoucherFeature = Auth.hasFeatureAccess.bind(
   null,

package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js

@@ -139,6 +139,19 @@ const UnifiedPreview = ({
         );
       }
 
+      case CHANNELS.LINE:
+        // LINE currently carries a single text message; CCS stores lineMessageContent.messageBody as JSON for LINE's native messages[] (see testAndPreviewDataTransform.js), already reduced to plain text before this point, so reuse the SMS chat-bubble preview. Rich LINE types (image/video/sticker/imageMap/carousel/flex) are not specially rendered yet.
+        return (
+          <SmsPreviewContent
+            content={typeof content === 'string' ? content : (content?.resolvedBody || '')}
+            device={device}
+            isUpdating={isUpdating}
+            error={error}
+            formatMessage={formatMessage}
+            showHeader={showHeader}
+          />
+        );
+
       case CHANNELS.WHATSAPP: {
         // WhatsApp content is an object with templateMsg, media, CTA, etc.
         const whatsappContent = typeof content === 'object' ? content : {};

package/v2Components/CommonTestAndPreview/constants.js

@@ -85,6 +85,7 @@ export const CHANNELS = {
   VIBER: 'VIBER',
   ZALO: 'ZALO',
   WEBPUSH: 'WEBPUSH',
+  LINE: 'LINE',
 };
 
 /** Unified preview tab keys when RCS shows RCS + SMS fallback panes. */
@@ -100,6 +101,7 @@ export const CHANNELS_USING_ANDROID_PREVIEW_DEVICE = [
   CHANNELS.INAPP,
   CHANNELS.MOBILEPUSH,
   CHANNELS.VIBER,
+  CHANNELS.LINE,
 ];
 
 /** RCS createMessageMeta test payload — rich card envelope literals. */

package/v2Components/CommonTestAndPreview/index.js

@@ -3816,7 +3816,7 @@ const CommonTestAndPreview = (props) => {
       header={slideboxHeader}
       handleClose={handleClose}
       show={show}
-      size="size-xl"
+      size="size-l"
       content={(
         <CapSpin
           spinning={isCustomerDataLoading}

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/index.test.js

@@ -479,6 +479,112 @@ describe('UnifiedPreview', () => {
     });
   });
 
+  describe('Channel Routing - LINE', () => {
+    it('should render SmsPreviewContent for LINE channel with string content', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.LINE,
+        content: 'Hello world',
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('sms-preview')).toBeTruthy();
+      expect(screen.getByTestId('sms-content')).toHaveTextContent('Hello world');
+    });
+
+    it('should handle object content with resolvedBody for LINE channel', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.LINE,
+        content: {
+          resolvedBody: 'some text',
+        },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('sms-preview')).toBeTruthy();
+      expect(screen.getByTestId('sms-content')).toHaveTextContent('some text');
+    });
+
+    it('should not crash and render empty content for LINE channel when content is undefined', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.LINE,
+        content: undefined,
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('sms-preview')).toBeTruthy();
+      expect(screen.getByTestId('sms-content')).toHaveTextContent('');
+    });
+
+    it('should not crash and render empty content for LINE channel when content is null', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.LINE,
+        content: null,
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('sms-preview')).toBeTruthy();
+      expect(screen.getByTestId('sms-content')).toHaveTextContent('');
+    });
+
+    it('should render empty content for LINE channel when content is not a string and has no resolvedBody', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.LINE,
+        content: { someOtherField: 'value' },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('sms-preview')).toBeTruthy();
+      expect(screen.getByTestId('sms-content')).toHaveTextContent('');
+    });
+
+    it('should not render the Unknown Channel fallback for LINE channel', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.LINE,
+        content: 'Hello world',
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.queryByText('Unknown Channel')).toBeNull();
+      expect(screen.getByTestId('sms-preview')).toBeTruthy();
+    });
+  });
+
   describe('Channel Routing - WHATSAPP', () => {
     it('should render WhatsAppPreviewContent for WHATSAPP channel', () => {
       const props = {

package/v2Components/CommonTestAndPreview/tests/constants.test.js

@@ -42,6 +42,7 @@ import {
   CLEAR_PREVIEW_ERRORS,
   // Channel Constants
   CHANNELS,
+  CHANNELS_USING_ANDROID_PREVIEW_DEVICE,
   // Device Constants
   DESKTOP,
   MOBILE,
@@ -180,15 +181,22 @@ describe('CommonTestAndPreview Constants', () => {
       expect(CHANNELS.VIBER).toBe('VIBER');
       expect(CHANNELS.ZALO).toBe('ZALO');
       expect(CHANNELS.WEBPUSH).toBe('WEBPUSH');
+      expect(CHANNELS.LINE).toBe('LINE');
     });
 
     it('should have all required channel keys', () => {
-      const expectedChannels = ['EMAIL', 'SMS', 'RCS', 'WHATSAPP', 'INAPP', 'MOBILEPUSH', 'VIBER', 'ZALO', 'WEBPUSH'];
+      const expectedChannels = ['EMAIL', 'SMS', 'RCS', 'WHATSAPP', 'INAPP', 'MOBILEPUSH', 'VIBER', 'ZALO', 'WEBPUSH', 'LINE'];
       expect(Object.keys(CHANNELS)).toEqual(expect.arrayContaining(expectedChannels));
       expect(Object.keys(CHANNELS).length).toBe(expectedChannels.length);
     });
   });
 
+  describe('CHANNELS_USING_ANDROID_PREVIEW_DEVICE', () => {
+    it('should include CHANNELS.LINE', () => {
+      expect(CHANNELS_USING_ANDROID_PREVIEW_DEVICE).toContain(CHANNELS.LINE);
+    });
+  });
+
   describe('Device Constants', () => {
     it('should export all device constants with correct values', () => {
       expect(DESKTOP).toBe('desktop');

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -17,10 +17,11 @@ import { createStructuredSelector } from 'reselect';
 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 CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 // 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 { createCommDefinition, editCommDefinition } from '../../services/api';
 import DynamicControlsStep from './steps/DynamicControlsStep';
 import MessageTypeStep from './steps/MessageTypeStep';
 import CommunicationStrategyStep from './steps/CommunicationStrategyStep';
@@ -35,9 +36,11 @@ 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,
 } from './constants';
 import { getEnabledSteps } from './utils/getEnabledSteps';
 import messages from './messages';
@@ -64,6 +67,21 @@ const hasDeliverySettingForChannel = (channelSetting, channel) => {
   return !!settings && Object.values(settings).some((v) => v !== null && v !== '' && v !== undefined);
 };
 
+// createCommDefinition resolves with the CCS error envelope for 4xx/5xx responses (see api.js request()/checkStatus); duplicate referenceId within the org returns a 409.
+const isDuplicateReferenceIdError = (res) => res?.success === false && res?.status?.message === 'REFERENCE_ID_EXISTS';
+
+/**
+ * CCS requires referenceId on create, while consumers require only the Alert/comm name; generate a stable fallback from the name when referenceId is omitted instead of failing the save.
+ */
+const buildCcsReferenceId = (name) => {
+  const slug = (name || 'COMM')
+    .trim()
+    .toUpperCase()
+    .replace(/[^A-Z0-9]+/g, '_')
+    .replace(/^_+|_+$/g, '') || 'COMM';
+  return `${slug}_${Date.now()}`;
+};
+
 const CommunicationFlow = ({
   config,
   initialData,
@@ -91,6 +109,7 @@ const CommunicationFlow = ({
     };
   });
   const [validationErrors, setValidationErrors] = useState({});
+  const [saveError, setSaveError] = useState(null);
 
   // Memoize enabled steps
   const enabledSteps = useMemo(() => getEnabledSteps(config), [config]);
@@ -150,74 +169,103 @@ 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 name (e.g. CapNotify's Alert Name field) — CommunicationFlow
+      // has no name input of its own, so this is mandatory input from config.context.
+      const name = config?.context?.name;
 
-      const channelContentKeyMap = CHANNEL_CONTENT_KEY_MAP;
-      const channelDeliveryKeyMap = CHANNEL_DELIVERY_KEY_MAP;
+      // CCS create is SINGLE-strategy only this phase (D1); CHANNEL_PRIORITY/AB_TEST
+      // carry multiple content items with 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] || {};
+        const referenceId = config?.context?.referenceId || buildCcsReferenceId(name);
 
-      const contentItems = aggregatedData.contentItems || [];
-      const { dynamicControls = {} } = aggregatedData;
+        const payload = {
+          referenceId,
+          name,
+          description: config?.context?.description || undefined,
+          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` must be spread last in both objects so CCS's normalized enum (e.g. `PUSH`) overrides the UI's internal identifier (e.g. `MOBILEPUSH`) from templateData.
+              ...(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,
-      };
+        // Editing an existing alert (e.g. rejected) uses config.context.existingCommDefinitionId to create a new DRAFT version on the same CommDefinition, preserving its id/referenceId instead of creating a new alert.
+        const { existingCommDefinitionId } = config?.context || {};
 
-      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, {
+              strategyType: payload.strategyType,
+              settings: payload.settings,
+              singleChannelStrategy: payload.singleChannelStrategy,
+            })
+            : await createCommDefinition(payload);
+          if (isDuplicateReferenceIdError(res)) {
+            // Duplicate referenceId in this org — block the save so the user can
+            // change it, rather than silently proceeding without a CCS comm.
+            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 if (data?.id) {
+            ccsCommDefinition = {
+              id: data.id,
+              referenceId: data.referenceId,
+              version: data.version?.version ?? 1,
+              status: data.status,
+            };
           }
         } catch (error) {
-          console.error('[CommunicationFlow] CCS createCentralCommsMetaId error:', error);
+          console.error('[CommunicationFlow] CCS createCommDefinition error:', error);
         }
+      } 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
@@ -317,6 +365,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>

package/v2Containers/CommunicationFlow/CommunicationFlow.scss

@@ -137,7 +137,7 @@
   }
 
   &__footer {
-    padding: $CAP_SPACE_16 0 $CAP_SPACE_08;
+    padding: 3.142rem 0 $CAP_SPACE_08;
   }
 }
 

package/v2Containers/CommunicationFlow/CommunicationFlowCard.js

@@ -19,6 +19,7 @@ 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 CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CommunicationFlow from './index';
 import { CHANNELS, DEFAULT_COMMUNICATION_STRATEGY_OPTIONS, DYNAMIC_CONTROLS_CONFIG } from './constants';
 import {
@@ -41,7 +42,7 @@ const resolveValue = (val) => {
 
 const SENDER_ID_RESOLVERS = {
   [SMS]: (setting) => resolveValue(setting?.gsmSenderId),
-  [EMAIL]: (setting) => resolveValue(setting?.senderEmail),
+  [EMAIL]: (setting) => resolveValue(setting?.senderId),
   [VIBER]: (setting) => resolveValue(setting?.sender) || resolveValue(setting?.gsmSenderId),
   [WHATSAPP]: (setting) => resolveValue(setting?.senderMobNum),
   [RCS]: (setting) => resolveValue(setting?.senderMobNum) || resolveValue(setting?.rcsSender),
@@ -74,6 +75,8 @@ const CommunicationFlowCard = ({
   onChange,
   cap,
   intl,
+  disabled,
+  disabledTooltip,
 }) => {
   const { formatMessage } = intl || {};
   const [showSlideBox, setShowSlideBox] = useState(false);
@@ -91,8 +94,9 @@ const CommunicationFlowCard = ({
   }, [onCancel]);
 
   const handleOpen = useCallback(() => {
+    if (disabled) return;
     setShowSlideBox(true);
-  }, []);
+  }, [disabled]);
 
   const firstItem = savedData?.contentItems?.[0];
   const channelConfig = firstItem
@@ -107,6 +111,11 @@ const CommunicationFlowCard = ({
     const senderIdValue = getSenderIdValue(firstItem, savedData);
     const controls = config?.features?.dynamicControlsData?.controls || DYNAMIC_CONTROLS_CONFIG;
     const dynamicControlKeys = Object.keys(savedData?.dynamicControls || {});
+    // Mirrors getEnabledSteps.js's own gate on this flag (which skips the in-slidebox
+    // DynamicControlsStep) — consumers like CapNotify that set showDynamicControls:
+    // false render their own "Advanced controls" section elsewhere, so this summary
+    // card's right column would otherwise show a redundant, always-empty control list.
+    const showDynamicControls = config?.features?.showDynamicControls !== false;
     const channel = firstItem.channel?.toUpperCase();
     const senderLabel = [WHATSAPP, RCS].includes(channel)
       ? formatMessage(messages.senderNumberLabel)
@@ -120,7 +129,11 @@ const CommunicationFlowCard = ({
             <CapLabel type="label8">Message:</CapLabel>
             <CapLabel type="label2">{strategyLabel}</CapLabel>
             {messageTypeLabel && (
-              <CapLabel type="label1">({messageTypeLabel})</CapLabel>
+              <CapLabel type="label1">
+(
+                {messageTypeLabel}
+)
+              </CapLabel>
             )}
           </CapRow>
         )}
@@ -135,33 +148,41 @@ const CommunicationFlowCard = ({
         bodyStyle={{ padding: 0 }}
       >
         <CapRow gutter={0} className="card-body-row">
-          <CapColumn span={12} className="card-body-left-col">
+          <CapColumn span={showDynamicControls ? 12 : 24} className="card-body-left-col">
             <CapRow type="flex" align="middle" className="channel-header-row">
               <CapIcon type={channelConfig?.iconType || 'sms'} size="s" />
               <CapLabel type="label8">{channelConfig?.label || firstItem.channel}</CapLabel>
               {senderIdValue && (
-                <CapLabel type="label1">({senderLabel}: {senderIdValue})</CapLabel>
+                <CapLabel type="label1">
+(
+                  {senderLabel}
+:
+                  {senderIdValue}
+)
+                </CapLabel>
               )}
             </CapRow>
             {getContentBody(firstItem)}
           </CapColumn>
-          <CapColumn span={12} className="card-body-right-col">
-            <CapLabel type="label8">{formatMessage(messages.dynamicControlsTitle)}</CapLabel>
-            {dynamicControlKeys.map((key) => {
-              const controlConfig = controls.find((c) => c.key === key);
-              if (!controlConfig) return null;
-              return (
-                <CapRow key={key} type="flex" justify="space-between" className="control-row">
-                  <CapLabel type="label2">{controlConfig.label}</CapLabel>
-                  <CapLabel type="label2">
-                    {savedData.dynamicControls[key]
-                      ? formatMessage(messages.yes)
-                      : formatMessage(messages.no)}
-                  </CapLabel>
-                </CapRow>
-              );
-            })}
-          </CapColumn>
+          {showDynamicControls && (
+            <CapColumn span={12} className="card-body-right-col">
+              <CapLabel type="label8">{formatMessage(messages.dynamicControlsTitle)}</CapLabel>
+              {dynamicControlKeys.map((key) => {
+                const controlConfig = controls.find((c) => c.key === key);
+                if (!controlConfig) return null;
+                return (
+                  <CapRow key={key} type="flex" justify="space-between" className="control-row">
+                    <CapLabel type="label2">{controlConfig.label}</CapLabel>
+                    <CapLabel type="label2">
+                      {savedData.dynamicControls[key]
+                        ? formatMessage(messages.yes)
+                        : formatMessage(messages.no)}
+                    </CapLabel>
+                  </CapRow>
+                );
+              })}
+            </CapColumn>
+          )}
         </CapRow>
       </CapCard>
     );
@@ -182,9 +203,17 @@ const CommunicationFlowCard = ({
               <CapImage src={addCreativesIllustration} />
             </CapColumn>
             <CapColumn span={14} className="empty-card-action-col">
-              <CapButton type="secondary" onClick={handleOpen}>
-                {formatMessage(messages.addCreatives)}
-              </CapButton>
+              {disabled && disabledTooltip ? (
+                <CapTooltip title={disabledTooltip}>
+                  <CapButton type="secondary" disabled>
+                    {formatMessage(messages.addCreatives)}
+                  </CapButton>
+                </CapTooltip>
+              ) : (
+                <CapButton type="secondary" onClick={handleOpen} disabled={disabled}>
+                  {formatMessage(messages.addCreatives)}
+                </CapButton>
+              )}
             </CapColumn>
           </CapRow>
         </CapCard>
@@ -196,10 +225,10 @@ const CommunicationFlowCard = ({
         <CapSlideBox
           show={showSlideBox}
           handleClose={handleClose}
-          size="size-xl"
+          size="size-l"
           header={(
             <CapHeader
-              title={formatMessage(messages.addMessage)}
+              title={formatMessage(messages.addContent)}
               handleClose={handleClose}
             />
           )}
@@ -227,6 +256,8 @@ CommunicationFlowCard.propTypes = {
   onChange: PropTypes.func,
   cap: PropTypes.object,
   intl: PropTypes.object.isRequired,
+  disabled: PropTypes.bool, // Disables the "Add creatives" trigger (e.g. until a consumer-required field is filled)
+  disabledTooltip: PropTypes.node, // Shown on hover when disabled is true
 };
 
 CommunicationFlowCard.defaultProps = {
@@ -235,6 +266,8 @@ CommunicationFlowCard.defaultProps = {
   onCancel: null,
   onChange: null,
   cap: null,
+  disabled: false,
+  disabledTooltip: null,
 };
 
 export default injectIntl(CommunicationFlowCard);