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

cluster fuck

Browse Source
This commit is contained in:
NotII
2025-03-08 05:14:50 +00:00
parent b8e6e1dfc0
commit 8ea692eda2
3 changed files with 144 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
components/dashboard/promotions/EditPromotionForm.tsx
View File

@@ -16,13 +16,7 @@ import {
FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Switch } from '@/components/ui/switch';
import { Textarea } from '@/components/ui/textarea';
import { toast } from '@/components/ui/use-toast';
@@ -63,6 +57,7 @@ interface EditPromotionFormProps {
export default function EditPromotionForm({ promotion, onSuccess, onCancel }: EditPromotionFormProps) {
const [isSubmitting, setIsSubmitting] = useState(false);
const [discountType, setDiscountType] = useState<'percentage' | 'fixed'>(promotion.discountType);
// Format dates from ISO to YYYY-MM-DD for input elements
const formatDateForInput = (dateString: string | null) => {
@@ -86,6 +81,16 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
},
});
// Keep local state in sync with form
useEffect(() => {
const subscription = form.watch((value, { name }) => {
if (name === 'discountType') {
setDiscountType(value.discountType as 'percentage' | 'fixed');
}
});
return () => subscription.unsubscribe();
}, [form, form.watch]);
// Form submission handler
async function onSubmit(data: z.infer<typeof formSchema>) {
setIsSubmitting(true);
@@ -112,22 +117,23 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<div className="grid grid-cols-1 gap-4">
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<div className="grid grid-cols-1 gap-6">
<FormField
control={form.control}
name="code"
render={({ field }) => (
<FormItem>
<FormLabel>Promotion Code</FormLabel>
<FormLabel className="text-sm font-medium">Promotion Code</FormLabel>
<FormControl>
<Input
placeholder="SUMMER20"
{...field}
onChange={(e) => field.onChange(e.target.value.toUpperCase())}
className="h-10"
/>
</FormControl>
<FormDescription>
<FormDescription className="text-xs">
Enter a unique code for your promotion. Only letters and numbers.
</FormDescription>
<FormMessage />
@@ -136,33 +142,32 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
/>
</div>
<div className="grid grid-cols-3 gap-4">
<div className="grid grid-cols-4 gap-6">
<FormField
control={form.control}
name="discountType"
render={({ field }) => (
<FormItem>
<FormLabel>Discount Type</FormLabel>
<Select
<FormItem className="col-span-1">
<FormLabel className="text-sm font-medium">Discount Type</FormLabel>
<FormControl>
<RadioGroup
onValueChange={(value) => {
console.log("Selected discount type:", value);
field.onChange(value);
setDiscountType(value as 'percentage' | 'fixed');
}}
value={field.value}
className="flex flex-col space-y-2"
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select a discount type" />
</SelectTrigger>
<div className="flex items-center space-x-2">
<RadioGroupItem value="percentage" id="edit-percentage" />
<label htmlFor="edit-percentage" className="cursor-pointer">Percentage (%)</label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="fixed" id="edit-fixed" />
<label htmlFor="edit-fixed" className="cursor-pointer">Fixed Amount (£)</label>
</div>
</RadioGroup>
</FormControl>
<SelectContent>
<SelectItem value="percentage">Percentage (%)</SelectItem>
<SelectItem value="fixed">Fixed Amount (£)</SelectItem>
</SelectContent>
</Select>
<FormDescription>
Choose between percentage or fixed amount discount
</FormDescription>
<FormMessage />
</FormItem>
)}
@@ -172,19 +177,20 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
control={form.control}
name="discountValue"
render={({ field }) => (
<FormItem>
<FormLabel>Discount Value</FormLabel>
<FormItem className="col-span-1">
<FormLabel className="text-sm font-medium">Discount Value</FormLabel>
<FormControl>
<Input
type="number"
step={form.watch('discountType') === 'percentage' ? '1' : '0.01'}
step={discountType === 'percentage' ? '1' : '0.01'}
min={0}
max={form.watch('discountType') === 'percentage' ? 100 : undefined}
max={discountType === 'percentage' ? 100 : undefined}
className="h-10"
{...field}
/>
</FormControl>
<FormDescription>
{form.watch('discountType') === 'percentage'
<FormDescription className="text-xs">
{discountType === 'percentage'
? 'Enter a percentage (1-100%)'
: 'Enter an amount in £'}
</FormDescription>
@@ -197,32 +203,31 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
control={form.control}
name="minOrderAmount"
render={({ field }) => (
<FormItem>
<FormLabel>Minimum Order Amount (£)</FormLabel>
<FormItem className="col-span-1">
<FormLabel className="text-sm font-medium">Minimum Order Amount (£)</FormLabel>
<FormControl>
<Input type="number" step="0.01" min="0" {...field} />
<Input type="number" step="0.01" min="0" className="h-10" {...field} />
</FormControl>
<FormDescription>
<FormDescription className="text-xs">
Minimum purchase required
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-3 gap-4">
<FormField
control={form.control}
name="maxUsage"
render={({ field }) => (
<FormItem>
<FormLabel>Maximum Usage Count</FormLabel>
<FormItem className="col-span-1">
<FormLabel className="text-sm font-medium">Maximum Usage Count</FormLabel>
<FormControl>
<Input
type="number"
min="1"
placeholder="Unlimited"
className="h-10"
{...field}
value={field.value === null ? '' : field.value}
onChange={(e) => {
@@ -231,22 +236,24 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
}}
/>
</FormControl>
<FormDescription>
<FormDescription className="text-xs">
Leave empty for unlimited usage (currently used: {promotion.usageCount} times)
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-2 gap-6">
<FormField
control={form.control}
name="startDate"
render={({ field }) => (
<FormItem>
<FormLabel>Start Date</FormLabel>
<FormLabel className="text-sm font-medium">Start Date</FormLabel>
<FormControl>
<Input type="date" {...field} />
<Input type="date" className="h-10" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -258,10 +265,11 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
name="endDate"
render={({ field }) => (
<FormItem>
<FormLabel>End Date (Optional)</FormLabel>
<FormLabel className="text-sm font-medium">End Date (Optional)</FormLabel>
<FormControl>
<Input
type="date"
className="h-10"
{...field}
value={field.value || ''}
onChange={(e) => {
@@ -270,7 +278,7 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
}}
/>
</FormControl>
<FormDescription>
<FormDescription className="text-xs">
Leave empty for no expiration
</FormDescription>
<FormMessage />

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

@@ -1,6 +1,6 @@
'use client';
import { useState } from 'react';
import { useState, useEffect } from 'react';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
@@ -25,6 +25,7 @@ import {
} from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { Textarea } from '@/components/ui/textarea';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { toast } from '@/components/ui/use-toast';
import { PromotionFormData } from '@/lib/types/promotion';
import { fetchClient } from '@/lib/client-service';
@@ -62,6 +63,7 @@ interface NewPromotionFormProps {
export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFormProps) {
const [isSubmitting, setIsSubmitting] = useState(false);
const [discountType, setDiscountType] = useState<'percentage' | 'fixed'>('percentage');
// Initialize form with default values
const form = useForm<z.infer<typeof formSchema>>({
@@ -79,6 +81,16 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
},
});
// Keep local state in sync with form
useEffect(() => {
const subscription = form.watch((value, { name }) => {
if (name === 'discountType') {
setDiscountType(value.discountType as 'percentage' | 'fixed');
}
});
return () => subscription.unsubscribe();
}, [form, form.watch]);
// Form submission handler
async function onSubmit(data: z.infer<typeof formSchema>) {
setIsSubmitting(true);
@@ -105,22 +117,23 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<div className="grid grid-cols-1 gap-4">
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<div className="grid grid-cols-1 gap-6">
<FormField
control={form.control}
name="code"
render={({ field }) => (
<FormItem>
<FormLabel>Promotion Code</FormLabel>
<FormLabel className="text-sm font-medium">Promotion Code</FormLabel>
<FormControl>
<Input
placeholder="SUMMER20"
{...field}
onChange={(e) => field.onChange(e.target.value.toUpperCase())}
className="h-10"
/>
</FormControl>
<FormDescription>
<FormDescription className="text-xs">
Enter a unique code for your promotion. Only letters and numbers.
</FormDescription>
<FormMessage />
@@ -129,33 +142,32 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
/>
</div>
<div className="grid grid-cols-3 gap-4">
<div className="grid grid-cols-4 gap-6">
<FormField
control={form.control}
name="discountType"
render={({ field }) => (
<FormItem>
<FormLabel>Discount Type</FormLabel>
<Select
<FormItem className="col-span-1">
<FormLabel className="text-sm font-medium">Discount Type</FormLabel>
<FormControl>
<RadioGroup
onValueChange={(value) => {
console.log("Selected discount type:", value);
field.onChange(value);
setDiscountType(value as 'percentage' | 'fixed');
}}
value={field.value}
className="flex flex-col space-y-2"
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select a discount type" />
</SelectTrigger>
<div className="flex items-center space-x-2">
<RadioGroupItem value="percentage" id="percentage" />
<label htmlFor="percentage" className="cursor-pointer">Percentage (%)</label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="fixed" id="fixed" />
<label htmlFor="fixed" className="cursor-pointer">Fixed Amount (£)</label>
</div>
</RadioGroup>
</FormControl>
<SelectContent>
<SelectItem value="percentage">Percentage (%)</SelectItem>
<SelectItem value="fixed">Fixed Amount (£)</SelectItem>
</SelectContent>
</Select>
<FormDescription>
Choose between percentage or fixed amount discount
</FormDescription>
<FormMessage />
</FormItem>
)}
@@ -165,19 +177,20 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
control={form.control}
name="discountValue"
render={({ field }) => (
<FormItem>
<FormLabel>Discount Value</FormLabel>
<FormItem className="col-span-1">
<FormLabel className="text-sm font-medium">Discount Value</FormLabel>
<FormControl>
<Input
type="number"
step={form.watch('discountType') === 'percentage' ? '1' : '0.01'}
step={discountType === 'percentage' ? '1' : '0.01'}
min={0}
max={form.watch('discountType') === 'percentage' ? 100 : undefined}
max={discountType === 'percentage' ? 100 : undefined}
className="h-10"
{...field}
/>
</FormControl>
<FormDescription>
{form.watch('discountType') === 'percentage'
<FormDescription className="text-xs">
{discountType === 'percentage'
? 'Enter a percentage (1-100%)'
: 'Enter an amount in £'}
</FormDescription>
@@ -190,32 +203,31 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
control={form.control}
name="minOrderAmount"
render={({ field }) => (
<FormItem>
<FormLabel>Minimum Order Amount (£)</FormLabel>
<FormItem className="col-span-1">
<FormLabel className="text-sm font-medium">Minimum Order Amount (£)</FormLabel>
<FormControl>
<Input type="number" step="0.01" min="0" {...field} />
<Input type="number" step="0.01" min="0" className="h-10" {...field} />
</FormControl>
<FormDescription>
<FormDescription className="text-xs">
Minimum purchase required
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-3 gap-4">
<FormField
control={form.control}
name="maxUsage"
render={({ field }) => (
<FormItem>
<FormLabel>Maximum Usage Count</FormLabel>
<FormItem className="col-span-1">
<FormLabel className="text-sm font-medium">Maximum Usage Count</FormLabel>
<FormControl>
<Input
type="number"
min="1"
placeholder="Unlimited"
className="h-10"
{...field}
value={field.value === null ? '' : field.value}
onChange={(e) => {
@@ -224,22 +236,24 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
}}
/>
</FormControl>
<FormDescription>
<FormDescription className="text-xs">
Leave empty for unlimited usage
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-2 gap-6">
<FormField
control={form.control}
name="startDate"
render={({ field }) => (
<FormItem>
<FormLabel>Start Date</FormLabel>
<FormLabel className="text-sm font-medium">Start Date</FormLabel>
<FormControl>
<Input type="date" {...field} />
<Input type="date" className="h-10" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -251,10 +265,11 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
name="endDate"
render={({ field }) => (
<FormItem>
<FormLabel>End Date (Optional)</FormLabel>
<FormLabel className="text-sm font-medium">End Date (Optional)</FormLabel>
<FormControl>
<Input
type="date"
className="h-10"
{...field}
value={field.value || ''}
onChange={(e) => {
@@ -263,7 +278,7 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
}}
/>
</FormControl>
<FormDescription>
<FormDescription className="text-xs">
Leave empty for no expiration
</FormDescription>
<FormMessage />

16
components/dashboard/promotions/PromotionsList.tsx
View File

@@ -224,26 +224,29 @@ export default function PromotionsList() {
{/* New Promotion Dialog */}
<Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>
<DialogContent className="max-w-2xl">
<DialogHeader>
<DialogTitle>Create New Promotion</DialogTitle>
<DialogContent className="max-w-4xl">
<DialogHeader className="pb-4">
<DialogTitle className="text-xl">Create New Promotion</DialogTitle>
<DialogDescription>
Add a promotional code to offer discounts to your customers.
</DialogDescription>
</DialogHeader>
<div className="max-h-[70vh] overflow-y-auto pr-1">
<NewPromotionForm onSuccess={handleCreateComplete} onCancel={() => setShowNewDialog(false)} />
</div>
</DialogContent>
</Dialog>
{/* Edit Promotion Dialog */}
<Dialog open={!!editingPromotion} onOpenChange={() => editingPromotion && handleCloseEditDialog()}>
<DialogContent className="max-w-2xl">
<DialogHeader>
<DialogTitle>Edit Promotion</DialogTitle>
<DialogContent className="max-w-4xl">
<DialogHeader className="pb-4">
<DialogTitle className="text-xl">Edit Promotion</DialogTitle>
<DialogDescription>
Modify this promotional code's details.
</DialogDescription>
</DialogHeader>
<div className="max-h-[70vh] overflow-y-auto pr-1">
{editingPromotion && (
<EditPromotionForm
promotion={editingPromotion}
@@ -251,6 +254,7 @@ export default function PromotionsList() {
onCancel={handleCloseEditDialog}
/>
)}
</div>
</DialogContent>
</Dialog>