@treely/strapi-slices 5.11.2 → 5.12.0

package/dist/utils/getMessages.d.ts

@@ -0,0 +1,142 @@
+declare const getMessages: (locale: string) => {
+    'unit.formatter.tonsCo2': string;
+    'unit.formatter.tonsCo2PerYear': string;
+    'sections.timeline.backgroundShapes': string;
+    'sections.timeline.showMoreButton': string;
+    'sections.textCarousel.moveRight': string;
+    'sections.textCarousel.moveLeft': string;
+    'sections.shopCheckout.intro.price': string;
+    'sections.shopCheckout.contributionValue.label.EUR': string;
+    'sections.shopCheckout.contributionValue.label.CHF': string;
+    'sections.shopCheckout.contributionValue.unit.EUR': string;
+    'sections.shopCheckout.contributionValue.unit.CHF': string;
+    'sections.shopCheckout.contributionValue.validation.empty': string;
+    'sections.shopCheckout.contributionValue.validation.tooLow.EUR': string;
+    'sections.shopCheckout.contributionValue.validation.tooLow.CHF': string;
+    'sections.shopCheckout.contributionValue.validation.tooHigh': string;
+    'sections.shopCheckout.summary.kg': string;
+    'sections.shopCheckout.summary.price': string;
+    'sections.shopCheckout.summary.price.taxNotIncluded': string;
+    'sections.shopCheckout.summary.price.taxIncluded': string;
+    'sections.shopCheckout.submit': string;
+    'sections.projectsMap.link.text': string;
+    'sections.projectFacts.projectInfo.value': string;
+    'projects.projectFacts.properties.area': string;
+    'sections.glossary.copyButtonLabel': string;
+    'sections.glossary.copySuccessMessage': string;
+    'sections.glossary.copyFailureMessage': string;
+    'sections.customerQuoteCard.more': string;
+    'sections.customerCard.more': string;
+    'sections.cta.backgroundShapesDark': string;
+    'sections.cta.backgroundShapesLight': string;
+    'sections.comparison.backgroundShapes': string;
+    'portfolio.smallCheckout.price.taxNotIncluded': string;
+    'portfolio.smallCheckout.price.taxIncluded': string;
+    'portfolio.smallCheckout.contributionValueCurrency.label.CHF': string;
+    'portfolio.smallCheckout.contributionValueCurrency.label.EUR': string;
+    'portfolio.smallCheckout.contributionValueCurrency.unit.EUR': string;
+    'portfolio.smallCheckout.contributionValueCurrency.unit.CHF': string;
+    'portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.CHF': string;
+    'portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.EUR': string;
+    'portfolio.smallCheckout.contributionValueCurrency.validation.empty': string;
+    'portfolio.smallCheckout.contributionValueCurrency.validation.tooHigh': string;
+    'portfolio.smallCheckout.contributionValueKgs.label': string;
+    'portfolio.smallCheckout.submitButton': string;
+    'portfolio.smallCheckout.cta.title': string;
+    'portfolio.smallCheckout.cta.subTitle': string;
+    'portfolio.smallCheckout.cta.button': string;
+    'features.projectInfo.projectInfo.value': string;
+    'features.projectInfo.properties.area': string;
+    'features.projectInfo.properties.location': string;
+    'features.projectInfo.properties.start': string;
+    'features.projectInfo.properties.timeSpan': string;
+    'features.projectInfo.properties.projectType': string;
+    'features.projectInfo.properties.projectDeveloper': string;
+    'features.projectInfo.properties.verificationStandard.label': string;
+    'features.projectInfo.properties.verificationStandard.value.SilvaconsultFCSISO14': string;
+    'features.projectInfo.properties.verificationStandard.value.MfKWCH': string;
+    'features.projectInfo.properties.forecastedAmountYear.label': string;
+    'features.projectInfo.properties.riskBuffer': string;
+    'features.projectInfo.properties.year': string;
+    'components.portfolioProjectCard.text.yes': string;
+    'components.portfolioProjectCard.text.some': string;
+    'components.portfolioProjectCard.text.no': string;
+    'components.portfolioProjectCard.text.notYet': string;
+    'features.portfolio.documentsDownloadList.projectDocuments': string;
+    'features.portfolio.documentsDownloadList.downloadDocument': string;
+    'components.creditsAvailableBadge.text.yes': string;
+    'components.creditsAvailableBadge.text.some': string;
+    'components.creditsAvailableBadge.text.no': string;
+    'components.creditsAvailableBadge.text.notYet': string;
+} | {
+    'unit.formatter.tonsCo2': string;
+    'unit.formatter.tonsCo2PerYear': string;
+    'sections.timeline.backgroundShapes': string;
+    'sections.timeline.showMoreButton': string;
+    'sections.textCarousel.moveRight': string;
+    'sections.textCarousel.moveLeft': string;
+    'sections.shopCheckout.intro.price': string;
+    'sections.shopCheckout.contributionValue.label.EUR': string;
+    'sections.shopCheckout.contributionValue.label.CHF': string;
+    'sections.shopCheckout.contributionValue.unit.EUR': string;
+    'sections.shopCheckout.contributionValue.unit.CHF': string;
+    'sections.shopCheckout.contributionValue.validation.empty': string;
+    'sections.shopCheckout.contributionValue.validation.tooLow.EUR': string;
+    'sections.shopCheckout.contributionValue.validation.tooLow.CHF': string;
+    'sections.shopCheckout.contributionValue.validation.tooHigh': string;
+    'sections.shopCheckout.summary.kg': string;
+    'sections.shopCheckout.summary.price': string;
+    'sections.shopCheckout.summary.price.taxNotIncluded': string;
+    'sections.shopCheckout.summary.price.taxIncluded': string;
+    'sections.shopCheckout.submit': string;
+    'sections.projectsMap.link.text': string;
+    'sections.projectFacts.projectInfo.value': string;
+    'projects.projectFacts.properties.area': string;
+    'sections.glossary.copyButtonLabel': string;
+    'sections.glossary.copySuccessMessage': string;
+    'sections.glossary.copyFailureMessage': string;
+    'sections.customerQuoteCard.more': string;
+    'sections.customerCard.more': string;
+    'sections.cta.backgroundShapes': string;
+    'sections.cta.backgroundShapesLight': string;
+    'sections.comparison.backgroundShapes': string;
+    'portfolio.smallCheckout.price.taxNotIncluded': string;
+    'portfolio.smallCheckout.price.taxIncluded': string;
+    'portfolio.smallCheckout.contributionValueCurrency.label.CHF': string;
+    'portfolio.smallCheckout.contributionValueCurrency.label.EUR': string;
+    'portfolio.smallCheckout.contributionValueCurrency.unit.EUR': string;
+    'portfolio.smallCheckout.contributionValueCurrency.unit.CHF': string;
+    'portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.CHF': string;
+    'portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.EUR': string;
+    'portfolio.smallCheckout.contributionValueCurrency.validation.empty': string;
+    'portfolio.smallCheckout.contributionValueCurrency.validation.tooHigh': string;
+    'portfolio.smallCheckout.contributionValueKgs.label': string;
+    'portfolio.smallCheckout.submitButton': string;
+    'portfolio.smallCheckout.cta.title': string;
+    'portfolio.smallCheckout.cta.subTitle': string;
+    'portfolio.smallCheckout.cta.button': string;
+    'features.projectInfo.projectInfo.value': string;
+    'features.projectInfo.properties.area': string;
+    'features.projectInfo.properties.location': string;
+    'features.projectInfo.properties.start': string;
+    'features.projectInfo.properties.timeSpan': string;
+    'features.projectInfo.properties.projectType': string;
+    'features.projectInfo.properties.projectDeveloper': string;
+    'features.projectInfo.properties.verificationStandard.label': string;
+    'features.projectInfo.properties.verificationStandard.value.SilvaconsultFCSISO14': string;
+    'features.projectInfo.properties.verificationStandard.value.MfKWCH': string;
+    'features.projectInfo.properties.forecastedAmountYear.label': string;
+    'features.projectInfo.properties.riskBuffer': string;
+    'features.projectInfo.properties.year': string;
+    'components.portfolioProjectCard.text.yes': string;
+    'components.portfolioProjectCard.text.some': string;
+    'components.portfolioProjectCard.text.no': string;
+    'components.portfolioProjectCard.text.notYet': string;
+    'features.portfolio.documentsDownloadList.projectDocuments': string;
+    'features.portfolio.documentsDownloadList.downloadDocument': string;
+    'components.creditsAvailableBadge.text.yes': string;
+    'components.creditsAvailableBadge.text.some': string;
+    'components.creditsAvailableBadge.text.no': string;
+    'components.creditsAvailableBadge.text.notYet': string;
+};
+export default getMessages;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "5.11.2",
+  "version": "5.12.0",
   "license": "MIT",
   "author": "Tree.ly FlexCo",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",

package/src/components/ContextProvider/ContextProvider.tsx

@@ -1,10 +1,8 @@
 import React, { createContext } from 'react';
 import { createIntl, createIntlCache } from 'react-intl';
-import rootMessagesDe from '../../rootMessages.de';
-import rootMessagesEn from '../../rootMessages.en';
-import Locale from '../../models/Locale';
 import { Global } from '@emotion/react';
 import { GLOBAL_STYLE } from '../../constants/globalStyle';
+import getMessages from '../../utils/getMessages';
 
 const cache = createIntlCache();
 
@@ -12,7 +10,7 @@ const intlFactory = (locale: string) =>
   createIntl(
     {
       locale,
-      messages: { de: rootMessagesDe, en: rootMessagesEn }[locale],
+      messages: getMessages(locale),
     },
     cache
   );
@@ -21,7 +19,7 @@ export const IntlContext = createContext(intlFactory('en'));
 
 export interface ContextProviderProps {
   children: React.ReactNode;
-  locale: Locale;
+  locale: string;
 }
 
 export const ContextProvider: React.FC<ContextProviderProps> = ({

package/src/components/MinimalProviders/MinimalProviders.tsx

@@ -1,14 +1,8 @@
 import React from 'react';
 import { FONT_CUSTOMIZATIONS } from '../../constants/fontCustomizations';
-import rootMessagesDe from '../../rootMessages.de';
-import rootMessagesEn from '../../rootMessages.en';
 import { BoemlyThemeProvider } from 'boemly';
 import { IntlProvider } from 'react-intl';
-
-const messages = {
-  en: rootMessagesEn,
-  de: rootMessagesDe,
-};
+import getMessages from '../../utils/getMessages';
 
 interface MinimalProvidersProps {
   locale: string;
@@ -16,7 +10,7 @@ interface MinimalProvidersProps {
 }
 
 const MinimalProviders = ({ children, locale }: MinimalProvidersProps) => (
-  <IntlProvider messages={messages[locale as 'en' | 'de']} locale={locale}>
+  <IntlProvider messages={getMessages(locale)} locale={locale}>
     <BoemlyThemeProvider fonts={FONT_CUSTOMIZATIONS}>
       {children}
     </BoemlyThemeProvider>

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useCallback, useContext } from 'react';
 import {
   BoemlyFormControl,
   Box,
@@ -29,6 +29,17 @@ 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;
@@ -55,9 +66,6 @@ const SmallCheckout = ({
 }: SmallCheckoutProps) => {
   const { formatNumber, formatMessage, locale } = useContext(IntlContext);
   const { push } = useRouter();
-  const [contributionValue, setContributionValue] = useState<number>(
-    initialContributionValue
-  );
 
   const validateForm = useCallback(
     (values: SmallCheckoutForm) => {
@@ -79,7 +87,7 @@ const SmallCheckout = ({
 
       return errors;
     },
-    [locale]
+    [currency, locale]
   );
 
   const onSubmit = async ({ contributionValueCurrency }: SmallCheckoutForm) => {
@@ -148,6 +156,7 @@ const SmallCheckout = ({
           touched,
           handleSubmit,
           setValues,
+          values,
         }: FormikProps<SmallCheckoutForm>) => (
           <Form onSubmit={handleSubmit}>
             <Flex gap="4">
@@ -162,7 +171,6 @@ const SmallCheckout = ({
                         value: field.value || '',
                         onChange: (e) => {
                           const value = e.target.valueAsNumber;
-                          setContributionValue(value);
 
                           setValues({
                             contributionValueCurrency: value.toString(),
@@ -231,24 +239,25 @@ const SmallCheckout = ({
                 </Field>
               </Box>
             </Flex>
-            {contributionValue > 0 && taxInPercent && taxInPercent > 0 && (
-              <Text size="smLowNormal" mt="2">
-                {formatMessage(
-                  { id: 'portfolio.smallCheckout.price.taxIncluded' },
-                  {
-                    number: formatNumber(
-                      contributionValue +
-                        (contributionValue * taxInPercent) / 100,
-                      {
-                        style: 'currency',
-                        currency,
-                        maximumFractionDigits: 2,
-                      }
-                    ),
-                  }
-                )}
-              </Text>
-            )}
+            {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" />
 

package/src/constants/strapi.ts

@@ -2,3 +2,5 @@ export const STRAPI_URI =
   process.env.NEXT_PUBLIC_STRAPI_URI || 'http://127.0.0.1:1337';
 
 export const STRAPI_DEFAULT_PAGE_SIZE = '100';
+
+export const STRAPI_FALLBACK_LOCALE = 'en';

package/src/index.tsx

@@ -31,8 +31,8 @@ import StrapiPageProps from './models/strapi/StrapiPageProps';
 import StrapiPortfolio from './models/strapi/StrapiPortfolio';
 import StrapiPortfolioCard from './models/strapi/StrapiPortfolioCard';
 import StrapiProject from './models/strapi/StrapiProject';
-import StrapiProjectProps from './models/strapi/StrapiProjectProps';
 import StrapiProjectCard from './models/strapi/StrapiProjectCard';
+import StrapiProjectProps from './models/strapi/StrapiProjectProps';
 import StrapiQuoteCard from './models/strapi/StrapiQuoteCard';
 import StrapiShapesCard from './models/strapi/StrapiShapesCard';
 import StrapiTextCardWithIcons from './models/strapi/StrapiTextCardWithIcons';
@@ -45,9 +45,12 @@ import PageMetadata from './models/PageMetadata';
 import PageProps from './models/PageProps';
 import PortfolioProject from './models/PortfolioProject';
 
+import getAllSlugsFromStrapi from './integrations/strapi/getAllSlugsFromStrapi';
 import getPortfolioProjects from './integrations/strapi/getPortfolioProjects';
 import getStaticPathsFromStrapi from './integrations/strapi/getStaticPathsFromStrapi';
 import getStaticPropsFromStrapi from './integrations/strapi/getStaticPropsFromStrapi';
+import getStrapiCollectionType from './integrations/strapi/getStrapiCollectionType';
+import getStrapiSingleType from './integrations/strapi/getStrapiSingleType';
 
 import mergeGlobalAndStrapiBlogPostData from './utils/mergeGlobalAndStrapiBlogPostData';
 import mergeGlobalAndStrapiCustomerStoryData from './utils/mergeGlobalAndStrapiCustomerStoryData';
@@ -70,9 +73,12 @@ export {
   strapiMediaUrl,
 
   // Integrations
+  getAllSlugsFromStrapi,
   getPortfolioProjects,
   getStaticPathsFromStrapi,
   getStaticPropsFromStrapi,
+  getStrapiCollectionType,
+  getStrapiSingleType,
 };
 
 export type {
@@ -110,8 +116,8 @@ export type {
   StrapiPortfolio,
   StrapiPortfolioCard,
   StrapiProject,
-  StrapiProjectProps,
   StrapiProjectCard,
+  StrapiProjectProps,
   StrapiQuoteCard,
   StrapiShapesCard,
   StrapiTextCardWithIcons,

package/src/integrations/strapi/getAllSlugsFromStrapi.test.ts

@@ -0,0 +1,33 @@
+import MockAxios from 'jest-mock-axios';
+import getAllSlugsFromStrapi from './getAllSlugsFromStrapi';
+import StrapiPage from '../../models/strapi/StrapiPage';
+import { strapiPageMock } from '../../test/strapiMocks/strapiPage';
+
+describe('The getAllSlugsFromStrapi function', () => {
+  afterEach(() => {
+    MockAxios.reset();
+  });
+
+  it('returns all slugs and creates a fallback for locales that dont have a translation', async () => {
+    const slugsPromise = getAllSlugsFromStrapi<StrapiPage>('/api/pages', [
+      'en',
+      'de',
+      'hu',
+    ]);
+
+    // This page is avaliable in 'de' and 'en'
+    MockAxios.mockResponseFor(
+      { url: '/api/pages' },
+      { data: { data: [strapiPageMock] } }
+    );
+
+    const slugs = await slugsPromise;
+
+    expect(slugs).toStrictEqual([
+      { locale: 'en', slug: strapiPageMock.attributes.slug },
+      { locale: 'de', slug: strapiPageMock.attributes.slug },
+      // Fallback for 'hu' gets created
+      { locale: 'hu', slug: strapiPageMock.attributes.slug },
+    ]);
+  });
+});

package/src/integrations/strapi/getAllSlugsFromStrapi.ts

@@ -0,0 +1,50 @@
+import strapiClient from './strapiClient';
+import {
+  STRAPI_DEFAULT_PAGE_SIZE,
+  STRAPI_FALLBACK_LOCALE,
+} from '../../constants/strapi';
+import IStrapiResponse from '../../models/strapi/IStrapiResponse';
+import IStrapiData from '../../models/strapi/IStrapiData';
+import LocalizedEntity from '../../models/LocalizedEntity';
+
+interface Options {
+  filters?: Record<string, any>;
+}
+
+type Slug = { slug: string; locale: string };
+
+const getAllSlugsFromStrapi = async <T extends LocalizedEntity<'slug'>>(
+  path: string,
+  locales: string[],
+  { filters = {} }: Options = { filters: {} }
+): Promise<Slug[]> => {
+  const params: Record<string, any> = {
+    locale: 'all',
+    'pagination[pageSize]': STRAPI_DEFAULT_PAGE_SIZE,
+    filters,
+  };
+
+  const { data } = await strapiClient.get<IStrapiResponse<IStrapiData<T>[]>>(
+    path,
+    { params }
+  );
+
+  const slugs: Slug[] = data.data.map((page) => ({
+    slug: page.attributes.slug,
+    locale: page.attributes.locale,
+  }));
+
+  const fallBackSlugs: Slug[] = locales.flatMap((locale) =>
+    slugs
+      .filter((slug) => slug.locale === STRAPI_FALLBACK_LOCALE)
+      .map((slug) => ({ ...slug, locale }))
+  );
+
+  const nonFallbackSlugs = slugs.filter(
+    (p) => p.locale !== STRAPI_FALLBACK_LOCALE
+  );
+
+  return [...fallBackSlugs, ...nonFallbackSlugs];
+};
+
+export default getAllSlugsFromStrapi;

package/src/integrations/strapi/getPortfolioProjects.test.ts

@@ -19,6 +19,30 @@ describe('The getPortfolioProjects function', () => {
       { url: '/projects' },
       { data: { data: [strapiProjectMock] } }
     );
+    MockAxios.mockResponseFor({ url: '/projects' }, { data: { data: [] } });
+
+    const projects = await projectsPromise;
+
+    expect(projects.length).toBe(1);
+    expect(projects[0]).toStrictEqual({
+      ...fpmProjectMock,
+      slug: strapiProjectMock.attributes.slug,
+      creditsAvailable: strapiProjectMock.attributes.creditsAvailable,
+    });
+  });
+
+  it('returns the FPM project in english if no localized version is available', async () => {
+    const projectsPromise = getPortfolioProjects('de');
+
+    MockAxios.mockResponseFor(
+      { url: '/public/projects' },
+      { data: [fpmProjectMock] }
+    );
+    MockAxios.mockResponseFor({ url: '/projects' }, { data: { data: [] } });
+    MockAxios.mockResponseFor(
+      { url: '/projects' },
+      { data: { data: [strapiProjectMock] } }
+    );
 
     const projects = await projectsPromise;
 

package/src/integrations/strapi/getPortfolioProjects.ts

@@ -9,6 +9,8 @@ import FPMProject from '../../models/fpm/FPMProject';
 import fpmClient from '../fpmClient';
 import strapiClient from './strapiClient';
 
+const FALLBACK_LOCALE = 'en';
+
 const getPortfolioProjects = async (
   locale: string = 'en',
   preview: boolean = false
@@ -23,7 +25,11 @@ const getPortfolioProjects = async (
     params.publicationState = 'preview';
   }
 
-  const [{ data: fpmProjects }, { data: strapiProjects }] = await Promise.all([
+  const [
+    { data: fpmProjects },
+    { data: strapiProjectsLocalized },
+    { data: strapiProjectsEnglish },
+  ] = await Promise.all([
     fpmClient.get<FPMProject[]>('/public/projects'),
     strapiClient.get<IStrapiResponse<IStrapiData<StrapiProject>[]>>(
       '/projects',
@@ -31,13 +37,27 @@ const getPortfolioProjects = async (
         params,
       }
     ),
+    strapiClient.get<IStrapiResponse<IStrapiData<StrapiProject>[]>>(
+      '/projects',
+      {
+        params: { ...params, locale: FALLBACK_LOCALE },
+      }
+    ),
   ]);
 
+  const strapiProjects = new Map<string, IStrapiData<StrapiProject>>();
+
+  for (const project of [
+    ...strapiProjectsEnglish.data,
+    ...strapiProjectsLocalized.data,
+  ]) {
+    if (project.attributes.fpmProjectId) {
+      strapiProjects.set(project.attributes.fpmProjectId, project);
+    }
+  }
+
   return fpmProjects.map((fpmProject: FPMProject) => {
-    const strapiProject = strapiProjects.data.find(
-      (sp: IStrapiData<StrapiProject>) =>
-        sp.attributes.fpmProjectId === fpmProject.id
-    );
+    const strapiProject = strapiProjects.get(fpmProject.id);
 
     const toReturn: PortfolioProject = fpmProject;
 

package/src/integrations/strapi/getStaticPathsFromStrapi.ts

@@ -6,6 +6,7 @@ interface Options {
   filters?: Record<string, any>;
 }
 
+/** @deprecated Migrate to getAllSlugsFromStrapi */
 const getStaticPathsFromStrapi = async (
   path: string,
   { filters = {} }: Options = { filters: {} }

package/src/integrations/strapi/getStaticPropsFromStrapi.ts

@@ -9,6 +9,7 @@ interface Options {
   filters?: Record<string, any>;
 }
 
+/** @deprecated Migrate to getStrapiSingleType or getStrapiCollectionType */
 const getStaticPropsFromStrapi = async (
   path: string,
   { locale = 'en', slug, preview = false, filters = {} }: Options

package/src/integrations/strapi/getStrapiCollectionType.test.ts

@@ -0,0 +1,65 @@
+import MockAxios from 'jest-mock-axios';
+import getStrapiCollectionType from './getStrapiCollectionType';
+import StrapiPage from '../../models/strapi/StrapiPage';
+import { strapiPageMock } from '../../test/strapiMocks/strapiPage';
+
+describe('The getStrapiCollectionType function', () => {
+  const germanStrapiPageMock = {
+    ...strapiPageMock,
+    attributes: {
+      ...strapiPageMock.attributes,
+      locale: 'de',
+      title: 'Über uns',
+    },
+  };
+
+  afterEach(() => {
+    MockAxios.reset();
+  });
+
+  it('returns the localized versions if available', async () => {
+    const pages = getStrapiCollectionType<StrapiPage, 'slug'>(
+      '/api/pages',
+      'slug',
+      { locale: 'de' }
+    );
+
+    MockAxios.mockResponseFor(
+      { url: '/api/pages' },
+      { data: { data: [strapiPageMock, germanStrapiPageMock] } }
+    );
+
+    const page = await pages;
+
+    expect(page).toStrictEqual([
+      expect.objectContaining({
+        attributes: expect.objectContaining({ title: 'Über uns' }),
+      }),
+    ]);
+
+    expect(page).toHaveLength(1);
+  });
+
+  it('returns the english versions if no localized version is available', async () => {
+    const pages = getStrapiCollectionType<StrapiPage, 'slug'>(
+      '/api/pages',
+      'slug',
+      { locale: 'de' }
+    );
+
+    MockAxios.mockResponseFor(
+      { url: '/api/pages' },
+      { data: { data: [strapiPageMock] } }
+    );
+
+    const page = await pages;
+
+    expect(page).toStrictEqual([
+      expect.objectContaining({
+        attributes: expect.objectContaining({ title: 'About us' }),
+      }),
+    ]);
+
+    expect(page).toHaveLength(1);
+  });
+});