@nyris/nyris-webapp 0.3.29 → 0.3.31

package/src/components/results/ItemResult.tsx

@@ -53,7 +53,9 @@ function ItemResult(props: Props) {
   const [isOpenModalShare, setOpenModalShare] = useState<boolean>(false);
   const [feedback, setFeedback] = useState('none');
   const { t } = useTranslation();
-  const { sku, title, brand, main_offer_link, product_link, collap } = dataItem;
+  const { sku, collap } = dataItem;
+  const brand = dataItem[settings.field.productTag];
+
   useEffect(() => {
     if (main_image_link) {
       handlerCheckUrlImage(main_image_link);
@@ -192,12 +194,10 @@ function ItemResult(props: Props) {
         style={{
           flexDirection: 'column',
           backgroundColor: '#F3F3F5',
+          flexGrow: 1,
         }}
       >
-        <Box
-          className="box-top"
-          style={{ minHeight: settings.showMoreInfo ? '150px' : '90px' }}
-        >
+        <Box className="box-top" style={{ minHeight: '90px' }}>
           <Grid container justifyContent="space-between">
             <Grid item xs={12}>
               <Tooltip
@@ -210,14 +210,14 @@ function ItemResult(props: Props) {
                   className="text-f12 max-line-1 fw-400"
                   style={{
                     color: '#2B2C46',
-                    marginTop: 10,
+                    marginTop: 12,
                     display: 'inline-block',
                   }}
                 >
                   <span style={{ marginRight: 3 }}>
                     {settings.itemIdLabel || 'SKU'}:
                   </span>
-                  {truncateString(sku, 19)}
+                  {truncateString(sku, 16)}
                 </Typography>
               </Tooltip>
 
@@ -227,22 +227,21 @@ function ItemResult(props: Props) {
                     className="text-f12 max-line-1 fw-400"
                     style={{
                       color: '#2B2C46',
-                      marginTop: 10,
                       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>
                 </Box>
@@ -256,13 +255,13 @@ function ItemResult(props: Props) {
                   disableHoverListener={brand?.length < 22 || !brand}
                 >
                   <Box
-                    mt={1}
                     style={{
                       background: `${settings.theme?.secondaryColor}26`,
                       borderRadius: '6px',
                       display: 'flex',
                       width: 'fit-content',
                       padding: '2px 5px',
+                      marginTop: 3,
                     }}
                   >
                     <Typography
@@ -285,203 +284,201 @@ function ItemResult(props: Props) {
               {!settings.warehouseVariant && (
                 <Typography
                   className="text-f13 fw-600 max-line-3"
-                  style={{ color: '#1E1F31', marginTop: 15 }}
+                  style={{ color: '#1E1F31', marginTop: 12 }}
                 >
-                  {title}
+                  {dataItem[settings.field.productName]}
                 </Typography>
               )}
-
-              {(settings.showMoreInfo || settings.warehouseVariant) && (
-                <Tooltip
-                  title={title}
-                  placement="top"
-                  arrow={true}
-                  disableHoverListener={
-                    title.length < 35 || !settings.warehouseVariant
+            </Grid>
+          </Grid>
+        </Box>
+        <div>
+          {(settings.showMoreInfo || settings.warehouseVariant) && (
+            <Tooltip
+              title={dataItem[settings.field.productName]}
+              placement="top"
+              arrow={true}
+              disableHoverListener={
+                dataItem[settings.field.productName]?.length < 35 ||
+                !settings.warehouseVariant
+              }
+            >
+              <Box
+                style={{
+                  boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
+                  // marginBottom: 22,
+                  height: 40,
+                  background: `linear-gradient(270deg, ${settings.theme?.primaryColor}bb 0%, ${settings.theme?.primaryColor} 100%)`,
+                  borderRadius: 4,
+                  padding: '0px 8px',
+                  marginTop: '12px',
+                }}
+                display={'flex'}
+                justifyItems={'center'}
+                alignItems={'center'}
+                justifyContent={'space-between'}
+              >
+                <Button
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    width: '100%',
+                    padding: 0,
+                  }}
+                  onClick={() =>
+                    window.open(
+                      `${dataItem[settings.field.ctaLinkField]}`,
+                      '_blank',
+                    )
                   }
                 >
-                  <Box
+                  <Typography
+                    className="text-white max-line-2"
                     style={{
-                      boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
-                      // marginBottom: 22,
-                      height: 40,
-                      background: `linear-gradient(270deg, ${settings.theme?.primaryColor}bb 0%, ${settings.theme?.primaryColor} 100%)`,
-                      borderRadius: 4,
-                      padding: '0px 8px',
+                      textTransform: !settings.warehouseVariant
+                        ? 'uppercase'
+                        : 'none',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      fontWeight: !settings.warehouseVariant ? 700 : 500,
+                      fontSize: !settings.warehouseVariant ? '12px' : '11px',
+                      letterSpacing: '0.27px',
+                      wordBreak: !settings.warehouseVariant
+                        ? 'normal'
+                        : 'break-all',
+                      maxWidth: '136px',
+                      paddingRight: '8px',
                     }}
-                    display={'flex'}
-                    justifyItems={'center'}
-                    alignItems={'center'}
-                    justifyContent={'space-between'}
-                    mt={2}
+                    align="left"
                   >
-                    <Button
-                      style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        width: '100%',
-                        padding: 0,
-                      }}
-                      onClick={() =>
-                        window.open(
-                          `${product_link || main_offer_link}`,
-                          '_blank',
-                        )
-                      }
-                    >
-                      <Typography
-                        className="text-white max-line-2"
-                        style={{
-                          textTransform: !settings.warehouseVariant
-                            ? 'uppercase'
-                            : 'none',
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          fontWeight: !settings.warehouseVariant ? 700 : 500,
-                          fontSize: !settings.warehouseVariant
-                            ? '12px'
-                            : '11px',
-                          letterSpacing: '0.27px',
-                          wordBreak: !settings.warehouseVariant
-                            ? 'normal'
-                            : 'break-all',
-                          maxWidth: '136px',
-                          paddingRight: '8px',
-                        }}
-                        align="left"
-                      >
-                        {settings.warehouseVariant
-                          ? truncateString(title, 35)
-                          : settings.productCtaText || 'MORE INFO'}
-                      </Typography>
-                      <img src={IconOpenLink} alt="more-info" width={20} />
-                    </Button>
-                  </Box>
-                </Tooltip>
-              )}
-            </Grid>
-          </Grid>
-        </Box>
-
-        {settings.warehouseVariant && (
-          <Box
-            display="flex"
-            justifyContent={'space-between'}
-            style={{ color: '#2B2C46', marginTop: '12px' }}
-            gridGap={10}
-          >
+                    {settings.warehouseVariant
+                      ? truncateString(dataItem[settings.field.productName], 35)
+                      : settings.productCtaText || 'MORE INFO'}
+                  </Typography>
+                  <img src={IconOpenLink} alt="more-info" width={20} />
+                </Button>
+              </Box>
+            </Tooltip>
+          )}
+          {settings.warehouseVariant && (
             <Box
-              style={{
-                backgroundColor: `${settings.theme?.secondaryColor}26`,
-                padding: '5px 10px',
-                borderRadius: 4,
-                width: '100%',
-              }}
+              display="flex"
+              justifyContent={'space-between'}
+              style={{ color: '#2B2C46', marginTop: '12px' }}
+              gridGap={10}
             >
-              <div style={{ fontSize: 10, fontWeight: 500 }}>
-                {dataItem.custom_id_key_2}
-              </div>
-              <div
+              <Box
                 style={{
-                  fontSize: 13,
-                  fontWeight: 700,
-                  whiteSpace: 'nowrap',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
+                  backgroundColor: `${settings.theme?.secondaryColor}26`,
+                  padding: '5px 10px',
+                  borderRadius: 4,
+                  width: '100%',
                 }}
               >
-                {dataItem.custom_id_value_2 || 'N/A'}
-              </div>
-            </Box>
+                <div style={{ fontSize: 10, fontWeight: 500 }}>
+                  {dataItem.custom_id_key_2}
+                </div>
+                <div
+                  style={{
+                    fontSize: 13,
+                    fontWeight: 700,
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}
+                >
+                  {dataItem.custom_id_value_2 || 'N/A'}
+                </div>
+              </Box>
 
-            <Box
-              style={{
-                backgroundColor: `${settings.theme?.secondaryColor}26`,
-                padding: '5px 10px',
-                borderRadius: 4,
-                width: '100%',
-              }}
-            >
-              <div style={{ fontSize: 10, fontWeight: 500 }}>
-                {dataItem.custom_id_key_1}
-              </div>
-              <div
+              <Box
                 style={{
-                  fontSize: 13,
-                  fontWeight: 700,
-                  whiteSpace: 'nowrap',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
+                  backgroundColor: `${settings.theme?.secondaryColor}26`,
+                  padding: '5px 10px',
+                  borderRadius: 4,
+                  width: '100%',
                 }}
               >
-                {dataItem.custom_id_value_1 || 'N/A'}
-              </div>
+                <div style={{ fontSize: 10, fontWeight: 500 }}>
+                  {dataItem.custom_id_key_1}
+                </div>
+                <div
+                  style={{
+                    fontSize: 13,
+                    fontWeight: 700,
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}
+                >
+                  {dataItem.custom_id_value_1 || 'N/A'}
+                </div>
+              </Box>
             </Box>
-          </Box>
-        )}
+          )}
 
-        {settings.showFeedbackAndShare && (
-          <Box
-            className="box-bottom"
-            style={{ marginBottom: 6, marginTop: 10 }}
-          >
-            <Grid
-              container
-              justifyContent={
-                settings.shareOption ? 'space-between' : 'space-around'
-              }
-              alignItems="center"
+          {settings.showFeedbackAndShare && (
+            <Box
+              className="box-bottom"
+              style={{ marginBottom: 6, marginTop: 12 }}
             >
-              <Grid item>
-                <Box display={'flex'} alignItems={'center'}>
-                  <Button
-                    className="btn-item"
-                    style={{ padding: '6px' }}
-                    onClick={() => {
-                      handlerFeedback('like');
-                      setFeedback('like');
-                    }}
-                  >
-                    <IconLike
-                      width={16}
-                      height={16}
-                      color={feedback === 'like' ? '#3E36DC' : '#000000'}
-                    />
-                  </Button>
-                </Box>
-              </Grid>
-              <Grid item>
-                <Box display={'flex'} alignItems={'center'}>
-                  <Button
-                    style={{ padding: '6px' }}
-                    className="btn-item"
-                    onClick={() => {
-                      handlerFeedback('dislike');
-                      setFeedback('dislike');
-                    }}
-                  >
-                    <IconDisLike
-                      width={16}
-                      height={16}
-                      color={feedback === 'dislike' ? '#CC1854' : '#000000'}
-                    />
-                  </Button>
-                </Box>
-              </Grid>
-              {settings.shareOption && (
+              <Grid
+                container
+                justifyContent={
+                  settings.shareOption ? 'space-between' : 'space-around'
+                }
+                alignItems="center"
+              >
+                <Grid item>
+                  <Box display={'flex'} alignItems={'center'}>
+                    <Button
+                      className="btn-item"
+                      style={{ padding: '6px' }}
+                      onClick={() => {
+                        handlerFeedback('like');
+                        setFeedback('like');
+                      }}
+                    >
+                      <IconLike
+                        width={16}
+                        height={16}
+                        color={feedback === 'like' ? '#3E36DC' : '#000000'}
+                      />
+                    </Button>
+                  </Box>
+                </Grid>
                 <Grid item>
                   <Box display={'flex'} alignItems={'center'}>
                     <Button
                       style={{ padding: '6px' }}
                       className="btn-item"
-                      onClick={() => false}
+                      onClick={() => {
+                        handlerFeedback('dislike');
+                        setFeedback('dislike');
+                      }}
                     >
-                      <IconShare width={16} height={16} color="#808080" />
+                      <IconDisLike
+                        width={16}
+                        height={16}
+                        color={feedback === 'dislike' ? '#CC1854' : '#000000'}
+                      />
                     </Button>
                   </Box>
                 </Grid>
-              )}
-              {/* <Grid item>
+                {settings.shareOption && (
+                  <Grid item>
+                    <Box display={'flex'} alignItems={'center'}>
+                      <Button
+                        style={{ padding: '6px' }}
+                        className="btn-item"
+                        onClick={() => false}
+                      >
+                        <IconShare width={16} height={16} color="#808080" />
+                      </Button>
+                    </Box>
+                  </Grid>
+                )}
+                {/* <Grid item>
               <Box display={'flex'} alignItems={'center'}>
                 <Button className="btn-item">
                   <Box
@@ -500,9 +497,10 @@ function ItemResult(props: Props) {
                 </Button>
               </Box>
             </Grid> */}
-            </Grid>
-          </Box>
-        )}
+              </Grid>
+            </Box>
+          )}
+        </div>
       </Box>
     </Box>
   );

package/src/page/landingPage/common.scss

@@ -160,8 +160,8 @@ button {
   // max-height: 33px; /* fallback */
   -webkit-line-clamp: 3; /* number of lines to show */
   -webkit-box-orient: vertical;
-  min-height: 42px;
-  height: 50px;
+  // min-height: 42px;
+  // height: 50px;
 }
 
 .max-line-2 {
@@ -563,6 +563,7 @@ button {
   box-shadow: 0px 0px 6px #aaabb5b3;
   .box-top {
     position: relative;
+    height: fit-content;
     .btn-show-result {
       position: absolute;
       top: 10px;
@@ -653,7 +654,9 @@ button {
 
   .box-content {
     background-color: #e9e9ec;
-    padding: 8px 8px;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-bottom: 8px;
     min-height: 82px;
     justify-content: space-between;
     .box-top {
@@ -868,7 +871,8 @@ button {
     }
     .box-content-main {
       background: #f3f3f5;
-      padding: 8px;
+      padding: 16px;
+      border-radius: 16px;
       height: 100%;
       @media screen and (min-width: 2047px) {
         position: inherit;
@@ -876,6 +880,8 @@ button {
     }
     .box-border {
       border: 2px dashed #aaabb5;
+      border-radius: 16px;
+      border-radius: 16px;
       height: 100%;
       display: flex;
       justify-content: center;
@@ -932,19 +938,19 @@ button {
 .box-wrap-result-component {
   min-height: 100%;
   display: flex;
-  justify-content: space-between;
   flex-direction: column;
   // height: calc(100vh - 32px);
   background-color: #fafafa;
   .box-search {
     margin: 0px auto;
-    padding: 22px 0px 32px 0px;
+    padding: 24px 0px 24px 0px;
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #fff;
+    background-color: #FAFAFA;
     flex-direction: column;
     width: 100%;
+    border-bottom: 1px solid #E0E0E0;
     .box-filter {
       margin-top: 26px;
       background: #f3f3f5;
@@ -994,11 +1000,14 @@ button {
       }
       .box-title_col-left {
         position: absolute;
-        bottom: 10px;
+        bottom: 5px;
         left: 0;
         right: 0;
         margin: auto;
         width: fit-content;
+        background-color: #3E36DC;
+        padding: 4px;
+        border-radius: 16px;
       }
       &.toggle {
         width: 32px;
@@ -1016,7 +1025,7 @@ button {
       align-items: center;
       max-width: 320px;
       .box-preview {
-        padding: 30px;
+        padding-top: 32px;
         width: 100%;
         // border: 2px dashed #55566b;
         display: flex;
@@ -1025,6 +1034,10 @@ button {
         height: 100%;
         position: relative;
         // transition: ease-in-out 0.5s;
+        @media only screen and (max-width: 776px) {
+          padding-bottom: 32px;
+
+        }
         .preview-item {
           // height: 100%;
           display: flex;
@@ -1063,15 +1076,15 @@ button {
         display: flex;
         flex-wrap: wrap;
         gap: 24px;
+        padding-left: 2px;
         .wrap-main-item-result {
+          display: flex;
+          flex-direction: column;
           max-width: 192px;
           width: 192px;
-          margin: 20px 0px;
           border-radius: 4px;
           overflow: hidden;
-          &:first-child {
-            margin-top: 5px !important;
-          }
+          height: 100%;
         } &:first-child {
           margin-top: 0px !important;
         }
@@ -1095,7 +1108,7 @@ button {
   }
 
   .box-notify {
-    height: 40px;
+    height: 50px;
     background: #f3f3f5;
     border-top: 1px solid #e9e9ec;
     .select-choose-page {
@@ -1361,14 +1374,13 @@ button {
   width: 512px;
   .box-input-search {
     justify-content: space-between;
-    background: #ffffff;
-    // box-shadow: 0px 0px 6.66667px rgba(0, 0, 0, 0.2);
-    background-color: #f3f3f5;
-    border-radius: 21px;
+    box-shadow: 0px 2px 12px rgba(43, 44, 70, 0.13);;
+    background-color: #fff;
+    border-radius: 24px;
     padding: 0px !important;
     height: 42px;
     overflow: hidden;
-    padding-right: 5px !important;
+    padding-right: 12px !important;
     form {
       width: 100%;
       display: flex;
@@ -1376,7 +1388,7 @@ button {
       align-items: center;
       .box-inp {
         input {
-          background-color: #f3f3f5;
+          background-color: #fff;
         }
 
         .box-key-filter {
@@ -1386,8 +1398,8 @@ button {
           min-width: fit-content;
           display: flex;
           align-items: center;
-          border: 2px solid #2B2C46;
-          height: 100%;
+          height: 75%;
+          margin-left: 5px;
           p {
             font-size: 14px;
             font-size: 700;
@@ -1421,7 +1433,7 @@ button {
       border: 0px !important;
       &::placeholder {
         font-size: 14px !important;
-        color: #2b2c46 !important;
+        color: #AAABB5 !important;
         font-weight: 500 !important;
       }
       &::-webkit-search-cancel-button {
@@ -1446,9 +1458,20 @@ button {
       width: 32px;
       height: 32px;
       border-radius: 100%;
-      background-color: #f3f3f5;
       z-index: 10;
       cursor: pointer !important;
+      margin-right: 8px;
+
+      &:after {
+        content: "";
+        font-size: 39px;
+        position: absolute;
+        right: -3px;
+        font-weight: 100;
+        background-color: #E0E0E0;
+        width: 1px;
+        height: 35px;
+      }
     }
   }
 }
@@ -1797,10 +1820,10 @@ button {
   border-radius: 21px;
   justify-content: space-between;
   align-items: center;
-  min-width: 70px;
+  min-width: 60px;
   img {
-    width: 32px;
-    height: 32px;
+    width: 25px;
+    height: 22px;
     border-radius: 100%;
   }
   button {