@pixelated-tech/components 3.4.3 → 3.5.1

package/dist/components/seo/faq-accordion.css

@@ -0,0 +1,125 @@
+/* FAQ Accordion Styles */
+
+.faq-container {
+	width: 100%;
+	margin: 0 auto;
+	padding: 1.5rem; /* p-6 */
+	background-color: white;
+	border-radius: 0.5rem; /* rounded-lg */
+	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-sm */
+}
+
+.faq-toolbar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 1.5rem; /* mb-6 */
+}
+
+.search-box {
+	flex: 1;
+	max-width: 28rem; /* max-w-md */
+}
+
+.search-input {
+	width: 100%;
+	padding: 0.5rem 1rem; /* px-4 py-2 */
+	border: 1px solid #d1d5db; /* border-gray-300 */
+	border-radius: 0.5rem; /* rounded-lg */
+	color: #374151; /* text-gray-700 */
+	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.search-input:focus {
+	outline: none;
+	border-color: #3b82f6; /* focus:ring-blue-200 */
+	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); /* focus:ring-2 */
+}
+
+.expand-buttons {
+	display: flex;
+	gap: 0.5rem;
+}
+
+.expand-button {
+	padding: 0.5rem 1rem; /* px-4 py-2 */
+	background-color: #dbeafe; /* bg-blue-100 */
+	color: #1d4ed8; /* text-blue-700 */
+	border-radius: 0.5rem; /* rounded-lg */
+	border: none;
+	cursor: pointer;
+	transition: background-color 0.15s ease-in-out, transform 0.1s ease-in-out;
+	font-size: 1.25rem;
+	font-weight: bold;
+	min-width: 3rem;
+}
+
+.expand-button:hover {
+	background-color: #bfdbfe; /* hover:bg-blue-200 */
+	transform: scale(1.05);
+}
+
+.expand-button:focus {
+	outline: 2px solid #3b82f6;
+	outline-offset: 2px;
+}
+
+.faq-list {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem; /* space-y-4 */
+}
+
+/* Override general accordion styles for FAQ-specific appearance */
+.faq-list .accordion-item {
+	margin-bottom: 0.5rem;
+	border: 1px solid #e5e7eb; /* border-gray-200 */
+	border-radius: 0.5rem; /* rounded-lg */
+	background: #fff;
+}
+
+.faq-list .accordion-title {
+	padding: 1rem 1.5rem; /* px-6 py-4 */
+	font-weight: 500; /* font-medium */
+	background-color: #f9fafb; /* bg-gray-50 */
+	color: #1f2937; /* text-gray-800 */
+	transition: background-color 0.15s ease-in-out;
+}
+
+.faq-list .accordion-title:hover {
+	background-color: #f3f4f6; /* hover:bg-gray-100 */
+}
+
+.faq-list .accordion-title:focus {
+	outline: 2px solid #3b82f6;
+	outline-offset: 2px;
+	background-color: #f3f4f6;
+}
+
+.faq-list .accordion-content {
+	padding: 1rem 1.5rem; /* px-6 py-4 */
+	background-color: white;
+	transition: background-color 0.15s ease-in-out;
+}
+
+.faq-list .accordion-content:hover {
+	background-color: var(--accent2-color, #fefefe);
+}
+
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+.no-results {
+	text-align: center;
+	color: #6b7280; /* text-gray-500 */
+	padding: 2rem 0; /* py-8 */
+}

package/dist/components/seo/faq-accordion.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Accordion } from '../general/accordion';
+import './faq-accordion.css';
+const categoryIcons = {
+    'Getting Started': '🚀',
+    'Process & Timeline': '⏱️',
+    'Technical Details': '⚙️',
+    'Content & Management': '📝',
+    'Support & Maintenance': '🛠️',
+    'Ownership & Legal': '📋',
+    'Services': '💼'
+};
+FAQAccordion.propTypes = {
+    faqsData: PropTypes.shape({
+        mainEntity: PropTypes.arrayOf(PropTypes.shape({
+            name: PropTypes.string,
+            category: PropTypes.string,
+            acceptedAnswer: PropTypes.shape({
+                text: PropTypes.string,
+            }),
+        })),
+    }).isRequired,
+};
+export function FAQAccordion({ faqsData }) {
+    const [searchTerm, setSearchTerm] = useState('');
+    const [expandedStates, setExpandedStates] = useState(faqsData.mainEntity?.map(() => false) || []);
+    const filteredFaqs = useMemo(() => {
+        if (!faqsData.mainEntity)
+            return [];
+        if (!searchTerm)
+            return faqsData.mainEntity;
+        return faqsData.mainEntity.filter((faq) => faq.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            faq.acceptedAnswer.text.toLowerCase().includes(searchTerm.toLowerCase()));
+    }, [faqsData.mainEntity, searchTerm]);
+    const expandAll = () => {
+        setExpandedStates(expandedStates.map(() => true));
+    };
+    const collapseAll = () => {
+        setExpandedStates(expandedStates.map(() => false));
+    };
+    const handleToggle = (index, open) => {
+        setExpandedStates(prev => prev.map((state, i) => i === index ? open : state));
+    };
+    // Transform FAQ data to Accordion format
+    const accordionItems = filteredFaqs.map((faq, index) => {
+        const content = _jsx("div", { dangerouslySetInnerHTML: { __html: faq.acceptedAnswer.text } });
+        return {
+            title: `${categoryIcons[faq.category] || '❓'} ${faq.name}`,
+            content,
+            open: expandedStates[index] || undefined
+        };
+    });
+    return (_jsxs("div", { className: "faq-container", role: "region", "aria-label": "Frequently Asked Questions", children: [_jsxs("div", { className: "faq-toolbar", children: [_jsxs("div", { className: "search-box", children: [_jsx("input", { type: "text", placeholder: "Search FAQs...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "search-input", "aria-describedby": "search-help" }), _jsx("div", { id: "search-help", className: "sr-only", children: "Search through frequently asked questions by typing keywords" })] }), _jsxs("div", { className: "expand-buttons", children: [_jsx("button", { onClick: expandAll, className: "expand-button expand-all", "aria-label": "Expand all FAQ answers", title: "Expand all answers", children: "+" }), _jsx("button", { onClick: collapseAll, className: "expand-button collapse-all", "aria-label": "Collapse all FAQ answers", title: "Collapse all answers", children: "\u2212" })] })] }), _jsx("div", { className: "faq-list", "aria-live": "polite", "aria-atomic": "false", children: _jsx(Accordion, { items: accordionItems, onToggle: handleToggle }) })] }));
+}

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-faq.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function SchemaFAQ({ faqsData }) {
+    return (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: {
+            __html: JSON.stringify(faqsData),
+        } }));
+}

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,