@treely/strapi-slices 1.0.0

package/src/slices/ShopCheckout/ShopCheckout.stories.tsx

@@ -0,0 +1,76 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import ShopCheckout from '.';
+
+export default {
+  title: 'shop/ShopCheckout',
+  component: ShopCheckout,
+} as Meta<typeof ShopCheckout>;
+
+const Template: StoryFn<typeof ShopCheckout> = (args) => (
+  <ShopCheckout {...args} />
+);
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    title: 'Title',
+    batchId: 'batchId',
+    pricePerKg: 0.06,
+    initialContributionValue: 60,
+    checkoutText: 'Checkout Text',
+    currency: 'EUR',
+  },
+};
+
+export const WithTagline = Template.bind({});
+WithTagline.args = {
+  slice: {
+    title: 'Title',
+    batchId: 'batchId',
+    pricePerKg: 0.06,
+    initialContributionValue: 60,
+    checkoutText: 'Checkout Text',
+    tagline: 'Tagline',
+    currency: 'EUR',
+  },
+};
+
+export const WithText = Template.bind({});
+WithText.args = {
+  slice: {
+    title: 'Title',
+    batchId: 'batchId',
+    pricePerKg: 0.06,
+    initialContributionValue: 60,
+    checkoutText: 'Checkout Text',
+    text: 'Text',
+    currency: 'EUR',
+  },
+};
+
+export const WithBadge = Template.bind({});
+WithBadge.args = {
+  slice: {
+    title: 'Title',
+    batchId: 'batchId',
+    pricePerKg: 0.06,
+    initialContributionValue: 60,
+    checkoutText: 'Checkout Text',
+    badge: 'Badge Text',
+    currency: 'EUR',
+  },
+};
+
+export const WithCHF = Template.bind({});
+WithCHF.args = {
+  slice: {
+    title: 'Title',
+    batchId: 'batchId',
+    pricePerKg: 0.06,
+    initialContributionValue: 60,
+    checkoutText: 'Checkout Text',
+    badge: 'Badge Text',
+    currency: 'CHF',
+  },
+};

package/src/slices/ShopCheckout/ShopCheckout.test.tsx

@@ -0,0 +1,186 @@
+import { render, screen, userEvent, waitFor } from '@/test/testUtils';
+import { DEFAULT_USE_ROUTER_RETURN_VALUE } from '@/test/defaultMocks/next';
+import { ShopCheckoutProps } from './ShopCheckout';
+import ShopCheckout from '.';
+import { useRouter } from '../../../__mocks__/next/router';
+import messagesEn from './messages.en';
+
+const pushSpy = jest.fn();
+
+const defaultProps: ShopCheckoutProps = {
+  slice: {
+    title: 'Title',
+    batchId: 'batchId',
+    pricePerKg: 0.06,
+    initialContributionValue: 60,
+    checkoutText: 'Checkout Text',
+    currency: 'EUR',
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<ShopCheckout {...combinedProps} />);
+};
+
+describe('The ShowCheckout section', () => {
+  beforeEach(() => {
+    useRouter.mockReturnValue({
+      ...DEFAULT_USE_ROUTER_RETURN_VALUE,
+      push: pushSpy,
+    });
+  });
+
+  afterEach(() => {
+    pushSpy.mockRestore();
+    useRouter.mockRestore();
+  });
+
+  it('displays the title', () => {
+    setup();
+
+    expect(screen.getByText('Title')).toBeInTheDocument();
+  });
+
+  it('displays the badge', () => {
+    setup({ slice: { ...defaultProps.slice, badge: 'Badge Text' } });
+
+    expect(screen.getByText('Badge Text')).toBeInTheDocument();
+  });
+
+  it('navigates to the checkout on submit', async () => {
+    setup();
+
+    await userEvent.click(
+      screen.getByText(messagesEn['sections.shopCheckout.submit'])
+    );
+
+    await waitFor(() => {
+      expect(pushSpy).toHaveBeenCalledWith(
+        'https://api.fpm.t-staging.com/v1/webhooks/shop/checkout?batchId=batchId&quantity=1000'
+      );
+    });
+  });
+
+  it('adds the coupon-id to the url if it is set', async () => {
+    setup({ slice: { ...defaultProps.slice, couponId: 'coupon-id' } });
+
+    await userEvent.click(
+      screen.getByText(messagesEn['sections.shopCheckout.submit'])
+    );
+
+    await waitFor(() => {
+      expect(pushSpy).toHaveBeenCalledWith(
+        'https://api.fpm.t-staging.com/v1/webhooks/shop/checkout?batchId=batchId&quantity=1000&couponId=coupon-id'
+      );
+    });
+  });
+
+  it('works with CHF', async () => {
+    setup({ slice: { ...defaultProps.slice, currency: 'CHF' } });
+
+    expect(
+      screen.getByLabelText(
+        messagesEn['sections.shopCheckout.contributionValue.label.CHF']
+      )
+    ).toBeInTheDocument();
+
+    await userEvent.clear(
+      screen.getByLabelText(
+        messagesEn['sections.shopCheckout.contributionValue.label.CHF']
+      )
+    );
+    await userEvent.type(
+      screen.getByLabelText(
+        messagesEn['sections.shopCheckout.contributionValue.label.CHF']
+      ),
+      '1'
+    );
+    await userEvent.click(
+      screen.getByText(messagesEn['sections.shopCheckout.submit'])
+    );
+
+    expect(
+      await screen.findByText(
+        messagesEn[
+          'sections.shopCheckout.contributionValue.validation.tooLow.CHF'
+        ]
+      )
+    ).toBeInTheDocument();
+  });
+
+  describe('does not submit', () => {
+    it('if the value is empty', async () => {
+      setup();
+
+      await userEvent.clear(
+        screen.getByLabelText(
+          messagesEn['sections.shopCheckout.contributionValue.label.EUR']
+        )
+      );
+      await userEvent.click(
+        screen.getByText(messagesEn['sections.shopCheckout.submit'])
+      );
+
+      expect(
+        await screen.findByText(
+          messagesEn['sections.shopCheckout.contributionValue.validation.empty']
+        )
+      ).toBeInTheDocument();
+    });
+
+    it('if the value is too low', async () => {
+      setup();
+
+      await userEvent.clear(
+        screen.getByLabelText(
+          messagesEn['sections.shopCheckout.contributionValue.label.EUR']
+        )
+      );
+      await userEvent.type(
+        screen.getByLabelText(
+          messagesEn['sections.shopCheckout.contributionValue.label.EUR']
+        ),
+        '1'
+      );
+      await userEvent.click(
+        screen.getByText(messagesEn['sections.shopCheckout.submit'])
+      );
+
+      expect(
+        await screen.findByText(
+          messagesEn[
+            'sections.shopCheckout.contributionValue.validation.tooLow.EUR'
+          ]
+        )
+      ).toBeInTheDocument();
+    });
+
+    it('if the value is too high', async () => {
+      setup();
+
+      await userEvent.clear(
+        screen.getByLabelText(
+          messagesEn['sections.shopCheckout.contributionValue.label.EUR']
+        )
+      );
+      await userEvent.type(
+        screen.getByLabelText(
+          messagesEn['sections.shopCheckout.contributionValue.label.EUR']
+        ),
+        '1000000'
+      );
+      await userEvent.click(
+        screen.getByText(messagesEn['sections.shopCheckout.submit'])
+      );
+
+      expect(
+        await screen.findByText(
+          messagesEn[
+            'sections.shopCheckout.contributionValue.validation.tooHigh'
+          ]
+        )
+      ).toBeInTheDocument();
+    });
+  });
+});

package/src/slices/ShopCheckout/ShopCheckout.tsx

@@ -0,0 +1,228 @@
+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 { useRouter } from 'next/router';
+import { useCallback } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+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';
+
+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';
+  };
+}
+
+export const ShopCheckout = ({ slice }: ShopCheckoutProps): JSX.Element => {
+  const [primary50] = useToken('colors', ['primary.50']);
+  const { formatMessage, formatNumber } = useIntl();
+  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;
+  }, []);
+
+  const onSubmit = ({ contributionValue }: CheckoutForm) => {
+    const url = new URL(`${FPM_API_URI}/v1/webhooks/shop/checkout`);
+
+    url.searchParams.append('batchId', slice.batchId);
+
+    url.searchParams.append(
+      'quantity',
+      Math.floor(contributionValue / slice.pricePerKg).toString()
+    );
+
+    if (slice.couponId) url.searchParams.append('couponId', slice.couponId);
+
+    push(url.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₂`}
+            />
+
+            <Spacer height="6" />
+            <Divider />
+            <Spacer height="6" />
+
+            <Formik
+              initialValues={{
+                contributionValue: slice.initialContributionValue,
+              }}
+              validate={validateForm}
+              onSubmit={onSubmit}
+            >
+              {({
+                errors,
+                touched,
+                handleSubmit,
+                values,
+              }: FormikProps<CheckoutForm>) => (
+                <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">
+                              <FormattedMessage
+                                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(
+                        Math.floor(
+                          values.contributionValue / slice.pricePerKg
+                        ) * slice.pricePerKg,
+                        {
+                          style: 'currency',
+                          currency: slice.currency,
+                          minimumFractionDigits: 2,
+                          maximumFractionDigits: 2,
+                        }
+                      )}
+                    />
+                  </SimpleGrid>
+
+                  <Spacer height="6" />
+
+                  <Button type="submit" width="full">
+                    <FormattedMessage id="sections.shopCheckout.submit" />
+                  </Button>
+                </Form>
+              )}
+            </Formik>
+          </Container>
+        </Flex>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/ShopCheckout/index.ts

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

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

@@ -0,0 +1,23 @@
+export default {
+  '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.submit': 'Kaufen',
+};

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

@@ -0,0 +1,23 @@
+export default {
+  '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.submit': 'Checkout',
+};

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

@@ -0,0 +1,39 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import { storybookStrapiCoverMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import SideBySideImages from '.';
+
+export default {
+  title: 'sections/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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,57 @@
+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

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