@treely/strapi-slices 7.7.1 → 7.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "7.7.1",
+  "version": "7.8.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

@@ -6,6 +6,18 @@ import getMessages from '../../utils/getMessages';
 import strapiClient from '../../integrations/strapi/strapiClient';
 import { SWRConfig } from 'swr/_internal';
 
+export type AnalyticsFunction = ({
+  type,
+  props,
+}: {
+  type: 'track' | 'page';
+  props?: Record<string, any>;
+}) => void;
+
+export const AnalyticsContext = createContext<AnalyticsFunction | undefined>(
+  undefined
+);
+
 const cache = createIntlCache();
 
 const intlFactory = (locale: string) =>
@@ -22,11 +34,13 @@ export const IntlContext = createContext(intlFactory('en'));
 export interface ContextProviderProps {
   children: React.ReactNode;
   locale: string;
+  analyticsFunction?: AnalyticsFunction;
 }
 
 export const ContextProvider: React.FC<ContextProviderProps> = ({
   children,
   locale,
+  analyticsFunction,
 }: ContextProviderProps): JSX.Element => {
   const fetcher = async (resource: any, init: any) => {
     const response = await strapiClient.get(`${resource}`, {
@@ -57,7 +71,9 @@ export const ContextProvider: React.FC<ContextProviderProps> = ({
       >
         <Global styles={{ GLOBAL_STYLE }} />
         <IntlContext.Provider value={intlFactory(locale)}>
-          {children}
+          <AnalyticsContext.Provider value={analyticsFunction}>
+            {children}
+          </AnalyticsContext.Provider>
         </IntlContext.Provider>
       </SWRConfig>
     </>

package/src/components/EventCard/EventCard.tsx

@@ -295,6 +295,7 @@ export const EventCard = ({ event }: EventCardProps): JSX.Element => {
                 link={event.button}
                 rightIcon={<CaretRight size="10" />}
                 width="full"
+                component="EventCard"
               />
             </Flex>
           )}

package/src/components/SliceRenderer/SliceRenderer.tsx

@@ -42,6 +42,7 @@ import Locale from '../../models/Locale';
 import { ContextProvider } from '../ContextProvider';
 import Timeline from '../../slices/Timeline';
 import Events from '../../slices/Events';
+import { AnalyticsFunction } from '../ContextProvider/ContextProvider';
 
 export interface CustomSliceProps {
   slice: any;
@@ -55,6 +56,7 @@ export interface SliceRendererProps {
   customerStories: IStrapiData<StrapiCustomerStory>[];
   locale?: Locale;
   CustomSlice?: ({ slice, id }: CustomSliceProps) => JSX.Element;
+  analyticsFunction?: AnalyticsFunction;
 }
 
 export const SliceRenderer = ({
@@ -64,8 +66,9 @@ export const SliceRenderer = ({
   customerStories,
   locale = 'en',
   CustomSlice,
+  analyticsFunction,
 }: SliceRendererProps): JSX.Element => (
-  <ContextProvider locale={locale}>
+  <ContextProvider locale={locale} analyticsFunction={analyticsFunction}>
     {slices.map((slice: any) => {
       switch (slice.__component) {
         case 'sections.hero':

package/src/components/StrapiLinkButton/StrapiLinkButton.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { render, screen } from '../../test/testUtils';
+import { render, screen, fireEvent } from '../../test/testUtils';
 import StrapiLinkButton from '.';
 import { detectAdBlockSpy } from '../../../__mocks__/adblock-detect-react';
 import { StrapiLinkButtonProps } from './StrapiLinkButton';
+import { AnalyticsContext } from '../ContextProvider/ContextProvider';
 
 const defaultProps: StrapiLinkButtonProps = {
   link: {
@@ -12,25 +13,30 @@ const defaultProps: StrapiLinkButtonProps = {
   },
 };
 
+const mockAnalyticsFunction = jest.fn();
+
 const setup = (props = {}) => {
   const combinedProps = { ...defaultProps, ...props };
-  render(<StrapiLinkButton {...combinedProps} />);
+  render(
+    <AnalyticsContext.Provider value={mockAnalyticsFunction}>
+      <StrapiLinkButton {...combinedProps} />
+    </AnalyticsContext.Provider>
+  );
 };
 
 describe('The StrapiLinkButton component', () => {
   afterEach(() => {
     detectAdBlockSpy.mockRestore();
+    mockAnalyticsFunction.mockClear();
   });
 
   it('displays a link', () => {
     setup();
-
     expect(screen.getByRole('link')).toBeInTheDocument();
   });
 
   it('displays the button as a link if an url is passed in the link', () => {
     setup();
-
     expect(screen.getByRole('link')).toHaveAttribute(
       'href',
       defaultProps.link.url
@@ -39,7 +45,6 @@ describe('The StrapiLinkButton component', () => {
 
   it('displays the custom HubSpot launcher if intercomLauncher is true in the link', () => {
     setup({ link: { id: 1, text: 'Text', intercomLauncher: true } });
-
     expect(screen.getByRole('button')).not.toHaveAttribute(
       'href',
       defaultProps.link.url
@@ -48,12 +53,67 @@ describe('The StrapiLinkButton component', () => {
 
   it('opens an email to hello@tree.ly if an ad blocker is active and intercomLauncher is true', () => {
     detectAdBlockSpy.mockReturnValue(true);
-
     setup({ link: { id: 1, text: 'Text', intercomLauncher: true } });
-
     expect(screen.getByRole('link')).toHaveAttribute(
       'href',
       'mailto:hello@tree.ly'
     );
   });
+
+  it('calls analytics function when clicking a regular link', () => {
+    setup();
+    fireEvent.click(screen.getByRole('link'));
+    expect(mockAnalyticsFunction).toHaveBeenCalledWith({
+      type: 'track',
+      props: {
+        action: 'click',
+        component: 'StrapiLinkButton',
+        buttonText: 'Text',
+        buttonUrl: '/url',
+      },
+    });
+  });
+
+  it('calls analytics function when clicking an intercom launcher', () => {
+    setup({ link: { id: 1, text: 'Text', intercomLauncher: true } });
+    fireEvent.click(screen.getByRole('button'));
+    expect(mockAnalyticsFunction).toHaveBeenCalledWith({
+      type: 'track',
+      props: {
+        action: 'click',
+        component: 'StrapiLinkButton',
+        buttonText: 'Text',
+        buttonUrl: '/',
+      },
+    });
+  });
+
+  it('calls analytics function when clicking a mailto link', () => {
+    detectAdBlockSpy.mockReturnValue(true);
+    setup({ link: { id: 1, text: 'Text', intercomLauncher: true } });
+    fireEvent.click(screen.getByRole('link'));
+    expect(mockAnalyticsFunction).toHaveBeenCalledWith({
+      type: 'track',
+      props: {
+        action: 'click',
+        component: 'StrapiLinkButton',
+        buttonText: 'Text',
+        buttonUrl: 'mailto:hello@tree.ly',
+      },
+    });
+  });
+
+  it('uses custom component name in analytics if provided', () => {
+    setup({ component: 'CustomComponent' });
+    fireEvent.click(screen.getByRole('link'));
+    expect(mockAnalyticsFunction).toHaveBeenCalledWith({
+      type: 'track',
+      props: {
+        action: 'click',
+        component: 'CustomComponent',
+        buttonText: 'Text',
+        buttonUrl: '/url',
+      },
+    });
+  });
 });

package/src/components/StrapiLinkButton/StrapiLinkButton.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Button } from 'boemly';
 import Link from 'next/link';
 import { useDetectAdBlock } from 'adblock-detect-react';
 import StrapiLink from '../../models/strapi/StrapiLink';
 import strapiLinkUrl from '../../utils/strapiLinkUrl';
 import openHubSpotChat from '../../utils/openHubSpotChat';
+import { AnalyticsContext } from '../ContextProvider/ContextProvider';
 
 export interface StrapiLinkButtonProps {
   link: StrapiLink;
@@ -21,32 +22,68 @@ export interface StrapiLinkButtonProps {
   my?: any;
   background?: string;
   width?: string;
+  component?: string;
 }
 
 export const StrapiLinkButton: React.FC<StrapiLinkButtonProps> = ({
   link,
+  component = 'StrapiLinkButton',
   ...buttonProps
 }: StrapiLinkButtonProps) => {
   const adBlockDetected = useDetectAdBlock();
+  const analyticsFunction = useContext(AnalyticsContext);
+
+  const handleClick = () => {
+    const buttonUrl =
+      link.intercomLauncher && adBlockDetected
+        ? 'mailto:hello@tree.ly'
+        : strapiLinkUrl(link);
+
+    analyticsFunction?.({
+      type: 'track',
+      props: {
+        action: 'click',
+        component,
+        buttonText: link.text,
+        buttonUrl,
+      },
+    });
+  };
 
   if (link.intercomLauncher) {
     if (adBlockDetected) {
       return (
-        <Button {...buttonProps} as={Link} href="mailto:hello@tree.ly">
+        <Button
+          {...buttonProps}
+          as={Link}
+          href="mailto:hello@tree.ly"
+          onClick={handleClick}
+        >
           {link.text}
         </Button>
       );
     }
 
     return (
-      <Button {...buttonProps} onClick={openHubSpotChat}>
+      <Button
+        {...buttonProps}
+        onClick={() => {
+          handleClick();
+          openHubSpotChat();
+        }}
+      >
         {link.text}
       </Button>
     );
   }
 
   return (
-    <Button {...buttonProps} as={Link} href={strapiLinkUrl(link)}>
+    <Button
+      {...buttonProps}
+      as={Link}
+      href={strapiLinkUrl(link)}
+      onClick={handleClick}
+    >
       {link.text}
     </Button>
   );

package/src/components/portfolio/Contact/Contact.tsx

@@ -65,7 +65,13 @@ export const Contact: React.FC<ContactProps> = ({
         <></>
       )}
       {button ? (
-        <StrapiLinkButton mt="6" link={button} size="md" variant="outline" />
+        <StrapiLinkButton
+          mt="6"
+          link={button}
+          size="md"
+          variant="outline"
+          component="Contact"
+        />
       ) : (
         <></>
       )}

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

@@ -304,6 +304,7 @@ const SmallCheckout = ({
               ...button,
             }}
             variant="outline"
+            component="SmallCheckout"
           />
         )}
       </Flex>

package/src/slices/BlogCards/BlogCards.tsx

@@ -111,6 +111,7 @@ export const BlogCards: React.FC<BlogCardsProps> = ({
                 size="lg"
                 variant="outline"
                 rightIcon={<CaretRight color={gray700} />}
+                component="BlogCards"
               />
             </Box>
           </Flex>
@@ -196,6 +197,7 @@ export const BlogCards: React.FC<BlogCardsProps> = ({
                   size="lg"
                   variant="outline"
                   rightIcon={<CaretRight color={gray700} />}
+                  component="BlogCards"
                 />
               </Box>
             </>

package/src/slices/Comparison/Comparison.tsx

@@ -212,6 +212,7 @@ export const Comparison: React.FC<ComparisonProps> = ({
                         size="md"
                         variant="outline"
                         rightIcon={<CaretRight size={16} weight="bold" />}
+                        component="Comparison"
                       />
                     )}
                   </Flex>

package/src/slices/Cta/Cta.tsx

@@ -380,6 +380,7 @@ export const Cta: React.FC<CtaProps> = ({ slice }: CtaProps) => {
                                 link={button.button}
                                 size="md"
                                 variant={button.variant}
+                                component="Cta"
                               />
                             ))}
                         </Flex>

package/src/slices/CtaOnly/CtaOnly.tsx

@@ -12,7 +12,7 @@ export interface CtaOnlyProps {
 export const CtaOnly: React.FC<CtaOnlyProps> = ({ slice }: CtaOnlyProps) => (
   <Wrapper>
     <Box position="absolute" top="-28" transform="translateY(50%)">
-      <StrapiLinkButton size="md" link={slice.button} />
+      <StrapiLinkButton size="md" link={slice.button} component="CtaOnly" />
     </Box>
   </Wrapper>
 );

package/src/slices/Facts/Facts.tsx

@@ -133,6 +133,7 @@ export const Facts: React.FC<FactsProps> = ({ slice }: FactsProps) => (
             link={slice.button}
             size="md"
             variant={slice.variant === 'green' ? 'outline' : 'solid'}
+            component="Facts"
           />
         </>
       )}

package/src/slices/Hero/Hero.tsx

@@ -100,6 +100,7 @@ export const Hero = ({ slice }: HeroProps): JSX.Element => (
                 mt="10"
                 size="xl"
                 link={slice.button}
+                component="Hero"
               />
             )}
             {slice.additionalButtons.map((button) => (
@@ -109,6 +110,7 @@ export const Hero = ({ slice }: HeroProps): JSX.Element => (
                 size="xl"
                 variant={button.variant}
                 link={button.button}
+                component="Hero"
               />
             ))}
           </Flex>

package/src/slices/IconGrid/IconGrid.tsx

@@ -109,6 +109,7 @@ export const IconGrid = ({ slice }: IconGridProps): JSX.Element => {
                     size="md"
                     variant="outline"
                     link={iconWithTextAndButton.button}
+                    component="IconGrid"
                   />
                 </Box>
               )}

package/src/slices/ImageGrid/ImageGrid.tsx

@@ -79,6 +79,7 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
                       link={link}
                       size="sm"
                       variant="outline"
+                      component="ImageGrid"
                     />
                   ))}
                 </Flex>

package/src/slices/ImageTextSequence/ImageTextSequence.tsx

@@ -140,6 +140,7 @@ export const ImageTextSequence: React.FC<ImageTextSequenceProps> = ({
                         size="sm"
                         variant="outline"
                         rightIcon={<CaretRight size="10" color={gray700} />}
+                        component="ImageTextSequence"
                       />
                     )}
                   </Box>

package/src/slices/LeftTextRightCard/LeftTextRightCard.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import {
   DefaultSectionContainer,
   DefaultSectionHeader,
@@ -18,6 +18,7 @@ import StrapiPortfolioCard from '../../models/strapi/StrapiPortfolioCard';
 import StrapiDefaultHeader from '../../models/strapi/StrapiDefaultHeader';
 import StrapiLink from '../../models/strapi/StrapiLink';
 import StrapiLinkButton from '../../components/StrapiLinkButton';
+import { AnalyticsContext } from '../../components/ContextProvider/ContextProvider';
 
 interface LeftTextRightCardSlice extends StrapiDefaultHeader {
   checkMarkLabels?: {
@@ -35,6 +36,26 @@ export const LeftTextRightCard: React.FC<LeftTextRightCardProps> = ({
   slice,
 }: LeftTextRightCardProps) => {
   const { push } = useRouter();
+  const analyticsFunction = useContext(AnalyticsContext);
+
+  const handleCardButtonClick = () => {
+    if (slice.card?.button) {
+      if (analyticsFunction) {
+        analyticsFunction({
+          type: 'track',
+          props: {
+            action: 'click',
+            component: 'LeftTextRightCard',
+            buttonText: slice.card?.button?.text,
+            buttonUrl: strapiLinkUrl(slice.card?.button),
+            cardTitle: slice.card?.title,
+          },
+        });
+      }
+
+      push(strapiLinkUrl(slice.card?.button));
+    }
+  };
 
   return (
     <DefaultSectionContainer title={slice.title}>
@@ -72,6 +93,7 @@ export const LeftTextRightCard: React.FC<LeftTextRightCardProps> = ({
                 colorScheme="white"
                 variant="outline"
                 rightIcon={<ArrowRight />}
+                component="LeftTextRightCard"
               />
             )}
           </GridItem>
@@ -86,7 +108,7 @@ export const LeftTextRightCard: React.FC<LeftTextRightCardProps> = ({
                 button={
                   slice.card.button && {
                     text: slice.card.button.text,
-                    onClick: () => push(strapiLinkUrl(slice.card?.button)),
+                    onClick: handleCardButtonClick,
                   }
                 }
                 facts={slice.card.facts}

package/src/slices/LogoGridWithText/LogoGridWithText.tsx

@@ -53,6 +53,7 @@ export const LogoGridWithText: React.FC<LogoGridWithTextProps> = ({
                 variant="outline"
                 mt="6"
                 rightIcon={<ArrowRight />}
+                component="LogoGridWithText"
               />
             )}
           </Box>

package/src/slices/MapHero/MapHero.tsx

@@ -54,12 +54,17 @@ export const MapHero: React.FC<MapHeroProps> = ({ slice }: MapHeroProps) => {
             />
             {slice.buttons && slice.buttons.length > 0 && (
               <Flex mt="10" flexDir="row" gap="5">
-                <StrapiLinkButton link={slice.buttons[0]} size="xl" />
+                <StrapiLinkButton
+                  link={slice.buttons[0]}
+                  size="xl"
+                  component="MapHero"
+                />
                 {slice.buttons.length === 2 && (
                   <StrapiLinkButton
                     link={slice.buttons[1]}
                     variant="outline"
                     size="xl"
+                    component="MapHero"
                   />
                 )}
               </Flex>

package/src/slices/QAndA/QAndA.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import {
   Box,
   Heading,
@@ -19,6 +19,7 @@ import StrapiHeroCard from '../../models/strapi/StrapiHeroCard';
 import strapiMediaUrl from '../../utils/strapiMediaUrl';
 import StrapiLinkButton from '../../components/StrapiLinkButton';
 import convertToKebabCase from '../../utils/convertToKebabCase';
+import { AnalyticsContext } from '../../components/ContextProvider/ContextProvider';
 
 const VARIANTS = {
   gray: {
@@ -63,6 +64,23 @@ export interface QAndAProps {
 
 export const QAndA: React.FC<QAndAProps> = ({ slice }: QAndAProps) => {
   const { push } = useRouter();
+  const analyticsFunction = useContext(AnalyticsContext);
+
+  const handleHeroButtonClick = () => {
+    if (slice.hero?.button) {
+      analyticsFunction?.({
+        type: 'track',
+        props: {
+          action: 'click',
+          component: 'QAndA',
+          buttonText: slice.hero.button.text,
+          buttonUrl: strapiLinkUrl(slice.hero.button),
+          section: 'hero',
+        },
+      });
+      push(strapiLinkUrl(slice.hero.button));
+    }
+  };
 
   const variant = VARIANTS[slice.variant ?? 'green'];
 
@@ -120,6 +138,7 @@ export const QAndA: React.FC<QAndAProps> = ({ slice }: QAndAProps) => {
                     background="white"
                     rightIcon={<ArrowRight />}
                     link={slice.button}
+                    component="QAndA"
                   />
                 </Flex>
               </Box>
@@ -137,7 +156,7 @@ export const QAndA: React.FC<QAndAProps> = ({ slice }: QAndAProps) => {
               link={
                 slice.hero.button && {
                   text: slice.hero.button.text,
-                  onClick: () => push(strapiLinkUrl(slice.hero?.button)),
+                  onClick: handleHeroButtonClick,
                 }
               }
               image={

package/src/slices/QuoteCards/QuoteCards.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Image from 'next/image';
 import {
   Box,
@@ -17,6 +17,7 @@ import strapiLinkUrl from '../../utils/strapiLinkUrl';
 import StrapiImage from '../../models/strapi/StrapiImage';
 import convertToKebabCase from '../../utils/convertToKebabCase';
 import { useRouter } from 'next/router';
+import { AnalyticsContext } from '../../components/ContextProvider/ContextProvider';
 
 interface QuoteCardsSlice extends StrapiDefaultHeader {
   cards: StrapiQuoteCard[];
@@ -31,6 +32,23 @@ export const QuoteCards: React.FC<QuoteCardsProps> = ({
   slice,
 }: QuoteCardsProps) => {
   const { push } = useRouter();
+  const analyticsFunction = useContext(AnalyticsContext);
+
+  const handleHeroCardButtonClick = () => {
+    if (slice.hero?.button) {
+      analyticsFunction?.({
+        type: 'track',
+        props: {
+          action: 'click',
+          component: 'QuoteCards',
+          buttonText: slice.hero.button.text,
+          buttonUrl: strapiLinkUrl(slice.hero.button),
+          section: 'hero',
+        },
+      });
+      push(strapiLinkUrl(slice.hero.button));
+    }
+  };
 
   return (
     <>
@@ -120,7 +138,7 @@ export const QuoteCards: React.FC<QuoteCardsProps> = ({
               link={
                 slice.hero.button && {
                   text: slice.hero.button.text,
-                  onClick: () => push(strapiLinkUrl(slice.hero?.button)),
+                  onClick: handleHeroCardButtonClick,
                 }
               }
               image={

package/src/slices/SmallHero/SmallHero.tsx

@@ -114,7 +114,12 @@ export const SmallHero: React.FC<SmallHeroProps> = ({
             }}
           />
           {slice.button && (
-            <StrapiLinkButton link={slice.button} mt="6" size="lg" />
+            <StrapiLinkButton
+              link={slice.button}
+              mt="6"
+              size="lg"
+              component="SmallHero"
+            />
           )}
         </>
       </Wrapper>