cap-creatives-ui 8.0.280 → 8.0.321

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

@@ -0,0 +1,187 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BrandIconSection snapshot matches snapshot for DONT_SHOW state 1`] = `
+<Fragment>
+  <CapRow
+    className="creatives-webpush-brand-icon"
+  >
+    <CapHeading
+      className="webpush-brand-icon"
+      type="h4"
+    >
+      <FormattedMessage
+        defaultMessage="Brand Icon/Logo"
+        id="app.webpush.brandIconLogo"
+        values={Object {}}
+      />
+    </CapHeading>
+    <CapRadioGroup
+      disabled={false}
+      errorMessage=""
+      onChange={[MockFunction]}
+      options={
+        Array [
+          Object {
+            "label": undefined,
+            "value": "DONT_SHOW",
+          },
+          Object {
+            "label": undefined,
+            "value": "UPLOAD_IMAGE",
+          },
+        ]
+      }
+      value="DONT_SHOW"
+    />
+  </CapRow>
+  <CapDivider />
+</Fragment>
+`;
+
+exports[`BrandIconSection snapshot matches snapshot for UPLOAD_IMAGE state 1`] = `
+<Fragment>
+  <CapRow
+    className="creatives-webpush-brand-icon"
+  >
+    <CapHeading
+      className="webpush-brand-icon"
+      type="h4"
+    >
+      <FormattedMessage
+        defaultMessage="Brand Icon/Logo"
+        id="app.webpush.brandIconLogo"
+        values={Object {}}
+      />
+    </CapHeading>
+    <CapRadioGroup
+      disabled={false}
+      errorMessage=""
+      onChange={[MockFunction]}
+      options={
+        Array [
+          Object {
+            "label": undefined,
+            "value": "DONT_SHOW",
+          },
+          Object {
+            "label": undefined,
+            "value": "UPLOAD_IMAGE",
+          },
+        ]
+      }
+      value="UPLOAD_IMAGE"
+    />
+  </CapRow>
+  <CapRow
+    aria-disabled={false}
+    className="webpush-brand-icon-upload-section"
+  >
+    <InjectIntl(CapImageUpload)
+      allowedExtensionsRegex={/\\\\\\.\\(jpe\\?g\\|png\\)\\$/i}
+      channel="WEBPUSH_BRAND_ICON"
+      className="cap-custom-image-upload"
+      disabled={false}
+      imageData={Object {}}
+      imageSrc=""
+      imgSize={1000000}
+      index={1}
+      isFullMode={true}
+      key="webpush-brand-icon-uploaded-image"
+      recommendedDimensions={
+        Array [
+          Object {
+            "height": 192,
+            "width": 192,
+          },
+          Object {
+            "height": 256,
+            "width": 256,
+          },
+        ]
+      }
+      showReUploadButton={true}
+      updateImageSrc={[MockFunction]}
+      updateOnReUpload={[MockFunction]}
+      uploadAsset={[MockFunction]}
+    />
+  </CapRow>
+  <CapDivider />
+</Fragment>
+`;
+
+exports[`BrandIconSection snapshot matches snapshot for locked UPLOAD_IMAGE state 1`] = `
+<Fragment>
+  <CapRow
+    className="creatives-webpush-brand-icon"
+  >
+    <CapHeading
+      className="webpush-brand-icon"
+      type="h4"
+    >
+      <FormattedMessage
+        defaultMessage="Brand Icon/Logo"
+        id="app.webpush.brandIconLogo"
+        values={Object {}}
+      />
+    </CapHeading>
+    <CapRadioGroup
+      disabled={false}
+      errorMessage=""
+      onChange={[MockFunction]}
+      options={
+        Array [
+          Object {
+            "label": undefined,
+            "value": "DONT_SHOW",
+          },
+          Object {
+            "label": undefined,
+            "value": "UPLOAD_IMAGE",
+          },
+        ]
+      }
+      value="UPLOAD_IMAGE"
+    />
+  </CapRow>
+  <CapRow
+    aria-disabled={true}
+    className="webpush-brand-icon-upload-section"
+    style={
+      Object {
+        "opacity": 0.5,
+        "pointerEvents": "none",
+      }
+    }
+  >
+    <InjectIntl(CapImageUpload)
+      allowedExtensionsRegex={/\\\\\\.\\(jpe\\?g\\|png\\)\\$/i}
+      channel="WEBPUSH_BRAND_ICON"
+      className="cap-custom-image-upload"
+      disabled={true}
+      imageData={Object {}}
+      imageSrc=""
+      imgSize={1000000}
+      index={1}
+      isFullMode={true}
+      key="webpush-brand-icon-uploaded-image"
+      recommendedDimensions={
+        Array [
+          Object {
+            "height": 192,
+            "width": 192,
+          },
+          Object {
+            "height": 256,
+            "width": 256,
+          },
+        ]
+      }
+      showReUploadButton={true}
+      updateImageSrc={[MockFunction]}
+      updateOnReUpload={[MockFunction]}
+      uploadAsset={[MockFunction]}
+    />
+  </CapRow>
+  <CapDivider />
+</Fragment>
+`;

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

@@ -18,28 +18,36 @@ exports[`MessageSection Rendering should render correctly with default props 1`]
         values={Object {}}
       />
     </CapHeading>
-    <InjectIntl(Wrapper)
+    <InputWrapper
+      error=""
+      inputRef={null}
+      isAiContentBotDisabled={true}
       onChange={[MockFunction]}
-      textAreaRef={null}
       value="Test Message"
     >
-      <_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)>
+    </InputWrapper>
     <CapLabel
       className="webpush-character-count"
       type="label2"

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

@@ -0,0 +1,80 @@
+import { useLayoutEffect, 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);
+
+  useLayoutEffect(() => {
+    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
+      ));
+    };
+
+    updatePosition();
+
+    let resizeObserver = null;
+
+    if (window.ResizeObserver) {
+      resizeObserver = new window.ResizeObserver(() => {
+        updatePosition();
+      });
+      resizeObserver.observe(wrapperElement);
+      if (inputRef?.current) {
+        resizeObserver.observe(inputRef.current);
+      }
+    }
+
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [wrapperRef, inputRef, error]);
+
+  return useMemo(
+    () => ({
+      bottom: bottomOffset,
+      right: rightOffset,
+      left: 'auto',
+    }),
+    [bottomOffset, rightOffset],
+  );
+};
+

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

@@ -0,0 +1,210 @@
+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.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/app/v2Containers/WebPush/Create/hooks/useTagManagement.js

@@ -22,8 +22,6 @@ export const useTagManagement = ({
   metaEntities,
   getDefaultTags,
   supportedTags = EMPTY_ARRAY,
-  injectedTags,
-  eventContextTags = EMPTY_ARRAY,
 }) => {
   const [tags, setTags] = useState([]);
   const tagFetchKeyRef = useRef(null);
@@ -105,12 +103,10 @@ export const useTagManagement = ({
   const validationConfig = useMemo(
     () => ({
       tagsParam: tags,
-      injectedTagsParams: injectedTags,
       location,
       tagModule: getDefaultTags,
-      eventContextTags,
     }),
-    [tags, injectedTags, location, getDefaultTags, eventContextTags],
+    [tags, location, getDefaultTags],
   );
 
   return {

package/app/v2Containers/WebPush/Create/hooks/useTagManagement.test.js

@@ -528,26 +528,19 @@ describe('useTagManagement', () => {
 
   describe('validationConfig', () => {
     it('should return validation config with tags', () => {
-      const injectedTags = [{ id: 5, name: 'Injected Tag' }];
-      const eventContextTags = [{ id: 6, name: 'Event Tag' }];
-
       const { result } = renderHook(() =>
         useTagManagement({
           location: defaultLocation,
           globalActions: mockGlobalActions,
           metaEntities: defaultMetaEntities,
-          injectedTags,
-          eventContextTags,
           getDefaultTags: 'custom',
         })
       );
 
       expect(result.current.validationConfig).toEqual({
         tagsParam: defaultMetaEntities.tags.standard,
-        injectedTagsParams: injectedTags,
         location: defaultLocation,
         tagModule: 'custom',
-        eventContextTags,
       });
     });