client email working, need self email still

This commit is contained in:
Jacob Delgado 2024-08-29 02:56:32 -07:00
parent e5ed0ef29d
commit a75956c569
10 changed files with 72 additions and 28 deletions

Binary file not shown.

View File

@ -100,7 +100,7 @@ def upload():
@app.route("/mail", methods=["POST"]) @app.route("/mail", methods=["POST"])
def mail(): def mail():
email = request.json["email"] email = request.json["senderEmail"]
password = request.json["password"] password = request.json["password"]
order = request.json["order"] order = request.json["order"]
@ -130,7 +130,7 @@ def serve_image(filename):
# New Orders # New Orders
@app.route("/new-order", methods=["POST"]) @app.route("/new-order", methods=["POST"])
def register_user(): def register_user():
email = request.json["email"] email = request.json["senderEmail"]
order = request.json["order"] order = request.json["order"]
new_order= Orders(email=email, order=order) new_order= Orders(email=email, order=order)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 243 KiB

View File

@ -29,16 +29,6 @@
"favorite": "no", "favorite": "no",
"description": "It's not an option.." "description": "It's not an option.."
}, },
{
"id": 4,
"name": "Mockup 113",
"photo": "batch1/Mockup 113.jpg",
"price": 25,
"size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL",
"inStock": "yes",
"favorite": "no",
"description": "It's not an option.."
},
{ {
"id": 5, "id": 5,
"name": "design 6 update-01", "name": "design 6 update-01",

View File

@ -2,7 +2,7 @@
import { Resend } from "resend" import { Resend } from "resend"
import { validateString } from "@/lib/utils"; import { validateString } from "@/lib/utils";
import OrderFormEmail from "../emailTemplates/order-form-email"; import OrderFormEmailClient from "../emailTemplates/order-form-email-client";
import React from "react"; import React from "react";
import 'dotenv/config'; import 'dotenv/config';
@ -32,11 +32,12 @@ export const sendEmail = async (formData: FormData) => {
try { try {
await resend.emails.send({ await resend.emails.send({
from:"Order Form <orders@kevosattire.com>", from:"Order Form <orders@kevosattire.com>",
to:"arcjcb11@gmail.com", // to:"arcjcb11@gmail.com",
to: senderEmail as string,
subject: "New Order", subject: "New Order",
reply_to: senderEmail as string, // reply_to: senderEmail as string,
// text: message as string, // text: message as string,
react: React.createElement(OrderFormEmail, {order: order as string, senderEmail: senderEmail as string}), react: React.createElement(OrderFormEmailClient, {order: order as string, senderEmail: senderEmail as string}),
}); });
} catch (error: unknown){ } catch (error: unknown){
return console.log(error) return console.log(error)

View File

@ -2,20 +2,20 @@ import { sendEmail } from "@/lib/mail.utils"
export async function POST() { export async function POST() {
const sender = { const sender = {
name: 'My App', name: 'Kevos Official',
address: 'no-reply@kevosattire.com', address: 'no-reply@kevosattire.com',
} }
const recipients = [{ const recipients = [{
name: 'John Doe', name: 'Fernando Delgado',
address: 'fernando.delgado@kevosattire.com', address: 'arcjcb11@gmail.com',
}] }]
try{ try{
const result = await sendEmail({ const result = await sendEmail({
sender, sender,
recipients, recipients,
subject: "Thank you for placing an order with us!", subject: "New Email!",
message: "We will follow up with a Paypal invoice soon!" message: "We will follow up with a Paypal invoice soon!"
}) })

View File

@ -0,0 +1,38 @@
import React from "react";
import {
Html,
Body,
Head,
Heading,
Hr,
Container,
Preview,
Section,
Text,
} from "@react-email/components";
import { Tailwind } from "@react-email/tailwind";
type OrderFormEmailProps = {
order: string;
senderEmail: string;
};
export default function OrderFormEmailClient({ order, senderEmail }: OrderFormEmailProps) {
return (
<Html>
<Head />
<Preview>New order from kevo&apos;s attire.</Preview>
<Tailwind>
<Body className="bg-slate-700">
<Container>
<Section className="bg-white border-black my-10 px-10 py-4 rounded-md">
<Heading className="leading-tight">Thank you for ordering with us! We will be sending a PayPal invoice shortly in order to process your order.</Heading>
<Text>{order}</Text>
<Hr />
</Section>
</Container>
</Body>
</Tailwind>
</Html>
);
}

View File

@ -9,7 +9,7 @@ import ClientPortal from "@/components/ClientPortal/ClientPortal";
import styles from "@/styles/Home.module.css"; import styles from "@/styles/Home.module.css";
import { Poppins } from "next/font/google"; import { Poppins } from "next/font/google";
import { sendEmail } from "./actions/sendEmail"; import { sendEmail } from "./actions/sendEmail";
import { createEmptyCacheNode } from "next/dist/client/components/app-router"; import { selfEmail } from "./api/emails/route";
const Popp = Poppins({ weight: "400", subsets: ["latin"] }); const Popp = Poppins({ weight: "400", subsets: ["latin"] });
@ -32,6 +32,13 @@ export default function Home() {
// console.log(JSON.stringify(payload)) // console.log(JSON.stringify(payload))
// console.log({email:formData.get("email"), order:formData.get("order")}) // console.log({email:formData.get("email"), order:formData.get("order")})
// Send client email
// await sendEmail(formData);
// Send new order email to self
// await selfEmail(formData);
// const response = await fetch("http://192.168.50.107:5580/new-order", { // const response = await fetch("http://192.168.50.107:5580/new-order", {
const response = await fetch("http://localhost:5080/new-order", { const response = await fetch("http://localhost:5080/new-order", {
method: "POST", method: "POST",
@ -41,9 +48,9 @@ export default function Home() {
body: JSON.stringify(payload), body: JSON.stringify(payload),
}) })
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { // .then((data) => {
console.log(data); // console.log(data);
}) // })
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
}); });
@ -53,6 +60,7 @@ export default function Home() {
emails: "", emails: "",
orders: "", orders: "",
}); });
alert("Order Placed! Please check your email.")
} }
return ( return (
@ -61,7 +69,10 @@ export default function Home() {
<div className="text-4xl w-full justify-center text-center items-center flex flex-col gap-4 py-12 font-medium text-orange-600"> <div className="text-4xl w-full justify-center text-center items-center flex flex-col gap-4 py-12 font-medium text-orange-600">
<span className={`${Popp.className}`}>Kevo&#39;s Attire</span> <span className={`${Popp.className}`}>Kevo&#39;s Attire</span>
<div className={`${Popp.className} text-orange-600 text-center`}> <div className={`${Popp.className} text-orange-600 text-center`}>
All sizes - $25 <p>All sizes - $25</p>
</div>
<div className={`${Popp.className} text-orange-600 text-center`}>
<p>Youth-S/M/L/2XL - Adult-S/M/L/2XL</p>
</div> </div>
</div> </div>
@ -89,8 +100,8 @@ export default function Home() {
required required
maxLength={500} maxLength={500}
placeholder="Your email" placeholder="Your email"
// name="senderEmail" name="senderEmail"
name="email" // name="email"
/> />
<textarea <textarea

View File

@ -49,7 +49,7 @@ const MenuCard = ({ Menu }: any) => {
<h4 <h4
className={`pt-2 float-left ${Popp.className} flex-wrap w-3/4 text-[#EEEEEE]`} className={`pt-2 float-left ${Popp.className} flex-wrap w-3/4 text-[#EEEEEE]`}
> >
<strong>{menu_item.id}</strong> <span>{menu_item.description}</span>
</h4> </h4>
<div className="right-2 absolute h-[25px] flex flex-row w-1/4 mt-2 text-[#7B9922]"> <div className="right-2 absolute h-[25px] flex flex-row w-1/4 mt-2 text-[#7B9922]">
{menu_item.inStock === "yes" ? ( {menu_item.inStock === "yes" ? (

View File

@ -1,6 +1,7 @@
import nodemailer from "nodemailer"; import nodemailer from "nodemailer";
import Mail from "nodemailer/lib/mailer"; import Mail from "nodemailer/lib/mailer";
import SMTPTransport from "nodemailer/lib/smtp-transport"; import SMTPTransport from "nodemailer/lib/smtp-transport";
import * as React from 'react';
const transport = nodemailer.createTransport({ const transport = nodemailer.createTransport({
host: process.env.MAIL_HOST, host: process.env.MAIL_HOST,
@ -17,6 +18,7 @@ type SendEmailDto = {
recipients: Mail.Address[], recipients: Mail.Address[],
subject: string; subject: string;
message: string; message: string;
// react: React.ReactNode;
} }
export const sendEmail = async (dto: SendEmailDto) => { export const sendEmail = async (dto: SendEmailDto) => {
const { sender, recipients, subject, message} = dto; const { sender, recipients, subject, message} = dto;
@ -24,7 +26,9 @@ export const sendEmail = async (dto: SendEmailDto) => {
return await transport.sendMail({ return await transport.sendMail({
from: sender, from: sender,
to: recipients, to: recipients,
subject: subject,
html: message, html: message,
text: message, text: message,
// react: react,
}) })
} }