How to send mail (no emailJS)

36 views Asked by At

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.

0

There are 0 answers