diff --git a/client/src/assets/Checkout/address.svg b/client/src/assets/Checkout/address.svg new file mode 100644 index 0000000..7e0c3ab --- /dev/null +++ b/client/src/assets/Checkout/address.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/assets/Checkout/card.svg b/client/src/assets/Checkout/card.svg new file mode 100644 index 0000000..916ee47 --- /dev/null +++ b/client/src/assets/Checkout/card.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/assets/Checkout/leftarrow.svg b/client/src/assets/Checkout/leftarrow.svg new file mode 100644 index 0000000..414b7f6 --- /dev/null +++ b/client/src/assets/Checkout/leftarrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/Checkout/phone.svg b/client/src/assets/Checkout/phone.svg new file mode 100644 index 0000000..6f7e94a --- /dev/null +++ b/client/src/assets/Checkout/phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/Checkout/rightarrow.svg b/client/src/assets/Checkout/rightarrow.svg new file mode 100644 index 0000000..2e1b6e5 --- /dev/null +++ b/client/src/assets/Checkout/rightarrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/helper/formatPhoneNumber.js b/client/src/helper/formatPhoneNumber.js new file mode 100644 index 0000000..4dbea8d --- /dev/null +++ b/client/src/helper/formatPhoneNumber.js @@ -0,0 +1,8 @@ +export function formatPhoneNumber(number) { + const numberString = number.toString(); + const areaCode = numberString.substring(2, 5); + const sectionOne = numberString.substring(5, 8); + const sectionTwo = numberString.substring(8, 11); + + return `(${areaCode}) ${sectionOne}-${sectionTwo}` +} \ No newline at end of file diff --git a/client/src/routes/checkout/Order/Details.js b/client/src/routes/checkout/Order/Details.js new file mode 100644 index 0000000..3668231 --- /dev/null +++ b/client/src/routes/checkout/Order/Details.js @@ -0,0 +1,47 @@ +import { + Box, + Typography +} from "@mui/material"; +import React from "react"; + +import { getTotal, getTotalCount } from "../../../helper/getTotalsAndFees.js"; + +import { Image } from '../../../shared/loading-image/Image' + +const Details = ({ currentCart, rusherTip }) => { + const numberOfItems = getTotalCount(currentCart) + + return ( + + + {numberOfItems} {numberOfItems === 1 ? 'item' : 'items'} in cart • ${(getTotal(currentCart) + rusherTip).toFixed(2)} + + + {currentCart && + currentCart.slice(0,4).map((item, index) => { + return + })} + + + ); +}; + +export default Details; \ No newline at end of file diff --git a/client/src/routes/checkout/Order/OrderDetails.js b/client/src/routes/checkout/Order/OrderDetails.js index 72e7ab5..9fc3a4f 100644 --- a/client/src/routes/checkout/Order/OrderDetails.js +++ b/client/src/routes/checkout/Order/OrderDetails.js @@ -1,15 +1,18 @@ -import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos"; -import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos"; -import CreditCardIcon from "@mui/icons-material/CreditCard"; -import ClearIcon from "@mui/icons-material/Clear"; +import {ReactComponent as LeftArrowIcon} from '../../../assets/Checkout/leftarrow.svg' +import {ReactComponent as RightArrowIcon} from '../../../assets/Checkout/rightarrow.svg' +import {ReactComponent as AddressIcon} from '../../../assets/Checkout/address.svg' +import {ReactComponent as CardIcon} from '../../../assets/Checkout/card.svg' +import {ReactComponent as PhoneIcon} from '../../../assets/Checkout/phone.svg' import { Box, Button, ButtonGroup, Container, Divider, + Drawer, Grid, TextField, + ToggleButton, Typography, } from "@mui/material"; import React, { useState, useContext } from "react"; @@ -18,14 +21,13 @@ import { useProducts } from "../../../context/product/product-handler"; import { useCheckout } from "../../../context/user/checkout-handler"; import { UserContext } from "../../../context/user/user-context"; -import { getTotal, getTotalCount } from "../../../helper/getTotalsAndFees.js"; +import styles from "./OrderDetails.module.css"; +import { buttonSelector } from './muiStyles'; -import building from "../../../assets/OrderDetails/building.svg"; -import stairs from "../../../assets/OrderDetails/stairs.svg"; -import notes from "../../../assets/OrderDetails/notes.svg"; +import Details from "./Details"; +import TipSelector from './TipSelector'; -import { headers } from "./muiStyles.js"; -import styles from "./OrderDetails.module.css"; +import { formatPhoneNumber } from '../../../helper/formatPhoneNumber' const RUSHER_TIP_1 = 1.5; const RUSHER_TIP_2 = 2; @@ -37,60 +39,6 @@ const REPLACEMENT_0 = 0; const REPLACEMENT_1 = 1; const REPLACEMENT_2 = 2; -const CAMPUS = "UCSD"; -const BUILDING = "UCSD Building"; -const FLOOR = "1/12"; -const MESSAGE = "Leave it at my door"; - -const Details = ({ currentCart, rusherTip }) => { - return ( -
-
- {currentCart && - currentCart.map((item, index) => { - if (index < 4) - return ; - })} -
-
- - {currentCart && - currentCart.map((item, index) => { - if (index < 4) { - return {item.name}; - } - - if (index === 4 && currentCart.length > 4) { - return "..."; - } - })} - -
- Item Count - - {getTotalCount(currentCart)} - -
-
- Subtotal - - ${getTotal(currentCart).toFixed(2)} - -
-
- Tip - ${rusherTip.toFixed(2)} -
-
- Total - - ${(getTotal(currentCart) + rusherTip).toFixed(2)} - -
-
-
- ); -}; const OrderDetails = ({ setStripeClientSecret }) => { const navigate = useNavigate(); @@ -189,125 +137,188 @@ const OrderDetails = ({ setStripeClientSecret }) => { } }; + console.log(user) return ( <> -
- -

Order Details

-
- - + + navigate(-1)} /> + + Order Details + + - + -
- - Order Summary - -
-
+
-
-
- + - Address - - -
- -
- - - UCSD Building - - -
- - {user.shipping_address && - user.shipping_address.building && - user.shipping_address.building} - -
-
-
- - - Floor / Apartment # - -
- - {user.shipping_address && - user.shipping_address.floor_apartment && - user.shipping_address.floor_apartment} - -
-
-
- - - Notes for Rusher - -
-

{user.message}

-
-
- - {(!user.shipping_address || - !user.shipping_address.campus || - !user.shipping_address.building || - !user.shipping_address.floor_apartment) && ( -
- + + + + + + + + {formatPhoneNumber(user.phone)} + + + + + { + alert("Phone Page"); }} + /> + + + + + + + + + Discover Card 4414 + + + + + { - alert("Address page"); + alert("Card Page"); }} - > - You haven't set a location yet. Click here to set one! - -
- )} -
+ /> + + { > Rusher Tip - - - - - - - + + - - {showOtherTip && ( -
- - Other Tip $ - - -
- )} { height: "inherit", gap: "10px", display: "flex", - marginBottom: "60px", + marginBottom: "30px", alignItems: "center", }} > Replacement Items - - - - - + + {" "} -
- - -
+ + + + + ); }; diff --git a/client/src/routes/checkout/Order/OrderDetails.module.css b/client/src/routes/checkout/Order/OrderDetails.module.css index 70834c4..fc1470f 100644 --- a/client/src/routes/checkout/Order/OrderDetails.module.css +++ b/client/src/routes/checkout/Order/OrderDetails.module.css @@ -232,7 +232,7 @@ header > p { .rusherTips { width: 100%; max-width: 610px; - height: inherit; + height: "inherit"; display: flex; flex-direction: column; gap: 10px; @@ -282,14 +282,6 @@ header > p { background: #7141fa; } -.tipButton:nth-child(1) { - border-radius: 20px 0 0 20px; -} - -.tipButton:nth-child(4) { - border-radius: 0 20px 20px 0; -} - /* .tipButton:focus { background: #7141fa; color: white; diff --git a/client/src/routes/checkout/Order/TipSelector.js b/client/src/routes/checkout/Order/TipSelector.js new file mode 100644 index 0000000..9acc577 --- /dev/null +++ b/client/src/routes/checkout/Order/TipSelector.js @@ -0,0 +1,106 @@ +import React, { useState } from "react"; +import { TextField, Typography, Button } from "@mui/material"; +import { Box } from "@mui/system"; +import CloseIcon from "@mui/icons-material/Close"; + +const MINTIP = 0; +const RUSHER_TIP_1 = 1.5; + +const TipSelector = ({ setShowOtherTip, otherTip, handleOtherTipChange, setSelectedTip, setRusherTip, setOtherTip }) => { + const handleSubmit = (e) => { + e.preventDefault(); + setShowOtherTip(false) + } + + const handleClose = (e) => { + setSelectedTip(RUSHER_TIP_1) + setRusherTip(RUSHER_TIP_1) + setOtherTip(0) + setShowOtherTip(false) + } + + return ( + + + + Enter custom tip + + + + + 100% of your tip goes to your hardworking Rusher + +
+ + + +
+ ) +} + +export default TipSelector; \ No newline at end of file diff --git a/client/src/routes/checkout/Order/muiStyles.js b/client/src/routes/checkout/Order/muiStyles.js index d37938e..0fc9939 100644 --- a/client/src/routes/checkout/Order/muiStyles.js +++ b/client/src/routes/checkout/Order/muiStyles.js @@ -51,3 +51,53 @@ export const headers = { webkitBoxOrient: "vertical", }, }; + +export const buttonSelector = { + buttonGroup: { + display: "flex", + justifyContent: "space-around", + borderRadius: "20px", + backgroundColor: "#EEEEEE", + width: "100%", + height: "41px" + }, + + tipButton: { + borderRadius: "20px", + border: "none", + textTransform: "none", + borderRadius: "20px", + fontWeight: "500", + fontFamily: "Inter", + color: "#000000", + fontSize: "16px", + width: "25%", + '&.Mui-selected, &.Mui-selected:hover': { + backgroundColor: "black", + border: "none", + color: "#FFFFFF", + } + }, + + replacementButton: { + borderRadius: "20px", + border: "none", + textTransform: "none", + borderRadius: "20px", + fontWeight: "500", + fontFamily: "Inter", + color: "#000000", + fontSize: "16px", + width: "33.3%", + '&.Mui-selected, &.Mui-selected:hover': { + backgroundColor: "black", + border: "none", + color: "#FFFFFF", + } + }, + + tipSelectorDrawer: { + borderRadius: "16px 16px 0 0", + overflow: "hidden" + } +} \ No newline at end of file diff --git a/client/src/shared/view-cart/Cart.js b/client/src/shared/view-cart/Cart.js index 77b7386..7bf26ad 100644 --- a/client/src/shared/view-cart/Cart.js +++ b/client/src/shared/view-cart/Cart.js @@ -293,7 +293,7 @@ const Cart = ({ handleDrawerClose }) => { }} >