@times-components/ts-components 1.146.2-be27d508c972211ad80599875cd69c63bf67d4b1.45 → 1.146.2-c12ed7999a41984c2ba8c437357e7a5df1914881.48

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

@@ -26,6 +26,8 @@ import {
   StyledLink
 } from './styles';
 import { MoonIcon, LocationIcon, BoatIcon, CalendarIcon } from './assets';
+import { tealiumTrackingHandler } from '../../helpers/tracking/TrackingHandler';
+import { getPreferredEdition } from '../../utils/cookie';
 
 export const TripCard: FC<TripCardProps> = ({
   card,
@@ -33,10 +35,37 @@ export const TripCard: FC<TripCardProps> = ({
   imgHeight = {}
 }) => {
   const [imageLoaded, setImageLoaded] = useState(false);
+  const trackEvent = (eventName: string) => {
+    tealiumTrackingHandler(
+      eventName,
+      'navigation',
+      'click',
+      card.headline,
+      undefined,
+      {
+        app_content_location: getPreferredEdition()
+      }
+    );
+  };
+
+  const handleCardClick = (type: 'headline' | 'img') => () =>
+    type === 'headline'
+      ? trackEvent(`trip card: ${card.headline}`)
+      : trackEvent('trip card: img click');
+
+  const handleCTAClick = () =>
+    trackEvent(`trip card: ${card.cta_text || 'View Itinerary'}`);
+
+  const handleLogoClick = () => trackEvent(`trip card: ${card.logo_name}`);
 
   return (
     <CardContainer>
-      <StyledLink href={card.cta_url} target="_blank" rel="noopener noreferrer">
+      <StyledLink
+        href={card.cta_url}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={handleCardClick('img')}
+      >
         <ImageContainer isStaticGrid={isStaticGrid} {...imgHeight}>
           {!imageLoaded && <Placeholder />}
           <CardImage
@@ -56,6 +85,7 @@ export const TripCard: FC<TripCardProps> = ({
             href={card.cta_url}
             target="_blank"
             rel="noopener noreferrer"
+            onClick={handleCardClick('headline')}
           >
             <Headline>{card.headline}</Headline>
           </StyledLink>
@@ -119,6 +149,7 @@ export const TripCard: FC<TripCardProps> = ({
                   href={card.logo_url}
                   target="_blank"
                   rel="noopener noreferrer"
+                  onClick={handleLogoClick}
                 >
                   <img src={card.logo} alt="Partner logo" />
                 </a>
@@ -130,6 +161,7 @@ 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

@@ -13,6 +13,8 @@ import {
   StyledLink
 } from './styles';
 import { ChevronRightIcon } from './assets';
+import { tealiumTrackingHandler } from '../../helpers/tracking/TrackingHandler';
+import { getPreferredEdition } from '../../utils/cookie';
 
 export const TripCardsLayout: FC<TripCardsLayoutProps> = ({
   element,
@@ -75,6 +77,19 @@ export const TripCardsLayout: FC<TripCardsLayoutProps> = ({
   const shouldUseCarousel =
     (isTabletMobile && items.length >= 3) || !isStaticGrid || hasOverflow;
 
+  const onTitleClick = () => {
+    tealiumTrackingHandler(
+      `trip cards component ${title}`,
+      'navigation',
+      'click',
+      undefined,
+      undefined,
+      {
+        app_content_location: getPreferredEdition()
+      }
+    );
+  };
+
   return (
     <Container data-testid="trip-cards-container" {...widthContainerConfig}>
       <TitleSection data-testid="title-section">
@@ -88,6 +103,7 @@ export const TripCardsLayout: FC<TripCardsLayoutProps> = ({
                 href={titleurl}
                 target="_blank"
                 rel="noopener noreferrer"
+                onClick={onTitleClick}
                 data-testid="trip-cards-title-link"
               >
                 <Title data-testid="trip-cards-title">{title}</Title>
@@ -103,6 +119,7 @@ export const TripCardsLayout: FC<TripCardsLayoutProps> = ({
               target="_blank"
               rel="noopener noreferrer"
               data-testid="title-link"
+              onClick={onTitleClick}
             >
               <ChevronRightIcon />
             </TitleLink>

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

@@ -3,6 +3,11 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { TripCard } from '../TripCard';
 import { TripCardApiData } from '../types';
+import { tealiumTrackingHandler } from '../../../helpers/tracking/TrackingHandler';
+
+jest.mock('../../../helpers/tracking/TrackingHandler', () => ({
+  tealiumTrackingHandler: jest.fn()
+}));
 
 const mockCard: TripCardApiData = {
   cruise_id: '2074350',
@@ -15,11 +20,16 @@ const mockCard: TripCardApiData = {
   price: '£2000',
   logo: 'https://example.com/logo.png',
   logo_url: 'https://example.com',
+  logo_name: 'MSC Cruises',
   cta_url: 'https://example.com/cruise',
   cta_text: 'View Itinerary'
 };
 
 describe('TripCard', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('renders card with all required data', () => {
     render(<TripCard card={mockCard} />);
 
@@ -117,4 +127,129 @@ describe('TripCard', () => {
     fireEvent.load(cardImage);
     expect(cardImage).toHaveStyle({ display: 'block' });
   });
+
+  describe('Tracking', () => {
+    it('calls tealiumTrackingHandler when headline is clicked', () => {
+      render(<TripCard card={mockCard} />);
+
+      const headlineLink = screen.getAllByRole('link')[1];
+      fireEvent.click(headlineLink);
+
+      expect(tealiumTrackingHandler).toHaveBeenCalledWith(
+        'trip card: Mediterranean from Barcelona',
+        'navigation',
+        'click',
+        'Mediterranean from Barcelona',
+        undefined,
+        {
+          app_content_location: expect.any(String)
+        }
+      );
+    });
+
+    it('calls tealiumTrackingHandler when image is clicked', () => {
+      render(<TripCard card={mockCard} />);
+
+      const imageLink = screen.getAllByRole('link')[0];
+      fireEvent.click(imageLink);
+
+      expect(tealiumTrackingHandler).toHaveBeenCalledWith(
+        'trip card: img click',
+        'navigation',
+        'click',
+        'Mediterranean from Barcelona',
+        undefined,
+        {
+          app_content_location: expect.any(String)
+        }
+      );
+    });
+
+    it('calls tealiumTrackingHandler when CTA button is clicked', () => {
+      render(<TripCard card={mockCard} />);
+
+      const ctaButton = screen.getByText('View Itinerary');
+      fireEvent.click(ctaButton);
+
+      expect(tealiumTrackingHandler).toHaveBeenCalledWith(
+        'trip card: View Itinerary',
+        'navigation',
+        'click',
+        'Mediterranean from Barcelona',
+        undefined,
+        {
+          app_content_location: expect.any(String)
+        }
+      );
+    });
+
+    it('calls tealiumTrackingHandler with default CTA text when not provided', () => {
+      const cardWithoutCTAText = {
+        ...mockCard,
+        cta_text: undefined
+      };
+
+      render(<TripCard card={cardWithoutCTAText} />);
+
+      const ctaButton = screen.getByText('View Itinerary');
+      fireEvent.click(ctaButton);
+
+      expect(tealiumTrackingHandler).toHaveBeenCalledWith(
+        'trip card: View Itinerary',
+        'navigation',
+        'click',
+        'Mediterranean from Barcelona',
+        undefined,
+        {
+          app_content_location: expect.any(String)
+        }
+      );
+    });
+
+    it('calls tealiumTrackingHandler when logo is clicked with empty logo_name', () => {
+      const cardWithoutLogoName = {
+        ...mockCard,
+        logo_name: ''
+      };
+
+      render(<TripCard card={cardWithoutLogoName} />);
+
+      const logoLink = screen.getByRole('link', { name: /partner logo/i });
+      fireEvent.click(logoLink);
+
+      expect(tealiumTrackingHandler).toHaveBeenCalledWith(
+        'trip card: ',
+        'navigation',
+        'click',
+        'Mediterranean from Barcelona',
+        undefined,
+        {
+          app_content_location: expect.any(String)
+        }
+      );
+    });
+
+    it('calls tealiumTrackingHandler with logo_name when provided', () => {
+      const cardWithLogoName = {
+        ...mockCard,
+        logo_name: 'MSC Cruises'
+      };
+
+      render(<TripCard card={cardWithLogoName} />);
+
+      const logoLink = screen.getByRole('link', { name: /partner logo/i });
+      fireEvent.click(logoLink);
+
+      expect(tealiumTrackingHandler).toHaveBeenCalledWith(
+        'trip card: MSC Cruises',
+        'navigation',
+        'click',
+        'Mediterranean from Barcelona',
+        undefined,
+        {
+          app_content_location: expect.any(String)
+        }
+      );
+    });
+  });
 });

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

@@ -1,8 +1,13 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } 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',
@@ -33,6 +38,7 @@ global.ResizeObserver = class ResizeObserver {
 
 describe('TripCardsLayout', () => {
   beforeEach(() => {
+    jest.clearAllMocks();
     Element.prototype.scrollTo = jest.fn();
 
     // Mock matchMedia for each test
@@ -52,6 +58,10 @@ describe('TripCardsLayout', () => {
     });
   });
 
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   describe('Rendering', () => {
     it('renders with title and description', () => {
       const items = [
@@ -245,6 +255,7 @@ describe('TripCardsLayout', () => {
         price: '£1000',
         logo: 'logo.png',
         logo_url: 'https://example.com',
+        logo_name: 'Test Cruise Line',
         cta_url: 'https://example.com',
         cta_text: 'View'
       };
@@ -400,6 +411,7 @@ describe('TripCardsLayout', () => {
         price: '£2000',
         logo: 'logo.png',
         logo_url: 'https://example.com',
+        logo_name: 'Test Cruise Line',
         cta_url: 'https://example.com',
         cta_text: 'Book'
       };
@@ -580,4 +592,80 @@ 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 component Test Cruises',
+        'navigation',
+        'click',
+        undefined,
+        undefined,
+        {
+          app_content_location: 'uk'
+        }
+      );
+    });
+
+    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 component Test Cruises',
+        'navigation',
+        'click',
+        undefined,
+        undefined,
+        {
+          app_content_location: 'uk'
+        }
+      );
+    });
+
+    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/__tests__/helpers.test.ts

@@ -61,6 +61,7 @@ describe('transformApiResult', () => {
       price: '£2000',
       logo: 'https://example.com/msc-logo.png',
       logo_url: 'https://example.com/cruise-lines/msc-cruises/',
+      logo_name: 'MSC Cruises',
       cta_url: 'https://example.com/cruises/mediterranean-from-barcelona',
       cta_text: 'View Itinerary'
     });

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

@@ -34,6 +34,7 @@ describe('TripCards', () => {
       original_price: undefined,
       logo: 'logo1.png',
       logo_url: 'https://example.com',
+      logo_name: 'Mock Line 1',
       cta_url: 'link1',
       cta_text: 'View'
     },
@@ -49,6 +50,7 @@ describe('TripCards', () => {
       original_price: undefined,
       logo: 'logo2.png',
       logo_url: 'https://example.com',
+      logo_name: 'Mock Line 2',
       cta_url: 'link2',
       cta_text: 'View'
     },
@@ -64,6 +66,7 @@ describe('TripCards', () => {
       original_price: undefined,
       logo: 'logo3.png',
       logo_url: 'https://example.com',
+      logo_name: 'Mock Line 3',
       cta_url: 'link3',
       cta_text: 'View'
     }
@@ -429,6 +432,7 @@ describe('TripCards', () => {
           original_price: undefined,
           logo: 'logo3.png',
           logo_url: 'https://example.com',
+          logo_name: 'Mock Line 3',
           cta_url: 'link3',
           cta_text: 'View'
         }

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

@@ -87,6 +87,7 @@ export const transformApiResult = (
       ),
       logo: (result.cruise_line && result.cruise_line.logo) || '',
       logo_url: (result.cruise_line && result.cruise_line.link) || '',
+      logo_name: (result.cruise_line && result.cruise_line.name) || '',
       cta_url: result.link || '',
       cta_text: 'View Itinerary'
     };
@@ -139,19 +140,23 @@ const isValidOffer = (result: ApiCruiseResult): boolean => {
 };
 
 export const fetchCruiseCards = async (
-  cruiseIds: number[]
+  cruiseIds: number[],
+  hostName?: string
 ): Promise<TripCardApiData[]> => {
   const formData = new FormData();
   formData.append('action', 'results');
   formData.append('cruise_ids', cruiseIds.join(','));
-
-  const response = await fetch(
-    'https://www.staging-thetimes.com/holidays/wp-admin/admin-ajax.php',
-    {
-      method: 'POST',
-      body: formData
-    }
-  );
+  const url =
+    hostName &&
+    hostName.includes('thetimes.com') &&
+    !hostName.includes('-thetimes')
+      ? 'https://www.thetimes.com/holidays/wp-admin/admin-ajax.php'
+      : 'https://www.staging-thetimes.com/holidays/wp-admin/admin-ajax.php';
+
+  const response = await fetch(url, {
+    method: 'POST',
+    body: formData
+  });
 
   if (!response.ok) {
     throw new Error(`HTTP error! status: ${response.status}`);

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

@@ -13,7 +13,8 @@ export const TripCards: FC<TripCardsProps> = ({
   widthItemConfig,
   maxWidthItemConfig,
   imgHeight,
-  forceStaticGrid
+  forceStaticGrid,
+  hostName
 }) => {
   const [cards, setCards] = useState<TripCardApiData[]>([]);
   const [loading, setLoading] = useState(true);
@@ -39,7 +40,7 @@ export const TripCards: FC<TripCardsProps> = ({
         }
 
         try {
-          const transformedCards = await fetchCruiseCards(allIds);
+          const transformedCards = await fetchCruiseCards(allIds, hostName);
           setCards(transformedCards);
         } catch (e) {
           setError(e instanceof Error ? e.message : 'Failed to load cruises');

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

@@ -35,6 +35,7 @@ export interface TripCardsProps {
   maxWidthItemConfig?: ResponsiveConfig;
   imgHeight?: ImageHeightConfig;
   forceStaticGrid?: boolean;
+  hostName?: string;
 }
 
 export interface DecodedTripCard {
@@ -55,8 +56,9 @@ export interface TripCardApiData {
   price: string;
   logo: string;
   logo_url: string;
+  logo_name: string;
   cta_url: string;
-  cta_text: string;
+  cta_text?: string;
 }
 
 export interface TripCardProps {

package/src/utils/cookie.ts

@@ -1,3 +1,11 @@
 export const hasCookieConsent = () =>
   typeof window !== 'undefined' &&
   window.document.cookie.indexOf('nuk-consent-personalisation=1') >= 0;
+
+export const getPreferredEdition = () => {
+  if (!window || !window.nuk) {
+    return 'uk';
+  }
+  const edition = window.nuk.getCookieValue('nuk_preferred_edition') || 'uk';
+  return edition.toLowerCase();
+};