steve
/
grocery-app
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"
},
"scripts": {
"start": "react-scripts start",
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts build",
"test": "react-scripts test",
"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 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 (
<Grid container direction="row" className={classes.center}>
<Grid container item xs={10}>
<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} />
</Grid>
{console.log(quantities)}
<Grid container item xs={8}>
<Box display="block" className={classes.mt3} />
<Box display="flex" style={{ width: '100%' }} alignItems="center" justifyContent="space-between">
<Typography color="textPrimary">{'KFC Meal(Midnight)'}</Typography>
<Typography color="primary" className={classes.subText}>{'$122.45'}</Typography>
<Typography color="textPrimary">{props.data.item.title + ' Meal(Midnight)'}</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 className={classes.mv2} />
<Typography variant="subtitle2" color="textSecondary">{'Double Zinger Pattie Burger with regular drink'}</Typography>
<Box display="block" className={classes.mt3}>
<Typography variant="subtitle2" color="textSecondary">{props.data.item.description}</Typography>
{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>
</Box>
</Box>
<Grid item xs={12}>
<ButtonBase >
<Box display="flex" alignItems="center">
<Radio color="primary" checked={true} />
<Typography variant="body1" color="textSecondary">
Small Cheese
Small
</Typography>
</Box>
</ButtonBase>
@ -42,7 +144,7 @@ function CustomizeCard(props) {
<Box display="flex" alignItems="center">
<Radio color="primary" checked={true} />
<Typography variant="body1" color="textSecondary">
Medium Cheese
Medium
</Typography>
</Box>
@ -53,12 +155,12 @@ function CustomizeCard(props) {
<Box display="flex" alignItems="center">
<Radio color="primary" checked={true} />
<Typography variant="body1" color="textSecondary">
Large Cheese
Large
</Typography>
</Box>
</ButtonBase>
</Grid>
</Grid>*/}
<Divider style={{ width: '100%' }} className={classes.mt3} orientation="horizontal" />
<Box className={classes.mv2} />
<Grid item xs={12}>
@ -71,7 +173,7 @@ function CustomizeCard(props) {
<Radio color="primary" checked={true} />
<Typography variant="body1" color="textSecondary">
Pepsi
</Typography>
</Typography>
</Box>
</ButtonBase>
@ -82,75 +184,26 @@ function CustomizeCard(props) {
<Radio color="primary" checked={true} />
<Typography variant="body1" color="textSecondary">
Coke
</Typography>
</Typography>
</Box>
</ButtonBase>
</Grid>
</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) => {
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>
<Button
variant="contained"
color="secondary"
disableElevation
className={classes.chatBtn}
onClick={() => updateCart()}
>
<Typography align="center">Add To Cart</Typography>
</Button>
</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,
},
},
variationPrice: {
fontWeight: 700,
marginLeft: 20
}
}));
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";
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;

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 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 (
<>
<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 height={100} style={{borderRadius:20,width:'80%',borderTopRightRadius:20}} />
<Skeleton height={100} style={{borderRadius:20,width:'80%',borderTopRightRadius:20}} />
</>
)
if (loading)
return (
<>
<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 height={100} style={{ borderRadius: 20, width: '80%', borderTopRightRadius: 20 }} />
<Skeleton height={100} style={{ borderRadius: 20, width: '80%', borderTopRightRadius: 20 }} />
</>
)
return (
<Grid container direction="row">
@ -41,24 +45,25 @@ function ItemContainer(props) {
<Typography color="secondary" className={classes.lightText}>{'Deal Contains'}</Typography>
{
data?.foodByCategory && data?.foodByCategory.map((item, index) => (
<RouterLink to={{ pathname: `/Customize` }} className={classes.link}>
<Paper elevation={3} style={{ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', padding: 10, height: 80, borderRadius: 20 }} className={classes.mv2} >
<img className={classes.ml} style={{ width: '25%', borderRadius: 20, height: '90%' }} src={item.img_url} />
<Box className={classes.ml} style={{width:"60%"}}>
<Typography noWrap>{item?.title}</Typography>
<Typography noWrap variant="body2" className={classes.smallText} color="textSecondary">{item.description}</Typography>
{/* {item.variations[0].discounted > 0 && (
<Link to={{ pathname: '/Cart', state: { item, id: props._id, title: props.title } }} className={classes.link}>
{console.log(item)}
<Paper elevation={3} style={{ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', padding: 10, height: 80, borderRadius: 20 }} className={classes.mv2} >
<img className={classes.ml} style={{ width: '25%', borderRadius: 20, height: '90%' }} src={item.img_url} />
<Box className={classes.ml} style={{ width: "60%" }}>
<Typography noWrap>{item?.title}</Typography>
<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>
)} */}
{/* {item.variations[0].discounted > 0 && ( */}
<Box display="flex">
<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>
{/* {item.variations[0].discounted > 0 && ( */}
<Box display="flex">
<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>
</Box>
{/* )} */}
</Box>
{/* )} */}
</Box>
</Paper>
</RouterLink>
</Paper>
</Link>
))
}
</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 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";

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 { useHistory } from "react-router-dom";
function OrderDetail() {
const theme = useTheme();
const classes = useStyles();
@ -44,3 +45,4 @@ function OrderDetail() {
}
export default OrderDetail;

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

@ -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 };