@times-components/ts-components 1.146.2-0831d531868ee6854720b5b42c0a1ccdbe6a4a70.45 → 1.146.2-be27d508c972211ad80599875cd69c63bf67d4b1.45

package/src/components/trip-cards/TripCard.tsx

@@ -26,61 +26,17 @@ import {
   StyledLink
 } from './styles';
 import { MoonIcon, LocationIcon, BoatIcon, CalendarIcon } from './assets';
-import { tealiumTrackingHandler } from '../../helpers/tracking/TrackingHandler';
-import { getDeviceType } from './helpers';
 
 export const TripCard: FC<TripCardProps> = ({
   card,
   isStaticGrid,
-  imgHeight = {},
-  source
+  imgHeight = {}
 }) => {
   const [imageLoaded, setImageLoaded] = useState(false);
-  const deviceType = getDeviceType();
-  console.log('source in TripCard:', source);
-  const trackEvent = (
-    eventName: string,
-    parentName: string,
-    sectionDetails: string
-  ) => {
-    tealiumTrackingHandler(
-      eventName,
-      'navigation',
-      'click',
-      parentName,
-      sectionDetails,
-      {
-        device_type: deviceType,
-        source_page: source || 'unknown'
-      }
-    );
-  };
-
-  const handleCardClick = () =>
-    trackEvent('travel card selected', card.headline, 'trip cards');
-
-  const handleCTAClick = () =>
-    trackEvent(
-      'trip card cta clicked',
-      card.headline,
-      card.cta_text || 'View Itinerary'
-    );
-
-  const handleLogoClick = () =>
-    trackEvent(
-      'trip provider logo clicked',
-      card.headline,
-      `trip provider - ${card.logo_url}`
-    );
 
   return (
     <CardContainer>
-      <StyledLink
-        href={card.cta_url}
-        target="_blank"
-        rel="noopener noreferrer"
-        onClick={handleCardClick}
-      >
+      <StyledLink href={card.cta_url} target="_blank" rel="noopener noreferrer">
         <ImageContainer isStaticGrid={isStaticGrid} {...imgHeight}>
           {!imageLoaded && <Placeholder />}
           <CardImage
@@ -100,7 +56,6 @@ export const TripCard: FC<TripCardProps> = ({
             href={card.cta_url}
             target="_blank"
             rel="noopener noreferrer"
-            onClick={handleCardClick}
           >
             <Headline>{card.headline}</Headline>
           </StyledLink>
@@ -164,7 +119,6 @@ export const TripCard: FC<TripCardProps> = ({
                   href={card.logo_url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  onClick={handleLogoClick}
                 >
                   <img src={card.logo} alt="Partner logo" />
                 </a>
@@ -176,7 +130,6 @@ export const TripCard: FC<TripCardProps> = ({
             href={card.cta_url}
             target="_blank"
             rel="noopener noreferrer"
-            onClick={handleCTAClick}
           >
             {card.cta_text || 'View Itinerary'}
           </CTAButton>

package/src/components/trip-cards/TripCardsLayout.tsx

@@ -9,10 +9,10 @@ import {
   Title,
   Subtitle,
   TitleLink,
-  StaticCardsGrid
+  StaticCardsGrid,
+  StyledLink
 } from './styles';
 import { ChevronRightIcon } from './assets';
-import { tealiumTrackingHandler } from '../../helpers/tracking/TrackingHandler';
 
 export const TripCardsLayout: FC<TripCardsLayoutProps> = ({
   element,
@@ -23,8 +23,7 @@ export const TripCardsLayout: FC<TripCardsLayoutProps> = ({
   widthItemConfig,
   maxWidthItemConfig,
   imgHeight,
-  forceStaticGrid,
-  source
+  forceStaticGrid
 }) => {
   const { titleurl, title, description } = element;
   const gridRef = useRef<HTMLDivElement>(null);
@@ -76,21 +75,6 @@ export const TripCardsLayout: FC<TripCardsLayoutProps> = ({
   const shouldUseCarousel =
     (isTabletMobile && items.length >= 3) || !isStaticGrid || hasOverflow;
 
-  const onTitleClick = () => {
-    tealiumTrackingHandler(
-      'trip cards section title',
-      'navigation',
-      'click',
-      'Trip Cards',
-      title || 'trip cards section',
-      {
-        source_page: source || 'unknown'
-      }
-    );
-  };
-
-  console.log('source in TripCard:', source);
-
   return (
     <Container data-testid="trip-cards-container" {...widthContainerConfig}>
       <TitleSection data-testid="title-section">
@@ -100,16 +84,14 @@ export const TripCardsLayout: FC<TripCardsLayoutProps> = ({
         >
           <TitleContent data-testid="title-content">
             {titleurl ? (
-              <TitleLink
+              <StyledLink
                 href={titleurl}
                 target="_blank"
                 rel="noopener noreferrer"
-                onClick={onTitleClick}
                 data-testid="trip-cards-title-link"
-                style={{ textDecoration: 'none', color: 'inherit' }}
               >
                 <Title data-testid="trip-cards-title">{title}</Title>
-              </TitleLink>
+              </StyledLink>
             ) : (
               <Title data-testid="trip-cards-title">{title}</Title>
             )}
@@ -121,7 +103,6 @@ export const TripCardsLayout: FC<TripCardsLayoutProps> = ({
               target="_blank"
               rel="noopener noreferrer"
               data-testid="title-link"
-              onClick={onTitleClick}
             >
               <ChevronRightIcon />
             </TitleLink>
@@ -138,7 +119,6 @@ export const TripCardsLayout: FC<TripCardsLayoutProps> = ({
               card={item.data}
               isStaticGrid={true}
               forceStaticGrid={forceStaticGrid}
-              source={source}
             />
           ))}
         </StaticCardsGrid>
@@ -150,11 +130,7 @@ export const TripCardsLayout: FC<TripCardsLayoutProps> = ({
               widthItemConfig={widthItemConfig}
               maxWidthItemConfig={maxWidthItemConfig}
             >
-              <CardComponent
-                card={item.data}
-                imgHeight={imgHeight}
-                source={source}
-              />
+              <CardComponent card={item.data} imgHeight={imgHeight} />
             </CarouselItem>
           ))}
           options={{

package/src/components/trip-cards/__tests__/TripCardsLayout.test.tsx

@@ -1,13 +1,8 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { TripCardsLayout } from '../TripCardsLayout';
 import { TripCardApiData } from '../types';
-import { tealiumTrackingHandler } from '../../../helpers/tracking/TrackingHandler';
-
-jest.mock('../../../helpers/tracking/TrackingHandler', () => ({
-  tealiumTrackingHandler: jest.fn()
-}));
 
 const mockElement = {
   class: 'trip-cards',
@@ -38,7 +33,6 @@ global.ResizeObserver = class ResizeObserver {
 
 describe('TripCardsLayout', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
     Element.prototype.scrollTo = jest.fn();
 
     // Mock matchMedia for each test
@@ -58,10 +52,6 @@ describe('TripCardsLayout', () => {
     });
   });
 
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
   describe('Rendering', () => {
     it('renders with title and description', () => {
       const items = [
@@ -590,80 +580,4 @@ describe('TripCardsLayout', () => {
       }
     });
   });
-
-  describe('Tracking', () => {
-    it('calls tealiumTrackingHandler when title link is clicked', () => {
-      const items = [{ id: '1', data: undefined }];
-
-      render(
-        <TripCardsLayout
-          element={mockElement}
-          items={items}
-          CardComponent={MockCard}
-          itemsPerPage={2}
-        />
-      );
-
-      const titleLink = screen.getByTestId('trip-cards-title-link');
-      fireEvent.click(titleLink);
-
-      expect(tealiumTrackingHandler).toHaveBeenCalledWith(
-        'trip cards section title',
-        'navigation',
-        'click',
-        'Trip Cards',
-        'Test Cruises',
-        {
-          source_page: 'unknown'
-        }
-      );
-    });
-
-    it('calls tealiumTrackingHandler when icon link is clicked', () => {
-      const items = [{ id: '1', data: undefined }];
-
-      render(
-        <TripCardsLayout
-          element={mockElement}
-          items={items}
-          CardComponent={MockCard}
-          itemsPerPage={2}
-        />
-      );
-
-      const iconLink = screen.getByTestId('title-link');
-      fireEvent.click(iconLink);
-
-      expect(tealiumTrackingHandler).toHaveBeenCalledWith(
-        'trip cards section title',
-        'navigation',
-        'click',
-        'Trip Cards',
-        'Test Cruises',
-        {
-          source_page: 'unknown'
-        }
-      );
-    });
-
-    it('does not call tealiumTrackingHandler when title link is not clicked', () => {
-      const elementWithoutLink = {
-        ...mockElement,
-        titleurl: undefined
-      };
-
-      const items = [{ id: '1', data: undefined }];
-
-      render(
-        <TripCardsLayout
-          element={elementWithoutLink}
-          items={items}
-          CardComponent={MockCard}
-          itemsPerPage={2}
-        />
-      );
-
-      expect(tealiumTrackingHandler).not.toHaveBeenCalled();
-    });
-  });
 });

package/src/components/trip-cards/helpers.ts

@@ -117,37 +117,6 @@ export const defaultTripCardImgHeight = {
   $heightXl: '245px'
 };
 
-export const getDeviceType = (): string => {
-  if (typeof window === 'undefined' || !window.navigator) {
-    return 'unknown';
-  }
-
-  const userAgent = window.navigator.userAgent || '';
-
-  if (!userAgent) {
-    return 'unknown agent';
-  }
-
-  if (
-    /iPad/i.test(userAgent) ||
-    /NestHub/i.test(userAgent) ||
-    (/Android/i.test(userAgent) && !/Mobile/i.test(userAgent))
-  ) {
-    return 'tablet';
-  }
-
-  const agent = userAgent.toLowerCase();
-  const isMobile = /mobile|android|iphone|ipod|blackberry|opera mini|iemobile|windows phone/.test(
-    agent
-  );
-
-  if (isMobile) {
-    return 'mobile';
-  }
-
-  return 'desktop';
-};
-
 const isValidOffer = (result: ApiCruiseResult): boolean => {
   if (result.departs) {
     const departDate = new Date(result.departs);

package/src/components/trip-cards/index.tsx

@@ -13,8 +13,7 @@ export const TripCards: FC<TripCardsProps> = ({
   widthItemConfig,
   maxWidthItemConfig,
   imgHeight,
-  forceStaticGrid,
-  source
+  forceStaticGrid
 }) => {
   const [cards, setCards] = useState<TripCardApiData[]>([]);
   const [loading, setLoading] = useState(true);
@@ -89,7 +88,6 @@ export const TripCards: FC<TripCardsProps> = ({
         maxWidthItemConfig={maxWidthItemConfig}
         imgHeight={imgHeight}
         forceStaticGrid={forceStaticGrid}
-        source={source}
       />
     );
   }
@@ -114,7 +112,6 @@ export const TripCards: FC<TripCardsProps> = ({
       maxWidthItemConfig={maxWidthItemConfig}
       imgHeight={imgHeight}
       forceStaticGrid={forceStaticGrid}
-      source={source}
     />
   );
 };

package/src/components/trip-cards/types.ts

@@ -35,7 +35,6 @@ export interface TripCardsProps {
   maxWidthItemConfig?: ResponsiveConfig;
   imgHeight?: ImageHeightConfig;
   forceStaticGrid?: boolean;
-  source?: string;
 }
 
 export interface DecodedTripCard {
@@ -64,7 +63,6 @@ export interface TripCardProps {
   card: TripCardApiData;
   isStaticGrid?: boolean;
   imgHeight?: ImageHeightConfig;
-  source?: string;
 }
 
 export interface ApiCruiseResult {
@@ -119,7 +117,6 @@ export interface TripCardsLayoutProps {
   maxWidthItemConfig?: ResponsiveConfig;
   imgHeight?: ImageHeightConfig;
   forceStaticGrid?: boolean;
-  source?: string;
 }
 
 export type ImageContainerProps = ImageHeightConfig;