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

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

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

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