web-manager 4.3.2 → 4.3.4

package/src/index.js

@@ -0,0 +1,712 @@
+import Storage from './modules/storage.js';
+import Utilities from './modules/utilities.js';
+import * as domUtils from './modules/dom.js';
+import Analytics from './modules/analytics.js';
+import Auth from './modules/auth.js';
+import Bindings from './modules/bindings.js';
+import Firestore from './modules/firestore.js';
+import Notifications from './modules/notifications.js';
+import ServiceWorker from './modules/service-worker.js';
+import Sentry from './modules/sentry.js';
+import Usage from './modules/usage.js';
+
+class Manager {
+  constructor() {
+    // Configuration from init()
+    this.config = {};
+
+    // Runtime state
+    this.state = {
+      serviceWorker: null
+    };
+
+    // Auth settler: resolves when Firebase auth first determines user state
+    this._firebaseAuthInitialized = false;
+    this._authReadyResolve = null;
+    this._authReady = new Promise((resolve) => {
+      this._authReadyResolve = resolve;
+    });
+
+    // Initialize modules
+    this._storage = new Storage();
+    this._utilities = new Utilities(this);
+    this._analytics = new Analytics(this);
+    this._auth = new Auth(this);
+    this._bindings = new Bindings(this);
+    this._firestore = new Firestore(this);
+    this._notifications = new Notifications(this);
+    this._serviceWorker = new ServiceWorker(this);
+    this._sentry = new Sentry(this);
+    this._usage = new Usage(this);
+  }
+
+  // Module getters
+  storage() {
+    return this._storage;
+  }
+
+  auth() {
+    return this._auth;
+  }
+
+  bindings() {
+    return this._bindings;
+  }
+
+  firestore() {
+    return this._firestore;
+  }
+
+  notifications() {
+    return this._notifications;
+  }
+
+  serviceWorker() {
+    return this._serviceWorker;
+  }
+
+  sentry() {
+    return this._sentry;
+  }
+
+  usage() {
+    return this._usage;
+  }
+
+  analytics() {
+    return this._analytics;
+  }
+
+  // DOM utilities
+  dom() {
+    return domUtils;
+  }
+
+  utilities() {
+    return this._utilities;
+  }
+
+  // Initialize the manager
+  async initialize(configuration) {
+    try {
+      // Store configuration as-is
+      this.config = this._processConfiguration(configuration);
+
+      // Set platform and runtime on HTML element
+      this._setHtmlDataAttributes();
+
+      // Initialize Firebase if a config blob is present (presence-driven — matches BEM
+      // convention). Reads flat `firebaseConfig` (BEM/BXM/EM canonical shape) and falls
+      // back to nested `firebase.app.config` (UJM's current `_config.yml` shape).
+      // Once UJM migrates to the flat shape this fallback can be dropped.
+      if (this._resolveFirebaseConfig()) {
+        await this._initializeFirebase();
+      }
+
+      // Initialize Sentry if enabled
+      if (this.config.sentry?.enabled) {
+        await this._sentry.init(this.config.sentry.config);
+      }
+
+      // Initialize Analytics if ID and secret are provided
+      if (this.config.analytics?.google && this.config.analytics?.googleSecret) {
+        this._analytics.init({
+          id: this.config.analytics.google,
+          secret: this.config.analytics.googleSecret,
+        });
+      } else {
+        console.log('[Analytics] Skipped: missing analytics google ID or secret');
+      }
+
+      // Initialize service worker if enabled
+      if (this.config.serviceWorker?.enabled) {
+        this._serviceWorker.register({
+          path: this.config.serviceWorker?.config?.path
+        });
+      }
+
+      // Start version checking if enabled
+      if (this.config.refreshNewVersion?.enabled) {
+        this._startVersionCheck();
+      }
+
+      // Set up auth event listeners (uses event delegation, no need to wait for DOM)
+      this._auth.setupEventListeners();
+
+      // Set up push notifications
+      if (this.config.pushNotifications?.enabled) {
+        this._notifications.initialize(this.config.pushNotifications.config);
+      }
+
+      // Initialize Chatsy chat widget if enabled
+      if (this.config.chatsy?.enabled && this.config.chatsy?.config?.agentId) {
+        this._initializeChatsy();
+      }
+
+      // Old IE force polyfill
+      // await this._loadPolyfillsIfNeeded();
+
+      // Initialize usage tracking
+      await this._usage.initialize();
+
+      // Update bindings with config and usage data
+      this.bindings().update({
+        config: this.config,
+        usage: this._usage.getBindingData(),
+      });
+
+      return this;
+    } catch (error) {
+      console.error('Manager initialization error:', error);
+      throw error;
+    }
+  }
+
+  _processConfiguration(configuration) {
+    // Default configuration structure
+    const defaults = {
+      runtime: null, // Auto-detect if not provided (web, browser-extension, electron, node)
+      environment: 'production',
+      buildTime: Date.now(),
+      brand: {
+        id: 'brand',
+        name: 'Brand',
+        description: '',
+        type: 'Organization',
+        images: {
+          brandmark: '',
+          wordmark: '',
+          combomark: ''
+        },
+        contact: {
+          email: '',
+          phone: '',
+          'slapform-form-id': ''
+        },
+        address: {}
+      },
+      auth: {
+        enabled: true,
+        config: {
+          policy: null,
+          redirects: {
+            authenticated: '/account',
+            unauthenticated: '/signup'
+          }
+        }
+      },
+      firebase: {
+        app: {
+          enabled: true,
+          config: {}
+        },
+        appCheck: {
+          enabled: false,
+          config: {
+            siteKey: ''
+          }
+        }
+      },
+      cookieConsent: {
+        enabled: true,
+        config: {
+          palette: {
+            popup: {
+              background: '#237afc',
+              text: '#fff'
+            },
+            button: {
+              background: '#fff',
+              text: '#237afc'
+            }
+          },
+          theme: 'classic',
+          position: 'bottom-left',
+          // type: '',
+          // showLink: false,
+          content: {
+            message: 'We use cookies to ensure you get the best experience on our website. By continuing to use the site, you agree to our { terms }.',
+            dismiss: 'I Understand'
+          }
+        }
+      },
+      chatsy: {
+        enabled: false,
+        config: {
+          agentId: '',
+          settings: {
+            button: {
+              backgroundColor: '#237afc',
+              textColor: '#FFFFFF',
+              position: 'bottom-right',
+              type: 'round',
+              icon: 'default',
+            }
+          }
+        }
+      },
+      sentry: {
+        enabled: true,
+        config: {
+          dsn: '',
+          release: '',
+          replaysSessionSampleRate: 0.01,
+          replaysOnErrorSampleRate: 0.01
+        }
+      },
+      exitPopup: {
+        enabled: true,
+        config: {
+          timeout: 1000 * 60 * 60 * 4,
+          title: 'Want 15% off?',
+          message: 'Get 15% off your purchase of our Premium plans.',
+          okButton: {
+            text: 'Claim 15% Discount',
+            link: '/pricing'
+          }
+        }
+      },
+      lazyLoading: {
+        enabled: true,
+        config: {
+          selector: '[data-lazy]',
+          rootMargin: '50px 0px', // Start loading 50px before element comes into view
+          threshold: 0.01, // Trigger when 1% of element is visible
+          loadedClass: 'lazy-loaded',
+          loadingClass: 'lazy-loading',
+          errorClass: 'lazy-error'
+        }
+      },
+      socialSharing: {
+        enabled: false,
+        config: {
+          selector: '[data-social-share]',
+          defaultPlatforms: ['facebook', 'twitter', 'linkedin', 'pinterest', 'reddit', 'email', 'copy'],
+          buttonClass: '',
+          showLabels: false,
+          openInNewWindow: true,
+          windowWidth: 600,
+          windowHeight: 400,
+        }
+      },
+      pushNotifications: {
+        enabled: true,
+        config: {
+          autoRequest: 1000 * 60
+        }
+      },
+      env: {
+        FIREBASE_EMULATOR_CONNECT: false,
+      },
+      validRedirectHosts: [],
+      payment: {
+        processors: {},
+        products: [],
+      },
+
+      // Non-configurable defaults
+      refreshNewVersion: {
+        enabled: true,
+        config: {
+          interval: 1000 * 60 * 60, // Check every hour
+        }
+      },
+      serviceWorker: {
+        enabled: true,
+        config: {
+          path: '/service-worker.js'
+        }
+      },
+      analytics: {
+        google: '',
+        googleSecret: '',
+        meta: '',
+        tiktok: '',
+      },
+    };
+
+    // Deep merge configuration with defaults
+    const merged = this._deepMerge(defaults, configuration);
+
+    // Evaluate string expressions for timeout values
+    if (merged.exitPopup?.config?.timeout) {
+      merged.exitPopup.config.timeout = safeEvaluate(merged.exitPopup.config.timeout);
+    }
+
+    if (merged.pushNotifications?.config?.autoRequest) {
+      merged.pushNotifications.config.autoRequest = safeEvaluate(merged.pushNotifications.config.autoRequest);
+    }
+
+    if (merged.refreshNewVersion?.config?.interval) {
+      merged.refreshNewVersion.config.interval = safeEvaluate(merged.refreshNewVersion.config.interval);
+    }
+
+    // Calculate buildTimeISO from buildTime
+    if (merged.buildTime) {
+      merged.buildTimeISO = new Date(merged.buildTime).toISOString();
+    }
+
+    // Return merged configuration
+    return merged;
+  }
+
+  _deepMerge(target, source) {
+    const output = Object.assign({}, target);
+    if (isObject(target) && isObject(source)) {
+      Object.keys(source).forEach(key => {
+        if (isObject(source[key])) {
+          if (!(key in target))
+            Object.assign(output, { [key]: source[key] });
+          else
+            output[key] = this._deepMerge(target[key], source[key]);
+        } else {
+          Object.assign(output, { [key]: source[key] });
+        }
+      });
+    }
+    return output;
+
+    function isObject(item) {
+      return item && typeof item === 'object' && !Array.isArray(item);
+    }
+  }
+
+  _setHtmlDataAttributes() {
+    // Skip if not in browser environment
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const $html = document.documentElement;
+
+    // Set platform (OS) - windows, mac, linux, ios, android, chromeos, unknown
+    $html.dataset.platform = this._utilities.getPlatform();
+
+    // Set browser - chrome, firefox, safari, edge, opera, brave
+    $html.dataset.browser = this._utilities.getBrowser();
+
+    // Set runtime - web, browser-extension, electron, node
+    $html.dataset.runtime = this._utilities.getRuntime();
+
+    // Set device - mobile, tablet, desktop
+    $html.dataset.device = this._utilities.getDevice();
+  }
+
+  // Resolve the Firebase web SDK config blob. Flat `firebaseConfig` first (canonical
+  // shape — BEM/BXM/EM), then nested `firebase.app.config` (UJM legacy yaml shape).
+  // Returns the blob when it has at least one own key, otherwise null.
+  _resolveFirebaseConfig() {
+    const flat = this.config.firebaseConfig;
+    if (flat && typeof flat === 'object' && Object.keys(flat).length > 0) {
+      return flat;
+    }
+    const nested = this.config.firebase?.app?.config;
+    if (nested && typeof nested === 'object' && Object.keys(nested).length > 0) {
+      return nested;
+    }
+    return null;
+  }
+
+  async _initializeFirebase() {
+    const firebaseConfig = this._resolveFirebaseConfig();
+
+    // Dynamically import Firebase v12
+    const { initializeApp } = await import('firebase/app');
+    const { getAuth, onAuthStateChanged } = await import('firebase/auth');
+    const { initializeFirestore } = await import('firebase/firestore');
+    const { getMessaging } = await import('firebase/messaging');
+
+    // If we're in devmode, set the firebase config authDomain to the current host
+    // if (this.isDevelopment() && firebaseConfig) {
+    //   firebaseConfig.authDomain = window.location.hostname;
+    // }
+
+    // Initialize Firebase. Re-init guards: if there's already a [DEFAULT] app
+    // (live reload, re-init in tests), get the existing one rather than throwing
+    // `app/duplicate-app`.
+    const { getApp, getApps } = await import('firebase/app');
+    const app = getApps().length > 0 ? getApp() : initializeApp(firebaseConfig);
+
+    // Store Firebase references
+    this._firebaseApp = app;
+    this._firebaseAuth = getAuth(app);
+    this._firebaseFirestore = initializeFirestore(app, {});
+
+    // Only initialize messaging if service workers are supported
+    if ('serviceWorker' in navigator) {
+      this._firebaseMessaging = getMessaging(app);
+    } else {
+      console.warn('Service workers not available - Firebase Messaging disabled');
+      this._firebaseMessaging = null;
+    }
+
+    // Initialize Firebase App Check if enabled
+    if (this.config.firebase.appCheck?.enabled) {
+      const { initializeAppCheck, ReCaptchaEnterpriseProvider } = await import('firebase/app-check');
+      const siteKey = this.config.firebase.appCheck.config.siteKey;
+
+      if (siteKey) {
+        initializeAppCheck(app, {
+          provider: new ReCaptchaEnterpriseProvider(siteKey),
+          isTokenAutoRefreshEnabled: true
+        });
+      }
+    }
+
+    // Setup auth state listener
+    onAuthStateChanged(this._firebaseAuth, (user) => {
+      // Mark auth as initialized and resolve the settler promise on first callback
+      if (!this._firebaseAuthInitialized) {
+        this._firebaseAuthInitialized = true;
+        this._authReadyResolve();
+      }
+
+      // Let auth module handle everything including DOM updates
+      this._auth._handleAuthStateChange(user);
+
+      // Update Chatsy with current user
+      if (this._chatsy) {
+        const resolved = this._auth.getUser();
+        this._chatsy.setUser(resolved ? { id: resolved.uid, email: resolved.email, firstName: resolved.displayName, photoURL: resolved.photoURL } : null);
+      }
+    });
+  }
+
+  // Getters for Firebase services
+  get firebaseApp() { return this._firebaseApp; }
+  get firebaseAuth() { return this._firebaseAuth; }
+  get firebaseFirestore() { return this._firebaseFirestore; }
+  get firebaseMessaging() { return this._firebaseMessaging; }
+
+  isDevelopment() {
+    return this.config.environment === 'development';
+  }
+
+  getFunctionsUrl(environment) {
+    const env = environment || this.config.environment;
+    const projectId = this._resolveFirebaseConfig()?.projectId;
+
+    if (!projectId) {
+      throw new Error('Firebase project ID not configured');
+    }
+
+    if (env === 'development') {
+      return 'http://localhost:5001/' + projectId + '/us-central1';
+    }
+
+    return 'https://us-central1-' + projectId + '.cloudfunctions.net';
+  }
+
+  getApiUrl(environment, url) {
+    // Precedence: passed environment > query string > config.environment
+    const searchParams = new URLSearchParams(window.location.search);
+    const queryEnv = searchParams.get('_dev_apiEnvironment');
+    const env = environment
+      || queryEnv
+      || this.config.environment;
+
+    if (env === 'development') {
+      // BEM's `mgr serve` exposes the local API over HTTPS (mkcert proxy on 5002,
+      // since backend-manager 5.7.0) — plain http:// cannot connect to it.
+      return 'https://localhost:5002';
+    }
+
+    const apiDomain = this._resolveFirebaseConfig()?.authDomain; // Has to be this since some projects like Clockii use ITW Universal Auth
+    // const apiDomain = this.config.brand.url;
+    const baseUrl = url || (apiDomain ? `https://${apiDomain}` : window.location.origin);
+    const urlObj = new URL(baseUrl);
+
+    // Prepend 'api.' subdomain (universal-auth.itwcreativeworks.com -> api.universal-auth.itwcreativeworks.com)
+    urlObj.hostname = `api.${urlObj.hostname}`;
+
+    // Strip trailing slash
+    return urlObj.toString().replace(/\/$/, '');
+  }
+
+  isValidRedirectUrl(url) {
+    try {
+      const returnUrlObject = new URL(decodeURIComponent(url));
+      const currentUrlObject = new URL(window.location.href);
+
+      // Loopback returns (RFC 8252 §7.3) are valid while the SITE runs in development:
+      // native apps (Electron Manager) can't OS-register their custom scheme in dev, so
+      // their sign-in flow returns to an ephemeral 127.0.0.1 listener instead. Any port —
+      // the app binds it at flow start. Production sites never match this branch.
+      if (this.isDevelopment() && ['127.0.0.1', '[::1]', 'localhost'].includes(returnUrlObject.hostname)) {
+        return true;
+      }
+
+      return returnUrlObject.host === currentUrlObject.host
+        || returnUrlObject.protocol === this.config.brand?.id + ':'
+        || (this.config.validRedirectHosts || []).includes(returnUrlObject.host);
+    } catch (e) {
+      return false;
+    }
+  }
+
+  async _initializeChatsy() {
+    try {
+      const { default: Chatsy } = await import('chatsy');
+      const config = this.config.chatsy.config;
+
+      this._chatsy = new Chatsy(config.agentId, {
+        settings: config.settings,
+      });
+
+      console.log('[Chatsy] Initialized');
+    } catch (error) {
+      console.error('[Chatsy] Failed to initialize:', error);
+    }
+  }
+
+  _startVersionCheck() {
+    // Quit if window is not available
+    if (typeof window !== 'undefined') {
+      // Re-focus events
+      window.addEventListener('focus', () => {
+        this._checkVersion();
+      });
+
+      window.addEventListener('online', () => {
+        this._checkVersion();
+      });
+    }
+
+    // Set up interval
+    this._versionCheckInterval = setInterval(() => {
+      this._checkVersion();
+    }, this.config.refreshNewVersion.config.interval);
+  }
+
+
+  // async _loadPolyfillsIfNeeded() {
+  //   // Check if polyfills are needed by testing for ES6 features
+  //   const featuresPass = (
+  //     typeof Symbol !== 'undefined'
+  //   );
+
+  //   // If all features are supported, no polyfills needed
+  //   if (featuresPass) {
+  //     return;
+  //   }
+
+  //   // Load polyfills for older browsers (especially IE)
+  //   try {
+  //     await domUtils.loadScript({
+  //       src: 'https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?flags=always%2Cgated&features=default%2Ces5%2Ces6%2Ces7%2CPromise.prototype.finally%2C%7Ehtml5-elements%2ClocalStorage%2Cfetch%2CURLSearchParams',
+  //       crossorigin: 'anonymous'
+  //     });
+  //     console.log('Polyfills loaded for older browser');
+  //   } catch (error) {
+  //     console.error('Failed to load polyfills:', error);
+  //     // Continue initialization even if polyfills fail to load
+  //   }
+  // }
+
+  async _checkVersion() {
+    if (this.isDevelopment()) {
+      /* @dev-only:start */
+      {
+        console.log('[Version] Skipping version check in development mode');
+      }
+      /* @dev-only:end */
+      return;
+    }
+
+    try {
+      // Try new path first, then fallback to legacy path
+      const paths = ['/build.json', '/@output/build/build.json'];
+      let data = null;
+      let response = null;
+
+      for (const path of paths) {
+        try {
+          response = await fetch(`${path}?cb=${Date.now()}`);
+          if (response.ok) {
+            data = await response.json();
+            break;
+          }
+        } catch (e) {
+          // Continue to next path
+        }
+      }
+
+      if (!data) {
+        throw new Error('Failed to fetch build.json from any path');
+      }
+
+      // Extract timestamp - support both new format (data.timestamp) and legacy format (data['npm-build'].timestamp)
+      let buildTimeLive;
+      if (data.timestamp) {
+        buildTimeLive = new Date(data.timestamp);
+      } else if (data?.['npm-build']?.timestamp) {
+        buildTimeLive = new Date(data['npm-build'].timestamp);
+      } else {
+        throw new Error('No timestamp found in build.json');
+      }
+
+      const buildTimeCurrent = new Date(this.config.buildTime);
+
+      // Add 1 hour to current build time to account for npm build process
+      buildTimeCurrent.setHours(buildTimeCurrent.getHours() + 1);
+
+      // Log version info
+      console.log(`[Version] Current build time: ${buildTimeCurrent.toISOString()}, Live build time: ${buildTimeLive.toISOString()}`);
+
+      // If live version is newer, reload the page
+      if (buildTimeCurrent >= buildTimeLive) {
+        return; // No update needed
+      }
+
+      // New version detected
+      console.log('[Version] New version detected, reloading page...');
+
+      // If running in a non-browser environment, warn and return
+      if (typeof window === 'undefined') {
+        console.warn('[Version] Cannot reload in non-browser environment');
+        return;
+      }
+
+      // Force page reload
+      window.onbeforeunload = function () {
+        return undefined;
+      };
+
+      window.location.reload(true);
+    } catch (error) {
+      console.warn('[Version] Failed version check:', error);
+    }
+  }
+}
+
+// Safely evaluate timeout string expressions
+const safeEvaluate = (str) => {
+  if (typeof str !== 'string') return str;
+
+  // Only allow numbers, *, +, -, /, parentheses, and whitespace
+  if (!/^[\d\s\*\+\-\/\(\)]+$/.test(str)) {
+    console.warn('Invalid expression format:', str);
+    return str;
+  }
+
+  try {
+    // Use Function constructor instead of eval for safer evaluation
+    return new Function('return ' + str)();
+  } catch (e) {
+    console.warn('Failed to evaluate expression:', str, e);
+    return str;
+  }
+};
+
+// Create singleton instance
+const manager = new Manager();
+
+// Export for different environments
+export default manager;
+export { Manager };
+
+// For non-ES6 environments
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = manager;
+}
+