@times-components/ts-components 1.146.2-0f9388fe36c532b90db3f35d17847fc17a611f1e.44 → 1.146.2-9d94da839cee591620d598d11e637971d7109888.26

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

@@ -0,0 +1,191 @@
+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

@@ -0,0 +1,333 @@
+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('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
+    )};
+`;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TravelMiniCTA } from './index';
+import { ArticleHarness } from '../../fixtures/article-harness/ArticleHarness';
+
+storiesOf('Typescript Component/In Article/Travel Mini CTA', module).add(
+  'Travel Mini CTA',
+  () => (
+    <ArticleHarness>
+      <div style={{ padding: '16px' }}>
+        <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"
+        />
+      </div>
+    </ArticleHarness>
+  )
+);

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

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

package/src/index.ts

@@ -32,6 +32,7 @@ export {
 } from './components/update-button/update-button-with-delay';
 export { Banner } from './components/banner/banner';
 export { JobTitle } from './components/job-title/job-title';
+export { TravelMiniCTA } from './components/travel-mini-cta';
 
 // Newsletter Components
 export {
@@ -104,8 +105,6 @@ export {
   default as ArticleHeader
 } from './components/article-header/ArticleHeader';
 
-export { TripCards } from './components/trip-cards';
-
 export {
   UpdatedTimestamp
 } from './components/updated-timestamp/UpdatedTimestamp';

package/src/utils/applyDarkMode.ts

@@ -0,0 +1,12 @@
+// 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

@@ -0,0 +1,25 @@
+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

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