326 lines
11 KiB
TypeScript
326 lines
11 KiB
TypeScript
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>
|
|
);
|
|
}
|