@faststore/core 22.42.6

package/src/components/cart/CartToggle/CartToggle.tsx

@@ -0,0 +1,20 @@
+import Button from 'src/components/ui/Button'
+import Icon from 'src/components/ui/Icon'
+import { useCartToggleButton } from 'src/sdk/cart/useCartToggleButton'
+
+function CartToggle() {
+  const btnProps = useCartToggleButton()
+  const totalItems = btnProps['data-items']
+
+  return (
+    <Button
+      data-fs-cart-toggle
+      counter={totalItems}
+      aria-label={`Cart with ${totalItems} items`}
+      icon={<Icon name="ShoppingCart" width={32} height={32} />}
+      {...btnProps}
+    />
+  )
+}
+
+export default CartToggle

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

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

package/src/components/cart/EmptyCart/EmptyCart.tsx

@@ -0,0 +1,26 @@
+import Button from 'src/components/ui/Button'
+import EmptyState from 'src/components/ui/EmptyState'
+import Icon from 'src/components/ui/Icon'
+
+interface Props {
+  /**
+   * This function is called when `Start Shopping` button is clicked
+   */
+  onDismiss: () => void
+}
+
+function EmptyCart({ onDismiss }: Props) {
+  return (
+    <EmptyState>
+      <header data-fs-empty-state-title>
+        <Icon name="ShoppingCart" width={56} height={56} weight="thin" />
+        <p>Your Cart is empty</p>
+      </header>
+      <Button onClick={onDismiss} variant="secondary">
+        Start Shopping
+      </Button>
+    </EmptyState>
+  )
+}
+
+export default EmptyCart

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

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

package/src/components/cart/OrderSummary/OrderSummary.tsx

@@ -0,0 +1,39 @@
+import { OrderSummary as UIOrderSummary } from '@faststore/ui'
+import type { ReactNode } from 'react'
+
+import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
+
+import styles from './order-summary.module.scss'
+
+interface OrderSummaryProps {
+  subTotal: number
+  total: number
+  numberOfItems: number
+  checkoutButton?: ReactNode
+}
+
+function OrderSummary({
+  subTotal,
+  total,
+  numberOfItems,
+  checkoutButton,
+}: OrderSummaryProps) {
+  const discount = subTotal - total
+  const formattedDiscount = useFormattedPrice(discount)
+
+  return (
+    <div className={styles.fsOrderSummary}>
+      <UIOrderSummary
+        subtotalLabel={`Subtotal (${numberOfItems} products)`}
+        subtotalValue={useFormattedPrice(subTotal)}
+        discountLabel="Discount"
+        discountValue={discount > 0 ? `-${formattedDiscount}` : undefined}
+        totalLabel="Total"
+        totalValue={useFormattedPrice(total)}
+      />
+      {checkoutButton}
+    </div>
+  )
+}
+
+export default OrderSummary

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

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

package/src/components/cart/OrderSummary/order-summary.module.scss

@@ -0,0 +1,22 @@
+.fs-order-summary {
+  padding: var(--fs-spacing-3);
+
+  [data-fs-order-summary] li {
+    display: flex;
+    justify-content: space-between;
+    line-height: 1.5;
+
+    &[data-fs-order-summary-discount] {
+      color: var(--fs-color-success-text);
+    }
+
+    &[data-fs-order-summary-total] {
+      font-size: var(--fs-text-size-3);
+      font-weight: var(--fs-text-weight-bold);
+    }
+
+    &:last-of-type {
+      margin-bottom: var(--fs-spacing-2);
+    }
+  }
+}

package/src/components/cms/RenderPageSections.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { ComponentType } from 'react'
+
+import BannerText from 'src/components/sections/BannerText'
+import Hero from 'src/components/sections/Hero'
+import IncentivesHeader from 'src/components/sections/Incentives/IncentivesHeader'
+import ProductShelf from 'src/components/sections/ProductShelf'
+import ProductTiles from 'src/components/sections/ProductTiles'
+import Newsletter from 'src/components/sections/Newsletter'
+
+import SectionBoundary from './SectionBoundary'
+
+/**
+ * Sections: Components imported from '../components/sections' only.
+ * Do not import or render components from any other folder in here.
+ */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  Hero,
+  BannerText,
+  IncentivesHeader,
+  ProductShelf,
+  ProductTiles,
+  Newsletter,
+}
+
+interface Props {
+  sections?: Array<{ name: string; data: any }>
+}
+
+const RenderPageSections = ({ sections }: Props) => (
+  <>
+    {sections?.map(({ name, data }, index) => {
+      const Component = COMPONENTS[name]
+
+      if (!Component) {
+        console.info(
+          `Could not find component for block ${name}. Add a new component for this block or remove it from the CMS`
+        )
+
+        return <></>
+      }
+
+      return (
+        <SectionBoundary key={`cms-section-${index}`} name={name}>
+          <Component {...data} />
+        </SectionBoundary>
+      )
+    })}
+  </>
+)
+
+export default RenderPageSections

package/src/components/cms/SectionBoundary.tsx

@@ -0,0 +1,34 @@
+import { Component } from 'react'
+import type { ErrorInfo, ReactNode } from 'react'
+
+class SectionBoundary extends Component<{
+  children: ReactNode
+  name: string
+}> {
+  public state = { hasError: false, error: null }
+
+  public static getDerivedStateFromError(error: Error) {
+    return {
+      hasError: true,
+      error,
+    }
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error(
+      `Error while rendering section ${this.props.name} with:\n${error.message} ${errorInfo.componentStack}`
+    )
+
+    // TODO: Add fetch in here so we can know which sections are failing on our dashboard
+  }
+
+  public render() {
+    if (this.state.hasError && process.env.NODE_ENV === 'production') {
+      return null
+    }
+
+    return this.props.children
+  }
+}
+
+export default SectionBoundary

package/src/components/common/Alert/Alert.tsx

@@ -0,0 +1,53 @@
+import { useCallback, useState } from 'react'
+import type { ReactNode, PropsWithChildren } from 'react'
+
+import UIAlert from 'src/components/ui/Alert'
+import { mark } from 'src/sdk/tests/mark'
+import Icon from 'src/components/ui/Icon'
+
+interface Props {
+  icon: string
+  /**
+   * For CMS integration purposes, should be used to pass content through it
+   * instead pass through children
+   */
+  content?: ReactNode
+  link?: {
+    to: string
+    text: string
+  }
+  dismissible: boolean
+}
+function Alert({
+  icon,
+  content,
+  link,
+  dismissible = false,
+  children,
+}: PropsWithChildren<Props>) {
+  const [displayAlert, setDisplayAlert] = useState(true)
+
+  const onAlertClose = useCallback(
+    () => setDisplayAlert(false),
+    [setDisplayAlert]
+  )
+
+  if (displayAlert === false) {
+    return null
+  }
+
+  return (
+    <UIAlert
+      icon={<Icon name={icon} width={24} height={24} />}
+      dismissible={dismissible}
+      onClose={onAlertClose}
+      link={link}
+    >
+      {content ?? children}
+    </UIAlert>
+  )
+}
+
+Alert.displayName = 'Alert'
+
+export default mark(Alert)

package/src/components/common/Alert/index.ts

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

package/src/components/common/Footer/Footer.stories.mdx

@@ -0,0 +1,158 @@
+import {
+  Icon as UIIcon,
+  List as UIList,
+  PaymentMethods as UIPaymentMethods,
+} from '@faststore/ui'
+
+import { Footer } from './Footer'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+  SectionList,
+  SectionItem,
+} from 'src/../.storybook/components'
+
+import IncentivesFooter from '../../sections/Incentives/IncentivesFooter'
+import FooterLinks from './FooterLinks'
+
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+<Meta component={Footer} title="Organisms/Footer" />
+
+export const Template = (args) => {
+  return <Footer {...args} />
+}
+
+<header>
+
+# Footer
+
+The `Footer` is the final section of every page and has all the meaningful links of the store.
+
+</header>
+
+## Overview
+
+Footer section is made with `FooterLinks`, [Incentives](?path=/docs/organisms-incentives--incentives), [Links](?path=/docs/atoms-link--default), [Accordion](?path=/docs/molecules-accordion-overview--default-story), and [PaymentMethods](https://www.faststore.dev/reference/ui/molecules/PaymentMethods) (from FastStore UI).
+
+---
+
+## Usage
+
+`import Footer from 'src/components/common/Footer'`
+
+<Canvas>
+  <Story name="Footer">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Footer" />
+
+<TokenTable>
+  <TokenRow
+    token="--fs-footer-spacing-vertical-mobile"
+    value="var(--fs-spacing-4)"
+  />
+  <TokenRow
+    token="--fs-footer-spacing-vertical-notebook"
+    value="var(--fs-spacing-5)"
+  />
+  <TokenRow
+    token="--fs-footer-spacing-horizontal-notebook"
+    value="var(--fs-grid-gap-3)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-footer-bkg-color"
+    value="var(--fs-color-neutral-bkg)"
+    isColor
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Divisor
+
+<TokenTable>
+  <TokenRow
+    token="--fs-footer-divisor-border-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-footer-divisor-border-color"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+</TokenTable>
+
+### Title
+
+<TokenTable>
+  <TokenRow token="--fs-footer-title-size" value="var(--fs-text-size-body)" />
+  <TokenRow token="--fs-footer-title-line-height" value="1.25" />
+  <TokenRow
+    token="--fs-footer-title-weight"
+    value="var(--fs-text-weight-bold)"
+  />
+  <TokenRow
+    token="--fs-footer-title-margin-bottom"
+    value="var(--fs-spacing-1)"
+  />
+</TokenTable>
+
+### Payment Methods
+
+<TokenTable>
+  <TokenRow
+    token="--fs-footer-payment-methods-flags-border-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-footer-payment-methods-flags-border-color"
+    value="var(--fs-color-neutral-3)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-footer-payment-methods-flags-border-radius"
+    value="var(--fs-border-radius-small)"
+  />
+</TokenTable>
+
+---
+
+## Compound Components
+
+<SectionList>
+  <SectionItem
+    title="Footer Links"
+    description={
+      <>
+        Sitemap listing all the meaningful links of the store. It's the most
+        essential part of the Footer.
+        <br />
+        Additionally, we use the{' '}
+        <a href="../?path=/docs/molecules-accordion-overview--default-story">
+          Accordion
+        </a>{' '}
+        for a better mobile experince.
+      </>
+    }
+  >
+    <FooterLinks />
+  </SectionItem>
+  <SectionItem
+    title="Incentives Footer"
+    description={
+      <>
+        A regular{' '}
+        <a href="../?path=/docs/organisms-incentives--incentives">Incentive</a>{' '}
+        with its own content.
+      </>
+    }
+  >
+    <IncentivesFooter />
+  </SectionItem>
+</SectionList>

package/src/components/common/Footer/Footer.tsx

@@ -0,0 +1,160 @@
+import {
+  List as UIList,
+  PaymentMethods as UIPaymentMethods,
+} from '@faststore/ui'
+
+import Logo from 'src/components/ui/Logo'
+import IncentivesFooter from 'src/components/sections/Incentives/IncentivesFooter'
+import Icon from 'src/components/ui/Icon'
+import Link from 'src/components/ui/Link'
+import SROnly from 'src/components/ui/SROnly'
+import { mark } from 'src/sdk/tests/mark'
+
+import styles from './footer.module.scss'
+import FooterLinks from './FooterLinks'
+
+type FooterProps = {
+  /**
+   * Enables Incentives Section
+   */
+  sectionIncentives?: boolean
+  /**
+   * Enables Social Section
+   */
+  sectionSocial?: boolean
+  /**
+   * Enables Payment Methods Section
+   */
+  sectionPaymentMethods?: boolean
+}
+
+export function Footer({
+  sectionIncentives = true,
+  sectionSocial = true,
+  sectionPaymentMethods = true,
+}: FooterProps) {
+  return (
+    <footer
+      data-fs-footer
+      data-fs-footer-incentives={sectionIncentives}
+      data-fs-footer-social={sectionSocial}
+      data-fs-footer-payment-methods={sectionPaymentMethods}
+      className={`${styles.fsFooter} layout__content-full`}
+    >
+      {sectionIncentives && <IncentivesFooter />}
+
+      <div data-fs-footer-nav className="layout__content">
+        <FooterLinks />
+
+        {sectionSocial && (
+          <section data-fs-footer-social>
+            <p data-fs-footer-title>Follow us</p>
+            <UIList variant="unordered">
+              <li>
+                <Link
+                  variant="footer"
+                  href="https://www.facebook.com/"
+                  title="Facebook"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Icon width="24px" height="24px" name="Facebook" />
+                </Link>
+              </li>
+              <li>
+                <Link
+                  variant="footer"
+                  href="https://www.instagram.com/"
+                  title="Instagram"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Icon width="24px" height="24px" name="Instagram" />
+                </Link>
+              </li>
+              <li>
+                <Link
+                  variant="footer"
+                  href="https://www.pinterest.com/"
+                  title="Pinterest"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Icon width="24px" height="24px" name="Pinterest" />
+                </Link>
+              </li>
+              <li>
+                <Link
+                  variant="footer"
+                  href="https://twitter.com/"
+                  title="Twitter"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Icon width="24px" height="24px" name="Twitter" />
+                </Link>
+              </li>
+            </UIList>
+          </section>
+        )}
+      </div>
+
+      <div data-fs-footer-note className="layout__content">
+        <Logo />
+
+        {sectionPaymentMethods && (
+          <UIPaymentMethods data-fs-footer-payment-methods>
+            <p data-fs-footer-title>Payment Methods</p>
+            <UIList>
+              <li>
+                <Icon width="34px" height="24px" name="Visa" />
+                <SROnly text="Visa" />
+              </li>
+              <li>
+                <Icon width="34px" height="24px" name="Diners" />
+                <SROnly text="Diners Club" />
+              </li>
+              <li>
+                <Icon width="34px" height="24px" name="Mastercard" />
+                <SROnly text="Mastercard" />
+              </li>
+              <li>
+                <Icon width="34px" height="24px" name="EloCard" />
+                <SROnly text="Elo Card" />
+              </li>
+              <li>
+                <Icon width="34px" height="24px" name="PayPal" />
+                <SROnly text="PayPal" />
+              </li>
+              <li>
+                <Icon width="34px" height="24px" name="Stripe" />
+                <SROnly text="Stripe" />
+              </li>
+              <li>
+                <Icon width="34px" height="24px" name="GooglePay" />
+                <SROnly text="Google Pay" />
+              </li>
+              <li>
+                <Icon width="34px" height="24px" name="ApplePay" />
+                <SROnly text="Apple Pay" />
+              </li>
+            </UIList>
+          </UIPaymentMethods>
+        )}
+
+        <div data-fs-footer-copyright className="text__legend">
+          <p>This website uses VTEX technology</p>
+          <p>
+            In-store price may vary. Prices and offers are subject to change.
+            2021 Store name. All rights reserved. Store is a trademark of Store
+            and its affiliated companies.
+          </p>
+          <address>Mount St, 000, New York / NY - 00000.</address>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+Footer.displayName = 'Footer'
+export default mark(Footer)