@sonic-equipment/ui 154.0.0 → 156.0.0

package/dist/exports.d.ts

@@ -102,6 +102,7 @@ export * from './global-search/search-result-panel/panel-content';
 export * from './global-search/search-result-panel/search-result-panel';
 export * from './global-search/search-result-panel/sections/no-search';
 export * from './global-search/search-result-panel/sections/no-search-results';
+export * from './global-search/search-result-panel/sections/searching';
 export * from './global-search/search-result-panel/sections/section-container';
 export * from './global-search/search-result-panel/sections/with-results';
 export * from './global-search/search-section/search-list';

package/dist/global-search/search-result-panel/panel-content.js

@@ -6,8 +6,11 @@ import { NoSearchResults } from './sections/no-search-results.js';
 import { WithResults } from './sections/with-results.js';
 
 function PanelContent() {
-    const { hasResults, state } = useAlgoliaSearch();
-    return (jsx(Fragment, { children: state.query.length === 0 ? (jsx(NoSearch, {})) : hasResults ? (jsx(WithResults, {})) : (jsx(NoSearchResults, {})) }));
+    const { state } = useAlgoliaSearch();
+    const hasSearchQuery = state.query.length > 0;
+    const isLoading = (state.status === 'loading' || state.status === 'stalled') && hasSearchQuery;
+    const hasResults = (state.collections.find(collection => collection.source.sourceId === 'productsPlugin')?.items.length || 0) > 0;
+    return (jsx(Fragment, { children: hasResults ? (jsx(WithResults, { isLoading: isLoading })) : hasSearchQuery && !isLoading ? (jsx(NoSearchResults, { isLoading: isLoading })) : (jsx(NoSearch, { isLoading: isLoading })) }));
 }
 
 export { PanelContent };

package/dist/global-search/search-result-panel/sections/no-search-results.d.ts

@@ -1 +1,3 @@
-export declare function NoSearchResults(): import("react/jsx-runtime").JSX.Element;
+export declare function NoSearchResults({ isLoading }: {
+    isLoading?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/global-search/search-result-panel/sections/no-search-results.js

@@ -6,11 +6,12 @@ import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { CategoriesGrid } from '../../categories-grid/categories-grid.js';
 import { useGlobalSearchDisclosure } from '../../global-search-provider/use-search-disclosure.js';
 import { SearchSection } from '../../search-section/search-section.js';
+import { SearchingSection } from './searching.js';
 import { SectionContainer } from './section-container.js';
 import styles from './search-content.module.css.js';
 
-function NoSearchResults() {
-    return (jsx(Fragment, { children: jsx(SectionContainer, { leftContent: jsx(NotFound, {}), rightContent: jsx(PopularCategoriesSection, {}) }) }));
+function NoSearchResults({ isLoading }) {
+    return (jsx(Fragment, { children: jsx(SectionContainer, { leftContent: jsx(NotFound, {}), rightContent: isLoading ? jsx(SearchingSection, {}) : jsx(PopularCategoriesSection, {}) }) }));
 }
 function NotFound() {
     const { state } = useAlgoliaSearch();

package/dist/global-search/search-result-panel/sections/no-search.d.ts

@@ -1 +1,5 @@
-export declare function NoSearch(): import("react/jsx-runtime").JSX.Element;
+export declare function NoSearch({ isLoading }: {
+    isLoading?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PopularSearchesSection(): import("react/jsx-runtime").JSX.Element | null;
+export declare function RecentSearchesSection(): import("react/jsx-runtime").JSX.Element | null;

package/dist/global-search/search-result-panel/sections/no-search.js

@@ -12,11 +12,12 @@ import { Highlight } from '../../search-highlight/highlight.js';
 import { SearchList } from '../../search-section/search-list.js';
 import { SearchListItem } from '../../search-section/search-list-item.js';
 import { SearchSection } from '../../search-section/search-section.js';
+import { SearchingSection } from './searching.js';
 import { SectionContainer } from './section-container.js';
 import styles from './search-content.module.css.js';
 
-function NoSearch() {
-    return (jsx(SectionContainer, { leftContent: jsxs("div", { children: [jsx(RecentSearchesSection, {}), jsx(PopularSearchesSection, {})] }), rightContent: jsx(QuickAccessSection, {}) }));
+function NoSearch({ isLoading }) {
+    return (jsx(SectionContainer, { leftContent: jsxs("div", { children: [jsx(RecentSearchesSection, {}), jsx(PopularSearchesSection, {})] }), rightContent: isLoading ? jsx(SearchingSection, {}) : jsx(QuickAccessSection, {}) }));
 }
 function PopularSearchesSection() {
     const { autocomplete, popularSearches: collection } = useAlgoliaSearch();
@@ -55,4 +56,4 @@ function QuickAccessSection() {
                 , { href: item.action.url, image: item.image, onClick: close }, `${index}-${item.action.url}`))), cardsPerView: "auto", cardWidth: "narrow" }) }) }));
 }
 
-export { NoSearch };
+export { NoSearch, PopularSearchesSection, RecentSearchesSection };

package/dist/global-search/search-result-panel/sections/search-content.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"section-container":"search-content-module-ZMwlB","content":"search-content-module-KIok6","left":"search-content-module-YRLIf","right":"search-content-module-qK5sg","button-container":"search-content-module-w-ORq","show-all-button":"search-content-module-bO1Q0","product-results":"search-content-module-bcFCH","quick-access-section-header":"search-content-module-HrHCE","product-results-section-header":"search-content-module-9bgxF","no-results-text":"search-content-module-H-FX2","query":"search-content-module-LbQnK","suggestions":"search-content-module-mhiBZ","list":"search-content-module-coPAt"};
+var styles = {"section-container":"search-content-module-ZMwlB","content":"search-content-module-KIok6","left":"search-content-module-YRLIf","right":"search-content-module-qK5sg","button-container":"search-content-module-w-ORq","show-all-button":"search-content-module-bO1Q0","product-results":"search-content-module-bcFCH","quick-access-section-header":"search-content-module-HrHCE","product-results-section-header":"search-content-module-9bgxF","no-results-text":"search-content-module-H-FX2","query":"search-content-module-LbQnK","suggestions":"search-content-module-mhiBZ","list":"search-content-module-coPAt","search-section":"search-content-module-qQMqH"};
 
 export { styles as default };

package/dist/global-search/search-result-panel/sections/searching.d.ts

@@ -0,0 +1 @@
+export declare function SearchingSection(): import("react/jsx-runtime").JSX.Element;

package/dist/global-search/search-result-panel/sections/searching.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { ProgressCircle } from '../../../loading/progress-circle.js';
+import { SearchSection } from '../../search-section/search-section.js';
+import styles from './search-content.module.css.js';
+
+function SearchingSection() {
+    return (jsx(SearchSection, { className: styles['search-section'], children: jsx(ProgressCircle, { variant: "gray" }) }));
+}
+
+export { SearchingSection };

package/dist/global-search/search-result-panel/sections/with-results.d.ts

@@ -1 +1,3 @@
-export declare function WithResults(): import("react/jsx-runtime").JSX.Element;
+export declare function WithResults({ isLoading }: {
+    isLoading?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/global-search/search-result-panel/sections/with-results.js

@@ -6,7 +6,6 @@ import { useAlgoliaInsights } from '../../../algolia/use-algolia-insights.js';
 import { useAlgoliaSearch } from '../../../algolia/use-algolia-search.js';
 import { ConnectedProductCard } from '../../../cards/product-card/connected-product-card.js';
 import { CardCarousel } from '../../../carousel/card-carousel/card-carousel.js';
-import { GlyphsArrowBoldCapsRightIcon } from '../../../icons/glyph/glyphs-arrow-boldcaps-right-icon.js';
 import { StrokeRecentIcon } from '../../../icons/stroke/stroke-recent-icon.js';
 import { StrokeSearchIcon } from '../../../icons/stroke/stroke-search-icon.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
@@ -19,14 +18,15 @@ import { Highlight } from '../../search-highlight/highlight.js';
 import { SearchList } from '../../search-section/search-list.js';
 import { SearchListItem } from '../../search-section/search-list-item.js';
 import { SearchSection } from '../../search-section/search-section.js';
+import { SearchingSection } from './searching.js';
 import { SectionContainer } from './section-container.js';
 import buttonStyles from '../../../buttons/button/button.module.css.js';
 import styles from './search-content.module.css.js';
 
-function WithResults() {
+function WithResults({ isLoading }) {
     const { state } = useAlgoliaSearch();
     const { close } = useGlobalSearchDisclosure();
-    return (jsx("div", { children: jsx(SectionContainer, { buttons: jsxs(RouteButton, { className: clsx(styles['show-all-button'], buttonStyles.button, buttonStyles.secondary, buttonStyles.outline, buttonStyles.md), href: `/search?keyword=${encodeURIComponent(state.query)}`, onClick: 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: !isLoading && (jsx(RouteButton, { withArrow: true, className: clsx(styles['show-all-button'], buttonStyles.button, buttonStyles.secondary, buttonStyles.outline, buttonStyles.md), href: `/search?keyword=${encodeURIComponent(state.query)}`, onClick: close, children: jsx(FormattedMessage, { id: "See all results" }) })), leftContent: jsx(SuggestionsSection, {}), rightContent: isLoading ? jsx(SearchingSection, {}) : jsx(ProductResultsSection, {}) }) }));
 }
 function SuggestionsSection() {
     const { autocomplete, categories, querySuggestions, recentSearches } = useAlgoliaSearch();

package/dist/index.js

@@ -105,8 +105,9 @@ export { ConnectedSearchInput } from './global-search/search-input/connected-sea
 export { SearchInput } from './global-search/search-input/search-input.js';
 export { PanelContent } from './global-search/search-result-panel/panel-content.js';
 export { SearchResultPanel } from './global-search/search-result-panel/search-result-panel.js';
-export { NoSearch } from './global-search/search-result-panel/sections/no-search.js';
+export { NoSearch, PopularSearchesSection, RecentSearchesSection } from './global-search/search-result-panel/sections/no-search.js';
 export { NoSearchResults } from './global-search/search-result-panel/sections/no-search-results.js';
+export { SearchingSection } from './global-search/search-result-panel/sections/searching.js';
 export { SectionContainer } from './global-search/search-result-panel/sections/section-container.js';
 export { WithResults } from './global-search/search-result-panel/sections/with-results.js';
 export { SearchList } from './global-search/search-section/search-list.js';

package/dist/pages/checkout/payment-page/components/adyen-payment.js

@@ -55,6 +55,9 @@ function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, d
                 catch (error) {
                     return onError(error, null);
                 }
+                finally {
+                    dropinDivRef.current?.classList.remove(styles.loading);
+                }
             }),
             onSubmit: (async (state, _component) => {
                 try {
@@ -80,6 +83,9 @@ function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, d
                 catch (error) {
                     return onError(error, null);
                 }
+                finally {
+                    dropinDivRef.current?.classList.remove(styles.loading);
+                }
             }),
             session: {
                 ...adyenSession,

package/dist/pages/checkout/payment-page/components/payment.js

@@ -55,7 +55,12 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
         cart.billTo?.id &&
         countryCode;
     const hasReturnedFromAdyen = useHasReturnedFromAdyen();
-    const isDisabled = hasReturnedFromAdyen || isProcessing;
+    const isDisabled = isProcessing;
+    useEffect(() => {
+        if (!hasReturnedFromAdyen)
+            return;
+        onProcessing(true);
+    }, [hasReturnedFromAdyen, onProcessing]);
     useEffect(() => {
         cartRef.current = _cart;
     }, [_cart]);
@@ -285,12 +290,12 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
         }
     }, [onPaymentComplete, onPlaceOrderCompleted, onProcessing, placeOrder]);
     const onError = useCallback((error, result) => {
+        onProcessing(false);
         invalidateAdyen();
-        // invalidateCurrentCart()
         setPaymentError(error);
         logger.error(error);
         _onError?.(error, result);
-    }, [_onError, invalidateAdyen]);
+    }, [_onError, invalidateAdyen, onProcessing]);
     return (jsxs(Form, { className: styles['payment-form'], "data-test-selector": "paymentForm", id: form, onSubmit: e => {
             e.preventDefault();
             onSubmit(e);

package/dist/styles.css

@@ -718,6 +718,7 @@
   display: block;
   width: var(--width);
   height: var(--width);
+  box-sizing: border-box;
   border: 4px solid transparent;
   border-radius: var(--width);
   animation: progress-circle-module-kCf7K 0.6s infinite linear;
@@ -2982,7 +2983,6 @@
 
 .product-card-module-LepTy {
   container-type: inline-size;
-  inline-size: 100%;
 }
 
 .product-card-module-pLaiB {
@@ -3093,10 +3093,12 @@
 .product-card-module-pLaiB {
     --box-shadow: var(--box-shadow-heavy);
 
-    grid-template: 204px var(--space-8) repeat(3, minmax(0, min-content)) minmax(
+    grid-template:
+      204px var(--space-8) repeat(3, minmax(0, min-content)) minmax(
         var(--space-16),
         1fr
-      ) minmax(0, min-content) / 1fr minmax(0, min-content);
+      )
+      minmax(0, min-content) / 1fr minmax(0, min-content);
     grid-template-areas:
       'image image'
       '. .'
@@ -5032,6 +5034,16 @@ button.swiper-pagination-bullet {
       list-style: initial;
     }
 
+.search-content-module-qQMqH {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+}
+
 @media (width >= 768px) {
   .search-content-module-ZMwlB {
     padding-left: var(--space-8);

package/package.json

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