feat(#2429): add payment history in user account

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

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

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<PaymentsList>([])
+  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 }
+}

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 = () => (
-  <Wrapper>
-    <Table>
-      <THead>
-        <TRow>
-          <Th>
-            Дата платежа
-          </Th>
-          <Th>
-            Подписка
-          </Th>
-          <Th>
-            Тип
-          </Th>
-          <Th>
-            Сумма
-          </Th>
-        </TRow>
-      </THead>
-      <TBody>
-        <TRow>
-          <Td>
-            12.01.21
-          </Td>
-          <Td>
-            Матч Спартак-Динамо
-          </Td>
-          <Td>
-            На год
-          </Td>
-          <Td>
-            1999 руб.
-          </Td>
-        </TRow>
-        <TRow>
-          <Td>
-            22.12.20
-          </Td>
-          <Td>
-            Все матчи Спартака
-          </Td>
-          <Td>
-            На месяц
-          </Td>
-          <Td>
-            999 руб.
-          </Td>
-        </TRow>
-      </TBody>
-    </Table>
-  </Wrapper>
-)
+export const PagePaymentsHistory = () => {
+  const { payments } = usePaymentHistory()
+
+  const formattedDate = (date: string) => format(new Date(date), 'd MMM yyyy')
+
+  return (
+    <Wrapper>
+      <Table>
+        <THead>
+          <TRow>
+            <Th>
+              <T9n t='subscription_plan' />
+            </Th>
+            <Th>
+              <T9n t='sum' />
+            </Th>
+            <Th>
+              <T9n t='payment_date' />
+            </Th>
+            <Th>
+              <T9n t='payment_method' />
+            </Th>
+          </TRow>
+        </THead>
+        <TBody>
+          {payments.map(({
+            card,
+            currency,
+            id,
+            price,
+            sub_name,
+            sub_option,
+            ts_payment,
+          }: any) => (
+            <TRow key={id}>
+              <Td className='subscription'>{sub_option} — {sub_name}</Td>
+              <Td>{currency} {price}</Td>
+              <Td>{formattedDate(ts_payment)}</Td>
+              <Td>{card}</Td>
+            </TRow>
+          ))}
+        </TBody>
+      </Table>
+    </Wrapper>
+  )
+}

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;

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<Tournament>
+export type PaymentsList = Array<Payment>
+
+export const getUserListPayments = (
+  timezoneOffset: number,
+  _p_email: string,
+)
+: Promise<PaymentsList> => {
+  const config = {
+    body: {
+      params: {
+        _p_email,
+        _p_gmt: timezoneOffset,
+      },
+      proc,
+    },
+  }
+
+  return callApi({
+    config,
+    url: DATA_URL,
+  })
+}