@treely/strapi-slices 7.17.0 → 8.0.1

package/src/slices/ProjectFacts/ProjectFacts.tsx

@@ -1,143 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { DefaultSectionContainer, Flex, Wrapper } from 'boemly';
-import StrapiLink from '../../models/strapi/StrapiLink';
-import PortfolioProject from '../../models/PortfolioProject';
-import SmallCheckout from '../../components/portfolio/SmallCheckout';
-import ProjectInfo from '../../components/portfolio/ProjectInfo';
-import DocumentsDownloadList from '../../components/portfolio/DocumentsDownloadList';
-import Contact from '../../components/portfolio/Contact';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import getFpmProjectById from '../../integrations/strapi/getFpmProjectById';
-
-export interface ProjectFactsProps {
-  project?: PortfolioProject;
-  slice: {
-    projectId: string;
-
-    batchId?: string;
-    currency?: 'EUR' | 'CHF';
-    pricePerKg?: number;
-    taxInPercent?: number;
-    initialContributionValue?: number;
-    checkoutText?: string;
-
-    customTitle?: string;
-    customSubtitle?: string;
-    customButton?: StrapiLink;
-    documentUrls?: StrapiLink[];
-
-    areaSubtitle?: string;
-    locationSubtitle?: string;
-    startSubtitle?: string;
-    timeSpanSubtitle?: string;
-    projectTypeSubtitle?: string;
-    projectDeveloperSubtitle?: string;
-    verificationStandardSubtitle?: string;
-    averageSellableAmountPerYearSubtitle?: string;
-    riskBufferSubtitle?: string;
-    buyCreditsSubtitle?: string;
-
-    contactTitle?: string;
-    contactText?: string;
-    contactButton?: StrapiLink;
-    contactAvatar?: StrapiImage;
-  };
-}
-
-export const ProjectFacts: React.FC<ProjectFactsProps> = ({
-  slice,
-  project,
-}: ProjectFactsProps) => {
-  const [enhancedProject, setEnhancedProject] = useState<
-    PortfolioProject | undefined
-  >(project);
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    const fetchCompleteProjectData = async () => {
-      if (project && project.id) {
-        setIsLoading(true);
-        try {
-          const completeFpmProject = await getFpmProjectById(project.id);
-
-          // Merge the complete FPM data with existing project data (preserving Strapi fields like slug, portfolioHost, thumbnail)
-          const mergedProject: PortfolioProject = {
-            ...completeFpmProject,
-            slug: project.slug,
-            portfolioHost: project.portfolioHost,
-            thumbnail: project.thumbnail,
-          };
-
-          setEnhancedProject(mergedProject);
-        } catch (error) {
-          console.error('Error fetching complete project data:', error);
-          // Fallback to original project data if fetch fails
-          setEnhancedProject(project);
-        } finally {
-          setIsLoading(false);
-        }
-      }
-    };
-
-    fetchCompleteProjectData();
-  }, [project]);
-
-  if (!enhancedProject) {
-    return (
-      <>Invalid configuration, check if a project this id exists in the FPM</>
-    );
-  }
-
-  if (isLoading) {
-    return (
-      <DefaultSectionContainer>
-        <Wrapper>
-          <div>Loading project data...</div>
-        </Wrapper>
-      </DefaultSectionContainer>
-    );
-  }
-
-  return (
-    <DefaultSectionContainer>
-      <Wrapper>
-        <Flex flexDir={['column', null, null, 'row']} gap="4" width="full">
-          <ProjectInfo project={enhancedProject} subtitles={slice} />
-          <Flex flexDir="column" gap="4" width="full">
-            {slice.documentUrls && slice.documentUrls.length > 0 && (
-              <DocumentsDownloadList documentUrls={slice.documentUrls} />
-            )}
-            {slice.batchId &&
-            slice.pricePerKg &&
-            slice.currency &&
-            slice.initialContributionValue ? (
-              <SmallCheckout
-                batchId={slice.batchId}
-                checkoutText={slice.checkoutText}
-                currency={slice.currency}
-                initialContributionValue={slice.initialContributionValue}
-                pricePerKg={slice.pricePerKg}
-                title={slice.customTitle}
-                subtitle={slice.customSubtitle}
-                button={slice.customButton}
-                taxInPercent={slice.taxInPercent}
-              />
-            ) : (
-              (slice.contactTitle ||
-                slice.contactText ||
-                slice.contactButton ||
-                slice.contactAvatar) && (
-                <Contact
-                  title={slice.contactTitle}
-                  text={slice.contactText}
-                  button={slice.contactButton}
-                  avatar={slice.contactAvatar}
-                />
-              )
-            )}
-          </Flex>
-        </Flex>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/ProjectFacts/index.ts

@@ -1,3 +0,0 @@
-import { ProjectFacts } from './ProjectFacts';
-
-export default ProjectFacts;

package/src/slices/ProjectFacts/messages.de.ts

@@ -1,4 +0,0 @@
-const messagesDe = {
-  'sections.projectFacts.projectInfo.value': 'Projekt Infos',
-};
-export default messagesDe;

package/src/slices/ProjectFacts/messages.en.ts

@@ -1,4 +0,0 @@
-const messagesEn = {
-  'sections.projectFacts.projectInfo.value': 'Project Infos',
-};
-export default messagesEn;

package/src/slices/ProjectsGrid/ProjectsGrid.stories.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import ProjectsGrid from '.';
-import { strapiProjectMock } from '../../test/strapiMocks/strapiProject';
-import portfolioProjectMock from '../../test/integrationMocks/portfolioProjectMock';
-import { CreditAvailability } from '../../models/fpm/FPMProject';
-
-export default {
-  title: 'slices/ProjectsGrid',
-  component: ProjectsGrid,
-} as Meta<typeof ProjectsGrid>;
-
-const Template: StoryFn<typeof ProjectsGrid> = (args) => (
-  <ProjectsGrid {...args} />
-);
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  projects: [portfolioProjectMock],
-  slice: {
-    projects: { data: [strapiProjectMock] },
-  },
-};
-
-export const WithoutCertificationDate = Template.bind({});
-WithoutCertificationDate.args = {
-  projects: [{ ...portfolioProjectMock, certificationDate: undefined }],
-  slice: {
-    projects: { data: [strapiProjectMock] },
-  },
-};
-
-export const WithCreditsAvailabilityVariants = Template.bind({});
-WithCreditsAvailabilityVariants.args = {
-  projects: [
-    portfolioProjectMock,
-    {
-      ...portfolioProjectMock,
-      title: 'Project 2',
-      creditAvailability: CreditAvailability.SOME_CREDITS_AVAILABLE,
-    },
-    {
-      ...portfolioProjectMock,
-      title: 'Project 3',
-      creditAvailability: CreditAvailability.SOON_CREDITS_AVAILABLE,
-    },
-    {
-      ...portfolioProjectMock,
-      title: 'Project 4',
-      creditAvailability: CreditAvailability.NO_CREDITS_AVAILABLE,
-    },
-  ],
-  slice: {
-    projects: { data: [strapiProjectMock] },
-  },
-};

package/src/slices/ProjectsGrid/ProjectsGrid.test.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import ProjectsGrid from '.';
-import { ProjectsGridProps } from './ProjectsGrid';
-import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import { strapiProjectMock } from '../../test/strapiMocks/strapiProject';
-
-const defaultProps: ProjectsGridProps = {
-  slice: {
-    projects: { data: [strapiProjectMock] },
-  },
-  projects: [
-    {
-      ...fpmProjectMock,
-      slug: 'slug',
-      isPublic: true,
-      thumbnail: { img: { data: strapiMediaMock }, alt: 'Alt Text', id: 1 },
-    },
-  ],
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<ProjectsGrid {...combinedProps} />);
-};
-
-describe('The ProjectsGrid component', () => {
-  it('displays the project cards', () => {
-    setup();
-
-    expect(screen.getByText(fpmProjectMock.title)).toBeInTheDocument();
-  });
-
-  it('links to the portfolio', () => {
-    setup();
-
-    expect(screen.getByRole('link')).toHaveProperty(
-      'href',
-      'http://localhost/portfolio/slug'
-    );
-  });
-
-  it('prefixes the url with the portfolio host', () => {
-    setup({
-      ...defaultProps,
-      projects: [
-        { ...defaultProps.projects[0], portfolioHost: 'https://example.org' },
-      ],
-    });
-
-    expect(screen.getByRole('link')).toHaveProperty(
-      'href',
-      'https://example.org/portfolio/slug'
-    );
-  });
-});

package/src/slices/ProjectsGrid/ProjectsGrid.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import { Box, DefaultSectionContainer, SimpleGrid, Wrapper } from 'boemly';
-import Link from 'next/link';
-import { MEDIUM_TRANSITION_DURATION } from '../../constants/animations';
-import PortfolioProject from '../../models/PortfolioProject';
-import IStrapi from '../../models/strapi/IStrapi';
-import IStrapiData from '../../models/strapi/IStrapiData';
-import StrapiProject from '../../models/strapi/StrapiProject';
-import ProjectGridCard from '../../components/ProjectGridCard';
-
-export interface ProjectsGridProps {
-  slice: {
-    projects: IStrapi<IStrapiData<StrapiProject>[]>;
-  };
-  projects: PortfolioProject[];
-}
-
-const ConditionalWrapper = ({
-  condition,
-  wrapper,
-  children,
-}: {
-  condition: boolean;
-  wrapper: (children: JSX.Element) => JSX.Element;
-  children: JSX.Element;
-}) => (condition ? wrapper(children) : children);
-
-export const ProjectsGrid: React.FC<ProjectsGridProps> = ({
-  projects,
-  slice,
-}: ProjectsGridProps) => {
-  const filteredProjects = projects.filter(
-    (fpmProject) =>
-      fpmProject.thumbnail &&
-      slice.projects.data.some(
-        (strapiProject) =>
-          strapiProject.attributes.fpmProjectId === fpmProject.id
-      )
-  );
-
-  return (
-    <DefaultSectionContainer>
-      <Wrapper>
-        <SimpleGrid columns={[1, null, null, 2, null, 3]} gap="16">
-          {filteredProjects.map((project) => (
-            <ConditionalWrapper
-              key={project.id}
-              condition={!!project.slug}
-              wrapper={(children: JSX.Element) => (
-                <Link
-                  href={`${project.portfolioHost || ''}/portfolio/${
-                    project.slug
-                  }`}
-                  passHref
-                  key={project.id}
-                  legacyBehavior
-                >
-                  {children}
-                </Link>
-              )}
-            >
-              <Box
-                as="a"
-                cursor="pointer"
-                borderRadius="2xl"
-                transition={`box-shadow ease ${MEDIUM_TRANSITION_DURATION}s`}
-                _hover={{ boxShadow: 'lg' }}
-              >
-                <ProjectGridCard project={project} />
-              </Box>
-            </ConditionalWrapper>
-          ))}
-        </SimpleGrid>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/ProjectsGrid/index.ts

@@ -1,3 +0,0 @@
-import { ProjectsGrid } from './ProjectsGrid';
-
-export default ProjectsGrid;

package/src/slices/ProjectsMap/ProjectsMap.stories.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import ProjectsMap from '.';
-
-export default {
-  title: 'slices/ProjectsMap',
-  component: ProjectsMap,
-} as Meta<typeof ProjectsMap>;
-
-const Template: StoryFn<typeof ProjectsMap> = (args) => (
-  <ProjectsMap {...args} />
-);
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {},
-};
-
-export const WithHero = Template.bind({});
-WithHero.args = {
-  slice: {
-    tagline: 'Projects Map Tagline',
-    text: 'Projects Map Text',
-    title: 'Projects Map Title',
-  },
-};
-
-export const InitialPosition = Template.bind({});
-InitialPosition.args = {
-  slice: {
-    defaultCenterCoordinates: {
-      latitude: 47.42636837845707,
-      longitude: 10.036542145100883,
-    },
-    defaultZoomLevel: 10,
-  },
-};
-
-export const FullProps = Template.bind({});
-FullProps.args = {
-  slice: {
-    tagline: 'Projects Map Tagline',
-    text: 'Projects Map Text',
-    title: 'Projects Map Title',
-
-    defaultCenterCoordinates: {
-      latitude: 47.82636837845707,
-      longitude: 10.33654214510088,
-    },
-    defaultZoomLevel: 10,
-  },
-};

package/src/slices/ProjectsMap/ProjectsMap.test.tsx

@@ -1,168 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor, act } from '../../test/testUtils';
-import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
-import ProjectsMap from '.';
-import { ProjectsMapProps } from './ProjectsMap';
-import {
-  markerSetLngLatSpy,
-  markerAddToSpy,
-  mapConstructorMock,
-  mapIsStyleLoadedSpy,
-  mapGetSourceSpy,
-  mapQuerySourceFeaturesSpy,
-} from '../../../__mocks__/mapbox-gl';
-import getFpmProjectsByBbox from '../../integrations/strapi/getFpmProjectsByBbox';
-
-// Mock getFpmProjectsByBbox
-jest.mock('../../integrations/strapi/getFpmProjectsByBbox', () => ({
-  __esModule: true,
-  default: jest.fn().mockResolvedValue({
-    type: 'FeatureCollection',
-    features: [],
-  }),
-}));
-
-// Ensure fpmProjectMock has valid coordinates
-const mockProject = {
-  ...fpmProjectMock,
-  geom: {
-    coordinates: [10.036542145100883, 47.42636837845707], // Match expected format
-  },
-};
-
-const defaultProps: ProjectsMapProps = {
-  slice: {},
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<ProjectsMap {...combinedProps} />);
-};
-
-describe('The ProjectsMap component', () => {
-  afterEach(() => {
-    markerSetLngLatSpy.mockClear();
-    markerAddToSpy.mockClear();
-    mapConstructorMock.mockClear();
-  });
-
-  it('renders successfully with minimal props', async () => {
-    await act(async () => {
-      setup({});
-    });
-  });
-
-  it('renders the title, tagline and text', async () => {
-    await act(async () => {
-      setup({
-        slice: {
-          title: 'title',
-          tagline: 'tagline',
-          text: 'text',
-        },
-      });
-    });
-
-    expect(screen.getByText('title')).toBeInTheDocument();
-    expect(screen.getByText('tagline')).toBeInTheDocument();
-    expect(screen.getByText('text')).toBeInTheDocument();
-  });
-
-  it('adds the projects to the map', async () => {
-    // Mock the getBounds method to return the fallback bbox
-    const mockBounds = {
-      getWest: () => -1.9950830850086163,
-      getSouth: () => 44.4464186384987,
-      getEast: () => 21.995083085002875,
-      getNorth: () => 54.12644342419196,
-    };
-
-    await act(async () => {
-      setup({});
-    });
-
-    // Wait for map to be initialized
-    await waitFor(() => {
-      expect(mapConstructorMock).toHaveBeenCalled();
-    });
-
-    // Get the map instance and mock required methods
-    const mapInstance = mapConstructorMock.mock.results[0].value;
-    mapInstance.getBounds = jest.fn().mockReturnValue(mockBounds);
-    mapIsStyleLoadedSpy.mockReturnValue(true);
-
-    // Verify the API was called with the correct bbox
-    await waitFor(() => {
-      expect(getFpmProjectsByBbox).toHaveBeenCalledWith(
-        '-1.9950830850086163,44.4464186384987,21.995083085002875,54.12644342419196'
-      );
-    });
-
-    // Verify the map was initialized with the correct style
-    expect(mapConstructorMock).toHaveBeenCalledWith(
-      expect.objectContaining({
-        style: 'mapbox://styles/mapbox/streets-v12',
-      })
-    );
-  });
-
-  it('sets the center to the bounding box of the projects coordinates by default', async () => {
-    const mockFeatureCollection = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          properties: {
-            ...mockProject,
-            isPublic: true,
-          },
-          geometry: {
-            type: 'Point',
-            coordinates: mockProject.geom.coordinates,
-          },
-        },
-      ],
-    };
-
-    (getFpmProjectsByBbox as jest.Mock).mockResolvedValueOnce(
-      mockFeatureCollection
-    );
-    mapGetSourceSpy.mockReturnValue(null);
-    mapQuerySourceFeaturesSpy.mockReturnValue([]);
-
-    await act(async () => {
-      setup({
-        projects: [mockProject],
-      });
-    });
-
-    expect(mapConstructorMock).toHaveBeenCalledWith(
-      expect.objectContaining({
-        center: expect.any(Array),
-        zoom: expect.any(Number),
-      })
-    );
-  });
-
-  it('sets the and zoom to the specified ones if they are provided', async () => {
-    await act(async () => {
-      setup({
-        slice: {
-          defaultCenterCoordinates: {
-            latitude: 47.42636837845707,
-            longitude: 10.036542145100883,
-          },
-          defaultZoomLevel: 10,
-        },
-        projects: [mockProject],
-      });
-    });
-
-    expect(mapConstructorMock).toHaveBeenCalledWith(
-      expect.objectContaining({
-        center: [10.036542145100883, 47.42636837845707],
-        zoom: 10,
-      })
-    );
-  });
-});