Clean up enrollments and products. Add username to homepage

Author: galeaspablo

application/frontend-javascript/src/handlebarsHelpers.js

@@ -3,4 +3,23 @@ export const helpers = {
     const dollars = (cents / 100).toFixed(2);
     return `${dollars}`;
   },
-};
+
+  equals: function (a, b) {
+    return a === b;
+  },
+  prettyPrintDate: function (isoString) {
+    const date = new Date(isoString);
+
+    const options = {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: false,
+      timeZoneName: 'short'
+    };
+
+    return date.toLocaleString('en-GB', options);
+  }
+};

application/frontend-javascript/src/main.js

@@ -66,10 +66,6 @@ function authenticatedOrNot(req, res, next) {
 
 function authenticate(req, { token }) {
   req.session.token = token;
-  // req.session.email = email;
-  // req.session.requestedEmail = requestedEmail;
-  // req.session.userId = userId;
-  // req.session.verified = verified;
 }
 
 function unauthenticate(req) {
@@ -104,13 +100,13 @@ app.set('views', path.join(__dirname, "views"));
 const static_dir = path.join(path.dirname(__dirname), 'assets');
 app.use("/assets", Express.static(static_dir))
 
-app.get('/sign-in', unauthenticated, renderSignedOut("sign-in", { title: "Sign in" }))
-app.get('/sign-up', unauthenticated, renderSignedOut("sign-up", { title: "Sign-up" }))
-app.get('/sign-up-success', unauthenticated, renderSignedOut("sign-up-success", { title: "Sign-up success" }))
+app.get('/sign-in', unauthenticated, renderSignedOut("sign-in", { title: "Sign In" }))
+app.get('/sign-up', unauthenticated, renderSignedOut("sign-up", { title: "Sign Up" }))
+app.get('/sign-up-success', unauthenticated, renderSignedOut("sign-up-success", { title: "Sign Up Success" }))
 app.get('/user/details', authenticated, routeUserDetails)
 app.post('/user/details', authenticated, routeUserDetailsPost)
 app.get('/logout', authenticated, routeLogout)
-app.get('/', authenticated, render("home", { title: "Home" }))
+app.get('/', authenticated, routeHome)
 app.get('/verify-email', authenticatedOrNot, routeVerifyEmail);
 app.post('/sign-in', unauthenticated, routeSignIn);
 app.post('/sign-up', unauthenticated,  routeSignUp);
@@ -119,6 +115,15 @@ app.get('/card/products', authenticated, routeCardProducts);
 app.post('/card/enrollment', authenticated, routeRequestedEnrollment);
 app.get('/card/enrollments', authenticated, routeCardEnrollments);
 
+// Default metadata for requests.
+const metadata = {
+  environment: "browser",
+  devicePlatform: "unknown",
+  deviceModel: "unknown",
+  deviceOSVersion: "unknown",
+  deviceOrientation: "unknown"
+};
+
 async function fetchUserDetails(token) {
   const response = await fetch(endpoints["user-details"], {
       method: "POST",
@@ -135,7 +140,7 @@ async function fetchUserDetails(token) {
     throw new Error(error);
   }
 
-  const { userId, primaryEmailStatus } = r;
+  const { userId, primaryEmailStatus, username } = r;
   const { email, requestedEmail, verified } =
     ("unverifiedEmail" in primaryEmailStatus)
     ? { email: primaryEmailStatus.unverifiedEmail.email, requestedEmail: null, verified: false }
@@ -145,26 +150,33 @@ async function fetchUserDetails(token) {
     ? { email: primaryEmailStatus.verifiedButRequestedNewEmail.verifiedEmail, requestedEmail: primaryEmailStatus.verifiedButRequestedNewEmail.requestedEmail, verified: false }
     : new Error(`Unknown state of primaryEmailStatus. ${JSON.stringify(primaryEmailStatus)}`);
 
-  return { userId, email, requestedEmail, verified };
+  return { userId, email, requestedEmail, verified, username };
 }
 
+async function routeHome(req, res) {
+  try {
+    const { username } = await fetchUserDetails(req.session.token);
 
-// Default metadata for requests.
-const metadata = {
-  environment: "browser",
-  devicePlatform: "unknown",
-  deviceModel: "unknown",
-  deviceOSVersion: "unknown",
-  deviceOrientation: "unknown"
-};
+    res.render("home", {
+      layout: layouts.main,
+      locals: {
+        title: "Home",
+        username
+      }
+    });
+  } catch (error) {
+    console.error("Error on homepage:", error);
+    errorPage(res, "Failed to load homepage");
+  }
+}
 
 async function renderUserDetails(req, res, { successMessage, failureMessage }) {
 
   const { email, userId, verified, requestedEmail } = await fetchUserDetails(req.session.token);
   res.render("details", {
     layout: layouts.main,
     locals: {
-      title: "User details",
+      title: "User Details",
       email: email,
       userId: userId,
       requestedEmail: requestedEmail,
@@ -174,6 +186,7 @@ async function renderUserDetails(req, res, { successMessage, failureMessage }) {
     }
   });
 }
+
 async function routeUserDetails(req, res) {
   try {
     return await renderUserDetails(req, res, {});
@@ -240,14 +253,14 @@ async function routeVerifyEmail(req,res) {
       const error = getError(r);
       res.render("verify-email", {
         layout: layouts.signedOut,
-        locals: { title: "Verify email", error },
+        locals: { title: "Verify Email", error },
       });
       return;
     }
 
     res.render(`verify-email`, {
       layout: layouts.signedOut,
-      locals: { title: "Verify email" },
+      locals: { title: "Verify Email" },
     })
   } catch (error) {
     console.error("Error verifying email:", error);
@@ -281,7 +294,7 @@ async function routeSignIn(req, res) {
 
       res.render("sign-in", {
         layout: layouts.signedOut,
-        locals: { title: "Sign in", error },
+        locals: { title: "Sign In", error },
       });
       return;
     }
@@ -339,7 +352,7 @@ async function routeSignUp(req, res) {
 
       res.render("sign-up", {
         layout: layouts.signedOut,
-        locals: { title: "Sign-up", error, username, email }
+        locals: { title: "Sign Up", error, username, email }
       });
       return;
     }
@@ -518,6 +531,7 @@ app.get('/event-bus-yml', (req, res) => {
     res.status(500).json({ error: 'Error reading YAML file' });
   }
 });
+
 app.get('/event-bus.yml', (req, res) => {
     try {
         const fileContents = readFileSync('/ambar-yml/ambar-config.yaml', 'utf8');

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

@@ -14,17 +14,17 @@
                             <p class="text-md font-large text-gray-900 truncate">
                                 {{this.productName}}
                             </p>
-                            <p class="text-xs font-medium text-gray-700">
-                                Requested On: {{this.requestedDate}}
+                            <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: {{this.status}}
+                                Status Reason: {{this.statusReason}}
                             </p>
                             <p class="text-xs font-medium text-gray-700">
-                                Code: {{this.statusReason}}
+                                Requested: {{prettyPrintDate this.requestedDate}}
                             </p>
                             <p class="text-xs font-medium text-gray-700">
-                                Reviewed On: {{this.reviewedOn}}
+                                Reviewed: {{prettyPrintDate this.reviewedOn}}
                             </p>
                         </div>
                     </div>

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

@@ -3,7 +3,7 @@
 <div class="w-full px-4">
     <div class="flex flex-col md:flex-row justify-center items-center">
         <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)">
+            <img src="/assets/images/illustration-2.png" class="mx-auto" style="width: 250px; height: fit-content;">
         </div>
         <ul class="order-first md:order-last">
             {{#each locals.products}}

application/frontend-javascript/src/views/home.handlebars

@@ -3,7 +3,7 @@
 <div class="mx-auto max-w-7xl px-6 pt-2 flex flex-col lg:flex-row items-center justify-center">
     <div class="text-center lg:text-left lg:mr-16 lg:pb-16">
         <h4 class="text-4xl font-bold tracking-tight text-gray-700 flex items-center justify-center lg:justify-start">
-            Welcome
+            Welcome, {{ locals.username }}!
             <svg
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 24 24"
@@ -12,7 +12,7 @@
                 <path fill-rule="evenodd" d="M9 4.5a.75.75 0 01.721.544l.813 2.846a3.75 3.75 0 002.576 2.576l2.846.813a.75.75 0 010 1.442l-2.846.813a3.75 3.75 0 00-2.576 2.576l-.813 2.846a.75.75 0 01-1.442 0l-.813-2.846a3.75 3.75 0 00-2.576-2.576l-2.846-.813a.75.75 0 010-1.442l2.846-.813A3.75 3.75 0 007.466 7.89l.813-2.846A.75.75 0 019 4.5zM18 1.5a.75.75 0 01.728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 010 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 01-1.456 0l-.258-1.036a2.625 2.625 0 00-1.91-1.91l-1.036-.258a.75.75 0 010-1.456l1.036-.258a2.625 2.625 0 001.91-1.91l.258-1.036A.75.75 0 0118 1.5zM16.5 15a.75.75 0 01.712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 010 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 01-1.422 0l-.395-1.183a1.5 1.5 0 00-.948-.948l-1.183-.395a.75.75 0 010-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0116.5 15z" clip-rule="evenodd"></path>
             </svg>
         </h4>
-        <p class="mt-3 ml-1 text-xl leading-8 text-gray-500 lg:pb-16">Discover event sourcing!</p>
+        <p class="mt-3 ml-1 text-xl leading-8 text-gray-500 lg:pb-16">Would you like a credit card?</p>
     </div>
 
     <img src="/assets/images/illustration-1.png" class="w-2/5 mt-8 lg:ml-16">