@nyris/nyris-webapp 0.3.98 → 0.4.0

package/src/components/GoBackButton.tsx

@@ -7,8 +7,11 @@ import useResultStore from 'stores/result/resultStore';
 import useRequestStore from 'stores/request/requestStore';
 import { twMerge } from 'tailwind-merge';
 import useUiStore from 'stores/ui/uiStore';
+import useScopeStore from 'stores/scope/scopeStore';
+import { useImageSearch } from 'hooks/useImageSearch';
 
 export const GoBackButton = ({ className }: { className?: string }) => {
+  const { singleImageSearch } = useImageSearch();
   const firstSearchResults = useResultStore(state => state.firstSearchResults);
   const setFindApiProducts = useResultStore(state => state.setFindApiProducts);
   const setImageAnalysis = useResultStore(state => state.setImageAnalysis);
@@ -27,12 +30,35 @@ export const GoBackButton = ({ className }: { className?: string }) => {
   const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
 
   const isFindApiLoading = useUiStore(state => state.isFindApiLoading);
+  const scopeId = useScopeStore(state => state.scopeId);
+  const scopeItemKeyCount = useScopeStore(state => state.itemKeys.length);
+  const machineScopeActive =
+    Boolean(window.settings.scopes?.scopeID) &&
+    Boolean(scopeId) &&
+    scopeItemKeyCount > 0;
 
   const { refine: clearPostFilters } = useClearRefinements();
 
   const { t } = useTranslation();
 
   const onGoBack = () => {
+    // The saved snapshot may predate the machine scope, so search the original
+    // image again; find() applies the active scope.
+    if (machineScopeActive && firstSearchImage) {
+      setPreFilter(firstSearchPreFilter);
+      resetRegions();
+      clearPostFilters();
+      void singleImageSearch({
+        image: firstSearchImage,
+        settings: window.settings,
+        showFeedback: true,
+        newSearch: false,
+        compress: false,
+        clearPostFilter: true,
+      });
+      return;
+    }
+
     setFindApiProducts(firstSearchResults);
     if (firstSearchImage) {
       setRequestImages([firstSearchImage]);
@@ -58,9 +84,10 @@ export const GoBackButton = ({ className }: { className?: string }) => {
   };
 
   if (
-    firstSearchResults.length === 0 ||
+    !firstSearchImage ||
     requestImages[0] === firstSearchImage ||
-    isFindApiLoading
+    isFindApiLoading ||
+    (!machineScopeActive && firstSearchResults.length === 0)
   )
     return <></>;
 

package/src/components/Header.tsx

@@ -12,6 +12,7 @@ import LogoutModal from './LogoutModal';
 import useResultStore from 'stores/result/resultStore';
 import Cart from './Cart';
 import useUiStore from 'stores/ui/uiStore';
+import useScopeStore from 'stores/scope/scopeStore';
 
 function Header() {
   const { theme, auth0 } = window.settings;
@@ -20,6 +21,7 @@ function Header() {
 
   const reset = useRequestStore(state => state.reset);
   const resetResultStore = useResultStore(state => state.reset);
+  const resetScope = useScopeStore(state => state.resetScope);
   const setSpecifications = useRequestStore(state => state.setSpecifications);
   const showSidePanel = useUiStore(state => state.showSidePanel);
   const setShowSidePanel = useUiStore(state => state.setShowSidePanel);
@@ -84,6 +86,7 @@ function Header() {
           onClick={() => {
             reset();
             resetResultStore();
+            resetScope();
             setSpecifications(null);
           }}
           className="pl-6"

package/src/components/HitsPerPage.tsx

@@ -2,13 +2,31 @@ import { useTranslation } from 'react-i18next';
 import { useHitsPerPage, UseHitsPerPageProps } from 'react-instantsearch';
 import PoweredBy from './PoweredBy';
 import { twMerge } from 'tailwind-merge';
+import useMachinePartsListingStore from 'stores/machinePartsListing/machinePartsListingStore';
 
-export const HitsPerPage = (props: UseHitsPerPageProps) => {
+interface Props extends UseHitsPerPageProps {
+  onFindApiPageSizeChange?: (pageSize: number) => void;
+  useFindApiPageSize?: boolean;
+  showPageSize?: boolean;
+}
+
+export const HitsPerPage = ({
+  onFindApiPageSizeChange,
+  useFindApiPageSize = false,
+  showPageSize = true,
+  ...props
+}: Props) => {
   const { items, refine } = useHitsPerPage(props);
   const { value: currentValue } =
     items.find(({ isRefined }) => isRefined)! || {};
-
+  const pageSize = useMachinePartsListingStore(state => state.pageSize);
   const { t } = useTranslation();
+  const isAlgoliaEnabled = window.settings.algolia.enabled;
+  const controlAlgoliaPageSize = isAlgoliaEnabled && !useFindApiPageSize;
+  const options = controlAlgoliaPageSize ? items : props.items || items;
+  const selectedValue = controlAlgoliaPageSize
+    ? String(currentValue)
+    : String(pageSize);
 
   return (
     <>
@@ -18,25 +36,44 @@ export const HitsPerPage = (props: UseHitsPerPageProps) => {
           'shadow-ds-1',
         )}
       >
-        <div className="self-stretch pl-4 pr-6 border-r border-solid border-[#DDDEE7] justify-center items-center gap-1 flex">
-          <div className="text-[#3B3E5F] text-[13px] font-normal font-['Source Sans 3'] leading-none tracking-tight">
-            {t('Items per page')}:
+        {showPageSize && (
+          <div className="self-stretch pl-4 pr-6 border-r border-solid border-[#DDDEE7] justify-center items-center gap-1 flex">
+            <div className="text-[#3B3E5F] text-[13px] font-normal font-['Source Sans 3'] leading-none tracking-tight">
+              {t('Items per page')}:
+            </div>
+            <select
+              className="bg-transparent text-[13px] outline-none"
+              onChange={event => {
+                const nextPageSize = Number(event.target.value);
+                if (controlAlgoliaPageSize) {
+                  refine(nextPageSize);
+                  return;
+                }
+                onFindApiPageSizeChange?.(nextPageSize);
+              }}
+              value={selectedValue}
+            >
+              {options.map(item => (
+                <option key={item.value} value={item.value}>
+                  {item.label}
+                </option>
+              ))}
+            </select>
           </div>
-          <select
-            className="bg-transparent text-[13px] outline-none"
-            onChange={event => {
-              refine(Number(event.target.value));
+        )}
+        {!isAlgoliaEnabled || !showPageSize ? (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'end',
+              marginLeft: 'auto',
             }}
-            value={String(currentValue)}
           >
-            {items.map(item => (
-              <option key={item.value} value={item.value}>
-                {item.label}
-              </option>
-            ))}
-          </select>
-        </div>
-        {window.settings.showPoweredByNyris && <PoweredBy />}
+            {window.settings.showPoweredByNyris && <PoweredBy />}
+          </div>
+        ) : (
+          window.settings.showPoweredByNyris && <PoweredBy />
+        )}
       </div>
     </>
   );

package/src/components/ImagePreview.tsx

@@ -12,6 +12,8 @@ import { DEFAULT_REGION } from '../constants';
 import { useImageSearch } from 'hooks/useImageSearch';
 import useRequestStore from 'stores/request/requestStore';
 import useResultStore from 'stores/result/resultStore';
+import { hasActiveMachineScope } from 'stores/scope/scopeStore';
+import { firstMachinePartsListingText } from 'stores/machinePartsListing/machinePartsListingStore';
 
 function ImagePreviewComponent({
   showAdjustInfo = false,
@@ -52,7 +54,7 @@ function ImagePreviewComponent({
   const detectedRegions = useResultStore(state => state.detectedRegions);
   const resetResultStore = useResultStore(state => state.reset);
 
-  const { singleImageSearch } = useImageSearch();
+  const { singleImageSearch, searchMachinePartsListing } = useImageSearch();
 
   const currentIndex = requestImages.length - 1;
 
@@ -86,6 +88,33 @@ function ImagePreviewComponent({
   }, []);
 
   const onImageRemove = () => {
+    if (hasActiveMachineScope()) {
+      const keyword = (useRequestStore.getState().query || '').trim();
+      resetRegions();
+      setRequestImages([]);
+      if (keyword) {
+        void singleImageSearch({
+          text: keyword,
+          settings,
+          showFeedback: false,
+          newSearch: false,
+        });
+      } else {
+        const text = firstMachinePartsListingText();
+        useRequestStore.getState().setQuery('');
+        useRequestStore.getState().setValueInput('');
+        if (text) {
+          void searchMachinePartsListing({
+            text,
+            showFeedback: false,
+            clearPostFilters: true,
+          });
+        }
+      }
+      navigate('/result');
+      return;
+    }
+
     resetRegions();
     setRequestImages([]);
 
@@ -106,6 +135,7 @@ function ImagePreviewComponent({
         imageRegion: r,
         showFeedback: true,
         compress: false,
+        regionSelectedByUser: true,
       }).then((res: any) => {
         const specificationPrefilter =
           res?.image_analysis?.specification?.prefilter_value || null;

package/src/components/ImageUpload.tsx

@@ -12,9 +12,11 @@ import { useUploadSearch } from 'hooks/useUploadSearch';
 function ImageUpload({
   onCameraClick,
   disableDisclaimer,
+  guideOpen,
 }: {
   onCameraClick?: () => void;
   disableDisclaimer?: boolean;
+  guideOpen?: boolean;
 }) {
   const settings = window.settings;
   const user = useAuth0().user;
@@ -91,7 +93,16 @@ function ImageUpload({
             e.target.value = '';
           }}
         />
-        <Tooltip content={t('Search with an image')}>
+        <Tooltip
+          content={
+            guideOpen
+              ? t('You can now upload an image to search.')
+              : t('Search with an image')
+          }
+          open={guideOpen ? true : undefined}
+          side="top"
+          sideOffset={10}
+        >
           <label
             className={twMerge(
               'min-w-10 min-h-10 flex justify-center items-center cursor-pointer rounded-full bg-gray-100 desktop:bg-transparent hover:bg-gray-100',

package/src/components/Inquiry/InquiryModal.tsx

@@ -8,17 +8,20 @@ import { Icon } from '@nyris/nyris-react-components';
 import useRequestStore from 'stores/request/requestStore';
 import { getCroppedCanvas } from 'utils/misc';
 import { ToastHelper } from 'helpers/ToastHelper';
-import { Dialog, DialogContent } from 'components/Modal/Dialog';
+import { Dialog, DialogContent, DialogTitle } from 'components/Modal/Dialog';
 import { AutosizeTextarea } from 'components/AutosizeTextArea';
 import Tooltip from 'components/Tooltip/TooltipComponent';
 
 import { useTranslation } from 'react-i18next';
 import { createImage } from '../../services/visualSearch';
+import { trackClick } from 'services/Feedback';
+import { CLICK_SUBTYPE } from 'services/feedbackSubtypes';
 interface Props {
   requestImage: any;
   selectedRegion: any;
   setIsInquiryModalOpen: any;
   isInquiryModalOpen?: any;
+  allowEmailFallback?: boolean;
 }
 // eslint-disable-next-line
 const emailRegex = /.+\@.+\..+$/;
@@ -42,6 +45,7 @@ export default function InquiryModal({
   selectedRegion,
   setIsInquiryModalOpen,
   isInquiryModalOpen,
+  allowEmailFallback = false,
 }: Props) {
   const settings = window.settings;
   const preFilter = useRequestStore(state => state.preFilter);
@@ -54,6 +58,27 @@ export default function InquiryModal({
   const [emailValid, setEmailValid] = useState<boolean | undefined>(undefined);
 
   const [information, setInformation] = useState('');
+  const useEmailClient =
+    allowEmailFallback && !settings.support?.emailTemplateId;
+  // encodeURIComponent, not URLSearchParams: mailto (RFC 6068) needs spaces as %20, not +
+  const supportEmailHref = `mailto:support@nyris.io?subject=${encodeURIComponent(
+    'Vizo support request',
+  )}&body=${encodeURIComponent(`Email: ${email.trim()}\n\n${information}`)}`;
+  const submitStyle: React.CSSProperties = {
+    height: '66px',
+    display: 'flex',
+    alignItems: 'center',
+    width: '50%',
+    backgroundColor: emailValid
+      ? settings.theme?.primaryColor || '#0F766E'
+      : '#E9E9EC',
+    color: emailValid ? '#fff' : '#AAABB5',
+    fontSize: '14px',
+    paddingLeft: '16px',
+    border: 'none',
+    cursor: emailValid ? 'pointer' : 'default',
+    textDecoration: 'none',
+  };
 
   const setFormattedContent = React.useCallback(
     (text: string) => {
@@ -123,6 +148,7 @@ export default function InquiryModal({
       try {
         await emailjs.send(serviceId, templateId, body);
         ToastHelper.success(t('Request sent successfully'));
+        trackClick(CLICK_SUBTYPE.RAISE_INQUIRY);
       } catch (error) {
         toast(
           () => {
@@ -186,7 +212,8 @@ export default function InquiryModal({
     >
       <DialogContent
         closeButton={false}
-        className="w-[360px] desktop:w-[378px] flex flex-col bg-white p-0"
+        aria-describedby={undefined}
+        className="w-[360px] desktop:w-[378px] max-w-[calc(100vw-32px)] max-h-[calc(100dvh-32px)] overflow-y-auto flex flex-col bg-white p-0"
       >
         <div>
           <div
@@ -197,7 +224,8 @@ export default function InquiryModal({
               justifyContent: 'space-between',
             }}
           >
-            <p
+            <DialogTitle
+              className="text-sm leading-normal tracking-normal"
               style={{
                 color: '#2B2C46',
                 fontWeight: 'bold',
@@ -206,8 +234,10 @@ export default function InquiryModal({
               {requestImage
                 ? t('Submit your image for inquiry')
                 : t('Submit your inquiry')}
-            </p>
-            <div
+            </DialogTitle>
+            <button
+              type="button"
+              aria-label={t('Close')}
               onClick={() => setIsInquiryModalOpen(false)}
               style={{ display: 'flex', padding: '1px' }}
             >
@@ -219,7 +249,7 @@ export default function InquiryModal({
                   cursor: 'pointer',
                 }}
               />
-            </div>
+            </button>
           </div>
           {requestImage && (
             <div
@@ -378,26 +408,31 @@ export default function InquiryModal({
             >
               {t('Cancel')}
             </button>
-            <button
-              style={{
-                height: '66px',
-                display: 'flex',
-                alignItems: 'center',
-                width: '50%',
-                backgroundColor: emailValid
-                  ? settings.theme?.primaryColor
-                  : '#E9E9EC',
-                color: emailValid ? '#fff' : '#AAABB5',
-                fontSize: '14px',
-                paddingLeft: '16px',
-                border: 'none',
-                cursor: emailValid ? 'pointer' : 'normal',
-              }}
-              disabled={!emailValid}
-              onClick={handleInquiry}
-            >
-              {t('Send')}
-            </button>
+            {useEmailClient ? (
+              <a
+                style={submitStyle}
+                href={emailValid ? supportEmailHref : undefined}
+                aria-disabled={!emailValid}
+                tabIndex={emailValid ? 0 : -1}
+                onClick={event => {
+                  if (!emailValid) {
+                    event.preventDefault();
+                    return;
+                  }
+                  trackClick(CLICK_SUBTYPE.RAISE_INQUIRY);
+                }}
+              >
+                {t('Open email')}
+              </a>
+            ) : (
+              <button
+                style={submitStyle}
+                disabled={!emailValid}
+                onClick={handleInquiry}
+              >
+                {t('Send')}
+              </button>
+            )}
           </div>
         </div>
       </DialogContent>

package/src/components/Pagination.tsx

@@ -1,19 +1,46 @@
 import { usePagination } from 'react-instantsearch';
 import { Icon } from '@nyris/nyris-react-components';
 import { twMerge } from 'tailwind-merge';
+import { visibleMachinePartsPageIndexes } from 'services/machinePartsPage';
 
 export const Pagination = ({
   isLoading,
   className,
+  pageCount,
+  pageIndex = 0,
+  onPageChange,
 }: {
   isLoading: boolean;
   className?: string;
+  pageCount?: number;
+  pageIndex?: number;
+  onPageChange?: (pageIndex: number) => void;
 }) => {
-  const { pages, currentRefinement, isFirstPage, isLastPage, refine } =
-    usePagination();
+  const algoliaPagination = usePagination();
+  const isControlled = onPageChange !== undefined;
+  const currentRefinement = isControlled
+    ? pageIndex
+    : algoliaPagination.currentRefinement;
+  const isFirstPage = isControlled
+    ? currentRefinement <= 0
+    : algoliaPagination.isFirstPage;
+  const isLastPage = isControlled
+    ? currentRefinement >= (pageCount ?? 1) - 1
+    : algoliaPagination.isLastPage;
+  const pages = isControlled
+    ? visibleMachinePartsPageIndexes(currentRefinement, pageCount ?? 0)
+    : algoliaPagination.pages;
   const previousPageIndex = currentRefinement - 1;
   const nextPageIndex = currentRefinement + 1;
 
+  const selectPage = (page: number) => {
+    if (onPageChange) {
+      onPageChange(page);
+      return;
+    }
+    algoliaPagination.refine(page);
+  };
+
   return (
     <div
       className={twMerge(
@@ -22,13 +49,14 @@ export const Pagination = ({
         }`,
         className,
       )}
+      data-page-count={isControlled ? pageCount : undefined}
     >
       <div className="w-12 h-12 p-3.5 justify-center items-center flex">
         <div
           className="w-5 h-5 relative flex-col justify-start items-start flex cursor-pointer"
           onClick={() => {
             if (isFirstPage) return;
-            refine(previousPageIndex);
+            selectPage(previousPageIndex);
           }}
         >
           <Icon name="caret_left" className="w-5 h-5" />
@@ -43,8 +71,7 @@ export const Pagination = ({
             className="w-12 px-4 pt-[15px] flex-col justify-end items-center gap-[11px] inline-flex cursor-pointer"
             onClick={event => {
               event.preventDefault();
-
-              refine(page);
+              selectPage(page);
             }}
           >
             <div className="text-center text-sm font-normal leading-[18px] tracking-tight">
@@ -62,7 +89,7 @@ export const Pagination = ({
           className="w-5 h-5 relative flex-col justify-start items-start flex cursor-pointer"
           onClick={() => {
             if (isLastPage) return;
-            refine(nextPageIndex);
+            selectPage(nextPageIndex);
           }}
         >
           <Icon name="caret_right" className="w-5 h-5" />

package/src/components/PostFilter/PostFilter.tsx

@@ -8,6 +8,8 @@ import { useRefinementList } from 'react-instantsearch';
 import { Icon } from '@nyris/nyris-react-components';
 import { useTranslation } from 'react-i18next';
 import useScopeStore from 'stores/scope/scopeStore';
+import { trackClick } from 'services/Feedback';
+import { CLICK_SUBTYPE } from 'services/feedbackSubtypes';
 
 function PostFilter({
   attribute,
@@ -145,7 +147,12 @@ function PostFilter({
                   <input
                     type="checkbox"
                     checked={item.isRefined}
-                    onChange={() => refine(item.value)}
+                    onChange={() => {
+                      if (!item.isRefined) {
+                        trackClick(CLICK_SUBTYPE.FILTER_APPLIED);
+                      }
+                      refine(item.value);
+                    }}
                     className="cursor-pointer"
                   />
                   <span className="text-xs font-normal pl-2 pr-1">