diff --git a/app/components/InvoiceEmail/DetailTable.tsx b/app/components/InvoiceEmail/DetailTable.tsx new file mode 100644 index 00000000..f6aad43d --- /dev/null +++ b/app/components/InvoiceEmail/DetailTable.tsx @@ -0,0 +1,42 @@ +import { Column, Heading, Row, Section, Text } from "@react-email/components"; + +interface Detail { + id: number; + label: string; + value: string; +} + +interface DetailTableProperties { + title: string; + text: string; + details: Detail[]; +} + +const DetailTable = ({ title, text, details }: DetailTableProperties) => { + return ( +
+ {title} + {text && {text}} + +
+ {details.map((detail) => ( + +
+ + {detail.label} + + + {detail.value} + +
+ + ))} +
+
+ ); +}; + +export default DetailTable; diff --git a/app/components/InvoiceEmail/EmailFooter.tsx b/app/components/InvoiceEmail/EmailFooter.tsx new file mode 100644 index 00000000..aa28ff5b --- /dev/null +++ b/app/components/InvoiceEmail/EmailFooter.tsx @@ -0,0 +1,59 @@ +import { Img, Link } from "@react-email/components"; + +export default function EmailFooter() { + return ( +
+
+
+ + + + + + + + + + + + + + + +
+

+ {`Thank you for choosing Boilerplate.com. 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 preference + + or + + Unsuscribe from this list. + + +

+
+
+ ); +} diff --git a/app/components/InvoiceEmail/OrderSummaryTable.tsx b/app/components/InvoiceEmail/OrderSummaryTable.tsx new file mode 100644 index 00000000..beb0cc69 --- /dev/null +++ b/app/components/InvoiceEmail/OrderSummaryTable.tsx @@ -0,0 +1,45 @@ +import { Column, Heading, Row, Section } from "@react-email/components"; + +interface OrderDetail { + id: number; + label: string; + value: string; + amt: string; +} + +interface OrderSummaryTableProperties { + title: string; + details: OrderDetail[]; +} + +const OrderSummaryTable = ({ title, details }: OrderSummaryTableProperties) => { + return ( +
+
+ {title} +
+
+ {details.map((detail) => ( + +
+ + {detail.label} + + + {detail.value} + + + {detail.amt} + +
+ + ))} +
+
+ ); +}; + +export default OrderSummaryTable; diff --git a/app/email/templates/invoice-email-temp/InvoiceEmail.tsx b/app/email/templates/invoice-email-temp/InvoiceEmail.tsx new file mode 100644 index 00000000..199b8cbf --- /dev/null +++ b/app/email/templates/invoice-email-temp/InvoiceEmail.tsx @@ -0,0 +1,167 @@ +import { + Body, + Button, + Container, + Head, + Heading, + Html, + Img, + Link, + Section, + Tailwind, + Text, +} from "@react-email/components"; + +import DetailTable from "~/components/InvoiceEmail/DetailTable"; +import EmailFooter from "~/components/InvoiceEmail/EmailFooter"; +import OrderSummaryTable from "~/components/InvoiceEmail/OrderSummaryTable"; +import { invoiceDetails, orderSummary, paymentDetails } from "./data"; + +interface infoProperties { + phone: string; + email: string; +} + +const InvoiceEmail = ({ + phone = "-456-7890", + email = "support@llaihng.com", +}: infoProperties) => { + return ( + <> + + + + + + + +
+ Logo +
+ +
+
+ money-transfer-invoice + + + Invoice + + + + Hi John Doe, + + + + We hope you are doing well. Thank you for your recent + purchase from Boilerplate. Please find your invoice attached + to this email. + +
+ +
+ + + + +
+ + + +
+
+ +
+ Have any questions about your order? + + Give us a call at (+234){phone} or Email us at {email} + + +
+ + Regards,
+ Boilerplate + + {/* Boilerplate */} +
+
+
+ + + + + + + + ); +}; + +export default InvoiceEmail; diff --git a/app/email/templates/invoice-email-temp/data.ts b/app/email/templates/invoice-email-temp/data.ts new file mode 100644 index 00000000..8f3afc61 --- /dev/null +++ b/app/email/templates/invoice-email-temp/data.ts @@ -0,0 +1,33 @@ +export interface Detail { + id: number; + label: string; + value: string; +} + +export const invoiceDetails: Detail[] = [ + { id: 1, label: "Invoice Number", value: "#EJ78465" }, + { id: 2, label: "Date of Issue", value: "July 17, 2024" }, + { id: 3, label: "Due Date", value: "July 19, 2024" }, +]; + +export const paymentDetails: Detail[] = [ + { id: 1, label: "Amount", value: "$352" }, + { id: 2, label: "Payment Method", value: "Bank" }, + { id: 3, label: "Bank Name", value: " United Bank of Africa" }, + { id: 4, label: "Account Number", value: "2108689490" }, + { id: 5, label: "Account Name", value: "John Doe" }, +]; + +export interface OrderDetail { + id: number; + label: string; + value: string; + amt: string; +} + +export const orderSummary: OrderDetail[] = [ + { id: 1, label: "Item", value: "5", amt: "$450.00" }, + { id: 2, label: "Item", value: "5", amt: "$50.00" }, + { id: 3, label: "VAT", value: "10%", amt: "$500.00" }, + { id: 4, label: "TOTAL", value: "100%", amt: "$500.00" }, +]; diff --git a/app/root.tsx b/app/root.tsx index 620cea3a..858cab2f 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -6,12 +6,10 @@ import { Outlet, Scripts, ScrollRestoration, - useLocation, } from "@remix-run/react"; import type { ReactNode } from "react"; -import FooterLight from "./components/ui/footerLight"; -import Header from "./components/ui/header"; +import { AdminSideNavBar } from "./components/SuperAdminSideBar/SuperAdminSideNavBar"; import styles from "./styles/global.css?url"; export const links: LinksFunction = () => [ @@ -20,9 +18,6 @@ export const links: LinksFunction = () => [ ]; export function Layout({ children }: { children: ReactNode }) { - const location = useLocation(); - const pagesWithNoFooter = ["/dashboard/password-settings"]; - const showFooter = !pagesWithNoFooter.includes(location.pathname); return ( @@ -32,12 +27,9 @@ export function Layout({ children }: { children: ReactNode }) { -
-
-
- {children} - {showFooter && } -
+
+ +
{children}
,
diff --git a/public/icons/instagram.svg b/public/icons/instagram.svg index 36c53509..ec15ec02 100644 --- a/public/icons/instagram.svg +++ b/public/icons/instagram.svg @@ -1,3 +1,14 @@ - - - + + + + + + + + + + + + + + diff --git a/public/icons/linkedin.svg b/public/icons/linkedin.svg new file mode 100644 index 00000000..02279114 --- /dev/null +++ b/public/icons/linkedin.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/public/icons/reddit.svg b/public/icons/reddit.svg new file mode 100644 index 00000000..5aa503cf --- /dev/null +++ b/public/icons/reddit.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/tiktok.svg b/public/icons/tiktok.svg new file mode 100644 index 00000000..070fe2e7 --- /dev/null +++ b/public/icons/tiktok.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/icons/x.svg b/public/icons/x.svg new file mode 100644 index 00000000..8c952530 --- /dev/null +++ b/public/icons/x.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/logo-text.svg b/public/images/logo-text.svg new file mode 100644 index 00000000..aee56164 --- /dev/null +++ b/public/images/logo-text.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/money-transfer-email.png b/public/images/money-transfer-email.png new file mode 100644 index 00000000..b1ec25f8 Binary files /dev/null and b/public/images/money-transfer-email.png differ