@faststore/components 3.98.0-dev.1 → 3.98.0-dev.8

package/dist/esm/organisms/QuickOrderDrawer/provider/QuickOrderDrawerProvider.d.ts

@@ -0,0 +1,61 @@
+import React, { type ReactNode } from 'react';
+import type { PriceFormatter } from '../../../atoms/Price';
+export interface Product {
+    id: string;
+    name: string;
+    price: number;
+    quantityUpdated: boolean;
+    image: {
+        url: string;
+        alternateName: string;
+    };
+    inventory: number;
+    availability: 'available' | 'outOfStock';
+    selectedCount: number;
+}
+export interface VariationProductColumn {
+    name: string;
+    availability: {
+        label: string;
+        stockDisplaySettings: 'showStockQuantity' | 'showAvailability';
+    };
+    price: string;
+    quantity: string;
+}
+interface QuickOrderDrawerContextValue {
+    products: Product[];
+    totalPrice: number;
+    itemsCount: number;
+    alertMessage: string;
+    isLoading: boolean;
+    setAlertMessage: (message: string) => void;
+    onChangeQuantityItem: (id: string, value: number) => void;
+    onDelete: (id: string) => void;
+    onAddToCart: () => void;
+    formatter?: PriceFormatter;
+}
+export interface AlertMessages {
+    notFoundAndOutOfStock?: string;
+    notFound?: string;
+    outOfStock?: string;
+}
+export interface QuickOrderDrawerProviderProps {
+    children: ReactNode;
+    initialProducts?: Product[];
+    isLoading?: boolean;
+    totalRequestedSkus?: number;
+    onAddToCart?: (products: Product[], totalPrice: number, itemsCount: number) => void;
+    formatter?: PriceFormatter;
+    /**
+     * Initial alert message for CMS configuration
+     */
+    initialAlertMessage?: string;
+    /**
+     * Alert messages from CMS for different scenarios.
+     */
+    alertMessages?: AlertMessages;
+}
+export declare const QuickOrderDrawerProvider: ({ children, initialProducts, isLoading, totalRequestedSkus, onAddToCart: onAddToCartCallback, formatter, initialAlertMessage, alertMessages, }: QuickOrderDrawerProviderProps) => React.JSX.Element;
+export declare const useQuickOrderDrawer: () => QuickOrderDrawerContextValue;
+export {};
+//# sourceMappingURL=QuickOrderDrawerProvider.d.ts.map

package/dist/esm/organisms/QuickOrderDrawer/provider/QuickOrderDrawerProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickOrderDrawerProvider.d.ts","sourceRoot":"","sources":["../../../../../src/organisms/QuickOrderDrawer/provider/QuickOrderDrawerProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1D,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,EAAE,OAAO,CAAA;IACxB,KAAK,EAAE;QACL,GAAG,EAAE,MAAM,CAAA;QACX,aAAa,EAAE,MAAM,CAAA;KACtB,CAAA;IACD,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,WAAW,GAAG,YAAY,CAAA;IACxC,aAAa,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE;QACZ,KAAK,EAAE,MAAM,CAAA;QACb,oBAAoB,EAAE,mBAAmB,GAAG,kBAAkB,CAAA;KAC/D,CAAA;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,UAAU,4BAA4B;IACpC,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,oBAAoB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACzD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,SAAS,CAAC,EAAE,cAAc,CAAA;CAC3B;AAMD,MAAM,WAAW,aAAa;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,SAAS,CAAA;IACnB,eAAe,CAAC,EAAE,OAAO,EAAE,CAAA;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,CACZ,QAAQ,EAAE,OAAO,EAAE,EACnB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,KACf,IAAI,CAAA;IACT,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAA;CAC9B;AAED,eAAO,MAAM,wBAAwB,mJASlC,6BAA6B,sBAwG/B,CAAA;AAED,eAAO,MAAM,mBAAmB,QAAO,4BAUtC,CAAA"}

package/dist/esm/organisms/QuickOrderDrawer/provider/QuickOrderDrawerProvider.js

@@ -0,0 +1,80 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+const QuickOrderDrawerContext = createContext(undefined);
+export const QuickOrderDrawerProvider = ({ children, initialProducts = [], isLoading = false, totalRequestedSkus, onAddToCart: onAddToCartCallback, formatter, initialAlertMessage, alertMessages, }) => {
+    const [products, setProducts] = useState(initialProducts || []);
+    const getAlertMessage = (prods, totalRequestedSkus) => {
+        if (prods.length === 0) {
+            return '';
+        }
+        const hasOutOfStock = prods.some((p) => p.availability === 'outOfStock');
+        const hasNotFound = totalRequestedSkus !== undefined &&
+            totalRequestedSkus > 0 &&
+            prods.length < totalRequestedSkus;
+        if (hasNotFound && hasOutOfStock) {
+            return alertMessages?.notFoundAndOutOfStock ?? '';
+        }
+        if (hasNotFound) {
+            return alertMessages?.notFound ?? '';
+        }
+        if (hasOutOfStock) {
+            return alertMessages?.outOfStock ?? '';
+        }
+        return '';
+    };
+    const [alertMessage, setAlertMessage] = useState(initialAlertMessage ?? '');
+    useEffect(() => {
+        const newProducts = initialProducts || [];
+        setProducts(newProducts);
+    }, [initialProducts]);
+    useEffect(() => {
+        if (!isLoading) {
+            setAlertMessage(getAlertMessage(products, totalRequestedSkus));
+        }
+        else if (isLoading) {
+            setAlertMessage('');
+        }
+    }, [products, isLoading, totalRequestedSkus]);
+    const { totalPrice, itemsCount } = useMemo(() => {
+        const filteredProducts = products.filter((product) => product.selectedCount > 0 && product.availability === 'available');
+        return filteredProducts.reduce((prev, curr) => ({
+            totalPrice: prev.totalPrice + curr.price * curr.selectedCount,
+            itemsCount: prev.itemsCount + curr.selectedCount,
+        }), { totalPrice: 0, itemsCount: 0 });
+    }, [products]);
+    const onChangeQuantityItem = useCallback((id, value) => {
+        setProducts((oldProducts) => oldProducts.map((product) => {
+            if (product.id !== id) {
+                return product;
+            }
+            return { ...product, selectedCount: value };
+        }));
+    }, []);
+    const onDelete = useCallback((id) => {
+        setProducts((oldProducts) => oldProducts.filter((product) => product.id !== id));
+    }, []);
+    const onAddToCart = useCallback(() => {
+        const productsToAdd = products.filter((product) => product.selectedCount > 0 && product.availability === 'available');
+        onAddToCartCallback?.(productsToAdd, totalPrice, itemsCount);
+    }, [products, totalPrice, itemsCount, onAddToCartCallback]);
+    const value = {
+        products,
+        totalPrice,
+        itemsCount,
+        alertMessage,
+        isLoading,
+        setAlertMessage,
+        onChangeQuantityItem,
+        onDelete,
+        onAddToCart,
+        formatter,
+    };
+    return (React.createElement(QuickOrderDrawerContext.Provider, { value: value }, children));
+};
+export const useQuickOrderDrawer = () => {
+    const context = useContext(QuickOrderDrawerContext);
+    if (context === undefined) {
+        throw new Error('useQuickOrderDrawer should be used within a QuickOrderDrawerProvider');
+    }
+    return context;
+};
+//# sourceMappingURL=QuickOrderDrawerProvider.js.map

package/dist/esm/organisms/QuickOrderDrawer/provider/QuickOrderDrawerProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickOrderDrawerProvider.js","sourceRoot":"","sources":["../../../../../src/organisms/QuickOrderDrawer/provider/QuickOrderDrawerProvider.tsx"],"names":[],"mappings":"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"}

package/dist/esm/organisms/SearchInput/SearchInput.d.ts

@@ -11,6 +11,10 @@ export type SearchInputProps = {
      * The current status of the Search Dropdown.
      */
     visibleDropdown: boolean;
+    /**
+     * Search result searchId.
+     */
+    searchId?: string;
 } & HTMLAttributes<HTMLDivElement> & SearchProviderContextValue;
 declare const SearchInput: React.ForwardRefExoticComponent<{
     /**
@@ -22,6 +26,10 @@ declare const SearchInput: React.ForwardRefExoticComponent<{
      * The current status of the Search Dropdown.
      */
     visibleDropdown: boolean;
+    /**
+     * Search result searchId.
+     */
+    searchId?: string | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & SearchProviderContextValue & React.RefAttributes<HTMLDivElement>>;
 export default SearchInput;
 //# sourceMappingURL=SearchInput.d.ts.map

package/dist/esm/organisms/SearchInput/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../src/organisms/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAuB,EACrB,KAAK,0BAA0B,EAChC,MAAM,gCAAgC,CAAA;AAEvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,eAAe,EAAE,OAAO,CAAA;CACzB,GAAG,cAAc,CAAC,cAAc,CAAC,GAChC,0BAA0B,CAAA;AAE5B,QAAA,MAAM,WAAW;IAZf;;;OAGG;;IAEH;;OAEG;qBACc,OAAO;4GAuCzB,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../src/organisms/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAuB,EACrB,KAAK,0BAA0B,EAChC,MAAM,gCAAgC,CAAA;AAEvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,eAAe,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GAAG,cAAc,CAAC,cAAc,CAAC,GAChC,0BAA0B,CAAA;AAE5B,QAAA,MAAM,WAAW;IAhBf;;;OAGG;;IAEH;;OAEG;qBACc,OAAO;IACxB;;OAEG;;4GA0CJ,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/esm/organisms/SearchInput/SearchInput.js

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 import SearchProvider from '../../molecules/SearchProvider';
-const SearchInput = forwardRef(function SearchInput({ children, visibleDropdown = false, testId = 'fs-search-input', isLoading, products, term, terms, onSearchSelection, ...otherProps }, ref) {
+const SearchInput = forwardRef(function SearchInput({ children, visibleDropdown = false, testId = 'fs-search-input', isLoading, products, term, terms, onSearchSelection, searchId, ...otherProps }, ref) {
     return (React.createElement("div", { ref: ref, "data-fs-search-input": true, "data-fs-search-input-dropdown-visible": visibleDropdown, "data-testid": testId, ...otherProps },
-        React.createElement(SearchProvider, { onSearchSelection: onSearchSelection, isLoading: isLoading, term: term, products: products, terms: terms }, children)));
+        React.createElement(SearchProvider, { onSearchSelection: onSearchSelection, isLoading: isLoading, term: term, products: products, terms: terms, searchId: searchId }, children)));
 });
 export default SearchInput;
 //# sourceMappingURL=SearchInput.js.map

package/dist/esm/organisms/SearchInput/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../../src/organisms/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,cAEN,MAAM,gCAAgC,CAAA;AAevC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,QAAQ,EACR,eAAe,GAAG,KAAK,EACvB,MAAM,GAAG,iBAAiB,EAC1B,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,iBAAiB,EACjB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,yEAE+B,eAAe,iBACzC,MAAM,KACf,UAAU;QAEd,oBAAC,cAAc,IACb,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,IAEX,QAAQ,CACM,CACb,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../../src/organisms/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,cAEN,MAAM,gCAAgC,CAAA;AAmBvC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,QAAQ,EACR,eAAe,GAAG,KAAK,EACvB,MAAM,GAAG,iBAAiB,EAC1B,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,iBAAiB,EACjB,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,yEAE+B,eAAe,iBACzC,MAAM,KACf,UAAU;QAEd,oBAAC,cAAc,IACb,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,IAEjB,QAAQ,CACM,CACb,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "3.98.0-dev.1",
+  "version": "3.98.0-dev.8",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/esm/index.d.ts",
@@ -34,6 +34,8 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "papaparse": "^5.5.3",
+    "react-dropzone": "^14.3.8",
     "react-intersection-observer": "^8.32.5",
     "react-swipeable": "^7.0.0",
     "tabbable": "^5.2.1"
@@ -44,6 +46,7 @@
     "@testing-library/react": "^14.3.0",
     "@types/jest": "29.1.0",
     "@types/jest-axe": "^3.5.9",
+    "@types/papaparse": "^5.5.0",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
     "@types/tabbable": "^3.1.1",
@@ -59,5 +62,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8318044a7a7cc95564b9305dfe3099dd8589c182"
+  "gitHead": "c1d0239ddbd1a792e45d82ef15f018d47b854ca0"
 }

package/src/atoms/Link/Link.tsx

@@ -29,7 +29,10 @@ export type LinkElementType = ElementType
 export type LinkProps<C extends LinkElementType = 'a'> =
   PolymorphicComponentPropsWithRef<C, LinkBaseProps>
 
-const Link = forwardRef(function Link<C extends LinkElementType = 'a'>(
+const Link = forwardRef<
+  HTMLAnchorElement,
+  Omit<LinkProps<LinkElementType>, 'ref'>
+>(function Link<C extends LinkElementType = 'a'>(
   {
     as,
     children,

package/src/atoms/List/List.tsx

@@ -24,22 +24,24 @@ type ListComponent = <T extends ElementType = 'ul'>(
   props: ListProps<T>
 ) => ReactElement | null
 
-const List = forwardRef(function List<T extends ElementType = 'ul'>(
-  { as, marker, testId = 'fs-list', ...otherProps }: ListProps<T>,
-  ref: PolymorphicRef<T>
-) {
-  const Component = as ?? 'ul'
+const List = forwardRef<HTMLUListElement, Omit<ListProps<'ul'>, 'ref'>>(
+  function List<T extends ElementType = 'ul'>(
+    { as, marker, testId = 'fs-list', ...otherProps }: ListProps<T>,
+    ref: PolymorphicRef<T>
+  ) {
+    const Component = as ?? 'ul'
 
-  return (
-    <Component
-      ref={ref}
-      role="list"
-      data-fs-list
-      data-fs-list-marker={marker}
-      data-testid={testId}
-      {...otherProps}
-    />
-  )
-}) as ListComponent
+    return (
+      <Component
+        ref={ref}
+        role="list"
+        data-fs-list
+        data-fs-list-marker={marker}
+        data-testid={testId}
+        {...otherProps}
+      />
+    )
+  }
+) as ListComponent
 
 export default List

package/src/hooks/index.ts

@@ -1,11 +1,20 @@
 export {
-  regionSliderTypes,
   Toast as ToastProps,
   default as UIProvider,
+  regionSliderTypes,
   useUI,
 } from './UIProvider'
+export { useCSVParser } from './useCSVParser'
+export type {
+  CSVData,
+  CSVParserError,
+  CSVParserOptions,
+} from './useCSVParser'
 export { useFadeEffect } from './useFadeEffect'
+export { useFileUpload } from './useFileUpload'
 export { useOnClickOutside } from './useOnClickOutside'
+export { useProductComparison } from './useProductComparison'
+export { useRTL } from './useRTL'
 export { useScrollDirection } from './useScrollDirection'
 export { useSearch } from './useSearch'
 export { useSKUMatrix } from './useSKUMatrix'
@@ -18,5 +27,4 @@ export type {
 } from './useSlider'
 export { useSlideVisibility } from './useSlideVisibility'
 export { useTrapFocus } from './useTrapFocus'
-export { useProductComparison } from './useProductComparison'
-export { useRTL } from './useRTL'
+export { FileRejectionCode } from './useFileUpload'

package/src/hooks/useCSVParser.ts

@@ -0,0 +1,367 @@
+import Papa from 'papaparse'
+import { useCallback, useMemo, useState } from 'react'
+
+export interface WorkerCSVData {
+  data: Array<{ sku: string; quantity: number }>
+  fileName: string
+  totalRows: number
+  fileSize: number
+}
+
+export interface WorkerCSVOptions {
+  skuColumnNames?: string[]
+  quantityColumnNames?: string[]
+  delimiter?: string
+  skipEmptyLines?: boolean
+  chunkSize?: number
+  onProgress?: (progress: {
+    processed: number
+    total: number
+    percentage: number
+  }) => void
+}
+
+export type CSVData = WorkerCSVData
+export type CSVParserOptions = WorkerCSVOptions
+
+export type CSVParserError = {
+  message: string
+  type: 'PARSE_ERROR' | 'VALIDATION_ERROR' | 'FILE_ERROR'
+}
+
+const defaultOptions: CSVParserOptions = {}
+
+/**
+ * Hook to parse CSV files containing SKU and Quantity columns.
+ * Utilizes PapaParse's native Web Worker for efficient parsing of large files.
+ * Supports both comma (,) and semicolon (;) delimiters - automatically detects which one is used.
+ * @param options CSV parsing options
+ * @returns Object containing parsing state and functions
+ */
+export function useCSVParser(options?: CSVParserOptions) {
+  const [error, setError] = useState<CSVParserError | null>(null)
+  const [isParsing, setIsParsing] = useState(false)
+  const [isGeneratingTemplate, setIsGeneratingTemplate] = useState(false)
+
+  const mergedOptions = useMemo(
+    () => ({ ...defaultOptions, ...options }),
+    [options]
+  )
+
+  const onParseFile = useCallback(
+    async (file: File): Promise<CSVData | null> => {
+      try {
+        setError(null)
+        setIsParsing(true)
+
+        const result = await parseCSVFile(file, mergedOptions)
+        return result
+      } catch (err) {
+        const error: CSVParserError = {
+          message:
+            err instanceof Error ? err.message : 'Failed to parse CSV file',
+          type: 'PARSE_ERROR',
+        }
+        setError(error)
+        return null
+      } finally {
+        setIsParsing(false)
+      }
+    },
+    [mergedOptions]
+  )
+
+  const onGenerateTemplate = useCallback(async (): Promise<string | null> => {
+    try {
+      setIsGeneratingTemplate(true)
+      const csvContent = generateCSVTemplate()
+      return csvContent
+    } catch (err) {
+      const error: CSVParserError = {
+        message:
+          err instanceof Error ? err.message : 'Failed to generate template',
+        type: 'PARSE_ERROR',
+      }
+      setError(error)
+      return null
+    } finally {
+      setIsGeneratingTemplate(false)
+    }
+  }, [])
+
+  const onClearError = useCallback(() => {
+    setError(null)
+  }, [])
+
+  return {
+    error,
+    isParsing,
+    isGeneratingTemplate,
+    onParseFile,
+    onGenerateTemplate,
+    onClearError,
+  }
+}
+
+/**
+ * Parse CSV file using PapaParse's native Web Worker
+ */
+const parseCSVFile = (
+  file: File,
+  options: WorkerCSVOptions = {}
+): Promise<WorkerCSVData> => {
+  return new Promise(async (resolve, reject) => {
+    const defaultOptions = {
+      skuColumnNames: ['sku', 'id', 'product', 'productid', 'item'],
+      quantityColumnNames: ['quantity', 'qty', 'amount', 'count'],
+      delimiter: '',
+      skipEmptyLines: true,
+      chunkSize: 1024 * 1024,
+    }
+
+    const config = { ...defaultOptions, ...options }
+
+    const detectDelimiter = (): Promise<string> => {
+      if (config.delimiter) {
+        return Promise.resolve(config.delimiter)
+      }
+
+      return new Promise((resolveDelimiter) => {
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          const text = e.target?.result as string
+          const firstLine = (text.split(/\r?\n/)[0] || '').replace(/\r$/, '')
+
+          const commaCount = (firstLine.match(/,/g) || []).length
+          const semicolonCount = (firstLine.match(/;/g) || []).length
+          const tabCount = (firstLine.match(/\t/g) || []).length
+
+          if (semicolonCount > 0 && semicolonCount >= commaCount) {
+            resolveDelimiter(';')
+          } else if (tabCount > commaCount && tabCount > semicolonCount) {
+            resolveDelimiter('\t')
+          } else {
+            resolveDelimiter(',')
+          }
+        }
+        reader.onerror = () => resolveDelimiter(',')
+        reader.readAsText(file.slice(0, 1024))
+      })
+    }
+
+    const detectedDelimiter = await detectDelimiter()
+
+    let headers: string[] = []
+    let skuIndex = -1
+    let quantityIndex = -1
+    let isHeaderProcessed = false
+
+    const transformedData: Array<{ sku: string; quantity: number }> = []
+    const errors: string[] = []
+    let processedRows = 0
+    let totalEstimatedRows = 0
+
+    const findColumnIndex = (
+      headers: string[],
+      columnNames: string[]
+    ): number => {
+      return headers.findIndex((header) =>
+        columnNames.some(
+          (name) => header.toLowerCase().trim() === name.toLowerCase()
+        )
+      )
+    }
+
+    const validateAndTransformRow = (row: unknown[], rowIndex: number) => {
+      try {
+        const sku = row[skuIndex]
+        const quantity = row[quantityIndex]
+
+        if (!sku || sku === '' || quantity === undefined || quantity === '') {
+          return null
+        }
+
+        const trimmedSku = String(sku).trim()
+        const numericQuantity = Number(quantity)
+
+        if (!trimmedSku) {
+          throw new Error('Empty SKU found')
+        }
+
+        if (Number.isNaN(numericQuantity) || numericQuantity < 0) {
+          throw new Error(
+            `Invalid quantity value: ${quantity} for SKU: ${trimmedSku}`
+          )
+        }
+
+        return {
+          sku: trimmedSku,
+          quantity: numericQuantity,
+        }
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : 'Unknown error'
+        errors.push(`Row ${rowIndex + 2}: ${errorMessage}`)
+
+        if (errors.length > 1000) {
+          errors.splice(0, 500)
+        }
+
+        return null
+      }
+    }
+
+    const estimateRows = (fileSize: number) => {
+      const avgBytesPerRow = 50
+      return Math.floor(fileSize / avgBytesPerRow)
+    }
+
+    totalEstimatedRows = estimateRows(file.size)
+
+    Papa.parse(file, {
+      header: false,
+      dynamicTyping: false,
+      skipEmptyLines: config.skipEmptyLines,
+      delimiter: detectedDelimiter,
+
+      worker: true,
+
+      chunk: (
+        results: { data: unknown[][] },
+        parser: { abort: () => void }
+      ) => {
+        try {
+          let rows = results.data
+
+          if (!isHeaderProcessed && rows.length > 0) {
+            headers = rows[0] as string[]
+
+            skuIndex = findColumnIndex(headers, config.skuColumnNames)
+            quantityIndex = findColumnIndex(headers, config.quantityColumnNames)
+
+            if (skuIndex === -1) {
+              parser.abort()
+              reject(
+                new Error(
+                  `SKU column not found. Expected one of: ${config.skuColumnNames.join(', ')}`
+                )
+              )
+              return
+            }
+
+            if (quantityIndex === -1) {
+              parser.abort()
+              reject(
+                new Error(
+                  `Quantity column not found. Expected one of: ${config.quantityColumnNames.join(', ')}`
+                )
+              )
+              return
+            }
+
+            rows = rows.slice(1)
+            isHeaderProcessed = true
+          }
+
+          rows.forEach((row, index) => {
+            const globalRowIndex = processedRows + index
+            const transformedRow = validateAndTransformRow(row, globalRowIndex)
+
+            if (transformedRow) {
+              transformedData.push(transformedRow)
+            }
+          })
+
+          processedRows += rows.length
+
+          if (config.onProgress) {
+            const percentage = Math.min(
+              100,
+              Math.round((processedRows / totalEstimatedRows) * 100)
+            )
+            config.onProgress({
+              processed: processedRows,
+              total: totalEstimatedRows,
+              percentage,
+            })
+          }
+        } catch (err) {
+          parser.abort()
+          reject(err)
+        }
+      },
+
+      complete: () => {
+        try {
+          if (transformedData.length === 0) {
+            if (errors.length > 0) {
+              reject(
+                new Error(
+                  `No valid data found. First few errors:\n${errors.slice(0, 5).join('\n')}`
+                )
+              )
+            } else {
+              reject(new Error('No valid data found in file'))
+            }
+            return
+          }
+
+          if (errors.length > 0) {
+            console.warn(
+              `CSV parsing completed with ${errors.length} warnings. Sample:`,
+              errors.slice(0, 10)
+            )
+          }
+
+          if (config.onProgress) {
+            config.onProgress({
+              processed: processedRows,
+              total: processedRows,
+              percentage: 100,
+            })
+          }
+
+          resolve({
+            data: transformedData,
+            fileName: file.name,
+            totalRows: transformedData.length,
+            fileSize: file.size,
+          })
+        } catch (err) {
+          reject(err)
+        }
+      },
+
+      error: (error: unknown) => {
+        const errorMessage =
+          error instanceof Error ? error.message : 'Unknown parsing error'
+        reject(new Error(`PapaParse error: ${errorMessage}`))
+      },
+
+      fastMode: false,
+      chunkSize: config.chunkSize,
+      preview: 0,
+      encoding: 'UTF-8',
+    })
+  })
+}
+
+/**
+ * Generate CSV template with sample data
+ */
+const generateCSVTemplate = (): string => {
+  const templateData = [
+    { sku: 'PROD-001', quantity: 5 },
+    { sku: 'ITEM-234', quantity: 12 },
+    { sku: 'SKU789', quantity: 3 },
+    { sku: 'ABC-XYZ-456', quantity: 8 },
+    { sku: 'SAMPLE-100', quantity: 25 },
+  ]
+
+  return Papa.unparse(templateData, {
+    header: true,
+    delimiter: ',',
+    newline: '\n',
+    skipEmptyLines: true,
+  })
+}