remove address auto-parsing and always display address detail fields in DeliveryForm
This commit is contained in:
@@ -2,7 +2,6 @@ import { useState, useEffect, useCallback } from 'react';
|
|||||||
import { Button, Input, Select, Modal } from '../ui';
|
import { Button, Input, Select, Modal } from '../ui';
|
||||||
import { pickupOptions } from '../../constants/pickup';
|
import { pickupOptions } from '../../constants/pickup';
|
||||||
import { formatDateForInput, parseDateFromInput, getTodayFrontend } from '../../utils/date';
|
import { formatDateForInput, parseDateFromInput, getTodayFrontend } from '../../utils/date';
|
||||||
import { parseAddress } from '../../utils/addressParser';
|
|
||||||
import type { Delivery, PickupLocation, DeliveryStatus } from '../../types';
|
import type { Delivery, PickupLocation, DeliveryStatus } from '../../types';
|
||||||
|
|
||||||
interface DeliveryFormProps {
|
interface DeliveryFormProps {
|
||||||
@@ -17,6 +16,23 @@ interface DeliveryFormProps {
|
|||||||
// Phone validation regex for Kazakhstan numbers
|
// Phone validation regex for Kazakhstan numbers
|
||||||
const PHONE_REGEX = /^\+7\s?\(?\d{3}\)?\s?\d{3}[\s-]?\d{2}[\s-]?\d{2}$/;
|
const PHONE_REGEX = /^\+7\s?\(?\d{3}\)?\s?\d{3}[\s-]?\d{2}[\s-]?\d{2}$/;
|
||||||
|
|
||||||
|
// City is not shown in UI but is included in the saved address (used for 2GIS search).
|
||||||
|
const CITY_LABEL = 'Кокшетау';
|
||||||
|
|
||||||
|
const buildAddressString = (
|
||||||
|
street: string,
|
||||||
|
house: string,
|
||||||
|
apartment: string,
|
||||||
|
entrance: string,
|
||||||
|
): string => {
|
||||||
|
const parts: string[] = [CITY_LABEL];
|
||||||
|
if (street) parts.push(`ул. ${street}`);
|
||||||
|
if (house) parts.push(`д. ${house}`);
|
||||||
|
if (apartment) parts.push(`кв. ${apartment}`);
|
||||||
|
if (entrance) parts.push(`подъезд ${entrance}`);
|
||||||
|
return parts.join(', ');
|
||||||
|
};
|
||||||
|
|
||||||
export const DeliveryForm = ({ isOpen, onClose, onSubmit, initialData, defaultDate, isSubmitting }: DeliveryFormProps) => {
|
export const DeliveryForm = ({ isOpen, onClose, onSubmit, initialData, defaultDate, isSubmitting }: DeliveryFormProps) => {
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
date: defaultDate || getTodayFrontend(),
|
date: defaultDate || getTodayFrontend(),
|
||||||
@@ -39,7 +55,6 @@ export const DeliveryForm = ({ isOpen, onClose, onSubmit, initialData, defaultDa
|
|||||||
status: 'new' as DeliveryStatus,
|
status: 'new' as DeliveryStatus,
|
||||||
});
|
});
|
||||||
const [showSecondPickup, setShowSecondPickup] = useState(false);
|
const [showSecondPickup, setShowSecondPickup] = useState(false);
|
||||||
const [showAddressDetails, setShowAddressDetails] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (initialData) {
|
if (initialData) {
|
||||||
@@ -76,13 +91,17 @@ export const DeliveryForm = ({ isOpen, onClose, onSubmit, initialData, defaultDa
|
|||||||
|
|
||||||
const isPhoneValid = !formData.phone || validatePhone(formData.phone);
|
const isPhoneValid = !formData.phone || validatePhone(formData.phone);
|
||||||
const isAdditionalPhoneValid = !formData.additionalPhone || validatePhone(formData.additionalPhone);
|
const isAdditionalPhoneValid = !formData.additionalPhone || validatePhone(formData.additionalPhone);
|
||||||
const isFormValid = formData.productName && formData.address && formData.phone && isPhoneValid && formData.customerName && formData.street && formData.house;
|
const isFormValid = formData.productName && formData.phone && isPhoneValid && formData.customerName && formData.street && formData.house;
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (!isFormValid) return;
|
if (!isFormValid) return;
|
||||||
try {
|
try {
|
||||||
await onSubmit(formData);
|
const payload = {
|
||||||
|
...formData,
|
||||||
|
address: buildAddressString(formData.street, formData.house, formData.apartment, formData.entrance),
|
||||||
|
};
|
||||||
|
await onSubmit(payload);
|
||||||
if (!initialData) {
|
if (!initialData) {
|
||||||
setFormData({
|
setFormData({
|
||||||
date: defaultDate || getTodayFrontend(),
|
date: defaultDate || getTodayFrontend(),
|
||||||
@@ -105,7 +124,6 @@ export const DeliveryForm = ({ isOpen, onClose, onSubmit, initialData, defaultDa
|
|||||||
status: 'new',
|
status: 'new',
|
||||||
});
|
});
|
||||||
setShowSecondPickup(false);
|
setShowSecondPickup(false);
|
||||||
setShowAddressDetails(false);
|
|
||||||
}
|
}
|
||||||
onClose();
|
onClose();
|
||||||
} catch {
|
} catch {
|
||||||
@@ -159,44 +177,9 @@ export const DeliveryForm = ({ isOpen, onClose, onSubmit, initialData, defaultDa
|
|||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Address with auto-parse */}
|
{/* Address fields */}
|
||||||
<div>
|
<div className="bg-[#f5f3f5] rounded-lg p-4 space-y-3">
|
||||||
<label className="block text-sm font-medium text-[#1b1b1d] mb-1">
|
<p className="text-sm font-medium text-[#1b1b1d]">Адрес доставки</p>
|
||||||
Адрес доставки
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={formData.address}
|
|
||||||
onChange={(e) => {
|
|
||||||
const newAddress = e.target.value;
|
|
||||||
const parsed = parseAddress(newAddress);
|
|
||||||
setFormData({
|
|
||||||
...formData,
|
|
||||||
address: newAddress,
|
|
||||||
street: parsed.street || formData.street,
|
|
||||||
house: parsed.house || formData.house,
|
|
||||||
apartment: parsed.apartment || formData.apartment,
|
|
||||||
entrance: parsed.entrance || formData.entrance,
|
|
||||||
floor: parsed.floor || formData.floor,
|
|
||||||
});
|
|
||||||
if (parsed.street || parsed.house) {
|
|
||||||
setShowAddressDetails(true);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onBlur={() => setShowAddressDetails(true)}
|
|
||||||
placeholder="ул. Абая, д. 15, кв. 45, подъезд 3, этаж 5"
|
|
||||||
className="w-full px-3 py-2 bg-[#f5f3f5] border border-[#c5c6cd] rounded-md text-[#1b1b1d] focus:outline-none focus:ring-2 focus:ring-[#1B263B] focus:border-transparent transition-colors"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<p className="text-xs text-[#75777d] mt-1">
|
|
||||||
Улица, дом, квартира, подъезд, этаж
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Parsed address details */}
|
|
||||||
{showAddressDetails && (
|
|
||||||
<div className="bg-[#f5f3f5] rounded-lg p-4 space-y-3">
|
|
||||||
<p className="text-sm font-medium text-[#1b1b1d]">Проверьте распознанные данные:</p>
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
<div className="grid grid-cols-2 gap-3">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs text-[#75777d] mb-1">Улица *</label>
|
<label className="block text-xs text-[#75777d] mb-1">Улица *</label>
|
||||||
@@ -246,8 +229,7 @@ export const DeliveryForm = ({ isOpen, onClose, onSubmit, initialData, defaultDa
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
<Input
|
<Input
|
||||||
label="ФИО клиента *"
|
label="ФИО клиента *"
|
||||||
@@ -327,7 +309,7 @@ export const DeliveryForm = ({ isOpen, onClose, onSubmit, initialData, defaultDa
|
|||||||
options={pickupOptions}
|
options={pickupOptions}
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
label="Что забрать со второй точки"
|
label="Название товара 2"
|
||||||
value={formData.productName2}
|
value={formData.productName2}
|
||||||
onChange={(e) => setFormData({ ...formData, productName2: e.target.value })}
|
onChange={(e) => setFormData({ ...formData, productName2: e.target.value })}
|
||||||
placeholder="Название товара со второй точки"
|
placeholder="Название товара со второй точки"
|
||||||
|
|||||||
Reference in New Issue
Block a user