@nyris/nyris-webapp 0.3.33 → 0.3.35

package/src/components/DetailItem.tsx

@@ -20,7 +20,7 @@ interface Props {
   numberResult?: number;
   handlerCloseModal?: () => void;
   dataItem?: any;
-  onHandlerModalShare?: () => void;
+  onHandlerModalShare: () => void;
   onSearchImage?: any;
   moreInfoText?: string;
   handlerFeedback: any;
@@ -31,7 +31,7 @@ function DetailItem(props: Props) {
     handlerCloseModal,
     dataItem,
     onSearchImage,
-    // onHandlerModalShare,
+    onHandlerModalShare,
     handlerFeedback,
   } = props;
   const [collapDescription, setCollapDescription] = useState(false);
@@ -79,6 +79,7 @@ function DetailItem(props: Props) {
     setDataImageCarouSel(valueKey);
   };
   const { t } = useTranslation();
+  const ctaLink = dataItem[settings.field?.ctaLinkField];
 
   return (
     <Box
@@ -101,11 +102,7 @@ function DetailItem(props: Props) {
           }
         >
           {dataImageCarousel.length > 0 ? (
-            <ImagePreviewCarousel
-              imgItem={dataImageCarousel}
-              onSearchImage={onSearchImage}
-              handlerCloseModal={() => handlerCloseModal?.()}
-            />
+            <ImagePreviewCarousel imgItem={dataImageCarousel} />
           ) : (
             <img
               src={NoImage}
@@ -125,7 +122,7 @@ function DetailItem(props: Props) {
                 }
               }}
             >
-              <IconSearchImage color={settings.theme?.secondaryColor} />
+              <IconSearchImage color={'#AAABB5'} />
             </Button>
           )}
         </Box>
@@ -145,7 +142,7 @@ function DetailItem(props: Props) {
             <Grid container justifyContent="space-between">
               <Grid item xs={12}>
                 <Typography className="text-f13 fw-500 max-line-1">
-                  {settings.itemIdLabel || 'SKU'}: {sku}
+                  {settings.itemIdLabel || 'SKU'}: <span> {sku}</span>
                 </Typography>
                 {dataItem[settings.field.manufacturerNumber] && (
                   <Typography
@@ -200,25 +197,60 @@ function DetailItem(props: Props) {
                     </Typography>
                   </Box>
                 )}
-                {!settings.warehouseVariant && (
-                  <Typography
-                    className={
-                      isMobile
-                        ? 'fw-600 text-dark'
-                        : 'text-f22 fw-600 text-dark'
-                    }
+              </Grid>
+              <Grid item xs={12}>
+                <Box
+                  style={{
+                    background: `linear-gradient(270deg, ${settings.theme?.primaryColor}bb 0%, ${settings.theme?.primaryColor} 100%)`,
+                    // marginBottom: 25,
+                    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+                    borderRadius: 4,
+                    marginTop: 12,
+                  }}
+                  display={'flex'}
+                  justifyContent={'space-between'}
+                  alignItems={'center'}
+                  className="btn-detail-item"
+                >
+                  <Box
                     style={{
-                      marginTop: '12px',
-                      display: 'inline-block',
-                      maxWidth: '100%',
-                      wordWrap: 'break-word',
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
+                      width: '100%',
+                      padding: '0px 12px',
+                      minHeight: 64,
+                      cursor: ctaLink ? 'pointer' : 'normal',
+                    }}
+                    onClick={() => {
+                      if (ctaLink) {
+                        window.open(
+                          `${dataItem[settings.field.ctaLinkField]}`,
+                          '_blank',
+                        );
+                      }
                     }}
                   >
-                    {dataItem[settings.field.productName]}
-                  </Typography>
-                )}
-              </Grid>
-              <Grid item xs={12}>
+                    <Typography
+                      className="text-f18 fw-700 text-white max-line-2"
+                      align="left"
+                      style={{
+                        letterSpacing: '0.55px',
+                        maxWidth: '300px',
+                        paddingRight: '4px',
+                      }}
+                    >
+                      {dataItem[settings.field.productName]}
+                    </Typography>
+                    {ctaLink && (
+                      <img
+                        src={IconOpenLink}
+                        alt=""
+                        style={{ minWidth: 23, marginLeft: 5 }}
+                      />
+                    )}
+                  </Box>
+                </Box>
                 {dataItem[settings.field.productDetails] && (
                   <Box className="w-100">
                     <Button
@@ -252,57 +284,6 @@ function DetailItem(props: Props) {
                     </Collapse>
                   </Box>
                 )}
-                {(settings.showMoreInfo || settings.warehouseVariant) && (
-                  <Box
-                    style={{
-                      background: `linear-gradient(270deg, ${settings.theme?.primaryColor}bb 0%, ${settings.theme?.primaryColor} 100%)`,
-                      // marginBottom: 25,
-                      boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-                      borderRadius: 4,
-                      marginTop: 12,
-                    }}
-                    display={'flex'}
-                    justifyContent={'space-between'}
-                    alignItems={'center'}
-                    className="btn-detail-item"
-                  >
-                    <Button
-                      style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        width: '100%',
-                        padding: '0px 12px',
-                        minHeight: !settings.warehouseVariant ? 48 : 64,
-                      }}
-                      onClick={() =>
-                        window.open(
-                          `${dataItem[settings.field.ctaLinkField]}`,
-                          '_blank',
-                        )
-                      }
-                    >
-                      <Typography
-                        className="text-f18 fw-700 text-white max-line-2"
-                        align="left"
-                        style={{
-                          textTransform: !settings.warehouseVariant
-                            ? 'uppercase'
-                            : 'none',
-                          letterSpacing: '0.55px',
-                        }}
-                      >
-                        {settings.warehouseVariant
-                          ? dataItem[settings.field.productName]
-                          : settings.productCtaText || 'MORE INFO'}
-                      </Typography>
-                      <img
-                        src={IconOpenLink}
-                        alt=""
-                        style={{ width: 23, marginLeft: 5 }}
-                      />
-                    </Button>
-                  </Box>
-                )}
               </Grid>
             </Grid>
           </Box>
@@ -402,8 +383,11 @@ function DetailItem(props: Props) {
                 {settings.shareOption && (
                   <Grid item>
                     <Box display={'flex'} alignItems={'center'}>
-                      <Button className="btn-item" onClick={() => false}>
-                        <IconShare width={30} height={30} color="gray" />
+                      <Button
+                        className="btn-item"
+                        onClick={() => onHandlerModalShare()}
+                      >
+                        <IconShare width={30} height={30} color="#000000" />
                       </Button>
                     </Box>
                   </Grid>

package/src/components/FooterMobile.tsx

@@ -4,7 +4,9 @@ import { ReactComponent as IconCameraMobile } from 'common/assets/icons/icon_cam
 import CameraCustom from './drawer/cameraCustom';
 import { ReactComponent as Home } from 'common/assets/icons/home.svg';
 import { NavLink, useHistory } from 'react-router-dom';
-import { useAppSelector } from 'Store/Store';
+import { useAppDispatch, useAppSelector } from 'Store/Store';
+import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
+import { setImageCaptureHelpModal } from 'Store/search/Search';
 
 interface Props {
   onLoadingMobile?: any;
@@ -13,53 +15,90 @@ interface Props {
 function FooterMobile(props: Props): JSX.Element {
   const [isOpenModalCamera, setOpenModalCamera] = useState<boolean>(false);
   const history = useHistory();
-  const { settings } = useAppSelector(state => state);
+  const {
+    settings,
+    search: { imageCaptureHelpModal },
+  } = useAppSelector(state => state);
+  const dispatch = useAppDispatch();
 
   return (
-    <Box
-      className="box-footer-mobile"
-      display={'flex'}
-      position={'relative'}
-      alignItems={'center'}
-      height={'100%'}
-    >
-      <NavLink
-        style={{
-          width: '70px',
-          display: 'flex',
-          justifyContent: 'center',
-          height: '100%',
-          alignItems: 'center',
-          backgroundColor:
-            history.location.pathname === '/'
-              ? `${settings.theme?.primaryColor}21`
-              : '',
-        }}
-        activeClassName="active"
-        to={'/'}
-        className="nav-link p-0 menu-children rounded-0"
-      >
-        <Home
-          color={
-            history.location.pathname === '/'
-              ? settings.theme?.primaryColor
-              : '#000'
-          }
-        />
-      </NavLink>
+    <>
       <Box
-        style={{ background: settings.theme?.primaryColor }}
-        className="box-icon-camera-mobile"
+        className="box-footer-mobile"
+        display={'flex'}
+        position={'relative'}
+        alignItems={'center'}
+        height={'100%'}
+        justifyContent={'space-between'}
+        style={{ paddingLeft: '40px', paddingRight: '40px' }}
       >
-        <Button
+        <NavLink
+          style={{
+            width: '48px',
+            height: '48px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '100%',
+            backgroundColor:
+              history.location.pathname === '/' && !imageCaptureHelpModal
+                ? `${settings.theme?.primaryColor}21`
+                : '',
+          }}
+          activeClassName="active"
+          to={'/'}
+          className="nav-link p-0 menu-children rounded-0"
           onClick={() => {
-            setOpenModalCamera(!isOpenModalCamera);
+            dispatch(setImageCaptureHelpModal(false));
           }}
         >
-          <IconCameraMobile color="#FFFF" />
-        </Button>
+          <Home
+            color={
+              history.location.pathname === '/' && !imageCaptureHelpModal
+                ? settings.theme?.primaryColor
+                : '#000'
+            }
+          />
+        </NavLink>
+        {history.location?.pathname !== '/' && !imageCaptureHelpModal && (
+          <Box className="box-icon-camera-mobile">
+            <Button
+              onClick={() => {
+                setOpenModalCamera(!isOpenModalCamera);
+              }}
+            >
+              <IconCameraMobile color="#000" />
+            </Button>
+          </Box>
+        )}
+        {history.location?.pathname !== '/' && (
+          <div
+            style={{
+              width: '48px',
+              height: '48px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: '100%',
+              backgroundColor: imageCaptureHelpModal
+                ? `${settings.theme?.primaryColor}21`
+                : '',
+            }}
+            onClick={() => {
+              dispatch(setImageCaptureHelpModal(!imageCaptureHelpModal));
+            }}
+          >
+            <IconInfo
+              fontSize={24}
+              width={24}
+              height={24}
+              color={
+                imageCaptureHelpModal ? settings.theme?.primaryColor : '#000'
+              }
+            />
+          </div>
+        )}
       </Box>
-
       <Box className="box-screenshot-camera">
         <CameraCustom
           isToggle={isOpenModalCamera}
@@ -68,7 +107,7 @@ function FooterMobile(props: Props): JSX.Element {
           }}
         />
       </Box>
-    </Box>
+    </>
   );
 }