I cant manage to send a mail of the summary and client info.
import React, { useState } from 'react';
import axios from "axios";
import "./Cp.css";
const CheckoutPage = ({ products, total }) => {
const handleDeliveryOptionChange = (event) => {
setDeliveryOption(event.target.value);
};
const handleAddressChange = (event) => {
setAddress(event.target.value);
};
const handlePaymentOptionChange = (event) => {
setPaymentOption(event.target.value);
};
const [email, setEmail] = useState();
const [name, setName] = useState();
const [phone, setPhone] = useState();
const [deliveryOption, setDeliveryOption] = useState();
const [address, setAddress] = useState();
const [paymentOption, setPaymentOption] = useState();
const sendMail = () => {
console.log({
name, email, phone, deliveryOption, address, paymentOption, products, total,
});
axios({
method: 'post',
url: "http://localhost:5000/sendmail", // Specify the host
data: {
name, email, phone, deliveryOption, address, paymentOption, products, total,
},
headers: {
'Content-Type': 'application/json'
}
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
};
return (
<div>
<h1 className='center2'>Formulario a completar</h1>
<form>
<label className='center m'>Nombre y apellido:</label>
<input className='center m mt' type="text" onChange={e => setName(e.target.value)} required /><br />
<label className='mt'>Email:</label>
<input type="email" onChange={(e) => setEmail(e.target.value)}/>
<br />
<label>Teléfono:</label>
<input className='mt' type="tel" onChange={e => setPhone(e.target.value)} required /><br />
<label>
<input type="radio" name="deliveryOption" value="delivery" onChange={handleDeliveryOptionChange} required />Envío
</label>
<label>
<input className='mt' type="radio" name="deliveryOption" value="pickup" onChange={e => {setDeliveryOption(e.target.value);handleDeliveryOptionChange(e.target.value);}} required />Retiro
</label>
{deliveryOption === 'delivery' && (
<>
<label>Dirección:</label>
<input type="text" id="address" onChange={e => {setAddress(e.target.value);handleAddressChange(e.target.value);}} required />
</>
)}
<label>
<input className='mt' type="radio" name="paymentOption" value="cash" onChange={handlePaymentOptionChange} required />
Efectivo
</label>
<label>
<input type="radio" name="paymentOption" value="transfer" onChange={handlePaymentOptionChange} required />
Transferencia
</label><br />
{paymentOption === 'transfer' && (
<p>CBU: 000034</p>
)}
</form>
<button className='boton fuente' onClick={sendMail}>Realizar Pedido</button>
<h2 className='center2'>Resumen</h2>
{products.map((product, index) => (
<div key={index}>
<h5>
{product.nameProduct} - {product.variante.name}: $
{product.variante.price} x {product.quantity}
</h5>
</div>
))}
<h3 className='center2'>Total:${total}</h3>
</div>
);
};
export default CheckoutPage;
this is the JSX, im in React w Vite.
const express = require('express');
const nodemailer = require('nodemailer');
const cors = require('cors'); // Importa cors
const app = express();
app.use(cors()); // Usa cors como middleware
app.use(express.json()); // Para poder leer el cuerpo JSON de las solicitudes POST
const transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: '[email protected]',
pass: 'ckhb zzmr dwzv iumi'
}
});
app.use(cors({
origin: 'http://localhost:5000' // Sustituye esto por la URL de tu cliente
}));
app.post('/sendmail', (req, res) => {
const { name, email, phone, deliveryOption, address, paymentOption, products, total } = req.body;
const mailOptions = {
from: "[email protected]",
to: "[email protected]",
subject: "Pedido",
text: `Nombre: ${name}, Email: ${email}, Teléfono: ${phone}, Opción de entrega: ${deliveryOption}, Dirección: ${address}, Opción de pago: ${paymentOption}, Productos: ${JSON.stringify(products)}, Total: ${total}`,
};
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
console.log(error);
res.status(500).send(error);
} else {
console.log('Email enviado: ' + info.response);
res.status(200).send('Email enviado: ' + info.response);
}
});
});
app.listen(5000, () => {
console.log('Server listening on port 5000');
});
This is an error 404 but i dont know what to do. Ive tried with express, cors, nodemon, axios. changing /sendmail to localhost:5000/sendmail, in the server, and in the checkoutpage. none of this works. still 404 bad request. ive tried app post app get. I coded a server that sends mail when you run the server with node. but i need Realizar pedido makes it by itself. Im not using php just because Ai says its more "natural" nodemailer in this case.