From 3e502ce5926dd06cf4b8938a9191ee3777b8e60a Mon Sep 17 00:00:00 2001
From: Mayank Bansal <mayankbansal125@gmail.com>
Date: Fri, 27 Feb 2026 03:38:36 +0530
Subject: [PATCH] Merge pull request #1040 from
 RealDevSquad/refactor/application-superuser-feedback

feat: update admin feedback API and add request changes button for application
---
 __tests__/applications/applications.test.js |  85 ++++++++++++++-
 applications/index.html                     |   7 ++
 applications/script.js                      | 114 ++++++++++++++------
 applications/style.css                      |  84 ++++++++++++++-
 applications/utils.js                       |  31 +++---
 5 files changed, 272 insertions(+), 49 deletions(-)

diff --git a/__tests__/applications/applications.test.js b/__tests__/applications/applications.test.js
index b214a112..fb09b818 100644
--- a/__tests__/applications/applications.test.js
+++ b/__tests__/applications/applications.test.js
@@ -74,12 +74,26 @@ describe('Applications page', () => {
         });
       } else if (
         url === `${STAGING_API_URL}/applications/lavEduxsb2C5Bl4s289P`
+      ) {
+        interceptedRequest.respond({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ application: pendingApplications[0] }),
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+          },
+        });
+      } else if (
+        interceptedRequest.method() === 'PATCH' &&
+        url === `${STAGING_API_URL}/applications/lavEduxsb2C5Bl4s289P/feedback`
       ) {
         interceptedRequest.respond({
           status: 200,
           contentType: 'application/json',
           body: JSON.stringify({
-            message: 'application updated successfully!',
+            message: 'Application feedback submitted successfully',
           }),
           headers: {
             'Access-Control-Allow-Origin': '*',
@@ -210,7 +224,9 @@ describe('Applications page', () => {
         element.scrollIntoView({ behavior: 'auto' });
       }
     });
-    await page.waitForNetworkIdle();
+    await page.waitForFunction(
+      () => document.querySelectorAll('.application-card').length >= 12,
+    );
     applicationCards = await page.$$('.application-card');
     expect(applicationCards.length).toBe(12);
   });
@@ -355,7 +371,7 @@ describe('Applications page', () => {
     ).toBe(false);
     const toastMessage = await page.$('[data-testid="toast-message"]');
     expect(await toastMessage.evaluate((el) => el.textContent)).toBe(
-      'application updated successfully!',
+      'Application feedback submitted successfully',
     );
   });
 
@@ -371,4 +387,67 @@ describe('Applications page', () => {
     const applicationCardElements = await page.$$('.application-card');
     expect(applicationCardElements.length).toBe(acceptedApplications.length);
   });
+
+  it('should show Request changes button when application details modal is open for a pending application', async () => {
+    await page.goto(
+      `${LOCAL_TEST_PAGE_URL}/applications?dev=true&status=pending`,
+    );
+    await page.waitForSelector('.application-card');
+    await page.click('.application-card');
+    await page.waitForSelector('.application-details:not(.hidden)');
+    const requestChangesButton = await page.$(
+      '.application-details-request-changes',
+    );
+    expect(requestChangesButton).toBeTruthy();
+    const isHidden = await requestChangesButton.evaluate((el) =>
+      el.classList.contains('hidden'),
+    );
+    expect(isHidden).toBe(false);
+  });
+
+  it('should show error toast when clicking Request changes without feedback text', async () => {
+    await page.goto(
+      `${LOCAL_TEST_PAGE_URL}/applications?dev=true&status=pending`,
+    );
+    await page.waitForSelector('.application-card');
+    await page.click('.application-card');
+    await page.waitForSelector('.application-details:not(.hidden)');
+    await page.click('.application-details-request-changes');
+    await page.waitForSelector('[data-testid="toast-component"].show');
+    const toastComponent = await page.$('[data-testid="toast-component"]');
+    expect(
+      await toastComponent.evaluate((el) =>
+        el.classList.contains('error__toast'),
+      ),
+    ).toBe(true);
+    const toastMessage = await page.$('[data-testid="toast-message"]');
+    expect(await toastMessage.evaluate((el) => el.textContent)).toBe(
+      'Feedback is required when requesting changes.',
+    );
+  });
+
+  it('should show success toast when submitting Request changes with feedback text', async () => {
+    await page.goto(
+      `${LOCAL_TEST_PAGE_URL}/applications?dev=true&status=pending`,
+    );
+    await page.waitForSelector('.application-card');
+    await page.click('.application-card');
+    await page.waitForSelector('.application-details:not(.hidden)');
+    await page.type(
+      '.application-textarea',
+      'Please add more details on skills',
+    );
+    await page.click('.application-details-request-changes');
+    await page.waitForSelector('[data-testid="toast-component"].show');
+    const toastComponent = await page.$('[data-testid="toast-component"]');
+    expect(
+      await toastComponent.evaluate((el) =>
+        el.classList.contains('success__toast'),
+      ),
+    ).toBe(true);
+    const toastMessage = await page.$('[data-testid="toast-message"]');
+    expect(await toastMessage.evaluate((el) => el.textContent)).toBe(
+      'Application feedback submitted successfully',
+    );
+  });
 });
diff --git a/applications/index.html b/applications/index.html
index af5e1c02..ce1f79da 100644
--- a/applications/index.html
+++ b/applications/index.html
@@ -132,6 +132,13 @@ <h2>Status</h2>
           >
             Accept
           </button>
+          <button
+            id="application-details-request-changes"
+            class="application-details-request-changes"
+            aria-label="Request Application Changes"
+          >
+            Request changes
+          </button>
           <button
             class="application-details-reject"
             aria-label="Reject Application"
diff --git a/applications/script.js b/applications/script.js
index 03b0e7c8..0731e4f9 100644
--- a/applications/script.js
+++ b/applications/script.js
@@ -3,7 +3,7 @@ import {
   getApplications,
   getIsSuperUser,
   showToast,
-  updateApplication,
+  submitApplicationFeedback,
   getApplicationById,
 } from './utils.js';
 let nextLink;
@@ -32,6 +32,9 @@ const applicationAcceptButton = document.querySelector(
 const applicationRejectButton = document.querySelector(
   '.application-details-reject',
 );
+const applicationRequestChangesButton = document.getElementById(
+  'application-details-request-changes',
+);
 const applyFilterButton = document.getElementById('apply-filter-button');
 const applicationContainer = document.querySelector('.application-container');
 const clearButton = document.getElementById('clear-button');
@@ -81,27 +84,26 @@ let currentApplicationId;
 
 let status = 'all';
 
-function updateUserApplication({ isAccepted }) {
+function updateUserApplication({ status: actionStatus }) {
   const applicationTextarea = document.querySelector('.application-textarea');
-  let status;
-  const payload = {};
-
-  if (isAccepted) status = 'accepted';
-  else status = 'rejected';
-
-  payload['status'] = status;
-
-  if (applicationTextarea.value) {
-    payload.feedback = applicationTextarea.value;
+  const feedbackText = (applicationTextarea?.value ?? '').trim();
+
+  if (actionStatus === 'changes_requested' && !feedbackText) {
+    showToastMessage({
+      isDev,
+      oldToastFunction: showToast,
+      type: 'error',
+      message: 'Feedback is required when requesting changes.',
+    });
+    return;
   }
 
-  updateApplication({
+  submitApplicationFeedback({
     applicationId: currentApplicationId,
-    applicationPayload: payload,
+    status: actionStatus,
+    feedback: feedbackText || undefined,
   })
     .then((res) => {
-      const updatedFeedback = payload.feedback || '';
-      applicationTextarea.value = updatedFeedback;
       showToastMessage({
         isDev,
         oldToastFunction: showToast,
@@ -115,7 +117,7 @@ function updateUserApplication({ isAccepted }) {
         isDev,
         oldToastFunction: showToast,
         type: 'error',
-        message: error.message,
+        message: error.message || 'Failed to submit feedback.',
       });
     });
 }
@@ -144,12 +146,18 @@ function closeApplicationDetails() {
   const applicationRejectedMsg = document.querySelector(
     '.application-details-rejected-msg',
   );
+  const applicationChangesMsg = document.querySelector(
+    '.application-details-changes-msg',
+  );
   if (applicationAcceptedMsg) {
     applicationAcceptedMsg.remove();
   }
   if (applicationRejectedMsg) {
     applicationRejectedMsg.remove();
   }
+  if (applicationChangesMsg) {
+    applicationChangesMsg.remove();
+  }
   removeQueryParamInUrl('id');
 }
 
@@ -167,6 +175,14 @@ function openApplicationDetails(application) {
         title: 'Status',
         description: application.status,
       },
+      {
+        title: 'Score',
+        description: application.score ?? 'N/A',
+      },
+      {
+        title: 'Nudge Count',
+        description: application.nudgeCount ?? 'N/A',
+      },
       {
         title: 'Introduction',
         description: application.intro.introduction,
@@ -220,11 +236,27 @@ function openApplicationDetails(application) {
       attributes: { class: 'section-title' },
       innerText: application.title,
     });
-    const applicationSectionDescription = createElement({
-      type: 'p',
-      attributes: { class: 'description' },
-      innerText: application.description,
-    });
+
+    let applicationSectionDescription;
+    if (application.title === 'Status') {
+      const statusLabel = application.description
+        .split('_')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+      applicationSectionDescription = createElement({
+        type: 'span',
+        attributes: {
+          class: `status-badge status-badge--${application.description}`,
+        },
+        innerText: statusLabel,
+      });
+    } else {
+      applicationSectionDescription = createElement({
+        type: 'p',
+        attributes: { class: 'description' },
+        innerText: application.description,
+      });
+    }
 
     applicationSection.appendChild(applicationSectionTitle);
     applicationSection.appendChild(applicationSectionDescription);
@@ -246,17 +278,20 @@ function openApplicationDetails(application) {
     type: 'textarea',
     attributes: {
       class: 'application-textarea',
-      placeHolder: 'Add Feedback here',
+      placeholder: 'Add Feedback here (required for Request changes)',
     },
-    innerText: application.feedback || '',
+    innerText: '',
   });
 
-  applicationSection.appendChild(applicationSectionTitle);
-  applicationSection.appendChild(applicationTextArea);
-  applicationDetailsMain.appendChild(applicationSection);
+  if (application.status === 'pending') {
+    applicationSection.appendChild(applicationSectionTitle);
+    applicationSection.appendChild(applicationTextArea);
+    applicationDetailsMain.appendChild(applicationSection);
+  }
 
   if (application.status === 'rejected') {
     applicationAcceptButton.classList.add('hidden');
+    applicationRequestChangesButton.classList.add('hidden');
     applicationRejectButton.classList.add('hidden');
     const applicationDetailsRejectedMsg = createElement({
       type: 'p',
@@ -268,6 +303,7 @@ function openApplicationDetails(application) {
     applicationDetailsActionsContainer.append(applicationDetailsRejectedMsg);
   } else if (application.status === 'accepted') {
     applicationAcceptButton.classList.add('hidden');
+    applicationRequestChangesButton.classList.add('hidden');
     applicationRejectButton.classList.add('hidden');
     const applicationDetailsAcceptedMsg = createElement({
       type: 'p',
@@ -277,12 +313,27 @@ function openApplicationDetails(application) {
       innerText: 'Application was already accepted',
     });
     applicationDetailsActionsContainer.append(applicationDetailsAcceptedMsg);
+  } else if (application.status === 'changes_requested') {
+    applicationAcceptButton.classList.add('hidden');
+    applicationRequestChangesButton.classList.add('hidden');
+    applicationRejectButton.classList.add('hidden');
+    const applicationDetailsChangesMsg = createElement({
+      type: 'p',
+      attributes: {
+        class: 'application-details-changes-msg',
+      },
+      innerText: 'Changes have been requested for this application',
+    });
+    applicationDetailsActionsContainer.append(applicationDetailsChangesMsg);
   } else {
     applicationRejectButton.disabled = false;
     applicationRejectButton.style.cursor = 'pointer';
     applicationRejectButton.classList.remove('disable-button');
     applicationRejectButton.classList.remove('hidden');
-
+    applicationRequestChangesButton.disabled = false;
+    applicationRequestChangesButton.style.cursor = 'pointer';
+    applicationRequestChangesButton.classList.remove('disable-button');
+    applicationRequestChangesButton.classList.remove('hidden');
     applicationAcceptButton.classList.remove('hidden');
     applicationAcceptButton.disabled = false;
     applicationAcceptButton.style.cursor = 'pointer';
@@ -635,8 +686,11 @@ closeDropdownBtn.addEventListener('click', () => {
 });
 
 applicationAcceptButton.addEventListener('click', () =>
-  updateUserApplication({ isAccepted: true }),
+  updateUserApplication({ status: 'accepted' }),
+);
+applicationRequestChangesButton.addEventListener('click', () =>
+  updateUserApplication({ status: 'changes_requested' }),
 );
 applicationRejectButton.addEventListener('click', () =>
-  updateUserApplication({ isAccepted: false }),
+  updateUserApplication({ status: 'rejected' }),
 );
diff --git a/applications/style.css b/applications/style.css
index 3b8fe894..4c23bc99 100644
--- a/applications/style.css
+++ b/applications/style.css
@@ -15,6 +15,14 @@
     0px 4px 8px 3px rgba(0, 0, 0, 0.15);
   --color-green: green;
   --color-red-variant1: #f43030;
+  --color-changes-bg: #ffedd5;
+  --color-changes-text: #9a3412;
+  --color-accepted-bg: #d1fae5;
+  --color-accepted-text: #065f46;
+  --color-rejected-bg: #fee2e2;
+  --color-rejected-text: #991b1b;
+  --color-pending-bg: #f3f4f6;
+  --color-pending-text: #374151;
 }
 
 .user-text-index {
@@ -455,6 +463,35 @@ body {
   margin: 0;
 }
 
+.status-badge {
+  display: inline-block;
+  align-self: flex-start;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.status-badge--accepted {
+  background-color: var(--color-accepted-bg);
+  color: var(--color-accepted-text);
+}
+
+.status-badge--rejected {
+  background-color: var(--color-rejected-bg);
+  color: var(--color-rejected-text);
+}
+
+.status-badge--changes_requested {
+  background-color: var(--color-changes-bg);
+  color: var(--color-changes-text);
+}
+
+.status-badge--pending {
+  background-color: var(--color-pending-bg);
+  color: var(--color-pending-text);
+}
+
 .application-details
   .application-details-main
   .application-section
@@ -480,7 +517,10 @@ body {
 }
 
 .application-details .application-details-actions .application-details-reject,
-.application-details .application-details-actions .application-details-accept {
+.application-details .application-details-actions .application-details-accept,
+.application-details
+  .application-details-actions
+  .application-details-request-changes {
   cursor: pointer;
   border: none;
   height: 95%;
@@ -495,7 +535,7 @@ body {
   color: var(--red-color);
   background-color: white;
   margin: 0 auto;
-  width: 40%;
+  width: 30%;
   border: 2px solid var(--red-color);
 }
 
@@ -523,7 +563,38 @@ body {
 .application-details .application-details-actions .application-details-accept {
   background: var(--color-primary);
   margin: 0 auto;
-  width: 40%;
+  width: 30%;
+}
+
+.application-details
+  .application-details-actions
+  .application-details-request-changes {
+  background: var(--color-changes-bg);
+  color: var(--color-changes-text);
+  border: 2px solid var(--color-changes-text);
+  margin: 0 auto;
+  width: 30%;
+}
+
+.application-details
+  .application-details-actions
+  .application-details-request-changes:is(:hover, :active, :focus-visible) {
+  background: var(--color-changes-text);
+  color: var(--white);
+  transition: transform 0.2s ease;
+  will-change: transform;
+}
+
+.application-details
+  .application-details-actions
+  .application-details-request-changes:hover {
+  transform: scale(1.05);
+}
+
+.application-details
+  .application-details-actions
+  .application-details-request-changes:active {
+  animation: bounceBackAnimation 0.4s ease forwards;
 }
 
 .application-details
@@ -551,7 +622,8 @@ body {
 }
 
 .application-details-accepted-msg,
-.application-details-rejected-msg {
+.application-details-rejected-msg,
+.application-details-changes-msg {
   font-weight: bold;
   font-size: 18px;
   width: 100%;
@@ -566,6 +638,10 @@ body {
   color: var(--red-color);
 }
 
+.application-details-changes-msg {
+  color: var(--color-changes-text);
+}
+
 .unauthorized-text {
   text-align: center;
 }
diff --git a/applications/utils.js b/applications/utils.js
index aaa72ab0..1d3da353 100644
--- a/applications/utils.js
+++ b/applications/utils.js
@@ -94,20 +94,27 @@ async function getIsSuperUser(isDev) {
   }
 }
 
-async function updateApplication({ applicationPayload, applicationId }) {
+async function submitApplicationFeedback({ applicationId, status, feedback }) {
   try {
-    const res = await fetch(`${BASE_URL}/applications/${applicationId}`, {
-      method: 'PATCH',
-      credentials: 'include',
-      body: JSON.stringify(applicationPayload),
-      headers: {
-        'Content-type': 'application/json',
+    const body = { status };
+    if (feedback) {
+      body.feedback = feedback;
+    }
+    const res = await fetch(
+      `${BASE_URL}/applications/${applicationId}/feedback`,
+      {
+        method: 'PATCH',
+        credentials: 'include',
+        body: JSON.stringify(body),
+        headers: {
+          'Content-type': 'application/json',
+        },
       },
-    });
+    );
 
     if (!res.ok) {
-      const error = await res.json();
-      throw error;
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.message || `Request failed (${res.status})`);
     }
 
     const data = await res.json();
@@ -117,7 +124,7 @@ async function updateApplication({ applicationPayload, applicationId }) {
   }
 }
 
-function showToast({ message, type }) {
+function showToast(type, message) {
   toast.innerText = message;
 
   if (type === 'success') {
@@ -141,7 +148,7 @@ export {
   createElement,
   getApplications,
   getApplicationById,
-  updateApplication,
+  submitApplicationFeedback,
   getIsSuperUser,
   showToast,
 };