@faststore/core 4.3.0-dev.1 → 4.3.0-dev.3

package/src/components/search/SearchInput/SearchInput.tsx

@@ -27,16 +27,13 @@ import {
   Icon as UIIcon,
   IconButton as UIIconButton,
   SearchInput as UISearchInput,
-  useCSVParser,
   useOnClickOutside,
-  useUI,
 } from '@faststore/ui'
 
 import type {
-  CSVData,
-  Product,
   SearchInputFieldProps as UISearchInputFieldProps,
   SearchInputFieldRef as UISearchInputFieldRef,
+  Product,
 } from '@faststore/ui'
 
 import type { SearchProviderContextValue } from '@faststore/ui'
@@ -46,10 +43,13 @@ import useSearchHistory from 'src/sdk/search/useSearchHistory'
 import useSuggestions from 'src/sdk/search/useSuggestions'
 
 import { cartStore } from 'src/sdk/cart'
-import { convertProductToQuickOrder } from 'src/sdk/product/convertProductToQuickOrder'
-import { useBulkProductsQuery } from 'src/sdk/product/useBulkProductsQuery'
+import type { CartItem } from 'src/sdk/cart'
 import { usePriceFormatter } from 'src/sdk/product/useFormattedPrice'
-import { useFormatSearchPath } from 'src/sdk/search/formatSearchPath'
+import { useAuth } from 'src/sdk/auth'
+import { useOrderEntry } from 'src/sdk/orderEntry/useOrderEntry'
+import { useOrderFormItems } from 'src/sdk/orderEntry/useOrderFormItems'
+import type { OrderFormCartItem } from 'src/sdk/orderEntry/useOrderFormItems'
+import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
 import { formatFileName, formatFileSize } from 'src/utils/utilities'
 
 const SearchDropdown = lazy(
@@ -74,9 +74,6 @@ export type SearchInputProps = {
   loadingLabel?: string
   searchHistoryTitle?: string
   searchTopTitle?: string
-  // Called when the user clicks Search in the file upload card, with the parsed CSV data.
-  // Use this to run bulk search, add to cart, or analytics.
-  onFileSearch?: (data: CSVData) => void
 } & Omit<UISearchInputFieldProps, 'onSubmit' | 'attachmentButtonIcon'>
 
 export type SearchInputRef = UISearchInputFieldRef & {
@@ -92,6 +89,22 @@ const sendAnalytics = async (term: string) => {
   })
 }
 
+export function mapOrderFormItemsToProducts(
+  items: OrderFormCartItem[]
+): Product[] {
+  return items.map((item) => ({
+    id: item.id,
+    name: item.name,
+    price: item.price,
+    quantityUpdated: false,
+    image: { url: item.imageUrl ?? '', alternateName: item.name },
+    inventory: item.availability === 'available' ? 9999 : 0,
+    availability:
+      item.availability === 'available' ? 'available' : 'outOfStock',
+    selectedCount: item.quantity,
+  }))
+}
+
 const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
   function SearchInput(
     {
@@ -101,11 +114,6 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
       sort,
       placeholder,
       quickOrderSettings,
-      submitButtonAriaLabel,
-      loadingLabel,
-      searchHistoryTitle,
-      searchTopTitle,
-      onFileSearch,
       ...otherProps
     },
     ref
@@ -124,40 +132,55 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
     const [hasFile, setHasFile] = useState(false)
     const [isQuickOrderDrawerOpen, setIsQuickOrderDrawerOpen] = useState(false)
     const [quickOrderProducts, setQuickOrderProducts] = useState<Product[]>([])
-    const [noProductsError, setNoProductsError] = useState<boolean>(false)
+    const [oesOrderFormItems, setOesOrderFormItems] = useState<
+      OrderFormCartItem[]
+    >([])
 
     const searchRef = useRef<HTMLDivElement>(null)
     const { addToSearchHistory } = useSearchHistory()
     const router = useRouter()
-    const formatSearchPath = useFormatSearchPath()
     const priceFormatter = usePriceFormatter()
-    const { pushToast } = useUI()
 
-    const [csvData, setCsvData] = useState<CSVData | null>(null)
     const [selectedFile, setSelectedFile] = useState<File | null>(null)
-    const [skusToFetch, setSkusToFetch] = useState<string[]>([])
-    const [skuQuantityMap, setSkuQuantityMap] = useState<
-      Record<string, number>
-    >({})
-    const [isLoadingWithDelay, setIsLoadingWithDelay] = useState(false)
-
-    const csvParserOptions = useMemo(
-      () => ({ delimiter: ',' as const, skipEmptyLines: true }),
-      []
-    )
 
-    const csvParser = useCSVParser(csvParserOptions)
     const {
-      error: csvError,
-      isParsing: isCsvProcessing,
-      onParseFile,
-      onClearError,
-      onGenerateTemplate,
-    } = csvParser
-
-    const isQuickOrderEnabled = quickOrderSettings?.quickOrder ?? false
+      submitFile,
+      status: oesStatus,
+      isUploading: isOESUploading,
+      isProcessing: isOESProcessing,
+      error: oesError,
+      reset: resetOES,
+    } = useOrderEntry()
+
+    const {
+      fetchOrderFormItems,
+      items: orderFormItems,
+      reset: resetOrderFormItems,
+    } = useOrderFormItems()
+
+    useEffect(() => {
+      if (
+        (oesStatus?.status === 'SUCCESS' ||
+          oesStatus?.status === 'PARTIAL_SUCCESS') &&
+        oesStatus.entityId
+      ) {
+        fetchOrderFormItems(oesStatus.entityId)
+      }
+    }, [oesStatus?.status, oesStatus?.entityId, fetchOrderFormItems])
+
+    useEffect(() => {
+      if (!orderFormItems || orderFormItems.length === 0) return
+      setOesOrderFormItems(orderFormItems)
+      setQuickOrderProducts(mapOrderFormItemsToProducts(orderFormItems))
+      setFileUploadVisible(false)
+      setIsUploadOpen(false)
+      setIsQuickOrderDrawerOpen(true)
+    }, [orderFormItems])
+
+    const { isAuthenticated } = useAuth()
+    const isQuickOrderEnabled =
+      (quickOrderSettings?.quickOrder ?? false) && isAuthenticated
     const attachmentButton = quickOrderSettings?.attachmentButton
-    const toastMessages = quickOrderSettings?.toastMessages
     const drawerConfig = quickOrderSettings?.drawer
     const a11yLabels = quickOrderSettings?.accessibilityLabels
     const fileUploadCardConfig = quickOrderSettings?.fileUploadCard
@@ -166,16 +189,6 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
       resetSearchInput: () => setSearchQuery(''),
     }))
 
-    // Map CSV parser error types to FileUploadErrorType
-    const mapCSVErrorToFileUploadErrorType = (
-      csvErrorType?: string
-    ): FileUploadErrorType => {
-      if (csvErrorType === 'FILE_ERROR') {
-        return FileUploadErrorType.Unreadable
-      }
-      return FileUploadErrorType.InvalidStructure
-    }
-
     const onSearchSelection: SearchProviderContextValue['onSearchSelection'] = (
       term,
       path
@@ -185,252 +198,31 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
       setSearchDropdownVisible(false)
     }
 
-    const handleFileSelect = async (files: File[]) => {
+    const handleFileSelect = (files: File[]) => {
       if (files.length === 0) return
-
       setHasFile(true)
       setIsUploadOpen(true)
-
-      const file = files[0]
-      setSelectedFile(file)
-
-      onClearError()
-      setCsvData(null)
-      setQuickOrderProducts([])
-      setSkusToFetch([])
-      setSkuQuantityMap({})
-      setIsQuickOrderDrawerOpen(false)
-      setNoProductsError(false)
-
-      const result = await onParseFile(file)
-
-      if (result && result.data && result.data.length > 0) {
-        setCsvData(result)
-      }
-    }
-
-    const handleDownloadTemplate = async () => {
-      try {
-        const csvContent = await onGenerateTemplate()
-
-        if (csvContent) {
-          const blob = new Blob([csvContent], { type: 'text/csv' })
-          const url = window.URL.createObjectURL(blob)
-          const a = document.createElement('a')
-          a.href = url
-          a.download = 'template.csv'
-          document.body.appendChild(a)
-          a.click()
-          document.body.removeChild(a)
-          window.URL.revokeObjectURL(url)
-        }
-      } catch (error) {
-        console.error('Failed to download template:', error)
-      }
+      setSelectedFile(files[0])
+      resetOES()
     }
 
     const handleDismiss = () => {
-      setCsvData(null)
       setSelectedFile(null)
-      setSkusToFetch([])
-      setSkuQuantityMap({})
       setQuickOrderProducts([])
+      setOesOrderFormItems([])
       setFileUploadVisible(false)
       setHasFile(false)
       setIsUploadOpen(false)
-      setNoProductsError(false)
-      onClearError()
+      resetOES()
+      resetOrderFormItems()
     }
 
     const handleSearch = async (_file?: File) => {
-      let dataToUse = csvData
-
-      if (!dataToUse || !dataToUse.data || dataToUse.data.length === 0) {
-        const fileToParse = _file || selectedFile
-
-        if (!fileToParse) {
-          pushToast({
-            title: toastMessages?.noFileSelected?.title,
-            message: toastMessages?.noFileSelected?.message,
-            status: 'ERROR',
-            icon: <UIIcon name="CircleWavyWarning" width={30} height={30} />,
-          })
-          return
-        }
-
-        try {
-          const parsePromise = onParseFile(fileToParse)
-
-          const timeoutPromise = new Promise<never>((_, reject) => {
-            setTimeout(() => {
-              reject(new Error(toastMessages?.fileTimeout?.message))
-            }, 30000)
-          })
-
-          const result = (await Promise.race([
-            parsePromise,
-            timeoutPromise,
-          ])) as Awaited<ReturnType<typeof onParseFile>>
-
-          if (result && result.data && result.data.length > 0) {
-            dataToUse = result
-            setCsvData(result)
-          } else {
-            pushToast({
-              title: toastMessages?.noDataFound?.title,
-              message: toastMessages?.noDataFound?.message,
-              status: 'ERROR',
-              icon: <UIIcon name="CircleWavyWarning" width={30} height={30} />,
-            })
-            return
-          }
-        } catch (error) {
-          const errorMessage =
-            error instanceof Error
-              ? error.message
-              : toastMessages?.fileProcessingError?.defaultMessage
-          pushToast({
-            title: toastMessages?.fileProcessingError?.title,
-            message: errorMessage,
-            status: 'ERROR',
-            icon: <UIIcon name="CircleWavyWarning" width={30} height={30} />,
-          })
-          return
-        }
-      }
-
-      if (!dataToUse || !dataToUse.data || dataToUse.data.length === 0) {
-        pushToast({
-          title: toastMessages?.noDataAvailable?.title,
-          message: toastMessages?.noDataAvailable?.message,
-          status: 'ERROR',
-          icon: <UIIcon name="CircleWavyWarning" width={30} height={30} />,
-        })
-        return
-      }
-
-      const payload = {
-        fileName: dataToUse.fileName,
-        totalRows: dataToUse.totalRows,
-        fileSize: dataToUse.fileSize,
-        data: dataToUse.data,
-      }
-      try {
-        window.dispatchEvent(
-          new CustomEvent('faststore:file-search', { detail: payload })
-        )
-      } catch {
-        // ignore in envs without window
-      }
-      onFileSearch?.(dataToUse)
-
-      const map: Record<string, number> = {}
-      for (const item of dataToUse.data) {
-        const sku = item.sku?.trim()
-        if (!sku) continue
-        map[sku] = (map[sku] ?? 0) + (item.quantity ?? 1)
-      }
-      const uniqueSkus = Object.keys(map)
-
-      if (uniqueSkus.length === 0) {
-        pushToast({
-          title: toastMessages?.noValidSkus?.title,
-          message: toastMessages?.noValidSkus?.message,
-          status: 'ERROR',
-          icon: <UIIcon name="CircleWavyWarning" width={30} height={30} />,
-        })
-        return
-      }
-
-      setQuickOrderProducts([])
-      setNoProductsError(false)
-      setIsLoadingWithDelay(true)
-      setSkuQuantityMap(map)
-      // Open drawer immediately to show loading skeleton
-      setIsQuickOrderDrawerOpen(true)
-      setFileUploadVisible(false)
-      setSkusToFetch(uniqueSkus)
+      const file = _file ?? selectedFile
+      if (!file) return
+      await submitFile(file)
     }
 
-    const { products: fetchedProducts, isLoading: isLoadingProducts } =
-      useBulkProductsQuery(skusToFetch)
-
-    useEffect(() => {
-      if (skusToFetch.length > 0 && isLoadingProducts) {
-        // Clear products and show loading skeleton
-        setQuickOrderProducts([])
-        setIsLoadingWithDelay(true)
-        // Keep drawer open to show loading skeleton
-        setIsQuickOrderDrawerOpen(true)
-        setFileUploadVisible(false)
-        setNoProductsError(false)
-        return
-      }
-
-      if (
-        !isLoadingProducts &&
-        skusToFetch.length > 0 &&
-        Object.keys(skuQuantityMap).length > 0 &&
-        fetchedProducts.length > 0
-      ) {
-        // Add artificial delay to test loading state
-        setIsLoadingWithDelay(true)
-
-        const timeoutId = setTimeout(() => {
-          const convertedProducts: Product[] = []
-
-          fetchedProducts.forEach((productData) => {
-            if (productData.product && !productData.error) {
-              const requestedQuantity =
-                skuQuantityMap[productData.sku ?? ''] ?? 1
-
-              const convertedProduct = convertProductToQuickOrder(
-                productData.product,
-                requestedQuantity
-              )
-
-              if (convertedProduct) {
-                convertedProducts.push(convertedProduct)
-              }
-            }
-          })
-
-          setQuickOrderProducts(convertedProducts)
-          setIsLoadingWithDelay(false)
-
-          if (convertedProducts.length > 0) {
-            setIsQuickOrderDrawerOpen(true)
-            setFileUploadVisible(false)
-            setNoProductsError(false)
-          } else {
-            // Keep drawer open to show empty state message
-            setQuickOrderProducts([])
-            setIsQuickOrderDrawerOpen(true)
-            setFileUploadVisible(false)
-            setNoProductsError(true)
-          }
-        }, 2000) // 2 second delay for testing
-
-        return () => {
-          clearTimeout(timeoutId)
-        }
-      }
-
-      if (
-        !isLoadingProducts &&
-        skusToFetch.length > 0 &&
-        Object.keys(skuQuantityMap).length > 0 &&
-        fetchedProducts.length === 0
-      ) {
-        // Keep drawer open to show empty state message
-        setQuickOrderProducts([])
-        setIsQuickOrderDrawerOpen(true)
-        setFileUploadVisible(false)
-        setNoProductsError(true)
-        setIsLoadingWithDelay(false)
-      }
-    }, [fetchedProducts, skusToFetch, skuQuantityMap, isLoadingProducts])
-
     useOnClickOutside(searchRef, () => {
       setSearchDropdownVisible(customSearchDropdownVisibleCondition ?? false)
       setFileUploadVisible(false)
@@ -451,48 +243,60 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
     const buttonProps = {
       onClick: onSearchClick,
       testId: buttonTestId,
-      'aria-label': submitButtonAriaLabel,
     }
 
     const handleAddToCart = useCallback(
       (productsToAdd: Product[]) => {
-        productsToAdd.forEach((product: Product) => {
+        for (const product of productsToAdd) {
           if (
-            product.selectedCount > 0 &&
-            product.availability === 'available'
-          ) {
-            const fetchedProduct = fetchedProducts.find(
-              (p) => p.product?.sku === product.id
-            )?.product
-
-            if (fetchedProduct && fetchedProduct.offers?.offers[0]) {
-              const offer = fetchedProduct.offers.offers[0]
-
-              cartStore.addItem({
-                itemOffered: {
-                  sku: fetchedProduct.sku,
-                  name: fetchedProduct.name,
-                  unitMultiplier: fetchedProduct.unitMultiplier ?? 1,
-                  image: fetchedProduct.image,
-                  brand: fetchedProduct.brand,
-                  isVariantOf: fetchedProduct.isVariantOf,
-                  gtin: fetchedProduct.gtin,
-                  additionalProperty: fetchedProduct.additionalProperty,
+            product.selectedCount <= 0 ||
+            product.availability !== 'available'
+          )
+            continue
+
+          const originalItem = oesOrderFormItems.find(
+            (item) => item.id === product.id
+          )
+
+          const cartItem: Omit<CartItem, 'id'> = {
+            itemOffered: {
+              sku: product.id,
+              name: product.name,
+              unitMultiplier: originalItem?.unitMultiplier ?? 1,
+              image: [
+                {
+                  url: product.image.url,
+                  alternateName: product.image.alternateName,
                 },
-                seller: offer.seller,
-                quantity: product.selectedCount,
-                price: product.price,
-                listPrice: offer.listPrice ?? product.price,
-                priceWithTaxes: offer.priceWithTaxes ?? product.price,
-                listPriceWithTaxes: offer.listPriceWithTaxes ?? product.price,
-              })
-            }
+              ],
+              brand: { name: '' },
+              isVariantOf: {
+                productGroupID: '',
+                name: product.name,
+                skuVariants: {
+                  activeVariations: {},
+                  slugsMap: {},
+                  availableVariations: {},
+                },
+              },
+              gtin: '',
+              additionalProperty: [],
+            },
+            seller: { identifier: originalItem?.seller ?? '1' },
+            quantity: product.selectedCount,
+            price: product.price,
+            priceWithTaxes: product.price,
+            listPrice: originalItem?.listPrice ?? product.price,
+            listPriceWithTaxes: originalItem?.listPrice ?? product.price,
           }
-        })
 
+          cartStore.addItem(cartItem)
+        }
         setIsQuickOrderDrawerOpen(false)
+        setQuickOrderProducts([])
+        setOesOrderFormItems([])
       },
-      [fetchedProducts]
+      [oesOrderFormItems]
     )
 
     const getCompletedStatusText = useCallback(
@@ -521,9 +325,7 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
         {hidden ? (
           <UIIconButton
             type="submit"
-            aria-label={
-              a11yLabels?.searchButtonAriaLabel ?? submitButtonAriaLabel
-            }
+            aria-label={a11yLabels?.searchButtonAriaLabel ?? 'Search'}
             icon={<UIIcon name="MagnifyingGlass" />}
             size="small"
             {...buttonProps}
@@ -585,9 +387,6 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
                 <SearchDropdown
                   sort={sort as SearchState['sort']}
                   quickOrderSettings={quickOrderSettings}
-                  loadingLabel={loadingLabel}
-                  searchHistoryTitle={searchHistoryTitle}
-                  searchTopTitle={searchTopTitle}
                   onChangeCustomSearchDropdownVisible={
                     setCustomSearchDropdownVisibleCondition
                   }
@@ -611,23 +410,25 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
                 }
                 searchButtonLabel={fileUploadCardConfig?.searchButtonLabel}
                 uploadingStatusText={fileUploadCardConfig?.uploadingStatusText}
+                processingStatusText={
+                  fileUploadCardConfig?.processingStatusText ?? 'Importing...'
+                }
                 getCompletedStatusText={getCompletedStatusText}
                 errorMessages={resolvedErrorMessages}
                 accept={fileUploadCardConfig?.acceptedFileTypes}
                 isOpen={isUploadOpen || hasFile || fileUploadVisible}
                 onDismiss={handleDismiss}
                 onFileSelect={handleFileSelect}
-                onDownloadTemplate={handleDownloadTemplate}
                 formatterFileSize={formatFileSize}
                 formatterFileName={formatFileName}
                 onSearch={handleSearch}
-                isUploading={isCsvProcessing || isLoadingProducts}
-                hasError={(!!csvError || noProductsError) && !isLoadingProducts}
-                {...((csvError || (noProductsError && !isLoadingProducts)) && {
-                  errorType: noProductsError
-                    ? FileUploadErrorType.NoProductsFound
-                    : mapCSVErrorToFileUploadErrorType(csvError.type),
-                  errorMessage: noProductsError ? undefined : csvError?.message,
+                isUploading={isOESUploading}
+                isProcessing={isOESProcessing}
+                hasError={!!oesError || oesStatus?.status === 'FAILED'}
+                {...((oesError || oesStatus?.status === 'FAILED') && {
+                  errorType: FileUploadErrorType.Unreadable,
+                  errorMessage:
+                    oesError?.message ?? oesStatus?.message ?? undefined,
                 })}
               />
             )}
@@ -639,16 +440,23 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
             onClick: () => {
               setIsQuickOrderDrawerOpen(false)
               setQuickOrderProducts([])
-              setSkusToFetch([])
-              setSkuQuantityMap({})
+              setOesOrderFormItems([])
             },
           }}
           providerProps={{
             initialProducts: quickOrderProducts,
-            isLoading: isLoadingProducts || isLoadingWithDelay,
-            totalRequestedSkus: Object.keys(skuQuantityMap).length || 0,
+            isLoading: false,
+            totalRequestedSkus: 0,
             onAddToCart: handleAddToCart,
-            alertMessages: drawerConfig?.alertMessages,
+            alertMessages: {
+              ...drawerConfig?.alertMessages,
+              ...(oesStatus?.status === 'PARTIAL_SUCCESS' && {
+                notFound:
+                  oesStatus.message ??
+                  drawerConfig?.alertMessages?.notFound ??
+                  'Some items could not be imported.',
+              }),
+            },
           }}
         >
           <QuickOrderDrawerHeader
@@ -660,8 +468,7 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
             onCloseDrawer={() => {
               setIsQuickOrderDrawerOpen(false)
               setQuickOrderProducts([])
-              setSkusToFetch([])
-              setSkuQuantityMap({})
+              setOesOrderFormItems([])
             }}
           />
           <QuickOrderDrawerProducts

package/src/components/sections/Navbar/Navbar.tsx

@@ -108,6 +108,7 @@ export interface NavbarProps {
         removeButtonAriaLabel?: string
         searchButtonLabel?: string
         uploadingStatusText?: string
+        processingStatusText?: string
         completedStatusTemplate?: string
         acceptedFileTypes?: string
         errorMessages?: Partial<

package/src/components/sections/Navbar/section.module.scss

@@ -36,6 +36,9 @@
     @include meta.load-css("~@faststore/ui/src/components/organisms/Navbar/styles.scss");
     @include meta.load-css("~@faststore/ui/src/components/organisms/SlideOver/styles.scss");
     @include meta.load-css("~@faststore/ui/src/components/organisms/SKUMatrix/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Card/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/FileUploadCard/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/FileUploadStatus/styles.scss");
     @include meta.load-css("~@faststore/ui/src/components/organisms/QuickOrderDrawer/styles.scss");
 
     // Sets Navbar height on desktop to avoid CLS issue - Cumulative Layout Shift

package/src/sdk/auth/index.ts

@@ -17,7 +17,7 @@ export const useAuth = () => {
     Boolean(channel.salesChannel) &&
     channel.hasOnlyDefaultSalesChannel === false
 
-  const isAutenticated = hasSalesChannel && person
+  const isAuthenticated = hasSalesChannel && person
 
-  return { isAutenticated, profile: person, channel, isValidating }
+  return { isAuthenticated, profile: person, channel, isValidating }
 }