@times-components/ts-components 1.145.1-82bc6796129e892c1eb22c6257c5e3809c159767.3 → 1.145.1-840c3cbc6021aef0e28e52412d33f016c55bc0b4.1

package/src/components/opta/football/opta-match-stats/commentary/__tests__/__snapshots__/OptaMatchStatsCommentary.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OptaMatchStatsCommentary renders and initialises widget 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bxivhb eKHCQT"
+    class="sc-bxivhb hlADP"
   >
     <h3>
       Commentary

package/src/components/opta/football/opta-match-stats/shared/styles.ts

@@ -54,13 +54,5 @@ export const WidgetWrapper = styled.div<{
         @media (max-width: ${maxMDBreakpoint}px) {
           display: none;
         }
-
-        ${props =>
-          props.isApp &&
-          `
-          @media(prefers-color-scheme: dark) {
-            color: ${darkTextColor} !important;
-          }
-        `}
       }
     `;

package/src/components/opta/football/opta-match-stats/stats-graphs/__tests__/__snapshots__/OptaMatchStatsGraphs.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OptaMatchStatsSummary should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bxivhb dwwqvg"
+    class="sc-bxivhb JyPwY"
   >
     <h3>
       Match Stats

package/src/components/opta/football/opta-match-stats/summary/OptaMatchStatsSummary.stories.tsx

@@ -26,7 +26,7 @@ const showcase = {
           <OptaMatchStatsSummary
             season="2025"
             competition="8"
-            match="2562044"
+            match="2561901"
             isApp
           />
         </>

package/src/components/opta/football/opta-match-stats/summary/OptaMatchStatsSummary.tsx

@@ -72,7 +72,7 @@ export const OptaMatchStatsSummary: React.FC<{
               show_competition_name: true,
               competition_naming: 'full',
               team_naming: 'full',
-              player_naming: 'last_name',
+              player_naming: 'initial',
               show_live: false,
               show_logo: false,
               show_title: false

package/src/components/opta/football/opta-match-stats/summary/WidgetContainer.tsx

@@ -316,23 +316,14 @@ export const WidgetContainer = styled.div<{
           display: flex;
           text-align: right;
         }
-
-        &.Opta-Home {
-          .Opta-Event-Player {
-            text-align: left;
-          }
-        }
-
-        &.Opta-Away {
-          .Opta-Event-Player {
-            text-align: right;
-          }
-        }
       }
 
       .Opta-Event-Text {
         display: flex;
         align-items: center;
+        .Opta-Event-Player {
+          text-align: left;
+        }
 
         &.Opta-Home {
           li {

package/src/components/opta/football/opta-match-stats/summary/__tests__/__snapshots__/OptaMatchStatsSummary.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OptaMatchStatsSummary should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-ifAKCX hkuAFt"
+    class="sc-ifAKCX eIVfcL"
   />
   <div
     class="sc-bwzfXH eSqyJ"

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

@@ -0,0 +1,161 @@
+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 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>
+              {workingHours &&
+                workingHours.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
+    )};
+`;