From bc5607f48cbf0a1db15037f04eef6e5be9cf1b28 Mon Sep 17 00:00:00 2001 From: Matt Date: Wed, 5 Mar 2025 22:08:50 -0500 Subject: [PATCH] Fix upc validation api call --- .../components/ValidationCell.tsx | 118 ++++++++++-------- .../components/ValidationContainer.tsx | 3 +- .../hooks/useUpcValidation.tsx | 3 +- .../hooks/useValidationState.tsx | 6 +- 4 files changed, 73 insertions(+), 57 deletions(-) diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx index 85106ee..8f32742 100644 --- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx +++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx @@ -37,38 +37,6 @@ const ValidationIcon = React.memo(({ error }: { error: ErrorObject }) => ( ValidationIcon.displayName = 'ValidationIcon'; -// Separate component for item number cells to ensure they update independently -const ItemNumberCell = React.memo(({ - value, - itemNumber, - isValidating, - width -}: { - value: any, - itemNumber?: string, - isValidating?: boolean, - width: number -}) => ( - -
- {isValidating ? ( -
- - {itemNumber || value || ''} -
- ) : ( - {itemNumber || value || ''} - )} -
- -), (prev, next) => ( - prev.value === next.value && - prev.itemNumber === next.itemNumber && - prev.isValidating === next.isValidating -)); - -ItemNumberCell.displayName = 'ItemNumberCell'; - // Memoized base cell content component const BaseCellContent = React.memo(({ field, @@ -143,6 +111,66 @@ export interface ValidationCellProps { rowIndex: number } +const ItemNumberCell = React.memo(({ + value, + itemNumber, + isValidating, + width, + errors = [], + field, + onChange +}: { + value: any, + itemNumber?: string, + isValidating?: boolean, + width: number, + errors?: ErrorObject[], + field: Field, + onChange: (value: any) => void +}) => { + const hasError = errors.some(error => error.level === 'error' || error.level === 'warning'); + const isRequiredButEmpty = errors.some(error => error.level === 'required' && (!value || value.trim() === '')); + const nonRequiredErrors = errors.filter(error => error.level !== 'required'); + + return ( + +
+ {isValidating ? ( +
+ + {itemNumber || value || ''} +
+ ) : ( +
+ +
+ )} + {nonRequiredErrors.length > 0 && !isRequiredButEmpty && ( +
+ e.message).join('\n'), + level: 'error' + }} /> +
+ )} +
+ + ); +}, (prev, next) => ( + prev.value === next.value && + prev.itemNumber === next.itemNumber && + prev.isValidating === next.isValidating && + JSON.stringify(prev.errors) === JSON.stringify(next.errors) +)); + +ItemNumberCell.displayName = 'ItemNumberCell'; + const ValidationCell = ({ field, value, @@ -161,14 +189,13 @@ const ValidationCell = ({ itemNumber={itemNumber} isValidating={isValidating} width={width} + errors={errors} + field={field} + onChange={onChange} /> ); } - // For UPC fields, show loading indicator during validation - const isUpcField = fieldKey === 'upc' || fieldKey === 'barcode'; - const showLoadingIndicator = isUpcField && isValidating; - // Error states const hasError = errors.some(error => error.level === 'error' || error.level === 'warning'); const isRequiredButEmpty = errors.some(error => error.level === 'required' && (!value || value.trim() === '')); @@ -176,13 +203,9 @@ const ValidationCell = ({ return ( -
- {showLoadingIndicator && ( -
- -
- )} - +
+ +
{ ); } - // For UPC fields, include validation state in comparison - if (prev.fieldKey === 'upc' || prev.fieldKey === 'barcode') { - return ( - prev.value === next.value && - prevErrorsStr === nextErrorsStr && - prev.isValidating === next.isValidating - ); - } - // For all other fields, compare core props return ( prev.value === next.value && diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx index 7d53443..333fbfb 100644 --- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx +++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx @@ -10,6 +10,7 @@ import { ProductSearchDialog } from '@/components/products/ProductSearchDialog' import SearchableTemplateSelect from './SearchableTemplateSelect' import { useAiValidation } from '../hooks/useAiValidation' import { AiValidationDialogs } from './AiValidationDialogs' +import config from '@/config' /** * ValidationContainer component - the main wrapper for the validation step @@ -187,7 +188,7 @@ const ValidationContainer = ({ } // Make API call to validate UPC - const response = await fetch(`/api/import/check-upc-and-generate-sku?upc=${encodeURIComponent(upcValue)}&supplierId=${encodeURIComponent(supplierId)}`); + const response = await fetch(`${config.apiUrl}/import/check-upc-and-generate-sku?upc=${encodeURIComponent(upcValue)}&supplierId=${encodeURIComponent(supplierId)}`); // Process the response if (response.status === 409) { diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx index d2f7270..9385d76 100644 --- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx +++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx @@ -1,4 +1,5 @@ import { useState, useCallback, useRef } from 'react' +import config from '@/config' interface UpcValidationResult { error?: boolean @@ -67,7 +68,7 @@ export const useUpcValidation = () => { try { // Call the UPC validation API - const response = await fetch(`/api/import/check-upc-and-generate-sku?upc=${encodeURIComponent(upcValue)}&supplierId=${encodeURIComponent(supplier)}`); + const response = await fetch(`${config.apiUrl}/import/check-upc-and-generate-sku?upc=${encodeURIComponent(upcValue)}&supplierId=${encodeURIComponent(supplier)}`); if (response.status === 409) { const errorData = await response.json(); diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx index fec32da..dc5866b 100644 --- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx +++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx @@ -76,7 +76,7 @@ declare global { } // Use a helper to get API URL consistently -export const getApiUrl = () => window.config?.apiUrl || '/api'; +export const getApiUrl = () => config.apiUrl; // Main validation state hook export const useValidationState = ({ @@ -125,7 +125,7 @@ export const useValidationState = ({ const fetchProductByUpc = useCallback(async (supplier: string, upc: string): Promise => { try { // Use the correct endpoint and parameter names - const response = await fetch(`${getApiUrl()}/check-upc-and-generate-sku?supplierId=${encodeURIComponent(supplier)}&upc=${encodeURIComponent(upc)}`, { + const response = await fetch(`${getApiUrl()}/import/check-upc-and-generate-sku?supplierId=${encodeURIComponent(supplier)}&upc=${encodeURIComponent(upc)}`, { method: 'GET', headers: { 'Content-Type': 'application/json', @@ -224,7 +224,7 @@ export const useValidationState = ({ } // Make API call to validate UPC - const response = await fetch(`/api/import/check-upc-and-generate-sku?upc=${encodeURIComponent(upcValue)}&supplierId=${encodeURIComponent(supplierId)}`); + const response = await fetch(`${config.apiUrl}/import/check-upc-and-generate-sku?upc=${encodeURIComponent(upcValue)}&supplierId=${encodeURIComponent(supplierId)}`); if (response.status === 409) { // UPC already exists - show validation error