Fix refund frontend

This commit is contained in:
Jai A 2025-01-17 17:20:12 -08:00
parent 0f4af98a21
commit af791f78b7
No known key found for this signature in database
GPG Key ID: 9A9F9B7250E9883C

View File

@ -25,7 +25,10 @@
Amount Amount
<span class="text-brand-red">*</span> <span class="text-brand-red">*</span>
</span> </span>
<span> Enter the amount in cents of USD. For example for $2, enter 200. </span> <span>
Enter the amount in cents of USD. For example for $2, enter 200. (net
{{ selectedCharge.net }})
</span>
</label> </label>
<input id="amount" v-model="refundAmount" type="number" autocomplete="off" /> <input id="amount" v-model="refundAmount" type="number" autocomplete="off" />
</div> </div>
@ -46,7 +49,7 @@
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<ButtonStyled color="brand"> <ButtonStyled color="brand">
<button @click="refundCharge"> <button :disabled="refunding" @click="refundCharge">
<CheckIcon aria-hidden="true" /> <CheckIcon aria-hidden="true" />
Refund charge Refund charge
</button> </button>
@ -89,13 +92,15 @@
:type="charge.status" :type="charge.status"
/> />
{{ charge.type }}
{{ $dayjs(charge.due).format("YYYY-MM-DD") }} {{ $dayjs(charge.due).format("YYYY-MM-DD") }}
<span>{{ formatPrice(vintl.locale, charge.amount, charge.currency_code) }}</span> <span>{{ formatPrice(vintl.locale, charge.amount, charge.currency_code) }}</span>
<template v-if="subscription.interval"> {{ subscription.interval }} </template> <template v-if="subscription.interval"> {{ subscription.interval }} </template>
</div> </div>
<button <button
v-if="charge.status === 'succeeded'" v-if="charge.status === 'succeeded' && charge.type !== 'refund'"
class="btn" class="btn"
@click="showRefundModal(charge)" @click="showRefundModal(charge)"
> >
@ -137,9 +142,9 @@ if (!user.value) {
}); });
} }
let subscriptions, charges; let subscriptions, charges, refreshCharges;
try { try {
[{ data: subscriptions }, { data: charges }] = await Promise.all([ [{ data: subscriptions }, { data: charges, refreshCharges }] = await Promise.all([
useAsyncData(`billing/subscriptions?user_id=${route.params.id}`, () => useAsyncData(`billing/subscriptions?user_id=${route.params.id}`, () =>
useBaseFetch(`billing/subscriptions?user_id=${user.value.id}`, { useBaseFetch(`billing/subscriptions?user_id=${user.value.id}`, {
internal: true, internal: true,
@ -171,6 +176,7 @@ const subscriptionCharges = computed(() => {
}); });
}); });
const refunding = ref(false);
const refundModal = ref(); const refundModal = ref();
const selectedCharge = ref(null); const selectedCharge = ref(null);
const refundType = ref("full"); const refundType = ref("full");
@ -187,6 +193,7 @@ function showRefundModal(charge) {
} }
async function refundCharge() { async function refundCharge() {
refunding.value = true;
try { try {
await useBaseFetch(`billing/charge/${selectedCharge.value.id}/refund`, { await useBaseFetch(`billing/charge/${selectedCharge.value.id}/refund`, {
method: "POST", method: "POST",
@ -197,14 +204,16 @@ async function refundCharge() {
}), }),
internal: true, internal: true,
}); });
await refreshCharges();
refundModal.value.hide();
} catch (err) { } catch (err) {
data.$notify({ data.$notify({
group: "main", group: "main",
title: "Error resubscribing", title: "Error refunding",
text: err.message ?? (err.data ? err.data.description : err), text: err.data?.description ?? err,
type: "error", type: "error",
}); });
} }
return data; refunding.value = false;
} }
</script> </script>