fix: payments export

Signed-off-by: Rakib Ansary <rakibansary@topcoder.com>

Author: rakibansary

src/apps/wallet-admin/src/home/tabs/payments/PaymentsTab.tsx

@@ -6,8 +6,9 @@ import React, { FC, useCallback, useEffect } from 'react'
 
 import { Collapsible, ConfirmModal, LoadingCircles } from '~/libs/ui'
 import { UserProfile } from '~/libs/core'
+import { downloadBlob } from '~/libs/shared'
 
-import { editPayment, getMemberHandle, getPaymentMethods, getPayments, getTaxForms } from '../../../lib/services/wallet'
+import { editPayment, exportSearchResults, getMemberHandle, getPaymentMethods, getPayments, getTaxForms } from '../../../lib/services/wallet'
 import { Winning, WinningDetail } from '../../../lib/models/WinningDetail'
 import { FilterBar, formatIOSDateString, PaymentView } from '../../../lib'
 import { ConfirmFlowData } from '../../../lib/models/ConfirmFlowData'
@@ -311,6 +312,16 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                 <div className={styles.content}>
                     <Collapsible header={<h3>Payment Listing</h3>}>
                         <FilterBar
+                            showExportButton
+                            onExport={async () => {
+                                toast.success('Downloading payments report. This may take a few moments.', { position: toast.POSITION.BOTTOM_RIGHT })
+                                downloadBlob(
+                                    await exportSearchResults(filters),
+                                    `payments-${new Date()
+                                        .getTime()}.csv`,
+                                )
+                                toast.success('Download complete', { position: toast.POSITION.BOTTOM_RIGHT })
+                            }}
                             filters={[
                                 {
                                     key: 'winnerIds',
@@ -344,6 +355,25 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                                     ],
                                     type: 'dropdown',
                                 },
+                                {
+                                    key: 'date',
+                                    label: 'Date',
+                                    options: [
+                                        {
+                                            label: 'Last 7 days',
+                                            value: 'last7days',
+                                        },
+                                        {
+                                            label: 'Last 30 days',
+                                            value: 'last30days',
+                                        },
+                                        {
+                                            label: 'All',
+                                            value: 'all',
+                                        },
+                                    ],
+                                    type: 'dropdown',
+                                },
                                 {
                                     key: 'pageSize',
                                     label: 'Payments per page',

src/apps/wallet-admin/src/lib/components/filter-bar/FilterBar.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 import React, { ChangeEvent } from 'react'
 
-import { Button, InputSelect, InputText } from '~/libs/ui'
+import { Button, IconOutline, InputSelect, InputText } from '~/libs/ui'
 import { InputHandleAutocomplete, MembersAutocompeteResult } from '~/apps/gamification-admin/src/game-lib'
 
 import styles from './FilterBar.module.scss'
@@ -20,8 +20,10 @@ type Filter = {
 
 interface FilterBarProps {
     filters: Filter[];
+    showExportButton?: boolean;
     onFilterChange: (key: string, value: string[]) => void;
     onResetFilters?: () => void;
+    onExport?: () => void;
 }
 
 const FilterBar: React.FC<FilterBarProps> = (props: FilterBarProps) => {
@@ -104,6 +106,14 @@ const FilterBar: React.FC<FilterBarProps> = (props: FilterBarProps) => {
                         </div>
                     ))}
             </div>
+            {props.showExportButton && (
+                <Button
+                    className={styles.exportButton}
+                    icon={IconOutline.DownloadIcon}
+                    onClick={props.onExport}
+                    size='lg'
+                />
+            )}
             <Button
                 primary
                 className={styles.resetButton}

src/apps/wallet-admin/src/lib/services/wallet.ts

@@ -1,6 +1,6 @@
 import { EnvironmentConfig } from '~/config'
 import { xhrDeleteAsync, xhrGetAsync, xhrPatchAsync, xhrPostAsync } from '~/libs/core'
-import { getAsyncWithBlobHandling } from '~/libs/core/lib/xhr/xhr-functions/xhr.functions'
+import { getAsyncWithBlobHandling, postAsyncWithBlobHandling } from '~/libs/core/lib/xhr/xhr-functions/xhr.functions'
 
 import { WalletDetails } from '../models/WalletDetails'
 import { PaymentProvider } from '../models/PaymentProvider'
@@ -127,6 +127,38 @@ export async function getPaymentMethods(limit: number, offset: number, userIds:
 
 }
 
+export async function exportSearchResults(filters: Record<string, string[]>): Promise<Blob> {
+    const url = `${baseUrl}/admin/winnings/export`
+
+    const filteredFilters: Record<string, string> = {}
+
+    for (const key in filters) {
+        if (filters[key].length > 0 && key !== 'pageSize') {
+            filteredFilters[key] = filters[key][0]
+        }
+    }
+
+    const payload: {
+        winnerIds?: string[], [key: string]: string | number | string[] | undefined
+    } = {
+        ...filteredFilters,
+    }
+
+    if (filters.winnerIds && filters.winnerIds.length > 0) {
+        payload.winnerIds = filters.winnerIds
+    }
+
+    const body = JSON.stringify(payload)
+
+    try {
+        return await postAsyncWithBlobHandling<string, Blob>(url, body, {
+            responseType: 'blob',
+        })
+    } catch (err) {
+        throw new Error('Failed to export search results')
+    }
+}
+
 export async function downloadTaxForm(userId: string, taxFormId: string): Promise<Blob> {
     const url = `${baseUrl}/admin/tax-forms/${userId}/${taxFormId}/download`
     try {