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

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

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

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