@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

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

@@ -0,0 +1,30 @@
+import { useCallback } from 'react';
+
+/**
+ * Custom hook for managing character count display and updates
+ * @param {Function} formatMessage - i18n format message function
+ * @param {Object} messages - Message definitions
+ * @returns {Object} Character count utilities
+ */
+export const useCharacterCount = (formatMessage, messages) => {
+  /**
+   * Updates the character count display via ref
+   * @param {Object} labelRef - React ref to the label element
+   * @param {number} currentLength - Current character count
+   * @param {number} maxLength - Maximum allowed characters
+   */
+  const updateCharacterCount = useCallback(
+    (labelRef, currentLength, maxLength) => {
+      if (labelRef?.current) {
+        labelRef.current.textContent = formatMessage(messages.characterCount, {
+          currentLength,
+          maxLength,
+        });
+      }
+    },
+    [formatMessage, messages],
+  );
+
+  return { updateCharacterCount };
+};
+

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

@@ -0,0 +1,151 @@
+import { renderHook } from '@testing-library/react';
+import { useCharacterCount } from './useCharacterCount';
+
+describe('useCharacterCount', () => {
+  let mockFormatMessage;
+  const mockMessages = {
+    characterCount: {
+      defaultMessage: '{currentLength}/{maxLength}',
+    },
+  };
+
+  beforeEach(() => {
+    mockFormatMessage = jest.fn((message, values) => {
+      if (values) {
+        return `${values.currentLength}/${values.maxLength}`;
+      }
+      return message.defaultMessage || message;
+    });
+  });
+
+  describe('updateCharacterCount', () => {
+    it('should update character count when labelRef exists', () => {
+      const { result } = renderHook(() => useCharacterCount(mockFormatMessage, mockMessages));
+      const mockRef = { current: { textContent: '' } };
+
+      result.current.updateCharacterCount(mockRef, 10, 100);
+
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.characterCount, {
+        currentLength: 10,
+        maxLength: 100,
+      });
+      expect(mockRef.current.textContent).toBe('10/100');
+    });
+
+    it('should not update when labelRef is null', () => {
+      const { result } = renderHook(() => useCharacterCount(mockFormatMessage, mockMessages));
+
+      result.current.updateCharacterCount(null, 10, 100);
+
+      // formatMessage should not be called when labelRef is null
+      expect(mockFormatMessage).not.toHaveBeenCalled();
+    });
+
+    it('should not update when labelRef.current is null', () => {
+      const { result } = renderHook(() => useCharacterCount(mockFormatMessage, mockMessages));
+      const mockRef = { current: null };
+
+      expect(() => {
+        result.current.updateCharacterCount(mockRef, 10, 100);
+      }).not.toThrow();
+    });
+
+    it('should not update when labelRef.current is undefined', () => {
+      const { result } = renderHook(() => useCharacterCount(mockFormatMessage, mockMessages));
+      const mockRef = { current: undefined };
+
+      expect(() => {
+        result.current.updateCharacterCount(mockRef, 10, 100);
+      }).not.toThrow();
+    });
+
+    it('should handle zero character count', () => {
+      const { result } = renderHook(() => useCharacterCount(mockFormatMessage, mockMessages));
+      const mockRef = { current: { textContent: '' } };
+
+      result.current.updateCharacterCount(mockRef, 0, 50);
+
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.characterCount, {
+        currentLength: 0,
+        maxLength: 50,
+      });
+      expect(mockRef.current.textContent).toBe('0/50');
+    });
+
+    it('should handle maximum character count', () => {
+      const { result } = renderHook(() => useCharacterCount(mockFormatMessage, mockMessages));
+      const mockRef = { current: { textContent: '' } };
+
+      result.current.updateCharacterCount(mockRef, 100, 100);
+
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.characterCount, {
+        currentLength: 100,
+        maxLength: 100,
+      });
+      expect(mockRef.current.textContent).toBe('100/100');
+    });
+
+    it('should update multiple times correctly', () => {
+      const { result } = renderHook(() => useCharacterCount(mockFormatMessage, mockMessages));
+      const mockRef = { current: { textContent: '' } };
+
+      result.current.updateCharacterCount(mockRef, 5, 50);
+      expect(mockRef.current.textContent).toBe('5/50');
+
+      result.current.updateCharacterCount(mockRef, 25, 50);
+      expect(mockRef.current.textContent).toBe('25/50');
+
+      result.current.updateCharacterCount(mockRef, 50, 50);
+      expect(mockRef.current.textContent).toBe('50/50');
+    });
+
+    it('should use memoized callback', () => {
+      const { result, rerender } = renderHook(
+        ({ formatMessage, messages }) => useCharacterCount(formatMessage, messages),
+        {
+          initialProps: { formatMessage: mockFormatMessage, messages: mockMessages },
+        }
+      );
+
+      const firstUpdateCharacterCount = result.current.updateCharacterCount;
+
+      rerender({ formatMessage: mockFormatMessage, messages: mockMessages });
+
+      // Should be the same function reference if formatMessage and messages haven't changed
+      expect(result.current.updateCharacterCount).toBe(firstUpdateCharacterCount);
+    });
+
+    it('should create new callback when formatMessage changes', () => {
+      const newFormatMessage = jest.fn();
+      const { result, rerender } = renderHook(
+        ({ formatMessage, messages }) => useCharacterCount(formatMessage, messages),
+        {
+          initialProps: { formatMessage: mockFormatMessage, messages: mockMessages },
+        }
+      );
+
+      const firstUpdateCharacterCount = result.current.updateCharacterCount;
+
+      rerender({ formatMessage: newFormatMessage, messages: mockMessages });
+
+      expect(result.current.updateCharacterCount).not.toBe(firstUpdateCharacterCount);
+    });
+
+    it('should create new callback when messages changes', () => {
+      const newMessages = { characterCount: { defaultMessage: 'New message' } };
+      const { result, rerender } = renderHook(
+        ({ formatMessage, messages }) => useCharacterCount(formatMessage, messages),
+        {
+          initialProps: { formatMessage: mockFormatMessage, messages: mockMessages },
+        }
+      );
+
+      const firstUpdateCharacterCount = result.current.updateCharacterCount;
+
+      rerender({ formatMessage: mockFormatMessage, messages: newMessages });
+
+      expect(result.current.updateCharacterCount).not.toBe(firstUpdateCharacterCount);
+    });
+  });
+});
+

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

@@ -0,0 +1,104 @@
+import { useState, useCallback, useEffect } from 'react';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import { IMAGE_UPLOAD_METHODS } from '../../constants';
+
+/**
+ * Custom hook for managing image/asset upload logic
+ * @param {Object} params - Hook parameters
+ * @param {Object} params.webPush - WebPush state from Redux
+ * @param {Object} params.webPushActions - WebPush action creators
+ * @param {number} params.index - Asset index (0 for image, 1 for brand icon)
+ * @param {string} params.initialUploadMethod - Initial upload method
+ * @returns {Object} Image upload state and handlers
+ */
+export const useImageUpload = ({
+  webPush,
+  webPushActions,
+  index,
+  initialUploadMethod = IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE,
+}) => {
+  const [uploadMethod, setUploadMethod] = useState(initialUploadMethod);
+  const [imageSrc, setImageSrc] = useState('');
+  const [imageUrl, setImageUrl] = useState('');
+  const [isValidating, setIsValidating] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+
+  const handleUploadMethodChange = useCallback((e) => {
+    const method = e.target.value;
+    setUploadMethod(method);
+    setImageSrc('');
+    setImageUrl('');
+  }, []);
+
+  const setUpdateImageSrc = useCallback(
+    (filePath) => {
+      setImageSrc(filePath);
+      webPushActions.clearWebPushAsset(index);
+    },
+    [webPushActions, index],
+  );
+
+  const updateOnReUpload = useCallback(() => {
+    setImageSrc('');
+  }, []);
+
+  const uploadAsset = useCallback(
+    (file, type, fileParams) => {
+      webPushActions.uploadWebPushAsset(file, type, fileParams, index);
+    },
+    [webPushActions, index],
+  );
+
+  const handleUrlChange = useCallback(
+    (url) => {
+      setImageUrl(url);
+      // Clear imageSrc when URL changes
+      if (url !== imageUrl) {
+        setImageSrc('');
+      }
+    },
+    [imageUrl],
+  );
+
+  const handleValidationStateChange = useCallback((validating) => {
+    setIsValidating(validating);
+  }, []);
+
+  const handleUploadStateChange = useCallback((uploading) => {
+    setIsUploading(uploading);
+  }, []);
+
+  // Restore image from uploaded asset data
+  useEffect(() => {
+    const assetDataKey = index === 0 ? 'uploadedAssetData0' : `uploadedAssetData${index}`;
+    const imageDataObj = get(webPush, assetDataKey) || (index === 0 ? get(webPush, 'uploadedAssetData') : null);
+    if (!isEmpty(imageDataObj)) {
+      const { secure_file_path = '' } = get(imageDataObj, 'metaInfo', {});
+      if (secure_file_path) {
+        setImageSrc(secure_file_path);
+      }
+    }
+    // Note: Not clearing imageSrc when asset data is missing for edit mode compatibility
+    // Excluding setImageSrc from deps to prevent infinite loops; it's a stable setter that doesn't need re-runs
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [webPush, index]);
+
+  return {
+    uploadMethod,
+    imageSrc,
+    imageUrl,
+    isValidating,
+    isUploading,
+    setImageSrc,
+    setImageUrl,
+    handleUploadMethodChange,
+    setUpdateImageSrc,
+    updateOnReUpload,
+    uploadAsset,
+    handleUrlChange,
+    handleValidationStateChange,
+    handleUploadStateChange,
+  };
+};
+