@faststore/core 22.42.6

package/src/components/ui/Toggle/toggle.module.scss

@@ -0,0 +1,200 @@
+@import "src/styles/scaffold";
+
+.fs-toggle[data-fs-toggle] {
+  // --------------------------------------------------------
+  // Design Tokens for Toggle
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-toggle-height                           : calc(var(--fs-control-min-height) / 1.75);
+
+  --fs-toggle-bkg-color                        : var(--fs-control-bkg);
+  --fs-toggle-bkg-color-hover                  : var(--fs-color-primary-bkg-light);
+
+  --fs-toggle-shadow                           : var(--fs-shadow);
+  --fs-toggle-shadow-hover                     : var(--fs-shadow);
+
+  --fs-toggle-border-color                     : var(--fs-border-color);
+  --fs-toggle-border-color-hover               : var(--fs-border-color-hover);
+  --fs-toggle-border-radius                    : var(--fs-border-radius);
+  --fs-toggle-border-width                     : var(--fs-border-width);
+
+  --fs-toggle-transition-timing                : var(--fs-transition-timing);
+  --fs-toggle-transition-property              : var(--fs-transition-property);
+  --fs-toggle-transition-function              : var(--fs-transition-function);
+
+  // Knob
+  --fs-toggle-knob-shadow                      : var(--fs-shadow);
+  --fs-toggle-knob-bkg-color                   : var(--fs-color-primary-bkg);
+  --fs-toggle-knob-bkg-color-hover             : var(--fs-toggle-border-color-hover);
+  --fs-toggle-knob-border-radius               : var(--fs-border-radius-small);
+  --fs-toggle-knob-border-color                : var(--fs-toggle-knob-bkg-color);
+  --fs-toggle-knob-border-color-hover          : var(--fs-toggle-knob-bkg-color-hover);
+  --fs-toggle-knob-border-width                : var(--fs-border-width-thick);
+
+  --fs-toggle-knob-checked-bkg-color           : var(--fs-control-bkg);
+  --fs-toggle-knob-checked-border-color        : var(--fs-toggle-knob-checked-bkg-color);
+
+  --fs-toggle-knob-disabled-bkg-color          : var(--fs-color-neutral-5);
+  --fs-toggle-knob-disabled-border-color       : var(--fs-toggle-knob-disabled-bkg-color);
+
+  // Icon
+  --fs-toggle-knob-icon-color                  : transparent;
+
+  --fs-toggle-knob-icon-checked-color          : var(--fs-toggle-checked-bkg-color);
+  --fs-toggle-knob-icon-checked-color-hover    : var(--fs-toggle-checked-bkg-color-hover);
+
+  --fs-toggle-knob-icon-disabled-color         : var(--fs-toggle-disabled-bkg-color);
+
+  // Checked
+  --fs-toggle-checked-bkg-color                : var(--fs-color-primary-bkg-active);
+  --fs-toggle-checked-bkg-color-hover          : var(--fs-color-primary-bkg-hover);
+  --fs-toggle-checked-border-color             : var(--fs-toggle-checked-bkg-color);
+  --fs-toggle-checked-border-color-hover       : var(--fs-toggle-checked-bkg-color-hover);
+
+  // Disabled
+  --fs-toggle-disabled-bkg-color               : var(--fs-color-disabled-bkg);
+  --fs-toggle-disabled-border-color            : var(--fs-border-color-disabled);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  align-items: center;
+
+  [data-fs-toggle-container] {
+    position: relative;
+    overflow: visible;
+
+    input {
+      @include focus-ring-visible;
+
+      position: absolute;
+      z-index: 1;
+      display: block;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      background-color: var(--fs-toggle-bkg-color);
+      border: var(--fs-toggle-border-width) solid var(--fs-toggle-border-color);
+      border-radius: var(--fs-toggle-border-radius);
+      box-shadow: var(--fs-toggle-shadow);
+      transition: var(--fs-toggle-transition-property) var(--fs-toggle-transition-timing) var(--fs-toggle-transition-function);
+      appearance: none;
+
+      &:checked {
+        background-color: var(--fs-toggle-checked-bkg-color);
+        border: var(--fs-toggle-border-width) solid var(--fs-toggle-checked-border-color);
+
+        + [data-fs-toggle-knob] {
+          color: var(--fs-toggle-knob-icon-checked-color);
+          background-color: var(--fs-toggle-knob-checked-bkg-color);
+          border-color: var(--fs-toggle-knob-checked-border-color);
+        }
+
+        @media (hover: hover) {
+          &:hover:not(:disabled) {
+            background-color: var(--fs-toggle-checked-bkg-color-hover);
+            border: var(--fs-toggle-border-width) solid var(--fs-toggle-checked-border-color-hover);
+
+            + [data-fs-toggle-knob] {
+              color: var(--fs-toggle-knob-icon-checked-color-hover);
+            }
+          }
+        }
+      }
+
+      &:not(:checked) {
+        background-color: var(--fs-toggle-bkg-color);
+        border: var(--fs-toggle-border-width) solid var(--fs-toggle-border-color);
+
+        + [data-fs-toggle-knob] {
+          color: var(--fs-toggle-knob-icon-color);
+          background-color: var(--fs-toggle-knob-bkg-color);
+          border: var(--fs-toggle-border-width) solid var(--fs-toggle-knob-border-color);
+        }
+
+        @media (hover: hover) {
+          &:hover:not(:disabled) {
+            background-color: var(--fs-toggle-bkg-color-hover);
+            border-color: var(--fs-toggle-border-color-hover);
+            box-shadow: var(--fs-toggle-shadow-hover);
+
+            + [data-fs-toggle-knob] {
+              background-color: var(--fs-toggle-knob-bkg-color-hover);
+              border-color: var(--fs-toggle-knob-border-color-hover);
+            }
+          }
+        }
+      }
+
+      &:disabled {
+        pointer-events: none;
+        background-color: var(--fs-toggle-disabled-bkg-color);
+        border-color: var(--fs-toggle-disabled-border-color);
+
+        + [data-fs-toggle-knob] {
+          background-color: var(--fs-toggle-knob-disabled-bkg-color);
+          border-color: var(--fs-toggle-knob-disabled-border-color);
+        }
+
+        &:checked + [data-fs-toggle-knob] {
+          color: var(--fs-toggle-knob-icon-disabled-color);
+        }
+      }
+    }
+
+    [data-fs-toggle-knob] {
+      position: absolute;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      border-radius: var(--fs-toggle-knob-border-radius);
+      box-shadow: var(--fs-toggle-knob-shadow);
+      transition: var(--fs-toggle-transition-property) var(--fs-toggle-transition-timing) var(--fs-toggle-transition-function);
+    }
+  }
+
+  [data-fs-label] {
+    margin-left: var(--fs-spacing-1);
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-toggle-variant="horizontal"] {
+    input:checked + [data-fs-toggle-knob] { left: calc(50% + var(--fs-toggle-border-width)); }
+
+    [data-fs-toggle-container] {
+      min-width: calc(var(--fs-toggle-height) * 1.75);
+      height: var(--fs-toggle-height);
+    }
+
+    [data-fs-toggle-knob] {
+      top: calc(var(--fs-toggle-border-width) * 4);
+      left: calc(var(--fs-toggle-border-width) * 4);
+      width: calc(50% - (var(--fs-toggle-border-width) * 5));
+      height: calc(100% - (var(--fs-toggle-border-width) * 8));
+    }
+  }
+
+  &[data-fs-toggle-variant="vertical"] {
+    input:checked + [data-fs-toggle-knob] { bottom: calc(50% + var(--fs-toggle-border-width)); }
+
+    [data-fs-toggle-container] {
+      min-width: var(--fs-toggle-height);
+      height: calc(var(--fs-toggle-height) * 1.75);
+    }
+
+    [data-fs-toggle-knob] {
+      bottom: calc(var(--fs-toggle-border-width) * 4);
+      left: calc(var(--fs-toggle-border-width) * 4);
+      width: calc(100% - (var(--fs-toggle-border-width) * 8));
+      height: calc(50% - (var(--fs-toggle-border-width) * 5));
+    }
+  }
+}

package/src/constants.ts

@@ -0,0 +1,2 @@
+export const ITEMS_PER_PAGE = 12
+export const ITEMS_PER_SECTION = 5

package/src/fonts/WebFonts.tsx

@@ -0,0 +1,15 @@
+/* eslint-disable @next/next/no-page-custom-font */
+
+function WebFonts() {
+  return (
+    <>
+      {/* Add a <link> tag for your font-family of choice */}
+      {/* <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap"
+      /> */}
+    </>
+  )
+}
+
+export default WebFonts

package/src/pages/404.tsx

@@ -0,0 +1,27 @@
+import { NextSeo } from 'next-seo'
+import { useRouter } from 'next/router'
+
+const useErrorState = () => {
+  const router = useRouter()
+  const { from } = router.query
+  const { pathname } = router
+
+  return {
+    fromUrl: from ?? pathname,
+  }
+}
+
+function Page() {
+  const { fromUrl } = useErrorState()
+
+  return (
+    <>
+      <NextSeo noindex nofollow />
+
+      <h1>Not Found: 404</h1>
+      <div>This app could not find url {fromUrl}</div>
+    </>
+  )
+}
+
+export default Page

package/src/pages/500.tsx

@@ -0,0 +1,31 @@
+import { NextSeo } from 'next-seo'
+import { useRouter } from 'next/router'
+
+const useErrorState = () => {
+  const router = useRouter()
+  const { errorId, fromUrl } = router.query
+
+  return {
+    errorId,
+    fromUrl,
+  }
+}
+
+function Page() {
+  const { errorId, fromUrl } = useErrorState()
+
+  return (
+    <>
+      <NextSeo noindex nofollow />
+
+      <h1>500</h1>
+      <h2>Internal Server Error</h2>
+
+      <div>
+        The server errored with id {errorId} when visiting page {fromUrl}
+      </div>
+    </>
+  )
+}
+
+export default Page

package/src/pages/[...slug].tsx

@@ -0,0 +1,186 @@
+import { isNotFoundError } from '@faststore/api'
+import {
+  formatSearchState,
+  parseSearchState,
+  SearchProvider,
+} from '@faststore/sdk'
+import { gql } from '@faststore/graphql-utils'
+import { BreadcrumbJsonLd, NextSeo } from 'next-seo'
+import { useRouter } from 'next/router'
+import { useMemo } from 'react'
+import type { SearchState } from '@faststore/sdk'
+import type { GetStaticPaths, GetStaticProps } from 'next'
+
+import Breadcrumb from 'src/components/sections/Breadcrumb'
+import Hero from 'src/components/sections/Hero'
+import ProductGallery from 'src/components/sections/ProductGallery'
+import ProductShelf from 'src/components/sections/ProductShelf'
+import ScrollToTopButton from 'src/components/sections/ScrollToTopButton'
+import Icon from 'src/components/ui/Icon'
+import { ITEMS_PER_PAGE, ITEMS_PER_SECTION } from 'src/constants'
+import { useApplySearchState } from 'src/sdk/search/state'
+import { mark } from 'src/sdk/tests/mark'
+import { execute } from 'src/server'
+import type {
+  ServerCollectionPageQueryQuery,
+  ServerCollectionPageQueryQueryVariables,
+} from '@generated/graphql'
+
+import storeConfig from '../../store.config'
+
+type Props = ServerCollectionPageQueryQuery
+
+const useSearchParams = ({ collection }: Props): SearchState => {
+  const selectedFacets = collection?.meta.selectedFacets
+  const { asPath } = useRouter()
+
+  const hrefState = useMemo(() => {
+    const newState = parseSearchState(new URL(asPath, 'http://localhost'))
+
+    // In case we are in an incomplete url
+    if (newState.selectedFacets.length === 0) {
+      newState.selectedFacets = selectedFacets
+    }
+
+    return formatSearchState(newState).href
+  }, [asPath, selectedFacets])
+
+  return useMemo(() => parseSearchState(new URL(hrefState)), [hrefState])
+}
+
+function Page(props: Props) {
+  const { collection } = props
+  const router = useRouter()
+  const applySearchState = useApplySearchState()
+  const searchParams = useSearchParams(props)
+
+  const { page } = searchParams
+  const title = collection?.seo.title ?? storeConfig.seo.title
+  const description = collection?.seo.description ?? storeConfig.seo.title
+  const pageQuery = page !== 0 ? `?page=${page}` : ''
+  const [pathname] = router.asPath.split('?')
+  const canonical = `${storeConfig.storeUrl}${pathname}${pageQuery}`
+
+  return (
+    <SearchProvider
+      onChange={applySearchState}
+      itemsPerPage={ITEMS_PER_PAGE}
+      {...searchParams}
+    >
+      {/* SEO */}
+      <NextSeo
+        title={title}
+        description={description}
+        titleTemplate={storeConfig.seo.titleTemplate}
+        canonical={canonical}
+        openGraph={{
+          type: 'website',
+          title,
+          description,
+        }}
+      />
+      <BreadcrumbJsonLd
+        itemListElements={collection?.breadcrumbList.itemListElement ?? []}
+      />
+
+      {/*
+        WARNING: Do not import or render components from any
+        other folder than '../components/sections' in here.
+
+        This is necessary to keep the integration with the CMS
+        easy and consistent, enabling the change and reorder
+        of elements on this page.
+
+        If needed, wrap your component in a <Section /> component
+        (not the HTML tag) before rendering it here.
+      */}
+      <Breadcrumb
+        breadcrumbList={collection?.breadcrumbList.itemListElement}
+        name={title}
+      />
+
+      <Hero
+        variant="secondary"
+        title={title}
+        subtitle={`All the amazing ${title} from the brands we partner with.`}
+        imageSrc="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
+        imageAlt="Quest 2 Controller on a table"
+        icon={<Icon name="Headphones" width={48} height={48} weight="thin" />}
+      />
+
+      <ProductGallery title={title} />
+
+      <ProductShelf
+        first={ITEMS_PER_SECTION}
+        sort="score_desc"
+        title="You might also like"
+        withDivisor
+      />
+
+      <ScrollToTopButton />
+    </SearchProvider>
+  )
+}
+
+const query = gql`
+  query ServerCollectionPageQuery($slug: String!) {
+    collection(slug: $slug) {
+      seo {
+        title
+        description
+      }
+      breadcrumbList {
+        itemListElement {
+          item
+          name
+          position
+        }
+      }
+      meta {
+        selectedFacets {
+          key
+          value
+        }
+      }
+    }
+  }
+`
+
+export const getStaticProps: GetStaticProps<
+  ServerCollectionPageQueryQuery,
+  { slug: string[] }
+> = async ({ params }) => {
+  const { data, errors = [] } = await execute<
+    ServerCollectionPageQueryQueryVariables,
+    ServerCollectionPageQueryQuery
+  >({
+    variables: { slug: params?.slug.join('/') ?? '' },
+    operationName: query,
+  })
+
+  const notFound = errors.find(isNotFoundError)
+
+  if (notFound) {
+    return {
+      notFound: true,
+    }
+  }
+
+  if (errors.length > 0) {
+    throw errors[0]
+  }
+
+  return {
+    props: data,
+  }
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: [],
+    fallback: 'blocking',
+  }
+}
+
+Page.displayName = 'Page'
+export default mark(Page)

package/src/pages/[slug]/p.tsx

@@ -0,0 +1,209 @@
+import { isNotFoundError } from '@faststore/api'
+import { gql } from '@faststore/graphql-utils'
+import { BreadcrumbJsonLd, NextSeo, ProductJsonLd } from 'next-seo'
+import type { GetStaticPaths, GetStaticProps } from 'next'
+
+import ProductDetails from 'src/components/sections/ProductDetails'
+import ProductShelf from 'src/components/sections/ProductShelf'
+import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNewsletter'
+import { ITEMS_PER_SECTION } from 'src/constants'
+import { useSession } from 'src/sdk/session'
+import { mark } from 'src/sdk/tests/mark'
+import { execute } from 'src/server'
+import type {
+  ServerProductPageQueryQuery,
+  ServerProductPageQueryQueryVariables,
+} from '@generated/graphql'
+
+import storeConfig from '../../../store.config'
+
+type Props = ServerProductPageQueryQuery
+
+function Page({ product }: Props) {
+  const { currency } = useSession()
+  const { seo } = product
+  const title = seo.title || storeConfig.seo.title
+  const description = seo.description || storeConfig.seo.description
+  const canonical = `${storeConfig.storeUrl}${seo.canonical}`
+
+  return (
+    <>
+      {/* SEO */}
+      <NextSeo
+        title={title}
+        description={description}
+        canonical={canonical}
+        openGraph={{
+          type: 'og:product',
+          url: canonical,
+          title,
+          description,
+          images: product.image.map((img) => ({
+            url: img.url,
+            alt: img.alternateName,
+          })),
+        }}
+        additionalMetaTags={[
+          {
+            property: 'product:price:amount',
+            content: product.offers.lowPrice?.toString() ?? undefined,
+          },
+          {
+            property: 'product:price:currency',
+            content: currency.code,
+          },
+        ]}
+      />
+      <BreadcrumbJsonLd
+        itemListElements={product.breadcrumbList.itemListElement}
+      />
+      <ProductJsonLd
+        productName={product.name}
+        description={product.description}
+        brand={product.brand.name}
+        sku={product.sku}
+        gtin={product.gtin}
+        releaseDate={product.releaseDate}
+        images={product.image.map((img) => img.url)} // Somehow, Google does not understand this valid Schema.org schema, so we need to do conversions
+        offersType="AggregateOffer"
+        offers={{
+          ...product.offers,
+          ...product.offers.offers[0],
+          url: canonical,
+        }}
+      />
+
+      {/*
+        WARNING: Do not import or render components from any
+        other folder than '../components/sections' in here.
+
+        This is necessary to keep the integration with the CMS
+        easy and consistent, enabling the change and reorder
+        of elements on this page.
+
+        If needed, wrap your component in a <Section /> component
+        (not the HTML tag) before rendering it here.
+      */}
+
+      <ProductDetails product={product} />
+
+      <ProductShelf
+        first={ITEMS_PER_SECTION}
+        selectedFacets={[
+          { key: 'buy', value: product.isVariantOf.productGroupID },
+        ]}
+        title="People also bought"
+        withDivisor
+      />
+
+      <ProductShelf
+        first={ITEMS_PER_SECTION}
+        selectedFacets={[
+          { key: 'view', value: product.isVariantOf.productGroupID },
+        ]}
+        title="People also view"
+      />
+
+      <BannerNewsletter />
+    </>
+  )
+}
+
+const query = gql`
+  query ServerProductPageQuery($slug: String!) {
+    product(locator: [{ key: "slug", value: $slug }]) {
+      id: productID
+
+      seo {
+        title
+        description
+        canonical
+      }
+
+      brand {
+        name
+      }
+
+      sku
+      gtin
+      name
+      description
+      releaseDate
+
+      breadcrumbList {
+        itemListElement {
+          item
+          name
+          position
+        }
+      }
+
+      image {
+        url
+        alternateName
+      }
+
+      offers {
+        lowPrice
+        highPrice
+        priceCurrency
+        offers {
+          availability
+          price
+          priceValidUntil
+          priceCurrency
+          itemCondition
+          seller {
+            identifier
+          }
+        }
+      }
+
+      isVariantOf {
+        productGroupID
+      }
+
+      ...ProductDetailsFragment_product
+    }
+  }
+`
+
+export const getStaticProps: GetStaticProps<
+  ServerProductPageQueryQuery,
+  { slug: string }
+> = async ({ params }) => {
+  const { data, errors = [] } = await execute<
+    ServerProductPageQueryQueryVariables,
+    ServerProductPageQueryQuery
+  >({
+    variables: { slug: params?.slug ?? '' },
+    operationName: query,
+  })
+
+  const notFound = errors.find(isNotFoundError)
+
+  if (notFound) {
+    return {
+      notFound: true,
+    }
+  }
+
+  if (errors.length > 0) {
+    throw errors[0]
+  }
+
+  return {
+    props: data,
+  }
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: [],
+    fallback: 'blocking',
+  }
+}
+
+Page.displayName = 'Page'
+
+export default mark(Page)