@q2devel/q2-storybook 1.0.142 → 1.0.144
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.d.ts +22 -1
- package/dist/components/Ecommerce/basket-dialog/BasketDialog.js +13 -12
- package/dist/components/Ecommerce/basket-overview/BasketOverview.d.ts +32 -1
- package/dist/components/Ecommerce/basket-overview/BasketOverview.js +8 -7
- package/dist/components/Ecommerce/product-detail/ProductDetail.d.ts +72 -1
- package/dist/components/Ecommerce/product-detail/ProductDetail.js +97 -38
- package/dist/components/MIKS/ScheduleDetail/ScheduleDetail.d.ts +28 -0
- package/dist/components/MIKS/ScheduleDetail/ScheduleDetail.js +18 -0
- package/dist/components/MIKS/date-carousel/DateCarousel.d.ts +19 -0
- package/dist/components/MIKS/date-carousel/DateCarousel.js +251 -0
- package/dist/components/MIKS/event-card/EventCard.d.ts +32 -0
- package/dist/components/MIKS/event-card/EventCard.js +18 -0
- package/dist/components/MIKS/filters/FilterContainer.d.ts +12 -0
- package/dist/components/MIKS/filters/FilterContainer.js +9 -0
- package/dist/components/MIKS/filters/FilterGrid.d.ts +14 -0
- package/dist/components/MIKS/filters/FilterGrid.js +16 -0
- package/dist/components/MIKS/filters/FilterType.d.ts +19 -0
- package/dist/components/MIKS/filters/FilterType.js +42 -0
- package/dist/components/MIKS/filters/FilterWhen.d.ts +23 -0
- package/dist/components/MIKS/filters/FilterWhen.js +94 -0
- package/dist/components/MIKS/filters/FilterWhere.d.ts +19 -0
- package/dist/components/MIKS/filters/FilterWhere.js +39 -0
- package/dist/components/MIKS/filters/index.d.ts +7 -0
- package/dist/components/MIKS/filters/index.js +6 -0
- package/dist/components/MIKS/filters/types.d.ts +35 -0
- package/dist/components/MIKS/filters/types.js +4 -0
- package/dist/components/MIKS/filters/useFilters.d.ts +15 -0
- package/dist/components/MIKS/filters/useFilters.js +38 -0
- package/dist/components/MIKS/footer/Footer.d.ts +39 -0
- package/dist/components/MIKS/footer/Footer.js +18 -0
- package/dist/components/MIKS/index.d.ts +21 -0
- package/dist/components/MIKS/index.js +18 -0
- package/dist/components/MIKS/movie-detail/MovieDetail.d.ts +61 -0
- package/dist/components/MIKS/movie-detail/MovieDetail.js +38 -0
- package/dist/components/MIKS/navbar/NavBar.d.ts +40 -0
- package/dist/components/MIKS/navbar/NavBar.js +12 -0
- package/dist/components/MIKS/theatre-event/TheatreEvent.d.ts +33 -0
- package/dist/components/MIKS/theatre-event/TheatreEvent.js +20 -0
- package/dist/components/Web/ScheduleDetail/ScheduleDetail.d.ts +28 -0
- package/dist/components/Web/ScheduleDetail/ScheduleDetail.js +18 -0
- package/dist/components/Web/dynamic-grid/DynamicLayout.js +4 -4
- package/dist/components/Web/event-card/EventCard.d.ts +30 -0
- package/dist/components/Web/event-card/EventCard.js +18 -0
- package/dist/components/Web/event-card-horizontal/EventCardHorizontal.d.ts +30 -0
- package/dist/components/Web/event-card-horizontal/EventCardHorizontal.js +24 -0
- package/dist/components/Web/tabs/HorizontalTab.d.ts +2 -1
- package/dist/components/Web/tabs/HorizontalTab.js +5 -4
- package/dist/index.d.ts +14 -0
- package/dist/index.js +8 -0
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -40,5 +40,26 @@ export type BasketDialogProps = {
|
|
|
40
40
|
total: string;
|
|
41
41
|
shippingAndTax: string;
|
|
42
42
|
};
|
|
43
|
+
classNames?: {
|
|
44
|
+
container?: string;
|
|
45
|
+
title?: string;
|
|
46
|
+
checkoutButton?: string;
|
|
47
|
+
continueShoppingButton?: string;
|
|
48
|
+
quantityControls?: string;
|
|
49
|
+
removeButton?: string;
|
|
50
|
+
emptyBasket?: string;
|
|
51
|
+
list?: string;
|
|
52
|
+
image?: string;
|
|
53
|
+
temporaryRow?: string;
|
|
54
|
+
spinner?: string;
|
|
55
|
+
heading?: string;
|
|
56
|
+
price?: string;
|
|
57
|
+
amount?: string;
|
|
58
|
+
addingIndicator?: string;
|
|
59
|
+
addingIndicatorText?: string;
|
|
60
|
+
total?: string;
|
|
61
|
+
shippingAndTax?: string;
|
|
62
|
+
quantity?: string;
|
|
63
|
+
};
|
|
43
64
|
};
|
|
44
|
-
export declare const BasketDialog: ({ isOpen, onClose, products, subtotal, onQuantityChange, onRemoveProduct, onCheckout, onContinueShopping, productLink, title, checkoutText, checkoutTextClass, continueShoppingText, showShippingNote, showQuantityControls, pendingUpdates, processingItems, isAddingToCart, totalItems, locale, productPriceOptions, totalPriceOptions, translations, }: BasketDialogProps) => import("react/jsx-runtime").JSX.Element;
|
|
65
|
+
export declare const BasketDialog: ({ isOpen, onClose, products, subtotal, onQuantityChange, onRemoveProduct, onCheckout, onContinueShopping, productLink, title, checkoutText, checkoutTextClass, continueShoppingText, showShippingNote, showQuantityControls, pendingUpdates, processingItems, isAddingToCart, totalItems, locale, productPriceOptions, totalPriceOptions, translations, classNames, }: BasketDialogProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -7,7 +7,8 @@ import { useEffect, useRef, useState } from 'react';
|
|
|
7
7
|
import Heading from '../../../components/Base/heading/Heading';
|
|
8
8
|
import Button from '../../../components/Base/button/Button';
|
|
9
9
|
import { Price } from '../../../components/Base/price/Price';
|
|
10
|
-
|
|
10
|
+
import { buildClassesByJoining } from '../../../utils/StyleHelper';
|
|
11
|
+
export const BasketDialog = ({ isOpen, onClose, products, subtotal, onQuantityChange, onRemoveProduct, onCheckout, onContinueShopping, productLink, title = 'Váš košík', checkoutText = 'Pokračovat k objednávce', checkoutTextClass = 'button-brand w-full', continueShoppingText = 'Pokračovat v nákupu', showShippingNote = true, showQuantityControls = true, pendingUpdates = {}, processingItems = {}, isAddingToCart = false, totalItems, locale, productPriceOptions, totalPriceOptions, translations, classNames, }) => {
|
|
11
12
|
const [shouldShowAddingIndicator, setShouldShowAddingIndicator] = useState(false);
|
|
12
13
|
const initialTotalItems = useRef(null);
|
|
13
14
|
useEffect(() => {
|
|
@@ -50,7 +51,7 @@ export const BasketDialog = ({ isOpen, onClose, products, subtotal, onQuantityCh
|
|
|
50
51
|
}
|
|
51
52
|
}
|
|
52
53
|
};
|
|
53
|
-
return (_jsxs(Dialog, { open: isOpen, onClose: onClose, className:
|
|
54
|
+
return (_jsxs(Dialog, { open: isOpen, onClose: onClose, className: buildClassesByJoining('relative z-110', classNames?.container), 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: buildClassesByJoining('text-lg font-medium text-gray-900', classNames?.title), 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: buildClassesByJoining('py-6 text-center text-gray-500', classNames?.emptyBasket), children: translations.emptyBasket })) : (_jsxs("ul", { role: "list", className: buildClassesByJoining('-my-6 divide-y divide-gray-200', classNames?.list), children: [products.map((product) => {
|
|
54
55
|
const productKey = product.variation_uuid;
|
|
55
56
|
const displayQuantity = productKey in pendingUpdates
|
|
56
57
|
? pendingUpdates[productKey]
|
|
@@ -66,22 +67,22 @@ export const BasketDialog = ({ isOpen, onClose, products, subtotal, onQuantityCh
|
|
|
66
67
|
product.variation_name, src: product
|
|
67
68
|
.all_images[0]
|
|
68
69
|
?.href ||
|
|
69
|
-
'/lk_logo.png', className:
|
|
70
|
-
!isTemporaryRow && (_jsx(Spinner, { className:
|
|
71
|
-
onQuantityChange ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className:
|
|
72
|
-
handleDecrement(product.variation_uuid, displayQuantity), disabled: isProcessing, className: `rounded-full p-1 text-gray-600 ${isProcessing
|
|
70
|
+
'/lk_logo.png', className: buildClassesByJoining('size-full object-contain', classNames?.image) }), isTemporaryRow && (_jsx("div", { className: buildClassesByJoining('absolute inset-0 flex items-center justify-center bg-white bg-opacity-75', classNames?.temporaryRow), children: _jsx(Spinner, { className: buildClassesByJoining('h-8 w-8 text-[var(--primary)]', classNames?.spinner) }) }))] }), _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: buildClassesByJoining('font-extralight text-lg', classNames?.heading), 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 &&
|
|
71
|
+
!isTemporaryRow && (_jsx(Spinner, { className: buildClassesByJoining('h-4 w-4 text-gray-400', classNames?.spinner) }))] }) }), _jsx(Price, { value: product.price, locale: locale, options: productPriceOptions, className: buildClassesByJoining('ml-4 font-light', classNames?.price) })] }) }), _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: buildClassesByJoining('h-4 w-4 text-[var(--primary)]', classNames?.spinner) }), _jsx("p", { className: "text-gray-500 italic", children: translations.addingToBasket })] })) : showQuantityControls &&
|
|
72
|
+
onQuantityChange ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: buildClassesByJoining('text-gray-500 mr-2', classNames?.amount), children: translations.amount }), _jsxs("div", { className: "flex items-center", children: [_jsx("button", { type: "button", onClick: () => !isProcessing &&
|
|
73
|
+
handleDecrement(product.variation_uuid, displayQuantity), disabled: isProcessing, className: buildClassesByJoining(`rounded-full p-1 text-gray-600 ${isProcessing
|
|
73
74
|
? 'bg-gray-100 cursor-not-allowed opacity-50'
|
|
74
|
-
: 'bg-gray-200 hover:bg-gray-300'}`, children: _jsx(MinusIcon, { className: "h-4 w-4" }) }), _jsx("span", { className:
|
|
75
|
-
handleIncrement(product.variation_uuid, displayQuantity), disabled: isProcessing, className: `rounded-full p-1 text-gray-600 ${isProcessing
|
|
75
|
+
: 'bg-gray-200 hover:bg-gray-300'}`, classNames?.quantityControls), children: _jsx(MinusIcon, { className: "h-4 w-4" }) }), _jsx("span", { className: buildClassesByJoining('mx-2 min-w-[20px] text-center text-black', classNames?.quantity), children: displayQuantity }), _jsx("button", { type: "button", onClick: () => !isProcessing &&
|
|
76
|
+
handleIncrement(product.variation_uuid, displayQuantity), disabled: isProcessing, className: buildClassesByJoining(`rounded-full p-1 text-gray-600 ${isProcessing
|
|
76
77
|
? 'bg-gray-100 cursor-not-allowed opacity-50'
|
|
77
|
-
: 'bg-gray-200 hover:bg-gray-300'}`, children: _jsx(PlusIcon, { className: "h-4 w-4" }) })] })] })) : (_jsx("p", { className:
|
|
78
|
+
: 'bg-gray-200 hover:bg-gray-300'}`, classNames?.quantityControls), children: _jsx(PlusIcon, { className: "h-4 w-4" }) })] })] })) : (_jsx("p", { className: buildClassesByJoining('text-gray-500', classNames?.amount), children: translations.amount +
|
|
78
79
|
' ' +
|
|
79
80
|
displayQuantity })), !isTemporaryRow &&
|
|
80
|
-
onRemoveProduct && (_jsx("div", { className:
|
|
81
|
+
onRemoveProduct && (_jsx("div", { className: buildClassesByJoining('flex', classNames?.removeButton), children: _jsx("button", { type: "button", className: buildClassesByJoining(`font-medium ${isProcessing
|
|
81
82
|
? 'text-gray-400 cursor-not-allowed'
|
|
82
|
-
: 'text-[var(--accent)] hover:text-[var(--primary)]'}`, onClick: () => !isProcessing &&
|
|
83
|
+
: 'text-[var(--accent)] hover:text-[var(--primary)]'}`, classNames?.removeButton), onClick: () => !isProcessing &&
|
|
83
84
|
onRemoveProduct(product.variation_uuid), disabled: isProcessing, children: translations.remove }) }))] })] })] }, `${product.variation_uuid}-${isTemporaryRow
|
|
84
85
|
? 'temp'
|
|
85
86
|
: 'normal'}`));
|
|
86
|
-
}), shouldShowAddingIndicator && (_jsxs("li", { className:
|
|
87
|
+
}), shouldShowAddingIndicator && (_jsxs("li", { className: buildClassesByJoining('flex py-6 opacity-75 bg-gray-50', classNames?.addingIndicator), 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: buildClassesByJoining('h-8 w-8 text-[var(--primary)]', classNames?.spinner) }) }) }), _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: buildClassesByJoining('h-4 w-4 text-[var(--primary)]', classNames?.spinner) }), _jsx("p", { className: buildClassesByJoining('text-gray-500 italic', classNames?.addingIndicatorText), children: translations.addingToBasket })] }) })] }))] })) }) })] }), _jsxs("div", { className: buildClassesByJoining('border-t border-gray-200 px-4 py-6 sm:px-6', classNames?.total), 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: buildClassesByJoining('mt-0.5 text-sm text-gray-500', classNames?.shippingAndTax), children: translations.shippingAndTax })), products.length > 0 && onCheckout && (_jsx("div", { className: buildClassesByJoining('mt-6', classNames?.checkoutButton), children: _jsx("button", { onClick: handleCheckout, className: buildClassesByJoining(checkoutTextClass, classNames?.checkoutButton), children: checkoutText }) })), _jsx("div", { className: buildClassesByJoining('mt-6 flex justify-center text-center text-sm text-gray-500', classNames?.continueShoppingButton), children: _jsx("p", { children: _jsxs("button", { type: "button", onClick: handleContinueShopping, className: buildClassesByJoining('font-medium text-[var(--primary)] hover:text-[var(--primary)]', classNames?.continueShoppingButton), children: [continueShoppingText, _jsx("span", { "aria-hidden": "true", children: " \u2192" })] }) }) })] })] }) }) }) }) })] }));
|
|
87
88
|
};
|
|
@@ -31,5 +31,36 @@ export type BasketOverviewProps = {
|
|
|
31
31
|
translations?: {
|
|
32
32
|
emptyBasketPlaceholder?: string;
|
|
33
33
|
};
|
|
34
|
+
classNames?: {
|
|
35
|
+
container?: string;
|
|
36
|
+
title?: string;
|
|
37
|
+
checkoutButton?: string;
|
|
38
|
+
continueShoppingButton?: string;
|
|
39
|
+
quantityControls?: string;
|
|
40
|
+
removeButton?: string;
|
|
41
|
+
emptyBasket?: string;
|
|
42
|
+
list?: string;
|
|
43
|
+
image?: string;
|
|
44
|
+
temporaryRow?: string;
|
|
45
|
+
spinner?: string;
|
|
46
|
+
heading?: string;
|
|
47
|
+
price?: string;
|
|
48
|
+
amount?: string;
|
|
49
|
+
addingIndicator?: string;
|
|
50
|
+
addingIndicatorText?: string;
|
|
51
|
+
total?: string;
|
|
52
|
+
shippingAndTax?: string;
|
|
53
|
+
quantity?: string;
|
|
54
|
+
listItem?: string;
|
|
55
|
+
size?: string;
|
|
56
|
+
checkIcon?: string;
|
|
57
|
+
clockIcon?: string;
|
|
58
|
+
quantityText?: string;
|
|
59
|
+
summary?: string;
|
|
60
|
+
totalText?: string;
|
|
61
|
+
totalPrice?: string;
|
|
62
|
+
shippingNote?: string;
|
|
63
|
+
clearBasketButton?: string;
|
|
64
|
+
};
|
|
34
65
|
};
|
|
35
|
-
export declare const BasketOverview: ({ products, subtotal, onQuantityChange, onRemoveProduct, onClearBasket, onCheckout, onContinueShopping, productLink, title, checkoutText, checkoutTextClass, continueShoppingText, showShippingNote, clearBasketText, totalText, shippingNote, pendingUpdates, processingItems, locale, productPriceOptions, TotalPriceOptions, translations, }: BasketOverviewProps) => import("react/jsx-runtime").JSX.Element;
|
|
66
|
+
export declare const BasketOverview: ({ products, subtotal, onQuantityChange, onRemoveProduct, onClearBasket, onCheckout, onContinueShopping, productLink, title, checkoutText, checkoutTextClass, continueShoppingText, showShippingNote, clearBasketText, totalText, shippingNote, pendingUpdates, processingItems, locale, productPriceOptions, TotalPriceOptions, translations, classNames, }: BasketOverviewProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -5,7 +5,8 @@ import Heading from '../../../components/Base/heading/Heading';
|
|
|
5
5
|
import { Price } from '../../../components/Base/price/Price';
|
|
6
6
|
import { CheckIcon, ClockIcon, TrashIcon } from '@heroicons/react/20/solid';
|
|
7
7
|
import { MinusIcon, PlusIcon } from '@heroicons/react/24/solid';
|
|
8
|
-
|
|
8
|
+
import { buildClassesByJoining } from '../../../utils/StyleHelper';
|
|
9
|
+
export const BasketOverview = ({ products, subtotal, onQuantityChange, onRemoveProduct, onClearBasket, onCheckout, onContinueShopping, productLink, title = 'Shopping Cart', checkoutText = 'Checkout', checkoutTextClass = 'button-brand w-full', continueShoppingText = 'Continue Shopping', showShippingNote = true, clearBasketText = 'Clear basket', totalText, shippingNote, pendingUpdates = {}, processingItems = {}, locale, productPriceOptions, TotalPriceOptions, translations, classNames, }) => {
|
|
9
10
|
const handleIncrement = (product, quantity) => {
|
|
10
11
|
if (onQuantityChange) {
|
|
11
12
|
onQuantityChange(product.variation_uuid, quantity + 1);
|
|
@@ -21,18 +22,18 @@ export const BasketOverview = ({ products, subtotal, onQuantityChange, onRemoveP
|
|
|
21
22
|
}
|
|
22
23
|
}
|
|
23
24
|
};
|
|
24
|
-
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:
|
|
25
|
+
return (_jsx("div", { className: buildClassesByJoining('mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-8 lg:px-0', classNames?.container), 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: buildClassesByJoining('label', classNames?.title), 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: buildClassesByJoining('divide-y divide-gray-200 border-t border-b border-gray-200', classNames?.list), children: products.length === 0 ? (_jsx("li", { className: buildClassesByJoining('py-6 text-center text-gray-500', classNames?.emptyBasket), children: translations?.emptyBasketPlaceholder })) : (products.map((product) => {
|
|
25
26
|
const productKey = product.variation_uuid;
|
|
26
27
|
const isProcessing = processingItems[productKey] || false;
|
|
27
28
|
const displayQuantity = productKey in pendingUpdates
|
|
28
29
|
? pendingUpdates[productKey]
|
|
29
30
|
: product.quantity;
|
|
30
|
-
return (_jsxs("li", { className:
|
|
31
|
+
return (_jsxs("li", { className: buildClassesByJoining('flex py-6', classNames?.listItem), 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: buildClassesByJoining('size-24 rounded-md object-contain sm:size-32', classNames?.image) }) }), _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, className: buildClassesByJoining('font-medium text-gray-700 hover:text-gray-800', classNames?.heading), children: _jsx(Button, { asLink: true, unstyled: true, href: productLink?.(product.product_name, product.variation_id), className: buildClassesByJoining('font-medium text-gray-700 hover:text-gray-800', classNames?.heading), children: product.product_name }) }), _jsx("span", { className: buildClassesByJoining('ml-4 text-sm font-medium text-gray-900', classNames?.price), children: _jsx(Price, { value: product.price, locale: locale, options: productPriceOptions }) })] }), product.size && (_jsx("p", { className: buildClassesByJoining('mt-1 text-sm text-gray-500', classNames?.size), children: product.size }))] }), _jsxs("div", { className: "mt-4 flex flex-1 items-end justify-between", children: [_jsx("div", { className: buildClassesByJoining('flex items-center space-x-2 text-sm text-gray-700', classNames?.quantityControls), children: product.inStock !== undefined && (_jsxs(_Fragment, { children: [product.inStock ? (_jsx(CheckIcon, { "aria-hidden": "true", className: buildClassesByJoining('size-5 shrink-0 text-[var(--primary)]', classNames?.checkIcon) })) : (_jsx(ClockIcon, { "aria-hidden": "true", className: buildClassesByJoining('size-5 shrink-0 text-gray-300', classNames?.clockIcon) })), _jsx("span", { className: buildClassesByJoining('text-sm text-gray-700', classNames?.quantityText), children: product.inStock
|
|
31
32
|
? 'In stock'
|
|
32
|
-
: `Will ship in ${product.leadTime}` })] })) }), _jsxs("div", { className:
|
|
33
|
+
: `Will ship in ${product.leadTime}` })] })) }), _jsxs("div", { className: buildClassesByJoining('flex items-center', classNames?.quantityControls), children: [_jsx("button", { type: "button", onClick: () => handleDecrement(product, displayQuantity), disabled: isProcessing, className: buildClassesByJoining(`rounded-full p-1 text-gray-600 ${isProcessing
|
|
33
34
|
? 'bg-gray-100 cursor-not-allowed opacity-50'
|
|
34
|
-
: 'bg-gray-200 hover:bg-gray-300'}`, children: _jsx(MinusIcon, { className: "h-4 w-4" }) }), _jsx("span", { className:
|
|
35
|
+
: 'bg-gray-200 hover:bg-gray-300'}`, classNames?.quantityControls), children: _jsx(MinusIcon, { className: "h-4 w-4" }) }), _jsx("span", { className: buildClassesByJoining('mx-2 min-w-[20px] text-center text-black', classNames?.quantity), children: displayQuantity }), _jsx("button", { type: "button", onClick: () => handleIncrement(product, displayQuantity), disabled: isProcessing, className: buildClassesByJoining(`rounded-full p-1 text-gray-600 ${isProcessing
|
|
35
36
|
? 'bg-gray-100 cursor-not-allowed opacity-50'
|
|
36
|
-
: 'bg-gray-200 hover:bg-gray-300'}`, children: _jsx(PlusIcon, { className: "h-4 w-4" }) })] })] })] })] }, product.variation_uuid));
|
|
37
|
-
})) })] }), _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:
|
|
37
|
+
: 'bg-gray-200 hover:bg-gray-300'}`, classNames?.quantityControls), children: _jsx(PlusIcon, { className: "h-4 w-4" }) })] })] })] })] }, product.variation_uuid));
|
|
38
|
+
})) })] }), _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: buildClassesByJoining('inline-flex items-center text-sm font-medium text-red-600 hover:text-red-500', classNames?.clearBasketButton), children: [_jsx(TrashIcon, { className: "mr-1 h-5 w-5 text-red-500" }), clearBasketText] }) })), _jsxs("div", { className: buildClassesByJoining('space-y-4', classNames?.summary), children: [_jsx("dl", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("dt", { className: buildClassesByJoining('text-base font-medium text-gray-900', classNames?.totalText), children: totalText }), _jsx("dd", { className: buildClassesByJoining('ml-4 text-base font-medium text-gray-900', classNames?.totalPrice), children: _jsx(Price, { value: subtotal, locale: locale, options: TotalPriceOptions }) })] }) }), showShippingNote && (_jsx("p", { className: buildClassesByJoining('mt-1 text-sm text-gray-500', classNames?.shippingNote), children: shippingNote }))] }), products.length > 0 && onCheckout && (_jsx("div", { className: buildClassesByJoining('mt-10', classNames?.checkoutButton), children: _jsx("button", { type: "button", onClick: onCheckout, className: buildClassesByJoining(checkoutTextClass, classNames?.checkoutButton), children: checkoutText }) })), onContinueShopping && (_jsx("div", { className: buildClassesByJoining('mt-6 text-center text-sm', classNames?.continueShoppingButton), children: _jsx("p", { children: _jsxs("button", { type: "button", onClick: onContinueShopping, className: buildClassesByJoining('font-medium text-[var(--primary)] hover:text-[var(--primary)]', classNames?.continueShoppingButton), children: [continueShoppingText, _jsx("span", { "aria-hidden": "true", children: " \u2192" })] }) }) }))] })] })] }) }));
|
|
38
39
|
};
|
|
@@ -29,6 +29,70 @@ export type ProductProps = {
|
|
|
29
29
|
}>;
|
|
30
30
|
conversionToOtherUnit?: boolean;
|
|
31
31
|
hiddenStock?: boolean;
|
|
32
|
+
classNames?: {
|
|
33
|
+
badges?: {
|
|
34
|
+
container?: string;
|
|
35
|
+
badge?: string;
|
|
36
|
+
};
|
|
37
|
+
title?: string;
|
|
38
|
+
description?: string;
|
|
39
|
+
identifier?: {
|
|
40
|
+
container?: string;
|
|
41
|
+
sku?: string;
|
|
42
|
+
ean?: string;
|
|
43
|
+
};
|
|
44
|
+
variations?: {
|
|
45
|
+
container?: string;
|
|
46
|
+
heading?: string;
|
|
47
|
+
variationButton?: string;
|
|
48
|
+
variationActiveButton?: string;
|
|
49
|
+
variationTitle?: string;
|
|
50
|
+
variationStock?: string;
|
|
51
|
+
variationSku?: string;
|
|
52
|
+
variationEan?: string;
|
|
53
|
+
variationPrice?: string;
|
|
54
|
+
variationShowAll?: string;
|
|
55
|
+
variationTitleContainer?: string;
|
|
56
|
+
};
|
|
57
|
+
price?: {
|
|
58
|
+
mainPrice?: string;
|
|
59
|
+
mainQuantUnit?: string;
|
|
60
|
+
volumePrice?: string;
|
|
61
|
+
volumeQuantUnit?: string;
|
|
62
|
+
recommendedPrice?: string;
|
|
63
|
+
discountPrice?: string;
|
|
64
|
+
discountQuantUnit?: string;
|
|
65
|
+
discountPercent?: string;
|
|
66
|
+
shippingDetailFree?: string;
|
|
67
|
+
shippingDetailFee?: string;
|
|
68
|
+
};
|
|
69
|
+
button?: {
|
|
70
|
+
addToCartButton?: string;
|
|
71
|
+
decrementButton?: string;
|
|
72
|
+
incrementButton?: string;
|
|
73
|
+
watchdogButton?: string;
|
|
74
|
+
watchdogButtonIcon?: string;
|
|
75
|
+
watchdogButtonText?: string;
|
|
76
|
+
shippingOptionsButton?: string;
|
|
77
|
+
shippingOptionsButtonIcon?: string;
|
|
78
|
+
shippingOptionsButtonText?: string;
|
|
79
|
+
wishlistButton?: string;
|
|
80
|
+
wishlistButtonIcon?: string;
|
|
81
|
+
wishlistButtonText?: string;
|
|
82
|
+
};
|
|
83
|
+
specification?: {
|
|
84
|
+
heading?: string;
|
|
85
|
+
key?: string;
|
|
86
|
+
value?: string;
|
|
87
|
+
};
|
|
88
|
+
manufacturer?: {
|
|
89
|
+
heading?: string;
|
|
90
|
+
name?: string;
|
|
91
|
+
description?: string;
|
|
92
|
+
image?: string;
|
|
93
|
+
};
|
|
94
|
+
};
|
|
95
|
+
detailClassName?: string;
|
|
32
96
|
buttonClassName?: string;
|
|
33
97
|
descriptionClassName?: string;
|
|
34
98
|
specificationClassName?: {
|
|
@@ -94,6 +158,12 @@ export type ProductProps = {
|
|
|
94
158
|
EAN?: string;
|
|
95
159
|
sku?: string;
|
|
96
160
|
detail?: string;
|
|
161
|
+
variations?: string;
|
|
162
|
+
inStock?: string;
|
|
163
|
+
quantity?: string;
|
|
164
|
+
outOfStock?: string;
|
|
165
|
+
showLessVariations?: string;
|
|
166
|
+
showMoreVariations?: string;
|
|
97
167
|
};
|
|
98
168
|
locale: string;
|
|
99
169
|
quantUnit?: string;
|
|
@@ -108,5 +178,6 @@ export type ProductProps = {
|
|
|
108
178
|
discountQuantUnitClassName?: string;
|
|
109
179
|
volumePriceClassName?: string;
|
|
110
180
|
volumeQuantUnitClassName?: string;
|
|
181
|
+
breakpointForFreeShipping?: number;
|
|
111
182
|
};
|
|
112
|
-
export declare const ProductDetail: ({ name, price,
|
|
183
|
+
export declare const ProductDetail: ({ name, price, discountPercent, description, detail, buttonText, className, specification, conversionToOtherUnit, hiddenStock, classNames, buttonClassName, descriptionClassName, product, currentQuantity, onQuantityChange, maxQuantity, disabled, badges, showVariations, variations, currentVariationId, cartMode, onOpenBasket, addToCartButtonCustomAction, selectedVariationGradient, 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, breakpointForFreeShipping, }: ProductProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -11,18 +11,71 @@ import { Price } from '../../Base/price/Price';
|
|
|
11
11
|
import { HorizontalTab } from '../../Web/tabs/HorizontalTab';
|
|
12
12
|
import WishlistDropdown from '../wishlist/WishlistDropdown';
|
|
13
13
|
import ProductDetailGallery from './ProductDetailGallery';
|
|
14
|
-
export const ProductDetail = ({ name = '', price = 0,
|
|
14
|
+
export const ProductDetail = ({ name = '', price = 0, discountPercent = 0, description = '', detail = { tabs: [], type: 'bullet' }, buttonText = 'Add to bag', className = '', specification, conversionToOtherUnit = false, hiddenStock = false,
|
|
15
15
|
// classnames
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
},
|
|
21
|
-
|
|
22
|
-
name: '',
|
|
16
|
+
classNames = {
|
|
17
|
+
badges: {
|
|
18
|
+
container: '',
|
|
19
|
+
badge: '',
|
|
20
|
+
},
|
|
21
|
+
title: '',
|
|
23
22
|
description: '',
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
identifier: {
|
|
24
|
+
container: '',
|
|
25
|
+
sku: '',
|
|
26
|
+
ean: '',
|
|
27
|
+
},
|
|
28
|
+
variations: {
|
|
29
|
+
container: '',
|
|
30
|
+
heading: '',
|
|
31
|
+
variationButton: '',
|
|
32
|
+
variationActiveButton: '',
|
|
33
|
+
variationTitle: '',
|
|
34
|
+
variationStock: '',
|
|
35
|
+
variationSku: '',
|
|
36
|
+
variationEan: '',
|
|
37
|
+
variationPrice: '',
|
|
38
|
+
variationShowAll: '',
|
|
39
|
+
variationTitleContainer: '',
|
|
40
|
+
},
|
|
41
|
+
price: {
|
|
42
|
+
mainPrice: '',
|
|
43
|
+
mainQuantUnit: '',
|
|
44
|
+
volumePrice: '',
|
|
45
|
+
volumeQuantUnit: '',
|
|
46
|
+
recommendedPrice: '',
|
|
47
|
+
discountPrice: '',
|
|
48
|
+
discountQuantUnit: '',
|
|
49
|
+
discountPercent: '',
|
|
50
|
+
shippingDetailFree: '',
|
|
51
|
+
shippingDetailFee: '',
|
|
52
|
+
},
|
|
53
|
+
button: {
|
|
54
|
+
addToCartButton: '',
|
|
55
|
+
decrementButton: '',
|
|
56
|
+
incrementButton: '',
|
|
57
|
+
watchdogButton: '',
|
|
58
|
+
watchdogButtonIcon: '',
|
|
59
|
+
watchdogButtonText: '',
|
|
60
|
+
shippingOptionsButton: '',
|
|
61
|
+
shippingOptionsButtonIcon: '',
|
|
62
|
+
shippingOptionsButtonText: '',
|
|
63
|
+
wishlistButton: '',
|
|
64
|
+
wishlistButtonIcon: '',
|
|
65
|
+
wishlistButtonText: '',
|
|
66
|
+
},
|
|
67
|
+
specification: {
|
|
68
|
+
heading: '',
|
|
69
|
+
key: '',
|
|
70
|
+
value: '',
|
|
71
|
+
},
|
|
72
|
+
manufacturer: {
|
|
73
|
+
heading: '',
|
|
74
|
+
name: '',
|
|
75
|
+
description: '',
|
|
76
|
+
image: '',
|
|
77
|
+
},
|
|
78
|
+
}, buttonClassName = '', descriptionClassName = '',
|
|
26
79
|
// Cart props
|
|
27
80
|
product, currentQuantity = 0, onQuantityChange, maxQuantity = 99, disabled = false, badges = [], showVariations = false, variations = [], currentVariationId, cartMode = 'full', onOpenBasket, addToCartButtonCustomAction, selectedVariationGradient = false,
|
|
28
81
|
// Wishlist props
|
|
@@ -43,9 +96,15 @@ onShippingOptionsClick, isWatchdogEnabled = false, onWatchdogClick, onDemandClic
|
|
|
43
96
|
EAN: 'EAN',
|
|
44
97
|
sku: 'Kód',
|
|
45
98
|
detail: 'Detaily',
|
|
99
|
+
variations: 'Variace',
|
|
100
|
+
inStock: 'Skladem',
|
|
101
|
+
quantity: 'ks',
|
|
102
|
+
outOfStock: 'Není skladem',
|
|
103
|
+
showLessVariations: 'Zobrazit méně variant',
|
|
104
|
+
showMoreVariations: 'Zobrazit více variant',
|
|
46
105
|
}, locale, quantUnit,
|
|
47
106
|
// NOVÉ PRICE API
|
|
48
|
-
mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions, volumePriceFormatOptions, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, volumePriceClassName, volumeQuantUnitClassName, }) => {
|
|
107
|
+
mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions, volumePriceFormatOptions, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, volumePriceClassName, volumeQuantUnitClassName, breakpointForFreeShipping = 1000, }) => {
|
|
49
108
|
const wishlistButtonRef = useRef(null);
|
|
50
109
|
// Cart functions - updated logic based on cartMode
|
|
51
110
|
const shouldShowQuantityControls = () => {
|
|
@@ -112,52 +171,52 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
|
|
|
112
171
|
if (!product) {
|
|
113
172
|
return null;
|
|
114
173
|
}
|
|
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:
|
|
174
|
+
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: buildClassesByJoining('flex flex-wrap gap-2', classNames?.badges?.container), children: badges.map((badge, index) => (_jsx("span", { className: buildClassesByJoining(badge.color
|
|
116
175
|
? `${badge.color} inline-flex items-center px-2 py-1 text-xs font-medium text-w`
|
|
117
|
-
: 'bg-gray-200 text-gray-800 px-2 py-1 text-xs font-medium', children: badge.text }, index))) })), _jsx(Heading, { className:
|
|
176
|
+
: 'bg-gray-200 text-gray-800 px-2 py-1 text-xs font-medium', classNames?.badges?.badge), children: badge.text }, index))) })), _jsx(Heading, { className: buildClassesByJoining('mt-8 font-extralight', classNames?.title), level: 1, children: name }), _jsxs("div", { className: buildClassesByJoining('flex gap-4', classNames?.identifier?.container), children: [product.sku && (_jsxs("span", { className: buildClassesByJoining('text-sm text-gray-500', classNames?.identifier?.sku), children: [translations.sku, ": ", product.sku] })), product.ean && (_jsxs("span", { className: buildClassesByJoining('text-sm text-gray-500', classNames?.identifier?.ean), 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, classNames?.description) })] }), _jsxs("form", { className: "mt-6", children: [showVariations && (_jsxs("div", { children: [_jsx(Heading, { level: 3, className: buildClassesByJoining('text-gray-600 mb-2', classNames?.variations?.heading), children: translations.variations }), _jsx("div", { className: buildClassesByJoining('grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 2xl:grid-cols-2 gap-3', classNames?.variations?.container), 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 relative overflow-hidden', currentVariationId == variation.id
|
|
118
177
|
? 'border-[var(--primary)] border-2 shadow-xl'
|
|
119
|
-
: 'border-gray-200 shadow-sm', 'cursor-pointer transition-all duration-150 hover:border-[var(--primary)] hover:shadow-md'), children: [selectedVariationGradient &&
|
|
120
|
-
currentVariationId == variation.id && (_jsx("div", { className:
|
|
121
|
-
background: `
|
|
122
|
-
radial-gradient(circle at top left, var(--primary) 0%, transparent 20%),
|
|
123
|
-
radial-gradient(circle at top right, var(--primary) 0%, transparent 20%),
|
|
124
|
-
radial-gradient(circle at bottom left, var(--primary) 0%, transparent 20%),
|
|
125
|
-
radial-gradient(circle at bottom right, var(--primary) 0%, transparent 20%)
|
|
178
|
+
: 'border-gray-200 shadow-sm', 'cursor-pointer transition-all duration-150 hover:border-[var(--primary)] hover:shadow-md', classNames?.variations?.variationButton), children: [selectedVariationGradient &&
|
|
179
|
+
currentVariationId == variation.id && (_jsx("div", { className: buildClassesByJoining('absolute inset-0 pointer-events-none', classNames?.variations?.variationActiveButton), style: {
|
|
180
|
+
background: `
|
|
181
|
+
radial-gradient(circle at top left, var(--primary) 0%, transparent 20%),
|
|
182
|
+
radial-gradient(circle at top right, var(--primary) 0%, transparent 20%),
|
|
183
|
+
radial-gradient(circle at bottom left, var(--primary) 0%, transparent 20%),
|
|
184
|
+
radial-gradient(circle at bottom right, var(--primary) 0%, transparent 20%)
|
|
126
185
|
`,
|
|
127
186
|
opacity: 0.2,
|
|
128
|
-
} })), _jsxs("div", { className:
|
|
187
|
+
} })), _jsxs("div", { className: buildClassesByJoining('flex flex-col justify-between gap-1 relative z-10 flex-1 min-w-0 pr-2', classNames?.variations?.variationTitleContainer), children: [_jsx("span", { className: buildClassesByJoining('font-medium text-base capitalize line-clamp-2', classNames?.variations?.variationTitle), children: variation.title }), !hiddenStock && (_jsx("span", { className: buildClassesByJoining((variation.stock ?? 0) > 0
|
|
129
188
|
? 'text-green-600 text-sm'
|
|
130
|
-
: 'text-red-600 text-sm', children: (variation.stock ?? 0) > 0
|
|
131
|
-
?
|
|
132
|
-
:
|
|
133
|
-
mainPriceFormatOptions, className: buildClassesByJoining('font-semibold text-lg', variationPriceClassName) })] })] }, variation.id))) }), sortedVariations.length > numberOfVisibleVariations && (_jsx("button", { type: "button", onClick: () => setShowAll(!showAll), className:
|
|
134
|
-
?
|
|
135
|
-
:
|
|
189
|
+
: 'text-red-600 text-sm', classNames?.variations?.variationStock), children: (variation.stock ?? 0) > 0
|
|
190
|
+
? `/ ${translations.inStock}: ${variation.stock ?? 0} ${translations.quantity}`
|
|
191
|
+
: translations.outOfStock }))] }), _jsxs("div", { className: "flex flex-col justify-center items-end text-right gap-1 relative z-10 flex-shrink-0 min-w-0 max-w-[45%]", children: [variation.sku && (_jsxs("span", { className: buildClassesByJoining('text-xs text-gray-500 line-clamp-2 w-full', classNames?.variations?.variationSku), children: [translations.sku, ": ", variation.sku] })), variation.ean && (_jsxs("span", { className: buildClassesByJoining('text-xs text-gray-500 line-clamp-2 w-full', classNames?.variations?.variationEan), children: [translations.EAN, ": ", variation.ean] })), _jsx(Price, { value: variation.price, locale: locale, options: variationPriceFormatOptions ||
|
|
192
|
+
mainPriceFormatOptions, className: buildClassesByJoining('font-semibold text-lg', variationPriceClassName, classNames?.variations?.variationPrice) })] })] }, variation.id))) }), sortedVariations.length > numberOfVisibleVariations && (_jsx("button", { type: "button", onClick: () => setShowAll(!showAll), className: buildClassesByJoining('mt-3 text-sm font-medium text-green-700 hover:underline', classNames?.variations?.variationShowAll), children: showAll
|
|
193
|
+
? translations.showLessVariations
|
|
194
|
+
: translations.showMoreVariations }))] })), _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, classNames?.price?.mainPrice), quantUnit: quantUnit, quantUnitClassName: buildClassesByJoining('text-3xl tracking-tight font-semibold text-black', mainQuantUnitClassName, classNames?.price?.mainQuantUnit) }), conversionToOtherUnit &&
|
|
136
195
|
product.volume_unit &&
|
|
137
|
-
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 &&
|
|
138
|
-
product.discountPercent > 0 && (_jsxs("p", { className:
|
|
139
|
-
mainPriceFormatOptions, className: buildClassesByJoining('font-bold', discountPriceClassName), quantUnit: quantUnit, quantUnitClassName: buildClassesByJoining('font-bold', discountQuantUnitClassName), containerClassName: "inline-flex items-baseline gap-1" }), ' ', _jsx("span", { className:
|
|
196
|
+
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, classNames?.price?.volumePrice), quantUnitClassName: buildClassesByJoining('text-xs tracking-tight', volumeQuantUnitClassName, classNames?.price?.volumeQuantUnit) }), "/ ", getUnitName(product.volume_unit)] })), product?.discountPercent != null &&
|
|
197
|
+
product.discountPercent > 0 && (_jsxs("p", { className: buildClassesByJoining('text-sm text-gray-500', classNames?.price?.recommendedPrice), children: [translations.recommendedPrice, ' ', _jsx(Price, { value: price / (1 - product.discountPercent / 100), locale: locale, options: discountPriceFormatOptions ||
|
|
198
|
+
mainPriceFormatOptions, className: buildClassesByJoining('font-bold', discountPriceClassName, classNames?.price?.discountPrice), quantUnit: quantUnit, quantUnitClassName: buildClassesByJoining('font-bold', discountQuantUnitClassName, classNames?.price?.discountQuantUnit), containerClassName: "inline-flex items-baseline gap-1" }), ' ', _jsx("span", { className: buildClassesByJoining('text-red-500', classNames?.price?.discountPercent), children: discountPercent
|
|
140
199
|
? `-${formatPercentage(discountPercent)}`
|
|
141
200
|
: '' })] }))] })] }), _jsx("div", { className: "mt-10 flex justify-start", children: _jsxs("div", { className: "relative w-full", children: [_jsx("div", { className: buildClassesByJoining('transition-all duration-300 ease-in-out transform', shouldShowQuantityControls()
|
|
142
201
|
? 'scale-0 opacity-0'
|
|
143
202
|
: 'scale-100 opacity-100'), children: shouldShowAddButton() && (_jsx(Button, { type: "button", onClick: handleAddToCart, disabled: disabled, rounded: "none", className: buildClassesByJoining(`button-brand ${disabled
|
|
144
203
|
? 'bg-accent cursor-not-allowed'
|
|
145
|
-
: 'bg-primary hover:bg-[var(--background)] hover:text-[var(--primary)] hover:shadow-lg'} px-8 py-3 text-base font-medium text-white focus:ring-2 focus:ring-[var(--primary)] focus:ring-offset-2 focus:outline-hidden`, buttonClassName), children: buttonText })) }), _jsx("div", { className: buildClassesByJoining('absolute top-0 left-0 right-0 transition-all duration-300 ease-in-out transform', !shouldShowQuantityControls()
|
|
204
|
+
: 'bg-primary hover:bg-[var(--background)] hover:text-[var(--primary)] hover:shadow-lg'} px-8 py-3 text-base font-medium text-white focus:ring-2 focus:ring-[var(--primary)] focus:ring-offset-2 focus:outline-hidden`, buttonClassName, classNames?.button?.addToCartButton), children: buttonText })) }), _jsx("div", { className: buildClassesByJoining('absolute top-0 left-0 right-0 transition-all duration-300 ease-in-out transform', !shouldShowQuantityControls()
|
|
146
205
|
? 'scale-0 opacity-0'
|
|
147
|
-
: 'scale-100 opacity-100'), children: cartMode === 'full' && (_jsx("div", { className: "flex items-center justify-center px-4 py-3 w-full space-x-4", children: _jsxs("div", { className: "flex items-center space-x-2 lg:space-x-4", children: [_jsx("button", { type: "button", onClick: handleDecrement, disabled: currentQuantity <= 0 || disabled, className: `flex h-10 w-10 items-center justify-center rounded-full ${disabled
|
|
206
|
+
: 'scale-100 opacity-100'), children: cartMode === 'full' && (_jsx("div", { className: "flex items-center justify-center px-4 py-3 w-full space-x-4", children: _jsxs("div", { className: "flex items-center space-x-2 lg:space-x-4", children: [_jsx("button", { type: "button", onClick: handleDecrement, disabled: currentQuantity <= 0 || disabled, className: buildClassesByJoining(`flex h-10 w-10 items-center justify-center rounded-full ${disabled
|
|
148
207
|
? 'bg-red-300 cursor-not-allowed'
|
|
149
|
-
: 'bg-red-500 hover:bg-red-600'} text-white disabled:opacity-50 disabled:bg-red-300 disabled:cursor-not-allowed shadow-sm transition-all duration-200`, "aria-label": "Zn\u00ED\u017Ei\u0165 mno\u017Estvo", children: _jsx(MinusIcon, { className: "h-5 w-5" }) }), _jsx("div", { className: "w-8 text-center text-xl font-semibold text-gray-900", children: currentQuantity }), _jsx("button", { type: "button", onClick: handleIncrement, disabled: currentQuantity >= maxQuantity ||
|
|
150
|
-
disabled, className: `flex h-10 w-10 items-center justify-center rounded-full ${disabled
|
|
208
|
+
: 'bg-red-500 hover:bg-red-600'} text-white disabled:opacity-50 disabled:bg-red-300 disabled:cursor-not-allowed shadow-sm transition-all duration-200`, classNames?.button?.decrementButton), "aria-label": "Zn\u00ED\u017Ei\u0165 mno\u017Estvo", children: _jsx(MinusIcon, { className: "h-5 w-5" }) }), _jsx("div", { className: "w-8 text-center text-xl font-semibold text-gray-900", children: currentQuantity }), _jsx("button", { type: "button", onClick: handleIncrement, disabled: currentQuantity >= maxQuantity ||
|
|
209
|
+
disabled, className: buildClassesByJoining(`flex h-10 w-10 items-center justify-center rounded-full ${disabled
|
|
151
210
|
? 'bg-black-300 cursor-not-allowed'
|
|
152
|
-
: '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 >
|
|
211
|
+
: '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`, classNames?.button?.incrementButton), "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 > breakpointForFreeShipping ? (_jsx("p", { className: buildClassesByJoining('text-sm text-gray-800', classNames?.price?.shippingDetailFree), children: translations.shippingDetailFree })) : (_jsx("p", { className: buildClassesByJoining('text-sm text-gray-800', classNames?.price?.shippingDetailFee), 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: buildClassesByJoining('flex gap-2', classNames?.button?.watchdogButton), 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: buildClassesByJoining('size-5 text-[var(--primary)]', classNames?.button?.watchdogButtonIcon), 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: buildClassesByJoining('underline hover:no-underline', classNames?.button?.watchdogButtonText), 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: buildClassesByJoining('flex gap-2', classNames?.button?.shippingOptionsButton), 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: buildClassesByJoining('size-5 text-[var(--primary)]', classNames?.button?.shippingOptionsButtonIcon), 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: buildClassesByJoining('underline hover:no-underline cursor-pointer', classNames?.button?.shippingOptionsButtonText), children: translations.optionOfShipping })] }), isLogged && (_jsxs("div", { className: "relative", children: [_jsxs("button", { ref: wishlistButtonRef, className: buildClassesByJoining('flex gap-2 text-left hover:text-green-600 transition-colors', classNames?.button?.wishlistButton), 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: buildClassesByJoining('size-5 text-[var(--primary)]', classNames?.button?.wishlistButtonIcon), 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: buildClassesByJoining('underline hover:no-underline', classNames?.button?.wishlistButtonText), 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 ||
|
|
153
212
|
(() => { }), onRemoveFromWishlist: onRemoveFromSpecificWishlist ||
|
|
154
213
|
(() => { }), onCreateNewWishlist: onCreateNewWishlistFromDropdown ||
|
|
155
|
-
(() => { }), onClose: onCloseWishlistDropdown, isModal: false }) })] }))] }))] }) })] }), specification && specification.length > 0 && (_jsxs("section", { className: "mt-10", children: [_jsx(Heading, { level: 3, className:
|
|
214
|
+
(() => { }), onClose: onCloseWishlistDropdown, isModal: false }) })] }))] }))] }) })] }), specification && specification.length > 0 && (_jsxs("section", { className: "mt-10", children: [_jsx(Heading, { level: 3, className: classNames?.specification?.heading, children: translations.specification }), specification.map((item, index) => {
|
|
156
215
|
if ('separator' in item) {
|
|
157
216
|
return _jsx("div", { className: "h-4" }, index);
|
|
158
217
|
}
|
|
159
218
|
const key = Object.keys(item)[0];
|
|
160
219
|
const value = item[key];
|
|
161
|
-
return (_jsx("div", { className: "flex flex-col gap-2", children: _jsxs("p", { children: [_jsxs("span", { className:
|
|
162
|
-
})] })), product?.field_manufacturer && (_jsxs("section", { className: "mt-10", children: [_jsx(Heading, { level: 3, className:
|
|
220
|
+
return (_jsx("div", { className: "flex flex-col gap-2", children: _jsxs("p", { children: [_jsxs("span", { className: classNames?.specification?.key, children: [key, ":"] }), ' ', _jsx("span", { className: classNames?.specification?.value, children: value })] }) }, index));
|
|
221
|
+
})] })), product?.field_manufacturer && (_jsxs("section", { className: "mt-10", children: [_jsx(Heading, { level: 3, className: classNames?.manufacturer?.heading, children: translations.manufacturer }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: classNames?.manufacturer?.name, children: product.field_manufacturer?.name }), _jsx("div", { className: classNames?.manufacturer?.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', classNames?.manufacturer?.image) })] })] }))] })] }), detail && detail.tabs.length > 0 && (_jsx("section", { className: "mt-10", children: _jsx(HorizontalTab, { ...detail }) }))] }) }));
|
|
163
222
|
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export type ScheduleDetailProps = {
|
|
2
|
+
/** Main title */
|
|
3
|
+
title: string;
|
|
4
|
+
/** Short description under the title */
|
|
5
|
+
description?: string;
|
|
6
|
+
/** Formatted weekday+date, e.g. "pá 16/5" */
|
|
7
|
+
weekdayDate?: string;
|
|
8
|
+
/** Time string */
|
|
9
|
+
time?: string;
|
|
10
|
+
/** Location string */
|
|
11
|
+
location?: string;
|
|
12
|
+
/** Optional header image URL */
|
|
13
|
+
imageUrl?: string;
|
|
14
|
+
/** Alt text for the image */
|
|
15
|
+
imageAlt?: string;
|
|
16
|
+
/** Additional CSS classes */
|
|
17
|
+
className?: string;
|
|
18
|
+
/** Optional tags like "české titulky", "2D" */
|
|
19
|
+
tags?: string[];
|
|
20
|
+
/** Primary action button text (e.g., VSTUPENKY) */
|
|
21
|
+
buttonText?: string;
|
|
22
|
+
/** Primary action handler */
|
|
23
|
+
onButtonClick?: () => void;
|
|
24
|
+
/** Primary action button classes */
|
|
25
|
+
buttonClassName?: string;
|
|
26
|
+
};
|
|
27
|
+
export declare const ScheduleDetail: ({ title, description, weekdayDate, time, location, imageUrl, imageAlt, className, tags, buttonText, onButtonClick, buttonClassName, }: ScheduleDetailProps) => import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export default ScheduleDetail;
|