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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.56-alpha.6",
+  "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,23 +115,7 @@ export const extractTemplateVariables = (templateStr = '', captureRegex) => {
   return variables;
 };
 
-/**
- * Reconciles a var-value map from an external source (e.g. a saved CommDefinition) into this
- * UI's own `${token}_${segmentIndex}` slot-key format used by the WhatsApp/RCS editors' own
- * text-merge logic.
- *
- * Two shapes are recognized:
- *  - Slot format: keys already look like `${token}_${index}` (contain an underscore) — used as-is.
- *  - CCS format: keys are plain sequential occurrence indices ("0", "1", ...), one per variable in
- *    template order — unrelated to this UI's own array-position indexing (which depends on how many
- *    plain-text segments fall between variables) — so it's remapped by walking `segments` in order
- *    and assigning the Nth variable occurrence to `rawVarMap[N]`.
- *
- * @param {Object} rawVarMap
- * @param {string[]} segments - text+var segments, e.g. from `splitContentByOrderedVarTokens`
- * @param {RegExp} regex - matches a variable token
- * @returns {Object} `${token}_${segmentIndex}` -> value
- */
+// 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('_'));

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

@@ -503,7 +503,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/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/Whatsapp/index.js

@@ -504,9 +504,7 @@ export const Whatsapp = (props) => {
     if (templateHeaderArray?.length !== 0) {
       let clonedVarMap = {};
       if (!isEmpty(varMap)) {
-        // CCS's varMapped can use plain sequential occurrence indices ("0","1",...)
-        // rather than this UI's own `${token}_${index}` slot keys — reconcile so
-        // values land on the right segment instead of silently missing.
+        // 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) => {