@times-components/ts-components 1.145.1-b32ea924749bafdf12e3e8515023538fa20e7808.3 → 1.145.1-cfea81c4084e6f91221ea00fec9fc730d5b933cb.4

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

@@ -0,0 +1,256 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  SkeletonLine,
+  SkeletonHeadline,
+  SkeletonPrice,
+  SkeletonButton
+} from '../skeletonStyles';
+
+describe('Skeleton Styles', () => {
+  describe('SkeletonLine', () => {
+    it('renders with default width', () => {
+      const { container } = render(<SkeletonLine />);
+      const element = container.firstChild;
+      expect(element).toBeInTheDocument();
+    });
+
+    it('accepts custom width prop', () => {
+      const { container } = render(<SkeletonLine width="80px" />);
+      const element = container.firstChild;
+      expect(element).toBeInTheDocument();
+    });
+
+    it('accepts custom marginBottom prop', () => {
+      const { container } = render(<SkeletonLine marginBottom="4px" />);
+      const element = container.firstChild;
+      expect(element).toBeInTheDocument();
+    });
+
+    it('accepts both width and marginBottom props', () => {
+      const { container } = render(
+        <SkeletonLine width="60px" marginBottom="8px" />
+      );
+      const element = container.firstChild;
+      expect(element).toBeInTheDocument();
+    });
+
+    it('renders as a div element', () => {
+      const { container } = render(<SkeletonLine />);
+      const element = container.firstChild;
+      if (element) {
+        expect(element.nodeName).toBe('DIV');
+      }
+    });
+
+    it('applies skeleton styling', () => {
+      const { container } = render(<SkeletonLine />);
+      const element = container.firstChild as HTMLElement;
+      expect(element.className).toMatch(/sc-/);
+    });
+  });
+
+  describe('SkeletonHeadline', () => {
+    it('renders correctly', () => {
+      const { container } = render(<SkeletonHeadline />);
+      const element = container.firstChild;
+      expect(element).toBeInTheDocument();
+    });
+
+    it('renders as a div element', () => {
+      const { container } = render(<SkeletonHeadline />);
+      const element = container.firstChild;
+      if (element) {
+        expect(element.nodeName).toBe('DIV');
+      }
+    });
+
+    it('has styled component class', () => {
+      const { container } = render(<SkeletonHeadline />);
+      const element = container.firstChild as HTMLElement;
+      expect(element.className).toMatch(/sc-/);
+    });
+
+    it('accepts className prop', () => {
+      const { container } = render(<SkeletonHeadline className="custom" />);
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('custom');
+    });
+  });
+
+  describe('SkeletonPrice', () => {
+    it('renders correctly', () => {
+      const { container } = render(<SkeletonPrice />);
+      const element = container.firstChild;
+      expect(element).toBeInTheDocument();
+    });
+
+    it('renders as a div element', () => {
+      const { container } = render(<SkeletonPrice />);
+      const element = container.firstChild;
+      if (element) {
+        expect(element.nodeName).toBe('DIV');
+      }
+    });
+
+    it('has styled component class', () => {
+      const { container } = render(<SkeletonPrice />);
+      const element = container.firstChild as HTMLElement;
+      expect(element.className).toMatch(/sc-/);
+    });
+
+    it('can be used multiple times', () => {
+      const { container } = render(
+        <>
+          <SkeletonPrice />
+          <SkeletonPrice />
+          <SkeletonPrice />
+        </>
+      );
+      const elements = container.querySelectorAll('div');
+      expect(elements.length).toBe(3);
+    });
+  });
+
+  describe('SkeletonButton', () => {
+    it('renders correctly', () => {
+      const { container } = render(<SkeletonButton as="div" />);
+      const element = container.firstChild;
+      expect(element).toBeInTheDocument();
+    });
+
+    it('renders as div when specified', () => {
+      const { container } = render(<SkeletonButton as="div" />);
+      const element = container.firstChild;
+      if (element) {
+        expect(element.nodeName).toBe('DIV');
+      }
+    });
+
+    it('has styled component class', () => {
+      const { container } = render(<SkeletonButton as="div" />);
+      const element = container.firstChild as HTMLElement;
+      expect(element.className).toMatch(/sc-/);
+    });
+
+    it('accepts additional props', () => {
+      const { container } = render(
+        <SkeletonButton as="div" data-testid="skeleton-button" />
+      );
+      const element = container.firstChild;
+      expect(element).toHaveAttribute('data-testid', 'skeleton-button');
+    });
+
+    it('is not interactive', () => {
+      const { container } = render(<SkeletonButton as="div" />);
+      const element = container.firstChild;
+      if (element) {
+        expect(element.nodeName).toBe('DIV');
+      }
+    });
+  });
+
+  describe('Skeleton Components Integration', () => {
+    it('all skeleton components render together', () => {
+      const { container } = render(
+        <div>
+          <SkeletonHeadline />
+          <SkeletonLine width="80px" />
+          <SkeletonPrice />
+          <SkeletonButton as="div" />
+        </div>
+      );
+
+      // Verify all components are present (4 skeleton components + 1 wrapper div = 5 divs minimum)
+      const elements = container.querySelectorAll('div');
+      expect(elements.length).toBeGreaterThanOrEqual(5);
+    });
+
+    it('skeleton components maintain consistent styling', () => {
+      const { container } = render(
+        <div>
+          <SkeletonLine />
+          <SkeletonHeadline />
+          <SkeletonPrice />
+        </div>
+      );
+
+      const styledElements = container.querySelectorAll('[class*="sc-"]');
+      expect(styledElements.length).toBeGreaterThanOrEqual(3);
+    });
+
+    it('skeleton components are div elements by default', () => {
+      const { container } = render(
+        <div>
+          <SkeletonLine />
+          <SkeletonHeadline />
+          <SkeletonPrice />
+        </div>
+      );
+
+      const divs = Array.from(container.querySelectorAll('div'));
+      expect(divs.length).toBeGreaterThanOrEqual(4);
+    });
+
+    it('props are correctly applied to skeleton components', () => {
+      const { container } = render(
+        <div>
+          <SkeletonLine width="50px" marginBottom="10px" />
+          <SkeletonButton as="div" className="btn-skeleton" />
+        </div>
+      );
+
+      const elements = container.querySelectorAll('div');
+      expect(elements.length).toBeGreaterThanOrEqual(2);
+    });
+  });
+
+  describe('Styled Components Structure', () => {
+    it('SkeletonLine has correct structure', () => {
+      const { container } = render(<SkeletonLine />);
+      expect(container.firstChild).toBeTruthy();
+    });
+
+    it('SkeletonHeadline has correct structure', () => {
+      const { container } = render(<SkeletonHeadline />);
+      expect(container.firstChild).toBeTruthy();
+    });
+
+    it('SkeletonPrice has correct structure', () => {
+      const { container } = render(<SkeletonPrice />);
+      expect(container.firstChild).toBeTruthy();
+    });
+
+    it('SkeletonButton has correct structure', () => {
+      const { container } = render(<SkeletonButton as="div" />);
+      expect(container.firstChild).toBeTruthy();
+    });
+  });
+
+  describe('Props and Variants', () => {
+    it('SkeletonLine with different widths', () => {
+      const { rerender, container } = render(<SkeletonLine width="20px" />);
+      expect(container.firstChild).toBeInTheDocument();
+
+      rerender(<SkeletonLine width="100px" />);
+      expect(container.firstChild).toBeInTheDocument();
+
+      rerender(<SkeletonLine width="50%" />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('SkeletonLine with different margins', () => {
+      const { rerender, container } = render(
+        <SkeletonLine marginBottom="2px" />
+      );
+      expect(container.firstChild).toBeInTheDocument();
+
+      rerender(<SkeletonLine marginBottom="8px" />);
+      expect(container.firstChild).toBeInTheDocument();
+
+      rerender(<SkeletonLine marginBottom="16px" />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});

package/src/components/trip-cards/assets/BoatIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export const BoatIcon = (props: any) => (
+  <svg
+    width="15"
+    height="16"
+    viewBox="0 0 15 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M2.78887 3.51093V6.29999L6.98887 4.92187L11.1889 6.29999V3.51093H2.78887ZM1.34512 12.6L0.0326173 7.94062C0.0107423 7.89687 -0.000195216 7.82031 -0.000195216 7.71093C-0.000195216 7.40468 0.163867 7.18593 0.491992 7.05468L1.37793 6.75937V3.51093C1.37793 3.13906 1.52012 2.81093 1.80449 2.52656C2.08887 2.24218 2.41699 2.09999 2.78887 2.09999H4.88887V-7.20099e-06H9.08887V2.09999H11.1889C11.5607 2.09999 11.8889 2.24218 12.1732 2.52656C12.4576 2.81093 12.5998 3.13906 12.5998 3.51093V6.75937L13.4857 7.05468C13.9451 7.20781 14.0982 7.50312 13.9451 7.94062L12.6326 12.6H12.5998C11.5279 12.6 10.5873 12.1406 9.77793 11.2219C8.96856 12.1406 8.03887 12.6 6.98887 12.6C5.93887 12.6 5.00918 12.1406 4.19981 11.2219C3.39043 12.1406 2.4498 12.6 1.37793 12.6H1.34512ZM12.5998 14.0109H13.9779V15.4219H12.5998C11.6154 15.4219 10.6748 15.1922 9.77793 14.7328C8.90293 15.1703 7.97324 15.3891 6.98887 15.3891C6.00449 15.3891 5.07481 15.1703 4.19981 14.7328C3.30293 15.1922 2.3623 15.4219 1.37793 15.4219H-0.000195216V14.0109H1.37793C2.38418 14.0109 3.32481 13.7047 4.19981 13.0922C5.05293 13.6828 5.98262 13.9781 6.98887 13.9781C7.99512 13.9781 8.92481 13.6828 9.77793 13.0922C10.6529 13.7047 11.5936 14.0109 12.5998 14.0109Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/src/components/trip-cards/assets/CalendarIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export const CalendarIcon = (props: any) => (
+  <svg
+    width="13"
+    height="14"
+    viewBox="0 0 13 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M11.189 12.6V4.88907H1.41084V12.6H11.189ZM11.189 1.37813C11.5608 1.37813 11.889 1.52032 12.1733 1.80469C12.4577 2.08907 12.5999 2.41719 12.5999 2.78907V12.6C12.5999 12.9719 12.4577 13.3 12.1733 13.5844C11.889 13.8469 11.5608 13.9781 11.189 13.9781H1.41084C1.01709 13.9781 0.678028 13.8469 0.393653 13.5844C0.131152 13.3219 -9.75132e-05 12.9938 -9.75132e-05 12.6V2.78907C-9.75132e-05 2.41719 0.131152 2.08907 0.393653 1.80469C0.678028 1.52032 1.01709 1.37813 1.41084 1.37813H2.0999V5.05522e-06H3.51084V1.37813H9.08897V5.05522e-06H10.4999V1.37813H11.189ZM9.81084 6.30001V7.67813H8.3999V6.30001H9.81084ZM6.98897 6.30001V7.67813H5.61084V6.30001H6.98897ZM4.1999 6.30001V7.67813H2.78897V6.30001H4.1999Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/src/components/trip-cards/assets/ChevronRightIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export const ChevronRightIcon = (props: any) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M6 12L10 8L6 4"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/components/trip-cards/assets/LocationIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export const LocationIcon = (props: any) => (
+  <svg
+    width="10"
+    height="14"
+    viewBox="0 0 10 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M3.64238 6.13594C3.99238 6.46407 4.40801 6.62813 4.88926 6.62813C5.37051 6.62813 5.7752 6.46407 6.10332 6.13594C6.45332 5.78594 6.62832 5.37032 6.62832 4.88907C6.62832 4.40782 6.45332 4.00313 6.10332 3.67501C5.7752 3.32501 5.37051 3.15001 4.88926 3.15001C4.40801 3.15001 3.99238 3.32501 3.64238 3.67501C3.31426 4.00313 3.1502 4.40782 3.1502 4.88907C3.1502 5.37032 3.31426 5.78594 3.64238 6.13594ZM1.41113 1.44376C2.37363 0.481255 3.53301 5.05522e-06 4.88926 5.05522e-06C6.24551 5.05522e-06 7.39395 0.481255 8.33457 1.44376C9.29707 2.38438 9.77832 3.53282 9.77832 4.88907C9.77832 5.56719 9.60332 6.34376 9.25332 7.21876C8.9252 8.09376 8.52051 8.91407 8.03926 9.67969C7.55801 10.4453 7.07676 11.1672 6.59551 11.8453C6.13613 12.5016 5.74238 13.0266 5.41426 13.4203L4.88926 13.9781C4.75801 13.825 4.58301 13.6281 4.36426 13.3875C4.14551 13.125 3.75176 12.6219 3.18301 11.8781C2.61426 11.1125 2.11113 10.3797 1.67363 9.67969C1.25801 8.95782 0.875196 8.14844 0.525196 7.25157C0.175196 6.35469 0.000195552 5.56719 0.000195552 4.88907C0.000195552 3.53282 0.470508 2.38438 1.41113 1.44376Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/src/components/trip-cards/assets/MoonIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export const MoonIcon = (props: any) => (
+  <svg
+    width="14"
+    height="15"
+    viewBox="0 0 14 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M7.21856 0.0656178C6.69356 0.984368 6.38731 1.92499 6.29981 2.88749C6.21231 3.84999 6.31074 4.77968 6.59512 5.67656C6.90137 6.57343 7.36074 7.38281 7.97324 8.10468C8.58574 8.82656 9.31856 9.40624 10.1717 9.84374C11.0467 10.2812 12.0092 10.5109 13.0592 10.5328C12.6436 11.2328 12.1295 11.8453 11.517 12.3703C10.9045 12.8953 10.2154 13.3109 9.44981 13.6172C8.68418 13.9016 7.86387 14.0437 6.98887 14.0437C6.02637 14.0437 5.11856 13.8687 4.26543 13.5187C3.43418 13.1469 2.69043 12.6437 2.03418 12.0094C1.3998 11.3531 0.89668 10.6094 0.524805 9.77812C0.174805 8.92499 -0.000195216 8.01718 -0.000195216 7.05468C-0.000195216 6.07031 0.185742 5.15156 0.557617 4.29843C0.929492 3.44531 1.44355 2.70156 2.0998 2.06718C2.75605 1.41093 3.52168 0.907805 4.39668 0.557805C5.27168 0.18593 6.21231 0.0218678 7.21856 0.0656178Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/src/components/trip-cards/assets/index.ts

@@ -0,0 +1,7 @@
+import { BoatIcon } from './BoatIcon';
+import { CalendarIcon } from './CalendarIcon';
+import { ChevronRightIcon } from './ChevronRightIcon';
+import { LocationIcon } from './LocationIcon';
+import { MoonIcon } from './MoonIcon';
+
+export { BoatIcon, LocationIcon, CalendarIcon, MoonIcon, ChevronRightIcon };

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

@@ -0,0 +1,99 @@
+import { TripCardApiData, ApiCruiseResult } from './types';
+
+const decodeHtmlEntities = (text: string): string => {
+  const textarea = document.createElement('textarea');
+  textarea.innerHTML = text;
+  return textarea.value;
+};
+
+export const transformApiResult = (
+  result: ApiCruiseResult
+): TripCardApiData => {
+  const formatPrice = (price: number | string): string => {
+    if (price === 0 || price === 'Enquire now') {
+      return 'Enquire now';
+    }
+    return typeof price === 'string' ? price : `£${price}`;
+  };
+
+  const formatRoute = (itinerary: string[]): string => {
+    if (itinerary.length <= 2) {
+      return itinerary.join(' → ');
+    }
+    return `${itinerary[0]} → ${itinerary[itinerary.length - 1]}`;
+  };
+
+  const formatOriginalPrice = (
+    wasPrice: number | string
+  ): string | undefined => {
+    if (!wasPrice || wasPrice === 0 || wasPrice === 'Enquire now') {
+      return undefined;
+    }
+    return typeof wasPrice === 'string' ? wasPrice : `£${wasPrice}`;
+  };
+
+  return {
+    cruise_id: String(result.cruise_id),
+    image: result.ship.image,
+    offer_label: result.campaigns.length > 0 ? result.campaigns[0] : undefined,
+    headline: decodeHtmlEntities(result.cruise_title),
+    date: result.extras.date,
+    duration: result.extras.duration,
+    route: formatRoute(result.itinerary),
+    ship: result.ship.name,
+    original_price: formatOriginalPrice(result.was_prices.cheapest_price),
+    price: formatPrice(result.prices.cheapest_price),
+    logo: result.cruise_line.logo,
+    logo_url: result.cruise_line.link,
+    cta_url: result.link,
+    cta_text: 'View Itinerary'
+  };
+};
+
+export const decodeIds = (encoded: string): number[] => {
+  try {
+    const decoded = atob(encoded);
+    const data = JSON.parse(decoded);
+    if (Array.isArray(data)) {
+      return data;
+    }
+    return [];
+  } catch (e) {
+    // Failed to decode trip card IDs
+    return [];
+  }
+};
+
+export const fetchCruiseCards = async (
+  cruiseIds: number[]
+): 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
+    }
+  );
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  const data = await response.json();
+
+  if (data.results && Array.isArray(data.results)) {
+    const transformedCards: TripCardApiData[] = data.results.map(
+      (result: ApiCruiseResult) => transformApiResult(result)
+    );
+
+    return cruiseIds.map(id =>
+      transformedCards.find(card => card.cruise_id === String(id))
+    ) as TripCardApiData[];
+  }
+
+  throw new Error('Invalid API response format');
+};

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

@@ -0,0 +1,104 @@
+import React, { FC, useState, useEffect } from 'react';
+import { TripCardsProps, TripCardApiData } from './types';
+import { TripCard } from './TripCard';
+import { SkeletonCard } from './SkeletonCard';
+import { TripCardsLayout } from './TripCardsLayout';
+import { getMockTripCards } from './mockData';
+import { decodeIds, fetchCruiseCards } from './helpers';
+
+export const TripCards: FC<TripCardsProps> = ({
+  element,
+  useMockData = false
+}) => {
+  const [cards, setCards] = useState<TripCardApiData[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [itemsPerPage, setItemsPerPage] = useState(2);
+  const allIds = [...decodeIds(element.tripcards || '')].filter(
+    (id, index, self) => self.indexOf(id) === index
+  );
+
+  useEffect(
+    () => {
+      const loadCards = async () => {
+        if (allIds.length === 0) {
+          setLoading(false);
+          setError('No valid cruise IDs provided');
+          return;
+        }
+
+        if (useMockData) {
+          setCards(getMockTripCards(allIds.length));
+          setLoading(false);
+          return;
+        }
+
+        try {
+          const transformedCards = await fetchCruiseCards(allIds);
+          setCards(transformedCards);
+        } catch (e) {
+          setError(e instanceof Error ? e.message : 'Failed to load cruises');
+        } finally {
+          setLoading(false);
+        }
+      };
+
+      loadCards();
+    },
+    [element.tripcards, useMockData]
+  );
+
+  useEffect(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+      // sm/xs: < 768px → 1 card per page
+      // md/lg/xl: >= 768px → 2 cards per page
+      if (width < 768) {
+        setItemsPerPage(1);
+      } else {
+        setItemsPerPage(2);
+      }
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  if (loading) {
+    const skeletonItems = Array.from(
+      { length: allIds.length || 2 },
+      (_, i) => ({
+        id: `skeleton-${i}`
+      })
+    );
+
+    return (
+      <TripCardsLayout
+        element={element}
+        items={skeletonItems}
+        CardComponent={SkeletonCard}
+        itemsPerPage={itemsPerPage}
+      />
+    );
+  }
+
+  if (error || cards.length === 0) {
+    return null;
+  }
+
+  const cardItems = cards.map((card, index) => ({
+    id: `${card.cruise_id}-${index}`,
+    data: card
+  }));
+
+  return (
+    <TripCardsLayout
+      element={element}
+      items={cardItems}
+      CardComponent={TripCard}
+      itemsPerPage={itemsPerPage}
+    />
+  );
+};
+
+export default TripCards;