From 7f4319ae54ab2da4b7dbf1076cd38b92139c4bbe Mon Sep 17 00:00:00 2001
From: Ahmet Alp Balkan <ahmetb@google.com>
Date: Thu, 28 Jun 2018 00:15:16 -0700
Subject: [PATCH] frontend: order result screen

Signed-off-by: Ahmet Alp Balkan <ahmetb@google.com>
---
 src/frontend/handlers.go          | 10 ++++++++++
 src/frontend/templates/cart.html  |  6 +++++-
 src/frontend/templates/error.html | 17 ++++++++++++++++
 src/frontend/templates/order.html | 33 +++++++++++++++++++++++--------
 4 files changed, 57 insertions(+), 9 deletions(-)
 create mode 100644 src/frontend/templates/error.html

diff --git a/src/frontend/handlers.go b/src/frontend/handlers.go
index a03be31..7e84bac 100644
--- a/src/frontend/handlers.go
+++ b/src/frontend/handlers.go
@@ -288,14 +288,24 @@ func (fe *frontendServer) placeOrderHandler(w http.ResponseWriter, r *http.Reque
 	order.GetOrder().GetItems()
 	recommendations, _ := fe.getRecommendations(r.Context(), sessionID(r), nil)
 
+	totalPaid := *order.GetOrder().GetShippingCost()
+	for _, v := range order.GetOrder().GetItems() {
+		totalPaid = money.Must(money.Sum(totalPaid, *v.GetCost()))
+	}
+
 	if err := templates.ExecuteTemplate(w, "order", map[string]interface{}{
 		"session_id":      sessionID(r),
 		"user_currency":   currentCurrency(r),
 		"order":           order.GetOrder(),
+		"total_paid":      &totalPaid,
 		"recommendations": recommendations,
 	}); err != nil {
 		log.Println(err)
 	}
+
+	if err := fe.emptyCart(r.Context(), sessionID(r)); err != nil {
+		log.Printf("WARN: failed to empty user (%s) cart after checkout: %+v", sessionID(r), err)
+	}
 }
 
 func (fe *frontendServer) prepareCheckoutHandler(w http.ResponseWriter, r *http.Request) {
diff --git a/src/frontend/templates/cart.html b/src/frontend/templates/cart.html
index 790e710..64b5842 100644
--- a/src/frontend/templates/cart.html
+++ b/src/frontend/templates/cart.html
@@ -123,7 +123,11 @@
                                             <label for="credit_card_expiration_year">Year</label>
                                             <select name="credit_card_expiration_year" id="credit_card_expiration_year"
                                                 class="form-control">
-                                            {{range $.expiration_years}}<option value="{{.}}">{{.}}</option>{{end}}
+                                            {{ range $i, $y := $.expiration_years}}<option value="{{$y}}"
+                                                {{if eq $i 1 -}}
+                                                    selected="selected"
+                                                {{- end}}
+                                            >{{$y}}</option>{{end}}
                                             </select>
                                         </div>
                                     <div class="col-md-2 mb-3">
diff --git a/src/frontend/templates/error.html b/src/frontend/templates/error.html
new file mode 100644
index 0000000..5a1b125
--- /dev/null
+++ b/src/frontend/templates/error.html
@@ -0,0 +1,17 @@
+{{ define "error" }}
+    {{ template "header" }}
+
+    <main role="main">
+        <div class="py-5">
+            <div class="container bg-light py-3 px-lg-5 py-lg-5">
+                <h1>Uh, oh!</h1>
+                <p>Something has failed. Below are some details for debugging.</p>
+                <pre>
+                    {{.errorMsg}}
+                </pre>
+            </div>
+        </div>
+    </main>
+
+    {{ template "footer" }}
+{{ end }}
diff --git a/src/frontend/templates/order.html b/src/frontend/templates/order.html
index b8424e5..7784918 100644
--- a/src/frontend/templates/order.html
+++ b/src/frontend/templates/order.html
@@ -3,15 +3,32 @@
 
     <main role="main">
         <div class="py-5">
-            <div class="container bg-light py-3 px-lg-5 py-lg-5">
-                <h3>
-                    Your order is complete!
-                </h3>
-                <p>
-                    Order Confirmation ID: {{ $.order }}
-                </p>
+            <div class="container bg-light py-3 px-lg-5">
+                <div class="row mt-5 py-2">
+                    <div class="col">
+                    <h3>
+                        Your order is complete!
+                    </h3>
+                    <p>
+                        Order Confirmation ID: <strong>{{.order.OrderId}}</strong>
+                        <br>
+                        Shipping Tracking ID: <strong>{{.order.ShippingTrackingId}}</strong>
+                    </p>
+                    <p>
+                        Shipping Cost: <strong>{{renderMoney .order.ShippingCost}}</strong>
+                        <br>
+                        Total Paid: <strong>{{renderMoney .total_paid}}</strong>
+                    </p>
+                    <a class="btn btn-primary" href="/" role="button">Browse other products &rarr; </a>
+                    </div>
+                </div>
+                <hr/>
 
-                {{ template "recommendations" $.recommendations }}
+                {{ if $.recommendations }}
+                <div class="row mt-5 py-2">
+                    {{ template "recommendations" $.recommendations }}
+                </div>
+                {{ end }}
             </div>
         </div>
     </main>