From 83694ac993055addab7ebe6c4bd8e6157cff23f8 Mon Sep 17 00:00:00 2001 From: Qodemi Date: Sun, 21 Jul 2024 17:07:57 +0100 Subject: [PATCH] Add account deactivation email template and header component --- .../email-deactivation-template/Body.tsx | 84 +++++++++++++++++ .../email-deactivation-template/Footer.tsx | 38 ++++++++ .../email-deactivation-template/Header.tsx | 20 +++++ app/routes/account-deactivation-email.tsx | 90 +++++++++++++++++++ public/Logo.svg | 6 ++ public/dis.svg | 3 + public/error.svg | 9 ++ public/ig.svg | 12 +++ public/in.svg | 10 +++ public/tt.svg | 3 + public/x.svg | 3 + 11 files changed, 278 insertions(+) create mode 100644 app/components/email-deactivation-template/Body.tsx create mode 100644 app/components/email-deactivation-template/Footer.tsx create mode 100644 app/components/email-deactivation-template/Header.tsx create mode 100644 app/routes/account-deactivation-email.tsx create mode 100644 public/Logo.svg create mode 100644 public/dis.svg create mode 100644 public/error.svg create mode 100644 public/ig.svg create mode 100644 public/in.svg create mode 100644 public/tt.svg create mode 100644 public/x.svg diff --git a/app/components/email-deactivation-template/Body.tsx b/app/components/email-deactivation-template/Body.tsx new file mode 100644 index 00000000..82a594d7 --- /dev/null +++ b/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 = ({ name, email, lastActive, deactivationDate, supportEmail, title, supportPhone, image }) => ( +
+ + Error icon + +

{title}

+ +
+

Hi {name},

+

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.

+ +

Your deactivation details:

+ +
    +
  • Account Email: {email}
    • +
  • Last Active: {lastActive}
    • +
  • Deactivation Date: {deactivationDate}
    • +
+ +

If you would like to re-activate your account, you can easily do so by contacting our support team via the details below:

+

Give us a call at {supportPhone} or shoot us an email at {supportEmail}

+

We value your membership and would love to have you back.

+ +
+ +
+

+ Regards,
+ Boilerplate +

+
+ + + +
+); + +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 = ({ name, email, lastActive, deactivationDate, supportEmail, supportPhone }) => ( +//
+//

Hi {name},

+//

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.

+//

Your deactivation details:

+//
    +//
  • Account Email: {email}
    • +//
  • Last Active: {lastActive}
    • +//
  • Deactivation Date: {deactivationDate}
    • +//
+//

If you would like to re-activate your account, you can easily do so by contacting our support team via the details below:

+//

+// Email: {supportEmail} +//
+// Phone: {supportPhone} +//

+//
+// ); + +// export default Body; diff --git a/app/components/email-deactivation-template/Footer.tsx b/app/components/email-deactivation-template/Footer.tsx new file mode 100644 index 00000000..dbb54563 --- /dev/null +++ b/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 = ({ lin, x, ig, disc, tt }) => ( +
+ +
+
+ social icon + social icon + social icon + social icon + social icon +
+ + +

Thank you for choosing our service. Need help? Contact our customer support

+ +
+ +
+ +
+

You are receiving this email because you signed up at Boilerplate.com. Want to change how you receive these emails?

+

You can update your preferences or unsubscribe from this list.

+
+ +
+); + +export default Footer; diff --git a/app/components/email-deactivation-template/Header.tsx b/app/components/email-deactivation-template/Header.tsx new file mode 100644 index 00000000..d00ca549 --- /dev/null +++ b/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 = ({ logo, cname }) => ( +
+ Company Logo + + +

{cname}

+
+); + +export default Header; + + diff --git a/app/routes/account-deactivation-email.tsx b/app/routes/account-deactivation-email.tsx new file mode 100644 index 00000000..ec0a7ca9 --- /dev/null +++ b/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: "johndoe@gmail.com", + lastActive: "17th June, 2024 / 11:56pm", + deactivationDate: "20th July, 2024 / 11:56pm", + supportEmail: "support@boilerplate.com", + supportPhone: "+234-456-7890", + }); +}; + +export default function AccountDeactivationEmailRoute() { + const data = useLoaderData(); + + return ( +
+
+ +
+
+ ); +} + + + + +// 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: "johndoe@gmail.com", +// lastActive: "17th June, 2024 / 11:56pm", +// deactivationDate: "20th July, 2024 / 11:56pm", +// supportEmail: "support@boilerplate.com", +// supportPhone: "+234-456-7890", +// }); +// }; + +// export default function AccountDeactivationEmailRoute() { +// const data = useLoaderData(); + +// return ( +//
+//
+// +//
+//
+// ); +// } + diff --git a/public/Logo.svg b/public/Logo.svg new file mode 100644 index 00000000..3f328263 --- /dev/null +++ b/public/Logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/dis.svg b/public/dis.svg new file mode 100644 index 00000000..6573bc52 --- /dev/null +++ b/public/dis.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/error.svg b/public/error.svg new file mode 100644 index 00000000..9e857c21 --- /dev/null +++ b/public/error.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/ig.svg b/public/ig.svg new file mode 100644 index 00000000..9caf0697 --- /dev/null +++ b/public/ig.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/in.svg b/public/in.svg new file mode 100644 index 00000000..47384e62 --- /dev/null +++ b/public/in.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/tt.svg b/public/tt.svg new file mode 100644 index 00000000..82558cf5 --- /dev/null +++ b/public/tt.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/x.svg b/public/x.svg new file mode 100644 index 00000000..b0d4f709 --- /dev/null +++ b/public/x.svg @@ -0,0 +1,3 @@ + + +