@ticketboothapp/booking 1.2.189 → 1.2.191

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

@@ -71,10 +71,11 @@
   --cal-soldout-selected-border: rgba(248, 113, 113, 0.5);
 
   /* Discount badge */
-  --cal-discount-bg: #fef2f2;
-  --cal-discount-text: #b91c1c;
-  --cal-discount-tag-bg: rgba(239, 68, 68, 0.9);
-  --cal-discount-tag-text: #fff;
+  --cal-discount-bg: #fff0e8;
+  --cal-discount-text: #a93600;
+  --cal-discount-tag-bg: #fff0e8;
+  --cal-discount-tag-text: #a93600;
+  --cal-discount-tag-border: var(--accent-orange, #ff4d00);
 
   /* Today marker */
   --cal-today-ring: var(--booking-orange-600, #ff4d00);
@@ -374,7 +375,12 @@
   transform: translateX(-50%);
 }
 
-.calendarGrid {
+/*
+ * Keep the frame more specific than the scoped booking preflight
+ * (`.booking-flow-preflight *`), which otherwise wins when its stylesheet is
+ * emitted later and resets the border width to zero on some mobile builds.
+ */
+.calendar .calendarGrid {
   border: 1px solid var(--cal-outer-border);
   border-radius: 0.5rem;
   overflow: hidden;
@@ -394,7 +400,7 @@
   border-bottom: 1px solid var(--cal-header-border);
 }
 
-.calendarHeaderCell {
+.calendar .calendarHeaderCell {
   padding: 0.25rem 0;
   text-align: center;
   font-size: 0.75rem;
@@ -404,7 +410,7 @@
   letter-spacing: 0.05em;
   border-right: 1px solid var(--cal-header-border);
 }
-.calendarHeaderCell:last-child {
+.calendar .calendarHeaderCell:last-child {
   border-right: none;
 }
 
@@ -505,6 +511,19 @@
   padding: 0.5rem 0.5rem 0.125rem;
 }
 
+/* Minimum-passenger tours need a second line below the departure time on mobile. */
+.calendarDayCell.calendarDayCellMobilePax {
+  min-height: 4.75rem;
+  padding-right: 0.125rem;
+  padding-left: 0.125rem;
+}
+
+/* Status badges need the cell width; the standard mobile gutters are sized for dot/time lists. */
+.calendarDayCell.calendarDayCellMobileStatus {
+  padding-right: 0.125rem;
+  padding-left: 0.125rem;
+}
+
 .calendarDayCell:disabled {
   cursor: not-allowed;
 }
@@ -586,19 +605,55 @@
   right: 0.25rem;
   display: flex;
   align-items: center;
-  gap: 0.125rem;
   background-color: var(--cal-discount-tag-bg);
   color: var(--cal-discount-tag-text);
+  border: 1px solid var(--cal-discount-tag-border);
+  box-shadow: 0 1px 3px rgba(255, 77, 0, 0.18);
   font-size: 9px;
-  font-weight: 700;
-  padding: 0.125rem 0.25rem;
+  font-weight: 800;
+  line-height: 1.1;
+  padding: 0.25rem 0.375rem;
   border-radius: 0.25rem;
+  white-space: nowrap;
+}
+
+.calendarDiscountOff {
+  margin-left: 0.1875rem;
 }
+
 /* Mobile: position discount below day number (top-left) so it doesn't overlap */
 .calendarDiscountTagMobile {
   top: 1rem;
   left: 0.25rem;
-  right: auto;
+  right: 0.25rem;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0.25rem;
+  font-size: 9px;
+  line-height: 1;
+  text-align: center;
+  white-space: normal;
+}
+
+.calendarDiscountTagMobile .calendarDiscountOff {
+  margin-left: 0;
+}
+
+@media (min-width: 640px) {
+  .calendarDiscountTag {
+    border-width: 1.5px;
+    font-size: 10px;
+  }
+}
+
+.calendarAvailabilityIndicators {
+  min-width: 0;
+}
+
+@media (min-width: 640px) {
+  .calendarAvailabilityIndicatorsWithDiscount {
+    padding-top: 1.625rem;
+  }
 }
 
 .calendarSoldOutBadge {
@@ -613,6 +668,14 @@
   color: var(--cal-soldout-text);
   border: 1px solid var(--cal-soldout-border);
 }
+
+@media (max-width: 639px) {
+  .calendarDayCellMobile .calendarSoldOutBadge,
+  .calendarDayCellMobileTall .calendarSoldOutBadge {
+    margin-top: 1rem;
+    margin-bottom: 0.25rem;
+  }
+}
 .calendarDayCellSelected .calendarSoldOutBadge {
   background-color: var(--cal-soldout-selected-bg);
   color: var(--cal-cell-selected-text);
@@ -636,6 +699,34 @@
   color: var(--cal-cell-selected-text);
 }
 
+@media (max-width: 639px) {
+  .calendarStatusPillMobile {
+    max-width: 100%;
+    min-width: 0;
+    margin-top: 1rem;
+    margin-bottom: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    border: 0;
+    background-color: var(--cal-time-available-bg);
+    color: var(--cal-time-available-text);
+    font-size: 9px;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: 0;
+    white-space: nowrap;
+  }
+
+  .calendarStatusPillMobileWithDiscount {
+    margin-top: 2.25rem;
+  }
+
+  .calendarDayCellSelected .calendarStatusPillMobile {
+    border-color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.18);
+    color: var(--cal-cell-selected-text);
+  }
+}
+
 .calendarTimePillLow {
   background-color: var(--cal-time-low-bg);
   color: var(--cal-time-low-text);
@@ -703,10 +794,12 @@
   align-items: center;
   gap: 0.0625rem;
   width: 100%;
+  margin-top: 1rem;
+  margin-bottom: 0.25rem;
 }
 /* Mobile: push time slots lower when discount tag is present */
 .calendarMobileTimeListWithDiscount {
-  margin-top: 1.25rem;
+  margin-top: 2.25rem;
 }
 
 .calendarMobileTimeDot {
@@ -719,14 +812,40 @@
   line-height: 1.2;
 }
 
+.calendarMobileTimeDotWithPax {
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  row-gap: 0.125rem;
+}
+
+.calendarMobileTimeRow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+}
+
+.calendarMobileTimeLabel {
+  min-width: 0;
+  white-space: nowrap;
+}
+
 .calendarMobilePaxProgress {
+  align-self: center;
   color: var(--booking-stone-600, #57534e);
-  font-size: 8px;
+  max-width: 100%;
+  font-size: 7px;
   font-weight: 700;
+  line-height: 1;
+  text-align: center;
   white-space: nowrap;
 }
 .calendarMobilePaxProgressReached {
   color: #047857;
+  max-width: 2.75rem;
+  line-height: 1.05;
+  white-space: normal;
 }
 .calendarMobilePaxProgressReached::before {
   content: "✓ ";

package/src/components/booking/Calendar.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useMemo, useRef, useEffect, useCallback, memo } from 'react';
 import { createPortal } from 'react-dom';
-import { startOfWeek, addDays, addWeeks, subWeeks, isSameDay, parseISO, startOfMonth, endOfMonth, eachDayOfInterval, addMonths, subMonths } from 'date-fns';
+import { addDays, addWeeks, subWeeks, isSameDay, parseISO, startOfMonth, endOfMonth, addMonths, subMonths } from 'date-fns';
 import { formatInTimeZone, fromZonedTime } from 'date-fns-tz';
 import { enUS, fr } from 'date-fns/locale';
 import type { Availability } from '../../lib/booking-api';
@@ -205,6 +205,7 @@ const DateCell = memo(function DateCell({
   const { locale } = useLocale();
   const dateFnsLocale = dateFnsLocales[locale] || enUS;
   const dayNumber = formatInTimeZone(date, timezone, 'd');
+  const fullDateLabel = formatInTimeZone(date, timezone, 'EEEE, MMMM d, yyyy', { locale: dateFnsLocale });
   const allowPinnedSoldOutDate = Boolean(selectableSoldOutDate && selectableSoldOutDate === dateStr);
   const hasAvailabilityData = availability !== null;
   // When showCapacity (admin), allow selecting sold-out slots for overbooking.
@@ -233,12 +234,16 @@ const DateCell = memo(function DateCell({
   // Admin capacity line under each time pill needs extra vertical room (provider dashboard only).
   const slotCount = availability?.startTimes?.length ?? 0;
   const needsTallerCell = !isMobile && slotCount > 2;
-  const mobileNeedsTaller = isMobile && slotCount > 2;
+  const hasMobilePaxProgress =
+    isMobile && Boolean(availability?.timeBookingProgress && Object.keys(availability.timeBookingProgress).length > 0);
+  const mobileNeedsTaller = isMobile && (slotCount > 2 || hasMobilePaxProgress);
   const adminCapacityTallCells =
     Boolean(showCapacity) && !isMobile && displayMode === 'times';
   const buttonClassName = useMemo(() => cn(
     styles.calendarDayCell,
     isMobile && (mobileNeedsTaller ? styles.calendarDayCellMobileTall : styles.calendarDayCellMobile),
+    hasMobilePaxProgress && styles.calendarDayCellMobilePax,
+    isMobile && displayMode === 'status' && styles.calendarDayCellMobileStatus,
     !isMobile && (
       adminCapacityTallCells
         ? needsTallerCell
@@ -256,16 +261,17 @@ const DateCell = memo(function DateCell({
       ? styles.calendarDayCellSelected
       : styles.calendarDayCellAvailable,
     isToday && !isPast && !isSelected && styles.calendarDayCellToday
-  ), [isPast, isDisabled, isSelected, isToday, needsTallerCell, isMobile, mobileNeedsTaller, adminCapacityTallCells]);
+  ), [isPast, isDisabled, isSelected, isToday, needsTallerCell, isMobile, mobileNeedsTaller, hasMobilePaxProgress, adminCapacityTallCells, displayMode]);
 
   const ariaLabel = useMemo(() => {
-    const parts = [dayNumber];
+    const parts = [fullDateLabel];
     if (isPast) parts.push(' - Past date');
     if (availability?.isSoldOut) parts.push(' - Sold out');
+    else if (availability) parts.push(` - ${t('calendar.available')}`);
     const pct = availability?.totalDiscountPercent;
     if (pct != null && pct > 0) parts.push(` - ${pct}% off`);
     return parts.join('');
-  }, [dayNumber, isPast, availability?.isSoldOut, availability?.totalDiscountPercent]);
+  }, [fullDateLabel, isPast, availability, t]);
 
   return (
     <button
@@ -273,6 +279,7 @@ const DateCell = memo(function DateCell({
       disabled={isDisabled}
       className={buttonClassName}
       aria-label={ariaLabel}
+      aria-pressed={isSelected}
     >
       <div className={cn(styles.calendarDayCellInner, isMobile && styles.calendarDayCellInnerMobile)}>
         {/* Day Number - on mobile, in a top row with discount below to avoid overlap */}
@@ -281,12 +288,10 @@ const DateCell = memo(function DateCell({
         </div>
 
         {/* Discount Tag - top-right on desktop; below day number on mobile to avoid overlap */}
-        {availability?.totalDiscountPercent && availability.totalDiscountPercent > 0 && (
+        {availability?.totalDiscountPercent && availability.totalDiscountPercent > 0 && !availability.isSoldOut && (
           <div className={cn(styles.calendarDiscountTag, isMobile && styles.calendarDiscountTagMobile)}>
-            <svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 20 20">
-              <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
-            </svg>
-            <span>-{availability.totalDiscountPercent}%</span>
+            <span>{availability.totalDiscountPercent}%</span>
+            <span className={styles.calendarDiscountOff}>OFF</span>
           </div>
         )}
 
@@ -294,7 +299,14 @@ const DateCell = memo(function DateCell({
         {availability && (
           <div
             className={cn(
-              'flex flex-col items-center space-y-0 w-full px-0.5',
+              styles.calendarAvailabilityIndicators,
+              !isMobile &&
+                availability.totalDiscountPercent != null &&
+                availability.totalDiscountPercent > 0 &&
+                !availability.isSoldOut &&
+                styles.calendarAvailabilityIndicatorsWithDiscount,
+              'flex flex-col items-center space-y-0 w-full',
+              isMobile && displayMode === 'status' ? 'px-0' : 'px-0.5',
               isMobile ? 'justify-start' : 'justify-end'
             )}
           >
@@ -307,8 +319,15 @@ const DateCell = memo(function DateCell({
               <>
                 {/* Mobile: green dot + time (compact). Desktop: full time pills */}
                 {displayMode === 'status' ? (
-                  <div className={styles.calendarTimePill}>
-                    {t('calendar.available')}
+                  <div className={cn(
+                    styles.calendarTimePill,
+                    isMobile && styles.calendarStatusPillMobile,
+                    isMobile &&
+                      availability.totalDiscountPercent != null &&
+                      availability.totalDiscountPercent > 0 &&
+                      styles.calendarStatusPillMobileWithDiscount
+                  )}>
+                    {isMobile ? t('calendar.open') : t('calendar.available')}
                   </div>
                 ) : availability.startTimes && availability.startTimes.length > 0 ? (
                   isMobile ? (
@@ -333,13 +352,18 @@ const DateCell = memo(function DateCell({
                             key={time}
                             className={cn(
                               styles.calendarMobileTimeDot,
+                              paxProgress && !isTimeSoldOut && !isLowAvailability && styles.calendarMobileTimeDotWithPax,
                               isTimeSoldOut && styles.calendarMobileTimeDotSoldOut,
                               isLowAvailability && !isTimeSoldOut && styles.calendarMobileTimeDotLow,
                               showMinimumReached && !isTimeSoldOut && styles.calendarMobileTimeDotMinimumReached
                             )}
                           >
-                            <span className={styles.calendarMobileTimeDotBullet} aria-hidden />
-                            <span>{isDailyAvailability ? t('calendar.available') : formatTime(time)}</span>
+                            <span className={styles.calendarMobileTimeRow}>
+                              <span className={styles.calendarMobileTimeDotBullet} aria-hidden />
+                              <span className={styles.calendarMobileTimeLabel}>
+                                {isDailyAvailability ? t('calendar.available') : formatTime(time)}
+                              </span>
+                            </span>
                             {paxProgress && !isTimeSoldOut && !isLowAvailability && (
                               <span
                                 className={cn(
@@ -348,7 +372,7 @@ const DateCell = memo(function DateCell({
                                 )}
                               >
                                 {showMinimumReached
-                                  ? t('calendar.minimumReached')
+                                  ? t('calendar.minimumReachedShort')
                                   : t('calendar.paxProgress', {
                                       booked: paxProgress.booked,
                                       minimum: paxProgress.minimum,
@@ -360,8 +384,10 @@ const DateCell = memo(function DateCell({
                       })}
                       {availability.startTimes.length > 3 && (
                         <div className={styles.calendarMobileTimeDot}>
-                          <span className={styles.calendarMobileTimeDotBullet} aria-hidden />
-                          <span>+{availability.startTimes.length - 3}</span>
+                          <span className={styles.calendarMobileTimeRow}>
+                            <span className={styles.calendarMobileTimeDotBullet} aria-hidden />
+                            <span>+{availability.startTimes.length - 3}</span>
+                          </span>
                         </div>
                       )}
                     </div>
@@ -696,7 +722,7 @@ export function Calendar({
     const lastAvailableDate = availableDates[availableDates.length - 1];
     const currentEndDate = addDays(currentStartDate, WEEKS_TO_SHOW * 7 - 1);
     return lastAvailableDate > currentEndDate;
-  }, [availableDates, currentStartDate]);
+  }, [availableDates, currentStartDate, WEEKS_TO_SHOW]);
 
   const lastReportedRangeRef = useRef<{ start: Date; end: Date } | null>(null);
   const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -758,7 +784,7 @@ export function Calendar({
       days.push(addDays(currentStartDate, i));
     }
     return days;
-  }, [currentStartDate]);
+  }, [currentStartDate, WEEKS_TO_SHOW]);
 
   // Notify parent of visible date range changes (with buffer weeks before/after)
   // When dropdown is open, expand range to include the visible month so we fetch availability for it

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

@@ -30,10 +30,11 @@
 
 .btn {
   width: 100%;
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto auto;
   align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
+  column-gap: 0.75rem;
   padding: 1rem 1.25rem;
   border-radius: 0.5rem;
   border: 2px solid;
@@ -85,12 +86,20 @@
   display: flex;
   align-items: center;
   gap: 0.75rem;
+  min-width: 0;
+  grid-column: 1;
+  grid-row: 1;
 }
 
-.policyContent {
+.policyDetails {
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
+  grid-column: 1;
+  grid-row: 2;
+  min-width: 0;
+  margin-top: 0.125rem;
+  margin-left: 2rem;
 }
 
 .policyLabel {
@@ -110,10 +119,30 @@
 }
 
 .fee {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  align-self: center;
   font-size: 0.875rem;
   white-space: nowrap;
 }
 
+.rowSubtitle {
+  display: block;
+  margin-top: 0.25rem;
+}
+
+@media (max-width: 639px) {
+  .policyDetails {
+    grid-column: 1 / -1;
+    margin-left: 0;
+    margin-top: 0.375rem;
+  }
+
+  .fee {
+    grid-row: 1;
+  }
+}
+
 .feeFree {
   color: var(--booking-stone-500, #78716c);
 }

package/src/components/booking/CancellationPolicySelector.tsx

@@ -81,26 +81,26 @@ export function CancellationPolicySelector({
               <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>
+              <span className={styles.policyLabel}>{forcedPolicy.label}</span>
             </div>
-              <span className={`${styles.fee} ${styles.feeFree}`}>
+            <span className={`${styles.fee} ${styles.feeFree}`}>
               {t('booking.included') ?? 'Included'}
             </span>
+            <div className={styles.policyDetails}>
+              <span
+                className={styles.refundTiersText}
+                dangerouslySetInnerHTML={{
+                  __html:
+                    formatRefundTiersSummary(forcedPolicy.refundTiers ?? [], t) ||
+                    formatNoRefundsMessage(forcedPolicy.changeWindowHoursBefore, t),
+                }}
+              />
+              {rowSubtitle && (
+                <span className={`${styles.refundTiersText} ${styles.rowSubtitle}`}>
+                  {rowSubtitle}
+                </span>
+              )}
+            </div>
           </div>
         )}
         {!forcedPolicy && policies.map((policy) => {
@@ -121,8 +121,17 @@ export function CancellationPolicySelector({
                 <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>
+                <span className={styles.policyLabel}>{policy.label}</span>
+              </div>
+              <span className={`${styles.fee} ${isFree ? styles.feeFree : styles.feePaid}`}>
+                {suppressFees
+                  ? '—'
+                  : isFree
+                    ? (t('booking.included') ?? 'Included')
+                    : `+${formatCurrencyAmount(fee, currency, locale as 'en' | 'fr')}`}
+              </span>
+              {(refundSummary || rowSubtitle) && (
+                <div className={styles.policyDetails}>
                   {refundSummary ? (
                     <span
                       className={styles.refundTiersText}
@@ -130,19 +139,12 @@ export function CancellationPolicySelector({
                     />
                   ) : null}
                   {rowSubtitle && (
-                    <span className={`${styles.refundTiersText} mt-1 block`}>
+                    <span className={`${styles.refundTiersText} ${styles.rowSubtitle}`}>
                       {rowSubtitle}
                     </span>
                   )}
                 </div>
-              </div>
-              <span className={`${styles.fee} ${isFree ? styles.feeFree : styles.feePaid}`}>
-                {suppressFees
-                  ? '—'
-                  : isFree
-                    ? (t('booking.included') ?? 'Included')
-                    : `+${formatCurrencyAmount(fee, currency, locale as 'en' | 'fr')}`}
-              </span>
+              )}
             </button>
           );
         })}