@treely/strapi-slices 7.17.0 → 8.0.0

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

@@ -1,52 +0,0 @@
-import React from 'react';
-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

@@ -1,80 +0,0 @@
-import React from 'react';
-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"
-          component="Contact"
-        />
-      ) : (
-        <></>
-      )}
-    </Flex>
-  </Container>
-);

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

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

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

@@ -1,50 +0,0 @@
-import React from 'react';
-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

@@ -1,79 +0,0 @@
-import React, { useContext } from 'react';
-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 { IntlContext } from '../../ContextProvider';
-
-export interface DocumentsDownloadListProps {
-  documentUrls: StrapiLink[];
-}
-
-export const DocumentsDownloadList: React.FC<DocumentsDownloadListProps> = ({
-  documentUrls,
-}: DocumentsDownloadListProps) => {
-  const { formatMessage } = useContext(IntlContext);
-
-  return (
-    <Container p="2">
-      <Heading size="xl" textAlign="left">
-        {formatMessage({
-          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

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

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

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

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

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

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

@@ -1,111 +0,0 @@
-import React from 'react';
-import {
-  render,
-  screen,
-  userEvent,
-  waitForElementToBeRemoved,
-} from '../../../test/testUtils';
-import portfolioProjectMock from '../../../test/mocks/portfolioProjectMock';
-import ProjectInfo from '.';
-import { ProjectInfoProps } from './ProjectInfo';
-import messagesEn from './messages.en';
-
-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',
-    averageSellableAmountPerYearSubtitle:
-      'Average sellable amount per year 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('Average sellable amount per year 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('sets the tooltip when hovered over the average sellable amount per year subtitle', async () => {
-    setup({
-      ...defaultProps,
-    });
-
-    const trigger = screen.getByText(
-      'Average sellable amount per year subtitle'
-    );
-    await userEvent.hover(trigger);
-
-    const tooltip = await screen.findByRole('tooltip');
-    expect(tooltip).toHaveTextContent(
-      messagesEn['features.projectInfo.properties.projectVolume.toolTip']
-    );
-
-    await userEvent.unhover(trigger);
-    await waitForElementToBeRemoved(() => screen.queryByRole('tooltip'));
-    expect(screen.queryByRole('tooltip')).not.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

@@ -1,269 +0,0 @@
-import React, { useContext } from 'react';
-import {
-  Box,
-  Container,
-  Divider,
-  Flex,
-  Heading,
-  LabelTextPair,
-  SimpleGrid,
-  Spacer,
-  Tooltip,
-} from 'boemly';
-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';
-import { IntlContext } from '../../ContextProvider';
-
-export interface ProjectInfoProps {
-  project: PortfolioProject;
-  subtitles: {
-    areaSubtitle?: string;
-    locationSubtitle?: string;
-    startSubtitle?: string;
-    timeSpanSubtitle?: string;
-    projectTypeSubtitle?: string;
-    projectDeveloperSubtitle?: string;
-    verificationStandardSubtitle?: string;
-    averageSellableAmountPerYearSubtitle?: string;
-    riskBufferSubtitle?: string;
-    buyCreditsSubtitle?: string;
-  };
-}
-
-export const ProjectInfo: React.FC<ProjectInfoProps> = ({
-  project,
-  subtitles,
-}: ProjectInfoProps) => {
-  const { formatMessage, formatNumber, formatDate } = useContext(IntlContext);
-  return (
-    <Container p="2" width="full">
-      <Heading size="xl" textAlign="left">
-        {formatMessage({ 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.averageSellableAmountPerYear &&
-        project.averageSellableAmountPerYear > 0) ||
-      project.riskBuffer ? (
-        <>
-          <Spacer height="8" />
-          <Divider />
-          <Spacer height="8" />
-        </>
-      ) : (
-        <></>
-      )}
-      <SimpleGrid columns={[1, null, null, 2]} spacingX="10" spacingY="8">
-        {project.averageSellableAmountPerYear > 0 ? (
-          <Tooltip
-            label={formatMessage({
-              id: 'features.projectInfo.properties.projectVolume.toolTip',
-            })}
-          >
-            <Box>
-              <LabelTextPair
-                label={formatMessage({
-                  id: 'features.projectInfo.properties.projectVolume.label',
-                })}
-                text={formatMessage(
-                  {
-                    id: 'unit.formatter.tonsCo2PerYear',
-                  },
-                  {
-                    number: formatNumber(
-                      convertCo2AmountKgToTons(
-                        project.averageSellableAmountPerYear.toString()
-                      ),
-                      { maximumFractionDigits: 0 }
-                    ),
-                  }
-                )}
-                caption={subtitles.averageSellableAmountPerYearSubtitle}
-              />
-            </Box>
-          </Tooltip>
-        ) : (
-          <Box>
-            <CreditsAvailableBadge status={project.creditAvailability} />
-          </Box>
-        )}
-
-        {project.riskBuffer && (
-          <Box>
-            <LabelTextPair
-              label={formatMessage({
-                id: 'features.projectInfo.properties.riskBuffer',
-              })}
-              text={formatNumber(
-                project.riskBuffer / 100,
-                FORMAT_AS_PERCENT_CONFIG
-              )}
-              caption={subtitles.riskBufferSubtitle}
-            />
-          </Box>
-        )}
-      </SimpleGrid>
-
-      {project.averageSellableAmountPerYear > 0 ? (
-        <Box mt="2">
-          <CreditsAvailableBadge status={project.creditAvailability} />
-        </Box>
-      ) : (
-        <></>
-      )}
-    </Container>
-  );
-};

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

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