Skip to content
Permalink
Browse files

1. date selection

  • Loading branch information
scottpdawson committed Dec 1, 2019
1 parent 396f02e commit d9a202e24b16e926394212d5984c186a8f00c45d
Showing with 170 additions and 57 deletions.
  1. +63 −18 src/App.tsx
  2. +98 −36 src/Constants.ts
  3. +9 −3 src/OrderUtils.ts
@@ -7,7 +7,10 @@ import {
orderItem,
boxSize,
boxSizes,
flavor,
cakeFlavors,
deliveryOption,
deliveryOptions,
frostingFlavors,
defaultCakeFlavor,
defaultFrostingFlavor,
@@ -20,6 +23,7 @@ import {
getFlavorFromString,
getCurrentOrder,
getOrderItemFromKey,
getDeliveryOptionFromKey,
} from "./OrderUtils";
import { generateUniqueKey } from "./Helpers";
import "react-datepicker/dist/react-datepicker.css";
@@ -47,8 +51,25 @@ function App() {
};

const updateOrderDetails = (orderDetails: orderItem[]) => {
// calculate price for each orderItem in orderDetails
orderDetails.forEach((i: orderItem) => {
let basePrice = i.basePrice;
let quantity = i.size.count;
let cakeUpcharge = quantity * i.cakeFlavor.upCharge * i.size.flavorMultiplier;
let numberOfFlavors = 0;
let frostingUpcharge = 0;
i.frostingFlavor.forEach((f: flavor) => {
numberOfFlavors += (f.name != "- none -") ? 1 : 0;
frostingUpcharge += (f.name != "- none -") ? f.upCharge : 0;
});
i.totalPrice =
basePrice +
cakeUpcharge +
(((frostingUpcharge * quantity) / numberOfFlavors) * i.size.flavorMultiplier);
});

setState({
orderTotal: calculateTotal(orderDetails),
orderTotal: calculateTotal(orderDetails) + state.deliveryOption.price,
orderDetails: orderDetails
});
};
@@ -60,7 +81,8 @@ function App() {
size: newItem,
cakeFlavor: defaultCakeFlavor,
frostingFlavor: [defaultFrostingFlavor, defaultNullFrostingFlavor],
price: newItem.price
flavorMultiplier: newItem.flavorMultiplier,
basePrice: newItem.price * newItem.count,
});
updateOrderDetails(currentOrder);
};
@@ -107,28 +129,47 @@ function App() {
}
};

const updateDeliveryOption = (
e: any,
) => {
let newDeliveryOption = getDeliveryOptionFromKey(e.target.value, deliveryOptions);
if (newDeliveryOption) {
setState({
orderTotal: calculateTotal(state.orderDetails) + newDeliveryOption.price,
deliveryOption: newDeliveryOption,
});
}
};

return (
<div>
<h1>Cupcake Configurator</h1>
<b>When would you like your order?</b>
<br />
You may submit a quote request for delivery 48 hours in advance or more.
Before requesting a quote, please check my{" "}
<a href="https://emoticakes.com/" target="_blank">
availability calendar
</a>
.<br />
<h4>When would you like your order?</h4>
<p>You may submit a quote request for delivery 48 hours in advance or more.</p>
<p>Before requesting a quote, please check my <a href="https://emoticakes.com/" target="_blank">availability calendar</a>.</p>
<DatePicker
selected={state.orderDate}
minDate={addDays(new Date(), 2)}
onChange={date => updateOrderDate(date)}
monthsShown={2}
/>
<h4>Delivery Option</h4>
<select
value={state.deliveryOption.key}
onChange={e => updateDeliveryOption(e)}
>
{Object.keys(deliveryOptions).map((deliveryOption, i) => (
<option key={deliveryOptions[i].key} value={deliveryOptions[i].key}>
{deliveryOptions[i].name}
{deliveryOptions[i].price ? "(+$" + deliveryOptions[i].price + ")" : ""}
</option>
))}
</select>
<h4>Add to Order</h4>
<ul>
{Object.keys(boxSizes).map((item, i) => (
<li onClick={e => addToOrder(boxSizes[i])} key={i}>
{boxSizes[i].name} ({boxSizes[i].count})
{boxSizes[i].name} ({boxSizes[i].count}) <i>per cupcake: ${boxSizes[i].price}</i>
</li>
))}
</ul>
@@ -139,9 +180,12 @@ function App() {
<tr>
<th></th>
<th>Item</th>
<th># of Cupcakes</th>
<th>Base Price</th>
<th>Cake</th>
<th>Frosting</th>
<th>2nd Frosting (optional)</th>
<th>Item Total</th>
</tr>
</thead>
<tbody>
@@ -153,6 +197,8 @@ function App() {
</button>
</td>
<td>{item.size.name}</td>
<td>{item.size.count}</td>
<td>${(item.size.price * item.size.count).toFixed(2)}</td>
<td>
<select
value={item.cakeFlavor && item.cakeFlavor.name}
@@ -161,6 +207,7 @@ function App() {
{Object.keys(cakeFlavors).map((thisFlavor, i) => (
<option key={i} value={cakeFlavors[i].name}>
{cakeFlavors[i].name}
{cakeFlavors[i].upCharge ? "(+" + (cakeFlavors[i].upCharge * item.size.flavorMultiplier).toFixed(2) + " per)" : ""}
</option>
))}
</select>
@@ -173,6 +220,7 @@ function App() {
{Object.keys(frostingFlavors).map((thisFlavor, i) => (
<option key={i} value={frostingFlavors[i].name}>
{frostingFlavors[i].name}
{frostingFlavors[i].upCharge ? "(+" + (frostingFlavors[i].upCharge * item.size.flavorMultiplier).toFixed(2) + " per)" : ""}
</option>
))}
</select>
@@ -183,15 +231,14 @@ function App() {
onChange={e => updateFrostingFlavor(e, item.key, 1)}
>
{Object.keys(frostingFlavors).map((thisFlavor, i) => (
<option
key={i}
value={frostingFlavors[i] && frostingFlavors[i].name}
>
<option key={i} value={frostingFlavors[i].name}>
{frostingFlavors[i].name}
{frostingFlavors[i].upCharge ? "(+" + (frostingFlavors[i].upCharge * item.size.flavorMultiplier).toFixed(2) + " per)" : ""}
</option>
))}
</select>
</td>
<td>${item.totalPrice.toFixed(2)}</td>
</tr>
))}
</tbody>
@@ -244,9 +291,7 @@ function App() {

// todo:
//
// 1. provide a message on cupcakes (custom disc color, letter color)
// 2. delivery (extra charge) or pick-up
// 3. variable pricing based on flavor
// provide a message on cupcakes (custom disc color, letter color)
//

export default App;

1 comment on commit d9a202e

@scottpdawson

This comment has been minimized.

Copy link
Owner Author

scottpdawson commented on d9a202e Dec 1, 2019

  1. date selection
  2. delivery option
  3. name and contact information
  4. added email functionality
  5. refactored to use Hooks
  6. variable pricing for some flavors
Please sign in to comment.
You can’t perform that action at this time.