steve
/
keepyourmouthshut
mirror of https://github.com/ninjas-code-official/food-delivery-singlevendor
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

cart

This commit is contained in:
Romana-Aijaz 2023-09-15 15:54:51 +05:00
parent 7e0c6b23ed
commit b4a6444884
9 changed files with 199 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CustomerWebApp/package.json
View File

@ -27,7 +27,7 @@
"web-vitals": "^1.0.1" "web-vitals": "^1.0.1"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject"

199
CustomerWebApp/src/components/CustomizeCard/CustomizeCard.js
View File

@ -1,37 +1,139 @@
import { Box, Grid, Divider, Button, ButtonBase, Typography, useTheme, Radio, RadioGroup } from "@material-ui/core"; 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"; 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'] 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) { 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 theme = useTheme();
const classes = useStyles(); 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 ( return (
<Grid container direction="row" className={classes.center}> <Grid container direction="row" className={classes.center}>
<Grid container item xs={10}> <Grid container item xs={10}>
<Box className={classes.mt3} /> <Box className={classes.mt3} />
<Typography color="textPrimary" variant="h6" className={classes.subText}>{'KFC Meal'}</Typography> {orderDetails.title}
<Typography color="textPrimary" variant="h6" className={classes.subText}>{props.data.item.title + ' Meal'}</Typography>
<Box display="block" className={classes.mt3} /> <Box display="block" className={classes.mt3} />
</Grid> </Grid>
{console.log(quantities)}
<Grid container item xs={8}> <Grid container item xs={8}>
<Box display="block" className={classes.mt3} /> <Box display="block" className={classes.mt3} />
<Box display="flex" style={{ width: '100%' }} alignItems="center" justifyContent="space-between"> <Box display="flex" style={{ width: '100%' }} alignItems="center" justifyContent="space-between">
<Typography color="textPrimary">{'KFC Meal(Midnight)'}</Typography> <Typography color="textPrimary">{props.data.item.title + ' Meal(Midnight)'}</Typography>
<Typography color="primary" className={classes.subText}>{'$122.45'}</Typography> <Typography color="textPrimary">{'Total'}</Typography>
<Typography color="primary" className={classes.subText}>{totalBill}</Typography>
<Typography color="textPrimary">{'Restaurant'}</Typography>
<Typography color="primary" className={classes.subText}>{props.data.title}</Typography>
</Box> </Box>
<Box className={classes.mv2} /> <Box className={classes.mv2} />
<Typography variant="subtitle2" color="textSecondary">{'Double Zinger Pattie Burger with regular drink'}</Typography> <Typography variant="subtitle2" color="textSecondary">{props.data.item.description}</Typography>
<Box display="block" className={classes.mt3}> {props.data.item.variations.length > 0 ? (
props.data.item.variations.map((variation, index) => (
<><Box display="block" className={classes.mt3}>
<Typography color="textPrimary">{'Select Variation'}<Typography display="inline" color="textSecondary">(Optional)</Typography></Typography>
</Box>
<Grid item xs={12}>
<ButtonBase >
<Box display="flex" alignItems="center">
<Radio color="primary" checked={true} />
<Typography variant="body1" color="textSecondary">
{variation.title}
</Typography>
<Typography color="primary" className={classes.variationPrice}>{'$' + variation.price}</Typography>
</Box>
</ButtonBase>
</Grid>
<Grid xs={12} alignItems="center" justify="space-between" container item>
<Grid container alignItems="center" justify="space-between" item xs={5} >
<Button
variant="contained"
disableElevation
size="small"
className={classes.subBtn}
onClick={(e) => {
updateQuantity(index, quantities[index] - 1, variation.price);
}}
>
<Typography
align="center"
color="textSecondary"
className={classes.pH}
>
-
</Typography>
</Button>
<Typography>
{quantities[index]}
</Typography>
<Button
variant="contained"
disableElevation
size="small"
className={classes.subBtn}
onClick={(e) => {
updateQuantity(index, quantities[index] + 1, variation.price);
}}
>
<Typography
align="center"
color="textSecondary"
>
+
</Typography>
</Button>
</Grid>
</Grid>
</>
))
) : (<></>)}
{/*<Box display="block" className={classes.mt3}>
<Typography color="textPrimary">{'Select Variation'}<Typography display="inline" color="textSecondary">(Optional)</Typography></Typography> <Typography color="textPrimary">{'Select Variation'}<Typography display="inline" color="textSecondary">(Optional)</Typography></Typography>
</Box> </Box>
<Grid item xs={12}> <Grid item xs={12}>
<ButtonBase > <ButtonBase >
<Box display="flex" alignItems="center"> <Box display="flex" alignItems="center">
<Radio color="primary" checked={true} /> <Radio color="primary" checked={true} />
<Typography variant="body1" color="textSecondary"> <Typography variant="body1" color="textSecondary">
Small Cheese Small
</Typography> </Typography>
</Box> </Box>
</ButtonBase> </ButtonBase>
@ -42,7 +144,7 @@ function CustomizeCard(props) {
<Box display="flex" alignItems="center"> <Box display="flex" alignItems="center">
<Radio color="primary" checked={true} /> <Radio color="primary" checked={true} />
<Typography variant="body1" color="textSecondary"> <Typography variant="body1" color="textSecondary">
Medium Cheese Medium
</Typography> </Typography>
</Box> </Box>
@ -53,12 +155,12 @@ function CustomizeCard(props) {
<Box display="flex" alignItems="center"> <Box display="flex" alignItems="center">
<Radio color="primary" checked={true} /> <Radio color="primary" checked={true} />
<Typography variant="body1" color="textSecondary"> <Typography variant="body1" color="textSecondary">
Large Cheese Large
</Typography> </Typography>
</Box> </Box>
</ButtonBase> </ButtonBase>
</Grid> </Grid>*/}
<Divider style={{ width: '100%' }} className={classes.mt3} orientation="horizontal" /> <Divider style={{ width: '100%' }} className={classes.mt3} orientation="horizontal" />
<Box className={classes.mv2} /> <Box className={classes.mv2} />
<Grid item xs={12}> <Grid item xs={12}>
@ -71,7 +173,7 @@ function CustomizeCard(props) {
<Radio color="primary" checked={true} /> <Radio color="primary" checked={true} />
<Typography variant="body1" color="textSecondary"> <Typography variant="body1" color="textSecondary">
Pepsi Pepsi
</Typography> </Typography>
</Box> </Box>
</ButtonBase> </ButtonBase>
@ -82,75 +184,26 @@ function CustomizeCard(props) {
<Radio color="primary" checked={true} /> <Radio color="primary" checked={true} />
<Typography variant="body1" color="textSecondary"> <Typography variant="body1" color="textSecondary">
Coke Coke
</Typography> </Typography>
</Box> </Box>
</ButtonBase> </ButtonBase>
</Grid> </Grid>
</Grid> <Button
<Grid xs={12} alignItems="center" justify="space-between" container item> variant="contained"
<Grid container alignItems="center" justify="space-between" item xs={5} > color="secondary"
<Button disableElevation
variant="contained" className={classes.chatBtn}
disableElevation onClick={() => updateCart()}
size="small" >
className={classes.subBtn} <Typography align="center">Add To Cart</Typography>
onClick={(e) => { </Button>
e.preventDefault();
}}
>
<Typography
align="center"
color="textSecondary"
className={classes.pH}
>
-
</Typography>
</Button>
<Typography>
{2}
</Typography>
<Button
variant="contained"
disableElevation
size="small"
className={classes.subBtn}
onClick={(e) => {
e.preventDefault();
}}
>
<Typography
align="center"
color="textSecondary"
>
+
</Typography>
</Button>
</Grid>
<Grid container alignItems="center" justify="space-between" item xs={6}>
<Button
variant="contained"
color="secondary"
disableElevation
fullWidth
className={classes.chatBtn}
onClick={(e) => {
e.preventDefault();
}}
>
<Typography
align="center"
>
Add To Cart
</Typography>
</Button>
</Grid>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
); );
} }
export default CustomizeCard; export default CustomizeCard;

4
CustomerWebApp/src/components/CustomizeCard/styles.js
View File

@ -82,6 +82,10 @@ const useStyles = makeStyles((theme) => ({
backgroundColor: theme.palette.primary.light, backgroundColor: theme.palette.primary.light,
}, },
}, },
variationPrice: {
fontWeight: 700,
marginLeft: 20
}
})); }));
export default useStyles; export default useStyles;

2
CustomerWebApp/src/components/OrderDetail/DetailCard.js
View File

@ -6,6 +6,7 @@ import { UserContext } from "../../context/User";
import useStyles from "./styles"; import useStyles from "./styles";
function DetailCard(props) { function DetailCard(props) {
console.log(props)
const classes = useStyles(); const classes = useStyles();
const navigation = useHistory(); const navigation = useHistory();
const { isLoggedIn } = useContext(UserContext); const { isLoggedIn } = useContext(UserContext);
@ -84,3 +85,4 @@ function DetailCard(props) {
} }
export default DetailCard; export default DetailCard;

65
CustomerWebApp/src/components/OrderDetail/ItemsContainer.js
View File

@ -1,12 +1,15 @@
import { Box, Grid, Paper, Button, Typography, useTheme } from "@material-ui/core"; 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 Skeleton from '@material-ui/lab/Skeleton';
import useStyles from "./styles"; import useStyles from "./styles";
import { Link as RouterLink } from "react-router-dom"; 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 { gql, useQuery } from "@apollo/client";
import { get } from "lodash"; import { get } from "lodash";
import ConfigurationContext from "../../context/Configuration"; import ConfigurationContext from "../../context/Configuration";
import CustomizeCard from "../CustomizeCard/CustomizeCard";
import { Link } from 'react-router-dom';
// constants // constants
const FOODS = gql` const FOODS = gql`
@ -15,24 +18,25 @@ const FOODS = gql`
function ItemContainer(props) { function ItemContainer(props) {
const theme = useTheme(); const theme = useTheme();
console.log(props.title)
const classes = useStyles(); const classes = useStyles();
const [filters, setFilters] = useState({}) const [filters, setFilters] = useState({})
const { loading, error, data, refetch, networkStatus } = useQuery(FOODS, { const { loading, error, data, refetch, networkStatus } = useQuery(FOODS, {
variables: { category: props._id, ...filters } variables: { category: props._id, ...filters }
}) })
const configuration = useContext(ConfigurationContext) const configuration = useContext(ConfigurationContext)
console.log('data', data) console.log('data', data)
if(loading) if (loading)
return ( return (
<> <>
<Skeleton variant="text" style={{borderRadius:20,width:'20%',borderTopRightRadius:20}} /> <Skeleton variant="text" style={{ borderRadius: 20, width: '20%', borderTopRightRadius: 20 }} />
<Skeleton variant="text" style={{borderRadius:20,width:'20%',borderTopRightRadius:20}} /> <Skeleton variant="text" style={{ borderRadius: 20, width: '20%', borderTopRightRadius: 20 }} />
<Skeleton variant="text" height={100} style={{borderRadius:20,width:'80%',borderTopRightRadius:20}} /> <Skeleton variant="text" height={100} style={{ borderRadius: 20, width: '80%', borderTopRightRadius: 20 }} />
<Skeleton height={100} style={{borderRadius:20,width:'80%',borderTopRightRadius:20}} /> <Skeleton height={100} style={{ borderRadius: 20, width: '80%', borderTopRightRadius: 20 }} />
<Skeleton height={100} style={{borderRadius:20,width:'80%',borderTopRightRadius:20}} /> <Skeleton height={100} style={{ borderRadius: 20, width: '80%', borderTopRightRadius: 20 }} />
</> </>
) )
return ( return (
<Grid container direction="row"> <Grid container direction="row">
@ -41,24 +45,25 @@ function ItemContainer(props) {
<Typography color="secondary" className={classes.lightText}>{'Deal Contains'}</Typography> <Typography color="secondary" className={classes.lightText}>{'Deal Contains'}</Typography>
{ {
data?.foodByCategory && data?.foodByCategory.map((item, index) => ( data?.foodByCategory && data?.foodByCategory.map((item, index) => (
<RouterLink to={{ pathname: `/Customize` }} className={classes.link}> <Link to={{ pathname: '/Cart', state: { item, id: props._id, title: props.title } }} className={classes.link}>
<Paper elevation={3} style={{ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', padding: 10, height: 80, borderRadius: 20 }} className={classes.mv2} > {console.log(item)}
<img className={classes.ml} style={{ width: '25%', borderRadius: 20, height: '90%' }} src={item.img_url} /> <Paper elevation={3} style={{ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', padding: 10, height: 80, borderRadius: 20 }} className={classes.mv2} >
<Box className={classes.ml} style={{width:"60%"}}> <img className={classes.ml} style={{ width: '25%', borderRadius: 20, height: '90%' }} src={item.img_url} />
<Typography noWrap>{item?.title}</Typography> <Box className={classes.ml} style={{ width: "60%" }}>
<Typography noWrap variant="body2" className={classes.smallText} color="textSecondary">{item.description}</Typography> <Typography noWrap>{item?.title}</Typography>
{/* {item.variations[0].discounted > 0 && ( <Typography noWrap variant="body2" className={classes.smallText} color="textSecondary">{item.description}</Typography>
{/* {item.variations[0].discounted > 0 && (
<Typography className={classes.subText} color="primary">{item.variations[0].price.toFixed(2)}</Typography> <Typography className={classes.subText} color="primary">{item.variations[0].price.toFixed(2)}</Typography>
)} */} )} */}
{/* {item.variations[0].discounted > 0 && ( */} {/* {item.variations[0].discounted > 0 && ( */}
<Box display="flex"> <Box display="flex">
<Typography className={classes.subText} color="textSecondary">{configuration.currency_symbol}{''} {item.variations[0].price.toFixed(2)}{' '}</Typography> <Typography className={classes.subText} color="textSecondary">{configuration.currency_symbol}{''} {item.variations[0].price.toFixed(2)}{' '}</Typography>
<Typography className={classes.subText} color="primary">{configuration.currency_symbol}{''} {item.variations[0].price.toFixed(2)}</Typography> <Typography className={classes.subText} color="primary">{configuration.currency_symbol}{''} {item.variations[0].price.toFixed(2)}</Typography>
</Box>
{/* )} */}
</Box> </Box>
{/* )} */} </Paper>
</Box> </Link>
</Paper>
</RouterLink>
)) ))
} }
</Grid> </Grid>
@ -67,4 +72,4 @@ function ItemContainer(props) {
); );
} }
export default ItemContainer; export default ItemContainer;

4
CustomerWebApp/src/configuration/configurataion.js
View File

@ -1,5 +1,5 @@
const SERVER_URL = "http://10.97.28.31:8000/"; const SERVER_URL = "http://10.97.0.65:8000/";
const WS_SERVER_URL = "ws://10.97.28.31:8000/"; const WS_SERVER_URL = "ws://10.97.0.65:8000/";
const GOOGLE_CLIENT_ID = const GOOGLE_CLIENT_ID =
"967541328677-ge2hpr0n095d0nro56kot0t4q388dsll.apps.googleusercontent.com"; "967541328677-ge2hpr0n095d0nro56kot0t4q388dsll.apps.googleusercontent.com";

18
CustomerWebApp/src/screens/Cart/Cart.js Normal file
View File

@ -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 (
<div>
<CustomizeCard data={{item, id, title}}/>
</div>
)
}
export default Cart

2
CustomerWebApp/src/screens/Customize/Cutomize.js
View File

@ -6,6 +6,7 @@ import useStyles from "./styles";
import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
function OrderDetail() { function OrderDetail() {
const theme = useTheme(); const theme = useTheme();
const classes = useStyles(); const classes = useStyles();
@ -44,3 +45,4 @@ function OrderDetail() {
} }
export default OrderDetail; export default OrderDetail;

11
CustomerWebApp/src/utils/constant.js
View File

@ -12,7 +12,7 @@ import {
Settings, Settings,
Signup, Signup,
} from "../screens"; } from "../screens";
import Cart from "../screens/Cart/Cart";
const ROUTES = [ const ROUTES = [
{ {
path: "/Login", path: "/Login",
@ -86,6 +86,12 @@ const ROUTES = [
authRequired: true, authRequired: true,
accessRequired: false, accessRequired: false,
}, },
{
path: "/Cart",
component: Cart,
authRequired: true,
accessRequired: false,
},
]; ];
const HEADER_NAV = [ const HEADER_NAV = [
@ -114,6 +120,7 @@ const HEADER_NAV = [
name: "Settings", name: "Settings",
navigate: "/Settings", navigate: "/Settings",
}, },
]; ];
const HELP_NAV = [ const HELP_NAV = [
@ -157,4 +164,4 @@ const ADDRESS_LABEL = [
const ACTIVE_ORDERS = ["PENDING", "PICKED", "ACCEPTED"]; const ACTIVE_ORDERS = ["PENDING", "PICKED", "ACCEPTED"];
const INACTIVE_ORDERS = ["DELIVERED", "COMPLETED"]; 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 };