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

package/src/v2/shadcn/_reference/auth/LoginForm.tsx

@@ -1,205 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';
-import { useNotify } from '../../hooks/useNotify';
-import { useNavigate } from 'react-router-dom';
-import { useAuth } from '@/contexts/AuthContext';
-import { supabase } from '@/integrations/supabase/client';
-
-type LoginFormData = {
-  email: string;
-  password: string;
-};
-
-export const LoginForm: React.FC = () => {
-  const navigate = useNavigate();
-  const { signIn } = useAuth();
-  const { showSuccess, showError } = useNotify();
-  const { t } = useTranslation(['Design', 'User', 'Validation']);
-
-  const loginSchema = z.object({
-    email: z.string().email(t('invalidEmailAddress', { ns: 'Validation' })),
-    password: z.string().min(1, t('passwordRequired', { ns: 'Validation' })),
-  });
-
-  const form = useForm<LoginFormData>({
-    resolver: zodResolver(loginSchema),
-    defaultValues: {
-      email: '',
-      password: '',
-    },
-  });
-
-  const onSubmit = async (data: LoginFormData) => {
-    try {
-      // Standard password-based login
-      const { error } = await signIn(data.email, data.password);
-      
-      if (error) {
-        showError(t('signInFailed', { ns: 'User' }), error.message);
-        return;
-      }
-
-      // Get user's primary role and assignments to determine dashboard
-      const { data: { user } } = await supabase.auth.getUser();
-      if (!user) {
-        showError(t('authenticationFailed', { ns: 'User' }));
-        return;
-      }
-
-      // Check if user is suspended
-      const { data: profile } = await supabase
-        .from('profiles')
-        .select('status')
-        .eq('id', user.id)
-        .single();
-
-      if (profile?.status === 'suspended') {
-        // Log them out immediately
-        await supabase.auth.signOut();
-        showError(t('accountSuspendedTitle', { ns: 'User' }), t('accountSuspended', { ns: 'User' }));
-        return;
-      }
-
-      const { data: primaryRole, error: roleError } = await supabase
-        .rpc('get_user_primary_role', { _user_id: user.id });
-
-      if (roleError) {
-        console.error('Error fetching role:', roleError);
-        showError(t('failedToDeterminePermissions', { ns: 'User' }));
-        return;
-      }
-
-      console.log('Primary role fetched:', primaryRole);
-
-      // Super admins and system admins go to admin dashboard
-      if (primaryRole === 'super_admin' || primaryRole === 'system_admin') {
-        showSuccess(t('welcomeBackAdmin', { ns: 'User' }));
-        navigate('/admin');
-        return;
-      }
-
-      // For other roles, check their assignments
-      // First check for company assignments
-      const { data: companyAssignments } = await supabase
-        .from('user_companies')
-        .select('company_id')
-        .eq('user_id', user.id)
-        .limit(1);
-
-      if (companyAssignments && companyAssignments.length > 0) {
-        const companyId = companyAssignments[0].company_id;
-        showSuccess(t('welcomeBack', { ns: 'User' }));
-        navigate(`/company/${companyId}`);
-        return;
-      }
-
-      // Then check for provider assignments
-      const { data: providerAssignments } = await supabase
-        .from('user_providers')
-        .select('provider_id')
-        .eq('user_id', user.id)
-        .limit(1);
-
-      if (providerAssignments && providerAssignments.length > 0) {
-        const providerId = providerAssignments[0].provider_id;
-        
-        // Fetch provider details to get the friendly ID and type
-        const { data: provider } = await supabase
-          .from('providers')
-          .select('venue_id, type')
-          .eq('id', providerId)
-          .single();
-        
-        if (provider) {
-          const providerType = provider.type === 'venue' ? 'venue' : 'promoter';
-          const friendlyId = provider.venue_id || '01';
-          showSuccess(t('welcomeBack', { ns: 'User' }));
-          navigate(`/${providerType}/${friendlyId}`);
-          return;
-        }
-      }
-
-      // No assignments found - show error
-      showError(t('noDashboardAccess', { ns: 'User' }));
-      console.error('User has role but no company/provider assignments');
-    } catch (error) {
-      console.error('Login error:', error);
-      showError(t('unexpectedError', { ns: 'User' }));
-    }
-  };
-
-  return (
-    <Form {...form}>
-      <form 
-        onSubmit={form.handleSubmit(onSubmit)} 
-        className="flex min-w-60 flex-col items-stretch flex-1 shrink basis-[0%] max-md:max-w-full"
-      >
-        <FormField
-          control={form.control}
-          name="email"
-          render={({ field }) => (
-            <FormItem className="mb-4">
-              <FormLabel className="text-label-primary text-[15px] font-semibold leading-[1.4]">
-                {t('emailAddress')}
-              </FormLabel>
-              <FormControl>
-                <Input
-                  type="email"
-                  placeholder=""
-                  className="border-stroke-primary bg-surface-primary text-label-primary"
-                  autoComplete="email"
-                  {...field}
-                />
-              </FormControl>
-              <FormMessage className="text-feedback-error text-sm" />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="password"
-          render={({ field }) => (
-            <FormItem className="mb-6">
-              <FormLabel className="text-label-primary text-[15px] font-semibold leading-[1.4]">
-                {t('password')}
-              </FormLabel>
-              <FormControl>
-                <Input
-                  type="password"
-                  placeholder=""
-                  className="border-stroke-primary bg-surface-primary text-label-primary"
-                  autoComplete="current-password"
-                  {...field}
-                />
-              </FormControl>
-              <FormMessage className="text-feedback-error text-sm" />
-              <button
-                type="button"
-                onClick={() => navigate('/auth/reset-password')}
-                className="text-label-action text-[15px] font-normal underline mt-2 inline-block"
-              >
-                {t('forgotPassword')}
-              </button>
-            </FormItem>
-          )}
-        />
-
-        <Button
-          type="submit"
-          disabled={form.formState.isSubmitting}
-          size="lg"
-          className="min-w-[150px] w-fit"
-        >
-          {form.formState.isSubmitting ? t('signingIn') : t('signIn')}
-        </Button>
-      </form>
-    </Form>
-  );
-};

package/src/v2/shadcn/_reference/auth/LoginPanel.tsx

@@ -1,41 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
-import { LoginForm } from './LoginForm';
-import { AuthLayout } from './AuthLayout';
-import { IconLogin } from '../../../icons';
-import { Alert, AlertDescription } from '../ui/alert';
-
-export const LoginPanel: React.FC = () => {
-  const location = useLocation();
-  const [showSuspendedAlert, setShowSuspendedAlert] = useState(false);
-  const { t } = useTranslation(['User']);
-
-  useEffect(() => {
-    // Check if user was redirected due to suspension
-    const params = new URLSearchParams(location.search);
-    if (params.get('suspended') === 'true') {
-      setShowSuspendedAlert(true);
-    }
-  }, [location]);
-
-  return (
-    <AuthLayout
-      badgeLabel={t('logIn')}
-      icon={
-        <IconLogin className="w-16 h-16 text-fill-primary" />
-      }
-      title={t('logIn')}
-      subtitle={t('loginSubtitle')}
-    >
-      {showSuspendedAlert && (
-        <Alert className="mb-4 border-status-error bg-status-error/10">
-          <AlertDescription className="text-label-primary text-sm">
-            {t('accountSuspended')}
-          </AlertDescription>
-        </Alert>
-      )}
-      <LoginForm />
-    </AuthLayout>
-  );
-};

package/src/v2/shadcn/_reference/auth/ResetPasswordForm.tsx

@@ -1,102 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button } from '../ui/button';
-import { Label } from '../ui/label';
-import { Input } from '../ui/input';
-import { useNotify } from '../../hooks/useNotify';
-import { useNavigate } from 'react-router-dom';
-import { supabase } from '@/integrations/supabase/client';
-
-export const ResetPasswordForm: React.FC = () => {
-  const [email, setEmail] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const navigate = useNavigate();
-  const { showSuccess, showError } = useNotify();
-  const { t } = useTranslation(['User']);
-
-  const onSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!email) {
-      showError(t('pleaseEnterEmailAddress'));
-      return;
-    }
-
-    setIsSubmitting(true);
-    try {
-      const { error } = await supabase.auth.resetPasswordForEmail(email, {
-        redirectTo: `${window.location.origin}/auth/create-password`,
-      });
-
-      if (error) {
-        showError(t('resetFailed'), error.message);
-        return;
-      }
-
-      showSuccess(t('passwordResetEmailSent'), t('checkYourInbox'));
-      navigate('/auth/verify-email');
-    } catch (error) {
-      showError(t('unexpectedError'));
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-    <form onSubmit={onSubmit} className="flex min-w-60 flex-col items-stretch flex-1 shrink basis-[0%] max-md:max-w-full">
-      {/* Info text */}
-      <div className="mb-6">
-        <p className="text-label-primary text-base leading-[1.4]">
-          {t('resetPasswordDescription')}
-        </p>
-      </div>
-
-      <div className="mb-6">
-        <Label htmlFor="email" className="text-label-primary text-[15px] font-semibold leading-[1.4] mb-2 block">
-          {t('emailAddress')}
-        </Label>
-        <Input
-          id="email"
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          className="border-stroke-primary bg-surface-primary text-label-primary"
-          
-          autoComplete="email"
-        />
-      </div>
-      
-      <Button
-        type="submit"
-        disabled={isSubmitting}
-        size="lg"
-        className="mb-4 min-w-[150px] w-fit"
-      >
-        {isSubmitting ? t('sendingReset') : t('resetPassword')}
-      </Button>
-
-      <p className="text-label-primary text-[15px] font-normal mb-2">
-        {t('resetPasswordAlreadyAccount')}{' '}
-        <button
-          type="button"
-          onClick={() => navigate('/auth')}
-          className="text-label-action font-normal underline"
-        >
-          {t('logIn')}
-        </button>
-        <span className="text-label-primary">.</span>
-      </p>
-
-      <p className="text-label-primary text-[15px] font-normal">
-        {t('forFurtherSupport')}{' '}
-        <a
-          href="mailto:support@booked.it"
-          className="text-label-action font-normal underline"
-        >
-          {t('contactUs')}
-        </a>
-        <span className="text-label-primary">.</span>
-      </p>
-    </form>
-  );
-};

package/src/v2/shadcn/_reference/auth/ResetPasswordPanel.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { ResetPasswordForm } from './ResetPasswordForm';
-import { AuthLayout } from './AuthLayout';
-import { IconUpdate } from '../../../icons';
-export const ResetPasswordPanel: React.FC = () => {
-  const { t } = useTranslation(['User']);
-  return (
-    <AuthLayout
-      badgeLabel={t('resetPassword')}
-      icon={
-        <IconUpdate className="w-16 h-16 text-fill-primary" />
-      }
-      title={t('resetPassword')}
-      subtitle={t('resetPasswordSubtitle')}
-    >
-      <ResetPasswordForm />
-    </AuthLayout>
-  );
-};

package/src/v2/shadcn/_reference/auth/VerifyEmailForm.tsx

@@ -1,95 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button } from '../ui/button';
-import { Label } from '../ui/label';
-import { Input } from '../ui/input';
-import { useNotify } from '../../hooks/useNotify';
-import { useNavigate } from 'react-router-dom';
-
-export const VerifyEmailForm: React.FC = () => {
-  const [code, setCode] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const navigate = useNavigate();
-  const { showSuccess, showError } = useNotify();
-  const { t } = useTranslation(['User']);
-
-  // Add dummy test code on mount for testing
-  useEffect(() => {
-    const testCode = '123456';
-    setCode(testCode);
-  }, []);
-
-  const onSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!code || code.length !== 6) {
-      showError(t('pleaseEnterValidCode'));
-      return;
-    }
-
-    setIsSubmitting(true);
-    try {
-      // Simulate verification
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      showSuccess(t('emailVerifiedSuccessfully'));
-      navigate('/auth/create-password');
-    } catch (error) {
-      showError(t('verificationFailed'));
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-    <>
-      <form onSubmit={onSubmit} className="flex min-w-60 flex-col items-stretch flex-1 shrink basis-[0%] max-md:max-w-full">
-        <div className="mb-6">
-          <Label htmlFor="code" className="text-label-primary text-[15px] font-semibold leading-[1.4] mb-2 block">
-            {t('verifyEmailCode')}
-          </Label>
-          <p className="text-label-secondary text-sm mb-4">
-            {t('verifyEmailDescription')}
-          </p>
-          <div className="flex gap-2 w-full">
-            {[0, 1, 2, 3, 4, 5].map((index) => (
-              <Input
-                key={index}
-                type="text"
-                maxLength={1}
-                className="flex-1 h-16 text-center text-2xl border-stroke-primary bg-surface-primary text-label-primary font-semibold"
-                value={code[index] || ''}
-                onChange={(e) => {
-                  const newCode = code.split('');
-                  newCode[index] = e.target.value;
-                  setCode(newCode.join(''));
-                  
-                  // Auto-focus next input
-                  if (e.target.value && index < 5) {
-                    const nextInput = e.target.parentElement?.children[index + 1] as HTMLInputElement;
-                    nextInput?.focus();
-                  }
-                }}
-                onKeyDown={(e) => {
-                  // Handle backspace
-                  if (e.key === 'Backspace' && !code[index] && index > 0) {
-                    const prevInput = e.currentTarget.parentElement?.children[index - 1] as HTMLInputElement;
-                    prevInput?.focus();
-                  }
-                }}
-              />
-            ))}
-          </div>
-        </div>
-        
-        <Button
-          type="submit"
-          disabled={isSubmitting || code.length !== 6}
-          size="lg"
-          className="mt-2 min-w-[150px] w-fit"
-        >
-          {isSubmitting ? t('verifying') : t('verifyCode')}
-        </Button>
-      </form>
-    </>
-  );
-};

package/src/v2/shadcn/_reference/auth/VerifyEmailPanel.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { VerifyEmailForm } from './VerifyEmailForm';
-import { AuthLayout } from './AuthLayout';
-import { IconMail } from '../../../icons';
-export const VerifyEmailPanel: React.FC = () => {
-  const { t } = useTranslation(['User']);
-  return (
-    <AuthLayout
-      badgeLabel={t('verifyEmail')}
-      icon={
-        <IconMail className="w-16 h-16 text-fill-primary" />
-      }
-      title={t('verifyEmail')}
-      subtitle={t('verifyEmailPanelSubtitle')}
-    >
-      <VerifyEmailForm />
-    </AuthLayout>
-  );
-};

package/src/v2/shadcn/_reference/email/EmailAttachment.tsx

@@ -1,119 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { IconUpload, IconCross } from '../../../icons';
-
-interface AttachedFile {
-  name: string;
-  size: number;
-  file: File;
-}
-
-interface EmailAttachmentProps {
-  files: AttachedFile[];
-  onChange: (files: AttachedFile[]) => void;
-}
-
-const formatFileSize = (bytes: number) => {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-};
-
-const EmailAttachment: React.FC<EmailAttachmentProps> = ({ files, onChange }) => {
-  const { t } = useTranslation(['Design']);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [isDragging, setIsDragging] = useState(false);
-
-  const addFiles = (fileList: FileList | File[]) => {
-    const selectedFiles = Array.from(fileList);
-    const newFiles: AttachedFile[] = selectedFiles.map(f => ({
-      name: f.name,
-      size: f.size,
-      file: f,
-    }));
-    onChange([...files, ...newFiles]);
-  };
-
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) addFiles(e.target.files);
-    if (inputRef.current) inputRef.current.value = '';
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-    if (e.dataTransfer.files.length) addFiles(e.dataTransfer.files);
-  };
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(true);
-  };
-
-  const handleDragLeave = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-  };
-
-  const removeFile = (index: number) => {
-    onChange(files.filter((_, i) => i !== index));
-  };
-
-  return (
-    <div className="flex flex-col gap-3">
-      <h2 className="text-label-primary text-lg font-semibold">{t('attachments')}</h2>
-
-      {files.length > 0 && (
-        <div className="flex flex-col gap-2">
-          {files.map((file, index) => (
-            <div
-              key={index}
-              className="flex items-center justify-between gap-3 p-3 border border-border-primary rounded-lg"
-            >
-              <div className="flex flex-col gap-0.5 min-w-0">
-                <span className="text-label-primary text-sm font-medium truncate">{file.name}</span>
-                <span className="text-label-secondary text-xs">{formatFileSize(file.size)}</span>
-              </div>
-              <button
-                type="button"
-                onClick={() => removeFile(index)}
-                className="flex-shrink-0 p-1 hover:bg-surface-secondary rounded transition-colors"
-              >
-                <IconCross size={16} className="fill-fill-secondary" />
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-
-      <input
-        ref={inputRef}
-        type="file"
-        onChange={handleFileSelect}
-        className="hidden"
-        multiple
-      />
-
-      <div
-        onDrop={handleDrop}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onClick={() => inputRef.current?.click()}
-        className={`flex flex-col items-center justify-center gap-2 p-8 border-2 border-dashed rounded-lg cursor-pointer transition-colors ${
-          isDragging
-            ? 'border-border-action bg-surface-action-soft'
-            : 'border-border-primary hover:border-border-action hover:bg-surface-action-soft'
-        }`}
-      >
-        <IconUpload size={24} className="fill-fill-secondary" />
-        <div className="flex flex-col items-center gap-0.5">
-          <span className="text-label-primary text-sm font-medium">{t('dragFileToUpload')}</span>
-          <span className="text-label-action text-sm font-medium">{t('browseFilesBtn')}</span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export type { AttachedFile };
-export default EmailAttachment;