@nyris/nyris-webapp 0.3.23 → 0.3.25

package/src/components/HeaderNewVersion.tsx

@@ -1,112 +0,0 @@
-import { Box, Grid } from '@material-ui/core';
-import React from 'react';
-import { NavLink } from 'react-router-dom';
-import './common.scss';
-import { useAppDispatch, useAppSelector } from 'Store/Store';
-import { reset } from 'Store/Search';
-
-function HeaderNewVersion(): JSX.Element {
-  const dispatch = useAppDispatch();
-  const { settings } = useAppSelector(state => state);
-
-  // 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, paddingLeft: '10px' }}
-        onClick={() => {
-          dispatch(reset(''));
-        }}
-      >
-        {/* <section id="branding" style={{ height: 32 }} /> */}
-        <img
-          src={settings.themePage.searchSuite?.appBarLogoUrl}
-          alt={settings.themePage.searchSuite?.appBarLogoUrlAlt}
-          style={{
-            aspectRatio: 1,
-            width: settings.themePage.searchSuite?.logoWidth,
-            height: settings.themePage.searchSuite?.logoHeight,
-          }}
-        />
-      </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>
-         */}
-
-        {/*hidden_as_required
-        <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={20} height={20} 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={20} height={20} src={`${IconAdmin}`} alt="" />
-            </span>
-          </NavLink>
-        </Grid>*/}
-      </Grid>
-    </Box>
-  );
-}
-
-export default HeaderNewVersion;

package/src/components/Navigation.tsx

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

package/src/components/PredictedCategories.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-const PredictedCategories = ({cs}: {cs: {name: string, score: number}[]}) =>
-    <>
-        {cs.map((c) =>
-            <small key={c.name}>
-                {c.name === "" ? "No category" : c.name.split(" > ").slice(-1)[0]}:
-                {(c.score * 100).toFixed(0)}%
-            </small>)}
-    </>
-;
-
-
-export default PredictedCategories;

package/src/components/Refine.tsx

@@ -1,28 +0,0 @@
-import { useQuery } from 'hooks/useQuery';
-import { isEmpty } from 'lodash';
-import React, { memo, useEffect } from 'react';
-import { connectSearchBox } from 'react-instantsearch-dom';
-import { useAppDispatch, useAppSelector } from 'Store/Store';
-
-const RefineComponent = (props: any) => {
-  const { refine } = props;
-  const stateGlobal = useAppSelector(state => state);
-  const { search } = stateGlobal;
-  const { textSearchInputMobile } = search;
-  const dispatch = useAppDispatch();
-  const query = useQuery();
-
-  useEffect(() => {
-    const searchQuery = query.get('query') || '';
-    refine(searchQuery);
-    // not an ideal solution: fixes text search not working from landing page
-    setTimeout(() => {
-      refine(searchQuery);
-    }, 100);
-  }, [query, dispatch]);
-
-  return <></>;
-};
-
-const Refine = connectSearchBox<any>(memo(RefineComponent));
-export default Refine;

package/src/components/RelevantSort.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { connectRelevantSort } from "react-instantsearch-dom";
-
-function RelevantSortComponent({ isRelevantSorted, refine }: any) {
-  return (
-    <button onClick={() => refine(isRelevantSorted ? 0 : undefined)}>
-      Show {isRelevantSorted ? "all" : "relevant"} results
-    </button>
-  );
-}
-
-export const RelevantSort = connectRelevantSort(RelevantSortComponent);

package/src/components/Result.tsx

@@ -1,210 +0,0 @@
-import React from "react";
-import { OfferNyrisResult as ResultData } from "@nyris/nyris-api";
-
-// TODO this needs refactoring: Make it one block with parameters for first line, second line, image url ..
-
-interface Options {
-  result: any;
-  noImageUrl: string;
-  onImageClick: (e: React.MouseEvent) => void;
-  onLinkClick: (e: React.MouseEvent) => void;
-}
-
-const renderPrice = (result: ResultData) =>
-  result.p ? "" + (result.p.vi / 100).toFixed(2) + " " + result.p.c : "";
-
-const renderDefault = ({
-  result,
-  noImageUrl,
-  onImageClick,
-  onLinkClick,
-}: Options) => {
-  return (
-    <>
-      <a
-        href={result.l}
-        className="imageLink"
-        title="Click the image so see similar products"
-        onClick={onImageClick}
-        onAuxClick={onLinkClick}
-      >
-        <div className="prdctImg">
-          <div className="imgWrap">
-            <img
-              src={(result.img && result.img.url + "?r=512x512") || noImageUrl}
-              alt={result.title}
-            />
-          </div>
-        </div>
-      </a>
-      <div className="prdctDetailsWrap">
-        <div>
-          <div className="prdctTitle">{result.title}</div>
-          <div className="prdctMeta">
-            <span className="prdctPrice">{renderPrice(result)}</span>
-          </div>
-          <a
-            onClick={onLinkClick}
-            onAuxClick={onLinkClick}
-            className="prdctShopLink"
-            href={result.l}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Buy Now
-          </a>
-        </div>
-      </div>
-    </>
-  );
-};
-
-const renderSnr = ({
-  result,
-  noImageUrl,
-  onImageClick,
-  onLinkClick,
-}: Options) => (
-  <>
-    <a
-      href={result.l}
-      className="imageLink"
-      onClick={onImageClick}
-      onAuxClick={onLinkClick}
-    >
-      <div className="prdctImg">
-        <div className="imgWrap">
-          <img
-            src={(result.img && result.img.url + "?r=512x512") || noImageUrl}
-            alt={result.title}
-          />
-        </div>
-      </div>
-    </a>
-    <div className="prdctDetailsWrap">
-      <div>
-        <div className="prdctTitle">{result.sku}</div>
-        <div
-          className="prdctMeta"
-          style={{ height: "5em", whiteSpace: "normal" }}
-        >
-          {result.title}
-        </div>
-        <a
-          style={{ backgroundImage: "none", paddingLeft: "10px" }}
-          className="prdctShopLink"
-          href={result.l}
-          target="_blank"
-          rel="noopener noreferrer"
-          onClick={onLinkClick}
-          onAuxClick={onLinkClick}
-        >
-          Info
-        </a>
-      </div>
-    </div>
-  </>
-);
-
-const renderSnrMultilink = (
-  { result, noImageUrl, onImageClick }: Options,
-  onLinkClick: (url: string) => void
-) => (
-  <>
-    <a
-      href={result.l}
-      className="imageLink"
-      onClick={onImageClick}
-      onAuxClick={onImageClick}
-    >
-      <div className="prdctImg">
-        <div className="imgWrap">
-          <img
-            src={(result.img && result.img.url + "?r=512x512") || noImageUrl}
-            alt={result.title}
-          />
-        </div>
-      </div>
-    </a>
-    <div className="prdctDetailsWrap">
-      <div>
-        <div className="prdctTitle">{result.sku}</div>
-        <div
-          className="prdctMeta"
-          style={{ height: "5em", whiteSpace: "normal" }}
-        >
-          {result.title}
-        </div>
-        {result.l.map((l: { text: string; href: string }) => (
-          <a
-            style={{ backgroundImage: "none", paddingLeft: "10px" }}
-            className="prdctShopLink"
-            href={l.href}
-            onClick={() => onLinkClick(l.href)}
-            onAuxClick={() => onLinkClick(l.href)}
-            target="_blank"
-            key={l.href}
-            rel="noopener noreferrer"
-          >
-            {l.text}
-          </a>
-        ))}
-      </div>
-    </div>
-  </>
-);
-
-export interface ResultProps {
-  result: any;
-  style: any;
-  template?: string;
-  onImageClick: (pos: number, url: string) => void;
-  onLinkClick: (pos: number, url: string) => void;
-  noImageUrl?: string;
-}
-
-const Result: React.FC<ResultProps> = ({
-  result,
-  style,
-  template,
-  onImageClick,
-  onLinkClick,
-  noImageUrl,
-}) => {
-  let options: Options = {
-    onImageClick: (e: React.MouseEvent) => {
-      e.preventDefault();
-      onImageClick(result.position, result.img.url);
-    },
-    onLinkClick: (e: React.MouseEvent) => {
-      e.preventDefault();
-      onLinkClick(result.position, result.l);
-    },
-    noImageUrl: noImageUrl || "images/ic_cam_large_noimage.png",
-    result,
-  };
-
-  let resultInner = null;
-  switch (template) {
-    case "snr":
-      resultInner = renderSnr(options);
-      break;
-    case "snr-multilink":
-      resultInner = renderSnrMultilink(options, (url) =>
-        onLinkClick(result.position, url)
-      );
-      break;
-    case "default":
-    default:
-      resultInner = renderDefault(options);
-      break;
-  }
-
-  return (
-    <div className="prdctItem" style={{ ...style }}>
-      {resultInner}
-    </div>
-  );
-};
-
-export default Result;

package/src/components/Saved/AllItem.tsx

@@ -1,32 +0,0 @@
-import { Grid } from "@material-ui/core";
-import ItemResult from "components/results/ItemResult";
-import React from "react";
-
-interface Props {
-  dataItem: any[];
-  isHover?: boolean
-}
-
-function AllItem(props: Props) {
-  const { dataItem } = props;
-
-  return (
-    <Grid container spacing={2}>
-      {dataItem &&
-        dataItem.map((item: any, index: any) => {
-          return (
-            <Grid item sm={3} key={index}>
-              <ItemResult
-                dataItem={item}
-                isHover={true}
-                // handlerToggleModal={handlerToggleModal}
-                // handlerToggleModalShare={() => setOpenModalShare(true)}
-              />
-            </Grid>
-          );
-        })}
-    </Grid>
-  );
-}
-
-export default AllItem;

package/src/components/Saved/Category.tsx

@@ -1,16 +0,0 @@
-import { Grid } from "@material-ui/core";
-import React from "react";
-
-interface Props {
-  nameCategory?: string;
-}
-
-function CategoryItemSaved(props: Props) {
-  return (
-    <Grid container>
-      <Grid item xs={4}></Grid>
-    </Grid>
-  );
-}
-
-export default CategoryItemSaved;

package/src/components/auto-complete/basic.tsx

@@ -1,153 +0,0 @@
-import { autocomplete } from '@algolia/autocomplete-js';
-import algoliasearch from 'algoliasearch/lite';
-import { popularSearchesPluginCreator } from 'components/autocomplete/plugins/popular-searches/popular-searches';
-import { debounce } from 'lodash';
-import React, {
-  createElement,
-  Fragment,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { render } from 'react-dom';
-import { connectSearchBox } from 'react-instantsearch-dom';
-import { useHistory } from 'react-router-dom';
-import { onResetRequestImage, updateValueTextSearchMobile } from 'Store/Search';
-import { useAppDispatch, useAppSelector } from 'Store/Store';
-import { AlgoliaSettings, AppState } from 'types';
-interface Props {
-  containerRefInputMobile?: any;
-  isiImageThumbSearchInput?: boolean;
-  isResetImage?: boolean;
-  imageThumbSearchInput?: any;
-}
-
-function AutocompleteBasicComponent(props: Props) {
-  const {
-    containerRefInputMobile,
-    refine,
-    isResetImage,
-    imageThumbSearchInput,
-  }: any = props;
-  const [refBoxFilter, setRefBoxFilter] = useState<any>(null);
-  const { settings, search } = useAppSelector<AppState>((state: any) => state);
-  const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
-  const searchClient = algoliasearch(appId, apiKey);
-  const history = useHistory();
-  const dispatch = useAppDispatch();
-  const { textSearchInputMobile } = search;
-  const panelContainerRef = useRef<HTMLDivElement>(null);
-  const [refPanelContainer, setRefPanelContainer] = useState<any>(null);
-
-  useEffect(() => {
-    if (isResetImage) {
-      dispatch(onResetRequestImage(''));
-      setTimeout(() => {
-        refine(textSearchInputMobile);
-      }, 300);
-      return;
-    }
-  }, [isResetImage, dispatch, refine, textSearchInputMobile]);
-
-  useEffect(() => {
-    if (imageThumbSearchInput !== '') {
-      dispatch(updateValueTextSearchMobile(''));
-    }
-  }, [imageThumbSearchInput, dispatch]);
-
-  useEffect(() => {
-    setRefPanelContainer(panelContainerRef);
-  }, [panelContainerRef]);
-
-  useEffect(() => {
-    setRefBoxFilter(containerRefInputMobile);
-  }, [containerRefInputMobile]);
-
-  const plugins = useMemo(
-    () => [
-      popularSearchesPluginCreator({
-        searchClient,
-        onSelect({ item }: any) {
-          dispatch(updateValueTextSearchMobile(item?.keyword));
-          refine(`${item?.keyword}`);
-          if (history.location.pathname !== '/result') {
-            history.push('/result');
-          }
-        },
-        indexName,
-        handerCloseModal() {
-          setRefPanelContainer(<div></div>);
-        },
-      }),
-    ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [searchClient],
-  );
-
-  useEffect(() => {
-    if (!refBoxFilter?.current || !refPanelContainer.current) {
-      return;
-    }
-    const autocompleteInstance = autocomplete({
-      container: refBoxFilter.current,
-      panelContainer: refPanelContainer.current,
-      panelPlacement: 'full-width',
-      renderer: { createElement, Fragment, render: () => {} },
-      initialState: {
-        query: textSearchInputMobile,
-      },
-      translations: {
-        detachedCancelButtonText: `‹`,
-        submitButtonTitle: 's',
-      },
-      placeholder: textSearchInputMobile ? textSearchInputMobile : 'Search',
-      plugins,
-      openOnFocus: true,
-      onSubmit,
-      render({ sections, components }, root) {
-        render(
-          <Fragment>
-            <div className="aa-PanelLayout aa-Panel--scollable ">
-              {sections}
-            </div>
-          </Fragment>,
-          root,
-        );
-      },
-
-      ...props,
-    });
-    return () => {
-      // Waiting for an 'unsubscribe' method on Autocomplete plugin API
-      plugins.forEach((plugin: any) => {
-        if (typeof plugin.unsubscribe === 'function') {
-          plugin.unsubscribe();
-        }
-      });
-
-      autocompleteInstance?.destroy();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [plugins, refBoxFilter, refPanelContainer, textSearchInputMobile]);
-
-  const onSubmit = ({ state }: any) => {
-    debounceSearch(state?.query);
-    dispatch(updateValueTextSearchMobile(state?.query));
-    if (history.location.pathname !== '/result') {
-      history.push('/result');
-    }
-  };
-  const debounceSearch = useCallback(
-    debounce((nextValue: any) => refine(nextValue), 200),
-    [],
-  );
-
-  return <div className="panel-container-custom" ref={panelContainerRef} />;
-}
-
-const AutocompleteBasicMobileComponent = connectSearchBox<any>(
-  AutocompleteBasicComponent,
-);
-export default AutocompleteBasicMobileComponent;

package/src/components/autocomplete/plugins/popular-searches/popular-searches.css

@@ -1,3 +0,0 @@
-.aa-ItemContentTitle {
-  @apply overflow-visible;
-}

package/src/components/autocomplete/plugins/popular-searches/popular-searches.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import type { OnSelectParams } from '@algolia/autocomplete-core';
-import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
-import type { AutocompleteQuerySuggestionsHit } from '@algolia/autocomplete-plugin-query-suggestions/dist/esm/types';
-import type { SearchClient } from 'algoliasearch/lite';
-
-type PopularSearchesPluginCreatorParams = {
-  searchClient: SearchClient;
-  onSelect?: (params: OnSelectParams<AutocompleteQuerySuggestionsHit>) => void;
-  indexName?: any;
-  handerCloseModal?: any;
-};
-
-export function popularSearchesPluginCreator({
-  searchClient,
-  onSelect: customOnSelect,
-  indexName,
-  handerCloseModal,
-}: PopularSearchesPluginCreatorParams) {
-  return createQuerySuggestionsPlugin({
-    searchClient,
-    indexName: indexName,
-    categoryAttribute: ['brand', 'keyword_0', 'custom_category'],
-    getSearchParams({ state }) {
-      return { hitsPerPage: 5 };
-    },
-    transformSource({ source, onTapAhead }) {
-      return {
-        ...source,
-        onSelect(params) {
-          if (typeof customOnSelect === 'function') {
-            customOnSelect(params);
-          }
-        },
-        templates: {
-          /*    header() {
-            return (
-              <div>
-                <span className="aa-SourceHeaderTitle">Suggested searches</span>
-              </div>
-            );
-          },*/
-          item({ item }: any) {
-            return (
-              <div className="aa-ItemWrapper d-flex">
-                {/*<div className="aa-ItemContent">
-                  <div className="aa-ItemContentBody">
-                    <div className="aa-ItemContentTitle">
-                      <Typography>{item.keyword}</Typography>
-                    </div>
-                  </div>
-                </div>*/}
-                {/*   <div className="aa-ItemActions">
-                  <button
-                    type="button"
-                    className="aa-ItemActionButton"
-                    title={`Fill query with "${item.title}"`}
-                    onClick={event => {
-                      event.preventDefault();
-                      event.stopPropagation();
-                      onTapAhead(item);
-                    }}
-                  ></button>
-                </div>*/}
-              </div>
-            );
-          },
-          noResults() {
-            return 'No products for this query.';
-          },
-        },
-      };
-    },
-  });
-}