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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.242-alpha.1",
+  "version": "8.0.242-alpha.10",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -77,6 +77,7 @@ const HTMLEditor = ({
   onContextChange = null,
   globalActions = null,
   isLiquidEnabled = false, // Controls Liquid tab visibility in ValidationTabs
+  isFullMode = true, // Full mode vs library mode - controls layout and visibility
   ...props
 }) => {
   // Separate refs for main and modal editors to avoid conflicts
@@ -434,9 +435,14 @@ const HTMLEditor = ({
     );
   }
 
+  // Add library-mode class when not in full mode
+  // Note: isFullMode defaults to true, so library mode is when isFullMode === false
+  const isLibraryMode = isFullMode === false;
+  const editorClassName = `html-editor html-editor--${variant} ${isLibraryMode ? 'html-editor--library-mode' : ''} ${className}`.trim();
+
   return (
     <EditorProvider value={contextValue}>
-      <div className={`html-editor html-editor--${variant} ${className}`} {...props}>
+      <div className={editorClassName} {...props}>
         {/* Editor Toolbar - Conditional based on variant */}
         {variant === HTML_EDITOR_VARIANTS.EMAIL ? (
           <EditorToolbar
@@ -504,7 +510,7 @@ const HTMLEditor = ({
           width="90vw"
           className="html-editor-fullscreen-modal"
         >
-          <CapRow className="html-editor-fullscreen">
+          <CapRow className={`html-editor-fullscreen html-editor-fullscreen--${variant} ${isLibraryMode ? 'html-editor-fullscreen--library-mode' : ''}`}>
             {/* Editor Toolbar - Conditional based on variant */}
             {variant === HTML_EDITOR_VARIANTS.EMAIL ? (
               <EditorToolbar
@@ -596,6 +602,7 @@ HTMLEditor.propTypes = {
   onContextChange: PropTypes.func, // Deprecated: use globalActions instead
   globalActions: PropTypes.object,
   isLiquidEnabled: PropTypes.bool, // Controls Liquid tab visibility in validation
+  isFullMode: PropTypes.bool, // Full mode vs library mode
 };
 
 HTMLEditor.defaultProps = {
@@ -623,6 +630,7 @@ HTMLEditor.defaultProps = {
   onContextChange: null,
   globalActions: null, // Redux actions for API calls
   isLiquidEnabled: false,
+  isFullMode: true, // Default to full mode
 };
 
 // Export with forwardRef to allow direct access to CodeEditorPane via ref

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -5,39 +5,71 @@
  */
 
 // Import Cap UI variables (correct path)
-@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+@import "~@capillarytech/cap-ui-library/styles/_variables.scss";
 
 // Fullscreen modal header styling - using proper CSS specificity instead of !important
 .html-editor-fullscreen {
-  .html-editor__header--fullscreen {
-    display: flex;
-    align-items: center;
-    background-color: $CAP_G10;
-    border-bottom: 0.0625rem solid $CAP_G08;
-    padding-right: 1rem;
+  // INAPP variant only: Fullscreen header styling
+  &--inapp {
+    .html-editor__header--fullscreen {
+      display: flex;
+      align-items: center;
+      background-color: $CAP_G10;
+      border-bottom: 0.0625rem solid $CAP_G08;
+      padding-right: 1rem;
 
-    // Device toggle takes available space
-    .device-toggle {
-      flex: 1;
-    }
+      // Device toggle takes available space
+      .device-toggle {
+        flex: 1;
+      }
 
-    // Toolbar styling in fullscreen mode
-    .editor-toolbar {
-      background-color: transparent;
-      border-bottom: none;
-      padding: 0;
-      min-height: 3.25rem;
-      height: 3.25rem;
-      position: relative;
+      // Toolbar styling in fullscreen mode - INAPP variant only
+      .editor-toolbar {
+        background-color: transparent;
+        border-bottom: none;
+        padding: 0;
+        min-height: 3.25rem;
+        height: 3.25rem;
+        position: relative;
 
-      // Right-align toolbar actions
-      &__right {
-        margin-left: auto;
+        // Right-align toolbar actions
+        &__right {
+          margin-left: auto;
+        }
+      }
+    }
+
+    // Library mode: Position absolute for toolbar in fullscreen (INAPP variant only)
+    // Using higher specificity to override _fullscreenModal.scss styles
+    &.html-editor-fullscreen--library-mode {
+      .html-editor__header--fullscreen {
+        .editor-toolbar,
+        .editor-toolbar.editor-toolbar,
+        .ant-layout-header.editor-toolbar {
+          position: absolute;
+        }
       }
     }
   }
 }
 
+// Additional library mode overrides for fullscreen with maximum specificity
+// These match the high-specificity selectors in _fullscreenModal.scss
+.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
+.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
+.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar,
+.html-editor.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
+.html-editor.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
+.html-editor.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar,
+.ant-modal .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
+.ant-modal .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
+.ant-modal .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar,
+.ant-modal-content .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
+.ant-modal-content .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
+.ant-modal-content .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar {
+  position: absolute;
+}
+
 .html-editor {
   height: 37.5rem; // Fixed height instead of 100vh (600px = 37.5rem)
   max-height: 80vh; // Responsive maximum height
@@ -49,6 +81,23 @@
   border-radius: 0.25rem;
   overflow: hidden;
 
+  // Library mode: Apply specific styles when isFullMode is false
+  &.html-editor--library-mode {
+    .preview-pane {
+      max-height: calc(95vh - 5%);
+
+      &__content {
+        height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
+        max-height: calc(95vh - 50%);
+      }
+
+      iframe {
+        height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
+        max-height: calc(95vh - 50%);
+      }
+    }
+  }
+
   &.fullscreen {
     position: fixed;
     top: 0;
@@ -124,8 +173,19 @@
         }
       }
     }
-  }
 
+    // Library mode: Position absolute for toolbar in InApp variant
+    // Using higher specificity to override default position: relative
+    &.html-editor--library-mode {
+      .html-editor__header {
+        .editor-toolbar,
+        .editor-toolbar.editor-toolbar,
+        .ant-layout-header.editor-toolbar {
+          position: absolute;
+        }
+      }
+    }
+  }
 
   // Responsive design
   @media (max-width: 768px) {
@@ -231,6 +291,23 @@
   }
 }
 
+// Fullscreen modal library mode styles (outside .html-editor block since fullscreen is a separate element)
+.html-editor-fullscreen--library-mode {
+  .preview-pane {
+    max-height: calc(95vh - 5%);
+
+    &__content {
+      height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
+      max-height: calc(95vh - 50%);
+    }
+
+    iframe {
+      height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
+      max-height: calc(95vh - 50%);
+    }
+  }
+}
+
 // Animation classes for smooth transitions
 .html-editor-transition {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

package/v2Components/HtmlEditor/components/EditorToolbar/_editorToolbar.scss

@@ -15,6 +15,7 @@
   border-radius: 0.25rem 0.25rem 0 0;
   box-sizing: border-box;
   flex-shrink: 0;
+  position: relative;
 
   &__left {
     display: flex;
@@ -110,4 +111,12 @@
       display: none;
     }
   }
+}
+
+// Library mode override for InApp variant - Position absolute for toolbar
+// These selectors target the toolbar when inside library mode InApp variant
+.html-editor--inapp.html-editor--library-mode .html-editor__header .editor-toolbar,
+.html-editor--inapp.html-editor--library-mode .html-editor__header .editor-toolbar.editor-toolbar,
+.html-editor--inapp.html-editor--library-mode .html-editor__header .ant-layout-header.editor-toolbar {
+  position: absolute;
 }

package/v2Components/HtmlEditor/components/FullscreenModal/_fullscreenModal.scss

@@ -55,4 +55,25 @@ body .ant-modal-mask+.ant-modal-wrap .ant-modal.html-editor-fullscreen-modal .an
       margin-left: auto;
     }
   }
+}
+
+// Library mode overrides for INAPP variant - Position absolute for toolbar
+// These selectors match the high-specificity patterns above but include library-mode class
+.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
+.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
+.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar,
+.html-editor.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
+.html-editor.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
+.html-editor.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar,
+.html-editor__header--fullscreen.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .editor-toolbar,
+.html-editor__header.html-editor__header--fullscreen.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .editor-toolbar,
+.html-editor__header.html-editor__header--fullscreen.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .editor-toolbar.editor-toolbar,
+.html-editor__header.html-editor__header--fullscreen.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .ant-layout-header.editor-toolbar,
+.ant-modal .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
+.ant-modal .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
+.ant-modal .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar,
+.ant-modal-content .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
+.ant-modal-content .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
+.ant-modal-content .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar {
+  position: absolute;
 }

package/v2Components/HtmlEditor/components/ValidationErrorDisplay/__tests__/index.test.js

@@ -48,33 +48,6 @@ describe('ValidationErrorDisplay', () => {
     expect(screen.getByText('Invalid attribute')).toBeInTheDocument();
   });
 
-  it('renders liquid errors separately', () => {
-    const mockValidation = {
-      getAllIssues: () => [
-        {
-          message: 'Invalid liquid syntax', severity: 'error', source: 'liquid-validator', line: 3,
-        },
-        {
-          message: 'HTML error', severity: 'error', source: 'htmlhint', line: 10,
-        },
-      ],
-      isClean: () => false,
-      isValidating: false,
-    };
-
-    const { container } = render(
-      <TestWrapper>
-        <ValidationErrorDisplay validation={mockValidation} />
-      </TestWrapper>
-    );
-
-    // Check for validation-error-display wrapper
-    expect(container.querySelector('.validation-error-display')).toBeInTheDocument();
-    // Check that both errors are rendered
-    expect(screen.getByText('Invalid liquid syntax')).toBeInTheDocument();
-    expect(screen.getByText('HTML error')).toBeInTheDocument();
-  });
-
   it('does not render when validation has no errors', () => {
     const mockValidation = {
       getAllIssues: () => [],

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -961,6 +961,7 @@ const EmailHTMLEditor = (props) => {
             moduleFilterEnabled={location?.query?.type !== EMBEDDED}
             onTagContextChange={handleOnTagsContextChange}
             isLiquidEnabled={isLiquidEnabled}
+            isFullMode={isFullMode}
           />
         </CapColumn>
       </CapRow>

package/v2Containers/InApp/index.js

@@ -1235,6 +1235,7 @@ export const InApp = (props) => {
               onContextChange={handleOnTagsContextChange}
               // Pass validation errors to HTMLEditor for display
               errors={errorMessage}
+              isFullMode={isFullMode}
               data-test="inapp-html-editor"
               style={{ width: '138%' }}
             />

package/v2Containers/EmailWrapper/tests/EmailWrapperView.test.js

@@ -1,239 +0,0 @@
-import React from 'react';
-import { render, fireEvent, within, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { IntlProvider } from 'react-intl';
-import { Provider } from 'react-redux';
-import { configureStore }  from '@capillarytech/vulcan-react-sdk/utils'
-import { initialReducer } from '../../../initialReducer';
-import history from '../../../utils/history';
-import EmailWrapperView from '../components/EmailWrapperView';
-import { EmailWrapperViewMockProps } from '../mockdata/mockdata';
-import { EMAIL_CREATE_MODES } from '../constants';
-
-// Mock pathConfig before history import - must be a string, not undefined
-jest.mock('../../../config/path', () => ({
-  publicPath: '/creatives/ui',
-  engagePlusPublicPath: '/campaigns/ui',
-}));
-
-// Mock window.location for createBrowserHistory
-const originalLocation = window.location;
-beforeAll(() => {
-  delete window.location;
-  window.location = {
-    ...originalLocation,
-    pathname: '/',
-    search: '',
-    hash: '',
-    href: 'http://localhost/',
-    replace: jest.fn(),
-  };
-});
-
-afterAll(() => {
-  window.location = originalLocation;
-});
-
-// This mock needs to be before any imports
-jest.mock('../../../v2Containers/Email', () => ({
-  __esModule: true,
-  default: () => <div data-testid="email-create-container" />,
-}));
-
-// Mock react-router
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    push: jest.fn(),
-    replace: jest.fn(),
-    go: jest.fn(),
-    goBack: jest.fn(),
-    goForward: jest.fn(),
-    location: { search: '' }
-  }),
-}));
-
-// Mock redux-auth-wrapper
-jest.mock('redux-auth-wrapper/history4/redirect', () => ({
-  connectedRouterRedirect: () => (Component) => Component,
-}));
-
-// Mock react-router
-jest.mock('connected-react-router', () => ({
-  push: jest.fn(),
-  replace: jest.fn(),
-  go: jest.fn(),
-  goBack: jest.fn(),
-  goForward: jest.fn(),
-}));
-
-// Mock the saga injector
-jest.mock('@capillarytech/vulcan-react-sdk/utils/injectSaga', () => ({
-  __esModule: true,
-  default: () => (Component) => Component,
-}));
-
-
-const initialState = {
-  cap: { loading: false, error: null },
-  router: { location: { pathname: '/' } }
-};
-
-describe('EmailWrapperView', () => {
-  let store;
-
-  beforeAll(() => {
-    // Use the real history (pathConfig is mocked, so it should work)
-    store = configureStore(initialState, initialReducer, history);
-  });
-
-  const renderWithProviders = (component) => {
-    return render(
-      <Provider store={store}>
-        <IntlProvider locale="en" messages={{}}>
-          {component}
-        </IntlProvider>
-      </Provider>
-    );
-  };
-
-  it('renders mode selection UI when step is modeSelection', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      step: 'modeSelection',
-    };
-
-    const { getByText } = renderWithProviders(<EmailWrapperView {...props} />);
-    expect(getByText('Create using editor')).toBeInTheDocument();
-    expect(getByText('Upload zip file')).toBeInTheDocument();
-  });
-
-  it('shows template name input in full mode', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      isFullMode: true,
-      step: 'modeSelection',
-    };
-
-    const { container } = renderWithProviders(<EmailWrapperView {...props} />);
-    const input = container.querySelector('.ant-input');
-    expect(input).toBeInTheDocument();
-    expect(input.value).toBe(props.templateName);
-  });
-
-  it('handles template name changes', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      isFullMode: true,
-      step: 'modeSelection',
-      onTemplateNameChange: jest.fn(),
-    };
-
-    const { container } = renderWithProviders(<EmailWrapperView {...props} />);
-    const input = container.querySelector('.ant-input');
-    expect(input).toBeInTheDocument();
-
-    // Create a change event and fire it
-    fireEvent.change(input, { target: { value: 'New Template Name' } });
-
-    // Just verify that the function was called
-    expect(props.onTemplateNameChange).toHaveBeenCalled();
-  });
-
-  it('shows upload button when in upload mode', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      step: 'modeSelection',
-      emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
-      uploadButtonLabel: 'Upload',
-    };
-
-    const { getByText, container } = renderWithProviders(<EmailWrapperView {...props} />);
-
-    // Find the "Upload zip file" section
-    const modeSelectionSection = getByText('Upload zip file').closest('div');
-
-    // Find any button in the upload section
-    const uploadButton = container.querySelector('.ant-btn');
-
-    // Verify that we found an upload button
-    expect(uploadButton).toBeInTheDocument();
-    expect(uploadButton.textContent).toContain('Upload');
-  });
-
-  it('shows loading spinner when uploading', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      isUploading: true,
-      emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
-      step: 'modeSelection',
-    };
-
-    const { container } = renderWithProviders(<EmailWrapperView {...props} />);
-    const spinner = container.querySelector('.ant-spin');
-    expect(spinner).toBeInTheDocument();
-  });
-
-  it('shows content creation UI when not in mode selection', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      step: 'contentCreation',
-      isShowEmailCreate: true,
-    };
-
-    const { getByTestId } = renderWithProviders(<EmailWrapperView {...props} />);
-    expect(getByTestId('email-create-container')).toBeInTheDocument();
-  });
-
-  it('disables upload button when template name is empty in full mode', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      isFullMode: true,
-      step: 'modeSelection',
-      emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
-      templateName: '',
-      isTemplateNameEmpty: true,
-      uploadButtonLabel: 'Upload',
-    };
-
-    const { getByText, container } = renderWithProviders(<EmailWrapperView {...props} />);
-
-    // Find the Upload section
-    getByText('Upload zip file');
-
-    // Find button in the container
-    const uploadButton = container.querySelector('.ant-btn');
-
-    // Check if the button is disabled
-    expect(uploadButton).toBeDisabled();
-  });
-
-  it('shows error message when template name is empty during upload', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      isFullMode: true,
-      step: 'modeSelection',
-      emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
-      templateName: '',
-      isTemplateNameEmpty: true,
-      // Add errorMessage directly to the props
-      errorMessage: 'Please enter template name',
-      intl: {
-        formatMessage: () => 'Please enter template name',
-      },
-    };
-
-    const { container } = renderWithProviders(<EmailWrapperView {...props} />);
-
-    // Look for error feedback in the Ant Design form
-    const errorElement = container.querySelector('.ant-form-item-explain');
-
-    if (errorElement) {
-      expect(errorElement.textContent).toContain('Please enter template name');
-    } else {
-      // If the standard error element is not found, look for any element containing the error text
-      const allText = container.textContent;
-      expect(allText).toContain('Please enter template name');
-    }
-  });
-});