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

package/src/organisms/QuickOrderDrawer/QuickOrderDrawerProducts.tsx

@@ -0,0 +1,323 @@
+import React, { type FunctionComponent } from 'react'
+import Icon from '../../atoms/Icon'
+import IconButton from '../../molecules/IconButton'
+import QuantitySelector from '../../molecules/QuantitySelector'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from '../../molecules/Table'
+
+import Badge from '../../atoms/Badge'
+import type { PriceFormatter } from '../../atoms/Price'
+import Price from '../../atoms/Price'
+import Skeleton from '../../atoms/Skeleton'
+import { useUI } from '../../hooks'
+import Alert from '../../molecules/Alert'
+import Tooltip from '../../molecules/Tooltip'
+import {
+  useQuickOrderDrawer,
+  type VariationProductColumn,
+} from './provider/QuickOrderDrawerProvider'
+
+type ImageComponentType = FunctionComponent<{
+  src: string
+  alt: string
+  width?: number
+  height?: number
+  loading?: 'eager' | 'lazy'
+}>
+
+// TODO: Replace with faststore Image component in final implementation
+// This is a temporary reference component for storybook preview
+const DefaultImageComponent: ImageComponentType = ({
+  src,
+  alt,
+  width,
+  height,
+  ...otherProps
+}) => <img src={src} alt={alt} width={width} height={height} {...otherProps} />
+
+export type QuickOrderDrawerProductsProps = {
+  columns: VariationProductColumn
+  formatter?: PriceFormatter
+  ImageComponent?: ImageComponentType
+  /**
+   * Messages for CMS configuration
+   */
+  messages?: {
+    alertAriaLabel?: string
+    tableAriaLabel?: string
+    quantityUpdatedTooltip?: string
+    quantityUpdatedAriaLabel?: string
+    outOfStockLabel?: string
+    availableLabel?: string
+    selectQuantityAriaLabel?: string
+    removeProductAriaLabel?: string
+    invalidQuantityTitle?: string
+    invalidQuantityMessage?: (
+      min: number,
+      max: number,
+      quantity: number
+    ) => string
+    emptyStateTitle?: string
+    emptyStateMessage?: string
+  }
+}
+
+const QuickOrderDrawerProducts = ({
+  columns,
+  formatter,
+  ImageComponent = DefaultImageComponent,
+  messages,
+}: QuickOrderDrawerProductsProps) => {
+  const { pushToast } = useUI()
+  const {
+    products,
+    onChangeQuantityItem,
+    onDelete,
+    isLoading,
+    alertMessage,
+    setAlertMessage,
+    formatter: contextFormatter,
+  } = useQuickOrderDrawer()
+  const priceFormatter = formatter || contextFormatter
+
+  const showSkeleton = isLoading
+  return (
+    <div data-fs-quick-order-drawer-content>
+      <>
+        {!isLoading && alertMessage && (
+          <Alert
+            icon={<Icon name="AlertFilled" weight="bold" />}
+            dismissible
+            onClick={() => setAlertMessage('')}
+            aria-label={messages?.alertAriaLabel}
+          >
+            {alertMessage}
+          </Alert>
+        )}
+        <Table
+          data-fs-quick-order-drawer-table
+          variant="bordered"
+          aria-label={messages?.tableAriaLabel}
+        >
+          <TableHead>
+            <TableRow>
+              <TableCell
+                data-fs-quick-order-drawer-product-header
+                align="left"
+                variant="header"
+                scope="col"
+              >
+                {columns.name}
+              </TableCell>
+
+              <TableCell align="left" variant="header" scope="col">
+                {columns.availability.label}
+              </TableCell>
+
+              <TableCell align="center" variant="header" scope="col">
+                {columns.price}
+              </TableCell>
+
+              <TableCell align="left" variant="header" scope="col">
+                {columns.quantity}
+              </TableCell>
+              <TableCell align="right" variant="header" scope="col"></TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+            {showSkeleton ? (
+              <>
+                {Array.from({ length: 5 }).map((_, index) => {
+                  return (
+                    <TableRow key={`table-row-skeleton-${index}`}>
+                      {Array.from({
+                        length: 5,
+                      }).map((_, cellIndex) => {
+                        return (
+                          <TableCell key={`table-cell-skeleton-${cellIndex}`}>
+                            <Skeleton size={{ width: '96%', height: '30px' }} />
+                          </TableCell>
+                        )
+                      })}
+                    </TableRow>
+                  )
+                })}
+              </>
+            ) : products.length > 0 ? (
+              <>
+                {products.map((variantProduct) => (
+                  <TableRow
+                    key={`${variantProduct.name}-${variantProduct.id}`}
+                    data-fs-quick-order-table-row={variantProduct.availability}
+                  >
+                    <TableCell data-fs-quick-order-cell="product" align="left">
+                      <div data-fs-quick-order-table-cell-img-container>
+                        <ImageComponent
+                          height={48}
+                          src={variantProduct.image.url}
+                          alt={
+                            variantProduct.image.alternateName ||
+                            variantProduct.name
+                          }
+                        />
+                      </div>
+
+                      <div data-fs-quick-order-table-cell-name-container>
+                        <div data-fs-quick-order-text={'primary'}>
+                          {variantProduct.name}
+                        </div>
+                        <span data-fs-quick-order-text={'secondary'}>
+                          {variantProduct.id}
+                        </span>
+                      </div>
+                      {variantProduct.availability === 'available' &&
+                        variantProduct.quantityUpdated && (
+                          <Tooltip
+                            content={messages?.quantityUpdatedTooltip}
+                            placement="left-center"
+                          >
+                            <IconButton
+                              aria-label={messages?.quantityUpdatedAriaLabel}
+                              icon={<Icon name="CircleWarning" weight="bold" />}
+                            />
+                          </Tooltip>
+                        )}
+                    </TableCell>
+
+                    <TableCell align="left">
+                      {columns.availability.stockDisplaySettings ===
+                        'showAvailability' && (
+                        <Badge
+                          variant={
+                            variantProduct.availability === 'outOfStock'
+                              ? 'warning'
+                              : 'success'
+                          }
+                        >
+                          {variantProduct.availability === 'outOfStock'
+                            ? messages?.outOfStockLabel
+                            : messages?.availableLabel}
+                        </Badge>
+                      )}
+
+                      {columns.availability.stockDisplaySettings ===
+                        'showStockQuantity' && variantProduct.inventory}
+                    </TableCell>
+
+                    <TableCell data-fs-quick-order-cell="price" align="right">
+                      <Price
+                        value={variantProduct.price}
+                        variant="spot"
+                        formatter={priceFormatter}
+                        data-fs-quick-order-table-price={
+                          variantProduct.availability
+                        }
+                      />
+                    </TableCell>
+
+                    <TableCell
+                      align="right"
+                      data-fs-quick-order-cell="quantity-selector"
+                    >
+                      <div data-fs-quick-order-table-action>
+                        <QuantitySelector
+                          min={0}
+                          max={variantProduct.inventory}
+                          disabled={
+                            !variantProduct.inventory ||
+                            variantProduct.availability === 'outOfStock'
+                          }
+                          initial={variantProduct.selectedCount}
+                          onChange={(value) =>
+                            onChangeQuantityItem(variantProduct.id, value)
+                          }
+                          aria-label={messages?.selectQuantityAriaLabel?.replace(
+                            '{productName}',
+                            variantProduct.name
+                          )}
+                          onValidateBlur={(
+                            min: number,
+                            maxValue: number,
+                            quantity: number
+                          ) => {
+                            const title = messages?.invalidQuantityTitle
+                            const message = messages?.invalidQuantityMessage
+                              ? messages.invalidQuantityMessage(
+                                  min,
+                                  maxValue,
+                                  quantity
+                                )
+                              : ''
+
+                            pushToast({
+                              title,
+                              message,
+                              status: 'INFO',
+                              icon: (
+                                <Icon
+                                  name="CircleWavyWarning"
+                                  width={30}
+                                  height={30}
+                                />
+                              ),
+                            })
+                          }}
+                        />
+                      </div>
+                    </TableCell>
+                    <TableCell align="right" data-fs-quick-order-delete-cell>
+                      <IconButton
+                        onClick={() => onDelete(variantProduct.id)}
+                        icon={<Icon name="Thrash" color="#1F1F1F" />}
+                        aria-label={messages?.removeProductAriaLabel?.replace(
+                          '{productName}',
+                          variantProduct.name
+                        )}
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </>
+            ) : (
+              <TableRow>
+                <TableCell
+                  align="center"
+                  data-fs-quick-order-empty-state
+                  {...({
+                    colSpan: 5,
+                  } as React.HTMLAttributes<HTMLTableCellElement>)}
+                >
+                  <div data-fs-quick-order-empty-state-container>
+                    <Icon
+                      name="MagnifyingGlass"
+                      width={48}
+                      height={48}
+                      weight="thin"
+                      data-fs-quick-order-empty-state-icon
+                    />
+                    <div data-fs-quick-order-empty-state-content>
+                      <p data-fs-quick-order-empty-state-title>
+                        {messages?.emptyStateTitle}
+                      </p>
+                      <p data-fs-quick-order-empty-state-message>
+                        {messages?.emptyStateMessage}
+                      </p>
+                    </div>
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </>
+    </div>
+  )
+}
+
+export default QuickOrderDrawerProducts

package/src/organisms/QuickOrderDrawer/index.ts

@@ -0,0 +1,19 @@
+export { default as QuickOrderDrawer, default } from './QuickOrderDrawer'
+export type { QuickOrderDrawerProps } from './QuickOrderDrawer'
+
+export { default as QuickOrderDrawerHeader } from './QuickOrderDrawerHeader'
+export type { QuickOrderDrawerHeaderProps } from './QuickOrderDrawerHeader'
+
+export { default as QuickOrderDrawerProducts } from './QuickOrderDrawerProducts'
+export type { QuickOrderDrawerProductsProps } from './QuickOrderDrawerProducts'
+
+export { default as QuickOrderDrawerFooter } from './QuickOrderDrawerFooter'
+export type { QuickOrderDrawerFooterProps } from './QuickOrderDrawerFooter'
+
+export { useQuickOrderDrawer } from './provider/QuickOrderDrawerProvider'
+export type {
+  AlertMessages,
+  Product,
+  QuickOrderDrawerProviderProps,
+  VariationProductColumn,
+} from './provider/QuickOrderDrawerProvider'

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
+}

package/src/organisms/SearchInput/SearchInput.tsx

@@ -14,6 +14,10 @@ export type SearchInputProps = {
    * The current status of the Search Dropdown.
    */
   visibleDropdown: boolean
+  /**
+   * Search result searchId.
+   */
+  searchId?: string
 } & HTMLAttributes<HTMLDivElement> &
   SearchProviderContextValue
 
@@ -28,6 +32,7 @@ const SearchInput = forwardRef<HTMLDivElement, SearchInputProps>(
       term,
       terms,
       onSearchSelection,
+      searchId,
       ...otherProps
     },
     ref
@@ -46,6 +51,7 @@ const SearchInput = forwardRef<HTMLDivElement, SearchInputProps>(
           term={term}
           products={products}
           terms={terms}
+          searchId={searchId}
         >
           {children}
         </SearchProvider>