@ticketboothapp/booking 1.2.122 → 1.2.124

package/src/components/booking/AdminChangeCheckoutDialogs.tsx

@@ -0,0 +1,105 @@
+import { AdminPaymentChoiceModal } from './AdminPaymentChoiceModal';
+import { CheckoutModal } from './CheckoutModal';
+import type {
+  AdminChangeCheckoutModalData,
+  AdminChangePaymentChoiceData,
+} from './admin-change-payment-choice-runner';
+import type { ChangeBookingSuccessUrlFactory } from './change-booking-payment-modal-builders';
+import type { Currency } from './CurrencySwitcher';
+import type { Locale } from '../../lib/booking/i18n/config';
+
+type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
+
+export interface AdminChangeCheckoutDialogsProps {
+  showAdminPaymentChoice: boolean;
+  adminChoiceData: AdminChangePaymentChoiceData | null;
+  checkoutModalData: AdminChangeCheckoutModalData | null;
+  showCheckoutModal: boolean;
+  checkoutClientSecret: string;
+  currency: Currency;
+  locale: Locale;
+  loading: boolean;
+  error: string;
+  getSuccessUrl?: ChangeBookingSuccessUrlFactory;
+  t: TranslationFn;
+  onPayNow: () => void;
+  onConfirmWithoutPayment: () => void;
+  onAdminPaymentChoiceCancel: () => void;
+  onCheckoutClose: () => void;
+  onPaymentSubmitStart: () => void;
+  onPaymentSubmitError: () => void;
+}
+
+export function AdminChangeCheckoutDialogs({
+  showAdminPaymentChoice,
+  adminChoiceData,
+  checkoutModalData,
+  showCheckoutModal,
+  checkoutClientSecret,
+  currency,
+  locale,
+  loading,
+  error,
+  getSuccessUrl,
+  t,
+  onPayNow,
+  onConfirmWithoutPayment,
+  onAdminPaymentChoiceCancel,
+  onCheckoutClose,
+  onPaymentSubmitStart,
+  onPaymentSubmitError,
+}: AdminChangeCheckoutDialogsProps) {
+  return (
+    <>
+      <AdminPaymentChoiceModal
+        open={!!(showAdminPaymentChoice && adminChoiceData)}
+        totalAmount={adminChoiceData?.totalAmount ?? 0}
+        currency={currency}
+        loading={loading}
+        error={error}
+        onPayNow={onPayNow}
+        onConfirmWithoutPayment={onConfirmWithoutPayment}
+        onCancel={onAdminPaymentChoiceCancel}
+      />
+      {checkoutModalData && (
+        <CheckoutModal
+          open={showCheckoutModal}
+          onClose={onCheckoutClose}
+          onPaymentSubmitStart={onPaymentSubmitStart}
+          onPaymentSubmitError={onPaymentSubmitError}
+          clientSecret={checkoutClientSecret}
+          reservationReference={checkoutModalData.reservationReference}
+          reservationExpiration={checkoutModalData.reservationExpiration}
+          customerLastName={checkoutModalData.customerLastName}
+          successUrlOverride={
+            checkoutModalData.successUrlOverride ??
+            (getSuccessUrl
+              ? getSuccessUrl({
+                  reservationRef: checkoutModalData.reservationReference,
+                  lastName: checkoutModalData.customerLastName ?? '',
+                  focusDate: checkoutModalData.bookingDate,
+                })
+              : undefined)
+          }
+          ticketLines={checkoutModalData.ticketLines}
+          feeLineItems={checkoutModalData.feeLineItems}
+          returnPriceAdjustment={checkoutModalData.returnPriceAdjustment}
+          cancellationPolicyFee={checkoutModalData.cancellationPolicyFee}
+          cancellationPolicyLabel={checkoutModalData.cancellationPolicyLabel}
+          subtotal={checkoutModalData.subtotal}
+          tax={checkoutModalData.tax}
+          total={checkoutModalData.total}
+          promoDiscountAmount={checkoutModalData.promoDiscountAmount ?? 0}
+          discountLabel={checkoutModalData.discountLabel}
+          totalQuantity={checkoutModalData.totalQuantity}
+          isTaxIncludedInPrice={checkoutModalData.isTaxIncludedInPrice}
+          taxRate={checkoutModalData.taxRate}
+          changeTotals={checkoutModalData.changeTotals}
+          currency={currency}
+          locale={locale}
+          t={t}
+        />
+      )}
+    </>
+  );
+}

package/src/components/booking/AdminChangeCheckoutPanel.tsx

@@ -0,0 +1,307 @@
+import type { ReactNode } from 'react';
+import type { Destination, PickupLocation } from '../../lib/booking-api';
+import { CheckoutForm } from './CheckoutForm';
+import type { ChangeBookingFlowProps } from './booking-flow-types';
+import type { Currency } from './CurrencySwitcher';
+import type { PriceSummaryLine } from './PriceSummary';
+import type {
+  ProviderDashboardChangePricingUi,
+  ProviderDashboardPricingLine,
+} from './booking-flow-ui';
+import { AdminChangeReceiptComparison } from './AdminChangeReceiptComparison';
+import {
+  AdminChangePricingAdjustments,
+  AdminChangePricingMessages,
+  type AdminCustomReceiptLine,
+} from './AdminChangePricingPanel';
+
+type TranslationFn = (key: string, params?: Record<string, string>) => string;
+
+type AdminCustomReceiptLinePatch = Partial<
+  Pick<AdminCustomReceiptLine, 'label' | 'amountInput' | 'amountSign'>
+>;
+
+export interface AdminChangeCheckoutPanelProps {
+  priceSummaryLines: PriceSummaryLine[];
+  replacePriceSummary?: ReactNode;
+  changeFlowAmountDue: number;
+  receiptSubtotal: number;
+  receiptTax: number;
+  receiptTotal: number;
+  originalReceipt: ChangeBookingFlowProps['originalReceipt'];
+  priceSummaryLinesIncludeTaxRow: boolean;
+  isTaxIncludedInPrice: boolean;
+  taxRate?: number;
+  currency: Currency;
+  locale: string;
+  t: TranslationFn;
+  showProviderPricingInlineEditor: boolean;
+  providerPricingUi?: ProviderDashboardChangePricingUi;
+  providerQuotedLines: ProviderDashboardPricingLine[];
+  debugPanel: ReactNode;
+  showChangeFlowManualPriceLines: boolean;
+  showAdminCustomLineEditor: boolean;
+  adminCustomReceiptLines: AdminCustomReceiptLine[];
+  onAddAdminCustomReceiptLine: () => void;
+  onUpdateAdminCustomReceiptLine: (id: string, patch: AdminCustomReceiptLinePatch) => void;
+  onRemoveAdminCustomReceiptLine: (id: string) => void;
+  firstName: string;
+  lastName: string;
+  email: string;
+  onFirstNameChange: (value: string) => void;
+  onLastNameChange: (value: string) => void;
+  onEmailChange: (value: string) => void;
+  onClearError: () => void;
+  selectedDate: string;
+  pickupLocations?: PickupLocation[];
+  destinations?: Destination[];
+  pickupLocationId: string | null;
+  pickupLocationSkipped: boolean;
+  selectedPickupLocation?: PickupLocation | null;
+  highlightedPickupLocationIds?: string[];
+  onPickupLocationIdChange: (locationId: string | null) => void;
+  onPickupLocationSkippedChange: (skipped: boolean) => void;
+  termsAccepted: boolean;
+  onTermsAcceptedChange: (checked: boolean) => void;
+  onTermsAcceptedAtChange: (value: string | null) => void;
+  isAdmin: boolean;
+  skipConfirmationCommunications: boolean;
+  disableAutoCommunications: boolean;
+  onSkipConfirmationChange: (checked: boolean) => void;
+  onDisableCommunicationsChange: (checked: boolean) => void;
+  error: string;
+  loading: boolean;
+  totalQuantity: number;
+  onCheckout: () => void;
+  submitLabel?: string;
+  showCheckoutModal: boolean;
+  showAdminPaymentChoice: boolean;
+  hasEffectiveChangeSelection: boolean;
+  isChangeQuoteBlocked: boolean;
+  submitDisabled: boolean;
+  attributionSummary?: string;
+  attributionConfirmLabel?: string;
+  attributionConfirmed: boolean;
+  onAttributionConfirmedChange: (checked: boolean) => void;
+  lineAmountInputs?: Record<string, string>;
+  onLineAmountInputChange?: (lineKey: string, value: string) => void;
+  onLineAmountInputBlur?: (lineKey: string) => void;
+  onLineAmountReset?: (lineKey: string) => void;
+  lineLabelInputs?: Record<string, string>;
+}
+
+export function AdminChangeCheckoutPanel({
+  priceSummaryLines,
+  replacePriceSummary,
+  changeFlowAmountDue,
+  receiptSubtotal,
+  receiptTax,
+  receiptTotal,
+  originalReceipt,
+  priceSummaryLinesIncludeTaxRow,
+  isTaxIncludedInPrice,
+  taxRate,
+  currency,
+  locale,
+  t,
+  showProviderPricingInlineEditor,
+  providerPricingUi,
+  providerQuotedLines,
+  debugPanel,
+  showChangeFlowManualPriceLines,
+  showAdminCustomLineEditor,
+  adminCustomReceiptLines,
+  onAddAdminCustomReceiptLine,
+  onUpdateAdminCustomReceiptLine,
+  onRemoveAdminCustomReceiptLine,
+  firstName,
+  lastName,
+  email,
+  onFirstNameChange,
+  onLastNameChange,
+  onEmailChange,
+  onClearError,
+  selectedDate,
+  pickupLocations,
+  destinations,
+  pickupLocationId,
+  pickupLocationSkipped,
+  selectedPickupLocation,
+  highlightedPickupLocationIds,
+  onPickupLocationIdChange,
+  onPickupLocationSkippedChange,
+  termsAccepted,
+  onTermsAcceptedChange,
+  onTermsAcceptedAtChange,
+  isAdmin,
+  skipConfirmationCommunications,
+  disableAutoCommunications,
+  onSkipConfirmationChange,
+  onDisableCommunicationsChange,
+  error,
+  loading,
+  totalQuantity,
+  onCheckout,
+  submitLabel,
+  showCheckoutModal,
+  showAdminPaymentChoice,
+  hasEffectiveChangeSelection,
+  isChangeQuoteBlocked,
+  submitDisabled,
+  attributionSummary,
+  attributionConfirmLabel,
+  attributionConfirmed,
+  onAttributionConfirmedChange,
+  lineAmountInputs,
+  onLineAmountInputChange,
+  onLineAmountInputBlur,
+  onLineAmountReset,
+  lineLabelInputs,
+}: AdminChangeCheckoutPanelProps) {
+  const translatedTotalLabel = t('booking.totalOwedForBookingChange');
+  const totalSummaryLabel =
+    changeFlowAmountDue < -0.005
+      ? 'Refund owed (vs original booking)'
+      : translatedTotalLabel && translatedTotalLabel !== 'booking.totalOwedForBookingChange'
+        ? translatedTotalLabel
+        : 'Total owed for booking difference';
+  const pricingAdjustments = (
+    <AdminChangePricingAdjustments
+      showChangeFlowManualPriceLines={showChangeFlowManualPriceLines}
+      showProviderPricingInlineEditor={showProviderPricingInlineEditor}
+      providerPricingUi={providerPricingUi}
+      showAdminCustomLineEditor={showAdminCustomLineEditor}
+      adminCustomReceiptLines={adminCustomReceiptLines}
+      onAddAdminCustomReceiptLine={onAddAdminCustomReceiptLine}
+      onUpdateAdminCustomReceiptLine={onUpdateAdminCustomReceiptLine}
+      onRemoveAdminCustomReceiptLine={onRemoveAdminCustomReceiptLine}
+    />
+  );
+  const adminReceiptComparison =
+    isAdmin && originalReceipt ? (
+      <AdminChangeReceiptComparison
+        originalReceipt={originalReceipt}
+        newReceipt={{
+          subtotal: receiptSubtotal,
+          tax: receiptTax,
+          total: receiptTotal,
+        }}
+        newPriceSummaryLines={priceSummaryLines}
+        newPriceSummaryLinesIncludeTaxRow={priceSummaryLinesIncludeTaxRow}
+        amountDue={changeFlowAmountDue}
+        amountDueLabel={totalSummaryLabel}
+        currency={currency}
+        locale={locale}
+        t={t}
+        taxRate={taxRate}
+        newReceiptAdjustments={pricingAdjustments}
+        lineAmountInputs={lineAmountInputs}
+        onLineAmountInputChange={onLineAmountInputChange}
+        onLineAmountInputBlur={onLineAmountInputBlur}
+        onLineAmountReset={onLineAmountReset}
+        lineLabelInputs={lineLabelInputs}
+      />
+    ) : null;
+
+  return (
+    <CheckoutForm
+      priceSummaryLines={priceSummaryLines}
+      replacePriceSummary={adminReceiptComparison ?? replacePriceSummary}
+      totalPrice={changeFlowAmountDue}
+      totalSummaryLabel={totalSummaryLabel}
+      subtotal={receiptSubtotal}
+      taxAmount={
+        !isTaxIncludedInPrice && receiptTax > 0 && !priceSummaryLinesIncludeTaxRow
+          ? receiptTax
+          : 0
+      }
+      taxRate={taxRate}
+      currency={currency}
+      locale={locale}
+      t={t}
+      extraBetweenTaxAndTotal={
+        <AdminChangePricingMessages
+          showProviderPricingInlineEditor={showProviderPricingInlineEditor}
+          providerPricingUi={providerPricingUi}
+          providerQuotedLines={providerQuotedLines}
+          debugPanel={debugPanel}
+        />
+      }
+      extraBeforeSubtotal={
+        adminReceiptComparison ? undefined : pricingAdjustments
+      }
+      firstName={firstName}
+      lastName={lastName}
+      email={email}
+      onFirstNameChange={(value) => {
+        onFirstNameChange(value);
+        onClearError();
+      }}
+      onLastNameChange={(value) => {
+        onLastNameChange(value);
+        onClearError();
+      }}
+      onEmailChange={(value) => {
+        onEmailChange(value);
+        onClearError();
+      }}
+      readOnlyContactFields
+      pickupLocations={selectedDate && pickupLocations && pickupLocations.length > 0 ? pickupLocations : undefined}
+      destinations={destinations}
+      pickupLocationId={pickupLocationId}
+      pickupLocationSkipped={pickupLocationSkipped}
+      selectedPickupLocation={selectedPickupLocation}
+      highlightedPickupLocationIds={highlightedPickupLocationIds}
+      onLocationSelect={(locationId) => {
+        onPickupLocationIdChange(locationId);
+        onClearError();
+        if (locationId === null && pickupLocationSkipped) {
+          onPickupLocationSkippedChange(false);
+        } else if (locationId !== null) {
+          onPickupLocationSkippedChange(false);
+        }
+      }}
+      onSkip={() => {
+        onPickupLocationSkippedChange(true);
+        onPickupLocationIdChange(null);
+        onClearError();
+      }}
+      onChangePickup={() => {
+        onPickupLocationIdChange(null);
+        onPickupLocationSkippedChange(false);
+      }}
+      termsAccepted={termsAccepted}
+      onTermsChange={(checked) => {
+        onTermsAcceptedChange(checked);
+        onTermsAcceptedAtChange(checked ? new Date().toISOString() : null);
+      }}
+      isAdmin={isAdmin}
+      showCommunicationAdminSection={false}
+      skipConfirmationCommunications={skipConfirmationCommunications}
+      disableAutoCommunications={disableAutoCommunications}
+      onSkipConfirmationChange={onSkipConfirmationChange}
+      onDisableCommunicationsChange={onDisableCommunicationsChange}
+      error={error}
+      loading={loading}
+      totalQuantity={totalQuantity}
+      onCheckout={onCheckout}
+      submitLabel={submitLabel}
+      hideSubmitButton={
+        showCheckoutModal ||
+        showAdminPaymentChoice ||
+        !hasEffectiveChangeSelection ||
+        isChangeQuoteBlocked
+      }
+      submitDisabled={submitDisabled}
+      attributionSummary={attributionSummary}
+      attributionConfirmLabel={attributionConfirmLabel}
+      attributionConfirmed={attributionConfirmed}
+      onAttributionConfirmedChange={onAttributionConfirmedChange}
+      lineAmountInputs={lineAmountInputs}
+      onLineAmountInputChange={onLineAmountInputChange}
+      onLineAmountInputBlur={onLineAmountInputBlur}
+      onLineAmountReset={onLineAmountReset}
+      lineLabelInputs={lineLabelInputs}
+    />
+  );
+}

package/src/components/booking/AdminChangePricingPanel.tsx

@@ -0,0 +1,244 @@
+import type { ReactNode } from 'react';
+import type {
+  ProviderDashboardChangePricingUi,
+  ProviderDashboardPricingLine,
+} from './booking-flow-ui';
+
+export type AdminCustomReceiptLine = {
+  id: string;
+  label: string;
+  amountInput: string;
+  amountSign: 1 | -1;
+};
+
+type AdminCustomReceiptLinePatch = Partial<
+  Pick<AdminCustomReceiptLine, 'label' | 'amountInput' | 'amountSign'>
+>;
+
+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>
+      ) : null}
+      {showProviderPricingInlineEditor &&
+      providerPricingUi?.loading &&
+      providerQuotedLines.length === 0 ? (
+        <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>
+      ) : null}
+      {debugPanel}
+    </>
+  );
+}
+
+export interface AdminChangePricingAdjustmentsProps {
+  showChangeFlowManualPriceLines: boolean;
+  showProviderPricingInlineEditor: boolean;
+  providerPricingUi?: ProviderDashboardChangePricingUi;
+  showAdminCustomLineEditor: boolean;
+  adminCustomReceiptLines: AdminCustomReceiptLine[];
+  onAddAdminCustomReceiptLine: () => void;
+  onUpdateAdminCustomReceiptLine: (id: string, patch: AdminCustomReceiptLinePatch) => void;
+  onRemoveAdminCustomReceiptLine: (id: string) => void;
+}
+
+function normalizeAmountInput(value: string): string {
+  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, '')}`;
+}
+
+export function AdminChangePricingAdjustments({
+  showChangeFlowManualPriceLines,
+  showProviderPricingInlineEditor,
+  providerPricingUi,
+  showAdminCustomLineEditor,
+  adminCustomReceiptLines,
+  onAddAdminCustomReceiptLine,
+  onUpdateAdminCustomReceiptLine,
+  onRemoveAdminCustomReceiptLine,
+}: AdminChangePricingAdjustmentsProps) {
+  if (!showChangeFlowManualPriceLines && !showAdminCustomLineEditor) return null;
+
+  const providerAdjustments = providerPricingUi?.additionalAdjustments ?? [];
+
+  return (
+    <>
+      {showChangeFlowManualPriceLines &&
+      showProviderPricingInlineEditor &&
+      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 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)}
+                >
+                  -
+                </button>
+                <input
+                  type="text"
+                  className="admin-custom-receipt-input w-40 rounded border border-stone-300 bg-white text-sm text-stone-800 placeholder:text-stone-400"
+                  placeholder="Line description"
+                  value={adj.label}
+                  onChange={(e) =>
+                    providerPricingUi?.onUpdateAdditionalAdjustment?.(adj.id, { label: e.target.value })
+                  }
+                />
+              </div>
+              <div className="flex items-center gap-1">
+                <select
+                  className="rounded border border-stone-300 px-1 py-0.5 text-xs"
+                  value={adj.mode}
+                  onChange={(e) =>
+                    providerPricingUi?.onUpdateAdditionalAdjustment?.(adj.id, {
+                      mode: e.target.value as 'DISCOUNT' | 'CHARGE',
+                    })
+                  }
+                >
+                  <option value="DISCOUNT">-</option>
+                  <option value="CHARGE">+</option>
+                </select>
+                <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="0.00"
+                  value={adj.amountInput}
+                  onChange={(e) =>
+                    providerPricingUi?.onUpdateAdditionalAdjustment?.(adj.id, {
+                      amountInput: e.target.value,
+                    })
+                  }
+                />
+              </div>
+            </div>
+          ))}
+          <button
+            type="button"
+            className="rounded border border-stone-300 px-2 py-0.5 text-xs text-stone-600 hover:bg-stone-100"
+            onClick={() => providerPricingUi?.onAddAdditionalAdjustment?.()}
+          >
+            + add line item
+          </button>
+        </div>
+      ) : showChangeFlowManualPriceLines && showProviderPricingInlineEditor ? (
+        <button
+          type="button"
+          className="rounded border border-stone-300 px-2 py-0.5 text-xs text-stone-600 hover:bg-stone-100"
+          onClick={() => providerPricingUi?.onAddAdditionalAdjustment?.()}
+        >
+          + add line item
+        </button>
+      ) : null}
+      {showAdminCustomLineEditor ? (
+        <div className="space-y-3">
+          <div className="flex justify-center">
+            <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}
+            >
+              <span className="text-base font-semibold leading-none text-stone-700" aria-hidden>
+                +
+              </span>
+              Add custom line
+            </button>
+          </div>
+          {adminCustomReceiptLines.map((adj) => {
+            const sign = adj.amountSign ?? 1;
+            return (
+              <div
+                key={adj.id}
+                className="admin-custom-receipt-line flex flex-wrap items-center gap-2 text-sm 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="Description"
+                  value={adj.label}
+                  onChange={(e) =>
+                    onUpdateAdminCustomReceiptLine(adj.id, { label: e.target.value })
+                  }
+                />
+                <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>
+                  <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 })}
+                  >
+                    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="0.00"
+                  aria-label="Amount"
+                  value={adj.amountInput}
+                  onChange={(e) =>
+                    onUpdateAdminCustomReceiptLine(adj.id, {
+                      amountInput: normalizeAmountInput(e.target.value),
+                    })
+                  }
+                />
+                <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;
+                  </span>
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      ) : null}
+    </>
+  );
+}