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

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

@@ -1,401 +0,0 @@
-import React from 'react';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Label } from '../ui/label';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
-import { Switch } from '../ui/switch';
-import { IconPlus, IconDelete } from '../../../icons';
-
-export type DynamicPricingRuleType =
-  | 'resource_availability'
-  | 'latency'
-  | 'group_size'
-  | 'cancellation_rate'
-  | 'traffic'
-  | 'weather';
-
-export interface DynamicPricingRule {
-  type: DynamicPricingRuleType;
-  // resource_availability
-  threshold_percentage?: number;
-  availability_condition?: 'under' | 'exceeds';
-  // latency
-  latency_mode?: 'till_booking' | 'date_range';
-  latency_value?: number;
-  latency_unit?: 'minutes' | 'hours' | 'days';
-  hours_before?: number; // kept for backward compat
-  latency_direction?: 'increase' | 'decrease'; // deprecated
-  latency_range_start?: number;
-  latency_range_start_unit?: 'hours' | 'days' | 'weeks';
-  latency_range_end?: number;
-  latency_range_end_unit?: 'hours' | 'days' | 'weeks';
-  // group_size
-  min_group_size?: number;
-  // cancellation_rate
-  cancellation_threshold?: number;
-  cancellation_window_hours?: number;
-  // traffic
-  views_threshold?: number;
-  traffic_window_hours?: number;
-  // weather
-  weather_conditions?: string[];
-  temperature_above?: number;
-  temperature_below?: number;
-}
-
-const RULE_TYPE_OPTIONS: { value: DynamicPricingRuleType; label: string; description: string; disabled?: boolean }[] = [
-  { value: 'resource_availability', label: 'Availability', description: 'Triggers based on available capacity percentage' },
-  { value: 'latency', label: 'Booking Window', description: 'Triggers based on time remaining until the booking slot' },
-  { value: 'traffic', label: 'Website Traffic', description: 'Triggers when page views or searches exceed a threshold', disabled: true },
-  { value: 'group_size', label: 'Group Size', description: 'Triggers when the booking group size exceeds a threshold', disabled: true },
-  { value: 'cancellation_rate', label: 'Cancellation Rate', description: 'Triggers when cancellation rate exceeds a threshold', disabled: true },
-  { value: 'weather', label: 'Weather', description: 'Triggers based on weather forecast conditions', disabled: true },
-];
-
-const WEATHER_CONDITIONS = ['sunny', 'clear', 'cloudy', 'rainy', 'snowy', 'windy', 'stormy'];
-
-interface DynamicPricingRulesEditorProps {
-  rules: DynamicPricingRule[];
-  onChange: (rules: DynamicPricingRule[]) => void;
-}
-
-const DynamicPricingRulesEditor: React.FC<DynamicPricingRulesEditorProps> = ({ rules, onChange }) => {
-  const addRule = () => {
-    // Find first rule type not already used
-    const usedTypes = new Set(rules.map(r => r.type));
-    const available = RULE_TYPE_OPTIONS.find(opt => !usedTypes.has(opt.value) && !opt.disabled);
-    if (!available) return;
-    onChange([...rules, { type: available.value }]);
-  };
-
-  const updateRule = (index: number, updates: Partial<DynamicPricingRule>) => {
-    onChange(rules.map((r, i) => i === index ? { ...r, ...updates } : r));
-  };
-
-  const removeRule = (index: number) => {
-    onChange(rules.filter((_, i) => i !== index));
-  };
-
-  const changeRuleType = (index: number, newType: DynamicPricingRuleType) => {
-    onChange(rules.map((r, i) => i === index ? { type: newType } : r));
-  };
-
-  const usedTypes = new Set(rules.map(r => r.type));
-
-  const toggleWeatherCondition = (index: number, condition: string) => {
-    const rule = rules[index];
-    const current = rule.weather_conditions || [];
-    const updated = current.includes(condition)
-      ? current.filter(c => c !== condition)
-      : [...current, condition];
-    updateRule(index, { weather_conditions: updated });
-  };
-
-  // Ensure at least one rule always exists
-  React.useEffect(() => {
-    if (rules.length === 0) {
-      onChange([{ type: RULE_TYPE_OPTIONS[0].value }]);
-    }
-  }, []);
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div>
-        <h3 className="text-label-primary text-lg font-semibold">Trigger Rules</h3>
-        <p className="text-label-secondary text-sm">Define when this tier should activate. All rules must be met.</p>
-      </div>
-
-      {rules.map((rule, index) => {
-        const ruleInfo = RULE_TYPE_OPTIONS.find(r => r.value === rule.type);
-        return (
-          <div key={index} className="flex flex-col gap-4 p-4 rounded-lg bg-surface-secondary">
-            <div className="flex items-center justify-between">
-              <Select value={rule.type} onValueChange={(val) => changeRuleType(index, val as DynamicPricingRuleType)}>
-                <SelectTrigger className="w-[240px]">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {RULE_TYPE_OPTIONS.filter(opt => !usedTypes.has(opt.value) || opt.value === rule.type).map(opt => (
-                    <SelectItem key={opt.value} value={opt.value} disabled={opt.disabled}>{opt.label}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              {rules.length > 1 && (
-                <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>
-
-            {ruleInfo && (
-              <p className="text-label-secondary text-xs">{ruleInfo.description}</p>
-            )}
-
-            {/* Availability config */}
-            {rule.type === 'resource_availability' && (
-              <div className="flex flex-col gap-2">
-                <Label>Availability Threshold</Label>
-                <p className="text-label-secondary text-xs">Tier activates when available capacity meets this condition</p>
-                <div className="flex items-center gap-2">
-                  <Select value={rule.availability_condition || 'under'} onValueChange={(val) => updateRule(index, { availability_condition: val as 'under' | 'exceeds' })}>
-                    <SelectTrigger className="w-[130px]">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="under">Is under</SelectItem>
-                      <SelectItem value="exceeds">Exceeds</SelectItem>
-                    </SelectContent>
-                  </Select>
-                  <div className="relative w-24">
-                    <Input
-                      type="number"
-                      min={1}
-                      max={100}
-                      value={rule.threshold_percentage ?? ''}
-                      onChange={(e) => updateRule(index, { threshold_percentage: e.target.value ? parseInt(e.target.value) : undefined })}
-                      className="pr-8"
-                    />
-                    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-label-secondary text-sm pointer-events-none">%</span>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* Latency config */}
-            {rule.type === 'latency' && (
-              <div className="flex flex-col gap-4">
-                {/* Mode toggle */}
-                <div className="flex items-center gap-3">
-                  <Switch
-                    checked={(rule.latency_mode || 'till_booking') === 'till_booking'}
-                    onCheckedChange={(checked) => updateRule(index, {
-                      latency_mode: checked ? 'till_booking' : 'date_range',
-                    })}
-                  />
-                  <div className="flex flex-col gap-0.5">
-                    <Label>Till Booking Date / Time</Label>
-                    <p className="text-label-secondary text-xs">
-                      {(rule.latency_mode || 'till_booking') === 'till_booking'
-                        ? 'Applies from now until the specified time before the booking'
-                        : 'Applies between two time periods before the booking'}
-                    </p>
-                  </div>
-                </div>
-
-                {(rule.latency_mode || 'till_booking') === 'till_booking' ? (
-                  <div className="flex flex-col gap-2">
-                    <Label>Time Before Booking</Label>
-                    <div className="flex items-center gap-2">
-                      <Input
-                        type="number"
-                        min={1}
-                        value={rule.latency_value ?? rule.hours_before ?? ''}
-                        onChange={(e) => updateRule(index, { latency_value: e.target.value ? parseInt(e.target.value) : undefined })}
-                        className="w-24"
-                      />
-                      <Select value={rule.latency_unit || 'hours'} onValueChange={(val) => updateRule(index, { latency_unit: val as 'minutes' | 'hours' | 'days' })}>
-                        <SelectTrigger className="w-[130px]">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="minutes">Minutes</SelectItem>
-                          <SelectItem value="hours">Hours</SelectItem>
-                          <SelectItem value="days">Days</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </div>
-                ) : (
-                  <div className="flex flex-col gap-4">
-                    <div className="flex flex-col gap-2">
-                      <Label>From</Label>
-                      <p className="text-label-secondary text-xs">How far before the booking this window starts</p>
-                      <div className="flex items-center gap-2">
-                        <Input
-                          type="number"
-                          min={1}
-                          value={rule.latency_range_start ?? ''}
-                          onChange={(e) => updateRule(index, { latency_range_start: e.target.value ? parseInt(e.target.value) : undefined })}
-                          className="w-24"
-                        />
-                        <Select value={rule.latency_range_start_unit || 'days'} onValueChange={(val) => updateRule(index, { latency_range_start_unit: val as 'hours' | 'days' | 'weeks' })}>
-                          <SelectTrigger className="w-[130px]">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="hours">Hours</SelectItem>
-                            <SelectItem value="days">Days</SelectItem>
-                            <SelectItem value="weeks">Weeks</SelectItem>
-                          </SelectContent>
-                        </Select>
-                        <span className="text-label-secondary text-sm">before</span>
-                      </div>
-                    </div>
-                    <div className="flex flex-col gap-2">
-                      <Label>Until</Label>
-                      <p className="text-label-secondary text-xs">How close to the booking this window ends</p>
-                      <div className="flex items-center gap-2">
-                        <Input
-                          type="number"
-                          min={0}
-                          value={rule.latency_range_end ?? ''}
-                          onChange={(e) => updateRule(index, { latency_range_end: e.target.value ? parseInt(e.target.value) : undefined })}
-                          className="w-24"
-                        />
-                        <Select value={rule.latency_range_end_unit || 'days'} onValueChange={(val) => updateRule(index, { latency_range_end_unit: val as 'hours' | 'days' | 'weeks' })}>
-                          <SelectTrigger className="w-[130px]">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="hours">Hours</SelectItem>
-                            <SelectItem value="days">Days</SelectItem>
-                            <SelectItem value="weeks">Weeks</SelectItem>
-                          </SelectContent>
-                        </Select>
-                        <span className="text-label-secondary text-sm">before</span>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* Group Size config */}
-            {rule.type === 'group_size' && (
-              <div className="flex flex-col gap-2">
-                <Label>Minimum Group Size</Label>
-                <p className="text-label-secondary text-xs">Tier activates when the booking group size meets or exceeds this number</p>
-                <Input
-                  type="number"
-                  min={2}
-                  value={rule.min_group_size ?? ''}
-                  onChange={(e) => updateRule(index, { min_group_size: e.target.value ? parseInt(e.target.value) : undefined })}
-                  className="w-32"
-                />
-              </div>
-            )}
-
-            {/* Cancellation Rate config */}
-            {rule.type === 'cancellation_rate' && (
-              <div className="flex flex-col gap-3">
-                <div className="flex flex-col gap-2">
-                  <Label>Cancellation Threshold (%)</Label>
-                  <p className="text-label-secondary text-xs">Tier activates when cancellation rate exceeds this percentage</p>
-                  <Input
-                    type="number"
-                    min={1}
-                    max={100}
-                    value={rule.cancellation_threshold ?? ''}
-                    onChange={(e) => updateRule(index, { cancellation_threshold: e.target.value ? parseInt(e.target.value) : undefined })}
-                    className="w-32"
-                  />
-                </div>
-                <div className="flex flex-col gap-2">
-                  <Label>Window (hours)</Label>
-                  <p className="text-label-secondary text-xs">Look back this many hours to calculate the cancellation rate</p>
-                  <Input
-                    type="number"
-                    min={1}
-                    value={rule.cancellation_window_hours ?? ''}
-                    onChange={(e) => updateRule(index, { cancellation_window_hours: e.target.value ? parseInt(e.target.value) : undefined })}
-                    className="w-32"
-                  />
-                </div>
-              </div>
-            )}
-
-            {/* Traffic config */}
-            {rule.type === 'traffic' && (
-              <div className="flex flex-col gap-3">
-                <div className="flex flex-col gap-2">
-                  <Label>Views Threshold</Label>
-                  <p className="text-label-secondary text-xs">Tier activates when page views or searches exceed this number</p>
-                  <Input
-                    type="number"
-                    min={1}
-                    value={rule.views_threshold ?? ''}
-                    onChange={(e) => updateRule(index, { views_threshold: e.target.value ? parseInt(e.target.value) : undefined })}
-                    className="w-32"
-                  />
-                </div>
-                <div className="flex flex-col gap-2">
-                  <Label>Window (hours)</Label>
-                  <p className="text-label-secondary text-xs">Look back this many hours to count views</p>
-                  <Input
-                    type="number"
-                    min={1}
-                    value={rule.traffic_window_hours ?? ''}
-                    onChange={(e) => updateRule(index, { traffic_window_hours: e.target.value ? parseInt(e.target.value) : undefined })}
-                    className="w-32"
-                  />
-                </div>
-              </div>
-            )}
-
-            {/* Weather config */}
-            {rule.type === 'weather' && (
-              <div className="flex flex-col gap-3">
-                <div className="flex flex-col gap-2">
-                  <Label>Weather Conditions</Label>
-                  <p className="text-label-secondary text-xs">Select conditions that trigger this tier</p>
-                  <div className="flex flex-wrap gap-2">
-                    {WEATHER_CONDITIONS.map(condition => (
-                      <button
-                        key={condition}
-                        type="button"
-                        onClick={() => toggleWeatherCondition(index, condition)}
-                        className={`px-3 py-1.5 rounded-full text-sm border transition-colors ${
-                          (rule.weather_conditions || []).includes(condition)
-                            ? 'bg-fill-primary text-white border-fill-primary'
-                            : 'bg-surface-primary text-label-secondary border-border-primary hover:border-border-secondary'
-                        }`}
-                      >
-                        {condition.charAt(0).toUpperCase() + condition.slice(1)}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="flex flex-col gap-2">
-                    <Label>Temperature Above (°C)</Label>
-                    <Input
-                      type="number"
-                      value={rule.temperature_above ?? ''}
-                      onChange={(e) => updateRule(index, { temperature_above: e.target.value ? parseInt(e.target.value) : undefined })}
-                      className="w-32"
-                    />
-                  </div>
-                  <div className="flex flex-col gap-2">
-                    <Label>Temperature Below (°C)</Label>
-                    <Input
-                      type="number"
-                      value={rule.temperature_below ?? ''}
-                      onChange={(e) => updateRule(index, { temperature_below: e.target.value ? parseInt(e.target.value) : undefined })}
-                      className="w-32"
-                    />
-                  </div>
-                </div>
-                <p className="text-label-tertiary text-xs italic">
-                  Note: Weather rules require a weather API integration to be configured. This will be set up separately.
-                </p>
-              </div>
-            )}
-          </div>
-        );
-      })}
-      {RULE_TYPE_OPTIONS.filter(opt => !opt.disabled).some(opt => !usedTypes.has(opt.value)) && (
-        <Button
-          variant="outline"
-          onClick={addRule}
-          withIcon
-          className="w-fit"
-        >
-          <IconPlus className="w-4 h-4 fill-fill-secondary" />
-          Add Rule
-        </Button>
-      )}
-    </div>
-  );
-};
-
-export default DynamicPricingRulesEditor;

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

@@ -1,77 +0,0 @@
-import React from 'react';
-import StatusBadge from '../StatusBadge';
-import TableActionMenu from '../TableActionMenu';
-import type { DynamicPricingRule } from '../pricing/DynamicPricingRulesEditor';
-import getRuleSummary from '../pricing/getRuleSummary';
-
-export interface DynamicPricingTier {
-  id: string;
-  provider_id: string;
-  name: string;
-  description: string | null;
-  adjustment: number;
-  display_order: number;
-  is_active: boolean;
-  rules: any[];
-  match_mode: 'all' | 'any';
-  status: string;
-  created_at: string;
-  updated_at: string;
-}
-
-interface DynamicPricingTierCardProps {
-  tier: DynamicPricingTier;
-  onEdit: (tier: DynamicPricingTier) => void;
-  onDelete: (tier: DynamicPricingTier) => void;
-  onToggleActive: (tier: DynamicPricingTier) => void;
-}
-
-const DynamicPricingTierCard: React.FC<DynamicPricingTierCardProps> = ({ tier, onEdit, onDelete, onToggleActive }) => {
-  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 flex-col gap-2 flex-1 min-w-0">
-          <div className="flex flex-col gap-0.5 min-w-0">
-            <p className="text-label-primary font-semibold text-base">{tier.name}</p>
-            {tier.description && (
-              <p className="text-label-secondary text-sm">{tier.description}</p>
-            )}
-          </div>
-          {tier.rules && tier.rules.length > 0 && (
-            <div className="flex flex-wrap items-center gap-1.5">
-              {tier.rules.map((rule: DynamicPricingRule, i: number) => (
-                <React.Fragment key={i}>
-                  {i > 0 && (
-                    <span className="text-label-tertiary text-xs font-medium uppercase">
-                      {tier.match_mode === 'any' ? 'or' : 'and'}
-                    </span>
-                  )}
-                  <span
-                    className="inline-flex items-center px-2 py-0.5 rounded-md bg-surface-secondary text-label-secondary text-xs"
-                  >
-                    {getRuleSummary(rule)}
-                  </span>
-                </React.Fragment>
-              ))}
-            </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 {tier.display_order + 1}
-          </span>
-          <StatusBadge status={tier.is_active ? 'active' : 'disabled'} />
-          <TableActionMenu
-            items={[
-              { label: 'Edit', onClick: () => onEdit(tier) },
-              { label: tier.is_active ? 'Deactivate' : 'Activate', onClick: () => onToggleActive(tier) },
-              { label: 'Delete', onClick: () => onDelete(tier), variant: 'danger' },
-            ]}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DynamicPricingTierCard;