|
|
/**
|
|
|
* MotherShip 登录后二级 Details：提货 / 送货 / 货物明细
|
|
|
* 字段与一级 Create shipment 一一对应并预填
|
|
|
*/
|
|
|
"use client";
|
|
|
|
|
|
import { useMemo, useState } from "react";
|
|
|
import { Plus, X } from "@phosphor-icons/react";
|
|
|
import {
|
|
|
MS_CARGO_TYPES,
|
|
|
MS_DEFAULT_READY_TIME,
|
|
|
MS_DELIVERY_ACCESSORIALS,
|
|
|
MS_PICKUP_ACCESSORIALS,
|
|
|
MS_PIECE_COUNT_TYPES,
|
|
|
MS_READY_TIMES,
|
|
|
type MothershipLoggedInShipmentPayload,
|
|
|
type MsCargoTypeId,
|
|
|
} from "@/components/mothership/mothership-logged-in-shipment-form";
|
|
|
import { MothershipWeekdayDatePicker } from "@/components/mothership/mothership-weekday-date-picker";
|
|
|
import {
|
|
|
snapMothershipReadyDateToWeekday,
|
|
|
} from "@/lib/mothership/logged-in-constraints";
|
|
|
import {
|
|
|
evaluateMothershipAccessorialCompat,
|
|
|
MS_PICKUP_RISK_ACCESSORIALS,
|
|
|
toggleMothershipAccessorial,
|
|
|
} from "@/lib/mothership/option-compat";
|
|
|
import { QuoteFieldTooltip } from "@/components/quote/quote-form-chrome";
|
|
|
import { MS_DETAILS_FIELD_TIPS } from "@/lib/mothership/ms-details-field-tips";
|
|
|
import {
|
|
|
collectMsDetailsRefineInvalidFields,
|
|
|
MS_EMAILS_MUST_DIFFER_MESSAGE,
|
|
|
MS_OPENS_NOT_BEFORE_CLOSES_MESSAGE,
|
|
|
MS_READY_BEFORE_OPENS_MESSAGE,
|
|
|
parseMsClockToMinutes,
|
|
|
validateMsDetailsForRefine,
|
|
|
type MsDetailsFieldKey,
|
|
|
} from "@/lib/mothership/ms-details-refine-validation";
|
|
|
import { ErrorBanner } from "@/components/ui/error-banner";
|
|
|
|
|
|
export type MsLocationDetails = {
|
|
|
address: string;
|
|
|
companyName: string;
|
|
|
suite: string;
|
|
|
contactFirst: string;
|
|
|
contactLast: string;
|
|
|
contactEmail: string;
|
|
|
contactPhone: string;
|
|
|
extension: string;
|
|
|
reference: string;
|
|
|
accessorials: string[];
|
|
|
notes: string;
|
|
|
opensAt: string;
|
|
|
closesAt: string;
|
|
|
readyDate: string;
|
|
|
readyTime: string;
|
|
|
};
|
|
|
|
|
|
export type MsDetailsCargoLine = {
|
|
|
key: string;
|
|
|
cargoType: MsCargoTypeId;
|
|
|
quantity: string;
|
|
|
freightClass: string;
|
|
|
weightLb: string;
|
|
|
lengthIn: string;
|
|
|
widthIn: string;
|
|
|
heightIn: string;
|
|
|
pieceCountType: string;
|
|
|
pieceCountQty: string;
|
|
|
description: string;
|
|
|
nmfc: string;
|
|
|
hazmat: boolean;
|
|
|
alcohol: boolean;
|
|
|
tobacco: boolean;
|
|
|
};
|
|
|
|
|
|
export type MothershipLoggedInDetailsState = {
|
|
|
pickup: MsLocationDetails;
|
|
|
delivery: MsLocationDetails;
|
|
|
requestDeliveryAppointment: boolean;
|
|
|
fbaNumber: string;
|
|
|
fbaPoNumber: string;
|
|
|
cargo: MsDetailsCargoLine[];
|
|
|
};
|
|
|
|
|
|
export type MothershipLoggedInDetailsPayload = {
|
|
|
pickup: {
|
|
|
companyName: string;
|
|
|
suite: string;
|
|
|
contactFirst: string;
|
|
|
contactLast: string;
|
|
|
contactEmail: string;
|
|
|
contactPhone: string;
|
|
|
reference: string;
|
|
|
notes: string;
|
|
|
opensAt: string;
|
|
|
closesAt: string;
|
|
|
accessorials: string[];
|
|
|
};
|
|
|
delivery: {
|
|
|
companyName: string;
|
|
|
suite: string;
|
|
|
contactFirst: string;
|
|
|
contactLast: string;
|
|
|
contactEmail: string;
|
|
|
contactPhone: string;
|
|
|
reference: string;
|
|
|
notes: string;
|
|
|
opensAt: string;
|
|
|
closesAt: string;
|
|
|
accessorials: string[];
|
|
|
};
|
|
|
requestDeliveryAppointment: boolean;
|
|
|
fbaNumber: string;
|
|
|
fbaPoNumber: string;
|
|
|
cargo: Array<{
|
|
|
pieceCountType: string;
|
|
|
pieceCountQty: number;
|
|
|
description: string;
|
|
|
nmfc: string;
|
|
|
hazmat: boolean;
|
|
|
alcohol: boolean;
|
|
|
tobacco: boolean;
|
|
|
}>;
|
|
|
};
|
|
|
|
|
|
/** 二级表单状态 → 提交 payload（含附加服务） */
|
|
|
export function detailsStateToPayload(
|
|
|
state: MothershipLoggedInDetailsState,
|
|
|
): MothershipLoggedInDetailsPayload {
|
|
|
return {
|
|
|
pickup: {
|
|
|
companyName: state.pickup.companyName.trim(),
|
|
|
suite: state.pickup.suite.trim(),
|
|
|
contactFirst: state.pickup.contactFirst.trim(),
|
|
|
contactLast: state.pickup.contactLast.trim(),
|
|
|
contactEmail: state.pickup.contactEmail.trim(),
|
|
|
contactPhone: state.pickup.contactPhone.trim(),
|
|
|
reference: state.pickup.reference.trim(),
|
|
|
notes: state.pickup.notes.trim(),
|
|
|
opensAt: state.pickup.opensAt.trim(),
|
|
|
closesAt: state.pickup.closesAt.trim(),
|
|
|
accessorials: [...state.pickup.accessorials],
|
|
|
},
|
|
|
delivery: {
|
|
|
companyName: state.delivery.companyName.trim(),
|
|
|
suite: state.delivery.suite.trim(),
|
|
|
contactFirst: state.delivery.contactFirst.trim(),
|
|
|
contactLast: state.delivery.contactLast.trim(),
|
|
|
contactEmail: state.delivery.contactEmail.trim(),
|
|
|
contactPhone: state.delivery.contactPhone.trim(),
|
|
|
reference: state.delivery.reference.trim(),
|
|
|
notes: state.delivery.notes.trim(),
|
|
|
opensAt: state.delivery.opensAt.trim(),
|
|
|
closesAt: state.delivery.closesAt.trim(),
|
|
|
accessorials: [...state.delivery.accessorials],
|
|
|
},
|
|
|
requestDeliveryAppointment: state.requestDeliveryAppointment,
|
|
|
fbaNumber: state.fbaNumber.trim(),
|
|
|
fbaPoNumber: state.fbaPoNumber.trim(),
|
|
|
cargo: state.cargo.map((line) => ({
|
|
|
pieceCountType: line.pieceCountType.trim(),
|
|
|
pieceCountQty: Number(line.pieceCountQty || 0),
|
|
|
description: line.description.trim(),
|
|
|
nmfc: line.nmfc.trim(),
|
|
|
hazmat: line.hazmat,
|
|
|
alcohol: line.alcohol,
|
|
|
tobacco: line.tobacco,
|
|
|
})),
|
|
|
};
|
|
|
}
|
|
|
|
|
|
function RequiredMark() {
|
|
|
return <span className="text-error">*</span>;
|
|
|
}
|
|
|
|
|
|
function FieldLabel({
|
|
|
children,
|
|
|
required,
|
|
|
tip,
|
|
|
}: {
|
|
|
children: React.ReactNode;
|
|
|
required?: boolean;
|
|
|
/** 官网 ⓘ 提示中文文案；有值则显示可点击/悬停说明 */
|
|
|
tip?: string;
|
|
|
}) {
|
|
|
return (
|
|
|
<span className="mb-1 flex items-center gap-1 text-xs font-medium text-text-primary">
|
|
|
{children}
|
|
|
{required ? <RequiredMark /> : null}
|
|
|
{tip ? (
|
|
|
<QuoteFieldTooltip tip={tip} label={`${String(children)}说明`} wide />
|
|
|
) : null}
|
|
|
</span>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
const INPUT_OK_CLS =
|
|
|
"h-10 w-full rounded-md border border-border bg-surface px-3 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 disabled:opacity-60";
|
|
|
const INPUT_ERR_CLS =
|
|
|
"h-10 w-full rounded-md border-2 border-error bg-error/5 px-3 text-sm text-text-primary focus:border-error focus:outline-none focus:ring-2 focus:ring-error/25 disabled:opacity-60";
|
|
|
const SELECT_OK_CLS =
|
|
|
"h-10 min-w-[8rem] rounded-md border border-border px-2 text-sm";
|
|
|
const SELECT_ERR_CLS =
|
|
|
"h-10 min-w-[8rem] rounded-md border-2 border-error bg-error/5 px-2 text-sm focus:border-error focus:outline-none focus:ring-2 focus:ring-error/25";
|
|
|
|
|
|
function TextInput({
|
|
|
value,
|
|
|
onChange,
|
|
|
placeholder,
|
|
|
disabled,
|
|
|
className = "",
|
|
|
required,
|
|
|
type = "text",
|
|
|
name,
|
|
|
invalid,
|
|
|
"data-testid": testId,
|
|
|
}: {
|
|
|
value: string;
|
|
|
onChange: (v: string) => void;
|
|
|
placeholder?: string;
|
|
|
disabled?: boolean;
|
|
|
className?: string;
|
|
|
required?: boolean;
|
|
|
type?: string;
|
|
|
name?: string;
|
|
|
/** 必填空/错：明显红边提醒 */
|
|
|
invalid?: boolean;
|
|
|
"data-testid"?: string;
|
|
|
}) {
|
|
|
return (
|
|
|
<input
|
|
|
name={name}
|
|
|
type={type}
|
|
|
required={required}
|
|
|
disabled={disabled}
|
|
|
value={value}
|
|
|
placeholder={placeholder}
|
|
|
onChange={(e) => onChange(e.target.value)}
|
|
|
aria-invalid={invalid || undefined}
|
|
|
data-testid={testId}
|
|
|
data-invalid={invalid ? "true" : undefined}
|
|
|
className={`${invalid ? INPUT_ERR_CLS : INPUT_OK_CLS} ${className}`}
|
|
|
/>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
type AccessorialOption = {
|
|
|
id: string;
|
|
|
label: string;
|
|
|
description?: string;
|
|
|
};
|
|
|
|
|
|
function AccessorialCardGrid({
|
|
|
options,
|
|
|
selected,
|
|
|
disabled,
|
|
|
onChange,
|
|
|
side,
|
|
|
}: {
|
|
|
options: readonly AccessorialOption[];
|
|
|
selected: string[];
|
|
|
disabled?: boolean;
|
|
|
onChange: (next: string[]) => void;
|
|
|
side: "pickup" | "delivery";
|
|
|
}) {
|
|
|
const [showDetails, setShowDetails] = useState(true);
|
|
|
const [hint, setHint] = useState<string | null>(null);
|
|
|
const issues = useMemo(
|
|
|
() => evaluateMothershipAccessorialCompat({ side, selected }),
|
|
|
[side, selected],
|
|
|
);
|
|
|
|
|
|
return (
|
|
|
<div>
|
|
|
<div className="mb-2 flex flex-wrap items-center justify-between gap-2">
|
|
|
<p className="inline-flex items-center gap-1 text-sm font-medium text-text">
|
|
|
选择提货/送货服务，避免追收附加费
|
|
|
<QuoteFieldTooltip
|
|
|
tip={MS_DETAILS_FIELD_TIPS.accessorials}
|
|
|
label="附加服务说明"
|
|
|
wide
|
|
|
/>
|
|
|
</p>
|
|
|
<label className="inline-flex cursor-pointer items-center gap-2 text-xs text-text-secondary">
|
|
|
<span>查看服务详情</span>
|
|
|
<button
|
|
|
type="button"
|
|
|
role="switch"
|
|
|
aria-checked={showDetails}
|
|
|
disabled={disabled}
|
|
|
onClick={() => setShowDetails((v) => !v)}
|
|
|
className={[
|
|
|
"relative h-5 w-9 shrink-0 rounded-full transition-colors",
|
|
|
showDetails ? "bg-primary" : "bg-border",
|
|
|
disabled ? "opacity-50" : "",
|
|
|
].join(" ")}
|
|
|
>
|
|
|
<span
|
|
|
className={[
|
|
|
"absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white shadow transition-transform",
|
|
|
showDetails ? "translate-x-4" : "translate-x-0",
|
|
|
].join(" ")}
|
|
|
/>
|
|
|
</button>
|
|
|
</label>
|
|
|
</div>
|
|
|
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
|
|
|
{options.map((opt) => {
|
|
|
const checked = selected.includes(opt.id);
|
|
|
const pickupRisk =
|
|
|
side === "pickup" &&
|
|
|
Boolean(MS_PICKUP_RISK_ACCESSORIALS[opt.id]);
|
|
|
return (
|
|
|
<button
|
|
|
key={opt.id}
|
|
|
type="button"
|
|
|
disabled={disabled}
|
|
|
onClick={() => {
|
|
|
const r = toggleMothershipAccessorial({
|
|
|
side,
|
|
|
selected,
|
|
|
id: opt.id,
|
|
|
});
|
|
|
if (!r.applied) {
|
|
|
setHint(r.message ?? null);
|
|
|
return;
|
|
|
}
|
|
|
setHint(r.message ?? null);
|
|
|
onChange(r.next);
|
|
|
}}
|
|
|
className={[
|
|
|
"rounded-lg border px-3 py-2.5 text-left transition-colors",
|
|
|
checked
|
|
|
? "border-primary bg-primary/5 ring-1 ring-primary/30"
|
|
|
: "border-border bg-surface hover:border-primary/40",
|
|
|
disabled ? "cursor-not-allowed opacity-55" : "cursor-pointer",
|
|
|
].join(" ")}
|
|
|
>
|
|
|
<span className="flex items-start gap-2">
|
|
|
<span
|
|
|
className={[
|
|
|
"mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border",
|
|
|
checked
|
|
|
? "border-primary bg-primary text-white"
|
|
|
: "border-border bg-white",
|
|
|
].join(" ")}
|
|
|
aria-hidden
|
|
|
>
|
|
|
{checked ? (
|
|
|
<span className="text-[10px] font-bold leading-none">✓</span>
|
|
|
) : null}
|
|
|
</span>
|
|
|
<span className="min-w-0 flex-1">
|
|
|
<span className="block text-sm font-medium text-text">
|
|
|
{opt.label}
|
|
|
</span>
|
|
|
{showDetails && opt.description ? (
|
|
|
<span className="mt-0.5 block text-[11px] leading-snug text-text-secondary">
|
|
|
{opt.description}
|
|
|
</span>
|
|
|
) : null}
|
|
|
{pickupRisk ? (
|
|
|
<span className="mt-0.5 block text-[11px] text-[#B45309]">
|
|
|
{MS_PICKUP_RISK_ACCESSORIALS[opt.id]}
|
|
|
</span>
|
|
|
) : null}
|
|
|
</span>
|
|
|
</span>
|
|
|
</button>
|
|
|
);
|
|
|
})}
|
|
|
</div>
|
|
|
{hint ? (
|
|
|
<p className="mt-1.5 text-[11px] leading-snug text-[#B45309]">{hint}</p>
|
|
|
) : null}
|
|
|
{issues.length > 0 ? (
|
|
|
<ul className="mt-1.5 space-y-0.5 text-[11px] leading-snug text-[#92400E]">
|
|
|
{issues.map((i) => (
|
|
|
<li
|
|
|
key={i.code}
|
|
|
className={i.severity === "block" ? "text-[#EF4444]" : ""}
|
|
|
>
|
|
|
{i.message}
|
|
|
</li>
|
|
|
))}
|
|
|
</ul>
|
|
|
) : null}
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
function locationFromL1(
|
|
|
address: string,
|
|
|
accessorials: string[],
|
|
|
readyDate: string,
|
|
|
readyTime: string,
|
|
|
): MsLocationDetails {
|
|
|
return {
|
|
|
address,
|
|
|
companyName: "",
|
|
|
suite: "",
|
|
|
contactFirst: "",
|
|
|
contactLast: "",
|
|
|
contactEmail: "",
|
|
|
contactPhone: "",
|
|
|
extension: "",
|
|
|
reference: "",
|
|
|
accessorials: [...accessorials],
|
|
|
notes: "",
|
|
|
opensAt: "",
|
|
|
closesAt: "",
|
|
|
readyDate: snapMothershipReadyDateToWeekday(readyDate),
|
|
|
readyTime,
|
|
|
};
|
|
|
}
|
|
|
|
|
|
function locationFromConfirmed(
|
|
|
confirmed: {
|
|
|
formatted_address: string;
|
|
|
display_label: string;
|
|
|
street: string;
|
|
|
city: string;
|
|
|
state: string;
|
|
|
zip: string;
|
|
|
},
|
|
|
fallbackQuery: string,
|
|
|
accessorials: string[],
|
|
|
readyDate: string,
|
|
|
readyTime: string,
|
|
|
): MsLocationDetails {
|
|
|
const label =
|
|
|
confirmed.formatted_address ||
|
|
|
confirmed.display_label ||
|
|
|
fallbackQuery;
|
|
|
const composed = [confirmed.street, confirmed.city, confirmed.state, confirmed.zip]
|
|
|
.map((p) => p?.trim())
|
|
|
.filter(Boolean)
|
|
|
.join(", ");
|
|
|
return {
|
|
|
...locationFromL1(label || composed || fallbackQuery, accessorials, readyDate, readyTime),
|
|
|
};
|
|
|
}
|
|
|
|
|
|
export function buildDetailsStateFromL1(
|
|
|
payload: MothershipLoggedInShipmentPayload,
|
|
|
): MothershipLoggedInDetailsState {
|
|
|
const wantFba = payload.deliveryAccessorials.includes("fbaAppointment");
|
|
|
return {
|
|
|
pickup: locationFromConfirmed(
|
|
|
payload.pickupConfirmed,
|
|
|
payload.pickupQuery,
|
|
|
payload.pickupAccessorials,
|
|
|
payload.readyDate,
|
|
|
payload.readyTime,
|
|
|
),
|
|
|
delivery: locationFromConfirmed(
|
|
|
payload.deliveryConfirmed,
|
|
|
payload.deliveryQuery,
|
|
|
payload.deliveryAccessorials,
|
|
|
payload.readyDate,
|
|
|
payload.readyTime,
|
|
|
),
|
|
|
requestDeliveryAppointment:
|
|
|
wantFba || payload.deliveryAccessorials.includes("appointment"),
|
|
|
fbaNumber: "",
|
|
|
fbaPoNumber: "",
|
|
|
cargo: payload.cargo.map((c, i) => ({
|
|
|
key: `d-${i}-${c.cargoType}`,
|
|
|
cargoType: c.cargoType,
|
|
|
quantity: String(c.quantity),
|
|
|
freightClass: "",
|
|
|
weightLb: String(c.weightLb),
|
|
|
lengthIn: String(c.lengthIn),
|
|
|
widthIn: String(c.widthIn),
|
|
|
heightIn: String(c.heightIn),
|
|
|
pieceCountType: "",
|
|
|
pieceCountQty: "0",
|
|
|
description: "",
|
|
|
nmfc: "",
|
|
|
hazmat: false,
|
|
|
alcohol: false,
|
|
|
tobacco: false,
|
|
|
})),
|
|
|
};
|
|
|
}
|
|
|
|
|
|
function LocationSection({
|
|
|
title,
|
|
|
side,
|
|
|
value,
|
|
|
disabled,
|
|
|
accessorialOptions,
|
|
|
hintPickUp,
|
|
|
showFreightReady,
|
|
|
invalidFields,
|
|
|
peerEmail,
|
|
|
onChange,
|
|
|
}: {
|
|
|
title: string;
|
|
|
side: "pickup" | "delivery";
|
|
|
value: MsLocationDetails;
|
|
|
disabled?: boolean;
|
|
|
accessorialOptions: readonly AccessorialOption[];
|
|
|
hintPickUp?: boolean;
|
|
|
showFreightReady?: boolean;
|
|
|
invalidFields?: ReadonlySet<MsDetailsFieldKey>;
|
|
|
/** 对侧联系人邮箱：用于即时提示不得相同 */
|
|
|
peerEmail?: string;
|
|
|
onChange: (next: MsLocationDetails) => void;
|
|
|
}) {
|
|
|
const set = <K extends keyof MsLocationDetails>(
|
|
|
key: K,
|
|
|
v: MsLocationDetails[K],
|
|
|
) => onChange({ ...value, [key]: v });
|
|
|
const bad = (field: string) =>
|
|
|
Boolean(invalidFields?.has(`${side}.${field}` as MsDetailsFieldKey));
|
|
|
|
|
|
const openMin = parseMsClockToMinutes(value.opensAt);
|
|
|
const closeMin = parseMsClockToMinutes(value.closesAt);
|
|
|
const hoursConflict =
|
|
|
openMin != null && closeMin != null && openMin >= closeMin;
|
|
|
const readyMin = showFreightReady
|
|
|
? parseMsClockToMinutes(value.readyTime || MS_DEFAULT_READY_TIME)
|
|
|
: null;
|
|
|
const readyConflict =
|
|
|
Boolean(showFreightReady) &&
|
|
|
readyMin != null &&
|
|
|
openMin != null &&
|
|
|
readyMin < openMin;
|
|
|
const emailDup =
|
|
|
Boolean(peerEmail?.trim()) &&
|
|
|
Boolean(value.contactEmail.trim()) &&
|
|
|
peerEmail!.trim().toLowerCase() === value.contactEmail.trim().toLowerCase();
|
|
|
|
|
|
return (
|
|
|
<section className="rounded-lg border border-border bg-surface p-4 shadow-card md:p-5">
|
|
|
<h3 className="mb-4 text-base font-semibold text-text-primary">{title}</h3>
|
|
|
|
|
|
<div className="space-y-4">
|
|
|
<label className="block">
|
|
|
<FieldLabel required>地址</FieldLabel>
|
|
|
<TextInput
|
|
|
required
|
|
|
disabled={disabled}
|
|
|
invalid={bad("address")}
|
|
|
data-testid={`ms-details-${side}-address`}
|
|
|
value={value.address}
|
|
|
onChange={(v) => set("address", v)}
|
|
|
placeholder="街道、城市、州、邮编"
|
|
|
/>
|
|
|
</label>
|
|
|
|
|
|
<div className="grid gap-3 md:grid-cols-[1fr_8rem]">
|
|
|
<label className="block">
|
|
|
<FieldLabel required>完整公司名</FieldLabel>
|
|
|
<TextInput
|
|
|
required
|
|
|
disabled={disabled}
|
|
|
invalid={bad("companyName")}
|
|
|
data-testid={`ms-details-${side}-company`}
|
|
|
value={value.companyName}
|
|
|
onChange={(v) => set("companyName", v)}
|
|
|
placeholder="Acme Co."
|
|
|
/>
|
|
|
<p className="mt-1 text-[11px] text-text-secondary">
|
|
|
非住宅件请勿用人名作公司名，以免承运商加收附加费。
|
|
|
</p>
|
|
|
{bad("companyName") ? (
|
|
|
<p className="mt-1 text-[11px] text-error">请填写完整公司名</p>
|
|
|
) : null}
|
|
|
</label>
|
|
|
<label className="block">
|
|
|
<FieldLabel>套房 / 单元</FieldLabel>
|
|
|
<TextInput
|
|
|
disabled={disabled}
|
|
|
value={value.suite}
|
|
|
onChange={(v) => set("suite", v)}
|
|
|
placeholder="Ste 301"
|
|
|
/>
|
|
|
</label>
|
|
|
</div>
|
|
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
|
<label className="block">
|
|
|
<FieldLabel>现场联系人名</FieldLabel>
|
|
|
<TextInput
|
|
|
disabled={disabled}
|
|
|
value={value.contactFirst}
|
|
|
onChange={(v) => set("contactFirst", v)}
|
|
|
placeholder="名"
|
|
|
/>
|
|
|
</label>
|
|
|
<label className="block">
|
|
|
<FieldLabel>现场联系人姓</FieldLabel>
|
|
|
<TextInput
|
|
|
disabled={disabled}
|
|
|
value={value.contactLast}
|
|
|
onChange={(v) => set("contactLast", v)}
|
|
|
placeholder="姓"
|
|
|
/>
|
|
|
</label>
|
|
|
</div>
|
|
|
|
|
|
<label className="block">
|
|
|
<FieldLabel required>现场联系人邮箱</FieldLabel>
|
|
|
<TextInput
|
|
|
required
|
|
|
type="email"
|
|
|
disabled={disabled}
|
|
|
invalid={bad("contactEmail") || emailDup}
|
|
|
data-testid={`ms-details-${side}-email`}
|
|
|
value={value.contactEmail}
|
|
|
onChange={(v) => set("contactEmail", v)}
|
|
|
placeholder="email@company.com"
|
|
|
/>
|
|
|
{emailDup ? (
|
|
|
<p className="mt-1 text-[11px] text-error">
|
|
|
{MS_EMAILS_MUST_DIFFER_MESSAGE}
|
|
|
</p>
|
|
|
) : bad("contactEmail") ? (
|
|
|
<p className="mt-1 text-[11px] text-error">
|
|
|
请填写有效的现场联系人邮箱
|
|
|
</p>
|
|
|
) : (
|
|
|
<p className="mt-1 text-[11px] text-text-secondary">
|
|
|
{hintPickUp
|
|
|
? "填写提货方邮箱以接收提单与跟踪更新；须与送货方邮箱不同。"
|
|
|
: "填写收货方邮箱以接收跟踪更新；须与提货方邮箱不同。"}
|
|
|
</p>
|
|
|
)}
|
|
|
</label>
|
|
|
|
|
|
<div className="grid gap-3 md:grid-cols-[1fr_6rem]">
|
|
|
<label className="block">
|
|
|
<FieldLabel required>现场联系人电话</FieldLabel>
|
|
|
<TextInput
|
|
|
required
|
|
|
disabled={disabled}
|
|
|
invalid={bad("contactPhone")}
|
|
|
data-testid={`ms-details-${side}-phone`}
|
|
|
value={value.contactPhone}
|
|
|
onChange={(v) => set("contactPhone", v)}
|
|
|
placeholder="(555) 555-5555"
|
|
|
/>
|
|
|
{bad("contactPhone") ? (
|
|
|
<p className="mt-1 text-[11px] text-error">请填写现场联系人电话</p>
|
|
|
) : null}
|
|
|
</label>
|
|
|
<label className="block">
|
|
|
<FieldLabel>分机</FieldLabel>
|
|
|
<TextInput
|
|
|
disabled={disabled}
|
|
|
value={value.extension}
|
|
|
onChange={(v) => set("extension", v)}
|
|
|
placeholder="分机"
|
|
|
/>
|
|
|
</label>
|
|
|
</div>
|
|
|
|
|
|
<label className="block">
|
|
|
<FieldLabel tip={MS_DETAILS_FIELD_TIPS.reference}>参考号</FieldLabel>
|
|
|
<TextInput
|
|
|
disabled={disabled}
|
|
|
value={value.reference}
|
|
|
onChange={(v) => set("reference", v)}
|
|
|
placeholder="采购单或参考号"
|
|
|
/>
|
|
|
</label>
|
|
|
|
|
|
<AccessorialCardGrid
|
|
|
options={accessorialOptions}
|
|
|
selected={value.accessorials}
|
|
|
disabled={disabled}
|
|
|
side={hintPickUp ? "pickup" : "delivery"}
|
|
|
onChange={(next) => set("accessorials", next)}
|
|
|
/>
|
|
|
|
|
|
<label className="block">
|
|
|
<FieldLabel>备注</FieldLabel>
|
|
|
<textarea
|
|
|
disabled={disabled}
|
|
|
value={value.notes}
|
|
|
onChange={(e) => set("notes", e.target.value)}
|
|
|
placeholder="例如：便于司机找到正确位置的关键信息"
|
|
|
rows={2}
|
|
|
className="w-full rounded-md border border-border px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
|
|
|
/>
|
|
|
</label>
|
|
|
|
|
|
<div>
|
|
|
<p className="mb-2 text-xs font-medium text-text-primary">营业时间</p>
|
|
|
<div className="flex flex-wrap items-end gap-3">
|
|
|
<label className="block">
|
|
|
<FieldLabel required>开门</FieldLabel>
|
|
|
<select
|
|
|
required
|
|
|
disabled={disabled}
|
|
|
value={value.opensAt}
|
|
|
aria-invalid={bad("opensAt") || hoursConflict || undefined}
|
|
|
data-testid={`ms-details-${side}-opens`}
|
|
|
data-invalid={
|
|
|
bad("opensAt") || hoursConflict ? "true" : undefined
|
|
|
}
|
|
|
onChange={(e) => set("opensAt", e.target.value)}
|
|
|
className={
|
|
|
bad("opensAt") || hoursConflict
|
|
|
? SELECT_ERR_CLS
|
|
|
: SELECT_OK_CLS
|
|
|
}
|
|
|
>
|
|
|
<option value="">选择时间</option>
|
|
|
{MS_READY_TIMES.map((t) => (
|
|
|
<option key={t} value={t}>
|
|
|
{t}
|
|
|
</option>
|
|
|
))}
|
|
|
</select>
|
|
|
{hoursConflict ? (
|
|
|
<p className="mt-1 text-[11px] text-error">
|
|
|
{MS_OPENS_NOT_BEFORE_CLOSES_MESSAGE}
|
|
|
</p>
|
|
|
) : bad("opensAt") ? (
|
|
|
<p className="mt-1 text-[11px] text-error">请选择开门时间</p>
|
|
|
) : null}
|
|
|
</label>
|
|
|
<span className="pb-2 text-xs text-text-secondary">EDT</span>
|
|
|
<label className="block">
|
|
|
<FieldLabel required>关门</FieldLabel>
|
|
|
<select
|
|
|
required
|
|
|
disabled={disabled}
|
|
|
value={value.closesAt}
|
|
|
aria-invalid={bad("closesAt") || hoursConflict || undefined}
|
|
|
data-testid={`ms-details-${side}-closes`}
|
|
|
data-invalid={
|
|
|
bad("closesAt") || hoursConflict ? "true" : undefined
|
|
|
}
|
|
|
onChange={(e) => set("closesAt", e.target.value)}
|
|
|
className={
|
|
|
bad("closesAt") || hoursConflict
|
|
|
? SELECT_ERR_CLS
|
|
|
: SELECT_OK_CLS
|
|
|
}
|
|
|
>
|
|
|
<option value="">选择时间</option>
|
|
|
{MS_READY_TIMES.map((t) => (
|
|
|
<option key={t} value={t}>
|
|
|
{t}
|
|
|
</option>
|
|
|
))}
|
|
|
</select>
|
|
|
{hoursConflict ? (
|
|
|
<p className="mt-1 text-[11px] text-error">
|
|
|
{MS_OPENS_NOT_BEFORE_CLOSES_MESSAGE}
|
|
|
</p>
|
|
|
) : bad("closesAt") ? (
|
|
|
<p className="mt-1 text-[11px] text-error">请选择关门时间</p>
|
|
|
) : null}
|
|
|
</label>
|
|
|
<span className="pb-2 text-xs text-text-secondary">EDT</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{showFreightReady && (
|
|
|
<div>
|
|
|
<FieldLabel required tip={MS_DETAILS_FIELD_TIPS.freightReady}>
|
|
|
货运就绪时间（不可选周六、周日）
|
|
|
</FieldLabel>
|
|
|
<div className="mt-1 flex flex-wrap items-end gap-2">
|
|
|
<MothershipWeekdayDatePicker
|
|
|
disabled={disabled}
|
|
|
value={value.readyDate}
|
|
|
onChange={(iso) => set("readyDate", iso)}
|
|
|
className="h-10 min-w-[11rem] rounded-md border border-border bg-surface px-3 text-sm"
|
|
|
/>
|
|
|
<span className="pb-2 text-sm text-text-secondary">之后</span>
|
|
|
<select
|
|
|
disabled={disabled}
|
|
|
value={value.readyTime || MS_DEFAULT_READY_TIME}
|
|
|
aria-invalid={bad("readyTime") || readyConflict || undefined}
|
|
|
data-testid={`ms-details-${side}-ready-time`}
|
|
|
data-invalid={
|
|
|
bad("readyTime") || readyConflict ? "true" : undefined
|
|
|
}
|
|
|
onChange={(e) => set("readyTime", e.target.value)}
|
|
|
className={
|
|
|
bad("readyTime") || readyConflict
|
|
|
? "h-10 min-w-[7.5rem] rounded-md border-2 border-error bg-error/5 px-2 text-sm"
|
|
|
: "h-10 min-w-[7.5rem] rounded-md border border-border px-2 text-sm"
|
|
|
}
|
|
|
>
|
|
|
{MS_READY_TIMES.map((t) => (
|
|
|
<option key={t} value={t}>
|
|
|
{t}
|
|
|
</option>
|
|
|
))}
|
|
|
</select>
|
|
|
<span className="pb-2 text-xs text-text-secondary">EDT</span>
|
|
|
</div>
|
|
|
<p
|
|
|
className={`mt-1 text-[11px] ${
|
|
|
bad("readyTime") || readyConflict
|
|
|
? "text-error"
|
|
|
: "text-text-secondary"
|
|
|
}`}
|
|
|
>
|
|
|
{readyConflict
|
|
|
? MS_READY_BEFORE_OPENS_MESSAGE
|
|
|
: "就绪时刻须不早于提货点开门时间，且开门须早于关门。"}
|
|
|
</p>
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
|
|
</section>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
export interface MothershipLoggedInDetailsFormProps {
|
|
|
formId?: string;
|
|
|
initial: MothershipLoggedInShipmentPayload;
|
|
|
disabled?: boolean;
|
|
|
/** 确认补填后：空/错必填项立即红边高亮 */
|
|
|
highlightRequiredGaps?: boolean;
|
|
|
onChange?: (state: MothershipLoggedInDetailsState) => void;
|
|
|
onValidSubmit?: (payload: MothershipLoggedInDetailsPayload) => void;
|
|
|
}
|
|
|
|
|
|
export function MothershipLoggedInDetailsForm({
|
|
|
formId = "ms-logged-in-details-form",
|
|
|
initial,
|
|
|
disabled,
|
|
|
highlightRequiredGaps = false,
|
|
|
onChange,
|
|
|
onValidSubmit,
|
|
|
}: MothershipLoggedInDetailsFormProps) {
|
|
|
const [state, setState] = useState(() => buildDetailsStateFromL1(initial));
|
|
|
const [formError, setFormError] = useState<string | null>(null);
|
|
|
const [forceShowFieldErrors, setForceShowFieldErrors] = useState(false);
|
|
|
|
|
|
const patch = (next: MothershipLoggedInDetailsState) => {
|
|
|
setState(next);
|
|
|
setFormError(null);
|
|
|
onChange?.(next);
|
|
|
};
|
|
|
|
|
|
const showFieldErrors = highlightRequiredGaps || forceShowFieldErrors;
|
|
|
|
|
|
const invalidFields = useMemo(() => {
|
|
|
if (!showFieldErrors) return new Set<MsDetailsFieldKey>();
|
|
|
const payload = detailsStateToPayload(state);
|
|
|
return collectMsDetailsRefineInvalidFields(payload, {
|
|
|
pickupAddress: state.pickup.address,
|
|
|
deliveryAddress: state.delivery.address,
|
|
|
readyTime: state.pickup.readyTime || initial.readyTime,
|
|
|
});
|
|
|
}, [showFieldErrors, state, initial.readyTime]);
|
|
|
|
|
|
const showFba = useMemo(
|
|
|
() =>
|
|
|
state.requestDeliveryAppointment ||
|
|
|
state.delivery.accessorials.includes("fbaAppointment"),
|
|
|
[state],
|
|
|
);
|
|
|
|
|
|
const toPayload = (): MothershipLoggedInDetailsPayload =>
|
|
|
detailsStateToPayload(state);
|
|
|
|
|
|
return (
|
|
|
<form
|
|
|
id={formId}
|
|
|
className="space-y-5"
|
|
|
onSubmit={(e) => {
|
|
|
e.preventDefault();
|
|
|
const payload = toPayload();
|
|
|
const check = validateMsDetailsForRefine(payload, {
|
|
|
pickupAddress: state.pickup.address,
|
|
|
deliveryAddress: state.delivery.address,
|
|
|
readyTime: state.pickup.readyTime || initial.readyTime,
|
|
|
});
|
|
|
if (!check.ok) {
|
|
|
setForceShowFieldErrors(true);
|
|
|
setFormError(check.message);
|
|
|
return;
|
|
|
}
|
|
|
setFormError(null);
|
|
|
setForceShowFieldErrors(false);
|
|
|
onValidSubmit?.(payload);
|
|
|
}}
|
|
|
>
|
|
|
{formError ? (
|
|
|
<div className="mb-2">
|
|
|
<ErrorBanner>{formError}</ErrorBanner>
|
|
|
</div>
|
|
|
) : null}
|
|
|
<div>
|
|
|
<p className="text-xs text-text-secondary">
|
|
|
报价 · <span className="font-medium text-primary">详情</span> · 复核
|
|
|
</p>
|
|
|
<h3 className="mt-1 text-xl font-semibold text-text-primary">
|
|
|
货件详情
|
|
|
</h3>
|
|
|
</div>
|
|
|
|
|
|
<LocationSection
|
|
|
title="1. 提货信息"
|
|
|
side="pickup"
|
|
|
value={state.pickup}
|
|
|
disabled={disabled}
|
|
|
accessorialOptions={MS_PICKUP_ACCESSORIALS}
|
|
|
hintPickUp
|
|
|
showFreightReady
|
|
|
invalidFields={invalidFields}
|
|
|
peerEmail={state.delivery.contactEmail}
|
|
|
onChange={(pickup) => patch({ ...state, pickup })}
|
|
|
/>
|
|
|
|
|
|
{showFba && (
|
|
|
<section className="rounded-lg border border-border bg-surface p-4 shadow-card md:p-5">
|
|
|
<label className="flex items-start gap-2">
|
|
|
<input
|
|
|
type="checkbox"
|
|
|
disabled={disabled}
|
|
|
checked={state.requestDeliveryAppointment}
|
|
|
onChange={(e) =>
|
|
|
patch({
|
|
|
...state,
|
|
|
requestDeliveryAppointment: e.target.checked,
|
|
|
})
|
|
|
}
|
|
|
className="mt-1"
|
|
|
/>
|
|
|
<span>
|
|
|
<span className="block text-sm font-semibold text-text-primary">
|
|
|
申请送货预约
|
|
|
</span>
|
|
|
<span className="text-xs text-text-secondary">
|
|
|
自动为住宅/商业地址安排送货预约
|
|
|
</span>
|
|
|
</span>
|
|
|
</label>
|
|
|
{state.requestDeliveryAppointment && (
|
|
|
<div className="mt-4 rounded-md bg-warning/10 p-4">
|
|
|
<p className="text-sm font-semibold text-text-primary">
|
|
|
填写 Fulfillment by Amazon（FBA）编号
|
|
|
</p>
|
|
|
<div className="mt-3 grid gap-3 sm:grid-cols-2">
|
|
|
<label className="block">
|
|
|
<FieldLabel>FBA 编号</FieldLabel>
|
|
|
<TextInput
|
|
|
disabled={disabled}
|
|
|
value={state.fbaNumber}
|
|
|
onChange={(v) => patch({ ...state, fbaNumber: v })}
|
|
|
placeholder="输入 FBA 编号"
|
|
|
/>
|
|
|
</label>
|
|
|
<label className="block">
|
|
|
<FieldLabel>采购单号</FieldLabel>
|
|
|
<TextInput
|
|
|
disabled={disabled}
|
|
|
value={state.fbaPoNumber}
|
|
|
onChange={(v) => patch({ ...state, fbaPoNumber: v })}
|
|
|
placeholder="输入采购单号"
|
|
|
/>
|
|
|
</label>
|
|
|
</div>
|
|
|
<ul className="mt-3 list-disc space-y-1 pl-5 text-xs text-text-secondary">
|
|
|
<li>FBA 编号将写入提单</li>
|
|
|
<li>
|
|
|
FBA 预约建议填写下方的{" "}
|
|
|
<strong className="text-text-primary">
|
|
|
件数类型 / 件数数量
|
|
|
</strong>
|
|
|
（如纸箱、箱）
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
)}
|
|
|
</section>
|
|
|
)}
|
|
|
|
|
|
<LocationSection
|
|
|
title="2. 送货信息"
|
|
|
side="delivery"
|
|
|
value={state.delivery}
|
|
|
disabled={disabled}
|
|
|
accessorialOptions={MS_DELIVERY_ACCESSORIALS}
|
|
|
invalidFields={invalidFields}
|
|
|
peerEmail={state.pickup.contactEmail}
|
|
|
onChange={(delivery) => patch({ ...state, delivery })}
|
|
|
/>
|
|
|
|
|
|
<section className="rounded-lg border border-border bg-surface p-4 shadow-card md:p-5">
|
|
|
<div className="mb-4 flex items-center justify-between gap-3">
|
|
|
<h3 className="text-base font-semibold text-text-primary">3. 货物</h3>
|
|
|
<button
|
|
|
type="button"
|
|
|
disabled={disabled}
|
|
|
onClick={() =>
|
|
|
patch({
|
|
|
...state,
|
|
|
cargo: [
|
|
|
...state.cargo,
|
|
|
{
|
|
|
key: `d-${Date.now()}`,
|
|
|
cargoType: "pallet",
|
|
|
quantity: "",
|
|
|
freightClass: "",
|
|
|
weightLb: "",
|
|
|
lengthIn: "",
|
|
|
widthIn: "",
|
|
|
heightIn: "",
|
|
|
pieceCountType: "",
|
|
|
pieceCountQty: "0",
|
|
|
description: "",
|
|
|
nmfc: "",
|
|
|
hazmat: false,
|
|
|
alcohol: false,
|
|
|
tobacco: false,
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
}
|
|
|
className="inline-flex h-9 items-center gap-1.5 rounded-md bg-text-primary px-3 text-sm font-medium text-white"
|
|
|
>
|
|
|
<Plus size={14} weight="bold" />
|
|
|
添加另一行
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
<div className="space-y-4">
|
|
|
{state.cargo.map((line, idx) => (
|
|
|
<div
|
|
|
key={line.key}
|
|
|
className="relative rounded-md border border-border p-4"
|
|
|
>
|
|
|
<div className="mb-3 flex items-center justify-between">
|
|
|
<span className="text-sm font-semibold text-text-primary">
|
|
|
{idx + 1}
|
|
|
</span>
|
|
|
<button
|
|
|
type="button"
|
|
|
disabled={disabled || state.cargo.length <= 1}
|
|
|
aria-label="删除货物行"
|
|
|
onClick={() =>
|
|
|
patch({
|
|
|
...state,
|
|
|
cargo: state.cargo.filter((c) => c.key !== line.key),
|
|
|
})
|
|
|
}
|
|
|
className="inline-flex h-8 w-8 items-center justify-center rounded border border-border text-text-secondary disabled:opacity-40"
|
|
|
>
|
|
|
<X size={14} weight="bold" />
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
|
|
<label className="block">
|
|
|
<FieldLabel required tip={MS_DETAILS_FIELD_TIPS.cargoType}>
|
|
|
货物类型
|
|
|
</FieldLabel>
|
|
|
<select
|
|
|
disabled={disabled}
|
|
|
value={line.cargoType}
|
|
|
onChange={(e) => {
|
|
|
const cargo = state.cargo.map((c) =>
|
|
|
c.key === line.key
|
|
|
? {
|
|
|
...c,
|
|
|
cargoType: e.target.value as MsCargoTypeId,
|
|
|
}
|
|
|
: c,
|
|
|
);
|
|
|
patch({ ...state, cargo });
|
|
|
}}
|
|
|
className="h-10 w-full rounded-md border border-border px-2 text-sm"
|
|
|
>
|
|
|
{MS_CARGO_TYPES.map((t) => (
|
|
|
<option key={t.id} value={t.id}>
|
|
|
{t.label}
|
|
|
</option>
|
|
|
))}
|
|
|
</select>
|
|
|
</label>
|
|
|
<label className="block">
|
|
|
<FieldLabel required>数量</FieldLabel>
|
|
|
<TextInput
|
|
|
disabled={disabled}
|
|
|
value={line.quantity}
|
|
|
onChange={(v) => {
|
|
|
const cargo = state.cargo.map((c) =>
|
|
|
c.key === line.key ? { ...c, quantity: v } : c,
|
|
|
);
|
|
|
patch({ ...state, cargo });
|
|
|
}}
|
|
|
/>
|
|
|
</label>
|
|
|
<label className="block">
|
|
|
<FieldLabel tip={MS_DETAILS_FIELD_TIPS.freightClass}>
|
|
|
运费等级（可选）
|
|
|
</FieldLabel>
|
|
|
<TextInput
|
|
|
disabled={disabled}
|
|
|
value={line.freightClass}
|
|
|
onChange={(v) => {
|
|
|
const cargo = state.cargo.map((c) =>
|
|
|
c.key === line.key ? { ...c, freightClass: v } : c,
|
|
|
);
|
|
|
patch({ ...state, cargo });
|
|
|
}}
|
|
|
placeholder="选择"
|
|
|
/>
|
|
|
</label>
|
|
|
</div>
|
|
|
|
|
|
<div className="mt-3 grid gap-3 sm:grid-cols-4">
|
|
|
{(
|
|
|
[
|
|
|
["weightLb", "单件重量", "lbs"],
|
|
|
["lengthIn", "单件长", "inch"],
|
|
|
["widthIn", "单件宽", "inch"],
|
|
|
["heightIn", "单件高", "inch"],
|
|
|
] as const
|
|
|
).map(([key, label, ph]) => (
|
|
|
<label key={key} className="block">
|
|
|
<FieldLabel required={key !== "weightLb"}>
|
|
|
{label}
|
|
|
</FieldLabel>
|
|
|
<TextInput
|
|
|
disabled={disabled}
|
|
|
value={line[key]}
|
|
|
onChange={(v) => {
|
|
|
const cargo = state.cargo.map((c) =>
|
|
|
c.key === line.key ? { ...c, [key]: v } : c,
|
|
|
);
|
|
|
patch({ ...state, cargo });
|
|
|
}}
|
|
|
placeholder={ph}
|
|
|
/>
|
|
|
</label>
|
|
|
))}
|
|
|
</div>
|
|
|
|
|
|
<div className="mt-3 grid gap-3 sm:grid-cols-2">
|
|
|
<label className="block">
|
|
|
<FieldLabel tip={MS_DETAILS_FIELD_TIPS.pieceCountType}>
|
|
|
件数类型
|
|
|
</FieldLabel>
|
|
|
<select
|
|
|
disabled={disabled}
|
|
|
value={line.pieceCountType}
|
|
|
onChange={(e) => {
|
|
|
const cargo = state.cargo.map((c) =>
|
|
|
c.key === line.key
|
|
|
? { ...c, pieceCountType: e.target.value }
|
|
|
: c,
|
|
|
);
|
|
|
patch({ ...state, cargo });
|
|
|
}}
|
|
|
className="h-10 w-full rounded-md border border-border px-2 text-sm"
|
|
|
>
|
|
|
<option value="">选择</option>
|
|
|
{MS_PIECE_COUNT_TYPES.map((t) => (
|
|
|
<option key={t.id} value={t.id}>
|
|
|
{t.label}
|
|
|
</option>
|
|
|
))}
|
|
|
</select>
|
|
|
</label>
|
|
|
<label className="block">
|
|
|
<FieldLabel>件数数量</FieldLabel>
|
|
|
<TextInput
|
|
|
disabled={disabled}
|
|
|
value={line.pieceCountQty}
|
|
|
onChange={(v) => {
|
|
|
const cargo = state.cargo.map((c) =>
|
|
|
c.key === line.key ? { ...c, pieceCountQty: v } : c,
|
|
|
);
|
|
|
patch({ ...state, cargo });
|
|
|
}}
|
|
|
placeholder="该类型数量"
|
|
|
/>
|
|
|
</label>
|
|
|
</div>
|
|
|
|
|
|
<label className="mt-3 block">
|
|
|
<FieldLabel required>货物描述</FieldLabel>
|
|
|
<textarea
|
|
|
required
|
|
|
disabled={disabled}
|
|
|
value={line.description}
|
|
|
aria-invalid={
|
|
|
invalidFields.has(`cargo.${idx}.description`) || undefined
|
|
|
}
|
|
|
data-invalid={
|
|
|
invalidFields.has(`cargo.${idx}.description`)
|
|
|
? "true"
|
|
|
: undefined
|
|
|
}
|
|
|
onChange={(e) => {
|
|
|
const cargo = state.cargo.map((c) =>
|
|
|
c.key === line.key
|
|
|
? { ...c, description: e.target.value }
|
|
|
: c,
|
|
|
);
|
|
|
patch({ ...state, cargo });
|
|
|
}}
|
|
|
rows={2}
|
|
|
placeholder="准确描述货物以避免查验与加收。例如：用「地毯」而非「一般商品」。"
|
|
|
className={
|
|
|
invalidFields.has(`cargo.${idx}.description`)
|
|
|
? "w-full rounded-md border-2 border-error bg-error/5 px-3 py-2 text-sm focus:border-error focus:outline-none focus:ring-2 focus:ring-error/25"
|
|
|
: "w-full rounded-md border border-border px-3 py-2 text-sm"
|
|
|
}
|
|
|
/>
|
|
|
</label>
|
|
|
|
|
|
<label className="mt-3 block">
|
|
|
<FieldLabel tip={MS_DETAILS_FIELD_TIPS.nmfc}>
|
|
|
NMFC 编码（可选）
|
|
|
</FieldLabel>
|
|
|
<TextInput
|
|
|
disabled={disabled}
|
|
|
value={line.nmfc}
|
|
|
onChange={(v) => {
|
|
|
const cargo = state.cargo.map((c) =>
|
|
|
c.key === line.key ? { ...c, nmfc: v } : c,
|
|
|
);
|
|
|
patch({ ...state, cargo });
|
|
|
}}
|
|
|
placeholder="输入 NMFC 编码"
|
|
|
/>
|
|
|
<p className="mt-1 text-[11px] text-text-secondary">
|
|
|
{MS_DETAILS_FIELD_TIPS.nmfc}
|
|
|
</p>
|
|
|
</label>
|
|
|
|
|
|
<div className="mt-4">
|
|
|
<p className="mb-2 text-xs font-medium text-text-primary">
|
|
|
受管制货物声明
|
|
|
</p>
|
|
|
<div className="flex flex-wrap gap-4 text-sm">
|
|
|
{(
|
|
|
[
|
|
|
["hazmat", "危险品（Hazmat）"],
|
|
|
["alcohol", "啤酒/葡萄酒/烈酒"],
|
|
|
["tobacco", "尼古丁/烟草"],
|
|
|
] as const
|
|
|
).map(([key, label]) => (
|
|
|
<label key={key} className="inline-flex items-center gap-2">
|
|
|
<input
|
|
|
type="checkbox"
|
|
|
disabled={disabled}
|
|
|
checked={line[key]}
|
|
|
onChange={(e) => {
|
|
|
const cargo = state.cargo.map((c) =>
|
|
|
c.key === line.key
|
|
|
? { ...c, [key]: e.target.checked }
|
|
|
: c,
|
|
|
);
|
|
|
patch({ ...state, cargo });
|
|
|
}}
|
|
|
/>
|
|
|
{label}
|
|
|
</label>
|
|
|
))}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
))}
|
|
|
</div>
|
|
|
</section>
|
|
|
</form>
|
|
|
);
|
|
|
}
|
