Introducing Subscription Overview and Support Handling

Author: FalkWolsky

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

@@ -70,11 +70,11 @@ export interface Pricing {
 }
 
 export interface Product {
-  title: string;
-  description: string;
-  image: string;
+  title?: string;
+  description?: string;
+  image?: string;
   pricingType: string;
-  pricing: Pricing[];
+  product: string;
   activeSubscription: boolean;
   accessLink: string;
   subscriptionId: string;
@@ -235,6 +235,38 @@ export const createCustomer = async (subscriptionCustomer: LowcoderNewCustomer)
   }
 };
 
+export const getProduct = async (productId : string) => {
+  const apiBody = {
+    path: "webhook/secure/get-product",
+    method: "post",
+    data: {"productId" : productId},
+    headers: lcHeaders
+  };
+  try {
+    const result = await SubscriptionApi.secureRequest(apiBody);
+    return result?.data as any;
+  } catch (error) {
+    console.error("Error fetching product:", error);
+    throw error;
+  }
+};
+
+export const getProducts = async () => {
+  const apiBody = {
+    path: "webhook/secure/get-products",
+    method: "post",
+    data: {},
+    headers: lcHeaders
+  };
+  try {
+    const result = await SubscriptionApi.secureRequest(apiBody);
+    return result?.data as any;
+  } catch (error) {
+    console.error("Error fetching product:", error);
+    throw error;
+  }
+};
+
 export const createCheckoutLink = async (customer: StripeCustomer, priceId: string, quantity: number, discount?: number) => {
   const domain = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
 
@@ -272,40 +304,38 @@ export const InitializeSubscription = () => {
   const [checkoutLinkDataError, setCheckoutLinkDataError] = useState<boolean>(false);
   const [products, setProducts] = useState<Product[]>([
     {
-      title: "Support Subscription",
-      description: "Support Ticket System and SLAs to guarantee response time and your project success.",
-      image: "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png",
       pricingType: "Monthly, per User",
-      pricing: [
-        { type: "User", amount: "$3.49 (user, month)" },
-        { type: "> 10 Users", amount: "$2.49 (user, month)" },
-        { type: "> 100 Users", amount: "$1.49 (user, month)" }
-      ],
       activeSubscription: false,
       accessLink: "1PhH38DDlQgecLSfSukEgIeV",
+      product: "QW8L3WPMiNjQjI",
       subscriptionId: "",
       checkoutLink: "",
       checkoutLinkDataLoaded: false,
       type: "org",
       quantity_entity: "orgUser",
     },
     {
-      title: "Premium Media Subscription",
-      description: "Access to all features.",
-      image: "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png",
       pricingType: "Monthly, per User",
-      pricing: [
-        { type: "Volume Price", amount: "$20/month" },
-        { type: "Single Price", amount: "$25/month" }
-      ],
       activeSubscription: false,
       accessLink: "1Pf65wDDlQgecLSf6OFlbsD5",
+      product: "QW8MpIBHxieKXd",
       checkoutLink: "",
       checkoutLinkDataLoaded: false,
       subscriptionId: "",
       type: "user",
       quantity_entity: "singleItem",
-    }
+    },
+    {
+      pricingType: "Monthly, per User",
+      activeSubscription: false,
+      accessLink: "1PttHIDDlQgecLSf0XP27tXt",
+      product: "QlQ7cdOh8Lv4dy",
+      subscriptionId: "",
+      checkoutLink: "",
+      checkoutLinkDataLoaded: false,
+      type: "org",
+      quantity_entity: "singleItem",
+    },
   ]);
 
   const user = useSelector(getUser);
@@ -328,7 +358,7 @@ export const InitializeSubscription = () => {
     orgId: orgID,
     userId: user.id,
     userName: user.username,
-    type: admin ? "admin" : "user",
+    type: admin,
     companyName: currentOrg?.name || "Unknown",
   };
 
@@ -418,12 +448,13 @@ export const InitializeSubscription = () => {
     checkoutLinkDataLoaded,
     checkoutLinkDataError,
     products,
+    admin,
   };
 };
 
 export enum SubscriptionProducts {
   SUPPORT = "QW8L3WPMiNjQjI",
-  MEDIAPACKAGE = 'standard',
+  MEDIAPACKAGE = 'QW8MpIBHxieKXd',
   AZUREAPIS = 'premium',
   GOOGLEAPIS = 'enterprise',
   AWSAPIS = 'enterprise-global',

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

@@ -0,0 +1,121 @@
+import Api from "api/api";
+import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
+import { useSelector } from "react-redux";
+import { getUser, getCurrentUser } from "redux/selectors/usersSelectors";
+import { useEffect, useState } from "react";
+import { calculateFlowCode }  from "./apiUtils";
+
+export type ResponseType = {
+  response: any;
+};
+
+export interface Ticket {
+  key: string;
+  id: string;
+  created: string; // ISO date string
+  priority: {
+    name: string;
+    number: string;
+  };
+  assignee: {
+    email: string;
+    avatar: string;
+    active: boolean;
+    timeZone: string;
+  };
+  status: {
+    name: string;
+  };
+  updated: string; // ISO date string
+  title: string;
+  description: string;
+  lowcoder_userId: string;
+  lowcoder_orgId: string;
+  lowcoder_host: string;
+  lowcoder_subscription: string;
+}
+
+export type TicketList = Ticket[];
+
+// Axios Configuration
+const lcHeaders = {
+  "Lowcoder-Token": calculateFlowCode(),
+  "Content-Type": "application/json"
+};
+
+let axiosIns: AxiosInstance | null = null;
+
+const getAxiosInstance = (clientSecret?: string) => {
+  if (axiosIns && !clientSecret) {
+    return axiosIns;
+  }
+
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+
+  const apiRequestConfig: AxiosRequestConfig = {
+    baseURL: "http://localhost:8080/api/flow",
+    headers,
+  };
+
+  axiosIns = axios.create(apiRequestConfig);
+  return axiosIns;
+};
+
+class SupportApi extends Api {
+
+  static async secureRequest(body: any): Promise<any> {
+    let response;
+    try {
+      response = await getAxiosInstance().request({
+        method: "POST",
+        withCredentials: true,
+        data: body,
+      });
+    } catch (error) {
+      console.error("Error at Support Flow Request:", error);
+    }
+    return response;
+  }
+
+}
+
+// API Functions
+
+export const searchCustomerTickets = async (orgID : string, currentUserId : string, domain : string) => {
+
+  const apiBody = {
+    path: "webhook/support/get-issues",
+    data: {host : domain, orgId : orgID, userId : currentUserId, supportsubscriptionId : "1PostVDDlQgecLSfhG52o5rB"},
+    method: "post",
+    headers: lcHeaders
+  };
+  try {
+    const result = await SupportApi.secureRequest(apiBody);
+    return result.data as TicketList;
+  } catch (error) {
+    console.error("Error searching customer:", error);
+    throw error;
+  }
+};
+
+export const getTicket = async (orgID : string, currentUserId : string, domain : string) => {
+
+  const apiBody = {
+    path: "webhook/support/get-issues",
+    data: {host : domain, orgId : orgID, userId : currentUserId, supportsubscriptionId : "1PostVDDlQgecLSfhG52o5rB"},
+    method: "post",
+    headers: lcHeaders
+  };
+  try {
+    const result = await SupportApi.secureRequest(apiBody);
+    return result?.data?.data?.length === 1 ? result.data.data as TicketList : null;
+  } catch (error) {
+    console.error("Error searching customer:", error);
+    throw error;
+  }
+};
+
+
+export default SupportApi;

client/packages/lowcoder/src/app.tsx

@@ -12,6 +12,7 @@ import {
   DATASOURCE_CREATE_URL,
   DATASOURCE_EDIT_URL,
   DATASOURCE_URL,
+  SUPPORT_URL,
   FOLDER_URL,
   FOLDERS_URL,
   IMPORT_APP_FROM_TEMPLATE_URL,
@@ -320,6 +321,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
                   DATASOURCE_CREATE_URL,
                   DATASOURCE_EDIT_URL,
                   DATASOURCE_URL,
+                  SUPPORT_URL,
                   QUERY_LIBRARY_URL,
                   FOLDERS_URL,
                   FOLDER_URL,

client/packages/lowcoder/src/constants/routesURL.ts

@@ -26,8 +26,9 @@ export const PERMISSION_SETTING_DETAIL = `${PERMISSION_SETTING}/:groupId`;
 export const ORGANIZATION_SETTING_DETAIL = `${ORGANIZATION_SETTING}/:orgId`;
 export const SUBSCRIPTION_SUCCESS = `${SUBSCRIPTION_SETTING}/success`;
 export const SUBSCRIPTION_ERROR = `${SUBSCRIPTION_SETTING}/error`;
-export const SUBSCRIPTION_DETAIL = `${SUBSCRIPTION_SETTING}/details/:subscriptionId`;
+export const SUBSCRIPTION_DETAIL = `${SUBSCRIPTION_SETTING}/details/:subscriptionId/:productId`;
 export const SUBSCRIPTION_INFO = `${SUBSCRIPTION_SETTING}/info/:productId`;
+export const SUPPORT_DETAIL = `${SUPPORT_URL}/details/:ticketId`;
 
 export const ALL_APPLICATIONS_URL = "/apps";
 export const ADMIN_APP_URL = "/ee/:applicationId/:viewMode";
@@ -106,5 +107,5 @@ export const buildGroupId = (groupId: string) => `${PERMISSION_SETTING}/${groupI
 
 export const buildOrgId = (orgId: string) => `${ORGANIZATION_SETTING}/${orgId}`;
 
-export const buildSubscriptionSettingsLink = (subscriptionId: string) => `${SUBSCRIPTION_SETTING}/details/${subscriptionId}`;
+export const buildSubscriptionSettingsLink = (subscriptionId: string, productId : string) => `${SUBSCRIPTION_SETTING}/details/${subscriptionId}/${productId}`;
 export const buildSubscriptionInfoLink = (productId: string) => `${SUBSCRIPTION_SETTING}/info/${productId}`;

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -3137,6 +3137,7 @@ export const en = {
     "support": "Support",
     "supportTitle": "Lowcoder Support",
     "supportContent": "If you have any questions or need help, please use the ticket system get your issue solved fast.",
+    "newSupportTicket": "New Support Ticket",
   },
   "carousel": {
     "dotPosition": "Navigation Dots position",

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

@@ -62,6 +62,7 @@ import { fetchFolderElements, updateFolder } from "../../redux/reduxActions/fold
 import { trans } from "../../i18n";
 import { foldersSelector } from "../../redux/selectors/folderSelector";
 import Setting from "pages/setting";
+import { Support } from "pages/support";
 // import { TypographyText } from "../../components/TypographyText";
 // import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { isEE } from "util/envUtils";
@@ -300,7 +301,7 @@ export default function ApplicationHome() {
               {
                 text: <TabLabel>{trans("home.support")}</TabLabel>,
                 routePath: SUPPORT_URL,
-                routeComp: TrashView,
+                routeComp: Support,
                 icon: ({ selected, ...otherProps }) => selected ? <SupportIcon {...otherProps} width={"24px"}/> : <SupportIcon {...otherProps} width={"24px"}/>,
               },
             ],