@treely/strapi-slices 7.16.2 → 8.0.0

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

@@ -1,24 +0,0 @@
-const messagesDe = {
-  'features.projectInfo.projectInfo.value': 'Projekt Infos',
-  'features.projectInfo.properties.area': 'Projekt Fläche',
-  'features.projectInfo.properties.location': 'Standort',
-  'features.projectInfo.properties.start': 'Projekt Start Datum',
-  'features.projectInfo.properties.timeSpan': 'Projekt Zeitraum',
-  'features.projectInfo.properties.projectType': 'Projekt Typ',
-  'features.projectInfo.properties.projectDeveloper': 'Projekt Entwickler',
-  'features.projectInfo.properties.verificationStandard.label':
-    'Verifizierungsstandard',
-  'features.projectInfo.properties.verificationStandard.value.SilvaconsultFCSISO14':
-    'SILVACONSULT® Forest Carbon Standard, ISO 14064-2',
-  'features.projectInfo.properties.verificationStandard.value.MfKWCH':
-    'Methodik für Klimaschutzprojekte im Wald für die Schweiz',
-  'features.projectInfo.properties.projectVolume.toolTip':
-    'Dies ist die durchschnittliche Anzahl der Credits, die pro Jahr ausgestellt werden. Dieser Wert entspricht nicht den Verfügbarkeiten.',
-  'features.projectInfo.properties.projectVolume.label': 'Projektvolumen',
-  'features.projectInfo.properties.riskBuffer': 'Anteil Risikopuffer',
-
-  'features.projectInfo.properties.year':
-    '{years} {years, plural, one {Jahr} other {Jahre} }',
-};
-
-export default messagesDe;

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

@@ -1,24 +0,0 @@
-const messagesEn = {
-  'features.projectInfo.projectInfo.value': 'Project Infos',
-  'features.projectInfo.properties.area': 'Project Area',
-  'features.projectInfo.properties.location': 'Location',
-  'features.projectInfo.properties.start': 'Project Start Date',
-  'features.projectInfo.properties.timeSpan': 'Project Time Span',
-  'features.projectInfo.properties.projectType': 'Project Type',
-  'features.projectInfo.properties.projectDeveloper': 'Project Developer',
-  'features.projectInfo.properties.verificationStandard.label':
-    'Verification Standard',
-  'features.projectInfo.properties.verificationStandard.value.SilvaconsultFCSISO14':
-    'SILVACONSULT® Forest Carbon Standard, ISO 14064-2',
-  'features.projectInfo.properties.verificationStandard.value.MfKWCH':
-    'Methodik für Klimaschutzprojekte im Wald für die Schweiz',
-  'features.projectInfo.properties.projectVolume.label': 'Project Volume',
-  'features.projectInfo.properties.projectVolume.toolTip':
-    "This is the average amount of credits that are issued per year. This value doesn't represent availabilities.",
-  'features.projectInfo.properties.riskBuffer': 'Risk Buffer Share',
-
-  'features.projectInfo.properties.year':
-    '{years} {years, plural, one {year} other {years} }',
-};
-
-export default messagesEn;

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

@@ -1,174 +0,0 @@
-import React from 'react';
-import { render, screen, userEvent, waitFor } from '../../../test/testUtils';
-import { pushSpy } from '../../../../__mocks__/next/router';
-
-import SmallCheckout from '.';
-import { SmallCheckoutProps } from './SmallCheckout';
-import messagesEn from './messages.en';
-
-const defaultProps: SmallCheckoutProps = {
-  batchId: 'batchId',
-  pricePerKg: 0.06,
-  initialContributionValue: 60,
-  checkoutText: 'Checkout text',
-  currency: 'EUR',
-  taxInPercent: 20,
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<SmallCheckout {...combinedProps} />);
-};
-
-describe('The SmallCheckout component', () => {
-  afterEach(() => {
-    pushSpy.mockClear();
-  });
-
-  it('displays amount in euro', () => {
-    setup();
-
-    expect(
-      screen.getByText(
-        messagesEn[
-          'portfolio.smallCheckout.contributionValueCurrency.label.EUR'
-        ]
-      )
-    ).toBeInTheDocument();
-  });
-
-  it('displays amount in tons', () => {
-    setup();
-
-    expect(
-      screen.getByText(
-        messagesEn['portfolio.smallCheckout.contributionValueTons.label']
-      )
-    ).toBeInTheDocument();
-  });
-
-  it('displays the amount in euro included taxes', () => {
-    setup();
-
-    expect(screen.getByText('Price including tax: €72.00')).toBeInTheDocument();
-  });
-
-  it('displays the submit button', () => {
-    setup();
-
-    expect(
-      screen.getByText(messagesEn['portfolio.smallCheckout.submitButton'])
-    ).toBeInTheDocument();
-  });
-
-  it('navigates to the checkout on submit', async () => {
-    setup();
-
-    await userEvent.clear(
-      screen.getByLabelText(
-        messagesEn[
-          'portfolio.smallCheckout.contributionValueCurrency.label.EUR'
-        ]
-      )
-    );
-
-    await userEvent.type(
-      screen.getByLabelText(
-        messagesEn[
-          'portfolio.smallCheckout.contributionValueCurrency.label.EUR'
-        ]
-      ),
-      '120'
-    );
-
-    await userEvent.click(
-      screen.getByText(messagesEn['portfolio.smallCheckout.submitButton'])
-    );
-
-    await waitFor(() => {
-      expect(pushSpy).toHaveBeenCalledWith(
-        'https://api.fpm.t-staging.com/v1/webhooks/shop/checkout?batchId=batchId&quantity=2000&cancelPath=%2F'
-      );
-    });
-  });
-
-  it('correctly converts tons to EUR', async () => {
-    setup();
-
-    await userEvent.clear(
-      screen.getByLabelText(
-        messagesEn['portfolio.smallCheckout.contributionValueTons.label']
-      )
-    );
-    await userEvent.type(
-      screen.getByLabelText(
-        messagesEn['portfolio.smallCheckout.contributionValueTons.label']
-      ),
-      '3'
-    );
-
-    await userEvent.click(
-      screen.getByText(messagesEn['portfolio.smallCheckout.submitButton'])
-    );
-
-    await waitFor(() => {
-      expect(pushSpy).toHaveBeenCalledWith(
-        'https://api.fpm.t-staging.com/v1/webhooks/shop/checkout?batchId=batchId&quantity=3000&cancelPath=%2F'
-      );
-    });
-  });
-
-  it('works with CHF', async () => {
-    setup({ ...defaultProps, currency: 'CHF' });
-
-    expect(
-      screen.getByLabelText(
-        messagesEn[
-          'portfolio.smallCheckout.contributionValueCurrency.label.CHF'
-        ]
-      )
-    ).toBeInTheDocument();
-
-    await userEvent.clear(
-      screen.getByLabelText(
-        messagesEn[
-          'portfolio.smallCheckout.contributionValueCurrency.label.CHF'
-        ]
-      )
-    );
-    await userEvent.type(
-      screen.getByLabelText(
-        messagesEn[
-          'portfolio.smallCheckout.contributionValueCurrency.label.CHF'
-        ]
-      ),
-      '1'
-    );
-    await userEvent.click(
-      screen.getByText(messagesEn['portfolio.smallCheckout.submitButton'])
-    );
-
-    expect(
-      await screen.findByText(
-        messagesEn[
-          'portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.CHF'
-        ]
-      )
-    ).toBeInTheDocument();
-  });
-
-  it('displays customTitle, customSubtitle and customButton if they are defined im slice', () => {
-    setup({
-      ...defaultProps,
-      title: 'Custom Title',
-      subtitle: 'Custom Subtitle',
-      button: { id: 1, url: 'customButtonUrl', text: 'Custom Button' },
-    });
-
-    expect(screen.getByText('Custom Title')).toBeInTheDocument();
-    expect(screen.getByText('Custom Subtitle')).toBeInTheDocument();
-
-    expect(screen.getAllByRole('button')).toHaveLength(2);
-    expect(screen.getByText('Custom Button')).toBeInTheDocument();
-  });
-});

package/src/components/portfolio/SmallCheckout/SmallCheckout.tsx

@@ -1,315 +0,0 @@
-import React, { useCallback, useContext } from 'react';
-import {
-  BoemlyFormControl,
-  Box,
-  Button,
-  Divider,
-  Flex,
-  InputRightAddon,
-  Spacer,
-  Text,
-} from 'boemly';
-import {
-  Field,
-  FieldProps,
-  Form,
-  Formik,
-  FormikErrors,
-  FormikProps,
-} from 'formik';
-import { useRouter } from 'next/router';
-import Image from 'next/image';
-import { StrapiLink } from '../../..';
-import { IntlContext } from '../../ContextProvider';
-import {
-  MAXIMUM_CONTRIBUTION_VALUE_IN_MONEY,
-  MINIMUM_CONTRIBUTION_VALUE_IN_MONEY,
-} from '../../../constants/domain';
-import { CDN_URI, FPM_API_URI } from '../../../constants/api';
-import StrapiLinkButton from '../../StrapiLinkButton';
-import SmallCheckoutForm from '../../../models/forms/SmallCheckoutForm';
-
-const calculateTaxIncludedValue = (
-  values: SmallCheckoutForm,
-  taxInPercent: number
-) => {
-  const value = parseInt(values.contributionValueCurrency);
-
-  if (isNaN(value)) return 0;
-
-  return value + value * (taxInPercent / 100);
-};
-
-export interface SmallCheckoutProps {
-  batchId: string;
-  pricePerKg: number;
-  initialContributionValue: number;
-  taxInPercent?: number;
-  checkoutText?: string;
-  currency: 'EUR' | 'CHF';
-
-  title?: string;
-  subtitle?: string;
-  button?: StrapiLink;
-}
-
-const SmallCheckout = ({
-  pricePerKg,
-  currency,
-  batchId,
-  initialContributionValue,
-  taxInPercent,
-  checkoutText,
-  title,
-  subtitle,
-  button,
-}: SmallCheckoutProps) => {
-  const { formatNumber, formatMessage, locale } = useContext(IntlContext);
-  const { push } = useRouter();
-
-  const validateForm = useCallback(
-    (values: SmallCheckoutForm) => {
-      const errors: FormikErrors<SmallCheckoutForm> = {};
-      const value = parseInt(values.contributionValueCurrency);
-      if (!values.contributionValueCurrency || isNaN(value)) {
-        errors.contributionValueCurrency = formatMessage({
-          id: 'portfolio.smallCheckout.contributionValueCurrency.validation.empty',
-        });
-      } else if (value < MINIMUM_CONTRIBUTION_VALUE_IN_MONEY) {
-        errors.contributionValueCurrency = formatMessage({
-          id: `portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.${currency}`,
-        });
-      } else if (value > MAXIMUM_CONTRIBUTION_VALUE_IN_MONEY) {
-        errors.contributionValueCurrency = formatMessage({
-          id: 'portfolio.smallCheckout.contributionValueCurrency.validation.tooHigh',
-        });
-      }
-
-      return errors;
-    },
-    [currency, locale]
-  );
-
-  const onSubmit = async ({ contributionValueCurrency }: SmallCheckoutForm) => {
-    const checkoutURL = new URL(`${FPM_API_URI}/v1/webhooks/shop/checkout`);
-    const currentURL = new URL(window.location.href);
-
-    checkoutURL.searchParams.append('batchId', batchId);
-
-    checkoutURL.searchParams.append(
-      'quantity',
-      Math.floor(parseInt(contributionValueCurrency) / pricePerKg).toString()
-    );
-
-    checkoutURL.searchParams.append('cancelPath', currentURL.pathname);
-
-    push(checkoutURL.toString());
-  };
-
-  return (
-    <Flex
-      width="full"
-      height="full"
-      borderRadius="xl"
-      background="primary.100"
-      padding="6"
-      direction="column"
-    >
-      <Flex gap="2" alignItems="end" mb="6">
-        <Text color="black" lineHeight="0">
-          {formatMessage(
-            { id: 'unit.formatter.tonsCo2' },
-            {
-              number: (
-                <Text as="span" size="lgLowBold" color="black">
-                  {formatNumber(pricePerKg * 1000, {
-                    style: 'currency',
-                    currency,
-                    maximumFractionDigits: 0,
-                  })}
-                </Text>
-              ),
-            }
-          )}
-        </Text>
-        <Text size="smLowNormal">
-          {formatMessage({
-            id: 'portfolio.smallCheckout.price.taxNotIncluded',
-          })}
-        </Text>
-      </Flex>
-
-      <Formik
-        initialValues={{
-          contributionValueCurrency: initialContributionValue.toString(),
-          contributionValueTons: (
-            initialContributionValue /
-            pricePerKg /
-            1000
-          ).toString(),
-        }}
-        validate={validateForm}
-        onSubmit={onSubmit}
-      >
-        {({
-          errors,
-          touched,
-          handleSubmit,
-          setValues,
-          values,
-        }: FormikProps<SmallCheckoutForm>) => (
-          <Form onSubmit={handleSubmit}>
-            <Flex gap="4">
-              <Box width="full">
-                <Field name="contributionValueCurrency">
-                  {({ field }: FieldProps) => (
-                    <BoemlyFormControl
-                      id="contributionValueCurrency"
-                      size="md"
-                      inputProps={{
-                        type: 'number',
-                        value: field.value || '',
-                        onChange: (e) => {
-                          const value = e.target.valueAsNumber;
-
-                          setValues({
-                            contributionValueCurrency: value.toString(),
-                            contributionValueTons: (
-                              value /
-                              pricePerKg /
-                              1000
-                            ).toString(),
-                          });
-                        },
-                      }}
-                      label={formatMessage({
-                        id: `portfolio.smallCheckout.contributionValueCurrency.label.${currency}`,
-                      })}
-                      rightAddonsOrElements={[
-                        <InputRightAddon key="currencyUnit">
-                          {formatMessage({
-                            id: `portfolio.smallCheckout.contributionValueCurrency.unit.${currency}`,
-                          })}
-                        </InputRightAddon>,
-                      ]}
-                      isInvalid={
-                        !!errors.contributionValueCurrency &&
-                        touched.contributionValueCurrency
-                      }
-                      errorMessage={errors.contributionValueCurrency}
-                    />
-                  )}
-                </Field>
-              </Box>
-
-              <Box width="full">
-                <Field name="contributionValueTons">
-                  {({ field }: FieldProps) => (
-                    <BoemlyFormControl
-                      id="contributionValueTons"
-                      size="md"
-                      inputProps={{
-                        type: 'number',
-                        value: field.value || '',
-                        onChange: (e) => {
-                          const value = e.target.valueAsNumber;
-                          setValues({
-                            contributionValueCurrency: (
-                              value *
-                              pricePerKg *
-                              1000
-                            ).toString(),
-                            contributionValueTons: value.toString(),
-                          });
-                        },
-                      }}
-                      label={formatMessage({
-                        id: 'portfolio.smallCheckout.contributionValueTons.label',
-                      })}
-                      rightAddonsOrElements={[
-                        <InputRightAddon key="tCO₂">tCO₂</InputRightAddon>,
-                      ]}
-                      isInvalid={
-                        !!errors.contributionValueTons &&
-                        touched.contributionValueTons
-                      }
-                      errorMessage={errors.contributionValueTons}
-                    />
-                  )}
-                </Field>
-              </Box>
-            </Flex>
-            {values.contributionValueCurrency &&
-              taxInPercent &&
-              taxInPercent > 0 && (
-                <Text size="smLowNormal" mt="2">
-                  {formatMessage(
-                    { id: 'portfolio.smallCheckout.price.taxIncluded' },
-                    {
-                      number: formatNumber(
-                        calculateTaxIncludedValue(values, taxInPercent),
-                        {
-                          style: 'currency',
-                          currency,
-                          maximumFractionDigits: 2,
-                        }
-                      ),
-                    }
-                  )}
-                </Text>
-              )}
-
-            <Spacer height="4" />
-
-            <Button type="submit" width="full">
-              {formatMessage({ id: 'portfolio.smallCheckout.submitButton' })}
-            </Button>
-          </Form>
-        )}
-      </Formik>
-
-      <Flex
-        width="full"
-        justifyContent="center"
-        alignItems="center"
-        mt="6"
-        gap="2"
-      >
-        <Image
-          src={`${CDN_URI}/assets/v3/strapi-slices/globe-love-icon.svg`}
-          alt="Icon"
-          width={20}
-          height={20}
-        />
-        <Text size="smLowNormal">{checkoutText}</Text>
-      </Flex>
-
-      <Divider my="6" />
-
-      <Flex width="full" alignItems="center" direction="column">
-        {title && (
-          <Text size="smLowBold" textAlign="center" color="black" mb="2">
-            {title}
-          </Text>
-        )}
-        {subtitle && (
-          <Text size="smRegularNormal" textAlign="center" mb="3">
-            {subtitle}
-          </Text>
-        )}
-        {button && (
-          <StrapiLinkButton
-            link={{
-              intercomLauncher: true,
-              ...button,
-            }}
-            variant="outline"
-            component="SmallCheckout"
-          />
-        )}
-      </Flex>
-    </Flex>
-  );
-};
-
-export default SmallCheckout;

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

@@ -1,3 +0,0 @@
-import SmallCheckout from './SmallCheckout';
-
-export default SmallCheckout;

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

@@ -1,25 +0,0 @@
-const messagesDe = {
-  'portfolio.smallCheckout.price.taxNotIncluded': 'ohne Steuern',
-  'portfolio.smallCheckout.price.taxIncluded':
-    'Preis inklusive Steuern: {number}',
-
-  'portfolio.smallCheckout.contributionValueCurrency.label.CHF':
-    'Geben Sie den Beitrag in Fr. ein',
-  'portfolio.smallCheckout.contributionValueCurrency.label.EUR':
-    'Geben Sie den Beitrag in € ein',
-  'portfolio.smallCheckout.contributionValueCurrency.unit.EUR': '€',
-  'portfolio.smallCheckout.contributionValueCurrency.unit.CHF': 'Fr.',
-  'portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.CHF':
-    'Der Wert muss mindestens 10 CHF betragen',
-  'portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.EUR':
-    'Der Wert muss mindestens 10 Euro betragen.',
-  'portfolio.smallCheckout.contributionValueCurrency.validation.empty':
-    'Bitte geben Sie einen Wert ein',
-  'portfolio.smallCheckout.contributionValueCurrency.validation.tooHigh':
-    'Für größere Einkäufe kontaktieren Sie bitte unser Verkaufsteam',
-
-  'portfolio.smallCheckout.contributionValueTons.label': 'Beitrag in Tonnen',
-
-  'portfolio.smallCheckout.submitButton': 'Credits kaufen',
-};
-export default messagesDe;

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

@@ -1,25 +0,0 @@
-const messagesEn = {
-  'portfolio.smallCheckout.price.taxNotIncluded': 'not including tax',
-  'portfolio.smallCheckout.price.taxIncluded': 'Price including tax: {number}',
-
-  'portfolio.smallCheckout.contributionValueCurrency.label.CHF':
-    'Contribution Amount in CHF',
-  'portfolio.smallCheckout.contributionValueCurrency.label.EUR':
-    'Contribution Amount in €',
-  'portfolio.smallCheckout.contributionValueCurrency.unit.EUR': '€',
-  'portfolio.smallCheckout.contributionValueCurrency.unit.CHF': 'CHF',
-  'portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.CHF':
-    'The value must be at least 10 CHF',
-  'portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.EUR':
-    'The value must be at least 10 Euro',
-  'portfolio.smallCheckout.contributionValueCurrency.validation.empty':
-    'Please enter a value',
-  'portfolio.smallCheckout.contributionValueCurrency.validation.tooHigh':
-    'For bigger purchases please contact our sales team',
-
-  'portfolio.smallCheckout.contributionValueTons.label':
-    'Contribution Amount in Tons',
-
-  'portfolio.smallCheckout.submitButton': 'Buy credits',
-};
-export default messagesEn;

package/src/constants/animations.ts

@@ -1 +0,0 @@
-export const MEDIUM_TRANSITION_DURATION = 0.2;

package/src/constants/api.ts

@@ -1,5 +0,0 @@
-export const API_URI =
-  process.env.NEXT_PUBLIC_API_URI || 'http://localhost:4001';
-export const FPM_API_URI =
-  process.env.NEXT_PUBLIC_FPM_API_URI || 'https://api.fpm.t-staging.com';
-export const CDN_URI = 'https://cdn.tree.ly';

package/src/constants/breakpoints.ts

@@ -1,9 +0,0 @@
-export const BREAKPOINT_SM = `${320 - 1}px`;
-export const BREAKPOINT_MD = `${768 - 1}px`;
-export const BREAKPOINT_LG = `${960 - 1}px`;
-export const BREAKPOINT_XL = `${1200 - 1}px`;
-
-export const BREAKPOINT_SM_QUERY = `(max-width: ${BREAKPOINT_SM})`;
-export const BREAKPOINT_MD_QUERY = `(max-width: ${BREAKPOINT_MD})`;
-export const BREAKPOINT_LG_QUERY = `(max-width: ${BREAKPOINT_LG})`;
-export const BREAKPOINT_XL_QUERY = `(max-width: ${BREAKPOINT_XL})`;

package/src/constants/domain.ts

@@ -1,3 +0,0 @@
-export const MINIMUM_CONTRIBUTION_VALUE_IN_MONEY = 10;
-
-export const MAXIMUM_CONTRIBUTION_VALUE_IN_MONEY = 10_000;

package/src/constants/fontCustomizations.ts

@@ -1,6 +0,0 @@
-export const FONT_CUSTOMIZATIONS = {
-  body: 'Inter',
-  heading: 'Inter',
-  display: 'GintoNord',
-  mono: 'SpaceMono',
-};

package/src/constants/fontStyle.ts

@@ -1,51 +0,0 @@
-import { css } from '@emotion/react';
-import { CDN_URI } from './api';
-
-export const FONT_STYLE = css`
-  // GintoNord
-  @font-face {
-    font-family: 'GintoNord';
-    src: url('${CDN_URI}/assets/v3/fonts/ABCGintoNord-Bold.woff2')
-      format('woff2');
-    font-style: normal;
-    font-weight: 700;
-    font-display: block;
-  }
-  // Inter
-  @font-face {
-    font-family: 'Inter';
-    src: url('${CDN_URI}/assets/v3/fonts/Inter-Regular.woff2') format('woff2');
-    font-style: normal;
-    font-weight: 400;
-    font-display: block;
-  }
-  @font-face {
-    font-family: 'Inter';
-    src: url('${CDN_URI}/assets/v3/fonts/Inter-Medium.woff2') format('woff2');
-    font-style: normal;
-    font-weight: 500;
-    font-display: block;
-  }
-  @font-face {
-    font-family: 'Inter';
-    src: url('${CDN_URI}/assets/v3/fonts/Inter-SemiBold.woff2') format('woff2');
-    font-style: normal;
-    font-weight: 600;
-    font-display: block;
-  }
-  @font-face {
-    font-family: 'Inter';
-    src: url('${CDN_URI}/assets/v3/fonts/Inter-Bold.woff2') format('woff2');
-    font-style: normal;
-    font-weight: 700;
-    font-display: block;
-  }
-  // SpaceMono
-  @font-face {
-    font-family: 'SpaceMono';
-    src: url('${CDN_URI}/assets/v3/fonts/SpaceMono-Bold.woff2') format('woff2');
-    font-style: normal;
-    font-weight: 700;
-    font-display: block;
-  }
-`;