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 ? (
+
+ ) : (
+
+ )}