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

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

@@ -1,4 +1,5 @@
 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';
@@ -11,12 +12,13 @@ export const ResetPasswordForm: React.FC = () => {
   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('Please enter your email address');
+      showError(t('pleaseEnterEmailAddress'));
       return;
     }
 
@@ -27,14 +29,14 @@ export const ResetPasswordForm: React.FC = () => {
       });
 
       if (error) {
-        showError('Reset failed', error.message || 'Failed to send reset email');
+        showError(t('resetFailed'), error.message);
         return;
       }
 
-      showSuccess('Password reset email sent!', 'Check your inbox.');
+      showSuccess(t('passwordResetEmailSent'), t('checkYourInbox'));
       navigate('/auth/verify-email');
     } catch (error) {
-      showError('An unexpected error occurred');
+      showError(t('unexpectedError'));
     } finally {
       setIsSubmitting(false);
     }
@@ -45,13 +47,13 @@ export const ResetPasswordForm: React.FC = () => {
       {/* Info text */}
       <div className="mb-6">
         <p className="text-label-primary text-base leading-[1.4]">
-          Password reset instructions will be sent to your email address.
+          {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">
-          Email Address
+          {t('emailAddress')}
         </Label>
         <Input
           id="email"
@@ -70,28 +72,28 @@ export const ResetPasswordForm: React.FC = () => {
         size="lg"
         className="mb-4 min-w-[150px] w-fit"
       >
-        {isSubmitting ? 'Sending...' : 'Reset Password'}
+        {isSubmitting ? t('sendingReset') : t('resetPassword')}
       </Button>
 
       <p className="text-label-primary text-[15px] font-normal mb-2">
-        Already got an account?{' '}
+        {t('resetPasswordAlreadyAccount')}{' '}
         <button
           type="button"
           onClick={() => navigate('/auth')}
           className="text-label-action font-normal underline"
         >
-          Log in
+          {t('logIn')}
         </button>
         <span className="text-label-primary">.</span>
       </p>
 
       <p className="text-label-primary text-[15px] font-normal">
-        For further support{' '}
-        <a 
+        {t('forFurtherSupport')}{' '}
+        <a
           href="mailto:support@booked.it"
           className="text-label-action font-normal underline"
         >
-          contact us
+          {t('contactUs')}
         </a>
         <span className="text-label-primary">.</span>
       </p>

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

@@ -1,16 +1,18 @@
 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="Reset Password"
+      badgeLabel={t('resetPassword')}
       icon={
         <IconUpdate className="w-16 h-16 text-fill-primary" />
       }
-      title="Reset Password"
-      subtitle="Regain access to your account."
+      title={t('resetPassword')}
+      subtitle={t('resetPasswordSubtitle')}
     >
       <ResetPasswordForm />
     </AuthLayout>

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

@@ -1,4 +1,5 @@
 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';
@@ -10,6 +11,7 @@ export const VerifyEmailForm: React.FC = () => {
   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(() => {
@@ -21,7 +23,7 @@ export const VerifyEmailForm: React.FC = () => {
     e.preventDefault();
     
     if (!code || code.length !== 6) {
-      showError('Please enter a valid 6-digit code');
+      showError(t('pleaseEnterValidCode'));
       return;
     }
 
@@ -29,10 +31,10 @@ export const VerifyEmailForm: React.FC = () => {
     try {
       // Simulate verification
       await new Promise(resolve => setTimeout(resolve, 1000));
-      showSuccess('Email verified successfully!');
+      showSuccess(t('emailVerifiedSuccessfully'));
       navigate('/auth/create-password');
     } catch (error) {
-      showError('Verification failed. Please try again.');
+      showError(t('verificationFailed'));
     } finally {
       setIsSubmitting(false);
     }
@@ -43,10 +45,10 @@ export const VerifyEmailForm: React.FC = () => {
       <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">
-            Verification Code
+            {t('verifyEmailCode')}
           </Label>
           <p className="text-label-secondary text-sm mb-4">
-            We've sent a 6-digit code to your email. Please enter it below.
+            {t('verifyEmailDescription')}
           </p>
           <div className="flex gap-2 w-full">
             {[0, 1, 2, 3, 4, 5].map((index) => (
@@ -85,7 +87,7 @@ export const VerifyEmailForm: React.FC = () => {
           size="lg"
           className="mt-2 min-w-[150px] w-fit"
         >
-          {isSubmitting ? 'Verifying...' : 'Verify Code'}
+          {isSubmitting ? t('verifying') : t('verifyCode')}
         </Button>
       </form>
     </>

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

@@ -1,16 +1,18 @@
 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="Verify email"
+      badgeLabel={t('verifyEmail')}
       icon={
         <IconMail className="w-16 h-16 text-fill-primary" />
       }
-      title="Verify email"
-      subtitle="Check your inbox for verification."
+      title={t('verifyEmail')}
+      subtitle={t('verifyEmailPanelSubtitle')}
     >
       <VerifyEmailForm />
     </AuthLayout>

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

@@ -1,4 +1,5 @@
 import React, { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { IconUpload, IconCross } from '../../../icons';
 
 interface AttachedFile {
@@ -19,6 +20,7 @@ const formatFileSize = (bytes: number) => {
 };
 
 const EmailAttachment: React.FC<EmailAttachmentProps> = ({ files, onChange }) => {
+  const { t } = useTranslation(['Design']);
   const inputRef = useRef<HTMLInputElement>(null);
   const [isDragging, setIsDragging] = useState(false);
 
@@ -59,7 +61,7 @@ const EmailAttachment: React.FC<EmailAttachmentProps> = ({ files, onChange }) =>
 
   return (
     <div className="flex flex-col gap-3">
-      <h2 className="text-label-primary text-lg font-semibold">Attachments</h2>
+      <h2 className="text-label-primary text-lg font-semibold">{t('attachments')}</h2>
 
       {files.length > 0 && (
         <div className="flex flex-col gap-2">
@@ -105,8 +107,8 @@ const EmailAttachment: React.FC<EmailAttachmentProps> = ({ files, onChange }) =>
       >
         <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">Drag File to Upload</span>
-          <span className="text-label-action text-sm font-medium">Browse Files</span>
+          <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>

package/src/v2/shadcn/_reference/shared/ConfirmationDialog.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { cn } from '../../lib/utils';
 import { buttonVariants } from '../ui/button';
 import {
@@ -37,6 +38,7 @@ const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
   mode = 'edit',
   itemName,
 }) => {
+  const { t } = useTranslation(['Design']);
   const [confirmationInput, setConfirmationInput] = useState('');
 
   useEffect(() => {
@@ -47,12 +49,12 @@ const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
 
   if (variant === 'cancel') {
     const isCreate = mode === 'create';
-    const defaultTitle = isCreate ? 'Discard?' : 'Discard Changes?';
+    const defaultTitle = isCreate ? t('discardTitle') : t('discardChangesTitle');
     const defaultDescription = isCreate
-      ? 'Your progress will be lost if you leave this page. Are you sure you want to cancel?'
-      : 'You have unsaved changes that will be lost if you leave this page. Are you sure you want to cancel?';
-    const actionLabel = isCreate ? 'Discard' : 'Discard Changes';
-    const cancelLabel = isCreate ? 'Continue' : 'Continue Editing';
+      ? t('discardProgressDesc')
+      : t('discardChangesDesc');
+    const actionLabel = isCreate ? t('discard') : t('discardChanges');
+    const cancelLabel = isCreate ? t('continue') : t('continueEditing');
 
     return (
       <AlertDialog open={open} onOpenChange={onOpenChange}>
@@ -82,8 +84,8 @@ const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
   const isDeleteEnabled = !itemName || confirmationInput === itemName;
 
   const defaultDescription = itemName
-    ? `This action cannot be undone.\n\nThis will permanently delete ${itemName}\nand remove all associated data.`
-    : 'This action cannot be undone.\n\nThis will permanently delete this item and remove all associated data.';
+    ? t('deleteNamedItemDesc', { name: itemName })
+    : t('deleteItemDesc');
 
   const handleConfirm = () => {
     if (isDeleteEnabled) {
@@ -95,7 +97,7 @@ const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent className="z-50">
         <AlertDialogHeader>
-          <AlertDialogTitle>{title || 'Delete'}</AlertDialogTitle>
+          <AlertDialogTitle>{title || t('delete')}</AlertDialogTitle>
           <AlertDialogDescription className="whitespace-pre-line">
             {description || defaultDescription}
           </AlertDialogDescription>
@@ -104,7 +106,7 @@ const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
         {itemName && (
           <div className="space-y-2">
             <Label htmlFor="confirm-name" className="text-label-primary text-sm">
-              Type <span className="font-semibold">{itemName}</span> to confirm deletion
+              {t('typeWord')} <span className="font-semibold">{itemName}</span> {t('toConfirmDeletion')}
             </Label>
             <Input
               id="confirm-name"
@@ -122,9 +124,9 @@ const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
             disabled={!isDeleteEnabled}
             className={cn(buttonVariants({ variant: "destructive" }), "disabled:opacity-50 disabled:cursor-not-allowed")}
           >
-            Delete
+            {t('delete')}
           </AlertDialogAction>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>