@capillarytech/creatives-library 8.0.316-alpha.0 → 8.0.316-alpha.1

package/package.json

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

package/utils/common.js

@@ -16,6 +16,7 @@ import {
   REGISTRATION_CUSTOM_FIELD,
   JP_LOCALE_HIDE_FEATURE,
   ENABLE_CUSTOMER_BARCODE_TAG,
+  AI_CONTENT_BOT_DISABLED,
   BADGES_UI_ENABLED,
   BADGES_ENROLL,
   EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
@@ -126,6 +127,11 @@ export const hasCustomerBarcodeFeatureEnabled = Auth.hasFeatureAccess.bind(
   ENABLE_CUSTOMER_BARCODE_TAG,
 );
 
+export const isAiContentBotDisabled = Auth.hasFeatureAccess.bind(
+  null,
+  AI_CONTENT_BOT_DISABLED,
+);
+
 // Note: The "EMAIL_UNSUBSCRIBE_TAG_MANDATORY" feature flag determines if the Unsubscribe tag in email is optional. 
 // When this flag is enabled for an org, the Unsubscribe tag is NOT mandatory in the email flow.
 // This is as per the requirement in the tech doc:

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import CapInput from '@capillarytech/cap-ui-library/CapInput';
@@ -8,7 +8,9 @@ import CapError from '@capillarytech/cap-ui-library/CapError';
 import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import CapEmojiPicker from '@capillarytech/cap-ui-library/CapEmojiPicker';
 import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
 import { MESSAGE_MAX_LENGTH, SHOW_CHARACTER_COUNT } from '../../constants';
+import { useAiraTriggerPosition } from '../hooks/useAiraTriggerPosition';
 
 /**
  * MessageSection component - Message textarea with tags, emoji picker, and character count
@@ -23,7 +25,15 @@ export const MessageSection = ({
   messageCountRef,
   messageTextAreaRef,
   handleMessageTextAreaRef,
+  isAiContentBotDisabled,
 }) => {
+  const messageInputWrapperRef = useRef(null);
+  const airaRootStyle = useAiraTriggerPosition({
+    wrapperRef: messageInputWrapperRef,
+    inputRef: messageTextAreaRef,
+    error,
+  });
+
   const renderCharacterCount = () => {
     if (!SHOW_CHARACTER_COUNT) return null;
 
@@ -50,29 +60,40 @@ export const MessageSection = ({
         <CapHeading type="h4" className="webpush-message">
           <FormattedMessage {...messages.message} />
         </CapHeading>
-        <CapEmojiPicker.Wrapper
-          value={value}
-          onChange={onChange}
-          textAreaRef={messageTextAreaRef}
-        >
-          <CapInput.TextArea
-            id="webpush-message-input"
+        <div className="webpush-message-input-wrapper" ref={messageInputWrapperRef}>
+          <CapEmojiPicker.Wrapper
             value={value}
             onChange={onChange}
-            placeholder={formatMessage(messages.messagePlaceholder)}
-            size="default"
-            isRequired
-            autosize={{ minRows: 3, maxRows: 5 }}
-            setInputRef={handleMessageTextAreaRef}
-            errorMessage={
-              error && (
-                <CapError className="webpush-template-message-error">
-                  {error}
-                </CapError>
-              )
-            }
-          />
-        </CapEmojiPicker.Wrapper>
+            textAreaRef={messageTextAreaRef}
+          >
+            <CapInput.TextArea
+              id="webpush-message-input"
+              value={value}
+              onChange={onChange}
+              placeholder={formatMessage(messages.messagePlaceholder)}
+              size="default"
+              isRequired
+              autosize={{ minRows: 3, maxRows: 5 }}
+              setInputRef={handleMessageTextAreaRef}
+              errorMessage={
+                error && (
+                  <CapError className="webpush-template-message-error">
+                    {error}
+                  </CapError>
+                )
+              }
+            />
+          </CapEmojiPicker.Wrapper>
+          {!isAiContentBotDisabled && (
+            <CapAskAira.ContentGenerationBot
+              text={value || ''}
+              setText={(text) => onChange(text)}
+              iconPlacement="float-br"
+              iconSize="1.6rem"
+              rootStyle={airaRootStyle}
+            />
+          )}
+        </div>
         {renderCharacterCount()}
       </CapRow>
       <CapDivider className="webpush-message-divider" />
@@ -90,6 +111,7 @@ MessageSection.propTypes = {
   messageCountRef: PropTypes.object,
   messageTextAreaRef: PropTypes.object,
   handleMessageTextAreaRef: PropTypes.func.isRequired,
+  isAiContentBotDisabled: PropTypes.bool,
 };
 
 MessageSection.defaultProps = {
@@ -97,6 +119,7 @@ MessageSection.defaultProps = {
   tagList: null,
   messageCountRef: null,
   messageTextAreaRef: null,
+  isAiContentBotDisabled: false,
 };
 
 export default MessageSection;

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

@@ -8,6 +8,7 @@ import CapError from '@capillarytech/cap-ui-library/CapError';
 import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import CapEmojiPicker from '@capillarytech/cap-ui-library/CapEmojiPicker';
 import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
 import { MESSAGE_MAX_LENGTH, SHOW_CHARACTER_COUNT } from '../../constants';
 
 describe('MessageSection', () => {
@@ -45,6 +46,7 @@ describe('MessageSection', () => {
     messageCountRef: null,
     messageTextAreaRef: null,
     handleMessageTextAreaRef: mockHandleMessageTextAreaRef,
+    isAiContentBotDisabled: true,
   };
 
   beforeEach(() => {
@@ -76,6 +78,32 @@ describe('MessageSection', () => {
       expect(emojiPicker.prop('value')).toBe('Test Message');
     });
 
+    it('should not render aiRA button when feature is disabled', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
+      expect(wrapper.find(CapAskAira.ContentGenerationBot).exists()).toBe(false);
+    });
+
+    it('should render aiRA button when feature is enabled', () => {
+      const wrapper = mountWithIntl(
+        <MessageSection {...defaultProps} isAiContentBotDisabled={false} />
+      );
+      const airaBot = wrapper.find(CapAskAira.ContentGenerationBot);
+      expect(airaBot.exists()).toBe(true);
+      expect(airaBot.prop('text')).toBe('Test Message');
+      expect(airaBot.prop('rootStyle')).toMatchObject({
+        right: '2.5rem',
+        left: 'auto',
+      });
+    });
+
+    it('should render aiRA and emoji controls together', () => {
+      const wrapper = mountWithIntl(
+        <MessageSection {...defaultProps} isAiContentBotDisabled={false} />
+      );
+      expect(wrapper.find(CapAskAira.ContentGenerationBot).exists()).toBe(true);
+      expect(wrapper.find(CapEmojiPicker.Wrapper).exists()).toBe(true);
+    });
+
     it('should render CapInput.TextArea with correct props', () => {
       const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
       const textArea = wrapper.find(CapInput.TextArea);
@@ -145,6 +173,23 @@ describe('MessageSection', () => {
       const textArea = wrapper.find(CapInput.TextArea);
       expect(textArea.prop('errorMessage')).toBeDefined();
     });
+
+    it('should keep aiRA visible and anchored when error is present', () => {
+      const errorMessage = 'Message is required';
+      const wrapper = mountWithIntl(
+        <MessageSection
+          {...defaultProps}
+          error={errorMessage}
+          isAiContentBotDisabled={false}
+        />
+      );
+      const airaBot = wrapper.find(CapAskAira.ContentGenerationBot);
+      expect(airaBot.exists()).toBe(true);
+      expect(airaBot.prop('rootStyle')).toMatchObject({
+        right: '2.5rem',
+        left: 'auto',
+      });
+    });
   });
 
   describe('Character Count', () => {
@@ -216,6 +261,15 @@ describe('MessageSection', () => {
       emojiPicker.prop('onChange')('New Message');
       expect(mockOnChange).toHaveBeenCalledWith('New Message');
     });
+
+    it('should call onChange when aiRA returns generated text', () => {
+      const wrapper = mountWithIntl(
+        <MessageSection {...defaultProps} isAiContentBotDisabled={false} />
+      );
+      const airaBot = wrapper.find(CapAskAira.ContentGenerationBot);
+      airaBot.prop('setText')('Generated by aiRA');
+      expect(mockOnChange).toHaveBeenCalledWith('Generated by aiRA');
+    });
   });
 
   describe('Default Props', () => {

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

@@ -18,28 +18,32 @@ exports[`MessageSection Rendering should render correctly with default props 1`]
         values={Object {}}
       />
     </CapHeading>
-    <InjectIntl(Wrapper)
-      onChange={[MockFunction]}
-      textAreaRef={null}
-      value="Test Message"
+    <div
+      className="webpush-message-input-wrapper"
     >
-      <_Class
-        autosize={
-          Object {
-            "maxRows": 5,
-            "minRows": 3,
-          }
-        }
-        errorMessage=""
-        id="webpush-message-input"
-        isRequired={true}
-        labelPosition="top"
+      <InjectIntl(Wrapper)
         onChange={[MockFunction]}
-        setInputRef={[MockFunction]}
-        size="default"
+        textAreaRef={null}
         value="Test Message"
-      />
-    </InjectIntl(Wrapper)>
+      >
+        <_Class
+          autosize={
+            Object {
+              "maxRows": 5,
+              "minRows": 3,
+            }
+          }
+          errorMessage=""
+          id="webpush-message-input"
+          isRequired={true}
+          labelPosition="top"
+          onChange={[MockFunction]}
+          setInputRef={[MockFunction]}
+          size="default"
+          value="Test Message"
+        />
+      </InjectIntl(Wrapper)>
+    </div>
     <CapLabel
       className="webpush-character-count"
       type="label2"

package/v2Containers/WebPush/Create/hooks/useAiraTriggerPosition.js

@@ -0,0 +1,80 @@
+import { useEffect, useMemo, useState } from 'react';
+
+const DEFAULT_BOTTOM = '0.83rem';
+
+export const getBottomOffset = (wrapperElement, inputElement, hasError) => {
+  if (!wrapperElement || !inputElement) {
+    return DEFAULT_BOTTOM;
+  }
+
+  if (!hasError) {
+    return DEFAULT_BOTTOM;
+  }
+
+  const inputRect = inputElement.getBoundingClientRect();
+  const wrapperRect = wrapperElement.getBoundingClientRect();
+  const inputBottomFromWrapperTop = inputRect.bottom - wrapperRect.top;
+  const distanceFromWrapperBottom = wrapperRect.height - inputBottomFromWrapperTop;
+
+  return `${Math.max(distanceFromWrapperBottom + 4, 4)}px`;
+};
+
+export const useAiraTriggerPosition = ({
+  wrapperRef,
+  inputRef,
+  rightOffset = '2.5rem',
+  error,
+}) => {
+  const [bottomOffset, setBottomOffset] = useState(DEFAULT_BOTTOM);
+
+  useEffect(() => {
+    const wrapperElement = wrapperRef?.current;
+    if (!wrapperElement) {
+      setBottomOffset(DEFAULT_BOTTOM);
+      return undefined;
+    }
+
+    const updatePosition = () => {
+      const inputElement = inputRef?.current;
+      const hasError = Boolean(
+        error
+        || wrapperElement.querySelector('.error-message')
+        || wrapperElement.querySelector('.webpush-template-message-error'),
+      );
+      const nextOffset = getBottomOffset(wrapperElement, inputElement, hasError);
+      setBottomOffset((prevOffset) => (
+        prevOffset === nextOffset ? prevOffset : nextOffset
+      ));
+    };
+
+    const rafId = requestAnimationFrame(updatePosition);
+    let resizeObserver = null;
+
+    if (window.ResizeObserver) {
+      resizeObserver = new window.ResizeObserver(() => {
+        updatePosition();
+      });
+      resizeObserver.observe(wrapperElement);
+      if (inputRef?.current) {
+        resizeObserver.observe(inputRef.current);
+      }
+    }
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [wrapperRef, inputRef, error]);
+
+  return useMemo(
+    () => ({
+      bottom: bottomOffset,
+      right: rightOffset,
+      left: 'auto',
+    }),
+    [bottomOffset, rightOffset],
+  );
+};
+

package/v2Containers/WebPush/Create/hooks/useAiraTriggerPosition.test.js

@@ -0,0 +1,216 @@
+import { renderHook } from '@testing-library/react';
+import { getBottomOffset, useAiraTriggerPosition } from './useAiraTriggerPosition';
+
+describe('useAiraTriggerPosition', () => {
+  let resizeObserverCallback;
+  let observeMock;
+  let disconnectMock;
+
+  beforeEach(() => {
+    observeMock = jest.fn();
+    disconnectMock = jest.fn();
+    resizeObserverCallback = null;
+
+    global.requestAnimationFrame = jest.fn((cb) => {
+      cb();
+      return 1;
+    });
+    global.cancelAnimationFrame = jest.fn();
+
+    global.ResizeObserver = jest.fn((cb) => {
+      resizeObserverCallback = cb;
+      return {
+        observe: observeMock,
+        disconnect: disconnectMock,
+      };
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    global.ResizeObserver = jest.fn((cb) => {
+      resizeObserverCallback = cb;
+      return {
+        observe: observeMock,
+        disconnect: disconnectMock,
+      };
+    });
+  });
+
+  const createRefs = () => {
+    const wrapperElement = document.createElement('div');
+    const inputElement = document.createElement('textarea');
+    wrapperElement.appendChild(inputElement);
+
+    const wrapperRef = { current: wrapperElement };
+    const inputRef = { current: inputElement };
+
+    return { wrapperElement, inputElement, wrapperRef, inputRef };
+  };
+
+  it('should return default style when there is no error', () => {
+    const { wrapperRef, inputRef } = createRefs();
+
+    const { result } = renderHook(() => useAiraTriggerPosition({
+      wrapperRef,
+      inputRef,
+      rightOffset: '2.5rem',
+      value: 'hello',
+      error: '',
+    }));
+
+    expect(result.current).toEqual({
+      bottom: '0.83rem',
+      right: '2.5rem',
+      left: 'auto',
+    });
+  });
+
+  it('should compute bottom offset when error is present', () => {
+    const { wrapperElement, inputElement, wrapperRef, inputRef } = createRefs();
+
+    const errorElement = document.createElement('div');
+    errorElement.className = 'webpush-template-message-error';
+    wrapperElement.appendChild(errorElement);
+
+    wrapperElement.getBoundingClientRect = jest.fn(() => ({
+      top: 0,
+      bottom: 160,
+      height: 160,
+      left: 0,
+      right: 100,
+      width: 100,
+    }));
+    inputElement.getBoundingClientRect = jest.fn(() => ({
+      top: 20,
+      bottom: 100,
+      height: 80,
+      left: 0,
+      right: 100,
+      width: 100,
+    }));
+
+    const { result } = renderHook(() => useAiraTriggerPosition({
+      wrapperRef,
+      inputRef,
+      rightOffset: '2.5rem',
+      value: 'hello',
+      error: 'Required',
+    }));
+
+    expect(result.current).toEqual({
+      bottom: '64px',
+      right: '2.5rem',
+      left: 'auto',
+    });
+  });
+
+  it('should observe wrapper and input for layout changes', () => {
+    const { wrapperElement, inputElement, wrapperRef, inputRef } = createRefs();
+
+    renderHook(() => useAiraTriggerPosition({
+      wrapperRef,
+      inputRef,
+      rightOffset: '2.5rem',
+      value: '',
+      error: '',
+    }));
+
+    expect(observeMock).toHaveBeenCalledWith(wrapperElement);
+    expect(observeMock).toHaveBeenCalledWith(inputElement);
+    expect(typeof resizeObserverCallback).toBe('function');
+  });
+
+  it('should invoke updatePosition when ResizeObserver fires', () => {
+    const { wrapperElement, inputElement, wrapperRef, inputRef } = createRefs();
+
+    renderHook(() => useAiraTriggerPosition({
+      wrapperRef,
+      inputRef,
+      rightOffset: '2.5rem',
+      error: '',
+    }));
+
+    expect(resizeObserverCallback).toBeTruthy();
+    resizeObserverCallback();
+    expect(observeMock).toHaveBeenCalledWith(wrapperElement);
+    expect(observeMock).toHaveBeenCalledWith(inputElement);
+  });
+
+  it('should not observe input when inputRef has no current element', () => {
+    const { wrapperElement, wrapperRef } = createRefs();
+
+    renderHook(() => useAiraTriggerPosition({
+      wrapperRef,
+      inputRef: { current: null },
+      rightOffset: '2.5rem',
+      error: '',
+    }));
+
+    expect(observeMock).toHaveBeenCalledWith(wrapperElement);
+    expect(observeMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should use default right offset when omitted', () => {
+    const { wrapperRef, inputRef } = createRefs();
+
+    const { result } = renderHook(() => useAiraTriggerPosition({
+      wrapperRef,
+      inputRef,
+      error: '',
+    }));
+
+    expect(result.current.right).toBe('2.5rem');
+  });
+
+  it('should use default bottom when wrapper ref is not attached', () => {
+    const wrapperRef = { current: null };
+    const inputRef = { current: null };
+
+    const { result } = renderHook(() => useAiraTriggerPosition({
+      wrapperRef,
+      inputRef,
+      rightOffset: '2.5rem',
+      error: '',
+    }));
+
+    expect(result.current).toEqual({
+      bottom: '0.83rem',
+      right: '2.5rem',
+      left: 'auto',
+    });
+  });
+
+  it('should skip disconnect when ResizeObserver is unavailable', () => {
+    const saved = global.ResizeObserver;
+    delete global.ResizeObserver;
+
+    const { wrapperRef, inputRef } = createRefs();
+
+    const { unmount } = renderHook(() => useAiraTriggerPosition({
+      wrapperRef,
+      inputRef,
+      rightOffset: '2.5rem',
+      error: '',
+    }));
+
+    expect(disconnectMock).not.toHaveBeenCalled();
+    unmount();
+    expect(disconnectMock).not.toHaveBeenCalled();
+
+    global.ResizeObserver = saved;
+  });
+});
+
+describe('getBottomOffset', () => {
+  it('returns default when wrapper element is missing', () => {
+    const input = document.createElement('textarea');
+    expect(getBottomOffset(null, input, true)).toBe('0.83rem');
+  });
+
+  it('returns default when input element is missing', () => {
+    const wrapper = document.createElement('div');
+    expect(getBottomOffset(wrapper, null, true)).toBe('0.83rem');
+  });
+});
+

package/v2Containers/WebPush/Create/index.js

@@ -72,6 +72,7 @@ import {
 } from '../../Cap/selectors';
 import './index.scss';
 import { WEBPUSH } from '../../CreativesContainer/constants';
+import { isAiContentBotDisabled } from '../../../utils/common';
 
 // Memoized TagList wrapper components for better performance
 const MemoizedTagList = memo(({
@@ -156,6 +157,7 @@ const WebPushCreate = ({
   restrictPersonalization = false,
 }) => {
   const { formatMessage } = intl;
+  const aiContentBotDisabled = isAiContentBotDisabled();
 
   // Form state - kept in main component for now
   const [templateName, setTemplateName] = useState('');
@@ -997,6 +999,7 @@ const WebPushCreate = ({
           messageCountRef={messageCountRef}
           messageTextAreaRef={messageTextAreaRef}
           handleMessageTextAreaRef={handleMessageTextAreaRef}
+          isAiContentBotDisabled={aiContentBotDisabled}
         />
         <MediaSection
           mediaType={mediaType}

package/v2Containers/WebPush/Create/index.scss

@@ -81,6 +81,11 @@
     margin-bottom: -2.5625rem; // approx -41px
   }
 
+  .webpush-message-input-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
   .webpush-buttons-section-heading {
     font-weight: $FONT_WEIGHT_MEDIUM;
     color: $CAP_G16;