@capillarytech/creatives-library 9.0.3 → 9.0.5

package/package.json

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

package/v2Components/NewCallTask/index.js

@@ -40,18 +40,15 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
     this.insertAtCursor(`{{${data}}}`);
   }
 
-  setInputRef = (textarea) => {
-    this.textArea = textarea;
-  }
-
   insertAtCursor = (myValue) => {
-    this.textArea.focus();
-    const textAreaRef = this.textArea.textAreaRef;
+    const textAreaRef = document.getElementById('new-call-task-message-body');
+    if (!textAreaRef) return;
+    textAreaRef.focus();
     let pos = textAreaRef.selectionEnd + myValue.length;
     //IE support
     let newMessage = textAreaRef.value + myValue;
     if (document.selection) {
-      this.textArea.focus();
+      textAreaRef.focus();
       const sel = document.selection.createRange();
       sel.text = myValue;
     } else if (textAreaRef.selectionStart || textAreaRef.selectionStart === '0') { //MOZILLA and others
@@ -128,7 +125,7 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
                   injectedTags={injectedTags}
                 />
                 <CapInput.TextArea
-                  setInputRef={this.setInputRef}
+                  id="new-call-task-message-body"
                   label={formatMessage(messages.messageHeader)}
                   onChange={this.updateMessageBody}
                   value={messageBody}

package/v2Components/NewCallTask/tests/insertAtCursor.test.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { configure, mount } from 'enzyme';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+import { IntlProvider } from 'react-intl';
+import { act } from 'react-dom/test-utils';
+
+// TagList is a redux-auth-wrapper-connected container that needs full app routing
+// state to mount; CallTaskPreview is irrelevant to insertAtCursor. Stub both so we
+// can mount the real NewCallTask and exercise its real insertAtCursor method.
+jest.mock('../../../v2Containers/TagList', () => {
+  const Stub = () => null;
+  return { __esModule: true, default: Stub, TagList: Stub };
+});
+jest.mock('../../CallTaskPreview', () => {
+  const Stub = () => null;
+  return { __esModule: true, default: Stub };
+});
+// hasStore2DoorFeature() reads app/org config that isn't present in jsdom.
+jest.mock('../../../utils/common', () => ({
+  ...jest.requireActual('../../../utils/common'),
+  hasStore2DoorFeature: () => false,
+}));
+
+// eslint-disable-next-line import/first
+import NewCallTask from '../index';
+// eslint-disable-next-line import/first
+import mockData from './mockData';
+
+configure({ adapter: new Adapter() });
+
+let container;
+let wrapper;
+
+afterEach(() => {
+  if (wrapper) wrapper.unmount();
+  if (container) container.remove();
+  wrapper = undefined;
+  container = undefined;
+});
+
+// attachTo a real node in document.body so document.getElementById can find the
+// antd-rendered <textarea> (enzyme `mount` is detached from `document` otherwise).
+const mountNewCallTask = (extraProps = {}) => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  wrapper = mount(
+    <IntlProvider locale="en">
+      <NewCallTask {...mockData} onCallTaskSubmit={jest.fn()} {...extraProps} />
+    </IntlProvider>,
+    { attachTo: container },
+  );
+  return wrapper;
+};
+
+// Regression coverage for the antd v3 -> v6 (cap-ui-library v6) migration: the lib
+// dropped the `setInputRef` callback, so selecting a personalisation tag used to
+// crash with "Cannot read properties of undefined (reading 'focus')". The fix
+// resolves the DOM <textarea> via document.getElementById instead.
+describe('NewCallTask insertAtCursor (antd v6 setInputRef removal)', () => {
+  it('forwards the id to a real DOM <textarea>', () => {
+    mountNewCallTask();
+    const textarea = document.getElementById('new-call-task-message-body');
+    expect(textarea).not.toBeNull();
+    expect(textarea.tagName).toBe('TEXTAREA');
+  });
+
+  it('inserts a personalisation tag at the caret without throwing', () => {
+    const wrapper = mountNewCallTask();
+    const textarea = document.getElementById('new-call-task-message-body');
+
+    // user typed "Hello world" and put the caret right after "Hello "
+    textarea.value = 'Hello world';
+    textarea.setSelectionRange(6, 6);
+
+    const instance = wrapper.find('NewCallTask').instance();
+    expect(() => {
+      act(() => {
+        instance.onTagSelect('firstName');
+      });
+    }).not.toThrow();
+
+    // tag spliced in at the caret, not appended blindly
+    expect(instance.state.messageBody).toBe('Hello {{firstName}}world');
+  });
+});

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

@@ -361,7 +361,7 @@ const ChannelSelectionStep = ({
     // Add incentive in actions (campaigns-ui style: cap-card-action-container)
     if (hasIncentiveOptions) {
       card.actions = [
-        <CapRow className="cap-card-action-container add-incentive-action-row" key="add-incentive">
+        <CapRow type='flex' align="middle" className="cap-card-action-container add-incentive-action-row" key="add-incentive">
           <CapDropdown
             overlay={renderIncentiveDropdownOverlay((menuClickEvent) => handleIncentiveMenuClick(menuClickEvent, item.contentId))}
             onVisibleChange={(visible) => handleIncentivesVisibleChange(visible, item.contentId)}

package/v2Containers/FTP/index.js

@@ -166,10 +166,6 @@ export class FTP extends React.Component {
     this.insertAtCursor(`{{${data}}}`);
   };
 
-  setInputRef = (textarea) => {
-    this.textArea = textarea;
-  };
-
   getServerSelectionContent = () => {
     const { getFTPServersInProgress } = this.props.FTP || {};
     const { formatMessage } = this.props.intl;
@@ -257,7 +253,7 @@ export class FTP extends React.Component {
               injectedTags={injectedTags || {}}
             />
             <CapInput.TextArea
-              setInputRef={this.setInputRef}
+              id="ftp-message-content"
               label={formatMessage(messages.messageHeader)}
               onChange={this.updateMessageBody}
               value={messageContent}
@@ -529,13 +525,14 @@ export class FTP extends React.Component {
   };
 
   insertAtCursor = (myValue) => {
-    this.textArea.focus();
-    const textAreaRef = this.textArea.textAreaRef;
+    const textAreaRef = document.getElementById('ftp-message-content');
+    if (!textAreaRef) return;
+    textAreaRef.focus();
     let pos = textAreaRef.selectionEnd + myValue.length;
     //IE support
     let newMessage = textAreaRef.value + myValue;
     if (document.selection) {
-      this.textArea.focus();
+      textAreaRef.focus();
       const sel = document.selection.createRange();
       sel.text = myValue;
     } else if (textAreaRef.selectionStart || textAreaRef.selectionStart === '0') { //MOZILLA and others

package/v2Containers/WebPush/Create/components/MessageSection.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import CapInput from '@capillarytech/cap-ui-library/CapInput';
@@ -73,6 +73,13 @@ export const MessageSection = ({
   handleMessageTextAreaRef,
   isAiContentBotDisabled,
 }) => {
+  // resolve the underlying DOM
+  // <textarea> by id and feed it to the existing ref handler. CapEmojiPicker and
+  // the Aira trigger both read `messageTextAreaRef.current` as that DOM node.
+  useEffect(() => {
+    handleMessageTextAreaRef(document?.getElementById('webpush-message-input'));
+  }, [handleMessageTextAreaRef]);
+
   const renderCharacterCount = () => {
     if (!SHOW_CHARACTER_COUNT) return null;
 
@@ -119,7 +126,6 @@ export const MessageSection = ({
               size="default"
               isRequired
               autosize={{ minRows: 3, maxRows: 5 }}
-              setInputRef={handleMessageTextAreaRef}
               errorMessage={
                 error && (
                   <CapError className="webpush-template-message-error">
@@ -146,7 +152,7 @@ MessageSection.propTypes = {
   tagList: PropTypes.node,
   messageCountRef: PropTypes.object,
   messageTextAreaRef: PropTypes.object,
-  handleMessageTextAreaRef: PropTypes.func.isRequired,
+  handleMessageTextAreaRef: PropTypes.func,
   isAiContentBotDisabled: PropTypes.bool,
 };
 
@@ -155,6 +161,7 @@ MessageSection.defaultProps = {
   tagList: null,
   messageCountRef: null,
   messageTextAreaRef: null,
+  handleMessageTextAreaRef: () => {},
   isAiContentBotDisabled: false,
 };
 

package/v2Containers/WebPush/Create/components/MessageSection.test.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { mount } from 'enzyme';
+import { IntlProvider } from 'react-intl';
 import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
 import MessageSection from './MessageSection';
 import CapInput from '@capillarytech/cap-ui-library/CapInput';
@@ -230,10 +232,31 @@ describe('MessageSection', () => {
   });
 
   describe('TextArea Ref Handling', () => {
-    it('should call handleMessageTextAreaRef with setInputRef', () => {
+    it('should not pass the dropped setInputRef prop to CapInput.TextArea', () => {
       const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
       const textArea = wrapper.find(CapInput.TextArea);
-      expect(textArea.prop('setInputRef')).toBe(mockHandleMessageTextAreaRef);
+      expect(textArea.prop('setInputRef')).toBeUndefined();
+    });
+
+    it('should resolve the DOM textarea by id and feed it to handleMessageTextAreaRef on mount', () => {
+      // attachTo a real DOM node so document.getElementById can find the
+      // antd-rendered <textarea> (enzyme mount is detached from document otherwise).
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const wrapper = mount(
+        <IntlProvider locale="en">
+          <MessageSection {...defaultProps} />
+        </IntlProvider>,
+        { attachTo: container }
+      );
+
+      const textarea = document.getElementById('webpush-message-input');
+      expect(textarea).not.toBeNull();
+      expect(textarea.tagName).toBe('TEXTAREA');
+      expect(mockHandleMessageTextAreaRef).toHaveBeenCalledWith(textarea);
+
+      wrapper.unmount();
+      container.remove();
     });
 
     it('should pass messageTextAreaRef to CapEmojiPicker.Wrapper', () => {

package/v2Containers/WebPush/Create/components/__snapshots__/MessageSection.test.js.snap

@@ -47,7 +47,6 @@ exports[`MessageSection Rendering should render correctly with default props 1`]
           id="webpush-message-input"
           isRequired={true}
           onChange={[MockFunction]}
-          setInputRef={[MockFunction]}
           size="default"
           value="Test Message"
         />

package/v2Containers/WebPush/Create/preview/PreviewControls.js

@@ -10,6 +10,9 @@ import { getBrowserOptionsForOS, getSupportedStates } from './config/notificatio
 import messages from '../messages';
 import './preview.scss';
 
+const getDropdownPopupContainer = (triggerNode) =>
+  triggerNode.closest('.ant-modal-container, .ant-modal-content') || document.body;
+
 /**
  * PreviewControls Component
  * 
@@ -67,6 +70,7 @@ const PreviewControls = ({
         options={stateOptions}
         value={selectedState}
         onChange={onStateChange}
+        getPopupContainer={getDropdownPopupContainer}
         // Note: Add tooltip prop here when tooltip mechanism is implemented
         // tooltip={tooltipMessage ? tooltipMessage : undefined}
       />
@@ -198,6 +202,7 @@ const PreviewControls = ({
           options={options}
           value={value}
           onChange={onChange}
+          getPopupContainer={getDropdownPopupContainer}
         />
       </>
     );
@@ -235,6 +240,7 @@ const PreviewControls = ({
             options={osOptions}
             value={selectedOS}
             onChange={handleOSChangeWithCascade}
+            getPopupContainer={getDropdownPopupContainer}
           />
         </CapColumn>
         <CapColumn span={12} className="preview-control-browser">
@@ -246,6 +252,7 @@ const PreviewControls = ({
             options={browserOptions}
             value={selectedBrowser}
             onChange={handleBrowserChangeWithCascade}
+            getPopupContainer={getDropdownPopupContainer}
           />
         </CapColumn>
       </CapRow>

package/v2Containers/WebPush/Create/preview/tests/PreviewControls.test.js

@@ -700,6 +700,147 @@ describe('PreviewControls', () => {
     });
   });
 
+  describe('getPopupContainer (getDropdownPopupContainer)', () => {
+    const getResolver = (wrapper) =>
+      wrapper.find(CapSelect.CapCustomSelect).first().prop('getPopupContainer');
+
+    let appended;
+
+    beforeEach(() => {
+      appended = [];
+    });
+
+    afterEach(() => {
+      // Keep jsdom clean between assertions so containers from one test don't leak
+      appended.forEach((node) => {
+        if (node && node.parentNode) {
+          node.parentNode.removeChild(node);
+        }
+      });
+      appended = [];
+    });
+
+    const mountInBody = (node) => {
+      document.body.appendChild(node);
+      appended.push(node);
+      return node;
+    };
+
+    it('should pass getPopupContainer to every rendered select', () => {
+      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
+      const selects = wrapper.find(CapSelect.CapCustomSelect);
+      expect(selects.length).toBe(3);
+      selects.forEach((select) => {
+        expect(typeof select.prop('getPopupContainer')).toBe('function');
+      });
+    });
+
+    it('should return the closest .ant-modal-container ancestor when one exists', () => {
+      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
+      const getPopupContainer = getResolver(wrapper);
+
+      const modalContainer = document.createElement('div');
+      modalContainer.className = 'ant-modal-container';
+      const triggerNode = document.createElement('span');
+      modalContainer.appendChild(triggerNode);
+      mountInBody(modalContainer);
+
+      expect(getPopupContainer(triggerNode)).toBe(modalContainer);
+    });
+
+    it('should return the closest .ant-modal-content ancestor when one exists', () => {
+      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
+      const getPopupContainer = getResolver(wrapper);
+
+      const modalContent = document.createElement('div');
+      modalContent.className = 'ant-modal-content';
+      const triggerNode = document.createElement('span');
+      modalContent.appendChild(triggerNode);
+      mountInBody(modalContent);
+
+      expect(getPopupContainer(triggerNode)).toBe(modalContent);
+    });
+
+    it('should resolve through deeply nested descendants up to the modal ancestor', () => {
+      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
+      const getPopupContainer = getResolver(wrapper);
+
+      const modalContainer = document.createElement('div');
+      modalContainer.className = 'ant-modal-container';
+      const middle = document.createElement('div');
+      const triggerNode = document.createElement('span');
+      middle.appendChild(triggerNode);
+      modalContainer.appendChild(middle);
+      mountInBody(modalContainer);
+
+      expect(getPopupContainer(triggerNode)).toBe(modalContainer);
+    });
+
+    it('should match the trigger node itself when it is the modal container', () => {
+      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
+      const getPopupContainer = getResolver(wrapper);
+
+      const modalContainer = document.createElement('div');
+      modalContainer.className = 'ant-modal-content';
+      mountInBody(modalContainer);
+
+      // closest() includes the element itself, so a self-match should be returned
+      expect(getPopupContainer(modalContainer)).toBe(modalContainer);
+    });
+
+    it('should pick the nearest modal ancestor when modals are nested', () => {
+      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
+      const getPopupContainer = getResolver(wrapper);
+
+      const outerModal = document.createElement('div');
+      outerModal.className = 'ant-modal-container';
+      const innerModal = document.createElement('div');
+      innerModal.className = 'ant-modal-content';
+      const triggerNode = document.createElement('span');
+      innerModal.appendChild(triggerNode);
+      outerModal.appendChild(innerModal);
+      mountInBody(outerModal);
+
+      expect(getPopupContainer(triggerNode)).toBe(innerModal);
+    });
+
+    it('should fall back to document.body when the trigger is not inside a modal', () => {
+      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
+      const getPopupContainer = getResolver(wrapper);
+
+      const wrapperDiv = document.createElement('div');
+      wrapperDiv.className = 'some-unrelated-container';
+      const triggerNode = document.createElement('span');
+      wrapperDiv.appendChild(triggerNode);
+      mountInBody(wrapperDiv);
+
+      expect(getPopupContainer(triggerNode)).toBe(document.body);
+    });
+
+    it('should fall back to document.body for a detached (unattached) trigger node', () => {
+      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
+      const getPopupContainer = getResolver(wrapper);
+
+      const detachedNode = document.createElement('span');
+      expect(getPopupContainer(detachedNode)).toBe(document.body);
+    });
+
+    it('should resolve the same way for the compact layout selects', () => {
+      const wrapper = mountWithIntl(
+        <PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.COMPACT} showStateDropdown={true} />,
+      );
+      const getPopupContainer = getResolver(wrapper);
+
+      const modalContainer = document.createElement('div');
+      modalContainer.className = 'ant-modal-container';
+      const triggerNode = document.createElement('span');
+      modalContainer.appendChild(triggerNode);
+      mountInBody(modalContainer);
+
+      expect(getPopupContainer(triggerNode)).toBe(modalContainer);
+    });
+  });
+
   describe('FormattedMessage Integration', () => {
     it('should render FormattedMessage for operatingSystem label', () => {
       const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);

package/v2Containers/WebPush/Create/preview/tests/__snapshots__/PreviewControls.test.js.snap

@@ -21,6 +21,7 @@ exports[`PreviewControls Basic Rendering should render correctly with default pr
         />
       </CapLabel>
       <ComponentWithLabel(InjectIntl(CapCustomSelect))
+        getPopupContainer={[Function]}
         onChange={[Function]}
         options={
           Array [
@@ -70,6 +71,7 @@ exports[`PreviewControls Basic Rendering should render correctly with default pr
         />
       </CapLabel>
       <ComponentWithLabel(InjectIntl(CapCustomSelect))
+        getPopupContainer={[Function]}
         onChange={[Function]}
         options={
           Array [
@@ -119,6 +121,7 @@ exports[`PreviewControls Basic Rendering should render correctly with default pr
         />
       </CapLabel>
       <ComponentWithLabel(InjectIntl(CapCustomSelect))
+        getPopupContainer={[Function]}
         onChange={[MockFunction]}
         options={
           Array [