@times-components/ts-components 1.146.2-784617dc4a33959b8795da1d7f425c9929322fae.24 → 1.146.2-c9973aa4b92ab539c7e626ec928a64701390290d.3

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

@@ -1,330 +0,0 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import {
-  render,
-  screen,
-  act,
-  fireEvent,
-  waitFor
-} from '@testing-library/react';
-import { TravelMiniCTA } from '../index';
-
-describe('TravelMiniCTA', () => {
-  const defaultProps = {
-    description:
-      'Begin your journey to Croatia with a holiday designed around you',
-    phoneLabel: 'Call us on',
-    phoneNumber: '08083049757',
-    workingHours: ['Mon - Fri: 9am - 6pm', 'Sat: 10am - 5pm'],
-    primaryButtonText: 'Chat with us',
-    secondaryButtonText: 'Enquire now',
-    secondaryButtonUrl: '/enquire'
-  };
-
-  let mockObserve: jest.Mock;
-  let mockDisconnect: jest.Mock;
-  let mutationCallback: MutationCallback;
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    jest.useFakeTimers();
-
-    // Mock MutationObserver
-    mockObserve = jest.fn();
-    mockDisconnect = jest.fn();
-
-    const MockMutationObserver: typeof MutationObserver = jest.fn(
-      (callback: MutationCallback) => {
-        mutationCallback = callback;
-
-        const observer: MutationObserver = {
-          observe: mockObserve,
-          disconnect: mockDisconnect,
-          takeRecords: jest.fn()
-        };
-
-        return observer;
-      }
-    );
-
-    global.MutationObserver = MockMutationObserver;
-
-    // Mock lpTag
-    (global as any).lpTag = {
-      newPage: jest.fn()
-    };
-  });
-
-  afterEach(() => {
-    jest.runOnlyPendingTimers();
-    jest.useRealTimers();
-    delete (global as any).lpTag;
-  });
-
-  it('should render with all props', () => {
-    const { container } = render(<TravelMiniCTA {...defaultProps} />);
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render the logo with "T" text', () => {
-    render(<TravelMiniCTA {...defaultProps} />);
-    expect(screen.getByText('T')).toBeInTheDocument();
-  });
-
-  it('should render the label "VISIT TIMES HOLIDAYS"', () => {
-    render(<TravelMiniCTA {...defaultProps} />);
-    const labels = screen.getAllByText('VISIT TIMES HOLIDAYS');
-    expect(labels.length).toBe(2); // Desktop and mobile labels
-  });
-
-  it('should render the description', () => {
-    render(<TravelMiniCTA {...defaultProps} />);
-    expect(screen.getByText(defaultProps.description)).toBeInTheDocument();
-  });
-
-  it('should render phone label and number', () => {
-    render(<TravelMiniCTA {...defaultProps} />);
-    expect(screen.getByText('Call us on')).toBeInTheDocument();
-    expect(screen.getByText('08083049757')).toBeInTheDocument();
-  });
-
-  it('should render phone number as a tel link', () => {
-    render(<TravelMiniCTA {...defaultProps} />);
-    const phoneLink = screen.getByText('Call us on').closest('a');
-    expect(phoneLink).toHaveAttribute('href', 'tel:08083049757');
-  });
-
-  it('should render working hours', () => {
-    render(<TravelMiniCTA {...defaultProps} />);
-    expect(screen.getByText('Mon - Fri: 9am - 6pm')).toBeInTheDocument();
-    expect(screen.getByText('Sat: 10am - 5pm')).toBeInTheDocument();
-  });
-
-  it('should render primary button with loading text initially', () => {
-    render(<TravelMiniCTA {...defaultProps} />);
-    expect(screen.getByText('Loading chat...')).toBeInTheDocument();
-  });
-
-  it('should render secondary button with correct text and URL', () => {
-    render(<TravelMiniCTA {...defaultProps} />);
-    const secondaryButton = screen.getByText('Enquire now');
-    expect(secondaryButton).toBeInTheDocument();
-  });
-
-  it('should render with minimal props', () => {
-    render(<TravelMiniCTA />);
-    expect(screen.getByTestId('travel-mini-cta')).toBeInTheDocument();
-  });
-
-  it('should render without working hours if not provided', () => {
-    const propsWithoutWorkingHours = {
-      ...defaultProps,
-      workingHours: undefined
-    };
-    render(<TravelMiniCTA {...propsWithoutWorkingHours} />);
-    expect(screen.queryByText('Mon - Fri: 9am - 6pm')).not.toBeInTheDocument();
-  });
-
-  it('should render empty working hours array', () => {
-    const propsWithEmptyWorkingHours = {
-      ...defaultProps,
-      workingHours: []
-    };
-    const { container } = render(
-      <TravelMiniCTA {...propsWithEmptyWorkingHours} />
-    );
-    expect(
-      container.querySelector('[data-testid="travel-mini-cta"]')
-    ).toBeInTheDocument();
-  });
-
-  it('should render with custom description', () => {
-    const customDescription = 'Explore the world with our expert guidance';
-    render(<TravelMiniCTA {...defaultProps} description={customDescription} />);
-    expect(screen.getByText(customDescription)).toBeInTheDocument();
-  });
-
-  it('should render with custom phone details', () => {
-    const customProps = {
-      ...defaultProps,
-      phoneLabel: 'Contact us at',
-      phoneNumber: '0123456789'
-    };
-    render(<TravelMiniCTA {...customProps} />);
-    expect(screen.getByText('Contact us at')).toBeInTheDocument();
-    expect(screen.getByText('0123456789')).toBeInTheDocument();
-  });
-
-  it('should have correct container test id', () => {
-    render(<TravelMiniCTA {...defaultProps} />);
-    expect(screen.getByTestId('travel-mini-cta')).toBeInTheDocument();
-  });
-
-  it('should render with isApp prop', () => {
-    const { container } = render(
-      <TravelMiniCTA {...defaultProps} isApp={true} />
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should pass isApp prop to styled components', () => {
-    render(<TravelMiniCTA {...defaultProps} isApp={true} />);
-    const container = screen.getByTestId('travel-mini-cta');
-    expect(container).toBeInTheDocument();
-  });
-
-  describe('LivePerson Chat Integration', () => {
-    it('should render LivePerson container div with correct ID', () => {
-      render(<TravelMiniCTA {...defaultProps} />);
-      const chatDiv = document.getElementById('LP_DIV_TRAVEL_1239001');
-      expect(chatDiv).toBeInTheDocument();
-    });
-
-    it('should show loading text initially', () => {
-      render(<TravelMiniCTA {...defaultProps} />);
-      expect(screen.getByText('Loading chat...')).toBeInTheDocument();
-    });
-
-    it('should setup MutationObserver on mount', () => {
-      render(<TravelMiniCTA {...defaultProps} />);
-      expect(global.MutationObserver).toHaveBeenCalled();
-      expect(mockObserve).toHaveBeenCalledWith(expect.any(HTMLElement), {
-        childList: true,
-        subtree: true
-      });
-    });
-
-    it('should set chat ready when LivePerson element is detected', async () => {
-      render(<TravelMiniCTA {...defaultProps} />);
-
-      // Simulate LivePerson injecting the chat element
-      const chatDiv = document.getElementById('LP_DIV_TRAVEL_1239001');
-      const lpElement = document.createElement('div');
-      lpElement.setAttribute('data-lp-event', 'click');
-      lpElement.textContent = 'Chat';
-      chatDiv && chatDiv.appendChild(lpElement);
-
-      // Trigger the mutation observer callback
-      const observer: MutationObserver = {
-        observe: mockObserve,
-        disconnect: mockDisconnect,
-        takeRecords: jest.fn()
-      };
-      act(() => {
-        mutationCallback([], observer);
-      });
-
-      await waitFor(() => {
-        expect(screen.queryByText('Loading chat...')).not.toBeInTheDocument();
-      });
-    });
-
-    it('should clear timeout when chat loads successfully', async () => {
-      const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
-      render(<TravelMiniCTA {...defaultProps} />);
-
-      const chatDiv = document.getElementById('LP_DIV_TRAVEL_1239001');
-      const lpElement = document.createElement('div');
-      lpElement.setAttribute('data-lp-event', 'click');
-      chatDiv && chatDiv.appendChild(lpElement);
-
-      const observer: MutationObserver = {
-        observe: mockObserve,
-        disconnect: mockDisconnect,
-        takeRecords: jest.fn()
-      };
-      act(() => {
-        mutationCallback([], observer);
-      });
-
-      await waitFor(() => {
-        expect(clearTimeoutSpy).toHaveBeenCalled();
-      });
-
-      // Timeout should not fire
-      act(() => {
-        jest.advanceTimersByTime(15000);
-      });
-
-      expect(screen.queryByText('Chat unavailable')).not.toBeInTheDocument();
-      clearTimeoutSpy.mockRestore();
-    });
-
-    it('should disconnect observer on unmount', () => {
-      const { unmount } = render(<TravelMiniCTA {...defaultProps} />);
-      unmount();
-      expect(mockDisconnect).toHaveBeenCalled();
-    });
-
-    it('should clear timeout on unmount', () => {
-      const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
-      const { unmount } = render(<TravelMiniCTA {...defaultProps} />);
-      unmount();
-      expect(clearTimeoutSpy).toHaveBeenCalled();
-      clearTimeoutSpy.mockRestore();
-    });
-
-    it('should trigger LivePerson element click when primary button is clicked', async () => {
-      render(<TravelMiniCTA {...defaultProps} />);
-
-      // Simulate chat loaded
-      const chatDiv = document.getElementById('LP_DIV_TRAVEL_1239001');
-      const lpElement = document.createElement('button');
-      lpElement.setAttribute('data-lp-event', 'click');
-
-      // Mock click on the LivePerson element
-      const lpClickSpy = jest.fn();
-      lpElement.onclick = lpClickSpy;
-
-      chatDiv && chatDiv.appendChild(lpElement);
-
-      const observer: MutationObserver = {
-        observe: mockObserve,
-        disconnect: mockDisconnect,
-        takeRecords: jest.fn()
-      };
-      act(() => {
-        mutationCallback([], observer);
-      });
-
-      await waitFor(() => {
-        expect(screen.queryByText('Loading chat...')).not.toBeInTheDocument();
-      });
-
-      // Get and click the primary button
-      const parentElement = chatDiv ? chatDiv.parentElement : null;
-      if (parentElement instanceof HTMLButtonElement) {
-        fireEvent.click(parentElement);
-        expect(lpClickSpy).toHaveBeenCalled();
-      }
-    });
-
-    it('should handle button click without errors when chat is ready', async () => {
-      render(<TravelMiniCTA {...defaultProps} />);
-
-      const chatDiv = document.getElementById('LP_DIV_TRAVEL_1239001');
-      const lpElement = document.createElement('button');
-      lpElement.setAttribute('data-lp-event', 'click');
-      chatDiv && chatDiv.appendChild(lpElement);
-
-      const observer: MutationObserver = {
-        observe: mockObserve,
-        disconnect: mockDisconnect,
-        takeRecords: jest.fn()
-      };
-      act(() => {
-        mutationCallback([], observer);
-      });
-
-      await waitFor(() => {
-        expect(screen.queryByText('Loading chat...')).not.toBeInTheDocument();
-      });
-
-      // Click button should not throw error
-      const parentElement = chatDiv ? chatDiv.parentElement : null;
-      if (parentElement instanceof HTMLButtonElement) {
-        expect(() => fireEvent.click(parentElement)).not.toThrow();
-      }
-    });
-  });
-});

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

@@ -1,190 +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
-}) => {
-  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>
-            {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>
-  );
-};