feat: i18n

2022-11-23 19:38:45 +08:00
parent 9b3dc2f740
commit 48ffdcc1b5
97 changed files with 1470 additions and 652 deletions
@@ -0,0 +1,73 @@
+import { useState, HTMLAttributes } from "react";
+import dayjs from "dayjs";
+import Button from "../../../common/component/styled/Button";
+import useLicense from "../../../common/hook/useLicense";
+import LicensePriceListModal from "./LicensePriceListModal";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+
+interface ItemProps extends HTMLAttributes<HTMLSpanElement> { label: string, data?: string | number | string[], foldable?: boolean }
+const Item = ({ label, data, foldable = false, ...rest }: ItemProps) => {
+  const infoClass = clsx("font-bold w-full cursor-pointer", foldable ? " overflow-hidden text-ellipsis" : "whitespace-pre-wrap break-all");
+  if (!data) return null;
+  return <div className="whitespace-nowrap  flex flex-col items-start justify-start text-lg">
+    <span className="text-sm text-gray-400">{label}</span>
+    {Array.isArray(data) ? <ul className={infoClass}>
+      {data.map((d) => {
+        return <li key={d}>{d}</li>;
+      })}
+    </ul> : <span className={infoClass} {...rest}>
+      {data}
+    </span>}
+  </div>;
+
+};
+export default function License() {
+  const { t } = useTranslation("setting");
+  const { license: licenseInfo, reachLimit } = useLicense();
+  const [modalVisible, setModalVisible] = useState(false);
+  const [base58Fold, setBase58Fold] = useState(true);
+  const handleRenewLicense = () => {
+    toggleModalVisible();
+  };
+  const toggleModalVisible = () => {
+    setModalVisible((prev) => !prev);
+  };
+  const handleLicenseValueToggle = () => {
+    setBase58Fold(pre => !pre);
+  };
+  return (
+    <>
+      <div className="max-w-3xl flex flex-col justify-start items-start gap-4">
+        <div className={clsx('relative w-full p-3 rounded border-solid border flex flex-col gap-4 shadow', reachLimit ? "border-red-600 bg-red-200/50" : "border-green-600 bg-green-200/50")}>
+          <Item label={t("license.signed")} data={licenseInfo?.sign ? "Yes" : "Not Yet"} />
+          <Item label={t("license.domain")} data={licenseInfo?.domains} />
+          <Item label={t("license.user_limit")} data={licenseInfo?.user_limit == 99999 ? "No Limit" : licenseInfo?.user_limit} />
+          <Item label={t("license.expire")} data={dayjs(licenseInfo?.expired_at).format("YYYY-MM-DD h:mm:ss A")} />
+          <Item label={t("license.create")} data={dayjs(licenseInfo?.created_at).format("YYYY-MM-DD h:mm:ss A")} />
+          <Item label={t("license.value")} data={licenseInfo?.base58} foldable={base58Fold} title={base58Fold ? "Click to see full text" : "Click to fold text"}
+            onClick={handleLicenseValueToggle} />
+        </div>
+        <Button onClick={handleRenewLicense}>{t("license.renew")}</Button>
+        <div className="flex flex-col gap-4 bg-primary-500 text-white rounded drop-shadow-xl p-5">
+          <h2 className="text-2xl font-bold">{t("license.tip.title")} 🎁</h2>
+          <p className="text-base flex flex-col"><span>
+            {t("license.tip.user_test")}
+          </span>
+            <span>
+              {t("license.tip.booking")} <a className="underline text-lg text-green-200" href="https://calendly.com/hansu/han-meeting" target="_blank" rel="noopener noreferrer">https://calendly.com/hansu/han-meeting</a>
+            </span>
+            <span>
+              {t("license.tip.wechat")}<em className="text-lg text-green-200">yanggc_2013</em>
+            </span>
+          </p>
+        </div>
+      </div>
+      {modalVisible && (
+        <LicensePriceListModal
+          closeModal={toggleModalVisible}
+        />
+      )}
+    </>
+  );
+}
@@ -0,0 +1,78 @@
+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 { useTranslation } from "react-i18next";
+// import { LicenseMetadata, RenewLicense } from "../../types/server";
+
+interface Props {
+  closeModal: () => void;
+  // domain: string;
+}
+
+const LicensePriceListModal: FC<Props> = ({ closeModal }) => {
+  const { t } = useTranslation(["setting", "common"]);
+  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={t("license.renew") || ""}
+        description={t("license.renew_select") || ""}
+        buttons={
+          <>
+            <Button onClick={closeModal} className="ghost">
+              {t("action.cancel", { ns: "common" })}
+            </Button>
+            <Button disabled={isLoading || isSuccess} onClick={handleRenew} className="danger">
+              {isLoading ? "Initialize Payment Url" : isSuccess ? "Redirecting" : t("license.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;