@faststore/components 3.5.0 → 3.9.0

package/dist/esm/organisms/SKUMatrix/SKUMatrixSidebar.js

@@ -0,0 +1,90 @@
+import Image from 'next/image';
+import React, { useMemo } from 'react';
+import { Badge, Button, QuantitySelector, Skeleton } from '../..';
+import Price from '../../atoms/Price';
+import Icon from '../../atoms/Icon';
+import { useFadeEffect, useSKUMatrix, useUI } from '../../hooks';
+import { Table, TableBody, TableCell, TableHead, TableRow, } from '../../molecules/Table';
+import SlideOver, { SlideOverHeader } from '../SlideOver';
+function SKUMatrixSidebar({ direction = 'rightSide', title, overlayProps, size = 'partial', children, columns, buyProps: { onClick: buyButtonOnClick, ...buyProps }, loading, formatter, ...otherProps }) {
+    const { isOpen, setIsOpen, setAllVariantProducts, allVariantProducts, onChangeQuantityItem, } = useSKUMatrix();
+    const { pushToast } = useUI();
+    const { fade } = useFadeEffect();
+    const cartDetails = useMemo(() => {
+        return allVariantProducts.reduce((acc, product) => ({
+            amount: acc.amount + product.selectedCount,
+            subtotal: acc.subtotal + product.selectedCount * product.price,
+        }), { amount: 0, subtotal: 0 });
+    }, [allVariantProducts]);
+    function resetQuantityItems() {
+        setAllVariantProducts((prev) => prev.map((item) => ({ ...item, quantity: 0 })));
+    }
+    function onClose() {
+        resetQuantityItems();
+        setIsOpen(false);
+    }
+    function handleAddToCart(e) {
+        buyButtonOnClick(e);
+        onClose();
+    }
+    const totalColumnsSkeletonLength = Object.keys(columns).filter((v) => v !== 'additionalColumns').length +
+        (columns.additionalColumns?.length ?? 0);
+    return (React.createElement(SlideOver, { "data-fs-sku-matrix-sidebar": true, size: size, direction: direction, overlayProps: overlayProps, isOpen: isOpen, fade: fade, ...otherProps },
+        React.createElement(SlideOverHeader, { onClose: onClose },
+            React.createElement("h2", { "data-fs-sku-matrix-sidebar-title": true }, title)),
+        children,
+        React.createElement(Table, { variant: "bordered" },
+            React.createElement(TableHead, null,
+                React.createElement(TableRow, null,
+                    React.createElement(TableCell, { align: "left", variant: "header", scope: "col" }, columns.name),
+                    columns.additionalColumns?.map(({ label, value }) => (React.createElement(TableCell, { key: value, align: "left", variant: "header", scope: "col" }, label))),
+                    React.createElement(TableCell, { align: "left", variant: "header", scope: "col" }, columns.availability.label),
+                    React.createElement(TableCell, { align: "right", variant: "header", scope: "col" }, columns.price),
+                    React.createElement(TableCell, { align: "left", variant: "header", scope: "col" }, columns.quantitySelector))),
+            React.createElement(TableBody, null, loading ? (React.createElement(React.Fragment, null, Array.from({ length: 5 }).map((_, index) => {
+                return (React.createElement(TableRow, { key: `table-row-${index}` }, Array.from({
+                    length: totalColumnsSkeletonLength,
+                }).map((_, index) => {
+                    return (React.createElement(TableCell, { key: `table-cell-${index}` },
+                        React.createElement("span", null,
+                            React.createElement(Skeleton, { key: index, size: { width: '100%', height: '30px' } }))));
+                })));
+            }))) : (React.createElement(React.Fragment, null, allVariantProducts.map((variantProduct) => (React.createElement(TableRow, { key: `${variantProduct.name}-${variantProduct.id}` },
+                React.createElement(TableCell, { "data-fs-sku-matrix-sidebar-cell-image": true, align: "left" },
+                    React.createElement(Image, { src: variantProduct.image.url, alt: variantProduct.image.alternateName, width: 48, height: 48 }),
+                    variantProduct.name),
+                columns.additionalColumns?.map(({ value }) => (React.createElement(TableCell, { key: `${variantProduct.name}-${variantProduct.id}-${value}`, align: "left" }, variantProduct.specifications[value.toLowerCase()]))),
+                React.createElement(TableCell, { align: "left" },
+                    columns.availability.stockDisplaySettings ===
+                        'showAvailability' && (React.createElement(Badge, { variant: variantProduct.availability === 'outOfStock'
+                            ? 'warning'
+                            : 'success' }, variantProduct.availability === 'outOfStock'
+                        ? 'Out of stock'
+                        : 'Available')),
+                    columns.availability.stockDisplaySettings ===
+                        'showStockQuantity' && variantProduct.inventory),
+                React.createElement(TableCell, { align: "right" },
+                    React.createElement("div", { "data-fs-sku-matrix-sidebar-table-price": true },
+                        React.createElement(Price, { value: variantProduct.price, variant: "spot", formatter: formatter }))),
+                React.createElement(TableCell, { align: "right", "data-fs-sku-matrix-sidebar-table-cell-quantity-selector": true },
+                    React.createElement("div", { "data-fs-sku-matrix-sidebar-table-action": true },
+                        React.createElement(QuantitySelector, { min: 0, max: variantProduct.inventory, disabled: !variantProduct.inventory ||
+                                variantProduct.availability === 'outOfStock', initial: variantProduct.selectedCount, onChange: (value) => onChangeQuantityItem(variantProduct.id, value), onValidateBlur: (min, maxValue, quantity) => {
+                                pushToast({
+                                    title: 'Invalid quantity!',
+                                    message: `The quantity you entered is outside the range of ${min} to ${maxValue}. The quantity was set to ${quantity}.`,
+                                    status: 'INFO',
+                                    icon: (React.createElement(Icon, { name: "CircleWavyWarning", width: 30, height: 30 })),
+                                });
+                            } })))))))))),
+        React.createElement("footer", { "data-fs-sku-matrix-sidebar-footer": true },
+            React.createElement("div", null,
+                React.createElement("p", null,
+                    cartDetails.amount,
+                    " ",
+                    cartDetails.amount !== 1 ? 'Items' : 'Item'),
+                React.createElement(Price, { value: cartDetails.subtotal, variant: "spot", formatter: formatter })),
+            React.createElement(Button, { variant: "primary", disabled: !cartDetails.amount, onClick: handleAddToCart, ...buyProps }, "Add to Cart"))));
+}
+export default SKUMatrixSidebar;
+//# sourceMappingURL=SKUMatrixSidebar.js.map

package/dist/esm/organisms/SKUMatrix/SKUMatrixSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SKUMatrixSidebar.js","sourceRoot":"","sources":["../../../../src/organisms/SKUMatrix/SKUMatrixSidebar.tsx"],"names":[],"mappings":"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"}

package/dist/esm/organisms/SKUMatrix/SKUMatrixTrigger.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ButtonProps } from '../../atoms/Button';
+export type SKUMatrixTriggerProps = ButtonProps;
+declare const SKUMatrixTrigger: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default SKUMatrixTrigger;

package/dist/esm/organisms/SKUMatrix/SKUMatrixTrigger.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Button from '../../atoms/Button';
+import { useSKUMatrix } from '../../hooks';
+const SKUMatrixTrigger = forwardRef(function SKUMatrixTrigger({ children, variant = 'secondary', onClick, ...otherProps }, ref) {
+    const { setIsOpen } = useSKUMatrix();
+    return (React.createElement(Button, { ref: ref, variant: variant, onClick: (event) => {
+            setIsOpen(true);
+            onClick?.(event);
+        }, ...otherProps }, children));
+});
+export default SKUMatrixTrigger;
+//# sourceMappingURL=SKUMatrixTrigger.js.map

package/dist/esm/organisms/SKUMatrix/SKUMatrixTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SKUMatrixTrigger.js","sourceRoot":"","sources":["../../../../src/organisms/SKUMatrix/SKUMatrixTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAI1C,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,gBAAgB,CACvB,EAAE,QAAQ,EAAE,OAAO,GAAG,WAAW,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,EAC3D,GAAG;IAEH,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,EAAE,CAAA;IAEpC,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,SAAS,CAAC,IAAI,CAAC,CAAA;YACf,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;QAClB,CAAC,KACG,UAAU,IAEb,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist/esm/organisms/SKUMatrix/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from './SKUMatrix';
+export type { SKUMatrixProps } from './SKUMatrix';
+export { default as SKUMatrixTrigger } from './SKUMatrixTrigger';
+export type { SKUMatrixTriggerProps } from './SKUMatrixTrigger';
+export { default as SKUMatrixSidebar } from './SKUMatrixSidebar';
+export type { SKUMatrixSidebarProps } from './SKUMatrixSidebar';

package/dist/esm/organisms/SKUMatrix/index.js

@@ -0,0 +1,4 @@
+export { default } from './SKUMatrix';
+export { default as SKUMatrixTrigger } from './SKUMatrixTrigger';
+export { default as SKUMatrixSidebar } from './SKUMatrixSidebar';
+//# sourceMappingURL=index.js.map

package/dist/esm/organisms/SKUMatrix/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/organisms/SKUMatrix/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAGrC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAGhE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/esm/organisms/SKUMatrix/provider/SKUMatrixProvider.d.ts

@@ -0,0 +1,49 @@
+import React, { SetStateAction } from 'react';
+import type { ReactNode } from 'react';
+interface IAllVariantProducts {
+    id: string;
+    name: string;
+    image: {
+        url: string;
+        alternateName: string;
+    };
+    inventory: number;
+    availability: string;
+    price: number;
+    listPrice: number;
+    priceWithTaxes: number;
+    listPriceWithTaxes: number;
+    specifications: Record<string, string>;
+    selectedCount: number;
+    offers: {
+        highPrice: number;
+        lowPrice: number;
+        lowPriceWithTaxes: number;
+        offerCount: number;
+        priceCurrency: string;
+        offers: Array<{
+            listPrice: number;
+            listPriceWithTaxes: number;
+            sellingPrice: number;
+            priceCurrency: string;
+            price: number;
+            priceWithTaxes: number;
+            priceValidUntil: string;
+            itemCondition: string;
+            availability: string;
+            quantity: number;
+        }>;
+    };
+}
+export interface SKUMatrixProviderContextValue {
+    isOpen: boolean;
+    allVariantProducts: IAllVariantProducts[];
+    setAllVariantProducts(items: SetStateAction<IAllVariantProducts[]>): void;
+    onChangeQuantityItem(id: string, value: number): IAllVariantProducts[];
+    setIsOpen(value: boolean): void;
+}
+export declare const SKUMatrixContext: React.Context<SKUMatrixProviderContextValue | null>;
+declare function SKUMatrixProvider({ children }: {
+    children: ReactNode;
+}): React.JSX.Element;
+export default SKUMatrixProvider;

package/dist/esm/organisms/SKUMatrix/provider/SKUMatrixProvider.js

@@ -0,0 +1,24 @@
+import React, { createContext, useCallback, useState } from 'react';
+export const SKUMatrixContext = createContext(null);
+function SKUMatrixProvider({ children }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [allVariantProducts, setAllVariantProducts] = useState([]);
+    const onChangeQuantityItem = useCallback((id, value) => {
+        const data = [...allVariantProducts];
+        const matchedSKU = data.find((item) => item.id === id);
+        if (matchedSKU) {
+            matchedSKU.selectedCount = value;
+        }
+        setAllVariantProducts(data);
+        return data;
+    }, [allVariantProducts]);
+    return (React.createElement(SKUMatrixContext.Provider, { value: {
+            isOpen,
+            allVariantProducts,
+            setAllVariantProducts,
+            onChangeQuantityItem,
+            setIsOpen,
+        } }, children));
+}
+export default SKUMatrixProvider;
+//# sourceMappingURL=SKUMatrixProvider.js.map

package/dist/esm/organisms/SKUMatrix/provider/SKUMatrixProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SKUMatrixProvider.js","sourceRoot":"","sources":["../../../../../src/organisms/SKUMatrix/provider/SKUMatrixProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAmB,MAAM,OAAO,CAAA;AA+DpF,MAAM,CAAC,MAAM,gBAAgB,GAC3B,aAAa,CAAuC,IAAI,CAAC,CAAA;AAE3D,SAAS,iBAAiB,CAAC,EAAE,QAAQ,EAA2B;IAC9D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACpD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAE1D,EAAE,CAAC,CAAA;IAEL,MAAM,oBAAoB,GAAG,WAAW,CACtC,CAAC,EAAU,EAAE,KAAa,EAAE,EAAE;QAC5B,MAAM,IAAI,GAAG,CAAC,GAAG,kBAAkB,CAAC,CAAA;QACpC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;QAEtD,IAAG,UAAU,EAAE;YACb,UAAU,CAAC,aAAa,GAAG,KAAK,CAAA;SACjC;QAED,qBAAqB,CAAC,IAAI,CAAC,CAAA;QAE3B,OAAO,IAAI,CAAA;IACb,CAAC,EACD,CAAC,kBAAkB,CAAC,CACrB,CAAA;IAED,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IACxB,KAAK,EAAE;YACL,MAAM;YACN,kBAAkB;YAClB,qBAAqB;YACrB,oBAAoB;YACpB,SAAS;SACV,IAEA,QAAQ,CACiB,CAC7B,CAAA;AACH,CAAC;AAED,eAAe,iBAAiB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "3.5.0",
+  "version": "3.9.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/esm/index.d.ts",
@@ -35,8 +35,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@faststore/eslint-config": "^3.5.0",
-    "@faststore/shared": "^3.5.0",
+    "@faststore/eslint-config": "^3.9.0",
+    "@faststore/shared": "^3.9.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^14.3.0",
     "@types/jest-axe": "^3.5.9",
@@ -52,5 +52,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "180554c88fee738fb4fffe62f9dd6d0ceab6bdfb"
+  "gitHead": "50345eff012999c1e2100a5fcfeccd0732da131e"
 }

package/src/hooks/index.ts

@@ -2,6 +2,7 @@ export { default as UIProvider, Toast as ToastProps, useUI } from './UIProvider'
 export { useFadeEffect } from './useFadeEffect'
 export { useTrapFocus } from './useTrapFocus'
 export { useSearch } from './useSearch'
+export { useSKUMatrix } from './useSKUMatrix'
 export { useScrollDirection } from './useScrollDirection'
 export { useSlider } from './useSlider'
 export type {
@@ -11,5 +12,3 @@ export type {
   SlideDirection,
 } from './useSlider'
 export { useSlideVisibility } from './useSlideVisibility'
-
-

package/src/hooks/useSKUMatrix.ts

@@ -0,0 +1,15 @@
+import { useContext } from 'react'
+
+import { SKUMatrixContext } from '../organisms/SKUMatrix/provider/SKUMatrixProvider'
+
+export function useSKUMatrix() {
+  const context = useContext(SKUMatrixContext)
+
+  if (!context) {
+    throw new Error(
+      'Do not use SKUMatrix components outside the SKUMatrix context.'
+    )
+  }
+
+  return context
+}

package/src/index.ts

@@ -360,3 +360,14 @@ export type {
   SlideOverProps,
   SlideOverHeaderProps,
 } from './organisms/SlideOver'
+
+export {
+  default as SKUMatrix,
+  SKUMatrixTrigger,
+  SKUMatrixSidebar,
+} from './organisms/SKUMatrix'
+export type {
+  SKUMatrixProps,
+  SKUMatrixTriggerProps,
+  SKUMatrixSidebarProps
+} from './organisms/SKUMatrix'

package/src/organisms/SKUMatrix/SKUMatrix.tsx

@@ -0,0 +1,22 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import SKUMatrixProvider from './provider/SKUMatrixProvider'
+
+export interface SKUMatrixProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const SKUMatrix = forwardRef<HTMLDivElement, SKUMatrixProps>(function SKUMatrix(
+  { testId = 'fs-sku-matrix', children, ...otherProps },
+  ref
+) {
+  return (
+    <div ref={ref} data-fs-sku-matrix data-testid={testId} {...otherProps}>
+      <SKUMatrixProvider>{children}</SKUMatrixProvider>
+    </div>
+  )
+})
+
+export default SKUMatrix

package/src/organisms/SKUMatrix/SKUMatrixSidebar.tsx

@@ -0,0 +1,297 @@
+import Image from 'next/image'
+import React, { useMemo } from 'react'
+import { Badge, Button, QuantitySelector, Skeleton } from '../..'
+import Price, { PriceFormatter } from '../../atoms/Price'
+import Icon from '../../atoms/Icon'
+import { useFadeEffect, useSKUMatrix, useUI } from '../../hooks'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from '../../molecules/Table'
+import SlideOver, { SlideOverHeader, SlideOverProps } from '../SlideOver'
+
+interface VariationProductColumn {
+  name: string
+  additionalColumns: Array<{ label: string; value: string }>
+  availability: {
+    label: string
+    stockDisplaySettings: 'showStockQuantity' | 'showAvailability'
+  }
+  price: number
+  quantitySelector: number
+}
+
+export interface SKUMatrixSidebarProps
+  extends Omit<SlideOverProps, 'isOpen' | 'setIsOpen' | "fade"> {
+  /**
+   * Title for the SKUMatrixSidebar component.
+   */
+  title?: string
+  /**
+   * Represents the variations products to building the table.
+   */
+  columns: VariationProductColumn
+  /**
+   * Properties related to the 'add to cart' button
+   */
+  buyProps: {
+    'data-testid': string
+    'data-sku': string
+    'data-seller': string
+    onClick(e: React.MouseEvent<HTMLButtonElement>): void
+  }
+  /**
+   * Formatter function that transforms the raw price value and render the result.
+   */
+  formatter?: PriceFormatter
+  /**
+   * Check if some result is still loading before render the result.
+   */
+  loading?: boolean
+}
+
+function SKUMatrixSidebar({
+  direction = 'rightSide',
+  title,
+  overlayProps,
+  size = 'partial',
+  children,
+  columns,
+  buyProps: { onClick: buyButtonOnClick, ...buyProps },
+  loading,
+  formatter,
+  ...otherProps
+}: SKUMatrixSidebarProps) {
+  const {
+    isOpen,
+    setIsOpen,
+    setAllVariantProducts,
+    allVariantProducts,
+    onChangeQuantityItem,
+  } = useSKUMatrix()
+  const { pushToast } = useUI()
+  const { fade } = useFadeEffect()
+
+  const cartDetails = useMemo(() => {
+    return allVariantProducts.reduce(
+      (acc, product) => ({
+        amount: acc.amount + product.selectedCount,
+        subtotal: acc.subtotal + product.selectedCount * product.price,
+      }),
+      { amount: 0, subtotal: 0 }
+    )
+  }, [allVariantProducts])
+
+  function resetQuantityItems() {
+    setAllVariantProducts((prev) =>
+      prev.map((item) => ({ ...item, quantity: 0 }))
+    )
+  }
+
+  function onClose() {
+    resetQuantityItems()
+    setIsOpen(false)
+  }
+
+  function handleAddToCart(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    buyButtonOnClick(e)
+    onClose()
+  }
+
+  const totalColumnsSkeletonLength =
+    Object.keys(columns).filter((v) => v !== 'additionalColumns').length +
+    (columns.additionalColumns?.length ?? 0)
+
+  return (
+    <SlideOver
+      data-fs-sku-matrix-sidebar
+      size={size}
+      direction={direction}
+      overlayProps={overlayProps}
+      isOpen={isOpen}
+      fade={fade}
+      {...otherProps}
+    >
+      <SlideOverHeader onClose={onClose}>
+        <h2 data-fs-sku-matrix-sidebar-title>{title}</h2>
+      </SlideOverHeader>
+
+      {children}
+
+      <Table variant="bordered">
+        <TableHead>
+          <TableRow>
+            <TableCell align="left" variant="header" scope="col">
+              {columns.name}
+            </TableCell>
+
+            {columns.additionalColumns?.map(({ label, value }) => (
+              <TableCell key={value} align="left" variant="header" scope="col">
+                {label}
+              </TableCell>
+            ))}
+
+            <TableCell align="left" variant="header" scope="col">
+              {columns.availability.label}
+            </TableCell>
+
+            <TableCell align="right" variant="header" scope="col">
+              {columns.price}
+            </TableCell>
+
+            <TableCell align="left" variant="header" scope="col">
+              {columns.quantitySelector}
+            </TableCell>
+          </TableRow>
+        </TableHead>
+
+        <TableBody>
+          {loading ? (
+            <>
+              {Array.from({ length: 5 }).map((_, index) => {
+                return (
+                  <TableRow key={`table-row-${index}`}>
+                    {Array.from({
+                      length: totalColumnsSkeletonLength,
+                    }).map((_, index) => {
+                      return (
+                        <TableCell key={`table-cell-${index}`}>
+                          <span>
+                            <Skeleton
+                              key={index}
+                              size={{ width: '100%', height: '30px' }}
+                            />
+                          </span>
+                        </TableCell>
+                      )
+                    })}
+                  </TableRow>
+                )
+              })}
+            </>
+          ) : (
+            <>
+              {allVariantProducts.map((variantProduct) => (
+                <TableRow key={`${variantProduct.name}-${variantProduct.id}`}>
+                  <TableCell data-fs-sku-matrix-sidebar-cell-image align="left">
+                    <Image
+                      src={variantProduct.image.url}
+                      alt={variantProduct.image.alternateName}
+                      width={48}
+                      height={48}
+                    />
+                    {variantProduct.name}
+                  </TableCell>
+
+                  {columns.additionalColumns?.map(({ value }) => (
+                    <TableCell
+                      key={`${variantProduct.name}-${variantProduct.id}-${value}`}
+                      align="left"
+                    >
+                      {variantProduct.specifications[value.toLowerCase()]}
+                    </TableCell>
+                  ))}
+
+                  <TableCell align="left">
+                    {columns.availability.stockDisplaySettings ===
+                      'showAvailability' && (
+                      <Badge
+                        variant={
+                          variantProduct.availability === 'outOfStock'
+                            ? 'warning'
+                            : 'success'
+                        }
+                      >
+                        {variantProduct.availability === 'outOfStock'
+                          ? 'Out of stock'
+                          : 'Available'}
+                      </Badge>
+                    )}
+
+                    {columns.availability.stockDisplaySettings ===
+                      'showStockQuantity' && variantProduct.inventory}
+                  </TableCell>
+
+                  <TableCell align="right">
+                    <div data-fs-sku-matrix-sidebar-table-price>
+                      <Price
+                        value={variantProduct.price}
+                        variant="spot"
+                        formatter={formatter}
+                      />
+                    </div>
+                  </TableCell>
+
+                  <TableCell
+                    align="right"
+                    data-fs-sku-matrix-sidebar-table-cell-quantity-selector
+                  >
+                    <div data-fs-sku-matrix-sidebar-table-action>
+                      <QuantitySelector
+                        min={0}
+                        max={variantProduct.inventory}
+                        disabled={
+                          !variantProduct.inventory ||
+                          variantProduct.availability === 'outOfStock'
+                        }
+                        initial={variantProduct.selectedCount}
+                        onChange={(value) =>
+                          onChangeQuantityItem(variantProduct.id, value)
+                        }
+                        onValidateBlur={(
+                          min: number,
+                          maxValue: number,
+                          quantity: number
+                        ) => {
+                          pushToast({
+                            title: 'Invalid quantity!',
+                            message: `The quantity you entered is outside the range of ${min} to ${maxValue}. The quantity was set to ${quantity}.`,
+                            status: 'INFO',
+                            icon: (
+                              <Icon
+                                name="CircleWavyWarning"
+                                width={30}
+                                height={30}
+                              />
+                            ),
+                          })
+                        }}
+                      />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </>
+          )}
+        </TableBody>
+      </Table>
+
+      <footer data-fs-sku-matrix-sidebar-footer>
+        <div>
+          <p>
+            {cartDetails.amount} {cartDetails.amount !== 1 ? 'Items' : 'Item'}
+          </p>
+          <Price
+            value={cartDetails.subtotal}
+            variant="spot"
+            formatter={formatter}
+          />
+        </div>
+
+        <Button
+          variant="primary"
+          disabled={!cartDetails.amount}
+          onClick={handleAddToCart}
+          {...buyProps}
+        >
+          Add to Cart
+        </Button>
+      </footer>
+    </SlideOver>
+  )
+}
+
+export default SKUMatrixSidebar

package/src/organisms/SKUMatrix/SKUMatrixTrigger.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react'
+import Button from '../../atoms/Button'
+import type { ButtonProps } from '../../atoms/Button'
+import { useSKUMatrix } from '../../hooks'
+
+export type SKUMatrixTriggerProps = ButtonProps
+
+const SKUMatrixTrigger = forwardRef<HTMLButtonElement, SKUMatrixTriggerProps>(
+  function SKUMatrixTrigger(
+    { children, variant = 'secondary', onClick, ...otherProps },
+    ref
+  ) {
+    const { setIsOpen } = useSKUMatrix()
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        onClick={(event) => {
+          setIsOpen(true)
+          onClick?.(event)
+        }}
+        {...otherProps}
+      >
+        {children}
+      </Button>
+    )
+  }
+)
+
+export default SKUMatrixTrigger

package/src/organisms/SKUMatrix/index.ts

@@ -0,0 +1,8 @@
+export { default } from './SKUMatrix'
+export type { SKUMatrixProps } from './SKUMatrix'
+
+export { default as SKUMatrixTrigger } from './SKUMatrixTrigger'
+export type { SKUMatrixTriggerProps } from './SKUMatrixTrigger'
+
+export { default as SKUMatrixSidebar } from './SKUMatrixSidebar'
+export type { SKUMatrixSidebarProps } from './SKUMatrixSidebar'