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

package/src/v2/shadcn/_reference/products/GiftCardSettings.tsx

@@ -1,342 +0,0 @@
-import React, { useRef } from 'react';
-import { Input } from '../ui/input';
-import { Label } from '../ui/label';
-import { Switch } from '../ui/switch';
-import { Button } from '../ui/button';
-import { IconPlusThick, IconDelete, IconGiftCard } from '../../../icons';
-import { supabase } from '@/integrations/supabase/client';
-import { getListingThumbnailStyle } from '@/utils/imageAspectRatio';
-
-export interface Denomination {
-  value: string;
-  image_url: string | null;
-}
-
-export interface GiftCardConfig {
-  denominations: Denomination[];
-  allow_custom_value: boolean;
-  custom_min: string;
-  custom_max: string;
-  custom_multiples_of: string;
-  allow_partial_payment: boolean; // true = allow partial, false = one-time use
-  allow_send_to_someone: boolean;
-  allow_schedule_delivery: boolean;
-}
-
-export const DEFAULT_GIFT_CARD_CONFIG: GiftCardConfig = {
-  denominations: [{ value: '', image_url: null }],
-  allow_custom_value: false,
-  custom_min: '',
-  custom_max: '',
-  custom_multiples_of: '',
-  allow_partial_payment: true,
-  allow_send_to_someone: false,
-  allow_schedule_delivery: false,
-};
-
-export function parseGiftCardConfig(priceTiers: any): GiftCardConfig {
-  if (!priceTiers || typeof priceTiers !== 'object') return { ...DEFAULT_GIFT_CARD_CONFIG };
-  
-  const config = priceTiers as any;
-  return {
-    denominations: Array.isArray(config.denominations) && config.denominations.length > 0
-      ? config.denominations
-      : [{ value: '', image_url: null }],
-    allow_custom_value: !!config.allow_custom_value,
-    custom_min: config.custom_min?.toString() || '',
-    custom_max: config.custom_max?.toString() || '',
-    custom_multiples_of: config.custom_multiples_of?.toString() || '',
-    allow_partial_payment: config.allow_partial_payment !== false,
-    allow_send_to_someone: !!config.allow_send_to_someone,
-    allow_schedule_delivery: !!config.allow_schedule_delivery,
-  };
-}
-
-export function serializeGiftCardConfig(config: GiftCardConfig): Record<string, any> {
-  return {
-    denominations: config.denominations.filter(d => d.value !== ''),
-    allow_custom_value: config.allow_custom_value,
-    custom_min: config.custom_min ? parseFloat(config.custom_min) : null,
-    custom_max: config.custom_max ? parseFloat(config.custom_max) : null,
-    custom_multiples_of: config.custom_multiples_of ? parseFloat(config.custom_multiples_of) : null,
-    allow_partial_payment: config.allow_partial_payment,
-    allow_send_to_someone: config.allow_send_to_someone,
-    allow_schedule_delivery: config.allow_schedule_delivery,
-  };
-}
-
-interface GiftCardSettingsProps {
-  config: GiftCardConfig;
-  onChange: (config: GiftCardConfig) => void;
-  expiryMonths: string;
-  onExpiryChange: (value: string) => void;
-  imageAspectRatio?: string;
-}
-
-const GiftCardSettings: React.FC<GiftCardSettingsProps> = ({
-  config,
-  onChange,
-  expiryMonths,
-  onExpiryChange,
-  imageAspectRatio = '16:9',
-}) => {
-  const thumbnailStyle = getListingThumbnailStyle(imageAspectRatio);
-  const fileInputRefs = useRef<Record<number, HTMLInputElement | null>>({});
-
-  const updateDenomination = (index: number, field: keyof Denomination, value: any) => {
-    const updated = [...config.denominations];
-    updated[index] = { ...updated[index], [field]: value };
-    onChange({ ...config, denominations: updated });
-  };
-
-  const addDenomination = () => {
-    onChange({
-      ...config,
-      denominations: [...config.denominations, { value: '', image_url: null }],
-    });
-  };
-
-  const removeDenomination = (index: number) => {
-    if (config.denominations.length <= 1) return;
-    const updated = config.denominations.filter((_, i) => i !== index);
-    onChange({ ...config, denominations: updated });
-  };
-
-  const handleDenominationImage = async (index: number, file: File) => {
-    const validTypes = ['image/jpeg', 'image/png', 'image/webp'];
-    if (!validTypes.includes(file.type)) return;
-
-    const fileExt = file.name.split('.').pop();
-    const fileName = `denomination-${Date.now()}-${index}.${fileExt}`;
-    const filePath = `products/${fileName}`;
-
-    const { error } = await supabase.storage.from('products').upload(filePath, file);
-    if (error) {
-      console.error('Error uploading denomination image:', error);
-      return;
-    }
-
-    const { data: { publicUrl } } = supabase.storage.from('products').getPublicUrl(filePath);
-    updateDenomination(index, 'image_url', publicUrl);
-  };
-
-  const handleValueBlur = (index: number) => {
-    const raw = config.denominations[index].value;
-    if (raw === '') return;
-    const num = parseFloat(raw);
-    if (!isNaN(num)) {
-      updateDenomination(index, 'value', num.toFixed(2));
-    }
-  };
-
-  const handleCustomFieldBlur = (field: 'custom_min' | 'custom_max' | 'custom_multiples_of') => {
-    const raw = config[field];
-    if (raw === '') return;
-    const num = parseFloat(raw);
-    if (!isNaN(num)) {
-      onChange({ ...config, [field]: num.toFixed(2) });
-    }
-  };
-
-  return (
-    <div className="flex flex-col gap-4 pt-4 border-t border-border-primary self-stretch">
-      <h2 className="text-label-primary text-xl font-semibold">Gift Card Settings</h2>
-
-      {/* Expires in - matching waiver form pattern */}
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="expiry-months">Expires in</Label>
-        <div className="flex items-center gap-3">
-          <Input
-            id="expiry-months"
-            type="text"
-            inputMode="numeric"
-            value={expiryMonths}
-            onChange={(e) => onExpiryChange(e.target.value)}
-            className="bg-surface-secondary w-24"
-          />
-          <span className="text-label-primary">Months</span>
-        </div>
-        <p className="text-label-secondary text-sm">
-          How long the gift card will remain valid after purchase.
-        </p>
-      </div>
-
-      {/* Denominations */}
-      <div className="flex flex-col gap-3">
-        <Label>Denominations</Label>
-        <div className="flex flex-col gap-0 divide-y divide-border-primary">
-          {config.denominations.map((denom, index) => (
-            <div key={index} className="flex items-center gap-3 py-3">
-              {/* Denomination image thumbnail */}
-              <label className="cursor-pointer flex-shrink-0 group">
-                <input
-                  ref={(el) => { fileInputRefs.current[index] = el; }}
-                  type="file"
-                  accept="image/jpeg,image/png,image/webp"
-                  onChange={(e) => {
-                    const file = e.target.files?.[0];
-                    if (file) handleDenominationImage(index, file);
-                  }}
-                  className="hidden"
-                />
-                <div style={thumbnailStyle} className="rounded-md bg-surface-secondary border border-border-primary flex items-center justify-center overflow-hidden group-hover:opacity-80 transition-opacity">
-                  {denom.image_url ? (
-                    <img src={denom.image_url} alt="" className="w-full h-full object-cover" />
-                  ) : (
-                    <IconGiftCard className="w-4 h-4 fill-fill-secondary" />
-                  )}
-                </div>
-              </label>
-
-              {/* Value input with £ prefix */}
-              <div className="relative flex-1">
-                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-label-secondary text-sm">£</span>
-                <Input
-                  type="text"
-                  inputMode="decimal"
-                  value={denom.value}
-                  onChange={(e) => updateDenomination(index, 'value', e.target.value)}
-                  onBlur={() => handleValueBlur(index)}
-                  className="pl-7"
-                />
-              </div>
-
-              {/* Remove button - danger soft icon pattern */}
-              {config.denominations.length > 1 && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => removeDenomination(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>
-          ))}
-        </div>
-
-        <Button variant="ghost" size="sm" onClick={addDenomination} withIcon className="self-start">
-          <IconPlusThick className="w-4 h-4" />
-          Add Denomination
-        </Button>
-      </div>
-
-      {/* Allow custom value toggle */}
-      <div className="flex flex-col gap-4 pt-4 border-t border-border-primary">
-        <label className="flex items-center gap-3 cursor-pointer">
-          <Switch
-            checked={config.allow_custom_value}
-            onCheckedChange={(checked) => onChange({ ...config, allow_custom_value: checked })}
-          />
-          <span className="text-label-primary text-sm font-medium">Allow custom value</span>
-        </label>
-
-        {config.allow_custom_value && (
-          <div className="flex flex-col gap-4">
-            <div className="flex gap-4">
-              <div className="flex flex-col gap-2 flex-1">
-                <Label htmlFor="custom-min">Min value</Label>
-                <div className="relative">
-                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-label-secondary text-sm">£</span>
-                  <Input
-                    id="custom-min"
-                    type="text"
-                    inputMode="decimal"
-                    value={config.custom_min}
-                    onChange={(e) => onChange({ ...config, custom_min: e.target.value })}
-                    onBlur={() => handleCustomFieldBlur('custom_min')}
-                    className="pl-7"
-                  />
-                </div>
-                <p className="text-label-secondary text-xs">
-                  Leave blank to default to the 'Multiples of' value.
-                </p>
-              </div>
-              <div className="flex flex-col gap-2 flex-1">
-                <Label htmlFor="custom-max">Max value</Label>
-                <div className="relative">
-                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-label-secondary text-sm">£</span>
-                  <Input
-                    id="custom-max"
-                    type="text"
-                    inputMode="decimal"
-                    value={config.custom_max}
-                    onChange={(e) => onChange({ ...config, custom_max: e.target.value })}
-                    onBlur={() => handleCustomFieldBlur('custom_max')}
-                    className="pl-7"
-                  />
-                </div>
-                <p className="text-label-secondary text-xs">
-                  Leave blank for no maximum.
-                </p>
-              </div>
-            </div>
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="custom-multiples">Multiples of</Label>
-              <div className="relative w-32">
-                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-label-secondary text-sm">£</span>
-                <Input
-                  id="custom-multiples"
-                  type="text"
-                  inputMode="decimal"
-                  value={config.custom_multiples_of}
-                  onChange={(e) => onChange({ ...config, custom_multiples_of: e.target.value })}
-                  onBlur={() => handleCustomFieldBlur('custom_multiples_of')}
-                  className="pl-7"
-                />
-              </div>
-              <p className="text-label-secondary text-xs">
-                e.g. if set to 5, customers can choose 10, 15, 20 etc.
-              </p>
-            </div>
-          </div>
-        )}
-      </div>
-      {/* Redemption & Delivery Options */}
-      <div className="flex flex-col gap-4 pt-4 border-t border-border-primary">
-        <label className="flex items-center gap-3 cursor-pointer">
-          <Switch
-            checked={!config.allow_partial_payment}
-            onCheckedChange={(checked) => onChange({ ...config, allow_partial_payment: !checked })}
-          />
-          <div className="flex flex-col">
-            <span className="text-label-primary text-sm font-medium">One time use</span>
-            <span className="text-label-secondary text-xs">The full gift card balance must be used in a single transaction.</span>
-          </div>
-        </label>
-
-        <label className="flex items-center gap-3 cursor-pointer">
-            <Switch
-              checked={config.allow_send_to_someone}
-              onCheckedChange={(checked) => onChange({ 
-                ...config, 
-                allow_send_to_someone: checked,
-                // Reset schedule delivery when send to someone is disabled
-                allow_schedule_delivery: checked ? config.allow_schedule_delivery : false,
-              })}
-            />
-            <div className="flex flex-col">
-              <span className="text-label-primary text-sm font-medium">Send to someone</span>
-              <span className="text-label-secondary text-xs">Allow purchasers to send the gift card directly to a recipient via email.</span>
-            </div>
-          </label>
-
-          {config.allow_send_to_someone && (
-            <label className="flex items-center gap-3 cursor-pointer">
-              <Switch
-                checked={config.allow_schedule_delivery}
-                onCheckedChange={(checked) => onChange({ ...config, allow_schedule_delivery: checked })}
-              />
-              <div className="flex flex-col">
-                <span className="text-label-primary text-sm font-medium">Schedule delivery date</span>
-                <span className="text-label-secondary text-xs">Allow purchasers to choose a future date for the gift card email to be sent.</span>
-              </div>
-            </label>
-          )}
-      </div>
-    </div>
-  );
-};
-
-export default GiftCardSettings;

package/src/v2/shadcn/_reference/products/PackageProductsSection.tsx

@@ -1,322 +0,0 @@
-import React, { useEffect, useState, useMemo } from 'react';
-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 { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Label } from '../ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../ui/select';
-import { IconPlus, IconDelete, IconGripVertical } from '../../../icons';
-import { supabase } from '@/integrations/supabase/client';
-
-export interface PackageItem {
-  id: string; // unique key for sortable
-  product_id: string;
-  product_name?: string;
-  item_type: 'product' | 'break';
-  break_minutes?: number;
-  break_label?: string;
-}
-
-interface PackageProductsSectionProps {
-  providerId?: string;
-  items: PackageItem[];
-  onChange: (items: PackageItem[]) => void;
-  packageMode?: 'fixed' | 'flexible';
-}
-
-interface ProductOption {
-  id: string;
-  name: string;
-  type: string;
-  duration: number | null;
-}
-
-// ─── Sortable Item Row ──────────────────────────────────────────────────────
-const SortablePackageItem: React.FC<{
-  item: PackageItem;
-  index: number;
-  products: ProductOption[];
-  loading: boolean;
-  onUpdate: (index: number, field: keyof PackageItem, value: any) => void;
-  onRemove: (index: number) => void;
-}> = ({ item, index, products, loading, onUpdate, onRemove }) => {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: item.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-  };
-
-  return (
-    <div ref={setNodeRef} style={style} className="flex items-end gap-2">
-      <div
-        {...attributes}
-        {...listeners}
-        className="p-1.5 mb-1 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>
-
-      {item.item_type === 'break' ? (
-        <div className="flex-1 flex items-end gap-3">
-          <div className="flex-1">
-            <Input
-              type="text"
-              value={item.break_label ?? 'Activity Break'}
-              onChange={(e) => onUpdate(index, 'break_label', e.target.value)}
-              placeholder="e.g. Safety Briefing"
-              className="bg-surface-secondary border-dashed border-border-secondary"
-            />
-          </div>
-          <div className="w-32">
-            <div className="flex items-center gap-2">
-              <Input
-                type="number"
-                value={item.break_minutes ?? ''}
-                onChange={(e) => onUpdate(index, 'break_minutes', e.target.value ? parseInt(e.target.value) : '')}
-                placeholder="15"
-                className="w-20"
-                min={1}
-              />
-              <span className="text-label-secondary text-xs">min</span>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div className="flex-1">
-          <Select
-            value={item.product_id}
-            onValueChange={(val) => onUpdate(index, 'product_id', val)}
-          >
-            <SelectTrigger className="bg-surface-primary">
-              <SelectValue placeholder={loading ? 'Loading...' : 'Select product'} />
-            </SelectTrigger>
-            <SelectContent className="bg-surface-primary border border-border-primary z-50">
-              {products.map((product) => (
-                <SelectItem key={product.id} value={product.id}>
-                  {product.name}
-                </SelectItem>
-              ))}
-              {products.length === 0 && !loading && (
-                <div className="px-2 py-1.5 text-label-secondary text-sm">
-                  No products available
-                </div>
-              )}
-            </SelectContent>
-          </Select>
-        </div>
-      )}
-
-      <Button
-        variant="ghost"
-        size="icon"
-        type="button"
-        onClick={() => onRemove(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>
-  );
-};
-
-// ─── Main Component ─────────────────────────────────────────────────────────
-let nextId = 1;
-const generateItemId = () => `pkg-item-${Date.now()}-${nextId++}`;
-
-const PackageProductsSection: React.FC<PackageProductsSectionProps> = ({
-  providerId,
-  items,
-  onChange,
-  packageMode,
-}) => {
-  const [products, setProducts] = useState<ProductOption[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
-  );
-
-  useEffect(() => {
-    const fetchProducts = async () => {
-      if (!providerId) return;
-      setLoading(true);
-      try {
-        const { data, error } = await supabase
-          .from('products')
-          .select('id, name, type, duration')
-          .eq('provider_id', providerId)
-          .neq('type', 'packages')
-          .eq('status', 'active')
-          .order('name');
-
-        if (error) throw error;
-        setProducts(data || []);
-      } catch (error) {
-        console.error('Error fetching products:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchProducts();
-  }, [providerId]);
-
-  // Ensure all items have an id for sortable
-  useEffect(() => {
-    const needsIds = items.some(item => !item.id);
-    if (needsIds) {
-      onChange(items.map(item => item.id ? item : { ...item, id: generateItemId() }));
-    }
-  }, []);
-
-  const calculatedDuration = useMemo(() => {
-    let total = 0;
-    for (const item of items) {
-      if (item.item_type === 'break') {
-        total += item.break_minutes || 0;
-      } else if (item.product_id) {
-        const product = products.find(p => p.id === item.product_id);
-        if (product?.duration) {
-          total += product.duration;
-        }
-      }
-    }
-    return total;
-  }, [items, products]);
-
-  const addProduct = () => {
-    onChange([...items, { id: generateItemId(), product_id: '', item_type: 'product' }]);
-  };
-
-  const addBreak = () => {
-    onChange([...items, { id: generateItemId(), product_id: '', item_type: 'break', break_minutes: 15, break_label: 'Activity Break' }]);
-  };
-
-  const updateItem = (index: number, field: keyof PackageItem, value: any) => {
-    const newItems = [...items];
-    if (field === 'product_id') {
-      const product = products.find(p => p.id === value);
-      newItems[index] = { ...newItems[index], product_id: value, product_name: product?.name };
-    } else {
-      newItems[index] = { ...newItems[index], [field]: value };
-    }
-    onChange(newItems);
-  };
-
-  const removeItem = (index: number) => {
-    onChange(items.filter((_, i) => i !== index));
-  };
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-
-    const oldIndex = items.findIndex(item => item.id === active.id);
-    const newIndex = items.findIndex(item => item.id === over.id);
-    onChange(arrayMove(items, oldIndex, newIndex));
-  };
-
-  const showBreaks = packageMode !== 'flexible';
-  const itemIds = items.map(item => item.id).filter(Boolean);
-
-  return (
-    <div className="flex flex-col gap-6 pt-4 border-t border-border-primary">
-      <div>
-        <h2 className="text-label-primary text-xl font-semibold">Package Contents</h2>
-        <p className="text-label-secondary text-sm mt-1">
-          {packageMode === 'flexible'
-            ? 'Add the products included in this package. Guests will choose their own times for each activity.'
-            : 'Build your package schedule. Add products and timed breaks to define the booking timeline.'}
-        </p>
-      </div>
-
-      {items.length === 0 && (
-        <p className="text-label-secondary text-sm">No items added yet.</p>
-      )}
-
-      {items.length > 0 && (
-        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-          <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
-            <div className="flex flex-col gap-3">
-              {items.map((item, index) => (
-                <SortablePackageItem
-                  key={item.id}
-                  item={item}
-                  index={index}
-                  products={products}
-                  loading={loading}
-                  onUpdate={updateItem}
-                  onRemove={removeItem}
-                />
-              ))}
-            </div>
-          </SortableContext>
-        </DndContext>
-      )}
-
-      <div className="flex gap-2">
-        <Button type="button" variant="outline" onClick={addProduct} className="w-fit" withIcon>
-          <IconPlus className="w-4 h-4 fill-fill-secondary" />
-          Add Product
-        </Button>
-        {showBreaks && (
-          <Button type="button" variant="outline" onClick={addBreak} className="w-fit" withIcon>
-            <IconPlus className="w-4 h-4 fill-fill-secondary" />
-            Add Break
-          </Button>
-        )}
-      </div>
-
-      {/* Calculated Average Duration */}
-      <div className="flex flex-col gap-2 pt-4 border-t border-border-primary">
-        <Label>Average Package Duration</Label>
-        <p className="text-label-secondary text-sm">
-          Automatically calculated from the total of all product durations and breaks.
-        </p>
-        <div className="flex items-center gap-2">
-          <span className="text-label-primary text-sm font-medium">
-            {calculatedDuration > 0
-              ? `${Math.floor(calculatedDuration / 60) > 0 ? `${Math.floor(calculatedDuration / 60)}h ` : ''}${calculatedDuration % 60}min`
-              : '—'}
-          </span>
-          {calculatedDuration > 0 && (
-            <span className="text-label-secondary text-xs">({calculatedDuration} minutes)</span>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PackageProductsSection;