refactor: price

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.3.30",
+  "version": "0.3.31",
   "private": true,
   "homepage": "https://voce.chat",
   "dependencies": {

src/app/config.ts

@@ -1,29 +1,35 @@
 // const BASE_URL = `${location.origin}/api`;
+
+import { Price } from "../types/common";
+
 // const BASE_URL = `http://localhost:3333/api`;
 const BASE_URL = process.env.REACT_APP_RELEASE
   ? `${location.origin}/api`
   : `https://dev.voce.chat/api`;
-let prices = [
+
+let prices: Price[] = [
   {
-    mode: "subscription",
+    type: "subscription",
-    sub_type: "year", //day month year
+    // sub_type: "year", //day month year
     title: "VoceChat Pro",
     limit: 100,
-    pid: "price_1MMMWAGGoUDRyc3jIsMay5Rs",
+    pid: "price_1MN8C7GGoUDRyc3jos06bCqM",
     desc: "User Limit: 100"
   },
   {
+    type: "payment",
     title: "VoceChat Supreme",
     limit: 99999,
     pid: "price_1M5VoGGGoUDRyc3j6xhQou6D",
     desc: "User Limit: No Limit"
   }
 ];
-export const LicensePriceList =
+export const LicensePriceList: Price[] =
   process.env.NODE_ENV === "development"
     ? [
       ...prices,
       {
+        type: "payment",
         title: "VoceChat Enterprise",
         limit: 99999,
         pid: "price_1LkQGpGGoUDRyc3jGTh3GYHw",
@@ -34,8 +40,8 @@ export const LicensePriceList =
         limit: 100,
         pid: "price_1MMNNCGGoUDRyc3jSIGIsb3C",
         desc: "test subscription price",
-        mode: "subscription",
+        type: "subscription",
-        sub_type: "year", //day month year
+        sub_dur: "year", //day month year
       },
     ]
     : prices;

src/common/component/styled/Textarea.tsx

@@ -2,6 +2,6 @@ import { TextareaHTMLAttributes } from "react";
 
 type Props = TextareaHTMLAttributes<HTMLTextAreaElement>
 const StyledTextarea = ({ className, ...rest }: Props) => {
-  return <textarea className={`rounded text-sm p-2 bg-white text-gray-700 resize-none w-full shadow border border-solid disabled:bg-[#f9fafb] disabled:text-gray-400 disabled:pointer-events-none placeholder:text-gray-400 ${className}`} {...rest}></textarea>;
+  return <textarea className={`rounded text-sm p-2 bg-white text-gray-700 resize-none w-full shadow border border-solid border-gray-200 disabled:bg-[#f9fafb] disabled:text-gray-400 disabled:pointer-events-none placeholder:text-gray-400 ${className}`} {...rest}></textarea>;
 };
 export default StyledTextarea;

src/routes/setting/License/LicensePriceListModal.tsx

@@ -9,19 +9,19 @@ import { useGetLicensePaymentUrlMutation } from "../../../app/services/server";
 import { LicensePriceList } from "../../../app/config";
 import { useTranslation } from "react-i18next";
 import dayjs from "dayjs";
+import { PriceSubscriptionDuration, PriceType } from "../../../types/common";
 // import { LicenseMetadata, RenewLicense } from "../../types/server";
 
 interface Props {
   closeModal: () => void;
   // domain: string;
 }
-type Mode = "subscription" | "payment";
+
-type SubType = "month" | "quarter" | "year";
+const getExpireDay = (sub_dur: PriceSubscriptionDuration) => {
-const getExpireDay = (sub_type: SubType) => {
   const currDate = dayjs();
   // 默认10年
   let res = currDate;
-  switch (sub_type) {
+  switch (sub_dur) {
     case "year":
       res = currDate.add(1, "year");
       break;
@@ -31,7 +31,6 @@ const getExpireDay = (sub_type: SubType) => {
     case "quarter":
       res = currDate.add(3, "month");
       break;
-
     default:
       break;
   };
@@ -42,16 +41,16 @@ const LicensePriceListModal: FC<Props> = ({ closeModal }) => {
   const { t: ct } = useTranslation();
   const [getUrl, { isLoading, isSuccess }] = useGetLicensePaymentUrlMutation();
   const [selectPrice, setSelectPrice] = useState(
-    `${LicensePriceList[0].pid}|${LicensePriceList[0].limit}|${LicensePriceList[0].mode || "payment"}|${LicensePriceList[0].sub_type || ""}`
+    `${LicensePriceList[0].pid}|${LicensePriceList[0].limit}|${LicensePriceList[0].type}|${LicensePriceList[0].sub_dur || ""}`
   );
   const handleRenew = async () => {
-    const [priceId, user_limit, mode, sub_type = "month"] = selectPrice.split("|") as [string, string, Mode, SubType];
+    const [priceId, user_limit, type, sub_dur = "month"] = selectPrice.split("|") as [string, string, PriceType, PriceSubscriptionDuration];
     const resp = await getUrl({
-      mode: mode,
+      type,
       priceId,
       metadata: {
         user_limit: Number(user_limit),
-        expire: mode == "subscription" ? getExpireDay(sub_type) : "2035-01-01",
+        expire: type == "subscription" ? getExpireDay(sub_dur) : getExpireDay("year"),
         // 本地，则*通配符
         domain: location.hostname.startsWith("localhost") ? "*" : location.hostname
       },
@@ -87,7 +86,7 @@ const LicensePriceListModal: FC<Props> = ({ closeModal }) => {
       >
         <StyledRadio
           options={LicensePriceList.map(({ title, desc }) => `${title} [${desc}]`)}
-          values={LicensePriceList.map(({ pid, limit, mode = "payment", sub_type = "month" }) => `${pid}|${limit}|${mode}|${sub_type}`)}
+          values={LicensePriceList.map(({ pid, limit, type = "payment", sub_dur = "month" }) => `${pid}|${limit}|${type}|${sub_dur}`)}
           value={selectPrice}
           onChange={(v) => {
             console.log("wtff", v);

src/types/common.ts

@@ -1,3 +1,13 @@
 export interface EntityId {
   id: number;
 }
+export type PriceType = "subscription" | "payment";
+export type PriceSubscriptionDuration = "month" | "quarter" | "year";
+export type Price = {
+  title: string,
+  limit: number,
+  pid: string,
+  desc: string,
+  type: PriceType,
+  sub_dur?: PriceSubscriptionDuration
+}

src/types/server.ts

@@ -1,4 +1,5 @@
 // call `organization` in backend
+import { PriceType } from "./common";
 import { User } from "./user";
 
 export interface Server {
@@ -74,7 +75,7 @@ export interface LicenseMetadata {
   domain: string | string[];
 }
 export interface RenewLicense {
-  mode: "payment" | "subscription",
+  type: PriceType,
   priceId: string;
   metadata: LicenseMetadata;
   cancel_url: string;