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

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

@@ -0,0 +1,351 @@
+import { TripCardApiData, ApiCruiseResult } from './types';
+import { transformApiResult } from './helpers';
+
+export const mockApiResults: ApiCruiseResult[] = [
+  {
+    post_id: 34246,
+    cruise_id: 2074350,
+    cruise_title: 'Mediterranean from Barcelona',
+    cruise_line: {
+      name: 'MSC Cruises',
+      link:
+        'https://www.staging-thetimes.com/holidays/cruise-lines/msc-cruises/',
+      logo:
+        'https://www.staging-thetimes.com/holidays/wp-content/uploads/2025/05/MSC.png'
+    },
+    ship: {
+      name: 'MSC Seaside',
+      link: 'https://www.staging-thetimes.com/holidays/ships/msc-seaside/',
+      image:
+        'https://www.staging-thetimes.com/holidays/wp-content/uploads/2025/05/1595507284-scaled-1024x683.jpg'
+    },
+    departs: '2025-10-21',
+    ends: '2025-10-28',
+    date_label: 'Oct 21 - Oct 28, 2025',
+    destination: ['Mediterranean'],
+    duration: 7,
+    itinerary: [
+      'Barcelona',
+      'La Goulette',
+      'Palermo (Monreale), Italy',
+      'Naples (Pompeii), Italy',
+      'Livorno(Florence), Italy',
+      'Marseille (Provence), France'
+    ],
+    prices: {
+      cheapest_price: 2000,
+      inside: 'Enquire now',
+      outside: 'Enquire now',
+      balcony: '2000',
+      suite: 'Enquire now'
+    },
+    was_prices: {
+      cheapest_price: 2500,
+      inside: 0,
+      outside: 0,
+      balcony: 2500,
+      suite: 0
+    },
+    link:
+      'https://www.staging-thetimes.com/holidays/cruises/mediterranean-from-barcelona-msc-seaside-2025-10-21/',
+    campaigns: [],
+    extras: {
+      date: 'Oct 2025 - Oct 2025',
+      duration: 'Seven Days',
+      destination: 'Mediterranean',
+      info: 'Seven nights onboard a four-star ship'
+    }
+  },
+  {
+    post_id: 37835,
+    cruise_id: 2140335,
+    cruise_title: 'Mediterranean from Genoa',
+    cruise_line: {
+      name: 'MSC Cruises',
+      link:
+        'https://www.staging-thetimes.com/holidays/cruise-lines/msc-cruises/',
+      logo:
+        'https://www.staging-thetimes.com/holidays/wp-content/uploads/2025/05/MSC.png'
+    },
+    ship: {
+      name: 'MSC Poesia',
+      link: 'https://www.staging-thetimes.com/holidays/ships/msc-poesia/',
+      image:
+        'https://www.staging-thetimes.com/holidays/wp-content/uploads/2025/05/1595507127-scaled-1024x518.jpg'
+    },
+    departs: '2025-10-21',
+    ends: '2025-10-25',
+    date_label: 'Oct 21 - Oct 25, 2025',
+    destination: ['Mediterranean'],
+    duration: 4,
+    itinerary: [
+      'Genoa (Portofino), Italy',
+      'Barcelona',
+      'Marseille (Provence), France'
+    ],
+    prices: {
+      cheapest_price: 0,
+      inside: 'Enquire now',
+      outside: 'Enquire now',
+      balcony: 'Enquire now',
+      suite: 'Enquire now'
+    },
+    was_prices: {
+      cheapest_price: 0,
+      inside: 0,
+      outside: 0,
+      balcony: 0,
+      suite: 0
+    },
+    link:
+      'https://www.staging-thetimes.com/holidays/cruises/mediterranean-from-genoa-msc-poesia-2025-10-21/',
+    campaigns: [],
+    extras: {
+      date: 'Oct 2025 - Oct 2025',
+      duration: 'Four Days',
+      destination: 'Mediterranean',
+      info: 'Four nights onboard a four-star ship'
+    }
+  },
+  {
+    post_id: 41162,
+    cruise_id: 2177685,
+    cruise_title: 'MSC Grand Voyages from Barcelona',
+    cruise_line: {
+      name: 'MSC Cruises',
+      link:
+        'https://www.staging-thetimes.com/holidays/cruise-lines/msc-cruises/',
+      logo:
+        'https://www.staging-thetimes.com/holidays/wp-content/uploads/2025/05/MSC.png'
+    },
+    ship: {
+      name: 'MSC Euribia',
+      link: 'https://www.staging-thetimes.com/holidays/ships/msc-euribia/',
+      image:
+        'https://www.staging-thetimes.com/holidays/wp-content/uploads/2025/05/1650819843-1024x579.jpg'
+    },
+    departs: '2025-10-21',
+    ends: '2025-11-12',
+    date_label: 'Oct 21 - Nov 12, 2025',
+    destination: [
+      'Mediterranean',
+      'Iberian Peninsula',
+      'Dubai & Emirates',
+      'Egypt & Red Sea'
+    ],
+    duration: 22,
+    itinerary: [
+      'Barcelona',
+      'Marseille (Provence), France',
+      'Civitavecchia (Rome), Italy',
+      'Alexandria',
+      'Suez Canal Transit',
+      'Aqaba',
+      'Muscat',
+      'Doha, Qatar',
+      'Dubai',
+      'Bahrain',
+      'Abu Dhabi'
+    ],
+    prices: {
+      cheapest_price: 0,
+      inside: 'Enquire now',
+      outside: 'Enquire now',
+      balcony: 'Enquire now',
+      suite: 'Enquire now'
+    },
+    was_prices: {
+      cheapest_price: 0,
+      inside: 0,
+      outside: 0,
+      balcony: 0,
+      suite: 0
+    },
+    link:
+      'https://www.staging-thetimes.com/holidays/cruises/msc-grand-voyages-from-barcelona-msc-euribia-2025-10-21/',
+    campaigns: [],
+    extras: {
+      date: 'Oct 2025 - Nov 2025',
+      duration: 'Twenty-two Days',
+      destination:
+        'Mediterranean, Iberian Peninsula, Dubai & Emirates, Egypt & Red Sea',
+      info: 'Twenty-two nights onboard a five-star ship'
+    }
+  },
+  {
+    post_id: 34246,
+    cruise_id: 2074351,
+    cruise_title: 'Mediterranean from Barcelona',
+    cruise_line: {
+      name: 'MSC Cruises',
+      link:
+        'https://www.staging-thetimes.com/holidays/cruise-lines/msc-cruises/',
+      logo:
+        'https://www.staging-thetimes.com/holidays/wp-content/uploads/2025/05/MSC.png'
+    },
+    ship: {
+      name: 'MSC Seaside',
+      link: 'https://www.staging-thetimes.com/holidays/ships/msc-seaside/',
+      image:
+        'https://www.staging-thetimes.com/holidays/wp-content/uploads/2025/05/1595507284-scaled-1024x683.jpg'
+    },
+    departs: '2025-10-21',
+    ends: '2025-10-28',
+    date_label: 'Oct 21 - Oct 28, 2025',
+    destination: ['Mediterranean'],
+    duration: 7,
+    itinerary: [
+      'Barcelona',
+      'La Goulette',
+      'Palermo (Monreale), Italy',
+      'Naples (Pompeii), Italy',
+      'Livorno(Florence), Italy',
+      'Marseille (Provence), France'
+    ],
+    prices: {
+      cheapest_price: 4550,
+      inside: 'Enquire now',
+      outside: 'Enquire now',
+      balcony: '4550',
+      suite: 'Enquire now'
+    },
+    was_prices: {
+      cheapest_price: 0,
+      inside: 0,
+      outside: 0,
+      balcony: 0,
+      suite: 0
+    },
+    link:
+      'https://www.staging-thetimes.com/holidays/cruises/mediterranean-from-barcelona-msc-seaside-2025-10-21/',
+    campaigns: [],
+    extras: {
+      date: 'Oct 2025 - Oct 2025',
+      duration: 'Seven Days',
+      destination: 'Mediterranean',
+      info: 'Seven nights onboard a four-star ship'
+    }
+  },
+  {
+    post_id: 37835,
+    cruise_id: 2140336,
+    cruise_title: 'Mediterranean from Genoa',
+    cruise_line: {
+      name: 'MSC Cruises',
+      link:
+        'https://www.staging-thetimes.com/holidays/cruise-lines/msc-cruises/',
+      logo:
+        'https://www.staging-thetimes.com/holidays/wp-content/uploads/2025/05/MSC.png'
+    },
+    ship: {
+      name: 'MSC Poesia',
+      link: 'https://www.staging-thetimes.com/holidays/ships/msc-poesia/',
+      image:
+        'https://www.staging-thetimes.com/holidays/wp-content/uploads/2025/05/1595507127-scaled-1024x518.jpg'
+    },
+    departs: '2025-10-21',
+    ends: '2025-10-25',
+    date_label: 'Oct 21 - Oct 25, 2025',
+    destination: ['Mediterranean'],
+    duration: 4,
+    itinerary: [
+      'Genoa (Portofino), Italy',
+      'Barcelona',
+      'Marseille (Provence), France'
+    ],
+    prices: {
+      cheapest_price: 0,
+      inside: 'Enquire now',
+      outside: 'Enquire now',
+      balcony: 'Enquire now',
+      suite: 'Enquire now'
+    },
+    was_prices: {
+      cheapest_price: 0,
+      inside: 0,
+      outside: 0,
+      balcony: 0,
+      suite: 0
+    },
+    link:
+      'https://www.staging-thetimes.com/holidays/cruises/mediterranean-from-genoa-msc-poesia-2025-10-21/',
+    campaigns: [],
+    extras: {
+      date: 'Oct 2025 - Oct 2025',
+      duration: 'Four Days',
+      destination: 'Mediterranean',
+      info: 'Four nights onboard a four-star ship'
+    }
+  },
+  {
+    post_id: 41162,
+    cruise_id: 2177686,
+    cruise_title: 'MSC Grand Voyages from Barcelona',
+    cruise_line: {
+      name: 'MSC Cruises',
+      link:
+        'https://www.staging-thetimes.com/holidays/cruise-lines/msc-cruises/',
+      logo:
+        'https://www.staging-thetimes.com/holidays/wp-content/uploads/2025/05/MSC.png'
+    },
+    ship: {
+      name: 'MSC Euribia',
+      link: 'https://www.staging-thetimes.com/holidays/ships/msc-euribia/',
+      image:
+        'https://www.staging-thetimes.com/holidays/wp-content/uploads/2025/05/1650819843-1024x579.jpg'
+    },
+    departs: '2025-10-21',
+    ends: '2025-11-12',
+    date_label: 'Oct 21 - Nov 12, 2025',
+    destination: [
+      'Mediterranean',
+      'Iberian Peninsula',
+      'Dubai & Emirates',
+      'Egypt & Red Sea'
+    ],
+    duration: 22,
+    itinerary: [
+      'Barcelona',
+      'Marseille (Provence), France',
+      'Civitavecchia (Rome), Italy',
+      'Alexandria',
+      'Suez Canal Transit',
+      'Aqaba',
+      'Muscat',
+      'Doha, Qatar',
+      'Dubai',
+      'Bahrain',
+      'Abu Dhabi'
+    ],
+    prices: {
+      cheapest_price: 0,
+      inside: 'Enquire now',
+      outside: 'Enquire now',
+      balcony: 'Enquire now',
+      suite: 'Enquire now'
+    },
+    was_prices: {
+      cheapest_price: 0,
+      inside: 0,
+      outside: 0,
+      balcony: 0,
+      suite: 0
+    },
+    link:
+      'https://www.staging-thetimes.com/holidays/cruises/msc-grand-voyages-from-barcelona-msc-euribia-2025-10-21/',
+    campaigns: [],
+    extras: {
+      date: 'Oct 2025 - Nov 2025',
+      duration: 'Twenty-two Days',
+      destination:
+        'Mediterranean, Iberian Peninsula, Dubai & Emirates, Egypt & Red Sea',
+      info: 'Twenty-two nights onboard a five-star ship'
+    }
+  }
+];
+
+// Get mock data already transformed
+export const getMockTripCards = (count?: number): TripCardApiData[] => {
+  const allCards = mockApiResults.map(transformApiResult);
+  return count ? allCards.slice(0, count) : allCards;
+};

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

@@ -0,0 +1,46 @@
+import styled, { css } from 'styled-components';
+import { CTAButton } from './styles';
+
+const skeletonBase = css`
+  background: linear-gradient(
+    to right,
+    #f0f0f0 0%,
+    #f5f2f2 20%,
+    #f0f0f0 40%,
+    #f0f0f0 100%
+  );
+  background-size: 800px 104px;
+`;
+
+interface SkeletonLineProps {
+  width?: string;
+  marginBottom?: string;
+}
+
+export const SkeletonLine = styled.div<SkeletonLineProps>`
+  ${skeletonBase} height: 16px;
+  width: ${props => props.width || '100%'};
+  margin-bottom: ${props => props.marginBottom || '0'};
+`;
+
+export const SkeletonHeadline = styled.div`
+  ${skeletonBase} height: 48px;
+  width: 100%;
+  margin-bottom: 16px;
+`;
+
+export const SkeletonPrice = styled.div`
+  ${skeletonBase} height: 28px;
+  width: 120px;
+`;
+
+export const SkeletonButton = styled(CTAButton)`
+  ${skeletonBase} height: 48px;
+  width: 100%;
+  pointer-events: none;
+  border: none;
+
+  &:hover {
+    transform: none;
+  }
+`;