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:
@@ -21,7 +21,7 @@ import { Lock, MapPin, Phone, User as UserIcon, AlertCircle, CheckCircle } from
|
|||||||
import { toast } from 'react-toastify';
|
import { toast } from 'react-toastify';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { Button, Input, Card, Loading } from '../../components/common';
|
import { Button, Input, Card, Loading, CountrySelect } from '../../components/common';
|
||||||
import {
|
import {
|
||||||
customerService,
|
customerService,
|
||||||
type CustomerInvitationInfo,
|
type CustomerInvitationInfo,
|
||||||
@@ -393,7 +393,7 @@ export const CustomerAcceptInvitePage: React.FC = () => {
|
|||||||
onChange={(e) => update('postal_code', e.target.value)}
|
onChange={(e) => update('postal_code', e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</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">
|
<label className="block text-sm font-medium text-theme mb-1" htmlFor="invite-city">
|
||||||
{t('customer.profile.field.city', 'City')}
|
{t('customer.profile.field.city', 'City')}
|
||||||
</label>
|
</label>
|
||||||
@@ -405,20 +405,6 @@ export const CustomerAcceptInvitePage: React.FC = () => {
|
|||||||
onChange={(e) => update('city', e.target.value)}
|
onChange={(e) => update('city', e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</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">
|
<div className="sm:col-span-3">
|
||||||
<label className="block text-sm font-medium text-theme mb-1" htmlFor="invite-state">
|
<label className="block text-sm font-medium text-theme mb-1" htmlFor="invite-state">
|
||||||
{t('customer.profile.field.state', 'State / region')}
|
{t('customer.profile.field.state', 'State / region')}
|
||||||
@@ -431,6 +417,16 @@ export const CustomerAcceptInvitePage: React.FC = () => {
|
|||||||
onChange={(e) => update('state', e.target.value)}
|
onChange={(e) => update('state', e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user