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>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
b743c09e4d
commit
06e2442aaf
@@ -1,5 +1,6 @@
|
||||
.modal {
|
||||
width: min(560px, calc(100vw - 32px));
|
||||
width: min(820px, calc(100vw - 32px));
|
||||
max-width: 820px;
|
||||
}
|
||||
|
||||
.headerBlock {
|
||||
@@ -16,9 +17,6 @@
|
||||
|
||||
.prompt {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.promptHint {
|
||||
|
||||
@@ -172,7 +172,7 @@ export function AddProductByAiModal({
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={modalStyles.field}>
|
||||
<div className={`${modalStyles.field} ${aiStyles.aiPromptField}`}>
|
||||
<label htmlFor="ai-product-prompt">{t('products.ai.prompt')}</label>
|
||||
<textarea
|
||||
id="ai-product-prompt"
|
||||
@@ -180,11 +180,12 @@ export function AddProductByAiModal({
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
placeholder={t('products.ai.promptPlaceholder')}
|
||||
dir={promptDir}
|
||||
className={`${styles.prompt}${language === 'fa' ? ' faText' : ''}`}
|
||||
className={`${aiStyles.aiPromptTextarea} ${styles.prompt}${language === 'fa' ? ' faText' : ''}`}
|
||||
disabled={isSubmitting}
|
||||
rows={5}
|
||||
rows={14}
|
||||
required
|
||||
minLength={2}
|
||||
lang={language === 'fa' ? 'fa' : 'en'}
|
||||
/>
|
||||
<p className={styles.promptHint}>{t('products.ai.promptHint')}</p>
|
||||
</div>
|
||||
|
||||
@@ -11,6 +11,11 @@ interface ImageCropperProps {
|
||||
/** Crop aspect ratio. Defaults to square (1). */
|
||||
aspect?: number
|
||||
outputFormat?: 'jpeg' | 'png'
|
||||
/** Fill color for JPEG and for crop areas outside the image. */
|
||||
fillColor?: string
|
||||
/** Minimum zoom. Values below 1 shrink the image inside the crop frame. */
|
||||
minZoom?: number
|
||||
maxZoom?: number
|
||||
accept?: string
|
||||
uploadLabel?: string
|
||||
hint?: string
|
||||
@@ -24,6 +29,9 @@ export function ImageCropper({
|
||||
onChange,
|
||||
aspect = 1,
|
||||
outputFormat = 'jpeg',
|
||||
fillColor,
|
||||
minZoom = 1,
|
||||
maxZoom = 3,
|
||||
accept = 'image/*',
|
||||
uploadLabel,
|
||||
hint,
|
||||
@@ -34,6 +42,8 @@ export function ImageCropper({
|
||||
const resolvedUploadLabel = uploadLabel ?? t('products.form.thumbnailUpload')
|
||||
const resolvedHint = hint ?? t('products.form.thumbnailHint')
|
||||
const resolvedChangeLabel = changeLabel ?? t('products.form.thumbnailChange')
|
||||
const resolvedFillColor = fillColor ?? (outputFormat === 'jpeg' ? '#ffffff' : undefined)
|
||||
const cropSurfaceColor = resolvedFillColor ?? '#1e293b'
|
||||
const [imageSrc, setImageSrc] = useState<string | null>(null)
|
||||
const [crop, setCrop] = useState({ x: 0, y: 0 })
|
||||
const [zoom, setZoom] = useState(1)
|
||||
@@ -65,7 +75,12 @@ export function ImageCropper({
|
||||
|
||||
async function applyCrop() {
|
||||
if (!imageSrc || !croppedArea) return
|
||||
const cropped = await getCroppedImage(imageSrc, croppedArea, outputFormat)
|
||||
const cropped = await getCroppedImage(
|
||||
imageSrc,
|
||||
croppedArea,
|
||||
outputFormat,
|
||||
resolvedFillColor,
|
||||
)
|
||||
onChange(cropped)
|
||||
setImageSrc(null)
|
||||
setZoom(1)
|
||||
@@ -128,16 +143,25 @@ export function ImageCropper({
|
||||
|
||||
{imageSrc && (
|
||||
<div className={styles.cropPanel}>
|
||||
<div className={styles.cropArea} style={frameStyle}>
|
||||
<div
|
||||
className={styles.cropArea}
|
||||
style={{ ...frameStyle, background: cropSurfaceColor }}
|
||||
>
|
||||
<Cropper
|
||||
key={String(aspect)}
|
||||
image={imageSrc}
|
||||
crop={crop}
|
||||
zoom={zoom}
|
||||
minZoom={minZoom}
|
||||
maxZoom={maxZoom}
|
||||
aspect={aspect}
|
||||
onCropChange={setCrop}
|
||||
onZoomChange={setZoom}
|
||||
onCropComplete={onCropComplete}
|
||||
restrictPosition={minZoom >= 1}
|
||||
style={{
|
||||
containerStyle: { background: cropSurfaceColor },
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.cropControls}>
|
||||
@@ -145,8 +169,8 @@ export function ImageCropper({
|
||||
{t('products.form.zoom')}
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={3}
|
||||
min={minZoom}
|
||||
max={maxZoom}
|
||||
step={0.05}
|
||||
value={zoom}
|
||||
onChange={(e) => setZoom(Number(e.target.value))}
|
||||
|
||||
@@ -8,6 +8,9 @@ import {
|
||||
ClipboardList,
|
||||
ImageOff,
|
||||
ExternalLink,
|
||||
Info,
|
||||
MessageSquare,
|
||||
Search,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react'
|
||||
import { useLocale } from '@meshkee/dashboard-ui'
|
||||
@@ -22,14 +25,15 @@ import { OpenOnWebsiteControl } from './OpenOnWebsiteControl'
|
||||
import { ProductCardOverflowMenu } from './ProductCardOverflowMenu'
|
||||
import styles from './ProductCard.module.css'
|
||||
|
||||
/** Max icon slots in the card footer, including the overflow trigger when needed. */
|
||||
const MAX_VISIBLE_ACTIONS = 6
|
||||
|
||||
interface ProductCardProps {
|
||||
product: Product
|
||||
commentCount: number
|
||||
variantCount: number
|
||||
onEdit: (id: string) => void
|
||||
onTranslate: (id: string) => void
|
||||
onQuickInfo: (id: string) => void
|
||||
onComments: (id: string) => void
|
||||
onSeo: (id: string) => void
|
||||
onTechnicalInfo: (id: string) => void
|
||||
onRemove: (id: string) => void
|
||||
onVariations: (id: string) => void
|
||||
@@ -47,9 +51,13 @@ type CardAction = {
|
||||
|
||||
export function ProductCard({
|
||||
product,
|
||||
commentCount,
|
||||
variantCount,
|
||||
onEdit,
|
||||
onTranslate,
|
||||
onQuickInfo,
|
||||
onComments,
|
||||
onSeo,
|
||||
onTechnicalInfo,
|
||||
onRemove,
|
||||
onVariations,
|
||||
@@ -76,7 +84,7 @@ export function ProductCard({
|
||||
setImageFailed(false)
|
||||
}, [imageSrc])
|
||||
|
||||
const actions: CardAction[] = [
|
||||
const primaryActions: CardAction[] = [
|
||||
{
|
||||
key: 'edit',
|
||||
label: t('products.card.edit'),
|
||||
@@ -116,6 +124,30 @@ export function ProductCard({
|
||||
icon: ClipboardList,
|
||||
onClick: () => onTechnicalInfo(product.id),
|
||||
},
|
||||
]
|
||||
|
||||
const menuActions = [
|
||||
{
|
||||
key: 'seo',
|
||||
label: t('products.card.seo'),
|
||||
icon: Search,
|
||||
onClick: () => onSeo(product.id),
|
||||
},
|
||||
{
|
||||
key: 'quickInfo',
|
||||
label: t('products.card.quickInfo'),
|
||||
icon: Info,
|
||||
onClick: () => onQuickInfo(product.id),
|
||||
},
|
||||
{
|
||||
key: 'comments',
|
||||
label:
|
||||
commentCount > 0
|
||||
? `${t('products.card.comments')} (${commentCount})`
|
||||
: t('products.card.comments'),
|
||||
icon: MessageSquare,
|
||||
onClick: () => onComments(product.id),
|
||||
},
|
||||
{
|
||||
key: 'remove',
|
||||
label: t('products.card.remove'),
|
||||
@@ -125,20 +157,6 @@ export function ProductCard({
|
||||
},
|
||||
]
|
||||
|
||||
const needsOverflow = actions.length > MAX_VISIBLE_ACTIONS
|
||||
const visibleActions = needsOverflow
|
||||
? actions.slice(0, MAX_VISIBLE_ACTIONS - 1)
|
||||
: actions
|
||||
const overflowActions = needsOverflow
|
||||
? actions.slice(MAX_VISIBLE_ACTIONS - 1).map(({ key, label, icon, onClick, danger }) => ({
|
||||
key,
|
||||
label,
|
||||
icon,
|
||||
onClick,
|
||||
danger,
|
||||
}))
|
||||
: []
|
||||
|
||||
return (
|
||||
<article className={styles.card}>
|
||||
<Link to={`/products/detail/${product.id}`} className={styles.clickable}>
|
||||
@@ -180,7 +198,7 @@ export function ProductCard({
|
||||
</Link>
|
||||
|
||||
<div className={styles.controls}>
|
||||
{visibleActions.map((action) => {
|
||||
{primaryActions.map((action) => {
|
||||
if (action.render) return <span key={action.key}>{action.render()}</span>
|
||||
|
||||
const Icon = action.icon
|
||||
@@ -188,7 +206,7 @@ export function ProductCard({
|
||||
<Tooltip key={action.key} label={action.label}>
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles.iconBtn}${action.danger ? ` ${styles.danger}` : ''}`}
|
||||
className={styles.iconBtn}
|
||||
onClick={action.onClick}
|
||||
aria-label={
|
||||
action.badge != null ? `${action.label} (${action.badge})` : action.label
|
||||
@@ -202,12 +220,7 @@ export function ProductCard({
|
||||
</Tooltip>
|
||||
)
|
||||
})}
|
||||
{overflowActions.length > 0 ? (
|
||||
<ProductCardOverflowMenu
|
||||
productName={primaryName}
|
||||
items={overflowActions}
|
||||
/>
|
||||
) : null}
|
||||
<ProductCardOverflowMenu productName={primaryName} items={menuActions} />
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
.modal {
|
||||
width: min(560px, calc(100vw - 32px));
|
||||
}
|
||||
|
||||
.titleRow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
@@ -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,
|
||||
)
|
||||
}
|
||||
@@ -96,8 +96,8 @@
|
||||
.dropdownInFlow {
|
||||
position: static;
|
||||
margin-top: 6px;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
max-height: min(280px, 40vh);
|
||||
overflow-y: auto;
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
|
||||
@@ -553,12 +553,19 @@ const en = {
|
||||
'products.card.edit': 'Edit product',
|
||||
'products.card.translate': 'Translate',
|
||||
'products.card.moreActions': 'More actions',
|
||||
'products.card.seo': 'SEO tools',
|
||||
'products.card.quickInfo': 'Quick info',
|
||||
'products.card.variations': 'Manage variations',
|
||||
'products.card.comments': 'View comments',
|
||||
'products.card.technical': 'Technical data',
|
||||
'products.card.remove': 'Remove product',
|
||||
'products.card.draft': 'Draft',
|
||||
'products.seo.title': 'SEO tools',
|
||||
'products.seo.loading': 'Loading SEO settings…',
|
||||
'products.seo.save': 'Save',
|
||||
'products.seo.saving': 'Saving…',
|
||||
'products.seo.errorLoad': 'Unable to load SEO settings.',
|
||||
'products.seo.errorSave': 'Unable to save SEO settings.',
|
||||
|
||||
'products.details.loading': 'Loading product...',
|
||||
'products.details.notFound': 'Product not found.',
|
||||
@@ -3119,12 +3126,19 @@ const fa: Record<MessageKey, string> = {
|
||||
'products.card.edit': 'ویرایش محصول',
|
||||
'products.card.translate': 'ترجمه',
|
||||
'products.card.moreActions': 'عملیات بیشتر',
|
||||
'products.card.seo': 'ابزارهای SEO',
|
||||
'products.card.quickInfo': 'اطلاعات سریع',
|
||||
'products.card.variations': 'مدیریت تنوعها',
|
||||
'products.card.comments': 'مشاهده نظرات',
|
||||
'products.card.technical': 'اطلاعات فنی',
|
||||
'products.card.remove': 'حذف محصول',
|
||||
'products.card.draft': 'پیشنویس',
|
||||
'products.seo.title': 'ابزارهای SEO',
|
||||
'products.seo.loading': 'در حال بارگذاری تنظیمات SEO…',
|
||||
'products.seo.save': 'ذخیره',
|
||||
'products.seo.saving': 'در حال ذخیره…',
|
||||
'products.seo.errorLoad': 'بارگذاری تنظیمات SEO ممکن نشد.',
|
||||
'products.seo.errorSave': 'ذخیره تنظیمات SEO ممکن نشد.',
|
||||
|
||||
'products.details.loading': 'در حال بارگذاری محصول...',
|
||||
'products.details.notFound': 'محصول یافت نشد.',
|
||||
|
||||
@@ -751,6 +751,7 @@ export function AddCustomerProductPage() {
|
||||
}
|
||||
}}
|
||||
aspect={1}
|
||||
minZoom={0.4}
|
||||
hint={t('customerProducts.form.images.thumbnailHint')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,6 @@ import { ImageCropper } from '../components/ImageCropper'
|
||||
import { ImageUploader } from '../components/ImageUploader'
|
||||
import { TagInput } from '../components/TagInput'
|
||||
import { RichTextEditor } from '../components/RichTextEditor'
|
||||
import { SeoMetaFields } from '../components/SeoMetaFields'
|
||||
import { Breadcrumbs } from '../components/Breadcrumbs'
|
||||
import { ProductFieldAiPromptModal } from '../components/ProductFieldAiPromptModal'
|
||||
import { Tooltip } from '../components/Tooltip'
|
||||
@@ -30,7 +29,6 @@ import {
|
||||
} from '../services/productAiService'
|
||||
import type { Category, FlatCategory } from '../types/category'
|
||||
import { flattenCategories } from '../utils/categories'
|
||||
import { seoMetaPayload } from '../utils/seoMeta'
|
||||
import pageStyles from '../components/PageContent.module.css'
|
||||
import aiStyles from '../styles/ai.module.css'
|
||||
import styles from './AddNewProductPage.module.css'
|
||||
@@ -54,8 +52,6 @@ export function AddNewProductPage() {
|
||||
const [thumbnail, setThumbnail] = useState<string | null>(null)
|
||||
const [images, setImages] = useState<string[]>([])
|
||||
const [tags, setTags] = useState<string[]>([])
|
||||
const [seoMetaTitle, setSeoMetaTitle] = useState('')
|
||||
const [seoMetaDescription, setSeoMetaDescription] = useState('')
|
||||
const [thumbnailMediaId, setThumbnailMediaId] = useState<string | null>(null)
|
||||
const [galleryMediaIds, setGalleryMediaIds] = useState<string[]>([])
|
||||
const [loaded, setLoaded] = useState(!isEdit)
|
||||
@@ -175,8 +171,6 @@ export function AddNewProductPage() {
|
||||
setThumbnail(form.thumbnail)
|
||||
setImages(form.images)
|
||||
setTags(form.tags)
|
||||
setSeoMetaTitle(form.seoMetaTitle)
|
||||
setSeoMetaDescription(form.seoMetaDescription)
|
||||
setThumbnailMediaId(form.thumbnailMediaId)
|
||||
setGalleryMediaIds(form.galleryMediaIds)
|
||||
setLoaded(true)
|
||||
@@ -225,7 +219,6 @@ export function AddNewProductPage() {
|
||||
featuredMediaId: featuredMediaId ?? undefined,
|
||||
galleryMediaIds: nextGalleryMediaIds,
|
||||
tags,
|
||||
...seoMetaPayload(seoMetaTitle, seoMetaDescription),
|
||||
status: 'published' as const,
|
||||
}
|
||||
|
||||
@@ -293,7 +286,7 @@ export function AddNewProductPage() {
|
||||
<div className={styles.formGrid}>
|
||||
<div className={`${styles.field} ${styles.col2} ${styles.thumbnailField}`}>
|
||||
<label>{t('products.form.thumbnail')}</label>
|
||||
<ImageCropper value={thumbnail} onChange={setThumbnail} />
|
||||
<ImageCropper value={thumbnail} onChange={setThumbnail} minZoom={0.4} />
|
||||
</div>
|
||||
|
||||
<div className={styles.col10}>
|
||||
@@ -445,19 +438,6 @@ export function AddNewProductPage() {
|
||||
placeholder={t('products.form.tagsPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SeoMetaFields
|
||||
seoMetaTitle={seoMetaTitle}
|
||||
seoMetaDescription={seoMetaDescription}
|
||||
onTitleChange={setSeoMetaTitle}
|
||||
onDescriptionChange={setSeoMetaDescription}
|
||||
disabled={isSubmitting}
|
||||
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')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.actions}>
|
||||
|
||||
@@ -8,6 +8,8 @@ import { Pagination } from '../components/Pagination'
|
||||
import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
|
||||
import { ProductVariantsModal } from '../components/ProductVariantsModal'
|
||||
import { ProductTechnicalInfoModal } from '../components/ProductTechnicalInfoModal'
|
||||
import { ProductCommentsModal } from '../components/ProductCommentsModal'
|
||||
import { ProductSeoModal } from '../components/ProductSeoModal'
|
||||
import { TranslationModal } from '../components/TranslationModal'
|
||||
import { TranslateAllLanguageModal } from '../components/TranslateAllLanguageModal'
|
||||
import { Breadcrumbs } from '../components/Breadcrumbs'
|
||||
@@ -52,12 +54,15 @@ export function MyProductsPage() {
|
||||
const [isDeleting, setIsDeleting] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [variantCounts, setVariantCounts] = useState<Record<string, number>>({})
|
||||
const [commentCounts, setCommentCounts] = useState<Record<string, number>>({})
|
||||
const [deleteTarget, setDeleteTarget] = useState<{ id: string; name: string } | null>(null)
|
||||
const [variantsTarget, setVariantsTarget] = useState<{
|
||||
id: string
|
||||
name: string
|
||||
categoryId: string
|
||||
} | null>(null)
|
||||
const [commentsTarget, setCommentsTarget] = useState<{ id: string; name: string } | null>(null)
|
||||
const [seoTarget, setSeoTarget] = useState<{ id: string; name: string } | null>(null)
|
||||
const [technicalTarget, setTechnicalTarget] = useState<{
|
||||
id: string
|
||||
name: string
|
||||
@@ -205,6 +210,24 @@ export function MyProductsPage() {
|
||||
}
|
||||
}
|
||||
|
||||
function handleComments(id: string) {
|
||||
const product = products.find((p) => p.id === id)
|
||||
if (product) {
|
||||
setCommentsTarget({ id, name: product.nameFa || product.nameEn })
|
||||
}
|
||||
}
|
||||
|
||||
function handleSeo(id: string) {
|
||||
const product = products.find((p) => p.id === id)
|
||||
if (product) {
|
||||
setSeoTarget({ id, name: product.nameFa || product.nameEn })
|
||||
}
|
||||
}
|
||||
|
||||
function handleQuickInfo(id: string) {
|
||||
navigate(`/products/detail/${id}`)
|
||||
}
|
||||
|
||||
function handleVariations(id: string) {
|
||||
const product = products.find((p) => p.id === id)
|
||||
if (product) {
|
||||
@@ -273,6 +296,14 @@ export function MyProductsPage() {
|
||||
writeListQuery('', 1)
|
||||
}
|
||||
|
||||
function handleCommentCountChange(count: number) {
|
||||
if (!commentsTarget) return
|
||||
setCommentCounts((prev) => ({
|
||||
...prev,
|
||||
[commentsTarget.id]: count,
|
||||
}))
|
||||
}
|
||||
|
||||
return (
|
||||
<main className={pageStyles.content}>
|
||||
<Breadcrumbs
|
||||
@@ -356,9 +387,13 @@ export function MyProductsPage() {
|
||||
<ProductCard
|
||||
key={product.id}
|
||||
product={product}
|
||||
commentCount={commentCounts[product.id] ?? product.commentCount}
|
||||
variantCount={variantCounts[product.id] ?? product.variantCount ?? 0}
|
||||
onEdit={handleEdit}
|
||||
onTranslate={handleTranslate}
|
||||
onQuickInfo={handleQuickInfo}
|
||||
onComments={handleComments}
|
||||
onSeo={handleSeo}
|
||||
onTechnicalInfo={handleTechnicalInfo}
|
||||
onVariations={handleVariations}
|
||||
onRemove={handleRemoveRequest}
|
||||
@@ -414,6 +449,25 @@ export function MyProductsPage() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{commentsTarget && (
|
||||
<ProductCommentsModal
|
||||
open={!!commentsTarget}
|
||||
productId={commentsTarget.id}
|
||||
productName={commentsTarget.name}
|
||||
onClose={() => setCommentsTarget(null)}
|
||||
onCountChange={handleCommentCountChange}
|
||||
/>
|
||||
)}
|
||||
|
||||
{seoTarget && (
|
||||
<ProductSeoModal
|
||||
open={!!seoTarget}
|
||||
productId={seoTarget.id}
|
||||
productName={seoTarget.name}
|
||||
onClose={() => setSeoTarget(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{technicalTarget && (
|
||||
<ProductTechnicalInfoModal
|
||||
open={!!technicalTarget}
|
||||
|
||||
@@ -9,34 +9,63 @@ function createImage(url: string): Promise<HTMLImageElement> {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Crop `imageSrc` to `pixelCrop`. Areas outside the source image use `fillColor`
|
||||
* when provided. JPEG always defaults to white so transparent PNG/WebP uploads
|
||||
* do not become black.
|
||||
*/
|
||||
export async function getCroppedImage(
|
||||
imageSrc: string,
|
||||
pixelCrop: Area,
|
||||
format: 'jpeg' | 'png' = 'jpeg',
|
||||
fillColor?: string,
|
||||
): Promise<string> {
|
||||
const image = await createImage(imageSrc)
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) throw new Error('Could not get canvas context')
|
||||
|
||||
canvas.width = pixelCrop.width
|
||||
canvas.height = pixelCrop.height
|
||||
const outW = Math.max(1, Math.round(pixelCrop.width))
|
||||
const outH = Math.max(1, Math.round(pixelCrop.height))
|
||||
canvas.width = outW
|
||||
canvas.height = outH
|
||||
|
||||
if (format === 'png') {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
const background = format === 'jpeg' ? (fillColor ?? '#ffffff') : fillColor
|
||||
if (background) {
|
||||
ctx.fillStyle = background
|
||||
ctx.fillRect(0, 0, outW, outH)
|
||||
} else {
|
||||
ctx.clearRect(0, 0, outW, outH)
|
||||
}
|
||||
|
||||
ctx.drawImage(
|
||||
image,
|
||||
pixelCrop.x,
|
||||
pixelCrop.y,
|
||||
pixelCrop.width,
|
||||
pixelCrop.height,
|
||||
0,
|
||||
0,
|
||||
pixelCrop.width,
|
||||
pixelCrop.height,
|
||||
)
|
||||
const srcX = pixelCrop.x
|
||||
const srcY = pixelCrop.y
|
||||
const srcW = pixelCrop.width
|
||||
const srcH = pixelCrop.height
|
||||
|
||||
const intersectLeft = Math.max(0, srcX)
|
||||
const intersectTop = Math.max(0, srcY)
|
||||
const intersectRight = Math.min(image.naturalWidth, srcX + srcW)
|
||||
const intersectBottom = Math.min(image.naturalHeight, srcY + srcH)
|
||||
|
||||
const intersectW = intersectRight - intersectLeft
|
||||
const intersectH = intersectBottom - intersectTop
|
||||
|
||||
if (intersectW > 0 && intersectH > 0) {
|
||||
const destX = intersectLeft - srcX
|
||||
const destY = intersectTop - srcY
|
||||
ctx.drawImage(
|
||||
image,
|
||||
intersectLeft,
|
||||
intersectTop,
|
||||
intersectW,
|
||||
intersectH,
|
||||
destX,
|
||||
destY,
|
||||
intersectW,
|
||||
intersectH,
|
||||
)
|
||||
}
|
||||
|
||||
if (format === 'png') {
|
||||
return canvas.toDataURL('image/png')
|
||||
|
||||
@@ -37,15 +37,25 @@ export function dataUrlToFile(dataUrl: string, filename: string): File {
|
||||
return new File([copy], filename, { type: mime })
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepare a data URL (or image URL) for upload. When the target is JPEG,
|
||||
* transparent PNG/WebP pixels are flattened onto white — never black.
|
||||
*/
|
||||
export async function ensureUploadFile(dataUrl: string, filename: string): Promise<File> {
|
||||
const wantsPng = filename.toLowerCase().endsWith('.png')
|
||||
|
||||
if (dataUrl.startsWith('data:')) {
|
||||
const mime = dataUrl.slice(5, dataUrl.indexOf(';'))
|
||||
const normalized = mime === 'image/jpg' ? 'image/jpeg' : mime
|
||||
|
||||
if (ALLOWED_IMAGE_TYPES.has(normalized)) {
|
||||
const file = dataUrlToFile(dataUrl, filename)
|
||||
if (file.size > 0) {
|
||||
return file
|
||||
const alreadyPng = wantsPng && normalized === 'image/png'
|
||||
const alreadyJpeg = !wantsPng && normalized === 'image/jpeg'
|
||||
if (alreadyPng || alreadyJpeg) {
|
||||
const file = dataUrlToFile(dataUrl, filename)
|
||||
if (file.size > 0) {
|
||||
return file
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -57,12 +67,14 @@ export async function ensureUploadFile(dataUrl: string, filename: string): Promi
|
||||
throw new Error('Could not prepare image for upload')
|
||||
}
|
||||
|
||||
const wantsPng = filename.toLowerCase().endsWith('.png')
|
||||
canvas.width = image.naturalWidth
|
||||
canvas.height = image.naturalHeight
|
||||
|
||||
if (wantsPng) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
} else {
|
||||
ctx.fillStyle = '#ffffff'
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||||
}
|
||||
|
||||
ctx.drawImage(image, 0, 0)
|
||||
|
||||
@@ -10,6 +10,11 @@ interface ImageCropperProps {
|
||||
onChange: (value: string | null) => void
|
||||
aspect?: number
|
||||
outputFormat?: 'jpeg' | 'png'
|
||||
/** Fill color for JPEG and for crop areas outside the image. */
|
||||
fillColor?: string
|
||||
/** Minimum zoom. Values below 1 shrink the image inside the crop frame. */
|
||||
minZoom?: number
|
||||
maxZoom?: number
|
||||
accept?: string
|
||||
uploadLabel?: string
|
||||
hint?: string
|
||||
@@ -21,6 +26,9 @@ export function ImageCropper({
|
||||
onChange,
|
||||
aspect = 1,
|
||||
outputFormat = 'jpeg',
|
||||
fillColor,
|
||||
minZoom = 1,
|
||||
maxZoom = 3,
|
||||
accept = 'image/*',
|
||||
uploadLabel,
|
||||
hint,
|
||||
@@ -30,6 +38,8 @@ export function ImageCropper({
|
||||
const resolvedUploadLabel = uploadLabel ?? t('myProducts.images.thumbnailUpload')
|
||||
const resolvedHint = hint ?? t('myProducts.images.thumbnailHint')
|
||||
const resolvedChangeLabel = changeLabel ?? t('myProducts.images.thumbnailChange')
|
||||
const resolvedFillColor = fillColor ?? (outputFormat === 'jpeg' ? '#ffffff' : undefined)
|
||||
const cropSurfaceColor = resolvedFillColor ?? '#1e293b'
|
||||
const [imageSrc, setImageSrc] = useState<string | null>(null)
|
||||
const [crop, setCrop] = useState({ x: 0, y: 0 })
|
||||
const [zoom, setZoom] = useState(1)
|
||||
@@ -61,7 +71,12 @@ export function ImageCropper({
|
||||
|
||||
async function applyCrop() {
|
||||
if (!imageSrc || !croppedArea) return
|
||||
const cropped = await getCroppedImage(imageSrc, croppedArea, outputFormat)
|
||||
const cropped = await getCroppedImage(
|
||||
imageSrc,
|
||||
croppedArea,
|
||||
outputFormat,
|
||||
resolvedFillColor,
|
||||
)
|
||||
onChange(cropped)
|
||||
setImageSrc(null)
|
||||
setZoom(1)
|
||||
@@ -122,17 +137,23 @@ export function ImageCropper({
|
||||
<div className={styles.cropPanel}>
|
||||
<div
|
||||
className={`${styles.cropArea} ${isPortrait ? styles.cropAreaPortrait : ''}`}
|
||||
style={frameStyle}
|
||||
style={{ ...frameStyle, background: cropSurfaceColor }}
|
||||
>
|
||||
<Cropper
|
||||
key={String(aspect)}
|
||||
image={imageSrc}
|
||||
crop={crop}
|
||||
zoom={zoom}
|
||||
minZoom={minZoom}
|
||||
maxZoom={maxZoom}
|
||||
aspect={aspect}
|
||||
onCropChange={setCrop}
|
||||
onZoomChange={setZoom}
|
||||
onCropComplete={onCropComplete}
|
||||
restrictPosition={minZoom >= 1}
|
||||
style={{
|
||||
containerStyle: { background: cropSurfaceColor },
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.cropControls}>
|
||||
@@ -140,8 +161,8 @@ export function ImageCropper({
|
||||
{t('myProducts.images.zoom')}
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={3}
|
||||
min={minZoom}
|
||||
max={maxZoom}
|
||||
step={0.05}
|
||||
value={zoom}
|
||||
onChange={(e) => setZoom(Number(e.target.value))}
|
||||
|
||||
@@ -713,6 +713,7 @@ export function AddMyProductPage() {
|
||||
}
|
||||
}}
|
||||
aspect={1}
|
||||
minZoom={0.4}
|
||||
hint={t('myProducts.images.thumbnailHint')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -9,34 +9,63 @@ function createImage(url: string): Promise<HTMLImageElement> {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Crop `imageSrc` to `pixelCrop`. Areas outside the source image use `fillColor`
|
||||
* when provided. JPEG always defaults to white so transparent PNG/WebP uploads
|
||||
* do not become black.
|
||||
*/
|
||||
export async function getCroppedImage(
|
||||
imageSrc: string,
|
||||
pixelCrop: Area,
|
||||
format: 'jpeg' | 'png' = 'jpeg',
|
||||
fillColor?: string,
|
||||
): Promise<string> {
|
||||
const image = await createImage(imageSrc)
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) throw new Error('Could not get canvas context')
|
||||
|
||||
canvas.width = pixelCrop.width
|
||||
canvas.height = pixelCrop.height
|
||||
const outW = Math.max(1, Math.round(pixelCrop.width))
|
||||
const outH = Math.max(1, Math.round(pixelCrop.height))
|
||||
canvas.width = outW
|
||||
canvas.height = outH
|
||||
|
||||
if (format === 'png') {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
const background = format === 'jpeg' ? (fillColor ?? '#ffffff') : fillColor
|
||||
if (background) {
|
||||
ctx.fillStyle = background
|
||||
ctx.fillRect(0, 0, outW, outH)
|
||||
} else {
|
||||
ctx.clearRect(0, 0, outW, outH)
|
||||
}
|
||||
|
||||
ctx.drawImage(
|
||||
image,
|
||||
pixelCrop.x,
|
||||
pixelCrop.y,
|
||||
pixelCrop.width,
|
||||
pixelCrop.height,
|
||||
0,
|
||||
0,
|
||||
pixelCrop.width,
|
||||
pixelCrop.height,
|
||||
)
|
||||
const srcX = pixelCrop.x
|
||||
const srcY = pixelCrop.y
|
||||
const srcW = pixelCrop.width
|
||||
const srcH = pixelCrop.height
|
||||
|
||||
const intersectLeft = Math.max(0, srcX)
|
||||
const intersectTop = Math.max(0, srcY)
|
||||
const intersectRight = Math.min(image.naturalWidth, srcX + srcW)
|
||||
const intersectBottom = Math.min(image.naturalHeight, srcY + srcH)
|
||||
|
||||
const intersectW = intersectRight - intersectLeft
|
||||
const intersectH = intersectBottom - intersectTop
|
||||
|
||||
if (intersectW > 0 && intersectH > 0) {
|
||||
const destX = intersectLeft - srcX
|
||||
const destY = intersectTop - srcY
|
||||
ctx.drawImage(
|
||||
image,
|
||||
intersectLeft,
|
||||
intersectTop,
|
||||
intersectW,
|
||||
intersectH,
|
||||
destX,
|
||||
destY,
|
||||
intersectW,
|
||||
intersectH,
|
||||
)
|
||||
}
|
||||
|
||||
if (format === 'png') {
|
||||
return canvas.toDataURL('image/png')
|
||||
|
||||
@@ -37,15 +37,25 @@ export function dataUrlToFile(dataUrl: string, filename: string): File {
|
||||
return new File([copy], filename, { type: mime })
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepare a data URL (or image URL) for upload. When the target is JPEG,
|
||||
* transparent PNG/WebP pixels are flattened onto white — never black.
|
||||
*/
|
||||
export async function ensureUploadFile(dataUrl: string, filename: string): Promise<File> {
|
||||
const wantsPng = filename.toLowerCase().endsWith('.png')
|
||||
|
||||
if (dataUrl.startsWith('data:')) {
|
||||
const mime = dataUrl.slice(5, dataUrl.indexOf(';'))
|
||||
const normalized = mime === 'image/jpg' ? 'image/jpeg' : mime
|
||||
|
||||
if (ALLOWED_IMAGE_TYPES.has(normalized)) {
|
||||
const file = dataUrlToFile(dataUrl, filename)
|
||||
if (file.size > 0) {
|
||||
return file
|
||||
const alreadyPng = wantsPng && normalized === 'image/png'
|
||||
const alreadyJpeg = !wantsPng && normalized === 'image/jpeg'
|
||||
if (alreadyPng || alreadyJpeg) {
|
||||
const file = dataUrlToFile(dataUrl, filename)
|
||||
if (file.size > 0) {
|
||||
return file
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -57,12 +67,14 @@ export async function ensureUploadFile(dataUrl: string, filename: string): Promi
|
||||
throw new Error('Could not prepare image for upload')
|
||||
}
|
||||
|
||||
const wantsPng = filename.toLowerCase().endsWith('.png')
|
||||
canvas.width = image.naturalWidth
|
||||
canvas.height = image.naturalHeight
|
||||
|
||||
if (wantsPng) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
} else {
|
||||
ctx.fillStyle = '#ffffff'
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||||
}
|
||||
|
||||
ctx.drawImage(image, 0, 0)
|
||||
|
||||
Reference in New Issue
Block a user