meshkee-app/dashboards
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add store-item bulk create, unlimited stock, and contact-for-price UI.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-08 15:36:41 +03:30
co-authored by Cursor
parent 5eaf7fb046
commit ad83fc1099
15 changed files with 803 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/business/src/components/EditStoreItemsModal.tsx
+51 -21
View File
@@ -43,12 +43,15 @@ function itemsToRows(storeItems: StoreItem[]): StoreItemDraftRow[] {
selections[selection.variationId] = selection.optionId
}
const unlimited = item.stockQuantity === null
return {
id: createId(),
storeItemId: item.id,
selections,
price: item.price !== null ? formatIrtInput(String(item.price)) : '',
stock: item.stockQuantity !== null ? String(item.stockQuantity) : '1',
stock: unlimited ? '1' : String(item.stockQuantity),
unlimitedStock: unlimited,
}
})
}
@@ -82,8 +85,10 @@ export function EditStoreItemsModal({
const gridTemplate = useMemo(() => {
const variationCols = formVariations.map(() => 'minmax(110px, 1fr)').join(' ')
const cols = [variationCols, 'minmax(120px, 1fr)', '90px', '32px'].filter((part) => part).join(' ')
return cols || 'minmax(120px, 1fr) 90px 32px'
const cols = [variationCols, 'minmax(120px, 1fr)', '90px', '72px', '32px']
.filter((part) => part)
.join(' ')
return cols || 'minmax(120px, 1fr) 90px 72px 32px'
}, [formVariations])
useEffect(() => {
@@ -128,11 +133,11 @@ export function EditStoreItemsModal({
useEffect(() => {
if (!mounted || closing) return
const onKey = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose()
if (e.key === 'Escape' && !isSubmitting) onClose()
}
document.addEventListener('keydown', onKey)
return () => document.removeEventListener('keydown', onKey)
}, [mounted, closing, onClose])
}, [mounted, closing, onClose, isSubmitting])
if (!mounted || !productId) return null
@@ -174,8 +179,10 @@ export function EditStoreItemsModal({
rows.length > 0 &&
rows.every((row) => {
const price = parseIrtInput(row.price)
if (price !== null && price < 0) return false
if (row.unlimitedStock) return true
const stock = Number(row.stock)
return price !== null && price >= 0 && row.stock.trim() !== '' && !Number.isNaN(stock) && stock >= 0
return row.stock.trim() !== '' && !Number.isNaN(stock) && stock >= 0
}) &&
!isSubmitting &&
!isLoading
@@ -197,8 +204,12 @@ export function EditStoreItemsModal({
if (!optionId) return []
return [{ variationId: variation.id, optionId }]
}),
price: parseIrtInput(row.price)!,
stockQuantity: Number(row.stock),
price: parseIrtInput(row.price),
stockQuantity: row.unlimitedStock
? null
: row.stock.trim()
? Number(row.stock)
: null,
})),
removedIds,
})
@@ -222,7 +233,9 @@ export function EditStoreItemsModal({
return createPortal(
<div
className={`${modalStyles.overlay} ${closing ? modalStyles.overlayOut : modalStyles.overlayIn}`}
onClick={onClose}
onClick={() => {
if (!isSubmitting) onClose()
}}
>
<div
className={`${modalStyles.modal} ${rowStyles.modalWide} ${closing ? modalStyles.modalOut : modalStyles.modalIn}`}
@@ -244,6 +257,7 @@ export function EditStoreItemsModal({
className={modalStyles.closeBtn}
onClick={onClose}
aria-label={t('common.close')}
disabled={isSubmitting}
>
<X size={20} />
</button>
@@ -263,6 +277,7 @@ export function EditStoreItemsModal({
))}
<span>{t('storeItems.create.price')}</span>
<span>{t('storeItems.create.stock')}</span>
<span>{t('storeItems.create.unlimited')}</span>
<span />
</div>
@@ -300,7 +315,7 @@ export function EditStoreItemsModal({
className={rowStyles.compactInput}
value={row.price}
onChange={(e) => updateRow(row.id, { price: formatIrtInput(e.target.value) })}
placeholder="0"
placeholder={t('storeItems.price.contact')}
disabled={isSubmitting}
/>
<input
@@ -308,10 +323,23 @@ export function EditStoreItemsModal({
min="0"
step="1"
className={rowStyles.compactInput}
value={row.stock}
value={row.unlimitedStock ? '' : row.stock}
onChange={(e) => updateRow(row.id, { stock: e.target.value })}
disabled={isSubmitting}
disabled={isSubmitting || row.unlimitedStock}
placeholder={row.unlimitedStock ? '∞' : '0'}
/>
<div className={rowStyles.unlimitedCell}>
<input
type="checkbox"
className={rowStyles.unlimitedCheck}
checked={row.unlimitedStock}
onChange={(e) =>
updateRow(row.id, { unlimitedStock: e.target.checked })
}
disabled={isSubmitting}
aria-label={t('storeItems.create.unlimited')}
/>
</div>
<div className={rowStyles.removeCell}>
<Tooltip label={t('storeItems.create.removeRow')}>
<button
@@ -329,15 +357,17 @@ export function EditStoreItemsModal({
))}
</div>
<button
type="button"
className={rowStyles.addRowBtn}
onClick={addRow}
disabled={isSubmitting}
>
<Plus size={16} />
{t('storeItems.create.addRow')}
</button>
<div className={rowStyles.rowActions}>
<button
type="button"
className={rowStyles.addRowBtn}
onClick={addRow}
disabled={isSubmitting}
>
<Plus size={16} />
{t('storeItems.create.addRow')}
</button>
</div>
</>
)}