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

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

@@ -1,140 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Input } from '../ui/input';
-import { Label } from '../ui/label';
-import { Switch } from '../ui/switch';
-import { supabase } from '@/integrations/supabase/client';
-
-export interface PeriodPricingEntry {
-  id: string;
-  name: string;
-  description: string | null;
-  colour: string;
-  price: number | null;
-  has_custom_time: boolean;
-  dynamic_pricing_enabled?: boolean;
-}
-
-interface VariablePricingSectionProps {
-  providerId?: string;
-  standardPrice: number;
-  onStandardPriceChange: (price: number) => void;
-  periodPricing: PeriodPricingEntry[];
-  onPeriodPricingChange: (periods: PeriodPricingEntry[]) => void;
-  showDynamicPricingToggle?: boolean;
-  periodDpEnabled?: Record<string, boolean>;
-  onPeriodDpEnabledChange?: (map: Record<string, boolean>) => void;
-  standardDpEnabled?: boolean;
-  onStandardDpEnabledChange?: (enabled: boolean) => void;
-  hasDynamicTiers?: boolean;
-}
-
-const VariablePricingSection: React.FC<VariablePricingSectionProps> = ({
-  providerId,
-  standardPrice,
-  onStandardPriceChange,
-  periodPricing,
-  onPeriodPricingChange,
-  showDynamicPricingToggle = false,
-  periodDpEnabled = {},
-  onPeriodDpEnabledChange,
-  standardDpEnabled = true,
-  onStandardDpEnabledChange,
-  hasDynamicTiers = false,
-}) => {
-  // Fetch pricing periods from DB on mount
-  useEffect(() => {
-    if (!providerId || periodPricing.length > 0) return;
-
-    const fetchPeriods = async () => {
-      const { data } = await supabase
-        .from('pricing_periods')
-        .select('id, name, description, colour, rules')
-        .eq('provider_id', providerId)
-        .eq('status', 'active')
-        .eq('is_active', true)
-        .order('priority', { ascending: true });
-
-      if (data && data.length > 0) {
-        const periods = data.map(p => {
-          const rules = Array.isArray(p.rules) ? p.rules : [];
-          const hasCustomTime = rules.some((r: any) => r.is_24_hours === false);
-          return {
-            id: p.id,
-            name: p.name,
-            description: p.description,
-            colour: p.colour,
-            price: null,
-            has_custom_time: hasCustomTime,
-          };
-        });
-        onPeriodPricingChange(periods);
-      }
-    };
-
-    fetchPeriods();
-  }, [providerId]);
-
-  const updatePeriodPrice = (index: number, price: number | null) => {
-    const updated = [...periodPricing];
-    updated[index] = { ...updated[index], price };
-    onPeriodPricingChange(updated);
-  };
-
-  if (periodPricing.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="flex flex-col gap-4 pt-4 border-t border-border-primary">
-      <div className="flex flex-col gap-1">
-        <h2 className="text-label-primary text-xl font-semibold">Variable Pricing</h2>
-        <p className="text-label-secondary text-sm">Set prices for each pricing period. Leave empty to use the standard price.</p>
-      </div>
-
-      {/* Period Prices */}
-      <div className="flex flex-col gap-3">
-        {periodPricing.map((period, index) => (
-          <div key={period.id} className="flex flex-col gap-3 p-4 border border-border-primary rounded-lg">
-            <div className="flex items-center gap-4">
-              <span className="w-3 h-3 rounded-full flex-shrink-0" style={{ backgroundColor: period.colour }} />
-              <div className="flex-1 min-w-0">
-                <p className="text-label-primary text-sm font-medium">{period.name}</p>
-                {period.description && (
-                  <p className="text-label-secondary text-xs">{period.description}</p>
-                )}
-              </div>
-              <div className="flex items-center gap-1 flex-shrink-0">
-                <span className="text-label-secondary text-sm">£</span>
-                <Input
-                  type="text"
-                  inputMode="decimal"
-                  defaultValue={period.price == null ? '' : period.price.toFixed(2)}
-                  key={`period-${period.id}-${period.price}`}
-                  onBlur={(e) => {
-                    const raw = e.target.value.trim();
-                    if (raw === '') { updatePeriodPrice(index, null); return; }
-                    const v = parseFloat(parseFloat(raw).toFixed(2));
-                    updatePeriodPrice(index, isNaN(v) ? null : v);
-                    e.target.value = isNaN(v) ? '' : v.toFixed(2);
-                  }}
-                  className="w-24"
-                />
-              </div>
-            </div>
-            {showDynamicPricingToggle && hasDynamicTiers && (
-              <div className="flex items-center gap-2 pt-2 border-t border-border-primary">
-                <Switch
-                  checked={periodDpEnabled[period.id] !== false}
-                  onCheckedChange={(checked) => onPeriodDpEnabledChange?.({ ...periodDpEnabled, [period.id]: checked })}
-                />
-                <Label className="text-sm">Dynamic Pricing</Label>
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default VariablePricingSection;

package/src/v2/shadcn/_reference/products/productTypeConfig.ts

@@ -1,182 +0,0 @@
-// Product type field configurations
-
-export interface ProductFieldConfig {
-  name: string;
-  label: string;
-  type: 'text' | 'number' | 'textarea' | 'select' | 'checkbox' | 'date' | 'time' | 'zone-select' | 'resource-select' | 'duration-hours-minutes';
-  placeholder?: string;
-  options?: { value: string; label: string }[];
-  required?: boolean;
-  unit?: string;
-  conditionalOn?: { field: string; value: string };
-}
-
-export interface ProductTypeConfig {
-  value: string;
-  label: string;
-  icon: 'activity' | 'sessions' | 'tickets' | 'offers' | 'memberships' | 'gift_cards' | 'food_beverage' | 'clothing' | 'item' | 'packages';
-  fields: ProductFieldConfig[];
-}
-
-// Common fields for all product types (price is now handled by PricingSection)
-export const COMMON_FIELDS: ProductFieldConfig[] = [
-  { name: 'description', label: 'Description', type: 'textarea', placeholder: 'Enter product description' },
-];
-
-// Type-specific field configurations
-export const PRODUCT_TYPE_CONFIGS: ProductTypeConfig[] = [
-  {
-    value: 'activity',
-    label: 'Activity',
-    icon: 'activity',
-    fields: [
-      { name: 'zone_id', label: 'Zone', type: 'zone-select' },
-      { name: 'resource_id', label: 'Resource', type: 'resource-select' },
-      { name: 'capacity', label: 'Max Participants', type: 'number', placeholder: '10' },
-      { 
-        name: 'difficulty_level', 
-        label: 'Difficulty Level', 
-        type: 'select',
-        options: [
-          { value: 'beginner', label: 'Beginner' },
-          { value: 'intermediate', label: 'Intermediate' },
-          { value: 'advanced', label: 'Advanced' },
-          { value: 'all_levels', label: 'All Levels' },
-        ]
-      },
-    ],
-  },
-  {
-    value: 'offers',
-    label: 'Offers',
-    icon: 'offers',
-    fields: [
-      { name: 'original_price', label: 'Original Price', type: 'number', placeholder: '0.00', unit: '£' },
-      { name: 'validity_period', label: 'Validity Period', type: 'number', placeholder: '30', unit: 'days' },
-      { name: 'terms_conditions', label: 'Terms & Conditions', type: 'textarea', placeholder: 'Enter terms and conditions' },
-    ],
-  },
-  {
-    value: 'memberships',
-    label: 'Memberships',
-    icon: 'memberships',
-    fields: [
-      { 
-        name: 'billing_period', 
-        label: 'Billing Period', 
-        type: 'select',
-        options: [
-          { value: 'monthly', label: 'Monthly' },
-          { value: 'quarterly', label: 'Quarterly' },
-          { value: 'annually', label: 'Annually' },
-        ]
-      },
-      { name: 'benefits', label: 'Benefits', type: 'textarea', placeholder: 'List membership benefits' },
-      { name: 'auto_renew', label: 'Auto-renew by default', type: 'checkbox' },
-    ],
-  },
-  {
-    value: 'tickets',
-    label: 'Tickets',
-    icon: 'tickets',
-    fields: [
-      { name: 'event_date', label: 'Event Date', type: 'date' },
-      { name: 'event_time', label: 'Event Time', type: 'time' },
-      { name: 'seat_category', label: 'Seat Category', type: 'text', placeholder: 'e.g. Standard, VIP' },
-      { name: 'venue_location', label: 'Venue/Location', type: 'text', placeholder: 'Event location' },
-    ],
-  },
-  {
-    value: 'sessions',
-    label: 'Sessions',
-    icon: 'sessions',
-    fields: [
-      { name: 'zone_id', label: 'Zone', type: 'zone-select' },
-      { name: 'resource_id', label: 'Resource', type: 'resource-select' },
-      { name: 'duration', label: 'Duration', type: 'number', placeholder: '60', unit: 'minutes' },
-      { name: 'capacity', label: 'Max Participants', type: 'number', placeholder: '10' },
-      { 
-        name: 'session_type', 
-        label: 'Session Type', 
-        type: 'select',
-        options: [
-          { value: 'scheduled', label: 'Scheduled (Fixed time slots)' },
-          { value: 'rolling', label: 'Rolling (Interval start times)' },
-          { value: 'open', label: 'Open (Venue hours)' },
-        ]
-      },
-      { 
-        name: 'interval_minutes', 
-        label: 'Start Interval', 
-        type: 'select',
-        options: [
-          { value: '15', label: 'Every 15 minutes' },
-          { value: '30', label: 'Every 30 minutes' },
-          { value: '45', label: 'Every 45 minutes' },
-          { value: '60', label: 'Every hour' },
-        ],
-        conditionalOn: { field: 'session_type', value: 'rolling' }
-      },
-    ],
-  },
-  {
-    value: 'food_beverage',
-    label: 'Food & Beverage',
-    icon: 'food_beverage',
-    fields: [
-      { name: 'allergens', label: 'Allergens', type: 'text', placeholder: 'e.g. Nuts, Gluten, Dairy' },
-      { name: 'calories', label: 'Calories', type: 'number', placeholder: '0', unit: 'kcal' },
-      { name: 'dietary_tags', label: 'Dietary Tags', type: 'text', placeholder: 'e.g. Vegetarian, Vegan, Gluten-Free' },
-    ],
-  },
-  {
-    value: 'clothing',
-    label: 'Clothing',
-    icon: 'clothing',
-    fields: [
-      { name: 'sizes', label: 'Available Sizes', type: 'text', placeholder: 'e.g. S, M, L, XL' },
-      { name: 'colors', label: 'Available Colors', type: 'text', placeholder: 'e.g. Black, White, Navy' },
-      { name: 'material', label: 'Material', type: 'text', placeholder: 'e.g. 100% Cotton' },
-    ],
-  },
-  {
-    value: 'gift_cards',
-    label: 'Gift Card',
-    icon: 'gift_cards',
-    fields: [
-      { name: 'expiry_months', label: 'Expires in', type: 'number' },
-    ],
-  },
-  {
-    value: 'item',
-    label: 'Item',
-    icon: 'item',
-    fields: [
-      { name: 'stock_quantity', label: 'Stock Quantity', type: 'number', placeholder: '0' },
-      { name: 'dimensions', label: 'Dimensions', type: 'text', placeholder: 'e.g. 10x20x5 cm' },
-      { name: 'weight', label: 'Weight', type: 'number', placeholder: '0', unit: 'kg' },
-    ],
-  },
-  {
-    value: 'packages',
-    label: 'Package',
-    icon: 'packages',
-    fields: [
-    ],
-  },
-];
-
-export const getFieldsForType = (productType: string): ProductFieldConfig[] => {
-  const config = PRODUCT_TYPE_CONFIGS.find(c => c.value === productType);
-  return config ? [...COMMON_FIELDS, ...config.fields] : COMMON_FIELDS;
-};
-
-export const getTypeLabel = (productType: string): string => {
-  const config = PRODUCT_TYPE_CONFIGS.find(c => c.value === productType);
-  return config?.label || productType;
-};
-
-export const getTypeIcon = (productType: string): ProductTypeConfig['icon'] | undefined => {
-  const config = PRODUCT_TYPE_CONFIGS.find(c => c.value === productType);
-  return config?.icon;
-};

package/src/v2/shadcn/_reference/shared/BackButton.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Button } from '../ui/button';
-import { IconArrowLeft } from '../../../icons';
-import { cn } from '../../lib/utils';
-
-interface BackButtonProps {
-  /** Button label text */
-  label?: string;
-  /** If provided, navigates to this route. Otherwise navigates back in history. */
-  to?: string;
-  /** Custom click handler — overrides `to` and default behaviour */
-  onClick?: () => void;
-  className?: string;
-}
-
-const BackButton: React.FC<BackButtonProps> = ({
-  label = 'Back',
-  to,
-  onClick,
-  className,
-}) => {
-  const navigate = useNavigate();
-
-  const handleBack = () => {
-    if (onClick) {
-      onClick();
-    } else if (to) {
-      navigate(to);
-    } else if (window.history.length > 1) {
-      navigate(-1);
-    } else {
-      navigate('/');
-    }
-  };
-
-  return (
-    <Button
-      variant="ghost"
-      withIcon
-      onClick={handleBack}
-      className={cn('text-label-action hover:bg-surface-action-soft self-start mb-4', className)}
-    >
-      <IconArrowLeft className="fill-current" />
-      {label}
-    </Button>
-  );
-};
-
-export default BackButton;

package/src/v2/shadcn/_reference/shared/CancelConfirmationDialog.tsx

@@ -1,18 +0,0 @@
-// Backward-compatible re-exports pointing to the unified ConfirmationDialog
-import ConfirmationDialog from './ConfirmationDialog';
-
-export type CancelConfirmationDialogProps = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onConfirm: () => void;
-  mode?: 'create' | 'edit';
-  title?: string;
-  description?: string;
-};
-
-const CancelConfirmationDialog: React.FC<CancelConfirmationDialogProps> = (props) => (
-  <ConfirmationDialog variant="cancel" {...props} />
-);
-
-import React from 'react';
-export default CancelConfirmationDialog;

package/src/v2/shadcn/_reference/shared/ConfirmationDialog.tsx

@@ -1,136 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { cn } from '../../lib/utils';
-import { buttonVariants } from '../ui/button';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '../ui/alert-dialog';
-import { Input } from '../ui/input';
-import { Label } from '../ui/label';
-
-interface ConfirmationDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onConfirm: () => void;
-  variant: 'cancel' | 'delete';
-  title?: string;
-  description?: string;
-  /** For cancel variant: 'create' or 'edit' mode */
-  mode?: 'create' | 'edit';
-  /** For delete variant: item name requiring typed confirmation */
-  itemName?: string;
-}
-
-const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
-  open,
-  onOpenChange,
-  onConfirm,
-  variant,
-  title,
-  description,
-  mode = 'edit',
-  itemName,
-}) => {
-  const { t } = useTranslation(['Design']);
-  const [confirmationInput, setConfirmationInput] = useState('');
-
-  useEffect(() => {
-    if (!open) {
-      setConfirmationInput('');
-    }
-  }, [open]);
-
-  if (variant === 'cancel') {
-    const isCreate = mode === 'create';
-    const defaultTitle = isCreate ? t('discardTitle') : t('discardChangesTitle');
-    const defaultDescription = isCreate
-      ? t('discardProgressDesc')
-      : t('discardChangesDesc');
-    const actionLabel = isCreate ? t('discard') : t('discardChanges');
-    const cancelLabel = isCreate ? t('continue') : t('continueEditing');
-
-    return (
-      <AlertDialog open={open} onOpenChange={onOpenChange}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{title || defaultTitle}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {description || defaultDescription}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-
-          <AlertDialogFooter className="sm:justify-start">
-            <AlertDialogAction
-              onClick={onConfirm}
-              className={buttonVariants({ variant: "destructive" })}
-            >
-              {actionLabel}
-            </AlertDialogAction>
-            <AlertDialogCancel>{cancelLabel}</AlertDialogCancel>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    );
-  }
-
-  // Delete variant
-  const isDeleteEnabled = !itemName || confirmationInput === itemName;
-
-  const defaultDescription = itemName
-    ? t('deleteNamedItemDesc', { name: itemName })
-    : t('deleteItemDesc');
-
-  const handleConfirm = () => {
-    if (isDeleteEnabled) {
-      onConfirm();
-    }
-  };
-
-  return (
-    <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent className="z-50">
-        <AlertDialogHeader>
-          <AlertDialogTitle>{title || t('delete')}</AlertDialogTitle>
-          <AlertDialogDescription className="whitespace-pre-line">
-            {description || defaultDescription}
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-
-        {itemName && (
-          <div className="space-y-2">
-            <Label htmlFor="confirm-name" className="text-label-primary text-sm">
-              {t('typeWord')} <span className="font-semibold">{itemName}</span> {t('toConfirmDeletion')}
-            </Label>
-            <Input
-              id="confirm-name"
-              value={confirmationInput}
-              onChange={(e) => setConfirmationInput(e.target.value)}
-              placeholder={itemName}
-              className="w-full"
-            />
-          </div>
-        )}
-
-        <AlertDialogFooter className="sm:justify-start">
-          <AlertDialogAction
-            onClick={handleConfirm}
-            disabled={!isDeleteEnabled}
-            className={cn(buttonVariants({ variant: "destructive" }), "disabled:opacity-50 disabled:cursor-not-allowed")}
-          >
-            {t('delete')}
-          </AlertDialogAction>
-          <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-};
-
-export default ConfirmationDialog;

package/src/v2/shadcn/_reference/shared/DeleteConfirmationDialog.tsx

@@ -1,18 +0,0 @@
-// Backward-compatible re-export pointing to the unified ConfirmationDialog
-import React from 'react';
-import ConfirmationDialog from './ConfirmationDialog';
-
-export type DeleteConfirmationDialogProps = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onConfirm: () => void;
-  title: string;
-  description?: string;
-  itemName?: string;
-};
-
-const DeleteConfirmationDialog: React.FC<DeleteConfirmationDialogProps> = (props) => (
-  <ConfirmationDialog variant="delete" {...props} />
-);
-
-export default DeleteConfirmationDialog;