@nyris/nyris-webapp 0.3.39 → 0.3.41

package/src/components/Inquiry/InquiryModal.tsx

@@ -77,71 +77,72 @@ export default function InquiryModal({
       ? getCroppedCanvas(canvas, selectedRegion)
       : null;
     const serviceId = 'service_zfsxshi';
-    const templateId = 'template_rxsi7w9';
     setIsInquiryModalOpen(false);
-    try {
-      setInquiryStatus('loading');
-      await emailjs.send(serviceId, templateId, {
-        email_id: email.trim(),
-        information_text: information,
-        request_image: croppedImage?.toDataURL(),
-        prefilter_values: preFilterValues.join(', '),
-      });
-      setInquiryStatus('sent');
-      ToastHelper.success('Request sent successfully');
-    } catch (error) {
-      setInquiryStatus('inactive');
+    if (settings.templateId) {
+      try {
+        setInquiryStatus('loading');
+        await emailjs.send(serviceId, settings.templateId, {
+          email_id: email.trim(),
+          information_text: information,
+          request_image: croppedImage?.toDataURL(),
+          prefilter_values: preFilterValues.join(', '),
+        });
+        setInquiryStatus('sent');
+        ToastHelper.success('Request sent successfully');
+      } catch (error) {
+        setInquiryStatus('inactive');
 
-      toast(
-        t => {
-          return (
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                fontSize: '14px',
-                width: '294px',
-              }}
-            >
-              <span style={{ fontWeight: 'bold' }}>Email not sent</span>
-              <span>{getErrorMessage(error)}</span>
-              <a
-                href={`mailto:support@nyris.io?subject=Request for quotation&body=${encodeURIComponent(`Hello,
+        toast(
+          t => {
+            return (
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  fontSize: '14px',
+                  width: '294px',
+                }}
+              >
+                <span style={{ fontWeight: 'bold' }}>Email not sent</span>
+                <span>{getErrorMessage(error)}</span>
+                <a
+                  href={`mailto:support@nyris.io?subject=Request for quotation&body=${encodeURIComponent(`Hello,
           I filled out the support form on the Search Suite, but it failed. I inquired the following:
           email:
           Pre-filter:
           Additional Text: `)}`}
-                style={{
-                  padding: '8px 16px 8px 16px',
-                  border: '1px solid #000',
-                  marginTop: '16px',
-                  backgroundColor: 'transparent',
-                  color: '#000',
-                  cursor: 'pointer',
-                  width: 'fit-content',
-                }}
-              >
-                support@nyris.io
-              </a>
-            </div>
-          );
-        },
-        {
-          duration: 5000,
-          style: {
-            background: '#FFE5EF',
-            color: '#000000',
-            maxWidth: '400px',
+                  style={{
+                    padding: '8px 16px 8px 16px',
+                    border: '1px solid #000',
+                    marginTop: '16px',
+                    backgroundColor: 'transparent',
+                    color: '#000',
+                    cursor: 'pointer',
+                    width: 'fit-content',
+                  }}
+                >
+                  support@nyris.io
+                </a>
+              </div>
+            );
           },
-          icon: (
-            <div style={{ minWidth: '20px', minHeight: '20px' }}>
-              <ErrorIcon />
-            </div>
-          ),
-        },
-      );
+          {
+            duration: 5000,
+            style: {
+              background: '#FFE5EF',
+              color: '#000000',
+              maxWidth: '400px',
+            },
+            icon: (
+              <div style={{ minWidth: '20px', minHeight: '20px' }}>
+                <ErrorIcon />
+              </div>
+            ),
+          },
+        );
+      }
+      setIsInquiryModalOpen(false);
     }
-    setIsInquiryModalOpen(false);
   };
 
   return (

package/src/components/Layout.tsx

@@ -22,6 +22,10 @@ import { createSessionByApi } from 'services/session';
 import { isUndefined } from 'lodash';
 import AppMobile from './AppMobile';
 import jQuery from 'jquery';
+import Loading from './Loading';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { translations } from 'translations';
 
 declare var psol: any;
 
@@ -44,6 +48,15 @@ jQuery(document).ready(function () {
   psol.core.setServiceBaseUrl('https://webapi.partcommunity.com');
 });
 
+i18n.use(initReactI18next).init({
+  resources: translations,
+  fallbackLng: 'en',
+  interpolation: {
+    escapeValue: false,
+  },
+  returnNull: false,
+});
+
 function Layout({ children }: ReactNode): JSX.Element {
   const dispatch = useAppDispatch();
   const { settings, search } = useAppSelector<AppState>((state: any) => state);
@@ -55,6 +68,9 @@ function Layout({ children }: ReactNode): JSX.Element {
   let isShowHeaderMobile =
     (isMobile && history.location?.pathname === '/result') ||
     history.location?.pathname === '/';
+  const language = useAppSelector(state => state.settings.language);
+
+  i18n.changeLanguage(language);
 
   useEffect(() => {
     const createSession = async () => {
@@ -114,13 +130,29 @@ function Layout({ children }: ReactNode): JSX.Element {
     };
   }, [apiKey, appId, indexName]);
 
+  // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
+  let vh = window.innerHeight * 0.01;
+  // Then we set the value in the --vh custom property to the root of the document
+  document.documentElement.style.setProperty('--vh', `${vh}px`);
+
+  useEffect(() => {
+    const handleResize = () => {
+      let vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   return (
     <div style={{ position: 'relative' }}>
       {loadingSearchAlgolia && (
         <Box className="box-wrap-loading" style={{ zIndex: 99999999 }}>
-          <Box className="loadingSpinCT" style={{ top: 0, bottom: 0 }}>
-            <Box className="box-content-spin"></Box>
-          </Box>
+          <Loading />
         </Box>
       )}
       <InstantSearch

package/src/components/Loading.tsx

@@ -0,0 +1,69 @@
+import { Box } from '@material-ui/core';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const LoadingSvg = () => {
+  return (
+    <svg
+      width={150}
+      height={150}
+      viewBox="0 0 150 150"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="loading-spinner"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M75 150C116.421 150 150 116.421 150 75C150 33.5786 116.421 0 75 0C33.5786 0 0 33.5786 0 75C0 116.421 33.5786 150 75 150ZM75 140.367C111.101 140.367 140.367 111.101 140.367 75.0003C140.367 38.8991 111.101 9.63332 75 9.63332C38.8988 9.63332 9.63304 38.8991 9.63304 75.0003C9.63304 111.101 38.8988 140.367 75 140.367Z"
+        fill="url(#paint0_linear_2236_26778)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2236_26778"
+          x1={75}
+          y1={0}
+          x2={75}
+          y2={150}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#3E36DC" />
+          <stop offset={0.916667} stopColor="#1E1F31" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+const Loading = () => {
+  const { t } = useTranslation();
+  return (
+    <Box
+      className="loadingSpinCT"
+      style={{
+        top: 0,
+        bottom: 0,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <p
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          fontSize: 16,
+          color: '#fff',
+          fontWeight: 300,
+        }}
+      >
+        {t('loading')}
+      </p>
+      <LoadingSvg />
+    </Box>
+  );
+};
+
+export default Loading;

package/src/components/PanelResult/index.tsx

@@ -14,6 +14,7 @@ import { useAppSelector } from 'Store/Store';
 import { ExpandablePanelCustom } from './expandable-panel';
 import { getPanelAttributes, getPanelId } from './refinements';
 import CloseIcon from '@material-ui/icons/Close';
+import { useTranslation } from 'react-i18next';
 
 export type ExpandablePanelProps = CurrentRefinementsProvided & {
   children: React.ReactNode;
@@ -103,6 +104,7 @@ export default function ExpandablePanelComponent({
   );
   const history = useHistory();
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+  const { t } = useTranslation();
 
   // Set initial panels value
   useEffect(() => {
@@ -199,8 +201,10 @@ export default function ExpandablePanelComponent({
               <IconLabel
                 icon={refinementsPanelsExpanded ? 'remove' : 'add'}
                 label={`${
-                  refinementsPanelsExpanded ? 'Collapse' : 'Expand'
-                } all`}
+                  refinementsPanelsExpanded
+                    ? t('Collapse all')
+                    : t('Expand all')
+                } `}
               />
             </Button>
           </Box>

package/src/components/ProductDetailView.tsx

@@ -347,7 +347,7 @@ function ProductDetailView(props: Props) {
                 )}
                 {(brand || settings.brandName) && (
                   <ProductAttribute
-                    title={'Brand'}
+                    title={t('Brand')}
                     value={brand || settings.brandName}
                     width={
                       dataItem[settings.field.manufacturerNumber]
@@ -467,7 +467,7 @@ function ProductDetailView(props: Props) {
                       }}
                       onClick={() => setCollapDescription(e => !e)}
                     >
-                      View details
+                      {t('View details')}
                       {collapDescription ? (
                         <KeyboardArrowUpIcon
                           htmlColor={settings.theme?.secondaryColor}

package/src/components/ProductList/index.tsx

@@ -2,6 +2,7 @@ import { Box } from '@material-ui/core';
 import ItemResult from 'components/results/ItemResult';
 import { groupBy, uniqueId } from 'lodash';
 import React, { memo, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { connectStateResults } from 'react-instantsearch-dom';
 import { useMediaQuery } from 'react-responsive';
 import { useAppSelector } from 'Store/Store';
@@ -32,6 +33,7 @@ function ProductListComponent({
   const [itemShowDefault, setItemShowDefault] = useState<any[]>([]);
   const [algoliaRequest, setAlgoliaRequest] = useState(false);
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+  const { t } = useTranslation();
 
   useEffect(() => {
     if (isSearchStalled) {
@@ -118,7 +120,7 @@ function ProductListComponent({
     if (!requestImage && !search.valueTextSearch.query && !isSearchStalled) {
       return (
         <Box style={{ marginTop: '50px', width: '100%', textAlign: 'center' }}>
-          Please upload an image or enter a keyword to search.
+          {t('Please upload an image or enter a keyword to search.')}
         </Box>
       );
     }
@@ -130,7 +132,7 @@ function ProductListComponent({
     ) {
       return (
         <Box style={{ marginTop: '50px', width: '100%', textAlign: 'center' }}>
-          No products were found matching your search criteria.
+          {t('No products were found matching your search criteria.')}
         </Box>
       );
     }

package/src/components/appMobile.scss

@@ -444,39 +444,14 @@
 //TODO: Custom css modal filter
 @media screen and (max-width: 776px) {
   .wrap-mobile {
-    height: 100svh;
+    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
+    height: calc(var(--vh, 1vh) * 100);
     background-color: #F3F3F5;
     display: flex;
     flex-direction: column;
    
   }
-  .box-filter-mobile {
-    .MuiBackdrop-root {
-      background-color: initial !important;
-    }
-
-    .MuiDrawer-paperAnchorLeft {
-      width: 100%;
-      height: calc(100svh - 60px) !important;
-      bottom: 0px !important;
-      top: initial !important;
-      background-color: #fafafa !important;
-      // box-shadow: none !important;
-      border-right: 1px solid #4d4646 !important;
-      // padding: 24px;
-      ul {
-        li {
-          list-style-type: none;
 
-          input {
-            margin-right: 15px;
-          }
-        }
-      }
-    }
-
-    
-  }
 
   #box-input-search {
     position: relative;
@@ -504,7 +479,8 @@
   .modal-togggle-cam {
     .wrap-camera {
       position: relative;
-      height: 100svh;
+      height: 100vh;
+      height: calc(var(--vh, 1vh) * 100);
       display: flex;
       justify-content: center;
       align-items: center;

package/src/components/common.scss

@@ -22,10 +22,11 @@
   padding-bottom: 6px;
 }
 
-.LoadingSpinner {
+.loading-spinner {
   animation: spin 3s linear infinite;
 }
 
+
 @keyframes spin {
   from {
     transform: rotate(0deg);
@@ -35,8 +36,14 @@
   }
 }
 
+.full-height {
+  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
+  height: calc(var(--vh, 1vh) * 100);
+}
+
 .layout-main-newVersion {
-  height: 100svh;
+  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
+  height: calc(var(--vh, 1vh) * 100);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -63,4 +70,62 @@
 
 .d-none {
   display: none;
-}
+}
+
+@keyframes slidedown {
+  0% { transform: translateY(0px); }
+  100% { transform: translateY(0); }
+}
+
+@keyframes slideup {
+  0% { transform: translateY(40px); }
+  100% { transform: translateY(0); }
+}
+
+.slideDown {
+  animation: slidedown 1s ease-in-out;
+}
+
+.slideUp {
+  animation: slideup 0.5s ease-in-out;
+}
+
+@keyframes reduceSize {
+  from {
+    height: 240px;
+    width: 240px;
+  }
+  to {
+    height: 80px;
+    width: 81px;
+  }
+}
+
+.shrink-animation{
+  animation: reduceSize 0.3s;
+}
+
+@keyframes extendSize {
+  from {
+    height: 80px;
+    width: 81px;
+  }
+  to {
+    height: 240px;
+    width: 240px;
+  }
+}
+
+.expand-animation{
+  animation: extendSize 0.25s;
+  animation-timing-function: linear;
+}
+
+.circle-layer{
+  position: absolute;
+  width: 81px;
+  height: 80px;
+  clip-path: polygon(100% 50%, 100% 100%, 0px 100%, 0px 0px, 100% 0px, 100% 50%, 80% 50%, 79.85092326096205% 47.0129646021255%, 79.40517463545632% 44.055615704018074%, 78.66718417358422% 41.157344767672875%, 77.64428635611223% 38.346956111759155%, 76.34664720110686% 35.65238064136045%, 74.78716322947984% 33.100398258091346%, 72.98133329356934% 30.716371709403823%, 70.94710454258218% 28.52399452220845%, 68.704694055762% 26.545055525959107%, 66.27638791597278% 24.799222305476857%, 63.686319720594895% 23.303845735655944%, 60.96023073099185% 22.073787540673877%, 58.12521404429015% 21.12127259149964%, 55.20944533000791% 20.455767409633758%, 52.24190280759273% 20.083886084564597%, 49.25207924785782% 20.009324539975513%, 46.26968886057545% 20.232823801994837%, 43.32437198131057% 20.752162634545293%, 40.44540049244947% 21.562179614986047%, 37.66138690608166% 22.654824430649803%, 35.00000000000001% 24.01923788646684%, 32.487689832956306% 25.6418598285243%, 30.149424872094226% 27.506563910967966%, 28.008443845105216% 29.59481786687241%, 26.086024783312336% 31.885867690235667%, 24.40127355103533% 34.35694389861506%, 22.97093396292743% 36.98348782647325%, 21.80922137642275% 39.739395700229935%, 20.927681413127665% 42.597278069291185%, 20.335075213246146% 45.528732014714755%, 20.03729236343233% 48.50462343017907%, 20.03729236343233% 51.495376569820905%, 20.335075213246146% 54.47126798528524%, 20.927681413127658% 57.40272193070879%, 21.809221376422748% 60.26060429977006%, 22.970933962927425% 63.01651217352674%, 24.401273551035327% 65.64305610138494%, 26.08602478331232% 68.11413230976432%, 28.008443845105212% 70.40518213312758%, 30.149424872094208% 72.49343608903202%, 32.487689832956306% 74.3581401714757%, 34.999999999999986% 75.98076211353316%, 37.66138690608165% 77.34517556935019%, 40.44540049244945% 78.43782038501395%, 43.32437198131056% 79.2478373654547%, 46.26968886057543% 79.76717619800516%, 49.25207924785781% 79.99067546002449%, 52.2419028075927% 79.9161139154354%, 55.209445330007895% 79.54423259036625%, 58.12521404429013% 78.87872740850037%, 60.96023073099184% 77.92621245932614%, 63.68631972059489% 76.69615426434406%, 66.27638791597279% 75.20077769452314%, 68.704694055762% 73.4549444740409%, 70.9471045425822% 71.47600547779155%, 72.98133329356934% 69.28362829059618%, 74.78716322947984% 66.89960174190865%, 76.34664720110685% 64.34761935863956%, 77.64428635611223% 61.653043888240845%, 78.66718417358422% 58.84265523232714%, 79.40517463545632% 55.94438429598193%, 79.85092326096203% 52.98703539787452%, 80% 50.00000000000001%);
+  background-color:  hsla(0, 0%, 0%, 0.3);
+  z-index: 1;
+}

package/src/components/drawer/cameraCustom.tsx

@@ -193,14 +193,14 @@ function CameraCustom(props: Props) {
               justifyContent: 'center',
               alignItems: 'center',
               overflow: 'hidden',
-              height: '100svh',
               width: '100%',
             }}
+            className="full-height"
           >
             <Webcam
               audio={false}
-              height={'100svh'}
               width={'100%'}
+              className="full-height"
               imageSmoothing={true}
               screenshotFormat="image/jpeg"
               forceScreenshotSourceSize={true}

package/src/components/input/inputSearch.tsx

@@ -160,7 +160,7 @@ const SearchBox = (props: any) => {
               title={
                 !isEmpty(preFilter)
                   ? Object.keys(preFilter).join(', ')
-                  : 'Add pre-filter'
+                  : t('Add or change pre-filter')
               }
               placement="top"
               arrow={true}
@@ -234,7 +234,7 @@ const SearchBox = (props: any) => {
                 <Box
                   style={{
                     border: `2px solid ${settings.theme?.primaryColor}`,
-                    backgroundColor: '#E4E3FF',
+                    backgroundColor: `${settings.theme?.primaryColor}26`,
                     marginRight: '5px',
                   }}
                   className="box-image-search-thumb"
@@ -246,7 +246,7 @@ const SearchBox = (props: any) => {
                     alt="img_search"
                   />
                   <Tooltip
-                    title="Clear image search"
+                    title={t('Clear image search')}
                     placement="top"
                     arrow={true}
                   >

package/src/components/results/ItemResult.tsx

@@ -287,7 +287,7 @@ function ItemResult(props: Props) {
             >
               {(brand || settings.brandName) && (
                 <ProductAttribute
-                  title={'Brand'}
+                  title={t('Brand')}
                   value={brand || settings.brandName}
                   padding="4px 8px"
                   width={{ xs: '49%' }}
@@ -296,7 +296,7 @@ function ItemResult(props: Props) {
 
               {dataItem[settings.field.manufacturerNumber] && (
                 <ProductAttribute
-                  title={'Mfr. No.'}
+                  title={t('Mfr. No.')}
                   value={dataItem[settings.field.manufacturerNumber]}
                   padding="4px 8px"
                   width={{ xs: '49%' }}

package/src/components/rfq/RfqBanner.tsx

@@ -10,7 +10,7 @@ function RfqBanner({
   selectedRegion,
   setIsRfqModalOpen,
 }: {
-  rfqRef: any;
+  rfqRef?: any;
   rfqStatus: any;
   setIsRfqModalOpen: any;
   requestImage: any;
@@ -31,7 +31,7 @@ function RfqBanner({
         alignItems: 'center',
       }}
       className="rfq-box"
-      ref={rfqRef}
+      // ref={rfqRef}
     >
       <Box
         style={{