@faststore/core 22.42.6

package/src/components/cart/CartItem/CartItem.stories.mdx

@@ -0,0 +1,134 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+
+import CartItem from '.'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Molecules/CartItem"
+  component={CartItem}
+  argTypes={{
+    item: {
+      control: false,
+      description:
+        'The CartItem object that represents the product inside the Cart.',
+    },
+  }}
+/>
+
+<header>
+
+# Cart Item
+
+Cart Items are used to present the summarized information of a product inside the Cart.
+
+</header>
+
+## Overview
+
+The `CartItem` component uses [FastStore UI Card](https://www.faststore.dev/reference/ui/organisms/Card) as base.
+
+---
+
+## Usage
+
+`import CartItem from '../components/cart/CartItem'`
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      item: {
+        seller: {
+          identifier: '1',
+        },
+        quantity: 1,
+        price: 420,
+        listPrice: 490,
+        itemOffered: {
+          name: 'Monitor 27',
+          image: [
+            {
+              url: 'https://storeframework.vtexassets.com/arquivos/ids/190903/unsplash-monitor.jpg?v=637800152494200000',
+              alternateName: 'Monitor27',
+            },
+          ],
+          isVariantOf: {
+            name: '4k Philips Monitor 27”',
+          },
+        },
+      },
+    }}
+  >
+    {(args) => (
+      <div style={{ width: '400px' }}>
+        <CartItem {...args} />
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+<TokenTable>
+  <TokenRow token="--fs-cart-item-padding" value="var(--fs-spacing-3)" />
+  <TokenRow
+    token="--fs-cart-item-bkg-color"
+    value="var(--fs-control-bkg)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-cart-item-border-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-cart-item-border-color"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-cart-item-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Image
+
+<TokenTable>
+  <TokenRow
+    token="--fs-cart-item-image-border-radius"
+    value="var(--fs-cart-item-border-radius)"
+  />
+</TokenTable>
+
+### Title
+
+<TokenTable>
+  <TokenRow
+    token="--fs-cart-item-title-margin-bottom"
+    value="var(--fs-spacing-0)"
+  />
+  <TokenRow token="--fs-cart-item-title-line-height" value="1.2" />
+  <TokenRow
+    token="--fs-cart-item-title-color"
+    value="var(--fs-color-text)"
+    isColor
+  />
+</TokenTable>
+
+### Actions
+
+<TokenTable>
+  <TokenRow
+    token="--fs-cart-item-actions-margin-top"
+    value="var(--fs-spacing-3)"
+  />
+</TokenTable>

package/src/components/cart/CartItem/CartItem.tsx

@@ -0,0 +1,158 @@
+import { sendAnalyticsEvent } from '@faststore/sdk'
+import {
+  CartItem as UICartItem,
+  CartItemActions as UICartItemActions,
+  CartItemSummary as UICartItemSummary,
+  CartItemTitle as UICartItemTitle,
+  CartItemPrices as UICartItemPrices,
+  CartItemContent as UICartItemContent,
+  CartItemImage as UICartItemImage,
+} from '@faststore/ui'
+import { useCallback, useMemo } from 'react'
+import type {
+  AddToCartEvent,
+  CurrencyCode,
+  RemoveFromCartEvent,
+} from '@faststore/sdk'
+
+import Button from 'src/components/ui/Button'
+import Icon from 'src/components/ui/Icon'
+import { Image } from 'src/components/ui/Image'
+import Price from 'src/components/ui/Price'
+import QuantitySelector from 'src/components/ui/QuantitySelector'
+import { cartStore } from 'src/sdk/cart'
+import { useRemoveButton } from 'src/sdk/cart/useRemoveButton'
+import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
+import { useSession } from 'src/sdk/session'
+import type { CartItem as ICartItem } from 'src/sdk/cart'
+import type { AnalyticsItem } from 'src/sdk/analytics/types'
+
+import styles from './cart-item.module.scss'
+
+function useCartItemEvent() {
+  const {
+    currency: { code },
+  } = useSession()
+
+  const sendCartItemEvent = useCallback(
+    (item: Props['item'], quantity: number) => {
+      const quantityDelta = quantity - item.quantity
+
+      return sendAnalyticsEvent<
+        AddToCartEvent<AnalyticsItem> | RemoveFromCartEvent<AnalyticsItem>
+      >({
+        name: quantityDelta > 0 ? 'add_to_cart' : 'remove_from_cart',
+        params: {
+          currency: code as CurrencyCode,
+          // TODO: In the future, we can explore more robust ways of
+          // calculating the value (gift items, discounts, etc.).
+          value: item.price * Math.abs(quantityDelta),
+          items: [
+            {
+              item_id: item.itemOffered.isVariantOf.productGroupID,
+              item_name: item.itemOffered.isVariantOf.name,
+              item_brand: item.itemOffered.brand.name,
+              item_variant: item.itemOffered.sku,
+              quantity: Math.abs(quantityDelta),
+              price: item.price,
+              discount: item.listPrice - item.price,
+              currency: code as CurrencyCode,
+              item_variant_name: item.itemOffered.name,
+              product_reference_id: item.itemOffered.gtin,
+            },
+          ],
+        },
+      })
+    },
+    [code]
+  )
+
+  return useMemo(() => ({ sendCartItemEvent }), [sendCartItemEvent])
+}
+
+interface Props {
+  item: ICartItem
+  gift?: boolean
+}
+
+function CartItem({ item, gift = false }: Props) {
+  const btnProps = useRemoveButton(item)
+
+  const { sendCartItemEvent } = useCartItemEvent()
+
+  const onQuantityChange = useCallback(
+    (quantity: number) => {
+      sendCartItemEvent(item, quantity)
+
+      cartStore.updateItemQuantity(item.id, quantity)
+    },
+    [item, sendCartItemEvent]
+  )
+
+  return (
+    <UICartItem
+      className={styles.fsCartItem}
+      data-testid="cart-item"
+      data-sku={item.itemOffered.sku}
+      data-seller={item.seller.identifier}
+    >
+      <UICartItemContent>
+        <UICartItemImage>
+          <Image
+            src={item.itemOffered.image[0].url}
+            alt={item.itemOffered.image[0].alternateName}
+            width={72}
+            height={72}
+          />
+        </UICartItemImage>
+        <UICartItemSummary>
+          <UICartItemTitle className="text__body">
+            {item.itemOffered.isVariantOf.name}
+          </UICartItemTitle>
+          {!gift && (
+            <UICartItemPrices>
+              <Price
+                value={item.listPrice}
+                formatter={useFormattedPrice}
+                testId="list-price"
+                data-value={item.listPrice}
+                variant="listing"
+                classes="text__legend"
+                SRText="Original price:"
+              />
+              <Price
+                value={item.price}
+                formatter={useFormattedPrice}
+                testId="price"
+                data-value={item.price}
+                variant="spot"
+                classes="text__title-subsection"
+                SRText="Price:"
+              />
+            </UICartItemPrices>
+          )}
+        </UICartItemSummary>
+      </UICartItemContent>
+
+      {!gift && (
+        <UICartItemActions>
+          <Button
+            variant="tertiary"
+            icon={<Icon name="XCircle" width={18} height={18} />}
+            iconPosition="left"
+            {...btnProps}
+          >
+            Remove
+          </Button>
+          <QuantitySelector
+            min={1}
+            initial={item.quantity}
+            onChange={onQuantityChange}
+          />
+        </UICartItemActions>
+      )}
+    </UICartItem>
+  )
+}
+
+export default CartItem

package/src/components/cart/CartItem/cart-item.module.scss

@@ -0,0 +1,68 @@
+@import "src/styles/scaffold";
+
+.fs-cart-item {
+  // --------------------------------------------------------
+  // Design Tokens for CartItem
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-cart-item-padding               : var(--fs-spacing-3);
+  --fs-cart-item-bkg-color             : var(--fs-control-bkg);
+
+  --fs-cart-item-border-width          : var(--fs-border-width);
+  --fs-cart-item-border-color          : var(--fs-border-color-light);
+  --fs-cart-item-border-radius         : var(--fs-border-radius);
+
+  // Image
+  --fs-cart-item-image-border-radius   : var(--fs-cart-item-border-radius);
+
+  // Title
+  --fs-cart-item-title-margin-bottom   : var(--fs-spacing-0);
+  --fs-cart-item-title-line-height     : 1.2;
+  --fs-cart-item-title-color           : var(--fs-color-text);
+
+  // Actions
+  --fs-cart-item-actions-margin-top    : var(--fs-spacing-3);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  padding: var(--fs-cart-item-padding);
+  background-color: var(--fs-cart-item-bkg-color);
+  border: var(--fs-cart-item-border-width) solid var(--fs-cart-item-border-color);
+  border-radius: var(--fs-cart-item-border-radius);
+
+  [data-fs-cart-item-content] {
+    display: grid;
+    grid-template-columns: rem(72px) repeat(4, 1fr);
+    column-gap: var(--fs-grid-gap-2);
+    align-items: center;
+  }
+
+  [data-fs-cart-item-summary] {
+    flex-direction: column;
+    grid-column: 2 / span 4;
+  }
+
+  [data-fs-cart-item-title] {
+    margin-bottom: var(--fs-cart-item-title-margin-bottom);
+    line-height: var(--fs-cart-item-title-line-height);
+    color: var(--fs-cart-item-title-color);
+    text-decoration: none;
+    outline: none;
+
+    @include truncate-title;
+  }
+
+  [data-fs-cart-item-prices] {
+    display: flex;
+    align-items: baseline;
+  }
+
+  [data-fs-cart-item-actions] {
+    display: flex;
+    justify-content: space-between;
+    margin-top: var(--fs-cart-item-actions-margin-top);
+  }
+}

package/src/components/cart/CartItem/index.ts

@@ -0,0 +1 @@
+export { default } from './CartItem'

package/src/components/cart/CartSidebar/CartSidebar.stories.mdx

@@ -0,0 +1,119 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { useCart } from 'src/sdk/cart'
+
+import CartToggle from 'src/components/cart/CartToggle'
+import CartSidebar from '.'
+
+import { cartItem } from 'src/../.storybook/mocks/cart-sidebar'
+import { ButtonBuy } from 'src/components/ui/Button'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta component={CartSidebar} title="Organisms/CartSidebar" />
+
+export const Template = () => {
+  const { cart: displayCart } = useUI()
+  const { addItem } = useCart()
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <CartToggle />
+      <ButtonBuy
+        style={{ marginLeft: '12px' }}
+        onClick={() => addItem(cartItem)}
+      >
+        Add item to Cart
+      </ButtonBuy>
+      {displayCart && <CartSidebar />}
+    </div>
+  )
+}
+
+export const TemplateProvider = () => {
+  return (
+    <UIProvider>
+      <Template />
+    </UIProvider>
+  )
+}
+
+<header>
+
+# Cart Sidebar
+
+The `CartSidebar` displays the summary of items added to the cart along with detailed information, and checkout option.
+
+</header>
+
+## Overview
+
+Uses [SlideOver](?path=/docs/organisms-slideover--default-story) as base.
+
+---
+
+## Usage
+
+`import CartSidebar from 'src/components/cart/CartSidebar'`
+
+<Canvas>
+  <Story name="overview-default">{TemplateProvider.bind({})}</Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-cart-sidebar-bkg-color"
+    value="var(--fs-color-neutral-bkg)"
+    isColor
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Header
+
+<TokenTable>
+  <TokenRow
+    token="--fs-cart-sidebar-header-padding"
+    value="var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-2)"
+  />
+  <TokenRow
+    token="--fs-cart-sidebar-header-bkg-color"
+    value="var(--fs-color-neutral-0)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-cart-sidebar-header-title-margin-right"
+    value="var(--fs-spacing-2)"
+  />
+</TokenTable>
+
+### List
+
+<TokenTable>
+  <TokenRow
+    token="--fs-cart-sidebar-list-padding"
+    value="var(--fs-spacing-3)"
+  />
+</TokenTable>
+
+### Footer
+
+<TokenTable>
+  <TokenRow
+    token="--fs-cart-sidebar-footer-bkg-color"
+    value="var(--fs-color-neutral-0)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-cart-sidebar-footer-box-shadow"
+    value="0 0 6px rgb(0 0 0 / 20%)"
+  />
+</TokenTable>

package/src/components/cart/CartSidebar/CartSidebar.tsx

@@ -0,0 +1,140 @@
+import { sendAnalyticsEvent } from '@faststore/sdk'
+import { List } from '@faststore/ui'
+import { useEffect } from 'react'
+import type { ViewCartEvent, CurrencyCode } from '@faststore/sdk'
+
+import Alert from 'src/components/ui/Alert'
+import { Badge } from 'src/components/ui/Badge'
+import Button from 'src/components/ui/Button'
+import Icon from 'src/components/ui/Icon'
+import SlideOver from 'src/components/ui/SlideOver'
+import { useCart } from 'src/sdk/cart'
+import { useCheckoutButton } from 'src/sdk/cart/useCheckoutButton'
+import { useSession } from 'src/sdk/session'
+import { useUI } from 'src/sdk/ui/Provider'
+import { useFadeEffect } from 'src/sdk/ui/useFadeEffect'
+
+import CartItem from '../CartItem'
+import EmptyCart from '../EmptyCart'
+import OrderSummary from '../OrderSummary'
+import styles from './cart-sidebar.module.scss'
+
+function CartSidebar() {
+  const { currency } = useSession()
+  const btnProps = useCheckoutButton()
+  const cart = useCart()
+  const { cart: displayCart, closeCart } = useUI()
+  const { fade, fadeOut } = useFadeEffect()
+
+  const { items, gifts, totalItems, isValidating, subTotal, total } = cart
+
+  const isEmpty = items.length === 0
+
+  useEffect(() => {
+    sendAnalyticsEvent<ViewCartEvent>({
+      name: 'view_cart',
+      params: {
+        currency: currency.code as CurrencyCode,
+        value: total,
+        items: items.concat(gifts).map((item) => ({
+          item_id: item.itemOffered.isVariantOf.productGroupID,
+          item_name: item.itemOffered.isVariantOf.name,
+          item_brand: item.itemOffered.brand.name,
+          item_variant: item.itemOffered.sku,
+          quantity: item.quantity,
+          price: item.price,
+          discount: item.listPrice - item.price,
+          currency: currency.code as CurrencyCode,
+          item_variant_name: item.itemOffered.name,
+          product_reference_id: item.itemOffered.gtin,
+        })),
+      },
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <SlideOver
+      fade={fade}
+      isOpen={displayCart}
+      onDismiss={fadeOut}
+      size="partial"
+      direction="rightSide"
+      className={styles.fsCartSidebar}
+      onTransitionEnd={() => fade === 'out' && closeCart()}
+    >
+      <header data-fs-cart-sidebar-header data-testid="cart-sidebar">
+        <div data-fs-cart-sidebar-title>
+          <p data-fs-cart-sidebar-title-text className="text__lead">
+            Your Cart
+          </p>
+          <Badge variant="info">{totalItems}</Badge>
+        </div>
+        <Button
+          data-fs-cart-sidebar-close-button
+          data-testid="cart-sidebar-button-close"
+          aria-label="Close Cart"
+          icon={<Icon name="X" width={32} height={32} />}
+          onClick={fadeOut}
+        />
+      </header>
+      <Alert icon={<Icon name="Truck" width={24} height={24} />}>
+        Free shipping starts at $300
+      </Alert>
+
+      {isEmpty ? (
+        <EmptyCart onDismiss={fadeOut} />
+      ) : (
+        <>
+          <List data-fs-cart-sidebar-list>
+            {items.map((item) => (
+              <li key={item.id}>
+                <CartItem item={item} />
+              </li>
+            ))}
+          </List>
+
+          {gifts.length > 0 && (
+            <>
+              <Alert icon={<Icon name="Gift" width={24} height={24} />}>
+                Gifts
+              </Alert>
+              <List data-fs-cart-sidebar-list>
+                {gifts.map((item) => (
+                  <li key={item.id}>
+                    <CartItem gift item={item} />
+                  </li>
+                ))}
+              </List>
+            </>
+          )}
+
+          <footer data-fs-cart-sidebar-footer>
+            <OrderSummary
+              subTotal={subTotal}
+              total={total}
+              numberOfItems={totalItems}
+              checkoutButton={
+                <Button
+                  data-fs-cart-sidebar-checkout-button
+                  variant="primary"
+                  icon={
+                    !isValidating && (
+                      <Icon name="ArrowRight" width={18} height={18} />
+                    )
+                  }
+                  iconPosition="right"
+                  {...btnProps}
+                >
+                  {isValidating ? 'Loading...' : 'Checkout'}
+                </Button>
+              }
+            />
+          </footer>
+        </>
+      )}
+    </SlideOver>
+  )
+}
+
+export default CartSidebar

package/src/components/cart/CartSidebar/cart-sidebar.module.scss

@@ -0,0 +1,69 @@
+.fs-cart-sidebar {
+  // --------------------------------------------------------
+  // Design Tokens for Cart Sidebar
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-cart-sidebar-bkg-color                        : var(--fs-color-neutral-bkg);
+
+  // Header
+  --fs-cart-sidebar-header-padding                   : var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-2);
+  --fs-cart-sidebar-header-bkg-color                 : var(--fs-color-neutral-0);
+
+  --fs-cart-sidebar-header-title-margin-right        : var(--fs-spacing-2);
+
+  // List
+  --fs-cart-sidebar-list-padding                     : var(--fs-spacing-3);
+
+  // Footer
+  --fs-cart-sidebar-footer-bkg-color                 : var(--fs-color-neutral-0);
+  --fs-cart-sidebar-footer-box-shadow                : 0 0 6px rgb(0 0 0 / 20%);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+  background-color: var(--fs-cart-sidebar-bkg-color);
+
+  [data-fs-cart-sidebar-header] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--fs-cart-sidebar-header-padding);
+    background-color: var(--fs-cart-sidebar-header-bkg-color);
+  }
+
+  [data-fs-cart-sidebar-close-button] {
+    margin-right: calc(-1 * var(--fs-spacing-1));
+  }
+
+  [data-fs-cart-sidebar-title] {
+    display: flex;
+    align-items: center;
+
+    [data-fs-cart-sidebar-title-text] {
+      margin-right: var(--fs-cart-sidebar-header-title-margin-right);
+    }
+  }
+
+  [data-fs-cart-sidebar-list] {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--fs-spacing-2);
+    padding: var(--fs-cart-sidebar-list-padding);
+    overflow: auto;
+  }
+
+  [data-fs-cart-sidebar-footer] {
+    margin-top: auto;
+    background-color: var(--fs-cart-sidebar-footer-bkg-color);
+    box-shadow: var(--fs-cart-sidebar-footer-box-shadow);
+  }
+
+  [data-fs-cart-sidebar-checkout-button] {
+    width: 100%;
+  }
+}

package/src/components/cart/CartSidebar/index.ts

@@ -0,0 +1 @@
+export { default } from './CartSidebar'