@ticketboothapp/booking 0.1.23 → 1.2.24

package/src/components/booking/AddOnsSection.tsx

@@ -1,184 +0,0 @@
-'use client';
-
-import { formatCurrencyAmount } from '@/lib/currency';
-import type { AddOn } from '@/lib/booking-api';
-import { MealDrinkAddOnSelector, canUseMealDrinkSelector } from './MealDrinkAddOnSelector';
-import type { Currency } from './CurrencySwitcher';
-import styles from './AddOnsSection.module.css';
-
-export type AddOnSelection = { addOnId: string; variantId?: string; quantity?: number };
-
-interface AddOnsSectionProps {
-  addOns: AddOn[];
-  addOnSelections: AddOnSelection[];
-  currency: Currency;
-  locale: string;
-  onSelectionsChange: (selections: AddOnSelection[] | ((prev: AddOnSelection[]) => AddOnSelection[])) => void;
-  minimumTotalByAddOnId?: Map<string, number>;
-}
-
-export function AddOnsSection({
-  addOns,
-  addOnSelections,
-  currency,
-  locale,
-  onSelectionsChange,
-  minimumTotalByAddOnId,
-}: AddOnsSectionProps) {
-  return (
-    <div className="border-t border-stone-200 pt-6 space-y-4">
-      <label className={styles.label}>
-        Add-ons
-      </label>
-      {addOns.map((addOn) => {
-        const minTotalForAddOn = minimumTotalByAddOnId?.get(addOn.addOnId) ?? 0;
-        if (addOn.variantType === 'none') {
-          const isSelected = addOnSelections.some((s) => s.addOnId === addOn.addOnId);
-          const canToggleOff = minTotalForAddOn <= 0;
-          return (
-            <div key={addOn.addOnId}>
-              <label className="block text-sm font-medium text-stone-700 mb-2">{addOn.name}</label>
-              {addOn.description && (
-                <p className="text-sm text-stone-500 mb-2">{addOn.description}</p>
-              )}
-              <button
-                type="button"
-                onClick={() => {
-                  onSelectionsChange((prev) => {
-                    if (isSelected) {
-                      if (!canToggleOff) return prev;
-                      return prev.filter((s) => s.addOnId !== addOn.addOnId);
-                    }
-                    return [...prev, { addOnId: addOn.addOnId, quantity: 1 }];
-                  });
-                }}
-                className={`flex items-center justify-between w-full p-4 rounded-lg border-2 text-left transition-colors ${
-                  isSelected ? 'border-emerald-500 bg-emerald-50' : 'border-stone-200 bg-white hover:border-stone-300'
-                }`}
-              >
-                <span className="font-medium text-stone-900">
-                  {isSelected ? `Yes, add ${addOn.name}` : `No ${addOn.name}`}
-                </span>
-                <span className="text-sm font-semibold text-stone-700">
-                  +{formatCurrencyAmount(addOn.price ?? 0, currency, locale as 'en' | 'fr')}
-                </span>
-              </button>
-            </div>
-          );
-        }
-        if (addOn.variantType === 'multi_quantity' && addOn.variants?.length) {
-          if (canUseMealDrinkSelector(addOn)) {
-            return (
-              <MealDrinkAddOnSelector
-                key={addOn.addOnId}
-                addOn={addOn}
-                selections={addOnSelections}
-                onSelectionsChange={onSelectionsChange}
-                currency={currency}
-                locale={locale as 'en' | 'fr'}
-                minimumTotal={minTotalForAddOn}
-              />
-            );
-          }
-          return (
-            <div key={addOn.addOnId}>
-              <label className="block text-sm font-medium text-stone-700 mb-2">{addOn.name}</label>
-              {addOn.description && (
-                <p className="text-sm text-stone-500 mb-2">{addOn.description}</p>
-              )}
-              <div className="space-y-2">
-                {addOn.variants.map((variant) => {
-                  const sel = addOnSelections.find((s) => s.addOnId === addOn.addOnId && s.variantId === variant.id);
-                  const qty = sel?.quantity ?? 0;
-                  const currentTotalForAddOn = addOnSelections
-                    .filter((s) => s.addOnId === addOn.addOnId)
-                    .reduce((sum, s) => sum + Math.max(1, Number(s.quantity) || 1), 0);
-                  const canDecrement = qty > 0 && currentTotalForAddOn > minTotalForAddOn;
-                  const price = (addOn.price ?? 0) + (variant.priceAdjustment ?? 0);
-                  return (
-                    <div key={variant.id} className="flex items-center gap-3 p-3 bg-stone-50 rounded-lg">
-                      <span className="text-sm text-stone-800">{variant.label}</span>
-                      <div className="flex items-center gap-2 shrink-0">
-                        <button
-                          type="button"
-                          onClick={() => {
-                            onSelectionsChange((prev) => {
-                              const next = Math.max(0, qty - 1);
-                              const rest = prev.filter((s) => !(s.addOnId === addOn.addOnId && s.variantId === variant.id));
-                              if (next > 0) return [...rest, { addOnId: addOn.addOnId, variantId: variant.id, quantity: next }];
-                              return rest;
-                            });
-                          }}
-                          disabled={!canDecrement}
-                          className="h-8 w-8 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-                        >
-                          −
-                        </button>
-                        <span className="w-6 text-center font-medium tabular-nums text-sm">{qty}</span>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            onSelectionsChange((prev) => {
-                              const rest = prev.filter((s) => !(s.addOnId === addOn.addOnId && s.variantId === variant.id));
-                              return [...rest, { addOnId: addOn.addOnId, variantId: variant.id, quantity: qty + 1 }];
-                            });
-                          }}
-                          className="h-8 w-8 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 text-sm"
-                        >
-                          +
-                        </button>
-                        <span className="text-sm font-medium text-stone-700 w-16 text-right">
-                          {formatCurrencyAmount(price, currency, locale as 'en' | 'fr')} ea
-                        </span>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          );
-        }
-        if (addOn.variantType === 'single_choice' && addOn.variants?.length) {
-          const sel = addOnSelections.find((s) => s.addOnId === addOn.addOnId);
-          const hasLockedInitialSelection = minTotalForAddOn > 0;
-          return (
-            <div key={addOn.addOnId}>
-              <label className="block text-sm font-medium text-stone-700 mb-2">{addOn.name}</label>
-              {addOn.description && (
-                <p className="text-sm text-stone-500 mb-2">{addOn.description}</p>
-              )}
-              <div className="space-y-2">
-                {addOn.variants.map((variant) => {
-                  const isSelected = sel?.variantId === variant.id;
-                  const price = (addOn.price ?? 0) + (variant.priceAdjustment ?? 0);
-                  return (
-                    <button
-                      key={variant.id}
-                      type="button"
-                      onClick={() => {
-                        onSelectionsChange((prev) => {
-                          const rest = prev.filter((s) => s.addOnId !== addOn.addOnId);
-                          if (isSelected) return hasLockedInitialSelection ? prev : rest;
-                          return [...rest, { addOnId: addOn.addOnId, variantId: variant.id, quantity: 1 }];
-                        });
-                      }}
-                      className={`flex items-center justify-between w-full p-3 rounded-lg border-2 text-left transition-colors ${
-                        isSelected ? 'border-emerald-500 bg-emerald-50' : 'border-stone-200 bg-white hover:border-stone-300'
-                      }`}
-                    >
-                      <span className="text-sm font-medium text-stone-800">{variant.label}</span>
-                      <span className="text-sm font-semibold text-stone-700">
-                        +{formatCurrencyAmount(price, currency, locale as 'en' | 'fr')}
-                      </span>
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          );
-        }
-        return null;
-      })}
-    </div>
-  );
-}

package/src/components/booking/AdminPaymentChoiceModal.tsx

@@ -1,98 +0,0 @@
-'use client';
-
-import { createPortal } from 'react-dom';
-import { formatCurrencyAmount } from '@/lib/currency';
-import type { Currency } from './CurrencySwitcher';
-
-interface AdminPaymentChoiceModalProps {
-  open: boolean;
-  totalAmount: number;
-  currency: Currency;
-  loading: boolean;
-  error: string;
-  onPayNow: () => void;
-  onConfirmWithoutPayment: () => void;
-  onCancel: () => void;
-}
-
-/**
- * Provider / staff: pay now vs confirm without payment.
- * Uses the same overlay + card + Tailwind button pattern as {@link CheckoutModal}
- * so `.booking-flow-preflight button { background: transparent }` does not strip primary styles.
- */
-export function AdminPaymentChoiceModal({
-  open,
-  totalAmount,
-  currency,
-  loading,
-  error,
-  onPayNow,
-  onConfirmWithoutPayment,
-  onCancel,
-}: AdminPaymentChoiceModalProps) {
-  if (!open) return null;
-
-  const modal = (
-    <div
-      className="booking-flow-root booking-flow-preflight fixed inset-0 z-[10050] flex items-center justify-center p-4 bg-black/50"
-      style={{ zIndex: 100_000 }}
-    >
-      <div className="bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-hidden flex flex-col">
-        <div className="p-6 border-b border-stone-200 flex-shrink-0">
-          <div className="flex justify-between items-start gap-3">
-            <h3 className="text-lg font-semibold text-stone-900 pr-2">
-              Complete booking
-            </h3>
-            <button
-              type="button"
-              onClick={onCancel}
-              className="text-stone-400 hover:text-stone-600 p-1 shrink-0 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/40"
-              aria-label="Close"
-            >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-          <p className="mt-3 text-sm text-stone-600 leading-relaxed">
-            Pay now, or confirm without payment. The customer can pay the full balance from the Manage Booking page.
-          </p>
-        </div>
-
-        <div className="p-6 flex flex-col gap-3 flex-1 min-h-0">
-          {error ? (
-            <p className="text-sm text-red-600" role="alert">
-              {error}
-            </p>
-          ) : null}
-
-          <button
-            type="button"
-            onClick={onPayNow}
-            disabled={loading}
-            className="w-full py-3 px-4 bg-emerald-600 text-white font-semibold rounded-lg hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {loading ? 'Loading...' : `Pay now (${formatCurrencyAmount(totalAmount, currency)})`}
-          </button>
-          <button
-            type="button"
-            onClick={onConfirmWithoutPayment}
-            disabled={loading}
-            className="w-full py-3 px-4 border border-stone-300 text-stone-700 rounded-lg hover:bg-stone-50 font-medium disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            Confirm without payment
-          </button>
-          <button
-            type="button"
-            onClick={onCancel}
-            disabled={loading}
-            className="w-full py-2 text-sm text-stone-500 hover:text-stone-700 font-medium disabled:opacity-50"
-          >
-            Cancel
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-  return typeof document !== 'undefined' ? createPortal(modal, document.body) : null;
-}