feat: license payment

src/routes/callback/PaymentSuccess.tsx

@@ -0,0 +1,71 @@
+import { useEffect } from "react";
+import styled from "styled-components";
+import { useLazyGetGeneratedLicenseQuery } from "../../app/services/server";
+import useLicense from "../../common/hook/useLicense";
+import Button from "../../common/component/styled/Button";
+import checkIcon from "../../assets/icons/check.png";
+import { useNavigate } from "react-router-dom";
+const Styled = styled.section`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px;
+  width: 512px;
+  background: #f3f4f6;
+  border-radius: 20px;
+  .check {
+    width: 120px;
+    height: 120px;
+  }
+  .head {
+    font-weight: bold;
+    font-size: 32px;
+    padding-top: 20px;
+  }
+  .desc {
+    font-size: 18px;
+    color: #999;
+    padding: 0 0 30px 0;
+  }
+`;
+
+type Props = {
+  sid: string;
+};
+
+const PaymentSuccess = ({ sid }: Props) => {
+  const navigateTo = useNavigate();
+  const { upsertLicense, upserting, upserted } = useLicense();
+  const [getGeneratedLicense, { data, isError, isLoading, isSuccess }] =
+    useLazyGetGeneratedLicenseQuery();
+  useEffect(() => {
+    if (sid) {
+      getGeneratedLicense(sid);
+    }
+  }, [sid]);
+  useEffect(() => {
+    if (isSuccess && data) {
+      const l = data.license;
+      upsertLicense(l);
+    }
+  }, [data, isSuccess]);
+  const handleBack = () => {
+    navigateTo("/");
+  };
+  return (
+    <Styled>
+      <img className="check" src={checkIcon} alt="check icon" />
+      <h1 className="head">Payment Success!</h1>
+      <p className="desc">
+        {upserting ? "Renewing the License, do not close the window!" : ""}
+        {upserted ? "Renew the License Successfully!" : ""}
+        {isError ? "Invalided Stripe Session ID" : ""}
+      </p>
+      <Button disabled={isLoading || upserting} className="back" onClick={handleBack}>
+        Back Home
+      </Button>
+    </Styled>
+  );
+};
+
+export default PaymentSuccess;

src/routes/callback/index.tsx

@@ -0,0 +1,18 @@
+import { useParams } from "react-router-dom";
+import PaymentSuccess from "./PaymentSuccess";
+import StyledWrapper from "./styled";
+// type Props = {
+//   type: "payment_success";
+// };
+// 该页面服务于一些第三方服务的回调，比如stripe付款成功的回调
+export default function CallbackPage() {
+  const { type = "", payload = "" } = useParams();
+  if (type == "payment_success") {
+    return (
+      <StyledWrapper>
+        <PaymentSuccess sid={payload} />
+      </StyledWrapper>
+    );
+  }
+  return <StyledWrapper>callback page</StyledWrapper>;
+}

src/routes/callback/styled.tsx

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+const StyledWrapper = styled.div`
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+  word-break: break-word;
+  line-height: 1.5;
+`;
+
+export default StyledWrapper;