@nyris/nyris-webapp 0.3.97 → 0.3.99

package/src/components/Product/Product.tsx

@@ -13,6 +13,10 @@ import { twMerge } from 'tailwind-merge';
 import NoImage from '../../common/assets/images/no-image.svg';
 import ProductDetailViewModal from './ProductDetailViewModal';
 import Tooltip from 'components/Tooltip/TooltipComponent';
+import { trackClick, trackConversion } from 'services/Feedback';
+import { CLICK_SUBTYPE, CONVERSION_SUBTYPE } from 'services/feedbackSubtypes';
+import useResultStore from 'stores/result/resultStore';
+import { productCardImageUrl } from 'utils/productCardImageUrl';
 
 interface Props {
   dataItem: any;
@@ -35,8 +39,15 @@ function Product(props: Props) {
     onSearchImage,
     handlerFeedback,
     main_image_link,
+    indexItem,
   } = props;
+  const productRef = { sku: dataItem?.sku, position: indexItem };
   const [urlImage, setUrlImage] = useState<string>('');
+  const [showOriginalImage, setShowOriginalImage] = useState(false);
+  const cardImageUrl =
+    typeof main_image_link === 'string' && main_image_link
+      ? productCardImageUrl(main_image_link)
+      : '';
   const settings = window.settings;
   const [copiedKey, setCopiedKey] = useState<'main' | 'secondary' | null>(null);
   const copyTimeoutRef = useRef<number | undefined>(undefined);
@@ -46,8 +57,9 @@ function Product(props: Props) {
   >();
 
   useEffect(() => {
-    if (main_image_link) {
-      handlerCheckUrlImage(main_image_link);
+    setShowOriginalImage(false);
+    if (typeof main_image_link === 'string' && main_image_link) {
+      handlerCheckUrlImage(productCardImageUrl(main_image_link));
     }
   }, [main_image_link]);
 
@@ -81,17 +93,26 @@ function Product(props: Props) {
   };
 
   const handlerToggleModal = (_item?: any) => {
+    trackClick(CLICK_SUBTYPE.RESULT_CARD, productRef);
     setOpenDetailedView('image');
   };
 
-  const onAddToCart = (part: any): void => {
+  const onAddToCart = (part: any, position: number = indexItem): void => {
     // Get current cart from sessionStorage
     const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
     // Find if part already exists in cart
     const partIndex = cart.findIndex((p: any) => p.sku === part.sku);
     if (partIndex === -1) {
-      // Add new part with quantity 1
-      cart.push({ ...part, quantity: 1 });
+      // Add new part with quantity 1; remember which search it came from so
+      // cart conversions can be tied back to the originating request.
+      const { requestId, sessionId } = useResultStore.getState();
+      cart.push({
+        ...part,
+        quantity: 1,
+        feedbackRequestId: requestId,
+        feedbackSessionId: sessionId,
+        feedbackPosition: position,
+      });
     } else {
       // Increment quantity
       cart[partIndex] = {
@@ -102,10 +123,16 @@ function Product(props: Props) {
     sessionStorage.setItem('cart', JSON.stringify(cart));
     window.dispatchEvent(new Event('cart-updated'));
     ToastHelper.success('Product added');
+    trackConversion(CONVERSION_SUBTYPE.ADD_TO_CART, {
+      skus: [part?.sku],
+      positions: [position],
+      quantity: 1,
+    });
   };
 
   const handleCopy = (value: string, key: 'main' | 'secondary') => {
     navigator.clipboard.writeText(value);
+    trackClick(CLICK_SUBTYPE.COPY_DETAILS, productRef);
     setCopiedKey(key);
     if (copyTimeoutRef.current) {
       window.clearTimeout(copyTimeoutRef.current);
@@ -124,6 +151,7 @@ function Product(props: Props) {
         openDetailedView={openDetailedView}
         setOpenDetailedView={setOpenDetailedView}
         onAddToCart={onAddToCart}
+        indexItem={indexItem}
       />
       <div
         className={twMerge(
@@ -141,6 +169,7 @@ function Product(props: Props) {
               className="box-icon-modal"
               onClick={() => {
                 if (urlImage.length > 1) {
+                  trackClick(CLICK_SUBTYPE.SIMILAR_PART_SEARCH, productRef);
                   onSearchImage(main_image_link);
                 }
               }}
@@ -157,6 +186,7 @@ function Product(props: Props) {
             <div
               className="box-icon-modal-3d"
               onClick={() => {
+                trackClick(CLICK_SUBTYPE.EXPAND_DETAILS, productRef);
                 setOpenDetailedView('3d');
               }}
             >
@@ -189,7 +219,11 @@ function Product(props: Props) {
             >
               {main_image_link && (
                 <img
-                  src={main_image_link}
+                  src={
+                    showOriginalImage || !cardImageUrl
+                      ? main_image_link
+                      : cardImageUrl
+                  }
                   key={main_image_link}
                   alt=""
                   className="img-style product-image"
@@ -198,6 +232,13 @@ function Product(props: Props) {
                     height: '100%',
                     objectFit: 'contain',
                   }}
+                  onError={() => {
+                    if (showOriginalImage || cardImageUrl === main_image_link) {
+                      return;
+                    }
+                    setShowOriginalImage(true);
+                    handlerCheckUrlImage(main_image_link);
+                  }}
                 />
               )}
 
@@ -265,7 +306,10 @@ function Product(props: Props) {
                   }}
                   onClick={() => {
                     if (settings.CTAButton?.CTALinkField) {
-                      // feedbackConversionEpic(state, indexItem, dataItem.sku);
+                      trackConversion(undefined, {
+                        skus: [dataItem?.sku],
+                        positions: [indexItem],
+                      });
                       window.open(
                         `${get(dataItem, settings.CTAButton?.CTALinkField)}`,
                         '_blank',
@@ -533,7 +577,10 @@ function Product(props: Props) {
                     }}
                     onClick={() => {
                       if (settings.secondaryCTAButton?.secondaryCTALinkField) {
-                        // feedbackConversionEpic(state, indexItem, dataItem.sku);
+                        trackConversion(undefined, {
+                          skus: [dataItem?.sku],
+                          positions: [indexItem],
+                        });
                         window.open(
                           `${get(
                             dataItem,
@@ -616,7 +663,10 @@ function Product(props: Props) {
                     }}
                     onClick={() => {
                       if (settings.CTAButton?.CTALinkField) {
-                        // feedbackConversionEpic(state, indexItem, dataItem.sku);
+                        trackConversion(undefined, {
+                          skus: [dataItem?.sku],
+                          positions: [indexItem],
+                        });
                         window.open(
                           `${get(dataItem, settings.CTAButton?.CTALinkField)}`,
                           '_blank',
@@ -700,7 +750,7 @@ function Product(props: Props) {
                       cursor: 'pointer',
                     }}
                     onClick={() => {
-                      onAddToCart(dataItem);
+                      onAddToCart(dataItem, indexItem);
                     }}
                   >
                     <div

package/src/components/Product/ProductDetailView.tsx

@@ -20,6 +20,8 @@ import {
   AccordionTrigger,
 } from 'components/Accordion';
 import Tooltip from 'components/Tooltip/TooltipComponent';
+import { trackClick, trackConversion } from 'services/Feedback';
+import { CLICK_SUBTYPE } from 'services/feedbackSubtypes';
 
 interface Props {
   dataItem?: any;
@@ -29,6 +31,8 @@ interface Props {
   show3dView?: boolean;
   onSearchImage?: any;
   onAddToCart?: any;
+  /** Zero-based position of the product in the rendered result list. */
+  indexItem?: number;
 }
 
 function ProductDetailView(props: Props) {
@@ -38,8 +42,10 @@ function ProductDetailView(props: Props) {
     show3dView = false,
     onSearchImage,
     onAddToCart,
+    indexItem,
   } = props;
   const { sku } = dataItem;
+  const productRef = { sku, position: indexItem };
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const { settings } = window;
 
@@ -76,6 +82,7 @@ function ProductDetailView(props: Props) {
   }, []);
   const handleCopy = (value: string, key: 'main' | 'secondary') => {
     navigator.clipboard.writeText(value);
+    trackClick(CLICK_SUBTYPE.COPY_DETAILS, productRef);
     setCopiedKey(key);
     if (copyTimeoutRef.current) {
       window.clearTimeout(copyTimeoutRef.current);
@@ -151,6 +158,7 @@ function ProductDetailView(props: Props) {
               }`}
               onClick={() => {
                 if (urlImage.length > 1) {
+                  trackClick(CLICK_SUBTYPE.SIMILAR_PART_SEARCH, productRef);
                   onSearchImage(urlImage);
                   handleClose?.();
                   return;
@@ -176,6 +184,7 @@ function ProductDetailView(props: Props) {
               <div
                 className="bg-[#E9E9EC] w-8 h-8 rounded-full flex justify-center items-center cursor-pointer"
                 onClick={() => {
+                  trackClick(CLICK_SUBTYPE.EXPAND_DETAILS, productRef);
                   setIs3dView(true);
                 }}
               >
@@ -356,6 +365,10 @@ function ProductDetailView(props: Props) {
                             if (
                               settings.secondaryCTAButton?.secondaryCTALinkField
                             ) {
+                              trackConversion(undefined, {
+                                skus: [sku],
+                                positions: [indexItem],
+                              });
                               window.open(
                                 `${get(
                                   dataItem,
@@ -406,6 +419,10 @@ function ProductDetailView(props: Props) {
                           className="flex justify-between items-center w-full px-3 min-h-8 cursor-pointer"
                           onClick={() => {
                             if (settings.CTAButton?.CTALinkField) {
+                              trackConversion(undefined, {
+                                skus: [sku],
+                                positions: [indexItem],
+                              });
                               window.open(
                                 `${get(
                                   dataItem,
@@ -468,7 +485,7 @@ function ProductDetailView(props: Props) {
                       <div
                         className="flex justify-between items-center w-full px-3 min-h-8 cursor-pointer"
                         onClick={() => {
-                          onAddToCart(dataItem);
+                          onAddToCart(dataItem, indexItem);
                         }}
                       >
                         <div className="text-f16 fw-600 max-line-1 text-white pr-1.5">
@@ -495,6 +512,11 @@ function ProductDetailView(props: Props) {
                     collapsible
                     className="w-full"
                     defaultValue="view-details"
+                    onValueChange={value => {
+                      if (value) {
+                        trackClick(CLICK_SUBTYPE.EXPAND_DETAILS, productRef);
+                      }
+                    }}
                   >
                     <AccordionItem value="view-details">
                       <AccordionTrigger className="w-full button-hover bg-[#F3F3F5] text-[#2b2c46] flex justify-between mt-3 px-4 text-base normal-case">

package/src/components/Product/ProductDetailViewModal.tsx

@@ -9,13 +9,16 @@ function ProductDetailViewModal({
   handlerFeedback,
   onSearchImage,
   onAddToCart,
+  indexItem,
 }: {
   openDetailedView: '3d' | 'image' | undefined;
   setOpenDetailedView: (value: '3d' | 'image' | undefined) => void;
   dataItem: any;
   handlerFeedback: (value: string) => void;
   onSearchImage: (url: string) => void;
-  onAddToCart: (item: any) => void;
+  onAddToCart: (item: any, position?: number) => void;
+  /** Zero-based position of the product in the rendered result list. */
+  indexItem?: number;
 }) {
   useEffect(() => {
     if (openDetailedView === '3d' || openDetailedView === 'image') {
@@ -64,6 +67,7 @@ function ProductDetailViewModal({
             onSearchImage(url);
           }}
           onAddToCart={onAddToCart}
+          indexItem={indexItem}
         />
       </DialogContent>
     </Dialog>

package/src/components/Product/ProductList.tsx

@@ -4,6 +4,7 @@ import Product from './Product';
 import { useImageSearch } from 'hooks/useImageSearch';
 import useRequestStore from 'stores/request/requestStore';
 import useUiStore from 'stores/ui/uiStore';
+import useScopeStore from 'stores/scope/scopeStore';
 import { useTranslation } from 'react-i18next';
 import { twMerge } from 'tailwind-merge';
 import { filterProducts } from 'utils/specificationFilter';
@@ -12,9 +13,13 @@ import { useEffectiveGroundingResults } from 'hooks/useEffectiveGroundingResults
 
 interface Props {
   sendFeedBackAction?: any;
+  onRenderedCountChange?: (count: number) => void;
 }
 
-function ProductList({ sendFeedBackAction }: Props): JSX.Element {
+function ProductList({
+  sendFeedBackAction,
+  onRenderedCountChange,
+}: Props): JSX.Element {
   const settings = window.settings;
   const { singleImageSearch } = useImageSearch();
   const { t } = useTranslation();
@@ -49,7 +54,15 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
   const postFilterSelections = useRequestStore(
     state => state.postFilterSelections,
   );
-
+  const useApiPostFilters =
+    !settings.algolia?.enabled && settings.postFilterUseApi === true;
+
+  const scopeId = useScopeStore(state => state.scopeId);
+  const scopeItemKeyCount = useScopeStore(state => state.itemKeys.length);
+  const hasMachineScope =
+    Boolean(window.settings.scopes?.scopeID) &&
+    Boolean(scopeId) &&
+    scopeItemKeyCount > 0;
   const textFilteredProducts = useMemo(() => {
     if (!requestImages?.length) {
       return productsFromFindApi;
@@ -63,7 +76,7 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
   }, [productsFromFindApi, query, requestImages]);
 
   const postFilteredProducts = useMemo(() => {
-    if (!window.settings.algolia?.enabled && window.settings.postFilterOption) {
+    if (useApiPostFilters) {
       return textFilteredProducts;
     }
 
@@ -87,7 +100,7 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
         return selectedValues.some(value => productValues.includes(value));
       });
     });
-  }, [postFilterSelections, textFilteredProducts]);
+  }, [postFilterSelections, textFilteredProducts, useApiPostFilters]);
 
   const getUrlToCanvasFile = async (url: string) => {
     setQuery('');
@@ -97,6 +110,7 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
       image: url,
       settings,
       showFeedback: true,
+      newSearch: true,
       compress: false,
       clearPostFilter: true,
     }).then(() => {});
@@ -107,14 +121,18 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
     const filter = Object.values(specificationFilter || {})[0];
     const baseFindApiProducts = postFilteredProducts;
 
+    const resultSource = hasMachineScope
+      ? baseFindApiProducts
+      : isAlgoliaEnabled
+        ? productsFromAlgolia
+        : baseFindApiProducts;
+
     if (filter) {
-      return filterProducts(
-        filter,
-        isAlgoliaEnabled ? productsFromAlgolia : baseFindApiProducts,
-      );
+      return filterProducts(filter, resultSource);
     }
 
-    if (!isAlgoliaEnabled) {
+    // Scoped results always come from Find API. Algolia cannot apply a machine scope.
+    if (hasMachineScope || !isAlgoliaEnabled) {
       return baseFindApiProducts;
     }
 
@@ -129,6 +147,7 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
     isAlgoliaLoading,
     query,
     postFilteredProducts,
+    hasMachineScope,
   ]);
 
   useEffect(() => {
@@ -150,14 +169,24 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
     return products;
   }, [effectiveGroundingResults, products]);
 
-  const renderItem = useMemo(() => {
-    const productsToRender: any[] =
-      groundedFilteredProducts &&
+  const productsToRender: any[] = useMemo(() => {
+    return groundedFilteredProducts &&
       groundedFilteredProducts.length > 0 &&
       showingGroundingFilterResult
-        ? groundedFilteredProducts
-        : products;
+      ? groundedFilteredProducts
+      : products;
+  }, [groundedFilteredProducts, showingGroundingFilterResult, products]);
 
+  const isZeroState =
+    products?.length === 0 && !isAlgoliaLoading && !isFindApiLoading;
+
+  const actualRenderedCount = isZeroState ? 0 : productsToRender.length;
+
+  useEffect(() => {
+    onRenderedCountChange?.(actualRenderedCount);
+  }, [actualRenderedCount, onRenderedCountChange]);
+
+  const renderItem = useMemo(() => {
     return (
       <div className={twMerge(['contents'])}>
         {productsToRender?.map((product: any, i: number) => {
@@ -202,6 +231,7 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
     groundedFilteredProducts,
     showingGroundingFilterResult,
     isAiModeOpen,
+    productsToRender,
   ]);
 
   if (
@@ -209,7 +239,8 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
     !isAlgoliaLoading &&
     !isFindApiLoading &&
     !query &&
-    !requestImages[0]
+    !requestImages[0] &&
+    !hasMachineScope
   ) {
     return (
       <div className="flex justify-center items-center h-full col-span-full">
@@ -220,7 +251,11 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
     );
   }
 
-  if (products?.length === 0 && !isAlgoliaLoading && !isFindApiLoading) {
+  if (
+    products?.length === 0 &&
+    !isAlgoliaLoading &&
+    !isFindApiLoading
+  ) {
     return (
       <div className="flex justify-center items-center h-full col-span-full">
         <div className="text-center text-[#AAABB5]">

package/src/components/Rfq/RfqModal.tsx

@@ -9,6 +9,8 @@ import { Dialog, DialogContent } from 'components/Modal/Dialog';
 import { getCroppedCanvas } from 'utils/misc';
 import { ToastHelper } from 'helpers/ToastHelper';
 import useRequestStore from 'stores/request/requestStore';
+import { trackClick } from 'services/Feedback';
+import { CLICK_SUBTYPE } from 'services/feedbackSubtypes';
 
 import { useTranslation } from 'react-i18next';
 interface Props {
@@ -77,6 +79,7 @@ export default function RfqModal({
         });
         setRfqStatus('sent');
         ToastHelper.success(t('Request sent successfully'));
+        trackClick(CLICK_SUBTYPE.RAISE_INQUIRY);
       } catch (error) {
         setRfqStatus('inactive');