From 3fe5873634b4206241ffa9fc03b863b2a5bb9cd4 Mon Sep 17 00:00:00 2001
From: Matt Jones <gitcode@magisa.org>
Date: Fri, 11 Feb 2022 01:47:43 -0900
Subject: [PATCH] Layout prices as simple table

---
 app/purser/css/purser.css   | 14 ++++++++++++++
 app/purser/hosted-form.html | 32 ++++++++++++++++++++++++++++----
 app/purser/js/payment.js    |  3 +++
 3 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/app/purser/css/purser.css b/app/purser/css/purser.css
index 04150c6..d1f7459 100644
--- a/app/purser/css/purser.css
+++ b/app/purser/css/purser.css
@@ -44,3 +44,17 @@ button {
     display: none;
     transition: all 0.5s;
   }
+
+  section#ptable {
+    display: table;
+    width: 30%;
+    margin-bottom: 2rem;
+  }
+  
+  section#ptable > * {
+    display: table-row;
+  }
+  
+  section#ptable .col {
+    display: table-cell;
+  }
diff --git a/app/purser/hosted-form.html b/app/purser/hosted-form.html
index bc03b2a..9ccbabd 100644
--- a/app/purser/hosted-form.html
+++ b/app/purser/hosted-form.html
@@ -15,10 +15,34 @@ <h1>Payment</h1>
 
         <div class="product-select" id="products">
             <p>Select products for payment:</p>
-            <input type="checkbox" id="dataoneplus" name="DataONEPlus">
-            <label for="DataONEPlus">DataONE Plus</label>
-            <input type="checkbox" id="hostedrepo" name="HostedRepo">
-            <label for="HostedRepo">Hosted Repository</label>
+            <section id="ptable">
+                <header>
+                  <div class="col"></div>
+                  <div class="col">Price</div>
+                </header>
+                <div class="row">
+                  <div class="col">            
+                    <input type="checkbox" id="dataoneplus" name="DataONEPlus">
+                    <label for="DataONEPlus">DataONE Plus</label>
+                    </div>
+                    <div class="col">$575.04</div>
+                </div>
+                <div class="row">
+                    <div class="col">            
+                        <input type="checkbox" id="hostedrepo" name="HostedRepo">
+                        <label for="HostedRepo">Hosted Repository</label>        
+                    </div>
+                    <div class="col">$12,999.96</div>
+                </div>
+                <div class="row">
+                    <div class="col">            
+                        <input type="checkbox" id="hastorage" name="HAStorage">
+                        <label for="HAStorage">HA Storage (1 TB)</label>        
+                    </div>
+                    <div class="col">$150.00</div>
+                </div>
+            </section>
+
             <button id="checkout"><span>Checkout</span></button>
             <script type="text/javascript" src="js/payment.js"></script>
         </div>
diff --git a/app/purser/js/payment.js b/app/purser/js/payment.js
index 605d867..2b1a15a 100644
--- a/app/purser/js/payment.js
+++ b/app/purser/js/payment.js
@@ -23,6 +23,9 @@ function calc_total() {
     if (document.getElementById('dataoneplus').checked) {
         total += prices().dataoneplus;
     }
+    if (document.getElementById('hastorage').checked) {
+        total += prices().hastorage;
+    }
     return(total);
 }