@nyris/nyris-webapp 0.3.39 → 0.3.40

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={{

package/src/page/landingPage/AppMD.tsx

@@ -32,19 +32,20 @@ function AppMD() {
 
   return (
     <Box className={`box-content-main ${isLoading ? 'loading' : ''}`}>
-      <Box className="box-content_top">
+      <Box className="box-content_top" style={{ position: 'relative' }}>
         {settings.headerText && (
-        <Box className="fw-700 text-f32 text-dark2">
-          <h1>{settings.headerText}</h1>
-        </Box>
+          <Box
+            className="fw-700 text-f32 text-dark2"
+            style={{ position: 'absolute', bottom: '49px' }}
+          >
+            <h1>{settings.headerText}</h1>
+          </Box>
         )}
-        <div className="box-input">
-          <div className="wrap-input-search">
-            <div style={{ display: 'none' }}>
-              <CustomInfiniteHits />
-            </div>
-            <CustomSearchBox />
+        <div className="wrap-input-search">
+          <div style={{ display: 'none' }}>
+            <CustomInfiniteHits />
           </div>
+          <CustomSearchBox />
         </div>
       </Box>
       <Box className="box-content_bottom">

package/src/page/landingPage/common.scss

@@ -217,88 +217,14 @@ button {
   position: absolute;
   width: 104px;
   height: 104px;
-  top: calc(-104px / 2);
+
   // background: #fff;
   border-radius: 100%;
   z-index: 111;
   left: 0;
   right: 0;
   margin: auto;
-  &::after {
-    content: 'loading';
-    position: absolute;
-    top: 0;
-    margin: auto;
-    bottom: 0;
-    width: 87%;
-    height: 87%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 112;
-    font-size: 14px !important;
-    line-height: 38px;
-    font-weight: 500;
-    color: #fff;
-    background: rgba(43, 44, 70, 1);
-    margin: auto;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: 100%;
-  }
-  &::before {
-    content: '';
-  }
-  .box-content-spin {
-    width: 104px;
-    height: 104px;
-    position: absolute;
-    border-radius: 100%;
-    animation: spin 2s linear infinite;
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 0;
-      border-radius: 100%;
-      // background: linear-gradient(
-      //   180deg,
-      //   #3e36dc 0%,
-      //   #e31b5d 44.27%,
-      //   rgba(255, 255, 255, 0) 100%
-      // );
-      background: conic-gradient(
-        from 90deg at 50.46% 50.46%,
-        #322bb0 -30.73deg,
-        #3e36dc 111.58deg,
-        #00ff94 212.7deg,
-        #322bb0 329.27deg,
-        #3e36dc 471.58deg
-      );
-      box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
-    }
-    @-webkit-keyframes spin {
-      0% {
-        -webkit-transform: rotate(0deg);
-      }
-      100% {
-        -webkit-transform: rotate(360deg);
-      }
-    }
 
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-  }
 }
 
 .box-modal-default {
@@ -786,7 +712,7 @@ button {
   }
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   height: 100%;
   background: #FAFAFA;
@@ -794,7 +720,6 @@ button {
   
     width: 100%;
     // min-height: calc(100% - 341px);
-    margin-top: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -826,10 +751,8 @@ button {
   }
   .box-content_bottom {
     width: 100%;
-    height: 256px;
     max-width: 512px;
     position: relative;
-    margin-bottom: auto;
     @media screen and (min-width: 2047px) {
       position: initial;
       .loadingSpinCT {
@@ -852,6 +775,7 @@ button {
       padding-top: 16px;
       padding-bottom: 16px;
       color: #CACAD1;
+      border: 2px dashed transparent;
       &:hover {
         border-radius: 60px;
         border: 2px dashed #E0E0E0;
@@ -992,7 +916,7 @@ button {
     }
   }
   .box-result {
-    height: calc(100svh - 148px);
+    height: calc(100vh - 148px);
     @media screen and (max-width: 776px) {
       height: 100%
     }
@@ -1556,7 +1480,7 @@ button {
 
 .wrap-main-support-page {
   background-color: #2b2c46;
-  min-height: calc(100svh - 32px);
+  min-height: calc(100vh - 32px);
   // max-width: 1280px;
   padding: 40px;
   margin: auto;

package/src/page/result/index.tsx

@@ -382,7 +382,7 @@ function ResultComponent(props: Props) {
                     settings.preview && 'ml-auto mr-auto'
                   } ${isMobile && 'col-right-result-mobile'}`}
                   style={{
-                    paddingTop: isMobile ? '16px' : '40px',
+                    paddingTop: isMobile ? '8px' : '40px',
                     overflow: !isMobile ? 'auto' : '',
                     display: 'flex',
                     flexDirection: 'column',