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

package/package.json

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

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/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",