Subscription System Roundup

Author: FalkWolsky

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

@@ -2300,7 +2300,7 @@ export const en = {
     "billingReason.subscription_threshold": "Subscription Threshold",
     "billingReason.subscription_update": "Subscription Update",
     "backToSubscriptions": "Back to Subscriptions",
-    "manageSubscription" : "Manage Your Subscription",
+    "manageSubscription" : "Manage Your Subscriptions",
     "subscriptionHelp" : "Subscription Help",
     "subscriptionHelpDescription" : "If you have any questions, please contact us. We are happy to help you. service@lowcoder.cloud",
     "success" : "Payment & Subscription Success",

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

@@ -177,7 +177,7 @@ export default function ApplicationHome() {
     dispatch(fetchHomeData({}));
   }, [user.currentOrgId]);
 
-  const supportSubscription = subscriptions.some(sub => sub.product === SubscriptionProducts.SUPPORT);
+  const supportSubscription = subscriptions.some(sub => sub.product === SubscriptionProducts.SUPPORT && sub.status === 'active');
 
   useEffect(() => {
     if (!org) {

client/packages/lowcoder/src/pages/setting/subscriptions/ProductDescriptions.tsx

@@ -1,12 +1,12 @@
+import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import styled from "styled-components";
 import { GreyTextColor } from "constants/style";
 import { trans } from "i18n";
 import { HeaderBack } from "../permission/styledComponents";
 import history from "util/history";
 import { SUBSCRIPTION_SETTING } from "constants/routesURL";
-import { Flex } from 'antd';
-import { ProductCard } from "./productCard";
+
 
 const SubscriptionSuccessContent = styled.div`
   max-width: 840px;
@@ -41,6 +41,10 @@ const useQuery = () => {
 export function SubscriptionCancel() {
   const query = useQuery();
   const session_id = query.get("session_id");
+
+  useEffect(() => {
+    window.location.replace(SUBSCRIPTION_SETTING);
+  }, []);
 
   return (
     <Wrapper>
@@ -50,7 +54,7 @@ export function SubscriptionCancel() {
         </span>
       </HeaderBack>
       <div>
-        <h1>{`Canceled | Session ID: ${session_id}`}</h1>
+        <h1>Canceled</h1>
       </div>
     </Wrapper>
   );

client/packages/lowcoder/src/pages/setting/subscriptions/subscriptionCancel.tsx

@@ -6,8 +6,8 @@ import { useParams } from "react-router-dom";
 import { HeaderBack } from "../permission/styledComponents";
 import history from "util/history";
 import { SUBSCRIPTION_SETTING } from "constants/routesURL";
-import { getProduct, getSubscriptionDetails, getInvoices, getCustomerPortalSession } from "api/subscriptionApi";
-import { Skeleton, Timeline, Card, Descriptions, Table, Typography, Button, message } from "antd";
+import { getProduct, getSubscriptionDetails, getInvoices } from "api/subscriptionApi";
+import { Skeleton, Timeline, Card, Descriptions, Table, Typography, Button } from "antd";
 
 const { Text } = Typography;
 
@@ -78,29 +78,6 @@ export function SubscriptionDetail() {
   const usageRecords = subscription ? subscription[1]?.data || [] : [];
 
   const statusColor = subscriptionDetails?.status === "active" ? "green" : "red";
-  const customerId = subscriptionDetails?.customer; // Get the customer ID from subscription details
-
-  // Handle Customer Portal Session Redirect
-  const handleCustomerPortalRedirect = async () => {
-    try {
-      if (!customerId) {
-        message.error("Customer ID not available for the subscription.");
-        return;
-      }
-
-      // Get the Customer Portal session URL
-      const portalSession = await getCustomerPortalSession(customerId);
-      if (portalSession && portalSession.url) {
-        // Redirect to the Stripe Customer Portal
-        window.location.href = portalSession.url;
-      } else {
-        message.error("Failed to generate customer portal session link.");
-      }
-    } catch (error) {
-      console.error("Error redirecting to customer portal:", error);
-      message.error("An error occurred while redirecting to the customer portal.");
-    }
-  };
 
   return (
     <Wrapper>
@@ -215,14 +192,6 @@ export function SubscriptionDetail() {
         </TimelineWrapper>
       </CardWrapper>
 
-      {/* Manage Subscription Button */}
-      <CardWrapper title={trans("subscription.manageSubscription")}>
-        <ManageSubscriptionButton type="primary" onClick={handleCustomerPortalRedirect}>
-          {trans("subscription.manageSubscription")}
-        </ManageSubscriptionButton>
-      </CardWrapper>
-
-      {/* Manage Subscription Button */}
       <CardWrapper title={trans("subscription.subscriptionHelp")}>
         <span>{trans("subscription.subscriptionHelpDescription")}</span>
       </CardWrapper>

client/packages/lowcoder/src/pages/setting/subscriptions/subscriptionDetail.tsx

@@ -11,7 +11,7 @@ import { Card, Tag, List } from 'antd';
 import { CheckCircleOutlined } from '@ant-design/icons';
 import { Level1SettingPageContent } from "../styled";
 import { TacoMarkDown } from "lowcoder-design";
-import ProductDescriptions, {Translations, ProductDescription} from "./ProductDescriptions";
+import ProductDescriptions, {Translations} from "./ProductDescriptions";
 
 const { Meta } = Card;
 

client/packages/lowcoder/src/pages/setting/subscriptions/subscriptionInfo.tsx

@@ -2,10 +2,10 @@ import styled from "styled-components";
 import { GreyTextColor } from "constants/style";
 import { trans } from "i18n";
 import { Level1SettingPageContent, Level1SettingPageTitle } from "../styled";
-import { Flex } from 'antd';
+import { Flex, Card, Button, message } from 'antd';
 import { ProductCard } from "./productCard";
 import { InitializeSubscription } from "@lowcoder-ee/api/subscriptionApi";
-import { getProducts }  from '@lowcoder-ee/api/subscriptionApi';
+import { getProducts, getCustomerPortalSession }  from '@lowcoder-ee/api/subscriptionApi';
 import { useState, useEffect } from 'react';
 
 const SubscriptionSettingContent = styled.div`
@@ -27,6 +27,15 @@ const SubscriptionSettingContent = styled.div`
   }
 `;
 
+const CardWrapper = styled(Card)`
+  width: 100%;
+  margin-bottom: 24px;
+`;
+
+const ManageSubscriptionButton = styled(Button)`
+  margin-top: 24px;
+`;
+
 
 export function SubscriptionSetting() {
   const {
@@ -42,6 +51,30 @@ export function SubscriptionSetting() {
   const [subscriptionProducts, setSubscriptionProducts] = useState<any>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
+  const customerId = customer?.id; // Get the customer ID from subscription details
+
+
+    // Handle Customer Portal Session Redirect
+    const handleCustomerPortalRedirect = async () => {
+      try {
+        if (!customerId) {
+          message.error("Customer ID not available for the subscription.");
+          return;
+        }
+  
+        // Get the Customer Portal session URL
+        const portalSession = await getCustomerPortalSession(customerId);
+        if (portalSession && portalSession.url) {
+          // Redirect to the Stripe Customer Portal
+          window.open(portalSession.url, '_blank', 'noopener,noreferrer');
+        } else {
+          message.error("Failed to generate customer portal session link.");
+        }
+      } catch (error) {
+        console.error("Error redirecting to customer portal:", error);
+        message.error("An error occurred while redirecting to the customer portal.");
+      }
+    };
 
   useEffect(() => {
     const fetchProducts = async () => {
@@ -68,7 +101,7 @@ export function SubscriptionSetting() {
       {customer != null ? (
         <SubscriptionSettingContent>
           {customer && <h3>Your Customer Number: {customer?.id.substring(4)} {admin && "| you are Subscriptions-Admin of this Workspace"}</h3>}
-          <Flex wrap='wrap' gap="large" style={{marginTop: "40px"}}>
+          <Flex wrap='wrap' gap="large" style={{marginTop: "40px", width : "100%"}}>
             {products
             .filter((product) => {
               if (product.type === "org") { 
@@ -96,6 +129,12 @@ export function SubscriptionSetting() {
               );
             } )}
           </Flex>
+          {/* Manage Subscription Button */}
+        <CardWrapper title={trans("subscription.manageSubscription")}>
+          <ManageSubscriptionButton type="primary" onClick={handleCustomerPortalRedirect}>
+            {trans("subscription.manageSubscription")}
+          </ManageSubscriptionButton>
+        </CardWrapper>
         </SubscriptionSettingContent>
       ) : (
         <div>Loading...</div>

client/packages/lowcoder/src/pages/setting/subscriptions/subscriptionSetting.tsx

@@ -337,7 +337,7 @@ export function SupportOverview() {
                         }>
                         <Avatar src={assignee.avatar} alt={assignee.email} />
                       </Tooltip>
-                      <StatusDot active={assignee.active} />
+                      <StatusDot active={assignee.active.toString()} />
                     </SubColumnCell>
                   ),
                 },