@times-components/ts-components 1.146.2-52fb3513ac253011b85740aa1f70a12f27281c4e.28 → 1.146.2-63663ce01bc48c5c40f3f9affcb75ec88314b196.4

package/src/components/travel-mini-cta/index.tsx

@@ -1,191 +0,0 @@
-import React, { useEffect, useState, useRef, MouseEvent, FC } from 'react';
-import { TravelMiniCTAProps } from './types';
-import {
-  Container,
-  ContentWrapper,
-  LeftSection,
-  LogoContainer,
-  LogoBox,
-  LogoText,
-  TextContainer,
-  Label,
-  MobileLabel,
-  Description,
-  RightSection,
-  ContactInfo,
-  PhoneLabel,
-  PhoneNumber,
-  WorkingHoursContainer,
-  WorkingHoursText,
-  ButtonsContainer,
-  PrimaryButton,
-  SecondaryButton
-} from './styles';
-
-// Extend Window interface for LivePerson
-declare global {
-  interface Window {
-    lpTag?: {
-      [key: string]: any;
-    };
-  }
-}
-
-export const TravelMiniCTA: FC<TravelMiniCTAProps> = ({
-  description,
-  phoneLabel,
-  phoneNumber,
-  workingHours,
-  primaryButtonText,
-  secondaryButtonText,
-  secondaryButtonUrl,
-  isApp,
-  isOnChannelPage = false
-}) => {
-  const [chatReady, setChatReady] = useState(false);
-  const [chatFailed, setChatFailed] = useState(false);
-  const [buttonText, setButtonText] = useState('Loading chat...');
-  const chatDivRef = useRef<HTMLDivElement>(null);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const observerRef = useRef<MutationObserver | null>(null);
-
-  const handlePrimaryButtonClick = (
-    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>
-  ) => {
-    e.preventDefault();
-
-    const chatDiv = chatDivRef.current;
-    if (chatDiv) {
-      const lpEventElement = chatDiv.querySelector(
-        '[data-lp-event]'
-      ) as HTMLElement;
-      if (lpEventElement) {
-        lpEventElement.click();
-      }
-    }
-  };
-
-  useEffect(
-    () => {
-      if (typeof window === 'undefined') {
-        return;
-      }
-
-      const cleanup = () => {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-          timeoutRef.current = null;
-        }
-        if (observerRef.current) {
-          observerRef.current.disconnect();
-          observerRef.current = null;
-        }
-      };
-
-      const handleChatReady = () => {
-        cleanup();
-        setChatReady(true);
-        setChatFailed(false);
-        setButtonText(primaryButtonText || 'Chat with us');
-      };
-
-      const handleChatFailed = () => {
-        cleanup();
-        setChatReady(false);
-        setChatFailed(true);
-        setButtonText('Call us');
-      };
-
-      // Check if LivePerson is already loaded
-      if (window.lpTag && window.lpTag.loaded) {
-        handleChatReady();
-        return cleanup;
-      }
-
-      // Set up MutationObserver to detect when LivePerson loads
-      const chatDiv = chatDivRef.current;
-      if (!chatDiv) {
-        return cleanup;
-      }
-
-      observerRef.current = new MutationObserver(() => {
-        const lpEventElement = chatDiv.querySelector('[data-lp-event]');
-        if (lpEventElement) {
-          handleChatReady();
-        }
-      });
-
-      observerRef.current.observe(chatDiv, {
-        childList: true,
-        subtree: true
-      });
-
-      // Fallback: If LivePerson doesn't load in 15s, show "Call us"
-      timeoutRef.current = setTimeout(handleChatFailed, 15000);
-
-      return cleanup;
-    },
-    [primaryButtonText]
-  );
-
-  return (
-    <Container data-testid="travel-mini-cta" isApp={isApp}>
-      <ContentWrapper>
-        <LeftSection>
-          <LogoContainer>
-            <LogoBox isApp={isApp}>
-              <LogoText isApp={isApp}>T</LogoText>
-            </LogoBox>
-            <MobileLabel isApp={isApp}>TIMES HOLIDAYS</MobileLabel>
-          </LogoContainer>
-          <TextContainer>
-            <Label isApp={isApp}>TIMES HOLIDAYS</Label>
-            <Description isApp={isApp}>{description}</Description>
-          </TextContainer>
-        </LeftSection>
-
-        <RightSection>
-          <ContactInfo>
-            <PhoneLabel href={`tel:${phoneNumber}`} isApp={isApp}>
-              {phoneLabel}{' '}
-              <PhoneNumber isApp={isApp}>{phoneNumber}</PhoneNumber>
-            </PhoneLabel>
-            <WorkingHoursContainer>
-              {workingHours &&
-                workingHours.map((hours, index) => (
-                  <WorkingHoursText key={index} isApp={isApp}>
-                    {hours}
-                  </WorkingHoursText>
-                ))}
-            </WorkingHoursContainer>
-          </ContactInfo>
-          <ButtonsContainer $isOnChannelPage={isOnChannelPage}>
-            {chatFailed ? (
-              <PrimaryButton as="a" href={`tel:${phoneNumber}`} isApp={isApp}>
-                {buttonText}
-              </PrimaryButton>
-            ) : (
-              <PrimaryButton
-                as="button"
-                type="button"
-                onClick={handlePrimaryButtonClick}
-                isApp={isApp}
-                disabled={!chatReady}
-              >
-                {buttonText}
-              </PrimaryButton>
-            )}
-            <div
-              id="LP_DIV_TRAVEL_1239001"
-              ref={chatDivRef}
-              style={{ display: 'none' }}
-            />
-            <SecondaryButton href={secondaryButtonUrl} isApp={isApp}>
-              {secondaryButtonText}
-            </SecondaryButton>
-          </ButtonsContainer>
-        </RightSection>
-      </ContentWrapper>
-    </Container>
-  );
-};

package/src/components/travel-mini-cta/styles.ts

@@ -1,359 +0,0 @@
-import styled from 'styled-components';
-import { getMediaQuery, applyDarkMode } from '../../utils';
-
-const BaseLabel = styled.div<{ isApp?: boolean }>`
-  font-family: 'Roboto';
-  font-weight: 500;
-  line-height: 1.125;
-  font-size: 14px;
-  letter-spacing: 0em;
-  color: #236fa3;
-  text-transform: uppercase;
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        color: #f5f5f5 !important;
-    `,
-      isApp
-    )};
-`;
-
-export const Container = styled.div<{ isApp?: boolean }>`
-  background-color: #ffffff;
-  padding: 24px 0;
-  border-top: 1px dashed;
-  border-bottom: 1px dashed;
-  border-color: #cccccc;
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        background-color: #f5f5f5 !important;
-        border-color: #e4e4e4 !important;
-    `,
-      isApp
-    )};
-`;
-
-export const ContentWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 20px;
-
-  ${getMediaQuery('xs', 'md')} {
-    flex-direction: column;
-    gap: 24px;
-  }
-`;
-
-export const LeftSection = styled.div`
-  display: flex;
-  align-items: flex-start;
-  width: 50%;
-  gap: 24px;
-
-  ${getMediaQuery('xs', 'md')} {
-    width: 100%;
-    flex-direction: column;
-    gap: 16px;
-  }
-`;
-
-export const LogoContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  ${getMediaQuery('xs', 'md')} {
-    flex-direction: row-reverse;
-    justify-content: flex-start;
-    justify-content: space-between;
-    width: 100%;
-  }
-`;
-
-export const LogoBox = styled.div<{ isApp?: boolean }>`
-  width: 40px;
-  height: 40px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #236fa3;
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        background-color: #c2c2c2 !important;
-    `,
-      isApp
-    )};
-`;
-
-export const LogoText = styled.span<{ isApp?: boolean }>`
-  font-family: 'Times Modern', serif;
-  font-weight: 700;
-  font-size: 40px;
-  line-height: 1.125;
-  letter-spacing: 0.02em;
-  color: #ffffff;
-  padding-top: 4px;
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        color: #1d1d1b !important;
-    `,
-      isApp
-    )};
-`;
-
-export const TextContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  max-width: 375px;
-
-  ${getMediaQuery('xs', 'md')} {
-    gap: 24px;
-  }
-`;
-
-export const Label = styled(BaseLabel)`
-  ${getMediaQuery('xs', 'md')} {
-    display: none;
-  }
-`;
-
-export const MobileLabel = styled(BaseLabel)`
-  display: none;
-
-  ${getMediaQuery('xs', 'md')} {
-    display: block;
-  }
-`;
-
-export const Description = styled.div<{ isApp?: boolean }>`
-  font-family: 'Times Modern';
-  font-weight: 700;
-  line-height: 1.125;
-  font-size: 24px;
-  letter-spacing: 0em;
-  color: #333333;
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        color: #cccccc !important;
-    `,
-      isApp
-    )};
-
-  ${getMediaQuery('xs', 'md')} {
-    margin-right: 64px;
-  }
-`;
-
-export const RightSection = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  width: 50%;
-
-  ${getMediaQuery('xs', 'md')} {
-    gap: 32px;
-    width: 100%;
-  }
-`;
-
-export const ContactInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
-
-export const PhoneLabel = styled.a<{ isApp?: boolean }>`
-  text-decoration: none;
-  display: inline;
-  font-family: 'Times Digital W04 Regular';
-  font-weight: 400;
-  line-height: 1.5;
-  font-size: 18px;
-  letter-spacing: 0em;
-  color: #333333;
-  cursor: pointer;
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        color: #c2c2c2 !important;
-    `,
-      isApp
-    )};
-
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-
-export const PhoneNumber = styled.span<{ isApp?: boolean }>`
-  font-family: 'Times Modern';
-  font-weight: 700;
-  line-height: 1.125;
-  font-size: 22px;
-  letter-spacing: 0em;
-  color: #333333;
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        color: #c2c2c2 !important;
-    `,
-      isApp
-    )};
-`;
-
-export const WorkingHoursContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-
-  ${getMediaQuery('xs', 'md')} {
-    flex-direction: column;
-  }
-`;
-
-export const WorkingHoursText = styled.div<{ isApp?: boolean }>`
-  font-family: 'Times Digital W04 Regular';
-  font-weight: 400;
-  line-height: 1.5;
-  font-size: 18px;
-  letter-spacing: 0em;
-  color: #333333;
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        color: #cccccc !important;
-    `,
-      isApp
-    )};
-`;
-
-export const ButtonsContainer = styled.div<{ $isOnChannelPage?: boolean }>`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-
-  ${getMediaQuery('sm')} {
-    flex-direction: ${({ $isOnChannelPage }) =>
-      $isOnChannelPage ? 'row' : 'column'};
-  }
-
-  ${getMediaQuery('md')} {
-    flex-direction: column;
-  }
-
-  ${getMediaQuery('lg')} {
-    flex-direction: ${({ $isOnChannelPage }) =>
-      $isOnChannelPage ? 'row' : 'column'};
-  }
-`;
-
-const BaseButton = styled.a`
-  text-decoration: none;
-  border-radius: 0px;
-  width: 100%;
-  min-height: 44px;
-  font-family: 'Roboto';
-  font-weight: 500;
-  line-height: 1.5;
-  font-size: 16px;
-  letter-spacing: 0em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-`;
-
-export const PrimaryButton = styled(BaseButton)<{
-  disabled?: boolean;
-  isApp?: boolean;
-}>`
-  border: none;
-  background-color: #005c8a;
-  color: #ffffff;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
-
-  div[data-lp-event] {
-    cursor: pointer;
-    font-family: 'Roboto';
-    font-weight: 500;
-    line-height: 1.5;
-    font-size: 16px;
-    letter-spacing: 0em;
-  }
-
-  &:hover {
-    background-color: #00527a;
-  }
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        background-color: #74bade !important;
-        color: #1d1d1b !important;
-
-        &:hover {
-            background-color: #93cbe8 !important;
-        }
-    `,
-      isApp
-    )};
-`;
-
-export const SecondaryButton = styled(BaseButton)<{ isApp?: boolean }>`
-  border: 1px solid #005c8a;
-  background-color: transparent;
-  color: #005c8a;
-
-  &:hover {
-    background-color: #f5f5f5;
-  }
-
-  ${({ isApp }) =>
-    applyDarkMode(
-      `
-        border-color: #74bade !important;
-        color: #74bade !important;
-
-        &:hover {
-            background-color: #01000d !important;
-        }
-    `,
-      isApp
-    )};
-`;
-
-export const ArticleBlockContainer = styled.div`
-  padding-inline: 10px;
-  margin-block-end: 25px;
-
-  ${getMediaQuery('md')} {
-    max-width: 80.8%;
-    padding-inline: 0;
-    margin-inline: auto;
-  }
-
-  ${getMediaQuery('lg')} {
-    max-width: 56.2%;
-    padding-inline: 0;
-    margin-inline: auto;
-  }
-`;

package/src/components/travel-mini-cta/travel-mini-cta.stories.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { TravelMiniCTA } from './index';
-import { ArticleBlockContainer } from './styles';
-import { ArticleHarness } from '../../fixtures/article-harness/ArticleHarness';
-
-storiesOf('Typescript Component/In Article/Travel Mini CTA', module).add(
-  'Travel Mini CTA',
-  () => (
-    <ArticleHarness>
-      <ArticleBlockContainer>
-        <TravelMiniCTA
-          description="Begin your journey to Croatia with a holiday designed around you, guided by a dedicated travel expert."
-          phoneLabel="Call us on"
-          phoneNumber="08083049757"
-          workingHours={['Mon - Fri: 9am - 6pm', 'Sat: 10am - 5pm']}
-          primaryButtonText="Chat to a consultant"
-          secondaryButtonText="Enquire now"
-          secondaryButtonUrl="/enquire"
-        />
-      </ArticleBlockContainer>
-    </ArticleHarness>
-  )
-);

package/src/components/travel-mini-cta/types.ts

@@ -1,11 +0,0 @@
-export interface TravelMiniCTAProps {
-  description?: string;
-  phoneLabel?: string;
-  phoneNumber?: string;
-  workingHours?: string[];
-  primaryButtonText?: string;
-  secondaryButtonText?: string;
-  secondaryButtonUrl?: string;
-  isApp?: boolean;
-  isOnChannelPage?: boolean;
-}

package/src/utils/applyDarkMode.ts

@@ -1,12 +0,0 @@
-// Helper for dark mode styling
-export const applyDarkMode = (styles: string, isApp?: boolean) => {
-  if (!isApp) {
-    return '';
-  }
-
-  return `
-        @media (prefers-color-scheme: dark) {
-            ${styles}
-        }
-    `;
-};

package/src/utils/getMediaQuery.ts

@@ -1,25 +0,0 @@
-export const breakpoints = {
-  xs: 0,
-  sm: 520,
-  md: 768,
-  lg: 1024,
-  xl: 1320,
-  all: 0
-};
-
-export type BreakPointKeys = keyof typeof breakpoints;
-export type MQ = Partial<Record<BreakPointKeys, string>> | string;
-
-export const getMediaQuery = (
-  minWidth?: keyof typeof breakpoints,
-  maxWidth?: keyof typeof breakpoints
-) => () => {
-  const queries = ['@media screen'];
-  if (minWidth && breakpoints[minWidth]) {
-    queries.push(` and (min-width: ${breakpoints[minWidth]}px)`);
-  }
-  if (maxWidth) {
-    queries.push(` and (max-width: ${breakpoints[maxWidth] - 1}px)`);
-  }
-  return queries.join('');
-};

package/src/utils/index.ts

@@ -1,2 +0,0 @@
-export { applyDarkMode } from './applyDarkMode';
-export { getMediaQuery } from './getMediaQuery';