@times-components/ts-components 1.146.2-0831d531868ee6854720b5b42c0a1ccdbe6a4a70.45 → 1.146.2-784617dc4a33959b8795da1d7f425c9929322fae.24

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

@@ -1,187 +0,0 @@
-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 { getDeviceType } from './helpers';
-
-export const TripCard: FC<TripCardProps> = ({
-  card,
-  isStaticGrid,
-  imgHeight = {},
-  source
-}) => {
-  const [imageLoaded, setImageLoaded] = useState(false);
-  const deviceType = getDeviceType();
-  console.log('source in TripCard:', source);
-  const trackEvent = (
-    eventName: string,
-    parentName: string,
-    sectionDetails: string
-  ) => {
-    tealiumTrackingHandler(
-      eventName,
-      'navigation',
-      'click',
-      parentName,
-      sectionDetails,
-      {
-        device_type: deviceType,
-        source_page: source || 'unknown'
-      }
-    );
-  };
-
-  const handleCardClick = () =>
-    trackEvent('travel card selected', card.headline, 'trip cards');
-
-  const handleCTAClick = () =>
-    trackEvent(
-      'trip card cta clicked',
-      card.headline,
-      card.cta_text || 'View Itinerary'
-    );
-
-  const handleLogoClick = () =>
-    trackEvent(
-      'trip provider logo clicked',
-      card.headline,
-      `trip provider - ${card.logo_url}`
-    );
-
-  return (
-    <CardContainer>
-      <StyledLink
-        href={card.cta_url}
-        target="_blank"
-        rel="noopener noreferrer"
-        onClick={handleCardClick}
-      >
-        <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>{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

@@ -1,224 +0,0 @@
-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>
-  ));

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

@@ -1,169 +0,0 @@
-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
-} from './styles';
-import { ChevronRightIcon } from './assets';
-import { tealiumTrackingHandler } from '../../helpers/tracking/TrackingHandler';
-
-export const TripCardsLayout: FC<TripCardsLayoutProps> = ({
-  element,
-  items,
-  CardComponent,
-  itemsPerPage,
-  widthContainerConfig = {},
-  widthItemConfig,
-  maxWidthItemConfig,
-  imgHeight,
-  forceStaticGrid,
-  source
-}) => {
-  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 section title',
-      'navigation',
-      'click',
-      'Trip Cards',
-      title || 'trip cards section',
-      {
-        source_page: source || 'unknown'
-      }
-    );
-  };
-
-  console.log('source in TripCard:', source);
-
-  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 ? (
-              <TitleLink
-                href={titleurl}
-                target="_blank"
-                rel="noopener noreferrer"
-                onClick={onTitleClick}
-                data-testid="trip-cards-title-link"
-                style={{ textDecoration: 'none', color: 'inherit' }}
-              >
-                <Title data-testid="trip-cards-title">{title}</Title>
-              </TitleLink>
-            ) : (
-              <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}
-              source={source}
-            />
-          ))}
-        </StaticCardsGrid>
-      ) : (
-        <CarouselComponent
-          items={items.map(item => (
-            <CarouselItem
-              key={item.id}
-              widthItemConfig={widthItemConfig}
-              maxWidthItemConfig={maxWidthItemConfig}
-            >
-              <CardComponent
-                card={item.data}
-                imgHeight={imgHeight}
-                source={source}
-              />
-            </CarouselItem>
-          ))}
-          options={{
-            itemsPerPage
-          }}
-          showArrows={!isStaticGrid}
-          showDots={true}
-        />
-      )}
-    </Container>
-  );
-};