From 91fca9f16fe632a82e3fff022fd78f163d2ae7b8 Mon Sep 17 00:00:00 2001 From: Andrei Dekterev Date: Thu, 21 Jul 2022 17:36:50 +0400 Subject: [PATCH] feat(#2478): add smart banner for android --- public/images/icon-instattv-smart-banner.svg | 24 +++++++++ src/components/SmartBanner/index.tsx | 55 +++++++++++++++++++ src/components/SmartBanner/styled.tsx | 56 ++++++++++++++++++++ src/features/HeaderMobile/index.tsx | 37 +++++++++---- src/features/HomePage/hooks.tsx | 16 +++++- src/features/HomePage/index.tsx | 12 ++++- 6 files changed, 187 insertions(+), 13 deletions(-) create mode 100644 public/images/icon-instattv-smart-banner.svg create mode 100644 src/components/SmartBanner/index.tsx create mode 100644 src/components/SmartBanner/styled.tsx diff --git a/public/images/icon-instattv-smart-banner.svg b/public/images/icon-instattv-smart-banner.svg new file mode 100644 index 00000000..0c777173 --- /dev/null +++ b/public/images/icon-instattv-smart-banner.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/SmartBanner/index.tsx b/src/components/SmartBanner/index.tsx new file mode 100644 index 00000000..5567c2e8 --- /dev/null +++ b/src/components/SmartBanner/index.tsx @@ -0,0 +1,55 @@ +import { Icon } from 'features/Icon' + +import { add } from 'date-fns' + +import { + ScBannerWrap, + ScIconLogo, + ScTitleWrap, + ScTitle, + ScNameOfCompany, + ScDescribe, + ScBtnDownload, + ScIconWrap, +} from './styled' + +type SmartBannerProps = { + setIsOpenDownload: (open: boolean) => void, +} + +export const SmartBanner = ({ setIsOpenDownload }: SmartBannerProps) => ( + + + { + localStorage.setItem( + 'dateLastOpenSmartBanner', + JSON.stringify(add(new Date(), { days: 1 })), + ) + setIsOpenDownload(false) + }} + /> + + + + official InStat TV app + InStat TV limited + InStat – the Home of Sports Streaming + + { + localStorage.setItem( + 'dateLastOpenSmartBanner', + JSON.stringify(add(new Date(), { days: 1 })), + ) + setIsOpenDownload(false) + }} + > + Download + + +) diff --git a/src/components/SmartBanner/styled.tsx b/src/components/SmartBanner/styled.tsx new file mode 100644 index 00000000..d05f041e --- /dev/null +++ b/src/components/SmartBanner/styled.tsx @@ -0,0 +1,56 @@ +import styled from 'styled-components/macro' + +export const ScBannerWrap = styled.div` + width: 100%; + height: 78px; + padding: 8px; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + background: #f2f2f2; + z-index: 10; + + > * { + padding: 0 4px; + } +` + +export const ScIconLogo = styled.img`` + +export const ScTitleWrap = styled.div` + display: flex; + flex-direction: column; + font-weight: 400; + line-height: 24px; + text-transform: capitalize; + letter-spacing: 0.02em; + justify-content: center; +` + +export const ScTitle = styled.span` + font-size: 14px; +` + +export const ScNameOfCompany = styled.span` + font-size: 12px; + color: rgba(0, 0, 0, 0.7); +` +export const ScDescribe = styled.span` + font-size: 10px; + line-height: 12px; + color: rgba(0, 0, 0, 0.5); +` + +export const ScBtnDownload = styled.span` + color: #0076ff; + font-weight: 400; + font-size: 14px; + line-height: 24px; +` + +export const ScIconWrap = styled.div` + color: #747474; +` diff --git a/src/features/HeaderMobile/index.tsx b/src/features/HeaderMobile/index.tsx index d35c5d81..dbced6d9 100644 --- a/src/features/HeaderMobile/index.tsx +++ b/src/features/HeaderMobile/index.tsx @@ -1,10 +1,13 @@ import { useRecoilValue } from 'recoil' +import { isIOS } from 'config/userAgent' + import { HeaderMenu } from 'features/HeaderMenu' import { DateFilter } from 'features/HeaderFilters' import { ScoreSwitch } from 'features/MatchSwitches' import { SportsFilter } from 'features/SportsFilter' import { isSportFilterShownAtom } from 'features/HomePage/Atoms/HomePageAtoms' +import { SmartBanner } from 'components/SmartBanner' import { HeaderStyled, @@ -12,19 +15,31 @@ import { ScSportsWrapper, } from './styled' -export const HeaderMobile = () => { +type HeaderBannerProps = { + isOpenDownload: boolean, + setIsOpenDownload: (open: boolean) => void, +} + +export const HeaderMobile = ({ isOpenDownload, setIsOpenDownload }: HeaderBannerProps) => { const isSportFilterShown = useRecoilValue(isSportFilterShownAtom) return ( - - - - - {isSportFilterShown ? : null} - - - - - + <> + { + isOpenDownload + && !isIOS + && + } + + + + + {isSportFilterShown ? : null} + + + + + + ) } diff --git a/src/features/HomePage/hooks.tsx b/src/features/HomePage/hooks.tsx index 004f7e24..c76cbfdf 100644 --- a/src/features/HomePage/hooks.tsx +++ b/src/features/HomePage/hooks.tsx @@ -3,7 +3,8 @@ import { useEffect, useState, } from 'react' -import format from 'date-fns/format' + +import { format } from 'date-fns' import { useSetRecoilState } from 'recoil' @@ -35,6 +36,7 @@ const getDate = (date: Date) => format(date, 'yyyy-MM-dd') export const useHomePage = () => { const { user } = useAuthStore() const { selectedDate } = useHeaderFiltersStore() + const [isOpenDownload, setIsOpenDownload] = useState(false) const [isShowConfirmPopup, setIsShowConfirmPopup] = useState(false) const setIsSportFilterShown = useSetRecoilState(isSportFilterShownAtom) @@ -53,6 +55,16 @@ export const useHomePage = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []) + useEffect(() => { + const dateLastOpenSmartBanner = localStorage.getItem('dateLastOpenSmartBanner') + + if (!dateLastOpenSmartBanner + || Date.parse(JSON.parse(dateLastOpenSmartBanner)) < Date.parse(new Date().toISOString()) + ) { + setIsOpenDownload(true) + } + }, []) + const fetchMatches = useCallback( (limit: number, offset: number) => getHomeMatches({ date: getDate(selectedDate), @@ -72,6 +84,8 @@ export const useHomePage = () => { return { fetchMatches, handleCloseConfirmPopup, + isOpenDownload, isShowConfirmPopup, + setIsOpenDownload, } } diff --git a/src/features/HomePage/index.tsx b/src/features/HomePage/index.tsx index e5cd032d..6f9fd6ca 100644 --- a/src/features/HomePage/index.tsx +++ b/src/features/HomePage/index.tsx @@ -26,11 +26,21 @@ const Home = () => { const { fetchMatches, handleCloseConfirmPopup, + isOpenDownload, isShowConfirmPopup, + setIsOpenDownload, } = useHomePage() + return ( - {isMobileDevice ? :
} + {isMobileDevice ? ( + + ) : ( +
+ )}