@nyris/nyris-webapp 0.2.5 → 0.3.2

package/src/page/Profile/index.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { Box, Button, FormControlLabel, Grid, Typography } from "@material-ui/core";
+import BgColor from "common/assets/images/Rectangle.png";
+
+interface Props {}
+
+function Profile(props: Props) {
+  return (
+    <Box className="wrap-main-profile">
+      <Grid container>
+        <Grid item xs={6} className="box-col-left">
+          <Box className="box-top">
+            <Typography className="text-f40 fw-600 text-dark">
+              Jose Luis Reyes
+            </Typography>
+            <Typography className="text-f13 text-dark2 fw-600">
+              Nyris GmbH
+            </Typography>
+          </Box>
+          <Box className="box-bottom">
+            <Box className="box-content">
+              <Typography className="text-f12 text-dark fw-700">Profile</Typography>
+              <Box mt={1}>
+                <FormControlLabel
+                  labelPlacement="top"
+                  control={<input />}
+                  label="Name"
+                  className="w-100"
+                  style={{ alignItems: "flex-start", margin: 0 }}
+                />
+              </Box>
+              <Box mt={1}>
+                <FormControlLabel
+                  labelPlacement="top"
+                  control={<input />}
+                  label="E-mail"
+                  style={{ alignItems: "flex-start", margin: 0 }}
+                  className="w-100"
+                />
+              </Box>
+              <Box mt={1}>
+                <FormControlLabel
+                  labelPlacement="top"
+                  control={<input />}
+                  label="Password"
+                  style={{ alignItems: "flex-start", margin: 0 }}
+                  className="w-100"
+                />
+              </Box>
+              <Box className="w-100" mt={2}>
+                <Typography className="text-f12 text-dark fw-700">Account</Typography>
+              </Box>
+              <Box mt={1}>
+                <FormControlLabel
+                  labelPlacement="top"
+                  control={<input />}
+                  label="Company"
+                  style={{ alignItems: "flex-start", margin: 0 }}
+                  className="w-100"
+                />
+              </Box>
+              <Box mt={1}>
+                <FormControlLabel
+                  labelPlacement="top"
+                  control={<input />}
+                  label="Role"
+                  style={{ alignItems: "flex-start", margin: 0 }}
+                  className="w-100"
+                />
+              </Box>
+              <Box mt={2}>
+              <Button className="btn-log-out">Log out</Button>
+              </Box>
+            </Box>
+          </Box>
+        </Grid>
+        <Grid item xs={6} className="box-col-right">
+          <Box className="box-bg-image">
+            <img src={BgColor} alt="" />
+          </Box>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
+
+export default Profile;

package/src/page/Saved/MockData.ts

@@ -0,0 +1,223 @@
+export const dataItem = [
+  {
+    av: {
+      t: "INVALID",
+    },
+    id: "9c5c2eeb72895300bdd3b4ff8e6b67c4",
+    mid: "3ab221c77f2058efb4dc4f9a4255f270",
+    mer: "demo.nyris.io",
+    title: "HOYA",
+    desc: "Pflanze",
+    var: [],
+    img: {
+      id: "46ffb718a24bf47125c09db0bb0643074a119f2eb14939863665414afd306c3e",
+      ifid: "",
+      url: "https://img.nyris.io/46f/46ffb718a24bf47125c09db0bb0643074a119f2eb14939863665414afd306c3e.jpg",
+      h: false,
+    },
+    cc: ["Dekoration", "Blumentöpfe, Pflanzen & Blumenständer", "Pflanzen"],
+    sku: "60392745",
+    position: 0,
+  },
+  {
+    av: {
+      t: "INVALID",
+    },
+    id: "65f857e9779856e18cd67a809fd9e23c",
+    mid: "3ab221c77f2058efb4dc4f9a4255f270",
+    mer: "demo.nyris.io",
+    title: "FEJKA",
+    desc: "Kunstpflanze",
+    var: [],
+    img: {
+      id: "25f72fedd3cc0ef399bf88086157df643638e5b6e755a08b20c61221b1186c49",
+      ifid: "",
+      url: "https://img.nyris.io/25f/25f72fedd3cc0ef399bf88086157df643638e5b6e755a08b20c61221b1186c49.jpg",
+      h: false,
+    },
+    cc: [
+      "Dekoration",
+      "Blumentöpfe, Pflanzen & Blumenständer",
+      "Kunstpflanzen & -blumen",
+    ],
+    sku: "20349532",
+    position: 1,
+  },
+  {
+    av: {
+      t: "INVALID",
+    },
+    id: "c66fd178c8125ae198089caff89245a9",
+    mid: "3ab221c77f2058efb4dc4f9a4255f270",
+    mer: "demo.nyris.io",
+    title: "BEGÄRLIG",
+    desc: "Vase",
+    var: [],
+    img: {
+      id: "3b99e5300504273d8b363a501344c7d06b7fb5a29b5e0a50caf1d3d036a015b7",
+      ifid: "",
+      url: "https://img.nyris.io/3b9/3b99e5300504273d8b363a501344c7d06b7fb5a29b5e0a50caf1d3d036a015b7.jpg",
+      h: false,
+    },
+    cc: ["Dekoration", "Vasen & Schalen", "Vasen"],
+    sku: "30309781",
+    position: 2,
+  },
+  {
+    av: {
+      t: "INVALID",
+    },
+    id: "9ffd0e329cc15d5489a6f2e2fc3f7497",
+    mid: "3ab221c77f2058efb4dc4f9a4255f270",
+    mer: "demo.nyris.io",
+    title: "INDUSTRIELL",
+    desc: "Teller",
+    var: [],
+    img: {
+      id: "60bd1dfa0229b9a9065ee6d74b969718c75a55383e830a627fb0f9decf407925",
+      ifid: "",
+      url: "https://img.nyris.io/60b/60bd1dfa0229b9a9065ee6d74b969718c75a55383e830a627fb0f9decf407925.jpg",
+      h: false,
+    },
+    cc: ["Essen", "Essgeschirr", "Teller"],
+    sku: "90387078",
+    position: 3,
+  },
+  {
+    av: {
+      t: "INVALID",
+    },
+    id: "939e4f8f643156cf81c14804174a9efd",
+    mid: "3ab221c77f2058efb4dc4f9a4255f270",
+    mer: "demo.nyris.io",
+    title: "CITRUS",
+    desc: "Topfpflanze",
+    var: [],
+    img: {
+      id: "a3bcf8cb031effb87e3d412a51cc218860a064543a39e4cd6b368ccda4e44b5f",
+      ifid: "",
+      url: "https://img.nyris.io/a3b/a3bcf8cb031effb87e3d412a51cc218860a064543a39e4cd6b368ccda4e44b5f.jpg",
+      h: false,
+    },
+    cc: ["Dekoration", "Blumentöpfe, Pflanzen & Blumenständer", "Pflanzen"],
+    sku: "60392665",
+    position: 4,
+  },
+  {
+    p: {
+      c: "EUR",
+      vi: 3199,
+      ve: 3198,
+      t: 0,
+    },
+    av: {
+      t: "INVALID",
+    },
+    l: "https://www.impressionen.de/de/Weihnachten/Weihnachtsbeleuchtung/LED-Kranz-mit-Tannenzapfen-und-Blumen/produkt/246278?fromSearch=Suche&ctp=cG9zPTIxODEmc2ltaT05Ni4w",
+    id: "116e947ef4685a8e941f0b7b6d06753c",
+    mid: "3ab221c77f2058efb4dc4f9a4255f270",
+    mer: "demo.nyris.io",
+    title: "LED-Kranz mit Tannenzapfen und Blumen",
+    desc: "",
+    var: [],
+    img: {
+      id: "a6b41a30d15214450fb33cc39f29519a0dec354b266901c199d4467bb605d1c0",
+      ifid: "",
+      url: "https://img.nyris.io/a6b/a6b41a30d15214450fb33cc39f29519a0dec354b266901c199d4467bb605d1c0.jpg",
+      h: false,
+    },
+    cc: ["Weihnachten", "Weihnachtsbeleuchtung"],
+    sku: "246278",
+    position: 5,
+  },
+  {
+    av: {
+      t: "INVALID",
+    },
+    id: "19543b4d71e5591892cb36f0cc45918f",
+    mid: "3ab221c77f2058efb4dc4f9a4255f270",
+    mer: "demo.nyris.io",
+    title: "SMYCKA",
+    desc: "Kunstblatt",
+    var: [],
+    img: {
+      id: "af4a0c55b0d9a7a8ac96ca85f8302ee7f97f01a133f51dc5126ede9a5969b86e",
+      ifid: "",
+      url: "https://img.nyris.io/af4/af4a0c55b0d9a7a8ac96ca85f8302ee7f97f01a133f51dc5126ede9a5969b86e.jpg",
+      h: false,
+    },
+    cc: [
+      "Dekoration",
+      "Blumentöpfe, Pflanzen & Blumenständer",
+      "Kunstpflanzen & -blumen",
+    ],
+    sku: "80335773",
+    position: 6,
+  },
+  {
+    av: {
+      t: "INVALID",
+    },
+    id: "8342509d872959efa36170e1ed933243",
+    mid: "3ab221c77f2058efb4dc4f9a4255f270",
+    mer: "demo.nyris.io",
+    title: "STILREN",
+    desc: "Vase",
+    var: [],
+    img: {
+      id: "f1df581ba7e1ac05058a450ff1d222c8c1443e8582b515e447546e48e8ea5f6f",
+      ifid: "",
+      url: "https://img.nyris.io/f1d/f1df581ba7e1ac05058a450ff1d222c8c1443e8582b515e447546e48e8ea5f6f.jpg",
+      h: false,
+    },
+    cc: ["Dekoration", "Vasen & Schalen", "Vasen"],
+    sku: "10442045",
+    position: 7,
+  },
+  {
+    av: {
+      t: "INVALID",
+    },
+    id: "cbf502eb20d454e086e21ffe0d6dd474",
+    mid: "3ab221c77f2058efb4dc4f9a4255f270",
+    mer: "demo.nyris.io",
+    title: "STILREN",
+    desc: "Vase",
+    var: [],
+    img: {
+      id: "40b1a22c8610bfcd52e3acb59b39ee7a8c9a547db288344b0a9978d7f7353798",
+      ifid: "",
+      url: "https://img.nyris.io/40b/40b1a22c8610bfcd52e3acb59b39ee7a8c9a547db288344b0a9978d7f7353798.jpg",
+      h: false,
+    },
+    cc: ["Dekoration", "Vasen & Schalen", "Vasen"],
+    sku: "60442043",
+    position: 8,
+  },
+  {
+    p: {
+      c: "EUR",
+      vi: 795,
+      ve: 794,
+      t: 0,
+    },
+    av: {
+      t: "INVALID",
+    },
+    l: "https://www.dm.de/183-days-by-trend-it-up-lidschatten-cream-square-eyeshadow-palette-020-p4058172080852.html",
+    id: "cb6039515188564eac24d7b4c1c19e79",
+    mid: "3ab221c77f2058efb4dc4f9a4255f270",
+    mer: "demo.nyris.io",
+    title: "Lidschatten Cream Square Eyeshadow Palette 020, 8,1 g",
+    desc: "",
+    var: [],
+    img: {
+      id: "80abb67003ea310765db1dcadb3f7a65769ba0e5f2555397964b054e6a6d6a82",
+      ifid: "",
+      url: "https://img.nyris.io/80a/80abb67003ea310765db1dcadb3f7a65769ba0e5f2555397964b054e6a6d6a82.jpg",
+      h: false,
+    },
+    sku: "4058172080852",
+    position: 9,
+  },
+];

package/src/page/Saved/index.tsx

@@ -0,0 +1,166 @@
+import { Box, Button } from "@material-ui/core";
+import React from "react";
+import { useState } from "react";
+import {
+  NavLink,
+  useLocation,
+  useRouteMatch,
+} from "react-router-dom";
+import AllItem from "components/Saved/AllItem";
+import CategoryItemSaved from "components/Saved/Category";
+import { useEffect } from "react";
+import AddOutlinedIcon from "@material-ui/icons/AddOutlined";
+import { dataItem } from "./MockData";
+interface Props {}
+
+interface Option {
+  readonly label: string;
+  readonly value: string;
+}
+
+const collections = [
+  {
+    value: "all",
+    title: "All",
+  },
+  {
+    value: "collections",
+    title: "Collections",
+  },
+];
+
+const useQuery = () => {
+  const { search } = useLocation();
+  return React.useMemo(() => new URLSearchParams(search), [search]);
+};
+
+function Saved(props: Props) {
+  let query = useQuery();
+  const getCategory = query.get("category");
+  let { url } = useRouteMatch();
+  const [nameCategory, setNameCategory] = useState<string>("all");
+  const [collectionParams] =
+    useState<any[any]>(collections);
+  useEffect(() => {
+    if (getCategory) {
+      setNameCategory(getCategory);
+    }
+  }, [getCategory]);
+
+  // console.log("history", history?.location);
+
+  // const handleCheckMatchLink = (match: any, location: any) => {
+  //   let active = false;
+  //   if (history?.location.search === location?.search) {
+  //     active = true;
+  //   }
+  //   // if (match?.url === location.pathname) {
+  //   //   active = true;
+  //   // }
+
+  //   return active;
+  // };
+
+  // console.log("query", query.get("category"));
+
+  console.log("collectionParams", collectionParams);
+
+  return (
+    <Box className="wrap-main-saved">
+      <Box className="box-main-top">
+        <Box className="box-top">
+          <Box
+            className="box-input-search"
+            display={"flex"}
+            justifyContent={"center"}
+          >
+            {/* <InputSearch
+              inputValueInputSearch={inputValueInputSearch}
+              handleChange={handleChange}
+              handleKeyDown={handleKeyDown}
+              handleInputChange={handleInputChange}
+              valueInputSearch={valueInputSearch}
+              styleControl={{
+                width: 640,
+                background: "#FFFFFF",
+                boxShadow: "0px 0px 6.66667px rgba(0, 0, 0, 0.2)",
+                borderRadius: 21,
+                minHeight: 42,
+                display: "flex",
+                alignItems: "center",
+                paddingLeft: "16px",
+              }}
+              placeholder={"Search"}
+              customComponent={{
+                DropdownIndicator: () => {
+                  return (
+                    <Box mr={1}>
+                      <button
+                        className="btn-input-search"
+                        onClick={() => {
+                          console.log("321");
+                        }}
+                      >
+                        <img src={IconSetting} alt="icon_search" />
+                      </button>
+                    </Box>
+                  );
+                },
+              }}
+            /> */}
+          </Box>
+          {collectionParams?.length > 0 && (
+            <Box className="box-bottom">
+              {collectionParams.map((item: any, index: any) => {
+                console.log("itemmmmmmm", item);
+
+                return (
+                  <Box mr={1}>
+                    <NavLink
+                      key={index}
+                      // activeClassName="active"
+                      // isActive={(match, location) => {
+                      //   console.log("match", match);
+
+                      //   return location?.search === history?.location.search
+                      //     ? true
+                      //     : false;
+                      // }}
+                      to={`${url}?category=${item.value}`}
+                      className="nav-link p-0 menu-children rounded-0"
+                    >
+                      <span
+                        className={`d-none d-sm-block ms-4 px-2 py-1 border-bottom-1 ${
+                          nameCategory === "all" ? "active1" : "active2"
+                        }`}
+                      >
+                        {item.title}
+                      </span>
+                    </NavLink>
+                  </Box>
+                );
+              })}
+              <Button style={{ backgroundColor: "#D8D7F8" }}>
+                <AddOutlinedIcon style={{ color: "#3E36DC", fontSize: 12 }} />
+              </Button>
+            </Box>
+          )}
+        </Box>
+      </Box>
+
+      <Box className="box-main-bottom">
+        {collectionParams.length > 0 && (
+          <Box>
+            {nameCategory === "all" ? (
+              <AllItem dataItem={dataItem} isHover={true} />
+            ) : (
+              <CategoryItemSaved nameCategory={nameCategory} />
+            )}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export default Saved;

package/src/page/Support/index.tsx

@@ -0,0 +1,160 @@
+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

@@ -0,0 +1,36 @@
+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",
+  },
+];