@nyris/nyris-webapp 0.3.45 → 0.3.47

package/src/components/Layout.tsx

@@ -41,6 +41,11 @@ jQuery(document).ready(function () {
     email: 'info@cadenas.de',
   });
   psol.core.setServiceBaseUrl('https://webapi.partcommunity.com');
+  window.onpageshow = function(event: any) {
+    if (event.persisted) {
+      window.location.reload();
+    }
+  };
 });
 
 i18n.use(initReactI18next).init({

package/src/components/ProductDetailView.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Box, Button, Collapse, Grid, Typography } from '@material-ui/core';
 import CloseOutlinedIcon from '@material-ui/icons/CloseOutlined';
 import IconOpenLink from 'common/assets/icons/Union.svg';
@@ -111,7 +111,15 @@ function ProductDetailView(props: Props) {
 
     setDataImageCarouSel(valueKey);
   };
-
+  const productDetails = useMemo(() => {
+    const details = get(dataItem, settings.field.productDetails);
+    try {
+      return details.join(', ');
+    } catch (e) {
+      return details;
+    }
+  }, [dataItem, settings.field.productDetails]);
+  const manufacturerNumber = get(dataItem, settings.field.manufacturerNumber);
   return (
     <Box
       className="box-modal-default"
@@ -143,7 +151,7 @@ function ProductDetailView(props: Props) {
           position: 'relative',
         }}
       >
-        {settings.cadenas3dWebView && (
+        {settings.cadenas?.cadenas3dWebView && (
           <CadenasWebViewer
             is3dView={is3dView}
             sku={sku}
@@ -229,7 +237,7 @@ function ProductDetailView(props: Props) {
         >
           {!is3dView &&
             status3dView !== 'not-found' &&
-            settings.cadenas3dWebView && (
+            settings.cadenas?.cadenas3dWebView && (
               <Box
                 style={{
                   background: '#E9E9EC',
@@ -347,7 +355,7 @@ function ProductDetailView(props: Props) {
                 style={{ gap: 6 }}
                 width={'100%'}
               >
-                {!settings.warehouseVariant && settings.CTAButtonText  && (
+                {!settings.warehouseVariant && settings.CTAButtonText && (
                   <ProductAttribute
                     title={'Produktname'}
                     value={title}
@@ -374,16 +382,16 @@ function ProductDetailView(props: Props) {
                     title={t('Brand')}
                     value={brand || settings.brandName}
                     width={
-                      dataItem[settings.field.manufacturerNumber]
+                      manufacturerNumber
                         ? { xs: '49%', md: 'fit-content' }
                         : { xs: '100%', md: 'fit-content' }
                     }
                   />
                 )}
-                {dataItem[settings.field.manufacturerNumber] && (
+                {manufacturerNumber && (
                   <ProductAttribute
                     title={t('Manufacturer Number')}
-                    value={dataItem[settings.field.manufacturerNumber]}
+                    value={manufacturerNumber}
                     width={
                       brand || settings.brandName
                         ? { xs: '49%', md: 'fit-content' }
@@ -460,7 +468,9 @@ function ProductDetailView(props: Props) {
                         paddingRight: '4px',
                       }}
                     >
-                      {settings.CTAButtonText ? settings.CTAButtonText : dataItem[settings.field.productName]}
+                      {settings.CTAButtonText
+                        ? settings.CTAButtonText
+                        : dataItem[settings.field.productName]}
                     </Typography>
                     {ctaLink && (
                       <img
@@ -471,7 +481,7 @@ function ProductDetailView(props: Props) {
                     )}
                   </Box>
                 </Box>
-                {dataItem[settings.field.productDetails] && (
+                {productDetails && (
                   <Box className="w-100">
                     <Button
                       className="w-100 button-hover"
@@ -509,7 +519,7 @@ function ProductDetailView(props: Props) {
                           color: '#2b2c46',
                         }}
                       >
-                        {dataItem[settings.field.productDetails]}
+                        {productDetails}
                       </Typography>
                     </Collapse>
                   </Box>

package/src/components/SidePanel.tsx

@@ -82,28 +82,35 @@ function SidePanel({
               >
                 <div
                   style={{
+                    display: 'flex',
+                    justifyContent: 'center',
                     backgroundColor: '#F3F3F5',
                     width: '100%',
                     paddingTop: '16px',
                     paddingBottom: '16px',
                   }}
                 >
-                  <Preview
-                    key={requestImage?.id}
-                    onSelectionChange={(r: RectCoords) => {
-                      setImageSelection(r);
-                      debouncedOnImageSelectionChange(r);
+                  <div
+                    style={{
+                      width: '288px',
+                      height: 'fit-content',
                     }}
-                    image={requestImage?.canvas}
-                    selection={imageSelection || DEFAULT_REGION}
-                    regions={filteredRegions}
-                    maxWidth={288}
-                    maxHeight={288}
-                    dotColor={'#FBD914'}
-                    minCropWidth={60}
-                    minCropHeight={60}
-                    rounded={true}
-                  />
+                  >
+                    <Preview
+                      key={requestImage?.id}
+                      onSelectionChange={(r: RectCoords) => {
+                        setImageSelection(r);
+                        debouncedOnImageSelectionChange(r);
+                      }}
+                      image={requestImage?.canvas}
+                      selection={imageSelection || DEFAULT_REGION}
+                      regions={filteredRegions}
+                      dotColor={'#FBD914'}
+                      minCropWidth={60}
+                      minCropHeight={60}
+                      rounded={true}
+                    />
+                  </div>
                 </div>
               </Box>
             </Box>

package/src/components/appMobile.scss

@@ -514,6 +514,12 @@
 
       video {
         overflow: hidden;
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        min-width: 100%;
+        min-height: 100%;
+
       }
     }
 
@@ -706,6 +712,7 @@
     border-radius: 100%;
     padding: 30px;  
     .outer {
+      display: block;
       border-radius: 100%;
       padding: 3px;
       background: linear-gradient(180deg, #AAABB5 0%, #FFFFFF 100%);

package/src/components/common.scss

@@ -64,6 +64,10 @@
   .box-body-newVersion-wrap-main {
     height: calc(100% - 50px);
     // overflow: auto;
+    .box-content-main {
+      height: auto;
+      margin-top: calc(50vh - 75px);
+    }
   }
 }
 
@@ -135,4 +139,134 @@
     background-color:#F0EFFF,
 
   }
+}
+
+.feedback-floating {
+  margin-left: -24px;
+  height: fit-content;
+  bottom: 35px;
+  position: fixed;
+  z-index: 201;
+  display: flex;
+  justify-content: flex-end;
+
+  @media screen and (max-width: 776px) {
+    margin-left: 0px;
+    height: fit-content !important;
+    bottom: 105px;
+    justify-content: center !important;
+  }
+}
+
+.feedback-wrapper {
+  background-color: #e4e3fff7;
+  mix-blend-mode: multiply;
+  border-radius: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-left: 30px;
+  padding-right: 30px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  width: fit-content;
+  height: fit-content;
+
+  column-gap: 22px;
+
+  flex-shrink: 0;
+  color: #2B2C46;
+
+  &:hover{
+    background-color: rgb(211, 209, 255, 0.97);
+
+  }
+
+  @media screen and (max-width: 776px) {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  p{
+    font-size: 14px;
+    font-weight: 600;
+    @media screen and (max-width: 776px) {
+      font-size: 12px;
+    }
+  }
+
+  .feedback-icon-wrapper {
+    width: 34px;
+    height: 34px;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      background-color: #FFF;
+      box-shadow: 0px 0px 7.04px 0px rgba(0, 0, 0, 0.10);
+      cursor: pointer;
+
+    }
+
+    svg{
+      width: 16px;
+      height: 16px;
+
+      @media screen and (max-width: 776px) {
+        width: 14px;
+        height: 14px;
+      }
+
+    }
+
+    @media screen and (max-width: 776px) {
+      width: 25px;
+      height: 25px;
+    }
+  }
+}
+
+.feedback-success {
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  background-color: #2B2C46;
+  width: 282px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  text-align: center;
+  border-radius: 26px;
+
+  @media screen and (max-width: 776px) {
+    font-size: 12px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    width: 264px;
+  }
+}
+
+.rfq-box{
+  padding: 24px 40px 24px 40px;
+
+  @media screen and (max-width: 776px) {
+    padding: 16px 16px 16px 16px;
+  
+  }
+
+  @media screen and (max-width: 820px) {
+    padding: 16px 16px 16px 16px;
+  
+  }
+
+  .support-button-wrapper {
+    flex-wrap: nowrap;
+
+    @media screen and (max-width: 820px) {
+      gap: 8px;
+    }
+  }
+
+  
 }

package/src/components/drawer/cameraCustom.tsx

@@ -6,7 +6,6 @@ import { RectCoords } from '@nyris/nyris-api';
 import ReverseCamera from 'common/assets/icons/reverse_camera.svg';
 import { isEmpty } from 'lodash';
 import React, { useCallback, useRef, useState } from 'react';
-import { useDropzone } from 'react-dropzone';
 import { useHistory } from 'react-router-dom';
 import Webcam from 'react-webcam';
 import { createImage, find, findRegions } from 'services/image';
@@ -43,9 +42,9 @@ function CameraCustom(props: Props) {
 
   const videoConstraints = {
     width: 1080,
-    height: 1080,
-    aspectRatio: 1.33333333333,
+    aspectRatio: 1.11111,
   };
+
   const handleClick = useCallback(() => {
     setFacingMode(prevState =>
       prevState === FACING_MODE_USER
@@ -63,7 +62,6 @@ function CameraCustom(props: Props) {
     let region: RectCoords | undefined;
     let imageConvert = await createImage(image);
     dispatch(setRequestImage(imageConvert));
-    dispatch(setImageSearchInput(image));
     dispatch(onToggleModalItemDetail(false));
     handlerCloseModal();
 
@@ -114,60 +112,6 @@ function CameraCustom(props: Props) {
     onToggleModal();
   };
 
-  const { getInputProps } = useDropzone({
-    onDrop: async (fs: File[]) => {
-      let payload: any;
-      let filters: any[] = [];
-      let region: RectCoords | undefined;
-      dispatch(updateStatusLoading(true));
-      dispatch(setImageSearchInput(URL.createObjectURL(fs[0])));
-      let image = await createImage(fs[0]);
-      dispatch(setRequestImage(image));
-      if (settings.regions) {
-        let res = await findRegions(image, settings);
-        dispatch(setRegions(res.regions));
-        region = res.selectedRegion;
-        dispatch(setSelectedRegion(region));
-      }
-
-      const preFilterValues = [
-        {
-          key: settings.visualSearchFilterKey,
-          values: Object.keys(preFilter) as string[],
-        },
-      ];
-      return find({
-        image,
-        settings,
-        filters: !isEmpty(preFilter) ? preFilterValues : undefined,
-        region,
-      })
-        .then((res: any) => {
-          res?.results.map((item: any) => {
-            filters.push({
-              sku: item.sku,
-              score: item.score,
-            });
-          });
-          payload = {
-            ...res,
-            filters,
-          };
-          dispatch(setSearchResults(payload));
-          setTimeout(() => {
-            dispatch(updateStatusLoading(false));
-            handlerCloseModal();
-            history.push('/result');
-          }, 500);
-        })
-        .catch((e: any) => {
-          console.log('err camera_custom', e);
-          dispatch(updateStatusLoading(false));
-          handlerCloseModal();
-        });
-    },
-  });
-
   return (
     <Box className="box-camera-custom">
       <Drawer
@@ -222,6 +166,7 @@ function CameraCustom(props: Props) {
                   onClick={() => {
                     const imageSrc = getScreenshot();
                     handlerFindImage(imageSrc);
+                    dispatch(setImageSearchInput(imageSrc));
                   }}
                   className="btn-capture-camera"
                 >
@@ -285,12 +230,17 @@ function CameraCustom(props: Props) {
               id="icon-button-file"
               type="file"
               style={{ display: 'none' }}
-              {...getInputProps({
-                accept: 'image/png,image/jpeg',
-                onClick: e => {
-                  e.stopPropagation();
-                },
-              })}
+              onChange={(fs: any) => {
+                const file = fs.target?.files[0];
+                if (!file) return;
+                dispatch(setImageSearchInput(URL.createObjectURL(file)));
+                handlerFindImage(file);
+              }}
+              accept="image/jpeg,image/png,image/webp"
+              onClick={event => {
+                // @ts-ignore
+                event.target.value = '';
+              }}
             />
             <label htmlFor="icon-button-file">
               <IconButton