diff --git a/src/config/index.tsx b/src/config/index.tsx index 4a2c8d17..87f53711 100644 --- a/src/config/index.tsx +++ b/src/config/index.tsx @@ -9,3 +9,4 @@ export * from './devices' export * from './currencies' export * from './dashes' export * from './env' +export * from './userAgent' diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index 8bb9b918..5d6e1344 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -2,6 +2,7 @@ import { paymentLexics } from './payment' import { proceduresLexics } from './procedures' import { publicLexics } from './public' import { highlightsPageLexic } from './highlightsPageLexic' +import { mailingsLexics } from './mailings' const matchPopupLexics = { actions: 1020, @@ -178,6 +179,7 @@ export const indexLexics = { ...filterPopup, ...confirmPopup, ...highlightsPageLexic, + ...mailingsLexics, ...preferencesPopupLexics, ...proceduresLexics, ...matchPopupLexics, diff --git a/src/config/lexics/mailings.tsx b/src/config/lexics/mailings.tsx new file mode 100644 index 00000000..ac82c7a9 --- /dev/null +++ b/src/config/lexics/mailings.tsx @@ -0,0 +1,10 @@ +export const mailingsLexics = { + cancel: 732, + click_unsubscribe_to_stop_receiving_inSports_emails_to: 19937, + go_to_the_main_page: 19943, + resubscribe: 19940, + resubscription_successful: 19941, + you_are_now_unsubscribed: 19938, + you_have_been_removed_from_the_inSports_newsletter: 19939, + you_have_been_resubscribed_to_inSports_newsletter: 19942, +} diff --git a/src/config/pages.tsx b/src/config/pages.tsx index 6234aa9b..276fe45c 100644 --- a/src/config/pages.tsx +++ b/src/config/pages.tsx @@ -2,6 +2,7 @@ export const PAGES = { about_the_project: 'https://instatsport.com/InStatTV/ott_platform', highlights: '/highlights', home: '/', + mailings: '/useraccount/mailings', match: '/matches', matomoInstatBaseUrl: 'https://matomo.instat.tv/', player: '/players', diff --git a/src/features/App/AuthenticatedApp.tsx b/src/features/App/AuthenticatedApp.tsx index b25f8484..338a1a86 100644 --- a/src/features/App/AuthenticatedApp.tsx +++ b/src/features/App/AuthenticatedApp.tsx @@ -39,6 +39,7 @@ const SystemSettings = lazy(() => import('features/SystemSettings')) const HighlightsPage = lazy(() => import('pages/HighlightsPage')) const ThanksPage = lazy(() => import('pages/ThanksPage')) +const Mailings = lazy(() => import('pages/Mailings')) export const AuthenticatedApp = () => { useLexicsConfig(indexLexics) @@ -62,6 +63,9 @@ export const AuthenticatedApp = () => { {/* в Switch как прямой children можно рендерить только Route или Redirect */} + + + diff --git a/src/features/AuthStore/hooks/useAuth.tsx b/src/features/AuthStore/hooks/useAuth.tsx index 5fd9bd43..cf3d1dea 100644 --- a/src/features/AuthStore/hooks/useAuth.tsx +++ b/src/features/AuthStore/hooks/useAuth.tsx @@ -26,7 +26,7 @@ import { useLocalStore, useToggle } from 'hooks' import { useLexicsStore } from 'features/LexicsStore' import { queryParamStorage } from 'features/QueryParamsStorage' -import { getUserInfo } from 'requests/getUserInfo' +import { getUserInfo, UserInfo } from 'requests/getUserInfo' import { checkDevice, FailedResponse } from 'requests/checkDevice' import { getClientSettings, needCheckNewDeviсe } from '../helpers' @@ -41,6 +41,7 @@ export const useAuth = () => { } = useToggle(true) const [user, setUser] = useState() const [isNewDeviceLogin, setIsNewDeviceLogin] = useState(false) + const [userInfo, setUserInfo] = useState() const userManager = useMemo(() => new UserManager(getClientSettings()), []) const login = useCallback(async () => ( @@ -205,6 +206,9 @@ export const useAuth = () => { const fetchUserInfo = useCallback(async () => { const userInfoFetched = await getUserInfo() + + setUserInfo(userInfoFetched) + userInfoFetched.language.iso && changeLang(userInfoFetched.language.iso) }, [changeLang]) @@ -215,15 +219,19 @@ export const useAuth = () => { }, [fetchUserInfo, user]) const auth = useMemo(() => ({ + fetchUserInfo, isNewDeviceLogin, loadingUser, login, logout, user, + userInfo, }), [ + fetchUserInfo, isNewDeviceLogin, logout, user, + userInfo, login, loadingUser, ]) diff --git a/src/features/UserAccount/components/PersonalInfoForm/hooks/useUserInfo.tsx b/src/features/UserAccount/components/PersonalInfoForm/hooks/useUserInfo.tsx index 7d248f1b..de9662c4 100644 --- a/src/features/UserAccount/components/PersonalInfoForm/hooks/useUserInfo.tsx +++ b/src/features/UserAccount/components/PersonalInfoForm/hooks/useUserInfo.tsx @@ -9,6 +9,7 @@ import { AUTH_SERVICE } from 'config/routes' import { useForm } from 'features/FormStore' import { useLexicsStore } from 'features/LexicsStore' +import { useAuthStore } from 'features/AuthStore' import { SaveUserInfo } from 'requests' @@ -29,6 +30,7 @@ export type Props = { export const useUserInfo = ({ loader, onSubmit }: Props) => { const { languageList, translate } = useLexicsStore() + const { userInfo } = useAuthStore() const { hasChanges, readFormError, @@ -72,6 +74,7 @@ export const useUserInfo = ({ loader, onSubmit }: Props) => { cityId, countryId, firstname, + isUnsubscribed: userInfo?.is_unsubscribed!, language_id, lastname, phone, @@ -84,6 +87,7 @@ export const useUserInfo = ({ loader, onSubmit }: Props) => { readTrimmedValue, languageList, readNumberValue, + userInfo, validateForm, ]) diff --git a/src/pages/Mailings/index.tsx b/src/pages/Mailings/index.tsx new file mode 100644 index 00000000..16742d39 --- /dev/null +++ b/src/pages/Mailings/index.tsx @@ -0,0 +1,160 @@ +import { useState } from 'react' + +import { Link } from 'react-router-dom' + +import { format } from 'date-fns' + +import { PAGES } from 'config' + +import { saveUserInfo } from 'requests' + +import { T9n } from 'features/T9n' +import { useAuthStore } from 'features/AuthStore' + +import { + Body, + ButtonsBlock, + ContentWrapper, + Email, + Footer, + FooterLogo, + FooterRights, + HeaderWrapper, + MainLogo, + OutlineButton, + ScLink, + SolidButton, + Text, + Title, + Wrapper, +} from './styled' + +const Mailings = () => { + const { fetchUserInfo, userInfo } = useAuthStore() + const [isReSubscribed, setIsReSubscribed] = useState(false) + + if (!userInfo) return null + + const { + address_line1, + address_line2, + city, + cityId, + country, + firstname, + is_unsubscribed, + language, + lastname, + phone, + postal_code, + region, + } = { ...userInfo } + + const currentYear = format(new Date(), 'Y') + + const onUnsubscribe = async (isUnsubscribed: boolean) => { + if (!isUnsubscribed) { + setIsReSubscribed(true) + } + + await saveUserInfo({ + address_line1, + address_line2, + city, + cityId, + countryId: country?.id!, + firstname, + isUnsubscribed, + language_id: language?.id, + lastname, + phone, + postalCode: postal_code, + region, + }) + await fetchUserInfo() + } + + let content + if (is_unsubscribed) { + content = ( + + + <T9n t='you_are_now_unsubscribed' /> + +
+ + + + + onUnsubscribe(false)}> + + + + + + + + + + ) + } else { + content = ( + + <T9n t='unsubscribe' /> +
+ + + {' '}{userInfo?.email} + + + + + + + + onUnsubscribe(true)}> + + + + + ) + } + + if (isReSubscribed) { + content = ( + + <T9n t='resubscription_successful' /> +
+ + + + + + + + + + + + ) + } + + return ( + + + + + + + + {content} + + + + ) +} + +export default Mailings diff --git a/src/pages/Mailings/styled.tsx b/src/pages/Mailings/styled.tsx new file mode 100644 index 00000000..5d07714b --- /dev/null +++ b/src/pages/Mailings/styled.tsx @@ -0,0 +1,181 @@ +import { Link } from 'react-router-dom' + +import styled, { css } from 'styled-components/macro' + +import { isMobileDevice, devices } from 'config' + +import { Logo } from 'features/Logo' +import { ButtonOutline, ButtonSolid } from 'features/Common' + +export const Wrapper = styled.div` + width: 100vw; + height: 100vh; + color: white; + display: flex; + flex-direction: column; + justify-content: space-between; +` + +export const HeaderWrapper = styled.div` + background: rgb(19, 21, 27); + opacity: 0.7; + padding: 20px 0; + padding-left: 20%; + width: 100%; + + @media ${devices.laptop} { + padding-left: 5%; + } + + ${isMobileDevice + ? css` + display: none; + ` + : ''}; +` + +export const MainLogo = styled(Logo)` + height: 26px; + width: 80px; + display: inline-block; +` + +export const Body = styled.div` + height: 100%; + display: flex; + justify-content: center; + text-align: center; + margin-top: 10%; + + ${isMobileDevice + ? css` + overflow: scroll; + padding: 0 30px; + align-items: center; + margin: 0; + ` + : ''}; +` +export const ContentWrapper = styled.div`` + +export const Title = styled.div` + font-size: 2rem; + font-weight: 600; + + ${isMobileDevice + ? css` + font-size: 32px; + ` + : ''}; +` + +export const Email = styled.span` + font-weight: 600; + + ${isMobileDevice + ? css` + font-size: 15px; + ` + : ''}; +` + +export const Text = styled.span` + line-height: 200%; + + ${isMobileDevice + ? css` + font-size: 15px; + ` + : ''}; +` + +export const ButtonsBlock = styled.div` + display: flex; + align-items: center; + margin-top: 40px; + justify-content: center; + + ${isMobileDevice + ? css` + flex-wrap: wrap; + ` + : ''}; +` + +export const ScLink = styled(Link)` + ${isMobileDevice + ? css` + width: 100%; + ` + : ''}; +` + +export const SolidButton = styled(ButtonSolid)` + border-radius: 5px; + width: 15rem; + margin-right: 20px; + + ${isMobileDevice + ? css` + width: 100%; + margin: 0 0 10px; + height: 44px; + ` + : ''}; +` + +export const OutlineButton = styled(ButtonOutline)` + border-radius: 5px; + width: 15rem; + font-weight: 600; + + ${isMobileDevice + ? css` + width: 100%; + height: 44px; + ` + : ''}; +` + +export const Footer = styled.div` + font-size: 14px; + background-color: black; + padding: 16px 0; + padding-left: 20%; + width: 100%; + @media ${devices.laptop} { + padding-left: 5%; + } + @media ${devices.mobile} { + padding-left: 35px; + } + ${isMobileDevice + ? css` + display: flex; + padding: 15px 35px; + justify-content: space-between; + align-items: center; + ` + : ''}; +` + +export const FooterLogo = styled(Logo)` + display: none; + ${isMobileDevice + ? css` + display: block; + width: 48px; + height: 11px; + opacity: .4; + ` + : ''}; +` + +export const FooterRights = styled.div` + opacity: .5; + ${isMobileDevice + ? css` + font-size: 12px; + ` + : ''}; +` diff --git a/src/requests/getUserInfo.tsx b/src/requests/getUserInfo.tsx index 220b4753..db8c30a2 100644 --- a/src/requests/getUserInfo.tsx +++ b/src/requests/getUserInfo.tsx @@ -16,7 +16,9 @@ export type UserInfo = { name_eng: string, name_rus: string, }, + email: string, firstname: string | null, + is_unsubscribed: boolean | null, language: { id: number | null, iso: string | null, @@ -26,6 +28,7 @@ export type UserInfo = { lastname: string | null, password: string | null, phone: string | null, + postal_code: number | null, region: string | null, } diff --git a/src/requests/saveUserInfo.tsx b/src/requests/saveUserInfo.tsx index 3c8c9f2f..65964d29 100644 --- a/src/requests/saveUserInfo.tsx +++ b/src/requests/saveUserInfo.tsx @@ -13,6 +13,7 @@ export type SaveUserInfo = { cityId: number | null, countryId: number | null, firstname: string | null, + isUnsubscribed: boolean | null, language_id: number | null, lastname: string | null, phone: string | null, @@ -37,6 +38,7 @@ export const saveUserInfo = async ({ cityId, countryId, firstname, + isUnsubscribed, language_id, lastname, phone, @@ -52,6 +54,7 @@ export const saveUserInfo = async ({ _p_city_id: cityId, _p_country_id: countryId, _p_firstname: firstname, + _p_is_unsubscribed: isUnsubscribed, _p_language_id: language_id, _p_lastname: lastname, _p_phone: phone,