@pixelated-tech/components 3.4.3 → 3.5.0

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,

package/dist/components/sitebuilder/config/ConfigBuilder.css

@@ -162,8 +162,6 @@
 }
 
 .route-item {
-  display: grid;
-  grid-template-columns: 2fr 2fr 2fr 2fr auto;
   gap: 10px;
   align-items: center;
   padding: 10px;
@@ -172,11 +170,18 @@
   margin-bottom: 10px;
 }
 
-.route-item input {
+.route-item input,
+.route-item select,
+.route-item textarea {
   padding: 6px 8px;
   border: 1px solid #ddd;
   border-radius: 3px;
-  font-size: 14px;
+  font-size: var(--font-size5);
+}
+
+.route-item label {
+  font-size: var(--font-size5);
+  font-weight: bold;
 }
 
 .route-item button {
@@ -274,4 +279,188 @@
   font-size: 14px;
   margin-top: 8px;
   font-weight: 500;
-}
+}
+/* AI Recommendations Modal */
+.ai-recommendations-modal {
+  max-width: 600px;
+}
+
+.ai-recommendations-modal h3 {
+  margin-top: 0;
+  color: #333;
+}
+
+.ai-loading {
+  text-align: center;
+  padding: 20px;
+}
+
+.loading-spinner {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #007acc;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  animation: spin 1s linear infinite;
+  margin: 10px auto;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.ai-error {
+  color: #dc3545;
+  padding: 10px;
+  background-color: #f8d7da;
+  border-radius: 4px;
+  margin: 10px 0;
+}
+
+.ai-recommendations {
+  margin: 20px 0;
+}
+
+.recommendation-item {
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  border-left: 4px solid #007acc;
+}
+
+.recommendation-item label {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 8px;
+  cursor: pointer;
+}
+
+.recommendation-item input[type="checkbox"] {
+  margin-right: 8px;
+  accent-color: #007acc;
+}
+
+.recommendation-item label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.recommendation-item label:hover {
+  background-color: #f0f8ff;
+}
+
+.recommendation-content {
+  margin-left: 20px;
+}
+
+.current-value {
+  color: #666;
+  font-size: 0.9em;
+  margin-bottom: 5px;
+}
+
+.suggested-value {
+  color: #007acc;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  margin-top: 20px;
+  padding-top: 15px;
+  border-top: 1px solid #dee2e6;
+}
+
+.modal-actions button {
+  padding: 8px 16px;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  background-color: #fff;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.modal-actions button:hover {
+  background-color: #f8f9fa;
+}
+
+.accept-button {
+  background-color: #28a745 !important;
+  color: white !important;
+  border-color: #28a745 !important;
+}
+
+.accept-button:hover {
+  background-color: #218838 !important;
+}
+
+.accept-button:disabled {
+  background-color: #6c757d !important;
+  border-color: #6c757d !important;
+  cursor: not-allowed;
+  color: white !important;
+}
+
+/* Route management buttons */
+.route-buttons {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.route-button {
+  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  background-color: #fff;
+  color: #495057;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.route-button:hover {
+  background-color: #f8f9fa;
+  border-color: #adb5bd;
+}
+
+.route-button.ai-recommend {
+  background-color: #4285f4;
+  color: #fff;
+  border-color: #4285f4;
+}
+
+.route-button.ai-recommend:hover {
+  background-color: #3367d6;
+  border-color: #3367d6;
+}
+
+.route-button.remove {
+  background-color: #dc3545;
+  color: #fff;
+  border-color: #dc3545;
+}
+
+.route-button.remove:hover {
+  background-color: #c82333;
+  border-color: #c82333;
+}
+
+.ai-icon {
+  font-size: 14px;
+  font-weight: bold;
+  color: #fff;
+}