Add customer and business user-product flows across dashboards.

Ship my-products / customer-products UI with gallery uploads, status controls, module gating, and related shared UI polish.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/components/TechnicalFormAiPromptModal.tsx

@@ -1,11 +1,28 @@
 import { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Sparkles, X } from 'lucide-react'
+import { useLocale } from '@meshkee/dashboard-ui'
+import { useT } from '../i18n/useT'
 import modalStyles from './CategoryModal.module.css'
 import aiStyles from '../styles/ai.module.css'
 import styles from './CategoryAiPromptModal.module.css'
 
-export function buildTechnicalFormAiPrompt(categoryName: string) {
+export function buildTechnicalFormAiPrompt(
+  categoryName: string,
+  locale: 'fa' | 'en' = 'en',
+) {
+  if (locale === 'fa') {
+    return `برای دسته‌بندی محصول «${categoryName}» فیلدهای فرم اطلاعات فنی پیشنهاد بده.
+
+برای هر فیلد این موارد را مشخص کن:
+- برچسب کوتاه انگلیسی (مثلاً Screen Size، Material، Color)
+- نوع ورودی: text، textarea، select یا multi_select
+- الزامی بودن یا نبودن
+- برای select / multi_select: فهرست گزینه‌ها
+
+روی مشخصات و ویژگی‌هایی تمرکز کن که خریداران معمولاً هنگام مقایسه این نوع محصول بررسی می‌کنند.`
+  }
+
   return `Suggest technical data form fields for the "${categoryName}" product category.
 
 For each field include:
@@ -34,16 +51,21 @@ export function TechnicalFormAiPromptModal({
   onRun,
   isRunning,
 }: TechnicalFormAiPromptModalProps) {
+  const t = useT()
+  const { locale } = useLocale()
+  const isFa = locale === 'fa'
   const [mounted, setMounted] = useState(open)
   const [closing, setClosing] = useState(false)
-  const [prompt, setPrompt] = useState(() => buildTechnicalFormAiPrompt(categoryName))
+  const [prompt, setPrompt] = useState(() =>
+    buildTechnicalFormAiPrompt(categoryName, isFa ? 'fa' : 'en'),
+  )
   const [error, setError] = useState('')
 
   useEffect(() => {
     if (open) {
       setMounted(true)
       setClosing(false)
-      setPrompt(buildTechnicalFormAiPrompt(categoryName))
+      setPrompt(buildTechnicalFormAiPrompt(categoryName, isFa ? 'fa' : 'en'))
       setError('')
     } else if (mounted) {
       setClosing(true)
@@ -53,7 +75,7 @@ export function TechnicalFormAiPromptModal({
       }, ANIMATION_MS)
       return () => clearTimeout(timer)
     }
-  }, [open, mounted, categoryName])
+  }, [open, mounted, categoryName, isFa])
 
   useEffect(() => {
     if (!mounted || closing) return
@@ -68,7 +90,7 @@ export function TechnicalFormAiPromptModal({
     e.preventDefault()
     const trimmed = prompt.trim()
     if (trimmed.length < 10) {
-      setError('Prompt must be at least 10 characters.')
+      setError(t('products.form.aiPromptTooShort'))
       return
     }
     setError('')
@@ -78,7 +100,7 @@ export function TechnicalFormAiPromptModal({
       if (err instanceof Error) {
         setError(err.message)
       } else {
-        setError('Unable to generate technical form with AI.')
+        setError(t('categories.technical.ai.error'))
       }
     }
   }
@@ -87,7 +109,7 @@ export function TechnicalFormAiPromptModal({
 
   return createPortal(
     <div
-      className={`${modalStyles.overlay} ${closing ? modalStyles.overlayOut : modalStyles.overlayIn}`}
+      className={`${modalStyles.overlay} ${modalStyles.overlayStacked} ${closing ? modalStyles.overlayOut : modalStyles.overlayIn}`}
       onClick={(e) => e.target === e.currentTarget && !isRunning && onClose()}
       role="presentation"
     >
@@ -96,22 +118,22 @@ export function TechnicalFormAiPromptModal({
         role="dialog"
         aria-modal="true"
         aria-labelledby="tech-form-ai-prompt-title"
+        lang={isFa ? 'fa' : 'en'}
+        dir={isFa ? 'rtl' : 'ltr'}
       >
         <div className={`${modalStyles.header} ${styles.header}`}>
           <div className={styles.headerBlock}>
             <h2 id="tech-form-ai-prompt-title" className={modalStyles.title}>
-              Generate Technical Form with AI
+              {t('categories.technical.ai.title')}
             </h2>
-            <p className={styles.subtitle}>
-              Edit the prompt below, then run it to fill the form fields.
-            </p>
+            <p className={styles.subtitle}>{t('categories.technical.ai.subtitle')}</p>
           </div>
           <button
             type="button"
             className={modalStyles.closeBtn}
             onClick={onClose}
             disabled={isRunning}
-            aria-label="Close"
+            aria-label={t('common.close')}
           >
             <X size={20} />
           </button>
@@ -119,7 +141,7 @@ export function TechnicalFormAiPromptModal({
 
         <form className={modalStyles.form} onSubmit={(e) => void handleSubmit(e)}>
           <div className={`${modalStyles.field} ${aiStyles.aiPromptField}`}>
-            <label htmlFor="tech-form-ai-prompt">Prompt</label>
+            <label htmlFor="tech-form-ai-prompt">{t('products.form.aiPrompt')}</label>
             <textarea
               id="tech-form-ai-prompt"
               className={aiStyles.aiPromptTextarea}
@@ -128,10 +150,12 @@ export function TechnicalFormAiPromptModal({
               rows={8}
               disabled={isRunning}
               required
+              lang={isFa ? 'fa' : 'en'}
+              dir={isFa ? 'rtl' : 'ltr'}
             />
           </div>
 
-          {error && <p className={styles.error}>{error}</p>}
+          {error ? <p className={styles.error}>{error}</p> : null}
 
           <div className={modalStyles.actions}>
             <button
@@ -140,7 +164,7 @@ export function TechnicalFormAiPromptModal({
               onClick={onClose}
               disabled={isRunning}
             >
-              Cancel
+              {t('categories.modal.cancel')}
             </button>
             <button
               type="submit"
@@ -148,13 +172,12 @@ export function TechnicalFormAiPromptModal({
               disabled={isRunning || prompt.trim().length < 10}
             >
               <Sparkles size={16} />
-              {isRunning ? 'Generating…' : 'Run'}
+              {isRunning ? t('products.form.aiGenerating') : t('products.form.aiRun')}
             </button>
           </div>
         </form>
       </div>
-    </div>
-  ,
-  document.body,
+    </div>,
+    document.body,
   )
 }