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[]
|
ProcessedPaymentMethod[]
|
||||||
>([]);
|
>([]);
|
||||||
const [isProcessing, setIsProcessing] = useState(false);
|
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
|
// Process payment methods on component mount and when paymentMethods or userId change
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -63,7 +63,7 @@ export default function PaymentMethodsList(
|
|||||||
const updatedMethods: ProcessedPaymentMethod[] = [];
|
const updatedMethods: ProcessedPaymentMethod[] = [];
|
||||||
|
|
||||||
for (const method of paymentMethods) {
|
for (const method of paymentMethods) {
|
||||||
const processedMethod = { ...method };
|
const processedMethod: ProcessedPaymentMethod = { ...method };
|
||||||
|
|
||||||
// Decrypt and mask account number
|
// Decrypt and mask account number
|
||||||
if (method.account_number_encrypted) {
|
if (method.account_number_encrypted) {
|
||||||
@ -75,8 +75,8 @@ export default function PaymentMethodsList(
|
|||||||
if (decryptedData) {
|
if (decryptedData) {
|
||||||
const accountNumber = decryptedData;
|
const accountNumber = decryptedData;
|
||||||
// Show only last 4 digits
|
// Show only last 4 digits
|
||||||
processedMethod.maskedAccountNumber = "****" +
|
processedMethod.maskedAccountNumber =
|
||||||
accountNumber.slice(-4);
|
"****" + accountNumber.slice(-4);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Failed to decrypt account number:", error);
|
console.error("Failed to decrypt account number:", error);
|
||||||
@ -93,8 +93,8 @@ export default function PaymentMethodsList(
|
|||||||
if (decryptedData) {
|
if (decryptedData) {
|
||||||
const routingNumber = decryptedData;
|
const routingNumber = decryptedData;
|
||||||
// Show only last 4 digits
|
// Show only last 4 digits
|
||||||
processedMethod.maskedRoutingNumber = "****" +
|
processedMethod.maskedRoutingNumber =
|
||||||
routingNumber.slice(-4);
|
"****" + routingNumber.slice(-4);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Failed to decrypt routing number:", error);
|
console.error("Failed to decrypt routing number:", error);
|
||||||
@ -147,155 +147,153 @@ export default function PaymentMethodsList(
|
|||||||
{popupAddPaymentMethodDialog}
|
{popupAddPaymentMethodDialog}
|
||||||
|
|
||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
{processedMethods.length === 0
|
{processedMethods.length === 0 ? (
|
||||||
? (
|
<div class="text-center py-12 bg-white rounded-lg shadow">
|
||||||
<div class="text-center py-12 bg-white rounded-lg shadow">
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
class="h-16 w-16 mx-auto text-gray-400 mb-4"
|
||||||
class="h-16 w-16 mx-auto text-gray-400 mb-4"
|
fill="none"
|
||||||
fill="none"
|
viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24"
|
stroke="currentColor"
|
||||||
stroke="currentColor"
|
>
|
||||||
>
|
<path
|
||||||
<path
|
strokeLinecap="round"
|
||||||
strokeLinecap="round"
|
strokeLinejoin="round"
|
||||||
strokeLinejoin="round"
|
strokeWidth={2}
|
||||||
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"
|
||||||
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>
|
||||||
</svg>
|
<h3 class="text-lg font-medium text-gray-900 mb-2">
|
||||||
<h3 class="text-lg font-medium text-gray-900 mb-2">
|
No payment methods
|
||||||
No payment methods
|
</h3>
|
||||||
</h3>
|
<p class="text-gray-500 mb-6">
|
||||||
<p class="text-gray-500 mb-6">
|
Add a payment method to get started with rent payments.
|
||||||
Add a payment method to get started with rent payments.
|
</p>
|
||||||
</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
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setIsOpeningModal(true)}
|
onClick={() => _setIsOpeningModal(true)}
|
||||||
class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors"
|
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
|
Add Payment Method
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user