Improve website settings and special-item pick UX.
Tighten sitemap/settings controls, debounce product search to 10 results, keep catalog-only specials visible after add, and use frosted glass on link/category modals. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
a39aef0c8c
commit
77080a7a4b
@@ -45,12 +45,12 @@
|
||||
.modal {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--blur-glass, 28px)) saturate(1.45);
|
||||
-webkit-backdrop-filter: blur(var(--blur-glass, 28px)) saturate(1.45);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 20px 60px rgba(31, 38, 135, 0.15);
|
||||
box-shadow: var(--glass-shadow), 0 20px 60px rgba(31, 38, 135, 0.12);
|
||||
}
|
||||
|
||||
.header {
|
||||
|
||||
@@ -4,6 +4,11 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--blur-glass, 28px)) saturate(1.45);
|
||||
-webkit-backdrop-filter: blur(var(--blur-glass, 28px)) saturate(1.45);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow), 0 20px 60px rgba(31, 38, 135, 0.12);
|
||||
}
|
||||
|
||||
.header {
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { X } from 'lucide-react'
|
||||
import { useLocale } from '@meshkee/dashboard-ui'
|
||||
import { useT } from '../i18n/useT'
|
||||
import { ApiError } from '../lib/api'
|
||||
import { listAllProducts } from '../services/productService'
|
||||
import { listAllStoreItems } from '../services/storeItemService'
|
||||
import { listProducts } from '../services/productService'
|
||||
import { listStoreItems } from '../services/storeItemService'
|
||||
import type { SpecialProductsSource } from '../services/settingsService'
|
||||
import { groupStoreItemsByProduct } from '../utils/storeProductGroups'
|
||||
import {
|
||||
SEARCH_RESULT_LIMIT,
|
||||
StoreItemMultiSearchSelect,
|
||||
type StoreItemSearchOption,
|
||||
} from './StoreItemMultiSearchSelect'
|
||||
@@ -22,11 +23,12 @@ interface PickStoreSpecialItemsModalProps {
|
||||
existingIds: string[]
|
||||
source: SpecialProductsSource
|
||||
onClose: () => void
|
||||
onConfirm: (ids: string[]) => void
|
||||
onConfirm: (ids: string[]) => void | Promise<void>
|
||||
isSubmitting?: boolean
|
||||
}
|
||||
|
||||
const ANIMATION_MS = 220
|
||||
const STORE_ITEM_SEARCH_PAGE_SIZE = 30
|
||||
|
||||
export function PickStoreSpecialItemsModal({
|
||||
open,
|
||||
@@ -44,10 +46,10 @@ export function PickStoreSpecialItemsModal({
|
||||
const [mounted, setMounted] = useState(open)
|
||||
const [closing, setClosing] = useState(false)
|
||||
const [options, setOptions] = useState<StoreItemSearchOption[]>([])
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [isSearching, setIsSearching] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [selectedIds, setSelectedIds] = useState<string[]>([])
|
||||
const [selectOpen, setSelectOpen] = useState(false)
|
||||
const searchControllerRef = useRef<AbortController | null>(null)
|
||||
|
||||
const existingSet = useMemo(() => new Set(existingIds), [existingIds])
|
||||
|
||||
@@ -56,7 +58,9 @@ export function PickStoreSpecialItemsModal({
|
||||
setMounted(true)
|
||||
setClosing(false)
|
||||
setSelectedIds([])
|
||||
setOptions([])
|
||||
setError('')
|
||||
setIsSearching(false)
|
||||
} else if (mounted) {
|
||||
setClosing(true)
|
||||
const timer = setTimeout(() => {
|
||||
@@ -68,12 +72,10 @@ export function PickStoreSpecialItemsModal({
|
||||
}, [open, mounted])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
|
||||
const controller = new AbortController()
|
||||
void loadOptions(controller.signal)
|
||||
return () => controller.abort()
|
||||
}, [open, existingIds, source])
|
||||
return () => {
|
||||
searchControllerRef.current?.abort()
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted || closing) return
|
||||
@@ -84,18 +86,32 @@ export function PickStoreSpecialItemsModal({
|
||||
return () => document.removeEventListener('keydown', onKey)
|
||||
}, [mounted, closing, onClose])
|
||||
|
||||
async function loadOptions(signal?: AbortSignal) {
|
||||
setIsLoading(true)
|
||||
const handleSearch = useCallback(
|
||||
async (query: string) => {
|
||||
searchControllerRef.current?.abort()
|
||||
|
||||
if (!query) {
|
||||
setOptions([])
|
||||
setIsSearching(false)
|
||||
setError('')
|
||||
return
|
||||
}
|
||||
|
||||
const controller = new AbortController()
|
||||
searchControllerRef.current = controller
|
||||
setIsSearching(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const nextOptions = fromProducts
|
||||
? await loadProductOptions(signal)
|
||||
: await loadStoreItemOptions(signal)
|
||||
? await loadProductOptions(query, controller.signal)
|
||||
: await loadStoreItemOptions(query, controller.signal)
|
||||
|
||||
if (controller.signal.aborted) return
|
||||
setOptions(nextOptions.filter((option) => !existingSet.has(option.id)))
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return
|
||||
if (controller.signal.aborted) return
|
||||
if (err instanceof ApiError) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
@@ -106,57 +122,34 @@ export function PickStoreSpecialItemsModal({
|
||||
)
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
if (!controller.signal.aborted) setIsSearching(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadStoreItemOptions(signal?: AbortSignal) {
|
||||
const items = await listAllStoreItems(signal)
|
||||
const listings = groupStoreItemsByProduct(items)
|
||||
return listings
|
||||
.map((listing): StoreItemSearchOption | null => {
|
||||
const storeItemId = listing.representative.storeItemId ?? listing.representative.id
|
||||
const firstPricedVariant = listing.variants.find((v) => v.price !== null) ?? null
|
||||
const price = firstPricedVariant?.price ?? null
|
||||
const hasPrice = listing.variants.some((v) => v.price !== null)
|
||||
const hasInStock = listing.variants.some(
|
||||
(v) => v.stockQuantity === null || v.stockQuantity > 0,
|
||||
},
|
||||
[existingSet, fromProducts, t],
|
||||
)
|
||||
|
||||
if (!hasPrice && !hasInStock) return null
|
||||
|
||||
return {
|
||||
id: storeItemId,
|
||||
title: listing.productTitle,
|
||||
nameFa: listing.productNameFa,
|
||||
image: listing.productImage,
|
||||
price,
|
||||
}
|
||||
})
|
||||
.filter((option): option is StoreItemSearchOption => option !== null)
|
||||
}
|
||||
|
||||
async function loadProductOptions(signal?: AbortSignal) {
|
||||
const products = await listAllProducts(signal)
|
||||
return products.map(
|
||||
(product): StoreItemSearchOption => ({
|
||||
id: product.id,
|
||||
title: product.title,
|
||||
nameFa: product.nameFa,
|
||||
image: product.thumbnailUrl || product.thumbnail || product.image || null,
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
function toggleSelection(id: string) {
|
||||
setSelectedIds((prev) =>
|
||||
prev.includes(id) ? prev.filter((entry) => entry !== id) : [...prev, id],
|
||||
)
|
||||
}
|
||||
|
||||
function handleConfirm() {
|
||||
if (selectedIds.length === 0) return
|
||||
onConfirm(selectedIds)
|
||||
async function handleConfirm() {
|
||||
if (selectedIds.length === 0 || isSubmitting) return
|
||||
setError('')
|
||||
try {
|
||||
await onConfirm(selectedIds)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
setError(err.message)
|
||||
} else if (err instanceof Error && err.message) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
setError(
|
||||
t('website.specialItems.errorAdd'),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function confirmLabel() {
|
||||
@@ -172,7 +165,7 @@ export function PickStoreSpecialItemsModal({
|
||||
className={`${modalStyles.overlay} ${closing ? modalStyles.overlayOut : modalStyles.overlayIn}`}
|
||||
onClick={(e) => {
|
||||
if (e.target !== e.currentTarget) return
|
||||
if (selectOpen) return
|
||||
if (selectedIds.length > 0) return
|
||||
onClose()
|
||||
}}
|
||||
role="presentation"
|
||||
@@ -184,6 +177,8 @@ export function PickStoreSpecialItemsModal({
|
||||
aria-labelledby="pick-special-items-title"
|
||||
lang={isFa ? 'fa' : 'en'}
|
||||
dir={isFa ? 'rtl' : 'ltr'}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className={modalStyles.header}>
|
||||
<div>
|
||||
@@ -209,32 +204,19 @@ export function PickStoreSpecialItemsModal({
|
||||
<div className={modalStyles.body}>
|
||||
{error && <p className={styles.error}>{error}</p>}
|
||||
|
||||
{isLoading ? (
|
||||
<p className={styles.empty}>
|
||||
{fromProducts
|
||||
? t('website.specialItems.pickLoadingProducts')
|
||||
: t('website.specialItems.pickLoading')}
|
||||
</p>
|
||||
) : options.length === 0 ? (
|
||||
<p className={styles.empty}>
|
||||
{fromProducts
|
||||
? t('website.specialItems.pickEmptyProducts')
|
||||
: t('website.specialItems.pickEmpty')}
|
||||
</p>
|
||||
) : (
|
||||
<StoreItemMultiSearchSelect
|
||||
options={options}
|
||||
selectedIds={selectedIds}
|
||||
onToggle={toggleSelection}
|
||||
onQueryChange={(query) => void handleSearch(query)}
|
||||
isSearching={isSearching}
|
||||
placeholder={
|
||||
fromProducts
|
||||
? t('website.specialItems.pickSearchProducts')
|
||||
: t('website.specialItems.pickSearch')
|
||||
}
|
||||
disabled={isSubmitting}
|
||||
onOpenChange={setSelectOpen}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className={styles.footer}>
|
||||
<button type="button" className={styles.cancelBtn} onClick={onClose} disabled={isSubmitting}>
|
||||
@@ -243,7 +225,7 @@ export function PickStoreSpecialItemsModal({
|
||||
<button
|
||||
type="button"
|
||||
className={styles.confirmBtn}
|
||||
onClick={handleConfirm}
|
||||
onClick={() => void handleConfirm()}
|
||||
disabled={isSubmitting || selectedIds.length === 0}
|
||||
>
|
||||
{confirmLabel()}
|
||||
@@ -255,3 +237,42 @@ export function PickStoreSpecialItemsModal({
|
||||
document.body,
|
||||
)
|
||||
}
|
||||
|
||||
async function loadProductOptions(name: string, signal?: AbortSignal) {
|
||||
const data = await listProducts(1, SEARCH_RESULT_LIMIT, signal, { name })
|
||||
return data.items.map(
|
||||
(product): StoreItemSearchOption => ({
|
||||
id: product.id,
|
||||
title: product.nameEn,
|
||||
nameFa: product.nameFa,
|
||||
image: product.thumbnail || product.image || null,
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
async function loadStoreItemOptions(name: string, signal?: AbortSignal) {
|
||||
const data = await listStoreItems(1, STORE_ITEM_SEARCH_PAGE_SIZE, signal, { name })
|
||||
const listings = groupStoreItemsByProduct(data.items)
|
||||
return listings
|
||||
.map((listing): StoreItemSearchOption | null => {
|
||||
const storeItemId = listing.representative.storeItemId ?? listing.representative.id
|
||||
const firstPricedVariant = listing.variants.find((v) => v.price !== null) ?? null
|
||||
const price = firstPricedVariant?.price ?? null
|
||||
const hasPrice = listing.variants.some((v) => v.price !== null)
|
||||
const hasInStock = listing.variants.some(
|
||||
(v) => v.stockQuantity === null || v.stockQuantity > 0,
|
||||
)
|
||||
|
||||
if (!hasPrice && !hasInStock) return null
|
||||
|
||||
return {
|
||||
id: storeItemId,
|
||||
title: listing.productTitle,
|
||||
nameFa: listing.productNameFa,
|
||||
image: listing.productImage,
|
||||
price,
|
||||
}
|
||||
})
|
||||
.filter((option): option is StoreItemSearchOption => option !== null)
|
||||
.slice(0, SEARCH_RESULT_LIMIT)
|
||||
}
|
||||
|
||||
@@ -136,6 +136,8 @@ export function PickWebsiteBrandsModal({
|
||||
aria-labelledby="pick-brands-title"
|
||||
lang={isFa ? 'fa' : 'en'}
|
||||
dir={isFa ? 'rtl' : 'ltr'}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className={modalStyles.header}>
|
||||
<div>
|
||||
|
||||
@@ -137,6 +137,8 @@ export function PickWebsiteCategoriesModal({
|
||||
aria-labelledby="pick-categories-title"
|
||||
lang={isFa ? 'fa' : 'en'}
|
||||
dir={isFa ? 'rtl' : 'ltr'}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className={modalStyles.header}>
|
||||
<div>
|
||||
|
||||
@@ -90,7 +90,14 @@ export function StoreItemCard({
|
||||
|
||||
return (
|
||||
<article className={styles.card}>
|
||||
<button type="button" className={styles.clickable} onClick={() => onOpen(listing)}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.clickable}
|
||||
onClick={() => {
|
||||
if (listing.variantCount > 0) onOpen(listing)
|
||||
}}
|
||||
disabled={listing.variantCount === 0}
|
||||
>
|
||||
<div className={styles.imageWrap}>
|
||||
{showImage ? (
|
||||
<img
|
||||
@@ -132,9 +139,11 @@ export function StoreItemCard({
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
{listing.variantCount > 0 ? (
|
||||
<p className={styles.variantLabel}>
|
||||
{formatVariantCount(listing.variantCount, locale)}
|
||||
</p>
|
||||
) : null}
|
||||
<StoreItemPrice
|
||||
price={listing.displayPrice}
|
||||
discountedPrice={listing.displayDiscountedPrice}
|
||||
@@ -144,6 +153,8 @@ export function StoreItemCard({
|
||||
|
||||
<div className={styles.controls} onClick={(e) => e.stopPropagation()}>
|
||||
<div className={styles.controlsLeft}>
|
||||
{listing.variantCount > 0 ? (
|
||||
<>
|
||||
<Tooltip label={t('storeItems.card.edit')}>
|
||||
<button
|
||||
type="button"
|
||||
@@ -172,6 +183,8 @@ export function StoreItemCard({
|
||||
<Sparkles size={16} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</>
|
||||
) : null}
|
||||
<Tooltip label={removeLabel}>
|
||||
<button
|
||||
type="button"
|
||||
@@ -184,6 +197,7 @@ export function StoreItemCard({
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
{listing.variantCount > 0 ? (
|
||||
<Tooltip label={t('storeItems.card.addToCart')}>
|
||||
<button
|
||||
type="button"
|
||||
@@ -194,6 +208,7 @@ export function StoreItemCard({
|
||||
<GradientPlusIcon gradientId={plusGradientId} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
|
||||
@@ -6,6 +6,9 @@ import { formatIrtPrice } from '../utils/irtPrice'
|
||||
import selectStyles from './SearchableSelect.module.css'
|
||||
import styles from './StoreItemMultiSearchSelect.module.css'
|
||||
|
||||
export const SEARCH_RESULT_LIMIT = 10
|
||||
export const SEARCH_DEBOUNCE_MS = 1000
|
||||
|
||||
export interface StoreItemSearchOption {
|
||||
id: string
|
||||
title: string
|
||||
@@ -25,6 +28,14 @@ interface StoreItemMultiSearchSelectProps {
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
minSearchLength?: number
|
||||
maxResults?: number
|
||||
isSearching?: boolean
|
||||
/**
|
||||
* When set, typing is debounced and the parent fetches results.
|
||||
* Local filtering is skipped.
|
||||
*/
|
||||
onQueryChange?: (query: string) => void
|
||||
debounceMs?: number
|
||||
/**
|
||||
* Optional hook for parents that need to know when the dropdown is open
|
||||
* (e.g. to prevent modal outside-click closing).
|
||||
@@ -39,6 +50,10 @@ export function StoreItemMultiSearchSelect({
|
||||
placeholder,
|
||||
disabled = false,
|
||||
minSearchLength = 3,
|
||||
maxResults = SEARCH_RESULT_LIMIT,
|
||||
isSearching = false,
|
||||
onQueryChange,
|
||||
debounceMs = SEARCH_DEBOUNCE_MS,
|
||||
onOpenChange,
|
||||
}: StoreItemMultiSearchSelectProps) {
|
||||
const t = useT()
|
||||
@@ -46,47 +61,74 @@ export function StoreItemMultiSearchSelect({
|
||||
const isFa = locale === 'fa'
|
||||
const [open, setOpen] = useState(false)
|
||||
const [query, setQuery] = useState('')
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const [selectedById, setSelectedById] = useState<Record<string, StoreItemSearchOption>>({})
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
const onQueryChangeRef = useRef(onQueryChange)
|
||||
onQueryChangeRef.current = onQueryChange
|
||||
|
||||
const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds])
|
||||
const searchPlaceholder = placeholder ?? t('storeItems.search.minChars', { count: minSearchLength })
|
||||
const trimmedQuery = query.trim()
|
||||
const canSearch = trimmedQuery.length >= minSearchLength
|
||||
|
||||
useEffect(() => {
|
||||
onOpenChange?.(open)
|
||||
}, [open, onOpenChange])
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const trimmed = query.trim()
|
||||
if (trimmed.length < minSearchLength) return []
|
||||
const q = trimmed.toLowerCase()
|
||||
return options.filter(
|
||||
(option) =>
|
||||
option.title.toLowerCase().includes(q) || option.nameFa.includes(trimmed),
|
||||
)
|
||||
}, [options, query, minSearchLength])
|
||||
|
||||
const selectedOptions = useMemo(
|
||||
() => options.filter((option) => selectedSet.has(option.id)),
|
||||
[options, selectedSet],
|
||||
)
|
||||
useEffect(() => {
|
||||
setSelectedById((prev) => {
|
||||
const next = { ...prev }
|
||||
for (const id of Object.keys(next)) {
|
||||
if (!selectedSet.has(id)) delete next[id]
|
||||
}
|
||||
for (const option of options) {
|
||||
if (selectedSet.has(option.id)) next[option.id] = option
|
||||
}
|
||||
return next
|
||||
})
|
||||
}, [options, selectedSet])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
const onClickOutside = (e: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
||||
setOpen(false)
|
||||
setQuery('')
|
||||
const cb = onQueryChangeRef.current
|
||||
if (!cb) return
|
||||
if (!canSearch) {
|
||||
cb('')
|
||||
return
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousedown', onClickOutside)
|
||||
return () => document.removeEventListener('mousedown', onClickOutside)
|
||||
}, [open])
|
||||
const timer = window.setTimeout(() => cb(trimmedQuery), debounceMs)
|
||||
return () => window.clearTimeout(timer)
|
||||
}, [canSearch, trimmedQuery, debounceMs])
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (!canSearch) return []
|
||||
if (onQueryChange) return options.slice(0, maxResults)
|
||||
const q = trimmedQuery.toLowerCase()
|
||||
return options
|
||||
.filter(
|
||||
(option) =>
|
||||
option.title.toLowerCase().includes(q) || option.nameFa.includes(trimmedQuery),
|
||||
)
|
||||
.slice(0, maxResults)
|
||||
}, [canSearch, onQueryChange, options, trimmedQuery, maxResults])
|
||||
|
||||
const selectedOptions = useMemo(
|
||||
() =>
|
||||
selectedIds
|
||||
.map((id) => selectedById[id])
|
||||
.filter((option): option is StoreItemSearchOption => Boolean(option)),
|
||||
[selectedIds, selectedById],
|
||||
)
|
||||
|
||||
function handleFocus() {
|
||||
if (!disabled) setOpen(true)
|
||||
}
|
||||
|
||||
function handleClearSearch() {
|
||||
setQuery('')
|
||||
setOpen(false)
|
||||
onQueryChangeRef.current?.('')
|
||||
}
|
||||
|
||||
function renderOptionMeta(option: StoreItemSearchOption) {
|
||||
const primary = isFa ? option.nameFa || option.title : option.title
|
||||
const secondary = isFa
|
||||
@@ -121,11 +163,11 @@ export function StoreItemMultiSearchSelect({
|
||||
)
|
||||
}
|
||||
|
||||
const showDropdown = open && query.trim().length >= minSearchLength
|
||||
const showDropdown = open && (canSearch || trimmedQuery.length > 0)
|
||||
|
||||
return (
|
||||
<div className={styles.wrapper} dir={isFa ? 'rtl' : 'ltr'}>
|
||||
<div className={selectStyles.wrapper} ref={containerRef}>
|
||||
<div className={selectStyles.wrapper}>
|
||||
<div className={`${selectStyles.inputWrap} ${open ? selectStyles.inputWrapOpen : ''}`}>
|
||||
<Search size={16} className={selectStyles.searchIcon} />
|
||||
<input
|
||||
@@ -142,15 +184,31 @@ export function StoreItemMultiSearchSelect({
|
||||
disabled={disabled}
|
||||
dir={isFa ? 'rtl' : 'ltr'}
|
||||
/>
|
||||
{query ? (
|
||||
<button
|
||||
type="button"
|
||||
className={selectStyles.clearBtn}
|
||||
onClick={handleClearSearch}
|
||||
aria-label={t('storeItems.search.clearQuery')}
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{showDropdown && (
|
||||
<ul className={`${selectStyles.dropdown} ${selectStyles.dropdownInFlow}`} role="listbox">
|
||||
{filtered.length === 0 ? (
|
||||
{!canSearch ? (
|
||||
<li className={selectStyles.noResults}>
|
||||
{options.length === 0
|
||||
? t('storeItems.search.noProducts')
|
||||
: t('storeItems.search.noMatch')}
|
||||
{t('storeItems.search.minChars', { count: minSearchLength })}
|
||||
</li>
|
||||
) : isSearching ? (
|
||||
<li className={selectStyles.noResults}>{t('website.specialItems.pickSearching')}</li>
|
||||
) : filtered.length === 0 ? (
|
||||
<li className={selectStyles.noResults}>
|
||||
{onQueryChange || options.length > 0
|
||||
? t('storeItems.search.noMatch')
|
||||
: t('storeItems.search.noProducts')}
|
||||
</li>
|
||||
) : (
|
||||
filtered.map((option) => {
|
||||
@@ -182,14 +240,6 @@ export function StoreItemMultiSearchSelect({
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{open && query.trim().length > 0 && query.trim().length < minSearchLength && (
|
||||
<ul className={`${selectStyles.dropdown} ${selectStyles.dropdownInFlow}`}>
|
||||
<li className={selectStyles.noResults}>
|
||||
{t('storeItems.search.minChars', { count: minSearchLength })}
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedOptions.length > 0 && (
|
||||
|
||||
@@ -797,6 +797,7 @@ const en = {
|
||||
'storeItems.edit.saving': 'Saving…',
|
||||
'storeItems.edit.errorSave': 'Unable to save store items.',
|
||||
'storeItems.search.clear': 'Clear selection',
|
||||
'storeItems.search.clearQuery': 'Clear search',
|
||||
'storeItems.search.noProducts': 'No products available.',
|
||||
'storeItems.search.noMatch': 'No matching products.',
|
||||
'storeItems.search.minChars': 'Type at least {count} characters to search',
|
||||
@@ -1692,6 +1693,7 @@ const en = {
|
||||
'website.specialItems.pickSubtitle': 'Select store items to feature in this category.',
|
||||
'website.specialItems.pickSubtitleProducts':
|
||||
'Select products to feature in this category.',
|
||||
'website.specialItems.pickSearching': 'Searching...',
|
||||
'website.specialItems.pickLoading': 'Loading store items...',
|
||||
'website.specialItems.pickLoadingProducts': 'Loading products...',
|
||||
'website.specialItems.pickEmpty': 'All store items are already in this category.',
|
||||
@@ -1712,12 +1714,12 @@ const en = {
|
||||
'Choose where your special products come from: items added to the store for sale, or catalog products (without price and stock).',
|
||||
'website.settings.source.product': 'Products',
|
||||
'website.settings.source.storeItem': 'Store',
|
||||
'website.settings.sitemapTitle': 'Sitemap routes',
|
||||
'website.settings.sitemapTitle': 'Sitemap settings',
|
||||
'website.settings.sitemapDesc':
|
||||
'Import static pages and URL templates from GET /meshkee/sitemap-config.json on your live website. The API uses this with published CMS content to build /sitemap.xml.',
|
||||
'website.settings.sitemapSync': 'Sync sitemap config from website',
|
||||
'website.settings.sitemapSynced': 'Sitemap config synced from the website.',
|
||||
'website.settings.sitemapSyncError': 'Unable to sync sitemap config from the website.',
|
||||
'Click the button on the left to rebuild the sitemap. Do this only after adding a static page that should appear in the sitemap. Dynamic pages such as products, articles, and portfolios are added automatically.',
|
||||
'website.settings.sitemapSync': 'Rebuild sitemap',
|
||||
'website.settings.sitemapSynced': 'Sitemap rebuilt.',
|
||||
'website.settings.sitemapSyncError': 'Unable to rebuild the sitemap.',
|
||||
'website.settings.sitemapNotSynced': 'Not synced yet — publish /meshkee/sitemap-config.json on the site, then sync.',
|
||||
'website.settings.sitemapImported': 'Imported from website',
|
||||
'website.settings.sitemapSyncedAt': 'Last synced {date}',
|
||||
@@ -2958,6 +2960,7 @@ const fa: Record<MessageKey, string> = {
|
||||
'storeItems.edit.saving': 'در حال ذخیره…',
|
||||
'storeItems.edit.errorSave': 'ذخیره محصول فروشگاه ممکن نشد.',
|
||||
'storeItems.search.clear': 'پاک کردن انتخاب',
|
||||
'storeItems.search.clearQuery': 'پاک کردن جستجو',
|
||||
'storeItems.search.noProducts': 'محصولی موجود نیست.',
|
||||
'storeItems.search.noMatch': 'محصولی یافت نشد.',
|
||||
'storeItems.search.minChars': 'حداقل {count} کاراکتر برای جستجو وارد کنید',
|
||||
@@ -3852,6 +3855,7 @@ const fa: Record<MessageKey, string> = {
|
||||
'website.specialItems.pickSubtitle': 'محصولات فروشگاه را برای نمایش در این دسته انتخاب کنید.',
|
||||
'website.specialItems.pickSubtitleProducts':
|
||||
'محصولات را برای نمایش در این دسته انتخاب کنید.',
|
||||
'website.specialItems.pickSearching': 'در حال جستجو...',
|
||||
'website.specialItems.pickLoading': 'در حال بارگذاری محصولات فروشگاه...',
|
||||
'website.specialItems.pickLoadingProducts': 'در حال بارگذاری محصولات...',
|
||||
'website.specialItems.pickEmpty': 'همه محصولات فروشگاه قبلاً در این دسته هستند.',
|
||||
@@ -3872,12 +3876,12 @@ const fa: Record<MessageKey, string> = {
|
||||
'مشخص کنید محصولات ویژه ی شما از کدام بخش خوانده شود: محصولاتی که برای فروش به فروشگاه اضافه شده است و یا خود محصولات (بدون قیمت و موجودی)',
|
||||
'website.settings.source.product': 'محصولات',
|
||||
'website.settings.source.storeItem': 'فروشگاه',
|
||||
'website.settings.sitemapTitle': 'مسیرهای sitemap',
|
||||
'website.settings.sitemapTitle': 'تنظیمات سایت مپ',
|
||||
'website.settings.sitemapDesc':
|
||||
'صفحات ثابت و الگوی URL را از GET /meshkee/sitemap-config.json روی وبسایت زنده import کنید. API با محتوای منتشرشده CMS، /sitemap.xml را میسازد.',
|
||||
'website.settings.sitemapSync': 'همگامسازی تنظیمات sitemap از وبسایت',
|
||||
'website.settings.sitemapSynced': 'تنظیمات sitemap از وبسایت همگام شد.',
|
||||
'website.settings.sitemapSyncError': 'همگامسازی تنظیمات sitemap از وبسایت ممکن نشد.',
|
||||
'با زدن دکمه ی روبرو، سایت مپ مجدد ساخته خواهد شد. این کار را فقط وقتی انجام دهید که یک صفحه ی استاتیک به وبسایت اضافه کردید و میخواهید در سایت مپ قرار گیرد. صفحات داینامیک مانند محصولات، مطالب و نمونه کارها به صورت اتوماتیک به سایت مپ اضافه خواهند شد.',
|
||||
'website.settings.sitemapSync': 'بازسازی سایت مپ',
|
||||
'website.settings.sitemapSynced': 'سایت مپ ساخته شد.',
|
||||
'website.settings.sitemapSyncError': 'ساخت مجدد سایت مپ ممکن نشد.',
|
||||
'website.settings.sitemapNotSynced':
|
||||
'هنوز همگام نشده — /meshkee/sitemap-config.json را روی سایت منتشر کنید، سپس همگام کنید.',
|
||||
'website.settings.sitemapImported': 'از وبسایت import شده',
|
||||
|
||||
@@ -262,7 +262,7 @@ export function StoreSpecialsPage() {
|
||||
const existingIds = pickItemsTarget.items.map((item) =>
|
||||
fromProducts ? item.productId : item.id,
|
||||
)
|
||||
const nextIds = [...existingIds, ...ids]
|
||||
const nextIds = [...new Set([...existingIds, ...ids])]
|
||||
|
||||
setIsSaving(true)
|
||||
setError('')
|
||||
@@ -276,11 +276,10 @@ export function StoreSpecialsPage() {
|
||||
setPickItemsTarget(null)
|
||||
showToast(t('website.specialItems.toastAdded'), 'success')
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
setError(t('website.specialItems.errorAdd'))
|
||||
}
|
||||
const message =
|
||||
err instanceof ApiError ? err.message : t('website.specialItems.errorAdd')
|
||||
setError(message)
|
||||
throw err instanceof Error ? err : new Error(message)
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
|
||||
@@ -1,64 +1,117 @@
|
||||
.sourceRow {
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.radioGroup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-width: 200px;
|
||||
.field {
|
||||
min-width: 180px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.radioOption {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
.field select {
|
||||
width: 100%;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
min-height: var(--field-height);
|
||||
padding: var(--field-padding-y) var(--field-padding-x);
|
||||
padding-inline-end: var(--select-padding-end);
|
||||
font-size: var(--field-font-size);
|
||||
line-height: 1.4;
|
||||
font-family: var(--font-ui);
|
||||
color: var(--text-primary);
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right var(--select-arrow-offset) center;
|
||||
background-size: var(--select-arrow-size);
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.radioOption:has(input:checked) {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
|
||||
:global([dir='rtl']) .field select {
|
||||
background-position: left var(--select-arrow-offset) center;
|
||||
}
|
||||
|
||||
.radioOption:has(input:disabled) {
|
||||
.field select:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.radioOption input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
accent-color: var(--primary);
|
||||
.sitemapRow {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sitemapActions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rebuildBtn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: var(--field-height);
|
||||
padding: 0 14px;
|
||||
font-size: var(--field-font-size);
|
||||
font-family: var(--font-ui);
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border: 1px solid rgba(var(--primary-rgb) / 0.35);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.rebuildBtn:hover:not(:disabled) {
|
||||
background-color: rgba(var(--primary-rgb) / 0.08);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.rebuildBtn:focus-visible {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
|
||||
}
|
||||
|
||||
.rebuildBtn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.sitemapUrl {
|
||||
max-width: 260px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
font-family: var(--font-ui);
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sitemapUrl:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.radioGroup {
|
||||
.field,
|
||||
.sitemapActions {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sitemapActions {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.sitemapRow {
|
||||
align-items: flex-start;
|
||||
.sitemapUrl {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.sitemapMeta {
|
||||
margin: 8px 0 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.spin {
|
||||
|
||||
@@ -2,10 +2,10 @@ import { useEffect, useState } from 'react'
|
||||
import { RefreshCw } from 'lucide-react'
|
||||
import { Breadcrumbs } from '../components/Breadcrumbs'
|
||||
import { PageTitle } from '../components/PageTitle'
|
||||
import { Tooltip } from '../components/Tooltip'
|
||||
import { useToast } from '../context/ToastContext'
|
||||
import { useT } from '../i18n/useT'
|
||||
import { ApiError } from '../lib/api'
|
||||
import { getBusinessDomain } from '../lib/config'
|
||||
import {
|
||||
getSettings,
|
||||
updateWebsiteSettings,
|
||||
@@ -14,7 +14,6 @@ import {
|
||||
} from '../services/settingsService'
|
||||
import { syncWebsiteSitemapConfig } from '../services/websiteSitemapService'
|
||||
import { hasBusinessModule, type BusinessModuleId } from '../utils/businessModules'
|
||||
import controlStyles from '../components/CategoryRow.module.css'
|
||||
import pageStyles from '../components/PageContent.module.css'
|
||||
import sharedStyles from './ProductSettingsPage.module.css'
|
||||
import styles from './WebsiteSettingsPage.module.css'
|
||||
@@ -32,14 +31,10 @@ function defaultSpecialProductsSource(
|
||||
: 'product'
|
||||
}
|
||||
|
||||
function formatSyncedAt(value: string | null | undefined, locale: string) {
|
||||
if (!value) return null
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) return null
|
||||
return date.toLocaleString(locale === 'fa' ? 'fa-IR' : 'en-GB', {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
})
|
||||
function resolveSitemapUrl(config: WebsiteSitemapConfig | null): string {
|
||||
const fromConfig = config?.baseUrl?.trim().replace(/\/+$/, '')
|
||||
const origin = fromConfig || `https://${getBusinessDomain()}`
|
||||
return `${origin}/sitemap.xml`
|
||||
}
|
||||
|
||||
export function WebsiteSettingsPage() {
|
||||
@@ -126,14 +121,7 @@ export function WebsiteSettingsPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const syncedAtLabel = formatSyncedAt(
|
||||
sitemapConfig?.syncedAt,
|
||||
document.documentElement.lang || 'en',
|
||||
)
|
||||
const staticPageCount = sitemapConfig?.staticPages?.length ?? 0
|
||||
const templateCount = sitemapConfig?.templates
|
||||
? Object.keys(sitemapConfig.templates).length
|
||||
: 0
|
||||
const sitemapUrl = resolveSitemapUrl(sitemapConfig)
|
||||
|
||||
return (
|
||||
<main className={pageStyles.content}>
|
||||
@@ -165,35 +153,30 @@ export function WebsiteSettingsPage() {
|
||||
<div className={sharedStyles.list}>
|
||||
<div className={`${sharedStyles.row} ${styles.sourceRow}`}>
|
||||
<div className={sharedStyles.rowText}>
|
||||
<span className={sharedStyles.rowLabel} id="special-products-source-label">
|
||||
<label htmlFor="special-products-source" className={sharedStyles.rowLabel}>
|
||||
{t('website.settings.specialSource')}
|
||||
</span>
|
||||
</label>
|
||||
<p className={sharedStyles.rowDescription}>
|
||||
{t('website.settings.specialSourceDesc')}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={styles.radioGroup}
|
||||
role="radiogroup"
|
||||
aria-labelledby="special-products-source-label"
|
||||
<div className={styles.field}>
|
||||
<select
|
||||
id="special-products-source"
|
||||
value={source}
|
||||
disabled={isSaving}
|
||||
onChange={(e) =>
|
||||
void handleSourceChange(e.target.value as SpecialProductsSource)
|
||||
}
|
||||
>
|
||||
{SOURCE_OPTIONS.map((option) => (
|
||||
<label key={option} className={styles.radioOption}>
|
||||
<input
|
||||
type="radio"
|
||||
name="special-products-source"
|
||||
value={option}
|
||||
checked={source === option}
|
||||
disabled={isSaving}
|
||||
onChange={() => void handleSourceChange(option)}
|
||||
/>
|
||||
<span>
|
||||
<option key={option} value={option}>
|
||||
{option === 'product'
|
||||
? t('website.settings.source.product')
|
||||
: t('website.settings.source.storeItem')}
|
||||
</span>
|
||||
</label>
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -205,35 +188,30 @@ export function WebsiteSettingsPage() {
|
||||
<p className={sharedStyles.rowDescription}>
|
||||
{t('website.settings.sitemapDesc')}
|
||||
</p>
|
||||
{sitemapConfig ? (
|
||||
<p className={styles.sitemapMeta}>
|
||||
{syncedAtLabel
|
||||
? t('website.settings.sitemapSyncedAt', { date: syncedAtLabel })
|
||||
: t('website.settings.sitemapImported')}
|
||||
{' · '}
|
||||
{t('website.settings.sitemapSummary', {
|
||||
pages: staticPageCount,
|
||||
templates: templateCount,
|
||||
})}
|
||||
</p>
|
||||
) : (
|
||||
<p className={styles.sitemapMeta}>{t('website.settings.sitemapNotSynced')}</p>
|
||||
)}
|
||||
</div>
|
||||
<Tooltip label={t('website.settings.sitemapSync')}>
|
||||
<div className={styles.sitemapActions}>
|
||||
<button
|
||||
type="button"
|
||||
className={controlStyles.controlBtn}
|
||||
className={styles.rebuildBtn}
|
||||
onClick={() => void handleSyncSitemap()}
|
||||
disabled={isLoading || isSaving || isSyncingSitemap}
|
||||
aria-label={t('website.settings.sitemapSync')}
|
||||
>
|
||||
<RefreshCw
|
||||
size={16}
|
||||
className={isSyncingSitemap ? styles.spin : undefined}
|
||||
/>
|
||||
{t('website.settings.sitemapSync')}
|
||||
</button>
|
||||
</Tooltip>
|
||||
<a
|
||||
href={sitemapUrl}
|
||||
className={styles.sitemapUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
dir="ltr"
|
||||
>
|
||||
{sitemapUrl}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -91,9 +91,22 @@ function businessPath(suffix = '') {
|
||||
return `/businesses/${businessId}/store-items${suffix}`
|
||||
}
|
||||
|
||||
export async function listStoreItems(page = 1, pageSize = 20, signal?: AbortSignal) {
|
||||
export async function listStoreItems(
|
||||
page = 1,
|
||||
pageSize = 20,
|
||||
signal?: AbortSignal,
|
||||
filters?: { name?: string },
|
||||
) {
|
||||
const params = new URLSearchParams({
|
||||
page: String(page),
|
||||
pageSize: String(pageSize),
|
||||
})
|
||||
if (filters?.name?.trim()) {
|
||||
params.set('name', filters.name.trim())
|
||||
}
|
||||
|
||||
return apiRequest<StoreItemsListResponse>(
|
||||
`${businessPath()}?page=${page}&pageSize=${pageSize}`,
|
||||
`${businessPath()}?${params.toString()}`,
|
||||
{ auth: true, signal },
|
||||
)
|
||||
}
|
||||
|
||||
@@ -36,12 +36,64 @@ function specialStoreItemToVariants(item: StoreSpecialStoreItem): StoreItem[] {
|
||||
}))
|
||||
}
|
||||
|
||||
/** Catalog-only specials (product source) may have a store item row with no variants yet. */
|
||||
function listingFromStoreItemWithoutVariants(
|
||||
item: StoreSpecialStoreItem,
|
||||
): SpecialProductListing {
|
||||
const representative: StoreItem = {
|
||||
id: item.id,
|
||||
storeItemId: item.id,
|
||||
productId: item.productId,
|
||||
productTitle: item.productTitle,
|
||||
productNameFa: item.productNameFa,
|
||||
productImage: item.productImage,
|
||||
productTotalStock: 0,
|
||||
selections: [],
|
||||
label: item.productTitle,
|
||||
price: null,
|
||||
discountedPrice: null,
|
||||
stockQuantity: null,
|
||||
rewardPoints: null,
|
||||
isFestival: false,
|
||||
sortOrder: item.sortOrder,
|
||||
createdAt: '',
|
||||
updatedAt: '',
|
||||
}
|
||||
|
||||
return {
|
||||
productId: item.productId,
|
||||
productTitle: item.productTitle,
|
||||
productNameFa: item.productNameFa,
|
||||
productImage: item.productImage,
|
||||
productTotalStock: 0,
|
||||
variantCount: 0,
|
||||
variants: [],
|
||||
representative,
|
||||
displayPrice: null,
|
||||
displayDiscountedPrice: null,
|
||||
showFestival: false,
|
||||
storeItemId: item.id,
|
||||
}
|
||||
}
|
||||
|
||||
export function specialItemsToListings(items: StoreSpecialStoreItem[]): SpecialProductListing[] {
|
||||
const variants = items.flatMap(specialStoreItemToVariants)
|
||||
const listings = groupStoreItemsByProduct(variants)
|
||||
const listings: SpecialProductListing[] = []
|
||||
|
||||
return listings.map((listing) => ({
|
||||
for (const item of items) {
|
||||
const variants = specialStoreItemToVariants(item)
|
||||
if (variants.length === 0) {
|
||||
listings.push(listingFromStoreItemWithoutVariants(item))
|
||||
continue
|
||||
}
|
||||
|
||||
const grouped = groupStoreItemsByProduct(variants)
|
||||
for (const listing of grouped) {
|
||||
listings.push({
|
||||
...listing,
|
||||
storeItemId: listing.representative.storeItemId ?? listing.representative.id,
|
||||
}))
|
||||
storeItemId: listing.representative.storeItemId ?? item.id,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return listings
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user