@licklist/design 0.78.5-dev.105 → 0.78.5-dev.107

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

@@ -1,677 +0,0 @@
-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;