feat: integrate site display type into pricing components

Add siteDisplayType prop across various pricing components to conditionally render pricing information based on the selected display type. This update enhances the user experience by ensuring that pricing details are accurately represented according to the chosen display mode, particularly for token-based views.

web/src/components/layout/PageLayout.jsx

@@ -41,7 +41,7 @@ import { normalizeLanguage } from '../../i18n/language';
 const { Sider, Content, Header } = Layout;
 
 const PageLayout = () => {
-  const [, userDispatch] = useContext(UserContext);
+  const [userState, userDispatch] = useContext(UserContext);
   const [, statusDispatch] = useContext(StatusContext);
   const isMobile = useIsMobile();
   const [collapsed, , setCollapsed] = useSidebarCollapsed();
@@ -114,15 +114,34 @@ const PageLayout = () => {
         linkElement.href = logo;
       }
     }
-    const savedLang = localStorage.getItem('i18nextLng');
-    if (savedLang) {
-      const normalizedLang = normalizeLanguage(savedLang);
-      if (normalizedLang !== savedLang) {
-        localStorage.setItem('i18nextLng', normalizedLang);
+  }, []);
+
+  useEffect(() => {
+    let preferredLang;
+
+    if (userState?.user?.setting) {
+      try {
+        const settings = JSON.parse(userState.user.setting);
+        preferredLang = normalizeLanguage(settings.language);
+      } catch (e) {
+        // Ignore parse errors
       }
-      i18n.changeLanguage(normalizedLang);
     }
-  }, [i18n]);
+
+    if (!preferredLang) {
+      const savedLang = localStorage.getItem('i18nextLng');
+      if (savedLang) {
+        preferredLang = normalizeLanguage(savedLang);
+      }
+    }
+
+    if (preferredLang) {
+      localStorage.setItem('i18nextLng', preferredLang);
+      if (preferredLang !== i18n.language) {
+        i18n.changeLanguage(preferredLang);
+      }
+    }
+  }, [i18n, userState?.user?.setting]);
 
   return (
     <Layout