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

package/src/organisms/QuickOrderDrawer/provider/QuickOrderDrawerProvider.tsx

@@ -0,0 +1,205 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  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
+}
+
+const QuickOrderDrawerContext = createContext<
+  QuickOrderDrawerContextValue | undefined
+>(undefined)
+
+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 const QuickOrderDrawerProvider = ({
+  children,
+  initialProducts = [],
+  isLoading = false,
+  totalRequestedSkus,
+  onAddToCart: onAddToCartCallback,
+  formatter,
+  initialAlertMessage,
+  alertMessages,
+}: QuickOrderDrawerProviderProps) => {
+  const [products, setProducts] = useState<Product[]>(initialProducts || [])
+
+  const getAlertMessage = (prods: Product[], totalRequestedSkus?: number) => {
+    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<string>(
+    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<{ totalPrice: number; itemsCount: number }>(
+      (prev, curr) => ({
+        totalPrice: prev.totalPrice + curr.price * curr.selectedCount,
+        itemsCount: prev.itemsCount + curr.selectedCount,
+      }),
+      { totalPrice: 0, itemsCount: 0 }
+    )
+  }, [products])
+
+  const onChangeQuantityItem = useCallback((id: string, value: number) => {
+    setProducts((oldProducts) =>
+      oldProducts.map((product) => {
+        if (product.id !== id) {
+          return product
+        }
+
+        return { ...product, selectedCount: value }
+      })
+    )
+  }, [])
+
+  const onDelete = useCallback((id: string) => {
+    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: QuickOrderDrawerContextValue = {
+    products,
+    totalPrice,
+    itemsCount,
+    alertMessage,
+    isLoading,
+    setAlertMessage,
+    onChangeQuantityItem,
+    onDelete,
+    onAddToCart,
+    formatter,
+  }
+
+  return (
+    <QuickOrderDrawerContext.Provider value={value}>
+      {children}
+    </QuickOrderDrawerContext.Provider>
+  )
+}
+
+export const useQuickOrderDrawer = (): QuickOrderDrawerContextValue => {
+  const context = useContext(QuickOrderDrawerContext)
+
+  if (context === undefined) {
+    throw new Error(
+      'useQuickOrderDrawer should be used within a QuickOrderDrawerProvider'
+    )
+  }
+
+  return context
+}