@nyris/nyris-webapp 0.3.69 → 0.3.70

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.69",
+  "version": "0.3.70",
   "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.70",
+    "@nyris/nyris-react-components": "^0.3.70",
     "@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: '',

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/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

@@ -13,7 +13,6 @@ function UploadDisclaimer({
   isMobile: boolean;
 }) {
   const [dontShowAgain, setDontShowAgain] = useState(false);
-  const isCadSearch = window.settings.cadSearch;
 
   return (
     <>
@@ -68,9 +67,9 @@ function UploadDisclaimer({
                 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/hooks/useImageSearch.ts

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import { RectCoords } from '@nyris/nyris-api';
 import { isEmpty } from 'lodash';
 import { useCallback } from 'react';
@@ -61,15 +63,34 @@ export const useImageSearch = () => {
       let res: any;
       let compressedBase64;
 
+      let blob = image;
+
+      if (['.heic', '.heif'].some(ex => image?.name?.endsWith(ex))) {
+        const blobTemp = new Blob([image], { type: 'image/heif' });
+        const buffer = new Uint8Array(await blobTemp.arrayBuffer());
+
+        try {
+          const convert = await import('heic-convert/browser');
+
+          let outputBuffer = await convert.default({
+            buffer: buffer, // the HEIC file buffer
+            format: 'JPEG', // output format
+          });
+          blob = new Blob([outputBuffer], { type: 'image/jpeg' });
+        } catch (error) {
+          console.log('HEIC conversion error:', error);
+        }
+      }
+
       if (compress) {
         try {
-          compressedBase64 = await compressImage(image);
+          compressedBase64 = await compressImage(blob);
         } catch (error) {}
       }
 
-      let canvasImage = await createImage(compressedBase64 || image);
+      let canvasImage = await createImage(compressedBase64 || blob);
 
-      let requestImage = await createImage(image);
+      let requestImage = await createImage(blob);
 
       if (!imageRegion) {
         dispatch(setRequestImage(canvasImage));
@@ -84,7 +105,9 @@ export const useImageSearch = () => {
           region = res.selectedRegion;
           dispatch(setSelectedRegion(region));
           setImageRegions([region]);
-        } catch (error) {}
+        } catch (error) {
+          console.log('Error finding regions', error);
+        }
       }
 
       const preFilterValues = [

package/src/translations.ts

@@ -14,7 +14,7 @@ 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 description',
+      'View details': 'View details',
       'Clear image search': 'Clear image search ',
       'Add or change pre-filter': 'Add or change pre-filter',
       'Expand all': 'Expand all',

package/src/types.ts

@@ -65,6 +65,11 @@ interface Attributes {
   attributeFourValue?: string;
 }
 
+interface ProductDetailsAttribute {
+  propertyName: string;
+  value: string;
+}
+
 export interface AppSettings extends NyrisAPISettings {
   algolia: AlgoliaSettings;
   alogoliaFilterField?: string;
@@ -75,6 +80,7 @@ export interface AppSettings extends NyrisAPISettings {
   clarityId?: string;
   mainTitle: string;
   productDetails: string;
+  productDetailsAttribute?: ProductDetailsAttribute[];
   secondaryTitle: string;
   CTAButton?: CTAButtonSettings;
   secondaryCTAButton?: SecondaryCTAButton;