Adding Success Page

FalkWolsky · FalkWolsky · commit 5eeeb0f6d3d9 · 2024-10-09T14:17:05.000+02:00
diff --git a/client/packages/lowcoder/src/constants/routesURL.ts b/client/packages/lowcoder/src/constants/routesURL.ts
@@ -25,7 +25,7 @@ export const OAUTH_PROVIDER_DETAIL = "/setting/oauth-provider/detail";
 export const PERMISSION_SETTING_DETAIL = `${PERMISSION_SETTING}/:groupId`;
 export const ORGANIZATION_SETTING_DETAIL = `${ORGANIZATION_SETTING}/:orgId`;
 
-export const SUBSCRIPTION_SUCCESS = `${SUBSCRIPTION_SETTING}/success/:session_id`;
+export const SUBSCRIPTION_SUCCESS = `${SUBSCRIPTION_SETTING}/success`;
 export const SUBSCRIPTION_CANCEL = `${SUBSCRIPTION_SETTING}/cancel`;
 export const SUBSCRIPTION_ERROR = `${SUBSCRIPTION_SETTING}/error`;
 export const SUBSCRIPTION_DETAIL = `${SUBSCRIPTION_SETTING}/details/:subscriptionId/:productId`;
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2302,6 +2302,10 @@ export const en = {
     "manageSubscription" : "Manage Your Subscription",
     "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",
+    "successTitle" : "Thank you for your trust in Lowcoder!",
+    "successThankYou" : "Your trust and decision to partner with us mean the world to our entire team. We want you to know that we are fully committed to delivering exceptional service, unparalleled support, and continuous value every step of the way. At Lowcoder, our customers are at the heart of everything we do. We are passionate about helping you achieve your goals, and we take pride in being more than just a platform. Whether it's providing quick solutions, building innovative features, or simply being there when you need us, we are dedicated to making your experience outstanding. Thank you for inspiring us to strive for excellence every day. We love what we do, and we couldn’t do it without incredible customers like you. Welcome aboard, and let’s create something extraordinary together!",
+    "successLowcoderTeam" : "The Lowcoder Team",
   },
   "subscriptionError": {
     "fetchProductDetails": "Error fetching product details.",
diff --git a/client/packages/lowcoder/src/pages/setting/subscriptions/subscriptionSuccess.tsx b/client/packages/lowcoder/src/pages/setting/subscriptions/subscriptionSuccess.tsx
@@ -5,8 +5,10 @@ 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";
+import { Flex, Typography, Card } from 'antd';
+import { ArrowIcon } from "lowcoder-design";
+
+const { Title, Paragraph } = Typography;
 
 const SubscriptionSuccessContent = styled.div`
   max-width: 840px;
@@ -25,13 +27,26 @@ const SubscriptionSuccessContent = styled.div`
     color: ${GreyTextColor};
     margin-bottom: 14px;
     font-size: 13px;
-  }
+  } 
 `;
 
 const Wrapper = styled.div`
   padding: 32px 24px;
 `;
 
+const SuccessCard = styled(Card)`
+  max-width: 100%;
+  margin-top: 40px;
+  text-align: left;
+`;
+
+const ImageWrapper = styled.div`
+  margin: 40px 0;
+  img {
+    width: 100%;
+    height: auto;
+  }
+`;
 
 // Helper function to get query params
 const useQuery = () => {
@@ -48,10 +63,23 @@ export function SubscriptionSuccess() {
         <span onClick={() => history.push(SUBSCRIPTION_SETTING)}>
           {trans("settings.subscription")}
         </span>
+        <ArrowIcon />
+        <span>{trans("subscription.success")}</span>
       </HeaderBack>
-      <div>
-        <h1>{`SUCCESS | Session ID: ${session_id}`}</h1>
-      </div>
+      {/* Success Content */}
+      <SuccessCard bordered>
+        <SubscriptionSuccessContent>
+          <Title level={2}>{trans("subscription.successTitle")}</Title>
+          <Paragraph>{trans("subscription.successThankYou")}</Paragraph>
+          
+          {/* Success Image */}
+          <ImageWrapper>
+            <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Lowcoder%20Team.jpg" alt={trans("subscription.successImageAlt")} />
+          </ImageWrapper>
+
+          <Paragraph>{trans("subscription.successLowcoderTeam")}</Paragraph>
+        </SubscriptionSuccessContent>
+      </SuccessCard>
     </Wrapper>
   );
 }
