Refactor environment variable handling and enhance UserBox component …

…with subscription link adjustments
MatinDehghanian · Dec 6, 2024 · 5ebde6c · 5ebde6c
1 parent 9e65f02
commit 5ebde6c
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 75 deletions.
diff --git a/.env.example b/.env.example
@@ -1,11 +1,17 @@
-# Application Information
+### Customization
+# Brand Name
 VITE_BRAND_NAME=Ourenus
+# Brand Logo URL
 VITE_LOGO_SRC=https://raw.githubusercontent.com/MatinDehghanian/public-assets/refs/heads/main/icons/uranus.svg
-
-# URLs
-VITE_PANEL_DOMAIN=https://panel.example.com:8000
-VITE_JSON_APPS_URL=https://raw.githubusercontent.com/MatinDehghanian/public-assets/refs/heads/main/json/os.json
+# Support URL
 VITE_SUPPORT_URL=https://t.me/YourID
-
 # Feature Toggles
-VITE_OFF_SECTIONS={"appsBox": true, "logoBox": true, "timeBox": true, "usageBox": true, "userBox": true, "supportBox": true, "configs": true}
+VITE_OFF_SECTIONS={"appsBox": true, "logoBox": true, "timeBox": true, "usageBox": true, "userBox": true, "supportBox": true, "configs": true}
+# Apps JSON URL
+VITE_JSON_APPS_URL=https://raw.githubusercontent.com/MatinDehghanian/public-assets/refs/heads/main/json/os.json
+
+### Host Settings
+# Host URL 
+VITE_PANEL_DOMAIN=https://panel.example.com:8000
+# Is Host
+VITE_IS_HOST=false
diff --git a/src/App.jsx b/src/App.jsx
@@ -66,43 +66,52 @@ function App() {
     }
   }, [data?.links]);
 
-  const url = data?.subscription_url?.includes("https://")
-    ? data?.subscription_url
-    : `${window.location.origin}${data?.subscription_url}`;
 
+  const getAdjustedUrl = (subURL) => {
+    if (import.meta.env.VITE_IS_HOST) {
+      return subURL.replace(
+        /https?:\/\/[^/]+/,
+        import.meta.env.VITE_PANEL_DOMAIN
+      );
+    } else if (subURL?.includes("https://")) {
+      return subURL;
+    }
+
+    return `${window.location.origin}${subURL}`;
+  };
 
   const title = data?.username
     ? `${data.username} Sub Info`
     : `${import.meta.env.VITE_BRAND_NAME || "Ourenus"} Sub Info`;
 
-    const isOffSections = useMemo(() => {
-      try {
-        const envValue = import.meta.env.VITE_OFF_SECTIONS;
-        if (envValue) {
-          return JSON.parse(envValue);
-        }
-        return {
-          appsBox: true,
-          logoBox: true,
-          timeBox: true,
-          usageBox: true,
-          userBox: true,
-          supportBox: true,
-          configs: true,
-        };
-      } catch (error) {
-        console.error("Failed to parse VITE_OFF_SECTIONS:", error);
-        return {
-          appsBox: true,
-          logoBox: true,
-          timeBox: true,
-          usageBox: true,
-          userBox: true,
-          supportBox: true,
-          configs: true,
-        };
+  const isOffSections = useMemo(() => {
+    try {
+      const envValue = import.meta.env.VITE_OFF_SECTIONS;
+      if (envValue) {
+        return JSON.parse(envValue);
       }
-    }, []);
+      return {
+        appsBox: true,
+        logoBox: true,
+        timeBox: true,
+        usageBox: true,
+        userBox: true,
+        supportBox: true,
+        configs: true,
+      };
+    } catch (error) {
+      console.error("Failed to parse VITE_OFF_SECTIONS:", error);
+      return {
+        appsBox: true,
+        logoBox: true,
+        timeBox: true,
+        usageBox: true,
+        userBox: true,
+        supportBox: true,
+        configs: true,
+      };
+    }
+  }, []);
 
   return (
     <ThemeProvider theme={theme}>
@@ -144,7 +153,12 @@ function App() {
                   handleLanguageChange={handleLanguageChange}
                 />
                 {isOffSections.logoBox && <LogoBox />}
-                {isOffSections.userBox && <UserBox data={data} />}
+                {isOffSections.userBox && (
+                  <UserBox
+                    data={data}
+                    subLink={getAdjustedUrl(data?.subscription_url)}
+                  />
+                )}
                 {isOffSections.usageBox && (
                   <UsageBox
                     type="usage"
@@ -174,7 +188,9 @@ function App() {
                     )}
                   />
                 )}
-                {isOffSections.appsBox && <Apps subLink={url} />}
+                {isOffSections.appsBox && (
+                  <Apps subLink={getAdjustedUrl(data?.subscription_url)} />
+                )}
                 {isOffSections.configs && (
                   <Configs
                     title={t("configsList")}

diff --git a/src/components/UserBox.jsx b/src/components/UserBox.jsx
@@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
 import QrModal from "./QrModal";
 import QrCodeOutlinedIcon from "@mui/icons-material/QrCodeOutlined";
 
-const UserBox = ({ data }) => {
+const UserBox = ({ data, subLink }) => {
   const theme = useTheme();
   const { t } = useTranslation();
 
@@ -72,20 +72,16 @@ const UserBox = ({ data }) => {
     setOpenQrModal(false);
   };
 
-  const SubUrl = data?.subscription_url?.includes("https://")
-    ? data?.subscription_url
-    : `${window.location.origin}${data?.subscription_url}`;
-
   useEffect(() => {
-    setQrLink(SubUrl);
-  }, [SubUrl]);
+    setQrLink(subLink);
+  }, [subLink]);
 
   return (
     <>
       <BoxS>
         <Grid
           item
-          xs={3.5}
+          xs={3}
           display="flex"
           justifyContent="center"
           sx={{ padding: ".3rem", paddingX: ".5rem" }}
@@ -101,7 +97,7 @@ const UserBox = ({ data }) => {
         </Grid>
         <Grid
           item
-          xs={8.5}
+          xs={8}
           display="flex"
           flexDirection={"column"}
           sx={{
@@ -147,8 +143,19 @@ const UserBox = ({ data }) => {
               </Button>
             </Grid>
           </Grid>
-          <Grid item display={"flex"} xs={12} justifyContent={"space-around"}>
-            <Grid xs={5} textAlign={"center"} item>
+          <Grid
+            item
+            display={"flex"}
+            xs={12}
+            justifyContent={
+              import.meta.env.VITE_SUPPORT_URL ? "space-around" : "flex-start"
+            }
+          >
+            <Grid
+              xs={import.meta.env.VITE_SUPPORT_URL ? 5 : 6}
+              textAlign={"center"}
+              item
+            >
               <Button
                 sx={{
                   borderRadius: "50px",
@@ -165,31 +172,33 @@ const UserBox = ({ data }) => {
                 {t(`status.${statusData}`)}
               </Button>
             </Grid>
-            <Grid item xs={7} textAlign={"center"}>
-              <Button
-                onClick={() =>
-                  window.open(
-                    import.meta.env.VITE_SUPPORT_URL || "https://t.me/YourID"
-                  )
-                }
-                sx={{
-                  borderRadius: "50px",
-                  backgroundColor:
-                    theme.colors.userBox.supportBox[theme.palette.mode],
-                  paddingX: ".5rem",
-                  color: "#fff",
-                  backdropFilter: "blur(16px)",
-                  boxShadow: "0 4px 10px rgba(0, 0, 0, 0.2)",
-                  textTransform: "capitalize",
-                  gap: "1rem",
-                  width: "90%",
-                  fontWeight: "lighter",
-                }}
-              >
-                <QuestionAnswerOutlinedIcon />
-                {t("support")}
-              </Button>
-            </Grid>
+            {import.meta.env.VITE_SUPPORT_URL && (
+              <Grid item xs={7} textAlign={"center"}>
+                <Button
+                  onClick={() =>
+                    window.open(
+                      import.meta.env.VITE_SUPPORT_URL || "https://t.me/YourID"
+                    )
+                  }
+                  sx={{
+                    borderRadius: "50px",
+                    backgroundColor:
+                      theme.colors.userBox.supportBox[theme.palette.mode],
+                    paddingX: ".5rem",
+                    color: "#fff",
+                    backdropFilter: "blur(16px)",
+                    boxShadow: "0 4px 10px rgba(0, 0, 0, 0.2)",
+                    textTransform: "capitalize",
+                    gap: "1rem",
+                    width: "90%",
+                    fontWeight: "lighter",
+                  }}
+                >
+                  <QuestionAnswerOutlinedIcon />
+                  {t("support")}
+                </Button>
+              </Grid>
+            )}
           </Grid>
         </Grid>
       </BoxS>