[2/2]: Adapt to changes in donation module (#1729)

* [2/2] Adapt to databse structural changes Initial changes to front-end to support the new structure of donations * admin/payments: Fix admin filters * navigation/adminMenu: Add payments href to menuPayments
podkrepi-bg · Mar 10, 2024 · 86ae079 · 86ae079
1 parent 771b066
commit 86ae079
Show file tree

Hide file tree

Showing 37 changed files with 1,110 additions and 311 deletions.
diff --git a/public/locales/bg/donations.json b/public/locales/bg/donations.json
@@ -4,6 +4,8 @@
   "edit-form-heading": "Редактирай дарение",
   "all": "Всички дарения",
   "donations": "Дарения",
+  "payments": "Плащания",
+  "payments-all": "Извършени плащания по кампании",
   "type": "Вид",
   "status": "Статус",
   "provider": "Разплащателна система",

diff --git a/public/locales/bg/profile.json b/public/locales/bg/profile.json
@@ -54,7 +54,8 @@
       "succeeded": "успешно",
       "refund": "възстановено",
       "cancelled": "отменено",
-      "guaranteed": "гарантирано"
+      "guaranteed": "гарантирано",
+      "declined": "отказано"
     }
   },
   "certificates-history": {

diff --git a/public/locales/en/donations.json b/public/locales/en/donations.json
@@ -4,6 +4,8 @@
   "edit-form-heading": "Edit donation",
   "all": "All donations",
   "donations": "Donations",
+  "payments": "Payments",
+  "payments-all": "Payments made to campaigns",
   "type": "Type",
   "status": "Status",
   "provider": "Payment system",

diff --git a/public/locales/en/profile.json b/public/locales/en/profile.json
@@ -54,7 +54,8 @@
       "succeeded": "succeeded",
       "refund": "refunded",
       "cancelled": "cancelled",
-      "guaranteed": "guaranteed"
+      "guaranteed": "guaranteed",
+      "declined": "declined"
     }
   },
   "certificates-history": {

diff --git a/src/common/hooks/campaigns.ts b/src/common/hooks/campaigns.ts
@@ -13,7 +13,7 @@ import {
   CampaignUniqueDonations,
   CampaignHourlyDonations,
 } from 'gql/campaigns'
-import { DonationStatus } from 'gql/donations.enums'
+import { PaymentStatus } from 'gql/donations.enums'
 import { apiClient } from 'service/apiClient'
 import { useCurrentPerson } from 'common/util/useCurrentPerson'
 import { isAdmin } from 'common/util/roles'
@@ -138,7 +138,7 @@ export function useCampaignDonationHistory(
   pagesize?: number,
 ) {
   return useQuery<CampaignDonationHistoryResponse>([
-    endpoints.donation.getDonations(DonationStatus.succeeded, campaignId, pageindex, pagesize).url,
+    endpoints.donation.getDonations(PaymentStatus.succeeded, campaignId, pageindex, pagesize).url,
   ])
 }
 

diff --git a/src/common/hooks/donation.ts b/src/common/hooks/donation.ts
@@ -12,6 +12,8 @@ import {
   CheckoutSessionResponse,
   DonationResponse,
   DonorsCountResult,
+  PaymentAdminResponse,
+  TPaymentResponse,
   TotalDonatedMoneyResponse,
   UserDonationResult,
 } from 'gql/donations'
@@ -41,14 +43,39 @@ export function useDonationSession() {
 }
 
 export function useDonationsList(
-  id?: string,
+  paymentId?: string,
+  campaignId?: string,
   paginationData?: PaginationData,
   filterData?: FilterData,
   searchData?: string,
 ) {
   const { data: session } = useSession()
   return useQuery<CampaignDonationHistoryResponse>(
-    [endpoints.donation.donationsList(id, paginationData, filterData, searchData).url],
+    [
+      endpoints.donation.donationsList(
+        paymentId,
+        campaignId,
+        paginationData,
+        filterData,
+        searchData,
+      ).url,
+    ],
+    {
+      queryFn: authQueryFnFactory(session?.accessToken),
+    },
+  )
+}
+
+export function usePaymentsList(
+  paymentId?: string,
+  campaignId?: string,
+  paginationData?: PaginationData,
+  filterData?: FilterData,
+  searchData?: string,
+) {
+  const { data: session } = useSession()
+  return useQuery<PaymentAdminResponse>(
+    [endpoints.payments.list(paymentId, campaignId, paginationData, filterData, searchData).url],
     {
       queryFn: authQueryFnFactory(session?.accessToken),
     },
@@ -63,8 +90,8 @@ export async function prefetchDonationsList(client: QueryClient) {
   await client.prefetchQuery<DonationResponse[]>([endpoints.donation.donationsList().url])
 }
 
-export function useDonation(id: string) {
-  return useQuery<DonationResponse>([endpoints.donation.getDonation(id).url])
+export function useGetPayment(id: string) {
+  return useQuery<TPaymentResponse>([endpoints.payments.getPayment(id).url])
 }
 
 export async function prefetchDonationById(client: QueryClient, id: string) {

diff --git a/src/common/routes.ts b/src/common/routes.ts
@@ -240,6 +240,9 @@ export const routes = {
       view: (id: string) => `/admin/users/${id}`,
       edit: (id: string) => `/admin/users/${id}/edit`,
     },
+    payments: {
+      index: '/admin/payments',
+    },
     company: {
       create: '/admin/companies/create',
     },

diff --git a/src/components/admin/bank-transactions/grid/RenderEditBankDonationStatusCell.tsx b/src/components/admin/bank-transactions/grid/RenderEditBankDonationStatusCell.tsx
@@ -43,9 +43,9 @@ const validationSchema: yup.SchemaOf<UpdateBankTransactionCodeInput> = yup
 
 export default function RenderBankDonationStatusCell({ params }: RenderCellProps) {
   const { t } = useTranslation()
-  const donationStatus = params.row.bankDonationStatus ? params.row.bankDonationStatus : ''
+  const PaymentStatus = params.row.bankDonationStatus ? params.row.bankDonationStatus : ''
   const showEdit = [BankDonationStatus.unrecognized, BankDonationStatus.importFailed].includes(
-    donationStatus,
+    PaymentStatus,
   )
 
   const [isOpen, setOpen] = useState(false)
@@ -141,7 +141,7 @@ export default function RenderBankDonationStatusCell({ params }: RenderCellProps
   return (
     <>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', width: '95%' }}>
-        {donationStatus}
+        {PaymentStatus}
         {showEdit ? (
           <Tooltip title={t('bank-transactions:cta.edit')}>
             <Edit sx={addIconStyles} color="action" fontSize="medium" onClick={handleOpen} />

diff --git a/src/components/admin/campaign-news/CampaignDropdownSelector.tsx b/src/components/admin/campaign-news/CampaignDropdownSelector.tsx
@@ -15,7 +15,7 @@ import { CampaignTypeCategory } from 'components/common/campaign-types/categorie
 
 type Props = {
   name?: string
-  isDisabled: boolean
+  isDisabled?: boolean
 }
 
 export default function CampaignDropdownSelector({

diff --git a/src/components/admin/donations/DonationsPage.tsx b/src/components/admin/donations/DonationsPage.tsx
@@ -1,15 +1,9 @@
 import { useTranslation } from 'next-i18next'
-import { ModalStoreImpl } from 'stores/dashboard/ModalStore'
 import AdminContainer from 'components/common/navigation/AdminContainer'
 import AdminLayout from 'components/common/navigation/AdminLayout'
 import Grid from './grid/Grid'
 import GridAppbar from './grid/GridAppbar'
 import GridFilters from './grid/GridFilters'
-import { RefundStoreImpl } from './store/RefundStore'
-
-export const ModalStore = new ModalStoreImpl()
-export const RefundStore = new RefundStoreImpl()
-export const InvalidateStore = new ModalStoreImpl()
 
 export default function DocumentsPage() {
   const { t } = useTranslation()

diff --git a/src/components/admin/donations/grid/Grid.tsx b/src/components/admin/donations/grid/Grid.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { UseQueryResult } from '@tanstack/react-query'
 import { useTranslation } from 'next-i18next'
-import { Box, IconButton, Tooltip } from '@mui/material'
+import { Box, Tooltip } from '@mui/material'
 import { Edit } from '@mui/icons-material'
 import {
   DataGrid,
@@ -13,9 +13,6 @@ import { observer } from 'mobx-react'
 
 import { useDonationsList } from 'common/hooks/donation'
 
-import DetailsModal from '../modals/DetailsModal'
-import InvalidateModal from '../modals/InvalidateModal'
-import { ModalStore, RefundStore, InvalidateStore } from '../DonationsPage'
 import { getExactDateTime } from 'common/util/date'
 import { useRouter } from 'next/router'
 import { money } from 'common/util/money'
@@ -24,12 +21,8 @@ import { usePersonList } from 'common/hooks/person'
 import theme from 'common/theme'
 import RenderEditPersonCell from './RenderEditPersonCell'
 import { useStores } from '../../../../common/hooks/useStores'
-import RenderEditBillingEmailCell from './RenderEditBillingEmailCell'
-import RestoreIcon from '@mui/icons-material/Restore'
-import CancelIcon from '@mui/icons-material/Cancel'
-import RefundModal from '../modals/RefundModal'
-import { DonationStatus, PaymentProvider } from '../../../../gql/donations.enums'
-import { useSession } from 'next-auth/react'
+
+import Link from 'next/link'
 
 interface RenderCellProps {
   params: GridRenderCellParams
@@ -51,24 +44,17 @@ export default observer(function Grid() {
   const [focusedRowId, setFocusedRowId] = useState(null as string | null)
   const { t } = useTranslation()
   const router = useRouter()
-  const { isDetailsOpen } = ModalStore
-  const { isRefundOpen } = RefundStore
-  const {
-    isDeleteOpen,
-    setSelectedRecord: setInvalidateRecord,
-    showDelete: showInvalidate,
-  } = InvalidateStore
+
   const campaignId = router.query.campaignId as string | undefined
-  const { data: session } = useSession()
-  const canEditFinancials = session?.user?.realm_access?.roles.includes(
-    'account-edit-financials-requests',
-  )
+  const paymentId = router.query.paymentId as string | undefined
+
   const {
     data: { items: donations, total: allDonationsCount } = { items: [], total: 0 },
     // error: donationHistoryError,
     isLoading: isDonationHistoryLoading,
     refetch,
   }: UseQueryResult<CampaignDonationHistoryResponse> = useDonationsList(
+    paymentId,
     campaignId,
     { pageIndex: paginationModel.page, pageSize: paginationModel.pageSize },
     donationStore.donationFilters,
@@ -112,34 +98,6 @@ export default observer(function Grid() {
     )
   }
 
-  const RenderBillingEmaiCell = ({ params }: RenderCellProps) => {
-    return (
-      <>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
-          {params.row.billingEmail}
-          {params.isEditable ? (
-            <Tooltip title={t('donations:cta.edit')}>
-              <Edit
-                sx={addIconStyles}
-                color="action"
-                fontSize="medium"
-                onClick={() => {
-                  if (focusedRowId) {
-                    params.api.startCellEditMode({ id: params.row.id, field: params.field })
-                  }
-                  params.api.getCellMode(params.row.id, params.field)
-                  setFocusedRowId(params.row.id)
-                }}
-              />
-            </Tooltip>
-          ) : (
-            <></>
-          )}
-        </Box>
-      </>
-    )
-  }
-
   const RenderMoneyCell = ({ params }: RenderCellProps) => {
     return <>{money(params.row.amount, params.row.currency)}</>
   }
@@ -150,51 +108,15 @@ export default observer(function Grid() {
     headerAlign: 'left',
   }
 
-  const { showRefund, setSelectedRecord } = RefundStore
-
-  function refundClickHandler(id: string) {
-    setSelectedRecord({ id })
-    showRefund()
-  }
-
-  function invalidateClickHandler(id: string) {
-    setInvalidateRecord({ id, name: '' })
-    showInvalidate()
-  }
-
   const columns: GridColDef[] = [
     {
-      field: 'actions',
-      headerName: 'Actions',
-      type: 'actions',
-      width: 120,
-      resizable: false,
+      field: 'paymentId',
+      //TODO:Ttranslate
+      headerName: 'Плащане номер',
+      width: 300,
       renderCell: (params: GridRenderCellParams) => {
-        if (!canEditFinancials || params.row?.status !== DonationStatus.succeeded) {
-          return ''
-        }
-
         return (
-          <>
-            {params.row.provider === PaymentProvider.stripe && (
-              <Tooltip title={t('donations:refund.icon')}>
-                <IconButton
-                  size="small"
-                  color="primary"
-                  onClick={() => refundClickHandler(params.row.id)}>
-                  <RestoreIcon />
-                </IconButton>
-              </Tooltip>
-            )}
-            <Tooltip title={t('donations:invalidate.icon')}>
-              <IconButton
-                size="small"
-                color="primary"
-                onClick={() => invalidateClickHandler(params.row.id)}>
-                <CancelIcon />
-              </IconButton>
-            </Tooltip>
-          </>
+          <Link href={`/admin/payments?id=${params.row.paymentId}`}>{params.row.paymentId}</Link>
         )
       },
     },
@@ -207,10 +129,6 @@ export default observer(function Grid() {
         return getExactDateTime(params?.row.createdAt)
       },
     },
-    {
-      field: 'status',
-      headerName: t('donations:status'),
-    },
     {
       field: 'amount',
       headerName: t('donations:amount'),
@@ -237,26 +155,6 @@ export default observer(function Grid() {
         return <RenderEditPersonCell params={params} personList={personList} onUpdate={refetch} />
       },
     },
-    {
-      field: 'billingName',
-      headerName: 'Billing Name',
-      width: 250,
-    },
-    {
-      field: 'billingEmail',
-      headerName: 'Billing Email',
-      width: 300,
-      editable: true,
-      renderCell: (params: GridRenderCellParams) => {
-        return <RenderBillingEmaiCell params={params} />
-      },
-
-      renderEditCell: (params: GridRenderEditCellParams) => {
-        return (
-          <RenderEditBillingEmailCell params={params} personList={personList} onUpdate={refetch} />
-        )
-      },
-    },
     {
       field: 'id',
       headerName: 'ID',
@@ -266,12 +164,6 @@ export default observer(function Grid() {
       field: 'type',
       headerName: t('donations:type'),
     },
-    {
-      field: 'provider',
-      headerName: t('donations:provider'),
-      ...commonProps,
-      width: 100,
-    },
     {
       field: 'targetVaultId',
       headerName: t('donations:vault'),
@@ -316,9 +208,6 @@ export default observer(function Grid() {
       </Box>
 
       {/* making sure we don't sent requests to the API when not needed */}
-      {isDetailsOpen && <DetailsModal />}
-      {isRefundOpen && <RefundModal />}
-      {isDeleteOpen && <InvalidateModal onUpdate={refetch} />}
     </>
   )
 })