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

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

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

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

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