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

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

@@ -1,152 +0,0 @@
-import React from 'react';
-import { IconCalendar, IconTime } from '../../../icons';
-import StatusBadge from '../StatusBadge';
-import TableActionMenu from '../TableActionMenu';
-
-export interface PricingPeriodRule {
-  type: 'range' | 'date_time';
-  // Range fields
-  start_date?: string;
-  end_date?: string;
-  // Date/Time fields
-  days?: string[];
-  // Shared time fields
-  is_24_hours?: boolean;
-  start_time?: string;
-  end_time?: string;
-  // Opening hours override fields
-  is_open?: boolean;
-}
-
-export interface PricingPeriod {
-  id: string;
-  provider_id: string;
-  name: string;
-  description: string | null;
-  colour: string;
-  priority: number;
-  is_active: boolean;
-  rules: PricingPeriodRule[];
-  display_order: number;
-  status: string;
-  dynamic_pricing_excluded: boolean;
-  created_at: string;
-  updated_at: string;
-}
-
-interface PricingPeriodCardProps {
-  period: PricingPeriod;
-  onEdit: (period: PricingPeriod) => void;
-  onDelete: (period: PricingPeriod) => void;
-  onToggleActive: (period: PricingPeriod) => void;
-}
-
-const isRangeExpired = (rule: PricingPeriodRule): boolean => {
-  if (rule.type !== 'range' || !rule.end_date) return false;
-  const today = new Date().toISOString().split('T')[0];
-  return rule.end_date < today;
-};
-
-const isPeriodExpired = (period: PricingPeriod): boolean => {
-  const rangeRules = period.rules.filter(r => r.type === 'range');
-  if (rangeRules.length === 0) return false;
-  return rangeRules.every(r => isRangeExpired(r));
-};
-
-const formatDateLocale = (dateStr: string): string => {
-  if (!dateStr) return '—';
-  const date = new Date(dateStr + 'T00:00:00');
-  return date.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
-};
-
-const DAY_ORDER = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
-
-const sortDays = (days: string[]): string[] => {
-  return [...days].sort((a, b) => DAY_ORDER.indexOf(a) - DAY_ORDER.indexOf(b));
-};
-
-const getRuleParts = (rule: PricingPeriodRule): { primary: string; time?: string } => {
-  if (rule.type === 'range') {
-    const primary = `${formatDateLocale(rule.start_date || '')} to ${formatDateLocale(rule.end_date || '')}`;
-    const time = !rule.is_24_hours && rule.start_time && rule.end_time ? `${rule.start_time}–${rule.end_time}` : undefined;
-    return { primary, time };
-  }
-  if (rule.type === 'date_time') {
-    const primary = sortDays(rule.days || []).join(', ');
-    const time = !rule.is_24_hours && rule.start_time && rule.end_time ? `${rule.start_time}–${rule.end_time}` : undefined;
-    return { primary, time };
-  }
-  return { primary: '' };
-};
-
-const PricingPeriodCard: React.FC<PricingPeriodCardProps> = ({ period, onEdit, onDelete, onToggleActive }) => {
-  const expired = isPeriodExpired(period);
-  return (
-    <div className="flex flex-col gap-3 p-4 border border-border-primary rounded-lg bg-surface-primary">
-      <div className="flex items-start justify-between gap-4">
-        <div className="flex items-start gap-3 flex-1 min-w-0">
-          <span
-            className="w-3 h-3 rounded-full flex-shrink-0 mt-1.5"
-            style={{ backgroundColor: period.colour }}
-          />
-          <div className="flex flex-col gap-0.5 min-w-0">
-            <p className="text-label-primary font-semibold text-base">{period.name}</p>
-            {period.description && (
-              <p className="text-label-secondary text-sm">{period.description}</p>
-            )}
-          </div>
-        </div>
-        <div className="flex items-center gap-2 flex-shrink-0">
-          <span className="text-label-secondary text-xs border border-border-primary rounded-full px-2.5 py-0.5">
-            Priority {period.priority}
-          </span>
-          <StatusBadge status={expired ? 'expired' : period.is_active ? 'active' : 'disabled'} />
-          <TableActionMenu
-            items={[
-              { label: 'Edit', onClick: () => onEdit(period) },
-              { label: period.is_active ? 'Deactivate' : 'Activate', onClick: () => onToggleActive(period) },
-              { label: 'Delete', onClick: () => onDelete(period), variant: 'danger' },
-            ]}
-          />
-        </div>
-      </div>
-      {period.rules.length > 0 && (
-        <div className={`flex flex-col ml-6 ${period.rules.length > 1 ? 'divide-y divide-border-primary' : ''}`}>
-          {[...period.rules]
-            .sort((a, b) => {
-              const dateA = a.start_date || '';
-              const dateB = b.start_date || '';
-              if (a.type === 'range' && b.type === 'range') return dateA.localeCompare(dateB);
-              if (a.type === 'range') return -1;
-              if (b.type === 'range') return 1;
-              return 0;
-            })
-            .map((rule, idx) => {
-            const parts = getRuleParts(rule);
-            const ruleExpired = isRangeExpired(rule);
-            return (
-              <div key={idx} className="flex items-center gap-2.5 text-sm py-2 first:pt-0 last:pb-0">
-                {rule.type === 'range' ? (
-                  <IconCalendar className="w-5 h-5 fill-fill-secondary flex-shrink-0" />
-                ) : (
-                  <IconTime className="w-5 h-5 fill-fill-secondary flex-shrink-0" />
-                )}
-                <div className="flex flex-col flex-1 min-w-0">
-                  <span className={ruleExpired ? "text-label-secondary" : "text-label-primary"}>{parts.primary}</span>
-                  {parts.time && <span className="text-label-secondary">{parts.time}</span>}
-                </div>
-                {ruleExpired && (
-                  <div className="flex-shrink-0">
-                    <StatusBadge status="expired" />
-                  </div>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default PricingPeriodCard;

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

@@ -1,377 +0,0 @@
-import React, { useState } from 'react';
-import { useNotify } from '../../hooks/useNotify';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Label } from '../ui/label';
-import { Textarea } from '../ui/textarea';
-import { Checkbox } from '../ui/checkbox';
-import { Switch } from '../ui/switch';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
-import { IconPlus, IconDelete, IconTime, IconCalendar } from '../../../icons';
-import type { PricingPeriod, PricingPeriodRule } from './PricingPeriodCard';
-
-const COLOUR_OPTIONS = [
-  { value: '#3B82F6', label: 'Blue' },
-  { value: '#EF4444', label: 'Red' },
-  { value: '#22C55E', label: 'Green' },
-  { value: '#EAB308', label: 'Yellow' },
-  { value: '#8B5CF6', label: 'Purple' },
-  { value: '#F97316', label: 'Orange' },
-  { value: '#EC4899', label: 'Pink' },
-  { value: '#14B8A6', label: 'Teal' },
-];
-
-const DAY_OPTIONS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
-
-interface PricingPeriodFormProps {
-  period?: PricingPeriod | null;
-  onSave: (data: {
-    name: string;
-    description: string;
-    colour: string;
-    is_active: boolean;
-    dynamic_pricing_excluded: boolean;
-    rules: PricingPeriodRule[];
-  }) => void;
-  onBack: () => void;
-  isSaving?: boolean;
-  showHeader?: boolean;
-}
-
-const PricingPeriodForm: React.FC<PricingPeriodFormProps> = ({ period, onSave, onBack, isSaving, showHeader = true }) => {
-  const { showError } = useNotify();
-  const isEditing = !!period;
-  const [name, setName] = useState(period?.name || '');
-  const [description, setDescription] = useState(period?.description || '');
-  const [colour, setColour] = useState(period?.colour || '#3B82F6');
-  
-  const [isActive, setIsActive] = useState(period?.is_active ?? true);
-  const [dynamicPricingExcluded, setDynamicPricingExcluded] = useState(period?.dynamic_pricing_excluded ?? false);
-  const [ruleErrors, setRuleErrors] = useState<Record<number, string>>({});
-  const [rules, setRules] = useState<PricingPeriodRule[]>(() => {
-    // Migrate legacy rule types on load
-    if (!period?.rules) return [];
-    const migrated = period.rules.map(r => {
-      if (r.type === 'time' as string) {
-        return { ...r, type: 'date_time' as const, is_24_hours: false };
-      }
-      if (r.type === 'date_range' as string) {
-        return { ...r, type: 'range' as const, is_24_hours: true };
-      }
-      return r;
-    });
-    // Sort chronologically to match the listing display
-    return migrated.sort((a, b) => {
-      const dateA = a.start_date || '';
-      const dateB = b.start_date || '';
-      if (a.type === 'range' && b.type === 'range') return dateA.localeCompare(dateB);
-      if (a.type === 'range') return -1;
-      if (b.type === 'range') return 1;
-      return 0;
-    });
-  });
-
-  const addRule = (type: 'range' | 'date_time') => {
-    if (type === 'range') {
-      setRules([...rules, { type: 'range', start_date: '', end_date: '', is_24_hours: true }]);
-    } else {
-      setRules([...rules, { type: 'date_time', days: [], is_24_hours: true }]);
-    }
-  };
-
-  const updateRule = (index: number, updates: Partial<PricingPeriodRule>) => {
-    setRules(prev => prev.map((r, i) => i === index ? { ...r, ...updates } : r));
-  };
-
-  const removeRule = (index: number) => {
-    setRules(prev => prev.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' });
-    }
-  };
-
-  const validateRules = (): boolean => {
-    const today = new Date().toISOString().split('T')[0];
-    const errors: Record<number, string> = {};
-
-    rules.forEach((rule, index) => {
-      if (rule.type === 'range' && rule.start_date && rule.start_date < today) {
-        errors[index] = 'Start date cannot be in the past';
-      }
-    });
-
-    setRuleErrors(errors);
-    return Object.keys(errors).length === 0;
-  };
-
-  const handleSubmit = () => {
-    if (!name.trim()) {
-      showError('Name Required', 'Please enter a name for the pricing period.');
-      return;
-    }
-    if (rules.length === 0) {
-      showError('Rule Required', 'Please add at least one rule to define when this pricing period applies.');
-      return;
-    }
-    if (!validateRules()) return;
-    const sortedRules = [...rules].sort((a, b) => {
-      const dateA = a.start_date || '';
-      const dateB = b.start_date || '';
-      if (a.type === 'range' && b.type === 'range') return dateA.localeCompare(dateB);
-      if (a.type === 'range') return -1;
-      if (b.type === 'range') return 1;
-      return 0;
-    });
-    onSave({
-      name: name.trim(),
-      description: description.trim(),
-      colour,
-      is_active: isActive,
-      dynamic_pricing_excluded: dynamicPricingExcluded,
-      rules: sortedRules,
-    });
-  };
-
-  const selectedColour = COLOUR_OPTIONS.find(c => c.value === colour);
-
-  return (
-    <div className="flex flex-col gap-6 w-full">
-      {showHeader && (
-        <h2 className="text-label-primary text-xl font-semibold">
-          {isEditing ? 'Edit Pricing Period' : 'Create Pricing Period'}
-        </h2>
-      )}
-
-      {/* Name */}
-      <div className="flex flex-col gap-2">
-        <Label>Name</Label>
-        <Input value={name} onChange={(e) => setName(e.target.value)} />
-      </div>
-
-
-      {/* Description */}
-      <div className="flex flex-col gap-2">
-        <div className="flex items-center justify-between">
-          <Label>Description</Label>
-          <span className="text-label-secondary text-xs">(optional)</span>
-        </div>
-        <Textarea value={description} onChange={(e) => setDescription(e.target.value)} rows={3} />
-      </div>
-
-      {/* Colour */}
-      <div className="flex flex-col gap-1.5">
-        <Label>Colour</Label>
-        <Select value={colour} onValueChange={setColour}>
-          <SelectTrigger>
-            <SelectValue>
-              {selectedColour ? (
-                <span className="flex items-center gap-2">
-                  <span className="w-3 h-3 rounded-full inline-block" style={{ backgroundColor: selectedColour.value }} />
-                  {selectedColour.label}
-                </span>
-              ) : null}
-            </SelectValue>
-          </SelectTrigger>
-          <SelectContent>
-            {COLOUR_OPTIONS.map(c => (
-              <SelectItem key={c.value} value={c.value}>
-                <span className="flex items-center gap-2">
-                  <span className="w-3 h-3 rounded-full inline-block" style={{ backgroundColor: c.value }} />
-                  {c.label}
-                </span>
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <span className="text-label-secondary text-xs">This helps to identify the pricing periods</span>
-      </div>
-
-      {/* Active checkbox */}
-      <div className="flex items-center gap-2">
-        <Checkbox
-          checked={isActive}
-          onCheckedChange={(checked) => setIsActive(checked === true)}
-        />
-        <Label className="cursor-pointer">Active</Label>
-      </div>
-
-      {/* Dynamic Pricing Exclusion */}
-      <div className="flex items-center gap-2">
-        <Checkbox
-          checked={dynamicPricingExcluded}
-          onCheckedChange={(checked) => setDynamicPricingExcluded(checked === true)}
-        />
-        <div className="flex flex-col">
-          <Label className="cursor-pointer">Exclude from Dynamic Pricing</Label>
-          <span className="text-label-secondary text-xs">When checked, dynamic pricing tiers will not apply adjustments during this period</span>
-        </div>
-      </div>
-
-      {/* Separator */}
-      <div className="border-t border-border-primary" />
-
-      {/* Rules */}
-      <div className="flex flex-col gap-4">
-        <div className="flex items-center justify-between">
-          <h3 className="text-label-primary text-lg font-semibold">Rules</h3>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" onClick={() => addRule('range')} withIcon>
-              <IconPlus className="w-4 h-4 fill-fill-secondary" />
-              Add Dates
-            </Button>
-            <Button variant="outline" onClick={() => addRule('date_time')} withIcon>
-              <IconPlus className="w-4 h-4 fill-fill-secondary" />
-              Add Day / Time
-            </Button>
-          </div>
-        </div>
-
-        {rules.length === 0 && (
-          <p className="text-label-tertiary text-sm text-left py-6">
-            No rules defined. Add rules to specify when this pricing period applies.
-          </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">
-                {rule.type === 'range' ? (
-                  <IconCalendar className="w-5 h-5 fill-fill-secondary" />
-                ) : (
-                  <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">
-                  {rule.type === 'range' ? 'Dates Rule' : '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>
-
-            {/* Range rule: date pickers */}
-            {rule.type === 'range' && (
-              <div className="grid grid-cols-2 gap-4">
-                <div className="flex flex-col gap-2">
-                  <Label>Start Date</Label>
-                  <Input
-                    type="date"
-                    value={rule.start_date || ''}
-                    onChange={(e) => {
-                      const newStart = e.target.value;
-                      setRuleErrors(prev => { const next = { ...prev }; delete next[index]; return next; });
-                      // If end date is empty or before new start, update both together
-                      if (newStart && (!rule.end_date || rule.end_date < newStart)) {
-                        updateRule(index, { start_date: newStart, end_date: newStart });
-                      } else {
-                        updateRule(index, { start_date: newStart });
-                      }
-                    }}
-                  />
-                  {ruleErrors[index] && (
-                    <p className="text-label-danger text-sm">{ruleErrors[index]}</p>
-                  )}
-                </div>
-                <div className="flex flex-col gap-2">
-                  <Label>End Date</Label>
-                  <Input
-                    type="date"
-                    value={rule.end_date || ''}
-                    min={rule.start_date || undefined}
-                    onChange={(e) => updateRule(index, { end_date: e.target.value })}
-                  />
-                </div>
-              </div>
-            )}
-
-            {/* Date/Time rule: day selection */}
-            {rule.type === 'date_time' && (
-              <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>
-
-      {/* Actions */}
-      <div className="flex items-center gap-3 pt-6">
-        <Button onClick={handleSubmit} disabled={isSaving}>
-          {isSaving ? 'Saving...' : isEditing ? 'Save Changes' : 'Create Period'}
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default PricingPeriodForm;