@nyris/nyris-webapp 0.3.70 → 0.3.72

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.70",
+  "version": "0.3.72",
   "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.72",
+    "@nyris/nyris-react-components": "^0.3.72",
     "@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>
@@ -188,10 +188,17 @@ function InquiryBanner({
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'space-between',
+                      gap: '5px',
                     }}
                   >
-                    <p> Call us</p>
-                    <Icon name="call" color="#fff" width={16} height={16} />
+                    <p> {t('Call us')}</p>
+                    <Icon
+                      name="call"
+                      color="#fff"
+                      width={16}
+                      height={16}
+                      className="min-w-4"
+                    />
                   </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(() => {
@@ -86,7 +88,7 @@ export default function InquiryModal({
             ? preFilterValues.join(', ')
             : '<not specified>',
         });
-        ToastHelper.success('Request sent successfully');
+        ToastHelper.success(t('Request sent successfully'));
       } catch (error) {
         toast(
           t => {
@@ -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.'
-                  }
+                  title={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,8 @@ 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 +308,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 +342,7 @@ export default function InquiryModal({
             }}
             onClick={() => setIsInquiryModalOpen(false)}
           >
-            Cancel
+            {t('Cancel')}
           </button>
           <button
             style={{
@@ -357,7 +362,7 @@ export default function InquiryModal({
             disabled={!emailValid}
             onClick={handleInquiry}
           >
-            Send
+            {t('Send')}
           </button>
         </div>
       </div>

package/src/components/PanelResult/PostFilter.tsx

@@ -289,7 +289,7 @@ export default function PostFilterPanel({
             }}
             onClick={handlerApplyfillter}
           >
-            Cancel
+            {t('Cancel')}
           </div>
           <div
             className="text-white"
@@ -305,7 +305,7 @@ export default function PostFilterPanel({
             }}
             onClick={handlerApplyfillter}
           >
-            Apply filters
+            {t('Apply')}
           </div>
         </div>
       )}

package/src/components/PanelResult/PostFilterAlgolia.tsx

@@ -252,7 +252,7 @@ export default function PostFilterPanelAlgolia({
             }}
             onClick={handlerApplyfillter}
           >
-            Cancel
+            {t('Cancel')}
           </div>
           <div
             className="text-white"
@@ -268,7 +268,7 @@ export default function PostFilterPanelAlgolia({
             }}
             onClick={handlerApplyfillter}
           >
-            Apply filters
+            {t('Apply')}
           </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/pre-filter/index.tsx

@@ -456,7 +456,7 @@ function PreFilterComponent(props: Props) {
           </div>
         )}
         {isEmpty(resultFilter) && !isLoading && (
-          <Typography>No result found</Typography>
+          <Typography>{t('No result found')}</Typography>
         )}
       </div>
       {!isMobile && (

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/components/rfq/RfqModal.tsx

@@ -11,6 +11,7 @@ import { useMediaQuery } from 'react-responsive';
 import { useAppSelector } from '../../Store/Store';
 import useRequestStore from 'Store/requestStore';
 import { Icon } from '@nyris/nyris-react-components';
+import { useTranslation } from 'react-i18next';
 interface Props {
   setIsRfqModalOpen: any;
   isRfqModalOpen?: any;
@@ -79,7 +80,7 @@ export default function RfqModal({
           request_image: croppedImage?.toDataURL(),
         });
         setRfqStatus('sent');
-        ToastHelper.success('Request sent successfully');
+        ToastHelper.success(t('Request sent successfully'));
       } catch (error) {
         setRfqStatus('inactive');
 
@@ -132,6 +133,8 @@ export default function RfqModal({
     }
   };
 
+  const { t } = useTranslation();
+
   return (
     <DefaultModal
       openModal={isRfqModalOpen}
@@ -263,7 +266,7 @@ export default function RfqModal({
             }}
             onClick={() => setIsRfqModalOpen(false)}
           >
-            Cancel
+            {t('Cancel')}
           </button>
           <button
             style={{
@@ -281,7 +284,7 @@ export default function RfqModal({
             disabled={!emailValid}
             onClick={handleRfq}
           >
-            Send
+            {t('Send')}
           </button>
         </div>
       </div>

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>