Merge pull request #974 from singnet/ui-fix

Fixed routing errors
singnet · Jan 23, 2025 · 752b335 · 752b335
2 parents 1a0fd75 + 6c8c83b
commit 752b335
Show file tree

Hide file tree

Showing 27 changed files with 189 additions and 143 deletions.
diff --git a/.gitignore b/.gitignore
@@ -86,4 +86,7 @@ src/assets/images/ThirdPartyServices/*
 .DS_Store
 
 # Sitemap generated by the build script
-public/sitemap.xml
+public/sitemap.xml
+
+# Generated grpc-stubs
+grpc-stubs
diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
     "lint:fix": "eslint . --fix",
     "sitemap": "babel-node scripts/sitemap-generator.js",
     "zip-components": "babel-node scripts/zip-components.js",
-    "generate-stubs": "babel-node scripts/generate-stubs.js",
+    "generate-stubs": "babel-node scripts/generate-stubs.js example_service.proto",
     "prepare": "husky install"
   },
   "lint-staged": {
@@ -100,7 +100,7 @@
     "adm-zip": "0.5.15",
     "ajv": "^8.17.1",
     "archiver": "7.0.1",
-    "chalk": "5.3.0",
+    "chalk": "4.1.2",
     "dotenv": "16.4.5",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.1.0",

diff --git a/scripts/generate-stubs.js b/scripts/generate-stubs.js
@@ -21,6 +21,7 @@ let packageName;
 let orgId;
 let serviceId;
 let namespacePrefix;
+let osPlatform;
 
 console.log("proces architecture", process.arch);
 
@@ -29,8 +30,11 @@ const displayError = (...args) => {
   process.exit();
 };
 
+const getOsPlatform = () => {
+  osPlatform = os.platform();
+};
+
 const getProtoBinaryFileURL = () => {
-  const osPlatform = os.platform();
   switch (osPlatform) {
     case "win32":
       return `https://github.com/protocolbuffers/protobuf/releases/download/v${protoCVersion}/protoc-${protoCVersion}-win32.zip`;
@@ -104,14 +108,19 @@ const promptForDetails = async () => {
 };
 
 const getProtoFilePathFromArgs = () => {
-  let protoFilePath = process.argv[2];
+  const protoFilePath = process.argv[2];
   const regex = new RegExp("([a-zA-Z0-9s_\\.-:])+(.proto)$");
   if (!regex.test(protoFilePath)) {
     displayError("Please provide path to the file with `.proto` extension");
   }
   return protoFilePath;
 };
 
+const getProtoFileName = (protoFilePath) => {
+  const indexOfExtention = protoFilePath.indexOf(".proto");
+  return protoFilePath.substring(0, indexOfExtention);
+};
+
 const downloadProtoCBinary = async (protoBinaryFileURL) => {
   let data;
   try {
@@ -130,37 +139,45 @@ const downloadProtoCBinary = async (protoBinaryFileURL) => {
   }
 };
 
+const protoGenTsPath = {
+  win32: "%cd%\\node_modules\\.bin\\protoc-gen-ts.cmd",
+  linux: ".\\node_modules\\.bin\\protoc-gen-ts",
+};
+
 const executeProtoCBinary = async (protoFilePath) => {
   if (shouldIncludeNamespacePrefix) {
     outputDir = `${outputDir}/${orgId.replace(/-/g, "_")}_${serviceId.replace(/-/g, "_")}`;
   }
   try {
     if (!fs.existsSync(outputDir)) await fsPromises.mkdir(outputDir, { recursive: true });
     const { stderr } = await exec(
-      `./${extractedFolder}/bin/protoc ${protoFilePath} --js_out=import_style=commonjs,binary,${
+      `.\\${extractedFolder}\\bin\\protoc --plugin=protoc-gen-ts=${protoGenTsPath[osPlatform]} --js_out=import_style=commonjs,binary,${
         namespacePrefix ? "namespace_prefix=" + namespacePrefix : ""
-      }:${outputDir} --ts_out=service=grpc-web:${outputDir} --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts`
+      }:${outputDir} --ts_out=service=grpc-web:${outputDir} ${protoFilePath}`
     );
     if (stderr) throw new Error(stderr);
   } catch (err) {
     displayError("Unable to execute the binary", err.message);
   }
 };
 
-const removeUnwantedFiles = () => {
+const removeUnwantedFiles = (protoFilePath) => {
+  const protoFileName = getProtoFileName(protoFilePath);
   rimraf.sync(extractedFolder);
   rimraf.sync(downloadedZipName);
-  rimraf.sync(`./${outputDir}/*.ts`);
+  rimraf.sync(`./${outputDir}/${protoFileName}_pb.d.ts`);
+  rimraf.sync(`./${outputDir}/${protoFileName}_pb_service.d.ts`);
 };
 
 const generateStubs = async () => {
   validateCommand();
   const protoFilePath = getProtoFilePathFromArgs();
   await promptForDetails();
+  getOsPlatform();
   const protoBinaryFileURL = getProtoBinaryFileURL();
   await downloadProtoCBinary(protoBinaryFileURL);
   await executeProtoCBinary(protoFilePath);
-  removeUnwantedFiles();
+  removeUnwantedFiles(protoFilePath);
   console.log(
     chalk.green("Grpc client libraries have been generated successfully and saved inside the folder ", outputDir)
   );

diff --git a/src/App.js b/src/App.js
@@ -53,6 +53,9 @@ const App = () => {
   const isTermsAccepted = useSelector((state) => state.userReducer.isTermsAccepted);
   const isInitialized = useSelector((state) => state.userReducer.isInitialized);
 
+  const isLoggedInAndTermsAccepted = isLoggedIn && isTermsAccepted;
+  const isNotLoggedInPageAvailable = !isLoggedIn || isTermsAccepted;
+
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -115,7 +118,7 @@ const App = () => {
               path={`/${Routes.AI_MARKETPLACE}`}
               element={
                 <PrivateRoute
-                  isAllowed={isTermsAccepted}
+                  isAllowed={isNotLoggedInPageAvailable}
                   component={withInAppWrapper(AiMarketplace)}
                   redirectTo={`/${Routes.ONBOARDING}`}
                   path={`/${Routes.AI_MARKETPLACE}`}
@@ -126,7 +129,7 @@ const App = () => {
               path={`/${Routes.SERVICE_DETAILS}/org/:orgId/service/:serviceId/tab/:tabId`}
               element={
                 <PrivateRoute
-                  isAllowed={isTermsAccepted}
+                  isAllowed={isNotLoggedInPageAvailable}
                   component={withInAppWrapper(ServiceDetails)}
                   redirectTo={`/${Routes.ONBOARDING}`}
                   path={`/${Routes.SERVICE_DETAILS}/org/:orgId/service/:serviceId/tab/:tabId`}
@@ -137,7 +140,7 @@ const App = () => {
               path={`/${Routes.SERVICE_DETAILS}/org/:orgId/service/:serviceId/order/:orderId/payment/:paymentId/execute`}
               element={
                 <PrivateRoute
-                  isAllowed={isTermsAccepted}
+                  isAllowed={isLoggedInAndTermsAccepted}
                   component={withInAppWrapper(ServiceDetails)}
                   redirectTo={`/${Routes.ONBOARDING}`}
                   path={`/${Routes.SERVICE_DETAILS}/org/:orgId/service/:serviceId/order/:orderId/payment/:paymentId/execute`}
@@ -148,7 +151,7 @@ const App = () => {
               path={`/${Routes.SERVICE_DETAILS}/org/:orgId/service/:serviceId/order/:orderId/payment/:paymentId/cancel`}
               element={
                 <PrivateRoute
-                  isAllowed={isTermsAccepted}
+                  isAllowed={isLoggedInAndTermsAccepted}
                   component={PaymentCancelled}
                   redirectTo={`/${Routes.ONBOARDING}`}
                   path={`/${Routes.SERVICE_DETAILS}/org/:orgId/service/:serviceId/order/:orderId/payment/:paymentId/cancel`}
@@ -159,7 +162,7 @@ const App = () => {
               path={`/${Routes.USER_PROFILE}/:activeTab?/*`}
               element={
                 <PrivateRoute
-                  isAllowed={isLoggedIn && isTermsAccepted}
+                  isAllowed={isLoggedInAndTermsAccepted}
                   component={withInAppWrapper(UserProfile)}
                   redirectTo={isLoggedIn ? `/${Routes.ONBOARDING}` : `/${Routes.LOGIN}`}
                   path={`/${Routes.USER_PROFILE}/:activeTab?`}
@@ -170,7 +173,7 @@ const App = () => {
               path="/"
               element={
                 <PrivateRoute
-                  isAllowed={isTermsAccepted}
+                  isAllowed={isLoggedInAndTermsAccepted}
                   component={withInAppWrapper(AiMarketplace)}
                   redirectTo={`/${Routes.ONBOARDING}`}
                   path="/"

diff --git a/src/Redux/actionCreators/UserActions.js b/src/Redux/actionCreators/UserActions.js
@@ -102,8 +102,12 @@ const fetchUserProfile = (token) => async (dispatch) => {
       dispatch(registerInMarketplace(token));
       return;
     }
-    dispatch(updateEmailAlertsSubscription(Boolean(userProfile.data.data[0].email_alerts)));
-    dispatch(updateIsTermsAccepted(Boolean(userProfile.data.data[0].is_terms_accepted)));
+    const userProfileData = userProfile.data.data[0];
+    const isTermsAccepted = Boolean(userProfileData.is_terms_accepted);
+    const emailAlerts = Boolean(userProfileData.email_alerts);
+
+    dispatch(updateEmailAlertsSubscription(emailAlerts));
+    dispatch(updateIsTermsAccepted(isTermsAccepted));
   } catch (err) {
     return;
   }
@@ -185,7 +189,7 @@ export const fetchUserDetails = () => async (dispatch) => {
     const { nickname, token, email, email_verified } = await dispatch(fetchAuthenticatedUser());
 
     await dispatch(fetchUserProfile(token));
-    if (email === null || email === undefined) {
+    if (!email) {
       dispatch(noAuthenticatedUser());
       return;
     }
@@ -272,7 +276,7 @@ export const loginSuccess =
 
 export const login =
   ({ email, password, route }) =>
-  (dispatch) => {
+  async (dispatch) => {
     dispatch(loaderActions.startAppLoader(LoaderContent.LOGIN));
     let userDetails = {};
     return signIn({ username: email, password })
@@ -335,10 +339,13 @@ export const signOut = () => (dispatch) => {
   };
   signOutAws()
     .then(() => {
-      userDetails.payload.login = {
-        isLoggedIn: false,
-        error: undefined,
-        loading: false,
+      userDetails.payload = {
+        login: {
+          isLoggedIn: false,
+          error: undefined,
+          loading: false,
+        },
+        isTermsAccepted: false,
       };
     })
     .finally(() => {

diff --git a/src/Redux/reducers/UserReducer.js b/src/Redux/reducers/UserReducer.js
@@ -19,7 +19,7 @@ const InitialUserDetails = {
   email: "",
   nickname: "",
   emailAlerts: false,
-  isTermsAccepted: true,
+  isTermsAccepted: false,
   transactionHistory: [],
   jwt: {
     exp: "",

diff --git a/src/components/AiMarketplace/MainSection/index.js b/src/components/AiMarketplace/MainSection/index.js
@@ -76,7 +76,6 @@ class MainSection extends Component {
 const mapStateToProps = (state) => ({
   services: state.serviceReducer.services,
   pagination: state.serviceReducer.pagination,
-  isLoggedIn: state.userReducer.login.isLoggedIn,
   currentFilter: state.serviceReducer.activeFilterItem,
 });
 

diff --git a/src/components/AiMarketplace/ServiceListingHeader/styles.js b/src/components/AiMarketplace/ServiceListingHeader/styles.js
@@ -118,9 +118,11 @@ export const useStyles = (theme) => ({
   },
   featuredServiceContainer: {
     "& span": {
-      display: "inline-block",
       fontSize: 14,
       lineHeight: "18px",
+      width: "min-content",
+      whiteSpace: "nowrap",
+      gap: 10,
       "& svg": {
         fontSize: 20,
         verticalAlign: "middle",
@@ -145,9 +147,9 @@ export const useStyles = (theme) => ({
     "&::after": {
       content: "' '",
       width: 18,
-      height: 23,
+      height: 26,
       display: "inline-block",
-      backgroundColor: "#371150",
+      backgroundColor: "#311049",
       transform: "rotate(40deg)",
       position: "absolute",
       right: -11,

diff --git a/src/components/AiRequestForm/index.js b/src/components/AiRequestForm/index.js
@@ -53,7 +53,7 @@ const AiRequestForm = ({ classes }) => {
             <iframe
               src="https://docs.google.com/forms/d/e/1FAIpQLSeJHI_TCmw0XufpzuqpXTfGrX0vULiwjhJY_361zVC79xCTYA/viewform?embedded=true"
               width="100%"
-              height="1300"
+              height="1350"
               frameborder="0"
               marginheight="0"
               marginwidth="0"

diff --git a/src/components/AiRequestForm/styles.js b/src/components/AiRequestForm/styles.js
@@ -37,11 +37,6 @@ export const useStyles = (theme) => ({
     borderRadius: 4,
     backgroundColor: "#F6F6F6",
     boxShadow: "0 1px 1px 0 rgba(0,0,0,0.07), 0 2px 1px -1px rgba(0,0,0,0.07), 0 1px 3px 0 rgba(0,0,0,0.1)",
-    "& iframe": {
-      height: 1300,
-      "@media(max-width: 780px)": { height: 1400 },
-      "@media(max-width: 530px)": { height: 1500 },
-    },
     "@media(max-width: 780px)": { width: "90%" },
   },
   aiRequestFormFooterContainer: {

diff --git a/src/components/Login/index.js b/src/components/Login/index.js
@@ -17,6 +17,7 @@ const Login = ({ classes }) => {
   const dispatch = useDispatch();
   const location = useLocation();
   const loginError = useSelector((state) => state.userReducer.login.error);
+  const isTermsAccepted = useSelector((state) => state.userReducer.isTermsAccepted);
 
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -33,11 +34,16 @@ const Login = ({ classes }) => {
     setPassword(event.currentTarget.value);
   };
 
-  const handleSubmit = async (event) => {
-    let route = `/${Routes.ONBOARDING}`;
-    if (location.state && location.state.sourcePath) {
-      route = location.state.sourcePath;
+  const getLinkToMarketplace = () => {
+    if (location?.state && location?.state?.sourcePath) {
+      return location.state.sourcePath;
     }
+
+    return `/${Routes.AI_MARKETPLACE}`;
+  };
+
+  const handleSubmit = async (event) => {
+    let route = isTermsAccepted ? getLinkToMarketplace() : `/${Routes.ONBOARDING}`;
     const isNotValid = snetValidator({ email, password }, loginConstraints);
     if (isNotValid) {
       dispatch(userActions.updateLoginError(isNotValid[0]));

diff --git a/src/components/Login/styles.js b/src/components/Login/styles.js
@@ -1,6 +1,6 @@
 export const useStyles = (theme) => ({
   loginDetails: {
-    height: "100vh",
+    height: "calc(100vh - 122px)",
     textAlign: "center",
     backgroundColor: theme.palette.text.offWhiteColor,
     "& h2": {

diff --git a/src/components/Onboarding/OnboardingContainer.js b/src/components/Onboarding/OnboardingContainer.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import React from "react";
 
 import ProgressBar from "../common/ProgressBar";
 
@@ -7,14 +7,14 @@ const OnboardingContainer = ({ item, classes, active, activeSection, progressTex
     return null;
   }
   return (
-    <Fragment>
+    <div className={classes.onboardingComponentsContainer}>
       <div className={classes.topSection}>
         <h2>{item.title}</h2>
-        <span> {item.description}</span>
+        {item.description}
       </div>
       <ProgressBar activeSection={activeSection} progressText={progressText} />
       {item.component}
-    </Fragment>
+    </div>
   );
 };
 

diff --git a/src/components/Onboarding/TermsOfUse/styles.js b/src/components/Onboarding/TermsOfUse/styles.js
@@ -5,8 +5,8 @@ export const useStyles = (theme) => ({
   },
   termsOfUseContainer: {
     width: 630,
-    paddingBottom: 40,
-    margin: "40px auto 0",
+    paddingBottom: 20,
+    margin: "0 auto",
     backgroundColor: theme.palette.text.white,
     boxShadow: "0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.2)",
     textAlign: "center",