@capillarytech/creatives-library 9.0.56-alpha.6 → 9.0.56-alpha.8

package/v2Containers/CommunicationFlow/CommunicationFlowCard.js

@@ -6,7 +6,7 @@
  * - Configured state: shows a two-column CapCard with pen icon, channel preview (left), dynamic controls (right)
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 import { CAP_G09 } from '@capillarytech/cap-ui-library/styled/variables';
@@ -82,6 +82,14 @@ const CommunicationFlowCard = ({
   const [showSlideBox, setShowSlideBox] = useState(false);
   const [savedData, setSavedData] = useState(initialData || null);
 
+  // On a hard reload of an edit page, initialData is available but savedData is not yet set.
+  // This effect ensures that savedData is initialized from initialData in that case.
+  useEffect(() => {
+    if (initialData && !savedData) {
+      setSavedData(initialData);
+    }
+  }, [initialData]);
+
   const handleSave = useCallback((data) => {
     setSavedData(data);
     setShowSlideBox(false);
@@ -166,7 +174,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/Tests/CommunicationFlowCard.test.js

@@ -652,4 +652,62 @@ describe('CommunicationFlowCard', () => {
       expect(screen.getByText('Message:')).toBeInTheDocument();
     });
   });
+
+  describe('async initialData (edit page hard reload)', () => {
+    // On a hard reload of an edit page, the consumer's own by-id fetch hasn't
+    // resolved at first mount, so initialData starts as null and arrives a
+    // render or two later. savedData must pick it up then, not just at mount.
+    it('shows the summary card once initialData arrives after mount, instead of staying stuck on the empty "Add creatives" state', () => {
+      const { rerender } = render(
+        <IntlProvider locale="en" messages={{}} defaultLocale="en">
+          <CommunicationFlowCard
+            config={baseConfig}
+            initialData={null}
+            onSave={jest.fn()}
+            onCancel={jest.fn()}
+            onChange={jest.fn()}
+            cap={{}}
+          />
+        </IntlProvider>,
+      );
+      expect(screen.getByText('Add creatives')).toBeInTheDocument();
+
+      rerender(
+        <IntlProvider locale="en" messages={{}} defaultLocale="en">
+          <CommunicationFlowCard
+            config={baseConfig}
+            initialData={makeSavedData()}
+            onSave={jest.fn()}
+            onCancel={jest.fn()}
+            onChange={jest.fn()}
+            cap={{}}
+          />
+        </IntlProvider>,
+      );
+      expect(screen.getByText('Message:')).toBeInTheDocument();
+      expect(screen.queryByText('Add creatives')).not.toBeInTheDocument();
+    });
+
+    it('does not clobber content the user already saved locally when a later render passes a different initialData', () => {
+      const { rerender } = renderCard({ initialData: null });
+      fireEvent.click(screen.getByText('Add creatives'));
+      fireEvent.click(screen.getByTestId('flow-save'));
+      expect(screen.getByText('Message:')).toBeInTheDocument();
+
+      rerender(
+        <IntlProvider locale="en" messages={{}} defaultLocale="en">
+          <CommunicationFlowCard
+            config={baseConfig}
+            initialData={makeSavedData({ contentItems: [{ channel: 'EMAIL', templateData: {} }] })}
+            onSave={jest.fn()}
+            onCancel={jest.fn()}
+            onChange={jest.fn()}
+            cap={{}}
+          />
+        </IntlProvider>,
+      );
+      // Locally-saved SMS content must survive; the later initialData prop must not overwrite it.
+      expect(screen.getByText('SMS')).toBeInTheDocument();
+    });
+  });
 });

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

@@ -251,6 +251,7 @@ const ChannelSelectionStep = ({
   };
 
   const handleChannelsVisibleChange = (visible) => {
+    if (visible && renderChannelDropdownOverlay() === null) return;
     setShowChannelsMenu(visible);
   };
 
@@ -438,6 +439,7 @@ const ChannelSelectionStep = ({
                 overlay={renderChannelDropdownOverlay() || <CapMenu />}
                 onVisibleChange={handleChannelsVisibleChange}
                 visible={showChannelsMenu}
+                trigger={['click']}
               >
                 <CapButton
                   isAddBtn
@@ -482,6 +484,7 @@ const ChannelSelectionStep = ({
               deliverySetting={value?.deliverySetting}
               onDeliverySettingChange={(deliverySetting) => onChange({ deliverySetting })}
               onDomainPropertiesLoaded={setDomainPropertiesData}
+              orgUnitId={config?.context?.ouId}
               intl={intl}
             />
           )}
@@ -503,7 +506,8 @@ const ChannelSelectionStep = ({
           handleCloseCreatives={handleCloseCreatives}
           isFullMode={false}
           hostName={editingZaloHostName}
-          messageDetails={{ type: 'default' }}
+          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;
             if (saved?.channel?.toUpperCase() === WEBPUSH && saved?.messageContent?.content) {

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

@@ -39,6 +39,8 @@ jest.mock('../../../../CreativesContainer', () => function MockCreativesContaine
   channel,
   templateData,
   hostName,
+  messageDetails,
+  location,
 }) {
   return (
     <div
@@ -47,6 +49,8 @@ jest.mock('../../../../CreativesContainer', () => function MockCreativesContaine
       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"
@@ -1791,6 +1795,66 @@ describe('ChannelSelectionStep', () => {
     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

@@ -34,11 +34,16 @@ const DeliverySettingsSection = ({
   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 || {};
@@ -88,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.)
@@ -108,7 +117,10 @@ const DeliverySettingsSection = ({
       } catch (err) {
         if (!cancelled) setDomainPropertiesData(null);
       } finally {
-        if (!cancelled) fetchInFlightRef.current = false;
+        if (!cancelled) {
+          fetchInFlightRef.current = false;
+          setIsFetchingDomains(false);
+        }
       }
     };
     fetchData();
@@ -117,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');
@@ -303,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)}
@@ -319,6 +332,7 @@ DeliverySettingsSection.propTypes = {
   deliverySetting: PropTypes.object,
   onDeliverySettingChange: PropTypes.func,
   onDomainPropertiesLoaded: PropTypes.func,
+  orgUnitId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   intl: PropTypes.object.isRequired,
 };
 
@@ -327,6 +341,7 @@ DeliverySettingsSection.defaultProps = {
   deliverySettingsData: null,
   deliverySetting: null,
   onDeliverySettingChange: null,
+  orgUnitId: undefined,
 };
 
 export default injectIntl(DeliverySettingsSection);

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

@@ -42,6 +42,7 @@ const SenderDetails = ({
   onClose,
   channels = [],
   preloadedDomainProperties,
+  isLoadingDomainProperties,
   savedFieldValues,
   onSave,
   whatsappSourceAccountId,
@@ -90,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) => {
@@ -306,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,
@@ -316,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.
@@ -256,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,

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/SlideBoxContent.js

@@ -181,6 +181,8 @@ export function SlideBoxContent(props) {
       onPersonalizationTokensChange,
       isTestAndPreviewMode,
       onHtmlEditorValidationStateChange,
+      onEmbeddedSmsFooterValidity,
+      onContentValidityChange,
     } = props;
   const localTemplatesConfig = props.localTemplatesConfig || pick(props, constants.LOCAL_TEMPLATE_CONFIG_KEYS);
   const useLocalTemplates = !!get(localTemplatesConfig, 'useLocalTemplates');
@@ -456,6 +458,7 @@ export function SlideBoxContent(props) {
     eventContextTags,
     waitEventContextTags,
     handleClose,
+    onContentValidityChange,
   };
 
   return (
@@ -602,6 +605,7 @@ export function SlideBoxContent(props) {
           handleCloseTestAndPreview={handleCloseTestAndPreview}
           isTestAndPreviewMode={isTestAndPreviewMode}
           onValidationFail={onValidationFail}
+          onEmbeddedSmsFooterValidity={onEmbeddedSmsFooterValidity}
         />
       )}
       {isEditFTP && (
@@ -644,6 +648,7 @@ export function SlideBoxContent(props) {
           showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
           handleTestAndPreview={handleTestAndPreview}
           handleCloseTestAndPreview={handleCloseTestAndPreview}
+          onContentValidityChange={onContentValidityChange}
         />
       }
       {
@@ -667,6 +672,7 @@ export function SlideBoxContent(props) {
         templateData={templateData}
         isGetFormData={isGetFormData}
         getFormSubscriptionData={getFormData}
+        onEmbeddedSmsFooterValidity={onEmbeddedSmsFooterValidity}
         getLiquidTags={getLiquidTags}
         getDefaultTags={type}
         isFullMode={isFullMode}
@@ -866,6 +872,7 @@ export function SlideBoxContent(props) {
             restrictPersonalization={restrictPersonalization}
             isAnonymousType={isAnonymousType}
             onPersonalizationTokensChange={onPersonalizationTokensChange}
+            onContentValidityChange={onContentValidityChange}
           />
         ) : (
           <MobilePushNew
@@ -897,6 +904,7 @@ export function SlideBoxContent(props) {
             restrictPersonalization={restrictPersonalization}
             isAnonymousType={isAnonymousType}
             onPersonalizationTokensChange={onPersonalizationTokensChange}
+            onContentValidityChange={onContentValidityChange}
           />
         )
       )}
@@ -939,6 +947,7 @@ export function SlideBoxContent(props) {
             restrictPersonalization={restrictPersonalization}
             isAnonymousType={isAnonymousType}
             onPersonalizationTokensChange={onPersonalizationTokensChange}
+            onContentValidityChange={onContentValidityChange}
           />
         ) : (
           <MobilePushNew
@@ -976,6 +985,7 @@ export function SlideBoxContent(props) {
             creativesMode={creativesMode}
             restrictPersonalization={restrictPersonalization}
             isAnonymousType={isAnonymousType}
+            onContentValidityChange={onContentValidityChange}
           />
         )
       )}
@@ -1085,6 +1095,7 @@ export function SlideBoxContent(props) {
           showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
           handleTestAndPreview={handleTestAndPreview}
           handleCloseTestAndPreview={handleCloseTestAndPreview}
+          onContentValidityChange={onContentValidityChange}
           createNew/>
       )}
 
@@ -1107,6 +1118,7 @@ export function SlideBoxContent(props) {
         eventContextTags={eventContextTags}
         waitEventContextTags={waitEventContextTags}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
+        onContentValidityChange={onContentValidityChange}
         createNew/> }
 
       {isCreateWhatsapp && (<Whatsapp
@@ -1120,6 +1132,7 @@ export function SlideBoxContent(props) {
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         isTestAndPreviewMode={isTestAndPreviewMode}
+        onContentValidityChange={onContentValidityChange}
         />
       )}
 
@@ -1145,6 +1158,7 @@ export function SlideBoxContent(props) {
           search: '',
         }}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
+        onContentValidityChange={onContentValidityChange}
         />
       )}
 
@@ -1270,6 +1284,7 @@ export function SlideBoxContent(props) {
           restrictPersonalization={restrictPersonalization}
           isAnonymousType={isAnonymousType}
           waitEventContextTags={waitEventContextTags}
+          onContentValidityChange={onContentValidityChange}
         />
       )}
       {isCreateRcs && (<Rcs

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -51,6 +51,8 @@ function SlideBoxFooter(props) {
     hasPersonalizationTokenError: hasPersonalizationTokenErrorProp = false,
     /** When set (e.g. SMS library create), overrides `creativesTemplatesSave` (“Done”) for the primary button */
     primarySaveButtonMessage,
+    /** Live content-validity signal reported by the channel's own editor (currently SMS create) — true disables Save/Done. */
+    isContentInvalid = false,
   } = props;
   // Calculate if buttons should be disabled
   // Only apply validation state checks for EMAIL channel in HTML Editor mode (not BEE/DragDrop)
@@ -193,7 +195,7 @@ function SlideBoxFooter(props) {
             <CapRow useLegacy>
               <CapButton
                 onClick={onSave}
-                disabled={isTemplateNameEmpty || fetchingCmsData || shouldDisableButtons || hasPersonalizationTokenError}
+                disabled={isTemplateNameEmpty || fetchingCmsData || shouldDisableButtons || hasPersonalizationTokenError || isContentInvalid}
               >
                 {getSaveButtonLabel()}
               </CapButton>
@@ -201,7 +203,7 @@ function SlideBoxFooter(props) {
                 <CapButton
                   type="secondary"
                   onClick={onTestAndPreview}
-                  disabled={shouldDisableButtons || hasPersonalizationTokenError}
+                  disabled={shouldDisableButtons || hasPersonalizationTokenError || isContentInvalid}
                   style={{ marginLeft: '8px' }}
                 >
                   <FormattedMessage {...messages.testAndPreview} />
@@ -272,6 +274,7 @@ SlideBoxFooter.propTypes = {
     id: PropTypes.string,
     defaultMessage: PropTypes.string,
   }),
+  isContentInvalid: PropTypes.bool,
 };
 
 SlideBoxFooter.defaultProps = {
@@ -300,5 +303,6 @@ SlideBoxFooter.defaultProps = {
   formData: [],
   hasPersonalizationTokenError: false,
   primarySaveButtonMessage: undefined,
+  isContentInvalid: false,
 };
 export default SlideBoxFooter;