@nyris/nyris-webapp 0.3.3 → 0.3.6

package/src/page/Support/index.tsx

@@ -1,160 +0,0 @@
-import {
-  Box,
-  Button,
-  CircularProgress,
-  IconButton,
-  TextareaAutosize,
-  Typography,
-} from "@material-ui/core";
-import React, { useState } from "react";
-import PhotoCameraOutlinedIcon from "@material-ui/icons/PhotoCameraOutlined";
-import CloseOutlinedIcon from "@material-ui/icons/CloseOutlined";
-interface Props {}
-
-function SupportPage(props: Props) {
-  const [imageUpload, setImageUpload] = useState<any[]>([]);
-  const [isLoading, setLoading] = useState<boolean>(false);
-  const onUploadImage = (e: any) => {
-    let newValue: any[] = [];
-    Object.values(e.target.files).forEach((val: any, index: any) => {
-      newValue.push({
-        value: index,
-        urlImage: URL.createObjectURL(val),
-      });
-    });
-    setImageUpload(newValue);
-  };
-
-  const onRemoveImage = (value: any) => {
-    setLoading(true);
-    const newArr = imageUpload;
-    setImageUpload(newArr);
-    setTimeout(() => {
-      setLoading(false);
-    }, 1000);
-  };
-  console.log("imageUpload", imageUpload);
-
-  return (
-    <Box className="wrap-main-support-page" display={"flex"}>
-      <Box className="col-left">
-        <Box
-          className="col-left__top"
-          display={"flex"}
-          alignItems={"center"}
-          justifyContent={"center"}
-        >
-          <Box
-            style={{ width: 640 }}
-            marginLeft={"auto"}
-            display={"flex"}
-            justifyContent={"center"}
-          >
-            <Typography
-              className="text-f40 text-white fw-700"
-              style={{ width: 442 }}
-            >
-              Didn’t find what you were looking for?
-            </Typography>
-          </Box>
-        </Box>
-        <Box className="col-left__bottom">
-          <Box style={{ width: 640 }} marginLeft={"auto"}>
-            <Box className="box-form">
-              <form>
-                <Box mb={1}>
-                  <Typography className="text-white text-f12">
-                    Share your search with our product expert:
-                  </Typography>
-                </Box>
-                <Box className="box-btn-upload" mb={1}>
-                  <input
-                    accept="image/*"
-                    id="contained-button-file"
-                    multiple
-                    type="file"
-                    style={{ display: "none" }}
-                    onChange={onUploadImage}
-                  />
-                  <label htmlFor="contained-button-file">
-                    <IconButton
-                      color="primary"
-                      aria-label="upload picture"
-                      component="span"
-                      className="btn-upload"
-                    >
-                      Open file
-                      <PhotoCameraOutlinedIcon style={{ fontSize: 12 }} />
-                    </IconButton>
-                  </label>
-                </Box>
-                {!isLoading ? (
-                  <Box
-                    className="box-preview-image"
-                    display={"flex"}
-                    flexWrap={"wrap"}
-                  >
-                    {imageUpload &&
-                      imageUpload.map((item: any, index: any) => {
-                        return (
-                          <Box className="box-image w-100" key={index}>
-                            <Button
-                              className="btn-close w-100"
-                              onClick={() => {
-                                const newValue = index;
-                                onRemoveImage(newValue);
-                              }}
-                            >
-                              <CloseOutlinedIcon style={{ fontSize: 12 }} />
-                            </Button>
-                            <img
-                              style={{ height: "100%" }}
-                              src={item.urlImage}
-                              key={index}
-                              alt={`${index}`}
-                            />
-                          </Box>
-                        );
-                      })}
-                  </Box>
-                ) : (
-                  <CircularProgress />
-                )}
-
-                <Box mb={2}>
-                  <Typography className="text-white text-f12">
-                    Or leave a message:
-                  </Typography>
-                </Box>
-                <Box mb={2}>
-                  <Box mb={1}>
-                    <Typography className="text-white text-f8">
-                      Message
-                    </Typography>
-                  </Box>
-                  <TextareaAutosize
-                    placeholder="Message"
-                    minRows={1}
-                    // style={{height: 'fit-content'}}
-                    className="text-f9 textarea-ct w-100"
-                  />
-                </Box>
-                <Box display={"flex"}>
-                  <Button className="text-white text-f9 fw-700 bg-dark w-50 border-rd-0">
-                    Cancel
-                  </Button>
-                  <Button className="text-white text-f9 fw-700 bg-pink2 w-50 border-rd-0">
-                    Send
-                  </Button>
-                </Box>
-              </form>
-            </Box>
-          </Box>
-        </Box>
-      </Box>
-      <Box className="col-right"></Box>
-    </Box>
-  );
-}
-
-export default SupportPage;

package/src/page/result/MockData.ts

@@ -1,36 +0,0 @@
-export const dataFieldOne = [
-  {
-    value: "dataFieldOne",
-    title: "Filter one with a longer title",
-  },
-];
-export const dataFieldTow = [
-  {
-    value: "dataFieldTow",
-    title: "Filter two",
-  },
-];
-export const dataFieldThree = [
-  {
-    value: "dataFieldThree",
-    title: "Filter three with a smaller title",
-  },
-];
-export const dataFieldFour = [
-  {
-    value: "dataFieldFour",
-    title: "Filter four",
-  },
-];
-export const dataFieldFive = [
-  {
-    value: "dataFieldFive",
-    title: "Filter five",
-  },
-];
-export const dataFieldSix = [
-  {
-    value: "dataFieldSix",
-    title: "Filter six",
-  },
-];

package/src/page/result/index.tsx

@@ -1,473 +0,0 @@
-import {
-  Box,
-  Button,
-  IconButton,
-  InputBase,
-  Paper,
-  Typography,
-} from "@material-ui/core";
-import React, { useEffect, useState } from "react";
-import IconWhatsApp from "common/assets/icons/Icon_whatsapp.png";
-import IconEmail from "common/assets/icons/icon_email.png";
-import IconWeChat from "common/assets/icons/Icon_wechat.png";
-// import FilterComponent from "components/FilterComponent";
-// import {
-//   dataFieldFive,
-//   dataFieldFour,
-//   dataFieldOne,
-//   dataFieldSix,
-//   dataFieldThree,
-//   dataFieldTow,
-// } from "./MockData";
-import ItemResult from "components/results/ItemResult";
-import { useAppDispatch, useAppSelector } from "Store/Store";
-import { debounce } from "lodash";
-import KeyboardArrowRightOutlinedIcon from "@material-ui/icons/KeyboardArrowRightOutlined";
-import KeyboardArrowLeftOutlinedIcon from "@material-ui/icons/KeyboardArrowLeftOutlined";
-import FooterResult from "components/FooterResult";
-import DefaultModal from "components/modal/DefaultModal";
-import CloseOutlinedIcon from "@material-ui/icons/CloseOutlined";
-import DetailItem from "components/DetailItem";
-import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
-import { RectCoords } from "@nyris/nyris-api";
-import {
-  loadFile,
-  loadingActionResults,
-  searchFileImageNonRegion,
-  selectionChanged,
-  updateResultChangePosition,
-} from "Store/Search";
-import { showFeedback, showResults } from "Store/Nyris";
-import algoliasearch from "algoliasearch/lite";
-import {
-  InstantSearch,
-  Hits,
-  Pagination,
-  Configure,
-} from "react-instantsearch-dom";
-import CustomSearchBox from "components/input/inputSearch";
-import { feedbackClickEpic } from "services/Feedback";
-import {
-  searchImageByPosition,
-  serviceImage,
-  serviceImageNonRegion,
-} from "services/image";
-import Preview from "components/preview/preview";
-import NyrisAPI from "@nyris/nyris-api";
-import LoadingScreenCustom from "components/LoadingScreen";
-
-interface Props {}
-
-function ResultComponent(props: Props) {
-  const dispatch = useAppDispatch();
-  const StateGlobal = useAppSelector((state) => state);
-  const [showColLeft, setToggleShowColLeft] = useState<boolean>(false);
-  const [showImageCanvas, setShowImageCanvas] = useState<boolean>(true);
-  const [isOpenModalImage, setOpenModalImage] = useState<boolean>(false);
-  const [numberResult, setNumberResult] = useState<number>(0);
-  const [isOpenModalShare, setOpenModalShare] = useState<boolean>(false);
-  const { search, settings }: any = StateGlobal;
-  const { results, requestImage, regions, selectedRegion }: any = search;
-  const { valueTextSearch } = search;
-  const [dataResult, setDataResult] = useState<any[]>([]);
-  const [dataImageModal, setDataImageModal] = useState<any>();
-  const [searchStateInput, setSearchStateInput] = useState<any>({});
-  const apiNyris = new NyrisAPI(settings);
-  const [isLoading, setLoading] = useState<any>(false);
-  const { apiKeyAlgolia, appIdAlgolia, indexNameAlgolia } = settings;
-  const searchClient = algoliasearch(appIdAlgolia, apiKeyAlgolia);
-  const index = searchClient.initIndex(indexNameAlgolia);
-
-  useEffect(() => {
-    if (!valueTextSearch) {
-      return;
-    }
-    setSearchStateInput(valueTextSearch);
-  }, [valueTextSearch]);
-
-  useEffect(() => {
-    if (results?.length === 0) {
-      setDataResult([]);
-      return;
-    }
-    setDataResult(results);
-  }, [results]);
-
-  useEffect(() => {
-    if (!showColLeft) {
-      return setShowImageCanvas(true);
-    }
-    return setShowImageCanvas(false);
-  }, [showColLeft]);
-
-  // TODO: hanlder modal:
-  const handlerToggleModal = (item: any) => {
-    setDataImageModal(item);
-    return setOpenModalImage(true);
-  };
-
-  const onNextItem = () => {
-    if (numberResult === results.length) {
-      return;
-    }
-    setNumberResult(numberResult + 1);
-  };
-
-  const onPrevItem = () => {
-    if (numberResult === 0) {
-      return;
-    }
-    setNumberResult(numberResult - 1);
-  };
-
-  // TODO: rectCoords
-
-  const debounceRectCoords = (value: any) => handlerRectCoords(value);
-
-  const handlerRectCoords = debounce((value: any) => {
-    dispatch(selectionChanged(value));
-    setLoading(true);
-    return onSearchOffersForImage(value);
-  }, 500);
-
-  // TODO: Search offers for image:
-  const onSearchOffersForImage = (r: RectCoords) => {
-    if (!requestImage) {
-      return;
-    }
-    const { canvas }: any = requestImage;
-    if (settings.regions) {
-      searchImageByPosition(canvas, StateGlobal, r).then((res: any) => {
-        const payload = {
-          ...res,
-          requestImage: requestImage,
-        };
-        dispatch(updateResultChangePosition(payload));
-        setLoading(false);
-        return dispatch(showFeedback(""));
-      });
-    } else {
-      serviceImageNonRegion(canvas, StateGlobal, null).then((res: any) => {
-        const payload = {
-          ...res,
-          requestImage: requestImage,
-        };
-        dispatch(updateResultChangePosition(payload));
-        return dispatch(showFeedback(""));
-      });
-    }
-  };
-
-  // TODO: Search text
-  const searchTextByApiAndFilter = async (searchState: any) => {
-    try {
-      if (searchState?.query !== "") {
-        const data = await index.search(searchState.query, {});
-        const productIds = data.hits.map((hit: any) => hit.sku);
-        const eventData = {
-          query: data.query,
-          page: data.page,
-          product_ids: productIds,
-        };
-        const textSearchEvent: any = { event: "text-search", data: eventData };
-        await apiNyris.sendFeedback(
-          search?.sessionId,
-          search?.requestId,
-          textSearchEvent
-        );
-      }
-    } catch (error: any) {
-      console.log("searchTextByApi", error);
-      return;
-    }
-  };
-
-  // TODO: Handler like dislike
-  const sendFeedBackAction = async (type: string) => {
-    try {
-      const action = type === "like" ? true : false;
-      const payload: any = {
-        event: "feedback",
-        data: {
-          success: action,
-        },
-      };
-      await apiNyris.sendFeedback(
-        search?.sessionId,
-        search?.requestId,
-        payload
-      );
-    } catch (error) {}
-  };
-
-  // Search image with url or file
-  const getUrlToCanvasFile = (url: string, position?: number) => {
-    dispatch(showResults(""));
-    dispatch(loadingActionResults(""));
-    if (position) {
-      feedbackClickEpic(StateGlobal, position);
-      return;
-    }
-    if (settings.regions) {
-      serviceImage(url, StateGlobal).then((res: any) => {
-        dispatch(loadFile(res));
-        setLoading(false);
-        return dispatch(showFeedback(""));
-      });
-
-      return;
-    } else {
-      serviceImageNonRegion(url, StateGlobal, undefined).then((res) => {
-        dispatch(searchFileImageNonRegion(res));
-      });
-      return;
-    }
-  };
-
-  // Todo: item result.
-  const Hit = (hit: any) => {
-    return (
-      <ItemResult
-        dataItem={hit?.hit}
-        handlerToggleModal={() => {
-          handlerToggleModal(hit?.hit);
-        }}
-        handlerToggleModalShare={() => setOpenModalShare(true)}
-        indexItem={hit.__position}
-        isHover={false}
-        onSearchImage={(url: any) => {
-          setSearchStateInput({});
-          getUrlToCanvasFile(url);
-          setLoading(true);
-        }}
-        handlerFeedback={(value: string) => {
-          sendFeedBackAction(value);
-        }}
-      />
-    );
-  };
-
-  const nonEmptyFilter: any[] = !search?.requestImage
-    ? []
-    : ["sku:DOES_NOT_EXIST<score=1>"];
-  const filterSkus: any = search?.results
-    ? search?.results.map(
-        (f: any) => `sku:'${f.sku}'<score=${Math.round(100 * f.score)}>`
-      )
-    : "";
-  const filtersString = [...nonEmptyFilter, ...filterSkus].join(" OR ");
-  return (
-    <Box className={`wrap-main-result loading`}>
-      <>
-        {isLoading && (
-          <Box className="box-wrap-loading">
-            <Box className="loadingSpinCT">
-              <Box className="box-content-spin"></Box>
-            </Box>
-          </Box>
-        )}
-        <InstantSearch
-          indexName={indexNameAlgolia}
-          searchClient={searchClient}
-          searchState={searchStateInput}
-          onSearchStateChange={(state: any) => {
-            setSearchStateInput(state);
-            searchTextByApiAndFilter(state);
-          }}
-        >
-          <Configure filters={filtersString}></Configure>
-          <Box className="box-wrap-result-component">
-            <div className="box-search">
-              <Box>
-                <CustomSearchBox />
-              </Box>
-              {/* <Box className="box-filter">
-                <FilterComponent />
-              </Box> */}
-            </div>
-            <Box className="box-result">
-              <>
-                {settings.preview && requestImage && (
-                  <Box className={`col-left ${showColLeft && "toggle"}`}>
-                    <Box className="box-preview">
-                      <Button
-                        className="button-toggle"
-                        onClick={() => {
-                          setTimeout(() => {
-                            setToggleShowColLeft(!showColLeft);
-                          }, 500);
-                        }}
-                      >
-                        {showColLeft ? (
-                          <KeyboardArrowRightOutlinedIcon />
-                        ) : (
-                          <KeyboardArrowLeftOutlinedIcon />
-                        )}
-                      </Button>
-                      {requestImage && showImageCanvas && (
-                        <Box className="preview-item">
-                          <Preview
-                            key={requestImage?.id}
-                            onSelectionChange={(r: RectCoords) => {
-                              debounceRectCoords(r);
-                              return;
-                            }}
-                            image={requestImage?.canvas}
-                            initialRegion={
-                              !selectedRegion
-                                ? regions[0]
-                                  ? regions[0]
-                                  : { x1: 0, x2: 1, y1: 0, y2: 1 }
-                                : selectedRegion
-                            }
-                            regions={regions}
-                            maxWidth={400}
-                            maxHeight={500}
-                            dotColor="#FBD914"
-                          />
-                        </Box>
-                      )}
-                    </Box>
-                    <Box className="box-title_col-left">
-                      <Typography style={{ fontSize: 11, color: "#fff" }}>
-                        Adjust the selection frame for better results.
-                      </Typography>
-                    </Box>
-                  </Box>
-                )}
-
-                <Box
-                  className={`col-right ${
-                    settings.preview && "ml-auto mr-auto"
-                  }`}
-                >
-                  <Box
-                    className={`box-item-result ${
-                      requestImage && showImageCanvas
-                        ? "mr-auto"
-                        : "ml-auto mr-auto"
-                    }`}
-                  >
-                    <LoadingScreenCustom>
-                      <Hits hitComponent={Hit} />
-                    </LoadingScreenCustom>
-                  </Box>
-                </Box>
-              </>
-            </Box>
-            <Box>
-              <Box className="box-panigation">
-                <Pagination />
-              </Box>
-              <Box className="box-notify">
-                <FooterResult search={search} />
-              </Box>
-            </Box>
-
-            {/* TODO: Component modal image */}
-            <DefaultModal
-              openModal={isOpenModalImage}
-              handleClose={(e: any) => {
-                setOpenModalImage(false);
-              }}
-            >
-              <DetailItem
-                handlerCloseModal={() => {
-                  setOpenModalImage(false);
-                }}
-                onPrevItem={onPrevItem}
-                onNextItem={onNextItem}
-                dataItem={dataImageModal}
-                results={dataResult}
-                onHandlerModalShare={() => setOpenModalShare(true)}
-                onSearchImage={(url: string) => {
-                  setLoading(true);
-                  getUrlToCanvasFile(url);
-                }}
-              />
-            </DefaultModal>
-
-            {/* TODO: Component modal share */}
-            <DefaultModal
-              openModal={isOpenModalShare}
-              handleClose={() => setOpenModalShare(false)}
-            >
-              <Box className="box-modal-default box-modal-share">
-                <Box
-                  className="ml-auto"
-                  style={{ width: "fit-content", marginRight: 5 }}
-                >
-                  <Button
-                    style={{ padding: 0 }}
-                    onClick={() => setOpenModalShare(false)}
-                  >
-                    <CloseOutlinedIcon
-                      style={{ fontSize: 12, color: "#55566B" }}
-                    />
-                  </Button>
-                </Box>
-                <Box className="box-content-box-share">
-                  <Typography className="text-f12 text-gray text-bold">
-                    Share
-                  </Typography>
-                  <Paper component="form" className="box-input">
-                    <InputBase
-                      className="text-f9 text-gray"
-                      style={{ width: "100%" }}
-                      value={"https://www.go..."}
-                    />
-                    <IconButton
-                      color="secondary"
-                      aria-label="directions"
-                      style={{ padding: 0 }}
-                    >
-                      <FileCopyOutlinedIcon style={{ fontSize: 8 }} />
-                    </IconButton>
-                  </Paper>
-
-                  <Box mt={1} className="box-media-share">
-                    <Button style={{ padding: 0 }}>
-                      <Box display={"flex"} alignItems={"center"}>
-                        <img src={IconEmail} alt="icon_email" />
-                        <Typography
-                          className="text-f8 fw-500"
-                          style={{ color: "#2B2C46", marginLeft: 5 }}
-                        >
-                          Share with e-Mail
-                        </Typography>
-                      </Box>
-                    </Button>
-                    <Button style={{ padding: 0 }}>
-                      <Box display={"flex"} alignItems={"center"}>
-                        <img src={IconWhatsApp} alt="icon_email" />
-                        <Typography
-                          className="text-f8 fw-500"
-                          style={{ color: "#2B2C46", marginLeft: 5 }}
-                        >
-                          Share with WhatsApp
-                        </Typography>
-                      </Box>
-                    </Button>
-                    <Button style={{ padding: 0 }}>
-                      <Box display={"flex"} alignItems={"center"}>
-                        <img src={IconWeChat} alt="icon_email" />
-                        <Typography
-                          className="text-f8 fw-500"
-                          style={{ color: "#2B2C46", marginLeft: 5 }}
-                        >
-                          Share with WeChat
-                        </Typography>
-                      </Box>
-                    </Button>
-                  </Box>
-                </Box>
-              </Box>
-            </DefaultModal>
-          </Box>
-        </InstantSearch>
-      </>
-    </Box>
-  );
-}
-
-export default ResultComponent;