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.
This commit is contained in:
Luca
2026-06-03 21:07:59 +02:00
parent 47edbf64b5
commit 18ffff29c3
@@ -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>