feat: add success dialog for form submission and update typography and spacing for HTML display and editor components

app/form/client.tsx

@@ -162,6 +162,7 @@ export function FormFillerClient({ form, questions, initialAnswers = {} }: FormF
   }, [form.id, initialAnswers, questions]);
 
   const [otherValues, setOtherValues] = useState<Record<string, string>>(initialOtherValues);
+  const [showSuccessDialog, setShowSuccessDialog] = useState(false);
 
   const methods = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -208,7 +209,12 @@ export function FormFillerClient({ form, questions, initialAnswers = {} }: FormF
 
       const res = await submitForm(form.id, formattedAnswers);
       if (res.ok) {
-        toast.success(isUpdating ? "อัปเดตฟอร์มสำเร็จ!" : "ส่งฟอร์มสำเร็จ!");
+        if (isUpdating) {
+          toast.success("อัปเดตฟอร์มสำเร็จ!");
+        } else {
+          setShowSuccessDialog(true);
+          router.refresh();
+        }
       }
     } catch (err: any) {
       console.error(err);
@@ -468,7 +474,11 @@ export function FormFillerClient({ form, questions, initialAnswers = {} }: FormF
                 </AlertDialogContent>
               </AlertDialog>
             )}
-            <Button type="submit" disabled={isSubmitting || !form.isOpen} className="min-w-28">
+            <Button 
+              type="submit" 
+              disabled={isSubmitting || !form.isOpen} 
+              className={cn("min-w-28", isUpdating && "bg-green-600 hover:bg-green-700")}
+            >
               {isSubmitting ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -483,6 +493,22 @@ export function FormFillerClient({ form, questions, initialAnswers = {} }: FormF
           </div>
         </form>
       </Form>
+
+      <AlertDialog open={showSuccessDialog} onOpenChange={setShowSuccessDialog}>
+        <AlertDialogContent >
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-2xl text-center font-bold text-primary">ส่งฟอร์มสำเร็จ!</AlertDialogTitle>
+            <AlertDialogDescription >
+              กดอีกครั้งเพื่ออัพเดทคำตอบของคุณ!
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter >
+            <AlertDialogAction onClick={() => setShowSuccessDialog(false)} className="w-full font-bold">
+              ตกลง
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }