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

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

@@ -1,379 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useParams, useLocation } from 'react-router-dom';
-import { Button } from './ui/button';
-import { Textarea } from './ui/textarea';
-import { RadioGroup, RadioGroupItem } from './ui/radio-group';
-import { Label } from './ui/label';
-import { supabase } from '@/integrations/supabase/client';
-import { useAuth } from '@/contexts/AuthContext';
-import { useUser } from '@/contexts/UserContext';
-import { useSimulation } from '@/contexts/SimulationContext';
-import { IconSad, IconBigSmile } from '../../icons';
-import { Notification } from './NotificationBanner';
-
-const NPS_STORAGE_KEY_PREFIX = 'nps_data_';
-const THREE_MONTHS_MS = 90 * 24 * 60 * 60 * 1000; // 90 days in milliseconds
-
-interface NPSData {
-  submittedAt?: number;
-}
-
-const roleOptions = [
-  { value: 'owner', label: 'Business Owner' },
-  { value: 'manager', label: 'Manager' },
-  { value: 'finance', label: 'Finance' },
-  { value: 'marketing', label: 'Marketing' },
-  { value: 'staff', label: 'Staff Member' },
-  { value: 'other', label: 'Other' },
-];
-
-interface NPSScoreProps {
-  onShowNotification?: (notification: Notification) => void;
-}
-
-const NPSScore: React.FC<NPSScoreProps> = ({ onShowNotification }) => {
-  const { companyId, providerId } = useParams();
-  const location = useLocation();
-  const { user } = useAuth();
-  const { primaryRole } = useUser();
-  const { isSimulating } = useSimulation();
-  const [providerUuid, setProviderUuid] = useState<string | null>(null);
-  const [companyUuid, setCompanyUuid] = useState<string | null>(null);
-  const [firstName, setFirstName] = useState<string | null>(null);
-  
-  // Determine context key based on route
-  const getContextKey = () => {
-    const path = location.pathname;
-    if (path.includes('/venue/') || path.includes('/promoter/')) {
-      const providerType = path.includes('/venue/') ? 'venue' : 'promoter';
-      if (companyId) {
-        return `company_${companyId}_${providerType}_${providerId}`;
-      }
-      return `${providerType}_${providerId}`;
-    }
-    if (companyId) {
-      return `company_${companyId}`;
-    }
-    return 'default';
-  };
-  
-  const contextKey = getContextKey();
-  const storageKey = `${NPS_STORAGE_KEY_PREFIX}${contextKey}`;
-  
-  const [isVisible, setIsVisible] = useState(false);
-  const [selectedScore, setSelectedScore] = useState<number | null>(null);
-  const [reason, setReason] = useState('');
-  const [role, setRole] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [errors, setErrors] = useState<{ reason?: string; role?: string }>({});
-  const [showReasonField, setShowReasonField] = useState(false);
-
-  // Fetch user's first name from profile
-  useEffect(() => {
-    const fetchUserName = async () => {
-      if (!user) return;
-      
-      const { data } = await supabase
-        .from('profiles')
-        .select('full_name')
-        .eq('id', user.id)
-        .maybeSingle();
-      
-      if (data?.full_name) {
-        // Extract first name from full name
-        const nameParts = data.full_name.trim().split(' ');
-        setFirstName(nameParts[0]);
-      }
-    };
-    
-    fetchUserName();
-  }, [user]);
-
-  // Fetch provider UUID based on friendly ID
-  useEffect(() => {
-    const fetchProviderUuid = async () => {
-      if (!providerId) {
-        setProviderUuid(null);
-        return;
-      }
-      
-      const path = location.pathname;
-      const providerType = path.includes('/venue/') ? 'venue' : 'promoter';
-      
-      const { data } = await supabase
-        .from('providers')
-        .select('id')
-        .eq('venue_id', providerId)
-        .eq('type', providerType)
-        .maybeSingle();
-      
-      setProviderUuid(data?.id || null);
-    };
-    
-    fetchProviderUuid();
-  }, [providerId, location.pathname]);
-
-  // Fetch company UUID if companyId is a friendly ID (not a UUID)
-  useEffect(() => {
-    const fetchCompanyUuid = async () => {
-      if (!companyId) {
-        setCompanyUuid(null);
-        return;
-      }
-      
-      // Check if it's already a UUID
-      const uuidPattern = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-      if (uuidPattern.test(companyId)) {
-        setCompanyUuid(companyId);
-        return;
-      }
-      
-      const { data } = await supabase
-        .from('companies')
-        .select('id')
-        .eq('company_id', companyId)
-        .maybeSingle();
-      
-      setCompanyUuid(data?.id || null);
-    };
-    
-    fetchCompanyUuid();
-  }, [companyId]);
-
-  useEffect(() => {
-    // Reset form state when context changes
-    setSelectedScore(null);
-    setReason('');
-    setRole('');
-    setErrors({});
-    
-    const checkVisibility = async () => {
-      // For demo: just check if user has submitted for this specific context before
-      // No time window - show widget if no submission exists for this venue/company
-      
-      if (!user) {
-        setIsVisible(false);
-        return;
-      }
-      
-      // Build query based on context
-      let query = supabase
-        .from('nps_responses')
-        .select('id')
-        .eq('user_id', user.id);
-      
-      // Check context-specific submission
-      if (providerUuid) {
-        query = query.eq('provider_id', providerUuid);
-      } else if (companyUuid) {
-        query = query.eq('company_id', companyUuid);
-      }
-      
-      const { data: existingSubmission } = await query.limit(1).maybeSingle();
-      
-      // Show widget if no submission exists for this context
-      setIsVisible(!existingSubmission);
-    };
-    
-    checkVisibility();
-  }, [user, providerUuid, companyUuid]);
-
-
-  const handleSubmit = async () => {
-    if (!selectedScore || !user) return;
-    
-    // Validate required fields - reason required for all scores
-    const newErrors: { reason?: string; role?: string } = {};
-    if (!reason.trim()) {
-      newErrors.reason = 'Please provide a reason for your score';
-    }
-    if (!role) {
-      newErrors.role = 'Please select your role';
-    }
-    
-    if (Object.keys(newErrors).length > 0) {
-      setErrors(newErrors);
-      return;
-    }
-    
-    setErrors({});
-    setIsSubmitting(true);
-    
-    try {
-      // Save NPS response to database
-      const { error } = await supabase
-        .from('nps_responses')
-        .insert({
-          user_id: user.id,
-          provider_id: providerUuid,
-          company_id: companyUuid,
-          score: selectedScore,
-          role: role,
-          reason: reason.trim() || null,
-        });
-      
-      if (error) {
-        console.error('Error saving NPS response:', error);
-        onShowNotification?.({
-          type: 'error',
-          title: 'Error',
-          message: 'Failed to submit feedback. Please try again.'
-        });
-        setIsSubmitting(false);
-        return;
-      }
-      
-      // Store submission data in localStorage to hide widget
-      const data: NPSData = { submittedAt: Date.now() };
-      localStorage.setItem(storageKey, JSON.stringify(data));
-      
-      onShowNotification?.({
-        type: 'success',
-        title: 'Thank you!',
-        message: 'Your feedback has been submitted successfully.'
-      });
-      setIsVisible(false);
-    } catch (err) {
-      console.error('Error submitting NPS:', err);
-      onShowNotification?.({
-        type: 'error',
-        title: 'Error',
-        message: 'Failed to submit feedback. Please try again.'
-      });
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  // Hide for super_admin/system_admin unless they are simulating another role
-  const isAdminRole = primaryRole === 'super_admin' || primaryRole === 'system_admin';
-  if (!isVisible || (isAdminRole && !isSimulating)) return null;
-
-  return (
-    <div className="w-full mt-6">
-      <div className="bg-surface-secondary rounded-2xl p-6 border border-border-primary">
-        <div className="flex flex-col lg:flex-row gap-6">
-          {/* Main NPS Content */}
-          <div className="flex-1">
-            {/* Question */}
-            <h3 className="text-label-primary text-lg font-semibold leading-6 mb-4">
-              {firstName ? `Hey ${firstName}, how` : 'How'} likely would you be to recommend Booked it to a friend or colleague?
-            </h3>
-
-            {/* Scale labels - both on same row on desktop */}
-            <div className="flex justify-between items-center mb-3">
-              <div className="flex items-center gap-2">
-                <IconSad size={24} className="text-fill-secondary" />
-                <span className="text-label-secondary text-sm font-medium">Not Likely</span>
-              </div>
-              {/* Most Likely - hidden on mobile, shown on desktop */}
-              <div className="hidden md:flex items-center gap-2">
-                <span className="text-label-secondary text-sm font-medium">Most Likely</span>
-                <IconBigSmile size={24} className="text-fill-secondary" />
-              </div>
-            </div>
-
-            {/* Score buttons - wrap on mobile */}
-            <div className="grid grid-cols-5 md:grid-cols-10 gap-2">
-              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((score) => (
-                <button
-                  key={score}
-                  onClick={() => setSelectedScore(score)}
-                  className={`
-                    h-12 rounded-xl text-lg font-semibold transition-colors
-                    ${selectedScore === score
-                      ? 'bg-fill-primary text-label-primary-alt border border-transparent'
-                      : 'bg-surface-primary border border-border-primary text-label-primary hover:bg-surface-primary-hover'
-                    }
-                  `}
-                >
-                  {score}
-                </button>
-              ))}
-            </div>
-
-            {/* Most Likely label - only shown on mobile below numbers */}
-            <div className="flex md:hidden items-center gap-2 justify-end mt-3">
-              <span className="text-label-secondary text-sm font-medium">Most Likely</span>
-              <IconBigSmile size={24} className="text-fill-secondary" />
-            </div>
-          </div>
-
-        </div>
-
-        {/* Expanded section after score selection */}
-        {selectedScore !== null && (
-          <div className="space-y-4 mt-4 animate-in fade-in slide-in-from-top-2 duration-200">
-            {/* Reason textarea - required for all scores */}
-            <div>
-              <label className="block text-label-primary text-sm font-medium mb-2">
-                Reason for this score?
-              </label>
-              <Textarea
-                value={reason}
-                onChange={(e) => {
-                  setReason(e.target.value);
-                  if (errors.reason) setErrors(prev => ({ ...prev, reason: undefined }));
-                }}
-                placeholder=""
-                className={`min-h-[100px] bg-surface-primary border-border-primary resize-y ${errors.reason ? 'border-fill-danger' : ''}`}
-              />
-              {errors.reason ? (
-                <p className="text-fill-danger text-sm mt-1">{errors.reason}</p>
-              ) : (
-                <p className="text-label-secondary text-sm mt-1">
-                  Help us improve by explaining your score.
-                </p>
-              )}
-            </div>
-
-            {/* Role selection - 2 column radio layout */}
-            <div className="pt-4">
-              <label className="block text-label-primary text-sm font-medium mb-3">
-                The role that best describes you?
-              </label>
-              <RadioGroup 
-                value={role} 
-                onValueChange={(val) => {
-                  setRole(val);
-                  if (errors.role) setErrors(prev => ({ ...prev, role: undefined }));
-                }}
-                className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3"
-              >
-                {roleOptions.map((option) => (
-                  <div key={option.value} className="flex items-center space-x-2">
-                    <RadioGroupItem 
-                      value={option.value} 
-                      id={`role-${option.value}`}
-                      className="border-border-primary text-fill-primary"
-                    />
-                    <Label 
-                      htmlFor={`role-${option.value}`}
-                      className="text-label-primary text-sm font-normal cursor-pointer"
-                    >
-                      {option.label}
-                    </Label>
-                  </div>
-                ))}
-              </RadioGroup>
-              {errors.role && (
-                <p className="text-fill-danger text-sm mt-1">{errors.role}</p>
-              )}
-            </div>
-
-            {/* Submit button */}
-            <Button
-              onClick={handleSubmit}
-              disabled={isSubmitting}
-              className="bg-surface-action hover:bg-surface-action-hover text-label-primary-alt font-semibold px-6"
-            >
-              {isSubmitting ? 'Submitting...' : 'Submit'}
-            </Button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default NPSScore;

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

@@ -1,181 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { subDays } from 'date-fns';
-import { supabase } from '@/integrations/supabase/client';
-import { IconTrendUp, IconTrendDown, IconMinus } from '../../icons';
-
-interface NPSResponse {
-  id: string;
-  score: number;
-  created_at: string;
-}
-
-interface NPSSummaryCardProps {
-  className?: string;
-  linkTo?: string;
-}
-
-const NPSSummaryCard: React.FC<NPSSummaryCardProps> = ({ className = '', linkTo }) => {
-  const navigate = useNavigate();
-  const [responses, setResponses] = useState<NPSResponse[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [trend, setTrend] = useState<'up' | 'down' | 'neutral' | null>(null);
-  const [trendLoading, setTrendLoading] = useState(true);
-
-  useEffect(() => {
-    fetchData();
-    fetchTrend();
-  }, []);
-
-  const fetchData = async () => {
-    setLoading(true);
-    
-    const { data, error } = await supabase
-      .from('nps_responses')
-      .select('id, score, created_at')
-      .order('created_at', { ascending: false });
-
-    if (error) {
-      console.error('Error fetching NPS responses:', error);
-      setLoading(false);
-      return;
-    }
-
-    setResponses(data || []);
-    setLoading(false);
-  };
-
-  const fetchTrend = async () => {
-    setTrendLoading(true);
-    
-    const threeMonthsAgo = subDays(new Date(), 90);
-    const sevenDaysAgo = subDays(new Date(), 7);
-    
-    try {
-      // Fetch all responses from the last 3 months
-      const { data, error } = await supabase
-        .from('nps_responses')
-        .select('score, created_at')
-        .gte('created_at', threeMonthsAgo.toISOString())
-        .order('created_at', { ascending: true });
-      
-      if (error || !data || data.length < 3) {
-        // Need at least 3 responses overall to calculate trend
-        setTrend(null);
-        setTrendLoading(false);
-        return;
-      }
-      
-      // Calculate overall 3-month average as baseline
-      const overallAvg = data.reduce((sum, r) => sum + r.score, 0) / data.length;
-      
-      // Get responses from the last 7 days
-      const recentResponses = data.filter(r => new Date(r.created_at) >= sevenDaysAgo);
-      
-      // Need at least 3 recent responses to determine trend
-      if (recentResponses.length < 3) {
-        setTrend('neutral'); // Default to steady if not enough recent data
-        setTrendLoading(false);
-        return;
-      }
-      
-      // Calculate recent 7-day average
-      const recentAvg = recentResponses.reduce((sum, r) => sum + r.score, 0) / recentResponses.length;
-      
-      // Compare recent vs overall with 0.75 threshold
-      const difference = recentAvg - overallAvg;
-      if (difference > 0.75) {
-        setTrend('up');
-      } else if (difference < -0.75) {
-        setTrend('down');
-      } else {
-        setTrend('neutral');
-      }
-    } catch (err) {
-      console.error('Error fetching trend data:', err);
-      setTrend(null);
-    } finally {
-      setTrendLoading(false);
-    }
-  };
-
-  const npsMetrics = useMemo(() => {
-    const total = responses.length;
-    if (total === 0) return { nps: 0, total: 0 };
-
-    const promoters = responses.filter(r => r.score >= 9).length;
-    const detractors = responses.filter(r => r.score <= 6).length;
-
-    const nps = Math.round(((promoters - detractors) / total) * 100);
-
-    return { nps, total };
-  }, [responses]);
-
-  const handleClick = () => {
-    if (linkTo) {
-      navigate(linkTo);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className={`bg-surface-secondary rounded-xl p-4 border border-border-primary ${className}`}>
-        <p className="text-label-secondary text-sm">Loading NPS data...</p>
-      </div>
-    );
-  }
-
-  return (
-    <div 
-      className={`bg-surface-secondary rounded-xl p-4 border border-border-primary ${linkTo ? 'cursor-pointer hover:bg-surface-secondary-hover transition-colors' : ''} ${className}`}
-      onClick={handleClick}
-    >
-      <div className="flex justify-between items-center gap-4 h-full">
-        <div>
-          <p className="text-label-secondary text-[11px] font-medium uppercase tracking-wide mb-1">NPS Score</p>
-          <p className="text-label-primary text-3xl font-bold">{npsMetrics.nps}</p>
-          <p className="text-label-primary text-[13px] mt-2">
-            from {npsMetrics.total || 0} {npsMetrics.total === 1 ? 'response' : 'responses'}
-          </p>
-        </div>
-        
-        {/* Trend Section */}
-        {!trendLoading && trend !== null && (
-          <div className="flex flex-col items-center justify-center gap-1 pr-4">
-            <div className={`w-12 h-12 rounded-full flex items-center justify-center ${
-              trend === 'up' ? 'bg-surface-status-success' : 
-              trend === 'down' ? 'bg-surface-status-error' : 
-              'bg-surface-tertiary'
-            }`}>
-              {trend === 'up' && <IconTrendUp size={24} className="text-fill-status-success" />}
-              {trend === 'down' && <IconTrendDown size={24} className="text-fill-status-error" />}
-              {trend === 'neutral' && <IconMinus size={24} className="text-fill-secondary" />}
-            </div>
-            
-            <span className={`text-sm font-semibold ${
-              trend === 'up' ? 'text-fill-status-success' : 
-              trend === 'down' ? 'text-fill-status-error' : 
-              'text-label-secondary'
-            }`}>
-              {trend === 'up' ? 'Improving' : trend === 'down' ? 'Declining' : 'Steady'}
-            </span>
-            
-            <p className="text-label-secondary text-[10px] font-medium uppercase tracking-wide">3 Month Trend</p>
-          </div>
-        )}
-        
-        {/* Loading/No data state */}
-        {(trendLoading || trend === null) && (
-          <div className="flex flex-col items-center justify-center pr-4">
-            <span className="text-label-secondary text-sm">
-              {trendLoading ? 'Loading...' : 'Not enough data'}
-            </span>
-            <p className="text-label-secondary text-[10px] font-medium uppercase tracking-wide mt-1">3 Month Trend</p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default NPSSummaryCard;

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

@@ -1,129 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { IconTick, IconCross, IconInfoCard, IconArrowRight, IconArrowInternalReturn } from '../../icons';
-
-export type NotificationType = 'success' | 'error' | 'info';
-
-export interface Notification {
-  type: NotificationType;
-  title: string;
-  message: string;
-  action?: {
-    label: string;
-    onClick: () => void;
-  };
-}
-
-interface NotificationBannerProps {
-  notification: Notification;
-  onClose: () => void;
-  showNotificationsLink?: boolean;
-  autoDismissOnRouteChange?: boolean;
-}
-
-const NotificationBanner: React.FC<NotificationBannerProps> = ({ 
-  notification, 
-  onClose, 
-  showNotificationsLink = true,
-  autoDismissOnRouteChange = true 
-}) => {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const isSuccess = notification.type === 'success';
-  const isError = notification.type === 'error';
-  const isInfo = notification.type === 'info';
-  
-  // Use ref to avoid stale closure while not triggering effect re-runs
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-
-  // Auto-dismiss notification when the route actually changes (not on initial mount)
-  useEffect(() => {
-    if (!autoDismissOnRouteChange) return;
-    
-    const currentPath = location.pathname;
-    return () => {
-      if (location.pathname !== currentPath) {
-        onCloseRef.current();
-      }
-    };
-  }, [location.pathname, autoDismissOnRouteChange]);
-
-  return (
-    <div 
-      className={`w-full flex items-start gap-4 px-6 py-4 rounded-lg border animate-fade-in mt-4 ${
-        isSuccess 
-          ? 'bg-surface-status-success border-border-status-success' 
-          : isError
-          ? 'bg-surface-status-error border-border-status-error'
-          : 'bg-surface-status-info border-border-status-info'
-      }`}
-    >
-      {/* Icon */}
-      <div className="flex-shrink-0 mt-0.5">
-        {isSuccess ? (
-          <div className="w-[32px] h-[32px] rounded-full bg-success-regular flex items-center justify-center">
-            <IconTick className="w-4 h-4 fill-fill-white" />
-          </div>
-        ) : isError ? (
-          <div className="w-[32px] h-[32px] rounded-full bg-errors-regular flex items-center justify-center">
-            <IconCross className="w-4 h-4 fill-fill-white" />
-          </div>
-        ) : (
-          <div className="w-[32px] h-[32px] rounded-full bg-info-regular flex items-center justify-center">
-            <IconInfoCard className="w-4 h-4 fill-fill-white" />
-          </div>
-        )}
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 min-w-0">
-        <h3 className={`text-sm font-semibold mb-0.5 ${
-          isSuccess ? 'text-label-status-success' : isError ? 'text-label-status-error' : 'text-label-status-info'
-        }`}>
-          {notification.title}
-        </h3>
-        {notification.message && (
-          <p className="text-xs text-label-primary">
-            {notification.message}
-          </p>
-        )}
-        {notification.action && (
-          <button
-            onClick={notification.action.onClick}
-            className="inline-flex items-center text-xs font-semibold text-label-primary transition-opacity hover:opacity-70 mt-2"
-          >
-            {notification.action.label}
-          </button>
-        )}
-      </div>
-
-      {/* Action Buttons */}
-      <div className="flex items-center gap-2 self-center">
-        {showNotificationsLink && (
-          <button
-            onClick={() => navigate('/notifications')}
-            className={`flex-shrink-0 w-10 h-10 flex items-center justify-center transition-opacity hover:opacity-70 ${
-              isSuccess ? 'text-label-status-success' : isError ? 'text-label-status-error' : 'text-label-status-info'
-            }`}
-            aria-label="View all notifications"
-          >
-            <IconArrowInternalReturn className="w-5 h-5" />
-          </button>
-        )}
-        
-        <button
-          onClick={onClose}
-          className={`flex-shrink-0 w-10 h-10 flex items-center justify-center transition-opacity hover:opacity-70 ${
-            isSuccess ? 'text-label-status-success' : isError ? 'text-label-status-error' : 'text-label-status-info'
-          }`}
-          aria-label="Close notification"
-        >
-          <IconCross className="w-5 h-5" />
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default NotificationBanner;