Refactor/restructure email templates

src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/preview-card/index.tsx

@@ -1,8 +1,12 @@
 const PreviewCard = () => {
+  // @kinxlo IS CURRENTLY WORKING ON THIS FIX 👍.
   return (
     <div className="h-full min-h-[700px] w-full max-w-[447px] rounded-[19px] border-[1px] border-border bg-background p-5 transition-all duration-300">
       <div className="h-full w-full rounded-[7px] border-[1px] border-border bg-white p-4">
-        <div className="h-full w-full rounded-[7px] border-[1px] border-border"></div>
+        <div className="h-full w-full rounded-[7px] border-[1px] border-border">
+          hi guys, @Guy in A Chair is currently working on this component
+          responsivess 👍
+        </div>
       </div>
     </div>
   );

src/app/dashboard/(admin)/admin/email/generate-with-html/_components/generate-field/generate-field.tsx

@@ -14,9 +14,7 @@ const GenerateField = () => {
         isButtonVisible={true}
         buttonContent="Generate"
         onButtonClick={() =>
-          router.push(
-            "/dashboard/admin/email/generate-with-html/preview-template",
-          )
+          router.push("/admin/email/generate-with-html/preview-template")
         }
       />
     </div>

src/app/dashboard/(admin)/admin/email/generate-with-html/preview-template/_component.tsx/TemplateViewer.tsx

@@ -1,21 +1,25 @@
-import React, { useEffect, useRef, useState } from "react";
+import { usePathname } from "next/navigation";
+import React, { ReactNode, useEffect, useRef, useState } from "react";
 
 interface PreviewComponentProperties {
-  template?: string;
+  template?: string | ReactNode;
   mode?: "preview" | "edit";
   onEdit?: (content: string) => void;
 }
 
 const TemplateViewer: React.FC<PreviewComponentProperties> = ({
-  template = "",
+  template,
   mode = "preview",
   onEdit,
 }) => {
-  const [content, setContent] = useState<string>(template);
+  const [content, setContent] = useState<string>(template as string);
   const contentReference = useRef<HTMLTextAreaElement>(null);
+  const pathname = usePathname();
 
   useEffect(() => {
-    setContent(template);
+    if (typeof template === "string") {
+      setContent(template);
+    }
   }, [template]);
 
   useEffect(() => {
@@ -28,8 +32,10 @@ const TemplateViewer: React.FC<PreviewComponentProperties> = ({
     event: React.ChangeEvent<HTMLTextAreaElement>,
   ) => {
     const newContent = event.target.value;
-    setContent(newContent);
-    onEdit?.(newContent);
+    if (newContent !== content) {
+      setContent(newContent);
+      onEdit?.(newContent);
+    }
   };
 
   return (
@@ -41,7 +47,7 @@ const TemplateViewer: React.FC<PreviewComponentProperties> = ({
         data-testid="scroll-container"
         className="relative overflow-y-auto rounded-lg lg:max-h-[719px]"
       >
-        <div className="flex w-[98%] items-center justify-center overflow-auto rounded-lg border border-[#CBD5E1] bg-white p-[1rem] lg:p-[3rem]">
+        <div className="flex w-[98%] items-center justify-center overflow-auto rounded-lg border border-[#CBD5E1] bg-white p-[1rem]">
           {mode === "edit" ? (
             <textarea
               style={{ scrollbarWidth: "none" }}
@@ -53,10 +59,16 @@ const TemplateViewer: React.FC<PreviewComponentProperties> = ({
             />
           ) : (
             <div
-              data-testid="template-content"
-              dangerouslySetInnerHTML={{ __html: content }}
-              className="h-full w-fit"
-            />
+              className={
+                pathname?.includes("preview-template") ? `my-[48px]` : undefined
+              }
+            >
+              <div
+                data-testid="template-content"
+                dangerouslySetInnerHTML={{ __html: content }}
+                className="h-full w-fit"
+              />
+            </div>
           )}
         </div>
       </div>

src/app/dashboard/(admin)/admin/email/generate-with-html/preview-template/_component.tsx/index.tsx

@@ -1,15 +1,35 @@
 "use client";
 
 import { useState } from "react";
+import { renderToString } from "react-dom/server";
 
 import { Button } from "~/components/common/common-button";
+import AccountActivationSuccessful from "~/email/templates/account-activation-successful/image";
 import PageHeader from "../../../_components/page-header";
-import { templateOne } from "./template-example";
 import TemplateViewer from "./TemplateViewer";
 
 const HtmlTemplateViewer = () => {
-  const [template, setTemplate] = useState<string>(templateOne);
+  // Define the props for the component
+  const previewProperties = {
+    title: "Your Account is Now Active!",
+    username: "John Doe",
+    image: "https://imgur.com/3Yymb22.png",
+    link: "/",
+    description:
+      "Congratulations! Your account with Boilerplate is now active and ready to use.",
+    descriptionOne:
+      "We're thrilled to have you as part of our community and look forward to helping you make the most out of your experience with us.",
+    descriptionTwo:
+      "You can now log in and start exploring all the features and benefits we have to offer. ",
+  };
+
+  // Convert the React component to a string with the props
+  // eslint-disable-next-line testing-library/render-result-naming-convention
+  const welcomeEmailString = renderToString(
+    <AccountActivationSuccessful {...previewProperties} />,
+  );
 
+  const [template, setTemplate] = useState<string>(welcomeEmailString);
   const [mode, setMode] = useState<"preview" | "edit">("preview");
 
   const toggleMode = () => {