@cshah18/sdk 1.0.0

package/dist/cobuy-sdk.esm.js

@@ -0,0 +1,1226 @@
+/**
+ * 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;
+    }
+}
+
+export { instance as default };
+//# sourceMappingURL=cobuy-sdk.esm.js.map