fix(#3100): user mailings page

src/config/index.tsx

@@ -9,3 +9,4 @@ export * from './devices'
 export * from './currencies'
 export * from './dashes'
 export * from './env'
+export * from './userAgent'

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,

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,
+}

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',

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 */}
                           <Switch>
+                            <Route path={`${PAGES.mailings}`}>
+                              <Mailings />
+                            </Route>
                             <Route path={PAGES.useraccount}>
                               <UserAccount />
                             </Route>

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<User>()
   const [isNewDeviceLogin, setIsNewDeviceLogin] = useState(false)
+  const [userInfo, setUserInfo] = useState<UserInfo>()
   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,
   ])

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,
   ])
 

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 = (
+      <ContentWrapper>
+        <Title>
+          <T9n t='you_are_now_unsubscribed' />
+        </Title>
+        <br />
+        <Text>
+          <T9n t='you_have_been_removed_from_the_inSports_newsletter' />
+        </Text>
+        <ButtonsBlock>
+          <SolidButton onClick={() => onUnsubscribe(false)}>
+            <T9n t='resubscribe' />
+          </SolidButton>
+          <ScLink to={PAGES.home}>
+            <OutlineButton>
+              <T9n t='go_to_the_main_page' />
+            </OutlineButton>
+          </ScLink>
+        </ButtonsBlock>
+      </ContentWrapper>
+    )
+  } else {
+    content = (
+      <ContentWrapper>
+        <Title><T9n t='unsubscribe' /></Title>
+        <br />
+        <Text>
+          <T9n t='click_unsubscribe_to_stop_receiving_inSports_emails_to' />
+          <Email>{' '}{userInfo?.email}</Email>
+        </Text>
+        <ButtonsBlock>
+          <ScLink to={PAGES.home}>
+            <SolidButton>
+              <T9n t='cancel' />
+            </SolidButton>
+          </ScLink>
+          <OutlineButton onClick={() => onUnsubscribe(true)}>
+            <T9n t='unsubscribe' />
+          </OutlineButton>
+        </ButtonsBlock>
+      </ContentWrapper>
+    )
+  }
+
+  if (isReSubscribed) {
+    content = (
+      <ContentWrapper>
+        <Title><T9n t='resubscription_successful' /></Title>
+        <br />
+        <Text>
+          <T9n t='you_have_been_resubscribed_to_inSports_newsletter' />
+        </Text>
+        <ButtonsBlock>
+          <ScLink to={PAGES.home}>
+            <SolidButton>
+              <T9n t='go_to_the_main_page' />
+            </SolidButton>
+          </ScLink>
+        </ButtonsBlock>
+      </ContentWrapper>
+    )
+  }
+
+  return (
+    <Wrapper>
+      <HeaderWrapper>
+        <Link to={PAGES.home}>
+          <MainLogo />
+        </Link>
+      </HeaderWrapper>
+      <Body>
+        {content}
+      </Body>
+      <Footer>
+        <FooterLogo />
+        <FooterRights>©inSports.tv {currentYear}</FooterRights>
+      </Footer>
+    </Wrapper>
+  )
+}
+
+export default Mailings

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;
+    `
+    : ''};
+`

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,
 }
 

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,