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

package/v2Containers/InAppWrapper/components/InAppWrapperView.js

@@ -1,162 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import styled from 'styled-components';
-import CapRadioCard from '@capillarytech/cap-ui-library/CapRadioCard';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapError from '@capillarytech/cap-ui-library/CapError';
-import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
-import InApp from '../../InApp';
-import messages from '../messages';
-import { STEPS } from '../constants';
-import './inAppWrapperView.scss';
-const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
-
-const CardContainer = styled.div`
-  margin-top: 16px;
-  .ant-radio-group{
-    .ant-radio-button-wrapper{
-      &:first-child{
-        margin-left: unset;
-      }
-    }
-  }
-`;
-
-// Mode selection component that handles the editor type selection UI
-const ModeSelectionUI = ({
-  isFullMode,
-  templateName,
-  onTemplateNameChange,
-  isTemplateNameEmpty,
-  modes,
-  inAppEditorType,
-  onChange,
-  handleEditorTypeSelection,
-  templateNamePlaceholder,
-}) => (
-  <>
-    <CapInput
-      label={<FormattedMessage {...messages.creativeName} />}
-      onChange={onTemplateNameChange}
-      value={templateName}
-      placeholder={templateNamePlaceholder}
-      labelPosition="top"
-      size="default"
-    />
-    <CardContainer>
-      <CapRadioCardWithLabel
-        panes={modes}
-        onChange={onChange}
-        selected={inAppEditorType}
-        label={<FormattedMessage {...messages.editorType} />}
-      />
-    </CardContainer>
-    {isFullMode && isTemplateNameEmpty && (
-      <CapError type="error" className="template-name-error">
-        <FormattedMessage {...messages.emptyTemplateName} />
-      </CapError>
-    )}
-    {inAppEditorType && !isTemplateNameEmpty && (
-      <div className="next-button-container">
-        <CapButton
-          onClick={handleEditorTypeSelection}
-          disabled={isFullMode && isTemplateNameEmpty}
-        >
-          <FormattedMessage {...messages.next} />
-        </CapButton>
-      </div>
-    )}
-  </>
-);
-
-ModeSelectionUI.propTypes = {
-  isFullMode: PropTypes.bool,
-  templateName: PropTypes.string,
-  onTemplateNameChange: PropTypes.func.isRequired,
-  isTemplateNameEmpty: PropTypes.bool,
-  modes: PropTypes.array.isRequired,
-  inAppEditorType: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  handleEditorTypeSelection: PropTypes.func.isRequired,
-  templateNamePlaceholder: PropTypes.string.isRequired,
-};
-
-// Content creation component that handles the InApp editor UI
-const ContentCreationUI = ({
-  isShowInAppCreate,
-  inAppProps,
-}) => (
-  <>
-    {isShowInAppCreate && (
-      <InApp {...inAppProps} />
-    )}
-  </>
-);
-
-ContentCreationUI.propTypes = {
-  isShowInAppCreate: PropTypes.bool.isRequired,
-  inAppProps: PropTypes.object.isRequired,
-};
-
-// Main InAppWrapper presentational component
-const InAppWrapperView = ({
-  inAppEditorType,
-  step,
-  isFullMode,
-  templateName,
-  onTemplateNameChange,
-  isTemplateNameEmpty,
-  modes,
-  onChange,
-  isShowInAppCreate,
-  inAppProps,
-  handleEditorTypeSelection,
-  templateNamePlaceholder,
-}) => {
-  const isShowTemplateSelection = step === STEPS.MODE_SELECTION;
-
-  return (
-    <>
-      <CapSpin spinning={false}>
-        {isShowTemplateSelection ? (
-          <ModeSelectionUI
-            isFullMode={isFullMode}
-            templateName={templateName}
-            onTemplateNameChange={onTemplateNameChange}
-            isTemplateNameEmpty={isTemplateNameEmpty}
-            modes={modes}
-            inAppEditorType={inAppEditorType}
-            onChange={onChange}
-            handleEditorTypeSelection={handleEditorTypeSelection}
-            templateNamePlaceholder={templateNamePlaceholder}
-          />
-        ) : (
-          <ContentCreationUI
-            isShowInAppCreate={isShowInAppCreate}
-            inAppProps={inAppProps}
-          />
-        )}
-      </CapSpin>
-    </>
-  );
-};
-
-InAppWrapperView.propTypes = {
-  inAppEditorType: PropTypes.string,
-  step: PropTypes.string,
-  isFullMode: PropTypes.bool,
-  templateName: PropTypes.string,
-  onTemplateNameChange: PropTypes.func.isRequired,
-  isTemplateNameEmpty: PropTypes.bool,
-  modes: PropTypes.array.isRequired,
-  onChange: PropTypes.func.isRequired,
-  isShowInAppCreate: PropTypes.bool.isRequired,
-  inAppProps: PropTypes.object.isRequired,
-  handleEditorTypeSelection: PropTypes.func.isRequired,
-  templateNamePlaceholder: PropTypes.string.isRequired,
-};
-
-export default InAppWrapperView;

package/v2Containers/InAppWrapper/components/__tests__/InAppWrapperView.test.js

@@ -1,267 +0,0 @@
-/**
- * InAppWrapperView Component Tests
- *
- * Tests for the InAppWrapperView presentational component
- */
-
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { IntlProvider } from 'react-intl';
-import InAppWrapperView from '../InAppWrapperView';
-import { STEPS, INAPP_EDITOR_TYPES } from '../../constants';
-
-// Mock InApp component
-jest.mock('../../../InApp', () => function MockInApp(props) {
-  return <div data-testid="inapp-component">InApp Component</div>;
-});
-
-// Mock CapIcon
-jest.mock('@capillarytech/cap-ui-library/CapIcon', () => function MockCapIcon({ type }) {
-  return <span data-testid={`icon-${type}`}>{type}</span>;
-});
-
-const defaultProps = {
-  inAppEditorType: '',
-  step: STEPS.MODE_SELECTION,
-  isFullMode: true,
-  templateName: '',
-  onTemplateNameChange: jest.fn(),
-  isTemplateNameEmpty: true,
-  modes: [
-    {
-      title: 'HTML Editor',
-      content: 'HTML Editor Description',
-      value: INAPP_EDITOR_TYPES.HTML_EDITOR,
-      icon: <span>code</span>,
-    },
-    {
-      title: 'Drag Drop Editor',
-      content: 'Drag Drop Editor Description',
-      value: INAPP_EDITOR_TYPES.DRAG_DROP_EDITOR,
-      icon: <span>draggable</span>,
-    },
-  ],
-  onChange: jest.fn(),
-  isShowInAppCreate: false,
-  inAppProps: {
-    location: { pathname: '/inapp/create' },
-  },
-  handleEditorTypeSelection: jest.fn(),
-  templateNamePlaceholder: 'Enter the template name',
-};
-
-const renderComponent = (props = {}) => {
-  const mergedProps = { ...defaultProps, ...props };
-  // Create a messages object with default messages
-  const intlMessages = {
-    'creatives.containersV2.InAppWrapper.creativeName': 'Creative name',
-    'creatives.containersV2.InAppWrapper.editorType': 'Editor type',
-    'creatives.containersV2.InAppWrapper.emptyTemplateName': 'Please enter template name.',
-    'creatives.containersV2.InAppWrapper.next': 'Next',
-    'creatives.containersV2.InAppWrapper.templateNamePlaceholder': 'Enter the template name',
-  };
-  return render(
-    <IntlProvider locale="en" messages={intlMessages}>
-      <InAppWrapperView {...mergedProps} />
-    </IntlProvider>
-  );
-};
-
-describe('InAppWrapperView', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('Mode Selection UI', () => {
-    it('renders mode selection UI when step is MODE_SELECTION', () => {
-      renderComponent({ step: STEPS.MODE_SELECTION });
-
-      // Should show template name input in full mode
-      expect(screen.queryByPlaceholderText('Enter the template name')).toBeInTheDocument();
-      expect(screen.queryByText('HTML Editor')).toBeInTheDocument();
-      expect(screen.queryByText('Drag Drop Editor')).toBeInTheDocument();
-    });
-
-    it('shows template name input when isFullMode is true', () => {
-      renderComponent({
-        step: STEPS.MODE_SELECTION,
-        isFullMode: true,
-      });
-
-      expect(screen.queryByPlaceholderText('Enter the template name')).toBeInTheDocument();
-    });
-
-    it('show template name input when isFullMode is false', () => {
-      renderComponent({
-        step: STEPS.MODE_SELECTION,
-        isFullMode: false,
-      });
-
-      expect(screen.queryByPlaceholderText('Enter the template name')).toBeInTheDocument();
-    });
-
-    it('shows error message when template name is empty in full mode', () => {
-      renderComponent({
-        step: STEPS.MODE_SELECTION,
-        isFullMode: true,
-        isTemplateNameEmpty: true,
-      });
-
-      // Error message should be visible - check for the error text
-      // The error message is rendered via FormattedMessage with messages.emptyTemplateName
-      // Default message is "Please enter template name."
-      const errorElement = screen.queryByText(/please enter template name/i)
-        || screen.queryByText(/template name/i)
-        || screen.queryByRole('alert');
-      // The error should be visible when isTemplateNameEmpty is true
-      expect(errorElement || screen.queryByPlaceholderText('Enter the template name')).toBeTruthy();
-    });
-
-    it('does not show error message when template name is not empty', () => {
-      renderComponent({
-        step: STEPS.MODE_SELECTION,
-        isFullMode: true,
-        isTemplateNameEmpty: false,
-        templateName: 'Test Template',
-      });
-
-      const errorElement = screen.queryByText(/empty/i);
-      expect(errorElement).not.toBeInTheDocument();
-    });
-
-    it('shows Next button when editor type is selected and template name is not empty', () => {
-      renderComponent({
-        step: STEPS.MODE_SELECTION,
-        isFullMode: true,
-        inAppEditorType: INAPP_EDITOR_TYPES.HTML_EDITOR,
-        isTemplateNameEmpty: false,
-        templateName: 'Test Template',
-      });
-
-      const nextButton = screen.queryByText(/next/i);
-      expect(nextButton).toBeInTheDocument();
-    });
-
-    it('does not show Next button when editor type is not selected', () => {
-      renderComponent({
-        step: STEPS.MODE_SELECTION,
-        isFullMode: true,
-        inAppEditorType: '',
-        isTemplateNameEmpty: false,
-        templateName: 'Test Template',
-      });
-
-      const nextButton = screen.queryByText(/next/i);
-      expect(nextButton).not.toBeInTheDocument();
-    });
-
-    it('calls handleEditorTypeSelection when Next button is clicked', () => {
-      const handleEditorTypeSelection = jest.fn();
-      renderComponent({
-        step: STEPS.MODE_SELECTION,
-        isFullMode: true,
-        inAppEditorType: INAPP_EDITOR_TYPES.HTML_EDITOR,
-        isTemplateNameEmpty: false,
-        templateName: 'Test Template',
-        handleEditorTypeSelection,
-      });
-
-      const nextButton = screen.getByText(/next/i);
-      fireEvent.click(nextButton);
-
-      expect(handleEditorTypeSelection).toHaveBeenCalled();
-    });
-
-    it('calls onTemplateNameChange when template name input changes', () => {
-      const onTemplateNameChange = jest.fn();
-      renderComponent({
-        step: STEPS.MODE_SELECTION,
-        isFullMode: true,
-        onTemplateNameChange,
-      });
-
-      const input = screen.getByPlaceholderText('Enter the template name');
-      fireEvent.change(input, { target: { value: 'New Template' } });
-
-      expect(onTemplateNameChange).toHaveBeenCalled();
-    });
-
-    it('calls onChange when editor type is selected', () => {
-      const onChange = jest.fn();
-      renderComponent({
-        step: STEPS.MODE_SELECTION,
-        onChange,
-      });
-
-      // Simulate selecting an editor type (this would be done via CapRadioCard)
-      // Since we're testing the view component, we'll verify the onChange prop is passed
-      expect(onChange).toBeDefined();
-    });
-  });
-
-  describe('Content Creation UI', () => {
-    it('renders InApp component when step is not MODE_SELECTION and isShowInAppCreate is true', () => {
-      renderComponent({
-        step: STEPS.CREATE_TEMPLATE_CONTENT,
-        isShowInAppCreate: true,
-      });
-
-      expect(screen.getByTestId('inapp-component')).toBeInTheDocument();
-    });
-
-    it('does not render InApp component when isShowInAppCreate is false', () => {
-      renderComponent({
-        step: STEPS.CREATE_TEMPLATE_CONTENT,
-        isShowInAppCreate: false,
-      });
-
-      expect(screen.queryByTestId('inapp-component')).not.toBeInTheDocument();
-    });
-
-    it('passes inAppProps to InApp component', () => {
-      const customInAppProps = {
-        location: { pathname: '/inapp/create' },
-        defaultData: { 'template-name': 'Test' },
-      };
-
-      renderComponent({
-        step: STEPS.CREATE_TEMPLATE_CONTENT,
-        isShowInAppCreate: true,
-        inAppProps: customInAppProps,
-      });
-
-      expect(screen.getByTestId('inapp-component')).toBeInTheDocument();
-    });
-  });
-
-  describe('Step Transitions', () => {
-    it('switches from mode selection to content creation', () => {
-      const { rerender } = renderComponent({
-        step: STEPS.MODE_SELECTION,
-      });
-
-      expect(screen.queryByPlaceholderText('Enter the template name')).toBeInTheDocument();
-
-      const intlMessages = {
-        'creatives.containersV2.InAppWrapper.creativeName': 'Creative name',
-        'creatives.containersV2.InAppWrapper.editorType': 'Editor type',
-        'creatives.containersV2.InAppWrapper.emptyTemplateName': 'Please enter template name.',
-        'creatives.containersV2.InAppWrapper.next': 'Next',
-        'creatives.containersV2.InAppWrapper.templateNamePlaceholder': 'Enter the template name',
-      };
-      rerender(
-        <IntlProvider locale="en" messages={intlMessages}>
-          <InAppWrapperView
-            {...defaultProps}
-            step={STEPS.CREATE_TEMPLATE_CONTENT}
-            isShowInAppCreate
-          />
-        </IntlProvider>
-      );
-
-      expect(screen.queryByPlaceholderText('Enter the template name')).not.toBeInTheDocument();
-      expect(screen.getByTestId('inapp-component')).toBeInTheDocument();
-    });
-  });
-});

package/v2Containers/InAppWrapper/components/inAppWrapperView.scss

@@ -1,9 +0,0 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
-
-.template-name-error {
-  margin-top: $CAP_SPACE_08;
-}
-
-.next-button-container {
-  margin-top: $CAP_SPACE_16;
-}

package/v2Containers/InAppWrapper/constants.js

@@ -1,16 +0,0 @@
-/*
- *
- * InAppWrapper constants
- *
- */
-
-export const DEFAULT_ACTION = "app/InAppWrapper/DEFAULT_ACTION";
-export const INAPP_EDITOR_TYPES = {
-  HTML_EDITOR: "htmlEditor",
-  DRAG_DROP_EDITOR: "dragDropEditor",
-};
-
-export const STEPS = {
-  MODE_SELECTION: "modeSelection",
-  CREATE_TEMPLATE_CONTENT: "createTemplateContent",
-};