@treely/strapi-slices 7.7.1 → 7.8.0

package/src/slices/Steps/Steps.tsx

@@ -1,4 +1,10 @@
-import React, { createRef, useEffect, useRef, useState } from 'react';
+import React, {
+  createRef,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {
   Box,
   Center,
@@ -21,6 +27,7 @@ import StrapiDefaultHeader from '../../models/strapi/StrapiDefaultHeader';
 import strapiMediaUrl from '../../utils/strapiMediaUrl';
 import strapiLinkUrl from '../../utils/strapiLinkUrl';
 import StrapiImage from '../../models/strapi/StrapiImage';
+import { AnalyticsContext } from '../../components/ContextProvider/ContextProvider';
 
 interface StepsSlice extends StrapiDefaultHeader {
   steps: {
@@ -38,6 +45,8 @@ export interface StepsProps {
 
 export const Steps: React.FC<StepsProps> = ({ slice }: StepsProps) => {
   const { push } = useRouter();
+  const analyticsFunction = useContext(AnalyticsContext);
+
   const [gray900] = useToken('colors', ['gray.900']);
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -50,6 +59,21 @@ export const Steps: React.FC<StepsProps> = ({ slice }: StepsProps) => {
   const { y: offsetY } = useWindowScroll();
   const { height: windowHeight } = useWindowSize();
 
+  const handleShapesCardButtonClick = () => {
+    if (slice.card?.button) {
+      analyticsFunction?.({
+        type: 'track',
+        props: {
+          action: 'click',
+          component: 'Steps',
+          buttonText: slice.card.button.text,
+          buttonUrl: strapiLinkUrl(slice.card.button),
+          section: 'card',
+        },
+      });
+      push(strapiLinkUrl(slice.card.button));
+    }
+  };
   useEffect(() => {
     setStepRefs(slice.steps.map(() => createRef()));
   }, []);
@@ -186,7 +210,7 @@ export const Steps: React.FC<StepsProps> = ({ slice }: StepsProps) => {
                 button={
                   slice.card.button && {
                     text: slice.card.button.text,
-                    onClick: () => push(strapiLinkUrl(slice.card?.button)),
+                    onClick: handleShapesCardButtonClick,
                   }
                 }
               />

package/src/slices/TextCardGrid/TextCardGrid.tsx

@@ -272,6 +272,7 @@ export const TextCardGrid: React.FC<TextCardGridProps> = ({
                             ) : undefined
                           }
                           variant={buttonIndex === 0 ? 'outline' : 'ghost'}
+                          component="TextCardGrid"
                         />
                       ))}
                     </Flex>

package/src/slices/TextCarousel/TextCarousel.tsx

@@ -27,6 +27,7 @@ import { IntlContext } from '../../components/ContextProvider';
 import strapiLinkUrl from '../../utils/strapiLinkUrl';
 import { useRouter } from 'next/router';
 import shuffleElements from '../../utils/shuffleElements';
+import { AnalyticsContext } from '../../components/ContextProvider/ContextProvider';
 
 interface TextCarouselSlice extends StrapiDefaultHeader {
   slides: StrapiTextCardWithIcon[];
@@ -47,6 +48,7 @@ export const TextCarousel: React.FC<TextCarouselProps> = ({
   const [primary50] = useToken('colors', ['primary.50']);
   const [itemRef, { width: itemWidth }] = useMeasure<HTMLDivElement>();
   const { formatMessage } = useContext(IntlContext);
+  const analyticsFunction = useContext(AnalyticsContext);
   const { width: windowWidth } = useWindowSize();
   const { push } = useRouter();
 
@@ -82,6 +84,22 @@ export const TextCarousel: React.FC<TextCarouselProps> = ({
 
   const canMoveLeft = useMemo(() => sliderIndex !== 0, [sliderIndex]);
 
+  const handleSlidesButtonClick = (button?: StrapiLink) => {
+    if (button) {
+      analyticsFunction?.({
+        type: 'track',
+        props: {
+          action: 'click',
+          component: 'TextCarousel',
+          buttonText: button.text,
+          buttonUrl: strapiLinkUrl(button),
+          section: 'slides',
+        },
+      });
+      push(strapiLinkUrl(button));
+    }
+  };
+
   const { slides, isShuffled = false } = slice;
 
   useEffect(() => {
@@ -146,7 +164,7 @@ export const TextCarousel: React.FC<TextCarouselProps> = ({
                     button={
                       button && {
                         text: button.text,
-                        onClick: () => push(strapiLinkUrl(button)),
+                        onClick: () => handleSlidesButtonClick(button),
                       }
                     }
                     displayAs="column"
@@ -222,6 +240,7 @@ export const TextCarousel: React.FC<TextCarouselProps> = ({
                 link={slice.button}
                 size="xl"
                 mt={['8', null, '14']}
+                component="TextCarousel"
               />
             </Center>
           </Wrapper>

package/src/slices/TextWithCard/TextWithCard.tsx

@@ -117,6 +117,7 @@ export const TextWithCard: React.FC<TextWithCardProps> = ({
                 colorScheme="white"
                 variant="outline"
                 rightIcon={<ArrowRight />}
+                component="TextWithCard"
               />
             )}
           </GridItem>

package/src/slices/TextWithTextCards/TextWithTextCards.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import {
   Box,
   ContactArea,
@@ -20,6 +20,7 @@ import StrapiDefaultHeader from '../../models/strapi/StrapiDefaultHeader';
 import StrapiContactArea from '../../models/strapi/StrapiContactArea';
 import StrapiTextCardWithIcon from '../../models/strapi/StrapiTextCardWithIcons';
 import StrapiImage from '../../models/strapi/StrapiImage';
+import { AnalyticsContext } from '../../components/ContextProvider/ContextProvider';
 
 interface TextWithTextCardsSlice extends StrapiDefaultHeader {
   cards: StrapiTextCardWithIcon[];
@@ -34,9 +35,26 @@ export const TextWithTextCards: React.FC<TextWithTextCardsProps> = ({
   slice,
 }: TextWithTextCardsProps) => {
   const { push } = useRouter();
+  const analyticsFunction = useContext(AnalyticsContext);
   const [white] = useToken('colors', ['white']);
   const [belowBreakpoint] = useMediaQuery(BREAKPOINT_LG_QUERY);
 
+  const handleContactButtonClick = () => {
+    if (slice.contact?.button) {
+      analyticsFunction?.({
+        type: 'track',
+        props: {
+          action: 'click',
+          component: 'TextWithTextCards',
+          buttonText: slice.contact.button.text,
+          buttonUrl: strapiLinkUrl(slice.contact.button),
+          section: 'contact',
+        },
+      });
+      push(strapiLinkUrl(slice.contact.button));
+    }
+  };
+
   return (
     <DefaultSectionContainer backgroundColor={white} title={slice.title}>
       <>
@@ -116,7 +134,7 @@ export const TextWithTextCards: React.FC<TextWithTextCardsProps> = ({
                   }}
                   link={{
                     text: slice.contact.button.text,
-                    onClick: () => push(strapiLinkUrl(slice.contact?.button)),
+                    onClick: handleContactButtonClick,
                   }}
                 />
               )}
@@ -167,7 +185,7 @@ export const TextWithTextCards: React.FC<TextWithTextCardsProps> = ({
               }}
               link={{
                 text: slice.contact.button.text,
-                onClick: () => push(strapiLinkUrl(slice.contact?.button)),
+                onClick: handleContactButtonClick,
               }}
             />
           )}

package/src/slices/Timeline/Timeline.tsx

@@ -250,6 +250,7 @@ export const Timeline: React.FC<TimelineProps> = ({ slice }: TimelineProps) => {
                             link={item.button}
                             size="sm"
                             variant="outline"
+                            component="Timeline"
                           />
                         </Box>
                       )}