@nyris/nyris-webapp 0.3.55 → 0.3.57

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.55",
+  "version": "0.3.57",
   "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.55",
-    "@nyris/nyris-react-components": "^0.3.55",
+    "@nyris/nyris-api": "^0.3.57",
+    "@nyris/nyris-react-components": "^0.3.57",
     "@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,7 @@ var settings = {
   CTAButtonText: 'View More',
   simpleCardView: false,
   secondaryCTAButtonText: 'Configure Now',
+  clarityId: '',
 
   //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/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/current-refinements/current-refinements.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
-import { atom } from 'jotai';
 import { useMemo } from 'react';
 import type {
   CurrentRefinementsProvided,
@@ -25,8 +24,6 @@ export type CurrentRefinement = {
   value: RefinementValue;
 };
 
-export const refinementCountAtom = atom(0);
-
 function CurrentRefinementsComponent({
   items,
   refine,
@@ -62,8 +59,7 @@ function CurrentRefinementsComponent({
     <div
       className={className}
       style={{
-        marginBottom: refinements.length > 0 ? '10px' : '0px',
-        marginTop: refinements.length > 0 ? '16px' : '0px',
+        marginBottom: '16px',
       }}
     >
       <ul className="flex flex-wrap gap-3">

package/src/components/results/ItemResult.tsx

@@ -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,16 +490,21 @@ button {
     }
     .info-marking {
       width: max-content;
-      background: #E9E9EC;
+      background: #E0E0E0;
       border-radius: 2px;
       padding: 4px;
       word-break: break-all;
-      line-height: 14px;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 12px;
+      letter-spacing: 0.22857144474983215px;
+      text-align: left;
     }
     .info-description {
-      font-size: 14px;
+      font-size: 16px;
       font-weight: 400;
-      line-height: 19.94px;
+      line-height: 22.78px;
+      letter-spacing: 0.22857144474983215px;
       padding: 8px 0 0 4px;
     }
   }
@@ -956,7 +961,7 @@ button {
     
     .go-back-button {
       margin-left: 24px;
-      margin-top: 24px;
+      margin-bottom: 24px;
       padding: 8px;
       border-radius: 20px;
       width: max-content;
@@ -1063,43 +1068,62 @@ 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: 14px;
+              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;
               padding: 2px 4px;
-              font-size: 12px;
+              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;
-              font-size: 10px;
+              font-size: 14px;
               font-weight: 400;
-              line-height: 11.39px;
-              padding-left: 2px;
+              line-height: 19.94px;
+              letter-spacing: 0.22857144474983215px;
+              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/page/result/index.tsx

@@ -456,7 +456,7 @@ function ResultComponent(props: Props) {
                   settings.preview && 'ml-auto mr-auto'
                 } ${isMobile && 'col-right-result-mobile'}`}
                 style={{
-                  paddingTop: isMobile ? '8px' : '',
+                  paddingTop: isMobile ? '8px' : '40px',
                   overflow: !isMobile ? 'auto' : '',
                   display: 'flex',
                   flexDirection: 'column',
@@ -509,7 +509,6 @@ function ResultComponent(props: Props) {
                     className={'box-item-result ml-auto mr-auto'}
                     style={{
                       paddingLeft: isMobile ? 0 : 16,
-                      paddingTop: isMobile ? 0 : 16,
                       height: '100%',
                       position: 'relative',
                     }}

package/src/types.ts

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