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>

apps/business/src/components/AddProductByAiModal.module.css

@@ -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 {

apps/business/src/components/AddProductByAiModal.tsx

@@ -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>

apps/business/src/components/ImageCropper.tsx

@@ -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}
+                min={minZoom}
-                max={3}
+                max={maxZoom}
                 step={0.05}
                 value={zoom}
                 onChange={(e) => setZoom(Number(e.target.value))}

apps/business/src/components/ProductCard.tsx

@@ -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={menuActions} />
-          <ProductCardOverflowMenu
-            productName={primaryName}
-            items={overflowActions}
-          />
-        ) : null}
       </div>
     </article>
   )

apps/business/src/components/ProductSeoModal.module.css

@@ -0,0 +1,9 @@
+.modal {
+  width: min(560px, calc(100vw - 32px));
+}
+
+.titleRow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}

apps/business/src/components/ProductSeoModal.tsx

@@ -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,
+  )
+}

apps/business/src/components/SearchableSelect.module.css

@@ -96,8 +96,8 @@
 .dropdownInFlow {
   position: static;
   margin-top: 6px;
-  max-height: none;
+  max-height: min(280px, 40vh);
-  overflow: visible;
+  overflow-y: auto;
   z-index: auto;
 }
 

apps/business/src/i18n/messages.ts

@@ -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': 'محصول یافت نشد.',

apps/business/src/pages/AddCustomerProductPage.tsx

@@ -751,6 +751,7 @@ export function AddCustomerProductPage() {
                           }
                         }}
                         aspect={1}
+                        minZoom={0.4}
                         hint={t('customerProducts.form.images.thumbnailHint')}
                       />
                     </div>

apps/business/src/pages/AddNewProductPage.tsx

@@ -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}>

apps/business/src/pages/MyProductsPage.tsx

@@ -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}

apps/business/src/utils/cropImage.ts

@@ -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
+  const outW = Math.max(1, Math.round(pixelCrop.width))
-  canvas.height = pixelCrop.height
+  const outH = Math.max(1, Math.round(pixelCrop.height))
+  canvas.width = outW
+  canvas.height = outH
 
-  if (format === 'png') {
+  const background = format === 'jpeg' ? (fillColor ?? '#ffffff') : fillColor
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
+  if (background) {
+    ctx.fillStyle = background
+    ctx.fillRect(0, 0, outW, outH)
+  } else {
+    ctx.clearRect(0, 0, outW, outH)
   }
 
-  ctx.drawImage(
+  const srcX = pixelCrop.x
-    image,
+  const srcY = pixelCrop.y
-    pixelCrop.x,
+  const srcW = pixelCrop.width
-    pixelCrop.y,
+  const srcH = pixelCrop.height
-    pixelCrop.width,
+
-    pixelCrop.height,
+  const intersectLeft = Math.max(0, srcX)
-    0,
+  const intersectTop = Math.max(0, srcY)
-    0,
+  const intersectRight = Math.min(image.naturalWidth, srcX + srcW)
-    pixelCrop.width,
+  const intersectBottom = Math.min(image.naturalHeight, srcY + srcH)
-    pixelCrop.height,
+
-  )
+  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')

apps/business/src/utils/imageUpload.ts

@@ -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)
+      const alreadyPng = wantsPng && normalized === 'image/png'
-      if (file.size > 0) {
+      const alreadyJpeg = !wantsPng && normalized === 'image/jpeg'
-        return file
+      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)

apps/customer/src/components/ImageCropper.tsx

@@ -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}
+                min={minZoom}
-                max={3}
+                max={maxZoom}
                 step={0.05}
                 value={zoom}
                 onChange={(e) => setZoom(Number(e.target.value))}

apps/customer/src/pages/AddMyProductPage.tsx

@@ -713,6 +713,7 @@ export function AddMyProductPage() {
                           }
                         }}
                         aspect={1}
+                        minZoom={0.4}
                         hint={t('myProducts.images.thumbnailHint')}
                       />
                     </div>

apps/customer/src/utils/cropImage.ts

@@ -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
+  const outW = Math.max(1, Math.round(pixelCrop.width))
-  canvas.height = pixelCrop.height
+  const outH = Math.max(1, Math.round(pixelCrop.height))
+  canvas.width = outW
+  canvas.height = outH
 
-  if (format === 'png') {
+  const background = format === 'jpeg' ? (fillColor ?? '#ffffff') : fillColor
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
+  if (background) {
+    ctx.fillStyle = background
+    ctx.fillRect(0, 0, outW, outH)
+  } else {
+    ctx.clearRect(0, 0, outW, outH)
   }
 
-  ctx.drawImage(
+  const srcX = pixelCrop.x
-    image,
+  const srcY = pixelCrop.y
-    pixelCrop.x,
+  const srcW = pixelCrop.width
-    pixelCrop.y,
+  const srcH = pixelCrop.height
-    pixelCrop.width,
+
-    pixelCrop.height,
+  const intersectLeft = Math.max(0, srcX)
-    0,
+  const intersectTop = Math.max(0, srcY)
-    0,
+  const intersectRight = Math.min(image.naturalWidth, srcX + srcW)
-    pixelCrop.width,
+  const intersectBottom = Math.min(image.naturalHeight, srcY + srcH)
-    pixelCrop.height,
+
-  )
+  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')

apps/customer/src/utils/imageUpload.ts

@@ -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)
+      const alreadyPng = wantsPng && normalized === 'image/png'
-      if (file.size > 0) {
+      const alreadyJpeg = !wantsPng && normalized === 'image/jpeg'
-        return file
+      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)