@treely/strapi-slices 5.15.0 → 5.16.0

package/dist/test/integrationMocks/fpmPortoflioProjectMock.d.ts

@@ -0,0 +1,3 @@
+import { PortfolioProject } from '../..';
+declare const fpmPortfolioProjectMock: PortfolioProject;
+export default fpmPortfolioProjectMock;

package/dist/utils/getMessages.d.ts

@@ -59,10 +59,6 @@ declare const getMessages: (locale: string) => {
     'features.projectInfo.properties.forecastedAmountYear.toolTip': string;
     'features.projectInfo.properties.riskBuffer': string;
     'features.projectInfo.properties.year': string;
-    'components.portfolioProjectCard.text.yes': string;
-    'components.portfolioProjectCard.text.some': string;
-    'components.portfolioProjectCard.text.no': string;
-    'components.portfolioProjectCard.text.notYet': string;
     'features.portfolio.documentsDownloadList.projectDocuments': string;
     'features.portfolio.documentsDownloadList.downloadDocument': string;
     'components.creditsAvailableBadge.text.yes': string;
@@ -130,10 +126,6 @@ declare const getMessages: (locale: string) => {
     'features.projectInfo.properties.forecastedAmountYear.label': string;
     'features.projectInfo.properties.riskBuffer': string;
     'features.projectInfo.properties.year': string;
-    'components.portfolioProjectCard.text.yes': string;
-    'components.portfolioProjectCard.text.some': string;
-    'components.portfolioProjectCard.text.no': string;
-    'components.portfolioProjectCard.text.notYet': string;
     'features.portfolio.documentsDownloadList.projectDocuments': string;
     'features.portfolio.documentsDownloadList.downloadDocument': string;
     'components.creditsAvailableBadge.text.yes': string;

package/package.json

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

package/src/components/CreditsAvailableBadge/CreditsAvailableBadge.test.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { render, screen } from '../../test/testUtils';
-import CreditsAvailableState from '../../models/CreditsAvailableState';
 import CreditsAvailableBadge, {
   CreditsAvailableBadgeProps,
 } from './CreditsAvailableBadge';
 import messagesEn from './messages.en';
+import { CreditAvailability } from '../../models/fpm/FPMProject';
 
 const defaultProps: CreditsAvailableBadgeProps = {
-  status: CreditsAvailableState.YES,
+  status: CreditAvailability.CREDITS_AVAILABLE,
 };
 
 const setup = (props: Partial<CreditsAvailableBadgeProps> = {}) => {
@@ -34,12 +34,14 @@ describe('The CreditsAvailableBadge component', () => {
       screen.getByText(messagesEn['components.creditsAvailableBadge.text.yes'])
     ).toBeInTheDocument();
     expect(
-      screen.getByText(messagesEn['components.creditsAvailableBadge.text.yes'])
+      screen
+        .getByText(messagesEn['components.creditsAvailableBadge.text.yes'])
+        .closest('a')
     ).toHaveAttribute('href', 'link-to');
   });
 
   it('renders correctly for the "some" case', () => {
-    setup({ status: CreditsAvailableState.SOME });
+    setup({ status: CreditAvailability.SOME_CREDITS_AVAILABLE });
 
     expect(
       screen.getByText(messagesEn['components.creditsAvailableBadge.text.some'])
@@ -47,7 +49,7 @@ describe('The CreditsAvailableBadge component', () => {
   });
 
   it('renders correctly for the "no" case', () => {
-    setup({ status: CreditsAvailableState.NO });
+    setup({ status: CreditAvailability.NO_CREDITS_AVAILABLE });
 
     expect(
       screen.getByText(messagesEn['components.creditsAvailableBadge.text.no'])
@@ -55,7 +57,7 @@ describe('The CreditsAvailableBadge component', () => {
   });
 
   it('renders correctly for the "notYet" case', () => {
-    setup({ status: CreditsAvailableState.NOT_YET });
+    setup({ status: CreditAvailability.SOON_CREDITS_AVAILABLE });
 
     expect(
       screen.getByText(

package/src/components/CreditsAvailableBadge/CreditsAvailableBadge.tsx

@@ -1,11 +1,12 @@
 import React, { useContext } from 'react';
-import CreditsAvailableState from '../../models/CreditsAvailableState';
-import { Badge } from 'boemly';
+import { Flex, Spacer, Tag, Text } from 'boemly';
 import NextLink from 'next/link';
 import { IntlContext } from '../ContextProvider';
+import { CreditAvailability } from '../../models/fpm/FPMProject';
+import { Info } from '@phosphor-icons/react';
 
 export interface CreditsAvailableBadgeProps {
-  status: CreditsAvailableState;
+  status: CreditAvailability;
   href?: string;
 }
 
@@ -16,40 +17,51 @@ const CreditsAvailableBadge = ({
   const { formatMessage } = useContext(IntlContext);
 
   const variants: Record<
-    CreditsAvailableState,
-    { color: string; text: string }
+    CreditAvailability,
+    { message: string; color: string }
   > = {
-    [CreditsAvailableState.YES]: {
-      color: 'green',
-      text: formatMessage({ id: 'components.creditsAvailableBadge.text.yes' }),
+    [CreditAvailability.CREDITS_AVAILABLE]: {
+      message: formatMessage({
+        id: 'components.creditsAvailableBadge.text.yes',
+      }),
+      color: 'var(--boemly-colors-primary-800)',
     },
-    [CreditsAvailableState.SOME]: {
-      color: 'orange',
-      text: formatMessage({ id: 'components.creditsAvailableBadge.text.some' }),
+    [CreditAvailability.NO_CREDITS_AVAILABLE]: {
+      message: formatMessage({
+        id: 'components.creditsAvailableBadge.text.no',
+      }),
+      color: 'var(--boemly-colors-red-600)',
     },
-    [CreditsAvailableState.NO]: {
-      color: 'red',
-      text: formatMessage({ id: 'components.creditsAvailableBadge.text.no' }),
+    [CreditAvailability.SOME_CREDITS_AVAILABLE]: {
+      message: formatMessage({
+        id: 'components.creditsAvailableBadge.text.some',
+      }),
+      color: 'var(--boemly-colors-orange-500)',
     },
-    [CreditsAvailableState.NOT_YET]: {
-      color: 'blue',
-      text: formatMessage({
+    [CreditAvailability.SOON_CREDITS_AVAILABLE]: {
+      message: formatMessage({
         id: 'components.creditsAvailableBadge.text.notYet',
       }),
+      color: 'var(--boemly-colors-blue-500)',
     },
   };
 
   const variant = variants[status];
 
   return (
-    <Badge
+    <Flex
+      justifyContent="flex-start"
       as={href ? NextLink : undefined}
       href={href}
-      colorScheme={variant.color}
-      width="fit-content"
     >
-      {variant.text}
-    </Badge>
+      <Tag backgroundColor={variant.color} mt="2" mb="1">
+        <Info size={12} color="white" weight="fill" />
+        <Spacer width="1" />
+        <Text color="white" size="xsLowBold">
+          {variant.message}
+        </Text>
+      </Tag>
+    </Flex>
   );
 };
 

package/src/components/CreditsAvailableBadge/messages.de.ts

@@ -2,6 +2,6 @@ const messagesDe = {
   'components.creditsAvailableBadge.text.yes': 'Credits verfügbar',
   'components.creditsAvailableBadge.text.some': 'Einige verbleibende Credits',
   'components.creditsAvailableBadge.text.no': 'Keine verbleibenden Credits',
-  'components.creditsAvailableBadge.text.notYet': 'Gutschriften bald verfügbar',
+  'components.creditsAvailableBadge.text.notYet': 'Credits bald verfügbar',
 };
 export default messagesDe;

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

@@ -248,13 +248,9 @@ export const ProjectInfo: React.FC<ProjectInfoProps> = ({
         <></>
       )}
 
-      {project.creditsAvailable ? (
-        <Box mt="2">
-          <CreditsAvailableBadge status={project.creditsAvailable} />
-        </Box>
-      ) : (
-        <></>
-      )}
+      <Box mt="2">
+        <CreditsAvailableBadge status={project.creditAvailability} />
+      </Box>
     </Container>
   );
 };

package/src/integrations/fpmClient.ts

@@ -8,7 +8,13 @@ const fpmClient = setupCache(
     baseURL: `${FPM_API_URI}/v1`,
     paramsSerializer: (p) => qs.stringify(p, { encodeValuesOnly: true }),
     timeout: 5000,
-  })
+  }),
+  {
+    ttl:
+      FPM_API_URI.includes('127.0.0.1') || FPM_API_URI.includes('localhost')
+        ? 0
+        : 10 * 60 * 1000, // 10 minutes
+  }
 );
 
 export default fpmClient;

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

@@ -27,7 +27,7 @@ describe('The getPortfolioProjects function', () => {
     expect(projects[0]).toStrictEqual({
       ...fpmProjectMock,
       slug: strapiProjectMock.attributes.slug,
-      creditsAvailable: strapiProjectMock.attributes.creditsAvailable,
+      creditAvailability: fpmProjectMock.creditAvailability,
     });
   });
 
@@ -50,7 +50,7 @@ describe('The getPortfolioProjects function', () => {
     expect(projects[0]).toStrictEqual({
       ...fpmProjectMock,
       slug: strapiProjectMock.attributes.slug,
-      creditsAvailable: strapiProjectMock.attributes.creditsAvailable,
+      creditAvailability: fpmProjectMock.creditAvailability,
     });
   });
 });

package/src/integrations/strapi/getPortfolioProjects.ts

@@ -15,6 +15,7 @@ const getPortfolioProjects = async (
   locale: string = 'en',
   preview: boolean = false
 ): Promise<PortfolioProject[]> => {
+  const cache = preview ? false : undefined;
   const params: Record<string, any> = {
     populate: 'deep,6',
     locale,
@@ -30,17 +31,16 @@ const getPortfolioProjects = async (
     { data: strapiProjectsLocalized },
     { data: strapiProjectsEnglish },
   ] = await Promise.all([
-    fpmClient.get<FPMProject[]>('/public/projects'),
+    fpmClient.get<FPMProject[]>('/public/projects', { cache }),
     strapiClient.get<IStrapiResponse<IStrapiData<StrapiProject>[]>>(
       '/projects',
-      {
-        params,
-      }
+      { params, cache }
     ),
     strapiClient.get<IStrapiResponse<IStrapiData<StrapiProject>[]>>(
       '/projects',
       {
         params: { ...params, locale: FALLBACK_LOCALE },
+        cache,
       }
     ),
   ]);
@@ -64,9 +64,6 @@ const getPortfolioProjects = async (
     if (strapiProject?.attributes.slug) {
       toReturn.slug = strapiProject.attributes.slug;
     }
-    if (strapiProject?.attributes.creditsAvailable) {
-      toReturn.creditsAvailable = strapiProject?.attributes.creditsAvailable;
-    }
     if (strapiProject?.attributes.thumbnail) {
       toReturn.thumbnail = strapiProject?.attributes.thumbnail;
     }

package/src/integrations/strapi/getStaticPropsFromStrapi.ts

@@ -14,6 +14,7 @@ const getStaticPropsFromStrapi = async (
   path: string,
   { locale = 'en', slug, preview = false, filters = {} }: Options
 ): Promise<AxiosResponse> => {
+  const cache = preview ? false : undefined;
   const enrichedFilters: Record<string, string> = filters;
 
   if (slug) {
@@ -31,7 +32,7 @@ const getStaticPropsFromStrapi = async (
     params.publicationState = 'preview';
   }
 
-  return strapiClient.get(path, { params });
+  return strapiClient.get(path, { params, cache });
 };
 
 export default getStaticPropsFromStrapi;

package/src/integrations/strapi/getStrapiCollectionType.ts

@@ -22,6 +22,7 @@ const getStrapiCollectionType = async <
   key: K,
   { locale = 'en', preview = false, filters = {} }: Options
 ): Promise<IStrapiData<T>[]> => {
+  const cache = preview ? false : undefined;
   const params: Record<string, any> = {
     populate: 'deep,6',
     locale: 'all',
@@ -35,7 +36,7 @@ const getStrapiCollectionType = async <
 
   const { data } = await strapiClient.get<IStrapiResponse<IStrapiData<T>[]>>(
     path,
-    { params }
+    { params, cache }
   );
 
   const localizedResponses = data.data.filter(

package/src/integrations/strapi/getStrapiSingleType.ts

@@ -17,6 +17,7 @@ const getStrapiSingleType = async <T>(
   path: string,
   { locale = 'en', preview = false, filters = {} }: Options
 ): Promise<IStrapiData<T>> => {
+  const cache = preview ? false : undefined;
   const params: Record<string, any> = {
     populate: 'deep,6',
     locale,
@@ -31,13 +32,14 @@ const getStrapiSingleType = async <T>(
   let response: AxiosResponse<IStrapiResponse<IStrapiData<T>>>;
 
   try {
-    response = await strapiClient.get(path, { params });
+    response = await strapiClient.get(path, { params, cache });
     return response.data.data;
   } catch (error: any) {
     if (error.isAxiosError && error.response?.status === 404) {
       // Retry request with fallback locale
       response = await strapiClient.get(path, {
         params: { ...params, locale: STRAPI_FALLBACK_LOCALE },
+        cache,
       });
 
       return response.data.data;

package/src/integrations/strapi/strapiClient.ts

@@ -8,7 +8,13 @@ const strapiClient = setupCache(
     baseURL: `${STRAPI_URI}/api`,
     paramsSerializer: (p) => qs.stringify(p, { encodeValuesOnly: true }),
     timeout: 60_000,
-  })
+  }),
+  {
+    ttl:
+      STRAPI_URI.includes('127.0.0.1') || STRAPI_URI.includes('localhost')
+        ? 0
+        : 10 * 60 * 1000, // 10 minutes
+  }
 );
 
 export default strapiClient;

package/src/models/PortfolioProject.ts

@@ -1,5 +1,4 @@
 import { StrapiImage } from '..';
-import CreditsAvailableState from './CreditsAvailableState';
 import FPMProject from './fpm/FPMProject';
 
 interface PortfolioProject extends FPMProject {
@@ -7,7 +6,6 @@ interface PortfolioProject extends FPMProject {
   slug?: string;
   portfolioHost?: string;
   thumbnail?: StrapiImage | null;
-  creditsAvailable?: CreditsAvailableState;
   footerSubTitle?: string;
 }
 

package/src/models/fpm/FPMProject.ts

@@ -1,5 +1,12 @@
 import Issuer from './Issuer';
 
+export enum CreditAvailability {
+  CREDITS_AVAILABLE = 'credits_available',
+  NO_CREDITS_AVAILABLE = 'no_credits_available',
+  SOME_CREDITS_AVAILABLE = 'some_credits_available',
+  SOON_CREDITS_AVAILABLE = 'soon_credits_available',
+}
+
 interface FPMProject {
   id: string;
   title: string;
@@ -33,6 +40,7 @@ interface FPMProject {
   forecastedAmountYearly?: number;
   riskBuffer?: number;
   defaultIssuer?: Issuer;
+  creditAvailability: CreditAvailability;
 
   createdAt: Date;
   updatedAt: Date;

package/src/models/strapi/StrapiProject.ts

@@ -1,4 +1,3 @@
-import CreditsAvailableState from '../CreditsAvailableState';
 import Locale from '../Locale';
 import IStrapi from './IStrapi';
 import IStrapiData from './IStrapiData';
@@ -12,7 +11,6 @@ interface StrapiProject {
   slug: string;
   locale: Locale;
   fpmProjectId?: string;
-  creditsAvailable?: CreditsAvailableState;
   footerSubTitle?: string;
   createdAt: string;
   updatedAt: string;

package/src/rootMessages.de.ts

@@ -8,7 +8,6 @@ import portfolioDocumentsDownloadListMessagesDe from './components/portfolio/Doc
 import projectFactsMessagesDe from './slices/ProjectFacts/messages.de';
 import projectsMapMessagesDe from './slices/ProjectsMap/messages.de';
 import portfolioProjectInfoMessagesDe from './components/portfolio/ProjectInfo/messages.de';
-import portfolioProjectCardMessagesDe from './components/portfolio/PortfolioProjectCard/messages.de';
 import portfolioSmallCheckoutMessagesDe from './components/portfolio/SmallCheckout/messages.de';
 import shopCheckoutMessagesDe from './slices/ShopCheckout/messages.de';
 import textCarouselMessagesDe from './slices/TextCarousel/messages.de';
@@ -22,7 +21,6 @@ const rootMessagesDe = {
   //
   ...creditsAvailableBadgeMessagesDe,
   ...portfolioDocumentsDownloadListMessagesDe,
-  ...portfolioProjectCardMessagesDe,
   ...portfolioProjectInfoMessagesDe,
   ...portfolioSmallCheckoutMessagesDe,
 

package/src/rootMessages.en.ts

@@ -8,7 +8,6 @@ import portfolioDocumentsDownloadListMessagesEn from './components/portfolio/Doc
 import projectFactsMessagesEn from './slices/ProjectFacts/messages.en';
 import projectsMapMessagesEn from './slices/ProjectsMap/messages.en';
 import portfolioProjectInfoMessagesEn from './components/portfolio/ProjectInfo/messages.en';
-import portfolioProjectCardMessagesEn from './components/portfolio/PortfolioProjectCard/messages.en';
 import portfolioSmallCheckoutMessagesEn from './components/portfolio/SmallCheckout/messages.en';
 import shopCheckoutMessagesEn from './slices/ShopCheckout/messages.en';
 import textCarouselMessagesEn from './slices/TextCarousel/messages.en';
@@ -22,7 +21,6 @@ const rootMessagesEn = {
   //
   ...creditsAvailableBadgeMessagesEn,
   ...portfolioDocumentsDownloadListMessagesEn,
-  ...portfolioProjectCardMessagesEn,
   ...portfolioProjectInfoMessagesEn,
   ...portfolioSmallCheckoutMessagesEn,
 

package/src/slices/ProjectFacts/ProjectFacts.stories.tsx

@@ -3,7 +3,6 @@ import { StoryFn, Meta } from '@storybook/react';
 
 import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
 import { storybookStrapiAvatarMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import CreditsAvailableState from '../../models/CreditsAvailableState';
 import ProjectFacts from '.';
 
 export default {
@@ -53,7 +52,7 @@ WithCheckout.args = {
 
 export const FullProps = Template.bind({});
 FullProps.args = {
-  project: { ...fpmProjectMock, creditsAvailable: CreditsAvailableState.YES },
+  project: fpmProjectMock,
   slice: {
     projectId: fpmProjectMock.id,
 

package/src/slices/ProjectGridCard/ProjectGridCard.test.tsx

@@ -0,0 +1,54 @@
+import { render, screen } from '../../test/testUtils';
+import { ProjectGridCardProps } from './ProjectGridCard';
+import ProjectGridCard from '.';
+import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
+import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
+import React from 'react';
+import messagesEn from '../../components/CreditsAvailableBadge/messages.en';
+
+const defaultProps: ProjectGridCardProps = {
+  project: {
+    ...fpmProjectMock,
+    slug: 'slug',
+    thumbnail: { img: { data: strapiMediaMock }, alt: 'Alt Text', id: 1 },
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<ProjectGridCard {...combinedProps} />);
+};
+
+describe('The ProjectGridCard component', () => {
+  it('displays the project card', () => {
+    setup();
+
+    expect(screen.getByText(fpmProjectMock.title)).toBeInTheDocument();
+  });
+
+  it('displays the project thumbnail', () => {
+    setup();
+
+    expect(screen.getByRole('img')).toHaveProperty('alt', 'Alt Text');
+  });
+
+  it('displays the project area', () => {
+    setup();
+
+    expect(screen.getByText('140 ha')).toBeInTheDocument();
+  });
+
+  it('displays the project location', () => {
+    setup();
+
+    expect(screen.getByText('Austria')).toBeInTheDocument();
+  });
+
+  it('displays the credits available badge', () => {
+    setup();
+
+    expect(
+      screen.getByText(messagesEn['components.creditsAvailableBadge.text.yes'])
+    ).toBeInTheDocument();
+  });
+});

package/src/slices/ProjectGridCard/ProjectGridCard.tsx

@@ -0,0 +1,57 @@
+import { Box, Container, Flex, Heading, Tag, Text } from 'boemly';
+import React, { useContext } from 'react';
+import Image from 'next/image';
+import PortfolioProject from '../../models/PortfolioProject';
+import { strapiMediaUrl } from '../..';
+import { IntlContext } from 'react-intl';
+import { FORMAT_AS_HECTARE_CONFIG } from '../../constants/formatter';
+import CreditsAvailableBadge from '../../components/CreditsAvailableBadge';
+
+export interface ProjectGridCardProps {
+  project: PortfolioProject;
+}
+
+export const ProjectGridCard = ({
+  project,
+}: ProjectGridCardProps): JSX.Element => {
+  const { formatNumber } = useContext(IntlContext);
+
+  return (
+    <Container>
+      <Flex flexDir="column" height="full">
+        {project.thumbnail && (
+          <Box borderRadius="xl" position="relative" height="36" mb="2">
+            <Image
+              src={strapiMediaUrl(project.thumbnail?.img, 'medium')}
+              alt={project.thumbnail?.alt}
+              fill
+              style={{
+                objectFit: project.thumbnail?.objectFit || 'cover',
+                borderRadius: 'var(--boemly-radii-xl)',
+              }}
+            />
+          </Box>
+        )}
+        <Heading my="4" size="lg">
+          {project.title}
+        </Heading>
+        <Flex flexDir="row" gap="2">
+          <Tag>
+            <Text size="xsLowBold" color="gray.800">
+              {formatNumber(
+                (project.area || 0) / 10000,
+                FORMAT_AS_HECTARE_CONFIG
+              )}
+            </Text>
+          </Tag>
+          <Tag>
+            <Text size="xsLowBold" color="gray.800">
+              {project.location}
+            </Text>
+          </Tag>
+        </Flex>
+        <CreditsAvailableBadge status={project.creditAvailability} />
+      </Flex>
+    </Container>
+  );
+};

package/src/slices/ProjectGridCard/index.ts

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

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
 import ProjectsGrid from '.';
-import portfolioProjectMock from '../../test/integrationMocks/portfolioProjectMock';
 import { strapiProjectMock } from '../../test/strapiMocks/strapiProject';
+import portfolioProjectMock from '../../test/integrationMocks/portfolioProjectMock';
 
 export default {
   title: 'slices/ProjectsGrid',

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

@@ -4,7 +4,6 @@ import ProjectsGrid from '.';
 import { ProjectsGridProps } from './ProjectsGrid';
 import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
 import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import CreditsAvailableState from '../../models/CreditsAvailableState';
 import { strapiProjectMock } from '../../test/strapiMocks/strapiProject';
 
 const defaultProps: ProjectsGridProps = {
@@ -18,7 +17,6 @@ const defaultProps: ProjectsGridProps = {
       isPublic: true,
       thumbnail: { img: { data: strapiMediaMock }, alt: 'Alt Text', id: 1 },
       footerSubTitle: 'certified-123',
-      creditsAvailable: CreditsAvailableState.YES,
     },
   ],
 };

package/src/slices/ProjectsGrid/ProjectsGrid.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 import { Box, DefaultSectionContainer, SimpleGrid, Wrapper } from 'boemly';
 import Link from 'next/link';
 import { MEDIUM_TRANSITION_DURATION } from '../../constants/animations';
+import ProjectGridCard from '../ProjectGridCard';
 import PortfolioProject from '../../models/PortfolioProject';
-import PortfolioProjectCard from '../../components/portfolio/PortfolioProjectCard';
-import { IStrapi, IStrapiData, StrapiProject } from '../..';
+import IStrapi from '../../models/strapi/IStrapi';
+import IStrapiData from '../../models/strapi/IStrapiData';
+import StrapiProject from '../../models/strapi/StrapiProject';
 
 export interface ProjectsGridProps {
   slice: {
@@ -65,7 +67,7 @@ export const ProjectsGrid: React.FC<ProjectsGridProps> = ({
                 transition={`box-shadow ease ${MEDIUM_TRANSITION_DURATION}s`}
                 _hover={{ boxShadow: 'lg' }}
               >
-                <PortfolioProjectCard project={project} />
+                <ProjectGridCard project={project} />
               </Box>
             </ConditionalWrapper>
           ))}

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import { fireEvent, render, screen, waitFor } from '../../test/testUtils';
-import CreditsAvailableState from '../../models/CreditsAvailableState';
 import MapMarker, { MapMarkerProps } from './MapMarker';
 import messagesEn from './messages.en';
+import { CreditAvailability } from '../../models/fpm/FPMProject';
 
 const defaultProps: MapMarkerProps = {
   title: 'Project title',
   portfolioHost: '',
   isPublic: true,
+  creditAvailability: CreditAvailability.CREDITS_AVAILABLE,
 };
 
 const setup = (props: Partial<MapMarkerProps> = {}) => {
@@ -88,7 +89,7 @@ describe('The MapMarker component', () => {
 
   it('renders the credit availability if it is defined', () => {
     setup({
-      creditsAvailable: CreditsAvailableState.YES,
+      creditAvailability: CreditAvailability.CREDITS_AVAILABLE,
     });
 
     fireEvent.mouseEnter(screen.getByTestId('mapmarker-pin'));