🎉 init
This commit is contained in:
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-orange-50/40 text-stone-900 dark:bg-stone-950 dark:text-stone-100">
|
||||
<NuxtRouteAnnouncer />
|
||||
<main class="mx-auto max-w-md px-4 py-8">
|
||||
<NuxtPage />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1 @@
|
||||
@import 'tailwindcss';
|
||||
@@ -0,0 +1,138 @@
|
||||
<script setup lang="ts">
|
||||
import type { ExpenseView, ParticipantView } from '../types'
|
||||
|
||||
const props = defineProps<{
|
||||
participants: ParticipantView[]
|
||||
currency: string
|
||||
editing?: ExpenseView | null
|
||||
defaultPayerId?: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [payload: { description: string, amountCents: number, payerId: number, participantIds: number[] }]
|
||||
cancel: []
|
||||
}>()
|
||||
|
||||
const description = ref(props.editing?.description ?? '')
|
||||
const amount = ref(props.editing ? fromCents(props.editing.amountCents).toString() : '')
|
||||
const payerId = ref<number>(props.editing?.payerId ?? props.defaultPayerId ?? props.participants[0]?.id)
|
||||
const selectedIds = ref<number[]>(props.editing?.participantIds ?? props.participants.map(p => p.id))
|
||||
const error = ref('')
|
||||
|
||||
function toggleParticipant(id: number) {
|
||||
if (selectedIds.value.includes(id)) {
|
||||
selectedIds.value = selectedIds.value.filter(existing => existing !== id)
|
||||
}
|
||||
else {
|
||||
selectedIds.value = [...selectedIds.value, id]
|
||||
}
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
error.value = ''
|
||||
const amountCents = toCents(Number(amount.value))
|
||||
|
||||
if (!description.value.trim()) {
|
||||
error.value = 'Description is required.'
|
||||
return
|
||||
}
|
||||
if (!Number.isFinite(amountCents) || amountCents <= 0) {
|
||||
error.value = 'Enter a valid amount.'
|
||||
return
|
||||
}
|
||||
if (selectedIds.value.length === 0) {
|
||||
error.value = 'Select at least one participant to split with.'
|
||||
return
|
||||
}
|
||||
|
||||
emit('submit', {
|
||||
description: description.value.trim(),
|
||||
amountCents,
|
||||
payerId: payerId.value,
|
||||
participantIds: selectedIds.value,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form class="space-y-4 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm dark:border-stone-800 dark:bg-stone-900" @submit.prevent="onSubmit">
|
||||
<div>
|
||||
<label for="description" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Description</label>
|
||||
<input
|
||||
id="description"
|
||||
v-model="description"
|
||||
type="text"
|
||||
required
|
||||
class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base 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"
|
||||
placeholder="Dinner, taxi, groceries…"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="amount" class="block text-sm font-medium text-stone-700 dark:text-stone-300">
|
||||
Amount ({{ currency }})
|
||||
</label>
|
||||
<input
|
||||
id="amount"
|
||||
v-model="amount"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0.01"
|
||||
required
|
||||
class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base 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"
|
||||
placeholder="0.00"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="payer" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Paid by</label>
|
||||
<select
|
||||
id="payer"
|
||||
v-model="payerId"
|
||||
class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm 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:focus:ring-orange-900"
|
||||
>
|
||||
<option v-for="participant in participants" :key="participant.id" :value="participant.id">
|
||||
{{ participant.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="block text-sm font-medium text-stone-700 dark:text-stone-300">Split equally among</span>
|
||||
<div class="mt-2 flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="participant in participants"
|
||||
:key="participant.id"
|
||||
type="button"
|
||||
class="rounded-full border px-3 py-1.5 text-sm font-medium transition-colors"
|
||||
:class="selectedIds.includes(participant.id)
|
||||
? 'border-orange-400 bg-orange-100 text-orange-800 dark:border-orange-700 dark:bg-orange-900/40 dark:text-orange-200'
|
||||
: 'border-stone-300 bg-white text-stone-600 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-400'"
|
||||
@click="toggleParticipant(participant.id)"
|
||||
>
|
||||
{{ participant.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="text-sm text-rose-600 dark:text-rose-400">
|
||||
{{ error }}
|
||||
</p>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="flex-1 rounded-xl border border-stone-300 px-4 py-2 font-medium text-stone-700 dark:border-stone-700 dark:text-stone-300"
|
||||
@click="emit('cancel')"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="flex-1 rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600 active:bg-orange-600"
|
||||
>
|
||||
{{ editing ? 'Save changes' : 'Add expense' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,152 @@
|
||||
<script setup lang="ts">
|
||||
import type { ParticipantView, SettlementView } from '../types'
|
||||
|
||||
const props = defineProps<{
|
||||
slug: string
|
||||
participants: ParticipantView[]
|
||||
netBalances: Record<number, number>
|
||||
settlements: SettlementView[]
|
||||
currency: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{ settled: [] }>()
|
||||
|
||||
const settlingKey = ref<string | null>(null)
|
||||
|
||||
function nameOf(id: number) {
|
||||
return props.participants.find(p => p.id === id)?.name ?? 'Unknown'
|
||||
}
|
||||
|
||||
function paypalLinkOf(id: number) {
|
||||
return props.participants.find(p => p.id === id)?.paypalLink || null
|
||||
}
|
||||
|
||||
function initialOf(participantName: string) {
|
||||
return participantName.trim().charAt(0).toUpperCase() || '?'
|
||||
}
|
||||
|
||||
function keyOf(settlement: SettlementView) {
|
||||
return `${settlement.fromId}-${settlement.toId}-${settlement.amountCents}`
|
||||
}
|
||||
|
||||
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="flex items-center justify-between gap-3 rounded-2xl border border-stone-200 bg-white p-3 shadow-sm dark:border-stone-800 dark:bg-stone-900"
|
||||
>
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<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>
|
||||
<a
|
||||
v-if="participant.paypalLink"
|
||||
:href="participant.paypalLink"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="shrink-0 text-xs font-medium text-orange-600 hover:underline dark:text-orange-400"
|
||||
>
|
||||
PayPal
|
||||
</a>
|
||||
</div>
|
||||
<span
|
||||
class="shrink-0 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>
|
||||
</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="paypalLinkOf(settlement.toId)"
|
||||
:href="paypalLinkOf(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 via PayPal
|
||||
</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>
|
||||
@@ -0,0 +1,106 @@
|
||||
<script setup lang="ts">
|
||||
import type { ExpenseView, ParticipantView } from '../types'
|
||||
|
||||
const props = defineProps<{
|
||||
expenses: ExpenseView[]
|
||||
participants: ParticipantView[]
|
||||
currency: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{ edit: [expense: ExpenseView], remove: [id: number] }>()
|
||||
|
||||
const expandedId = ref<number | null>(null)
|
||||
|
||||
function nameOf(id: number) {
|
||||
return props.participants.find(p => p.id === id)?.name ?? 'Unknown'
|
||||
}
|
||||
|
||||
function namesOf(ids: number[]) {
|
||||
return ids.map(nameOf).join(', ')
|
||||
}
|
||||
|
||||
function toggle(id: number) {
|
||||
expandedId.value = expandedId.value === id ? null : id
|
||||
}
|
||||
|
||||
const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a.createdAt))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-3">
|
||||
<p v-if="expenses.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 expenses yet. Add the first one below.
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-for="expense in sorted"
|
||||
:key="expense.id"
|
||||
class="rounded-2xl border p-4 shadow-sm"
|
||||
:class="expense.type === 'payment'
|
||||
? 'border-emerald-100 bg-emerald-50/60 dark:border-emerald-900/60 dark:bg-emerald-950/20'
|
||||
: 'border-stone-200 bg-white dark:border-stone-800 dark:bg-stone-900'"
|
||||
>
|
||||
<button type="button" class="flex w-full items-start justify-between gap-2 text-left" @click="toggle(expense.id)">
|
||||
<div v-if="expense.type === 'payment'" class="flex min-w-0 items-center gap-2">
|
||||
<svg class="h-4 w-4 shrink-0 text-emerald-600 dark:text-emerald-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<p class="truncate font-medium text-emerald-800 dark:text-emerald-300">
|
||||
{{ nameOf(expense.payerId) }} paid {{ nameOf(expense.participantIds[0]) }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-else class="min-w-0">
|
||||
<p class="truncate font-medium text-stone-900 dark:text-stone-100">
|
||||
{{ expense.description }}
|
||||
</p>
|
||||
<p class="text-sm text-stone-500 dark:text-stone-400">
|
||||
paid by {{ nameOf(expense.payerId) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center gap-2">
|
||||
<span
|
||||
class="font-medium"
|
||||
:class="expense.type === 'payment' ? 'text-emerald-700 dark:text-emerald-300' : 'text-stone-900 dark:text-stone-100'"
|
||||
>
|
||||
{{ formatCurrency(expense.amountCents, currency) }}
|
||||
</span>
|
||||
<svg
|
||||
class="h-4 w-4 shrink-0 text-stone-400 transition-transform"
|
||||
:class="{ 'rotate-180': expandedId === expense.id }"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.148l3.71-3.918a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div
|
||||
v-if="expandedId === expense.id"
|
||||
class="mt-3 space-y-3 border-t pt-3"
|
||||
:class="expense.type === 'payment' ? 'border-emerald-100 dark:border-emerald-900/60' : 'border-stone-100 dark:border-stone-800'"
|
||||
>
|
||||
<p v-if="expense.type === 'expense'" class="text-xs text-stone-400 dark:text-stone-500">
|
||||
split among {{ namesOf(expense.participantIds) }}
|
||||
</p>
|
||||
<div class="flex gap-3">
|
||||
<button
|
||||
v-if="expense.type === 'expense'"
|
||||
type="button"
|
||||
class="text-sm font-medium text-orange-600 dark:text-orange-400"
|
||||
@click="emit('edit', expense)"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-sm font-medium text-rose-600 dark:text-rose-400"
|
||||
@click="emit('remove', expense.id)"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{ title?: string, buttonLabel?: string }>()
|
||||
const emit = defineEmits<{ submit: [name: string] }>()
|
||||
|
||||
const name = ref('')
|
||||
|
||||
function onSubmit() {
|
||||
if (!name.value.trim()) return
|
||||
emit('submit', name.value.trim())
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form class="space-y-3" @submit.prevent="onSubmit">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-stone-700 dark:text-stone-300">
|
||||
{{ props.title ?? 'What\'s your name?' }}
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="name"
|
||||
type="text"
|
||||
autocomplete="name"
|
||||
required
|
||||
class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base 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-900 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
|
||||
placeholder="Your name"
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600 active:bg-orange-600"
|
||||
>
|
||||
{{ props.buttonLabel ?? 'Continue' }}
|
||||
</button>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,21 @@
|
||||
import { readIdentity, writeIdentity } from '../utils/identity'
|
||||
|
||||
export function useIdentity() {
|
||||
const name = useState<string | null>('identity-name', () => null)
|
||||
const loaded = useState('identity-loaded', () => false)
|
||||
|
||||
if (import.meta.client && !loaded.value) {
|
||||
const identity = readIdentity(window.localStorage)
|
||||
name.value = identity?.name ?? null
|
||||
loaded.value = true
|
||||
}
|
||||
|
||||
function setName(newName: string) {
|
||||
const trimmed = newName.trim()
|
||||
if (!trimmed) return
|
||||
name.value = trimmed
|
||||
if (import.meta.client) writeIdentity(window.localStorage, { name: trimmed })
|
||||
}
|
||||
|
||||
return { name, setName }
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { readCachedPaymentLink, writeCachedPaymentLink } from '../utils/paymentLinkCache'
|
||||
|
||||
export function usePaymentLinkCache() {
|
||||
const lastLink = useState<string | null>('payment-link-cache', () => null)
|
||||
|
||||
if (import.meta.client && lastLink.value === null) {
|
||||
lastLink.value = readCachedPaymentLink(window.localStorage)
|
||||
}
|
||||
|
||||
function rememberLink(link: string) {
|
||||
if (!import.meta.client || !link) return
|
||||
lastLink.value = link
|
||||
writeCachedPaymentLink(window.localStorage, link)
|
||||
}
|
||||
|
||||
return { lastLink, rememberLink }
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { readVisitedPots, recordVisitedPot, type VisitedPot } from '../utils/visitedPots'
|
||||
|
||||
export function useVisitedPots() {
|
||||
const stored = useState<VisitedPot[] | null>('visited-pots', () => null)
|
||||
|
||||
if (import.meta.client && stored.value === null) {
|
||||
stored.value = readVisitedPots(window.localStorage)
|
||||
}
|
||||
|
||||
const pots = computed(() => stored.value ?? [])
|
||||
|
||||
function recordVisit(pot: Omit<VisitedPot, 'visitedAt'>) {
|
||||
if (!import.meta.client) return
|
||||
stored.value = recordVisitedPot(window.localStorage, pot)
|
||||
}
|
||||
|
||||
return { pots, recordVisit }
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
<script setup lang="ts">
|
||||
const { name, setName } = useIdentity()
|
||||
const { pots: visitedPots } = useVisitedPots()
|
||||
|
||||
const potName = ref('')
|
||||
const currency = ref('EUR')
|
||||
const creating = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const currencies = ['EUR', 'USD', 'GBP', 'CHF']
|
||||
|
||||
async function createPot() {
|
||||
if (!potName.value.trim()) return
|
||||
creating.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
const pot = await $fetch('/api/pots', {
|
||||
method: 'POST',
|
||||
body: { name: potName.value.trim(), currency: currency.value, creatorName: name.value },
|
||||
})
|
||||
await navigateTo(`/p/${pot.slug}/setup`)
|
||||
}
|
||||
catch {
|
||||
error.value = 'Could not create the Pot. Please try again.'
|
||||
}
|
||||
finally {
|
||||
creating.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-8">
|
||||
<div class="space-y-1 text-center">
|
||||
<div class="text-4xl">
|
||||
🍯
|
||||
</div>
|
||||
<h1 class="text-2xl font-bold text-stone-900 dark:text-stone-100">
|
||||
Splitt the Bill
|
||||
</h1>
|
||||
<p class="text-sm text-stone-500 dark:text-stone-400">
|
||||
Track shared costs with friends, the easy way.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section v-if="visitedPots.length" class="space-y-2">
|
||||
<h2 class="text-sm font-semibold text-stone-500 dark:text-stone-400">
|
||||
Your Pots
|
||||
</h2>
|
||||
<ul class="space-y-2">
|
||||
<li v-for="pot in visitedPots" :key="pot.slug">
|
||||
<NuxtLink
|
||||
:to="`/p/${pot.slug}`"
|
||||
class="flex items-center justify-between gap-3 rounded-2xl border border-stone-200 bg-white p-3 shadow-sm transition-colors hover:border-orange-300 dark:border-stone-800 dark:bg-stone-900 dark:hover:border-orange-700"
|
||||
>
|
||||
<span class="font-medium text-stone-900 dark:text-stone-100">{{ pot.name }}</span>
|
||||
<span class="shrink-0 text-xs font-medium text-stone-400 dark:text-stone-500">{{ pot.currency }}</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<NameForm v-if="!name" @submit="setName" />
|
||||
|
||||
<form v-else class="space-y-4 rounded-2xl border border-stone-200 bg-white p-5 shadow-sm dark:border-stone-800 dark:bg-stone-900" @submit.prevent="createPot">
|
||||
<p class="text-sm text-stone-600 dark:text-stone-400">
|
||||
Hi {{ name }}! Create a new Pot to start splitting costs.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<label for="pot-name" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Pot name</label>
|
||||
<input
|
||||
id="pot-name"
|
||||
v-model="potName"
|
||||
type="text"
|
||||
required
|
||||
class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base 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"
|
||||
placeholder="Weekend in Lisbon"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="currency" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Currency</label>
|
||||
<select
|
||||
id="currency"
|
||||
v-model="currency"
|
||||
class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm 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:focus:ring-orange-900"
|
||||
>
|
||||
<option v-for="code in currencies" :key="code" :value="code">
|
||||
{{ code }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="text-sm text-rose-600 dark:text-rose-400">
|
||||
{{ error }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="creating"
|
||||
class="w-full rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600 active:bg-orange-600 disabled:opacity-50"
|
||||
>
|
||||
{{ creating ? 'Creating…' : 'Create Pot' }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,199 @@
|
||||
<script setup lang="ts">
|
||||
import type { ExpenseView, PotView } from '~/types'
|
||||
|
||||
const route = useRoute()
|
||||
const slug = route.params.slug as string
|
||||
const { name, setName } = useIdentity()
|
||||
|
||||
const { data, refresh, error } = await useFetch<PotView>(`/api/pots/${slug}`)
|
||||
const { recordVisit } = useVisitedPots()
|
||||
|
||||
const me = computed(() =>
|
||||
data.value?.participants.find(p => p.name.toLowerCase() === name.value?.toLowerCase()),
|
||||
)
|
||||
|
||||
watch(data, (pot) => {
|
||||
if (!pot) return
|
||||
recordVisit({ slug: pot.pot.slug, name: pot.pot.name, currency: pot.pot.currency })
|
||||
}, { immediate: true })
|
||||
|
||||
const activeTab = ref<'people' | 'expenses'>('people')
|
||||
const showExpenseForm = ref(false)
|
||||
const editingExpense = ref<ExpenseView | null>(null)
|
||||
const linkCopied = ref(false)
|
||||
|
||||
async function addMyself() {
|
||||
if (!name.value) return
|
||||
await $fetch(`/api/pots/${slug}/participants`, { method: 'POST', body: { name: name.value } })
|
||||
await refresh()
|
||||
}
|
||||
|
||||
async function submitExpense(payload: { description: string, amountCents: number, payerId: number, participantIds: number[] }) {
|
||||
if (editingExpense.value) {
|
||||
await $fetch(`/api/pots/${slug}/expenses/${editingExpense.value.id}`, { method: 'PATCH', body: payload })
|
||||
}
|
||||
else {
|
||||
await $fetch(`/api/pots/${slug}/expenses`, { method: 'POST', body: payload })
|
||||
}
|
||||
editingExpense.value = null
|
||||
showExpenseForm.value = false
|
||||
await refresh()
|
||||
}
|
||||
|
||||
function editExpense(expense: ExpenseView) {
|
||||
editingExpense.value = expense
|
||||
showExpenseForm.value = true
|
||||
}
|
||||
|
||||
function newExpense() {
|
||||
editingExpense.value = null
|
||||
showExpenseForm.value = true
|
||||
}
|
||||
|
||||
function cancelExpenseForm() {
|
||||
editingExpense.value = null
|
||||
showExpenseForm.value = false
|
||||
}
|
||||
|
||||
async function removeExpense(id: number) {
|
||||
await $fetch(`/api/pots/${slug}/expenses/${id}`, { method: 'DELETE' })
|
||||
await refresh()
|
||||
}
|
||||
|
||||
async function copyLink() {
|
||||
await navigator.clipboard.writeText(window.location.href)
|
||||
linkCopied.value = true
|
||||
setTimeout(() => (linkCopied.value = false), 2000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="error" class="space-y-3 text-center">
|
||||
<p class="text-rose-600 dark:text-rose-400">
|
||||
This Pot couldn't be found.
|
||||
</p>
|
||||
<NuxtLink to="/" class="font-medium text-orange-600 dark:text-orange-400">
|
||||
Go home
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<NameForm v-else-if="!name" title="What's your name?" @submit="setName" />
|
||||
|
||||
<div v-else-if="data" class="space-y-6">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="inline-flex items-center gap-1 text-sm font-medium text-stone-500 transition-colors hover:text-orange-600 dark:text-stone-400 dark:hover:text-orange-400"
|
||||
>
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M17 10a.75.75 0 0 1-.75.75H5.612l4.158 3.96a.75.75 0 1 1-1.04 1.08l-5.5-5.25a.75.75 0 0 1 0-1.08l5.5-5.25a.75.75 0 1 1 1.04 1.08L5.612 9.25H16.25A.75.75 0 0 1 17 10Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
All Pots
|
||||
</NuxtLink>
|
||||
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-stone-900 dark:text-stone-100">
|
||||
{{ data.pot.name }}
|
||||
</h1>
|
||||
<p class="text-sm text-stone-500 dark:text-stone-400">
|
||||
{{ data.pot.currency }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex shrink-0 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl border border-stone-300 px-3 py-1.5 text-sm font-medium text-stone-700 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="copyLink"
|
||||
>
|
||||
{{ linkCopied ? 'Copied!' : 'Copy link' }}
|
||||
</button>
|
||||
<NuxtLink
|
||||
:to="`/p/${slug}/settings`"
|
||||
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-stone-300 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"
|
||||
aria-label="Pot settings"
|
||||
>
|
||||
<svg class="h-4.5 w-4.5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M8.34 1.804A1 1 0 0 1 9.32 1h1.36a1 1 0 0 1 .98.804l.24 1.192c.428.183.83.41 1.2.674l1.146-.386a1 1 0 0 1 1.212.464l.68 1.178a1 1 0 0 1-.208 1.267l-.912.816a6.5 6.5 0 0 1 0 1.382l.912.816a1 1 0 0 1 .208 1.267l-.68 1.178a1 1 0 0 1-1.212.464l-1.146-.386c-.37.264-.772.49-1.2.674l-.24 1.192a1 1 0 0 1-.98.804H9.32a1 1 0 0 1-.98-.804l-.24-1.192a6.5 6.5 0 0 1-1.2-.674l-1.146.386a1 1 0 0 1-1.212-.464l-.68-1.178a1 1 0 0 1 .208-1.267l.912-.816a6.5 6.5 0 0 1 0-1.382l-.912-.816a1 1 0 0 1-.208-1.267l.68-1.178a1 1 0 0 1 1.212-.464l1.146.386c.37-.264.772-.49 1.2-.674l.24-1.192ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!me" class="rounded-2xl border border-orange-200 bg-orange-50 p-4 text-sm dark:border-orange-900 dark:bg-orange-950/40">
|
||||
<p class="mb-2 text-stone-700 dark:text-stone-300">
|
||||
You're not in this Pot's participant list yet.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl bg-orange-500 px-3 py-1.5 font-medium text-white shadow-sm transition-colors hover:bg-orange-600"
|
||||
@click="addMyself"
|
||||
>
|
||||
Add myself as {{ name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-1 rounded-xl bg-stone-100 p-1 dark:bg-stone-900">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-lg py-2 text-sm font-medium transition-colors"
|
||||
:class="activeTab === 'people'
|
||||
? 'bg-white text-stone-900 shadow-sm dark:bg-stone-800 dark:text-stone-100'
|
||||
: 'text-stone-500 dark:text-stone-400'"
|
||||
@click="activeTab = 'people'"
|
||||
>
|
||||
People & balances
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-lg py-2 text-sm font-medium transition-colors"
|
||||
:class="activeTab === 'expenses'
|
||||
? 'bg-white text-stone-900 shadow-sm dark:bg-stone-800 dark:text-stone-100'
|
||||
: 'text-stone-500 dark:text-stone-400'"
|
||||
@click="activeTab = 'expenses'"
|
||||
>
|
||||
Expenses
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section v-if="activeTab === 'people'">
|
||||
<BalanceSummary
|
||||
:slug="slug"
|
||||
:participants="data.participants"
|
||||
:net-balances="data.netBalances"
|
||||
:settlements="data.settlements"
|
||||
:currency="data.pot.currency"
|
||||
@settled="refresh"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section v-else class="space-y-3">
|
||||
<button
|
||||
v-if="!showExpenseForm"
|
||||
type="button"
|
||||
class="w-full rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600"
|
||||
@click="newExpense"
|
||||
>
|
||||
+ Add expense
|
||||
</button>
|
||||
|
||||
<AddExpenseForm
|
||||
v-if="showExpenseForm"
|
||||
:participants="data.participants"
|
||||
:currency="data.pot.currency"
|
||||
:editing="editingExpense"
|
||||
:default-payer-id="me?.id"
|
||||
@submit="submitExpense"
|
||||
@cancel="cancelExpenseForm"
|
||||
/>
|
||||
|
||||
<ExpenseList
|
||||
v-else
|
||||
:expenses="data.expenses"
|
||||
:participants="data.participants"
|
||||
:currency="data.pot.currency"
|
||||
@edit="editExpense"
|
||||
@remove="removeExpense"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import type { PotView } from '~/types'
|
||||
|
||||
const route = useRoute()
|
||||
const slug = route.params.slug as string
|
||||
|
||||
const { data, refresh, error } = await useFetch<PotView>(`/api/pots/${slug}`)
|
||||
|
||||
const adding = ref(false)
|
||||
|
||||
async function addParticipant(participantName: string) {
|
||||
adding.value = true
|
||||
try {
|
||||
await $fetch(`/api/pots/${slug}/participants`, { method: 'POST', body: { name: participantName } })
|
||||
await refresh()
|
||||
}
|
||||
finally {
|
||||
adding.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="error" class="space-y-3 text-center">
|
||||
<p class="text-rose-600 dark:text-rose-400">
|
||||
This Pot couldn't be found.
|
||||
</p>
|
||||
<NuxtLink to="/" class="font-medium text-orange-600 dark:text-orange-400">
|
||||
Go home
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div v-else-if="data" class="space-y-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<NuxtLink
|
||||
:to="`/p/${slug}`"
|
||||
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-stone-300 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"
|
||||
aria-label="Back to Pot"
|
||||
>
|
||||
<svg class="h-4.5 w-4.5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 0 1 0 1.06L9.06 10l3.73 3.71a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</NuxtLink>
|
||||
<div>
|
||||
<h1 class="text-lg font-bold text-stone-900 dark:text-stone-100">
|
||||
Pot settings
|
||||
</h1>
|
||||
<p class="text-sm text-stone-500 dark:text-stone-400">
|
||||
{{ data.pot.name }} · {{ data.pot.currency }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="space-y-3">
|
||||
<h2 class="text-sm font-semibold uppercase tracking-wide text-stone-500 dark:text-stone-400">
|
||||
Participants
|
||||
</h2>
|
||||
<ul class="space-y-2">
|
||||
<li
|
||||
v-for="participant in data.participants"
|
||||
:key="participant.id"
|
||||
class="flex items-center gap-3 rounded-2xl border border-stone-200 bg-white p-3 shadow-sm dark:border-stone-800 dark:bg-stone-900"
|
||||
>
|
||||
<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">
|
||||
{{ participant.name.trim().charAt(0).toUpperCase() || '?' }}
|
||||
</div>
|
||||
<span class="font-medium text-stone-900 dark:text-stone-100">{{ participant.name }}</span>
|
||||
</li>
|
||||
<li v-if="data.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.
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="space-y-3 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm dark:border-stone-800 dark:bg-stone-900">
|
||||
<h2 class="text-sm font-semibold uppercase tracking-wide text-stone-500 dark:text-stone-400">
|
||||
Add a participant
|
||||
</h2>
|
||||
<NameForm
|
||||
title="Name"
|
||||
:button-label="adding ? 'Adding…' : 'Add'"
|
||||
@submit="addParticipant"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,84 @@
|
||||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
const slug = route.params.slug as string
|
||||
|
||||
const names = ref([''])
|
||||
const saving = ref(false)
|
||||
|
||||
function addRow() {
|
||||
names.value.push('')
|
||||
}
|
||||
|
||||
async function continueToPot() {
|
||||
saving.value = true
|
||||
const toAdd = names.value.map(n => n.trim()).filter(Boolean)
|
||||
try {
|
||||
for (const participantName of toAdd) {
|
||||
await $fetch(`/api/pots/${slug}/participants`, {
|
||||
method: 'POST',
|
||||
body: { name: participantName },
|
||||
})
|
||||
}
|
||||
}
|
||||
finally {
|
||||
await navigateTo(`/p/${slug}`)
|
||||
}
|
||||
}
|
||||
|
||||
function skip() {
|
||||
navigateTo(`/p/${slug}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-1 text-center">
|
||||
<div class="text-3xl">
|
||||
👋
|
||||
</div>
|
||||
<h1 class="text-xl font-bold text-stone-900 dark:text-stone-100">
|
||||
Add the rest of the group
|
||||
</h1>
|
||||
<p class="text-sm text-stone-500 dark:text-stone-400">
|
||||
Add everyone else's name now, or skip and add them later from settings.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<input
|
||||
v-for="(_, index) in names"
|
||||
:key="index"
|
||||
v-model="names[index]"
|
||||
type="text"
|
||||
class="block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base 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-900 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
|
||||
placeholder="Participant name"
|
||||
>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="w-full rounded-xl border border-dashed border-stone-300 px-4 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-400 dark:hover:border-orange-700 dark:hover:text-orange-400"
|
||||
@click="addRow"
|
||||
>
|
||||
+ Add another
|
||||
</button>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="flex-1 rounded-xl border border-stone-300 px-4 py-2 font-medium text-stone-700 dark:border-stone-700 dark:text-stone-300"
|
||||
@click="skip"
|
||||
>
|
||||
Skip
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:disabled="saving"
|
||||
class="flex-1 rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600 active:bg-orange-600 disabled:opacity-50"
|
||||
@click="continueToPot"
|
||||
>
|
||||
{{ saving ? 'Saving…' : 'Continue' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,31 @@
|
||||
export interface ParticipantView {
|
||||
id: number
|
||||
name: string
|
||||
paymentLink: string | null
|
||||
}
|
||||
|
||||
export type ExpenseType = 'expense' | 'payment'
|
||||
|
||||
export interface ExpenseView {
|
||||
id: number
|
||||
type: ExpenseType
|
||||
description: string
|
||||
amountCents: number
|
||||
payerId: number
|
||||
participantIds: number[]
|
||||
createdAt: number
|
||||
}
|
||||
|
||||
export interface SettlementView {
|
||||
fromId: number
|
||||
toId: number
|
||||
amountCents: number
|
||||
}
|
||||
|
||||
export interface PotView {
|
||||
pot: { slug: string, name: string, currency: string }
|
||||
participants: ParticipantView[]
|
||||
expenses: ExpenseView[]
|
||||
netBalances: Record<number, number>
|
||||
settlements: SettlementView[]
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { readIdentity, writeIdentity } from './identity'
|
||||
|
||||
function createMockStorage(): Storage {
|
||||
const store = new Map<string, string>()
|
||||
return {
|
||||
getItem: (key: string) => store.get(key) ?? null,
|
||||
setItem: (key: string, value: string) => void store.set(key, value),
|
||||
removeItem: (key: string) => void store.delete(key),
|
||||
clear: () => store.clear(),
|
||||
key: () => null,
|
||||
get length() { return store.size },
|
||||
}
|
||||
}
|
||||
|
||||
describe('identity storage', () => {
|
||||
it('returns null when nothing is stored', () => {
|
||||
expect(readIdentity(createMockStorage())).toBeNull()
|
||||
})
|
||||
|
||||
it('round-trips a written identity', () => {
|
||||
const storage = createMockStorage()
|
||||
writeIdentity(storage, { name: 'Alice' })
|
||||
expect(readIdentity(storage)).toEqual({ name: 'Alice' })
|
||||
})
|
||||
|
||||
it('ignores malformed JSON', () => {
|
||||
const storage = createMockStorage()
|
||||
storage.setItem('stb:identity', '{not json')
|
||||
expect(readIdentity(storage)).toBeNull()
|
||||
})
|
||||
|
||||
it('ignores an empty stored name', () => {
|
||||
const storage = createMockStorage()
|
||||
storage.setItem('stb:identity', JSON.stringify({ name: ' ' }))
|
||||
expect(readIdentity(storage)).toBeNull()
|
||||
})
|
||||
|
||||
it('overwrites a previously stored identity', () => {
|
||||
const storage = createMockStorage()
|
||||
writeIdentity(storage, { name: 'Alice' })
|
||||
writeIdentity(storage, { name: 'Bob' })
|
||||
expect(readIdentity(storage)).toEqual({ name: 'Bob' })
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,26 @@
|
||||
const STORAGE_KEY = 'stb:identity'
|
||||
|
||||
export interface Identity {
|
||||
name: string
|
||||
}
|
||||
|
||||
type StorageLike = Pick<Storage, 'getItem' | 'setItem'>
|
||||
|
||||
export function readIdentity(storage: StorageLike): Identity | null {
|
||||
const raw = storage.getItem(STORAGE_KEY)
|
||||
if (!raw) return null
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(raw)
|
||||
if (typeof parsed?.name !== 'string' || !parsed.name.trim()) return null
|
||||
|
||||
return { name: parsed.name }
|
||||
}
|
||||
catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export function writeIdentity(storage: StorageLike, identity: Identity): void {
|
||||
storage.setItem(STORAGE_KEY, JSON.stringify(identity))
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { readCachedPaymentLink, writeCachedPaymentLink } from './paymentLinkCache'
|
||||
|
||||
function createMockStorage(): Storage {
|
||||
const store = new Map<string, string>()
|
||||
return {
|
||||
getItem: (key: string) => store.get(key) ?? null,
|
||||
setItem: (key: string, value: string) => void store.set(key, value),
|
||||
removeItem: (key: string) => void store.delete(key),
|
||||
clear: () => store.clear(),
|
||||
key: () => null,
|
||||
get length() { return store.size },
|
||||
}
|
||||
}
|
||||
|
||||
describe('payment link cache', () => {
|
||||
it('returns null when nothing is cached', () => {
|
||||
expect(readCachedPaymentLink(createMockStorage())).toBeNull()
|
||||
})
|
||||
|
||||
it('round-trips a cached link', () => {
|
||||
const storage = createMockStorage()
|
||||
writeCachedPaymentLink(storage, 'https://paypal.me/alice')
|
||||
expect(readCachedPaymentLink(storage)).toBe('https://paypal.me/alice')
|
||||
})
|
||||
|
||||
it('overwrites a previously cached link', () => {
|
||||
const storage = createMockStorage()
|
||||
writeCachedPaymentLink(storage, 'https://paypal.me/alice')
|
||||
writeCachedPaymentLink(storage, 'https://paypal.me/bob')
|
||||
expect(readCachedPaymentLink(storage)).toBe('https://paypal.me/bob')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,11 @@
|
||||
const STORAGE_KEY = 'stb:last-payment-link'
|
||||
|
||||
type StorageLike = Pick<Storage, 'getItem' | 'setItem'>
|
||||
|
||||
export function readCachedPaymentLink(storage: StorageLike): string | null {
|
||||
return storage.getItem(STORAGE_KEY) || null
|
||||
}
|
||||
|
||||
export function writeCachedPaymentLink(storage: StorageLike, link: string): void {
|
||||
storage.setItem(STORAGE_KEY, link)
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { readVisitedPots, recordVisitedPot } from './visitedPots'
|
||||
|
||||
function createMockStorage(): Storage {
|
||||
const store = new Map<string, string>()
|
||||
return {
|
||||
getItem: (key: string) => store.get(key) ?? null,
|
||||
setItem: (key: string, value: string) => void store.set(key, value),
|
||||
removeItem: (key: string) => void store.delete(key),
|
||||
clear: () => store.clear(),
|
||||
key: () => null,
|
||||
get length() { return store.size },
|
||||
}
|
||||
}
|
||||
|
||||
describe('visited pots storage', () => {
|
||||
it('returns an empty list when nothing is stored', () => {
|
||||
expect(readVisitedPots(createMockStorage())).toEqual([])
|
||||
})
|
||||
|
||||
it('records a visited pot', () => {
|
||||
const storage = createMockStorage()
|
||||
recordVisitedPot(storage, { slug: 'abc', name: 'Lisbon Trip', currency: 'EUR' })
|
||||
expect(readVisitedPots(storage)).toEqual([
|
||||
expect.objectContaining({ slug: 'abc', name: 'Lisbon Trip', currency: 'EUR' }),
|
||||
])
|
||||
})
|
||||
|
||||
it('moves a re-visited pot to the front instead of duplicating it', () => {
|
||||
const storage = createMockStorage()
|
||||
recordVisitedPot(storage, { slug: 'abc', name: 'Lisbon Trip', currency: 'EUR' })
|
||||
recordVisitedPot(storage, { slug: 'def', name: 'Ski Weekend', currency: 'CHF' })
|
||||
recordVisitedPot(storage, { slug: 'abc', name: 'Lisbon Trip', currency: 'EUR' })
|
||||
|
||||
const pots = readVisitedPots(storage)
|
||||
expect(pots).toHaveLength(2)
|
||||
expect(pots[0]?.slug).toBe('abc')
|
||||
})
|
||||
|
||||
it('updates the stored name and currency on revisit', () => {
|
||||
const storage = createMockStorage()
|
||||
recordVisitedPot(storage, { slug: 'abc', name: 'Old Name', currency: 'EUR' })
|
||||
recordVisitedPot(storage, { slug: 'abc', name: 'New Name', currency: 'USD' })
|
||||
|
||||
expect(readVisitedPots(storage)).toEqual([
|
||||
expect.objectContaining({ slug: 'abc', name: 'New Name', currency: 'USD' }),
|
||||
])
|
||||
})
|
||||
|
||||
it('ignores malformed JSON', () => {
|
||||
const storage = createMockStorage()
|
||||
storage.setItem('stb:visited-pots', '{not json')
|
||||
expect(readVisitedPots(storage)).toEqual([])
|
||||
})
|
||||
|
||||
it('caps the list at 20 entries, keeping the most recent', () => {
|
||||
const storage = createMockStorage()
|
||||
for (let i = 0; i < 25; i++) {
|
||||
recordVisitedPot(storage, { slug: `pot-${i}`, name: `Pot ${i}`, currency: 'EUR' })
|
||||
}
|
||||
|
||||
const pots = readVisitedPots(storage)
|
||||
expect(pots).toHaveLength(20)
|
||||
expect(pots[0]?.slug).toBe('pot-24')
|
||||
expect(pots.some(p => p.slug === 'pot-0')).toBe(false)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,40 @@
|
||||
const STORAGE_KEY = 'stb:visited-pots'
|
||||
const MAX_ENTRIES = 20
|
||||
|
||||
export interface VisitedPot {
|
||||
slug: string
|
||||
name: string
|
||||
currency: string
|
||||
visitedAt: number
|
||||
}
|
||||
|
||||
type StorageLike = Pick<Storage, 'getItem' | 'setItem'>
|
||||
|
||||
export function readVisitedPots(storage: StorageLike): VisitedPot[] {
|
||||
const raw = storage.getItem(STORAGE_KEY)
|
||||
if (!raw) return []
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(raw)
|
||||
if (!Array.isArray(parsed)) return []
|
||||
return parsed.filter((item): item is VisitedPot =>
|
||||
typeof item?.slug === 'string' && item.slug.trim() !== ''
|
||||
&& typeof item?.name === 'string'
|
||||
&& typeof item?.currency === 'string'
|
||||
&& typeof item?.visitedAt === 'number',
|
||||
)
|
||||
}
|
||||
catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export function recordVisitedPot(storage: StorageLike, pot: Omit<VisitedPot, 'visitedAt'>): VisitedPot[] {
|
||||
const rest = readVisitedPots(storage).filter(p => p.slug !== pot.slug)
|
||||
const updated = [{ ...pot, visitedAt: Date.now() }, ...rest]
|
||||
.sort((a, b) => b.visitedAt - a.visitedAt)
|
||||
.slice(0, MAX_ENTRIES)
|
||||
|
||||
storage.setItem(STORAGE_KEY, JSON.stringify(updated))
|
||||
return updated
|
||||
}
|
||||
Reference in New Issue
Block a user