98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
// routes/tenant/payment-methods/index.tsx
|
|
import { define } from "../../../utils.ts";
|
|
import { page } from "fresh";
|
|
import { PaymentMethod } from "../../../services/paymentService.ts";
|
|
import PaymentMethodsList from "../../../islands/PaymentMethodsList.tsx";
|
|
|
|
interface PaymentMethodsPageData {
|
|
paymentMethods?: PaymentMethod[];
|
|
error?: string;
|
|
}
|
|
|
|
export const handler = define.handlers({
|
|
async GET(ctx) {
|
|
const { user_id } = ctx.state.data;
|
|
|
|
if (!user_id) {
|
|
return new Response("", {
|
|
status: 302,
|
|
headers: { Location: "/auth/login" },
|
|
});
|
|
}
|
|
|
|
try {
|
|
const response = await fetch("/api/retrieve/payment_methods", {
|
|
headers: {
|
|
"Cookie": ctx.req.headers.get("Cookie") || "",
|
|
},
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!data.success) {
|
|
console.error("Failed to fetch payment methods:", data.error);
|
|
return page<PaymentMethodsPageData>({
|
|
error: "Failed to load payment methods",
|
|
});
|
|
}
|
|
|
|
return page<PaymentMethodsPageData>({
|
|
paymentMethods: data.payment_methods || [],
|
|
});
|
|
} catch (error) {
|
|
console.error("Error loading payment methods:", error);
|
|
return page<PaymentMethodsPageData>({
|
|
error: "Failed to load payment methods",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
|
|
export default define.page(function PaymentMethodsPage({
|
|
data,
|
|
}: {
|
|
data: PaymentMethodsPageData;
|
|
}) {
|
|
const { paymentMethods, error } = data as PaymentMethodsPageData;
|
|
|
|
if (error) {
|
|
return (
|
|
<div class="min-h-screen bg-gray-50 p-8">
|
|
<div class="max-w-4xl mx-auto">
|
|
<h1 class="text-3xl font-bold text-red-600 mb-4">Error</h1>
|
|
<p class="text-gray-700">{error}</p>
|
|
<div class="mt-6">
|
|
<a
|
|
href="/tenant/dashboard"
|
|
class="text-blue-600 hover:text-blue-500 font-medium"
|
|
>
|
|
Go to Dashboard
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div class="min-h-screen bg-gray-50">
|
|
<div class="bg-white shadow">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="py-6">
|
|
<h1 class="text-3xl font-bold text-gray-900">
|
|
Payment Methods
|
|
</h1>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Manage your payment methods for rent payments.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-4xl mx-auto sm:px-6 lg:px-8 py-8">
|
|
<PaymentMethodsList paymentMethods={paymentMethods || []} />
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|