@nyris/nyris-webapp 0.3.50 → 0.3.52

package/src/components/ProductAttribute.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 import React from 'react';
 
 interface Props {
@@ -6,6 +6,8 @@ interface Props {
   value: any;
   padding?: string;
   width?: any;
+  backgroundColor?: string;
+  isTitleVisible?: boolean;
 }
 
 function ProductAttribute(props: Props) {
@@ -14,33 +16,38 @@ function ProductAttribute(props: Props) {
     value,
     padding = props.padding || '4px 16px',
     width = props.width || 'fit-content',
+    isTitleVisible = typeof props.isTitleVisible === 'boolean' ? props.isTitleVisible : true,
   } = props;
 
   return (
     <>
       {title && (
-        <Box
-          display="flex"
-          flexDirection={'column'}
-          borderRadius={2}
-          width={width}
+        <div
           style={{
-            backgroundColor: '#E0E0E0',
+            display: 'flex',
+            flexDirection: 'column',
+            borderRadius: 2,
+            width: width,
+            backgroundColor: props.backgroundColor || '#E0E0E0',
             padding: padding,
             flexGrow: 1,
           }}
         >
-          <Typography
-            style={{
-              color: '#2B2C46',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            }}
-            className="text-f12 fw-700"
-          >
-            {title}
-          </Typography>
+          {isTitleVisible ? (
+            <Typography
+              style={{
+                color: '#2B2C46',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+              className="text-f12 fw-700"
+            >
+              {title}
+            </Typography>
+          ) : (
+           '' 
+          )}
           <Typography
             style={{
               color: '#2B2C46',
@@ -52,7 +59,7 @@ function ProductAttribute(props: Props) {
           >
             {value}
           </Typography>
-        </Box>
+        </div>
       )}
     </>
   );

package/src/components/ProductDetailView.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Box, Button, Collapse, Grid, Typography } from '@material-ui/core';
+import { Button, Collapse, Grid, Typography } from '@material-ui/core';
 import CloseOutlinedIcon from '@material-ui/icons/CloseOutlined';
-import IconOpenLink from 'common/assets/icons/Union.svg';
+import { ReactComponent as IconOpenLink }  from 'common/assets/icons/Union.svg';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import { useMediaQuery } from 'react-responsive';
 import { ImagePreviewCarousel } from './carousel/ImagePreviewCarousel';
@@ -9,8 +9,6 @@ import { ReactComponent as IconSearchImage } from 'common/assets/icons/icon_sear
 import { ReactComponent as IconShare } from 'common/assets/icons/Fill.svg';
 import { ReactComponent as IconDisLike } from 'common/assets/icons/icon_dislike.svg';
 import { ReactComponent as IconLike } from 'common/assets/icons/icon_like.svg';
-import { ReactComponent as IconSettings } from 'common/assets/icons/settings.svg';
-
 import { AppState } from 'types';
 import { useAppSelector } from 'Store/Store';
 import { prepareImageList } from '../helpers/CommonHelper';
@@ -23,6 +21,7 @@ import ProductAttribute from './ProductAttribute';
 import CadenasWebViewer from './CadenasWebViewer';
 import { makeStyles } from '@material-ui/core/styles';
 import { get, isUndefined } from 'lodash';
+import { ReactComponent as IconSettings } from 'common/assets/icons/settings.svg';
 
 const useStyles = makeStyles(theme => ({
   buttonStyle3D: {
@@ -130,16 +129,16 @@ function ProductDetailView(props: Props) {
   }, [dataItem, settings.field.productDetails]);
   const manufacturerNumber = get(dataItem, settings.field.manufacturerNumber);
   return (
-    <Box
+    <div
       className="box-modal-default"
-      borderRadius={12}
       style={{
         margin: isMobile ? 0 : '',
         width: '600px',
         backgroundColor: '#fff',
+        borderRadius: 12,
       }}
     >
-      <Box
+      <div
         className="ml-auto"
         style={{
           width: 'fit-content',
@@ -153,7 +152,7 @@ function ProductDetailView(props: Props) {
         <Button style={{ padding: 0 }} onClick={() => handleClose?.()}>
           <CloseOutlinedIcon style={{ fontSize: 24, color: '#55566B' }} />
         </Button>
-      </Box>
+      </div>
 
       <div
         style={{
@@ -168,7 +167,7 @@ function ProductDetailView(props: Props) {
             setStatus3dView={setStatus3dView}
           />
         )}
-        <Box
+        <div
           className="box-carosel"
           style={{
             ...(dataImageCarousel.length === 0
@@ -234,7 +233,7 @@ function ProductDetailView(props: Props) {
               />
             </div>
           )}
-        </Box>
+        </div>
 
         <div
           className={classes.buttonStyle3D}
@@ -247,7 +246,7 @@ function ProductDetailView(props: Props) {
           {!is3dView &&
             status3dView !== 'not-found' &&
             settings.cadenas?.cadenas3dWebView && (
-              <Box
+              <div
                 style={{
                   background: '#E9E9EC',
                   width: '32px',
@@ -263,10 +262,10 @@ function ProductDetailView(props: Props) {
                 }}
               >
                 <Box3dIcon width={16} height={16} color={'#AAABB5'} />
-              </Box>
+              </div>
             )}
           {is3dView && (
-            <Box
+            <div
               style={{
                 background: '#2B2C46',
                 width: '32px',
@@ -282,12 +281,12 @@ function ProductDetailView(props: Props) {
               }}
             >
               <CloseIcon width={16} height={16} color={'#FFF'} />
-            </Box>
+            </div>
           )}
         </div>
       </div>
 
-      <Box
+      <div
         style={{
           overflowY: 'auto',
           maxHeight: '90svh',
@@ -298,33 +297,33 @@ function ProductDetailView(props: Props) {
           marginTop: '6px',
         }}
       >
-        <Box
+        <div
           className="box-content"
-          display={'flex'}
           style={{
+            display: 'flex',
             marginTop: '16px',
             flexDirection: 'column',
             backgroundColor: '#F3F3F5',
           }}
         >
-          <Box className="box-top">
+          <div className="box-top">
             {settings.warehouseVariant && (
-              <Box
-                display="flex"
-                justifyContent={'space-between'}
-                flexDirection={'row'}
+              <div
                 style={{
-                  color: '#2B2C46',
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  flexDirection: 'row',
+                  color: settings.theme.mainTextColor ||'#2B2C46',
                   marginBottom: 10,
                   paddingLeft: 16,
                   paddingRight: 16,
+                  gridGap: 8,
                 }}
-                gridGap={8}
               >
                 <Typography
                   className="text-f12 max-line-1 fw-400"
                   style={{
-                    color: '#2B2C46',
+                    color: settings.theme.mainTextColor || '#2B2C46',
                   }}
                 >
                   {sku}
@@ -337,7 +336,7 @@ function ProductDetailView(props: Props) {
                     <Typography
                       className="text-f12 max-line-1 fw-400"
                       style={{
-                        color: '#2B2C46',
+                        color: settings.theme.mainTextColor || '#2B2C46',
                       }}
                     >
                       <span
@@ -355,7 +354,7 @@ function ProductDetailView(props: Props) {
                       </span>
                     </Typography>
                   )}
-              </Box>
+              </div>
             )}
 
             <Grid
@@ -363,17 +362,20 @@ function ProductDetailView(props: Props) {
               justifyContent="space-between"
               style={{ backgroundColor: '#F3F3F5' }}
             >
-              <Box
-                display="flex"
-                flexDirection="row"
-                flexWrap="wrap"
-                style={{ gap: 6 }}
-                width={'100%'}
+              <div
+                style={{
+                  gap: 6,
+                  display: 'flex',
+                  flexDirection: 'row',
+                  flexWrap: 'wrap',
+                  width: '100%',
+                }}
               >
                 {!settings.warehouseVariant && settings.CTAButtonText && (
                   <ProductAttribute
-                    title={'Produktname'}
+                    title={t('Product name')}
                     value={title}
+                    backgroundColor={settings.theme.brandFieldBackground}
                     width={
                       settings.warehouseVariant
                         ? { xs: '49%', md: 'fit-content' }
@@ -385,6 +387,7 @@ function ProductDetailView(props: Props) {
                   <ProductAttribute
                     title={settings.itemIdLabel || 'SKU'}
                     value={sku}
+                    backgroundColor={''}
                     width={
                       settings.warehouseVariant
                         ? { xs: '49%', md: 'fit-content' }
@@ -396,6 +399,7 @@ function ProductDetailView(props: Props) {
                   <ProductAttribute
                     title={t('Brand')}
                     value={brand || settings.brandName}
+                    backgroundColor={settings.theme.brandFieldBackground}
                     width={
                       manufacturerNumber
                         ? { xs: '49%', md: 'fit-content' }
@@ -446,7 +450,7 @@ function ProductDetailView(props: Props) {
                     )}
                   </>
                 )}
-              </Box>
+              </div>
 
               <Grid
                 item
@@ -456,19 +460,19 @@ function ProductDetailView(props: Props) {
                 }}
               >
                 {settings.secondaryCTAButtonText && (
-                  <Box
+                  <div
                     style={{
-                      background: '#2B2C46',
+                      background: settings.theme.secondaryCTAButtonColor || '#2B2C46',
                       boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
                       borderRadius: 4,
                       marginTop: 8,
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
                     }}
-                    display={'flex'}
-                    justifyContent={'space-between'}
-                    alignItems={'center'}
                     className="btn-detail-item"
                   >
-                    <Box
+                    <div
                       style={{
                         display: 'flex',
                         justifyContent: 'space-between',
@@ -496,23 +500,23 @@ function ProductDetailView(props: Props) {
                         {settings.secondaryCTAButtonText}
                       </Typography>
                       {secondaryCTALink && <IconSettings color="white" />}
-                    </Box>
-                  </Box>
+                    </div>
+                  </div>
                 )}
 
-                <Box
+                <div
                   style={{
-                    background: settings.theme?.primaryColor,
+                    background: settings.theme?.CTAButtonColor || settings.theme?.primaryColor,
                     boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
                     borderRadius: 4,
                     marginTop: 8,
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
                   }}
-                  display={'flex'}
-                  justifyContent={'space-between'}
-                  alignItems={'center'}
                   className="btn-detail-item"
                 >
-                  <Box
+                  <div
                     style={{
                       display: 'flex',
                       justifyContent: 'space-between',
@@ -529,9 +533,10 @@ function ProductDetailView(props: Props) {
                     }}
                   >
                     <Typography
-                      className="text-f18 fw-700 text-white max-line-2"
+                      className="text-f18 fw-700 max-line-2"
                       align="left"
                       style={{
+                        color: settings.theme?.CTAButtonTextColor || '#FFFFFF',
                         letterSpacing: '0.55px',
                         maxWidth: '500px',
                         paddingRight: '4px',
@@ -542,22 +547,17 @@ function ProductDetailView(props: Props) {
                         : dataItem[settings.field.productName]}
                     </Typography>
                     {ctaLink && (
-                      <img
-                        src={IconOpenLink}
-                        alt=""
-                        style={{ minWidth: 16, marginLeft: 5 }}
-                      />
+                      <IconOpenLink fill={settings.theme?.CTAButtonTextColor || '#FFFFFF'} width={16} />
                     )}
-                  </Box>
-                </Box>
-
+                  </div>
+                </div>
                 {productDetails && (
-                  <Box className="w-100">
+                  <div className="w-100">
                     <Button
                       className="w-100 button-hover"
                       style={{
                         backgroundColor: '#F3F3F5',
-                        color: '#2b2c46',
+                        color: settings.theme.mainTextColor || '#2b2c46',
                         display: 'flex',
                         fontSize: 14,
                         justifyContent: 'space-between',
@@ -586,29 +586,29 @@ function ProductDetailView(props: Props) {
                           padding: 5,
                           paddingLeft: 15,
                           paddingRight: 15,
-                          color: '#2b2c46',
+                          color: settings.theme.mainTextColor || '#2b2c46',
                         }}
                       >
                         {productDetails}
                       </Typography>
                     </Collapse>
-                  </Box>
+                  </div>
                 )}
               </Grid>
             </Grid>
-          </Box>
+          </div>
 
           {settings.showFeedbackAndShare && (
-            <Box
+            <div
               className="box-bottom"
               style={{
                 height: '48px',
                 padding: '0px 16px 0px 16px',
                 marginBottom: 10,
                 marginTop: 10,
+                display: 'flex',
+                justifyContent: 'center',
               }}
-              display={'flex'}
-              justifyContent={'center'}
             >
               <Grid
                 container
@@ -618,7 +618,7 @@ function ProductDetailView(props: Props) {
                 alignItems="center"
               >
                 <Grid item>
-                  <Box display={'flex'} alignItems={'center'}>
+                  <div style={{ display: 'flex', alignItems: 'center' }}>
                     <Button
                       className="btn-item"
                       onClick={() => {
@@ -632,10 +632,10 @@ function ProductDetailView(props: Props) {
                         color={feedback === 'like' ? '#3E36DC' : '#000000'}
                       />
                     </Button>
-                  </Box>
+                  </div>
                 </Grid>
                 <Grid item>
-                  <Box display={'flex'} alignItems={'center'}>
+                  <div style={{ display: 'flex', alignItems: 'center' }}>
                     <Button
                       className="btn-item"
                       onClick={() => {
@@ -649,24 +649,24 @@ function ProductDetailView(props: Props) {
                         color={feedback === 'dislike' ? '#CC1854' : '#000000'}
                       />
                     </Button>
-                  </Box>
+                  </div>
                 </Grid>
                 {settings.shareOption && (
                   <Grid item>
-                    <Box display={'flex'} alignItems={'center'}>
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
                       <Button
                         className="btn-item"
                         onClick={() => onHandlerModalShare()}
                       >
                         <IconShare width={24} height={24} color="#000000" />
                       </Button>
-                    </Box>
+                    </div>
                   </Grid>
                 )}
                 {/* <Grid item>
-              <Box display={'flex'} alignItems={'center'}>
+              <div display={'flex'} alignItems={'center'}>
                 <Button className="btn-item">
-                  <Box
+                  <div
                     className=""
                     display={'flex'}
                     justifyContent={'center'}
@@ -678,16 +678,16 @@ function ProductDetailView(props: Props) {
                       className="icon_support"
                       style={{ width: '30px' }}
                     />
-                  </Box>
+                  </div>
                 </Button>
-              </Box>
+              </div>
             </Grid> */}
               </Grid>
-            </Box>
+            </div>
           )}
-        </Box>
-      </Box>
-    </Box>
+        </div>
+      </div>
+    </div>
   );
 }
 

package/src/components/ProductList/index.tsx

@@ -1,4 +1,3 @@
-import { Box } from '@material-ui/core';
 import ItemResult from 'components/results/ItemResult';
 import React, { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -42,9 +41,9 @@ function ProductListComponent({
       !isSearchStalled
     ) {
       return (
-        <Box style={{ marginTop: '50px', width: '100%', textAlign: 'center' }}>
+        <div style={{ marginTop: '50px', width: '100%', textAlign: 'center' }}>
           {t('Please upload an image or enter a keyword to search.')}
-        </Box>
+        </div>
       );
     } else if (
       productList.length === 0 &&
@@ -52,14 +51,14 @@ function ProductListComponent({
       !isSearchStalled
     ) {
       return (
-        <Box style={{ marginTop: '50px', width: '100%', textAlign: 'center' }}>
+        <div style={{ marginTop: '50px', width: '100%', textAlign: 'center' }}>
           {t('No products were found matching your search criteria.')}
-        </Box>
+        </div>
       );
     }
     return productList.map((hit: any, i: number) => {
       return (
-        <Box key={i} style={{ height: 'fit-content' }}>
+        <div key={i} style={{ height: 'fit-content' }}>
           <ItemResult
             dataItem={hit}
             indexItem={i}
@@ -81,7 +80,7 @@ function ProductListComponent({
               hit['image(main_similarity)'] || hit['main_image_link']
             }
           />
-        </Box>
+        </div>
       );
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/SelectedPostFilter.tsx

@@ -7,7 +7,6 @@ import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { useFilter } from 'hooks/useFilter';
 import { get } from 'lodash';
 import { clearPostFilter, setPostFilter } from 'Store/search/Search';
-import { Box } from '@material-ui/core';
 
 export type CurrentRefinementsProps = {
   className?: string;
@@ -46,7 +45,7 @@ export function SelectedPostFilter({ className }: CurrentRefinementsProps) {
   }
 
   return (
-    <Box className="wrap-box-refinements">
+    <div className="wrap-box-refinements">
       <div style={{ display: 'flex', flexFlow: 'wrap', columnGap: '8px' }}>
         {selectedFilters.map(filter => {
           return (
@@ -98,6 +97,6 @@ export function SelectedPostFilter({ className }: CurrentRefinementsProps) {
           </div>
         </div>
       </div>
-    </Box>
+    </div>
   );
 }