@licklist/design 0.78.5-dev.91 → 0.78.5-dev.93

package/src/v2/shadcn/_reference/products/AvailabilitySection.tsx

@@ -0,0 +1,677 @@
+import React, { useEffect, useState } from 'react';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
+import { Switch } from '../ui/switch';
+import { IconPlus, IconCross } from '../../../icons';
+import { supabase } from '@/integrations/supabase/client';
+
+interface OpeningHours {
+  day_of_week: number;
+  is_open: boolean;
+  open_time: string;
+  close_time: string;
+}
+
+// Database uses 0 = Sunday, 1 = Monday, etc. (JavaScript Date.getDay() convention)
+const DAYS_OF_WEEK = [
+  { value: 1, label: 'Monday', short: 'Mon' },
+  { value: 2, label: 'Tuesday', short: 'Tue' },
+  { value: 3, label: 'Wednesday', short: 'Wed' },
+  { value: 4, label: 'Thursday', short: 'Thu' },
+  { value: 5, label: 'Friday', short: 'Fri' },
+  { value: 6, label: 'Saturday', short: 'Sat' },
+  { value: 0, label: 'Sunday', short: 'Sun' },
+];
+
+const INCREMENT_OPTIONS = [
+  { value: 5, label: '5 min' },
+  { value: 10, label: '10 min' },
+  { value: 15, label: '15 min' },
+  { value: 20, label: '20 min' },
+  { value: 30, label: '30 min' },
+  { value: 45, label: '45 min' },
+  { value: 60, label: '1 hour' },
+];
+
+// Default opening time if no provider opening hours available
+const DEFAULT_OPENING_TIME = '09:00';
+
+export interface DayAvailability {
+  enabled: boolean;
+  times: string[]; // For fixed sessions
+}
+
+export interface AvailabilityData {
+  availability_type: 'fixed_sessions' | 'incremental' | '';
+  is_daily_availability: boolean;
+  increment_minutes: number;
+  // For daily mode (same times every day)
+  daily_times: string[];
+  // For per-day mode
+  day_availability: Record<number, DayAvailability>;
+}
+
+interface AvailabilitySectionProps {
+  values: Record<string, any>;
+  onChange: (field: string, value: any) => void;
+  providerId?: string;
+}
+
+// Helper function to convert time string to minutes from midnight
+const timeToMinutes = (time: string): number => {
+  const [hours, minutes] = time.split(':').map(Number);
+  return hours * 60 + minutes;
+};
+
+// Helper function to add minutes to a time string (HH:MM format)
+const addMinutesToTime = (time: string, minutesToAdd: number): string => {
+  const [hours, minutes] = time.split(':').map(Number);
+  const totalMinutes = hours * 60 + minutes + minutesToAdd;
+  const newHours = Math.floor(totalMinutes / 60) % 24;
+  const newMinutes = totalMinutes % 60;
+  return `${String(newHours).padStart(2, '0')}:${String(newMinutes).padStart(2, '0')}`;
+};
+
+// Get duration in minutes from timing fields
+const getDurationMinutes = (values: Record<string, any>): number => {
+  // Prefer persisted duration (minutes) when available
+  if (typeof values.duration === 'number' && Number.isFinite(values.duration) && values.duration > 0) {
+    return values.duration;
+  }
+
+  const timingType = values.timing_type;
+
+  if (timingType === 'session_based') {
+    const hours = values.session_duration_hours || 0;
+    const minutes = values.session_duration_minutes || 0;
+    return hours * 60 + minutes;
+  } else if (timingType === 'timed_per_person') {
+    const hours = values.time_per_person_hours || 0;
+    const minutes = values.time_per_person_minutes || 0;
+    return hours * 60 + minutes;
+  }
+
+  // Default to 1 hour if no duration set
+  return 60;
+};
+
+// Format duration for display
+const formatDuration = (minutes: number): string => {
+  if (minutes < 60) {
+    return `${minutes} min`;
+  }
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  if (mins === 0) {
+    return `${hours} hour${hours > 1 ? 's' : ''}`;
+  }
+  return `${hours}h ${mins}m`;
+};
+
+// Format time for display (remove seconds if present)
+const formatTimeForDisplay = (time: string): string => {
+  if (!time) return DEFAULT_OPENING_TIME;
+  // Handle HH:MM:SS format from database
+  return time.substring(0, 5);
+};
+
+const AvailabilitySection: React.FC<AvailabilitySectionProps> = ({
+  values,
+  onChange,
+  providerId,
+}) => {
+  const [openingHours, setOpeningHours] = useState<OpeningHours[]>([]);
+  const [loadingHours, setLoadingHours] = useState(false);
+
+  // Fetch provider opening hours
+  useEffect(() => {
+    const fetchOpeningHours = async () => {
+      if (!providerId) return;
+      
+      setLoadingHours(true);
+      try {
+        const { data, error } = await supabase
+          .from('provider_opening_hours')
+          .select('day_of_week, is_open, open_time, close_time')
+          .eq('provider_id', providerId)
+          .order('day_of_week');
+        
+        if (error) {
+          console.error('Error fetching opening hours:', error);
+        } else if (data) {
+          setOpeningHours(data);
+        }
+      } catch (err) {
+        console.error('Error fetching opening hours:', err);
+      } finally {
+        setLoadingHours(false);
+      }
+    };
+
+    fetchOpeningHours();
+  }, [providerId]);
+
+  // Get opening hours for a specific day
+  const getOpeningHoursForDay = (dayValue: number): OpeningHours | undefined => {
+    return openingHours.find(h => h.day_of_week === dayValue);
+  };
+
+  // Check if venue is open on a specific day
+  const isVenueOpenOnDay = (dayValue: number): boolean => {
+    const hours = getOpeningHoursForDay(dayValue);
+    // If no hours data, assume open (fallback)
+    if (!hours) return true;
+    return hours.is_open;
+  };
+
+  // Get default first session time for a day (venue opening time)
+  const getDefaultOpeningTimeForDay = (dayValue: number): string => {
+    const hours = getOpeningHoursForDay(dayValue);
+    if (hours?.open_time) {
+      return formatTimeForDisplay(hours.open_time);
+    }
+    return DEFAULT_OPENING_TIME;
+  };
+
+  // Get earliest opening time across all open days (for daily mode)
+  const getEarliestOpeningTime = (): string => {
+    const openDays = openingHours.filter(h => h.is_open);
+    if (openDays.length === 0) return DEFAULT_OPENING_TIME;
+    
+    const times = openDays.map(h => formatTimeForDisplay(h.open_time));
+    return times.sort()[0] || DEFAULT_OPENING_TIME;
+  };
+
+  // Get latest closing time across all open days (for daily mode validation)
+  const getLatestClosingTime = (): string | null => {
+    const openDays = openingHours.filter(h => h.is_open);
+    if (openDays.length === 0) return null;
+    
+    const times = openDays.map(h => formatTimeForDisplay(h.close_time));
+    // Sort descending to get latest
+    return times.sort().reverse()[0] || null;
+  };
+
+  // Check if a session exceeds closing time for daily mode - returns affected days info
+  const getSessionIssuesDaily = (startTime: string): { 
+    exceedsClosing: boolean; 
+    startsAfterClose: boolean;
+    beforeOpening: boolean;
+    affectedDays: { day: string; issue: 'before_open' | 'after_close' | 'starts_after_close'; time: string }[];
+  } => {
+    const startMinutes = timeToMinutes(startTime);
+    const sessionEndTime = addMinutesToTime(startTime, durationMinutes);
+    const sessionEndMinutes = timeToMinutes(sessionEndTime);
+    
+    const affectedDays: { day: string; issue: 'before_open' | 'after_close' | 'starts_after_close'; time: string }[] = [];
+    
+    // Check each open day
+    const openDays = openingHours.filter(h => h.is_open);
+    
+    for (const hours of openDays) {
+      const dayInfo = DAYS_OF_WEEK.find(d => d.value === hours.day_of_week);
+      if (!dayInfo) continue;
+      
+      const openTime = formatTimeForDisplay(hours.open_time);
+      const closeTime = formatTimeForDisplay(hours.close_time);
+      const openMinutes = timeToMinutes(openTime);
+      const closeMinutes = timeToMinutes(closeTime);
+      
+      // Check if session starts before opening
+      if (startMinutes < openMinutes) {
+        affectedDays.push({ day: dayInfo.short, issue: 'before_open', time: openTime });
+      }
+      
+      // Check if session starts after closing (completely outside hours)
+      if (startMinutes >= closeMinutes) {
+        affectedDays.push({ day: dayInfo.short, issue: 'starts_after_close', time: closeTime });
+      }
+      // Check if session ends after closing (but starts within hours)
+      else if (sessionEndMinutes > closeMinutes && !(sessionEndMinutes < startMinutes)) {
+        affectedDays.push({ day: dayInfo.short, issue: 'after_close', time: closeTime });
+      }
+    }
+    
+    const beforeOpeningDays = affectedDays.filter(d => d.issue === 'before_open');
+    const startsAfterCloseDays = affectedDays.filter(d => d.issue === 'starts_after_close');
+    const exceedsClosingDays = affectedDays.filter(d => d.issue === 'after_close');
+    
+    return {
+      exceedsClosing: exceedsClosingDays.length > 0,
+      startsAfterClose: startsAfterCloseDays.length > 0,
+      beforeOpening: beforeOpeningDays.length > 0,
+      affectedDays
+    };
+  };
+
+  // Check if a session exceeds closing time for a specific day
+  const getSessionIssuesForDay = (startTime: string, dayValue: number): {
+    exceedsClosing: boolean;
+    startsAfterClose: boolean;
+    beforeOpening: boolean;
+    openTime: string;
+    closeTime: string;
+  } => {
+    const hours = getOpeningHoursForDay(dayValue);
+    if (!hours || !hours.is_open) {
+      return { exceedsClosing: false, startsAfterClose: false, beforeOpening: false, openTime: '', closeTime: '' };
+    }
+    
+    const openTime = formatTimeForDisplay(hours.open_time);
+    const closeTime = formatTimeForDisplay(hours.close_time);
+    const startMinutes = timeToMinutes(startTime);
+    const openMinutes = timeToMinutes(openTime);
+    const closeMinutes = timeToMinutes(closeTime);
+    
+    const sessionEndTime = addMinutesToTime(startTime, durationMinutes);
+    const sessionEndMinutes = timeToMinutes(sessionEndTime);
+    
+    // Session starts before opening
+    const beforeOpening = startMinutes < openMinutes;
+    
+    // Session starts after closing (completely outside hours)
+    const startsAfterClose = startMinutes >= closeMinutes;
+    
+    // Session ends after closing (but starts within hours) - handle overnight
+    const exceedsClosing = !startsAfterClose && sessionEndMinutes > closeMinutes && !(sessionEndMinutes < startMinutes);
+    
+    return { exceedsClosing, startsAfterClose, beforeOpening, openTime, closeTime };
+  };
+
+
+  const availabilityType = values.availability_type || '';
+  const isDaily = values.is_daily_availability !== false; // Default to true
+  const incrementMinutes = values.increment_minutes || 15;
+  const dailyTimes: string[] = values.daily_times || [];
+  const dayAvailability: Record<number, DayAvailability> = values.day_availability || 
+    DAYS_OF_WEEK.reduce((acc, day) => ({
+      ...acc,
+      [day.value]: { enabled: isVenueOpenOnDay(day.value), times: [] }
+    }), {});
+
+  // Get duration from timing settings
+  const durationMinutes = getDurationMinutes(values);
+
+  const handleAvailabilityTypeChange = (type: string) => {
+    onChange('availability_type', type);
+  };
+
+  const handleDailyToggle = (checked: boolean) => {
+    onChange('is_daily_availability', checked);
+    
+    // When switching to per-day mode, initialize day availability based on opening hours
+    if (!checked) {
+      const initialDayAvailability = DAYS_OF_WEEK.reduce((acc, day) => ({
+        ...acc,
+        [day.value]: { 
+          enabled: isVenueOpenOnDay(day.value), 
+          times: [] 
+        }
+      }), {});
+      onChange('day_availability', initialDayAvailability);
+    }
+  };
+
+  const handleIncrementChange = (value: number) => {
+    onChange('increment_minutes', value);
+  };
+
+  // Calculate next session time based on last time + duration
+  const getNextSessionTime = (existingTimes: string[], dayValue?: number): string => {
+    if (existingTimes.length === 0) {
+      // First session defaults to opening time
+      if (dayValue !== undefined) {
+        return getDefaultOpeningTimeForDay(dayValue);
+      }
+      return getEarliestOpeningTime();
+    }
+    
+    // Get the last time and add duration
+    const lastTime = existingTimes[existingTimes.length - 1];
+    return addMinutesToTime(lastTime, durationMinutes);
+  };
+
+  // Daily times management
+  const addDailyTime = () => {
+    const nextTime = getNextSessionTime(dailyTimes);
+    const newTimes = [...dailyTimes, nextTime];
+    onChange('daily_times', newTimes);
+  };
+
+  const updateDailyTime = (index: number, time: string) => {
+    const newTimes = [...dailyTimes];
+    newTimes[index] = time;
+    onChange('daily_times', newTimes);
+  };
+
+  const removeDailyTime = (index: number) => {
+    const newTimes = dailyTimes.filter((_, i) => i !== index);
+    onChange('daily_times', newTimes);
+  };
+
+  // Per-day times management
+  const toggleDayEnabled = (dayValue: number) => {
+    // Prevent enabling if venue is closed
+    if (!isVenueOpenOnDay(dayValue) && !dayAvailability[dayValue]?.enabled) {
+      return;
+    }
+    
+    const newDayAvailability = {
+      ...dayAvailability,
+      [dayValue]: {
+        ...dayAvailability[dayValue],
+        enabled: !dayAvailability[dayValue]?.enabled
+      }
+    };
+    onChange('day_availability', newDayAvailability);
+  };
+
+  const addDayTime = (dayValue: number) => {
+    const currentTimes = dayAvailability[dayValue]?.times || [];
+    const nextTime = getNextSessionTime(currentTimes, dayValue);
+    const newDayAvailability = {
+      ...dayAvailability,
+      [dayValue]: {
+        ...dayAvailability[dayValue],
+        times: [...currentTimes, nextTime]
+      }
+    };
+    onChange('day_availability', newDayAvailability);
+  };
+
+  const updateDayTime = (dayValue: number, index: number, time: string) => {
+    const currentTimes = dayAvailability[dayValue]?.times || [];
+    const newTimes = [...currentTimes];
+    newTimes[index] = time;
+    const newDayAvailability = {
+      ...dayAvailability,
+      [dayValue]: {
+        ...dayAvailability[dayValue],
+        times: newTimes
+      }
+    };
+    onChange('day_availability', newDayAvailability);
+  };
+
+  const removeDayTime = (dayValue: number, index: number) => {
+    const currentTimes = dayAvailability[dayValue]?.times || [];
+    const newDayAvailability = {
+      ...dayAvailability,
+      [dayValue]: {
+        ...dayAvailability[dayValue],
+        times: currentTimes.filter((_, i) => i !== index)
+      }
+    };
+    onChange('day_availability', newDayAvailability);
+  };
+
+  return (
+    <div className="flex flex-col gap-4 pt-4 border-t border-border-primary">
+      <h2 className="text-label-primary text-xl font-semibold">Availability</h2>
+      
+      {/* Availability Type Selection */}
+      <RadioGroup 
+        value={availabilityType} 
+        onValueChange={handleAvailabilityTypeChange}
+        className="flex gap-4"
+      >
+        <label className={`flex items-center gap-2 px-4 py-2 rounded-lg border cursor-pointer transition-colors ${
+          availabilityType === 'fixed_sessions' 
+            ? 'border-border-selected bg-surface-action-soft' 
+            : 'border-border-primary hover:border-border-hover'
+        }`}>
+          <RadioGroupItem value="fixed_sessions" id="avail-fixed" />
+          <span className="text-label-primary">Fixed Sessions</span>
+        </label>
+        <label className={`flex items-center gap-2 px-4 py-2 rounded-lg border cursor-pointer transition-colors ${
+          availabilityType === 'incremental' 
+            ? 'border-border-selected bg-surface-action-soft' 
+            : 'border-border-primary hover:border-border-hover'
+        }`}>
+          <RadioGroupItem value="incremental" id="avail-incremental" />
+          <span className="text-label-primary">Incremental</span>
+        </label>
+      </RadioGroup>
+
+      {/* Show options only when a type is selected */}
+      {availabilityType && (
+        <>
+          {/* Daily Toggle */}
+          <div className="flex items-center justify-between py-2">
+            <div className="flex flex-col">
+              <Label className="text-label-primary">Same times every day</Label>
+              <span className="text-label-tertiary text-sm">
+                {isDaily ? 'Times apply to all open days' : 'Configure times per day'}
+              </span>
+            </div>
+            <Switch
+              checked={isDaily}
+              onCheckedChange={handleDailyToggle}
+            />
+          </div>
+
+          {/* Incremental: Show increment selector */}
+          {availabilityType === 'incremental' && (
+            <div className="flex flex-col gap-2">
+              <Label>Time Increment</Label>
+              <div className="flex flex-wrap gap-2">
+                {INCREMENT_OPTIONS.map((option) => (
+                  <button
+                    key={option.value}
+                    type="button"
+                    onClick={() => handleIncrementChange(option.value)}
+                    className={`px-3 py-1.5 rounded-md text-sm transition-colors ${
+                      incrementMinutes === option.value
+                        ? 'bg-surface-action-soft border border-border-selected text-label-primary'
+                        : 'bg-surface-secondary border border-border-primary text-label-secondary hover:border-border-hover'
+                    }`}
+                  >
+                    {option.label}
+                  </button>
+                ))}
+              </div>
+              <p className="text-label-tertiary text-sm mt-1">
+                Customers can book every {incrementMinutes} minutes during available hours
+              </p>
+            </div>
+          )}
+
+          {/* Fixed Sessions: Show time inputs */}
+          {availabilityType === 'fixed_sessions' && isDaily && (
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center justify-between">
+                <Label>Session Times</Label>
+                {durationMinutes > 0 && (
+                  <span className="text-label-tertiary text-sm">
+                    Session duration: {formatDuration(durationMinutes)}
+                  </span>
+                )}
+              </div>
+              <div className="flex flex-col gap-2">
+                {dailyTimes.map((time, index) => {
+                  const issues = getSessionIssuesDaily(time);
+                  const hasWarning = issues.exceedsClosing || issues.startsAfterClose || issues.beforeOpening;
+                  
+                  // Group affected days by issue type
+                  const beforeOpenDays = issues.affectedDays.filter(d => d.issue === 'before_open');
+                  const startsAfterCloseDays = issues.affectedDays.filter(d => d.issue === 'starts_after_close');
+                  const endsAfterCloseDays = issues.affectedDays.filter(d => d.issue === 'after_close');
+                  
+                  return (
+                    <div key={index} className="flex flex-col gap-1">
+                      <div className="flex items-center gap-2">
+                        <Input
+                          type="time"
+                          value={time}
+                          onChange={(e) => updateDailyTime(index, e.target.value)}
+                          className={`w-32 ${hasWarning ? 'border-border-status-error' : ''}`}
+                        />
+                        <span className={`text-sm ${hasWarning ? 'text-label-status-error' : 'text-label-tertiary'}`}>
+                          → ends {addMinutesToTime(time, durationMinutes)}
+                        </span>
+                        <button
+                          type="button"
+                          onClick={() => removeDailyTime(index)}
+                          className="p-1.5 text-label-tertiary hover:text-label-danger transition-colors ml-auto"
+                        >
+                          <IconCross className="w-4 h-4 fill-current" />
+                        </button>
+                      </div>
+                      {hasWarning && (
+                        <div className="bg-surface-status-error border border-border-status-error rounded-md px-2 py-1.5 mt-1">
+                          {startsAfterCloseDays.length > 0 && (
+                            <span className="text-label-status-error text-xs block">
+                              ⚠ Session starts after venue closes
+                            </span>
+                          )}
+                          {endsAfterCloseDays.length > 0 && (
+                            <span className="text-label-status-error text-xs block">
+                              ⚠ Session ends after venue closes
+                            </span>
+                          )}
+                          {beforeOpenDays.length > 0 && (
+                            <span className="text-label-status-error text-xs block">
+                              ⚠ Session starts before venue opens
+                            </span>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={addDailyTime}
+                  className="w-fit"
+                  withIcon
+                >
+                  <IconPlus className="w-4 h-4 fill-fill-secondary" />
+                  Add Session
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* Per-day configuration */}
+          {!isDaily && (
+            <div className="flex flex-col gap-4">
+              {durationMinutes > 0 && availabilityType === 'fixed_sessions' && (
+                <p className="text-label-tertiary text-sm">
+                  Session duration: {formatDuration(durationMinutes)}
+                </p>
+              )}
+              {DAYS_OF_WEEK.map((day) => {
+                const dayData = dayAvailability[day.value] || { enabled: true, times: [] };
+                const venueOpen = isVenueOpenOnDay(day.value);
+                const hours = getOpeningHoursForDay(day.value);
+                
+                return (
+                  <div 
+                    key={day.value} 
+                    className={`flex flex-col gap-2 p-3 rounded-lg ${
+                      venueOpen ? 'bg-surface-secondary' : 'bg-surface-tertiary opacity-60'
+                    }`}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <Switch
+                          checked={dayData.enabled && venueOpen}
+                          onCheckedChange={() => toggleDayEnabled(day.value)}
+                          disabled={!venueOpen}
+                        />
+                        <div className="flex flex-col">
+                          <span className={`text-sm font-medium ${
+                            dayData.enabled && venueOpen ? 'text-label-primary' : 'text-label-tertiary'
+                          }`}>
+                            {day.label}
+                          </span>
+                          {!venueOpen && (
+                            <span className="text-xs text-label-tertiary">Venue closed</span>
+                          )}
+                          {venueOpen && hours && (
+                            <span className="text-xs text-label-tertiary">
+                              Open {formatTimeForDisplay(hours.open_time)} - {formatTimeForDisplay(hours.close_time)}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    
+                    {dayData.enabled && venueOpen && availabilityType === 'fixed_sessions' && (
+                      <div className="flex flex-col gap-2 pl-10">
+                        <div className="flex flex-wrap items-center gap-2">
+                          {dayData.times.map((time, index) => {
+                            const issues = getSessionIssuesForDay(time, day.value);
+                            const hasWarning = issues.exceedsClosing || issues.startsAfterClose || issues.beforeOpening;
+                            
+                            // Build appropriate warning message
+                            let warningText = '';
+                            if (issues.startsAfterClose) {
+                              warningText = '⚠ Starts after close';
+                            } else if (issues.exceedsClosing) {
+                              warningText = '⚠ Ends after close';
+                            } else if (issues.beforeOpening) {
+                              warningText = '⚠ Starts before open';
+                            }
+                            
+                            return (
+                              <div key={index} className="flex flex-col gap-0.5">
+                                <div className={`flex items-center gap-1 rounded px-2 py-1 ${
+                                  hasWarning ? 'bg-surface-status-error/20 border border-border-status-error' : 'bg-surface-primary'
+                                }`}>
+                                  <Input
+                                    type="time"
+                                    value={time}
+                                    onChange={(e) => updateDayTime(day.value, index, e.target.value)}
+                                    className="w-28 h-7 text-sm border-0 bg-transparent p-0"
+                                  />
+                                  <button
+                                    type="button"
+                                    onClick={() => removeDayTime(day.value, index)}
+                                    className="p-0.5 text-label-tertiary hover:text-label-danger transition-colors"
+                                  >
+                                    <IconCross className="w-3 h-3 fill-current" />
+                                  </button>
+                                </div>
+                                {hasWarning && (
+                                  <div className="bg-surface-status-error border border-border-status-error rounded px-1.5 py-0.5 mt-0.5">
+                                    <span className="text-label-status-error text-[10px]">
+                                      {warningText}
+                                    </span>
+                                  </div>
+                                )}
+                              </div>
+                            );
+                          })}
+                          <button
+                            type="button"
+                            onClick={() => addDayTime(day.value)}
+                            className="flex items-center gap-1 px-2 py-1 text-sm text-label-action hover:underline"
+                          >
+                            <IconPlus className="w-3 h-3 fill-fill-action" />
+                            Add
+                          </button>
+                        </div>
+                      </div>
+                    )}
+
+                    {dayData.enabled && venueOpen && availabilityType === 'incremental' && (
+                      <p className="text-label-tertiary text-sm pl-10">
+                        Available every {incrementMinutes} minutes
+                      </p>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default AvailabilitySection;