Obtención del precio final de la compra

restapi/api.ts

@@ -10,36 +10,9 @@ const Rock = require("./models/Rock");
 const api:Router = express.Router()
 const mongoose = require("mongoose");
 
-interface User {
-    name: string;
-    email: string;
-}
-
-//This is not a restapi as it mantains state but it is here for
-//simplicity. A database should be used instead.
-let users: Array<User> = [];
-
-api.get(
-    "/users/list",
-    async (req: Request, res: Response): Promise<Response> => {
-        return res.status(200).send(users);
-    }
-);
-
-
-api.post(
-  "/users/add",[
-    check('name').isLength({ min: 1 }).trim().escape(),
-    check('email').isEmail().normalizeEmail(),
-  ],
-  async (req: Request, res: Response): Promise<Response> => {
-    let name = req.body.name;
-    let email = req.body.email;
-    let user: User = {name:name,email:email}
-    users.push(user);
-    return res.sendStatus(200);
-  }
-);
+api.get("/users/list",findUsers);
+
+api.post("/users/add",addUser);
 
 api.post("/users/login", loginUser);
 
@@ -66,6 +39,6 @@ api.get("/orders/userList", findOrdersByUserDni);
 
 api.post("/orders/add", addOrder);
 
-api.get("/orders/deliveryCosts", getDeliveryCosts)
+api.post("/orders/deliveryCosts", getDeliveryCosts)
 
 export default api;

restapi/controllers/OrderController.ts

@@ -44,7 +44,7 @@ export const addOrder = async (req:Request, res:Response): Promise<any> => {
 
     let string = JSON.stringify(addressCordinates);
     let objectValue = JSON.parse(string);
-
+    console.log(addressCordinates);
     let latitudeAddress = objectValue[0].latitude
     let longitudeAddress = objectValue[0].longitude
 

webapp/src/App.tsx

@@ -1,5 +1,5 @@
 
-import { useQuery } from 'react-query';
+//import { useQuery } from 'react-query';
 import Box from '@mui/material/Box';
 //import Link from '@mui/material/Link';
 import Grid from '@mui/material/Grid';

webapp/src/api/api.ts

@@ -59,4 +59,21 @@ export async function checkUser(email:String,password:String):Promise<boolean>{
   else
     return false;
 
+}
+
+export async function getDeliveryCosts(address:String):Promise<Number>{
+  console.log("BBBBBBBBBBBBBBBBBBBBBBBBB");
+  const apiEndPoint= process.env.REACT_APP_API_URI || 'http://localhost:5000/api'
+  let response = await fetch(apiEndPoint+'/orders/deliveryCosts', {
+      method: 'POST',
+      headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({'address':address})
+    });
+
+  if (response.status===200){
+    return response.json();
+  }
+  else
+    return -1;
+
 }

webapp/src/components/PaymentPage.tsx

@@ -7,8 +7,10 @@ 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 { useState, useEffect } from 'react';
 import { Rock } from '../shared/shareddtypes';
+import { getDeliveryCosts } from '../api/api';
+import { findConfigFile } from 'typescript';
 
 
 type Props = {
@@ -24,21 +26,44 @@ const PaymentPage: React.FC<Props> = ({cartContent, setNewCart}) => {
     const handlePay = () => {
         if(!isPaid)
             return;
-
         setNewCart(true);
         setPaid(false);
     }
+    function getAddressContent() {
+        const memoryCart = localStorage.getItem("address");
+
+        if (memoryCart) 
+            return memoryCart;
+        else 
+          return "";
+
+    }
+    const [deliveryCosts, setDeliveryCosts] = useState<Number>();
+    const findDC = async () => {
+        setDeliveryCosts(await getDeliveryCosts(getAddressContent()));
+    }
+
+    useEffect(() => {
+        findDC();
+    }, []);
 
+    function getFinalDeliveryCosts(){
+        if (deliveryCosts){
+            return (Number(deliveryCosts.toString()) + Number(getTotalPrice())).toFixed(2);
+        }else{
+            return 0;
+        }
+    }
     return (
         <div>
-        <h1 id='title-payment' >Your BUY</h1>
+        <h1 id='title-payment' >Tu Compra</h1>
         <div className='paymentpage-payment' >
 
             <div 
                 id='info-payment'
             >
                 <div id='articles-payment'>
-                    <h1>Articles</h1>
+                    <h1>Articulos</h1>
                     <div>
                         {   cartContent.map(Rock => (
                                 <div id="items-payment">
@@ -52,16 +77,18 @@ const PaymentPage: React.FC<Props> = ({cartContent, setNewCart}) => {
                 </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>
+                    <h1>Resumen de Pago</h1>
+                    <h2>Costes (no iva): {  (getTotalPrice() - (getTotalPrice()*0.21)).toFixed(2) }€</h2>
+                    <h2>Costes: {getTotalPrice().toFixed(2)}€</h2>
+                    <h2>Costes de Envio: {Number(deliveryCosts).toFixed(2)}€</h2>
+                    <h2>Total: {getFinalDeliveryCosts()}€</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}
+            {isPaid ? <h1>Compra realizada</h1> : null}
 
             <div id='actionButtons-payment'>
             <Button

webapp/src/components/solid-pods/GetPodAddress.tsx

@@ -20,7 +20,7 @@ async function infoAddress(webID: string): Promise<string[]> {
     let address = getStringNoLocale(addressProfile as Thing, VCARD.street_address) as string
     let postalCode = getStringNoLocale(addressProfile as Thing, VCARD.postal_code) as string
     let city = getStringNoLocale(addressProfile as Thing, VCARD.locality) as string
-
+    localStorage.setItem("address", address +", " + city);
     let info = [address, postalCode, city]
 
     return info