@nyris/nyris-webapp 0.3.70 → 0.3.71

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.70",
+  "version": "0.3.71",
   "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.70",
-    "@nyris/nyris-react-components": "^0.3.70",
+    "@nyris/nyris-api": "^0.3.71",
+    "@nyris/nyris-react-components": "^0.3.71",
     "@reduxjs/toolkit": "^2.2.1",
     "@splidejs/react-splide": "^0.7.12",
     "@testing-library/jest-dom": "^5.17.0",

package/public/js/settings.example.js

@@ -97,6 +97,7 @@ var settings = {
     emailTemplateId: '',
     supportNumber: '',
     description: '',
+    prefilterFieldName: '',
   },
   cadenas: {
     catalog: '',

package/src/components/Experience-visual-search/ExperienceVisualSearch.tsx

@@ -11,6 +11,7 @@ import {
 import { useImageSearch } from 'hooks/useImageSearch';
 import { useHistory } from 'react-router-dom';
 import { Icon } from '@nyris/nyris-react-components';
+import { useTranslation } from 'react-i18next';
 
 function ExperienceVisualSearch({
   experienceVisualSearchBlobs,
@@ -26,28 +27,26 @@ function ExperienceVisualSearch({
 
   const { singleImageSearch } = useImageSearch();
 
+  const { t } = useTranslation();
+
+  const [expand, setExpand] = useState(false);
+
   useEffect(() => {
+    let intervalId: any;
     if (document.body.getBoundingClientRect().width >= 776) {
       if (!showModal) {
-        interval.current = setInterval(() => {
-          if (button?.current) {
-            (button.current as HTMLElement).classList.toggle('hover');
-          }
+        intervalId = setInterval(() => {
+          setExpand(s => !s);
         }, 3000);
       } else if (interval?.current) {
         clearInterval(interval?.current);
-        if (
-          button?.current &&
-          !(button.current as HTMLElement).classList.contains('hover')
-        ) {
-          (button.current as HTMLElement).classList.toggle('hover');
-        }
+        setExpand(false);
       }
       return () => {
-        if (interval?.current) {
-          clearInterval(interval?.current);
-        }
+        clearInterval(intervalId);
       };
+    } else {
+      setExpand(true);
     }
   }, [showModal]);
 
@@ -72,13 +71,25 @@ function ExperienceVisualSearch({
 
   return (
     <>
-      <div
-        ref={button}
-        className="experience-visual-button"
-        onClick={() => modalToggle(true)}
-      >
-        <span />
-        <ExperienceIcon />
+      <div className="flex flex-col items-center">
+        <div
+          ref={button}
+          className={`group bg-[#3E36DC] w-[215px] desktop:w-10 hover:w-[215px] hover:gap-2 ${
+            expand ? 'desktop:w-[215px] gap-2' : ''
+          } h-10 flex flex-row justify-center items-center rounded-full cursor-pointer my-8 transition-all duration-300`}
+          onClick={() => modalToggle(true)}
+        >
+          <span
+            className={`${
+              expand ? 'flex-grow max-w-fit' : 'flex-grow-0 w-0'
+            } group-hover:flex-grow group-hover:max-w-fit overflow-hidden whitespace-nowrap text-sm font-semibold leading-4 text-center text-white break-keep transition-all duration-300`}
+          >
+            {t('Experience Visual Search')}
+          </span>
+          <div className="flex flex-grow-0">
+            <ExperienceIcon className="" />
+          </div>
+        </div>
       </div>
       {showModal &&
         createPortal(
@@ -104,10 +115,10 @@ function ExperienceVisualSearch({
                 }}
               />
               <div className="custom-modal-body-title">
-                Experience Visual Search
+                {t('Experience Visual Search')}
               </div>
               <div className="custom-modal-body-subtitle">
-                Start your visual search by selecting an image below.
+                {t('Start your visual search by selecting an image below.')}
               </div>
               <div className="custom-modal-body-content experience-visual-search-images">
                 {new Array(4).fill(1).map((val, index) => {

package/src/components/Feedback.tsx

@@ -1,5 +1,6 @@
 import { Icon } from '@nyris/nyris-react-components';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 function Feedback({
   submitFeedback,
@@ -10,6 +11,8 @@ function Feedback({
 }) {
   const [isHovered, setIsHovered] = useState(false);
 
+  const { t } = useTranslation();
+
   return (
     <div
       className={`feedback-wrapper`}
@@ -18,7 +21,7 @@ function Feedback({
         transition: 'background-color 0.3s ease',
       }}
     >
-      <p className="desktop:w-[146px]">Are these results useful?</p>
+      <p className="desktop:w-[146px]">{t('Are these results useful?')}</p>
       <div
         className="feedback-icon-wrapper"
         onClick={() => submitFeedback(false)}

package/src/components/ImagePreview.tsx

@@ -294,6 +294,7 @@ function ImagePreviewComponent({
               borderRadius: '16px',
               zIndex: 1000,
               height: 'fit-content',
+              alignItems: 'center',
             }}
           >
             <Icon name="info" color="white" width={12} height={12} />
@@ -306,7 +307,7 @@ function ImagePreviewComponent({
             >
               {showAdjustInfo
                 ? t('Crop the image for better results')
-                : 'Crop the image for better results'}
+                : t('Adjust the selection frame for better results')}
             </p>
           </div>
         )}
@@ -396,7 +397,7 @@ function ImagePreviewComponent({
             >
               {showAdjustInfo
                 ? t('Crop the image for better results')
-                : 'Crop the image for better results'}
+                : t('Adjust the selection frame for better results')}
             </p>
           </div>
         )}

package/src/components/Inquiry/InquiryBanner.tsx

@@ -155,7 +155,7 @@ function InquiryBanner({
                       justifyContent: 'space-between',
                     }}
                   >
-                    <p>Inquiry</p>
+                    <p>{t('Inquiry')}</p>
                     <Icon name="email" color="#fff" width={16} height={12} />
                   </div>
                 </div>
@@ -190,7 +190,7 @@ function InquiryBanner({
                       justifyContent: 'space-between',
                     }}
                   >
-                    <p> Call us</p>
+                    <p> {t('Call us')}</p>
                     <Icon name="call" color="#fff" width={16} height={16} />
                   </div>
                 </a>

package/src/components/Inquiry/InquiryModal.tsx

@@ -11,6 +11,7 @@ import toast from 'react-hot-toast';
 import { useAppSelector } from 'Store/Store';
 import { useMediaQuery } from 'react-responsive';
 import { Icon } from '@nyris/nyris-react-components';
+import { useTranslation } from 'react-i18next';
 interface Props {
   requestImage: any;
   selectedRegion: any;
@@ -60,6 +61,7 @@ export default function InquiryModal({
     },
     [setInformation],
   );
+  const { t } = useTranslation();
 
   useEffect(() => emailjs.init('SMGihPnuEGcYLm0V4'), []);
   useEffect(() => {
@@ -173,8 +175,8 @@ export default function InquiryModal({
             }}
           >
             {requestImage
-              ? 'Submit your image for inquiry'
-              : 'Submit your inquiry'}
+              ? t('Submit your image for inquiry')
+              : t('Submit your inquiry')}
           </p>
           <div
             onClick={() => setIsInquiryModalOpen(false)}
@@ -223,7 +225,7 @@ export default function InquiryModal({
                 marginBottom: '8px',
               }}
             >
-              Your email (required)
+              {t('Your email (required)')}
             </p>
             <input
               value={email}
@@ -239,7 +241,7 @@ export default function InquiryModal({
             />
             {!emailValid && !isUndefined(emailValid) && (
               <p style={{ color: 'red', fontSize: '12px', paddingTop: '8px' }}>
-                Please enter a valid email.
+                {t('Please enter a valid email.')}
               </p>
             )}
           </div>
@@ -259,21 +261,23 @@ export default function InquiryModal({
                     color: '#2B2C46',
                   }}
                 >
-                  Machine
+                  {settings.support.prefilterFieldName}
                 </p>
                 <Tooltip
                   title={
-                    'Please select a pre-filter before search request to refine and yield accurate results.'
+                    t('Please select a search criteria before search request to refine and yield accurate results.')
                   }
                   placement="top"
                   arrow={true}
                 >
-                  <Icon
-                    name="info"
-                    style={{ cursor: 'pointer' }}
-                    width={12}
-                    height={12}
-                  />
+                  <div>
+                    <Icon
+                      name="info"
+                      style={{ cursor: 'pointer' }}
+                      width={12}
+                      height={12}
+                    />
+                  </div>
                 </Tooltip>
               </div>
 
@@ -288,7 +292,7 @@ export default function InquiryModal({
                   backgroundColor: '#fff',
                 }}
               >
-                {preFilterValues.join(', ') || 'Pre-filter is not selected'}
+                {preFilterValues.join(', ') || t('Search criteria is not selected')}
               </div>
             </div>
           )}
@@ -303,7 +307,7 @@ export default function InquiryModal({
                 color: '#2B2C46',
               }}
             >
-              <p>Additional information</p>
+              <p>{t('Additional information')}</p>
               <p>{`${information.length}/150`}</p>
             </div>
             <TextareaAutosize
@@ -337,7 +341,7 @@ export default function InquiryModal({
             }}
             onClick={() => setIsInquiryModalOpen(false)}
           >
-            Cancel
+            {t('Cancel')}
           </button>
           <button
             style={{
@@ -357,7 +361,7 @@ export default function InquiryModal({
             disabled={!emailValid}
             onClick={handleInquiry}
           >
-            Send
+            {t('Send')}
           </button>
         </div>
       </div>

package/src/components/UploadDisclaimer.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { Icon, makeFileHandler } from '@nyris/nyris-react-components';
+import { useTranslation } from 'react-i18next';
 
 function UploadDisclaimer({
   onClose,
@@ -13,7 +14,7 @@ function UploadDisclaimer({
   isMobile: boolean;
 }) {
   const [dontShowAgain, setDontShowAgain] = useState(false);
-
+  const { t } = useTranslation();
   return (
     <>
       {createPortal(
@@ -21,7 +22,9 @@ function UploadDisclaimer({
           <div className="bg-white w-80">
             <div className="p-4">
               <div className="flex justify-between items-center">
-                <div className="font-bold text-xl">Replace Current Data?</div>
+                <div className="font-bold text-xl">
+                  {t('Replace Current Data?')}
+                </div>
                 <Icon
                   name="close"
                   className="cursor-pointer"
@@ -31,8 +34,9 @@ function UploadDisclaimer({
                 />
               </div>
               <p className="text-sm mt-4">
-                Uploading a new image will overwrite your current search
-                parameters, text, and results. Are you sure you want to proceed?
+                {t(
+                  `Uploading a new image will overwrite your current search parameters, text, and results. Are you sure you want to proceed?`,
+                )}
               </p>
               <div className="mt-4 gap-x-2 flex">
                 <input
@@ -42,7 +46,7 @@ function UploadDisclaimer({
                     setDontShowAgain(e.target.checked);
                   }}
                 />
-                Don't show this again
+                {t(`Don't show this again`)}
               </div>
             </div>
             <div className="flex">
@@ -50,7 +54,7 @@ function UploadDisclaimer({
                 className="w-1/2 h-16 p-4 text-start text-sm text-white bg-[#2B2C46]"
                 onClick={() => onClose()}
               >
-                Cancel
+                {t(`Cancel`)}
               </button>
               <label
                 className="w-1/2 h-16 p-4 text-start text-sm text-white bg-[#E31B5D] cursor-pointer"
@@ -61,7 +65,7 @@ function UploadDisclaimer({
                   }
                 }}
               >
-                Continue
+                {t(`Continue`)}
               </label>
               <input
                 type="file"

package/src/components/rfq/RfqBanner.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { getCroppedCanvas } from 'helpers/getCroppedCanvas';
 import { useMediaQuery } from 'react-responsive';
+import { useTranslation } from 'react-i18next';
 
 function RfqBanner({
   requestImage,
@@ -16,7 +17,7 @@ function RfqBanner({
   selectedRegion: any;
 }) {
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
-
+  const { t } = useTranslation();
   return (
     <div
       style={{
@@ -66,8 +67,8 @@ function RfqBanner({
               }}
             >
               {isMobile
-                ? 'No matches found?'
-                : 'No matches found for your request?'}
+                ? `${t('No matches found')}?`
+                : `${t('No matches found for your request')}?`}
             </div>
             <div
               style={{
@@ -78,7 +79,7 @@ function RfqBanner({
                 fontWeight: 'normal',
               }}
             >
-              Get personalised help from our team of product experts.
+              {t('Get personalised help from our team of product experts.')}
             </div>
           </div>
           <button

package/src/page/result/index.tsx

@@ -400,7 +400,7 @@ function ResultComponent(props: Props) {
                           <div className={'feedback-floating'}>
                             <div className="feedback-section">
                               <div className="feedback-success">
-                                Thanks for your feedback!
+                                {t('Thank you for your feedback')}
                               </div>
                             </div>
                           </div>

package/src/translations.ts

@@ -32,6 +32,33 @@ export const translations = {
       Cancel: 'Cancel',
       Apply: 'Apply',
       'Back to request image': 'Back to request image',
+      'Please select a search criteria before search request to refine and yield accurate results.':
+        'Please select a search criteria before search request to refine and yield accurate results.',
+      'Search criteria is not selected':
+        'Search criteria is not selected',
+      Inquiry: 'Inquiry',
+      'Call us': 'Call us',
+      'Submit your inquiry': 'Submit your inquiry',
+      'Submit your image for inquiry': 'Submit your image for inquiry',
+      'Your email (required)': 'Your email (required)',
+      'Please enter a valid email.': 'Please enter a valid email.',
+      'Additional information': 'Additional information',
+      Send: 'Send',
+      'Experience Visual Search': 'Experience Visual Search',
+      'Start your visual search by selecting an image below.':
+        'Start your visual search by selecting an image below.',
+      'Are these results useful?': 'Are these results useful?',
+      'Thank you for your feedback': 'Thank you for your feedback',
+      'Select a Filter': 'Select a Filter',
+      'Get personalised help from our team of product experts.':
+        'Get personalised help from our team of product experts.',
+      'Adjust the selection frame for better results':
+        'Adjust the selection frame for better results',
+      'Replace Current Data?': 'Replace Current Data?',
+      'Uploading a new image will overwrite your current search parameters, text, and results. Are you sure you want to proceed?':
+        'Uploading a new image will overwrite your current search parameters, text, and results. Are you sure you want to proceed?',
+      "Don't show this again": "Don't show this again",
+      Continue: 'Continue',
     },
   },
   de: {
@@ -49,11 +76,11 @@ export const translations = {
       'Items per page': 'Artikel pro Seite',
       'Search with an image': 'Bildsuche',
       'Clear text search': 'Suchtext löschen',
-      'View details': 'Details anzeigen',
+      'View details': 'Anzeige der Details',
       'Clear image search': 'Bildsuche zurück setzen',
       'Add or change pre-filter': 'Vorfilter hinzufügen oder ändern',
       'Expand all': 'Alles anzeigen',
-      'Collapse all': 'Alles einklappen',
+      'Collapse all': 'Alle ausblenden',
       Brand: 'Marke',
       'Product name': 'Produktname',
       loading: 'Lädt',
@@ -61,13 +88,40 @@ export const translations = {
         'Keine Produkte entsprechen Ihren Suchkriterien.',
       'Please upload an image or enter a keyword to search.':
         'Für die Suche bitte Bild hochladen oder Stichwort eingeben.',
-      'No matches found': 'Keine Treffer für Ihre Anfrage gefunden',
       'No matches found for your request':
         'Keine Treffer für Ihre Anfrage gefunden',
       'Clear all': 'Alles löschen',
       Cancel: 'Abbrechen',
       Apply: 'Anwenden',
       'Back to request image': 'Zurück zur Bildanfrage',
+      'Please select a search criteria before search request to refine and yield accurate results.':
+        'Bitte wählen Sie vor der Suchanfrage ein Suchkriterium aus, um die Suche zu verfeinern und genaue Ergebnisse zu erhalten.',
+      'Search criteria is not selected':
+        'Suchkriterien sind nicht ausgewählt',
+      Inquiry: 'Anfrage',
+      'Call us': 'Rufen Sie uns an',
+      'Submit your inquiry': 'Senden Sie Ihre Anfrage',
+      'Submit your image for inquiry': 'Senden Sie Ihr Bild für eine Anfrage',
+      'Your email (required)': 'Ihre E-Mail (erforderlich)',
+      'Please enter a valid email.': 'Bitte geben Sie eine gültige E-Mailadresse an',
+      'Additional information': 'Zusätzliche Informationen',
+      Send: 'Senden',
+      'Experience Visual Search': 'Erleben Sie die visuelle Suche',
+      'Start your visual search by selecting an image below.':
+        'Beginnen Sie Ihre visuelle Suche und wählen eines der  Bilder aus.',
+      'Are these results useful?': 'Sind diese Ergebnisse nützlich?',
+      'Thank you for your feedback': 'Vielen Dank für Ihr Feedback',
+      'Select a Filter': 'Filter wählen',
+      'Get personalised help from our team of product experts.':
+        'Holen Sie sich persönliche Hilfe von unserem Team von Produktexperten.',
+      'No matches found': 'Keine Treffer gefunden',
+      'Adjust the selection frame for better results':
+        'Anpassen des Rahmens für bessere Ergebnisse',
+      'Replace Current Data?': 'Aktuelle Daten ersetzen?',
+      'Uploading a new image will overwrite your current search parameters, text, and results. Are you sure you want to proceed?':
+        'Durch das Hochladen eines neuen Bildes werden Ihre aktuellen Suchparameter, Texte und Ergebnisse überschrieben. Möchten Sie wirklich fortfahren?',
+      "Don't show this again": 'Nicht mehr anzeigen',
+      Continue: 'Fortfahren',
     },
   },
   pt: {
@@ -94,15 +148,43 @@ export const translations = {
       Brand: 'Marca',
       loading: 'Carregando',
       'No products were found matching your search criteria.':
-        'Nenhum produto foi encontrado com estes critérios ',
+        'Nenhum produto foi encontrado com estes critérios.',
       'Please upload an image or enter a keyword to search.':
         'Faça o upload de uma imagem ou busque via texto',
-      'No matches found': 'No matches found',
-      'No matches found for your request': 'No matches found for your request',
-      'Clear all': 'Clear all',
-      Cancel: 'Cancel',
-      Apply: 'Apply',
+      'No matches found':
+        'Não foram encontrados resultados para sua solicitação',
+      'No matches found for your request':
+        'Não foram encontrados resultados para sua solicitação',
+      'Clear all': 'Limpar tudo',
+      Cancel: 'Cancelar',
+      Apply: 'Aplicar',
       'Back to request image': 'Retroceder para imagem inicial',
+      'Please select a search criteria before search request to refine and yield accurate results.':
+        'Selecione um critérios de pesquisa antes da solicitação de pesquisa para refinar e produzir resultados precisos.',
+      'Search criteria is not selected':
+        'Os critérios de pesquisa não estão selecionados',
+      Inquiry: 'Inquérito',
+      'Call us': 'Contactar-nos',
+      'Submit your inquiry': 'Enviar o seu pedido',
+      'Submit your image for inquiry': 'Envie sua imagem para consulta',
+      'Your email (required)': 'Seu e-mail (obrigatório)',
+      'Please enter a valid email.': 'Introduza um e-mail válido.',
+      'Additional information': 'Informações adicionais',
+      Send: 'Enviar',
+      'Experience Visual Search': 'Experience Visual Search',
+      'Start your visual search by selecting an image below.':
+        'Start your visual search by selecting an image below.',
+      'Thank you for your feedback': 'Obrigado pelo seu feedback',
+      'Select a Filter': 'Selecione um filtro',
+      'Get personalised help from our team of product experts.':
+        'Obtenha ajuda personalizada de nossa equipe de especialistas em produtos.',
+      'Adjust the selection frame for better results':
+        'Ajuste a caixa de busca para melhores resultados',
+      'Replace Current Data?': 'Substituir os dados atuais?',
+      'Uploading a new image will overwrite your current search parameters, text, and results. Are you sure you want to proceed?':
+        'Carregar uma nova imagem substituirá seus parâmetros de pesquisa, texto e resultados atuais. Tem certeza de que deseja prosseguir?',
+      "Don't show this again": 'Não mostrar isso novamente',
+      Continue: 'Continuar',
     },
   },
 };

package/src/types.ts

@@ -21,6 +21,7 @@ export interface Support {
   emailInquiry?: boolean;
   supportNumber?: string;
   emailTemplateId?: string;
+  prefilterFieldName?: string;
 }
 
 export interface Rfq {