feat: facility and google review crud
This commit is contained in:
Kailasdevdas
@@ -0,0 +1,209 @@
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
|
||||
import { BytescaleUploader } from '@/components/BytescaleUploader/BytescaleUploader';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
editingReview: any;
|
||||
reviewForm: any;
|
||||
setReviewForm: any;
|
||||
onSave: () => void;
|
||||
}
|
||||
|
||||
export default function GoogleReviewModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
editingReview,
|
||||
reviewForm,
|
||||
setReviewForm,
|
||||
onSave,
|
||||
}: Props) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="w-full !max-w-2xl h-auto max-h-[90vh] flex flex-col p-0 overflow-hidden">
|
||||
<DialogHeader className="px-6 py-5 border-b bg-background sticky top-0 z-20">
|
||||
<DialogTitle className="text-2xl font-bold">
|
||||
{editingReview ? 'Edit Google Review' : 'Create Google Review'}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="border-b pb-2">
|
||||
<h3 className="text-lg font-bold">Reviewer Information</h3>
|
||||
<p className="text-sm text-muted-foreground">Details about the customer leaving the review</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Reviewer Name</Label>
|
||||
<Input
|
||||
value={reviewForm.reviewerName || ''}
|
||||
placeholder="e.g., John Doe"
|
||||
onChange={(e) =>
|
||||
setReviewForm({
|
||||
...reviewForm,
|
||||
reviewerName: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Reviewer Profile Picture (Optional)</Label>
|
||||
<BytescaleUploader
|
||||
value={reviewForm.reviewerImage || ''}
|
||||
folderPath="/reviews"
|
||||
onChange={(url) =>
|
||||
setReviewForm({
|
||||
...reviewForm,
|
||||
reviewerImage: url,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="border-b pb-2">
|
||||
<h3 className="text-lg font-bold">Review Content</h3>
|
||||
<p className="text-sm text-muted-foreground">Ratings and testimonial text</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Rating (1-5)</Label>
|
||||
<Select
|
||||
value={String(reviewForm.rating || 5)}
|
||||
onValueChange={(val) =>
|
||||
setReviewForm({
|
||||
...reviewForm,
|
||||
rating: Number(val),
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a rating" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">1 Star</SelectItem>
|
||||
<SelectItem value="2">2 Stars</SelectItem>
|
||||
<SelectItem value="3">3 Stars</SelectItem>
|
||||
<SelectItem value="4">4 Stars</SelectItem>
|
||||
<SelectItem value="5">5 Stars</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Review Date (Optional)</Label>
|
||||
<Input
|
||||
type="date"
|
||||
value={reviewForm.reviewDate ? new Date(reviewForm.reviewDate).toISOString().split('T')[0] : ''}
|
||||
onChange={(e) =>
|
||||
setReviewForm({
|
||||
...reviewForm,
|
||||
reviewDate: e.target.value ? new Date(e.target.value).toISOString() : null,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Review Message</Label>
|
||||
<Textarea
|
||||
rows={4}
|
||||
value={reviewForm.review || ''}
|
||||
placeholder="Share the customer experience..."
|
||||
onChange={(e) =>
|
||||
setReviewForm({
|
||||
...reviewForm,
|
||||
review: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Original Google Review URL (Optional)</Label>
|
||||
<Input
|
||||
value={reviewForm.googleReviewUrl || ''}
|
||||
placeholder="e.g., https://g.co/kgs/..."
|
||||
onChange={(e) =>
|
||||
setReviewForm({
|
||||
...reviewForm,
|
||||
googleReviewUrl: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 border-t pt-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Sorting Rank</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={reviewForm.sortOrder ?? 1000}
|
||||
onChange={(e) =>
|
||||
setReviewForm({
|
||||
...reviewForm,
|
||||
sortOrder: Number(e.target.value),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between border rounded-xl p-4 bg-muted/30 col-span-1 md:col-span-1">
|
||||
<div>
|
||||
<p className="font-semibold text-sm">Featured</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={!!reviewForm.isFeatured}
|
||||
onCheckedChange={(val) =>
|
||||
setReviewForm({
|
||||
...reviewForm,
|
||||
isFeatured: val,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between border rounded-xl p-4 bg-muted/30 col-span-1 md:col-span-1">
|
||||
<div>
|
||||
<p className="font-semibold text-sm">Active Visibility</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={!!reviewForm.isActive}
|
||||
onCheckedChange={(val) =>
|
||||
setReviewForm({
|
||||
...reviewForm,
|
||||
isActive: val,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="p-6 border-t bg-background sticky bottom-0 z-20">
|
||||
<Button variant="ghost" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button className="px-10" onClick={onSave}>
|
||||
{editingReview ? 'Save Changes' : 'Add Review'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user