From 4be36f08e0e09b33d9ed520ef7e5a0c59c8d6107 Mon Sep 17 00:00:00 2001
From: Serhii Shymkiv <sergey@shimkiv.com>
Date: Sun, 12 Aug 2018 16:31:19 +0300
Subject: [PATCH] * Error details rendering on the client side.

---
 src/main/resources/static/css/app.css         | 11 ++++++++
 src/main/resources/static/js/private/app.js   | 28 ++++++++++++++-----
 .../resources/templates/account/checkout.html |  3 +-
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/main/resources/static/css/app.css b/src/main/resources/static/css/app.css
index d3b0a71..0d21a14 100644
--- a/src/main/resources/static/css/app.css
+++ b/src/main/resources/static/css/app.css
@@ -62,3 +62,14 @@ body {
     text-align: left;
     white-space: pre-wrap;
 }
+
+.error-message {
+    color: #575757;
+    font-size: 15px;
+}
+
+.error-details {
+    color: gray;
+    font-size: 12px;
+    text-align: left;
+}
diff --git a/src/main/resources/static/js/private/app.js b/src/main/resources/static/js/private/app.js
index ed33ce8..19e79cb 100644
--- a/src/main/resources/static/js/private/app.js
+++ b/src/main/resources/static/js/private/app.js
@@ -68,22 +68,36 @@ $(function() {
                     color = "red";
                 }
 
-                if (json.state !== undefined) {
+                if (json.state) {
                     text = json.state;
                 }
 
                 // noinspection JSUnresolvedVariable
-                if (json.errorResponse !== undefined &&
-                    json.errorResponse != null &&
-                    json.errorResponse.message != null) {
-                    // noinspection JSUnresolvedVariable
-                    message = '<p style="color: gray; font-size: 15px;">' + json.errorResponse.message + '</p>';
+                if (json.errorResponse &&
+                    json.errorResponse.message) {
+                    message = '<p class="error-message">' + json.errorResponse.message + '</p>';
+
+                    if (json.errorResponse.details) {
+                        message += '<p class="error-details">';
+
+                        $.each(json.errorResponse.details, function(index, value) {
+                            // noinspection JSUnresolvedVariable
+                            message += (index + 1) + '. ' + value.field + ': ' + value.issue + '<br />';
+                        });
+
+                        message += '</p>';
+                    }
                 }
             } else {
                 color = "red";
             }
 
-            paymentProcessingInfoId.append('<div class="centered-text"><h1 style="padding-bottom: 20px; color: ' + color + ';">' + text.toUpperCase() + '</h1>' + message + '</div>');
+            paymentProcessingInfoId.append(
+                '<div class="centered-text">' +
+                '<h1 style="padding-bottom: 20px; color: ' + color + ';">' + text.toUpperCase() + '</h1>' +
+                message +
+                '</div>'
+            );
             paymentProcDialog.modal("show");
         });
 
diff --git a/src/main/resources/templates/account/checkout.html b/src/main/resources/templates/account/checkout.html
index e0e8563..881c793 100644
--- a/src/main/resources/templates/account/checkout.html
+++ b/src/main/resources/templates/account/checkout.html
@@ -4,6 +4,7 @@
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
 <!--/*@thymesVar id="currency" type="java.util.Currency"*/-->
+<!--/*@thymesVar id="user" type="com.shimkiv.paypalm.model.dto.user.User"*/-->
 <!--/*@thymesVar id="shoppingCart" type="com.shimkiv.paypalm.model.cart.ShoppingCart"*/-->
 <!--/*@thymesVar id="paymentForm" type="com.shimkiv.paypalm.model.vo.form.PaymentForm"*/-->
 
@@ -78,7 +79,7 @@ <h3 th:text="#{card.info.label}"></h3>
                     </div>
                     <div class="form-group label-floating">
                         <label class="control-label" for="cardHolderName" th:text="#{checkout.form.name.label}"></label>
-                        <input type="text" id="cardHolderName" name="cardHolderName" class="form-control" maxlength="50" required />
+                        <input type="text" id="cardHolderName" name="cardHolderName" class="form-control" maxlength="50" th:value="${not #strings.isEmpty(user.userSettings.firstName) && not #strings.isEmpty(user.userSettings.lastName)} ? ${user.userSettings.firstName + ' ' + user.userSettings.lastName} : ''" required />
                         <p class="help-block" th:text="#{checkout.form.name.help.label}"></p>
                     </div>
                 </div>