From 3116d5ff3f056f171b386363dc991e820e4d2936 Mon Sep 17 00:00:00 2001 From: Andrei Dekterev Date: Wed, 18 May 2022 14:58:09 +0700 Subject: [PATCH] feat(#2429): add payment history in user account --- src/config/lexics/payment.tsx | 4 + src/config/procedures.tsx | 1 + .../components/PagePaymentsHistory/hooks.tsx | 20 ++++ .../components/PagePaymentsHistory/index.tsx | 104 +++++++++--------- .../components/PagePaymentsHistory/styled.tsx | 23 ++-- src/requests/getUserListPayments.tsx | 73 ++++++++++++ 6 files changed, 166 insertions(+), 59 deletions(-) create mode 100644 src/features/UserAccount/components/PagePaymentsHistory/hooks.tsx create mode 100644 src/requests/getUserListPayments.tsx diff --git a/src/config/lexics/payment.tsx b/src/config/lexics/payment.tsx index d298de17..f8f4d195 100644 --- a/src/config/lexics/payment.tsx +++ b/src/config/lexics/payment.tsx @@ -13,4 +13,8 @@ export const paymentLexics = { error_empty_country: 15753, error_empty_name: 15290, error_payment_unsuccessful: 14446, + payment_date: 15603, + payment_method: 2010, + subscription_plan: 18182, + sum: 838, } diff --git a/src/config/procedures.tsx b/src/config/procedures.tsx index c164fad8..92abc7fc 100644 --- a/src/config/procedures.tsx +++ b/src/config/procedures.tsx @@ -18,6 +18,7 @@ export const PROCEDURES = { get_user_favorites: 'get_user_favorites', get_user_info: 'get_user_info', get_user_match_second: 'get_user_match_second', + get_user_payments: 'get_user_payments', get_user_preferences: 'get_user_preferences', get_user_subscriptions: 'get_user_subscriptions', landing_get_match_info: 'landing_get_match_info', diff --git a/src/features/UserAccount/components/PagePaymentsHistory/hooks.tsx b/src/features/UserAccount/components/PagePaymentsHistory/hooks.tsx new file mode 100644 index 00000000..674bb88c --- /dev/null +++ b/src/features/UserAccount/components/PagePaymentsHistory/hooks.tsx @@ -0,0 +1,20 @@ +import { useState, useEffect } from 'react' + +import { useAuthStore } from 'features/AuthStore' + +import { getUserListPayments, PaymentsList } from 'requests/getUserListPayments' + +export const usePaymentHistory = () => { + const [payments, setPayments] = useState([]) + const timezoneOffset = new Date().getTimezoneOffset() + const { user } = useAuthStore() + + useEffect(() => { + (async () => { + const allPayments = await getUserListPayments(timezoneOffset, user?.profile?.email || '') + setPayments(allPayments) + })() + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) + return { payments } +} diff --git a/src/features/UserAccount/components/PagePaymentsHistory/index.tsx b/src/features/UserAccount/components/PagePaymentsHistory/index.tsx index bf21f862..d97d0696 100644 --- a/src/features/UserAccount/components/PagePaymentsHistory/index.tsx +++ b/src/features/UserAccount/components/PagePaymentsHistory/index.tsx @@ -1,3 +1,9 @@ +import { T9n } from 'features/T9n' + +import format from 'date-fns/format' + +import { usePaymentHistory } from './hooks' + import { Wrapper, Table, @@ -8,55 +14,49 @@ import { Td, } from './styled' -export const PagePaymentsHistory = () => ( - - - - - - - - - - - - - - - - - - - - - - - - -
- Дата платежа - - Подписка - - Тип - - Сумма -
- 12.01.21 - - Матч Спартак-Динамо - - На год - - 1999 руб. - - 22.12.20 - - Все матчи Спартака - - На месяц - - 999 руб. -
- -) +export const PagePaymentsHistory = () => { + const { payments } = usePaymentHistory() + + const formattedDate = (date: string) => format(new Date(date), 'd MMM yyyy') + + return ( + + + + + + + + + + + + {payments.map(({ + card, + currency, + id, + price, + sub_name, + sub_option, + ts_payment, + }: any) => ( + + + + + + + ))} + +
+ + + + + + + +
{sub_option} — {sub_name}{currency} {price}{formattedDate(ts_payment)}{card}
+ + ) +} diff --git a/src/features/UserAccount/components/PagePaymentsHistory/styled.tsx b/src/features/UserAccount/components/PagePaymentsHistory/styled.tsx index 9446a205..4c2432b7 100644 --- a/src/features/UserAccount/components/PagePaymentsHistory/styled.tsx +++ b/src/features/UserAccount/components/PagePaymentsHistory/styled.tsx @@ -20,7 +20,7 @@ export const THead = styled.thead`` export const Th = styled.th` width: 250px; - padding: 0; + padding: 0 20px; padding-bottom: 25px; font-weight: 500; font-size: 18px; @@ -29,7 +29,7 @@ export const Th = styled.th` color: rgba(255, 255, 255, 0.6); text-align: start; - :nth-child(1) { + /* :nth-child(1) { width: 250px; } @@ -39,9 +39,9 @@ export const Th = styled.th` :nth-child(3) { width: 190px; - } + } */ - @media ${devices.tablet} { + /* @media ${devices.tablet} { :nth-child(1) { width: 200px; } @@ -53,7 +53,7 @@ export const Th = styled.th` :nth-child(3) { width: 150px; } - } + } */ ${isMobileDevice ? css` font-size: 12px; @@ -67,15 +67,24 @@ export const Th = styled.th` export const TBody = styled.tbody`` -export const TRow = styled.tr`` +export const TRow = styled.tr` + td.subscription { + text-transform: capitalize; + } +` export const Td = styled.td` - padding: 0; + padding: 0 20px; padding-bottom: 20px; font-size: 18px; line-height: 22px; text-align: start; color: #FFFFFF; + word-wrap: break-word; + max-width: 400px; + text-transform: uppercase; + vertical-align: top; + ${isMobileDevice ? css` font-size: 12px; diff --git a/src/requests/getUserListPayments.tsx b/src/requests/getUserListPayments.tsx new file mode 100644 index 00000000..56877550 --- /dev/null +++ b/src/requests/getUserListPayments.tsx @@ -0,0 +1,73 @@ +import { DATA_URL, PROCEDURES } from 'config' +import { callApi } from 'helpers' + +const proc = PROCEDURES.get_user_payments + +type Payment = { + card: string, + currency: string, + currency_id: number, + id: number, + payment_service: string, + payment_type: string, + price: number, + purchase_type: string, + sub_id: number, + sub_info: MatchOfOneTeam | MatchOne | Tournaments, + sub_name: string, + sub_option: string, + ts_payment: string, +} + +type MatchOfOneTeam = { + country_en: string, + country_id: number, + country_ru: string, + sport_id: number, + team_en: string, + team_id: number, + team_ru: string, +} + +type MatchOne = { + country_en: string, + country_id: number, + country_ru: string, + date: string, + id: number, + name: string, + season: string, + sport_id: number, + tournament: string, +} + +type Tournament = { + id: number, + name_en: string, + name_ru: string, + sport_id: number, +} + +type Tournaments = Array +export type PaymentsList = Array + +export const getUserListPayments = ( + timezoneOffset: number, + _p_email: string, +) +: Promise => { + const config = { + body: { + params: { + _p_email, + _p_gmt: timezoneOffset, + }, + proc, + }, + } + + return callApi({ + config, + url: DATA_URL, + }) +}