javascript - Im building an ecommerce site using react.js. I want to recieve orders on email. What i am doing wrong?

Question

These are the 3 files that containes the required data. Everything works fine but, I want the order to be sent to my email, my checkout file has the template and functions , my addressform file has the input fields and my review has the review order section with confirmation.

import React, {useState} from 'react'
import { InputLabel, Select, MenuItem ,Button , Grid, Typography } from '@material-ui/core'
import { useForm, FormProvider} from 'react-hook-form'
import FormInput from './CustomTextField'
import { Link } from 'react-router-dom'

const AddressForm = ({checkoutToken , next}) => {

   
    const methods = useForm()

    return (
        <>
            <Typography variant="h6" gutterbottom >Shipping Address</Typography>
            <FormProvider {...methods}>
                <form onSubmit={methods.handleSubmit((data)=> next({...data}))}>
                    <Grid container spacing={3}>
                        <FormInput  required name='First Name' label='First Name' />
                        <FormInput  required name='Last Name' label='Last Name' />
                        <FormInput  required name='Address' label='Address' />
                        <FormInput  required name='Email' label='Email' />
                        <FormInput  required name='City' label='City' />
                        <FormInput  required name='Phone' label='Phone' />
                      
                    </Grid>
                    <br />
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <Button component={Link} variant="outlined" to="/cart">Back to Cart</Button>
                            <Button type="submit" variant="contained" color="primary">Next</Button>
                        </div>
                </form>
            </FormProvider>
        </>
    )
}

export default AddressForm

import React from 'react'
import { Typography , List , ListItem, ListItemText,Button} from '@material-ui/core'
import {Link }from 'react-router-dom'



const Review = ({checkoutToken, shippingData, backStep,nextStep,onCaptureCheckout,timeout}) => {

const handleSubmit = (event)=>{
    event.preventDefault()


const orderData = {
    line_items: checkoutToken.live.line_items,
    customer: { firstname: shippingData.firstName, lastname: shippingData.lastName, email: shippingData.email },
    shipping: { name: 'cairo', street: shippingData.address1, town_city: shippingData.city, county_state: shippingData.shippingSubdivision, postal_zip_code: shippingData.zip, country: shippingData.shippingCountry },
    fulfillment: { shipping_method: shippingData.shippingOption },
    
    }

    if (orderData) {
        onCaptureCheckout(checkoutToken.id,orderData)

        timeout()
        nextStep()
    }else {
        return(
            <div>something went wrong</div>
        )
    }
}
    
    return (
        <>
            <Typography variant="h6" gutterBottom > Order Summary</Typography>
            <List disablePadding>
                {checkoutToken.live.line_items.map((product) =>(
                    <ListItem style={{padding:'10px 0' }} key={product.name}>
                        <ListItemText primary={product.name} secondary={`Quanitity:${product.quantity}`}/>
                        <Typography>{product.line_total.formatted_with_symbol}</Typography>
                
                    </ListItem>
                ))}
                <ListItem style={{padding:'10px 0'}}>
                    <ListItemText primary='Total' />
                    <Typography variant="subtitle1" style={{fontweight:700}}>
                        {checkoutToken.live.subtotal.formatted_with_symbol}
                    </Typography>
                    
                </ListItem>
                <form onSubmit={(e)=> handleSubmit(e)}>
                    <br /> <br />
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <Button variant="outlined" onClick={backStep}>Back</Button>
                    <Button type="submit" variant="contained"  color="primary">
                        Pay {checkoutToken.live.subtotal.formatted_with_symbol}
                    </Button>
                    </div>
                </form>
                
            </List>
        </>
    )
}

export default Review

Answer 1

等待大神答复