Add continuous action labels and chat routing

apps/customer-portal/webapp/src/components/dashboard/cases-table/CasesTable.tsx

@@ -15,9 +15,10 @@
 // under the License.
 
 import { ListingTable } from "@wso2/oxygen-ui";
-import { type JSX, useState, useMemo } from "react";
+import { type JSX, useState, useMemo, useCallback } from "react";
 import { useNavigate } from "react-router";
 import { useAsgardeo } from "@asgardeo/react";
+import { getNoveraChatEnabled } from "@utils/settingsStorage";
 import { useGetProjectCasesPage } from "@api/useGetProjectCasesPage";
 import useGetCasesFilters from "@api/useGetCasesFilters";
 import FilterPopover, {
@@ -178,6 +179,16 @@ const CasesTable = ({ projectId }: CasesTableProps): JSX.Element => {
     options: field.options,
   }));
 
+  const handleCreateCase = useCallback(() => {
+    if (getNoveraChatEnabled()) {
+      navigate(`/${projectId}/support/chat/describe-issue`);
+    } else {
+      navigate(`/${projectId}/support/chat/create-case`, {
+        state: { skipChat: true },
+      });
+    }
+  }, [navigate, projectId]);
+
   const getDisplayValue = (fieldId: string, value: any): string => {
     if (!value) return "";
     const field = dynamicFilterFields.find((f) => f.id === fieldId);
@@ -212,7 +223,7 @@ const CasesTable = ({ projectId }: CasesTableProps): JSX.Element => {
         onClearAll={handleClearFilters}
         onFilterClick={() => setIsFilterOpen(true)}
         onAllCases={() => navigate(`/${projectId}/support/cases`)}
-        onCreateCase={() => navigate(`/${projectId}/support/chat/create-case`)}
+        onCreateCase={handleCreateCase}
       />
 
       {/* Cases list */}

apps/customer-portal/webapp/src/components/project-details/project-overview/project-information/ProjectInformationCard.tsx

@@ -45,14 +45,14 @@ const ProjectInformationCard = ({
     project?.createdOn ? formatProjectDate(project.createdOn) : "--";
   const getType = () => project?.type || "--";
   const getSupportTier = () => project?.account?.supportTier || "--";
-  const getStartDate = () =>
-    project?.account?.activationDate
-      ? formatProjectDate(project.account.activationDate)
-      : "--";
-  const getEndDate = () =>
-    project?.account?.deactivationDate
-      ? formatProjectDate(project.account.deactivationDate)
-      : "--";
+  const getStartDate = () => {
+    const val = project?.account?.activationDate;
+    return val?.trim() ? formatProjectDate(val.trim()) : "--";
+  };
+  const getEndDate = () => {
+    const val = project?.account?.deactivationDate;
+    return val?.trim() ? formatProjectDate(val.trim()) : "--";
+  };
 
   return (
     <Card sx={{ height: "100%" }}>

apps/customer-portal/webapp/src/components/support/case-details/header/CaseDetailsActionRow.tsx

@@ -29,7 +29,7 @@ import {
   type Theme,
 } from "@wso2/oxygen-ui";
 import { CirclePlay } from "@wso2/oxygen-ui-icons-react";
-import { type JSX } from "react";
+import { type JSX, useState } from "react";
 import {
   CASE_STATUS_ACTIONS,
   type CaseStatusPaletteIntent,
@@ -45,6 +45,7 @@ import {
   getAssignedEngineerLabel,
   getAvailableCaseActions,
   isWithinOpenRelatedCaseWindow,
+  toPresentContinuousActionLabel,
   toPresentTenseActionLabel,
 } from "@utils/support";
 
@@ -132,6 +133,9 @@ export default function CaseDetailsActionRow({
   const { showError } = useErrorBanner();
 
   const patchCase = usePatchCase(projectId, caseId);
+  const [pendingActionLabel, setPendingActionLabel] = useState<string | null>(
+    null,
+  );
 
   const availableActions = getAvailableCaseActions(statusLabel).filter(
     (label) => {
@@ -224,7 +228,8 @@ export default function CaseDetailsActionRow({
           const stateKey = getStateKeyForAction(label, caseStates);
           const isOpenRelatedCase = label === "Open Related Case";
           const canPatch = !isOpenRelatedCase && stateKey != null && !!caseId;
-          const isThisPending = !isOpenRelatedCase && patchCase.isPending;
+          const isThisPending =
+            !isOpenRelatedCase && patchCase.isPending && pendingActionLabel === label;
 
           return (
             <Button
@@ -247,7 +252,8 @@ export default function CaseDetailsActionRow({
                 isOpenRelatedCase
                   ? onOpenRelatedCase
                   : canPatch
-                    ? () =>
+                    ? () => {
+                        setPendingActionLabel(label);
                         patchCase.mutate(
                           { stateKey: stateKey! },
                           {
@@ -260,15 +266,21 @@ export default function CaseDetailsActionRow({
                                   "Failed to update case status. Please try again.",
                               );
                             },
+                            onSettled: () => {
+                              setPendingActionLabel(null);
+                            },
                           },
-                        )
+                        );
+                      }
                     : undefined
               }
               sx={
                 getActionButtonSx(theme, paletteIntent) as Record<string, unknown>
               }
             >
-              {toPresentTenseActionLabel(label)}
+              {isThisPending
+                ? toPresentContinuousActionLabel(label)
+                : toPresentTenseActionLabel(label)}
             </Button>
           );
         })}

apps/customer-portal/webapp/src/utils/__tests__/support.test.ts

@@ -49,6 +49,7 @@ import {
   hasDisplayableContent,
   stripCustomerPrefixFromReason,
   isWithinOpenRelatedCaseWindow,
+  toPresentContinuousActionLabel,
   toPresentTenseActionLabel,
 } from "@utils/support";
 import type { CaseComment } from "@models/responses";
@@ -363,6 +364,25 @@ describe("support utils", () => {
     });
   });
 
+  describe("toPresentContinuousActionLabel", () => {
+    it("should map Closed to Closing...", () => {
+      expect(toPresentContinuousActionLabel("Closed")).toBe("Closing...");
+    });
+    it("should map Reopened to Reopening...", () => {
+      expect(toPresentContinuousActionLabel("Reopened")).toBe("Reopening...");
+    });
+    it("should map Accept Solution to Accepting...", () => {
+      expect(toPresentContinuousActionLabel("Accept Solution")).toBe(
+        "Accepting...",
+      );
+    });
+    it("should map Reject Solution to Rejecting...", () => {
+      expect(toPresentContinuousActionLabel("Reject Solution")).toBe(
+        "Rejecting...",
+      );
+    });
+  });
+
   describe("getAttachmentFileCategory", () => {
     it("should return image for png, jpg, gif, webp, svg", () => {
       expect(getAttachmentFileCategory("photo.png", "")).toBe("image");

apps/customer-portal/webapp/src/utils/support.ts

@@ -831,6 +831,24 @@ export function toPresentTenseActionLabel(label: string): string {
   return map[label] ?? label;
 }
 
+/**
+ * Maps action labels to present continuous for loading state (e.g., "Closed" -> "Closing...").
+ *
+ * @param label - Action label (e.g., "Closed", "Accept Solution").
+ * @returns {string} Present continuous label with ellipsis.
+ */
+export function toPresentContinuousActionLabel(label: string): string {
+  const map: Record<string, string> = {
+    Closed: "Closing...",
+    Reopened: "Reopening...",
+    "Waiting on WSO2": "Waiting on WSO2...",
+    "Waiting On WSO2": "Waiting on WSO2...",
+    "Accept Solution": "Accepting...",
+    "Reject Solution": "Rejecting...",
+  };
+  return map[label] ?? `${label}...`;
+}
+
 /** Maps action labels (from getAvailableCaseActions) to caseState labels for lookup. */
 export const ACTION_TO_CASE_STATE_LABEL: Record<string, string> = {
   Closed: "Closed",