@faststore/core 3.0.112 → 3.0.116

package/.turbo/turbo-build.log

@@ -45,27 +45,27 @@ Warning: Dynamic Content not found for the page: home. Refer to the Dynamic Cont
    Collecting build traces ...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      1.26 kB         148 kB
+┌ ● /                                      1.24 kB         143 kB
 ├   └ css/197e314c5a03eabd.css             740 B
-├   /_app                                  0 B            93.6 kB
-├ ● /[...slug]                             2.81 kB         160 kB
+├   /_app                                  0 B            90.7 kB
+├ ● /[...slug]                             2.79 kB         155 kB
 ├   └ css/e47f1a002bdcf76f.css             2.38 kB
-├ ● /[slug]/p                              10.8 kB         157 kB
+├ ● /[slug]/p                              10.8 kB         152 kB
 ├   └ css/fbd711b9f5abf105.css             9.57 kB
-├ ○ /404                                   1.28 kB         131 kB
-├ ● /500                                   1.29 kB         131 kB
-├ ● /account                               674 B           131 kB
-├ λ /api/graphql                           0 B            93.6 kB
-├ λ /api/health/live                       0 B            93.6 kB
-├ λ /api/health/ready                      0 B            93.6 kB
-├ λ /api/preview                           0 B            93.6 kB
-├ ● /checkout                              660 B           131 kB
-├ ● /login                                 1.4 kB          132 kB
-└ ● /s                                     2.25 kB         160 kB
-+ First Load JS shared by all              96.7 kB
+├ ○ /404                                   1.28 kB         126 kB
+├ ● /500                                   1.29 kB         126 kB
+├ ● /account                               674 B           126 kB
+├ λ /api/graphql                           0 B            90.7 kB
+├ λ /api/health/live                       0 B            90.7 kB
+├ λ /api/health/ready                      0 B            90.7 kB
+├ λ /api/preview                           0 B            90.7 kB
+├ ● /checkout                              660 B           126 kB
+├ ● /login                                 1.4 kB          126 kB
+└ ● /s                                     2.22 kB         154 kB
++ First Load JS shared by all              93.7 kB
   ├ chunks/framework-8e279965036b6169.js   45.4 kB
   ├ chunks/main-029f1328cfee9686.js        33.1 kB
-  ├ chunks/pages/_app-aeb8a1c6bff23375.js  12.8 kB
+  ├ chunks/pages/_app-5d553d859f2f0ef5.js  9.85 kB
   ├ chunks/webpack-8883d8523b03e385.js     2.38 kB
   └ css/ee0556daedda6306.css               3.07 kB
 

package/.turbo/turbo-test.log

@@ -1,10 +1,10 @@
 $ jest
-PASS test/utils/multipleTemplates.test.ts (36.799 s)
-PASS test/server/cms/index.test.ts (37.346 s)
-PASS test/server/index.test.ts (41.202 s)
+PASS test/utils/multipleTemplates.test.ts (36.656 s)
+PASS test/server/cms/index.test.ts (37.261 s)
+PASS test/server/index.test.ts (40.532 s)
 
 Test Suites: 3 passed, 3 total
 Tests:       19 passed, 19 total
 Snapshots:   0 total
-Time:        42.45 s
+Time:        41.708 s
 Ran all test suites.

package/cypress/integration/a11y.test.js

@@ -4,7 +4,6 @@
  * Cypress tests for a11y (accessibility)
  */
 
-import { disabledA11yRules } from '../global'
 import { cypress } from '../../faststore.config'
 
 const { pages } = cypress
@@ -22,7 +21,12 @@ describe('Accessibility tests', () => {
     cy.getById('product-link').should('exist')
 
     cy.injectAxe()
-    cy.checkA11y(null, disabledA11yRules)
+
+    cy.checkA11y(null, {
+      rules: {
+        'aria-allowed-role': { enabled: true },
+      },
+    })
   })
 
   it('checks a11y for product page', () => {
@@ -30,10 +34,14 @@ describe('Accessibility tests', () => {
     cy.waitForHydration()
 
     // Wait for product to be available and page to be interactive
-    cy.getById('buy-button').should('exist')
+    cy.get('[data-testid="buy-button"]').should('exist')
 
     cy.injectAxe()
-    cy.checkA11y(null, disabledA11yRules)
+    cy.checkA11y(null, {
+      rules: {
+        'aria-allowed-role': { enabled: true },
+      },
+    })
   })
 
   it('checks a11y for home page', () => {
@@ -41,6 +49,10 @@ describe('Accessibility tests', () => {
     cy.waitForHydration()
 
     cy.injectAxe()
-    cy.checkA11y(null, disabledA11yRules)
+    cy.checkA11y(null, {
+      rules: {
+        'aria-allowed-role': { enabled: true },
+      },
+    })
   })
 })

package/cypress/integration/analytics.test.js

@@ -4,8 +4,8 @@
  * Cypress tests for testing the Analytics module
  */
 
-import { options } from '../global'
 import { cypress } from '../../faststore.config'
+import { options } from '../global'
 
 const { pages } = cypress
 
@@ -395,7 +395,7 @@ describe('view_cart event', () => {
         ({ event: eventName }) => eventName === 'view_cart'
       )
 
-      expect(event.ecommerce.value).to.equal(950)
+      expect(event.ecommerce.value).to.equal(420)
       expect(event.ecommerce.items.length).to.equal(1)
     })
   })

package/cypress/integration/seo.test.js

@@ -6,8 +6,8 @@
  * TODO: Improve structured data validaton by actually using schema.org's schemas
  */
 
-import { options } from '../global'
 import { cypress, storeUrl } from '../../faststore.config'
+import { options } from '../global'
 
 const { pages } = cypress
 
@@ -88,10 +88,13 @@ describe('Product Page Seo', () => {
       .should(($el) => {
         expect($el.attr('content')).to.eq('index,follow')
       })
+
     cy.get('link[rel="canonical"]')
       .should('exist')
-      .should(($link) => {
-        expect($link.attr('href')).to.eq(`${storeUrl}${pages.pdp}`)
+      .and(($link) => {
+        const href = $link.attr('href')
+        const regex = new RegExp(`^${href.split('/')[0]}`)
+        expect(`${storeUrl}${pages.pdp}`).to.match(regex)
       })
   })
 

package/faststore.config.default.js

@@ -67,7 +67,7 @@ module.exports = {
     server: process.env.BASE_SITE_URL || 'http://localhost:3000',
     pages: {
       home: '/',
-      pdp: '/apple-magic-mouse/p',
+      pdp: '/4k-philips-monitor-99988213/p',
       collection: '/office',
     },
   },
@@ -76,7 +76,7 @@ module.exports = {
   cypress: {
     pages: {
       home: '/',
-      pdp: '/apple-magic-mouse/p',
+      pdp: '/4k-philips-monitor-99988213/p',
       collection: '/office',
       collection_2: '/technology',
       collection_filtered:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.112",
+  "version": "3.0.116",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -43,12 +43,12 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^3.0.110",
-    "@faststore/components": "^3.0.110",
-    "@faststore/graphql-utils": "^3.0.110",
-    "@faststore/lighthouse": "^3.0.110",
-    "@faststore/sdk": "^3.0.110",
-    "@faststore/ui": "^3.0.110",
+    "@faststore/api": "^3.0.116",
+    "@faststore/components": "^3.0.116",
+    "@faststore/graphql-utils": "^3.0.116",
+    "@faststore/lighthouse": "^3.0.116",
+    "@faststore/sdk": "^3.0.116",
+    "@faststore/ui": "^3.0.116",
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/client-preset": "^4.2.6",
     "@graphql-codegen/typescript": "^4.0.7",
@@ -63,7 +63,6 @@
     "@vtex/client-cms": "^0.2.12",
     "@vtex/prettier-config": "1.0.0",
     "autoprefixer": "^10.4.0",
-    "chalk": "^5.2.0",
     "css-loader": "^6.7.1",
     "deepmerge": "^4.3.1",
     "draftjs-to-html": "^0.9.1",
@@ -72,7 +71,6 @@
     "include-media": "^1.4.10",
     "next": "^13.5.6",
     "next-seo": "^6.4.0",
-    "nextjs-progressbar": "^0.0.14",
     "postcss": "^8.4.4",
     "prettier": "^2.2.0",
     "react": "^18.2.0",
@@ -89,7 +87,7 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",
     "@envelop/testing": "^6.0.0",
-    "@faststore/eslint-config": "^3.0.110",
+    "@faststore/eslint-config": "^3.0.116",
     "@lhci/cli": "^0.9.0",
     "@testing-library/cypress": "^10.0.1",
     "@types/cypress": "^1.1.3",
@@ -130,5 +128,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "e2326e5b2410854590d3153af4011080e034ef44"
+  "gitHead": "944909c520a5f2d541354bce0b13b35e1ade9653"
 }

package/src/components/cms/GlobalSections.tsx

@@ -56,7 +56,7 @@ export const getGlobalSectionsData = async (
     const page = cmsData[GLOBAL_SECTIONS_CONTENT_TYPE][0]
 
     if (page) {
-      const pageData = await getPage<PageContentType>({
+      const pageData = getPage<PageContentType>({
         contentType: GLOBAL_SECTIONS_CONTENT_TYPE,
         documentId: page.documentId,
         versionId: page.versionId,
@@ -66,11 +66,11 @@ export const getGlobalSectionsData = async (
     }
   }
 
-  const { sections } = await getPage<PageContentType>({
+  const pageData = getPage<PageContentType>({
     ...(previewData?.contentType === GLOBAL_SECTIONS_CONTENT_TYPE &&
       previewData),
     contentType: GLOBAL_SECTIONS_CONTENT_TYPE,
   })
 
-  return { sections }
+  return pageData
 }

package/src/components/cms/RenderSections.tsx

@@ -1,4 +1,3 @@
-import chalk from 'chalk'
 import { ComponentType, PropsWithChildren, memo, useMemo } from 'react'
 
 import SectionBoundary from './SectionBoundary'
@@ -30,10 +29,8 @@ const RenderSectionsBase = ({ sections = [], components }: Props) => {
 
         if (!Component) {
           // TODO: add a documentation link to help to do this
-          console.info(
-            `${chalk.yellow(
-              'warn'
-            )} - ${name} not found. Add a new component for this section or remove it from the CMS`
+          console.warn(
+            `${name} not found. Add a new component for this section or remove it from the CMS`
           )
 
           return null

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

@@ -2,7 +2,6 @@ import type { PropsWithChildren, ReactNode } from 'react'
 import { useCallback, useState } from 'react'
 
 import { AlertProps as UIAlertProps } from '@faststore/ui'
-import { mark } from 'src/sdk/tests/mark'
 
 import Section from 'src/components/sections/Section/Section'
 import styles from './section.module.scss'
@@ -50,5 +49,4 @@ function Alert({
   )
 }
 
-Alert.displayName = 'Alert'
-export default mark(Alert)
+export default Alert

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

@@ -1,16 +1,19 @@
 import { ReactNode } from 'react'
-import { mark } from 'src/sdk/tests/mark'
 
 interface FooterProps {
   children: ReactNode
 }
 
 export function FooterInfo({ children }: FooterProps) {
-  return <div data-fs-footer-info>{children}</div>
+  return (
+    <section data-fs-footer-info aria-label="Footer Information">
+      {children}
+    </section>
+  )
 }
 
 export function FooterNavigation({ children }: FooterProps) {
-  return <div data-fs-footer-navigation>{children}</div>
+  return <section data-fs-footer-navigation>{children}</section>
 }
 
 export function Footer({ children }: FooterProps) {
@@ -26,5 +29,4 @@ export function Footer({ children }: FooterProps) {
   )
 }
 
-Footer.displayName = 'Footer'
-export default mark(Footer)
+export default Footer

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

@@ -67,7 +67,7 @@ function FooterLinks({ links }: FooterLinksProps) {
       </div>
 
       <div className="hidden-mobile">
-        <nav data-fs-footer-links-columns>
+        <nav data-fs-footer-links-columns aria-label="Footer Links Navigation">
           {links.map(({ sectionTitle, items }) => (
             <div key={sectionTitle}>
               <p data-fs-footer-links-title>{sectionTitle}</p>

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

@@ -13,12 +13,19 @@ type FooterSocialLink = {
 export interface FooterSocialProps {
   title: string
   links: FooterSocialLink[]
+  id?: string
 }
 
-function FooterSocial({ title, links }: FooterSocialProps) {
+function FooterSocial({
+  title,
+  links,
+  id = 'footer-social-title',
+}: FooterSocialProps) {
   return (
-    <section data-fs-footer-social>
-      <p data-fs-footer-social-title>{title}</p>
+    <section data-fs-footer-social aria-labelledby={id}>
+      <p data-fs-footer-social-title id={id}>
+        {title}
+      </p>
       <UIList>
         {links.map(({ icon: { icon }, url }) => (
           <li key={icon}>

package/src/components/navigation/Navbar/Navbar.tsx

@@ -2,8 +2,6 @@ import { useRef, useState, useCallback } from 'react'
 
 import { useUI, useScrollDirection, Icon as UIIcon } from '@faststore/ui'
 
-import { mark } from 'src/sdk/tests/mark'
-
 import type { SearchInputRef } from 'src/components/search/SearchInput'
 import SearchInput from 'src/components/search/SearchInput'
 import NavbarLinks from 'src/components/navigation/NavbarLinks'
@@ -174,5 +172,4 @@ function Navbar({
   )
 }
 
-Navbar.displayName = 'Navbar'
-export default mark(Navbar)
+export default Navbar

package/src/components/navigation/NavbarLinks/NavbarLinks.tsx

@@ -7,7 +7,6 @@ import Link from 'src/components/ui/Link'
 import RegionButton from 'src/components/region/RegionButton'
 import type { NavbarProps } from 'src/components/navigation/Navbar'
 
-import { mark } from 'src/sdk/tests/mark'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 interface NavbarLinksProps extends UINavbarLinksProps {
@@ -52,4 +51,4 @@ function NavbarLinks({
   )
 }
 
-export default mark(NavbarLinks)
+export default NavbarLinks

package/src/components/navigation/NavbarSlider/NavbarSlider.tsx

@@ -5,7 +5,6 @@ import { ButtonSignInFallback } from 'src/components/ui/Button'
 import Link from 'src/components/ui/Link'
 import NavbarLinks from 'src/components/navigation/NavbarLinks'
 import Logo from 'src/components/ui/Logo'
-import { mark } from 'src/sdk/tests/mark'
 
 import type { NavbarProps } from '../Navbar'
 
@@ -73,4 +72,4 @@ function NavbarSlider({
   )
 }
 
-export default mark(NavbarSlider)
+export default NavbarSlider

package/src/components/sections/Incentives/Incentives.tsx

@@ -1,17 +1,19 @@
-import UIIncentives from 'src/components/ui/Incentives/Incentives'
 import type { Incentive } from 'src/components/ui/Incentives'
+import UIIncentives from 'src/components/ui/Incentives/Incentives'
 
 import Section from '../Section'
 import styles from './section.module.scss'
 
 interface Props {
   incentives: Incentive[]
+  label?: string
 }
 
-function Incentives({ incentives }: Props) {
+function Incentives({ incentives, label }: Props) {
   return (
     <Section className={`${styles.section} section-incentives layout__section`}>
-      <UIIncentives incentives={incentives} colored />
+      {/* Leaving label as an empty string isn’t ideal, but it works for now. Ideally, we should receive a label from the CMS to identify which Incentive section we’re referring to. */}
+      <UIIncentives incentives={incentives} colored label={label ?? ''} />
     </Section>
   )
 }

package/src/components/sections/ProductGallery/ProductGallery.tsx

@@ -1,5 +1,3 @@
-import { mark } from '../../../sdk/tests/mark'
-
 import ProductGallery, {
   ProductGalleryProps,
 } from '../../ui/ProductGallery/ProductGallery'
@@ -70,11 +68,8 @@ function ProductGallerySection({
   )
 }
 
-ProductGallerySection.displayName = 'ProductGallery'
-const MarkedProductGallery = mark(ProductGallerySection)
-
 const OverridableProductGallery = getOverridableSection<
-  typeof MarkedProductGallery
->('ProductGallery', MarkedProductGallery, ProductGalleryDefaultComponents)
+  typeof ProductGallerySection
+>('ProductGallery', ProductGallerySection, ProductGalleryDefaultComponents)
 
 export default OverridableProductGallery

package/src/components/ui/Incentives/Incentives.tsx

@@ -1,7 +1,7 @@
 import {
   Icon as UIIcon,
-  List as UIList,
   Incentive as UIIncentive,
+  List as UIList,
 } from '@faststore/ui'
 
 export type Incentive = {
@@ -22,18 +22,24 @@ export interface IncentivesProps {
    * Controls the component's direction.
    */
   variant?: 'horizontal' | 'vertical'
+  /**
+   * Label to identify the incentive list and offer better accessibility
+   */
+  label?: string
 }
 
 function Incentives({
   incentives,
   variant = 'horizontal',
   colored = false,
+  label,
 }: IncentivesProps) {
   return (
-    <div
+    <section
       data-fs-incentives
       data-fs-incentives-colored={colored}
       data-fs-incentives-variant={variant}
+      aria-label={`Incentives List ${label}`}
     >
       <UIList data-fs-content="incentives">
         {incentives.map((incentive, index) => (
@@ -46,7 +52,7 @@ function Incentives({
                 width={32}
                 height={32}
               />
-              <div data-fs-incentive-content>
+              <section data-fs-incentive-content>
                 <p data-fs-incentive-title>{incentive.title}</p>
                 <span data-fs-incentive-description>
                   {incentive.firstLineText}
@@ -56,12 +62,12 @@ function Incentives({
                     {incentive.secondLineText}
                   </span>
                 )}
-              </div>
+              </section>
             </UIIncentive>
           </li>
         ))}
       </UIList>
-    </div>
+    </section>
   )
 }
 

package/src/components/ui/ProductDetails/ProductDetailsSettings.tsx

@@ -9,9 +9,8 @@ import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import Selectors from 'src/components/ui/SkuSelector'
 import AddToCartLoadingSkeleton from './AddToCartLoadingSkeleton'
 
-import { Icon as UIIcon, useUI } from '@faststore/ui'
+import { Icon as UIIcon, Label as UILabel, useUI } from '@faststore/ui'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
-import { Label as UILabel } from '@faststore/ui'
 
 interface ProductDetailsSettingsProps {
   product: ProductDetailsFragment_ProductFragment

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

@@ -7,7 +7,6 @@ import type {
   ServerCollectionPageQueryQuery,
   ServerCollectionPageQueryQueryVariables,
 } from '@generated/graphql'
-import { mark } from 'src/sdk/tests/mark'
 import { execute } from 'src/server'
 
 import { Locator } from '@vtex/client-cms'
@@ -150,5 +149,4 @@ export const getStaticPaths: GetStaticPaths = async () => {
   }
 }
 
-Page.displayName = 'Page'
-export default mark(Page)
+export default Page

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

@@ -22,7 +22,6 @@ import { OverriddenDefaultProductShelf as ProductShelf } from 'src/components/se
 import ProductTiles from 'src/components/sections/ProductTiles'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import { useSession } from 'src/sdk/session'
-import { mark } from 'src/sdk/tests/mark'
 import { execute } from 'src/server'
 
 import storeConfig from 'faststore.config'
@@ -274,6 +273,4 @@ export const getStaticPaths: GetStaticPaths = async () => {
   }
 }
 
-Page.displayName = 'Page'
-
-export default mark(Page)
+export default Page

package/src/pages/_app.tsx

@@ -1,6 +1,5 @@
 import { UIProvider } from '@faststore/ui'
 import type { AppProps } from 'next/app'
-import NextNProgress from 'nextjs-progressbar'
 import Layout from 'src/Layout'
 import AnalyticsHandler from 'src/sdk/analytics'
 import ErrorBoundary from 'src/sdk/error/ErrorBoundary'
@@ -15,12 +14,6 @@ import { DefaultSeo } from 'next-seo'
 function App({ Component, pageProps }: AppProps) {
   return (
     <ErrorBoundary>
-      <NextNProgress
-        color="var(--fs-color-primary-bkg);"
-        showOnShallow={false}
-        options={{ showSpinner: false }}
-      />
-
       <DefaultSeo {...SEO} />
 
       <AnalyticsHandler />

package/src/pages/_document.tsx

@@ -1,4 +1,5 @@
 import { Head, Html, Main, NextScript } from 'next/document'
+import storeConfig from '../../faststore.config'
 
 import ThirdPartyScripts from 'src/components/ThirdPartyScripts'
 import { WebFonts } from 'src/customizations/src/GlobalOverrides'
@@ -7,6 +8,14 @@ function Document() {
   return (
     <Html>
       <Head>
+        <link
+          rel="preconnect"
+          href={`https://${storeConfig.api.storeId}.vtexassets.com`}
+        />
+        <link
+          rel="dns-prefetch"
+          href={`https://${storeConfig.api.storeId}.vtexassets.com`}
+        />
         {!process.env.DISABLE_3P_SCRIPTS && <ThirdPartyScripts />}
         <WebFonts />
       </Head>

package/src/pages/index.tsx

@@ -12,7 +12,6 @@ import { OverriddenDefaultNewsletter as Newsletter } from 'src/components/sectio
 import { OverriddenDefaultProductShelf as ProductShelf } from 'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
 import ProductTiles from 'src/components/sections/ProductTiles'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
-import { mark } from 'src/sdk/tests/mark'
 import type { PageContentType } from 'src/server/cms'
 import { getPage } from 'src/server/cms'
 
@@ -100,36 +99,33 @@ export const getStaticProps: GetStaticProps<
   Record<string, string>,
   Locator
 > = async ({ previewData }) => {
-  const serverData = await getDynamicContent({ pageType: 'home' })
-  const globalSections = await getGlobalSectionsData(previewData)
+  const globalSectionsPromise = getGlobalSectionsData(previewData)
+  const serverDataPromise = getDynamicContent({ pageType: 'home' })
 
+  let cmsPage = null
   if (storeConfig.cms.data) {
     const cmsData = JSON.parse(storeConfig.cms.data)
-    const page = cmsData['home'][0]
-
-    if (page) {
-      const pageData = await getPage<PageContentType>({
+    cmsPage = cmsData['home'][0]
+  }
+  const pagePromise = cmsPage
+    ? getPage<PageContentType>({
         contentType: 'home',
-        documentId: page.documentId,
-        versionId: page.versionId,
+        documentId: cmsPage.documentId,
+        versionId: cmsPage.versionId,
       })
-
-      return {
-        props: { page: pageData, globalSections, serverData },
-      }
-    }
-  }
-
-  const page = await getPage<PageContentType>({
-    ...(previewData?.contentType === 'home' && previewData),
-    contentType: 'home',
-  })
+    : getPage<PageContentType>({
+        ...(previewData?.contentType === 'home' && previewData),
+        contentType: 'home',
+      })
+  const [page, globalSections, serverData] = await Promise.all([
+    pagePromise,
+    globalSectionsPromise,
+    serverDataPromise,
+  ])
 
   return {
     props: { page, globalSections, serverData },
   }
 }
 
-Page.displayName = 'Page'
-
-export default mark(Page)
+export default Page