@q2devel/q2-storybook 1.0.84 → 1.0.86

package/dist/components/Base/button/Button.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-export interface ButtonProps {
+import React, { ButtonHTMLAttributes } from 'react';
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
     children?: React.ReactNode;
     label?: string;
     variant?: 'primary' | 'secondary';
@@ -18,5 +18,5 @@ export interface ButtonProps {
     rel?: string;
     unstyled?: boolean;
 }
-declare const Button: React.FC<ButtonProps>;
+declare const Button: ({ children, label, variant, disabled, asLink, openInNewTab, href, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, rounded, className, target, rel, unstyled, type, ...restProps }: ButtonProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Button;

package/dist/components/Base/button/Button.js

@@ -14,7 +14,9 @@ const variantClasses = {
     primary: 'bg-blue-500 hover:bg-blue-600 text-white',
     secondary: 'bg-gray-500 hover:bg-gray-600 text-white',
 };
-const Button = ({ children, label, variant, disabled = false, asLink = false, openInNewTab = false, href, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, rounded = 'md', className = '', target, rel, unstyled = false, }) => {
+const Button = ({ children, label, variant, disabled = false, asLink = false, openInNewTab = false, href, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, rounded = 'md', className = '', target, rel, unstyled = false, type = 'button', // ← Teraz má default z natívneho button
+...restProps // ← Všetky ostatné natívne props
+ }) => {
     const baseClasses = unstyled
         ? className
         : buildClassesByJoining('inline-block px-4 py-2 font-medium transition-colors duration-200', variantClasses[variant ?? 'primary'], roundedClasses[rounded], {
@@ -40,6 +42,6 @@ const Button = ({ children, label, variant, disabled = false, asLink = false, op
         }
         return (_jsx(Link, { href: href, ...commonProps, target: openInNewTab ? '_blank' : target, rel: openInNewTab ? 'noopener noreferrer' : rel, children: content }));
     }
-    return (_jsx("button", { ...commonProps, disabled: disabled, children: content }));
+    return (_jsx("button", { ...commonProps, ...restProps, disabled: disabled, type: type, children: content }));
 };
 export default Button;

package/dist/components/Base/tooltip/Tooltip.d.ts

@@ -1,18 +1,40 @@
-import React from 'react';
-import { ReactNode } from 'react';
-export interface TooltipRef {
-    show: () => void;
-    hide: () => void;
-}
-interface TooltipProps {
-    content?: ReactNode;
-    children: ReactNode;
+import { Placement, Strategy } from '@floating-ui/react';
+import { HTMLAttributes, ReactNode, Ref } from 'react';
+export type TooltipRef = {
+    open: () => void;
+    close: () => void;
+};
+export type TooltipChildren = ((ref: Ref<HTMLElement>, props: Record<string, unknown>, disabled: boolean) => ReactNode) | ReactNode;
+export type TooltipProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'content'> & {
+    content: ((ref: Ref<HTMLElement>, props: Record<string, unknown>) => ReactNode) | ReactNode;
+    children: TooltipChildren;
+    placement?: Placement;
+    strategy?: Strategy;
+    contentClassName?: string;
+    zIndex?: number;
+    portalTarget?: HTMLElement;
     backgroundColor?: string;
     textColor?: string;
-    placement?: 'top' | 'bottom' | 'left' | 'right';
+    disabled?: boolean;
+    disableAutoHide?: boolean;
+    lazy?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'dark' | 'light' | 'error' | 'warning' | 'success';
+};
+declare const _default: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "content"> & {
+    content: ((ref: Ref<HTMLElement>, props: Record<string, unknown>) => ReactNode) | ReactNode;
+    children: TooltipChildren;
+    placement?: Placement;
+    strategy?: Strategy;
     contentClassName?: string;
+    zIndex?: number;
+    portalTarget?: HTMLElement;
+    backgroundColor?: string;
+    textColor?: string;
     disabled?: boolean;
+    disableAutoHide?: boolean;
     lazy?: boolean;
-}
-declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<TooltipRef>>;
-export default Tooltip;
+    size?: "sm" | "md" | "lg";
+    variant?: "default" | "dark" | "light" | "error" | "warning" | "success";
+} & import("react").RefAttributes<TooltipRef>>;
+export default _default;

package/dist/components/Base/tooltip/Tooltip.js

@@ -1,18 +1,145 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-const Tooltip = forwardRef(({ content, children, backgroundColor = 'bg-black', textColor = 'text-white', placement = 'bottom', contentClassName = '', disabled = false, lazy = true, }, ref) => {
-    if (disabled)
-        return _jsx(_Fragment, { children: children });
-    return (_jsxs("span", { className: "relative group cursor-pointer", children: [children, content && (_jsx("span", { className: `absolute z-10 hidden group-hover:block
-                    ${placement === 'top'
-                    ? 'bottom-full mb-2'
-                    : placement === 'bottom'
-                        ? 'top-full mt-2'
-                        : placement === 'left'
-                            ? 'right-full mr-2'
-                            : 'left-full ml-2'}
-                    left-1/2 -translate-x-1/2 px-3 py-2 rounded ${backgroundColor} ${textColor}
-                    text-xs whitespace-pre-wrap ${contentClassName}`, children: content }))] }));
-});
-Tooltip.displayName = 'Tooltip';
-export default Tooltip;
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import buildClassesByJoining from '@/utils/StyleHelper';
+import { FloatingPortal, arrow, autoUpdate, hide, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, useTransitionStyles, } from '@floating-ui/react';
+import { forwardRef, useImperativeHandle, useRef, useState, } from 'react';
+const Tooltip = ({ className, children, content, placement = 'top', strategy: strategyProp = 'absolute', contentClassName, zIndex = 30, portalTarget, backgroundColor, textColor, disabled = false, disableAutoHide, lazy = true, size = 'md', variant = 'default', ...props }, ref) => {
+    const [open, setOpen] = useState(false);
+    const arrowRef = useRef(null);
+    const { x, y, refs, strategy, context, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: hideMiddleware }, placement: floatingPlacement, } = useFloating({
+        open: open,
+        onOpenChange: (value) => {
+            return disabled ? setOpen(false) : setOpen(disableAutoHide || value);
+        },
+        placement: placement,
+        strategy: strategyProp,
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(5),
+            shift(),
+            arrow({
+                element: arrowRef.current,
+            }),
+            hide(),
+        ],
+    });
+    const { isMounted, styles } = useTransitionStyles(context);
+    const hover = useHover(context, {
+        move: false,
+        handleClose: safePolygon(),
+    });
+    const focus = useFocus(context);
+    const dismiss = useDismiss(context);
+    const role = useRole(context, { role: 'tooltip' });
+    const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
+    useImperativeHandle(ref, () => {
+        return {
+            open() {
+                setOpen(true);
+            },
+            close() {
+                setOpen(false);
+            },
+        };
+    });
+    // Get variant-based colors
+    const getVariantColors = () => {
+        const variants = {
+            default: {
+                bg: backgroundColor || '#374151', // gray-700
+                text: textColor || '#ffffff',
+            },
+            dark: {
+                bg: backgroundColor || '#1f2937', // gray-800
+                text: textColor || '#ffffff',
+            },
+            light: {
+                bg: backgroundColor || '#f9fafb', // gray-50
+                text: textColor || '#374151', // gray-700
+            },
+            error: {
+                bg: backgroundColor || '#dc2626', // red-600
+                text: textColor || '#ffffff',
+            },
+            warning: {
+                bg: backgroundColor || '#d97706', // amber-600
+                text: textColor || '#ffffff',
+            },
+            success: {
+                bg: backgroundColor || '#059669', // emerald-600
+                text: textColor || '#ffffff',
+            },
+        };
+        return variants[variant];
+    };
+    const colors = getVariantColors();
+    // Tooltip content classes based on size and variant
+    const tooltipClasses = buildClassesByJoining([
+        // Base classes
+        'rounded-md leading-tight shadow-2xl z-10 relative',
+        // Size variations
+        size === 'sm' && 'text-xs px-1.5 py-1',
+        size === 'md' && 'text-sm px-2 py-1.5',
+        size === 'lg' && 'text-base px-3 py-2',
+        // Image max width
+        '[&_img]:max-w-[420px]',
+        contentClassName,
+    ]);
+    const tooltipStyles = {
+        zIndex,
+        display: (isMounted &&
+            hideMiddleware &&
+            !hideMiddleware.escaped &&
+            !hideMiddleware.referenceHidden) ||
+            lazy
+            ? 'block'
+            : 'none',
+        position: strategy,
+        top: y ?? 0,
+        left: x ?? 0,
+        color: colors.text,
+        backgroundColor: colors.bg,
+        boxShadow: '0 12px 32px 10px rgba(9, 9, 9, 0.09)',
+        ...styles,
+    };
+    const getAllReferenceProps = () => {
+        return {
+            ...getReferenceProps(),
+            ref: refs.setReference,
+        };
+    };
+    const arrowSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right',
+    }[floatingPlacement.split('-')[0]] || 'bottom';
+    const renderChildren = () => {
+        if (typeof children === 'function') {
+            return children(refs.setReference, getReferenceProps(), disabled);
+        }
+        return (_jsx("div", { ...props, ...getAllReferenceProps(), className: buildClassesByJoining(['inline-block', className]), children: children }));
+    };
+    const renderTooltipContent = () => {
+        if (disabled || (lazy && !isMounted)) {
+            return;
+        }
+        if (typeof content === 'function') {
+            return content(refs.setFloating, {
+                style: tooltipStyles,
+                ...getFloatingProps(),
+            });
+        }
+        return (_jsxs("div", { className: tooltipClasses, ref: refs.setFloating, style: tooltipStyles, ...getFloatingProps(), children: [_jsx("span", { className: "relative z-10", dangerouslySetInnerHTML: typeof content === 'string' ? { __html: content } : undefined, children: typeof content !== 'string' ? content : null }), _jsx("div", { ref: arrowRef, style: {
+                        position: 'absolute',
+                        width: '10px',
+                        height: '10px',
+                        backgroundColor: colors.bg,
+                        left: arrowX != null ? `${arrowX}px` : '0px',
+                        top: arrowY != null ? `${arrowY}px` : '0px',
+                        [arrowSide]: '-5px',
+                        transform: 'rotate(45deg)',
+                    } })] }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(FloatingPortal, { root: portalTarget, children: renderTooltipContent() }), renderChildren()] }));
+};
+export default forwardRef(Tooltip);

package/dist/components/Ecommerce/basket-dialog/BasketDialog.d.ts

@@ -1,55 +1,43 @@
-import React from "react";
-export type BasketProduct = {
-    id: string;
-    name: string;
-    price: number;
+import { PriceFormatOptions } from '@/utils/generalHelperFunction';
+import { Product } from '@q2devel/q2-core';
+export type BasketProduct = Omit<Product, 'price'> & {
     quantity: number;
-    variation_image?: {
-        src: string;
-        alt: string;
-    };
-    href?: string;
-    color?: string;
-    [key: string]: any;
+    price: number;
+    formattedPrice?: string;
+    order_item_id: string;
+};
+export type BasketProductExtended = BasketProduct & {
+    drupalOrderItemId?: number;
 };
-export type BasketDialogVariant = "default" | "compact" | "full";
-export type BasketDialogPosition = "right" | "left";
 export type BasketDialogProps = {
     isOpen: boolean;
     onClose: () => void;
     products: BasketProduct[];
-    subtotal: string | number;
-    onQuantityChange?: (productId: string, quantity: number) => void;
-    onRemoveProduct?: (productId: string) => void;
+    subtotal: number;
+    onQuantityChange?: (productUuid: string, quantity: number) => void;
+    onRemoveProduct?: (productUuid: string) => void;
     onCheckout?: () => void;
     onContinueShopping?: () => void;
-    onProductClick?: (product: BasketProduct) => void;
+    productLink?: (productName: string, variationId: string) => string;
     title?: string;
     checkoutText?: string;
     continueShoppingText?: string;
-    emptyCartText?: string;
-    quantityLabel?: string;
-    removeButtonText?: string;
-    totalLabel?: string;
-    shippingNoteText?: string;
-    variant?: BasketDialogVariant;
-    position?: BasketDialogPosition;
-    showProductImages?: boolean;
-    showProductColors?: boolean;
-    showProductLinks?: boolean;
-    showRemoveButton?: boolean;
-    showSubtotal?: boolean;
-    showCheckoutButton?: boolean;
-    showContinueShoppingButton?: boolean;
     showShippingNote?: boolean;
     showQuantityControls?: boolean;
-    customClassName?: string;
-    maxHeight?: string;
-    animationDuration?: number;
-    backdropOpacity?: number;
-    renderCustomProduct?: (product: BasketProduct) => React.ReactNode;
-    renderCustomFooter?: () => React.ReactNode;
     pendingUpdates?: Record<string, number>;
     processingItems?: Record<string, boolean>;
+    isAddingToCart?: boolean;
+    totalItems?: number;
+    locale: string;
+    productPriceOptions?: PriceFormatOptions;
+    totalPriceOptions?: PriceFormatOptions;
+    translations: {
+        emptyBasket: string;
+        amount: string;
+        remove: string;
+        addingToBasket: string;
+        total: string;
+        shippingAndTax: string;
+    };
 };
-export declare const BasketDialog: ({ isOpen, onClose, products, subtotal, onQuantityChange, onRemoveProduct, onCheckout, onContinueShopping, onProductClick, title, checkoutText, continueShoppingText, emptyCartText, quantityLabel, removeButtonText, totalLabel, shippingNoteText, variant, position, showProductImages, showProductColors, showProductLinks, showRemoveButton, showSubtotal, showCheckoutButton, showContinueShoppingButton, showShippingNote, showQuantityControls, customClassName, maxHeight, animationDuration, backdropOpacity, renderCustomProduct, renderCustomFooter, pendingUpdates, processingItems, }: BasketDialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BasketDialog: ({ isOpen, onClose, products, subtotal, onQuantityChange, onRemoveProduct, onCheckout, onContinueShopping, productLink, title, checkoutText, continueShoppingText, showShippingNote, showQuantityControls, pendingUpdates, processingItems, isAddingToCart, totalItems, locale, productPriceOptions, totalPriceOptions, translations, }: BasketDialogProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Ecommerce/basket-dialog/BasketDialog.js

@@ -1,29 +1,27 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog, DialogBackdrop, DialogPanel, DialogTitle, } from "@headlessui/react";
-import { MinusIcon, PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
-// Helper funkcia pre formátovanie ceny
-const formatPrice = (price) => {
-    return new Intl.NumberFormat("cs-CZ", {
-        style: "currency",
-        currency: "CZK",
-    }).format(price);
-};
-export const BasketDialog = ({ 
-// Základné props
-isOpen, onClose, products, subtotal, 
-// Callback funkcie
-onQuantityChange, onRemoveProduct, onCheckout, onContinueShopping, onProductClick, 
-// Texty s predvolenými hodnotami
-title = "Váš košík", checkoutText = "Pokračovat k objednávce", continueShoppingText = "Pokračovat v nákupu", emptyCartText = "Váš košík je prázdný", quantityLabel = "Množství:", removeButtonText = "Odstranit", totalLabel = "Celkem", shippingNoteText = "Doprava a daně budou vypočítány při dokončení objednávky.", 
-// Zobrazenie/konfigurácia s predvolenými hodnotami
-variant = "default", position = "right", showProductImages = true, showProductColors = true, showProductLinks = true, showRemoveButton = true, showSubtotal = true, showCheckoutButton = true, showContinueShoppingButton = true, showShippingNote = true, showQuantityControls = true, 
-// Štýlovanie s predvolenými hodnotami
-customClassName = "", maxHeight = "100vh", animationDuration = 500, backdropOpacity = 0.75, 
-// Vlastné renderovanie
-renderCustomProduct, renderCustomFooter, 
-// Stav
-pendingUpdates = {}, processingItems = {}, }) => {
+import Button from '@/components/Base/button/Button';
+import Heading from '@/components/Base/heading/Heading';
+import { Price } from '@/components/Base/price/Price';
+import Spinner from '@/components/Base/spinner/Spinner';
+import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react';
+import { MinusIcon, PlusIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { useEffect, useRef, useState } from 'react';
+export const BasketDialog = ({ isOpen, onClose, products, subtotal, onQuantityChange, onRemoveProduct, onCheckout, onContinueShopping, productLink, title = 'Váš košík', checkoutText = 'Pokračovat k objednávce', continueShoppingText = 'Pokračovat v nákupu', showShippingNote = true, showQuantityControls = true, pendingUpdates = {}, processingItems = {}, isAddingToCart = false, totalItems, locale, productPriceOptions, totalPriceOptions, translations, }) => {
+    const [shouldShowAddingIndicator, setShouldShowAddingIndicator] = useState(false);
+    const initialTotalItems = useRef(null);
+    useEffect(() => {
+        if (isAddingToCart) {
+            initialTotalItems.current = totalItems || 0;
+            setShouldShowAddingIndicator(true);
+        }
+        else if (initialTotalItems.current !== null) {
+            if (totalItems !== initialTotalItems.current) {
+                setShouldShowAddingIndicator(false);
+                initialTotalItems.current = null;
+            }
+        }
+    }, [isAddingToCart, totalItems]);
     const handleCheckout = () => {
         if (onCheckout) {
             onCheckout();
@@ -37,60 +35,53 @@ pendingUpdates = {}, processingItems = {}, }) => {
             onClose();
         }
     };
-    const handleIncrement = (productId, quantity) => {
+    const handleIncrement = (productUuid, quantity) => {
         if (onQuantityChange) {
-            onQuantityChange(productId, quantity + 1);
+            onQuantityChange(productUuid, quantity + 1);
         }
     };
-    const handleDecrement = (productId, quantity) => {
+    const handleDecrement = (productUuid, quantity) => {
         if (onQuantityChange) {
             if (quantity > 1) {
-                onQuantityChange(productId, quantity - 1);
+                onQuantityChange(productUuid, quantity - 1);
             }
             else {
-                onQuantityChange(productId, 0);
+                onQuantityChange(productUuid, 0);
             }
         }
     };
-    const getVariantClasses = () => {
-        switch (variant) {
-            case "compact":
-                return "max-w-sm";
-            case "full":
-                return "max-w-2xl";
-            default:
-                return "max-w-md";
-        }
-    };
-    const getPositionClasses = () => {
-        return position === "left" ? "left-0" : "right-0";
-    };
-    return (_jsxs(Dialog, { open: isOpen, onClose: onClose, className: "relative z-60", children: [_jsx(DialogBackdrop, { transition: true, className: `fixed inset-0 bg-gray-500/75 transition-opacity duration-${animationDuration} ease-in-out data-closed:opacity-0`, style: { opacity: backdropOpacity } }), _jsx("div", { className: "fixed inset-0 overflow-hidden", children: _jsx("div", { className: "absolute inset-0 overflow-hidden", children: _jsx("div", { className: `pointer-events-none fixed inset-y-0 ${getPositionClasses()} flex max-w-full pl-10`, children: _jsx(DialogPanel, { transition: true, className: `pointer-events-auto w-screen ${getVariantClasses()} transform transition duration-${animationDuration} ease-in-out data-closed:translate-x-full sm:duration-700 ${customClassName}`, children: _jsxs("div", { className: "flex h-full flex-col overflow-y-scroll bg-white shadow-xl", style: { maxHeight }, children: [_jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-6 sm:px-6", children: [_jsxs("div", { className: "flex items-start justify-between", children: [_jsx(DialogTitle, { className: "text-lg font-medium text-gray-900", children: title }), _jsx("div", { className: "ml-3 flex h-7 items-center", children: _jsxs("button", { type: "button", onClick: onClose, className: "relative -m-2 p-2 text-gray-400 hover:text-gray-500", children: [_jsx("span", { className: "absolute -inset-0.5" }), _jsx("span", { className: "sr-only", children: "Close panel" }), _jsx(XMarkIcon, { "aria-hidden": "true", className: "size-6" })] }) })] }), _jsx("div", { className: "mt-8", children: _jsx("div", { className: "flow-root", children: products.length === 0 ? (_jsx("div", { className: "py-6 text-center text-gray-500", children: emptyCartText })) : (_jsx("ul", { role: "list", className: "-my-6 divide-y divide-gray-200", children: products.map((product) => {
-                                                            if (renderCustomProduct) {
-                                                                return renderCustomProduct(product);
-                                                            }
-                                                            const displayQuantity = product.id in pendingUpdates
-                                                                ? pendingUpdates[product.id]
-                                                                : product.quantity;
-                                                            const isProcessing = processingItems[product.id] === true;
-                                                            return (_jsxs("li", { className: "flex py-6", children: [showProductImages &&
-                                                                        product.variaton_image && (_jsx("div", { className: "size-24 shrink-0 overflow-hidden rounded-md border border-gray-200", children: _jsx("img", { alt: product.variaton_image.alt, src: product.variaton_image.src, className: "size-full object-cover" }) })), _jsxs("div", { className: "ml-4 flex flex-1 flex-col", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between text-base font-medium text-gray-900", children: [_jsx("h3", { children: showProductLinks && product.href ? (_jsx("a", { href: product.href, onClick: (e) => {
-                                                                                                        if (onProductClick) {
-                                                                                                            e.preventDefault();
-                                                                                                            onProductClick(product);
-                                                                                                        }
-                                                                                                    }, children: product.name })) : (product.name) }), _jsx("p", { className: "ml-4", children: formatPrice(product.price) })] }), showProductColors && product.color && (_jsx("p", { className: "mt-1 text-sm text-gray-500", children: product.color }))] }), _jsxs("div", { className: "flex flex-1 items-end justify-between text-sm", children: [showQuantityControls &&
-                                                                                        onQuantityChange ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: "text-gray-500 mr-2", children: quantityLabel }), _jsxs("div", { className: "flex items-center", children: [_jsx("button", { type: "button", onClick: () => !isProcessing &&
-                                                                                                            handleDecrement(product.id, displayQuantity), disabled: isProcessing, className: `rounded-full p-1 text-gray-600 ${isProcessing
-                                                                                                            ? "bg-gray-100 cursor-not-allowed opacity-50"
-                                                                                                            : "bg-gray-200 hover:bg-gray-300"}`, children: _jsx(MinusIcon, { className: "h-4 w-4" }) }), _jsx("span", { className: "mx-2 min-w-[20px] text-center text-black", children: displayQuantity }), _jsx("button", { type: "button", onClick: () => !isProcessing &&
-                                                                                                            handleIncrement(product.id, displayQuantity), disabled: isProcessing, className: `rounded-full p-1 text-gray-600 ${isProcessing
-                                                                                                            ? "bg-gray-100 cursor-not-allowed opacity-50"
-                                                                                                            : "bg-gray-200 hover:bg-gray-300"}`, children: _jsx(PlusIcon, { className: "h-4 w-4" }) })] })] })) : (_jsxs("p", { className: "text-gray-500", children: [quantityLabel, " ", displayQuantity] })), showRemoveButton && onRemoveProduct && (_jsx("div", { className: "flex", children: _jsx("button", { type: "button", className: `font-medium ${isProcessing
-                                                                                                ? "text-gray-400 cursor-not-allowed"
-                                                                                                : "text-green-600 hover:text-green-500"}`, onClick: () => !isProcessing &&
-                                                                                                onRemoveProduct(product.id), disabled: isProcessing, children: removeButtonText }) }))] })] })] }, product.id));
-                                                        }) })) }) })] }), _jsxs("div", { className: "border-t border-gray-200 px-4 py-6 sm:px-6", children: [showSubtotal && (_jsxs("div", { className: "flex justify-between text-base font-medium text-gray-900", children: [_jsx("p", { children: totalLabel }), _jsx("p", { children: typeof subtotal === "number"
-                                                            ? formatPrice(subtotal)
-                                                            : subtotal })] })), showShippingNote && (_jsx("p", { className: "mt-0.5 text-sm text-gray-500", children: shippingNoteText })), products.length > 0 && showCheckoutButton && onCheckout && (_jsx("div", { className: "mt-6", children: _jsx("button", { onClick: handleCheckout, className: "flex w-full items-center justify-center rounded-md border border-transparent bg-green-600 px-6 py-3 text-base font-medium text-white shadow-xs hover:bg-green-700", children: checkoutText }) })), showContinueShoppingButton && (_jsx("div", { className: "mt-6 flex justify-center text-center text-sm text-gray-500", children: _jsx("p", { children: _jsxs("button", { type: "button", onClick: handleContinueShopping, className: "font-medium text-green-600 hover:text-green-500", children: [continueShoppingText, _jsx("span", { "aria-hidden": "true", children: " \u2192" })] }) }) })), renderCustomFooter && renderCustomFooter()] })] }) }) }) }) })] }));
+    return (_jsxs(Dialog, { open: isOpen, onClose: onClose, className: "relative z-110", children: [_jsx(DialogBackdrop, { transition: true, className: "fixed inset-0 bg-gray-500/75 transition-opacity duration-500 ease-in-out data-closed:opacity-0" }), _jsx("div", { className: "fixed inset-0 overflow-hidden", children: _jsx("div", { className: "absolute inset-0 overflow-hidden", children: _jsx("div", { className: "pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10", children: _jsx(DialogPanel, { transition: true, className: "pointer-events-auto w-screen max-w-md transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700", children: _jsxs("div", { className: "flex h-full flex-col overflow-y-scroll bg-white shadow-xl", children: [_jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-6 sm:px-6", children: [_jsxs("div", { className: "flex items-start justify-between", children: [_jsx(DialogTitle, { className: "text-lg font-medium text-gray-900", children: title }), _jsx("div", { className: "ml-3 flex h-7 items-center", children: _jsxs("button", { type: "button", onClick: onClose, className: "relative -m-2 p-2 text-gray-400 hover:text-gray-500", children: [_jsx("span", { className: "absolute -inset-0.5" }), _jsx(XMarkIcon, { "aria-hidden": "true", className: "size-6" })] }) })] }), _jsx("div", { className: "mt-8", children: _jsx("div", { className: "flow-root", children: products.length === 0 && !shouldShowAddingIndicator ? (_jsx("div", { className: "py-6 text-center text-gray-500", children: translations.emptyBasket })) : (_jsxs("ul", { role: "list", className: "-my-6 divide-y divide-gray-200", children: [products.map((product) => {
+                                                                const productKey = product.variation_uuid;
+                                                                const displayQuantity = productKey in pendingUpdates
+                                                                    ? pendingUpdates[productKey]
+                                                                    : product.quantity;
+                                                                const isProcessing = processingItems[productKey] === true;
+                                                                const isTemporaryRow = shouldShowAddingIndicator &&
+                                                                    productKey === 'adding';
+                                                                return (_jsxs("li", { className: `flex py-6 ${isTemporaryRow
+                                                                        ? 'opacity-75 bg-gray-50'
+                                                                        : ''}`, children: [_jsxs("div", { className: "size-24 shrink-0 overflow-hidden border border-gray-200 relative", children: [_jsx("img", { alt: product
+                                                                                        .variation_images[0]
+                                                                                        ?.alt ||
+                                                                                        product.variation_name, src: product
+                                                                                        .variation_images[0]
+                                                                                        ?.href ||
+                                                                                        '/lk_logo.png', className: "size-full object-contain" }), isTemporaryRow && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white bg-opacity-75", children: _jsx(Spinner, { className: "h-8 w-8 text-[var(--primary)]" }) }))] }), _jsxs("div", { className: "ml-4 flex flex-1 flex-col", children: [_jsx("div", { children: _jsxs("div", { className: "flex justify-between text-base font-medium text-gray-900", children: [_jsx(Heading, { level: 3, className: "font-extralight text-lg", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { asLink: true, unstyled: true, href: productLink?.(product.product_name, product.variation_uuid), children: product.product_name }), isProcessing &&
+                                                                                                            !isTemporaryRow && (_jsx(Spinner, { className: "h-4 w-4 text-gray-400" }))] }) }), _jsx(Price, { value: product.price, locale: locale, options: productPriceOptions, className: "ml-4 font-light" })] }) }), _jsxs("div", { className: "flex flex-1 items-end justify-between text-sm", children: [isTemporaryRow ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Spinner, { className: "h-4 w-4 text-[var(--primary)]" }), _jsx("p", { className: "text-gray-500 italic", children: "Prid\u00E1va sa do ko\u0161\u00EDka..." })] })) : showQuantityControls &&
+                                                                                            onQuantityChange ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: "text-gray-500 mr-2", children: translations.amount }), _jsxs("div", { className: "flex items-center", children: [_jsx("button", { type: "button", onClick: () => !isProcessing &&
+                                                                                                                handleDecrement(product.variation_uuid, displayQuantity), disabled: isProcessing, className: `rounded-full p-1 text-gray-600 ${isProcessing
+                                                                                                                ? 'bg-gray-100 cursor-not-allowed opacity-50'
+                                                                                                                : 'bg-gray-200 hover:bg-gray-300'}`, children: _jsx(MinusIcon, { className: "h-4 w-4" }) }), _jsx("span", { className: "mx-2 min-w-[20px] text-center text-black", children: displayQuantity }), _jsx("button", { type: "button", onClick: () => !isProcessing &&
+                                                                                                                handleIncrement(product.variation_uuid, displayQuantity), disabled: isProcessing, className: `rounded-full p-1 text-gray-600 ${isProcessing
+                                                                                                                ? 'bg-gray-100 cursor-not-allowed opacity-50'
+                                                                                                                : 'bg-gray-200 hover:bg-gray-300'}`, children: _jsx(PlusIcon, { className: "h-4 w-4" }) })] })] })) : (_jsx("p", { className: "text-gray-500", children: translations.amount +
+                                                                                                ' ' +
+                                                                                                displayQuantity })), !isTemporaryRow &&
+                                                                                            onRemoveProduct && (_jsx("div", { className: "flex", children: _jsx("button", { type: "button", className: `font-medium ${isProcessing
+                                                                                                    ? 'text-gray-400 cursor-not-allowed'
+                                                                                                    : 'text-[var(--accent)] hover:text-[var(--primary)]'}`, onClick: () => !isProcessing &&
+                                                                                                    onRemoveProduct(product.variation_uuid), disabled: isProcessing, children: translations.remove }) }))] })] })] }, `${product.variation_uuid}-${isTemporaryRow
+                                                                    ? 'temp'
+                                                                    : 'normal'}`));
+                                                            }), shouldShowAddingIndicator && (_jsxs("li", { className: "flex py-6 opacity-75 bg-gray-50", children: [_jsx("div", { className: "size-24 shrink-0 overflow-hidden rounded-md border border-gray-200 relative", children: _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white bg-opacity-75", children: _jsx(Spinner, { className: "h-8 w-8 text-[var(--primary)]" }) }) }), _jsx("div", { className: "ml-4 flex flex-1 flex-col justify-center", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Spinner, { className: "h-4 w-4 text-[var(--primary)]" }), _jsx("p", { className: "text-gray-500 italic", children: translations.addingToBasket })] }) })] }))] })) }) })] }), _jsxs("div", { className: "border-t border-gray-200 px-4 py-6 sm:px-6", children: [_jsxs("div", { className: "flex justify-between text-base font-medium text-gray-900", children: [_jsx("p", { children: translations.total }), _jsx(Price, { value: subtotal, locale: locale, options: totalPriceOptions })] }), showShippingNote && (_jsx("p", { className: "mt-0.5 text-sm text-gray-500", children: translations.shippingAndTax })), products.length > 0 && onCheckout && (_jsx("div", { className: "mt-6", children: _jsx("button", { onClick: handleCheckout, className: "button-brand w-full", children: checkoutText }) })), _jsx("div", { className: "mt-6 flex justify-center text-center text-sm text-gray-500", children: _jsx("p", { children: _jsxs("button", { type: "button", onClick: handleContinueShopping, className: "font-medium text-[var(--primary)] hover:text-[var(--primary)]", children: [continueShoppingText, _jsx("span", { "aria-hidden": "true", children: " \u2192" })] }) }) })] })] }) }) }) }) })] }));
 };

package/dist/components/Ecommerce/basket-overview/BasketOverview.d.ts

@@ -0,0 +1,34 @@
+import { PriceFormatOptions } from '@/utils/generalHelperFunction';
+import { Product } from '@q2devel/q2-core';
+export type BasketProduct = Product & {
+    quantity: number;
+    inStock?: boolean;
+    leadTime?: string;
+    size?: string;
+};
+export type BasketOverviewProps = {
+    products: BasketProduct[];
+    subtotal: number;
+    onQuantityChange?: (productId: string, quantity: number) => void;
+    onRemoveProduct?: (productId: string) => void;
+    onClearBasket?: () => void;
+    onCheckout?: () => void;
+    onContinueShopping?: () => void;
+    productLink?: (productName: string, variationId: string) => string;
+    title?: string;
+    checkoutText?: string;
+    continueShoppingText?: string;
+    shippingNote?: string;
+    totalText?: string;
+    showShippingNote?: boolean;
+    clearBasketText?: string;
+    pendingUpdates?: Record<string, number>;
+    processingItems?: Record<string, boolean>;
+    locale: string;
+    productPriceOptions?: PriceFormatOptions;
+    TotalPriceOptions?: PriceFormatOptions;
+    translations?: {
+        emptyBasketPlaceholder?: string;
+    };
+};
+export declare const BasketOverview: ({ products, subtotal, onQuantityChange, onRemoveProduct, onClearBasket, onCheckout, onContinueShopping, productLink, title, checkoutText, continueShoppingText, showShippingNote, clearBasketText, totalText, shippingNote, pendingUpdates, processingItems, locale, productPriceOptions, TotalPriceOptions, translations, }: BasketOverviewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Ecommerce/basket-overview/BasketOverview.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Button from '@/components/Base/button/Button';
+import Heading from '@/components/Base/heading/Heading';
+import { Price } from '@/components/Base/price/Price';
+import { CheckIcon, ClockIcon, TrashIcon } from '@heroicons/react/20/solid';
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/solid';
+export const BasketOverview = ({ products, subtotal, onQuantityChange, onRemoveProduct, onClearBasket, onCheckout, onContinueShopping, productLink, title = 'Shopping Cart', checkoutText = 'Checkout', continueShoppingText = 'Continue Shopping', showShippingNote = true, clearBasketText = 'Clear basket', totalText, shippingNote, pendingUpdates = {}, processingItems = {}, locale, productPriceOptions, TotalPriceOptions, translations, }) => {
+    const handleIncrement = (product, quantity) => {
+        if (onQuantityChange) {
+            onQuantityChange(product.variation_uuid, quantity + 1);
+        }
+    };
+    const handleDecrement = (product, quantity) => {
+        if (onQuantityChange) {
+            if (quantity > 1) {
+                onQuantityChange(product.variation_uuid, quantity - 1);
+            }
+            else if (onRemoveProduct) {
+                onRemoveProduct(product.variation_uuid);
+            }
+        }
+    };
+    return (_jsx("div", { children: _jsxs("div", { className: "mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-8 lg:px-0", children: [_jsx(Heading, { level: 1, className: "label", children: title }), _jsxs("form", { className: "mt-12", children: [_jsxs("section", { "aria-labelledby": "cart-heading", children: [_jsx(Heading, { level: 2, id: "cart-heading", className: "sr-only", children: "Items in your shopping cart" }), _jsx("ul", { role: "list", className: "divide-y divide-gray-200 border-t border-b border-gray-200", children: products.length === 0 ? (_jsx("li", { className: "py-6 text-center text-gray-500", children: translations?.emptyBasketPlaceholder })) : (products.map((product) => {
+                                        const productKey = product.variation_uuid;
+                                        const isProcessing = processingItems[productKey] || false;
+                                        const displayQuantity = productKey in pendingUpdates
+                                            ? pendingUpdates[productKey]
+                                            : product.quantity;
+                                        return (_jsxs("li", { className: "flex py-6", children: [_jsx("div", { className: "shrink-0", children: _jsx("img", { width: 128, height: 128, alt: product.variation_images[0]?.alt, src: product.variation_images[0]?.href, className: "size-24 rounded-md object-contain sm:size-32" }) }), _jsxs("div", { className: "ml-4 flex flex-1 flex-col sm:ml-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between", children: [_jsx(Heading, { level: 4, children: _jsx(Button, { asLink: true, unstyled: true, href: productLink?.(product.product_name, product.variation_uuid), className: "font-medium text-gray-700 hover:text-gray-800", children: product.product_name }) }), _jsx("span", { className: "ml-4 text-sm font-medium text-gray-900", children: _jsx(Price, { value: product.price, locale: locale, options: productPriceOptions }) })] }), product.size && (_jsx("p", { className: "mt-1 text-sm text-gray-500", children: product.size }))] }), _jsxs("div", { className: "mt-4 flex flex-1 items-end justify-between", children: [_jsx("div", { className: "flex items-center space-x-2 text-sm text-gray-700", children: product.inStock !== undefined && (_jsxs(_Fragment, { children: [product.inStock ? (_jsx(CheckIcon, { "aria-hidden": "true", className: "size-5 shrink-0 text-[var(--primary)]" })) : (_jsx(ClockIcon, { "aria-hidden": "true", className: "size-5 shrink-0 text-gray-300" })), _jsx("span", { children: product.inStock
+                                                                                    ? 'In stock'
+                                                                                    : `Will ship in ${product.leadTime}` })] })) }), _jsxs("div", { className: "flex items-center", children: [_jsx("button", { type: "button", onClick: () => handleDecrement(product, displayQuantity), disabled: isProcessing, className: `rounded-full p-1 text-gray-600 ${isProcessing
+                                                                                ? 'bg-gray-100 cursor-not-allowed opacity-50'
+                                                                                : 'bg-gray-200 hover:bg-gray-300'}`, children: _jsx(MinusIcon, { className: "h-4 w-4" }) }), _jsx("span", { className: "mx-2 min-w-[20px] text-center text-black", children: displayQuantity }), _jsx("button", { type: "button", onClick: () => handleIncrement(product, displayQuantity), disabled: isProcessing, className: `rounded-full p-1 text-gray-600 ${isProcessing
+                                                                                ? 'bg-gray-100 cursor-not-allowed opacity-50'
+                                                                                : 'bg-gray-200 hover:bg-gray-300'}`, children: _jsx(PlusIcon, { className: "h-4 w-4" }) })] })] })] })] }, product.variation_uuid));
+                                    })) })] }), _jsxs("section", { "aria-labelledby": "summary-heading", className: "mt-10", children: [_jsx(Heading, { level: 2, id: "summary-heading", className: "sr-only", children: "Order summary" }), products.length > 0 && onClearBasket && (_jsx("div", { className: "mb-4", children: _jsxs("button", { type: "button", onClick: onClearBasket, className: "inline-flex items-center text-sm font-medium text-red-600 hover:text-red-500", children: [_jsx(TrashIcon, { className: "mr-1 h-5 w-5 text-red-500" }), clearBasketText] }) })), _jsxs("div", { children: [_jsx("dl", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("dt", { className: "text-base font-medium text-gray-900", children: totalText }), _jsx("dd", { className: "ml-4 text-base font-medium text-gray-900", children: _jsx(Price, { value: subtotal, locale: locale, options: TotalPriceOptions }) })] }) }), showShippingNote && (_jsx("p", { className: "mt-1 text-sm text-gray-500", children: shippingNote }))] }), products.length > 0 && onCheckout && (_jsx("div", { className: "mt-10", children: _jsx("button", { type: "button", onClick: onCheckout, className: "button-brand w-full", children: checkoutText }) })), onContinueShopping && (_jsx("div", { className: "mt-6 text-center text-sm", children: _jsx("p", { children: _jsxs("button", { type: "button", onClick: onContinueShopping, className: "font-medium text-[var(--primary)] hover:text-[var(--primary)]", children: [continueShoppingText, _jsx("span", { "aria-hidden": "true", children: " \u2192" })] }) }) }))] })] })] }) }));
+};