@ticketboothapp/booking 1.2.167 → 1.2.168

package/src/components/booking/AdminChangePricingPanel.tsx

@@ -1,24 +1,29 @@
-import type { ReactNode } from 'react';
+import { useState } from "react";
 import type {
   ProviderDashboardChangePricingUi,
   ProviderDashboardPricingLine,
-} from './booking-flow-ui';
+} from "./booking-flow-ui";
+import type { AdminAdjustmentComponentOption } from "./admin-adjustment-components";
+import {
+  adminAdjustmentTaxBehaviorOptions,
+  normalizeAdminAdjustmentScopeForSign,
+  normalizeAdminAdjustmentTaxBehavior,
+} from "./admin-adjustment-tax-behavior";
+import type { AdminCustomReceiptLine } from "./useAdminCustomReceiptLines";
 
-export type AdminCustomReceiptLine = {
-  id: string;
-  label: string;
-  amountInput: string;
-  amountSign: 1 | -1;
-  calculation: 'FIXED_AMOUNT' | 'PERCENTAGE';
-  scope: 'POSITIVE_AMENDMENT_VALUE' | 'CURRENT_ACTIVE_TICKETS' | 'CURRENT_ACTIVE_BOOKING';
-  taxBehavior: 'NON_TAXABLE' | 'TAXABLE' | 'PRE_TAX_DISCOUNT' | 'POST_TAX_DISCOUNT';
-  reasonCode: string;
-};
+export type { AdminCustomReceiptLine } from "./useAdminCustomReceiptLines";
 
 type AdminCustomReceiptLinePatch = Partial<
   Pick<
     AdminCustomReceiptLine,
-    'label' | 'amountInput' | 'amountSign' | 'calculation' | 'scope' | 'taxBehavior' | 'reasonCode'
+    | "label"
+    | "amountInput"
+    | "amountSign"
+    | "calculation"
+    | "scope"
+    | "selectedComponentIds"
+    | "taxBehavior"
+    | "reasonCode"
   >
 >;
 
@@ -26,31 +31,34 @@ export interface AdminChangePricingMessagesProps {
   showProviderPricingInlineEditor: boolean;
   providerPricingUi?: ProviderDashboardChangePricingUi;
   providerQuotedLines: ProviderDashboardPricingLine[];
-  debugPanel: ReactNode;
 }
 
 export function AdminChangePricingMessages({
   showProviderPricingInlineEditor,
   providerPricingUi,
   providerQuotedLines,
-  debugPanel,
 }: AdminChangePricingMessagesProps) {
   return (
     <>
       {showProviderPricingInlineEditor && providerPricingUi?.error ? (
-        <div className="mt-2 text-sm text-red-700">{providerPricingUi.error}</div>
+        <div className="mt-2 text-sm text-red-700">
+          {providerPricingUi.error}
+        </div>
       ) : null}
       {showProviderPricingInlineEditor &&
       providerPricingUi?.loading &&
       providerQuotedLines.length === 0 ? (
-        <div className="mt-2 text-sm text-stone-500">Loading price lines...</div>
+        <div className="mt-2 text-sm text-stone-500">
+          Loading price lines...
+        </div>
       ) : null}
       {showProviderPricingInlineEditor &&
       providerPricingUi?.helperText &&
       !providerPricingUi.error ? (
-        <div className="mt-2 text-xs text-stone-500">{providerPricingUi.helperText}</div>
+        <div className="mt-2 text-xs text-stone-500">
+          {providerPricingUi.helperText}
+        </div>
       ) : null}
-      {debugPanel}
     </>
   );
 }
@@ -61,16 +69,38 @@ export interface AdminChangePricingAdjustmentsProps {
   providerPricingUi?: ProviderDashboardChangePricingUi;
   showAdminCustomLineEditor: boolean;
   adminCustomReceiptLines: AdminCustomReceiptLine[];
-  onAddAdminCustomReceiptLine: () => void;
-  onUpdateAdminCustomReceiptLine: (id: string, patch: AdminCustomReceiptLinePatch) => void;
+  hasPendingAdminCustomReceiptLineChanges: boolean;
+  pendingAdminCustomReceiptLineIds: string[];
+  adjustmentComponentOptions: AdminAdjustmentComponentOption[];
+  onAddAdminCustomReceiptLine: () => string;
+  onUpdateAdminCustomReceiptLine: (
+    id: string,
+    patch: AdminCustomReceiptLinePatch,
+  ) => void;
   onRemoveAdminCustomReceiptLine: (id: string) => void;
+  onApplyAdminCustomReceiptLines: () => void;
 }
 
 function normalizeAmountInput(value: string): string {
-  const digitsAndDots = value.replace(/[^0-9.]/g, '');
-  const parts = digitsAndDots.split('.');
+  const digitsAndDots = value.replace(/[^0-9.]/g, "");
+  const parts = digitsAndDots.split(".");
   if (parts.length <= 1) return digitsAndDots;
-  return `${parts[0]}.${parts.slice(1).join('').replace(/\./g, '')}`;
+  return `${parts[0]}.${parts.slice(1).join("").replace(/\./g, "")}`;
+}
+
+function adminCustomLineScopeLabel(
+  scope: AdminCustomReceiptLine["scope"],
+): string {
+  switch (scope) {
+    case "CURRENT_ACTIVE_TICKETS":
+      return "All tickets";
+    case "CURRENT_ACTIVE_BOOKING":
+      return "Whole booking";
+    case "SELECTED_COMPONENTS":
+      return "Choose specific items";
+    default:
+      return "Added by this change";
+  }
 }
 
 export function AdminChangePricingAdjustments({
@@ -79,13 +109,33 @@ export function AdminChangePricingAdjustments({
   providerPricingUi,
   showAdminCustomLineEditor,
   adminCustomReceiptLines,
+  hasPendingAdminCustomReceiptLineChanges,
+  pendingAdminCustomReceiptLineIds,
+  adjustmentComponentOptions,
   onAddAdminCustomReceiptLine,
   onUpdateAdminCustomReceiptLine,
   onRemoveAdminCustomReceiptLine,
+  onApplyAdminCustomReceiptLines,
 }: AdminChangePricingAdjustmentsProps) {
-  if (!showChangeFlowManualPriceLines && !showAdminCustomLineEditor) return null;
+  const [
+    expandedAdminCustomReceiptLineIds,
+    setExpandedAdminCustomReceiptLineIds,
+  ] = useState<string[]>([]);
+  if (!showChangeFlowManualPriceLines && !showAdminCustomLineEditor)
+    return null;
 
   const providerAdjustments = providerPricingUi?.additionalAdjustments ?? [];
+  const hasIncompleteAdminCustomReceiptLine = adminCustomReceiptLines.some(
+    (line) => {
+      const amount = Number(line.amountInput.trim());
+      return (
+        !Number.isFinite(amount) ||
+        amount <= 0 ||
+        (line.scope === "SELECTED_COMPONENTS" &&
+          line.selectedComponentIds.length === 0)
+      );
+    },
+  );
 
   return (
     <>
@@ -94,12 +144,17 @@ export function AdminChangePricingAdjustments({
       providerAdjustments.length > 0 ? (
         <div className="space-y-1">
           {providerAdjustments.map((adj) => (
-            <div key={adj.id} className="flex items-center justify-between gap-2 text-sm">
+            <div
+              key={adj.id}
+              className="flex items-center justify-between gap-2 text-sm"
+            >
               <div className="flex min-w-0 items-center gap-1">
                 <button
                   type="button"
                   className="rounded border border-stone-300 px-1 text-xs text-stone-600 hover:bg-stone-100"
-                  onClick={() => providerPricingUi?.onRemoveAdditionalAdjustment?.(adj.id)}
+                  onClick={() =>
+                    providerPricingUi?.onRemoveAdditionalAdjustment?.(adj.id)
+                  }
                 >
                   -
                 </button>
@@ -109,7 +164,9 @@ export function AdminChangePricingAdjustments({
                   placeholder="Line description"
                   value={adj.label}
                   onChange={(e) =>
-                    providerPricingUi?.onUpdateAdditionalAdjustment?.(adj.id, { label: e.target.value })
+                    providerPricingUi?.onUpdateAdditionalAdjustment?.(adj.id, {
+                      label: e.target.value,
+                    })
                   }
                 />
               </div>
@@ -119,7 +176,7 @@ export function AdminChangePricingAdjustments({
                   value={adj.mode}
                   onChange={(e) =>
                     providerPricingUi?.onUpdateAdditionalAdjustment?.(adj.id, {
-                      mode: e.target.value as 'DISCOUNT' | 'CHARGE',
+                      mode: e.target.value as "DISCOUNT" | "CHARGE",
                     })
                   }
                 >
@@ -160,13 +217,22 @@ export function AdminChangePricingAdjustments({
       ) : null}
       {showAdminCustomLineEditor ? (
         <div className="space-y-3">
-          <div className="flex justify-center">
+          <div className="flex justify-start">
             <button
               type="button"
               className="admin-custom-receipt-line-add inline-flex items-center gap-1.5 rounded-full border border-dashed border-stone-300 bg-stone-50/80 text-xs font-medium text-stone-600 hover:border-stone-400 hover:bg-stone-100"
-              onClick={onAddAdminCustomReceiptLine}
+              onClick={() => {
+                const id = onAddAdminCustomReceiptLine();
+                setExpandedAdminCustomReceiptLineIds((current) => [
+                  ...current,
+                  id,
+                ]);
+              }}
             >
-              <span className="text-base font-semibold leading-none text-stone-700" aria-hidden>
+              <span
+                className="text-base font-semibold leading-none text-stone-700"
+                aria-hidden
+              >
                 +
               </span>
               Add custom line
@@ -174,121 +240,321 @@ export function AdminChangePricingAdjustments({
           </div>
           {adminCustomReceiptLines.map((adj) => {
             const sign = adj.amountSign ?? 1;
+            const isPending = pendingAdminCustomReceiptLineIds.includes(adj.id);
+            const isExpanded =
+              isPending || expandedAdminCustomReceiptLineIds.includes(adj.id);
+            const taxBehaviorLabel =
+              adminAdjustmentTaxBehaviorOptions(sign).find(
+                (option) => option.value === adj.taxBehavior,
+              )?.label ?? "Tax treatment";
+            const amountSummary = `${sign === -1 ? "\u2212" : "+"}${
+              adj.amountInput || "0.00"
+            }${adj.calculation === "PERCENTAGE" ? "%" : ""}`;
+
+            if (!isExpanded) {
+              return (
+                <div
+                  key={adj.id}
+                  className="admin-custom-receipt-line flex items-center justify-between gap-3 rounded-lg border border-stone-200 bg-stone-50/70 px-3 py-2.5 text-sm shadow-sm"
+                >
+                  <div className="min-w-0">
+                    <div className="truncate font-medium text-stone-800">
+                      {adj.label.trim() || "Custom line"}
+                    </div>
+                    <div className="truncate text-xs text-stone-500">
+                      {adminCustomLineScopeLabel(adj.scope)} ·{" "}
+                      {taxBehaviorLabel}
+                    </div>
+                  </div>
+                  <div className="flex shrink-0 items-center gap-2">
+                    <span
+                      className={`font-semibold tabular-nums ${
+                        sign === -1 ? "text-red-700" : "text-emerald-700"
+                      }`}
+                    >
+                      {amountSummary}
+                    </span>
+                    <button
+                      type="button"
+                      className="rounded-md px-2 py-1 text-xs font-medium text-stone-600 hover:bg-stone-200 hover:text-stone-800"
+                      onClick={() =>
+                        setExpandedAdminCustomReceiptLineIds((current) =>
+                          current.includes(adj.id)
+                            ? current
+                            : [...current, adj.id],
+                        )
+                      }
+                    >
+                      Edit
+                    </button>
+                    <button
+                      type="button"
+                      className="admin-custom-receipt-remove rounded-md text-stone-400 hover:bg-stone-200 hover:text-stone-700"
+                      aria-label={`Remove ${adj.label.trim() || "custom line"}`}
+                      onClick={() => onRemoveAdminCustomReceiptLine(adj.id)}
+                    >
+                      <span className="block text-xl leading-none" aria-hidden>
+                        &times;
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              );
+            }
+
             return (
               <div
                 key={adj.id}
-                className="admin-custom-receipt-line flex flex-wrap items-center gap-2 text-sm sm:flex-nowrap"
+                className="admin-custom-receipt-line space-y-3 rounded-lg border border-stone-200 bg-stone-50/70 p-3 text-sm shadow-sm"
               >
-                <input
-                  type="text"
-                  className="admin-custom-receipt-input min-w-[8rem] flex-1 rounded-md border border-stone-300 bg-white text-sm text-stone-800 placeholder:text-stone-400"
-                  placeholder="Description"
-                  value={adj.label}
-                  onChange={(e) =>
-                    onUpdateAdminCustomReceiptLine(adj.id, { label: e.target.value })
-                  }
-                />
-                <select
-                  className="rounded-md border border-stone-300 bg-white px-2 py-1 text-xs text-stone-700"
-                  aria-label="Adjustment calculation"
-                  value={adj.calculation}
-                  onChange={(e) =>
-                    onUpdateAdminCustomReceiptLine(adj.id, {
-                      calculation: e.target.value as AdminCustomReceiptLine['calculation'],
-                    })
-                  }
-                >
-                  <option value="FIXED_AMOUNT">Fixed amount</option>
-                  <option value="PERCENTAGE">Percentage</option>
-                </select>
-                <div
-                  className="flex shrink-0 rounded-lg border border-stone-300 bg-stone-100/90 p-0.5 shadow-sm"
-                  role="group"
-                  aria-label="Line adds to total or reduces it"
-                >
-                  <button
-                    type="button"
-                    className={`admin-custom-receipt-segment rounded-md text-xs font-semibold transition-colors sm:text-sm ${
-                      sign === 1
-                        ? 'bg-white text-emerald-800 shadow-sm ring-1 ring-stone-200/80'
-                        : 'text-stone-500 hover:bg-stone-200/60 hover:text-stone-700'
-                    }`}
-                    aria-pressed={sign === 1}
-                    onClick={() => onUpdateAdminCustomReceiptLine(adj.id, { amountSign: 1 })}
-                  >
-                    Charge (+)
-                  </button>
+                <div className="flex items-center justify-between gap-3 border-b border-stone-200 pb-2">
+                  <div className="text-xs font-semibold text-stone-600">
+                    {adj.sourceAdjustmentId
+                      ? "Edit custom line"
+                      : "New custom line"}
+                    {adj.sourceAdjustmentId && adj.isDirty
+                      ? " · unapplied changes"
+                      : ""}
+                  </div>
                   <button
                     type="button"
-                    className={`admin-custom-receipt-segment rounded-md text-xs font-semibold transition-colors sm:text-sm ${
-                      sign === -1
-                        ? 'bg-white text-red-800 shadow-sm ring-1 ring-stone-200/80'
-                        : 'text-stone-500 hover:bg-stone-200/60 hover:text-stone-700'
-                    }`}
-                    aria-pressed={sign === -1}
-                    onClick={() => onUpdateAdminCustomReceiptLine(adj.id, { amountSign: -1 })}
+                    className="admin-custom-receipt-remove shrink-0 rounded-md text-stone-400 hover:bg-stone-200 hover:text-stone-700"
+                    aria-label={`Remove ${adj.label.trim() || "custom line"}`}
+                    onClick={() => onRemoveAdminCustomReceiptLine(adj.id)}
                   >
-                    Credit (&minus;)
+                    <span className="block text-xl leading-none" aria-hidden>
+                      &times;
+                    </span>
                   </button>
                 </div>
-                <input
-                  type="text"
-                  inputMode="decimal"
-                  className="admin-custom-receipt-input-amount w-[7rem] shrink-0 rounded-md border border-stone-300 bg-white text-right text-sm font-medium tabular-nums text-stone-800 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400/80"
-                  placeholder={adj.calculation === 'PERCENTAGE' ? '10' : '0.00'}
-                  aria-label="Amount"
-                  value={adj.amountInput}
-                  onChange={(e) =>
-                    onUpdateAdminCustomReceiptLine(adj.id, {
-                      amountInput: normalizeAmountInput(e.target.value),
-                    })
-                  }
-                />
-                <span className="text-xs text-stone-500" aria-hidden>
-                  {adj.calculation === 'PERCENTAGE' ? '%' : ''}
-                </span>
-                <select
-                  className="rounded-md border border-stone-300 bg-white px-2 py-1 text-xs text-stone-700"
-                  aria-label="Adjustment scope"
-                  value={adj.scope}
-                  onChange={(e) =>
-                    onUpdateAdminCustomReceiptLine(adj.id, {
-                      scope: e.target.value as AdminCustomReceiptLine['scope'],
-                    })
-                  }
-                >
-                  <option value="POSITIVE_AMENDMENT_VALUE">Added/change value</option>
-                  <option value="CURRENT_ACTIVE_TICKETS">All active tickets</option>
-                  <option value="CURRENT_ACTIVE_BOOKING">Entire active booking</option>
-                </select>
-                <select
-                  className="rounded-md border border-stone-300 bg-white px-2 py-1 text-xs text-stone-700"
-                  aria-label="Tax treatment"
-                  value={adj.taxBehavior}
-                  onChange={(e) =>
-                    onUpdateAdminCustomReceiptLine(adj.id, {
-                      taxBehavior: e.target.value as AdminCustomReceiptLine['taxBehavior'],
-                    })
-                  }
-                >
-                  <option value="NON_TAXABLE">Non-taxable</option>
-                  <option value="TAXABLE">Taxable</option>
-                  <option value="PRE_TAX_DISCOUNT">Pre-tax discount</option>
-                  <option value="POST_TAX_DISCOUNT">Post-tax discount</option>
-                </select>
-                <button
-                  type="button"
-                  className="admin-custom-receipt-remove ml-auto shrink-0 rounded-md text-stone-400 hover:bg-stone-100 hover:text-stone-700 sm:ml-0"
-                  aria-label="Remove this line"
-                  onClick={() => onRemoveAdminCustomReceiptLine(adj.id)}
-                >
-                  <span className="block text-xl leading-none" aria-hidden>
-                    &times;
+                <div className="flex flex-wrap items-center gap-2 sm:flex-nowrap">
+                  <input
+                    type="text"
+                    className="admin-custom-receipt-input min-w-[8rem] flex-1 rounded-md border border-stone-300 bg-white text-sm text-stone-800 placeholder:text-stone-400"
+                    placeholder="Label"
+                    value={adj.label}
+                    onChange={(e) =>
+                      onUpdateAdminCustomReceiptLine(adj.id, {
+                        label: e.target.value,
+                      })
+                    }
+                  />
+                  <select
+                    className="rounded-md border border-stone-300 bg-white px-2 py-1 text-xs text-stone-700"
+                    aria-label="Adjustment calculation"
+                    value={adj.calculation}
+                    onChange={(e) =>
+                      onUpdateAdminCustomReceiptLine(adj.id, {
+                        calculation: e.target
+                          .value as AdminCustomReceiptLine["calculation"],
+                      })
+                    }
+                  >
+                    <option value="FIXED_AMOUNT">Fixed amount</option>
+                    <option value="PERCENTAGE">Percentage</option>
+                  </select>
+                  <div
+                    className="flex shrink-0 rounded-lg border border-stone-300 bg-stone-100/90 p-0.5 shadow-sm"
+                    role="group"
+                    aria-label="Line adds to total or reduces it"
+                  >
+                    <button
+                      type="button"
+                      className={`admin-custom-receipt-segment rounded-md text-xs font-semibold transition-colors sm:text-sm ${
+                        sign === 1
+                          ? "bg-white text-emerald-800 shadow-sm ring-1 ring-stone-200/80"
+                          : "text-stone-500 hover:bg-stone-200/60 hover:text-stone-700"
+                      }`}
+                      aria-pressed={sign === 1}
+                      onClick={() =>
+                        onUpdateAdminCustomReceiptLine(adj.id, {
+                          amountSign: 1,
+                          taxBehavior: normalizeAdminAdjustmentTaxBehavior(
+                            1,
+                            adj.taxBehavior,
+                          ),
+                        })
+                      }
+                    >
+                      Charge (+)
+                    </button>
+                    <button
+                      type="button"
+                      className={`admin-custom-receipt-segment rounded-md text-xs font-semibold transition-colors sm:text-sm ${
+                        sign === -1
+                          ? "bg-white text-red-800 shadow-sm ring-1 ring-stone-200/80"
+                          : "text-stone-500 hover:bg-stone-200/60 hover:text-stone-700"
+                      }`}
+                      aria-pressed={sign === -1}
+                      onClick={() =>
+                        onUpdateAdminCustomReceiptLine(adj.id, {
+                          amountSign: -1,
+                          scope: normalizeAdminAdjustmentScopeForSign(
+                            -1,
+                            adj.scope,
+                          ),
+                          taxBehavior: normalizeAdminAdjustmentTaxBehavior(
+                            -1,
+                            adj.taxBehavior,
+                          ),
+                        })
+                      }
+                    >
+                      Credit (&minus;)
+                    </button>
+                  </div>
+                  <input
+                    type="text"
+                    inputMode="decimal"
+                    className="admin-custom-receipt-input-amount w-[7rem] shrink-0 rounded-md border border-stone-300 bg-white text-right text-sm font-medium tabular-nums text-stone-800 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400/80"
+                    placeholder={
+                      adj.calculation === "PERCENTAGE" ? "10" : "0.00"
+                    }
+                    aria-label="Amount"
+                    value={adj.amountInput}
+                    onChange={(e) =>
+                      onUpdateAdminCustomReceiptLine(adj.id, {
+                        amountInput: normalizeAmountInput(e.target.value),
+                      })
+                    }
+                  />
+                  <span className="text-xs text-stone-500" aria-hidden>
+                    {adj.calculation === "PERCENTAGE" ? "%" : ""}
                   </span>
-                </button>
+                </div>
+                <div className="flex flex-wrap items-center justify-end gap-2">
+                  {adj.calculation === "PERCENTAGE" || sign === -1 ? (
+                    <select
+                      className="rounded-md border border-stone-300 bg-white px-2 py-1 text-xs text-stone-700"
+                      aria-label="Applies to"
+                      value={adj.scope}
+                      onChange={(e) =>
+                        onUpdateAdminCustomReceiptLine(adj.id, {
+                          scope: e.target
+                            .value as AdminCustomReceiptLine["scope"],
+                          ...(e.target.value === "SELECTED_COMPONENTS"
+                            ? {}
+                            : { selectedComponentIds: [] }),
+                        })
+                      }
+                    >
+                      <option value="POSITIVE_AMENDMENT_VALUE">
+                        Added by this change
+                      </option>
+                      <option value="CURRENT_ACTIVE_TICKETS">
+                        All tickets
+                      </option>
+                      <option value="CURRENT_ACTIVE_BOOKING">
+                        Whole booking
+                      </option>
+                      <option value="SELECTED_COMPONENTS">
+                        Choose specific items
+                      </option>
+                    </select>
+                  ) : null}
+                  <select
+                    className="rounded-md border border-stone-300 bg-white px-2 py-1 text-xs text-stone-700"
+                    aria-label="Tax treatment"
+                    value={adj.taxBehavior}
+                    onChange={(e) =>
+                      onUpdateAdminCustomReceiptLine(adj.id, {
+                        taxBehavior: e.target
+                          .value as AdminCustomReceiptLine["taxBehavior"],
+                      })
+                    }
+                  >
+                    {adminAdjustmentTaxBehaviorOptions(sign).map((option) => (
+                      <option key={option.value} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                {sign === -1 && adj.scope === "POSITIVE_AMENDMENT_VALUE" ? (
+                  <p className="text-xs text-stone-500">
+                    Use this scope only when this change adds priced value, such
+                    as another ticket or a tour upgrade. Otherwise choose active
+                    tickets, the entire booking, or specific components.
+                  </p>
+                ) : null}
+                {adj.scope === "SELECTED_COMPONENTS" ? (
+                  <fieldset className="rounded-md border border-stone-200 bg-stone-50 px-3 py-2">
+                    <legend className="px-1 text-xs font-semibold text-stone-700">
+                      Apply this line to
+                    </legend>
+                    {adjustmentComponentOptions.length > 0 ? (
+                      <div className="grid gap-2 sm:grid-cols-2">
+                        {adjustmentComponentOptions.map((component) => {
+                          const checked = adj.selectedComponentIds.includes(
+                            component.componentId,
+                          );
+                          return (
+                            <label
+                              key={component.componentId}
+                              className="flex cursor-pointer items-start gap-2 rounded border border-stone-200 bg-white px-2 py-1.5 text-xs text-stone-700"
+                            >
+                              <input
+                                type="checkbox"
+                                className="mt-0.5"
+                                checked={checked}
+                                onChange={() =>
+                                  onUpdateAdminCustomReceiptLine(adj.id, {
+                                    selectedComponentIds: checked
+                                      ? adj.selectedComponentIds.filter(
+                                          (id) => id !== component.componentId,
+                                        )
+                                      : [
+                                          ...adj.selectedComponentIds,
+                                          component.componentId,
+                                        ],
+                                  })
+                                }
+                              />
+                              <span className="min-w-0">
+                                <span className="block font-medium">
+                                  {component.label}
+                                </span>
+                                <span className="block text-stone-500">
+                                  {component.type}
+                                </span>
+                              </span>
+                            </label>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      <p className="text-xs text-stone-500">
+                        Loading eligible booking components…
+                      </p>
+                    )}
+                    {adj.selectedComponentIds.length === 0 ? (
+                      <p className="mt-2 text-xs font-medium text-red-700">
+                        Choose at least one booking component.
+                      </p>
+                    ) : null}
+                  </fieldset>
+                ) : null}
               </div>
             );
           })}
+          {hasPendingAdminCustomReceiptLineChanges ? (
+            <div className="flex justify-center border-t border-stone-200 px-4 py-4">
+              <button
+                type="button"
+                className="admin-custom-receipt-apply rounded-md bg-emerald-700 text-sm font-semibold text-white shadow-sm hover:bg-emerald-800 disabled:cursor-not-allowed disabled:bg-stone-300 disabled:shadow-none"
+                disabled={
+                  !hasPendingAdminCustomReceiptLineChanges ||
+                  hasIncompleteAdminCustomReceiptLine
+                }
+                onClick={() => {
+                  onApplyAdminCustomReceiptLines();
+                  setExpandedAdminCustomReceiptLineIds([]);
+                }}
+              >
+                Apply custom line changes
+              </button>
+            </div>
+          ) : null}
         </div>
       ) : null}
     </>