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

package/src/v2/shadcn/_reference/pricing/PricingPeriodsList.tsx

@@ -1,213 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate, useLocation, useParams } from 'react-router-dom';
-import {
-  DndContext,
-  closestCenter,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  DragEndEvent,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  verticalListSortingStrategy,
-  useSortable,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { supabase } from '@/integrations/supabase/client';
-import { useProvider } from '@/contexts/ProviderContext';
-import { useNotify } from '../../hooks/useNotify';
-import { Button } from '../ui/button';
-import { IconPlus, IconGripVertical } from '../../../icons';
-import PricingPeriodCard, { type PricingPeriod, type PricingPeriodRule } from './PricingPeriodCard';
-
-
-// Sortable wrapper for PricingPeriodCard
-const SortablePeriodCard: React.FC<{
-  period: PricingPeriod;
-  onEdit: (period: PricingPeriod) => void;
-  onDelete: (period: PricingPeriod) => void;
-  onToggleActive: (period: PricingPeriod) => void;
-}> = ({ period, onEdit, onDelete, onToggleActive }) => {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: period.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-  };
-
-  return (
-    <div ref={setNodeRef} style={style} className="flex items-center gap-0">
-      <div
-        {...attributes}
-        {...listeners}
-        className="p-1.5 rounded-md cursor-grab active:cursor-grabbing fill-fill-secondary hover:fill-fill-primary hover:bg-surface-secondary transition-colors flex-shrink-0"
-      >
-        <IconGripVertical size={20} />
-      </div>
-      <div className="flex-1 min-w-0">
-        <PricingPeriodCard
-          period={period}
-          onEdit={onEdit}
-          onDelete={onDelete}
-          onToggleActive={onToggleActive}
-        />
-      </div>
-    </div>
-  );
-};
-
-const PricingPeriodsList: React.FC = () => {
-  const { provider } = useProvider();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { companyId } = useParams();
-  const { showSuccess, showError } = useNotify();
-  const [periods, setPeriods] = useState<PricingPeriod[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
-  );
-
-  const fetchPeriods = async () => {
-    if (!provider?.id) return;
-    setIsLoading(true);
-    const { data, error } = await supabase
-      .from('pricing_periods')
-      .select('*')
-      .eq('provider_id', provider.id)
-      .eq('status', 'active')
-      .order('priority', { ascending: true });
-
-    if (!error && data) {
-      setPeriods(data.map(d => ({
-        ...d,
-        rules: (Array.isArray(d.rules) ? d.rules : []) as unknown as PricingPeriodRule[],
-      })));
-    }
-    setIsLoading(false);
-  };
-
-  useEffect(() => {
-    fetchPeriods();
-  }, [provider?.id]);
-
-  const getBasePath = () => {
-    const pathParts = location.pathname.split('/');
-    const providerType = pathParts.find(p => p === 'venue' || p === 'promoter');
-    const providerId = provider?.venue_id;
-    if (companyId) {
-      return `/company/${companyId}/${providerType}/${providerId}`;
-    }
-    return `/${providerType}/${providerId}`;
-  };
-
-  const handleCreate = () => {
-    navigate(`${getBasePath()}/settings/pricing/add`);
-  };
-
-  const handleEdit = (period: PricingPeriod) => {
-    navigate(`${getBasePath()}/settings/pricing/edit/${period.id}`);
-  };
-
-  const handleToggleActive = async (period: PricingPeriod) => {
-    try {
-      const newState = !period.is_active;
-      const { error } = await supabase
-        .from('pricing_periods')
-        .update({ is_active: newState })
-        .eq('id', period.id);
-      if (error) throw error;
-      showSuccess(
-        newState ? 'Period Activated' : 'Period Deactivated',
-        `${period.name} has been ${newState ? 'activated' : 'deactivated'}.`
-      );
-      await fetchPeriods();
-    } catch (error) {
-      showError('Error', 'Failed to update pricing period status.');
-    }
-  };
-
-  const handleDragEnd = async (event: DragEndEvent) => {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-
-    const oldIndex = periods.findIndex(p => p.id === active.id);
-    const newIndex = periods.findIndex(p => p.id === over.id);
-    if (oldIndex === -1 || newIndex === -1) return;
-
-    const reordered = arrayMove(periods, oldIndex, newIndex);
-    // Optimistically update with new priorities
-    const updated = reordered.map((p, i) => ({ ...p, priority: i + 1 }));
-    setPeriods(updated);
-
-    // Persist all priority changes
-    try {
-      const updates = updated.map(p =>
-        supabase.from('pricing_periods').update({ priority: p.priority }).eq('id', p.id)
-      );
-      const results = await Promise.all(updates);
-      const failed = results.find(r => r.error);
-      if (failed?.error) throw failed.error;
-    } catch (error) {
-      showError('Error', 'Failed to update priority order.');
-      await fetchPeriods(); // revert
-    }
-  };
-
-  const handleDelete = (period: PricingPeriod) => {
-    navigate(`${getBasePath()}/settings/pricing/delete/${period.id}`);
-  };
-
-  return (
-    <div className="flex flex-col gap-4 w-full">
-      <div className="flex items-center justify-between">
-        <h2 className="text-label-primary text-xl font-semibold">Pricing Periods Settings</h2>
-        <Button variant="ghost" size="sm" onClick={handleCreate} withIcon>
-          <IconPlus className="w-4 h-4" />
-          New Period
-        </Button>
-      </div>
-
-      {isLoading ? (
-        <p className="text-label-secondary text-sm py-8 text-center">Loading...</p>
-      ) : periods.length === 0 ? (
-        <p className="text-label-tertiary text-sm py-8 text-left">
-          No pricing periods configured. Create your first period to define variable pricing.
-        </p>
-      ) : (
-        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-          <SortableContext items={periods.map(p => p.id)} strategy={verticalListSortingStrategy}>
-            <div className="flex flex-col gap-3">
-              {periods.map(period => (
-                <SortablePeriodCard
-                  key={period.id}
-                  period={period}
-                  onEdit={handleEdit}
-                  onDelete={handleDelete}
-                  onToggleActive={handleToggleActive}
-                />
-              ))}
-            </div>
-          </SortableContext>
-        </DndContext>
-      )}
-    </div>
-  );
-};
-
-export default PricingPeriodsList;

package/src/v2/shadcn/_reference/pricing/getRuleSummary.ts

@@ -1,39 +0,0 @@
-import type { DynamicPricingRule } from '../pricing/DynamicPricingRulesEditor';
-
-const getRuleSummary = (rule: DynamicPricingRule): string => {
-  switch (rule.type) {
-    case 'resource_availability':
-      return `Availability ${rule.availability_condition === 'exceeds' ? 'exceeds' : 'under'} ${rule.threshold_percentage ?? '?'}%`;
-    case 'latency': {
-      const mode = rule.latency_mode || 'till_booking';
-      if (mode === 'date_range') {
-        const startVal = rule.latency_range_start ?? '?';
-        const startUnit = rule.latency_range_start_unit || 'days';
-        const endVal = rule.latency_range_end ?? '?';
-        const endUnit = rule.latency_range_end_unit || 'days';
-        return `${startVal} ${startUnit} – ${endVal} ${endUnit} before`;
-      }
-      const value = rule.latency_value ?? rule.hours_before ?? '?';
-      const unit = rule.latency_unit || 'hours';
-      const unitLabel = unit === 'minutes' ? 'min' : unit === 'hours' ? 'h' : 'd';
-      return `Within ${value}${unitLabel} of slot`;
-    }
-    case 'group_size':
-      return `Group size ≥ ${rule.min_group_size ?? '?'}`;
-    case 'cancellation_rate':
-      return `Cancellations > ${rule.cancellation_threshold ?? '?'}% in ${rule.cancellation_window_hours ?? '?'}h`;
-    case 'traffic':
-      return `Views > ${rule.views_threshold ?? '?'} in ${rule.traffic_window_hours ?? '?'}h`;
-    case 'weather': {
-      const parts: string[] = [];
-      if (rule.weather_conditions?.length) parts.push(rule.weather_conditions.join(', '));
-      if (rule.temperature_above != null) parts.push(`above ${rule.temperature_above}°`);
-      if (rule.temperature_below != null) parts.push(`below ${rule.temperature_below}°`);
-      return parts.length ? `Weather: ${parts.join('; ')}` : 'Weather conditions';
-    }
-    default:
-      return rule.type;
-  }
-};
-
-export default getRuleSummary;

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

@@ -1,184 +0,0 @@
-import React from 'react';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Label } from '../ui/label';
-import { Checkbox } from '../ui/checkbox';
-import { Switch } from '../ui/switch';
-import { IconPlus, IconDelete, IconTime } from '../../../icons';
-
-export interface AvailabilityRule {
-  days: string[];
-  is_24_hours: boolean;
-  start_time?: string;
-  end_time?: string;
-}
-
-export interface AvailabilityData {
-  always_available: boolean;
-  rules: AvailabilityRule[];
-}
-
-const DAY_OPTIONS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
-
-interface AvailabilityRulesSectionProps {
-  alwaysAvailable: boolean;
-  onAlwaysAvailableChange: (value: boolean) => void;
-  rules: AvailabilityRule[];
-  onChange: (rules: AvailabilityRule[]) => void;
-  /** Controls the toggle label and description text based on context */
-  variant?: 'category' | 'item';
-  /** Provider type label used in the category toggle text (e.g. 'venue' or 'promoter') */
-  providerType?: string;
-}
-
-const AvailabilityRulesSection: React.FC<AvailabilityRulesSectionProps> = ({ alwaysAvailable, onAlwaysAvailableChange, rules, onChange, variant = 'item', providerType = 'venue' }) => {
-  const providerLabel = providerType === 'promoter' ? 'promoter' : 'venue';
-  const toggleLabel = variant === 'category' 
-    ? `Available within ${providerLabel} opening hours`
-    : 'Align with category availability';
-  const description = variant === 'category'
-    ? 'Define which days and times this product category is available.'
-    : 'Define which days and times this product is available.';
-
-  const addRule = () => {
-    onChange([...rules, { days: [], is_24_hours: true }]);
-  };
-
-  const updateRule = (index: number, updates: Partial<AvailabilityRule>) => {
-    onChange(rules.map((r, i) => i === index ? { ...r, ...updates } : r));
-  };
-
-  const removeRule = (index: number) => {
-    onChange(rules.filter((_, i) => i !== index));
-  };
-
-  const toggleDay = (ruleIndex: number, day: string) => {
-    const rule = rules[ruleIndex];
-    const days = rule.days || [];
-    const updated = days.includes(day) ? days.filter(d => d !== day) : [...days, day];
-    updateRule(ruleIndex, { days: updated });
-  };
-
-  const toggle24Hours = (index: number, checked: boolean) => {
-    if (checked) {
-      updateRule(index, { is_24_hours: true, start_time: undefined, end_time: undefined });
-    } else {
-      updateRule(index, { is_24_hours: false, start_time: '09:00', end_time: '17:00' });
-    }
-  };
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-1">
-        <h2 className="text-label-primary text-lg font-semibold">Availability</h2>
-        <p className="text-label-secondary text-xs">{description}</p>
-      </div>
-
-      <div className="flex items-center gap-2">
-        <Switch
-          checked={alwaysAvailable}
-          onCheckedChange={onAlwaysAvailableChange}
-        />
-        <Label className="cursor-pointer">{toggleLabel}</Label>
-      </div>
-
-      {!alwaysAvailable && (
-        <>
-          <div className="flex items-center justify-between">
-            <Label className="text-sm font-semibold">Set specific days and times this product is available.</Label>
-            <Button variant="outline" onClick={addRule} withIcon className="flex-shrink-0">
-              <IconPlus className="w-4 h-4 fill-fill-secondary" />
-              Add Days
-            </Button>
-          </div>
-
-          {rules.length === 0 && (
-            <p className="text-label-secondary text-sm">
-              No availability rules defined.
-            </p>
-          )}
-
-          {rules.map((rule, index) => (
-            <div key={index} className="flex flex-col gap-4 p-4 rounded-lg bg-surface-secondary">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <IconTime className="w-5 h-5 fill-fill-secondary" />
-                  <span className="text-label-secondary text-xs border border-border-primary rounded-full px-2.5 py-0.5">
-                    Day / Time Rule
-                  </span>
-                </div>
-                <Button variant="ghost" size="icon" onClick={() => removeRule(index)} className="h-8 w-8 bg-surface-danger-soft border-transparent hover:!bg-surface-danger-soft-hover [&_path]:fill-fill-danger">
-                  <IconDelete className="w-4 h-4" />
-                </Button>
-              </div>
-
-              {/* Day selection */}
-              <div className="flex flex-col gap-2">
-                <Label className="text-sm font-semibold">Days</Label>
-                <div className="grid grid-cols-2 gap-2">
-                  <div className="flex flex-col gap-2">
-                    {DAY_OPTIONS.slice(0, 4).map(day => (
-                      <label key={day} className="flex items-center gap-1.5">
-                        <Checkbox
-                          checked={rule.days?.includes(day) || false}
-                          onCheckedChange={() => toggleDay(index, day)}
-                        />
-                        <span className="text-label-primary text-sm">{day}</span>
-                      </label>
-                    ))}
-                  </div>
-                  <div className="flex flex-col gap-2">
-                    {DAY_OPTIONS.slice(4).map(day => (
-                      <label key={day} className="flex items-center gap-1.5">
-                        <Checkbox
-                          checked={rule.days?.includes(day) || false}
-                          onCheckedChange={() => toggleDay(index, day)}
-                        />
-                        <span className="text-label-primary text-sm">{day}</span>
-                      </label>
-                    ))}
-                  </div>
-                </div>
-              </div>
-
-              {/* Time section */}
-              <div className="flex flex-col gap-3">
-                <Label className="text-sm font-semibold">Time</Label>
-                <div className="flex items-center gap-2">
-                  <Switch
-                    checked={rule.is_24_hours ?? true}
-                    onCheckedChange={(checked) => toggle24Hours(index, checked)}
-                  />
-                  <Label className="cursor-pointer">Align with Opening Hours</Label>
-                </div>
-
-                {!rule.is_24_hours && (
-                  <div className="grid grid-cols-2 gap-4">
-                    <div className="flex flex-col gap-2">
-                      <Label>Start Time</Label>
-                      <Input
-                        type="time"
-                        value={rule.start_time || '09:00'}
-                        onChange={(e) => updateRule(index, { start_time: e.target.value })}
-                      />
-                    </div>
-                    <div className="flex flex-col gap-2">
-                      <Label>End Time</Label>
-                      <Input
-                        type="time"
-                        value={rule.end_time || '17:00'}
-                        onChange={(e) => updateRule(index, { end_time: e.target.value })}
-                      />
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          ))}
-        </>
-      )}
-    </div>
-  );
-};
-
-export default AvailabilityRulesSection;