chajia/app/e2e-fixtures/flock-hold/page.tsx

/**
 * E2E fixture：Flock hold 弹窗 + 右栏选档门禁（不依赖官网 RPA）
 */
"use client";

import { useMemo, useState } from "react";
import { FlockQuoteHoldPrompt } from "@/components/flock/flock-quote-hold-prompt";
import { FlockLoggedInQuoteSidebar } from "@/components/flock/flock-logged-in-quote-sidebar";
import type {
  FlockCheckoutTier,
  FlockFlexibilityKey,
} from "@/lib/flock/flock-checkout-selection";
import type { FlockDisplayLine } from "@/modules/flock/quote-storage";

const LINES: FlockDisplayLine[] = [
  {
    tier: "flock_direct",
    serviceLevel: "guaranteed",
    rateOption: "fastest",
    carrier: "Flock Freight",
    label: "FlockDirect®",
    totalUsd: 1221,
    transitDays: "3",
    transitDescription: "3 天（含周末）",
    final_total_usd: 1221,
    markup_amount: 0,
  },
  {
    tier: "standard",
    serviceLevel: "standard",
    rateOption: "lowest",
    carrier: "Flock Freight",
    label: "Standard",
    totalUsd: 1011,
    transitDays: "2-5",
    transitDescription: "2–5 个工作日（预估）",
    final_total_usd: 1011,
    markup_amount: 0,
  },
];

const FLEX = {
  flock_direct: [
    {
      key: "2_day" as const,
      label: "2-day flexibility",
      rateUsd: 1221,
      pickupWindow: "Jul 30 – Aug 3",
      deliverBy: "Aug 6",
    },
    {
      key: "1_day" as const,
      label: "1-day flexibility",
      rateUsd: 1250,
      pickupWindow: "Jul 30 – 31",
      deliverBy: "Aug 3",
    },
    {
      key: "none" as const,
      label: "No flexibility",
      rateUsd: 1292,
      pickupWindow: "Jul 30",
      deliverBy: "Aug 3",
    },
  ],
  standard: [
    {
      key: "2_day" as const,
      label: "2-day flexibility",
      rateUsd: 1011,
      pickupWindow: "Jul 30 – Aug 3",
      deliverBy: "Aug 8",
    },
    {
      key: "1_day" as const,
      label: "1-day flexibility",
      rateUsd: 1080,
      pickupWindow: "Jul 30 – 31",
      deliverBy: "Aug 5",
    },
    {
      key: "none" as const,
      label: "No flexibility",
      rateUsd: 1150,
      pickupWindow: "Jul 30",
      deliverBy: "Aug 4",
    },
  ],
};

export default function FlockHoldE2eFixturePage() {
  const now = useMemo(() => Date.now(), []);
  const [holdOpen, setHoldOpen] = useState(true);
  const [holdAccepted, setHoldAccepted] = useState(false);
  const [selectedTier, setSelectedTier] = useState<FlockCheckoutTier | null>(
    null,
  );
  const [selectedFlexibility, setSelectedFlexibility] =
    useState<FlockFlexibilityKey | null>(null);
  const [checkoutMessage, setCheckoutMessage] = useState<string | null>(null);
  const [lastAction, setLastAction] = useState<string>("idle");

  return (
    <main className="mx-auto max-w-5xl space-y-4 p-6" data-testid="flock-hold-fixture">
      <h1 className="text-xl font-semibold">Flock Hold E2E Fixture</h1>
      <p data-testid="last-action">lastAction={lastAction}</p>
      <p data-testid="hold-accepted">holdAccepted={String(holdAccepted)}</p>

      <FlockLoggedInQuoteSidebar
        lines={LINES}
        reference="JKR-RH3X"
        flexibilityByTier={FLEX}
        selectedTier={selectedTier}
        selectedFlexibility={selectedFlexibility}
        detailsUnlocked={holdAccepted}
        checkoutMessage={checkoutMessage}
        onSelectTier={(t) => {
          setSelectedTier(t);
          setSelectedFlexibility(null);
          setLastAction(`select-tier:${t}`);
        }}
        onSelectFlexibility={(k) => {
          setSelectedFlexibility(k);
          setLastAction(`select-flex:${k}`);
        }}
        onSelectCarrier={(name) => {
          setSelectedFlexibility(null);
          setLastAction(`select-carrier:${name}`);
        }}
        onCheckout={() => {
          if (!holdAccepted) {
            setCheckoutMessage(
              "请先确认「继续填写」，再点击「查看报价选项」选择灵活价",
            );
            setLastAction("checkout-blocked-hold");
            return;
          }
          if (!selectedTier || !selectedFlexibility) {
            setCheckoutMessage("请先选择服务档与灵活性报价");
            setLastAction("checkout-blocked-selection");
            return;
          }
          setCheckoutMessage(null);
          setLastAction("checkout-ok");
        }}
      />

      {holdOpen ? (
        <FlockQuoteHoldPrompt
          decisionDeadlineMs={now + 60_000}
          totalDeadlineMs={now + 300_000}
          onContinue={() => {
            setHoldAccepted(true);
            setHoldOpen(false);
            setLastAction("hold-continue");
          }}
          onDecline={() => {
            setHoldAccepted(false);
            setHoldOpen(false);
            setLastAction("hold-decline");
          }}
        />
      ) : null}
    </main>
  );
}