@nyris/nyris-webapp 0.3.50 → 0.3.52

package/src/components/results/ItemResult.tsx

@@ -1,12 +1,11 @@
-import { Box, Button, Grid, Tooltip, Typography } from '@material-ui/core';
+import { Button, Grid, Tooltip, Typography } from '@material-ui/core';
 import ChevronRightOutlinedIcon from '@material-ui/icons/ChevronRightOutlined';
-import IconOpenLink from 'common/assets/icons/Union.svg';
+import { ReactComponent as IconOpenLink } from 'common/assets/icons/Union.svg';
 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 IconSearchImage } from 'common/assets/icons/icon_search_image2.svg';
 import { ReactComponent as Box3dIcon } from 'common/assets/icons/3d.svg';
-import { ReactComponent as IconSettings } from 'common/assets/icons/settings.svg';
 
 import React, { memo, useEffect, useState } from 'react';
 import NoImage from 'common/assets/images/no-image.svg';
@@ -24,6 +23,7 @@ import { feedbackClickEpic, feedbackConversionEpic } from 'services/Feedback';
 import ProductDetailView from 'components/ProductDetailView';
 import ProductAttribute from '../ProductAttribute';
 import { get, isUndefined } from 'lodash';
+import { ReactComponent as IconSettings } from 'common/assets/icons/settings.svg';
 
 interface Props {
   dataItem: any;
@@ -116,6 +116,8 @@ function ItemResult(props: Props) {
     dataItem,
     settings.field?.ctaLinkField ? settings.field?.ctaLinkField : 'links.main',
   );
+  const manufacturerNumber = get(dataItem, settings.field.manufacturerNumber);
+
   const secondaryCTALink = get(
     dataItem,
     settings.field?.secondaryCTALinkField
@@ -123,9 +125,8 @@ function ItemResult(props: Props) {
       : '',
   );
 
-  const manufacturerNumber = get(dataItem, settings.field.manufacturerNumber);
   return (
-    <Box className="wrap-main-item-result">
+    <div className="wrap-main-item-result">
       <DefaultModal
         openModal={openDetailedView === '3d' || openDetailedView === 'image'}
         handleClose={(e: any) => {
@@ -152,25 +153,25 @@ function ItemResult(props: Props) {
         dataItem={dataItem}
         isOpen={isOpenModalShare}
       />
-      <Box className="box-top">
+      <div className="box-top">
         {isGroupItem && collap && (
-          <Box className="btn-show-result">
+          <div className="btn-show-result">
             <Button onClick={handlerShowGroup}>
               {t('Show group')}
               <ChevronRightOutlinedIcon style={{ fontSize: '10px' }} />
             </Button>
-          </Box>
+          </div>
         )}
         {isGroupItem && !collap && (
-          <Box className="btn-show-result">
+          <div className="btn-show-result">
             <Button onClick={handlerHideGroup}>
               {t('Close group')}
               <ChevronRightOutlinedIcon style={{ fontSize: '10px' }} />
             </Button>
-          </Box>
+          </div>
         )}
         {!isHover && main_image_link && (
-          <Box
+          <div
             className="box-icon-modal"
             onClick={() => {
               if (urlImage.length > 1) {
@@ -179,21 +180,21 @@ function ItemResult(props: Props) {
             }}
           >
             <IconSearchImage width={16} height={16} color={'#AAABB5'} />
-          </Box>
+          </div>
         )}
         {settings.cadenas?.cadenas3dWebView && (
-          <Box
+          <div
             className="box-icon-modal-3d"
             onClick={() => {
               setOpenDetailedView('3d');
             }}
           >
             <Box3dIcon width={16} height={16} color={'#AAABB5'} />
-          </Box>
+          </div>
         )}
 
-        <Box className="box-image">
-          <Box
+        <div className="box-image">
+          <div
             style={{
               width: '100%',
               height: '100%',
@@ -222,48 +223,50 @@ function ItemResult(props: Props) {
                 style={{ width: '70%', height: '50%' }}
               />
             )}
-          </Box>
-        </Box>
-      </Box>
+          </div>
+        </div>
+      </div>
 
-      <Box
+      <div
         className="box-content"
-        display={'flex'}
         style={{
           flexDirection: 'column',
           backgroundColor: '#F3F3F5',
           flexGrow: 1,
           zIndex: 100,
+          display: 'flex',
         }}
       >
-        <Box className="box-top" style={{ color: '#FFFFFF' }}>
-          <Box
-            display="flex"
-            justifyContent={'space-between'}
-            flexDirection={'column'}
-            style={{ color: '#2B2C46' }}
-            gridGap={6}
+        <div className="box-top" style={{ color: '#FFFFFF' }}>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              flexDirection: 'column',
+              gridGap: 8,
+              color: settings.theme.mainTextColor || '#2B2C46',
+            }}
           >
             {settings.CTAButtonText && (
               <Typography
                 className="text-f12 max-line-1 fw-700"
                 style={{
-                  color: '#2B2C46',
+                  color: settings.theme.mainTextColor || '#2B2C46',
                   marginTop: 8,
                 }}
               >
                 {truncateString(dataItem[settings.field.productName], 45)}
               </Typography>
             )}
-            <Box
-              display="flex"
-              justifyContent={'space-between'}
-              flexDirection={'row'}
+            <div
               style={{
-                color: '#2B2C46',
-                marginTop: !settings.CTAButtonText ? 8 : -6,
+                display: 'flex',
+                justifyContent: 'space-between',
+                flexDirection: 'row',
+                gridGap: 8,
+                color: settings.theme.mainTextColor || '#2B2C46',
+                marginTop: settings.CTAButtonText ? 0 : 8,
               }}
-              gridGap={8}
             >
               <Tooltip
                 title={sku}
@@ -274,7 +277,7 @@ function ItemResult(props: Props) {
                 <Typography
                   className="text-f12 max-line-1 fw-400"
                   style={{
-                    color: '#2B2C46',
+                    color: settings.theme.mainTextColor || '#2B2C46',
                   }}
                 >
                   {truncateString(
@@ -291,7 +294,7 @@ function ItemResult(props: Props) {
                   <Typography
                     className="text-f12 max-line-1 fw-400"
                     style={{
-                      color: '#2B2C46',
+                      color: settings.theme?.mainTextColor || '#2B2C46',
                     }}
                   >
                     <span
@@ -306,20 +309,24 @@ function ItemResult(props: Props) {
                     </span>
                   </Typography>
                 )}
-            </Box>
-            <Box
-              display="flex"
-              justifyContent={'space-between'}
-              flexDirection={'row'}
-              style={{ color: '#2B2C46' }}
-              gridGap={8}
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                flexDirection: 'row',
+                gridGap: 8,
+                color: settings.theme.mainTextColor || '#2B2C46',
+              }}
             >
               {(brand || settings.brandName) && (
                 <ProductAttribute
                   title={t('Brand')}
                   value={brand || settings.brandName}
-                  padding="4px 8px"
+                  padding={settings.theme.brandFieldPadding || '4px 8px'}
                   width={{ xs: '49%' }}
+                  backgroundColor={settings.theme.brandFieldBackground}
+                  isTitleVisible={settings.isBrandNameTitleVisible}
                 />
               )}
 
@@ -331,15 +338,18 @@ function ItemResult(props: Props) {
                   width={{ xs: '49%' }}
                 />
               )}
-            </Box>
-          </Box>
-        </Box>
+            </div>
+          </div>
+        </div>
         {settings.warehouseVariant && (
-          <Box
-            display="flex"
-            justifyContent={'space-between'}
-            style={{ color: '#2B2C46', marginTop: '8px' }}
-            gridGap={10}
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              gridGap: 10,
+              color: settings.theme.mainTextColor || '#2B2C46',
+              marginTop: 8,
+            }}
           >
             {settings.field.warehouseNumber && (
               <ProductAttribute
@@ -369,26 +379,26 @@ function ItemResult(props: Props) {
                 width={{ xs: '49%' }}
               />
             )}
-          </Box>
+          </div>
         )}
         <div>
           {settings.secondaryCTAButtonText && (
-            <Box
+            <div
               style={{
                 boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
                 // marginBottom: 22,
                 height: 40,
-                background: '#2B2C46',
+                background: settings.theme.secondaryCTAButtonColor || '#2B2C46',
                 borderRadius: 4,
                 padding: '0px 8px',
                 marginTop: '8px',
+                display: 'flex',
+                justifyItems: 'center',
+                alignItems: 'center',
+                justifyContent: 'space-between',
               }}
-              display={'flex'}
-              justifyItems={'center'}
-              alignItems={'center'}
-              justifyContent={'space-between'}
             >
-              <Box
+              <div
                 style={{
                   display: 'flex',
                   justifyContent: 'space-between',
@@ -422,8 +432,8 @@ function ItemResult(props: Props) {
                 {!isMobile && secondaryCTALink && (
                   <IconSettings color="white" />
                 )}
-              </Box>
-            </Box>
+              </div>
+            </div>
           )}
           {!settings.CTAButtonText ? (
             <Tooltip
@@ -434,22 +444,22 @@ function ItemResult(props: Props) {
                 dataItem[settings.field.productName]?.length < 45
               }
             >
-              <Box
+              <div
                 style={{
                   boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
                   // marginBottom: 22,
                   height: 40,
-                  background: settings.theme?.primaryColor,
+                  background: settings.theme?.CTAButtonColor || settings.theme?.primaryColor,
                   borderRadius: 4,
                   padding: '0px 8px',
                   marginTop: '8px',
+                  display: 'flex',
+                  justifyItems: 'center',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
                 }}
-                display={'flex'}
-                justifyItems={'center'}
-                alignItems={'center'}
-                justifyContent={'space-between'}
               >
-                <Box
+                <div
                   style={{
                     display: 'flex',
                     justifyContent: 'space-between',
@@ -465,11 +475,12 @@ function ItemResult(props: Props) {
                   }}
                 >
                   <Typography
-                    className="text-white max-line-2"
+                    className="max-line-2"
                     style={{
                       overflow: 'hidden',
                       textOverflow: 'ellipsis',
                       fontWeight: 500,
+                      color: settings.theme?.CTAButtonTextColor || '#FFFFFF',
                       fontSize: '12px',
                       letterSpacing: '0.27px',
                       wordBreak: 'break-all',
@@ -481,28 +492,28 @@ function ItemResult(props: Props) {
                     {truncateString(dataItem[settings.field.productName], 45)}
                   </Typography>
                   {!isMobile && ctaLink && (
-                    <img src={IconOpenLink} alt="more-info" width={16} />
+                    <IconOpenLink fill={settings.theme?.CTAButtonTextColor || '#FFFFFF'} width={16} />
                   )}
-                </Box>
-              </Box>
+                </div>
+              </div>
             </Tooltip>
           ) : (
-            <Box
+            <div
               style={{
                 boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
                 // marginBottom: 22,
                 height: 40,
-                background: settings.theme?.primaryColor,
+                background: settings.theme?.CTAButtonColor || settings.theme?.primaryColor,
                 borderRadius: 4,
                 padding: '0px 8px',
                 marginTop: '8px',
+                display: 'flex',
+                justifyItems: 'center',
+                alignItems: 'center',
+                justifyContent: 'space-between',
               }}
-              display={'flex'}
-              justifyItems={'center'}
-              alignItems={'center'}
-              justifyContent={'space-between'}
             >
-              <Box
+              <div
                 style={{
                   display: 'flex',
                   justifyContent: 'space-between',
@@ -518,11 +529,12 @@ function ItemResult(props: Props) {
                 }}
               >
                 <Typography
-                  className="text-white max-line-2"
+                  className="max-line-2"
                   style={{
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
                     fontWeight: 500,
+                    color: settings.theme?.CTAButtonTextColor || '#FFFFFF',
                     fontSize: '12px',
                     letterSpacing: '0.27px',
                     wordBreak: 'break-all',
@@ -534,14 +546,14 @@ function ItemResult(props: Props) {
                   {settings.CTAButtonText}
                 </Typography>
                 {!isMobile && ctaLink && (
-                  <img src={IconOpenLink} alt="more-info" width={16} />
+                  <IconOpenLink fill={settings.theme?.CTAButtonTextColor || '#FFFFFF'} width={16} />
                 )}
-              </Box>
-            </Box>
+              </div>
+            </div>
           )}
 
           {settings.showFeedbackAndShare && (
-            <Box
+            <div
               className="box-bottom"
               style={{ marginBottom: 6, marginTop: 12 }}
             >
@@ -553,7 +565,12 @@ function ItemResult(props: Props) {
                 alignItems="center"
               >
                 <Grid item>
-                  <Box display={'flex'} alignItems={'center'}>
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}
+                  >
                     <Button
                       className="btn-item"
                       onClick={() => {
@@ -567,10 +584,15 @@ function ItemResult(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={() => {
@@ -584,26 +606,31 @@ function ItemResult(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={() => setOpenModalShare(true)}
                       >
                         <IconShare width={16} height={16} color="#000000" />
                       </Button>
-                    </Box>
+                    </div>
                   </Grid>
                 )}
               </Grid>
-            </Box>
+            </div>
           )}
         </div>
-      </Box>
-    </Box>
+      </div>
+    </div>
   );
 }
 

package/src/components/rfq/RfqBanner.tsx

@@ -1,6 +1,5 @@
-import { Box } from '@material-ui/core';
-import { getCroppedCanvas } from 'helpers/getCroppedCanvas';
 import React from 'react';
+import { getCroppedCanvas } from 'helpers/getCroppedCanvas';
 import { useMediaQuery } from 'react-responsive';
 
 function RfqBanner({
@@ -19,7 +18,7 @@ function RfqBanner({
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
 
   return (
-    <Box
+    <div
       style={{
         padding: '0px 16px 0px 16px',
         backgroundColor: '#F6F3F1',
@@ -32,7 +31,7 @@ function RfqBanner({
       }}
       className="rfq-box"
     >
-      <Box
+      <div
         style={{
           width: '100%',
           display: 'flex',
@@ -56,13 +55,13 @@ function RfqBanner({
             }}
           />
         </div>
-        <Box>
-          <Box
+        <div>
+          <div
             style={{
               paddingBottom: '12px',
             }}
           >
-            <Box
+            <div
               style={{
                 fontSize: '14px',
                 color: rfqStatus === 'inactive' ? '#4B4B4A' : '#CACAD1',
@@ -72,8 +71,8 @@ function RfqBanner({
               {isMobile
                 ? 'No matches found?'
                 : 'No matches found for your request?'}
-            </Box>
-            <Box
+            </div>
+            <div
               style={{
                 fontSize: '12px',
                 maxWidth: '320x',
@@ -83,8 +82,8 @@ function RfqBanner({
               }}
             >
               Get personalised help from our team of product experts.
-            </Box>
-          </Box>
+            </div>
+          </div>
           <button
             style={{
               maxWidth: '200px',
@@ -110,9 +109,9 @@ function RfqBanner({
           >
             Request a Quote
           </button>
-        </Box>
-      </Box>
-    </Box>
+        </div>
+      </div>
+    </div>
   );
 }
 

package/src/components/rfq/RfqModal.tsx

@@ -48,7 +48,7 @@ export default function RfqModal({
 
   const [information, setInformation] = useState('');
   const setFormattedContent = React.useCallback(
-    text => {
+    (text: string) => {
       setInformation(text.slice(0, 150));
     },
     [setInformation],

package/src/index.tsx

@@ -1,9 +1,9 @@
 // Some people are still using internet explorer
 import 'react-app-polyfill/ie11';
 import 'react-app-polyfill/stable';
+import ReactDOM from 'react-dom/client';
 import React, { Fragment } from 'react';
-import ReactDOM from 'react-dom';
-import * as serviceWorker from './serviceWorker';
+import './index.css';
 import { Provider } from 'react-redux';
 import { MuiThemeProvider } from '@material-ui/core';
 import 'typeface-roboto';
@@ -30,23 +30,22 @@ let theme = createTheme({
   },
 });
 
-ReactDOM.render(
-  <Fragment>
-    <Toaster />
-    <Provider store={store}>
-      <AuthProvider>
-        <MuiThemeProvider theme={theme}>
-          <BrowserRouter>
-            <Router />
-          </BrowserRouter>
-        </MuiThemeProvider>
-      </AuthProvider>
-    </Provider>
-  </Fragment>,
-  document.getElementById('root'),
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement,
+);
+root.render(
+  <React.StrictMode>
+    <Fragment>
+      <Toaster />
+      <Provider store={store}>
+        <AuthProvider>
+          <MuiThemeProvider theme={theme}>
+            <BrowserRouter>
+              <Router />
+            </BrowserRouter>
+          </MuiThemeProvider>
+        </AuthProvider>
+      </Provider>
+    </Fragment>
+  </React.StrictMode>,
 );
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();

package/src/page/landingPage/AppMD.tsx

@@ -1,4 +1,3 @@
-import { Box } from '@material-ui/core';
 import React, { useState } from 'react';
 import './common.scss';
 import algoliasearch from 'algoliasearch/lite';
@@ -27,15 +26,15 @@ function AppMD() {
   const CustomInfiniteHits = connectInfiniteHits(InfiniteHits);
 
   return (
-    <Box className={`box-content-main ${isLoading ? 'loading' : ''}`}>
-      <Box className="box-content_top" style={{ position: 'relative' }}>
+    <div className={`box-content-main ${isLoading ? 'loading' : ''}`}>
+      <div className="box-content_top" style={{ position: 'relative' }}>
         {settings.headerText && (
-          <Box
+          <div
             className="fw-700 text-f32 text-dark2"
             style={{ position: 'absolute', bottom: '49px' }}
           >
             <h1>{settings.headerText}</h1>
-          </Box>
+          </div>
         )}
         <div className="wrap-input-search">
           <div style={{ display: 'none' }}>
@@ -43,15 +42,15 @@ function AppMD() {
           </div>
           <CustomSearchBox />
         </div>
-      </Box>
-      <Box className="box-content_bottom">
+      </div>
+      <div className="box-content_bottom">
         <DragDropFile
           acceptTypes={acceptTypes}
           isLoading={isLoading}
           onChangeLoading={onChangeLoading}
         />
-      </Box>
-    </Box>
+      </div>
+    </div>
   );
 }