From 0b6516e19d1bd5a86b9c22d8daa3cd0712ae51ec Mon Sep 17 00:00:00 2001 From: Juthatip McDevitt Date: Fri, 24 May 2024 13:49:07 -0500 Subject: [PATCH] created checkout section on checkout page --- donutshop_ecommerce/src/app/cart/page.js | 60 ++++++++++++++++--- donutshop_ecommerce/src/app/profile/page.js | 8 +-- donutshop_ecommerce/src/app/users/page.js | 6 +- .../src/components/layout/AddressInfo.js | 38 ++++++++++++ .../src/components/layout/Header.js | 1 + .../src/components/layout/UserForm.js | 38 ++++-------- 6 files changed, 109 insertions(+), 42 deletions(-) create mode 100644 donutshop_ecommerce/src/components/layout/AddressInfo.js diff --git a/donutshop_ecommerce/src/app/cart/page.js b/donutshop_ecommerce/src/app/cart/page.js index 91110cf..bd138a6 100644 --- a/donutshop_ecommerce/src/app/cart/page.js +++ b/donutshop_ecommerce/src/app/cart/page.js @@ -1,16 +1,39 @@ "use client" -import React, { useContext } from 'react' +import React, { useContext, useEffect, useState } from 'react' import { CartContext, productTotal } from '../../components/AppContext' import Image from 'next/image'; import { IoMdCloseCircleOutline } from "react-icons/io"; +import AddressInfo from '../../components/layout/AddressInfo'; +import useProfile from '../../components/UseProfile'; const CartPage = () => { const {cartProducts, removeCartProduct} = useContext(CartContext); + const [address, setAddress] = useState({}) + const {data:profileCheckoutData} = useProfile() + + useEffect(() => { + if(profileCheckoutData?.city){ + const {phoneNumber, streetAddress, city, stateProvince, zipCode, country} = profileCheckoutData; + const addressFormProfile = {phoneNumber, streetAddress, city, stateProvince, zipCode, country} + setAddress(addressFormProfile) + } + }, [profileCheckoutData]) + + function handleAddresschange(propName, value){ + setAddress(prevAddress => ({...prevAddress, [propName]:value})); + } + + //checkout to Stripe + function handleCheckout(ev){ + fetch('/api/checkout', { + + }) + } //cart total - let total = 0 + let subtotal = 0 for(const p of cartProducts){ - total += productTotal(p) + subtotal += productTotal(p) } @@ -18,7 +41,7 @@ const CartPage = () => {

My cart

-
+
{cartProducts?.length === 0 && (
Your cart is empty
@@ -50,12 +73,33 @@ const CartPage = () => {
))} -
-

Sub-total ${total}

+
+
+
+

subtotal

+

${subtotal}

+
+
+

Delivery Fees

+

$4.99

+
+
+

Order total

+

${subtotal + 5}

+
+
-
-

Summary

+
+
+
+

Shipping Address

+
+ + + +
+
diff --git a/donutshop_ecommerce/src/app/profile/page.js b/donutshop_ecommerce/src/app/profile/page.js index 3cf42c8..d20c29a 100644 --- a/donutshop_ecommerce/src/app/profile/page.js +++ b/donutshop_ecommerce/src/app/profile/page.js @@ -1,11 +1,9 @@ "use client" import { useSession } from 'next-auth/react' -import Image from 'next/image'; import { redirect } from 'next/navigation'; import React, { useEffect, useState } from 'react' import toast from 'react-hot-toast'; import UserTabs from "../../components/layout/UserTab" -import EditImage from "../../components/layout/EditImage" import UserForm from "../../components/layout/UserForm" const ProfilePage = () => { @@ -14,7 +12,7 @@ const ProfilePage = () => { const {status} = session; const [user, setUser] = useState(null); const [isAdmin, setIsAdmin] = useState(false); - const [profileFetchd, setProfileFetched] = useState(false); + const [profileFetched, setProfileFetched] = useState(false); useEffect(() => { @@ -37,7 +35,7 @@ const ProfilePage = () => { const response = await fetch('/api/profile', { method: 'PUT', headers: {'Content-Type': 'application/json'}, - body: JSON.stringify({data}), + body: JSON.stringify(data), }); if(response.ok) resolve() @@ -52,7 +50,7 @@ const ProfilePage = () => { } - if(status === 'loading' || !profileFetchd){ + if(status === 'loading' || !profileFetched){ return

Loading...

} if(status === 'unauthenticated'){ diff --git a/donutshop_ecommerce/src/app/users/page.js b/donutshop_ecommerce/src/app/users/page.js index 7a4c418..720714d 100644 --- a/donutshop_ecommerce/src/app/users/page.js +++ b/donutshop_ecommerce/src/app/users/page.js @@ -7,13 +7,13 @@ import Link from 'next/link'; const Userspage = () => { const {data, loading} = useProfile(); - const [users, setUser] = useState([]); + const [users, setUsers] = useState([]); useEffect(() => { - fetch('api/users').then(response => { + fetch('/api/users').then(response => { response.json().then(users => { - setUser(users) + setUsers(users) }) }) }, []) diff --git a/donutshop_ecommerce/src/components/layout/AddressInfo.js b/donutshop_ecommerce/src/components/layout/AddressInfo.js new file mode 100644 index 0000000..74eb039 --- /dev/null +++ b/donutshop_ecommerce/src/components/layout/AddressInfo.js @@ -0,0 +1,38 @@ +import React from 'react' + +const AddressInfo = ({addressProps, setAddressProps}) => { + const {phoneNumber, streetAddress, city, stateProvince, zipCode, country} = addressProps; + + return ( + <> +
+ + setAddressProps('phoneNumber', ev.target.value)}/> +
+
+ + setAddressProps('streetAddress', ev.target.value)}/> +
+
+ + setAddressProps('city', ev.target.value)}/> +
+
+
+ + setAddressProps('stateProvince', ev.target.value)}/> +
+
+ + setAddressProps('zipCode', ev.target.value)}/> +
+
+
+ + setAddressProps('country', ev.target.value)}/> +
+ + ) +} + +export default AddressInfo \ No newline at end of file diff --git a/donutshop_ecommerce/src/components/layout/Header.js b/donutshop_ecommerce/src/components/layout/Header.js index 3addc82..77c5d02 100644 --- a/donutshop_ecommerce/src/components/layout/Header.js +++ b/donutshop_ecommerce/src/components/layout/Header.js @@ -65,6 +65,7 @@ const Header = () => { )} {status === 'unauthenticated' && ( <> + ({cartProducts.length}) Login Register diff --git a/donutshop_ecommerce/src/components/layout/UserForm.js b/donutshop_ecommerce/src/components/layout/UserForm.js index 349c88e..e0c7b84 100644 --- a/donutshop_ecommerce/src/components/layout/UserForm.js +++ b/donutshop_ecommerce/src/components/layout/UserForm.js @@ -2,6 +2,7 @@ import React, { useState } from 'react' import EditImage from '../../components/layout/EditImage' import useProfile from '../UseProfile'; +import AddressInfo from '../layout/AddressInfo'; const UserForm = ({user, onSave}) => { const [userName, setUserName] = useState(user?.name || ''); @@ -16,6 +17,16 @@ const UserForm = ({user, onSave}) => { const {data:loginAsUser} = useProfile(); + function handleAddressChange(propName, value){ + if(propName === 'phoneNumber') setPhoneNumber(value); + if(propName === 'streetAddress') setStreetAddress(value); + if(propName === 'city') setCity(value); + if(propName === 'stateProvince') setStateProvince(value); + if(propName === 'zipCode') setZipCode(value); + if(propName === 'country') setCountry(value); + } + + return (
@@ -30,32 +41,7 @@ const UserForm = ({user, onSave}) => {
-
- - setPhoneNumber(ev.target.value)}/> -
-
- - setStreetAddress(ev.target.value)}/> -
-
- - setCity(ev.target.value)}/> -
-
-
- - setStateProvince(ev.target.value)}/> -
-
- - setZipCode(ev.target.value)}/> -
-
-
- - setCountry(ev.target.value)}/> -
+ {loginAsUser.admin && (