@licklist/design 0.78.5-dev.92 → 0.78.5-dev.94

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

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

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

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

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

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

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