Subscription Description content

lowcoder-org · FalkWolsky · Nov 19, 2024 · Sep 21, 2024 · Sep 21, 2024 · Sep 28, 2024
commit 12c6654c79b54e30f5f21968421707baf4d4a173
diff --git a/client/packages/lowcoder/src/api/subscriptionApi.ts b/client/packages/lowcoder/src/api/subscriptionApi.ts
@@ -302,6 +302,7 @@ export const InitializeSubscription = () => {
   const [subscriptionDataError, setSubscriptionDataError] = useState<boolean>(false);
   const [checkoutLinkDataLoaded, setCheckoutLinkDataLoaded] = useState<boolean>(false);
   const [checkoutLinkDataError, setCheckoutLinkDataError] = useState<boolean>(false);
+
   const [products, setProducts] = useState<Product[]>([
     {
       pricingType: "Monthly, per User",

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
@@ -3,10 +3,8 @@ import {
   ALL_APPLICATIONS_URL,
   DATASOURCE_URL,
   FOLDER_URL,
-  FOLDER_URL_PREFIX,
   FOLDERS_URL,
   MARKETPLACE_URL,
-  // MODULE_APPLICATIONS_URL,
   QUERY_LIBRARY_URL,
   SETTING_URL,
   SUPPORT_URL,
@@ -296,7 +294,7 @@ export default function ApplicationHome() {
             ],
           } : { items: [] },
 
-          /* supportSubscription ? {
+          supportSubscription ? {
             items: [
               {
                 text: <TabLabel>{trans("home.support")}</TabLabel>,
@@ -306,7 +304,7 @@ export default function ApplicationHome() {
                 icon: ({ selected, ...otherProps }) => selected ? <SupportIcon {...otherProps} width={"24px"}/> : <SupportIcon {...otherProps} width={"24px"}/>,
               },
             ],
-          } : { items: [] }, */
+          } : { items: [] },
 
           {
             items: [

diff --git a/client/packages/lowcoder/src/pages/setting/settingHome.tsx b/client/packages/lowcoder/src/pages/setting/settingHome.tsx
@@ -129,6 +129,11 @@ export function SettingHome() {
         !currentOrgAdmin(user) ||
         !enableCustomBrand(config) ||
         (!isSelfDomain(config) && !isEnterpriseMode(config)),
+    },
+    { 
+      key: SettingPageEnum.Subscription,
+      label: trans("settings.subscription"),
+      icon: <SubscriptionIcon width={"20px"}/>, 
     }
   ];
 

diff --git a/client/packages/lowcoder/src/pages/setting/subscriptions/ProductDescriptions.tsx b/client/packages/lowcoder/src/pages/setting/subscriptions/ProductDescriptions.tsx
@@ -0,0 +1,142 @@
+const ProductDescriptions: ProductDescription = {
+
+// Support & Ticket System Subscription
+
+SupportProduct : {
+"en" : `
+  # Lowcoder Support Subscription
+
+  ## Overview
+
+  **Support** is a "per Workspace" (Organization) subscription. This means that all Admins and Editing Users (Developers) within the Workspace, but not "Members" (viewers only), can automatically use this subscription and create their own support tickets. Typically, a Workspace Admin activates the Support Subscription.
+
+  The subscription is **calculated monthly** based on the number of Admins & Editing Users. Normal App Viewers are **not charged** and cannot access the Support Center.
+
+  ## Support Center
+
+  The **Support Center** provides an overview of all your support tickets, including the current status of each ticket and the assigned Lowcoder support staff. Each ticket has a detailed page where you can:
+  - View and edit the full ticket description
+  - Add attachments
+  - Leave comments
+
+  ## Commitment to Your Success
+
+  We offer a support system because we are **dedicated to the success** of Lowcoder users! It’s a key value for us, and we will always strive to provide the best support possible.
+
+  ## Support SLA
+
+  We keep our **Service Level Agreement (SLA)** simple:
+  - We aim to **respond within 1 business day**.
+  - Our business hours are from **8am to 10pm GMT**.
+
+  ## Support Levels
+
+  1. **First Level Support**: Our initial response aims to resolve your questions quickly.
+  2. **Second Level Support**: If a deeper technical issue arises, we escalate it to Second Level Support. This is reflected in the ticket's status.
+
+  ## Bug Fixing Policy
+
+  For bug fixes, we aim to resolve issues **within a workweek or faster**. We provide a \`/dev\` or \`/latest\` tagged Docker image for self-hosted installations to quickly apply updates. The actual update process is not in our hands.
+
+  For users on \`app.lowcoder.cloud\`, updates are typically done during regular releases, which occur every **two months**. Only in exceptional cases do we apply updates outside of these scheduled releases.
+
+  ## Platform Focus
+
+  We do not develop custom apps for companies, as our primary focus is improving the Lowcoder platform. However, through our support system, we welcome all **questions and suggestions** that help Lowcoder users create their own apps.
+
+  ## Pricing Table
+
+  | User Type            | Monthly Price Per User |
+  |----------------------|------------------------|
+  | Admin & Editor        | €2.90                  |
+  | More than 10 Users    | €1.90                  |
+  | More than 100 Users   | €0.90                  |
+  | More than 500 Users   | €0.49                  |
+  | More than 1,000 Users | €0.29                  |
+  | More than 10,000 Users| €0.19                  |
+      `,
+
+"de": `
+  # Lowcoder Support-Abonnement
+
+  ## Übersicht
+
+  **Support** ist ein "pro Workspace" (Organisation) Abonnement. Das bedeutet, dass alle Administratoren und Bearbeiter (Entwickler) innerhalb des Workspaces, aber nicht "Mitglieder" (nur Zuschauer), automatisch dieses Abonnement nutzen und ihre eigenen Support-Tickets erstellen können. Typischerweise aktiviert ein Workspace-Administrator das Support-Abonnement.
+
+  Das Abonnement wird **monatlich** basierend auf der Anzahl der Administratoren und Bearbeiter berechnet. Normale App-Zuschauer **werden nicht berechnet** und können auf das Support-Center nicht zugreifen.
+
+  ## Support-Center
+
+  Das **Support-Center** bietet einen Überblick über alle Ihre Support-Tickets, einschließlich des aktuellen Status jedes Tickets und des zugewiesenen Lowcoder-Supportmitarbeiters. Jedes Ticket hat eine Detailseite, auf der Sie:
+  - die vollständige Ticketbeschreibung anzeigen und bearbeiten können
+  - Anhänge hinzufügen
+  - Kommentare hinterlassen
+
+  ## Engagement für Ihren Erfolg
+
+  Wir bieten ein Support-System an, weil wir **engagiert für den Erfolg** der Lowcoder-Nutzer sind! Es ist ein zentraler Wert für uns, und wir werden immer versuchen, den bestmöglichen Support zu bieten.
+
+  ## Support-SLA
+
+  Wir halten unser **Service Level Agreement (SLA)** einfach:
+  - Wir versuchen, **innerhalb eines Geschäftstags zu antworten**.
+  - Unsere Geschäftszeiten sind von **8 Uhr bis 22 Uhr GMT**.
+
+  ## Support-Levels
+
+  1. **Erster Level-Support**: Unser erster Kontakt versucht, Ihre Fragen schnell zu klären.
+  2. **Zweiter Level-Support**: Wenn ein tiefergehendes technisches Problem auftritt, eskalieren wir es zum Zweiten Level-Support. Dies spiegelt sich im Status des Tickets wider.
+
+  ## Fehlerbehebungspolitik
+
+  Bei Fehlerbehebungen versuchen wir, Probleme **innerhalb einer Arbeitswoche oder schneller** zu lösen. Wir bieten ein \`/dev\` oder \`/latest\` getaggtes Docker-Image für selbst gehostete Installationen an, um Updates schnell anzuwenden. Der tatsächliche Update-Prozess liegt nicht in unserer Hand.
+
+  Für Benutzer auf \`app.lowcoder.cloud\` werden Updates in der Regel während regulärer Releases durchgeführt, die alle **zwei Monate** stattfinden. Nur in außergewöhnlichen Fällen wenden wir Updates außerhalb dieser geplanten Releases an.
+
+  ## Plattformfokus
+
+  Wir entwickeln keine benutzerdefinierten Apps für Unternehmen, da unser Hauptfokus auf der Verbesserung der Lowcoder-Plattform liegt. Durch unser Support-System heißen wir jedoch alle **Fragen und Vorschläge** willkommen, die Lowcoder-Nutzern helfen, ihre eigenen Apps zu erstellen.
+
+  ## Preistabelle
+
+  | Benutzerart            | Monatlicher Preis pro Benutzer |
+  |------------------------|--------------------------------|
+  | Administrator & Bearbeiter | €2.90                         |
+  | Mehr als 10 Benutzer    | €1.90                          |
+  | Mehr als 100 Benutzer   | €0.90                          |
+  | Mehr als 500 Benutzer   | €0.49                          |
+  | Mehr als 1.000 Benutzer | €0.29                          |
+  | Mehr als 10.000 Benutzer| €0.19                          |
+      `
+},
+
+    // Media Package Subscription
+
+MediaPackageProduct: {
+"en": `
+  # Media Package Subscription
+
+  ## Overview
+
+  ... (Add English description)
+      `,
+"de": `
+  # Medienpaket-Abonnement
+
+  ## Übersicht
+
+  ... (Add German description)
+      `
+}
+  };
+
+  export type Translations = {
+    [key: string]: string; // Each language key maps to a string
+  };
+
+  export type ProductDescription = {
+    [productId: string]: Translations; // Each product ID maps to its translations
+  };
+
+  export default ProductDescriptions;
+
diff --git a/client/packages/lowcoder/src/pages/setting/subscriptions/subscriptionInfo.tsx b/client/packages/lowcoder/src/pages/setting/subscriptions/subscriptionInfo.tsx
@@ -1,25 +1,36 @@
 import { ArrowIcon } from "lowcoder-design";
 import styled from "styled-components";
-import { trans } from "i18n";
+import { trans } from "i18n"; // Assuming this is how you get the user's language
 import { useParams } from "react-router-dom";
 import { HeaderBack } from "../permission/styledComponents";
 import history from "util/history";
 import { SUBSCRIPTION_SETTING } from "constants/routesURL";
-import { getProduct }  from '@lowcoder-ee/api/subscriptionApi';
+import { getProduct } from '@lowcoder-ee/api/subscriptionApi';
 import { useState, useEffect } from 'react';
-import { Card, Tag, List, Button } from 'antd';
+import { Card, Tag, List } from 'antd';
 import { CheckCircleOutlined } from '@ant-design/icons';
-import { Level1SettingPageContent, Level1SettingPageTitle } from "../styled";
+import { Level1SettingPageContent } from "../styled";
+import { TacoMarkDown } from "lowcoder-design";
+import ProductDescriptions, {Translations, ProductDescription} from "./ProductDescriptions";
 
 const { Meta } = Card;
 
 const Wrapper = styled.div`
   padding: 32px 24px;
 `;
 
-export function SubscriptionInfo() {
+const ContentWrapper = styled.div`
+  display: flex;
+  gap: 24px;
+`;
 
-  const { productId } = useParams<{ productId: string }>();
+const FullWidthCard = styled(Card)`
+  flex-grow: 1;
+  width: 65%;
+`;
+
+// Hook for loading product details
+const useProduct = (productId: string) => {
   const [product, setProduct] = useState<any>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
@@ -42,25 +53,55 @@ export function SubscriptionInfo() {
     }
   }, [productId]);
 
+  return { product, loading, error };
+};
+
+// Hook for loading markdown content
+const useMarkdown = (productId: string | null, userLanguage: string) => {
+  const [markdownContent, setMarkdownContent] = useState<string>("");
+
+  useEffect(() => {
+    if (productId && userLanguage) {
+
+      let descriptionContent : Translations | false;
+
+      switch (productId) {
+        case "QW8L3WPMiNjQjI": 
+          descriptionContent = ProductDescriptions["SupportProduct"];
+          break;
+        case "QW8MpIBHxieKXd": 
+          descriptionContent = ProductDescriptions["MediaPackageProduct"];
+          break;
+        default:
+          descriptionContent = false;
+          break;
+      }
+
+      if (descriptionContent) {
+        setMarkdownContent(descriptionContent[userLanguage] || descriptionContent.en);
+      } else {
+        setMarkdownContent("");
+      }
+    }
+  }, [productId, userLanguage]);
+
+  return markdownContent;
+};
+
+export function SubscriptionInfo() {
+  const { productId } = useParams<{ productId: string }>();
+  const userLanguage = localStorage.getItem('lowcoder_uiLanguage');
+  const { product, loading, error } = useProduct(productId);
+  const markdownContent = useMarkdown(productId || null, userLanguage || "en");
+
   if (loading) {
-    return <div>Loading...</div>;
+    return <div style={{margin: "40px"}}>Loading...</div>;
   }
 
   if (error) {
     return <div>{error}</div>;
   }
 
-  const pricingTable = productId == "QW8L3WPMiNjQjI" && [
-    { type: "Admin & Editor", amount: "€2.90 per user, per month" },
-    { type: "> 10 Users", amount: "€1.90 per user, per month" },
-    { type: "> 100 Users", amount: "€0.90 per user, per month" },
-    { type: "> 500 Users", amount: "€0.49 per user, per month" },
-    { type: "> 1.000 Users", amount: "€0.29 per user, per month" },
-    { type: "> 10.000 Users", amount: "€0.19 per user, per month" },
-  ] || productId == "QW8MpIBHxieKXd" && [
-    { type: "User", amount: "$29.00 per month" }
-  ] || [];
-
   return (
     <Wrapper>
       <HeaderBack>
@@ -69,47 +110,41 @@ export function SubscriptionInfo() {
         <span>{product.name}</span>
       </HeaderBack>
       <Level1SettingPageContent>
-        <Card
-          hoverable
-          style={{ width: 400 }}
-          cover={<img alt={product.name} src={product.images[0]} />}
-          actions={[]}
-        >
-          <Meta
-            title={product.name}
-            description={product.description}
-          />
-          <div style={{ marginTop: 16 }}>
-            <Tag icon={<CheckCircleOutlined />} color="green">
-              {product.type.toUpperCase()}
-            </Tag>
-            {product.active && (
-              <Tag icon={<CheckCircleOutlined />} color="blue">
-                Active
-              </Tag>
-            )}
-            <List
-              size="small"
-              header={<h3>What you get:</h3>}
-              bordered
-              dataSource={product.marketing_features}
-              renderItem={(item: { name: string }) => <List.Item>{item.name}</List.Item>}
-              style={{ marginTop: 16 }}
+        <ContentWrapper>
+          <Card
+            hoverable
+            style={{ minWidth: "350px", width: "35%" }}
+            cover={<img alt={product.name} src={product.images[0]} />}
+            actions={[]}
+          >
+            <Meta
+              title={product.name}
+              description={product.description}
             />
-            <List
-              size="small"
-              header={<h3>Pricing:</h3>}
-              bordered
-              dataSource={pricingTable}
-              renderItem={(item: { type: string, amount: string }) => (
-                <List.Item>
-                  <strong>{item.type}:</strong> {item.amount}
-                </List.Item>
+            <div style={{ marginTop: 16 }}>
+              <Tag icon={<CheckCircleOutlined />} color="green">
+                {product.type.toUpperCase()}
+              </Tag>
+              {product.active && (
+                <Tag icon={<CheckCircleOutlined />} color="blue">
+                  Active
+                </Tag>
               )}
-              style={{ marginTop: 16 }}
-            />
-          </div>
-        </Card>
+              <List
+                size="small"
+                header={<h3>What you get:</h3>}
+                bordered
+                dataSource={product.marketing_features}
+                renderItem={(item: { name: string }) => <List.Item>{item.name}</List.Item>}
+                style={{ marginTop: 16 }}
+              />
+            </div>
+          </Card>
+
+          <FullWidthCard title="Product Documentation">
+            <TacoMarkDown>{markdownContent}</TacoMarkDown>
+          </FullWidthCard>
+        </ContentWrapper>
       </Level1SettingPageContent>
     </Wrapper>
   );