@capillarytech/creatives-library 8.0.255-alpha.4 → 8.0.255

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

@@ -1,30 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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,
-  };
-};
-