@eeacms/volto-cca-policy 1.0.6 → 1.0.7

package/src/components/manage/Blocks/CountryMapProfile/OLView.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { compose } from 'redux';
 import { Grid } from 'semantic-ui-react';
 import {
-  clientOnly,
   getImageUrl,
   tooltipStyle,
   adjustEuCountryNames,
@@ -15,6 +14,7 @@ import { Interactions } from './Interactions';
 import { useCountriesMetadata } from './hooks';
 import Filter from './Filter';
 import {
+  withClientOnly,
   withResponsiveContainer,
   withVisibilitySensor,
   withGeoJsonData,
@@ -156,7 +156,7 @@ const View = (props) => {
 };
 
 export default compose(
-  clientOnly,
+  withClientOnly,
   withGeoJsonData(true),
   withResponsiveContainer('countryMapProfileBlock'),
   withVisibilitySensor(),

package/src/components/{theme → manage}/Widgets/GeolocationWidget.jsx

@@ -5,7 +5,7 @@ import config from '@plone/volto/registry';
 
 import { injectIntl } from 'react-intl';
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
-import MapContainer from '@eeacms/volto-cca-policy/components/theme/Widgets/GeolocationWidgetMapContainer';
+import MapContainer from '@eeacms/volto-cca-policy/components/manage/Widgets/GeolocationWidgetMapContainer';
 
 const defaultValue = {
   latitude: 55.6761,

package/src/components/{theme → manage}/Widgets/GeolocationWidget.test.jsx

@@ -10,7 +10,7 @@ import GeolocationWidget from './GeolocationWidget';
 global.__SERVER__ = false;
 
 jest.mock(
-  '@eeacms/volto-cca-policy/components/theme/Widgets/GeolocationWidgetMapContainer',
+  '@eeacms/volto-cca-policy/components/manage/Widgets/GeolocationWidgetMapContainer',
 );
 const mockStore = configureStore();
 

package/src/components/{theme → manage}/Widgets/ImageWidget.jsx

@@ -187,7 +187,7 @@ const resolveSelectedImageUrl = (url, item, imageSize) => {
   return null;
 };
 
-export const ImageToolbar = ({ id, onChange }) => (
+const ImageToolbar = ({ id, onChange }) => (
   <div className="image-upload-widget-toolbar">
     <Button
       icon
@@ -497,7 +497,7 @@ const UnconnectedImageInput = (props) => {
   );
 };
 
-export const ImageInput = withObjectBrowser(UnconnectedImageInput);
+const ImageInput = withObjectBrowser(UnconnectedImageInput);
 
 const ImageUploadWidget = (props) => {
   if (props.block && props.widget === 'attachedimage') {

package/src/components/manage/Widgets/ImageWidget.test.jsx

@@ -0,0 +1,187 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+
+import ImageWidget from './ImageWidget';
+
+global.__SERVER__ = false;
+
+const mockOpenObjectBrowser = jest.fn();
+const mockReadAsDataURL = jest.fn();
+let mockDropzoneProps;
+
+jest.mock('promise-file-reader', () => ({
+  readAsDataURL: (...args) => mockReadAsDataURL(...args),
+}));
+
+jest.mock('@plone/volto/helpers/FormValidation/FormValidation', () => ({
+  validateFileUploadSize: jest.fn(() => true),
+}));
+
+jest.mock(
+  '@plone/volto/components/manage/Sidebar/ObjectBrowser',
+  () => (Component) => (props) => (
+    <Component {...props} openObjectBrowser={mockOpenObjectBrowser} />
+  ),
+);
+
+jest.mock(
+  '@plone/volto/components/manage/Widgets/ImageWidget',
+  () => (props) => (
+    <div data-testid="native-image-widget" data-value={props.value} />
+  ),
+);
+
+// mock Dropzone (avoids drag/drop complexity)
+jest.mock('react-dropzone', () => (props) => {
+  mockDropzoneProps = props;
+  return props.children({
+    getRootProps: () => ({}),
+    getInputProps: () => ({}),
+  });
+});
+
+// mock loadable
+jest.mock('@loadable/component', () => (importFn) => {
+  const Component = (props) => {
+    const Loaded = require('react-dropzone');
+    return <Loaded {...props} />;
+  };
+  return Component;
+});
+
+const mockStore = configureStore();
+
+const renderWidget = (props) => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  return render(
+    <Provider store={store}>
+      <MemoryRouter initialEntries={['/current-page']}>
+        <ImageWidget id="image" title="Image" onChange={jest.fn()} {...props} />
+      </MemoryRouter>
+    </Provider>,
+  );
+};
+
+describe('ImageUploadWidget', () => {
+  it('renders empty state', () => {
+    const { container } = renderWidget({ value: null });
+
+    expect(container).toBeTruthy();
+  });
+
+  it('renders with image value', () => {
+    const { getByText } = renderWidget({
+      value: {
+        data: 'fakebase64',
+        encoding: 'base64',
+        'content-type': 'image/png',
+        filename: 'test.png',
+      },
+    });
+
+    expect(getByText('test.png')).toBeInTheDocument();
+  });
+
+  it('renders external image URLs and clears them from the toolbar', () => {
+    const onChange = jest.fn();
+    const { container } = renderWidget({
+      value: 'https://example.com/images/photo.jpg',
+      onChange,
+    });
+
+    expect(container.querySelector('img')).toHaveAttribute(
+      'src',
+      'https://example.com/images/photo.jpg',
+    );
+    expect(container).toHaveTextContent('photo.jpg');
+
+    fireEvent.click(container.querySelector('.delete-btn'));
+    expect(onChange).toHaveBeenCalledWith('image', null);
+  });
+
+  it.each([
+    ['download metadata', { download: '/photo/@@images/image' }, '/photo'],
+    ['linked metadata', { '@id': '/photo' }, '/photo'],
+    [
+      'inline image data',
+      {
+        data: 'fakebase64',
+        encoding: 'base64',
+        'content-type': 'image/png',
+      },
+      '',
+    ],
+  ])(
+    'sanitizes %s for the native attached-image widget',
+    (_, value, expected) => {
+      const { getByTestId } = renderWidget({
+        block: 'block-id',
+        widget: 'attachedimage',
+        value,
+      });
+
+      expect(getByTestId('native-image-widget')).toHaveAttribute(
+        'data-value',
+        expected,
+      );
+    },
+  );
+
+  it('uploads a dropped file as an inline image value', async () => {
+    const onChange = jest.fn();
+    const file = new File(['image'], 'climate.png', { type: 'image/png' });
+    mockReadAsDataURL.mockResolvedValueOnce('data:image/png;base64,aW1hZ2U=');
+
+    renderWidget({ value: null, onChange });
+
+    await act(async () => {
+      mockDropzoneProps.onDrop([file]);
+    });
+
+    await waitFor(() =>
+      expect(onChange).toHaveBeenCalledWith('image', {
+        data: 'aW1hZ2U=',
+        encoding: 'base64',
+        'content-type': 'image/png',
+        filename: 'climate.png',
+      }),
+    );
+  });
+
+  it('updates drag state and delegates an existing image selection', async () => {
+    const onSelectItem = jest.fn();
+    const { getByLabelText, container } = renderWidget({
+      value: null,
+      onSelectItem,
+    });
+
+    act(() => mockDropzoneProps.onDragEnter());
+    expect(container.querySelector('.active.dimmer')).toBeInTheDocument();
+
+    act(() => mockDropzoneProps.onDragLeave());
+    expect(container.querySelector('.active.dimmer')).not.toBeInTheDocument();
+
+    fireEvent.click(getByLabelText('Pick an existing image'));
+    expect(mockOpenObjectBrowser).toHaveBeenCalledWith(
+      expect.objectContaining({
+        mode: 'image',
+        currentPath: '/current-page',
+      }),
+    );
+
+    const { onSelectItem: selectFromBrowser } =
+      mockOpenObjectBrowser.mock.calls[0][0];
+    await selectFromBrowser('/photo', { title: 'Photo' });
+    expect(onSelectItem).toHaveBeenCalledWith('/photo', { title: 'Photo' });
+  });
+});

package/src/components/{theme → manage}/Widgets/PromotionalImageWidget.test.jsx

@@ -29,7 +29,9 @@ describe('FileWidget', () => {
       </Provider>,
     );
 
-    await waitFor(() => {});
+    await waitFor(() =>
+      expect(container.querySelector('.file-widget-dropzone')).not.toBeNull(),
+    );
     expect(container).toMatchSnapshot();
   });
   test('renders a file widget component with value', async () => {
@@ -57,7 +59,9 @@ describe('FileWidget', () => {
       </Provider>,
     );
 
-    await waitFor(() => {});
+    await waitFor(() =>
+      expect(container.querySelector('.file-widget-dropzone')).not.toBeNull(),
+    );
     expect(container).toMatchSnapshot();
   });
   test('renders a file widget component with value in raw data', async () => {
@@ -85,7 +89,9 @@ describe('FileWidget', () => {
       </Provider>,
     );
 
-    await waitFor(() => {});
+    await waitFor(() =>
+      expect(container.querySelector('.file-widget-dropzone')).not.toBeNull(),
+    );
     expect(container).toMatchSnapshot();
   });
 });

package/src/components/theme/Content/Fields/BooleanField.jsx

@@ -0,0 +1,7 @@
+import TextField from './TextField';
+
+const BooleanField = ({ label, value, yesLabel, noLabel }) => (
+  <TextField label={label} value={value ? yesLabel : noLabel} />
+);
+
+export default BooleanField;

package/src/components/theme/Content/Fields/HTMLField.jsx

@@ -0,0 +1,14 @@
+const HTMLField = ({ value, className }) => {
+  if (value === null) {
+    return <></>;
+  }
+
+  return (
+    <div
+      className={className}
+      dangerouslySetInnerHTML={{ __html: value?.data }}
+    ></div>
+  );
+};
+
+export default HTMLField;

package/src/components/theme/Content/Fields/TextField.jsx

@@ -0,0 +1,12 @@
+const TextField = ({ label, value }) => {
+  if (value === null || value === undefined || value === '') return null;
+
+  return (
+    <>
+      <h5>{label}</h5>
+      <p>{value}</p>
+    </>
+  );
+};
+
+export default TextField;

package/src/components/theme/Content/Fields/VocabularyField.jsx

@@ -0,0 +1,26 @@
+import TextField from './TextField';
+
+const VocabularyField = ({ label, values, asList }) => {
+  const items = values
+    ?.map((value) => value?.title || value?.token || value)
+    .filter(Boolean);
+
+  if (!items?.length) return null;
+
+  if (asList) {
+    return (
+      <>
+        <h5>{label}</h5>
+        <ul>
+          {items.map((item, index) => (
+            <li key={`${item}-${index}`}>{item}</li>
+          ))}
+        </ul>
+      </>
+    );
+  }
+
+  return <TextField label={label} value={items.join(', ')} />;
+};
+
+export default VocabularyField;

package/src/components/theme/Content/Fields/index.js

@@ -0,0 +1,4 @@
+export { default as BooleanField } from './BooleanField';
+export { default as HTMLField } from './HTMLField';
+export { default as TextField } from './TextField';
+export { default as VocabularyField } from './VocabularyField';

package/src/components/theme/Content/Sections/ContentBannerTitle.jsx

@@ -0,0 +1,26 @@
+import config from '@plone/volto/registry';
+
+const ContentBannerTitle = (props) => {
+  const { content, data } = props;
+  const {
+    blocks: { blocksConfig },
+  } = config;
+  const TitleBlockView = blocksConfig?.title?.view;
+
+  const blockData = {
+    '@type': 'title',
+    ...data,
+  };
+
+  return (
+    <TitleBlockView
+      {...props}
+      data={blockData}
+      metadata={content}
+      properties={content}
+      blocksConfig={blocksConfig}
+    />
+  );
+};
+
+export default ContentBannerTitle;