@pixelated-tech/components 3.1.4

package/dist/components/shoppingcart/shoppingcart.css

@@ -0,0 +1,122 @@
+/* ========================================
+==========    SHOPPING CART     ===========
+======================================== */
+
+.pixCart {
+    --do-nothing: true
+}
+
+.pixCart .calloutHeader {
+    text-align: left
+}
+
+.pixCartItems {
+    text-align: center;
+}
+
+@media screen and (max-width: 480px) {
+	.pixCartItems {
+		padding: 20px;
+	}
+}
+
+.pixCartItem {
+    border: 1px solid #DDD;
+    text-align: left;
+    padding: 20px 5px !important;
+}
+
+@media screen and (max-width: 480px) {
+	.pixCartItem {
+		text-align: center;
+	}
+}
+
+.pixCartItemHeader {
+    margin: 0 auto;
+}
+
+.pixCartItemHeader h2 {
+    font-size: 1.25em;
+    font-weight: bold;
+}
+
+.pixCartItemPhoto img {
+    padding: 10px 0;
+    width: 100%;
+
+}
+
+.pixCartItemDetails {
+    padding-bottom: 10px;
+}
+
+.pixCartItemPrice{
+    font-size: 1.5em;
+    font-weight: bold;
+
+    /* background-image: url(/images/pix/pix-bg-sm-bw.gif); */
+    border: 2px solid #ccc;
+    display: inline-block;
+	margin: 0 auto;
+    padding: 5px 20px;
+	
+    -moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	border-radius: 5px;
+}
+
+
+/* ===== SHOPPING CART CHECKOUT ===== */
+
+#pixCheckout thead {
+    display: none;
+}
+
+#pixCheckout td {
+    vertical-align: top;
+}
+
+#pixCheckout tr td:first-child {
+    text-align: right;
+}
+
+
+/* ===== SHOPPING CART SHIPPING FIELDS ===== */
+
+.pixCartButton,
+.pixCart .pixCartButton,
+#pixCartButton.pixCartButton {
+    font-size: 1.1em;
+    font-family: Verdana, Geneva, sans-serif;
+    color: #000;
+    padding: 5px;
+    /* vertical-align: middle; */
+    /* text-align: center; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+    background-color: #DDD;
+    border: 1px solid #CCC;
+    border-radius: 5px;
+    min-width: 200px;
+    height: auto;
+    margin: 5px auto;
+}
+#pixCartButton.pixCartButton {
+    width: 80px;
+    min-width: 80px;
+    height: 30px;
+}
+#pixCartButton.pixCartButton img {
+    width: 20px;
+}
+
+
+
+input[readonly] {
+  border: none;
+  background-color: transparent;
+  color: black;
+}

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

@@ -0,0 +1,324 @@
+import { getContentfulDiscountCodes } from "../cms/contentful.delivery";
+const debug = false;
+/* ========== LOCALSTORAGE KEYS ========== */
+export const shoppingCartKey = "pixelvividCart";
+export const shippingInfoKey = "pixelvividCartShipping";
+export const discountCodesKey = "pixelvividDiscountCodes";
+export const checkoutInfoKey = "pixelvividCartCheckout";
+// const sbPayPalApiKey = "AT10GG2ZHoApTtEw7dJoU6XRDYkf3wEvK2k_-eZ9GOvOK-REphG8yKCyZCqFi95OrxKgrdctlfWxayHG";
+// const sbPayPalSecret = "EDUrdPonwcNYZwO5j7hNmFSmF-13zptaCndUnO0-Vr_j0GYEW4m-Tfar9IaukHwm0ixL5fUojOOFtZVk";
+// const payPalApiKey = "AeWRwYpsrfslATCndF6xjL4GLcqA1UxQZLC5vxQE-FTvPezXfLbCJO_uAFk5zoXUKRFnP-zJ_73yEkBE";
+// const payPalSecret = "EBvYvynRXZCI6RbK4rg2NiENNG4N8tbgl8qAmpxB6f9nUkZjXMODxXJZ91JycP439kPrQcnB7uRKp0-F";
+const apiProps = {
+    base_url: "https://cdn.contentful.com",
+    space_id: "soi9w77t7027",
+    environment: "master",
+    delivery_access_token: "muY9LfpCt4qoXosDsnRkkoH3DAVVuUFEuB0WRKRdBUM",
+};
+/* ========== ARRAYS ========== */
+const shippingOptions = [
+    {
+        id: "USPS-GA",
+        region: "Domestic US",
+        provider: "USPS",
+        service: "Ground Advantage",
+        price: "9.99",
+        speed: "2 - 5 days",
+    }, {
+        id: "USPS-PM",
+        region: "Domestic US",
+        provider: "USPS",
+        service: "Priority Mail",
+        price: "14.99",
+        speed: "2 - 3 days",
+    }, {
+        id: "USPS-PMX",
+        region: "Domestic US",
+        provider: "USPS",
+        service: "Priority Mail Express",
+        price: "39.99",
+        speed: "1 - 3 days",
+    }, {
+        id: "USPS-FCP-I",
+        region: "International",
+        provider: "USPS",
+        service: "First-Class Package International",
+        price: "24.99",
+        speed: "Varies",
+    }, {
+        id: "USPS-PM-I",
+        region: "International",
+        provider: "USPS",
+        service: "Priority Mail International",
+        price: "39.99",
+        speed: "6 - 10 days",
+    }, {
+        id: "USPS-PMX-I",
+        region: "International",
+        provider: "USPS",
+        service: "Priority Mail Express International",
+        price: "69.99",
+        speed: "3 - 5 days",
+    }
+];
+/* ======================================= */
+/* ========== BACKEND FUNCTIONS ========== */
+/* ======================================= */
+/* ========== SHOPPING CART FUNCTIONS ========== */
+export function formatAsUSD(cost) {
+    return cost.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+}
+export function formatAsHundredths(num) {
+    return Math.trunc(num * 100) / 100;
+}
+export function getCart() {
+    const cart = localStorage.getItem(shoppingCartKey);
+    return cart ? JSON.parse(cart) : [];
+}
+export function setCart(shoppingCartJSON) {
+    localStorage.setItem(shoppingCartKey, JSON.stringify(shoppingCartJSON));
+    window.dispatchEvent(new Event('storage'));
+}
+export function alreadyInCart(cart, itemID) {
+    for (const key in cart) {
+        const item = cart[key];
+        if (typeof item === 'object' && item !== null && Object.prototype.hasOwnProperty.call(item, 'itemID') && item.itemID == itemID) {
+            return true;
+        }
+    }
+    return false;
+}
+export function increaseQuantityCart(cart, itemID) {
+    for (const key in cart) {
+        const item = cart[key];
+        if (typeof item === 'object' && item !== null && Object.prototype.hasOwnProperty.call(item, 'itemID') && item.itemID == itemID) {
+            item.itemQuantity += 1;
+        }
+    }
+}
+export function getIndexInCart(cart, itemID) {
+    for (let i = 0; i < cart.length; i++) {
+        const item = cart[i];
+        if (typeof item === 'object' && item !== null && Object.prototype.hasOwnProperty.call(item, 'itemID') && item.itemID == itemID) {
+            return i;
+        }
+    }
+    return -1;
+}
+export function getCartItemCount(cart) {
+    let cartCount = 0;
+    for (let i = 0; i < cart.length; i++) {
+        const item = cart[i];
+        if (typeof item === 'object' && item !== null && Object.prototype.hasOwnProperty.call(item, 'itemID')) {
+            cartCount = cartCount + (item.itemQuantity);
+        }
+    }
+    return cartCount;
+}
+export function getCartSubTotal(cart) {
+    let cartSubTotal = 0;
+    for (let i = 0; i < cart.length; i++) {
+        const item = cart[i];
+        if (typeof item === 'object' && item !== null &&
+            Object.prototype.hasOwnProperty.call(item, 'itemQuantity') &&
+            Object.prototype.hasOwnProperty.call(item, 'itemCost')) {
+            cartSubTotal += (item.itemQuantity * item.itemCost);
+        }
+    }
+    return formatAsHundredths(cartSubTotal);
+}
+export function AddToShoppingCart(thisItem) {
+    let cart = getCart();
+    if (alreadyInCart(cart, thisItem.itemID)) {
+        const index = getIndexInCart(cart, thisItem.itemID);
+        if (cart[index].itemQuantity < thisItem.itemQuantity) {
+            if (debug)
+                console.log("Increasing quantity in cart");
+            increaseQuantityCart(cart, thisItem.itemID);
+        }
+        else {
+            if (debug)
+                console.log("Cant add more than item quantity to the cart");
+            // cant add moe than quantity
+        }
+    }
+    else {
+        // BE SURE TO ADD ONLY ONE TO THE CART
+        if (debug)
+            console.log("Adding only one to the cart");
+        const cartItem = { ...thisItem };
+        cartItem.itemQuantity = 1;
+        cart.push(cartItem);
+    }
+    localStorage.setItem(shoppingCartKey, JSON.stringify(cart));
+    window.dispatchEvent(new Event('storage'));
+}
+export function RemoveFromShoppingCart(thisItem) {
+    let cart = getCart();
+    if (alreadyInCart(cart, thisItem.itemID)) {
+        cart.splice(getIndexInCart(cart, thisItem.itemID), 1);
+    }
+    localStorage.setItem(shoppingCartKey, JSON.stringify(cart));
+    window.dispatchEvent(new Event('storage'));
+}
+export function ClearShoppingCart() {
+    localStorage.removeItem(shoppingCartKey);
+    localStorage.removeItem(shippingInfoKey);
+    window.dispatchEvent(new Event('storage'));
+}
+/* ========== SHIPPING INFO FUNCTIONS ========== */
+export function getShippingInfo() {
+    const ship = localStorage.getItem(shippingInfoKey);
+    return ship ? JSON.parse(ship) : [];
+}
+export function SetShippingInfo(shippingFormData) {
+    localStorage.setItem(shippingInfoKey, JSON.stringify(shippingFormData));
+    window.dispatchEvent(new Event('storage'));
+}
+export function getShippingCost() {
+    const ship = getShippingInfo();
+    const method = ship.shippingMethod;
+    const option = shippingOptions.find(item => item.id === method);
+    return (option && option.price) ? formatAsHundredths(Number(option.price)) : 0;
+}
+/* ========== DISCOUNT CODE FUNCTIONS ========== */
+export async function validateDiscountCode(field) {
+    try {
+        const codeList = await getContentfulDiscountCodes({ apiProps: apiProps, contentType: "discountCodes" });
+        if (!codeList) {
+            return false;
+        } // If no codes are found, return false
+        if (field.value == '') {
+            return true;
+        } // If the field is empty, return true (no code entered)
+        if (codeList.some((code) => code && code.codeName.toLowerCase() === field.value.toLowerCase())) {
+            // if code is in the codeList
+            const foundCode = codeList.find((code) => code.codeName.toLowerCase() === field.value.toLowerCase());
+            if (foundCode) {
+                // if code is active - between start and end date
+                const startDate = new Date(foundCode.codeStart);
+                const endDate = new Date(foundCode.codeEnd);
+                const today = new Date();
+                const isActive = today >= startDate && today <= endDate;
+                return isActive;
+            }
+        }
+        else {
+            // if code is not in the codeList
+            return false;
+        }
+    }
+    catch (error) {
+        console.error("Error fetching discount codes:", error); // Handle potential errors
+        throw error; // Or return false;
+    }
+}
+export async function getRemoteDiscountCodes() {
+    if (debug)
+        console.log("Getting Contentful Discount Codes");
+    try {
+        const discountCodes = await getContentfulDiscountCodes({
+            apiProps: apiProps,
+            contentType: "discountCodes"
+        });
+        if (debug)
+            console.log("Retrieved Contentful Discount Codes: ", discountCodes);
+        return discountCodes;
+    }
+    catch (error) {
+        console.error("An error occurred getting discount codes:", error);
+    }
+    ;
+}
+export function getLocalDiscountCodes() {
+    const discountCodes = localStorage.getItem(discountCodesKey);
+    return discountCodes ? JSON.parse(discountCodes) : [];
+}
+export function setDiscountCodes(discountCodesJSON) {
+    if (debug)
+        console.log("Set Discount Codes LocalStorage: ", discountCodesJSON);
+    localStorage.setItem(discountCodesKey, JSON.stringify(discountCodesJSON));
+    window.dispatchEvent(new Event('storage'));
+}
+export function getDiscountCode(codeString) {
+    if (debug)
+        console.log("Getting Discount Code Object");
+    if (!codeString || codeString === '') {
+        return undefined;
+    } // If the code is empty, return null
+    const discountCodes = getLocalDiscountCodes();
+    if (!discountCodes) {
+        return undefined;
+    } // If no codes are found, return null
+    // Find the discount code in the list
+    const discountCode = discountCodes.find((code) => {
+        if (code && code.codeName) {
+            return code.codeName.toLowerCase() === codeString.toLowerCase();
+        }
+        else {
+            return undefined;
+        }
+    });
+    return discountCode;
+}
+export function getCartSubtotalDiscount(cart) {
+    if (!cart) {
+        return 0;
+    } // If cart is empty, return null
+    const cartSubTotal = getCartSubTotal(cart);
+    const shippingInfo = getShippingInfo();
+    const discountCode = getDiscountCode(shippingInfo.discountCode);
+    if (!discountCode) {
+        return 0;
+    } // If no codes are found, return null
+    let discountAmount = 0;
+    if (discountCode.codeType === 'amount') {
+        discountAmount = formatAsHundredths(discountCode.codeValue);
+    }
+    else if (discountCode.codeType === 'percent') {
+        discountAmount = formatAsHundredths(cartSubTotal * discountCode.codeValue);
+    }
+    return discountAmount;
+}
+/* ========== CHECKOUT FUNCTIONS ========== */
+export function getHandlingFee() {
+    return 3.99;
+}
+export function getSalesTax() {
+    const itemCost = getCartSubTotal(getCart());
+    const shippingCost = getShippingCost();
+    const handlingFee = getHandlingFee();
+    const njSalesTaxRate = 0.06675;
+    const salesTax = njSalesTaxRate * (itemCost + shippingCost + handlingFee);
+    return formatAsHundredths(salesTax);
+}
+export function getCheckoutTotal() {
+    const itemCost = getCartSubTotal(getCart());
+    const itemDiscount = getCartSubtotalDiscount(getCart());
+    const shippingCost = getShippingCost();
+    const handlingFee = getHandlingFee();
+    const insuranceCost = 0;
+    const shipping_discount = 0;
+    const salesTax = getSalesTax();
+    const checkoutTotal = itemCost - itemDiscount + shippingCost + handlingFee + insuranceCost + shipping_discount + salesTax;
+    return formatAsHundredths(checkoutTotal);
+}
+export function getCheckoutData() {
+    const checkoutObj = {
+        items: getCart(),
+        subtotal: getCartSubTotal(getCart()),
+        subtotal_discount: getCartSubtotalDiscount(getCart()),
+        shippingTo: getShippingInfo(),
+        shippingCost: getShippingCost(),
+        handlingFee: getHandlingFee(),
+        insuranceCost: undefined,
+        shipping_discount: undefined,
+        salesTax: getSalesTax(),
+        total: getCheckoutTotal(),
+    };
+    if (debug)
+        console.log(checkoutObj);
+    return checkoutObj;
+}
+/* function completeCheckout() {
+} */

package/dist/components/sidepanel/sidepanel.css

@@ -0,0 +1,129 @@
+/* SidePanel styles */
+:root {
+	--sidepanel-tab-width: 20px;
+	--sidepanel-tab-height: 30px;
+	--sidepanel-tab-color: #007bff;
+	--sidepanel-tab-radius: 5px;
+	--sidepanel-z-index: 999;
+	--sidepanel-bg: #fff;
+	--sidepanel-overlay-bg: rgba(0, 0, 0, 0.5);
+	--sidepanel-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+}
+
+.sidepanel-portal { position: relative; z-index: 9999; }
+
+/* Overlay */
+.sidepanel-overlay {
+	position: fixed;
+	inset: 0;
+	background: var(--sidepanel-overlay-bg);
+	z-index: 998;
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+.sidepanel-overlay[data-state="open"] { opacity: 1; visibility: visible; }
+
+/* Wrapper */
+.sidepanel-wrapper {
+	position: fixed;
+	top: 0; bottom: 0;
+	z-index: var(--sidepanel-z-index);
+	pointer-events: none;
+	display: flex;
+	width: fit-content;
+	max-width: 100vw;
+	transition: transform 0.3s ease;
+}
+.sidepanel-wrapper[data-has-tab="false"] {
+	--sidepanel-tab-width: 0px;
+}
+.sidepanel-wrapper > * { pointer-events: auto; }
+
+/* Left Position */
+.sidepanel-wrapper[data-position="left"] {
+	left: 0;
+	flex-direction: row;
+	transform: translateX(calc(-100% + var(--sidepanel-tab-width)));
+}
+.sidepanel-wrapper[data-position="left"][data-state="open"] {
+	transform: translateX(0);
+}
+
+/* Right Position */
+.sidepanel-wrapper[data-position="right"] {
+	right: 0;
+	flex-direction: row-reverse;
+	transform: translateX(calc(100% - var(--sidepanel-tab-width)));
+}
+.sidepanel-wrapper[data-position="right"][data-state="open"] {
+	transform: translateX(0);
+}
+
+/* Panel */
+.sidepanel {
+	position: relative;
+	width: var(--panel-width);
+	/* Dynamic max-width to ensure tab visibility */
+	max-width: calc(100vw - var(--sidepanel-tab-width));
+	flex: 1 1 auto;
+	background: var(--background-color, var(--sidepanel-bg));
+	box-shadow: var(--sidepanel-shadow);
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+.sidepanel-wrapper[data-position="left"] .sidepanel { border-radius: 0 8px 8px 0; }
+.sidepanel-wrapper[data-position="right"] .sidepanel { border-radius: 8px 0 0 8px; }
+
+.sidepanel-content { padding: 16px; height: 100%; }
+
+/* Tab */
+.sidepanel-fixed-tab {
+	position: relative;
+	flex: 0 0 auto;
+	align-self: center;
+	width: var(--sidepanel-tab-width);
+	height: var(--sidepanel-tab-height);
+	background: var(--sidepanel-tab-color);
+	color: white;
+	border: 1px solid var(--sidepanel-tab-color);
+	padding: 0;
+	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 1001;
+	border-radius: var(--sidepanel-tab-radius);
+}
+
+.sidepanel-wrapper[data-position="left"] .sidepanel-fixed-tab {
+	border-radius: 0 var(--sidepanel-tab-radius) var(--sidepanel-tab-radius) 0;
+	border-left: none;
+}
+
+.sidepanel-wrapper[data-position="right"] .sidepanel-fixed-tab {
+	border-radius: var(--sidepanel-tab-radius) 0 0 var(--sidepanel-tab-radius);
+	border-right: none;
+}
+
+.sidepanel-tab-icon { font-size: 18px; line-height: 1; display: block; }
+.sidepanel-tab-label { display: none; }
+
+/* Integration overrides for MenuAccordion inside SidePanel */
+.sidepanel-content .accordionMenuWrapper {
+	position: relative !important;
+	top: auto !important;
+	left: auto !important;
+	width: 100% !important;
+	height: auto !important;
+	border: none !important;
+	padding: 0 !important;
+	background: transparent !important;
+	transform: none !important;
+}
+
+/* Ensure the inner list takes full width */
+.sidepanel-content .accordionMenu,
+.sidepanel-content .accordionMenu ul {
+	width: 100% !important;
+}

package/dist/components/sidepanel/sidepanel.js

@@ -0,0 +1,54 @@
+/* SidePanel canonical implementation */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import './sidepanel.css';
+export default function SidePanel({ isOpen, onClose, onToggle, position = 'left', width = '300px', showOverlay = true, showTab = false, tabIcon, tabLabel, children, className = '' }) {
+    const portalRootRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const [hasMounted, setHasMounted] = useState(false);
+    useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        // Reuse existing root or create one
+        let root = document.getElementById('sidepanel-portal-root');
+        if (!root) {
+            root = document.createElement('div');
+            root.id = 'sidepanel-portal-root';
+            document.body.appendChild(root);
+        }
+        portalRootRef.current = root;
+        setHasMounted(true);
+    }, []);
+    useEffect(() => {
+        const handleKey = (e) => e.key === 'Escape' && isOpen && onClose();
+        document.addEventListener('keydown', handleKey);
+        return () => document.removeEventListener('keydown', handleKey);
+    }, [isOpen, onClose]);
+    useEffect(() => {
+        if (isOpen)
+            document.body.style.overflow = 'hidden';
+        else
+            document.body.style.overflow = '';
+        return () => { document.body.style.overflow = ''; };
+    }, [isOpen]);
+    // Close on click outside if no overlay
+    useEffect(() => {
+        if (!isOpen || showOverlay)
+            return;
+        const handleClickOutside = (e) => {
+            if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+                onClose();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen, showOverlay, onClose]);
+    if (!hasMounted || !portalRootRef.current)
+        return null;
+    const overlay = showOverlay && (_jsx("div", { className: "sidepanel-overlay", "data-state": isOpen ? 'open' : 'closed', onClick: onClose, "aria-hidden": "true" }));
+    const content = (_jsxs("div", { className: "sidepanel-wrapper", ref: wrapperRef, "data-position": position, "data-state": isOpen ? 'open' : 'closed', "data-has-tab": showTab ? 'true' : 'false', style: { '--panel-width': width }, children: [_jsx("div", { className: `sidepanel ${className}`, role: "dialog", "aria-modal": "true", "aria-hidden": !isOpen, children: _jsx("div", { className: "sidepanel-content", children: children }) }), showTab && (_jsxs("button", { className: "sidepanel-fixed-tab", onClick: () => onToggle?.(), "aria-label": isOpen ? 'Close panel' : 'Open panel', type: "button", children: [tabIcon && _jsx("span", { className: "sidepanel-tab-icon", children: tabIcon }), tabLabel && _jsx("span", { className: "sidepanel-tab-label", children: tabLabel })] }))] }));
+    return createPortal(_jsxs("div", { className: "sidepanel-portal", children: [overlay, content] }), portalRootRef.current);
+}
+export { SidePanel };