@sonic-equipment/ui 180.0.0 → 181.0.0

package/dist/buttons/print-button/print-button.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { FormattedMessage } from '../../intl/formatted-message.js';
 import { Button } from '../button/button.js';

package/dist/footer/connected-footer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { ConnectedCountrySelector } from '../country-selector/connected-country-selector.js';
 import { useCultureCode } from '../intl/use-culture-code.js';

package/dist/forms/password-field/password-field.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import { PasswordRevealToggle } from '../text-field/password-reveal-toggle/password-reveal-toggle.js';

package/dist/forms/search-field/search-field.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { StrokeSearchIcon } from '../../icons/stroke/stroke-search-icon.js';

package/dist/header/connected-header.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useCultureCode } from '../intl/use-culture-code.js';
 import { useFetchNavigationLinks } from '../shared/api/bff/hooks/use-fetch-navigation-links.js';

package/dist/pages/my-sonic/actions/change-customer/change-customer-dialog.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';

package/dist/pages/my-sonic/actions/change-customer/change-customer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useMemo } from 'react';
 import { ListBox, ListBoxItem, Text } from 'react-aria-components';

package/dist/pages/my-sonic/actions/change-customer/connected-change-customer-dialog.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { usePatchSession } from '../../../../shared/api/storefront/hooks/authentication/use-patch-session.js';

package/dist/pages/my-sonic/navigation/connected-my-sonic-navigation.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import Cookies from 'js-cookie';
 import { logger } from '../../../logging/logger.js';

package/dist/pages/my-sonic/navigation/my-sonic-mobile-navigation.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Select } from '../../../forms/select/select.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';

package/dist/pages/my-sonic/widgets/components/address-data-card.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Button } from '../../../../buttons/button/button.js';
 import { DataCard } from '../../../../cards/data-card/data-card.js';

package/dist/pages/my-sonic/widgets/connected-bill-to-address-widget.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useFetchCurrentBillToAddress } from '../../../shared/api/storefront/hooks/customer/use-fetch-current-bill-to-address.js';
 import { AddressDataCard } from './components/address-data-card.js';

package/dist/pages/my-sonic/widgets/connected-customer-information-widget.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Button } from '../../../buttons/button/button.js';

package/dist/pages/my-sonic/widgets/connected-ship-to-address-widget.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useFetchCurrentShipToAddress } from '../../../shared/api/storefront/hooks/customer/use-fetch-current-ship-to-address.js';
 import { AddressDataCard } from './components/address-data-card.js';

package/dist/pages/my-sonic/widgets/connected-user-account-widget.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Button } from '../../../buttons/button/button.js';
 import { DataCard } from '../../../cards/data-card/data-card.js';

package/dist/pages/product/product-details-page/components/product-details-recently-viewed-section/product-details-recently-viewed-section.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ConnectedProductCard } from '../../../../../cards/product-card/connected-product-card.js';
 import { CardCarousel } from '../../../../../carousel/card-carousel/card-carousel.js';

package/dist/pages/product/product-details-page/product-details.js

@@ -4,6 +4,7 @@ import { ConnectedProductCard } from '../../../cards/product-card/connected-prod
 import { CardCarousel } from '../../../carousel/card-carousel/card-carousel.js';
 import { ProductUSPCarousel } from '../../../carousel/usp-carousel/product-usp-carousel.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useMarkProductAsRecentlyViewed } from '../../../shared/api/storefront/hooks/product/use-mark-product-as-viewed.js';
 import { useDataLayer } from '../../../shared/ga/use-data-layer.js';
 import { Heading } from '../../../typography/heading/heading.js';
 import { Page } from '../../components/page/page.js';
@@ -14,6 +15,7 @@ import { ProductDetailsRecentlyViewedSection } from './components/product-detail
 
 function ProductDetails({ data, priceComponent, }) {
     const { breadCrumb, included, page, product, usps } = data;
+    useMarkProductAsRecentlyViewed({ productId: product.id });
     useDataLayer({
         event: {
             event: 'view_item',

package/dist/shared/api/bff/hooks/use-fetch-product-details-page-data.js

@@ -1,15 +1,11 @@
-import { useQueryClient, useQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { TIME } from '../../../utils/time.js';
 import { fetchProductDetailsPageData } from '../services/bff-service.js';
 
 function useFetchProductDetailsPageData(args) {
-    const queryClient = useQueryClient();
     return useQuery({
         gcTime: 1 * TIME.DAY,
-        queryFn: () => {
-            queryClient.removeQueries({ queryKey: ['products', 'recently-viewed'] });
-            return fetchProductDetailsPageData(args);
-        },
+        queryFn: () => fetchProductDetailsPageData(args),
         queryKey: ['product-details-page-data', args.pageUrl, args.cultureCode],
         staleTime: 1 * TIME.DAY,
     });

package/dist/shared/api/bff/services/bff-service.js

@@ -2,7 +2,6 @@ import { config } from '../../../../config.js';
 import { request } from '../../../fetch/request.js';
 import { isAnnouncementType, isAnnouncementSubtype } from '../../../model/announcement.js';
 import { TIME } from '../../../utils/time.js';
-import { markProductAsRecentlyViewed } from '../../storefront/services/product-service.js';
 
 async function fetchAnnouncements({ cultureCode, }) {
     const { body } = await request({
@@ -46,7 +45,6 @@ async function fetchProductDetailsPageData({ cultureCode, pageUrl, }) {
         },
         url: `${config.BFF_API_URL}/pdp/?pageUrl=${pageUrl}`,
     });
-    markProductAsRecentlyViewed({ productId: body.product.id });
     return body;
 }
 async function fetchProductListingPageData({ cultureCode, pageUrl, }) {

package/dist/shared/api/storefront/hooks/product/use-mark-product-as-viewed.d.ts

@@ -1,2 +1,3 @@
-import { MarkProductAsRecentlyViewedArgs } from '../../services/product-service';
-export declare function useMarkProductAsRecentlyViewed(args: MarkProductAsRecentlyViewedArgs): import("@tanstack/react-query").UseQueryResult<void, Error>;
+export declare function useMarkProductAsRecentlyViewed({ productId, }: {
+    productId?: string;
+}): import("@tanstack/react-query").UseQueryResult<void, Error>;

package/dist/shared/api/storefront/hooks/product/use-mark-product-as-viewed.js

@@ -1,15 +1,16 @@
 import { useQueryClient, useQuery } from '@tanstack/react-query';
 import { markProductAsRecentlyViewed } from '../../services/product-service.js';
 
-function useMarkProductAsRecentlyViewed(args) {
+function useMarkProductAsRecentlyViewed({ productId, }) {
     const queryClient = useQueryClient();
     return useQuery({
+        enabled: Boolean(productId),
         gcTime: 0,
         queryFn: () => {
-            markProductAsRecentlyViewed(args);
+            markProductAsRecentlyViewed({ productId: productId });
             queryClient.removeQueries({ queryKey: ['products', 'recently-viewed'] });
         },
-        queryKey: ['mark-product-as-recently-viewed', args.productId],
+        queryKey: ['mark-product-as-recently-viewed', productId],
         staleTime: 0,
     });
 }

package/dist/shared/routing/with-routing.js

@@ -1,3 +1,4 @@
+"use client";
 import { createElement } from 'react';
 import { useNavigate } from './use-navigate.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "180.0.0",
+  "version": "181.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -92,6 +92,7 @@
     "eslint-plugin-prettier": "5.4.0",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-react-server-components": "^1.2.0",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "eslint-plugin-sort-destructure-keys": "2.0.0",
     "eslint-plugin-sort-keys-fix": "1.1.2",