Merge pull request #138 from Arquisoft/Jorge_Carrito

Jorge carrito

webapp/package.json

@@ -55,6 +55,7 @@
     "@types/express": "^4.17.13",
     "@types/jest": "^27.4.0",
     "@types/puppeteer": "^5.4.4",
+    "@types/styled-components": "^5.1.24",
     "expect-puppeteer": "^6.0.2",
     "jest-cucumber": "^3.0.1",
     "jest-puppeteer": "^6.0.3",

webapp/src/App.tsx

@@ -1,3 +1,14 @@
+
+import { useQuery } from 'react-query';
+import Box from '@mui/material/Box';
+//import Link from '@mui/material/Link';
+import Grid from '@mui/material/Grid';
+
+import logo from './images/interfaz/logoRock.png';
+import Title from './components/titleUtil';
+
+
+import { createTheme, Drawer, List } from '@mui/material';
 import { useState, useEffect } from 'react';
 import Welcome from './components/Welcome';
 import  {getRocas} from './api/api';
@@ -16,32 +27,118 @@ import { Container } from '@mui/material';
 
 //import {createData} from "./code/insertExampleData"
 
+import ShoppingCart from './components/ShoppingCart';
+import PaymentPage from './components/PaymentPage';
+import { ContentCopy } from '@mui/icons-material';
+
+type Props = {
+  openCart: () => void;
+};
+
 function App(): JSX.Element {
   const [rocks,setRocks] = useState<Rock[]>([]);
 
   const refreshRockList = async () => {
     setRocks(await getRocas());
   }
 
+  // Shopping cart
+  const [isNewCart, setNewCart] = useState(false);
+  const [isCartOpen, setCartOpen] = useState(false);
+  const [cartContent,setCartContent] = useState<Rock[]>([]);
+
+  useEffect(() => {
+    if(isNewCart) {
+      resetCart();
+      setNewCart(false);
+      return;
+    }
+    const memoryCart = localStorage.getItem("cart");
+    if (memoryCart) {
+      let cart: Rock[] = JSON.parse(memoryCart);
+      setCartContent(cart); 
+    } else {
+      localStorage.setItem("cart", JSON.stringify([]));
+    }
+  }, [isNewCart]);
+
+  const resetCart = () => {
+    setCartContent([]);
+    localStorage.setItem("cart", JSON.stringify([]));
+    setCartContent([]);
+  };
+
+  const handleAddToCart = (selectedItem: Rock) => {
+    localStorage.setItem("cart", JSON.stringify(cartContent));
+      setCartContent(cart => {
+        if (cart.find(rocaInCart => rocaInCart.name === selectedItem.name)) {
+            // return cart.map(Rock => ( 
+            //   Rock.name === selectedItem.name ? 
+            //     { ...Rock, quantityCart: Rock.quantityCart + 1 } : 
+            //     Rock
+            // ));
+            var tempCart= cart.map(Rock=>(
+              Rock.name === selectedItem.name ? 
+              { ...Rock, quantityCart: Rock.quantityCart + 1 } : 
+              Rock
+            ));
+            return tempCart;
+        }
+        // return [...cart, {...selectedItem, quantityCart: 1}];
+        var tempCart= [...cart, {...selectedItem, quantityCart:1}];
+        return tempCart;
+    });
+  };
+
+  const handleRemoveFromCart = (name: string) => {
+    localStorage.setItem("cart", JSON.stringify(cartContent));
+    setCartContent(cart => (
+      cart.reduce((sum, p) => {
+          if (p.name === name) {
+              if (p.quantityCart === 1) {
+                  return sum;
+              }
+              // return [...sum, {...p, quantityCart: p.quantityCart - 1}];
+              var tempCart= [...sum, {...p, quantityCart:p.quantityCart - 1}]
+              return tempCart;
+          } else {
+              // return [...sum, p];
+              var tempCart= [...sum, p];
+              return tempCart;
+          }
+      }, [] as Rock[])
+    ));
+  };
+
+
   useEffect(()=>{
     refreshRockList();
   },[]);
   return (
     <ThemeProvider theme={theme}>
       <Container maxWidth="xl" className="principal">
-      <NavBar/>
+      <NavBar openCart={()=>setCartOpen(true)}/>
       <Router>
 
         <Routes>
-          <Route path="/home" element={<Welcome/>} />
+          <Route path="/home" element={<Welcome handleAddToCart={handleAddToCart}/>} />
           <Route path="/" element={<Navigate replace to="/home" />} />
-          <Route path="/catalog" element={<Catalog rocks={rocks}/>}/>
+          <Route path="/catalog" element={<Catalog rocks={rocks} handleAddToCart={handleAddToCart}/>}/>
+          <Route path="/payment" element={<PaymentPage cartContent={cartContent} setNewCart={setNewCart} />}/>
           <Route path = '/login' element = {<LogIn/>}/>
           <Route path = '/register' element = {<Register/>}/>
         </Routes>
 
       </Router>
+	  <Drawer anchor='right' open={isCartOpen} onClose={() => setCartOpen(false)}>
+        <ShoppingCart 
+          cartContent={cartContent} 
+          handleAddToCart={handleAddToCart} 
+          handleRemoveFromCart={handleRemoveFromCart}
+        />
+      </Drawer>
       </Container>
+
     </ThemeProvider>
 
   );

webapp/src/components/CartItem.tsx

@@ -0,0 +1,58 @@
+import { Typography } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import { Card, CardContent, CardMedia } from '@mui/material';
+import { Rock } from '../shared/shareddtypes';
+import '../css/CartItem.css';
+
+type Props = {
+    item: Rock;
+    handleAddToCart: (selectedItem: Rock) => void;
+    handleRemoveFromCart: (id: string) => void;
+}
+
+
+const CartItem: React.FC<Props> = ({item, handleAddToCart, handleRemoveFromCart}) => {
+
+    return (
+    <Card className="cartItem-ci" sx={{ maxWidth: 500 } }>
+        <CardContent>
+            <Typography variant="h5">
+                {item.name}
+            </Typography>
+            <div className="quantityController-ci">  
+                <Button
+                    size="small"
+                    disableElevation
+                    variant="contained"
+                    onClick={() => handleRemoveFromCart(item.name)}
+                >-</Button>
+                <Typography id="quantity-ci">
+                    {item.quantityCart + " uds " }
+                </Typography>
+                <Button
+                    size="small"
+                    disableElevation
+                    variant="contained"
+                    onClick={() => handleAddToCart(item)}
+                >+</Button>
+            </div>
+            <Typography id="quantity-ci">
+                {(item.price * item.quantityCart).toFixed(2) + " €"}
+            </Typography>
+        </CardContent>
+        <CardMedia
+            className = "img-ci"
+            component="img"
+            sx={{ width: 120, maxWidth: 120 }}
+            image={item.img}
+            alt={item.name}
+        />
+    </Card>
+
+
+    )
+};
+
+
+export default CartItem;
+

webapp/src/components/Catalog.tsx

@@ -1,16 +1,18 @@
 import {Rock} from '../shared/shareddtypes';
 import List from '@mui/material/List';
 import Product from './Product';
+
 type RockListProps = {
   rocks: Rock[];
+  handleAddToCart(rock:Rock): void;
 };
 //a
 function Catalogo(rocks: RockListProps): JSX.Element {
   return (
     <>
       <List id="catalog">
       {rocks.rocks.map((rock,index)=>{
-        return <Product product={rock} buyable={true} />
+        return <Product product={rock} buyable={true} handleAddToCart={rocks.handleAddToCart}/>
       })}
       </List>
 

webapp/src/components/NavigationBar.tsx

@@ -3,8 +3,13 @@ import Toolbar from '@mui/material/Toolbar';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
+import { Avatar, Tooltip } from '@mui/material';
 
-const NavBar=() =>{
+type Props = {
+    openCart: () => void;
+  };
+
+const NavBar:React.FC<Props>=({openCart}) =>{
     return(
         <AppBar position="fixed" >
             <Toolbar>
@@ -21,7 +26,11 @@ const NavBar=() =>{
                 </IconButton>
                 <Button color="inherit" href = "/login">Iniciar Sesión</Button> 
                 <Button color="inherit" href = "/register">Regístrate</Button> 
-
+                <Tooltip title="Open shopping cart">
+                    <IconButton onClick={openCart} sx={{ p: 0 }}>
+                        <Avatar alt="Remy Sharp" src="..\src\images\interfaz\carrito-de-compras.png" />
+                    </IconButton>
+                </Tooltip>
             </Toolbar>     
         </AppBar>
             );

webapp/src/components/PaymentPage.tsx

@@ -0,0 +1,94 @@
+
+import List from '@mui/material/List';
+import ListItemText from '@mui/material/ListItemText';
+import Grid from '@mui/material/Grid';
+
+import Button from '@mui/material/Button';
+import '../css/PaymentPage.css'
+import { CardContent, Typography } from '@mui/material';
+import { North } from '@mui/icons-material';
+import { useState } from 'react';
+import { Rock } from '../shared/shareddtypes';
+
+
+type Props = {
+    cartContent: Rock[];
+    setNewCart: (isNewCart: boolean) => void;
+};
+
+const PaymentPage: React.FC<Props> = ({cartContent, setNewCart}) => {
+
+    const [isPaid, setPaid] = useState(false);
+    const getTotalPrice = () => cartContent.reduce((sum: number, item) => sum + item.quantityCart * item.price, 0);
+
+    const handlePay = () => {
+        if(!isPaid)
+            return;
+
+        setNewCart(true);
+        setPaid(false);
+    }
+
+    return (
+        <div>
+        <h1 id='title-payment' >Your BUY</h1>
+        <div className='paymentpage-payment' >
+
+            <div 
+                id='info-payment'
+            >
+                <div id='articles-payment'>
+                    <h1>Articles</h1>
+                    <div>
+                        {   cartContent.map(Rock => (
+                                <div id="items-payment">
+                                    <h2 id='items-name-payment'>{Rock.name}</h2>
+                                    <h2 id='items-quantity-payment'>x{Rock.quantityCart}</h2>
+                                    <h2 id='items-total-payment'>{Rock.quantityCart*Rock.price}€</h2>
+                                </div>
+                            ))
+                        }
+                    </div>
+                </div>
+
+                <div id='bill-payment'>
+                    <h1>Payment summary</h1>
+                    <h2>Cost (no iva): {  (getTotalPrice() - (getTotalPrice()*0.21)).toFixed(2) }€</h2>
+                    <h2>Cost: {getTotalPrice().toFixed(2)}€</h2>
+
+                    <h2>Cost (shipping costs): {(getTotalPrice()+ 12).toFixed(2)}€</h2>
+                    {/* Aqui cogemos la dir de los pods y sacamos los costes envio */}
+                </div>
+            </div>
+
+            {isPaid ? <h1>Purchase made</h1> : null}
+
+            <div id='actionButtons-payment'>
+            <Button
+                    size="medium"
+                    disableElevation
+                    variant="contained"
+                    disabled={false}
+                    onClick = {() =>{handlePay(); window.location.href = '/home';}  
+                    }
+                >
+                    Home
+                </Button>
+                <Button
+                    size="medium"
+                    disableElevation
+                    variant="contained"
+                    disabled={false}
+                    onClick={() => {
+                        setPaid(true);
+                    }}
+                >
+                    Checkout
+                </Button>
+            </div>
+        </div>
+        </div>
+    )
+};
+
+export default PaymentPage;

webapp/src/components/Product.tsx

@@ -5,6 +5,7 @@ import Button from '@mui/material/Button';
 type ProductProps = {
   product: Rock |null;
   buyable:boolean;
+  handleAddToCart(r:Rock): void;
 };
 //a
 function Product(product: ProductProps): JSX.Element {
@@ -33,7 +34,13 @@ function Product(product: ProductProps): JSX.Element {
             }
 
           </div>
-          <Button variant="contained" className='btnBuy' color="primary" style={{width:'100%'}}>Comprar</Button>
+          <Button 
+            variant="contained" 
+            className='btnBuy' 
+            color="primary" 
+            style={{width:'100%'}}
+            onClick={() => product.handleAddToCart(product.product as Rock)}>
+          Comprar</Button>
       </div>
   );
 }