feat(579): added buy match button to match cards (#230)

public/images/dollar-sign.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="23" viewBox="0 0 12 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.81201 15.5813C8.81201 14.9172 8.60107 14.3704 8.1792 13.9407C7.75732 13.5032 7.0542 13.1125 6.06982 12.7688C5.08545 12.4172 4.31982 12.093 3.77295 11.7961C1.95264 10.8196 1.04248 9.37427 1.04248 7.46021C1.04248 6.16333 1.43701 5.09692 2.22607 4.26099C3.01514 3.42505 4.08545 2.92896 5.43701 2.77271V0.218018H7.31201V2.79614C8.67139 2.99146 9.72217 3.56958 10.4644 4.53052C11.2065 5.48364 11.5776 6.72583 11.5776 8.25708H8.7417C8.7417 7.27271 8.51904 6.49927 8.07373 5.93677C7.63623 5.36646 7.03857 5.0813 6.28076 5.0813C5.53076 5.0813 4.94482 5.28442 4.52295 5.69067C4.10107 6.09692 3.89014 6.67896 3.89014 7.43677C3.89014 8.11646 4.09717 8.66333 4.51123 9.07739C4.93311 9.48364 5.64404 9.87036 6.64404 10.2375C7.64404 10.6047 8.4292 10.9446 8.99951 11.2571C9.56982 11.5696 10.0503 11.929 10.4409 12.3352C10.8315 12.7336 11.1323 13.1946 11.3433 13.718C11.5542 14.2415 11.6597 14.8547 11.6597 15.5579C11.6597 16.8782 11.2534 17.9485 10.4409 18.7688C9.63623 19.5891 8.51123 20.0735 7.06592 20.2219V22.5071H5.20264V20.2336C3.65576 20.0618 2.46436 19.5071 1.62842 18.5696C0.800293 17.6321 0.38623 16.3899 0.38623 14.843H3.23389C3.23389 15.8274 3.47998 16.5891 3.97217 17.1282C4.47217 17.6672 5.17529 17.9368 6.08154 17.9368C6.97217 17.9368 7.64795 17.7219 8.10889 17.2922C8.57764 16.8625 8.81201 16.2922 8.81201 15.5813Z" fill="#333333"/>
+</svg>

src/features/MatchCard/CardSoon/index.tsx

@@ -20,6 +20,7 @@ import {
   TournamentName,
   TeamLogos,
   TeamLogo,
+  BuyMatchButton,
 } from '../styled'
 
 const CardWrapper = styled(CommonCardWrapper)`
@@ -37,6 +38,7 @@ type CardSoonProps = {
 
 export const CardSoon = ({
   match: {
+    availableBySubscription,
     date,
     sportType,
     team1,
@@ -72,6 +74,7 @@ export const CardSoon = ({
             profileType={ProfileTypes.TEAMS}
           />
         </TeamLogos>
+        {!availableBySubscription && <BuyMatchButton />}
       </PreviewWrapper>
       <Info>
         {showSportName && <SportName sport={sportType} />}

src/features/MatchCard/MatchInfoCard/index.tsx

@@ -22,6 +22,7 @@ import {
   TournamentName,
   TeamLogos,
   TeamLogo,
+  BuyMatchButton,
 } from '../styled'
 
 type Props = {
@@ -33,6 +34,7 @@ type Props = {
 
 export const MatchInfoCard = ({
   match: {
+    availableBySubscription,
     date,
     hasVideo,
     preview,
@@ -89,6 +91,7 @@ export const MatchInfoCard = ({
               </TeamLogos>
             )
         }
+        {!availableBySubscription && <BuyMatchButton />}
       </PreviewWrapper>
       <Info>
         {showSportName && <SportName sport={sportType} />}

src/features/MatchCard/styled.tsx

@@ -43,6 +43,7 @@ export const CardWrapper = styled.li.attrs({
 `
 
 export const PreviewWrapper = styled.div`
+  position: relative;
   display: flex;
   flex-direction: column-reverse;
   height: 147px;
@@ -70,10 +71,13 @@ export const MatchDate = styled.div`
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   white-space: nowrap;
   color: white;
-  background: #6D6D6D;
+  background-color: #6D6D6D;
+  z-index: 1;
 
   @media ${devices.tablet} {
     top: 10px;
@@ -82,6 +86,7 @@ export const MatchDate = styled.div`
     padding: 6px 8px;
   }
 `
+
 export const Time = styled.span`
   margin-left: 10px;
 `
@@ -205,6 +210,7 @@ export const TeamLogos = styled.div`
     padding-right: 20px;
   }
 `
+
 export const TeamLogo = styled(ProfileLogo)`
   width: 60px;
 
@@ -216,3 +222,25 @@ export const TeamLogo = styled(ProfileLogo)`
     width: 134px;
   }
 `
+
+export const BuyMatchButton = styled.button`
+  border: none;
+  background: none;
+  padding: 0;
+
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  z-index: 1;
+
+  background-image: url(/images/dollar-sign.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: #fff;
+  border-radius: 50%;
+  border: 0.5px solid rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
+`

src/features/Matches/helpers/prepareMatches.tsx

@@ -11,10 +11,12 @@ const prepareMatch = ({
   id,
   sport,
   stream_status,
+  sub,
   team1,
   team2,
   tournament,
 }: Match) => ({
+  availableBySubscription: sub,
   date: format(new Date(date), 'dd.MM.yy'),
   hasVideo: has_video,
   id,

src/requests/getMatches/types.tsx

@@ -22,6 +22,7 @@ export type Match = {
   round_id: number | null,
   sport: SportTypes,
   stream_status: MatchStatuses,
+  sub: boolean,
   team1: Team,
   team2: Team,
   tournament: Tournament,