@nyris/nyris-webapp 0.3.97 → 0.3.99

package/src/components/ScopeSelect/ScopeSelectForm.tsx

@@ -0,0 +1,514 @@
+import { useEffect, useRef, useState, type MutableRefObject } from 'react';
+import { Icon } from '@nyris/nyris-react-components';
+import { AlertCircle } from 'lucide-react';
+import { applyScopeById } from 'hooks/useImageSearch';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router';
+import { useMediaQuery } from 'react-responsive';
+import { ScopeSelectInput } from './ScopeSelectInput';
+import { ScopeSelectImageActions } from './ScopeSelectImageActions';
+import { ScopeSelectImagePreview } from './ScopeSelectImagePreview';
+import { ScopeSelectInfo } from './ScopeSelectInfo';
+import {
+  AppliedScopeInput,
+  ScopeSource,
+  getImageFileKey,
+  isSameAppliedInput,
+  notifyScopeResult,
+} from './scopeSelectHelpers';
+import useScopeStore from 'stores/scope/scopeStore';
+import { twMerge } from 'tailwind-merge';
+
+interface Props {
+  handleClose: () => void;
+  manualScopeId: string;
+  pendingFile: File | null;
+  previewUrl: string | null;
+  activeSource: ScopeSource | null;
+  lastAppliedInput: AppliedScopeInput | null;
+  lastExtractedFromImage: string;
+  isExtracting: boolean;
+  scopeError: string | null;
+  isManualMode: boolean;
+  onManualScopeIdChange: (value: string) => void;
+  onSelectedImage: (file: File) => void;
+  onClearPreview: () => void;
+  onOpenCamera: () => void;
+  onApplied: (input: AppliedScopeInput | null) => void;
+  onActiveSourceChange: (source: ScopeSource | null) => void;
+  onExtractedFromImage: (value: string) => void;
+  onScopeErrorChange: (error: string | null) => void;
+  onSwitchToManual: () => void;
+  onSuccess?: (itemKeys?: string[]) => void;
+  discardPendingScopeRef: MutableRefObject<(() => void) | null>;
+}
+
+export function ScopeSelectForm({
+  handleClose,
+  manualScopeId,
+  pendingFile,
+  previewUrl,
+  activeSource,
+  lastAppliedInput,
+  lastExtractedFromImage,
+  isExtracting,
+  scopeError,
+  isManualMode,
+  onManualScopeIdChange,
+  onSelectedImage,
+  onClearPreview,
+  onOpenCamera,
+  onApplied,
+  onActiveSourceChange,
+  onScopeErrorChange,
+  onSwitchToManual,
+  onSuccess,
+  discardPendingScopeRef,
+}: Props) {
+  const { t } = useTranslation();
+  const { pathname } = useLocation();
+  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const previousScopeRef = useRef<{
+    itemKeys: string[];
+    filterAttributes: ReturnType<typeof useScopeStore.getState>['filterAttributes'];
+    scopeId: string | null;
+  } | null>(null);
+  const manualScopeAcceptedRef = useRef(false);
+
+  discardPendingScopeRef.current = () => {
+    if (manualScopeAcceptedRef.current || !previousScopeRef.current) {
+      return;
+    }
+    const previous = previousScopeRef.current;
+    previousScopeRef.current = null;
+    if (previous.scopeId && previous.itemKeys.length > 0) {
+      useScopeStore.getState().setScope(
+        previous.itemKeys,
+        previous.filterAttributes,
+        previous.scopeId,
+      );
+    } else {
+      useScopeStore.getState().resetScope();
+    }
+  };
+
+  const acceptManualScope = () => {
+    manualScopeAcceptedRef.current = true;
+    previousScopeRef.current = null;
+  };
+  const [isApplying, setIsApplying] = useState(false);
+  const [isLookingUp, setIsLookingUp] = useState(false);
+  const [confirmedManualScopeId, setConfirmedManualScopeId] = useState<
+    string | null
+  >(null);
+  const activeScopeId = useScopeStore(state => state.scopeId);
+  const scopeItemKeys = useScopeStore(state => state.itemKeys);
+  const primaryColor = window.settings.theme.primaryColor || '#3E36DC';
+  const findMachineLabel =
+    window.settings.scopes?.typePlatePopupFindMachineButton ||
+    window.settings.scopes?.typePlateFindMachineButton ||
+    'Find machine';
+  const enterManuallyLabel =
+    window.settings.scopes?.typePlatePopupCtaTextButton ||
+    'Enter serial number manually';
+  const skipButtonLabel = pathname.startsWith('/result')
+    ? window.settings.scopes?.typePlatePopupBackButton || 'Back to results'
+    : window.settings.scopes?.typePlatePopupSkipButton ||
+      window.settings.scopes?.typePlateSkipButton ||
+      'Skip and search all parts';
+  const uploadImageLabel =
+    window.settings.scopes?.typePlatePopupUploadButton || 'Upload image';
+  const uploadNewTypeplateLabel =
+    window.settings.scopes?.typePlatePopupUploadNewButton ||
+    'Upload new type plate';
+  const applyingLabel =
+    window.settings.scopes?.typePlatePopupApplyingLabel || 'Applying...';
+
+  const hasManualId = manualScopeId.trim().length > 0;
+  const isScopeStillApplied =
+    Boolean(activeScopeId) && scopeItemKeys.length > 0;
+  const confirmedManualValue = confirmedManualScopeId?.trim() ?? '';
+  const isManualIdentified =
+    !previewUrl &&
+    confirmedManualValue.length > 0 &&
+    confirmedManualValue === manualScopeId.trim() &&
+    !scopeError &&
+    !isExtracting;
+  const isSuccess =
+    (Boolean(lastExtractedFromImage) || isManualIdentified) &&
+    !scopeError &&
+    !isApplying &&
+    !isLookingUp &&
+    !isExtracting;
+  const popupTitle = isSuccess
+    ? window.settings.scopes?.typePlatePopupTitleSuccess || 'Machine identified'
+    : window.settings.scopes?.typePlatePopupTitle || 'Identify your machine';
+
+  const activeScopeValue =
+    activeSource === 'image'
+      ? lastExtractedFromImage
+      : activeSource === 'manual'
+        ? manualScopeId.trim()
+        : manualScopeId.trim() || lastExtractedFromImage.trim();
+
+  const canApply =
+    !isApplying &&
+    !isLookingUp &&
+    !isExtracting &&
+    activeScopeValue.length > 0 &&
+    (activeSource !== 'manual' || isManualIdentified);
+  const hasImageError = Boolean(previewUrl && scopeError);
+  const isImageIdentified =
+    Boolean(previewUrl) &&
+    Boolean(lastExtractedFromImage) &&
+    !scopeError &&
+    !isExtracting;
+
+  const handleClearImage = () => {
+    onScopeErrorChange(null);
+    onClearPreview();
+    onActiveSourceChange(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  useEffect(() => {
+    if (!manualScopeId.trim()) {
+      setConfirmedManualScopeId(null);
+    }
+  }, [manualScopeId]);
+
+  const onFindMachine = async () => {
+    const value = manualScopeId.trim();
+    if (!value || isLookingUp || isApplying || isExtracting) {
+      return;
+    }
+
+    const currentScope = useScopeStore.getState();
+    const scopeBeforeLookup = previousScopeRef.current ?? {
+      itemKeys: [...currentScope.itemKeys],
+      filterAttributes: [...currentScope.filterAttributes],
+      scopeId: currentScope.scopeId,
+    };
+    setIsLookingUp(true);
+    onScopeErrorChange(null);
+    onActiveSourceChange('manual');
+    const defaultErrorMessage =
+      window.settings.scopes?.typePlatePopupErrorMessage ||
+      'The serial number was not found. Please check again.';
+    try {
+      const result = await applyScopeById(value);
+      if (result.status === 'applied') {
+        previousScopeRef.current = scopeBeforeLookup;
+        setConfirmedManualScopeId(value);
+        onApplied({ source: 'manual', value });
+        return;
+      }
+      setConfirmedManualScopeId(null);
+      onScopeErrorChange(t(defaultErrorMessage));
+    } catch {
+      setConfirmedManualScopeId(null);
+      onScopeErrorChange(t(defaultErrorMessage));
+    } finally {
+      setIsLookingUp(false);
+    }
+  };
+
+  const onApply = async () => {
+    if (!canApply || !activeScopeValue) {
+      return;
+    }
+    if (
+      activeSource === 'manual' &&
+      manualScopeId.trim() !== confirmedManualValue
+    ) {
+      return;
+    }
+
+    const currentSource: ScopeSource =
+      activeSource === 'image'
+        ? 'image'
+        : activeSource === 'manual'
+          ? 'manual'
+          : manualScopeId.trim()
+            ? 'manual'
+            : 'image';
+
+    const currentInput: AppliedScopeInput =
+      currentSource === 'image'
+        ? {
+            source: 'image',
+            fileKey: pendingFile
+              ? getImageFileKey(pendingFile)
+              : previewUrl || activeScopeValue,
+          }
+        : {
+            source: 'manual',
+            value: activeScopeValue,
+          };
+
+    if (
+      lastAppliedInput &&
+      isSameAppliedInput(currentInput, lastAppliedInput) &&
+      isScopeStillApplied
+    ) {
+      acceptManualScope();
+      if (onSuccess) {
+        onSuccess(scopeItemKeys);
+      } else {
+        handleClose();
+      }
+      return;
+    }
+
+    setIsApplying(true);
+    onScopeErrorChange(null);
+    const defaultErrorMessage =
+      window.settings.scopes?.typePlatePopupErrorMessage ||
+      'The serial number was not found. Please check again.';
+    try {
+      const result = await applyScopeById(activeScopeValue);
+      if (result.status === 'applied') {
+        notifyScopeResult(result, t);
+        onApplied(currentInput);
+        acceptManualScope();
+        if (onSuccess) {
+          onSuccess(result.itemKeys);
+        } else {
+          handleClose();
+        }
+        return;
+      }
+      onScopeErrorChange(t(defaultErrorMessage));
+    } catch {
+      onScopeErrorChange(t(defaultErrorMessage));
+    } finally {
+      setIsApplying(false);
+    }
+  };
+
+  const searchWithMachineButton = (
+    <button
+      type="button"
+      disabled={!canApply}
+      className={twMerge(
+        'h-12 w-fit self-start rounded-[32px] px-6 text-[14px] font-semibold text-white',
+        'flex items-center justify-center gap-2 transition-opacity',
+        'disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer',
+      )}
+      style={{ backgroundColor: primaryColor }}
+      onClick={() => {
+        void onApply();
+      }}
+    >
+      {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(window.settings.scopes?.typePlatePopupCtaButton || 'Apply')
+      )}
+    </button>
+  );
+
+  const replaceImageActions = (
+    <ScopeSelectImageActions
+      isMobile={isMobile}
+      isResolving={isApplying || isLookingUp || isExtracting}
+      onLoadImage={() => fileInputRef.current?.click()}
+      onTakePhoto={onOpenCamera}
+      uploadLabel={uploadImageLabel}
+    />
+  );
+
+  const confirmationImageActions = (
+    <ScopeSelectImageActions
+      isMobile={isMobile}
+      isResolving={isApplying || isLookingUp || isExtracting}
+      onLoadImage={() => fileInputRef.current?.click()}
+      onTakePhoto={onOpenCamera}
+      uploadLabel={uploadNewTypeplateLabel}
+    />
+  );
+
+  const identifiedConfirmationActions = isMobile ? (
+    <>
+      {confirmationImageActions}
+      {searchWithMachineButton}
+    </>
+  ) : (
+    <div className="flex flex-wrap items-center gap-3">
+      {searchWithMachineButton}
+      {confirmationImageActions}
+    </div>
+  );
+
+  return (
+    <div className="relative flex h-full flex-col overflow-hidden">
+      <div className="sticky top-0 z-100 flex w-full justify-between bg-white">
+        <div className="min-w-0 pl-4 desktop:mt-6">
+          <div className="text-2xl font-bold text-black mb-2">
+            {t(popupTitle)}
+          </div>
+        </div>
+        <div
+          onClick={handleClose}
+          className="mr-2 flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center"
+        >
+          <Icon name="close" />
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-6 py-6 desktop:bg-[#FAFAFA]">
+        <div className="flex max-w-[636px] flex-col gap-4">
+          {previewUrl && (
+            <ScopeSelectImagePreview
+              previewUrl={previewUrl}
+              extractedScopeId={lastExtractedFromImage}
+              isExtracting={isExtracting}
+              errorMessage={activeSource === 'image' ? scopeError : null}
+              onClearImage={handleClearImage}
+            />
+          )}
+
+          {isManualIdentified && (
+            <ScopeSelectImagePreview
+              thumbnail="machine"
+              extractedScopeId={confirmedManualValue}
+              isExtracting={false}
+            />
+          )}
+
+          {!previewUrl && !isManualIdentified && <ScopeSelectInfo />}
+
+          {!previewUrl && !isManualIdentified && (
+            <ScopeSelectImageActions
+              isMobile={isMobile}
+              isResolving={isApplying || isLookingUp || isExtracting}
+              onLoadImage={() => fileInputRef.current?.click()}
+              onTakePhoto={onOpenCamera}
+            />
+          )}
+
+          {!previewUrl && !isManualIdentified && (
+            <ScopeSelectInput
+              manualScopeId={manualScopeId}
+              hasManualId={hasManualId}
+              isResolving={isApplying || isLookingUp || isExtracting}
+              isApplying={isLookingUp}
+              submitLabel={findMachineLabel}
+              onManualScopeIdChange={value => {
+                onScopeErrorChange(null);
+                onActiveSourceChange('manual');
+                if (
+                  confirmedManualValue &&
+                  value.trim() !== confirmedManualValue
+                ) {
+                  setConfirmedManualScopeId(null);
+                }
+                onManualScopeIdChange(value);
+              }}
+              onClearText={() => {
+                onScopeErrorChange(null);
+                onManualScopeIdChange('');
+              }}
+              onSubmit={() => {
+                void onFindMachine();
+              }}
+            />
+          )}
+
+          {isManualIdentified && identifiedConfirmationActions}
+
+          {scopeError && (isManualMode || activeSource === 'manual') ? (
+            <div className="flex items-center gap-1.5 text-sm font-normal text-[#2B2C46]">
+              <AlertCircle className="h-4 w-4 shrink-0 text-[#2B2C46]" />
+              <span>{scopeError}</span>
+            </div>
+          ) : null}
+
+          {previewUrl &&
+            (hasImageError ? (
+              isMobile ? (
+                replaceImageActions
+              ) : (
+                <button
+                  type="button"
+                  disabled={isApplying || isExtracting}
+                  className={twMerge(
+                    'flex h-12 w-fit items-center gap-2 rounded-[32px] border border-solid',
+                    'border-[#DDDEE7] bg-white px-4 text-[14px] text-[#2B2C46] shadow-ds-2 cursor-pointer',
+                    'disabled:cursor-not-allowed disabled:bg-[#F3F3F5] disabled:text-[#BBBDCF] disabled:opacity-50',
+                  )}
+                  onClick={() => fileInputRef.current?.click()}
+                >
+                  <Icon name="gallery" width={16} height={16} fill="#3B3E5F" />
+                  {t(uploadImageLabel)}
+                </button>
+              )
+            ) : isImageIdentified ? (
+              identifiedConfirmationActions
+            ) : (
+              searchWithMachineButton
+            ))}
+        </div>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={event => {
+            const file = event.target.files?.[0];
+            event.target.value = '';
+            if (!file) {
+              return;
+            }
+            onScopeErrorChange(null);
+            onSelectedImage(file);
+          }}
+        />
+      </div>
+
+      <div className="mt-auto flex flex-col items-center justify-center gap-2 px-6 py-4">
+        {hasImageError && !isExtracting && !isManualMode && (
+          <button
+            type="button"
+            className="text-sm font-normal text-[#989BB7] underline-offset-2 hover:underline cursor-pointer"
+            onClick={onSwitchToManual}
+          >
+            {t(enterManuallyLabel)}
+          </button>
+        )}
+        {(!previewUrl || isImageIdentified) && (
+          <button
+            type="button"
+            className="text-sm font-normal text-[#989BB7] underline-offset-2 hover:underline cursor-pointer"
+            onClick={handleClose}
+          >
+            {t(skipButtonLabel)}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ScopeSelect/ScopeSelectImageActions.tsx

@@ -0,0 +1,62 @@
+import { Icon } from '@nyris/nyris-react-components';
+import { useTranslation } from 'react-i18next';
+import { twMerge } from 'tailwind-merge';
+
+interface Props {
+  isMobile: boolean;
+  isResolving: boolean;
+  onLoadImage: () => void;
+  onTakePhoto: () => void;
+  uploadLabel?: string;
+}
+
+export function ScopeSelectImageActions({
+  isMobile,
+  isResolving,
+  onLoadImage,
+  onTakePhoto,
+  uploadLabel,
+}: Props) {
+  const { t } = useTranslation();
+  const resolvedUploadLabel =
+    uploadLabel ||
+    window.settings.scopes?.typePlatePopupUploadButton ||
+    'Upload image';
+  const takePhotoLabel =
+    window.settings.scopes?.typePlatePopupTakePhotoButton || 'Take a photo';
+
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <button
+        type="button"
+        disabled={isResolving}
+        className={twMerge(
+          'flex h-12 items-center gap-2 rounded-[32px] border border-solid',
+          'border-[#DDDEE7] bg-white px-4 text-[14px] text-[#2B2C46] shadow-ds-2 cursor-pointer',
+          'disabled:cursor-not-allowed disabled:bg-[#F3F3F5] disabled:text-[#BBBDCF]',
+          'disabled:opacity-50',
+        )}
+        onClick={onLoadImage}
+      >
+        <Icon name="gallery" width={16} height={16} fill="#3B3E5F" />
+        {t(resolvedUploadLabel)}
+      </button>
+      {isMobile && (
+        <button
+          type="button"
+          disabled={isResolving}
+          className={twMerge(
+            'flex h-12 items-center gap-2 rounded-[32px] border border-solid',
+            'border-[#DDDEE7] bg-white px-4 text-[14px] text-[#2B2C46] shadow-ds-2 cursor-pointer',
+            'disabled:cursor-not-allowed disabled:bg-[#F3F3F5] disabled:text-[#BBBDCF]',
+            'disabled:opacity-50',
+          )}
+          onClick={onTakePhoto}
+        >
+          <Icon name="camera_ai" width={16} height={16} fill="#3B3E5F" />
+          {t(takePhotoLabel)}
+        </button>
+      )}
+    </div>
+  );
+}