@times-components/ts-components 1.145.1-cfea81c4084e6f91221ea00fec9fc730d5b933cb.4 → 1.145.1-e871182934034874ea6a75e1e684090e5504df44.2

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

@@ -0,0 +1,164 @@
+import React, { FC, useState, useRef, useEffect, MouseEvent } 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';
+
+export const TravelMiniCTA: FC<TravelMiniCTAProps> = ({
+  description,
+  phoneLabel,
+  phoneNumber,
+  workingHours,
+  primaryButtonText,
+  secondaryButtonText,
+  secondaryButtonUrl,
+  isApp
+}) => {
+  const [chatReady, setChatReady] = useState(false);
+  const [chatFailed, setChatFailed] = useState(false);
+  const chatDivRef = useRef<HTMLDivElement>(null);
+
+  const formattedWorkingHours = workingHours
+    ? workingHours.split(',').map(hour => hour.trim())
+    : [];
+
+  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(
+    () => {
+      const chatDiv = chatDivRef.current;
+      if (!chatDiv || typeof window === 'undefined') {
+        return;
+      }
+
+      let timeoutId: NodeJS.Timeout | null = null;
+      let previouslyFound = false;
+
+      const observer = new MutationObserver(() => {
+        const lpEventElement = chatDiv.querySelector(
+          '[data-lp-event]'
+        ) as HTMLElement;
+
+        if (lpEventElement && !previouslyFound) {
+          previouslyFound = true;
+          setChatReady(true);
+          setChatFailed(false);
+
+          if (primaryButtonText) {
+            lpEventElement.textContent = primaryButtonText;
+          }
+
+          // Clear timeout since chat loaded successfully
+          if (timeoutId) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+          }
+        } else if (!lpEventElement && previouslyFound) {
+          previouslyFound = false;
+          setChatReady(false);
+          setChatFailed(false);
+        }
+      });
+
+      observer.observe(chatDiv, { childList: true, subtree: true });
+
+      timeoutId = setTimeout(() => {
+        if (!previouslyFound) {
+          observer.disconnect();
+          setChatFailed(true);
+        }
+      }, 15000);
+
+      return () => {
+        observer.disconnect();
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      };
+    },
+    [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}>VISIT TIMES HOLIDAYS</MobileLabel>
+          </LogoContainer>
+          <TextContainer>
+            <Label isApp={isApp}>VISIT 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>
+              {formattedWorkingHours.map((hours, index) => (
+                <WorkingHoursText key={index} isApp={isApp}>
+                  {hours}
+                </WorkingHoursText>
+              ))}
+            </WorkingHoursContainer>
+          </ContactInfo>
+          <ButtonsContainer>
+            <PrimaryButton
+              as="button"
+              type="button"
+              onClick={handlePrimaryButtonClick}
+              isApp={isApp}
+              disabled={!chatReady}
+            >
+              {chatFailed && 'Chat unavailable'}
+              {!chatReady && !chatFailed && 'Loading chat...'}
+              <div id="LP_DIV_TRAVEL_1239001" ref={chatDivRef} />
+            </PrimaryButton>
+            <SecondaryButton href={secondaryButtonUrl} isApp={isApp}>
+              {secondaryButtonText}
+            </SecondaryButton>
+          </ButtonsContainer>
+        </RightSection>
+      </ContentWrapper>
+    </Container>
+  );
+};

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

@@ -0,0 +1,336 @@
+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: 0.875rem;
+  letter-spacing: 0em;
+  color: #01000d;
+  text-transform: uppercase;
+
+  ${({ isApp }) =>
+    applyDarkMode(
+      `
+        color: #f5f5f5 !important;
+    `,
+      isApp
+    )};
+`;
+
+export const Container = styled.div<{ isApp?: boolean }>`
+  background-color: #ffffff;
+  padding: 24px;
+  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;
+  flex-direction: row;
+  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;
+  flex-direction: row;
+  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: #aaaaaa;
+
+  ${({ 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: 1.5rem;
+  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: 1.125rem;
+  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: 1.5rem;
+  letter-spacing: 0em;
+  color: #333333;
+  font-size: 2.2rem;
+
+  ${({ isApp }) =>
+    applyDarkMode(
+      `
+        color: #c2c2c2 !important;
+    `,
+      isApp
+    )};
+`;
+
+export const WorkingHoursContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  flex-wrap: wrap;
+
+  ${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: 1.125rem;
+  letter-spacing: 0em;
+  color: #333333;
+
+  ${({ isApp }) =>
+    applyDarkMode(
+      `
+        color: #cccccc !important;
+    `,
+      isApp
+    )};
+`;
+
+export const ButtonsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+
+  ${getMediaQuery('xs', 'md')} {
+    flex-direction: 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: 1rem;
+  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: 1rem;
+    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,157 @@
+import React from 'react';
+import { TravelMiniCTA } from './index';
+import { TravelMiniCTAProps } from './types';
+
+const TravelMiniCTAStory = ({
+  description,
+  phoneLabel,
+  phoneNumber,
+  workingHours,
+  primaryButtonText,
+  secondaryButtonText,
+  secondaryButtonUrl
+}: TravelMiniCTAProps) => {
+  return (
+    <div
+      style={{
+        padding: '16px'
+      }}
+    >
+      <TravelMiniCTA
+        description={description}
+        phoneLabel={phoneLabel}
+        phoneNumber={phoneNumber}
+        workingHours={workingHours}
+        primaryButtonText={primaryButtonText}
+        secondaryButtonText={secondaryButtonText}
+        secondaryButtonUrl={secondaryButtonUrl}
+      />
+    </div>
+  );
+};
+
+export default {
+  title: 'Typescript Component/Travel Mini CTA',
+  component: TravelMiniCTA,
+  parameters: {
+    docs: {
+      subtitle:
+        'The `TravelMiniCTA` component displays a call-to-action for travel services with contact information and action buttons.',
+      description: {
+        component:
+          'A responsive component that shows travel expert contact details, working hours, and primary/secondary action buttons. The layout adapts for mobile, tablet, and desktop viewports.'
+      }
+    }
+  }
+};
+
+export const Default = {
+  render: TravelMiniCTAStory,
+  name: 'Travel Mini CTA - Default',
+
+  args: {
+    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 with us',
+    secondaryButtonText: 'Enquire now',
+    secondaryButtonUrl: '/enquire'
+  },
+
+  argTypes: {
+    description: {
+      control: {
+        type: 'text'
+      },
+      description: 'Main description text for the CTA'
+    },
+    phoneLabel: {
+      control: {
+        type: 'text'
+      },
+      description: 'Label text before the phone number'
+    },
+    phoneNumber: {
+      control: {
+        type: 'text'
+      },
+      description: 'Phone number for contact (creates tel: link)'
+    },
+    workingHours: {
+      control: {
+        type: 'object'
+      },
+      description: 'Array of working hours strings'
+    },
+    primaryButtonText: {
+      control: {
+        type: 'text'
+      },
+      description: 'Text for the primary action button'
+    },
+    secondaryButtonText: {
+      control: {
+        type: 'text'
+      },
+      description: 'Text for the secondary action button'
+    },
+    secondaryButtonUrl: {
+      control: {
+        type: 'text'
+      },
+      description: 'URL for the secondary button link'
+    }
+  }
+};
+
+export const MinimalContent = {
+  render: TravelMiniCTAStory,
+  name: 'Travel Mini CTA - Minimal',
+
+  args: {
+    description: 'Discover your perfect holiday with expert guidance.',
+    phoneLabel: 'Call us',
+    phoneNumber: '0800 123 4567',
+    primaryButtonText: 'Get started',
+    secondaryButtonText: 'Learn more',
+    secondaryButtonUrl: '/learn-more'
+  }
+};
+
+export const ExtendedWorkingHours = {
+  render: TravelMiniCTAStory,
+  name: 'Travel Mini CTA - Extended Hours',
+
+  args: {
+    description:
+      'Plan your dream vacation with our 24/7 travel concierge service.',
+    phoneLabel: 'Contact us on',
+    phoneNumber: '+44 20 1234 5678',
+    workingHours: [
+      'Mon - Thu: 8am - 8pm',
+      'Fri: 8am - 6pm',
+      'Sat: 9am - 5pm',
+      'Sun: 10am - 4pm'
+    ],
+    primaryButtonText: 'Start chatting',
+    secondaryButtonText: 'View packages',
+    secondaryButtonUrl: '/packages'
+  }
+};
+
+export const CustomDestination = {
+  render: TravelMiniCTAStory,
+  name: 'Travel Mini CTA - Custom Description',
+
+  args: {
+    description: 'This is a placeholder for description.',
+    phoneLabel: 'Ring us on',
+    phoneNumber: '0808 1234567',
+    workingHours: ['Mon - Sat: 9am - 7pm', 'Sun: Closed'],
+    primaryButtonText: 'Talk to an expert',
+    secondaryButtonText: 'Request callback',
+    secondaryButtonUrl: '/callback'
+  }
+};

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

@@ -0,0 +1,10 @@
+export interface TravelMiniCTAProps {
+  description?: string;
+  phoneLabel?: string;
+  phoneNumber?: string;
+  workingHours?: string;
+  primaryButtonText?: string;
+  secondaryButtonText?: string;
+  secondaryButtonUrl?: string;
+  isApp?: 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('');
+};