@sonic-equipment/ui 0.0.61 → 0.0.63

package/dist/index.js

@@ -778,9 +778,10 @@ async function getWishListItemsByWishListId({ wishListId, }) {
     });
 }
 
-function useFetchAllWishListsItems() {
+function useFetchAllWishListsItems({ enabled = true } = { enabled: true }) {
     const queryClient = useQueryClient();
     return useQuery({
+        enabled,
         queryFn: async () => {
             const body = 
             // Reuse existing data if available
@@ -817,8 +818,8 @@ function useFavorite() {
     return { signInUrl: state.signInUrl };
 }
 function useFavoriteProduct(productId) {
-    const { data: entries, isFetching: isFetchingWishListItems } = useFetchAllWishListsItems();
     const isAuthenticated = useIsAuthenticated();
+    const { data: entries, isFetching: isFetchingWishListItems } = useFetchAllWishListsItems({ enabled: Boolean(isAuthenticated) });
     const entry = entries?.find(({ wishListItem }) => wishListItem.productId === productId);
     return {
         isFavorite: Boolean(entry),
@@ -1261,7 +1262,7 @@ function ProductPrice({ className, isVatIncluded, originalPrice, price, }) {
 var styles$F = {"product-sku":"product-sku-module-ITb8x"};
 
 function ProductSku({ sku }) {
-    return jsx("p", { className: styles$F['product-sku'], children: sku });
+    return (jsx("p", { className: styles$F['product-sku'], "data-test-selector": "productNumber", children: sku }));
 }
 
 function isResponsiveImage(image) {
@@ -1310,7 +1311,7 @@ function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, ima
 var styles$D = {"product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","content":"product-card-module-e0kMu","top":"product-card-module-Q0VvF","tag":"product-card-module-HkWBE","title":"product-card-module-CStNi","bottom":"product-card-module-kD2tU","image":"product-card-module-p-zoi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
 
 function ProductCard({ addToCartButton: AddToCartButton, areaSelected, favoriteButton: FavoriteButton, href, id, image, onClick, onMouseDown, onMouseMove, onPress, price, role, sku, tags, title, }) {
-    return (jsxs(RouteLink, { "aria-selected": areaSelected, className: styles$D['product-card'], href: href, id: id, onClick: onClick, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onPress: onPress, role: role, children: [jsx("div", { className: styles$D.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles$D['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$D.content, children: [jsxs("div", { className: styles$D.top, children: [jsx("div", { className: styles$D.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$D.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$D.bottom, children: [jsx("div", { className: styles$D.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$D['add-to-cart-button'], children: AddToCartButton })] })] })] }));
+    return (jsxs(RouteLink, { "aria-selected": areaSelected, className: styles$D['product-card'], "data-product-id": sku, href: href, id: id, onClick: onClick, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onPress: onPress, role: role, children: [jsx("div", { className: styles$D.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles$D['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$D.content, children: [jsxs("div", { className: styles$D.top, children: [jsx("div", { className: styles$D.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$D.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$D.bottom, children: [jsx("div", { className: styles$D.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$D['add-to-cart-button'], children: AddToCartButton })] })] })] }));
 }
 
 /**
@@ -7584,10 +7585,10 @@ function AlgoliaSortBy() {
 
 var styles$i = {"category-card":"category-card-module-4NUjH","title":"category-card-module-LEhh3","arrow":"category-card-module-hL4-A","is-selected":"category-card-module-vJ7vB","image-container":"category-card-module-oNTrK"};
 
-function CategoryCard({ href, image, isSelected = false, title, withArrow = false, }) {
+function CategoryCard({ href, image, isSelected = false, onClick, title, withArrow = false, }) {
     return (jsxs(RouteLink, { className: clsx({
             [styles$i['is-selected']]: isSelected,
-        }, styles$i['category-card']), href: href, children: [jsx("div", { className: styles$i['image-container'], children: jsx(Image, { ...image, fit: "contain" }) }), jsxs("p", { className: styles$i.title, children: [jsx("span", { children: title }), withArrow && jsx(GlyphsArrowBoldCapsRightIcon, { className: styles$i.arrow })] })] }));
+        }, styles$i['category-card']), href: href, onClick: onClick, children: [jsx("div", { className: styles$i['image-container'], children: jsx(Image, { ...image, fit: "contain" }) }), jsxs("p", { className: styles$i.title, children: [jsx("span", { children: title }), withArrow && jsx(GlyphsArrowBoldCapsRightIcon, { className: styles$i.arrow })] })] }));
 }
 
 const ProductListingPageContext = createContext({
@@ -8155,12 +8156,12 @@ function ConnectedSearchInput() {
 
 var styles$8 = {"categories-grid":"categories-grid-module-C751R","category":"categories-grid-module-7OZS1"};
 
-function CategoriesGrid({ categories }) {
+function CategoriesGrid({ categories, onItemClick, }) {
     return (jsx("div", { className: styles$8['categories-grid'], children: categories.map(category => (jsx("div", { className: styles$8['category'], children: jsx(CategoryCard, { withArrow: true, href: category.href, image: {
                     fit: 'contain',
                     image: category.image,
                     title: category.title,
-                }, title: category.title }, category.title) }, category.title))) }));
+                }, onClick: onItemClick, title: category.title }, category.title) }, category.title))) }));
 }
 
 var styles$7 = {"search-section":"search-section-module-qaTiw","header":"search-section-module-E--U2","title":"search-section-module-AHlDR","content":"search-section-module-VZlvZ"};
@@ -8186,10 +8187,11 @@ function NotFound() {
 function PopularCategoriesSection() {
     const { popularCategories: collection } = useAlgoliaSearch();
     const t = useFormattedMessage();
+    const { close } = useGlobalSearchDisclosure();
     if (!collection)
         return null;
     const { items } = collection;
-    return (jsx(SearchSection, { title: t('Explore by categories'), children: jsx("div", { className: styles$6['categories-grid-container'], children: jsx(CategoriesGrid, { categories: items }) }) }));
+    return (jsx(SearchSection, { title: t('Explore by categories'), children: jsx("div", { className: styles$6['categories-grid-container'], children: jsx(CategoriesGrid, { categories: items, onItemClick: close }) }) }));
 }
 
 function Highlight({ attribute, hit, tagName = 'mark', }) {
@@ -8245,11 +8247,12 @@ function RecentSearchesSection() {
 }
 function QuickAccessSection() {
     const { quickAccess: collection } = useAlgoliaSearch();
+    const { close } = useGlobalSearchDisclosure();
     const t = useFormattedMessage();
     if (!collection)
         return;
     const { items } = collection;
-    return (jsx(SearchSection, { title: t('Quick access'), children: jsx("div", { className: styles$3['quick-access-section'], children: jsx(Carousel, { className: styles$3['quick-access-carousel'], hasNavigation: false, hasOverflow: false, navigationButtonsPosition: "center", slides: items.map((item, index) => (jsx(RouteLink, { className: styles$3['quick-access-card'], href: item.action.url, children: jsx(Image, { height: 343, image: item.image, title: item.image.altText, width: 192 }) }, index))), spaceBetween: 16 }) }) }));
+    return (jsx(SearchSection, { title: t('Quick access'), children: jsx("div", { className: styles$3['quick-access-section'], children: jsx(Carousel, { className: styles$3['quick-access-carousel'], hasNavigation: false, hasOverflow: false, navigationButtonsPosition: "center", slides: items.map((item, index) => (jsx(RouteLink, { className: styles$3['quick-access-card'], href: item.action.url, onClick: close, children: jsx(Image, { height: 343, image: item.image, title: item.image.altText, width: 192 }) }, index))), spaceBetween: 16 }) }) }));
 }
 
 var styles$2 = {"slide":"product-carousel-module-XVTB1"};
@@ -8265,7 +8268,7 @@ function StrokeRecentIcon(props) {
 function WithResults() {
     const { state } = useAlgoliaSearch();
     const { close } = useGlobalSearchDisclosure();
-    return (jsx("div", { children: jsx(SectionContainer, { buttons: jsxs(RouteButton, { className: clsx(styles$6['show-all-button'], buttonStyles.button, buttonStyles.secondary, buttonStyles.outline, buttonStyles.md), href: `/search?keyword=${state.query}`, onPress: close, children: [jsx(FormattedMessage, { id: "See all results" }), ")", jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })] }), leftContent: jsx(SuggestionsSection, {}), rightContent: jsx(ProductResultsSection, {}) }) }));
+    return (jsx("div", { children: jsx(SectionContainer, { buttons: jsxs(RouteButton, { className: clsx(styles$6['show-all-button'], buttonStyles.button, buttonStyles.secondary, buttonStyles.outline, buttonStyles.md), href: `/search?keyword=${state.query}`, onPress: close, children: [jsx(FormattedMessage, { id: "See all results" }), jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })] }), leftContent: jsx(SuggestionsSection, {}), rightContent: jsx(ProductResultsSection, {}) }) }));
 }
 function SuggestionsSection() {
     const { autocomplete, categories, querySuggestions, recentSearches } = useAlgoliaSearch();

package/dist/src/cards/category-card/category-card.d.ts

@@ -3,7 +3,8 @@ export interface CategoryCardProps {
     href: string;
     image: ImageSource;
     isSelected?: boolean;
+    onClick?: VoidFunction;
     title: string;
     withArrow?: boolean;
 }
-export declare function CategoryCard({ href, image, isSelected, title, withArrow, }: CategoryCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoryCard({ href, image, isSelected, onClick, title, withArrow, }: CategoryCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/global-search/categories-grid/categories-grid.d.ts

@@ -1,5 +1,6 @@
 import { Category } from 'shared/model/category';
 export interface CategoriesGridProps {
     categories: Category[];
+    onItemClick?: VoidFunction;
 }
-export declare function CategoriesGrid({ categories }: CategoriesGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoriesGrid({ categories, onItemClick, }: CategoriesGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/shared/api/shop/hooks/wishlist/use-fetch-all-wishlists-items.d.ts

@@ -1,5 +1,9 @@
 import { WishListLineModel, WishListModel } from 'shared/api/shop/model/shop.model';
-export declare function useFetchAllWishListsItems(): import("@tanstack/react-query").UseQueryResult<{
+interface UseFetchAllWishListsItemsArgs {
+    enabled?: boolean;
+}
+export declare function useFetchAllWishListsItems({ enabled }?: UseFetchAllWishListsItemsArgs): import("@tanstack/react-query").UseQueryResult<{
     wishList: WishListModel;
     wishListItem: WishListLineModel;
 }[], Error>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.61",
+  "version": "0.0.63",
   "type": "module",
   "license": "MIT",
   "engines": {