@treely/strapi-slices 1.0.0

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

@@ -0,0 +1,51 @@
+import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import { mergeDeep } from '@/utils/mergeDeep';
+import { render, screen } from '@/test/testUtils';
+import { ContactProps } from './Contact';
+import Contact from '.';
+import { pushSpy, useRouter } from '../../../../__mocks__/next/router';
+
+const defaultProps: ContactProps = {
+  title: 'Contact title',
+};
+
+const setup = (props = {}) => {
+  const combinedProps = mergeDeep(defaultProps, props);
+  render(<Contact {...combinedProps} />);
+};
+
+describe('The Contact component', () => {
+  afterEach(() => {
+    pushSpy.mockRestore();
+  });
+
+  afterAll(() => {
+    useRouter.mockRestore();
+  });
+
+  it('displays the correct title, if it is defined', () => {
+    setup();
+
+    expect(screen.getByText('Contact title')).toBeInTheDocument();
+  });
+
+  it('does not display the title, if it is not defined', () => {
+    setup({ title: undefined });
+
+    expect(screen.queryByText('Contact title')).not.toBeInTheDocument();
+  });
+
+  it('displays the correct text, button and avatar, if they are defined', () => {
+    setup({
+      ...defaultProps,
+      text: 'Contact text',
+      button: { id: 1, url: 'https://tree.ly', text: 'Button' },
+      avatar: { id: 1, alt: 'Alt text', img: { data: strapiMediaMock } },
+    });
+
+    expect(screen.getByText('Contact text')).toBeInTheDocument();
+    expect(screen.getByText('Button')).toBeInTheDocument();
+    expect(screen.getByRole('link')).toBeInTheDocument();
+    expect(screen.getByAltText('Alt text')).toBeInTheDocument();
+  });
+});

package/src/components/portfolio/Contact/Contact.tsx

@@ -0,0 +1,73 @@
+import StrapiImage from '@/models/strapi/StrapiImage';
+import StrapiLink from '@/models/strapi/StrapiLink';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import { Text, Heading, Flex, Box, Container } from 'boemly';
+import Image from 'next/image';
+import StrapiLinkButton from '@/components/StrapiLinkButton';
+
+export interface ContactProps {
+  avatar?: StrapiImage;
+  title?: string;
+  text?: string;
+  button?: StrapiLink;
+}
+
+export const Contact: React.FC<ContactProps> = ({
+  avatar,
+  title,
+  text,
+  button,
+}: ContactProps) => (
+  <Container backgroundColor="primary.100" border="none" p="8" height="full">
+    <Flex
+      flexDir="column"
+      justifyContent="center"
+      alignItems="center"
+      height="full"
+    >
+      {avatar ? (
+        <Box
+          position="relative"
+          width="20"
+          height="20"
+          borderRadius="full"
+          overflow="hidden"
+        >
+          <Image
+            src={strapiMediaUrl(avatar.img, 'small')}
+            alt={avatar.alt}
+            fill
+            objectFit={avatar.objectFit}
+          />
+        </Box>
+      ) : (
+        <></>
+      )}
+      {title ? (
+        <Heading
+          mt="6"
+          size="md"
+          fontWeight="500"
+          textAlign="center"
+          color="black"
+        >
+          {title}
+        </Heading>
+      ) : (
+        <></>
+      )}
+      {text ? (
+        <Text mt="2" size="smRegularNormal" textAlign="center">
+          {text}
+        </Text>
+      ) : (
+        <></>
+      )}
+      {button ? (
+        <StrapiLinkButton mt="6" link={button} size="md" variant="outline" />
+      ) : (
+        <></>
+      )}
+    </Flex>
+  </Container>
+);

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

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

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

@@ -0,0 +1,49 @@
+import { render, screen } from '@/test/testUtils';
+import DocumentsDownloadList from '.';
+import { DocumentsDownloadListProps } from './DocumentsDownloadList';
+import messagesEn from './messages.en';
+
+const defaultProps: DocumentsDownloadListProps = {
+  documentUrls: [
+    {
+      id: 1,
+      url: 'https://example.com/document-1.pdf',
+      text: 'Test Document 1',
+    },
+    {
+      id: 2,
+      url: 'https://example.com/document-2.pdf',
+      text: 'Test Document 2',
+    },
+  ],
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<DocumentsDownloadList {...combinedProps} />);
+};
+
+describe('The DocumentsDownloadList component', () => {
+  it('renders existing documentUrls without errors', async () => {
+    setup();
+
+    expect(await screen.getByText('Test Document 1')).toBeInTheDocument();
+    expect(await screen.getByText('Test Document 2')).toBeInTheDocument();
+  });
+
+  it('navigates to the url link when pressing the download button', async () => {
+    setup();
+
+    expect(
+      screen.getAllByLabelText(
+        messagesEn['features.portfolio.documentsDownloadList.downloadDocument']
+      )[0]
+    ).toHaveAttribute('href', 'https://example.com/document-1.pdf');
+
+    expect(
+      screen.getAllByLabelText(
+        messagesEn['features.portfolio.documentsDownloadList.downloadDocument']
+      )[1]
+    ).toHaveAttribute('href', 'https://example.com/document-2.pdf');
+  });
+});

package/src/components/portfolio/DocumentsDownloadList/DocumentsDownloadList.tsx

@@ -0,0 +1,76 @@
+import StrapiLink from '@/models/strapi/StrapiLink';
+import {
+  Center,
+  Container,
+  Flex,
+  Heading,
+  IconButton,
+  Spacer,
+  Text,
+} from 'boemly';
+import { DownloadSimple, FilePdf } from '@phosphor-icons/react';
+import Link from 'next/link';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+export interface DocumentsDownloadListProps {
+  documentUrls: StrapiLink[];
+}
+
+export const DocumentsDownloadList: React.FC<DocumentsDownloadListProps> = ({
+  documentUrls,
+}: DocumentsDownloadListProps) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Container p="2">
+      <Heading size="xl" textAlign="left">
+        <FormattedMessage id="features.portfolio.documentsDownloadList.projectDocuments" />
+      </Heading>
+
+      <Flex flexDir="column">
+        {documentUrls.map((documentUrl) => (
+          <Flex
+            justifyContent="space-between"
+            alignItems="center"
+            mt="6"
+            key={documentUrl.text}
+          >
+            <Flex alignItems="center">
+              <Center
+                w="8"
+                h="8"
+                borderRadius="full"
+                borderWidth="1px"
+                borderColor="grey.200"
+              >
+                <FilePdf />
+              </Center>
+
+              <Spacer width="4" />
+
+              <Flex flexDir="column">
+                <Text size="smMonoNormal">PDF</Text>
+                <Text size="mdLowBold" color="black" textAlign="left">
+                  {documentUrl.text}
+                </Text>
+              </Flex>
+            </Flex>
+
+            <Spacer width="32" />
+
+            <IconButton
+              variant="outline"
+              aria-label={formatMessage({
+                id: 'features.portfolio.documentsDownloadList.downloadDocument',
+              })}
+              icon={<DownloadSimple />}
+              as={Link}
+              href={documentUrl.url}
+              size="sm"
+            />
+          </Flex>
+        ))}
+      </Flex>
+    </Container>
+  );
+};

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

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

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

@@ -0,0 +1,6 @@
+export default {
+  'features.portfolio.documentsDownloadList.projectDocuments':
+    'Projektdokumente',
+  'features.portfolio.documentsDownloadList.downloadDocument':
+    'Dokument herunterladen',
+};

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

@@ -0,0 +1,6 @@
+export default {
+  'features.portfolio.documentsDownloadList.projectDocuments':
+    'Project documents',
+  'features.portfolio.documentsDownloadList.downloadDocument':
+    'Download document',
+};

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

@@ -0,0 +1,81 @@
+import { render, screen } from '@/test/testUtils';
+import portfolioProjectMock from '@/test/mocks/portfolioProjectMock';
+import ProjectInfo from '.';
+import { ProjectInfoProps } from './ProjectInfo';
+
+const defaultProps: ProjectInfoProps = {
+  project: portfolioProjectMock,
+  subtitles: {
+    areaSubtitle: 'Area subtitle',
+    locationSubtitle: 'Location subtitle',
+    startSubtitle: 'Start subtitle',
+    timeSpanSubtitle: 'Time span subtitle',
+    projectTypeSubtitle: 'Project type subtitle',
+    projectDeveloperSubtitle: 'Project developer subtitle',
+    verificationStandardSubtitle: 'Verification standard subtitle',
+    forecastedAmountSubtitle: 'Forecasted amount subtitle',
+    riskBufferSubtitle: 'Risk buffer subtitle',
+    buyCreditsSubtitle: 'Buy credits subtitle',
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<ProjectInfo {...combinedProps} />);
+};
+
+describe('The ProjectInfo component', () => {
+  it('renders an existing slice without errors', () => {
+    setup();
+
+    expect(screen.getByText('Project Area')).toBeInTheDocument();
+    expect(screen.getByText('Location')).toBeInTheDocument();
+    expect(screen.getByText('Project Start Date')).toBeInTheDocument();
+    expect(screen.getByText('Project Time Span')).toBeInTheDocument();
+    expect(screen.getByText('Project Type')).toBeInTheDocument();
+    expect(screen.getByText('Project Developer')).toBeInTheDocument();
+    expect(screen.getByText('Verification Standard')).toBeInTheDocument();
+    expect(screen.getByText('Project Volume')).toBeInTheDocument();
+    expect(screen.getByText('Risk Buffer Share')).toBeInTheDocument();
+
+    expect(screen.getByText('Area subtitle')).toBeInTheDocument();
+    expect(screen.getByText('Location subtitle')).toBeInTheDocument();
+    expect(screen.getByText('Start subtitle')).toBeInTheDocument();
+    expect(screen.getByText('Time span subtitle')).toBeInTheDocument();
+    expect(screen.getByText('Project type subtitle')).toBeInTheDocument();
+    expect(screen.getByText('Project developer subtitle')).toBeInTheDocument();
+    expect(
+      screen.getByText('Verification standard subtitle')
+    ).toBeInTheDocument();
+    expect(screen.getByText('Forecasted amount subtitle')).toBeInTheDocument();
+    expect(screen.getByText('Risk buffer subtitle')).toBeInTheDocument();
+  });
+
+  it('counts the time span when they are defined in slice', () => {
+    setup({
+      ...defaultProps,
+      project: {
+        ...defaultProps.project,
+        start: new Date(2020, 1, 1),
+        end: new Date(2021, 0, 1),
+      },
+    });
+
+    expect(screen.getByText('Project Time Span')).toBeInTheDocument();
+    expect(screen.getByText('1 year')).toBeInTheDocument();
+  });
+
+  it('displays the issuer of the project if it exists', () => {
+    setup({
+      project: {
+        ...portfolioProjectMock,
+        defaultIssuer: { name: 'Issuer name', logoUrl: 'https://logo-url.com' },
+      },
+    });
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'src',
+      '/_next/image?url=https%3A%2F%2Flogo-url.com&w=3840&q=75'
+    );
+  });
+});

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

@@ -0,0 +1,252 @@
+import {
+  Box,
+  Container,
+  Divider,
+  Flex,
+  Heading,
+  LabelTextPair,
+  SimpleGrid,
+  Spacer,
+} from 'boemly';
+import { FormattedMessage, useIntl } from 'react-intl';
+import Image from 'next/image';
+import convertAreaM2ToHa from '@/utils/convertAreaM2ToHa';
+import convertCo2AmountKgToTons from '@/utils/convertCo2AmountKgToTons';
+import CreditsAvailableBadge from '@/components/CreditsAvailableBadge';
+import PortfolioProject from '@/models/PortfolioProject';
+import {
+  FORMAT_AS_HECTARE_CONFIG,
+  FORMAT_AS_PERCENT_CONFIG,
+} from '@/constants/formatter';
+import getTimeSpanInYears from '@/utils/getTimeSpanInYears';
+
+export interface ProjectInfoProps {
+  project: PortfolioProject;
+  subtitles: {
+    areaSubtitle?: string;
+    locationSubtitle?: string;
+    startSubtitle?: string;
+    timeSpanSubtitle?: string;
+    projectTypeSubtitle?: string;
+    projectDeveloperSubtitle?: string;
+    verificationStandardSubtitle?: string;
+    forecastedAmountSubtitle?: string;
+    riskBufferSubtitle?: string;
+    buyCreditsSubtitle?: string;
+  };
+}
+
+export const ProjectInfo: React.FC<ProjectInfoProps> = ({
+  project,
+  subtitles,
+}: ProjectInfoProps) => {
+  const { formatMessage, formatNumber, formatDate } = useIntl();
+
+  return (
+    <Container p="2" width="full">
+      <Heading size="xl" textAlign="left">
+        <FormattedMessage id="features.projectInfo.projectInfo.value" />
+      </Heading>
+
+      <Spacer height="8" />
+
+      <SimpleGrid
+        columns={[1, null, null, 2]}
+        gap="8"
+        spacingX="10"
+        spacingY="8"
+      >
+        {project.area && (
+          <Box>
+            <LabelTextPair
+              label={formatMessage({
+                id: 'features.projectInfo.properties.area',
+              })}
+              text={formatNumber(
+                convertAreaM2ToHa(project.area.toString()),
+                FORMAT_AS_HECTARE_CONFIG
+              )}
+              caption={subtitles.areaSubtitle}
+            />
+          </Box>
+        )}
+
+        {project.location && (
+          <Box>
+            <LabelTextPair
+              label={formatMessage({
+                id: 'features.projectInfo.properties.location',
+              })}
+              text={project.location}
+              caption={subtitles.locationSubtitle}
+            />
+          </Box>
+        )}
+
+        {project.start && (
+          <Box>
+            <LabelTextPair
+              label={formatMessage({
+                id: 'features.projectInfo.properties.start',
+              })}
+              text={formatDate(project.start, {
+                year: 'numeric',
+                month: 'long',
+              })}
+              caption={subtitles.startSubtitle}
+            />
+          </Box>
+        )}
+
+        {project.start && project.end && (
+          <Box>
+            <LabelTextPair
+              label={formatMessage({
+                id: 'features.projectInfo.properties.timeSpan',
+              })}
+              text={formatMessage(
+                {
+                  id: 'features.projectInfo.properties.year',
+                },
+                {
+                  years: getTimeSpanInYears(
+                    new Date(project.start),
+                    new Date(project.end)
+                  ),
+                }
+              )}
+              caption={subtitles.timeSpanSubtitle}
+            />
+          </Box>
+        )}
+      </SimpleGrid>
+
+      {project.projectType ||
+      project.projectDeveloper ||
+      project.verificationStandard ? (
+        <>
+          <Spacer height="6" />
+          <Divider />
+          <Spacer height="6" />
+        </>
+      ) : (
+        <></>
+      )}
+      <SimpleGrid columns={[1, null, null, 2]} spacingX="10" spacingY="8">
+        {project.projectType && (
+          <Box>
+            <LabelTextPair
+              label={formatMessage({
+                id: 'features.projectInfo.properties.projectType',
+              })}
+              text={project.projectType.title}
+              caption={subtitles.projectTypeSubtitle}
+            />
+          </Box>
+        )}
+        {project.projectDeveloper && (
+          <Box>
+            <LabelTextPair
+              label={formatMessage({
+                id: 'features.projectInfo.properties.projectDeveloper',
+              })}
+              text={project.projectDeveloper.name}
+              caption={subtitles.projectDeveloperSubtitle}
+            />
+          </Box>
+        )}
+      </SimpleGrid>
+
+      {project.verificationStandard ? (
+        <>
+          {project.projectType || project.projectDeveloper ? (
+            <Spacer height="6" />
+          ) : (
+            <></>
+          )}
+          <Flex justifyContent="space-between" alignItems="center">
+            <Box>
+              <LabelTextPair
+                label={formatMessage({
+                  id: 'features.projectInfo.properties.verificationStandard.label',
+                })}
+                text={formatMessage({
+                  id: `features.projectInfo.properties.verificationStandard.value.${project.verificationStandard.id}`,
+                  defaultMessage: project.verificationStandard.id,
+                })}
+                caption={subtitles.verificationStandardSubtitle}
+              />
+            </Box>
+
+            {project.defaultIssuer && (
+              <Box position="relative" width="14" height="8">
+                <Image
+                  src={project.defaultIssuer.logoUrl}
+                  alt={`${project.defaultIssuer.name} logo`}
+                  fill
+                  style={{ objectFit: 'contain' }}
+                />
+              </Box>
+            )}
+          </Flex>
+        </>
+      ) : (
+        <></>
+      )}
+
+      {project.forecastedAmountYearly && project.riskBuffer ? (
+        <>
+          <Spacer height="8" />
+          <Divider />
+          <Spacer height="8" />
+          <SimpleGrid columns={[1, null, null, 2]} spacingX="10" spacingY="8">
+            <Box>
+              <LabelTextPair
+                label={formatMessage({
+                  id: 'features.projectInfo.properties.forecastedAmountYear.label',
+                })}
+                text={formatMessage(
+                  {
+                    id: 'unit.formatter.tonsCo2PerYear',
+                  },
+                  {
+                    number: formatNumber(
+                      convertCo2AmountKgToTons(
+                        project.forecastedAmountYearly.toString()
+                      ),
+                      { maximumFractionDigits: 0 }
+                    ),
+                  }
+                )}
+                caption={subtitles.forecastedAmountSubtitle}
+              />
+            </Box>
+
+            <Box>
+              <LabelTextPair
+                label={formatMessage({
+                  id: 'features.projectInfo.properties.riskBuffer',
+                })}
+                text={formatNumber(
+                  project.riskBuffer / 100,
+                  FORMAT_AS_PERCENT_CONFIG
+                )}
+                caption={subtitles.riskBufferSubtitle}
+              />
+            </Box>
+          </SimpleGrid>
+        </>
+      ) : (
+        <></>
+      )}
+
+      {project.creditsAvailable ? (
+        <Box mt="2">
+          <CreditsAvailableBadge status={project.creditsAvailable} />
+        </Box>
+      ) : (
+        <></>
+      )}
+    </Container>
+  );
+};

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

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

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

@@ -0,0 +1,19 @@
+export default {
+  'features.projectInfo.projectInfo.value': 'Projekt Infos',
+  'features.projectInfo.properties.area': 'Projekt Fläche',
+  'features.projectInfo.properties.location': 'Standort',
+  'features.projectInfo.properties.start': 'Projekt Start Datum',
+  'features.projectInfo.properties.timeSpan': 'Projekt Zeitraum',
+  'features.projectInfo.properties.projectType': 'Projekt Typ',
+  'features.projectInfo.properties.projectDeveloper': 'Projekt Entwickler',
+  'features.projectInfo.properties.verificationStandard.label':
+    'Verifizierungsstandard',
+  'features.projectInfo.properties.verificationStandard.value.SilvaconsultFCSISO14':
+    'SILVACONSULT® Forest Carbon Standard, ISO 14064-2',
+  'features.projectInfo.properties.forecastedAmountYear.label':
+    'Projektvolumen',
+  'features.projectInfo.properties.riskBuffer': 'Anteil Risikopuffer',
+
+  'features.projectInfo.properties.year':
+    '{years} {years, plural, one {Jahr} other {Jahre} }',
+};

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

@@ -0,0 +1,19 @@
+export default {
+  'features.projectInfo.projectInfo.value': 'Project Infos',
+  'features.projectInfo.properties.area': 'Project Area',
+  'features.projectInfo.properties.location': 'Location',
+  'features.projectInfo.properties.start': 'Project Start Date',
+  'features.projectInfo.properties.timeSpan': 'Project Time Span',
+  'features.projectInfo.properties.projectType': 'Project Type',
+  'features.projectInfo.properties.projectDeveloper': 'Project Developer',
+  'features.projectInfo.properties.verificationStandard.label':
+    'Verification Standard',
+  'features.projectInfo.properties.verificationStandard.value.SilvaconsultFCSISO14':
+    'SILVACONSULT® Forest Carbon Standard, ISO 14064-2',
+  'features.projectInfo.properties.forecastedAmountYear.label':
+    'Project Volume',
+  'features.projectInfo.properties.riskBuffer': 'Risk Buffer Share',
+
+  'features.projectInfo.properties.year':
+    '{years} {years, plural, one {year} other {years} }',
+};