Skip to content

E
ecommerce-maven
Commit 520fc712 authored by Kyle Muldoon's avatar Kyle Muldoon
Browse files
Options

Done with OrderPage Content and Styling, moving on to placing order via API

parent 7a696d53
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 79 deletions
ecom-service/.DS_Store
View file @ 520fc712
No preview for this file type
ecom-web/src/components/checkout/PaymentMethod.js
View file @ 520fc712
......@@ -2,38 +2,41 @@ import React, {useState, useEffect} from 'react'
export default function PaymentMethod(props) {
return (
<div id="PaymentInput">
<div className="order-component" id="PaymentInput">
<div className="OrderDirectionsElement" id="PaymentLabel">
<p>Step 2 - Billing</p>
</div>
<div className="shippingInfoInput" id="cardNumberInput">
<input placeholder="Card Number"
<input placeholder="Card Number*"
type="text"
onChange={(e) => props.captureCardNumber(e.target.value)}
className="input-text"
></input>
</div>
<div className="shippingInfoInput" id="cardholderNameInput">
<input placeholder="Cardholder Name"
<input placeholder="Cardholder Name*"
type="text"
onChange={(e) => props.captureCardHolderName(e.target.value)}
onChange={(e) => props.captureCardHolderName(e.target.value)}
className="input-text"
></input>
</div>
<div className="shippingInfoInput" id="expirationDateInput">
<input placeholder="Expiration Date"
<input placeholder="Expiration Date [MM/YYYY]*"
type="text"
onChange={(e) => props.captureExpirationDate(e.target.value)}
onChange={(e) => props.captureExpirationDate(e.target.value)}
className="input-text"
></input>
</div>
<div className="shippingInfoInput" id="cvvCodeInput">
<input placeholder="CVV"
<input placeholder="CVV*"
type="text"
onChange={(e) => props.captureCVV(e.target.value)}
onChange={(e) => props.captureCVV(e.target.value)}
className="input-text"
></input>
</div>
......
ecom-web/src/components/checkout/ReviewOrder.js
View file @ 520fc712
import React, {useState, useEffect} from 'react'
import React, { useState, useEffect } from 'react'
export default function ReviewOrder(props) {
......@@ -14,65 +14,67 @@ export default function ReviewOrder(props) {
let calcGrandTotal = (itemsTotal, shippingTotal, taxRate) => {
return calcTotalBeforeTax(itemsTotal, shippingTotal) * (parseFloat(1.00) + parseFloat(taxRate))
}
return (
<div id="ReviewOrder">
<div className="order-component" id="ReviewOrder">
<div className="OrderReviewElement" id="OrderSummary">
<div className="OrderDirectionsElement" id="OrderSummary">
<p>Step 3 - Order Summary</p>
</div>
<div className="OrderSummaryElement" id="itemsPrice">
<div>
Items {props.numCartItems}:
</div>
<div id="orderSummaryContainer">
<div className="OrderSummaryElement" id="itemsPrice">
<div>
Items ({props.numCartItems}):
</div>
<div>
${props.itemsTotal}
<div>
${parseFloat(props.itemsTotal).toFixed(2)}
</div>
</div>
</div>
<div className="OrderSummaryElement" id="shippingHandling">
<div id="shippingHandlingLabel">
Shipping and Handling:
</div>
<div className="OrderSummaryElement" id="shippingHandling">
<div id="shippingHandlingLabel">
Shipping and Handling:
</div>
<div id="shippingHandlingPrice">
${props.shippingHandling}
<div id="shippingHandlingPrice">
${parseFloat(props.shippingHandling).toFixed(2)}
</div>
</div>
</div>
<div className="OrderSummaryElement" id="beforeTax">
<div id="beforeTaxLabel">
Total Before Tax
</div>
<div className="OrderSummaryElement" id="beforeTax">
<div id="beforeTaxLabel">
Total Before Tax
</div>
<div id="beforeTaxPrice">
{/* ${props.itemsTotal + props.shippingHandling} */}
${calcTotalBeforeTax(props.itemsTotal, props.shippingHandling)}
<div id="beforeTaxPrice">
${calcTotalBeforeTax(props.itemsTotal, props.shippingHandling).toFixed(2)}
</div>
</div>
</div>
<div className="OrderSummaryElement" id="taxCalculated">
<div id="taxCalculatedLabel">
Estimated Tax:
</div>
<div className="OrderSummaryElement" id="taxCalculated">
<div id="taxCalculatedLabel">
Estimated Tax:
</div>
<div id="taxCalculatedPrice">
${calcTaxAmount(props.itemsTotal, props.shippingHandling, props.taxRate)}
<div id="taxCalculatedPrice">
${calcTaxAmount(props.itemsTotal, props.shippingHandling, props.taxRate).toFixed(2)}
</div>
</div>
</div>
<div className="OrderSummaryElement" id="orderTotal">
<div id="orderTotalLabel">
Order Total:
</div>
<div className="OrderSummaryElement" id="orderTotal">
<div id="orderTotalLabel">
Order Total:
</div>
<div id="orderTotalPrice">
${calcGrandTotal(props.itemsTotal, props.shippingHandling, props.taxRate)}
<div id="orderTotalPrice">
${calcGrandTotal(props.itemsTotal, props.shippingHandling, props.taxRate).toFixed(2)}
</div>
</div>
</div>
</div>
)
}
ecom-web/src/components/checkout/ShippingAddress.js
View file @ 520fc712
......@@ -2,30 +2,33 @@ import React, {useState, useEffect} from 'react'
export default function ShippingAddress(props) {
return (
<div id="shippingInput">
<div className="order-component" id="shippingInput">
<div className="OrderDirectionsElement" id="ShippingLabel">
<p>Step 1 - Shipping</p>
</div>
<div className="shippingInfoInput" id="firstNameInput">
<input placeholder="First Name"
<input placeholder="First Name*"
type="text"
onChange={(e) => props.captureFirstName(e.target.value)}
className="input-text"
></input>
</div>
<div className="shippingInfoInput" id="lastNameInput">
<input placeholder="Last Name"
<input placeholder="Last Name*"
type="text"
onChange={(e) => props.captureLastName(e.target.value)}
className="input-text"
></input>
</div>
<div className="shippingInfoInput" id="addressInput">
<input placeholder="Shipping Address"
<input placeholder="Shipping Address*"
type="text"
onChange={(e) => props.captureShippingAddress(e.target.value)}
className="input-text"
></input>
</div>
......@@ -33,27 +36,31 @@ export default function ShippingAddress(props) {
<input placeholder="Apt. / Suite no"
type="text"
onChange={(e) => props.captureAptSuiteNo(e.target.value)}
className="input-text"
></input>
</div>
<div className="shippingInfoInput" id="cityInput">
<input placeholder="City"
<input placeholder="City*"
type="text"
onChange={(e) => props.captureCity(e.target.value)}
className="input-text"
></input>
</div>
<div className="shippingInfoInput" id="stateInput">
<input placeholder="State"
<input placeholder="State*"
type="text"
onChange={(e) => props.captureState(e.target.value)}
className="input-text"
></input>
</div>
<div className="shippingInfoInput" id="zipCodeInput">
<input placeholder="Postal Code"
<input placeholder="Postal Code*"
type="text"
onChange={(e) => props.captureZipCode(e.target.value)}
className="input-text"
></input>
</div>
</div>
......
ecom-web/src/components/checkout/SubmitOrder.js
View file @ 520fc712
import React, { useState, useEffect } from 'react'
export default function SubmitOrder() {
export default function SubmitOrder(props) {
let handleSubmitClick = (e) => {
console.log("Submit Button Clicked")
props.setSubmitButtonActive(1)
}
return (
<div id="SubmitOrder">
<div className="order-component" id="SubmitOrder">
<div id="SubmitLabel">
<div className="OrderDirectionsElement" id="SubmitLabel">
<p>Step 4 - Checkout</p>
</div>
<div id="SubmitButtonInput">
<button>Submit Order</button>
<div id="SubmitButtonContainer">
<p className="errorMessage">{(props.errorWhileValidating === 1 && props.allFieldsValidated[0] === 0)? 'One or more fields is missing a value' : ''}</p>
<button id="SubmitButtonInput" onClick={handleSubmitClick} >Submit Order</button>
</div>
</div>
)
}
ecom-web/src/components/checkout/checkout.css
View file @ 520fc712
......@@ -29,7 +29,7 @@
.order-component {
border-top: 2px solid black;
min-width: 80%;
min-width: 60%;
margin-bottom: 50px;
}
......@@ -62,7 +62,9 @@
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 100px;
margin-top: 75px;
}
#SubmitButtonInput {
......@@ -71,4 +73,10 @@
background-color: black;
height: 80px;
font-size: 200%;
}
.errorMessage {
color: red;
font-weight: bold;
font-size: 120%;
}
\ No newline at end of file
ecom-web/src/components/checkout/checkout.js
View file @ 520fc712
......@@ -4,6 +4,9 @@ import ShippingAddress from './ShippingAddress.js'
import PaymentMethod from './PaymentMethod.js'
import ReviewOrder from './ReviewOrder.js'
import SubmitOrder from './SubmitOrder.js'
import './checkout.css'
// import orderApi from './../../util/order-api'
import axios from 'axios'
export default function Checkout() {
......@@ -30,7 +33,7 @@ export default function Checkout() {
///////////////////////
// Review Order State
// Order Review / Summary State
///////////////////////
const [numCartItems, setNumCartItems] = useState([3])
const [itemsTotal, setItemsTotal] = useState([87.65]) // arbitrary cart total
......@@ -41,8 +44,123 @@ export default function Checkout() {
///////////////////////
// Submit Button State
///////////////////////
const [submitButtonActive, setSubmitButtonActive] = useState([false])
const [allFieldsValidated, setAllFieldsValidated] = useState([false])
const [submitButtonActive, setSubmitButtonActive] = useState([0])
const [allFieldsValidated, setAllFieldsValidated] = useState([0])
const [errorWhileValidating, setErrorWhileValidating] = useState([0])
// This effect listens for the submit button to be clicked
// It then checks each of the required fields to make sure they are non null
useEffect( () => {
// when submit button clicked after being inactive
if (submitButtonActive === 1) {
// fields to make sure are non-empty
let fieldsToCheck = [
firstName,
lastName,
shippingAddress,
city,
state,
zipCode,
cardNumber,
cardHolderName,
expirationDate,
cvv
]
// initially validated, gets flipped if required field is empty
let validated = 1
for (let i in fieldsToCheck) {
if (fieldsToCheck[i].length === 0) {
console.log("a required Field Value was empty")
validated = 0
break
}
}
// if validated, propogate to component state that all fields were validated
if (validated === 1) {
setAllFieldsValidated(1)
}
// if invalid, propogate to component state
else {
console.log("Failed to validate")
setErrorWhileValidating(1)
setSubmitButtonActive(0)
}
}
// when submit button gets reset from active to inactive
else if (submitButtonActive === 0) {
;
}
}, [submitButtonActive])
// This effect looks for the allFieldsValidated signal and fires off the order submission when complete
useEffect( () => {
handleSubmit()
console.log("Successful submission request")
}, [allFieldsValidated])
let handleSubmit = () => {
console.log("Submitting Order!")
let order = {}
order["firstName"] = firstName
order["lastName"] = lastName
order["shippingAddress"] = shippingAddress
order["aptSuitNo"] = aptSuiteNo
order["city"] = city
order["state"] = state
order["zipCode"] = zipCode
order["cardNumber"] = cardNumber
order["cardHolderName"] = cardHolderName
order["expirationDate"] = expirationDate
order["cvv"] = cvv
console.log(order)
let chrisSpec = {
"user": {
"userId": "e-com-test-id",
"email": "test@test.test",
"firstName":"ecom",
"lastName":"test"
},
"address": {
"state": "IL",
"city": "chicago",
"zip": "90210",
"street": "Grand"
},
"cart": {
"id": "something",
"userId": "e-com-test-id",
"cartItems":[
{
"quantity": 2,
"productRef": {
"id": "something",
"sku": "200000",
"upc": "00002"
}
}
]
}
}
let response = axios.post("http://localhost:8080/api/orders", chrisSpec)
}
// This watches for changes on any shipping input fields and prints the current states on any change
......@@ -99,22 +217,15 @@ export default function Checkout() {
/>
{/* Request to submit happens here, initiates input validation and sends if success */}
<SubmitOrder />
<SubmitOrder
submitButtonActive={submitButtonActive}
setSubmitButtonActive={setSubmitButtonActive}
errorWhileValidating={errorWhileValidating}
allFieldsValidated={allFieldsValidated}
/>
</div>
)
}
/*
1. Shipping Address
2. Payment Method
3. Review Order
4. Submit Order
*/
\ No newline at end of file
ecom-web/src/util/order-api.js 0 → 100644
View file @ 520fc712
import axios from 'axios'
export const postOrder = (order) => {
return axios.post("http://localhost:8080/api/users", order)
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment