Fix i18n

frontend/providers/costcenter/next-i18next.config.js

@@ -5,7 +5,7 @@
 
 module.exports = {
   i18n: {
-    defaultLocale: 'zh',
+    defaultLocale: 'en',
     locales: ['en', 'zh'],
     localeDetection: false
   },

frontend/providers/costcenter/src/components/CurrencySymbol.tsx

@@ -10,8 +10,12 @@ export default function CurrencySymbol({
   return type === 'shellCoin' ? (
     <Img src={sealosCoin.src} boxSize={'16px'} maxW={'unset'} {...props}></Img>
   ) : type === 'cny' ? (
-    <Text {...props}>￥</Text>
+    <Text {...props} boxSize={'auto'}>
+      ￥
+    </Text>
   ) : (
-    <Text {...props}>$</Text>
+    <Text {...props} boxSize={'auto'}>
+      $
+    </Text>
   );
 }

frontend/providers/costcenter/src/components/RechargeModal.tsx

@@ -190,7 +190,7 @@ const BonusBox = (props: {
             <Text>{t('Double')}!</Text>
             <Flex align={'center'}>
               +
-              <CurrencySymbol boxSize={'10px'} mr={'2px'} />
+              <CurrencySymbol boxSize={'10px'} mr={'2px'} type={currency} />
               <Text>{props.bouns}</Text>
             </Flex>
           </Flex>
@@ -213,7 +213,7 @@ const BonusBox = (props: {
           fontSize="12px"
         >
           <Text mr="4px">{t('Bonus')}</Text>
-          <CurrencySymbol boxSize={'10px'} mr={'2px'} />
+          <CurrencySymbol boxSize={'10px'} mr={'2px'} type={currency} />
           <Text> {props.bouns}</Text>
         </Flex>
       )}
@@ -536,7 +536,7 @@ const RechargeModal = forwardRef(
                     >
                       {t('Bonus')} {getBonus(amount)}
                     </Text>
-                    <CurrencySymbol boxSize={'10px'} />
+                    <CurrencySymbol boxSize={'10px'} type={currency} />
                   </Flex>
                   <Flex
                     alignSelf={'flex-start'}

frontend/providers/costcenter/src/components/billing/AmountDisplay.tsx

@@ -1,11 +1,12 @@
-import { useQuery } from '@tanstack/react-query';
+import CurrencySymbol from '@/components/CurrencySymbol';
 import request from '@/service/request';
+import useBillingStore from '@/stores/billing';
+import useEnvStore from '@/stores/env';
+import useOverviewStore from '@/stores/overview';
 import { formatMoney } from '@/utils/format';
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
-import { Text, Box, Flex } from '@chakra-ui/react';
-import CurrencySymbol from '@/components/CurrencySymbol';
-import useOverviewStore from '@/stores/overview';
-import useBillingStore from '@/stores/billing';
 import { useMemo } from 'react';
 
 export default function AmountDisplay({ onlyOut = false }: { onlyOut?: boolean }) {
@@ -54,13 +55,14 @@ export default function AmountDisplay({ onlyOut = false }: { onlyOut?: boolean }
     return list;
   }, [onlyOut, rechargeData, expenditureData]);
   const { t } = useTranslation();
+  const { currency } = useEnvStore();
   return (
     <Flex gap={'32px'}>
       {list.map((item) => (
         <Flex align={'center'} gap={'8px'} fontSize={'12px'} key={item.title}>
           <Box w="8px" h="8px" bgColor={item.bgColor} borderRadius={'2px'} />
           <Text>{t(item.title)}: </Text>
-          <CurrencySymbol fontSize={'14px'} />
+          <CurrencySymbol fontSize={'14px'} type={currency} />
           <Text>{formatMoney(item.value).toFixed(2)}</Text>
         </Flex>
       ))}

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

@@ -1,23 +1,23 @@
 import Layout from '@/layout';
-import { sealosApp } from 'sealos-desktop-sdk/app';
-import { EVENT_NAME } from 'sealos-desktop-sdk';
-import '@/styles/globals.scss';
+import { Response as initDataRes } from '@/pages/api/platform/getAppConfig';
+import request from '@/service/request';
+import useAppTypeStore from '@/stores/appType';
+import useBillingStore from '@/stores/billing';
+import useEnvStore from '@/stores/env';
 import { theme } from '@/styles/chakraTheme';
+import '@/styles/globals.scss';
+import { ApiResp } from '@/types/api';
 import { ChakraProvider } from '@chakra-ui/react';
-import { Hydrate, QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
+import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { appWithTranslation } from 'next-i18next';
 import type { AppProps } from 'next/app';
 import Router, { useRouter } from 'next/router';
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
-import 'react-day-picker/dist/style.css';
-import { appWithTranslation, i18n } from 'next-i18next';
 import { useEffect } from 'react';
-import request from '@/service/request';
-import { ApiResp } from '@/types/api';
-import { Response as initDataRes } from '@/pages/api/platform/getAppConfig';
-import useEnvStore from '@/stores/env';
-import useAppTypeStore from '@/stores/appType';
-import useBillingStore from '@/stores/billing';
+import 'react-day-picker/dist/style.css';
+import { EVENT_NAME } from 'sealos-desktop-sdk';
+import { sealosApp } from 'sealos-desktop-sdk/app';
 
 // Make sure to call `loadStripe` outside a component’s render to avoid
 // recreating the `Stripe` object on every render.
@@ -40,24 +40,34 @@ const App = ({ Component, pageProps }: AppProps) => {
   const router = useRouter();
   const { setAppTypeMap, appTypeMap } = useAppTypeStore();
   const { setAppTypeList } = useBillingStore();
+  // init language
+  const changeI18n = (data: { currentLanguage: string }) => {
+    router.replace(router.basePath, router.asPath, { locale: data.currentLanguage });
+  };
   useEffect(() => {
-    const changeI18n = (data: { currentLanguage: string }) => {
-      router.replace(router.basePath, router.asPath, { locale: data.currentLanguage });
+    sealosApp.addAppEventListen(EVENT_NAME.CHANGE_I18N, changeI18n);
+    return () => {
+      sealosApp.removeAppEventListen(EVENT_NAME.CHANGE_I18N);
     };
-
+  }, []);
+  useEffect(() => {
+    state.setEnv('i18nIsInitialized', false);
     (async () => {
       try {
         const lang = await sealosApp.getLanguage();
         changeI18n({
           currentLanguage: lang.lng
         });
+        state.setEnv('i18nIsInitialized', true);
       } catch (error) {
-        changeI18n({
-          currentLanguage: 'zh'
-        });
+        console.error('get language error');
+        state.setEnv('i18nIsInitialized', false);
       }
     })();
+  }, [router.asPath]);
 
+  // init
+  useEffect(() => {
     (async () => {
       try {
         const { data } = await request<any, ApiResp<initDataRes>>('/api/platform/getAppConfig');
@@ -75,10 +85,6 @@ const App = ({ Component, pageProps }: AppProps) => {
         console.error('get init config error');
       }
     })();
-    sealosApp.addAppEventListen(EVENT_NAME.CHANGE_I18N, changeI18n);
-    return () => {
-      sealosApp.removeAppEventListen(EVENT_NAME.CHANGE_I18N);
-    };
   }, []);
 
   useEffect(() => {

frontend/providers/costcenter/src/pages/cost_overview/index.tsx

@@ -5,6 +5,7 @@ import { Trend } from '@/components/cost_overview/trend';
 import { TrendBar } from '@/components/cost_overview/trendBar';
 import useNotEnough from '@/hooks/useNotEnough';
 import request from '@/service/request';
+import useEnvStore from '@/stores/env';
 import useOverviewStore from '@/stores/overview';
 import { ApiResp } from '@/types';
 import { Box, Flex, useToast } from '@chakra-ui/react';
@@ -13,6 +14,7 @@ import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useRouter } from 'next/router';
 import { MutableRefObject, createContext, useEffect, useRef } from 'react';
+import { sealosApp } from 'sealos-desktop-sdk/app';
 export const RechargeContext = createContext<{ rechargeRef: MutableRefObject<any> | null }>({
   rechargeRef: null
 });
@@ -21,27 +23,37 @@ function CostOverview() {
   const { t } = useTranslation();
   const setRecharge = useOverviewStore((s) => s.setRecharge);
   const router = useRouter();
+  const toast = useToast();
+  const { i18nIsInitialized } = useEnvStore();
   useEffect(() => {
-    const { stripeState } = router.query;
-    if (stripeState === 'success') {
-      totast({
-        status: 'success',
-        duration: 3000,
-        title: t('Stripe Success'),
-        isClosable: true,
-        position: 'top'
-      });
-    } else if (stripeState === 'error') {
-      totast({
-        status: 'error',
-        duration: 3000,
-        title: t('Stripe Cancel'),
-        isClosable: true,
-        position: 'top'
-      });
-    }
-    !!stripeState && router.replace(router.pathname);
-  }, []);
+    (async () => {
+      const lng = ((await sealosApp.getLanguage())?.lng || 'en') as 'en' | 'zh';
+      const { stripeState } = router.query;
+      if (!i18nIsInitialized || !router.isReady || !stripeState) return;
+      if (stripeState === 'success') {
+        toast({
+          status: 'success',
+          duration: 3000,
+          title: t('Stripe Success', {
+            lng
+          }),
+          isClosable: true,
+          position: 'top'
+        });
+      } else if (stripeState === 'error') {
+        toast({
+          status: 'error',
+          duration: 3000,
+          title: t('Stripe Cancel', lng),
+          isClosable: true,
+          position: 'top'
+        });
+      } else {
+        return;
+      }
+      !!stripeState && router.replace(router.pathname);
+    })();
+  }, [t, i18nIsInitialized, router.query, router.isReady]);
   useEffect(() => {
     const { openRecharge } = router.query;
     if (openRecharge === 'true') {
@@ -50,7 +62,7 @@ function CostOverview() {
     }
   }, []);
   const { NotEnoughModal } = useNotEnough();
-  const totast = useToast();
+
   const rechargeRef = useRef<any>();
   const { data: balance_raw } = useQuery({
     queryKey: ['getAccount'],

frontend/providers/costcenter/src/stores/env.ts

@@ -9,6 +9,7 @@ type EnvState = {
   wechatEnabled: boolean;
   stripeEnabled: boolean;
   openRecharge: boolean;
+  i18nIsInitialized: boolean;
   currency: 'shellCoin' | 'cny' | 'usd';
   stripePromise: ReturnType<typeof loadStripe>;
   setStripe: (pub: string) => void;
@@ -27,6 +28,7 @@ const useEnvStore = create<EnvState>((set, get) => ({
   stripeEnabled: false,
   gpuEnabled: false,
   openRecharge: false,
+  i18nIsInitialized: false,
   currency: 'shellCoin',
   stripePromise: Promise.resolve(null),
   setStripe: (pub: string) => set({ stripePromise: loadStripe(pub) }),

frontend/providers/costcenter/src/stores/session.ts

@@ -7,7 +7,6 @@ import { immer } from 'zustand/middleware/immer';
 
 type SessionState = {
   session: SessionV1;
-  locale: string;
   setSession: (ss: SessionV1) => void;
   setSessionProp: (key: keyof SessionV1, value: any) => void;
   getSession: () => SessionV1;
@@ -21,7 +20,6 @@ const useSessionStore = create<SessionState>()(
     persist(
       immer((set, get) => ({
         session: {} as SessionV1,
-        locale: 'zh',
         setSession: (ss: SessionV1) => set({ session: ss }),
         setSessionProp: (key: keyof SessionV1, value: any) => {
           set((state) => {