feat(customer-portal): Service Requests list, detail view, and create flow

apps/customer-portal/webapp/src/App.tsx

@@ -32,6 +32,9 @@ import AnnouncementDetailsPage from "@pages/AnnouncementDetailsPage";
 import AllConversationsPage from "@pages/AllConversationsPage";
 import ConversationDetailsPage from "@pages/ConversationDetailsPage";
 import CaseDetailsPage from "@pages/CaseDetailsPage";
+import ServiceRequestsPage from "@pages/ServiceRequestsPage";
+import ServiceRequestDetailsPage from "@pages/ServiceRequestDetailsPage";
+import CreateServiceRequestPage from "@pages/CreateServiceRequestPage";
 import NoveraChatPage from "@pages/NoveraChatPage";
 import DescribeIssuePage from "@pages/DescribeIssuePage";
 import CreateCasePage from "@pages/CreateCasePage";
@@ -98,6 +101,17 @@ export default function App(): JSX.Element {
                             element={<ConversationDetailsPage />}
                           />
                         </Route>
+                        <Route path="service-requests">
+                          <Route index element={<ServiceRequestsPage />} />
+                          <Route
+                            path="create"
+                            element={<CreateServiceRequestPage />}
+                          />
+                          <Route
+                            path=":serviceRequestId"
+                            element={<ServiceRequestDetailsPage />}
+                          />
+                        </Route>
                         <Route path="chat">
                           <Route index element={<NoveraChatPage />} />
                           <Route

apps/customer-portal/webapp/src/api/__tests__/useGetCaseAttachments.test.tsx

@@ -24,8 +24,24 @@ import {
 
 const mockAttachmentsPage1 = {
   attachments: [
-    { id: "a1", name: "file1.txt", type: "text/plain", size: 100, downloadUrl: "/a1", createdOn: "", createdBy: "" },
-    { id: "a2", name: "file2.txt", type: "text/plain", size: 200, downloadUrl: "/a2", createdOn: "", createdBy: "" },
+    {
+      id: "a1",
+      name: "file1.txt",
+      type: "text/plain",
+      size: 100,
+      downloadUrl: "/a1",
+      createdOn: "",
+      createdBy: "",
+    },
+    {
+      id: "a2",
+      name: "file2.txt",
+      type: "text/plain",
+      size: 200,
+      downloadUrl: "/a2",
+      createdOn: "",
+      createdBy: "",
+    },
   ],
   totalRecords: 12,
   offset: 0,
@@ -34,7 +50,15 @@ const mockAttachmentsPage1 = {
 
 const mockAttachmentsPage2 = {
   attachments: [
-    { id: "a3", name: "file3.txt", type: "text/plain", size: 300, downloadUrl: "/a3", createdOn: "", createdBy: "" },
+    {
+      id: "a3",
+      name: "file3.txt",
+      type: "text/plain",
+      size: 300,
+      downloadUrl: "/a3",
+      createdOn: "",
+      createdBy: "",
+    },
   ],
   totalRecords: 12,
   offset: 10,

apps/customer-portal/webapp/src/api/useGetCatalogItemVariables.ts

@@ -0,0 +1,72 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { useAsgardeo } from "@asgardeo/react";
+import { useAuthApiClient } from "@context/AuthApiContext";
+import { useLogger } from "@hooks/useLogger";
+import { ApiQueryKeys } from "@constants/apiConstants";
+import type { CatalogItemVariablesResponse } from "@models/responses";
+
+/**
+ * Fetches catalog item variables (GET /catalogs/:catalogId/items/:itemId).
+ *
+ * @param {string} catalogId - The catalog ID.
+ * @param {string} itemId - The catalog item ID.
+ * @returns {UseQueryResult<CatalogItemVariablesResponse, Error>} The query result.
+ */
+export function useGetCatalogItemVariables(
+  catalogId: string,
+  itemId: string,
+): UseQueryResult<CatalogItemVariablesResponse, Error> {
+  const logger = useLogger();
+  const { isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const fetchFn = useAuthApiClient();
+
+  return useQuery<CatalogItemVariablesResponse, Error>({
+    queryKey: [ApiQueryKeys.CATALOG_ITEM_VARIABLES, catalogId, itemId],
+    queryFn: async (): Promise<CatalogItemVariablesResponse> => {
+      logger.debug(
+        `Fetching catalog item variables for catalog ${catalogId}, item ${itemId}`,
+      );
+
+      const baseUrl = window.config?.CUSTOMER_PORTAL_BACKEND_BASE_URL;
+      if (!baseUrl) {
+        throw new Error("CUSTOMER_PORTAL_BACKEND_BASE_URL is not configured");
+      }
+
+      const requestUrl = `${baseUrl}/catalogs/${catalogId}/items/${itemId}`;
+
+      const response = await fetchFn(requestUrl, { method: "GET" });
+
+      if (!response.ok) {
+        const text = await response.text();
+        throw new Error(
+          `Error fetching catalog item variables: ${response.status} ${response.statusText}${text ? ` - ${text}` : ""}`,
+        );
+      }
+
+      const data: CatalogItemVariablesResponse = await response.json();
+      logger.debug(
+        `Catalog item variables fetched for catalog ${catalogId}, item ${itemId}`,
+        data,
+      );
+      return data;
+    },
+    enabled:
+      !!catalogId && !!itemId && isSignedIn && !isAuthLoading,
+    staleTime: 5 * 60 * 1000,
+  });
+}

apps/customer-portal/webapp/src/api/usePostCase.ts

@@ -18,32 +18,45 @@ import { useMutation, type UseMutationResult } from "@tanstack/react-query";
 import { useAsgardeo } from "@asgardeo/react";
 import { useLogger } from "@hooks/useLogger";
 import { useAuthApiClient } from "@context/AuthApiContext";
-import type { CreateCaseRequest } from "@models/requests";
+import type {
+  CreateCaseRequest,
+  CreateServiceRequestPayload,
+} from "@models/requests";
 import type { CreateCaseResponse } from "@models/responses";
 
 /**
- * Posts a new support case to the backend.
+ * Posts a new support case or service request to the backend.
  *
- * @returns {UseMutationResult<CreateCaseResponse, Error, CreateCaseRequest>} Mutation result.
+ * @returns {UseMutationResult<CreateCaseResponse, Error, CreateCaseRequest | CreateServiceRequestPayload>} Mutation result.
  */
 export function usePostCase(): UseMutationResult<
   CreateCaseResponse,
   Error,
-  CreateCaseRequest
+  CreateCaseRequest | CreateServiceRequestPayload
 > {
   const logger = useLogger();
   const { isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
   const fetchFn = useAuthApiClient();
 
-  return useMutation<CreateCaseResponse, Error, CreateCaseRequest>({
+  return useMutation<
+    CreateCaseResponse,
+    Error,
+    CreateCaseRequest | CreateServiceRequestPayload
+  >({
     mutationFn: async (
-      body: CreateCaseRequest,
+      body: CreateCaseRequest | CreateServiceRequestPayload,
     ): Promise<CreateCaseResponse> => {
-      logger.debug("[usePostCase] Request payload:", {
-        ...body,
-        description: body.description
-          ? `${body.description.slice(0, 80)}...`
-          : "",
+      logger.debug("[usePostCase] Request payload summary:", {
+        requestType: "type" in body ? body.type : "case",
+        projectId: body.projectId,
+        deploymentId: body.deploymentId,
+        deployedProductId: body.deployedProductId,
+        descriptionPreview:
+          "description" in body && body.description
+            ? `${body.description.slice(0, 80)}...`
+            : undefined,
+        variableCount: "variables" in body ? body.variables.length : undefined,
+        attachmentCount: body.attachments?.length ?? 0,
       });
 
       try {

apps/customer-portal/webapp/src/api/useSearchCatalogs.ts

@@ -0,0 +1,73 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { useAsgardeo } from "@asgardeo/react";
+import { useAuthApiClient } from "@context/AuthApiContext";
+import { useLogger } from "@hooks/useLogger";
+import { ApiQueryKeys } from "@constants/apiConstants";
+import type { CatalogSearchResponse } from "@models/responses";
+
+/**
+ * Searches catalogs for a deployed product (POST /deployments/products/:deployedProductId/catalogs/search).
+ *
+ * @param {string} deployedProductId - The deployed product ID.
+ * @returns {UseQueryResult<CatalogSearchResponse, Error>} The query result.
+ */
+export function useSearchCatalogs(
+  deployedProductId: string,
+): UseQueryResult<CatalogSearchResponse, Error> {
+  const logger = useLogger();
+  const { isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const fetchFn = useAuthApiClient();
+
+  return useQuery<CatalogSearchResponse, Error>({
+    queryKey: [ApiQueryKeys.CATALOGS_SEARCH, deployedProductId],
+    queryFn: async (): Promise<CatalogSearchResponse> => {
+      logger.debug(
+        `Searching catalogs for deployed product ID: ${deployedProductId}`,
+      );
+
+      const baseUrl = window.config?.CUSTOMER_PORTAL_BACKEND_BASE_URL;
+      if (!baseUrl) {
+        throw new Error("CUSTOMER_PORTAL_BACKEND_BASE_URL is not configured");
+      }
+
+      const requestUrl = `${baseUrl}/deployments/products/${deployedProductId}/catalogs/search`;
+
+      const response = await fetchFn(requestUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({}),
+      });
+
+      if (!response.ok) {
+        const text = await response.text();
+        throw new Error(
+          `Error searching catalogs: ${response.status} ${response.statusText}${text ? ` - ${text}` : ""}`,
+        );
+      }
+
+      const data: CatalogSearchResponse = await response.json();
+      logger.debug(
+        `Catalogs fetched for deployed product ID: ${deployedProductId}`,
+        data,
+      );
+      return data;
+    },
+    enabled: !!deployedProductId && isSignedIn && !isAuthLoading,
+    staleTime: 5 * 60 * 1000,
+  });
+}

apps/customer-portal/webapp/src/components/common/header/GetHelpDropdown.tsx

@@ -79,9 +79,7 @@ export default function GetHelpDropdown(): JSX.Element {
   const handleServiceRequest = () => {
     handleClose();
     if (projectId) {
-      navigate(`/${projectId}/support/chat/create-case?type=service_request`, {
-        state: { skipChat: true },
-      });
+      navigate(`/${projectId}/support/service-requests/create`);
     }
   };
 

apps/customer-portal/webapp/src/components/support/request-cards/RequestCard.tsx

@@ -21,6 +21,7 @@ import {
   Paper,
   Typography,
   alpha,
+  colors,
   useTheme,
 } from "@wso2/oxygen-ui";
 import { ArrowRight } from "@wso2/oxygen-ui-icons-react";
@@ -37,8 +38,12 @@ export interface RequestCardProps {
   infoBoxTitle: string;
   infoBoxDescription: string;
   bulletItems: readonly string[];
-  secondaryButtonLabel: string;
-  onSecondaryClick: () => void;
+  secondaryButtonLabel?: string;
+  onSecondaryClick?: () => void;
+  footerButtons?: Array<{
+    label: string;
+    onClick?: () => void;
+  }>;
   primaryButton?: {
     label: string;
     onClick: () => void;
@@ -64,6 +69,7 @@ export default function RequestCard({
   bulletItems,
   secondaryButtonLabel,
   onSecondaryClick,
+  footerButtons,
   primaryButton,
 }: RequestCardProps): JSX.Element {
   const theme = useTheme();
@@ -179,20 +185,46 @@ export default function RequestCard({
             {primaryButton.label}
           </Button>
         )}
-        <Button
-          fullWidth
-          variant="outlined"
-          color="inherit"
-          endIcon={<ArrowRight size={16} />}
-          onClick={onSecondaryClick}
-          sx={{
-            textTransform: "none",
-            borderColor: "divider",
-            color: "text.primary",
-          }}
-        >
-          {secondaryButtonLabel}
-        </Button>
+        {footerButtons && footerButtons.length > 0 ? (
+          <Box sx={{ display: "flex", gap: 1 }}>
+            {footerButtons.map((btn, index) => (
+              <Button
+                key={index}
+                fullWidth
+                variant="text"
+                color="info"
+                onClick={btn.onClick}
+                endIcon={<ArrowRight size={16} />}
+                sx={{
+                  flex: 1,
+                  justifyContent: "flex-start",
+                  textTransform: "none",
+                  fontWeight: 500,
+                  color: colors.blue[600],
+                }}
+              >
+                {btn.label}
+              </Button>
+            ))}
+          </Box>
+        ) : (
+          secondaryButtonLabel &&
+          onSecondaryClick && (
+            <Button
+              fullWidth
+              variant="outlined"
+              color="inherit"
+              endIcon={<ArrowRight size={16} />}
+              onClick={onSecondaryClick}
+              sx={{
+                textTransform: "none",
+                color: "text.primary",
+              }}
+            >
+              {secondaryButtonLabel}
+            </Button>
+          )
+        )}
       </Box>
     </Paper>
   );