Initial commit

components/shipment-quote.tsx

@@ -0,0 +1,89 @@
+export type ShipmentQuoteProps = {
+  id?: string;
+  label?: string;
+  physicalForces?: number;
+  quote: {
+    cost: number;
+    normalCost: number;
+    ownPayment: number;
+    pledgedPayment: number;
+  } | null;
+  funding: {
+    ownSpice: number;
+    pledgedSpice: number;
+  };
+  unavailableReasons?: readonly string[];
+};
+
+/** Displays only caller-supplied prices and private funding already authorized for
+ * this viewer. The caller validates the selection and controls action availability.
+ */
+export function ShipmentQuote({
+  id,
+  label = 'Reserve shipment',
+  physicalForces,
+  quote,
+  funding,
+  unavailableReasons = [],
+}: ShipmentQuoteProps) {
+  return (
+    <section
+      id={id}
+      className="notice shipment-quote flex min-w-0 flex-col gap-3 text-sm leading-6"
+      aria-label={`${label} cost and funding`}
+    >
+      <div>
+        {label !== 'Reserve shipment' && (
+          <p className="m-0 font-semibold">{label}</p>
+        )}
+        <p className="m-0 text-base font-semibold text-[#efd9a8]">
+          {quote ? `Shipment cost: ${quote.cost} spice` : 'Shipment cost'}
+        </p>
+        {quote ? (
+          quote.normalCost !== quote.cost && (
+            <p className="m-0 text-sm leading-6">
+              Normal cost: {quote.normalCost} spice. The applicable rate is
+              included in your shipment cost.
+            </p>
+          )
+        ) : (
+          <p className="m-0 text-sm leading-6">
+            Choose valid forces and funding to see the payment breakdown.
+          </p>
+        )}
+      </div>
+      <dl className="m-0 grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-x-4 gap-y-1">
+        {physicalForces !== undefined && (
+          <>
+            <dt>Physical forces selected</dt>
+            <dd className="m-0 text-right tabular-nums">{physicalForces}</dd>
+          </>
+        )}
+        <dt>Your available spice</dt>
+        <dd className="m-0 text-right tabular-nums">{funding.ownSpice}</dd>
+        <dt>Available ally pledge</dt>
+        <dd className="m-0 text-right tabular-nums">{funding.pledgedSpice}</dd>
+        {quote && (
+          <>
+            <dt>Your payment</dt>
+            <dd className="m-0 text-right tabular-nums">{quote.ownPayment}</dd>
+            <dt>Ally pledge used</dt>
+            <dd className="m-0 text-right tabular-nums">
+              {quote.pledgedPayment}
+            </dd>
+          </>
+        )}
+      </dl>
+      {unavailableReasons.length > 0 && (
+        <div>
+          <p className="m-0 font-semibold">Shipment unavailable</p>
+          <ul className="m-0 list-disc space-y-1 pl-5">
+            {unavailableReasons.map((reason, index) => (
+              <li key={index}>{reason}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </section>
+  );
+}