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

package/src/components/social-embed/SocialVendor.tsx

@@ -3,56 +3,12 @@ import { Twitter } from './components/TwitterComponent';
 import { Youtube } from './components/YoutubeComponent';
 import { TikTok } from './components/TiktokComponent';
 import { Instagram } from './components/InstagramComponent';
-import { Facebook } from './components/FacebookComponent';
-import { useSocialEmbedsContext } from '../../contexts/SocialEmbedsProvider';
-import { BlockedEmbedMessage } from './BlockedEmbedMessage';
-import { VendorName } from './types';
 
 const vendors = {
   twitter: Twitter,
   youtube: Youtube,
   tiktok: TikTok,
-  instagram: Instagram,
-  facebook: Facebook
-};
-
-
-export const Vendor = ({
-  vendorName,
-  url
-}: {
-  vendorName: VendorName;
-  url: string;
-}) => {
-  const { isSocialEmbedAllowed, isAllowedOnce } = useSocialEmbedsContext();
-
-  // Step 2: Only mount the actual social vendor component after consent
- const allowed =
-  isSocialEmbedAllowed[vendorName] === true ||
-  isAllowedOnce[vendorName] === true;
-
- 
-if (!allowed && ['instagram', 'twitter', 'facebook'].includes(vendorName)) {
-  return <BlockedEmbedMessage vendorName={vendorName as VendorName} />;
-}
-
-  const Component = vendors[vendorName];
-  return <Component url={url} />;
-};
-
-/* import React from 'react';
-import { Twitter } from './components/TwitterComponent';
-import { Youtube } from './components/YoutubeComponent';
-import { TikTok } from './components/TiktokComponent';
-import { Instagram } from './components/InstagramComponent';
-import { Facebook } from './components/FacebookComponent';
-
-const vendors = {
-  twitter: Twitter,
-  youtube: Youtube,
-  tiktok: TikTok,
-  instagram: Instagram,
-  facebook: Facebook
+  instagram: Instagram
 };
 
 export type VendorName = keyof typeof vendors;
@@ -67,4 +23,3 @@ export const Vendor = ({
   const Component = vendors[vendorName];
   return <Component url={url} />;
 };
- */

package/src/components/social-embed/__tests__/SocialVendor.test.tsx

@@ -29,12 +29,6 @@ jest.mock('../components/InstagramComponent', () => ({
   ))
 }));
 
-jest.mock('../components/FacebookComponent', () => ({
-  Facebook: jest.fn(() => (
-    <div data-testid="facebook-component">Facebook Component</div>
-  ))
-}));
-
 describe('Vendor Component', () => {
   const renderVendor = (vendorName: VendorName, url: string) =>
     render(<Vendor vendorName={vendorName} url={url} />);
@@ -62,11 +56,6 @@ describe('Vendor Component', () => {
     expect(screen.getByTestId('instagram-component')).toBeInTheDocument();
   });
 
-   it('renders the Facebook component when vendorName is "facebook"', () => {
-    renderVendor('facebook' as VendorName, 'https://facebook.com/some/video');
-    expect(screen.getByTestId('facebook-component')).toBeInTheDocument();
-  });
-
   it('throws an error if an invalid vendorName is provided', () => {
     const renderInvalidVendor = () =>
       render(

package/src/components/social-embed/constants.ts

@@ -11,6 +11,5 @@ export const eventStatus = {
 
 export const vendors = {
   instagram: 'instagram',
-  twitter: 'twitter',
-  facebook: 'facebook'
+  twitter: 'twitter'
 } as const;

package/src/components/social-embed/helpers/socialMediaVendors.ts

@@ -20,10 +20,5 @@ export const socialMediaVendors: {
     id: '5e717c8e69966540e4554f05',
     status: 'pending',
     title: 'Instagram'
-  },
-  facebook: {
-    id: '5e8dj207kee725du372h892',
-    status: 'pending',
-    title: 'Facebook'
   }
 };

package/src/components/social-embed/styles.ts

@@ -96,33 +96,3 @@ export const InstagramContainer = styled.blockquote`
   width: calc(100% - 2px);
   position: relative;
 `;
-
-
-export const FacebookContainer = styled.div`
-  width: 100%;
-  max-width: 540px;
-  margin: 24px auto;
-
-  background: #ffffff;
-  border: 1px solid #dadde1;
-  border-radius: 8px;
-
-  min-height: 200px;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  iframe {
-    width: 100% !important;
-    border: none;
-    overflow: hidden;
-  }
-
-  span,
-  .fb-post,
-  .fb-video {
-    width: 100% !important;
-  }
-`;
-

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

@@ -0,0 +1,64 @@
+import React, { FC } from 'react';
+import { Placeholder } from '@times-components/image';
+import {
+  CardContainer,
+  ImageContainer,
+  CardContent,
+  TopContainer,
+  BottomContainer,
+  DataPointsList,
+  DataPoint,
+  PriceSection,
+  PriceContainer
+} from './styles';
+import {
+  SkeletonLine,
+  SkeletonHeadline,
+  SkeletonPrice,
+  SkeletonButton
+} from './skeletonStyles';
+import { ImageHeightConfig } from './types';
+import { defaultTripCardImgHeight } from './helpers';
+
+export const SkeletonCard: FC<{
+  isStaticGrid?: boolean;
+  imgHeight?: ImageHeightConfig;
+  forceStaticGrid?: boolean;
+}> = ({ isStaticGrid, imgHeight = {}, forceStaticGrid }) => {
+  return (
+    <CardContainer data-testid="skeleton-card-container">
+      <ImageContainer
+        data-testid="skeleton-image-container"
+        isStaticGrid={isStaticGrid && !forceStaticGrid}
+        {...{ ...defaultTripCardImgHeight, ...imgHeight }}
+      >
+        <Placeholder />
+      </ImageContainer>
+      <CardContent data-testid="skeleton-card-content">
+        <TopContainer data-testid="skeleton-top-container">
+          <SkeletonHeadline data-testid="skeleton-headline" />
+          <DataPointsList data-testid="skeleton-data-points-list">
+            {[1, 2, 3, 4].map(i => (
+              <DataPoint key={i} data-testid={`skeleton-data-point-${i}`}>
+                <SkeletonLine width="80px" data-testid={`skeleton-line-${i}`} />
+              </DataPoint>
+            ))}
+          </DataPointsList>
+        </TopContainer>
+        <BottomContainer data-testid="skeleton-bottom-container">
+          <PriceSection data-testid="skeleton-price-section">
+            <PriceContainer data-testid="skeleton-price-container">
+              <SkeletonLine
+                width="40px"
+                marginBottom="4px"
+                data-testid="skeleton-price-label"
+              />
+              <SkeletonPrice data-testid="skeleton-price" />
+            </PriceContainer>
+          </PriceSection>
+          <SkeletonButton as="div" data-testid="skeleton-button" />
+        </BottomContainer>
+      </CardContent>
+    </CardContainer>
+  );
+};

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

@@ -0,0 +1,172 @@
+import React, { FC, useState } from 'react';
+import { Placeholder } from '@times-components/image';
+import { TripCardProps } from './types';
+import {
+  CardContainer,
+  ImageContainer,
+  CardImage,
+  OfferLabel,
+  GiftBanner,
+  CardContent,
+  TopContainer,
+  BottomContainer,
+  Headline,
+  DataPointsList,
+  DataPoint,
+  DataIcon,
+  PriceSection,
+  PriceContainer,
+  OfferContainer,
+  PriceLabel,
+  OriginalPrice,
+  CurrentPrice,
+  LogoContainer,
+  CTAButton,
+  PriceSuffix,
+  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,
+  isStaticGrid,
+  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"
+        onClick={handleCardClick('img')}
+      >
+        <ImageContainer isStaticGrid={isStaticGrid} {...imgHeight}>
+          {!imageLoaded && <Placeholder />}
+          <CardImage
+            src={card.image}
+            alt={card.headline}
+            onLoad={() => setImageLoaded(true)}
+            isLoaded={imageLoaded}
+          />
+          {card.offer_label && <OfferLabel>{card.offer_label}</OfferLabel>}
+          {card.gift_banner && <GiftBanner>{card.gift_banner}</GiftBanner>}
+        </ImageContainer>
+      </StyledLink>
+
+      <CardContent>
+        <TopContainer>
+          <StyledLink
+            href={card.cta_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={handleCardClick('headline')}
+          >
+            <Headline>{card.headline}</Headline>
+          </StyledLink>
+
+          <DataPointsList>
+            {card.date && (
+              <DataPoint>
+                <DataIcon>
+                  <CalendarIcon />
+                </DataIcon>
+                <span>{card.date}</span>
+              </DataPoint>
+            )}
+            {card.duration && (
+              <DataPoint>
+                <DataIcon>
+                  <MoonIcon />
+                </DataIcon>
+                <span>{card.duration}</span>
+              </DataPoint>
+            )}
+            {card.route && (
+              <DataPoint>
+                <DataIcon>
+                  <LocationIcon />
+                </DataIcon>
+                <span>{card.route}</span>
+              </DataPoint>
+            )}
+            {card.ship && (
+              <DataPoint>
+                <DataIcon>
+                  <BoatIcon />
+                </DataIcon>
+                <span>{card.ship}</span>
+              </DataPoint>
+            )}
+          </DataPointsList>
+        </TopContainer>
+
+        <BottomContainer>
+          <PriceSection>
+            <PriceContainer>
+              {card.price !== 'Enquire now' && (
+                <OfferContainer>
+                  {<PriceLabel>From</PriceLabel>}
+                  {card.original_price && (
+                    <OriginalPrice>{card.original_price}</OriginalPrice>
+                  )}
+                </OfferContainer>
+              )}
+              <CurrentPrice $isEnquire={card.price === 'Enquire now'}>
+                {card.price}
+                {card.price !== 'Enquire now' && <PriceSuffix>pp</PriceSuffix>}
+              </CurrentPrice>
+            </PriceContainer>
+
+            {card.logo && (
+              <LogoContainer>
+                <a
+                  href={card.logo_url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={handleLogoClick}
+                >
+                  <img src={card.logo} alt="Partner logo" />
+                </a>
+              </LogoContainer>
+            )}
+          </PriceSection>
+
+          <CTAButton
+            href={card.cta_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={handleCTAClick}
+          >
+            {card.cta_text || 'View Itinerary'}
+          </CTAButton>
+        </BottomContainer>
+      </CardContent>
+    </CardContainer>
+  );
+};

package/src/components/trip-cards/TripCards.stories.tsx

@@ -0,0 +1,224 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TripCards } from './index';
+import styled from 'styled-components';
+import { defaultTripCardImgHeight } from './helpers';
+
+const spacing = (multiplier: number) => `${multiplier * 8}px`;
+
+const breakpoints = {
+  medium: 768,
+  wide: 1024
+};
+
+const InteractiveContainer = styled.div`
+  position: relative;
+  margin-bottom: ${spacing(4)};
+  padding: 0 ${spacing(2)};
+
+  @media (min-width: ${breakpoints.medium}px) {
+    width: 80.8%;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0;
+  }
+
+  @media (min-width: ${breakpoints.wide}px) {
+    width: 56.2%;
+  }
+`;
+
+storiesOf('Typescript Component/TripCards', module)
+  .add('Channel View Two Cards', () => (
+    <TripCards
+      element={{
+        class: 'trip-cards',
+        tripcards: btoa(JSON.stringify([2074350, 2140335])),
+        title: 'Similar cruises',
+        titleurl: 'https://www.thetimes.com/travel/holidays',
+        description: 'Brought to you by Times Holidays'
+      }}
+      useMockData={true}
+      maxWidthItemConfig={{
+        xs: '85%',
+        mobile: '87%',
+        tablet: '44%',
+        desktop: '314px',
+        xl: '368px'
+      }}
+      widthContainerConfig={{
+        tablet: '728px',
+        desktop: '984px',
+        xl: '1144px'
+      }}
+    />
+  ))
+  .add('Channel View Three Cards', () => (
+    <TripCards
+      element={{
+        class: 'trip-cards',
+        tripcards: btoa(JSON.stringify([2074350, 2140335, 2177685])),
+        title: 'Featured Voyages',
+        titleurl: 'https://www.thetimes.com/travel/holidays',
+        description: 'Handpicked by our travel experts'
+      }}
+      forceStaticGrid={true}
+      maxWidthItemConfig={{
+        xs: '85%',
+        mobile: '87%',
+        tablet: '44%',
+        desktop: '314px',
+        xl: '368px'
+      }}
+      widthContainerConfig={{
+        tablet: '728px',
+        desktop: '984px',
+        xl: '1144px'
+      }}
+      useMockData={true}
+    />
+  ))
+  .add('Article View Two Trip Cards', () => (
+    <InteractiveContainer>
+      <TripCards
+        element={{
+          class: 'trip-cards',
+          tripcards: btoa(JSON.stringify([2074350, 2140335])),
+          title: 'Similar cruises',
+          titleurl: 'https://www.thetimes.com/travel/holidays',
+          description: 'Brought to you by Times Holidays'
+        }}
+        useMockData={true}
+        maxWidthItemConfig={{
+          mobile: '320px',
+          tablet: '260px',
+          desktop: '260px',
+          xl: '300px'
+        }}
+        widthContainerConfig={{
+          mobile: '390px',
+          tablet: '620px',
+          desktop: '574px',
+          xl: '663px'
+        }}
+        imgHeight={defaultTripCardImgHeight}
+      />
+    </InteractiveContainer>
+  ))
+  .add('Article View Three Cards', () => (
+    <InteractiveContainer>
+      <TripCards
+        element={{
+          class: 'trip-cards',
+          tripcards: btoa(JSON.stringify([2074350, 2140335, 2177685])),
+          title: 'Similar cruises',
+          titleurl: 'https://www.thetimes.com/travel/holidays',
+          description: 'Brought to you by Times Holidays'
+        }}
+        useMockData={true}
+        maxWidthItemConfig={{
+          mobile: '320px',
+          tablet: '260px',
+          desktop: '260px',
+          xl: '300px'
+        }}
+        widthContainerConfig={{
+          mobile: '390px',
+          tablet: '620px',
+          desktop: '574px',
+          xl: '663px'
+        }}
+        imgHeight={{ ...defaultTripCardImgHeight, $heightXs: '100%' }}
+      />
+    </InteractiveContainer>
+  ))
+  .add('Article View Two Trip Cards', () => (
+    <InteractiveContainer>
+      <TripCards
+        element={{
+          class: 'trip-cards',
+          tripcards: btoa(JSON.stringify([2074350, 2140335])),
+          title: 'Similar cruises',
+          titleurl: 'https://www.thetimes.com/travel/holidays',
+          description: 'Brought to you by Times Holidays'
+        }}
+        useMockData={true}
+        maxWidthItemConfig={{
+          mobile: '320px',
+          tablet: '260px',
+          desktop: '260px',
+          xl: '300px'
+        }}
+        widthContainerConfig={{
+          mobile: '390px',
+          tablet: '620px',
+          desktop: '574px',
+          xl: '663px'
+        }}
+        imgHeight={defaultTripCardImgHeight}
+      />
+    </InteractiveContainer>
+  ))
+  .add('Article View Trip Cards', () => (
+    <InteractiveContainer>
+      <TripCards
+        element={{
+          class: 'trip-cards',
+          tripcards: btoa(JSON.stringify([2074350, 2140335, 2177685])),
+          title: 'Similar cruises',
+          titleurl: 'https://www.thetimes.com/travel/holidays',
+          description: 'Brought to you by Times Holidays'
+        }}
+        useMockData={true}
+        maxWidthItemConfig={{
+          mobile: '320px',
+          tablet: '260px',
+          desktop: '260px',
+          xl: '300px'
+        }}
+        widthContainerConfig={{
+          mobile: '390px',
+          tablet: '620px',
+          desktop: '574px',
+          xl: '663px'
+        }}
+        imgHeight={defaultTripCardImgHeight}
+      />
+    </InteractiveContainer>
+  ))
+  .add('Article View Six Cards', () => (
+    <InteractiveContainer>
+      <TripCards
+        element={{
+          class: 'trip-cards',
+          tripcards: btoa(
+            JSON.stringify([
+              2074350,
+              2140335,
+              2177685,
+              2074351,
+              2140336,
+              2177686
+            ])
+          ),
+          title: 'Similar cruises',
+          titleurl: 'https://www.thetimes.com/travel/holidays',
+          description: 'Brought to you by Times Holidays'
+        }}
+        useMockData={true}
+        maxWidthItemConfig={{
+          mobile: '320px',
+          tablet: '260px',
+          desktop: '260px',
+          xl: '300px'
+        }}
+        widthContainerConfig={{
+          mobile: '390px',
+          tablet: '620px',
+          desktop: '574px',
+          xl: '663px'
+        }}
+        imgHeight={defaultTripCardImgHeight}
+      />
+    </InteractiveContainer>
+  ));