@treely/strapi-slices 7.1.4 → 7.3.0

package/dist/test/strapiMocks/strapiEventMock.d.ts

@@ -0,0 +1,3 @@
+import IStrapiData from '../../models/strapi/IStrapiData';
+import StrapiEvent from '../../models/strapi/StrapiEvent';
+export declare const strapiEventMock: IStrapiData<StrapiEvent>;

package/dist/utils/getCountryFlag.d.ts

@@ -0,0 +1,2 @@
+declare const getCountryFlag: (countryCode: string) => string;
+export default getCountryFlag;

package/dist/utils/getMessages.d.ts

@@ -24,6 +24,15 @@ declare const getMessages: (locale: string) => {
     'sections.glossary.copyButtonLabel': string;
     'sections.glossary.copySuccessMessage': string;
     'sections.glossary.copyFailureMessage': string;
+    'sections.events.loadMore': string;
+    'sections.events.noUpcomingEvents': string;
+    'sections.events.noPastEvents': string;
+    'sections.events.eventsFilter.searchPlaceholder': string;
+    'sections.events.eventsFilter.eventType': string;
+    'sections.events.eventsFilter.language': string;
+    'sections.events.eventsFilter.sortBy.title': string;
+    'sections.events.eventsFilter.sortBy.newest': string;
+    'sections.events.eventsFilter.sortBy.oldest': string;
     'sections.customerQuoteCard.more': string;
     'sections.customerCard.more': string;
     'sections.cta.backgroundShapesDark': string;
@@ -59,6 +68,18 @@ declare const getMessages: (locale: string) => {
     'features.projectInfo.properties.year': string;
     'features.portfolio.documentsDownloadList.projectDocuments': string;
     'features.portfolio.documentsDownloadList.downloadDocument': string;
+    'sections.eventCard.recommendedEvent': string;
+    'sections.eventCard.buttonShowMore': string;
+    'sections.eventCard.buttonShowLess': string;
+    'sections.eventCard.eventType.conference': string;
+    'sections.eventCard.eventType.webinar': string;
+    'sections.eventCard.eventType.forestwalk': string;
+    'sections.eventCard.eventType.partnerevent': string;
+    'sections.eventCard.eventType.lunch&learn': string;
+    'sections.eventCard.eventType.fair': string;
+    'sections.eventCard.eventType.festival': string;
+    'sections.eventCard.eventType.roadshow': string;
+    'sections.eventCard.eventType.meetup': string;
     'components.creditsAvailableBadge.text.yes': string;
     'components.creditsAvailableBadge.text.some': string;
     'components.creditsAvailableBadge.text.no': string;
@@ -89,6 +110,15 @@ declare const getMessages: (locale: string) => {
     'sections.glossary.copyButtonLabel': string;
     'sections.glossary.copySuccessMessage': string;
     'sections.glossary.copyFailureMessage': string;
+    'sections.events.loadMore': string;
+    'sections.events.noUpcomingEvents': string;
+    'sections.events.noPastEvents': string;
+    'sections.eventsFilter.searchPlaceholder': string;
+    'sections.events.eventsFilter.eventType': string;
+    'sections.events.eventsFilter.language': string;
+    'sections.events.eventsFilter.sortBy.title': string;
+    'sections.events.eventsFilter.sortBy.newest': string;
+    'sections.events.eventsFilter.sortBy.oldest': string;
     'sections.customerQuoteCard.more': string;
     'sections.customerCard.more': string;
     'sections.cta.backgroundShapes': string;
@@ -124,6 +154,18 @@ declare const getMessages: (locale: string) => {
     'features.projectInfo.properties.year': string;
     'features.portfolio.documentsDownloadList.projectDocuments': string;
     'features.portfolio.documentsDownloadList.downloadDocument': string;
+    'sections.eventCard.recommendedEvent': string;
+    'sections.eventCard.buttonShowMore': string;
+    'sections.eventCard.buttonShowLess': string;
+    'sections.eventCard.eventType.conference': string;
+    'sections.eventCard.eventType.webinar': string;
+    'sections.eventCard.eventType.forestwalk': string;
+    'sections.eventCard.eventType.partnerevent': string;
+    'sections.eventCard.eventType.lunch&learn': string;
+    'sections.eventCard.eventType.fair': string;
+    'sections.eventCard.eventType.festival': string;
+    'sections.eventCard.eventType.roadshow': string;
+    'sections.eventCard.eventType.meetup': string;
     'components.creditsAvailableBadge.text.yes': string;
     'components.creditsAvailableBadge.text.some': string;
     'components.creditsAvailableBadge.text.no': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "7.1.4",
+  "version": "7.3.0",
   "license": "MIT",
   "author": "Tree.ly FlexCo",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",
@@ -49,10 +49,17 @@
     "trailingComma": "es5"
   },
   "jest": {
+    "transform": {
+      "^.+\\.(ts|tsx)$": "ts-jest"
+    },
     "testEnvironment": "jsdom",
     "setupFilesAfterEnv": [
       "./src/test/setupTests.ts"
     ],
+    "extensionsToTreatAsEsm": [
+      ".ts",
+      ".tsx"
+    ],
     "moduleNameMapper": {
       "^@/(.*)$": "<rootDir>/src/$1",
       "\\.(css|less|scss|sass)$": "identity-obj-proxy"
@@ -134,12 +141,19 @@
     "adblock-detect-react": "^1.1.0",
     "axios": "^1.7.2",
     "axios-cache-interceptor": "^1.5.3",
-    "boemly": "^7.2.0",
+    "boemly": "^7.5.0",
     "embla-carousel-auto-scroll": "^8.5.1",
     "embla-carousel-autoplay": "^8.5.1",
     "embla-carousel-react": "^8.5.1",
     "formik": "^2.4.5",
     "framer-motion": "^10.16.5",
-    "mapbox-gl": "^2.15.0"
+    "mapbox-gl": "^2.15.0",
+    "swr": "^2.3.2"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public",
+      ".storybook/public"
+    ]
   }
 }

package/src/components/ContextProvider/ContextProvider.tsx

@@ -3,6 +3,8 @@ import { createIntl, createIntlCache } from 'react-intl';
 import { Global } from '@emotion/react';
 import { GLOBAL_STYLE } from '../../constants/globalStyle';
 import getMessages from '../../utils/getMessages';
+import strapiClient from '../../integrations/strapi/strapiClient';
+import { SWRConfig } from 'swr/_internal';
 
 const cache = createIntlCache();
 
@@ -26,12 +28,38 @@ export const ContextProvider: React.FC<ContextProviderProps> = ({
   children,
   locale,
 }: ContextProviderProps): JSX.Element => {
+  const fetcher = async (resource: any, init: any) => {
+    const response = await strapiClient.get(`${resource}`, {
+      ...init,
+      headers: {},
+    });
+    // Check if the response was an error:
+    if (response.status < 200 || response.status >= 300) {
+      let errorData = { message: '' };
+      try {
+        errorData = await response.data;
+      } catch (error) {
+        errorData = {
+          message: `An unknown error occurred while fetching data.`,
+        };
+      }
+      throw new Error(errorData.message); // Throwing the error will lead to onError being called
+    }
+
+    return { body: await response.data, headers: response.headers };
+  };
   return (
     <>
-      <Global styles={{ GLOBAL_STYLE }} />
-      <IntlContext.Provider value={intlFactory(locale)}>
-        {children}
-      </IntlContext.Provider>
+      <SWRConfig
+        value={{
+          fetcher,
+        }}
+      >
+        <Global styles={{ GLOBAL_STYLE }} />
+        <IntlContext.Provider value={intlFactory(locale)}>
+          {children}
+        </IntlContext.Provider>
+      </SWRConfig>
     </>
   );
 };

package/src/components/CustomerQuoteCard/CustomerQuoteCard.tsx

@@ -8,6 +8,7 @@ import Link from 'next/link';
 export interface CustomerQuoteCardProps {
   customerStory: StrapiCustomerStory;
 }
+
 export const CustomerQuoteCard = ({
   customerStory,
 }: CustomerQuoteCardProps): JSX.Element => {

package/src/components/EventCard/EventCard.test.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { render, screen, userEvent, waitFor } from '../../test/testUtils';
+import EventCard from '.';
+import { EventCardProps } from './EventCard';
+import { strapiEventMock } from '../../test/strapiMocks/strapiEventMock';
+import { mergeDeep } from '../../utils/mergeDeep';
+
+const defaultProps: EventCardProps = {
+  event: strapiEventMock.attributes,
+};
+
+const setup = (props = {}) => {
+  const combinedProps = mergeDeep(defaultProps, props);
+  render(<EventCard {...combinedProps} />);
+};
+
+describe('The EventCard component', () => {
+  it('displays the event cards', () => {
+    setup();
+
+    expect(screen.getByText(defaultProps.event.title)).toBeInTheDocument();
+
+    expect(screen.getAllByRole('img')[0]).toHaveAttribute(
+      'alt',
+      defaultProps.event.image.alt
+    );
+    expect(screen.getAllByRole('img')[1]).toHaveAttribute(
+      'alt',
+      defaultProps.event.logo.alt
+    );
+
+    expect(screen.getByText('Event Description')).toBeInTheDocument();
+    expect(screen.getByText('Event Title')).toBeInTheDocument();
+    expect(screen.getByText('Meet Up')).toBeInTheDocument();
+    expect(screen.getByText('English')).toBeInTheDocument();
+
+    expect(screen.getByRole('link')).toHaveAttribute(
+      'href',
+      defaultProps.event.button.url
+    );
+
+    expect(screen.queryByText('Recommended')).not.toBeInTheDocument();
+    expect(screen.queryByText('Online')).not.toBeInTheDocument();
+  });
+
+  it('displays start and end date and time correctly', () => {
+    setup();
+
+    expect(
+      screen.getByText(/3\/12\/2024\s*\|\s*08:30\s*-\s*09:30/i)
+    ).toBeInTheDocument();
+  });
+
+  it('displays the speakers', async () => {
+    setup();
+
+    const firstSpeakerImage = screen.getAllByRole('img')[2];
+    expect(firstSpeakerImage).toHaveAttribute(
+      'alt',
+      defaultProps.event.speakers[0].image.alt
+    );
+
+    await waitFor(() => userEvent.hover(firstSpeakerImage));
+    await waitFor(() => expect(screen.getByText('John Doe')).toBeVisible());
+
+    const secondSpeakerImage = screen.getAllByRole('img')[3];
+    expect(secondSpeakerImage).toHaveAttribute(
+      'alt',
+      defaultProps.event.speakers[1].image.alt
+    );
+
+    await waitFor(() => userEvent.hover(secondSpeakerImage));
+    await waitFor(() => expect(screen.getByText('Jane Doe')).toBeVisible());
+  });
+
+  it('displays optional props if they are defined in the slice', () => {
+    setup({
+      event: {
+        ...defaultProps.event,
+        recommended: true,
+        online: true,
+        location: 'Vienna',
+      },
+    });
+
+    expect(
+      screen.getByText((content) => content.includes('Recommended'))
+    ).toBeInTheDocument();
+    expect(screen.getByText('Online')).toBeInTheDocument();
+    expect(screen.getByText('Vienna')).toBeInTheDocument();
+  });
+
+  it('displays the right country flag', () => {
+    setup();
+    expect(screen.getByText('🇬🇧')).toBeInTheDocument();
+  });
+
+  it('displays multiple event types if they are defined in the slice', () => {
+    setup({
+      event: {
+        ...defaultProps.event,
+        eventTypes: [
+          { id: 1, eventType: 'Conference' },
+          { id: 2, eventType: 'Meet Up' },
+        ],
+      },
+    });
+
+    expect(screen.getByText('Conference')).toBeInTheDocument();
+    expect(screen.getByText('Meet Up')).toBeInTheDocument();
+  });
+
+  it('displays multiple languages if they are defined in the slice', () => {
+    setup({
+      event: {
+        ...defaultProps.event,
+        languages: [
+          { id: 1, language: 'German', countryCode: 'de' },
+          { id: 2, language: 'English', countryCode: 'en' },
+        ],
+      },
+    });
+
+    expect(screen.getByText('German')).toBeInTheDocument();
+    expect(screen.getByText('English')).toBeInTheDocument();
+  });
+});

package/src/components/EventCard/EventCard.tsx

@@ -0,0 +1,309 @@
+import React, { useContext, useState } from 'react';
+import {
+  Text,
+  Box,
+  Flex,
+  Heading,
+  Tooltip,
+  Tag,
+  useMediaQuery,
+  Button,
+} from 'boemly';
+import { css } from '@emotion/react';
+import Image from 'next/image';
+import StrapiLinkButton from '../StrapiLinkButton';
+import {
+  BowlFood,
+  CalendarBlank,
+  CaretDown,
+  CaretRight,
+  CaretUp,
+  ChalkboardTeacher,
+  Confetti,
+  Handshake,
+  Headset,
+  Info,
+  Laptop,
+  MapPinLine,
+  PersonSimpleWalk,
+  ProjectorScreenChart,
+  Star,
+  UsersThree,
+  Webcam,
+} from '@phosphor-icons/react';
+import getCountryFlag from '../../utils/getCountryFlag';
+import { BREAKPOINT_MD_QUERY } from '../../constants/breakpoints';
+import StrapiEvent, { EventType } from '../../models/strapi/StrapiEvent';
+import { IntlContext } from '../ContextProvider';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
+
+export interface EventCardProps {
+  event: StrapiEvent;
+}
+
+const MAX_LENGTH = 120;
+const LOCATION_MAX_LENGTH = 28;
+
+const getEventIcon = (eventType: string): JSX.Element => {
+  switch (eventType) {
+    case EventType.WEBINAR:
+      return <Webcam size={12} />;
+    case EventType.CONFERENCE:
+      return <Headset size={12} />;
+    case EventType.MEET_UP:
+      return <UsersThree size={12} />;
+    case EventType.FOREST_WALK:
+      return <PersonSimpleWalk size={12} />;
+    case EventType.PARTNER_EVENT:
+      return <Handshake size={12} />;
+    case EventType.LUNCH_AND_LEARN:
+      return <BowlFood size={12} />;
+    case EventType.FAIR:
+      return <ChalkboardTeacher size={12} />;
+    case EventType.FESTIVAL:
+      return <Confetti size={12} />;
+    case EventType.ROADSHOW:
+      return <ProjectorScreenChart size={12} />;
+    default:
+      return <Info size={12} weight="fill" />;
+  }
+};
+
+export const EventCard = ({ event }: EventCardProps): JSX.Element => {
+  const { formatDate, formatNumber, formatMessage } = useContext(IntlContext);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [mobile] = useMediaQuery(BREAKPOINT_MD_QUERY);
+
+  const toggleText = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const isLocationTooLong =
+    (event.location?.length ?? 0) >= LOCATION_MAX_LENGTH;
+
+  return (
+    <Box
+      borderRadius={['xl', null, null, '2xl']}
+      height="full"
+      width="full"
+      border="1px solid var(--boemly-colors-gray-200)"
+      background="white"
+    >
+      <Box
+        position="relative"
+        width="full"
+        height={['32', null, null, '44']}
+        borderTopRadius={['xl', null, null, '2xl']}
+        css={css`
+          & span,
+          div,
+          img {
+            border-top-left-radius: inherit;
+            border-top-right-radius: inherit;
+          }
+        `}
+      >
+        <Image
+          src={strapiMediaUrl(event.image?.img, 'medium')}
+          alt={event.image?.alt}
+          fill
+          style={{
+            objectFit: event.image?.objectFit || 'cover',
+          }}
+        />
+
+        <Box
+          position="absolute"
+          top={['6', null, null, '8']}
+          right={['6', null, null, '8']}
+          zIndex="1"
+          width={['12', null, null, '16']}
+          height={['12', null, null, '16']}
+        >
+          <Image
+            src={strapiMediaUrl(event.logo.img, 'medium')}
+            alt={event.logo.alt}
+            fill
+            style={{
+              objectFit: event.logo.objectFit || 'contain',
+              borderRadius: 'var(--boemly-radii-md)',
+              border:
+                '1px solid, var(--whiteAlpha-700, rgba(255, 255, 255, 0.64))',
+            }}
+          />
+        </Box>
+      </Box>
+      <Flex
+        flexDir="column"
+        p={['6', null, null, '8']}
+        h="calc(var(--boemly-sizes-full) - var(--boemly-sizes-44))"
+      >
+        <Flex flexDir="row" mb="4" gap="2" flexWrap="wrap">
+          {event.recommended ? (
+            <Flex mb={['2', null, null, '0']}>
+              <Tag backgroundColor="green.600">
+                <Star size={12} weight="fill" color="white" />
+                &nbsp;
+                <Text size="xsLowBold" color="white">
+                  {formatMessage({
+                    id: 'sections.eventCard.recommendedEvent',
+                  })}
+                </Text>
+              </Tag>
+            </Flex>
+          ) : (
+            <></>
+          )}
+          <Flex flexWrap="wrap" gap="2">
+            {event.eventTypes.map((e) => (
+              <Tag key={e.id}>
+                {getEventIcon(e.eventType)}&nbsp;
+                <Text size="xsLowBold" color="gray.800">
+                  {formatMessage({
+                    id: `sections.eventCard.eventType.${e.eventType
+                      .toLowerCase()
+                      .replace(/\s+/g, '')}`,
+                  })}
+                </Text>
+              </Tag>
+            ))}
+            {event.languages.map(({ id, language, countryCode }) => (
+              <Tag key={id}>
+                {getCountryFlag(countryCode)}&nbsp;
+                <Text size="xsLowBold" color="gray.800">
+                  {language}
+                </Text>
+              </Tag>
+            ))}
+          </Flex>
+        </Flex>
+        <Heading>{event.title}</Heading>
+        <Flex
+          gap={isLocationTooLong ? '2' : ['2', null, null, '6']}
+          alignItems={mobile || isLocationTooLong ? 'flex-start' : 'center'}
+          my="4"
+          flexDir={mobile || isLocationTooLong ? 'column' : 'row'}
+        >
+          {event.online && (
+            <Flex gap="2" alignItems="center">
+              <Laptop size={20} color={'var(--boemly-colors-primary-700)'} />
+              <Text size={['xsLowBold', null, null, 'smLowBold']}>Online</Text>
+            </Flex>
+          )}
+          {event.location && (
+            <Flex gap="2" alignItems="center">
+              <MapPinLine
+                size={20}
+                color={'var(--boemly-colors-primary-700)'}
+                weight="fill"
+              />
+              <Text size={['xsLowBold', null, null, 'smLowBold']}>
+                {event.location}
+              </Text>
+            </Flex>
+          )}
+          <Flex alignItems="center" gap="2">
+            <CalendarBlank
+              size={20}
+              color={'var(--boemly-colors-primary-700)'}
+            />
+            <Text size={['xsLowBold', null, null, 'smLowBold']}>
+              {formatDate(event.start, {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+              })}{' '}
+              |{' '}
+              {formatNumber(new Date(event.start).getUTCHours(), {
+                minimumIntegerDigits: 2,
+              })}
+              :
+              {formatNumber(new Date(event.start).getUTCMinutes(), {
+                minimumIntegerDigits: 2,
+              })}{' '}
+              -{' '}
+              {formatNumber(new Date(event.end).getUTCHours(), {
+                minimumIntegerDigits: 2,
+              })}
+              :
+              {formatNumber(new Date(event.end).getUTCMinutes(), {
+                minimumIntegerDigits: 2,
+              })}
+            </Text>
+          </Flex>
+        </Flex>
+        <Text
+          mb={mobile ? '0' : '7'}
+          size={['xsRegularNormal', null, null, 'smRegularNormal']}
+        >
+          {isExpanded || !mobile
+            ? event.description
+            : `${event.description.substring(0, MAX_LENGTH)}...`}
+        </Text>
+        {event.description.length > MAX_LENGTH && mobile && (
+          <Flex justifyContent="flex-start">
+            <Button
+              mt="2"
+              onClick={toggleText}
+              variant="link"
+              rightIcon={
+                isExpanded ? <CaretUp size="12" /> : <CaretDown size="12" />
+              }
+            >
+              {formatMessage(
+                isExpanded
+                  ? {
+                      id: 'sections.eventCard.buttonShowLess',
+                    }
+                  : { id: 'sections.eventCard.buttonShowMore' }
+              )}
+            </Button>
+          </Flex>
+        )}
+        <Flex
+          mt={mobile ? '7' : 'auto'}
+          justifyContent={mobile ? undefined : 'space-between'}
+          flexDir={mobile ? 'column-reverse' : 'row'}
+          gap={mobile ? '4' : '0'}
+        >
+          <Flex width={mobile ? 'full' : 'auto'}>
+            <StrapiLinkButton
+              key={event.button.id}
+              size="md"
+              variant={event.buttonVariant}
+              link={event.button}
+              rightIcon={<CaretRight size="10" />}
+              width="full"
+            />
+          </Flex>
+          <Flex flexDir="row" gap="2">
+            {event.speakers.map((speaker) => (
+              <Box key={speaker.id}>
+                <Box
+                  width={['10', null, null, '12']}
+                  height={['10', null, null, '12']}
+                  position="relative"
+                  borderRadius="2xl"
+                >
+                  <Tooltip label={speaker.name}>
+                    <Image
+                      src={strapiMediaUrl(speaker.image.img, 'medium')}
+                      alt={speaker.image.alt}
+                      fill
+                      style={{
+                        objectFit: speaker.image.objectFit || 'cover',
+                        borderRadius: 'var(--boemly-radii-md)',
+                        border:
+                          '1px solid, var(--whiteAlpha-700, rgba(255, 255, 255, 0.64))',
+                      }}
+                    />
+                  </Tooltip>
+                </Box>
+              </Box>
+            ))}
+          </Flex>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+};

package/src/components/EventCard/index.ts

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

package/src/components/EventCard/messages.de.ts

@@ -0,0 +1,16 @@
+const messagesDe = {
+  'sections.eventCard.recommendedEvent': 'Empfohlene Veranstaltung',
+  'sections.eventCard.buttonShowMore': 'Mehr anzeigen',
+  'sections.eventCard.buttonShowLess': 'Weniger anzeigen',
+
+  'sections.eventCard.eventType.conference': 'Konferenz',
+  'sections.eventCard.eventType.webinar': 'Webinar',
+  'sections.eventCard.eventType.forestwalk': 'Waldspaziergang',
+  'sections.eventCard.eventType.partnerevent': 'Partnerveranstaltung',
+  'sections.eventCard.eventType.lunch&learn': 'Mittagessen & Lernen',
+  'sections.eventCard.eventType.fair': 'Messe',
+  'sections.eventCard.eventType.festival': 'Festival',
+  'sections.eventCard.eventType.roadshow': 'Roadshow',
+  'sections.eventCard.eventType.meetup': 'Meet Up',
+};
+export default messagesDe;

package/src/components/EventCard/messages.en.ts

@@ -0,0 +1,16 @@
+const messagesEn = {
+  'sections.eventCard.recommendedEvent': 'Recommended Event',
+  'sections.eventCard.buttonShowMore': 'Show More',
+  'sections.eventCard.buttonShowLess': 'Show Less',
+
+  'sections.eventCard.eventType.conference': 'Conference',
+  'sections.eventCard.eventType.webinar': 'Webinar',
+  'sections.eventCard.eventType.forestwalk': 'Forest Walk',
+  'sections.eventCard.eventType.partnerevent': 'Partner Event',
+  'sections.eventCard.eventType.lunch&learn': 'Lunch & Learn',
+  'sections.eventCard.eventType.fair': 'Fair',
+  'sections.eventCard.eventType.festival': 'Festival',
+  'sections.eventCard.eventType.roadshow': 'Roadshow',
+  'sections.eventCard.eventType.meetup': 'Meet Up',
+};
+export default messagesEn;

package/src/components/SliceRenderer/SliceRenderer.tsx

@@ -41,6 +41,7 @@ import CarouselMarqueeBanner from '../../slices/CarouselMarqueeBanner';
 import Locale from '../../models/Locale';
 import { ContextProvider } from '../ContextProvider';
 import Timeline from '../../slices/Timeline';
+import Events from '../../slices/Events';
 
 export interface CustomSliceProps {
   slice: any;
@@ -309,6 +310,10 @@ export const SliceRenderer = ({
               slice={slice}
             />
           );
+        case 'sections.events':
+          return (
+            <Events key={`${slice.__component}-${slice.id}`} slice={slice} />
+          );
         default:
           if (CustomSlice) {
             return (