frontend: order result screen

Signed-off-by: Ahmet Alp Balkan <ahmetb@google.com>

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) {

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">

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 }}

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>