Adapting Payload for Ticket System

Author: FalkWolsky

client/packages/lowcoder/src/api/supportApi.ts

@@ -118,11 +118,15 @@ class SupportApi extends Api {
 
 // API Functions
 
-export const searchCustomerTickets = async (orgID : string, currentUserId : string, domain : string) => {
+export const searchCustomerTickets = async (
+  deploymentId : string,
+  orgID : string,
+  currentUserId : string
+) => {
 
   const apiBody = {
     path: "webhook/support/get-issues",
-    data: {"host" : domain, "orgId" : orgID, "userId" : currentUserId},
+    data: {"hostId" : deploymentId, "orgId" : orgID, "userId" : currentUserId},
     method: "post",
     headers: lcHeaders
   };
@@ -159,11 +163,20 @@ export const getTicket = async (ticketKey : string) => {
   }
 };
 
-export const createTicket = async (orgID : string, currentUserId : string, subscriptionId : string, domain : string, summary: string, description : string, errors : string) => {
+export const createTicket = async (
+  domain: string,
+  deploymentId : string,
+  orgID : string, 
+  orgName : string,
+  currentUserId : string, 
+  subscriptionId : string, 
+  summary: string, 
+  description : string, 
+  errors : string) => {
 
   const apiBody = {
     path: "webhook/support/create-ticket",
-    data: {"host" : domain, "orgId" : orgID, "userId" : currentUserId, "subscriptionId": subscriptionId, "summary" : summary, "description" : description, "errors" : errors},
+    data: {"domain" : domain, "hostId" : deploymentId, "orgId" : orgID, "orgName" : orgName, "userId" : currentUserId, "subscriptionId": subscriptionId, "summary" : summary, "description" : description, "errors" : errors},
     method: "post",
     headers: lcHeaders
   };

client/packages/lowcoder/src/pages/ApplicationV2/index.tsx

@@ -67,11 +67,9 @@ import { Support } from "pages/support";
 import { isEE } from "util/envUtils";
 import { getSubscriptions } from 'redux/selectors/subscriptionSelectors';
 import { SubscriptionProductsEnum } from '@lowcoder-ee/constants/subscriptionConstants';
-import { ReduxActionTypes } from '@lowcoder-ee/constants/reduxActionConstants';
 
 // adding App Editor, so we can show Apps inside the Admin Area
 import AppEditor from "../editor/AppEditor";
-import { set } from "lodash";
 import { fetchDeploymentIdAction } from "@lowcoder-ee/redux/reduxActions/configActions";
 import { getDeploymentId } from "@lowcoder-ee/redux/selectors/configSelectors";
 import { SimpleSubscriptionContextProvider } from '@lowcoder-ee/util/context/SimpleSubscriptionContext';

client/packages/lowcoder/src/pages/support/supportOverview.tsx

@@ -15,7 +15,10 @@ import ReactQuill from "react-quill";
 import 'react-quill/dist/quill.snow.css';
 import { Spin } from "antd";
 import LoadingOutlined from "@ant-design/icons/LoadingOutlined";
-
+import { useSimpleSubscriptionContext } from "@lowcoder-ee/util/context/SimpleSubscriptionContext";
+import { SubscriptionProductsEnum } from '@lowcoder-ee/constants/subscriptionConstants';
+import { getDeploymentId } from "@lowcoder-ee/redux/selectors/configSelectors";
+import { useSelector } from "react-redux";
 
 const SupportWrapper = styled.div`
   display: flex;
@@ -129,7 +132,7 @@ const handleEditClick = (ticketId: string) => {
 };
 
 export function SupportOverview() {
-  const { orgID, currentUser, domain } = useUserDetails();
+  const { orgID, orgName, currentUser, domain } = useUserDetails();
   const [supportTickets, setSupportTickets] = useState<any>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
@@ -141,6 +144,12 @@ export function SupportOverview() {
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   const [isReloadDisabled, setIsReloadDisabled] = useState<boolean>(false); // State to disable/enable reload button
   const [lastReloadTime, setLastReloadTime] = useState<number | null>(null);
+  const { subscriptions } = useSimpleSubscriptionContext();
+  const deploymentId = useSelector(getDeploymentId);
+
+  const SupportSubscription = subscriptions.filter(
+    sub => sub.product === SubscriptionProductsEnum.SUPPORT && sub.status === 'active'
+  );
 
   // Capture global errors using window.onerror
   useEffect(() => {
@@ -162,7 +171,7 @@ export function SupportOverview() {
   const fetchSupportTickets = async () => {
     setLoading(true); // Set loading to true while fetching data
     try {
-      const ticketData = await searchCustomerTickets(orgID, currentUser.id, domain);
+      const ticketData = await searchCustomerTickets(deploymentId, orgID, currentUser.id);
       setSupportTickets(ticketData);
     } catch (err) {
       setError("Failed to fetch support tickets.");
@@ -210,7 +219,7 @@ export function SupportOverview() {
 
     setIsSubmitting(true); 
     try {
-      const result = await createTicket(orgID, currentUser.id, 'subscription-id', domain, summary, description, capturedErrors.join("\n"));
+      const result = await createTicket(domain, deploymentId, orgID, orgName, currentUser.id, SupportSubscription[0]?.id, summary, description, capturedErrors.join("\n"));
       if (result) {
         showCreateForm(false);
         setSummary("");

client/packages/lowcoder/src/pages/support/useUserDetails.tsx

@@ -6,11 +6,13 @@ export const useUserDetails = () => {
   const user = useSelector(getUser);
   const currentUser = useSelector(getCurrentUser);
   const orgID = user.currentOrgId;
+  const orgName = user.orgs.find(org => org.id === orgID)?.name || "";
   const domain = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ":" + window.location.port : "");
   const subscriptions = useSelector(getSubscriptions);
 
   return {
     orgID,
+    orgName,
     currentUser,
     domain,
     subscriptions