From b4a64448844b8bc60de7604ff778056df44a7041 Mon Sep 17 00:00:00 2001 From: Romana-Aijaz Date: Fri, 15 Sep 2023 15:54:51 +0500 Subject: [PATCH] cart --- CustomerWebApp/package.json | 2 +- .../components/CustomizeCard/CustomizeCard.js | 199 +++++++++++------- .../src/components/CustomizeCard/styles.js | 4 + .../src/components/OrderDetail/DetailCard.js | 2 + .../components/OrderDetail/ItemsContainer.js | 65 +++--- .../src/configuration/configurataion.js | 4 +- CustomerWebApp/src/screens/Cart/Cart.js | 18 ++ .../src/screens/Customize/Cutomize.js | 2 + CustomerWebApp/src/utils/constant.js | 11 +- 9 files changed, 199 insertions(+), 108 deletions(-) create mode 100644 CustomerWebApp/src/screens/Cart/Cart.js diff --git a/CustomerWebApp/package.json b/CustomerWebApp/package.json index 92b5daf..fe89bbb 100644 --- a/CustomerWebApp/package.json +++ b/CustomerWebApp/package.json @@ -27,7 +27,7 @@ "web-vitals": "^1.0.1" }, "scripts": { - "start": "react-scripts start", + "start": "react-scripts --openssl-legacy-provider start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" diff --git a/CustomerWebApp/src/components/CustomizeCard/CustomizeCard.js b/CustomerWebApp/src/components/CustomizeCard/CustomizeCard.js index 11173ae..43a20b6 100644 --- a/CustomerWebApp/src/components/CustomizeCard/CustomizeCard.js +++ b/CustomerWebApp/src/components/CustomizeCard/CustomizeCard.js @@ -1,37 +1,139 @@ import { Box, Grid, Divider, Button, ButtonBase, Typography, useTheme, Radio, RadioGroup } from "@material-ui/core"; -import React from "react"; +import React, { useState, useContext } from "react"; +import { gql, useMutation } from "@apollo/client"; +import { placeOrder } from "../../apollo/graphQL"; +import { UserContext } from "../../context/User"; +import { createAddress } from "../../apollo/graphQL"; + + import useStyles from "./styles"; const image = ['https://res.cloudinary.com/do1ia4vzf/image/upload/v1619174168/food/kjzgiugla2gteg1yvihk.jpg', 'https://res.cloudinary.com/do1ia4vzf/image/upload/v1619174168/food/kjzgiugla2gteg1yvihk.jpg', 'https://res.cloudinary.com/do1ia4vzf/image/upload/v1619174168/food/kjzgiugla2gteg1yvihk.jpg', 'https://res.cloudinary.com/do1ia4vzf/image/upload/v1619174168/food/kjzgiugla2gteg1yvihk.jpg'] function CustomizeCard(props) { + const { profile } = useContext(UserContext) + console.log(profile) + const [cartDetails, setCartDetails] = useState({}) + console.log(props.data.item.variations) + console.log(props.data.id) + console.log(props.data.title) + const [orderDetails, setOrderDetails] = useState({ restaurant: "", meal: "", variations: [] }) + const [quantities, setQuantities] = useState(props.data.item.variations.map(() => 0)); + const [totalBill, setTotalBill] = useState(0) + + const theme = useTheme(); const classes = useStyles(); + const updateQuantity = (index, newQuantity, price) => { + const newQuantities = [...quantities]; + newQuantities[index] = newQuantity >= 0 ? newQuantity : 0; + setQuantities(newQuantities); + }; + + + const updateCart = async () => { + console.log(quantities) + setOrderDetails({ restaurant: props.data.item.title }) + var tempTotal = 0; + props.data.item.variations.map((variation, index) => ( + tempTotal = tempTotal + ((variation.price) * (quantities[index])) + )) + setTotalBill(tempTotal) + + } + return ( - {'KFC Meal'} + {orderDetails.title} + {props.data.item.title + ' Meal'} + {console.log(quantities)} - {'KFC Meal(Midnight)'} - {'$122.45'} + {props.data.item.title + ' Meal(Midnight)'} + {'Total'} + {totalBill} + {'Restaurant'} + {props.data.title} - {'Double Zinger Pattie Burger with regular drink'} - + {props.data.item.description} + {props.data.item.variations.length > 0 ? ( + props.data.item.variations.map((variation, index) => ( + <> + {'Select Variation'}(Optional) + + + + + + + {variation.title} + + {'$' + variation.price} + + + + + + + + + {quantities[index]} + + + + + + + )) + ) : (<>)} + + {/* {'Select Variation'}(Optional) - + - Small Cheese + Small @@ -42,7 +144,7 @@ function CustomizeCard(props) { - Medium Cheese + Medium @@ -53,12 +155,12 @@ function CustomizeCard(props) { - Large Cheese + Large - + */} @@ -71,7 +173,7 @@ function CustomizeCard(props) { Pepsi - + @@ -82,75 +184,26 @@ function CustomizeCard(props) { Coke - + - - - - - - - {2} - - - - - - + + ); } -export default CustomizeCard; +export default CustomizeCard; \ No newline at end of file diff --git a/CustomerWebApp/src/components/CustomizeCard/styles.js b/CustomerWebApp/src/components/CustomizeCard/styles.js index 7ba6cae..0f5ea36 100644 --- a/CustomerWebApp/src/components/CustomizeCard/styles.js +++ b/CustomerWebApp/src/components/CustomizeCard/styles.js @@ -82,6 +82,10 @@ const useStyles = makeStyles((theme) => ({ backgroundColor: theme.palette.primary.light, }, }, + variationPrice: { + fontWeight: 700, + marginLeft: 20 + } })); export default useStyles; diff --git a/CustomerWebApp/src/components/OrderDetail/DetailCard.js b/CustomerWebApp/src/components/OrderDetail/DetailCard.js index ae27f49..ce375fd 100644 --- a/CustomerWebApp/src/components/OrderDetail/DetailCard.js +++ b/CustomerWebApp/src/components/OrderDetail/DetailCard.js @@ -6,6 +6,7 @@ import { UserContext } from "../../context/User"; import useStyles from "./styles"; function DetailCard(props) { + console.log(props) const classes = useStyles(); const navigation = useHistory(); const { isLoggedIn } = useContext(UserContext); @@ -84,3 +85,4 @@ function DetailCard(props) { } export default DetailCard; + diff --git a/CustomerWebApp/src/components/OrderDetail/ItemsContainer.js b/CustomerWebApp/src/components/OrderDetail/ItemsContainer.js index 0c64ef1..9f18a2c 100644 --- a/CustomerWebApp/src/components/OrderDetail/ItemsContainer.js +++ b/CustomerWebApp/src/components/OrderDetail/ItemsContainer.js @@ -1,12 +1,15 @@ import { Box, Grid, Paper, Button, Typography, useTheme } from "@material-ui/core"; -import React, {useState, useContext} from "react"; +import React, { useState, useContext } from "react"; import Skeleton from '@material-ui/lab/Skeleton'; import useStyles from "./styles"; import { Link as RouterLink } from "react-router-dom"; -import {foods } from "../../apollo/graphQL"; +import { foods } from "../../apollo/graphQL"; import { gql, useQuery } from "@apollo/client"; import { get } from "lodash"; import ConfigurationContext from "../../context/Configuration"; +import CustomizeCard from "../CustomizeCard/CustomizeCard"; +import { Link } from 'react-router-dom'; + // constants const FOODS = gql` @@ -15,24 +18,25 @@ const FOODS = gql` function ItemContainer(props) { const theme = useTheme(); + console.log(props.title) const classes = useStyles(); const [filters, setFilters] = useState({}) const { loading, error, data, refetch, networkStatus } = useQuery(FOODS, { variables: { category: props._id, ...filters } - }) + }) const configuration = useContext(ConfigurationContext) - console.log('data', data) + console.log('data', data) - if(loading) - return ( - <> - - - - - - - ) + if (loading) + return ( + <> + + + + + + + ) return ( @@ -41,24 +45,25 @@ function ItemContainer(props) { {'Deal Contains'} { data?.foodByCategory && data?.foodByCategory.map((item, index) => ( - - - - - {item?.title} - {item.description} - {/* {item.variations[0].discounted > 0 && ( + + {console.log(item)} + + + + {item?.title} + {item.description} + {/* {item.variations[0].discounted > 0 && ( {item.variations[0].price.toFixed(2)} )} */} - {/* {item.variations[0].discounted > 0 && ( */} - - {configuration.currency_symbol}{''} {item.variations[0].price.toFixed(2)}{' '} - {configuration.currency_symbol}{''} {item.variations[0].price.toFixed(2)} + {/* {item.variations[0].discounted > 0 && ( */} + + {configuration.currency_symbol}{''} {item.variations[0].price.toFixed(2)}{' '} + {configuration.currency_symbol}{''} {item.variations[0].price.toFixed(2)} + + {/* )} */} - {/* )} */} - - - + + )) } @@ -67,4 +72,4 @@ function ItemContainer(props) { ); } -export default ItemContainer; +export default ItemContainer; \ No newline at end of file diff --git a/CustomerWebApp/src/configuration/configurataion.js b/CustomerWebApp/src/configuration/configurataion.js index 29df53a..3a703a5 100644 --- a/CustomerWebApp/src/configuration/configurataion.js +++ b/CustomerWebApp/src/configuration/configurataion.js @@ -1,5 +1,5 @@ -const SERVER_URL = "http://10.97.28.31:8000/"; -const WS_SERVER_URL = "ws://10.97.28.31:8000/"; +const SERVER_URL = "http://10.97.0.65:8000/"; +const WS_SERVER_URL = "ws://10.97.0.65:8000/"; const GOOGLE_CLIENT_ID = "967541328677-ge2hpr0n095d0nro56kot0t4q388dsll.apps.googleusercontent.com"; diff --git a/CustomerWebApp/src/screens/Cart/Cart.js b/CustomerWebApp/src/screens/Cart/Cart.js new file mode 100644 index 0000000..51ce57d --- /dev/null +++ b/CustomerWebApp/src/screens/Cart/Cart.js @@ -0,0 +1,18 @@ +import React from 'react' +import { useLocation } from 'react-router-dom'; +import { CustomizeCard } from '../../components'; + +const Cart = () => { + const location = useLocation(); + const item = location.state.item; + const id = location.state.id + const title = location.state.title + console.log(title) + return ( +
+ +
+ ) +} + +export default Cart \ No newline at end of file diff --git a/CustomerWebApp/src/screens/Customize/Cutomize.js b/CustomerWebApp/src/screens/Customize/Cutomize.js index 1b0c383..d66d78e 100644 --- a/CustomerWebApp/src/screens/Customize/Cutomize.js +++ b/CustomerWebApp/src/screens/Customize/Cutomize.js @@ -6,6 +6,7 @@ import useStyles from "./styles"; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import { useHistory } from "react-router-dom"; + function OrderDetail() { const theme = useTheme(); const classes = useStyles(); @@ -44,3 +45,4 @@ function OrderDetail() { } export default OrderDetail; + diff --git a/CustomerWebApp/src/utils/constant.js b/CustomerWebApp/src/utils/constant.js index 9dbb83e..23142b0 100644 --- a/CustomerWebApp/src/utils/constant.js +++ b/CustomerWebApp/src/utils/constant.js @@ -12,7 +12,7 @@ import { Settings, Signup, } from "../screens"; - +import Cart from "../screens/Cart/Cart"; const ROUTES = [ { path: "/Login", @@ -86,6 +86,12 @@ const ROUTES = [ authRequired: true, accessRequired: false, }, + { + path: "/Cart", + component: Cart, + authRequired: true, + accessRequired: false, + }, ]; const HEADER_NAV = [ @@ -114,6 +120,7 @@ const HEADER_NAV = [ name: "Settings", navigate: "/Settings", }, + ]; const HELP_NAV = [ @@ -157,4 +164,4 @@ const ADDRESS_LABEL = [ const ACTIVE_ORDERS = ["PENDING", "PICKED", "ACCEPTED"]; const INACTIVE_ORDERS = ["DELIVERED", "COMPLETED"]; -export { ROUTES, HEADER_NAV, HELP_NAV, ADDRESS_LABEL, ACTIVE_ORDERS, INACTIVE_ORDERS }; +export { ROUTES, HEADER_NAV, HELP_NAV, ADDRESS_LABEL, ACTIVE_ORDERS, INACTIVE_ORDERS }; \ No newline at end of file