From d8c1e7b2bc9a2077b73cdce44dfe69d8cdc61aea Mon Sep 17 00:00:00 2001 From: Mirlan Date: Tue, 1 Dec 2020 13:55:29 +0600 Subject: [PATCH] Ott 583 inaccessable match in users country (#232) * feat(579): added message if match is not accessible in user's country * refactor(583): removed React imports * refactor(583): fix review comments --- src/config/lexics/indexLexics.tsx | 2 + src/features/MatchCard/CardFinished/index.tsx | 2 +- src/features/MatchCard/CardLive/index.tsx | 2 +- src/features/MatchCard/CardSoon/index.tsx | 22 +++++---- .../MatchCard/MatchInfoCard/index.tsx | 22 +++++---- .../MatchCard/NoAccessMessage/index.tsx | 46 +++++++++++++++++++ src/features/MatchCard/hooks.tsx | 26 +++++++---- .../Matches/helpers/prepareMatches.tsx | 4 +- src/features/MediaQuery/index.tsx | 2 +- src/requests/getMatches/types.tsx | 1 + 10 files changed, 101 insertions(+), 28 deletions(-) create mode 100644 src/features/MatchCard/NoAccessMessage/index.tsx diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index 3d8a3e49..d22be254 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -32,6 +32,8 @@ export const indexLexics = { match_status_live: 12984, match_status_soon: 12986, match_video: 13025, + no_match_access_body: 13419, + no_match_access_title: 13418, player: 630, players_video: 13032, round_highilights: 13050, diff --git a/src/features/MatchCard/CardFinished/index.tsx b/src/features/MatchCard/CardFinished/index.tsx index 30d4849f..b1dae93a 100644 --- a/src/features/MatchCard/CardFinished/index.tsx +++ b/src/features/MatchCard/CardFinished/index.tsx @@ -18,7 +18,7 @@ export const CardFinished = ({ flipCard, isOpen, onKeyPress, - } = useCard(match.hasVideo) + } = useCard(match) if (isOpen) { return ( diff --git a/src/features/MatchCard/CardLive/index.tsx b/src/features/MatchCard/CardLive/index.tsx index 64e35078..29f4449d 100644 --- a/src/features/MatchCard/CardLive/index.tsx +++ b/src/features/MatchCard/CardLive/index.tsx @@ -18,7 +18,7 @@ export const CardLive = ({ flipCard, isOpen, onKeyPress, - } = useCard(match.hasVideo) + } = useCard(match) if (isOpen) { return ( diff --git a/src/features/MatchCard/CardSoon/index.tsx b/src/features/MatchCard/CardSoon/index.tsx index 55c318b8..0bc9972b 100644 --- a/src/features/MatchCard/CardSoon/index.tsx +++ b/src/features/MatchCard/CardSoon/index.tsx @@ -6,6 +6,7 @@ import type { Match } from 'features/Matches' import { SportName } from 'features/Common' import { useName } from 'features/Name' +import { NoAccessMessage } from '../NoAccessMessage' import { MatchDate, CardWrapper as CommonCardWrapper, @@ -36,7 +37,8 @@ type CardSoonProps = { export const CardSoon = ({ match: { - availableBySubscription, + accessibleBySubscription, + accessibleInUsersCountry, date, sportType, team1, @@ -49,12 +51,6 @@ export const CardSoon = ({ const tournamentName = useName(tournament) return ( - - {date} - - - {!availableBySubscription && } + {!accessibleBySubscription && } + {(accessibleBySubscription && !accessibleInUsersCountry) + ? + : ( + + {date} + + + )} {showSportName && } diff --git a/src/features/MatchCard/MatchInfoCard/index.tsx b/src/features/MatchCard/MatchInfoCard/index.tsx index 27c17d0a..19589635 100644 --- a/src/features/MatchCard/MatchInfoCard/index.tsx +++ b/src/features/MatchCard/MatchInfoCard/index.tsx @@ -7,6 +7,7 @@ import { SportName } from 'features/Common' import { useMatchSwitchesStore } from 'features/MatchSwitches' import { useName } from 'features/Name' +import { NoAccessMessage } from '../NoAccessMessage' import { CardWrapper, Info, @@ -33,7 +34,8 @@ type Props = { export const MatchInfoCard = ({ match: { - availableBySubscription, + accessibleBySubscription, + accessibleInUsersCountry, date, hasVideo, preview, @@ -55,12 +57,6 @@ export const MatchInfoCard = ({ onClick={onClick} onKeyPress={onKeyPress} > - - {date} - - { hasVideo @@ -90,7 +86,17 @@ export const MatchInfoCard = ({ ) } - {!availableBySubscription && } + {!accessibleBySubscription && } + {(accessibleBySubscription && !accessibleInUsersCountry) + ? + : ( + + {date} + + + )} {showSportName && } diff --git a/src/features/MatchCard/NoAccessMessage/index.tsx b/src/features/MatchCard/NoAccessMessage/index.tsx new file mode 100644 index 00000000..164193f7 --- /dev/null +++ b/src/features/MatchCard/NoAccessMessage/index.tsx @@ -0,0 +1,46 @@ +import styled from 'styled-components/macro' + +import { T9n } from 'features/T9n' + +const Wrapper = styled.div` + position: absolute; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); + display: flex; + align-items: center; + justify-content: center; +` + +const Message = styled.div` + width: 240px; + padding: 12px; + color: #fff; + background-color: #EB5757; + box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25); + border-radius: 10px; +` + +const Title = styled.h3` + font-weight: bold; + font-size: 16px; + line-height: 20px; +` + +const Text = styled.p` + font-size: 13px; + line-height: 16px; +` + +export const NoAccessMessage = () => ( + + + + <T9n t='no_match_access_title' /> + + + + + + +) diff --git a/src/features/MatchCard/hooks.tsx b/src/features/MatchCard/hooks.tsx index 4a5ce790..3c0f3f40 100644 --- a/src/features/MatchCard/hooks.tsx +++ b/src/features/MatchCard/hooks.tsx @@ -3,24 +3,34 @@ import { useCallback } from 'react' import { useToggle } from 'hooks' -export const useCard = (hasVideo: boolean) => { +import type { Match } from 'features/Matches' + +export const useCard = ({ + accessibleInUsersCountry, + hasVideo, +}: Match) => { const { close, isOpen, open, } = useToggle() - const onKeyPress = useCallback((e: KeyboardEvent) => { - if (e.key === 'Enter' && hasVideo) { + const isClickable = ( + hasVideo + && accessibleInUsersCountry + ) + + const flipCard = useCallback(() => { + if (isClickable) { open() } - }, [hasVideo, open]) + }, [isClickable, open]) - const flipCard = () => { - if (hasVideo) { - open() + const onKeyPress = useCallback((e: KeyboardEvent) => { + if (e.key === 'Enter') { + flipCard() } - } + }, [flipCard]) return { close, diff --git a/src/features/Matches/helpers/prepareMatches.tsx b/src/features/Matches/helpers/prepareMatches.tsx index c802c15c..18a3fa2c 100644 --- a/src/features/Matches/helpers/prepareMatches.tsx +++ b/src/features/Matches/helpers/prepareMatches.tsx @@ -6,6 +6,7 @@ import type { Match } from 'requests' import { getSportLexic } from 'helpers' const prepareMatch = ({ + access, date, has_video, id, @@ -16,7 +17,8 @@ const prepareMatch = ({ team2, tournament, }: Match) => ({ - availableBySubscription: sub, + accessibleBySubscription: sub, + accessibleInUsersCountry: access, date: format(new Date(date), 'dd.MM.yy'), hasVideo: has_video, id, diff --git a/src/features/MediaQuery/index.tsx b/src/features/MediaQuery/index.tsx index cf438df2..19e89fc4 100644 --- a/src/features/MediaQuery/index.tsx +++ b/src/features/MediaQuery/index.tsx @@ -1,5 +1,5 @@ import type { ReactNode } from 'react' -import React, { Fragment } from 'react' +import { Fragment } from 'react' import type { Devices } from 'config' diff --git a/src/requests/getMatches/types.tsx b/src/requests/getMatches/types.tsx index 40469b89..43ae82f3 100644 --- a/src/requests/getMatches/types.tsx +++ b/src/requests/getMatches/types.tsx @@ -16,6 +16,7 @@ export type Team = { } export type Match = { + access: boolean, date: string, has_video: boolean, id: number,