@pixelated-tech/components 3.4.2 → 3.5.0

package/dist/components/menu/menu-expando.js

@@ -1,9 +1,18 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './menu-expando.css';
+MenuExpando.propTypes = {
+    menuItems: PropTypes.oneOfType([
+        PropTypes.objectOf(PropTypes.string),
+        PropTypes.arrayOf(PropTypes.shape({
+            name: PropTypes.string.isRequired,
+            path: PropTypes.string.isRequired,
+            routes: PropTypes.array,
+        }))
+    ]).isRequired
+};
 export function MenuExpando(props) {
     const detailsRef = useRef(null);
     const ulRef = useRef(null);
@@ -91,11 +100,11 @@ export function MenuExpando(props) {
         if (Array.isArray(props.menuItems)) {
             // Array format like MenuAccordion
             for (const item of props.menuItems) {
-                if (item.routes && item.routes.length > 0) {
+                if (item && item.routes && item.routes.length > 0) {
                     // Item has nested routes - create expandable submenu
                     myItems.push(_jsx("li", { children: _jsxs("details", { className: "menuExpandoNested", children: [_jsx("summary", { children: _jsx("a", { href: item.path, children: item.name }) }), _jsx("ul", { children: item.routes.map((route) => (_jsx(MenuExpandoItem, { name: route.name, href: route.path }, route.name))) })] }) }, item.name));
                 }
-                else {
+                else if (item) {
                     // Regular item without nested routes
                     myItems.push(_jsx(MenuExpandoItem, { name: item.name, href: item.path }, item.name));
                 }
@@ -104,31 +113,25 @@ export function MenuExpando(props) {
         else {
             // Object format
             for (const itemKey in props.menuItems) {
-                myItems.push(_jsx(MenuExpandoItem, { name: itemKey, href: props.menuItems[itemKey] }, itemKey));
+                const href = props.menuItems[itemKey];
+                if (typeof href === 'string') {
+                    myItems.push(_jsx(MenuExpandoItem, { name: itemKey, href: href }, itemKey));
+                }
             }
         }
         return myItems;
     }
     return (_jsx("div", { className: "menuExpando", id: "menuExpando", children: _jsxs("details", { className: "menu-expando-wrapper", id: "menu-expando-wrapper", ref: detailsRef, children: [_jsx("summary", {}), _jsx("ul", { ref: ulRef, children: generateMenuItems() })] }) }));
 }
-MenuExpando.propTypes = {
-    menuItems: PropTypes.oneOfType([
-        PropTypes.object,
-        PropTypes.arrayOf(PropTypes.shape({
-            name: PropTypes.string.isRequired,
-            path: PropTypes.string.isRequired,
-            routes: PropTypes.array,
-        }))
-    ]).isRequired
-};
-export function MenuExpandoItem(props) {
-    return (_jsx("li", { children: _jsx("a", { href: props.href, children: props.name }) }));
-}
 MenuExpandoItem.propTypes = {
     name: PropTypes.string.isRequired,
     href: PropTypes.string.isRequired
 };
-export function MenuExpandoButton() {
+export function MenuExpandoItem(props) {
+    return (_jsx("li", { children: _jsx("a", { href: props.href, children: props.name }) }));
+}
+MenuExpandoButton.propTypes = {};
+export function MenuExpandoButton(props) {
     function handleMenuExpandoButtonClick(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -144,4 +147,3 @@ export function MenuExpandoButton() {
     }
     return (_jsx("div", { className: "menuExpandoButton", id: "menuExpandoButton", onClick: handleMenuExpandoButtonClick, onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-label": "Toggle mobile menu", children: _jsx("img", { src: "/images/icons/mobile-menu2.png", title: "Mobile Menu", alt: "Mobile Menu" }) }));
 }
-MenuExpandoButton.propTypes = {};

package/dist/components/menu/menu-simple.js

@@ -3,26 +3,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import PropTypes from "prop-types";
 import './menu-simple.css';
-/* ========== MENU ========== */
+const menuItemShape = PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    path: PropTypes.string,
+    target: PropTypes.string,
+    hidden: PropTypes.bool,
+    routes: PropTypes.array,
+});
 MenuSimple.propTypes = {
-    // 	menuItems: PropTypes.object.isRequired,
-    menuItems: PropTypes.arrayOf(PropTypes.shape({
-        name: PropTypes.string.isRequired,
-        path: PropTypes.string.isRequired,
-        target: PropTypes.string,
-        hidden: PropTypes.bool,
-        routes: PropTypes.array,
-    })).isRequired,
+    menuItems: PropTypes.arrayOf(menuItemShape).isRequired,
 };
 export function MenuSimple(props) {
     function generateMenuItems() {
         const myItems = [];
         for (const itemKey in props.menuItems) {
             const myItem = props.menuItems[itemKey];
-            if (myItem && myItem.routes) {
-                continue;
-            } // Skip nested routes
-            myItems.push(_jsx(MenuSimpleItem, { name: myItem.name, path: myItem.path, target: myItem.target || undefined, hidden: myItem.hidden || undefined }, itemKey));
+            if (!myItem)
+                continue; // Skip null/undefined items
+            if (myItem.routes)
+                continue; // Skip nested routes
+            myItems.push(_jsx(MenuSimpleItem, { name: myItem.name, path: myItem.path || '', target: myItem.target || undefined, hidden: myItem.hidden || undefined }, itemKey));
         }
         return myItems;
     }
@@ -45,7 +45,7 @@ export function MenuSimple(props) {
 /* ========== MENU ITEM ========== */
 MenuSimpleItem.propTypes = {
     name: PropTypes.string.isRequired,
-    path: PropTypes.string,
+    path: PropTypes.string.isRequired,
     target: PropTypes.string,
     hidden: PropTypes.bool,
     routes: PropTypes.array,

package/dist/components/nerdjoke/nerdjoke.js

@@ -7,7 +7,7 @@ import "./nerdjoke.css";
 const debug = false;
 const TIME_LIMIT = 15;
 NerdJoke.propTypes = {};
-export function NerdJoke( /* props: NerdJokeType */) {
+export function NerdJoke(props) {
     const [joke, setJoke] = useState({ question: "", answer: "" });
     const timerIntervalRef = useRef(null);
     const jokeIntervalRef = useRef(null);

package/dist/components/seo/googlesearch.js

@@ -23,7 +23,6 @@ GoogleSearch.propTypes = {
 };
 export function GoogleSearch(props) {
     if (typeof document !== 'undefined') {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const gsearch = (function () {
             const gcse = document.createElement("script");
             gcse.type = "text/javascript";

package/dist/components/seo/schema-blogposting.js

@@ -1,5 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function SchemaBlogPosting({ post }) {
+import PropTypes from 'prop-types';
+SchemaBlogPosting.propTypes = {
+    post: PropTypes.object.isRequired,
+};
+export function SchemaBlogPosting(props) {
+    const { post } = props;
     return (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: {
             __html: JSON.stringify(post),
         } }));

package/dist/components/seo/schema-recipe.js

@@ -1,5 +1,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function RecipeSchema({ recipe }) {
+import PropTypes from 'prop-types';
+/**
+ * Recipe Schema Component
+ * Generates JSON-LD structured data for recipes
+ * https://schema.org/Recipe
+ */
+RecipeSchema.propTypes = {
+    recipe: PropTypes.shape({
+        '@context': PropTypes.string.isRequired,
+        '@type': PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired,
+        description: PropTypes.string,
+        author: PropTypes.shape({
+            '@type': PropTypes.string.isRequired,
+            name: PropTypes.string.isRequired,
+        }),
+        datePublished: PropTypes.string,
+        image: PropTypes.string,
+        recipeYield: PropTypes.string,
+        prepTime: PropTypes.string,
+        cookTime: PropTypes.string,
+        totalTime: PropTypes.string,
+        recipeCategory: PropTypes.string,
+        recipeCuisine: PropTypes.string,
+        recipeIngredient: PropTypes.arrayOf(PropTypes.string),
+        recipeInstructions: PropTypes.arrayOf(PropTypes.shape({
+            '@type': PropTypes.string.isRequired,
+            text: PropTypes.string.isRequired,
+        })),
+        license: PropTypes.string,
+    }).isRequired,
+};
+export function RecipeSchema(props) {
+    const { recipe } = props;
     return (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(recipe) } }));
 }
 export default RecipeSchema;

package/dist/components/seo/schema-services.js

@@ -1,6 +1,24 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export function ServicesSchema({ provider, services }) {
-    const serviceObjects = services.map(service => ({
+import PropTypes from 'prop-types';
+ServicesSchema.propTypes = {
+    provider: PropTypes.shape({
+        name: PropTypes.string.isRequired,
+        url: PropTypes.string.isRequired,
+        logo: PropTypes.string,
+        telephone: PropTypes.string,
+        email: PropTypes.string,
+    }).isRequired,
+    services: PropTypes.arrayOf(PropTypes.shape({
+        name: PropTypes.string.isRequired,
+        description: PropTypes.string.isRequired,
+        url: PropTypes.string,
+        image: PropTypes.string,
+        areaServed: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    })).isRequired,
+};
+export function ServicesSchema(props) {
+    const { provider, services } = props;
+    const serviceObjects = services.map((service) => ({
         '@type': 'Service',
         name: service.name,
         description: service.description,

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

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import { Carousel } from '../carousel/carousel';
 import { SmartImage } from "../cms/smartimage";
 import { defaultEbayProps, ebaySunglassCategory, getEbayItems, getEbayItem, getShoppingCartItem } from "./ebay.functions";
-import { AddToShoppingCart } from "./shoppingcart.functions";
+import { addToShoppingCart } from "./shoppingcart.functions";
 import { AddToCartButton, /* GoToCartButton */ ViewItemDetails } from "./shoppingcart.components";
 import { getCloudinaryRemoteFetchURL as getImg } from "../cms/cloudinary";
 import { Loading, ToggleLoading } from "../general/loading";
@@ -143,7 +143,7 @@ export function EbayListItem(props) {
                             ? _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
                             ? _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 })] })] })] }));
+                            : "$" + 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 })] })] })] }));
 }
 EbayItemHeader.propTypes = {
     title: PropTypes.string.isRequired,
@@ -195,7 +195,7 @@ export function EbayItemDetail(props) {
                             ? _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
                                     ? _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 }) })] })] }) }));
+                                    : "$" + thisItem.price.value + " " + thisItem.price.currency }), _jsx("br", {}), _jsx("div", { className: "ebayItemAddToCart", children: _jsx(AddToCartButton, { handler: addToShoppingCart, item: shoppingCartItem, itemID: thisItem.legacyItemId }) })] })] }) }));
     }
     else {
         return (_jsx(_Fragment, { children: _jsx("div", { id: "ebayItems", className: "ebayItems", children: _jsx("div", { className: "centered", children: "Loading..." }) }) }));

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

@@ -11,7 +11,7 @@ import '../sitebuilder/form/form.css';
 import { MicroInteractions } from '../general/microinteractions';
 import { Modal, handleModalOpen } from '../general/modal';
 import { Table } from "../general/table";
-import { getCart, getShippingInfo, SetShippingInfo, setDiscountCodes, getRemoteDiscountCodes, getCheckoutData, RemoveFromShoppingCart, ClearShoppingCart, formatAsUSD, getCartItemCount } from "./shoppingcart.functions";
+import { getCart, getShippingInfo, setShippingInfo, setDiscountCodes, getRemoteDiscountCodes, getCheckoutData, removeFromShoppingCart, clearShoppingCart, formatAsUSD, getCartItemCount } from "./shoppingcart.functions";
 import { usePixelatedConfig } from '../config/config.client';
 import { SmartImage } from '../cms/smartimage';
 import shippingToData from "./shipping.to.json";
@@ -20,10 +20,13 @@ const debug = false;
 /* ================================================ */
 /* ========== SHOPPING CART UI COMPONENT ========== */
 /* ================================================ */
+ShoppingCart.propTypes = {
+    payPalClientID: PropTypes.string.isRequired,
+};
 export function ShoppingCart(props) {
     const [shoppingCart, setShoppingCart] = useState();
-    const [shippingInfo, setShippingInfo] = useState();
-    const [checkoutInfo, setCheckoutInfo] = useState();
+    const [shippingData, setShippingData] = useState();
+    const [checkoutData, setcheckoutData] = useState();
     const [orderData, setOrderData] = useState();
     const [progressStep, setProgressStep] = useState("EmptyCart");
     function SetProgressStep(step) {
@@ -61,7 +64,7 @@ export function ShoppingCart(props) {
         setCart(shoppingCart ?? []);
     }, [shoppingCart]); */
     /* useEffect(() => {
-        // UPDATE LOCALSTORAGE IF SHIPPINGINFO STATE CHANGES
+        // UPDATE LOCALSTORAGE IF SHIPPINGDATA STATE CHANGES
         setShippingInfo(shippingInfo);
     }, [shippingInfo]); */
     useEffect(() => {
@@ -69,11 +72,11 @@ export function ShoppingCart(props) {
         (async () => {
             setDiscountCodes(await getRemoteDiscountCodes());
         })();
-        // UPDATE SHOPPINGCART AND SHIPPINGINFO STATES IF LOCALSTORAGE CHANGES
+        // UPDATE SHOPPINGCART AND SHIPPINGDATA STATES IF LOCALSTORAGE CHANGES
         function handleStorageChange() {
             setShoppingCart(getCart());
-            setShippingInfo(getShippingInfo());
-            setCheckoutInfo(getCheckoutData());
+            setShippingData(getShippingInfo());
+            setcheckoutData(getCheckoutData());
             SetProgressStep();
         }
         window.addEventListener('storage', handleStorageChange);
@@ -85,11 +88,11 @@ export function ShoppingCart(props) {
     useEffect(() => {
         // LOAD THE SHIPPING INFO FORM WITH VALUES IF SHIPPING INFO HAS ALREADY BEEN SAVED
         const form = document.getElementById("address_to");
-        if (shippingInfo && form) {
-            for (const key in shippingInfo) {
+        if (shippingData && form) {
+            for (const key in shippingData) {
                 const input = form.elements[key];
                 if (input) { // Check if the form element exists
-                    input.value = shippingInfo[key].toString();
+                    input.value = shippingData[key].toString();
                 }
             }
         }
@@ -113,7 +116,7 @@ export function ShoppingCart(props) {
         const formElement = document.getElementById(formID);
         const formData = new FormData(formElement);
         const formObject = Object.fromEntries(formData);
-        SetShippingInfo(formObject);
+        setShippingInfo(formObject);
     }
     handleOnApprove.propTypes = {
         data: PropTypes.object.isRequired
@@ -121,9 +124,8 @@ export function ShoppingCart(props) {
     function handleOnApprove(props) {
         if (debug)
             console.log("Handling onApprove");
-        // eslint-disable-next-line react/prop-types
         setOrderData(props.data);
-        ClearShoppingCart();
+        clearShoppingCart();
         // SetProgressStep();
         SetProgressStep("ThankYou");
     }
@@ -144,20 +146,27 @@ export function ShoppingCart(props) {
     }
     else if (progressStep === "Checkout") {
         // ========== CHECKOUT ==========
-        return (_jsxs("div", { className: "pixCart", children: [_jsx(CalloutHeader, { title: "Checkout Summary : " }), checkoutInfo && _jsx(CheckoutItems, { checkoutData: checkoutInfo }), _jsx("br", {}), _jsx(FormButton, { className: "pixCartButton", type: "button", id: "backToCart", text: "<= Back To Cart", onClick: () => SetProgressStep("ShippingInfo") }), _jsx("br", {}), _jsx(PayPal, { payPalClientID: props.payPalClientID, checkoutData: getCheckoutData(), onApprove: handleOnApprove })] }));
+        return (_jsxs("div", { className: "pixCart", children: [_jsx(CalloutHeader, { title: "Checkout Summary : " }), checkoutData && _jsx(CheckoutItems, { ...checkoutData }), _jsx("br", {}), _jsx(FormButton, { className: "pixCartButton", type: "button", id: "backToCart", text: "<= Back To Cart", onClick: () => SetProgressStep("ShippingInfo") }), _jsx("br", {}), _jsx(PayPal, { payPalClientID: props.payPalClientID, checkoutData: getCheckoutData(), onApprove: handleOnApprove })] }));
     }
     else if (progressStep === "ShippingInfo") {
         // ========== SHOPPING CART ==========
         // ========== SHIPPING INFO ==========
-        return (_jsxs("div", { className: "pixCart", children: [_jsx(CalloutHeader, { title: "Shopping Cart : " }), paintCartItems(shoppingCart ?? []), _jsx("br", {}), _jsx("div", { children: _jsx(FormButton, { className: "pixCartButton", type: "button", id: "backToCart", text: "Clear Cart", onClick: () => ClearShoppingCart() }) }), _jsx("br", {}), _jsx("br", {}), _jsx("hr", {}), _jsx("br", {}), _jsx("br", {}), _jsxs("div", { children: [_jsx(CalloutHeader, { title: "Shipping To : " }), _jsx(FormEngine, { name: "address_to", id: "address_to", formData: shippingToData, onSubmitHandler: onShippingSubmit })] })] }));
+        return (_jsxs("div", { className: "pixCart", children: [_jsx(CalloutHeader, { title: "Shopping Cart : " }), paintCartItems(shoppingCart ?? []), _jsx("br", {}), _jsx("div", { children: _jsx(FormButton, { className: "pixCartButton", type: "button", id: "backToCart", text: "Clear Cart", onClick: () => clearShoppingCart() }) }), _jsx("br", {}), _jsx("br", {}), _jsx("hr", {}), _jsx("br", {}), _jsx("br", {}), _jsxs("div", { children: [_jsx(CalloutHeader, { title: "Shipping To : " }), _jsx(FormEngine, { name: "address_to", id: "address_to", formData: shippingToData, onSubmitHandler: onShippingSubmit })] })] }));
     }
     else {
         // ========== EMPTY SHOPPING CART ==========
         return (_jsxs("div", { className: "pixCart", children: [_jsx(CalloutHeader, { title: "Shopping Cart : " }), _jsx("br", {}), _jsx("div", { className: "centered", children: "No items in your shopping cart" }), _jsx("div", { id: "paypal-button-container", className: "paypal-button-container" })] }));
     }
 }
-ShoppingCartItem.PropTypes = {
-    item: PropTypes.object.isRequired
+ShoppingCartItem.propTypes = {
+    item: PropTypes.shape({
+        itemID: PropTypes.string.isRequired,
+        itemURL: PropTypes.string,
+        itemTitle: PropTypes.string.isRequired,
+        itemImageURL: PropTypes.string,
+        itemQuantity: PropTypes.number.isRequired,
+        itemCost: PropTypes.number.isRequired,
+    }).isRequired
 };
 export function ShoppingCartItem(props) {
     const thisItem = props.item;
@@ -171,30 +180,53 @@ export function ShoppingCartItem(props) {
                         _jsx(SmartImage, { src: thisItem.itemImageURL, title: thisItem.itemTitle, alt: thisItem.itemTitle, cloudinaryEnv: config?.cloudinary?.product_env, cloudinaryDomain: config?.cloudinary?.baseUrl, cloudinaryTransforms: config?.cloudinary?.transforms }))
                         : _jsx(_Fragment, {}) }), _jsxs("div", { className: "grid-s4-e11", children: [_jsx("div", { className: "pixCartItemHeader", children: _jsx("span", { children: thisItem.itemURL
                                 ? _jsx("a", { href: thisItem.itemURL, target: thisItemTarget, rel: "noopener noreferrer", children: _jsx("h2", { className: "", children: thisItem.itemTitle }) })
-                                : _jsx("h2", { className: "", children: thisItem.itemTitle }) }) }), _jsxs("div", { className: "pixCartItemDetails grid12", children: [_jsx("br", {}), _jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.itemID] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.itemQuantity] }), _jsx("br", {}), _jsx("div", { children: _jsx(FormButton, { className: "pixCartButton", type: "button", id: `btn-rm-${thisItem.itemID}`, text: "Remove Item From Cart", onClick: () => RemoveFromShoppingCart(thisItem) }) })] })] }), _jsx("div", { className: "grid-s11-e13", children: _jsx("div", { className: "pixCartItemPrice", children: formatAsUSD(thisItem.itemCost) }) })] }));
+                                : _jsx("h2", { className: "", children: thisItem.itemTitle }) }) }), _jsxs("div", { className: "pixCartItemDetails grid12", children: [_jsx("br", {}), _jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.itemID] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.itemQuantity] }), _jsx("br", {}), _jsx("div", { children: _jsx(FormButton, { className: "pixCartButton", type: "button", id: `btn-rm-${thisItem.itemID}`, text: "Remove Item From Cart", onClick: () => removeFromShoppingCart(thisItem) }) })] })] }), _jsx("div", { className: "grid-s11-e13", children: _jsx("div", { className: "pixCartItemPrice", children: formatAsUSD(thisItem.itemCost) }) })] }));
 }
+CheckoutItems.propTypes = {
+    items: PropTypes.arrayOf(PropTypes.shape({
+        itemID: PropTypes.string.isRequired,
+        itemURL: PropTypes.string,
+        itemTitle: PropTypes.string.isRequired,
+        itemImageURL: PropTypes.string,
+        itemQuantity: PropTypes.number.isRequired,
+        itemCost: PropTypes.number.isRequired,
+    })).isRequired,
+    shippingTo: PropTypes.shape({
+        name: PropTypes.string.isRequired,
+        street1: PropTypes.string.isRequired,
+        city: PropTypes.string.isRequired,
+        state: PropTypes.string.isRequired,
+        zip: PropTypes.string.isRequired,
+    }).isRequired,
+    subtotal_discount: PropTypes.number.isRequired,
+    subtotal: PropTypes.number.isRequired,
+    shippingCost: PropTypes.number.isRequired,
+    handlingFee: PropTypes.number.isRequired,
+    salesTax: PropTypes.number.isRequired,
+    total: PropTypes.number.isRequired,
+};
 export function CheckoutItems(props) {
-    const items = props.checkoutData.items.map((item) => (_jsxs("div", { children: [item.itemQuantity, " X - ", item.itemTitle, " ( ", formatAsUSD(item.itemCost), " )"] }, item.itemID)));
-    const to = props.checkoutData.shippingTo;
+    const { items, shippingTo, subtotal_discount, subtotal, shippingCost, handlingFee, salesTax, total } = props;
+    const to = shippingTo;
     const addr = _jsxs(_Fragment, { children: [_jsx("div", { children: to.name }), _jsx("div", { children: to.street1 }), _jsxs("div", { children: [to.city, ", ", to.state, " ", to.zip] })] });
     let checkoutTableData = [{
             "Name": "Shopping Cart Items : ",
             "Value": items,
         }, {
             "Name": "Subtotal Discount : ",
-            "Value": formatAsUSD(props.checkoutData.subtotal_discount),
+            "Value": formatAsUSD(subtotal_discount),
         }, {
             "Name": "Subtotal : ",
-            "Value": formatAsUSD(props.checkoutData.subtotal),
+            "Value": formatAsUSD(subtotal),
         }, {
             "Name": "Shipping Address : ",
             "Value": addr,
         }, {
             "Name": "Shipping Cost : ",
-            "Value": formatAsUSD(props.checkoutData.shippingCost),
+            "Value": formatAsUSD(shippingCost),
         }, {
             "Name": "Handling Fee : ",
-            "Value": formatAsUSD(props.checkoutData.handlingFee),
+            "Value": formatAsUSD(handlingFee),
         }, /* {
             "Name": "Insurance Cost : ",
             "Value": formatAsUSD(checkoutData.insuranceCost ?? 0),
@@ -204,16 +236,19 @@ export function CheckoutItems(props) {
         }, */
         {
             "Name": "Sales Tax : ",
-            "Value": formatAsUSD(props.checkoutData.salesTax),
+            "Value": formatAsUSD(salesTax),
         }, {
             "Name": "TOTAL : ",
-            "Value": formatAsUSD(props.checkoutData.total),
+            "Value": formatAsUSD(total),
         }];
-    if (props.checkoutData.subtotal_discount == 0) {
+    if (subtotal_discount == 0) {
         checkoutTableData = checkoutTableData.filter(obj => obj.Name !== "Subtotal Discount : ");
     }
     return (_jsx(Table, { id: "pixCheckout", data: checkoutTableData }));
 }
+CartButton.propTypes = {
+    href: PropTypes.string.isRequired,
+};
 export function CartButton(props) {
     const config = usePixelatedConfig();
     const [cartCount, setCartCount] = useState(0);
@@ -238,9 +273,18 @@ export function CartButton(props) {
     }, [cartCount]);
     return (_jsx("div", { className: "pixCart", children: _jsxs("button", { className: "pixCartButton", type: "button", id: "pixCartButton", onClick: () => window.location.href = props.href, children: [_jsx(SmartImage, { src: "/images/icons/cart-icon.png", title: "View Shopping Cart", alt: "View Shopping Cart", cloudinaryEnv: config?.cloudinary?.product_env, cloudinaryDomain: config?.cloudinary?.baseUrl, cloudinaryTransforms: config?.cloudinary?.transforms }), _jsxs("span", { children: ["\u00A0", `(${cartCount})`] })] }) }));
 }
+ViewItemDetails.propTypes = {
+    href: PropTypes.string.isRequired,
+    itemID: PropTypes.string.isRequired,
+};
 export function ViewItemDetails(props) {
     return (_jsx("div", { children: _jsx(FormButton, { className: "pixCartButton", type: "button", id: `btn-item-${props.itemID}`, text: "View Item Details", onClick: () => window.location.href = `${props.href}/${props.itemID}` }) }));
 }
+AddToCartButton.propTypes = {
+    handler: PropTypes.func.isRequired,
+    item: PropTypes.object.isRequired,
+    itemID: PropTypes.string.isRequired,
+};
 export function AddToCartButton(props) {
     const [modalContent, setModalContent] = useState();
     useEffect(() => {
@@ -251,8 +295,12 @@ export function AddToCartButton(props) {
         props.handler(props.item);
         handleModalOpen(e.nativeEvent, "-" + props.itemID);
     }
-    return (_jsxs("div", { children: [_jsx(FormButton, { className: "pixCartButton", type: "button", id: `btn-add-${props.itemID}`, text: "Add to Shopping Cart", onClick: (e) => handleClick(e) }), _jsx(Modal, { modalContent: modalContent, modalID: "-" + props.itemID })] }));
+    return (_jsxs("div", { children: [_jsx(FormButton, { className: "pixCartButton", type: "button", id: `btn-add-${props.itemID}`, text: "Add to Shopping Cart", onClick: (e) => handleClick(e) }), modalContent && _jsx(Modal, { modalContent: modalContent, modalID: "-" + props.itemID })] }));
 }
+GoToCartButton.propTypes = {
+    href: PropTypes.string.isRequired,
+    itemID: PropTypes.string.isRequired,
+};
 export function GoToCartButton(props) {
     return (_jsx("div", { children: _jsx(FormButton, { className: "pixCartButton", type: "button", id: `btn-cart-${props.itemID}`, text: "Go to Shopping Cart", onClick: () => window.location.href = props.href }) }));
 }

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

@@ -127,7 +127,7 @@ export function getCartSubTotal(cart) {
     }
     return formatAsHundredths(cartSubTotal);
 }
-export function AddToShoppingCart(thisItem) {
+export function addToShoppingCart(thisItem) {
     let cart = getCart();
     if (alreadyInCart(cart, thisItem.itemID)) {
         const index = getIndexInCart(cart, thisItem.itemID);
@@ -153,7 +153,7 @@ export function AddToShoppingCart(thisItem) {
     localStorage.setItem(shoppingCartKey, JSON.stringify(cart));
     window.dispatchEvent(new Event('storage'));
 }
-export function RemoveFromShoppingCart(thisItem) {
+export function removeFromShoppingCart(thisItem) {
     let cart = getCart();
     if (alreadyInCart(cart, thisItem.itemID)) {
         cart.splice(getIndexInCart(cart, thisItem.itemID), 1);
@@ -161,7 +161,7 @@ export function RemoveFromShoppingCart(thisItem) {
     localStorage.setItem(shoppingCartKey, JSON.stringify(cart));
     window.dispatchEvent(new Event('storage'));
 }
-export function ClearShoppingCart() {
+export function clearShoppingCart() {
     localStorage.removeItem(shoppingCartKey);
     localStorage.removeItem(shippingInfoKey);
     window.dispatchEvent(new Event('storage'));
@@ -171,7 +171,7 @@ export function getShippingInfo() {
     const ship = localStorage.getItem(shippingInfoKey);
     return ship ? JSON.parse(ship) : [];
 }
-export function SetShippingInfo(shippingFormData) {
+export function setShippingInfo(shippingFormData) {
     localStorage.setItem(shippingInfoKey, JSON.stringify(shippingFormData));
     window.dispatchEvent(new Event('storage'));
 }

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

@@ -3,7 +3,16 @@ import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FontSelector } from './FontSelector';
 import './CompoundFontSelector.css';
-export function CompoundFontSelector({ id, name, label, required = false, value = '', onChange }) {
+CompoundFontSelector.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    required: PropTypes.bool,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+};
+export function CompoundFontSelector(props) {
+    const { id, name, label, required = false, value = '', onChange } = props;
     // Parse the compound value into primary, fallback, generic parts
     const parseCompoundValue = (val) => {
         const parts = val.split(',').map(s => s.trim());
@@ -13,10 +22,10 @@ export function CompoundFontSelector({ id, name, label, required = false, value
             generic: parts[2] || ''
         };
     };
-    const [fonts, setFonts] = useState(parseCompoundValue(value));
+    const [fonts, setFonts] = useState(parseCompoundValue(value || ''));
     // Update fonts when value changes externally
     useEffect(() => {
-        setFonts(parseCompoundValue(value));
+        setFonts(parseCompoundValue(value || ''));
     }, [value]);
     // Combine fonts into a single font stack value
     const combineFonts = (fontParts) => {
@@ -29,7 +38,7 @@ export function CompoundFontSelector({ id, name, label, required = false, value
         const combinedValue = combineFonts(updatedFonts);
         onChange?.(combinedValue);
     };
-    return (_jsxs("div", { className: "compound-font-selector", children: [_jsx("label", { children: label }), _jsxs("div", { className: "compound-container", children: [_jsx(FontSelector, { id: `${id}-primary`, name: `${name}-primary`, label: "Primary Font", fontType: "google", required: required, placeholder: "Select Google Font", value: fonts.primary, onChange: (val) => handleFontChange('primary', val) }), _jsx(FontSelector, { id: `${id}-fallback`, name: `${name}-fallback`, label: "Fallback Font", fontType: "websafe", required: false, placeholder: "Select web-safe font", value: fonts.fallback, onChange: (val) => handleFontChange('fallback', val) }), _jsx(FontSelector, { id: `${id}-generic`, name: `${name}-generic`, label: "Generic Family", fontType: "generic", required: false, placeholder: "Select generic family", value: fonts.generic, onChange: (val) => handleFontChange('generic', val) })] })] }));
+    return (_jsxs("div", { className: "compound-font-selector", children: [_jsx("label", { children: label }), _jsxs("div", { className: "compound-container", children: [_jsx(FontSelector, { id: `${id}-primary`, name: `${name}-primary`, label: "Primary Font", fontType: "google", required: !!required, placeholder: "Select Google Font", value: fonts.primary, onChange: (val) => handleFontChange('primary', val) }), _jsx(FontSelector, { id: `${id}-fallback`, name: `${name}-fallback`, label: "Fallback Font", fontType: "websafe", required: false, placeholder: "Select web-safe font", value: fonts.fallback, onChange: (val) => handleFontChange('fallback', val) }), _jsx(FontSelector, { id: `${id}-generic`, name: `${name}-generic`, label: "Generic Family", fontType: "generic", required: false, placeholder: "Select generic family", value: fonts.generic, onChange: (val) => handleFontChange('generic', val) })] })] }));
 }
 CompoundFontSelector.propTypes = {
     id: PropTypes.string.isRequired,