@nyris/nyris-webapp 0.3.98 → 0.4.0

package/src/components/ScopeSelect/ScopeSelectImagePreview.tsx

@@ -0,0 +1,141 @@
+import { Icon } from '@nyris/nyris-react-components';
+import { AlertCircle, Check, Factory } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import Tooltip from 'components/Tooltip/TooltipComponent';
+import { twMerge } from 'tailwind-merge';
+
+interface Props {
+  previewUrl?: string | null;
+  extractedScopeId: string;
+  isExtracting: boolean;
+  isSuccess?: boolean;
+  errorMessage?: string | null;
+  thumbnail?: 'image' | 'machine';
+  onClearImage?: () => void;
+}
+
+export function ScopeSelectImagePreview({
+  previewUrl,
+  extractedScopeId,
+  isExtracting,
+  errorMessage = null,
+  thumbnail = 'image',
+  onClearImage,
+}: Props) {
+  const { t } = useTranslation();
+  const serialNumberLabel =
+    window.settings.scopes?.typePlateSerialNumberLabel || 'Serial number';
+  const thumbnailClassName =
+    'flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-md bg-[#FAFAFA]';
+
+  return (
+    <div className="relative flex w-full items-center gap-3.5 rounded-xl border border-solid border-[#DDDEE7] bg-white p-2.5 pr-8">
+      {thumbnail === 'machine' || !previewUrl ? (
+        <div className={thumbnailClassName} aria-hidden="true">
+          <Factory className="h-8 w-8 text-[#2B2C46]" strokeWidth={1.75} />
+        </div>
+      ) : (
+        <Tooltip
+          content={
+            <img
+              src={previewUrl}
+              alt=""
+              className="h-[350px] w-[350px] max-h-[70vh] max-w-[80vw] object-contain"
+            />
+          }
+          side="top"
+          sideOffset={8}
+        >
+          <div className={twMerge(thumbnailClassName, 'cursor-pointer')}>
+            <img
+              src={previewUrl}
+              alt=""
+              className="h-full w-full object-contain"
+            />
+          </div>
+        </Tooltip>
+      )}
+
+      <div className="min-w-0 flex-1">
+        {isExtracting ? (
+          <div>
+            <p className="text-xs font-normal leading-none text-[#989BB7]">
+              {t(serialNumberLabel)}
+            </p>
+            <div className="mt-1.5 flex items-center gap-2">
+              <svg
+                width={16}
+                height={16}
+                viewBox="0 0 50 50"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                className="loading-spinner shrink-0"
+              >
+                <circle
+                  cx="25"
+                  cy="25"
+                  r="20"
+                  stroke="#3E36DC"
+                  strokeWidth="4"
+                  strokeLinecap="round"
+                  strokeDasharray="90 30"
+                />
+              </svg>
+              <span className="text-sm text-[#989BB7]">{t('loading')}</span>
+            </div>
+          </div>
+        ) : (
+          <>
+            {extractedScopeId ? (
+              <>
+                <p className="text-xs font-normal leading-none text-[#989BB7]">
+                  {t(serialNumberLabel)}
+                </p>
+                <div className="mt-1 flex items-center gap-1.5">
+                  <span
+                    className="truncate text-lg font-bold leading-tight text-[#2B2C46]"
+                    title={extractedScopeId}
+                  >
+                    {extractedScopeId}
+                  </span>
+                  {!errorMessage && (
+                    <Check
+                      className="h-[18px] w-[18px] shrink-0 text-green-600"
+                      strokeWidth={2.5}
+                      aria-hidden="true"
+                    />
+                  )}
+                </div>
+              </>
+            ) : null}
+            {errorMessage ? (
+              <div
+                className={twMerge(
+                  'flex items-center gap-1.5 text-sm font-normal text-[#2B2C46]',
+                  extractedScopeId && 'mt-1.5',
+                )}
+              >
+                <AlertCircle className="h-4 w-4 shrink-0 text-[#2B2C46]" />
+                <span>{errorMessage}</span>
+              </div>
+            ) : null}
+          </>
+        )}
+      </div>
+
+      {onClearImage ? (
+        <button
+          type="button"
+          className="absolute top-2 right-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-[#55566B] transition-colors hover:bg-gray-100 hover:text-[#2B2C46]"
+          aria-label={t('Clear image search')}
+          onClick={e => {
+            e.stopPropagation();
+            onClearImage();
+          }}
+        >
+          <Icon name="close" width={11} height={11} />
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/components/ScopeSelect/ScopeSelectInfo.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { twMerge } from 'tailwind-merge';
+import plateInfoImage from 'common/assets/images/plate_info.png';
+import { Dialog, DialogContent, DialogTitle } from '../Modal/Dialog';
+
+interface Props {
+  isEmptyState?: boolean;
+}
+
+export function ScopeSelectInfo({ isEmptyState = true }: Props) {
+  const { t } = useTranslation();
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const whereToFindTitle =
+    window.settings.scopes?.typePlateWhereToFindTitle || 'Where to find it';
+  const whereToFindDescription =
+    window.settings.scopes?.typePlateWhereToFindDescription ||
+    'A metal or foil label on the machine housing, usually near the motor or the main panel. Make sure the serial number is sharp and readable.';
+
+  return (
+    <>
+      <div className="flex flex-col items-start gap-4 min-[640px]:flex-row min-[640px]:items-center">
+        <button
+          type="button"
+          className="shrink-0 cursor-pointer border-0 bg-transparent p-0"
+          onClick={() => setIsPreviewOpen(true)}
+          aria-label={t(whereToFindTitle)}
+        >
+          <img
+            src={plateInfoImage}
+            alt=""
+            className="h-auto w-full max-w-[150px] min-w-[150px] object-contain bg-primary px-2 py-6"
+          />
+        </button>
+        <div className="min-w-0 flex-1">
+          <h3
+            className={twMerge(
+              'font-bold text-[#2B2C46]',
+              isEmptyState ? 'text-base' : 'text-sm',
+            )}
+          >
+            {t(whereToFindTitle)}
+          </h3>
+          <p
+            className={twMerge(
+              'mt-1 font-normal text-[#989BB7]',
+              isEmptyState ? 'text-sm leading-5' : 'text-xs leading-4',
+            )}
+          >
+            {t(whereToFindDescription)}
+          </p>
+        </div>
+      </div>
+      <Dialog open={isPreviewOpen} onOpenChange={setIsPreviewOpen}>
+        <DialogContent className="max-w-[90vw] w-fit bg-white p-4">
+          <DialogTitle className="h-0 w-0 hidden">
+            {t(whereToFindTitle)}
+          </DialogTitle>
+          <img
+            src={plateInfoImage}
+            alt=""
+            className="max-h-[80vh] max-w-[min(640px,80vw)] object-contain"
+          />
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/src/components/ScopeSelect/ScopeSelectInput.tsx

@@ -0,0 +1,123 @@
+import { Icon } from '@nyris/nyris-react-components';
+import { useTranslation } from 'react-i18next';
+import { twMerge } from 'tailwind-merge';
+
+interface Props {
+  manualScopeId: string;
+  hasManualId: boolean;
+  isResolving: boolean;
+  isApplying?: boolean;
+  submitLabel?: string;
+  onManualScopeIdChange: (value: string) => void;
+  onClearText: () => void;
+  onSubmit: () => void;
+}
+
+export function ScopeSelectInput({
+  manualScopeId,
+  hasManualId,
+  isResolving,
+  isApplying = false,
+  submitLabel,
+  onManualScopeIdChange,
+  onClearText,
+  onSubmit,
+}: Props) {
+  const { t } = useTranslation();
+  const ctaLabel =
+    submitLabel || window.settings.scopes?.typePlatePopupCtaButton || 'Apply';
+  const manualInputLabel =
+    window.settings.scopes?.typePlateManualInputLabel ||
+    "Can't scan? Enter serial number manually.";
+  const placeholder =
+    window.settings.scopes?.typePlateManualInputPlaceholder || 'e.g. 2234GH';
+  const applyingLabel =
+    window.settings.scopes?.typePlatePopupApplyingLabel || 'Applying...';
+
+  return (
+    <div className="w-full max-w-[636px]">
+      <p className="mb-2 text-xs font-normal text-[#2B2C46]">
+        {t(manualInputLabel)}
+      </p>
+      <div className="flex items-center gap-2">
+        <div
+          className={twMerge(
+            'bg-white border border-solid border-[#DDDEE7] shadow-ds-2',
+            'flex h-12 min-w-0 flex-1 items-center justify-between pr-1.5',
+            'rounded-[32px]',
+          )}
+        >
+          <span className="flex h-full min-w-0 flex-1 items-center rounded-[32px]">
+            <input
+              type="text"
+              value={manualScopeId}
+              disabled={isResolving}
+              placeholder={t(placeholder)}
+              className={twMerge(
+                'h-full w-full border-0 bg-transparent pl-4 outline-none',
+                'rounded-[32px] text-[14px] text-[#2B2C46]',
+                'disabled:bg-[#F3F3F5] disabled:text-[#BBBDCF]',
+              )}
+              onChange={event => onManualScopeIdChange(event.target.value)}
+              onKeyDown={event => {
+                if (event.key === 'Enter') {
+                  event.preventDefault();
+                  if (hasManualId && !isResolving) {
+                    onSubmit();
+                  }
+                }
+              }}
+            />
+          </span>
+          {hasManualId && (
+            <button
+              type="button"
+              className="flex min-h-10 min-w-10 items-center justify-center rounded-full hover:bg-gray-100 cursor-pointer"
+              aria-label={t('Clear text search')}
+              onClick={onClearText}
+            >
+              <Icon name="close" className="h-3 w-3 text-primary" />
+            </button>
+          )}
+        </div>
+        <button
+          type="button"
+          disabled={!hasManualId || isResolving}
+          className={twMerge(
+            'h-12 shrink-0 rounded-[32px] px-6 text-[14px] font-semibold text-white',
+            'flex items-center justify-center gap-2 transition-colors',
+            'bg-primary hover:bg-[#2B2C46] disabled:hover:bg-primary',
+            'disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer',
+          )}
+          onClick={onSubmit}
+        >
+          {isApplying ? (
+            <>
+              <svg
+                width={16}
+                height={16}
+                viewBox="0 0 50 50"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                className="loading-spinner shrink-0"
+              >
+                <circle
+                  cx="25"
+                  cy="25"
+                  r="20"
+                  stroke="#FFFFFF"
+                  strokeWidth="4"
+                  strokeLinecap="round"
+                  strokeDasharray="90 30"
+                />
+              </svg>
+              <span>{t(applyingLabel)}</span>
+            </>
+          ) : (
+            t(ctaLabel)
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/ScopeSelect/ScopeSelectModal.tsx

@@ -0,0 +1,310 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Dialog, DialogContent, DialogTitle } from '../Modal/Dialog';
+import { ScopeSelectForm } from './ScopeSelectForm';
+import { useMediaQuery } from 'react-responsive';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from 'components/Drawer/Drawer';
+import { useTranslation } from 'react-i18next';
+import CustomCamera from 'components/CustomCameraDrawer';
+import {
+  extractScopeIdFromTypePlate,
+  useImageSearch,
+} from 'hooks/useImageSearch';
+import { lookupScopeById } from 'services/scopeLookup';
+import { identifyTypePlateImage } from './identifyTypePlateImage';
+import { useLocation, useNavigate } from 'react-router';
+import useRequestStore from 'stores/request/requestStore';
+import { firstMachinePartsListingText } from 'stores/machinePartsListing/machinePartsListingStore';
+import {
+  AppliedScopeInput,
+  ScopeSource,
+  toImageFile,
+} from './scopeSelectHelpers';
+
+interface Props {
+  openModal: boolean;
+  handleClose: () => void;
+}
+
+export function ScopeSelectModal({
+  openModal = false,
+  handleClose,
+}: Props): JSX.Element {
+  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+  const { t } = useTranslation();
+  const [manualScopeId, setManualScopeId] = useState('');
+  const [pendingFile, setPendingFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [activeSource, setActiveSource] = useState<ScopeSource | null>(null);
+  const [lastAppliedInput, setLastAppliedInput] =
+    useState<AppliedScopeInput | null>(null);
+  const [lastExtractedFromImage, setLastExtractedFromImage] = useState('');
+  const [isManualMode, setIsManualMode] = useState(false);
+  const [isCameraOpen, setIsCameraOpen] = useState(false);
+  const [isExtracting, setIsExtracting] = useState(false);
+  const [scopeError, setScopeError] = useState<string | null>(null);
+  const extractGenerationRef = useRef(0);
+  const activeSourceRef = useRef<ScopeSource | null>(null);
+  const isOpenRef = useRef(openModal);
+  const discardPendingScopeRef = useRef<(() => void) | null>(null);
+
+  const resetFormState = useCallback(() => {
+    extractGenerationRef.current += 1;
+    setIsExtracting(false);
+    setScopeError(null);
+    setIsManualMode(false);
+    setManualScopeId('');
+    setPendingFile(null);
+    setLastExtractedFromImage('');
+    setActiveSource(null);
+    activeSourceRef.current = null;
+    setLastAppliedInput(null);
+    setPreviewUrl(prev => {
+      if (prev) {
+        try {
+          URL.revokeObjectURL(prev);
+        } catch {}
+      }
+      return null;
+    });
+  }, []);
+
+  const closeModal = useCallback(() => {
+    discardPendingScopeRef.current?.();
+    discardPendingScopeRef.current = null;
+    setIsCameraOpen(false);
+    resetFormState();
+    handleClose();
+  }, [handleClose, resetFormState]);
+
+  useEffect(() => {
+    isOpenRef.current = openModal;
+    if (!openModal) {
+      resetFormState();
+    }
+  }, [openModal, resetFormState]);
+
+  const handleActiveSourceChange = useCallback(
+    (source: ScopeSource | null) => {
+      activeSourceRef.current = source;
+      setActiveSource(source);
+    },
+    [],
+  );
+
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { singleImageSearch, searchMachinePartsListing } = useImageSearch();
+
+  const handleScopeSuccess = useCallback(() => {
+    closeModal();
+    const { query, requestImages, regions } = useRequestStore.getState();
+    const keyword = (query || '').trim();
+    const searchImage = requestImages[0];
+    const onResults = location.pathname.startsWith('/result');
+
+    if (searchImage) {
+      if (!onResults) {
+        navigate('/result');
+      }
+      void singleImageSearch({
+        image: searchImage,
+        imageRegion: regions[0],
+        settings: window.settings,
+        showFeedback: true,
+        newSearch: false,
+      });
+      return;
+    }
+
+    if (keyword) {
+      if (!onResults) {
+        navigate('/result');
+      }
+      void singleImageSearch({
+        text: keyword,
+        settings: window.settings,
+        showFeedback: true,
+        newSearch: false,
+      });
+      return;
+    }
+
+    const text = firstMachinePartsListingText();
+    if (!text) {
+      return;
+    }
+
+    if (!onResults) {
+      navigate('/result');
+    }
+    void searchMachinePartsListing({
+      text,
+      showFeedback: true,
+      clearPostFilters: true,
+    });
+  }, [
+    closeModal,
+    location.pathname,
+    navigate,
+    searchMachinePartsListing,
+    singleImageSearch,
+  ]);
+
+  const setSelectedImage = useCallback(
+    (file: File) => {
+      discardPendingScopeRef.current?.();
+      setIsManualMode(false);
+      setManualScopeId('');
+      const nextPreviewUrl = URL.createObjectURL(file);
+      setPreviewUrl(prev => {
+        if (prev && prev !== nextPreviewUrl) {
+          try {
+            URL.revokeObjectURL(prev);
+          } catch {}
+        }
+        return nextPreviewUrl;
+      });
+      setPendingFile(file);
+      setLastExtractedFromImage('');
+      setScopeError(null);
+      handleActiveSourceChange('image');
+      const extractGeneration = extractGenerationRef.current + 1;
+      extractGenerationRef.current = extractGeneration;
+      setIsExtracting(true);
+      const defaultErrorMessage =
+        window.settings.scopes?.typePlatePopupErrorMessage ||
+        'The serial number was not found. Please check again.';
+      void identifyTypePlateImage({
+        file,
+        isCurrent: () =>
+          extractGeneration === extractGenerationRef.current &&
+          isOpenRef.current &&
+          activeSourceRef.current === 'image',
+        extract: extractScopeIdFromTypePlate,
+        lookup: lookupScopeById,
+      })
+        .then(result => {
+          if (result.status === 'ignored') {
+            return;
+          }
+          if (result.status !== 'identified') {
+            setLastExtractedFromImage('');
+            setScopeError(t(defaultErrorMessage));
+            return;
+          }
+
+          setLastExtractedFromImage(result.serialNumber);
+          setScopeError(null);
+        })
+        .finally(() => {
+          if (
+            extractGeneration === extractGenerationRef.current &&
+            isOpenRef.current
+          ) {
+            setIsExtracting(false);
+          }
+        });
+    },
+    [handleActiveSourceChange, t],
+  );
+
+  const clearPreview = useCallback(() => {
+    extractGenerationRef.current += 1;
+    setIsExtracting(false);
+    setScopeError(null);
+    setPreviewUrl(prev => {
+      if (prev) {
+        try {
+          URL.revokeObjectURL(prev);
+        } catch {}
+      }
+      return null;
+    });
+    setPendingFile(null);
+    setLastExtractedFromImage('');
+  }, []);
+
+  const handleSwitchToManual = useCallback(() => {
+    setIsManualMode(true);
+    setScopeError(null);
+    handleActiveSourceChange('manual');
+    if (previewUrl) {
+      clearPreview();
+    }
+  }, [clearPreview, handleActiveSourceChange, previewUrl]);
+
+  const isSuccess =
+    Boolean(lastExtractedFromImage) && !scopeError && !isExtracting;
+  const popupTitle = isSuccess
+    ? window.settings.scopes?.typePlatePopupTitleSuccess || 'Machine identified'
+    : window.settings.scopes?.typePlatePopupTitle || 'Identify your machine';
+
+  const form = (
+    <ScopeSelectForm
+      handleClose={closeModal}
+      manualScopeId={manualScopeId}
+      pendingFile={pendingFile}
+      previewUrl={previewUrl}
+      activeSource={activeSource}
+      lastAppliedInput={lastAppliedInput}
+      lastExtractedFromImage={lastExtractedFromImage}
+      isExtracting={isExtracting}
+      scopeError={scopeError}
+      isManualMode={isManualMode}
+      onManualScopeIdChange={setManualScopeId}
+      onSelectedImage={setSelectedImage}
+      onClearPreview={clearPreview}
+      onOpenCamera={() => setIsCameraOpen(true)}
+      onApplied={setLastAppliedInput}
+      onActiveSourceChange={handleActiveSourceChange}
+      onExtractedFromImage={setLastExtractedFromImage}
+      onScopeErrorChange={setScopeError}
+      onSwitchToManual={handleSwitchToManual}
+      onSuccess={handleScopeSuccess}
+      discardPendingScopeRef={discardPendingScopeRef}
+    />
+  );
+
+  return (
+    <>
+      {!isMobile ? (
+        <Dialog open={openModal} onOpenChange={open => !open && closeModal()}>
+          <DialogContent
+            className="bg-white p-0 max-w-[640px] w-[90%] max-h-[95vh] m-auto overflow-y-hidden rounded-lg pt-2.5"
+            closeButton={false}
+          >
+            <DialogTitle className="h-0 w-0 hidden">
+              {t(popupTitle)}
+            </DialogTitle>
+            {form}
+          </DialogContent>
+        </Dialog>
+      ) : (
+        <Drawer open={openModal} onOpenChange={open => !open && closeModal()}>
+          <DrawerContent className="bg-white p-0 m-auto overflow-y-hidden pt-2.5 h-full outline-none rounded-none">
+            <DrawerHeader className="h-0 w-0 hidden">
+              <DrawerTitle>{t(popupTitle)}</DrawerTitle>
+            </DrawerHeader>
+            {form}
+          </DrawerContent>
+        </Drawer>
+      )}
+      <CustomCamera
+        show={isCameraOpen}
+        onClose={() => setIsCameraOpen(false)}
+        handleImageUpload={(image: File | string) => {
+          void toImageFile(image).then(file => {
+            if (file) {
+              setSelectedImage(file);
+            }
+          });
+        }}
+      />
+    </>
+  );
+}