Apply patch [skip ci]
This commit is contained in:
open-swe-dev-andrinoid[bot]
parent
6575c0fcd3
commit
f6cb8cdbf3
300
islands/PaymentMethodsList.tsx
Normal file
300
islands/PaymentMethodsList.tsx
Normal file
@ -0,0 +1,300 @@
|
||||
// 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user