anbratenandClaude Sonnet 5
f9085d68cd
tinyedge/deploy Deployed by TinyEdge
Generalizes the participant link field beyond PayPal and lets users set/update their payment link directly from the balance summary. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
234 lines
9.6 KiB
Vue
234 lines
9.6 KiB
Vue
<script setup lang="ts">
|
||
import type { ParticipantView, SettlementView } from '../types'
|
||
import { isValidPaymentLink } from '../../shared/utils/paymentLink'
|
||
|
||
const props = defineProps<{
|
||
slug: string
|
||
participants: ParticipantView[]
|
||
netBalances: Record<number, number>
|
||
settlements: SettlementView[]
|
||
currency: string
|
||
}>()
|
||
|
||
const emit = defineEmits<{ settled: [], updated: [] }>()
|
||
|
||
const { lastLink, rememberLink } = usePaymentLinkCache()
|
||
|
||
const settlingKey = ref<string | null>(null)
|
||
const editingId = ref<number | null>(null)
|
||
const editValue = ref('')
|
||
const editError = ref('')
|
||
const savingLink = ref(false)
|
||
|
||
function nameOf(id: number) {
|
||
return props.participants.find(p => p.id === id)?.name ?? 'Unknown'
|
||
}
|
||
|
||
function paymentLinkOf(id: number) {
|
||
return props.participants.find(p => p.id === id)?.paymentLink || null
|
||
}
|
||
|
||
function initialOf(participantName: string) {
|
||
return participantName.trim().charAt(0).toUpperCase() || '?'
|
||
}
|
||
|
||
function keyOf(settlement: SettlementView) {
|
||
return `${settlement.fromId}-${settlement.toId}-${settlement.amountCents}`
|
||
}
|
||
|
||
function startEdit(participant: ParticipantView) {
|
||
editingId.value = participant.id
|
||
editValue.value = participant.paymentLink ?? lastLink.value ?? ''
|
||
editError.value = ''
|
||
}
|
||
|
||
function cancelEdit() {
|
||
editingId.value = null
|
||
editError.value = ''
|
||
}
|
||
|
||
async function saveEdit(participant: ParticipantView) {
|
||
const trimmed = editValue.value.trim()
|
||
if (trimmed && !isValidPaymentLink(trimmed)) {
|
||
editError.value = 'Enter a valid link starting with http:// or https://.'
|
||
return
|
||
}
|
||
savingLink.value = true
|
||
try {
|
||
await $fetch(`/api/pots/${props.slug}/participants/${participant.id}`, {
|
||
method: 'PATCH',
|
||
body: { paymentLink: trimmed },
|
||
})
|
||
if (trimmed) rememberLink(trimmed)
|
||
editingId.value = null
|
||
emit('updated')
|
||
}
|
||
finally {
|
||
savingLink.value = false
|
||
}
|
||
}
|
||
|
||
async function markSettled(settlement: SettlementView) {
|
||
const key = keyOf(settlement)
|
||
settlingKey.value = key
|
||
try {
|
||
await $fetch(`/api/pots/${props.slug}/payments`, {
|
||
method: 'POST',
|
||
body: { fromId: settlement.fromId, toId: settlement.toId, amountCents: settlement.amountCents },
|
||
})
|
||
emit('settled')
|
||
}
|
||
finally {
|
||
settlingKey.value = null
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="space-y-4">
|
||
<p v-if="participants.length === 0" class="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-sm text-stone-500 dark:border-stone-700 dark:text-stone-400">
|
||
No one's in this Pot yet. Add people from the settings page.
|
||
</p>
|
||
|
||
<ul v-else class="space-y-2">
|
||
<li
|
||
v-for="participant in participants"
|
||
:key="participant.id"
|
||
class="rounded-2xl border border-stone-200 bg-white p-3 shadow-sm dark:border-stone-800 dark:bg-stone-900"
|
||
>
|
||
<div class="flex items-center justify-between gap-3">
|
||
<button
|
||
type="button"
|
||
class="flex min-w-0 items-center gap-3 text-left"
|
||
@click="editingId === participant.id ? cancelEdit() : startEdit(participant)"
|
||
>
|
||
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-orange-100 text-sm font-semibold text-orange-700 dark:bg-orange-900/40 dark:text-orange-300">
|
||
{{ initialOf(participant.name) }}
|
||
</div>
|
||
<span class="truncate font-medium text-stone-900 dark:text-stone-100">{{ participant.name }}</span>
|
||
</button>
|
||
<div class="flex shrink-0 items-center gap-3">
|
||
<a
|
||
v-if="participant.paymentLink"
|
||
:href="participant.paymentLink"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="text-xs font-medium text-orange-600 hover:underline dark:text-orange-400"
|
||
@click.stop
|
||
>
|
||
Payment link
|
||
</a>
|
||
<span
|
||
class="text-sm font-semibold"
|
||
:class="{
|
||
'text-emerald-600 dark:text-emerald-400': (netBalances[participant.id] ?? 0) > 0,
|
||
'text-rose-600 dark:text-rose-400': (netBalances[participant.id] ?? 0) < 0,
|
||
'text-stone-400 dark:text-stone-500': (netBalances[participant.id] ?? 0) === 0,
|
||
}"
|
||
>
|
||
<template v-if="(netBalances[participant.id] ?? 0) === 0">
|
||
settled up
|
||
</template>
|
||
<template v-else>
|
||
{{ (netBalances[participant.id] ?? 0) > 0 ? '+' : '−' }}{{ formatCurrency(Math.abs(netBalances[participant.id] ?? 0), currency) }}
|
||
</template>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="editingId === participant.id" class="mt-3 space-y-2 border-t border-stone-100 pt-3 dark:border-stone-800">
|
||
<label class="block text-xs font-medium text-stone-500 dark:text-stone-400">
|
||
Payment link for {{ participant.name }}
|
||
</label>
|
||
<div class="flex gap-2">
|
||
<input
|
||
v-model="editValue"
|
||
type="url"
|
||
placeholder="https://paypal.me/yourname"
|
||
class="block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900 shadow-sm placeholder:text-stone-400 focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
|
||
@keyup.enter="saveEdit(participant)"
|
||
>
|
||
<button
|
||
type="button"
|
||
:disabled="savingLink"
|
||
class="shrink-0 rounded-xl bg-orange-500 px-3 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-orange-600 disabled:opacity-50"
|
||
@click="saveEdit(participant)"
|
||
>
|
||
{{ savingLink ? 'Saving…' : 'Save' }}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="shrink-0 rounded-xl border border-stone-300 px-3 py-2 text-sm font-medium text-stone-600 transition-colors hover:border-orange-300 hover:text-orange-600 dark:border-stone-700 dark:text-stone-300 dark:hover:border-orange-700 dark:hover:text-orange-400"
|
||
@click="cancelEdit"
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
<p v-if="editError" class="text-xs text-rose-600 dark:text-rose-400">
|
||
{{ editError }}
|
||
</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<div v-if="participants.length > 0" class="space-y-2">
|
||
<h2 class="text-sm font-medium text-orange-600 dark:text-orange-400">
|
||
Suggested payments
|
||
</h2>
|
||
|
||
<p v-if="settlements.length === 0" class="text-sm text-stone-500 dark:text-stone-400">
|
||
Everyone is settled up.
|
||
</p>
|
||
<ul v-else class="space-y-2">
|
||
<li
|
||
v-for="settlement in settlements"
|
||
:key="keyOf(settlement)"
|
||
class="space-y-2 rounded-2xl border border-orange-100 bg-gradient-to-r from-orange-50 to-amber-50 p-3 dark:border-orange-900/60 dark:from-orange-950/40 dark:to-amber-950/30"
|
||
>
|
||
<div class="flex items-center gap-2">
|
||
<div class="flex min-w-0 flex-1 items-center gap-2">
|
||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-700 shadow-sm ring-1 ring-orange-200 dark:bg-stone-900 dark:text-orange-300 dark:ring-orange-800">
|
||
{{ initialOf(nameOf(settlement.fromId)) }}
|
||
</div>
|
||
<span class="truncate text-sm font-medium text-stone-700 dark:text-stone-300">{{ nameOf(settlement.fromId) }}</span>
|
||
|
||
<svg class="h-4 w-4 shrink-0 text-orange-400 dark:text-orange-500" viewBox="0 0 20 20" fill="currentColor">
|
||
<path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L11.29 6.15a.75.75 0 1 1 1.02-1.1l4.5 4.25a.75.75 0 0 1 0 1.1l-4.5 4.25a.75.75 0 1 1-1.02-1.1l3.098-3.1H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
|
||
</svg>
|
||
|
||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-700 shadow-sm ring-1 ring-orange-200 dark:bg-stone-900 dark:text-orange-300 dark:ring-orange-800">
|
||
{{ initialOf(nameOf(settlement.toId)) }}
|
||
</div>
|
||
<span class="truncate text-sm font-medium text-stone-700 dark:text-stone-300">{{ nameOf(settlement.toId) }}</span>
|
||
</div>
|
||
|
||
<span class="shrink-0 rounded-full bg-white px-2.5 py-1 text-sm font-bold text-orange-700 shadow-sm dark:bg-stone-900 dark:text-orange-300">
|
||
{{ formatCurrency(settlement.amountCents, currency) }}
|
||
</span>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-end gap-2">
|
||
<a
|
||
v-if="paymentLinkOf(settlement.toId)"
|
||
:href="paymentLinkOf(settlement.toId)!"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="rounded-full border border-orange-300 px-3 py-1 text-xs font-medium text-orange-700 transition-colors hover:bg-white dark:border-orange-800 dark:text-orange-300 dark:hover:bg-stone-900"
|
||
>
|
||
Pay now
|
||
</a>
|
||
<button
|
||
type="button"
|
||
:disabled="settlingKey === keyOf(settlement)"
|
||
class="rounded-full bg-orange-500 px-3 py-1 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-orange-600 disabled:opacity-50"
|
||
@click="markSettled(settlement)"
|
||
>
|
||
{{ settlingKey === keyOf(settlement) ? 'Marking…' : 'Mark as paid' }}
|
||
</button>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</template>
|