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

package/src/components/opta/rugby/summary/__tests__/OptaRugbySummary.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, act, fireEvent, waitFor } from '@testing-library/react';
+import { render, act, fireEvent } from '@testing-library/react';
+
 import 'regenerator-runtime';
 import '@testing-library/jest-dom';
 
@@ -10,27 +11,22 @@ jest.mock('@times-components/image', () => ({
 const mockInitSettings = jest.fn();
 const mockInitStyleSheet = jest.fn();
 const mockInitComponent = jest.fn();
-const mockInitScript = jest.fn();
-const mockEmitEvent = jest.fn();
+const mockHasMatchEvents = jest.fn();
 
-const mockInitElement = jest.fn(() => {
+const mockInitElement = () => {
   const element = document.createElement('div');
   element.appendChild(document.createTextNode('Widget'));
   return element;
-});
+};
 
 jest.mock('../../../utils/config', () => ({
   initSettings: mockInitSettings,
   initStyleSheet: mockInitStyleSheet,
-  initScript: mockInitScript,
+  initScript: () => new Promise(resolve => resolve({})),
   initElement: mockInitElement,
   initComponent: mockInitComponent
 }));
 
-jest.mock('../../../utils/emitEvent', () => ({
-  emitEvent: mockEmitEvent
-}));
-
 import { OptaRugbySummary } from '../OptaRugbySummary';
 
 const requiredProps = {
@@ -38,30 +34,22 @@ const requiredProps = {
   competition: '209',
   match: '921100'
 };
-
 describe('OptaRugbySummary', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    mockInitScript.mockResolvedValue({});
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    document.body.innerHTML = '';
   });
 
   it('should render correctly', async () => {
-    const { asFragment, getByRole } = render(
-      <OptaRugbySummary {...requiredProps} />
-    );
+    const { asFragment } = render(<OptaRugbySummary {...requiredProps} />);
 
-    await waitFor(() => {
-      expect(mockInitSettings).toHaveBeenCalledTimes(1);
+    act(() => {
+      mockInitComponent();
+      mockHasMatchEvents();
     });
 
-    expect(mockInitStyleSheet).toHaveBeenCalledWith('rugby');
+    expect(mockInitSettings).toHaveBeenCalledTimes(1);
+    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
     expect(mockInitComponent).toHaveBeenCalledTimes(1);
-    expect(getByRole('button')).toBeInTheDocument();
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -72,112 +60,14 @@ describe('OptaRugbySummary', () => {
     expect(button).not.toBeDisabled();
   });
 
-  it('should toggle details when button is clicked', async () => {
+  it('should toggle details when button is clicked', () => {
     const { getByRole } = render(<OptaRugbySummary {...requiredProps} />);
     const button = getByRole('button');
 
     expect(button).toHaveTextContent('Show Details');
-
-    act(() => {
-      fireEvent.click(button);
-    });
-
-    await waitFor(() => {
-      expect(button).toHaveTextContent('Hide Details');
-    });
-
-    act(() => {
-      fireEvent.click(button);
-    });
-
-    await waitFor(() => {
-      expect(button).toHaveTextContent('Show Details');
-    });
-  });
-
-  describe('emitEvent', () => {
-    it('should call emitEvent with updateHeight when details are toggled', async () => {
-      const { getByRole } = render(<OptaRugbySummary {...requiredProps} />);
-      const button = getByRole('button');
-
-      // Clear initial calls
-      jest.clearAllMocks();
-
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledWith(
-          'updateHeight',
-          expect.any(Number)
-        );
-      });
-    });
-
-    it('should emit updateHeight event on each toggle', async () => {
-      const { getByRole } = render(<OptaRugbySummary {...requiredProps} />);
-      const button = getByRole('button');
-
-      // Clear initial calls
-      jest.clearAllMocks();
-
-      // First toggle
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledTimes(1);
-      });
-
-      // Second toggle
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledTimes(2);
-      });
-
-      // Third toggle
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledTimes(3);
-      });
-    });
-
-    it('should emit updateHeight with container offsetHeight', async () => {
-      const { getByRole, container } = render(
-        <OptaRugbySummary {...requiredProps} />
-      );
-      const button = getByRole('button');
-
-      // Clear initial calls
-      jest.clearAllMocks();
-
-      // Mock offsetHeight
-      const containerElement = container.querySelector('[class*="Container"]');
-      if (containerElement) {
-        Object.defineProperty(containerElement, 'offsetHeight', {
-          value: 250,
-          configurable: true
-        });
-      }
-
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledWith(
-          'updateHeight',
-          expect.any(Number)
-        );
-      });
-    });
+    fireEvent.click(button);
+    expect(button).toHaveTextContent('Hide Details');
+    fireEvent.click(button);
+    expect(button).toHaveTextContent('Show Details');
   });
 });

package/src/components/opta/rugby/summary/__tests__/__snapshots__/OptaRugbySummary.test.tsx.snap

@@ -7,16 +7,17 @@ exports[`OptaRugbySummary should render correctly 1`] = `
   >
     <div
       class="sc-htpNat sc-bxivhb hNtyxM"
-    >
-      <div>
-        Widget
-      </div>
-    </div>
+    />
     <button
       class="sc-ifAKCX fvBTJK"
     >
       Show Details
     </button>
+    <div
+      class="sc-bwzfXH eSqyJ"
+    >
+      Placeholder
+    </div>
   </div>
 </DocumentFragment>
 `;

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
+    )};
+`;