feat: license payment

src/routes/setting/License.tsx

@@ -1,34 +1,14 @@
-import { ChangeEvent, useState, useEffect } from "react";
+import { useState } from "react";
 import dayjs from "dayjs";
 import styled from "styled-components";
-import Tippy from "@tippyjs/react";
-import toast from "react-hot-toast";
-import { hideAll } from "tippy.js";
+// import Tippy from "@tippyjs/react";
+// import toast from "react-hot-toast";
+// import { hideAll } from "tippy.js";
 import Textarea from "../../common/component/styled/Textarea";
 import Button from "../../common/component/styled/Button";
 import useLicense from "../../common/hook/useLicense";
+import LicensePriceListModal from "./LicensePriceListModal";
 
-const StyledConfirm = styled.div`
-  padding: 12px;
-  border-radius: 10px;
-  border: 1px solid orange;
-  background-color: #fff;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  width: 250px;
-  .tip {
-    color: orange;
-    font-size: 12px;
-    line-height: 1.5;
-  }
-  .btns {
-    display: flex;
-    width: 100%;
-    justify-content: flex-end;
-    gap: 14px;
-  }
-`;
 const StyledInfo = styled.div`
   padding: 12px;
   border-radius: 5px;
@@ -58,111 +38,76 @@ const StyledInfo = styled.div`
   }
 `;
 const Styled = styled.div`
-  max-width: 500px;
+  max-width: 760px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 15px;
-  > .input {
+  > .license {
     width: 100%;
     display: flex;
-    flex-direction: column;
+    /* flex-direction: column; */
     align-items: flex-start;
-    gap: 8px;
+    gap: 15px;
   }
 `;
 
 export default function License() {
-  const { license: licenseInfo, checking, upserting, upsertLicense } = useLicense();
-  const [license, setLicense] = useState("");
-  const handleUpsert = async () => {
-    if (!license) {
-      toast.error("License Empty");
-      hideAll();
-      return;
-    }
-    const success = await upsertLicense(license);
-    if (!success) {
-      toast.error("Invalid License");
-      hideAll();
-    } else {
-      toast.success("License Updated!");
-    }
+  const { license: licenseInfo } = useLicense();
+  const [modalVisible, setModalVisible] = useState(false);
+  const handleRenewLicense = () => {
+    toggleModalVisible();
   };
-  const handleLicenseInput = (evt: ChangeEvent<HTMLTextAreaElement>) => {
-    setLicense(evt.target.value);
+  const toggleModalVisible = () => {
+    setModalVisible((prev) => !prev);
   };
-  useEffect(() => {
-    if (licenseInfo?.base58) {
-      setLicense(licenseInfo.base58);
-    }
-  }, [licenseInfo]);
 
-  const disableBtn = checking || upserting || !license || license === licenseInfo?.base58;
+  // const disableBtn = !reachLimit;
   return (
-    <Styled>
-      <div className="input">
-        <Tippy
-          placement="right-start"
-          visible={!!licenseInfo}
-          content={
-            <StyledInfo>
-              <div className="item">
-                <span className="label">Signed</span>
-                <span className="info">{licenseInfo?.sign ? "Yes" : "Not Yet"}</span>
-              </div>
-              <div className="item">
-                <span className="label">Domains</span>
-                <ul className="info">
-                  {" "}
-                  {licenseInfo?.domains.map((d) => {
-                    return <li key={d}>{d}</li>;
-                  })}
-                </ul>
-              </div>
-              <div className="item">
-                <span className="label">User Limit</span>
-                <span className="info"> {licenseInfo?.user_limit}</span>
-              </div>
-              <div className="item">
-                <span className="label">Expired At</span>
-                <span className="info">
-                  {dayjs(licenseInfo?.expired_at).format("YYYY-MM-DD h:mm:ss A")}
-                </span>
-              </div>
-              <div className="item">
-                <span className="label">Created At</span>
-                <span className="info">
-                  {dayjs(licenseInfo?.created_at).format("YYYY-MM-DD h:mm:ss A")}
-                </span>
-              </div>
-            </StyledInfo>
-          }
-        >
-          <Textarea rows={15} id="license" value={license} onChange={handleLicenseInput} />
-        </Tippy>
-      </div>
-      <Tippy
-        interactive
-        placement="bottom-start"
-        trigger="click"
-        content={
-          <StyledConfirm>
-            <div className="tip">Are you sure to update License?</div>
-            <div className="btns">
-              <Button onClick={() => hideAll()} className="cancel small">
-                Cancel
-              </Button>
-              <Button disabled={disableBtn} className="small danger" onClick={handleUpsert}>
-                Yes
-              </Button>
+    <>
+      <Styled>
+        <div className="license">
+          <Textarea disabled rows={14} id="license" value={licenseInfo?.base58} />
+          <StyledInfo>
+            <div className="item">
+              <span className="label">Signed</span>
+              <span className="info">{licenseInfo?.sign ? "Yes" : "Not Yet"}</span>
             </div>
-          </StyledConfirm>
-        }
-      >
-        <Button disabled={disableBtn}>Update License</Button>
-      </Tippy>
-    </Styled>
+            <div className="item">
+              <span className="label">Domains</span>
+              <ul className="info">
+                {licenseInfo?.domains.map((d) => {
+                  return <li key={d}>{d}</li>;
+                })}
+              </ul>
+            </div>
+            <div className="item">
+              <span className="label">User Limit</span>
+              <span className="info"> {licenseInfo?.user_limit}</span>
+            </div>
+            <div className="item">
+              <span className="label">Expired At</span>
+              <span className="info">
+                {dayjs(licenseInfo?.expired_at).format("YYYY-MM-DD h:mm:ss A")}
+              </span>
+            </div>
+            <div className="item">
+              <span className="label">Created At</span>
+              <span className="info">
+                {dayjs(licenseInfo?.created_at).format("YYYY-MM-DD h:mm:ss A")}
+              </span>
+            </div>
+          </StyledInfo>
+        </div>
+        <Button onClick={handleRenewLicense}>Renew License</Button>
+      </Styled>
+      {modalVisible && (
+        <LicensePriceListModal
+          closeModal={toggleModalVisible}
+          // domain={licenseInfo?.domains ? licenseInfo.domains.join("|") : ""}
+        />
+      )}
+    </>
   );
 }

src/routes/setting/LicensePriceListModal.tsx

@@ -0,0 +1,76 @@
+import { FC, useState } from "react";
+import toast from "react-hot-toast";
+import Modal from "../../common/component/Modal";
+import StyledModal from "../../common/component/styled/Modal";
+import Button from "../../common/component/styled/Button";
+import StyledRadio from "../../common/component/styled/Radio";
+
+import { useGetLicensePaymentUrlMutation } from "../../app/services/server";
+import { LicensePriceList } from "../../app/config";
+// import { LicenseMetadata, RenewLicense } from "../../types/server";
+
+interface Props {
+  closeModal: () => void;
+  // domain: string;
+}
+
+const LicensePriceListModal: FC<Props> = ({ closeModal }) => {
+  const [getUrl, { isLoading, isSuccess }] = useGetLicensePaymentUrlMutation();
+  const [selectPrice, setSelectPrice] = useState(
+    `${LicensePriceList[0].pid}|${LicensePriceList[0].limit}`
+  );
+  const handleRenew = async () => {
+    const [priceId, user_limit] = selectPrice.split("|");
+    const resp = await getUrl({
+      priceId,
+      metadata: {
+        user_limit: Number(user_limit),
+        expire: "2035-01-01",
+        // 本地，则*通配符
+        domain: location.hostname.startsWith("localhost") ? "*" : location.hostname
+      },
+      cancel_url: location.href,
+      success_url: `${location.origin}/#/cb/payment_success`
+    });
+    if ("error" in resp) {
+      toast.error("Payment link initialized failed!");
+      return;
+    }
+    console.log("aaaa", resp.data);
+    // todo
+    location.href = resp.data.session_url;
+  };
+  const handlePriceSelect = (price: string) => {
+    setSelectPrice(price);
+  };
+  return (
+    <Modal id="modal-modal">
+      <StyledModal
+        title="Renew License"
+        description="Please select the price"
+        buttons={
+          <>
+            <Button onClick={closeModal} className="ghost">
+              Cancel
+            </Button>
+            <Button disabled={isLoading || isSuccess} onClick={handleRenew} className="danger">
+              {isLoading ? "Initialize Payment Url" : isSuccess ? "Redirecting" : "Renew"}
+            </Button>
+          </>
+        }
+      >
+        <StyledRadio
+          options={LicensePriceList.map(({ title, desc }) => `${title} [${desc}]`)}
+          values={LicensePriceList.map(({ pid, limit }) => `${pid}|${limit}`)}
+          value={selectPrice}
+          onChange={(v) => {
+            console.log("wtff", v);
+            handlePriceSelect(v);
+          }}
+        />
+      </StyledModal>
+    </Modal>
+  );
+};
+
+export default LicensePriceListModal;

src/routes/setting/Overview.tsx

@@ -10,7 +10,6 @@ import SaveTip from "../../common/component/SaveTip";
 import StyledRadio from "../../common/component/styled/Radio";
 import { useAppSelector } from "../../app/store";
 import { LoginConfig, WhoCanSignUp } from "../../types/server";
-import Toggle from "../../common/component/styled/Toggle";
 import useConfig from "../../common/hook/useConfig";
 
 const StyledWrapper = styled.div`