303 lines
11 KiB
TypeScript
303 lines
11 KiB
TypeScript
// islands/PaymentMethodsList.tsx
|
|
import { PaymentMethod } from "../services/paymentService.ts";
|
|
import { useEffect, useState } from "preact/hooks";
|
|
import { PopAddPaymentMethodDialog } from "./dialogs/PopAddPaymentMethodDialog.tsx";
|
|
import {
|
|
decryptDataWithStoredPassword,
|
|
getEncryptionPassword,
|
|
} from "../helpers.ts";
|
|
|
|
interface Props {
|
|
paymentMethods: PaymentMethod[];
|
|
userId?: string;
|
|
openModal?: boolean;
|
|
}
|
|
|
|
interface ProcessedPaymentMethod extends PaymentMethod {
|
|
maskedAccountNumber?: string;
|
|
maskedRoutingNumber?: string;
|
|
}
|
|
|
|
export default function PaymentMethodsList(
|
|
{ paymentMethods, userId, openModal = false }: Props,
|
|
) {
|
|
const [popAddPaymentMethod, popupAddPaymentMethodDialog] =
|
|
PopAddPaymentMethodDialog({
|
|
userId,
|
|
defaultOpen: openModal,
|
|
});
|
|
const [processedMethods, setProcessedMethods] = useState<
|
|
ProcessedPaymentMethod[]
|
|
>([]);
|
|
const [isProcessing, setIsProcessing] = useState(false);
|
|
const [isOpeningModal, setIsOpeningModal] = useState(openModal);
|
|
|
|
// Process payment methods on component mount and when paymentMethods or userId change
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
const lockRoute = localStorage.getItem("lock-route");
|
|
const url = new URL(globalThis.location.href);
|
|
const currentRoute = url.pathname + url.search;
|
|
|
|
if (lockRoute && lockRoute === currentRoute) {
|
|
localStorage.removeItem("lock-route");
|
|
}
|
|
}, 100);
|
|
|
|
if (!userId) {
|
|
setProcessedMethods(paymentMethods as ProcessedPaymentMethod[]);
|
|
return;
|
|
}
|
|
|
|
const processMethods = async () => {
|
|
setIsProcessing(true);
|
|
const encryptionPassword = getEncryptionPassword(userId);
|
|
|
|
if (!encryptionPassword) {
|
|
// No encryption key available, use methods as-is
|
|
setProcessedMethods(paymentMethods as ProcessedPaymentMethod[]);
|
|
setIsProcessing(false);
|
|
return;
|
|
}
|
|
|
|
const updatedMethods: ProcessedPaymentMethod[] = [];
|
|
|
|
for (const method of paymentMethods) {
|
|
const processedMethod = { ...method };
|
|
|
|
// Decrypt and mask account number
|
|
if (method.account_number_encrypted) {
|
|
try {
|
|
const decryptedData = await decryptDataWithStoredPassword(
|
|
userId,
|
|
method.account_number_encrypted,
|
|
);
|
|
if (decryptedData) {
|
|
const accountNumber = decryptedData;
|
|
// Show only last 4 digits
|
|
processedMethod.maskedAccountNumber = "****" +
|
|
accountNumber.slice(-4);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to decrypt account number:", error);
|
|
}
|
|
}
|
|
|
|
// Decrypt and mask routing number
|
|
if (method.routing_number_encrypted) {
|
|
try {
|
|
const decryptedData = await decryptDataWithStoredPassword(
|
|
userId,
|
|
method.routing_number_encrypted,
|
|
);
|
|
if (decryptedData) {
|
|
const routingNumber = decryptedData;
|
|
// Show only last 4 digits
|
|
processedMethod.maskedRoutingNumber = "****" +
|
|
routingNumber.slice(-4);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to decrypt routing number:", error);
|
|
}
|
|
}
|
|
|
|
updatedMethods.push(processedMethod);
|
|
}
|
|
|
|
setProcessedMethods(updatedMethods);
|
|
setIsProcessing(false);
|
|
};
|
|
|
|
processMethods();
|
|
}, [paymentMethods, userId]);
|
|
|
|
const handleSetDefault = async (methodId: string) => {
|
|
try {
|
|
const response = await fetch("/api/update/payment_method", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ id: methodId, is_default: true }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
// Refresh the page to show updated default
|
|
window.location.reload();
|
|
} else {
|
|
console.error("Failed to set default payment method:", data.error);
|
|
alert("Failed to set default payment method");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error setting default payment method:", error);
|
|
alert("Failed to set default payment method");
|
|
}
|
|
};
|
|
|
|
if (isProcessing) {
|
|
return (
|
|
<div class="flex items-center justify-center py-12">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{popupAddPaymentMethodDialog}
|
|
|
|
<div class="space-y-4">
|
|
{processedMethods.length === 0
|
|
? (
|
|
<div class="text-center py-12 bg-white rounded-lg shadow">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-16 w-16 mx-auto text-gray-400 mb-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
|
|
/>
|
|
</svg>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">
|
|
No payment methods
|
|
</h3>
|
|
<p class="text-gray-500 mb-6">
|
|
Add a payment method to get started with rent payments.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsOpeningModal(true)}
|
|
class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors"
|
|
>
|
|
Add Payment Method
|
|
</button>
|
|
</div>
|
|
)
|
|
: (
|
|
<>
|
|
<ul class="space-y-4">
|
|
{processedMethods.map((method) => (
|
|
<li
|
|
key={method.id}
|
|
class="bg-white rounded-lg shadow p-6 relative"
|
|
>
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
{method.bank_name || "Bank Account"}
|
|
</h3>
|
|
{method.is_default && (
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
Default
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div class="space-y-1 text-sm text-gray-600">
|
|
<div>
|
|
<span class="font-medium">Type:</span>{" "}
|
|
{method.account_type === "checking"
|
|
? "Checking"
|
|
: method.account_type === "savings"
|
|
? "Savings"
|
|
: method.account_type || "Unknown"}
|
|
</div>
|
|
<div>
|
|
<span class="font-medium">Account:</span>{" "}
|
|
{method.maskedAccountNumber || "****"}
|
|
</div>
|
|
<div>
|
|
<span class="font-medium">Routing:</span>{" "}
|
|
{method.maskedRoutingNumber || "****"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 ml-4">
|
|
{!method.is_default && (
|
|
<button
|
|
type="button"
|
|
onClick={() => handleSetDefault(method.id!)}
|
|
class="text-blue-600 hover:text-blue-700 text-sm font-medium px-3 py-1.5 rounded border border-blue-600 hover:bg-blue-50 transition-colors"
|
|
>
|
|
Set Default
|
|
</button>
|
|
)}
|
|
|
|
<form
|
|
method="POST"
|
|
action="/api/delete/payment_method"
|
|
class="inline"
|
|
>
|
|
<input type="hidden" name="id" value={method.id} />
|
|
<input
|
|
type="hidden"
|
|
name="sender"
|
|
value={typeof location !== "undefined"
|
|
? location.pathname
|
|
: ""}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
aria-label="Delete payment method"
|
|
class="text-red-600 hover:text-red-700 p-2 rounded hover:bg-red-50 transition-colors"
|
|
title="Delete payment method"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div class="mt-6">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsOpeningModal(true)}
|
|
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg shadow transition-colors flex items-center justify-center gap-2"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 4v16m8-8H4"
|
|
/>
|
|
</svg>
|
|
Add Payment Method
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|