Merge pull request #1017 from PayButton/feat/year-payments-filter

Feat/year payments filter

Author: chedieck

components/Transaction/Invoice.tsx

@@ -3,8 +3,22 @@ import { XEC_TX_EXPLORER_URL, BCH_TX_EXPLORER_URL, NETWORK_TICKERS_FROM_ID, XEC_
 import moment from 'moment'
 import logoImageSource from 'assets/logo.png'
 import Image from 'next/image'
-
-const Receipt = React.forwardRef((props, ref) => {
+interface ReceiptProps {
+  data: {
+    invoiceNumber: string
+    amount: number
+    recipientName: string
+    recipientAddress: string
+    description: string
+    customerName: string
+    customerAddress: string
+    createdAt: string | number | Date
+    transactionHash: string
+    transactionDate: number
+    transactionNetworkId: number
+  }
+}
+const Receipt = React.forwardRef<HTMLDivElement, ReceiptProps>((props, ref) => {
   const { data } = props
   const {
     invoiceNumber,

components/Transaction/InvoiceModal.tsx

@@ -272,7 +272,6 @@ export default function InvoiceModal ({
                  }
         </div>
         <div style={{ display: 'none' }}>
-        {/* <div> */}
           <PrintableReceipt ref={contentRef} data={invoiceData} />
         </div>
       </div>

pages/api/payments/count/index.ts

@@ -16,9 +16,13 @@ export default async (req: any, res: any): Promise<void> => {
     if (typeof req.query.buttonIds === 'string' && req.query.buttonIds !== '') {
       buttonIds = (req.query.buttonIds as string).split(',')
     }
-
-    if ((buttonIds !== undefined) && buttonIds.length > 0) {
-      const totalCount = await getFilteredTransactionCount(userId, buttonIds)
+    let years: string[] | undefined
+    if (typeof req.query.years === 'string' && req.query.years !== '') {
+      years = (req.query.years as string).split(',')
+    }
+    if (((buttonIds !== undefined) && buttonIds.length > 0) ||
+        ((years !== undefined) && years.length > 0)) {
+      const totalCount = await getFilteredTransactionCount(userId, buttonIds, years)
       res.status(200).json(totalCount)
     } else {
       const totalCount = await CacheGet.paymentsCount(userId, timezone)

pages/api/payments/download/index.ts

@@ -47,7 +47,12 @@ export default async (req: any, res: any): Promise<void> => {
     if (typeof req.query.buttonIds === 'string' && req.query.buttonIds !== '') {
       buttonIds = req.query.buttonIds.split(',')
     }
-    const transactions = await fetchAllPaymentsByUserId(userId, networkIdArray, buttonIds)
+    let years: string[] | undefined
+    if (typeof req.query.years === 'string' && req.query.years !== '') {
+      years = (req.query.years as string).split(',')
+    }
+
+    const transactions = await fetchAllPaymentsByUserId(userId, networkIdArray, buttonIds, years)
 
     await downloadTxsFile(res, quoteSlug, timezone, transactions, userId)
   } catch (error: any) {

pages/api/payments/index.ts

@@ -1,4 +1,5 @@
 import { fetchAllPaymentsByUserIdWithPagination } from 'services/transactionService'
+import { fetchUserProfileFromId } from 'services/userService'
 import { setSession } from 'utils/setSession'
 
 export default async (req: any, res: any): Promise<void> => {
@@ -14,14 +15,23 @@ export default async (req: any, res: any): Promise<void> => {
     if (typeof req.query.buttonIds === 'string' && req.query.buttonIds !== '') {
       buttonIds = (req.query.buttonIds as string).split(',')
     }
+    let years: string[] | undefined
+    if (typeof req.query.years === 'string' && req.query.years !== '') {
+      years = (req.query.years as string).split(',')
+    }
+    const userReqTimezone = req.headers.timezone as string
+    const userProfile = await fetchUserProfileFromId(userId)
+    const userPreferredTimezone = userProfile?.preferredTimezone
 
     const resJSON = await fetchAllPaymentsByUserIdWithPagination(
       userId,
       page,
       pageSize,
       orderBy,
       orderDesc,
-      buttonIds
+      buttonIds,
+      years,
+      userPreferredTimezone ?? userReqTimezone
     )
     res.status(200).json(resJSON)
   }

pages/api/transaction/years/index.ts

@@ -0,0 +1,15 @@
+import { fetchDistinctPaymentYearsByUser } from 'services/transactionService'
+import { setSession } from 'utils/setSession'
+
+export default async (req: any, res: any): Promise<void> => {
+  if (req.method === 'GET') {
+    try {
+      await setSession(req, res)
+      const userId = req.session.userId
+      const years = await fetchDistinctPaymentYearsByUser(userId)
+      res.status(200).json({ years })
+    } catch (err: any) {
+      res.status(500).json({ statusCode: 500, message: err.message })
+    }
+  }
+}

pages/payments/index.tsx

@@ -72,6 +72,9 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
   const timezone = user?.userProfile.preferredTimezone === '' ? moment.tz.guess() : user?.userProfile?.preferredTimezone
   const [selectedCurrencyCSV, setSelectedCurrencyCSV] = useState<string>('')
   const [paybuttonNetworks, setPaybuttonNetworks] = useState<Set<number>>(new Set())
+  const [transactionYears, setTransactionYears] = useState<number[]>([])
+  const [selectedTransactionYears, setSelectedTransactionYears] = useState<number[]>([])
+
   const [loading, setLoading] = useState(false)
   const [buttons, setButtons] = useState<any[]>([])
   const [selectedButtonIds, setSelectedButtonIds] = useState<any[]>([])
@@ -133,7 +136,7 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
   }
   useEffect(() => {
     setRefreshCount(prev => prev + 1)
-  }, [selectedButtonIds])
+  }, [selectedButtonIds, selectedTransactionYears])
 
   const fetchPaybuttons = async (): Promise<any> => {
     const res = await fetch(`/api/paybuttons?userId=${user?.userProfile.id}`, {
@@ -144,8 +147,21 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
     }
   }
 
+  const fetchTransactionYears = async (): Promise<any> => {
+    const res = await fetch('/api/transaction/years', {
+      method: 'GET'
+    })
+    if (res.status === 200) {
+      const data = await res.json()
+      return data.years
+    } else {
+      console.error('Failed to fetch transaction years:', res.statusText)
+      return []
+    }
+  }
   const getDataAndSetUpCurrencyCSV = async (): Promise<void> => {
     const paybuttons = await fetchPaybuttons()
+    const years = await fetchTransactionYears()
     const networkIds: Set<number> = new Set()
     setButtons(paybuttons)
 
@@ -154,6 +170,7 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
     })
 
     setPaybuttonNetworks(networkIds)
+    setTransactionYears(years)
   }
 
   useEffect(() => {
@@ -173,10 +190,24 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
       if (selectedButtonIds.length > 0) {
         url += `&buttonIds=${selectedButtonIds.join(',')}`
       }
+      if (selectedTransactionYears.length > 0) {
+        url += `&years=${selectedTransactionYears.join(',')}`
+      }
 
-      const paymentsResponse = await fetch(url)
+      const paymentsResponse = await fetch(url, {
+        headers: {
+          Timezone: moment.tz.guess()
+        }
+      })
+      let paymentsCountUrl = '/api/payments/count'
+      if (selectedButtonIds.length > 0) {
+        paymentsCountUrl += `?buttonIds=${selectedButtonIds.join(',')}`
+      }
+      if (selectedTransactionYears.length > 0) {
+        paymentsCountUrl += `${selectedButtonIds.length > 0 ? '&' : '?'}years=${selectedTransactionYears.join(',')}`
+      }
       const paymentsCountResponse = await fetch(
-        `/api/payments/count${selectedButtonIds.length > 0 ? `?buttonIds=${selectedButtonIds.join(',')}` : ''}`,
+        paymentsCountUrl,
         { headers: { Timezone: timezone } }
       )
 
@@ -312,7 +343,7 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
 
                     <Image src={Plus} alt='create invoice' width={14} height={14} />
                   </button>
-                  <div className={style.tooltiptext}>New button</div>
+                  <div className={style.tooltiptext}>New Invoice</div>
                 </div>
                   )
                 : (
@@ -356,6 +387,9 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
       if (selectedButtonIds.length > 0) {
         url += `&buttonIds=${selectedButtonIds.join(',')}`
       }
+      if (selectedTransactionYears.length > 0) {
+        url += `&years=${selectedTransactionYears.join(',')}`
+      }
       const isCurrencyEmptyOrUndefined = (value: string): boolean => (value === '' || value === undefined)
 
       if (!isCurrencyEmptyOrUndefined(currency)) {
@@ -406,7 +440,10 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
     setSelectedCurrencyCSV(currencyParam)
     void downloadCSV(userId, user?.userProfile, currencyParam)
   }
-
+  const handleClearFilters = (): void => {
+    setSelectedButtonIds([])
+    setSelectedTransactionYears([])
+  }
   return (
     <>
      <TopBar title="Payments" user={user?.stUser?.email} />
@@ -418,9 +455,9 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
           >
             <Image src={SettingsIcon} alt="filters" width={15} />Filters
           </div>
-          {selectedButtonIds.length > 0 &&
+          {(selectedButtonIds.length > 0 || selectedTransactionYears.length > 0) &&
           <div
-          onClick={() => setSelectedButtonIds([])}
+          onClick={() => handleClearFilters()}
           className={style.show_filters_button}
         >
           Clear
@@ -459,6 +496,7 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
               </Button>)}
       </div>
       {showFilters && (
+        <div>
             <div className={style.showfilters_ctn}>
               <span>Filter by button</span>
               <div className={style.filters_ctn}>
@@ -479,6 +517,27 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
                 ))}
               </div>
             </div>
+            <div className={style.showfilters_ctn}>
+            <span>Filter by year</span>
+              <div className={style.filters_ctn}>
+                {transactionYears.map((y) => (
+                  <div
+                    key={y}
+                    onClick={() => {
+                      setSelectedTransactionYears(prev =>
+                        prev.includes(y)
+                          ? prev.filter(year => year !== y)
+                          : [...prev, y]
+                      )
+                    }}
+                    className={`${style.filter_button} ${selectedTransactionYears.includes(y) ? style.active : ''}`}
+                  >
+                    {y}
+                  </div>
+                ))}
+              </div>
+            </div>
+        </div>
       )}
       <TableContainerGetter
         columns={columns}