@treely/strapi-slices 5.15.1 → 5.17.0

package/dist/utils/getMessages.d.ts

@@ -20,8 +20,9 @@ declare const getMessages: (locale: string) => {
     'sections.shopCheckout.summary.price.taxIncluded': string;
     'sections.shopCheckout.submit': string;
     'sections.projectsMap.link.text': string;
+    'sections.projectCardGrid.certified': string;
+    'sections.projectCardGrid.certificationInProgres': string;
     'sections.projectFacts.projectInfo.value': string;
-    'projects.projectFacts.properties.area': string;
     'sections.glossary.copyButtonLabel': string;
     'sections.glossary.copySuccessMessage': string;
     'sections.glossary.copyFailureMessage': string;
@@ -59,10 +60,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;
@@ -91,8 +88,9 @@ declare const getMessages: (locale: string) => {
     'sections.shopCheckout.summary.price.taxIncluded': string;
     'sections.shopCheckout.submit': string;
     'sections.projectsMap.link.text': string;
+    'sections.projectCardGrid.certified': string;
+    'sections.projectCardGrid.certificationInProgres': string;
     'sections.projectFacts.projectInfo.value': string;
-    'projects.projectFacts.properties.area': string;
     'sections.glossary.copyButtonLabel': string;
     'sections.glossary.copySuccessMessage': string;
     'sections.glossary.copyFailureMessage': string;
@@ -130,10 +128,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.1",
+  "version": "5.17.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,11 @@
 import React, { useContext } from 'react';
-import CreditsAvailableState from '../../models/CreditsAvailableState';
-import { Badge } from 'boemly';
+import { Flex, Tag, Text } from 'boemly';
 import NextLink from 'next/link';
 import { IntlContext } from '../ContextProvider';
+import { CreditAvailability } from '../../models/fpm/FPMProject';
 
 export interface CreditsAvailableBadgeProps {
-  status: CreditsAvailableState;
+  status: CreditAvailability;
   href?: string;
 }
 
@@ -16,40 +16,49 @@ 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">
+        <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/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

@@ -64,15 +64,9 @@ 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;
     }
-    if (strapiProject?.attributes.footerSubTitle) {
-      toReturn.footerSubTitle = strapiProject?.attributes.footerSubTitle;
-    }
     if (strapiProject?.attributes.portfolio.data?.attributes.host) {
       toReturn.portfolioHost =
         strapiProject.attributes.portfolio.data.attributes.host;

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,8 +6,6 @@ interface PortfolioProject extends FPMProject {
   slug?: string;
   portfolioHost?: string;
   thumbnail?: StrapiImage | null;
-  creditsAvailable?: CreditsAvailableState;
-  footerSubTitle?: string;
 }
 
 export default PortfolioProject;

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,8 @@ interface FPMProject {
   forecastedAmountYearly?: number;
   riskBuffer?: number;
   defaultIssuer?: Issuer;
+  creditAvailability: CreditAvailability;
+  certificationDate?: Date;
 
   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

@@ -6,9 +6,9 @@ import customerQuoteCardMessagesDe from './components/CustomerQuoteCard/messages
 import glossaryMessagesDe from './slices/Glossary/messages.de';
 import portfolioDocumentsDownloadListMessagesDe from './components/portfolio/DocumentsDownloadList/messages.de';
 import projectFactsMessagesDe from './slices/ProjectFacts/messages.de';
+import projectGridCardMesssagesDe from './slices/ProjectGridCard/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 +22,6 @@ const rootMessagesDe = {
   //
   ...creditsAvailableBadgeMessagesDe,
   ...portfolioDocumentsDownloadListMessagesDe,
-  ...portfolioProjectCardMessagesDe,
   ...portfolioProjectInfoMessagesDe,
   ...portfolioSmallCheckoutMessagesDe,
 
@@ -35,6 +34,7 @@ const rootMessagesDe = {
   ...customerQuoteCardMessagesDe,
   ...glossaryMessagesDe,
   ...projectFactsMessagesDe,
+  ...projectGridCardMesssagesDe,
   ...projectsMapMessagesDe,
   ...shopCheckoutMessagesDe,
   ...textCarouselMessagesDe,

package/src/rootMessages.en.ts

@@ -6,9 +6,9 @@ import customerQuoteCardMessagesEn from './components/CustomerQuoteCard/messages
 import glossaryMessagesEn from './slices/Glossary/messages.en';
 import portfolioDocumentsDownloadListMessagesEn from './components/portfolio/DocumentsDownloadList/messages.en';
 import projectFactsMessagesEn from './slices/ProjectFacts/messages.en';
+import projectGridCardMesssagesEn from './slices/ProjectGridCard/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 +22,6 @@ const rootMessagesEn = {
   //
   ...creditsAvailableBadgeMessagesEn,
   ...portfolioDocumentsDownloadListMessagesEn,
-  ...portfolioProjectCardMessagesEn,
   ...portfolioProjectInfoMessagesEn,
   ...portfolioSmallCheckoutMessagesEn,
 
@@ -35,6 +34,7 @@ const rootMessagesEn = {
   ...customerQuoteCardMessagesEn,
   ...glossaryMessagesEn,
   ...projectFactsMessagesEn,
+  ...projectGridCardMesssagesEn,
   ...projectsMapMessagesEn,
   ...shopCheckoutMessagesEn,
   ...textCarouselMessagesEn,

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/ProjectFacts/messages.de.ts

@@ -1,5 +1,4 @@
 const messagesDe = {
   'sections.projectFacts.projectInfo.value': 'Projekt Infos',
-  'projects.projectFacts.properties.area': 'Fläche',
 };
 export default messagesDe;

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

@@ -1,5 +1,4 @@
 const messagesEn = {
   'sections.projectFacts.projectInfo.value': 'Project Infos',
-  'projects.projectFacts.properties.area': 'Area',
 };
 export default messagesEn;

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

@@ -0,0 +1,60 @@
+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 certification date if it is defined', () => {
+    setup();
+
+    expect(screen.getByText('Certified, 2020')).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,75 @@
+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, formatMessage } = 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>
+          {project.certificationDate ? (
+            <Tag>
+              <Text size="xsLowBold" color="gray.800">
+                {formatMessage(
+                  { id: 'sections.projectCardGrid.certified' },
+                  { year: project.certificationDate.getFullYear() }
+                )}
+              </Text>
+            </Tag>
+          ) : (
+            <Tag>
+              <Text size="xsLowBold" color="gray.800">
+                {formatMessage({
+                  id: 'sections.projectCardGrid.certificationInProgres',
+                })}
+              </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/ProjectGridCard/messages.de.ts

@@ -0,0 +1,6 @@
+const messagesDe = {
+  'sections.projectCardGrid.certified': 'Zertifiziert, {year}',
+  'sections.projectCardGrid.certificationInProgres':
+    'Zertifizierung ist in Arbeit',
+};
+export default messagesDe;

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

@@ -0,0 +1,6 @@
+const messagesDe = {
+  'sections.projectCardGrid.certified': 'Certified, {year}',
+  'sections.projectCardGrid.certificationInProgres':
+    'Certification in progress',
+};
+export default messagesDe;

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

@@ -2,8 +2,9 @@ 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';
+import { CreditAvailability } from '../../models/fpm/FPMProject';
 
 export default {
   title: 'slices/ProjectsGrid',
@@ -21,3 +22,36 @@ Minimal.args = {
     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

@@ -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 = {
@@ -17,8 +16,6 @@ const defaultProps: ProjectsGridProps = {
       slug: 'slug',
       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'));