From 894b046f56f976ab7a0cf8afa72824ddf293ee38 Mon Sep 17 00:00:00 2001
From: "open-swe-dev-andrinoid[bot]"
 <open-swe-dev-andrinoid@users.noreply.github.com>
Date: Thu, 22 Jan 2026 00:30:18 +0000
Subject: [PATCH] Apply patch [skip ci]

---
 islands/AddPaymentMethodModal.tsx | 231 ++++++++++++++++++++++++++++++
 1 file changed, 231 insertions(+)
 create mode 100644 islands/AddPaymentMethodModal.tsx

diff --git a/islands/AddPaymentMethodModal.tsx b/islands/AddPaymentMethodModal.tsx
new file mode 100644
index 0000000..586c687
--- /dev/null
+++ b/islands/AddPaymentMethodModal.tsx
@@ -0,0 +1,231 @@
+import { useCallback, useRef, useState } from "preact/hooks";
+import {
+  encryptDataWithStoredPassword,
+  getEncryptionPassword,
+} from "../helpers.ts";
+
+interface AddPaymentMethodModalProps {
+  userId?: string;
+}
+
+export default function AddPaymentMethodModal(
+  { userId }: AddPaymentMethodModalProps,
+) {
+  const formRef = useRef<HTMLFormElement>(null);
+  const encryptedRoutingNumberRef = useRef<HTMLInputElement>(null);
+  const encryptedAccountNumberRef = useRef<HTMLInputElement>(null);
+  const bankNameRef = useRef<HTMLInputElement>(null);
+  const accountTypeRef = useRef<HTMLSelectElement>(null);
+  const routingNumberRef = useRef<HTMLInputElement>(null);
+  const accountNumberRef = useRef<HTMLInputElement>(null);
+  const isDefaultRef = useRef<HTMLInputElement>(null);
+  const [loading, setLoading] = useState(false);
+
+  // Only encrypt on submit, not on every keystroke - prevents V8 overload
+  const handleEncryptData = useCallback(async () => {
+    // Get current values from the form inputs
+    const routingNumber = routingNumberRef.current?.value || "";
+    const accountNumber = accountNumberRef.current?.value || "";
+
+    // Check if encryption is available and encrypt sensitive fields
+    if (userId && (routingNumber || accountNumber)) {
+      const encryptionPassword = getEncryptionPassword(userId);
+
+      if (encryptionPassword) {
+        try {
+          // Encrypt routing number
+          if (routingNumber && encryptedRoutingNumberRef.current) {
+            const encryptedRoutingNumber = await encryptDataWithStoredPassword(
+              userId,
+              routingNumber,
+            );
+            if (encryptedRoutingNumber) {
+              encryptedRoutingNumberRef.current.value = encryptedRoutingNumber;
+            }
+          }
+
+          // Encrypt account number
+          if (accountNumber && encryptedAccountNumberRef.current) {
+            const encryptedAccountNumber = await encryptDataWithStoredPassword(
+              userId,
+              accountNumber,
+            );
+            if (encryptedAccountNumber) {
+              encryptedAccountNumberRef.current.value = encryptedAccountNumber;
+            }
+          }
+        } catch (error) {
+          console.error("Failed to encrypt payment method data:", error);
+        }
+      }
+    }
+  }, [userId]);
+
+  const handleAddClick = async () => {
+    // Validate form
+    const bankName = bankNameRef.current?.value?.trim() || "";
+    const accountType = accountTypeRef.current?.value || "";
+    const routingNumber = routingNumberRef.current?.value?.trim() || "";
+    const accountNumber = accountNumberRef.current?.value?.trim() || "";
+
+    if (!bankName || !accountType || !routingNumber || !accountNumber) {
+      alert("Please fill in all required fields.");
+      return;
+    }
+
+    if (routingNumber.length !== 9) {
+      alert("Routing number must be 9 digits.");
+      return;
+    }
+
+    if (accountNumber.length < 4) {
+      alert("Account number must be at least 4 digits.");
+      return;
+    }
+
+    setLoading(true);
+    // Encrypt data before submission
+    await handleEncryptData();
+
+    // Clear plaintext fields if encryption was successful
+    if (userId && (routingNumber || accountNumber)) {
+      const encryptionPassword = getEncryptionPassword(userId);
+
+      if (encryptionPassword) {
+        if (routingNumberRef.current) routingNumberRef.current.value = "";
+        if (accountNumberRef.current) accountNumberRef.current.value = "";
+      }
+    }
+
+    // Submit the form
+    setTimeout(() => {
+      if (formRef.current) {
+        formRef.current.submit();
+      }
+    }, 100);
+  };
+
+  return (
+    <div class="bg-white rounded-lg p-8 shadow-lg max-w-md w-full">
+      <h3 class="text-xl font-bold mb-4">Add Payment Method</h3>
+      <form
+        ref={formRef}
+        method="POST"
+        action="/api/create/payment_method"
+        class="flex flex-col gap-4"
+      >
+        <input
+          type="hidden"
+          name="sender"
+          value="/tenant/payment-methods"
+        />
+        <input
+          ref={encryptedRoutingNumberRef}
+          type="hidden"
+          name="routing_number_encrypted"
+          value=""
+        />
+        <input
+          ref={encryptedAccountNumberRef}
+          type="hidden"
+          name="account_number_encrypted"
+          value=""
+        />
+
+        <div class="flex flex-col gap-1">
+          <label for="bank_name" class="text-sm font-medium text-gray-700">
+            Bank Name
+          </label>
+          <input
+            ref={bankNameRef}
+            class="border rounded px-3 py-2"
+            placeholder="e.g., Chase Bank"
+            name="bank_name"
+            required
+          />
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label for="account_type" class="text-sm font-medium text-gray-700">
+            Account Type
+          </label>
+          <select
+            ref={accountTypeRef}
+            class="w-full border p-2 rounded"
+            name="account_type"
+            required
+          >
+            <option value="">Select account type</option>
+            <option value="checking">Checking</option>
+            <option value="savings">Savings</option>
+          </select>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label for="routing_number" class="text-sm font-medium text-gray-700">
+            Routing Number
+          </label>
+          <input
+            ref={routingNumberRef}
+            class="border rounded px-3 py-2"
+            placeholder="9-digit routing number"
+            type="text"
+            inputMode="numeric"
+            pattern="[0-9]{9}"
+            maxLength={9}
+            name="routing_number"
+            required
+          />
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label for="account_number" class="text-sm font-medium text-gray-700">
+            Account Number
+          </label>
+          <input
+            ref={accountNumberRef}
+            class="border rounded px-3 py-2"
+            placeholder="Account number"
+            type="text"
+            inputMode="numeric"
+            pattern="[0-9]+"
+            minLength={4}
+            name="account_number"
+            required
+          />
+        </div>
+
+        <div class="flex items-center gap-2">
+          <input
+            ref={isDefaultRef}
+            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 gap-2 justify-end mt-4">
+        <a
+          href="/tenant/payment-methods"
+          class="px-4 py-2 rounded bg-gray-300 hover:bg-gray-400 text-center inline-block"
+        >
+          Cancel
+        </a>
+        <button
+          type="button"
+          onClick={handleAddClick}
+          class="px-4 py-2 rounded bg-green-600 text-white hover:bg-green-700"
+          disabled={loading}
+        >
+          {loading ? "Adding..." : "Add"}
+        </button>
+      </div>
+    </div>
+  );
+}