@capillarytech/creatives-library 9.0.2 → 9.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.2",
+  "version": "9.0.4",
   "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/v2Components/TemplatePreview/_templatePreview.scss

@@ -890,10 +890,6 @@
   .sms-icon{
     left: 12% !important;
   }
-
-  #mobilepush-preview .message-pop .app-header .app-header-right {
-    margin-left: unset;
-  }
 }
 
 #slidebox-container {

package/v2Components/TemplatePreview/index.js

@@ -644,7 +644,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                     src={smsMobileAndroid}
                     alt={this.props.intl.formatMessage(messages.previewGenerated)}
                   />
-                  <CapRow useLegacy className="msg-container sms">
+                  <CapRow className="msg-container sms">
                     <CapRow useLegacy className={"message-pop sms"}>
                       {content &&
                         content.length &&
@@ -748,12 +748,12 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                   >
                     {this.props.device === "android" ? (
                       <CapRow className="message-pop align-left">
-                        <CapRow type='flex' align='middle' justify='space-between' className="app-header">
-                          <CapRow type='flex' align='middle' className="app-header-left">
+                        <CapRow className="app-header">
+                          <CapRow className="app-header-left">
                           <span className="app-icon">{""}</span>
                           <CapLabel className="title">{content.header}</CapLabel>
                           </CapRow>
-                          <CapRow type='flex' align='middle' className="app-header-right">
+                          <CapRow className="app-header-right">
                             <span>2:29 PM</span>
                             <CapIcon type="chevron-down" size="sm" />
                           </CapRow>
@@ -812,12 +812,12 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                       </CapRow>
                     ) : (
                       <CapRow className="message-pop align-left">
-                        <CapRow type='flex' align='middle' justify='space-between' className="app-header">
-                          <CapRow type='flex' align='middle' className="app-header-left">
+                        <CapRow className="app-header">
+                          <CapRow className="app-header-left">
                           <span className="app-icon">{""}</span>
                           <CapLabel className="title">{content.header}</CapLabel>
                           </CapRow>
-                          <CapRow type='flex' align='middle' className="app-header-right">
+                          <CapRow className="app-header-right">
                             <span>2:29 PM</span>
                             <CapIcon type="chevron-down" size="sm" />
                           </CapRow>

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

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>