@q2devel/q2-storybook 1.0.205 → 1.0.206
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.
|
@@ -27,6 +27,9 @@ export type BasketOverviewProps = {
|
|
|
27
27
|
totalText?: string;
|
|
28
28
|
showShippingNote?: boolean;
|
|
29
29
|
clearBasketText?: string;
|
|
30
|
+
onUpdatePrices?: () => void;
|
|
31
|
+
updatePricesText?: string;
|
|
32
|
+
updatePricesDisabled?: boolean;
|
|
30
33
|
pendingUpdates?: Record<string, number>;
|
|
31
34
|
processingItems?: Record<string, boolean>;
|
|
32
35
|
locale: string;
|
|
@@ -69,6 +72,9 @@ export type BasketOverviewProps = {
|
|
|
69
72
|
totalPrice?: string;
|
|
70
73
|
shippingNote?: string;
|
|
71
74
|
clearBasketButton?: string;
|
|
75
|
+
updatePricesButton?: string;
|
|
76
|
+
updatePricesButtonIcon?: string;
|
|
77
|
+
actionsRow?: string;
|
|
72
78
|
imageContainer?: string;
|
|
73
79
|
priceRange?: string;
|
|
74
80
|
priceRangeLabel?: string;
|
|
@@ -79,4 +85,4 @@ export type BasketOverviewProps = {
|
|
|
79
85
|
priceInputError?: string;
|
|
80
86
|
};
|
|
81
87
|
};
|
|
82
|
-
export declare const BasketOverview: ({ products, subtotal, onQuantityChange, onRemoveProduct, onPriceChange, priceOverrides, onClearBasket, onCheckout, onContinueShopping, productLink, title, checkoutText, checkoutTextClass, continueShoppingText, showShippingNote, clearBasketText, totalText, shippingNote, pendingUpdates, processingItems, locale, productPriceOptions, TotalPriceOptions, translations, showLinkToProduct, classNames, }: BasketOverviewProps) => import("react/jsx-runtime").JSX.Element;
|
|
88
|
+
export declare const BasketOverview: ({ products, subtotal, onQuantityChange, onRemoveProduct, onPriceChange, priceOverrides, onClearBasket, onCheckout, onContinueShopping, productLink, title, checkoutText, checkoutTextClass, continueShoppingText, showShippingNote, clearBasketText, onUpdatePrices, updatePricesText, updatePricesDisabled, totalText, shippingNote, pendingUpdates, processingItems, locale, productPriceOptions, TotalPriceOptions, translations, showLinkToProduct, classNames, }: BasketOverviewProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { CheckIcon, ClockIcon, TrashIcon } from '@heroicons/react/20/solid';
|
|
3
|
+
import { ArrowPathIcon, CheckIcon, ClockIcon, TrashIcon, } from '@heroicons/react/20/solid';
|
|
4
4
|
import { MinusIcon, PlusIcon } from '@heroicons/react/24/solid';
|
|
5
5
|
import { useEffect, useState } from 'react';
|
|
6
6
|
import Button from '../../../components/Base/button/Button';
|
|
@@ -42,7 +42,7 @@ const PriceRangeInput = ({ min, max, value, defaultValue, locale, priceOptions,
|
|
|
42
42
|
const inputId = `basket-price-input-${idSuffix}`;
|
|
43
43
|
return (_jsxs("div", { className: buildClassesByJoining('mt-1 flex flex-col items-end gap-0.5', classNames?.priceRange), children: [rangeLabel && (_jsx("span", { className: buildClassesByJoining('text-xs text-gray-500', classNames?.priceRangeLabel), children: rangeLabel })), _jsxs("span", { className: buildClassesByJoining('flex items-baseline gap-1 text-xs whitespace-nowrap text-gray-700', classNames?.priceRangeValues), children: [_jsx(Price, { value: min, locale: locale, options: priceOptions }), _jsx("span", { children: "\u2013" }), _jsx(Price, { value: max, locale: locale, options: priceOptions })] }), _jsxs("div", { className: buildClassesByJoining('flex items-center gap-2', classNames?.priceInputWrapper), children: [setPriceLabel && (_jsx("label", { htmlFor: inputId, className: buildClassesByJoining('text-xs text-gray-700', classNames?.priceInputLabel), children: setPriceLabel })), _jsx("input", { id: inputId, type: "number", inputMode: "decimal", min: min, max: max, step: "0.01", value: inputValue, disabled: disabled, onChange: (e) => handleChange(e.target.value), onBlur: commit, className: buildClassesByJoining('w-24 rounded-md border border-gray-300 px-2 py-1 text-right text-sm text-gray-900 focus:border-[var(--primary)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-50', classNames?.priceInput) })] }), error && (_jsx("span", { className: buildClassesByJoining('text-xs text-red-600', classNames?.priceInputError), children: error }))] }));
|
|
44
44
|
};
|
|
45
|
-
export const BasketOverview = ({ products, subtotal, onQuantityChange, onRemoveProduct, onPriceChange, priceOverrides, 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 = {
|
|
45
|
+
export const BasketOverview = ({ products, subtotal, onQuantityChange, onRemoveProduct, onPriceChange, priceOverrides, onClearBasket, onCheckout, onContinueShopping, productLink, title = 'Shopping Cart', checkoutText = 'Checkout', checkoutTextClass = 'button-brand w-full', continueShoppingText = 'Continue Shopping', showShippingNote = true, clearBasketText = 'Clear basket', onUpdatePrices, updatePricesText = 'Update prices', updatePricesDisabled = false, totalText, shippingNote, pendingUpdates = {}, processingItems = {}, locale, productPriceOptions, TotalPriceOptions, translations = {
|
|
46
46
|
priceRangeLabel: 'Rozsah ceny',
|
|
47
47
|
setPriceLabel: 'Vaše cena',
|
|
48
48
|
priceRangeError: 'Cena musí být v rozsahu {min} – {max}',
|
|
@@ -62,6 +62,9 @@ export const BasketOverview = ({ products, subtotal, onQuantityChange, onRemoveP
|
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
};
|
|
65
|
+
const showUpdatePricesButton = !!onUpdatePrices &&
|
|
66
|
+
products.some((product) => product.priceMin !== undefined &&
|
|
67
|
+
product.priceMax !== undefined);
|
|
65
68
|
return (_jsxs("div", { className: buildClassesByJoining('mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-8 lg:px-0', classNames?.container), 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) => {
|
|
66
69
|
const productKey = product.variation_uuid;
|
|
67
70
|
const isProcessing = processingItems[productKey] || false;
|
|
@@ -81,5 +84,6 @@ export const BasketOverview = ({ products, subtotal, onQuantityChange, onRemoveP
|
|
|
81
84
|
: '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
|
|
82
85
|
? 'bg-gray-100 cursor-not-allowed opacity-50'
|
|
83
86
|
: 'bg-gray-200 hover:bg-gray-300'}`, classNames?.quantityControls), children: _jsx(PlusIcon, { className: "h-4 w-4" }) })] })] })] })] }, product.variation_uuid));
|
|
84
|
-
})) })] }), _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 &&
|
|
87
|
+
})) })] }), _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 &&
|
|
88
|
+
(onClearBasket || showUpdatePricesButton) && (_jsxs("div", { className: buildClassesByJoining('mb-4 flex items-center gap-4', classNames?.actionsRow), children: [onClearBasket && (_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] })), showUpdatePricesButton && (_jsxs("button", { type: "button", onClick: onUpdatePrices, disabled: updatePricesDisabled, className: buildClassesByJoining('ml-auto inline-flex items-center text-sm font-medium text-[var(--primary)] hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50', classNames?.updatePricesButton), children: [_jsx(ArrowPathIcon, { className: buildClassesByJoining('mr-1 h-5 w-5 text-[var(--primary)]', classNames?.updatePricesButtonIcon) }), updatePricesText] }))] })), _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" })] }) }) }))] })] })] }));
|
|
85
89
|
};
|