@nyris/nyris-webapp 0.2.6 → 0.3.3

package/src/components/Panigation/Pagination.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { usePagination, UsePaginationProps } from 'react-instantsearch-hooks';
+import { cx } from './cx';
+import { isModifierClick } from './isModifierClick';
+
+export type PaginationProps = React.ComponentProps<'div'> & UsePaginationProps;
+
+export function PaginationComponent(props: PaginationProps) {
+  const {
+    refine,
+    createURL,
+    pages,
+    currentRefinement,
+    isFirstPage,
+    isLastPage,
+    nbPages,
+    canRefine,
+  } = usePagination(props);
+
+  return (
+    <div
+      className={cx(
+        'ais-Pagination',
+        canRefine === false && 'ais-Pagination--noRefinement',
+        props.className
+      )}
+    >
+      <ul className="ais-Pagination-list">
+        <PaginationItem
+          aria-label="First"
+          value={0}
+          isDisabled={isFirstPage}
+          createURL={createURL}
+          refine={refine}
+          className={cx(
+            'ais-Pagination-item',
+            'ais-Pagination-item--firstPage'
+          )}
+        >
+          ‹‹
+        </PaginationItem>
+
+        <PaginationItem
+          aria-label="Previous"
+          value={currentRefinement - 1}
+          isDisabled={isFirstPage}
+          createURL={createURL}
+          refine={refine}
+          className={cx(
+            'ais-Pagination-item',
+            'ais-Pagination-item--previousPage'
+          )}
+        >
+          ‹
+        </PaginationItem>
+
+        {pages.map((page) => (
+          <PaginationItem
+            key={page}
+            aria-label={String(page)}
+            value={page}
+            isDisabled={false}
+            createURL={createURL}
+            refine={refine}
+            className={cx(
+              'ais-Pagination-item',
+              page === currentRefinement && 'ais-Pagination-item--selected'
+            )}
+          >
+            {page + 1}
+          </PaginationItem>
+        ))}
+
+        <PaginationItem
+          aria-label="Next"
+          value={currentRefinement + 1}
+          isDisabled={isLastPage}
+          createURL={createURL}
+          refine={refine}
+          className={cx('ais-Pagination-item', 'ais-Pagination-item--nextPage')}
+        >
+          ›
+        </PaginationItem>
+
+        <PaginationItem
+          aria-label="Last"
+          value={nbPages - 1}
+          isDisabled={isLastPage}
+          createURL={createURL}
+          refine={refine}
+          className={cx('ais-Pagination-item', 'ais-Pagination-item--lastPage')}
+        >
+          ››
+        </PaginationItem>
+      </ul>
+    </div>
+  );
+}
+
+type PaginationItemProps = React.ComponentProps<'a'> &
+  Pick<ReturnType<typeof usePagination>, 'refine' | 'createURL'> & {
+    isDisabled: boolean;
+    value: number;
+  };
+
+function PaginationItem(props: PaginationItemProps) {
+  const { isDisabled, className, href, value, createURL, refine, ...rest } =
+    props;
+
+  if (isDisabled) {
+    return (
+      <li className={cx(className, 'ais-Pagination-item--disabled')}>
+        <span className="ais-Pagination-link" {...rest} />
+      </li>
+    );
+  }
+
+  return (
+    <li className={className}>
+      <a
+        className="ais-Pagination-link"
+        href={createURL(value)}
+        onClick={(event) => {
+          // We let the browser handle the native event when the click is modified
+          // (with a special mouse event or with a combination key) for accessibility
+          // purposes. For example, clicking the link while holding the Control
+          // key opens the next search state link in a new tab, but doesn't refine
+          // the search state in the current tab.
+          if (isModifierClick(event)) {
+            return;
+          }
+
+          event.preventDefault();
+          refine(value);
+        }}
+        {...rest}
+      />
+    </li>
+  );
+}

package/src/components/Panigation/cx.js

@@ -0,0 +1,3 @@
+export function cx(...classNames) {
+  return classNames.filter(Boolean).join(' ');
+}

package/src/components/Panigation/isModifierClick.js

@@ -0,0 +1,10 @@
+export function isModifierClick(event) {
+  const isMiddleClick = event.button === 1;
+  return Boolean(
+      isMiddleClick ||
+      event.altKey ||
+      event.ctrlKey ||
+      event.metaKey ||
+      event.shiftKey
+  );
+}

package/src/components/Result.tsx

@@ -1,137 +1,210 @@
-import React from 'react';
-import {OfferNyrisResult as ResultData} from "@nyris/nyris-api";
+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
+  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 : '';
+  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) => (
+const renderDefault = ({
+  result,
+  noImageUrl,
+  onImageClick,
+  onLinkClick,
+}: Options) => {
+  return (
     <>
-        <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>
+      <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 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>
+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 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>
+    </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
+  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
-    };
+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;
-    }
+  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>
-    );
+  return (
+    <div className="prdctItem" style={{ ...style }}>
+      {resultInner}
+    </div>
+  );
 };
 
-
 export default Result;

package/src/components/Saved/AllItem.tsx

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

@@ -0,0 +1,16 @@
+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/carousel/DefaultCarousel.tsx

@@ -0,0 +1,48 @@
+import { Box, Button } from "@material-ui/core";
+import React from "react";
+import { Carousel } from "react-responsive-carousel";
+import ChevronRightOutlinedIcon from "@material-ui/icons/ChevronRightOutlined";
+import ChevronLeftOutlinedIcon from "@material-ui/icons/ChevronLeftOutlined";
+interface Props {
+  imgItem: any[];
+}
+
+function DefaultCarousel(props: Props) {
+  const { imgItem } = props;
+  console.log("imgItem", imgItem);
+
+  return (
+    <Carousel
+      showThumbs={false}
+      infiniteLoop={false}
+      showStatus={false}
+      className={imgItem.length > 1 ? "" : "hide-btn-arrow"}
+      renderArrowNext={(onClickHandler, hasPrev, label) => (
+        <Button onClick={onClickHandler} className="btn-carousel-right">
+          <ChevronRightOutlinedIcon
+            className="icon-ct"
+            style={{ color: "#55566B" }}
+          />
+        </Button>
+      )}
+      renderArrowPrev={(onClickHandler, hasPrev, label) => (
+        <Button onClick={onClickHandler} className="btn-carousel-left">
+          <ChevronLeftOutlinedIcon
+            className="icon-ct"
+            style={{ color: "#55566B" }}
+          />
+        </Button>
+      )}
+    >
+      {imgItem?.map((item: any, index: any) => {
+        return (
+          <Box key={index} style={{height: '100%'}}>
+            <img style={{height: '100%'}} src={imgItem ? item?.url : ""} alt="image_product" />
+          </Box>
+        );
+      })}
+    </Carousel>
+  );
+}
+
+export default DefaultCarousel;

package/src/components/common.d.ts

@@ -0,0 +1,9 @@
+type ReactNode =
+  | ReactChild
+  | ReactFragment
+  | ReactPortal
+  | boolean
+  | null
+  | undefined;
+
+export { ReactNode };

package/src/components/common.scss

@@ -0,0 +1,54 @@
+.layout-main-newVersion {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  .box-header-newVersion-main {
+    height: 32px;
+    background: #2b2c46;
+    .box-content {
+      max-width: 1280px;
+      margin: auto;
+      height: 100%;
+      justify-content: space-between;
+      align-items: center;
+      .nav-menu {
+        width: auto;
+        color: #fff;
+        font-family: "Montserrat";
+        font-weight: bold;
+        height: 100%;
+        a {
+          display: flex;
+          align-items: center;
+          height: 100%;
+          padding: 0 10px;
+          &.active {
+            background: #322bb0;
+          }
+        }
+
+        span {
+          color: #fff;
+          font-size: 11px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          img {
+            margin-left: 12px;
+          }
+        }
+        .item-nav {
+          &:last-child {
+            margin-right: 0px;
+          }
+        }
+      }
+    }
+  }
+  .box-body-newVersion-wrap-main {
+    height: calc(100% - 32px);
+    // overflow: auto;
+  }
+}