@pixelated-tech/components 3.7.13 → 3.8.1

package/README.md

@@ -242,6 +242,13 @@ External service integrations:
 - **Yelp** - Business reviews and ratings
 
 
+### Utilities
+Shared technical utilities and helpers:
+- **CacheManager** - Unified caching layer with Memory, Session, and LocalStorage support with TTL and SSR fallbacks.
+- **Cloudinary** - Image processing and URL generation helpers.
+- **Date/Time** - Formatting and manipulation utilities.
+
+
 ### Site Health & Monitoring
 Comprehensive site health monitoring and analytics:
 - **SiteHealthOverview** - Dashboard overview of site health metrics

package/dist/components/admin/site-health/site-health-utils.js

@@ -25,6 +25,28 @@ export function formatScore(score) {
  * Formats audit item details for display
  */
 export function formatAuditItem(item, auditTitle) {
+    // Handle raw timing data that might be passed directly
+    if (typeof item === 'number') {
+        let context = '';
+        if (auditTitle) {
+            if (auditTitle.toLowerCase().includes('server') || auditTitle.toLowerCase().includes('backend')) {
+                context = ' server response';
+            }
+            else if (auditTitle.toLowerCase().includes('network') || auditTitle.toLowerCase().includes('request')) {
+                context = ' network request';
+            }
+            else if (auditTitle.toLowerCase().includes('render') || auditTitle.toLowerCase().includes('blocking')) {
+                context = ' render blocking';
+            }
+            else if (auditTitle.toLowerCase().includes('javascript') || auditTitle.toLowerCase().includes('js')) {
+                context = ' JavaScript';
+            }
+            else if (auditTitle.toLowerCase().includes('image') || auditTitle.toLowerCase().includes('media')) {
+                context = ' media resource';
+            }
+        }
+        return `${item.toFixed(2)}ms${context}`;
+    }
     // Handle URLs
     if (item.url && typeof item.url === 'string') {
         return item.url;

package/dist/components/config/config.example.js

@@ -1,6 +1,9 @@
 // Example pixelated.config.ts for consumer apps.
 // Place this file in your app (for example: `src/pixelated.config.ts`) and import it where you mount the provider.
 const pixelatedConfig = {
+    global: {
+        proxyUrl: 'https://proxy.pixelated.tech/prod/proxy?url=',
+    },
     cloudinary: {
         product_env: 'your-cloud-name',
         baseUrl: 'https://res.cloudinary.com',
@@ -18,8 +21,10 @@ const pixelatedConfig = {
     ebay: {
         proxyURL: 'https://proxy.provier.com/proxy?url=',
         appId: 'your-ebay-client-id',
+        appDevId: 'your-ebay-client-dev-id',
         appCertId: 'your-ebay-client-secret',
         sbxAppId: 'your-ebay-sandbox-client-id',
+        sbxAppDevId: 'your-ebay-sandbox-client-dev-id',
         sbxAppCertId: 'your-ebay-sandbox-client-secret',
         globalId: 'EBAY_US',
         environment: 'production',
@@ -30,9 +35,6 @@ const pixelatedConfig = {
         baseItemURL: 'https://api.ebay.com/buy/browse/v1/item',
         qsItemURL: '/v1|295959752403|0?fieldgroups=PRODUCT,ADDITIONAL_SELLER_DETAILS',
     },
-    featureFlags: {
-        enableNewGrid: true,
-    },
     flickr: {
         baseURL: 'https://api.flickr.com/services/rest/?',
         urlProps: {
@@ -67,9 +69,6 @@ const pixelatedConfig = {
         payPalApiKey: "your-paypal-client-id",
         payPalSecret: "your-paypal-client-secret"
     },
-    proxy: {
-        proxyURL: 'https://proxy.pixelated.tech/prod/proxy?url='
-    },
     wordpress: {
         baseURL: 'https://public-api.wordpress.com/rest/v1/sites/',
         site: 'your-blog.wordpress.com'

package/dist/components/config/config.js

@@ -1,4 +1,5 @@
 import { decrypt, isEncrypted } from './crypto';
+import { getClientOnlyPixelatedConfig as stripSecrets } from './config.utils';
 import fs from 'fs';
 import path from 'path';
 const debug = false;
@@ -14,7 +15,7 @@ export function getFullPixelatedConfig() {
     const filename = 'pixelated.config.json';
     const paths = [
         path.join(process.cwd(), 'src/app/config', filename),
-        path.join(process.cwd(), 'app/config', filename),
+        path.join(process.cwd(), 'src/config', filename),
         path.join(process.cwd(), filename),
         path.join(process.cwd(), '.next/server', filename), // Sometimes moved here in build
     ];
@@ -31,7 +32,7 @@ export function getFullPixelatedConfig() {
         }
     }
     if (!raw) {
-        console.error('PIXELATED_CONFIG not found. Ensure src/app/config/pixelated.config.json is available.');
+        console.error('pixelated.config.json not found. Searched in src/app/config/, src/config/, and root.');
         return {};
     }
     // Handle decryption if the content is encrypted
@@ -67,31 +68,8 @@ export function getFullPixelatedConfig() {
  * This will walk the object and drop any fields that match a secret pattern.
  */
 export function getClientOnlyPixelatedConfig(full) {
-    const src = full ?? getFullPixelatedConfig();
-    function isSecretKey(key) {
-        // Explicitly allow common public-facing keys
-        if (/api_key|apikey|public_key/i.test(key))
-            return false;
-        return /token|secret|key|password|management|access/i.test(key);
-    }
-    function strip(obj) {
-        if (!obj || typeof obj !== 'object')
-            return obj;
-        if (Array.isArray(obj))
-            return obj.map(strip);
-        const out = {};
-        for (const k of Object.keys(obj)) {
-            if (isSecretKey(k))
-                continue;
-            out[k] = strip(obj[k]);
-        }
-        return out;
-    }
-    try {
-        return strip(src);
-    }
-    catch (err) {
-        console.error('Failed to strip secrets from config', err);
-        return {};
-    }
+    const src = (full === undefined) ? getFullPixelatedConfig() : full;
+    if (src === null || typeof src !== 'object')
+        return (src || {});
+    return stripSecrets(src);
 }

package/dist/components/config/config.types.js

@@ -1,2 +1,34 @@
 // Types for Pixelated integration configuration
-export {};
+/**
+ * Metadata defining which configuration keys are secrets and must be stripped
+ * before being sent to the client (browser).
+ */
+export const SECRET_CONFIG_KEYS = {
+    // Keys found at the root of the configuration object
+    global: [
+        'PIXELATED_CONFIG_KEY'
+    ],
+    // Keys found within specific service configuration blocks
+    services: {
+        cloudinary: [
+            'api_key',
+            'api_secret'
+        ],
+        contentful: [
+            'management_access_token',
+            'preview_access_token'
+        ],
+        ebay: [
+            'sbxAppId'
+        ],
+        paypal: [
+            'sandboxPayPalApiKey',
+            'sandboxPayPalSecret',
+            'payPalApiKey',
+            'payPalSecret'
+        ],
+        instagram: [
+            'accessToken'
+        ]
+    }
+};

package/dist/components/config/config.utils.js

@@ -0,0 +1,52 @@
+import { SECRET_CONFIG_KEYS } from './config.types';
+/**
+ * Produce a client-safe copy of a config by removing secret-like keys.
+ */
+export function getClientOnlyPixelatedConfig(src) {
+    const visited = new WeakSet();
+    function isSecretKey(key, serviceName) {
+        // 1. Check Global Secret List
+        if (SECRET_CONFIG_KEYS.global.includes(key))
+            return true;
+        // 2. Check Service-Specific Secret List
+        if (serviceName && SECRET_CONFIG_KEYS.services[serviceName]) {
+            const serviceSecrets = SECRET_CONFIG_KEYS.services[serviceName];
+            if (serviceSecrets.includes(key)) {
+                // console.log(`Config Stripper: Removing secret key "${key}" from service "${serviceName}"`);
+                return true;
+            }
+        }
+        return false;
+    }
+    function strip(obj, serviceName) {
+        // Base case for non-objects
+        if (obj === null || typeof obj !== 'object')
+            return obj;
+        // Avoid circular references
+        if (visited.has(obj))
+            return '[Circular]';
+        visited.add(obj);
+        // Handle Arrays
+        if (Array.isArray(obj)) {
+            return obj.map((item) => strip(item, serviceName));
+        }
+        const out = {};
+        for (const k of Object.keys(obj)) {
+            // At the top level (serviceName is undefined), k is the service name
+            const currentService = serviceName || k;
+            // Check if this key should be stripped
+            if (isSecretKey(k, serviceName)) {
+                continue;
+            }
+            out[k] = strip(obj[k], currentService);
+        }
+        return out;
+    }
+    try {
+        return strip(src);
+    }
+    catch (err) {
+        console.error('Failed to strip secrets from config', err);
+        return {};
+    }
+}

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/contentful.delivery.js

@@ -61,6 +61,9 @@ getContentfulEntriesByType.propTypes = {
 };
 export async function getContentfulEntriesByType(props) {
     const allEntries = await getContentfulEntries({ apiProps: props.apiProps });
+    if (!allEntries || !allEntries.items) {
+        return { items: [] };
+    }
     const typeEntries = [];
     for (const item of allEntries.items) {
         if (item.sys.contentType.sys.id == props.contentType) {

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

@@ -4,8 +4,9 @@ import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 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 = 'AIzaSyBtknq7LHzN0xb0lIN3K0CXXf0swVp6ReA';
+const GOOGLE_MAPS_API_KEY = 'AIzaSyBJVi0O9Ir9imRgINLZbojTifatX-Z4aUs';
 GoogleReviewsCard.propTypes = {
     placeId: PropTypes.string.isRequired,
     language: PropTypes.string,
@@ -14,10 +15,13 @@ GoogleReviewsCard.propTypes = {
     apiKey: PropTypes.string,
 };
 export function GoogleReviewsCard(props) {
+    const config = usePixelatedConfig();
     const [place, setPlace] = useState();
     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 proxyBase = props.proxyBase || config?.global?.proxyUrl || undefined;
     useEffect(() => {
         (async () => {
             try {
@@ -25,8 +29,8 @@ export function GoogleReviewsCard(props) {
                     placeId: props.placeId,
                     language: props.language ?? undefined,
                     maxReviews: props.maxReviews ?? undefined,
-                    proxyBase: props.proxyBase ?? undefined,
-                    apiKey: props.apiKey || GOOGLE_MAPS_API_KEY,
+                    proxyBase: proxyBase,
+                    apiKey: apiKey,
                 });
                 setPlace(result.place);
                 setReviews(result.reviews);

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/instagram.components.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { getInstagramTiles } from '../general/instagram.functions';
+import { usePixelatedConfig } from "../config/config.client";
 import { Tiles } from './tiles';
 InstagramTiles.propTypes = {
     accessToken: PropTypes.string,
@@ -14,15 +15,18 @@ InstagramTiles.propTypes = {
     includeCaptions: PropTypes.bool,
 };
 export function InstagramTiles(props) {
+    const config = usePixelatedConfig();
     const [tiles, setTiles] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+    const accessToken = props.accessToken ?? config?.instagram?.accessToken;
+    const userId = props.userId ?? config?.instagram?.userId;
     useEffect(() => {
         (async () => {
             try {
                 const result = await getInstagramTiles({
-                    accessToken: props.accessToken ?? undefined,
-                    userId: props.userId ?? undefined,
+                    accessToken: accessToken ?? undefined,
+                    userId: userId ?? undefined,
                     limit: props.limit ?? 12,
                     useThumbnails: props.useThumbnails ?? undefined,
                     includeVideos: props.includeVideos ?? undefined,
@@ -36,7 +40,7 @@ export function InstagramTiles(props) {
                 setLoading(false);
             }
         })();
-    }, [props.accessToken, props.userId, props.limit, props.useThumbnails, props.includeVideos, props.includeCaptions]);
+    }, [accessToken, userId, props.limit, props.useThumbnails, props.includeVideos, props.includeCaptions]);
     if (loading) {
         return (_jsx("div", { style: { padding: 16 }, children: _jsx("p", { children: "Loading Instagram posts..." }) }));
     }

package/dist/components/general/sitemap.js

@@ -305,9 +305,11 @@ const defaultEbayProps = {
     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
+    appDevId: 'fa7b86b5-3a10-43ae-bf6f-497aa4e55ddd',
     appCertId: 'PRD-fb4458deef01-0d54-496a-b572-a04b', // clientSecret
     sbxAppId: 'BrianWha-Pixelate-SBX-ad482b6ae-8cb8fead', // Sandbox
-    sbxAppCertId: '',
+    sbxAppDevId: 'fa7b86b5-3a10-43ae-bf6f-497aa4e55ddd',
+    sbxAppCertId: 'SBX-d482b6ae0d62-f57c-4d3c-88b7-22ec',
     globalId: 'EBAY-US',
 };
 export async function createEbayItemURLs(origin) {

package/dist/components/general/smartimage.js

@@ -103,7 +103,7 @@ export function SmartImage(props) {
     newProps.width = parseNumber(props.width ?? 500);
     newProps.height = parseNumber(props.height ?? 500);
     newProps.quality = parseNumber(props.quality ?? 75);
-    const filename = (newProps.src).split('/').pop()?.split('?')[0] || '';
+    const filename = (String(newProps.src || '')).split('/').pop()?.split('?')[0] || '';
     const imageName = filename.replace(/\.[^.]+$/, '');
     newProps.id = newProps.id || newProps.name || sanitizeString(newProps.title) || sanitizeString(newProps.alt) || sanitizeString(imageName);
     newProps.name = newProps.name || newProps.id || sanitizeString(newProps.title) || sanitizeString(newProps.alt) || sanitizeString(imageName);

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

@@ -8,7 +8,7 @@ import { defaultEbayProps, ebaySunglassCategory, getEbayItems, getEbayItem, getS
 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";
@@ -44,6 +44,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 +57,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 +72,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 = {
@@ -82,10 +84,12 @@ EbayListFilter.propTypes = {
     callback: PropTypes.func.isRequired,
 };
 export function EbayListFilter(props) {
+    if (!props.aspects || !Array.isArray(props.aspects)) {
+        return null;
+    }
     const aspectNames = props.aspects.map((aspect) => (aspect.localizedAspectName)).sort();
     let aspectNamesValues = {};
-    for (let key in props.aspects) {
-        const aspect = props.aspects[key];
+    for (const aspect of props.aspects) {
         const thisAspectName = aspect.localizedAspectName;
         const aspectNameValues = aspect.aspectValueDistributions.map((aspectValue) => {
             return (aspectValue.localizedAspectValue);