@capillarytech/creatives-library 9.0.7 → 9.0.9

package/package.json

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

package/v2Components/TemplatePreview/_templatePreview.scss

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

package/v2Components/TemplatePreview/index.js

@@ -727,7 +727,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
               ""
             )}
             {channel && channel.toUpperCase() === MOBILE_PUSH && (
-              <CapRow className="shell-v2 align-center" id="mobilepush-preview">
+              <CapRow type='flex' align='middle' className="shell-v2 align-center" id="mobilepush-preview">
                 <CapImage
                   className="preview-image"
                   src={
@@ -747,13 +747,13 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                     }-push-message-Container`}
                   >
                     {this.props.device === "android" ? (
-                      <CapRow className="message-pop align-left">
-                        <CapRow className="app-header">
-                          <CapRow className="app-header-left">
+                      <CapRow type='flex' align='middle' className="message-pop align-left">
+                        <CapRow type='flex' fullWidth className="app-header">
+                          <CapRow type='flex' className="app-header-left">
                           <span className="app-icon">{""}</span>
                           <CapLabel className="title">{content.header}</CapLabel>
                           </CapRow>
-                          <CapRow className="app-header-right">
+                          <CapRow type='flex' className="app-header-right">
                             <span>2:29 PM</span>
                             <CapIcon type="chevron-down" size="sm" />
                           </CapRow>
@@ -1291,7 +1291,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                 </div>
                 <CapHeading
                   type="h3"
-                  style={{ textAlign: "center" }}
+                  style={{ textAlign: "center", width: "100%" }}
                   className="margin-t-16"
                 >
                   <FormattedMessage

package/v2Containers/Rcs/index.js

@@ -2431,7 +2431,7 @@ const splitTemplateVarString = (str) => {
                 />
                 <CapHeading
                   type="h3"
-                  style={{ textAlign: 'center' }}
+                  style={{ textAlign: 'center', width: '100%' }}
                   className="margin-t-16"
                 >
                   {formatMessage(messages.totalCharacters, {

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

@@ -1,6 +1,4 @@
 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';
@@ -232,31 +230,10 @@ describe('MessageSection', () => {
   });
 
   describe('TextArea Ref Handling', () => {
-    it('should not pass the dropped setInputRef prop to CapInput.TextArea', () => {
+    it('should call handleMessageTextAreaRef with setInputRef', () => {
       const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
       const textArea = wrapper.find(CapInput.TextArea);
-      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();
+      expect(textArea.prop('setInputRef')).toBe(mockHandleMessageTextAreaRef);
     });
 
     it('should pass messageTextAreaRef to CapEmojiPicker.Wrapper', () => {

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

@@ -47,6 +47,7 @@ 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/v2Components/NewCallTask/tests/insertAtCursor.test.js

@@ -1,85 +0,0 @@
-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');
-  });
-});