Enhance the application model and render new fields

applications/index.html

@@ -132,6 +132,12 @@ <h2>Status</h2>
           >
             Accept
           </button>
+          <button
+            class="application-details-request-changes"
+            aria-label="Request changes for this application"
+          >
+            Request Changes
+          </button>
           <button
             class="application-details-reject"
             aria-label="Reject Application"

applications/script.js

@@ -32,6 +32,10 @@ const applicationAcceptButton = document.querySelector(
 const applicationRejectButton = document.querySelector(
   '.application-details-reject',
 );
+const applicationRequestChangesButton = document.querySelector(
+  '.application-details-request-changes',
+);
+
 const applyFilterButton = document.getElementById('apply-filter-button');
 const applicationContainer = document.querySelector('.application-container');
 const clearButton = document.getElementById('clear-button');
@@ -81,32 +85,68 @@ let currentApplicationId;
 
 let status = 'all';
 
-function updateUserApplication({ isAccepted }) {
+function updateUserApplication({ isAccepted, isRequestChanges = false }) {
   const applicationTextarea = document.querySelector('.application-textarea');
-  let status;
-  const payload = {};
 
-  if (isAccepted) status = 'accepted';
-  else status = 'rejected';
+  if (isRequestChanges) {
+    if (!applicationTextarea || !applicationTextarea.value.trim()) {
+      showToastMessage({
+        isDev,
+        oldToastFunction: showToast,
+        type: 'error',
+        message: 'Please provide feedback before requesting changes.',
+      });
+      if (applicationTextarea) applicationTextarea.focus();
+      return;
+    }
+    updateApplication({
+      applicationId: currentApplicationId,
+      applicationPayload: {
+        status: 'changes_requested',
+        feedback: applicationTextarea.value,
+      },
+    })
+      .then(() => {
+        showToastMessage({
+          isDev,
+          oldToastFunction: showToast,
+          type: 'success',
+          message: 'Changes requested successfully!',
+        });
+        setTimeout(() => closeApplicationDetails(), 1000);
+      })
+      .catch((error) => {
+        showToastMessage({
+          isDev,
+          oldToastFunction: showToast,
+          type: 'error',
+          message: error.message || 'Failed to request changes',
+        });
+      });
+    return;
+  }
 
-  payload['status'] = status;
+  const applicationStatus = isAccepted ? 'accepted' : 'rejected';
+  const feedback =
+    applicationTextarea && applicationTextarea.value
+      ? applicationTextarea.value.trim()
+      : '';
 
-  if (applicationTextarea.value) {
-    payload.feedback = applicationTextarea.value;
+  const payload = { status: applicationStatus };
+  if (feedback) {
+    payload.feedback = feedback;
   }
 
   updateApplication({
     applicationId: currentApplicationId,
     applicationPayload: payload,
   })
-    .then((res) => {
-      const updatedFeedback = payload.feedback || '';
-      applicationTextarea.value = updatedFeedback;
+    .then(() => {
       showToastMessage({
         isDev,
         oldToastFunction: showToast,
         type: 'success',
-        message: res.message,
+        message: 'application updated successfully!',
       });
       setTimeout(() => closeApplicationDetails(), 1000);
     })
@@ -166,6 +206,21 @@ function openApplicationDetails(application) {
       {
         title: 'Status',
         description: application.status,
+        isStatus: true,
+      },
+      {
+        title: 'Application Score',
+        description:
+          application.applicationScore !== undefined
+            ? application.applicationScore
+            : 'N/A',
+        isHighlight: true,
+      },
+      {
+        title: 'Nudge Count',
+        description:
+          application.nudgeCount !== undefined ? application.nudgeCount : 'N/A',
+        isHighlight: true,
       },
       {
         title: 'Introduction',
@@ -210,27 +265,52 @@ function openApplicationDetails(application) {
 
   applicationDetailsMain.appendChild(title);
 
-  selectedApplication.applicationDetails.forEach((application) => {
+  const highlightsSection = createElement({
+    type: 'div',
+    attributes: { class: 'application-highlights' },
+  });
+
+  selectedApplication.applicationDetails.forEach((detail) => {
     const applicationSection = createElement({
       type: 'div',
-      attributes: { class: 'application-section' },
+      attributes: {
+        class: detail.isHighlight
+          ? 'application-section application-highlight-item'
+          : 'application-section',
+      },
     });
     const applicationSectionTitle = createElement({
       type: 'h2',
       attributes: { class: 'section-title' },
-      innerText: application.title,
+      innerText: detail.title,
     });
+
+    let descriptionClass = 'description';
+    if (detail.isStatus) {
+      descriptionClass += ` status-badge status-${detail.description?.toLowerCase()}`;
+    }
+
     const applicationSectionDescription = createElement({
       type: 'p',
-      attributes: { class: 'description' },
-      innerText: application.description,
+      attributes: { class: descriptionClass },
+      innerText: detail.description,
     });
 
     applicationSection.appendChild(applicationSectionTitle);
     applicationSection.appendChild(applicationSectionDescription);
-    applicationDetailsMain.appendChild(applicationSection);
+
+    if (detail.isHighlight) {
+      highlightsSection.appendChild(applicationSection);
+    } else {
+      applicationDetailsMain.appendChild(applicationSection);
+    }
   });
 
+  if (highlightsSection.children.length > 0) {
+    const titleElement = applicationDetailsMain.querySelector('.title');
+    titleElement.insertAdjacentElement('afterend', highlightsSection);
+  }
+
   const applicationSection = createElement({
     type: 'div',
     attributes: { class: 'application-section' },
@@ -258,6 +338,8 @@ function openApplicationDetails(application) {
   if (application.status === 'rejected') {
     applicationAcceptButton.classList.add('hidden');
     applicationRejectButton.classList.add('hidden');
+    applicationRequestChangesButton.classList.add('hidden');
+
     const applicationDetailsRejectedMsg = createElement({
       type: 'p',
       attributes: {
@@ -269,6 +351,8 @@ function openApplicationDetails(application) {
   } else if (application.status === 'accepted') {
     applicationAcceptButton.classList.add('hidden');
     applicationRejectButton.classList.add('hidden');
+    applicationRequestChangesButton.classList.add('hidden');
+
     const applicationDetailsAcceptedMsg = createElement({
       type: 'p',
       attributes: {
@@ -277,6 +361,21 @@ function openApplicationDetails(application) {
       innerText: 'Application was already accepted',
     });
     applicationDetailsActionsContainer.append(applicationDetailsAcceptedMsg);
+  } else if (application.status === 'changes_requested') {
+    applicationAcceptButton.classList.add('hidden');
+    applicationRejectButton.classList.add('hidden');
+    applicationRequestChangesButton.classList.add('hidden');
+
+    const applicationDetailsChangesRequestedMsg = createElement({
+      type: 'p',
+      attributes: {
+        class: 'application-details-changes-requested-msg',
+      },
+      innerText: 'Changes requested',
+    });
+    applicationDetailsActionsContainer.append(
+      applicationDetailsChangesRequestedMsg,
+    );
   } else {
     applicationRejectButton.disabled = false;
     applicationRejectButton.style.cursor = 'pointer';
@@ -287,6 +386,11 @@ function openApplicationDetails(application) {
     applicationAcceptButton.disabled = false;
     applicationAcceptButton.style.cursor = 'pointer';
     applicationAcceptButton.classList.remove('disable-button');
+
+    applicationRequestChangesButton.classList.remove('hidden');
+    applicationRequestChangesButton.disabled = false;
+    applicationRequestChangesButton.style.cursor = 'pointer';
+    applicationRequestChangesButton.classList.remove('disable-button');
   }
 }
 
@@ -640,3 +744,6 @@ applicationAcceptButton.addEventListener('click', () =>
 applicationRejectButton.addEventListener('click', () =>
   updateUserApplication({ isAccepted: false }),
 );
+applicationRequestChangesButton.addEventListener('click', () => {
+  updateUserApplication({ isRequestChanges: true });
+});