cap-creatives-ui 8.0.280 → 8.0.321

package/app/utils/tests/templateVarUtils.test.js

@@ -0,0 +1,160 @@
+import {
+  extractTemplateVariables,
+  splitTemplateVarString,
+  splitContentByOrderedVarTokens,
+  getFallbackResolvedContent,
+  getFallbackResolvedContentForCardDisplay,
+  isDltHashVarToken,
+  isAnyTemplateVarToken,
+} from '../templateVarUtils';
+
+describe('templateVarUtils', () => {
+  describe('splitContentByOrderedVarTokens', () => {
+    it('pushes remainder when next token is not found in string', () => {
+      expect(splitContentByOrderedVarTokens(['{{b}}'], 'hello')).toEqual(['hello']);
+    });
+
+    it('handles empty token queue by pushing remainder', () => {
+      expect(splitContentByOrderedVarTokens([], 'rest')).toEqual(['rest']);
+    });
+
+    it('handles null matchedVariableTokens as empty queue', () => {
+      expect(splitContentByOrderedVarTokens(null, 'abc')).toEqual(['abc']);
+    });
+
+    it('stops and pushes remainder when next token in queue is empty string', () => {
+      expect(splitContentByOrderedVarTokens(['{{a}}', ''], 'x{{a}}y')).toEqual(['x', '{{a}}', 'y']);
+    });
+
+    it('splits multiple ordered tokens across content', () => {
+      expect(splitContentByOrderedVarTokens(['{{a}}', '{{b}}'], 'p{{a}}q{{b}}r')).toEqual([
+        'p',
+        '{{a}}',
+        'q',
+        '{{b}}',
+        'r',
+      ]);
+    });
+
+    it('returns empty segment list when content is null and queue is empty', () => {
+      expect(splitContentByOrderedVarTokens([], null)).toEqual([]);
+    });
+  });
+
+  describe('splitTemplateVarString', () => {
+    it('returns empty array for falsy string', () => {
+      expect(splitTemplateVarString('')).toEqual([]);
+      expect(splitTemplateVarString(null)).toEqual([]);
+    });
+
+    it('splits mustache segments', () => {
+      const parts = splitTemplateVarString('Hi {{name}}!');
+      expect(parts.some((p) => p.includes('name'))).toBe(true);
+    });
+
+    it('omits empty segments after filtering', () => {
+      expect(splitTemplateVarString('a{{x}}b')).toEqual(['a', '{{x}}', 'b']);
+    });
+  });
+
+  describe('getFallbackResolvedContent', () => {
+    it('replaces var segments from varMapData', () => {
+      const out = getFallbackResolvedContent('{{a}}', { '{{a}}_0': 'X' });
+      expect(out).toBe('X');
+    });
+
+    it('keeps DLT token string when slot empty', () => {
+      const out = getFallbackResolvedContent('{#v#}', {});
+      expect(out).toContain('#');
+    });
+
+    it('returns empty string for mustache slot when map has no value', () => {
+      const out = getFallbackResolvedContent('Hi {{missing}}', {});
+      expect(out).toBe('Hi ');
+    });
+
+    it('treats null as empty; explicit empty string is kept (cleared input)', () => {
+      expect(getFallbackResolvedContent('{{a}}', { '{{a}}_0': null })).toBe('');
+      expect(getFallbackResolvedContent('{{a}}', { '{{a}}_0': '' })).toBe('');
+    });
+
+    it('keeps DLT token in preview when slot map has empty string (no tag yet)', () => {
+      expect(getFallbackResolvedContent('{#v#}', { '{#v#}_0': '' })).toBe('{#v#}');
+    });
+
+    it('keeps DLT token in preview when slot map has null', () => {
+      expect(getFallbackResolvedContent('{#v#}', { '{#v#}_0': null })).toBe('{#v#}');
+    });
+
+    it('uses slot replacement when value is non-empty string', () => {
+      expect(getFallbackResolvedContent('A{{b}}C', { '{{b}}_1': 'ok' })).toBe('AokC');
+    });
+  });
+
+  describe('getFallbackResolvedContentForCardDisplay', () => {
+    it('shows raw tokens when map is empty or slots unset', () => {
+      expect(getFallbackResolvedContentForCardDisplay('Hi {{name}}', {})).toBe('Hi {{name}}');
+      expect(getFallbackResolvedContentForCardDisplay('{#var#}', {})).toBe('{#var#}');
+    });
+
+    it('shows raw token when slot key exists but value is empty (no labels)', () => {
+      expect(getFallbackResolvedContentForCardDisplay('{#var#}', { '{#var#}_0': '' })).toBe('{#var#}');
+      expect(getFallbackResolvedContentForCardDisplay('{{a}}', { '{{a}}_0': '' })).toBe('{{a}}');
+    });
+
+    it('replaces when slot has non-empty value', () => {
+      expect(getFallbackResolvedContentForCardDisplay('Hi {{name}}', { '{{name}}_1': 'Pat' })).toBe('Hi Pat');
+    });
+  });
+
+  describe('isDltHashVarToken / isAnyTemplateVarToken', () => {
+    it('detects DLT hash token', () => {
+      expect(isDltHashVarToken('{#x#}')).toBe(true);
+      expect(isDltHashVarToken('plain')).toBe(false);
+    });
+
+    it('isAnyTemplateVarToken combines mustache and DLT', () => {
+      expect(isAnyTemplateVarToken('{{a}}')).toBe(true);
+      expect(isAnyTemplateVarToken('{#x#}')).toBe(true);
+    });
+  });
+
+  describe('extractTemplateVariables', () => {
+    it('returns empty array for empty or missing template', () => {
+      expect(extractTemplateVariables('')).toEqual([]);
+      expect(extractTemplateVariables()).toEqual([]);
+    });
+
+    it('includes DLT {#var#} names when no custom capture regex', () => {
+      const vars = extractTemplateVariables('Hello {#promo#} and {{name}}');
+      expect(vars).toEqual(expect.arrayContaining(['promo', 'name']));
+    });
+
+    it('skips DLT scan when captureRegex is provided', () => {
+      const re = /\{\{([^}]+)\}\}/g;
+      expect(extractTemplateVariables('{#x#} {{y}}', re)).toEqual(['y']);
+    });
+
+    it('dedupes duplicate variable names', () => {
+      expect(extractTemplateVariables('{{a}} {{a}}')).toEqual(['a']);
+    });
+
+    it('uses default name var when DLT body capture is empty', () => {
+      const vars = extractTemplateVariables('{##}');
+      expect(vars).toContain('var');
+    });
+  });
+
+  describe('extractTemplateVariables (regex global)', () => {
+    it('extracts all vars when caller passes a non-global capture regex (avoids infinite exec loop)', () => {
+      const nonGlobal = /\{\{([^}]+)\}\}/;
+      expect(nonGlobal.global).toBe(false);
+      expect(extractTemplateVariables('{{a}} and {{b}}', nonGlobal)).toEqual(['a', 'b']);
+    });
+
+    it('still works when capture regex already has the global flag', () => {
+      const globalRe = /\{\{([^}]+)\}\}/g;
+      expect(extractTemplateVariables('{{x}} {{y}}', globalRe)).toEqual(['x', 'y']);
+    });
+  });
+});

package/app/v2Components/CapDeviceContent/index.js

@@ -63,6 +63,7 @@ const CapDeviceContent = (props) => {
     deepLinkValue,
     setDeepLinkValue,
     onCopyTitleAndContent,
+    isOtherDeviceSupported,
     tags,
     onTagSelect,
     handleOnTagsContextChange,
@@ -167,13 +168,15 @@ const CapDeviceContent = (props) => {
   return (
     <>
       <CapRow className="creatives-device-content">
-        <CapLink
-          title={isAndroid
-            ? formatMessage(messages.copyContentFromIOS)
-            : formatMessage(messages.copyCotentFromAndroid)}
-          className="inapp-copy-content"
-          onClick={onCopyTitleAndContent}
-        />
+        {isOtherDeviceSupported && (
+          <CapLink
+            title={isAndroid
+              ? formatMessage(messages.copyContentFromIOS)
+              : formatMessage(messages.copyCotentFromAndroid)}
+            className="inapp-copy-content"
+            onClick={onCopyTitleAndContent}
+          />
+        )}
         <CapRow className="creatives-inapp-title">
           <CapColumn
             className="inapp-content-main"

package/app/v2Components/CapTagList/index.js

@@ -211,6 +211,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       } else if (info && info.selectedNodes && info.selectedNodes.length > 0 && !info.selectedNodes[0].props.isLeaf) {
         this.handleOnExpand(selectedKeys[0]);
       }
+      this.setState({expandedKeys: []})
     }
   };
 
@@ -233,6 +234,13 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     }
   };
 
+  /** Single-line ellipsis within popover width; full label on hover via CapTooltip. */
+  wrapTreeTitle = (displayNode, text) => (
+    <CapTooltip title={displayNode}>
+      <CapLabel.CapLabelInline type="label15" className="cap-tag-list-tree-title-wrap">{text || displayNode}</CapLabel.CapLabelInline>
+    </CapTooltip>
+  );
+
   renderDynamicTagFlow = () => {
     this.setState({showModal: true, visible: false});
   };
@@ -280,7 +288,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         if (temp?.length) {
           const tagValue = (
             <CapTreeNode
-              title={disabled ? <CapTooltip title={loyaltyAttrDisableText}>{val?.name}</CapTooltip> : val?.name}
+              title={disabled ? this.wrapTreeTitle(loyaltyAttrDisableText, val?.name) : this.wrapTreeTitle(val?.name)}
               tag={val}
               key={val?.incentiveSeriesId ? `${key}(${val?.incentiveSeriesId})` : `${key}`}
               disabled={disabled}
@@ -303,17 +311,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
               <CapTreeNode
                 title={
                   childDisabled ? (
-                    <CapTooltip
-                      title={
-                        key === CUSTOMER_BARCODE_TAG
-                          ? customerBarcodeDisableText
-                          : loyaltyAttrDisableText
-                      }
-                    >
-                      {val?.desc || val?.name}
-                    </CapTooltip>
+                    this.wrapTreeTitle(key === CUSTOMER_BARCODE_TAG ? customerBarcodeDisableText : loyaltyAttrDisableText, val?.desc || val?.name)
                   ) : (
-                    val?.desc || val?.name
+                    this.wrapTreeTitle(val?.desc || val?.name)
                   )
                 }
                 tag={val}
@@ -339,17 +339,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             <CapTreeNode
               title={
                 childDisabled ? (
-                  <CapTooltip
-                    title={
-                      key === CUSTOMER_BARCODE_TAG
-                        ? customerBarcodeDisableText
-                        : loyaltyAttrDisableText
-                    }
-                  >
-                    {val?.desc || val?.name}
-                  </CapTooltip>
+                  this.wrapTreeTitle(key === CUSTOMER_BARCODE_TAG ? customerBarcodeDisableText : loyaltyAttrDisableText, val?.desc || val?.name)
                 ) : (
-                  val?.desc || val?.name
+                  this.wrapTreeTitle(val?.desc || val?.name)
                 )
               }
               tag={val}
@@ -382,6 +374,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   render() {
     const {
       hidePopover = false, intl = {}, moduleFilterEnabled, label, modalProps, channel, fetchingSchemaError = false,
+      overlayStyle,
+      overlayClassName,
+      getPopupContainer,
     } = this.props;
     const {formatMessage} = intl;
     const {
@@ -404,7 +399,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       },
     ];
     const contentSection = (
-      <CapRow>
+      <CapRow className="cap-tag-list-popover-inner">
         <CapSpin tip={formatMessage(messages.gettingTags)} spinning={shouldShowLoading}>
           <Search
             style={{ marginBottom: 8, width: '250px'}}
@@ -456,6 +451,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         </CapSpin>
       </CapRow>
     );
+    const {disableTooltipMsg, disabled} = this.props || {};
     return (
       <>
         {hidePopover ? (
@@ -471,12 +467,18 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             visible={fetchingSchemaError ? false : visible}
             onVisibleChange={this.togglePopoverVisibility}
             content={contentSection}
+            overlayClassName="cap-tag-list-popover-overlay"
             trigger="click"
             placement={this.props.popoverPlacement || (channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop")}
+            overlayStyle={overlayStyle}
+            overlayClassName={overlayClassName}
+            getPopupContainer={getPopupContainer}
           >
             <CapTooltip
               title={
-                fetchingSchemaError && (
+                disableTooltipMsg && disabled ? (
+                  disableTooltipMsg
+                ) : fetchingSchemaError ? (
                   <CapRow className="tooltip-text-container">
                     <CapLabel className="tooltip-text1">
                       {formatMessage(messages.somethingWentWrong)}
@@ -485,7 +487,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
                       {formatMessage(messages.labelFetchErrorMsg)}
                     </CapLabel>
                   </CapRow>
-                )
+                ) : null
               }
               placement="right"
             >
@@ -538,8 +540,14 @@ CapTagList.propTypes = {
   currentOrgDetails: PropTypes.object,
   channel: PropTypes.string,
   disabled: PropTypes.bool,
+  // Optional custom tooltip message when disabled (used for personalization restriction)
+  disableTooltipMsg: PropTypes.string,
   fetchingSchemaError: PropTypes.bool,
   popoverPlacement: PropTypes.string,
+  overlayStyle: PropTypes.object,
+  overlayClassName: PropTypes.string,
+  /** e.g. () => document.body — avoids overflow/stacking issues inside slideboxes */
+  getPopupContainer: PropTypes.func,
 };
 
 CapTagList.defaultValue = {

package/app/v2Components/CapTagList/style.scss

@@ -1,5 +1,53 @@
 @import "~@capillarytech/cap-ui-library/styles/_variables";
 
+// Tag list popover: keep overlay width aligned with search (250px); tree rows ellipsis + tooltip for full text
+.cap-tag-list-popover-overlay.ant-popover {
+  .ant-popover-inner-content {
+    max-width: 20rem;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+}
+
+.cap-tag-list-popover-inner {
+  max-width: 20rem;
+  min-width: 0;
+  box-sizing: border-box;
+
+  .ant-tree.cap-tree-v2.ant-tree-icon-hide {
+    width: 100%;
+    max-width: 100%;
+
+    ul {
+      max-width: 100%;
+    }
+
+    li {
+      overflow: hidden;
+      max-width: 100%;
+    }
+
+    li .ant-tree-node-content-wrapper {
+      width: calc(100% - 3.5rem); // leave room for switcher (~24px)
+      max-width: calc(100% - 3.5rem);
+      overflow: hidden;
+      vertical-align: top;
+      box-sizing: border-box;
+    }
+
+    .cap-tag-list-tree-title-wrap {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+      vertical-align: top;
+      margin-top: 0.5rem;
+    }
+  }
+}
+
 @media (max-height: 25rem) {
   .ant-tree.cap-tree-v2.ant-tree-icon-hide {
     height: 8.5714rem;

package/app/v2Components/CapTagListWithInput/__tests__/CapTagListWithInput.test.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+import CapTagListWithInput from '../index';
+
+const capturedTagListProps = { current: null };
+
+jest.mock('../../../v2Containers/TagList', () => {
+  const React = require('react');
+  const Mock = (props) => {
+    capturedTagListProps.current = props;
+    return <div data-testid="mock-tag-list">TagList</div>;
+  };
+  return Mock;
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => ({ children }) => <div>{children}</div>);
+jest.mock('@capillarytech/cap-ui-library/CapColumn', () => ({ children }) => <div>{children}</div>);
+jest.mock('@capillarytech/cap-ui-library/CapHeading', () => () => null);
+jest.mock('@capillarytech/cap-ui-library/CapInput', () => () => <input data-testid="cap-input" />);
+
+const waitMap = {
+  b1: { eventName: 'Order Placed', blockName: 'Wait', tags: [] },
+};
+
+describe('CapTagListWithInput', () => {
+  beforeEach(() => {
+    capturedTagListProps.current = null;
+  });
+
+  it('forwards waitEventContextTags to TagList', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CapTagListWithInput
+          inputId="test-url"
+          inputOnChange={jest.fn()}
+          waitEventContextTags={waitMap}
+          onTagSelect={jest.fn()}
+          onContextChange={jest.fn()}
+        />
+      </IntlProvider>
+    );
+
+    expect(screen.getByTestId('mock-tag-list')).toBeInTheDocument();
+    expect(capturedTagListProps.current.waitEventContextTags).toEqual(waitMap);
+  });
+
+  it('uses default empty object for waitEventContextTags when omitted', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CapTagListWithInput
+          inputId="test-url"
+          inputOnChange={jest.fn()}
+          onTagSelect={jest.fn()}
+          onContextChange={jest.fn()}
+        />
+      </IntlProvider>
+    );
+
+    expect(capturedTagListProps.current.waitEventContextTags).toEqual({});
+  });
+});

package/app/v2Components/CapTagListWithInput/index.js

@@ -26,6 +26,8 @@ export const CapTagListWithInput = (props) => {
     className = '',
     userLocale = 'en',
     eventContextTags = [],
+    restrictPersonalization = false,
+    waitEventContextTags = {},
     // CapInput props
     inputId,
     inputValue = '',
@@ -76,8 +78,10 @@ export const CapTagListWithInput = (props) => {
             userLocale={userLocale}
             selectedOfferDetails={selectedOfferDetails}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             style={tagListStyle}
             popoverPlacement={popoverPlacement}
+            restrictPersonalization={restrictPersonalization}
           />
         )}
       </CapRow>
@@ -113,6 +117,8 @@ CapTagListWithInput.propTypes = {
   className: PropTypes.string,
   userLocale: PropTypes.string,
   eventContextTags: PropTypes.array,
+  restrictPersonalization: PropTypes.bool,
+  waitEventContextTags: PropTypes.object,
 
   // CapInput props
   inputId: PropTypes.string.isRequired,
@@ -150,6 +156,8 @@ CapTagListWithInput.defaultProps = {
   className: '',
   userLocale: 'en',
   eventContextTags: [],
+  restrictPersonalization: false,
+  waitEventContextTags: {},
   inputValue: '',
   inputSize: 'default',
   inputRequired: false,

package/app/v2Components/CapWhatsappCTA/index.js

@@ -52,6 +52,7 @@ export const CapWhatsappCTA = (props) => {
     injectedTags = {},
     selectedOfferDetails = [],
     eventContextTags = [],
+    waitEventContextTags = {},
   } = props;
   const { formatMessage } = intl;
   const invalidVarRegex = /{{(.*?)}}/g;
@@ -283,6 +284,7 @@ export const CapWhatsappCTA = (props) => {
                   injectedTags={injectedTags}
                   selectedOfferDetails={selectedOfferDetails}
                   eventContextTags={eventContextTags}
+                  waitEventContextTags={waitEventContextTags}
                 />
               </CapColumn>
             )}

package/app/v2Components/CapWhatsappCarouselButton/index.js

@@ -55,19 +55,26 @@ export const CapWhatsappCarouselButton = (props) => {
   const invalidVarRegex = /{{(.*?)}}/g;
 
   const handleButtonType = ({ target: { value } }, buttonIndex) => {
-    const cloneCarouselData = cloneDeep(carouselData);
     const dataMap = {
       [PHONE_NUMBER]: INITIAL_CAROUSEL_PHONE_NUMBER_DATA,
       [URL]: INITIAL_CAROUSEL_URL_DATA,
       [QUICK_REPLY]: INITIAL_CAROUSEL_QUICK_REPLY_DATA,
     };
+    const initialData = dataMap[value];
+    const newButtonData = initialData ? cloneDeep(initialData) : {};
 
-    const updatedCarouselData = cloneCarouselData.map((carousel) => {
-      carousel.buttons[buttonIndex] = dataMap[value] || {};
-      return carousel;
-    });
-
-    setCarouselData(updatedCarouselData);
+    setCarouselData(
+      carouselData.map((item, index) =>
+        index === carouselIndex
+          ? {
+              ...item,
+              buttons: item.buttons.map((btn, i) =>
+                i === buttonIndex ? newButtonData : btn
+              ),
+            }
+          : item
+      )
+    );
   };
 
   const onValueChange = (buttonIndex, fields = []) => {
@@ -148,17 +155,28 @@ export const CapWhatsappCarouselButton = (props) => {
   };
 
   const handleDeleteButton = (buttonIndex) => {
-    setCarouselData((prevData) => prevData.map((carousel) => ({
-      ...carousel,
-      buttons: carousel.buttons.filter((_, index) => index !== buttonIndex),
-    })));
+    setCarouselData((prevData) =>
+      prevData.map((carousel, index) =>
+        index === carouselIndex
+          ? {
+              ...carousel,
+              buttons: carousel.buttons.filter((_, i) => i !== buttonIndex),
+            }
+          : carousel
+      )
+    );
   };
 
   const addCarouselButton = () => {
     setCarouselData(
-      carouselData.map((item, index) => index === carouselIndex
-        ? { ...item, buttons: [...buttonData, INITIAL_CAROUSEL_PHONE_NUMBER_DATA] }
-        : item)
+      carouselData.map((item, index) =>
+        index === carouselIndex
+          ? {
+              ...item,
+              buttons: [...buttonData, cloneDeep(INITIAL_CAROUSEL_PHONE_NUMBER_DATA)],
+            }
+          : item
+      )
     );
   };