@nyris/nyris-webapp 0.3.69 → 0.3.71

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.69",
+  "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.69",
-    "@nyris/nyris-react-components": "^0.3.69",
+    "@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",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/heic-convert": "^2.1.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.88",
     "@types/react": "^18.2.65",
@@ -23,7 +24,9 @@
     "blueimp-load-image": "^5.16.0",
     "classnames": "^2.5.1",
     "compressorjs": "^1.2.1",
+    "env": "^0.0.2",
     "framer-motion": "^11.0.12",
+    "heic-convert": "^2.1.0",
     "i18next": "^23.10.1",
     "jotai": "^1.4.7",
     "jquery": "^3.7.1",

package/public/js/settings.example.js

@@ -71,6 +71,13 @@ var settings = {
     CTALinkField: '',
   },
   language: 'en',
+  // productDetailsAttribute
+  productDetailsAttribute: [
+    {
+      propertyName: '',
+      value: '',
+    }
+  ],
   // features
   showPoweredByNyris: '',
   postFilterOption: '',
@@ -90,6 +97,7 @@ var settings = {
     emailTemplateId: '',
     supportNumber: '',
     description: '',
+    prefilterFieldName: '',
   },
   cadenas: {
     catalog: '',

package/src/components/DragDropFile.tsx

@@ -95,9 +95,7 @@ function DragDropFile(props: Props) {
             className="inputFile"
             placeholder="Choose photo"
             style={{ display: 'block', cursor: 'pointer' }}
-            accept={`${
-              isCadSearch ? '.stp,.step,.stl,.obj,.glb,.gltf,' : ''
-            }image/*`}
+            accept={'.stp,.step,.stl,.obj,.glb,.gltf,.heic,.heif,image/*'}
           />
         </div>
       </div>

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/ProductDetailView.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Button, Collapse, Grid, Typography, Tooltip } from '@material-ui/core';
+import React, { useEffect, useRef, useState } from 'react';
+import { Button, Grid, Typography, Tooltip } from '@material-ui/core';
 import CloseOutlinedIcon from '@material-ui/icons/CloseOutlined';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import { Icon } from '@nyris/nyris-react-components';
 import NoImage from '../common/assets/images/no-image.svg';
 import { useMediaQuery } from 'react-responsive';
@@ -9,7 +8,6 @@ import { ImagePreviewCarousel } from './carousel/ImagePreviewCarousel';
 import { AppState } from 'types';
 import { useAppSelector } from 'Store/Store';
 import { prepareImageList } from '../helpers/CommonHelper';
-import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
 import { useTranslation } from 'react-i18next';
 import ProductAttribute from './ProductAttribute';
 import CadenasWebViewer from './CadenasWebViewer';
@@ -56,6 +54,9 @@ function ProductDetailView(props: Props) {
   >();
   const { t } = useTranslation();
   const classes = useStyles(props?.show3dView);
+  const modal = useRef<any>(null);
+  const extraDetailPropertyLength = isMobile ? 15 : 30;
+  const extraDetailValueLength = isMobile ? 35 : 60;
 
   useEffect(() => {
     if (dataItem) {
@@ -92,17 +93,10 @@ function ProductDetailView(props: Props) {
 
     setDataImageCarouSel(valueKey);
   };
-  const productDetails = useMemo(() => {
-    const details = get(dataItem, settings.productDetails);
-    try {
-      return details.join(', ');
-    } catch (e) {
-      return details;
-    }
-  }, [dataItem, settings.productDetails]);
 
   return (
     <div
+      ref={modal}
       className="box-modal-default"
       style={{
         margin: isMobile ? 0 : '',
@@ -591,8 +585,8 @@ function ProductDetailView(props: Props) {
                       </div>
                     )}
                   </div>
-
-                  {productDetails && (
+                  
+                  {settings.productDetailsAttribute?.length ? (
                     <div className="w-100">
                       <Button
                         className="w-100 button-hover"
@@ -607,34 +601,98 @@ function ProductDetailView(props: Props) {
                           paddingRight: '15px',
                           textTransform: 'initial',
                         }}
-                        onClick={() => setCollapseDescription(e => !e)}
+                        onClick={(e) => {
+                          setCollapseDescription(prev => !prev);
+                          if (modal && modal.current) {
+                            setTimeout(() => {
+                              const top = (settings.productDetailsAttribute?.length || 0) * 30 + 20;
+                              modal.current.parentElement.scrollTo({ top });
+                            });
+                          }
+                        }}
                       >
                         {t('View details')}
-                        {collapseDescription ? (
-                          <KeyboardArrowUpIcon
-                            htmlColor={settings.theme?.secondaryColor}
-                          />
-                        ) : (
-                          <KeyboardArrowDownIcon
-                            htmlColor={settings.theme?.secondaryColor}
-                          />
-                        )}
+                        <span
+                          style={{
+                            fontSize: 20,
+                          }}
+                        >
+                          {collapseDescription ? '—' : '+'}
+                        </span>
                       </Button>
-                      <Collapse in={collapseDescription}>
-                        <Typography
+                      {collapseDescription ? (
+                        <div
                           style={{
-                            fontSize: 14,
-                            padding: 5,
-                            paddingLeft: 15,
-                            paddingRight: 15,
-                            color: '#2b2c46',
+                            background: '#E9E9EC',
+                            borderRadius: 2,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 6,
+                            padding: '6px 15px 10px',
                           }}
                         >
-                          {productDetails}
-                        </Typography>
-                      </Collapse>
+                          {settings.productDetailsAttribute.map((detail) =>
+                            get(dataItem, detail.value)?.length
+                            ? (
+                              <div
+                                style={{
+                                  height: 14,
+                                  display: 'flex',
+                                  flexDirection: 'row',
+                                  alignItems: 'center'
+                                }}
+                              >
+                                <Tooltip
+                                  title={detail.propertyName}
+                                  placement="top"
+                                  arrow={true}
+                                  disableHoverListener={detail.propertyName.length < extraDetailPropertyLength}
+                                >
+                                  <span
+                                    style={{
+                                      fontFamily: 'Source Sans 3',
+                                      fontSize: 12,
+                                      fontWeight: 600,
+                                      marginRight: 8,
+                                      height: 14,
+                                    }}
+                                  >
+                                    {detail.propertyName.length < extraDetailPropertyLength
+                                      ? detail.propertyName
+                                      : detail.propertyName.substring(0, extraDetailPropertyLength).concat('...')
+                                    }
+                                  </span>
+                                </Tooltip>
+                                <Tooltip
+                                  title={get(dataItem, detail.value)}
+                                  placement="top"
+                                  arrow={true}
+                                  disableHoverListener={get(dataItem, detail.value)?.length <= extraDetailValueLength}
+                                >
+                                  <Typography
+                                    style={{
+                                      fontFamily: 'Source Sans 3',
+                                      fontSize: 12,
+                                      fontWeight: 400,
+                                      height: 14,
+                                    }}
+                                  >
+                                    {get(dataItem, detail.value).length <= extraDetailValueLength
+                                      ? get(dataItem, detail.value)
+                                      : get(dataItem, detail.value).substring(0, extraDetailValueLength).concat('...')
+                                    }
+                                  </Typography>
+                                </Tooltip>
+                              </div>
+                            )
+                            : (
+                              ''
+                              )
+                          )}
+                        </div>
+                      ) : ('')}
                     </div>
-                  )}
+                  ) : ('')}
                 </Grid>
               </Grid>
             </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,8 +14,7 @@ function UploadDisclaimer({
   isMobile: boolean;
 }) {
   const [dontShowAgain, setDontShowAgain] = useState(false);
-  const isCadSearch = window.settings.cadSearch;
-
+  const { t } = useTranslation();
   return (
     <>
       {createPortal(
@@ -22,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"
@@ -32,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
@@ -43,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">
@@ -51,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"
@@ -62,15 +65,15 @@ function UploadDisclaimer({
                   }
                 }}
               >
-                Continue
+                {t(`Continue`)}
               </label>
               <input
                 type="file"
                 name="take-picture"
                 id="nyris__upload-photo"
-                accept={`${
-                  isCadSearch ? '.stp,.step,.stl,.obj,.glb,.gltf,' : ''
-                }image/jpeg,image/png,image/webp`}
+                accept={
+                  '.stp,.step,.stl,.obj,.glb,.gltf,.heic,.heif,image/jpeg,image/png,image/webp'
+                }
                 onChange={makeFileHandler(file =>
                   onContinue({ file, dontShowAgain }),
                 )}

package/src/components/drawer/cameraCustom.tsx

@@ -257,11 +257,9 @@ function CameraCustom(props: Props) {
                                 handlerFindImage(file);
                               }
                             }}
-                            accept={`${
-                              isCadSearch
-                                ? '.stp,.step,.stl,.obj,.glb,.gltf,'
-                                : ''
-                            }image/jpeg,image/png,image/webp`}
+                            accept={
+                              '.stp,.step,.stl,.obj,.glb,.gltf,.heic,.heif,image/jpeg,image/png,image/webp'
+                            }
                             onClick={event => {
                               // @ts-ignore
                               event.target.value = '';

package/src/components/input/inputSearch.tsx

@@ -322,8 +322,10 @@ const SearchBox = (props: any) => {
             <div className="wrap-box-input-mobile d-flex">
               <input
                 accept={`${
-                  isCadSearch ? '.stp,.step,.stl,.obj,.glb,.gltf,' : ''
-                }image/*`}
+                  isCadSearch
+                    ? '.stp,.step,.stl,.obj,.glb,.gltf,.heic,.heif,image/*'
+                    : ''
+                }`}
                 id="icon-button-file"
                 type="file"
                 style={{ display: 'none' }}

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