@treely/strapi-slices 5.15.0 → 5.16.0

package/src/slices/ProjectsMap/MapMarker.tsx

@@ -5,6 +5,7 @@ import {
   Container,
   Flex,
   Heading,
+  Spacer,
   Text,
   useDisclosure,
   useToken,
@@ -12,8 +13,8 @@ import {
 import { MapPin } from '@phosphor-icons/react';
 import NextLink from 'next/link';
 import CreditsAvailableBadge from '../../components/CreditsAvailableBadge';
-import CreditsAvailableState from '../../models/CreditsAvailableState';
 import { IntlContext } from '../../components/ContextProvider';
+import { CreditAvailability } from '../../models/fpm/FPMProject';
 
 export interface MapMarkerProps {
   title: string;
@@ -21,14 +22,14 @@ export interface MapMarkerProps {
   projectDeveloper?: string;
   slug?: string;
   portfolioHost?: string;
-  creditsAvailable?: CreditsAvailableState;
+  creditAvailability: CreditAvailability;
 }
 
 const MapMarker = ({
   title,
   projectDeveloper,
   slug,
-  creditsAvailable,
+  creditAvailability,
   portfolioHost = '',
   isPublic = false,
 }: MapMarkerProps) => {
@@ -65,15 +66,11 @@ const MapMarker = ({
           maxWidth={['3xs', null, null, 'sm']}
         >
           <Flex direction="column">
-            {creditsAvailable && (
-              <>
-                <CreditsAvailableBadge
-                  status={creditsAvailable}
-                  href={slug && `${portfolioHost}/portfolio/${slug}`}
-                />
-                <Box height="3" />
-              </>
-            )}
+            <CreditsAvailableBadge
+              status={creditAvailability}
+              href={slug && `${portfolioHost}/portfolio/${slug}`}
+            />
+            <Spacer height="3" />
 
             <Heading size="md">{title}</Heading>
 

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
 import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
-import CreditsAvailableState from '../../models/CreditsAvailableState';
 import ProjectsMap from '.';
 
 export default {
@@ -91,7 +90,6 @@ FullProps.args = {
     {
       ...fpmProjectMock,
       slug: 'project-slug',
-      creditsAvailable: CreditsAvailableState.YES,
       isPublic: true,
       geom: {
         type: 'Point',

package/src/slices/ProjectsMap/ProjectsMap.tsx

@@ -99,7 +99,7 @@ export const ProjectsMap: React.FC<ProjectsMapProps> = ({
               isPublic={project.isPublic}
               portfolioHost={project.portfolioHost}
               slug={project.slug}
-              creditsAvailable={project.creditsAvailable}
+              creditAvailability={project.creditAvailability}
               projectDeveloper={project.projectDeveloper?.name}
             />
           </MinimalProviders>

package/src/slices/TextWithCard/TextWithCard.stories.tsx

@@ -3,8 +3,8 @@ import { StoryFn, Meta } from '@storybook/react';
 
 import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
 import TextWithCard from '.';
-import CreditsAvailableState from '../../models/CreditsAvailableState';
 import { IStrapiData, PortfolioProject, StrapiProject } from '../..';
+import { CreditAvailability } from '../../models/fpm/FPMProject';
 
 export default {
   title: 'slices/TextWithCard',
@@ -70,7 +70,7 @@ const portfolioProject: PortfolioProject = {
   riskBuffer: 10,
   createdAt: new Date('2020-01-01'),
   updatedAt: new Date('2020-01-01'),
-  creditsAvailable: CreditsAvailableState.YES,
+  creditAvailability: CreditAvailability.CREDITS_AVAILABLE,
   slug: 'portfolio-slug',
   thumbnail: {
     img: { data: storybookStrapiCoverMock },
@@ -84,7 +84,6 @@ const project: IStrapiData<StrapiProject> = {
     slug: 'slug',
     locale: 'en',
     fpmProjectId: portfolioProject.id,
-    creditsAvailable: CreditsAvailableState.YES,
     footerSubTitle: 'Certified, 2023',
     createdAt: '2022-01-10T15:04:32.897Z',
     updatedAt: '2022-01-11T10:21:42.317Z',

package/src/slices/TextWithCard/TextWithCard.tsx

@@ -16,7 +16,7 @@ import StrapiLink from '../../models/strapi/StrapiLink';
 import StrapiProjectCard from '../../models/strapi/StrapiProjectCard';
 import StrapiLinkButton from '../../components/StrapiLinkButton';
 import { IStrapiData, PortfolioProject, StrapiProject } from '../..';
-import PortfolioProjectCard from '../../components/portfolio/PortfolioProjectCard';
+import ProjectGridCard from '../ProjectGridCard';
 
 interface TextWithCardSlice {
   tagline?: string;
@@ -53,7 +53,7 @@ export const TextWithCard: React.FC<TextWithCardProps> = ({
       position="relative"
       data-testid={`card-position-${slice.cardPosition}`}
     >
-      {portfolioProject && <PortfolioProjectCard project={portfolioProject} />}
+      {portfolioProject && <ProjectGridCard project={portfolioProject} />}
       {!portfolioProject && slice.card && (
         <ProjectCard
           facts={slice.card.facts}

package/src/test/integrationMocks/fpmPortoflioProjectMock.ts

@@ -0,0 +1,16 @@
+import { PortfolioProject } from '../..';
+import fpmProjectMock from './fpmProjectMock';
+import { storybookStrapiCoverMock } from '../storybookMocks/storybookStrapiMedia';
+
+const fpmPortfolioProjectMock: PortfolioProject = {
+  ...fpmProjectMock,
+  isPublic: true,
+  footerSubTitle: 'Certified, 2023',
+  thumbnail: {
+    id: 1,
+    img: { data: storybookStrapiCoverMock },
+    alt: 'Project Thumbnail',
+  },
+};
+
+export default fpmPortfolioProjectMock;

package/src/test/integrationMocks/fpmProjectMock.ts

@@ -1,4 +1,4 @@
-import FPMProject from '../../models/fpm/FPMProject';
+import FPMProject, { CreditAvailability } from '../../models/fpm/FPMProject';
 
 const fpmProjectMock: FPMProject = {
   id: '1',
@@ -32,6 +32,7 @@ const fpmProjectMock: FPMProject = {
   riskBuffer: 10,
   createdAt: new Date('2020-01-01'),
   updatedAt: new Date('2020-01-01'),
+  creditAvailability: CreditAvailability.CREDITS_AVAILABLE,
 };
 
 export default fpmProjectMock;

package/src/test/integrationMocks/portfolioProjectMock.ts

@@ -1,13 +1,11 @@
 import { PortfolioProject } from '../..';
 import fpmProjectMock from './fpmProjectMock';
-import { strapiProjectMock } from '../strapiMocks/strapiProject';
 import { storybookStrapiCoverMock } from '../storybookMocks/storybookStrapiMedia';
 
 const portfolioProjectMock: PortfolioProject = {
-  ...strapiProjectMock.attributes,
   ...fpmProjectMock,
   isPublic: true,
-  footerSubTitle: 'Certified, 2023',
+  slug: 'slug',
   thumbnail: {
     id: 1,
     img: { data: storybookStrapiCoverMock },

package/src/test/mocks/portfolioProjectMock.ts

@@ -1,10 +1,8 @@
-import CreditsAvailableState from '../../models/CreditsAvailableState';
 import PortfolioProject from '../../models/PortfolioProject';
 import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
 
 const portfolioProjectMock: PortfolioProject = {
   ...fpmProjectMock,
-  creditsAvailable: CreditsAvailableState.YES,
   slug: 'portfolio-slug',
 };
 

package/src/test/strapiMocks/strapiProject.ts

@@ -1,6 +1,5 @@
 import IStrapiData from '../../models/strapi/IStrapiData';
 import StrapiProject from '../../models/strapi/StrapiProject';
-import CreditsAvailableState from '../../models/CreditsAvailableState';
 import { strapiPortfolioMock } from './strapiPortfolioMock';
 import fpmProjectMock from '../integrationMocks/fpmProjectMock';
 import { strapiMediaMock } from './strapiMedia';
@@ -11,7 +10,6 @@ export const strapiProjectMock: IStrapiData<StrapiProject> = {
     slug: 'slug',
     locale: 'en',
     fpmProjectId: fpmProjectMock.id,
-    creditsAvailable: CreditsAvailableState.YES,
     footerSubTitle: 'Certified, 2023',
     createdAt: '2022-01-10T15:04:32.897Z',
     updatedAt: '2022-01-11T10:21:42.317Z',

package/dist/components/portfolio/PortfolioProjectCard/PortfolioProjectCard.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { PortfolioProject } from '../../..';
-export interface PortfolioProjectCardProps {
-    project: PortfolioProject;
-}
-export declare const PortfolioProjectCard: ({ project, }: PortfolioProjectCardProps) => React.JSX.Element;

package/dist/components/portfolio/PortfolioProjectCard/index.d.ts

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

package/dist/components/portfolio/PortfolioProjectCard/messages.de.d.ts

@@ -1,7 +0,0 @@
-declare const messagesDe: {
-    'components.portfolioProjectCard.text.yes': string;
-    'components.portfolioProjectCard.text.some': string;
-    'components.portfolioProjectCard.text.no': string;
-    'components.portfolioProjectCard.text.notYet': string;
-};
-export default messagesDe;

package/dist/components/portfolio/PortfolioProjectCard/messages.en.d.ts

@@ -1,7 +0,0 @@
-declare const messagesEn: {
-    'components.portfolioProjectCard.text.yes': string;
-    'components.portfolioProjectCard.text.some': string;
-    'components.portfolioProjectCard.text.no': string;
-    'components.portfolioProjectCard.text.notYet': string;
-};
-export default messagesEn;

package/dist/models/CreditsAvailableState.d.ts

@@ -1,7 +0,0 @@
-declare enum CreditsAvailableState {
-    YES = "yes",
-    SOME = "some",
-    NO = "no",
-    NOT_YET = "notYet"
-}
-export default CreditsAvailableState;

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

@@ -1,53 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../../test/testUtils';
-import PortfolioProjectCard from '.';
-import { PortfolioProjectCardProps } from './PortfolioProjectCard';
-import portfolioProjectMock from '../../../test/integrationMocks/portfolioProjectMock';
-import messagesEn from './messages.en';
-
-const defaultProps: PortfolioProjectCardProps = {
-  project: portfolioProjectMock,
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<PortfolioProjectCard {...combinedProps} />);
-};
-
-describe('The PortfolioProjectCard component', () => {
-  it('displays the project card', () => {
-    setup();
-
-    expect(screen.getByText(portfolioProjectMock.title)).toBeInTheDocument();
-  });
-
-  it('displays the area', () => {
-    setup();
-
-    expect(screen.getByText('140 ha')).toBeInTheDocument();
-  });
-
-  it('displays the location', () => {
-    setup();
-
-    expect(
-      screen.getByText(portfolioProjectMock.location as string)
-    ).toBeInTheDocument();
-  });
-
-  it('displays the credits availability', () => {
-    setup();
-
-    expect(
-      screen.getByText(messagesEn['components.portfolioProjectCard.text.yes'])
-    ).toBeInTheDocument();
-  });
-
-  it('displays the footer sub title', () => {
-    setup();
-
-    expect(
-      screen.getByText(portfolioProjectMock.footerSubTitle as string)
-    ).toBeInTheDocument();
-  });
-});

package/src/components/portfolio/PortfolioProjectCard/PortfolioProjectCard.tsx

@@ -1,69 +0,0 @@
-import React, { useContext } from 'react';
-import { ProjectCard } from 'boemly';
-import { PortfolioProject, strapiMediaUrl } from '../../..';
-import CreditsAvailableState from '../../../models/CreditsAvailableState';
-import { FORMAT_AS_HECTARE_CONFIG } from '../../../constants/formatter';
-import Image from 'next/image';
-import { IntlContext } from '../../ContextProvider';
-
-export interface PortfolioProjectCardProps {
-  project: PortfolioProject;
-}
-
-export const PortfolioProjectCard = ({
-  project,
-}: PortfolioProjectCardProps) => {
-  const { formatMessage, formatNumber } = useContext(IntlContext);
-
-  const creditsAvailableMessages: Record<CreditsAvailableState, string> = {
-    [CreditsAvailableState.YES]: formatMessage({
-      id: 'components.portfolioProjectCard.text.yes',
-    }),
-
-    [CreditsAvailableState.SOME]: formatMessage({
-      id: 'components.portfolioProjectCard.text.some',
-    }),
-
-    [CreditsAvailableState.NO]: formatMessage({
-      id: 'components.portfolioProjectCard.text.no',
-    }),
-
-    [CreditsAvailableState.NOT_YET]: formatMessage({
-      id: 'components.portfolioProjectCard.text.notYet',
-    }),
-  };
-
-  return (
-    <ProjectCard
-      title={project.title}
-      facts={[
-        {
-          id: 1,
-          text: formatNumber(
-            (project.area || 0) / 10000,
-            FORMAT_AS_HECTARE_CONFIG
-          ),
-        },
-        { id: 2, text: project.location || '' },
-      ]}
-      footerTitle={
-        creditsAvailableMessages[
-          project.creditsAvailable ?? CreditsAvailableState.NOT_YET
-        ]
-      }
-      footerSubTitle={project.footerSubTitle || ''}
-      image={
-        project.thumbnail && (
-          <Image
-            src={strapiMediaUrl(project.thumbnail?.img, 'medium')}
-            alt={project.thumbnail?.alt}
-            fill
-            style={{
-              objectFit: project.thumbnail?.objectFit || 'cover',
-            }}
-          />
-        )
-      }
-    />
-  );
-};

package/src/components/portfolio/PortfolioProjectCard/index.ts

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

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

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

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

@@ -1,8 +0,0 @@
-const messagesEn = {
-  'components.portfolioProjectCard.text.yes': 'Credits available',
-  'components.portfolioProjectCard.text.some': 'Some remaining credits',
-  'components.portfolioProjectCard.text.no': 'No remaining credits',
-  'components.portfolioProjectCard.text.notYet': 'Credits available soon',
-};
-
-export default messagesEn;

package/src/models/CreditsAvailableState.ts

@@ -1,8 +0,0 @@
-enum CreditsAvailableState {
-  YES = 'yes',
-  SOME = 'some',
-  NO = 'no',
-  NOT_YET = 'notYet',
-}
-
-export default CreditsAvailableState;