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

package/v2Containers/InAppWrapper/hooks/__tests__/useInAppWrapper.test.js

@@ -1,473 +0,0 @@
-/**
- * useInAppWrapper Hook Tests
- *
- * Tests for the useInAppWrapper custom hook that manages InAppWrapper component business logic
- */
-
-import React from 'react';
-import { render, screen, fireEvent, act } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import useInAppWrapper from '../useInAppWrapper';
-import { STEPS, INAPP_EDITOR_TYPES } from '../../constants';
-
-// Test wrapper component
-const TestComponent = ({ hookProps, onStateChange }) => {
-  const hookState = useInAppWrapper(hookProps);
-
-  React.useEffect(() => {
-    if (onStateChange) {
-      onStateChange(hookState);
-    }
-  });
-
-  return (
-    <div>
-      <div data-testid="template-name">{hookState.templateName}</div>
-      <div data-testid="is-template-name-empty">{String(hookState.isTemplateNameEmpty)}</div>
-      <div data-testid="selected-editor-type">{hookState.selectedEditorType}</div>
-      <div data-testid="is-show-inapp-create">{String(hookState.isShowInAppCreate)}</div>
-      <div data-testid="modes-count">{hookState.modes?.length || 0}</div>
-      
-      <input
-        data-testid="template-name-input"
-        onChange={hookState.onTemplateNameChange}
-        value={hookState.templateName}
-      />
-      <button
-        data-testid="editor-type-button"
-        onClick={(e) => {
-          e.target.value = INAPP_EDITOR_TYPES.HTML_EDITOR;
-          hookState.onChange(e);
-        }}
-      >
-        Change Editor Type
-      </button>
-      <button
-        data-testid="editor-type-selection-button"
-        onClick={hookState.handleEditorTypeSelection}
-      >
-        Select Editor Type
-      </button>
-    </div>
-  );
-};
-
-describe('useInAppWrapper', () => {
-  const defaultHookProps = {
-    intl: {
-      formatMessage: jest.fn((msg) => msg.defaultMessage || msg.id || 'formatted'),
-    },
-    onInAppEditorTypeChange: jest.fn(),
-    inAppEditorType: '',
-    step: STEPS.MODE_SELECTION,
-    showNextStep: jest.fn(),
-    onResetStep: jest.fn(),
-    onEnterTemplateName: jest.fn(),
-    onRemoveTemplateName: jest.fn(),
-    setIsLoadingContent: jest.fn(),
-    isGetFormData: false,
-    getFormdata: jest.fn(),
-    type: null,
-    isFullMode: true,
-    cap: {},
-    showTemplateName: jest.fn(),
-    showLiquidErrorInFooter: jest.fn(),
-    onValidationFail: jest.fn(),
-    forwardedTags: [],
-    selectedOfferDetails: null,
-    onPreviewContentClicked: jest.fn(),
-    onTestContentClicked: jest.fn(),
-    eventContextTags: {},
-    onCreateComplete: jest.fn(),
-    handleClose: jest.fn(),
-    templateData: null,
-    getDefaultTags: null,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('Initial State', () => {
-    it('initializes with default state', () => {
-      render(<TestComponent hookProps={defaultHookProps} />);
-
-      expect(screen.getByTestId('template-name')).toHaveTextContent('');
-      expect(screen.getByTestId('is-template-name-empty')).toHaveTextContent('true');
-      expect(screen.getByTestId('selected-editor-type')).toHaveTextContent('');
-      expect(screen.getByTestId('is-show-inapp-create')).toHaveTextContent('false');
-      expect(screen.getByTestId('modes-count')).toHaveTextContent('2');
-    });
-
-    it('initializes modes with correct structure', () => {
-      let capturedState = null;
-      render(
-        <TestComponent
-          hookProps={defaultHookProps}
-          onStateChange={(state) => {
-            capturedState = state;
-          }}
-        />
-      );
-
-      expect(capturedState.modes).toHaveLength(2);
-      expect(capturedState.modes[0].value).toBe(INAPP_EDITOR_TYPES.HTML_EDITOR);
-      expect(capturedState.modes[1].value).toBe(INAPP_EDITOR_TYPES.DRAG_DROP_EDITOR);
-    });
-  });
-
-  describe('Template Name Management', () => {
-    it('updates template name when input changes', () => {
-      render(<TestComponent hookProps={defaultHookProps} />);
-
-      const input = screen.getByTestId('template-name-input');
-      fireEvent.change(input, { target: { value: 'Test Template' } });
-
-      expect(screen.getByTestId('template-name')).toHaveTextContent('Test Template');
-      expect(screen.getByTestId('is-template-name-empty')).toHaveTextContent('false');
-    });
-
-    it('calls onEnterTemplateName when template name is entered', () => {
-      const onEnterTemplateName = jest.fn();
-      render(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            onEnterTemplateName,
-          }}
-        />
-      );
-
-      const input = screen.getByTestId('template-name-input');
-      fireEvent.change(input, { target: { value: 'Test Template' } });
-
-      expect(onEnterTemplateName).toHaveBeenCalled();
-    });
-
-    it('calls onRemoveTemplateName when template name is cleared', () => {
-      const onRemoveTemplateName = jest.fn();
-      render(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            onRemoveTemplateName,
-          }}
-        />
-      );
-
-      const input = screen.getByTestId('template-name-input');
-      fireEvent.change(input, { target: { value: 'Test' } });
-      fireEvent.change(input, { target: { value: '' } });
-
-      expect(onRemoveTemplateName).toHaveBeenCalled();
-    });
-
-    it('handles template name with only whitespace', () => {
-      render(<TestComponent hookProps={defaultHookProps} />);
-
-      const input = screen.getByTestId('template-name-input');
-      fireEvent.change(input, { target: { value: '   ' } });
-
-      expect(screen.getByTestId('is-template-name-empty')).toHaveTextContent('true');
-    });
-  });
-
-  describe('Editor Type Selection', () => {
-    it('calls onInAppEditorTypeChange when editor type changes', () => {
-      const onInAppEditorTypeChange = jest.fn();
-      render(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            onInAppEditorTypeChange,
-          }}
-        />
-      );
-
-      const button = screen.getByTestId('editor-type-button');
-      fireEvent.click(button);
-
-      expect(onInAppEditorTypeChange).toHaveBeenCalled();
-    });
-
-    it('handles editor type selection when template name is not empty', () => {
-      const showNextStep = jest.fn();
-      render(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            inAppEditorType: INAPP_EDITOR_TYPES.HTML_EDITOR,
-            showNextStep,
-          }}
-        />
-      );
-
-      // First set template name
-      const input = screen.getByTestId('template-name-input');
-      fireEvent.change(input, { target: { value: 'Test Template' } });
-
-      // Then select editor type
-      const button = screen.getByTestId('editor-type-selection-button');
-      fireEvent.click(button);
-
-      expect(showNextStep).toHaveBeenCalled();
-    });
-
-    it('does not call showNextStep when template name is empty', () => {
-      const showNextStep = jest.fn();
-      render(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            inAppEditorType: INAPP_EDITOR_TYPES.HTML_EDITOR,
-            showNextStep,
-          }}
-        />
-      );
-
-      const button = screen.getByTestId('editor-type-selection-button');
-      fireEvent.click(button);
-
-      expect(showNextStep).not.toHaveBeenCalled();
-    });
-
-    it('does not call showNextStep when editor type is not selected', () => {
-      const showNextStep = jest.fn();
-      render(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            inAppEditorType: '',
-            showNextStep,
-          }}
-        />
-      );
-
-      const input = screen.getByTestId('template-name-input');
-      fireEvent.change(input, { target: { value: 'Test Template' } });
-
-      const button = screen.getByTestId('editor-type-selection-button');
-      fireEvent.click(button);
-
-      expect(showNextStep).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Step Management', () => {
-    it('sets selectedEditorType when step is CREATE_TEMPLATE_CONTENT and editor type is set', () => {
-      let capturedState = null;
-      render(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            step: STEPS.CREATE_TEMPLATE_CONTENT,
-            inAppEditorType: INAPP_EDITOR_TYPES.HTML_EDITOR,
-          }}
-          onStateChange={(state) => {
-            capturedState = state;
-          }}
-        />
-      );
-
-      expect(capturedState.selectedEditorType).toBe(INAPP_EDITOR_TYPES.HTML_EDITOR);
-    });
-
-    it('does not set selectedEditorType when step is MODE_SELECTION', () => {
-      let capturedState = null;
-      render(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            step: STEPS.MODE_SELECTION,
-            inAppEditorType: INAPP_EDITOR_TYPES.HTML_EDITOR,
-          }}
-          onStateChange={(state) => {
-            capturedState = state;
-          }}
-        />
-      );
-
-      expect(capturedState.selectedEditorType).toBe('');
-    });
-
-    it('skips setting selectedEditorType if already set', () => {
-      let capturedState = null;
-      const { rerender } = render(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            step: STEPS.CREATE_TEMPLATE_CONTENT,
-            inAppEditorType: INAPP_EDITOR_TYPES.HTML_EDITOR,
-          }}
-          onStateChange={(state) => {
-            capturedState = state;
-          }}
-        />
-      );
-
-      const initialType = capturedState.selectedEditorType;
-
-      // Change step but keep editor type
-      rerender(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            step: STEPS.MODE_SELECTION,
-            inAppEditorType: INAPP_EDITOR_TYPES.HTML_EDITOR,
-          }}
-          onStateChange={(state) => {
-            capturedState = state;
-          }}
-        />
-      );
-
-      // Should remain the same since it was already set
-      expect(capturedState.selectedEditorType).toBe(initialType);
-    });
-
-    it('handles default case in step switch statement', () => {
-      let capturedState = null;
-      render(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            step: 'UNKNOWN_STEP', // Use an unknown step to trigger default case
-            inAppEditorType: INAPP_EDITOR_TYPES.HTML_EDITOR,
-          }}
-          onStateChange={(state) => {
-            capturedState = state;
-          }}
-        />
-      );
-
-      // Should not set selectedEditorType for unknown step
-      expect(capturedState.selectedEditorType).toBe('');
-    });
-  });
-
-  describe('Cleanup', () => {
-    it('calls onResetStep on unmount', () => {
-      const onResetStep = jest.fn();
-      const { unmount } = render(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            onResetStep,
-          }}
-        />
-      );
-
-      unmount();
-
-      expect(onResetStep).toHaveBeenCalled();
-    });
-  });
-
-  describe('InApp Props Generation', () => {
-    it('generates correct inAppProps with all required fields', () => {
-      let capturedState = null;
-      render(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            templateName: 'Test Template',
-            inAppEditorType: INAPP_EDITOR_TYPES.HTML_EDITOR,
-          }}
-          onStateChange={(state) => {
-            capturedState = state;
-          }}
-        />
-      );
-
-      const input = screen.getByTestId('template-name-input');
-      fireEvent.change(input, { target: { value: 'Test Template' } });
-
-      expect(capturedState.inAppProps).toBeDefined();
-      expect(capturedState.inAppProps.defaultData['template-name']).toBe('Test Template');
-      expect(capturedState.inAppProps.defaultData['editor-type']).toBe(INAPP_EDITOR_TYPES.HTML_EDITOR);
-      expect(capturedState.inAppProps.key).toBe('inapp-create-template');
-      expect(capturedState.inAppProps.route.name).toBe('inapp');
-    });
-
-    it('uses getDefaultTags from type prop when available', () => {
-      let capturedState = null;
-      render(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            type: 'customType',
-            getDefaultTags: 'defaultTags',
-          }}
-          onStateChange={(state) => {
-            capturedState = state;
-          }}
-        />
-      );
-
-      expect(capturedState.inAppProps.getDefaultTags).toBe('customType');
-    });
-
-    it('uses getDefaultTags prop when type is not available', () => {
-      let capturedState = null;
-      render(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            type: null,
-            getDefaultTags: 'defaultTags',
-          }}
-          onStateChange={(state) => {
-            capturedState = state;
-          }}
-        />
-      );
-
-      expect(capturedState.inAppProps.getDefaultTags).toBe('defaultTags');
-    });
-  });
-
-  describe('isShowInAppCreate', () => {
-    it('returns truthy value when selectedEditorType and inAppEditorType are set', () => {
-      let capturedState = null;
-      render(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            step: STEPS.CREATE_TEMPLATE_CONTENT,
-            inAppEditorType: INAPP_EDITOR_TYPES.HTML_EDITOR,
-          }}
-          onStateChange={(state) => {
-            capturedState = state;
-          }}
-        />
-      );
-
-      // isShowInAppCreate = !isEmpty(selectedEditorType) && inAppEditorType
-      // When both are truthy, it returns inAppEditorType (the string value)
-      // After useEffect runs, selectedEditorType should be set
-      expect(capturedState.selectedEditorType).toBe(INAPP_EDITOR_TYPES.HTML_EDITOR);
-      // isShowInAppCreate returns the inAppEditorType value when both conditions are true
-      expect(capturedState.isShowInAppCreate).toBeTruthy();
-      expect(capturedState.isShowInAppCreate).toBe(INAPP_EDITOR_TYPES.HTML_EDITOR);
-    });
-
-    it('returns false when selectedEditorType is not set', () => {
-      let capturedState = null;
-      render(
-        <TestComponent
-          hookProps={{
-            ...defaultHookProps,
-            step: STEPS.MODE_SELECTION,
-            inAppEditorType: INAPP_EDITOR_TYPES.HTML_EDITOR,
-          }}
-          onStateChange={(state) => {
-            capturedState = state;
-          }}
-        />
-      );
-
-      expect(capturedState.isShowInAppCreate).toBe(false);
-    });
-  });
-});
-

package/v2Containers/InAppWrapper/hooks/useInAppWrapper.js

@@ -1,198 +0,0 @@
-import React, {
-  useState, useEffect, useMemo, useCallback,
-} from 'react';
-import isEmpty from 'lodash/isEmpty';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import messages from '../messages';
-import { STEPS, INAPP_EDITOR_TYPES } from '../constants';
-
-/**
- * Custom hook to handle InAppWrapper component business logic
- */
-const useInAppWrapper = ({
-  intl: { formatMessage },
-  onInAppEditorTypeChange,
-  inAppEditorType,
-  step,
-  showNextStep,
-  onResetStep,
-  onEnterTemplateName,
-  onRemoveTemplateName,
-  // Props for InApp component
-  setIsLoadingContent,
-  isGetFormData,
-  getFormdata,
-  type,
-  isFullMode,
-  cap,
-  showTemplateName,
-  showLiquidErrorInFooter,
-  onValidationFail,
-  forwardedTags,
-  selectedOfferDetails,
-  onPreviewContentClicked,
-  onTestContentClicked,
-  eventContextTags,
-  onCreateComplete,
-  handleClose,
-  templateData,
-  getDefaultTags,
-}) => {
-  // State management
-  const [templateName, setTemplateName] = useState('');
-  const [isTemplateNameEmpty, setIsTemplateNameEmpty] = useState(true);
-  const [selectedEditorType, setSelectedEditorType] = useState('');
-  const [routeParams] = useState({
-    pathname: `/inapp/create`,
-    query: { module: 'library', type: 'embedded' },
-  });
-
-  // Cleanup effect
-  useEffect(() => () => {
-    onResetStep();
-  }, [onResetStep]);
-
-  // Event handlers
-  const onTemplateNameChange = useCallback(({target: {value}}) => {
-    const isEmptyTemplateName = !value?.trim();
-    setTemplateName(value);
-    setIsTemplateNameEmpty(isEmptyTemplateName);
-
-    if (value && onEnterTemplateName) {
-      onEnterTemplateName();
-    } else if (onRemoveTemplateName) {
-      onRemoveTemplateName();
-    }
-  }, [onEnterTemplateName, onRemoveTemplateName]);
-
-  const onChange = useCallback((e) => {
-    onInAppEditorTypeChange(e.target.value);
-  }, [onInAppEditorTypeChange]);
-
-  const handleEditorTypeSelection = useCallback(() => {
-    if (inAppEditorType && !isTemplateNameEmpty) {
-      setSelectedEditorType(inAppEditorType);
-      showNextStep();
-    }
-  }, [inAppEditorType, isTemplateNameEmpty, showNextStep]);
-
-  // Main logic effect
-  useEffect(() => {
-    // Skip if user has already made a selection
-    if (selectedEditorType) return;
-
-    // Handle different steps
-    switch (step) {
-      case STEPS.MODE_SELECTION:
-        // Wait for user to select editor type and enter template name
-        break;
-
-      case STEPS.CREATE_TEMPLATE_CONTENT:
-        if (inAppEditorType) {
-          setSelectedEditorType(inAppEditorType);
-        }
-        break;
-
-      default:
-        // No operation for other steps
-        break;
-    }
-  }, [
-    step,
-    selectedEditorType,
-    inAppEditorType,
-  ]);
-
-  // Derived state
-  const isShowInAppCreate = !isEmpty(selectedEditorType) && inAppEditorType;
-
-  // Memoize static data
-  const modes = useMemo(() => [
-    {
-      title: formatMessage(messages.htmlEditor),
-      content: formatMessage(messages.htmlEditorDesc),
-      value: INAPP_EDITOR_TYPES.HTML_EDITOR,
-      icon: <CapIcon type="code" />,
-    },
-    {
-      title: formatMessage(messages.dragDropEditor),
-      content: formatMessage(messages.dragDropEditorDesc),
-      value: INAPP_EDITOR_TYPES.DRAG_DROP_EDITOR,
-      icon: <CapIcon type="draggable" />,
-    },
-  ], [formatMessage]);
-
-  // Prepare props for InApp component
-  const inAppProps = useMemo(() => {
-    const props = {
-      setIsLoadingContent,
-      key: "inapp-create-template",
-      location: routeParams,
-      route: { name: 'inapp' },
-      params: {},
-      isGetFormData,
-      getFormData: getFormdata, // Map getFormdata to getFormData (matching InApp component prop name)
-      getFormSubscriptionData: getFormdata,
-      getDefaultTags: type || getDefaultTags,
-      isFullMode,
-      defaultData: {
-        'template-name': templateName,
-        'editor-type': inAppEditorType, // Pass editor type to InApp component
-      },
-      templateData,
-      cap,
-      showTemplateName,
-      showLiquidErrorInFooter,
-      onValidationFail,
-      forwardedTags,
-      selectedOfferDetails,
-      onPreviewContentClicked,
-      onTestContentClicked,
-      eventContextTags,
-      onCreateComplete,
-      handleClose,
-    };
-    return props;
-  }, [
-    setIsLoadingContent,
-    routeParams,
-    isGetFormData,
-    getFormdata,
-    type,
-    getDefaultTags,
-    isFullMode,
-    templateName,
-    inAppEditorType,
-    templateData,
-    cap,
-    showTemplateName,
-    showLiquidErrorInFooter,
-    onValidationFail,
-    forwardedTags,
-    selectedOfferDetails,
-    onPreviewContentClicked,
-    onTestContentClicked,
-    eventContextTags,
-    onCreateComplete,
-    handleClose,
-  ]);
-
-  return {
-    // State
-    templateName,
-    isTemplateNameEmpty,
-    selectedEditorType,
-
-    // Derived values
-    modes,
-    isShowInAppCreate,
-    inAppProps,
-
-    // Event handlers
-    onTemplateNameChange,
-    onChange,
-    handleEditorTypeSelection,
-  };
-};
-
-export default useInAppWrapper;