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

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

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

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