feat(ott-2616): time format changed

src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx

@@ -13,6 +13,7 @@ import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'
 import { useUserFavoritesStore } from 'features/UserFavorites/store'
 
 import { NoAccessMessage } from '../../NoAccessMessage'
+import { getPrepareTimeFormat } from '../../helpers'
 import {
   CardWrapperOuter,
   CardWrapper,
@@ -39,12 +40,14 @@ import {
 import { useCardPreview } from '../hooks'
 
 type Props = {
+  isNeedFormatTimeChanged: boolean,
   match: Match,
   onClick: () => void,
   onKeyPress: (e: KeyboardEvent<HTMLLIElement>) => void,
 }
 
 export const CardFrontsideMobile = ({
+  isNeedFormatTimeChanged,
   match,
   onClick,
   onKeyPress,
@@ -78,6 +81,12 @@ export const CardFrontsideMobile = ({
     previewURL,
   })
 
+  const prepareTime = getPrepareTimeFormat({
+    date,
+    isNeedFormatTimeChanged,
+    time,
+  })
+
   return (
     <CardWrapperOuter onClick={onClick} onKeyPress={onKeyPress}>
       <CardWrapper>
@@ -135,7 +144,7 @@ export const CardFrontsideMobile = ({
             </Team>
           </Teams>
           <SecondaryInfo>
-            <Time>{time}</Time>
+            <Time>{prepareTime}</Time>
             {access === MatchAccess.CanBuyMatch && (
               <BuyMatchBadge>
                 <ScDollar refIcon='Dollar' />

src/features/MatchCard/CardFrontside/index.tsx

@@ -39,14 +39,17 @@ import {
   HoverFrame,
 } from '../styled'
 import { useCardPreview } from './hooks'
+import { getPrepareTimeFormat } from '../helpers'
 
 type Props = {
+  isNeedFormatTimeChanged: boolean,
   match: Match,
   onClick: () => void,
   onKeyPress: (e: KeyboardEvent<HTMLLIElement>) => void,
 }
 
 export const CardFrontside = ({
+  isNeedFormatTimeChanged,
   match,
   onClick,
   onKeyPress,
@@ -84,6 +87,12 @@ export const CardFrontside = ({
     previewURL,
   })
 
+  const prepareTime = getPrepareTimeFormat({
+    date,
+    isNeedFormatTimeChanged,
+    time,
+  })
+
   return (
     <CardWrapperOuter
       onClick={onClick}
@@ -122,7 +131,7 @@ export const CardFrontside = ({
           <MatchTimeInfo>
             <MatchDate isHomePage={isHomePage}>
               {isHomePage || isMatchPage ? null : formattedDate}
-              <Time>{time}</Time>
+              <Time>{prepareTime}</Time>
             </MatchDate>
             {live && (
               <LiveSign>

src/features/MatchCard/helpers/index.tsx

@@ -0,0 +1,17 @@
+import format from 'date-fns/format'
+
+type prepareTimeFormat = {
+  date: Date,
+  isNeedFormatTimeChanged: boolean,
+  time: string,
+}
+
+export const getPrepareTimeFormat = ({
+  date,
+  isNeedFormatTimeChanged,
+  time,
+}: prepareTimeFormat) => (
+  isNeedFormatTimeChanged
+    ? format(date, 'hh:mm aaa')
+    : time
+)

src/features/MatchCard/hooks.tsx

@@ -2,11 +2,14 @@ import type { KeyboardEvent } from 'react'
 import { useCallback } from 'react'
 import { useHistory } from 'react-router-dom'
 
+import includes from 'lodash/includes'
+
 import { ProfileTypes } from 'config'
 
 import type { Match } from 'features/Matches'
 import { useMatchPopupStore } from 'features/MatchPopup'
 import { useBuyMatchPopupStore } from 'features/BuyMatchPopup'
+import { useAuthStore } from 'features/AuthStore'
 import { getProfileUrl } from 'features/ProfileLink/helpers'
 import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'
 
@@ -14,6 +17,7 @@ export const useCard = (match: Match) => {
   const { openMatchPopup } = useMatchPopupStore()
   const { open: openBuyMatchPopup } = useBuyMatchPopupStore()
   const history = useHistory()
+  const { user } = useAuthStore()
   const redirectToMatchPage = useCallback(() => {
     const matchLink = getProfileUrl({
       id: match.id,
@@ -56,7 +60,10 @@ export const useCard = (match: Match) => {
     }
   }, [onMatchClick])
 
+  const isNeedFormatTimeChanged = includes(['US', 'CA'], user?.profile.country_code)
+
   return {
+    isNeedFormatTimeChanged,
     onKeyPress,
     onMatchClick,
   }

src/features/MatchCard/index.tsx

@@ -11,7 +11,11 @@ type Props = {
 }
 
 export const MatchCard = ({ match }: Props) => {
-  const { onKeyPress, onMatchClick } = useCard(match)
+  const {
+    isNeedFormatTimeChanged,
+    onKeyPress,
+    onMatchClick,
+  } = useCard(match)
 
   const CurrentComponent = isMobileDevice ? CardFrontsideMobile : CardFrontside
 
@@ -20,6 +24,7 @@ export const MatchCard = ({ match }: Props) => {
       match={match}
       onClick={onMatchClick}
       onKeyPress={onKeyPress}
+      isNeedFormatTimeChanged={isNeedFormatTimeChanged}
     />
   )
 }