@koloseum/utils 0.2.26 → 0.2.27

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
 import type { Database } from "@koloseum/types/database";
-import type { CustomError, Microservice, MicroserviceGroup, MicroserviceObject, UserWithCustomMetadata } from "@koloseum/types/general";
+import type { BrowserInfo, CustomError, Microservice, MicroserviceGroup, MicroserviceObject, UserWithCustomMetadata } from "@koloseum/types/general";
 import type { BranchAddressObject, County, IdentityType, PronounsCheckboxes, PronounsItem, Sex, SocialMediaPlatform } from "@koloseum/types/public-auth";
 import type { Page } from "@sveltejs/kit";
 import type { SupabaseClient, FunctionInvokeOptions, PostgrestError } from "@supabase/supabase-js";
@@ -339,3 +339,56 @@ export declare const Cache: {
      */
     setData: <T>(valkey: any, cachePrefix: string, key: string, data: T, ttl?: number) => Promise<void>;
 };
+export declare const Browser: {
+    /**
+     * Checks if a specific feature is supported by the browser.
+     * @param feature - The feature to check
+     * @param browserName - The name of the browser
+     * @param browserVersion - The version of the browser
+     * @returns `true` if the feature is supported, `false` otherwise
+     */
+    checkFeatureSupport: (feature: string, browserName: string, browserVersion: number) => boolean;
+    /**
+     * Gets detailed browser information for debugging.
+     */
+    getDetailedInfo: () => {
+        browser: string;
+        os: string;
+        platform: string;
+        engine: string;
+        userAgent: string;
+    };
+    /**
+     * Gets comprehensive browser information using Bowser.
+     */
+    getInfo: () => BrowserInfo;
+    /**
+     * Gets specific browser recommendations based on the detected browser.
+     */
+    getRecommendations: () => {
+        title: string;
+        message: string;
+        recommendations: string[];
+        critical: boolean;
+    };
+    /**
+     * Checks if the current browser is compatible with the application.
+     */
+    isBrowserCompatible: () => boolean;
+    /**
+     * Checks if the browser is Internet Explorer.
+     */
+    isInternetExplorer: () => boolean;
+    /**
+     * Checks if the browser is iOS Safari.
+     */
+    isIOSSafari: () => boolean;
+    /**
+     * Checks if the browser is a legacy version that needs updating.
+     */
+    isLegacyBrowser: () => boolean;
+    /**
+     * Checks if the browser is an old version of Safari.
+     */
+    isOldSafari: () => boolean;
+};

package/dist/utils.js

@@ -1,6 +1,7 @@
 import { v4 as uuidv4 } from "uuid";
 import { error as svelteError } from "@sveltejs/kit";
 import { FunctionsFetchError, FunctionsHttpError, FunctionsRelayError } from "@supabase/supabase-js";
+import Bowser from "bowser";
 import validator from "validator";
 /* HELPERS */
 const parsePgInterval = (await import("postgres-interval")).default;
@@ -868,7 +869,7 @@ export const Utility = {
             isAuthorised = data;
         }
         // Validate SuprSend subscriber
-        let personData;
+        let personData = {};
         if (user.app_metadata.person_data) {
             const { first_name: firstName, last_name: lastName, pseudonym } = user.app_metadata.person_data;
             personData = { firstName, lastName, phone: user.phone, pseudonym };
@@ -1729,3 +1730,286 @@ export const Cache = {
         }
     }
 };
+/* BROWSER COMPATIBILITY FUNCTIONS */
+export const Browser = {
+    /**
+     * Checks if a specific feature is supported by the browser.
+     * @param feature - The feature to check
+     * @param browserName - The name of the browser
+     * @param browserVersion - The version of the browser
+     * @returns `true` if the feature is supported, `false` otherwise
+     */
+    checkFeatureSupport: (feature, browserName, browserVersion) => {
+        // Feature support matrix based on browser versions
+        const featureSupport = {
+            optionalChaining: {
+                Chrome: 80,
+                Firefox: 74,
+                Safari: 13.4,
+                Edge: 80,
+                Opera: 80
+            },
+            nullishCoalescing: {
+                Chrome: 80,
+                Firefox: 72,
+                Safari: 13.4,
+                Edge: 80,
+                Opera: 80
+            },
+            fetch: {
+                Chrome: 42,
+                Firefox: 39,
+                Safari: 10.1,
+                Edge: 14,
+                Opera: 29
+            },
+            es6Modules: {
+                Chrome: 61,
+                Firefox: 60,
+                Safari: 10.1,
+                Edge: 16,
+                Opera: 48
+            },
+            asyncAwait: {
+                Chrome: 55,
+                Firefox: 52,
+                Safari: 10.1,
+                Edge: 14,
+                Opera: 42
+            }
+        };
+        const featureMatrix = featureSupport[feature];
+        if (!featureMatrix)
+            return true; // Unknown feature, assume supported
+        const minVersion = featureMatrix[browserName];
+        if (!minVersion)
+            return true; // Unknown browser, assume supported
+        return browserVersion >= minVersion;
+    },
+    /**
+     * Gets detailed browser information for debugging.
+     */
+    getDetailedInfo: () => {
+        if (typeof window === "undefined") {
+            return {
+                browser: "Server-side rendering",
+                os: "Unknown",
+                platform: "Unknown",
+                engine: "Unknown",
+                userAgent: "Unknown"
+            };
+        }
+        const browser = Bowser.getParser(window.navigator.userAgent);
+        return {
+            browser: `${browser.getBrowserName()} ${browser.getBrowserVersion()}`,
+            os: `${browser.getOSName()} ${browser.getOSVersion()}`,
+            platform: browser.getPlatformType(),
+            engine: browser.getEngineName(),
+            userAgent: window.navigator.userAgent
+        };
+    },
+    /**
+     * Gets comprehensive browser information using Bowser.
+     */
+    getInfo: () => {
+        if (typeof window === "undefined") {
+            return {
+                name: "server",
+                version: 0,
+                isOldSafari: false,
+                isIOS: false,
+                supportsOptionalChaining: true,
+                supportsNullishCoalescing: true,
+                supportsFetch: true
+            };
+        }
+        const browser = Bowser.getParser(window.navigator.userAgent);
+        const browserName = browser.getBrowserName();
+        const browserVersion = parseFloat(browser.getBrowserVersion() || "0");
+        const osName = browser.getOSName();
+        const isIOS = osName === "iOS";
+        const isSafari = browserName === "Safari";
+        const isOldSafari = isSafari && browserVersion < 13.4;
+        return {
+            name: browserName,
+            version: browserVersion,
+            isOldSafari,
+            isIOS,
+            supportsOptionalChaining: Browser.checkFeatureSupport("optionalChaining", browserName, browserVersion),
+            supportsNullishCoalescing: Browser.checkFeatureSupport("nullishCoalescing", browserName, browserVersion),
+            supportsFetch: Browser.checkFeatureSupport("fetch", browserName, browserVersion)
+        };
+    },
+    /**
+     * Gets specific browser recommendations based on the detected browser.
+     */
+    getRecommendations: () => {
+        if (typeof window === "undefined")
+            return {
+                title: "Browser compatibility issue",
+                message: "Browser detection is not available on theserver.",
+                recommendations: [],
+                critical: false
+            };
+        const browser = Bowser.getParser(window.navigator.userAgent);
+        const browserName = browser.getBrowserName();
+        const browserVersion = browser.getBrowserVersion();
+        // Internet Explorer
+        if (browserName === "Internet Explorer") {
+            return {
+                title: "Unsupported browser",
+                message: "Internet Explorer is not supported. Please use a modern browser.",
+                recommendations: [
+                    "Download and install Microsoft Edge",
+                    "Use an alternative such as Chrome or Firefox (or Safari on Mac)"
+                ],
+                critical: true
+            };
+        }
+        // Apple Safari
+        if (browserName === "Safari" && parseFloat(browserVersion || "0") < 13.4) {
+            return {
+                title: "Browser compatibility issue",
+                message: `You're using Safari ${browserVersion || "Unknown"}, which doesn't support modern web features.`,
+                recommendations: [
+                    "Update to Safari 13.4 or later",
+                    "Use Chrome or Firefox as an alternative",
+                    "Update your iOS device to the latest version"
+                ],
+                critical: true
+            };
+        }
+        // Google Chrome
+        if (browserName === "Chrome" && parseFloat(browserVersion || "0") < 80) {
+            return {
+                title: "Outdated browser",
+                message: `You're using Chrome ${browserVersion || "Unknown"}, which may not support all features.`,
+                recommendations: ["Update Chrome to version 80 or later", "Enable automatic updates in Chrome settings"],
+                critical: false
+            };
+        }
+        // Mozilla Firefox
+        if (browserName === "Firefox" && parseFloat(browserVersion || "0") < 80) {
+            return {
+                title: "Outdated browser",
+                message: `You're using Firefox ${browserVersion || "Unknown"}, which may not support all features.`,
+                recommendations: ["Update Firefox to version 80 or later", "Enable automatic updates in Firefox settings"],
+                critical: false
+            };
+        }
+        // Microsoft Edge
+        if (browserName === "Edge" && parseFloat(browserVersion || "0") < 80) {
+            return {
+                title: "Outdated browser",
+                message: `You're using Edge ${browserVersion || "Unknown"}, which may not support all features.`,
+                recommendations: ["Update Edge to version 80 or later", "Enable automatic updates in Edge settings"],
+                critical: false
+            };
+        }
+        // For unknown or very old browsers
+        if (browserName === "Unknown" || parseFloat(browserVersion || "0") < 50) {
+            return {
+                title: "Unrecognised browser",
+                message: "Your browser may not be fully supported. For the best experience, please use a modern browser.",
+                recommendations: ["Use Chrome, Firefox or Edge (latest version)", "Use Safari 13.4+ (on Mac/iOS)"],
+                critical: true
+            };
+        }
+        // Default for modern browsers
+        return {
+            title: "Browser compatibility issue",
+            message: "Your browser may not fully support this application.",
+            recommendations: [
+                "Update your browser to the latest version",
+                "Clear your browser cache and cookies",
+                "Disable browser extensions temporarily",
+                "Try a different modern browser"
+            ],
+            critical: false
+        };
+    },
+    /**
+     * Checks if the current browser is compatible with the application.
+     */
+    isBrowserCompatible: () => {
+        if (typeof window === "undefined")
+            return true;
+        const browser = Bowser.getParser(window.navigator.userAgent);
+        const browserName = browser.getBrowserName();
+        const browserVersion = parseFloat(browser.getBrowserVersion() || "0");
+        // Define minimum supported versions
+        const minVersions = {
+            "Internet Explorer": 0, // Not supported at all
+            Safari: 13.4,
+            Chrome: 80,
+            Firefox: 80,
+            Edge: 80,
+            Opera: 80
+        };
+        // Internet Explorer is never compatible
+        if (browserName === "Internet Explorer") {
+            return false;
+        }
+        // Check if browser version meets minimum requirements
+        const minVersion = minVersions[browserName];
+        if (minVersion && browserVersion < minVersion) {
+            return false;
+        }
+        // Check for critical modern features
+        return (Browser.checkFeatureSupport("optionalChaining", browserName, browserVersion) &&
+            Browser.checkFeatureSupport("nullishCoalescing", browserName, browserVersion) &&
+            Browser.checkFeatureSupport("fetch", browserName, browserVersion) &&
+            Browser.checkFeatureSupport("es6Modules", browserName, browserVersion) &&
+            Browser.checkFeatureSupport("asyncAwait", browserName, browserVersion));
+    },
+    /**
+     * Checks if the browser is Internet Explorer.
+     */
+    isInternetExplorer: () => {
+        if (typeof window === "undefined")
+            return false;
+        const browser = Bowser.getParser(window.navigator.userAgent);
+        return browser.getBrowserName() === "Internet Explorer";
+    },
+    /**
+     * Checks if the browser is iOS Safari.
+     */
+    isIOSSafari: () => {
+        if (typeof window === "undefined")
+            return false;
+        const browser = Bowser.getParser(window.navigator.userAgent);
+        return browser.getOSName() === "iOS" && browser.getBrowserName() === "Safari";
+    },
+    /**
+     * Checks if the browser is a legacy version that needs updating.
+     */
+    isLegacyBrowser: () => {
+        if (typeof window === "undefined")
+            return false;
+        const browser = Bowser.getParser(window.navigator.userAgent);
+        const browserName = browser.getBrowserName();
+        const browserVersion = parseFloat(browser.getBrowserVersion() || "0");
+        // Legacy browser thresholds
+        const legacyThresholds = {
+            "Internet Explorer": 0, // All versions are legacy
+            Safari: 13.4,
+            Chrome: 80,
+            Firefox: 80,
+            Edge: 80,
+            Opera: 80
+        };
+        const threshold = legacyThresholds[browserName];
+        return threshold ? browserVersion < threshold : false;
+    },
+    /**
+     * Checks if the browser is an old version of Safari.
+     */
+    isOldSafari: () => {
+        if (typeof window === "undefined")
+            return false;
+        const browser = Bowser.getParser(window.navigator.userAgent);
+        const browserName = browser.getBrowserName();
+        const browserVersion = parseFloat(browser.getBrowserVersion() || "0");
+        return browserName === "Safari" && browserVersion < 13.4;
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@koloseum/utils",
-	"version": "0.2.26",
+	"version": "0.2.27",
 	"author": "Koloseum Technologies Limited",
 	"type": "module",
 	"description": "Utility logic for use across Koloseum web apps (TypeScript)",
@@ -31,6 +31,7 @@
 	"dependencies": {
 		"@supabase/supabase-js": "^2.57.4",
 		"@sveltejs/kit": "^2.41.0",
+		"bowser": "^2.12.1",
 		"kenya-administrative-divisions": "^0.0.18",
 		"postgres-interval": "^4.0.2",
 		"sanitize-html": "^2.17.0",
@@ -38,7 +39,7 @@
 		"validator": "^13.15.15"
 	},
 	"devDependencies": {
-		"@koloseum/types": "^0.2.8",
+		"@koloseum/types": "^0.2.10",
 		"@playwright/test": "^1.55.0",
 		"@suprsend/web-components": "^0.4.0",
 		"@types/sanitize-html": "^2.16.0",