From ba77169554488ac52a7851ca29b13169c791b390 Mon Sep 17 00:00:00 2001
From: Knee Cola <kneecola@duck.com>
Date: Mon, 17 Nov 2025 20:40:10 +0100
Subject: [PATCH] Add IBAN formatting for improved display readability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented IBAN formatting to display with proper spacing:
- Added formatIban() utility function in formatStrings.ts
- Format: Groups of 4 characters separated by spaces (e.g., HR12 3456 7890 1234 5678 9)
- Applied formatting to IBAN field display in AccountForm
- Updated validation to check cleaned IBAN (without spaces)
- Maintains backward compatibility with server-side validation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/lib/formatStrings.ts | 25 ++++++++++++++++++++++++-
 app/ui/AccountForm.tsx   | 10 ++++++----
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/app/lib/formatStrings.ts b/app/lib/formatStrings.ts
index a427a26..3006c17 100644
--- a/app/lib/formatStrings.ts
+++ b/app/lib/formatStrings.ts
@@ -4,4 +4,27 @@ export const formatCurrency = (amount:number) => {
     const formattedAmount = (amount/100).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
     return(formattedAmount);
   }
-  
\ No newline at end of file
+
+/**
+ * Formats an IBAN for display with proper spacing
+ * Format: XX12 XXXX XXXX XXXX XXXX XX
+ * First group: 2 letters (country) + 2 digits (check) = 4 chars
+ * Following groups: 4 characters each
+ * Last group: can be less than 4 characters
+ * @param iban - IBAN string without spaces
+ * @returns Formatted IBAN with spaces
+ */
+export const formatIban = (iban: string | null | undefined): string => {
+    if (!iban) return "";
+
+    // Remove any existing spaces
+    const cleaned = iban.replace(/\s/g, '');
+
+    // Split into groups: first 4 chars, then groups of 4
+    const groups: string[] = [];
+    for (let i = 0; i < cleaned.length; i += 4) {
+        groups.push(cleaned.slice(i, i + 4));
+    }
+
+    return groups.join(' ');
+}
diff --git a/app/ui/AccountForm.tsx b/app/ui/AccountForm.tsx
index b17d4e8..f64dcb0 100644
--- a/app/ui/AccountForm.tsx
+++ b/app/ui/AccountForm.tsx
@@ -7,6 +7,7 @@ import { useFormState, useFormStatus } from "react-dom";
 import { useLocale, useTranslations } from "next-intl";
 import Link from "next/link";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import { formatIban } from "../lib/formatStrings";
 
 export type AccountFormProps = {
     profile: UserProfile | null;
@@ -28,15 +29,16 @@ const FormFields: FC<FormFieldsProps> = ({ profile, errors, message }) => {
         firstName: profile?.firstName ?? "",
         lastName: profile?.lastName ?? "",
         address: profile?.address ?? "",
-        iban: profile?.iban ?? "",
+        iban: formatIban(profile?.iban) ?? "",
     });
 
     const handleInputChange = (field: keyof typeof formValues, value: string) => {
         setFormValues(prev => ({ ...prev, [field]: value }));
     };
 
-    // Check if any required field is missing
-    const hasMissingData = !formValues.firstName || !formValues.lastName || !formValues.address || !formValues.iban;
+    // Check if any required field is missing (clean IBAN of spaces for validation)
+    const cleanedIban = formValues.iban.replace(/\s/g, '');
+    const hasMissingData = !formValues.firstName || !formValues.lastName || !formValues.address || !cleanedIban;
 
     return (
         <>
@@ -127,7 +129,7 @@ const FormFields: FC<FormFieldsProps> = ({ profile, errors, message }) => {
                     type="text"
                     placeholder={t("iban-placeholder")}
                     className="input input-bordered w-full"
-                    defaultValue={profile?.iban ?? ""}
+                    defaultValue={formatIban(profile?.iban)}
                     onChange={(e) => handleInputChange("iban", e.target.value)}
                     disabled={pending}
                 />