Fix java application (compiling was failing) + add screen for no enrollments to frotnend

Author: galeaspablo

application/backend-credit-card-enrollment/backend-java/src/main/java/cloud/ambar/creditcard/enrollment/controller/EnrollmentReactionController.java

@@ -1,6 +1,7 @@
 package cloud.ambar.creditcard.enrollment.controller;
 
 import cloud.ambar.common.ambar.AmbarHttpRequest;
+import cloud.ambar.common.eventstore.EventStore;
 import cloud.ambar.common.reaction.ReactionController;
 import cloud.ambar.common.serializedevent.Deserializer;
 import cloud.ambar.creditcard.enrollment.reaction.ReviewEnrollmentReactionHandler;
@@ -19,9 +20,10 @@ public class EnrollmentReactionController extends ReactionController {
     private final ReviewEnrollmentReactionHandler reviewEnrollmentReactionHandler;
 
     public EnrollmentReactionController(
+            EventStore eventStore,
             Deserializer deserializer,
             ReviewEnrollmentReactionHandler reviewEnrollmentReactionHandler) {
-        super(deserializer);
+        super(eventStore, deserializer);
         this.reviewEnrollmentReactionHandler = reviewEnrollmentReactionHandler;
     }
 

application/frontend-javascript/src/handlebarsHelpers.js

@@ -21,5 +21,8 @@ export const helpers = {
     };
 
     return date.toLocaleString('en-GB', options);
+  },
+  isNonEmptyArray: function (array) {
+    return Array.isArray(array) && array.length > 0;
   }
 };

application/frontend-javascript/src/views/card/enrollments.handlebars

@@ -6,30 +6,38 @@
         <div class="order-last md:order-first pt-8 pr-0 md:pr-16 md:pt-0 flex justify-center w-full md:w-auto">
             <img src="/assets/images/card.png" class="mx-auto" style="width: 200px; height: fit-content; transform: rotate(-11deg)">
         </div>
-        <ul class="order-first md:order-last">
-            {{#each locals.enrollments}}
-                <li class="p-3 hover:bg-slate-400/25 focus:bg-slate-400/25 active:bg-slate-400/25">
-                    <div class="flex items-center space-x-4 rtl:space-x-reverse">
-                        <div class="flex-1 min-w-0">
-                            <p class="text-md font-large text-gray-900 truncate">
-                                {{this.productName}}
-                            </p>
-                            <p class="text-xs font-medium {{#if (equals this.status "ACCEPTED")}} text-green-700 {{ else }} text-red-700 {{/if}}">
-                                Status: {{this.status}}
-                            </p>
-                            <p class="text-xs font-medium text-gray-700">
-                                Status Reason: {{this.statusReason}}
-                            </p>
-                            <p class="text-xs font-medium text-gray-700">
-                                Requested: {{prettyPrintDate this.requestedDate}}
-                            </p>
-                            <p class="text-xs font-medium text-gray-700">
-                                Reviewed: {{prettyPrintDate this.reviewedOn}}
-                            </p>
+        {{#if (isNonEmptyArray locals.enrollments) }}
+
+            <ul class="order-first md:order-last">
+                {{#each locals.enrollments}}
+                    <li class="p-3 hover:bg-slate-400/25 focus:bg-slate-400/25 active:bg-slate-400/25">
+                        <div class="flex items-center space-x-4 rtl:space-x-reverse">
+                            <div class="flex-1 min-w-0">
+                                <p class="text-md font-large text-gray-900 truncate">
+                                    {{this.productName}}
+                                </p>
+                                <p class="text-xs font-medium {{#if (equals this.status "ACCEPTED")}} text-green-700 {{ else }} text-red-700 {{/if}}">
+                                    Status: {{this.status}}
+                                </p>
+                                <p class="text-xs font-medium text-gray-700">
+                                    Status Reason: {{this.statusReason}}
+                                </p>
+                                <p class="text-xs font-medium text-gray-700">
+                                    Requested: {{prettyPrintDate this.requestedDate}}
+                                </p>
+                                <p class="text-xs font-medium text-gray-700">
+                                    Reviewed: {{prettyPrintDate this.reviewedOn}}
+                                </p>
+                            </div>
                         </div>
-                    </div>
-                </li>
-            {{/each}}
-        </ul>
+                    </li>
+                {{/each}}
+            </ul>
+        {{else}}
+            <div class="order-first md:order-last">
+                <h2 class="text-2xl font-bold text-gray-900">No Enrollments</h2>
+                <p class="text-sm font-medium text-gray-700">You have no enrollments</p>
+            </div>
+        {{/if}}
     </div>
 </div>