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

Add product applicability controls to promotion forms

Browse Source 
Introduces product selection and exclusion controls to both new and edit promotion forms, allowing promotions to target all, specific, or all-but-specific products. Adds a reusable ProductSelector component, updates promotion types to support new fields, and adjusts cookie max-age for authentication. Also adds two new business quotes.
This commit is contained in:
NotII
2025-08-07 16:05:31 +01:00
parent db1ebcb19d
commit 2c48ecd2b4
8 changed files with 584 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,6 +23,7 @@ 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';
// Form schema validation with Zod
const formSchema = z.object({
@@ -48,6 +49,9 @@ const formSchema = z.object({
startDate: z.string().optional(),
endDate: z.string().nullable().optional(),
description: z.string().max(200, 'Description cannot exceed 200 characters').optional(),
blacklistedProducts: z.array(z.string()).default([]),
applicableProducts: z.enum(['all', 'specific', 'exclude_specific']).default('all'),
specificProducts: z.array(z.string()).default([]),
});
interface NewPromotionFormProps {
@@ -72,6 +76,9 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
description: '',
startDate: new Date().toISOString().split('T')[0], // Today
endDate: null,
blacklistedProducts: [],
applicableProducts: 'all',
specificProducts: [],
},
});
@@ -303,6 +310,110 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
)}
/>
{/* Product Applicability Section */}
<div className="space-y-4 border rounded-lg p-4">
<h3 className="text-lg font-semibold">Product Applicability</h3>
<FormField
control={form.control}
name="applicableProducts"
render={({ field }) => (
<FormItem>
<FormLabel className="text-sm font-medium">Apply Promotion To</FormLabel>
<FormControl>
<RadioGroup
onValueChange={field.onChange}
value={field.value}
className="flex flex-col space-y-2"
>
<div className="flex items-center space-x-2">
<RadioGroupItem value="all" id="all-products" />
<label htmlFor="all-products" className="cursor-pointer">All products</label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="specific" id="specific-products" />
<label htmlFor="specific-products" className="cursor-pointer">Only specific products</label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="exclude_specific" id="exclude-products" />
<label htmlFor="exclude-products" className="cursor-pointer">All products except specific ones</label>
</div>
</RadioGroup>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{/* Show blacklist selector for "all" and "exclude_specific" modes */}
{(form.watch('applicableProducts') === 'all' || form.watch('applicableProducts') === 'exclude_specific') && (
<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'}
</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..."
}
/>
</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'}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
)}
{/* Show specific products selector for "specific" and "exclude_specific" modes */}
{(form.watch('applicableProducts') === 'specific' || form.watch('applicableProducts') === 'exclude_specific') && (
<FormField
control={form.control}
name="specificProducts"
render={({ field }) => (
<FormItem>
<FormLabel className="text-sm font-medium">
{form.watch('applicableProducts') === 'specific'
? 'Select Specific Products'
: 'Products to Exclude'}
</FormLabel>
<FormControl>
<ProductSelector
selectedProductIds={field.value}
onSelectionChange={field.onChange}
placeholder={
form.watch('applicableProducts') === 'specific'
? "Select products eligible for this promotion..."
: "Select products to exclude..."
}
/>
</FormControl>
<FormDescription className="text-xs">
{form.watch('applicableProducts') === 'specific'
? 'Only selected products will be eligible for this promotion'
: 'Selected products will be excluded from this promotion'}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
)}
</div>
<FormField
control={form.control}
name="description"