@pixelated-tech/components 3.13.16 → 3.14.1

package/dist/components/integrations/flickr.js

@@ -1,12 +1,15 @@
 import PropTypes from 'prop-types';
 import { mergeDeep } from '../general/utilities';
+// Flickr API base URL - non-secret configuration
+const FLICKR_API_BASE_URL = 'https://api.flickr.com/services/rest/?';
 const defaultFlickr = {
     flickr: {
-        baseURL: 'https://api.flickr.com/services/rest/?',
+        baseURL: FLICKR_API_BASE_URL,
         urlProps: {
             method: 'flickr.photos.search',
-            api_key: '882cab5548d53c9e6b5fb24d59cc321d',
-            user_id: '15473210@N04',
+            // api_key and user_id must come from props or config provider - do not hardcode
+            api_key: '',
+            user_id: '',
             tags: 'pixelatedviewsgallery',
             extras: 'date_taken,description,owner_name',
             sort: 'date-taken-desc',
@@ -168,7 +171,7 @@ FlickrWrapper.propTypes = {
 export function FlickrWrapper(props) {
     const flickr = {
         flickr: {
-            baseURL: 'https://api.flickr.com/services/rest/?',
+            baseURL: FLICKR_API_BASE_URL,
             urlProps: {
                 method: props.method || 'flickr.photos.search',
                 api_key: props.api_key /* || '882cab5548d53c9e6b5fb24d59cc321d' */,

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

@@ -6,6 +6,9 @@ import { SmartImage } from '../general/smartimage';
 import { getGoogleReviewsByPlaceId } from './google.reviews.functions';
 import { usePixelatedConfig } from '../config/config.client';
 import './google.reviews.css';
+/*
+https://maps.googleapis.com/maps/api/place/textsearch/json?query=Manning+Metalworks+Morris+Plains+NJ&key=AIzaSyBJVi0O9Ir9imRgINLZbojTifatX-Z4aUs
+*/
 /**
  * GoogleReviewsCard — Fetch and display Google Place reviews for a specific Place ID.
  *

package/dist/components/integrations/googleplaces.js

@@ -0,0 +1,144 @@
+/**
+ * Google Places API Integration
+ * Handles autocomplete predictions and place details for address validation
+ */
+/**
+ * GooglePlacesService — Thin service for Google Places API interactions using googleapis
+ */
+export class GooglePlacesService {
+    apiKey = null;
+    sessionToken = null;
+    requestCache = new Map();
+    cacheTTL = 3600000; // 1 hour default
+    constructor(config) {
+        if (config) {
+            this.apiKey = config.apiKey || null;
+            this.cacheTTL = config.cacheTTL || 3600000;
+        }
+        this.sessionToken = this.generateSessionToken();
+    }
+    /**
+     * Generate or return cached session token for Places requests
+     */
+    generateSessionToken() {
+        return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
+    /**
+     * Get autocomplete predictions for a search input
+     * Uses Google Places Autocomplete API (web service version via googleapis)
+     */
+    async getPlacePredictions(input, config) {
+        if (!input || input.length < 2)
+            return [];
+        const cacheKey = `predictions_${input}`;
+        const cached = this.requestCache.get(cacheKey);
+        if (cached)
+            return cached;
+        try {
+            const apiKey = config?.googlePlaces?.apiKey || this.apiKey;
+            if (!apiKey) {
+                console.error('Google Places API key not configured');
+                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}`;
+            // 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();
+            if (!data.predictions) {
+                return [];
+            }
+            const predictions = data.predictions.map((pred) => ({
+                placeId: pred.place_id,
+                mainText: pred.structured_formatting?.main_text || pred.description,
+                secondaryText: pred.structured_formatting?.secondary_text,
+                fullText: pred.description,
+            }));
+            // Cache for TTL
+            this.requestCache.set(cacheKey, predictions);
+            setTimeout(() => this.requestCache.delete(cacheKey), this.cacheTTL);
+            return predictions;
+        }
+        catch (error) {
+            console.error('Error fetching place predictions:', error);
+            return [];
+        }
+    }
+    /**
+     * Get detailed place information including address components
+     */
+    async getPlaceDetails(placeId, config) {
+        try {
+            const apiKey = config?.googlePlaces?.apiKey || this.apiKey;
+            if (!apiKey) {
+                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();
+            if (!data.result)
+                return null;
+            const result = data.result;
+            const addressComponents = result.address_components || [];
+            // Parse address components
+            const parsed = {
+                formattedAddress: result.formatted_address || '',
+                addressComponents: addressComponents,
+            };
+            // Extract standard address fields
+            for (const component of addressComponents) {
+                const types = component.types || [];
+                if (types.includes('street_number') || types.includes('route')) {
+                    parsed.street1 = (parsed.street1 || '') + (component.long_name || '') + ' ';
+                }
+                else if (types.includes('locality')) {
+                    parsed.city = component.long_name;
+                }
+                else if (types.includes('administrative_area_level_1')) {
+                    parsed.state = component.short_name;
+                }
+                else if (types.includes('postal_code')) {
+                    parsed.zip = component.long_name;
+                }
+                else if (types.includes('country')) {
+                    parsed.country = component.short_name;
+                }
+            }
+            if (parsed.street1) {
+                parsed.street1 = parsed.street1.trim();
+            }
+            return parsed;
+        }
+        catch (error) {
+            console.error('Error fetching place details:', error);
+            return null;
+        }
+    }
+    /**
+     * Validate that address is in allowed country
+     */
+    isValidCountry(placeDetails, allowedCountries = ['US']) {
+        if (!placeDetails.country)
+            return false;
+        return allowedCountries.includes(placeDetails.country.toUpperCase());
+    }
+    /**
+     * Clear cached predictions
+     */
+    clearCache() {
+        this.requestCache.clear();
+    }
+}
+/**
+ * Factory function to get configured GooglePlacesService instance
+ */
+export function getGooglePlacesService(config) {
+    return new GooglePlacesService(config);
+}

package/dist/components/integrations/socialcard.js

@@ -42,19 +42,22 @@ SocialCards.propTypes = {
 };
 export function SocialCards(props) {
     const debug = false;
+    // Get config values from provider
+    const config = usePixelatedConfig();
+    const proxyURL = config?.global?.proxyUrl || 'https://proxy.pixelated.tech/prod/proxy';
     const [state, setState] = useState({
         loading: true,
         targetID: '#social',
         myCardData: [],
         mySocialCards: [],
         proxy: {
-            proxyURL: 'https://proxy.pixelated.tech/prod/proxy',
+            proxyURL,
             proxyURLParam: 'url'
         },
         rss2json: {
             apiURL: 'https://api.rss2json.com/v1/api.json',
             apiURLParam: 'rss_url',
-            apiKey: 'c3wsmqh4h1iydxxip3sgkr1jtk3brllbp61jc6yd'
+            apiKey: ''
         },
         toptal: {
             apiURL: 'https://www.toptal.com/developers/feed2json/convert',

package/dist/components/integrations/wordpress.components.js

@@ -8,6 +8,7 @@ import { PageGridItem } from '../general/semantic';
 import { getWordPressItems, getWordPressLastModified } from './wordpress.functions';
 import { Loading, ToggleLoading } from '../general/loading';
 import { CacheManager } from "../general/cache-manager";
+import { getDomain } from '../general/utilities';
 import "./wordpress.css";
 import { SchemaBlogPosting } from '../general/schema';
 import { mapWordPressToBlogPosting } from '../general/schema.functions';
@@ -18,7 +19,7 @@ function decodeString(str) {
     return textarea.value;
 }
 const wpCacheTTL = 1000 * 60 * 60 * 24 * 7; // 1 week
-const wpCache = new CacheManager({ mode: 'local', ttl: wpCacheTTL, prefix: 'wp_' });
+const wpCache = new CacheManager({ mode: 'local', ttl: wpCacheTTL, domain: getDomain(), namespace: 'wp' });
 const wpApiURL = "https://public-api.wordpress.com/rest/v1/sites/";
 /**
  * getCachedWordPressItems — Fetch posts from the WordPress REST API with caching. Checks local cache first and returns cached posts if available and not expired; otherwise fetches from the API, stores in cache, and returns the fresh data.

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

@@ -178,8 +178,8 @@ export function EbayListItem(props) {
     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;
+        ? getImg({ url: thisItem.thumbnailImages?.[0]?.imageUrl || thisItem.image?.imageUrl || '', product_env: props.cloudinaryProductEnv })
+        : thisItem.thumbnailImages?.[0]?.imageUrl || thisItem.image?.imageUrl || '';
     const shoppingCartItem = getShoppingCartItem({ thisItem: thisItem, cloudinaryProductEnv: props.cloudinaryProductEnv, apiProps: apiProps });
     // CHANGE EBAY URL TO LOCAL EBAY ITEM DETAIL URL
     shoppingCartItem.itemURL = itemURL;
@@ -189,7 +189,7 @@ export function EbayListItem(props) {
                     ? _jsx("a", { href: itemURL, target: itemURLTarget, rel: "noopener noreferrer", children: itemImageComponent })
                     : (itemImageComponent) }), _jsxs("div", { className: "ebay-item-body grid-s5-e13", children: [_jsx("div", { className: "ebay-item-header", children: itemURL
                             ? _jsx(EbayItemHeader, { url: itemURL, target: itemURLTarget, title: thisItem.title })
-                            : _jsx(EbayItemHeader, { title: thisItem.title }) }), _jsxs("div", { className: "ebay-item-details 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: "ebay-item-price", children: itemURL
+                            : _jsx(EbayItemHeader, { title: thisItem.title }) }), _jsxs("div", { className: "ebay-item-details 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: "ebay-item-price", 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: "ebay-item-add-to-cart", children: [_jsx(ViewItemDetails, { href: "/store", itemID: thisItem.legacyItemId }), _jsx(AddToCartButton, { handler: addToShoppingCart, item: shoppingCartItem, itemID: thisItem.legacyItemId })] })] })] }));
 }
@@ -253,7 +253,7 @@ export function EbayItemDetail(props) {
         const thisItem = { ...item };
         if (debug)
             console.log(thisItem);
-        const images = thisItem.additionalImages.map((thisImage) => ({ image: (props.cloudinaryProductEnv)
+        const images = (thisItem.additionalImages || []).map((thisImage) => ({ image: (props.cloudinaryProductEnv)
                 ? getImg({ url: thisImage.imageUrl, product_env: props.cloudinaryProductEnv })
                 : thisImage.imageUrl }));
         const itemURL = undefined;
@@ -262,7 +262,7 @@ export function EbayItemDetail(props) {
         shoppingCartItem.itemURL = itemURL;
         return (_jsx(_Fragment, { children: _jsxs("div", { className: "ebay-item row-12col", children: [_jsx("div", { className: "ebay-item-header grid-s1-e13", children: itemURL
                             ? _jsx(EbayItemHeader, { url: itemURL, title: thisItem.title })
-                            : _jsx(EbayItemHeader, { title: thisItem.title }) }), _jsx("br", {}), _jsx("div", { className: "ebay-item-photo-carousel grid-s1-e7", children: _jsx(Carousel, { cards: images, draggable: true, imgFit: "contain" }) }), _jsxs("div", { className: "grid-s7-e13", children: [_jsx("div", { className: "ebay-item-details grid12", children: _jsx("div", { dangerouslySetInnerHTML: { __html: thisItem.description.replace(/(<br\s*\/?>\s*){2,}/gi, '') } }) }), _jsx("br", {}), _jsxs("div", { className: "ebay-item-details 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: "ebay-item-price", children: itemURL
+                            : _jsx(EbayItemHeader, { title: thisItem.title }) }), _jsx("br", {}), _jsx("div", { className: "ebay-item-photo-carousel grid-s1-e7", children: _jsx(Carousel, { cards: images, draggable: true, imgFit: "contain" }) }), _jsxs("div", { className: "grid-s7-e13", children: [_jsx("div", { className: "ebay-item-details grid12", children: _jsx("div", { dangerouslySetInnerHTML: { __html: thisItem.description?.replace(/(<br\s*\/?>\s*){2,}/gi, '') || '' } }) }), _jsx("br", {}), _jsxs("div", { className: "ebay-item-details 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: "ebay-item-price", 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: "ebay-item-add-to-cart", children: _jsx(AddToCartButton, { handler: addToShoppingCart, item: shoppingCartItem, itemID: thisItem.legacyItemId }) })] })] }) }));
     }

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

@@ -1,11 +1,13 @@
 import PropTypes from "prop-types";
 import { getCloudinaryRemoteFetchURL as getImg } from "../integrations/cloudinary";
 import { CacheManager } from "../general/cache-manager";
+import { getDomain } from "../general/utilities";
 const debug = false;
-// Initialize eBay Cache (Session storage, 1 hour TTL)
+// Initialize eBay Cache (Session storage, 1 hour TTL) — isolated per domain
 const ebayCache = new CacheManager({
     mode: 'session',
-    prefix: 'ebay_',
+    domain: getDomain(),
+    namespace: 'ebay',
     ttl: 60 * 60 * 1000
 });
 /* ===== EBAY BROWSE API DOCUMENTATION =====
@@ -86,7 +88,7 @@ export function getShoppingCartItem(props) {
                 ? thisItem.thumbnailImages[0].imageUrl
                 : (thisItem.image && props.cloudinaryProductEnv)
                     ? getImg({ url: thisItem.image.imageUrl, product_env: props.cloudinaryProductEnv })
-                    : thisItem.image.imageUrl,
+                    : thisItem.image?.imageUrl || '',
         itemID: thisItem.legacyItemId,
         itemURL: thisItem.itemWebUrl,
         itemTitle: thisItem.title,

package/dist/components/shoppingcart/paypal.js

@@ -39,7 +39,7 @@ export function PayPal(props) {
     if (!isScriptSrc('https://www.paypal.com/sdk/js')) {
         document.head.appendChild(paypalScript);
     }
-    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "stylesheet", type: "text/css", href: "https://www.paypalobjects.com/webstatic/en_US/developer/docs/css/cardfields.css" }), _jsx("div", { id: "paypal-button-container", className: "paypal-button-container" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "stylesheet", type: "text/css", fetchPriority: "high", href: "https://www.paypalobjects.com/webstatic/en_US/developer/docs/css/cardfields.css" }), _jsx("div", { id: "paypal-button-container", className: "paypal-button-container" })] }));
 }
 export function initPayPalButton(props) {
     window.paypal.Buttons({

package/dist/components/shoppingcart/shipping.to.json

@@ -16,19 +16,18 @@
 				"tooltip" : "Please enter your First and Last Name"
 			}
 		},{
-			"component" : "FormInput",
+			"component" : "FormGooglePlacesInput",
 			"props" : {
-				"type" : "text",
 				"id" : "street1",
 				"name" : "street1",
 				"defaultValue" : null,
-				"placeholder": "Street Address",
+				"placeholder": "Street Address (start typing)",
 				"autoComplete" : "street-address",
 				"size" : "40",
 				"display" : "horizontal",
 				"required": true,
 				"label" : "Street Address : ",
-				"tooltip" : "Please enter your Street Address"
+				"tooltip" : "Start typing your street address and select from suggestions"
 			}
 		},{
 			"component" : "FormInput",

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

@@ -79,7 +79,8 @@ export function ShoppingCart(props) {
     useEffect(() => {
         // UPDATE DISCOUNT CODES ON EACH PAGE LOAD
         (async () => {
-            setDiscountCodes(await getRemoteDiscountCodes());
+            const contentfulConfig = config?.contentful;
+            setDiscountCodes(await getRemoteDiscountCodes(contentfulConfig));
         })();
         // UPDATE SHOPPINGCART AND SHIPPINGDATA STATES IF LOCALSTORAGE CHANGES
         function handleStorageChange() {
@@ -146,10 +147,11 @@ export function ShoppingCart(props) {
     }
     if (progressStep === "ThankYou") {
         // ========== SENDMAIL ==========
+        const cartConfig = config?.shoppingcart;
         const json = {
-            'to': 'brian@pixelvivid.com',
-            'from': 'brian@pixelvivid.com',
-            'subject': 'PixelVivid Purchase',
+            'to': cartConfig?.orderTo,
+            'from': cartConfig?.orderFrom,
+            'subject': cartConfig?.orderSubject,
             'orderData': JSON.stringify(orderData, null, 2),
         };
         const sendMailResponse = emailJSON(json);
@@ -157,7 +159,7 @@ export function ShoppingCart(props) {
             console.log("SendMail Response:", sendMailResponse);
         // ========== THANK YOU ==========
         const pmt = orderData.purchase_units[0].payments.captures[0];
-        return (_jsxs("div", { className: "pix-cart", children: [_jsx(CalloutHeader, { title: "Shopping Cart : " }), _jsx("br", {}), _jsx("div", { id: "paypal-button-container", className: "paypal-button-container" }), _jsxs("div", { children: [_jsx("h3", { children: "Thank you for your payment!" }), "Payment ID : ", pmt.id, " ", _jsx("br", {}), "Status : ", pmt.status, " ", _jsx("br", {}), "Amount : $", pmt.amount.value + " " + pmt.amount.currency_code, " ", _jsx("br", {}), "Created : ", pmt.create_time, " ", _jsx("br", {})] })] }));
+        return (_jsxs("div", { className: "pix-cart", children: [_jsx(CalloutHeader, { title: "Shopping Cart : " }), _jsx("br", {}), _jsx("div", { id: "paypal-button-container", className: "paypal-button-container" }), _jsxs("div", { children: [_jsx("h3", { children: "Thank you for your payment!" }), "Payment ID : ", pmt.id, " ", _jsx("br", {}), "Status : ", pmt.status, " ", _jsx("br", {}), "Amount : $", pmt.amount.value + " " + (config?.shoppingcart?.currency || pmt.amount.currency_code), " ", _jsx("br", {}), "Created : ", pmt.create_time, " ", _jsx("br", {})] })] }));
     }
     else if (progressStep === "Checkout") {
         // ========== CHECKOUT ==========

package/dist/components/shoppingcart/shoppingcart.css

@@ -92,7 +92,7 @@
 .pix-cart-button,
 .pix-cart .pix-cart-button,
 #pix-cart-button.pix-cart-button {
-    font-size: 1.1em;
+    /* font-size: 1.1em; */
     font-family: Verdana, Geneva, sans-serif;
     color: #000;
     padding: 5px;

package/dist/components/shoppingcart/shoppingcart.functions.js

@@ -1,24 +1,15 @@
 import { getContentfulDiscountCodes } from "../integrations/contentful.delivery";
 import { CacheManager } from "../general/cache-manager";
+import { getDomain } from "../general/utilities";
 // Migration-time verbose tracing per user request — remove after verification
 const debug = false;
-// Use CacheManager but preserve existing localStorage keys by using empty prefix
-const cartCache = new CacheManager({ mode: 'local', prefix: '' });
+// Use CacheManager with domain + namespace to prevent multi-tenant cache collisions
+const cartCache = new CacheManager({ mode: 'local', domain: getDomain(), namespace: 'checkout' });
 /* ========== LOCALSTORAGE KEYS ========== */
 export const shoppingCartKey = "pixelvividCart";
 export const shippingInfoKey = "pixelvividCartShipping";
 export const discountCodesKey = "pixelvividDiscountCodes";
 export const checkoutInfoKey = "pixelvividCartCheckout";
-// const sbPayPalApiKey = "AT10GG2ZHoApTtEw7dJoU6XRDYkf3wEvK2k_-eZ9GOvOK-REphG8yKCyZCqFi95OrxKgrdctlfWxayHG";
-// const sbPayPalSecret = "EDUrdPonwcNYZwO5j7hNmFSmF-13zptaCndUnO0-Vr_j0GYEW4m-Tfar9IaukHwm0ixL5fUojOOFtZVk";
-// const payPalApiKey = "AeWRwYpsrfslATCndF6xjL4GLcqA1UxQZLC5vxQE-FTvPezXfLbCJO_uAFk5zoXUKRFnP-zJ_73yEkBE";
-// const payPalSecret = "EBvYvynRXZCI6RbK4rg2NiENNG4N8tbgl8qAmpxB6f9nUkZjXMODxXJZ91JycP439kPrQcnB7uRKp0-F";
-const apiProps = {
-    base_url: "https://cdn.contentful.com",
-    space_id: "soi9w77t7027",
-    environment: "master",
-    delivery_access_token: "muY9LfpCt4qoXosDsnRkkoH3DAVVuUFEuB0WRKRdBUM",
-};
 /* ========== ARRAYS ========== */
 const shippingOptions = [
     {
@@ -209,7 +200,7 @@ export function getShippingCost() {
     return (option && option.price) ? formatAsHundredths(Number(option.price)) : 0;
 }
 /* ========== DISCOUNT CODE FUNCTIONS ========== */
-export async function validateDiscountCode(field) {
+export async function validateDiscountCode(field, apiProps) {
     try {
         const codeList = await getContentfulDiscountCodes({ apiProps: apiProps, contentType: "discountCodes" });
         if (!codeList) {
@@ -240,7 +231,7 @@ export async function validateDiscountCode(field) {
         throw error; // Or return false;
     }
 }
-export async function getRemoteDiscountCodes() {
+export async function getRemoteDiscountCodes(apiProps) {
     if (debug)
         console.log("Getting Contentful Discount Codes");
     try {

package/dist/components/sitebuilder/config/ConfigEngine.js

@@ -79,7 +79,7 @@ export function VisualDesignStyles({ visualdesign }) {
         ...fontLines
     ].join('\n');
     const googleFontsUsed = hasGoogleFonts();
-    return (_jsxs(_Fragment, { children: [googleFontsUsed && (_jsxs(_Fragment, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" })] })), _jsx("style", { dangerouslySetInnerHTML: { __html: css } })] }));
+    return (_jsxs(_Fragment, { children: [googleFontsUsed && (_jsxs(_Fragment, { children: [_jsx("link", { rel: "preconnect", fetchPriority: "high", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", fetchPriority: "high", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" })] })), _jsx("style", { dangerouslySetInnerHTML: { __html: css } })] }));
 }
 /**
  * Component to handle Google Fonts imports - should be used in the document head
@@ -99,5 +99,5 @@ export function GoogleFontsImports({ visualdesign }) {
     const googleFontsUrl = generateGoogleFontsUrl(fonts);
     if (!googleFontsUrl)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), _jsx("link", { href: googleFontsUrl, rel: "stylesheet" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "preconnect", fetchPriority: "high", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", fetchPriority: "high", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), _jsx("link", { rel: "stylesheet", fetchPriority: "high", href: googleFontsUrl })] }));
 }

package/dist/components/sitebuilder/config/google-fonts.js

@@ -108,7 +108,7 @@ export function generateGoogleFontsLink(fonts) {
     const url = generateGoogleFontsUrl(fonts);
     if (!url)
         return '';
-    return `<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="${url}" rel="stylesheet">`;
+    return `<link rel="preconnect" fetchPriority="high" href="https://fonts.googleapis.com">
+<link rel="preconnect" fetchPriority="high" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" fetchPriority="high" href="${url}">`;
 }

package/dist/components/sitebuilder/form/formcomponents.js

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import { validateField } from "./formvalidator";
 import { useFormValidation } from "./formvalidator";
 import * as FVF from "./formfieldvalidations";
+import { usePixelatedConfig } from "../../config/config.client";
 import "./form.css";
 /*
 InferProps to generate Types
@@ -168,6 +169,156 @@ function FormTooltip(props) {
     let clickHandler = toggleTooltip;
     return (_jsx(_Fragment, { children: _jsxs("div", { id: mode + "-" + props.id, className: `tooltip-container ${props.className || ''}`, children: [_jsx("span", { className: "tooltip-icon tooltip-icon-" + mode, ...mouseEvents, onClick: clickHandler, onKeyDown: handleKeyDown, "aria-label": "Show more info", "aria-expanded": showTooltip, "aria-describedby": showTooltip ? `${props.id}-tooltip` : undefined, tabIndex: 0, role: "button", children: icon }), showTooltip && _jsx("div", { className: "tooltip-text", role: "tooltip", id: `${props.id}-tooltip`, children: content })] }) }));
 }
+/**
+ * FormGooglePlacesInput — Address input with Google Places autocomplete and address component parsing.
+ *
+ * @param {string} [props.id] - Input id attribute (required).
+ * @param {string} [props.name] - Input name attribute.
+ * @param {string} [props.defaultValue] - Default value for uncontrolled inputs.
+ * @param {string} [props.placeholder] - Placeholder text.
+ * @param {string} [props.autoComplete] - Autocomplete hint.
+ * @param {string} [props.size] - Size attribute for text input.
+ * @param {string} [props.maxLength] - Maximum characters allowed.
+ * @param {string} [props.required] - Required flag.
+ * @param {string} [props.display] - Display style (inline/block) for layout purposes.
+ * @param {string} [props.label] - Label text associated with the input.
+ * @param {string} [props.tooltip] - Tooltip/help text for the input.
+ * @param {string} [props.className] - CSS class names applied to the input container.
+ * @param {string} [props.validate] - Named validation rule to run for this input.
+ * @param {function} [props.onChange] - Change handler invoked when place is selected.
+ * @param {function} [props.onAddressParsed] - Callback invoked with parsed address components when place is selected.
+ */
+FormGooglePlacesInput.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    defaultValue: PropTypes.string,
+    placeholder: PropTypes.string,
+    autoComplete: PropTypes.string,
+    size: PropTypes.string,
+    maxLength: PropTypes.string,
+    required: PropTypes.string,
+    disabled: PropTypes.string,
+    display: PropTypes.string,
+    label: PropTypes.string,
+    tooltip: PropTypes.string,
+    className: PropTypes.string,
+    validate: PropTypes.string,
+    onChange: PropTypes.func,
+    onAddressParsed: PropTypes.func,
+};
+export function FormGooglePlacesInput(props) {
+    const [inputValue, setInputValue] = React.useState(props.defaultValue || '');
+    const [predictions, setPredictions] = React.useState([]);
+    const [showPredictions, setShowPredictions] = React.useState(false);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const { formValidate, inputProps } = useFormComponent(props);
+    const config = usePixelatedConfig();
+    const debounceTimer = React.useRef(null);
+    const inputRef = React.useRef(null);
+    // Debounced fetch predictions
+    const fetchPredictions = React.useCallback(async (input) => {
+        if (!input || input.length < 2) {
+            setPredictions([]);
+            setShowPredictions(false);
+            return;
+        }
+        setIsLoading(true);
+        try {
+            const { getGooglePlacesService } = await import('../../integrations/googleplaces');
+            const service = getGooglePlacesService(config);
+            const results = await service.getPlacePredictions(input, config);
+            setPredictions(results);
+            setShowPredictions(true);
+        }
+        catch (error) {
+            console.error('Error fetching predictions:', error);
+            setPredictions([]);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [config]);
+    // Handle input change with debounce
+    const handleInputChange = (e) => {
+        const value = e.target.value;
+        setInputValue(value);
+        // Call parent onChange
+        if (props.onChange) {
+            props.onChange(value);
+        }
+        // Clear previous timer
+        if (debounceTimer.current) {
+            clearTimeout(debounceTimer.current);
+        }
+        // Set new debounced fetch
+        debounceTimer.current = setTimeout(() => fetchPredictions(value), config?.googlePlaces?.debounceDelay || 300);
+    };
+    // Handle place selection
+    const handleSelectPlace = React.useCallback(async (prediction) => {
+        setInputValue(prediction.fullText);
+        setShowPredictions(false);
+        try {
+            const { getGooglePlacesService } = await import('../../integrations/googleplaces');
+            const service = getGooglePlacesService(config);
+            const details = await service.getPlaceDetails(prediction.placeId, config);
+            if (details && service.isValidCountry(details, config?.googlePlaces?.countryRestrictions)) {
+                // Auto-fill address components
+                if (props.onAddressParsed) {
+                    props.onAddressParsed({
+                        street1: details.street1,
+                        city: details.city,
+                        state: details.state,
+                        zip: details.zip,
+                        country: details.country,
+                    });
+                }
+                // Update form fields if available
+                const form = (inputRef.current?.closest('form') || document.getElementById('address_to'));
+                if (form) {
+                    if (details.city) {
+                        const cityElement = form.elements.namedItem('city');
+                        if (cityElement)
+                            cityElement.value = details.city;
+                    }
+                    if (details.state) {
+                        const stateElement = form.elements.namedItem('state');
+                        if (stateElement)
+                            stateElement.value = details.state;
+                    }
+                    if (details.zip) {
+                        const zipElement = form.elements.namedItem('zip');
+                        if (zipElement)
+                            zipElement.value = details.zip;
+                    }
+                    if (details.country) {
+                        const countryElement = form.elements.namedItem('country');
+                        if (countryElement)
+                            countryElement.value = details.country;
+                    }
+                }
+            }
+            else {
+                console.warn('Selected address is not in allowed countries');
+            }
+        }
+        catch (error) {
+            console.error('Error fetching place details:', error);
+        }
+    }, [config, props]);
+    // Close predictions on blur
+    const handleBlur = () => {
+        setTimeout(() => setShowPredictions(false), 200);
+    };
+    // Cleanup timer on unmount
+    React.useEffect(() => {
+        return () => {
+            if (debounceTimer.current) {
+                clearTimeout(debounceTimer.current);
+            }
+        };
+    }, []);
+    return (_jsxs("div", { className: `form-google-places-input ${props.className || ''}`, children: [_jsx(FormLabel, { id: props.id, label: props.label }, "label-" + props.id), props.tooltip ? _jsx(FormTooltip, { id: props.id, text: [props.tooltip] }) : "", props.display === "vertical" ? formValidate : "", _jsxs("div", { className: "google-places-container", children: [_jsx("input", { ref: inputRef, ...inputProps, role: "combobox", type: "text", value: inputValue, onChange: handleInputChange, onBlur: handleBlur, placeholder: props.placeholder || "Start typing an address...", autoComplete: "off", "aria-autocomplete": "list", "aria-controls": `${props.id}-predictions`, "aria-expanded": showPredictions, defaultValue: undefined }), isLoading && _jsx("div", { className: "google-places-loading", children: "Loading..." }), showPredictions && predictions.length > 0 && (_jsx("ul", { id: `${props.id}-predictions`, className: "google-places-predictions", role: "listbox", children: predictions.map((pred, idx) => (_jsx("li", { role: "option", "aria-selected": false, children: _jsxs("button", { type: "button", onClick: () => handleSelectPlace(pred), className: "prediction-item", children: [_jsx("strong", { children: pred.mainText }), pred.secondaryText && _jsx("small", { children: pred.secondaryText })] }) }, idx))) }))] })] }));
+}
 /**
  * FormInput — Generic input field used by the FormEngine. Supports standard input attributes and validation hooks.
  *

package/dist/components/sitebuilder/form/formutils.js

@@ -3,6 +3,9 @@ const debug = false;
  * Maps input type to form component name
  */
 export function mapTypeToComponent(myType) {
+    if (!myType) {
+        throw new Error('Field type is required');
+    }
     if (debug)
         console.log("Mapping Type Field to Component");
     let myComponent = (["button"].includes(myType)) ? 'FormButton' :