Flatten transparent product images to white and allow cropper unzoom.

PNG/WebP uploads no longer bake to black on JPEG; product croppers can zoom out with white padding, and SEO tools move into the product overflow menu. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-19 08:39:32 +03:30
parent b743c09e4d
commit 06e2442aaf
17 changed files with 470 additions and 102 deletions
@@ -0,0 +1,170 @@
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Search, X } from 'lucide-react'
+import { ApiError } from '../lib/api'
+import { useT } from '../i18n/useT'
+import { getProduct, updateProduct } from '../services/productService'
+import { seoMetaPayload } from '../utils/seoMeta'
+import { SeoMetaFields } from './SeoMetaFields'
+import styles from './VariationsModal.module.css'
+import seoStyles from './ProductSeoModal.module.css'
+
+interface ProductSeoModalProps {
+  open: boolean
+  productId: string
+  productName: string
+  onClose: () => void
+}
+
+const ANIMATION_MS = 220
+
+export function ProductSeoModal({
+  open,
+  productId,
+  productName,
+  onClose,
+}: ProductSeoModalProps) {
+  const t = useT()
+  const [mounted, setMounted] = useState(open)
+  const [closing, setClosing] = useState(false)
+  const [seoMetaTitle, setSeoMetaTitle] = useState('')
+  const [seoMetaDescription, setSeoMetaDescription] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    if (open) {
+      setMounted(true)
+      setClosing(false)
+    } else if (mounted) {
+      setClosing(true)
+      const timer = setTimeout(() => {
+        setMounted(false)
+        setClosing(false)
+      }, ANIMATION_MS)
+      return () => clearTimeout(timer)
+    }
+  }, [open, mounted])
+
+  useEffect(() => {
+    if (!open || !productId) return
+
+    const controller = new AbortController()
+    void loadData(controller.signal)
+    return () => controller.abort()
+  }, [open, productId])
+
+  async function loadData(signal?: AbortSignal) {
+    setIsLoading(true)
+    setError('')
+    try {
+      const product = await getProduct(productId, signal)
+      setSeoMetaTitle(product.seoMetaTitle ?? '')
+      setSeoMetaDescription(product.seoMetaDescription ?? '')
+    } catch (err) {
+      if (err instanceof DOMException && err.name === 'AbortError') return
+      if (err instanceof ApiError) {
+        setError(err.message)
+      } else {
+        setError(t('products.seo.errorLoad'))
+      }
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  async function handleSave() {
+    setIsSaving(true)
+    setError('')
+    try {
+      await updateProduct(productId, seoMetaPayload(seoMetaTitle, seoMetaDescription))
+      onClose()
+    } catch (err) {
+      if (err instanceof ApiError) {
+        setError(err.message)
+      } else {
+        setError(t('products.seo.errorSave'))
+      }
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  if (!mounted) return null
+
+  return createPortal(
+    <div
+      className={`${styles.overlay} ${closing ? styles.overlayOut : styles.overlayIn}`}
+      onClick={() => !isSaving && onClose()}
+    >
+      <div
+        className={`${styles.modal} ${seoStyles.modal} ${closing ? styles.modalOut : styles.modalIn}`}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="product-seo-title"
+      >
+        <div className={styles.header}>
+          <div>
+            <h3 id="product-seo-title" className={`${styles.title} ${seoStyles.titleRow}`}>
+              <Search size={18} aria-hidden="true" />
+              <span>{t('products.seo.title')}</span>
+            </h3>
+            {productName ? <p className={styles.subtitle}>{productName}</p> : null}
+          </div>
+          <button
+            type="button"
+            className={styles.closeBtn}
+            onClick={onClose}
+            disabled={isSaving}
+            aria-label={t('common.close')}
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <div className={styles.body}>
+          {isLoading ? (
+            <p className={styles.emptyText}>{t('products.seo.loading')}</p>
+          ) : (
+            <SeoMetaFields
+              seoMetaTitle={seoMetaTitle}
+              seoMetaDescription={seoMetaDescription}
+              onTitleChange={setSeoMetaTitle}
+              onDescriptionChange={setSeoMetaDescription}
+              disabled={isSaving}
+              hint={t('seo.meta.hint')}
+              titleLabel={t('seo.meta.title')}
+              descriptionLabel={t('seo.meta.description')}
+              titlePlaceholder={t('seo.meta.titlePlaceholder')}
+              descriptionPlaceholder={t('seo.meta.descriptionPlaceholder')}
+            />
+          )}
+
+          {error ? <p className={styles.errorText}>{error}</p> : null}
+
+          <div className={styles.actions}>
+            <button
+              type="button"
+              className={styles.cancelBtn}
+              onClick={onClose}
+              disabled={isSaving}
+            >
+              {t('common.cancel')}
+            </button>
+            <button
+              type="button"
+              className={styles.submitBtn}
+              onClick={() => void handleSave()}
+              disabled={isLoading || isSaving}
+            >
+              {isSaving ? t('products.seo.saving') : t('products.seo.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}