@nyris/nyris-webapp 0.2.4 → 0.3.1

package/src/components/DetailItem.tsx

@@ -0,0 +1,175 @@
+import { Box, Button, Grid, Typography } from "@material-ui/core";
+import React from "react";
+import CloseOutlinedIcon from "@material-ui/icons/CloseOutlined";
+import DefaultCarousel from "./carousel/DefaultCarousel";
+import { Link } from "react-router-dom";
+import IconSupport from "common/assets/icons/support.svg";
+import IconLike from "common/assets/icons/icon_like.svg";
+import IconDisLike from "common/assets/icons/icon_dislike.svg";
+import IconShare from "common/assets/icons/Fill.svg";
+import IconBookmark from "common/assets/icons/book_mark.svg";
+// import IconPicture from "common/assets/icons/icon_picture.png";
+import IconPicture from "common/assets/icons/icon_modal_image.svg";
+import { useState } from "react";
+import { isEmpty } from "lodash";
+import { useEffect } from "react";
+
+interface Props {
+  numberResult?: number;
+  results?: any;
+  handlerCloseModal: () => void;
+  onNextItem?: () => void;
+  onPrevItem?: () => void;
+  dataItem?: any;
+  onHandlerModalShare?: () => void;
+  onSearchImage?: any;
+}
+
+function DetailItem(props: Props) {
+  const {
+    handlerCloseModal,
+    dataItem,
+    onHandlerModalShare,
+    onSearchImage,
+  } = props;
+
+  const { img, title, sku, main_image_link } = dataItem;
+  const [dataImageCarousel, setDataImageCarouSel] = useState<any[]>([]);
+
+  useEffect(() => {
+    checkDataItemResult(dataItem);
+  }, [dataItem]);
+
+  const checkDataItemResult = (dataItem: any) => {
+    if (!dataItem) {
+      return setDataImageCarouSel([]);
+    }
+    let valueKey: any[] = [];
+    const newObject = dataItem;
+    for (let key in newObject) {
+      if (key?.includes("recognition_image_link")) {
+        if (!isEmpty(newObject[key])) {
+          valueKey.push({
+            url: newObject[key],
+          });
+        }
+      } else {
+        if (key === "main_image_link") {
+          valueKey.push({
+            url: newObject[key],
+          });
+        }
+      }
+    }
+    setDataImageCarouSel(valueKey);
+  };
+
+  return (
+    <Box className="box-modal-default">
+      <Box className="ml-auto" style={{ width: "fit-content", marginRight: 5 }}>
+        <Button style={{ padding: 0 }} onClick={handlerCloseModal}>
+          <CloseOutlinedIcon style={{ fontSize: 12, color: "#55566B" }} />
+        </Button>
+      </Box>
+
+      <Box className="box-carosel">
+        <DefaultCarousel imgItem={dataImageCarousel} />
+        <Button
+          className="icon-style"
+          onClick={() => {
+            if (!main_image_link) {
+              console.log("321");
+
+              return;
+            }
+            onSearchImage(main_image_link);
+            handlerCloseModal();
+          }}
+        >
+          <img src={IconPicture} alt="icon_picture" />
+        </Button>
+      </Box>
+
+      <Box
+        className="box-content"
+        display={"flex"}
+        style={{ flexDirection: "column" }}
+      >
+        <Box className="box-top">
+          <Grid container justifyContent="space-between">
+            <Grid item xs={10}>
+              <Typography className="text-f9 fw-500 max-line-1">
+                SKU: {sku}
+              </Typography>
+              <Typography className="text-f16 fw-600 text-dark">
+                {title}
+              </Typography>
+              <Link className="text-f9 text-blue" to={"/"} href="#">
+                View full description
+              </Link>
+            </Grid>
+            <Grid item>
+              <Button className="btn-item">
+                <img
+                  src={IconBookmark}
+                  alt="image_item"
+                  className="icon_action"
+                />
+              </Button>
+            </Grid>
+          </Grid>
+        </Box>
+
+        <Box className="box-bottom">
+          <Grid container justifyContent="space-between" alignItems="center">
+            <Grid item>
+              <Box display={"flex"} alignItems={"center"}>
+                <Button className="btn-item">
+                  <img
+                    src={IconLike}
+                    alt="image_item"
+                    className="icon_action"
+                  />
+                </Button>
+                <Button className="btn-item">
+                  <img
+                    src={IconDisLike}
+                    alt="image_item"
+                    className="icon_action"
+                  />
+                </Button>
+              </Box>
+            </Grid>
+            <Grid item>
+              <Box display={"flex"} alignItems={"center"}>
+                <Button className="btn-item" onClick={onHandlerModalShare}>
+                  <img
+                    src={IconShare}
+                    alt="image_item"
+                    className="icon_action"
+                  />
+                </Button>
+                <Button className="btn-item">
+                  <Box
+                    className="box-gray text-center box-support"
+                    display={"flex"}
+                    justifyContent={"center"}
+                    alignItems={"center"}
+                  >
+                    <img
+                      src={IconSupport}
+                      alt="image_item"
+                      className="icon_support"
+                    />
+                  </Box>
+                </Button>
+              </Box>
+            </Grid>
+          </Grid>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default DetailItem;

package/src/components/DragDropFile.tsx

@@ -0,0 +1,188 @@
+import { Box, Typography } from "@material-ui/core";
+import React from "react";
+import { useDropzone } from "react-dropzone";
+import IconSearch from "common/assets/icons/icon_search_image.svg";
+import { makeFileHandler } from "@nyris/nyris-react-components";
+import { useAppDispatch, useAppSelector } from "Store/Store";
+import { serviceImage, serviceImageNonRegion } from "services/image";
+import {
+  loadFile,
+  loadingActionResults,
+  searchFileImageNonRegion,
+} from "Store/Search";
+import { showFeedback, showResults } from "Store/Nyris";
+import { useHistory } from "react-router-dom";
+import ExampleImages from "./ExampleImages";
+import { feedbackClickEpic } from "services/Feedback";
+import { useState } from "react";
+
+interface Props {
+  acceptTypes: any;
+  onChangeLoading: any;
+  isLoading: boolean;
+}
+
+function DragDropFile(props: Props) {
+  const history = useHistory();
+  const dispatch = useAppDispatch();
+  const { acceptTypes, onChangeLoading, isLoading } = props;
+  const searchState = useAppSelector((state) => state);
+  const { settings } = searchState;
+  const [rectCoords] = useState<any>(undefined);
+  const [isLoadingLoadFile, setLoadingLoadFile] = useState<any>(false);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop: (fs: File[]) => {
+      onChangeLoading(true);
+      console.log("321");
+      let payload: any;
+      let filters: any[] = [];
+      setLoadingLoadFile(true);
+      console.log("fs", fs);
+
+      return serviceImage(fs[0], searchState).then((res: any) => {
+        console.log("res?.results", res);
+
+        res?.results.map((item: any) => {
+          filters.push({
+            sku: item.sku,
+            score: item.score,
+          });
+        });
+        payload = {
+          ...res,
+          // results: newResult,
+          filters,
+        };
+        console.log("payload", payload);
+
+        dispatch(loadFile(payload));
+        setLoadingLoadFile(false);
+        onChangeLoading(false);
+        history.push("/result");
+        return dispatch(showFeedback(""));
+      });
+    },
+  });
+
+  const getUrlToCanvasFile = (url: string, position?: number) => {
+    onChangeLoading(true);
+    dispatch(showResults(""));
+    dispatch(loadingActionResults(""));
+    if (position) {
+      feedbackClickEpic(searchState, position);
+    }
+
+    if (settings.regions) {
+      serviceImage(url, searchState).then((res) => {
+        dispatch(loadFile(res));
+        onChangeLoading(false);
+        history.push("/result");
+        return dispatch(showFeedback(""));
+      });
+    } else {
+      serviceImageNonRegion(url, searchState, rectCoords).then((res) => {
+        onChangeLoading(false);
+        history.push("/result");
+        dispatch(searchFileImageNonRegion(res));
+      });
+    }
+  };
+
+  return (
+    <Box
+      className={
+        !isDragActive && !isLoadingLoadFile
+          ? `box-content-main`
+          : `box-content-main-drop`
+      }
+    >
+      {isLoading && (
+        <Box className="loadingSpinCT">
+          <Box className="box-content-spin"></Box>
+        </Box>
+      )}
+
+      <div
+        className={`box-border`}
+        style={{ position: "relative" }}
+        {...getRootProps({
+          onClick: (e) => {
+            e.stopPropagation();
+          },
+        })}
+      >
+        {isDragActive ? (
+          <Box>
+            <Typography className="text-drop-file">
+              DRAG <span className="tractor">&</span> DROP
+            </Typography>
+            <input
+              {...getInputProps({
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+              })}
+              type="file"
+              name="file"
+              id="select_file"
+              // className="inputFile"
+              placeholder="Choose photo"
+              accept={acceptTypes}
+              onChange={makeFileHandler((e) => {})}
+            />
+          </Box>
+        ) : (
+          <>
+            <Box
+              className="box-content-drop"
+              {...getRootProps({
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+              })}
+            >
+              <Box className="box-image">
+                <img
+                  width={27}
+                  height={27}
+                  src={IconSearch}
+                  alt="icon_search"
+                />
+              </Box>
+              <label htmlFor="select_file" className="text-f20 text-bold">
+                <span className="box-blue">Choose photo</span> or drag & drop it
+                here
+              </label>
+              <input
+                {...getInputProps()}
+                type="file"
+                name="file"
+                id="select_file"
+                className="inputFile"
+                placeholder="Choose photo"
+                style={{ display: "block" }}
+                // accept={acceptTypes}
+                // onChange={makeFileHandler((e) => {
+                //   return isCheckImageFile(e);
+                // })}
+              />
+            </Box>
+            <Box style={{ marginTop: 19, zIndex: 109 }} className="box-thumb">
+              <Box display={"flex"} alignItems={"flex-end"}>
+                <ExampleImages
+                  images={settings.exampleImages}
+                  onExampleImageClicked={(url: string) => {
+                    return getUrlToCanvasFile(url);
+                  }}
+                />
+              </Box>
+            </Box>
+          </>
+        )}
+      </div>
+    </Box>
+  );
+}
+
+export default DragDropFile;

package/src/components/ExampleImages.tsx

@@ -1,24 +1,39 @@
-import React from 'react';
+import { Typography } from "@material-ui/core";
+import React from "react";
 
 interface ExampleImagesProps {
-    images: string[],
-    onExampleImageClicked: (url: string) => void
+  images: string[];
+  onExampleImageClicked: (url: string) => void;
 }
 
-const ExampleImages : React.FC<ExampleImagesProps> = ({images, onExampleImageClicked}) => {
-    if (images.length === 0) {
-        return null;
-    }
-    return (
-        <section className="useExampleImg">
-            You can also try one of these pictures:
-            <div className="exampleImages">
-                <div className="exImagesWrap">
-                    {images.map((i) => (<img key={i} src={i} alt="" onClick={() => onExampleImageClicked(i)}/>))}
-                </div>
-            </div>
-        </section>
-    );
+const ExampleImages: React.FC<ExampleImagesProps> = ({
+  images,
+  onExampleImageClicked,
+}) => {
+  if (images.length === 0) {
+    return null;
+  }
+  return (
+    <section className="useExampleImg">
+      <Typography className="title-box">
+        You can also try one of these pictures:
+      </Typography>
+      <div className="exampleImages">
+        <div className="exImagesWrap">
+          {images.map((i) => {
+            return (
+              <img
+                key={i}
+                src={i}
+                alt=""
+                onClick={() => onExampleImageClicked(i)}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
 };
 
 export default ExampleImages;

package/src/components/Feedback.tsx

@@ -1,55 +1,94 @@
-import React from 'react';
-import {NyrisFeedbackState} from "../actions/nyrisAppActions";
-import {Animate} from "react-move";
-
+import { useAppDispatch, useAppSelector } from "Store/Store";
+import {
+  feedbackNegative,
+  feedbackSubmitPositive,
+  NyrisFeedbackState,
+} from "Store/Nyris";
+import React from "react";
+import { Animate } from "react-move";
+import { feedbackSuccessEpic } from "services/Feedback";
 interface FeedbackProps {
-    feedbackState: NyrisFeedbackState,
-    onPositiveFeedback?: () => void,
-    onNegativeFeedback?: () => void,
-    onClose?: () => void
+  feedbackState: NyrisFeedbackState;
+  onClose?: () => void;
 }
 
-const Feedback: React.FC<FeedbackProps> = ({feedbackState, onPositiveFeedback, onNegativeFeedback, onClose}) => {
-    let inner : any = null;
-    switch (feedbackState) {
-        case 'question':
-            inner =
-                <div className="feedbackForm">
-                    <p>Did you find what you were looking for?</p>
-                    <div className="btn primary positiveFeedback" onClick={onPositiveFeedback}>Yes</div>
-                    <div className="btn secondary negativeFeedback" onClick={onNegativeFeedback}>No</div>
-                </div>;
-            break;
-        case 'positive':
-            inner = <div className="feedbackMessage positive">Great, thank you for your feedback!</div>
-            break;
-        case 'negative':
-            inner =
-                <div className="feedbackMessage negative">We saved your request so we can track down the
-                    issue and improve the search experience. Your Feedback helps us to make our service
-                    better for everyone,
-                    thank you!<br/>
-                    <div className="btn dismiss" onClick={onClose}>Dismiss</div>
-                </div>;
-            break;
-        default:
-            inner = null;
-            break;
+const Feedback: React.FC<FeedbackProps> = ({ feedbackState, onClose }) => {
+  let inner: any = null;
+  const state = useAppSelector((state) => state);
+  const dispatch = useAppDispatch();
+  const onPositiveFeedback = (data: boolean) => {
+    feedbackSuccessEpic(state, data);
+    if (data) {
+      dispatch(feedbackSubmitPositive(""));
+    } else {
+      dispatch(feedbackNegative(""));
     }
-    return (
-        <Animate show={feedbackState !== 'hidden'} start={{y: 100, opacity: 0}} enter={{y: [0], opacity: [1]}} leave={{y: [100], opacity: [0] }}>
-            {({y, opacity}) =>
-                <section className="feedback" style={{transform: `translateY(${y}%)`, opacity }}>
-                    <div className="wrapper">
-                        {inner}
-                    </div>
-                    <div className="closeFeedbackContainer">
-                        <div className="closeFeedback" onClick={onClose}/>
-                    </div>
-                </section>
-            }
-        </Animate>
-    );
+  };
+
+  switch (feedbackState) {
+    case "question":
+      inner = (
+        <div className="feedbackForm">
+          <p>Did you find what you were looking for?</p>
+          <div
+            className="btn primary positiveFeedback"
+            onClick={() => onPositiveFeedback(true)}
+          >
+            Yes
+          </div>
+          <div
+            className="btn secondary negativeFeedback"
+            onClick={() => onPositiveFeedback(false)}
+          >
+            No
+          </div>
+        </div>
+      );
+      break;
+    case "positive":
+      inner = (
+        <div className="feedbackMessage positive">
+          Great, thank you for your feedback!
+        </div>
+      );
+      break;
+    case "negative":
+      inner = (
+        <div className="feedbackMessage negative">
+          We saved your request so we can track down the issue and improve the
+          search experience. Your Feedback helps us to make our service better
+          for everyone, thank you!
+          <br />
+          <div className="btn dismiss" onClick={onClose}>
+            Dismiss
+          </div>
+        </div>
+      );
+      break;
+    default:
+      inner = null;
+      break;
+  }
+  return (
+    <Animate
+      show={feedbackState !== "hidden"}
+      start={{ y: 100, opacity: 0 }}
+      enter={{ y: [0], opacity: [1] }}
+      leave={{ y: [100], opacity: [0] }}
+    >
+      {({ y, opacity }) => (
+        <section
+          className="feedback"
+          style={{ transform: `translateY(${y}%)`, opacity }}
+        >
+          <div className="wrapper">{inner}</div>
+          <div className="closeFeedbackContainer">
+            <div className="closeFeedback" onClick={onClose} />
+          </div>
+        </section>
+      )}
+    </Animate>
+  );
 };
 
 export default Feedback;