@ticketboothapp/booking 0.1.22 → 1.2.24

package/src/components/booking/CancellationPolicySelector.module.css

@@ -1,124 +0,0 @@
-/**
- * Cancellation policy selector - radio-style policy options
- */
-
-.wrapper {
-  /* Spacing between sections handled by parent space-y-6 in BookingFlow */
-}
-
-.label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--booking-stone-700, #44403c);
-  margin-bottom: 0.5rem;
-}
-
-.forcedMessage {
-  font-size: 0.875rem;
-  color: var(--booking-stone-600, #57534e);
-  padding: 0.75rem 1rem;
-  background: var(--booking-stone-100, #f5f5f4);
-  border-radius: 0.5rem;
-  border: 1px solid var(--booking-stone-200, #e7e5e4);
-}
-
-.list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.btn {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 1rem 1.25rem;
-  border-radius: 0.5rem;
-  border: 2px solid;
-  text-align: left;
-  transition: all 0.2s;
-  cursor: pointer;
-}
-
-.btnSelected {
-  border-color: var(--booking-emerald-500, #10b981);
-  background: var(--booking-emerald-50, #ecfdf5);
-}
-
-.btnForced {
-  cursor: default;
-  pointer-events: none;
-}
-
-.btnDefault {
-  border-color: var(--booking-stone-200, #e7e5e4);
-  background: #fff;
-}
-
-.btnDefault:hover {
-  border-color: var(--booking-stone-300, #d6d3d1);
-}
-
-.radio {
-  display: flex;
-  height: 1.25rem;
-  width: 1.25rem;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.25rem;
-  border: 1px solid;
-}
-
-.radioSelected {
-  border-color: var(--booking-emerald-500, #10b981);
-  background: var(--booking-emerald-500, #10b981);
-}
-
-.radioDefault {
-  border-color: var(--booking-stone-300, #d6d3d1);
-}
-
-.left {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.policyContent {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.policyLabel {
-  font-weight: 500;
-  color: var(--booking-stone-900, #1c1917);
-}
-
-.refundTiersText {
-  font-size: 0.75rem;
-  color: var(--booking-stone-500, #78716c);
-  line-height: 1.3;
-}
-
-.refundTiersText b {
-  font-weight: 600;
-  color: var(--booking-stone-700, #44403c);
-}
-
-.fee {
-  font-size: 0.875rem;
-  white-space: nowrap;
-}
-
-.feeFree {
-  color: var(--booking-stone-500, #78716c);
-}
-
-.feePaid {
-  font-weight: 600;
-  color: var(--booking-stone-700, #44403c);
-}

package/src/components/booking/CancellationPolicySelector.tsx

@@ -1,142 +0,0 @@
-'use client';
-
-import { Check } from 'lucide-react';
-import { formatCurrencyAmount } from '@/lib/currency';
-import type { CancellationPolicyOption, RefundTierOption } from '@/lib/booking-api';
-import type { Currency } from './CurrencySwitcher';
-import styles from './CancellationPolicySelector.module.css';
-
-type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
-
-function formatRefundTiersSummary(tiers: RefundTierOption[], t: TranslationFn): string {
-  if (!tiers?.length) return '';
-  const sorted = [...tiers].sort((a, b) => b.hoursBefore - a.hoursBefore);
-  return sorted
-    .map((tier) => {
-      const timeStr =
-        tier.hoursBefore >= 24 && tier.hoursBefore % 24 === 0
-          ? t('booking.cancellationRefundTierDays', { percent: tier.refundPercent, days: tier.hoursBefore / 24 })
-          : t('booking.cancellationRefundTierHours', { percent: tier.refundPercent, hours: tier.hoursBefore });
-      return timeStr;
-    })
-    .join('; ');
-}
-
-function formatNoRefundsMessage(
-  changeWindowHoursBefore: number | null | undefined,
-  t: TranslationFn
-): string {
-  if (changeWindowHoursBefore != null && changeWindowHoursBefore >= 24 && changeWindowHoursBefore % 24 === 0) {
-    return t('booking.cancellationNoRefunds', { days: changeWindowHoursBefore / 24 });
-  }
-  return t('booking.cancellationNoRefundsNoDays');
-}
-
-interface CancellationPolicySelectorProps {
-  policies: CancellationPolicyOption[];
-  selectedPolicyId: string | null;
-  currency: Currency;
-  locale: string;
-  t: TranslationFn;
-  onPolicySelect: (policyId: string) => void;
-  /** When set by a promo, shown as a non-selectable row matching normal policy style. */
-  forcedPolicy?: {
-    id: string;
-    label: string;
-    refundTiers?: RefundTierOption[];
-    changeWindowHoursBefore?: number | null;
-  } | null;
-  /** Optional content rendered inside each policy row (e.g. deposit refundability for private shuttles) */
-  rowSubtitle?: React.ReactNode;
-}
-
-export function CancellationPolicySelector({
-  policies,
-  selectedPolicyId,
-  currency,
-  locale,
-  t,
-  onPolicySelect,
-  forcedPolicy,
-  rowSubtitle,
-}: CancellationPolicySelectorProps) {
-  return (
-    <div className={styles.wrapper}>
-      <div className={styles.label}>
-        {t('booking.cancellationPolicy')}
-      </div>
-      <div className={styles.list}>
-        {forcedPolicy && (
-          <div
-            className={`${styles.btn} ${styles.btnSelected} ${styles.btnForced}`}
-            aria-label={forcedPolicy.label}
-          >
-            <div className={styles.left}>
-              <span className={`${styles.radio} ${styles.radioSelected}`}>
-                <Check className="h-3 w-3 text-white" />
-              </span>
-              <div className={styles.policyContent}>
-                <span className={styles.policyLabel}>{forcedPolicy.label}</span>
-                <span
-                  className={styles.refundTiersText}
-                  dangerouslySetInnerHTML={{
-                    __html:
-                      formatRefundTiersSummary(forcedPolicy.refundTiers ?? [], t) ||
-                      formatNoRefundsMessage(forcedPolicy.changeWindowHoursBefore, t),
-                  }}
-                />
-                {rowSubtitle && (
-                  <span className={`${styles.refundTiersText} mt-1 block`}>
-                    {rowSubtitle}
-                  </span>
-                )}
-              </div>
-            </div>
-            <span className={`${styles.fee} ${styles.feeFree}`}>
-              {t('booking.included') ?? 'Included'}
-            </span>
-          </div>
-        )}
-        {!forcedPolicy && policies.map((policy) => {
-          const fee = policy.feeByCurrency[currency] ?? 0;
-          const isSelected = selectedPolicyId === policy.id;
-          const isFree = fee === 0;
-          const refundSummary =
-            formatRefundTiersSummary(policy.refundTiers ?? [], t) ||
-            formatNoRefundsMessage(policy.changeWindowHoursBefore, t);
-          return (
-            <button
-              key={policy.id}
-              type="button"
-              onClick={() => onPolicySelect(policy.id)}
-              className={`${styles.btn} ${isSelected ? styles.btnSelected : styles.btnDefault}`}
-            >
-              <div className={styles.left}>
-                <span className={`${styles.radio} ${isSelected ? styles.radioSelected : styles.radioDefault}`}>
-                  {isSelected && <Check className="h-3 w-3 text-white" />}
-                </span>
-                <div className={styles.policyContent}>
-                  <span className={styles.policyLabel}>{policy.label}</span>
-                  {refundSummary ? (
-                    <span
-                      className={styles.refundTiersText}
-                      dangerouslySetInnerHTML={{ __html: refundSummary }}
-                    />
-                  ) : null}
-                  {rowSubtitle && (
-                    <span className={`${styles.refundTiersText} mt-1 block`}>
-                      {rowSubtitle}
-                    </span>
-                  )}
-                </div>
-              </div>
-              <span className={`${styles.fee} ${isFree ? styles.feeFree : styles.feePaid}`}>
-                {isFree ? (t('booking.included') ?? 'Included') : `+${formatCurrencyAmount(fee, currency, locale as 'en' | 'fr')}`}
-              </span>
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}