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

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>
     );
   },
@@ -94,7 +123,7 @@ describe('ChannelSelectionStep', () => {
     console.log.mockRestore();
   });
 
-  it('empty state: shows content template heading and add-template entry point', () => {
+  it('empty state: shows the Channel heading and add-template entry point', () => {
     const onChange = jest.fn();
     renderStep(
       <ChannelSelectionStep
@@ -104,7 +133,7 @@ describe('ChannelSelectionStep', () => {
       />,
     );
 
-    expect(screen.getAllByText('Content template').length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByText('Channel').length).toBeGreaterThanOrEqual(1);
     expect(screen.getByRole('button', { name: /add creative/i })).toBeInTheDocument();
     expect(screen.queryByTestId('creatives-mock')).not.toBeInTheDocument();
   });
@@ -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,11 +33,17 @@ const DeliverySettingsSection = ({
   deliverySettingsData,
   deliverySetting = {},
   onDeliverySettingChange,
+  onDomainPropertiesLoaded,
+  orgUnitId,
   intl,
 }) => {
   const [showSlidebox, setShowSlidebox] = useState(false);
   const [domainPropertiesData, setDomainPropertiesData] = useState(null);
   const [wecrmViberData, setWecrmViberData] = useState(null);
+  // Drives SenderDetails' loading spinner — true only while the domain-properties
+  // fetch below is actually in flight (previously nothing tracked this, so opening
+  // the slidebox before the background fetch resolved showed a blank panel).
+  const [isFetchingDomains, setIsFetchingDomains] = useState(false);
   const fetchInFlightRef = useRef(false);
   const lastChannelKeyRef = useRef('');
   const { formatMessage } = intl || {};
@@ -87,12 +93,16 @@ const DeliverySettingsSection = ({
     }
     if (fetchInFlightRef.current) return undefined;
     fetchInFlightRef.current = true;
+    setIsFetchingDomains(true);
     lastChannelKeyRef.current = deliveryChannelKey;
     let cancelled = false;
     const fetchData = async () => {
       try {
-        const orgUnitId = loadItem('ouId') || loadItem('orgID');
-        const response = await getDomainProperties(deliveryChannels, orgUnitId);
+        // Prefer the consumer-supplied config.context.ouId (same source Preview-and-test already
+        // uses) so both screens fetch domains for the same org unit; fall back to the logged-in
+        // user's own cached OU only when a consumer hasn't supplied one.
+        const resolvedOrgUnitId = orgUnitId ?? (loadItem('ouId') || loadItem('orgID'));
+        const response = await getDomainProperties(deliveryChannels, resolvedOrgUnitId);
         if (!cancelled) {
           const raw = response?.entity || response;
           // Normalize channel keys to uppercase (API may return Viber, viber, etc.)
@@ -102,11 +112,15 @@ const DeliverySettingsSection = ({
             )
             : raw;
           setDomainPropertiesData(entity);
+          onDomainPropertiesLoaded?.(entity);
         }
       } catch (err) {
         if (!cancelled) setDomainPropertiesData(null);
       } finally {
-        if (!cancelled) fetchInFlightRef.current = false;
+        if (!cancelled) {
+          fetchInFlightRef.current = false;
+          setIsFetchingDomains(false);
+        }
       }
     };
     fetchData();
@@ -115,7 +129,7 @@ const DeliverySettingsSection = ({
       // Do NOT reset fetchInFlightRef here - it would allow duplicate fetches when effect re-runs.
       // fetchInFlightRef is reset in finally when the fetch completes.
     };
-  }, [deliveryEnabled, deliveryChannelKey]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [deliveryEnabled, deliveryChannelKey, orgUnitId]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Fetch WeCRM accounts for VIBER when domainProperties has empty contactInfo
   const needsWecrmViber = deliveryChannels.includes('VIBER');
@@ -301,6 +315,7 @@ const DeliverySettingsSection = ({
           onClose={() => setShowSlidebox(false)}
           channels={deliveryChannels}
           preloadedDomainProperties={entityWithWecrmViber}
+          isLoadingDomainProperties={isFetchingDomains}
           savedFieldValues={parseChannelSettingForDisplay(deliverySetting?.channelSetting)}
           whatsappSourceAccountId={whatsappSourceAccountId}
           whatsappAccountName={whatsappAccNameFromContent || getWhatsappAccountName(entityWithWecrmViber, whatsappSourceAccountId)}
@@ -316,6 +331,8 @@ DeliverySettingsSection.propTypes = {
   deliverySettingsData: PropTypes.object,
   deliverySetting: PropTypes.object,
   onDeliverySettingChange: PropTypes.func,
+  onDomainPropertiesLoaded: PropTypes.func,
+  orgUnitId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   intl: PropTypes.object.isRequired,
 };
 
@@ -324,6 +341,7 @@ DeliverySettingsSection.defaultProps = {
   deliverySettingsData: null,
   deliverySetting: null,
   onDeliverySettingChange: null,
+  orgUnitId: undefined,
 };
 
 export default injectIntl(DeliverySettingsSection);

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

@@ -29,6 +29,7 @@ import {
   getEmailDefaultsForDomainId,
   getSmsDefaultsForDomainId,
   getRcsAccountName,
+  getEmailDomainGatewayMapIdByDomainId,
 } from './deliverySettingsConfig';
 import messages from '../../messages';
 import './SenderDetails.scss';
@@ -41,6 +42,7 @@ const SenderDetails = ({
   onClose,
   channels = [],
   preloadedDomainProperties,
+  isLoadingDomainProperties,
   savedFieldValues,
   onSave,
   whatsappSourceAccountId,
@@ -89,14 +91,15 @@ const SenderDetails = ({
       setLoading(false);
       setError(null);
     } else {
-      // preloadedDomainProperties is not yet available (or the parent's fetch failed).
-      // Show nothing rather than an eternal spinner — the parent controls data availability.
-      setLoading(false);
+      // preloadedDomainProperties is not yet available — either the parent's fetch is still in
+      // flight (show the spinner via isLoadingDomainProperties) or it failed/returned nothing
+      // (show nothing rather than an eternal spinner — the parent controls data availability).
+      setLoading(!!isLoadingDomainProperties);
       setEntity(null);
       setFieldValues({});
       setInitialFieldValues({});
     }
-  }, [show, channels, preloadedDomainProperties, savedFieldValues, fieldConfigs, whatsappAccountName, wabaContext]);
+  }, [show, channels, preloadedDomainProperties, isLoadingDomainProperties, savedFieldValues, fieldConfigs, whatsappAccountName, wabaContext]);
 
   const handleFieldChange = useCallback((fieldKey, value) => {
     setFieldValues((prev) => {
@@ -151,6 +154,11 @@ const SenderDetails = ({
           saveValues.whatsappDomainId = matchedDomain?.domainProperties?.id ?? matchedDomain?.domainId ?? matchedDomain?.id;
         }
       }
+      // Include EMAIL domainGatewayMapId derived from the selected domain for persistence -
+      // CCS needs it alongside domainId, but it's not a user-facing field.
+      if (entity && fieldValues.emailDomain != null && fieldValues.emailDomain !== '') {
+        saveValues.emailDomainGatewayMapId = getEmailDomainGatewayMapIdByDomainId(entity, fieldValues.emailDomain);
+      }
       onSave(saveValues);
     }
     onClose();
@@ -300,6 +308,7 @@ SenderDetails.propTypes = {
   onClose: PropTypes.func.isRequired,
   channels: PropTypes.arrayOf(PropTypes.string),
   preloadedDomainProperties: PropTypes.object,
+  isLoadingDomainProperties: PropTypes.bool,
   savedFieldValues: PropTypes.object,
   onSave: PropTypes.func,
   whatsappSourceAccountId: PropTypes.string,
@@ -310,6 +319,7 @@ SenderDetails.propTypes = {
 SenderDetails.defaultProps = {
   channels: [],
   preloadedDomainProperties: null,
+  isLoadingDomainProperties: false,
   savedFieldValues: null,
   onSave: null,
   whatsappSourceAccountId: '',

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

@@ -153,6 +153,7 @@ function renderSection(props = {}) {
     deliverySettingsData = {},
     deliverySetting = {},
     onDeliverySettingChange,
+    orgUnitId,
   } = props;
   return render(
     <IntlProvider locale="en" messages={{}} defaultLocale="en">
@@ -161,6 +162,7 @@ function renderSection(props = {}) {
         deliverySettingsData={deliverySettingsData}
         deliverySetting={deliverySetting}
         onDeliverySettingChange={onDeliverySettingChange}
+        orgUnitId={orgUnitId}
       />
     </IntlProvider>,
   );
@@ -299,6 +301,15 @@ describe('DeliverySettingsSection — marketer flows', () => {
       await waitFor(() => expect(getDomainProperties).toHaveBeenCalledWith(['SMS'], 'fallback-org'));
     });
 
+    it('prefers the consumer-supplied orgUnitId (config.context.ouId) over local storage — same source Preview-and-test uses, so both fetch the same org unit', async () => {
+      loadItem.mockImplementation((key) => (key === 'ouId' || key === 'orgID' ? 'logged-in-user-ou' : null));
+      getDomainProperties.mockResolvedValue({ entity: apiEntity.SMS });
+
+      renderSection({ contentItems: [{ channel: 'SMS' }], orgUnitId: 'consumer-ou' });
+
+      await waitFor(() => expect(getDomainProperties).toHaveBeenCalledWith(['SMS'], 'consumer-ou'));
+    });
+
     it('accepts the whole response as the entity when `entity` is omitted (some clients)', async () => {
       getDomainProperties.mockResolvedValue(apiEntity.SMS);
 

package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/Tests/SenderDetails.test.js

@@ -9,6 +9,16 @@ import SenderDetails, { parseSenderDetailsFromEntity } from '../SenderDetails';
 import * as deliverySettingsConfig from '../deliverySettingsConfig';
 import { findVisibleSelectOption } from '../../../../../utils/test-utils';
 
+// antd's Spin indicator doesn't render distinctly under jsdom (lazy-loaded), so its
+// `spinning` prop isn't observable via the rendered DOM — mock it to surface the prop directly.
+jest.mock('@capillarytech/cap-ui-library/CapSpin', () => function MockCapSpin({ spinning, children }) {
+  return (
+    <div data-testid="mock-cap-spin" data-spinning={String(!!spinning)}>
+      {children}
+    </div>
+  );
+});
+
 // antd v6 Selects rely on real-time animations + portal mounts; under the full
 // parallel suite (jest -w 90%) the default 5s budget is too tight for
 // click → listbox-paint → option-click chains. Bump per-test timeout.
@@ -83,6 +93,7 @@ const ENTITIES = {
   emailTwoDomains: {
     EMAIL: [
       {
+        id: 'gwmap-a',
         domainProperties: {
           id: 'em-a',
           domainName: 'Mail Alpha',
@@ -101,6 +112,7 @@ const ENTITIES = {
         },
       },
       {
+        id: 'gwmap-b',
         domainProperties: {
           id: 'em-b',
           domainName: 'Mail Beta',
@@ -254,6 +266,22 @@ describe('SenderDetails', () => {
     expect(screen.queryByText('SMS Domain')).not.toBeInTheDocument();
   });
 
+  it('shows a loading spinner when preloaded data is missing and the parent reports the domain fetch is still in flight', () => {
+    renderSenderDetails({
+      preloadedDomainProperties: null,
+      isLoadingDomainProperties: true,
+    });
+    expect(screen.getByTestId('mock-cap-spin')).toHaveAttribute('data-spinning', 'true');
+  });
+
+  it('does not show a loading spinner when preloaded data is missing but the parent is not fetching (e.g. the fetch failed)', () => {
+    renderSenderDetails({
+      preloadedDomainProperties: null,
+      isLoadingDomainProperties: false,
+    });
+    expect(screen.getByTestId('mock-cap-spin')).toHaveAttribute('data-spinning', 'false');
+  });
+
   it('applies savedFieldValues over API defaults for SMS sender', async () => {
     renderSenderDetails({
       preloadedDomainProperties: ENTITIES.smsTwoSenders,
@@ -322,6 +350,29 @@ describe('SenderDetails', () => {
     });
   });
 
+  it('persists emailDomainGatewayMapId derived from the selected email domain on save', async () => {
+    const { onSave } = renderSenderDetails({
+      channels: ['EMAIL'],
+      preloadedDomainProperties: ENTITIES.emailTwoDomains,
+    });
+    const root = document.querySelector('.sender-details');
+    await waitFor(() => expect(within(root).getByText('Mail Alpha')).toBeInTheDocument());
+
+    await openSelectAndChoose(root, 0, 'Mail Beta');
+    await waitFor(() => expect(within(root).getByText('beta@other.com')).toBeInTheDocument());
+
+    const saveBtn = within(root).getByRole('button', { name: /save changes/i });
+    await waitFor(() => expect(saveBtn).not.toBeDisabled());
+    fireEvent.click(saveBtn);
+
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({
+        emailDomain: 'em-b',
+        emailDomainGatewayMapId: 'gwmap-b',
+      }),
+    );
+  });
+
   it('resets email domain row back to the first gateway', async () => {
     renderSenderDetails({
       channels: ['EMAIL'],

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

@@ -438,6 +438,7 @@ describe('deliverySettingsConfig — user-facing flows', () => {
         smsDomain: 'd1',
         smsSenderId: 'g1',
         emailDomain: 'ed',
+        emailDomainGatewayMapId: 'gwmap-1',
         emailSenderId: 'mail@x.com',
         emailSenderName: 'N',
         emailReplyToId: 'r@x.com',
@@ -455,9 +456,10 @@ describe('deliverySettingsConfig — user-facing flows', () => {
         SMS: { domainId: 'd1', gsmSenderId: 'g1' },
         EMAIL: {
           domainId: 'ed',
-          senderEmail: 'mail@x.com',
+          domainGatewayMapId: 'gwmap-1',
+          senderId: 'mail@x.com',
           senderLabel: 'N',
-          senderReplyTo: 'r@x.com',
+          replyToId: 'r@x.com',
         },
         WHATSAPP: { domainId: 'wd', senderMobNum: '+w' },
         RCS: { senderMobNum: '+r', rcsSender: '+r' },
@@ -472,9 +474,10 @@ describe('deliverySettingsConfig — user-facing flows', () => {
         SMS: { domainId: 'd', gsmSenderId: 'g' },
         EMAIL: {
           domainId: 'ed',
-          senderEmail: 'e@e.com',
+          domainGatewayMapId: 'gwmap-2',
+          senderId: 'e@e.com',
           senderLabel: 'L',
-          senderReplyTo: 'r@e.com',
+          replyToId: 'r@e.com',
         },
         WHATSAPP: { senderMobNum: '+w', domainId: 'wid' },
         RCS: { rcsSender: '+r' },
@@ -486,6 +489,10 @@ describe('deliverySettingsConfig — user-facing flows', () => {
         smsDomain: 'd',
         smsSenderId: 'g',
         emailDomain: 'ed',
+        emailDomainGatewayMapId: 'gwmap-2',
+        emailSenderId: 'e@e.com',
+        emailSenderName: 'L',
+        emailReplyToId: 'r@e.com',
         whatsappDomainId: 'wid',
         viberSenderId: 'vx',
       });

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

@@ -181,6 +181,12 @@ const getEmailDomainValue = (entity) => {
   return emailData.domainProperties?.id ?? emailData.domainId ?? emailData.id ?? '';
 };
 
+// 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 ?? '';
+};
+
 /** Domain name for summary display (parseEntityForDisplay) */
 const getEmailDomainNameForDisplay = (entity) => {
   const emailData = getEmailData(entity);
@@ -262,6 +268,8 @@ const getEmailDefaultsForDomain = (domainData) => {
  * context.fieldValues has current form state (e.g. selected emailDomain)
  * Aligned with adiona-ui/cap-campaigns-v2: default = contactInfo item with default:true, or first
  */
+export { getEmailDomainGatewayMapIdByDomainId };
+
 export const getDefaultValueForField = (fieldKey, entity, context = {}) => {
   if (!entity) return '';
   const fieldValues = context?.fieldValues || {};
@@ -574,7 +582,10 @@ export const parseEntityForDisplay = (entity, context = {}) => {
     senderDetails: entity,
     smsSenderId: getSmsSenderIdValue(entity),
     smsDomain: getSmsDomainValue(entity),
+    // 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)),
     emailSenderId: getEmailSenderIdValue(entity),
     viberSenderId: getSenderIdFromContactInfo(entity, 'VIBER'),
     zaloSenderId: getSenderIdFromContactInfo(entity, 'ZALO'),
@@ -600,10 +611,12 @@ export const buildChannelSettingFromFieldValues = (fieldValues = {}) => {
   }
   if (fieldValues.emailDomain != null || fieldValues.emailSenderId != null || fieldValues.emailSenderName != null || fieldValues.emailReplyToId != null) {
     channelSetting.EMAIL = {
-      domainId: fieldValues.emailDomain,
-      senderEmail: fieldValues.emailSenderId,
+      // 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,
       senderLabel: fieldValues.emailSenderName,
-      senderReplyTo: fieldValues.emailReplyToId,
+      replyToId: fieldValues.emailReplyToId,
     };
   }
   if (fieldValues.whatsappSenderNumber != null || fieldValues.whatsappAccount != null) {
@@ -673,9 +686,10 @@ export const parseChannelSettingForDisplay = (channelSetting = {}) => {
   }
   if (channelSetting.EMAIL) {
     out.emailDomain = channelSetting.EMAIL.domainId;
-    out.emailSenderId = channelSetting.EMAIL.senderEmail;
+    out.emailDomainGatewayMapId = channelSetting.EMAIL.domainGatewayMapId;
+    out.emailSenderId = channelSetting.EMAIL.senderId;
     out.emailSenderName = channelSetting.EMAIL.senderLabel;
-    out.emailReplyToId = channelSetting.EMAIL.senderReplyTo;
+    out.emailReplyToId = channelSetting.EMAIL.replyToId;
   }
   if (channelSetting.WHATSAPP) {
     out.whatsappSenderNumber = channelSetting.WHATSAPP.senderMobNum;