@propbinder/mobile-design 0.0.1 → 0.0.2

package/src/services/whitelabel.service.ts

@@ -0,0 +1,171 @@
+import { Injectable, signal, effect } from '@angular/core';
+
+export interface WhitelabelConfig {
+  // Logo assets
+  logoUrl: string;           // Full logo for header (typically horizontal)
+  logoMarkUrl: string;       // Compact logo mark for avatars/badges
+  logoAlt: string;           // Alt text for accessibility
+  
+  // Logo dimensions (optional, for optimization)
+  logoWidth?: number;
+  logoHeight?: number;
+  logoMarkWidth?: number;
+  logoMarkHeight?: number;
+  
+  // Brand colors - these will update CSS custom properties
+  primaryColor: string;      // Maps to --color-background-brand
+  secondaryColor: string;    // Maps to --color-brand-secondary
+  
+  // Organization info
+  organizationName: string;
+  organizationId: string;
+}
+
+const DEFAULT_CONFIG: WhitelabelConfig = {
+  logoUrl: '/assets/logos/propbinder-logo.svg',
+  logoMarkUrl: '/assets/logos/propbinder-logomark.svg',
+  logoAlt: 'Propbinder',
+  primaryColor: '#6B5FF5',       // Propbinder brand purple (--color-background-brand)
+  secondaryColor: '#221a4c',     // Propbinder dark purple for headers (--color-brand-secondary)
+  organizationName: 'Propbinder',
+  organizationId: 'default'
+};
+
+/**
+ * WhitelabelService
+ * 
+ * Manages whitelabel configuration including logos and brand colors.
+ * Automatically updates CSS custom properties when colors change.
+ * 
+ * @example
+ * Initialize with custom config:
+ * ```typescript
+ * whitelabelService.initialize({
+ *   logoUrl: '/assets/logos/acme-logo.svg',
+ *   logoMarkUrl: '/assets/logos/acme-mark.svg',
+ *   primaryColor: '#2563eb',
+ *   secondaryColor: '#3b82f6',
+ *   organizationName: 'Acme Corp'
+ * });
+ * ```
+ * 
+ * Load from API:
+ * ```typescript
+ * await whitelabelService.loadFromApi('acme-corp');
+ * ```
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class WhitelabelService {
+  private _config = signal<WhitelabelConfig>(DEFAULT_CONFIG);
+  
+  // Readonly getters for accessing config values
+  readonly logoUrl = () => this._config().logoUrl;
+  readonly logoMarkUrl = () => this._config().logoMarkUrl;
+  readonly logoAlt = () => this._config().logoAlt;
+  readonly primaryColor = () => this._config().primaryColor;
+  readonly secondaryColor = () => this._config().secondaryColor;
+  readonly organizationName = () => this._config().organizationName;
+  readonly organizationId = () => this._config().organizationId;
+  
+  // Full config accessor
+  readonly config = this._config.asReadonly();
+  
+  constructor() {
+    // Apply default colors on initialization
+    this.applyColors(DEFAULT_CONFIG.primaryColor, DEFAULT_CONFIG.secondaryColor);
+    
+    // Watch for config changes and update CSS custom properties
+    effect(() => {
+      const config = this._config();
+      this.applyColors(config.primaryColor, config.secondaryColor);
+    });
+  }
+  
+  /**
+   * Initialize whitelabel configuration
+   * Call this early in app initialization (app.config.ts or app.component.ts)
+   */
+  initialize(config: Partial<WhitelabelConfig>) {
+    this._config.update(current => ({
+      ...current,
+      ...config
+    }));
+  }
+  
+  /**
+   * Load whitelabel config from API
+   * Typically called on app startup based on subdomain, user tenant, etc.
+   * 
+   * @param organizationId - The organization identifier (subdomain, tenant ID, etc.)
+   */
+  async loadFromApi(organizationId?: string): Promise<void> {
+    try {
+      // Example API call structure
+      // const response = await fetch(`/api/whitelabel/${organizationId || 'default'}`);
+      // const config = await response.json();
+      // this.initialize(config);
+      
+      console.log('Loading whitelabel config from API for:', organizationId);
+      
+      // Example: Different configs for different organizations
+      if (organizationId === 'demo-client') {
+        this.initialize({
+          logoUrl: '/assets/logos/demo-logo.svg',
+          logoMarkUrl: '/assets/logos/demo-mark.svg',
+          logoAlt: 'Demo Client',
+          primaryColor: '#2563eb',    // Blue
+          secondaryColor: '#3b82f6',  // Lighter blue
+          organizationName: 'Demo Client',
+          organizationId: 'demo-client'
+        });
+      }
+      // Add more organization-specific configs as needed
+      
+    } catch (error) {
+      console.error('Failed to load whitelabel config:', error);
+      // Fallback to defaults already set
+    }
+  }
+  
+  /**
+   * Update config dynamically (e.g., when user switches organizations)
+   */
+  updateConfig(updates: Partial<WhitelabelConfig>) {
+    this.initialize(updates);
+  }
+  
+  /**
+   * Update only the brand colors
+   */
+  updateColors(primaryColor: string, secondaryColor: string) {
+    this._config.update(current => ({
+      ...current,
+      primaryColor,
+      secondaryColor
+    }));
+  }
+  
+  /**
+   * Reset to default configuration
+   */
+  resetToDefault() {
+    this._config.set(DEFAULT_CONFIG);
+  }
+  
+  /**
+   * Apply colors to CSS custom properties
+   * This updates the actual CSS variables used throughout the app
+   */
+  private applyColors(primaryColor: string, secondaryColor: string) {
+    if (typeof document !== 'undefined') {
+      const root = document.documentElement;
+      root.style.setProperty('--color-background-brand', primaryColor);
+      root.style.setProperty('--color-brand-secondary', secondaryColor);
+      
+      console.log('Applied whitelabel colors:', { primaryColor, secondaryColor });
+    }
+  }
+}
+