fix(#3100): user mailings page
parent
ef3e40de61
commit
77784a4a5a
@ -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, |
||||
} |
||||
@ -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 |
||||
@ -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; |
||||
` |
||||
: ''}; |
||||
` |
||||
Loading…
Reference in new issue