@ticketboothapp/booking 1.2.24 → 1.2.25-rc.0

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

@@ -0,0 +1,124 @@
+/**
+ * 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

@@ -0,0 +1,142 @@
+'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>
+  );
+}