feat(#2428): Edit page of subsribtions
Дектерев Андрей
4 years ago
parent
423dc333a2
commit
e74c2f5303
@ -0,0 +1,100 @@ |
|||||||
|
import { ArrowLoader } from 'features/ArrowLoader' |
||||||
|
import { T9n } from 'features/T9n' |
||||||
|
|
||||||
|
import type { Subscribe } from 'requests/getUserSubscribes' |
||||||
|
|
||||||
|
import { format } from 'date-fns' |
||||||
|
|
||||||
|
import { |
||||||
|
Modal, |
||||||
|
Wrapper, |
||||||
|
Header, |
||||||
|
HeaderTitle, |
||||||
|
Body, |
||||||
|
Footer, |
||||||
|
ScSaveSubBtn, |
||||||
|
Text, |
||||||
|
ScCancelSub, |
||||||
|
ScStillCancelBtn, |
||||||
|
ScNotificationPopup, |
||||||
|
ScOkBtn, |
||||||
|
} from './styled' |
||||||
|
|
||||||
|
type Props = { |
||||||
|
cancelSub: () => void, |
||||||
|
error: string, |
||||||
|
handleModalClose: () => void, |
||||||
|
isFetching: boolean, |
||||||
|
isModalOpen: boolean, |
||||||
|
isSubCanceled: boolean, |
||||||
|
subscribe: Subscribe, |
||||||
|
} |
||||||
|
|
||||||
|
export const CancelSubPopup = (props: Props) => { |
||||||
|
const { |
||||||
|
cancelSub, |
||||||
|
error, |
||||||
|
handleModalClose, |
||||||
|
isFetching, |
||||||
|
isModalOpen, |
||||||
|
isSubCanceled, |
||||||
|
subscribe, |
||||||
|
} = props |
||||||
|
|
||||||
|
const { |
||||||
|
access_to, |
||||||
|
name, |
||||||
|
option_name, |
||||||
|
} = subscribe |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal isOpen={isModalOpen} withCloseButton={false}> |
||||||
|
<Wrapper> |
||||||
|
{isSubCanceled || error ? ( |
||||||
|
<ScNotificationPopup> |
||||||
|
<Text> |
||||||
|
<T9n t={error || 'sub_not_renewed'} /> |
||||||
|
</Text> |
||||||
|
<ScOkBtn onClick={() => handleModalClose()}>Ok</ScOkBtn> |
||||||
|
</ScNotificationPopup> |
||||||
|
) : ( |
||||||
|
<> |
||||||
|
<Header> |
||||||
|
<HeaderTitle> |
||||||
|
<T9n t='unsubscribe' /> |
||||||
|
</HeaderTitle> |
||||||
|
</Header> |
||||||
|
<Body> |
||||||
|
<Text> |
||||||
|
<T9n t='if_you_cancel' /> |
||||||
|
</Text> |
||||||
|
<ScCancelSub> |
||||||
|
{option_name} — {name} |
||||||
|
</ScCancelSub> |
||||||
|
<Text> |
||||||
|
<T9n t='after_canceling' /> |
||||||
|
|
||||||
|
{access_to && format(new Date(access_to), 'dd.MM.yyyy')} |
||||||
|
</Text> |
||||||
|
<Footer> |
||||||
|
<ScStillCancelBtn |
||||||
|
onClick={() => cancelSub()} |
||||||
|
isFetching={isFetching} |
||||||
|
> |
||||||
|
{isFetching ? ( |
||||||
|
<ArrowLoader /> |
||||||
|
) : ( |
||||||
|
<T9n t='still_cancel' /> |
||||||
|
)} |
||||||
|
</ScStillCancelBtn> |
||||||
|
<ScSaveSubBtn onClick={() => handleModalClose()}> |
||||||
|
<T9n t='save_sub' /> |
||||||
|
</ScSaveSubBtn> |
||||||
|
</Footer> |
||||||
|
</Body> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</Wrapper> |
||||||
|
</Modal> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,195 @@ |
|||||||
|
import styled, { css } from 'styled-components/macro' |
||||||
|
|
||||||
|
import { isMobileDevice } from 'config/userAgent' |
||||||
|
import { devices } from 'config/devices' |
||||||
|
|
||||||
|
import { ModalWindow } from 'features/Modal/styled' |
||||||
|
import { Modal as BaseModal } from 'features/Modal' |
||||||
|
import { Header as BaseHeader } from 'features/PopupComponents' |
||||||
|
|
||||||
|
import { ButtonSolid, ButtonOutline } from 'features/Common' |
||||||
|
|
||||||
|
export const Modal = styled(BaseModal)` |
||||||
|
background-color: rgba(0, 0, 0, 0.7); |
||||||
|
|
||||||
|
${ModalWindow} { |
||||||
|
max-width: 642px; |
||||||
|
max-height: 340px; |
||||||
|
padding-top: 40px; |
||||||
|
background-color: #333333; |
||||||
|
border-radius: 5px; |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
height: auto; |
||||||
|
top: -7vh; |
||||||
|
width: 98%; |
||||||
|
max-height: none; |
||||||
|
padding: 0; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
} |
||||||
|
` |
||||||
|
|
||||||
|
type WrapperProps = { |
||||||
|
isFetching?: boolean, |
||||||
|
} |
||||||
|
|
||||||
|
export const Wrapper = styled.div<WrapperProps>` |
||||||
|
${({ isFetching }) => ( |
||||||
|
isFetching |
||||||
|
? css`pointer-events: none;` |
||||||
|
: '' |
||||||
|
)} |
||||||
|
` |
||||||
|
|
||||||
|
export const Header = styled(BaseHeader)` |
||||||
|
height: auto; |
||||||
|
justify-content: center; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
@media ${devices.mobile}{ |
||||||
|
padding-top: 33px; |
||||||
|
} |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const HeaderTitle = styled.span` |
||||||
|
font-weight: 700; |
||||||
|
font-size: 24px; |
||||||
|
line-height: 24px; |
||||||
|
color: #FFFFFF; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
font-size: 14px; |
||||||
|
line-height: 20px; |
||||||
|
|
||||||
|
@media (orientation: landscape) { |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const Body = styled.div` |
||||||
|
padding: 20px 40px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
font-weight: normal; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 27px; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
padding: 13px 25px 0; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
@media (orientation: landscape){ |
||||||
|
padding: 22px 23px 0 29px; |
||||||
|
} |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const Footer = styled.div` |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
margin-top: 25px; |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
flex-direction: column; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScSaveSubBtn = styled(ButtonSolid)` |
||||||
|
max-width: 270px; |
||||||
|
border-radius: 5px; |
||||||
|
font-weight: 600; |
||||||
|
height: 50px; |
||||||
|
font-size: 20px; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
max-width: none; |
||||||
|
width: 100%; |
||||||
|
min-height: 42px; |
||||||
|
margin-bottom: 20px; |
||||||
|
|
||||||
|
@media (orientation: landscape){ |
||||||
|
width: 290px; |
||||||
|
min-height: 42px; |
||||||
|
} |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScStillCancelBtn = styled(ButtonOutline)<{isFetching: boolean}>` |
||||||
|
max-width: 270px; |
||||||
|
height: 50px; |
||||||
|
border-radius: 5px; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 20px; |
||||||
|
margin-right: 24px; |
||||||
|
|
||||||
|
${({ isFetching }) => (isFetching ? 'border: none' : '')}; |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
max-width: none; |
||||||
|
margin-bottom: 20px; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
@media (orientation: landscape){ |
||||||
|
width: 290px; |
||||||
|
} |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const Text = styled.span` |
||||||
|
display: block; |
||||||
|
color: rgba(255, 255, 255, 0.7); |
||||||
|
font-weight: 500; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 20px; |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
font-size: 13px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScCancelSub = styled.div` |
||||||
|
max-width: 562px; |
||||||
|
height: 59px; |
||||||
|
background: linear-gradient( |
||||||
|
180deg, |
||||||
|
rgba(255, 255, 255, 0.1) 0%, |
||||||
|
rgba(255, 255, 255, 0) 100% |
||||||
|
), |
||||||
|
#3f3f3f; |
||||||
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); |
||||||
|
border-radius: 2px; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 22px; |
||||||
|
padding: 20px; |
||||||
|
margin: 20px 0; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScNotificationPopup = styled.div` |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScOkBtn = styled(ScSaveSubBtn)` |
||||||
|
max-width: 70px; |
||||||
|
margin-top: 40px; |
||||||
|
` |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
import { useEffect } from 'react' |
||||||
|
|
||||||
|
import { useCardsStore } from 'features/CardsStore' |
||||||
|
import { CardStep } from 'features/BuyMatchPopup/components/CardStep' |
||||||
|
|
||||||
|
import { Modal } from './styled' |
||||||
|
|
||||||
|
type Props = { |
||||||
|
changeCardPopupOpen: boolean, |
||||||
|
setChangeCardPopupOpen: (open: boolean) => void, |
||||||
|
} |
||||||
|
|
||||||
|
export const ChangeCardPopup = ({ |
||||||
|
changeCardPopupOpen, |
||||||
|
setChangeCardPopupOpen, |
||||||
|
}: Props) => { |
||||||
|
const { fetchCards } = useCardsStore() |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
fetchCards() |
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []) |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal |
||||||
|
isOpen={changeCardPopupOpen} |
||||||
|
close={() => setChangeCardPopupOpen(false)} |
||||||
|
withCloseButton |
||||||
|
> |
||||||
|
<CardStep |
||||||
|
title='change_card' |
||||||
|
btnName='change' |
||||||
|
/> |
||||||
|
</Modal> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import styled, { css } from 'styled-components/macro' |
||||||
|
import { ModalWindow } from 'features/Modal/styled' |
||||||
|
import { Modal as BaseModal } from 'features/Modal' |
||||||
|
import { isMobileDevice } from 'config/userAgent' |
||||||
|
|
||||||
|
export const Modal = styled(BaseModal)` |
||||||
|
background-color: rgba(0, 0, 0, 0.7); |
||||||
|
|
||||||
|
${ModalWindow} { |
||||||
|
padding: 0; |
||||||
|
background-color: #333333; |
||||||
|
border-radius: 5px; |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
width: calc(100vw - 60px); |
||||||
|
@media screen and (orientation: landscape){ |
||||||
|
max-width: calc(100vw - 80px); |
||||||
|
height: calc(100vh - 20px); |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
} |
||||||
|
` |
||||||
@ -0,0 +1,62 @@ |
|||||||
|
import { useEffect, useState } from 'react' |
||||||
|
|
||||||
|
import { getUserSubscribes, Subscribe } from 'requests/getUserSubscribes' |
||||||
|
import { cancelSubscribe } from 'requests/cancelSubscribe' |
||||||
|
|
||||||
|
import { useAuthStore } from 'features/AuthStore' |
||||||
|
|
||||||
|
export const useUserSubscribes = () => { |
||||||
|
const [selectedSubscribe, setSelectedSubscribe] = useState<Subscribe>({} as Subscribe) |
||||||
|
const [subscribes, setSubscribes] = useState<any>([]) |
||||||
|
const [isCancelPopupOpen, setIsCancelPopupOpen] = useState(false) |
||||||
|
const [changeCardPopupOpen, setChangeCardPopupOpen] = useState(false) |
||||||
|
const [isSubCanceled, setSubCanceled] = useState(false) |
||||||
|
const [isFetching, setIsFetching] = useState(false) |
||||||
|
const [error, setError] = useState('') |
||||||
|
const { user } = useAuthStore() |
||||||
|
|
||||||
|
const handleClose = () => { |
||||||
|
setIsCancelPopupOpen(false) |
||||||
|
setChangeCardPopupOpen(false) |
||||||
|
setError('') |
||||||
|
} |
||||||
|
|
||||||
|
const cancelSub = async () => { |
||||||
|
try { |
||||||
|
setIsFetching(true) |
||||||
|
if (selectedSubscribe?.sub_id) { |
||||||
|
await cancelSubscribe(selectedSubscribe?.sub_id) |
||||||
|
setSubCanceled(true) |
||||||
|
} |
||||||
|
} catch { |
||||||
|
setError('error_payment_unsuccessful') |
||||||
|
} |
||||||
|
setIsFetching(false) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
(async () => { |
||||||
|
setIsFetching(true) |
||||||
|
const allSubscribes = (await (getUserSubscribes(user?.profile?.email || ''))) |
||||||
|
.sort((a, b) => Date.parse(b.access_to) - Date.parse(a.access_to)) |
||||||
|
setSubscribes(allSubscribes) |
||||||
|
setIsFetching(false) |
||||||
|
})() |
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []) |
||||||
|
|
||||||
|
return { |
||||||
|
cancelSub, |
||||||
|
changeCardPopupOpen, |
||||||
|
error, |
||||||
|
handleClose, |
||||||
|
isCancelPopupOpen, |
||||||
|
isFetching, |
||||||
|
isSubCanceled, |
||||||
|
selectedSubscribe, |
||||||
|
setChangeCardPopupOpen, |
||||||
|
setIsCancelPopupOpen, |
||||||
|
setSelectedSubscribe, |
||||||
|
subscribes, |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
export const Edit = (): JSX.Element => ( |
||||||
|
<svg |
||||||
|
xmlns='http://www.w3.org/2000/svg' |
||||||
|
width='22' |
||||||
|
height='23' |
||||||
|
fill='true' |
||||||
|
viewBox='0 0 22 23' |
||||||
|
> |
||||||
|
<path |
||||||
|
fill='true' |
||||||
|
fillOpacity='0.3' |
||||||
|
d='M13.705 5.002L17.27 8.52 5.799 20.147l-4.017.507.452-4.023L13.705 5.002zM16.183 2.49a2.504 2.504 0 013.565 3.516L18.53 7.24l-3.565-3.517 1.217-1.234z' |
||||||
|
/> |
||||||
|
</svg> |
||||||
|
) |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import { API_ROOT } from 'config' |
||||||
|
import { callApi } from 'helpers' |
||||||
|
|
||||||
|
export const cancelSubscribe = (id: number): Promise<unknown> => { |
||||||
|
const config = { |
||||||
|
body: { |
||||||
|
id, |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
return callApi({ |
||||||
|
config, |
||||||
|
url: `${API_ROOT}/account/subscription/cancel`, |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
import { DATA_URL, PROCEDURES } from 'config' |
||||||
|
import { callApi } from 'helpers' |
||||||
|
|
||||||
|
const proc = PROCEDURES.get_user_subscribes |
||||||
|
|
||||||
|
export type Subscribe = { |
||||||
|
access_to: string, |
||||||
|
c_payment_service: number, |
||||||
|
c_subscription_option: number, |
||||||
|
card: string, |
||||||
|
currency_id: number, |
||||||
|
dt_next_billing: string | null, |
||||||
|
is_access: boolean, |
||||||
|
is_active: boolean, |
||||||
|
iso: string, |
||||||
|
name: string, |
||||||
|
option_name: string, |
||||||
|
option_sys_name: string, |
||||||
|
payment_type: string, |
||||||
|
price: number, |
||||||
|
purchase_type: string, |
||||||
|
sub_external_id: number | null, |
||||||
|
sub_id: number | null, |
||||||
|
sub_info: Array<Team>, |
||||||
|
ts_payment: string, |
||||||
|
} |
||||||
|
|
||||||
|
type Team = { |
||||||
|
id: number, |
||||||
|
name_en: string, |
||||||
|
name_ru: string, |
||||||
|
} |
||||||
|
|
||||||
|
type Subscribes = Array<Subscribe> |
||||||
|
|
||||||
|
export const getUserSubscribes = ( |
||||||
|
_p_email: string, |
||||||
|
) |
||||||
|
: Promise<Subscribes> => { |
||||||
|
const config = { |
||||||
|
body: { |
||||||
|
params: { |
||||||
|
_p_email, |
||||||
|
}, |
||||||
|
proc, |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
return callApi({ |
||||||
|
config, |
||||||
|
url: DATA_URL, |
||||||
|
}) |
||||||
|
} |
||||||
Loading…
Reference in new issue