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

package/src/sdk/orderEntry/useOrderEntry.ts

@@ -0,0 +1,58 @@
+import { useCallback, useState } from 'react'
+
+import { useCart } from '../cart'
+import { useOrderEntryOperation } from './useOrderEntryOperation'
+import { useOrderEntryUpload } from './useOrderEntryUpload'
+
+export function useOrderEntry() {
+  const cart = useCart()
+
+  const [isOperationStarting, setIsOperationStarting] = useState(false)
+
+  const {
+    uploadFile,
+    isUploading,
+    error: uploadError,
+    clearError: clearUploadError,
+  } = useOrderEntryUpload()
+  const {
+    startOperation,
+    status,
+    isLoading: isOperating,
+    error: operationError,
+    reset: resetOperation,
+  } = useOrderEntryOperation()
+
+  const reset = useCallback(() => {
+    clearUploadError()
+    resetOperation()
+    setIsOperationStarting(false)
+  }, [clearUploadError, resetOperation])
+
+  const submitFile = useCallback(
+    async (file: File) => {
+      const objectKey = await uploadFile(file)
+      if (!objectKey) return
+      setIsOperationStarting(true)
+      try {
+        await startOperation({
+          objectKey,
+          orderFormId: cart.id ?? '',
+        })
+      } finally {
+        setIsOperationStarting(false)
+      }
+    },
+    [uploadFile, startOperation, cart.id]
+  )
+
+  return {
+    submitFile,
+    status,
+    isLoading: isUploading || isOperationStarting || isOperating,
+    isUploading,
+    isProcessing: isOperationStarting || isOperating,
+    error: uploadError ? new Error(uploadError.message) : operationError,
+    reset,
+  }
+}

package/src/sdk/orderEntry/useOrderEntryOperation.ts

@@ -0,0 +1,132 @@
+import { useCallback, useRef, useState } from 'react'
+
+import { gql } from '@generated'
+import type {
+  OrderEntryOperationQueryQuery,
+  OrderEntryOperationQueryQueryVariables,
+  StartOrderEntryOperationMutationMutation,
+  StartOrderEntryOperationMutationMutationVariables,
+} from '@generated/graphql'
+
+import { useLazyQuery } from '../graphql/useLazyQuery'
+import { useQuery } from '../graphql/useQuery'
+
+const StartOrderEntryOperationMutation = gql(`
+  mutation StartOrderEntryOperationMutation($data: IOrderEntryOperation!) {
+    startOrderEntryOperation(data: $data) {
+      operationId
+    }
+  }
+`)
+
+const OrderEntryOperationQuery = gql(`
+  query OrderEntryOperationQuery($operationId: String!) {
+    orderEntryOperation(operationId: $operationId) {
+      status
+      entityId
+      message
+      missingItems {
+        itemId
+        itemName
+        reason
+      }
+    }
+  }
+`)
+
+const TERMINAL_STATUSES = new Set(['SUCCESS', 'PARTIAL_SUCCESS', 'FAILED'])
+const POLL_TIMEOUT_MS = 60_000
+
+export type OrderEntryOperationStatus = NonNullable<
+  OrderEntryOperationQueryQuery['orderEntryOperation']
+>
+
+export type UseOrderEntryOperationReturn = {
+  startOperation: (data: {
+    objectKey: string
+    orderFormId: string
+    sessionToken?: string
+  }) => Promise<void>
+  status: OrderEntryOperationStatus | null
+  isLoading: boolean
+  error: Error | null
+  reset: () => void
+}
+
+export function useOrderEntryOperation(): UseOrderEntryOperationReturn {
+  const [operationId, setOperationId] = useState<string | null>(null)
+  const [timeoutError, setTimeoutError] = useState<Error | null>(null)
+  const pollStartRef = useRef<number | null>(null)
+
+  const [startOp, { isValidating: isStarting, error: startError }] =
+    useLazyQuery<
+      StartOrderEntryOperationMutationMutation,
+      StartOrderEntryOperationMutationMutationVariables
+    >(StartOrderEntryOperationMutation, {
+      data: { objectKey: '', orderFormId: '', sessionToken: null },
+    })
+
+  const { data: statusData, error: statusError } = useQuery<
+    OrderEntryOperationQueryQuery,
+    OrderEntryOperationQueryQueryVariables
+  >(
+    OrderEntryOperationQuery,
+    { operationId: operationId ?? '' },
+    {
+      doNotRun: !operationId,
+      refreshInterval: (latestData) => {
+        const s = latestData?.orderEntryOperation?.status
+        if (s && TERMINAL_STATUSES.has(s)) return 0
+        if (
+          pollStartRef.current !== null &&
+          Date.now() - pollStartRef.current >= POLL_TIMEOUT_MS
+        ) {
+          setTimeoutError(new Error('Operation timed out. Please try again.'))
+          return 0
+        }
+        return 2000
+      },
+    }
+  )
+
+  const startOperation = useCallback(
+    async (data: {
+      objectKey: string
+      orderFormId: string
+      sessionToken?: string
+    }) => {
+      const result = await startOp({
+        data: {
+          ...data,
+          sessionToken: data.sessionToken ?? null,
+        },
+      })
+      const id = result?.startOrderEntryOperation?.operationId
+      if (id) {
+        pollStartRef.current = Date.now()
+        setTimeoutError(null)
+        setOperationId(id)
+      }
+    },
+    [startOp]
+  )
+
+  const reset = useCallback(() => {
+    setOperationId(null)
+    setTimeoutError(null)
+    pollStartRef.current = null
+  }, [])
+
+  const currentStatus = statusData?.orderEntryOperation?.status ?? null
+  const isPolling =
+    !!operationId && !!currentStatus && !TERMINAL_STATUSES.has(currentStatus)
+  const isPending = !!operationId && !currentStatus
+
+  return {
+    startOperation,
+    status: operationId ? (statusData?.orderEntryOperation ?? null) : null,
+    isLoading: isStarting || isPolling || isPending,
+    error: (startError ?? statusError ?? timeoutError ?? null) as Error | null,
+    reset,
+  }
+}

package/src/sdk/orderEntry/useOrderEntryUpload.ts

@@ -0,0 +1,96 @@
+import { useCallback, useState } from 'react'
+
+import { gql } from '@generated'
+import type {
+  UploadFileToOrderEntryMutationMutation,
+  UploadFileToOrderEntryMutationMutationVariables,
+} from '@generated/graphql'
+
+import { request } from '../graphql/request'
+
+const UploadFileToOrderEntryMutation = gql(`
+  mutation UploadFileToOrderEntryMutation($data: IOrderEntryUpload!) {
+    uploadFileToOrderEntry(data: $data) {
+      objectKey
+    }
+  }
+`)
+
+export type OrderEntryUploadError = {
+  message: string
+}
+
+export type UseOrderEntryUploadReturn = {
+  isUploading: boolean
+  error: OrderEntryUploadError | null
+  uploadFile: (file: File) => Promise<string | null>
+  clearError: () => void
+}
+
+/**
+ * Reads a File object and returns its content as a Base64-encoded string.
+ */
+const readFileAsBase64 = (file: File): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      const dataUrl = reader.result as string
+      // Strip the data URL prefix (e.g. "data:text/csv;base64,")
+      const base64 = dataUrl.split(',')[1] ?? ''
+      resolve(base64)
+    }
+    reader.onerror = () => reject(new Error('Failed to read file'))
+    reader.readAsDataURL(file)
+  })
+
+/**
+ * Hook to upload a file to the Order Entry Service via the
+ * `uploadFileToOrderEntry` GraphQL mutation (defined in @faststore/api).
+ *
+ * The file is Base64-encoded client-side and decoded server-side by the
+ * resolver, which then forwards the multipart request to the OES with the
+ * proper VtexIdclientAutCookie auth header.
+ *
+ * @returns `{ isUploading, error, uploadFile, clearError }`
+ *   - `uploadFile(file)` resolves to the `objectKey` string on success, or `null` on error.
+ */
+export function useOrderEntryUpload(): UseOrderEntryUploadReturn {
+  const [isUploading, setIsUploading] = useState(false)
+  const [error, setError] = useState<OrderEntryUploadError | null>(null)
+
+  const uploadFile = useCallback(async (file: File): Promise<string | null> => {
+    setIsUploading(true)
+    setError(null)
+
+    try {
+      const fileContent = await readFileAsBase64(file)
+
+      const data = await request<
+        UploadFileToOrderEntryMutationMutation,
+        UploadFileToOrderEntryMutationMutationVariables
+      >(UploadFileToOrderEntryMutation, {
+        data: {
+          fileContent,
+          fileName: file.name,
+          mimeType: file.type || 'application/octet-stream',
+        },
+      })
+
+      return data.uploadFileToOrderEntry?.objectKey ?? null
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : 'Failed to upload file'
+
+      setError({ message: errorMessage })
+      return null
+    } finally {
+      setIsUploading(false)
+    }
+  }, [])
+
+  const clearError = useCallback(() => {
+    setError(null)
+  }, [])
+
+  return { isUploading, error, uploadFile, clearError }
+}

package/src/sdk/orderEntry/useOrderFormItems.ts

@@ -0,0 +1,57 @@
+import { useCallback, useState } from 'react'
+
+import { gql } from '@generated'
+import type {
+  OrderFormItemsQueryQuery,
+  OrderFormItemsQueryQueryVariables,
+} from '@generated/graphql'
+
+import { useQuery } from '../graphql/useQuery'
+
+const OrderFormItemsQuery = gql(`
+  query OrderFormItemsQuery($orderFormId: String!) {
+    orderFormItems(orderFormId: $orderFormId) {
+      id
+      name
+      price
+      listPrice
+      quantity
+      imageUrl
+      availability
+      seller
+      unitMultiplier
+    }
+  }
+`)
+
+export type OrderFormCartItem = NonNullable<
+  OrderFormItemsQueryQuery['orderFormItems']
+>[number]
+
+export function useOrderFormItems() {
+  const [orderFormId, setOrderFormId] = useState<string | null>(null)
+
+  const { data, error, isValidating } = useQuery<
+    OrderFormItemsQueryQuery,
+    OrderFormItemsQueryQueryVariables
+  >(
+    OrderFormItemsQuery,
+    { orderFormId: orderFormId ?? '' },
+    { doNotRun: !orderFormId }
+  )
+
+  const fetchOrderFormItems = useCallback((id: string) => {
+    setOrderFormId(id)
+  }, [])
+
+  const reset = useCallback(() => setOrderFormId(null), [])
+
+  return {
+    fetchOrderFormItems,
+    items: orderFormId ? (data?.orderFormItems ?? null) : null,
+    isLoading: !!orderFormId && !data && !error,
+    isValidating,
+    error: error as Error | null,
+    reset,
+  }
+}

package/src/styles/global/index.scss

@@ -14,5 +14,21 @@
 
 // Importing this component because is being used outside the context of the Section
 @include meta.load-css("~@faststore/ui/src/components/molecules/Dropdown/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");
 @include meta.load-css("~@faststore/ui/src/components/organisms/SlideOver/styles.scss");
+
+// QuickOrderDrawer renders via createPortal (document.body), outside .section scope.
+// Wrapped in @layer components to match the same specificity as section-scoped styles.
+@layer components {
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Badge/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Price/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/Alert/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/QuantitySelector/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/Table/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/Tooltip/styles.scss");
+}

package/test/components/auth/ProfileChallenge.test.tsx

@@ -0,0 +1,51 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+const mockUseAuth = vi.hoisted(() => vi.fn())
+vi.mock('src/sdk/auth', () => ({ useAuth: mockUseAuth }))
+
+import ProfileChallenge from '../../../src/components/auth/ProfileChallenge/ProfileChallenge'
+
+describe('ProfileChallenge', () => {
+  it('renders children when authenticated', () => {
+    mockUseAuth.mockReturnValue({ isAuthenticated: true })
+
+    render(
+      <ProfileChallenge>
+        <span>Protected content</span>
+      </ProfileChallenge>
+    )
+
+    expect(screen.queryByText('Protected content')).not.toBeNull()
+  })
+
+  it('renders fallback when not authenticated', () => {
+    mockUseAuth.mockReturnValue({ isAuthenticated: false })
+
+    render(
+      <ProfileChallenge fallback={<span>Please log in</span>}>
+        <span>Protected content</span>
+      </ProfileChallenge>
+    )
+
+    expect(screen.queryByText('Please log in')).not.toBeNull()
+    expect(screen.queryByText('Protected content')).toBeNull()
+  })
+
+  it('renders nothing by default when not authenticated', () => {
+    mockUseAuth.mockReturnValue({ isAuthenticated: false })
+
+    render(
+      <ProfileChallenge>
+        <span>Protected content</span>
+      </ProfileChallenge>
+    )
+
+    expect(screen.queryByText('Protected content')).toBeNull()
+  })
+})

package/test/components/search/SearchInput.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest'
+
+import { mapOrderFormItemsToProducts } from '../../../src/components/search/SearchInput/SearchInput'
+
+const makeItem = (overrides = {}) => ({
+  id: 'sku-1',
+  name: 'Product A',
+  price: 100,
+  listPrice: 120,
+  quantity: 2,
+  imageUrl: 'https://example.com/img.jpg',
+  availability: 'available',
+  seller: '1',
+  unitMultiplier: 1,
+  ...overrides,
+})
+
+describe('mapOrderFormItemsToProducts', () => {
+  it('maps a single available item correctly', () => {
+    const result = mapOrderFormItemsToProducts([makeItem()])
+
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({
+      id: 'sku-1',
+      name: 'Product A',
+      price: 100,
+      quantityUpdated: false,
+      image: { url: 'https://example.com/img.jpg', alternateName: 'Product A' },
+      inventory: 9999,
+      availability: 'available',
+      selectedCount: 2,
+    })
+  })
+
+  it('sets inventory to 0 and availability to outOfStock for unavailable items', () => {
+    const result = mapOrderFormItemsToProducts([
+      makeItem({ availability: 'unavailable' }),
+    ])
+
+    expect(result[0].inventory).toBe(0)
+    expect(result[0].availability).toBe('outOfStock')
+  })
+
+  it('falls back to empty string when imageUrl is null', () => {
+    const result = mapOrderFormItemsToProducts([makeItem({ imageUrl: null })])
+
+    expect(result[0].image.url).toBe('')
+  })
+
+  it('returns empty array for empty input', () => {
+    expect(mapOrderFormItemsToProducts([])).toEqual([])
+  })
+
+  it('maps multiple items preserving order', () => {
+    const items = [
+      makeItem({ id: 'a', name: 'A', quantity: 1 }),
+      makeItem({ id: 'b', name: 'B', quantity: 3 }),
+    ]
+
+    const result = mapOrderFormItemsToProducts(items)
+
+    expect(result[0].id).toBe('a')
+    expect(result[1].id).toBe('b')
+    expect(result[0].selectedCount).toBe(1)
+    expect(result[1].selectedCount).toBe(3)
+  })
+
+  it('always sets quantityUpdated to false', () => {
+    const result = mapOrderFormItemsToProducts([makeItem()])
+    expect(result[0].quantityUpdated).toBe(false)
+  })
+})