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

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

@@ -1,301 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { supabase } from '@/integrations/supabase/client';
-import { useNotify } from '../hooks/useNotify';
-import { useProvider } from '@/contexts/ProviderContext';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { Textarea } from './ui/textarea';
-import { Label } from './ui/label';
-import { Switch } from './ui/switch';
-
-interface WaiverTemplate {
-  id: string;
-  name: string;
-  content: string | null;
-  expires_in_months: number;
-  requires_guardian_consent: boolean;
-  one_adult_per_waiver: boolean;
-  is_active: boolean;
-}
-
-interface WaiverFormProps {
-  templateId?: string; // If provided, we're editing
-  onCancel: () => void;
-}
-
-const WaiverForm: React.FC<WaiverFormProps> = ({ templateId, onCancel }) => {
-  const { provider } = useProvider();
-  const navigate = useNavigate();
-  const { showSuccess, showError } = useNotify();
-  const { t } = useTranslation(['Design', 'Validation']);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isFetching, setIsFetching] = useState(!!templateId);
-
-  // Form state
-  const [name, setName] = useState('');
-  const [content, setContent] = useState('');
-  const [expiresInMonths, setExpiresInMonths] = useState<string>('1');
-  const [requiresGuardianConsent, setRequiresGuardianConsent] = useState(false);
-  const [oneAdultPerWaiver, setOneAdultPerWaiver] = useState(true);
-
-  // Validation state
-  const [expiresError, setExpiresError] = useState<string | null>(null);
-
-  const isEditing = !!templateId;
-
-  useEffect(() => {
-    if (templateId && provider) {
-      fetchTemplate();
-    }
-  }, [templateId, provider]);
-
-  const fetchTemplate = async () => {
-    if (!templateId) return;
-
-    setIsFetching(true);
-    try {
-      const { data, error } = await supabase
-        .from('waiver_templates')
-        .select('*')
-        .eq('id', templateId)
-        .single();
-
-      if (error) throw error;
-
-      // Cast to include new fields (types will be regenerated)
-      const template = data as any;
-      setName(template.name || '');
-      setContent(template.content || '');
-      setExpiresInMonths(String(template.expires_in_months || 1));
-      setRequiresGuardianConsent(template.requires_guardian_consent || false);
-      setOneAdultPerWaiver(template.one_adult_per_waiver ?? true);
-    } catch (error) {
-      console.error('Error fetching template:', error);
-      showError('Failed to load waiver template');
-      onCancel();
-    } finally {
-      setIsFetching(false);
-    }
-  };
-
-  const validateForm = (): boolean => {
-    let isValid = true;
-    setExpiresError(null);
-
-    if (!name.trim()) {
-      showError(t('pleaseEnterWaiverName', { ns: 'Validation' }));
-      isValid = false;
-    }
-
-    const monthsValue = parseInt(expiresInMonths, 10);
-    if (isNaN(monthsValue) || monthsValue < 1) {
-      setExpiresError(t('expiryMustBeAtLeastOneMonth', { ns: 'Validation' }));
-      isValid = false;
-    }
-
-    return isValid;
-  };
-
-  const handleSubmit = async (asDraft: boolean = false) => {
-    if (!provider) return;
-
-    if (!validateForm()) return;
-
-    setIsLoading(true);
-    try {
-      const monthsValue = parseInt(expiresInMonths, 10) || 1;
-      
-      let shouldBeActive = false;
-      let shouldBePublished = !asDraft;
-
-      // If not a draft, check if this is the first template
-      if (!asDraft && !isEditing) {
-        const { count, error: countError } = await supabase
-          .from('waiver_templates')
-          .select('*', { count: 'exact', head: true })
-          .eq('provider_id', provider.id);
-
-        if (countError) throw countError;
-        
-        // Only set as active if this is the first template
-        shouldBeActive = (count || 0) === 0;
-      }
-
-      const templateData = {
-        name: name.trim(),
-        content: content.trim() || null,
-        expires_in_months: monthsValue,
-        requires_guardian_consent: requiresGuardianConsent,
-        one_adult_per_waiver: oneAdultPerWaiver,
-        is_active: asDraft ? false : shouldBeActive,
-        is_published: shouldBePublished,
-      };
-
-      if (isEditing) {
-        // When editing, don't change is_active or is_published status
-        const { is_active, is_published, ...editData } = templateData;
-        const { error } = await supabase
-          .from('waiver_templates')
-          .update(editData)
-          .eq('id', templateId);
-
-        if (error) throw error;
-        showSuccess('Waiver updated');
-      } else {
-        const { error } = await supabase
-          .from('waiver_templates')
-          .insert({
-            ...templateData,
-            provider_id: provider.id,
-            display_order: 0,
-          });
-
-        if (error) throw error;
-        showSuccess(asDraft ? 'Waiver saved as draft' : (shouldBeActive ? 'Waiver created and activated' : 'Waiver created as disabled'));
-      }
-
-      onCancel(); // Navigate back
-    } catch (error) {
-      console.error('Error saving waiver:', error);
-      showError('Failed to save waiver');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleExpiresChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setExpiresInMonths(e.target.value);
-    // Clear error when user types
-    if (expiresError) setExpiresError(null);
-  };
-
-  if (isFetching) {
-    return (
-      <div className="flex items-center justify-center py-12">
-        <span className="text-label-secondary">{t('loadingWaiver')}</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-2xl mx-auto pt-12 pb-0 max-sm:pt-8 max-sm:pb-0">
-      {/* Name Field */}
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="name" className="text-label-primary font-medium">
-          {t('waiverNameLabel')}
-        </Label>
-        <Input
-          id="name"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          className="bg-surface-secondary"
-        />
-        <p className="text-label-secondary text-sm">
-          {t('waiverNameDescription')}
-        </p>
-      </div>
-
-      {/* Content Field */}
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="content" className="text-label-primary font-medium">
-          {t('waiverContentLabel')}
-        </Label>
-        <Textarea
-          id="content"
-          value={content}
-          onChange={(e) => setContent(e.target.value)}
-          className="bg-surface-secondary min-h-[150px]"
-        />
-        <p className="text-label-secondary text-sm">
-          {t('waiverContentDescription')}
-        </p>
-      </div>
-
-      {/* Expires In Field */}
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="expires" className="text-label-primary font-medium">
-          {t('waiverExpiresIn')}
-        </Label>
-        <div className="flex items-center gap-3">
-          <Input
-            id="expires"
-            type="text"
-            inputMode="numeric"
-            value={expiresInMonths}
-            onChange={handleExpiresChange}
-            className={`bg-surface-secondary w-24 ${expiresError ? 'border-fill-danger' : ''}`}
-          />
-          <span className="text-label-primary">{t('waiverMonths')}</span>
-        </div>
-        {expiresError ? (
-          <p className="text-label-danger text-sm">{expiresError}</p>
-        ) : (
-          <p className="text-label-secondary text-sm">
-            {t('waiverExpiryDescription')}
-          </p>
-        )}
-      </div>
-
-      {/* Advanced Section */}
-      <div className="flex flex-col gap-6">
-        <h3 className="text-base font-semibold text-label-primary">{t('advanced')}</h3>
-        
-        {/* Requires Legal Guardian Consent */}
-        <div className="flex items-start gap-3">
-          <Switch
-            checked={requiresGuardianConsent}
-            onCheckedChange={setRequiresGuardianConsent}
-          />
-          <div className="flex flex-col gap-1">
-            <span className="text-label-primary font-medium">
-              {t('requiresLegalGuardianConsent')}
-            </span>
-            <p className="text-label-secondary text-sm">
-              {t('requiresLegalGuardianConsentDescription')}
-            </p>
-          </div>
-        </div>
-
-        {/* 1 Adult per Waiver */}
-        <div className="flex items-start gap-3">
-          <Switch
-            checked={oneAdultPerWaiver}
-            onCheckedChange={setOneAdultPerWaiver}
-          />
-          <div className="flex flex-col gap-1">
-            <span className="text-label-primary font-medium">
-              {t('oneAdultPerWaiver')}
-            </span>
-            <p className="text-label-secondary text-sm">
-              {t('oneAdultPerWaiverDescription')}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Action Buttons */}
-      <div className="flex items-center gap-3 pt-2">
-        <Button
-          className="bg-fill-action text-white hover:bg-fill-action-hover active:bg-fill-action-pressed"
-          onClick={() => handleSubmit(false)}
-          disabled={isLoading}
-        >
-          {isEditing ? t('updateWaiver') : t('createWaiver')}
-        </Button>
-        {!isEditing && (
-          <Button
-            variant="outline"
-            onClick={() => handleSubmit(true)}
-            disabled={isLoading}
-          >
-            {t('saveAsDraft')}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default WaiverForm;

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

@@ -1,46 +0,0 @@
-import React from 'react';
-import { useProvider } from '@/contexts/ProviderContext';
-import { IconWaivers, IconExternal } from '../../icons';
-import FeatureToggle from './FeatureToggle';
-import { Button } from './ui/button';
-
-const WaiversGeneralSettings: React.FC = () => {
-  const { provider } = useProvider();
-
-  const waiversEnabled = provider?.waivers_enabled === true;
-
-  const title = waiversEnabled ? 'Waivers Enabled' : 'Waivers Disabled';
-  const description = waiversEnabled
-    ? 'Customers can sign waivers before participating in activities.'
-    : 'Customers cannot sign waivers before participating in activities.';
-
-  return (
-    <div className="flex flex-col gap-4 w-full">
-      <FeatureToggle
-        icon={<IconWaivers size={48} className="fill-fill-primary" />}
-        title={title}
-        description={description}
-        enabled={waiversEnabled}
-        onToggle={() => {}}
-        readOnly
-      />
-
-      {waiversEnabled && (
-        <div className="flex">
-          <Button
-            variant="ghost"
-            size="sm"
-            withIcon
-            onClick={() => window.open('https://app.booked.it/waiver/uXMr1Q4yKcgEClPHXQwT6f7OSm0P6NLe', '_blank')}
-            className="w-fit"
-          >
-            <IconExternal className="w-4 h-4" />
-            Launch Waiver Kiosk
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default WaiversGeneralSettings;

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

@@ -1,290 +0,0 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { DataTable } from './tables/DataTable';
-import { ColumnConfig, RowAction } from './tables/types';
-import { cn } from '../lib/utils';
-import { IconExclaim } from '../../icons';
-import CustomerCard from './CustomerCard';
-
-export interface Waiver {
-  id: string;
-  customerName: string;
-  customerEmail: string;
-  customerId?: string;
-  type: 'adult' | 'minor';
-  age: number;
-  minorCount?: number;
-  nextBookingDate?: string;
-  lastBookingDate?: string;
-  numberOfBookings?: number;
-  expiresDate?: string;
-  status: 'signed' | 'expired' | 'not_signed';
-}
-
-interface WaiversTableProps {
-  waivers: Waiver[];
-  onViewCustomer?: (waiver: Waiver) => void;
-  onEditCustomer?: (waiver: Waiver) => void;
-  onDeleteWaiver?: (waiver: Waiver) => void;
-  onSendWaiverRequest?: (waiver: Waiver) => void;
-  showWaiverColumn?: boolean;
-  basePath?: string;
-}
-
-const WaiverStatusBadge: React.FC<{ status: Waiver['status'] }> = ({ status }) => {
-  const getStatusClasses = () => {
-    switch (status) {
-      case 'signed':
-        return 'bg-surface-status-success text-label-primary border-border-status-success';
-      case 'expired':
-        return 'bg-surface-status-alert text-label-primary border-border-status-alert';
-      case 'not_signed':
-        return 'bg-surface-status-error text-label-primary border-border-status-error';
-      default:
-        return 'bg-surface-status-error text-label-primary border-border-status-error';
-    }
-  };
-
-  const getLabel = () => {
-    switch (status) {
-      case 'signed':
-        return 'Signed';
-      case 'expired':
-        return 'Expired';
-      case 'not_signed':
-        return 'Not Signed';
-      default:
-        return status;
-    }
-  };
-  
-  // Expired and Not Signed have icons so use asymmetric padding; Signed uses symmetric
-  const hasIcon = status === 'expired' || status === 'not_signed';
-  const paddingClass = hasIcon ? 'pl-1.5 pr-2' : 'px-2';
-  
-  return (
-    <div className={cn(
-      "inline-flex justify-center items-center gap-1 border py-1 rounded-3xl",
-      paddingClass,
-      getStatusClasses()
-    )}>
-      {hasIcon && (
-        <IconExclaim size={16} className="text-label-primary" />
-      )}
-      <span className="text-[10px] font-mono font-medium leading-[13px] whitespace-nowrap">
-        {getLabel()}
-      </span>
-    </div>
-  );
-};
-
-interface CustomerCellProps {
-  waiver: Waiver;
-}
-
-const CustomerCell: React.FC<CustomerCellProps> = ({ waiver }) => {
-  const [isHovered, setIsHovered] = useState(false);
-
-  return (
-    <div 
-      className="flex flex-col gap-0.5"
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <span className="text-label-primary text-[13px] font-semibold leading-4">
-        {waiver.customerName}
-      </span>
-      <span className="text-label-secondary text-[12px] font-normal leading-4">
-        {isHovered && waiver.customerId ? waiver.customerId : waiver.customerEmail}
-      </span>
-    </div>
-  );
-};
-
-// Mobile card list component
-const MobileCustomerList: React.FC<{
-  waivers: Waiver[];
-  showWaiverColumn: boolean;
-  onViewCustomer: (waiver: Waiver) => void;
-}> = ({ waivers, showWaiverColumn, onViewCustomer }) => {
-  if (waivers.length === 0) {
-    return (
-      <div className="text-center py-12">
-        <p className="text-label-secondary">No customers found</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-3">
-      {waivers.map((waiver) => (
-        <CustomerCard
-          key={waiver.id}
-          customerName={waiver.customerName}
-          customerEmail={waiver.customerEmail}
-          customerId={waiver.customerId}
-          age={waiver.age}
-          nextBookingDate={waiver.nextBookingDate}
-          lastBookingDate={waiver.lastBookingDate}
-          numberOfBookings={waiver.numberOfBookings}
-          status={waiver.status}
-          showWaiverStatus={showWaiverColumn}
-          onClick={() => onViewCustomer(waiver)}
-        />
-      ))}
-    </div>
-  );
-};
-
-const WaiversTable: React.FC<WaiversTableProps> = ({
-  waivers,
-  onViewCustomer,
-  onEditCustomer,
-  onDeleteWaiver,
-  onSendWaiverRequest,
-  showWaiverColumn = true,
-  basePath = '',
-}) => {
-  const navigate = useNavigate();
-
-  // Columns when waivers is ACTIVE: Customer / Next Booking / Age / Waiver Status
-  const waiversActiveColumns: ColumnConfig<Waiver>[] = [
-    {
-      label: 'Customer',
-      width: 'flex-1 min-w-0',
-      render: (waiver) => <CustomerCell waiver={waiver} />,
-    },
-    {
-      label: 'Next Booking',
-      width: 'w-[160px]',
-      render: (waiver) => (
-        <span className="text-label-primary text-[13px] font-normal leading-4">
-          {waiver.nextBookingDate || '-'}
-        </span>
-      ),
-    },
-    {
-      label: 'Age',
-      width: 'w-[140px]',
-      render: (waiver) => (
-        <span className="text-label-primary text-[13px] font-normal leading-4">
-          {waiver.age}
-        </span>
-      ),
-    },
-    {
-      label: 'Waiver',
-      width: 'w-[140px]',
-      render: (waiver) => <WaiverStatusBadge status={waiver.status} />,
-    },
-  ];
-
-  // Columns when waivers is DISABLED: Customer / Next Booking / Last Booking / Number of Bookings
-  const waiversDisabledColumns: ColumnConfig<Waiver>[] = [
-    {
-      label: 'Customer',
-      width: 'flex-1 min-w-0',
-      render: (waiver) => <CustomerCell waiver={waiver} />,
-    },
-    {
-      label: 'Next Booking',
-      width: 'w-[160px]',
-      render: (waiver) => (
-        <span className="text-label-primary text-[13px] font-normal leading-4">
-          {waiver.nextBookingDate || '-'}
-        </span>
-      ),
-    },
-    {
-      label: 'Last Booking',
-      width: 'w-[160px]',
-      render: (waiver) => (
-        <span className="text-label-primary text-[13px] font-normal leading-4">
-          {waiver.lastBookingDate || '-'}
-        </span>
-      ),
-    },
-    {
-      label: 'No. of Bookings',
-      width: 'w-[140px]',
-      render: (waiver) => (
-        <span className="text-label-primary text-[13px] font-normal leading-4">
-          {waiver.numberOfBookings ?? 0}
-        </span>
-      ),
-    },
-  ];
-
-  const columns = showWaiverColumn ? waiversActiveColumns : waiversDisabledColumns;
-
-  const handleViewCustomer = (waiver: Waiver) => {
-    if (onViewCustomer) {
-      onViewCustomer(waiver);
-    } else if (basePath) {
-      navigate(`${basePath}/customers/${waiver.id}`);
-    }
-  };
-
-  const rowActions = (waiver: Waiver): RowAction<Waiver>[] => {
-    const actions: RowAction<Waiver>[] = [
-      {
-        label: 'View Customer',
-        onClick: () => handleViewCustomer(waiver),
-      },
-      ...(onEditCustomer ? [{
-        label: 'Edit Customer',
-        onClick: () => onEditCustomer(waiver),
-      }] : []),
-    ];
-
-    // Add "Send Waiver Request" option when waivers are enabled
-    if (showWaiverColumn && onSendWaiverRequest) {
-      actions.push({
-        label: 'Send Waiver Request',
-        onClick: () => onSendWaiverRequest(waiver),
-      });
-    }
-
-    actions.push({
-      label: 'Delete',
-      onClick: () => onDeleteWaiver?.(waiver),
-      variant: 'danger',
-    });
-
-    return actions;
-  };
-
-  return (
-    <>
-      {/* Mobile: Card layout */}
-      <div className="sm:hidden">
-        <MobileCustomerList
-          waivers={waivers}
-          showWaiverColumn={showWaiverColumn}
-          onViewCustomer={handleViewCustomer}
-        />
-      </div>
-
-      {/* Desktop: Table layout */}
-      <div className="hidden sm:block">
-        <DataTable
-          data={waivers}
-          columns={columns}
-          keyExtractor={(waiver) => waiver.id}
-          rowActions={rowActions}
-          onRowClick={handleViewCustomer}
-          pagination={{
-            entityName: 'customers'
-          }}
-          emptyState={
-            <div className="text-center py-12">
-              <p className="text-label-secondary">No customers found</p>
-            </div>
-          }
-        />
-      </div>
-    </>
-  );
-};
-
-export default WaiversTable;