@treely/strapi-slices 7.17.0 → 8.0.0

package/src/slices/ShopCheckout/ShopCheckout.tsx

@@ -1,269 +0,0 @@
-import React, { useContext, useCallback } from 'react';
-import {
-  Badge,
-  BoemlyFormControl,
-  Box,
-  Button,
-  Container,
-  DefaultSectionContainer,
-  DefaultSectionHeader,
-  Divider,
-  Flex,
-  InputRightAddon,
-  LabelNumberPair,
-  RichText,
-  SimpleGrid,
-  Spacer,
-  useToken,
-  Wrapper,
-} from 'boemly';
-import { Field, FieldProps, Form, Formik, FormikProps } from 'formik';
-import { FPM_API_URI } from '../../constants/api';
-import CheckoutForm from '../../models/forms/CheckoutForm';
-import {
-  MAXIMUM_CONTRIBUTION_VALUE_IN_MONEY,
-  MINIMUM_CONTRIBUTION_VALUE_IN_MONEY,
-} from '../../constants/domain';
-import { IntlContext } from '../../components/ContextProvider';
-import { useRouter } from 'next/router';
-
-export interface ShopCheckoutProps {
-  slice: {
-    tagline?: string;
-    title: string;
-    text?: string;
-    badge?: string;
-    batchId: string;
-    pricePerKg: number;
-    couponId?: string;
-    initialContributionValue: number;
-    checkoutText: string;
-    currency: 'EUR' | 'CHF';
-    taxInPercent?: number;
-  };
-}
-
-export const ShopCheckout = ({ slice }: ShopCheckoutProps): JSX.Element => {
-  const [primary50] = useToken('colors', ['primary.50']);
-  const { formatMessage, formatNumber, locale } = useContext(IntlContext);
-  const { push } = useRouter();
-
-  const validateForm = useCallback(
-    (values: CheckoutForm) => {
-      const errors: Partial<{ contributionValue: string }> = {};
-
-      if (!values.contributionValue) {
-        errors.contributionValue = formatMessage({
-          id: 'sections.shopCheckout.contributionValue.validation.empty',
-        });
-      } else if (
-        values.contributionValue < MINIMUM_CONTRIBUTION_VALUE_IN_MONEY
-      ) {
-        errors.contributionValue = formatMessage({
-          id: `sections.shopCheckout.contributionValue.validation.tooLow.${slice.currency}`,
-        });
-      } else if (
-        values.contributionValue > MAXIMUM_CONTRIBUTION_VALUE_IN_MONEY
-      ) {
-        errors.contributionValue = formatMessage({
-          id: 'sections.shopCheckout.contributionValue.validation.tooHigh',
-        });
-      }
-
-      return errors;
-    },
-    [locale]
-  );
-
-  const onSubmit = ({ contributionValue }: CheckoutForm) => {
-    const checkoutURL = new URL(`${FPM_API_URI}/v1/webhooks/shop/checkout`);
-    const currentURL = new URL(window.location.href);
-
-    checkoutURL.searchParams.append('batchId', slice.batchId);
-
-    checkoutURL.searchParams.append(
-      'quantity',
-      Math.floor(contributionValue / slice.pricePerKg).toString()
-    );
-
-    checkoutURL.searchParams.append('cancelPath', currentURL.pathname);
-
-    if (slice.couponId)
-      checkoutURL.searchParams.append('couponId', slice.couponId);
-
-    push(checkoutURL.toString());
-  };
-
-  return (
-    <DefaultSectionContainer backgroundColor={primary50} title={slice.title}>
-      <Wrapper>
-        <Flex
-          flexDir={['column', null, null, null, 'row']}
-          justifyContent="space-between"
-          alignItems={['left', null, null, null, 'center']}
-        >
-          <Box marginRight={['0', null, null, null, '36']} flexShrink={2}>
-            <DefaultSectionHeader
-              tagline={slice.tagline}
-              title={slice.title}
-              text={slice.text}
-            />
-          </Box>
-          <Container maxWidth="md" padding="lg" shadow="lg">
-            {slice.badge ? (
-              <>
-                <Badge
-                  colorScheme="green"
-                  textTransform="none"
-                  whiteSpace="unset"
-                >
-                  {slice.badge}
-                </Badge>
-                <Spacer height="3" />
-              </>
-            ) : (
-              <></>
-            )}
-
-            <RichText
-              content={slice.checkoutText}
-              textProps={{ color: 'gray.500' }}
-            />
-
-            <Spacer height="6" />
-            <Divider />
-            <Spacer height="6" />
-
-            <LabelNumberPair
-              label={formatMessage({ id: 'sections.shopCheckout.intro.price' })}
-              number={`${formatNumber(slice.pricePerKg * 100, {
-                style: 'currency',
-                currency: slice.currency,
-              })}/${formatNumber(100, {
-                style: 'unit',
-                unit: 'kilogram',
-              })}  CO₂`}
-              caption={formatMessage({
-                id: 'sections.shopCheckout.summary.price.taxNotIncluded',
-              })}
-            />
-
-            <Spacer height="6" />
-            <Divider />
-            <Spacer height="6" />
-
-            <Formik
-              initialValues={{
-                contributionValue: slice.initialContributionValue,
-              }}
-              validate={validateForm}
-              onSubmit={onSubmit}
-            >
-              {({
-                errors,
-                touched,
-                handleSubmit,
-                values,
-              }: FormikProps<CheckoutForm>) => {
-                const summaryPrice =
-                  Math.floor(values.contributionValue / slice.pricePerKg) *
-                  slice.pricePerKg;
-
-                return (
-                  <Form onSubmit={handleSubmit}>
-                    <Box width="full">
-                      <Field name="contributionValue">
-                        {({ field }: FieldProps) => (
-                          <BoemlyFormControl
-                            id="contributionValue"
-                            size="md"
-                            inputProps={{ type: 'number', ...field }}
-                            label={formatMessage({
-                              id: `sections.shopCheckout.contributionValue.label.${slice.currency}`,
-                            })}
-                            rightAddonsOrElements={[
-                              <InputRightAddon key="1">
-                                {formatMessage({
-                                  id: `sections.shopCheckout.contributionValue.unit.${slice.currency}`,
-                                })}
-                              </InputRightAddon>,
-                            ]}
-                            isInvalid={
-                              !!errors.contributionValue &&
-                              touched.contributionValue
-                            }
-                            errorMessage={errors.contributionValue}
-                          />
-                        )}
-                      </Field>
-                    </Box>
-
-                    <Spacer height="6" />
-
-                    <SimpleGrid columns={2} gap="4">
-                      <LabelNumberPair
-                        label={formatMessage({
-                          id: 'sections.shopCheckout.summary.kg',
-                        })}
-                        number={`${formatNumber(
-                          Math.floor(
-                            values.contributionValue / slice.pricePerKg
-                          ),
-                          {
-                            style: 'unit',
-                            unit: 'kilogram',
-                            maximumFractionDigits: 0,
-                          }
-                        )} CO₂`}
-                      />
-                      <LabelNumberPair
-                        label={formatMessage({
-                          id: 'sections.shopCheckout.summary.price',
-                        })}
-                        number={formatNumber(summaryPrice, {
-                          style: 'currency',
-                          currency: slice.currency,
-                          minimumFractionDigits: 2,
-                          maximumFractionDigits: 2,
-                        })}
-                        caption={
-                          slice.taxInPercent &&
-                          slice.taxInPercent > 0 &&
-                          summaryPrice > 0
-                            ? formatMessage(
-                                {
-                                  id: 'sections.shopCheckout.summary.price.taxIncluded',
-                                },
-                                {
-                                  number: formatNumber(
-                                    summaryPrice +
-                                      summaryPrice * (slice.taxInPercent / 100),
-                                    {
-                                      style: 'currency',
-                                      currency: slice.currency,
-                                      minimumFractionDigits: 2,
-                                      maximumFractionDigits: 2,
-                                    }
-                                  ),
-                                }
-                              )
-                            : ''
-                        }
-                      />
-                    </SimpleGrid>
-
-                    <Spacer height="6" />
-
-                    <Button type="submit" width="full">
-                      {formatMessage({ id: 'sections.shopCheckout.submit' })}
-                    </Button>
-                  </Form>
-                );
-              }}
-            </Formik>
-          </Container>
-        </Flex>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/ShopCheckout/index.ts

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

package/src/slices/ShopCheckout/messages.de.ts

@@ -1,27 +0,0 @@
-const messagesDe = {
-  'sections.shopCheckout.intro.price': 'Preis',
-
-  'sections.shopCheckout.contributionValue.label.EUR':
-    'Geben sie einen Betrag in € ein',
-  'sections.shopCheckout.contributionValue.label.CHF':
-    'Geben sie einen Betrag in CHF ein',
-  'sections.shopCheckout.contributionValue.unit.EUR': '€',
-  'sections.shopCheckout.contributionValue.unit.CHF': 'CHF',
-  'sections.shopCheckout.contributionValue.validation.empty':
-    'Bitte geben sie einen Betrag ein',
-  'sections.shopCheckout.contributionValue.validation.tooLow.EUR':
-    'Der Betrag muss mindestens 10 Euro sein',
-  'sections.shopCheckout.contributionValue.validation.tooLow.CHF':
-    'Der Betrag muss mindestens 10 CHF sein',
-  'sections.shopCheckout.contributionValue.validation.tooHigh':
-    'Für größere Einkäufe kontaktieren Sie bitte unser Verkaufsteam über office@tree.ly',
-
-  'sections.shopCheckout.summary.kg': 'Menge',
-  'sections.shopCheckout.summary.price': 'Preis',
-  'sections.shopCheckout.summary.price.taxNotIncluded': 'ohne Steuern',
-  'sections.shopCheckout.summary.price.taxIncluded':
-    'Preis inklusive Steuern: {number}',
-
-  'sections.shopCheckout.submit': 'Kaufen',
-};
-export default messagesDe;

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

@@ -1,27 +0,0 @@
-const messagesEn = {
-  'sections.shopCheckout.intro.price': 'Price',
-
-  'sections.shopCheckout.contributionValue.label.EUR':
-    'Enter contribution value in €',
-  'sections.shopCheckout.contributionValue.label.CHF':
-    'Enter contribution value in CHF',
-  'sections.shopCheckout.contributionValue.unit.EUR': '€',
-  'sections.shopCheckout.contributionValue.unit.CHF': 'CHF',
-  'sections.shopCheckout.contributionValue.validation.empty':
-    'Please enter a value',
-  'sections.shopCheckout.contributionValue.validation.tooLow.EUR':
-    'Der Betrag muss mindestens 10 Euro sein',
-  'sections.shopCheckout.contributionValue.validation.tooLow.CHF':
-    'Der Betrag muss mindestens 10 CHF sein',
-  'sections.shopCheckout.contributionValue.validation.tooHigh':
-    'For bigger purchases please contact our sales team via office@tree.ly',
-
-  'sections.shopCheckout.summary.kg': 'Quantity',
-  'sections.shopCheckout.summary.price': 'Price',
-  'sections.shopCheckout.summary.price.taxNotIncluded': 'not including tax',
-  'sections.shopCheckout.summary.price.taxIncluded':
-    'Price including tax: {number}',
-
-  'sections.shopCheckout.submit': 'Checkout',
-};
-export default messagesEn;

package/src/slices/SideBySideImages/SideBySideImages.stories.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import SideBySideImages from '.';
-
-export default {
-  title: 'slices/SideBySideImages',
-  component: SideBySideImages,
-} as Meta<typeof SideBySideImages>;
-
-const Template: StoryFn<typeof SideBySideImages> = (args) => (
-  <SideBySideImages {...args} />
-);
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    images: [
-      {
-        id: 1,
-        caption: 'Caption 1',
-        img: {
-          id: 1,
-          alt: 'Alt text 1',
-          img: { data: storybookStrapiCoverMock },
-        },
-      },
-      {
-        id: 2,
-        caption: 'Caption 2',
-        img: {
-          id: 2,
-          alt: 'Alt text 2',
-          img: { data: storybookStrapiCoverMock },
-        },
-      },
-    ],
-  },
-};

package/src/slices/SideBySideImages/SideBySideImages.test.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import { SideBySideImagesProps } from './SideBySideImages';
-import SideBySideImages from '.';
-
-const defaultProps: SideBySideImagesProps = {
-  slice: {
-    images: [
-      {
-        id: 1,
-        caption: 'Caption 1',
-        img: { id: 1, alt: 'Alt text 1', img: { data: strapiMediaMock } },
-      },
-      {
-        id: 2,
-        caption: 'Caption 2',
-        img: { id: 2, alt: 'Alt text 2', img: { data: strapiMediaMock } },
-      },
-    ],
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<SideBySideImages {...combinedProps} />);
-};
-
-describe('The SideBySideImages component', () => {
-  it('displays the captions', () => {
-    setup();
-
-    expect(
-      screen.getByText(defaultProps.slice.images[0].caption)
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(defaultProps.slice.images[1].caption)
-    ).toBeInTheDocument();
-  });
-
-  it('displays the images', () => {
-    setup();
-
-    expect(screen.getAllByRole('img')[0]).toHaveAttribute(
-      'alt',
-      defaultProps.slice.images[0].img.alt
-    );
-    expect(screen.getAllByRole('img')[1]).toHaveAttribute(
-      'alt',
-      defaultProps.slice.images[1].img.alt
-    );
-  });
-});

package/src/slices/SideBySideImages/SideBySideImages.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import {
-  Box,
-  DefaultSectionContainer,
-  Grid,
-  GridItem,
-  SimpleGrid,
-  Text,
-  Wrapper,
-} from 'boemly';
-import Image from 'next/image';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-
-export interface SideBySideImagesProps {
-  slice: {
-    images: {
-      id: number;
-      caption: string;
-      img: StrapiImage;
-    }[];
-  };
-}
-export const SideBySideImages: React.FC<SideBySideImagesProps> = ({
-  slice,
-}: SideBySideImagesProps) => (
-  <DefaultSectionContainer>
-    <Wrapper>
-      <Grid templateColumns="repeat(12, 1fr)" gap="4">
-        <GridItem colSpan={[12, null, null, 7]}>
-          <SimpleGrid
-            columns={[1, null, null, 2]}
-            gap={['12', null, null, '6']}
-          >
-            {slice.images.map((image) => (
-              <Box key={image.id}>
-                <Box height="md" position="relative" borderRadius="xl">
-                  <Image
-                    src={strapiMediaUrl(image.img.img, 'large')}
-                    alt={image.img.alt}
-                    fill
-                    style={{
-                      objectFit: image.img.objectFit || 'cover',
-                      borderRadius: 'var(--boemly-radii-xl)',
-                    }}
-                  />
-                </Box>
-                <Text mt="3" size="xsLowNormal">
-                  {image.caption}
-                </Text>
-              </Box>
-            ))}
-          </SimpleGrid>
-        </GridItem>
-      </Grid>
-    </Wrapper>
-  </DefaultSectionContainer>
-);

package/src/slices/SideBySideImages/index.ts

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

package/src/slices/SmallHero/SmallHero.stories.tsx

@@ -1,139 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import SmallHero from '.';
-
-export default {
-  title: 'slices/SmallHero',
-  component: SmallHero,
-} as Meta<typeof SmallHero>;
-
-const Template: StoryFn<typeof SmallHero> = (args) => <SmallHero {...args} />;
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    title: 'Title',
-  },
-  theme: 'dark',
-};
-
-export const WithSubTitle = Template.bind({});
-WithSubTitle.args = {
-  slice: {
-    title: 'Title',
-    subTitle: 'Sub title',
-  },
-  theme: 'dark',
-};
-
-export const WithTagline = Template.bind({});
-WithTagline.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Sub title',
-  },
-  theme: 'dark',
-};
-
-export const WithImage = Template.bind({});
-WithImage.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Sub title',
-    image: {
-      id: 1,
-      alt: 'Alt text',
-      img: { data: storybookStrapiCoverMock },
-    },
-  },
-  theme: 'dark',
-};
-
-export const WithImageGradient = Template.bind({});
-WithImageGradient.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Sub title',
-    image: {
-      id: 1,
-      alt: 'Alt text',
-      img: { data: storybookStrapiCoverMock },
-    },
-    gradient: true,
-  },
-  theme: 'dark',
-};
-
-export const WithTags = Template.bind({});
-WithTags.args = {
-  slice: {
-    tags: [
-      { id: 1, text: 'Tag 1', colorScheme: 'green' },
-      { id: 2, text: 'Tag 2', colorScheme: 'gray' },
-    ],
-    title: 'Title',
-    subTitle: 'Sub title',
-    image: {
-      id: 1,
-      alt: 'Alt text',
-      img: { data: storybookStrapiCoverMock },
-    },
-  },
-  theme: 'dark',
-};
-
-export const WithTagsAndButton = Template.bind({});
-WithTagsAndButton.args = {
-  slice: {
-    tags: [
-      { id: 1, text: 'Tag 1', colorScheme: 'green' },
-      { id: 2, text: 'Tag 2', colorScheme: 'gray' },
-    ],
-    title: 'Title',
-    subTitle: 'Sub title',
-    button: {
-      id: 1,
-      text: 'Button',
-      url: 'https://tree.ly',
-    },
-    image: {
-      id: 1,
-      alt: 'Alt text',
-      img: { data: storybookStrapiCoverMock },
-    },
-  },
-  theme: 'dark',
-};
-
-export const LightTheme = Template.bind({});
-LightTheme.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Sub title',
-  },
-  theme: 'light',
-};
-
-export const LightThemeWithTagsAndButton = Template.bind({});
-LightThemeWithTagsAndButton.args = {
-  slice: {
-    tags: [
-      { id: 1, text: 'Tag 1', colorScheme: 'green' },
-      { id: 2, text: 'Tag 2', colorScheme: 'blue' },
-    ],
-    title: 'Title',
-    subTitle: 'Sub title',
-    button: {
-      id: 1,
-      text: 'Button',
-      url: 'https://tree.ly',
-    },
-  },
-  theme: 'light',
-};

package/src/slices/SmallHero/SmallHero.test.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import SmallHero from '.';
-import { SmallHeroProps } from './SmallHero';
-
-const defaultProps: SmallHeroProps = {
-  slice: {
-    title: 'Title',
-  },
-  theme: 'dark',
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<SmallHero {...combinedProps} />);
-};
-
-describe('The SmallHero component', () => {
-  it('displays the section header', () => {
-    setup();
-
-    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
-  });
-
-  it('displays a subtitle if there is a subtitle in the slice', () => {
-    setup({ slice: { ...defaultProps.slice, subTitle: 'Sub title' } });
-
-    expect(screen.getByText('Sub title')).toBeInTheDocument();
-  });
-
-  it('displays a tagline if there is a tagline in the slice', () => {
-    setup({ slice: { ...defaultProps.slice, tagline: 'Tagline' } });
-
-    expect(screen.getByText('Tagline')).toBeInTheDocument();
-  });
-
-  it('displays a tag if there is a tag in the slice', () => {
-    setup({
-      slice: { ...defaultProps.slice, tags: [{ id: 1, text: 'Tag' }] },
-    });
-
-    expect(screen.getByText('Tag')).toBeInTheDocument();
-  });
-
-  it('displays a link if there is a button in the slice', () => {
-    setup({
-      slice: { ...defaultProps.slice, button: { url: 'url', text: 'Link' } },
-    });
-
-    expect(screen.getByRole('link')).toBeInTheDocument();
-    expect(screen.getByText('Link')).toBeInTheDocument();
-  });
-
-  it('displays no image if there is no image in the slice', () => {
-    setup();
-
-    expect(screen.queryByRole('img')).not.toBeInTheDocument();
-  });
-
-  it('displays an image if there is an image in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        image: { id: 1, img: { data: strapiMediaMock }, alt: 'Image alt text' },
-      },
-    });
-
-    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Image alt text');
-  });
-});