From 66a53765dc16e58907e86b6c6ebf86228ae7c910 Mon Sep 17 00:00:00 2001
From: Margarita <margarita.polyakova@instatsport.com>
Date: Thu, 1 Jun 2023 13:53:18 +0400
Subject: [PATCH 1/2] feat(in-652): penalty score

---
 .../CardFrontside/MatchCardMobile/index.tsx   | 24 +++++++++++++++--
 .../CardFrontside/MatchCardMobile/styled.tsx  | 14 +++++++---
 .../MatchCard/CardFrontside/index.tsx         | 24 +++++++++++++++--
 src/features/MatchCard/styled.tsx             | 11 ++++++++
 .../components/MatchDescription/index.tsx     | 26 ++++++++++++++++---
 .../components/MatchDescription/styled.tsx    |  5 ++++
 src/requests/getLiveScores.tsx                |  1 +
 src/requests/getMatchInfo.tsx                 |  1 +
 src/requests/getMatches/types.tsx             |  1 +
 9 files changed, 97 insertions(+), 10 deletions(-)

diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx
index 45e27e4e..d8c2754b 100644
--- a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx
+++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx
@@ -48,6 +48,8 @@ import {
   NameSignWrapper,
   HoverFrame,
   MobTime,
+  ScoreWrapper,
+  PenaltyScore,
 } from './styled'
 import { useCardPreview } from '../hooks'
 
@@ -159,14 +161,32 @@ export const CardFrontsideMobile = ({
                 <TeamName nameObj={team1} />
                 {team1InFavorites && <FavoriteSign />}
               </NameSignWrapper>
-              {showScore && <Score>{score?.team1.score ?? team1.score}</Score>}
+              {showScore && (
+                <ScoreWrapper>
+                  <Score>
+                    {score?.team1.score ?? team1.score}
+                  </Score>
+                  <PenaltyScore>
+                    {score?.team1.penalty_score ?? team1.penalty_score}
+                  </PenaltyScore>
+                </ScoreWrapper>
+              )}
             </Team>
             <Team>
               <NameSignWrapper>
                 <TeamName nameObj={team2} />
                 {team2InFavorites && <FavoriteSign />}
               </NameSignWrapper>
-              {showScore && <Score>{score?.team2.score ?? team2.score}</Score>}
+              {showScore && (
+                <ScoreWrapper>
+                  <Score>
+                    {score?.team2.score ?? team2.score}
+                  </Score>
+                  <PenaltyScore>
+                    {score?.team2.penalty_score ?? team2.penalty_score}
+                  </PenaltyScore>
+                </ScoreWrapper>
+              )}
             </Team>
           </Teams>
           <SecondaryInfo>
diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx
index 7c5f3237..02ca7909 100644
--- a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx
+++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx
@@ -199,7 +199,7 @@ export const Info = styled.div`
         left: 45%; */
         width: 60%;
         height: 100%;
-        padding: 9px  9px 9px 19px;
+        padding: 9px 11px 9px 19px;
       `
     : ''};
 `
@@ -310,10 +310,18 @@ ${isMobileDevice
     ? css`
         display: flex;
         justify-content: center;
-        width: 15px;
       `
     : ''};
-  
+`
+
+export const ScoreWrapper = styled.div`
+  display: flex;
+  line-height: 1;
+`
+
+export const PenaltyScore = styled.div`
+  font-weight: 400;
+  font-size: 10px;
 `
 
 export const TeamLogos = styled.div`
diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx
index 6eef3cdf..863ab33b 100644
--- a/src/features/MatchCard/CardFrontside/index.tsx
+++ b/src/features/MatchCard/CardFrontside/index.tsx
@@ -40,6 +40,8 @@ import {
   FavoriteSign,
   NameSignWrapper,
   HoverFrame,
+  PenaltyScore,
+  ScoreWrapper,
 } from '../styled'
 import { useCardPreview } from './hooks'
 import { getPrepareTimeFormat } from '../helpers'
@@ -206,7 +208,16 @@ export const CardFrontside = ({
                 <TeamName nameObj={team1} />
                 {team1InFavorites && <FavoriteSign />}
               </NameSignWrapper>
-              {showScore && <Score>{score?.team1.score ?? team1.score}</Score>}
+              {showScore && (
+                <ScoreWrapper>
+                  <Score>
+                    {score?.team1.score ?? team1.score}
+                  </Score>
+                  <PenaltyScore>
+                    {score?.team1.penalty_score ?? team1.penalty_score}
+                  </PenaltyScore>
+                </ScoreWrapper>
+              )}
             </Team>
             <Team isMatchPage={isMatchPage}>
               <NameSignWrapper>
@@ -224,7 +235,16 @@ export const CardFrontside = ({
                 <TeamName nameObj={team2} />
                 {team2InFavorites && <FavoriteSign />}
               </NameSignWrapper>
-              {showScore && <Score>{score?.team2.score ?? team2.score}</Score>}
+              {showScore && (
+                <ScoreWrapper>
+                  <Score>
+                    {score?.team2.score ?? team2.score}
+                  </Score>
+                  <PenaltyScore>
+                    {score?.team2.penalty_score ?? team2.penalty_score}
+                  </PenaltyScore>
+                </ScoreWrapper>
+              )}
             </Team>
           </Teams>
           {!isMatchPage && (
diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx
index bf8e50b6..89a5f40c 100644
--- a/src/features/MatchCard/styled.tsx
+++ b/src/features/MatchCard/styled.tsx
@@ -274,8 +274,19 @@ export const TeamName = styled(Name)`
   ${nameStyles}
 `
 
+export const ScoreWrapper = styled.div`
+  display: flex;
+  line-height: 1;
+`
+
 export const Score = styled.div``
 
+export const PenaltyScore = styled.div`
+  font-weight: 400;
+  font-size: .55rem;
+  margin-left: 1px;
+`
+
 export const TeamLogos = styled.div<CardProps>`
   display: ${({ isMatchPage }) => (isMatchPage ? 'none' : 'flex')};
   align-items: center;
diff --git a/src/features/MatchPage/components/MatchDescription/index.tsx b/src/features/MatchPage/components/MatchDescription/index.tsx
index b55dcb74..49b171d3 100644
--- a/src/features/MatchPage/components/MatchDescription/index.tsx
+++ b/src/features/MatchPage/components/MatchDescription/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { Fragment, useCallback } from 'react'
 
 import { useQuery } from 'react-query'
 
@@ -41,6 +41,7 @@ import {
   Time,
   Title,
   Views,
+  PenaltyScore,
 } from './styled'
 
 export const MatchDescription = () => {
@@ -93,6 +94,7 @@ export const MatchDescription = () => {
     parseDate(date),
     isChangedTimeFormat ? 'h:mm a' : 'HH:mm',
   )
+  const isPenaltyScoreShow = queryScore?.team1.penalty_score || team1.penalty_score
 
   return (
     <Description isHidden={!profileCardShown}>
@@ -111,8 +113,26 @@ export const MatchDescription = () => {
             {
               isScoreHidden || isNil(team1.score) || isNil(team2.score)
                 ? '-'
-                : `${queryScore?.team1.score ?? team1.score} - ${queryScore?.team2.score ?? team2.score}`
-
+                : (
+                  <Fragment>
+                    {queryScore?.team1.score ?? team1.score}
+
+                    {isPenaltyScoreShow && (
+                      <PenaltyScore>
+                        ({queryScore?.team1.penalty_score ?? team1.penalty_score})
+                      </PenaltyScore>
+                    )}
+
+                    {` - ${queryScore?.team2.score ?? team2.score}`}
+
+                    {isPenaltyScoreShow && (
+                      <PenaltyScore>
+                        ({queryScore?.team2.penalty_score ?? team2.penalty_score})
+                      </PenaltyScore>
+                    )}
+
+                  </Fragment>
+                )
             }
           </Score>
           <StyledLink
diff --git a/src/features/MatchPage/components/MatchDescription/styled.tsx b/src/features/MatchPage/components/MatchDescription/styled.tsx
index 3a98c269..8adba722 100644
--- a/src/features/MatchPage/components/MatchDescription/styled.tsx
+++ b/src/features/MatchPage/components/MatchDescription/styled.tsx
@@ -40,6 +40,11 @@ export const Score = styled.span`
     : ''};
 `
 
+export const PenaltyScore = styled.span`
+  font-weight: 400;
+  opacity: .8;
+`
+
 export const StyledLink = styled(ProfileLink)`
   display: flex;
   align-items: center;
diff --git a/src/requests/getLiveScores.tsx b/src/requests/getLiveScores.tsx
index e7e72e23..f2d1e9d7 100644
--- a/src/requests/getLiveScores.tsx
+++ b/src/requests/getLiveScores.tsx
@@ -4,6 +4,7 @@ import { API_ROOT } from 'config'
 
 type ScoreTeam = {
   id: number,
+  penalty_score: number | null,
   score: number | null,
 }
 
diff --git a/src/requests/getMatchInfo.tsx b/src/requests/getMatchInfo.tsx
index 230b3f2d..fc0da889 100644
--- a/src/requests/getMatchInfo.tsx
+++ b/src/requests/getMatchInfo.tsx
@@ -16,6 +16,7 @@ export type Team = {
   id: number,
   name_eng: string,
   name_rus: string,
+  penalty_score: number | null,
   score: number,
   shirt_color: string | null,
 }
diff --git a/src/requests/getMatches/types.tsx b/src/requests/getMatches/types.tsx
index e6afa9f6..cbf15a0c 100644
--- a/src/requests/getMatches/types.tsx
+++ b/src/requests/getMatches/types.tsx
@@ -22,6 +22,7 @@ type Team = {
   media?: AwsTeamMedia,
   name_eng: string,
   name_rus: string,
+  penalty_score?: number | null,
   score?: number | null,
 }
 
-- 
2.30.2


From 46b80b8e6c3092f9466e9e542a50facdf90bc76a Mon Sep 17 00:00:00 2001
From: Margarita <margarita.polyakova@instatsport.com>
Date: Mon, 5 Jun 2023 16:07:12 +0400
Subject: [PATCH 2/2] feat(in-652): pr fixes

---
 .../CardFrontside/MatchCardMobile/index.tsx   | 34 ++++++-------------
 .../CardFrontside/MatchCardMobile/styled.tsx  | 20 -----------
 .../MatchCard/CardFrontside/index.tsx         | 34 ++++++-------------
 src/features/MatchCard/Score/index.tsx        | 30 ++++++++++++++++
 src/features/MatchCard/Score/styled.tsx       | 31 +++++++++++++++++
 src/features/MatchCard/styled.tsx             | 13 -------
 6 files changed, 83 insertions(+), 79 deletions(-)
 create mode 100644 src/features/MatchCard/Score/index.tsx
 create mode 100644 src/features/MatchCard/Score/styled.tsx

diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx
index d8c2754b..d8984d52 100644
--- a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx
+++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx
@@ -35,7 +35,6 @@ import {
   MatchTimeInfo,
   Preview,
   PreviewWrapper,
-  Score,
   Team,
   TeamName,
   Teams,
@@ -48,10 +47,9 @@ import {
   NameSignWrapper,
   HoverFrame,
   MobTime,
-  ScoreWrapper,
-  PenaltyScore,
 } from './styled'
 import { useCardPreview } from '../hooks'
+import { Score } from '../../Score'
 
 type Props = {
   isNeedFormatTimeChanged: boolean,
@@ -161,32 +159,22 @@ export const CardFrontsideMobile = ({
                 <TeamName nameObj={team1} />
                 {team1InFavorites && <FavoriteSign />}
               </NameSignWrapper>
-              {showScore && (
-                <ScoreWrapper>
-                  <Score>
-                    {score?.team1.score ?? team1.score}
-                  </Score>
-                  <PenaltyScore>
-                    {score?.team1.penalty_score ?? team1.penalty_score}
-                  </PenaltyScore>
-                </ScoreWrapper>
-              )}
+              <Score
+                showScore={showScore}
+                score={score?.team1.score ?? team1.score}
+                penaltyScore={score?.team1.penalty_score ?? team1.penalty_score}
+              />
             </Team>
             <Team>
               <NameSignWrapper>
                 <TeamName nameObj={team2} />
                 {team2InFavorites && <FavoriteSign />}
               </NameSignWrapper>
-              {showScore && (
-                <ScoreWrapper>
-                  <Score>
-                    {score?.team2.score ?? team2.score}
-                  </Score>
-                  <PenaltyScore>
-                    {score?.team2.penalty_score ?? team2.penalty_score}
-                  </PenaltyScore>
-                </ScoreWrapper>
-              )}
+              <Score
+                showScore={showScore}
+                score={score?.team2.score ?? team2.score}
+                penaltyScore={score?.team2.penalty_score ?? team2.penalty_score}
+              />
             </Team>
           </Teams>
           <SecondaryInfo>
diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx
index 02ca7909..99c5527b 100644
--- a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx
+++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx
@@ -304,26 +304,6 @@ export const TeamName = styled(Name)`
   ${nameStyles}
 `
 
-export const Score = styled.div`
-
-${isMobileDevice
-    ? css`
-        display: flex;
-        justify-content: center;
-      `
-    : ''};
-`
-
-export const ScoreWrapper = styled.div`
-  display: flex;
-  line-height: 1;
-`
-
-export const PenaltyScore = styled.div`
-  font-weight: 400;
-  font-size: 10px;
-`
-
 export const TeamLogos = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx
index 863ab33b..e5af3755 100644
--- a/src/features/MatchCard/CardFrontside/index.tsx
+++ b/src/features/MatchCard/CardFrontside/index.tsx
@@ -19,6 +19,7 @@ import { useUserFavoritesStore } from 'features/UserFavorites/store'
 import { TournamentSubtitle } from 'features/TournamentSubtitle'
 
 import { NoAccessMessage } from '../NoAccessMessage'
+import { Score } from '../Score'
 import {
   CardWrapperOuter,
   CardWrapper,
@@ -28,7 +29,6 @@ import {
   MatchTimeInfo,
   Preview,
   PreviewWrapper,
-  Score,
   Team,
   TeamName,
   Teams,
@@ -40,8 +40,6 @@ import {
   FavoriteSign,
   NameSignWrapper,
   HoverFrame,
-  PenaltyScore,
-  ScoreWrapper,
 } from '../styled'
 import { useCardPreview } from './hooks'
 import { getPrepareTimeFormat } from '../helpers'
@@ -208,16 +206,11 @@ export const CardFrontside = ({
                 <TeamName nameObj={team1} />
                 {team1InFavorites && <FavoriteSign />}
               </NameSignWrapper>
-              {showScore && (
-                <ScoreWrapper>
-                  <Score>
-                    {score?.team1.score ?? team1.score}
-                  </Score>
-                  <PenaltyScore>
-                    {score?.team1.penalty_score ?? team1.penalty_score}
-                  </PenaltyScore>
-                </ScoreWrapper>
-              )}
+              <Score
+                showScore={showScore}
+                score={score?.team1.score ?? team1.score}
+                penaltyScore={score?.team1.penalty_score ?? team1.penalty_score}
+              />
             </Team>
             <Team isMatchPage={isMatchPage}>
               <NameSignWrapper>
@@ -235,16 +228,11 @@ export const CardFrontside = ({
                 <TeamName nameObj={team2} />
                 {team2InFavorites && <FavoriteSign />}
               </NameSignWrapper>
-              {showScore && (
-                <ScoreWrapper>
-                  <Score>
-                    {score?.team2.score ?? team2.score}
-                  </Score>
-                  <PenaltyScore>
-                    {score?.team2.penalty_score ?? team2.penalty_score}
-                  </PenaltyScore>
-                </ScoreWrapper>
-              )}
+              <Score
+                showScore={showScore}
+                score={score?.team2.score ?? team2.score}
+                penaltyScore={score?.team2.penalty_score ?? team2.penalty_score}
+              />
             </Team>
           </Teams>
           {!isMatchPage && (
diff --git a/src/features/MatchCard/Score/index.tsx b/src/features/MatchCard/Score/index.tsx
new file mode 100644
index 00000000..75ddc818
--- /dev/null
+++ b/src/features/MatchCard/Score/index.tsx
@@ -0,0 +1,30 @@
+import {
+  MainScore,
+  ScoreWrapper,
+  PenaltyScore,
+} from './styled'
+
+type Props = {
+  penaltyScore?: number | null,
+  score?: number | null,
+  showScore: boolean,
+}
+
+export const Score = ({
+  penaltyScore,
+  score,
+  showScore,
+}: Props) => {
+  if (!showScore) return null
+
+  return (
+    <ScoreWrapper>
+      <MainScore>
+        {score}
+      </MainScore>
+      <PenaltyScore>
+        {penaltyScore}
+      </PenaltyScore>
+    </ScoreWrapper>
+  )
+}
diff --git a/src/features/MatchCard/Score/styled.tsx b/src/features/MatchCard/Score/styled.tsx
new file mode 100644
index 00000000..f745e040
--- /dev/null
+++ b/src/features/MatchCard/Score/styled.tsx
@@ -0,0 +1,31 @@
+import styled, { css } from 'styled-components/macro'
+
+import { isMobileDevice } from 'config/userAgent'
+
+export const MainScore = styled.div`
+
+${isMobileDevice
+    ? css`
+        display: flex;
+        justify-content: center;
+      `
+    : ''};
+`
+
+export const ScoreWrapper = styled.div`
+  display: flex;
+  line-height: 1;
+`
+
+export const PenaltyScore = styled.div`
+  font-weight: 400;
+  font-size: .55rem;
+  margin-left: 1px;
+  
+  ${isMobileDevice
+    ? css`
+      font-size: 10px;
+    `
+    : ''};
+`
+
diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx
index 89a5f40c..a862e5e2 100644
--- a/src/features/MatchCard/styled.tsx
+++ b/src/features/MatchCard/styled.tsx
@@ -274,19 +274,6 @@ export const TeamName = styled(Name)`
   ${nameStyles}
 `
 
-export const ScoreWrapper = styled.div`
-  display: flex;
-  line-height: 1;
-`
-
-export const Score = styled.div``
-
-export const PenaltyScore = styled.div`
-  font-weight: 400;
-  font-size: .55rem;
-  margin-left: 1px;
-`
-
 export const TeamLogos = styled.div<CardProps>`
   display: ${({ isMatchPage }) => (isMatchPage ? 'none' : 'flex')};
   align-items: center;
-- 
2.30.2