g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize form loading and update product selection UI

Browse Source 
Dynamically import ChatDetail, NewChatForm, and ProductSelector components with skeleton loading states for improved performance. Refine product selection logic in promotion forms to show blacklist selector only for 'all' mode and clarify labels and descriptions for better user understanding.
This commit is contained in:
NotII
2025-08-08 16:14:41 +01:00
parent f19ddc415c
commit e2db2d5027
5 changed files with 51 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/dashboard/promotions/NewPromotionForm.tsx
View File

@@ -23,7 +23,8 @@ import { toast } from '@/components/ui/use-toast';
import { PromotionFormData } from '@/lib/types/promotion';
import { fetchClient } from '@/lib/api';
import { DatePicker } from '@/components/ui/date-picker';
import ProductSelector from './ProductSelector';
import dynamic from 'next/dynamic';
const ProductSelector = dynamic(() => import('./ProductSelector'));
// Form schema validation with Zod
const formSchema = z.object({
@@ -345,33 +346,27 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
)}
/>
{/* Show blacklist selector for "all" and "exclude_specific" modes */}
{(form.watch('applicableProducts') === 'all' || form.watch('applicableProducts') === 'exclude_specific') && (
{/* Show blacklist selector only for "all" mode */}
{form.watch('applicableProducts') === 'all' && (
<FormField
control={form.control}
name="blacklistedProducts"
render={({ field }) => (
<FormItem>
<FormLabel className="text-sm font-medium">
{form.watch('applicableProducts') === 'all'
? 'Exclude Products (Blacklist)'
: 'Products to Exclude'}
Exclude Products (Blacklist)
</FormLabel>
<FormControl>
<ProductSelector
selectedProductIds={field.value}
onSelectionChange={field.onChange}
placeholder={
form.watch('applicableProducts') === 'all'
? "Select products to exclude from this promotion..."
: "Select additional products to exclude..."
"Select products to exclude from this promotion..."
}
/>
</FormControl>
<FormDescription className="text-xs">
{form.watch('applicableProducts') === 'all'
? 'Select products that should not be eligible for this promotion'
: 'Select products to exclude in addition to those selected above'}
Select products that should not be eligible for this promotion
</FormDescription>
<FormMessage />
</FormItem>
@@ -388,7 +383,7 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
<FormItem>
<FormLabel className="text-sm font-medium">
{form.watch('applicableProducts') === 'specific'
? 'Select Specific Products'
? 'Eligible Products'
: 'Products to Exclude'}
</FormLabel>
<FormControl>