@nyris/nyris-webapp 0.3.57 → 0.3.59

package/src/components/MobileLayout.tsx

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+
+import { useHistory } from 'react-router-dom';
+
+import HeaderMobile from './HeaderMobile';
+
+function AppMobile({ children }: { children: ReactNode }) {
+  const history = useHistory();
+
+  return (
+    <>
+      <div className="wrap-mobile">
+        <div className="box-header-mobile-main">
+          <HeaderMobile />
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            flexGrow: 1,
+            flexDirection: 'column',
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            height: '100%',
+            backgroundColor: '#fff',
+          }}
+        >
+          {children}
+        </div>
+        {history.location?.pathname === '/' && (
+          <footer className="h-11 w-full flex justify-center items-center bg-white">
+            <a
+              href={'https://www.nyris.io'}
+              target="_blank"
+              rel="noreferrer"
+              className="text-[#AAABB5] md:text-[#2B2C46]"
+            >
+              <p className="text-xs font-normal text-[#AAABB5] inline">
+                Powered by
+              </p>
+              <p className="text-xs font-bold text-[#AAABB5] inline pl-0.5">
+                nyris®
+              </p>
+            </a>
+          </footer>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default AppMobile;

package/src/components/MobilePostFilter.tsx

@@ -9,19 +9,25 @@ import { useAppSelector } from 'Store/Store';
 interface Props {
   allSearchResults: any;
   onApply: any;
+  isOpenFilter: boolean;
 }
 
 function MobilePostFilter(props: Props) {
   const settings = useAppSelector(state => state.settings);
+  const { isOpenFilter, allSearchResults, onApply } = props;
+
   return (
     <>
       {settings.algolia.enabled && (
         <PostFilterPanelAlgolia
-          disjunctiveFacets={props?.allSearchResults?.disjunctiveFacets}
-          onApply={props.onApply}
+          disjunctiveFacets={allSearchResults?.disjunctiveFacets}
+          onApply={onApply}
         />
       )}
-      {!settings.algolia.enabled && <PostFilterPanel onApply={props.onApply} />}
+
+      {!settings.algolia.enabled && isOpenFilter && (
+        <PostFilterPanel onApply={onApply} />
+      )}
     </>
   );
 }

package/src/components/PanelResult/PostFilterAlgolia.tsx

@@ -3,10 +3,7 @@ import { DynamicWidgetsCT } from 'components/dynamic-widgets/dynamic-widgets';
 import IconLabel from 'components/icon-label/icon-label';
 import { atom, useAtom } from 'jotai';
 import React, { useCallback, useEffect, useMemo } from 'react';
-import type {
-  CurrentRefinementsProvided,
-  SearchResults,
-} from 'react-instantsearch-core';
+import type { CurrentRefinementsProvided } from 'react-instantsearch-core';
 import { RefinementList } from 'react-instantsearch-dom';
 import { useMediaQuery } from 'react-responsive';
 import { useHistory } from 'react-router-dom';
@@ -30,33 +27,6 @@ export type Panels = {
   [key: string]: boolean;
 };
 
-export function useHasRefinements(
-  searchResults: SearchResults,
-  attributes: string[] = [],
-) {
-  const facets = useMemo(() => {
-    const disjunctiveFacets = searchResults?.disjunctiveFacets || [];
-    const hierarchicalFacets = searchResults?.hierarchicalFacets || [];
-    return [...disjunctiveFacets, ...hierarchicalFacets];
-  }, [searchResults]);
-
-  const hasRefinements = useMemo(() => {
-    let found = !attributes.length;
-
-    facets.forEach(facet => {
-      attributes?.forEach(attribute => {
-        if (facet.name === attribute && facet.data) {
-          found = true;
-        }
-      });
-    });
-
-    return found;
-  }, [facets, attributes]);
-
-  return hasRefinements;
-}
-
 function togglePanels(panels: Panels, val: boolean) {
   return Object.keys(panels).reduce(
     (acc, panelKey) => ({ ...acc, [panelKey]: val }),
@@ -229,7 +199,9 @@ export default function PostFilterPanelAlgolia({
             }}
           >
             <Button
-              onClick={onApply}
+              onClick={() => {
+                onApply();
+              }}
               style={{
                 width: '32px',
                 height: '32px',

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

@@ -1,19 +1,13 @@
 import { Button } from '@material-ui/core';
 import { ReactComponent as RemoveIcon } from 'common/assets/icons/minus.svg';
-import { ReactComponent as AddIcon } from 'common/assets/icons/add.svg';
+import { ReactComponent as AddIcon } from 'common/assets/icons/add-rounded.svg';
 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 type { CurrentRefinementsProvided } from 'react-instantsearch-core';
 import { connectCurrentRefinements } from 'react-instantsearch-dom';
 import { useMediaQuery } from 'react-responsive';
-import { useHasRefinements } from './PostFilterAlgolia';
-import { searchResultsAtom } from './virtual-state-results';
 
 export type ExpandablePanelProps = CurrentRefinementsProvided & {
   children: React.ReactNode;
@@ -34,19 +28,12 @@ function ExpandablePanelComponent({
   items,
   onToggle,
 }: ExpandablePanelProps) {
-  const searchResults = useAtomValue(searchResultsAtom) as SearchResults;
-  const hasRefinements = useHasRefinements(searchResults, attributes);
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
 
   return (
     <div>
       <div
-        className={classNames(
-          {
-            hidden: !hasRefinements,
-          },
-          className,
-        )}
+        className={classNames(className)}
         style={{
           borderTop: !isMobile ? '1px solid #d3d4d8' : '',
         }}

package/src/components/PanelResult/virtual-state-results.ts

@@ -1,44 +1,39 @@
-import { atom } from 'jotai'
-import { selectAtom, useUpdateAtom } from 'jotai/utils'
-import { memo, useEffect } from 'react'
-import isEqual from 'react-fast-compare'
-import type { StateResultsProvided } from 'react-instantsearch-core'
-import { connectStateResults } from 'react-instantsearch-dom'
+import { atom } from 'jotai';
+import { selectAtom, useUpdateAtom } from 'jotai/utils';
+import { memo, useEffect } from 'react';
+import isEqual from 'react-fast-compare';
+import type { StateResultsProvided } from 'react-instantsearch-core';
+import { connectStateResults } from 'react-instantsearch-dom';
 
-export type VirtualStateResultsProps = StateResultsProvided
+export type VirtualStateResultsProps = StateResultsProvided;
 
 export type VirtualStateResultsAtomValue = Partial<
   Pick<VirtualStateResultsProps, 'isSearchStalled' | 'searchResults'>
->
+>;
 
 export const stateResultsAtom = atom<VirtualStateResultsAtomValue>({
   searchResults: undefined,
   isSearchStalled: undefined,
-})
+});
 
-export const searchResultsAtom = selectAtom(
-  stateResultsAtom,
-  ({ searchResults }) => searchResults,
-  isEqual
-)
 export const isSearchStalledAtom = selectAtom(
   stateResultsAtom,
-  ({ isSearchStalled }) => isSearchStalled
-)
+  ({ isSearchStalled }) => isSearchStalled,
+);
 
 function VirtualStateResultsComponent({
   searchResults,
   isSearchStalled,
 }: VirtualStateResultsProps) {
-  const setStateResults = useUpdateAtom(stateResultsAtom)
+  const setStateResults = useUpdateAtom(stateResultsAtom);
 
   useEffect(() => {
-    setStateResults({ searchResults, isSearchStalled })
-  }, [setStateResults, searchResults, isSearchStalled])
+    setStateResults({ searchResults, isSearchStalled });
+  }, [setStateResults, searchResults, isSearchStalled]);
 
-  return null
+  return null;
 }
 
 export const VirtualStateResults = connectStateResults(
-  memo(VirtualStateResultsComponent, isEqual)
-)
+  memo(VirtualStateResultsComponent, isEqual),
+);

package/src/components/ProductDetailView.tsx

@@ -188,7 +188,7 @@ function ProductDetailView(props: Props) {
               }}
             />
           )}
-          {dataImageCarousel.length > 0 && (
+          {dataImageCarousel.length > 0 && !settings.noSimilarSearch && (
             <Button
               className={classes.buttonStyleImageSearch}
               style={{

package/src/components/SidePanel.tsx

@@ -1,40 +1,20 @@
-import { Button, Typography } from '@material-ui/core';
-import { RectCoords } from '@nyris/nyris-api';
-import { Preview } from '@nyris/nyris-react-components';
-import React, { useState } from 'react';
 import PostFilterPanel from './PanelResult/PostFilter';
 import PostFilterPanelAlgolia from './PanelResult/PostFilterAlgolia';
 
-import { useTranslation } from 'react-i18next';
 import { useAppSelector } from 'Store/Store';
-import { ReactComponent as KeyboardArrowRightOutlinedIcon } from 'common/assets/icons/arrow_right.svg';
-import { ReactComponent as KeyboardArrowLeftOutlinedIcon } from 'common/assets/icons/arrow_left.svg';
 
-import { DEFAULT_REGION } from '../constants';
-import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
+import ImagePreview from './ImagePreview';
 
 function SidePanel({
-  setImageSelection,
-  imageSelection,
-  debouncedOnImageSelectionChange,
-  filteredRegions,
-  showAdjustInfoBasedOnConfidence,
   showAdjustInfo,
   showPostFilter,
   disjunctiveFacets,
 }: {
-  setImageSelection: any;
-  imageSelection: any;
-  debouncedOnImageSelectionChange: any;
-  filteredRegions: any;
-  showAdjustInfoBasedOnConfidence: any;
   showAdjustInfo: any;
   showPostFilter: any;
   allSearchResults: any;
   disjunctiveFacets: any;
 }) {
-  const { t } = useTranslation();
-  const [toggleColLeft, setToggleColLeft] = useState<boolean>(false);
   const stateGlobal = useAppSelector(state => state);
   const { search, settings } = stateGlobal;
 
@@ -42,35 +22,13 @@ function SidePanel({
 
   return (
     <div
-      className={`wrap-main-col-left ${toggleColLeft ? 'toggle' : ''}`}
+      className={`wrap-main-col-left`}
       style={{
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'space-between',
       }}
     >
-      <div
-        className="box-toggle-coloumn"
-        style={{
-          right: '0px',
-        }}
-      >
-        <Button
-          style={{
-            color: '#55566b',
-            height: '32px',
-          }}
-          onClick={() => {
-            setToggleColLeft(!toggleColLeft);
-          }}
-        >
-          {toggleColLeft ? (
-            <KeyboardArrowRightOutlinedIcon />
-          ) : (
-            <KeyboardArrowLeftOutlinedIcon />
-          )}
-        </Button>
-      </div>
       <div>
         {settings.preview && requestImage && (
           <div className="col-left">
@@ -79,70 +37,22 @@ function SidePanel({
                 className="preview-item"
                 style={{
                   backgroundColor: 'white',
-                  paddingTop: '32px',
                   width: '100%',
                 }}
               >
                 <div
                   style={{
-                    display: 'flex',
-                    justifyContent: 'center',
-                    backgroundColor: '#F3F3F5',
                     width: '100%',
-                    paddingTop: '16px',
-                    paddingBottom: '16px',
                   }}
                 >
-                  <div
-                    style={{
-                      width: '288px',
-                      height: 'fit-content',
-                    }}
-                  >
-                    <Preview
-                      key={requestImage?.id}
-                      onSelectionChange={(r: RectCoords) => {
-                        debouncedOnImageSelectionChange(r);
-                      }}
-                      image={requestImage?.canvas}
-                      selection={imageSelection || DEFAULT_REGION}
-                      regions={filteredRegions}
-                      dotColor={'#FBD914'}
-                      minCropWidth={30}
-                      minCropHeight={30}
-                      rounded={true}
-                    />
-                  </div>
+                  <ImagePreview
+                    showAdjustInfo={showAdjustInfo}
+                    isExpanded={true}
+                    isCameraUploadEnabled={false}
+                  />
                 </div>
               </div>
             </div>
-            {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
-              <div
-                style={{
-                  alignItems: 'center',
-                  backgroundColor: '#3E36DC',
-                  display: 'flex',
-                  columnGap: '6px',
-                  padding: '5px',
-                  marginTop: 'auto',
-                  position: 'absolute',
-                  bottom: 0,
-                  borderRadius: '16px',
-                }}
-              >
-                <IconInfo color="white" />
-                <Typography
-                  style={{
-                    fontSize: 10,
-                    color: '#fff',
-                  }}
-                >
-                  {showAdjustInfo
-                    ? t('Crop the image for better results')
-                    : 'Crop the image for better results'}
-                </Typography>
-              </div>
-            )}
           </div>
         )}
 

package/src/components/UploadDisclaimer.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { ReactComponent as CloseIcon } from 'common/assets/icons/close.svg';
+import { makeFileHandler } from '@nyris/nyris-react-components';
+
+function UploadDisclaimer({
+  onClose,
+  onContinue,
+  isMobile,
+}: {
+  onClose: any;
+  onContinue: any;
+  isMobile: boolean;
+}) {
+  const [dontShowAgain, setDontShowAgain] = useState(false);
+
+  return (
+    <>
+      {createPortal(
+        <div className="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black/50 w-screen h-screen z-[9999]">
+          <div className="bg-white w-80">
+            <div className="p-4">
+              <div className="flex justify-between items-center">
+                <div className="font-bold text-xl">Replace Current Data?</div>
+                <CloseIcon
+                  className="cursor-pointer"
+                  width={12}
+                  height={12}
+                  onClick={onClose}
+                />
+              </div>
+              <p className="text-sm mt-4">
+                Uploading a new image will overwrite your current search
+                parameters, text, and results. Are you sure you want to proceed?
+              </p>
+              <div className="mt-4 gap-x-2 flex">
+                <input
+                  type="checkbox"
+                  className="w-4"
+                  onChange={e => {
+                    setDontShowAgain(e.target.checked);
+                  }}
+                />
+                Don't show this again
+              </div>
+            </div>
+            <div className="flex">
+              <button
+                className="w-1/2 h-16 p-4 text-start text-sm text-white bg-[#2B2C46]"
+                onClick={() => onClose()}
+              >
+                Cancel
+              </button>
+              <label
+                className="w-1/2 h-16 p-4 text-start text-sm text-white bg-[#E31B5D] cursor-pointer"
+                htmlFor={!isMobile ? 'nyris__upload-photo' : ''}
+                onClick={() => {
+                  if (isMobile) {
+                    onContinue({ dontShowAgain });
+                  }
+                }}
+              >
+                Continue
+              </label>
+              <input
+                type="file"
+                name="take-picture"
+                id="nyris__upload-photo"
+                accept="image/jpeg,image/png,image/webp"
+                onChange={makeFileHandler(file =>
+                  onContinue({ file, dontShowAgain }),
+                )}
+                style={{ display: 'none' }}
+              />
+            </div>
+          </div>
+        </div>,
+        document.body,
+      )}
+    </>
+  );
+}
+
+export default UploadDisclaimer;

package/src/components/appMobile.scss

@@ -479,8 +479,8 @@
   .modal-togggle-cam {
     .wrap-camera {
       position: relative;
-      height: 100vh;
-      height: calc(var(--vh, 1vh) * 100);
+      // height: 100vh;
+      // height: calc(var(--vh, 1vh) * 100);
       display: flex;
       justify-content: center;
       align-items: center;

package/src/components/common.scss

@@ -142,42 +142,49 @@
 }
 
 .feedback-floating {
+  position: fixed;
   height: fit-content;
   right: 18px;
-  position: absolute;
   z-index: 201;
   display: flex;
   justify-content: flex-end;
+  bottom: 40px;
 
   .feedback-section {
-    position: fixed;
-    bottom: 40px;
+    backdrop-filter: blur(2px);
+    border-radius: 24px;
+    min-width: 332px;
+    min-height: 48px;
+
     @media screen and (max-width: 776px) {
-      margin-left: 0px;
-      // height: fit-content !important;
-      bottom: 125px;
-     
+      min-width: 300px;
+      min-height: 40px;
     }
+
   }
 
   @media screen and (max-width: 776px) {
+    display: flex;
+    width: 100%;
+    justify-content: center;
     margin-left: 0px;
     height: fit-content !important;
-    right: 40px;
-   
+    bottom: 80px;
+    right: auto;
+
   }
 }
 
 
 .feedback-wrapper {
-  background-color: #e4e3fff7;
+  // background-color: #e4e3ffed;
   mix-blend-mode: multiply;
   border-radius: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-left: 30px;
-  padding-right: 30px;
+  padding-left: 24px;
+  padding-right: 8px;
   padding-top: 8px;
   padding-bottom: 8px;
   width: fit-content;
@@ -188,14 +195,11 @@
   flex-shrink: 0;
   color: #2B2C46;
 
-  &:hover{
-    background-color: rgb(211, 209, 255, 0.97);
-
-  }
-
   @media screen and (max-width: 776px) {
-    padding-left: 20px;
-    padding-right: 20px;
+    padding-left: 16px;
+    padding-right: 4px;
+    padding-right: 6px;
+    padding-top: 6px;
   }
 
   p{
@@ -207,13 +211,39 @@
   }
 
   .feedback-icon-wrapper {
-    width: 34px;
-    height: 34px;
+    min-width: 32px;
+    min-height: 32px;
     border-radius: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 
+    @media screen and (max-width: 776px) {
+      min-width: 28px;
+      min-height: 28px;
+    }
+
+    &-close {
+      min-width: 32px;
+      min-height: 32px;
+      border-radius: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      @media screen and (max-width: 776px) {
+        min-width: 28px;
+        min-height: 28px;
+      }
+
+      &:hover {
+        background-color: #D3D1FF;
+        cursor: pointer;  
+      }
+    }
+
+    
+
     &:hover {
       background-color: #FFF;
       box-shadow: 0px 0px 7.04px 0px rgba(0, 0, 0, 0.10);
@@ -244,17 +274,17 @@
   font-weight: 600;
   color: #fff;
   background-color: #2B2C46;
-  width: 282px;
-  padding-top: 16px;
-  padding-bottom: 16px;
+  width: 100%;
+  height: 100%;
   text-align: center;
   border-radius: 26px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   @media screen and (max-width: 776px) {
     font-size: 12px;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    width: 264px;
+
   }
 }