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

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

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