@treely/strapi-slices 7.1.4 → 7.3.0

package/src/components/StrapiLinkButton/StrapiLinkButton.tsx

@@ -20,6 +20,7 @@ export interface StrapiLinkButtonProps {
   mx?: any;
   my?: any;
   background?: string;
+  width?: string;
 }
 
 export const StrapiLinkButton: React.FC<StrapiLinkButtonProps> = ({

package/src/index.tsx

@@ -12,6 +12,7 @@ import StrapiContactArea from './models/strapi/StrapiContactArea';
 import StrapiCustomerStory from './models/strapi/StrapiCustomerStory';
 import StrapiCustomerStoryProps from './models/strapi/StrapiCustomerStoryProps';
 import StrapiDefaultHeader from './models/strapi/StrapiDefaultHeader';
+import StrapiEvent from './models/strapi/StrapiEvent';
 import StrapiGlobal from './models/strapi/StrapiGlobal';
 import StrapiGlossaryItem from './models/strapi/StrapiGlossaryItem';
 import StrapiHeroCard from './models/strapi/StrapiHeroCard';
@@ -93,6 +94,7 @@ export type {
   StrapiCustomerStory,
   StrapiCustomerStoryProps,
   StrapiDefaultHeader,
+  StrapiEvent,
   StrapiGlobal,
   StrapiGlossaryItem,
   StrapiHeroCard,

package/src/models/SWRData.ts

@@ -0,0 +1,6 @@
+interface SWRData<Data = any> {
+  body?: Data;
+  headers: Headers;
+}
+
+export default SWRData;

package/src/models/hooks/UseInfiniteDataHookProps.tsx

@@ -0,0 +1,13 @@
+import SWRData from '../SWRData';
+
+interface UseInfiniteDataHookProps<T> {
+  data: SWRData<T[]>[] | undefined;
+  isLoading: boolean;
+  isLoadingMore: boolean;
+  canLoadMore: boolean;
+  refetch: () => void;
+  loadMore: () => void;
+  count: number;
+}
+
+export default UseInfiniteDataHookProps;

package/src/models/hooks/useEvents.ts

@@ -0,0 +1,46 @@
+import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite';
+import { useCallback, useMemo } from 'react';
+import UseInfiniteDataHookProps from './UseInfiniteDataHookProps';
+import SWRData from '../SWRData';
+import IStrapiResponse from '../../models/strapi/IStrapiResponse';
+import StrapiEvent from '../strapi/StrapiEvent';
+
+const useEvents = ({
+  getKey,
+  batchSize,
+}: {
+  getKey: SWRInfiniteKeyLoader;
+  batchSize: number;
+}): UseInfiniteDataHookProps<IStrapiResponse<StrapiEvent[]>[]> => {
+  const { data, isLoading, setSize, size, mutate } = useSWRInfinite<
+    SWRData<IStrapiResponse<StrapiEvent[]>>
+  >(getKey, { revalidateFirstPage: false, revalidateAll: false });
+
+  const count: number | undefined = useMemo(() => {
+    return data?.[0]?.body?.meta?.pagination?.total || 0;
+  }, [data]);
+
+  const isLoadingMore = useMemo(
+    () => !!(size > 0 && data && typeof data[size - 1] === 'undefined'),
+    [size, data]
+  );
+
+  const loadMore = useCallback(() => setSize(size + 1), [setSize, size]);
+
+  const canLoadMore = useMemo(
+    () => count !== undefined && size * batchSize < count,
+    [count, size, batchSize]
+  );
+
+  return {
+    data: data as any,
+    isLoading,
+    isLoadingMore,
+    canLoadMore,
+    refetch: mutate,
+    loadMore,
+    count,
+  };
+};
+
+export default useEvents;

package/src/models/strapi/StrapiEvent.ts

@@ -0,0 +1,51 @@
+import Locale from '../Locale';
+import StrapiImage from './StrapiImage';
+import StrapiLink from './StrapiLink';
+import StrapiLocalization from './StrapiLocalization';
+import StrapiTopBanner from './StrapiTopBanner';
+
+export enum EventType {
+  CONFERENCE = 'Conference',
+  MEET_UP = 'Meet Up',
+  WEBINAR = 'Webinar',
+  FOREST_WALK = 'Forest Walk',
+  LUNCH_AND_LEARN = 'Lunch & Learn',
+  FESTIVAL = 'Festival',
+  ROADSHOW = 'RoadShow',
+  PARTNER_EVENT = 'Partner Event',
+  FAIR = 'Fair',
+}
+
+interface StrapiEvent {
+  title: string;
+  description: string;
+  button: StrapiLink;
+  buttonVariant?: 'outline' | 'ghost' | 'link' | 'solid' | 'outlineWhite';
+  recommended?: boolean;
+  speakers: {
+    id: number;
+    name: string;
+    image: StrapiImage;
+  }[];
+  image: StrapiImage;
+  logo: StrapiImage;
+  eventTypes: {
+    id: number;
+    eventType: EventType;
+  }[];
+  languages: {
+    id: number;
+    language: string;
+    countryCode: string;
+  }[];
+  location?: string;
+  locale: Locale;
+  online?: boolean;
+  start: Date;
+  end: Date;
+  slices: any[];
+  localizations: StrapiLocalization[];
+  topBanner?: StrapiTopBanner;
+}
+
+export default StrapiEvent;

package/src/rootMessages.de.ts

@@ -3,6 +3,8 @@ import creditsAvailableBadgeMessagesDe from './components/CreditsAvailableBadge/
 import ctaMessagesDe from './slices/Cta/messages.de';
 import customerCardMessagesDe from './components/CustomerCard/messages.de';
 import customerQuoteCardMessagesDe from './components/CustomerQuoteCard/messages.de';
+import eventCardMessagesDe from './components/EventCard/messages.de';
+import eventsMessagesDe from './slices/Events/messages.de';
 import glossaryMessagesDe from './slices/Glossary/messages.de';
 import portfolioDocumentsDownloadListMessagesDe from './components/portfolio/DocumentsDownloadList/messages.de';
 import projectFactsMessagesDe from './slices/ProjectFacts/messages.de';
@@ -21,6 +23,7 @@ const rootMessagesDe = {
   // Components
   //
   ...creditsAvailableBadgeMessagesDe,
+  ...eventCardMessagesDe,
   ...portfolioDocumentsDownloadListMessagesDe,
   ...portfolioProjectInfoMessagesDe,
   ...portfolioSmallCheckoutMessagesDe,
@@ -33,6 +36,7 @@ const rootMessagesDe = {
   ...ctaMessagesDe,
   ...customerCardMessagesDe,
   ...customerQuoteCardMessagesDe,
+  ...eventsMessagesDe,
   ...glossaryMessagesDe,
   ...projectFactsMessagesDe,
   ...projectsMapMessagesDe,

package/src/rootMessages.en.ts

@@ -3,6 +3,8 @@ import creditsAvailableBadgeMessagesEn from './components/CreditsAvailableBadge/
 import ctaMessagesEn from './slices/Cta/messages.en';
 import customerCardMessagesEn from './components/CustomerCard/messages.en';
 import customerQuoteCardMessagesEn from './components/CustomerQuoteCard/messages.en';
+import eventCardMessagesEn from './components/EventCard/messages.en';
+import eventsMessagesEn from './slices/Events/messages.en';
 import glossaryMessagesEn from './slices/Glossary/messages.en';
 import portfolioDocumentsDownloadListMessagesEn from './components/portfolio/DocumentsDownloadList/messages.en';
 import projectFactsMessagesEn from './slices/ProjectFacts/messages.en';
@@ -21,6 +23,7 @@ const rootMessagesEn = {
   // Components
   //
   ...creditsAvailableBadgeMessagesEn,
+  ...eventCardMessagesEn,
   ...portfolioDocumentsDownloadListMessagesEn,
   ...portfolioProjectInfoMessagesEn,
   ...portfolioSmallCheckoutMessagesEn,
@@ -33,6 +36,7 @@ const rootMessagesEn = {
   ...ctaMessagesEn,
   ...customerCardMessagesEn,
   ...customerQuoteCardMessagesEn,
+  ...eventsMessagesEn,
   ...glossaryMessagesEn,
   ...projectFactsMessagesEn,
   ...projectsMapMessagesEn,

package/src/slices/Events/Events.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import Events from '.';
+
+export default {
+  title: 'slices/Events',
+  component: Events,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta<typeof Events>;
+
+const Template: StoryFn<typeof Events> = (args) => <Events {...args} />;
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    upcomingTitle: 'Tree.ly Events',
+    upcomingDescription: 'Join us for these amazing events',
+    pastTitle: 'Past Events',
+    pastDescription: 'Check out our past events',
+    filterSearch: false,
+  },
+};
+
+export const WithFilterSearch = Template.bind({});
+WithFilterSearch.args = {
+  slice: {
+    upcomingTitle: 'Tree.ly Events',
+    upcomingDescription: 'Join us for these amazing events',
+    pastTitle: 'Past Events',
+    pastDescription: 'Check out our past events',
+    filterSearch: true,
+  },
+};

package/src/slices/Events/Events.test.tsx

@@ -0,0 +1,344 @@
+import { mergeDeep } from '../../utils/mergeDeep';
+import { EventsProps } from './Events';
+import Events from '.';
+import { render, screen, waitFor } from '../../test/testUtils';
+import React from 'react';
+import { strapiEventMock } from '../../test/strapiMocks/strapiEventMock';
+import useEvents from '../../models/hooks/useEvents';
+import messagesEn from './messages.en';
+import { EventType } from '../../models/strapi/StrapiEvent';
+import userEvent from '@testing-library/user-event';
+import messagesEnEventCard from '../../components/EventCard/messages.en';
+
+jest.mock('../../models/hooks/useEvents');
+
+const NOW = new Date('2025-01-01T12:00:00.000Z');
+
+const pastEventMock = {
+  ...strapiEventMock,
+  attributes: {
+    ...strapiEventMock.attributes,
+    title: 'Past Event',
+    start: '2024-12-01T10:00:00.000Z',
+    eventTypes: [{ id: 1, eventType: EventType.MEET_UP }],
+    languages: [{ id: 1, language: 'English', countryCode: 'GB' }],
+  },
+};
+
+const upcomingEventMock = {
+  ...strapiEventMock,
+  attributes: {
+    ...strapiEventMock.attributes,
+    title: 'Upcoming Event',
+    start: '2025-02-01T10:00:00.000Z',
+    eventTypes: [{ id: 1, eventType: EventType.CONFERENCE }],
+    languages: [{ id: 1, language: 'German', countryCode: 'DE' }],
+  },
+};
+
+const defaultProps: EventsProps = {
+  slice: {
+    upcomingTitle: 'Upcoming Events',
+    upcomingDescription: 'Join us for these amazing events',
+    pastTitle: 'Past Events',
+    pastDescription: 'Check out our past events',
+    filterSearch: true,
+  },
+};
+
+let getKeyCalls: string[] = [];
+
+const setup = (props = {}) => {
+  const combinedProps = mergeDeep(defaultProps, props);
+  render(<Events {...combinedProps} />);
+};
+
+describe('The Events slice', () => {
+  beforeEach(() => {
+    jest.useFakeTimers().setSystemTime(NOW);
+    getKeyCalls = [];
+
+    (useEvents as jest.Mock).mockImplementation(({ getKey }) => {
+      const key = getKey(0, null);
+      getKeyCalls.push(key.toString());
+
+      if (getKey.toString().includes('filters[start][$gte]')) {
+        return {
+          data: [{ body: { data: [upcomingEventMock] } }],
+          isLoading: false,
+          isLoadingMore: false,
+          canLoadMore: false,
+          loadMore: jest.fn(),
+        };
+      }
+      if (getKey.toString().includes('filters[start][$lt]')) {
+        return {
+          data: [{ body: { data: [pastEventMock] } }],
+          isLoading: false,
+          isLoadingMore: false,
+          canLoadMore: false,
+          loadMore: jest.fn(),
+        };
+      }
+      return {
+        data: [],
+        isLoading: false,
+        isLoadingMore: false,
+        canLoadMore: false,
+        loadMore: jest.fn(),
+      };
+    });
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.useRealTimers();
+  });
+
+  it('displays the title and tagline if it is defined', async () => {
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByText('Upcoming Events')).toBeInTheDocument();
+      expect(screen.getByText('Past Events')).toBeInTheDocument();
+      expect(
+        screen.getByText('Join us for these amazing events')
+      ).toBeInTheDocument();
+      expect(screen.getByText('Check out our past events')).toBeInTheDocument();
+    });
+  });
+
+  it('displays upcoming and past events correctly', async () => {
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByText('Past Event')).toBeInTheDocument();
+      expect(screen.getByText('Upcoming Event')).toBeInTheDocument();
+      expect(screen.queryAllByText('Event Description')).toHaveLength(2);
+      expect(
+        screen.getByText(
+          messagesEnEventCard['sections.eventCard.eventType.meetup']
+        )
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          messagesEnEventCard['sections.eventCard.eventType.conference']
+        )
+      ).toBeInTheDocument();
+      expect(screen.getByText('English')).toBeInTheDocument();
+      expect(screen.getByText('German')).toBeInTheDocument();
+    });
+  });
+
+  it('does not display the load more button when there are no more events to load', async () => {
+    setup();
+
+    await waitFor(() => {
+      expect(
+        screen.queryByText(messagesEn['sections.events.loadMore'])
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it('displays the load more button when there are more events to load', async () => {
+    // Use past events for the testing, because the batch for past events is defined as 2 and
+    // the "Load button" will be shown when there are more then 2 past events
+    (useEvents as jest.Mock).mockImplementation(({ getKey }) => {
+      if (getKey.toString().includes('filters[start][$lt]')) {
+        return {
+          data: [
+            {
+              body: {
+                data: [
+                  pastEventMock,
+                  {
+                    ...pastEventMock,
+                    id: 2,
+                    attributes: {
+                      ...pastEventMock.attributes,
+                      title: 'Past Event 2',
+                    },
+                  },
+                  {
+                    ...pastEventMock,
+                    id: 3,
+                    attributes: {
+                      ...pastEventMock.attributes,
+                      title: 'Past Event 3',
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+          isLoading: false,
+          isLoadingMore: false,
+          canLoadMore: true,
+          loadMore: jest.fn(),
+        };
+      }
+      setup();
+
+      expect(
+        screen.getByText(messagesEn['sections.events.loadMore'])
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('display "no events" message if there are no events to display', async () => {
+    (useEvents as jest.Mock).mockImplementation(() => {
+      return {
+        data: [],
+        isLoading: false,
+        isLoadingMore: false,
+        canLoadMore: false,
+        loadMore: jest.fn(),
+      };
+    });
+    setup();
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(messagesEn['sections.events.noUpcomingEvents'])
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(messagesEn['sections.events.noPastEvents'])
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('filters the events', () => {
+    it('by event type', async () => {
+      setup();
+
+      const selectButtons = await screen.findAllByRole('combobox');
+      expect(selectButtons).toHaveLength(3);
+      expect(selectButtons[0]).toHaveTextContent(
+        messagesEn['sections.events.eventsFilter.eventType']
+      );
+      const selectButton = selectButtons[0];
+
+      userEvent.click(selectButton);
+
+      await waitFor(async () => {
+        const options = await screen.getAllByRole('menuitemradio', {
+          hidden: true,
+        });
+        expect(options).toHaveLength(2);
+        expect(options[0]).toHaveTextContent(
+          messagesEnEventCard['sections.eventCard.eventType.conference']
+        );
+        expect(options[1]).toHaveTextContent(
+          messagesEnEventCard['sections.eventCard.eventType.meetup']
+        );
+
+        userEvent.click(options[0]);
+      });
+
+      await waitFor(() => {
+        expect(getKeyCalls.map(decodeURIComponent)).toEqual(
+          expect.arrayContaining([
+            expect.stringContaining('filters[start][$gte]'),
+            expect.stringContaining(
+              'filters[$and][0][eventTypes][eventType]=Conference'
+            ),
+          ])
+        );
+      });
+    });
+
+    it('by language', async () => {
+      setup();
+
+      const selectButtons = await screen.findAllByRole('combobox');
+      expect(selectButtons).toHaveLength(3);
+      expect(selectButtons[1]).toHaveTextContent(
+        messagesEn['sections.events.eventsFilter.language']
+      );
+      const selectButton = selectButtons[1];
+
+      userEvent.click(selectButton);
+
+      await waitFor(async () => {
+        const options = await screen.getAllByRole('menuitemradio', {
+          hidden: true,
+        });
+        expect(options).toHaveLength(2);
+        expect(options[0]).toHaveTextContent('German');
+        expect(options[1]).toHaveTextContent('English');
+
+        userEvent.click(options[0]);
+      });
+
+      await waitFor(() => {
+        expect(getKeyCalls.map(decodeURIComponent)).toEqual(
+          expect.arrayContaining([
+            expect.stringContaining('filters[start][$gte]'),
+            expect.stringContaining(
+              'filters[$and][0][languages][language]=German'
+            ),
+          ])
+        );
+      });
+    });
+  });
+
+  describe('sorts the events', () => {
+    it('by newest first', async () => {
+      setup();
+
+      const selectButtons = await screen.findAllByRole('combobox');
+      expect(selectButtons).toHaveLength(3);
+      // Default value of "Sort by" select is "Newest first"
+      expect(selectButtons[2]).toHaveTextContent(
+        messagesEn['sections.events.eventsFilter.sortBy.newest']
+      );
+
+      await waitFor(() => {
+        expect(getKeyCalls.map(decodeURIComponent)).toEqual(
+          expect.arrayContaining([
+            expect.stringContaining(
+              `filters[start][$gte]=${NOW.toISOString()}`
+            ),
+          ])
+        );
+      });
+    });
+
+    it('by oldest first', async () => {
+      setup();
+
+      const selectButtons = await screen.findAllByRole('combobox');
+      expect(selectButtons).toHaveLength(3);
+      // Default value of "Sort by" select is "Newest first"
+      expect(selectButtons[2]).toHaveTextContent(
+        messagesEn['sections.events.eventsFilter.sortBy.newest']
+      );
+      const selectButton = selectButtons[2];
+
+      userEvent.click(selectButton);
+
+      await waitFor(async () => {
+        const options = await screen.getAllByRole('menuitemradio', {
+          hidden: true,
+        });
+        expect(options).toHaveLength(2);
+        expect(options[0]).toHaveTextContent(
+          messagesEn['sections.events.eventsFilter.sortBy.newest']
+        );
+        expect(options[1]).toHaveTextContent(
+          messagesEn['sections.events.eventsFilter.sortBy.oldest']
+        );
+
+        userEvent.click(options[1]);
+      });
+
+      await waitFor(() => {
+        expect(getKeyCalls.map(decodeURIComponent)).toEqual(
+          expect.arrayContaining([
+            expect.stringContaining(`filters[start][$lt]=${NOW.toISOString()}`),
+          ])
+        );
+      });
+    });
+  });
+});