feat: add expense duplication functionality

messages/de-DE.json

@@ -189,6 +189,8 @@
     "notesField": {
       "label": "Notizen"
     },
+    "copy": "Kopie",
+    "duplicate": "Ausgabe duplizieren",
     "selectNone": "Keine auswählen",
     "selectAll": "Alle auswählen",
     "shares": "Anteil(e)",

messages/en-US.json

@@ -190,6 +190,8 @@
     "notesField": {
       "label": "Notes"
     },
+    "copy": "Copy",
+    "duplicate": "Duplicate expense",
     "selectNone": "Select none",
     "selectAll": "Select all",
     "shares": "share(s)",

messages/fr-FR.json

@@ -189,6 +189,8 @@
     "notesField": {
       "label": "Notes"
     },
+    "copy": "Copie",
+    "duplicate": "Dupliquer la dépense",
     "selectNone": "Tout désélectionner",
     "selectAll": "Tout sélectionner",
     "shares": "part(s)",

src/app/groups/[groupId]/expenses/edit-expense-form.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { RuntimeFeatureFlags } from '@/lib/featureFlags'
 import { trpc } from '@/trpc/client'
-import { useRouter } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { ExpenseForm } from './expense-form'
 
 export function EditExpenseForm({
@@ -25,10 +25,15 @@ export function EditExpenseForm({
   })
   const expense = expenseData?.expense
 
+  const searchParams = useSearchParams()
+  const isDuplicate = searchParams.get('duplicate') === 'true'
+
   const { mutateAsync: updateExpenseMutateAsync } =
     trpc.groups.expenses.update.useMutation()
   const { mutateAsync: deleteExpenseMutateAsync } =
     trpc.groups.expenses.delete.useMutation()
+  const { mutateAsync: createExpenseMutateAsync } =
+    trpc.groups.expenses.create.useMutation()
 
   const utils = trpc.useUtils()
   const router = useRouter()
@@ -40,6 +45,7 @@ export function EditExpenseForm({
       group={group}
       expense={expense}
       categories={categories}
+      isDuplicate={isDuplicate}
       onSubmit={async (expenseFormValues, participantId) => {
         await updateExpenseMutateAsync({
           expenseId,
@@ -59,6 +65,17 @@ export function EditExpenseForm({
         utils.groups.expenses.invalidate()
         router.push(`/groups/${group.id}`)
       }}
+      onDuplicate={async (expenseFormValues, participantId) => {
+        const newExpense = await createExpenseMutateAsync({
+          groupId,
+          expenseFormValues,
+          participantId,
+        })
+        utils.groups.expenses.invalidate()
+        router.push(
+          `/groups/${group.id}/expenses/${newExpense.expenseId}/edit?duplicate=true`,
+        )
+      }}
       runtimeFeatureFlags={runtimeFeatureFlags}
     />
   )

src/app/groups/[groupId]/expenses/expense-form.tsx

@@ -45,7 +45,7 @@ import { cn } from '@/lib/utils'
 import { AppRouterOutput } from '@/trpc/routers/_app'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { RecurrenceRule } from '@prisma/client'
-import { Save } from 'lucide-react'
+import { Copy, Save } from 'lucide-react'
 import { useTranslations } from 'next-intl'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
@@ -145,14 +145,21 @@ export function ExpenseForm({
   expense,
   onSubmit,
   onDelete,
+  onDuplicate,
   runtimeFeatureFlags,
+  isDuplicate = false,
 }: {
   group: NonNullable<AppRouterOutput['groups']['get']['group']>
   categories: AppRouterOutput['categories']['list']['categories']
   expense?: AppRouterOutput['groups']['expenses']['get']['expense']
   onSubmit: (value: ExpenseFormValues, participantId?: string) => Promise<void>
   onDelete?: (participantId?: string) => Promise<void>
+  onDuplicate?: (
+    value: ExpenseFormValues,
+    participantId?: string,
+  ) => Promise<void>
   runtimeFeatureFlags: RuntimeFeatureFlags
+  isDuplicate?: boolean
 }) {
   const t = useTranslations('ExpenseForm')
   const isCreate = expense === undefined
@@ -176,8 +183,12 @@ export function ExpenseForm({
     resolver: zodResolver(expenseFormSchema),
     defaultValues: expense
       ? {
-          title: expense.title,
-          expenseDate: expense.expenseDate ?? new Date(),
+          title: isDuplicate
+            ? `${expense.title} (${t('copy')})`
+            : expense.title,
+          expenseDate: isDuplicate
+            ? new Date()
+            : expense.expenseDate ?? new Date(),
           amount: String(expense.amount / 100) as unknown as number, // hack
           category: expense.categoryId,
           paidBy: expense.paidById,
@@ -253,6 +264,17 @@ export function ExpenseForm({
     return onSubmit(values, activeUserId ?? undefined)
   }
 
+  const duplicate = async () => {
+    const values = form.getValues()
+    const duplicateValues = {
+      ...values,
+      expenseDate: new Date(),
+    }
+    if (onDuplicate) {
+      return onDuplicate(duplicateValues, activeUserId ?? undefined)
+    }
+  }
+
   const [isIncome, setIsIncome] = useState(Number(form.getValues().amount) < 0)
   const [manuallyEditedParticipants, setManuallyEditedParticipants] = useState<
     Set<string>
@@ -893,14 +915,22 @@ export function ExpenseForm({
             <Save className="w-4 h-4 mr-2" />
             {t(isCreate ? 'create' : 'save')}
           </SubmitButton>
+          {!isCreate && !isDuplicate && onDuplicate && (
+            <Button variant="outline" type="button" onClick={duplicate}>
+              <Copy className="w-4 h-4 mr-2" />
+              {t('duplicate')}
+            </Button>
+          )}
           {!isCreate && onDelete && (
             <DeletePopup
               onDelete={() => onDelete(activeUserId ?? undefined)}
             ></DeletePopup>
           )}
-          <Button variant="ghost" asChild>
-            <Link href={`/groups/${group.id}`}>{t('cancel')}</Link>
-          </Button>
+          {!isDuplicate && (
+            <Button variant="ghost" asChild>
+              <Link href={`/groups/${group.id}`}>{t('cancel')}</Link>
+            </Button>
+          )}
         </div>
       </form>
     </Form>