updated order confirmation page
This commit is contained in:
parent
f198267ac9
commit
e32683637b
2 changed files with 80 additions and 14 deletions
|
|
@ -1,10 +1,14 @@
|
|||
"use client"
|
||||
import Image from 'next/image'
|
||||
import React, { useContext, useEffect } from 'react'
|
||||
import { CartContext } from '../../../components/AppContext'
|
||||
import React, { useContext, useEffect, useState } from 'react'
|
||||
import { CartContext, productTotal } from '../../../components/AppContext'
|
||||
import { useParams } from 'next/navigation'
|
||||
import AddressInfo from '../../../components/layout/AddressInfo'
|
||||
|
||||
const OrdersPage = () => {
|
||||
const {clearCart} = useContext(CartContext);
|
||||
const {clearCart, cartProducts} = useContext(CartContext);
|
||||
const {id} = useParams();
|
||||
const [order, setOrder] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
if(typeof window !== 'undefined'){
|
||||
|
|
@ -12,19 +16,81 @@ const OrdersPage = () => {
|
|||
clearCart();
|
||||
}
|
||||
}
|
||||
if(id){
|
||||
fetch('/api/orders?_id='+id).then(res => {
|
||||
res.json().then(orderData => {
|
||||
setOrder(orderData);
|
||||
})
|
||||
})
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
let subtotal = 0
|
||||
if(order?.cartProducts){
|
||||
for(const product of order?.cartProducts){
|
||||
subtotal += productTotal(product)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className='pb-20 md:pb-40'>
|
||||
<div className='px-5 md:px-10 py-5 sm:py-10 max-w-2xl mx-auto'>
|
||||
<div className='px-5 md:px-10 py-5 sm:py-10 max-w-xl mx-auto'>
|
||||
<div className='flex flex-col gap-4 items-center justify-center text-center mb-10'>
|
||||
<Image src='/check.png' width={100} height={100} alt='checked' className='mb-6'/>
|
||||
<Image src='/check.png' width={100} height={100} alt='checked' className='mb-5'/>
|
||||
<p className='uppercase'>Thank you</p>
|
||||
<p className='uppercase text-xl'>Your order is confirmed</p>
|
||||
<p className='text-sm'>We will be sending you an email confirmation to your email shortly</p>
|
||||
<button type='button' className='p-2 bg-pink-500 rounded-md text-xs text-white hover:opacity-80 uppercase'>Track your order</button>
|
||||
</div>
|
||||
product
|
||||
{order && (
|
||||
<div className='flex flex-col gap-5 py-5 px-5 border rounded-md shadow-md'>
|
||||
<div className='border-b pb-5'>
|
||||
<p className='mb-5 text-pink-500 font-semibold text-center'>Order Summary</p>
|
||||
{order.cartProducts.map(product => (
|
||||
<div className='flex justify-between'>
|
||||
<div>
|
||||
<p className='w-[150px] lg:w-[300px] text-ellipsis whitespace-nowrap overflow-hidden text-gray-800 text-xs sm:text-sm font-bold'>{product.itemName}</p>
|
||||
{product.size && (
|
||||
<div className='text-gray-800 font-semibold text-xs sm:text-sm'>Size: <span className='text-[10px] sm:text-xs text-gray-600'>{product.size.itemName}</span></div>
|
||||
)}
|
||||
{product.extra?.length > 0 && (
|
||||
<div className='text-gray-800 font-semibold text-xs sm:text-sm flex gap-1 items-center'>Add: {product.extra.map(extras => (
|
||||
<span className='text-[10px] sm:text-xs text-gray-600'>{extras.itemName} (+${extras.price})</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className='text-gray-800 text-xs sm:text-sm font-semibold'>${productTotal(product)}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className='flex justify-end text-gray-800'>
|
||||
<div className='flex flex-col gap-1 mt-5 md:mt-10 text-xs sm:text-sm'>
|
||||
<div className='flex gap-10 justify-between font-semibold'>
|
||||
<p>Subtotal:</p>
|
||||
<p className='ml-5 text-end'>${subtotal.toFixed(2)}</p>
|
||||
</div>
|
||||
<div className='flex gap-10 justify-between font-semibold'>
|
||||
<p>Delivery:</p>
|
||||
<p className='ml-5 text-end'>$4.99</p>
|
||||
</div>
|
||||
<div className='flex gap-10 justify-between font-semibold'>
|
||||
<p>Order total:</p>
|
||||
<p className='ml-5 text-end'>${(subtotal + 4.99).toFixed(2)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className='text-sm max-w-md mx-auto'>
|
||||
<p className='mb-5 font-semibold text-center text-base text-pink-500'>Delivery Address</p>
|
||||
<AddressInfo addressProps={order} disabled={true}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,35 +1,35 @@
|
|||
import React from 'react'
|
||||
|
||||
const AddressInfo = ({addressProps, setAddressProps}) => {
|
||||
const AddressInfo = ({addressProps, setAddressProps, disabled=false}) => {
|
||||
const {phoneNumber, streetAddress, city, stateProvince, zipCode, country} = addressProps;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<label className='text-gray-700 text-sm font-semibold'>Phone number</label>
|
||||
<input type='tel' placeholder='Phone number' value={phoneNumber} onChange={ev => setAddressProps('phoneNumber', ev.target.value)}/>
|
||||
<input type='tel' placeholder='Phone number' value={phoneNumber} onChange={ev => setAddressProps('phoneNumber', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
|
||||
</div>
|
||||
<div>
|
||||
<label className='text-gray-700 text-sm font-semibold'>Street Address</label>
|
||||
<input type='text' placeholder='Address' value={streetAddress} onChange={ev => setAddressProps('streetAddress', ev.target.value)}/>
|
||||
<input type='text' placeholder='Address' value={streetAddress} onChange={ev => setAddressProps('streetAddress', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
|
||||
</div>
|
||||
<div>
|
||||
<label className='text-gray-700 text-sm font-semibold'>City</label>
|
||||
<input type='text' placeholder='City' value={city} onChange={ev => setAddressProps('city', ev.target.value)}/>
|
||||
<input type='text' placeholder='City' value={city} onChange={ev => setAddressProps('city', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
|
||||
</div>
|
||||
<div className='flex flex-col sm:flex-row gap-0 sm:gap-2'>
|
||||
<div>
|
||||
<label className='text-gray-700 text-sm font-semibold'>State/Province</label>
|
||||
<input type='text' placeholder='State/Province' value={stateProvince} onChange={ev => setAddressProps('stateProvince', ev.target.value)}/>
|
||||
<input type='text' placeholder='State/Province' value={stateProvince} onChange={ev => setAddressProps('stateProvince', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
|
||||
</div>
|
||||
<div>
|
||||
<label className='text-gray-700 text-sm font-semibold'>Zip/Postal code</label>
|
||||
<input type='text' placeholder='Zip/Postal code' value={zipCode} onChange={ev => setAddressProps('zipCode', ev.target.value)}/>
|
||||
<input type='text' placeholder='Zip/Postal code' value={zipCode} onChange={ev => setAddressProps('zipCode', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className='text-gray-700 text-sm font-semibold'>Country</label>
|
||||
<input type='text' placeholder='Country' value={country} onChange={ev => setAddressProps('country', ev.target.value)}/>
|
||||
<input type='text' placeholder='Country' value={country} onChange={ev => setAddressProps('country', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue