Apply patch [skip ci]
This commit is contained in:
open-swe-dev-andrinoid[bot]
parent
a7ea2b5284
commit
030f995082
321
islands/dialogs/AddPaymentMethodDialog.tsx
Normal file
321
islands/dialogs/AddPaymentMethodDialog.tsx
Normal file
@ -0,0 +1,321 @@
|
||||
import { useEffect, useRef, useState } from "preact/hooks";
|
||||
import {
|
||||
encryptDataWithStoredPassword,
|
||||
getEncryptionPassword,
|
||||
} from "../../helpers.ts";
|
||||
|
||||
interface AddPaymentMethodDialogProps {
|
||||
onClose: () => void;
|
||||
userId?: string;
|
||||
}
|
||||
|
||||
type FieldErrorState = {
|
||||
bank_name: boolean;
|
||||
account_type: boolean;
|
||||
routing_number: boolean;
|
||||
account_number: boolean;
|
||||
};
|
||||
|
||||
export default function AddPaymentMethodDialog(
|
||||
{ onClose, userId }: AddPaymentMethodDialogProps,
|
||||
) {
|
||||
const formRef = useRef<HTMLFormElement>(null);
|
||||
const firstInputRef = useRef<HTMLInputElement>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [fieldErrors, setFieldErrors] = useState<FieldErrorState>({
|
||||
bank_name: false,
|
||||
account_type: false,
|
||||
routing_number: false,
|
||||
account_number: false,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
// Focus first input when dialog opens
|
||||
setTimeout(() => {
|
||||
firstInputRef.current?.focus();
|
||||
}, 100);
|
||||
}, []);
|
||||
|
||||
const clearFieldError = (field: keyof FieldErrorState) => {
|
||||
setFieldErrors((prev) => ({ ...prev, [field]: false }));
|
||||
};
|
||||
|
||||
const getInputErrorClass = (hasError: boolean) => {
|
||||
return hasError ? "border-red-500 focus:border-red-500" : "";
|
||||
};
|
||||
|
||||
const addNewPaymentMethod = async () => {
|
||||
if (!formRef.current) return;
|
||||
|
||||
// Collect form data
|
||||
const formData = new FormData(formRef.current);
|
||||
const bankName = formData.get("bank_name")?.toString().trim() || "";
|
||||
const accountType = formData.get("account_type")?.toString() || "";
|
||||
const routingNumber = formData.get("routing_number")?.toString().trim() || "";
|
||||
const accountNumber = formData.get("account_number")?.toString().trim() || "";
|
||||
const isDefault = formData.get("is_default") === "true";
|
||||
const sender = typeof location !== "undefined" ? location.pathname : "/";
|
||||
|
||||
const validation = {
|
||||
bank_name: !bankName,
|
||||
account_type: !accountType,
|
||||
routing_number: !routingNumber || routingNumber.length !== 9,
|
||||
account_number: !accountNumber || accountNumber.length < 4,
|
||||
};
|
||||
setFieldErrors(validation);
|
||||
|
||||
if (validation.bank_name || validation.account_type ||
|
||||
validation.routing_number || validation.account_number) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
localStorage.setItem("lock-route", "/tenant/payment-methods?modal=off");
|
||||
|
||||
// Build submission data
|
||||
const submitData = new FormData();
|
||||
submitData.set("sender", sender);
|
||||
submitData.set("bank_name", bankName);
|
||||
submitData.set("account_type", accountType);
|
||||
submitData.set("is_default", isDefault ? "true" : "false");
|
||||
|
||||
// Encrypt sensitive fields if password is available
|
||||
const encryptionPassword = userId ? getEncryptionPassword(userId) : null;
|
||||
|
||||
if (encryptionPassword && (routingNumber || accountNumber)) {
|
||||
try {
|
||||
// Encrypt routing number
|
||||
const encryptedRoutingNumber = await encryptDataWithStoredPassword(
|
||||
userId!,
|
||||
routingNumber,
|
||||
);
|
||||
|
||||
// Encrypt account number
|
||||
const encryptedAccountNumber = await encryptDataWithStoredPassword(
|
||||
userId!,
|
||||
accountNumber,
|
||||
);
|
||||
|
||||
if (encryptedRoutingNumber && encryptedAccountNumber) {
|
||||
submitData.set("routing_number_encrypted", encryptedRoutingNumber);
|
||||
submitData.set("account_number_encrypted", encryptedAccountNumber);
|
||||
// Send empty plaintext when encrypted
|
||||
submitData.set("routing_number", "");
|
||||
submitData.set("account_number", "");
|
||||
} else {
|
||||
throw new Error("Encryption returned empty result");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Encryption failed:", error);
|
||||
alert("Failed to encrypt payment method data. Please try again.");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
// No encryption available, send plaintext (not recommended for production)
|
||||
console.warn("No encryption password available, sending plaintext");
|
||||
submitData.set("routing_number", routingNumber);
|
||||
submitData.set("account_number", accountNumber);
|
||||
}
|
||||
|
||||
// Submit the form
|
||||
try {
|
||||
const response = await fetch("/api/create/payment_method", {
|
||||
method: "POST",
|
||||
body: submitData,
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
// Redirect to payment methods page
|
||||
globalThis.location.href = "/tenant/payment-methods";
|
||||
} else {
|
||||
console.error("Failed to add payment method:", data.error);
|
||||
alert(data.error || "Failed to add payment method. Please try again.");
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error adding payment method:", error);
|
||||
alert("Failed to add payment method. Please try again.");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
|
||||
<div class="p-6">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">
|
||||
Add Payment Method
|
||||
</h2>
|
||||
|
||||
<form ref={formRef}>
|
||||
<div class="flex flex-col gap-1 my-4">
|
||||
<label
|
||||
for="bank_name"
|
||||
class="text-sm font-medium text-gray-700"
|
||||
>
|
||||
Bank Name
|
||||
</label>
|
||||
<input
|
||||
ref={firstInputRef}
|
||||
class={`w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||
getInputErrorClass(fieldErrors.bank_name)
|
||||
}`}
|
||||
name="bank_name"
|
||||
placeholder="e.g., Chase Bank"
|
||||
type="text"
|
||||
required
|
||||
onInput={() => clearFieldError("bank_name")}
|
||||
/>
|
||||
<div
|
||||
class={`text-red-500 text-xs min-h-4 ${
|
||||
fieldErrors.bank_name ? "visible" : "invisible"
|
||||
}`}
|
||||
aria-live="polite"
|
||||
>
|
||||
Bank name is required.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1 my-4">
|
||||
<label
|
||||
for="account_type"
|
||||
class="text-sm font-medium text-gray-700"
|
||||
>
|
||||
Account Type
|
||||
</label>
|
||||
<select
|
||||
class={`w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||
getInputErrorClass(fieldErrors.account_type)
|
||||
}`}
|
||||
name="account_type"
|
||||
required
|
||||
onInput={() => clearFieldError("account_type")}
|
||||
>
|
||||
<option value="">Select account type</option>
|
||||
<option value="checking">Checking</option>
|
||||
<option value="savings">Savings</option>
|
||||
</select>
|
||||
<div
|
||||
class={`text-red-500 text-xs min-h-4 ${
|
||||
fieldErrors.account_type ? "visible" : "invisible"
|
||||
}`}
|
||||
aria-live="polite"
|
||||
>
|
||||
Account type is required.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1 my-4">
|
||||
<label
|
||||
for="routing_number"
|
||||
class="text-sm font-medium text-gray-700"
|
||||
>
|
||||
Routing Number
|
||||
</label>
|
||||
<input
|
||||
class={`w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||
getInputErrorClass(fieldErrors.routing_number)
|
||||
}`}
|
||||
name="routing_number"
|
||||
placeholder="9-digit routing number"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]{9}"
|
||||
maxLength={9}
|
||||
required
|
||||
onInput={() => clearFieldError("routing_number")}
|
||||
/>
|
||||
<div
|
||||
class={`text-red-500 text-xs min-h-4 ${
|
||||
fieldErrors.routing_number ? "visible" : "invisible"
|
||||
}`}
|
||||
aria-live="polite"
|
||||
>
|
||||
Routing number must be 9 digits.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1 my-4">
|
||||
<label
|
||||
for="account_number"
|
||||
class="text-sm font-medium text-gray-700"
|
||||
>
|
||||
Account Number
|
||||
</label>
|
||||
<input
|
||||
class={`w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||
getInputErrorClass(fieldErrors.account_number)
|
||||
}`}
|
||||
name="account_number"
|
||||
placeholder="Account number"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]+"
|
||||
minLength={4}
|
||||
required
|
||||
onInput={() => clearFieldError("account_number")}
|
||||
/>
|
||||
<div
|
||||
class={`text-red-500 text-xs min-h-4 ${
|
||||
fieldErrors.account_number ? "visible" : "invisible"
|
||||
}`}
|
||||
aria-live="polite"
|
||||
>
|
||||
Account number is required (min 4 digits).
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 my-4">
|
||||
<input
|
||||
id="is_default"
|
||||
name="is_default"
|
||||
type="checkbox"
|
||||
value="true"
|
||||
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
/>
|
||||
<label
|
||||
for="is_default"
|
||||
class="text-sm text-gray-700"
|
||||
>
|
||||
Set as default payment method
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex justify-end gap-2 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
class={`px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 ${
|
||||
loading ? "opacity-70" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
localStorage.setItem(
|
||||
"lock-route",
|
||||
"/tenant/payment-methods?modal=off",
|
||||
);
|
||||
setLoading(true);
|
||||
onClose();
|
||||
}}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 ${
|
||||
loading ? "opacity-70" : ""
|
||||
}`}
|
||||
disabled={loading}
|
||||
onClick={addNewPaymentMethod}
|
||||
>
|
||||
{loading ? "Adding..." : "Add Payment Method"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user