@treely/strapi-slices 7.17.0 → 8.0.0

package/src/slices/MapHero/MapHero.stories.tsx

@@ -1,113 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import {
-  storybookStrapiGradientBottomUpMock,
-  storybookStrapiMapMock,
-} from '../../test/storybookMocks/storybookStrapiMedia';
-import MapHero from '.';
-
-export default {
-  title: 'slices/MapHero',
-  component: MapHero,
-} as Meta<typeof MapHero>;
-
-const Template: StoryFn<typeof MapHero> = (args) => <MapHero {...args} />;
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    title: 'Title',
-    map: { id: 1, alt: 'Map alt text', img: { data: storybookStrapiMapMock } },
-    mobileMap: {
-      id: 1,
-      alt: 'Mobile map alt text',
-      img: { data: storybookStrapiMapMock },
-    },
-  },
-};
-
-export const WithTagline = Template.bind({});
-WithTagline.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    map: { id: 1, alt: 'Map alt text', img: { data: storybookStrapiMapMock } },
-    mobileMap: {
-      id: 1,
-      alt: 'Mobile map alt text',
-      img: { data: storybookStrapiMapMock },
-    },
-  },
-};
-
-export const WithTaglineAndSubTitle = Template.bind({});
-WithTaglineAndSubTitle.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Text',
-    map: { id: 1, alt: 'Map alt text', img: { data: storybookStrapiMapMock } },
-    mobileMap: {
-      id: 1,
-      alt: 'Mobile map alt text',
-      img: { data: storybookStrapiMapMock },
-    },
-  },
-};
-
-export const WithButton = Template.bind({});
-WithButton.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Text',
-    buttons: [{ id: 1, text: 'Button', url: 'https://tree.ly' }],
-    map: { id: 1, alt: 'Map alt text', img: { data: storybookStrapiMapMock } },
-    mobileMap: {
-      id: 1,
-      alt: 'Mobile map alt text',
-      img: { data: storybookStrapiMapMock },
-    },
-  },
-};
-
-export const WithTwoButtons = Template.bind({});
-WithTwoButtons.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Text',
-    buttons: [
-      { id: 1, text: 'Button 1', url: 'https://tree.ly' },
-      { id: 2, text: 'Button 2', url: 'https://tree.ly' },
-    ],
-    map: { id: 1, alt: 'Map alt text', img: { data: storybookStrapiMapMock } },
-    mobileMap: {
-      id: 1,
-      alt: 'Mobile map alt text',
-      img: { data: storybookStrapiMapMock },
-    },
-  },
-};
-
-export const WithShape = Template.bind({});
-WithShape.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Text',
-    buttons: [{ id: 1, text: 'Button', url: 'https://tree.ly' }],
-    shape: {
-      id: 1,
-      alt: 'Shape',
-      img: { data: storybookStrapiGradientBottomUpMock },
-    },
-    map: { id: 1, alt: 'Map alt text', img: { data: storybookStrapiMapMock } },
-    mobileMap: {
-      id: 1,
-      alt: 'Mobile map alt text',
-      img: { data: storybookStrapiMapMock },
-    },
-  },
-};

package/src/slices/MapHero/MapHero.test.tsx

@@ -1,86 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import MapHero from '.';
-import { MapHeroProps } from './MapHero';
-
-const defaultProps: MapHeroProps = {
-  slice: {
-    title: 'Title',
-    map: {
-      id: 1,
-      alt: 'Map alt text',
-      img: { data: strapiMediaMock },
-    },
-    mobileMap: {
-      id: 1,
-      alt: 'Map alt text',
-      img: { data: strapiMediaMock },
-    },
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<MapHero {...combinedProps} />);
-};
-
-describe('The MapHero component', () => {
-  it('displays the section header', () => {
-    setup();
-
-    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
-  });
-
-  it('displays a map', () => {
-    setup();
-
-    expect(screen.getByRole('img')).toHaveAttribute(
-      'alt',
-      defaultProps.slice.map.alt
-    );
-  });
-
-  it('displays no link if there is no button in the slice', async () => {
-    setup();
-
-    expect(screen.queryByRole('link')).not.toBeInTheDocument();
-  });
-
-  it('displays a link if there is a button in the slice', () => {
-    setup({
-      slice: { ...defaultProps.slice, buttons: [{ url: 'url', text: 'Link' }] },
-    });
-
-    expect(screen.getByRole('link')).toBeInTheDocument();
-    expect(screen.getByText('Link')).toBeInTheDocument();
-  });
-
-  it('displays two links if there are two buttons in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        buttons: [
-          { url: 'url', text: 'Link-1' },
-          { url: 'url', text: 'Link-2' },
-        ],
-      },
-    });
-
-    expect(screen.getAllByRole('link')).toHaveLength(2);
-    expect(screen.getByText('Link-1')).toBeInTheDocument();
-    expect(screen.getByText('Link-2')).toBeInTheDocument();
-  });
-
-  it('displays a shape if there is a shape in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        textAlign: 'left',
-        shape: { id: 1, img: { data: strapiMediaMock }, alt: 'Shape alt text' },
-      },
-    });
-
-    expect(screen.getAllByRole('img').length).toBe(2);
-  });
-});

package/src/slices/MapHero/MapHero.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import { DefaultSectionHeader, Flex, useMediaQuery, Wrapper } from 'boemly';
-import Image from 'next/image';
-import { BREAKPOINT_LG_QUERY } from '../../constants/breakpoints';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import StrapiLinkButton from '../../components/StrapiLinkButton';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import StrapiLink from '../../models/strapi/StrapiLink';
-import {
-  MapHeroContainer,
-  MapHeroTextContainer,
-  ShapeContainer,
-  MapContainer,
-  MapGradient,
-} from './styles';
-
-export interface MapHeroProps {
-  slice: {
-    tagline?: string;
-    title: string;
-    subTitle?: string;
-    buttons?: StrapiLink[];
-    shape?: StrapiImage;
-    map: StrapiImage;
-    mobileMap: StrapiImage;
-  };
-}
-
-export const MapHero: React.FC<MapHeroProps> = ({ slice }: MapHeroProps) => {
-  const [belowBreakpoint] = useMediaQuery(BREAKPOINT_LG_QUERY);
-
-  return (
-    <MapHeroContainer maxWidth="full">
-      {slice.shape && (
-        <ShapeContainer>
-          <Image
-            src={strapiMediaUrl(slice.shape.img, 'medium')}
-            alt={slice.shape.alt}
-            fill
-            style={{ objectFit: slice.shape.objectFit || 'cover' }}
-          />
-        </ShapeContainer>
-      )}
-      <MapHeroTextContainer>
-        <Wrapper>
-          <>
-            <DefaultSectionHeader
-              isHero
-              tagline={slice.tagline}
-              title={slice.title}
-              text={slice.subTitle}
-              titleProps={{ maxW: ['100%', null, null, null, '60%'] }}
-              textProps={{ maxW: ['100%', null, null, null, '55%'] }}
-            />
-            {slice.buttons && slice.buttons.length > 0 && (
-              <Flex mt="10" flexDir="row" gap="5">
-                <StrapiLinkButton
-                  link={slice.buttons[0]}
-                  size="xl"
-                  component="MapHero"
-                />
-                {slice.buttons.length === 2 && (
-                  <StrapiLinkButton
-                    link={slice.buttons[1]}
-                    variant="outline"
-                    size="xl"
-                    component="MapHero"
-                  />
-                )}
-              </Flex>
-            )}
-          </>
-        </Wrapper>
-      </MapHeroTextContainer>
-      <MapContainer>
-        {belowBreakpoint ? (
-          <Image
-            src={strapiMediaUrl(slice.mobileMap.img, 'xLarge')}
-            alt={slice.mobileMap.alt}
-            fill
-            style={{ objectFit: slice.mobileMap.objectFit || 'contain' }}
-          />
-        ) : (
-          <Image
-            src={strapiMediaUrl(slice.map.img, 'xLarge')}
-            alt={slice.map.alt}
-            fill
-            style={{ objectFit: slice.map.objectFit || 'cover' }}
-          />
-        )}
-        <MapGradient />
-      </MapContainer>
-    </MapHeroContainer>
-  );
-};

package/src/slices/MapHero/index.ts

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

package/src/slices/MapHero/styles.ts

@@ -1,106 +0,0 @@
-import styled from '@emotion/styled';
-import { BREAKPOINT_LG } from '../../constants/breakpoints';
-import { Box } from 'boemly';
-
-export const MapHeroContainer = styled(Box)`
-  position: relative;
-  width: 100vw;
-  height: var(--default-hero-height);
-  min-height: var(--boemly-sizes-3xl);
-  background-color: var(--boemly-colors-primary-50);
-  overflow: hidden;
-  z-index: var(--boemly-zIndices-base);
-
-  @media screen and (max-width: ${BREAKPOINT_LG}) {
-    height: auto;
-  }
-`;
-
-export const MapHeroTextContainer = styled(Box)`
-  position: absolute;
-  width: 100vw;
-  top: 56%;
-  left: 0;
-  transform: translateY(-50%);
-  z-index: var(--boemly-zIndices-aboveBase);
-
-  @media screen and (max-width: ${BREAKPOINT_LG}) {
-    position: relative;
-    transform: unset;
-
-    padding-top: var(--boemly-space-32);
-  }
-`;
-
-export const ShapeContainer = styled(Box)`
-  position: absolute;
-  bottom: calc(var(--boemly-space-8) * -1);
-  left: 0;
-
-  width: var(--boemly-sizes-sm);
-  height: var(--boemly-sizes-sm);
-
-  border-top-right-radius: var(--boemly-radii-full);
-
-  & span,
-  div {
-    border-top-right-radius: var(--boemly-radii-full);
-  }
-
-  @media screen and (max-width: ${BREAKPOINT_LG}) {
-    display: none;
-  }
-`;
-
-export const MapContainer = styled(Box)`
-  position: absolute;
-
-  width: 50%;
-  height: 100%;
-
-  right: 0;
-  top: 0;
-
-  & img {
-    object-fit: cover !important;
-  }
-
-  @media screen and (max-width: ${BREAKPOINT_LG}) {
-    width: 100%;
-    height: var(--boemly-sizes-4xl);
-    position: relative;
-    margin-top: calc(var(--boemly-space-72) * -1);
-    background-color: var(--boemly-colors-white);
-
-    & img {
-      object-fit: contain !important;
-    }
-  }
-`;
-
-export const MapGradient = styled(Box)`
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-
-  background: linear-gradient(
-    90deg,
-    var(--boemly-colors-primary-50) 0%,
-    var(--boemly-colors-primary-50) 10%,
-    rgba(243, 246, 245, 0.6) 28%,
-    rgba(243, 246, 245, 0) 40%,
-    rgba(243, 246, 245, 0) 100%
-  );
-
-  @media screen and (max-width: ${BREAKPOINT_LG}) {
-    background: linear-gradient(
-      180deg,
-      var(--boemly-colors-primary-50) 0%,
-      var(--boemly-colors-primary-50) 36%,
-      rgba(243, 246, 245, 0.12) 46%,
-      rgba(243, 246, 245, 0) 100%
-    );
-  }
-`;

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

@@ -1,146 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
-import { storybookStrapiAvatarMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import ProjectFacts from '.';
-
-export default {
-  title: 'slices/ProjectFacts',
-  component: ProjectFacts,
-} as Meta<typeof ProjectFacts>;
-
-const Template: StoryFn<typeof ProjectFacts> = (args) => (
-  <ProjectFacts {...args} />
-);
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  project: fpmProjectMock,
-  slice: {
-    projectId: fpmProjectMock.id,
-  },
-};
-
-export const WithDocuments = Template.bind({});
-WithDocuments.args = {
-  project: fpmProjectMock,
-  slice: {
-    projectId: fpmProjectMock.id,
-
-    documentUrls: [
-      { id: 1, text: 'Document 1', url: 'https://example.org' },
-      { id: 2, text: 'Document 2', url: 'https://example.org' },
-      { id: 3, text: 'Document 3', url: 'https://example.org' },
-    ],
-  },
-};
-
-export const WithCheckout = Template.bind({});
-WithCheckout.args = {
-  project: fpmProjectMock,
-  slice: {
-    projectId: fpmProjectMock.id,
-    batchId: 'mock-id',
-    currency: 'EUR',
-    pricePerKg: 0.08,
-    checkoutText:
-      'With your support you help Example Project with sustainable forestry.',
-    initialContributionValue: 80,
-  },
-};
-
-export const FullProps = Template.bind({});
-FullProps.args = {
-  project: fpmProjectMock,
-  slice: {
-    projectId: fpmProjectMock.id,
-
-    batchId: 'mock-id',
-    currency: 'EUR',
-    pricePerKg: 0.08,
-    checkoutText:
-      'With your support you help Example Project with sustainable forestry.',
-    initialContributionValue: 80,
-
-    documentUrls: [
-      { id: 1, text: 'Document 1', url: 'https://example.org' },
-      { id: 2, text: 'Document 2', url: 'https://example.org' },
-      { id: 3, text: 'Document 3', url: 'https://example.org' },
-    ],
-
-    buyCreditsSubtitle: 'Buy Credits Subtitle',
-    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',
-
-    customTitle: 'Looking to buy more than 10.000 tCO₂?',
-    customSubtitle:
-      'For enterprise-customers we offer custom solutions. Feel free to contact us.',
-    customButton: {
-      id: 1,
-      text: 'Contact our Sales Team',
-      url: 'https://example.org',
-    },
-    taxInPercent: 20,
-  },
-};
-
-export const WithContact = Template.bind({});
-WithContact.args = {
-  project: fpmProjectMock,
-  slice: {
-    projectId: fpmProjectMock.id,
-
-    contactTitle: 'Contact Title',
-    contactText: 'Contact Text',
-    contactButton: {
-      id: 1,
-      text: 'Contact our Sales Team',
-      url: 'https://example.org',
-    },
-    contactAvatar: {
-      id: 1,
-      alt: 'Avatar image alt text',
-      img: {
-        data: storybookStrapiAvatarMock,
-      },
-    },
-  },
-};
-
-export const WithDocumentsAndContact = Template.bind({});
-WithDocumentsAndContact.args = {
-  project: fpmProjectMock,
-  slice: {
-    projectId: fpmProjectMock.id,
-
-    documentUrls: [
-      { id: 1, text: 'Document 1', url: 'https://example.org' },
-      { id: 2, text: 'Document 2', url: 'https://example.org' },
-      { id: 3, text: 'Document 3', url: 'https://example.org' },
-    ],
-
-    contactTitle: 'Contact Title',
-    contactText: 'Contact Text',
-    contactButton: {
-      id: 1,
-      text: 'Contact our Sales Team',
-      url: 'https://example.org',
-    },
-    contactAvatar: {
-      id: 1,
-      alt: 'Avatar image alt text',
-      img: {
-        data: storybookStrapiAvatarMock,
-      },
-    },
-  },
-};

package/src/slices/ProjectFacts/ProjectFacts.test.tsx

@@ -1,83 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '../../test/testUtils';
-import ProjectFacts from '.';
-import { ProjectFactsProps } from './ProjectFacts';
-import portfolioProjectMock from '../../test/mocks/portfolioProjectMock';
-import getFpmProjectById from '../../integrations/strapi/getFpmProjectById';
-
-// Mock the getFpmProjectById function
-jest.mock('../../integrations/strapi/getFpmProjectById');
-const mockGetFpmProjectById = getFpmProjectById as jest.MockedFunction<
-  typeof getFpmProjectById
->;
-
-const defaultProps: ProjectFactsProps = {
-  slice: {
-    projectId: 'project-id-1',
-  },
-};
-
-const setup = (props: Partial<ProjectFactsProps> = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<ProjectFacts {...combinedProps} />);
-};
-
-describe('The ProjectFacts slice', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('displays error message if there is no project', () => {
-    setup();
-
-    expect(
-      screen.getByText(
-        'Invalid configuration, check if a project this id exists in the FPM'
-      )
-    ).toBeInTheDocument();
-  });
-
-  it('displays loading state when fetching project data', () => {
-    // Mock a delayed response to test loading state
-    mockGetFpmProjectById.mockImplementation(
-      () =>
-        new Promise((resolve) =>
-          setTimeout(() => resolve(portfolioProjectMock), 100)
-        )
-    );
-
-    setup({ project: portfolioProjectMock });
-
-    expect(screen.getByText('Loading project data...')).toBeInTheDocument();
-  });
-
-  it('displays the enhanced project info with averageSellableAmountPerYear from FPM data', async () => {
-    // Create enhanced FPM data with different averageSellableAmountPerYear
-    const enhancedFpmData = {
-      ...portfolioProjectMock,
-      averageSellableAmountPerYear: 1200000, // Value from FPM findOne project
-    };
-
-    mockGetFpmProjectById.mockResolvedValue(enhancedFpmData);
-
-    setup({ project: portfolioProjectMock });
-
-    await waitFor(() => {
-      expect(mockGetFpmProjectById).toHaveBeenCalledWith(
-        portfolioProjectMock.id
-      );
-    });
-
-    await waitFor(() => {
-      expect(mockGetFpmProjectById).toHaveBeenCalledTimes(1);
-    });
-
-    await waitFor(() => {
-      expect(
-        screen.queryByText('Loading project data...')
-      ).not.toBeInTheDocument();
-
-      expect(screen.getByText('1,200 tCO₂/year')).toBeInTheDocument();
-    });
-  });
-});