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

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

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

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

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