@pixelated-tech/components 3.14.5 → 3.15.0

package/dist/components/integrations/gemini-api.client.js

@@ -1,6 +1,8 @@
 'use client';
 // Debug logging: set to true to inspect AI model responses locally
 const debug = false;
+import { smartFetch } from '../general/smartfetch';
+import { buildUrl } from '../general/urlbuilder';
 /**
  * Service for integrating with Google Gemini API for SEO recommendations
  */
@@ -17,19 +19,15 @@ export class GeminiApiService {
     async generateRouteRecommendations(request) {
         try {
             // Use the proxy API route instead of direct Google API call
-            const response = await fetch('/api/ai/recommendations', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(request)
+            const data = await smartFetch('/api/ai/recommendations', {
+                requestInit: {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(request)
+                }
             });
-            if (!response.ok) {
-                const errorText = await response.text();
-                console.error('AI API Error Response:', errorText);
-                throw new Error(`AI API error: ${response.status} ${response.statusText}`);
-            }
-            const data = await response.json();
             if (!data.success) {
                 throw new Error(data.error || 'AI API request failed');
             }
@@ -51,16 +49,19 @@ export class GeminiApiService {
    */
     async listModels() {
         try {
-            const response = await fetch(`${this.baseUrl}/v1/models?key=${this.apiKey}`, {
-                method: 'GET',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
+            const url = buildUrl({
+                baseUrl: this.baseUrl,
+                pathSegments: ['v1', 'models'],
+                params: { key: this.apiKey },
+            });
+            const data = await smartFetch(url, {
+                requestInit: {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                }
             });
-            if (!response.ok) {
-                throw new Error(`Failed to list models: ${response.status} ${response.statusText}`);
-            }
-            const data = await response.json();
             if (debug)
                 console.log('Available models:', data);
             return data;

package/dist/components/integrations/gemini-api.server.js

@@ -1,4 +1,7 @@
 "use server";
+import { smartFetch } from '../general/smartfetch';
+import { buildUrl } from '../general/urlbuilder';
+import { getFullPixelatedConfig } from '../config/config';
 // Debug logging: set to true to inspect raw Gemini API responses locally
 const debug = false;
 /**
@@ -63,18 +66,27 @@ function buildRecommendationPrompt(request) {
     const locationInfo = address ?
         `${address.addressLocality || ''}, ${address.addressRegion || ''} ${address.postalCode || ''}`.trim() :
         '';
-    return `Generate SEO recommendations as JSON:
+    if (debug) {
+        console.log('AI Recommendations - Location Info:', {
+            businessName: siteInfo.name,
+            address: address,
+            builtLocationInfo: locationInfo
+        });
+    }
+    return `Generate SEO recommendations for this specific page for this specific business in this specific location as JSON:
 
 Business: ${siteInfo.name || 'Unknown'} - ${siteInfo.description || 'Not provided'}
-${locationInfo ? `Location: ${locationInfo}` : ''}
+${locationInfo ? `Location (use ONLY this location, not any other cities): ${locationInfo}` : ''}
 Route: ${route.name || route.path || '/'}
 Current: Title="${route.title || ''}", Keywords="${Array.isArray(route.keywords) ? route.keywords.join(', ') : route.keywords || ''}", Description="${route.description || ''}"
 
+IMPORTANT: Use ONLY the location specified above. Do NOT substitute or use any other nearby cities or locations you might know about.
+
 Return only this JSON:
 {
-  "title": "50-60 char optimized title",
-  "keywords": ["relevant", "keywords", "for", "this", "page", "including", "location-based", "terms"],
-  "description": "150-160 char meta description including location when relevant"
+  "title": "50-60 char optimized title using business name and provided location only",
+  "keywords": ["relevant", "keywords", "for", "this", "page", "including", "provided", "location-based", "terms"],
+  "description": "150-160 char meta description including the business name and provided location only"
 }`;
 }
 /**
@@ -135,52 +147,44 @@ function inferBusinessType(siteInfo) {
  */
 export async function generateAiRecommendations(request, apiKey) {
     try {
+        // Use provided API key or get from config
+        const finalApiKey = apiKey || getFullPixelatedConfig()?.googleGemini?.api_key;
+        if (!finalApiKey) {
+            throw new Error('Google Gemini API key not configured');
+        }
         // Build the prompt using the shared function
         const prompt = buildRecommendationPrompt(request);
-        // Make request to Google Gemini API
-        const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=${apiKey}`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                contents: [{
-                        parts: [{
-                                text: prompt
-                            }]
-                    }],
-                generationConfig: {
-                    temperature: 0.7,
-                    maxOutputTokens: 4096,
-                    topP: 0.95,
-                    topK: 40
-                }
-            })
+        // Make request to Google Gemini API using buildUrl for consistent URL construction
+        // smartFetch returns parsed data directly and throws on errors
+        const url = buildUrl({
+            baseUrl: 'https://generativelanguage.googleapis.com',
+            pathSegments: ['v1beta', 'models', 'gemini-2.5-flash:generateContent'],
+            params: { key: finalApiKey },
         });
-        if (!response.ok) {
-            console.error('Google API Response Status:', response.status);
-            console.error('Google API Response Status Text:', response.statusText);
-            // Try to get the response body for debugging
-            try {
-                const errorBody = await response.text();
-                console.error('Google API Error Response Body:', errorBody);
+        const response = await smartFetch(url, {
+            requestInit: {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    contents: [{
+                            parts: [{
+                                    text: prompt
+                                }]
+                        }],
+                    generationConfig: {
+                        temperature: 0.7,
+                        maxOutputTokens: 4096,
+                        topP: 0.95,
+                        topK: 40
+                    }
+                })
             }
-            catch (e) {
-                console.error('Could not read error response body');
-            }
-            if (response.status === 429) {
-                // Check if it's quota exceeded vs rate limit
-                if (response.statusText === 'Too Many Requests') {
-                    // This might be quota exceeded, not just rate limit
-                    throw new Error('AI API quota exceeded. Please check your Google AI Studio billing settings and enable billing.');
-                }
-                throw new Error('AI API rate limit exceeded. Please try again later.');
-            }
-            throw new Error(`AI API error: ${response.status} ${response.statusText}`);
-        }
-        const data = await response.json();
+        });
+        // smartFetch returns parsed data directly, so response is already the JSON data
         // Parse the Gemini API response
-        return parseGeminiResponse(data);
+        return parseGeminiResponse(response);
     }
     catch (error) {
         console.error('AI API error:', error);

package/dist/components/integrations/google.reviews.functions.js

@@ -1,13 +1,27 @@
 // Server-side: Fetch Google reviews by place_id
 // Requires: GOOGLE_MAPS_API_KEY or hard-coded key
 // Flow: Place Details (reviews)
+import { smartFetch } from '../general/smartfetch';
+import { buildUrl } from '../general/urlbuilder';
 export async function getGoogleReviewsByPlaceId(params) {
     const { placeId, language, maxReviews, proxyBase, apiKey } = params;
-    const detailsBase = 'https://maps.googleapis.com/maps/api/place/details/json';
-    const fields = encodeURIComponent('reviews,name,place_id,formatted_address');
-    const detailsUrl = `${detailsBase}?place_id=${encodeURIComponent(placeId)}&fields=${fields}${language ? `&language=${encodeURIComponent(language)}` : ''}&key=${apiKey}`;
-    const detResp = await fetch(proxyBase ? `${proxyBase}${encodeURIComponent(detailsUrl)}` : detailsUrl, { cache: 'no-store' });
-    const detData = await detResp.json();
+    const queryParams = {
+        place_id: placeId,
+        fields: 'reviews,name,place_id,formatted_address',
+        key: apiKey
+    };
+    if (language) {
+        queryParams.language = language;
+    }
+    const detailsUrl = buildUrl({
+        baseUrl: 'https://maps.googleapis.com',
+        pathSegments: ['maps', 'api', 'place', 'details', 'json'],
+        params: queryParams,
+        proxyUrl: proxyBase || undefined,
+    });
+    const detData = await smartFetch(detailsUrl, {
+        proxy: proxyBase ? { url: proxyBase, fallbackOnCors: true } : undefined,
+    });
     if (detData.status !== 'OK' || !detData.result) {
         return { reviews: [] };
     }

package/dist/components/integrations/googleplaces.js

@@ -2,6 +2,8 @@
  * Google Places API Integration
  * Handles autocomplete predictions and place details for address validation
  */
+import { smartFetch } from '../general/smartfetch';
+import { buildUrl } from '../general/urlbuilder';
 /**
  * GooglePlacesService — Thin service for Google Places API interactions using googleapis
  */
@@ -41,13 +43,25 @@ export class GooglePlacesService {
                 return [];
             }
             const restrictions = config?.googlePlaces?.countryRestrictions || ['us'];
-            const componentFilter = restrictions.length > 0 ? `components=country:${restrictions.join('|country:')}` : '';
-            const apiUrl = `https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${encodeURIComponent(input)}&key=${apiKey}&sessiontoken=${this.sessionToken}&${componentFilter}`;
+            const params = {
+                input: input,
+                key: apiKey,
+                sessiontoken: this.sessionToken,
+            };
+            if (restrictions.length > 0) {
+                params.components = `country:${restrictions.join('|country:')}`;
+            }
             // Use global proxy to avoid CORS issues
             const proxyURL = config?.global?.proxyUrl || '';
-            const url = proxyURL ? `${proxyURL}${encodeURIComponent(apiUrl)}` : apiUrl;
-            const response = await fetch(url);
-            const data = await response.json();
+            const apiUrl = buildUrl({
+                baseUrl: 'https://maps.googleapis.com',
+                pathSegments: ['maps', 'api', 'place', 'autocomplete', 'json'],
+                params: params,
+                proxyUrl: proxyURL || undefined,
+            });
+            const data = await smartFetch(apiUrl, {
+                proxy: proxyURL ? { url: proxyURL, fallbackOnCors: true } : undefined,
+            });
             if (!data.predictions) {
                 return [];
             }
@@ -77,12 +91,22 @@ export class GooglePlacesService {
                 console.error('Google Places API key not configured');
                 return null;
             }
-            const apiUrl = `https://maps.googleapis.com/maps/api/place/details/json?place_id=${placeId}&key=${apiKey}&fields=address_component,formatted_address&sessiontoken=${this.sessionToken}`;
             // Use global proxy to avoid CORS issues
             const proxyURL = config?.global?.proxyUrl || '';
-            const url = proxyURL ? `${proxyURL}${encodeURIComponent(apiUrl)}` : apiUrl;
-            const response = await fetch(url);
-            const data = await response.json();
+            const apiUrl = buildUrl({
+                baseUrl: 'https://maps.googleapis.com',
+                pathSegments: ['maps', 'api', 'place', 'details', 'json'],
+                params: {
+                    place_id: placeId,
+                    key: apiKey,
+                    fields: 'address_component,formatted_address',
+                    sessiontoken: this.sessionToken
+                },
+                proxyUrl: proxyURL || undefined,
+            });
+            const data = await smartFetch(apiUrl, {
+                proxy: proxyURL ? { url: proxyURL, fallbackOnCors: true } : undefined,
+            });
             if (!data.result)
                 return null;
             const result = data.result;

package/dist/components/integrations/gravatar.functions.js

@@ -1,6 +1,8 @@
 // Gravatar integration functions
 // Fetch avatar and profile data from Gravatar API
 import md5 from 'md5';
+import { smartFetch } from '../general/smartfetch';
+import { buildUrl } from '../general/urlbuilder';
 /**
  * Generate MD5 hash of email for Gravatar lookups (works in browser and Node.js)
  * @param email - Email address
@@ -18,7 +20,11 @@ function getGravatarHash(email) {
  */
 export function getGravatarAvatarUrl(email, size = 200, defaultImage = 'mp') {
     const hash = getGravatarHash(email);
-    return `https://www.gravatar.com/avatar/${hash}?s=${size}&d=${defaultImage}`;
+    return buildUrl({
+        baseUrl: 'https://www.gravatar.com',
+        pathSegments: ['avatar', hash],
+        params: { s: size, d: defaultImage },
+    });
 }
 /**
  * Fetch full Gravatar profile data
@@ -27,17 +33,19 @@ export function getGravatarAvatarUrl(email, size = 200, defaultImage = 'mp') {
  */
 export async function getGravatarProfile(email) {
     const hash = getGravatarHash(email);
-    const url = `https://en.gravatar.com/${hash}.json`;
+    const url = buildUrl({
+        baseUrl: 'https://en.gravatar.com',
+        pathSegments: [hash + '.json'],
+    });
     try {
-        const response = await fetch(url, { cache: 'no-store' });
-        if (!response.ok)
-            return null;
-        const data = await response.json();
+        const data = await smartFetch(url, {});
         if (!data.entry || data.entry.length === 0)
             return null;
         return data.entry[0];
     }
-    catch {
+    catch (error) {
+        // Silently fail on CORS or network errors - Gravatar is optional
+        // CORS errors are expected in some environments and don't indicate user data issues
         return null;
     }
 }

package/dist/components/integrations/hubspot.components.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { usePixelatedConfig } from '../config/config.client';
+import { smartFetch } from '../general/smartfetch';
 export function initializeHubSpotScript(region, portalId) {
     if (typeof document === 'undefined')
         return;
@@ -91,18 +92,15 @@ getHubspotFormSubmissions.propTypes = {
 };
 export async function getHubspotFormSubmissions(props) {
     const url = `${props.proxyURL}https://api.hubapi.com/form-integrations/v1/submissions/forms/${props.formGUID}`;
-    const headers = {
-        Authorization: "Bearer " + props.apiToken,
-    };
     try {
-        const response = await fetch(url, {
-            method: 'GET',
-            headers: headers,
+        const data = await smartFetch(url, {
+            requestInit: {
+                method: 'GET',
+                headers: {
+                    Authorization: "Bearer " + props.apiToken,
+                },
+            }
         });
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const data = await response.json();
         return data;
     }
     catch (error) {

package/dist/components/integrations/instagram.functions.js

@@ -1,6 +1,8 @@
 // Server-side: Fetch Instagram media from Instagram Graph API
 // Requires: Instagram Business/Creator account, Facebook Page, OAuth access token
 // Returns: Array compatible with Tiles/Carousel components
+import { smartFetch } from '../general/smartfetch';
+import { buildUrl } from '../general/urlbuilder';
 /**
  * Fetch Instagram media for a user/page using Graph API
  * @param accessToken - Long-lived user access token (refresh every 60 days)
@@ -13,10 +15,13 @@ export async function getInstagramMedia(params) {
     // TEMP: Hard-coded token for testing
     const accessToken = params.accessToken || 'EAAtmg2zNJnABQCcGOWOUt7tR03RAF3dBZC2HFk9T0XZCvRaTddrUos8qV0UGSswVdc5d2N0o3ZAir5sEjyiglCkoffzvTwn068WTJUgSAdaRzfqRhE6Pb8D9u9wgjJuqIpDqQRIdFTlgsIVbKZBLBP2qPx72yjO3k6IuK2ksQZB4SqkyCr7ZBy7NaVXh9x2AZDZD';
     const { userId = 'me', limit = 25, fields = 'id,media_type,media_url,thumbnail_url,permalink,caption,timestamp,username' } = params;
-    const url = `https://graph.instagram.com/${userId}/media?fields=${encodeURIComponent(fields)}&limit=${limit}&access_token=${accessToken}`;
-    const response = await fetch(url, { cache: 'no-store' });
-    const data = await response.json();
-    if (!response.ok || !data.data) {
+    const url = buildUrl({
+        baseUrl: 'https://graph.instagram.com',
+        pathSegments: [userId, 'media'],
+        params: { fields, limit, access_token: accessToken },
+    });
+    const data = await smartFetch(url, {});
+    if (!data.data) {
         throw new Error(`Instagram API error: ${JSON.stringify(data)}`);
     }
     return data.data;

package/dist/components/integrations/lipsum.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { smartFetch } from '../general/smartfetch';
 // https://www.outsystems.com/forge/component-documentation/12204/lorem-ipsum-lipsum-com-o11/0
 /**
  * getLipsum — Fetch placeholder text from lipsum.com and return an array of paragraphs.
@@ -21,25 +22,20 @@ export async function getLipsum(props) {
     const baseURL = "https://www.lipsum.com/feed/html";
     const qs = `?LipsumTypeId=${LipsumTypeId}&amount=${Amount}&StartWithLoremIpsum=${StartWithLoremIpsum}`;
     const fulURL = `${proxyURL}${baseURL}${qs}`;
-    const res = await fetch(fulURL)
-        .then((response) => {
-        return response.text();
-    })
-        .then((html) => {
+    try {
+        const html = await smartFetch(fulURL, { responseType: 'text' });
         const parser = new DOMParser();
         const doc = parser.parseFromString(html, 'text/html');
         const lipsum = doc.getElementById('lipsum');
-        // const lipsums = doc.getElementById('lipsum')?.innerHTML || "";
         const paragraphs = lipsum?.querySelectorAll('p');
         const strings = [];
         paragraphs?.forEach((p) => {
             strings.push(p.textContent.trim());
         });
         return strings;
-    })
-        .catch(error => {
+    }
+    catch (error) {
         console.error('Failed to fetch page: ', error);
         return [];
-    });
-    return res;
+    }
 }

package/dist/components/integrations/loremipsum.js

@@ -3,6 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { usePixelatedConfig } from '../config/config.client';
+import { smartFetch } from '../general/smartfetch';
+import { buildUrl } from '../general/urlbuilder';
 const debug = false;
 /**
  * LoremIpsum — Fetch and render placeholder paragraphs via an external API (with optional proxy fallback).
@@ -31,43 +33,44 @@ export function LoremIpsum({ paragraphs = 1, seed = '', proxyBase, className = '
     const [items, setItems] = useState(null);
     const [error, setError] = useState(null);
     useEffect(() => {
-        const controller = new AbortController();
         const apiUrl = new URL('https://lorem-api.com/api/lorem');
         apiUrl.searchParams.set('paragraphs', String(paragraphs));
         if (seed)
             apiUrl.searchParams.set('seed', String(seed));
-        const tryFetch = async (url) => {
-            const res = await fetch(url, { signal: controller.signal });
-            if (!res.ok)
-                throw new Error(`fetch failed: ${res.status}`);
-            return res;
-        };
         (async () => {
             setItems(null);
             setError(null);
             try {
-                // First attempt: direct fetch
-                let res;
+                // Fetch with proxy fallback support built into smartFetch
+                let txt;
                 try {
-                    res = await tryFetch(apiUrl.toString());
+                    const res = await smartFetch(apiUrl.toString(), {
+                        responseType: 'text',
+                        proxy: resolvedProxy ? {
+                            url: resolvedProxy,
+                            fallbackOnCors: true
+                        } : undefined
+                    });
+                    txt = res;
                     if (debug)
-                        console.log('LoremIpsum: fetched directly', res);
+                        console.log('LoremIpsum: fetched directly or via proxy', txt);
                 }
                 catch (err) {
-                    // If CORS/network error and we have a proxy, retry via proxy
+                    // If we have a proxy configured but direct fetch failed, try proxy explicitly
                     if (resolvedProxy) {
-                        const proxied = `${resolvedProxy}${encodeURIComponent(apiUrl.toString())}`;
-                        res = await tryFetch(proxied);
+                        const proxied = buildUrl({
+                            baseUrl: apiUrl.toString(),
+                            proxyUrl: resolvedProxy,
+                        });
+                        txt = await smartFetch(proxied, { responseType: 'text' });
                         if (debug)
-                            console.log('LoremIpsum: fetched via proxy', res);
+                            console.log('LoremIpsum: fetched via explicit proxy', txt);
                     }
                     else {
                         throw err;
                     }
                 }
-                // Read response as text to avoid "body stream already read" errors,
-                // then attempt to parse JSON; otherwise treat as plaintext.
-                const txt = await res.text();
+                // Attempt to parse JSON; otherwise treat as plaintext.
                 try {
                     const parsed = JSON.parse(txt);
                     if (Array.isArray(parsed)) {
@@ -122,12 +125,9 @@ export function LoremIpsum({ paragraphs = 1, seed = '', proxyBase, className = '
                 }
             }
             catch (err) {
-                if (err?.name === 'AbortError')
-                    return;
                 setError(err?.message ?? 'Unable to load placeholder text.');
             }
         })();
-        return () => controller.abort();
     }, [paragraphs, seed, resolvedProxy]);
     if (error)
         return _jsx("div", { className: `loremipsum ${className}`, "aria-live": "polite", children: error });

package/dist/components/integrations/socialcard.js

@@ -3,6 +3,8 @@ import { useState, useEffect } from 'react';
 import PropTypes from "prop-types";
 import { mergeDeep } from '../general/utilities';
 import { SmartImage } from '../general/smartimage';
+import { smartFetch } from '../general/smartfetch';
+import { buildUrl } from '../general/urlbuilder';
 import { usePixelatedConfig } from '../config/config.client';
 import './socialcard.css';
 /* ========== NOTES ==========
@@ -96,14 +98,15 @@ export function SocialCards(props) {
         }
         async function fetchRSS() {
             try {
-                const response = await fetch(url, {
-                    method: 'GET',
-                    credentials: 'same-origin',
-                    // crossDomain: true,
-                    mode: 'cors',
-                    headers: { 'Content-Type': 'application/json' }
+                const text = await smartFetch(url, {
+                    responseType: 'text',
+                    requestInit: {
+                        method: 'GET',
+                        credentials: 'same-origin',
+                        mode: 'cors',
+                        headers: { 'Content-Type': 'application/json' }
+                    }
                 });
-                const text = await response.text();
                 const parser = new DOMParser();
                 const xml = parser.parseFromString(text, 'application/xml');
                 let items;
@@ -164,7 +167,10 @@ export function SocialCards(props) {
         if (debug) {
             console.log('Getting Feed Entries... ', myURL);
         }
-        const proxiedURL = state.proxy.proxyURL + '?' + state.proxy.proxyURLParam + '=' + encodeURIComponent(myURL);
+        const proxiedURL = buildUrl({
+            baseUrl: myURL,
+            proxyUrl: state.proxy.proxyURL,
+        });
         let sourceCardData = [];
         // const result = await RSSFeedToJson(proxiedURL)
         await RSSFeedToJson(proxiedURL)

package/dist/components/integrations/spotify.functions.js

@@ -1,4 +1,5 @@
 import PropTypes from "prop-types";
+import { smartFetch } from '../general/smartfetch';
 function SpotifyRSSSeriesToJson(data) {
     const parser = new DOMParser();
     const xml = parser.parseFromString(data, 'application/xml');
@@ -46,8 +47,9 @@ getSpotifySeries.propTypes = {
 export async function getSpotifySeries(props) {
     const { rssURL } = props;
     try {
-        const response = await fetch(rssURL);
-        const data = await response.text();
+        const data = await smartFetch(rssURL, {
+            responseType: 'text',
+        });
         let rssJSON = SpotifyRSSSeriesToJson(data);
         return rssJSON;
     }
@@ -97,8 +99,9 @@ getSpotifyEpisodes.propTypes = {
 export async function getSpotifyEpisodes(props) {
     const { rssURL } = props;
     try {
-        const response = await fetch(rssURL);
-        const data = await response.text();
+        const data = await smartFetch(rssURL, {
+            responseType: 'text',
+        });
         let rssJSON = SpotifyRSSItemsToJson(data);
         if (rssJSON)
             rssJSON = rssJSON.sort((a, b) => ((a.pubDate ?? '') < (b.pubDate ?? '')) ? 1 : -1);