I need help whit emailjs

[GermanDelosSantos]

I am trying to send the order that is generated on my website through an email, I am using emailjs, In the code that I show below, that order is also saved in firestore, in the console.log(templateParams) everything I need is shown but in the email it simply arrives the name and address of the user, the user_order data is not sent to me

import { useContext, useState, useRef } from "react"
import { CartContext } from "../../context/CartContext"
import { db } from "../../firebase/config"
import { collection, addDoc } from "firebase/firestore"
import emailjs from '@emailjs/browser';

const Checkout = () => {
    const { cart, totalCart, clearCart } = useContext(CartContext)
    const form = useRef();
    const [values, setValues] = useState({
        user_name: '',
        user_dir: '',
        user_email: ''
    })

    const [orderId, setOrderId] = useState(null);

    const handleInputChange = (e) => {
        console.log(e.target.name)

        setValues({
            ...values,
            [e.target.name]: e.target.value
        })
    }


    const handleSubmit = (e) => {
        e.preventDefault();
    
        const orden = {
            cliente: values,
            items: cart.map((item) => ({
                name: item.name,
                price: item.price,
                quantity: item.cantidad
            })),
            total: totalCart(),
            fecha: new Date()
        }
    
        console.log("orden:", orden);
    
        const teamplateParams = {
            from_name: 'Videos Usados',
            user_email: values.user_dir,
            user_name: values.user_name,
            user_id: orderId,
            user_dir: values.user_dir,
            user_order: cart.map(item => `${item.name} (${item.cantidad} x $${item.price})`).join(', '),
        };
    
        console.log("teamplateParams:", teamplateParams);
    
        emailjs.send('service_o118go3', 'template_w4o7k4o','M7NqcsBEyzAw0i9Je', teamplateParams)
            .then((result) => {
                console.log(result.text);
            }, (error) => {
                console.log(error.text);
            });
    
        const ordersRef = collection(db, 'orders')
    
        addDoc(ordersRef, orden).then((doc) => {
            setOrderId(doc.id)
            clearCart();
        });
    };



    if (orderId) {
        return (
            <div className="container m-auto mt-10">
                <h2 className="text-4xl font-semibold">Gracias por tu compra</h2>
                <hr />
                <p>Tu código de orden es: {orderId}</p>
            </div>
        );
    }


    return (
        <div className="container m-auto mt-10">
            <h2 className="text-4xl font-semibold">Checkout</h2>

            {/* <form ref={form} onSubmit={handleSubmit}>
                <label>Name</label>
                <input type="text" name="user_name" onChange={handleInputChange} />
                <label>direccion</label>
                <input type="text" name="user_dir" onChange={handleInputChange} />
                <label>Email</label>
                <input type="email" name="user_email" onChange={handleInputChange} />
                <label>Message</label>
                <textarea name="message" />
                <input type="submit" value="Send" />
            </form> */}

            <form ref={form} onSubmit={handleSubmit} className="flex flex-col gap-3 max-w-md">
                <input className="border p-2" type="text" 
                placeholder="Nombre"
                value={values.user_name} onChange={handleInputChange} name="user_name" />
                <input className="border p-2" type="text"
                placeholder="Direccion" 
                value={values.user_dir} onChange={handleInputChange} name="user_dir" />
                <input className="border p-2" type="email" 
                placeholder="Email" 
                value={values.user_email} onChange={handleInputChange} name="user_email" />
                <button className="bg-blue-400 rounded-mt text-white py-2" type="sumbit" value={"send"}>Enviar</button>


            </form>



        </div>
    )
}
export default Checkout

[xr0master]

Did you check the Email History? Are the variables here?
Can you share the template?

[GermanDelosSantos]

Yes sure there you got
`

Hola

Pedido de {{user_name}} fue aceptado

Id de compra{{user_id}}

La Orden es: {{user_order}}

Direccion: {{user_dir}}

{{message}}

Best wishes,
EmailJS team

`

[xr0master]

The template looks good.
Could you let me know if you checked the Email History?

[GermanDelosSantos]

If you mean to my gmail history yes i did what i got from there is this

[xr0master]

I meant the Email History in dashboard https://dashboard.emailjs.com/admin/history

[GermanDelosSantos]

Thanks for the help i was on a trip sorry <3

[GermanDelosSantos]

viewing the mail history never takes the data from the 'orden' array, do I have to use stryingify? to pass everything to plain text?

[xr0master]

It means this data is not sent to the service. I recommend that you debug your application. Most likely your cart is empty.

[GermanDelosSantos]

how i can debug my application it's my first time whit react i never do it before, in the other side when the cart is empty the checkout commponent is never render

[xr0master]

It's time to learn how :)
As you can see, the data does not come from the application.

[GermanDelosSantos]

Where i can find information about debbuggin?, when you say the data does not come from the application you mean i get the data from firestore and there is the problem?