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

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

@@ -1,538 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { act } from 'react';
-import { useImageUpload } from './useImageUpload';
-import { IMAGE_UPLOAD_METHODS } from '../../constants';
-
-describe('useImageUpload', () => {
-  const mockClearWebPushAsset = jest.fn();
-  const mockUploadWebPushAsset = jest.fn();
-
-  const mockWebPushActions = {
-    clearWebPushAsset: mockClearWebPushAsset,
-    uploadWebPushAsset: mockUploadWebPushAsset,
-  };
-
-  const defaultWebPush = {};
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('Initialization', () => {
-    it('should initialize with default upload method', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: defaultWebPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      expect(result.current.uploadMethod).toBe(IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE);
-      expect(result.current.imageSrc).toBe('');
-      expect(result.current.imageUrl).toBe('');
-      expect(result.current.isValidating).toBe(false);
-      expect(result.current.isUploading).toBe(false);
-    });
-
-    it('should initialize with custom upload method', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: defaultWebPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-          initialUploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
-        })
-      );
-
-      expect(result.current.uploadMethod).toBe(IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL);
-    });
-  });
-
-  describe('Upload Method Changes', () => {
-    it('should change upload method', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: defaultWebPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      const event = {
-        target: {
-          value: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
-        },
-      };
-
-      act(() => {
-        result.current.handleUploadMethodChange(event);
-      });
-
-      expect(result.current.uploadMethod).toBe(IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL);
-      expect(result.current.imageSrc).toBe('');
-      expect(result.current.imageUrl).toBe('');
-    });
-
-    it('should clear imageSrc and imageUrl when upload method changes', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: defaultWebPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      act(() => {
-        result.current.setImageSrc('path/to/image.jpg');
-        result.current.setImageUrl('https://example.com/image.jpg');
-      });
-
-      const event = {
-        target: {
-          value: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
-        },
-      };
-
-      act(() => {
-        result.current.handleUploadMethodChange(event);
-      });
-
-      expect(result.current.imageSrc).toBe('');
-      expect(result.current.imageUrl).toBe('');
-    });
-  });
-
-  describe('Image Source Management', () => {
-    it('should set image source', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: defaultWebPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      act(() => {
-        result.current.setImageSrc('path/to/image.jpg');
-      });
-
-      expect(result.current.imageSrc).toBe('path/to/image.jpg');
-    });
-
-    it('should clear asset when setting image source', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: defaultWebPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      act(() => {
-        result.current.setUpdateImageSrc('path/to/image.jpg');
-      });
-
-      expect(mockClearWebPushAsset).toHaveBeenCalledWith(0);
-      expect(result.current.imageSrc).toBe('path/to/image.jpg');
-    });
-
-    it('should use correct index when clearing asset', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: defaultWebPush,
-          webPushActions: mockWebPushActions,
-          index: 1,
-        })
-      );
-
-      act(() => {
-        result.current.setUpdateImageSrc('path/to/image.jpg');
-      });
-
-      expect(mockClearWebPushAsset).toHaveBeenCalledWith(1);
-    });
-
-    it('should update on re-upload', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: defaultWebPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      act(() => {
-        result.current.setImageSrc('path/to/image.jpg');
-      });
-
-      act(() => {
-        result.current.updateOnReUpload();
-      });
-
-      expect(result.current.imageSrc).toBe('');
-    });
-  });
-
-  describe('Image URL Management', () => {
-    it('should set image URL', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: defaultWebPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      act(() => {
-        result.current.setImageUrl('https://example.com/image.jpg');
-      });
-
-      expect(result.current.imageUrl).toBe('https://example.com/image.jpg');
-    });
-
-    it('should clear imageSrc when URL changes', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: defaultWebPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      act(() => {
-        result.current.setImageSrc('path/to/image.jpg');
-      });
-
-      act(() => {
-        result.current.handleUrlChange('https://example.com/image.jpg');
-      });
-
-      expect(result.current.imageSrc).toBe('');
-    });
-
-    it('should not clear imageSrc when URL is the same', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: defaultWebPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      // First set imageSrc to a non-empty value
-      act(() => {
-        result.current.setImageSrc('path/to/image.jpg');
-      });
-
-      // Then set imageUrl
-      act(() => {
-        result.current.setImageUrl('https://example.com/image.jpg');
-      });
-
-      // Capture the non-empty imageSrc
-      const nonEmptyImageSrc = result.current.imageSrc;
-      expect(nonEmptyImageSrc).toBe('path/to/image.jpg');
-      expect(nonEmptyImageSrc).not.toBe('');
-
-      // Call handleUrlChange with the same URL
-      act(() => {
-        result.current.handleUrlChange('https://example.com/image.jpg');
-      });
-
-      // Verify imageSrc is preserved (not cleared)
-      expect(result.current.imageSrc).toBe(nonEmptyImageSrc);
-      expect(result.current.imageSrc).toBe('path/to/image.jpg');
-    });
-  });
-
-  describe('Asset Upload', () => {
-    it('should call uploadWebPushAsset with correct parameters', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: defaultWebPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
-      const type = 'image';
-      const fileParams = { width: 100, height: 100 };
-
-      act(() => {
-        result.current.uploadAsset(file, type, fileParams);
-      });
-
-      expect(mockUploadWebPushAsset).toHaveBeenCalledWith(file, type, fileParams, 0);
-    });
-
-    it('should use correct index for upload', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: defaultWebPush,
-          webPushActions: mockWebPushActions,
-          index: 1,
-        })
-      );
-
-      const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
-
-      act(() => {
-        result.current.uploadAsset(file, 'image', {});
-      });
-
-      expect(mockUploadWebPushAsset).toHaveBeenCalledWith(file, 'image', {}, 1);
-    });
-  });
-
-  describe('Validation and Upload State', () => {
-    it('should update validation state', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: defaultWebPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      act(() => {
-        result.current.handleValidationStateChange(true);
-      });
-
-      expect(result.current.isValidating).toBe(true);
-
-      act(() => {
-        result.current.handleValidationStateChange(false);
-      });
-
-      expect(result.current.isValidating).toBe(false);
-    });
-
-    it('should update upload state', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: defaultWebPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      act(() => {
-        result.current.handleUploadStateChange(true);
-      });
-
-      expect(result.current.isUploading).toBe(true);
-
-      act(() => {
-        result.current.handleUploadStateChange(false);
-      });
-
-      expect(result.current.isUploading).toBe(false);
-    });
-  });
-
-  describe('Restoring Image from Uploaded Asset', () => {
-    it('should restore image from uploadedAssetData0', () => {
-      const webPush = {
-        uploadedAssetData0: {
-          metaInfo: {
-            secure_file_path: 'secure/path/to/image.jpg',
-          },
-        },
-      };
-
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      expect(result.current.imageSrc).toBe('secure/path/to/image.jpg');
-    });
-
-    it('should restore image from uploadedAssetData for index 0', () => {
-      const webPush = {
-        uploadedAssetData: {
-          metaInfo: {
-            secure_file_path: 'secure/path/to/image.jpg',
-          },
-        },
-      };
-
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      expect(result.current.imageSrc).toBe('secure/path/to/image.jpg');
-    });
-
-    it('should restore image from uploadedAssetData{index} for non-zero index', () => {
-      const webPush = {
-        uploadedAssetData1: {
-          metaInfo: {
-            secure_file_path: 'secure/path/to/brand-icon.jpg',
-          },
-        },
-      };
-
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush,
-          webPushActions: mockWebPushActions,
-          index: 1,
-        })
-      );
-
-      expect(result.current.imageSrc).toBe('secure/path/to/brand-icon.jpg');
-    });
-
-    it('should not restore image when secure_file_path is missing', () => {
-      const webPush = {
-        uploadedAssetData0: {
-          metaInfo: {},
-        },
-      };
-
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      expect(result.current.imageSrc).toBe('');
-    });
-
-    it('should not restore image when metaInfo is missing', () => {
-      const webPush = {
-        uploadedAssetData0: {},
-      };
-
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      expect(result.current.imageSrc).toBe('');
-    });
-
-    it('should not restore image when uploadedAssetData is missing', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: {},
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      expect(result.current.imageSrc).toBe('');
-    });
-
-    it('should update image when webPush changes', () => {
-      const { result, rerender } = renderHook(
-        ({ webPush }) =>
-          useImageUpload({
-            webPush,
-            webPushActions: mockWebPushActions,
-            index: 0,
-          }),
-        {
-          initialProps: {
-            webPush: {},
-          },
-        }
-      );
-
-      expect(result.current.imageSrc).toBe('');
-
-      const newWebPush = {
-        uploadedAssetData0: {
-          metaInfo: {
-            secure_file_path: 'new/path/to/image.jpg',
-          },
-        },
-      };
-
-      rerender({ webPush: newWebPush });
-
-      expect(result.current.imageSrc).toBe('new/path/to/image.jpg');
-    });
-
-    it('should preserve image when webPush asset data is removed (edit mode compatibility)', () => {
-      const webPush = {
-        uploadedAssetData0: {
-          metaInfo: {
-            secure_file_path: 'secure/path/to/image.jpg',
-          },
-        },
-      };
-
-      const { result, rerender } = renderHook(
-        ({ webPush }) =>
-          useImageUpload({
-            webPush,
-            webPushActions: mockWebPushActions,
-            index: 0,
-          }),
-        {
-          initialProps: {
-            webPush,
-          },
-        }
-      );
-
-      expect(result.current.imageSrc).toBe('secure/path/to/image.jpg');
-
-      // Image should persist when asset data is removed (e.g., in edit mode)
-      rerender({ webPush: {} });
-
-      expect(result.current.imageSrc).toBe('secure/path/to/image.jpg');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('should handle empty secure_file_path', () => {
-      const webPush = {
-        uploadedAssetData0: {
-          metaInfo: {
-            secure_file_path: '',
-          },
-        },
-      };
-
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      expect(result.current.imageSrc).toBe('');
-    });
-
-    it('should handle null webPush', () => {
-      const { result } = renderHook(() =>
-        useImageUpload({
-          webPush: null,
-          webPushActions: mockWebPushActions,
-          index: 0,
-        })
-      );
-
-      expect(result.current.imageSrc).toBe('');
-    });
-  });
-});
-

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

@@ -1,122 +0,0 @@
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import get from 'lodash/get';
-import {
-  ALL,
-  TAG,
-  EMBEDDED,
-  DEFAULT,
-  FULL,
-  LIBRARY,
-} from '../../../Whatsapp/constants';
-import { SMS } from '../../../CreativesContainer/constants';
-import { EMPTY_ARRAY } from '../../constants';
-
-/**
- * Custom hook for managing tags (fetching and context changes)
- * @param {Object} params - Hook parameters
- * @returns {Object} Tag state and handlers
- */
-export const useTagManagement = ({
-  location,
-  globalActions,
-  metaEntities,
-  getDefaultTags,
-  supportedTags = EMPTY_ARRAY,
-  injectedTags,
-  eventContextTags = EMPTY_ARRAY,
-}) => {
-  const [tags, setTags] = useState([]);
-  const tagFetchKeyRef = useRef(null);
-
-  // Memoize location-derived values to prevent unnecessary re-renders
-  const locationType = useMemo(() => location?.query?.type || '', [location?.query?.type]);
-  const locationModule = useMemo(() => location?.query?.module || '', [location?.query?.module]);
-
-  const tagFetchKey = useMemo(
-    () =>
-      JSON.stringify({
-        type: locationType,
-        module: locationModule,
-        defaultTags: getDefaultTags || '',
-      }),
-    [locationModule, locationType, getDefaultTags],
-  );
-
-  useEffect(() => {
-    if (!globalActions?.fetchSchemaForEntity) return;
-
-    const { type, module } = location?.query || {};
-    const isEmbedded = type === EMBEDDED;
-    const context = isEmbedded ? module : DEFAULT;
-    const embedded = isEmbedded ? type : FULL;
-    const query = {
-      layout: SMS,
-      type: TAG,
-      context,
-      embedded,
-    };
-    if (getDefaultTags) {
-      query.context = getDefaultTags;
-    }
-
-    if (tagFetchKeyRef.current === tagFetchKey) {
-      return;
-    }
-    tagFetchKeyRef.current = tagFetchKey;
-    globalActions.fetchSchemaForEntity(query);
-    // tagFetchKey is memoized and captures all dependencies; including globalActions/location?.query causes infinite loops
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tagFetchKey]);
-
-  // Update tags from metaEntities and supported tags
-  // supportedTags must be memoized by the caller
-  useEffect(() => {
-    if (!metaEntities) return;
-    let tagList = get(metaEntities, 'tags.standard', []);
-    if (locationType === EMBEDDED && locationModule === LIBRARY && !getDefaultTags) {
-      tagList = supportedTags;
-    }
-    setTags(tagList);
-  }, [metaEntities, locationModule, locationType, getDefaultTags, supportedTags]);
-
-  const handleOnTagsContextChange = useCallback(
-    (data) => {
-      if (!globalActions?.fetchSchemaForEntity) return;
-      
-      const isEmbedded = locationType === EMBEDDED;
-      const embedded = isEmbedded ? locationType : FULL;
-      const normalized = (data ?? '').toLowerCase();
-      const context = (!normalized || normalized === ALL) ? DEFAULT : normalized;
-      const query = {
-        layout: SMS,
-        type: TAG,
-        context,
-        embedded,
-      };
-      if (getDefaultTags) {
-        query.context = getDefaultTags;
-      }
-      globalActions.fetchSchemaForEntity(query);
-    },
-    [globalActions, getDefaultTags, locationType],
-  );
-
-  // Memoize validation configuration
-  const validationConfig = useMemo(
-    () => ({
-      tagsParam: tags,
-      injectedTagsParams: injectedTags,
-      location,
-      tagModule: getDefaultTags,
-      eventContextTags,
-    }),
-    [tags, injectedTags, location, getDefaultTags, eventContextTags],
-  );
-
-  return {
-    tags,
-    handleOnTagsContextChange,
-    validationConfig,
-  };
-};
-