@pixelated-tech/components 3.1.4

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

@@ -0,0 +1,240 @@
+import PropTypes from "prop-types";
+import { getCloudinaryRemoteFetchURL as getImg } from "../cms/cloudinary";
+const debug = false;
+/* ===== EBAY BROWSE API DOCUMENTATION =====
+https://developer.ebay.com/api-docs/buy/browse/resources/item_summary/methods/search
+https://developer.ebay.com/api-docs/buy/static/ref-buy-browse-filters.html
+https://developer.ebay.com/api-docs/static/oauth-ui-tokens.html
+https://developer.ebay.com/my/keys
+https://developer.ebay.com/my/auth?env=production&index=0
+*/
+// category : 0 : {categoryId: '79720', categoryName: 'Sunglasses'}
+// category : 0 : {categoryId: '179241', categoryName: 'Accessories'}
+// categoryId : "79720"
+export const ebaySunglassCategory = '79720'; // Ebay Sunglasses Category
+getShoppingCartItem.propTypes = {
+    thisItem: PropTypes.any.isRequired,
+    cloudinaryProductEnv: PropTypes.string,
+};
+export function getShoppingCartItem(props) {
+    let qty = 0;
+    const thisItem = props.thisItem;
+    if (thisItem.categoryId && thisItem.categoryId == ebaySunglassCategory) {
+        qty = 1;
+    }
+    else if (thisItem.categories[0].categoryId && thisItem.categories[0].categoryId == ebaySunglassCategory) {
+        qty = 1;
+    }
+    else {
+        qty = 10;
+    }
+    const shoppingCartItem = {
+        itemImageURL: (thisItem.thumbnailImages && props.cloudinaryProductEnv)
+            ? getImg({ url: thisItem.thumbnailImages[0].imageUrl, product_env: props.cloudinaryProductEnv })
+            : (thisItem.thumbnailImages)
+                ? thisItem.thumbnailImages[0].imageUrl
+                : (thisItem.image && props.cloudinaryProductEnv)
+                    ? getImg({ url: thisItem.image.imageUrl, product_env: props.cloudinaryProductEnv })
+                    : thisItem.image.imageUrl,
+        itemID: thisItem.legacyItemId,
+        itemURL: thisItem.itemWebUrl,
+        itemTitle: thisItem.title,
+        itemQuantity: qty,
+        itemCost: thisItem.price.value,
+    };
+    return shoppingCartItem;
+}
+/*
+search tokenScope: 'https://api.ebay.com/oauth/api_scope',
+item tokenScope: 'https://api.ebay.com/oauth/api_scope/buy.item.bulk',
+getItem tokenScope: 'https://api.ebay.com/oauth/api_scope',
+*/
+export const defaultEbayProps = {
+    proxyURL: "https://proxy.pixelated.tech/prod/proxy?url=",
+    baseTokenURL: 'https://api.ebay.com/identity/v1/oauth2/token',
+    tokenScope: 'https://api.ebay.com/oauth/api_scope',
+    baseSearchURL: 'https://api.ebay.com/buy/browse/v1/item_summary/search',
+    qsSearchURL: '?q=sunglasses&fieldgroups=full&category_ids=79720&aspect_filter=categoryId:79720&filter=sellers:{pixelatedtech}&sort=newlyListed&limit=200',
+    baseItemURL: 'https://api.ebay.com/buy/browse/v1/item',
+    qsItemURL: '/v1|295959752403|0?fieldgroups=PRODUCT,ADDITIONAL_SELLER_DETAILS',
+    appId: 'BrianWha-Pixelate-PRD-1fb4458de-1a8431fe', // clientId
+    appCertId: 'PRD-fb4458deef01-0d54-496a-b572-a04b', // clientSecret
+    sbxAppId: 'BrianWha-Pixelate-SBX-ad482b6ae-8cb8fead', // Sandbox
+    sbxAppCertId: '',
+    globalId: 'EBAY-US',
+};
+/* ========== GET TOKEN ========== */
+getEbayAppToken.propTypes = {
+    apiProps: PropTypes.object.isRequired,
+};
+export function getEbayAppToken(props) {
+    const apiProps = { ...defaultEbayProps, ...props.apiProps };
+    const fetchToken = async () => {
+        if (debug)
+            console.log("Fetching Token");
+        try {
+            const response = await fetch(apiProps.proxyURL + apiProps.baseTokenURL, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                    'Authorization': 'Basic ' + btoa(`${apiProps.appId}:${apiProps.appCertId}`) // Base64 encoded
+                },
+                body: new URLSearchParams({
+                    grant_type: 'client_credentials',
+                    scope: apiProps.tokenScope
+                })
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            const accessToken = data.access_token;
+            if (debug)
+                console.log("Fetched eBay Access Token:", accessToken);
+            return accessToken;
+        }
+        catch (error) {
+            console.error('Error fetching token:', error);
+        }
+    };
+    return fetchToken();
+}
+/* ========== ITEM SEARCH ========== */
+getEbayBrowseSearch.propTypes = {
+    apiProps: PropTypes.object.isRequired,
+    token: PropTypes.string.isRequired,
+};
+export function getEbayBrowseSearch(props) {
+    const apiProps = { ...defaultEbayProps, ...props.apiProps };
+    const fetchData = async (token) => {
+        if (debug)
+            console.log("Fetching ebay API Browse Search Data");
+        try {
+            const response = await fetch(apiProps.proxyURL + encodeURIComponent(apiProps.baseSearchURL + apiProps.qsSearchURL), {
+                method: 'GET',
+                headers: {
+                    'Authorization': 'Bearer ' + token,
+                    'X-EBAY-C-MARKETPLACE-ID': 'EBAY_US',
+                    'X-EBAY-C-ENDUSERCTX': 'affiliateCampaignId=<ePNCampaignId>,affiliateReferenceId=<referenceId>',
+                    'X-EBAY-SOA-SECURITY-APPNAME': 'BrianWha-Pixelate-PRD-1fb4458de-1a8431fe',
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            if (debug)
+                console.log("Fetched eBay API Browse Search Data:", await data);
+            return (await data);
+        }
+        catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    };
+    return fetchData(props.token);
+}
+/* ========== GET ITEM ========== */
+getEbayBrowseItem.propTypes = {
+    apiProps: PropTypes.object.isRequired,
+    token: PropTypes.string.isRequired,
+};
+export function getEbayBrowseItem(props) {
+    const apiProps = { ...defaultEbayProps, ...props.apiProps };
+    const fetchData = async (token) => {
+        if (debug)
+            console.log("Fetching ebay API Browse Item Data");
+        try {
+            const response = await fetch(apiProps.proxyURL + encodeURIComponent((apiProps.baseItemURL ?? '') + (apiProps.qsItemURL ?? '')), {
+                method: 'GET',
+                headers: {
+                    'Authorization': 'Bearer ' + token,
+                    'X-EBAY-C-MARKETPLACE-ID': 'EBAY_US',
+                    'X-EBAY-C-ENDUSERCTX': 'affiliateCampaignId=<ePNCampaignId>,affiliateReferenceId=<referenceId>',
+                    'X-EBAY-SOA-SECURITY-APPNAME': 'BrianWha-Pixelate-PRD-1fb4458de-1a8431fe',
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            if (debug)
+                console.log("Fetched eBay Item Data:", await data);
+            return (await data);
+        }
+        catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    };
+    return fetchData(props.token);
+}
+/* ========== EXPORTED FUNCTIONS ========== */
+/* ========== GET EBAY ITEMS ========== */
+getEbayItems.propTypes = {
+    apiProps: PropTypes.object.isRequired,
+};
+export async function getEbayItems(props) {
+    const apiProps = { ...defaultEbayProps, ...props.apiProps };
+    try {
+        const response = await getEbayAppToken({ apiProps: apiProps });
+        if (debug)
+            console.log("eBay App Token Response:", response);
+        const data = await getEbayBrowseSearch({ apiProps: apiProps, token: response });
+        if (debug)
+            console.log("eBay Browse Search Data:", data);
+        return data;
+    }
+    catch (error) {
+        console.error("Failed to fetch eBay Items:", error);
+    }
+    // Return an empty object if there's an error
+    return {};
+}
+/* ========== GET EBAY ITEMS ========== */
+getEbayItem.propTypes = {
+    apiProps: PropTypes.object.isRequired,
+};
+export async function getEbayItem(props) {
+    const apiProps = { ...defaultEbayProps, ...props.apiProps };
+    try {
+        const response = await getEbayAppToken({ apiProps: apiProps });
+        if (debug)
+            console.log("eBay App Token Response:", response);
+        const data = await getEbayBrowseItem({ apiProps: apiProps, token: response });
+        if (debug)
+            console.log("eBay Browse Item Data:", data);
+        return data;
+    }
+    catch (error) {
+        console.error("Failed to fetch eBay Items:", error);
+    }
+    // Return an empty object if there's an error
+    return {};
+}
+/* ========== ITEM SEARCH ========== */
+export function getEbayItemsSearch(props) {
+    const apiProps = { ...defaultEbayProps, ...props.apiProps };
+    const fetchData = async (token) => {
+        if (debug)
+            console.log("Fetching ebay API Data");
+        try {
+            const response = await fetch(apiProps.proxyURL + encodeURIComponent(apiProps.baseSearchURL + apiProps.qsSearchURL), {
+                method: 'GET',
+                headers: {
+                    'Authorization': 'Bearer ' + token,
+                    'X-EBAY-C-MARKETPLACE-ID': 'EBAY_US',
+                    'X-EBAY-C-ENDUSERCTX': 'affiliateCampaignId=<ePNCampaignId>,affiliateReferenceId=<referenceId>',
+                    'X-EBAY-SOA-SECURITY-APPNAME': 'BrianWha-Pixelate-PRD-1fb4458de-1a8431fe',
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            return data;
+        }
+        catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    };
+    return fetchData(props.token);
+}

package/dist/components/shoppingcart/paypal.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from "react-dom";
+import PropTypes from 'prop-types';
+const debug = false;
+function isScriptSrc(scriptSrc) {
+    const scripts = document.querySelectorAll('script[src]');
+    for (let i = 0; i < scripts.length; i++) {
+        if (scripts[i].src.includes(scriptSrc)) {
+            return true;
+        }
+    }
+    return false;
+}
+/*
+https://www.freecodecamp.org/news/integrate-paypal-into-html-css-js-product-pages/
+https://dev.to/evansifyke/how-to-integrate-paypal-with-html-css-and-javascript-2mnb
+*/
+PayPal.PropTypes = {
+    payPalClientID: PropTypes.string.isRequired,
+    checkoutData: PropTypes.object.isRequired,
+    onApprove: PropTypes.func.isRequired
+};
+export function PayPal(props) {
+    const paypalScript = document.createElement('script');
+    paypalScript.src = `https://www.paypal.com/sdk/js?client-id=${props.payPalClientID}&currency=USD&components=buttons&enable-funding=venmo,applepay,card&disable-funding=paylater`;
+    paypalScript.onload = () => {
+        if (window.paypal) {
+            // Now you can access paypal object within the window scope
+            const PayPalButton = paypal.Buttons.driver("react", {
+                React,
+                ReactDOM
+            });
+            initPayPalButton({ checkoutData: props.checkoutData, onApprove: props.onApprove });
+        }
+    };
+    if (!isScriptSrc('https://www.paypal.com/sdk/js')) {
+        document.head.appendChild(paypalScript);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "stylesheet", type: "text/css", href: "https://www.paypalobjects.com/webstatic/en_US/developer/docs/css/cardfields.css" }), _jsx("div", { id: "paypal-button-container", className: "paypal-button-container" })] }));
+}
+export function initPayPalButton(props) {
+    window.paypal.Buttons({
+        style: {
+            shape: "rect",
+            color: "gold",
+            layout: "vertical",
+            label: "paypal",
+        },
+        createOrder: function (data, actions) {
+            // const userInput = document.getElementById("donate-amount").value;
+            // const paypalAmount = parseFloat(userInput) / 100;
+            const checkoutData = props.checkoutData;
+            const orderObject = {
+                "purchase_units": [
+                    {
+                        "amount": {
+                            "currency_code": "USD",
+                            "value": checkoutData.total,
+                            "breakdown": {
+                                "item_total": { "currency_code": "USD", "value": checkoutData.subtotal },
+                                "shipping": { "currency_code": "USD", "value": checkoutData.shippingCost },
+                                "handling": { "currency_code": "USD", "value": checkoutData.handlingFee },
+                                "tax_total": { "currency_code": "USD", "value": checkoutData.salesTax },
+                                // "insurance": { "currency_code": "USD", "value": checkoutData.insuranceCost },
+                                // "shipping_discount": { "currency_code": "USD", "value": checkoutData.shippingDiscount },
+                                "discount": { "currency_code": "USD", "value": checkoutData.subtotal_discount },
+                            }
+                        },
+                        "items": checkoutData.items.map((item) => {
+                            return ({
+                                "name": item.itemID,
+                                "quantity": item.itemQuantity.toString(),
+                                "unit_amount": {
+                                    "currency_code": "USD",
+                                    "value": item.itemCost.toString(),
+                                },
+                                "description": item.itemTitle,
+                                "category": "PHYSICAL_GOODS",
+                                "url": item.itemURL,
+                            });
+                        }),
+                        "shipping": {
+                            "name": {
+                                "full_name": checkoutData.shippingTo.name,
+                            },
+                            "address": {
+                                "address_line_1": checkoutData.shippingTo.street1,
+                                "address_line_2": "",
+                                "admin_area_2": checkoutData.shippingTo.city,
+                                "admin_area_1": checkoutData.shippingTo.state,
+                                "postal_code": checkoutData.shippingTo.zip,
+                                "country_code": checkoutData.shippingTo.country,
+                            },
+                            "email_address": checkoutData.shippingTo.email,
+                            "phone": {
+                                "phone_number": checkoutData.shippingTo.phone,
+                            },
+                        }
+                    },
+                ],
+                "payment_source": {
+                    "paypal": {
+                        "name": {
+                            "given_name": checkoutData.shippingTo.name.split(' ').slice(0, -1).join(' '),
+                            "surname": checkoutData.shippingTo.name.split(' ').slice(-1).join(' '),
+                        },
+                        "address": {
+                            "address_line_1": checkoutData.shippingTo.street1,
+                            "address_line_2": "",
+                            "admin_area_2": checkoutData.shippingTo.city,
+                            "admin_area_1": checkoutData.shippingTo.state,
+                            "postal_code": checkoutData.shippingTo.zip,
+                            "country_code": checkoutData.shippingTo.country,
+                        },
+                        "email_address": checkoutData.shippingTo.email,
+                        "phone": {
+                            "phone_type": "OTHER",
+                            "phone_number": {
+                                "national_number": checkoutData.shippingTo.phone.replace(/\D/g, ''),
+                            }
+                        },
+                        "payment_method_preference": "IMMEDIATE_PAYMENT_REQUIRED",
+                        "experience_context": {
+                            // return_url: "https://example.com/returnUrl",
+                            // cancel_url: "https://example.com/cancelUrl",
+                            // "shipping_preference": "SET_FROM_PROVIDER"
+                            "shipping_preference": "SET_PROVIDED_ADDRESS",
+                            "user_action": "PAY_NOW" // or "CONTINUE"
+                        }
+                    }
+                }
+            };
+            return actions.order.create(orderObject);
+        },
+        onApprove: function (data, actions) {
+            return actions.order.capture().then(function (orderData) {
+                if (debug)
+                    console.log("Capture result", orderData, JSON.stringify(orderData, null, 2));
+                props.onApprove({ data: orderData });
+                // Show a success message within this page, for example:
+                /* const element = document.getElementById("paypal-button-container");
+                if(element){
+                    element.innerHTML = "";
+                    element.innerHTML = "<h3>Thank you for your payment!</h3>";
+                } */
+                // Or go to another URL:  actions.redirect('thank_you.html');
+            });
+        },
+        onError: function (err) {
+            console.log(err);
+            switch (e.toString()) {
+                case 'Error: Detected popup close':
+                    showInfoBanner('PayPal Payment cancelled'); // Or handle as needed
+                    break;
+                default:
+                    showError('PayPal error');
+            }
+        },
+        onCancel: function (data) {
+            // Show a cancel page or return to cart
+            // For example, redirect the user to a cancellation page:
+            window.location.href = "/cart";
+        }
+    })
+        .render("#paypal-button-container");
+}

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

@@ -0,0 +1,257 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { PayPal } from "./paypal";
+import { CalloutHeader } from "../callout/callout";
+import { FormEngine } from "../pagebuilder/form/form";
+import { FormButton } from '../pagebuilder/form/formcomponents';
+import { emailJSON } from "../pagebuilder/form/form.submit";
+import '../pagebuilder/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 { usePixelatedConfig } from '../config/config.client';
+import { SmartImage } from '../cms/cloudinary.image';
+import shippingToData from "../../data/shipping.to.json";
+import "./shoppingcart.css";
+const debug = false;
+/* ================================================ */
+/* ========== SHOPPING CART UI COMPONENT ========== */
+/* ================================================ */
+export function ShoppingCart(props) {
+    const [shoppingCart, setShoppingCart] = useState();
+    const [shippingInfo, setShippingInfo] = useState();
+    const [checkoutInfo, setCheckoutInfo] = useState();
+    const [orderData, setOrderData] = useState();
+    const [progressStep, setProgressStep] = useState("EmptyCart");
+    function SetProgressStep(step) {
+        if (step) {
+            setProgressStep(step);
+        }
+        else {
+            const hasShoppingCart = getCart().length > 0;
+            if (debug)
+                console.log("hasShoppingCart", hasShoppingCart);
+            const hasShippingInfo = Object.keys(getShippingInfo()).length > 0;
+            if (debug)
+                console.log("hasShippingInfo", hasShippingInfo);
+            const hasOrderData = orderData && orderData.length > 0;
+            if (debug)
+                console.log("hasOrderData", hasOrderData);
+            if (debug)
+                console.log(orderData?.length);
+            if (hasOrderData) {
+                setProgressStep("ThankYou");
+            }
+            else if (hasShippingInfo && hasShoppingCart) {
+                setProgressStep("Checkout");
+            }
+            else if (hasShoppingCart) {
+                setProgressStep("ShippingInfo");
+            }
+            else {
+                setProgressStep("EmptyCart");
+            }
+        }
+    }
+    /* useEffect(() => {
+        // UPDATE LOCALSTORAGE IF SHOPPINGCART STATE CHANGES
+        setCart(shoppingCart ?? []);
+    }, [shoppingCart]); */
+    /* useEffect(() => {
+        // UPDATE LOCALSTORAGE IF SHIPPINGINFO STATE CHANGES
+        setShippingInfo(shippingInfo);
+    }, [shippingInfo]); */
+    useEffect(() => {
+        // UPDATE DISCOUNT CODES ON EACH PAGE LOAD
+        (async () => {
+            setDiscountCodes(await getRemoteDiscountCodes());
+        })();
+        // UPDATE SHOPPINGCART AND SHIPPINGINFO STATES IF LOCALSTORAGE CHANGES
+        function handleStorageChange() {
+            setShoppingCart(getCart());
+            setShippingInfo(getShippingInfo());
+            setCheckoutInfo(getCheckoutData());
+            SetProgressStep();
+        }
+        window.addEventListener('storage', handleStorageChange);
+        window.dispatchEvent(new Event('storage'));
+        return () => {
+            window.removeEventListener('storage', handleStorageChange);
+        };
+    }, []);
+    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) {
+                const input = form.elements[key];
+                if (input) { // Check if the form element exists
+                    input.value = shippingInfo[key].toString();
+                }
+            }
+        }
+    }, [progressStep]);
+    paintCartItems.PropTypes = {
+        items: PropTypes.array.isRequired
+    };
+    function paintCartItems(items) {
+        if (debug)
+            console.log("Painting Shopping Cart Items");
+        let newItems = [];
+        for (let key in items) {
+            const myItem = items[key];
+            const newItem = _jsx(ShoppingCartItem, { item: myItem }, myItem.itemID);
+            newItems.push(newItem);
+        }
+        return newItems;
+    }
+    function onShippingSubmit( /* event: Event */) {
+        const formID = 'address_to';
+        const formElement = document.getElementById(formID);
+        const formData = new FormData(formElement);
+        const formObject = Object.fromEntries(formData);
+        SetShippingInfo(formObject);
+    }
+    handleOnApprove.propTypes = {
+        data: PropTypes.object.isRequired
+    };
+    function handleOnApprove(props) {
+        if (debug)
+            console.log("Handling onApprove");
+        // eslint-disable-next-line react/prop-types
+        setOrderData(props.data);
+        ClearShoppingCart();
+        // SetProgressStep();
+        SetProgressStep("ThankYou");
+    }
+    if (progressStep === "ThankYou") {
+        // ========== SENDMAIL ==========
+        const json = {
+            'to': 'brian@pixelvivid.com',
+            'from': 'brian@pixelvivid.com',
+            'subject': 'PixelVivid Purchase',
+            'orderData': JSON.stringify(orderData, null, 2),
+        };
+        const sendMailResponse = emailJSON(json);
+        console.log("SendMail Response:", sendMailResponse);
+        // ========== THANK YOU ==========
+        const pmt = orderData.purchase_units[0].payments.captures[0];
+        return (_jsxs("div", { className: "pixCart", children: [_jsx(CalloutHeader, { title: "Shopping Cart : " }), _jsx("br", {}), _jsx("div", { id: "paypal-button-container", className: "paypal-button-container" }), _jsxs("div", { children: [_jsx("h3", { children: "Thank you for your payment!" }), "Payment ID : ", pmt.id, " ", _jsx("br", {}), "Status : ", pmt.status, " ", _jsx("br", {}), "Amount : $", pmt.amount.value + " " + pmt.amount.currency_code, " ", _jsx("br", {}), "Created : ", pmt.create_time, " ", _jsx("br", {})] })] }));
+    }
+    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 })] }));
+    }
+    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 })] })] }));
+    }
+    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
+};
+export function ShoppingCartItem(props) {
+    const thisItem = props.item;
+    const thisItemTarget = "_self"; // "_blank"
+    const config = usePixelatedConfig();
+    return (_jsxs("div", { className: "pixCartItem row-12col", children: [_jsx("div", { className: "pixCartItemPhoto grid-s1-e4", children: thisItem.itemURL && thisItem.itemImageURL
+                    ? _jsx("a", { href: thisItem.itemURL, target: thisItemTarget, rel: "noopener noreferrer", children: _jsx("img", { src: thisItem.itemImageURL, alt: thisItem.itemTitle }) })
+                    : thisItem.itemImageURL
+                        ? (
+                        /* <img src={thisItem.itemImageURL} title={thisItem.itemTitle} alt={thisItem.itemTitle} /> */
+                        _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) }) })] }));
+}
+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 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),
+        }, {
+            "Name": "Subtotal : ",
+            "Value": formatAsUSD(props.checkoutData.subtotal),
+        }, {
+            "Name": "Shipping Address : ",
+            "Value": addr,
+        }, {
+            "Name": "Shipping Cost : ",
+            "Value": formatAsUSD(props.checkoutData.shippingCost),
+        }, {
+            "Name": "Handling Fee : ",
+            "Value": formatAsUSD(props.checkoutData.handlingFee),
+        }, /* {
+            "Name": "Insurance Cost : ",
+            "Value": formatAsUSD(checkoutData.insuranceCost ?? 0),
+        }, */ /* {
+            "Name": "Shipping Discount : ",
+            "Value": formatAsUSD(checkoutData.shipping_discount ?? 0),
+        }, */
+        {
+            "Name": "Sales Tax : ",
+            "Value": formatAsUSD(props.checkoutData.salesTax),
+        }, {
+            "Name": "TOTAL : ",
+            "Value": formatAsUSD(props.checkoutData.total),
+        }];
+    if (props.checkoutData.subtotal_discount == 0) {
+        checkoutTableData = checkoutTableData.filter(obj => obj.Name !== "Subtotal Discount : ");
+    }
+    return (_jsx(Table, { id: "pixCheckout", data: checkoutTableData }));
+}
+export function CartButton(props) {
+    const config = usePixelatedConfig();
+    const [cartCount, setCartCount] = useState(0);
+    useEffect(() => {
+        // UPDATE CARTCOUNT STATES IF LOCALSTORAGE CHANGES
+        function handleStorageChange() {
+            setCartCount(getCartItemCount(getCart()));
+        }
+        window.addEventListener('storage', handleStorageChange);
+        window.dispatchEvent(new Event('storage'));
+        return () => {
+            window.removeEventListener('storage', handleStorageChange);
+        };
+    }, []);
+    useEffect(() => {
+        if (cartCount && cartCount > 0) {
+            MicroInteractions({ cartpulse: true });
+        }
+        else {
+            MicroInteractions({ cartpulse: false });
+        }
+    }, [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})`] })] }) }));
+}
+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}` }) }));
+}
+export function AddToCartButton(props) {
+    const [modalContent, setModalContent] = useState();
+    useEffect(() => {
+        const myContent = _jsxs("div", { className: "centered", children: [_jsx("br", {}), _jsx("br", {}), "Item ", props.itemID, " has been added to your cart.", _jsx("br", {}), _jsx("br", {}), GoToCartButton({ href: "/cart", itemID: props.itemID }), _jsx("br", {}), _jsx("br", {})] });
+        setModalContent(myContent);
+    }, []);
+    function handleClick(e) {
+        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 })] }));
+}
+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 }) }));
+}