modrinth/apps/frontend/src/pages/settings/billing/charges.vue

<template>
	<div>
		<section class="card">
			<Breadcrumbs
				current-title="Past charges"
				:link-stack="[{ href: '/settings/billing', label: 'Billing and subscriptions' }]"
			/>
			<h2>Past charges</h2>
			<p>All of your past charges to your Modrinth account will be listed here:</p>
			<div
				v-for="charge in charges"
				:key="charge.id"
				class="universal-card recessed flex items-center justify-between gap-4"
			>
				<div class="flex flex-col gap-1">
					<div class="flex items-center gap-1">
						<span class="font-bold text-primary">
							<template v-if="charge.product?.metadata?.type === 'midas'"> Modrinth Plus </template>
							<template v-else-if="charge.product?.metadata?.type === 'pyro'">
								Modrinth Hosting
							</template>
							<template v-else> Medal Server Trial </template>
							<template v-if="charge.subscription_interval">
								{{ charge.subscription_interval }}
							</template>
						</span>
						⋅
						<span>{{ formatPrice(charge.amount, charge.currency_code) }}</span>
					</div>
					<div class="flex items-center gap-1">
						<Badge :color="charge.status === 'succeeded' ? 'green' : 'red'" :type="charge.status" />
						⋅
						{{ formatDate(charge.due) }}
					</div>
				</div>
			</div>
		</section>
	</div>
</template>
<script setup>
import {
	Badge,
	Breadcrumbs,
	injectModrinthClient,
	useFormatDateTime,
	useFormatPrice,
} from '@modrinth/ui'
import { useQuery } from '@tanstack/vue-query'

import { products } from '~/generated/state.json'

definePageMeta({
	middleware: 'auth',
})

const client = injectModrinthClient()

const formatPrice = useFormatPrice()
const formatDate = useFormatDateTime({
	year: 'numeric',
	month: '2-digit',
	day: '2-digit',
})

const { data: charges } = useQuery({
	queryKey: ['billing', 'payments'],
	queryFn: async () => {
		const charges = await client.labrinth.billing_internal.getPayments()
		return charges
			.filter((charge) => charge.status !== 'open' && charge.status !== 'cancelled')
			.map((charge) => {
				const product = products.find((product) =>
					product.prices.some((price) => price.id === charge.price_id),
				)

				charge.product = product

				return charge
			})
	},
	placeholderData: [],
})
</script>