@q2devel/q2-storybook 1.0.121 → 1.0.123
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/Base/blog-builder/BlogBuilder.d.ts +3 -1
- package/dist/components/Base/blog-builder/BlogBuilder.js +6 -5
- package/dist/components/Base/blog-builder/text-and-media-paragraph/TextAndMediaParagraph.d.ts +2 -1
- package/dist/components/Base/blog-builder/text-and-media-paragraph/TextAndMediaParagraph.js +3 -2
- package/dist/components/Base/blog-builder/video-paragraph/VideoParagraph.d.ts +2 -1
- package/dist/components/Base/blog-builder/video-paragraph/VideoParagraph.js +1 -1
- package/dist/components/Ecommerce/product-card/ProductCard.d.ts +5 -1
- package/dist/components/Ecommerce/product-card/ProductCard.js +3 -2
- package/dist/components/Ecommerce/product-detail/ProductDetail.d.ts +23 -4
- package/dist/components/Ecommerce/product-detail/ProductDetail.js +32 -17
- package/dist/utils/generalHelperFunction.d.ts +3 -0
- package/dist/utils/generalHelperFunction.js +48 -0
- package/package.json +2 -2
|
@@ -3,6 +3,8 @@ type ContentType = 'text' | 'l-text-r-image' | 'r-text-l-image' | 'image' | 'vid
|
|
|
3
3
|
interface BlogBuilderProps {
|
|
4
4
|
post: BlogItem;
|
|
5
5
|
contentType?: ContentType;
|
|
6
|
+
createdText?: string;
|
|
7
|
+
textClassName?: string;
|
|
6
8
|
}
|
|
7
|
-
export declare const BlogBuilder: ({ post, contentType }: BlogBuilderProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
9
|
+
export declare const BlogBuilder: ({ post, contentType, createdText, textClassName }: BlogBuilderProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
8
10
|
export {};
|
|
@@ -5,7 +5,8 @@ import { TextParagraph } from './text-paragraph/TextParagraph';
|
|
|
5
5
|
import Heading from '../heading/Heading';
|
|
6
6
|
import { VideoParagraph } from './video-paragraph/VideoParagraph';
|
|
7
7
|
import { CarouselParagraph } from './carousel-paragraph/CarouselParagraph';
|
|
8
|
-
|
|
8
|
+
import { formatDate } from '../../../utils/generalHelperFunction';
|
|
9
|
+
export const BlogBuilder = ({ post, contentType = 'l-text-r-image', createdText = 'Publikováno:', textClassName = '' }) => {
|
|
9
10
|
// Zde můžeme přímo pracovat s daty z API
|
|
10
11
|
if (!post)
|
|
11
12
|
return null;
|
|
@@ -21,7 +22,7 @@ export const BlogBuilder = ({ post, contentType = 'l-text-r-image' }) => {
|
|
|
21
22
|
imageAlt: post.title,
|
|
22
23
|
videoLink: post.field_video_link,
|
|
23
24
|
videoTitle: post.title,
|
|
24
|
-
}, mediaPosition: "right" }, "text-image-content"));
|
|
25
|
+
}, mediaPosition: "right", textClassName: textClassName }, "text-image-content"));
|
|
25
26
|
case 'r-text-l-image':
|
|
26
27
|
return (_jsx(TextAndMediaParagraph, { content: {
|
|
27
28
|
text: post.body,
|
|
@@ -29,7 +30,7 @@ export const BlogBuilder = ({ post, contentType = 'l-text-r-image' }) => {
|
|
|
29
30
|
imageAlt: post.title,
|
|
30
31
|
videoLink: post.field_video_link,
|
|
31
32
|
videoTitle: post.title,
|
|
32
|
-
}, mediaPosition: "left" }, "text-image-content"));
|
|
33
|
+
}, mediaPosition: "left", textClassName: textClassName }, "text-image-content"));
|
|
33
34
|
case 'image':
|
|
34
35
|
if (!post.field_image_url)
|
|
35
36
|
return null;
|
|
@@ -41,7 +42,7 @@ export const BlogBuilder = ({ post, contentType = 'l-text-r-image' }) => {
|
|
|
41
42
|
return (_jsx(VideoParagraph, { content: {
|
|
42
43
|
videoLink: post.field_video_link,
|
|
43
44
|
title: post.title,
|
|
44
|
-
} }, "video-content"));
|
|
45
|
+
}, textClassName: textClassName }, "video-content"));
|
|
45
46
|
case 'table':
|
|
46
47
|
return _jsx("div", { children: "Table Component (bude implementov\u00E1no)" }, "table-content");
|
|
47
48
|
case 'carousel':
|
|
@@ -50,5 +51,5 @@ export const BlogBuilder = ({ post, contentType = 'l-text-r-image' }) => {
|
|
|
50
51
|
return _jsxs("div", { children: ["Nezn\u00E1m\u00FD typ obsahu: ", contentType] }, "unknown-content");
|
|
51
52
|
}
|
|
52
53
|
};
|
|
53
|
-
return (_jsxs("div", { className: "mx-auto max-w-2xl lg:mx-0 lg:max-w-none", children: [_jsx(Heading, { level: 1, className: 'label', children: post.title }), renderContent()] }));
|
|
54
|
+
return (_jsxs("div", { className: "mx-auto max-w-2xl lg:mx-0 lg:max-w-none", children: [_jsx(Heading, { level: 1, className: 'label', children: post.title }), _jsxs("p", { className: "text-sm text-gray-500", children: [createdText, " ", formatDate(post.created)] }), renderContent()] }));
|
|
54
55
|
};
|
package/dist/components/Base/blog-builder/text-and-media-paragraph/TextAndMediaParagraph.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ type TextAndMediaParagraphProps = {
|
|
|
7
7
|
videoTitle?: string;
|
|
8
8
|
};
|
|
9
9
|
mediaPosition: 'left' | 'right';
|
|
10
|
+
textClassName?: string;
|
|
10
11
|
};
|
|
11
|
-
export declare const TextAndMediaParagraph: ({ content, mediaPosition }: TextAndMediaParagraphProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare const TextAndMediaParagraph: ({ content, mediaPosition, textClassName }: TextAndMediaParagraphProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
13
|
export {};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import HTMLReactParser from 'html-react-parser/lib/index';
|
|
3
3
|
import { getYoutubeEmbedUrl } from '../../../../utils/Helper';
|
|
4
|
-
|
|
4
|
+
import classNames from 'classnames';
|
|
5
|
+
export const TextAndMediaParagraph = ({ content, mediaPosition, textClassName = 'mt-8' }) => {
|
|
5
6
|
const hasVideo = content.videoLink && content.videoLink.trim() !== '';
|
|
6
7
|
const hasImage = content.image && content.image.trim() !== '';
|
|
7
8
|
const renderMedia = () => {
|
|
@@ -15,5 +16,5 @@ export const TextAndMediaParagraph = ({ content, mediaPosition }) => {
|
|
|
15
16
|
return (_jsx("div", { className: "flex items-center justify-center h-48 bg-gray-100 text-gray-500", children: "No media content" }));
|
|
16
17
|
}
|
|
17
18
|
};
|
|
18
|
-
return (_jsxs("div", { className: "mt-10 grid max-w-xl grid-cols-1 gap-8 text-base/7 text-gray-700 lg:max-w-none lg:grid-cols-2 items-start", children: [_jsx("div", { className:
|
|
19
|
+
return (_jsxs("div", { className: "mt-10 grid max-w-xl grid-cols-1 gap-8 text-base/7 text-gray-700 lg:max-w-none lg:grid-cols-2 items-start", children: [_jsx("div", { className: classNames('[&_a]:underline [&_a]:text-[var(--primary)] [&_a:hover]:text-[var(--accent)] [&_a]:transition-colors [&_a]:duration-200', mediaPosition === 'right' ? 'lg:order-1' : 'lg:order-2', textClassName), children: HTMLReactParser(content.text) }), _jsx("div", { className: mediaPosition === 'right' ? 'lg:order-2' : 'lg:order-1', children: renderMedia() })] }));
|
|
19
20
|
};
|
|
@@ -3,6 +3,7 @@ type VideoParagraphProps = {
|
|
|
3
3
|
videoLink?: string;
|
|
4
4
|
title?: string;
|
|
5
5
|
};
|
|
6
|
+
textClassName?: string;
|
|
6
7
|
};
|
|
7
|
-
export declare const VideoParagraph: ({ content }: VideoParagraphProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const VideoParagraph: ({ content, textClassName }: VideoParagraphProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
9
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { getYoutubeEmbedUrl } from '../../../../utils/Helper';
|
|
3
|
-
export const VideoParagraph = ({ content }) => {
|
|
3
|
+
export const VideoParagraph = ({ content, textClassName }) => {
|
|
4
4
|
return (_jsx("div", { className: "mx-auto max-w-3xl", children: _jsx("div", { className: "w-full max-w-2xl aspect-video mx-auto", children: _jsx("iframe", { className: "w-full h-full", src: getYoutubeEmbedUrl(content.videoLink ?? ''), title: content.title ?? 'YouTube video player', allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", referrerPolicy: "strict-origin-when-cross-origin", allowFullScreen: true }) }) }));
|
|
5
5
|
};
|
|
@@ -26,6 +26,7 @@ export type ProductCardProps = {
|
|
|
26
26
|
renderDescription?: boolean;
|
|
27
27
|
renderVariationName?: boolean;
|
|
28
28
|
variationNameClassName?: string;
|
|
29
|
+
labelClassName?: string;
|
|
29
30
|
elevationLevel?: 0 | 1 | 2 | 3;
|
|
30
31
|
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
|
|
31
32
|
titleLines?: 1 | 2 | 3;
|
|
@@ -34,6 +35,9 @@ export type ProductCardProps = {
|
|
|
34
35
|
renderFooter?: (product: Product) => React.ReactNode;
|
|
35
36
|
renderHeader?: (product: Product) => React.ReactNode;
|
|
36
37
|
actionButton?: React.ReactNode;
|
|
38
|
+
linkToCatalog?: string;
|
|
39
|
+
showCountry?: boolean;
|
|
40
|
+
showVolume?: boolean;
|
|
37
41
|
showAddButton?: boolean;
|
|
38
42
|
showAddButtonOnHover?: boolean;
|
|
39
43
|
addButtonPosition?: 'overlay' | 'bottom';
|
|
@@ -79,4 +83,4 @@ export type ProductCardProps = {
|
|
|
79
83
|
mainQuantUnitClassName?: string;
|
|
80
84
|
discountQuantUnitClassName?: string;
|
|
81
85
|
};
|
|
82
|
-
export declare const ProductCard: ({ product, href, className, imageClassName, contentClassName, titleClassName, priceClassName, priceDiscountClassName, descriptionClassName, aspectRatio, imagePosition, imageObjectFit, layout, hoverEffect, renderBadges, renderColor, renderDescription, elevationLevel, rounded, titleLines, onCardClick, onImageClick, renderFooter, renderHeader, renderVariationName, variationNameClassName, actionButton, 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;
|
|
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;
|
|
@@ -12,7 +12,7 @@ import { Price } from '../../Base/price/Price';
|
|
|
12
12
|
import Spinner from '../../Base/spinner/Spinner';
|
|
13
13
|
import DeleteButton from '../wishlist/DeleteButton';
|
|
14
14
|
import LikeButton from '../wishlist/LikeButton';
|
|
15
|
-
export const ProductCard = ({ product, href, className, imageClassName, contentClassName, titleClassName, priceClassName, priceDiscountClassName, descriptionClassName, 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,
|
|
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
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,
|
|
18
18
|
// Wishlist functionality
|
|
@@ -161,7 +161,8 @@ mainPriceFormatOptions, discountPriceFormatOptions, mainPriceClassName, discount
|
|
|
161
161
|
onDelete(product);
|
|
162
162
|
}
|
|
163
163
|
}, [onDelete, product]);
|
|
164
|
-
|
|
164
|
+
console.log(product.country, product.field_volume, showCountry, showVolume);
|
|
165
|
+
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.variation_images[0]?.alt, src: product.variation_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
166
|
// Quantity controls
|
|
166
167
|
_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
168
|
// Add button
|
|
@@ -27,6 +27,20 @@ export type ProductProps = {
|
|
|
27
27
|
specification?: Array<{
|
|
28
28
|
[key: string]: string;
|
|
29
29
|
}>;
|
|
30
|
+
conversionToOtherUnit?: boolean;
|
|
31
|
+
buttonClassName?: string;
|
|
32
|
+
descriptionClassName?: string;
|
|
33
|
+
specificationClassName?: {
|
|
34
|
+
heading?: string;
|
|
35
|
+
key?: string;
|
|
36
|
+
value?: string;
|
|
37
|
+
};
|
|
38
|
+
manufacturerClassName?: {
|
|
39
|
+
heading?: string;
|
|
40
|
+
title?: string;
|
|
41
|
+
description?: string;
|
|
42
|
+
image?: string;
|
|
43
|
+
};
|
|
30
44
|
product?: Product;
|
|
31
45
|
showAddButton?: boolean;
|
|
32
46
|
currentQuantity: number;
|
|
@@ -71,19 +85,24 @@ export type ProductProps = {
|
|
|
71
85
|
question: string;
|
|
72
86
|
optionOfShipping: string;
|
|
73
87
|
addToWishlist: string;
|
|
74
|
-
specification
|
|
75
|
-
|
|
76
|
-
|
|
88
|
+
specification?: string;
|
|
89
|
+
manufacturer?: string;
|
|
90
|
+
EAN?: string;
|
|
91
|
+
sku?: string;
|
|
92
|
+
detail?: string;
|
|
77
93
|
};
|
|
78
94
|
locale: string;
|
|
79
95
|
quantUnit?: string;
|
|
80
96
|
mainPriceFormatOptions?: PriceFormatOptions;
|
|
81
97
|
discountPriceFormatOptions?: PriceFormatOptions;
|
|
82
98
|
variationPriceFormatOptions?: PriceFormatOptions;
|
|
99
|
+
volumePriceFormatOptions?: PriceFormatOptions;
|
|
83
100
|
mainPriceClassName?: string;
|
|
84
101
|
discountPriceClassName?: string;
|
|
85
102
|
variationPriceClassName?: string;
|
|
86
103
|
mainQuantUnitClassName?: string;
|
|
87
104
|
discountQuantUnitClassName?: string;
|
|
105
|
+
volumePriceClassName?: string;
|
|
106
|
+
volumeQuantUnitClassName?: string;
|
|
88
107
|
};
|
|
89
|
-
export declare const ProductDetail: ({ name, price, href, discountPercent, description, detail, buttonText, className, specification, 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, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, }: ProductProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
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;
|
|
@@ -2,7 +2,7 @@
|
|
|
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
4
|
import { useRef, useState } from 'react';
|
|
5
|
-
import { formatPercentage } from '../../../utils/generalHelperFunction';
|
|
5
|
+
import { formatPercentage, getUnitName } from '../../../utils/generalHelperFunction';
|
|
6
6
|
import { buildClassesByJoining } from '../../../utils/StyleHelper';
|
|
7
7
|
import Button from '../../Base/button/Button';
|
|
8
8
|
import Heading from '../../Base/heading/Heading';
|
|
@@ -10,7 +10,20 @@ import { Price } from '../../Base/price/Price';
|
|
|
10
10
|
import { HorizontalTab } from '../../Web/tabs/HorizontalTab';
|
|
11
11
|
import WishlistDropdown from '../wishlist/WishlistDropdown';
|
|
12
12
|
import ProductDetailGallery from './ProductDetailGallery';
|
|
13
|
-
|
|
13
|
+
import parseHTML from 'html-react-parser';
|
|
14
|
+
import { convertToOtherUnit } from '../../../utils/generalHelperFunction';
|
|
15
|
+
export const ProductDetail = ({ name = '', price = 0, href = '', discountPercent = 0, description = '', detail = { tabs: [] }, buttonText = 'Add to bag', className = '', specification, conversionToOtherUnit = false,
|
|
16
|
+
// classnames
|
|
17
|
+
buttonClassName = '', descriptionClassName = '', specificationClassName = {
|
|
18
|
+
heading: '',
|
|
19
|
+
key: '',
|
|
20
|
+
value: '',
|
|
21
|
+
}, manufacturerClassName = {
|
|
22
|
+
heading: '',
|
|
23
|
+
title: '',
|
|
24
|
+
description: '',
|
|
25
|
+
image: '',
|
|
26
|
+
},
|
|
14
27
|
// Cart props
|
|
15
28
|
product, currentQuantity = 0, onQuantityChange, maxQuantity = 99, disabled = false, badges = [], showVariations = false, variations = [], currentVariationId, cartMode = 'full', onOpenBasket,
|
|
16
29
|
// Wishlist props
|
|
@@ -27,11 +40,13 @@ onShippingOptionsClick, isWatchdogEnabled = false, onWatchdogClick, onDemandClic
|
|
|
27
40
|
optionOfShipping: 'Možnosti dodání',
|
|
28
41
|
addToWishlist: 'Přidat do wishlistu',
|
|
29
42
|
specification: 'Parametry',
|
|
43
|
+
manufacturer: 'Výrobce',
|
|
30
44
|
EAN: 'EAN',
|
|
31
45
|
sku: 'Kód',
|
|
46
|
+
detail: 'Detaily',
|
|
32
47
|
}, locale, quantUnit,
|
|
33
48
|
// NOVÉ PRICE API
|
|
34
|
-
mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName,
|
|
49
|
+
mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions, volumePriceFormatOptions, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, volumePriceClassName, volumeQuantUnitClassName,
|
|
35
50
|
// translation
|
|
36
51
|
}) => {
|
|
37
52
|
const wishlistButtonRef = useRef(null);
|
|
@@ -97,7 +112,7 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
|
|
|
97
112
|
}
|
|
98
113
|
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
|
|
99
114
|
? `${badge.color} inline-flex items-center px-2 py-1 text-xs font-medium text-w`
|
|
100
|
-
: '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: "space-y-6 text-base text-gray-700" })] }), _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
|
|
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("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
|
|
101
116
|
? 'border-[var(--primary)]'
|
|
102
117
|
: '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
|
|
103
118
|
? 'text-green-600 text-sm'
|
|
@@ -106,15 +121,15 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
|
|
|
106
121
|
: '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 ||
|
|
107
122
|
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
|
|
108
123
|
? 'Zobrazit méně variant'
|
|
109
|
-
: '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) }), product?.discountPercent != null &&
|
|
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 && product.volume_unit && 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 &&
|
|
110
125
|
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 ||
|
|
111
126
|
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
|
|
112
|
-
? formatPercentage(discountPercent)
|
|
127
|
+
? `-${formatPercentage(discountPercent)}`
|
|
113
128
|
: '' })] }))] })] }), _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()
|
|
114
129
|
? 'scale-0 opacity-0'
|
|
115
|
-
: 'scale-100 opacity-100'), children: shouldShowAddButton() && (_jsx(Button, { type: "button", onClick: handleAddToCart, disabled: disabled, rounded: "none", className: `button-brand ${disabled
|
|
130
|
+
: 'scale-100 opacity-100'), children: shouldShowAddButton() && (_jsx(Button, { type: "button", onClick: handleAddToCart, disabled: disabled, rounded: "none", className: buildClassesByJoining(`button-brand ${disabled
|
|
116
131
|
? 'bg-accent cursor-not-allowed'
|
|
117
|
-
: '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`, children: buttonText })) }), _jsx("div", { className: buildClassesByJoining('absolute top-0 left-0 right-0 transition-all duration-300 ease-in-out transform', !shouldShowQuantityControls()
|
|
132
|
+
: '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()
|
|
118
133
|
? 'scale-0 opacity-0'
|
|
119
134
|
: '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
|
|
120
135
|
? 'bg-red-300 cursor-not-allowed'
|
|
@@ -124,13 +139,13 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
|
|
|
124
139
|
: '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 ||
|
|
125
140
|
(() => { }), onRemoveFromWishlist: onRemoveFromSpecificWishlist ||
|
|
126
141
|
(() => { }), onCreateNewWishlist: onCreateNewWishlistFromDropdown ||
|
|
127
|
-
(() => { }), onClose: onCloseWishlistDropdown, isModal: false }) })] }))] }))] }) })] })
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
142
|
+
(() => { }), onClose: onCloseWishlistDropdown, isModal: false }) })] }))] }))] }) })] }), specification && specification.length > 0 &&
|
|
143
|
+
_jsxs("section", { className: "mt-10", children: [_jsx(Heading, { level: 3, className: specificationClassName.heading, children: translations.specification }), specification.map((item, index) => {
|
|
144
|
+
if ('separator' in item) {
|
|
145
|
+
return _jsx("div", { className: "h-4" }, index);
|
|
146
|
+
}
|
|
147
|
+
const key = Object.keys(item)[0];
|
|
148
|
+
const value = item[key];
|
|
149
|
+
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));
|
|
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 }) }))] }) }));
|
|
136
151
|
};
|
|
@@ -33,3 +33,6 @@ export declare const useScreenSize: () => {
|
|
|
33
33
|
isSmDevice: boolean;
|
|
34
34
|
isMobileDevice: boolean;
|
|
35
35
|
};
|
|
36
|
+
export declare const formatDate: (dateString: string) => string;
|
|
37
|
+
export declare const convertToOtherUnit: (price: number, quantity: number, unit: string) => number;
|
|
38
|
+
export declare const getUnitName: (unit: string) => string;
|
|
@@ -155,3 +155,51 @@ export const useScreenSize = () => {
|
|
|
155
155
|
isMobileDevice
|
|
156
156
|
};
|
|
157
157
|
};
|
|
158
|
+
export const formatDate = (dateString) => {
|
|
159
|
+
if (!dateString)
|
|
160
|
+
return '';
|
|
161
|
+
const date = new Date(dateString);
|
|
162
|
+
return date.toLocaleDateString('cs-CZ', {
|
|
163
|
+
day: '2-digit',
|
|
164
|
+
month: '2-digit',
|
|
165
|
+
year: 'numeric',
|
|
166
|
+
hour: '2-digit',
|
|
167
|
+
minute: '2-digit',
|
|
168
|
+
});
|
|
169
|
+
};
|
|
170
|
+
export const convertToOtherUnit = (price, quantity, unit) => {
|
|
171
|
+
if (unit === 'g') {
|
|
172
|
+
return (price / quantity) * 1000;
|
|
173
|
+
}
|
|
174
|
+
else if (unit === 'ml') {
|
|
175
|
+
return (price / quantity) * 1000;
|
|
176
|
+
}
|
|
177
|
+
else if (unit === 'cl') {
|
|
178
|
+
return (price / quantity) * 100;
|
|
179
|
+
}
|
|
180
|
+
else if (unit === 'cm') {
|
|
181
|
+
return (price / quantity) * 100;
|
|
182
|
+
}
|
|
183
|
+
else if (unit === 'cm²') {
|
|
184
|
+
return (price / quantity) * 10000;
|
|
185
|
+
}
|
|
186
|
+
return price;
|
|
187
|
+
};
|
|
188
|
+
export const getUnitName = (unit) => {
|
|
189
|
+
if (unit === 'g') {
|
|
190
|
+
return 'kg';
|
|
191
|
+
}
|
|
192
|
+
else if (unit === 'ml') {
|
|
193
|
+
return 'l';
|
|
194
|
+
}
|
|
195
|
+
else if (unit === 'cl') {
|
|
196
|
+
return 'l';
|
|
197
|
+
}
|
|
198
|
+
else if (unit === 'cm') {
|
|
199
|
+
return 'm';
|
|
200
|
+
}
|
|
201
|
+
else if (unit === 'cm²') {
|
|
202
|
+
return 'm²';
|
|
203
|
+
}
|
|
204
|
+
return unit;
|
|
205
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@q2devel/q2-storybook",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.123",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"dependencies": {
|
|
68
68
|
"@headlessui/react": "^2.2.2",
|
|
69
69
|
"@heroicons/react": "^2.2.0",
|
|
70
|
-
"@q2devel/q2-core": "^1.0.
|
|
70
|
+
"@q2devel/q2-core": "^1.0.42",
|
|
71
71
|
"@tanstack/react-query": "^5.76.1",
|
|
72
72
|
"axios": "^1.9.0",
|
|
73
73
|
"body-parser": "^2.2.0",
|