Feat/set row collapsing threshold

components/Account/ChangeCsvCollapseThreshold.tsx

@@ -0,0 +1,90 @@
+import React, { ReactElement, useState } from 'react'
+import style from './account.module.css'
+import { DEFAULT_CSV_COLLAPSE_THRESHOLD } from 'constants/index'
+
+interface IProps {
+  csvCollapseThreshold: number
+}
+
+export default function ChangeCsvCollapseThreshold ({ csvCollapseThreshold }: IProps): ReactElement {
+  const [threshold, setThreshold] = useState(csvCollapseThreshold ?? DEFAULT_CSV_COLLAPSE_THRESHOLD)
+  const [inputValue, setInputValue] = useState(String(csvCollapseThreshold ?? DEFAULT_CSV_COLLAPSE_THRESHOLD))
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState('')
+  const [disabled, setDisabled] = useState(true)
+
+  const onSubmit = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault()
+    const newThreshold = parseInt(inputValue, 10)
+    if (isNaN(newThreshold) || newThreshold < 0) {
+      setError('Please enter a valid non-negative number')
+      return
+    }
+
+    const oldThreshold = threshold
+    setThreshold(newThreshold)
+    setDisabled(true)
+
+    try {
+      const res = await fetch('/api/user/csvCollapseThreshold', {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ csvCollapseThreshold: newThreshold })
+      })
+      if (res.status === 200) {
+        setError('')
+        setSuccess('Updated successfully.')
+        setTimeout(() => {
+          setSuccess('')
+        }, 3000)
+      } else {
+        throw new Error('Failed to update threshold')
+      }
+    } catch (err: any) {
+      setSuccess('')
+      setError(err.message ?? 'Failed to update threshold')
+      setThreshold(oldThreshold)
+      setInputValue(String(oldThreshold))
+    }
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const value = e.target.value
+    setInputValue(value)
+    const numValue = parseInt(value, 10)
+    if (!isNaN(numValue) && numValue >= 0 && numValue !== threshold) {
+      setDisabled(false)
+      setError('')
+    } else if (numValue === threshold) {
+      setDisabled(true)
+    } else {
+      setDisabled(true)
+      if (value !== '') {
+        setError('Please enter a valid non-negative number')
+      }
+    }
+  }
+
+  return (
+    <div className={style.threshold_ctn}>
+      <form onSubmit={(e) => { void onSubmit(e) }}>
+        <div className={style.threshold_row}>
+          <input
+            id="csvCollapseThreshold"
+            type="text"
+            min="0"
+            required
+            value={inputValue}
+            onChange={handleInputChange}
+            className={style.threshold_input}
+          />
+          <button disabled={disabled} className='button_main' type='submit'>Update</button>
+        </div>
+        {error !== '' && <div className={style.error_message}>{error}</div>}
+        {success !== '' && <div className={style.success_message}>{success}</div>}
+      </form>
+    </div>
+  )
+}

components/Account/account.module.css

@@ -78,3 +78,34 @@ body[data-theme="dark"] .pro_ctn input {
   margin: 0 0 10px 0;
   font-weight: 600;
 }
+
+.threshold_ctn {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.threshold_row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.threshold_input {
+  width: 80px;
+  padding: 5px 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 14px;
+}
+
+body[data-theme='dark'] .threshold_input {
+  border-color: #a5a5a5;
+  background-color: var(--primary-bg-color);
+  color: var(--primary-text-color);
+}
+
+.threshold_ctn button {
+  padding: 5px 15px;
+  border-radius: 5px;
+  font-size: 14px;
+}

pages/account/index.tsx

@@ -7,6 +7,7 @@ import { GetServerSideProps } from 'next'
 import Page from 'components/Page'
 import ChangePassword from 'components/Account/ChangePassword'
 import ChangeFiatCurrency from 'components/Account/ChangeFiatCurrency'
+import ChangeCsvCollapseThreshold from 'components/Account/ChangeCsvCollapseThreshold'
 import style from './account.module.css'
 import { fetchUserProfileFromId, fetchUserWithSupertokens, getUserPublicKeyHex, UserWithSupertokens } from 'services/userService'
 import CopyIcon from '../../assets/copy-black.png'
@@ -147,6 +148,15 @@ export default function Account ({ user, userPublicKey, organization, orgMembers
             />
           </div>
 
+          <div className={style.account_row}>
+            <div className={style.label}>CSV Collapse Threshold</div>
+            <div className={style.value}>
+              <ChangeCsvCollapseThreshold
+                csvCollapseThreshold={userProfile.csvCollapseThreshold}
+              />
+            </div>
+          </div>
+
           <div className={style.account_row}>
             <div className={style.label}>
               Public Key{' '}

pages/api/paybutton/download/transactions/[paybuttonId].ts

@@ -52,7 +52,7 @@ export default async (req: any, res: any): Promise<void> => {
     };
     const transactions = await fetchTransactionsByPaybuttonId(paybutton.id, networkIdArray)
     res.setHeader('Content-Type', 'text/csv')
-    await downloadTxsFile(res, quoteSlug, timezone, transactions, userId, paybuttonId)
+    await downloadTxsFile(res, quoteSlug, timezone, transactions, userId, paybuttonId, true, user.csvCollapseThreshold)
   } catch (error: any) {
     switch (error.message) {
       case RESPONSE_MESSAGES.PAYBUTTON_ID_NOT_PROVIDED_400.message:

pages/api/payments/download/index.ts

@@ -62,7 +62,7 @@ export default async (req: any, res: any): Promise<void> => {
 
     const transactions = await fetchAllPaymentsByUserId(userId, networkIdArray, buttonIds, years, startDate, endDate, timezone)
 
-    await downloadTxsFile(res, quoteSlug, timezone, transactions, userId)
+    await downloadTxsFile(res, quoteSlug, timezone, transactions, userId, undefined, true, user.csvCollapseThreshold)
   } catch (error: any) {
     switch (error.message) {
       case RESPONSE_MESSAGES.METHOD_NOT_ALLOWED_405.message:

pages/api/user/csvCollapseThreshold/index.ts

@@ -0,0 +1,32 @@
+import { setSession } from 'utils/setSession'
+import * as userService from 'services/userService'
+import { RESPONSE_MESSAGES } from 'constants/index'
+
+export default async (
+  req: any,
+  res: any
+): Promise<void> => {
+  await setSession(req, res, true)
+
+  if (req.method === 'PUT') {
+    const session = req.session
+    const { csvCollapseThreshold } = req.body
+
+    if (csvCollapseThreshold === undefined || csvCollapseThreshold === null) {
+      res.status(400).json({ message: 'csvCollapseThreshold is required' })
+      return
+    }
+
+    const threshold = Number(csvCollapseThreshold)
+    if (isNaN(threshold) || threshold < 0) {
+      res.status(400).json({ message: 'csvCollapseThreshold must be a non-negative number' })
+      return
+    }
+
+    await userService.updateCsvCollapseThreshold(session.userId, threshold)
+    res.status(200).json({ success: true })
+  } else {
+    res.status(RESPONSE_MESSAGES.METHOD_NOT_ALLOWED_405.statusCode)
+      .json(RESPONSE_MESSAGES.METHOD_NOT_ALLOWED_405)
+  }
+}

prisma-local/migrations/20260317024924_csv_collapse_threshold/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE `UserProfile` ADD COLUMN `csvCollapseThreshold` INTEGER NOT NULL DEFAULT 1;

prisma-local/schema.prisma

@@ -189,6 +189,7 @@ model UserProfile {
   invoices Invoice[]
   preferredCurrencyId Int @default(1)
   preferredTimezone String    @db.VarChar(255)@default("")
+  csvCollapseThreshold Int @default(1)
   proUntil DateTime?
   paybuttons   Paybutton[]
 

services/userService.ts

@@ -156,6 +156,15 @@ export async function updatePreferredTimezone (id: string, preferredTimezone: st
   })
 }
 
+export async function updateCsvCollapseThreshold (id: string, csvCollapseThreshold: number): Promise<void> {
+  await prisma.userProfile.update({
+    where: { id },
+    data: {
+      csvCollapseThreshold
+    }
+  })
+}
+
 export async function userRemainingProTime (id: string): Promise<number | null> {
   const today = new Date()
   const proUntil = (await prisma.userProfile.findUniqueOrThrow({

tests/mockedObjects.ts

@@ -528,7 +528,8 @@ export const mockedUserProfile: UserProfile = {
   preferredTimezone: '',
   emailCredits: 15,
   postCredits: 15,
-  proUntil: null
+  proUntil: null,
+  csvCollapseThreshold: 0
 }
 
 export const mockedUserProfileWithPublicKey: UserProfile = {
@@ -543,7 +544,8 @@ export const mockedUserProfileWithPublicKey: UserProfile = {
   preferredTimezone: '',
   emailCredits: 15,
   postCredits: 15,
-  proUntil: null
+  proUntil: null,
+  csvCollapseThreshold: 0
 }
 
 export const mockedAddressesOnButtons: AddressesOnButtons[] = [