Improve product AI UX, category search, and card actions.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
d787a69195
commit
b743c09e4d
@@ -1,7 +1,9 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { Sparkles, X } from 'lucide-react'
|
||||
import { useLocale } from '@meshkee/dashboard-ui'
|
||||
import { useToast } from '../context/ToastContext'
|
||||
import { useT } from '../i18n/useT'
|
||||
import { ApiError } from '../lib/api'
|
||||
import { listProductCategories, mapProductCategoryToUi } from '../services/productCategoryService'
|
||||
import { createProductByAi, type ProductAiLanguage } from '../services/productAiService'
|
||||
@@ -26,26 +28,29 @@ export function AddProductByAiModal({
|
||||
onClose,
|
||||
onCreated,
|
||||
}: AddProductByAiModalProps) {
|
||||
const t = useT()
|
||||
const { locale } = useLocale()
|
||||
const { showToast } = useToast()
|
||||
const [mounted, setMounted] = useState(open)
|
||||
const [closing, setClosing] = useState(false)
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [categoryId, setCategoryId] = useState('')
|
||||
const [name, setName] = useState('')
|
||||
const [language, setLanguage] = useState<ProductAiLanguage>('en')
|
||||
const [prompt, setPrompt] = useState('')
|
||||
const [language, setLanguage] = useState<ProductAiLanguage>(locale === 'fa' ? 'fa' : 'en')
|
||||
const [isLoadingCategories, setIsLoadingCategories] = useState(false)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const categoryOptions = useMemo(() => flattenCategories(categories), [categories])
|
||||
const promptDir = language === 'fa' ? 'rtl' : 'ltr'
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setMounted(true)
|
||||
setClosing(false)
|
||||
setCategoryId('')
|
||||
setName('')
|
||||
setLanguage('en')
|
||||
setPrompt('')
|
||||
setLanguage(locale === 'fa' ? 'fa' : 'en')
|
||||
setError('')
|
||||
} else if (mounted) {
|
||||
setClosing(true)
|
||||
@@ -55,7 +60,7 @@ export function AddProductByAiModal({
|
||||
}, ANIMATION_MS)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [open, mounted])
|
||||
}, [open, mounted, locale])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
@@ -86,7 +91,7 @@ export function AddProductByAiModal({
|
||||
if (err instanceof ApiError) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
setError('Unable to load categories.')
|
||||
setError(t('products.ai.loadCategoriesError'))
|
||||
}
|
||||
} finally {
|
||||
setIsLoadingCategories(false)
|
||||
@@ -95,7 +100,7 @@ export function AddProductByAiModal({
|
||||
|
||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
if (!categoryId || !name.trim()) return
|
||||
if (!categoryId || !prompt.trim()) return
|
||||
|
||||
setIsSubmitting(true)
|
||||
setError('')
|
||||
@@ -103,7 +108,7 @@ export function AddProductByAiModal({
|
||||
try {
|
||||
const result = await createProductByAi({
|
||||
categoryId,
|
||||
name: name.trim(),
|
||||
name: prompt.trim(),
|
||||
language,
|
||||
})
|
||||
showToast(result.message, 'success')
|
||||
@@ -115,7 +120,7 @@ export function AddProductByAiModal({
|
||||
} else if (err instanceof Error) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
setError('Unable to create product with AI.')
|
||||
setError(t('products.ai.createError'))
|
||||
}
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
@@ -131,7 +136,7 @@ export function AddProductByAiModal({
|
||||
role="presentation"
|
||||
>
|
||||
<div
|
||||
className={`${modalStyles.modal} ${closing ? modalStyles.modalOut : modalStyles.modalIn}`}
|
||||
className={`${modalStyles.modal} ${styles.modal} ${closing ? modalStyles.modalOut : modalStyles.modalIn}`}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="add-product-ai-title"
|
||||
@@ -139,19 +144,16 @@ export function AddProductByAiModal({
|
||||
<div className={`${modalStyles.header} ${styles.header}`}>
|
||||
<div className={styles.headerBlock}>
|
||||
<h2 id="add-product-ai-title" className={modalStyles.title}>
|
||||
Add Product by AI
|
||||
{t('products.ai.title')}
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
AI will generate product content and technical data. You can add images and
|
||||
variations afterward.
|
||||
</p>
|
||||
<p className={styles.subtitle}>{t('products.ai.subtitle')}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={modalStyles.closeBtn}
|
||||
onClick={onClose}
|
||||
disabled={isSubmitting}
|
||||
aria-label="Close"
|
||||
aria-label={t('common.close')}
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
@@ -159,43 +161,44 @@ export function AddProductByAiModal({
|
||||
|
||||
<form className={modalStyles.form} onSubmit={(e) => void handleSubmit(e)}>
|
||||
<div className={modalStyles.field}>
|
||||
<label>Category</label>
|
||||
<label htmlFor="ai-product-category">{t('products.ai.category')}</label>
|
||||
<SearchableSelect
|
||||
options={categoryOptions}
|
||||
value={categoryId}
|
||||
onChange={setCategoryId}
|
||||
placeholder="Search and select category..."
|
||||
placeholder={t('products.ai.categoryPlaceholder')}
|
||||
allowEmpty={false}
|
||||
dropdownVariant="inFlow"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={modalStyles.field}>
|
||||
<label htmlFor="ai-product-name">Product name</label>
|
||||
<input
|
||||
id="ai-product-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder={
|
||||
language === 'fa' ? 'نام محصول را وارد کنید' : 'Enter product name'
|
||||
}
|
||||
dir={language === 'fa' ? 'rtl' : 'ltr'}
|
||||
className={language === 'fa' ? 'faText' : undefined}
|
||||
<label htmlFor="ai-product-prompt">{t('products.ai.prompt')}</label>
|
||||
<textarea
|
||||
id="ai-product-prompt"
|
||||
value={prompt}
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
placeholder={t('products.ai.promptPlaceholder')}
|
||||
dir={promptDir}
|
||||
className={`${styles.prompt}${language === 'fa' ? ' faText' : ''}`}
|
||||
disabled={isSubmitting}
|
||||
rows={5}
|
||||
required
|
||||
minLength={2}
|
||||
/>
|
||||
<p className={styles.promptHint}>{t('products.ai.promptHint')}</p>
|
||||
</div>
|
||||
|
||||
<div className={`${modalStyles.field} ${fieldStyles.field}`}>
|
||||
<label htmlFor="ai-product-language">Language</label>
|
||||
<label htmlFor="ai-product-language">{t('products.ai.language')}</label>
|
||||
<select
|
||||
id="ai-product-language"
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value as ProductAiLanguage)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="fa">Persian (Farsi)</option>
|
||||
<option value="en">{t('products.ai.language.en')}</option>
|
||||
<option value="fa">{t('products.ai.language.fa')}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -208,24 +211,24 @@ export function AddProductByAiModal({
|
||||
onClick={onClose}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Cancel
|
||||
{t('common.cancel')}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className={aiStyles.aiBtn}
|
||||
disabled={
|
||||
isSubmitting || isLoadingCategories || !categoryId || !name.trim()
|
||||
isSubmitting || isLoadingCategories || !categoryId || !prompt.trim()
|
||||
}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Sparkles size={16} />
|
||||
Creating...
|
||||
{t('products.ai.creating')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles size={16} />
|
||||
Create product
|
||||
{t('products.ai.create')}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user