"use client"; import { useActionState, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useFormStatus } from "react-dom"; import { Trophy, TrendingDown } from "lucide-react"; import type { ApiBidPricing, ApiLeaderboardMeta, ApiLeaderboardRow } from "@/lib/api/types"; import Countdown from "@/components/rfq/Countdown"; import { fetchLeaderboard, submitRate, type RespondState } from "./actions"; /** * Lives here rather than in `actions.ts`: a "use server" module may only export * async functions, so a shared constant would break the build. */ const INITIAL_STATE: RespondState = { message: null, errors: {} }; /** How often the board refreshes while the auction runs, in ms. */ const POLL_MS = 6000; const inr = new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR", maximumFractionDigits: 2, }); function money(value: number | null | undefined): string { if (value === null || value === undefined || !Number.isFinite(value)) return "—"; return inr.format(value); } /** Used when the API sent no terms: the base price is then the Ex price. */ const NO_TERMS: ApiBidPricing = { listed_base_price: null, gst: 0, charges: [], charges_total: 0, sizes: [{ index: null, label: "All sizes", quantity: 1, gauge_diff: 0 }], }; /** * The legacy seller quotation's estimate (biznie-app `SellerQuotationDetail` * and the v1 resource behind it), which is also how the API stores the bid * (BidPriceCalculator), so the preview is the number that gets submitted: * per size, Ex = (basic + gauge diff + charges) + GST rounded to the rupee, * Ex × Qty for the line, and the lines summed to the Total Ex Price. */ function priceBid(terms: ApiBidPricing, base: number) { const sizes = terms.sizes.map((size) => { const taxable = base + size.gauge_diff + terms.charges_total; const tax = Math.round((taxable * terms.gst) / 100); const ex = taxable + tax; return { ...size, taxable, tax, ex, line: ex * size.quantity }; }); const quantity = sizes.reduce((sum, s) => sum + s.quantity, 0); const total = sizes.reduce((sum, s) => sum + s.line, 0); return { sizes, quantity, total }; } type Props = { rfqId: number; unit: string; /** What is added to the base price; null prices the base price as is. */ pricing: ApiBidPricing | null; /** The base price this seller last bid, when they bid one. */ quotedBasePrice: number | null; exWorksCity: string | null; /** The seller's current Ex price, if they have already bid. */ currentExWorks: number | null; /** The legacy "Order Details". */ dispatchWithinDays: number | null; creditDays: number | null; /** Biznie's commission, shown when it is included in the seller's price. */ commission: number | null; commissionType: string | null; isLive: boolean; endsAt: string | null; secondsLeft: number; /** SSR snapshot so the board paints populated. */ initialRows: ApiLeaderboardRow[]; initialMeta: ApiLeaderboardMeta | null; }; /** * Panels 3 and 4 of the seller flow: submit a rate, then watch the board. * Laid out like the legacy seller quotation the sellers know: Basic Price in, * the Estimate Price table and Order Details worked out from it, and the other * sellers' basic prices. * * They are one component because they share the auction clock and the same * refresh — splitting them would mean two pollers disagreeing about whether * bidding is still open. */ export default function BidPanel({ rfqId, unit, pricing, quotedBasePrice, exWorksCity, currentExWorks, dispatchWithinDays, creditDays, commission, commissionType, isLive, endsAt, secondsLeft, initialRows, initialMeta, }: Props) { const [state, formAction] = useActionState(submitRate, INITIAL_STATE); const [rows, setRows] = useState(initialRows); const [meta, setMeta] = useState(initialMeta); const terms = pricing ?? NO_TERMS; // Their last bid, else their listing's price — the legacy form pre-filled it // too ("Please enter or change current price"). const startingBase = quotedBasePrice ?? terms.listed_base_price; const [draft, setDraft] = useState(startingBase !== null ? String(startingBase) : ""); const live = meta?.is_live ?? isLive; // Read inside the interval so the callback identity stays stable and the // timer is not torn down and rebuilt every tick. const liveRef = useRef(live); liveRef.current = live; const refresh = useCallback(async () => { const next = await fetchLeaderboard(rfqId); if (next) { setRows(next.rows); setMeta(next.meta); } }, [rfqId]); useEffect(() => { if (!isLive) return; const timer = setInterval(() => { if (!liveRef.current) { clearInterval(timer); return; } void refresh(); }, POLL_MS); return () => clearInterval(timer); }, [isLive, refresh]); // A successful submit should show the seller their new position immediately, // not on the next scheduled poll. useEffect(() => { if (state.message && !Object.keys(state.errors).length) void refresh(); }, [state, refresh]); const handleExpire = useCallback(() => { void refresh(); }, [refresh]); // The estimate tracks what the seller is typing, so they see what they are // bidding before committing to it. const typed = Number(draft); const base = draft.trim() !== "" && Number.isFinite(typed) && typed > 0 ? typed : null; const estimate = useMemo(() => (base !== null ? priceBid(terms, base) : null), [terms, base]); const quantity = terms.sizes.reduce((sum, s) => sum + s.quantity, 0); const myRank = meta?.my_rank ?? null; const myRow = rows.find((row) => row.is_me); return ( <> {/* 3. Submit Your Rate -------------------------------------------- */}

3. {currentExWorks !== null ? "Improve Your Rate" : "Submit Your Rate"}

{live && ( Time Left:{" "} )}
₹ setDraft(e.target.value)} disabled={!live} placeholder="Enter current price" aria-describedby="base-price-hint" className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none disabled:bg-gray-50" />
{state.errors.base_price ? (

{state.errors.base_price[0]}

) : (

Please enter or change current price. {quotedBasePrice === null && terms.listed_base_price !== null && ( Pre-filled from your listing. )}

)}