@cshah18/sdk 1.0.0

package/dist/cobuy-sdk.umd.js

@@ -0,0 +1,1231 @@
+var CoBuySDK = (function () {
+    'use strict';
+
+    /**
+     * Thrown when the SDK is used before initialization
+     */
+    class CoBuyNotInitializedError extends Error {
+        constructor() {
+            super("CoBuy SDK has not been initialized. Call CoBuy.init(options) first.");
+            this.name = "CoBuyNotInitializedError";
+            Object.setPrototypeOf(this, CoBuyNotInitializedError.prototype);
+        }
+    }
+    /**
+     * Thrown when invalid configuration is provided
+     */
+    class CoBuyInvalidConfigError extends Error {
+        constructor(message) {
+            super(`Invalid CoBuy configuration: ${message}`);
+            this.name = "CoBuyInvalidConfigError";
+            Object.setPrototypeOf(this, CoBuyInvalidConfigError.prototype);
+        }
+    }
+
+    /**
+     * Manages SDK configuration with validation and defaults
+     */
+    class ConfigManager {
+        constructor() {
+            this.config = null;
+        }
+        /**
+         * Set and validate SDK configuration
+         */
+        setConfig(options) {
+            // Validate merchantKey
+            if (!options.merchantKey || typeof options.merchantKey !== "string") {
+                throw new CoBuyInvalidConfigError("merchantKey is required and must be a string");
+            }
+            // Set environment with default
+            const env = options.env || "production";
+            // Set API base URL based on environment (computed internally)
+            const apiBaseUrl = ConfigManager.DEFAULT_API_URLS[env];
+            // Theme configuration
+            const theme = options.theme || {};
+            // Debug flag
+            const debug = options.debug || false;
+            // Create and store internal config
+            this.config = {
+                merchantKey: options.merchantKey,
+                env,
+                apiBaseUrl,
+                theme,
+                debug,
+                events: options.events,
+            };
+            return this.config;
+        }
+        /**
+         * Get current configuration
+         * @throws CoBuyNotInitializedError if SDK has not been initialized
+         */
+        getConfig() {
+            if (!this.config) {
+                throw new Error("CoBuy SDK has not been initialized. Call CoBuy.init(options) first.");
+            }
+            return this.config;
+        }
+        /**
+         * Check if SDK has been initialized
+         */
+        isInitialized() {
+            return this.config !== null;
+        }
+    }
+    /**
+     * Default API base URLs for each environment
+     */
+    ConfigManager.DEFAULT_API_URLS = {
+        production: "https://api.cobuyza.co.za/api",
+        local: "http://localhost:9000/api",
+    };
+
+    /**
+     * Logger utility for CoBuy SDK with optional debug mode
+     */
+    class Logger {
+        constructor(debug = false) {
+            this.debugEnabled = debug;
+        }
+        /**
+         * Log info level messages (only shown in debug mode)
+         */
+        info(message, ...args) {
+            if (this.debugEnabled) {
+                console.log(`${Logger.PREFIX} ${message}`, ...args);
+            }
+        }
+        /**
+         * Log debug level messages (only shown in debug mode)
+         */
+        debug(message, ...args) {
+            if (this.debugEnabled) {
+                console.debug(`${Logger.PREFIX} ${message}`, ...args);
+            }
+        }
+        /**
+         * Log warning level messages
+         */
+        warn(message, ...args) {
+            console.warn(`${Logger.PREFIX} ${message}`, ...args);
+        }
+        /**
+         * Log error level messages
+         */
+        error(message, ...args) {
+            console.error(`${Logger.PREFIX} ${message}`, ...args);
+        }
+        /**
+         * Update debug flag
+         */
+        setDebug(debug) {
+            this.debugEnabled = debug;
+        }
+    }
+    Logger.PREFIX = "[CoBuy]";
+
+    /**
+     * API endpoint paths
+     *
+     * NOTE: These endpoints are planned for future implementation in the CoBuy backend.
+     * The SDK is structured to integrate with these endpoints once they become available.
+     * Until then, API calls to these endpoints will fail gracefully without crashing the application.
+     *
+     * Expected backend implementation timeline: TBD
+     */
+    const API_ENDPOINTS = {
+        // Product endpoints (Active)
+        PRODUCT_DETAILS: "/v1/products/:productId",
+        PRODUCT_AVAILABILITY: "/v1/products/:productId/availability",
+        PRODUCT_REWARD: "/v1/sdk/products/:productId/reward", // ✅ Implemented
+        // Group endpoints (Future implementation)
+        GROUP_CREATE: "/v1/groups",
+        GROUP_JOIN: "/v1/groups/:groupId/join",
+        GROUP_DETAILS: "/v1/groups/:groupId",
+        GROUP_MEMBERS: "/v1/groups/:groupId/members",
+        // Checkout endpoints (Future implementation)
+        CHECKOUT_INIT: "/v1/checkout/init",
+        CHECKOUT_STATUS: "/v1/checkout/:checkoutId/status",
+        // Widget endpoints (Future implementation - reserved for modal/group lobby features)
+        // WIDGET_CONFIG: Controls display settings, group rules, feature flags, and theming
+        // Will be activated when implementing modal group lobby, social sharing, and advanced customization
+        WIDGET_CONFIG: "/v1/widget/config",
+        WIDGET_ANALYTICS: "/v1/widget/analytics", // ✅ Implemented
+    };
+    /**
+     * Build full API URL from base URL and endpoint path
+     */
+    function buildApiUrl(baseUrl, endpoint, params) {
+        let url = endpoint;
+        // Replace path parameters
+        if (params) {
+            Object.entries(params).forEach(([key, value]) => {
+                url = url.replace(`:${key}`, encodeURIComponent(value));
+            });
+        }
+        return `${baseUrl}${url}`;
+    }
+
+    /**
+     * Default theme values for the CoBuy widget
+     * These provide a consistent baseline if merchants don't specify custom colors
+     */
+    const DEFAULT_THEME = {
+        primaryColor: "#4f46e5", // Indigo-600
+        secondaryColor: "#6366f1", // Indigo-500
+        textColor: "#111827", // Gray-900
+        borderRadius: "8px",
+        fontFamily: "Inter, system-ui, -apple-system, sans-serif",
+        animationSpeed: "normal",
+        animationStyle: "subtle",
+    };
+    /**
+     * Animation duration mappings (in milliseconds)
+     */
+    const ANIMATION_DURATIONS = {
+        none: 0,
+        fast: 150,
+        normal: 300,
+        slow: 500,
+    };
+    /**
+     * Animation easing and transform mappings
+     */
+    const ANIMATION_STYLES = {
+        none: { easing: "linear", transform: "translateY(0)" },
+        subtle: { easing: "ease-out", transform: "translateY(0)" }, // Fade only
+        smooth: { easing: "ease-out", transform: "translateY(8px)" }, // Fade + slide
+        bouncy: { easing: "cubic-bezier(0.68, -0.55, 0.265, 1.55)", transform: "translateY(12px)" }, // Spring
+    };
+    /**
+     * Merge global theme with optional widget-specific overrides
+     * Priority: widgetTheme > globalTheme > defaults
+     */
+    function mergeTheme(globalTheme = {}, widgetTheme = {}) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        return {
+            primaryColor: (_b = (_a = widgetTheme.primaryColor) !== null && _a !== void 0 ? _a : globalTheme.primaryColor) !== null && _b !== void 0 ? _b : DEFAULT_THEME.primaryColor,
+            secondaryColor: (_d = (_c = widgetTheme.secondaryColor) !== null && _c !== void 0 ? _c : globalTheme.secondaryColor) !== null && _d !== void 0 ? _d : DEFAULT_THEME.secondaryColor,
+            textColor: (_f = (_e = widgetTheme.textColor) !== null && _e !== void 0 ? _e : globalTheme.textColor) !== null && _f !== void 0 ? _f : DEFAULT_THEME.textColor,
+            borderRadius: (_h = (_g = widgetTheme.borderRadius) !== null && _g !== void 0 ? _g : globalTheme.borderRadius) !== null && _h !== void 0 ? _h : DEFAULT_THEME.borderRadius,
+            fontFamily: (_k = (_j = widgetTheme.fontFamily) !== null && _j !== void 0 ? _j : globalTheme.fontFamily) !== null && _k !== void 0 ? _k : DEFAULT_THEME.fontFamily,
+            animationSpeed: (_m = (_l = widgetTheme.animationSpeed) !== null && _l !== void 0 ? _l : globalTheme.animationSpeed) !== null && _m !== void 0 ? _m : DEFAULT_THEME.animationSpeed,
+            animationStyle: (_p = (_o = widgetTheme.animationStyle) !== null && _o !== void 0 ? _o : globalTheme.animationStyle) !== null && _p !== void 0 ? _p : DEFAULT_THEME.animationStyle,
+        };
+    }
+    /**
+     * Apply theme to widget container using scoped CSS custom properties
+     * This approach ensures:
+     * 1. Styles are isolated to this widget instance
+     * 2. No conflicts with merchant's global styles
+     * 3. Easy runtime theme updates
+     * 4. Browser handles invalid values gracefully
+     */
+    function applyTheme(container, theme) {
+        // Apply color and style CSS variables
+        container.style.setProperty("--cobuy-primary-color", theme.primaryColor);
+        container.style.setProperty("--cobuy-secondary-color", theme.secondaryColor);
+        container.style.setProperty("--cobuy-text-color", theme.textColor);
+        container.style.setProperty("--cobuy-border-radius", theme.borderRadius);
+        container.style.setProperty("--cobuy-font-family", theme.fontFamily);
+        // Apply animation CSS variables
+        const duration = ANIMATION_DURATIONS[theme.animationSpeed];
+        const style = ANIMATION_STYLES[theme.animationStyle];
+        container.style.setProperty("--cobuy-animation-duration", `${duration}ms`);
+        container.style.setProperty("--cobuy-animation-easing", style.easing);
+        container.style.setProperty("--cobuy-animation-transform", style.transform);
+    }
+
+    /**
+     * Debounce utility to prevent rapid function calls
+     * @param func Function to debounce
+     * @param delay Time in milliseconds to wait before executing
+     * @returns Debounced function
+     */
+    function debounce(func, delay) {
+        let timeoutId = null;
+        return function debounced(...args) {
+            if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+            }
+            const argsToPass = args;
+            timeoutId = setTimeout(() => {
+                func(...argsToPass);
+                timeoutId = null;
+            }, delay);
+        };
+    }
+
+    /**
+     * Widget state enumeration for tracking render lifecycle
+     */
+    var WidgetState;
+    (function (WidgetState) {
+        WidgetState["LOADING"] = "loading";
+        WidgetState["LOADED"] = "loaded";
+        WidgetState["ERROR"] = "error";
+    })(WidgetState || (WidgetState = {}));
+    /**
+     * WidgetRoot handles rendering of the CoBuy widget into a DOM container
+     */
+    class WidgetRoot {
+        constructor(config, apiClient, analyticsClient = null) {
+            this.state = WidgetState.LOADING;
+            this.retryCount = 0;
+            this.MAX_RETRIES = 1;
+            this.currentProductId = null;
+            this.currentContainer = null;
+            this.debouncedCTAClick = null;
+            this.logger = new Logger(config.debug);
+            this.apiClient = apiClient;
+            this.analyticsClient = analyticsClient;
+            this.config = config;
+            this.events = config.events;
+            // Initialize debounced CTA click handler
+            this.debouncedCTAClick = debounce((productId) => {
+                this.handleCTAClick(productId);
+            }, 300); // 300ms debounce to prevent double-clicks
+        }
+        /**
+         * Render the widget into the specified container
+         */
+        async render(options) {
+            var _a, _b, _c, _d, _e;
+            try {
+                // Resolve container
+                const container = this.resolveContainer(options.container);
+                if (!container) {
+                    const selector = typeof options.container === "string" ? options.container : "<HTMLElement>";
+                    const errorMessage = `CoBuy: container not found for ${selector}`;
+                    this.logger.error(errorMessage);
+                    const error = new Error(errorMessage);
+                    (_a = options.onError) === null || _a === void 0 ? void 0 : _a.call(options, error);
+                    throw error;
+                }
+                // Host safety + idempotency markers
+                container.setAttribute("data-cobuy-mounted", "true");
+                container.style.maxWidth = "100%";
+                container.style.width = "100%";
+                container.style.boxSizing = "border-box";
+                container.style.setProperty("--cobuy-gap", "8px");
+                container.style.setProperty("--cobuy-cta-min-height", "44px");
+                container.style.setProperty("--cobuy-reward-font-size", "14px");
+                this.injectBaseStyles();
+                // Apply theme (merge global + widget-specific overrides)
+                const theme = mergeTheme(this.config.theme, options.theme);
+                applyTheme(container, theme);
+                this.logger.info("Theme applied to widget", theme);
+                // Store container and productId for retry functionality
+                this.currentContainer = container;
+                this.currentProductId = options.productId;
+                // Reset state and retry count
+                this.state = WidgetState.LOADING;
+                this.retryCount = 0;
+                // Emit loading event
+                (_c = (_b = this.events) === null || _b === void 0 ? void 0 : _b.onLoading) === null || _c === void 0 ? void 0 : _c.call(_b, options.productId);
+                // Render skeleton loading state
+                this.renderSkeleton(container);
+                // Fetch widget configuration and reward data if API client is available
+                let rewardData = null;
+                if (this.apiClient) {
+                    await this.fetchWidgetConfig(options.productId);
+                    rewardData = await this.fetchRewardWithRetry(options.productId);
+                }
+                else {
+                    this.state = WidgetState.LOADED;
+                }
+                // Render widget or error based on final state
+                // Note: state may be ERROR after fetchRewardWithRetry despite TypeScript's flow analysis
+                if (this.state === WidgetState.ERROR) {
+                    this.renderError(container);
+                }
+                else {
+                    // LOADED state - render widget (even if rewardData is null, createWidget handles it)
+                    this.createWidget(rewardData, container);
+                    this.logger.info(`Widget rendered for product: ${options.productId}`);
+                }
+            }
+            catch (error) {
+                this.logger.error("Failed to render widget", error);
+                this.state = WidgetState.ERROR;
+                (_e = (_d = this.events) === null || _d === void 0 ? void 0 : _d.onError) === null || _e === void 0 ? void 0 : _e.call(_d, options.productId, error);
+                if (options.onError) {
+                    options.onError(error);
+                }
+                if (this.currentContainer) {
+                    this.renderError(this.currentContainer);
+                }
+            }
+        }
+        /**
+         * Fetch reward data with automatic retry on failure
+         */
+        async fetchRewardWithRetry(productId) {
+            var _a, _b, _c, _d;
+            try {
+                const reward = await this.fetchReward(productId);
+                this.state = WidgetState.LOADED;
+                this.logger.info("Reward data fetched successfully");
+                (_b = (_a = this.events) === null || _a === void 0 ? void 0 : _a.onLoaded) === null || _b === void 0 ? void 0 : _b.call(_a, productId, reward);
+                return reward;
+            }
+            catch (error) {
+                if (this.retryCount < this.MAX_RETRIES) {
+                    this.retryCount++;
+                    this.logger.info(`Retrying reward fetch (${this.retryCount}/${this.MAX_RETRIES})`, error);
+                    // Immediate retry
+                    return this.fetchRewardWithRetry(productId);
+                }
+                this.state = WidgetState.ERROR;
+                this.logger.error("Failed to fetch reward after retries", error);
+                (_d = (_c = this.events) === null || _c === void 0 ? void 0 : _c.onError) === null || _d === void 0 ? void 0 : _d.call(_c, productId, error);
+                return null;
+            }
+        }
+        /**
+         * Fetch reward data for a product
+         */
+        async fetchReward(productId) {
+            var _a;
+            if (!this.apiClient) {
+                return null;
+            }
+            const response = await this.apiClient.getProductReward(productId);
+            if (response.success && response.data) {
+                this.logger.info("Reward data loaded", response.data);
+                return response.data;
+            }
+            // API call failed or returned no data - throw error to trigger retry
+            const errorMessage = ((_a = response.error) === null || _a === void 0 ? void 0 : _a.message) || "Reward data unavailable";
+            this.logger.warn(errorMessage, response.error);
+            throw new Error(errorMessage);
+        }
+        /**
+         * Fetch widget configuration from API
+         *
+         * NOTE: This endpoint is currently NOT USED in the SDK implementation.
+         * It is reserved for future enhancements such as:
+         * - Server-side control of widget display settings (show/hide elements)
+         * - Per-merchant feature flags (enable/disable social sharing, group creation)
+         * - Group size requirements and timeout configurations
+         * - Modal layout and behavior customization
+         * - A/B testing and dynamic theming
+         *
+         * For now, widget behavior is controlled by:
+         * 1. Merchant's init() options (theme, debug)
+         * 2. Reward data from /v1/sdk/products/:productId/reward
+         *
+         * This method is kept for future integration when modal group lobby,
+         * social sharing, and advanced customization features are implemented.
+         *
+         * @future Will be activated in modal implementation (post-SCRUM-248)
+         */
+        async fetchWidgetConfig(productId) {
+            if (!this.apiClient) {
+                return;
+            }
+            try {
+                const response = await this.apiClient.get(API_ENDPOINTS.WIDGET_CONFIG + `?productId=${productId}`);
+                if (response.success) {
+                    this.logger.info("Widget configuration loaded", response.data);
+                    // TODO: Use configuration data to customize widget appearance and behavior
+                }
+                else {
+                    // Gracefully handle API errors - widget will still render with defaults
+                    this.logger.warn("Widget configuration not available (backend endpoint pending implementation)", response.error);
+                }
+            }
+            catch (error) {
+                // Catch any network errors and continue - widget rendering should not fail
+                this.logger.warn("Could not fetch widget configuration (backend endpoint pending)", error);
+            }
+        }
+        /**
+         * Resolve container from string selector or HTMLElement
+         */
+        resolveContainer(container) {
+            if (typeof container === "string") {
+                return document.querySelector(container);
+            }
+            return container || null;
+        }
+        /**
+         * Render skeleton loading state with animated shimmer effect
+         */
+        renderSkeleton(container) {
+            // Inject animations once
+            const shimmerStyle = document.createElement("style");
+            shimmerStyle.textContent = `
+      @keyframes cobuy-shimmer {
+        0% { background-position: -200px 0; }
+        100% { background-position: calc(200px + 100%) 0; }
+      }
+      @keyframes cobuy-fadeIn {
+        from { 
+          opacity: 0; 
+          transform: var(--cobuy-animation-transform, translateY(8px)); 
+        }
+        to { 
+          opacity: 1; 
+          transform: translateY(0); 
+        }
+      }
+      .cobuy-skeleton-text,
+      .cobuy-skeleton-button {
+        animation: cobuy-shimmer 1.5s ease-in-out infinite;
+        background: linear-gradient(90deg, #f0f0f0 0px, #e0e0e0 40px, #f0f0f0 80px);
+        background-size: 200px 100%;
+      }
+    `;
+            if (!document.querySelector("#cobuy-shimmer-style")) {
+                shimmerStyle.id = "cobuy-shimmer-style";
+                document.head.appendChild(shimmerStyle);
+            }
+            // Reward text placeholder - render directly with accessibility
+            const textPlaceholder = document.createElement("div");
+            textPlaceholder.className = "cobuy-skeleton-text";
+            textPlaceholder.setAttribute("aria-busy", "true");
+            textPlaceholder.setAttribute("role", "status");
+            textPlaceholder.setAttribute("aria-label", "Loading reward information");
+            textPlaceholder.style.height = "18px";
+            textPlaceholder.style.width = "70%";
+            textPlaceholder.style.borderRadius = "4px";
+            textPlaceholder.style.marginBottom = "8px";
+            textPlaceholder.style.opacity = "0";
+            textPlaceholder.style.animation =
+                "cobuy-fadeIn var(--cobuy-animation-duration, 300ms) var(--cobuy-animation-easing, ease-out) forwards";
+            // Button placeholder - render directly with accessibility
+            const buttonPlaceholder = document.createElement("div");
+            buttonPlaceholder.className = "cobuy-skeleton-button";
+            buttonPlaceholder.setAttribute("aria-busy", "true");
+            buttonPlaceholder.setAttribute("role", "button");
+            buttonPlaceholder.setAttribute("aria-label", "Loading action button");
+            buttonPlaceholder.style.height = "var(--cobuy-cta-min-height, 44px)";
+            buttonPlaceholder.style.minHeight = "var(--cobuy-cta-min-height, 44px)";
+            buttonPlaceholder.style.width = "100%";
+            buttonPlaceholder.style.borderRadius = "6px";
+            buttonPlaceholder.style.opacity = "0";
+            buttonPlaceholder.style.animation =
+                "cobuy-fadeIn var(--cobuy-animation-duration, 300ms) var(--cobuy-animation-easing, ease-out) forwards 100ms";
+            container.innerHTML = "";
+            container.appendChild(textPlaceholder);
+            container.appendChild(buttonPlaceholder);
+        }
+        /**
+         * Render error state with retry button
+         */
+        renderError(container) {
+            // Error message - render directly with accessibility
+            const message = document.createElement("div");
+            message.className = "cobuy-error-message";
+            message.setAttribute("role", "alert");
+            message.setAttribute("aria-live", "polite");
+            message.setAttribute("aria-label", "Error loading CoBuy offer");
+            message.style.fontSize = "13px";
+            message.style.color = "#991b1b";
+            message.style.fontFamily =
+                "var(--cobuy-font-family, Inter, system-ui, -apple-system, sans-serif)";
+            message.style.marginBottom = "12px";
+            message.style.lineHeight = "1.4";
+            message.style.wordWrap = "break-word";
+            message.style.opacity = "0";
+            message.style.animation =
+                "cobuy-fadeIn var(--cobuy-animation-duration, 300ms) var(--cobuy-animation-easing, ease-out) forwards";
+            message.textContent = "Unable to load CoBuy offer. Please try again.";
+            // Retry button - render directly with accessibility
+            const retryButton = document.createElement("button");
+            retryButton.type = "button";
+            retryButton.className = "cobuy-error-button";
+            retryButton.textContent = "Retry";
+            retryButton.setAttribute("aria-label", "Retry loading CoBuy offer");
+            retryButton.setAttribute("role", "button");
+            retryButton.setAttribute("tabindex", "0");
+            retryButton.title = "Click to retry loading the CoBuy offer";
+            retryButton.style.padding = "10px 14px";
+            retryButton.style.minHeight = "36px";
+            retryButton.style.backgroundColor = "#dc2626";
+            retryButton.style.color = "white";
+            retryButton.style.border = "none";
+            retryButton.style.borderRadius = "var(--cobuy-border-radius, 6px)";
+            retryButton.style.fontSize = "13px";
+            retryButton.style.fontWeight = "600";
+            retryButton.style.fontFamily =
+                "var(--cobuy-font-family, Inter, system-ui, -apple-system, sans-serif)";
+            retryButton.style.cursor = "pointer";
+            retryButton.style.transition = "background-color 0.2s, transform 0.1s";
+            retryButton.style.opacity = "0";
+            retryButton.style.animation =
+                "cobuy-fadeIn var(--cobuy-animation-duration, 300ms) var(--cobuy-animation-easing, ease-out) forwards 100ms";
+            retryButton.addEventListener("mouseenter", () => {
+                retryButton.style.backgroundColor = "#b91c1c";
+            });
+            retryButton.addEventListener("mouseleave", () => {
+                retryButton.style.backgroundColor = "#dc2626";
+            });
+            retryButton.addEventListener("mousedown", () => {
+                retryButton.style.transform = "scale(0.97)";
+            });
+            retryButton.addEventListener("mouseup", () => {
+                retryButton.style.transform = "scale(1)";
+            });
+            retryButton.addEventListener("click", () => this.handleRetry());
+            container.innerHTML = "";
+            container.appendChild(message);
+            container.appendChild(retryButton);
+        }
+        /**
+         * Handle retry button click - reset retry count and re-fetch
+         */
+        async handleRetry() {
+            var _a, _b;
+            if (!this.currentContainer || !this.currentProductId) {
+                this.logger.error("Cannot retry: missing container or productId");
+                return;
+            }
+            this.retryCount = 0;
+            this.state = WidgetState.LOADING;
+            (_b = (_a = this.events) === null || _a === void 0 ? void 0 : _a.onLoading) === null || _b === void 0 ? void 0 : _b.call(_a, this.currentProductId);
+            this.renderSkeleton(this.currentContainer);
+            const rewardData = await this.fetchRewardWithRetry(this.currentProductId);
+            // Render based on final state (state may be ERROR after fetchRewardWithRetry)
+            if (this.state === WidgetState.ERROR) {
+                this.renderError(this.currentContainer);
+            }
+            else {
+                // LOADED state
+                this.createWidget(rewardData, this.currentContainer);
+            }
+        }
+        createWidget(rewardData, container) {
+            var _a, _b;
+            const wrapper = document.createElement("div");
+            wrapper.className = "cobuy-widget";
+            wrapper.style.display = "grid";
+            wrapper.style.gridTemplateColumns = "1fr";
+            wrapper.style.gap = "var(--cobuy-gap, 8px)";
+            wrapper.style.alignItems = "stretch";
+            wrapper.style.width = "100%";
+            wrapper.style.maxWidth = "100%";
+            wrapper.style.boxSizing = "border-box";
+            // Reward text - use semantic <p> tag with accessibility attributes
+            const rewardLine = document.createElement("p");
+            rewardLine.className = "cobuy-reward-text";
+            rewardLine.setAttribute("role", "region");
+            rewardLine.setAttribute("aria-label", "CoBuy reward offer");
+            rewardLine.style.fontSize = "var(--cobuy-reward-font-size, 14px)";
+            rewardLine.style.fontWeight = "600";
+            rewardLine.style.color = "var(--cobuy-text-color, #111827)";
+            rewardLine.style.fontFamily =
+                "var(--cobuy-font-family, Inter, system-ui, -apple-system, sans-serif)";
+            rewardLine.style.margin = "0";
+            rewardLine.style.lineHeight = "1.4";
+            rewardLine.style.wordWrap = "break-word";
+            rewardLine.style.overflowWrap = "break-word";
+            rewardLine.style.whiteSpace = "normal";
+            rewardLine.style.width = "100%";
+            rewardLine.style.opacity = "0";
+            rewardLine.style.animation =
+                "cobuy-fadeIn var(--cobuy-animation-duration, 300ms) var(--cobuy-animation-easing, ease-out) forwards";
+            if (((_a = rewardData === null || rewardData === void 0 ? void 0 : rewardData.eligibility) === null || _a === void 0 ? void 0 : _a.isEligible) && rewardData.reward) {
+                const rewardText = this.formatRewardText(rewardData.reward);
+                rewardLine.textContent = rewardText
+                    ? `Save up to ${rewardText} with CoBuy`
+                    : "CoBuy reward available";
+                rewardLine.setAttribute("aria-label", `Eligible for CoBuy reward: ${rewardLine.textContent}`);
+                rewardLine.title = rewardLine.textContent;
+            }
+            else if (rewardData && !((_b = rewardData.eligibility) === null || _b === void 0 ? void 0 : _b.isEligible)) {
+                rewardLine.textContent = "Join with CoBuy to unlock rewards";
+                rewardLine.setAttribute("aria-label", "Join with CoBuy to unlock rewards");
+                rewardLine.title = "Join with CoBuy to unlock rewards";
+                rewardLine.style.color = "#6b7280";
+            }
+            else {
+                rewardLine.textContent = "CoBuy offer loading or unavailable";
+                rewardLine.setAttribute("aria-label", "CoBuy offer loading or unavailable");
+                rewardLine.title = "CoBuy offer loading or unavailable";
+                rewardLine.style.color = "#6b7280";
+            }
+            // Button - semantic button element with accessibility
+            const button = document.createElement("button");
+            button.type = "button";
+            button.className = "cobuy-button";
+            button.textContent = "Buy with CoBuy";
+            button.setAttribute("aria-label", "Buy this product with CoBuy for group buying discounts");
+            button.setAttribute("role", "button");
+            button.setAttribute("tabindex", "0");
+            button.title = "Buy with CoBuy for discounts when others join";
+            button.style.padding = "10px 14px";
+            button.style.backgroundColor = "var(--cobuy-primary-color, #4f46e5)";
+            button.style.color = "var(--cobuy-button-text-color, white)";
+            button.style.border = "none";
+            button.style.borderRadius = "var(--cobuy-border-radius, 6px)";
+            button.style.fontSize = "13px";
+            button.style.fontWeight = "700";
+            button.style.fontFamily =
+                "var(--cobuy-font-family, Inter, system-ui, -apple-system, sans-serif)";
+            button.style.cursor = "pointer";
+            button.style.width = "100%";
+            button.style.minHeight = "var(--cobuy-cta-min-height, 44px)";
+            button.style.height = "auto";
+            button.style.lineHeight = "1.4";
+            button.style.wordWrap = "break-word";
+            button.style.whiteSpace = "normal";
+            button.style.transition = "opacity 0.2s, transform 0.1s";
+            button.style.opacity = "0";
+            button.style.animation =
+                "cobuy-fadeIn var(--cobuy-animation-duration, 300ms) var(--cobuy-animation-easing, ease-out) forwards 100ms";
+            // Hover effect using opacity for better theme compatibility
+            button.addEventListener("mouseenter", () => {
+                button.style.opacity = "0.9";
+            });
+            button.addEventListener("mouseleave", () => {
+                button.style.opacity = "1";
+            });
+            button.addEventListener("mousedown", () => {
+                button.style.transform = "scale(0.97)";
+            });
+            button.addEventListener("mouseup", () => {
+                button.style.transform = "scale(1)";
+            });
+            // Emit button click event
+            button.addEventListener("click", () => {
+                if (this.currentProductId && this.debouncedCTAClick) {
+                    this.debouncedCTAClick(this.currentProductId);
+                }
+            });
+            wrapper.appendChild(rewardLine);
+            wrapper.appendChild(button);
+            container.innerHTML = "";
+            container.appendChild(wrapper);
+        }
+        /**
+         * Inject base layout styles for responsive widget rendering
+         */
+        injectBaseStyles() {
+            if (document.querySelector("#cobuy-widget-base-styles")) {
+                return;
+            }
+            const style = document.createElement("style");
+            style.id = "cobuy-widget-base-styles";
+            style.textContent = `
+      .cobuy-widget {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: var(--cobuy-gap, 8px);
+        align-items: stretch;
+        width: 100%;
+      }
+
+      .cobuy-widget .cobuy-reward-text {
+        margin: 0;
+        width: 100%;
+      }
+
+      .cobuy-widget .cobuy-button {
+        min-height: var(--cobuy-cta-min-height, 44px);
+        width: 100%;
+      }
+
+      @media (max-width: 640px) {
+        .cobuy-widget {
+          grid-template-columns: 1fr;
+        }
+      }
+    `;
+            document.head.appendChild(style);
+        }
+        /**
+         * Handle CTA button click with analytics and modal opening
+         */
+        handleCTAClick(productId) {
+            var _a, _b;
+            this.logger.info(`CTA clicked for product: ${productId}`);
+            // Track analytics event asynchronously (fire-and-forget)
+            if (this.analyticsClient) {
+                this.analyticsClient.trackCtaClick(productId).catch((error) => {
+                    this.logger.warn("Analytics tracking failed", error);
+                });
+            }
+            // Emit button click event
+            (_b = (_a = this.events) === null || _a === void 0 ? void 0 : _a.onButtonClick) === null || _b === void 0 ? void 0 : _b.call(_a, productId);
+            // Open modal if SDK instance is available
+            // Access the global CoBuy SDK instance through window
+            if (typeof window !== "undefined") {
+                const cobuySDK = window.CoBuy;
+                if (cobuySDK) {
+                    try {
+                        cobuySDK.openModal({
+                            productId,
+                        });
+                    }
+                    catch (error) {
+                        this.logger.warn("Failed to open modal", error);
+                    }
+                }
+            }
+        }
+        formatRewardText(reward) {
+            var _a;
+            if (!reward)
+                return "";
+            const value = (_a = reward.value) === null || _a === void 0 ? void 0 : _a.toString();
+            switch (reward.type) {
+                case "percentage":
+                case "cashback":
+                    return value ? `${value}%` : "";
+                case "points":
+                    return value ? `${value} points` : "";
+                case "fixed":
+                    return value ? `$${value}` : "";
+                default:
+                    return "";
+            }
+        }
+    }
+
+    /**
+     * HTTP client for communicating with CoBuy API
+     *
+     * NOTE: Backend API endpoints are currently under development.
+     * All API calls are designed to fail gracefully with proper error handling,
+     * ensuring the SDK continues to function (with placeholder UI) even when
+     * backend endpoints are not yet available.
+     */
+    class ApiClient {
+        constructor(config) {
+            this.baseUrl = config.baseUrl;
+            this.merchantKey = config.merchantKey;
+            this.logger = new Logger(config.debug || false);
+            this.defaultTimeout = config.timeout || 30000; // 30 seconds default
+        }
+        /**
+         * Make an HTTP request to the API
+         */
+        async request(endpoint, options = {}) {
+            const url = `${this.baseUrl}${endpoint}`;
+            const method = options.method || "GET";
+            const timeout = options.timeout || this.defaultTimeout;
+            this.logger.info(`API Request: ${method} ${url}`);
+            try {
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), timeout);
+                const response = await fetch(url, {
+                    method,
+                    headers: Object.assign({ "Content-Type": "application/json", "X-CoBuy-Merchant-Key": this.merchantKey, "X-CoBuy-SDK-Version": "1.0.0" }, options.headers),
+                    body: options.body ? JSON.stringify(options.body) : undefined,
+                    signal: controller.signal,
+                });
+                clearTimeout(timeoutId);
+                const responseData = await response.json();
+                if (!response.ok) {
+                    this.logger.error(`API Error: ${response.status} ${response.statusText}`, responseData);
+                    return {
+                        success: false,
+                        error: {
+                            message: responseData.message || response.statusText,
+                            code: responseData.code,
+                            statusCode: response.status,
+                        },
+                    };
+                }
+                this.logger.info(`API Response: ${method} ${url} - Success`);
+                return {
+                    success: true,
+                    data: responseData,
+                };
+            }
+            catch (error) {
+                if (error instanceof Error) {
+                    if (error.name === "AbortError") {
+                        this.logger.error(`API Timeout: ${method} ${url}`);
+                        return {
+                            success: false,
+                            error: {
+                                message: "Request timeout",
+                                code: "TIMEOUT",
+                            },
+                        };
+                    }
+                    this.logger.error(`API Error: ${method} ${url}`, error);
+                    return {
+                        success: false,
+                        error: {
+                            message: error.message,
+                            code: "NETWORK_ERROR",
+                        },
+                    };
+                }
+                return {
+                    success: false,
+                    error: {
+                        message: "Unknown error occurred",
+                        code: "UNKNOWN_ERROR",
+                    },
+                };
+            }
+        }
+        /**
+         * Make a GET request
+         */
+        async get(endpoint, options) {
+            return this.request(endpoint, Object.assign(Object.assign({}, options), { method: "GET" }));
+        }
+        /**
+         * Make a POST request
+         */
+        async post(endpoint, body, options) {
+            return this.request(endpoint, Object.assign(Object.assign({}, options), { method: "POST", body }));
+        }
+        /**
+         * Make a PUT request
+         */
+        async put(endpoint, body, options) {
+            return this.request(endpoint, Object.assign(Object.assign({}, options), { method: "PUT", body }));
+        }
+        /**
+         * Make a PATCH request
+         */
+        async patch(endpoint, body, options) {
+            return this.request(endpoint, Object.assign(Object.assign({}, options), { method: "PATCH", body }));
+        }
+        /**
+         * Make a DELETE request
+         */
+        async delete(endpoint, options) {
+            return this.request(endpoint, Object.assign(Object.assign({}, options), { method: "DELETE" }));
+        }
+        /**
+         * Update the base URL
+         */
+        setBaseUrl(baseUrl) {
+            this.baseUrl = baseUrl;
+            this.logger.info(`API Base URL updated: ${baseUrl}`);
+        }
+        /**
+         * Update the merchant key
+         */
+        setMerchantKey(merchantKey) {
+            this.merchantKey = merchantKey;
+            this.logger.info("Merchant key updated");
+        }
+        /**
+         * Get product reward information
+         *
+         * Retrieves reward data and eligibility for a specific product.
+         * This is a core method for SCRUM-247: Retrieve reward information.
+         *
+         * @param productId - The product ID to fetch reward information for
+         * @returns Promise with reward data including eligibility status
+         */
+        async getProductReward(productId) {
+            var _a;
+            const endpoint = buildApiUrl("", API_ENDPOINTS.PRODUCT_REWARD, { productId });
+            this.logger.info(`Fetching reward for product: ${productId}`);
+            const response = await this.get(endpoint);
+            // Handle the nested response structure from backend
+            if (response.success && ((_a = response.data) === null || _a === void 0 ? void 0 : _a.data)) {
+                return {
+                    success: true,
+                    data: response.data.data,
+                };
+            }
+            // Return error response
+            return {
+                success: false,
+                error: response.error || {
+                    message: "Failed to fetch reward data",
+                    code: "REWARD_FETCH_ERROR",
+                },
+            };
+        }
+    }
+
+    /**
+     * AnalyticsClient handles SDK event tracking and analytics
+     * Uses session ID provided by the SDK for all analytics events
+     */
+    class AnalyticsClient {
+        constructor(_merchantKey, sdkVersion, sessionId, apiClient, debug = false) {
+            this.logger = new Logger(debug);
+            this.apiClient = apiClient;
+            this.sdkVersion = sdkVersion;
+            this.sessionId = sessionId;
+            this.logger.debug(`[Analytics] Initialized with session ID: ${sessionId}`);
+        }
+        /**
+         * Track a CTA click event
+         */
+        async trackCtaClick(productId) {
+            const event = {
+                event: "cta_clicked",
+                productId,
+                timestamp: new Date().toISOString(),
+                sessionId: this.sessionId,
+                context: {
+                    pageUrl: typeof window !== "undefined" ? window.location.href : undefined,
+                    userAgent: typeof navigator !== "undefined" ? navigator.userAgent : undefined,
+                    sdkVersion: this.sdkVersion,
+                },
+            };
+            try {
+                await this.sendEvent(event);
+                this.logger.info(`[Analytics] CTA click tracked for product: ${productId}`);
+            }
+            catch (error) {
+                // Log but don't throw - analytics failure should not break UX
+                this.logger.error("[Analytics] Failed to track CTA click", error);
+            }
+        }
+        /**
+         * Send event to backend analytics endpoint using unified ApiClient
+         */
+        async sendEvent(event) {
+            var _a, _b;
+            if (!this.apiClient) {
+                this.logger.warn("[Analytics] ApiClient not available, skipping event");
+                return;
+            }
+            try {
+                const response = await this.apiClient.request("/v1/sdk/analytics", {
+                    method: "POST",
+                    body: event,
+                });
+                if (!response.success) {
+                    throw new Error(((_a = response.error) === null || _a === void 0 ? void 0 : _a.message) || "Failed to send analytics event");
+                }
+                this.logger.debug("[Analytics] Event recorded", { id: (_b = response.data) === null || _b === void 0 ? void 0 : _b.id });
+            }
+            catch (error) {
+                this.logger.error("[Analytics] Failed to send event", error);
+                // Re-throw for caller to handle if needed
+                throw error;
+            }
+        }
+        /**
+         * Track custom event (extensible for future use)
+         */
+        async trackEvent(eventName, productId, metadata) {
+            const event = {
+                event: eventName,
+                productId,
+                timestamp: new Date().toISOString(),
+                sessionId: this.sessionId,
+                context: Object.assign({ pageUrl: typeof window !== "undefined" ? window.location.href : undefined, userAgent: typeof navigator !== "undefined" ? navigator.userAgent : undefined, sdkVersion: this.sdkVersion }, metadata),
+            };
+            try {
+                await this.sendEvent(event);
+                this.logger.info(`[Analytics] Event tracked: ${eventName}`);
+            }
+            catch (error) {
+                this.logger.error(`[Analytics] Failed to track event: ${eventName}`, error);
+            }
+        }
+    }
+
+    /**
+     * SDK version constant
+     */
+    const SDK_VERSION = "1.0.0";
+    /**
+     * Main CoBuy SDK implementation
+     */
+    class CoBuy {
+        constructor() {
+            this.apiClient = null;
+            this.analyticsClient = null;
+            this.sessionId = "";
+            this.SESSION_STORAGE_KEY = "cobuy_sdk_session_id";
+            this.configManager = new ConfigManager();
+            this.logger = new Logger(false);
+        }
+        /**
+         * Initialize or retrieve existing session ID from storage
+         */
+        initializeSessionId() {
+            // Try to retrieve from localStorage
+            if (typeof window !== "undefined" && window.localStorage) {
+                const stored = window.localStorage.getItem(this.SESSION_STORAGE_KEY);
+                if (stored) {
+                    this.logger.debug(`[SDK] Using existing session ID: ${stored}`);
+                    return stored;
+                }
+            }
+            // Generate new UUID v4 session ID
+            const newSessionId = this.generateUUID();
+            // Store in localStorage for persistence across page reloads
+            if (typeof window !== "undefined" && window.localStorage) {
+                try {
+                    window.localStorage.setItem(this.SESSION_STORAGE_KEY, newSessionId);
+                }
+                catch (e) {
+                    // Silently fail if localStorage unavailable (private mode, etc.)
+                    this.logger.warn("[SDK] Could not persist session ID to localStorage", e);
+                }
+            }
+            this.logger.debug(`[SDK] Generated new session ID: ${newSessionId}`);
+            return newSessionId;
+        }
+        /**
+         * Generate UUID v4 compatible ID
+         */
+        generateUUID() {
+            if (typeof crypto !== "undefined" && crypto.randomUUID) {
+                return crypto.randomUUID();
+            }
+            // Fallback for environments without crypto.randomUUID
+            return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        }
+        /**
+         * Get the current session ID (core SDK concept)
+         */
+        getSessionId() {
+            return this.sessionId;
+        }
+        /**
+         * Initialize the SDK with configuration
+         */
+        init(options) {
+            try {
+                const config = this.configManager.setConfig(options);
+                this.logger.setDebug(config.debug);
+                this.logger.info(`Initialized with environment: ${config.env}`);
+                this.logger.info(`API Base URL: ${config.apiBaseUrl}`);
+                // Initialize session ID (core SDK concept, used by all services)
+                this.sessionId = this.initializeSessionId();
+                // Initialize API client
+                this.apiClient = new ApiClient({
+                    baseUrl: config.apiBaseUrl,
+                    merchantKey: config.merchantKey,
+                    debug: config.debug,
+                });
+                // Initialize Analytics client with the SDK's session ID
+                this.analyticsClient = new AnalyticsClient(config.merchantKey, SDK_VERSION, this.sessionId, this.apiClient, config.debug);
+            }
+            catch (error) {
+                this.logger.error("Failed to initialize SDK", error);
+                throw error;
+            }
+        }
+        /**
+         * Render the CoBuy widget into a DOM container
+         */
+        renderWidget(options) {
+            // Check if SDK is initialized
+            if (!this.configManager.isInitialized()) {
+                throw new CoBuyNotInitializedError();
+            }
+            // Validate productId
+            if (!options.productId) {
+                const errorMessage = "productId is required for renderWidget";
+                this.logger.error(errorMessage);
+                if (options.onError) {
+                    options.onError(new Error(errorMessage));
+                }
+                return;
+            }
+            try {
+                const config = this.configManager.getConfig();
+                const widget = new WidgetRoot(config, this.apiClient, this.analyticsClient);
+                widget.render(options);
+            }
+            catch (error) {
+                this.logger.error("Failed to render widget", error);
+                if (options.onError) {
+                    options.onError(error);
+                }
+            }
+        }
+        /**
+         * Open modal for product details
+         */
+        openModal(options) {
+            var _a;
+            if (!this.configManager.isInitialized()) {
+                this.logger.warn("SDK not initialized, cannot open modal");
+                return;
+            }
+            this.logger.info(`Opening modal for product: ${options.productId}`);
+            try {
+                // Find or create modal container
+                const modalContainer = document.getElementById("cobuy-modal-root");
+                if (!modalContainer) {
+                    this.logger.warn("Modal container #cobuy-modal-root not found. Create an element with id='cobuy-modal-root' to use modals.");
+                    return;
+                }
+                // Show modal (placeholder - will be replaced with actual modal implementation)
+                modalContainer.style.display = "block";
+                modalContainer.setAttribute("data-product-id", options.productId);
+                // Call callback if provided
+                if (options.onOpen) {
+                    options.onOpen(options.productId);
+                }
+                // Emit event if configured
+                const config = this.configManager.getConfig();
+                if ((_a = config.events) === null || _a === void 0 ? void 0 : _a.onModalOpen) {
+                    config.events.onModalOpen(options.productId);
+                }
+            }
+            catch (error) {
+                this.logger.error("Failed to open modal", error);
+            }
+        }
+        /**
+         * Close the modal
+         */
+        closeModal() {
+            var _a;
+            try {
+                const modalContainer = document.getElementById("cobuy-modal-root");
+                if (modalContainer) {
+                    modalContainer.style.display = "none";
+                    const currentProductId = modalContainer.getAttribute("data-product-id");
+                    // Emit event if configured
+                    const config = this.configManager.getConfig();
+                    if (((_a = config.events) === null || _a === void 0 ? void 0 : _a.onModalClose) && currentProductId) {
+                        config.events.onModalClose(currentProductId);
+                    }
+                }
+                this.logger.info("Modal closed");
+            }
+            catch (error) {
+                this.logger.error("Failed to close modal", error);
+            }
+        }
+        /**
+         * Get the initialized API client instance
+         */
+        getApiClient() {
+            return this.apiClient;
+        }
+        /**
+         * Get the initialized Analytics client instance
+         */
+        getAnalyticsClient() {
+            return this.analyticsClient;
+        }
+        /**
+         * Get SDK version
+         */
+        get version() {
+            return SDK_VERSION;
+        }
+    }
+
+    // Create singleton instance
+    const instance = new CoBuy();
+    // Attach to window if in browser environment
+    if (typeof window !== "undefined") {
+        if (window.CoBuy) {
+            console.warn("[CoBuy] Multiple SDK bundles detected. This may cause unexpected behavior.");
+        }
+        else {
+            window.CoBuy = instance;
+        }
+    }
+
+    return instance;
+
+})();
+//# sourceMappingURL=cobuy-sdk.umd.js.map