Skip to content

pop up fixed #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Jeffreytanhk wants to merge 1 commit into
base: main
Choose a base branch
from
Open

pop up fixed #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 12 additions & 5 deletions orderapp/src/components/ConfirmSendBtn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,18 @@ export default function ConfirmedOrder() {

return (
<form onSubmit={sendEmail}>
{/* <label>Item</label>
<input type="text" name="user_name" />
<label>Quantity</label>
<label>Price</label> */}
<input type="submit" value="Confirm Send" />
<tr>
<td>
{item.name}
</td>
<td>
{item.quantity}
</td>
<td>
{item.price}
</td>
</tr>
{/* <input type="submit" value="Confirm Send" /> */}
</form>
);
};
86 changes: 24 additions & 62 deletions orderapp/src/components/OrderlistPopUp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
import React from 'react'
import { useState } from 'react';
import ConfirmedOrder from './ConfirmSendBtn';
import CartItems from './CartItems';

import Invoice from './Invoice.js'
import './OrderlistPopUp.css';
import AddToCartItems from './OrderlistContainer'


function OrderlistPopUp(props) {
// Used for Popup function only. Content to be in OrderListSendBtn.
Expand All @@ -15,8 +12,9 @@ function OrderlistPopUp(props) {
// Use this variable to show the message after sending message:
//Copy this portion from https://www.emailjs.com/docs/examples/reactjs/

console.log('Inside Order List Popup:', props.selectedItemList);
return (props.trigger) ? (
//A pop-up button after clicking Send Order button

<div className="orderlist-popup">

<div className="popup-page">
Expand All @@ -25,13 +23,13 @@ function OrderlistPopUp(props) {
{/* Insert item list table here */}

<button className="close" onClick={() => props.setTrigger(false)}>X</button>
<h1 className="popupTitle">Order List</h1>
<h1 className="popupTitle">Your Order Has Been Sent!</h1>
<Invoice className="invoice" />
<div className="table">
<table>
<thead>
<tr>
<th colSpan="3"><h1>Confirm Order List</h1></th>
<th colSpan="3"><h1>Confirm Order Items</h1></th>
</tr>

<tr>
Expand All @@ -42,68 +40,32 @@ function OrderlistPopUp(props) {

</thead>
<tbody>
<div>{CartItems.selectedItemList}</div>
{/* <tr>
<td>testing item one</td>
<td>01</td>
<td>$0.00</td>
</tr>
<tr>
<td>testing item two</td>
<td>02</td>
<td>$10.00</td>
</tr> */}
{
props.selectedItemList ? props.selectedItemList.map((item) => {
return (
<tr>
<td>
{item.name}
</td>
<td>
{item.quantity}
</td>
<td>
{item.price}
</td>
</tr>
)
}) : null
}
</tbody>
</table>


</div>


{/* Two inner button within the pop-up to 1.Amend (close the page) 2.Send the Order through */}
<button className="amend-btn" onClick={() => props.setTrigger(false)}>Amend Order</button>
<ConfirmedOrder />
{/* <button className="confirm-send-btn" onSubmit={sendEmail}>Confirm Send</button> */}
</div>

</div>
</div>

) : "";

}

export default OrderlistPopUp



// PLanning
// To use useHistory and retrieve the orderlist information
// CheckOut features:
// import + path
// A function for Checkout
// UseEffect(() => {
// let isMounted = true
// axios.get(`/OrderlistContainer).then(res=>{
// if(is)
//})
//
// }
// return (
// a form that is built within the orderlistContainer
// )
// Structure: A table
// {orderlist.map( (item, index) => {
// totalCartPrice += AddToCartItems.product.selling_price * AddToCartItems.product_qty;
// return (
// <tr key={index}>
// <td>{items.product.name}</td>
// <td>{items.product.selling_price}</td>
// <td>{items.product.qty}</td>
// </tr>
// )
// })}
//

// Need to do const totalOrderPrice at the end of the page
// e.g. totalOrderPrice += item.product.selling_price * item.product_qty;
//
//to Show the total price. insert code as such: {totalOrderPrice} within the table
1 change: 1 addition & 0 deletions orderapp/src/components/OrderlistSendBtn.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

#sendorderbtn {
position: relative;
margin-bottom: 5px;
top: 30px;
}

Expand Down
37 changes: 16 additions & 21 deletions orderapp/src/components/OrderlistSendBtn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,41 @@ import OrderlistPopUp from './OrderlistPopUp' ;
import { useState } from 'react';
import './OrderlistSendBtn.css';
import AddToCartItems from './OrderlistContainer'
import emailjs from '@emailjs/browser';

//Create a function for Send Button
//OnClick Send Button, a Popup will appear using modal


function OrderlistSendBtn (props) {
const [buttonPopup, setButtonPopup] = useState(false);


function onSendOrderButtonClick(e) {
// 1. Send Email with confirmed props.

console.log('I need to send email here');

// 2. setButtonPopup to true
setButtonPopup(true)
}
//if-else statement to show button when cart is filled and disappear when cart is empty
if(props.selectedItemList.length === 0) {
return null;
}
else {
console.log('Inside Send Button:', props.selectedItemList);
return (
<>
<div className="sendbtn-container">
<button id='sendorderbtn' onClick={() => setButtonPopup(true)}>Send Order</button>
<button id='sendorderbtn' onClick={() => onSendOrderButtonClick()}>Send Order</button>
</div>



{/* Create a trigger={} to allow a function that trigger useState */}
<OrderlistPopUp trigger={buttonPopup} setTrigger={setButtonPopup}/>
<OrderlistPopUp trigger={buttonPopup} setTrigger={setButtonPopup} selectedItemList={props.selectedItemList}/>
</>
)
}
}

export default OrderlistSendBtn;

// function OrderlistSendBtn () {

// return (
// <div>
// <button >Send Order</button>
// </div>


// )



// }

// export default OrderlistSendBtn;
export default OrderlistSendBtn;