an unexpected error ocurred when trying to save the template

src/app/admin/settings/email-templates/page.tsx

@@ -28,7 +28,7 @@ function EmailPreview({ template }: { template: EmailTemplate }) {
             <p class="text-2xl font-bold">[Ready-Made Hours]+ hours</p>
         </div>
     </div>`
-  ).replace(/\n/g, '<br />');
+  ).replace('[User Name]', 'Valued Customer').replace(/\n/g, '<br />');
 
   return (
     <div className="w-full rounded-lg border bg-muted p-6">
@@ -43,6 +43,7 @@ function EmailPreview({ template }: { template: EmailTemplate }) {
 export default function EmailTemplatesPage() {
   const [isEditing, setIsEditing] = useState(false);
   const [template, setTemplate] = useState<EmailTemplate>({ subject: '', body: '' });
+  const [originalTemplate, setOriginalTemplate] = useState<EmailTemplate>({ subject: '', body: '' });
   const [isLoading, setIsLoading] = useState(true);
   const { toast } = useToast();
 
@@ -53,6 +54,7 @@ export default function EmailTemplatesPage() {
         const fetchedTemplate = await getEmailTemplate();
         if (fetchedTemplate) {
           setTemplate(fetchedTemplate);
+          setOriginalTemplate(fetchedTemplate);
         } else {
            throw new Error('Could not find email template.');
         }
@@ -69,6 +71,11 @@ export default function EmailTemplatesPage() {
     fetchTemplate();
   }, [toast]);
 
+  const handleCancel = () => {
+    setTemplate(originalTemplate);
+    setIsEditing(false);
+  };
+
   const handleSave = async () => {
     try {
       const result = await updateEmailTemplate(template);
@@ -77,6 +84,7 @@ export default function EmailTemplatesPage() {
           title: 'Success',
           description: 'Email template updated successfully.',
         });
+        setOriginalTemplate(template);
         setIsEditing(false);
       } else {
         throw new Error(result.message);
@@ -109,7 +117,7 @@ export default function EmailTemplatesPage() {
               <Button variant="outline" onClick={() => setIsEditing(true)}>Edit Template</Button>
             ) : (
                 <div className="flex gap-2">
-                    <Button variant="outline" onClick={() => setIsEditing(false)}>Cancel</Button>
+                    <Button variant="outline" onClick={handleCancel}>Cancel</Button>
                     <Button onClick={handleSave}>Save Changes</Button>
                 </div>
             )}