@capillarytech/creatives-library 9.0.55-alpha.1 → 9.0.55-alpha.3

package/package.json

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

package/services/api.js

@@ -701,21 +701,13 @@ 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's /comm-definitions). Used by CommunicationFlow's
-// own Save action — separate from the legacy messageMeta functions above,
-// which remain in use by CreativesContainer's own save flow (Cap/sagas.js).
+// 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 given content on an EXISTING
-// CommDefinition (same id/referenceId) — used by CommunicationFlow's edit-mode
-// save (re-editing a rejected alert) instead of createCommDefinition, so the
-// alert keeps its identity rather than becoming a brand-new CommDefinition.
-// Route verified against a real Postman sample against Veyron's own
-// /commdefinition/{id}/edit endpoint.
+// 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));

package/styles/containers/layout/_layoutPage.scss

@@ -77,7 +77,8 @@
     -webkit-flex: 1 1 auto;
     -ms-flex: 1 1 auto;
     flex: 1;
-    height: calc(100vh - 50px);
+    // No height: flex stretch inside `.main` sizes this. A hardcoded
+    // calc(100vh - 50px) under-counted the chrome and overhung it by ~83px.
     overflow: auto;
     color: #333333;
 }

package/translations/en.json

@@ -63,8 +63,8 @@
   "app.v2containers.SmsTrai.Edit.traiEditTitle": "Message",
   "app.v2containers.SmsTrai.Edit.unicodeLabel": "Allow unicode characters",
   "app.v2containers.SmsTrai.Edit.unsupportedTagsValidationError": "Unsupported tags: {unsupportedTags}. Please remove them from this message.",
-  "creatives.components.AccessForbidden.forbiddenDesc": "Please contact your organisation administrator to request access.",
-  "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
+  "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
+  "creatives.components.AccessForbidden.forbiddenHeader": "Access Denied",
   "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
   "creatives.components.CapTagList.Cancel": "Cancel",
   "creatives.components.CapTagList.Ok": "Ok",

package/v2Components/AccessForbidden/_accessForbidden.scss

@@ -1,14 +1,24 @@
-// Access-denied screen: rbac-lock icon + heading + subtext (matches the shared
-// "no access" screen used across Loyalty+ / Org Settings).
-.no-access-icon {
-  font-size: 48px;
-  color: #8c8c8c;
-}
-.no-access-title {
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+.access-denied {
+  width: 100%;
+  // This module's ComponentWrapper has no padding, unlike the other MFEs'.
   margin-top: 16px;
-}
-.no-access-text {
-  margin-top: 8px;
-  color: #6b778c;
-  max-width: 420px;
+  padding-top: $CAP_SPACE_80;
+  text-align: center;
+
+  .access-denied-illustration {
+    width: 20rem;
+    height: 20rem;
+    margin-bottom: $CAP_SPACE_12;
+  }
+
+  .access-denied-title-container {
+    gap: $CAP_SPACE_08;
+    margin-bottom: $CAP_SPACE_08;
+  }
+
+  .access-denied-description {
+    color: $CAP_G04;
+  }
 }

package/v2Components/AccessForbidden/index.js

@@ -1,18 +1,37 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { CapRow, CapHeading, CapIcon } from '@capillarytech/cap-ui-library';
+import {
+  CapRow,
+  CapImage,
+  CapIcon,
+  CapHeading,
+  CapLabel,
+} from '@capillarytech/cap-ui-library';
+import accessDeniedIllustration from '@capillarytech/cap-ui-library/assets/images/createNewIllustration.svg';
 import messages from './messages';
 import './_accessForbidden.scss';
 
 const AccessForbidden = () => (
-  <CapRow type='flex' vertical justify='center' align='middle' className="margin-t-32 text-align-center">
-    <CapIcon type="rbac-lock" className="no-access-icon" />
-    <CapHeading type="h3" className="no-access-title">
-      <FormattedMessage {...messages.forbiddenHeader} />
-    </CapHeading>
-    <CapHeading type="h6" className="no-access-text">
+  <CapRow vertical align="middle" justify="center" className="access-denied">
+    <CapImage
+      src={accessDeniedIllustration}
+      className="access-denied-illustration"
+      alt=""
+    />
+    <CapRow
+      type="flex"
+      align="middle"
+      justify="center"
+      className="access-denied-title-container"
+    >
+      <CapIcon type="rbac-lock" size="m" />
+      <CapHeading type="h2">
+        <FormattedMessage {...messages.forbiddenHeader} />
+      </CapHeading>
+    </CapRow>
+    <CapLabel type="label2" className="access-denied-description">
       <FormattedMessage {...messages.forbiddenDesc} />
-    </CapHeading>
+    </CapLabel>
   </CapRow>
 );
 

package/v2Components/AccessForbidden/messages.js

@@ -5,11 +5,10 @@ const prefix = 'creatives.components.AccessForbidden';
 export default defineMessages({
   forbiddenHeader: {
     id: `${prefix}.forbiddenHeader`,
-    defaultMessage: "You don't have permission to view this page.",
+    defaultMessage: 'Access Denied',
   },
   forbiddenDesc: {
     id: `${prefix}.forbiddenDesc`,
-    defaultMessage:
-      'Please contact your organisation administrator to request access.',
+    defaultMessage: 'This page access has not been provided to you.',
   },
 });

package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js

@@ -140,14 +140,7 @@ const UnifiedPreview = ({
       }
 
       case CHANNELS.LINE:
-        // LINE's real content today is a single text message (CCS's
-        // lineMessageContent.messageBody is a JSON string of LINE's native
-        // messages[] array — see testAndPreviewDataTransform.js's LINE case,
-        // which already resolves it down to plain text before it reaches
-        // here) — reuse the same simple chat-bubble preview as SMS. Rich LINE
-        // message types (image/video/sticker/imageMap/carousel/flex) are NOT
-        // rendered specially yet; they'll show as empty/raw text until this
-        // gets richer LINE-specific handling.
+        // 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 || '')}

package/v2Components/NavigationBar/mfeModuleHeader.config.js

@@ -4,7 +4,7 @@ export const MFE_MODULE_HEADER = {
   header: {
     name: 'app.commonUtils.capUiLibrary.navigationSPA.moduleHeader.creatives.default.name',
     description: 'app.commonUtils.capUiLibrary.navigationSPA.moduleHeader.creatives.default.description',
-    showBorder: false,
+    showBorder: true,
     showSettings: false,
   },
   landingRoutes: [

package/v2Containers/Cap/tests/__snapshots__/index.test.js.snap

@@ -141,8 +141,8 @@ exports[`<Cap /> should render correct component 1`] = `
         "app.v2containers.SmsTrai.Edit.traiEditTitle": "Message",
         "app.v2containers.SmsTrai.Edit.unicodeLabel": "Allow unicode characters",
         "app.v2containers.SmsTrai.Edit.unsupportedTagsValidationError": "Unsupported tags: {unsupportedTags}. Please remove them from this message.",
-        "creatives.components.AccessForbidden.forbiddenDesc": "Please contact your organisation administrator to request access.",
-        "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
+        "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
+        "creatives.components.AccessForbidden.forbiddenHeader": "Access Denied",
         "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
         "creatives.components.CapTagList.Cancel": "Cancel",
         "creatives.components.CapTagList.Ok": "Ok",

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -67,15 +67,11 @@ const hasDeliverySettingForChannel = (channelSetting, channel) => {
   return !!settings && Object.values(settings).some((v) => v !== null && v !== '' && v !== undefined);
 };
 
-// createCommDefinition resolves (rather than rejects) with the CCS error envelope
-// for 4xx/5xx responses — see api.js's request()/checkStatus. A duplicate
-// referenceId within the org comes back as this specific 409.
+// 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; the consumer-supplied Alert/comm name is
- * mandatory but referenceId is optional in every consumer's own form. Generate
- * a stable fallback from the name rather than failing the save.
+ * 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')
@@ -215,19 +211,14 @@ const CommunicationFlow = ({
           singleChannelStrategy: {
             variant: {
               channel,
-              // `channel` spreads LAST in both objects below — contentItem.templateData
-              // (e.g. mobile push) carries the UI's own internal channel identifier
-              // (MOBILEPUSH), which must never win over CCS's normalized enum value
-              // (PUSH) once spread order puts it after.
+              // `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 } } }),
             },
           },
         };
 
-        // Editing an existing (e.g. rejected) alert: config.context.existingCommDefinitionId
-        // opens a new DRAFT version on that SAME CommDefinition instead of creating a
-        // brand-new one, so the alert keeps its id/referenceId across the edit.
+        // 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 || {};
 
         try {

package/v2Containers/CommunicationFlow/CommunicationFlow.scss

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

package/v2Containers/CommunicationFlow/CommunicationFlowCard.js

@@ -111,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)
@@ -124,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>
         )}
@@ -139,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>
     );
@@ -211,7 +228,7 @@ const CommunicationFlowCard = ({
           size="size-l"
           header={(
             <CapHeader
-              title={formatMessage(messages.addMessage)}
+              title={formatMessage(messages.addContent)}
               handleClose={handleClose}
             />
           )}

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

@@ -1000,3 +1000,22 @@ describe('optional chaining safety', () => {
     expect(screen.getByRole('button', { name: /^save$/i })).toBeDisabled();
   });
 });
+
+describe('step dividers', () => {
+  it('renders exactly one divider when the strategy and channel-selection steps render together', () => {
+    const { container } = renderWithFlow({
+      features: {
+        communicationStrategyData: { required: true, options: STRATEGY_OPTIONS },
+        contentTemplateData: { required: true, channels: CHANNELS },
+      },
+      initialData: {
+        communicationStrategy: SINGLE_TEMPLATE,
+        contentItems: [{ channel: 'SMS', templateData: {} }],
+      },
+    });
+    // Only ChannelSelectionStep's own divider (after the content-preview card) should
+    // render — CommunicationStrategyStep no longer emits one of its own, otherwise two
+    // dividers would stack back-to-back with nothing between them.
+    expect(container.querySelectorAll('.ant-divider')).toHaveLength(1);
+  });
+});

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

@@ -202,6 +202,26 @@ describe('CommunicationFlowCard', () => {
       renderCard({ initialData: makeSavedData() });
       expect(screen.getByText('Other controls')).toBeInTheDocument();
     });
+
+    it('hides the Other controls column when config.features.showDynamicControls is false', () => {
+      renderCard({
+        config: { ...baseConfig, features: { showDynamicControls: false } },
+        initialData: makeSavedData({
+          dynamicControls: {
+            sendToControlCustomers: false, sendToBrandPocs: false, useTinyUrl: false, overrideDailyLimit: false,
+          },
+        }),
+      });
+      expect(screen.queryByText('Other controls')).not.toBeInTheDocument();
+    });
+
+    it('still shows the Other controls column when showDynamicControls is unset (Engagement Module default)', () => {
+      renderCard({
+        config: { ...baseConfig, features: {} },
+        initialData: makeSavedData(),
+      });
+      expect(screen.getByText('Other controls')).toBeInTheDocument();
+    });
   });
 
   describe('channel config resolution', () => {

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

@@ -0,0 +1,85 @@
+import {
+  CCS_CONTENT_TRANSFORMS,
+  CCS_CHANNEL_NAME_MAP,
+  CCS_CHANNEL_CONTENT_KEY_MAP,
+  CCS_CHANNEL_DELIVERY_KEY_MAP,
+} from '../constants';
+
+describe('CCS_CONTENT_TRANSFORMS', () => {
+  describe('EMAIL', () => {
+    it('prefers emailBody over emailHtml when both are present', () => {
+      expect(
+        CCS_CONTENT_TRANSFORMS.EMAIL({
+          emailSubject: 'Subject', emailBody: '<p>Body</p>', emailHtml: '<p>Html</p>',
+        }),
+      ).toEqual({ messageSubject: 'Subject', messageBody: '<p>Body</p>' });
+    });
+
+    it('falls back to emailHtml when emailBody is absent', () => {
+      expect(
+        CCS_CONTENT_TRANSFORMS.EMAIL({ emailSubject: 'Subject', emailHtml: '<p>Html</p>' }),
+      ).toEqual({ messageSubject: 'Subject', messageBody: '<p>Html</p>' });
+    });
+
+    it('defaults templateData to {} when called with no argument', () => {
+      expect(CCS_CONTENT_TRANSFORMS.EMAIL()).toEqual({
+        messageSubject: undefined, messageBody: undefined,
+      });
+    });
+  });
+
+  describe('SMS', () => {
+    it('uses messageBody when present', () => {
+      expect(CCS_CONTENT_TRANSFORMS.SMS({ messageBody: 'Hello' })).toEqual({ message: 'Hello' });
+    });
+
+    it('falls back to an empty string when messageBody is absent', () => {
+      expect(CCS_CONTENT_TRANSFORMS.SMS({})).toEqual({ message: '' });
+    });
+
+    it('defaults templateData to {} when called with no argument', () => {
+      expect(CCS_CONTENT_TRANSFORMS.SMS()).toEqual({ message: '' });
+    });
+  });
+
+  describe('WEBPUSH', () => {
+    it('extracts fields from the nested messageContent.content wrapper', () => {
+      expect(
+        CCS_CONTENT_TRANSFORMS.WEBPUSH({
+          messageContent: {
+            content: {
+              messageSubject: 'Subject', accountId: 'acc_1', content: 'Body', offers: [{ id: 1 }],
+            },
+          },
+        }),
+      ).toEqual({ messageSubject: 'Subject', accountId: 'acc_1', content: 'Body' });
+    });
+
+    it('falls back to the flat templateData when messageContent.content is absent', () => {
+      expect(
+        CCS_CONTENT_TRANSFORMS.WEBPUSH({
+          messageSubject: 'Subject', accountId: 'acc_1', content: 'Body',
+        }),
+      ).toEqual({ messageSubject: 'Subject', accountId: 'acc_1', content: 'Body' });
+    });
+
+    it('defaults templateData to {} when called with no argument', () => {
+      expect(CCS_CONTENT_TRANSFORMS.WEBPUSH()).toEqual({
+        messageSubject: undefined, accountId: undefined, content: undefined,
+      });
+    });
+  });
+});
+
+describe('CCS_CHANNEL_NAME_MAP', () => {
+  it('normalizes the UI\'s MOBILEPUSH identifier to CCS\'s PUSH enum value', () => {
+    expect(CCS_CHANNEL_NAME_MAP.MOBILEPUSH).toBe('PUSH');
+  });
+});
+
+describe('CCS_CHANNEL_CONTENT_KEY_MAP / CCS_CHANNEL_DELIVERY_KEY_MAP', () => {
+  it('maps the PUSH channel to its mpush-prefixed content and delivery keys', () => {
+    expect(CCS_CHANNEL_CONTENT_KEY_MAP.PUSH).toBe('mpushMessageContent');
+    expect(CCS_CHANNEL_DELIVERY_KEY_MAP.PUSH).toBe('mpushDeliverySettings');
+  });
+});

package/v2Containers/CommunicationFlow/constants.js

@@ -38,21 +38,15 @@ export const CHANNEL_PRIORITY = 'CHANNEL_PRIORITY';
 export const AB_TEST = 'AB_TEST';
 export const SINGLE_TEMPLATE = 'SINGLE_TEMPLATE';
 
-// CCS CommDefinition strategyType — distinct from SINGLE_TEMPLATE above, which
-// is this UI's own communicationStrategy value. Only SINGLE is supported this
-// phase; CCS create is skipped entirely for CHANNEL_PRIORITY/AB_TEST.
+// CCS CommDefinition strategyType — distinct from SINGLE_TEMPLATE above, which is this UI's own communicationStrategy value. Only SINGLE is supported this phase; CCS create is skipped entirely for CHANNEL_PRIORITY/AB_TEST.
 export const CCS_STRATEGY_TYPE_SINGLE = 'SINGLE';
 
-// Mirrors CCS's SingleChannelStrategy field names exactly (Cap Notify API
-// Design doc sample payloads, verified against real create responses). Kept
-// separate from CHANNEL_CONTENT_KEY_MAP/CHANNEL_DELIVERY_KEY_MAP below, which
-// are the legacy messageMeta payload's keys.
+// Mirrors CCS SingleChannelStrategy field names exactly (per Cap Notify API design samples and real create responses); kept separate from the legacy messageMeta CHANNEL_CONTENT_KEY_MAP/CHANNEL_DELIVERY_KEY_MAP.
 export const CCS_CHANNEL_CONTENT_KEY_MAP = {
   SMS: 'smsMessageContent',
   EMAIL: 'emailMessageContent',
   WHATSAPP: 'whatsappMessageContent',
-  // CCS's channel enum value for mobile push is 'PUSH' (verified against real
-  // create responses), even though the content/delivery keys stay 'mpush*'.
+  // CCS's channel enum value for mobile push is 'PUSH' (verified against real create responses), even though the content/delivery keys stay 'mpush*'.
   PUSH: 'mpushMessageContent',
   INAPP: 'inAppMessageContent',
   ANDROID: 'androidMessageContent',
@@ -64,34 +58,17 @@ export const CCS_CHANNEL_CONTENT_KEY_MAP = {
   RCS: 'rcsMessageContent',
 };
 
-// contentItem.templateData is built by the legacy CreativesContainer content
-// editor (messageMeta-oriented field names) — for channels whose legacy field
-// names don't match CCS's own content schema, transform before sending rather
-// than dumping templateData as-is. EMAIL: legacy stores the subject as
-// `emailSubject` and the HTML body as `emailBody` (see
-// extractContentForPreview.js and CreativesContainer/index.js, where the Bee
-// editor's output is written back into templateData.emailBody — also
-// mirrored by the existing legacy emailMessageContent builder in
-// utils/transformerUtils.js). CCS expects `messageSubject`/`messageBody`.
+// contentItem.templateData uses legacy messageMeta field names, so transform mismatched channel fields before sending to CCS; for EMAIL, map legacy `emailSubject`/`emailBody` to CCS's `messageSubject`/`messageBody`.
 export const CCS_CONTENT_TRANSFORMS = {
   EMAIL: (templateData = {}) => ({
     messageSubject: templateData.emailSubject,
     messageBody: templateData.emailBody || templateData.emailHtml,
   }),
-  // SMS: legacy stores the typed text as `messageBody` (see
-  // CreativesContainer/index.js's getCreativesData SMS case, and the existing
-  // legacy smsMessageContent builder in utils/transformerUtils.js, both of
-  // which read/write this same field) — CCS's schema expects it as `message`
-  // (confirmed against a real CCS response showing smsMessageContent.message
-  // stayed null when messageBody was sent instead).
+  // SMS: legacy stores text as `messageBody`, while CCS expects `message`; map the field explicitly to avoid CCS returning smsMessageContent.message as null.
   SMS: (templateData = {}) => ({
     message: templateData.messageBody || '',
   }),
-  // WEBPUSH: the legacy editor nests the real data under
-  // messageContent.content (see CommunicationFlowCard.js's own comment on
-  // this same wrapping, for the edit-mode case) — extracting it flat here
-  // matches CCS's shape ({ messageSubject, accountId, content }); `offers`
-  // (a legacy-only field) is deliberately dropped, not part of CCS's schema.
+  // WEBPUSH: the legacy editor nests data under messageContent.content; flatten it to CCS's { messageSubject, accountId, content } shape and drop the legacy-only `offers` field.
   WEBPUSH: (templateData = {}) => {
     const inner = templateData.messageContent?.content || templateData;
     return {
@@ -117,19 +94,12 @@ export const CCS_CHANNEL_DELIVERY_KEY_MAP = {
   RCS: 'rcsDeliverySettings',
 };
 
-// The UI's own internal channel identifier for mobile push is 'MOBILEPUSH'
-// (see CreativesContainer/constants.js MOBILE_PUSH), but CCS's channel enum
-// value is 'PUSH' (verified against real create responses — the content/
-// delivery KEYS still say 'mpush*', only the enum VALUE is 'PUSH') —
-// normalize before building the CCS payload. Every other channel identifier
-// matches CCS as-is.
+// The UI uses `MOBILEPUSH`, while CCS uses `PUSH` for the channel enum (verified against real create responses); normalize this value before building the CCS payload, while retaining the `mpush*` content/delivery keys. All other channel identifiers pass through unchanged.
 export const CCS_CHANNEL_NAME_MAP = {
   MOBILEPUSH: 'PUSH',
 };
 
-// Channel config - single source of truth for CreativesContainer and TemplatesV2
-// paneKey: TemplatesV2 defaultPanes object key (for channelsToHide)
-// channelProp: CreativesContainer channel prop (must match pane.key for tab to be active)
+// Channel config — single source of truth for CreativesContainer and TemplatesV2; paneKey is the TemplatesV2 defaultPanes key used by channelsToHide, and channelProp is the CreativesContainer channel prop that must match pane.key for the tab to be active.
 export const CHANNELS = [
   {
     value: 'SMS',

package/v2Containers/CommunicationFlow/messages.js

@@ -64,9 +64,9 @@ export default {
   },
 
   // Slidebox header
-  addMessage: {
-    id: `${prefix}.addMessage`,
-    defaultMessage: 'Add message',
+  addContent: {
+    id: `${prefix}.addContent`,
+    defaultMessage: 'Add content',
   },
 
   // Step prompts

package/v2Containers/CommunicationFlow/steps/ChannelSelectionStep/ChannelSelectionStep.js

@@ -407,10 +407,6 @@ const ChannelSelectionStep = ({
   return (
     <>
       <CapRow className="channel-selection-step">
-        <CapHeading type="h3" className="margin-b-8">
-          {formatMessage(messages.contentTemplate)}
-        </CapHeading>
-
         <CapRow
           useLegacy
           className={`content-template-container ${contentItems?.length > 0 ? 'content-template-container--has-content' : ''}`}

package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/deliverySettingsConfig.js

@@ -181,9 +181,7 @@ const getEmailDomainValue = (entity) => {
   return emailData.domainProperties?.id ?? emailData.domainId ?? emailData.id ?? '';
 };
 
-// CCS's domainGatewayMapId is the domainProperties API's own outer `id`
-// (distinct from `domainProperties.id`, which is the numeric domainId) - the
-// domain-gateway-mapping id for the selected domain entry.
+// CCS's domainGatewayMapId is the domainProperties API's outer `id`, distinct from domainProperties.id (the numeric domainId); it identifies the domain-gateway mapping for the selected domain.
 const getEmailDomainGatewayMapIdByDomainId = (entity, domainId) => {
   const domainEntry = getEmailDomainById(entity, domainId);
   return domainEntry?.id ?? '';
@@ -584,8 +582,7 @@ export const parseEntityForDisplay = (entity, context = {}) => {
     senderDetails: entity,
     smsSenderId: getSmsSenderIdValue(entity),
     smsDomain: getSmsDomainValue(entity),
-    // emailDomain here is the domain NAME (for display only) - buildChannelSettingFromFieldValues
-    // needs the numeric domainId/domainGatewayMapId, sourced separately below.
+    // emailDomain here is the domain NAME (for display only) - buildChannelSettingFromFieldValues needs the numeric domainId/domainGatewayMapId, sourced separately below.
     emailDomain: getEmailDomainNameForDisplay(entity),
     emailDomainId: getEmailDomainValue(entity),
     emailDomainGatewayMapId: getEmailDomainGatewayMapIdByDomainId(entity, getEmailDomainValue(entity)),
@@ -614,9 +611,7 @@ export const buildChannelSettingFromFieldValues = (fieldValues = {}) => {
   }
   if (fieldValues.emailDomain != null || fieldValues.emailSenderId != null || fieldValues.emailSenderName != null || fieldValues.emailReplyToId != null) {
     channelSetting.EMAIL = {
-      // emailDomainId (numeric, from the auto-save-defaults path via parseEntityForDisplay)
-      // takes priority over emailDomain, which is numeric when sourced from SenderDetails'
-      // own field state but a display NAME string when sourced from parseEntityForDisplay.
+      // emailDomainId (numeric, from auto-save defaults via parseEntityForDisplay) takes precedence over emailDomain, which may be a numeric ID in SenderDetails state or a display name from parseEntityForDisplay.
       domainId: fieldValues.emailDomainId ?? fieldValues.emailDomain,
       domainGatewayMapId: fieldValues.emailDomainGatewayMapId,
       senderId: fieldValues.emailSenderId,