From d1ad57330a456ff29d38ccddc6c83b4ca37dd3d3 Mon Sep 17 00:00:00 2001 From: TaimurHasan Date: Fri, 25 Nov 2022 15:33:41 -0500 Subject: [PATCH 1/3] initial redesign and refactor of order details checkout page --- client/src/assets/Checkout/address.svg | 4 + client/src/assets/Checkout/leftarrow.svg | 3 + client/src/assets/Checkout/rightarrow.svg | 3 + client/src/routes/checkout/Order/Details.js | 47 +++ .../src/routes/checkout/Order/OrderDetails.js | 338 ++++++------------ .../checkout/Order/OrderDetails.module.css | 10 +- client/src/routes/checkout/Order/muiStyles.js | 28 ++ client/src/shared/view-cart/Cart.js | 2 +- 8 files changed, 190 insertions(+), 245 deletions(-) create mode 100644 client/src/assets/Checkout/address.svg create mode 100644 client/src/assets/Checkout/leftarrow.svg create mode 100644 client/src/assets/Checkout/rightarrow.svg create mode 100644 client/src/routes/checkout/Order/Details.js 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/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/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/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..291d1ea 100644 --- a/client/src/routes/checkout/Order/OrderDetails.js +++ b/client/src/routes/checkout/Order/OrderDetails.js @@ -1,7 +1,7 @@ -import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos"; -import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos"; +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 CreditCardIcon from "@mui/icons-material/CreditCard"; -import ClearIcon from "@mui/icons-material/Clear"; import { Box, Button, @@ -10,6 +10,7 @@ import { Divider, Grid, TextField, + ToggleButton, Typography, } from "@mui/material"; import React, { useState, useContext } from "react"; @@ -18,14 +19,10 @@ 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 building from "../../../assets/OrderDetails/building.svg"; -import stairs from "../../../assets/OrderDetails/stairs.svg"; -import notes from "../../../assets/OrderDetails/notes.svg"; - -import { headers } from "./muiStyles.js"; import styles from "./OrderDetails.module.css"; +import { buttonSelector } from './muiStyles'; + +import Details from "./Details"; const RUSHER_TIP_1 = 1.5; const RUSHER_TIP_2 = 2; @@ -37,60 +34,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(); @@ -191,118 +134,89 @@ const OrderDetails = ({ setStripeClientSecret }) => { 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) && ( -
- { - alert("Address page"); - }} - > - You haven't set a location yet. Click here to set one! - -
- )} -
+ + { > Rusher Tip - - - - - - - + + - {showOtherTip && (
@@ -435,9 +335,11 @@ const OrderDetails = ({ setStripeClientSecret }) => { > Replacement Items @@ -488,47 +390,13 @@ const OrderDetails = ({ setStripeClientSecret }) => { {" "}
- - - - + + {" "} -
- -
+ + + + + ); }; 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 8620631..0fc9939 100644 --- a/client/src/routes/checkout/Order/muiStyles.js +++ b/client/src/routes/checkout/Order/muiStyles.js @@ -71,11 +71,33 @@ export const buttonSelector = { fontFamily: "Inter", color: "#000000", fontSize: "16px", - width: "88px", + 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/firebase.json b/firebase.json index 346982b..6979215 100644 --- a/firebase.json +++ b/firebase.json @@ -36,8 +36,5 @@ "ui": { "enabled": true } - }, - "extensions": { - "firestore-send-email": "firebase/firestore-send-email@0.1.19" } } From 7933c7d608f184f4356f0ab09805703ef251f22e Mon Sep 17 00:00:00 2001 From: TaimurHasan Date: Wed, 30 Nov 2022 20:07:02 -0500 Subject: [PATCH 3/3] restore firestore extension --- firebase.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/firebase.json b/firebase.json index 6979215..346982b 100644 --- a/firebase.json +++ b/firebase.json @@ -36,5 +36,8 @@ "ui": { "enabled": true } + }, + "extensions": { + "firestore-send-email": "firebase/firestore-send-email@0.1.19" } }