@imposium-hub/components 2.16.0-0 → 2.16.0

package/src/components/assets/AssetsTablePreviewCell.test.tsx

@@ -0,0 +1,191 @@
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+
+const MOCK_PREVIEW_STYLE = { width: 200, height: 150 };
+
+vi.mock('../../index', () => ({
+    ASSET_TYPES: {
+        VIDEO: 'video',
+        IMAGE: 'image',
+        AUDIO: 'audio'
+    },
+    AssetsTypeIcon: ({ type }: any) => (
+        <div
+            data-testid='assets-type-icon'
+            data-type={type}
+        />
+    ),
+    ImagePreview: ({ url, onRequestClose, style }: any) => (
+        <div
+            data-testid='image-preview'
+            data-url={url}
+            style={style}>
+            <button
+                data-testid='image-close'
+                onClick={onRequestClose}>
+                Close
+            </button>
+        </div>
+    ),
+    VideoPreview: ({ url, onRequestClose, playbackSettings, style }: any) => (
+        <div
+            data-testid='video-preview'
+            data-url={url}
+            data-autoplay={playbackSettings?.autoPlay}
+            data-loop={playbackSettings?.loop}
+            style={style}>
+            <button
+                data-testid='video-close'
+                onClick={onRequestClose}>
+                Close
+            </button>
+        </div>
+    ),
+    AudioPreview: ({ url, onRequestClose, playbackSettings, style }: any) => (
+        <div
+            data-testid='audio-preview'
+            data-url={url}
+            data-autoplay={playbackSettings?.autoPlay}
+            data-loop={playbackSettings?.loop}
+            style={style}>
+            <button
+                data-testid='audio-close'
+                onClick={onRequestClose}>
+                Close
+            </button>
+        </div>
+    ),
+    getMediaPreviewStyle: vi.fn(() => MOCK_PREVIEW_STYLE)
+}));
+
+import AssetsTablePreviewCellMemoized from './AssetsTablePreviewCell';
+
+const MOCK_URL = 'https://example.com/asset.mp4';
+const MOCK_WIDTH = 1920;
+const MOCK_HEIGHT = 1080;
+
+const buildCellProp = (type: string) => ({
+    row: {
+        values: { type },
+        original: {
+            url: MOCK_URL,
+            width: MOCK_WIDTH,
+            height: MOCK_HEIGHT
+        }
+    }
+});
+
+const renderComponent = (
+    type: string,
+    showMedia: boolean,
+    overrides: { asset?: any; onClick?: () => void; onRequestClose?: () => void } = {}
+) => {
+    const onClick = overrides.onClick ?? vi.fn();
+    const onRequestClose = overrides.onRequestClose ?? vi.fn();
+    const asset = overrides.asset ?? undefined;
+    const cell = buildCellProp(type);
+
+    const result = render(
+        <AssetsTablePreviewCellMemoized
+            cell={cell}
+            showMedia={showMedia}
+            asset={asset}
+            onClick={onClick}
+            onRequestClose={onRequestClose}
+        />
+    );
+
+    return { ...result, onClick, onRequestClose };
+};
+
+describe('AssetsTablePreviewCell', () => {
+    it('renders AssetsTypeIcon with the correct type', () => {
+        const { getByTestId } = renderComponent('video', false);
+        const icon = getByTestId('assets-type-icon');
+
+        expect(icon.getAttribute('data-type')).toBe('video');
+    });
+
+    it('calls onClick when clicked and showMedia is false', () => {
+        const onClick = vi.fn();
+        const { container } = renderComponent('image', false, { onClick });
+        const cell = container.querySelector('.asset-type-cell');
+
+        if (cell) {
+            fireEvent.click(cell);
+        }
+
+        expect(onClick).toHaveBeenCalledOnce();
+    });
+
+    it('does not call onClick when clicked and showMedia is true', () => {
+        const onClick = vi.fn();
+        const { container } = renderComponent('image', true, { onClick });
+        const cell = container.querySelector('.asset-type-cell');
+
+        if (cell) {
+            fireEvent.click(cell);
+        }
+
+        expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('renders ImagePreview when type is IMAGE and showMedia is true', () => {
+        const { getByTestId, queryByTestId } = renderComponent('image', true);
+
+        expect(getByTestId('image-preview').getAttribute('data-url')).toBe(MOCK_URL);
+        expect(queryByTestId('video-preview')).toBeNull();
+        expect(queryByTestId('audio-preview')).toBeNull();
+    });
+
+    it('renders VideoPreview when type is VIDEO and showMedia is true', () => {
+        const { getByTestId, queryByTestId } = renderComponent('video', true);
+
+        expect(getByTestId('video-preview').getAttribute('data-url')).toBe(MOCK_URL);
+        expect(queryByTestId('image-preview')).toBeNull();
+        expect(queryByTestId('audio-preview')).toBeNull();
+    });
+
+    it('renders AudioPreview when type is AUDIO and showMedia is true', () => {
+        const { getByTestId, queryByTestId } = renderComponent('audio', true);
+
+        expect(getByTestId('audio-preview').getAttribute('data-url')).toBe(MOCK_URL);
+        expect(queryByTestId('image-preview')).toBeNull();
+        expect(queryByTestId('video-preview')).toBeNull();
+    });
+
+    it('does not render any preview when showMedia is false', () => {
+        const { queryByTestId } = renderComponent('video', false);
+
+        expect(queryByTestId('image-preview')).toBeNull();
+        expect(queryByTestId('video-preview')).toBeNull();
+        expect(queryByTestId('audio-preview')).toBeNull();
+    });
+
+    it('calls onRequestClose when a preview close button is clicked', () => {
+        const onRequestClose = vi.fn();
+        const { getByTestId } = renderComponent('image', true, { onRequestClose });
+
+        fireEvent.click(getByTestId('image-close'));
+
+        expect(onRequestClose).toHaveBeenCalledOnce();
+    });
+
+    it('uses asset url/dimensions when asset prop is provided', () => {
+        const customAsset = {
+            url: 'https://example.com/custom.png',
+            width: 800,
+            height: 600
+        };
+        const { getByTestId } = renderComponent('image', true, { asset: customAsset });
+
+        expect(getByTestId('image-preview').getAttribute('data-url')).toBe(customAsset.url);
+    });
+
+    it('falls back to cell.row.original values when asset is undefined', () => {
+        const { getByTestId } = renderComponent('image', true);
+
+        expect(getByTestId('image-preview').getAttribute('data-url')).toBe(MOCK_URL);
+    });
+});

package/src/components/assets/AssetsTableRateCell.test.tsx

@@ -0,0 +1,87 @@
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import { render } from '@testing-library/react';
+import AssetsTableRateCell from './AssetsTableRateCell';
+
+const VIDEO_COMPOSITION_TYPE = 'video_composition';
+const VIDEO_TYPE = 'video';
+
+const buildCellProp = (overrides: Record<string, any> = {}) => ({
+    row: {
+        original: {
+            type: VIDEO_TYPE,
+            data: null,
+            rate: null,
+            ...overrides
+        }
+    }
+});
+
+const renderComponent = (overrides: Record<string, any> = {}) => {
+    return render(<AssetsTableRateCell cell={buildCellProp(overrides)} />);
+};
+
+describe('AssetsTableRateCell', () => {
+    it('renders the rate formatted to two decimal places', () => {
+        const { container } = renderComponent({ rate: 29.97 });
+        const cell = container.querySelector('.asset-rate-cell');
+
+        expect(cell?.textContent).toBe('29.97');
+    });
+
+    it('renders an integer rate with two decimal places', () => {
+        const { container } = renderComponent({ rate: 30 });
+        const cell = container.querySelector('.asset-rate-cell');
+
+        expect(cell?.textContent).toBe('30.00');
+    });
+
+    it('renders empty when rate is null', () => {
+        const { container } = renderComponent({ rate: null });
+        const cell = container.querySelector('.asset-rate-cell');
+
+        expect(cell?.textContent).toBe('');
+    });
+
+    it('renders empty when rate is undefined', () => {
+        const { container } = renderComponent({ rate: undefined });
+        const cell = container.querySelector('.asset-rate-cell');
+
+        expect(cell?.textContent).toBe('');
+    });
+
+    it('uses rate from parsed data JSON when type is video_composition', () => {
+        const compositionData = JSON.stringify({ rate: 24 });
+        const { container } = renderComponent({
+            type: VIDEO_COMPOSITION_TYPE,
+            data: compositionData,
+            rate: 30
+        });
+        const cell = container.querySelector('.asset-rate-cell');
+
+        expect(cell?.textContent).toBe('24.00');
+    });
+
+    it('ignores data when type is not video_composition', () => {
+        const compositionData = JSON.stringify({ rate: 24 });
+        const { container } = renderComponent({
+            type: VIDEO_TYPE,
+            data: compositionData,
+            rate: 60
+        });
+        const cell = container.querySelector('.asset-rate-cell');
+
+        expect(cell?.textContent).toBe('60.00');
+    });
+
+    it('does not parse data when data is null even for video_composition type', () => {
+        const { container } = renderComponent({
+            type: VIDEO_COMPOSITION_TYPE,
+            data: null,
+            rate: 25
+        });
+        const cell = container.querySelector('.asset-rate-cell');
+
+        expect(cell?.textContent).toBe('25.00');
+    });
+});

package/src/components/assets/AssetsTableSelectCell.test.tsx

@@ -0,0 +1,156 @@
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { legacy_createStore as createStore } from 'redux';
+
+vi.mock('../checkbox-field/CheckboxField', () => ({
+    default: ({ label, width, value, onChange }: any) => (
+        <div
+            data-testid='mock-checkbox-field'
+            data-label={label}
+            data-width={width}
+            data-value={value}>
+            <input
+                type='checkbox'
+                checked={value}
+                onChange={(e) => onChange(e.target.checked, e)}
+            />
+        </div>
+    )
+}));
+
+vi.mock('../../redux/actions/selected-assets', () => ({
+    selectAsset: vi.fn((id) => ({ type: 'selectedAssets/SELECT', id })),
+    deselectAsset: vi.fn((id) => ({ type: 'selectedAssets/DESELECT', id })),
+    selectMultipleAssets: vi.fn((id) => ({ type: 'selectedAssets/SELECT_MULTIPLE', id }))
+}));
+
+import AssetsTableSelectCellMemoized from './AssetsTableSelectCell';
+
+const MOCK_ASSET_ID = 'asset-123';
+const MOCK_OTHER_ASSET_ID = 'asset-456';
+
+const buildCellProp = (overrides: Record<string, any> = {}) => ({
+    row: {
+        original: {
+            id: MOCK_ASSET_ID,
+            type: 'video',
+            ...overrides
+        }
+    }
+});
+
+const createMockStore = (selectedAssets: string[] = []) => {
+    const initialState = { selectedAssets };
+    return createStore((state: any = initialState, action: any) => {
+        switch (action.type) {
+            case 'selectedAssets/SELECT':
+                return {
+                    ...state,
+                    selectedAssets: [...state.selectedAssets, action.id]
+                };
+            case 'selectedAssets/DESELECT':
+                return {
+                    ...state,
+                    selectedAssets: state.selectedAssets.filter((id) => id !== action.id)
+                };
+            case 'selectedAssets/SELECT_MULTIPLE':
+                return {
+                    ...state,
+                    selectedAssets: [...state.selectedAssets, action.id]
+                };
+            default:
+                return state;
+        }
+    });
+};
+
+const renderComponent = (
+    cellOverrides: Record<string, any> = {},
+    selectedAssets: string[] = []
+) => {
+    const store = createMockStore(selectedAssets);
+    const cell = buildCellProp(cellOverrides);
+
+    const result = render(
+        <Provider store={store}>
+            <AssetsTableSelectCellMemoized cell={cell} />
+        </Provider>
+    );
+
+    return { ...result, store };
+};
+
+describe('AssetsTableSelectCell', () => {
+    it('renders CheckboxField with correct props when asset is not selected', () => {
+        const { getByTestId } = renderComponent();
+        const checkbox = getByTestId('mock-checkbox-field');
+
+        expect(checkbox.getAttribute('data-label')).toBe('');
+        expect(checkbox.getAttribute('data-width')).toBe('auto');
+        expect(checkbox.getAttribute('data-value')).toBe('false');
+    });
+
+    it('renders CheckboxField as checked when asset is selected', () => {
+        const { getByTestId } = renderComponent({}, [MOCK_ASSET_ID]);
+        const checkbox = getByTestId('mock-checkbox-field');
+
+        expect(checkbox.getAttribute('data-value')).toBe('true');
+    });
+
+    it('returns null when asset type is upload', () => {
+        const { container } = renderComponent({ type: 'upload' });
+
+        expect(container.firstChild).toBeNull();
+    });
+
+    it('dispatches selectAsset when checkbox is checked without shift key', () => {
+        const { getByRole, store } = renderComponent();
+        const checkboxInput = getByRole('checkbox');
+
+        fireEvent.click(checkboxInput);
+
+        const storeState = store.getState();
+        expect(storeState.selectedAssets).toContain(MOCK_ASSET_ID);
+    });
+
+    it('dispatches deselectAsset when checkbox is unchecked', () => {
+        const { getByRole, store } = renderComponent({}, [MOCK_ASSET_ID]);
+        const checkboxInput = getByRole('checkbox');
+
+        fireEvent.click(checkboxInput);
+
+        const storeState = store.getState();
+        expect(storeState.selectedAssets).not.toContain(MOCK_ASSET_ID);
+    });
+
+    it('dispatches selectMultipleAssets when checkbox is checked with shift key and other assets selected', () => {
+        const { getByRole, store } = renderComponent({}, [MOCK_OTHER_ASSET_ID]);
+        const checkboxInput = getByRole('checkbox');
+
+        fireEvent.click(checkboxInput, { shiftKey: true });
+
+        const storeState = store.getState();
+        expect(storeState.selectedAssets).toContain(MOCK_ASSET_ID);
+        expect(storeState.selectedAssets).toContain(MOCK_OTHER_ASSET_ID);
+    });
+
+    it('dispatches selectAsset when shift key is pressed but no other assets are selected', () => {
+        const { getByRole, store } = renderComponent();
+        const checkboxInput = getByRole('checkbox');
+
+        fireEvent.click(checkboxInput, { shiftKey: true });
+
+        const storeState = store.getState();
+        expect(storeState.selectedAssets).toContain(MOCK_ASSET_ID);
+        expect(storeState.selectedAssets).toHaveLength(1);
+    });
+
+    it('correctly identifies selected state when asset ID is in selectedAssets array', () => {
+        const { getByTestId } = renderComponent({}, [MOCK_OTHER_ASSET_ID, MOCK_ASSET_ID]);
+        const checkbox = getByTestId('mock-checkbox-field');
+
+        expect(checkbox.getAttribute('data-value')).toBe('true');
+    });
+});

package/src/components/assets/AssetsTableSelectFilter.test.tsx

@@ -0,0 +1,119 @@
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { legacy_createStore as createStore } from 'redux';
+
+vi.mock('../checkbox-field/CheckboxField', () => ({
+    default: ({ label, propagate, value, onChange }: any) => (
+        <div
+            data-testid='mock-checkbox-field'
+            data-label={label}
+            data-propagate={propagate}
+            data-value={value}>
+            <input
+                type='checkbox'
+                checked={value}
+                onChange={() => onChange()}
+            />
+        </div>
+    )
+}));
+
+vi.mock('../../redux/actions/selected-assets', () => ({
+    selectAll: vi.fn(() => ({ type: 'selectedAssets/SELECT_ALL' })),
+    resetSelection: vi.fn(() => ({ type: 'selectedAssets/RESET' }))
+}));
+
+import AssetsTableSelectFilterMemoized from './AssetsTableSelectFilter';
+
+const createMockStore = (selectedAssets: string[] = []) => {
+    const initialState = { selectedAssets };
+    return createStore((state: any = initialState, action: any) => {
+        switch (action.type) {
+            case 'selectedAssets/SELECT_ALL':
+                return {
+                    ...state,
+                    selectedAssets: ['asset-1', 'asset-2', 'asset-3']
+                };
+            case 'selectedAssets/RESET':
+                return {
+                    ...state,
+                    selectedAssets: []
+                };
+            default:
+                return state;
+        }
+    });
+};
+
+const renderComponent = (selectedAssets: string[] = []) => {
+    const store = createMockStore(selectedAssets);
+
+    const result = render(
+        <Provider store={store}>
+            <AssetsTableSelectFilterMemoized />
+        </Provider>
+    );
+
+    return { ...result, store };
+};
+
+describe('AssetsTableSelectFilter', () => {
+    it('renders CheckboxField with correct props when no assets are selected', () => {
+        const { getByTestId } = renderComponent();
+        const checkbox = getByTestId('mock-checkbox-field');
+
+        expect(checkbox.getAttribute('data-label')).toBe('');
+        expect(checkbox.getAttribute('data-propagate')).toBe('false');
+        expect(checkbox.getAttribute('data-value')).toBe('false');
+    });
+
+    it('renders CheckboxField as checked when assets are selected', () => {
+        const { getByTestId } = renderComponent(['asset-1', 'asset-2']);
+        const checkbox = getByTestId('mock-checkbox-field');
+
+        expect(checkbox.getAttribute('data-value')).toBe('true');
+    });
+
+    it('dispatches selectAll when checkbox is clicked and no assets are selected', () => {
+        const { getByRole, store } = renderComponent();
+        const checkboxInput = getByRole('checkbox');
+
+        fireEvent.click(checkboxInput);
+
+        const storeState = store.getState();
+        expect(storeState.selectedAssets).toEqual(['asset-1', 'asset-2', 'asset-3']);
+    });
+
+    it('dispatches resetSelection when checkbox is clicked and assets are selected', () => {
+        const { getByRole, store } = renderComponent(['asset-1', 'asset-2']);
+        const checkboxInput = getByRole('checkbox');
+
+        fireEvent.click(checkboxInput);
+
+        const storeState = store.getState();
+        expect(storeState.selectedAssets).toEqual([]);
+    });
+
+    it('shows unchecked state when selectedAssets array is empty', () => {
+        const { getByTestId } = renderComponent([]);
+        const checkbox = getByTestId('mock-checkbox-field');
+
+        expect(checkbox.getAttribute('data-value')).toBe('false');
+    });
+
+    it('shows checked state when selectedAssets array has one item', () => {
+        const { getByTestId } = renderComponent(['single-asset']);
+        const checkbox = getByTestId('mock-checkbox-field');
+
+        expect(checkbox.getAttribute('data-value')).toBe('true');
+    });
+
+    it('shows checked state when selectedAssets array has multiple items', () => {
+        const { getByTestId } = renderComponent(['asset-1', 'asset-2', 'asset-3']);
+        const checkbox = getByTestId('mock-checkbox-field');
+
+        expect(checkbox.getAttribute('data-value')).toBe('true');
+    });
+});

package/src/components/assets/AssetsTableStatusCell.test.tsx

@@ -0,0 +1,60 @@
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import { render } from '@testing-library/react';
+import AssetsTableStatusCellMemoized from './AssetsTableStatusCell';
+
+const buildCellProp = (overrides: Record<string, any> = {}) => ({
+    row: {
+        original: {
+            processing: false,
+            ...overrides
+        }
+    }
+});
+
+const renderComponent = (overrides: Record<string, any> = {}) => {
+    return render(<AssetsTableStatusCellMemoized cell={buildCellProp(overrides)} />);
+};
+
+describe('AssetsTableStatusCell', () => {
+    it('renders with complete status when processing is false', () => {
+        const { container } = renderComponent({ processing: false });
+        const statusCell = container.querySelector('.asset-status-cell');
+        const statusIndicator = container.querySelector('.status-indicator');
+
+        expect(statusCell).toBeTruthy();
+        expect(statusIndicator?.className).toBe('status-indicator complete');
+    });
+
+    it('renders with processing status when processing is true', () => {
+        const { container } = renderComponent({ processing: true });
+        const statusIndicator = container.querySelector('.status-indicator');
+
+        expect(statusIndicator?.className).toBe('status-indicator processing');
+    });
+
+    it('renders with complete status when processing is undefined', () => {
+        const { container } = renderComponent({ processing: undefined });
+        const statusIndicator = container.querySelector('.status-indicator');
+
+        expect(statusIndicator?.className).toBe('status-indicator complete');
+    });
+
+    it('renders with complete status when processing is null', () => {
+        const { container } = renderComponent({ processing: null });
+        const statusIndicator = container.querySelector('.status-indicator');
+
+        expect(statusIndicator?.className).toBe('status-indicator complete');
+    });
+
+    it('renders the correct DOM structure', () => {
+        const { container } = renderComponent();
+        const statusCell = container.querySelector('.asset-status-cell');
+        const statusIndicator = statusCell?.querySelector('.status-indicator');
+
+        expect(statusCell).toBeTruthy();
+        expect(statusIndicator).toBeTruthy();
+        expect(statusCell?.children).toHaveLength(1);
+        expect(statusCell?.firstChild).toEqual(statusIndicator);
+    });
+});

package/src/components/publish-wizard/PublishWizard.tsx

@@ -393,7 +393,12 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
     }
 
     private getErrorCopyForCrMPublish() {
-        const { story, project } = this.props;
+        const { story, project, fromCrM } = this.props;
+
+        if (!fromCrM) {
+            return null;
+        }
+
         const variables = story ? story.acts[project.actId].inventory : {};
         const varLength = variables ? Object.keys(variables).length : 0;
 
@@ -574,6 +579,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         const projectType = story.creativeId
             ? CRM_INTEGRATED_PROJECT_TYPES.SINGLE_CREATIVE
             : CRM_INTEGRATED_PROJECT_TYPES.MULTI_CREATIVE;
+
         const error = errorCopy ? (
             <p className='publish-error'>
                 <span className='icon'>{ICON_EXCLAIMATION_TRIANGLE}</span>&nbsp;&nbsp;{errorCopy}