diff --git a/.drone.yml b/.drone.yml index 26b31dc5..5d11346e 100644 --- a/.drone.yml +++ b/.drone.yml @@ -203,6 +203,35 @@ steps: depends_on: - make-diwansport + - name: make-fqtv + image: node:16-alpine + environment: + REACT_APP_STRIPE_PK: + from_secret: REACT_APP_STRIPE_PK + commands: + - apk add --no-cache make + - make fqtv-prod + depends_on: + - npm-install + + - name: deploy-fqtv + image: amazon/aws-cli:latest + environment: + AWS_ACCESS_KEY_ID: + from_secret: AWS_ACCESS_KEY_ID + AWS_SECRET_ACCESS_KEY: + from_secret: AWS_SECRET_ACCESS_KEY + AWS_DEFAULT_REGION: + from_secret: AWS_DEFAULT_REGION + AWS_MAX_ATTEMPTS: 10 + commands: + - aws s3 sync build_fqtv s3://insports-fqtv-com-au --delete + - aws cloudfront create-invalidation --distribution-id E2MFJBSBIUQSDH --paths "/*" # # fqtv.insports.tv + - aws cloudfront create-invalidation --distribution-id E22TED4Z46Q01V --paths "/*" # fqtv.com.au + + depends_on: + - make-fqtv + --- kind: pipeline type: docker @@ -816,4 +845,58 @@ steps: - aws cloudfront create-invalidation --distribution-id E3NJ2G0QSB6MVI --paths "/*" # tunisia.insports.tv depends_on: - - make-diwansport \ No newline at end of file + - make-diwansport +--- +kind: pipeline +type: docker +name: deploy fqtv.insports.tv + +concurrency: + limit: 1 + +platform: + os: linux + arch: amd64 + +trigger: + ref: + - refs/heads/fqtv.insports.tv + +steps: + - name: npm-install + image: node:16-alpine + environment: + REACT_APP_STRIPE_PK: + from_secret: REACT_APP_STRIPE_PK + commands: + - apk add --no-cache make + - npm install --legacy-peer-deps + + - name: make-fqtv + image: node:16-alpine + environment: + REACT_APP_STRIPE_PK: + from_secret: REACT_APP_STRIPE_PK + commands: + - apk add --no-cache make + - make fqtv-prod + depends_on: + - npm-install + + - name: deploy-fqtv + image: amazon/aws-cli:latest + environment: + AWS_ACCESS_KEY_ID: + from_secret: AWS_ACCESS_KEY_ID + AWS_SECRET_ACCESS_KEY: + from_secret: AWS_SECRET_ACCESS_KEY + AWS_DEFAULT_REGION: + from_secret: AWS_DEFAULT_REGION + AWS_MAX_ATTEMPTS: 10 + commands: + - aws s3 sync build_fqtv s3://insports-fqtv-com-au --delete + - aws cloudfront create-invalidation --distribution-id E2MFJBSBIUQSDH --paths "/*" # # fqtv.insports.tv + - aws cloudfront create-invalidation --distribution-id E22TED4Z46Q01V --paths "/*" # fqtv.com.au + + depends_on: + - make-fqtv diff --git a/.gitignore b/.gitignore index a511bb85..fd907523 100644 --- a/.gitignore +++ b/.gitignore @@ -11,11 +11,7 @@ /cypress/screenshots # production -/build -/build_auth -/build_india -/build_facr -/build_lff +/build* # misc .DS_Store diff --git a/Makefile b/Makefile index 15d8ae0f..22c0ada7 100644 --- a/Makefile +++ b/Makefile @@ -46,7 +46,7 @@ build-c: clean build-d: clean REACT_APP_TYPE=ott \ REACT_APP_ENV=staging \ - REACT_APP_CLIENT=insports \ + REACT_APP_CLIENT=facr \ REACT_APP_STAGE=test-d \ npm run build @@ -135,6 +135,12 @@ tunisia-build: clean REACT_APP_ENV=staging \ REACT_APP_CLIENT=tunisia \ npm run build + +fqtv-build: clean + REACT_APP_TYPE=ott \ + REACT_APP_ENV=staging \ + REACT_APP_CLIENT=fqtv \ + npm run build lff-build: clean REACT_APP_TYPE=ott \ @@ -195,7 +201,16 @@ diwansport-prod: BUILD_PATH=build_tunisia \ npm run build && cp -r .well-known build_tunisia -deploy-all: prod preprod facr-prod lff-prod diwansport-prod india-prod +fqtv-prod: + rm -rf build_fqtv && \ + REACT_APP_TYPE=ott \ + REACT_APP_ENV=production \ + REACT_APP_STRIPE_PK=pk_live_51J5TEYEDSxVnTgDW5XxhC6ntKZKddXgKHq5HOCDmJTdfSKluMYCdLHOcUA3Miuy8HesxG1eS4c0dQRQpMsEHRrQL00USpu5xIq \ + REACT_APP_CLIENT=fqtv \ + BUILD_PATH=build_fqtv \ + npm run build && cp -r .well-known build_fqtv + +deploy-all: prod preprod facr-prod lff-prod diwansport-prod india-prod fqtv-prod test: npm test diff --git a/package.json b/package.json index c023ddac..6a0a67bf 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "lff": "REACT_APP_CLIENT=lff react-scripts start", "india": "REACT_APP_CLIENT=india react-scripts start", "tunisia": "REACT_APP_CLIENT=tunisia react-scripts start", + "fqtv": "REACT_APP_CLIENT=fqtv react-scripts start", "insports": "REACT_APP_CLIENT=insports react-scripts start" }, "dependencies": { diff --git a/public/images/fqtv-auth-logo.svg b/public/images/fqtv-auth-logo.svg new file mode 100644 index 00000000..6b85dc2b --- /dev/null +++ b/public/images/fqtv-auth-logo.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/fqtv-background.png b/public/images/fqtv-background.png new file mode 100644 index 00000000..fcd36444 Binary files /dev/null and b/public/images/fqtv-background.png differ diff --git a/public/images/fqtv-logo.svg b/public/images/fqtv-logo.svg new file mode 100644 index 00000000..b636a2e7 --- /dev/null +++ b/public/images/fqtv-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/config/clients/facr.tsx b/src/config/clients/facr.tsx index 6b4f0ed9..a05987e8 100644 --- a/src/config/clients/facr.tsx +++ b/src/config/clients/facr.tsx @@ -1,5 +1,7 @@ import { css } from 'styled-components/macro' +import { isMobileDevice } from 'config/userAgent' + import { PROCEDURES } from '../procedures' import { @@ -41,8 +43,10 @@ export const facr: ClientConfig = { styles: { background: '', homePageHeader: css` - background: linear-gradient(83.42deg, #00257A 53.04%, rgba(0, 0, 0, 0) 94.83%), #000000; - `, + background: ${(isMobileDevice + ? 'linear-gradient(180deg, #00257A 0%, rgba(0, 37, 122, 0) 100%), #000000' + : 'linear-gradient(83.42deg, #00257A 53.04%, rgba(0, 0, 0, 0) 94.83%), #000000' + )};`, logo: 'facr-logo.svg', logoHeight: 6.3, logoLeft: 1.1, diff --git a/src/config/clients/fqtv.tsx b/src/config/clients/fqtv.tsx new file mode 100644 index 00000000..538e559e --- /dev/null +++ b/src/config/clients/fqtv.tsx @@ -0,0 +1,56 @@ +import { css } from 'styled-components/macro' +import { + ClientConfig, + ClientIds, + ClientNames, +} from './types' + +export const fqtv: ClientConfig = { + auth: { + clientId: ClientIds.Fqtv, + }, + currencyBadge: { + color: '#333333', + secondColor: 'rgba(255, 255, 255, 0.7)', + sign: 'Dollar', + }, + defaultLanguage: 'en', + description: 'Queensland’s streamed competitions, including NPL Men, NPL Women and McDonald\'s FQPL Leagues.', + disabledPreferences: true, + name: ClientNames.Fqtv, + privacyLink: '/privacy-policy-and-statement?client_id=insports-ott-web', + showSearch: true, + showSmartBanner: true, + styles: { + background: '', + homePageHeader: css` + background: linear-gradient(0deg, rgba(0, 13, 47, 0.8), rgba(0, 13, 47, 0.8)), + linear-gradient(0deg, #0061DC, #0061DC), + no-repeat center center url(/images/fqtv-background.png); + background-size: 130% 105%; + background-blend-mode: normal, hard-light, normal; + `, + logo: 'fqtv-logo.svg', + logoHeight: 2.465, + logoLeft: 0.71, + logoTop: 1, + logoWidth: 6.37, + matchLogoHeight: 2.465, + matchLogoWidth: 6.37, + matchPageMobileHeaderLogo: css` + width: 90px; + height: 27px; + top: 0; + `, + mobileHeaderLogo: css` + width: 86px; + height: 33px; + `, + userAccountLogo: css` + width: 6.37rem; + height: 2.465rem; + `, + }, + termsLink: '/terms-and-conditions?client_id=insports-ott-web', + title: 'FQTV is the official home of Football', +} diff --git a/src/config/clients/index.tsx b/src/config/clients/index.tsx index 18647023..8b79c639 100644 --- a/src/config/clients/index.tsx +++ b/src/config/clients/index.tsx @@ -6,6 +6,7 @@ import { lff } from './lff' import { insports } from './insports' import { india } from './india' import { tunisia } from './tunisia' +import { fqtv } from './fqtv' export const currentClient = process.env.REACT_APP_CLIENT || 'insports' @@ -15,9 +16,11 @@ export const isInstatClient = currentClient === 'instat' export const isFacrClient = currentClient === 'facr' export const isIndiaClient = currentClient === 'india' export const isTunisClient = currentClient === 'tunisia' +export const isFqtvClient = currentClient === 'fqtv' const clients = { facr, + fqtv, india, insports, instat, diff --git a/src/config/clients/types.tsx b/src/config/clients/types.tsx index 6848cb30..d7b21fac 100644 --- a/src/config/clients/types.tsx +++ b/src/config/clients/types.tsx @@ -7,6 +7,7 @@ type StyledCss = ReturnType export enum ClientIds { Facr = 'facr-ott-web', + Fqtv = 'fqtv-ott-web', India = 'india-ott-web', Insports = 'insports-ott-web', Instat = 'ott-web', @@ -15,13 +16,14 @@ export enum ClientIds { } export enum ClientNames { - Brasil = 'brasil', - Facr = 'facr', - India = 'india', - Insports = 'insports', - Instat = 'instat', - Lff = 'lff', - Tunisia = 'tunisia' + Brasil = 'brasil', // Бразилия + Facr = 'facr', // Чехия + Fqtv = 'fqtv', // Австралия + India = 'india', // Индия + Insports = 'insports', // Глобал + Instat = 'instat', // Глобал + Lff = 'lff', // Латвия + Tunisia = 'tunisia' // Тунис } export type ClientConfig = { diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index 5d498ce0..a4c9227f 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -187,6 +187,7 @@ export const indexLexics = { match_status_live: 12984, match_status_soon: 12986, match_video: 13025, + month_title: 2202, no_match_access_body: 13419, no_match_access_title: 13418, player: 14975, @@ -208,6 +209,7 @@ export const indexLexics = { watch_from_beginning: 13021, watch_from_last_pause: 13022, watch_now: 13020, + week_title: 6584, ...filterPopup, ...confirmPopup, diff --git a/src/config/payments.tsx b/src/config/payments.tsx index 29aba071..56b5a5a0 100644 --- a/src/config/payments.tsx +++ b/src/config/payments.tsx @@ -7,16 +7,23 @@ export enum PaymentSystem { Stripe = 'stripe' } +export enum CountryCode { + BR = 'BR', // Бразилия + IN = 'IN', // Индия + TN = 'TN' // Тунис +} + type PaymentsType = { [key in ClientNames]: PaymentSystem } export const payments: PaymentsType = { [ClientNames.Tunisia]: PaymentSystem.Paymee, - brasil: PaymentSystem.PagBrazil, + [ClientNames.Brasil]: PaymentSystem.PagBrazil, [ClientNames.India]: PaymentSystem.Paytm, [ClientNames.Insports]: PaymentSystem.Stripe, [ClientNames.Instat]: PaymentSystem.Stripe, [ClientNames.Facr]: PaymentSystem.Stripe, [ClientNames.Lff]: PaymentSystem.Stripe, + [ClientNames.Fqtv]: PaymentSystem.Stripe, } diff --git a/src/features/App/index.tsx b/src/features/App/index.tsx index d65ffd0a..21812be1 100644 --- a/src/features/App/index.tsx +++ b/src/features/App/index.tsx @@ -32,13 +32,24 @@ setClientTitleAndDescription(client.title, client.description) const Main = () => { const [isToken, setIsToken] = useState(false) - const { userInfo } = useAuthStore() + const { user, userInfo } = useAuthStore() const queryClient = new QueryClient() useEffect(() => { if (userInfo) readToken() && setIsToken(true) }, [userInfo]) + // отправляем идентификаторы пользователей в гугл аналитику + useEffect(() => { + if (user) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (window as any)?.dataLayer.push({ + event: 'userData', + userId: user.profile?.sub, + }) + } + }, [user]) + // имеется действующий токен return isToken ? ( diff --git a/src/features/AuthServiceApp/config/clients/fqtv.tsx b/src/features/AuthServiceApp/config/clients/fqtv.tsx new file mode 100644 index 00000000..5ae9ee18 --- /dev/null +++ b/src/features/AuthServiceApp/config/clients/fqtv.tsx @@ -0,0 +1,67 @@ +import styled, { css } from 'styled-components/macro' + +import { fqtv as platformFqtv } from 'config/clients/fqtv' +import { isMobileDevice } from 'config/userAgent' + +import type { ClientConfig } from './types' + +const Background = styled.div` + position: relative; + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + background: linear-gradient(0deg, rgba(0, 13, 47, 0.8), rgba(0, 13, 47, 0.8)), + linear-gradient(0deg, #0061DC, #0061DC), + no-repeat center center url(/images/fqtv-background.png); + background-size: 130% 105%; + background-blend-mode: normal, hard-light, normal; +` + +export const fqtv: ClientConfig = { + ...platformFqtv, + background: Background, + styles: { + centerBlock: css` + margin-top: 9.15rem; + ${isMobileDevice ? css` + margin-top: 107px; + @media screen and (orientation: landscape) { + width: 290px; + margin: auto; + } + ` : ''}; + `, + forgotPasswordInput: css` + border: none; + `, + input: css` + background-color: transparent; + :not(:last-of-type) { + border-color: ${({ theme }) => theme.colors.white}; + } + `, + inputGroup: css` + border: 1px solid ${({ theme }) => theme.colors.white}; + `, + logo: css` + background-image: url(/images/fqtv-auth-logo.svg); + background-position: center; + height: 142px; + width: 378px; + margin-bottom: 1.82rem; + + ${isMobileDevice ? css` + margin-bottom: 15px; + width: 200px; + height: 74px; + ` : ''} + `, + submitButton: css` + :disabled { + background: #FFFFFF; + color: #00244F; + } + `, + }, +} diff --git a/src/features/AuthServiceApp/config/clients/index.tsx b/src/features/AuthServiceApp/config/clients/index.tsx index f29566c8..79309820 100644 --- a/src/features/AuthServiceApp/config/clients/index.tsx +++ b/src/features/AuthServiceApp/config/clients/index.tsx @@ -6,9 +6,11 @@ import { instat } from './instat' import { lff } from './lff' import { india } from './india' import { tunisia } from './tunisia' +import { fqtv } from './fqtv' const clients = { [ClientIds.Facr]: facr, + [ClientIds.Fqtv]: fqtv, [ClientIds.Instat]: instat, [ClientIds.Lff]: lff, [ClientIds.Insports]: insports, diff --git a/src/features/AuthStore/helpers.tsx b/src/features/AuthStore/helpers.tsx index 55c366b7..d8d08216 100644 --- a/src/features/AuthStore/helpers.tsx +++ b/src/features/AuthStore/helpers.tsx @@ -27,6 +27,8 @@ export const getClientNameByRedirectUri = () => { return 'india.insports' case ClientNames.Tunisia: return 'diwan.insports' + case ClientNames.Fqtv: + return 'fqtv.insports' case ClientNames.Facr: return ClientNames.Facr case ClientNames.Instat: @@ -38,6 +40,7 @@ export const getClientNameByRedirectUri = () => { const clientsForRedirect = { facr: ClientNames.Facr, + fqtv: ClientNames.Fqtv, india: ClientNames.India, lff: ClientNames.Lff, tunisia: ClientNames.Tunisia, diff --git a/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx b/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx index 40bb0d67..2fcec4fc 100644 --- a/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx +++ b/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx @@ -9,7 +9,7 @@ import { import isNull from 'lodash/isNull' import { MDASH } from 'config' -import { payments } from 'config/payments' +import { payments, CountryCode } from 'config/payments' import { client } from 'config/clients' import { CountryCodeType, getCountryCode } from 'requests/getCountryCode' @@ -74,9 +74,9 @@ export const PackageSelectionStep = () => { const paymentSystem = useMemo(() => { switch (countryCode?.country_code) { - case 'BR': + case CountryCode.BR: return payments.brasil - case 'TN': + case CountryCode.TN: return payments.tunisia default: return payments[client.name] @@ -85,8 +85,8 @@ export const PackageSelectionStep = () => { const isIframePayment = useMemo(() => { switch (countryCode?.country_code) { - case 'BR': - case 'TN': + case CountryCode.BR: + case CountryCode.TN: return true default: return false diff --git a/src/features/Common/Button/styled.tsx b/src/features/Common/Button/styled.tsx index 422fd04c..8ecb693e 100644 --- a/src/features/Common/Button/styled.tsx +++ b/src/features/Common/Button/styled.tsx @@ -1,7 +1,6 @@ import styled, { css } from 'styled-components/macro' import { isMobileDevice } from 'config/userAgent' -import { client } from 'features/AuthServiceApp/config/clients' const baseButtonStyles = css` width: 272px; @@ -54,7 +53,6 @@ export const solidButtonStyles = css` ` : ''}; - ${client.styles.submitButton} ` export const ButtonSolid = styled.button` diff --git a/src/features/Common/Input/styled.tsx b/src/features/Common/Input/styled.tsx index 09a00744..3a478aaa 100644 --- a/src/features/Common/Input/styled.tsx +++ b/src/features/Common/Input/styled.tsx @@ -34,6 +34,10 @@ export const wrapperStyles = css` padding-left: 0; ` : ''}; + + @media (min-width: 1921px) { + padding-left: 24px; + } ` type TitleProps = { @@ -55,8 +59,8 @@ export const LabelTitle = styled.p` letter-spacing: -0.01em; padding-top: 2px; color: ${({ theme: { colors } }) => colors.secondary}; - width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')}; - min-width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')}; + width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}rem` : '')}; + min-width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}rem` : '')}; &:hover{ .Highlight__Tooltip { @@ -168,6 +172,10 @@ export const Column = styled.div` } ` : ''} + + @media (min-width: 1921px) { + max-width: 560px; + } ` type ErrorProps = { diff --git a/src/features/CompanyInfo/index.tsx b/src/features/CompanyInfo/index.tsx index 4819c317..a3e66a45 100644 --- a/src/features/CompanyInfo/index.tsx +++ b/src/features/CompanyInfo/index.tsx @@ -40,6 +40,7 @@ export const CompanyInfo = ({ ) case ClientNames.Tunisia: + case ClientNames.Fqtv: return '' case ClientNames.Lff: return ( diff --git a/src/features/HeaderFilters/components/DateFilter/helpers.tsx b/src/features/HeaderFilters/components/DateFilter/helpers.tsx index 1177b901..20e53193 100644 --- a/src/features/HeaderFilters/components/DateFilter/helpers.tsx +++ b/src/features/HeaderFilters/components/DateFilter/helpers.tsx @@ -1,5 +1,7 @@ import startOfWeek from 'date-fns/startOfWeek' import addDays from 'date-fns/addDays' +import addMonths from 'date-fns/addMonths' +import startOfYear from 'date-fns/startOfYear' type Args = { date: Date, @@ -60,3 +62,31 @@ export const getWeeks = (date: Date, locale: string) => { ] return week } + +const createMonthGetter = (yearStart: Date, locale: string) => (month: number) => { + const dayDate = addMonths(yearStart, month) + return { + date: dayDate, + name: new Intl.DateTimeFormat(locale || 'en', { month: 'short' }).format(dayDate), + } +} + +export const getMonths = (locale: string, date: Date) => { + const yearStart = startOfYear(date) + const getMonth = createMonthGetter(yearStart, locale) + const months: Array = [ + getMonth(0), + getMonth(1), + getMonth(2), + getMonth(3), + getMonth(4), + getMonth(5), + getMonth(6), + getMonth(7), + getMonth(8), + getMonth(9), + getMonth(10), + getMonth(11), + ] + return months +} diff --git a/src/features/HeaderFilters/components/DateFilter/hooks/index.tsx b/src/features/HeaderFilters/components/DateFilter/hooks/index.tsx index e462d1a2..7225e678 100644 --- a/src/features/HeaderFilters/components/DateFilter/hooks/index.tsx +++ b/src/features/HeaderFilters/components/DateFilter/hooks/index.tsx @@ -4,7 +4,11 @@ import { useMemo, } from 'react' -import addDays from 'date-fns/addDays' +import { + add, + sub, + addDays, +} from 'date-fns' import { useToggle } from 'hooks' @@ -13,17 +17,23 @@ import { useHeaderFiltersStore } from 'features/HeaderFilters' import { getDisplayDate, + getMonths, getWeekName, getWeeks, } from '../helpers' export const useDateFilter = () => { const { + isMonthMode, selectedDate, + selectedMode, + selectedMonthModeDate, setIsShowTournament, setSelectedDate, setSelectedFilters, setSelectedLeague, + setSelectedMode, + setSelectedMonthModeDate, setSelectTournament, } = useHeaderFiltersStore() @@ -38,6 +48,11 @@ export const useDateFilter = () => { [selectedDate, lang], ) + const months = useMemo( + () => getMonths(lang, selectedMonthModeDate), + [lang, selectedMonthModeDate], + ) + const date = getDisplayDate({ date: selectedDate, lang, @@ -71,6 +86,9 @@ export const useDateFilter = () => { setSelectedDate(addDays(selectedDate, numberAddDays)) } + const onPrevYearClick = () => setSelectedMonthModeDate(sub(selectedMonthModeDate, { years: 1 })) + const onNextYearClick = () => setSelectedMonthModeDate(add(selectedMonthModeDate, { years: 1 })) + const onDateChange = (newDate: Date | null) => { if (newDate) { setSelectedDate(newDate) @@ -86,13 +104,21 @@ export const useDateFilter = () => { return { close, date, + isMonthMode, isOpen, + months, onDateChange, onNextClick, + onNextYearClick, + onPrevYearClick, onPreviousClick, onWeekDayClick: setSelectedDate, openDatePicker, selectedDate, + selectedMode, + selectedMonthModeDate, + setSelectedMode, + setSelectedMonthModeDate, week, } } diff --git a/src/features/HeaderFilters/components/DateFilter/styled.tsx b/src/features/HeaderFilters/components/DateFilter/styled.tsx index 3857d476..528ef42d 100644 --- a/src/features/HeaderFilters/components/DateFilter/styled.tsx +++ b/src/features/HeaderFilters/components/DateFilter/styled.tsx @@ -1,7 +1,11 @@ import styled, { css } from 'styled-components/macro' import { isMobileDevice } from 'config/userAgent' -import { devices } from 'config' +import { devices } from 'config/devices' + +type Props = { + isMonthMode: boolean, +} export const BaseButton = styled.button` border: none; @@ -28,7 +32,7 @@ export const Wrapper = styled.div` /* padding-top: 4px; */ /* min-height: 84px; */ justify-content: space-between; - + @media (max-width: 450px){ justify-content: flex-end; } @@ -58,6 +62,7 @@ export const MonthYear = styled.span` font-size: 1.04rem; line-height: 1.8rem; text-transform: uppercase; + ${isMobileDevice ? css` font-size: 10px; @@ -104,10 +109,11 @@ export const WeekDaysWrapper = styled.div` justify-content: center; align-items: center; margin-top: 0.567rem; + ${isMobileDevice ? css` - padding: 0 5px; - margin-top: 0; + padding: 0 5px; + margin-top: 0; ` : ''}; ` @@ -218,3 +224,199 @@ export const Arrow = styled.span` ` : ''}; ` + +export const MonthModeWrapper = styled(WeekDaysWrapper)` + display: flex; + justify-content: center; + align-items: center; + margin-top: ${({ isMonthMode }) => (isMonthMode ? '0' : '0.2rem')};; + + ::-webkit-scrollbar { + display: none; + } + + ${isMobileDevice + ? css` + padding: 0 5px; + margin-top: 0; + overflow-y: auto; + height: 100%; + ` + : ''}; +` + +export const FacrWrapper = styled(Wrapper)` + justify-content: space-between; + height: ${(isMobileDevice ? '100%' : 'fit-content')}; + width: ${({ isMonthMode }) => (isMonthMode ? '49.5%' : '26.3rem')}; + + @media (max-width: 450px){ + width: 100%; + justify-content: flex-start; + }; +` + +export const FacrDateButton = styled(DateButton)` + left: 24rem; + top: 0; +` + +export const FacrMonthWrapper = styled(MonthWrapper)` + position: static; + width: auto; + align-self: auto; + + ${isMobileDevice + ? css` + position: absolute; + left: 50%; + transform: translateX(-50%); + ` + : ''}; +` + +export const DateWrapper = styled.div` + position: relative; + display: flex; + align-items: flex-end; + justify-content: space-between; + width: ${({ isMonthMode }) => (isMonthMode ? '25rem' : '16.9rem')}; + margin: ${({ isMonthMode }) => (isMonthMode ? '3.7rem 0 0.7rem' : '3rem 0 0')}; + + ${isMobileDevice + ? css` + width: 100%; + margin: 0.7rem 0; + padding-left: 5px; + ` + : ''}; +` + +export const MonthsMode = styled.div` + height: 5.7rem; +` + +export const MonthArrow = styled(ArrowButton)` + height: auto; +` + +export const Months = styled(Week)` + height: 100%; + width: 100%; + margin: 0; + justify-content: space-between; +` + +export const FacrWeek = styled(Week)` + margin: 0 1.8rem; +` + +export const Month = styled(WeekDay)` + width: auto; + + ${isMobileDevice + ? css` + margin-top: 10px; + margin-right: 25px; + min-width: fit-content; + ` + : ''}; +` + +export const MonthModeYear = styled(MonthYear)` + margin-top: 0.22rem; + line-height: normal; + font-size: 0.85rem; + + ${isMobileDevice + ? css` + font-size: 10px; + ` + : ''}; +` + +export const TabsList = styled.div` + display: flex; + justify-content: space-between; + height: fit-content; + + ${isMobileDevice + ? css` + top: 3px; + padding: 0; + ` + : ''}; +` + +export const YearWrapper = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 110px; + + ${isMobileDevice + ? css` + width: auto; + position: absolute; + left: 50%; + transform: translateX(-50%); + ` + : ''}; +` + +export const MonthName = styled(WeekName)` + font-weight: 600; + + ${isMobileDevice + ? css` + font-size: 14px; + ` + : ''}; +` + +type TabTitleProps = { + teamColor?: string | null, +} + +export const TabTitle = styled.span` + color: ${({ theme }) => theme.colors.dateFilter}; +` + +export const Tab = styled.button` + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + font-size: .75rem; + font-weight: 600; + cursor: pointer; + border: none; + background: none; + padding: 0; + + :first-child { + margin-right: 2rem; + } + + ${isMobileDevice + ? css` + font-size: 10px; + ` + : ''}; + + &[aria-pressed="true"] { + ::after { + content: ''; + position: absolute; + bottom: ${(isMobileDevice ? '-4px' : '-2px')};; + left: 50%; + transform: translate(-50%); + width: ${(isMobileDevice ? '39px' : '4.2rem')}; + border-bottom: ${({ theme }) => `2px solid ${theme.colors.white}`}; + } + + ${TabTitle} { + color: ${({ theme }) => theme.colors.white}; + } + } +` diff --git a/src/features/HeaderFilters/components/FacrDateFilter/index.tsx b/src/features/HeaderFilters/components/FacrDateFilter/index.tsx new file mode 100644 index 00000000..19f186da --- /dev/null +++ b/src/features/HeaderFilters/components/FacrDateFilter/index.tsx @@ -0,0 +1,191 @@ +import map from 'lodash/map' + +import { T9n } from 'features/T9n' +import { Icon } from 'features/Icon' +import { OutsideClick } from 'features/OutsideClick' +import { BodyBackdrop } from 'features/PageLayout' +import { useHeaderFiltersStore } from 'features/HeaderFilters' + +import { Fragment } from 'react' +import { useDateFilter } from '../DateFilter/hooks' +import { DatePicker } from '../DatePicker' +import { Tabs } from '../../store/config' + +import { + TabsList, + Tab, + TabTitle, + MonthsMode, + YearWrapper, + ArrowButton, + Arrow, + MonthModeYear, + MonthModeWrapper, + Months, + Month, + MonthName, + FacrWrapper, + DateWrapper, + MonthArrow, + WeekDaysWrapper, + FacrMonthWrapper, + WeekDay, + WeekName, + WeekNumber, + FacrDateButton, + FacrWeek, +} from '../DateFilter/styled' + +export const FacrDateFilter = () => { + const { + close, + date, + isMonthMode, + isOpen, + months, + onDateChange, + onNextClick, + onNextYearClick, + onPreviousClick, + onPrevYearClick, + onWeekDayClick, + openDatePicker, + selectedDate, + selectedMode, + selectedMonthModeDate, + setSelectedMode, + setSelectedMonthModeDate, + week, + } = useDateFilter() + + const { + resetFilters, + } = useHeaderFiltersStore() + + return ( + + + + setSelectedMode(Tabs.MONTH)} + > + + + + + setSelectedMode(Tabs.WEEK)} + > + + + + + + {isMonthMode + ? ( + + + + + + {selectedMonthModeDate.getFullYear()} + + + + + + ) + : ( + + + {date.month} {' '} {date.year} + + + + + + )} + + + {isMonthMode + ? ( + + + + { + map(months, (day) => ( + setSelectedMonthModeDate(day.date)} + > + {day.name} + + )) + } + + + + ) + : ( + + + + + + { + map(week, (day) => ( + { + if (day.date.getDate() !== selectedDate.getDate()) { + onWeekDayClick(day.date) + } else { + resetFilters() + } + }} + > + {day.name.slice(0, 3)} + {day.date.getDate()} + + )) + } + + + + + + + )} + { + isOpen && ( + + + + + + + ) + } + + ) +} diff --git a/src/features/HeaderFilters/index.tsx b/src/features/HeaderFilters/index.tsx index 08cf91a0..80de6b06 100644 --- a/src/features/HeaderFilters/index.tsx +++ b/src/features/HeaderFilters/index.tsx @@ -1,2 +1,3 @@ export * from './components/DateFilter' +export * from './components/FacrDateFilter' export * from './store' diff --git a/src/features/HeaderFilters/store/config.tsx b/src/features/HeaderFilters/store/config.tsx index d2aea213..1ba0f9c6 100644 --- a/src/features/HeaderFilters/store/config.tsx +++ b/src/features/HeaderFilters/store/config.tsx @@ -4,3 +4,8 @@ export const filterKeys = { SPORT_TYPE: 'sport', TOURNAMENT_ID: 'tournament', } + +export enum Tabs { + WEEK, + MONTH, +} diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index 714a1603..ede4f7f3 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/src/features/HeaderFilters/store/hooks/index.tsx @@ -6,7 +6,7 @@ import { } from 'react' import { useLocation } from 'react-router-dom' -import { isToday } from 'date-fns' +import { isToday, startOfMonth } from 'date-fns' import type { TournamentType } from 'requests/getMatches/types' @@ -14,10 +14,11 @@ import { useQueryParamStore } from 'hooks' import { getSportLexic } from 'helpers' +import { isFacrClient } from 'config/clients' import { querieKeys } from 'config' import { getLocalStorageItem } from 'helpers/getLocalStorage' -import { filterKeys } from '../config' +import { filterKeys, Tabs } from '../config' import { isValidDate } from '../helpers/isValidDate' import type { Match } from '../../../Matches' @@ -31,6 +32,10 @@ export const useFilters = () => { }) const sportList = getLocalStorageItem(querieKeys.sportsList) + const [selectedMode, setSelectedMode] = useState(0) + const [selectedMonthModeDate, setSelectedMonthModeDate] = useState(startOfMonth(new Date())) + const isMonthMode = selectedMode === Tabs.MONTH + const [selectedSport, setSelectedSport] = useState(['all_sports']) const [selectedLeague, setSelectedLeague] = useState>(['all_competitions']) const [selectedFilters, setSelectedFilters] = useState>([]) @@ -39,6 +44,25 @@ export const useFilters = () => { const [sportIds, setSportIds] = useState>([]) const isTodaySelected = isToday(selectedDate) + useEffect(() => { + if (!isFacrClient) return + const dateMode = localStorage.getItem('dateMode') + const parseDateMode = dateMode && JSON.parse(dateMode) + setSelectedMode(parseDateMode.selectedMode) + setSelectedMonthModeDate(new Date(parseDateMode.selectedMonthModeDate)) + }, []) + + useEffect(() => { + if (!isFacrClient) return + localStorage.setItem( + 'dateMode', + JSON.stringify({ + selectedMode, + selectedMonthModeDate, + }), + ) + }, [selectedMode, selectedMonthModeDate]) + const compareSport = useCallback((match: Match, sportNames: Array) => { if (sportNames[0] === 'all_sports') { return true @@ -93,6 +117,7 @@ export const useFilters = () => { const store = useMemo(() => ({ compareSport, + isMonthMode, isShowTournament, isTodaySelected, resetFilters, @@ -100,12 +125,16 @@ export const useFilters = () => { selectedDate, selectedFilters, selectedLeague, + selectedMode, + selectedMonthModeDate, selectedSport, setIsShowTournament, setSelectTournament, setSelectedDate, setSelectedFilters, setSelectedLeague, + setSelectedMode, + setSelectedMonthModeDate, setSelectedSport, setSportIds, sportIds, @@ -131,6 +160,11 @@ export const useFilters = () => { sportIds, updateDate, updateSportIds, + selectedMode, + setSelectedMode, + setSelectedMonthModeDate, + selectedMonthModeDate, + isMonthMode, ]) return store diff --git a/src/features/HeaderMobile/index.tsx b/src/features/HeaderMobile/index.tsx index 2435e6f8..feffe855 100644 --- a/src/features/HeaderMobile/index.tsx +++ b/src/features/HeaderMobile/index.tsx @@ -1,10 +1,14 @@ import { useRecoilValue } from 'recoil' import { isAndroid, isIOS } from 'config/userAgent' -import { client, isLffClient } from 'config/clients' +import { + client, + isFqtvClient, + isLffClient, +} from 'config/clients' import { HeaderMenu } from 'features/HeaderMenu' -import { DateFilter } from 'features/HeaderFilters' +import { DateFilter, FacrDateFilter } from 'features/HeaderFilters' import { ScoreSwitch } from 'features/MatchSwitches' import { SportsFilter } from 'features/SportsFilter' import { isSportFilterShownAtom } from 'features/HomePage/Atoms/HomePageAtoms' @@ -41,7 +45,7 @@ export const HeaderMobile = ({ } - + {isFqtvClient ? : } {!isLffClient && isSportFilterShown ? : null} diff --git a/src/features/HeaderMobile/styled.tsx b/src/features/HeaderMobile/styled.tsx index 33a401c9..4709bd59 100644 --- a/src/features/HeaderMobile/styled.tsx +++ b/src/features/HeaderMobile/styled.tsx @@ -4,6 +4,7 @@ import isUndefined from 'lodash/isUndefined' import { client } from 'config/clients' import { isMobileDevice } from 'config/userAgent' +import { ClientNames } from 'config/clients/types' import { ModalWindow } from 'features/Modal/styled' import { Modal as BaseModal } from 'features/Modal' @@ -15,7 +16,12 @@ export const defaultHeaderStyles = ( color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null, ) => { - if (['lff', 'tunisia'].includes(client.name)) { + if ([ + ClientNames.Lff, + ClientNames.Tunisia, + ClientNames.Facr, + ClientNames.Fqtv, + ].includes(client.name)) { return client.styles.homePageHeader } @@ -32,16 +38,16 @@ export const defaultHeaderStyles = ( return css` background: ${color}; z-index: 10; -` + ` } - return client.name === 'facr' ? client.styles.homePageHeader : css` - background: linear-gradient( - 236deg, - ${color} -4.49%, - #000000 50%), - #000000; - z-index: 10; -` + return css` + background: linear-gradient( + 236deg, + ${color} -4.49%, + #000000 50%), + #000000; + z-index: 10; + ` } type HeaderProps = { diff --git a/src/features/HomePage/components/Header/index.tsx b/src/features/HomePage/components/Header/index.tsx index 575cc899..58df0145 100644 --- a/src/features/HomePage/components/Header/index.tsx +++ b/src/features/HomePage/components/Header/index.tsx @@ -1,12 +1,16 @@ import { Link } from 'react-router-dom' import { PAGES } from 'config/pages' -import { client } from 'config/clients' +import { client, isFqtvClient } from 'config/clients' import { Menu } from 'features/Menu' import { ScoreSwitch } from 'features/MatchSwitches' import { Search } from 'features/Search' -import { DateFilter, useHeaderFiltersStore } from 'features/HeaderFilters' +import { + DateFilter, + useHeaderFiltersStore, + FacrDateFilter, +} from 'features/HeaderFilters' import { HeaderStyled, @@ -41,7 +45,7 @@ export const Header = () => { - + {isFqtvClient ? : } diff --git a/src/features/HomePage/hooks.tsx b/src/features/HomePage/hooks.tsx index 3bbf437d..3cfc48f9 100644 --- a/src/features/HomePage/hooks.tsx +++ b/src/features/HomePage/hooks.tsx @@ -4,7 +4,7 @@ import { useState, } from 'react' -import { format } from 'date-fns' +import { endOfMonth, format } from 'date-fns' import { useSetRecoilState } from 'recoil' @@ -35,10 +35,19 @@ const getDate = (date: Date) => format(date, 'yyyy-MM-dd') export const useHomePage = () => { const { user, userInfo } = useAuthStore() - const { selectedDate } = useHeaderFiltersStore() + const { + isMonthMode, + selectedDate, + selectedMonthModeDate, + } = useHeaderFiltersStore() + const [isOpenDownload, setIsOpenDownload] = useState(false) const [isShowConfirmPopup, setIsShowConfirmPopup] = useState(false) const setIsSportFilterShown = useSetRecoilState(isSportFilterShownAtom) + const date = isMonthMode ? selectedMonthModeDate : selectedDate + const dateTo = isMonthMode + ? `${getDate(endOfMonth(selectedMonthModeDate))} 00:00:00` + : undefined const handleCloseConfirmPopup = useCallback(async () => { await setAgreements(`${userInfo?.email}` || '') @@ -66,16 +75,21 @@ export const useHomePage = () => { setIsOpenDownload(true) } }, []) - const fetchMatches = useCallback( (limit: number, offset: number) => getHomeMatches({ - date: getDate(selectedDate), + date: getDate(date), + date_to: dateTo, limit, offset, timezoneOffset: getTimezoneOffset(selectedDate), }), // eslint-disable-next-line react-hooks/exhaustive-deps - [selectedDate, user], + [ + selectedDate, + user, + dateTo, + date, + ], ) useEffect(() => { diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx index d8984d52..5b30d040 100644 --- a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx +++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx @@ -16,6 +16,7 @@ import { useName } from 'features/Name' import { T9n } from 'features/T9n' import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction' import { useUserFavoritesStore } from 'features/UserFavorites/store' +import { useHeaderFiltersStore } from 'features/HeaderFilters' import { Icon } from 'features/Icon' import { getCardColor } from 'helpers/getCardColor' @@ -86,6 +87,7 @@ export const CardFrontsideMobile = ({ const tournamentName = useName(tournament) const { isInFavorites } = useUserFavoritesStore() const { isScoreHidden } = useMatchSwitchesStore() + const { isMonthMode } = useHeaderFiltersStore() const isInFuture = getUnixTime(date) > getUnixTime(new Date()) const showScore = !(isInFuture || isScoreHidden) || (live && !isScoreHidden) const team1InFavorites = isInFavorites(ProfileTypes.TEAMS, team1.id) @@ -141,8 +143,9 @@ export const CardFrontsideMobile = ({ - {isHomePage || isMatchPage ? null : prepareDate} + {(isHomePage && !isMonthMode) || isMatchPage ? null : prepareDate} {isOwnedMatches && {prepareTime} } {live && ( diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx index 99c5527b..773b761e 100644 --- a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx +++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx @@ -112,6 +112,7 @@ export const MatchTimeInfo = styled.div` type MatchDateProps = { isHomePage?: boolean, + isMonthMode?: boolean, isOwnedMatches?: boolean, } @@ -119,7 +120,7 @@ export const MatchDate = styled.div` width: fit-content; height: 0.9rem; border-radius: 2px; - padding: ${({ isHomePage }) => (!isHomePage ? '0 0.27rem' : '')}; + padding: ${({ isHomePage, isMonthMode }) => (isHomePage && !isMonthMode ? '' : '0 0.27rem')}; font-weight: ${({ isOwnedMatches }) => (isOwnedMatches ? '500' : 'bold')}; font-size: 0.472rem; line-height: 0.567rem; @@ -133,7 +134,7 @@ export const MatchDate = styled.div` background-color: #6D6D6D; @media ${devices.tablet} { - padding: ${({ isHomePage }) => (!isHomePage ? '0.27rem 0.36rem' : '')}; + padding: ${({ isHomePage, isMonthMode }) => (isHomePage && !isMonthMode ? '' : '0.27rem 0.36rem')}; } ${isMobileDevice ? css` @@ -145,7 +146,7 @@ export const MatchDate = styled.div` ` : ''}; - ${({ isOwnedMatches }) => (isOwnedMatches + ${({ isMonthMode, isOwnedMatches }) => (isOwnedMatches || isMonthMode ? css` background-color: #6D6D6D; width: fit-content; diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx index e5af3755..4b1c5d2b 100644 --- a/src/features/MatchCard/CardFrontside/index.tsx +++ b/src/features/MatchCard/CardFrontside/index.tsx @@ -17,6 +17,7 @@ import { T9n } from 'features/T9n' import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction' import { useUserFavoritesStore } from 'features/UserFavorites/store' import { TournamentSubtitle } from 'features/TournamentSubtitle' +import { useHeaderFiltersStore } from 'features/HeaderFilters' import { NoAccessMessage } from '../NoAccessMessage' import { Score } from '../Score' @@ -84,6 +85,7 @@ export const CardFrontside = ({ const tournamentName = useName(tournament) const { isInFavorites } = useUserFavoritesStore() const { isScoreHidden } = useMatchSwitchesStore() + const { isMonthMode } = useHeaderFiltersStore() const isInFuture = getUnixTime(date) > getUnixTime(new Date()) const showScore = !( isInFuture @@ -177,8 +179,12 @@ export const CardFrontside = ({ /> )} - - {isHomePage || isMatchPage ? null : prepareDate} + + {(isHomePage && !isMonthMode) || isMatchPage ? null : prepareDate} {live && ( diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx index a862e5e2..adc35f51 100644 --- a/src/features/MatchCard/styled.tsx +++ b/src/features/MatchCard/styled.tsx @@ -134,13 +134,14 @@ export const MatchTimeInfo = styled.div` type MatchDateProps = { isHomePage?: boolean, isMatchPage?: boolean, + isMonthMode?: boolean, } export const MatchDate = styled.div` width: fit-content; height: 0.9rem; border-radius: 2px; - padding: ${({ isHomePage }) => (!isHomePage ? '0 0.27rem' : '')}; + padding: ${({ isHomePage, isMonthMode }) => (isHomePage && !isMonthMode ? '' : '0 0.27rem')}; font-weight: bold; font-size: 0.472rem; line-height: 0.567rem; @@ -154,7 +155,7 @@ export const MatchDate = styled.div` background-color: #6D6D6D; @media ${devices.tablet} { - padding: ${({ isHomePage }) => (!isHomePage ? '0.27rem 0.36rem' : '')}; + padding: ${({ isHomePage, isMonthMode }) => (isHomePage && !isMonthMode ? '' : '0.27rem 0.36rem')}; } ${isMobileDevice ? css` diff --git a/src/features/ProfileHeader/styled.tsx b/src/features/ProfileHeader/styled.tsx index b7950745..03f0d4f6 100644 --- a/src/features/ProfileHeader/styled.tsx +++ b/src/features/ProfileHeader/styled.tsx @@ -17,7 +17,12 @@ export const defaultHeaderStyles = ( color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null, ) => { - if ([ClientNames.Lff, ClientNames.Tunisia, ClientNames.Facr].includes(client.name) + if ([ + ClientNames.Lff, + ClientNames.Tunisia, + ClientNames.Facr, + ClientNames.Fqtv, + ].includes(client.name) && !isMatchPage()) { return client.styles.homePageHeader } @@ -64,7 +69,10 @@ export const HeaderStyled = styled.header` ${({ color, headerImage }) => defaultHeaderStyles(color, headerImage)} ${({ color }) => ( - client.name === ClientNames.Lff || client.name === ClientNames.Facr || client.name === ClientNames.Tunisia ? css` + client.name === ClientNames.Lff + || client.name === ClientNames.Facr + || client.name === ClientNames.Fqtv + || client.name === ClientNames.Tunisia ? css` background: ${color}; ` : '' )} @@ -119,6 +127,8 @@ export const HeaderLogo = styled(Logo)` top: 5px; transform: translateX(-50%); position: absolute; + + ${client.styles.matchPageMobileHeaderLogo} } ` : ''} `)} diff --git a/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/styled.tsx b/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/styled.tsx index 51d2a481..25966479 100644 --- a/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/styled.tsx +++ b/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/styled.tsx @@ -7,7 +7,7 @@ type FullscreenProps = { } export const Controls = styled.div` - z-index: 14; + z-index: 9; position: absolute; width: 100%; bottom: 22px; diff --git a/src/features/Theme/config.tsx b/src/features/Theme/config.tsx index 94730203..bc2eff03 100644 --- a/src/features/Theme/config.tsx +++ b/src/features/Theme/config.tsx @@ -72,6 +72,7 @@ export const facrTheme: CustomTheme = { colors: { ...defaultTheme.colors, button: '#00257A', + dateFilter: 'rgba(255, 255, 255, 0.5)', inputs: 'transparent', loaderAuth: '#00257A', }, @@ -105,6 +106,33 @@ export const tunisTheme: CustomTheme = { name: 'tunisia', } -type Name = 'light' | 'dark' | 'lff' | 'facr' | 'tunisia' +export const fqtvTheme: CustomTheme = { + ...defaultTheme, + colors: { + ...defaultTheme.colors, + background: '#1B1E27', + button: '#016BD8', + buttonHover: '#016BD8', + collapseTournamentBackground: 'linear-gradient(236.13deg, rgba(1, 48, 121, 0.8) -4.49%, rgba(52, 62, 73, 0.8) 98.29%), #363F49;', + comboboxBackground: '#1A2634', + comboboxItemHover: '#016BD8', + dateFilter: 'rgba(255, 255, 255, 0.5)', + error: '#FF4E77', + inputs: '#363F49', + liveMatchPlaylistBtnBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #363F49', + liveMatchPlaylistBtnHover: '#016BD8', + loaderAuth: '#00244F', + matchCardBackground: '#363F49', + matchHeaderBackground: '#0C2340', + modalBackground: '#1A2634', + packageBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #363F49', + playerActionBtnBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #363F49', + searchBtnHover: '#016BD8', + unsubscribeItemBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #363F49', + }, + name: 'fqtv', +} + +type Name = 'light' | 'dark' | 'lff' | 'facr' | 'tunisia' | 'fqtv' export type CustomTheme = typeof defaultTheme diff --git a/src/features/Theme/index.tsx b/src/features/Theme/index.tsx index 07c86580..88dc2e05 100644 --- a/src/features/Theme/index.tsx +++ b/src/features/Theme/index.tsx @@ -16,6 +16,7 @@ import { CustomTheme, defaultTheme, facrTheme, + fqtvTheme, lffTheme, tunisTheme, } from './config' @@ -57,6 +58,9 @@ export const Theme = ({ children }: Props) => { case ClientNames.Tunisia: setTheme(tunisTheme) break + case ClientNames.Fqtv: + setTheme(fqtvTheme) + break default: setTheme(defaultTheme) break diff --git a/src/features/UserAccount/components/PersonalInfoForm/index.tsx b/src/features/UserAccount/components/PersonalInfoForm/index.tsx index d3dd78ee..83abcbba 100644 --- a/src/features/UserAccount/components/PersonalInfoForm/index.tsx +++ b/src/features/UserAccount/components/PersonalInfoForm/index.tsx @@ -19,7 +19,7 @@ import { PrivacyWrapper, } from './styled' -const labelWidth = 76 +const labelWidth = 4.75 const { email, diff --git a/src/features/UserAccount/components/PersonalInfoForm/styled.tsx b/src/features/UserAccount/components/PersonalInfoForm/styled.tsx index 94b4a7ed..21974d7a 100644 --- a/src/features/UserAccount/components/PersonalInfoForm/styled.tsx +++ b/src/features/UserAccount/components/PersonalInfoForm/styled.tsx @@ -60,6 +60,10 @@ export const ButtonWrapper = styled.div` ${isMobileDevice ? css` flex-direction: column; ` : ''} + + @media (min-width: 1921px) { + flex-direction: row; + } ` export const PrivacyPolicyLink = styled.a` diff --git a/src/helpers/callApi/logoutIfUnauthorized.tsx b/src/helpers/callApi/logoutIfUnauthorized.tsx index d9958362..e815f1fc 100644 --- a/src/helpers/callApi/logoutIfUnauthorized.tsx +++ b/src/helpers/callApi/logoutIfUnauthorized.tsx @@ -1,12 +1,11 @@ -import * as Sentry from '@sentry/react' +// import * as Sentry from '@sentry/react' export const logoutIfUnauthorized = async (response: Response) => { /* отключили из-за доступа без авторизации */ - const body = await response.json() - if (response.status === 400) { - Sentry.captureException(body) - } + // if (response.status === 400) { + // Sentry.captureException(body) + // } if (response.status === 401 || response.status === 403) { window.dispatchEvent(new Event('FORBIDDEN_REQUEST')) @@ -16,5 +15,6 @@ export const logoutIfUnauthorized = async (response: Response) => { // eslint-disable-next-line no-console console.error(error) + const body = await response.json() return Promise.reject(body) } diff --git a/src/index.tsx b/src/index.tsx index 32b41c61..16d8318c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,24 +5,23 @@ import { } from 'react' import ReactDOM from 'react-dom' -import * as Sentry from '@sentry/react' -import { BrowserTracing } from '@sentry/react' - -import { isIOS, ENV } from 'config' - -// import { makeServer } from 'utilits/mirage/Mirage' +import { isIOS } from 'config/userAgent' +// import { makeServer } from 'utilits/mirage/server' +// import * as Sentry from '@sentry/react' +// import { BrowserTracing } from '@sentry/react' import * as serviceWorker from './serviceWorker' - -if (process.env.NODE_ENV !== 'development') { - Sentry.init({ - dsn: 'https://bbe0cdfb954644ebaf3be16bb472cc3d@sentry.insports.tv/21', - environment: ENV, - integrations: [new BrowserTracing()], - normalizeDepth: 5, - tracesSampleRate: 1.0, - }) -} +// import { ENV } from './config' + +// if (process.env.NODE_ENV !== 'development') { +// Sentry.init({ +// dsn: 'https://bbe0cdfb954644ebaf3be16bb472cc3d@sentry.insports.tv/21', +// environment: ENV, +// integrations: [new BrowserTracing()], +// normalizeDepth: 5, +// tracesSampleRate: 1.0, +// }) +// } export const App = process.env.REACT_APP_TYPE === 'auth-service' ? lazy(() => import('features/AuthServiceApp')) diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 07cb0cb4..3a42828c 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -3,7 +3,7 @@ declare namespace NodeJS { export interface ProcessEnv { - REACT_APP_CLIENT: 'instat' | 'facr' | 'lff' | 'insports' | 'india' | 'tunisia', + REACT_APP_CLIENT: 'instat' | 'facr' | 'lff' | 'insports' | 'india' | 'tunisia' | 'fqtv', REACT_APP_ENV: 'production' | 'preproduction' | 'staging', REACT_APP_STAGE: 'staging' | 'test-a' | 'test-b' | 'test-c' | 'test-d' | 'test-e' | 'test-f' | 'test-g' | 'test-h' | 'test-i' | 'test-j' | 'test', REACT_APP_TYPE: 'auth-service' | 'ott', diff --git a/src/requests/getMatches/getHomeMatches.tsx b/src/requests/getMatches/getHomeMatches.tsx index 37d382bd..35c41bd6 100644 --- a/src/requests/getMatches/getHomeMatches.tsx +++ b/src/requests/getMatches/getHomeMatches.tsx @@ -9,6 +9,7 @@ const proc = PROCEDURES.get_matches type Args = { date: string, + date_to?: string, limit: number, offset: number, timezoneOffset: number, @@ -16,6 +17,7 @@ type Args = { export const getHomeMatches = async ({ date, + date_to, limit, offset, timezoneOffset, @@ -25,6 +27,7 @@ export const getHomeMatches = async ({ const config = { body: { date: `${date} 00:00:00`, + date_to, gmt: timezoneOffset, limit, offset,