@treely/strapi-slices 7.15.0 → 7.15.2

package/dist/utils/getMessages.d.ts

@@ -62,8 +62,8 @@ declare const getMessages: (locale: string) => {
     'features.projectInfo.properties.verificationStandard.label': string;
     'features.projectInfo.properties.verificationStandard.value.SilvaconsultFCSISO14': string;
     'features.projectInfo.properties.verificationStandard.value.MfKWCH': string;
-    'features.projectInfo.properties.forecastedAmountYear.label': string;
-    'features.projectInfo.properties.forecastedAmountYear.toolTip': string;
+    'features.projectInfo.properties.projectVolume.label': string;
+    'features.projectInfo.properties.projectVolume.toolTip': string;
     'features.projectInfo.properties.riskBuffer': string;
     'features.projectInfo.properties.year': string;
     'features.portfolio.documentsDownloadList.projectDocuments': string;
@@ -148,8 +148,8 @@ declare const getMessages: (locale: string) => {
     'features.projectInfo.properties.verificationStandard.label': string;
     'features.projectInfo.properties.verificationStandard.value.SilvaconsultFCSISO14': string;
     'features.projectInfo.properties.verificationStandard.value.MfKWCH': string;
-    'features.projectInfo.properties.forecastedAmountYear.toolTip': string;
-    'features.projectInfo.properties.forecastedAmountYear.label': string;
+    'features.projectInfo.properties.projectVolume.toolTip': string;
+    'features.projectInfo.properties.projectVolume.label': string;
     'features.projectInfo.properties.riskBuffer': string;
     'features.projectInfo.properties.year': string;
     'features.portfolio.documentsDownloadList.projectDocuments': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "7.15.0",
+  "version": "7.15.2",
   "license": "MIT",
   "author": "Tree.ly FlexCo",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",

package/src/components/portfolio/ProjectInfo/ProjectInfo.test.tsx

@@ -87,7 +87,7 @@ describe('The ProjectInfo component', () => {
 
     const tooltip = await screen.findByRole('tooltip');
     expect(tooltip).toHaveTextContent(
-      messagesEn['features.projectInfo.properties.forecastedAmountYear.toolTip']
+      messagesEn['features.projectInfo.properties.projectVolume.toolTip']
     );
 
     await userEvent.unhover(trigger);

package/src/components/portfolio/ProjectInfo/ProjectInfo.tsx

@@ -43,7 +43,6 @@ export const ProjectInfo: React.FC<ProjectInfoProps> = ({
   subtitles,
 }: ProjectInfoProps) => {
   const { formatMessage, formatNumber, formatDate } = useContext(IntlContext);
-
   return (
     <Container p="2" width="full">
       <Heading size="xl" textAlign="left">
@@ -196,7 +195,9 @@ export const ProjectInfo: React.FC<ProjectInfoProps> = ({
         <></>
       )}
 
-      {project.averageSellableAmountPerYear !== 0 || project.riskBuffer ? (
+      {(project.averageSellableAmountPerYear &&
+        project.averageSellableAmountPerYear > 0) ||
+      project.riskBuffer ? (
         <>
           <Spacer height="8" />
           <Divider />
@@ -206,16 +207,16 @@ export const ProjectInfo: React.FC<ProjectInfoProps> = ({
         <></>
       )}
       <SimpleGrid columns={[1, null, null, 2]} spacingX="10" spacingY="8">
-        {project.averageSellableAmountPerYear !== 0 && (
+        {project.averageSellableAmountPerYear > 0 ? (
           <Tooltip
             label={formatMessage({
-              id: 'features.projectInfo.properties.forecastedAmountYear.toolTip',
+              id: 'features.projectInfo.properties.projectVolume.toolTip',
             })}
           >
             <Box>
               <LabelTextPair
                 label={formatMessage({
-                  id: 'features.projectInfo.properties.forecastedAmountYear.label',
+                  id: 'features.projectInfo.properties.projectVolume.label',
                 })}
                 text={formatMessage(
                   {
@@ -234,6 +235,10 @@ export const ProjectInfo: React.FC<ProjectInfoProps> = ({
               />
             </Box>
           </Tooltip>
+        ) : (
+          <Box>
+            <CreditsAvailableBadge status={project.creditAvailability} />
+          </Box>
         )}
 
         {project.riskBuffer && (
@@ -252,9 +257,13 @@ export const ProjectInfo: React.FC<ProjectInfoProps> = ({
         )}
       </SimpleGrid>
 
-      <Box mt="2">
-        <CreditsAvailableBadge status={project.creditAvailability} />
-      </Box>
+      {project.averageSellableAmountPerYear > 0 ? (
+        <Box mt="2">
+          <CreditsAvailableBadge status={project.creditAvailability} />
+        </Box>
+      ) : (
+        <></>
+      )}
     </Container>
   );
 };

package/src/components/portfolio/ProjectInfo/messages.de.ts

@@ -12,10 +12,9 @@ const messagesDe = {
     'SILVACONSULT® Forest Carbon Standard, ISO 14064-2',
   'features.projectInfo.properties.verificationStandard.value.MfKWCH':
     'Methodik für Klimaschutzprojekte im Wald für die Schweiz',
-  'features.projectInfo.properties.forecastedAmountYear.toolTip':
-    'Dies ist der jährlich verkaufbare Betrag an Credits pro Jahr im Durchschnitt. Dieser Wert repräsentiert nicht die Verfügbarkeiten.',
-  'features.projectInfo.properties.forecastedAmountYear.label':
-    'Projektvolumen',
+  'features.projectInfo.properties.projectVolume.toolTip':
+    'Dies ist die durchschnittliche Anzahl der Credits, die pro Jahr ausgestellt werden. Dieser Wert entspricht nicht den Verfügbarkeiten.',
+  'features.projectInfo.properties.projectVolume.label': 'Projektvolumen',
   'features.projectInfo.properties.riskBuffer': 'Anteil Risikopuffer',
 
   'features.projectInfo.properties.year':

package/src/components/portfolio/ProjectInfo/messages.en.ts

@@ -12,9 +12,8 @@ const messagesEn = {
     'SILVACONSULT® Forest Carbon Standard, ISO 14064-2',
   'features.projectInfo.properties.verificationStandard.value.MfKWCH':
     'Methodik für Klimaschutzprojekte im Wald für die Schweiz',
-  'features.projectInfo.properties.forecastedAmountYear.label':
-    'Project Volume',
-  'features.projectInfo.properties.forecastedAmountYear.toolTip':
+  'features.projectInfo.properties.projectVolume.label': 'Project Volume',
+  'features.projectInfo.properties.projectVolume.toolTip':
     "This is the average amount of credits that are issued per year. This value doesn't represent availabilities.",
   'features.projectInfo.properties.riskBuffer': 'Risk Buffer Share',
 

package/src/integrations/strapi/getFpmProjectById.test.ts

@@ -0,0 +1,24 @@
+import MockAxios from 'jest-mock-axios';
+import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
+import getFpmProjectById from './getFpmProjectById';
+
+describe('The getFpmProjectById function', () => {
+  afterEach(() => {
+    MockAxios.reset();
+  });
+
+  it('fetches FPM project by ID successfully', async () => {
+    const projectId = 'test-project-1';
+    const projectPromise = getFpmProjectById(projectId);
+
+    MockAxios.mockResponseFor(
+      { url: `/public/projects/${projectId}` },
+      { data: fpmProjectMock }
+    );
+
+    const result = await projectPromise;
+
+    expect(result).toEqual(fpmProjectMock);
+    expect(MockAxios.get).toHaveBeenCalledWith(`/public/projects/${projectId}`);
+  });
+});

package/src/integrations/strapi/getFpmProjectById.ts

@@ -0,0 +1,12 @@
+import FPMProject from '../../models/fpm/FPMProject';
+import fpmClient from '../fpmClient';
+
+const getFpmProjectById = async (projectId: string): Promise<FPMProject> => {
+  const fpmResponse = await fpmClient.get<FPMProject>(
+    `/public/projects/${projectId}`
+  );
+
+  return fpmResponse.data;
+};
+
+export default getFpmProjectById;

package/src/integrations/strapi/getPortfolioProjects.test.ts

@@ -2,76 +2,55 @@ import MockAxios from 'jest-mock-axios';
 import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
 import { strapiProjectMock } from '../../test/strapiMocks/strapiProject';
 import getPortfolioProjects from './getPortfolioProjects';
-import fpmClient from '../fpmClient';
-import strapiClient from './strapiClient';
-
-// Mock the fpmClient module
-jest.mock('../fpmClient', () => ({
-  __esModule: true,
-  default: {
-    get: jest.fn(),
-  },
-}));
-
-// Mock the strapiClient module
-jest.mock('./strapiClient', () => ({
-  __esModule: true,
-  default: {
-    get: jest.fn(),
-  },
-}));
 
 describe('The getPortfolioProjects function', () => {
   afterEach(() => {
     MockAxios.reset();
-    jest.clearAllMocks();
   });
 
   it('returns the FPM projects with the slug from strapi', async () => {
-    // Mock fpmClient responses
-    (fpmClient.get as jest.Mock)
-      .mockResolvedValueOnce({ data: [fpmProjectMock] }) // /public/projects
-      .mockResolvedValueOnce({
-        data: { ...fpmProjectMock, averageSellableAmountPerYear: 1000 },
-      }); // /public/projects/${id}
+    const projectsPromise = getPortfolioProjects();
 
-    // Mock strapiClient responses
-    (strapiClient.get as jest.Mock)
-      .mockResolvedValueOnce({ data: { data: [strapiProjectMock] } }) // First /projects call
-      .mockResolvedValueOnce({ data: { data: [] } }); // Second /projects call
+    MockAxios.mockResponseFor(
+      { url: '/public/projects' },
+      { data: [fpmProjectMock] }
+    );
+    MockAxios.mockResponseFor(
+      { url: '/projects' },
+      { data: { data: [strapiProjectMock] } }
+    );
+    MockAxios.mockResponseFor({ url: '/projects' }, { data: { data: [] } });
 
-    const projects = await getPortfolioProjects();
+    const projects = await projectsPromise;
 
     expect(projects.length).toBe(1);
     expect(projects[0]).toStrictEqual({
       ...fpmProjectMock,
       slug: strapiProjectMock.attributes.slug,
       creditAvailability: fpmProjectMock.creditAvailability,
-      averageSellableAmountPerYear: 1000,
     });
   });
 
   it('returns the FPM project in english if no localized version is available', async () => {
-    // Mock fpmClient responses
-    (fpmClient.get as jest.Mock)
-      .mockResolvedValueOnce({ data: [fpmProjectMock] }) // /public/projects
-      .mockResolvedValueOnce({
-        data: { ...fpmProjectMock, averageSellableAmountPerYear: 1000 },
-      }); // /public/projects/${id}
+    const projectsPromise = getPortfolioProjects('de');
 
-    // Mock strapiClient responses
-    (strapiClient.get as jest.Mock)
-      .mockResolvedValueOnce({ data: { data: [] } }) // First /projects call (localized)
-      .mockResolvedValueOnce({ data: { data: [strapiProjectMock] } }); // Second /projects call (english fallback)
+    MockAxios.mockResponseFor(
+      { url: '/public/projects' },
+      { data: [fpmProjectMock] }
+    );
+    MockAxios.mockResponseFor({ url: '/projects' }, { data: { data: [] } });
+    MockAxios.mockResponseFor(
+      { url: '/projects' },
+      { data: { data: [strapiProjectMock] } }
+    );
 
-    const projects = await getPortfolioProjects('de');
+    const projects = await projectsPromise;
 
     expect(projects.length).toBe(1);
     expect(projects[0]).toStrictEqual({
       ...fpmProjectMock,
       slug: strapiProjectMock.attributes.slug,
       creditAvailability: fpmProjectMock.creditAvailability,
-      averageSellableAmountPerYear: 1000,
     });
   });
 });

package/src/integrations/strapi/getPortfolioProjects.ts

@@ -15,45 +15,24 @@ const getPortfolioProjects = async (
     getStrapiProjects(locale, STRAPI_DEFAULT_POPULATE_DEPTH, preview),
   ]);
 
-  return Promise.all(
-    fpmProjects.map(async (fpmProject: FPMProject) => {
-      // fetch the averageSellableAmountPerYear for each project
-      try {
-        const fpmProjectWithAverageSellableAmountPerYear =
-          await fpmClient.get<FPMProject>(`/public/projects/${fpmProject.id}`, {
-            cache,
-          });
-
-        fpmProject.averageSellableAmountPerYear =
-          fpmProjectWithAverageSellableAmountPerYear.data.averageSellableAmountPerYear;
-        // Handle 404 errors for private projects
-      } catch (error: any) {
-        if (error.response?.status === 404) {
-          fpmProject.averageSellableAmountPerYear = 0;
-        } else {
-          // Re-throw other errors
-          throw error;
-        }
-      }
-
-      const strapiProject = strapiProjects.get(fpmProject.id);
-
-      const toReturn: PortfolioProject = fpmProject;
-
-      if (strapiProject?.attributes.slug) {
-        toReturn.slug = strapiProject.attributes.slug;
-      }
-      if (strapiProject?.attributes.thumbnail) {
-        toReturn.thumbnail = strapiProject?.attributes.thumbnail;
-      }
-      if (strapiProject?.attributes.portfolio.data?.attributes.host) {
-        toReturn.portfolioHost =
-          strapiProject.attributes.portfolio.data.attributes.host;
-      }
-
-      return toReturn;
-    })
-  );
+  return fpmProjects.map((fpmProject: FPMProject) => {
+    const strapiProject = strapiProjects.get(fpmProject.id);
+
+    const toReturn: PortfolioProject = fpmProject;
+
+    if (strapiProject?.attributes.slug) {
+      toReturn.slug = strapiProject.attributes.slug;
+    }
+    if (strapiProject?.attributes.thumbnail) {
+      toReturn.thumbnail = strapiProject?.attributes.thumbnail;
+    }
+    if (strapiProject?.attributes.portfolio.data?.attributes.host) {
+      toReturn.portfolioHost =
+        strapiProject.attributes.portfolio.data.attributes.host;
+    }
+
+    return toReturn;
+  });
 };
 
 export default getPortfolioProjects;

package/src/slices/ProjectFacts/ProjectFacts.test.tsx

@@ -1,21 +1,33 @@
 import React from 'react';
-import { render, screen } from '../../test/testUtils';
+import { render, screen, waitFor } from '../../test/testUtils';
 import ProjectFacts from '.';
 import { ProjectFactsProps } from './ProjectFacts';
 import portfolioProjectMock from '../../test/mocks/portfolioProjectMock';
+import getFpmProjectById from '../../integrations/strapi/getFpmProjectById';
+
+// Mock the getFpmProjectById function
+jest.mock('../../integrations/strapi/getFpmProjectById');
+const mockGetFpmProjectById = getFpmProjectById as jest.MockedFunction<
+  typeof getFpmProjectById
+>;
 
 const defaultProps: ProjectFactsProps = {
   slice: {
     projectId: 'project-id-1',
   },
 };
+
 const setup = (props: Partial<ProjectFactsProps> = {}) => {
   const combinedProps = { ...defaultProps, ...props };
   render(<ProjectFacts {...combinedProps} />);
 };
 
 describe('The ProjectFacts slice', () => {
-  it('displays nothing if there is no project', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('displays error message if there is no project', () => {
     setup();
 
     expect(
@@ -25,11 +37,47 @@ describe('The ProjectFacts slice', () => {
     ).toBeInTheDocument();
   });
 
-  it('displays the project info if there is a project', () => {
+  it('displays loading state when fetching project data', () => {
+    // Mock a delayed response to test loading state
+    mockGetFpmProjectById.mockImplementation(
+      () =>
+        new Promise((resolve) =>
+          setTimeout(() => resolve(portfolioProjectMock), 100)
+        )
+    );
+
     setup({ project: portfolioProjectMock });
 
-    expect(
-      screen.getByText(portfolioProjectMock.location || '')
-    ).toBeInTheDocument();
+    expect(screen.getByText('Loading project data...')).toBeInTheDocument();
+  });
+
+  it('displays the enhanced project info with averageSellableAmountPerYear from FPM data', async () => {
+    // Create enhanced FPM data with different averageSellableAmountPerYear
+    const enhancedFpmData = {
+      ...portfolioProjectMock,
+      averageSellableAmountPerYear: 1200000, // Value from FPM findOne project
+    };
+
+    mockGetFpmProjectById.mockResolvedValue(enhancedFpmData);
+
+    setup({ project: portfolioProjectMock });
+
+    await waitFor(() => {
+      expect(mockGetFpmProjectById).toHaveBeenCalledWith(
+        portfolioProjectMock.id
+      );
+    });
+
+    await waitFor(() => {
+      expect(mockGetFpmProjectById).toHaveBeenCalledTimes(1);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByText('Loading project data...')
+      ).not.toBeInTheDocument();
+
+      expect(screen.getByText('1,200 tCO₂/year')).toBeInTheDocument();
+    });
   });
 });

package/src/slices/ProjectFacts/ProjectFacts.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { DefaultSectionContainer, Flex, Wrapper } from 'boemly';
 import StrapiLink from '../../models/strapi/StrapiLink';
 import PortfolioProject from '../../models/PortfolioProject';
@@ -7,6 +7,7 @@ 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;
@@ -47,17 +48,61 @@ export const ProjectFacts: React.FC<ProjectFactsProps> = ({
   slice,
   project,
 }: ProjectFactsProps) => {
-  if (!project) {
+  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={project} subtitles={slice} />
+          <ProjectInfo project={enhancedProject} subtitles={slice} />
           <Flex flexDir="column" gap="4" width="full">
             {slice.documentUrls && slice.documentUrls.length > 0 && (
               <DocumentsDownloadList documentUrls={slice.documentUrls} />

package/src/utils/shuffleElements.test.ts

@@ -1,9 +1,20 @@
 import shuffleElements from './shuffleElements';
 
-const originalSlides = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
+const originalSlides = [
+  { id: 1 },
+  { id: 2 },
+  { id: 3 },
+  { id: 4 },
+  { id: 5 },
+  { id: 6 },
+  { id: 7 },
+  { id: 8 },
+  { id: 9 },
+  { id: 10 },
+];
 
 describe('shuffleElement', () => {
-  it('returns a new array with the same elements but in a different order', () => {
+  it('returns a new array with the same elements without mutating the original array', () => {
     const shuffled = shuffleElements(originalSlides);
 
     // Check that the shuffled array is not the same reference as the original
@@ -13,18 +24,25 @@ describe('shuffleElement', () => {
     expect(shuffled).toEqual(expect.arrayContaining(originalSlides));
     expect(originalSlides).toEqual(expect.arrayContaining(shuffled));
 
-    // Verify that at least one element is in a different position to ensure it's shuffled
-    const isShuffled = originalSlides.some(
-      (slide, index) => slide.id !== shuffled[index].id
-    );
-    expect(isShuffled).toBe(true);
+    // Check that the arrays have the same length
+    expect(shuffled).toHaveLength(originalSlides.length);
   });
 
-  it('does not mutate the original array', () => {
-    const originalSlidesCopy = [...originalSlides];
-    shuffleElements(originalSlides);
+  it('produces a different order when shuffled multiple times', () => {
+    // Test multiple shuffles to ensure at least one produces a different order
+    const shuffles = [
+      shuffleElements(originalSlides),
+      shuffleElements(originalSlides),
+      shuffleElements(originalSlides),
+    ];
 
-    // Verify that the original array remains unchanged
-    expect(originalSlides).toEqual(originalSlidesCopy);
+    // Check that at least one shuffle produces a different order
+    const hasDifferentOrder = shuffles.some((shuffled) => {
+      return shuffled.some(
+        (element, index) => element.id !== originalSlides[index].id
+      );
+    });
+
+    expect(hasDifferentOrder).toBe(true);
   });
 });