payment logic done

payment/css/styles.css

@@ -26,6 +26,7 @@ header .logo {
   display: flex;
   user-select: none;
   margin-left: 1vw;
+  cursor: pointer;
 }
 header .logo h3 {
   font-weight: normal;
@@ -76,9 +77,31 @@ header.sub-header {
   width: calc(40vw - 1vw);
   margin-right: calc(1vw * 2);
 }
+.payment-container .column.second-column table {
+  border-collapse: collapse;
+  border-spacing: 2px;
+}
 .payment-container .column.second-column table thead {
   border-bottom: 1px solid #858585;
 }
+.payment-container .column.second-column table thead th:first-child {
+  text-align: initial;
+}
+.payment-container .column.second-column table tbody::before {
+  content: "";
+  display: block;
+  height: 1vh;
+}
+.payment-container .column.second-column table tbody tr:first-child {
+  margin-top: 3vh;
+}
+.payment-container .column.second-column table tbody tr td {
+  text-align: center;
+  padding-bottom: 1vh;
+}
+.payment-container .column.second-column table tbody tr td.name {
+  text-align: initial;
+}
 .payment-container .column.second-column .message {
   border: 1px solid #ff5858;
   background-color: #0008;

payment/css/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/styles.scss"],"names":[],"mappings":"AAOA;EAEI;EAEA;;;AAGJ;EAEI;EAEA;EACA;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;AAEA;EAEI;EAEA;EACA;EAEA;;AAGA;EAEI;EAEA;EACA;EAEA;;AAIR;EAEI;EAEA;EAEA;EACA;EAEA;;;AAIR;EAEI;EAEA;EACA;EAEA,YAlFkB;EAmFlB,gBAnFkB;;AAqFlB;EAEI;EAEA;EACA;;AAEA;EAxFJ;EA4FQ;;AAEA;EAEI;EAEA;EACA;;AAEA;EAEI;EACA;EAEA;EAEA;;AAGJ;EAEI;EAEA;;AAMZ;EAzHJ;EA6HQ;;AAII;EAEI;;AAIR;EAEI;EACA;EAEA;EAEA;;AAGJ;EAEI;EAEA;EACA;;AAMR;EAEI;EACA;;AAGJ;EAEI","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["../sass/styles.scss"],"names":[],"mappings":"AAOA;EAEI;EAEA;;;AAGJ;EAEI;EAEA;EACA;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;AAEA;EAEI;EAEA;EACA;EAEA;EAEA;;AAEA;EAEI;EAEA;EACA;EAEA;;AAIR;EAEI;EAEA;EAEA;EACA;EAEA;;;AAIR;EAEI;EAEA;EACA;EAEA,YAnFkB;EAoFlB,gBApFkB;;AAsFlB;EAEI;EAEA;EACA;;AAEA;EAzFJ;EA6FQ;;AAEA;EAEI;EAEA;EACA;;AAEA;EAEI;EACA;EAEA;EAEA;;AAGJ;EAEI;EAEA;;AAMZ;EA1HJ;EA8HQ;;AAEA;EACI;EAEA;;AAEA;EAEI;;AAEA;EAEI;;AAIR;EAEI;EACA;EACA;;AAKA;EAEI;;AAKA;EAEI;EACA;;AAGJ;EAEI;;AAMhB;EAEI;EACA;EAEA;EAEA;;AAGJ;EAEI;EAEA;EACA;;AAMR;EAEI;EACA;;AAGJ;EAEI","file":"styles.css"}

payment/index.html

@@ -53,7 +53,7 @@
                 </tbody>
             </table>
 
-            <h3>Total: <span>00</span></h3>
+            <h3>Total: <span id="totalNumber">00</span> USD</h3>
 
             <div class="message">
                 <p>Thanks for the interest, but this is not a real e-commerce. This is just a project to develop one. Thank you for your interest, I hope you liked it. Francisco Pessano.</p>
@@ -64,4 +64,5 @@
     </div>    
 
 </body>
+    <script src="./script/script.js" type="module"></script>
 </html>

payment/sass/styles.scss

@@ -48,6 +48,7 @@ header {
     
         margin-left: 1vw;
         
+        cursor: pointer;
 
         h3 {
 
@@ -130,10 +131,47 @@ header {
             margin-right: calc(#{$spaceBetweenColumns} * 2);
 
             table {
+                border-collapse:collapse;
+
+                border-spacing: 2px;
 
                 thead {
 
                     border-bottom: 1px solid rgb(133, 133, 133);
+
+                    th:first-child {
+
+                        text-align: initial;
+                    }
+                }
+
+                tbody::before {
+
+                    content: '';
+                    display: block;
+                    height: 1vh;
+                } // CREDITS: https://stackoverflow.com/questions/294885/how-to-put-spacing-between-tbody-elements
+
+                tbody {
+
+                    tr:first-child {
+
+                        margin-top: 3vh;
+                    }
+
+                    tr {
+
+                        td {
+
+                            text-align: center;
+                            padding-bottom: 1vh;
+                        }
+
+                        td.name {
+
+                            text-align: initial;
+                        }
+                    }
                 }
             }
 

payment/script/calculateTotal.js

@@ -0,0 +1,10 @@
+const calculateTotal = (totalPrice) => {
+
+    const totalElement = document.querySelector(".column.second-column h3 span")
+
+    console.log(totalElement)
+    totalElement.innerText = totalPrice
+
+}
+
+export default calculateTotal

payment/script/getOrderData.js

@@ -0,0 +1,8 @@
+const getOrderData = () => {
+    
+    const data = JSON.parse(sessionStorage.getItem('order'))
+    
+    return data
+}
+
+export default getOrderData

payment/script/logoLink.js

@@ -0,0 +1,12 @@
+const logoLink = () => {
+    
+    const logo = document.querySelector('header .logo')
+
+    logo.addEventListener('click', () => {
+
+        window.location = '../'
+    })
+
+}
+
+export default logoLink

payment/script/putOrderInHTML.js

@@ -0,0 +1,50 @@
+const putOrderInHTML = (order) => {
+    
+    let totalPrice = 0
+
+    const table = document.querySelector('.column.second-column table tbody')
+    const documentFragment = document.createDocumentFragment()
+
+    for (const element in order) {
+        
+        const product = order[element]
+        
+        const tr = document.createElement('tr')
+        
+        const orderData = {
+
+            name: element,
+            quantity: product.quantity,
+            price: product.precioAcumulado,
+        }
+        
+        for (const key in orderData) {
+            
+            const element = orderData[key];
+
+            const td = document.createElement('td')
+                  td.innerText = element
+
+            if (key === 'name') {
+
+                td.classList.add('name')
+            }
+
+            if (key === 'price') {
+
+                totalPrice = totalPrice + element
+            }
+
+            tr.appendChild(td)
+        }
+
+        documentFragment.appendChild(tr)
+        
+    }
+
+    table.appendChild(documentFragment)
+
+    return totalPrice
+}
+
+export default putOrderInHTML

payment/script/script.js

@@ -0,0 +1,18 @@
+import logoLink from './logoLink.js'
+logoLink()
+
+import getOrderData from './getOrderData.js'
+const order = getOrderData()
+
+if (order === null || order === {}) {
+
+    window.location = '../'
+}
+
+console.log(order)
+
+import putOrderInHTML from './putOrderInHTML.js'
+const totalPrice = putOrderInHTML(order)
+
+import calculateTotal from './calculateTotal.js'
+calculateTotal(totalPrice)

scripts/pagarLogica.js

@@ -34,6 +34,8 @@ const pagarLogica = (checkout) => {
 
         body.style.overflowY = 'hidden'
 
+        sessionStorage.setItem('order', JSON.stringify(checkout))
+        
         setTimeout(() => {
 
             window.location.href = './payment'