Updating Routes to display success and cancel for Subscription Creation

FalkWolsky · FalkWolsky · commit 21cff58c67a1 · 2024-10-05T16:36:26.000+02:00
diff --git a/client/packages/lowcoder/src/constants/routesURL.ts b/client/packages/lowcoder/src/constants/routesURL.ts
@@ -24,7 +24,9 @@ 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`;
+
+export const SUBSCRIPTION_SUCCESS = `${SUBSCRIPTION_SETTING}/success/:session_id`;
+export const SUBSCRIPTION_CANCEL = `${SUBSCRIPTION_SETTING}/cancel`;
 export const SUBSCRIPTION_ERROR = `${SUBSCRIPTION_SETTING}/error`;
 export const SUBSCRIPTION_DETAIL = `${SUBSCRIPTION_SETTING}/details/:subscriptionId/:productId`;
 export const SUBSCRIPTION_INFO = `${SUBSCRIPTION_SETTING}/info/:productId`;
diff --git a/client/packages/lowcoder/src/pages/setting/subscriptions/index.tsx b/client/packages/lowcoder/src/pages/setting/subscriptions/index.tsx
@@ -1,8 +1,9 @@
 // index.tsx for routes
 import { Route, Switch } from 'react-router-dom';
-import { SUBSCRIPTION_SETTING, SUBSCRIPTION_DETAIL, SUBSCRIPTION_INFO, SUBSCRIPTION_SUCCESS, SUBSCRIPTION_ERROR } from 'constants/routesURL';
+import { SUBSCRIPTION_SETTING, SUBSCRIPTION_DETAIL, SUBSCRIPTION_INFO, SUBSCRIPTION_SUCCESS, SUBSCRIPTION_CANCEL, SUBSCRIPTION_ERROR } from 'constants/routesURL';
 import { SubscriptionSetting } from './subscriptionSetting';
 import SubscriptionSuccess from './subscriptionSuccess';
+import SubscriptionCancel from './subscriptionCancel';
 import SubscriptionError from './subscriptionError';
 import SubscriptionDetail from './subscriptionDetail';
 import SubscriptionInfo from './subscriptionInfo';
@@ -14,6 +15,7 @@ export const Subscription = () => {
       <Route path={SUBSCRIPTION_DETAIL} component={SubscriptionDetail} exact />
       <Route path={SUBSCRIPTION_INFO} component={SubscriptionInfo} exact />
       <Route path={SUBSCRIPTION_SUCCESS} component={SubscriptionSuccess} exact />
+      <Route path={SUBSCRIPTION_CANCEL} component={SubscriptionCancel} exact />
       <Route path={SUBSCRIPTION_ERROR} component={SubscriptionError} exact />
       <Route path={SUBSCRIPTION_SETTING} component={SubscriptionSetting} exact />
     </Switch>
diff --git a/client/packages/lowcoder/src/pages/setting/subscriptions/subscriptionCancel.tsx b/client/packages/lowcoder/src/pages/setting/subscriptions/subscriptionCancel.tsx
@@ -0,0 +1,59 @@
+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;
+
+  .section-title {
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+
+  .section-content {
+    margin-bottom: 28px;
+  }
+
+  .section-option {
+    color: ${GreyTextColor};
+    margin-bottom: 14px;
+    font-size: 13px;
+  }
+`;
+
+const Wrapper = styled.div`
+  padding: 32px 24px;
+`;
+
+
+// Helper function to get query params
+const useQuery = () => {
+  return new URLSearchParams(useLocation().search);
+};
+
+export function SubscriptionCancel() {
+  const query = useQuery();
+  const session_id = query.get("session_id");
+  
+  return (
+    <Wrapper>
+      <HeaderBack>
+        <span onClick={() => history.push(SUBSCRIPTION_SETTING)}>
+          {trans("settings.subscription")}
+        </span>
+      </HeaderBack>
+      <div>
+        <h1>{`Canceled | Session ID: ${session_id}`}</h1>
+      </div>
+    </Wrapper>
+  );
+}
+
+export default SubscriptionCancel;
diff --git a/client/packages/lowcoder/src/pages/setting/subscriptions/subscriptionSuccess.tsx b/client/packages/lowcoder/src/pages/setting/subscriptions/subscriptionSuccess.tsx
@@ -12,7 +12,7 @@ const SubscriptionSuccessContent = styled.div`
   max-width: 840px;
 
   .section-title {
-    font-size: 14px;
+    font-size: 14px;  
     font-weight: 500;
     margin-bottom: 8px;
   }

Original file line number	Diff line number	Diff line change
@@ -12,7 +12,7 @@ const SubscriptionSuccessContent = styled.div`
`12`	`12`	`max-width: 840px;`
`13`	`13`
`14`	`14`	`.section-title {`
`15`		`- font-size: 14px;`
	`15`	`+ font-size: 14px;`
`16`	`16`	`font-weight: 500;`
`17`	`17`	`margin-bottom: 8px;`
`18`	`18`	`}`