@faststore/components 3.98.0-dev.3 → 3.98.0

package/src/molecules/SearchInputField/SearchInputField.tsx

@@ -14,6 +14,7 @@ type ButtonProps = {
   onClick?: () => void
   testId?: string
 }
+
 export interface SearchInputFieldProps extends InputProps {
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
@@ -29,7 +30,29 @@ export interface SearchInputFieldProps extends InputProps {
    */
   buttonIcon?: ReactNode
   /**
-   * Custom aria-label for input and button.
+   * Whether to show the attachment button.
+   * @default false
+   */
+  showAttachmentButton?: boolean
+  /**
+   * Props for the paperclip button inside the input.
+   */
+  attachmentButtonProps?: ButtonProps
+  /**
+   * Aria-label for the attachment button (e.g. from CMS).
+   */
+  attachmentButtonAriaLabel?: string
+  /**
+   * Aria-label for the submit button (e.g. from CMS).
+   */
+  submitButtonAriaLabel?: string
+  /**
+   * A React component that will be rendered as an icon (attachment button).
+   * @default <Icon name="Paperclip" />
+   */
+  attachmentButtonIcon?: ReactNode
+  /**
+   * Aria-label for the search input (e.g. from CMS).
    */
   'aria-label'?: AriaAttributes['aria-label']
   /**
@@ -50,7 +73,12 @@ const SearchInputField = forwardRef<
   {
     onSubmit,
     buttonIcon,
-    'aria-label': ariaLabel = 'search',
+    showAttachmentButton = false,
+    attachmentButtonAriaLabel,
+    attachmentButtonIcon,
+    attachmentButtonProps,
+    submitButtonAriaLabel,
+    'aria-label': ariaLabel,
     testId = 'fs-search-input',
     buttonProps,
     ...otherProps
@@ -74,27 +102,48 @@ const SearchInputField = forwardRef<
   }))
 
   return (
-    <form
-      ref={formRef}
-      data-fs-search-input-field
-      data-testid={testId}
-      onSubmit={handleSubmit}
-      role="search"
-    >
-      <Input
-        ref={inputRef}
-        aria-label={ariaLabel}
-        data-fs-search-input-field-input
-        {...otherProps}
-      />
-      <IconButton
-        type="submit"
-        aria-label="Submit Search"
-        icon={buttonIcon ?? <Icon name="MagnifyingGlass" />}
-        size="small"
-        {...buttonProps}
-      />
-    </form>
+    <div data-fs-search-input-field-wrapper>
+      <form
+        ref={formRef}
+        data-fs-search-input-field
+        data-testid={testId}
+        onSubmit={handleSubmit}
+        role="search"
+      >
+        <Input
+          ref={inputRef}
+          aria-label={ariaLabel}
+          data-fs-search-input-field-input
+          {...otherProps}
+        />
+
+        <div data-fs-search-input-field-actions>
+          {showAttachmentButton && (
+            <>
+              <IconButton
+                type="button"
+                aria-label={attachmentButtonAriaLabel}
+                icon={attachmentButtonIcon ?? <Icon name="Paperclip" />}
+                size="small"
+                data-fs-search-input-field-attachment-button
+                {...attachmentButtonProps}
+              />
+
+              <span data-fs-search-input-field-separator />
+            </>
+          )}
+
+          <IconButton
+            type="submit"
+            aria-label={submitButtonAriaLabel}
+            icon={buttonIcon ?? <Icon name="MagnifyingGlass" />}
+            size="small"
+            data-fs-search-input-field-submit-button
+            {...buttonProps}
+          />
+        </div>
+      </form>
+    </div>
   )
 })
 

package/src/organisms/QuickOrderDrawer/QuickOrderDrawer.tsx

@@ -0,0 +1,58 @@
+import React, { type PropsWithChildren } from 'react'
+import type { OverlayProps } from '../../atoms/Overlay'
+import { useFadeEffect } from '../../hooks'
+import SlideOver from '../SlideOver/SlideOver'
+
+import {
+  QuickOrderDrawerProvider,
+  type QuickOrderDrawerProviderProps,
+} from './provider/QuickOrderDrawerProvider'
+
+export type QuickOrderDrawerProps = {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+
+  /**
+   * Controls the state
+   */
+  isOpen: boolean
+
+  /**
+   * Props forwarded to the `Overlay` component.
+   */
+  overlayProps?: OverlayProps
+
+  /**
+   * Props forwarded to the `QuickOrderDrawerProvider` component.
+   */
+  providerProps?: Omit<QuickOrderDrawerProviderProps, 'children'>
+}
+
+const QuickOrderDrawer = ({
+  testId = 'fs-quick-order-drawer',
+  isOpen,
+  overlayProps,
+  providerProps,
+  children,
+}: PropsWithChildren<QuickOrderDrawerProps>) => {
+  const { fade } = useFadeEffect()
+  return (
+    <QuickOrderDrawerProvider {...providerProps}>
+      <SlideOver
+        testId={testId}
+        fade={fade}
+        isOpen={isOpen}
+        size="partial"
+        direction="rightSide"
+        overlayProps={overlayProps}
+        data-fs-quick-order-drawer
+      >
+        {children}
+      </SlideOver>
+    </QuickOrderDrawerProvider>
+  )
+}
+
+export default QuickOrderDrawer

package/src/organisms/QuickOrderDrawer/QuickOrderDrawerFooter.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react'
+import Button from '../../atoms/Button'
+import Icon from '../../atoms/Icon'
+import Price, { type PriceFormatter } from '../../atoms/Price'
+import { useQuickOrderDrawer } from './provider/QuickOrderDrawerProvider'
+
+export type QuickOrderDrawerFooterProps = {
+  formatter?: PriceFormatter
+  /**
+   * Text labels for CMS configuration
+   */
+  labels?: {
+    itemsLabel?: string
+    addToCartLabel?: string
+    addToCartAriaLabel?: string
+  }
+}
+
+const QuickOrderDrawerFooter = ({
+  formatter,
+  labels,
+}: QuickOrderDrawerFooterProps) => {
+  const [loading, setLoading] = useState(false)
+  const {
+    itemsCount,
+    totalPrice,
+    onAddToCart,
+    formatter: contextFormatter,
+  } = useQuickOrderDrawer()
+  const priceFormatter = formatter || contextFormatter
+  const { itemsLabel, addToCartLabel, addToCartAriaLabel } = labels || {}
+
+  const handleAddToCart = async () => {
+    if (itemsCount === 0) return
+    setLoading(true)
+    try {
+      onAddToCart()
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div data-fs-quick-order-drawer-footer>
+      <div data-fs-quick-order-drawer-footer-items>
+        <Icon name="Inventory" width={24} height={24} />
+        <span>
+          {itemsCount} {itemsLabel || ''}
+        </span>
+      </div>
+      <div data-fs-quick-order-drawer-footer-actions>
+        <Price
+          value={totalPrice}
+          variant="selling"
+          formatter={priceFormatter}
+        />
+        <Button
+          data-fs-quick-order-drawer-add-to-cart-btn
+          variant="primary"
+          disabled={itemsCount === 0}
+          loading={loading}
+          onClick={handleAddToCart}
+          aria-label={addToCartAriaLabel}
+        >
+          {addToCartLabel}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default QuickOrderDrawerFooter

package/src/organisms/QuickOrderDrawer/QuickOrderDrawerHeader.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import Icon from '../../atoms/Icon'
+import { SlideOverHeader } from '../SlideOver'
+
+export type QuickOrderDrawerHeaderProps = {
+  title: string
+  titleCharLimit?: number
+  onCloseDrawer?: () => void
+}
+
+const QuickOrderDrawerHeader = ({
+  onCloseDrawer,
+  title,
+  titleCharLimit = 30,
+}: QuickOrderDrawerHeaderProps) => {
+  const leftOffset = Math.floor(titleCharLimit / 2) - 3
+  const rightOffset = Math.floor(titleCharLimit / 2)
+  const titleFormatted =
+    title.length > titleCharLimit
+      ? `${title.slice(0, leftOffset)}...${title.slice(-rightOffset)}`
+      : title
+
+  return (
+    <SlideOverHeader
+      data-fs-quick-order-drawer-header
+      closeBtnProps={{
+        variant: 'tertiary',
+        color: 'black',
+        'aria-label': 'Close quick order drawer',
+      }}
+      onClose={() => onCloseDrawer?.()}
+    >
+      <div data-fs-quick-order-drawer-title-container>
+        <div data-fs-quick-order-drawer-icon>
+          <Icon name="Table" weight="bold" width={32} height={32} />
+        </div>
+        <div data-fs-quick-order-drawer-title>{titleFormatted}</div>
+      </div>
+    </SlideOverHeader>
+  )
+}
+
+export default QuickOrderDrawerHeader

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'