Merge pull request #18 from farhanangullia/feat/shippingsvc

add shipping svc integration with UI
farhanangullia · Oct 4, 2023 · 174f9d8 · 174f9d8
2 parents a3bf2a7 + 3c534a0
commit 174f9d8
Show file tree

Hide file tree

Showing 11 changed files with 447 additions and 235 deletions.
diff --git a/.gitignore b/.gitignore
@@ -98,4 +98,5 @@ terraform.rc
 .env
 
 tmp
-*.env
+*.env
+.ruff_cache
diff --git a/README.md b/README.md
@@ -56,7 +56,7 @@ Try the app: [Chaos Playground](https://chaosplayground.netlify.app)
 | App       	| Services                      	| Language 	| Highlights 	|
 |-----------	|-------------------------------	|----------	|------------	|
 | Likes App 	| [like-service](https://github.com/farhanangullia/likes-app/tree/main/like-service), [counter-service](https://github.com/farhanangullia/likes-app/tree/main/counter-service) 	| Go       	| Repository Pattern, OpenTelemetry        	|
-| eCommerce App 	| [catalog-service](https://github.com/farhanangullia/ecommerce-app/tree/main/catalog-service), [cart-service](https://github.com/farhanangullia/ecommerce-app/tree/main/cart-service), [order-service](https://github.com/farhanangullia/ecommerce-app/tree/main/order-service) 	| Python       	| Hexagonal Architecture        	|
+| eCommerce App 	| [catalog-service](https://github.com/farhanangullia/ecommerce-app/tree/main/catalog-service), [cart-service](https://github.com/farhanangullia/ecommerce-app/tree/main/cart-service), [order-service](https://github.com/farhanangullia/ecommerce-app/tree/main/order-service), [shipping-service](https://github.com/farhanangullia/ecommerce-app/tree/main/shipping-service) 	| Python, Go       	| Hexagonal Architecture, Clean Architecture        	|
 
 ## 🛠️ Installation Steps
 

diff --git a/apps/chaos-playground-ui/src/components/ShoppingCartComponent.js b/apps/chaos-playground-ui/src/components/ShoppingCartComponent.js
@@ -1,8 +1,30 @@
 import React, { useState, useEffect } from 'react';
 import { Grid, Paper, Typography, Button, Card, CardContent, CardMedia } from '@mui/material'
 import ShoppingCartCheckoutIcon from '@mui/icons-material/ShoppingCartCheckout';
+import TextField from '@mui/material/TextField';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
 
 function ShoppingCartComponent(props) {
+  const [open, setOpen] = React.useState(false);
+  const [address, setAddress] = useState('')
+  const [country, setCountry] = useState('')
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleCheckout = () => {
+    handleClose();
+    props.handler(address, country);
+  };
 
   return (
     <>
@@ -24,13 +46,49 @@ function ShoppingCartComponent(props) {
         </Grid>
       )}
       {props.cart.length > 0 && (
+
         <div style={{ marginBottom: 'auto', textAlign: 'center' }}>
           <Typography variant="h6" gutterBottom>Total: ${props.cart.reduce((total, cartItem) => total + cartItem.price * cartItem.count, 0).toFixed(2)}</Typography>
           <Button variant="outlined" color="primary" startIcon={<ShoppingCartCheckoutIcon />} onClick={() => {
-            props.handler();
+            handleClickOpen()
           }}>
             Checkout
           </Button>
+          <Dialog open={open} onClose={handleClose}>
+            <DialogTitle>Confirm Checkout</DialogTitle>
+            <DialogContent>
+              <DialogContentText>
+                Please enter your shipping details.
+              </DialogContentText>
+              <TextField
+                autoFocus
+                required
+                margin="normal"
+                id="address"
+                label="Address"
+                helperText="Your shipping address"
+                onChange={e => {
+                  setAddress(e.target.value)
+                }}
+                variant="standard"
+              />
+              <TextField
+                required
+                margin="normal"
+                id="country"
+                label="Country"
+                helperText="Your country"
+                onChange={e => {
+                  setCountry(e.target.value)
+                }}
+                variant="standard"
+              />
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={handleClose}>Cancel</Button>
+              <Button onClick={handleCheckout}>Checkout</Button>
+            </DialogActions>
+          </Dialog>
         </div>
       )}
     </>

diff --git a/apps/chaos-playground-ui/src/routing/ECommercePage.js b/apps/chaos-playground-ui/src/routing/ECommercePage.js
@@ -6,12 +6,29 @@ import OrderComponent from '../components/OrderComponent';
 import CatalogService from '../services/ecommerce/CatalogService';
 import CartService from '../services/ecommerce/CartService';
 import OrderService from '../services/ecommerce/OrderService';
+import Alert from '@mui/material/Alert';
+import Snackbar from '@mui/material/Snackbar';
 
 function ECommercePage() {
     const [sessionID, setSessionID] = useState('');
     const [products, setProducts] = useState([]);
     const [cartItems, setCartItems] = useState([]);
     const [orders, setOrders] = useState([]);
+    const [openAlert, setOpenAlert] = useState(false);
+    const [latestAlert, setLatestAlert] = useState({});
+
+    const newAlert = (sev, msg) => {
+        setLatestAlert({ severity: sev, message: msg })
+        setOpenAlert(true);
+    };
+
+    const handleCloseAlert = (event, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+
+        setOpenAlert(false);
+    };
 
     const fetchProducts = () => {
         CatalogService.getProducts()
@@ -39,10 +56,12 @@ function ECommercePage() {
             .catch(error => console.error('Error adding to cart:', error));
     }
 
-    const checkout = () => {
-        OrderService.checkout(sessionID)
-            .then(() => {
+    const checkout = (address, country) => {
+        OrderService.checkout(sessionID, address, country)
+            .then((response) => {
                 console.log('Order placed successfully');
+                console.log(response.data.shipping_tracking_id);
+                newAlert("success", `Order successfully created with Shipping Tracking ID: ${response.data.shipping_tracking_id}`)
                 fetchCartItems();
                 fetchOrders();
             })
@@ -79,37 +98,42 @@ function ECommercePage() {
     }, []);
 
     return (
-            <Grid container spacing={2} style={{ marginTop: '5px', height: '100%' }} justifyContent="center">
-                <Grid item xs={4}>
-                    <Paper style={{ borderRadius: '20px', boxShadow: '0px 10px 20px rgba(0, 0, 0, 0.3)', padding: 20, height: '100%' }}>
-                        <Typography variant="h6" gutterBottom style={{ textAlign: 'center' }}>
-                            Catalog
-                        </Typography>
-                        <CatalogComponent products={products} handler={addToCart}></CatalogComponent>
-                    </Paper>
-                </Grid>
-
-                <Grid item xs={2}>
-                    <Paper style={{ borderRadius: '20px', boxShadow: '0px 10px 20px rgba(0, 0, 0, 0.3)', padding: 20, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%' }}>
-                        <Typography variant="h6" gutterBottom style={{ textAlign: 'center' }}>
-                            Cart
-                        </Typography>
-                        <ShoppingCartComponent cart={cartItems} handler={checkout}></ShoppingCartComponent>
-                    </Paper>
-                </Grid>
-
-
-                <Grid item xs={4}>
-                    <Paper style={{ borderRadius: '20px', boxShadow: '0px 10px 20px rgba(0, 0, 0, 0.3)', padding: 20, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%' }}>
-                        <Typography variant="h6" gutterBottom style={{ textAlign: 'center' }}>
-                            My Orders
-                        </Typography>
-                        <OrderComponent orders={orders}></OrderComponent>
-
-                    </Paper>
-                </Grid>
+        <Grid container spacing={2} style={{ marginTop: '5px', height: '100%' }} justifyContent="center">
+            <Grid item xs={4}>
+                <Paper style={{ borderRadius: '20px', boxShadow: '0px 10px 20px rgba(0, 0, 0, 0.3)', padding: 20, height: '100%' }}>
+                    <Typography variant="h6" gutterBottom style={{ textAlign: 'center' }}>
+                        Catalog
+                    </Typography>
+                    <CatalogComponent products={products} handler={addToCart}></CatalogComponent>
+                </Paper>
+            </Grid>
+
+            <Grid item xs={2}>
+                <Paper style={{ borderRadius: '20px', boxShadow: '0px 10px 20px rgba(0, 0, 0, 0.3)', padding: 20, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%' }}>
+                    <Typography variant="h6" gutterBottom style={{ textAlign: 'center' }}>
+                        Cart
+                    </Typography>
+                    <ShoppingCartComponent cart={cartItems} handler={checkout}></ShoppingCartComponent>
+                </Paper>
+            </Grid>
 
+
+            <Grid item xs={4}>
+                <Paper style={{ borderRadius: '20px', boxShadow: '0px 10px 20px rgba(0, 0, 0, 0.3)', padding: 20, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%' }}>
+                    <Typography variant="h6" gutterBottom style={{ textAlign: 'center' }}>
+                        My Orders
+                    </Typography>
+                    <OrderComponent orders={orders}></OrderComponent>
+
+                </Paper>
             </Grid>
+            <Snackbar open={openAlert} autoHideDuration={10000} anchorOrigin={{ vertical: 'top', horizontal: 'center' }} onClose={handleCloseAlert}>
+                <Alert onClose={handleCloseAlert} severity={latestAlert.severity} sx={{ width: '100%' }}>
+                    {latestAlert.message}
+                </Alert>
+            </Snackbar>
+        </Grid>
+
     )
 }
 

diff --git a/apps/chaos-playground-ui/src/services/ecommerce/OrderService.js b/apps/chaos-playground-ui/src/services/ecommerce/OrderService.js
@@ -3,8 +3,14 @@ import { ORDER_API_BASE_URL } from "../../config";
 
 class OrderService {
 
-    checkout(sessionID){
-        return axios.post(`${ORDER_API_BASE_URL}/checkout`, null, {
+    checkout(sessionID, address, country){
+        let requestBody = {
+            shippingDetails: {
+                address: address,
+                country: country
+            }
+        }
+        return axios.post(`${ORDER_API_BASE_URL}/checkout`, requestBody, {
             headers: { 'X-Session-ID': { sessionID } }
           });
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -98,4 +98,5 @@ terraform.rc @@
     .env
     tmp
-    *.env
+    *.env
+    .ruff_cache