@times-components/ts-components 1.146.2-a0ffbb6bc2acbec91d140a39f6be06256e702094.5 → 1.146.2-c12ed7999a41984c2ba8c437357e7a5df1914881.48

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

@@ -0,0 +1,162 @@
+import React, { FC, useRef, useState, useEffect } from 'react';
+import { CarouselComponent, CarouselItem } from '../carousel-component';
+import { TripCardsLayoutProps } from './types';
+import {
+  Container,
+  TitleSection,
+  TitleBar,
+  TitleContent,
+  Title,
+  Subtitle,
+  TitleLink,
+  StaticCardsGrid,
+  StyledLink
+} from './styles';
+import { ChevronRightIcon } from './assets';
+import { tealiumTrackingHandler } from '../../helpers/tracking/TrackingHandler';
+import { getPreferredEdition } from '../../utils/cookie';
+
+export const TripCardsLayout: FC<TripCardsLayoutProps> = ({
+  element,
+  items,
+  CardComponent,
+  itemsPerPage,
+  widthContainerConfig = {},
+  widthItemConfig,
+  maxWidthItemConfig,
+  imgHeight,
+  forceStaticGrid
+}) => {
+  const { titleurl, title, description } = element;
+  const gridRef = useRef<HTMLDivElement>(null);
+  const [hasOverflow, setHasOverflow] = useState(false);
+  const [isTabletMobile, setIsTabletMobile] = useState(false);
+
+  const isStaticGrid = items.length === 2 || forceStaticGrid;
+
+  // Handle responsive breakpoint detection
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(max-width: 1024px)');
+    const handleMediaChange = (e: MediaQueryListEvent | MediaQueryList) => {
+      setIsTabletMobile(e.matches);
+    };
+    handleMediaChange(mediaQuery);
+    mediaQuery.addEventListener('change', handleMediaChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleMediaChange);
+    };
+  }, []);
+
+  useEffect(
+    () => {
+      if (!isStaticGrid || !gridRef.current) {
+        setHasOverflow(false);
+        return;
+      }
+
+      const checkOverflow = () => {
+        if (gridRef.current) {
+          const isOverflowing =
+            gridRef.current.scrollWidth > gridRef.current.clientWidth;
+          setHasOverflow(isOverflowing);
+        }
+      };
+
+      checkOverflow();
+      const resizeObserver = new ResizeObserver(checkOverflow);
+      resizeObserver.observe(gridRef.current);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    },
+    [isStaticGrid, items.length]
+  );
+
+  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">
+        <TitleBar
+          data-testid="title-bar"
+          applyRightPadding={!!widthContainerConfig.mobile}
+        >
+          <TitleContent data-testid="title-content">
+            {titleurl ? (
+              <StyledLink
+                href={titleurl}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={onTitleClick}
+                data-testid="trip-cards-title-link"
+              >
+                <Title data-testid="trip-cards-title">{title}</Title>
+              </StyledLink>
+            ) : (
+              <Title data-testid="trip-cards-title">{title}</Title>
+            )}
+            <Subtitle data-testid="trip-cards-subtitle">{description}</Subtitle>
+          </TitleContent>
+          {titleurl && (
+            <TitleLink
+              href={titleurl}
+              target="_blank"
+              rel="noopener noreferrer"
+              data-testid="title-link"
+              onClick={onTitleClick}
+            >
+              <ChevronRightIcon />
+            </TitleLink>
+          )}
+        </TitleBar>
+      </TitleSection>
+
+      {!shouldUseCarousel ? (
+        <StaticCardsGrid data-testid="static-cards-grid" ref={gridRef}>
+          {items.map(item => (
+            <CardComponent
+              imgHeight={imgHeight}
+              key={item.id}
+              card={item.data}
+              isStaticGrid={true}
+              forceStaticGrid={forceStaticGrid}
+            />
+          ))}
+        </StaticCardsGrid>
+      ) : (
+        <CarouselComponent
+          items={items.map(item => (
+            <CarouselItem
+              key={item.id}
+              widthItemConfig={widthItemConfig}
+              maxWidthItemConfig={maxWidthItemConfig}
+            >
+              <CardComponent card={item.data} imgHeight={imgHeight} />
+            </CarouselItem>
+          ))}
+          options={{
+            itemsPerPage
+          }}
+          showArrows={!isStaticGrid}
+          showDots={true}
+        />
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,169 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { SkeletonCard } from '../SkeletonCard';
+
+describe('SkeletonCard', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<SkeletonCard />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('renders placeholder image', () => {
+    render(<SkeletonCard />);
+    const imageContainer = screen.getByTestId('skeleton-image-container');
+    expect(imageContainer).toBeInTheDocument();
+  });
+
+  it('renders skeleton headline', () => {
+    render(<SkeletonCard />);
+    const skeletonHeadline = screen.getByTestId('skeleton-headline');
+    expect(skeletonHeadline).toBeInTheDocument();
+  });
+
+  it('renders four skeleton data points in the list', () => {
+    render(<SkeletonCard />);
+    const dataPoints = [
+      screen.getByTestId('skeleton-data-point-1'),
+      screen.getByTestId('skeleton-data-point-2'),
+      screen.getByTestId('skeleton-data-point-3'),
+      screen.getByTestId('skeleton-data-point-4')
+    ];
+    expect(dataPoints.length).toBe(4);
+  });
+
+  it('renders skeleton lines for data points', () => {
+    render(<SkeletonCard />);
+    const skeletonLines = [
+      screen.getByTestId('skeleton-line-1'),
+      screen.getByTestId('skeleton-line-2'),
+      screen.getByTestId('skeleton-line-3'),
+      screen.getByTestId('skeleton-line-4'),
+      screen.getByTestId('skeleton-price-label')
+    ];
+    expect(skeletonLines.length).toBe(5);
+  });
+
+  it('renders skeleton price', () => {
+    render(<SkeletonCard />);
+    const skeletonPrice = screen.getByTestId('skeleton-price');
+    expect(skeletonPrice).toBeInTheDocument();
+  });
+
+  it('renders skeleton button', () => {
+    render(<SkeletonCard />);
+    const skeletonButton = screen.getByTestId('skeleton-button');
+    expect(skeletonButton).toBeInTheDocument();
+  });
+
+  it('has correct card structure', () => {
+    render(<SkeletonCard />);
+    const cardContainer = screen.getByTestId('skeleton-card-container');
+    const cardContent = screen.getByTestId('skeleton-card-content');
+    const topContainer = screen.getByTestId('skeleton-top-container');
+    const bottomContainer = screen.getByTestId('skeleton-bottom-container');
+
+    expect(cardContainer).toBeInTheDocument();
+    expect(cardContent).toBeInTheDocument();
+    expect(topContainer).toBeInTheDocument();
+    expect(bottomContainer).toBeInTheDocument();
+  });
+
+  it('renders price section with container', () => {
+    render(<SkeletonCard />);
+    const priceSection = screen.getByTestId('skeleton-price-section');
+    const priceContainer = screen.getByTestId('skeleton-price-container');
+
+    expect(priceSection).toBeInTheDocument();
+    expect(priceContainer).toBeInTheDocument();
+  });
+
+  it('renders data points list', () => {
+    render(<SkeletonCard />);
+    const dataPointsList = screen.getByTestId('skeleton-data-points-list');
+    expect(dataPointsList).toBeInTheDocument();
+  });
+
+  it('skeleton lines are rendered for each data point', () => {
+    render(<SkeletonCard />);
+    const skeletonLines = [
+      screen.getByTestId('skeleton-line-1'),
+      screen.getByTestId('skeleton-line-2'),
+      screen.getByTestId('skeleton-line-3'),
+      screen.getByTestId('skeleton-line-4'),
+      screen.getByTestId('skeleton-price-label')
+    ];
+    expect(skeletonLines.length).toBe(5);
+  });
+
+  it('renders with correct skeleton styling', () => {
+    render(<SkeletonCard />);
+
+    expect(screen.getByTestId('skeleton-headline')).toBeInTheDocument();
+    expect(screen.getByTestId('skeleton-price')).toBeInTheDocument();
+    expect(screen.getByTestId('skeleton-button')).toBeInTheDocument();
+    // Check that skeleton lines are present
+    expect(screen.getByTestId('skeleton-line-1')).toBeInTheDocument();
+  });
+
+  it('renders consistent structure', () => {
+    render(<SkeletonCard />);
+
+    expect(screen.getByTestId('skeleton-card-container')).toBeInTheDocument();
+    expect(screen.getByTestId('skeleton-image-container')).toBeInTheDocument();
+    expect(screen.getByTestId('skeleton-card-content')).toBeInTheDocument();
+    expect(screen.getByTestId('skeleton-top-container')).toBeInTheDocument();
+    expect(screen.getByTestId('skeleton-bottom-container')).toBeInTheDocument();
+  });
+
+  it('can render multiple skeleton cards', () => {
+    render(
+      <>
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+      </>
+    );
+
+    const cards = screen.getAllByTestId('skeleton-card-container');
+    expect(cards.length).toBe(3);
+  });
+
+  it('renders skeleton elements in correct order', () => {
+    render(<SkeletonCard />);
+
+    const cardContent = screen.getByTestId('skeleton-card-content');
+    const topContainer = screen.getByTestId('skeleton-top-container');
+    const bottomContainer = screen.getByTestId('skeleton-bottom-container');
+
+    // Verify both containers exist as children of card content
+    expect(cardContent.contains(topContainer)).toBe(true);
+    expect(cardContent.contains(bottomContainer)).toBe(true);
+  });
+
+  it('skeleton button has correct structure', () => {
+    render(<SkeletonCard />);
+    const skeletonButton = screen.getByTestId('skeleton-button');
+
+    expect(skeletonButton.tagName.toLowerCase()).toBe('div');
+  });
+
+  it('skeleton lines have correct width props', () => {
+    render(<SkeletonCard />);
+
+    // Check that the skeleton lines are rendered
+    expect(screen.getByTestId('skeleton-line-1')).toBeInTheDocument();
+    expect(screen.getByTestId('skeleton-line-2')).toBeInTheDocument();
+    expect(screen.getByTestId('skeleton-line-3')).toBeInTheDocument();
+    expect(screen.getByTestId('skeleton-line-4')).toBeInTheDocument();
+  });
+
+  it('renders without any interactive elements', () => {
+    const { container } = render(<SkeletonCard />);
+    const buttons = container.querySelectorAll('button');
+    const links = container.querySelectorAll('a');
+
+    expect(buttons.length).toBe(0);
+    expect(links.length).toBe(0);
+  });
+});

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

@@ -0,0 +1,255 @@
+import React from 'react';
+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',
+  image: 'https://example.com/image.jpg',
+  headline: 'Mediterranean from Barcelona',
+  date: 'Oct 2025 - Oct 2025',
+  duration: 'Seven Days',
+  route: 'Barcelona → Marseille',
+  ship: 'MSC Seaside',
+  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} />);
+
+    expect(
+      screen.getByText('Mediterranean from Barcelona')
+    ).toBeInTheDocument();
+    expect(screen.getByText('Oct 2025 - Oct 2025')).toBeInTheDocument();
+    expect(screen.getByText('Seven Days')).toBeInTheDocument();
+    expect(screen.getByText('Barcelona → Marseille')).toBeInTheDocument();
+    expect(screen.getByText('MSC Seaside')).toBeInTheDocument();
+    expect(screen.getByText('£2000')).toBeInTheDocument();
+    expect(screen.getByText('From')).toBeInTheDocument();
+    expect(screen.getByText('View Itinerary')).toBeInTheDocument();
+  });
+
+  it('renders image with correct src and alt', () => {
+    render(<TripCard card={mockCard} />);
+
+    const image = screen.getByAltText('Mediterranean from Barcelona');
+    expect(image).toHaveAttribute('src', 'https://example.com/image.jpg');
+  });
+
+  it('renders offer label when provided', () => {
+    const cardWithOffer = {
+      ...mockCard,
+      offer_label: 'Special Offer'
+    };
+
+    render(<TripCard card={cardWithOffer} />);
+
+    expect(screen.getByText('Special Offer')).toBeInTheDocument();
+  });
+
+  it('renders gift banner when provided', () => {
+    const cardWithGift = {
+      ...mockCard,
+      gift_banner: 'Free gift with purchase'
+    };
+
+    render(<TripCard card={cardWithGift} />);
+
+    expect(screen.getByText('Free gift with purchase')).toBeInTheDocument();
+  });
+
+  it('renders original price when provided', () => {
+    const cardWithOriginalPrice = {
+      ...mockCard,
+      original_price: '£2500'
+    };
+
+    render(<TripCard card={cardWithOriginalPrice} />);
+
+    expect(screen.getByText('£2500')).toBeInTheDocument();
+  });
+
+  it('does not render "From" when price is "Enquire now"', () => {
+    const cardWithEnquire = {
+      ...mockCard,
+      price: 'Enquire now'
+    };
+
+    render(<TripCard card={cardWithEnquire} />);
+
+    expect(screen.queryByText('From')).not.toBeInTheDocument();
+    expect(screen.getByText('Enquire now')).toBeInTheDocument();
+  });
+
+  it('renders all CTA links with correct href and target', () => {
+    render(<TripCard card={mockCard} />);
+
+    const links = screen.getAllByRole('link');
+    const imageLink = links[0];
+    const headlineLink = links[1];
+    const ctaButton = screen.getByText('View Itinerary').closest('a');
+
+    expect(imageLink).toHaveAttribute('href', 'https://example.com/cruise');
+    expect(imageLink).toHaveAttribute('target', '_blank');
+    expect(headlineLink).toHaveAttribute('href', 'https://example.com/cruise');
+    expect(ctaButton).toHaveAttribute('href', 'https://example.com/cruise');
+  });
+
+  it('renders logo with link when provided', () => {
+    render(<TripCard card={mockCard} />);
+    const logoLink = screen.getByRole('link', { name: /partner logo/i });
+    expect(logoLink).toHaveAttribute('href', 'https://example.com');
+    const logoImg = screen.getByAltText('Partner logo');
+    expect(logoImg).toHaveAttribute('src', 'https://example.com/logo.png');
+  });
+
+  it('shows card image after it loads', () => {
+    render(<TripCard card={mockCard} />);
+
+    const cardImage = screen.getByAltText('Mediterranean from Barcelona');
+    expect(cardImage).toHaveStyle({ display: 'none' });
+    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)
+        }
+      );
+    });
+  });
+});