cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Containers/WebPush/Create/components/BrandIconSection.test.js

@@ -0,0 +1,264 @@
+import React from 'react';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
+import { BrandIconSection } from './BrandIconSection';
+import CapImageUpload from '../../../../v2Components/CapImageUpload';
+import { BRAND_ICON_OPTIONS } from '../../constants';
+
+describe('BrandIconSection', () => {
+  const mockFormatMessage = jest.fn((msg) => msg?.defaultMessage || msg?.id || '');
+
+  const mockMessages = {
+    brandIconLogo: { id: 'app.webpush.brandIconLogo', defaultMessage: 'Brand Icon/Logo' },
+    dontShow: { id: 'app.webpush.dontShow', defaultMessage: "Don't show" },
+    uploadImage: { id: 'app.webpush.uploadImage', defaultMessage: 'Upload image' },
+  };
+
+  const mockBrandIconUpload = {
+    imageSrc: '',
+    uploadAsset: jest.fn(),
+    setUpdateImageSrc: jest.fn(),
+    updateOnReUpload: jest.fn(),
+  };
+
+  const defaultProps = {
+    brandIconOption: BRAND_ICON_OPTIONS.DONT_SHOW,
+    onBrandIconChange: jest.fn(),
+    brandIconUpload: mockBrandIconUpload,
+    isLocked: false,
+    isAnyUploadActive: false,
+    formatMessage: mockFormatMessage,
+    messages: mockMessages,
+    webPush: {},
+    isFullMode: true,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('brandIconOptions array', () => {
+    it('builds exactly two options: DONT_SHOW and UPLOAD_IMAGE', () => {
+      const wrapper = mountWithIntl(<BrandIconSection {...defaultProps} />);
+      const radioGroup = wrapper.find(CapRadioGroup);
+      const options = radioGroup.prop('options');
+      expect(options).toHaveLength(2);
+      expect(options[0].value).toBe(BRAND_ICON_OPTIONS.DONT_SHOW);
+      expect(options[1].value).toBe(BRAND_ICON_OPTIONS.UPLOAD_IMAGE);
+    });
+
+    it('does NOT include ADD_IMAGE_URL option (commented-out feature)', () => {
+      const wrapper = mountWithIntl(<BrandIconSection {...defaultProps} />);
+      const options = wrapper.find(CapRadioGroup).prop('options');
+      const hasAddImageUrl = options.some((opt) => opt.value === BRAND_ICON_OPTIONS.ADD_IMAGE_URL);
+      expect(hasAddImageUrl).toBe(false);
+    });
+
+    it('calls formatMessage for each option label', () => {
+      mountWithIntl(<BrandIconSection {...defaultProps} />);
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.dontShow);
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.uploadImage);
+    });
+  });
+
+  describe('CapRadioGroup rendering', () => {
+    it('passes brandIconOption as value to CapRadioGroup', () => {
+      const wrapper = mountWithIntl(
+        <BrandIconSection {...defaultProps} brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE} />
+      );
+      expect(wrapper.find(CapRadioGroup).prop('value')).toBe(BRAND_ICON_OPTIONS.UPLOAD_IMAGE);
+    });
+
+    it('passes onBrandIconChange as onChange to CapRadioGroup', () => {
+      const onBrandIconChange = jest.fn();
+      const wrapper = mountWithIntl(
+        <BrandIconSection {...defaultProps} onBrandIconChange={onBrandIconChange} />
+      );
+      expect(wrapper.find(CapRadioGroup).prop('onChange')).toBe(onBrandIconChange);
+    });
+
+    it('disables CapRadioGroup when isAnyUploadActive is true', () => {
+      const wrapper = mountWithIntl(
+        <BrandIconSection {...defaultProps} isAnyUploadActive={true} />
+      );
+      expect(wrapper.find(CapRadioGroup).prop('disabled')).toBe(true);
+    });
+
+    it('does not disable CapRadioGroup when isAnyUploadActive is false', () => {
+      const wrapper = mountWithIntl(
+        <BrandIconSection {...defaultProps} isAnyUploadActive={false} />
+      );
+      expect(wrapper.find(CapRadioGroup).prop('disabled')).toBe(false);
+    });
+  });
+
+  describe('conditional upload section (brandIconOption === UPLOAD_IMAGE)', () => {
+    it('does NOT render CapImageUpload when brandIconOption is DONT_SHOW', () => {
+      const wrapper = mountWithIntl(
+        <BrandIconSection {...defaultProps} brandIconOption={BRAND_ICON_OPTIONS.DONT_SHOW} />
+      );
+      expect(wrapper.find(CapImageUpload).exists()).toBe(false);
+    });
+
+    it('renders CapImageUpload when brandIconOption is UPLOAD_IMAGE', () => {
+      const wrapper = mountWithIntl(
+        <BrandIconSection {...defaultProps} brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE} />
+      );
+      expect(wrapper.find(CapImageUpload).exists()).toBe(true);
+    });
+
+    it('renders the upload section row with correct className', () => {
+      const wrapper = mountWithIntl(
+        <BrandIconSection {...defaultProps} brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE} />
+      );
+      expect(wrapper.find('.webpush-brand-icon-upload-section').exists()).toBe(true);
+    });
+
+    it('passes brandIconUpload.imageSrc to CapImageUpload as imageSrc', () => {
+      const wrapper = mountWithIntl(
+        <BrandIconSection
+          {...defaultProps}
+          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
+          brandIconUpload={{ ...mockBrandIconUpload, imageSrc: 'https://example.com/icon.png' }}
+        />
+      );
+      expect(wrapper.find(CapImageUpload).prop('imageSrc')).toBe('https://example.com/icon.png');
+    });
+
+    it('passes brandIconUpload.uploadAsset to CapImageUpload as uploadAsset', () => {
+      const uploadAsset = jest.fn();
+      const wrapper = mountWithIntl(
+        <BrandIconSection
+          {...defaultProps}
+          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
+          brandIconUpload={{ ...mockBrandIconUpload, uploadAsset }}
+        />
+      );
+      expect(wrapper.find(CapImageUpload).prop('uploadAsset')).toBe(uploadAsset);
+    });
+
+    it('passes isFullMode to CapImageUpload', () => {
+      const wrapper = mountWithIntl(
+        <BrandIconSection
+          {...defaultProps}
+          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
+          isFullMode={false}
+        />
+      );
+      expect(wrapper.find(CapImageUpload).prop('isFullMode')).toBe(false);
+    });
+  });
+
+  describe('isLocked behavior', () => {
+    it('applies pointer-events: none and opacity: 0.5 to upload row when isLocked is true', () => {
+      const wrapper = mountWithIntl(
+        <BrandIconSection
+          {...defaultProps}
+          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
+          isLocked={true}
+        />
+      );
+      const uploadRow = wrapper.find('.webpush-brand-icon-upload-section').first();
+      expect(uploadRow.prop('style')).toEqual({ pointerEvents: 'none', opacity: 0.5 });
+    });
+
+    it('sets aria-disabled on upload row when isLocked is true', () => {
+      const wrapper = mountWithIntl(
+        <BrandIconSection
+          {...defaultProps}
+          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
+          isLocked={true}
+        />
+      );
+      const uploadRow = wrapper.find('.webpush-brand-icon-upload-section').first();
+      expect(uploadRow.prop('aria-disabled')).toBe(true);
+    });
+
+    it('does NOT apply lock styles to upload row when isLocked is false', () => {
+      const wrapper = mountWithIntl(
+        <BrandIconSection
+          {...defaultProps}
+          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
+          isLocked={false}
+        />
+      );
+      const uploadRow = wrapper.find('.webpush-brand-icon-upload-section').first();
+      expect(uploadRow.prop('style')).toBeUndefined();
+    });
+
+    it('passes disabled=true to CapImageUpload when isLocked is true', () => {
+      const wrapper = mountWithIntl(
+        <BrandIconSection
+          {...defaultProps}
+          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
+          isLocked={true}
+        />
+      );
+      expect(wrapper.find(CapImageUpload).prop('disabled')).toBe(true);
+    });
+
+    it('passes disabled=false to CapImageUpload when isLocked is false', () => {
+      const wrapper = mountWithIntl(
+        <BrandIconSection
+          {...defaultProps}
+          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
+          isLocked={false}
+        />
+      );
+      expect(wrapper.find(CapImageUpload).prop('disabled')).toBe(false);
+    });
+  });
+
+  describe('structural rendering', () => {
+    it('always renders CapDivider regardless of brandIconOption', () => {
+      const wrapperDontShow = mountWithIntl(
+        <BrandIconSection {...defaultProps} brandIconOption={BRAND_ICON_OPTIONS.DONT_SHOW} />
+      );
+      expect(wrapperDontShow.find(CapDivider).exists()).toBe(true);
+
+      const wrapperUpload = mountWithIntl(
+        <BrandIconSection {...defaultProps} brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE} />
+      );
+      expect(wrapperUpload.find(CapDivider).exists()).toBe(true);
+    });
+
+    it('renders the brand icon heading row with className creatives-webpush-brand-icon', () => {
+      const wrapper = mountWithIntl(<BrandIconSection {...defaultProps} />);
+      expect(wrapper.find('.creatives-webpush-brand-icon').exists()).toBe(true);
+    });
+
+    it('renders CapHeading with type h4', () => {
+      const wrapper = mountWithIntl(<BrandIconSection {...defaultProps} />);
+      expect(wrapper.find(CapHeading).prop('type')).toBe('h4');
+    });
+  });
+
+  describe('snapshot', () => {
+    it('matches snapshot for DONT_SHOW state', () => {
+      const wrapper = shallowWithIntl(
+        <BrandIconSection {...defaultProps} brandIconOption={BRAND_ICON_OPTIONS.DONT_SHOW} />
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('matches snapshot for UPLOAD_IMAGE state', () => {
+      const wrapper = shallowWithIntl(
+        <BrandIconSection {...defaultProps} brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE} />
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('matches snapshot for locked UPLOAD_IMAGE state', () => {
+      const wrapper = shallowWithIntl(
+        <BrandIconSection
+          {...defaultProps}
+          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
+          isLocked={true}
+        />
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

package/app/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,55 @@ 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';
+
+const InputWrapper = ({
+  children,
+  inputRef,
+  error,
+  value,
+  onChange,
+  isAiContentBotDisabled,
+}) => {
+  const wrapperRef = useRef(null);
+  const airaRootStyle = useAiraTriggerPosition({ wrapperRef, inputRef, error });
+
+  return (
+    <div className="webpush-message-input-wrapper" ref={wrapperRef}>
+      {children}
+      {!isAiContentBotDisabled && (
+        <CapAskAira.ContentGenerationBot
+          text={value || ''}
+          setText={(text) => onChange(text)}
+          iconPlacement="float-br"
+          iconSize="1.6rem"
+          rootStyle={airaRootStyle}
+        />
+      )}
+    </div>
+  );
+};
+
+InputWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+  inputRef: PropTypes.oneOfType([
+    PropTypes.shape({ current: PropTypes.any }),
+    PropTypes.func,
+  ]),
+  error: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  isAiContentBotDisabled: PropTypes.bool,
+};
+
+InputWrapper.defaultProps = {
+  inputRef: null,
+  error: '',
+  value: '',
+  isAiContentBotDisabled: false,
+};
 
 /**
  * MessageSection component - Message textarea with tags, emoji picker, and character count
@@ -23,6 +71,7 @@ export const MessageSection = ({
   messageCountRef,
   messageTextAreaRef,
   handleMessageTextAreaRef,
+  isAiContentBotDisabled,
 }) => {
   const renderCharacterCount = () => {
     if (!SHOW_CHARACTER_COUNT) return null;
@@ -50,29 +99,37 @@ export const MessageSection = ({
         <CapHeading type="h4" className="webpush-message">
           <FormattedMessage {...messages.message} />
         </CapHeading>
-        <CapEmojiPicker.Wrapper
+        <InputWrapper
+          inputRef={messageTextAreaRef}
+          error={error}
           value={value}
           onChange={onChange}
-          textAreaRef={messageTextAreaRef}
+          isAiContentBotDisabled={isAiContentBotDisabled}
         >
-          <CapInput.TextArea
-            id="webpush-message-input"
+          <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>
+        </InputWrapper>
         {renderCharacterCount()}
       </CapRow>
       <CapDivider className="webpush-message-divider" />
@@ -90,6 +147,7 @@ MessageSection.propTypes = {
   messageCountRef: PropTypes.object,
   messageTextAreaRef: PropTypes.object,
   handleMessageTextAreaRef: PropTypes.func.isRequired,
+  isAiContentBotDisabled: PropTypes.bool,
 };
 
 MessageSection.defaultProps = {
@@ -97,6 +155,7 @@ MessageSection.defaultProps = {
   tagList: null,
   messageCountRef: null,
   messageTextAreaRef: null,
+  isAiContentBotDisabled: false,
 };
 
 export default MessageSection;

package/app/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', () => {
@@ -264,5 +318,33 @@ describe('MessageSection', () => {
       expect(textArea.prop('value')).toBe(longValue);
     });
   });
+
+  describe('InputWrapper', () => {
+    it('should render the wrapper div with correct class', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
+      const inputWrapper = wrapper.find('.webpush-message-input-wrapper');
+      expect(inputWrapper.exists()).toBe(true);
+    });
+
+    it('should render children inside InputWrapper', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
+      const inputWrapper = wrapper.find('.webpush-message-input-wrapper');
+      expect(inputWrapper.find(CapEmojiPicker.Wrapper).exists()).toBe(true);
+    });
+
+    it('should not render aiRA bot inside InputWrapper when disabled', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} isAiContentBotDisabled />);
+      const inputWrapper = wrapper.find('.webpush-message-input-wrapper');
+      expect(inputWrapper.find(CapAskAira.ContentGenerationBot).exists()).toBe(false);
+    });
+
+    it('should render aiRA bot inside InputWrapper when enabled', () => {
+      const wrapper = mountWithIntl(
+        <MessageSection {...defaultProps} isAiContentBotDisabled={false} />
+      );
+      const inputWrapper = wrapper.find('.webpush-message-input-wrapper');
+      expect(inputWrapper.find(CapAskAira.ContentGenerationBot).exists()).toBe(true);
+    });
+  });
 });