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

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

@@ -108,6 +108,22 @@ describe('CommunicationFlowCard', () => {
       fireEvent.click(screen.getByText('Add creatives'));
       expect(screen.getByTestId('comm-flow-mock')).toHaveAttribute('data-mode', 'create');
     });
+
+    it('disables the Add creatives button when disabled prop is true', () => {
+      renderCard({ disabled: true, disabledTooltip: 'Enter an Alert name to add content' });
+      expect(screen.getByText('Add creatives').closest('button')).toBeDisabled();
+    });
+
+    it('does not open SlideBox when Add creatives is clicked while disabled', () => {
+      renderCard({ disabled: true, disabledTooltip: 'Enter an Alert name to add content' });
+      fireEvent.click(screen.getByText('Add creatives'));
+      expect(screen.queryByTestId('slide-box')).not.toBeInTheDocument();
+    });
+
+    it('Add creatives button is enabled by default (disabled prop absent)', () => {
+      renderCard();
+      expect(screen.getByText('Add creatives').closest('button')).not.toBeDisabled();
+    });
   });
 
   describe('configured state (initialData provided)', () => {
@@ -186,6 +202,26 @@ describe('CommunicationFlowCard', () => {
       renderCard({ initialData: makeSavedData() });
       expect(screen.getByText('Other controls')).toBeInTheDocument();
     });
+
+    it('hides the Other controls column when config.features.showDynamicControls is false', () => {
+      renderCard({
+        config: { ...baseConfig, features: { showDynamicControls: false } },
+        initialData: makeSavedData({
+          dynamicControls: {
+            sendToControlCustomers: false, sendToBrandPocs: false, useTinyUrl: false, overrideDailyLimit: false,
+          },
+        }),
+      });
+      expect(screen.queryByText('Other controls')).not.toBeInTheDocument();
+    });
+
+    it('still shows the Other controls column when showDynamicControls is unset (Engagement Module default)', () => {
+      renderCard({
+        config: { ...baseConfig, features: {} },
+        initialData: makeSavedData(),
+      });
+      expect(screen.getByText('Other controls')).toBeInTheDocument();
+    });
   });
 
   describe('channel config resolution', () => {
@@ -231,11 +267,11 @@ describe('CommunicationFlowCard', () => {
       expect(screen.getByText(/Sender ID/)).toBeInTheDocument();
     });
 
-    it('shows senderEmail for EMAIL with Sender ID label', () => {
+    it('shows senderId for EMAIL with Sender ID label', () => {
       renderCard({
         initialData: makeSavedData({
           contentItems: [{ channel: 'EMAIL', templateData: {} }],
-          deliverySetting: { channelSetting: { EMAIL: { senderEmail: 'test@example.com' } } },
+          deliverySetting: { channelSetting: { EMAIL: { senderId: 'test@example.com' } } },
         }),
       });
       expect(screen.getByText(/test@example.com/)).toBeInTheDocument();
@@ -545,10 +581,10 @@ describe('CommunicationFlowCard', () => {
   });
 
   describe('SlideBox header', () => {
-    it('renders Add message title in the slidebox header', () => {
+    it('renders Add content title in the slidebox header', () => {
       renderCard();
       fireEvent.click(screen.getByText('Add creatives'));
-      expect(screen.getByText('Add message')).toBeInTheDocument();
+      expect(screen.getByText('Add content')).toBeInTheDocument();
     });
   });
 
@@ -616,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/Tests/constants.test.js

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

package/v2Containers/CommunicationFlow/constants.js

@@ -38,9 +38,68 @@ export const CHANNEL_PRIORITY = 'CHANNEL_PRIORITY';
 export const AB_TEST = 'AB_TEST';
 export const SINGLE_TEMPLATE = 'SINGLE_TEMPLATE';
 
-// Channel config - single source of truth for CreativesContainer and TemplatesV2
-// paneKey: TemplatesV2 defaultPanes object key (for channelsToHide)
-// channelProp: CreativesContainer channel prop (must match pane.key for tab to be active)
+// CCS create is only supported for SINGLE (CHANNEL_PRIORITY/AB_TEST skip CCS entirely).
+export const CCS_STRATEGY_TYPE_SINGLE = 'SINGLE';
+
+// Mirrors CCS SingleChannelStrategy field names; kept separate from the legacy
+// messageMeta CHANNEL_CONTENT_KEY_MAP/CHANNEL_DELIVERY_KEY_MAP.
+export const CCS_CHANNEL_CONTENT_KEY_MAP = {
+  SMS: 'smsMessageContent',
+  EMAIL: 'emailMessageContent',
+  WHATSAPP: 'whatsappMessageContent',
+  // CCS's channel enum for mobile push is 'PUSH', but content/delivery keys stay 'mpush*'.
+  PUSH: 'mpushMessageContent',
+  INAPP: 'inAppMessageContent',
+  ANDROID: 'androidMessageContent',
+  IOS: 'iosMessageContent',
+  ZALO: 'zaloMessageContent',
+  VIBER: 'viberMessageContent',
+  LINE: 'lineMessageContent',
+  WEBPUSH: 'webPushMessageContent',
+  RCS: 'rcsMessageContent',
+};
+
+// Transforms legacy messageMeta field names to CCS's before sending, for channels
+// where the two shapes don't already match.
+export const CCS_CONTENT_TRANSFORMS = {
+  EMAIL: (templateData = {}) => ({
+    messageSubject: templateData.emailSubject,
+    messageBody: templateData.emailBody || templateData.emailHtml,
+  }),
+  SMS: (templateData = {}) => ({
+    message: templateData.messageBody || '',
+  }),
+  WEBPUSH: (templateData = {}) => {
+    const inner = templateData.messageContent?.content || templateData;
+    return {
+      messageSubject: inner.messageSubject,
+      accountId: inner.accountId,
+      content: inner.content,
+    };
+  },
+};
+
+export const CCS_CHANNEL_DELIVERY_KEY_MAP = {
+  SMS: 'smsDeliverySettings',
+  EMAIL: 'emailDeliverySettings',
+  WHATSAPP: 'whatsappDeliverySettings',
+  PUSH: 'mpushDeliverySettings',
+  INAPP: 'inAppDeliverySettings',
+  ANDROID: 'androidDeliverySettings',
+  IOS: 'iosDeliverySettings',
+  ZALO: 'zaloDeliverySettings',
+  VIBER: 'viberDeliverySettings',
+  LINE: 'lineDeliverySettings',
+  WEBPUSH: 'webPushDeliverySettings',
+  RCS: 'rcsDeliverySettings',
+};
+
+// UI uses `MOBILEPUSH`; CCS uses `PUSH` for the channel enum. Other channels pass through.
+export const CCS_CHANNEL_NAME_MAP = {
+  MOBILEPUSH: 'PUSH',
+};
+
+// Channel config is the shared source of truth: paneKey maps TemplatesV2 panes, channelProp maps CreativesContainer tabs.
 export const CHANNELS = [
   {
     value: 'SMS',
@@ -232,4 +291,6 @@ export const INCENTIVE_TYPES = [
   {
     value: 'badges', label: <FormattedMessage {...messages.badges} />, isActive: false, disabled: false,
   },
-];
+];
+
+export const REFERENCE_ID_EXISTS = 'REFERENCE_ID_EXISTS';

package/v2Containers/CommunicationFlow/index.js

@@ -9,7 +9,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import CommunicationFlow from './CommunicationFlow';
-import { hasSupportEngagementModule } from '../../utils/common';
 
 const CommunicationFlowContainer = ({
   config,
@@ -18,26 +17,20 @@ const CommunicationFlowContainer = ({
   onCancel,
   onChange,
   ...otherProps
-}) => {
-  if (!hasSupportEngagementModule()) {
-    return null;
-  }
-
-  return (
-    <CommunicationFlow
-      config={config}
-      initialData={initialData}
-      onSave={onSave}
-      onCancel={onCancel}
-      onChange={onChange}
-      {...otherProps}
-    />
-  );
-};
+}) => (
+  <CommunicationFlow
+    config={config}
+    initialData={initialData}
+    onSave={onSave}
+    onCancel={onCancel}
+    onChange={onChange}
+    {...otherProps}
+  />
+);
 
 CommunicationFlowContainer.propTypes = {
   config: PropTypes.shape({
-    consumer: PropTypes.oneOf(['campaigns', 'loyalty', 'adiona']).isRequired,
+    consumer: PropTypes.oneOf(['campaigns', 'loyalty', 'adiona', 'coupons', 'cartPromotions']).isRequired,
     channel: PropTypes.string, // optional if channel step is skipped
     mode: PropTypes.oneOf(['create', 'edit', 'preview']).isRequired,
     channelsToHide: PropTypes.arrayOf(PropTypes.string),
@@ -87,13 +80,13 @@ CommunicationFlowContainer.propTypes = {
         controls: PropTypes.array,
       }),
     }),
-    context: PropTypes.object, // ouId, campaignId, programId, etc.
-    useCCS: PropTypes.bool, // If false, skips CCS bulk-claim-approve on save. Defaults to true.
+    context: PropTypes.object, // ouId, campaignId, programId, name, referenceId, description
+    useCCS: PropTypes.bool, // skips the CCS createCommDefinition call on save when false; defaults to true
   }).isRequired,
   initialData: PropTypes.object, // for edit/preview mode
-  onSave: PropTypes.func.isRequired, // (data) => void - called when user saves
-  onCancel: PropTypes.func.isRequired, // () => void - called when user cancels
-  onChange: PropTypes.func, // (data) => void - optional, called on data changes
+  onSave: PropTypes.func.isRequired, // (data) => void, data.ccsCommDefinition set when CCS create succeeded
+  onCancel: PropTypes.func.isRequired, // () => void
+  onChange: PropTypes.func, // (data) => void
 };
 
 CommunicationFlowContainer.defaultProps = {

package/v2Containers/CommunicationFlow/messages.js

@@ -64,9 +64,9 @@ export default {
   },
 
   // Slidebox header
-  addMessage: {
-    id: `${prefix}.addMessage`,
-    defaultMessage: 'Add message',
+  addContent: {
+    id: `${prefix}.addContent`,
+    defaultMessage: 'Add content',
   },
 
   // Step prompts
@@ -363,4 +363,12 @@ export default {
     id: `${prefix}.senderNotConfiguredError`,
     defaultMessage: 'Selected domain gateway id is not correct. Please change the domain id or contact the gateway team to register them with Capillary.',
   },
+  duplicateReferenceIdError: {
+    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

@@ -45,6 +45,7 @@ const ChannelSelectionStep = ({
   onChange,
   channelsToHide = [],
   channelsToDisable = [],
+  disablePreviewAndTest = false,
   creativesMode = 'create',
   selectedOfferDetails = [],
   incentivesData,
@@ -63,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)
@@ -76,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
    */
@@ -236,6 +251,7 @@ const ChannelSelectionStep = ({
   };
 
   const handleChannelsVisibleChange = (visible) => {
+    if (visible && renderChannelDropdownOverlay() === null) return;
     setShowChannelsMenu(visible);
   };
 
@@ -358,7 +374,7 @@ const ChannelSelectionStep = ({
               >
                  {formatMessage(messages.edit)}
               </CapMenu.Item>
-              {!PREVIEW_TEST_UNSUPPORTED_CHANNELS.includes(item?.channel?.toUpperCase()) && (
+              {!disablePreviewAndTest && !PREVIEW_TEST_UNSUPPORTED_CHANNELS.includes(item?.channel?.toUpperCase()) && (
                 <CapMenu.Item
                   id="preview-menu-item"
                   className="ant-dropdown-menu-item"
@@ -407,10 +423,6 @@ const ChannelSelectionStep = ({
   return (
     <>
       <CapRow className="channel-selection-step">
-        <CapHeading type="h3" className="margin-b-8">
-          {formatMessage(messages.contentTemplate)}
-        </CapHeading>
-
         <CapRow
           useLegacy
           className={`content-template-container ${contentItems?.length > 0 ? 'content-template-container--has-content' : ''}`}
@@ -422,11 +434,12 @@ const ChannelSelectionStep = ({
           )}
 
           {contentItems?.length === 0 ? (
-            <CapRow className="content-template-section">
+            <CapRow className={`content-template-section ${contentItems?.length === 0 ? 'no-content-items' : ''}`}>
               <CapDropdown
                 overlay={renderChannelDropdownOverlay() || <CapMenu />}
                 onVisibleChange={handleChannelsVisibleChange}
                 visible={showChannelsMenu}
+                trigger={['click']}
               >
                 <CapButton
                   isAddBtn
@@ -470,6 +483,8 @@ const ChannelSelectionStep = ({
               deliverySettingsData={deliverySettingsData}
               deliverySetting={value?.deliverySetting}
               onDeliverySettingChange={(deliverySetting) => onChange({ deliverySetting })}
+              onDomainPropertiesLoaded={setDomainPropertiesData}
+              orgUnitId={config?.context?.ouId}
               intl={intl}
             />
           )}
@@ -490,14 +505,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}
@@ -555,6 +569,7 @@ ChannelSelectionStep.propTypes = {
   onChange: PropTypes.func.isRequired,
   channelsToHide: PropTypes.array,
   channelsToDisable: PropTypes.array,
+  disablePreviewAndTest: PropTypes.bool,
   creativesMode: PropTypes.oneOf(['create', 'edit', 'preview']),
   selectedOfferDetails: PropTypes.array,
   incentivesData: PropTypes.shape({
@@ -576,6 +591,7 @@ ChannelSelectionStep.defaultProps = {
   error: null,
   channelsToHide: [],
   channelsToDisable: [],
+  disablePreviewAndTest: false,
   creativesMode: 'create',
   selectedOfferDetails: [],
   incentivesData: null,

package/v2Containers/CommunicationFlow/steps/ChannelSelectionStep/ChannelSelectionStep.scss

@@ -130,6 +130,10 @@
     border-bottom: 1px solid $CAP_G07;
   }
 
+  .no-content-items {
+    border-bottom: none;
+  }
+
   .add-content-template-button {
     padding: $CAP_SPACE_12 $CAP_SPACE_16;
     align-self: center !important;