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>
2026-08-10 00:23:03 +03:30
parent c5bdaad16b
commit 1271d96539
96 changed files with 10532 additions and 345 deletions
@@ -0,0 +1,108 @@
+import { createPortal } from 'react-dom'
+import { X } from 'lucide-react'
+import type { UserProductStatus } from '../types/userProduct'
+import { useT } from '../i18n/useT'
+import modalStyles from './CategoryModal.module.css'
+import styles from './UserProductStatusModal.module.css'
+
+const STATUSES: UserProductStatus[] = [
+  'draft',
+  'published',
+  'rejected',
+  'archived',
+]
+
+interface UserProductStatusModalProps {
+  open: boolean
+  currentStatus: UserProductStatus
+  saving?: boolean
+  onClose: () => void
+  onSave: (status: UserProductStatus) => void
+}
+
+export function UserProductStatusModal({
+  open,
+  currentStatus,
+  saving = false,
+  onClose,
+  onSave,
+}: UserProductStatusModalProps) {
+  const t = useT()
+
+  if (!open) return null
+
+  function statusLabel(value: UserProductStatus) {
+    if (value === 'draft') return t('customerProducts.status.pending')
+    if (value === 'published') return t('customerProducts.status.published')
+    if (value === 'rejected') return t('customerProducts.status.rejected')
+    return t('customerProducts.status.archived')
+  }
+
+  function handleSelect(value: UserProductStatus) {
+    if (saving) return
+    if (value === currentStatus) {
+      onClose()
+      return
+    }
+    onSave(value)
+  }
+
+  return createPortal(
+    <div
+      className={modalStyles.overlay}
+      role="presentation"
+      onClick={saving ? undefined : onClose}
+    >
+      <div
+        className={modalStyles.modal}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="user-product-status-title"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className={modalStyles.header}>
+          <h2 id="user-product-status-title" className={modalStyles.title}>
+            {t('customerProducts.statusModalTitle')}
+          </h2>
+          <button
+            type="button"
+            className={modalStyles.closeBtn}
+            onClick={onClose}
+            aria-label={t('customerProducts.form.cancel')}
+            disabled={saving}
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        <div className={modalStyles.form}>
+          <p className={styles.hint}>{t('customerProducts.statusModalHint')}</p>
+          <div className={styles.options} role="radiogroup">
+            {STATUSES.map((value) => {
+              const selected = value === currentStatus
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  className={styles.option}
+                  role="radio"
+                  aria-checked={selected}
+                  data-selected={selected ? 'true' : undefined}
+                  disabled={saving}
+                  onClick={() => handleSelect(value)}
+                >
+                  <span className={styles.radio} aria-hidden />
+                  <span>{statusLabel(value)}</span>
+                </button>
+              )
+            })}
+          </div>
+          {saving ? (
+            <p className={styles.saving}>{t('customerProducts.form.submitting')}</p>
+          ) : null}
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}