@nyris/nyris-webapp 0.3.29 → 0.3.31

package/build/static/media/icon_search.373c3cc4.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3723 22.117C23.719 22.4637 23.719 23.0257 23.3723 23.3723C23.0257 23.719 22.4637 23.719 22.117 23.3723L16.8475 18.1028C16.3904 17.6457 15.6641 17.6208 15.123 17.9745C11.1608 20.5639 5.82363 19.9525 2.55769 16.3754C-0.967972 12.5138 -0.832726 6.56215 2.86471 2.86471C6.56215 -0.832726 12.5138 -0.967972 16.3754 2.55769C19.9525 5.82363 20.5639 11.1608 17.9745 15.123C17.6208 15.6641 17.6457 16.3904 18.1028 16.8475L23.3723 22.117ZM9.79677 1.80687C5.38428 1.80687 1.80725 5.3839 1.80725 9.79639C1.81214 14.2069 5.38631 17.781 9.79677 17.7859C14.2093 17.7859 17.7863 14.2089 17.7863 9.79639C17.7863 5.3839 14.2093 1.80687 9.79677 1.80687Z" fill="#000"/>
+</svg>

package/build/static/media/info-tooltip.5feeef22.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66658 10.9888C3.65328 11.6481 4.81331 12 6 12C7.5913 12 9.11742 11.3679 10.2426 10.2426C11.3679 9.11742 12 7.5913 12 6C12 4.81331 11.6481 3.65328 10.9888 2.66658C10.3295 1.67989 9.39246 0.910851 8.2961 0.456725C7.19975 0.0025997 5.99335 -0.11622 4.82946 0.115291C3.66557 0.346802 2.59648 0.918247 1.75736 1.75736C0.918247 2.59648 0.346802 3.66557 0.115291 4.82946C-0.11622 5.99335 0.0025997 7.19975 0.456725 8.2961C0.910851 9.39246 1.67989 10.3295 2.66658 10.9888ZM3.14278 1.72387C3.98852 1.15877 4.98284 0.857145 6 0.857145C7.36397 0.857145 8.67208 1.39898 9.63655 2.36345C10.601 3.32793 11.1429 4.63603 11.1429 6C11.1429 7.01716 10.8412 8.01148 10.2761 8.85722C9.71103 9.70296 8.90782 10.3621 7.96809 10.7514C7.02835 11.1406 5.9943 11.2425 4.99668 11.044C3.99906 10.8456 3.08269 10.3558 2.36345 9.63655C1.64421 8.91731 1.1544 8.00094 0.955964 7.00332C0.757526 6.00571 0.859372 4.97165 1.24862 4.03192C1.63787 3.09218 2.29705 2.28898 3.14278 1.72387ZM6 2.57143C5.87285 2.57143 5.74857 2.60913 5.64285 2.67977C5.53713 2.75041 5.45473 2.85081 5.40608 2.96827C5.35742 3.08574 5.34469 3.215 5.36949 3.3397C5.3943 3.4644 5.45553 3.57895 5.54543 3.66885C5.63534 3.75876 5.74988 3.81999 5.87458 3.84479C5.99929 3.8696 6.12854 3.85686 6.24601 3.80821C6.36348 3.75955 6.46388 3.67715 6.53452 3.57144C6.60515 3.46572 6.64286 3.34143 6.64286 3.21429C6.64286 3.04379 6.57513 2.88028 6.45457 2.75972C6.33401 2.63916 6.1705 2.57143 6 2.57143ZM6.42857 8.57143V5.14286H4.71428V6H5.57143V8.57143H4.28571V9.42857H7.71428V8.57143H6.42857Z" fill="white"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.29",
+  "version": "0.3.31",
   "homepage": "./",
   "dependencies": {
     "@algolia/autocomplete-js": "^1.7.1",
@@ -12,8 +12,8 @@
     "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@nyris/nyris-api": "^0.3.29",
-    "@nyris/nyris-react-components": "^0.3.29",
+    "@nyris/nyris-api": "^0.3.31",
+    "@nyris/nyris-react-components": "^0.3.31",
     "@reduxjs/toolkit": "^1.6.1",
     "@splidejs/react-splide": "^0.7.12",
     "@types/blueimp-load-image": "^2.23.4",

package/src/Store/constants.ts

@@ -18,4 +18,17 @@ export const defaultSettings: AppSettings = {
     '^https?://(www.)?dai.ly/',
   ],
   theme: {},
+  field: {
+    ctaLinkField: '',
+    productName: '',
+    productDetails: '',
+    manufacturerNumber: '',
+    productTag: '',
+    warehouseNumber: '',
+    warehouseNumberValue: '',
+    warehouseShelfNumber: '',
+    warehouseShelfNumberValue: '',
+    warehouseStock: '',
+    warehouseStockValue: '',
+  },
 };

package/src/common/assets/icons/icon_search.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M24 22.7447L17.2958 16.0405C18.9068 14.1064 19.7101 11.6258 19.5387 9.11455C19.3672 6.60331 18.2342 4.25484 16.3754 2.55768C14.5165 0.860522 12.0749 -0.0546567 9.55849 0.00252705C7.04206 0.0597108 4.64455 1.08485 2.8647 2.8647C1.08485 4.64455 0.0597108 7.04206 0.00252705 9.55849C-0.0546567 12.0749 0.860522 14.5165 2.55768 16.3754C4.25484 18.2342 6.60331 19.3672 9.11455 19.5387C11.6258 19.7101 14.1064 18.9068 16.0405 17.2958L22.7447 24L24 22.7447ZM1.80687 9.7964C1.80687 8.21622 2.27545 6.67152 3.15335 5.35765C4.03125 4.04378 5.27904 3.01974 6.73894 2.41504C8.19883 1.81033 9.80526 1.65211 11.3551 1.96039C12.9049 2.26866 14.3285 3.02959 15.4458 4.14695C16.5632 5.2643 17.3241 6.6879 17.6324 8.23772C17.9407 9.78753 17.7825 11.394 17.1778 12.8539C16.573 14.3138 15.549 15.5615 14.2351 16.4394C12.9213 17.3173 11.3766 17.7859 9.7964 17.7859C7.67816 17.7836 5.64736 16.9411 4.14954 15.4433C2.65173 13.9454 1.80922 11.9146 1.80687 9.7964Z" fill="#55566B"/>
-</svg>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3723 22.117C23.719 22.4637 23.719 23.0257 23.3723 23.3723C23.0257 23.719 22.4637 23.719 22.117 23.3723L16.8475 18.1028C16.3904 17.6457 15.6641 17.6208 15.123 17.9745C11.1608 20.5639 5.82363 19.9525 2.55769 16.3754C-0.967972 12.5138 -0.832726 6.56215 2.86471 2.86471C6.56215 -0.832726 12.5138 -0.967972 16.3754 2.55769C19.9525 5.82363 20.5639 11.1608 17.9745 15.123C17.6208 15.6641 17.6457 16.3904 18.1028 16.8475L23.3723 22.117ZM9.79677 1.80687C5.38428 1.80687 1.80725 5.3839 1.80725 9.79639C1.81214 14.2069 5.38631 17.781 9.79677 17.7859C14.2093 17.7859 17.7863 14.2089 17.7863 9.79639C17.7863 5.3839 14.2093 1.80687 9.79677 1.80687Z" fill="#000"/>
+</svg>

package/src/common/assets/icons/info-tooltip.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66658 10.9888C3.65328 11.6481 4.81331 12 6 12C7.5913 12 9.11742 11.3679 10.2426 10.2426C11.3679 9.11742 12 7.5913 12 6C12 4.81331 11.6481 3.65328 10.9888 2.66658C10.3295 1.67989 9.39246 0.910851 8.2961 0.456725C7.19975 0.0025997 5.99335 -0.11622 4.82946 0.115291C3.66557 0.346802 2.59648 0.918247 1.75736 1.75736C0.918247 2.59648 0.346802 3.66557 0.115291 4.82946C-0.11622 5.99335 0.0025997 7.19975 0.456725 8.2961C0.910851 9.39246 1.67989 10.3295 2.66658 10.9888ZM3.14278 1.72387C3.98852 1.15877 4.98284 0.857145 6 0.857145C7.36397 0.857145 8.67208 1.39898 9.63655 2.36345C10.601 3.32793 11.1429 4.63603 11.1429 6C11.1429 7.01716 10.8412 8.01148 10.2761 8.85722C9.71103 9.70296 8.90782 10.3621 7.96809 10.7514C7.02835 11.1406 5.9943 11.2425 4.99668 11.044C3.99906 10.8456 3.08269 10.3558 2.36345 9.63655C1.64421 8.91731 1.1544 8.00094 0.955964 7.00332C0.757526 6.00571 0.859372 4.97165 1.24862 4.03192C1.63787 3.09218 2.29705 2.28898 3.14278 1.72387ZM6 2.57143C5.87285 2.57143 5.74857 2.60913 5.64285 2.67977C5.53713 2.75041 5.45473 2.85081 5.40608 2.96827C5.35742 3.08574 5.34469 3.215 5.36949 3.3397C5.3943 3.4644 5.45553 3.57895 5.54543 3.66885C5.63534 3.75876 5.74988 3.81999 5.87458 3.84479C5.99929 3.8696 6.12854 3.85686 6.24601 3.80821C6.36348 3.75955 6.46388 3.67715 6.53452 3.57144C6.60515 3.46572 6.64286 3.34143 6.64286 3.21429C6.64286 3.04379 6.57513 2.88028 6.45457 2.75972C6.33401 2.63916 6.1705 2.57143 6 2.57143ZM6.42857 8.57143V5.14286H4.71428V6H5.57143V8.57143H4.28571V9.42857H7.71428V8.57143H6.42857Z" fill="white"/>
+</svg>

package/src/components/DetailItem.tsx

@@ -35,12 +35,14 @@ function DetailItem(props: Props) {
     handlerFeedback,
   } = props;
   const [collapDescription, setCollapDescription] = useState(false);
-  const { title, sku, main_offer_link, product_link, brand } = dataItem;
+  const { sku } = dataItem;
   const [dataImageCarousel, setDataImageCarouSel] = useState<any[]>([]);
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const { settings } = useAppSelector<AppState>((state: any) => state);
   const [feedback, setFeedback] = useState('none');
   const [urlImage, setUrlImage] = useState<string>('');
+  const brand = dataItem[settings.field.productTag];
+
   useEffect(() => {
     if (dataItem) {
       checkDataItemResult(dataItem);
@@ -145,34 +147,35 @@ function DetailItem(props: Props) {
                 <Typography className="text-f13 fw-500 max-line-1">
                   {settings.itemIdLabel || 'SKU'}: {sku}
                 </Typography>
-                {dataItem.keyword_1 && (
+                {dataItem[settings.field.manufacturerNumber] && (
                   <Typography
                     className="text-f13 fw-500 max-line-1"
-                    style={{ marginTop: '8px' }}
+                    style={{ marginTop: '12px' }}
                   >
-                    {t('Manufacturer Number')}: {dataItem.keyword_1}
+                    {t('Manufacturer Number')}:{' '}
+                    {dataItem[settings.field.manufacturerNumber]}
                   </Typography>
                 )}
                 {settings.warehouseVariant && (
                   <Typography
                     className="text-f13 max-line-1 fw-500"
                     style={{
-                      marginTop: 10,
+                      marginTop: 12,
                       display: 'inline-block',
                     }}
                   >
                     <span style={{ marginRight: 3 }}>
-                      {dataItem.custom_id_key_3}:
+                      {dataItem[settings.field.warehouseStock]}:
                     </span>
                     <span
                       style={{
-                        color: dataItem.custom_id_value_3
+                        color: dataItem[settings.field.warehouseStockValue]
                           ? '#00C070'
                           : '#c54545',
                         fontWeight: 600,
                       }}
                     >
-                      {dataItem.custom_id_value_3 || 0}
+                      {dataItem[settings.field.warehouseStockValue] || 0}
                     </span>
                   </Typography>
                 )}
@@ -183,7 +186,7 @@ function DetailItem(props: Props) {
                       backgroundColor: `${settings.theme?.secondaryColor}26`,
                       width: 'fit-content',
                       padding: '3px 5px',
-                      marginTop: 8,
+                      marginTop: 12,
                     }}
                   >
                     <Typography
@@ -205,18 +208,18 @@ function DetailItem(props: Props) {
                         : 'text-f22 fw-600 text-dark'
                     }
                     style={{
-                      margin: '8px 0px 0 0px',
+                      marginTop: '12px',
                       display: 'inline-block',
                       maxWidth: '100%',
                       wordWrap: 'break-word',
                     }}
                   >
-                    {title}
+                    {dataItem[settings.field.productName]}
                   </Typography>
                 )}
               </Grid>
               <Grid item xs={12}>
-                {dataItem?.keyword && (
+                {dataItem[settings.field.productDetails] && (
                   <Box className="w-100">
                     <Button
                       className="w-100"
@@ -227,7 +230,7 @@ function DetailItem(props: Props) {
                         fontSize: 14,
                         textTransform: 'initial',
                         paddingLeft: 5,
-                        marginTop: 5,
+                        marginTop: 12,
                       }}
                       onClick={() => setCollapDescription(e => !e)}
                     >
@@ -244,7 +247,7 @@ function DetailItem(props: Props) {
                     </Button>
                     <Collapse in={collapDescription}>
                       <Typography style={{ fontSize: 14, paddingTop: 5 }}>
-                        {dataItem?.keyword}
+                        {dataItem[settings.field.productDetails]}
                       </Typography>
                     </Collapse>
                   </Box>
@@ -256,11 +259,11 @@ function DetailItem(props: Props) {
                       // marginBottom: 25,
                       boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
                       borderRadius: 4,
+                      marginTop: 12,
                     }}
                     display={'flex'}
                     justifyContent={'space-between'}
                     alignItems={'center'}
-                    mt={2}
                     className="btn-detail-item"
                   >
                     <Button
@@ -273,7 +276,7 @@ function DetailItem(props: Props) {
                       }}
                       onClick={() =>
                         window.open(
-                          `${product_link || main_offer_link}`,
+                          `${dataItem[settings.field.ctaLinkField]}`,
                           '_blank',
                         )
                       }
@@ -289,7 +292,7 @@ function DetailItem(props: Props) {
                         }}
                       >
                         {settings.warehouseVariant
-                          ? title
+                          ? dataItem[settings.field.productName]
                           : settings.productCtaText || 'MORE INFO'}
                       </Typography>
                       <img
@@ -308,8 +311,7 @@ function DetailItem(props: Props) {
             <Box
               display="flex"
               justifyContent={'space-between'}
-              mt={2}
-              style={{ color: '#2B2C46' }}
+              style={{ color: '#2B2C46', marginTop: 12 }}
               gridGap={20}
             >
               <Box
@@ -321,10 +323,10 @@ function DetailItem(props: Props) {
                 }}
               >
                 <div style={{ fontSize: 15, fontWeight: 500 }}>
-                  {dataItem.custom_id_key_2}
+                  {dataItem[settings.field.warehouseNumber]}
                 </div>
                 <div style={{ fontSize: 17, fontWeight: 700 }}>
-                  {dataItem.custom_id_value_2 || 'N/A'}
+                  {dataItem[settings.field.warehouseNumberValue] || 'N/A'}
                 </div>
               </Box>
               <Box
@@ -336,10 +338,10 @@ function DetailItem(props: Props) {
                 }}
               >
                 <div style={{ fontSize: 15, fontWeight: 500 }}>
-                  {dataItem.custom_id_key_1}
+                  {dataItem[settings.field.warehouseShelfNumber]}
                 </div>
                 <div style={{ fontSize: 17, fontWeight: 700 }}>
-                  {dataItem.custom_id_value_1 || 'N/A'}
+                  {dataItem[settings.field.warehouseShelfNumberValue] || 'N/A'}
                 </div>
               </Box>
             </Box>

package/src/components/appMobile.scss

@@ -176,11 +176,10 @@
 
           .box-item-result {
             height: 100%;
-            padding: 0 11px;
-            gap: 8px !important;
+            // padding: 0 11px;
+            // gap: 8px !important;
             // justify-content: center;
             width: calc(180 * 2px + 30px);
-
             .wrap-main-item-result {
               width: 180px;
               max-width: 180px !important;
@@ -190,6 +189,13 @@
               }
             }
           }
+          @media screen and (max-width: 370px) {
+            .box-item-result {
+              padding: 0 0px;
+              display: flex;
+              justify-content: center;
+            }
+          }
         }
       }
 
@@ -692,13 +698,13 @@
   }
 }
 
-@media screen and (max-width: 375px) {
+@media screen and (max-width: 400px) {
   .box-item-result {
     height: 100%;
     // padding: 0 11px;
-    gap: 8px !important;
+    gap: 12px !important;
     // justify-content: center;
-    width: calc(180 * 2px + 10px) !important;
+    width: calc(180 * 2px) !important;
 
     .wrap-main-item-result {
       width: 170px !important;

package/src/components/drawer/cameraCustom.tsx

@@ -118,6 +118,7 @@ function CameraCustom(props: Props) {
       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));
@@ -127,7 +128,6 @@ function CameraCustom(props: Props) {
         region = res.selectedRegion;
         dispatch(setSelectedRegion(region));
       }
-      dispatch(updateStatusLoading(true));
       return findByImage({ image, settings, region })
         .then((res: any) => {
           res?.results.map((item: any) => {

package/src/components/input/inputSearch.tsx

@@ -159,9 +159,10 @@ const SearchBox = (props: any) => {
           <Box className="box-inp">
             <Box
               style={{
-                height: '100%',
+                height: '75%',
                 order: 1,
                 paddingLeft: imageThumbSearchInput || keyFilter ? 0 : 10,
+                marginLeft: keyFilter ? 0 : 5,
               }}
             >
               {imageThumbSearchInput && (
@@ -185,6 +186,7 @@ const SearchBox = (props: any) => {
                     arrow={true}
                   >
                     <button
+                      type="button"
                       onClick={() => {
                         if (!valueInput) {
                           dispatch(reset(''));
@@ -222,7 +224,11 @@ const SearchBox = (props: any) => {
             {keyFilter && !isMobile && (
               <Box
                 className="box-key-filter"
-                style={{ order: 0, marginRight: 5 }}
+                style={{
+                  order: 0,
+                  marginRight: 5,
+                  border: `2px solid ${settings.theme?.secondaryColor}c7`,
+                }}
               >
                 <Tooltip
                   title={keyFilter}
@@ -240,8 +246,8 @@ const SearchBox = (props: any) => {
                   >
                     <CloseIcon
                       style={{
-                        fontSize: 12,
-                        color: '#2B2C46',
+                        fontSize: 20,
+                        color: settings.theme?.secondaryColor,
                       }}
                     />
                   </Button>
@@ -268,7 +274,6 @@ const SearchBox = (props: any) => {
           {history.location.pathname === '/result' && valueInput && (
             <Button
               className="btn-clear-text"
-              style={{ marginRight: 5 }}
               onClick={() => {
                 if (imageThumbSearchInput) {
                   setValueInput('');
@@ -305,8 +310,7 @@ const SearchBox = (props: any) => {
                       width: 32,
                       height: 32,
                       borderRadius: '100%',
-                      backgroundColor: '#fff',
-                      marginRight: 7,
+                      marginRight: 10,
                     }}
                   >
                     <IconFilter />
@@ -338,7 +342,6 @@ const SearchBox = (props: any) => {
                       width: 32,
                       height: 32,
                       borderRadius: '100%',
-                      backgroundColor: '#fff',
                       padding: 7,
                     }}
                   >