@capillarytech/creatives-library 9.0.56-alpha.5 → 9.0.56-alpha.7

package/package.json

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

package/services/api.js

@@ -701,7 +701,7 @@ export const createCentralCommsMetaId = (payload, metaType = TRANSACTION) => {
   return request(url, getAPICallObject('POST', payload, false, false, false, true));
 };
 
-// CCS CommDefinition API, proxied through cap-creatives-api; used by CommunicationFlow's Save, while legacy messageMeta functions remain for CreativesContainer's save flow.
+// Use the CCS CommDefinition API for CommunicationFlow Save; keep legacy messageMeta APIs for CreativesContainer.
 const COMM_DEFINITIONS_PATH = `${API_ENDPOINT}/comm-definitions`;
 
 export const createCommDefinition = (payload) => {

package/utils/templateVarUtils.js

@@ -115,6 +115,22 @@ export const extractTemplateVariables = (templateStr = '', captureRegex) => {
   return variables;
 };
 
+// Reconcile slot-format (`${token}_${index}`) and CCS-format (`"0"`, `"1"`, ...) var maps into the editor's `${token}_${segmentIndex}` slot-key format.
+export const reconcileVarMapToSlotFormat = (rawVarMap = {}, segments = [], regex) => {
+  if (Object.keys(rawVarMap ?? {}).length === 0) return {};
+  const isSlotFormat = Object.keys(rawVarMap).some((key) => key.includes('_'));
+  if (isSlotFormat) return { ...rawVarMap };
+  const slotMap = {};
+  let occurrenceIndex = 0;
+  (segments ?? []).forEach((segment, segmentIndex) => {
+    if (typeof segment === 'string' && (segment.match(regex) || []).length > 0) {
+      slotMap[`${segment}_${segmentIndex}`] = rawVarMap[occurrenceIndex] ?? '';
+      occurrenceIndex += 1;
+    }
+  });
+  return slotMap;
+};
+
 /**
  * Looks up the inner name of a `{{name}}` or `{#name#}` token in a flat key→value map.
  * Handles both exact matches and dot-path suffixes (e.g. `tag.FORMAT_1` → name `FORMAT_1`).

package/utils/tests/templateVarUtils.test.js

@@ -6,8 +6,11 @@ import {
   getFallbackResolvedContentForCardDisplay,
   isDltHashVarToken,
   isAnyTemplateVarToken,
+  reconcileVarMapToSlotFormat,
 } from '../templateVarUtils';
 
+const MUSTACHE_VAR_REGEX = /\{\{\d+\}\}/g;
+
 describe('templateVarUtils', () => {
   describe('splitContentByOrderedVarTokens', () => {
     it('pushes remainder when next token is not found in string', () => {
@@ -201,4 +204,45 @@ describe('templateVarUtils', () => {
       expect(getFallbackResolvedContent('{#a#}', {}, { a: '' })).toBe('{#a#}');
     });
   });
+
+  describe('reconcileVarMapToSlotFormat', () => {
+    it('returns an empty object for an empty/absent rawVarMap', () => {
+      expect(reconcileVarMapToSlotFormat({}, ['{{1}}'], MUSTACHE_VAR_REGEX)).toEqual({});
+      expect(reconcileVarMapToSlotFormat(undefined, ['{{1}}'], MUSTACHE_VAR_REGEX)).toEqual({});
+    });
+
+    it('uses slot-format keys (containing an underscore) as-is', () => {
+      const rawVarMap = { '{{1}}_1': 'test', '{{2}}_3': 'test2' };
+      expect(
+        reconcileVarMapToSlotFormat(rawVarMap, ['x', '{{1}}', 'y', '{{2}}'], MUSTACHE_VAR_REGEX),
+      ).toEqual(rawVarMap);
+    });
+
+    it('remaps CCS-format sequential-occurrence-index keys ("0","1",...) onto this UI\'s own slot keys (regression: CCS sends plain occurrence indices, not this UI\'s `${token}_${arrayIndex}` format, which silently blanked WhatsApp edit fields and desynced the segment array)', () => {
+      // Mirrors the real CCS response: "Hi! Here is your latest tier progress summary with us.\n\nTo
+      // move up to the next tier, you still need to spend {{1}} more,\nearn {{2}} more points, ..."
+      // — varMapped keys "0".."10" map to {{1}}.."{{11}}" in template order.
+      const segments = [
+        'spend ',
+        '{{1}}',
+        ' more,\nearn ',
+        '{{2}}',
+        ' more points',
+      ];
+      const rawVarMap = { 0: 'dasda', 1: 'dasd' };
+      expect(reconcileVarMapToSlotFormat(rawVarMap, segments, MUSTACHE_VAR_REGEX)).toEqual({
+        '{{1}}_1': 'dasda',
+        '{{2}}_3': 'dasd',
+      });
+    });
+
+    it('defaults a missing occurrence-index entry to an empty string rather than dropping the slot', () => {
+      const segments = ['a ', '{{1}}', ' b ', '{{2}}'];
+      const rawVarMap = { 0: 'filled' }; // no entry for occurrence index 1
+      expect(reconcileVarMapToSlotFormat(rawVarMap, segments, MUSTACHE_VAR_REGEX)).toEqual({
+        '{{1}}_1': 'filled',
+        '{{2}}_3': '',
+      });
+    });
+  });
 });

package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js

@@ -140,8 +140,7 @@ const UnifiedPreview = ({
       }
 
       case CHANNELS.LINE:
-        // LINE carries a single plain-text message today, so it reuses the SMS chat-bubble
-        // preview. Rich types (image/video/sticker/imageMap/carousel/flex) aren't rendered yet.
+        // LINE currently supports plain text only, so reuse the SMS bubble preview; rich message types are not rendered yet.
         return (
           <SmsPreviewContent
             content={typeof content === 'string' ? content : (content?.resolvedBody || '')}

package/v2Components/CommonTestAndPreview/index.js

@@ -209,7 +209,7 @@ const CommonTestAndPreview = (props) => {
     wecrmAccounts = [],
     isLoadingSenderDetails = false,
     orgUnitId = -1,
-    // notify/ui only: { commDefinitionId, referenceId } — routes "Send test" to CCS's send/transaction endpoint.
+    // notify/ui only:{commDefinitionId, referenceId} routes "Send test" to CCS's send/transaction endpoint.
     ccsSendTransaction,
     // Email-specific props
     beeInstance,
@@ -3624,14 +3624,11 @@ const CommonTestAndPreview = (props) => {
       setIsCustomerDataLoading(false);
     }
   };
-  
+
   /**
    * Handle send test message
    */
-  // notify/ui: send the test through CCS's own send/transaction endpoint against the alert's
-  // real CommDefinition, instead of the legacy createMessageMeta/sendTestMessage flow below.
-  // Dispatched via the same action/saga pattern as every other API call in this component,
-  // rather than calling Api.sendTransactionalComm directly.
+  // notify/ui sends tests via CCS's CommDefinition send/transaction endpoint using the standard action/saga flow, not the legacy messageMeta flow.
   const handleCcsSendTestMessage = () => {
     const allUserIds = [];
     selectedTestEntities.forEach((entityId) => {

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -221,6 +221,10 @@ const CommunicationFlow = ({
               singleChannelStrategy,
             })
             : await createCommDefinition(payload);
+          if (res?.isError) {
+            setSaveError(formatMessage(messages.genericSaveError));
+            return;
+          }
           if (isDuplicateReferenceIdError(res)) {
             setSaveError(formatMessage(messages.duplicateReferenceIdError));
             return;
@@ -234,6 +238,9 @@ const CommunicationFlow = ({
                 version: data.version?.version ?? data.version ?? 1,
                 status: data.status,
               };
+            } else {
+              setSaveError(formatMessage(messages.genericSaveError));
+              return;
             }
           } else if (data?.id) {
             ccsCommDefinition = {
@@ -242,9 +249,14 @@ const CommunicationFlow = ({
               version: data.version?.version ?? 1,
               status: data.status,
             };
+          } else {
+            setSaveError(formatMessage(messages.genericSaveError));
+            return;
           }
         } catch (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');

package/v2Containers/CommunicationFlow/CommunicationFlow.scss

@@ -128,16 +128,7 @@
 }
 
 .communication-flow-container {
-  // Anchors the Save footer to the bottom of the slidebox's scrollable content
-  // area regardless of how much step content is above it. <CapRow useLegacy>
-  // carries cap-ui-library's `.ant-row-legacy` rule (`display: block !important`),
-  // which silently defeats a plain `display:flex`/`min-height` here unless the
-  // selector is compounded with `.ant-row-legacy` and marked `!important` too.
-  // Deliberately position-based, not flex + margin-top: auto — a flex version
-  // makes this element (and its .ant-row-legacy children) a flex container, and
-  // flexbox's default align-items: stretch leaks into deeply nested descendants
-  // (e.g. ChannelSelectionStep's fixed-width empty-state card), stretching them
-  // to fill the container instead of keeping their own size.
+  // 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;
@@ -148,10 +139,7 @@
     margin: $CAP_SPACE_32 0;
   }
 
-  // CommunicationStrategyStep's own trailing divider is hidden until content
-  // exists (no dangling line above an empty "Add creative" state), but the gap
-  // it would have provided (.step-divider's margin) must stay — otherwise the
-  // section sits flush against the Channel card in the empty state.
+  // 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;
   }

package/v2Containers/CommunicationFlow/CommunicationFlowCard.js

@@ -166,7 +166,7 @@ const CommunicationFlowCard = ({
             <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);
+                const controlConfig = controls.find((control) => control.key === key);
                 if (!controlConfig) return null;
                 return (
                   <CapRow key={key} type="flex" justify="space-between" className="control-row">

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

@@ -693,7 +693,7 @@ describe('handleSave — CCS flow', () => {
     expect(createCommDefinition).not.toHaveBeenCalled();
   });
 
-  it('still calls onSave (without ccsCommDefinition) when createCommDefinition rejects', async () => {
+  it('blocks save and shows a generic error when createCommDefinition rejects (regression: this used to silently call onSave without ccsCommDefinition and no user-facing feedback — Send for approval would then just be disabled with zero explanation why)', async () => {
     createCommDefinition.mockRejectedValue(new Error('Network error'));
     const onSave = jest.fn();
     renderWithFlow({
@@ -705,8 +705,40 @@ describe('handleSave — CCS flow', () => {
 
     await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
 
-    await waitFor(() => expect(onSave).toHaveBeenCalledTimes(1));
-    expect(onSave).toHaveBeenCalledWith(expect.not.objectContaining({ ccsCommDefinition: expect.anything() }));
+    await waitFor(() => expect(screen.getByText('Something went wrong while saving your content. Please try again.')).toBeInTheDocument());
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it('blocks save and shows a generic error when createCommDefinition resolves with a network-level failure (api.js resolves isError instead of rejecting on a 401/403/etc)', async () => {
+    createCommDefinition.mockResolvedValue({ isError: true, status: 401 });
+    const onSave = jest.fn();
+    renderWithFlow({
+      features: {},
+      config: ccsConfig,
+      initialData: { contentItems: [{ channel: 'SMS', templateData: {} }] },
+      onSave,
+    });
+
+    await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
+
+    await waitFor(() => expect(screen.getByText('Something went wrong while saving your content. Please try again.')).toBeInTheDocument());
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it('blocks save and shows a generic error when createCommDefinition resolves with no usable data (e.g. missing id)', async () => {
+    createCommDefinition.mockResolvedValue({ response: { data: {} } });
+    const onSave = jest.fn();
+    renderWithFlow({
+      features: {},
+      config: ccsConfig,
+      initialData: { contentItems: [{ channel: 'SMS', templateData: {} }] },
+      onSave,
+    });
+
+    await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
+
+    await waitFor(() => expect(screen.getByText('Something went wrong while saving your content. Please try again.')).toBeInTheDocument());
+    expect(onSave).not.toHaveBeenCalled();
   });
 
   it('blocks save and shows an error when createCommDefinition resolves with a duplicate REFERENCE_ID_EXISTS conflict', async () => {

package/v2Containers/CommunicationFlow/constants.js

@@ -99,9 +99,7 @@ export const CCS_CHANNEL_NAME_MAP = {
   MOBILEPUSH: 'PUSH',
 };
 
-// Channel config — single source of truth for CreativesContainer and TemplatesV2.
-// paneKey: TemplatesV2 defaultPanes key used by channelsToHide.
-// channelProp: CreativesContainer channel prop that must match pane.key for the tab to be active.
+// Channel config is the shared source of truth: paneKey maps TemplatesV2 panes, channelProp maps CreativesContainer tabs.
 export const CHANNELS = [
   {
     value: 'SMS',

package/v2Containers/CommunicationFlow/messages.js

@@ -367,4 +367,8 @@ export default {
     id: `${prefix}.duplicateReferenceIdError`,
     defaultMessage: 'This reference ID is already in use in your organization. Please use a different reference ID.',
   },
+  genericSaveError: {
+    id: `${prefix}.genericSaveError`,
+    defaultMessage: 'Something went wrong while saving your content. Please try again.',
+  },
 };

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

@@ -64,6 +64,7 @@ const ChannelSelectionStep = ({
   const [showIncentivesMenuMap, setShowIncentivesMenuMap] = useState({});
   const [showTestAndPreview, setShowTestAndPreview] = useState(false);
   const [testAndPreviewItem, setTestAndPreviewItem] = useState(null);
+  const [domainPropertiesData, setDomainPropertiesData] = useState(null);
   const { formatMessage } = intl || {};
 
   // Available channels (filter out hidden ones)
@@ -77,6 +78,19 @@ const ChannelSelectionStep = ({
     const selectedChannelLowerCase = selectedChannel?.toLowerCase();
     return CHANNELS.find((channel) => channel?.value?.toLowerCase() === selectedChannelLowerCase || channel?.channelProp === selectedChannelLowerCase) || null;
   }, [selectedChannel]);
+  
+  const editingZaloHostName = useMemo(() => {
+    if (!editingContentId) return '';
+    const editingItem = contentItems.find((c) => c.contentId === editingContentId);
+    if (editingItem?.channel?.toUpperCase() !== ZALO) return '';
+    const accountId = editingItem?.templateData?.accountId;
+    if (!accountId) return '';
+    const zaloDomains = domainPropertiesData?.ZALO || [];
+    const matchedDomain = zaloDomains.find(
+      (domain) => String(domain?.domainProperties?.connectionProperties?.oa_id) === String(accountId),
+    );
+    return matchedDomain?.domainProperties?.hostName || '';
+  }, [editingContentId, contentItems, domainPropertiesData]);
   /**
    * Handle CreativesContainer close
    */
@@ -467,6 +481,7 @@ const ChannelSelectionStep = ({
               deliverySettingsData={deliverySettingsData}
               deliverySetting={value?.deliverySetting}
               onDeliverySettingChange={(deliverySetting) => onChange({ deliverySetting })}
+              onDomainPropertiesLoaded={setDomainPropertiesData}
               intl={intl}
             />
           )}
@@ -487,14 +502,13 @@ const ChannelSelectionStep = ({
           getCreativesData={handleCreativesData}
           handleCloseCreatives={handleCloseCreatives}
           isFullMode={false}
-          messageDetails={{ type: 'default' }}
+          hostName={editingZaloHostName}
+          messageDetails={{ type: (config?.context?.module || '').toLowerCase() || 'default' }}
+          location={{ query: { type: 'embedded', module: config?.context?.module } }}
           templateData={editingContentId ? (() => {
             const saved = contentItems.find((c) => c.contentId === editingContentId)?.templateData;
-            // getTemplateData in CreativesContainer reads 'content', 'accountId', 'messageSubject' at
-            // top-level and needs 'type' for SlideBoxContent to set isEditWebPush. Our stored WEBPUSH
-            // templateData wraps those fields inside messageContent.content, so extract them here.
             if (saved?.channel?.toUpperCase() === WEBPUSH && saved?.messageContent?.content) {
-              return { ...saved.messageContent.content, type: WEBPUSH };
+              return { ...saved.messageContent.content, type: WEBPUSH, channel: WEBPUSH };
             }
             return saved;
           })() : null}

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

@@ -37,9 +37,21 @@ jest.mock('../../../../CreativesContainer', () => function MockCreativesContaine
   handleCloseCreatives,
   creativesMode,
   channel,
+  templateData,
+  hostName,
+  messageDetails,
+  location,
 }) {
   return (
-    <div data-testid="creatives-mock" data-creatives-mode={creativesMode} data-creatives-channel={channel}>
+    <div
+      data-testid="creatives-mock"
+      data-creatives-mode={creativesMode}
+      data-creatives-channel={channel}
+      data-template-data={JSON.stringify(templateData)}
+      data-host-name={hostName}
+      data-message-details={JSON.stringify(messageDetails)}
+      data-location={JSON.stringify(location)}
+    >
       <button
         type="button"
         data-testid="creatives-save"
@@ -62,7 +74,7 @@ jest.mock('../../../../CreativesContainer', () => function MockCreativesContaine
 });
 
 jest.mock('../../DeliverySettingsStep', () => ({
-  DeliverySettingsSection: function MockDeliverySettings({ onDeliverySettingChange }) {
+  DeliverySettingsSection: function MockDeliverySettings({ onDeliverySettingChange, onDomainPropertiesLoaded }) {
     return (
       <div data-testid="delivery-settings-section">
         <button
@@ -72,6 +84,23 @@ jest.mock('../../DeliverySettingsStep', () => ({
         >
           Apply delivery
         </button>
+        <button
+          type="button"
+          data-testid="domain-properties-loaded"
+          onClick={() => onDomainPropertiesLoaded?.({
+            ZALO: [{
+              id: 267284,
+              domainProperties: {
+                id: 4977,
+                domainName: 'Gapit_Automation',
+                connectionProperties: { oa_id: '300086756699856746' },
+                hostName: 'gapitzalotrans',
+              },
+            }],
+          })}
+        >
+          Load domain properties
+        </button>
       </div>
     );
   },
@@ -1683,6 +1712,149 @@ describe('ChannelSelectionStep', () => {
     expect(screen.getByTestId('creatives-mock')).toHaveAttribute('data-creatives-mode', 'edit');
   });
 
+  it('edit WEBPUSH item includes `channel: WEBPUSH` (not just `type`) in the unwrapped templateData (regression: CreativesContainer.getTemplateData\'s switch reads templateData.channel, not templateData.type — without it the switch never matched WEBPUSH and the edit screen rendered blank below its header)', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'wp-edit-channel',
+            channel: 'WEBPUSH',
+            templateData: {
+              channel: 'WEBPUSH',
+              messageContent: {
+                content: { messageSubject: 'dasd', accountId: 13792, content: { title: 'dasd', message: 'dasd' } },
+              },
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Edit'));
+    await waitFor(() => expect(screen.getByTestId('creatives-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    const passedTemplateData = JSON.parse(screen.getByTestId('creatives-mock').getAttribute('data-template-data'));
+    expect(passedTemplateData.channel).toBe('WEBPUSH');
+    expect(passedTemplateData.type).toBe('WEBPUSH');
+    expect(passedTemplateData.messageSubject).toBe('dasd');
+    expect(passedTemplateData.accountId).toBe(13792);
+  });
+
+  // ── ZALO edit: hostName resolved from domainProperties ────────────────────────
+
+  it('resolves a Zalo item\'s hostName from the domainProperties fetch by matching accountId to connectionProperties.oa_id, and passes it to CreativesContainer (regression: CCS\'s zaloMessageContent never carries hostName, and without it Zalo/index.js\'s getTemplateInfoById guard never passes, so the edit view never loads live template data)', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'zalo-edit',
+            channel: 'ZALO',
+            templateData: {
+              channel: 'ZALO',
+              accountId: '300086756699856746',
+              accountName: 'gapit_automation_account',
+              token: 'zalo-token',
+              templateConfigs: { id: '630142', name: '1592_Chí Linh_D1' },
+            },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+        deliverySettingsData={{ required: false }}
+      />,
+    );
+    await userEvent.click(screen.getByTestId('domain-properties-loaded'));
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Edit'));
+    await waitFor(() => expect(screen.getByTestId('creatives-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(screen.getByTestId('creatives-mock')).toHaveAttribute('data-host-name', 'gapitzalotrans');
+  });
+
+  it('resolves an empty hostName for a Zalo item when no matching domainProperties account is loaded', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{
+          contentItems: [{
+            contentId: 'zalo-edit-no-match',
+            channel: 'ZALO',
+            templateData: { channel: 'ZALO', accountId: 'unmatched-account-id' },
+          }],
+        }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+        deliverySettingsData={{ required: false }}
+      />,
+    );
+    await userEvent.click(screen.getByLabelText('Show more content options icon'));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('Edit'));
+    await waitFor(() => expect(screen.getByTestId('creatives-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+    expect(screen.getByTestId('creatives-mock')).toHaveAttribute('data-host-name', '');
+  });
+
+  // ── Tag-context pass-through (config.context.module) ──────────────────────────
+
+  it('passes config.context.module through to messageDetails.type (lowercased) and location.query.module, unchanged, for tag-fetch scoping (regression: this used to be hardcoded to messageDetails={{type: \'default\'}} with no location prop at all, so every consumer\'s tag-fetch was scoped generically instead of per-consumer)', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{ contentItems: [] }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+        config={{ context: { module: 'CAMPAIGNS' } }}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('SMS'));
+    await waitFor(() => expect(screen.getByTestId('creatives-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+
+    const mock = screen.getByTestId('creatives-mock');
+    expect(JSON.parse(mock.getAttribute('data-message-details'))).toEqual({ type: 'campaigns' });
+    expect(JSON.parse(mock.getAttribute('data-location'))).toEqual({
+      query: { type: 'embedded', module: 'CAMPAIGNS' },
+    });
+  });
+
+  it('passes through whatever module value a coupons/cartPromotions-style config sets, with no special-casing on our end', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{ contentItems: [] }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+        config={{ context: { module: 'coupons' } }}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('SMS'));
+    await waitFor(() => expect(screen.getByTestId('creatives-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+
+    const mock = screen.getByTestId('creatives-mock');
+    expect(JSON.parse(mock.getAttribute('data-message-details'))).toEqual({ type: 'coupons' });
+    expect(JSON.parse(mock.getAttribute('data-location'))).toEqual({
+      query: { type: 'embedded', module: 'coupons' },
+    });
+  });
+
+  it('falls back to messageDetails={{type: "default"}} when config.context.module is absent (unset consumers keep prior behavior)', async () => {
+    renderStep(
+      <ChannelSelectionStep
+        value={{ contentItems: [] }}
+        onChange={jest.fn()}
+        channels={CHANNELS}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: /add creative/i }));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument(), WAIT_OPTIONS);
+    await userEvent.click(within(screen.getByRole('menu')).getByText('SMS'));
+    await waitFor(() => expect(screen.getByTestId('creatives-mock')).toBeInTheDocument(), WAIT_OPTIONS);
+
+    expect(JSON.parse(screen.getByTestId('creatives-mock').getAttribute('data-message-details'))).toEqual({ type: 'default' });
+  });
+
   // ── FTP channel filtered from dropdown ───────────────────────────────────────
 
   it('FTP channel is filtered out of the channel dropdown', async () => {

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

@@ -33,6 +33,7 @@ const DeliverySettingsSection = ({
   deliverySettingsData,
   deliverySetting = {},
   onDeliverySettingChange,
+  onDomainPropertiesLoaded,
   intl,
 }) => {
   const [showSlidebox, setShowSlidebox] = useState(false);
@@ -102,6 +103,7 @@ const DeliverySettingsSection = ({
             )
             : raw;
           setDomainPropertiesData(entity);
+          onDomainPropertiesLoaded?.(entity);
         }
       } catch (err) {
         if (!cancelled) setDomainPropertiesData(null);
@@ -316,6 +318,7 @@ DeliverySettingsSection.propTypes = {
   deliverySettingsData: PropTypes.object,
   deliverySetting: PropTypes.object,
   onDeliverySettingChange: PropTypes.func,
+  onDomainPropertiesLoaded: PropTypes.func,
   intl: PropTypes.object.isRequired,
 };
 

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

@@ -181,7 +181,7 @@ const getEmailDomainValue = (entity) => {
   return emailData.domainProperties?.id ?? emailData.domainId ?? emailData.id ?? '';
 };
 
-// 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.
+// CCS domainGatewayMapId is the domainProperties API's outer id, not domainProperties.id; it identifies the selected domain's gateway mapping.
 const getEmailDomainGatewayMapIdByDomainId = (entity, domainId) => {
   const domainEntry = getEmailDomainById(entity, domainId);
   return domainEntry?.id ?? '';
@@ -582,7 +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 is the display-only domain name; buildChannelSettingFromFieldValues needs the numeric domainId/domainGatewayMapId sourced separately.
     emailDomain: getEmailDomainNameForDisplay(entity),
     emailDomainId: getEmailDomainValue(entity),
     emailDomainGatewayMapId: getEmailDomainGatewayMapIdByDomainId(entity, getEmailDomainValue(entity)),
@@ -611,7 +611,7 @@ export const buildChannelSettingFromFieldValues = (fieldValues = {}) => {
   }
   if (fieldValues.emailDomain != null || fieldValues.emailSenderId != null || fieldValues.emailSenderName != null || fieldValues.emailReplyToId != null) {
     channelSetting.EMAIL = {
-      // 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.
+      // Prefer numeric emailDomainId from auto-save defaults; emailDomain may be either a SenderDetails ID or display name.
       domainId: fieldValues.emailDomainId ?? fieldValues.emailDomain,
       domainGatewayMapId: fieldValues.emailDomainGatewayMapId,
       senderId: fieldValues.emailSenderId,

package/v2Containers/CreativesContainer/index.js

@@ -412,7 +412,7 @@ export class Creatives extends React.Component {
     this.setState({ isGetFormData: false });
   };
 
-  mapCarouselDataToCreatives = (cards) => cards.map((card) => {
+  mapCarouselDataToCreatives = (cards) => (cards || []).map((card) => {
     const {
       cardVarMapped, bodyTemplate, media, buttons, mediaType,
     } = card || {};

package/v2Containers/CreativesContainer/tests/index.test.js

@@ -10,6 +10,7 @@ const {
   whatsappGetCreativeData2,
   whatsappGetTemplateData1,
   whatsappGetTemplateData2,
+  whatsappGetTemplateDataNullCards,
   rcsTemplates,
   rcsEditTemplateData,
   smsEditTemplateData,
@@ -77,6 +78,17 @@ describe('Test SlideBoxContent container', () => {
     expect(handleCloseCreatives).toHaveBeenCalledWith(true);
   });
 
+  it('does not throw when templateConfigs.cards is explicitly null (regression: CCS sends null rather than omitting the field on non-carousel WhatsApp templates, and mapCarouselDataToCreatives called .map() straight off it)', () => {
+    expect(() =>
+      renderFunction(
+        'WHATSAPP',
+        'editTemplate',
+        whatsappTemplates,
+        whatsappGetTemplateDataNullCards,
+      ),
+    ).not.toThrow();
+  });
+
   it('it should clear the url, on channel change from new whatsapp to another', () => {
     renderFunction(
       'WHATSAPP',

package/v2Containers/Whatsapp/index.js

@@ -119,7 +119,7 @@ import { ANDROID } from '../../v2Components/CommonTestAndPreview/constants';
 import CapImageUpload from '../../v2Components/CapImageUpload';
 import TagList from '../TagList';
 import { validateTags } from '../../utils/tagValidations';
-import { splitContentByOrderedVarTokens } from '../../utils/templateVarUtils';
+import { splitContentByOrderedVarTokens, reconcileVarMapToSlotFormat } from '../../utils/templateVarUtils';
 import { capitalizeString } from '../../utils/Formatter';
 import CapWhatsappCTA from '../../v2Components/CapWhatsappCTA';
 import {
@@ -504,7 +504,8 @@ export const Whatsapp = (props) => {
     if (templateHeaderArray?.length !== 0) {
       let clonedVarMap = {};
       if (!isEmpty(varMap)) {
-        clonedVarMap = cloneDeep(varMap);
+        // Reconcile CCS sequential varMapped indices to the UI’s `${token}_${index}` slot keys so values map to the correct segments.
+        clonedVarMap = reconcileVarMapToSlotFormat(varMap, templateHeaderArray, regex);
       } else {
         templateHeaderArray?.forEach((headerValue, i) => {
           if (headerValue?.match(regex)?.length > 0) {
@@ -562,7 +563,9 @@ export const Whatsapp = (props) => {
     if (tempMsgArray.length !== 0) {
       const { varMapped = {} } = editContent;
       if (!isEmpty(varMapped)) {
-        varMap = cloneDeep(varMapped);
+        // CCS's varMapped can use plain sequential occurrence indices ("0","1",...)
+        // rather than this UI's own `${token}_${index}` slot keys
+        varMap = reconcileVarMapToSlotFormat(varMapped, tempMsgArray, validVarRegex);
       } else {
         //computing and setting varMap for first edit
         for (let i = 0; i < tempMsgArray.length; i += 1) {

package/v2Containers/mockdata.js

@@ -1111,6 +1111,31 @@ export default {
     },
     accountName: "WhatsappAccount",
   },
+  // CCS sends an explicit `cards: null` (not omitted) for a non-carousel WhatsApp
+  // template — regression fixture for a crash reading `.map` off null.
+  whatsappGetTemplateDataNullCards: {
+    channel: "WHATSAPP",
+    storeType: "REGISTERED_STORE",
+    accountId: 12721,
+    messagePartsCount: 1,
+    messageBody: "Hey test, this is a plain WhatsApp template with no carousel.",
+    templateConfigs: {
+      name: "creatives_whatsapp6",
+      language: "en",
+      varMapped: {
+        "{{1}}_1": "test",
+      },
+      template: "Hey {{1}}, this is a plain WhatsApp template with no carousel.",
+      id: "creatives_whatsapp6",
+      category: "MARKETING",
+      buttonType: "NONE",
+      buttons: null,
+      mediaType: "TEXT",
+      whatsappMedia: null,
+      cards: null,
+    },
+    accountName: "WhatsappAccount",
+  },
   whatsappGetCreativeData1: {
     value: {
       name: "creatives_whatsapp6",