431 lines
14 KiB
TypeScript
431 lines
14 KiB
TypeScript
|
|
// src/components/pages/EditFAQ.tsx
|
|
import React, { useState, useEffect } from 'react';
|
|
import { AuthenticatedLayout } from '../layout/AuthenticatedLayout';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
|
|
import { Button } from '../ui/button';
|
|
import { Input } from '../ui/input';
|
|
import { Label } from '../ui/label';
|
|
import { Textarea } from '../ui/textarea';
|
|
import { Badge } from '../ui/badge';
|
|
import { toast } from "sonner";
|
|
import { ArrowLeft, Save, Plus, X } from 'lucide-react';
|
|
import { Route } from '../../types/routes';
|
|
import { useGetFAQByIdQuery, useUpdateFAQMutation } from '../../store/services/contentManager.service';
|
|
|
|
interface EditFAQProps {
|
|
onNavigate: (route: Route) => void;
|
|
onLogout: () => void;
|
|
user: any;
|
|
faqId?: string;
|
|
formData?: any;
|
|
onAutoSave?: (data: any) => void;
|
|
onClearAutoSave?: (route?: string) => void;
|
|
}
|
|
|
|
export function EditFAQ({
|
|
onNavigate,
|
|
onLogout,
|
|
user,
|
|
faqId,
|
|
formData,
|
|
onAutoSave,
|
|
onClearAutoSave
|
|
}: EditFAQProps) {
|
|
const { data: existingFAQ, isLoading, error } = useGetFAQByIdQuery(faqId!, {
|
|
skip: !faqId,
|
|
});
|
|
|
|
const [updateFAQ, { isLoading: isUpdating }] = useUpdateFAQMutation();
|
|
|
|
const [faqData, setFaqData] = useState({
|
|
question: '',
|
|
answer: '',
|
|
category: '',
|
|
tags: [] as string[],
|
|
globalTag: [] as string[],
|
|
});
|
|
|
|
const [newTag, setNewTag] = useState('');
|
|
|
|
// Load existing FAQ data when it's fetched
|
|
useEffect(() => {
|
|
if (existingFAQ) {
|
|
setFaqData({
|
|
question: existingFAQ.question || '',
|
|
answer: existingFAQ.answer || '',
|
|
category: existingFAQ.category || '',
|
|
tags: existingFAQ.tags || [],
|
|
globalTag: existingFAQ.globalTag || [],
|
|
});
|
|
}
|
|
}, [existingFAQ]);
|
|
|
|
// Auto-save functionality
|
|
useEffect(() => {
|
|
if (onAutoSave && faqId) {
|
|
const timer = setTimeout(() => {
|
|
onAutoSave({ ...faqData, id: faqId });
|
|
}, 1000);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [faqData, faqId, onAutoSave]);
|
|
|
|
const categories = ['General', 'Technical', 'Account', 'Billing', 'Support', 'Features', 'Other'];
|
|
|
|
const handleInputChange = (field: string, value: any) => {
|
|
setFaqData(prev => ({
|
|
...prev,
|
|
[field]: value
|
|
}));
|
|
};
|
|
|
|
const addTag = () => {
|
|
if (newTag.trim() && !faqData.tags.includes(newTag.trim())) {
|
|
handleInputChange('tags', [...faqData.tags, newTag.trim()]);
|
|
setNewTag('');
|
|
}
|
|
};
|
|
|
|
const removeTag = (tagToRemove: string) => {
|
|
handleInputChange('tags', faqData.tags.filter(tag => tag !== tagToRemove));
|
|
};
|
|
|
|
const addGlobalTag = () => {
|
|
const tag = prompt('Enter global tag:');
|
|
if (tag && tag.trim() && !faqData.globalTag.includes(tag.trim())) {
|
|
handleInputChange('globalTag', [...faqData.globalTag, tag.trim()]);
|
|
}
|
|
};
|
|
|
|
const removeGlobalTag = (tagToRemove: string) => {
|
|
handleInputChange('globalTag', faqData.globalTag.filter(tag => tag !== tagToRemove));
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!faqData.question.trim()) {
|
|
toast.error('Please enter a question');
|
|
return;
|
|
}
|
|
|
|
if (!faqData.answer.trim()) {
|
|
toast.error('Please enter an answer');
|
|
return;
|
|
}
|
|
|
|
if (!faqId) {
|
|
toast.error('FAQ ID is missing');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Create update payload with only changed fields (PATCH style)
|
|
const updatePayload: any = { id: faqId };
|
|
|
|
// Only include fields that have changed from the original
|
|
if (existingFAQ) {
|
|
if (faqData.question !== existingFAQ.question) {
|
|
updatePayload.question = faqData.question.trim();
|
|
}
|
|
if (faqData.answer !== existingFAQ.answer) {
|
|
updatePayload.answer = faqData.answer.trim();
|
|
}
|
|
if (faqData.category !== existingFAQ.category) {
|
|
updatePayload.category = faqData.category;
|
|
}
|
|
if (JSON.stringify(faqData.tags) !== JSON.stringify(existingFAQ.tags)) {
|
|
updatePayload.tags = faqData.tags;
|
|
}
|
|
if (JSON.stringify(faqData.globalTag) !== JSON.stringify(existingFAQ.globalTag)) {
|
|
updatePayload.globalTag = faqData.globalTag;
|
|
}
|
|
} else {
|
|
// Fallback: include all fields if we don't have original data
|
|
updatePayload.question = faqData.question.trim();
|
|
updatePayload.answer = faqData.answer.trim();
|
|
updatePayload.category = faqData.category;
|
|
updatePayload.tags = faqData.tags;
|
|
updatePayload.globalTag = faqData.globalTag;
|
|
}
|
|
|
|
console.log('PATCH payload:', updatePayload);
|
|
|
|
await updateFAQ(updatePayload).unwrap();
|
|
|
|
if (onClearAutoSave) {
|
|
onClearAutoSave();
|
|
}
|
|
|
|
toast.success('FAQ updated successfully');
|
|
onNavigate('/content/faqs');
|
|
} catch (error: any) {
|
|
console.error('Error updating FAQ:', error);
|
|
toast.error(error.data?.message || 'Failed to update FAQ. Please try again.');
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<AuthenticatedLayout
|
|
user={user}
|
|
onLogout={onLogout}
|
|
currentPath={`/content/faqs/edit/${faqId}`}
|
|
>
|
|
<div className="space-y-6 p-[0px] mt-[20px] mr-[20px] mb-[0px] ml-[20px]">
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => onNavigate('/content')}
|
|
className="min-h-[44px]"
|
|
disabled
|
|
>
|
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
Back to Content
|
|
</Button>
|
|
<div className="flex-1">
|
|
<div className="h-8 bg-muted rounded w-1/3 animate-pulse"></div>
|
|
<div className="h-4 bg-muted rounded w-1/2 mt-2 animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
{/* Loading skeleton */}
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|
|
|
|
if (error || !existingFAQ) {
|
|
return (
|
|
<AuthenticatedLayout
|
|
user={user}
|
|
onLogout={onLogout}
|
|
currentPath={`/content/faqs/edit/${faqId}`}
|
|
>
|
|
<div className="space-y-6 p-[0px] mt-[20px] mr-[20px] mb-[0px] ml-[20px]">
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => onNavigate('/content')}
|
|
className="min-h-[44px]"
|
|
>
|
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
Back to Content
|
|
</Button>
|
|
</div>
|
|
<Card>
|
|
<CardContent className="py-12">
|
|
<div className="text-center">
|
|
<div className="text-destructive text-lg font-semibold mb-2">
|
|
{error ? 'Error Loading FAQ' : 'FAQ Not Found'}
|
|
</div>
|
|
<Button
|
|
onClick={() => onNavigate('/content')}
|
|
variant="outline"
|
|
>
|
|
Back to Content
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<AuthenticatedLayout
|
|
user={user}
|
|
onLogout={onLogout}
|
|
currentPath={`/content/faqs/edit/${faqId}`}
|
|
>
|
|
<div className="space-y-6 p-[0px] mt-[20px] mr-[20px] mb-[0px] ml-[20px]">
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => onNavigate('/content')}
|
|
className="min-h-[44px] focus-visible:ring-2 focus-visible:ring-[var(--color-brand-primary)] focus-visible:ring-opacity-50"
|
|
>
|
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
Back to Content
|
|
</Button>
|
|
<div className="flex-1">
|
|
<h1>Edit FAQ</h1>
|
|
<p className="text-muted-foreground mt-1">
|
|
Update the frequently asked question
|
|
</p>
|
|
</div>
|
|
<Button
|
|
onClick={handleSave}
|
|
disabled={isUpdating}
|
|
className="min-h-[44px] focus-visible:ring-2 focus-visible:ring-[var(--color-brand-primary)] focus-visible:ring-opacity-50"
|
|
style={{ backgroundColor: "var(--color-brand-primary)" }}
|
|
>
|
|
<Save className="h-4 w-4 mr-2" />
|
|
{isUpdating ? 'Updating...' : 'Update FAQ'}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Main Content */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>FAQ Content</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="question">Question *</Label>
|
|
<Input
|
|
id="question"
|
|
value={faqData.question}
|
|
onChange={(e) => handleInputChange('question', e.target.value)}
|
|
placeholder="Enter the question"
|
|
className="min-h-[44px] focus-visible:ring-2 focus-visible:ring-[var(--color-brand-primary)] focus-visible:ring-opacity-50"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="answer">Answer *</Label>
|
|
<Textarea
|
|
id="answer"
|
|
value={faqData.answer}
|
|
onChange={(e) => handleInputChange('answer', e.target.value)}
|
|
placeholder="Enter the answer"
|
|
rows={6}
|
|
className="resize-y focus-visible:ring-2 focus-visible:ring-[var(--color-brand-primary)] focus-visible:ring-opacity-50"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="space-y-6">
|
|
{/* Category */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Category</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<select
|
|
value={faqData.category}
|
|
onChange={(e) => handleInputChange('category', e.target.value)}
|
|
className="w-full min-h-[44px] px-3 py-2 border border-input bg-background rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand-primary)] focus-visible:ring-opacity-50"
|
|
>
|
|
<option value="">Select category</option>
|
|
{categories.map(category => (
|
|
<option key={category} value={category}>{category}</option>
|
|
))}
|
|
</select>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Tags */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Tags</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex gap-2">
|
|
<Input
|
|
value={newTag}
|
|
onChange={(e) => setNewTag(e.target.value)}
|
|
placeholder="Add tag"
|
|
onKeyPress={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
addTag();
|
|
}
|
|
}}
|
|
className="min-h-[44px] focus-visible:ring-2 focus-visible:ring-[var(--color-brand-primary)] focus-visible:ring-opacity-50"
|
|
/>
|
|
<Button
|
|
type="button"
|
|
onClick={addTag}
|
|
variant="outline"
|
|
className="min-h-[44px] focus-visible:ring-2 focus-visible:ring-[var(--color-brand-primary)] focus-visible:ring-opacity-50"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{faqData.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{faqData.tags.map((tag) => (
|
|
<Badge
|
|
key={tag}
|
|
variant="secondary"
|
|
className="flex items-center gap-1"
|
|
>
|
|
{tag}
|
|
<X
|
|
className="h-3 w-3 cursor-pointer"
|
|
onClick={() => removeTag(tag)}
|
|
/>
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Global Tags */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Global Tags</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<Button
|
|
onClick={addGlobalTag}
|
|
variant="outline"
|
|
className="w-full min-h-[44px] focus-visible:ring-2 focus-visible:ring-[var(--color-brand-primary)] focus-visible:ring-opacity-50"
|
|
>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Add Global Tag
|
|
</Button>
|
|
|
|
{faqData.globalTag.length > 0 && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{faqData.globalTag.map((tag) => (
|
|
<Badge
|
|
key={tag}
|
|
variant="default"
|
|
className="flex items-center gap-1"
|
|
>
|
|
{tag}
|
|
<X
|
|
className="h-3 w-3 cursor-pointer"
|
|
onClick={() => removeGlobalTag(tag)}
|
|
/>
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* FAQ Info */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>FAQ Information</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="flex justify-between">
|
|
<span className="text-sm text-muted-foreground">FAQ ID</span>
|
|
<code className="text-xs bg-muted px-2 py-1 rounded">
|
|
{faqId}
|
|
</code>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-sm text-muted-foreground">Last Updated</span>
|
|
<span className="text-sm">
|
|
{existingFAQ.updatedAt ? new Date(existingFAQ.updatedAt).toLocaleDateString() : 'N/A'}
|
|
</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
} |