@pixelated-tech/components 3.8.0 → 3.9.0

package/dist/components/general/cache-manager.js

@@ -0,0 +1,124 @@
+/**
+ * CacheManager
+ *
+ * A unified caching utility that supports Memory, LocalStorage, and SessionStorage.
+ * Includes TTL (Time-To-Live) support and automatic SSR fallback.
+ */
+export class CacheManager {
+    memoryCache = new Map();
+    defaultTTL = 60 * 60 * 1000; // 1 hour
+    mode;
+    prefix;
+    ttl;
+    constructor(options = {}) {
+        this.mode = options.mode || 'memory';
+        this.prefix = options.prefix || 'pix_';
+        this.ttl = options.ttl || this.defaultTTL;
+        // Fallback to memory if browser storage is requested but unavailable (SSR/Node environment)
+        if (typeof window === 'undefined' && (this.mode === 'local' || this.mode === 'session')) {
+            this.mode = 'memory';
+        }
+    }
+    /**
+     * Returns the storage engine based on the mode
+     */
+    getStorage() {
+        if (typeof window === 'undefined')
+            return null;
+        if (this.mode === 'local')
+            return window.localStorage;
+        if (this.mode === 'session')
+            return window.sessionStorage;
+        return null;
+    }
+    /**
+     * Generates a prefixed key to avoid collisions
+     */
+    getFullKey(key) {
+        return `${this.prefix}${key}`;
+    }
+    /**
+     * Retrieves data from the cache
+     */
+    get(key) {
+        if (this.mode === 'none')
+            return null;
+        const fullKey = this.getFullKey(key);
+        let wrapper = null;
+        // 1. Check Memory cache first (fastest)
+        const memMatch = this.memoryCache.get(fullKey);
+        if (memMatch) {
+            wrapper = memMatch;
+        }
+        // 2. Check Browser storage if memory failed or was bypassed
+        if (!wrapper) {
+            const storage = this.getStorage();
+            if (storage) {
+                const raw = storage.getItem(fullKey);
+                if (raw) {
+                    try {
+                        wrapper = JSON.parse(raw);
+                    }
+                    catch (e) {
+                        return null;
+                    }
+                }
+            }
+        }
+        // 3. Validate Expiry
+        if (wrapper) {
+            if (Date.now() < wrapper.expiry) {
+                // Resync memory cache if we pulled from storage
+                if (!memMatch) {
+                    this.memoryCache.set(fullKey, wrapper);
+                }
+                return wrapper.data;
+            }
+            // Clean up expired items
+            this.remove(key);
+        }
+        return null;
+    }
+    /**
+     * Stores data in the cache with a specified TTL
+     */
+    set(key, data, customTTL) {
+        if (this.mode === 'none')
+            return;
+        const fullKey = this.getFullKey(key);
+        const expiry = Date.now() + (customTTL || this.ttl);
+        const wrapper = { data, expiry };
+        // Always update memory
+        this.memoryCache.set(fullKey, wrapper);
+        // Update browser storage if applicable
+        const storage = this.getStorage();
+        if (storage) {
+            storage.setItem(fullKey, JSON.stringify(wrapper));
+        }
+    }
+    /**
+     * Removes a specific item from all storage engines
+     */
+    remove(key) {
+        const fullKey = this.getFullKey(key);
+        this.memoryCache.delete(fullKey);
+        const storage = this.getStorage();
+        if (storage) {
+            storage.removeItem(fullKey);
+        }
+    }
+    /**
+     * Clears only the items belonging to this manager (by prefix)
+     */
+    clear() {
+        this.memoryCache.clear();
+        const storage = this.getStorage();
+        if (storage) {
+            Object.keys(storage).forEach(k => {
+                if (k.startsWith(this.prefix)) {
+                    storage.removeItem(k);
+                }
+            });
+        }
+    }
+}

package/dist/components/general/google.reviews.components.js

@@ -6,7 +6,6 @@ import { SmartImage } from './smartimage';
 import { getGoogleReviewsByPlaceId } from './google.reviews.functions';
 import { usePixelatedConfig } from '../config/config.client';
 import './google.reviews.css';
-const GOOGLE_MAPS_API_KEY = 'AIzaSyBJVi0O9Ir9imRgINLZbojTifatX-Z4aUs';
 GoogleReviewsCard.propTypes = {
     placeId: PropTypes.string.isRequired,
     language: PropTypes.string,
@@ -20,7 +19,7 @@ export function GoogleReviewsCard(props) {
     const [reviews, setReviews] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const apiKey = props.apiKey || config?.googleMaps?.apiKey || GOOGLE_MAPS_API_KEY;
+    const apiKey = props.apiKey || config?.googleMaps?.apiKey || '';
     const proxyBase = props.proxyBase || config?.global?.proxyUrl || undefined;
     useEffect(() => {
         (async () => {

package/dist/components/general/googlemap.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import PropTypes from "prop-types";
+import { usePixelatedConfig } from "../config/config.client";
 // https://developers.google.com/maps/documentation/embed/embedding-map
 GoogleMaps.propTypes = {
     title: PropTypes.string,
@@ -8,9 +9,11 @@ GoogleMaps.propTypes = {
     frameBorder: PropTypes.string,
     style: PropTypes.object,
     map_mode: PropTypes.string.isRequired,
-    api_key: PropTypes.string.isRequired,
+    api_key: PropTypes.string,
     parameters: PropTypes.string,
 };
 export function GoogleMaps(props) {
-    return (_jsx("div", { className: "gmap", suppressHydrationWarning: true, children: _jsx("iframe", { title: props.title || "Google Map", width: props.width || "600", height: props.height || "400", frameBorder: props.frameBorder || "0", style: props.style || { border: 0 }, referrerPolicy: "no-referrer-when-downgrade", src: `https://www.google.com/maps/embed/v1/${props.map_mode}?key=${props.api_key}&${props.parameters}`, allowFullScreen: true }) }));
+    const config = usePixelatedConfig();
+    const apiKey = props.api_key || config?.googleMaps?.apiKey;
+    return (_jsx("div", { className: "gmap", suppressHydrationWarning: true, children: _jsx("iframe", { title: props.title || "Google Map", width: props.width || "600", height: props.height || "400", frameBorder: props.frameBorder || "0", style: props.style || { border: 0 }, referrerPolicy: "no-referrer-when-downgrade", src: `https://www.google.com/maps/embed/v1/${props.map_mode}?key=${apiKey}&${props.parameters}`, allowFullScreen: true }) }));
 }

package/dist/components/general/metadata.functions.js

@@ -65,6 +65,8 @@ export function getAllRoutes(routes, key) {
     return result;
 }
 export const getMetadata = (routes, key = "name", value = "Home") => {
+    // Validate the routes blob early to fail fast if invalid
+    assertRoutes(routes);
     const foundObject = getRouteByKey(routes, key, value);
     if (foundObject) {
         const metadata = {
@@ -105,8 +107,20 @@ export function getAccordionMenuData(myRoutes) {
     });
     return menuItems;
 }
+import { assertSiteInfo, assertRoutes } from '../config/config.validators';
 export function generateMetaTags(props) {
     const { title, description, keywords, origin, url, site_name: prop_site_name, email: prop_email, image: prop_image, image_height: prop_image_height, image_width: prop_image_width, favicon: prop_favicon, siteInfo } = props;
+    const safeOrigin = typeof origin === 'string' && origin.length > 0 ? origin : '';
+    const safeUrl = typeof url === 'string' && url.length > 0 ? url : '';
+    let newOrigin;
+    try {
+        newOrigin = safeOrigin ? new URL(safeOrigin).hostname : undefined;
+    }
+    catch {
+        newOrigin = undefined;
+    }
+    // Validate siteInfo strictly so downstream sites must provide the contract
+    assertSiteInfo(siteInfo);
     // Use props if provided, otherwise fall back to siteInfo
     const site_name = prop_site_name || siteInfo?.name;
     const email = prop_email || siteInfo?.email;
@@ -114,5 +128,5 @@ export function generateMetaTags(props) {
     const image_height = prop_image_height || siteInfo?.image_height;
     const image_width = prop_image_width || siteInfo?.image_width;
     const favicon = prop_favicon || siteInfo?.favicon;
-    return (_jsxs(_Fragment, { children: [_jsx("title", { children: title }), _jsx("meta", { charSet: "UTF-8" }), _jsx("meta", { httpEquiv: "content-type", content: "text/html; charset=UTF-8" }), _jsx("meta", { httpEquiv: 'Expires', content: '0' }), _jsx("meta", { httpEquiv: 'Pragma', content: 'no-cache' }), _jsx("meta", { httpEquiv: 'Cache-Control', content: 'no-cache' }), _jsx("meta", { name: "application-name", content: site_name }), _jsx("meta", { name: "author", content: site_name + ", " + email }), _jsx("meta", { name: 'copyright', content: site_name }), _jsx("meta", { name: "creator", content: site_name }), _jsx("meta", { name: "description", content: description }), _jsx("meta", { name: "keywords", content: keywords }), _jsx("meta", { name: 'language', content: 'EN' }), _jsx("meta", { name: 'owner', content: site_name }), _jsx("meta", { name: "publisher", content: site_name }), _jsx("meta", { name: 'rating', content: 'General' }), _jsx("meta", { name: 'reply-to', content: email }), _jsx("meta", { name: "robots", content: "index, follow" }), _jsx("meta", { name: 'url', content: url }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0, shrink-to-fit=no" }), _jsx("meta", { property: "og:description", content: description }), _jsx("meta", { property: 'og:email', content: email }), _jsx("meta", { property: "og:image", content: image }), _jsx("meta", { property: "og:image:height", content: image_height }), _jsx("meta", { property: "og:image:width", content: image_width }), _jsx("meta", { property: "og:locale", content: "en_US" }), _jsx("meta", { property: "og:site_name", content: site_name }), _jsx("meta", { property: "og:title", content: title }), _jsx("meta", { property: "og:type", content: "website" }), _jsx("meta", { property: "og:url", content: url }), _jsx("meta", { itemProp: "name", content: site_name }), _jsx("meta", { itemProp: "url", content: url }), _jsx("meta", { itemProp: "description", content: description }), _jsx("meta", { itemProp: "thumbnailUrl", content: image }), _jsx("meta", { property: "twitter:domain", content: new URL(origin).hostname }), _jsx("meta", { property: "twitter:url", content: url }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx("meta", { name: "twitter:creator", content: site_name }), _jsx("meta", { name: "twitter:description", content: description }), _jsx("meta", { name: "twitter:image", content: image }), _jsx("meta", { name: "twitter:image:height", content: image_height }), _jsx("meta", { name: "twitter:image:width", content: image_width }), _jsx("meta", { name: "twitter:title", content: title }), _jsx("link", { rel: "author", href: origin }), _jsx("link", { rel: "canonical", href: url }), _jsx("link", { rel: "icon", type: "image/x-icon", href: favicon }), _jsx("link", { rel: "shortcut icon", type: "image/x-icon", href: favicon }), _jsx("link", { rel: "manifest", href: "/manifest.webmanifest" }), _jsx("link", { rel: "preconnect", href: "https://images.ctfassets.net/" }), _jsx("link", { rel: "preconnect", href: "https://res.cloudinary.com/" }), _jsx("link", { rel: "preconnect", href: "https://farm2.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm6.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm8.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm66.static.flickr.com" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("title", { children: title }), _jsx("meta", { charSet: "UTF-8" }), _jsx("meta", { httpEquiv: "content-type", content: "text/html; charset=UTF-8" }), _jsx("meta", { httpEquiv: 'Expires', content: '0' }), _jsx("meta", { httpEquiv: 'Pragma', content: 'no-cache' }), _jsx("meta", { httpEquiv: 'Cache-Control', content: 'no-cache' }), _jsx("meta", { name: "application-name", content: site_name }), _jsx("meta", { name: "author", content: site_name + ", " + email }), _jsx("meta", { name: 'copyright', content: site_name }), _jsx("meta", { name: "creator", content: site_name }), _jsx("meta", { name: "description", content: description }), _jsx("meta", { name: "keywords", content: keywords }), _jsx("meta", { name: 'language', content: 'EN' }), _jsx("meta", { name: 'owner', content: site_name }), _jsx("meta", { name: "publisher", content: site_name }), _jsx("meta", { name: 'rating', content: 'General' }), _jsx("meta", { name: 'reply-to', content: email }), _jsx("meta", { name: "robots", content: "index, follow" }), _jsx("meta", { name: 'url', content: url }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0, shrink-to-fit=no" }), _jsx("meta", { property: "og:description", content: description }), _jsx("meta", { property: 'og:email', content: email }), _jsx("meta", { property: "og:image", content: image }), _jsx("meta", { property: "og:image:height", content: image_height != null ? String(image_height) : undefined }), _jsx("meta", { property: "og:image:width", content: image_width != null ? String(image_width) : undefined }), _jsx("meta", { property: "og:locale", content: "en_US" }), _jsx("meta", { property: "og:site_name", content: site_name }), _jsx("meta", { property: "og:title", content: title }), _jsx("meta", { property: "og:type", content: "website" }), _jsx("meta", { property: "og:url", content: url }), _jsx("meta", { itemProp: "name", content: site_name }), _jsx("meta", { itemProp: "url", content: url }), _jsx("meta", { itemProp: "description", content: description }), _jsx("meta", { itemProp: "thumbnailUrl", content: image }), _jsx("meta", { property: "twitter:domain", content: newOrigin }), _jsx("meta", { property: "twitter:url", content: url }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx("meta", { name: "twitter:creator", content: site_name }), _jsx("meta", { name: "twitter:description", content: description }), _jsx("meta", { name: "twitter:image", content: image }), _jsx("meta", { name: "twitter:image:height", content: image_height != null ? String(image_height) : undefined }), _jsx("meta", { name: "twitter:image:width", content: image_width != null ? String(image_width) : undefined }), _jsx("meta", { name: "twitter:title", content: title }), _jsx("link", { rel: "author", href: newOrigin }), _jsx("link", { rel: "canonical", href: url }), _jsx("link", { rel: "icon", type: "image/x-icon", href: favicon }), _jsx("link", { rel: "shortcut icon", type: "image/x-icon", href: favicon }), _jsx("link", { rel: "manifest", href: "/manifest.webmanifest" }), _jsx("link", { rel: "preconnect", href: "https://images.ctfassets.net/" }), _jsx("link", { rel: "preconnect", href: "https://res.cloudinary.com/" }), _jsx("link", { rel: "preconnect", href: "https://farm2.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm6.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm8.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm66.static.flickr.com" })] }));
 }

package/dist/components/general/proxy-csp-listener.js

@@ -0,0 +1,20 @@
+"use client";
+const debug = false;
+export function attachProxyCspListener(onCsp) {
+    const handler = (e) => {
+        const info = {
+            blockedURI: e.blockedURI,
+            violatedDirective: e.violatedDirective,
+            originalPolicy: e.originalPolicy,
+            sourceFile: e?.sourceFile,
+            disposition: e.disposition,
+            referrer: e.referrer,
+        };
+        const defaultHandler = (i) => { if (debug)
+            console.warn('CSP violation', i); };
+        (onCsp ?? defaultHandler)(info);
+    };
+    window.addEventListener('securitypolicyviolation', handler);
+    // Return a cleanup function so callers can detach the listener
+    return () => window.removeEventListener('securitypolicyviolation', handler);
+}

package/dist/components/general/proxy-handler.js

@@ -41,10 +41,12 @@ export function handlePixelatedProxy(req) {
     response.headers.set("Permissions-Policy", "camera=(), microphone=(), geolocation=(), interest-cohort=()");
     // Content Security Policy (CSP)
     // Includes all discovered domains in the workspace: HubSpot, Gravatar, Flickr, Contentful, Cloudinary, eBay, and Google Analytics + Search.
+    const scriptSrc = "'self' 'unsafe-inline' 'unsafe-eval' https://va.vercel-scripts.com https://*.googletagmanager.com https://*.hs-scripts.com https://*.hs-analytics.net https://*.hsforms.net https://*.hscollectedforms.net https://*.hs-banner.com https://*.google.com https://*.doubleclick.net https://*.googleadservices.com https://*.adtrafficquality.google https://*.hsappstatic.net https://assets.calendly.com https://cdn.jsdelivr.net";
     const csp = [
         "default-src 'self'",
-        "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://va.vercel-scripts.com https://*.googletagmanager.com https://*.hs-scripts.com https://*.hs-analytics.net https://*.hsforms.net https://*.hscollectedforms.net https://*.hs-banner.com https://*.google.com https://*.doubleclick.net https://*.googleadservices.com https://*.adtrafficquality.google https://*.hsappstatic.net https://assets.calendly.com",
-        "connect-src 'self' https: https://*.hubspot.com https://proxy.pixelated.tech https://sendmail.pixelated.tech https://*.google-analytics.com https://*.analytics.google.com",
+        `script-src ${scriptSrc}`,
+        `script-src-elem ${scriptSrc}`,
+        "connect-src 'self' https: https://*.hubspot.com https://proxy.pixelated.tech https://sendmail.pixelated.tech https://*.google-analytics.com https://*.analytics.google.com https://cdn.jsdelivr.net",
         "img-src 'self' data: https: https://*.gravatar.com https://*.staticflickr.com https://*.ctfassets.net https://res.cloudinary.com https://*.ebayimg.com",
         "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://*.google.com",
         "font-src 'self' data: https://fonts.gstatic.com",

package/dist/components/general/sitemap.js

@@ -296,25 +296,18 @@ export async function createContentfulImageURLs(props) {
     }
     return sitemap;
 }
-const defaultEbayProps = {
-    proxyURL: "https://proxy.pixelated.tech/prod/proxy?url=",
-    baseTokenURL: 'https://api.ebay.com/identity/v1/oauth2/token',
-    tokenScope: 'https://api.ebay.com/oauth/api_scope',
-    baseSearchURL: 'https://api.ebay.com/buy/browse/v1/item_summary/search',
-    qsSearchURL: '?q=sunglasses&fieldgroups=full&category_ids=79720&aspect_filter=categoryId:79720&filter=sellers:{pixelatedtech}&sort=newlyListed&limit=200',
-    baseItemURL: 'https://api.ebay.com/buy/browse/v1/item',
-    qsItemURL: '/v1|295959752403|0?fieldgroups=PRODUCT,ADDITIONAL_SELLER_DETAILS',
-    appId: 'BrianWha-Pixelate-PRD-1fb4458de-1a8431fe', // clientId
-    appCertId: 'PRD-fb4458deef01-0d54-496a-b572-a04b', // clientSecret
-    sbxAppId: 'BrianWha-Pixelate-SBX-ad482b6ae-8cb8fead', // Sandbox
-    sbxAppCertId: '',
-    globalId: 'EBAY-US',
-};
 export async function createEbayItemURLs(origin) {
     const sitemap = [];
-    await getEbayAppToken({ apiProps: defaultEbayProps })
+    // Load configuration
+    const config = getFullPixelatedConfig();
+    const globalProxy = config.global?.proxyUrl;
+    const ebayProps = {
+        ...(globalProxy ? { proxyURL: globalProxy } : {}),
+        ...config.ebay
+    };
+    await getEbayAppToken({ apiProps: ebayProps })
         .then(async (response) => {
-        await getEbayItemsSearch({ apiProps: defaultEbayProps, token: response })
+        await getEbayItemsSearch({ apiProps: ebayProps, token: response })
             .then((items) => {
             for (const item of items.itemSummaries) {
                 sitemap.push({

package/dist/components/shoppingcart/ebay.components.js

@@ -4,11 +4,11 @@ import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { Carousel } from '../general/carousel';
 import { SmartImage } from "../general/smartimage";
-import { defaultEbayProps, ebaySunglassCategory, getEbayItems, getEbayItem, getShoppingCartItem } from "./ebay.functions";
+import { getEbayItems, getEbayItem, getShoppingCartItem, getEbayRateLimits, getEbayAppToken } from "./ebay.functions";
 import { addToShoppingCart } from "./shoppingcart.functions";
 import { AddToCartButton, /* GoToCartButton */ ViewItemDetails } from "./shoppingcart.components";
 import { getCloudinaryRemoteFetchURL as getImg } from "../general/cloudinary";
-import { Loading, ToggleLoading } from "../general/loading";
+import { ToggleLoading } from "../general/loading";
 import { usePixelatedConfig } from "../config/config.client";
 import "../../css/pixelated.grid.scss";
 import "./ebay.css";
@@ -20,9 +20,10 @@ EbayItems.propTypes = {
 };
 export function EbayItems(props) {
     // https://developer.ebay.com/devzone/finding/HowTo/GettingStarted_JS_NV_JSON/GettingStarted_JS_NV_JSON.html
+    const config = usePixelatedConfig();
     const [items, setItems] = useState([]);
     const [aspects, setAspects] = useState([]);
-    const [apiProps] = useState({ ...defaultEbayProps, ...props.apiProps });
+    const apiProps = { ...(config?.ebay || {}), ...props.apiProps };
     paintItems.propTypes = {
         items: PropTypes.array.isRequired,
         cloudinaryProductEnv: PropTypes.string,
@@ -33,7 +34,7 @@ export function EbayItems(props) {
         let newItems = [];
         for (let key in props.items) {
             const item = props.items[key];
-            const newItem = _jsx(EbayListItem, { item: item, cloudinaryProductEnv: props.cloudinaryProductEnv }, item.legacyItemId);
+            const newItem = _jsx(EbayListItem, { item: item, apiProps: apiProps, cloudinaryProductEnv: props.cloudinaryProductEnv }, item.legacyItemId);
             newItems.push(newItem);
         }
         return newItems;
@@ -44,6 +45,8 @@ export function EbayItems(props) {
     };
     async function fetchItems(props) {
         try {
+            if (debug)
+                console.log("Fetching ebay API Items Data");
             const myApiProps = { ...apiProps };
             if (props) {
                 const params = new URLSearchParams(myApiProps.qsSearchURL);
@@ -55,9 +58,9 @@ export function EbayItems(props) {
             }
             const response = await getEbayItems({ apiProps: myApiProps });
             if (debug)
-                console.log("eBay API Get Items Data", response);
-            setItems(response?.itemSummaries || []);
-            setAspects(response?.refinement?.aspectDistributions || []);
+                console.log("eBay API Search Items Data:", response);
+            setItems(response?.itemSummaries);
+            setAspects(response?.refinement?.aspectDistributions);
         }
         catch (error) {
             console.error("Error fetching eBay items:", error);
@@ -70,11 +73,11 @@ export function EbayItems(props) {
         fetchItems();
         ToggleLoading(false);
     }, []);
-    if (items.length > 0) {
-        return (_jsxs(_Fragment, { children: [_jsx(Loading, {}), _jsx("div", { className: "ebayItemsHeader", children: _jsx(EbayItemHeader, { title: `${items.length} Store Items` }) }), _jsx("div", { className: "ebayItemsHeader", children: _jsx(EbayListFilter, { aspects: aspects, callback: fetchItems }) }), _jsx("div", { id: "ebayItems", className: "ebayItems", children: paintItems({ items: items, cloudinaryProductEnv: props.cloudinaryProductEnv }) })] }));
+    if (items && items.length > 0) {
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "ebayItemsHeader", children: _jsx(EbayItemHeader, { title: `${items.length} Store Items` }) }), _jsx("div", { className: "ebayItemsHeader", children: _jsx(EbayListFilter, { aspects: aspects, callback: fetchItems }) }), _jsx("div", { id: "ebayItems", className: "ebayItems", children: paintItems({ items: items, cloudinaryProductEnv: props.cloudinaryProductEnv }) })] }));
     }
     else {
-        return (_jsx("div", { className: "section-container", children: _jsx("div", { id: "ebayItems", className: "ebayItems", children: _jsx(Loading, {}) }) }));
+        return (_jsx("div", { className: "section-container", children: _jsx("div", { id: "ebayItems", className: "ebayItems" }) }));
     }
 }
 EbayListFilter.propTypes = {
@@ -124,16 +127,18 @@ export function EbayListFilter(props) {
 EbayListItem.propTypes = {
     item: PropTypes.any.isRequired,
     cloudinaryProductEnv: PropTypes.string,
+    apiProps: PropTypes.any,
 };
 export function EbayListItem(props) {
     const thisItem = props.item;
+    const apiProps = props.apiProps;
     // const itemURL = thisItem.itemWebUrl;
     const itemURL = "./store/" + thisItem.legacyItemId;
     const itemURLTarget = "_self"; /* "_blank" */
     const itemImage = (props.cloudinaryProductEnv)
         ? getImg({ url: thisItem.thumbnailImages[0].imageUrl, product_env: props.cloudinaryProductEnv })
         : thisItem.thumbnailImages[0].imageUrl;
-    const shoppingCartItem = getShoppingCartItem({ thisItem: thisItem, cloudinaryProductEnv: props.cloudinaryProductEnv });
+    const shoppingCartItem = getShoppingCartItem({ thisItem: thisItem, cloudinaryProductEnv: props.cloudinaryProductEnv, apiProps: apiProps });
     // CHANGE EBAY URL TO LOCAL EBAY ITEM DETAIL URL
     shoppingCartItem.itemURL = itemURL;
     const config = usePixelatedConfig();
@@ -143,7 +148,7 @@ export function EbayListItem(props) {
                     ? _jsx("a", { href: itemURL, target: itemURLTarget, rel: "noopener noreferrer", children: itemImageComponent })
                     : (itemImageComponent) }), _jsxs("div", { className: "ebayItemBody grid-s5-e13", children: [_jsx("div", { className: "ebayItemHeader", children: itemURL
                             ? _jsx(EbayItemHeader, { url: itemURL, target: itemURLTarget, title: thisItem.title })
-                            : _jsx(EbayItemHeader, { title: thisItem.title }) }), _jsxs("div", { className: "ebayItemDetails grid12", children: [_jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.legacyItemId] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.categories[0].categoryId == ebaySunglassCategory ? 1 : 10] }), _jsxs("div", { children: [_jsx("b", { children: "Condition: " }), thisItem.condition] }), _jsxs("div", { children: [_jsx("b", { children: "Seller: " }), thisItem.seller.username, " (", thisItem.seller.feedbackScore, ")", _jsx("br", {}), thisItem.seller.feedbackPercentage, "% positive"] }), _jsxs("div", { children: [_jsx("b", { children: "Buying Options: " }), thisItem.buyingOptions[0]] }), _jsxs("div", { children: [_jsx("b", { children: "Location: " }), thisItem.itemLocation.postalCode + ", " + thisItem.itemLocation.country] }), _jsxs("div", { children: [_jsx("b", { children: "Listing Date: " }), thisItem.itemCreationDate] })] }), _jsx("div", { className: "ebayItemPrice", children: itemURL
+                            : _jsx(EbayItemHeader, { title: thisItem.title }) }), _jsxs("div", { className: "ebayItemDetails grid12", children: [_jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.legacyItemId] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.categories[0].categoryId == apiProps.itemCategory ? 1 : 10] }), _jsxs("div", { children: [_jsx("b", { children: "Condition: " }), thisItem.condition] }), _jsxs("div", { children: [_jsx("b", { children: "Seller: " }), thisItem.seller.username, " (", thisItem.seller.feedbackScore, ")", _jsx("br", {}), thisItem.seller.feedbackPercentage, "% positive"] }), _jsxs("div", { children: [_jsx("b", { children: "Buying Options: " }), thisItem.buyingOptions[0]] }), _jsxs("div", { children: [_jsx("b", { children: "Location: " }), thisItem.itemLocation.postalCode + ", " + thisItem.itemLocation.country] }), _jsxs("div", { children: [_jsx("b", { children: "Listing Date: " }), thisItem.itemCreationDate] })] }), _jsx("div", { className: "ebayItemPrice", children: itemURL
                             ? _jsxs("a", { href: itemURL, target: itemURLTarget, rel: "noreferrer", children: ["$", thisItem.price.value + " " + thisItem.price.currency] })
                             : "$" + thisItem.price.value + " " + thisItem.price.currency }), _jsx("br", {}), _jsxs("div", { className: "ebayItemAddToCart", children: [_jsx(ViewItemDetails, { href: "/store", itemID: thisItem.legacyItemId }), _jsx(AddToCartButton, { handler: addToShoppingCart, item: shoppingCartItem, itemID: thisItem.legacyItemId })] })] })] }));
 }
@@ -164,8 +169,9 @@ EbayItemDetail.propTypes = {
     cloudinaryProductEnv: PropTypes.string,
 };
 export function EbayItemDetail(props) {
+    const config = usePixelatedConfig();
     const [item, setItem] = useState({});
-    const [apiProps] = useState({ ...defaultEbayProps, ...props.apiProps });
+    const apiProps = { ...(config?.ebay || {}), ...props.apiProps };
     useEffect(() => {
         if (debug)
             console.log("Running useEffect");
@@ -191,11 +197,11 @@ export function EbayItemDetail(props) {
                 : thisImage.imageUrl }));
         const itemURL = undefined;
         const itemURLTarget = "_self"; /* "_blank" */
-        const shoppingCartItem = getShoppingCartItem({ thisItem: thisItem, cloudinaryProductEnv: props.cloudinaryProductEnv });
+        const shoppingCartItem = getShoppingCartItem({ thisItem: thisItem, cloudinaryProductEnv: props.cloudinaryProductEnv, apiProps: apiProps });
         shoppingCartItem.itemURL = itemURL;
         return (_jsx(_Fragment, { children: _jsxs("div", { className: "ebayItem row-12col", children: [_jsx("div", { className: "ebayItemHeader grid-s1-e13", children: itemURL
                             ? _jsx(EbayItemHeader, { url: itemURL, title: thisItem.title })
-                            : _jsx(EbayItemHeader, { title: thisItem.title }) }), _jsx("br", {}), _jsx("div", { className: "ebayItemPhotoCarousel grid-s1-e7", children: _jsx(Carousel, { cards: images, draggable: true, imgFit: "contain" }) }), _jsxs("div", { className: "grid-s7-e13", children: [_jsx("div", { className: "ebayItemDetails grid12", children: _jsx("div", { dangerouslySetInnerHTML: { __html: thisItem.description.replace(/(<br\s*\/?>\s*){2,}/gi, '') } }) }), _jsx("br", {}), _jsxs("div", { className: "ebayItemDetails grid12", children: [_jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.legacyItemId] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.categoryId == ebaySunglassCategory ? 1 : 10] }), _jsxs("div", { children: [_jsx("b", { children: "Category: " }), thisItem.categoryPath] }), _jsxs("div", { children: [_jsx("b", { children: "Condition: " }), thisItem.condition] }), _jsxs("div", { children: [_jsx("b", { children: "Seller: " }), thisItem.seller.username, " (", thisItem.seller.feedbackScore, ")", _jsx("br", {}), thisItem.seller.feedbackPercentage, "% positive"] }), _jsxs("div", { children: [_jsx("b", { children: "Buying Options: " }), thisItem.buyingOptions[0]] }), _jsxs("div", { children: [_jsx("b", { children: "Location: " }), thisItem.itemLocation.city + ", " + thisItem.itemLocation.stateOrProvince] }), _jsxs("div", { children: [_jsx("b", { children: "Listing Date: " }), thisItem.itemCreationDate] }), _jsx("br", {})] }), _jsx("div", { className: "ebayItemPrice", children: itemURL
+                            : _jsx(EbayItemHeader, { title: thisItem.title }) }), _jsx("br", {}), _jsx("div", { className: "ebayItemPhotoCarousel grid-s1-e7", children: _jsx(Carousel, { cards: images, draggable: true, imgFit: "contain" }) }), _jsxs("div", { className: "grid-s7-e13", children: [_jsx("div", { className: "ebayItemDetails grid12", children: _jsx("div", { dangerouslySetInnerHTML: { __html: thisItem.description.replace(/(<br\s*\/?>\s*){2,}/gi, '') } }) }), _jsx("br", {}), _jsxs("div", { className: "ebayItemDetails grid12", children: [_jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.legacyItemId] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.categoryId == apiProps.itemCategory ? 1 : 10] }), _jsxs("div", { children: [_jsx("b", { children: "Category: " }), thisItem.categoryPath] }), _jsxs("div", { children: [_jsx("b", { children: "Condition: " }), thisItem.condition] }), _jsxs("div", { children: [_jsx("b", { children: "Seller: " }), thisItem.seller.username, " (", thisItem.seller.feedbackScore, ")", _jsx("br", {}), thisItem.seller.feedbackPercentage, "% positive"] }), _jsxs("div", { children: [_jsx("b", { children: "Buying Options: " }), thisItem.buyingOptions[0]] }), _jsxs("div", { children: [_jsx("b", { children: "Location: " }), thisItem.itemLocation.city + ", " + thisItem.itemLocation.stateOrProvince] }), _jsxs("div", { children: [_jsx("b", { children: "Listing Date: " }), thisItem.itemCreationDate] }), _jsx("br", {})] }), _jsx("div", { className: "ebayItemPrice", children: itemURL
                                     ? _jsxs("a", { href: itemURL, target: itemURLTarget, rel: "noreferrer", children: ["$", thisItem.price.value + " " + thisItem.price.currency] })
                                     : "$" + thisItem.price.value + " " + thisItem.price.currency }), _jsx("br", {}), _jsx("div", { className: "ebayItemAddToCart", children: _jsx(AddToCartButton, { handler: addToShoppingCart, item: shoppingCartItem, itemID: thisItem.legacyItemId }) })] })] }) }));
     }
@@ -203,3 +209,105 @@ export function EbayItemDetail(props) {
         return (_jsx(_Fragment, { children: _jsx("div", { id: "ebayItems", className: "ebayItems", children: _jsx("div", { className: "centered", children: "Loading..." }) }) }));
     }
 }
+/* ========== EBAY RATE LIMITS VISUALIZER ========== */
+EbayRateLimitsVisualizer.propTypes = {
+    token: PropTypes.string,
+    apiProps: PropTypes.object,
+};
+export function EbayRateLimitsVisualizer(props) {
+    const config = usePixelatedConfig();
+    const apiProps = {
+        ...(config?.ebay || {}),
+        ...props.apiProps
+    };
+    const [token, setToken] = useState(props.token || '');
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [fetchingToken, setFetchingToken] = useState(false);
+    const [error, setError] = useState(null);
+    const fetchToken = async () => {
+        setFetchingToken(true);
+        setError(null);
+        try {
+            const newToken = await getEbayAppToken({ apiProps });
+            if (newToken) {
+                setToken(newToken);
+                return newToken;
+            }
+            else {
+                setError('Failed to fetch eBay token. Check your appId and appCertId.');
+            }
+        }
+        catch (e) {
+            setError('Token fetch error: ' + e.message);
+        }
+        finally {
+            setFetchingToken(false);
+        }
+    };
+    // Auto-fetch token on mount if credentials are available
+    useEffect(() => {
+        if (!token && apiProps.appId && apiProps.appCertId) {
+            fetchToken();
+        }
+    }, []);
+    const fetchData = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const result = await getEbayRateLimits({
+                token: token,
+                apiProps: apiProps
+            });
+            setData(result);
+        }
+        catch (e) {
+            setError(e.message || 'Failed to fetch data');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const showMockData = () => {
+        setData({
+            rate_limit: {
+                apiContext: "Buy",
+                apiName: "Browse",
+                apiVersion: "v1",
+                resources: [
+                    {
+                        resourceName: "item_summary",
+                        methods: [
+                            {
+                                methodName: "search",
+                                quotaTotal: 5000,
+                                quotaRemaining: 4950,
+                                quotaResets: "2026-01-10T00:00:00.000Z"
+                            }
+                        ]
+                    }
+                ]
+            },
+            user_rate_limit: {
+                userContext: "Individual",
+                resources: [
+                    {
+                        resourceName: "item",
+                        methods: [
+                            {
+                                methodName: "get",
+                                quotaTotal: 1000,
+                                quotaRemaining: 990,
+                                quotaResets: "2026-01-10T00:00:00.000Z"
+                            }
+                        ]
+                    }
+                ]
+            }
+        });
+    };
+    // Check for API-level errors in the returned data
+    const hasTokenError = data?.rate_limit?.errors?.[0]?.message === "Invalid access token" ||
+        data?.user_rate_limit?.errors?.[0]?.message === "Invalid access token";
+    return (_jsxs("div", { style: { padding: '20px', fontFamily: 'sans-serif', border: '1px solid #ddd', borderRadius: '8px' }, children: [_jsx("h3", { children: "Ebay Rate Limits Data Visualizer" }), _jsxs("div", { style: { marginBottom: '20px', display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsxs("div", { style: { display: 'flex', gap: '10px', alignItems: 'center' }, children: [_jsx("label", { htmlFor: "ebay-token", children: _jsx("b", { children: "Token:" }) }), _jsx("input", { id: "ebay-token", type: "text", value: token, onChange: (e) => setToken(e.target.value), placeholder: "Paste eBay token here", style: { flexGrow: 1, padding: '5px', fontFamily: 'monospace' } }), _jsx("button", { onClick: fetchToken, disabled: fetchingToken || !apiProps.appId, children: fetchingToken ? 'Fetching Token...' : 'Auto-Fetch Token' })] }), _jsxs("div", { style: { display: 'flex', gap: '10px' }, children: [_jsx("button", { onClick: fetchData, disabled: loading || !token, style: { padding: '8px 16px', cursor: 'pointer', background: '#0070f3', color: 'white', border: 'none', borderRadius: '4px' }, children: loading ? 'Fetching Limits...' : 'Fetch Rate Limits' }), _jsx("button", { onClick: showMockData, style: { padding: '8px 16px', cursor: 'pointer', border: '1px solid #ccc', borderRadius: '4px', background: 'white' }, children: "Load Sample Structure" })] })] }), error && (_jsxs("div", { style: { color: '#d00', background: '#fff5f5', padding: '10px', borderRadius: '4px', marginBottom: '10px', border: '1px solid #feb2b2' }, children: [_jsx("b", { children: "Error:" }), " ", error] })), hasTokenError && (_jsxs("div", { style: { color: '#c53030', background: '#fff5f5', padding: '10px', borderRadius: '4px', marginBottom: '10px', border: '1px solid #feb2b2' }, children: ["\uD83D\uDEA8 ", _jsx("b", { children: "Authentication Error:" }), " Your eBay access token is invalid or expired. Use \"Auto-Fetch Token\" if credentials are set, or paste a new one."] })), data ? (_jsxs("div", { style: { marginTop: '20px' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("h4", { children: "Response Data:" }), _jsx("button", { onClick: () => setData(null), style: { padding: '4px 8px', fontSize: '12px' }, children: "Clear" })] }), _jsx("pre", { style: { background: '#f8f9fa', padding: '15px', borderRadius: '5px', overflow: 'auto', border: '1px solid #e9ecef', fontSize: '13px' }, children: JSON.stringify(data, null, 2) })] })) : (_jsx("div", { style: { color: '#666', fontStyle: 'italic', marginTop: '20px' }, children: "No rate limit data loaded yet." }))] }));
+}