@nyris/nyris-webapp 0.3.39 → 0.3.41

package/src/components/rfq/RfqModal.tsx

@@ -9,6 +9,7 @@ import { TextareaAutosize } from '@material-ui/core';
 import toast from 'react-hot-toast';
 import { ReactComponent as ErrorIcon } from 'common/assets/icons/error.svg';
 import { useMediaQuery } from 'react-responsive';
+import { useAppSelector } from '../../Store/Store';
 interface Props {
   requestImage: any;
   selectedRegion: any;
@@ -43,6 +44,7 @@ export default function RfqModal({
   const [email, setEmail] = useState('');
   const [emailValid, setEmailValid] = useState<boolean | undefined>(undefined);
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+  const { settings } = useAppSelector(state => state);
 
   const [information, setInformation] = useState('');
   const setFormattedContent = React.useCallback(
@@ -62,66 +64,67 @@ export default function RfqModal({
     const { canvas }: any = requestImage;
     const croppedImage = getCroppedCanvas(canvas, selectedRegion);
     const serviceId = 'service_zfsxshi';
-    const templateId = 'template_jlgc9le';
     setIsRfqModalOpen(false);
-    try {
-      setRfqStatus('loading');
-      await emailjs.send(serviceId, templateId, {
-        email_id: email.trim(),
-        information_text: information,
-        request_image: croppedImage?.toDataURL(),
-      });
-      setRfqStatus('sent');
-      ToastHelper.success('Request sent successfully');
-    } catch (error) {
-      setRfqStatus('inactive');
+    if (settings.templateId) {
+      try {
+        setRfqStatus('loading');
+        await emailjs.send(serviceId, settings.templateId, {
+          email_id: email.trim(),
+          information_text: information,
+          request_image: croppedImage?.toDataURL(),
+        });
+        setRfqStatus('sent');
+        ToastHelper.success('Request sent successfully');
+      } catch (error) {
+        setRfqStatus('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=${information}`}
+        toast(
+          t => {
+            return (
+              <div
                 style={{
-                  padding: '8px 16px 8px 16px',
-                  border: '1px solid #000',
-                  marginTop: '16px',
-                  backgroundColor: 'transparent',
-                  color: '#000',
-                  cursor: 'pointer',
-                  width: 'fit-content',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  fontSize: '14px',
+                  width: '294px',
                 }}
               >
-                support@nyris.io
-              </a>
-            </div>
-          );
-        },
-        {
-          duration: 5000,
-          style: {
-            background: '#FFE5EF',
-            color: '#000000',
-            maxWidth: '400px',
+                <span style={{fontWeight: 'bold'}}>Email not sent</span>
+                <span>{getErrorMessage(error)}</span>
+                <a
+                  href={`mailto:support@nyris.io?subject=Request for quotation&body=${information}`}
+                  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>
+            ),
+          },
+        );
+      }
+      setIsRfqModalOpen(false);
     }
-    setIsRfqModalOpen(false);
   };
 
   return (

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',

package/src/translations.ts

@@ -2,9 +2,10 @@ export const translations = {
   en: {
     translation: {
       Search: 'Search',
-      'Choose an image': 'Drag and drop ',
-      'or drag it here': 'an image here',
+      'Drag and drop': 'Drag and drop',
+      'an image here': 'an image here',
       'Manufacturer Number': 'Manufacturer No.',
+      'Mfr. No.': 'Mfr. No.',
       'Close group': 'Close group',
       'Show group': 'Show group',
       'Adjust the search frame around your object for improved results':
@@ -13,24 +14,74 @@ export const translations = {
       'Items per page': 'Items per page',
       'Search with an image': 'Search with an image',
       'Clear text search': 'Clear text search',
+      'View details': 'View details',
+      'Clear image search': 'Clear image search ',
+      'Add or change pre-filter': 'Add or change pre-filter',
+      'Expand all': 'Expand all',
+      'Collapse all': 'Collapse all',
+      Brand: 'Brand',
+      loading: 'loading',
+      'No products were found matching your search criteria.':
+        'No products were found matching your search criteria.',
+      'Please upload an image or enter a keyword to search.':
+        'Please upload an image or enter a keyword to search.',
     },
   },
   de: {
     translation: {
       Search: 'Suche',
-      'Choose an image': 'Bild wählen',
-      'or drag it here': 'oder hierhin ziehen',
-      'Manufacturer Number': 'Herst. Teile-Nr.',
+      'Drag and drop': 'Bild hierher ziehen',
+      'an image here': '',
+      'Mfr. No.': 'Herst. Teile-Nr.',
+      'Manufacturer Number': 'Herstellerteilenummer',
       'Close group': 'Schließe Gruppe',
       'Show group': 'Zeige Gruppe',
       'Adjust the search frame around your object for improved results':
         'Anpassen des Rahmens für bessere Ergebnisse',
-      'Crop the image for better results':
-        'Bildausschnitt anpassen für bessere Ergebnisse',
-
+      'Crop the image for better results': 'Zuschneiden für bessere Ergebnisse',
       'Items per page': 'Artikel pro Seite',
       'Search with an image': 'Bildsuche',
       'Clear text search': 'Suchtext löschen',
+      'View details': 'Details anzeigen',
+      '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',
+      Brand: 'Marke',
+      loading: 'Lädt',
+      'No products were found matching your search criteria.':
+        '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.',
+    },
+  },
+  pt: {
+    translation: {
+      Search: 'Busca',
+      'Drag and drop': 'Escolha uma imagem',
+      'an image here': '',
+      'Manufacturer Number': 'Número do fabricante',
+      'Mfr. No.': 'Nr. do Fab',
+      'Close group': 'Fechar grupo',
+      'Show group': 'Mostrar grupo',
+      'Adjust the search frame around your object for improved results':
+        'Ajuste a caixa de busca para melhores resultados',
+      'Crop the image for better results':
+        'Ajuste o campo de imagem para melhores resultados',
+      'Items per page': 'Itens por página',
+      'Search with an image': 'Busque com uma imagem',
+      'Clear text search': 'Limpar busca',
+      'View details': 'Ver detalhes',
+      'Clear image search': 'Limpar imagem',
+      'Add or change pre-filter': 'Adicionar ou selecionar pre-filtro',
+      'Expand all': 'Expandir',
+      'Collapse all': 'esconder tudo',
+      Brand: 'Marca',
+      loading: 'Carregando',
+      'No products were found matching your search criteria.':
+        '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',
     },
   },
 };

package/src/types.ts

@@ -39,6 +39,7 @@ export interface AppSettings extends NyrisAPISettings {
   cadenas3dWebView?: boolean;
   rfq?: boolean;
   inquiry?: boolean;
+  templateId?: string;
   warehouseVariant?: boolean;
   preFilterTitle?: string;
   postFilterOption?: boolean;