@nyris/nyris-webapp 0.2.6 → 0.3.3

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;

package/src/components/FilterComponent.tsx

@@ -0,0 +1,33 @@
+import { Box, Button, Grid } from "@material-ui/core";
+import DefaultSelect from "components/default-select";
+import React from "react";
+
+interface Props {}
+
+function FilterComponent(props: Props) {
+  const {} = props;
+
+  return (
+    <Box className="box-main-filter">
+      <Grid container>
+        <Grid item className="item">
+          <DefaultSelect attribute="brand" />
+        </Grid>
+        <Grid item className="item">
+          <DefaultSelect attribute="keyword_0" />
+        </Grid>
+
+        <Grid item className="item-seven text-center">
+          <Button
+            className="text-btn-small bg-pink text-red"
+            style={{ borderRadius: 12 }}
+          >
+            Clear x
+          </Button>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
+
+export default FilterComponent;

package/src/components/Footer.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useAppDispatch, useAppSelector } from "Store/Store";
+import Feedback from "components/Feedback";
+import { hideFeedback } from "Store/Nyris";
+
+function FooterComponent(): JSX.Element {
+  const dispatch = useAppDispatch();
+  const searchState = useAppSelector((state) => state);
+  const { nyris } = searchState;
+  const { feedbackState } = nyris;
+  return (
+    <>
+      <section className="footnote">
+        <div className="wrapper">
+          © 2017 - 2019 <a href="https://nyris.io">nyris GmbH</a> - All rights
+          reserved - <a href="https://nyris.io/imprint/">Imprint</a>
+        </div>
+      </section>
+      <Feedback
+        feedbackState={feedbackState}
+        onClose={() => {
+          return dispatch(hideFeedback(""));
+        }}
+      />
+    </>
+  );
+}
+
+export default FooterComponent;

package/src/components/FooterMD.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { makeStyles, Typography, Link } from "@material-ui/core";
+import { useAppSelector } from "Store/Store";
+
+const useStyles = makeStyles((theme) => ({
+  footer: {
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(6),
+  },
+}));
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {"Powered by "}
+      <Link
+        color="inherit"
+        href="https://nyris.io/"
+        component="a"
+        target="_blank"
+      >
+        nyris.io
+      </Link>
+    </Typography>
+  );
+}
+
+function FooterMD(): JSX.Element {
+  const searchState = useAppSelector((state) => state);
+  const { search, nyris } = searchState;
+  const { showPart } = nyris;
+  const { requestId } = search;
+  const classes = useStyles();
+  return (
+    <footer className={classes.footer}>
+      <Typography variant="subtitle1" align="center" color="textSecondary">
+        {requestId && showPart === "results" && (
+          <div
+            style={{
+              textAlign: "center",
+              fontSize: "0.7em",
+              paddingTop: "0.8em",
+            }}
+          >
+            Request identifier {requestId}
+          </div>
+        )}
+      </Typography>
+      <Copyright />
+    </footer>
+  );
+}
+
+export default FooterMD;

package/src/components/FooterNewVersion.tsx

@@ -0,0 +1,12 @@
+import { Box } from '@material-ui/core'
+import React from 'react'
+
+interface Props {}
+
+function FooterNewVersion(props: Props): JSX.Element {
+  return (
+    <Box></Box>
+  )
+}
+
+export default FooterNewVersion

package/src/components/FooterResult.tsx

@@ -0,0 +1,47 @@
+import { Box, Grid, Typography } from "@material-ui/core";
+import React from "react";
+import { Link } from "react-router-dom";
+import TitleOutlinedIcon from "@material-ui/icons/TitleOutlined";
+
+interface Props {
+  search: any;
+}
+
+function FooterResult(props: Props) {
+  const {search} = props;
+
+  return (
+    <Grid
+      container
+      justifyContent="space-between"
+      alignItems="center"
+      style={{ height: "100%" }}
+    >
+      <Grid
+        item
+        className="item-notify"
+        style={{ borderRight: "1px solid #E9E9EC", minWidth: 69 }}
+      >
+        <Typography className="text-f8 text-center">
+          {search.results.length} results
+        </Typography>
+      </Grid>
+      <Grid item className="item-notify">
+        <Typography className="text-f8 text-center">
+          Didn’t find what you were looking for? Share your search with our{" "}
+          <Link to={"#"}>product experts</Link>.
+        </Typography>
+      </Grid>
+      <Grid item className="item-notify" style={{ minWidth: 32 }}>
+        <Typography className="text-f8">
+          <Box>
+            <TitleOutlinedIcon style={{ color: "#55566B", fontSize: 8 }} />
+            <TitleOutlinedIcon style={{ color: "#55566B", fontSize: 10 }} />
+          </Box>
+        </Typography>
+      </Grid>
+    </Grid>
+  );
+}
+
+export default FooterResult;

package/src/components/Header.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+function HeaderComponent(): JSX.Element {
+  return (
+    <div className="navWrap">
+      <div className="wrapper" style={{ padding: 0 }}>
+        <section id="branding" />
+        <div id="menu" className="menuWrap" role="navigation">
+          <ul>
+            <li>
+              <a
+                href="https://nyris.io/imprint/#privacy"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Privacy Policy
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://nyris.io/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Visit our Website
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default HeaderComponent;

package/src/components/HeaderMd.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Container, Toolbar, Typography, AppBar } from "@material-ui/core";
+import { defaultMdSettings } from "defaults";
+import { useAppSelector } from "Store/Store";
+interface Props {
+  settings: any;
+}
+
+function HeaderMdComponent(): JSX.Element {
+  const { settings } = useAppSelector((state: any) => state);
+  const { themePage } = settings;
+  const mdSettings: any = themePage.materialDesign.active
+    ? themePage.materialDesign.materialDesign
+    : defaultMdSettings;
+  return (
+    <AppBar
+      position={"relative"}
+      style={{ backgroundColor: mdSettings.appBarCustomBackgroundColor }}
+    >
+      <Container
+        maxWidth="md"
+        style={{ flexDirection: "row", display: "flex" }}
+      >
+        <img
+          src={mdSettings.appBarLogoUrl}
+          style={{ height: "2em", minHeight: "64px", display: "flex" }}
+          alt="Logo"
+        />
+        <Toolbar component="span">
+          <Typography style={{ color: mdSettings.appBarCustomTextColor }}>
+            {mdSettings.appBarTitle}
+          </Typography>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+}
+
+export default HeaderMdComponent;

package/src/components/HeaderNewVersion.tsx

@@ -0,0 +1,92 @@
+import { Box, Grid } from "@material-ui/core";
+import React from "react";
+import { NavLink } from "react-router-dom";
+import "./common.scss";
+import IconReLoad from "common/assets/icons/reload_icon.svg";
+import IconSave from "common/assets/icons/save_search.svg";
+import IconSupport from "common/assets/icons/support.svg";
+import IconAdmin from "common/assets/icons/admin.svg";
+import LogoNyris from "common/assets/icons/nyris_logo.svg";
+function HeaderNewVersion(): JSX.Element {
+  const handleCheckMatchLink = (match: any, location: any) => {
+    let active = false;
+    if (match?.url === location.pathname) {
+      active = true;
+    }
+
+    return active;
+  };
+
+  return (
+    <Box className="box-content" display={"flex"}>
+      <NavLink to="/" style={{ lineHeight: 0 }}>
+        {/* <section id="branding" style={{ height: 32 }} /> */}
+        <img width={74} height={19} src={`${LogoNyris}`} alt="nyris logo" />
+      </NavLink>
+      <Grid container className="nav-menu">
+        <Grid item className="item-nav">
+          <NavLink
+            activeClassName="active"
+            isActive={(match, location) =>
+              handleCheckMatchLink(match, location)
+            }
+            to={"/search-history"}
+            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">
+              Search history
+              <img width={10} height={10} src={`${IconReLoad}`} alt=""/>
+            </span>
+          </NavLink>
+        </Grid>
+        <Grid item className="item-nav">
+          <NavLink
+            activeClassName="active"
+            isActive={(match, location) =>
+              handleCheckMatchLink(match, location)
+            }
+            to={"/saved"}
+            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">
+              Saved
+              <img width={10} height={10} src={`${IconSave}`} alt=""/>
+            </span>
+          </NavLink>
+        </Grid>
+        <Grid item className="item-nav">
+          <NavLink
+            activeClassName="active"
+            isActive={(match, location) =>
+              handleCheckMatchLink(match, location)
+            }
+            to={"/support"}
+            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">
+              Support
+              <img width={10} height={10} src={`${IconSupport}`} alt="" />
+            </span>
+          </NavLink>
+        </Grid>
+        <Grid item className="item-nav">
+          <NavLink
+            activeClassName="active"
+            isActive={(match, location) =>
+              handleCheckMatchLink(match, location)
+            }
+            to={"/account"}
+            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">
+              My Account
+              <img width={10} height={10} src={`${IconAdmin}`} alt=""/>
+            </span>
+          </NavLink>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
+
+export default HeaderNewVersion;

package/src/components/Layout.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { ReactNode } from "components/common";
+import "./common.scss";
+import HeaderComponent from "./Header";
+import FooterComponent from "./Footer";
+import { useAppSelector } from "Store/Store";
+import HeaderMdComponent from "./HeaderMd";
+import FooterMD from "./FooterMD";
+import HeaderNewVersion from "./HeaderNewVersion";
+import FooterNewVersion from "./FooterNewVersion";
+import {AppState} from "../types";
+function Layout({ children }: ReactNode): JSX.Element {
+  const { settings } = useAppSelector<AppState>((state:any) => state);
+  const { themePage } = settings;
+  
+  let HeaderApp: any;
+  let FooterApp: any;
+  let classNameBoxVersion: string = "newVersion";
+  if (themePage.default?.active) {
+    classNameBoxVersion = "default";
+    HeaderApp = HeaderComponent;
+    FooterApp = FooterComponent;
+  } else if (themePage.materialDesign?.active) {
+    classNameBoxVersion = "materialDesign";
+    HeaderApp = HeaderMdComponent;
+    FooterApp = FooterMD;
+  } else {
+    HeaderApp = HeaderNewVersion;
+    FooterApp = FooterNewVersion;
+  }
+  return (
+    <div className={`layout-main-${classNameBoxVersion}`}>
+      <div className={`box-header-${classNameBoxVersion}-main`}>
+        <HeaderApp />
+      </div>
+      <div className={`box-body-${classNameBoxVersion}-wrap-main`}>
+        {children}
+      </div>
+      <div className="footer-wrap-main">
+        <FooterApp />
+      </div>
+    </div>
+  );
+}
+
+export default Layout;

package/src/components/LoadingScreen/index.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { Box } from "@material-ui/core";
+import { connectStateResults } from "react-instantsearch-dom";
+
+function LoadingScreen({
+  searchState,
+  searchResults,
+  children,
+  isSearchStalled,
+  searchingForFacetValues,
+  searching,
+}: any) {
+  const [isLoading] = useState<boolean>(false);
+
+  return (
+    <>
+      {isLoading && (
+        <Box className="box-wrap-loading">
+          <Box className="loadingSpinCT">
+            <Box className="box-content-spin"></Box>
+          </Box>
+        </Box>
+      )}
+      {children}
+    </>
+  );
+}
+const LoadingScreenCustom = connectStateResults(LoadingScreen);
+export default LoadingScreenCustom;

package/src/components/Navigation.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+// import * as H from "history";
+
+function Navigation(): JSX.Element {
+  // const handleCheckMatchLink = (match: any, location: H.Location) => {
+  //   if (match?.url === location?.pathname) {
+  //     return true;
+  //   }
+  //   return false;
+  // };
+
+  return (
+    <ul className="d-flex align-center">
+      <li>
+        <NavLink
+          activeClassName="active"
+          // isActive={(match, location: H.Location) => {
+          //   return handleCheckMatchLink(match, location);
+          // }}
+          isActive={() => false}
+          to={"/search-history"}
+          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">
+            Search history
+          </span>
+        </NavLink>
+      </li>
+    </ul>
+  );
+}
+
+export default Navigation;