Apply patch [skip ci]
This commit is contained in:
open-swe-dev-andrinoid[bot]
parent
9d32ac4968
commit
ee8aa46bbf
@ -30,7 +30,7 @@ export default function PaymentMethodsList(
|
||||
ProcessedPaymentMethod[]
|
||||
>([]);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [_isOpeningModal, setIsOpeningModal] = useState(openModal);
|
||||
const [_isOpeningModal, _setIsOpeningModal] = useState(openModal);
|
||||
|
||||
// Process payment methods on component mount and when paymentMethods or userId change
|
||||
useEffect(() => {
|
||||
@ -63,7 +63,7 @@ export default function PaymentMethodsList(
|
||||
const updatedMethods: ProcessedPaymentMethod[] = [];
|
||||
|
||||
for (const method of paymentMethods) {
|
||||
const processedMethod = { ...method };
|
||||
const processedMethod: ProcessedPaymentMethod = { ...method };
|
||||
|
||||
// Decrypt and mask account number
|
||||
if (method.account_number_encrypted) {
|
||||
@ -75,8 +75,8 @@ export default function PaymentMethodsList(
|
||||
if (decryptedData) {
|
||||
const accountNumber = decryptedData;
|
||||
// Show only last 4 digits
|
||||
processedMethod.maskedAccountNumber = "****" +
|
||||
accountNumber.slice(-4);
|
||||
processedMethod.maskedAccountNumber =
|
||||
"****" + accountNumber.slice(-4);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to decrypt account number:", error);
|
||||
@ -93,8 +93,8 @@ export default function PaymentMethodsList(
|
||||
if (decryptedData) {
|
||||
const routingNumber = decryptedData;
|
||||
// Show only last 4 digits
|
||||
processedMethod.maskedRoutingNumber = "****" +
|
||||
routingNumber.slice(-4);
|
||||
processedMethod.maskedRoutingNumber =
|
||||
"****" + routingNumber.slice(-4);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to decrypt routing number:", error);
|
||||
@ -147,155 +147,153 @@ export default function PaymentMethodsList(
|
||||
{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>
|
||||
{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="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors"
|
||||
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>
|
||||
)
|
||||
: (
|
||||
<>
|
||||
<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