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

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

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

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