feat: email msg tip

public/locales/en/common.json

@@ -50,6 +50,7 @@
     "install": "Install",
     "download_origin": "Download original",
     "close": "Close",
+    "upgrade": "Upgrade",
     "view_pwd": "View Password",
     "change_pwd": "Update Password"
   },
@@ -57,6 +58,7 @@
     "uploading": "Uploading"
   },
   "tip": {
+    "email_msg_tip": "Your region has blocked notifications, upgrade to Pro to use email notification.",
     "update": "Update Successfully!",
     "delete": "Delete Successfully!",
     "reg": "Register Successfully!",

public/locales/zh/common.json

@@ -50,6 +50,7 @@
     "install": "安装",
     "download_origin": "下载原图",
     "close": "关闭",
+    "upgrade": "升级",
     "view_pwd": "查看密码",
     "change_pwd": "修改密码"
   },
@@ -57,6 +58,7 @@
     "uploading": "上传中"
   },
   "tip": {
+    "email_msg_tip": "您的地区收不到消息提醒，升级到 Pro 版本可以使用邮件提醒功能",
     "update": "更新成功！",
     "delete": "删除成功！",
     "reg": "注册成功！",

src/app/config.ts

@@ -111,6 +111,7 @@ export const tokenHeader = "X-API-Key";
 export const KEY_SERVER_VERSION = "VC_SERVER_VERSION"; //
 export const FILE_SLICE_SIZE = 1000 * 1000; //
 export const FILE_IMAGE_SIZE = 1000 * 10000 * 8; //10mb
+export const KEY_SET_EMAIL_MSG_TIP = "SET_EMAIL_MSG_TIP";
 export const KEY_MOBILE_APP_TIP = "MOBILE_APP_TIP";
 export const KEY_LOGIN_USER = "VOCECHAT_LOGIN_USER";
 export const KEY_TOKEN = "VOCECHAT_TOKEN";

src/app/services/server.ts

@@ -33,6 +33,7 @@ import { updateCallInfo, upsertVoiceList } from "../slices/voice";
 import { RootState } from "../store";
 import baseQuery from "./base.query";
 import { GetFilesDTO, VoceChatFile } from "@/types/resource";
+import { IPData } from "@/types/common";
 
 export const serverApi = createApi({
   reducerPath: "serverApi",
@@ -64,6 +65,29 @@ export const serverApi = createApi({
         responseHandler: "text"
       })
     }),
+    getIfInChina: builder.query<boolean, void>({
+      query: () => ({
+        url: `http://ip-api.com/json/`
+      }),
+      transformResponse: (resp: IPData) => {
+        if (resp.status == "success") {
+          return resp.countryCode.toUpperCase() == "CN";
+        }
+        return false;
+      }
+      // async onQueryStarted(data, { dispatch, queryFulfilled }) {
+      //   try {
+      //     const {data:{status}} = await queryFulfilled;
+      //     if(status=="success"){
+
+      //     }
+      //     localStorage.setItem(KEY_SERVER_VERSION, resp.data);
+      //     dispatch(updateInfo({ version: resp.data }));
+      //   } catch {
+      //     console.error("get server version error");
+      //   }
+      // }
+    }),
     getServerVersion: builder.query<string, void>({
       query: () => ({
         headers: {
@@ -484,5 +508,6 @@ export const {
   useLazyGetAgoraUsersByChannelQuery,
   useLazyClearAllFilesQuery,
   useLazyClearAllMessagesQuery,
-  useLazyGetFilesQuery
+  useLazyGetFilesQuery,
+  useGetIfInChinaQuery
 } = serverApi;

src/components/SetEmailMsgTip.tsx

@@ -0,0 +1,62 @@
+import { FC, useEffect } from "react";
+import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+
+// import { KEY_SET_EMAIL_MSG_TIP } from "@/app/config";
+import Button from "./styled/Button";
+import { useGetIfInChinaQuery } from "@/app/services/server";
+import { useAppSelector } from "@/app/store";
+
+interface ContainerProps {
+  id: string;
+}
+const Container = (props: ContainerProps) => {
+  const { id } = props;
+  const { t } = useTranslation();
+  const handleUpgrade = () => {
+    // localStorage.removeItem(KEY_SET_EMAIL_MSG_TIP);
+    toast.dismiss(id);
+    location.href = "/#/setting/license";
+  };
+  const handleClose = () => {
+    // localStorage.removeItem(KEY_SET_EMAIL_MSG_TIP);
+    toast.dismiss(id);
+  };
+  return (
+    <div className="flex flex-col md:flex-row items-center gap-2 whitespace-nowrap">
+      <div>{t("tip.email_msg_tip")}</div>
+      <div className="flex gap-1">
+        <Button className="mini main" onClick={handleUpgrade}>
+          {t("action.upgrade")}
+        </Button>
+        <Button className="mini cancel" onClick={handleClose}>
+          {t("action.dismiss")}
+        </Button>
+      </div>
+    </div>
+  );
+};
+// 免费用户，admin，特定版本，在国内，提醒
+interface Props {}
+const Index: FC<Props> = () => {
+  const isAdmin = useAppSelector((store) => store.authData.user?.is_admin);
+  const isUpgraded = useAppSelector((store) => store.server.upgraded);
+  const { data: isInChina } = useGetIfInChinaQuery();
+  // const [visible, setVisible] = useState(false);
+  // useEffect(() => {
+  //   setVisible(!!localStorage.getItem(KEY_SET_EMAIL_MSG_TIP));
+  // }, []);
+  const showToast = isAdmin && isInChina && !isUpgraded;
+  useEffect(() => {
+    if (showToast) {
+      toast((t) => <Container id={t.id} />, {
+        duration: Infinity,
+        position: "top-right"
+      });
+    }
+  }, [showToast]);
+
+  return null;
+};
+
+export default Index;

src/routes/index.tsx

@@ -16,6 +16,8 @@ import InvitePrivate from "./invitePrivate";
 import LazyIt from "./lazy";
 import InviteInMobile from "./reg/InviteInMobile";
 import usePrefetchData from "@/hooks/usePrefetchData";
+import SetEmailMsgTip from "@/components/SetEmailMsgTip";
+import ServerVersionChecker from "@/components/ServerVersionChecker";
 
 const RegBasePage = lazy(() => import("./reg"));
 const RegWithUsernamePage = lazy(() => import("./reg/RegWithUsername"));
@@ -295,6 +297,9 @@ function ReduxRoutes() {
     <Provider store={store}>
       <Meta />
       <PageRoutes />
+      <ServerVersionChecker empty version="0.4.0">
+        <SetEmailMsgTip />
+      </ServerVersionChecker>
     </Provider>
   );
 }

src/types/common.ts

@@ -15,3 +15,4 @@ export type Price = {
   type: PriceType;
   sub_dur?: PriceSubscriptionDuration;
 };
+export type IPData = { status: string; query: string; country: string; countryCode: string };