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

package/src/molecules/FileUploadStatus/FileUploadStatus.tsx

@@ -0,0 +1,258 @@
+import type { HTMLAttributes } from 'react'
+import React from 'react'
+
+import { Button, Icon } from '../..'
+
+export enum FileUploadState {
+  Uploading = 'uploading',
+  Completed = 'completed',
+  Error = 'error',
+}
+
+export enum FileUploadErrorType {
+  Unexpected = 'unexpected',
+  Unsupported = 'unsupported',
+  Unreadable = 'unreadable',
+  InvalidStructure = 'invalid-structure',
+  Empty = 'empty',
+  TooLarge = 'too-large',
+  NoProductsFound = 'no-products-found',
+}
+
+export interface FileUploadStatusProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * The file being uploaded.
+   */
+  file: File
+  /**
+   * Current upload state.
+   * @default 'uploading'
+   */
+  state?: FileUploadState
+  /**
+   * Type of error when state is 'error'.
+   */
+  errorType?: FileUploadErrorType
+  /**
+   * Custom error message. If provided, overrides the default error message for the errorType.
+   */
+  errorMessage?: string
+  /**
+   * Callback when the remove/cancel button is clicked.
+   */
+  onRemove?: () => void
+  /**
+   * Callback when the search button is clicked (only shown when state is 'completed').
+   */
+  onSearch?: () => void
+  /**
+   * Callback when download template is clicked (only shown when state is 'error').
+   */
+  onDownloadTemplate?: () => void
+  /**
+   * Callback when select file is clicked (only shown when state is 'error').
+   */
+  onSelectFile?: () => void
+  /**
+   * Aria-label for the remove button (e.g. from CMS).
+   */
+  removeButtonAriaLabel: string
+  /**
+   * Label for the search button when state is 'completed' (e.g. from CMS).
+   */
+  searchButtonLabel: string
+  /**
+   * Label for the download template button (e.g. from CMS).
+   */
+  downloadTemplateButtonLabel: string
+  /**
+   * Label for the select file button (e.g. from CMS).
+   */
+  selectFileButtonLabel: string
+  /**
+   * Error messages per error type (e.g. from CMS). Required when state is Error to show messages.
+   */
+  errorMessages: Partial<
+    Record<FileUploadErrorType, { title: string; description: string }>
+  >
+  /**
+   * Status text when state is Uploading (e.g. from CMS).
+   */
+  uploadingStatusText: string
+  /**
+   * Status text when state is Completed (e.g. from CMS). May include file size.
+   */
+  completedStatusText: string
+  /**
+   * Custom file name display (optional).
+   */
+  fileName?: string
+}
+
+const FileUploadStatus = ({
+  testId = 'fs-file-upload-status',
+  file,
+  state = FileUploadState.Uploading,
+  errorType,
+  errorMessage,
+  onRemove,
+  onSearch,
+  onDownloadTemplate,
+  onSelectFile,
+  removeButtonAriaLabel,
+  searchButtonLabel,
+  downloadTemplateButtonLabel,
+  selectFileButtonLabel,
+  errorMessages,
+  uploadingStatusText,
+  completedStatusText,
+  fileName,
+  ...otherProps
+}: FileUploadStatusProps) => {
+  const getErrorMessage = (): { title: string; description: string } => {
+    if (errorMessage) {
+      return { title: errorMessage, description: '' }
+    }
+
+    if (errorType && errorMessages?.[errorType]) {
+      return errorMessages[errorType]!
+    }
+
+    return (
+      errorMessages?.[FileUploadErrorType.Unexpected] ?? {
+        title: '',
+        description: '',
+      }
+    )
+  }
+
+  const getStatusText = (): string => {
+    switch (state) {
+      case FileUploadState.Uploading:
+        return uploadingStatusText
+      case FileUploadState.Completed:
+        return completedStatusText
+      default:
+        return ''
+    }
+  }
+
+  const getIcon = () => {
+    switch (state) {
+      case FileUploadState.Uploading:
+        return (
+          <div data-fs-file-upload-status-icon-loading>
+            <Icon name="CircleNotch" width={24} height={24} strokeWidth={5} />
+          </div>
+        )
+      case FileUploadState.Completed:
+        return (
+          <div data-fs-file-upload-status-icon-completed>
+            <Icon name="Table" width={24} height={24} strokeWidth={5} />
+          </div>
+        )
+      case FileUploadState.Error:
+        return (
+          <div data-fs-file-upload-status-icon-error>
+            <Icon
+              name="WarningOctagon"
+              width={24}
+              height={24}
+              strokeWidth={5}
+            />
+          </div>
+        )
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div
+      data-fs-file-upload-status
+      data-fs-file-upload-status-state={state}
+      data-testid={testId}
+      {...otherProps}
+    >
+      <div
+        data-fs-file-upload-status-file-info
+        data-fs-file-upload-state={state}
+      >
+        <div data-fs-file-upload-status-icon>{getIcon()}</div>
+
+        <div data-fs-file-upload-status-details>
+          {state === FileUploadState.Error ? (
+            <>
+              <p data-fs-file-upload-status-text-error>
+                {getErrorMessage().title}
+              </p>
+              <p data-fs-file-upload-status-text-error>
+                {getErrorMessage().description}
+              </p>
+            </>
+          ) : (
+            <>
+              <p data-fs-file-upload-status-filename>{fileName ?? file.name}</p>
+              <p data-fs-file-upload-status-text>{getStatusText()}</p>
+            </>
+          )}
+        </div>
+
+        {onRemove && (
+          <Button
+            type="button"
+            onClick={onRemove}
+            data-fs-file-upload-status-remove
+            aria-label={removeButtonAriaLabel}
+          >
+            <Icon name="X" width={16} height={16} />
+          </Button>
+        )}
+      </div>
+      {state === FileUploadState.Completed && onSearch && (
+        <Button
+          type="button"
+          variant="primary"
+          size="regular"
+          onClick={onSearch}
+          data-fs-file-upload-status-search-button
+        >
+          {searchButtonLabel}
+        </Button>
+      )}
+
+      {state === FileUploadState.Error && (
+        <div data-fs-file-upload-status-error-actions>
+          {onDownloadTemplate && (
+            <Button
+              type="button"
+              variant="secondary"
+              size="regular"
+              onClick={onDownloadTemplate}
+              data-fs-file-upload-status-download-button
+            >
+              {downloadTemplateButtonLabel}
+            </Button>
+          )}
+          {onSelectFile && (
+            <Button
+              type="button"
+              variant="primary"
+              size="regular"
+              onClick={onSelectFile}
+              data-fs-file-upload-status-select-button
+            >
+              {selectFileButtonLabel}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default FileUploadStatus

package/src/molecules/FileUploadStatus/index.tsx

@@ -0,0 +1,6 @@
+export {
+  default,
+  FileUploadState,
+  FileUploadErrorType,
+} from './FileUploadStatus'
+export type { FileUploadStatusProps } from './FileUploadStatus'

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/molecules/SearchProducts/SearchProductItem.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react'
 
 import { Link, type LinkElementType, type LinkProps } from '../..'
 
-export interface SearchProductItemProps extends HTMLAttributes<HTMLDivElement> {
+export interface SearchProductItemProps extends HTMLAttributes<HTMLLIElement> {
   /**
    * ID to find this component in testing tools (e.g.: cypress,
    * testing-library, and jest).
@@ -17,11 +17,16 @@ export interface SearchProductItemProps extends HTMLAttributes<HTMLDivElement> {
 
 const SearchProductItem = forwardRef<HTMLLIElement, SearchProductItemProps>(
   function ProductItem(
-    { testId = 'fs-search-product-item', linkProps, children },
+    { testId = 'fs-search-product-item', linkProps, children, ...otherProps },
     ref
   ) {
     return (
-      <li ref={ref} data-fs-search-product-item data-testid={testId}>
+      <li
+        ref={ref}
+        data-fs-search-product-item
+        data-testid={testId}
+        {...otherProps}
+      >
         <Link {...linkProps} data-fs-search-product-item-link variant="display">
           {children}
         </Link>

package/src/molecules/SearchProvider/SearchProvider.tsx

@@ -23,6 +23,10 @@ export interface SearchProviderContextValue {
    * Callback function when a search term is selected.
    */
   onSearchSelection?: (term: string, path: string) => void
+  /**
+   * Search result searchId.
+   */
+  searchId?: string
 }
 
 export const SearchContext = createContext<SearchProviderContextValue | null>(
@@ -36,10 +40,11 @@ function SearchProvider({
   terms,
   products,
   isLoading,
+  searchId,
 }: PropsWithChildren<SearchProviderContextValue>) {
   return (
     <SearchContext.Provider
-      value={{ onSearchSelection, term, terms, products, isLoading }}
+      value={{ onSearchSelection, term, terms, products, isLoading, searchId }}
     >
       {children}
     </SearchContext.Provider>

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