Skip to content

Commit

Permalink
Updates to checkout page
Browse files Browse the repository at this point in the history
  • Loading branch information
raynelfss committed May 16, 2022
1 parent e4de78d commit b1ea3d8
Show file tree
Hide file tree
Showing 10 changed files with 294 additions and 85 deletions.
4 changes: 2 additions & 2 deletions app.py
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,8 @@ def checkout():
return render_template("checkout.html", login = True, currentUrl = "/checkout", nav = helpers.getNav())
return render_template("checkout.html", login = False, currentUrl = "/checkout", nav = helpers.getNav())

@app.route('/aftercheckout')
def aftercheckout():
@app.route('/checkout/<id>')
def aftercheckout(id):
if not helpers.isCustomer():
return render_template("aftercheckout.html", login = True, currentUrl = "/aftercheckout", nav = helpers.getNav())
return render_template("aftercheckout.html", login = False, currentUrl = "/aftercheckout", nav = helpers.getNav())
Expand Down
37 changes: 23 additions & 14 deletions build/aftercheckout.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,37 @@
{% endblock %}

{% block body %}
<div class="title">
<i class="fas fa-check-circle" style="font-size:40px;color:rgb(209, 47, 85);"></i>
<h2>OrderID goes here</h2>
</div>


<div class="allcontainers">
<div class="container">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3019.360389458203!2d-73.95146108459174!3d40.82004707932034!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2f6657fa896f5%3A0xa785a9c0ac09561a!2sThe%20City%20College%20of%20New%20York!5e0!3m2!1sen!2sus!4v1652644102892!5m2!1sen!2sus" width="400" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<div class="maptext">
<h2>Thank you for your order!</h2>
<h3>Your order is confirmed.</h3>
<p>We've accepted your order and we're getting it ready.
Come back to the page for updates on your order!
</p>
<div class="leftinfo">
<div class="title">
<i class="fas fa-check-circle" style="font-size:40px;color:rgb(209, 47, 85);"></i>
<h2 id="Order-ID">Your order has been placed.</h2>
</div>
<div class="container">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3019.360389458203!2d-73.95146108459174!3d40.82004707932034!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2f6657fa896f5%3A0xa785a9c0ac09561a!2sThe%20City%20College%20of%20New%20York!5e0!3m2!1sen!2sus!4v1652644102892!5m2!1sen!2sus" width="400" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<div class="maptext">
<h2>Thank you for your order!</h2>
<h3>Your order is confirmed.</h3>
<p>We've accepted your order and we're getting it ready.
Come back to the page for updates on your order!
</p>
</div>
</div>
</div>
</div>
<div class="rightcontainer">
<h3>Container for Raynel...jazzy!</h3>
<div class="order-container">
<h1 class="order-id"></h1>
<div class="order-items" id="order-items"></div>
<div class="order-cost" id="order-cost"></div>
<div class="order-status" id="order-status"></div>
</div>
</div>

</div>
<script src="/scripts/aftercheckout.js"></script>
{% endblock %}
116 changes: 61 additions & 55 deletions build/checkout.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,60 +5,66 @@
<link href="./styles/cart.css" rel="stylesheet" type="text/css">
{% endblock %}

{% if session.get('loggedIn') == True %}
{% block body %}
<div class="checkout-container">
<h1 class="checkouttitle">Checkout</h1>
<div class="items-section">
<!--Cart items here-->
<h2>Items:</h2>
</div>
<div class="delivery-section">
<h2>Delivery Method:</h2>
<label>
<input type="radio" name="deliveryMethod" value="pickUp" checked onclick="handleClick(event)"/>
Pick Up
</label>
<label>
<input type="radio" name="deliveryMethod" value="Deliver" onclick="handleClick(event)"/>
Deliver
</label>
<div class="address-section">
<label for="address1">
Address 1
<input type="text" name="address1" id="address1" required/>
</label>
<label for="address2">
Address 2
<input type="text" name="address2" id="address2" />
</label>
<label for="city">
City
<input type="text" name="city" id="city" required/>
</label>
<label for="state">State
<input type="text" name="state" id="state" required/>
</label>
<label for="zipcode">Zipcode
<input type="text" name="zipcode" id="zipcode" required>
</label>
{%if session.get('loggedIn') == True%}
{% if session.get('userType') == 'customer' %}
<div class="checkout-container">
<h1 class="checkouttitle">Checkout</h1>
<div class="items-section">
<!--Cart items here-->
<h2>Items:</h2>
</div>
<div class="delivery-section">
<h2>Delivery Method:</h2>
<label>
<input type="radio" name="deliveryMethod" value="pickUp" checked onclick="handleClick(event)"/>
Pick Up
</label>
<label>
<input type="radio" name="deliveryMethod" value="Deliver" onclick="handleClick(event)"/>
Deliver
</label>
<div class="address-section">
<label for="address1">
Address 1
<input type="text" name="address1" id="address1" required/>
</label>
<label for="address2">
Address 2
<input type="text" name="address2" id="address2" />
</label>
<label for="city">
City
<input type="text" name="city" id="city" required/>
</label>
<label for="state">State
<input type="text" name="state" id="state" required/>
</label>
<label for="zipcode">Zipcode
<input type="text" name="zipcode" id="zipcode" required>
</label>
</div>
<!--Delivery method here-->
</div>
<div class="pricetext">
<h2>Price:</h2>
<p>subtotal: $<span id="subtotal"></span></p>
<p>tax: $<span id="taxes"></span></p>
<p>delivery fee: $<span id="deliveryFee"></span></p>
<p>total: $<span id="total"></span></p>

<!--price, checkout-->
</div>
<button id="checkout-button" onclick="checkout()">Place Order</button>
</div>
<!--Delivery method here-->
</div>
<div class="pricetext">
<h2>Price:</h2>
<p>subtotal: $<span id="subtotal"></span></p>
<p>tax: $<span id="taxes"></span></p>
<p>delivery fee: $<span id="deliveryFee"></span></p>
<p>total: $<span id="total"></span></p>

<!--price, checkout-->
</div>
<button id="checkout-button">Place Order</button>
</div>
<script src="./scripts/cart.js"></script>
<script src="./scripts/checkout.js"></script>
<!-- <script src="./scripts/cart.js"></script> -->

{% endblock %}
{% endif %}
<script src="./scripts/cart.js"></script>
<script src="./scripts/checkout.js"></script>
<!-- <script src="./scripts/cart.js"></script> -->
{% else %}
<h1>You must be a customer to place an order.</h1>
{% endif %}
{% else %}
<h1>You must logged in in order to place an order.</h1>
<a class="login" href="/login">Log in</a>
{% endif %}
{% endblock %}
125 changes: 125 additions & 0 deletions build/scripts/aftercheckout.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
async function getOrder(id) {
const response = await fetch(`/api/order/${id}`);
if (response.headers.get("content-type") === 'application/json') {
const data = await response.json();
const order = data['response'];
return order
}
return undefined
}



async function loadOrder() {
const url = window.location.href
const urlSplitted = url.split('/');
const id = urlSplitted[urlSplitted.length - 1];
const order = await getOrder(id);
// console.log(order)
if (order) {
// set order id
document.getElementsByClassName('order-id')[0].textContent = `Order ID: ${order['orderID']}`
// display order items
loadOrderItems(order['dishes'])
// display order costs
loadCosts(order['dishes'], order['deliveryMethod'] === 'delivery');
// display order status
loadStatus(order['status'])
}
else {
orderContainer = document.getElementsByClassName('order-container')[0];
notFound = createElement('p', { text: 'Order not found' })
orderContainer.appendChild(notFound);
}
// openModel();
}

function loadOrderItems(items) {
const orderItems = document.getElementsByClassName('order-items')[0];
let h2 = createElement('h2', { text: 'Items' });
let itemdiv = createElement('div', {class:'order-items-div'})
orderItems.appendChild(h2);
items.forEach(item => {
orderItem = createOrderItem(item);
itemdiv.appendChild(orderItem);
})
orderItems.appendChild(itemdiv);
}

function createOrderItem(item) {
const orderItem = createElement('div', { class: 'order-item' });
const image = createElement('img', { class: 'order-img', src: item['imageURL'] });
const infoContainer = createElement('div', { class: 'order-item-info' });
const name = createElement('h3', { text: item.dishName})
const price = createElement('p', { text: `${item.quantity} x ${item.price} : ${(Number(item.quantity)*Number(item.price)).toFixed(2)}` });
appendChildren(infoContainer, [name, price]);
appendChildren(orderItem, [image, infoContainer]);
return orderItem;
}

function loadCosts(items, isDelivery) {
const prices = calculateCartPrice(items, isDelivery);
const orderCosts = document.getElementsByClassName('order-cost')[0]
const h2 = createElement('h2', { text: 'Costs' });
orderCosts.appendChild(h2);
const priceElementArray = Object.keys(prices).map(priceType => {
return createElement('p', { text: `${priceType}: ${prices[priceType].toFixed(2)}` });
})
appendChildren(orderCosts, priceElementArray);

}
// cur
function calculateCartPrice(items, isDelivery) {
let subtotal = 0;
let taxes = 0;
let deliveryFee = 0;
let total = 0;
items.forEach(item => { subtotal = item.price * item.quantity; })
taxes = subtotal * 0.08875;
isDelivery && (deliveryFee = 7.99);
total = subtotal + taxes + deliveryFee;
return { subtotal, taxes, deliveryFee, total };
}

function loadStatus(status) {
const orderStatus = document.getElementsByClassName('order-status')[0];
const h2 = createElement('h2', { text: 'Status' });
const p = createElement('p', { text: status });
appendChildren(orderStatus, [h2, p]);
}

loadOrder();
// function openModel() { // Opens a selected modal.
// doNotReload = true;
// const back = document.getElementById('displayblock');
// back.onclick = function() {closeModel();};
// back.style.display = "block";
// console.log(back);
// const model = document.getElementById('ordermodel');
// model.style.display = "block";
// }

// function closeModel() { // Closes a selected modal.
// document.getElementById('displayblock').style.display = "none";
// const model = document.getElementById('ordermodel');
// model.style.display = "none";
// cleanModel();
// doNotReload = false;
// }

// function cleanModel(){
// document.getElementsByClassName('order-id')[0].textContent = "";

// let orderitems = document.getElementById("order-items").children;
// Array.from(orderitems).forEach(element => {
// element.remove();
// });
// let ordercost = document.getElementById("order-cost").children;
// Array.from(ordercost).forEach(element => {
// element.remove();
// });
// let orderstatus = document.getElementById("order-status").children;
// Array.from(orderstatus).forEach(element => {
// element.remove();
// });
// }
4 changes: 2 additions & 2 deletions build/scripts/cart.js
Original file line number Diff line number Diff line change
Expand Up @@ -130,8 +130,8 @@ function updateItemQuantity(dishID, newQuantity) {

function getCartTotal(items) {
let total = 0;
items.forEach(item => { total += item.price * item.quantity; });
return total;
items.forEach(item => { total += Number(item.price) * Number(item.quantity); });
return Number(total.toFixed(2));
}

function clearCart() {
Expand Down
11 changes: 7 additions & 4 deletions build/scripts/checkout.js
Original file line number Diff line number Diff line change
Expand Up @@ -87,13 +87,14 @@ function calculateCartPrice(subtotal, isDelivery) {
taxes = subtotal * 0.08875;
isDelivery && (deliveryFee = 7.99);
total = subtotal + taxes + deliveryFee;
console.log({ subtotal, taxes, deliveryFee, total })
return { subtotal, taxes, deliveryFee, total };
}

function loadPrice() {
let cart = getCart();
console.log(cart);
let prices = calculateCartPrice(cart.total, isDelivery);
let prices = calculateCartPrice(Number(cart.total), isDelivery);
Object.keys(prices).forEach(priceType => {
document.getElementById(priceType).textContent = prices[priceType].toFixed(2);
})
Expand Down Expand Up @@ -131,10 +132,12 @@ async function checkout() {
},
body: data
});

const order = await response.json();
setTimeout(() => {
location.replace(`/checkout/${order['response'].orderID}`);
}, 3000);
clearCart();
}

// clean up unnessary functions and code later
loadCheckoutCart();
document.getElementById('checkout-button').addEventListener('click', checkout);
loadCheckoutCart();
Loading

0 comments on commit b1ea3d8

Please sign in to comment.