refactor:providers invite app (#4599)

Signed-off-by: jingyang <3161362058@qq.com>

frontend/providers/invite/.env.template

@@ -1 +1,4 @@
-LAF_BASE_URL=
+LAF_BASE_URL=
+NEXT_PUBLIC_MOCK_USER=
+GIFT_RATIO=
+SEALOS_DOMAIN=

frontend/providers/invite/next.config.js

@@ -1,29 +1,17 @@
 /** @type {import('next').NextConfig} */
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const { i18n } = require('./next-i18next.config');
-const analyzer = process.env === 'production' ? [new BundleAnalyzerPlugin()] : [];
-const path = require('path');
+const { i18n } = require('./next-i18next.config')
+const path = require('path')
+
 const nextConfig = {
   i18n,
   output: 'standalone',
   reactStrictMode: false,
   compress: true,
-  webpack: (config, { isServer }) => {
-    config.module.rules = config.module.rules.concat([
-      {
-        test: /\.svg$/i,
-        issuer: /\.[jt]sx?$/,
-        use: ['@svgr/webpack']
-      }
-    ]);
-    config.plugins = [...config.plugins, ...analyzer];
-    return config;
-  },
   transpilePackages: ['@sealos/ui', 'sealos-desktop-sdk', '@sealos/driver'],
   experimental: {
     // this includes files from the monorepo base two directories up
     outputFileTracingRoot: path.join(__dirname, '../../')
   }
-};
+}
 
-module.exports = nextConfig;
+module.exports = nextConfig

frontend/providers/invite/public/locales/en/common.json

@@ -1,16 +1,11 @@
 {
-  "Upload Token File": "Upload License File",
-  "Activate License": "Activate License",
-  "Activation Record": "Activation Record",
-  "Purchase License": "Purchase License",
-  "Please go to": "Please go to",
-  "Activation Time": "Activation time: ",
-  "Go to the message center to see the results": "Go to the message center to see the results",
-  "token does not exist": "license does not exist",
-  "No Record": "No Record",
-  "Activation time": "Activation time",
-  "Activation Successful": "Activation Successful",
-  "Failed to obtain cluster ID, contact administrator": "Failed to obtain cluster ID, contact administrator",
-  "Cluster ID": "Cluster ID: {{id}}",
-  "Purchase Tip": "Activate / Purchase"
+  "Cumulative number of invitees": "Cumulative number of invitees",
+  "Earnings": "Earnings",
+  "Cashback Ratio": "Cashback Ratio",
+  "Every time a friend recharges": "Every time a friend recharges, you will receive a balance reward of {{amount}}",
+  "Invitation link": "Invitation link",
+  "Copy link": "Copy link",
+  "Time": "Time",
+  "Amount": "Amount",
+  "No invitation records": "No invitation records~"
 }

frontend/providers/invite/public/locales/zh/common.json

@@ -1,16 +1,11 @@
 {
-  "Upload Token File": "上传 License 文件",
-  "Activate License": "激活 License",
-  "Activation Record": "激活记录",
-  "Purchase License": "购买 License",
-  "Please go to": "请前往",
-  "Activation Time": "激活时间: ",
-  "Go to the message center to see the results": "前往消息中心查看结果",
-  "token does not exist": "license 不存在",
-  "No Record": "暂无记录",
-  "Activation time": "激活时间",
-  "Activation Successful": "激活成功",
-  "Failed to obtain cluster ID, contact administrator": "获取集群id失败, 联系管理员",
-  "Cluster ID": "集群 ID: {{id}}",
-  "Purchase Tip": "激活 / 购买"
+  "Cumulative number of invitees": "累计邀请人数",
+  "Earnings": "收益",
+  "Cashback Ratio": "返现比例",
+  "Every time a friend recharges": "好友每次充值，您都获得 {{amount}} 的余额奖励",
+  "Invitation link": "邀请链接",
+  "Copy link": "复制链接",
+  "Time": "时间",
+  "Amount": "金额",
+  "No invitation records": "无邀请记录~"
 }

frontend/providers/invite/src/pages/_app.tsx

@@ -1,11 +1,9 @@
 import { theme } from '@/constants/theme';
-import { useGlobalStore } from '@/store/global';
 import useSessionStore from '@/store/session';
 import '@/styles/reset.scss';
 import { getLangStore, setLangStore } from '@/utils/cookieUtils';
 import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { throttle } from 'lodash';
 import { appWithTranslation, useTranslation } from 'next-i18next';
 import type { AppProps } from 'next/app';
 import Router, { useRouter } from 'next/router';
@@ -34,43 +32,27 @@ const queryClient = new QueryClient({
 
 function App({ Component, pageProps }: AppProps) {
   const router = useRouter();
-  const { setSession } = useSessionStore();
+  const { setSession, delSession } = useSessionStore();
   const { i18n } = useTranslation();
-  const { setScreenWidth, loading, setLastRoute, lastRoute } = useGlobalStore();
+
   const [refresh, setRefresh] = useState(false);
 
   useEffect(() => {
     NProgress.start();
     const response = createSealosApp();
-
     (async () => {
       try {
         const res = await sealosApp.getSession();
         setSession(res);
       } catch (err) {
-        console.warn('App is not running in desktop');
+        console.log('App is not running in desktop');
       }
     })();
+    localStorage.removeItem('session');
     NProgress.done();
-
     return response;
   }, []);
 
-  // add resize event
-  useEffect(() => {
-    const resize = throttle((e: Event) => {
-      const documentWidth = document.documentElement.clientWidth || document.body.clientWidth;
-      setScreenWidth(documentWidth);
-    }, 200);
-    window.addEventListener('resize', resize);
-    const documentWidth = document.documentElement.clientWidth || document.body.clientWidth;
-    setScreenWidth(documentWidth);
-
-    return () => {
-      window.removeEventListener('resize', resize);
-    };
-  }, [setScreenWidth]);
-
   // init
   useEffect(() => {
     const changeI18n = async (data: any) => {
@@ -99,13 +81,6 @@ function App({ Component, pageProps }: AppProps) {
     return sealosApp?.addAppEventListen(EVENT_NAME.CHANGE_I18N, changeI18n);
   }, []);
 
-  // record route
-  useEffect(() => {
-    return () => {
-      setLastRoute(router.asPath);
-    };
-  }, [router.pathname]);
-
   useEffect(() => {
     const lang = getLangStore() || 'zh';
     i18n?.changeLanguage?.(lang);

frontend/providers/invite/src/pages/api/account/list.ts

@@ -1,4 +1,4 @@
-import { jsonRes } from '@/services/backend/response';
+import { jsonRes } from '@/services/response';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
 export type InvitationResult = {
@@ -16,7 +16,6 @@ export type InvitationResult = {
 export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
   try {
     const { inviterId } = req.query;
-    console.log(inviterId);
     const baseUrl = process.env.LAF_BASE_URL;
 
     const defaultObj: InvitationResult = {

frontend/providers/invite/src/pages/api/platform/getEnv.ts

@@ -1,17 +1,15 @@
-import { jsonRes } from '@/services/backend/response';
+import { jsonRes } from '@/services/response';
 import { ApiResp } from '@/services/kubernet';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
-export type Response = {
-  domain?: string;
-  LICENSE_DOMAIN: string;
+export type SystemEnvResponse = {
+  domain: string;
 };
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
-  jsonRes<Response>(res, {
+  jsonRes<SystemEnvResponse>(res, {
     data: {
-      domain: process.env.SEALOS_DOMAIN || 'cloud.sealos.io',
-      LICENSE_DOMAIN: process.env.LICENSE_DOMAIN || 'cloud.sealos.io'
+      domain: process.env.SEALOS_DOMAIN || 'cloud.sealos.io'
     }
   });
 }

frontend/providers/invite/src/pages/index.tsx

@@ -1,5 +1,6 @@
 import { getInvitationIno } from '@/api/account';
 import useSessionStore from '@/store/session';
+import { serviceSideProps } from '@/utils/i18n';
 import { formatMoney, useCopyData } from '@/utils/tools';
 import {
   Box,
@@ -20,6 +21,7 @@ import {
 } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
+import { useTranslation } from 'next-i18next';
 import { useCallback } from 'react';
 
 export default function Index({
@@ -31,11 +33,13 @@ export default function Index({
 }) {
   const theme = useTheme();
   const { copyData } = useCopyData();
-  const { session } = useSessionStore();
+  const userInfo = useSessionStore((state) => state?.session?.user);
+
+  const { t } = useTranslation();
 
   const { data, isLoading } = useQuery(
-    ['getPromotionInitData', session?.user?.k8sUsername],
-    () => getInvitationIno({ inviterId: session?.user?.k8sUsername }),
+    ['getPromotionInitData', userInfo?.id],
+    () => getInvitationIno({ inviterId: userInfo?.id || '' }),
     {
       refetchInterval: 5 * 60 * 1000
     }
@@ -55,38 +59,37 @@ export default function Index({
   };
 
   const copyInviteLink = useCallback(() => {
-    const userId = session?.user?.k8sUsername;
-    const uid = userId ? `?uid=${userId}` : '';
-    const str = `https://${SEALOS_DOMAIN}/${uid}`;
+    const userId = userInfo?.id;
+    const str = `https://${SEALOS_DOMAIN}/?uid=${userId}`;
     copyData(str);
-  }, [SEALOS_DOMAIN, copyData, session?.user?.k8sUsername]);
+  }, [SEALOS_DOMAIN, copyData, userInfo?.id]);
 
   return (
     <Flex flexDirection={'column'} p={10} h={'100%'} position={'relative'}>
       <Grid gridTemplateColumns={['1fr 1fr', 'repeat(2,1fr)', 'repeat(4,1fr)']} gridGap={5}>
         <Box {...statisticsStyles}>
-          <Box>累计邀请人数</Box>
+          <Box>{t('Cumulative number of invitees')}</Box>
           <Box {...titleStyles}>{data?.totalPeople || 0}</Box>
         </Box>
         <Box {...statisticsStyles}>
-          <Box>收益</Box>
+          <Box>{t('Earnings')}</Box>
           <Box {...titleStyles}>{formatMoney(data?.totalAmount || 0)}</Box>
         </Box>
         <Box {...statisticsStyles}>
           <Flex alignItems={'center'} justifyContent={'center'} flexDirection={'column'}>
-            <Box mb="4px">返现比例</Box>
+            <Box mb="4px">{t('Cashback Ratio')}</Box>
             <Text fontSize={'12px'}>
-              好友每次充值，您都获得 {parseFloat(GIFT_RATIO) * 100}% 的余额奖励
+              {t('Every time a friend recharges', { amount: `${parseFloat(GIFT_RATIO) * 100}%` })}
             </Text>
           </Flex>
           <Box {...titleStyles}>{parseFloat(GIFT_RATIO) * 100}%</Box>
         </Box>
         <Box {...statisticsStyles}>
           <Flex alignItems={'center'} justifyContent={'center'}>
-            <Box>邀请链接</Box>
+            <Text>{t('Invitation link')}</Text>
           </Flex>
           <Button mt={4} fontSize={'sm'} onClick={copyInviteLink}>
-            复制链接
+            {t('Copy link')}
           </Button>
         </Box>
       </Grid>
@@ -95,10 +98,10 @@ export default function Index({
           <Table>
             <Thead>
               <Tr>
-                <Th>时间</Th>
+                <Th>{t('Time')}</Th>
                 <Th>
                   <Flex gap={'4px'}>
-                    <Text>金额</Text>
+                    <Text>{t('Amount')}</Text>
                     <Icon
                       xmlns="http://www.w3.org/2000/svg"
                       width="12px"
@@ -175,7 +178,7 @@ export default function Index({
               />
             </Icon>
             <Box mt={2} color={'myGray.500'}>
-              无邀请记录~
+              {t('No invitation records')}
             </Box>
           </Flex>
         )}
@@ -190,6 +193,7 @@ export async function getServerSideProps(content: any) {
 
   return {
     props: {
+      ...(await serviceSideProps(content)),
       SEALOS_DOMAIN,
       GIFT_RATIO
     }