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

package/src/v2/shadcn/_reference/pricing/DynamicPricingTiersList.tsx

@@ -1,218 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate, useLocation, useParams } from 'react-router-dom';
-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 { supabase } from '@/integrations/supabase/client';
-import { useProvider } from '@/contexts/ProviderContext';
-import { useNotify } from '../../hooks/useNotify';
-import { Button } from '../ui/button';
-import { IconPlus, IconGripVertical } from '../../../icons';
-import DynamicPricingTierCard, { type DynamicPricingTier } from './DynamicPricingTierCard';
-
-const SortableTierCard: React.FC<{
-  tier: DynamicPricingTier;
-  onEdit: (tier: DynamicPricingTier) => void;
-  onDelete: (tier: DynamicPricingTier) => void;
-  onToggleActive: (tier: DynamicPricingTier) => void;
-}> = ({ tier, onEdit, onDelete, onToggleActive }) => {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: tier.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-  };
-
-  return (
-    <div ref={setNodeRef} style={style} className="flex items-center gap-0">
-      <div
-        {...attributes}
-        {...listeners}
-        className="p-1.5 rounded-md cursor-grab active:cursor-grabbing text-label-tertiary hover:text-label-secondary hover:bg-surface-secondary transition-colors flex-shrink-0"
-      >
-        <IconGripVertical size={20} />
-      </div>
-      <div className="flex-1 min-w-0">
-        <DynamicPricingTierCard
-          tier={tier}
-          onEdit={onEdit}
-          onDelete={onDelete}
-          onToggleActive={onToggleActive}
-        />
-      </div>
-    </div>
-  );
-};
-
-const DynamicPricingTiersList: React.FC = () => {
-  const { provider } = useProvider();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { companyId } = useParams();
-  const { showSuccess, showError } = useNotify();
-  const [tiers, setTiers] = useState<DynamicPricingTier[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
-  );
-
-  const fetchTiers = async () => {
-    if (!provider?.id) return;
-    setIsLoading(true);
-    const { data, error } = await supabase
-      .from('dynamic_pricing_tiers' as any)
-      .select('*')
-      .eq('provider_id', provider.id)
-      .eq('status', 'active')
-      .order('display_order', { ascending: true });
-
-    if (!error && data) {
-      setTiers((data as any[]).map(d => ({
-        ...d,
-        rules: Array.isArray(d.rules) ? d.rules : [],
-      })));
-    }
-    setIsLoading(false);
-  };
-
-  useEffect(() => {
-    fetchTiers();
-  }, [provider?.id]);
-
-  const getBasePath = () => {
-    const pathParts = location.pathname.split('/');
-    const providerType = pathParts.find(p => p === 'venue' || p === 'promoter');
-    const providerId = provider?.venue_id;
-    if (companyId) {
-      return `/company/${companyId}/${providerType}/${providerId}`;
-    }
-    return `/${providerType}/${providerId}`;
-  };
-
-  const handleCreate = () => {
-    navigate(`${getBasePath()}/settings/pricing/dynamic/add`);
-  };
-
-  const handleEdit = (tier: DynamicPricingTier) => {
-    navigate(`${getBasePath()}/settings/pricing/dynamic/edit/${tier.id}`);
-  };
-
-  const handleToggleActive = async (tier: DynamicPricingTier) => {
-    try {
-      const newState = !tier.is_active;
-      const { error } = await supabase
-        .from('dynamic_pricing_tiers' as any)
-        .update({ is_active: newState } as any)
-        .eq('id', tier.id);
-      if (error) throw error;
-      showSuccess(
-        newState ? 'Tier Activated' : 'Tier Deactivated',
-        `${tier.name} has been ${newState ? 'activated' : 'deactivated'}.`
-      );
-      await fetchTiers();
-    } catch (error) {
-      showError('Error', 'Failed to update tier status.');
-    }
-  };
-
-  const handleDragEnd = async (event: DragEndEvent) => {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-
-    const oldIndex = tiers.findIndex(t => t.id === active.id);
-    const newIndex = tiers.findIndex(t => t.id === over.id);
-    if (oldIndex === -1 || newIndex === -1) return;
-
-    const reordered = arrayMove(tiers, oldIndex, newIndex);
-    const updated = reordered.map((t, i) => ({ ...t, display_order: i }));
-    setTiers(updated);
-
-    try {
-      const updates = updated.map(t =>
-        supabase.from('dynamic_pricing_tiers' as any).update({ display_order: t.display_order } as any).eq('id', t.id)
-      );
-      const results = await Promise.all(updates);
-      const failed = results.find(r => r.error);
-      if (failed?.error) throw failed.error;
-    } catch (error) {
-      showError('Error', 'Failed to update tier order.');
-      await fetchTiers();
-    }
-  };
-
-  const handleDelete = async (tier: DynamicPricingTier) => {
-    try {
-      const { error } = await supabase
-        .from('dynamic_pricing_tiers' as any)
-        .update({ status: 'deleted' } as any)
-        .eq('id', tier.id);
-      if (error) throw error;
-      showSuccess('Tier Deleted', `${tier.name} has been deleted.`);
-      await fetchTiers();
-    } catch (error) {
-      showError('Error', 'Failed to delete tier.');
-    }
-  };
-
-  return (
-    <div className="flex flex-col gap-4 w-full">
-      <div className="flex items-center justify-between">
-        <h2 className="text-label-primary text-xl font-semibold">Dynamic Pricing Tiers</h2>
-        <Button variant="ghost" size="sm" onClick={handleCreate} withIcon>
-          <IconPlus className="w-4 h-4" />
-          New Tier
-        </Button>
-      </div>
-
-      {isLoading ? (
-        <p className="text-label-secondary text-sm py-8 text-center">Loading...</p>
-      ) : tiers.length === 0 ? (
-        <p className="text-label-tertiary text-sm py-8 text-left">
-          No dynamic pricing tiers configured. Create your first tier to define demand-based pricing adjustments.
-        </p>
-      ) : (
-        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-          <SortableContext items={tiers.map(t => t.id)} strategy={verticalListSortingStrategy}>
-            <div className="flex flex-col gap-3">
-              {tiers.map(tier => (
-                <SortableTierCard
-                  key={tier.id}
-                  tier={tier}
-                  onEdit={handleEdit}
-                  onDelete={handleDelete}
-                  onToggleActive={handleToggleActive}
-                />
-              ))}
-            </div>
-          </SortableContext>
-        </DndContext>
-      )}
-    </div>
-  );
-};
-
-export default DynamicPricingTiersList;