|
|
/**
|
|
|
* Flock Freight 登录后 Quick 查价界面（Let's build a quote）
|
|
|
* 对齐录制 flock-logged-in-20260715-143321.js + 官网截图；中文文案供嵌入宿主展示
|
|
|
*/
|
|
|
"use client";
|
|
|
|
|
|
import { useId, useMemo, useState, useEffect, type FormEvent, type ReactNode } from "react";
|
|
|
import { Plus, Trash, CaretDown } from "@phosphor-icons/react";
|
|
|
import {
|
|
|
defaultFlockPickupDateIso,
|
|
|
flockPickupDateValidationMessageFromIso,
|
|
|
minFlockPickupDateIso,
|
|
|
} from "@/lib/flock/pickup-date";
|
|
|
import { MothershipWeekdayDatePicker } from "@/components/mothership/mothership-weekday-date-picker";
|
|
|
import {
|
|
|
FLOCK_LIMITS,
|
|
|
FLOCK_VALIDATION_MESSAGES,
|
|
|
} from "@/lib/constants/flock-limits";
|
|
|
import {
|
|
|
evaluateFlockOptionCompat,
|
|
|
flockOptionHasBlock,
|
|
|
isFlockReeferOnlyWithoutTemp,
|
|
|
isFlockSprinterOnly,
|
|
|
isFlockTempWithoutReefer,
|
|
|
} from "@/lib/flock/option-compat";
|
|
|
import {
|
|
|
FlockSavedFreightSearch,
|
|
|
FlockSaveFreightButton,
|
|
|
} from "@/components/flock/flock-saved-freight-controls";
|
|
|
import type { FlockSavedFreightPreset } from "@/lib/flock/saved-freight-presets";
|
|
|
import {
|
|
|
QuoteFieldTooltip,
|
|
|
QuoteFloatHint,
|
|
|
QuoteNoticeCollapse,
|
|
|
QuotePageTitle,
|
|
|
QuoteRequiredMark,
|
|
|
QuoteSectionTitle,
|
|
|
QuoteStepProgress,
|
|
|
QuoteTipDefs,
|
|
|
quoteAddRowCls,
|
|
|
quoteCtaCls,
|
|
|
quoteInputCls,
|
|
|
quoteInputErrCls,
|
|
|
} from "@/components/quote/quote-form-chrome";
|
|
|
|
|
|
export const FLOCK_LOCATION_TYPES = [
|
|
|
{ id: "business_with_dock", label: "商业地址（有月台）" },
|
|
|
{ id: "business_without_dock", label: "商业地址（无月台）" },
|
|
|
{ id: "residential", label: "住宅地址" },
|
|
|
{ id: "trade_show", label: "展会 / 展览" },
|
|
|
{ id: "limited_construction", label: "施工工地" },
|
|
|
{ id: "limited_farm", label: "农场 / 种养殖地" },
|
|
|
{ id: "limited_airport", label: "受限通道 · 机场" },
|
|
|
{ id: "limited_port", label: "受限通道 · 港口码头" },
|
|
|
{ id: "limited_military", label: "受限通道 · 军事基地" },
|
|
|
{ id: "limited_worship", label: "受限通道 · 宗教场所" },
|
|
|
{ id: "limited_school", label: "受限通道 · 学校" },
|
|
|
{ id: "limited_other", label: "受限通道 · 其他" },
|
|
|
] as const;
|
|
|
|
|
|
/** 各地点类型可见的附加选项（对齐 Flock 官网：类别不同选项不同） */
|
|
|
export type FlockLocationAccessorialFlags = {
|
|
|
liftgate: boolean;
|
|
|
inside: boolean;
|
|
|
palletJack: boolean;
|
|
|
};
|
|
|
|
|
|
export const FLOCK_LOCATION_ACCESSORIALS: Record<
|
|
|
(typeof FLOCK_LOCATION_TYPES)[number]["id"],
|
|
|
FlockLocationAccessorialFlags
|
|
|
> = {
|
|
|
// 有卸货台：无附加勾选项（官网无 Liftgate / Inside / Pallet Jack）
|
|
|
business_with_dock: { liftgate: false, inside: false, palletJack: false },
|
|
|
// 无卸货台：三项全开
|
|
|
business_without_dock: { liftgate: true, inside: true, palletJack: true },
|
|
|
// 住宅：仅尾板 + 室内
|
|
|
residential: { liftgate: true, inside: true, palletJack: false },
|
|
|
// 展会：仅托盘车
|
|
|
trade_show: { liftgate: false, inside: false, palletJack: true },
|
|
|
// 施工现场：尾板 + 托盘车（无室内）
|
|
|
limited_construction: { liftgate: true, inside: false, palletJack: true },
|
|
|
// 农场：三项
|
|
|
limited_farm: { liftgate: true, inside: true, palletJack: true },
|
|
|
limited_airport: { liftgate: true, inside: true, palletJack: true },
|
|
|
limited_port: { liftgate: true, inside: true, palletJack: true },
|
|
|
limited_military: { liftgate: true, inside: true, palletJack: true },
|
|
|
// 宗教场所：仅尾板 + 室内（截图 Limited Access – Church）
|
|
|
limited_worship: { liftgate: true, inside: true, palletJack: false },
|
|
|
limited_school: { liftgate: true, inside: true, palletJack: true },
|
|
|
limited_other: { liftgate: true, inside: true, palletJack: true },
|
|
|
};
|
|
|
|
|
|
export function getFlockLocationAccessorials(
|
|
|
typeId: (typeof FLOCK_LOCATION_TYPES)[number]["id"],
|
|
|
): FlockLocationAccessorialFlags {
|
|
|
return FLOCK_LOCATION_ACCESSORIALS[typeId];
|
|
|
}
|
|
|
|
|
|
export const FLOCK_PACKAGING_TYPES = [
|
|
|
{ id: "pallets_48x40", label: "标准托盘 48×40", length: 48, width: 40 },
|
|
|
{ id: "pallets_48x48", label: "标准托盘 48×48", length: 48, width: 48 },
|
|
|
{ id: "pallets_60x48", label: "标准托盘 60×48", length: 60, width: 48 },
|
|
|
{ id: "pallets_custom", label: "自定义托盘尺寸", length: null, width: null },
|
|
|
{ id: "bags", label: "袋装", length: null, width: null },
|
|
|
{ id: "bales", label: "捆包", length: null, width: null },
|
|
|
{ id: "boxes", label: "纸箱 / 纸盒", length: null, width: null },
|
|
|
{ id: "bundles", label: "捆扎件", length: null, width: null },
|
|
|
{ id: "coils", label: "卷料", length: null, width: null },
|
|
|
{ id: "crates", label: "木箱 / 板条箱", length: null, width: null },
|
|
|
{ id: "cylinders", label: "钢瓶 / 气瓶", length: null, width: null },
|
|
|
{ id: "drums", label: "铁桶 / 圆桶", length: null, width: null },
|
|
|
{ id: "pails", label: "小桶 / 提桶", length: null, width: null },
|
|
|
{ id: "reels", label: "线盘 / 卷盘", length: null, width: null },
|
|
|
{ id: "rolls", label: "卷筒", length: null, width: null },
|
|
|
{ id: "slipsheets", label: "滑托板", length: null, width: null },
|
|
|
{ id: "tubes_pipes", label: "管材", length: null, width: null },
|
|
|
{ id: "units", label: "单件 / 整机", length: null, width: null },
|
|
|
] as const;
|
|
|
|
|
|
export const FLOCK_FREIGHT_CLASSES = [
|
|
|
"density",
|
|
|
"50",
|
|
|
"55",
|
|
|
"60",
|
|
|
"65",
|
|
|
"70",
|
|
|
"77.5",
|
|
|
"85",
|
|
|
"92.5",
|
|
|
"100",
|
|
|
"110",
|
|
|
"125",
|
|
|
"150",
|
|
|
"175",
|
|
|
"200",
|
|
|
"250",
|
|
|
"300",
|
|
|
"400",
|
|
|
"500",
|
|
|
] as const;
|
|
|
|
|
|
export const FLOCK_ADDITIONAL_SERVICES = [
|
|
|
{ id: "blind_shipment", label: "盲运（隐藏发/收货方）" },
|
|
|
{ id: "food_grade", label: "食品级车厢" },
|
|
|
{ id: "load_to_ride", label: "全程直达（不换装）" },
|
|
|
{ id: "temperature_control", label: "温控 / 冷链" },
|
|
|
{ id: "unloading", label: "到站卸货服务" },
|
|
|
] as const;
|
|
|
|
|
|
export const FLOCK_VEHICLE_TYPES = [
|
|
|
{ id: "box_truck", label: "厢式货车" },
|
|
|
{ id: "dry_van", label: "干货挂车" },
|
|
|
{ id: "refrigerated", label: "冷藏车" },
|
|
|
{ id: "sprinter", label: "小型厢车" },
|
|
|
] as const;
|
|
|
|
|
|
export const FLOCK_DEFAULT_VEHICLES = ["box_truck", "dry_van", "refrigerated"] as const;
|
|
|
|
|
|
/** 官网提示文案（货运行业惯用译，对齐全票提货/派送语境） */
|
|
|
export const FLOCK_LOCATION_TIP_INTRO =
|
|
|
"请准确选择地点类型，便于承运商安排提货与派送车辆，减少压车与拒收。";
|
|
|
|
|
|
export const FLOCK_LOCATION_TIP_ITEMS = [
|
|
|
{
|
|
|
title: "商业地址（有月台）：",
|
|
|
body: "具备标准高度装卸月台，车辆可直接对接上下货的商业场所。",
|
|
|
},
|
|
|
{
|
|
|
title: "商业地址（无月台）：",
|
|
|
body: "无标准装卸月台，通常需尾板或地面装卸的商业场所。",
|
|
|
},
|
|
|
{
|
|
|
title: "住宅地址：",
|
|
|
body: "按当地区划认定的住宅地点，含住家办公、宅基地建筑等。",
|
|
|
},
|
|
|
{
|
|
|
title: "展会 / 展览：",
|
|
|
body: "进出展馆、展台及展会临时仓的货件。",
|
|
|
},
|
|
|
{
|
|
|
title: "施工工地：",
|
|
|
body: "正在施工、进出可能受限的工地现场。",
|
|
|
},
|
|
|
{
|
|
|
title: "农场 / 种养殖地：",
|
|
|
body: "农业种植、养殖或农产品生产用地。",
|
|
|
},
|
|
|
{
|
|
|
title: "受限通道地点：",
|
|
|
body: "进出不便，或需额外通行证/安检手续的地点（机场、港口、军营、校园等）。",
|
|
|
},
|
|
|
] as const;
|
|
|
|
|
|
export const FLOCK_FREIGHT_CLASS_TIP =
|
|
|
"填写件数、外尺寸（长×宽×高）与重量后，可据此估算或选择 NMFC 运价等级。";
|
|
|
|
|
|
export const FLOCK_NMFC_NOTICE =
|
|
|
"仅按密度推算的等级可能不准确。正式分等还要考虑装卸难度、积载性与承运责任。托运人须选用正确的 NMFC 代码与等级，否则可能被重新分等并产生改费、延误与追加费用。";
|
|
|
|
|
|
export const FLOCK_STACKABLE_TIP =
|
|
|
"货件可堆码或可调向摆放时，有助于提高装载率，运费最多约可省 20%。";
|
|
|
|
|
|
export const FLOCK_ADDITIONAL_SERVICE_TIP_ITEMS = [
|
|
|
{
|
|
|
title: "盲运：",
|
|
|
body: "提单及签收单据对发货方和/或收货方信息进行隐匿，适用于中转贸易等场景。",
|
|
|
},
|
|
|
{
|
|
|
title: "食品级车厢：",
|
|
|
body: "要求车厢洁净、无异味、无破损渗透，适用于食品及敏感货物。",
|
|
|
},
|
|
|
{
|
|
|
title: "全程直达（不换装）：",
|
|
|
body: "要求货件途中不经其他站点翻装换车，降低破损与延误风险。",
|
|
|
},
|
|
|
{
|
|
|
title: "温控 / 冷链：",
|
|
|
body: "车厢需按指定温度区间控温运输。",
|
|
|
},
|
|
|
{
|
|
|
title: "到站卸货服务：",
|
|
|
body: "含到站分拣、装卸工协助等；不等于白手套式送货上门。",
|
|
|
},
|
|
|
] as const;
|
|
|
|
|
|
export const FLOCK_VEHICLE_TIP_ITEMS = [
|
|
|
{
|
|
|
title: "干货挂车：",
|
|
|
body: "提货或派送场地可停靠约 53 英尺干货厢式挂车时勾选。",
|
|
|
},
|
|
|
{
|
|
|
title: "冷藏车：",
|
|
|
body: "货件可装入各类尺寸冷藏车（如 48′、53′）时勾选；若需设定温度，请同时勾选「温控 / 冷链」。",
|
|
|
},
|
|
|
{
|
|
|
title: "厢式货车：",
|
|
|
body: "场地可停靠各尺寸厢货（如 18′–28′ 城市配送车）时勾选。",
|
|
|
},
|
|
|
{
|
|
|
title: "小型厢车：",
|
|
|
body: "场地可停靠厢式面包车/小型厢货，且无需叉车或坡道装卸时勾选。",
|
|
|
},
|
|
|
] as const;
|
|
|
|
|
|
export const FLOCK_INSURANCE_YES_TIP =
|
|
|
"若需在承运人责任限额之外另行加保，请选「是」。";
|
|
|
|
|
|
export const FLOCK_INSURANCE_NO_TIP =
|
|
|
"货件已有保险，或不需超出承运人责任限额的额外保额时，请选「否」。";
|
|
|
|
|
|
export const FLOCK_INSURANCE_WAIVE_HINT = "您已选择不投保额外货运险。";
|
|
|
|
|
|
export const FLOCK_INSURANCE_FOOTER =
|
|
|
"如需了解货运保险细则，可联系 support@flockfreight.com。";
|
|
|
|
|
|
/** 整票总重未超过阈值时，官网调度区部分选项为灰色不可选 */
|
|
|
export function isFlockSchedulingOptionLocked(
|
|
|
totalWeightLb: number,
|
|
|
weightLocked: boolean,
|
|
|
): boolean {
|
|
|
if (!weightLocked) return false;
|
|
|
return !Number.isFinite(totalWeightLb) || totalWeightLb <= FLOCK_LIMITS.schedulingWeightMinLb;
|
|
|
}
|
|
|
|
|
|
export function flockSchedulingWeightLockedHint(): string {
|
|
|
return `整票总重须大于 ${FLOCK_LIMITS.schedulingWeightMinLb} lb 才可选用`;
|
|
|
}
|
|
|
|
|
|
/** 官网时段下拉（12h，半小时步进） */
|
|
|
export const FLOCK_SCHEDULING_TIME_OPTIONS: string[] = (() => {
|
|
|
const opts: string[] = [];
|
|
|
for (let h = 0; h < 24; h += 1) {
|
|
|
for (const m of [0, 30] as const) {
|
|
|
const hour12 = h % 12 === 0 ? 12 : h % 12;
|
|
|
const ampm = h < 12 ? "am" : "pm";
|
|
|
opts.push(`${hour12}:${m === 0 ? "00" : "30"} ${ampm}`);
|
|
|
}
|
|
|
}
|
|
|
return opts;
|
|
|
})();
|
|
|
|
|
|
/** Quick 调度：weightLocked=true 表示总重 ≤5000 时灰色禁用 */
|
|
|
export const FLOCK_PICKUP_SERVICES = [
|
|
|
{
|
|
|
id: "standard_fcfs",
|
|
|
label: "标准提货（FCFS）",
|
|
|
hint: "在地点营业时间内提货",
|
|
|
detail: "",
|
|
|
weightLocked: false,
|
|
|
},
|
|
|
{
|
|
|
id: "during_window",
|
|
|
label: "指定提货时段",
|
|
|
hint: "",
|
|
|
detail:
|
|
|
"提货地点有预设时段（如 2PM–4PM）可供提货。",
|
|
|
weightLocked: true,
|
|
|
},
|
|
|
{
|
|
|
id: "have_appointment",
|
|
|
label: "已有提货预约",
|
|
|
hint: "",
|
|
|
detail: "",
|
|
|
weightLocked: true,
|
|
|
},
|
|
|
{
|
|
|
id: "need_appointment",
|
|
|
label: "需要提货预约",
|
|
|
hint: "",
|
|
|
detail: "",
|
|
|
weightLocked: true,
|
|
|
},
|
|
|
] as const;
|
|
|
|
|
|
/** 提货前致电：总重 ≤5000 时灰色 */
|
|
|
export const FLOCK_PICKUP_CALL_BEFORE_WEIGHT_LOCKED = true;
|
|
|
|
|
|
export const FLOCK_DELIVERY_SERVICES = [
|
|
|
{
|
|
|
id: "standard_fcfs",
|
|
|
label: "标准派送（FCFS）",
|
|
|
hint: "在地点营业时间内派送",
|
|
|
detail: "",
|
|
|
weightLocked: false,
|
|
|
},
|
|
|
{
|
|
|
id: "during_window",
|
|
|
label: "指定派送时段",
|
|
|
hint: "",
|
|
|
detail:
|
|
|
"派送地点有预设时段（如 2PM–4PM）可供派送。",
|
|
|
weightLocked: true,
|
|
|
},
|
|
|
{
|
|
|
id: "have_appointment",
|
|
|
label: "已有派送预约",
|
|
|
hint: "",
|
|
|
detail: "",
|
|
|
weightLocked: true,
|
|
|
},
|
|
|
{
|
|
|
id: "need_appointment",
|
|
|
label: "需要派送预约",
|
|
|
hint: "",
|
|
|
detail: "",
|
|
|
/** 官网小批量下仍可选 */
|
|
|
weightLocked: false,
|
|
|
},
|
|
|
{
|
|
|
id: "must_arrive_by",
|
|
|
label: "须在指定日期前到达",
|
|
|
hint: "",
|
|
|
detail: "",
|
|
|
weightLocked: true,
|
|
|
},
|
|
|
] as const;
|
|
|
|
|
|
export const FLOCK_CALL_FOR_DELIVERY_APPOINTMENT_HINT =
|
|
|
"Flock Freight 将与派送地点及承运商协调预约。";
|
|
|
|
|
|
export type FlockLocationTypeId = (typeof FLOCK_LOCATION_TYPES)[number]["id"];
|
|
|
export type FlockPackagingTypeId = (typeof FLOCK_PACKAGING_TYPES)[number]["id"];
|
|
|
export type FlockFreightClass = (typeof FLOCK_FREIGHT_CLASSES)[number];
|
|
|
export type FlockAdditionalServiceId =
|
|
|
(typeof FLOCK_ADDITIONAL_SERVICES)[number]["id"];
|
|
|
export type FlockVehicleTypeId = (typeof FLOCK_VEHICLE_TYPES)[number]["id"];
|
|
|
|
|
|
export type FlockLoggedInItem = {
|
|
|
key: string;
|
|
|
quantity: string;
|
|
|
packagingType: FlockPackagingTypeId;
|
|
|
lengthIn: string;
|
|
|
widthIn: string;
|
|
|
heightIn: string;
|
|
|
totalWeightLb: string;
|
|
|
freightClass: FlockFreightClass;
|
|
|
description: string;
|
|
|
stackable: boolean;
|
|
|
turnable: boolean;
|
|
|
};
|
|
|
|
|
|
export type FlockLoggedInQuotePayload = {
|
|
|
mode: "quick";
|
|
|
pickupDate: string;
|
|
|
pickupZip: string;
|
|
|
pickupType: FlockLocationTypeId;
|
|
|
pickupLiftgate: boolean;
|
|
|
pickupInside: boolean;
|
|
|
pickupPalletJack: boolean;
|
|
|
deliveryZip: string;
|
|
|
deliveryType: FlockLocationTypeId;
|
|
|
deliveryLiftgate: boolean;
|
|
|
deliveryInside: boolean;
|
|
|
deliveryPalletJack: boolean;
|
|
|
items: Array<{
|
|
|
quantity: number;
|
|
|
packagingType: FlockPackagingTypeId;
|
|
|
lengthIn: number;
|
|
|
widthIn: number;
|
|
|
heightIn: number;
|
|
|
totalWeightLb: number;
|
|
|
freightClass: FlockFreightClass;
|
|
|
description: string;
|
|
|
stackable: boolean;
|
|
|
turnable: boolean;
|
|
|
}>;
|
|
|
additionalServices: FlockAdditionalServiceId[];
|
|
|
vehicleTypes: FlockVehicleTypeId[];
|
|
|
pickupService: string;
|
|
|
deliveryService: string;
|
|
|
/** 指定提货时段 */
|
|
|
pickupWindowStartTime?: string;
|
|
|
pickupWindowEndTime?: string;
|
|
|
/** 已有提货预约 */
|
|
|
pickupAppointmentTime?: string;
|
|
|
/** 指定派送时段 */
|
|
|
deliveryWindowStartTime?: string;
|
|
|
deliveryWindowEndTime?: string;
|
|
|
deliveryWindowDate?: string;
|
|
|
/** 已有派送预约 */
|
|
|
deliveryAppointmentTime?: string;
|
|
|
deliveryAppointmentDate?: string;
|
|
|
/** 须在指定日期前到达 */
|
|
|
deliveryMustArriveByDate?: string;
|
|
|
/** Must arrive by 下的「预约派送致电」 */
|
|
|
callForDeliveryAppointment?: boolean;
|
|
|
callBeforePickup: boolean;
|
|
|
callBeforeDelivery: boolean;
|
|
|
additionalInsurance: boolean;
|
|
|
};
|
|
|
|
|
|
export interface FlockLoggedInQuoteFormProps {
|
|
|
formId?: string;
|
|
|
disabled?: boolean;
|
|
|
submitLocked?: boolean;
|
|
|
/** 按客户隔离常用货件（localStorage） */
|
|
|
customerId?: string;
|
|
|
onValidSubmit?: (payload: FlockLoggedInQuotePayload) => void;
|
|
|
}
|
|
|
|
|
|
function RequiredMark() {
|
|
|
return <QuoteRequiredMark />;
|
|
|
}
|
|
|
|
|
|
function newItem(): FlockLoggedInItem {
|
|
|
return {
|
|
|
key: `fi-${Math.random().toString(36).slice(2, 10)}`,
|
|
|
quantity: "",
|
|
|
packagingType: "pallets_48x40",
|
|
|
lengthIn: "48",
|
|
|
widthIn: "40",
|
|
|
heightIn: "",
|
|
|
totalWeightLb: "",
|
|
|
freightClass: "density",
|
|
|
description: "",
|
|
|
stackable: false,
|
|
|
turnable: false,
|
|
|
};
|
|
|
}
|
|
|
|
|
|
function applyPackagingDims(
|
|
|
packagingType: FlockPackagingTypeId,
|
|
|
item: FlockLoggedInItem,
|
|
|
): FlockLoggedInItem {
|
|
|
const pack = FLOCK_PACKAGING_TYPES.find((p) => p.id === packagingType);
|
|
|
if (!pack) return { ...item, packagingType };
|
|
|
return {
|
|
|
...item,
|
|
|
packagingType,
|
|
|
lengthIn: pack.length != null ? String(pack.length) : item.lengthIn,
|
|
|
widthIn: pack.width != null ? String(pack.width) : item.widthIn,
|
|
|
};
|
|
|
}
|
|
|
|
|
|
function applySavedFreightPreset(
|
|
|
item: FlockLoggedInItem,
|
|
|
preset: FlockSavedFreightPreset,
|
|
|
): FlockLoggedInItem {
|
|
|
const packOk = FLOCK_PACKAGING_TYPES.some((p) => p.id === preset.packagingType);
|
|
|
const classOk = (FLOCK_FREIGHT_CLASSES as readonly string[]).includes(
|
|
|
preset.freightClass,
|
|
|
);
|
|
|
return {
|
|
|
...item,
|
|
|
quantity: preset.quantity || item.quantity,
|
|
|
packagingType: packOk
|
|
|
? (preset.packagingType as FlockPackagingTypeId)
|
|
|
: item.packagingType,
|
|
|
lengthIn: preset.lengthIn || item.lengthIn,
|
|
|
widthIn: preset.widthIn || item.widthIn,
|
|
|
heightIn: preset.heightIn || item.heightIn,
|
|
|
totalWeightLb: preset.totalWeightLb || item.totalWeightLb,
|
|
|
freightClass: classOk
|
|
|
? (preset.freightClass as FlockFreightClass)
|
|
|
: item.freightClass,
|
|
|
description: preset.description || preset.name,
|
|
|
stackable: Boolean(preset.stackable),
|
|
|
turnable: Boolean(preset.turnable),
|
|
|
};
|
|
|
}
|
|
|
|
|
|
function OutlinedField({
|
|
|
label,
|
|
|
required,
|
|
|
error,
|
|
|
tip,
|
|
|
children,
|
|
|
}: {
|
|
|
label: string;
|
|
|
required?: boolean;
|
|
|
error?: string;
|
|
|
tip?: ReactNode;
|
|
|
children: ReactNode;
|
|
|
}) {
|
|
|
return (
|
|
|
<label className="block space-y-1">
|
|
|
<span className="inline-flex items-center gap-1 text-xs text-[#4B5563]">
|
|
|
{label}
|
|
|
{required ? <RequiredMark /> : null}
|
|
|
{tip ? (
|
|
|
<QuoteFieldTooltip tip={tip} label={`${label}说明`} wide />
|
|
|
) : null}
|
|
|
</span>
|
|
|
{children}
|
|
|
{error ? (
|
|
|
<span className="block text-xs text-[#EF4444]">{error}</span>
|
|
|
) : null}
|
|
|
</label>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
const inputCls = quoteInputCls;
|
|
|
const inputErrCls = quoteInputErrCls;
|
|
|
|
|
|
function LocationAccessorialChecks({
|
|
|
side,
|
|
|
typeId,
|
|
|
disabled,
|
|
|
liftgate,
|
|
|
inside,
|
|
|
palletJack,
|
|
|
onLiftgate,
|
|
|
onInside,
|
|
|
onPalletJack,
|
|
|
}: {
|
|
|
side: "pickup" | "delivery";
|
|
|
typeId: FlockLocationTypeId;
|
|
|
disabled?: boolean;
|
|
|
liftgate: boolean;
|
|
|
inside: boolean;
|
|
|
palletJack: boolean;
|
|
|
onLiftgate: (v: boolean) => void;
|
|
|
onInside: (v: boolean) => void;
|
|
|
onPalletJack: (v: boolean) => void;
|
|
|
}) {
|
|
|
const flags = getFlockLocationAccessorials(typeId);
|
|
|
if (!flags.liftgate && !flags.inside && !flags.palletJack) return null;
|
|
|
|
|
|
const liftgateLabel =
|
|
|
side === "pickup"
|
|
|
? "提货需要尾板（Liftgate）"
|
|
|
: "派送需要尾板（Liftgate）";
|
|
|
const insideLabel =
|
|
|
side === "pickup"
|
|
|
? "室内提货（Inside Pickup）"
|
|
|
: "室内派送（Inside Delivery）";
|
|
|
|
|
|
return (
|
|
|
<div className="mt-4 space-y-2 md:ml-[50%] md:pl-2">
|
|
|
{flags.liftgate ? (
|
|
|
<label className="flex items-center gap-2 text-sm text-text-primary">
|
|
|
<input
|
|
|
type="checkbox"
|
|
|
disabled={disabled}
|
|
|
checked={liftgate}
|
|
|
onChange={(e) => onLiftgate(e.target.checked)}
|
|
|
/>
|
|
|
{liftgateLabel}
|
|
|
</label>
|
|
|
) : null}
|
|
|
{flags.inside ? (
|
|
|
<label className="flex items-center gap-2 text-sm text-text-primary">
|
|
|
<input
|
|
|
type="checkbox"
|
|
|
disabled={disabled}
|
|
|
checked={inside}
|
|
|
onChange={(e) => onInside(e.target.checked)}
|
|
|
/>
|
|
|
{insideLabel}
|
|
|
</label>
|
|
|
) : null}
|
|
|
{flags.palletJack ? (
|
|
|
<label className="flex items-start gap-2 text-sm text-text-primary">
|
|
|
<input
|
|
|
type="checkbox"
|
|
|
className="mt-1"
|
|
|
disabled={disabled}
|
|
|
checked={palletJack}
|
|
|
onChange={(e) => onPalletJack(e.target.checked)}
|
|
|
/>
|
|
|
<span>
|
|
|
场地自备托盘车与叉车
|
|
|
<span className="mt-0.5 block text-xs text-text-secondary">
|
|
|
提供 FlockDirect® 时，该地点须具备托盘车与叉车
|
|
|
</span>
|
|
|
</span>
|
|
|
</label>
|
|
|
) : null}
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
function ChipToggle({
|
|
|
selected,
|
|
|
disabled,
|
|
|
label,
|
|
|
onClick,
|
|
|
}: {
|
|
|
selected: boolean;
|
|
|
disabled?: boolean;
|
|
|
label: string;
|
|
|
onClick: () => void;
|
|
|
}) {
|
|
|
return (
|
|
|
<button
|
|
|
type="button"
|
|
|
disabled={disabled}
|
|
|
onClick={onClick}
|
|
|
className={[
|
|
|
"inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-left text-sm transition-colors",
|
|
|
selected
|
|
|
? "border-text-primary bg-bg font-medium text-text-primary"
|
|
|
: "border-border bg-surface text-text-primary hover:border-text-secondary",
|
|
|
disabled ? "cursor-not-allowed opacity-50" : "",
|
|
|
].join(" ")}
|
|
|
>
|
|
|
{selected ? <span aria-hidden>✓</span> : null}
|
|
|
{label}
|
|
|
</button>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
/** 登录态货物行尺寸/重量硬限（同源 FLOCK_LIMITS） */
|
|
|
export function validateFlockLoggedInCargoLine(input: {
|
|
|
quantity: number;
|
|
|
lengthIn: number;
|
|
|
widthIn: number;
|
|
|
heightIn: number;
|
|
|
totalWeightLb: number;
|
|
|
description: string;
|
|
|
}): Record<string, string> {
|
|
|
const err: Record<string, string> = {};
|
|
|
const { min, lengthMax, widthMax, heightMax } = FLOCK_LIMITS.dimIn;
|
|
|
if (!Number.isFinite(input.quantity) || input.quantity <= 0) {
|
|
|
err.qty = "件数必填";
|
|
|
}
|
|
|
if (!Number.isFinite(input.lengthIn) || input.lengthIn < min) {
|
|
|
err.len = "长度必填";
|
|
|
} else if (input.lengthIn > lengthMax) {
|
|
|
err.len = FLOCK_VALIDATION_MESSAGES.length;
|
|
|
}
|
|
|
if (!Number.isFinite(input.widthIn) || input.widthIn < min) {
|
|
|
err.wid = "宽度必填";
|
|
|
} else if (input.widthIn > widthMax) {
|
|
|
err.wid = FLOCK_VALIDATION_MESSAGES.width;
|
|
|
}
|
|
|
if (!Number.isFinite(input.heightIn) || input.heightIn < min) {
|
|
|
err.hei = "高度必填";
|
|
|
} else if (input.heightIn > heightMax) {
|
|
|
err.hei = FLOCK_VALIDATION_MESSAGES.height;
|
|
|
}
|
|
|
if (!Number.isFinite(input.totalWeightLb) || input.totalWeightLb <= 0) {
|
|
|
err.wt = "重量必填";
|
|
|
} else if (input.totalWeightLb > FLOCK_LIMITS.totalWeightLbMax) {
|
|
|
err.wt = FLOCK_VALIDATION_MESSAGES.totalWeight;
|
|
|
}
|
|
|
if (!input.description.trim()) {
|
|
|
err.desc = "货物描述必填";
|
|
|
}
|
|
|
return err;
|
|
|
}
|
|
|
|
|
|
/** 将登录态 payload 映射为 Flock API flock_input（含登录态 RPA 扩展字段） */
|
|
|
export function mapFlockLoggedInToApiInput(payload: FlockLoggedInQuotePayload): {
|
|
|
pickup_date: string;
|
|
|
pickup_zip: string;
|
|
|
delivery_zip: string;
|
|
|
pallet_count: number;
|
|
|
total_weight: { value: number; unit: "lb" };
|
|
|
dimensions: { length: number; width: number; height: number; unit: "in" };
|
|
|
form_mode: "logged_in_quick";
|
|
|
pickup_location_type: string;
|
|
|
delivery_location_type: string;
|
|
|
packaging_type: string;
|
|
|
freight_class: string;
|
|
|
description: string;
|
|
|
stackable: boolean;
|
|
|
turnable: boolean;
|
|
|
additional_services: string[];
|
|
|
vehicle_types: string[];
|
|
|
call_before_pickup: boolean;
|
|
|
call_before_delivery: boolean;
|
|
|
pickup_service: string;
|
|
|
delivery_service: string;
|
|
|
pickup_window_start_time?: string;
|
|
|
pickup_window_end_time?: string;
|
|
|
pickup_appointment_time?: string;
|
|
|
delivery_window_start_time?: string;
|
|
|
delivery_window_end_time?: string;
|
|
|
delivery_window_date?: string;
|
|
|
delivery_appointment_time?: string;
|
|
|
delivery_appointment_date?: string;
|
|
|
delivery_must_arrive_by_date?: string;
|
|
|
call_for_delivery_appointment?: boolean;
|
|
|
pickup_liftgate: boolean;
|
|
|
pickup_inside: boolean;
|
|
|
pickup_pallet_jack: boolean;
|
|
|
delivery_liftgate: boolean;
|
|
|
delivery_inside: boolean;
|
|
|
delivery_pallet_jack: boolean;
|
|
|
} {
|
|
|
const [y, m, d] = payload.pickupDate.split("-");
|
|
|
const pickup_date =
|
|
|
y && m && d ? `${m}/${d}/${y}` : payload.pickupDate;
|
|
|
const first = payload.items[0];
|
|
|
const pallet_count = payload.items.reduce((s, it) => s + it.quantity, 0);
|
|
|
const total_weight = payload.items.reduce((s, it) => s + it.totalWeightLb, 0);
|
|
|
const opt = (v?: string) => {
|
|
|
const t = (v ?? "").trim();
|
|
|
return t || undefined;
|
|
|
};
|
|
|
return {
|
|
|
pickup_date,
|
|
|
pickup_zip: payload.pickupZip,
|
|
|
delivery_zip: payload.deliveryZip,
|
|
|
pallet_count: Math.max(1, pallet_count),
|
|
|
total_weight: { value: total_weight || first?.totalWeightLb || 1, unit: "lb" },
|
|
|
dimensions: {
|
|
|
length: first?.lengthIn ?? 48,
|
|
|
width: first?.widthIn ?? 40,
|
|
|
height: first?.heightIn ?? 48,
|
|
|
unit: "in",
|
|
|
},
|
|
|
form_mode: "logged_in_quick",
|
|
|
pickup_location_type: payload.pickupType,
|
|
|
delivery_location_type: payload.deliveryType,
|
|
|
packaging_type: first?.packagingType ?? "pallets_48x40",
|
|
|
freight_class: first?.freightClass ?? "density",
|
|
|
description: first?.description?.trim() || "General freight",
|
|
|
stackable: Boolean(first?.stackable),
|
|
|
turnable: Boolean(first?.turnable),
|
|
|
additional_services: [...payload.additionalServices],
|
|
|
vehicle_types: [...payload.vehicleTypes],
|
|
|
call_before_pickup:
|
|
|
FLOCK_PICKUP_CALL_BEFORE_WEIGHT_LOCKED &&
|
|
|
isFlockSchedulingOptionLocked(
|
|
|
payload.items.reduce((s, it) => s + it.totalWeightLb, 0),
|
|
|
true,
|
|
|
)
|
|
|
? false
|
|
|
: Boolean(payload.callBeforePickup),
|
|
|
call_before_delivery: Boolean(payload.callBeforeDelivery),
|
|
|
pickup_service: payload.pickupService,
|
|
|
delivery_service: payload.deliveryService,
|
|
|
pickup_window_start_time: opt(payload.pickupWindowStartTime),
|
|
|
pickup_window_end_time: opt(payload.pickupWindowEndTime),
|
|
|
pickup_appointment_time: opt(payload.pickupAppointmentTime),
|
|
|
delivery_window_start_time: opt(payload.deliveryWindowStartTime),
|
|
|
delivery_window_end_time: opt(payload.deliveryWindowEndTime),
|
|
|
delivery_window_date: opt(payload.deliveryWindowDate),
|
|
|
delivery_appointment_time: opt(payload.deliveryAppointmentTime),
|
|
|
delivery_appointment_date: opt(payload.deliveryAppointmentDate),
|
|
|
delivery_must_arrive_by_date: opt(payload.deliveryMustArriveByDate),
|
|
|
call_for_delivery_appointment:
|
|
|
payload.deliveryService === "must_arrive_by"
|
|
|
? Boolean(payload.callForDeliveryAppointment)
|
|
|
: undefined,
|
|
|
pickup_liftgate: Boolean(payload.pickupLiftgate),
|
|
|
pickup_inside: Boolean(payload.pickupInside),
|
|
|
pickup_pallet_jack: Boolean(payload.pickupPalletJack),
|
|
|
delivery_liftgate: Boolean(payload.deliveryLiftgate),
|
|
|
delivery_inside: Boolean(payload.deliveryInside),
|
|
|
delivery_pallet_jack: Boolean(payload.deliveryPalletJack),
|
|
|
};
|
|
|
}
|
|
|
|
|
|
export function FlockLoggedInQuoteForm({
|
|
|
formId = "flock-logged-in-quote-form",
|
|
|
disabled,
|
|
|
submitLocked,
|
|
|
customerId = "anon",
|
|
|
onValidSubmit,
|
|
|
}: FlockLoggedInQuoteFormProps) {
|
|
|
const baseId = useId();
|
|
|
const [pickupDate, setPickupDate] = useState(defaultFlockPickupDateIso);
|
|
|
const [pickupZip, setPickupZip] = useState("");
|
|
|
const [pickupType, setPickupType] =
|
|
|
useState<FlockLocationTypeId>("business_with_dock");
|
|
|
const [pickupLiftgate, setPickupLiftgate] = useState(false);
|
|
|
const [pickupInside, setPickupInside] = useState(false);
|
|
|
const [pickupPalletJack, setPickupPalletJack] = useState(false);
|
|
|
const [deliveryZip, setDeliveryZip] = useState("");
|
|
|
const [deliveryType, setDeliveryType] =
|
|
|
useState<FlockLocationTypeId>("business_with_dock");
|
|
|
const [deliveryLiftgate, setDeliveryLiftgate] = useState(false);
|
|
|
const [deliveryInside, setDeliveryInside] = useState(false);
|
|
|
const [deliveryPalletJack, setDeliveryPalletJack] = useState(false);
|
|
|
const [items, setItems] = useState<FlockLoggedInItem[]>(() => [newItem()]);
|
|
|
const [savedFreightRevision, setSavedFreightRevision] = useState(0); const [additionalServices, setAdditionalServices] = useState<
|
|
|
FlockAdditionalServiceId[]
|
|
|
>(["unloading"]);
|
|
|
const [vehicleTypes, setVehicleTypes] = useState<FlockVehicleTypeId[]>([
|
|
|
...FLOCK_DEFAULT_VEHICLES,
|
|
|
]);
|
|
|
const [pickupService, setPickupService] = useState("standard_fcfs");
|
|
|
const [deliveryService, setDeliveryService] = useState("standard_fcfs");
|
|
|
const [pickupWindowStartTime, setPickupWindowStartTime] = useState("8:00 am");
|
|
|
const [pickupWindowEndTime, setPickupWindowEndTime] = useState("5:00 pm");
|
|
|
const [pickupAppointmentTime, setPickupAppointmentTime] = useState("8:00 am");
|
|
|
const [deliveryWindowStartTime, setDeliveryWindowStartTime] =
|
|
|
useState("8:00 am");
|
|
|
const [deliveryWindowEndTime, setDeliveryWindowEndTime] = useState("5:00 pm");
|
|
|
const [deliveryWindowDate, setDeliveryWindowDate] = useState("");
|
|
|
const [deliveryAppointmentTime, setDeliveryAppointmentTime] =
|
|
|
useState("8:00 am");
|
|
|
const [deliveryAppointmentDate, setDeliveryAppointmentDate] = useState("");
|
|
|
const [deliveryMustArriveByDate, setDeliveryMustArriveByDate] = useState("");
|
|
|
const [callForDeliveryAppointment, setCallForDeliveryAppointment] =
|
|
|
useState(false);
|
|
|
const [callBeforePickup, setCallBeforePickup] = useState(false);
|
|
|
const [callBeforeDelivery, setCallBeforeDelivery] = useState(false);
|
|
|
const [additionalInsurance, setAdditionalInsurance] = useState(false);
|
|
|
const [showAdditional, setShowAdditional] = useState(true);
|
|
|
const [showScheduling, setShowScheduling] = useState(true);
|
|
|
const [showInsurance, setShowInsurance] = useState(true);
|
|
|
const [errors, setErrors] = useState<Record<string, string>>({});
|
|
|
const [localError, setLocalError] = useState<string | null>(null);
|
|
|
|
|
|
const servicesSelected = additionalServices.length;
|
|
|
const vehiclesSelected = vehicleTypes.length;
|
|
|
|
|
|
const shipmentWeightLb = useMemo(
|
|
|
() =>
|
|
|
items.reduce((sum, it) => {
|
|
|
const w = Number(it.totalWeightLb);
|
|
|
return sum + (Number.isFinite(w) && w > 0 ? w : 0);
|
|
|
}, 0),
|
|
|
[items],
|
|
|
);
|
|
|
|
|
|
const schedulingLockedHint = flockSchedulingWeightLockedHint();
|
|
|
|
|
|
const optionCompatIssues = useMemo(
|
|
|
() =>
|
|
|
evaluateFlockOptionCompat({
|
|
|
pickupLocationType: pickupType,
|
|
|
deliveryLocationType: deliveryType,
|
|
|
packagingTypes: items.map((it) => it.packagingType),
|
|
|
vehicleTypes,
|
|
|
additionalServices,
|
|
|
shipmentWeightLb,
|
|
|
}),
|
|
|
[
|
|
|
pickupType,
|
|
|
deliveryType,
|
|
|
items,
|
|
|
vehicleTypes,
|
|
|
additionalServices,
|
|
|
shipmentWeightLb,
|
|
|
],
|
|
|
);
|
|
|
|
|
|
useEffect(() => {
|
|
|
const pickupSvc = FLOCK_PICKUP_SERVICES.find((s) => s.id === pickupService);
|
|
|
if (
|
|
|
pickupSvc &&
|
|
|
isFlockSchedulingOptionLocked(shipmentWeightLb, pickupSvc.weightLocked)
|
|
|
) {
|
|
|
setPickupService("standard_fcfs");
|
|
|
}
|
|
|
const deliverySvc = FLOCK_DELIVERY_SERVICES.find(
|
|
|
(s) => s.id === deliveryService,
|
|
|
);
|
|
|
if (
|
|
|
deliverySvc &&
|
|
|
isFlockSchedulingOptionLocked(shipmentWeightLb, deliverySvc.weightLocked)
|
|
|
) {
|
|
|
setDeliveryService("standard_fcfs");
|
|
|
}
|
|
|
if (
|
|
|
FLOCK_PICKUP_CALL_BEFORE_WEIGHT_LOCKED &&
|
|
|
isFlockSchedulingOptionLocked(shipmentWeightLb, true) &&
|
|
|
callBeforePickup
|
|
|
) {
|
|
|
setCallBeforePickup(false);
|
|
|
}
|
|
|
}, [
|
|
|
shipmentWeightLb,
|
|
|
pickupService,
|
|
|
deliveryService,
|
|
|
callBeforePickup,
|
|
|
]);
|
|
|
|
|
|
const canSubmit = useMemo(
|
|
|
() => !disabled && !submitLocked,
|
|
|
[disabled, submitLocked],
|
|
|
);
|
|
|
|
|
|
const updateItem = (key: string, patch: Partial<FlockLoggedInItem>) => {
|
|
|
setItems((rows) =>
|
|
|
rows.map((row) => (row.key === key ? { ...row, ...patch } : row)),
|
|
|
);
|
|
|
};
|
|
|
|
|
|
const toggleService = (id: FlockAdditionalServiceId) => {
|
|
|
setAdditionalServices((prev) => {
|
|
|
const next = prev.includes(id)
|
|
|
? prev.filter((x) => x !== id)
|
|
|
: [...prev, id];
|
|
|
if (
|
|
|
isFlockReeferOnlyWithoutTemp({
|
|
|
vehicleTypes,
|
|
|
additionalServices: next,
|
|
|
})
|
|
|
) {
|
|
|
setLocalError(
|
|
|
"仅允许「冷藏车」时须同时勾选「温控 / 冷链」，否则官网无法提交询价",
|
|
|
);
|
|
|
} else if (
|
|
|
isFlockTempWithoutReefer({
|
|
|
vehicleTypes,
|
|
|
additionalServices: next,
|
|
|
})
|
|
|
) {
|
|
|
setLocalError("已勾选「温控 / 冷链」时，允许车型中须包含「冷藏车」");
|
|
|
} else {
|
|
|
setLocalError(null);
|
|
|
}
|
|
|
return next;
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const toggleVehicle = (id: FlockVehicleTypeId) => {
|
|
|
setVehicleTypes((prev) => {
|
|
|
const next = prev.includes(id)
|
|
|
? prev.filter((x) => x !== id)
|
|
|
: [...prev, id];
|
|
|
if (next.length === 0) {
|
|
|
setLocalError("请至少选择一种车型");
|
|
|
return prev.includes(id) ? prev : next;
|
|
|
}
|
|
|
if (
|
|
|
isFlockReeferOnlyWithoutTemp({
|
|
|
vehicleTypes: next,
|
|
|
additionalServices,
|
|
|
})
|
|
|
) {
|
|
|
setLocalError(
|
|
|
"仅允许「冷藏车」时须同时勾选「温控 / 冷链」，否则官网无法提交询价",
|
|
|
);
|
|
|
} else if (
|
|
|
isFlockTempWithoutReefer({
|
|
|
vehicleTypes: next,
|
|
|
additionalServices,
|
|
|
})
|
|
|
) {
|
|
|
setLocalError("已勾选「温控 / 冷链」时，允许车型中须包含「冷藏车」");
|
|
|
} else if (isFlockSprinterOnly(next)) {
|
|
|
setLocalError(
|
|
|
"仅选「小型厢车」时易无报价，建议同时勾选厢式货车或干货挂车",
|
|
|
);
|
|
|
} else {
|
|
|
setLocalError(null);
|
|
|
}
|
|
|
return next;
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const handleSubmit = (e: FormEvent) => {
|
|
|
e.preventDefault();
|
|
|
if (!canSubmit) return;
|
|
|
setLocalError(null);
|
|
|
const nextErr: Record<string, string> = {};
|
|
|
|
|
|
if (!/^\d{5}(-\d{4})?$/.test(pickupZip.trim())) {
|
|
|
nextErr.pickupZip = "提货邮编必填（5 位）";
|
|
|
}
|
|
|
if (!/^\d{5}(-\d{4})?$/.test(deliveryZip.trim())) {
|
|
|
nextErr.deliveryZip = "派送邮编必填（5 位）";
|
|
|
}
|
|
|
const pickupDateError = flockPickupDateValidationMessageFromIso(pickupDate);
|
|
|
if (pickupDateError) {
|
|
|
nextErr.pickupDate = pickupDateError;
|
|
|
}
|
|
|
if (vehicleTypes.length === 0) {
|
|
|
nextErr.vehicles = "请至少选择一种车型";
|
|
|
}
|
|
|
if (flockOptionHasBlock(optionCompatIssues)) {
|
|
|
const block = optionCompatIssues.find((i) => i.severity === "block")!;
|
|
|
setLocalError(block.message);
|
|
|
setErrors(nextErr);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const parsedItems: FlockLoggedInQuotePayload["items"] = [];
|
|
|
for (let i = 0; i < items.length; i += 1) {
|
|
|
const it = items[i]!;
|
|
|
const quantity = Number(it.quantity);
|
|
|
const lengthIn = Number(it.lengthIn);
|
|
|
const widthIn = Number(it.widthIn);
|
|
|
const heightIn = Number(it.heightIn);
|
|
|
const totalWeightLb = Number(it.totalWeightLb);
|
|
|
const lineErr = validateFlockLoggedInCargoLine({
|
|
|
quantity,
|
|
|
lengthIn,
|
|
|
widthIn,
|
|
|
heightIn,
|
|
|
totalWeightLb,
|
|
|
description: it.description,
|
|
|
});
|
|
|
if (lineErr.qty) nextErr[`item-${i}-qty`] = lineErr.qty;
|
|
|
if (lineErr.len) nextErr[`item-${i}-len`] = lineErr.len;
|
|
|
if (lineErr.wid) nextErr[`item-${i}-wid`] = lineErr.wid;
|
|
|
if (lineErr.hei) nextErr[`item-${i}-hei`] = lineErr.hei;
|
|
|
if (lineErr.wt) nextErr[`item-${i}-wt`] = lineErr.wt;
|
|
|
if (lineErr.desc) nextErr[`item-${i}-desc`] = lineErr.desc;
|
|
|
if (Object.keys(nextErr).some((k) => k.startsWith(`item-${i}-`))) {
|
|
|
continue;
|
|
|
}
|
|
|
parsedItems.push({
|
|
|
quantity,
|
|
|
packagingType: it.packagingType,
|
|
|
lengthIn,
|
|
|
widthIn,
|
|
|
heightIn,
|
|
|
totalWeightLb,
|
|
|
freightClass: it.freightClass,
|
|
|
description: it.description.trim(),
|
|
|
stackable: it.stackable,
|
|
|
turnable: it.turnable,
|
|
|
});
|
|
|
}
|
|
|
|
|
|
const shipmentWeight = parsedItems.reduce(
|
|
|
(s, it) => s + it.totalWeightLb,
|
|
|
0,
|
|
|
);
|
|
|
if (
|
|
|
parsedItems.length > 0 &&
|
|
|
shipmentWeight > FLOCK_LIMITS.totalWeightLbMax
|
|
|
) {
|
|
|
nextErr.shipmentWeight = FLOCK_VALIDATION_MESSAGES.totalWeight;
|
|
|
}
|
|
|
|
|
|
if (pickupService === "during_window") {
|
|
|
if (!pickupWindowStartTime.trim()) {
|
|
|
nextErr.pickupWindowStart = "请选择提货时段开始时间";
|
|
|
}
|
|
|
if (!pickupWindowEndTime.trim()) {
|
|
|
nextErr.pickupWindowEnd = "请选择提货时段结束时间";
|
|
|
}
|
|
|
}
|
|
|
if (pickupService === "have_appointment" && !pickupAppointmentTime.trim()) {
|
|
|
nextErr.pickupApptTime = "请选择提货预约时间";
|
|
|
}
|
|
|
if (deliveryService === "during_window") {
|
|
|
if (!deliveryWindowStartTime.trim()) {
|
|
|
nextErr.deliveryWindowStart = "请选择派送时段开始时间";
|
|
|
}
|
|
|
if (!deliveryWindowEndTime.trim()) {
|
|
|
nextErr.deliveryWindowEnd = "请选择派送时段结束时间";
|
|
|
}
|
|
|
if (!deliveryWindowDate.trim()) {
|
|
|
nextErr.deliveryWindowDate = "请选择派送时段日期";
|
|
|
}
|
|
|
}
|
|
|
if (deliveryService === "have_appointment") {
|
|
|
if (!deliveryAppointmentTime.trim()) {
|
|
|
nextErr.deliveryApptTime = "请选择派送预约时间";
|
|
|
}
|
|
|
if (!deliveryAppointmentDate.trim()) {
|
|
|
nextErr.deliveryApptDate = "请选择派送预约日期";
|
|
|
}
|
|
|
}
|
|
|
if (
|
|
|
deliveryService === "must_arrive_by" &&
|
|
|
!deliveryMustArriveByDate.trim()
|
|
|
) {
|
|
|
nextErr.deliveryMustArrive = "请选择须到达日期";
|
|
|
}
|
|
|
|
|
|
setErrors(nextErr);
|
|
|
if (Object.keys(nextErr).length > 0 || parsedItems.length === 0) {
|
|
|
const firstMsg =
|
|
|
nextErr.pickupZip ||
|
|
|
nextErr.deliveryZip ||
|
|
|
nextErr.pickupDate ||
|
|
|
nextErr.vehicles ||
|
|
|
nextErr.shipmentWeight ||
|
|
|
Object.values(nextErr)[0] ||
|
|
|
"请完善必填项后再生成报价";
|
|
|
setLocalError(firstMsg);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
onValidSubmit?.({
|
|
|
mode: "quick",
|
|
|
pickupDate,
|
|
|
pickupZip: pickupZip.trim(),
|
|
|
pickupType,
|
|
|
pickupLiftgate,
|
|
|
pickupInside,
|
|
|
pickupPalletJack,
|
|
|
deliveryZip: deliveryZip.trim(),
|
|
|
deliveryType,
|
|
|
deliveryLiftgate,
|
|
|
deliveryInside,
|
|
|
deliveryPalletJack,
|
|
|
items: parsedItems,
|
|
|
additionalServices,
|
|
|
vehicleTypes,
|
|
|
pickupService,
|
|
|
deliveryService,
|
|
|
pickupWindowStartTime:
|
|
|
pickupService === "during_window" ? pickupWindowStartTime : undefined,
|
|
|
pickupWindowEndTime:
|
|
|
pickupService === "during_window" ? pickupWindowEndTime : undefined,
|
|
|
pickupAppointmentTime:
|
|
|
pickupService === "have_appointment"
|
|
|
? pickupAppointmentTime
|
|
|
: undefined,
|
|
|
deliveryWindowStartTime:
|
|
|
deliveryService === "during_window"
|
|
|
? deliveryWindowStartTime
|
|
|
: undefined,
|
|
|
deliveryWindowEndTime:
|
|
|
deliveryService === "during_window" ? deliveryWindowEndTime : undefined,
|
|
|
deliveryWindowDate:
|
|
|
deliveryService === "during_window" ? deliveryWindowDate : undefined,
|
|
|
deliveryAppointmentTime:
|
|
|
deliveryService === "have_appointment"
|
|
|
? deliveryAppointmentTime
|
|
|
: undefined,
|
|
|
deliveryAppointmentDate:
|
|
|
deliveryService === "have_appointment"
|
|
|
? deliveryAppointmentDate
|
|
|
: undefined,
|
|
|
deliveryMustArriveByDate:
|
|
|
deliveryService === "must_arrive_by"
|
|
|
? deliveryMustArriveByDate
|
|
|
: undefined,
|
|
|
callForDeliveryAppointment:
|
|
|
deliveryService === "must_arrive_by"
|
|
|
? callForDeliveryAppointment
|
|
|
: undefined,
|
|
|
callBeforePickup:
|
|
|
FLOCK_PICKUP_CALL_BEFORE_WEIGHT_LOCKED &&
|
|
|
isFlockSchedulingOptionLocked(shipmentWeight, true)
|
|
|
? false
|
|
|
: callBeforePickup,
|
|
|
callBeforeDelivery,
|
|
|
additionalInsurance,
|
|
|
});
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<form id={formId} onSubmit={handleSubmit} className="space-y-6">
|
|
|
<div className="space-y-3">
|
|
|
<QuoteStepProgress current={1} />
|
|
|
<QuotePageTitle>创建报价</QuotePageTitle>
|
|
|
</div>
|
|
|
|
|
|
<QuoteFloatHint message={localError} />
|
|
|
{optionCompatIssues.length > 0 ? (
|
|
|
<div className="space-y-1.5 rounded-md border border-[#F59E0B]/40 bg-[#FFFBEB] px-3 py-2 text-[12px] leading-snug text-[#92400E]">
|
|
|
<p className="font-medium text-[#B45309]">选项提示（官网规则 / 易无价组合）</p>
|
|
|
<ul className="list-disc space-y-1 pl-4">
|
|
|
{optionCompatIssues.map((issue) => (
|
|
|
<li
|
|
|
key={issue.code}
|
|
|
className={
|
|
|
issue.severity === "block" ? "font-medium text-[#EF4444]" : ""
|
|
|
}
|
|
|
>
|
|
|
{issue.severity === "block" ? "不可提交：" : ""}
|
|
|
{issue.message}
|
|
|
</li>
|
|
|
))}
|
|
|
</ul>
|
|
|
</div>
|
|
|
) : null}
|
|
|
|
|
|
{/* 提货日期 */}
|
|
|
<section className="rounded-lg border border-border bg-surface p-4 shadow-card md:p-5">
|
|
|
<div className="mb-4">
|
|
|
<QuoteSectionTitle>提货日期</QuoteSectionTitle>
|
|
|
</div>
|
|
|
<OutlinedField
|
|
|
label="提货日期"
|
|
|
required
|
|
|
error={errors.pickupDate}
|
|
|
>
|
|
|
<MothershipWeekdayDatePicker
|
|
|
value={pickupDate}
|
|
|
minIso={minFlockPickupDateIso()}
|
|
|
disabled={disabled}
|
|
|
className={errors.pickupDate ? inputErrCls : inputCls}
|
|
|
onChange={setPickupDate}
|
|
|
/>
|
|
|
</OutlinedField>
|
|
|
</section>
|
|
|
|
|
|
{/* 提货与派送地点 */}
|
|
|
<section className="rounded-lg border border-border bg-surface p-4 shadow-card md:p-5">
|
|
|
<div className="mb-4 flex items-center gap-2">
|
|
|
<QuoteSectionTitle>提货与派送地点</QuoteSectionTitle>
|
|
|
<QuoteFieldTooltip
|
|
|
wide
|
|
|
position="below"
|
|
|
label="地点类型说明"
|
|
|
tip={
|
|
|
<QuoteTipDefs
|
|
|
intro={FLOCK_LOCATION_TIP_INTRO}
|
|
|
items={FLOCK_LOCATION_TIP_ITEMS}
|
|
|
/>
|
|
|
}
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
|
<OutlinedField
|
|
|
label="提货邮编"
|
|
|
required
|
|
|
error={errors.pickupZip}
|
|
|
>
|
|
|
<input
|
|
|
disabled={disabled}
|
|
|
value={pickupZip}
|
|
|
onChange={(e) => setPickupZip(e.target.value)}
|
|
|
placeholder="如 60611"
|
|
|
className={errors.pickupZip ? inputErrCls : inputCls}
|
|
|
inputMode="numeric"
|
|
|
/>
|
|
|
</OutlinedField>
|
|
|
<OutlinedField label="提货地点类型" required>
|
|
|
<select
|
|
|
disabled={disabled}
|
|
|
value={pickupType}
|
|
|
onChange={(e) => {
|
|
|
const next = e.target.value as FlockLocationTypeId;
|
|
|
const flags = getFlockLocationAccessorials(next);
|
|
|
setPickupType(next);
|
|
|
// 对齐官网：切换类型时默认勾选该类可见项（住宅→尾板+室内）
|
|
|
setPickupLiftgate(flags.liftgate);
|
|
|
setPickupInside(flags.inside);
|
|
|
setPickupPalletJack(flags.palletJack);
|
|
|
}}
|
|
|
className={inputCls}
|
|
|
>
|
|
|
{FLOCK_LOCATION_TYPES.map((t) => (
|
|
|
<option key={t.id} value={t.id}>
|
|
|
{t.label}
|
|
|
</option>
|
|
|
))}
|
|
|
</select>
|
|
|
</OutlinedField>
|
|
|
</div>
|
|
|
|
|
|
<LocationAccessorialChecks
|
|
|
side="pickup"
|
|
|
typeId={pickupType}
|
|
|
disabled={disabled}
|
|
|
liftgate={pickupLiftgate}
|
|
|
inside={pickupInside}
|
|
|
palletJack={pickupPalletJack}
|
|
|
onLiftgate={setPickupLiftgate}
|
|
|
onInside={setPickupInside}
|
|
|
onPalletJack={setPickupPalletJack}
|
|
|
/>
|
|
|
|
|
|
<div className="mt-6 grid gap-4 border-t border-border pt-4 md:grid-cols-2">
|
|
|
<OutlinedField
|
|
|
label="派送邮编"
|
|
|
required
|
|
|
error={errors.deliveryZip}
|
|
|
>
|
|
|
<input
|
|
|
disabled={disabled}
|
|
|
value={deliveryZip}
|
|
|
onChange={(e) => setDeliveryZip(e.target.value)}
|
|
|
placeholder="如 78701"
|
|
|
className={errors.deliveryZip ? inputErrCls : inputCls}
|
|
|
inputMode="numeric"
|
|
|
/>
|
|
|
</OutlinedField>
|
|
|
<OutlinedField label="派送地点类型" required>
|
|
|
<select
|
|
|
disabled={disabled}
|
|
|
value={deliveryType}
|
|
|
onChange={(e) => {
|
|
|
const next = e.target.value as FlockLocationTypeId;
|
|
|
const flags = getFlockLocationAccessorials(next);
|
|
|
setDeliveryType(next);
|
|
|
// 对齐官网：切换类型时默认勾选该类可见项（农场→三项全选）
|
|
|
setDeliveryLiftgate(flags.liftgate);
|
|
|
setDeliveryInside(flags.inside);
|
|
|
setDeliveryPalletJack(flags.palletJack);
|
|
|
}}
|
|
|
className={inputCls}
|
|
|
>
|
|
|
{FLOCK_LOCATION_TYPES.map((t) => (
|
|
|
<option key={t.id} value={t.id}>
|
|
|
{t.label}
|
|
|
</option>
|
|
|
))}
|
|
|
</select>
|
|
|
</OutlinedField>
|
|
|
</div>
|
|
|
|
|
|
<LocationAccessorialChecks
|
|
|
side="delivery"
|
|
|
typeId={deliveryType}
|
|
|
disabled={disabled}
|
|
|
liftgate={deliveryLiftgate}
|
|
|
inside={deliveryInside}
|
|
|
palletJack={deliveryPalletJack}
|
|
|
onLiftgate={setDeliveryLiftgate}
|
|
|
onInside={setDeliveryInside}
|
|
|
onPalletJack={setDeliveryPalletJack}
|
|
|
/>
|
|
|
|
|
|
<div className="mt-6 border-t border-border pt-4">
|
|
|
<OutlinedField
|
|
|
label="搜索常用货件（可选）"
|
|
|
tip="将货品描述存为常用后，可在此按名称快速回填件数、尺寸与描述"
|
|
|
>
|
|
|
<FlockSavedFreightSearch
|
|
|
customerId={customerId}
|
|
|
disabled={disabled}
|
|
|
revision={savedFreightRevision}
|
|
|
onSelect={(preset) => {
|
|
|
setItems((rows) => {
|
|
|
if (!rows.length) return [applySavedFreightPreset(newItem(), preset)];
|
|
|
const [first, ...rest] = rows;
|
|
|
return [applySavedFreightPreset(first, preset), ...rest];
|
|
|
});
|
|
|
}}
|
|
|
/>
|
|
|
</OutlinedField>
|
|
|
</div>
|
|
|
</section>
|
|
|
{/* 货物行 */}
|
|
|
{items.map((item, idx) => (
|
|
|
<section
|
|
|
key={item.key}
|
|
|
className="rounded-lg border border-border bg-surface p-4 shadow-card md:p-5"
|
|
|
>
|
|
|
<div className="mb-4 flex items-center justify-between">
|
|
|
<QuoteSectionTitle>货物 {idx + 1}</QuoteSectionTitle>
|
|
|
{items.length > 1 ? (
|
|
|
<button
|
|
|
type="button"
|
|
|
disabled={disabled}
|
|
|
aria-label="删除货物行"
|
|
|
onClick={() =>
|
|
|
setItems((rows) => rows.filter((r) => r.key !== item.key))
|
|
|
}
|
|
|
className="rounded p-1 text-text-secondary hover:bg-bg hover:text-[#EF4444] disabled:opacity-50"
|
|
|
>
|
|
|
<Trash size={18} />
|
|
|
</button>
|
|
|
) : null}
|
|
|
</div>
|
|
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
|
<OutlinedField
|
|
|
label="件数"
|
|
|
required
|
|
|
error={errors[`item-${idx}-qty`]}
|
|
|
>
|
|
|
<input
|
|
|
disabled={disabled}
|
|
|
value={item.quantity}
|
|
|
onChange={(e) =>
|
|
|
updateItem(item.key, { quantity: e.target.value })
|
|
|
}
|
|
|
className={
|
|
|
errors[`item-${idx}-qty`] ? inputErrCls : inputCls
|
|
|
}
|
|
|
inputMode="numeric"
|
|
|
/>
|
|
|
</OutlinedField>
|
|
|
<OutlinedField label="包装类型" required>
|
|
|
<select
|
|
|
disabled={disabled}
|
|
|
value={item.packagingType}
|
|
|
onChange={(e) =>
|
|
|
updateItem(
|
|
|
item.key,
|
|
|
applyPackagingDims(
|
|
|
e.target.value as FlockPackagingTypeId,
|
|
|
item,
|
|
|
),
|
|
|
)
|
|
|
}
|
|
|
className={inputCls}
|
|
|
>
|
|
|
{FLOCK_PACKAGING_TYPES.map((p) => (
|
|
|
<option key={p.id} value={p.id}>
|
|
|
{p.label}
|
|
|
</option>
|
|
|
))}
|
|
|
</select>
|
|
|
</OutlinedField>
|
|
|
</div>
|
|
|
|
|
|
<div className="mt-4 grid grid-cols-3 gap-4">
|
|
|
<OutlinedField
|
|
|
label="长（英寸）"
|
|
|
required
|
|
|
tip={`上限 ${FLOCK_LIMITS.dimIn.lengthMax} in`}
|
|
|
error={errors[`item-${idx}-len`]}
|
|
|
>
|
|
|
<input
|
|
|
disabled={disabled}
|
|
|
value={item.lengthIn}
|
|
|
min={FLOCK_LIMITS.dimIn.min}
|
|
|
max={FLOCK_LIMITS.dimIn.lengthMax}
|
|
|
onChange={(e) =>
|
|
|
updateItem(item.key, { lengthIn: e.target.value })
|
|
|
}
|
|
|
className={
|
|
|
errors[`item-${idx}-len`] ? inputErrCls : inputCls
|
|
|
}
|
|
|
inputMode="decimal"
|
|
|
/>
|
|
|
</OutlinedField>
|
|
|
<OutlinedField
|
|
|
label="宽（英寸）"
|
|
|
required
|
|
|
tip={`上限 ${FLOCK_LIMITS.dimIn.widthMax} in`}
|
|
|
error={errors[`item-${idx}-wid`]}
|
|
|
>
|
|
|
<input
|
|
|
disabled={disabled}
|
|
|
value={item.widthIn}
|
|
|
min={FLOCK_LIMITS.dimIn.min}
|
|
|
max={FLOCK_LIMITS.dimIn.widthMax}
|
|
|
onChange={(e) =>
|
|
|
updateItem(item.key, { widthIn: e.target.value })
|
|
|
}
|
|
|
className={
|
|
|
errors[`item-${idx}-wid`] ? inputErrCls : inputCls
|
|
|
}
|
|
|
inputMode="decimal"
|
|
|
/>
|
|
|
</OutlinedField>
|
|
|
<OutlinedField
|
|
|
label="高（英寸）"
|
|
|
required
|
|
|
tip={`上限 ${FLOCK_LIMITS.dimIn.heightMax} in`}
|
|
|
error={errors[`item-${idx}-hei`]}
|
|
|
>
|
|
|
<input
|
|
|
disabled={disabled}
|
|
|
value={item.heightIn}
|
|
|
min={FLOCK_LIMITS.dimIn.min}
|
|
|
max={FLOCK_LIMITS.dimIn.heightMax}
|
|
|
onChange={(e) =>
|
|
|
updateItem(item.key, { heightIn: e.target.value })
|
|
|
}
|
|
|
className={
|
|
|
errors[`item-${idx}-hei`] ? inputErrCls : inputCls
|
|
|
}
|
|
|
inputMode="decimal"
|
|
|
/>
|
|
|
</OutlinedField>
|
|
|
</div>
|
|
|
|
|
|
<div className="mt-4 grid gap-4 sm:grid-cols-2">
|
|
|
<OutlinedField
|
|
|
label="本行总重（磅）"
|
|
|
required
|
|
|
tip={`上限 ${FLOCK_LIMITS.totalWeightLbMax} lb`}
|
|
|
error={errors[`item-${idx}-wt`]}
|
|
|
>
|
|
|
<input
|
|
|
disabled={disabled}
|
|
|
value={item.totalWeightLb}
|
|
|
min={0.01}
|
|
|
max={FLOCK_LIMITS.totalWeightLbMax}
|
|
|
onChange={(e) =>
|
|
|
updateItem(item.key, { totalWeightLb: e.target.value })
|
|
|
}
|
|
|
className={
|
|
|
errors[`item-${idx}-wt`] ? inputErrCls : inputCls
|
|
|
}
|
|
|
inputMode="decimal"
|
|
|
/>
|
|
|
</OutlinedField>
|
|
|
<OutlinedField
|
|
|
label="NMFC 运价等级"
|
|
|
required
|
|
|
tip={FLOCK_FREIGHT_CLASS_TIP}
|
|
|
>
|
|
|
<select
|
|
|
disabled={disabled}
|
|
|
value={item.freightClass}
|
|
|
onChange={(e) =>
|
|
|
updateItem(item.key, {
|
|
|
freightClass: e.target.value as FlockFreightClass,
|
|
|
})
|
|
|
}
|
|
|
className={inputCls}
|
|
|
>
|
|
|
{FLOCK_FREIGHT_CLASSES.map((c) => (
|
|
|
<option key={c} value={c}>
|
|
|
{c === "density" ? "按密度估算" : c}
|
|
|
</option>
|
|
|
))}
|
|
|
</select>
|
|
|
</OutlinedField>
|
|
|
</div>
|
|
|
|
|
|
{item.freightClass === "density" ? (
|
|
|
<div className="mt-4">
|
|
|
<QuoteNoticeCollapse title="注意事项">
|
|
|
{FLOCK_NMFC_NOTICE}
|
|
|
</QuoteNoticeCollapse>
|
|
|
</div>
|
|
|
) : null}
|
|
|
|
|
|
<div className="mt-4">
|
|
|
<OutlinedField
|
|
|
label="货品描述"
|
|
|
required
|
|
|
error={errors[`item-${idx}-desc`]}
|
|
|
>
|
|
|
<input
|
|
|
disabled={disabled}
|
|
|
value={item.description}
|
|
|
onChange={(e) =>
|
|
|
updateItem(item.key, { description: e.target.value })
|
|
|
}
|
|
|
className={
|
|
|
errors[`item-${idx}-desc`] ? inputErrCls : inputCls
|
|
|
}
|
|
|
/>
|
|
|
</OutlinedField>
|
|
|
<FlockSaveFreightButton
|
|
|
customerId={customerId}
|
|
|
disabled={disabled}
|
|
|
source={{
|
|
|
description: item.description,
|
|
|
quantity: item.quantity,
|
|
|
packagingType: item.packagingType,
|
|
|
lengthIn: item.lengthIn,
|
|
|
widthIn: item.widthIn,
|
|
|
heightIn: item.heightIn,
|
|
|
totalWeightLb: item.totalWeightLb,
|
|
|
freightClass: item.freightClass,
|
|
|
stackable: item.stackable,
|
|
|
turnable: item.turnable,
|
|
|
}}
|
|
|
onSaved={() => setSavedFreightRevision((n) => n + 1)}
|
|
|
/>
|
|
|
</div>
|
|
|
<div className="mt-4">
|
|
|
<p className="mb-2 text-xs text-[#4B5563]">装载选项</p>
|
|
|
<div className="flex flex-wrap gap-4">
|
|
|
<label className="flex h-12 items-center gap-2 text-sm">
|
|
|
<input
|
|
|
type="checkbox"
|
|
|
disabled={disabled}
|
|
|
checked={item.stackable}
|
|
|
onChange={(e) =>
|
|
|
updateItem(item.key, { stackable: e.target.checked })
|
|
|
}
|
|
|
/>
|
|
|
可堆码
|
|
|
</label>
|
|
|
<label className="flex h-12 items-center gap-2 text-sm">
|
|
|
<input
|
|
|
type="checkbox"
|
|
|
disabled={disabled}
|
|
|
checked={item.turnable}
|
|
|
onChange={(e) =>
|
|
|
updateItem(item.key, { turnable: e.target.checked })
|
|
|
}
|
|
|
/>
|
|
|
可调向摆放
|
|
|
</label>
|
|
|
</div>
|
|
|
<p className="mt-3 rounded-md border border-[#1890FF]/20 bg-[#1890FF]/5 px-3 py-2 text-xs text-[#4B5563]">
|
|
|
{FLOCK_STACKABLE_TIP}
|
|
|
</p>
|
|
|
</div>
|
|
|
</section>
|
|
|
))}
|
|
|
|
|
|
<button
|
|
|
type="button"
|
|
|
disabled={disabled}
|
|
|
onClick={() => setItems((rows) => [...rows, newItem()])}
|
|
|
className={`${quoteAddRowCls} h-11 w-full rounded-full`}
|
|
|
>
|
|
|
<Plus size={16} weight="bold" />
|
|
|
添加货物行
|
|
|
</button>
|
|
|
|
|
|
{/* 附加服务 */}
|
|
|
<section className="rounded-lg border border-border bg-surface p-4 shadow-card md:p-5">
|
|
|
<button
|
|
|
type="button"
|
|
|
className="mb-3 flex w-full items-center justify-between text-left"
|
|
|
onClick={() => setShowAdditional((v) => !v)}
|
|
|
>
|
|
|
<div className="flex items-center gap-2">
|
|
|
<QuoteSectionTitle>附加服务</QuoteSectionTitle>
|
|
|
<QuoteFieldTooltip
|
|
|
wide
|
|
|
position="below"
|
|
|
label="附加服务说明"
|
|
|
tip={<QuoteTipDefs items={FLOCK_ADDITIONAL_SERVICE_TIP_ITEMS} />}
|
|
|
/>
|
|
|
</div>
|
|
|
<CaretDown
|
|
|
size={16}
|
|
|
className={[
|
|
|
"text-text-secondary transition-transform",
|
|
|
showAdditional ? "rotate-180" : "",
|
|
|
].join(" ")}
|
|
|
/>
|
|
|
</button>
|
|
|
{showAdditional ? (
|
|
|
<>
|
|
|
<p className="mb-3 text-xs text-[#4B5563]">
|
|
|
已选 {servicesSelected} 项
|
|
|
</p>
|
|
|
<div className="flex flex-wrap gap-2">
|
|
|
{FLOCK_ADDITIONAL_SERVICES.map((s) => (
|
|
|
<ChipToggle
|
|
|
key={s.id}
|
|
|
disabled={disabled}
|
|
|
selected={additionalServices.includes(s.id)}
|
|
|
label={s.label}
|
|
|
onClick={() => toggleService(s.id)}
|
|
|
/>
|
|
|
))}
|
|
|
</div>
|
|
|
|
|
|
<div className="mt-6 border-t border-border pt-4">
|
|
|
<div className="mb-3 flex flex-wrap items-center gap-1 text-xs text-[#4B5563]">
|
|
|
允许使用的车型 · 已选 {vehiclesSelected} 项
|
|
|
<QuoteFieldTooltip
|
|
|
wide
|
|
|
position="below"
|
|
|
label="车型说明"
|
|
|
tip={<QuoteTipDefs items={FLOCK_VEHICLE_TIP_ITEMS} />}
|
|
|
/>
|
|
|
{errors.vehicles ? (
|
|
|
<span className="ml-2 text-[#EF4444]">{errors.vehicles}</span>
|
|
|
) : null}
|
|
|
</div>
|
|
|
<div className="flex flex-wrap gap-2">
|
|
|
{FLOCK_VEHICLE_TYPES.map((v) => (
|
|
|
<ChipToggle
|
|
|
key={v.id}
|
|
|
disabled={disabled}
|
|
|
selected={vehicleTypes.includes(v.id)}
|
|
|
label={v.label}
|
|
|
onClick={() => toggleVehicle(v.id)}
|
|
|
/>
|
|
|
))}
|
|
|
</div>
|
|
|
</div>
|
|
|
</>
|
|
|
) : null}
|
|
|
</section>
|
|
|
|
|
|
{/* 调度服务 */}
|
|
|
<section className="rounded-lg border border-border bg-surface p-4 shadow-card md:p-5">
|
|
|
<button
|
|
|
type="button"
|
|
|
className="mb-3 flex w-full items-center justify-between text-left"
|
|
|
onClick={() => setShowScheduling((v) => !v)}
|
|
|
>
|
|
|
<QuoteSectionTitle>调度服务</QuoteSectionTitle>
|
|
|
<CaretDown
|
|
|
size={16}
|
|
|
className={[
|
|
|
"text-text-secondary transition-transform",
|
|
|
showScheduling ? "rotate-180" : "",
|
|
|
].join(" ")}
|
|
|
/>
|
|
|
</button>
|
|
|
{showScheduling ? (
|
|
|
<div className="space-y-6">
|
|
|
<p className="text-xs text-text-secondary">
|
|
|
灰色选项在整票总重不超过 {FLOCK_LIMITS.schedulingWeightMinLb} lb
|
|
|
时不可用；整票总重超过 {FLOCK_LIMITS.schedulingWeightMinLb} lb 后启用。
|
|
|
{shipmentWeightLb > 0 ? (
|
|
|
<span className="ml-1 font-medium text-text-primary">
|
|
|
当前总重约 {shipmentWeightLb} lb
|
|
|
</span>
|
|
|
) : null}
|
|
|
</p>
|
|
|
<div>
|
|
|
<p className="mb-3 text-sm font-medium text-[#4B5563]">提货服务</p>
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
|
{FLOCK_PICKUP_SERVICES.map((s) => {
|
|
|
const locked = isFlockSchedulingOptionLocked(
|
|
|
shipmentWeightLb,
|
|
|
s.weightLocked,
|
|
|
);
|
|
|
return (
|
|
|
<label
|
|
|
key={s.id}
|
|
|
className={[
|
|
|
"flex min-h-12 items-start gap-2 text-sm",
|
|
|
locked
|
|
|
? "cursor-not-allowed text-text-disabled opacity-60"
|
|
|
: "text-text-primary",
|
|
|
].join(" ")}
|
|
|
>
|
|
|
<input
|
|
|
type="radio"
|
|
|
name={`${baseId}-pickup-svc`}
|
|
|
disabled={disabled || locked}
|
|
|
checked={pickupService === s.id}
|
|
|
onChange={() => {
|
|
|
if (!locked) setPickupService(s.id);
|
|
|
}}
|
|
|
className="mt-0.5"
|
|
|
/>
|
|
|
<span>
|
|
|
<span className="inline-flex items-center gap-1">
|
|
|
{s.label}
|
|
|
{!locked && s.hint ? (
|
|
|
<QuoteFieldTooltip tip={s.hint} />
|
|
|
) : null}
|
|
|
</span>
|
|
|
{locked ? (
|
|
|
<span className="mt-0.5 block text-xs text-text-disabled">
|
|
|
{schedulingLockedHint}
|
|
|
</span>
|
|
|
) : null}
|
|
|
{!locked && s.detail && pickupService === s.id ? (
|
|
|
<span className="mt-0.5 block text-xs text-text-secondary">
|
|
|
{s.detail}
|
|
|
</span>
|
|
|
) : null}
|
|
|
</span>
|
|
|
</label>
|
|
|
);
|
|
|
})}
|
|
|
</div>
|
|
|
{pickupService === "during_window" &&
|
|
|
!isFlockSchedulingOptionLocked(shipmentWeightLb, true) ? (
|
|
|
<div className="mt-4 space-y-3 rounded-md border border-border bg-[#FAFAFA] p-3">
|
|
|
<p className="text-sm font-medium text-text-primary">
|
|
|
提货时段是什么时候？
|
|
|
</p>
|
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
|
<OutlinedField
|
|
|
label="开始时间"
|
|
|
required
|
|
|
error={errors.pickupWindowStart}
|
|
|
>
|
|
|
<select
|
|
|
disabled={disabled}
|
|
|
value={pickupWindowStartTime}
|
|
|
onChange={(e) =>
|
|
|
setPickupWindowStartTime(e.target.value)
|
|
|
}
|
|
|
className={
|
|
|
errors.pickupWindowStart ? inputErrCls : inputCls
|
|
|
}
|
|
|
>
|
|
|
{FLOCK_SCHEDULING_TIME_OPTIONS.map((t) => (
|
|
|
<option key={`pw-s-${t}`} value={t}>
|
|
|
{t}
|
|
|
</option>
|
|
|
))}
|
|
|
</select>
|
|
|
</OutlinedField>
|
|
|
<OutlinedField
|
|
|
label="结束时间"
|
|
|
required
|
|
|
error={errors.pickupWindowEnd}
|
|
|
>
|
|
|
<select
|
|
|
disabled={disabled}
|
|
|
value={pickupWindowEndTime}
|
|
|
onChange={(e) => setPickupWindowEndTime(e.target.value)}
|
|
|
className={
|
|
|
errors.pickupWindowEnd ? inputErrCls : inputCls
|
|
|
}
|
|
|
>
|
|
|
{FLOCK_SCHEDULING_TIME_OPTIONS.map((t) => (
|
|
|
<option key={`pw-e-${t}`} value={t}>
|
|
|
{t}
|
|
|
</option>
|
|
|
))}
|
|
|
</select>
|
|
|
</OutlinedField>
|
|
|
</div>
|
|
|
</div>
|
|
|
) : null}
|
|
|
{pickupService === "have_appointment" &&
|
|
|
!isFlockSchedulingOptionLocked(shipmentWeightLb, true) ? (
|
|
|
<div className="mt-4 space-y-3 rounded-md border border-border bg-[#FAFAFA] p-3">
|
|
|
<p className="text-sm font-medium text-text-primary">
|
|
|
预设提货预约时间是？
|
|
|
</p>
|
|
|
<OutlinedField
|
|
|
label="时间"
|
|
|
required
|
|
|
error={errors.pickupApptTime}
|
|
|
>
|
|
|
<select
|
|
|
disabled={disabled}
|
|
|
value={pickupAppointmentTime}
|
|
|
onChange={(e) =>
|
|
|
setPickupAppointmentTime(e.target.value)
|
|
|
}
|
|
|
className={errors.pickupApptTime ? inputErrCls : inputCls}
|
|
|
>
|
|
|
{FLOCK_SCHEDULING_TIME_OPTIONS.map((t) => (
|
|
|
<option key={`pa-${t}`} value={t}>
|
|
|
{t}
|
|
|
</option>
|
|
|
))}
|
|
|
</select>
|
|
|
</OutlinedField>
|
|
|
</div>
|
|
|
) : null}
|
|
|
{(() => {
|
|
|
const callBeforeLocked = isFlockSchedulingOptionLocked(
|
|
|
shipmentWeightLb,
|
|
|
FLOCK_PICKUP_CALL_BEFORE_WEIGHT_LOCKED,
|
|
|
);
|
|
|
return (
|
|
|
<label
|
|
|
className={[
|
|
|
"mt-3 flex min-h-12 items-start gap-2 text-sm",
|
|
|
callBeforeLocked || disabled
|
|
|
? "cursor-not-allowed text-text-disabled opacity-60"
|
|
|
: "items-center text-text-primary",
|
|
|
].join(" ")}
|
|
|
>
|
|
|
<input
|
|
|
type="checkbox"
|
|
|
className="mt-0.5"
|
|
|
disabled={disabled || callBeforeLocked}
|
|
|
checked={callBeforeLocked ? false : callBeforePickup}
|
|
|
onChange={(e) => {
|
|
|
if (!callBeforeLocked) {
|
|
|
setCallBeforePickup(e.target.checked);
|
|
|
}
|
|
|
}}
|
|
|
/>
|
|
|
<span>
|
|
|
<span className="inline-flex items-center gap-1">
|
|
|
承运商请在提货前致电
|
|
|
{!callBeforeLocked ? (
|
|
|
<QuoteFieldTooltip tip="勾选后，承运商须在提货前 1–2 小时联系提货人" />
|
|
|
) : null}
|
|
|
</span>
|
|
|
{callBeforeLocked ? (
|
|
|
<span className="mt-0.5 block text-xs text-text-disabled">
|
|
|
{schedulingLockedHint}
|
|
|
</span>
|
|
|
) : null}
|
|
|
</span>
|
|
|
</label>
|
|
|
);
|
|
|
})()}
|
|
|
</div>
|
|
|
|
|
|
<div className="border-t border-border pt-4">
|
|
|
<p className="mb-3 text-sm font-medium text-[#4B5563]">派送服务</p>
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
|
{FLOCK_DELIVERY_SERVICES.map((s) => {
|
|
|
const locked = isFlockSchedulingOptionLocked(
|
|
|
shipmentWeightLb,
|
|
|
s.weightLocked,
|
|
|
);
|
|
|
return (
|
|
|
<label
|
|
|
key={s.id}
|
|
|
className={[
|
|
|
"flex min-h-12 items-start gap-2 text-sm",
|
|
|
locked
|
|
|
? "cursor-not-allowed text-text-disabled opacity-60"
|
|
|
: "text-text-primary",
|
|
|
].join(" ")}
|
|
|
>
|
|
|
<input
|
|
|
type="radio"
|
|
|
name={`${baseId}-delivery-svc`}
|
|
|
disabled={disabled || locked}
|
|
|
checked={deliveryService === s.id}
|
|
|
onChange={() => {
|
|
|
if (!locked) setDeliveryService(s.id);
|
|
|
}}
|
|
|
className="mt-0.5"
|
|
|
/>
|
|
|
<span>
|
|
|
<span className="inline-flex items-center gap-1">
|
|
|
{s.label}
|
|
|
{!locked && s.hint ? (
|
|
|
<QuoteFieldTooltip tip={s.hint} />
|
|
|
) : null}
|
|
|
</span>
|
|
|
{locked ? (
|
|
|
<span className="mt-0.5 block text-xs text-text-disabled">
|
|
|
{schedulingLockedHint}
|
|
|
</span>
|
|
|
) : null}
|
|
|
{!locked && s.detail && deliveryService === s.id ? (
|
|
|
<span className="mt-0.5 block text-xs text-text-secondary">
|
|
|
{s.detail}
|
|
|
</span>
|
|
|
) : null}
|
|
|
</span>
|
|
|
</label>
|
|
|
);
|
|
|
})}
|
|
|
</div>
|
|
|
{deliveryService === "during_window" &&
|
|
|
!isFlockSchedulingOptionLocked(shipmentWeightLb, true) ? (
|
|
|
<div className="mt-4 space-y-3 rounded-md border border-border bg-[#FAFAFA] p-3">
|
|
|
<p className="text-sm font-medium text-text-primary">
|
|
|
派送时段是什么时候？
|
|
|
</p>
|
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
|
<OutlinedField
|
|
|
label="开始时间"
|
|
|
required
|
|
|
error={errors.deliveryWindowStart}
|
|
|
>
|
|
|
<select
|
|
|
disabled={disabled}
|
|
|
value={deliveryWindowStartTime}
|
|
|
onChange={(e) =>
|
|
|
setDeliveryWindowStartTime(e.target.value)
|
|
|
}
|
|
|
className={
|
|
|
errors.deliveryWindowStart ? inputErrCls : inputCls
|
|
|
}
|
|
|
>
|
|
|
{FLOCK_SCHEDULING_TIME_OPTIONS.map((t) => (
|
|
|
<option key={`dw-s-${t}`} value={t}>
|
|
|
{t}
|
|
|
</option>
|
|
|
))}
|
|
|
</select>
|
|
|
</OutlinedField>
|
|
|
<OutlinedField
|
|
|
label="结束时间"
|
|
|
required
|
|
|
error={errors.deliveryWindowEnd}
|
|
|
>
|
|
|
<select
|
|
|
disabled={disabled}
|
|
|
value={deliveryWindowEndTime}
|
|
|
onChange={(e) =>
|
|
|
setDeliveryWindowEndTime(e.target.value)
|
|
|
}
|
|
|
className={
|
|
|
errors.deliveryWindowEnd ? inputErrCls : inputCls
|
|
|
}
|
|
|
>
|
|
|
{FLOCK_SCHEDULING_TIME_OPTIONS.map((t) => (
|
|
|
<option key={`dw-e-${t}`} value={t}>
|
|
|
{t}
|
|
|
</option>
|
|
|
))}
|
|
|
</select>
|
|
|
</OutlinedField>
|
|
|
</div>
|
|
|
<OutlinedField
|
|
|
label="日期"
|
|
|
required
|
|
|
error={errors.deliveryWindowDate}
|
|
|
>
|
|
|
<input
|
|
|
type="date"
|
|
|
disabled={disabled}
|
|
|
value={deliveryWindowDate}
|
|
|
min={pickupDate || defaultFlockPickupDateIso()}
|
|
|
onChange={(e) => setDeliveryWindowDate(e.target.value)}
|
|
|
className={
|
|
|
errors.deliveryWindowDate ? inputErrCls : inputCls
|
|
|
}
|
|
|
/>
|
|
|
</OutlinedField>
|
|
|
</div>
|
|
|
) : null}
|
|
|
{deliveryService === "have_appointment" &&
|
|
|
!isFlockSchedulingOptionLocked(shipmentWeightLb, true) ? (
|
|
|
<div className="mt-4 space-y-3 rounded-md border border-border bg-[#FAFAFA] p-3">
|
|
|
<p className="text-sm font-medium text-text-primary">
|
|
|
预设派送预约时间是？
|
|
|
</p>
|
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
|
<OutlinedField
|
|
|
label="时间"
|
|
|
required
|
|
|
error={errors.deliveryApptTime}
|
|
|
>
|
|
|
<select
|
|
|
disabled={disabled}
|
|
|
value={deliveryAppointmentTime}
|
|
|
onChange={(e) =>
|
|
|
setDeliveryAppointmentTime(e.target.value)
|
|
|
}
|
|
|
className={
|
|
|
errors.deliveryApptTime ? inputErrCls : inputCls
|
|
|
}
|
|
|
>
|
|
|
{FLOCK_SCHEDULING_TIME_OPTIONS.map((t) => (
|
|
|
<option key={`da-t-${t}`} value={t}>
|
|
|
{t}
|
|
|
</option>
|
|
|
))}
|
|
|
</select>
|
|
|
</OutlinedField>
|
|
|
<OutlinedField
|
|
|
label="日期"
|
|
|
required
|
|
|
error={errors.deliveryApptDate}
|
|
|
>
|
|
|
<input
|
|
|
type="date"
|
|
|
disabled={disabled}
|
|
|
value={deliveryAppointmentDate}
|
|
|
min={pickupDate || defaultFlockPickupDateIso()}
|
|
|
onChange={(e) =>
|
|
|
setDeliveryAppointmentDate(e.target.value)
|
|
|
}
|
|
|
className={
|
|
|
errors.deliveryApptDate ? inputErrCls : inputCls
|
|
|
}
|
|
|
/>
|
|
|
</OutlinedField>
|
|
|
</div>
|
|
|
</div>
|
|
|
) : null}
|
|
|
{deliveryService === "must_arrive_by" &&
|
|
|
!isFlockSchedulingOptionLocked(shipmentWeightLb, true) ? (
|
|
|
<div className="mt-4 space-y-3 rounded-md border border-border bg-[#FAFAFA] p-3">
|
|
|
<p className="text-sm font-medium text-text-primary">
|
|
|
货物需要在哪一天之前送达？
|
|
|
</p>
|
|
|
<OutlinedField
|
|
|
label="日期"
|
|
|
required
|
|
|
error={errors.deliveryMustArrive}
|
|
|
>
|
|
|
<input
|
|
|
type="date"
|
|
|
disabled={disabled}
|
|
|
value={deliveryMustArriveByDate}
|
|
|
min={pickupDate || defaultFlockPickupDateIso()}
|
|
|
onChange={(e) =>
|
|
|
setDeliveryMustArriveByDate(e.target.value)
|
|
|
}
|
|
|
className={
|
|
|
errors.deliveryMustArrive ? inputErrCls : inputCls
|
|
|
}
|
|
|
/>
|
|
|
</OutlinedField>
|
|
|
<label className="flex min-h-12 items-start gap-2 text-sm text-text-primary">
|
|
|
<input
|
|
|
type="checkbox"
|
|
|
className="mt-0.5"
|
|
|
disabled={disabled}
|
|
|
checked={callForDeliveryAppointment}
|
|
|
onChange={(e) =>
|
|
|
setCallForDeliveryAppointment(e.target.checked)
|
|
|
}
|
|
|
/>
|
|
|
<span>
|
|
|
<span>预约派送致电</span>
|
|
|
<span className="mt-0.5 block text-xs text-text-secondary">
|
|
|
{FLOCK_CALL_FOR_DELIVERY_APPOINTMENT_HINT}
|
|
|
</span>
|
|
|
</span>
|
|
|
</label>
|
|
|
</div>
|
|
|
) : null}
|
|
|
<label className="mt-3 flex h-12 items-center gap-2 text-sm text-text-primary">
|
|
|
<input
|
|
|
type="checkbox"
|
|
|
disabled={disabled}
|
|
|
checked={callBeforeDelivery}
|
|
|
onChange={(e) => setCallBeforeDelivery(e.target.checked)}
|
|
|
/>
|
|
|
<span className="inline-flex items-center gap-1">
|
|
|
承运商请在派送前致电
|
|
|
<QuoteFieldTooltip tip="勾选后，承运商须在派送前 1–2 小时联系收货人" />
|
|
|
</span>
|
|
|
</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
) : null}
|
|
|
</section>
|
|
|
|
|
|
{/* 额外保险 */}
|
|
|
<section className="rounded-lg border border-border bg-surface p-4 shadow-card md:p-5">
|
|
|
<button
|
|
|
type="button"
|
|
|
className="mb-3 flex w-full items-center justify-between text-left"
|
|
|
onClick={() => setShowInsurance((v) => !v)}
|
|
|
>
|
|
|
<QuoteSectionTitle>额外货运险</QuoteSectionTitle>
|
|
|
<CaretDown
|
|
|
size={16}
|
|
|
className={[
|
|
|
"text-text-secondary transition-transform",
|
|
|
showInsurance ? "rotate-180" : "",
|
|
|
].join(" ")}
|
|
|
/>
|
|
|
</button>
|
|
|
{showInsurance ? (
|
|
|
<div className="space-y-3">
|
|
|
<label className="flex h-12 items-center gap-2 text-sm text-text-primary">
|
|
|
<input
|
|
|
type="radio"
|
|
|
name={`${baseId}-insurance`}
|
|
|
disabled={disabled}
|
|
|
checked={additionalInsurance}
|
|
|
onChange={() => setAdditionalInsurance(true)}
|
|
|
/>
|
|
|
<span className="inline-flex items-center gap-1">
|
|
|
需要额外货运险
|
|
|
<QuoteFieldTooltip tip={FLOCK_INSURANCE_YES_TIP} wide />
|
|
|
</span>
|
|
|
</label>
|
|
|
<label className="flex h-12 items-center gap-2 text-sm text-text-primary">
|
|
|
<input
|
|
|
type="radio"
|
|
|
name={`${baseId}-insurance`}
|
|
|
disabled={disabled}
|
|
|
checked={!additionalInsurance}
|
|
|
onChange={() => setAdditionalInsurance(false)}
|
|
|
/>
|
|
|
<span className="inline-flex items-center gap-1">
|
|
|
不投保额外货运险
|
|
|
<QuoteFieldTooltip tip={FLOCK_INSURANCE_NO_TIP} wide />
|
|
|
</span>
|
|
|
</label>
|
|
|
{!additionalInsurance ? (
|
|
|
<p className="text-xs text-text-secondary">
|
|
|
{FLOCK_INSURANCE_WAIVE_HINT}
|
|
|
</p>
|
|
|
) : null}
|
|
|
<p className="text-xs text-text-secondary">{FLOCK_INSURANCE_FOOTER}</p>
|
|
|
</div>
|
|
|
) : null}
|
|
|
</section>
|
|
|
|
|
|
<button
|
|
|
type="submit"
|
|
|
disabled={!canSubmit}
|
|
|
data-testid="flock-logged-in-generate-quote"
|
|
|
className={`${quoteCtaCls} h-12 w-full rounded-full disabled:bg-border disabled:text-text-disabled`}
|
|
|
>
|
|
|
{submitLocked ? "提交中…" : "生成我的报价"}
|
|
|
</button>
|
|
|
</form>
|
|
|
);
|
|
|
}
|
