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

package/package.json

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

package/services/api.js

@@ -701,21 +701,23 @@ export const createCentralCommsMetaId = (payload, metaType = TRANSACTION) => {
   return request(url, getAPICallObject('POST', payload, false, false, false, true));
 };
 
-// CCS CommDefinition API (new Veyron /api/v1/commdefinition surface, proxied through cap-creatives-api /comm-definitions); used by CommunicationFlow's Save, while legacy messageMeta functions remain for CreativesContainer's save flow (Cap/sagas.js).
+// CCS CommDefinition API, proxied through cap-creatives-api; used by CommunicationFlow's Save, while legacy messageMeta functions remain for CreativesContainer's save flow.
+const COMM_DEFINITIONS_PATH = `${API_ENDPOINT}/comm-definitions`;
+
 export const createCommDefinition = (payload) => {
-  const url = `${API_ENDPOINT}/comm-definitions`;
+  const url = COMM_DEFINITIONS_PATH;
   return request(url, getAPICallObject('POST', payload, false, false, false, true));
 };
 
-// Opens a new DRAFT version with the supplied content on an existing CommDefinition (same id/referenceId); used by CommunicationFlow edit-mode saves to preserve the alert's identity instead of creating a new CommDefinition. Route verified against Veyron's /commdefinition/{id}/edit endpoint.
+// Opens a new DRAFT version on an existing CommDefinition, preserving its id/referenceId.
 export const editCommDefinition = (commDefinitionId, payload) => {
-  const url = `${API_ENDPOINT}/comm-definitions/${commDefinitionId}/edit`;
+  const url = `${COMM_DEFINITIONS_PATH}/${commDefinitionId}/edit`;
   return request(url, getAPICallObject('POST', payload, false, false, false, true));
 };
 
-// Sends a real transactional comm via CCS (notify/ui's "Send test" action uses this instead of the legacy createMessageMeta/sendTestMessage flow — see CommonTestAndPreview's handleSendTestMessage).
+// notify/ui's "Send test" uses this instead of the legacy createMessageMeta/sendTestMessage flow.
 export const sendTransactionalComm = (payload) => {
-  const url = `${API_ENDPOINT}/comm-definitions/send/transaction`;
+  const url = `${COMM_DEFINITIONS_PATH}/send/transaction`;
   return request(url, getAPICallObject('POST', payload, false, false, false, true));
 };
 

package/utils/templateVarUtils.js

@@ -115,6 +115,38 @@ 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
+ */
+export const reconcileVarMapToSlotFormat = (rawVarMap = {}, segments = [], regex) => {
+  if (Object.keys(rawVarMap ?? {}).length === 0) return {};
+  const isSlotFormat = Object.keys(rawVarMap).some((key) => key.includes('_'));
+  if (isSlotFormat) return { ...rawVarMap };
+  const slotMap = {};
+  let occurrenceIndex = 0;
+  (segments ?? []).forEach((segment, segmentIndex) => {
+    if (typeof segment === 'string' && (segment.match(regex) || []).length > 0) {
+      slotMap[`${segment}_${segmentIndex}`] = rawVarMap[occurrenceIndex] ?? '';
+      occurrenceIndex += 1;
+    }
+  });
+  return slotMap;
+};
+
 /**
  * Looks up the inner name of a `{{name}}` or `{#name#}` token in a flat key→value map.
  * Handles both exact matches and dot-path suffixes (e.g. `tag.FORMAT_1` → name `FORMAT_1`).

package/utils/tests/templateVarUtils.test.js

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

package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js

@@ -140,7 +140,8 @@ const UnifiedPreview = ({
       }
 
       case CHANNELS.LINE:
-        // LINE currently carries a single text message; CCS stores lineMessageContent.messageBody as JSON for LINE's native messages[] (see testAndPreviewDataTransform.js), already reduced to plain text before this point, so reuse the SMS chat-bubble preview. Rich LINE types (image/video/sticker/imageMap/carousel/flex) are not specially rendered yet.
+        // 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.
         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 } — when present, "Send test" calls CCS's send/transaction endpoint directly instead of the legacy createMessageMeta/sendTestMessage flow.
+    // notify/ui only: { commDefinitionId, referenceId } — routes "Send test" to CCS's send/transaction endpoint.
     ccsSendTransaction,
     // Email-specific props
     beeInstance,

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -46,11 +46,8 @@ import { getEnabledSteps } from './utils/getEnabledSteps';
 import messages from './messages';
 import './CommunicationFlow.scss';
 
-// Self-injects the same 'cap' reducer CreativesContainer already injects under this key
-// (see CreativesContainer/index.js's withCapReducer) — idempotent, so it's a no-op if the
-// consumer's own store already provides it. Guarantees makeSelectAuthenticated() below never
-// reads an undefined domain, regardless of whether a given consumer (e.g. coupons,
-// cartPromotions) wires up its own 'cap' slice.
+// Self-injects the same 'cap' reducer CreativesContainer already injects under this key;
+// idempotent, so it's a no-op if the consumer's own store already provides it.
 const withCapReducer = injectReducer({ key: 'cap', reducer: capReducer });
 
 const getDeliveryChannels = (contentItems) => {
@@ -64,7 +61,7 @@ const hasDeliverySettingForChannel = (channelSetting, channel) => {
   return !!settings && Object.values(settings).some((v) => v !== null && v !== '' && v !== undefined);
 };
 
-// createCommDefinition resolves with the CCS error envelope for 4xx/5xx responses (see api.js request()/checkStatus); duplicate referenceId within the org returns a 409.
+// Duplicate referenceId within the org returns a 409 CCS error envelope.
 const isDuplicateReferenceIdError = (res) => res?.success === false && res?.status?.message === REFERENCE_ID_EXISTS;
 
 const CommunicationFlow = ({
@@ -162,12 +159,10 @@ const CommunicationFlow = ({
     if (shouldUseCCS) {
       const isMultiChannel = [CHANNEL_PRIORITY, AB_TEST].includes(aggregatedData.communicationStrategy);
       const contentItem = (aggregatedData.contentItems || [])[0];
-      // Consumer-supplied name (e.g. CapNotify's Alert Name field) — CommunicationFlow
-      // has no name input of its own, so this is mandatory input from config.context.
+      // Consumer-supplied (e.g. CapNotify's Alert Name field) — CommunicationFlow has no name input of its own.
       const name = config?.context?.name;
 
-      // CCS create is SINGLE-strategy only this phase (D1); CHANNEL_PRIORITY/AB_TEST
-      // carry multiple content items with no CCS equivalent yet.
+      // CCS create only supports SINGLE strategy; CHANNEL_PRIORITY/AB_TEST have no CCS equivalent yet.
       if (!isMultiChannel && contentItem && name) {
         const rawChannel = (contentItem.channel || '').toUpperCase();
         const channel = CCS_CHANNEL_NAME_MAP[rawChannel] || rawChannel;
@@ -177,8 +172,7 @@ const CommunicationFlow = ({
         const contentPayload = contentTransform ? contentTransform(contentItem.templateData) : contentItem.templateData;
         const { dynamicControls = {} } = aggregatedData;
         const channelSettings = aggregatedData.deliverySetting?.channelSetting?.[channel] || {};
-        // referenceId/description are user-editable, optional fields (up until Send for
-        // approval) — sent as '' rather than auto-generated/omitted when left blank.
+        // Optional fields — sent as '' rather than omitted when left blank.
         const referenceId = config?.context?.referenceId || '';
         const description = config?.context?.description || '';
 
@@ -199,29 +193,35 @@ const CommunicationFlow = ({
           singleChannelStrategy: {
             variant: {
               channel,
-              // `channel` must be spread last in both objects so CCS's normalized enum (e.g. `PUSH`) overrides the UI's internal identifier (e.g. `MOBILEPUSH`) from templateData.
+              // `channel` spread last so CCS's normalized enum overrides the UI's internal identifier.
               ...(contentKey && { [contentKey]: { ...contentPayload, channel } }),
               ...(deliveryKey && { [deliveryKey]: { channelSettings: { ...channelSettings, channel } } }),
             },
           },
         };
 
-        // Editing an existing alert (e.g. rejected) uses config.context.existingCommDefinitionId to create a new DRAFT version on the same CommDefinition, preserving its id/referenceId instead of creating a new alert.
+        // existingCommDefinitionId (set when editing, e.g. a rejected alert) creates a new
+        // DRAFT version on the same CommDefinition instead of a new one.
         const { existingCommDefinitionId } = config?.context || {};
+        const {
+          referenceId: payloadReferenceId,
+          description: payloadDescription,
+          strategyType,
+          settings,
+          singleChannelStrategy,
+        } = payload;
 
         try {
           const res = existingCommDefinitionId
             ? await editCommDefinition(existingCommDefinitionId, {
-              referenceId: payload.referenceId,
-              description: payload.description,
-              strategyType: payload.strategyType,
-              settings: payload.settings,
-              singleChannelStrategy: payload.singleChannelStrategy,
+              referenceId: payloadReferenceId,
+              description: payloadDescription,
+              strategyType,
+              settings,
+              singleChannelStrategy,
             })
             : await createCommDefinition(payload);
           if (isDuplicateReferenceIdError(res)) {
-            // Duplicate referenceId in this org — block the save so the user can
-            // change it, rather than silently proceeding without a CCS comm.
             setSaveError(formatMessage(messages.duplicateReferenceIdError));
             return;
           }
@@ -291,10 +291,8 @@ const CommunicationFlow = ({
           </CapRow>
         );
       case STEPS.COMMUNICATION_STRATEGY: {
-        // No visible divider line when there's no content yet (matches the empty-state
-        // design), but the vertical gap above the Channel card must stay either way —
-        // see the `.communication-strategy-row` spacing rule in CommunicationFlow.scss,
-        // which is not tied to whether the divider itself renders.
+        // No divider when there's no content yet, but the spacing above the Channel
+        // card must stay either way — see .communication-strategy-row in the scss.
         const templateStepFollows = enabledSteps.includes(STEPS.CHANNEL_SELECTION);
         const hasContent = stepData.contentItems?.length > 0;
         return (

package/v2Containers/CommunicationFlow/CommunicationFlowCard.js

@@ -111,10 +111,8 @@ const CommunicationFlowCard = ({
     const senderIdValue = getSenderIdValue(firstItem, savedData);
     const controls = config?.features?.dynamicControlsData?.controls || DYNAMIC_CONTROLS_CONFIG;
     const dynamicControlKeys = Object.keys(savedData?.dynamicControls || {});
-    // Mirrors getEnabledSteps.js's own gate on this flag (which skips the in-slidebox
-    // DynamicControlsStep) — consumers like CapNotify that set showDynamicControls:
-    // false render their own "Advanced controls" section elsewhere, so this summary
-    // card's right column would otherwise show a redundant, always-empty control list.
+    // Consumers that set showDynamicControls: false render their own "Advanced
+    // controls" section elsewhere, so skip this card's redundant control list.
     const showDynamicControls = config?.features?.showDynamicControls !== false;
     const channel = firstItem.channel?.toUpperCase();
     const senderLabel = [WHATSAPP, RCS].includes(channel)

package/v2Containers/CommunicationFlow/constants.js

@@ -38,15 +38,16 @@ export const CHANNEL_PRIORITY = 'CHANNEL_PRIORITY';
 export const AB_TEST = 'AB_TEST';
 export const SINGLE_TEMPLATE = 'SINGLE_TEMPLATE';
 
-// CCS CommDefinition strategyType — distinct from SINGLE_TEMPLATE above, which is this UI's own communicationStrategy value. Only SINGLE is supported this phase; CCS create is skipped entirely for CHANNEL_PRIORITY/AB_TEST.
+// 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 exactly (per Cap Notify API design samples and real create responses); kept separate from the legacy messageMeta CHANNEL_CONTENT_KEY_MAP/CHANNEL_DELIVERY_KEY_MAP.
+// 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 value for mobile push is 'PUSH' (verified against real create responses), even though the content/delivery keys stay 'mpush*'.
+  // CCS's channel enum for mobile push is 'PUSH', but content/delivery keys stay 'mpush*'.
   PUSH: 'mpushMessageContent',
   INAPP: 'inAppMessageContent',
   ANDROID: 'androidMessageContent',
@@ -58,17 +59,16 @@ export const CCS_CHANNEL_CONTENT_KEY_MAP = {
   RCS: 'rcsMessageContent',
 };
 
-// contentItem.templateData uses legacy messageMeta field names, so transform mismatched channel fields before sending to CCS; for EMAIL, map legacy `emailSubject`/`emailBody` to CCS's `messageSubject`/`messageBody`.
+// 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: legacy stores text as `messageBody`, while CCS expects `message`; map the field explicitly to avoid CCS returning smsMessageContent.message as null.
   SMS: (templateData = {}) => ({
     message: templateData.messageBody || '',
   }),
-  // WEBPUSH: the legacy editor nests data under messageContent.content; flatten it to CCS's { messageSubject, accountId, content } shape and drop the legacy-only `offers` field.
   WEBPUSH: (templateData = {}) => {
     const inner = templateData.messageContent?.content || templateData;
     return {
@@ -94,12 +94,14 @@ export const CCS_CHANNEL_DELIVERY_KEY_MAP = {
   RCS: 'rcsDeliverySettings',
 };
 
-// The UI uses `MOBILEPUSH`, while CCS uses `PUSH` for the channel enum (verified against real create responses); normalize this value before building the CCS payload, while retaining the `mpush*` content/delivery keys. All other channel identifiers pass through unchanged.
+// UI uses `MOBILEPUSH`; CCS uses `PUSH` for the channel enum. Other channels pass through.
 export const CCS_CHANNEL_NAME_MAP = {
   MOBILEPUSH: 'PUSH',
 };
 
-// Channel config — single source of truth for CreativesContainer and TemplatesV2; paneKey is the TemplatesV2 defaultPanes key used by channelsToHide, and channelProp is the CreativesContainer channel prop that must match pane.key for the tab to be active.
+// 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.
 export const CHANNELS = [
   {
     value: 'SMS',

package/v2Containers/CommunicationFlow/index.js

@@ -80,15 +80,13 @@ CommunicationFlowContainer.propTypes = {
         controls: PropTypes.array,
       }),
     }),
-    context: PropTypes.object, // ouId, campaignId, programId; name (required for CCS create),
-    // referenceId (optional, auto-generated from name if absent), description (optional).
-    useCCS: PropTypes.bool, // If false, skips the CCS createCommDefinition call 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; data.ccsCommDefinition
-  // ({id, referenceId, version, status}) is present when the CCS create succeeded
-  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/steps/ChannelSelectionStep/ChannelSelectionStep.js

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

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

@@ -37,9 +37,17 @@ jest.mock('../../../../CreativesContainer', () => function MockCreativesContaine
   handleCloseCreatives,
   creativesMode,
   channel,
+  templateData,
+  hostName,
 }) {
   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}
+    >
       <button
         type="button"
         data-testid="creatives-save"
@@ -62,7 +70,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 +80,23 @@ jest.mock('../../DeliverySettingsStep', () => ({
         >
           Apply delivery
         </button>
+        <button
+          type="button"
+          data-testid="domain-properties-loaded"
+          onClick={() => onDomainPropertiesLoaded?.({
+            ZALO: [{
+              id: 267284,
+              domainProperties: {
+                id: 4977,
+                domainName: 'Gapit_Automation',
+                connectionProperties: { oa_id: '300086756699856746' },
+                hostName: 'gapitzalotrans',
+              },
+            }],
+          })}
+        >
+          Load domain properties
+        </button>
       </div>
     );
   },
@@ -1683,6 +1708,89 @@ 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', '');
+  });
+
   // ── FTP channel filtered from dropdown ───────────────────────────────────────
 
   it('FTP channel is filtered out of the channel dropdown', async () => {

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

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

package/v2Containers/CreativesContainer/index.js

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

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

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

package/v2Containers/Whatsapp/index.js

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

package/v2Containers/mockdata.js

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