@koloseum/utils 0.2.28 → 0.3.0

package/dist/client.js

@@ -0,0 +1,680 @@
+import { Config } from "./platform.js";
+import Bowser from "bowser";
+/* BROWSER HELPERS */
+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;
+    }
+};
+/* ACCESS HELPERS */
+export const Access = {
+    /**
+     * Get the current role of the user.
+     * @param user - The user object
+     * @param type - The type of role to get, i.e. "backroom" or "lounges"
+     * @returns The current role of the user.
+     */
+    getCurrentRole: (user, type) => {
+        // Return null if no user is provided
+        if (!user)
+            return null;
+        // Get the role from the user's app metadata
+        const role = user.app_metadata.roles.find((role) => role.startsWith(type + "_")).split("_")[1];
+        // Check for Superuser
+        if (role === "superuser")
+            return {
+                name: "Superuser",
+                slug: "superuser",
+                superuser: true
+            };
+        // Define roles and slugs array
+        const roles = (type === "backroom" ? Config.microservices.backroom : Config.microservices.lounges)
+            .map(({ roles }) => roles)
+            .flat();
+        let slugs;
+        // Check if the user's role is a top-level microservice role
+        const topLevelRoles = roles
+            .filter((role) => role !== null && "root" in role && !("superuser" in role) && role.root === true)
+            .filter((role) => role !== null);
+        slugs = topLevelRoles.map((role) => role.slug);
+        if (slugs.includes(role))
+            return topLevelRoles.find(({ slug }) => slug === role);
+        // Check if the user's role is a sub-role of a microservice
+        const subRoles = roles.filter((role) => role !== null && !("root" in role)).filter((role) => role !== null);
+        slugs = subRoles.map((role) => role.slug);
+        if (slugs.includes(role))
+            return subRoles.find(({ slug }) => slug === role);
+        // Return null
+        return null;
+    },
+    /**
+     * Get a microservice feature by slug.
+     * @param featureSlug - The slug of the feature to get.
+     * @param type - The type of microservice to get the feature for, i.e. "backroom" or "lounges"
+     * @returns The feature object or `null` if the feature does not exist.
+     */
+    getMicroserviceFeature: (featureSlug, type) => (type === "backroom" ? Config.microservices.backroom : Config.microservices.lounges)
+        .flatMap(({ features }) => features)
+        .find(({ slug }) => slug === featureSlug) ?? null,
+    /**
+     * Get the microservices that a role has access to.
+     * @param role - The role to check.
+     * @param type - The type of microservice to get the features for, i.e. "backroom" or "lounges"
+     * @returns The microservices that the role has access to.
+     */
+    getMicroservicesForRole: (role, type) => (type === "backroom" ? Config.microservices.backroom : Config.microservices.lounges)
+        .filter(({ slug }) => slug !== "account")
+        .filter(({ features, roles }) => {
+        // Superusers have access to everything
+        if ("superuser" in role && role.superuser === true)
+            return true;
+        // Check if the user's role is a root role for this microservice
+        if (roles?.some((r) => "root" in r && r.root === true && r.slug === role.slug))
+            return true;
+        // Check if the user's role has access to any features in this microservice
+        return features.some((feature) => Access.roleHasAccessToFeature(role, feature, type));
+    }),
+    /**
+     * Renders the microservice features for the current user.
+     * @param user - The user to render the features for.
+     * @returns The microservice features for the current user, or `null` if no user is provided.
+     */
+    renderMicroserviceFeatures: (user) => {
+        // Return null if no user is provided
+        if (!user)
+            return null;
+        // Initialise variables
+        let features = Config.microservices.players.filter(({ slug }) => slug === "account").flatMap(({ features }) => features);
+        let loungesCount = 0;
+        let backroomCount = 0;
+        // Count number of Lounges and Backroom roles
+        for (const role of user.app_metadata.roles) {
+            if (role.startsWith("lounges_"))
+                loungesCount++;
+            if (role.startsWith("backroom_"))
+                backroomCount++;
+        }
+        // Filter features based on roles
+        if (loungesCount === 0)
+            features = features.filter(({ slug }) => slug !== "lounges");
+        if (backroomCount === 0)
+            features = features.filter(({ slug }) => slug !== "backroom");
+        // Return filtered features
+        return features;
+    },
+    /**
+     * Check if a role has access to a microservice's feature.
+     * @param role - The role to check.
+     * @param feature - The feature to check.
+     * @param type - The type of microservice to check the feature for, i.e. "backroom" or "lounges"
+     * @returns `true` if the role has access to the feature, `false` otherwise.
+     */
+    roleHasAccessToFeature: (role, feature, type) => {
+        // Return false if no role or feature is provided
+        if (!role || !feature)
+            return false;
+        // Return true if the role is superuser
+        if ("superuser" in role && role.superuser === true)
+            return true;
+        /* LOUNGES */
+        if (type === "lounges") {
+            // Branches
+            const { features: branchesFeatures, roles: branchesRoles } = Config.microservices.lounges.find(({ slug }) => slug === "branches");
+            if (branchesFeatures.some((f) => f.slug === feature.slug) && branchesRoles.some((r) => r.slug === role.slug)) {
+                if ("root" in role && role.root === true)
+                    return true;
+                if ("featureSlugs" in role)
+                    return role.featureSlugs.includes(feature.slug);
+            }
+            // Staff
+            const { features: staffFeatures, roles: staffRoles } = Config.microservices.lounges.find(({ slug }) => slug === "staff");
+            if (staffFeatures.some((f) => f.slug === feature.slug) && staffRoles.some((r) => r.slug === role.slug)) {
+                if ("root" in role && role.root === true)
+                    return true;
+                if ("featureSlugs" in role)
+                    return role.featureSlugs.includes(feature.slug);
+            }
+        }
+        /* BACKROOM */
+        if (type === "backroom") {
+            // Compliance
+            const { features: complianceFeatures, roles: complianceRoles } = Config.microservices.backroom.find(({ slug }) => slug === "compliance");
+            if (complianceFeatures.some((f) => f.slug === feature.slug) && complianceRoles.some((r) => r.slug === role.slug)) {
+                if ("root" in role && role.root === true)
+                    return true;
+                if ("featureSlugs" in role)
+                    return role.featureSlugs.includes(feature.slug);
+            }
+            // Commerce
+            const { features: commerceFeatures, roles: commerceRoles } = Config.microservices.backroom.find(({ slug }) => slug === "commerce");
+            if (commerceFeatures.some((f) => f.slug === feature.slug) && commerceRoles.some((r) => r.slug === role.slug)) {
+                if ("root" in role && role.root === true)
+                    return true;
+                if ("featureSlugs" in role)
+                    return role.featureSlugs.includes(feature.slug);
+            }
+            // Staff
+            const { features: staffFeatures, roles: staffRoles } = Config.microservices.backroom.find(({ slug }) => slug === "staff");
+            if (staffFeatures.some((f) => f.slug === feature.slug) && staffRoles.some((r) => r.slug === role.slug)) {
+                if ("root" in role && role.root === true)
+                    return true;
+                if ("featureSlugs" in role)
+                    return role.featureSlugs.includes(feature.slug);
+            }
+        }
+        // Return false
+        return false;
+    }
+};
+/* INTERFACE HELPERS */
+export const Interface = {
+    /**
+     * Returns the URL for a menu item based on the slug.
+     * @param {string} base - The base URL
+     * @param {string} slug - The slug of the menu item
+     * @returns {string} The URL for the menu item
+     */
+    getMenuItemUrl: (base, slug) => {
+        // Validate base URL
+        if (typeof base !== "string")
+            return "";
+        // Format base URL
+        if (base === "/")
+            base = "";
+        if (base.charAt(base.length - 1) === "/")
+            base = base.slice(0, -1);
+        // Return URL
+        return `${base}${slug === "/" ? slug : typeof slug === "string" ? `/${slug}` : ""}`;
+    },
+    /**
+     * Generate a SuprSend notification inbox configuration object for a user.
+     * @param {string} userId - The user ID to generate the configuration for.
+     * @param {string} publicApiKey - The public API key to use for SuprSend.
+     * @returns The SuprSend notification inbox configuration object.
+     */
+    getSuprSendInboxConfig: (userId, publicApiKey) => ({
+        distinctId: userId,
+        publicApiKey,
+        inbox: {
+            stores: [
+                { storeId: "all", label: "Inbox", query: { archived: false } },
+                { storeId: "archived", label: "Archived", query: { archived: true } }
+            ],
+            theme: {
+                bell: {
+                    color: "var(--color-accent)"
+                },
+                badge: {
+                    backgroundColor: "var(--color-primary)",
+                    color: "var(--color-primary-content)"
+                },
+                header: {
+                    container: {
+                        backgroundColor: "var(--color-base-100)",
+                        borderColor: "var(--color-base-200)"
+                    },
+                    headerText: {
+                        color: "var(--color-neutral)"
+                    },
+                    markAllReadText: {
+                        color: "var(--color-accent)"
+                    }
+                },
+                tabs: {
+                    color: "var(--color-primary)",
+                    unselectedColor: "var(--color-accent)",
+                    bottomColor: "var(--color-primary)",
+                    badgeColor: "var(--color-base-200)",
+                    badgeText: "var(--color-accent)"
+                },
+                notificationsContainer: {
+                    container: {
+                        backgroundColor: "var(--color-base-100)",
+                        borderColor: "var(--color-base-200)",
+                        height: "75vh",
+                        marginTop: "0.75rem"
+                    },
+                    noNotificationsText: {
+                        color: "var(--color-warning)"
+                    },
+                    noNotificationsSubtext: {
+                        color: "var(--color-neutral)"
+                    },
+                    loader: {
+                        color: "var(--color-primary)"
+                    }
+                },
+                notification: {
+                    container: {
+                        borderColor: "var(--color-base-200)",
+                        readBackgroundColor: "var(--color-base-100)",
+                        unreadBackgroundColor: "var(--color-base-150)",
+                        hoverBackgroundColor: "var(--color-base-200)"
+                    },
+                    headerText: {
+                        color: "var(--color-secondary)"
+                    },
+                    bodyText: {
+                        color: "var(--color-neutral)",
+                        linkColor: "var(--color-secondary)"
+                    },
+                    unseenDot: {
+                        backgroundColor: "var(--color-warning)"
+                    },
+                    createdOnText: {
+                        color: "var(--color-accent)"
+                    },
+                    subtext: {
+                        color: "var(--color-neutral)"
+                    },
+                    expiresText: {
+                        color: "var(--color-warning)",
+                        expiringBackgroundColor: "var(--color-warning)",
+                        expiringColor: "var(--color-neutral)"
+                    },
+                    actions: [
+                        {
+                            text: {
+                                color: "var(--color-primary-content)"
+                            },
+                            container: {
+                                backgroundColor: "var(--color-primary)",
+                                hoverBackgroundColor: "var(--color-secondary)",
+                                border: "unset"
+                            }
+                        },
+                        {
+                            text: {
+                                color: "var(--color-primary-content)"
+                            },
+                            container: {
+                                backgroundColor: "var(--color-primary)",
+                                hoverBackgroundColor: "var(--color-secondary)",
+                                border: "unset"
+                            }
+                        }
+                    ],
+                    actionsMenuIcon: {
+                        hoverBackgroundColor: "var(--color-base-200)",
+                        color: "var(--color-neutral)"
+                    },
+                    actionsMenu: {
+                        backgroundColor: "var(--color-base-100)",
+                        borderColor: "var(--color-base-200)"
+                    },
+                    actionsMenuItem: {
+                        hoverBackgroundColor: "var(--color-base-200)"
+                    },
+                    actionsMenuItemIcon: {
+                        color: "var(--color-accent)"
+                    },
+                    actionsMenuItemText: {
+                        color: "var(--color-neutral)"
+                    }
+                }
+            }
+        },
+        toast: {
+            theme: {
+                container: {
+                    backgroundColor: "var(--color-base-100)",
+                    borderColor: "var(--color-base-200)"
+                },
+                headerText: {
+                    color: "var(--color-primary)"
+                },
+                bodyText: {
+                    color: "var(--color-neutral)"
+                }
+            }
+        }
+    }),
+    /**
+     * Handles the click event for pronouns checkboxes.
+     * @param {MouseEvent} e - The click event
+     * @param {PronounsCheckboxes} checkboxes - The pronouns checkboxes
+     */
+    handlePronounsCheckboxClick: (e, checkboxes) => {
+        const target = e.target;
+        if (target.value === "none") {
+            for (let checkbox of Object.values(checkboxes))
+                if (checkbox && checkbox !== target && checkbox.checked) {
+                    e.preventDefault();
+                    return;
+                }
+            for (let checkbox of Object.values(checkboxes))
+                if (checkbox && checkbox !== target) {
+                    checkbox.checked = false;
+                    checkbox.disabled = !checkbox.disabled;
+                }
+        }
+        else {
+            if (checkboxes.none?.checked) {
+                e.preventDefault();
+                return;
+            }
+            if (target.value === "male" || target.value === "female") {
+                const oppositeIndex = target.value === "male" ? "female" : "male";
+                const oppositeCheckbox = checkboxes[oppositeIndex];
+                if (oppositeCheckbox?.checked) {
+                    e.preventDefault();
+                    return;
+                }
+                if (oppositeCheckbox) {
+                    oppositeCheckbox.checked = false;
+                    oppositeCheckbox.disabled = !oppositeCheckbox.disabled;
+                }
+                if (checkboxes.none) {
+                    checkboxes.none.checked = false;
+                    if (!checkboxes.neutral?.checked)
+                        checkboxes.none.disabled = !checkboxes.none.disabled;
+                }
+            }
+            else {
+                if (checkboxes.none) {
+                    checkboxes.none.checked = false;
+                    if (checkboxes.neutral && !checkboxes.male?.checked && !checkboxes.female?.checked)
+                        checkboxes.none.disabled = checkboxes.neutral.checked;
+                }
+            }
+        }
+    },
+    /**
+     * Check if a page is active based on the slug and microservice.
+     * @param page - The current page object.
+     * @param slug - The slug of the page to check.
+     * @param microservice - The microservice to check against.
+     * @param base - The base path of the application; defaults to an empty string.
+     * @returns `true` if the page is active, `false` otherwise.
+     */
+    pageIsActive: (page, slug, microservice, base = "") => {
+        // Return true if microservice is provided and matches slug
+        if (microservice)
+            return slug === microservice;
+        // Remove trailing slash from base for consistency
+        const cleanBase = base.replace(/\/$/, "");
+        // Match exactly the base path if slug is falsy (i.e. root microservice feature)
+        if (!slug)
+            return page.url.pathname === cleanBase || page.url.pathname === `${cleanBase}/`;
+        // Match exact or subpath otherwise
+        const target = `${cleanBase}/${slug}`;
+        return page.url.pathname === target || page.url.pathname.startsWith(`${target}/`);
+    }
+};