@treely/strapi-slices 2.0.0 → 2.2.0

package/src/utils/mergeGlobalAndStrapiCustomerStoryData.test.ts

@@ -0,0 +1,149 @@
+import mergeGlobalAndStrapiCustomerStoryData from './mergeGlobalAndStrapiCustomerStoryData';
+import { strapiCustomerStoryMock } from '../test/strapiMocks/strapiCustomerStory';
+import getStaticPropsContextMock from '../test/mocks/getStaticPropsContext';
+import minimalGlobalData from '../test/strapiMocks/minimalGlobalData';
+import { strapiMetadataMock } from '../test/strapiMocks/strapiMetadata';
+
+describe('The mergeGlobalAndStrapiCustomerStoryData util', () => {
+  it('returns the global metadata if there is no page metadata', () => {
+    const pageDataWithoutMetadata = {
+      ...strapiCustomerStoryMock,
+      attributes: {
+        ...strapiCustomerStoryMock.attributes,
+        metadata: null,
+      },
+    };
+
+    const result = mergeGlobalAndStrapiCustomerStoryData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      pageDataWithoutMetadata,
+      []
+    );
+
+    expect(result.attributes.metadata).toBe(
+      minimalGlobalData.attributes.metadata
+    );
+    expect(result.metadata.title).toBe(
+      minimalGlobalData.attributes.metadata.title
+    );
+    expect(result.metadata.description).toBe(
+      minimalGlobalData.attributes.metadata.description
+    );
+  });
+
+  it('returns the pages metadata if the page data includes metadata', () => {
+    const pageDataWithMetadata = {
+      ...strapiCustomerStoryMock,
+      data: {
+        ...strapiCustomerStoryMock,
+        attributes: {
+          ...strapiCustomerStoryMock.attributes,
+          metadata: strapiMetadataMock,
+        },
+      },
+    };
+
+    const result = mergeGlobalAndStrapiCustomerStoryData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      pageDataWithMetadata,
+      []
+    );
+
+    expect(result.attributes.metadata?.title).toBe(strapiMetadataMock.title);
+    expect(result.metadata?.title).toBe(strapiMetadataMock.title);
+  });
+
+  it('returns the navbar links if there are links in the global data', () => {
+    const result = mergeGlobalAndStrapiCustomerStoryData(
+      getStaticPropsContextMock,
+      {
+        ...minimalGlobalData,
+        attributes: {
+          ...minimalGlobalData.attributes,
+          navbar: {
+            ...minimalGlobalData.attributes.navbar,
+            navMenus: [
+              {
+                link: {
+                  id: Infinity,
+                  text: 'Text',
+                  url: '/',
+                },
+                title: 'Title',
+                items: [],
+              },
+            ],
+          },
+        },
+      },
+      strapiCustomerStoryMock,
+      []
+    );
+
+    expect(result.headerNavMenus).toStrictEqual([
+      {
+        title: 'Title',
+        items: [],
+        link: { id: Infinity, text: 'Text', url: '/' },
+      },
+    ]);
+  });
+
+  it('returns the navbar buttons if there are buttons in the global data', () => {
+    const result = mergeGlobalAndStrapiCustomerStoryData(
+      getStaticPropsContextMock,
+      {
+        ...minimalGlobalData,
+        attributes: {
+          ...minimalGlobalData.attributes,
+          navbar: {
+            ...minimalGlobalData.attributes.navbar,
+            buttons: [
+              {
+                id: Infinity,
+                text: 'Header button',
+                url: '/',
+              },
+            ],
+          },
+        },
+      },
+      strapiCustomerStoryMock,
+      []
+    );
+
+    expect(result.headerButtons).toStrictEqual([
+      { id: Infinity, text: 'Header button', url: '/' },
+    ]);
+  });
+
+  it('returns the footer links if there are links in the global data', () => {
+    const result = mergeGlobalAndStrapiCustomerStoryData(
+      getStaticPropsContextMock,
+      {
+        ...minimalGlobalData,
+        attributes: {
+          ...minimalGlobalData.attributes,
+          footer: {
+            ...minimalGlobalData.attributes.footer,
+            links: [
+              {
+                id: Infinity,
+                title: 'Title',
+                links: [],
+              },
+            ],
+          },
+        },
+      },
+      strapiCustomerStoryMock,
+      []
+    );
+
+    expect(result.footerLinks).toStrictEqual([
+      { id: Infinity, title: 'Title', links: [] },
+    ]);
+  });
+});

package/src/utils/mergeGlobalAndStrapiCustomerStoryData.ts

@@ -0,0 +1,68 @@
+import { GetStaticPropsContext } from 'next';
+import strapiMediaUrl from './strapiMediaUrl';
+import {
+  IStrapiData,
+  StrapiCustomerStory,
+  StrapiCustomerStoryProps,
+  StrapiGlobal,
+} from '..';
+import { DEFAULT_SHARE_ALT, DEFAULT_SHARE_IMAGE } from '../constants/metadata';
+
+const mergeGlobalAndStrapiCustomerStoryData = (
+  context: GetStaticPropsContext,
+  global: IStrapiData<StrapiGlobal>,
+  customerStory: IStrapiData<StrapiCustomerStory>,
+  customerStories: IStrapiData<StrapiCustomerStory>[]
+): StrapiCustomerStoryProps => {
+  const metaShareImageUrl = customerStory.attributes.metadata?.shareImage
+    ? strapiMediaUrl(
+        customerStory.attributes.metadata?.shareImage.media ??
+          global.attributes.metadata.shareImage?.media,
+        'large'
+      )
+    : DEFAULT_SHARE_IMAGE;
+
+  return {
+    ...customerStory,
+    // Portfolio Projects
+    projects: [],
+    attributes: {
+      ...customerStory?.attributes,
+      metadata:
+        customerStory?.attributes?.metadata || global.attributes.metadata,
+    },
+    // PageProps
+    headerType: {
+      extendable: true,
+      theme: 'light',
+    },
+    headerNavMenus: global.attributes.navbar.navMenus || [],
+    headerButtons: global.attributes.navbar.buttons || [],
+    footerLinks: global.attributes.footer.links || [],
+    metadata: {
+      title:
+        customerStory.attributes.metadata?.title ??
+        global.attributes.metadata.title,
+      description:
+        customerStory.attributes.metadata?.description ??
+        global.attributes.metadata.description,
+      shareImage: {
+        url: metaShareImageUrl,
+        alt:
+          customerStory.attributes.metadata?.shareImage?.alt ??
+          global.attributes.metadata.shareImage?.alt ??
+          DEFAULT_SHARE_ALT,
+      },
+      metaTitleSuffix: global.attributes.metaTitleSuffix,
+      favicon: strapiMediaUrl(global.attributes.favicon, 'thumbnail'),
+    },
+    slices: customerStory?.attributes.slices,
+    customerStories,
+    banner: global.attributes.banner,
+    topBanner:
+      customerStory?.attributes.topBanner || global.attributes.topBanner,
+    blogPosts: [],
+  };
+};
+
+export default mergeGlobalAndStrapiCustomerStoryData;

package/src/utils/mergeGlobalAndStrapiPageData.test.ts

@@ -0,0 +1,254 @@
+import minimalGlobalData from '../test/strapiMocks/minimalGlobalData';
+import mergeGlobalAndStrapiPageData from './mergeGlobalAndStrapiPageData';
+import { strapiPageMock } from '../test/strapiMocks/strapiPage';
+import getStaticPropsContextMock from '../test/mocks/getStaticPropsContext';
+import { strapiMetadataMock } from '../test/strapiMocks/strapiMetadata';
+
+describe('The mergeGlobalAndStrapiPageData util', () => {
+  it('returns the global metadata if there is no page metadata', () => {
+    const pageDataWithoutMetadata = {
+      ...strapiPageMock,
+      attributes: {
+        ...strapiPageMock.attributes,
+        metadata: null,
+      },
+    };
+
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      pageDataWithoutMetadata,
+      [],
+      [],
+      []
+    );
+
+    expect(result.attributes.metadata).toBe(
+      minimalGlobalData.attributes.metadata
+    );
+    expect(result.metadata.title).toBe(
+      minimalGlobalData.attributes.metadata.title
+    );
+    expect(result.metadata.description).toBe(
+      minimalGlobalData.attributes.metadata.description
+    );
+  });
+
+  it('returns the pages metadata if the page data includes metadata', () => {
+    const pageDataWithMetadata = {
+      ...strapiPageMock,
+      attributes: {
+        ...strapiPageMock.attributes,
+        metadata: strapiMetadataMock,
+      },
+    };
+
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      pageDataWithMetadata,
+      [],
+      [],
+      []
+    );
+
+    expect(result.attributes.metadata?.title).toBe(strapiMetadataMock.title);
+    expect(result.metadata?.title).toBe(strapiMetadataMock.title);
+  });
+
+  it('returns a light theme header type if the first slice of the page is not a hero', () => {
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiPageMock,
+        attributes: {
+          ...strapiPageMock.attributes,
+          slices: [{ __component: 'no.hero.section' }],
+        },
+      },
+      [],
+      [],
+      []
+    );
+
+    expect(result.headerType?.theme).toBe('light');
+  });
+
+  it('returns a light theme header type if the slices array is empty', () => {
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiPageMock,
+        attributes: {
+          ...strapiPageMock.attributes,
+          slices: [],
+        },
+      },
+      [],
+      [],
+      []
+    );
+
+    expect(result.headerType?.theme).toBe('light');
+  });
+
+  it('returns a dark theme header type if the first slice of the page is a hero', () => {
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiPageMock,
+        attributes: {
+          ...strapiPageMock.attributes,
+          slices: [{ __component: 'sections.hero' }],
+        },
+      },
+      [],
+      [],
+      []
+    );
+
+    expect(result.headerType?.theme).toBe('dark');
+  });
+
+  it('returns a not extendable header type if the first slice of the page is not a hero', () => {
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiPageMock,
+        attributes: {
+          ...strapiPageMock.attributes,
+          slices: [{ __component: 'no.hero.section' }],
+        },
+      },
+      [],
+      [],
+      []
+    );
+
+    expect(result.headerType?.extendable).toBe(false);
+  });
+
+  it('returns a not extendable header type if the slices array is empty', () => {
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiPageMock,
+        attributes: {
+          ...strapiPageMock.attributes,
+          slices: [],
+        },
+      },
+      [],
+      [],
+      []
+    );
+
+    expect(result.headerType?.extendable).toBe(false);
+  });
+
+  it('returns an extendable header type if the first slice of the page is a hero', () => {
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiPageMock,
+        attributes: {
+          ...strapiPageMock.attributes,
+          slices: [{ __component: 'sections.hero' }],
+        },
+      },
+      [],
+      [],
+      []
+    );
+
+    expect(result.headerType?.extendable).toBe(true);
+  });
+
+  it('returns the navbar links if there are links in the global data', () => {
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      {
+        ...minimalGlobalData,
+        attributes: {
+          ...minimalGlobalData.attributes,
+          navbar: {
+            ...minimalGlobalData.attributes.navbar,
+            navMenus: [
+              {
+                link: { id: Infinity, text: 'Text', url: '/' },
+                title: 'Title',
+                items: [],
+              },
+            ],
+          },
+        },
+      },
+      strapiPageMock,
+      [],
+      [],
+      []
+    );
+
+    expect(result.headerNavMenus).toStrictEqual([
+      {
+        link: { id: Infinity, text: 'Text', url: '/' },
+        items: [],
+        title: 'Title',
+      },
+    ]);
+  });
+
+  it('returns the navbar buttons if there are buttons in the global data', () => {
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      {
+        ...minimalGlobalData,
+        attributes: {
+          ...minimalGlobalData.attributes,
+          navbar: {
+            ...minimalGlobalData.attributes.navbar,
+            buttons: [{ id: Infinity, text: 'Header button', url: '/' }],
+          },
+        },
+      },
+      strapiPageMock,
+      [],
+      [],
+      []
+    );
+
+    expect(result.headerButtons).toStrictEqual([
+      { id: Infinity, text: 'Header button', url: '/' },
+    ]);
+  });
+
+  it('returns the footer links if there are links in the global data', () => {
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      {
+        ...minimalGlobalData,
+        attributes: {
+          ...minimalGlobalData.attributes,
+          footer: {
+            ...minimalGlobalData.attributes.footer,
+            links: [{ id: Infinity, title: 'Text', links: [] }],
+          },
+        },
+      },
+      strapiPageMock,
+      [],
+      [],
+      []
+    );
+
+    expect(result.footerLinks).toStrictEqual([
+      { id: Infinity, title: 'Text', links: [] },
+    ]);
+  });
+});

package/src/utils/mergeGlobalAndStrapiPageData.ts

@@ -0,0 +1,81 @@
+import { GetStaticPropsContext } from 'next';
+import strapiMediaUrl from './strapiMediaUrl';
+import {
+  IStrapiData,
+  StrapiBlogPost,
+  StrapiCustomerStory,
+  StrapiGlobal,
+  StrapiPage,
+  StrapiPageProps,
+} from '..';
+import PortfolioProject from '../models/PortfolioProject';
+import {
+  DARK_THEME_HEADER_SECTIONS,
+  EXTENDABLE_HEADER_SECTIONS,
+} from '../constants/sectionsConfig';
+import { DEFAULT_SHARE_ALT, DEFAULT_SHARE_IMAGE } from '../constants/metadata';
+
+const mergeGlobalAndStrapiPageData = (
+  context: GetStaticPropsContext,
+  global: IStrapiData<StrapiGlobal>,
+  page: IStrapiData<StrapiPage>,
+  blogPosts: IStrapiData<StrapiBlogPost>[],
+  customerStories: IStrapiData<StrapiCustomerStory>[],
+  projects: PortfolioProject[]
+): StrapiPageProps => {
+  const metaShareImageUrl = page.attributes.metadata?.shareImage
+    ? strapiMediaUrl(
+        page.attributes.metadata?.shareImage.media ??
+          global.attributes.metadata.shareImage?.media,
+        'large'
+      )
+    : DEFAULT_SHARE_IMAGE;
+
+  return {
+    ...page,
+    // Portfolio Projects
+    projects,
+    // StrapiPage
+    attributes: {
+      ...page?.attributes,
+      metadata: page?.attributes?.metadata ?? global.attributes.metadata,
+    },
+    // PageProps
+    headerType: {
+      extendable: EXTENDABLE_HEADER_SECTIONS.includes(
+        page.attributes.slices[0]?.__component
+      ),
+      theme: DARK_THEME_HEADER_SECTIONS.includes(
+        page.attributes.slices[0]?.__component
+      )
+        ? 'dark'
+        : 'light',
+    },
+    headerNavMenus: global.attributes.navbar.navMenus || [],
+    headerButtons: global.attributes.navbar.buttons || [],
+    footerLinks: global.attributes.footer.links || [],
+    metadata: {
+      title:
+        page.attributes.metadata?.title ?? global.attributes.metadata.title,
+      description:
+        page.attributes.metadata?.description ??
+        global.attributes.metadata.description,
+      shareImage: {
+        url: metaShareImageUrl,
+        alt:
+          page.attributes.metadata?.shareImage?.alt ??
+          global.attributes.metadata.shareImage?.alt ??
+          DEFAULT_SHARE_ALT,
+      },
+      metaTitleSuffix: global.attributes.metaTitleSuffix,
+      favicon: strapiMediaUrl(global.attributes.favicon, 'thumbnail'),
+    },
+    slices: page?.attributes.slices,
+    blogPosts,
+    banner: global.attributes.banner,
+    topBanner: page?.attributes.topBanner || global.attributes.topBanner,
+    customerStories,
+  };
+};
+
+export default mergeGlobalAndStrapiPageData;