Create a Account deactivation by inactivity email template Issue#72

app/components/email-deactivation-template/Body.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+interface BodyProps {
+  name: string;
+  email: string;
+  lastActive: string;
+  deactivationDate: string;
+  supportEmail: string;
+  supportPhone: string;
+  image: string;
+  title: string;
+}
+
+const Body: React.FC<BodyProps> = ({ name, email, lastActive, deactivationDate, supportEmail, title, supportPhone, image }) => (
+  <div className="w-full ">
+
+    <img src={image} alt="Error icon" className="w-1/12 img-width mx-auto my-12" />
+
+    <h2 className='text-lg text-center font-bold my-8'>{title}</h2>
+
+        <div className='w-4/5 mx-auto my-12'>
+            <p className="mb-4">Hi {name},</p>
+            <p className="mb-4">We hope this email finds you well. We wanted to inform you that your account has been deactivated due to a prolonged period of inactivity.</p>
+
+            <h2 className="text-lg font-semibold mb-2">Your deactivation details:</h2>
+
+            <ul className="list-disc ml-5 mb-4">
+              <li>Account Email: {email}</li>
+              <li>Last Active: {lastActive}</li>
+              <li>Deactivation Date: {deactivationDate}</li>
+            </ul>
+
+            <p className="mb-4">If you would like to re-activate your account, you can easily do so by contacting our support team via the details below:</p>
+            <p className="mb-4">Give us a call at {supportPhone} or shoot us an email at <a href={`mailto:${supportEmail}`} className="text-blue-600 underline">{supportEmail}</a></p>
+            <p>We value your membership and would love to have you back.</p>
+
+        </div>
+
+    <div className='salute  w-4/5 mx-auto mb-4'>
+      <p className='line-height-5'>
+      Regards, <br />
+      Boilerplate
+      </p>
+    </div>
+
+
+
+  </div>
+);
+
+export default Body;
+
+
+// import React from 'react';
+
+// interface BodyProps {
+//   name: string;
+//   email: string;
+//   lastActive: string;
+//   deactivationDate: string;
+//   supportEmail: string;
+//   supportPhone: string;
+// }
+
+// const Body: React.FC<BodyProps> = ({ name, email, lastActive, deactivationDate, supportEmail, supportPhone }) => (
+//   <div className="p-6">
+//     <p className="mb-4">Hi {name},</p>
+//     <p className="mb-4">We hope this email finds you well. We wanted to inform you that your account has been deactivated due to a prolonged period of inactivity.</p>
+//     <h2 className="text-lg font-semibold mb-2">Your deactivation details:</h2>
+//     <ul className="list-disc ml-5 mb-4">
+//       <li>Account Email: {email}</li>
+//       <li>Last Active: {lastActive}</li>
+//       <li>Deactivation Date: {deactivationDate}</li>
+//     </ul>
+//     <p className="mb-4">If you would like to re-activate your account, you can easily do so by contacting our support team via the details below:</p>
+//     <p className="mb-4">
+//       Email: <a href={`mailto:${supportEmail}`} className="text-blue-600 underline">{supportEmail}</a>
+//       <br />
+//       Phone: {supportPhone}
+//     </p>
+//   </div>
+// );
+
+// export default Body;

app/components/email-deactivation-template/Footer.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface FooterProps {
+  lin: string;
+  x: string;
+  ig: string;
+  disc: string;
+  tt: string;
+}
+
+const Footer: React.FC<FooterProps> = ({ lin, x, ig, disc, tt }) => (
+  <div className="w-full mx-auto py-8  bg-gray-100">
+
+    <div className='w-4/5 mx-auto py-6'>
+        <div className="space-x-4 w-3/5 flex justify-center mx-auto my-12">
+          <a href="https://facebook.com" className="text-blue-600"><img src={x} alt="social icon" className="w-5 img-width" /></a>
+          <a href="https://facebook.com" className="text-blue-600"><img src={ig} alt="social icon" className="w-5 img-width" /></a>
+          <a href="https://facebook.com" className="text-blue-600"><img src={tt} alt="social icon" className="w-5 img-width" /></a>
+          <a href="https://facebook.com" className="text-blue-600"><img src={disc} alt="social icon" className="w-5 img-width" /></a>
+          <a href="https://facebook.com" className="text-blue-600"><img src={lin} alt="social icon" className="w-5 img-width" /></a>
+        </div>
+
+
+        <p className="my-8">Thank you for choosing our service. Need help? <a href="https://example.com/support" className="text-blue-600 underline">Contact our customer support</a></p>
+
+    </div>
+
+    <hr />
+
+    <div className='w-4/5 mx-auto py-6'>
+      <p className='py-4'>You are receiving this email because you signed up at Boilerplate.com. Want to change how you receive these emails?</p>
+      <p className='py-4'>You can update your preferences or unsubscribe from this list.</p>
+    </div>
+
+  </div>
+);
+
+export default Footer;

app/components/email-deactivation-template/Header.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+// import Icons from './Icons';
+
+interface HeaderProps {
+  logo: string;
+  cname: string;
+}
+
+const Header: React.FC<HeaderProps> = ({ logo, cname }) => (
+  <div className="text-center w-full flex items-center gap-2 justify-center py-8 bg-gray-100">
+    <img src={logo} alt="Company Logo" className="w-5 img-width" />
+
+
+    <h1 className="text-xl font-bold ">{cname}</h1>
+  </div>
+);
+
+export default Header;
+
+

app/routes/account-deactivation-email.tsx

@@ -0,0 +1,90 @@
+import { json } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+import Header from "../components/email-deactivation-template/Header";
+import Body from "../components/email-deactivation-template/Body";
+import Footer from "../components/email-deactivation-template/Footer";
+
+export let loader = async () => {
+  return json({
+    cname: "Boilerplate",
+    title: "Account Deactivated Due To Inactivity",
+    name: "John Doe",
+    image: "../public/error.svg",
+    logo: "../public/Logo.svg",
+
+    lin: "../public/in.svg",
+    ig: "../public/ig.svg",
+    x: "../public/x.svg",
+    disc: "../public/dis.svg",
+    tt: "../public/tt.svg",
+
+    email: "[email protected]",
+    lastActive: "17th June, 2024 / 11:56pm",
+    deactivationDate: "20th July, 2024 / 11:56pm",
+    supportEmail: "[email protected]",
+    supportPhone: "+234-456-7890",
+  });
+};
+
+export default function AccountDeactivationEmailRoute() {
+  const data = useLoaderData<typeof loader>();
+
+  return (
+    <div className="email-container mx-auto  ">
+      <Header logo={data.logo} cname={data.cname} />
+      <Body
+        name={data.name}
+        image={data.image}
+        email={data.email}
+        title={data.title}
+        lastActive={data.lastActive}
+        deactivationDate={data.deactivationDate}
+        supportEmail={data.supportEmail}
+        supportPhone={data.supportPhone}
+      />
+      <Footer lin={data.lin} ig={data.ig} x={data.x} disc={data.disc} tt={data.tt} />
+    </div>
+  );
+}
+
+
+
+
+// import { json } from "@remix-run/node";
+// import { useLoaderData } from "@remix-run/react";
+// import Header from "~/components/email/Header";
+// import Body from "~/components/email/Body";
+// import Footer from "~/components/email/Footer";
+
+// export let loader = async () => {
+//   return json({
+//     title: "Account Deactivated Due To Inactivity",
+//     name: "John Doe",
+//     image: "/assets/images/logo.png", // Update the path
+//     email: "[email protected]",
+//     lastActive: "17th June, 2024 / 11:56pm",
+//     deactivationDate: "20th July, 2024 / 11:56pm",
+//     supportEmail: "[email protected]",
+//     supportPhone: "+234-456-7890",
+//   });
+// };
+
+// export default function AccountDeactivationEmailRoute() {
+//   const data = useLoaderData<typeof loader>();
+
+//   return (
+//     <div className="email-container mx-auto p-4 sm:p-6 md:p-8 lg:p-10">
+//       <Header image={data.image} title={data.title} />
+//       <Body
+//         name={data.name}
+//         email={data.email}
+//         lastActive={data.lastActive}
+//         deactivationDate={data.deactivationDate}
+//         supportEmail={data.supportEmail}
+//         supportPhone={data.supportPhone}
+//       />
+//       <Footer />
+//     </div>
+//   );
+// }
+