Add multilanguage catalog translations UI for products and categories.

Include AI translate-all with locale picker, count badges, MultiLanguage Data module gating, and shared modal action layout polish. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-04 09:51:11 +03:30
parent 8c187b18be
commit 2a32c46b2e
43 changed files with 1624 additions and 78 deletions
@@ -0,0 +1,134 @@
+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 type { TranslationLocale } from '../types/translation'
+import modalStyles from './CategoryModal.module.css'
+import { LanguageLocaleOptions } from './LanguageLocaleOptions'
+import aiStyles from '../styles/ai.module.css'
+import styles from './TranslateAllLanguageModal.module.css'
+
+const ANIMATION_MS = 220
+
+interface TranslateAllLanguageModalProps {
+  open: boolean
+  title: string
+  subtitle: string
+  running: boolean
+  runLabel?: string
+  runningLabel?: string
+  onClose: () => void
+  onConfirm: (locale: TranslationLocale) => void
+}
+
+export function TranslateAllLanguageModal({
+  open,
+  title,
+  subtitle,
+  running,
+  runLabel,
+  runningLabel,
+  onClose,
+  onConfirm,
+}: TranslateAllLanguageModalProps) {
+  const t = useT()
+  const { locale: uiLocale } = useLocale()
+  const isFa = uiLocale === 'fa'
+  const [mounted, setMounted] = useState(open)
+  const [closing, setClosing] = useState(false)
+  const [locale, setLocale] = useState<TranslationLocale>('en')
+
+  useEffect(() => {
+    if (open) {
+      setMounted(true)
+      setClosing(false)
+      setLocale('en')
+    } else if (mounted) {
+      setClosing(true)
+      const timer = setTimeout(() => {
+        setMounted(false)
+        setClosing(false)
+      }, ANIMATION_MS)
+      return () => clearTimeout(timer)
+    }
+  }, [open, mounted])
+
+  useEffect(() => {
+    if (!mounted || closing || running) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [mounted, closing, running, onClose])
+
+  if (!mounted) return null
+
+  return createPortal(
+    <div
+      className={`${modalStyles.overlay} ${closing ? modalStyles.overlayOut : modalStyles.overlayIn}`}
+      onClick={() => !running && onClose()}
+    >
+      <div
+        className={`${modalStyles.modal} ${styles.modal} ${closing ? modalStyles.modalOut : modalStyles.modalIn}`}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="translate-all-language-title"
+        lang={isFa ? 'fa' : 'en'}
+        dir={isFa ? 'rtl' : 'ltr'}
+      >
+        <div className={`${modalStyles.header} ${styles.header}`}>
+          <div className={styles.headerBlock}>
+            <h3 id="translate-all-language-title" className={modalStyles.title}>
+              {title}
+            </h3>
+            <p className={styles.subtitle}>{subtitle}</p>
+          </div>
+          <button
+            type="button"
+            className={modalStyles.closeBtn}
+            onClick={onClose}
+            disabled={running}
+            aria-label={t('common.close')}
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <div className={styles.body}>
+          <LanguageLocaleOptions
+            value={locale}
+            disabled={running}
+            ariaLabel={title}
+            onChange={setLocale}
+          />
+
+          <div className={styles.actions}>
+            <button
+              type="button"
+              className={modalStyles.cancelBtn}
+              onClick={onClose}
+              disabled={running}
+            >
+              {t('categories.modal.cancel')}
+            </button>
+            <button
+              type="button"
+              className={aiStyles.aiBtn}
+              onClick={() => onConfirm(locale)}
+              disabled={running}
+            >
+              <Sparkles size={16} />
+              {running
+                ? runningLabel || t('categories.translateAll.running')
+                : runLabel || t('categories.translateAll.run')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}