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

package/src/v2/shadcn/_reference/WaiversTemplatesSettings.tsx

@@ -1,416 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { supabase } from '@/integrations/supabase/client';
-import { useNotify } from '../hooks/useNotify';
-import { useProvider } from '@/contexts/ProviderContext';
-import { DataTable } from './tables/DataTable';
-import { ColumnConfig, RowAction } from './tables/types';
-import { Button } from './ui/button';
-import { IconPlus } from '../../icons';
-import EmptyState from './EmptyState';
-import DeleteConfirmationDialog from './shared/DeleteConfirmationDialog';
-import { cn } from '../lib/utils';
-
-interface WaiverTemplate {
-  id: string;
-  name: string;
-  content: string | null;
-  is_active: boolean;
-  is_published: boolean;
-  display_order: number;
-  created_at: string;
-  expires_in_months: number;
-}
-
-type TemplateStatus = 'active' | 'draft' | 'disabled';
-
-const TemplateStatusBadge: React.FC<{ status: TemplateStatus }> = ({ status }) => {
-  const getBgColor = () => {
-    switch (status) {
-      case 'active':
-        return 'bg-surface-colour-green-soft';
-      case 'draft':
-        return 'bg-surface-colour-purple-soft';
-      case 'disabled':
-        return 'bg-surface-colour-red-soft';
-      default:
-        return 'bg-surface-tertiary';
-    }
-  };
-
-  const getLabel = () => {
-    switch (status) {
-      case 'active':
-        return 'Active';
-      case 'draft':
-        return 'Draft';
-      case 'disabled':
-        return 'Disabled';
-      default:
-        return status;
-    }
-  };
-  
-  return (
-    <div className={cn(
-      "inline-flex justify-center items-center gap-2 border px-2 py-1 rounded-3xl border-colour-overlay",
-      getBgColor()
-    )}>
-      <span className="text-label-primary text-[10px] font-mono font-medium leading-[13px] whitespace-nowrap">
-        {getLabel()}
-      </span>
-    </div>
-  );
-};
-
-const WaiversTemplatesSettings: React.FC = () => {
-  const { provider } = useProvider();
-  const navigate = useNavigate();
-  const { showSuccess, showError } = useNotify();
-  const [templates, setTemplates] = useState<WaiverTemplate[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [sortKey, setSortKey] = useState<string>('name');
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [templateToDelete, setTemplateToDelete] = useState<WaiverTemplate | null>(null);
-  const waiversEnabled = provider?.waivers_enabled === true;
-
-  // Build URL prefix for navigation
-  const getUrlPrefix = () => {
-    if (!provider) return '';
-    const providerType = provider.type === 'venue' ? 'venue' : 'promoter';
-    const friendlyId = provider.venue_id || '01';
-    return provider.company_id 
-      ? `/company/${provider.company_id}/${providerType}/${friendlyId}`
-      : `/${providerType}/${friendlyId}`;
-  };
-
-  useEffect(() => {
-    if (provider) {
-      fetchTemplates();
-    }
-  }, [provider]);
-
-  const fetchTemplates = async () => {
-    if (!provider) return;
-
-    setIsLoading(true);
-    try {
-      const { data, error } = await supabase
-        .from('waiver_templates')
-        .select('*')
-        .eq('provider_id', provider.id)
-        .order('display_order', { ascending: true });
-
-      if (error) throw error;
-      setTemplates((data || []) as unknown as WaiverTemplate[]);
-    } catch (error) {
-      console.error('Error fetching waiver templates:', error);
-      showError('Failed to load waiver templates');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleSort = (key: string) => {
-    if (sortKey === key) {
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-      setSortKey(key);
-      setSortDirection('asc');
-    }
-  };
-
-  const sortedTemplates = useMemo(() => {
-    return [...templates].sort((a, b) => {
-      let aValue: any;
-      let bValue: any;
-
-      switch (sortKey) {
-        case 'name':
-          aValue = a.name?.toLowerCase() || '';
-          bValue = b.name?.toLowerCase() || '';
-          break;
-        case 'expires':
-          aValue = a.expires_in_months;
-          bValue = b.expires_in_months;
-          break;
-        default:
-          return 0;
-      }
-
-      if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1;
-      if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1;
-      return 0;
-    });
-  }, [templates, sortKey, sortDirection]);
-
-  const handleAddTemplate = () => {
-    if (!provider || !waiversEnabled) return;
-    const prefix = getUrlPrefix();
-    navigate(`${prefix}/settings/waivers/add`);
-  };
-
-  const handleEditTemplate = (template: WaiverTemplate) => {
-    const prefix = getUrlPrefix();
-    navigate(`${prefix}/settings/waivers/${template.id}/edit`);
-  };
-
-  const handleDeleteTemplate = (template: WaiverTemplate) => {
-    setTemplateToDelete(template);
-    setDeleteDialogOpen(true);
-  };
-
-  const confirmDeleteTemplate = async () => {
-    if (!templateToDelete) return;
-
-    try {
-      const { error } = await supabase
-        .from('waiver_templates')
-        .delete()
-        .eq('id', templateToDelete.id);
-
-      if (error) throw error;
-
-      showSuccess('Waiver template deleted');
-      setDeleteDialogOpen(false);
-      setTemplateToDelete(null);
-      await fetchTemplates();
-    } catch (error) {
-      console.error('Error deleting waiver template:', error);
-      showError('Failed to delete waiver template');
-    }
-  };
-
-  const handleSetActive = async (template: WaiverTemplate) => {
-    if (!waiversEnabled) {
-      showError('Enable waivers to change template status');
-      return;
-    }
-    
-    // Optimistic update: deactivate all others and activate this one
-    setTemplates(prev => prev.map(t => ({
-      ...t,
-      is_active: t.id === template.id,
-      is_published: t.id === template.id ? true : t.is_published,
-    })));
-
-    try {
-      const { error } = await supabase
-        .from('waiver_templates')
-        .update({ is_active: true, is_published: true })
-        .eq('id', template.id);
-
-      if (error) throw error;
-      showSuccess('Waiver activated');
-    } catch (error) {
-      console.error('Error activating template:', error);
-      showError('Failed to activate template');
-      // Revert on error
-      await fetchTemplates();
-    }
-  };
-
-  const handleDisable = async (template: WaiverTemplate) => {
-    if (!waiversEnabled) {
-      showError('Enable waivers to change template status');
-      return;
-    }
-    
-    // Optimistic update
-    setTemplates(prev => prev.map(t => 
-      t.id === template.id ? { ...t, is_active: false } : t
-    ));
-
-    try {
-      const { error } = await supabase
-        .from('waiver_templates')
-        .update({ is_active: false })
-        .eq('id', template.id);
-
-      if (error) throw error;
-      showSuccess('Waiver disabled');
-    } catch (error) {
-      console.error('Error disabling template:', error);
-      showError('Failed to disable template');
-      // Revert on error
-      await fetchTemplates();
-    }
-  };
-
-  const handlePublish = async (template: WaiverTemplate) => {
-    if (!waiversEnabled) {
-      showError('Enable waivers to publish template');
-      return;
-    }
-    
-    // Optimistic update
-    setTemplates(prev => prev.map(t => 
-      t.id === template.id ? { ...t, is_published: true, is_active: false } : t
-    ));
-
-    try {
-      const { error } = await supabase
-        .from('waiver_templates')
-        .update({ is_published: true, is_active: false })
-        .eq('id', template.id);
-
-      if (error) throw error;
-      showSuccess('Waiver published');
-    } catch (error) {
-      console.error('Error publishing template:', error);
-      showError('Failed to publish template');
-      // Revert on error
-      await fetchTemplates();
-    }
-  };
-
-  const getTemplateStatus = (template: WaiverTemplate): TemplateStatus => {
-    // Draft = not yet published
-    if (!template.is_published) return 'draft';
-    // If waivers are disabled globally, all published templates show as disabled
-    if (!waiversEnabled) return 'disabled';
-    // Active or disabled based on is_active flag
-    if (template.is_active) return 'active';
-    return 'disabled';
-  };
-
-  const formatExpiresIn = (months: number): string => {
-    if (months === 1) return '1 Month';
-    return `${months} Months`;
-  };
-
-  const columns: ColumnConfig<WaiverTemplate>[] = [
-    {
-      label: 'Waiver Name',
-      sortKey: 'name',
-      sortable: true,
-      width: 'flex-1',
-      render: (template) => (
-        <span className="text-label-primary text-[13px] font-semibold leading-4">
-          {template.name}
-        </span>
-      ),
-    },
-    {
-      label: 'Expires in',
-      sortKey: 'expires',
-      sortable: true,
-      width: 'w-[150px]',
-      render: (template) => (
-        <span className="text-label-primary text-[13px] font-normal leading-4">
-          {formatExpiresIn(template.expires_in_months)}
-        </span>
-      ),
-    },
-    {
-      label: 'Status',
-      width: 'w-[100px]',
-      render: (template) => (
-        <TemplateStatusBadge status={getTemplateStatus(template)} />
-      ),
-    },
-  ];
-
-  const rowActions = (template: WaiverTemplate): RowAction<WaiverTemplate>[] => {
-    const actions: RowAction<WaiverTemplate>[] = [
-      {
-        label: 'Edit',
-        onClick: handleEditTemplate,
-      },
-    ];
-
-    const status = getTemplateStatus(template);
-
-    // Only show status actions when waivers are enabled
-    if (waiversEnabled) {
-      if (status === 'draft') {
-        // Draft can be published (becomes disabled)
-        actions.push({
-          label: 'Publish',
-          onClick: handlePublish,
-        });
-      } else if (status === 'disabled') {
-        // Disabled can be set to active
-        actions.push({
-          label: 'Set as active',
-          onClick: handleSetActive,
-        });
-      } else if (status === 'active') {
-        // Active can be disabled
-        actions.push({
-          label: 'Disable',
-          onClick: handleDisable,
-        });
-      }
-    }
-
-    actions.push({
-      label: 'Delete',
-      onClick: handleDeleteTemplate,
-      variant: 'danger',
-    });
-
-    return actions;
-  };
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center py-12">
-        <span className="text-label-secondary">Loading templates...</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-4 w-full">
-      {/* Header with New Waiver button - only show when waivers enabled */}
-      {waiversEnabled && (
-        <div className="flex justify-end">
-          <Button
-            variant="ghost"
-            size="sm"
-            withIcon
-            onClick={handleAddTemplate}
-          >
-            <IconPlus className="fill-current" />
-            New Waiver
-          </Button>
-        </div>
-      )}
-
-      {/* Templates Table */}
-      {sortedTemplates.length > 0 ? (
-        <DataTable
-          data={sortedTemplates}
-          columns={columns}
-          keyExtractor={(template) => template.id}
-          rowActions={rowActions}
-          sortKey={sortKey}
-          sortDirection={sortDirection}
-          onSort={handleSort}
-          onRowClick={handleEditTemplate}
-        />
-      ) : (
-        <EmptyState
-          icon="Waivers"
-          title="No Waiver Templates"
-          description={waiversEnabled 
-            ? "Create your first waiver template to get started."
-            : "Enable waivers to create templates."
-          }
-        />
-      )}
-
-      <DeleteConfirmationDialog
-        open={deleteDialogOpen}
-        onOpenChange={setDeleteDialogOpen}
-        onConfirm={confirmDeleteTemplate}
-        title="Delete Waiver Template"
-        itemName={templateToDelete?.name}
-      />
-    </div>
-  );
-};
-
-export default WaiversTemplatesSettings;