@nyris/nyris-webapp 0.3.33 → 0.3.35

package/src/components/Layout.tsx

@@ -9,6 +9,7 @@ import { useHistory } from 'react-router-dom';
 import {
   changeValueTextSearch,
   onResetRequestImage,
+  setImageCaptureHelpModal,
   setPreFilterDropdown,
   setUpdateSession,
 } from 'Store/search/Search';
@@ -19,14 +20,21 @@ import './common.scss';
 import FooterMobile from './FooterMobile';
 import HeaderMobile from './HeaderMobile';
 import Header from './Header';
-import ExpandablePanelComponent from './PanelResult';
 import PreFilterComponent from 'components/pre-filter';
 import { createSessionByApi } from 'services/session';
+import { isUndefined } from 'lodash';
+import ImageCaptureHelpModal from './ImageCaptureHelpModal';
+import MobilePostFilter from './MobilePostFilter';
 
 function Layout({ children }: ReactNode): JSX.Element {
   const dispatch = useAppDispatch();
   const { settings, search } = useAppSelector<AppState>((state: any) => state);
-  const { valueTextSearch, loadingSearchAlgolia, preFilterDropdown } = search;
+  const {
+    valueTextSearch,
+    loadingSearchAlgolia,
+    preFilterDropdown,
+    imageCaptureHelpModal,
+  } = search;
   const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const [isOpenFilter, setOpenFilter] = useState<boolean>(false);
@@ -128,8 +136,8 @@ function Layout({ children }: ReactNode): JSX.Element {
             }}
           >
             <HeaderApp
-              onToggleFilterMobile={() => {
-                setOpenFilter(!isOpenFilter);
+              onToggleFilterMobile={(show: boolean) => {
+                setOpenFilter(isUndefined(show) ? !isOpenFilter : show);
               }}
             />
           </div>
@@ -147,9 +155,10 @@ function Layout({ children }: ReactNode): JSX.Element {
           <Box
             className={`box-fillter ${isOpenFilter ? 'open' : 'close'} `}
             position={'absolute'}
+            style={{ top: isOpenFilter ? '0px' : '', height: '100%' }}
           >
-            <ExpandablePanelComponent
-              onToogleApplyFillter={() => {
+            <MobilePostFilter
+              onApply={() => {
                 setOpenFilter(!isOpenFilter);
               }}
             />
@@ -159,13 +168,13 @@ function Layout({ children }: ReactNode): JSX.Element {
           <Box
             className={`box-fillter open`}
             position={'absolute'}
-            style={{ top: '97px' }}
+            style={{ top: '0px', height: '100%' }}
           >
             <div
               style={{ width: !isMobile ? '90%' : '100%' }}
-              className={'wrap-filter-destop'}
+              className={'wrap-filter-desktop'}
             >
-              <div className={'bg-white box-filter-destop isMobile'}>
+              <div className={'bg-white box-filter-desktop isMobile'}>
                 <PreFilterComponent
                   handleClose={() =>
                     dispatch(setPreFilterDropdown(!preFilterDropdown))
@@ -175,6 +184,27 @@ function Layout({ children }: ReactNode): JSX.Element {
             </div>
           </Box>
         )}
+
+        {isMobile && imageCaptureHelpModal && (
+          <Box
+            className={`box-fillter open`}
+            position={'absolute'}
+            style={{ top: '0px', height: 'calc(100% - 64px)' }}
+          >
+            <div
+              style={{ width: !isMobile ? '90%' : '100%' }}
+              className={'wrap-filter-desktop'}
+            >
+              <div className={'bg-white box-filter-desktop isMobile'}>
+                <ImageCaptureHelpModal
+                  handleClose={() =>
+                    dispatch(setImageCaptureHelpModal(!imageCaptureHelpModal))
+                  }
+                />
+              </div>
+            </div>
+          </Box>
+        )}
       </InstantSearch>
     </Box>
   );

package/src/components/MobilePostFilter.tsx

@@ -0,0 +1,20 @@
+import React, { memo } from 'react';
+import ExpandablePanelComponent from 'components/PanelResult';
+
+import { connectStateResults } from 'react-instantsearch-dom';
+
+interface Props {
+  allSearchResults: any;
+  onApply: any;
+}
+
+function MobilePostFilter(props: Props) {
+  return (
+    <ExpandablePanelComponent
+      disjunctiveFacets={props?.allSearchResults?.disjunctiveFacets}
+      onApply={props.onApply}
+    />
+  );
+}
+
+export default connectStateResults<Props>(memo(MobilePostFilter));

package/src/components/PanelResult/expandable-panel.tsx

@@ -1,19 +1,19 @@
-import { Box, Button, Typography } from "@material-ui/core";
-import AddIcon from "@material-ui/icons/Add";
-import RemoveIcon from "@material-ui/icons/Remove";
-import classNames from "classnames";
-import { Collapse } from "components/collapse/collapse";
-import { useAtomValue } from "jotai/utils";
-import type { MouseEventHandler } from "react";
-import React, { memo } from "react";
+import { Box, Button, Typography } from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
+import RemoveIcon from '@material-ui/icons/Remove';
+import classNames from 'classnames';
+import { Collapse } from 'components/collapse/collapse';
+import { useAtomValue } from 'jotai/utils';
+import type { MouseEventHandler } from 'react';
+import React, { memo } from 'react';
 import type {
   CurrentRefinementsProvided,
   SearchResults,
-} from "react-instantsearch-core";
-import { connectCurrentRefinements } from "react-instantsearch-dom";
-import { useMediaQuery } from "react-responsive";
-import { useHasRefinements } from ".";
-import { searchResultsAtom } from "./virtual-state-results";
+} from 'react-instantsearch-core';
+import { connectCurrentRefinements } from 'react-instantsearch-dom';
+import { useMediaQuery } from 'react-responsive';
+import { useHasRefinements } from '.';
+import { searchResultsAtom } from './virtual-state-results';
 
 export type ExpandablePanelProps = CurrentRefinementsProvided & {
   children: React.ReactNode;
@@ -36,25 +36,25 @@ function ExpandablePanelComponent({
 }: ExpandablePanelProps) {
   const searchResults = useAtomValue(searchResultsAtom) as SearchResults;
   const hasRefinements = useHasRefinements(searchResults, attributes);
-  const isMobile = useMediaQuery({ query: "(max-width: 776px)" });
+  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
 
   return (
     <Box>
       <div
         className={classNames(
-          "border-neutral-light",
+          'border-neutral-light',
           {
             hidden: !hasRefinements,
           },
-          className
+          className,
         )}
       >
         <Button
           className="w-full flex items-center justify-between group"
           aria-expanded={isOpened}
           style={{ paddingLeft: 0 }}
-          onClick={(e) => {
-            if (typeof onToggle === "function") {
+          onClick={e => {
+            if (typeof onToggle === 'function') {
               onToggle(e);
             }
           }}
@@ -63,8 +63,8 @@ function ExpandablePanelComponent({
             <Typography
               className="fw-700"
               style={{
-                textTransform: "none",
-                fontFamily: "Montserrat !important",
+                textTransform: 'none',
+                fontFamily: 'Montserrat !important',
                 fontSize: 14,
               }}
             >
@@ -87,5 +87,5 @@ function ExpandablePanelComponent({
 }
 
 export const ExpandablePanelCustom = connectCurrentRefinements<any>(
-  memo(ExpandablePanelComponent)
+  memo(ExpandablePanelComponent),
 );

package/src/components/PanelResult/index.tsx

@@ -1,9 +1,7 @@
 import { Box, Button } from '@material-ui/core';
-import { ClearRefinements } from 'components/clear-refinements/clear-refinements';
 import { DynamicWidgetsCT } from 'components/dynamic-widgets/dynamic-widgets';
 import IconLabel from 'components/icon-label/icon-label';
 import { atom, useAtom } from 'jotai';
-import { orderBy } from 'lodash';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import type {
   CurrentRefinementsProvided,
@@ -15,6 +13,7 @@ import { useHistory } from 'react-router-dom';
 import { useAppSelector } from 'Store/Store';
 import { ExpandablePanelCustom } from './expandable-panel';
 import { getPanelAttributes, getPanelId } from './refinements';
+import CloseIcon from '@material-ui/icons/Close';
 
 export type ExpandablePanelProps = CurrentRefinementsProvided & {
   children: React.ReactNode;
@@ -92,7 +91,8 @@ function WidgetPanel({ children, onToggle, panelId, ...props }: any) {
 
 export default function ExpandablePanelComponent({
   dynamicWidgets = true,
-  onToogleApplyFillter,
+  onApply,
+  disjunctiveFacets,
 }: any) {
   const stateGlobal = useAppSelector(state => state);
   const { settings } = stateGlobal;
@@ -103,6 +103,7 @@ export default function ExpandablePanelComponent({
   );
   const history = useHistory();
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+
   // Set initial panels value
   useEffect(() => {
     setPanels(prevPanels => ({
@@ -142,7 +143,7 @@ export default function ExpandablePanelComponent({
               noResults: 'No results',
               placeholder: '',
             }}
-            transformItems={(items: any) => orderBy(items, 'label', 'asc')}
+            sortBy={['isRefined:desc', 'name:asc']}
           />
         );
       }),
@@ -179,7 +180,7 @@ export default function ExpandablePanelComponent({
   }, [setRefinementsPanelsExpanded]);
 
   const handlerApplyfillter = () => {
-    onToogleApplyFillter();
+    onApply();
     if (history.location.pathname !== '/result') {
       history.push('/result');
     }
@@ -187,8 +188,8 @@ export default function ExpandablePanelComponent({
 
   return (
     <>
-      <div className="wrap-main-header-panel">
-        {!isMobile && (
+      {!isMobile && (
+        <div className="wrap-main-header-panel">
           <Box style={{ borderBottom: '1px solid #E0E0E0' }}>
             <Button
               className="text-neutral-darkest"
@@ -203,26 +204,58 @@ export default function ExpandablePanelComponent({
               />
             </Button>
           </Box>
+        </div>
+      )}
+      <Box>
+        {isMobile && (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              position: 'sticky',
+              top: '0px',
+              zIndex: 100,
+              background: 'white',
+              alignItems: 'center',
+              paddingTop: '10px',
+              paddingRight: '10px',
+            }}
+          >
+            <Button onClick={onApply}>
+              <CloseIcon />
+            </Button>
+          </div>
         )}
-      </div>
-      {isMobile && (
-        <Box className="box-top-filter" style={{ paddingBottom: 10 }}>
-          <ClearRefinements>Reset Filters</ClearRefinements>
+        <Box
+          className="box-center-filter"
+          style={{
+            ...(isMobile
+              ? {
+                  paddingLeft: '24px',
+                  paddingRight: '24px',
+                  overflow: 'auto',
+                }
+              : {}),
+          }}
+        >
+          <DynamicWidgetsCT enabled={dynamicWidgets}>
+            {widgetsPanels}
+          </DynamicWidgetsCT>
         </Box>
-      )}
-      <Box className="box-center-filter">
-        <DynamicWidgetsCT enabled={dynamicWidgets}>
-          {widgetsPanels}
-        </DynamicWidgetsCT>
       </Box>
-
       {isMobile && (
-        <Box className="box-footer-filter">
+        <Box
+          style={{
+            position: 'sticky',
+            bottom: 0,
+            width: '100%',
+          }}
+        >
           <Button
             className="text-white"
             style={{
               width: '100%',
-              backgroundColor: settings.theme?.secondaryColor,
+              backgroundColor: settings.theme?.primaryColor,
               fontWeight: 700,
               fontSize: 14,
               borderRadius: 0,

package/src/components/ProductList/index.tsx

@@ -25,7 +25,7 @@ function ProductListComponent({
   requestImage,
   isSearchStalled,
 }: any): JSX.Element {
-  const { search } = useAppSelector<AppState>((state: any) => state);
+  const { search, settings } = useAppSelector<AppState>((state: any) => state);
   const { loadingSearchAlgolia } = search;
   const [hitGroups, setHitGroups] = useState<any>({});
   const [itemShowDefault, setItemShowDefault] = useState<any[]>([]);
@@ -43,7 +43,9 @@ function ProductListComponent({
       return;
     }
     setAlgoliaRequest(false);
-    const listHistDefaultGroups = setListHitDefault(allSearchResults?.hits);
+    const listHistDefaultGroups = settings.showGroup
+      ? setListHitDefault(allSearchResults?.hits)
+      : allSearchResults?.hits;
     setItemShowDefault(listHistDefaultGroups);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [allSearchResults?.hits, search?.valueTextSearch]);
@@ -149,7 +151,7 @@ function ProductListComponent({
             handlerCloseGroup={(hitItem: any, index: number) =>
               handlerCloseGroup(hitItem, index)
             }
-            isGroupItem={hit?.isGroup}
+            isGroupItem={settings.showGroup ? hit?.isGroup : false}
             moreInfoText={moreInfoText}
             main_image_link={
               hit['image(main_similarity)'] || hit['main_image_link']

package/src/components/appMobile.scss

@@ -12,12 +12,11 @@
 }
 
 .layout-main-mobile {
-  display: none;
+  height: 100%;
   @media screen and (max-width: 776px) {
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     width: 100%;
     // height: calc(100vh);
     background-color: #fafafa;
@@ -37,10 +36,15 @@
       }
 
       .wrap-header-mobile {
+
+        background: #FFFFFF;
+        border-bottom: 1px solid #E9E9EC;
+        box-shadow: 0px 0px 16px rgba(170, 171, 181, 0.5);
+        border-radius: 32px;
+
         width: 100%;
         position: relative;
-        padding: 7px 0px;
-        border-bottom: 1px solid #e9e9ec;
+        height: 48px;;
 
         .box-suggest-search {
           position: absolute;
@@ -109,16 +113,12 @@
       }
     }
     .box-body-mobile-wrap-main {
-      position: fixed;
-      bottom: 64px;
-      top: 0;
-      scroll-padding-top: 110px;
-      height: calc(100% - 52px);
       display: flex;
       width: 100%;
-      overflow-y: auto;
       background-color: #fafafa;
-
+      flex-grow: 1;
+      overflow-y: auto;
+      margin-bottom: 50px;
       .wrap-content-body {
         margin-top: auto;
         height: 336px;
@@ -284,7 +284,7 @@
     .footer-wrap-main {
       position: fixed;
       bottom: 0;
-      height: 52px;
+      height: 64px;
       flex: 1 1 auto;
       width: 100%;
       padding: 0;
@@ -297,7 +297,7 @@
 
       .box-icon-camera-mobile {
         z-index: 10;
-        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
+        box-shadow: 0px 0px 16px rgba(85, 86, 107, 0.2);
         border-radius: 100%;
         position: absolute;
         left: 0;
@@ -305,14 +305,14 @@
         width: fit-content;
         margin: auto;
         top: -50%;
-        width: 64px;
-        height: 64px;
-
+        width: 56px;
+        height: 56px;
+        background-color: #FFFFFF;
         button {
           border: 0px !important;
-          padding: 21px 18px;
-          width: 64px;
-          height: 64px;
+          padding: 17px 14px;
+          width: 56px;
+          height: 56px;
         }
       }
     }
@@ -330,9 +330,11 @@
       width: 100%;
       height: calc(100% - 47px);
       background-color: #fff;
-      padding: 10px 24px 24px 24px;
       overflow: auto;
       opacity: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
 
       ul {
         li {
@@ -351,7 +353,7 @@
       }
 
       &.open {
-        z-index: 100;
+        z-index: 1000;
       }
 
       &.close {
@@ -385,11 +387,7 @@
       }
     }
 
-    .box-center-filter {
-      height: 100%;
-      overflow: auto;
-      padding: 0 24px;
-    }
+    
   }
   .aa-DetachedContainer {
     bottom: auto;
@@ -480,18 +478,16 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      padding-right: 20px;
 
       button {
         background-color: #f7f7f7;
         border-radius: 100%;
-        width: 40px;
-        height: 40px;
+        width: 32px;
+        height: 32px;
       }
     }
 
     .btn-close-header {
-      padding-right: 10px;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -686,8 +682,8 @@
   }
 
   .box-footer-mobile {
-    border-top: 1px solid lightgray;
-    background-color: #fff;
+    border-top: 1px solid #CACAD1;
+    background-color: #F3F3F5;
   }
 
   .box-modal-default {
@@ -712,3 +708,39 @@
     }
   }
 }
+.pre-filter-icon {
+  display: flex;
+  min-width: 48px;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  border-right: 1px solid rgb(224, 224, 224);
+  background: rgb(250, 250, 250);
+  border-top-left-radius: 32px;
+  border-bottom-left-radius: 32px;
+
+}
+.take-photo {
+  border-radius: 100%;
+  padding: 3px;
+  background:  linear-gradient(360deg, #E9E9EC 0%, #FFFFFF 44.79%, #AAABB5 100%);
+  .take-photo-wrapper {    
+    border-radius: 100%;
+    padding: 30px;  
+    .outer {
+      border-radius: 100%;
+      padding: 3px;
+      background: linear-gradient(180deg, #AAABB5 0%, #FFFFFF 100%);
+      box-shadow: -2px 10px 24px rgba(43, 44, 70, 0.6);
+    }
+    .inner {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 192px;
+      height: 192px;
+      border-radius: 100%;
+      background: linear-gradient(180deg, #FFFFFF 30.73%, #C5C5C5 100%);
+    }
+  }
+}

package/src/components/carousel/ImagePreviewCarousel.tsx

@@ -12,7 +12,7 @@ interface Props {
 }
 
 export const ImagePreviewCarousel = (props: Props) => {
-  let { imgItem, onSearchImage, handlerCloseModal } = props;
+  let { imgItem } = props;
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const mainRef: any = useRef(null);
   const thumbsRef: any = useRef(null);
@@ -25,7 +25,7 @@ export const ImagePreviewCarousel = (props: Props) => {
 
   const mainOptions: Options = useMemo(
     () => ({
-      type: 'loop',
+      type: 'slide',
       perPage: 1,
       perMove: 1,
       gap: '1rem',
@@ -60,12 +60,6 @@ export const ImagePreviewCarousel = (props: Props) => {
           style={{ objectFit: 'contain', minHeight: '400px' }}
           alt="preview"
           src={slide.url}
-          onClick={() => {
-            if (!thumbs) {
-              handlerCloseModal();
-              onSearchImage(slide.url);
-            }
-          }}
         />
       </SplideSlide>
     ));

package/src/components/drawer/cameraCustom.tsx

@@ -167,32 +167,13 @@ function CameraCustom(props: Props) {
           <button
             className="btn-close-modal right"
             style={{
-              backgroundColor: settings.theme?.primaryColor,
+              backgroundColor: '#666666',
             }}
             onClick={handlerCloseModal}
           >
             <CloseIcon style={{ fontSize: 20, color: '#fff' }} />
           </button>
-          <button
-            className="btn-close-modal left"
-            style={{
-              backgroundColor: settings.theme?.primaryColor,
-            }}
-            onClick={handlerCloseModal}
-          >
-            <svg
-              width="18"
-              height="10"
-              viewBox="0 0 18 10"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9 9.5L0 1.60526L1.26 0.5L9 7.28947L16.74 0.5L18 1.60526L9 9.5Z"
-                fill="white"
-              />
-            </svg>
-          </button>
+
           <div
             style={{
               display: 'flex',
@@ -258,10 +239,8 @@ function CameraCustom(props: Props) {
             <button
               className={`${scaleCamera === 1 && 'active'}`}
               style={{
-                backgroundColor:
-                  scaleCamera === 1 && 'active'
-                    ? settings.theme?.primaryColor
-                    : '',
+                backgroundColor: scaleCamera === 1 && 'active' ? 'white' : '',
+                color: scaleCamera === 1 && 'active' ? 'black' : 'white',
               }}
               onClick={() => setScaleCamera(1)}
             >
@@ -270,10 +249,8 @@ function CameraCustom(props: Props) {
             <button
               className={`${scaleCamera === 1.5 && 'active'}`}
               style={{
-                backgroundColor:
-                  scaleCamera === 1.5 && 'active'
-                    ? settings.theme?.primaryColor
-                    : '',
+                backgroundColor: scaleCamera === 1.5 && 'active' ? 'white' : '',
+                color: scaleCamera === 1.5 && 'active' ? 'black' : 'white',
               }}
               onClick={() => setScaleCamera(1.5)}
             >
@@ -282,10 +259,8 @@ function CameraCustom(props: Props) {
             <button
               className={`${scaleCamera === 2 && 'active'}`}
               style={{
-                backgroundColor:
-                  scaleCamera === 2 && 'active'
-                    ? settings.theme?.primaryColor
-                    : '',
+                backgroundColor: scaleCamera === 2 && 'active' ? 'white' : '',
+                color: scaleCamera === 2 && 'active' ? 'black' : 'white',
               }}
               onClick={() => setScaleCamera(2)}
             >