From e96760b3db65230ba74cdb06c98a12cb60292ab7 Mon Sep 17 00:00:00 2001 From: Andrei Dekterev Date: Wed, 29 Jun 2022 21:47:02 +0700 Subject: [PATCH] feat(#2526): add popup thanks and method for payment --- src/config/lexics/payment.tsx | 3 + .../components/Form/hooks/index.tsx | 11 +-- src/libs/index.ts | 1 + src/libs/objects/Check.tsx | 56 ++++++++++++++++ .../components/FormHighlights/hooks.tsx | 16 +++-- .../components/FormHighlights/index.tsx | 7 +- .../components/FormHighlights/styled.tsx | 12 ++++ .../components/MatchesHighlights/index.tsx | 6 +- .../components/MatchesHighlights/styled.tsx | 6 ++ .../components/PriceInfo/index.tsx | 2 +- .../components/PriceInfo/styled.tsx | 22 ++++++ .../components/ThanksPopup/index.tsx | 41 ++++++++++++ .../components/ThanksPopup/styled.tsx | 67 +++++++++++++++++++ src/pages/HighlightsPage/index.tsx | 9 ++- .../HighlightsPage/storeHighlightsAtoms.tsx | 16 +++-- src/pages/HighlightsPage/styled.tsx | 9 +++ src/requests/onePayment.tsx | 18 +++-- 17 files changed, 275 insertions(+), 27 deletions(-) create mode 100644 src/libs/objects/Check.tsx create mode 100644 src/pages/HighlightsPage/components/ThanksPopup/index.tsx create mode 100644 src/pages/HighlightsPage/components/ThanksPopup/styled.tsx diff --git a/src/config/lexics/payment.tsx b/src/config/lexics/payment.tsx index 79f6124b..40921115 100644 --- a/src/config/lexics/payment.tsx +++ b/src/config/lexics/payment.tsx @@ -19,6 +19,8 @@ export const paymentLexics = { error_payment_unsuccessful: 14446, if_you_cancel: 18189, next_payment: 18183, + notify_by_email: 18366, + order_received: 18365, payment_date: 15603, payment_method: 2010, save_sub: 18190, @@ -26,6 +28,7 @@ export const paymentLexics = { sub_not_renewed: 15060, subscription_plan: 18182, sum: 838, + thank_you: 6579, unsubscribe: 18188, using_payment: 18187, watch_match: 18199, diff --git a/src/features/AddCardForm/components/Form/hooks/index.tsx b/src/features/AddCardForm/components/Form/hooks/index.tsx index faa23af8..7de52d65 100644 --- a/src/features/AddCardForm/components/Form/hooks/index.tsx +++ b/src/features/AddCardForm/components/Form/hooks/index.tsx @@ -16,7 +16,7 @@ import { useElements, } from '@stripe/react-stripe-js' -import { useRecoilValue } from 'recoil' +import { useRecoilState } from 'recoil' import toUpper from 'lodash/toUpper' @@ -85,7 +85,7 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => { const [inputStates, setInputStates] = useObjectState(initialState) const [errorMessage, setErrorMessage] = useState('') const [loader, setLoader] = useState(false) - const dataFormHighlights = useRecoilValue(dataForPayHighlights) + const [dataHighlights, setDataHighlights] = useRecoilState(dataForPayHighlights) console.log('inputStates', inputStates) @@ -183,8 +183,11 @@ console.log('inputStates', inputStates) setErrorMessage('') onePayment({ cardId: defaultCard?.id, - item: { ...dataFormHighlights }, - }) + order: { ...dataHighlights.data }, + }).then(() => setDataHighlights((prev) => ({ + ...prev, + isOpenThanksPopup: true, + }))) return } diff --git a/src/libs/index.ts b/src/libs/index.ts index 4bfcf4f7..2c3e7169 100644 --- a/src/libs/index.ts +++ b/src/libs/index.ts @@ -2,6 +2,7 @@ export { Arrow } from './objects/Arrow' export { Date } from './objects/Date' export { Edit } from './objects/Edit' export { Calendar } from './objects/Calendar' +export { Check } from './objects/Check' export { Basketball } from './objects/Basketball' export { Football } from './objects/Football' export { Hockey } from './objects/Hockey' diff --git a/src/libs/objects/Check.tsx b/src/libs/objects/Check.tsx new file mode 100644 index 00000000..1b07d028 --- /dev/null +++ b/src/libs/objects/Check.tsx @@ -0,0 +1,56 @@ +export const Check = () => ( + + + + + + + + + + + + + + + + + +) diff --git a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx b/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx index 577f635d..2a2aa07e 100644 --- a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx +++ b/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx @@ -220,12 +220,16 @@ export const useHighlightsForm = () => { useEffect(() => { if (formState?.selectedPlayer?.id) { setDatahighlights({ - duration: Number(formState?.duration), - lang: 'en', - matches: playerMatches?.map((match) => match.id), - player_id: formState?.selectedPlayer?.id, - sport_id: formState?.sport.id, - stats: Boolean(formState?.stats?.id), + data: { + duration: Number(formState?.duration), + lang: 'en', + matches: playerMatches?.map((match) => match.id), + player_id: formState?.selectedPlayer?.id, + price: playerMatches?.length * 25, + sport_id: formState?.sport.id, + stats: Boolean(formState?.stats?.id), + }, + isOpenThanksPopup: false, }) } }, [formState, playerMatches]) diff --git a/src/pages/HighlightsPage/components/FormHighlights/index.tsx b/src/pages/HighlightsPage/components/FormHighlights/index.tsx index 631246a2..25035e03 100644 --- a/src/pages/HighlightsPage/components/FormHighlights/index.tsx +++ b/src/pages/HighlightsPage/components/FormHighlights/index.tsx @@ -3,6 +3,8 @@ import { Input } from 'features/Common' import { T9n } from 'features/T9n' import { Icon } from 'features/Icon' +import { isMobileDevice } from 'config/userAgent' + import { useHighlightsForm, } from './hooks' @@ -16,10 +18,12 @@ import { ScInfoBlock, } from './styled' +import { PriceInfoType, PriceInfo } from '../PriceInfo' + const labelWidth = 180 const wrapperHeight = 50 -export const FormHighlights = () => { +export const FormHighlights = ({ price }: PriceInfoType) => { const { formRef, formState: { @@ -50,6 +54,7 @@ export const FormHighlights = () => { return ( + {isMobileDevice ? : null} diff --git a/src/pages/HighlightsPage/components/FormHighlights/styled.tsx b/src/pages/HighlightsPage/components/FormHighlights/styled.tsx index f919e127..2893a909 100644 --- a/src/pages/HighlightsPage/components/FormHighlights/styled.tsx +++ b/src/pages/HighlightsPage/components/FormHighlights/styled.tsx @@ -8,6 +8,12 @@ export const ScWrapper = styled.div` flex-direction: column; color: #FFFFFF; padding: 0 80px 0 40px; + + ${isMobileDevice + ? css` + padding: 5px; + ` + : ''}; ` export const ScInfoBlock = styled.div` display: flex; @@ -63,4 +69,10 @@ export const ScForm = styled.form` max-height: 200px; } } + + ${isMobileDevice + ? css` + max-width: 100%; + ` + : ''}; ` diff --git a/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx b/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx index aef37351..cec6dab2 100644 --- a/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx +++ b/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx @@ -3,6 +3,8 @@ import { Checkbox } from 'features/Common/Checkbox' import { ArrowLoader } from 'features/ArrowLoader' import { SportIcon } from 'features/SportIcon' +import { isMobileDevice } from 'config/userAgent' + import { useHighlighMatches } from './hooks' import { @@ -22,13 +24,13 @@ import { ScLoaderWrapper, } from './styled' -export const MatchesHighlights = ({ matches }: any) => { +export const MatchesHighlights = () => { const { onChangeSelectedMatches, playerMatches } = useHighlighMatches() return ( - + {isMobileDevice ? ` (${playerMatches.length})` : ''} {playerMatches.length ? (playerMatches?.map(({ diff --git a/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx b/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx index 2e6bfaad..eb3222e8 100644 --- a/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx +++ b/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx @@ -15,6 +15,12 @@ export const ScTitle = styled.span` font-size: 34px; line-height: 40px; margin-bottom: 75px; + + ${isMobileDevice + ? css` + text-align: center; + ` + : ''}; ` export const ScMatchesList = styled.div` diff --git a/src/pages/HighlightsPage/components/PriceInfo/index.tsx b/src/pages/HighlightsPage/components/PriceInfo/index.tsx index ce87a13d..72992660 100644 --- a/src/pages/HighlightsPage/components/PriceInfo/index.tsx +++ b/src/pages/HighlightsPage/components/PriceInfo/index.tsx @@ -8,7 +8,7 @@ import { ScWatchDemo, } from './styled' -type PriceInfoType = { +export type PriceInfoType = { price: number, } diff --git a/src/pages/HighlightsPage/components/PriceInfo/styled.tsx b/src/pages/HighlightsPage/components/PriceInfo/styled.tsx index 9aa77c08..8219861b 100644 --- a/src/pages/HighlightsPage/components/PriceInfo/styled.tsx +++ b/src/pages/HighlightsPage/components/PriceInfo/styled.tsx @@ -1,6 +1,8 @@ +import { isMobileDevice } from 'config/userAgent' import styled, { css } from 'styled-components/macro' export const ScPriceInfo = styled.div` + min-width: 106px; height: 186px; border: 1px solid #FFFFFF; border-radius: 34px; @@ -18,19 +20,39 @@ export const ScPriceInfo = styled.div` > * { margin: 10px 0; } + + ${isMobileDevice + ? css` + font-size: 10px; + padding: 5px; + ` + : ''}; ` export const ScTitle = styled.span` text-align: center; + ` export const ScPrice = styled.span` font-size: 80px; text-align: center; + + ${isMobileDevice + ? css` + font-size: 32px; + ` + : ''}; ` export const ScCurrency = styled.span` font-size: 40px; + + ${isMobileDevice + ? css` + font-size: 16px; + ` + : ''}; ` export const ScWatchDemo = styled.span` diff --git a/src/pages/HighlightsPage/components/ThanksPopup/index.tsx b/src/pages/HighlightsPage/components/ThanksPopup/index.tsx new file mode 100644 index 00000000..dfbc152a --- /dev/null +++ b/src/pages/HighlightsPage/components/ThanksPopup/index.tsx @@ -0,0 +1,41 @@ +import { Icon } from 'features/Icon' +import { T9n } from 'features/T9n' +import { useState } from 'react' + +import { useRecoilState } from 'recoil' + +import { + ScModal, + ScHeader, + ScTitle, + ScText, + ScButton, +} from './styled' + +import { dataForPayHighlights } from '../../storeHighlightsAtoms' + +export const ThanksPopup = () => { + const [isOpenThanksPopup, setIsOpenThanksPopup] = useState(true) + const [dataHighlights, setDataHighlights] = useRecoilState(dataForPayHighlights) + + return ( + setDataHighlights({ ...dataHighlights, isOpenThanksPopup: false })} + > + + + + + + + + + + + setDataHighlights({ ...dataHighlights, isOpenThanksPopup: false })}> + Ok + + + ) +} diff --git a/src/pages/HighlightsPage/components/ThanksPopup/styled.tsx b/src/pages/HighlightsPage/components/ThanksPopup/styled.tsx new file mode 100644 index 00000000..45721cdb --- /dev/null +++ b/src/pages/HighlightsPage/components/ThanksPopup/styled.tsx @@ -0,0 +1,67 @@ +import styled, { css } from 'styled-components/macro' + +import { ModalWindow } from 'features/Modal/styled' +import { Modal as BaseModal } from 'features/Modal' +import { ButtonSolid } from 'features/Common' + +import { isMobileDevice } from 'config/userAgent' + +export const ScModal = styled(BaseModal)` + background-color: rgba(0, 0, 0, 0.7); + + ${ModalWindow} { + background-color: #333333; + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 50px; + width: 497px; + height: 430px; + + > * { + margin-bottom: 25px; + } + + ${isMobileDevice + ? css` + width: calc(100vw - 60px); + @media screen and (orientation: landscape){ + max-width: calc(100vw - 80px); + height: calc(100vh - 20px); + overflow: auto; + } + ` + : ''}; + } +` + +export const ScHeader = styled.span` + font-weight: 700; + font-size: 28px; + line-height: 24px; + text-align: center; +` + +export const ScTitle = styled.span` + font-weight: 400; + font-size: 24px; + line-height: 28px; + text-align: center; +` + +export const ScText = styled.span` + font-weight: 400; + font-size: 18px; + line-height: 28px; + text-align: center; +` + +export const ScButton = styled(ButtonSolid)` + width: 194px; + height: 50px; + font-weight: 600; + font-size: 20px; + line-height: 50px; +` diff --git a/src/pages/HighlightsPage/index.tsx b/src/pages/HighlightsPage/index.tsx index 00210f7e..f0840c3a 100644 --- a/src/pages/HighlightsPage/index.tsx +++ b/src/pages/HighlightsPage/index.tsx @@ -1,5 +1,6 @@ import { Link } from 'react-router-dom' +import { isMobileDevice } from 'config/userAgent' import { PAGES } from 'config' import { useRecoilValue, useRecoilState } from 'recoil' @@ -12,6 +13,7 @@ import { MultiSourcePlayer } from 'features/MultiSourcePlayer' import { PriceInfo } from './components/PriceInfo' import { FormHighlights } from './components/FormHighlights' import { MatchesHighlights } from './components/MatchesHighlights' +import { ThanksPopup } from './components/ThanksPopup' import { playerMatchesState, @@ -44,12 +46,12 @@ const HighlightsPage = () => { - - + {isMobileDevice ? null : } + setIsOpenPopupChangeCard(true)}> - + @@ -60,6 +62,7 @@ const HighlightsPage = () => { setChangeCardPopupOpen={setIsOpenPopupChangeCard} title='payment' /> + ) } diff --git a/src/pages/HighlightsPage/storeHighlightsAtoms.tsx b/src/pages/HighlightsPage/storeHighlightsAtoms.tsx index 238bfba7..78374610 100644 --- a/src/pages/HighlightsPage/storeHighlightsAtoms.tsx +++ b/src/pages/HighlightsPage/storeHighlightsAtoms.tsx @@ -6,12 +6,16 @@ export type PlayerMatchesType = Array type DataForm = { - duration: number, - lang: string, - matches: Array, - player_id: number, - sport_id: number, - stats: boolean, + data: { + duration: number, + lang: string, + matches: Array, + player_id: number, + price: number, + sport_id: number, + stats: boolean, + }, + isOpenThanksPopup: boolean, } export const playerMatchesState = atom({ diff --git a/src/pages/HighlightsPage/styled.tsx b/src/pages/HighlightsPage/styled.tsx index 826d85b9..d2e869d2 100644 --- a/src/pages/HighlightsPage/styled.tsx +++ b/src/pages/HighlightsPage/styled.tsx @@ -3,6 +3,8 @@ import styled, { css } from 'styled-components/macro' import { Logo } from 'features/Logo' import { ButtonSolid } from 'features/Common/Button' +import { isMobileDevice } from 'config/userAgent' + export const ScHeader = styled.div` width: 100%; max-height: 95px; @@ -25,6 +27,13 @@ export const ScWrapperContent = styled.div` display: flex; flex-direction: row; padding: 100px 170px 82px 170px; + + ${isMobileDevice + ? css` + padding: 5px; + flex-direction: column; + ` + : ''}; ` export const ScButton = styled(ButtonSolid)` diff --git a/src/requests/onePayment.tsx b/src/requests/onePayment.tsx index 1f5e1685..c1ac9ace 100644 --- a/src/requests/onePayment.tsx +++ b/src/requests/onePayment.tsx @@ -3,22 +3,32 @@ import { callApi } from 'helpers' export type Props = { cardId: string, - item: { + order: { duration: number, lang: string, matches: Array, player_id: number, + price: number, sport_id: number, stats: boolean, }, } -export const onePayment = async ({ cardId, item }: Props) => { +export const onePayment = async ({ + cardId, + order, +}: Props) => { const config = { body: { action: 'one_payment', - card_id: cardId, - item, + data: { + card_id: cardId, + item: { + currency_iso: 'USD', + order, + price: order.price, + }, + }, service: 'stripe_ott', }, }