@nyris/nyris-webapp 0.3.22 → 0.3.24

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.';
-          },
-        },
-      };
-    },
-  });
-}

package/src/components/button/clear-fillter.tsx

@@ -1,30 +0,0 @@
-import { Button } from "@material-ui/core";
-import { ClearRefinementsProps } from "components/clear-refinements/clear-refinements";
-import React, { memo, useCallback } from "react";
-import { connectCurrentRefinements } from "react-instantsearch-dom";
-
-interface Props {}
-
-function ClearFillter({
-  children,
-  type = "native",
-  className,
-  items,
-  refine,
-}: ClearRefinementsProps) {
-  
-  const handleButtonClick = useCallback(() => refine(items), [refine, items]);
-  return (
-    <Button
-      type={type}
-      disabled={!items.length}
-      className={className}
-      onClick={handleButtonClick}
-    >
-      {children}
-    </Button>
-  );
-}
-export const ClearRefinements = connectCurrentRefinements<any>(
-  memo(ClearFillter)
-);

package/src/components/camera/screenshot.tsx

@@ -1,33 +0,0 @@
-import React, { useEffect } from "react";
-import Webcam from "react-webcam";
-
-const WebcamCapture = () => {
-  const webcamRef: any = React.useRef(null);
-  const [imgSrc, setImgSrc] = React.useState(null);
-  const videoConstraints = {
-    width: { min: 480 },
-    height: { min: 720 },
-    aspectRatio: 0.6666666667
-  };
-
-  const capture = React.useCallback(() => {
-    const imageSrc = webcamRef.current.getScreenshot();
-    setImgSrc(imageSrc);
-  }, [webcamRef, setImgSrc]);
-
-  return (
-    <>
-      <Webcam
-        audio={false}
-        ref={webcamRef}
-        screenshotFormat="image/jpeg"
-        // videoConstraints={videoConstraints}
-        videoConstraints={videoConstraints}
-        
-      />
-      <button onClick={capture}>Capture photo</button>
-      {imgSrc && <img src={imgSrc} />}
-    </>
-  );
-};
-export default WebcamCapture;

package/src/components/count/count.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-export type CountProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
-export function Count({ children, className }: CountProps) {
-  return (
-    <div
-      className={classNames(
-        "bg-neutral-light text-brand-black w-5 h-5 small-bold rounded-full flex items-center justify-center",
-        className
-      )}
-    >
-      {children}
-    </div>
-  );
-}

package/src/components/hitItem/hits.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-import { Hit as AlgoliaHit } from "@algolia/client-search";
-import { useHits, UseHitsProps } from "react-instantsearch-hooks";
-import { useAppDispatch } from "Store/Store";
-import { useEffect } from "react";
-import { resultSearchText } from "Store/Search";
-import { useState } from "react";
-import { CircularProgress } from "@material-ui/core";
-
-export type HitsProps<THit> = React.ComponentProps<"div"> &
-  UseHitsProps & {
-    hitComponent: (props: { hit: THit }) => JSX.Element;
-  };
-
-export function Hits<THit extends AlgoliaHit<Record<string, unknown>>>({
-  hitComponent: Hit,
-  ...props
-}: HitsProps<THit>) {
-  
-  const { hits } = useHits(props);
-  const dispatch = useAppDispatch();
-  const [isLoading, setLoading] = useState<boolean>(false);
-
-  useEffect(() => {
-    setLoading(true);
-    setTimeout(() => {
-      setLoading(false);
-    }, 1000);
-  }, []);
-
-  useEffect(() => {
-    if (hits?.length > 0) {
-      dispatch(resultSearchText(hits));
-    }
-  }, []);
-
-  return (
-    <>
-      {isLoading ? (
-        <CircularProgress />
-      ) : (
-        <>
-          {hits.map((hit: any, index: any) => (
-            <Hit key={index} hit={hit as unknown as THit} />
-          ))}
-        </>
-      )}
-    </>
-  );
-}

package/src/components/hitItem/infinitiHits.tsx

@@ -1,33 +0,0 @@
-import { Grid } from "@material-ui/core";
-import ItemResult from "components/results/ItemResult";
-import React from "react";
-import {
-  useInfiniteHits,
-  UseInfiniteHitsProps,
-} from "react-instantsearch-hooks";
-
-function InfiniteHits(props: any) {
-  const { hits, isLastPage, showMore } = useInfiniteHits(props);
-  console.log("props", useInfiniteHits(props));
-
-  return (
-    <>
-      {hits.map((hit: any, index: any) => {
-        return (
-          <Grid item xs={3}>
-            <ItemResult
-              dataItem={hit?.hit}
-              // handlerToggleModal={() => {
-              //   handlerToggleModal(hit?.hit);
-              // }}
-              // handlerToggleModalShare={() => setOpenModalShare(true)}
-              // indexItem={hit.__position}
-            />
-          </Grid>
-        );
-      })}
-    </>
-  );
-}
-
-export default InfiniteHits;

package/src/components/icon/icon.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-
-export type IconProps = {
-  icon: any
-  className?: string
-}
-
-export function Icon({
-  icon: IconCmp = null,
-  className = 'w-6 h-6',
-}: IconProps) {
-  return <IconCmp className={className} />
-}

package/src/components/icon_textArea.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.14286 0H9.85714V0.857143H2.14286V0ZM9.85714 2.14286H2.14286V3H9.85714V2.14286ZM2.14286 4.28571H9.85714V5.14286H2.14286V4.28571ZM11.1429 9.42857H0.857143C0.629888 9.42833 0.412008 9.33795 0.251315 9.17726C0.0906207 9.01656 0.000238243 8.79868 0 8.57143V6.42857H0.857143V8.57143H11.1429V6.42857H12V8.57143C11.9998 8.79868 11.9094 9.01656 11.7487 9.17726C11.588 9.33795 11.3701 9.42833 11.1429 9.42857ZM9.85714 6.42857H2.14286V7.28571H9.85714V6.42857Z" fill="#55566B"/>
-</svg>