feat: search product control implementations

packages/components/src/molecules/SearchProducts/SearchProductItemContent.tsx

@@ -1,5 +1,6 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useCallback } from 'react'
 import { ProductPrice } from '../..'
+import SearchProductItemControl from './SearchProductItemControl'
 
 import type { PriceDefinition } from '../../typings/PriceDefinition'
 
@@ -12,23 +13,63 @@ export interface SearchProductItemContentProps {
    * Specifies product's prices.
    */
   price: PriceDefinition
+  /**
+   * Quick order condition.
+   */
+  quickOrder?: {
+    enabled: boolean
+    availability: boolean
+    hasVariants: boolean
+    skuMatrixControl: React.ReactNode
+		quantity: number,
+		onChangeQuantity(value: number): void
+    buyProps?: {
+      onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
+      'data-testid': string
+      'data-sku': string
+      'data-seller': string
+    }
+  }
 }
 
 const SearchProductItemContent = forwardRef<
   HTMLElement,
   SearchProductItemContentProps
->(function SearchProductItemContent({ price, title, ...otherProps }, ref) {
+>(function SearchProductItemContent(
+  { price, title, quickOrder, ...otherProps },
+  ref
+) {
+  const renderProductItemContent = useCallback(() => {
+    return (
+      <>
+        <p data-fs-search-product-item-title>{title}</p>
+        {price.value !== 0 && (
+          <ProductPrice
+            data-fs-search-product-item-prices
+            listPrice={price.listPrice}
+            value={price.value}
+            formatter={price.formatter}
+          />
+        )}
+      </>
+    )
+  }, [quickOrder?.enabled])
+
   return (
     <section ref={ref} data-fs-search-product-item-content {...otherProps}>
-      <p data-fs-search-product-item-title>{title}</p>
+      {!quickOrder?.enabled && renderProductItemContent()}
 
-      {price.value !== 0 && (
-        <ProductPrice
-          data-fs-search-product-item-prices
-          listPrice={price.listPrice}
-          value={price.value}
-          formatter={price.formatter}
-        />
+      {quickOrder?.enabled && (
+        <SearchProductItemControl
+          availability={quickOrder.availability}
+          hasVariants={quickOrder.hasVariants}
+          skuMatrixControl={quickOrder.skuMatrixControl}
+					quantity={quickOrder.quantity}
+					onChangeQuantity={quickOrder.onChangeQuantity}
+          {...quickOrder.buyProps}
+        >
+          {renderProductItemContent()}
+        </SearchProductItemControl>
       )}
     </section>
   )

packages/components/src/molecules/SearchProducts/SearchProductItemControl.tsx

@@ -0,0 +1,124 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import { Badge, Icon, IconButton, Input, Loader, QuantitySelector } from '../..'
+type StatusButtonAddToCartType = 'default' | 'inProgress' | 'completed'
+
+export interface SearchProductItemControlProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onClick'> {
+  children: React.ReactNode
+  availability: boolean
+  hasVariants: boolean
+  skuMatrixControl: React.ReactNode
+  quantity: number
+  onClick?(e: React.MouseEvent<HTMLButtonElement>): void
+  onChangeQuantity(value: number): void
+}
+
+const SearchProductItemControl = forwardRef<
+  HTMLDivElement,
+  SearchProductItemControlProps
+>(function SearchProductItemControl(
+  {
+    availability,
+    children,
+    hasVariants,
+    skuMatrixControl,
+    quantity,
+    onClick,
+    onChangeQuantity,
+    ...otherProps
+  },
+  ref
+) {
+  const [statusAddToCart, setStatusAddToCart] =
+    React.useState<StatusButtonAddToCartType>('default')
+  function stopPropagationClick(e: React.MouseEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+  function handleAddToCart(event: React.MouseEvent<HTMLButtonElement>) {
+    if (onClick) {
+      setStatusAddToCart('inProgress')
+
+      setTimeout(() => {
+        setStatusAddToCart('completed')
+        onClick(event)
+      }, 1000)
+
+      setTimeout(() => {
+				setStatusAddToCart('default')
+				onChangeQuantity(1)
+			}, 2000)
+    }
+  }
+
+  const getIcon = React.useCallback(() => {
+    switch (statusAddToCart) {
+      case 'inProgress':
+        return <Loader />
+      case 'completed':
+        return <Icon name="Checked" width={24} height={24} />
+      default:
+        return <Icon name="ShoppingCart" width={24} height={24} />
+    }
+  }, [statusAddToCart])
+
+	const showSKUMatrixControl = availability && hasVariants;
+	const isMobile = window.innerWidth <= 768
+
+  return (
+    <div
+      ref={ref}
+      data-fs-search-product-item-control
+      onClick={stopPropagationClick}
+      {...otherProps}
+    >
+      <div data-fs-search-product-item-control-content>
+        {!availability && (
+          <Badge
+            data-fs-search-product-item-control-badge
+            variant="warning"
+          >
+            Out of Stock
+          </Badge>
+        )}
+        {children}
+      </div>
+      {availability && !hasVariants && (
+        <div
+          data-fs-search-product-item-control-actions
+          role="group"
+          onClick={stopPropagationClick}
+        >
+          {!isMobile && (
+            <QuantitySelector
+              disabled={statusAddToCart !== 'default'}
+              initial={quantity}
+              onChange={onChangeQuantity}
+            />
+          )}
+
+          {isMobile && (
+						<Input
+							data-fs-product-item-control-input
+							type="number"
+							min={1}
+							value={quantity}
+							onChange={(e) => onChangeQuantity(e.target.valueAsNumber)}
+						/>
+					)}
+
+          <IconButton
+            variant="primary"
+            aria-label="Add product to cart"
+            onClick={handleAddToCart}
+            disabled={statusAddToCart === 'inProgress'}
+            icon={getIcon()}
+          />
+        </div>
+      )}
+
+      {showSKUMatrixControl && skuMatrixControl}
+    </div>
+  )
+})
+export default SearchProductItemControl

packages/core/src/components/search/SearchProductItem/SearchProductItem.tsx

@@ -9,6 +9,8 @@ import { Image } from 'src/components/ui/Image'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import { useProductLink } from 'src/sdk/product/useProductLink'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import { useMemo, useState } from 'react'
+import { useBuyButton } from 'src/sdk/cart/useBuyButton'
 
 type SearchProductItemProps = {
   /**
@@ -19,11 +21,16 @@ type SearchProductItemProps = {
    * Index to generate product link.
    */
   index: number
+  /**
+   * Enable Quick Order.
+   */
+  quickOrder?: boolean
 }
 
 function SearchProductItem({
   product,
   index,
+  quickOrder,
   ...otherProps
 }: SearchProductItemProps) {
   const {
@@ -36,13 +43,31 @@ function SearchProductItem({
     index,
   })
 
+  const [quantity, setQuantity] = useState<number>(1)
+
   const {
-    isVariantOf: { name },
+    id,
+    sku,
+    gtin,
+    name,
+    brand,
+    isVariantOf,
+    unitMultiplier,
     image: [img],
     offers: {
       lowPrice: spotPrice,
-      offers: [{ listPrice }],
+      offers: [
+        {
+          listPrice,
+          availability,
+          price,
+          listPriceWithTaxes,
+          seller,
+          priceWithTaxes,
+        },
+      ],
     },
+    additionalProperty,
   } = product
 
   const linkProps = {
@@ -54,6 +79,43 @@ function SearchProductItem({
     ...baseLinkProps,
   }
 
+  const outOfStock = useMemo(
+    () => availability === 'https://schema.org/OutOfStock',
+    [availability]
+  )
+
+  const hasVariants = useMemo(
+    () =>
+      Boolean(
+        Object.keys(product.isVariantOf.skuVariants.allVariantsByName).length
+      ),
+
+    [product]
+  )
+
+  const buyProps = useBuyButton(
+    {
+      id,
+      price,
+      priceWithTaxes,
+      listPrice,
+      listPriceWithTaxes,
+      seller,
+      quantity,
+      itemOffered: {
+        sku,
+        name,
+        gtin,
+        image: [img],
+        brand,
+        isVariantOf,
+        additionalProperty,
+        unitMultiplier,
+      },
+    },
+    false
+  )
+
   return (
     <UISearchProductItem linkProps={linkProps} {...otherProps}>
       <UISearchProductItemImage>
@@ -66,6 +128,16 @@ function SearchProductItem({
           listPrice: listPrice,
           formatter: useFormattedPrice,
         }}
+        quickOrder={{
+          enabled: quickOrder,
+          availability: !outOfStock,
+          hasVariants,
+          buyProps,
+          quantity,
+          onChangeQuantity: setQuantity,
+          // FIXME: Use SKU Matrix component
+          skuMatrixControl: <button>Select multiple</button>,
+        }}
       ></UISearchProductItemContent>
     </UISearchProductItem>
   )

packages/core/src/components/sections/Navbar/section.module.scss

@@ -7,12 +7,14 @@
     @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
     @import "@faststore/ui/src/components/atoms/Button/styles.scss";
     @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Loader/styles.scss";
     @import "@faststore/ui/src/components/atoms/Input/styles.scss";
     @import "@faststore/ui/src/components/atoms/Link/styles.scss";
     @import "@faststore/ui/src/components/atoms/List/styles.scss";
     @import "@faststore/ui/src/components/atoms/Logo/styles.scss";
     @import "@faststore/ui/src/components/atoms/Price/styles.scss";
     @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
+    @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
     @import "@faststore/ui/src/components/molecules/NavbarLinks/styles.scss";
     @import "@faststore/ui/src/components/molecules/ProductPrice/styles.scss";
     @import "@faststore/ui/src/components/molecules/SearchAutoComplete/styles.scss";

packages/core/src/sdk/cart/useBuyButton.ts

@@ -8,7 +8,7 @@ import { useUI } from '@faststore/ui'
 import { useSession } from '../session'
 import { cartStore } from './index'
 
-export const useBuyButton = (item: CartItem | null) => {
+export const useBuyButton = (item: CartItem | null, shouldOpenCart = true) => {
   const { openCart } = useUI()
   const {
     currency: { code },
@@ -49,7 +49,10 @@ export const useBuyButton = (item: CartItem | null) => {
       })
 
       cartStore.addItem(item)
-      openCart()
+
+      if (shouldOpenCart) {
+        openCart()
+      }
     },
     [code, item, openCart]
   )