From 18ffff29c3f3da4a9ef49cc29fa70ab50131d5e9 Mon Sep 17 00:00:00 2001
From: Luca <102960244+Luca-Timo@users.noreply.github.com>
Date: Wed, 3 Jun 2026 21:07:59 +0200
Subject: [PATCH] fix(crm): country dropdown on customer onboarding, placed
 after State/region

The accept-invite (onboarding) address form used a free-text 2-char Country
input sitting above State/region. Replace it with the CountrySelect dropdown
(same component as the admin customer + business-profile forms) and move it
below State/region. Grid reflowed: Postal+City row, then State+Country row.
---
 .../customer/CustomerAcceptInvitePage.tsx     | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/frontend/src/pages/customer/CustomerAcceptInvitePage.tsx b/frontend/src/pages/customer/CustomerAcceptInvitePage.tsx
index fcd179eb..4f0eedd8 100644
--- a/frontend/src/pages/customer/CustomerAcceptInvitePage.tsx
+++ b/frontend/src/pages/customer/CustomerAcceptInvitePage.tsx
@@ -21,7 +21,7 @@ import { Lock, MapPin, Phone, User as UserIcon, AlertCircle, CheckCircle } from
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
 
-import { Button, Input, Card, Loading } from '../../components/common';
+import { Button, Input, Card, Loading, CountrySelect } from '../../components/common';
 import {
   customerService,
   type CustomerInvitationInfo,
@@ -393,7 +393,7 @@ export const CustomerAcceptInvitePage: React.FC = () => {
                       onChange={(e) => update('postal_code', e.target.value)}
                     />
                   </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="invite-city">
                       {t('customer.profile.field.city', 'City')}
                     </label>
@@ -405,20 +405,6 @@ export const CustomerAcceptInvitePage: React.FC = () => {
                       onChange={(e) => update('city', e.target.value)}
                     />
                   </div>
-                  <div className="sm:col-span-1">
-                    <label className="block text-sm font-medium text-theme mb-1" htmlFor="invite-country">
-                      {t('customer.profile.field.countryCode', 'Country')}
-                    </label>
-                    <Input
-                      id="invite-country"
-                      name="country"
-                      autoComplete="billing country"
-                      placeholder="DE"
-                      maxLength={2}
-                      value={form.country_code}
-                      onChange={(e) => update('country_code', 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="invite-state">
                       {t('customer.profile.field.state', 'State / region')}
@@ -431,6 +417,16 @@ export const CustomerAcceptInvitePage: React.FC = () => {
                       onChange={(e) => update('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.country_code}
+                      onChange={(code) => update('country_code', code)}
+                    />
+                  </div>
                 </div>
               </section>