@q2devel/q2-storybook 1.0.136 → 1.0.139
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Ecommerce/basket-dialog/BasketDialog.js +2 -2
- package/dist/components/Ecommerce/basket-overview/BasketOverview.js +1 -1
- package/dist/components/Ecommerce/category-tree/CategoryTree.js +15 -3
- package/dist/components/Ecommerce/product-card/ProductCard.d.ts +2 -1
- package/dist/components/Ecommerce/product-card/ProductCard.js +10 -4
- package/dist/components/Ecommerce/product-detail/ProductDetail.d.ts +4 -2
- package/dist/components/Ecommerce/product-detail/ProductDetail.js +22 -19
- package/dist/components/Ecommerce/product-detail/ProductDetailGallery.js +1 -1
- package/dist/components/Forms/select-field/SelectField.js +1 -1
- package/package.json +84 -84
|
@@ -61,10 +61,10 @@ export const BasketDialog = ({ isOpen, onClose, products, subtotal, onQuantityCh
|
|
|
61
61
|
return (_jsxs("li", { className: `flex py-6 ${isTemporaryRow
|
|
62
62
|
? 'opacity-75 bg-gray-50'
|
|
63
63
|
: ''}`, children: [_jsxs("div", { className: "size-24 shrink-0 overflow-hidden border border-gray-200 relative", children: [_jsx("img", { alt: product
|
|
64
|
-
.
|
|
64
|
+
.all_images[0]
|
|
65
65
|
?.alt ||
|
|
66
66
|
product.variation_name, src: product
|
|
67
|
-
.
|
|
67
|
+
.all_images[0]
|
|
68
68
|
?.href ||
|
|
69
69
|
'/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_id), children: product.product_name }), isProcessing &&
|
|
70
70
|
!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 &&
|
|
@@ -27,7 +27,7 @@ export const BasketOverview = ({ products, subtotal, onQuantityChange, onRemoveP
|
|
|
27
27
|
const displayQuantity = productKey in pendingUpdates
|
|
28
28
|
? pendingUpdates[productKey]
|
|
29
29
|
: product.quantity;
|
|
30
|
-
return (_jsxs("li", { className: "flex py-6", children: [_jsx("div", { className: "shrink-0", children: _jsx("img", { width: 128, height: 128, alt: product.
|
|
30
|
+
return (_jsxs("li", { className: "flex py-6", children: [_jsx("div", { className: "shrink-0", children: _jsx("img", { width: 128, height: 128, alt: product.all_images[0]?.alt, src: product.all_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_id), 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
|
|
31
31
|
? 'In stock'
|
|
32
32
|
: `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
|
|
33
33
|
? 'bg-gray-100 cursor-not-allowed opacity-50'
|
|
@@ -42,14 +42,26 @@ function CategoryNode({ term, allTerms, level, activeTerm, parentIds, onTermClic
|
|
|
42
42
|
if (hasChildren)
|
|
43
43
|
setIsOpen((prev) => !prev);
|
|
44
44
|
onTermClick?.(term);
|
|
45
|
-
}, children: [_jsx(Button, { unstyled: true, className: "text-left", onClick: (e) => {
|
|
45
|
+
}, children: [_jsx(Button, { unstyled: true, className: "text-left cursor-pointer", onClick: (e) => {
|
|
46
46
|
e.stopPropagation();
|
|
47
47
|
onTermClick?.(term);
|
|
48
|
-
}, children: term.name }), hasChildren && (_jsxs("span", { className: "ml-auto flex items-center", children: [_jsx(PlusIcon, { className: buildClassesByJoining('w-5 h-5 text-gray-400', isOpen ? 'hidden' : 'block')
|
|
48
|
+
}, children: term.name }), hasChildren && (_jsxs("span", { className: "ml-auto flex items-center", children: [_jsx(PlusIcon, { className: buildClassesByJoining('w-5 h-5 text-gray-400', isOpen ? 'hidden' : 'block'), onClick: (e) => {
|
|
49
|
+
e.stopPropagation();
|
|
50
|
+
setIsOpen((prev) => !prev);
|
|
51
|
+
} }), _jsx(MinusIcon, { className: buildClassesByJoining('w-5 h-5 text-gray-400', isOpen ? 'block' : 'hidden'), onClick: (e) => {
|
|
52
|
+
e.stopPropagation();
|
|
53
|
+
setIsOpen((prev) => !prev);
|
|
54
|
+
} })] }))] }), hasChildren && isOpen && (_jsx("div", { className: "mt-1 space-y-0.5", children: children.map((child) => (_jsx(CategoryNode, { term: child, allTerms: allTerms, level: level + 1, activeTerm: activeTerm, parentIds: parentIds, onTermClick: onTermClick, colorClassName: colorClassName }, child.id))) }))] }));
|
|
49
55
|
}
|
|
50
56
|
export default function CategoryTree({ terms, activeTerm, labels, onTermClick, colorClassName, }) {
|
|
51
57
|
const parentIds = findParentTerm(activeTerm, terms).map((term) => term.id);
|
|
52
58
|
const firstLevelTerms = terms.filter((term) => !term.parent);
|
|
53
59
|
const [isOpen, setIsOpen] = useState(true);
|
|
54
|
-
return (_jsxs("div", { className: "border-b border-gray-300 py-6", children: [_jsxs("div", { className: buildClassesByJoining('flex w-full items-center justify-between text-left text-sm font-medium text-gray-900 transition-colors duration-300 cursor-pointer select-none'), onClick: () => setIsOpen((prev) => !prev), children: [_jsx("span", { children: labels.category }), _jsxs("span", { className: "ml-2 items-center", children: [_jsx(PlusIcon, { className: buildClassesByJoining('w-5 h-5 text-gray-400', isOpen ? 'hidden' : 'block')
|
|
60
|
+
return (_jsxs("div", { className: "border-b border-gray-300 py-6", children: [_jsxs("div", { className: buildClassesByJoining('flex w-full items-center justify-between text-left text-sm font-medium text-gray-900 transition-colors duration-300 cursor-pointer select-none'), onClick: () => setIsOpen((prev) => !prev), children: [_jsx("span", { children: labels.category }), _jsxs("span", { className: "ml-2 items-center", children: [_jsx(PlusIcon, { className: buildClassesByJoining('w-5 h-5 text-gray-400', isOpen ? 'hidden' : 'block'), onClick: (e) => {
|
|
61
|
+
e.stopPropagation();
|
|
62
|
+
setIsOpen((prev) => !prev);
|
|
63
|
+
} }), _jsx(MinusIcon, { className: buildClassesByJoining('w-5 h-5 text-gray-400', isOpen ? 'block' : 'hidden'), onClick: (e) => {
|
|
64
|
+
e.stopPropagation();
|
|
65
|
+
setIsOpen((prev) => !prev);
|
|
66
|
+
} })] })] }), isOpen && (_jsx("div", { className: "mt-4 space-y-1", children: firstLevelTerms.map((term) => (_jsx(CategoryNode, { term: term, allTerms: terms, level: 1, activeTerm: activeTerm, parentIds: parentIds, onTermClick: onTermClick, colorClassName: colorClassName }, term.id))) }))] }));
|
|
55
67
|
}
|
|
@@ -57,6 +57,7 @@ export type ProductCardProps = {
|
|
|
57
57
|
locale: string;
|
|
58
58
|
cartMode?: 'full' | 'add-only';
|
|
59
59
|
showSpinnerInAdd?: boolean;
|
|
60
|
+
addToCartButtonCustomAction?: () => void | Promise<void>;
|
|
60
61
|
showWishlistButton?: boolean;
|
|
61
62
|
isInWishlist?: boolean;
|
|
62
63
|
onWishlistToggle?: (product: Product) => void;
|
|
@@ -83,4 +84,4 @@ export type ProductCardProps = {
|
|
|
83
84
|
mainQuantUnitClassName?: string;
|
|
84
85
|
discountQuantUnitClassName?: string;
|
|
85
86
|
};
|
|
86
|
-
export declare const ProductCard: ({ product, href, className, imageClassName, contentClassName, titleClassName, priceClassName, priceDiscountClassName, descriptionClassName, labelClassName, aspectRatio, imagePosition, imageObjectFit, layout, hoverEffect, renderBadges, renderColor, renderDescription, elevationLevel, rounded, titleLines, onCardClick, onImageClick, renderFooter, renderHeader, renderVariationName, variationNameClassName, actionButton, linkToCatalog, showCountry, showVolume, showAddButton, showAddButtonOnHover, addButtonPosition, addButtonAlignment, addButtonText, addButtonBottomClassName, borderOnHoverClassName, currentQuantity, onQuantityChange, addButtonIcon, maxQuantity, controlsClassName, buttonClassName, quantityClassName, customAddButton, disabled, locale, cartMode, showSpinnerInAdd, showWishlistButton, isInWishlist, onWishlistToggle, wishlistButtonClassName, isWishlistPending, enableMultipleWishlists, wishlists, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, wishlistDropdownClassName, productWishlistIds, showDeleteButton, onDelete, deleteButtonClassName, isDeletePending, deleteButtonSize, deleteButtonPosition, mainPriceFormatOptions, discountPriceFormatOptions, mainPriceClassName, discountPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, quantUnit, }: ProductCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
87
|
+
export declare const ProductCard: ({ product, href, className, imageClassName, contentClassName, titleClassName, priceClassName, priceDiscountClassName, descriptionClassName, labelClassName, aspectRatio, imagePosition, imageObjectFit, layout, hoverEffect, renderBadges, renderColor, renderDescription, elevationLevel, rounded, titleLines, onCardClick, onImageClick, renderFooter, renderHeader, renderVariationName, variationNameClassName, actionButton, linkToCatalog, showCountry, showVolume, showAddButton, showAddButtonOnHover, addButtonPosition, addButtonAlignment, addButtonText, addButtonBottomClassName, borderOnHoverClassName, currentQuantity, onQuantityChange, addButtonIcon, maxQuantity, controlsClassName, buttonClassName, quantityClassName, customAddButton, disabled, locale, cartMode, showSpinnerInAdd, addToCartButtonCustomAction, showWishlistButton, isInWishlist, onWishlistToggle, wishlistButtonClassName, isWishlistPending, enableMultipleWishlists, wishlists, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, wishlistDropdownClassName, productWishlistIds, showDeleteButton, onDelete, deleteButtonClassName, isDeletePending, deleteButtonSize, deleteButtonPosition, mainPriceFormatOptions, discountPriceFormatOptions, mainPriceClassName, discountPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, quantUnit, }: ProductCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -14,7 +14,7 @@ import DeleteButton from '../wishlist/DeleteButton';
|
|
|
14
14
|
import LikeButton from '../wishlist/LikeButton';
|
|
15
15
|
export const ProductCard = ({ product, href, className, imageClassName, contentClassName, titleClassName, priceClassName, priceDiscountClassName, descriptionClassName, labelClassName, aspectRatio = 'square', imagePosition = 'center', imageObjectFit = 'cover', layout = 'default', hoverEffect = 'opacity', renderBadges = true, renderColor = true, renderDescription = false, elevationLevel = 0, rounded = 'md', titleLines = 1, onCardClick, onImageClick, renderFooter, renderHeader, renderVariationName = false, variationNameClassName = '', actionButton, linkToCatalog, showCountry = false, showVolume = false,
|
|
16
16
|
// Add to cart functionality
|
|
17
|
-
showAddButton = false, showAddButtonOnHover = false, addButtonPosition = 'overlay', addButtonAlignment = 'center', addButtonText = 'Pridať do košíka', addButtonBottomClassName = '', borderOnHoverClassName = '', currentQuantity = 0, onQuantityChange, addButtonIcon = _jsx(ShoppingBagIcon, { className: "h-4 w-4" }), maxQuantity = 99, controlsClassName = '', buttonClassName = '', quantityClassName = '', customAddButton, disabled = false, locale, cartMode = 'full', showSpinnerInAdd = false,
|
|
17
|
+
showAddButton = false, showAddButtonOnHover = false, addButtonPosition = 'overlay', addButtonAlignment = 'center', addButtonText = 'Pridať do košíka', addButtonBottomClassName = '', borderOnHoverClassName = '', currentQuantity = 0, onQuantityChange, addButtonIcon = _jsx(ShoppingBagIcon, { className: "h-4 w-4" }), maxQuantity = 99, controlsClassName = '', buttonClassName = '', quantityClassName = '', customAddButton, disabled = false, locale, cartMode = 'full', showSpinnerInAdd = false, addToCartButtonCustomAction,
|
|
18
18
|
// Wishlist functionality
|
|
19
19
|
showWishlistButton = false, isInWishlist = false, onWishlistToggle, wishlistButtonClassName = '', isWishlistPending = false,
|
|
20
20
|
// Multiple wishlists support
|
|
@@ -116,9 +116,15 @@ mainPriceFormatOptions, discountPriceFormatOptions, mainPriceClassName, discount
|
|
|
116
116
|
onImageClick(product);
|
|
117
117
|
}
|
|
118
118
|
}, [onImageClick, product]);
|
|
119
|
-
const handleAddToCart = useCallback(() => {
|
|
119
|
+
const handleAddToCart = useCallback(async () => {
|
|
120
|
+
// PRIORITA: Custom action > štandardné správanie
|
|
121
|
+
if (addToCartButtonCustomAction) {
|
|
122
|
+
await addToCartButtonCustomAction();
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
125
|
+
// Štandardné správanie
|
|
120
126
|
onQuantityChange && onQuantityChange(product, 1);
|
|
121
|
-
}, [onQuantityChange, product]);
|
|
127
|
+
}, [addToCartButtonCustomAction, onQuantityChange, product]);
|
|
122
128
|
const handleIncrement = useCallback(() => {
|
|
123
129
|
const newQuantity = Math.min(currentQuantity + 1, maxQuantity);
|
|
124
130
|
onQuantityChange && onQuantityChange(product, newQuantity);
|
|
@@ -161,7 +167,7 @@ mainPriceFormatOptions, discountPriceFormatOptions, mainPriceClassName, discount
|
|
|
161
167
|
onDelete(product);
|
|
162
168
|
}
|
|
163
169
|
}, [onDelete, product]);
|
|
164
|
-
return (_jsxs("div", { className: buildClassesByJoining('group relative h-full', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', borderOnHoverClassName, className), onClick: handleCardClick, children: [renderHeader && renderHeader(product), _jsxs("div", { className: buildClassesByJoining(imageLayoutClass, 'relative'), children: [product.badges && renderBadges && (_jsx("div", { className: "absolute top-2 left-2 z-10 flex flex-wrap gap-1", children: product.badges.map((badge, index) => (_jsx(Badge, { color: badge.color, children: badge.text }, index))) })), showDeleteButton ? (_jsx(DeleteButton, { show: showDeleteButton, onDelete: handleDelete, deleteButtonClassName: deleteButtonClassName, isDeletePending: isDeletePending, size: deleteButtonSize, position: deleteButtonPosition })) : (_jsx(LikeButton, { show: showWishlistButton, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, wishlistButtonClassName: wishlistButtonClassName, wishlistDropdownClassName: wishlistDropdownClassName, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle })), _jsx("img", { alt: product.
|
|
170
|
+
return (_jsxs("div", { className: buildClassesByJoining('group relative h-full', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', borderOnHoverClassName, className), onClick: handleCardClick, children: [renderHeader && renderHeader(product), _jsxs("div", { className: buildClassesByJoining(imageLayoutClass, 'relative'), children: [product.badges && renderBadges && (_jsx("div", { className: "absolute top-2 left-2 z-10 flex flex-wrap gap-1", children: product.badges.map((badge, index) => (_jsx(Badge, { color: badge.color, children: badge.text }, index))) })), showDeleteButton ? (_jsx(DeleteButton, { show: showDeleteButton, onDelete: handleDelete, deleteButtonClassName: deleteButtonClassName, isDeletePending: isDeletePending, size: deleteButtonSize, position: deleteButtonPosition })) : (_jsx(LikeButton, { show: showWishlistButton, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, wishlistButtonClassName: wishlistButtonClassName, wishlistDropdownClassName: wishlistDropdownClassName, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle })), _jsx("img", { alt: product.all_images[0]?.alt, src: product.all_images[0]?.href, className: buildClassesByJoining(aspectRatioClass, objectFitClass, objectPositionClass, hoverEffect !== 'none' ? hoverClass : '', roundedClass, 'bg-gray-200', onImageClick ? 'cursor-pointer' : '', imageClassName), onClick: handleImageClick }), addButtonPosition === 'overlay' && (_jsx(AddToCart, { buttonClassName: buttonClassName, addButtonIcon: getButtonIcon(), handleAddToCart: handleAddToCart, showAddButton: shouldShowAddButton(), disabled: disabled, customAddButton: customAddButton }))] }), _jsxs("div", { className: buildClassesByJoining('mt-4 h-full flex flex-col justify-between grow', contentLayoutClass, compactClass, contentClassName), children: [_jsxs("div", { className: "flex flex-col h-full justify-between", children: [_jsxs("div", { children: [_jsx(Heading, { level: 3, className: buildClassesByJoining('text-lg text-gray-700', titleLineClampClass, titleClassName), children: _jsxs(Button, { asLink: true, unstyled: true, href: href, children: [!onCardClick && (_jsx("span", { "aria-hidden": "true", className: "absolute inset-0" })), product.product_name] }) }), renderVariationName && product.variation_name && (_jsx("span", { className: buildClassesByJoining('text-md', variationNameClassName), children: product.variation_name })), (product.country || product.field_volume) && (_jsxs("p", { children: [showCountry && product.country && (_jsxs("span", { className: buildClassesByJoining('text-sm', labelClassName), children: [product.country, showVolume && product.field_volume && ', '] })), showVolume && product.field_volume && (_jsx("span", { className: buildClassesByJoining('text-sm', labelClassName), children: product.field_volume }))] })), renderDescription && product.description && (_jsx("span", { className: buildClassesByJoining('mt-1 text-sm text-gray-500 line-clamp-2', descriptionClassName), children: parseHTML(product.description) }))] }), _jsx("div", { className: "flex flex-col justify-between", children: _jsxs("div", { className: "flex flex-col justify-between", children: [_jsx(Price, { value: product.price, locale: locale, options: mainPriceFormatOptions, className: buildClassesByJoining('text-md font-bold text-gray-900', mainPriceClassName), quantUnit: quantUnit, quantUnitClassName: buildClassesByJoining('text-md font-bold text-black', mainQuantUnitClassName) }), product?.discountPercent != null && product.discountPercent > 0 && (_jsx(Price, { value: product.price / (1 - product.discountPercent / 100), locale: locale, options: discountPriceFormatOptions || mainPriceFormatOptions, className: buildClassesByJoining('text-sm font-normal text-gray-900 line-through', discountPriceClassName), quantUnit: quantUnit, quantUnitClassName: buildClassesByJoining('text-sm font-normal text-black line-through', discountQuantUnitClassName) })), addButtonPosition === 'bottom' && (_jsx("div", { className: buildClassesByJoining('mt-3 flex w-full relative z-10', getBottomButtonAlignment()), onClick: (e) => e.stopPropagation(), children: shouldShowQuantityControls() ? (
|
|
165
171
|
// Quantity controls
|
|
166
172
|
_jsxs("div", { className: buildClassesByJoining('flex items-center gap-2', controlsClassName), children: [_jsx(Button, { onClick: handleDecrement, className: buildClassesByJoining('w-8 h-8 flex items-center justify-center rounded border', addButtonBottomClassName), disabled: disabled || currentQuantity <= 0, children: "\u2212" }), _jsx("span", { className: buildClassesByJoining('mx-2 font-medium', quantityClassName), children: currentQuantity }), _jsx(Button, { onClick: handleIncrement, className: buildClassesByJoining('w-8 h-8 flex items-center justify-center rounded border', addButtonBottomClassName), disabled: disabled || currentQuantity >= maxQuantity, children: "+" })] })) : shouldShowAddButton() ? (
|
|
167
173
|
// Add button
|
|
@@ -37,7 +37,7 @@ export type ProductProps = {
|
|
|
37
37
|
};
|
|
38
38
|
manufacturerClassName?: {
|
|
39
39
|
heading?: string;
|
|
40
|
-
|
|
40
|
+
name?: string;
|
|
41
41
|
description?: string;
|
|
42
42
|
image?: string;
|
|
43
43
|
};
|
|
@@ -56,6 +56,8 @@ export type ProductProps = {
|
|
|
56
56
|
currentVariationId: string;
|
|
57
57
|
cartMode?: 'full' | 'add-only';
|
|
58
58
|
onOpenBasket?: () => void;
|
|
59
|
+
addToCartButtonCustomAction?: () => void | Promise<void>;
|
|
60
|
+
customActionButtonText?: string;
|
|
59
61
|
showWishlistButton?: boolean;
|
|
60
62
|
isInWishlist?: boolean;
|
|
61
63
|
onWishlistToggle?: (product: Product) => void;
|
|
@@ -105,4 +107,4 @@ export type ProductProps = {
|
|
|
105
107
|
volumePriceClassName?: string;
|
|
106
108
|
volumeQuantUnitClassName?: string;
|
|
107
109
|
};
|
|
108
|
-
export declare const ProductDetail: ({ name, price, href, discountPercent, description, detail, buttonText, className, specification, conversionToOtherUnit, buttonClassName, descriptionClassName, specificationClassName, manufacturerClassName, product, currentQuantity, onQuantityChange, maxQuantity, disabled, badges, showVariations, variations, currentVariationId, cartMode, onOpenBasket, showWishlistButton, isInWishlist, onWishlistToggle, enableMultipleWishlists, wishlists, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, productWishlistIds, isWishlistPending, isLogged, onWishlistTextClick, showWishlistDropdown, onCloseWishlistDropdown, onAddToSpecificWishlist, onRemoveFromSpecificWishlist, onCreateNewWishlistFromDropdown, onShippingOptionsClick, isWatchdogEnabled, onWatchdogClick, onDemandClick, translations, locale, quantUnit, mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions, volumePriceFormatOptions, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, volumePriceClassName, volumeQuantUnitClassName, }: ProductProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
110
|
+
export declare const ProductDetail: ({ name, price, href, discountPercent, description, detail, buttonText, className, specification, conversionToOtherUnit, buttonClassName, descriptionClassName, specificationClassName, manufacturerClassName, product, currentQuantity, onQuantityChange, maxQuantity, disabled, badges, showVariations, variations, currentVariationId, cartMode, onOpenBasket, addToCartButtonCustomAction, customActionButtonText, showWishlistButton, isInWishlist, onWishlistToggle, enableMultipleWishlists, wishlists, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, productWishlistIds, isWishlistPending, isLogged, onWishlistTextClick, showWishlistDropdown, onCloseWishlistDropdown, onAddToSpecificWishlist, onRemoveFromSpecificWishlist, onCreateNewWishlistFromDropdown, onShippingOptionsClick, isWatchdogEnabled, onWatchdogClick, onDemandClick, translations, locale, quantUnit, mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions, volumePriceFormatOptions, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, volumePriceClassName, volumeQuantUnitClassName, }: ProductProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
|
|
4
|
+
import parseHTML from 'html-react-parser';
|
|
4
5
|
import { useRef, useState } from 'react';
|
|
5
|
-
import { formatPercentage, getUnitName } from '../../../utils/generalHelperFunction';
|
|
6
|
+
import { convertToOtherUnit, formatPercentage, getUnitName, } from '../../../utils/generalHelperFunction';
|
|
6
7
|
import { buildClassesByJoining } from '../../../utils/StyleHelper';
|
|
7
8
|
import Button from '../../Base/button/Button';
|
|
8
9
|
import Heading from '../../Base/heading/Heading';
|
|
@@ -10,8 +11,6 @@ import { Price } from '../../Base/price/Price';
|
|
|
10
11
|
import { HorizontalTab } from '../../Web/tabs/HorizontalTab';
|
|
11
12
|
import WishlistDropdown from '../wishlist/WishlistDropdown';
|
|
12
13
|
import ProductDetailGallery from './ProductDetailGallery';
|
|
13
|
-
import parseHTML from 'html-react-parser';
|
|
14
|
-
import { convertToOtherUnit } from '../../../utils/generalHelperFunction';
|
|
15
14
|
export const ProductDetail = ({ name = '', price = 0, href = '', discountPercent = 0, description = '', detail = { tabs: [] }, buttonText = 'Add to bag', className = '', specification, conversionToOtherUnit = false,
|
|
16
15
|
// classnames
|
|
17
16
|
buttonClassName = '', descriptionClassName = '', specificationClassName = {
|
|
@@ -20,12 +19,12 @@ buttonClassName = '', descriptionClassName = '', specificationClassName = {
|
|
|
20
19
|
value: '',
|
|
21
20
|
}, manufacturerClassName = {
|
|
22
21
|
heading: '',
|
|
23
|
-
|
|
22
|
+
name: '',
|
|
24
23
|
description: '',
|
|
25
24
|
image: '',
|
|
26
25
|
},
|
|
27
26
|
// Cart props
|
|
28
|
-
product, currentQuantity = 0, onQuantityChange, maxQuantity = 99, disabled = false, badges = [], showVariations = false, variations = [], currentVariationId, cartMode = 'full', onOpenBasket,
|
|
27
|
+
product, currentQuantity = 0, onQuantityChange, maxQuantity = 99, disabled = false, badges = [], showVariations = false, variations = [], currentVariationId, cartMode = 'full', onOpenBasket, addToCartButtonCustomAction, customActionButtonText,
|
|
29
28
|
// Wishlist props
|
|
30
29
|
showWishlistButton = false, isInWishlist = false, onWishlistToggle, enableMultipleWishlists = false, wishlists = [], onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, productWishlistIds = [], isWishlistPending = false, isLogged = false, onWishlistTextClick,
|
|
31
30
|
// Wishlist dropdown props
|
|
@@ -46,9 +45,7 @@ onShippingOptionsClick, isWatchdogEnabled = false, onWatchdogClick, onDemandClic
|
|
|
46
45
|
detail: 'Detaily',
|
|
47
46
|
}, locale, quantUnit,
|
|
48
47
|
// NOVÉ PRICE API
|
|
49
|
-
mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions, volumePriceFormatOptions, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, volumePriceClassName, volumeQuantUnitClassName,
|
|
50
|
-
// translation
|
|
51
|
-
}) => {
|
|
48
|
+
mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions, volumePriceFormatOptions, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, volumePriceClassName, volumeQuantUnitClassName, }) => {
|
|
52
49
|
const wishlistButtonRef = useRef(null);
|
|
53
50
|
// Cart functions - updated logic based on cartMode
|
|
54
51
|
const shouldShowQuantityControls = () => {
|
|
@@ -65,6 +62,11 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
|
|
|
65
62
|
};
|
|
66
63
|
const handleAddToCart = async (event) => {
|
|
67
64
|
event?.preventDefault();
|
|
65
|
+
// PRIORITA: Custom action > štandardné správanie
|
|
66
|
+
if (addToCartButtonCustomAction) {
|
|
67
|
+
await addToCartButtonCustomAction();
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
68
70
|
if (!onQuantityChange || !product)
|
|
69
71
|
return;
|
|
70
72
|
if (cartMode === 'add-only') {
|
|
@@ -112,7 +114,7 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
|
|
|
112
114
|
}
|
|
113
115
|
return (_jsx("div", { className: buildClassesByJoining('bg-white', className), children: _jsxs("div", { className: "py-4", children: [_jsxs("div", { className: "lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8 ", children: [_jsx(ProductDetailGallery, { product: product, showWishlistButton: showWishlistButton, enableMultipleWishlists: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, isWishlistPending: isWishlistPending, onWishlistToggle: onWishlistToggle || (() => { }), onAddToWishlist: onAddToWishlist || (() => { }), onRemoveFromWishlist: onRemoveFromWishlist || (() => { }), onCreateWishlist: onCreateWishlist || (() => { }) }), _jsxs("div", { className: "mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0", children: [badges && badges.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: badges.map((badge, index) => (_jsx("span", { className: badge.color
|
|
114
116
|
? `${badge.color} inline-flex items-center px-2 py-1 text-xs font-medium text-w`
|
|
115
|
-
: 'bg-gray-200 text-gray-800 px-2 py-1 text-xs font-medium', children: badge.text }, index))) })), _jsx(Heading, { className: "mt-8 font-extralight", level: 1, children: name }), _jsxs("div", { className: "flex gap-4", children: [_jsxs("span", { className: "text-sm text-gray-500", children: [translations.sku, ": ", product.sku] }), _jsxs("span", { className: "text-sm text-gray-500", children: [translations.EAN, ": ", product.ean] })] }), _jsxs("div", { className: "mt-6", children: [_jsx(Heading, { level: 3, className: "sr-only", children: "Description" }), _jsx("div", { dangerouslySetInnerHTML: { __html: description }, className: buildClassesByJoining(
|
|
117
|
+
: 'bg-gray-200 text-gray-800 px-2 py-1 text-xs font-medium', children: badge.text }, index))) })), _jsx(Heading, { className: "mt-8 font-extralight", level: 1, children: name }), _jsxs("div", { className: "flex gap-4", children: [_jsxs("span", { className: "text-sm text-gray-500", children: [translations.sku, ": ", product.sku] }), _jsxs("span", { className: "text-sm text-gray-500", children: [translations.EAN, ": ", product.ean] })] }), _jsxs("div", { className: "mt-6", children: [_jsx(Heading, { level: 3, className: "sr-only", children: "Description" }), _jsx("div", { dangerouslySetInnerHTML: { __html: description }, className: buildClassesByJoining('space-y-6 text-base text-gray-700', descriptionClassName) })] }), _jsxs("form", { className: "mt-6", children: [showVariations && (_jsxs("div", { children: [_jsx(Heading, { level: 3, className: "text-gray-600 mb-2", children: "Variace" }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 2xl:grid-cols-2 gap-3", children: visibleVariations.map((variation) => (_jsxs(Button, { asLink: true, unstyled: true, href: variation.href, "aria-label": variation.title, className: buildClassesByJoining('w-full border p-4 flex justify-between items-center shadow-sm', currentVariationId == variation.id
|
|
116
118
|
? 'border-[var(--primary)]'
|
|
117
119
|
: 'border-gray-200', 'cursor-pointer transition-all duration-150 hover:border-[var(--primary)] hover:shadow-md'), children: [_jsxs("div", { className: "flex flex-col justify-between gap-1", children: [_jsx("span", { className: "font-medium text-base capitalize", children: variation.title }), _jsx("span", { className: (variation.stock ?? 0) > 0
|
|
118
120
|
? 'text-green-600 text-sm'
|
|
@@ -121,7 +123,9 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
|
|
|
121
123
|
: 'Není skladem' })] }), _jsxs("div", { className: "flex flex-col justify-center items-end text-right gap-1", children: [_jsxs("span", { className: "text-xs text-gray-500", children: ["K\u00F3d: ", variation.sku] }), _jsxs("span", { className: "text-xs text-gray-500", children: ["EAN: ", variation.ean] }), _jsx(Price, { value: variation.price, locale: locale, options: variationPriceFormatOptions ||
|
|
122
124
|
mainPriceFormatOptions, className: buildClassesByJoining('font-semibold text-lg', variationPriceClassName) })] })] }, variation.id))) }), sortedVariations.length > numberOfVisibleVariations && (_jsx("button", { type: "button", onClick: () => setShowAll(!showAll), className: "mt-3 text-sm font-medium text-green-700 hover:underline", children: showAll
|
|
123
125
|
? 'Zobrazit méně variant'
|
|
124
|
-
: 'Zobrazit více variant' }))] })), _jsxs("div", { className: "mt-3", children: [_jsx(Heading, { level: 2, className: "sr-only", children: "Product information" }), _jsxs("div", { children: [_jsx(Price, { value: price, locale: locale, options: mainPriceFormatOptions, className: buildClassesByJoining('text-3xl tracking-tight font-semibold text-[var(--primary)]', mainPriceClassName), quantUnit: quantUnit, quantUnitClassName: buildClassesByJoining('text-3xl tracking-tight font-semibold text-black', mainQuantUnitClassName) }), conversionToOtherUnit &&
|
|
126
|
+
: 'Zobrazit více variant' }))] })), _jsxs("div", { className: "mt-3", children: [_jsx(Heading, { level: 2, className: "sr-only", children: "Product information" }), _jsxs("div", { children: [_jsx(Price, { value: price, locale: locale, options: mainPriceFormatOptions, className: buildClassesByJoining('text-3xl tracking-tight font-semibold text-[var(--primary)]', mainPriceClassName), quantUnit: quantUnit, quantUnitClassName: buildClassesByJoining('text-3xl tracking-tight font-semibold text-black', mainQuantUnitClassName) }), conversionToOtherUnit &&
|
|
127
|
+
product.volume_unit &&
|
|
128
|
+
product.volume_number && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Price, { value: convertToOtherUnit(price, product.volume_number, product.volume_unit), locale: locale, options: volumePriceFormatOptions, className: buildClassesByJoining('text-xs tracking-tight', volumePriceClassName), quantUnitClassName: buildClassesByJoining('text-xs tracking-tight', volumeQuantUnitClassName) }), "/ ", getUnitName(product.volume_unit)] })), product?.discountPercent != null &&
|
|
125
129
|
product.discountPercent > 0 && (_jsxs("p", { className: "text-sm text-gray-500", children: [translations.recommendedPrice, ' ', _jsx(Price, { value: price / (1 - product.discountPercent / 100), locale: locale, options: discountPriceFormatOptions ||
|
|
126
130
|
mainPriceFormatOptions, className: buildClassesByJoining('font-bold', discountPriceClassName), quantUnit: quantUnit, quantUnitClassName: buildClassesByJoining('font-bold', discountQuantUnitClassName), containerClassName: "inline-flex items-baseline gap-1" }), ' ', _jsx("span", { className: "text-red-500", children: discountPercent
|
|
127
131
|
? `-${formatPercentage(discountPercent)}`
|
|
@@ -139,13 +143,12 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
|
|
|
139
143
|
: 'bg-primary hover:bg-green-600'} text-white disabled:opacity-50 disabled:bg-black-300 disabled:cursor-not-allowed shadow-sm transition-all duration-200`, "aria-label": "Zv\u00FD\u0161i\u0165 mno\u017Estvo", children: _jsx(PlusIcon, { className: "h-5 w-5" }) })] }) })) })] }) })] }), _jsxs("section", { "aria-labelledby": "details-heading", className: "mt-8", children: [_jsx(Heading, { level: 2, id: "details-heading", className: "sr-only", children: "Additional details" }), _jsx("div", { className: "mt-3", children: price > 1000 ? (_jsx("p", { className: "text-sm text-gray-800", children: translations.shippingDetailFree })) : (_jsx("p", { className: "text-sm text-gray-800", children: translations.shippingDetailFee })) }), _jsx("div", { className: "mt-8", children: _jsxs("div", { className: "border-t py-5 border-gray-200 flex flex-col sm:flex-row flex-wrap gap-6 text-gray-600", children: [isWatchdogEnabled && (_jsxs(Button, { unstyled: true, className: "flex gap-2", onClick: onWatchdogClick, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-5 text-[var(--primary)]", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" }) }), _jsx("span", { className: "underline hover:no-underline", children: translations.watchDog })] })), _jsxs(Button, { unstyled: true, className: "flex gap-2", onClick: onDemandClick, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-5 text-[var(--primary)]", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" }) }), _jsx("span", { className: "underline hover:no-underline", children: translations.question })] }), _jsxs(Button, { unstyled: true, className: "flex gap-2", onClick: onShippingOptionsClick, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-5 text-[var(--primary)]", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" }) }), _jsx("span", { className: "underline hover:no-underline cursor-pointer", children: translations.optionOfShipping })] }), isLogged && (_jsxs("div", { className: "relative", children: [_jsxs("button", { ref: wishlistButtonRef, className: "flex gap-2 text-left hover:text-green-600 transition-colors", onClick: onWishlistTextClick, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-5 text-[var(--primary)]", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" }) }), _jsx("span", { className: "underline hover:no-underline", children: translations.addToWishlist })] }), showWishlistDropdown && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: onCloseWishlistDropdown }), _jsx("div", { className: "absolute top-full left-52 mt-1 z-50", children: _jsx(WishlistDropdown, { show: true, wishlists: wishlists || [], productWishlistIds: productWishlistIds || [], isWishlistPending: isWishlistPending, onAddToWishlist: onAddToSpecificWishlist ||
|
|
140
144
|
(() => { }), onRemoveFromWishlist: onRemoveFromSpecificWishlist ||
|
|
141
145
|
(() => { }), onCreateNewWishlist: onCreateNewWishlistFromDropdown ||
|
|
142
|
-
(() => { }), onClose: onCloseWishlistDropdown, isModal: false }) })] }))] }))] }) })] }), specification && specification.length > 0 &&
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
})] }), product?.field_manufacturer && (_jsxs("section", { className: "mt-10", children: [_jsx(Heading, { level: 3, className: manufacturerClassName.heading, children: translations.manufacturer }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: manufacturerClassName.title, children: product.field_manufacturer?.title }), _jsx("div", { className: manufacturerClassName.description, children: parseHTML(product.field_manufacturer?.body) }), _jsx("img", { src: product.field_manufacturer?.field_image[0]?.href, alt: product.field_manufacturer?.field_image[0]?.alt, className: buildClassesByJoining('h-48 object-contain', manufacturerClassName.image) })] })] }))] })] }), detail && detail.tabs.length > 0 && (_jsx("section", { className: "mt-10", children: _jsx(HorizontalTab, { ...detail }) }))] }) }));
|
|
146
|
+
(() => { }), onClose: onCloseWishlistDropdown, isModal: false }) })] }))] }))] }) })] }), specification && specification.length > 0 && (_jsxs("section", { className: "mt-10", children: [_jsx(Heading, { level: 3, className: specificationClassName.heading, children: translations.specification }), specification.map((item, index) => {
|
|
147
|
+
if ('separator' in item) {
|
|
148
|
+
return _jsx("div", { className: "h-4" }, index);
|
|
149
|
+
}
|
|
150
|
+
const key = Object.keys(item)[0];
|
|
151
|
+
const value = item[key];
|
|
152
|
+
return (_jsx("div", { className: "flex flex-col gap-2", children: _jsxs("p", { children: [_jsxs("span", { className: specificationClassName.key, children: [key, ":"] }), ' ', _jsx("span", { className: specificationClassName.value, children: value })] }) }, index));
|
|
153
|
+
})] })), product?.field_manufacturer && (_jsxs("section", { className: "mt-10", children: [_jsx(Heading, { level: 3, className: manufacturerClassName.heading, children: translations.manufacturer }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: manufacturerClassName.name, children: product.field_manufacturer?.name }), _jsx("div", { className: manufacturerClassName.description, children: parseHTML(product.field_manufacturer?.description) }), _jsx("img", { src: product.field_manufacturer?.field_image[0]?.href, alt: product.field_manufacturer?.field_image[0]?.alt, className: buildClassesByJoining('h-48 object-contain', manufacturerClassName.image) })] })] }))] })] }), detail && detail.tabs.length > 0 && (_jsx("section", { className: "mt-10", children: _jsx(HorizontalTab, { ...detail }) }))] }) }));
|
|
151
154
|
};
|
|
@@ -31,6 +31,6 @@ const ProductDetailGallery = ({ product, showWishlistButton, enableMultipleWishl
|
|
|
31
31
|
onCreateWishlist(name, product);
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
|
-
return (_jsxs(_Fragment, { children: [_jsxs(TabGroup, { className: "flex flex-col-reverse items-center", children: [_jsx("div", { className: "mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none", children: _jsx(TabList, { className: "grid grid-cols-4 gap-6", children: product.
|
|
34
|
+
return (_jsxs(_Fragment, { children: [_jsxs(TabGroup, { className: "flex flex-col-reverse items-center", children: [_jsx("div", { className: "mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none", children: _jsx(TabList, { className: "grid grid-cols-4 gap-6", children: product.all_images.map((image, i) => (_jsxs(Tab, { className: "group relative flex h-24 cursor-pointer items-center justify-center bg-white text-sm font-medium text-gray-900 uppercase hover:bg-gray-50 focus:ring-3 focus:ring-[var(--primary)]/50 focus:ring-offset-4 focus:outline-hidden", children: [_jsx("span", { className: "sr-only", children: image.alt }), _jsx("span", { className: "absolute inset-0 overflow-hidden", children: _jsx("img", { src: image.href, alt: "", className: "size-full object-contain" }) }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 ring-2 ring-transparent ring-offset-2 group-data-selected:ring-[var(--primary)]" })] }, i))) }) }), _jsxs(TabPanels, { className: "relative w-full", children: [product.all_images.map((image, i) => (_jsx(TabPanel, { className: "relative", children: _jsx("img", { src: image.href, alt: image.alt, className: "aspect-[7/5] w-full object-contain border-1 border-gray-200 cursor-pointer hover:opacity-90 transition-opacity", onClick: () => openGallery(i) }) }, i))), showWishlistButton && (_jsx("div", { className: "absolute top-3 right-3 z-10", children: _jsx(LikeButton, { show: true, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle, wishlistButtonClassName: "bg-white/90 backdrop-blur-sm border border-gray-200 shadow-lg hover:shadow-xl" }) }))] })] }), _jsx(ImageGalleryModal, { images: product.all_images, isOpen: isGalleryOpen, initialIndex: galleryInitialIndex, onClose: closeGallery })] }));
|
|
35
35
|
};
|
|
36
36
|
export default ProductDetailGallery;
|
|
@@ -91,7 +91,7 @@ function SelectFieldComponent({ id, label, isRequired, srOnlyLabel, selectFieldT
|
|
|
91
91
|
}),
|
|
92
92
|
dropdownIndicator: (base, state) => ({
|
|
93
93
|
...base,
|
|
94
|
-
opacity: state.isFocused || state.selectProps.menuIsOpen ? 1 : 0.
|
|
94
|
+
opacity: state.isFocused || state.selectProps.menuIsOpen ? 1 : 0.7,
|
|
95
95
|
}),
|
|
96
96
|
singleValue: (base) => {
|
|
97
97
|
if (typeSelect !== 'single-badges')
|
package/package.json
CHANGED
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@q2devel/q2-storybook",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"main": "dist/index.js",
|
|
5
|
-
"module": "dist/index.js",
|
|
6
|
-
"types": "dist/index.d.ts",
|
|
7
|
-
"exports": {
|
|
8
|
-
".": {
|
|
9
|
-
"types": "./dist/index.d.ts",
|
|
10
|
-
"default": "./dist/index.js"
|
|
11
|
-
},
|
|
12
|
-
"./styles": "./dist/style.css"
|
|
13
|
-
},
|
|
14
|
-
"files": [
|
|
15
|
-
"dist"
|
|
16
|
-
],
|
|
17
|
-
"scripts": {
|
|
18
|
-
"test": "echo \"Error: no test specified\" && exit 1",
|
|
19
|
-
"storybook": "storybook dev -p 6006",
|
|
20
|
-
"build-storybook": "storybook build",
|
|
21
|
-
"build": "tsc && npm run build:css",
|
|
22
|
-
"build:css": "postcss src/global.css -o dist/style.css",
|
|
23
|
-
"prepublishOnly": "npm version patch && npm run build",
|
|
24
|
-
"publish:patch": "npm publish && npm run build",
|
|
25
|
-
"publish:minor": "npm version minor && npm run build && npm publish",
|
|
26
|
-
"publish:major": "npm version major && npm run build && npm publish",
|
|
27
|
-
"chromatic": "chromatic --project-token=chpt_371d8e65041a19e "
|
|
28
|
-
},
|
|
29
|
-
"keywords": [],
|
|
30
|
-
"author": "Q2",
|
|
31
|
-
"license": "ISC",
|
|
32
|
-
"description": "Komponenty nebo konfigurace pro storybook",
|
|
33
|
-
"devDependencies": {
|
|
34
|
-
"@storybook/addon-actions": "^8.6.14",
|
|
35
|
-
"@storybook/addon-essentials": "^8.6.14",
|
|
36
|
-
"@storybook/addon-interactions": "^8.6.14",
|
|
37
|
-
"@storybook/addon-links": "^8.6.14",
|
|
38
|
-
"@storybook/addon-onboarding": "^8.6.14",
|
|
39
|
-
"@storybook/addon-viewport": "^8.6.14",
|
|
40
|
-
"@storybook/blocks": "^8.6.14",
|
|
41
|
-
"@storybook/nextjs": "^8.6.14",
|
|
42
|
-
"@storybook/react": "^8.6.14",
|
|
43
|
-
"@storybook/test": "^8.6.14",
|
|
44
|
-
"@tailwindcss/postcss": "^4.1.8",
|
|
45
|
-
"@types/body-parser": "^1.19.6",
|
|
46
|
-
"@types/classnames": "^2.3.0",
|
|
47
|
-
"@types/express": "^5.0.3",
|
|
48
|
-
"@types/node": "^22.14.1",
|
|
49
|
-
"@types/react": "^19.1.2",
|
|
50
|
-
"@types/react-dom": "^19.1.2",
|
|
51
|
-
"autoprefixer": "^10.4.21",
|
|
52
|
-
"chromatic": "^12.0.0",
|
|
53
|
-
"cssnano": "^7.0.7",
|
|
54
|
-
"postcss": "^8.5.4",
|
|
55
|
-
"postcss-cli": "^11.0.1",
|
|
56
|
-
"react": "^19.0.0",
|
|
57
|
-
"react-dom": "^19.0.0",
|
|
58
|
-
"rollup-plugin-postcss": "^4.0.2",
|
|
59
|
-
"storybook": "^8.6.14",
|
|
60
|
-
"tailwindcss": "^4.1.8",
|
|
61
|
-
"typescript": "^5.8.3"
|
|
62
|
-
},
|
|
63
|
-
"peerDependencies": {
|
|
64
|
-
"react": "^19.0.0",
|
|
65
|
-
"react-dom": "^19.0.0"
|
|
66
|
-
},
|
|
67
|
-
"dependencies": {
|
|
68
|
-
"@headlessui/react": "^2.2.2",
|
|
69
|
-
"@heroicons/react": "^2.2.0",
|
|
70
|
-
"@q2devel/q2-core": "^1.0.
|
|
71
|
-
"@tanstack/react-query": "^5.76.1",
|
|
72
|
-
"axios": "^1.9.0",
|
|
73
|
-
"body-parser": "^2.2.0",
|
|
74
|
-
"classnames": "^2.5.1",
|
|
75
|
-
"express": "^5.1.0",
|
|
76
|
-
"html-react-parser": "^5.2.3",
|
|
77
|
-
"react-select": "^5.10.1",
|
|
78
|
-
"tailwind-merge": "^3.2.0",
|
|
79
|
-
"zod": "^4.0.14"
|
|
80
|
-
},
|
|
81
|
-
"overrides": {
|
|
82
|
-
"storybook": "$storybook"
|
|
83
|
-
}
|
|
84
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@q2devel/q2-storybook",
|
|
3
|
+
"version": "1.0.139",
|
|
4
|
+
"main": "dist/index.js",
|
|
5
|
+
"module": "dist/index.js",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"default": "./dist/index.js"
|
|
11
|
+
},
|
|
12
|
+
"./styles": "./dist/style.css"
|
|
13
|
+
},
|
|
14
|
+
"files": [
|
|
15
|
+
"dist"
|
|
16
|
+
],
|
|
17
|
+
"scripts": {
|
|
18
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
|
19
|
+
"storybook": "storybook dev -p 6006",
|
|
20
|
+
"build-storybook": "storybook build",
|
|
21
|
+
"build": "tsc && npm run build:css",
|
|
22
|
+
"build:css": "postcss src/global.css -o dist/style.css",
|
|
23
|
+
"prepublishOnly": "npm version patch && npm run build",
|
|
24
|
+
"publish:patch": "npm publish && npm run build",
|
|
25
|
+
"publish:minor": "npm version minor && npm run build && npm publish",
|
|
26
|
+
"publish:major": "npm version major && npm run build && npm publish",
|
|
27
|
+
"chromatic": "chromatic --project-token=chpt_371d8e65041a19e "
|
|
28
|
+
},
|
|
29
|
+
"keywords": [],
|
|
30
|
+
"author": "Q2",
|
|
31
|
+
"license": "ISC",
|
|
32
|
+
"description": "Komponenty nebo konfigurace pro storybook",
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@storybook/addon-actions": "^8.6.14",
|
|
35
|
+
"@storybook/addon-essentials": "^8.6.14",
|
|
36
|
+
"@storybook/addon-interactions": "^8.6.14",
|
|
37
|
+
"@storybook/addon-links": "^8.6.14",
|
|
38
|
+
"@storybook/addon-onboarding": "^8.6.14",
|
|
39
|
+
"@storybook/addon-viewport": "^8.6.14",
|
|
40
|
+
"@storybook/blocks": "^8.6.14",
|
|
41
|
+
"@storybook/nextjs": "^8.6.14",
|
|
42
|
+
"@storybook/react": "^8.6.14",
|
|
43
|
+
"@storybook/test": "^8.6.14",
|
|
44
|
+
"@tailwindcss/postcss": "^4.1.8",
|
|
45
|
+
"@types/body-parser": "^1.19.6",
|
|
46
|
+
"@types/classnames": "^2.3.0",
|
|
47
|
+
"@types/express": "^5.0.3",
|
|
48
|
+
"@types/node": "^22.14.1",
|
|
49
|
+
"@types/react": "^19.1.2",
|
|
50
|
+
"@types/react-dom": "^19.1.2",
|
|
51
|
+
"autoprefixer": "^10.4.21",
|
|
52
|
+
"chromatic": "^12.0.0",
|
|
53
|
+
"cssnano": "^7.0.7",
|
|
54
|
+
"postcss": "^8.5.4",
|
|
55
|
+
"postcss-cli": "^11.0.1",
|
|
56
|
+
"react": "^19.0.0",
|
|
57
|
+
"react-dom": "^19.0.0",
|
|
58
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
59
|
+
"storybook": "^8.6.14",
|
|
60
|
+
"tailwindcss": "^4.1.8",
|
|
61
|
+
"typescript": "^5.8.3"
|
|
62
|
+
},
|
|
63
|
+
"peerDependencies": {
|
|
64
|
+
"react": "^19.0.0",
|
|
65
|
+
"react-dom": "^19.0.0"
|
|
66
|
+
},
|
|
67
|
+
"dependencies": {
|
|
68
|
+
"@headlessui/react": "^2.2.2",
|
|
69
|
+
"@heroicons/react": "^2.2.0",
|
|
70
|
+
"@q2devel/q2-core": "^1.0.51",
|
|
71
|
+
"@tanstack/react-query": "^5.76.1",
|
|
72
|
+
"axios": "^1.9.0",
|
|
73
|
+
"body-parser": "^2.2.0",
|
|
74
|
+
"classnames": "^2.5.1",
|
|
75
|
+
"express": "^5.1.0",
|
|
76
|
+
"html-react-parser": "^5.2.3",
|
|
77
|
+
"react-select": "^5.10.1",
|
|
78
|
+
"tailwind-merge": "^3.2.0",
|
|
79
|
+
"zod": "^4.0.14"
|
|
80
|
+
},
|
|
81
|
+
"overrides": {
|
|
82
|
+
"storybook": "$storybook"
|
|
83
|
+
}
|
|
84
|
+
}
|