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

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

@@ -0,0 +1,173 @@
+import React from 'react';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
+import { IconPlus, IconCross } from '../../../icons';
+
+export interface PriceTier {
+  name: string;
+  price: number | '';
+}
+
+interface PricingSectionProps {
+  values: Record<string, any>;
+  onChange: (field: string, value: any) => void;
+  hideTypeSelector?: boolean;
+}
+
+const PricingSection: React.FC<PricingSectionProps> = ({
+  values,
+  onChange,
+  hideTypeSelector = false,
+}) => {
+  const pricingType = values.pricing_type || 'fixed';
+  const priceTiers: PriceTier[] = values.price_tiers || [{ name: '', price: '' }];
+
+  const handlePricingTypeChange = (type: string) => {
+    onChange('pricing_type', type);
+  };
+
+  const addPriceTier = () => {
+    const newTiers = [...priceTiers, { name: '', price: '' }];
+    onChange('price_tiers', newTiers);
+  };
+
+  const updatePriceTier = (index: number, field: 'name' | 'price', value: string | number) => {
+    const newTiers = [...priceTiers];
+    if (field === 'price') {
+      newTiers[index] = { ...newTiers[index], price: value === '' ? '' : Number(value) };
+    } else {
+      newTiers[index] = { ...newTiers[index], name: value as string };
+    }
+    onChange('price_tiers', newTiers);
+    
+    // Also update the main price field with the first tier's price for backwards compatibility
+    if (index === 0 && field === 'price') {
+      onChange('price', value === '' ? null : Number(value));
+    }
+  };
+
+  const removePriceTier = (index: number) => {
+    if (priceTiers.length <= 1) return; // Keep at least one tier
+    const newTiers = priceTiers.filter((_, i) => i !== index);
+    onChange('price_tiers', newTiers);
+    
+    // Update main price field with first tier's price
+    if (newTiers.length > 0) {
+      onChange('price', newTiers[0].price === '' ? null : newTiers[0].price);
+    }
+  };
+
+  const showTierNames = priceTiers.length > 1;
+
+  return (
+    <div className="flex flex-col gap-4 pt-4 border-t border-border-primary">
+      <h2 className="text-label-primary text-xl font-semibold">Pricing</h2>
+      
+      {/* Pricing Type Selection */}
+      {!hideTypeSelector && (
+        <RadioGroup 
+          value={pricingType} 
+          onValueChange={handlePricingTypeChange}
+          className="flex gap-4"
+        >
+          <label className={`flex items-center gap-2 px-4 py-2 rounded-lg border cursor-pointer transition-colors ${
+            pricingType === 'fixed' 
+              ? 'border-border-selected bg-surface-action-soft' 
+              : 'border-border-primary hover:border-border-hover'
+          }`}>
+            <RadioGroupItem value="fixed" id="pricing-fixed" />
+            <span className="text-label-primary">Fixed</span>
+          </label>
+          <label className={`flex items-center gap-2 px-4 py-2 rounded-lg border opacity-50 cursor-not-allowed ${
+              pricingType === 'variable' 
+                ? 'border-border-selected bg-surface-action-soft' 
+                : 'border-border-primary'
+            }`}>
+              <RadioGroupItem value="variable" id="pricing-variable" disabled />
+              <span className="text-label-tertiary">Variable</span>
+              <span className="text-xs text-label-tertiary">(Coming soon)</span>
+            </label>
+            <label className={`flex items-center gap-2 px-4 py-2 rounded-lg border opacity-50 cursor-not-allowed ${
+              pricingType === 'dynamic' 
+                ? 'border-border-selected bg-surface-action-soft' 
+                : 'border-border-primary'
+            }`}>
+              <RadioGroupItem value="dynamic" id="pricing-dynamic" disabled />
+              <span className="text-label-tertiary">Dynamic</span>
+              <span className="text-xs text-label-tertiary">(Coming soon)</span>
+            </label>
+        </RadioGroup>
+      )}
+
+      {/* Fixed Pricing Tiers */}
+      {pricingType === 'fixed' && (
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-2">
+            {priceTiers.map((tier, index) => (
+              <div key={index} className="flex items-center gap-3">
+                {showTierNames && (
+                  <div className="flex-1">
+                    {index === 0 && <Label className="text-xs text-label-tertiary mb-1 block">Tier Name</Label>}
+                    <Input
+                      type="text"
+                      value={tier.name}
+                      onChange={(e) => updatePriceTier(index, 'name', e.target.value)}
+                      
+                      className="w-full"
+                    />
+                  </div>
+                )}
+                <div className={showTierNames ? 'w-32' : 'w-40'}>
+                  {index === 0 && <Label className="text-xs text-label-tertiary mb-1 block">Price</Label>}
+                  <div className="relative">
+                    <span className="absolute left-3 top-1/2 -translate-y-1/2 text-label-secondary">£</span>
+                    <Input
+                      type="text"
+                      inputMode="decimal"
+                      defaultValue={tier.price === '' ? '' : typeof tier.price === 'number' ? tier.price.toFixed(2) : tier.price}
+                      key={`tier-${index}-${tier.price}`}
+                      onBlur={(e) => {
+                        const raw = e.target.value.trim();
+                        if (raw === '') return;
+                        const v = parseFloat(parseFloat(raw).toFixed(2));
+                        if (!isNaN(v)) {
+                          updatePriceTier(index, 'price', v);
+                          e.target.value = v.toFixed(2);
+                        }
+                      }}
+                      className="pl-7"
+                    />
+                  </div>
+                </div>
+                {priceTiers.length > 1 && (
+                  <button
+                    type="button"
+                    onClick={() => removePriceTier(index)}
+                    className={`p-1.5 text-label-tertiary hover:text-label-danger transition-colors ${index === 0 ? 'mt-5' : ''}`}
+                  >
+                    <IconCross className="w-4 h-4 fill-current" />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+          
+          <Button
+            type="button"
+            variant="outline"
+            onClick={addPriceTier}
+            className="w-fit"
+            withIcon
+          >
+            <IconPlus className="w-4 h-4 fill-fill-secondary" />
+            Add Price
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PricingSection;

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

@@ -0,0 +1,353 @@
+import React, { useEffect, useState } from 'react';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Textarea } from '../ui/textarea';
+import { Checkbox } from '../ui/checkbox';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import { getFieldsForType, ProductFieldConfig } from './productTypeConfig';
+import { supabase } from '@/integrations/supabase/client';
+
+interface Zone {
+  id: string;
+  name: string;
+}
+
+interface Resource {
+  id: string;
+  name: string;
+  instances: number;
+}
+
+interface ProductTypeFieldsProps {
+  productType: string;
+  values: Record<string, any>;
+  onChange: (field: string, value: any) => void;
+  showErrors?: boolean;
+  providerId?: string;
+  filterFields?: string[];
+  selectedZoneId?: string;
+}
+
+const ProductTypeFields: React.FC<ProductTypeFieldsProps> = ({
+  productType,
+  values,
+  onChange,
+  showErrors = false,
+  providerId,
+  filterFields,
+  selectedZoneId,
+}) => {
+  const allFields = getFieldsForType(productType);
+  const fields = filterFields 
+    ? allFields.filter(f => filterFields.includes(f.name))
+    : allFields;
+  const [zones, setZones] = useState<Zone[]>([]);
+  const [loadingZones, setLoadingZones] = useState(false);
+  const [resources, setResources] = useState<Resource[]>([]);
+  const [loadingResources, setLoadingResources] = useState(false);
+
+  // Fetch zones when provider context is available
+  useEffect(() => {
+    const fetchZones = async () => {
+      if (!providerId) return;
+      
+      setLoadingZones(true);
+      try {
+        const { data, error } = await supabase
+          .from('zones')
+          .select('id, name')
+          .eq('provider_id', providerId)
+          .eq('status', 'active')
+          .order('display_order');
+        
+        if (error) throw error;
+        setZones(data || []);
+      } catch (error) {
+        console.error('Error fetching zones:', error);
+      } finally {
+        setLoadingZones(false);
+      }
+    };
+
+    fetchZones();
+  }, [providerId]);
+
+  // Fetch resources when zone is selected
+  useEffect(() => {
+    const fetchResources = async () => {
+      const zoneId = selectedZoneId || values.zone_id;
+      if (!zoneId) {
+        setResources([]);
+        return;
+      }
+      
+      setLoadingResources(true);
+      try {
+        const { data, error } = await supabase
+          .from('resources')
+          .select('id, name, instances')
+          .eq('zone_id', zoneId)
+          .order('name');
+        
+        if (error) throw error;
+        setResources(data || []);
+      } catch (error) {
+        console.error('Error fetching resources:', error);
+      } finally {
+        setLoadingResources(false);
+      }
+    };
+
+    fetchResources();
+  }, [selectedZoneId, values.zone_id]);
+
+  const renderField = (field: ProductFieldConfig) => {
+    // Check conditional visibility
+    if (field.conditionalOn) {
+      const conditionMet = values[field.conditionalOn.field] === field.conditionalOn.value;
+      if (!conditionMet) return null;
+    }
+
+    const value = values[field.name] ?? '';
+
+    switch (field.type) {
+      case 'text':
+        return (
+          <div key={field.name} className="flex flex-col gap-2">
+            <Label htmlFor={field.name}>{field.label}</Label>
+            <div className="flex items-center gap-2">
+              <Input
+                id={field.name}
+                type="text"
+                value={value}
+                onChange={(e) => onChange(field.name, e.target.value)}
+                placeholder={field.placeholder}
+                className="flex-1"
+              />
+              {field.unit && (
+                <span className="text-label-secondary text-sm">{field.unit}</span>
+              )}
+            </div>
+          </div>
+        );
+
+      case 'number':
+        return (
+          <div key={field.name} className="flex flex-col gap-2">
+            <Label htmlFor={field.name}>{field.label}</Label>
+            <div className="flex items-center gap-2">
+              {field.unit === '£' && (
+                <span className="text-label-secondary text-sm">{field.unit}</span>
+              )}
+              <Input
+                id={field.name}
+                type="number"
+                value={value}
+                onChange={(e) => onChange(field.name, e.target.value ? parseFloat(e.target.value) : '')}
+                placeholder={field.placeholder}
+                className="flex-1"
+                min={0}
+                step={field.unit === '£' ? '0.01' : '1'}
+              />
+              {field.unit && field.unit !== '£' && (
+                <span className="text-label-secondary text-sm">{field.unit}</span>
+              )}
+            </div>
+          </div>
+        );
+
+      case 'textarea':
+        return (
+          <div key={field.name} className="flex flex-col gap-2">
+            <Label htmlFor={field.name}>{field.label}</Label>
+            <Textarea
+              id={field.name}
+              value={value}
+              onChange={(e) => onChange(field.name, e.target.value)}
+              placeholder={field.placeholder}
+              rows={3}
+            />
+          </div>
+        );
+
+      case 'resource-select':
+        // Only render resource select if we have a zone selected
+        const zoneId = selectedZoneId || values.zone_id;
+        if (!zoneId) {
+          return (
+            <div key={field.name} className="flex flex-col gap-2">
+              <Label htmlFor={field.name}>{field.label}</Label>
+              <p className="text-label-tertiary text-sm">Select a zone first</p>
+            </div>
+          );
+        }
+        
+        return (
+          <div key={field.name} className="flex flex-col gap-2">
+            <Label htmlFor={field.name}>{field.label}</Label>
+            <Select value={value} onValueChange={(val) => onChange(field.name, val)}>
+              <SelectTrigger className="bg-surface-primary">
+                <SelectValue placeholder={loadingResources ? "Loading resources..." : "Select resource"} />
+              </SelectTrigger>
+              <SelectContent className="bg-surface-primary border border-border-primary z-50">
+                {resources.map((resource) => (
+                  <SelectItem key={resource.id} value={resource.id}>
+                    {resource.name} {resource.instances > 1 ? `(${resource.instances} available)` : ''}
+                  </SelectItem>
+                ))}
+                {resources.length === 0 && !loadingResources && (
+                  <div className="px-2 py-1.5 text-label-secondary text-sm">
+                    No resources in this zone
+                  </div>
+                )}
+              </SelectContent>
+            </Select>
+          </div>
+        );
+
+      case 'select':
+        return (
+          <div key={field.name} className="flex flex-col gap-2">
+            <Label htmlFor={field.name}>{field.label}</Label>
+            <Select value={value} onValueChange={(val) => onChange(field.name, val)}>
+              <SelectTrigger className="bg-surface-primary">
+                <SelectValue placeholder={`Select ${field.label.toLowerCase()}`} />
+              </SelectTrigger>
+              <SelectContent className="bg-surface-primary border border-border-primary z-50">
+                {field.options?.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        );
+
+      case 'zone-select':
+        // Only render zone select if we have a provider context
+        if (!providerId) return null;
+        
+        return (
+          <div key={field.name} className="flex flex-col gap-2">
+            <Label htmlFor={field.name}>{field.label}</Label>
+            <Select value={value} onValueChange={(val) => onChange(field.name, val)}>
+              <SelectTrigger className="bg-surface-primary">
+                <SelectValue placeholder={loadingZones ? "Loading zones..." : "Select zone"} />
+              </SelectTrigger>
+              <SelectContent className="bg-surface-primary border border-border-primary z-50">
+                {zones.map((zone) => (
+                  <SelectItem key={zone.id} value={zone.id}>
+                    {zone.name}
+                  </SelectItem>
+                ))}
+                {zones.length === 0 && !loadingZones && (
+                  <div className="px-2 py-1.5 text-label-secondary text-sm">
+                    No zones available
+                  </div>
+                )}
+              </SelectContent>
+            </Select>
+          </div>
+        );
+
+      case 'checkbox':
+        return (
+          <div key={field.name} className="flex items-center gap-3">
+            <Checkbox
+              id={field.name}
+              checked={value === true}
+              onCheckedChange={(checked) => onChange(field.name, checked)}
+            />
+            <Label htmlFor={field.name} className="cursor-pointer">
+              {field.label}
+            </Label>
+          </div>
+        );
+
+      case 'date':
+        return (
+          <div key={field.name} className="flex flex-col gap-2">
+            <Label htmlFor={field.name}>{field.label}</Label>
+            <Input
+              id={field.name}
+              type="date"
+              value={value}
+              onChange={(e) => onChange(field.name, e.target.value)}
+            />
+          </div>
+        );
+
+      case 'time':
+        return (
+          <div key={field.name} className="flex flex-col gap-2">
+            <Label htmlFor={field.name}>{field.label}</Label>
+            <Input
+              id={field.name}
+              type="time"
+              value={value}
+              onChange={(e) => onChange(field.name, e.target.value)}
+            />
+          </div>
+        );
+
+      case 'duration-hours-minutes':
+        // Get hours and minutes values for this duration field
+        const hoursValue = values[`${field.name}_hours`] ?? '';
+        const minutesValue = values[`${field.name}_minutes`] ?? '';
+        
+        return (
+          <div key={field.name} className="flex flex-col gap-2">
+            <Label>{field.label}</Label>
+            <div className="flex items-center gap-3">
+              <div className="flex items-center gap-2">
+                <Input
+                  id={`${field.name}_hours`}
+                  type="number"
+                  value={hoursValue}
+                  onChange={(e) => onChange(`${field.name}_hours`, e.target.value ? parseInt(e.target.value) : '')}
+                   
+                  className="w-20"
+                  min={0}
+                  max={23}
+                />
+                <span className="text-label-secondary text-sm">hours</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Input
+                  id={`${field.name}_minutes`}
+                  type="number"
+                  value={minutesValue}
+                  onChange={(e) => onChange(`${field.name}_minutes`, e.target.value ? parseInt(e.target.value) : '')}
+                  
+                  className="w-20"
+                  min={0}
+                  max={59}
+                />
+                <span className="text-label-secondary text-sm">minutes</span>
+              </div>
+            </div>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  if (!productType) return null;
+
+  return (
+    <div className="flex flex-col gap-4">
+      {fields.map(renderField)}
+    </div>
+  );
+};
+
+export default ProductTypeFields;

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

@@ -0,0 +1,95 @@
+import React from 'react';
+
+interface ProductTypeIconProps {
+  type: string;
+  className?: string;
+  size?: number;
+}
+
+// Inline SVG components using the project's icon set for instant rendering
+const ActivityIcon = ({ size = 20, className = '' }: { size?: number; className?: string }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={className} xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.8299 12.7899L12 13.4559V17H9.99997V12.05H10.015L15.2834 10.1325C15.5274 10.0386 15.7922 9.99162 16.0648 10.0008C17.1762 10.0281 18.1522 10.7567 18.4917 11.8204C18.678 12.4043 18.848 12.7984 19.0015 13.0025C19.9138 14.2155 21.3653 15 23 15V17C20.8253 17 18.8823 16.0083 17.5984 14.4526L16.9008 18.4085L19 20.17V27H17V21.1025L14.7307 19.1984L14.003 23.3253L7.10938 22.1098L7.45667 20.1401L12.3807 21.0084L13.8299 12.7899ZM17.5 9.5C16.3954 9.5 15.5 8.60457 15.5 7.5C15.5 6.39543 16.3954 5.5 17.5 5.5C18.6046 5.5 19.5 6.39543 19.5 7.5C19.5 8.60457 18.6046 9.5 17.5 9.5Z" fill="currentColor"/>
+  </svg>
+);
+
+const PackageIcon = ({ size = 20, className = '' }: { size?: number; className?: string }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={className} xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 3L27 9V23L16 29L5 23V9L16 3ZM16 5.311L7 10.1564V21.8436L16 26.689L25 21.8436V10.1564L16 5.311ZM16 19C13.2386 19 11 16.7614 11 14C11 11.2386 13.2386 9 16 9C18.7614 9 21 11.2386 21 14C21 16.7614 18.7614 19 16 19ZM16 17C17.6569 17 19 15.6569 19 14C19 12.3431 17.6569 11 16 11C14.3431 11 13 12.3431 13 14C13 15.6569 14.3431 17 16 17Z" fill="currentColor"/>
+  </svg>
+);
+
+const TimeIcon = ({ size = 20, className = '' }: { size?: number; className?: string }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={className} xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 26C10.4771 26 6 21.5228 6 16C6 10.4771 10.4771 6 16 6C21.5228 6 26 10.4771 26 16C26 21.5228 21.5228 26 16 26ZM16 24C20.4183 24 24 20.4183 24 16C24 11.5817 20.4183 8 16 8C11.5817 8 8 11.5817 8 16C8 20.4183 11.5817 24 16 24ZM17 16H21V18H15V11H17V16Z" fill="currentColor"/>
+  </svg>
+);
+
+const TicketIcon = ({ size = 20, className = '' }: { size?: number; className?: string }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={className} xmlns="http://www.w3.org/2000/svg">
+    <path d="M25.0049 6.99976C25.5572 6.99976 26.0049 7.44747 26.0049 7.99976V13.4998C24.6242 13.4998 23.5049 14.6191 23.5049 15.9998C23.5049 17.3805 24.6242 18.4998 26.0049 18.4998V23.9998C26.0049 24.5521 25.5572 24.9998 25.0049 24.9998H7.00488C6.4526 24.9998 6.00488 24.5521 6.00488 23.9998V18.4998C7.38559 18.4998 8.50488 17.3805 8.50488 15.9998C8.50488 14.6191 7.38559 13.4998 6.00488 13.4998V7.99976C6.00488 7.44747 6.4526 6.99976 7.00488 6.99976H25.0049ZM24.0049 8.99976H8.00488V11.9678L8.16077 12.0488C9.49935 12.7808 10.4252 14.1733 10.5 15.788L10.5049 15.9998C10.5049 17.704 9.55755 19.1869 8.16077 19.9507L8.00488 20.0308V22.9998H24.0049V20.0308L23.849 19.9507C22.5104 19.2187 21.5846 17.8263 21.5098 16.2116L21.5049 15.9998C21.5049 14.2956 22.4522 12.8126 23.849 12.0488L24.0049 11.9678V8.99976Z" fill="currentColor"/>
+  </svg>
+);
+
+const FoodIcon = ({ size = 20, className = '' }: { size?: number; className?: string }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={className} xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.22235 7.80753L14.9399 14.525L12.1114 17.3535L8.22235 13.4644C6.66026 11.9023 6.66026 9.36963 8.22235 7.80753ZM18.2683 16.1464L17.4147 16.9999L24.4858 24.071L23.0716 25.4852L16.0005 18.4141L8.92946 25.4852L7.51525 24.071L16.854 14.7322C16.2664 13.2752 16.8738 11.1769 18.4754 9.5753C20.428 7.62268 23.119 7.1478 24.4858 8.51464C25.8526 9.88147 25.3778 12.5724 23.4251 14.525C21.8235 16.1267 19.7252 16.7341 18.2683 16.1464Z" fill="currentColor"/>
+  </svg>
+);
+
+const ClothingIcon = ({ size = 20, className = '' }: { size?: number; className?: string }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={className} xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.998 7C12.998 8.65685 14.3412 10 15.998 10C17.6549 10 18.998 8.65685 18.998 7H24.998C25.5503 7 25.998 7.44772 25.998 8V15C25.998 15.5523 25.5503 16 24.998 16H22.997L22.998 24C22.998 24.5523 22.5503 25 21.998 25H9.99805C9.44576 25 8.99805 24.5523 8.99805 24L8.99705 15.999L6.99805 16C6.44576 16 5.99805 15.5523 5.99805 15V8C5.99805 7.44772 6.44576 7 6.99805 7H12.998ZM23.998 8.999H20.581L20.5642 9.04018C19.8115 10.7223 18.1566 11.9125 16.2149 11.9954L15.998 12C13.9633 12 12.2124 10.7846 11.4319 9.04018L11.414 8.999H7.99805V13.999L10.9968 13.998L10.997 23H20.998L20.9968 14L23.998 13.999V8.999Z" fill="currentColor"/>
+  </svg>
+);
+
+const UserIcon = ({ size = 20, className = '' }: { size?: number; className?: string }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={className} xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 26C8 21.5817 11.5817 18 16 18C20.4183 18 24 21.5817 24 26H22C22 22.6863 19.3137 20 16 20C12.6863 20 10 22.6863 10 26H8ZM16 17C12.685 17 10 14.315 10 11C10 7.685 12.685 5 16 5C19.315 5 22 7.685 22 11C22 14.315 19.315 17 16 17ZM16 15C18.21 15 20 13.21 20 11C20 8.79 18.21 7 16 7C13.79 7 12 8.79 12 11C12 13.21 13.79 15 16 15Z" fill="currentColor"/>
+  </svg>
+);
+
+const GiftCardIcon = ({ size = 20, className = '' }: { size?: number; className?: string }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={className} xmlns="http://www.w3.org/2000/svg">
+    <path d="M5 6C4.44772 6 4 6.44772 4 7V12H8C9.10457 12 10 12.8954 10 14C10 15.1046 9.10457 16 8 16H4V26C4 26.5523 4.44772 27 5 27H27C27.5523 27 28 26.5523 28 26V16H24C22.8954 16 22 15.1046 22 14C22 12.8954 22.8954 12 24 12H28V7C28 6.44772 27.5523 6 27 6H5ZM6 8H26V10H24C22.3431 10 21 11.3431 21 13C21 14.6569 22.3431 16 24 16H26V17H6V16H8C9.65685 16 11 14.6569 11 13C11 11.3431 9.65685 10 8 10H6V8ZM6 19H26V25H6V19Z" fill="currentColor" />
+  </svg>
+);
+
+const InfoCardIcon = ({ size = 20, className = '' }: { size?: number; className?: string }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={className} xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 10H25V22H7V10ZM6 8C5.44772 8 5 8.44772 5 9V23C5 23.5523 5.44772 24 6 24H26C26.5523 24 27 23.5523 27 23V9C27 8.44772 26.5523 8 26 8H6ZM17 13H23V15H17V13ZM22 17H17V19H22V17ZM10 17H11V20H13V15H10V17ZM13 12H11V14H13V12Z" fill="currentColor"/>
+  </svg>
+);
+
+const TelephoneIcon = ({ size = 20, className = '' }: { size?: number; className?: string }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={className} xmlns="http://www.w3.org/2000/svg">
+    <path d="M25 20.42V23.9561C25 24.4811 24.5941 24.9167 24.0705 24.9537C23.6331 24.9846 23.2763 25 23 25C14.1634 25 7 17.8366 7 9C7 8.72371 7.01545 8.36687 7.04635 7.9295C7.08337 7.40588 7.51894 7 8.04386 7H11.5801C11.8368 7 12.0518 7.19442 12.0775 7.4498C12.1007 7.67907 12.1222 7.86314 12.1421 8.00202C12.3443 9.41472 12.7575 10.7594 13.3487 12.003C13.4436 12.2026 13.3817 12.4416 13.2018 12.5701L11.0436 14.1118C12.3575 17.1811 14.8189 19.6425 17.8882 20.9565L19.4271 18.8019C19.5572 18.6199 19.799 18.5573 20.001 18.6532C21.2446 19.2439 22.5891 19.6566 24.0016 19.8584C24.1396 19.8782 24.3225 19.8995 24.5502 19.9225C24.8056 19.9483 25 20.1633 25 20.42Z" fill="currentColor"/>
+  </svg>
+);
+
+const iconComponents: Record<string, React.FC<{ size?: number; className?: string }>> = {
+  activity: ActivityIcon,
+  sessions: TimeIcon,
+  tickets: TicketIcon,
+  offers: TicketIcon,
+  memberships: UserIcon,
+  gift_cards: GiftCardIcon,
+  food_beverage: FoodIcon,
+  clothing: ClothingIcon,
+  item: TelephoneIcon,
+  packages: PackageIcon,
+};
+
+const ProductTypeIcon: React.FC<ProductTypeIconProps> = ({ 
+  type, 
+  className = '',
+  size = 20,
+}) => {
+  const IconComponent = iconComponents[type];
+  
+  if (!IconComponent) return null;
+  
+  return <IconComponent size={size} className={`text-label-primary ${className}`} />;
+};
+
+export default ProductTypeIcon;