From fe56d24a6b4cc0b191e910a76c0d2c0c58307df8 Mon Sep 17 00:00:00 2001
From: Luca <102960244+Luca-Timo@users.noreply.github.com>
Date: Wed, 3 Jun 2026 21:13:09 +0200
Subject: [PATCH] fix(crm): country dropdown on customer profile billing
 address too

Mirror the onboarding fix on the customer profile (Rechnungsadresse): replace
the free-text 2-char Country input with the CountrySelect dropdown and move it
below State/region. Grid reflowed: Postal+City row, then State+Country row.
---
 .../pages/customer/CustomerProfilePage.tsx    | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/frontend/src/pages/customer/CustomerProfilePage.tsx b/frontend/src/pages/customer/CustomerProfilePage.tsx
index 4f98f58f..58a02ef1 100644
--- a/frontend/src/pages/customer/CustomerProfilePage.tsx
+++ b/frontend/src/pages/customer/CustomerProfilePage.tsx
@@ -28,7 +28,7 @@ import { toast } from 'react-toastify';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { Lock, Save, User as UserIcon, MapPin, Phone, Mail } from 'lucide-react';
 
-import { Button, Input, Loading } from '../../components/common';
+import { Button, Input, Loading, CountrySelect } from '../../components/common';
 
 /**
  * Inline tile wrapper used in place of <Card> on this page.
@@ -415,7 +415,7 @@ export const CustomerProfilePage: React.FC = () => {
               />
             </div>
 
-            <div className="sm:col-span-3">
+            <div className="sm:col-span-4">
               <label className="block text-sm font-medium text-theme mb-1" htmlFor="profile-city">
                 {t('customer.profile.field.city', 'City')}
               </label>
@@ -428,21 +428,6 @@ export const CustomerProfilePage: React.FC = () => {
               />
             </div>
 
-            <div className="sm:col-span-1">
-              <label className="block text-sm font-medium text-theme mb-1" htmlFor="profile-country">
-                {t('customer.profile.field.countryCode', 'Country')}
-              </label>
-              <Input
-                id="profile-country"
-                name="country"
-                autoComplete="billing country"
-                placeholder="DE"
-                maxLength={2}
-                value={form.countryCode || ''}
-                onChange={(e) => updateField('countryCode', e.target.value.toUpperCase().slice(0, 2))}
-              />
-            </div>
-
             <div className="sm:col-span-3">
               <label className="block text-sm font-medium text-theme mb-1" htmlFor="profile-state">
                 {t('customer.profile.field.state', 'State / region')}
@@ -455,6 +440,17 @@ export const CustomerProfilePage: React.FC = () => {
                 onChange={(e) => updateField('state', e.target.value)}
               />
             </div>
+
+            <div className="sm:col-span-3">
+              {/* Country picker (ISO code) — dropdown, mirroring the admin
+                  customer / business-profile forms, placed after State /
+                  region. Replaces the old free-text 2-char input. */}
+              <CountrySelect
+                label={t('customer.profile.field.countryCode', 'Country') as string}
+                value={form.countryCode || ''}
+                onChange={(code) => updateField('countryCode', code)}
+              />
+            </div>
           </div>
         </ProfileTile>