@nyris/nyris-webapp 0.3.56 → 0.3.58

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.56",
+  "version": "0.3.58",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
-    "@nyris/nyris-api": "^0.3.56",
-    "@nyris/nyris-react-components": "^0.3.56",
+    "@nyris/nyris-api": "^0.3.58",
+    "@nyris/nyris-react-components": "^0.3.58",
     "@reduxjs/toolkit": "^2.2.1",
     "@splidejs/react-splide": "^0.7.12",
     "@testing-library/jest-dom": "^5.17.0",

package/public/js/settings.example.js

@@ -79,6 +79,8 @@ var settings = {
   CTAButtonText: 'View More',
   simpleCardView: false,
   secondaryCTAButtonText: 'Configure Now',
+  clarityId: '',
+  noSimilarSearch: true,
 
   //field mappins
   field: {

package/src/components/DragDropFile.tsx

@@ -41,7 +41,8 @@ function DragDropFile(props: Props) {
   } = searchState;
   const { t } = useTranslation();
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop: async (fs: File[]) => {
+    onDrop: async (fs: File[], _, e) => {
+      e.stopPropagation();
       history.push('/result');
       dispatch(updateStatusLoading(true));
       dispatch(loadingActionResults());
@@ -126,7 +127,7 @@ function DragDropFile(props: Props) {
           <div style={{ marginBottom: 16 }}>
             <IconDownload width={48} height={48} />
           </div>
-          <label htmlFor="select_file" className="" style={{ fontSize: 14 }}>
+          <label className="" style={{ fontSize: 14 }}>
             <span className="fw-700 text-f14" style={{ paddingRight: '4px' }}>
               {t('Drag and drop')}
             </span>

package/src/components/ProductDetailView.tsx

@@ -188,7 +188,7 @@ function ProductDetailView(props: Props) {
               }}
             />
           )}
-          {dataImageCarousel.length > 0 && (
+          {dataImageCarousel.length > 0 && !settings.noSimilarSearch && (
             <Button
               className={classes.buttonStyleImageSearch}
               style={{

package/src/components/ProductList/index.tsx

@@ -58,7 +58,7 @@ function ProductListComponent({
     }
     return productList.map((hit: any, i: number) => {
       return (
-        <div key={i} style={{ height: 'fit-content' }}>
+        <div key={i} style={{ height: 'fit-content' }} className={settings.simpleCardView ? 'border' : ''}>
           <ItemResult
             dataItem={hit}
             indexItem={i}

package/src/components/pre-filter/index.tsx

@@ -331,12 +331,11 @@ function PreFilterComponent(props: Props) {
                 columnCount: 4,
                 padding: '24px 24px 40px 24px',
                 height: '100%',
-
                 backgroundColor: '#FAFAFA',
               }
         }
       >
-        {Object.entries(resultFilter).map(([key, value]: any, i: any) => {
+        {Object.entries(resultFilter).sort().map(([key, value]: any, i: any) => {
           return (
             <div className="box-group-items" key={key}>
               <div

package/src/components/results/ItemResult.tsx

@@ -166,7 +166,7 @@ function ItemResult(props: Props) {
             </Button>
           </div>
         )}
-        {!isHover && main_image_link && (
+        {!isHover && main_image_link && !settings.noSimilarSearch && (
           <div
             className="box-icon-modal"
             onClick={() => {
@@ -226,7 +226,14 @@ function ItemResult(props: Props) {
         <div className="info-container">
           <div className="info-sku">{dataItem.sku}</div>
           <span className="info-marking">{dataItem.Bezeichnung}</span>
-          <div className="info-description">{settings.language === 'en' ? dataItem.VK_Text_Englisch : dataItem.VK_Text_Deutsch}</div>
+          <Tooltip
+            title={settings.language === 'en' ? dataItem.VK_Text_Englisch: dataItem.VK_Text_Deutsch}
+            placement="top"
+            arrow={true}
+            disableHoverListener={settings.language === 'en' ? dataItem.VK_Text_Englisch?.length < 76 : dataItem.VK_Text_Deutsch?.length < 76}
+          >
+            <div className="info-description">{settings.language === 'en' ? dataItem.VK_Text_Englisch : dataItem.VK_Text_Deutsch}</div>
+          </Tooltip>
         </div>
       ) : (
         <div

package/src/page/landingPage/AppMD.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import './common.scss';
 import algoliasearch from 'algoliasearch/lite';
 import DragDropFile from 'components/DragDropFile';
@@ -15,11 +15,38 @@ function AppMD() {
   const searchClient = algoliasearch(appId, apiKey);
   searchClient.initIndex(indexName);
 
+    useEffect(() => {
+      if (settings.clarityId) {
+        clarify(window, document, 'clarity', 'script', settings.clarityId); 
+      }
+    }, [settings.clarityId]);
+
   const acceptTypes = ['image/*'];
   const InfiniteHits = ({ hits }: any) => {
     return <div></div>;
   };
 
+  const clarify = function (
+    c: any,
+    l: Document,
+    a: string,
+    r: string,
+    i: string
+  ) {
+    c[a] =
+      c[a] ||
+      function () {
+      (c[a].q = c[a].q || []).push(arguments);
+    };
+    const t: any = l.createElement(r);
+    t.async = true;
+    t.src = `https://www.clarity.ms/tag/${i}`;
+    const y = l.getElementsByTagName(r)[0];
+    if (y.parentNode) {
+      y.parentNode.insertBefore(t, y);
+    }
+  };
+
   const onChangeLoading = (value: boolean) => {
     setLoading(value);
   };

package/src/page/landingPage/AppMobile.tsx

@@ -1,5 +1,5 @@
 import CameraCustom from 'components/drawer/cameraCustom';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useAppSelector } from 'Store/Store';
 import { ReactComponent as CameraIcon } from 'common/assets/icons/take_photo.svg';
 import ExperienceVisualSearch from '../../components/Experience-visual-search/ExperienceVisualSearch';
@@ -8,6 +8,33 @@ function AppMobile(): JSX.Element {
   const { settings } = useAppSelector(state => state);
   const [isOpenModalCamera, setOpenModalCamera] = useState<boolean>(false);
 
+  useEffect(() => {
+    if (settings.clarityId) {
+      clarify(window, document, 'clarity', 'script', settings.clarityId);
+    }
+  }, [settings.clarityId]);
+
+  const clarify = function (
+    c: any,
+    l: Document,
+    a: string,
+    r: string,
+    i: string
+  ) {
+    c[a] =
+      c[a] ||
+      function () {
+        (c[a].q = c[a].q || []).push(arguments);
+      };
+    const t: any = l.createElement(r);
+    t.async = true;
+    t.src = `https://www.clarity.ms/tag/${i}`;
+    const y = l.getElementsByTagName(r)[0];
+    if (y.parentNode) {
+      y.parentNode.insertBefore(t, y);
+    }
+  };
+
   return (
     <div
       style={{

package/src/page/landingPage/common.scss

@@ -490,7 +490,7 @@ button {
     }
     .info-marking {
       width: max-content;
-      background: #E9E9EC;
+      background: #E0E0E0;
       border-radius: 2px;
       padding: 4px;
       word-break: break-all;
@@ -1068,26 +1068,32 @@ button {
         flex-wrap: wrap;
         gap: 24px;
         padding-left: 2px;
+        .border {
+          border: 1px solid #E0E0E0;
+          border-radius: 4px;
+        }
         .wrap-main-item-result {
           display: flex;
           flex-direction: column;
-          max-width: 192px;
-          width: 192px;
+          max-width: 190px;
+          width: 190px;
           border-radius: 4px;
           overflow: hidden;
           height: 100%;
           .info-container {
             flex-direction: column;
-            background-color: #FAFAFA;
+            background-color: #F3F3F5;
             flex-grow: 1;
             z-index: 100;
             display: flex;
             padding: 8px;
+            height: 140px;
             .info-sku {
               font-size: 16px;
               font-weight: 700;
-              line-height: 19.94px;
-              padding-left: 2px;
+              line-height: 22.78px;
+              letter-spacing: 0.22857144474983215px;
+              padding-left: 4px;
             }
             .info-marking {
               max-width: max-content;
@@ -1095,9 +1101,15 @@ button {
               font-size: 14px;
               font-weight: 400;
               line-height: 14px;
-              background: #E9E9EC;
+              letter-spacing: 0.22857144474983215px;
+              background: #E0E0E0;
               border-radius: 2px;
               word-break: break-all;
+              overflow: hidden;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              line-clamp: 2;
+              -webkit-box-orient: vertical;
             }
             .info-description {
               margin-top: 8px;
@@ -1105,7 +1117,13 @@ button {
               font-weight: 400;
               line-height: 19.94px;
               letter-spacing: 0.22857144474983215px;
-              padding-left: 2px;
+              word-break: break-all;
+              padding-left: 4px;
+              overflow: hidden;
+              display: -webkit-box;
+              -webkit-line-clamp: 3;
+              line-clamp: 2;
+              -webkit-box-orient: vertical;
             }
           }
         }

package/src/types.ts

@@ -83,6 +83,8 @@ export interface AppSettings extends NyrisAPISettings {
   shouldUseUserMetadata?: boolean;
   experienceVisualSearch?: boolean;
   experienceVisualSearchImages?: string[];
+  clarityId?: string,
+  noSimilarSearch?: boolean;
 }
 
 export interface SearchSuiteSettings {