@treely/strapi-slices 7.16.2 → 8.0.0

package/src/slices/QuoteCards/index.ts

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

package/src/slices/Redirect/Rediect.test.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { render } from '../../test/testUtils';
-import { mergeDeep } from '../../utils/mergeDeep';
-import { replaceSpy, useRouter } from '../../../__mocks__/next/router';
-import Redirect from '.';
-import { RedirectProps } from './Redirect';
-
-const defaultProps: RedirectProps = {
-  slice: {
-    url: 'https://redirect.com',
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = mergeDeep(defaultProps, props);
-  render(<Redirect {...combinedProps} />);
-};
-
-describe('The Redirect component', () => {
-  afterEach(() => {
-    replaceSpy.mockRestore();
-    useRouter.mockRestore();
-  });
-
-  it('calls the redirect URL when rendering', () => {
-    setup();
-
-    expect(replaceSpy).toHaveBeenCalledWith('https://redirect.com');
-  });
-});

package/src/slices/Redirect/Redirect.tsx

@@ -1,18 +0,0 @@
-import { useRouter } from 'next/router';
-import React, { useEffect } from 'react';
-
-export interface RedirectProps {
-  slice: {
-    url: string;
-  };
-}
-
-export const Redirect = ({ slice }: RedirectProps): JSX.Element => {
-  const router = useRouter();
-  useEffect(() => {
-    // When using `replace`, the current browser history entry will be replaced
-    router.replace(slice.url);
-  }, [slice.url]);
-
-  return <></>;
-};

package/src/slices/Redirect/index.ts

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

package/src/slices/RichTextSection/RichTextSection.stories.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import RichTextSection from '.';
-
-export default {
-  title: 'slices/RichTextSection',
-  component: RichTextSection,
-} as Meta<typeof RichTextSection>;
-
-const Template: StoryFn<typeof RichTextSection> = (args) => (
-  <RichTextSection {...args} />
-);
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    content: `
-# Heading 1
-
-## Heading 2
-
-### Heading 3
-
-Text
-`,
-  },
-};

package/src/slices/RichTextSection/RichTextSection.test.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import RichTextSection from '.';
-import { RichTextSectionProps } from './RichTextSection';
-
-const defaultProps: RichTextSectionProps = {
-  slice: { content: 'Content' },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<RichTextSection {...combinedProps} />);
-};
-
-describe('The RichText component', () => {
-  it('displays the content', () => {
-    setup();
-
-    expect(screen.getByText(defaultProps.slice.content)).toBeInTheDocument();
-  });
-});

package/src/slices/RichTextSection/RichTextSection.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import {
-  DefaultSectionContainer,
-  Grid,
-  GridItem,
-  RichText,
-  Wrapper,
-} from 'boemly';
-
-export interface RichTextSectionProps {
-  slice: {
-    content: string;
-  };
-}
-
-export const RichTextSection: React.FC<RichTextSectionProps> = ({
-  slice,
-}: RichTextSectionProps) => (
-  <DefaultSectionContainer>
-    <Wrapper>
-      <Grid templateColumns="repeat(12, 1fr)" gap="4">
-        <GridItem colSpan={[12, null, null, 7]}>
-          <RichText content={slice.content} />
-        </GridItem>
-      </Grid>
-    </Wrapper>
-  </DefaultSectionContainer>
-);

package/src/slices/RichTextSection/index.ts

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

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

@@ -1,90 +0,0 @@
-import React from 'react';
-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',
-  },
-};
-
-export const WithTaxMessage = Template.bind({});
-WithTaxMessage.args = {
-  slice: {
-    title: 'Title',
-    batchId: 'batchId',
-    pricePerKg: 0.06,
-    initialContributionValue: 60,
-    checkoutText: 'Checkout Text',
-    taxInPercent: 20,
-    currency: 'EUR',
-  },
-};

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

@@ -1,194 +0,0 @@
-import React from 'react';
-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,
-    taxInPercent: 20,
-    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('displays the amount in euro included taxes', () => {
-    setup();
-
-    expect(screen.getByText('Price including tax: €72.00')).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&cancelPath=%2F'
-      );
-    });
-  });
-
-  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&cancelPath=%2F&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

@@ -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;