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

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

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

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

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