ES-1550: improve browser compatibility check (#346)

* fix: fix browser compatibility issue

Signed-off-by: bunsy-0900 <[email protected]>

* fix: fixes check min browser version

Signed-off-by: bunsy-0900 <[email protected]>

* fix: change variable name

Signed-off-by: bunsy-0900 <[email protected]>

---------

Signed-off-by: bunsy-0900 <[email protected]>

signup-ui/package.json

@@ -27,6 +27,7 @@
     "@types/react": "^18.2.32",
     "@types/react-dom": "^18.2.14",
     "axios": "^1.6.0",
+    "bowser": "^2.11.0",
     "buffer": "^6.0.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",

signup-ui/src/pages/EkycVerificationPage/VerificationSteps/utils/checkBrowserCompatible.ts

@@ -1,35 +1,31 @@
+import Bowser, { BROWSER_MAP } from "bowser";
+import { findKey } from "lodash";
+
 import { BROWSER_MIN_COMPATIBILITY } from "~constants/browsers";
 import { compareVersions } from "~utils/browser";
 
-/**
- * Checks if the browser is compatible based on its version.
- *
- * This function gets the user agent string and defines a regular expression for each browser to extract its version.
- * It then loops over the regular expressions, and if it finds a match in the user agent string, it compares the extracted version with the minimum compatible version for that browser.
- * If the browser version is greater than or equal to the minimum compatible version, it returns true.
- * If no match is found for any browser, it returns false.
- * @param {Object} minBrowserCompatibility - An object containing the minimum compatible version for each browser. The default value is BROWSER_MIN_COMPATIBILITY.
- * @returns {boolean} - True if the browser is compatible, false otherwise.
- */
 export const checkBrowserCompatible = (
   minBrowserCompatibility: { [key: string]: string } = BROWSER_MIN_COMPATIBILITY
 ) => {
-  const userAgent = navigator.userAgent;
-  const browserVersionRegex = {
-    edge: /Edg\/(\d+\.\d+\.\d+\.\d+)/,
-    safari: /Version\/(\d+\.\d+)/,
-    firefox: /Firefox\/(\d+\.\d+)/,
-    chrome: /Chrome\/(\d+\.\d+\.\d+\.\d+)/,
-  };
-
-  for (const [browser, regex] of Object.entries(browserVersionRegex)) {
-    const browserVersionMatch = userAgent.match(regex);
-    if (browserVersionMatch) {
-      return compareVersions(
-        browserVersionMatch[1],
-        minBrowserCompatibility[browser]
-      );
-    }
+  const browserInfo = Bowser.parse(window.navigator.userAgent);
+
+  const browserName = findKey(
+    BROWSER_MAP,
+    (b) => b === browserInfo.browser.name
+  );
+
+  if (!browserName) return false;
+
+  const minBrowserVersion = minBrowserCompatibility[browserName];
+  const currentBrowserVersion = browserInfo.browser.version;
+
+  if (!minBrowserVersion || !currentBrowserVersion) return false;
+
+  const isCompatible = compareVersions(currentBrowserVersion, minBrowserVersion);
+
+  if (isCompatible) {
+    return true;
   }
+
   return false;
 };