@faststore/core 2.0.153-alpha.0 → 2.0.154-alpha.0

package/.turbo/turbo-build.log

@@ -16,18 +16,16 @@ info  - Collecting page data...
 info  - Generating static pages (0/7)
 info  - Generating static pages (1/7)
 info  - Generating static pages (3/7)
-warn - CallToAction not found. Add a new component for this section or remove it from the CMS
-warn - IncentivesHeader not found. Add a new component for this section or remove it from the CMS
 info  - Generating static pages (5/7)
 info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      2.97 kB         126 kB
+┌ ● /                                      3.09 kB         126 kB
 ├   └ css/13a4da555ff5e3be.css             7.19 kB
 ├   /_app                                  0 B            77.9 kB
-├ ● /[...slug]                             10 kB           133 kB
-├   └ css/1323734429a8aa40.css             7.9 kB
+├ ● /[...slug]                             10.1 kB         133 kB
+├   └ css/6e41f1b6078c14c1.css             7.9 kB
 ├ ● /[slug]/p                              11.7 kB         135 kB
 ├   └ css/d462d9478ce00021.css             10.9 kB
 ├ ○ /404                                   1.09 kB         113 kB
@@ -42,8 +40,8 @@ Route (pages)                              Size     First Load JS
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-fd466221927468fd.js        23.9 kB
   ├ chunks/pages/_app-3e4e7e579cb0681a.js  6.43 kB
-  ├ chunks/webpack-eb5ed34c93d07fac.js     2.26 kB
-  └ css/bde408cc006e64f8.css               2.82 kB
+  ├ chunks/webpack-90918babbeee4949.js     2.26 kB
+  └ css/47d82dcec9a7dbc2.css               2.78 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
 ○  (Static)  automatically rendered as static HTML (uses no initial props)

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.154-alpha.0](https://github.com/vtex/faststore/compare/v2.0.153-alpha.0...v2.0.154-alpha.0) (2023-05-23)
+
+### Features
+
+- Adjust `ProductShelf` for CMS ([#1766](https://github.com/vtex/faststore/issues/1766)) ([1798536](https://github.com/vtex/faststore/commit/1798536f60a508997616350f0b4ac6c11878dc04))
+
 ## [2.0.153-alpha.0](https://github.com/vtex/faststore/compare/v2.0.152-alpha.0...v2.0.153-alpha.0) (2023-05-23)
 
 ### Features

package/cms/faststore/sections.json

@@ -834,8 +834,8 @@
           ],
           "enumNames": [
             "Discount: higher to lower",
-            "Name: Z-A",
             "Name: A-Z",
+            "Name: Z-A",
             "Orders: higher to lower",
             "Price: lower to higher",
             "Price: higher to lower",
@@ -879,15 +879,10 @@
               "type": "boolean",
               "default": true
             },
-            "showBuyButton": {
-              "title": "Show buy button?",
+            "bordered": {
+              "title": "Cards should be bordered?",
               "type": "boolean",
               "default": true
-            },
-            "buyButtonTitle": {
-              "title": "Buy Button Text",
-              "type": "string",
-              "default": "Buy"
             }
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.153-alpha.0",
+  "version": "2.0.154-alpha.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -29,11 +29,11 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^2.0.140-alpha.0",
+    "@faststore/api": "^2.0.154-alpha.0",
     "@faststore/components": "^2.0.152-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.118-alpha.0",
-    "@faststore/ui": "^2.0.152-alpha.0",
+    "@faststore/ui": "^2.0.154-alpha.0",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -108,5 +108,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "cf054b325389e594cf3bd28559c74f93c16215a7"
+  "gitHead": "f2f4fe80c11a4523ef1dd6827e6c1cf998908c24"
 }

package/src/components/cms/GlobalSections.tsx

@@ -27,41 +27,19 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   ...CUSTOM_COMPONENTS,
 }
 
-const useDividedSections = (sections: Section[]) => {
-  return useMemo(() => {
-    const indexChildren = sections.findIndex(({ name }) => name === 'Children')
-    const hasChildren = indexChildren > -1
-
-    return {
-      hasChildren,
-      firstSections: hasChildren ? sections.slice(0, indexChildren) : sections,
-      ...(hasChildren && { lastSections: sections.slice(indexChildren + 1) }),
-    }
-  }, [sections])
-}
-
 function GlobalSections({
   children,
-  sections,
+  ...otherProps
 }: PropsWithChildren<GlobalSectionsData>) {
-  const { hasChildren, firstSections, lastSections } =
-    useDividedSections(sections)
-
   return (
-    <>
-      <RenderSections sections={firstSections} components={COMPONENTS} />
-
+    <RenderSections components={COMPONENTS} {...otherProps}>
       <Toast />
 
       <main>
         <RegionBar className="display-mobile" />
         {children}
       </main>
-
-      {hasChildren && (
-        <RenderSections sections={lastSections} components={COMPONENTS} />
-      )}
-    </>
+    </RenderSections>
   )
 }
 

package/src/components/cms/RenderSections.tsx

@@ -1,7 +1,8 @@
 import chalk from 'chalk'
-import { ComponentType } from 'react'
+import { ComponentType, PropsWithChildren, useMemo } from 'react'
 
 import SectionBoundary from './SectionBoundary'
+import { Section } from '@vtex/client-cms'
 
 interface Props {
   components: Record<string, ComponentType<any>>
@@ -9,7 +10,20 @@ interface Props {
   context?: unknown
 }
 
-const RenderSections = ({ sections = [], context, components }: Props) => {
+const useDividedSections = (sections: Section[]) => {
+  return useMemo(() => {
+    const indexChildren = sections.findIndex(({ name }) => name === 'Children')
+    const hasChildren = indexChildren > -1
+
+    return {
+      hasChildren,
+      firstSections: hasChildren ? sections.slice(0, indexChildren) : sections,
+      ...(hasChildren && { lastSections: sections.slice(indexChildren + 1) }),
+    }
+  }, [sections])
+}
+
+const RenderSectionsBase = ({ sections = [], context, components }: Props) => {
   return (
     <>
       {sections.map(({ name, data }, index) => {
@@ -36,4 +50,25 @@ const RenderSections = ({ sections = [], context, components }: Props) => {
   )
 }
 
+function RenderSections({
+  children,
+  sections,
+  ...otherProps
+}: PropsWithChildren<Props>) {
+  const { hasChildren, firstSections, lastSections } =
+    useDividedSections(sections)
+
+  return (
+    <>
+      <RenderSectionsBase sections={firstSections} {...otherProps} />
+
+      {children}
+
+      {hasChildren && (
+        <RenderSectionsBase sections={lastSections} {...otherProps} />
+      )}
+    </>
+  )
+}
+
 export default RenderSections

package/src/components/sections/CrossSellingShelf/CrossSellingShelf.tsx

@@ -1,8 +1,10 @@
 import { useMemo } from 'react'
 
 import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
-
-import ProductShelf from '../ProductShelf'
+import UIProductShelf from 'src/components/ui/ProductShelf'
+import { useInView } from 'react-intersection-observer'
+import styles from '../ProductShelf/section.module.scss'
+import Section from '../Section'
 
 interface Props {
   items: number
@@ -12,13 +14,25 @@ interface Props {
 }
 
 const CrossSellingShelf = ({ items, title, context, kind }: Props) => {
+  const { ref, inView } = useInView()
+
   const selectedFacets = useMemo(
     () => [{ key: kind, value: context.isVariantOf.productGroupID }],
     [kind, context.isVariantOf.productGroupID]
   )
 
   return (
-    <ProductShelf first={items} title={title} selectedFacets={selectedFacets} />
+    <Section
+      className={`${styles.section} section-product-shelf layout__section`}
+      ref={ref}
+    >
+      <UIProductShelf
+        inView={inView}
+        first={items}
+        title={title}
+        selectedFacets={selectedFacets}
+      />
+    </Section>
   )
 }
 

package/src/components/sections/ProductShelf/ProductShelf.tsx

@@ -1,91 +1,22 @@
-import { useEffect, useId, useRef } from 'react'
 import { useInView } from 'react-intersection-observer'
-
-import { ProductShelf as UIProductShelf } from '@faststore/ui'
-
-import type { ProductsQueryQueryVariables } from '@generated/graphql'
-import ProductShelfSkeleton from 'src/components/skeletons/ProductShelfSkeleton'
-import { useViewItemListEvent } from 'src/sdk/analytics/hooks/useViewItemListEvent'
-import { useProductsQuery } from 'src/sdk/product/useProductsQuery'
-import { textToKebabCase } from 'src/utils/utilities'
-
-import Carousel from '../../ui/Carousel'
 import Section from '../Section'
-import { Components } from './Overrides'
-const { ProductCard } = Components
 
 import styles from './section.module.scss'
+import ProductShelf, { ProductShelfProps } from 'src/components/ui/ProductShelf'
 
-interface ProductShelfProps extends Partial<ProductsQueryQueryVariables> {
-  title: string
-  withDivisor?: boolean
-}
-
-function ProductShelf({
-  title,
-  withDivisor = false,
-  ...variables
-}: ProductShelfProps) {
-  const titleId = textToKebabCase(title)
-  const id = useId()
-  const viewedOnce = useRef(false)
+function ProductShelfSection({
+  ...otherProps
+}: Omit<ProductShelfProps, 'inView'>) {
   const { ref, inView } = useInView()
-  const products = useProductsQuery(variables)
-  const productEdges = products?.edges ?? []
-  const aspectRatio = 1
-
-  const { sendViewItemListEvent } = useViewItemListEvent({
-    products: productEdges,
-    title,
-    page: 0,
-    pageSize: 0,
-  })
-
-  useEffect(() => {
-    if (inView && !viewedOnce.current && productEdges.length) {
-      sendViewItemListEvent()
-
-      viewedOnce.current = true
-    }
-  }, [inView, productEdges.length, sendViewItemListEvent])
-
-  if (products?.edges.length === 0) {
-    return null
-  }
 
   return (
     <Section
-      className={`${styles.section} section-product-shelf layout__section ${
-        withDivisor ? 'section__divisor' : ''
-      }`}
+      className={`${styles.section} section-product-shelf layout__section`}
       ref={ref}
     >
-      <h2 className="text__title-section layout__content">{title}</h2>
-      <ProductShelfSkeleton
-        aspectRatio={aspectRatio}
-        loading={products === undefined}
-      >
-        <UIProductShelf>
-          <Carousel id={titleId || id}>
-            {productEdges.map((product, idx) => (
-              <ProductCard
-                bordered
-                key={`${product.node.id}`}
-                product={product.node}
-                index={idx + 1}
-                aspectRatio={aspectRatio}
-                imgProps={{
-                  width: 216,
-                  height: 216,
-                  sizes: '(max-width: 768px) 42vw, 30vw',
-                }}
-              />
-            ))}
-          </Carousel>
-        </UIProductShelf>
-      </ProductShelfSkeleton>
+      <ProductShelf inView={inView} {...otherProps} />
     </Section>
   )
 }
 
-export default ProductShelf
+export default ProductShelfSection

package/src/components/sections/Section/section.scss

@@ -7,10 +7,3 @@
     margin-bottom: var(--fs-spacing-3);
   }
 }
-
-.section__divisor {
-  padding-top: var(--fs-spacing-5);
-  border-top: var(--fs-border-width) solid var(--fs-border-color-light);
-
-  @include media(">=notebook") { padding-top: var(--fs-spacing-9); }
-}

package/src/components/{sections → ui}/ProductShelf/Overrides.tsx

@@ -3,8 +3,8 @@ import ProductCard from 'src/components/product/ProductCard'
 import ProductShelfCustomizations from 'src/customizations/components/overrides/ProductShelf'
 
 const Components = {
-    ProductCard,
-    ...ProductShelfCustomizations.components
+  ProductCard,
+  ...ProductShelfCustomizations.components,
 }
 
 export { Components }

package/src/components/ui/ProductShelf/ProductShelf.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useId, useRef } from 'react'
+
+import { ProductShelf as UIProductShelf } from '@faststore/ui'
+
+import ProductShelfSkeleton from 'src/components/skeletons/ProductShelfSkeleton'
+import { useViewItemListEvent } from 'src/sdk/analytics/hooks/useViewItemListEvent'
+import { useProductsQuery } from 'src/sdk/product/useProductsQuery'
+import { textToKebabCase } from 'src/utils/utilities'
+
+import Carousel from '../../ui/Carousel'
+
+import { Components } from 'src/components/ui/ProductShelf/Overrides'
+
+const { ProductCard } = Components
+
+type Sort =
+  | 'discount_desc'
+  | 'name_asc'
+  | 'name_desc'
+  | 'orders_desc'
+  | 'price_asc'
+  | 'price_desc'
+  | 'release_desc'
+  | 'score_desc'
+
+export type ProductShelfProps = {
+  title: string
+  first?: number
+  after?: string
+  sort?: Sort
+  term?: string
+  selectedFacets?: {
+    key: string
+    value: string
+  }[]
+  productCardConfiguration?: {
+    showDiscountBadge: boolean
+    bordered: boolean
+  }
+  inView: boolean
+}
+
+function ProductShelf({
+  title,
+  inView,
+  productCardConfiguration,
+  ...variables
+}: ProductShelfProps) {
+  const titleId = textToKebabCase(title)
+  const id = useId()
+  const viewedOnce = useRef(false)
+  const products = useProductsQuery(variables)
+  const productEdges = products?.edges ?? []
+  const aspectRatio = 1
+
+  const { sendViewItemListEvent } = useViewItemListEvent({
+    products: productEdges,
+    title,
+    page: 0,
+    pageSize: 0,
+  })
+
+  useEffect(() => {
+    if (inView && !viewedOnce.current && productEdges.length) {
+      sendViewItemListEvent()
+
+      viewedOnce.current = true
+    }
+  }, [inView, productEdges.length, sendViewItemListEvent])
+
+  if (products?.edges.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      <h2 className="text__title-section layout__content">{title}</h2>
+      <ProductShelfSkeleton
+        aspectRatio={aspectRatio}
+        loading={products === undefined}
+      >
+        <UIProductShelf>
+          <Carousel id={titleId || id}>
+            {productEdges.map((product, idx) => (
+              <ProductCard
+                bordered={productCardConfiguration?.bordered}
+                showDiscountBadge={productCardConfiguration?.showDiscountBadge}
+                key={`${product.node.id}`}
+                product={product.node}
+                index={idx + 1}
+                aspectRatio={aspectRatio}
+                imgProps={{
+                  width: 216,
+                  height: 216,
+                  sizes: '(max-width: 768px) 42vw, 30vw',
+                }}
+              />
+            ))}
+          </Carousel>
+        </UIProductShelf>
+      </ProductShelfSkeleton>
+    </>
+  )
+}
+
+export default ProductShelf

package/src/components/ui/ProductShelf/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ProductShelf'
+export type { ProductShelfProps } from './ProductShelf'

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

@@ -49,6 +49,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   Breadcrumb,
   Hero,
   ProductGallery,
+  ProductShelf,
   ...CUSTOM_COMPONENTS,
 }
 
@@ -143,13 +144,6 @@ function Page({
           components={COMPONENTS}
         />
 
-        <ProductShelf
-          first={ITEMS_PER_SECTION}
-          sort="score_desc"
-          title="You might also like"
-          withDivisor
-        />
-
         <ScrollToTopButton />
       </SearchProvider>
     </GlobalSections>

package/.next/BUILD_ID

@@ -1 +0,0 @@
-Jdc52lXcDWIk2D0wQ-Z4p

package/.next/build-manifest.json

@@ -1,132 +0,0 @@
-{
-  "polyfillFiles": [
-    "static/chunks/polyfills-c67a75d1b6f99dc8.js"
-  ],
-  "devFiles": [],
-  "ampDevFiles": [],
-  "lowPriorityFiles": [
-    "static/Jdc52lXcDWIk2D0wQ-Z4p/_buildManifest.js",
-    "static/Jdc52lXcDWIk2D0wQ-Z4p/_ssgManifest.js"
-  ],
-  "rootMainFiles": [],
-  "pages": {
-    "/": [
-      "static/chunks/webpack-eb5ed34c93d07fac.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/a13a9f9cd349d906.css",
-      "static/chunks/377-b3616792e1f5f651.js",
-      "static/css/a45618030b16a245.css",
-      "static/chunks/366-c0bfd9890048babf.js",
-      "static/css/13a4da555ff5e3be.css",
-      "static/chunks/pages/index-49b7ee570f7cc4b7.js"
-    ],
-    "/404": [
-      "static/chunks/webpack-eb5ed34c93d07fac.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/a13a9f9cd349d906.css",
-      "static/chunks/377-b3616792e1f5f651.js",
-      "static/css/e02cdad8fc000339.css",
-      "static/chunks/pages/404-459452495a0df278.js"
-    ],
-    "/500": [
-      "static/chunks/webpack-eb5ed34c93d07fac.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/a13a9f9cd349d906.css",
-      "static/chunks/377-b3616792e1f5f651.js",
-      "static/css/e02cdad8fc000339.css",
-      "static/chunks/pages/500-008e30c48eceebed.js"
-    ],
-    "/[...slug]": [
-      "static/chunks/webpack-eb5ed34c93d07fac.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/a13a9f9cd349d906.css",
-      "static/chunks/377-b3616792e1f5f651.js",
-      "static/css/a0feab89b7648c5c.css",
-      "static/chunks/0-0e3914d9fc148f74.js",
-      "static/css/1323734429a8aa40.css",
-      "static/chunks/pages/[...slug]-bd1885159f7dfbba.js"
-    ],
-    "/[slug]/p": [
-      "static/chunks/webpack-eb5ed34c93d07fac.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/a13a9f9cd349d906.css",
-      "static/chunks/377-b3616792e1f5f651.js",
-      "static/css/a45618030b16a245.css",
-      "static/chunks/366-c0bfd9890048babf.js",
-      "static/css/d462d9478ce00021.css",
-      "static/chunks/pages/[slug]/p-fa35dd93d53f75f6.js"
-    ],
-    "/_app": [
-      "static/chunks/webpack-eb5ed34c93d07fac.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/css/bde408cc006e64f8.css",
-      "static/chunks/pages/_app-3e4e7e579cb0681a.js"
-    ],
-    "/_error": [
-      "static/chunks/webpack-eb5ed34c93d07fac.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/pages/_error-a7a0c1d9bfbb4f38.js"
-    ],
-    "/account": [
-      "static/chunks/webpack-eb5ed34c93d07fac.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/a13a9f9cd349d906.css",
-      "static/chunks/377-b3616792e1f5f651.js",
-      "static/chunks/pages/account-46263f0c100c3eae.js"
-    ],
-    "/checkout": [
-      "static/chunks/webpack-eb5ed34c93d07fac.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/a13a9f9cd349d906.css",
-      "static/chunks/377-b3616792e1f5f651.js",
-      "static/chunks/pages/checkout-20bb3710b24df3b6.js"
-    ],
-    "/login": [
-      "static/chunks/webpack-eb5ed34c93d07fac.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/a13a9f9cd349d906.css",
-      "static/chunks/377-b3616792e1f5f651.js",
-      "static/css/e02cdad8fc000339.css",
-      "static/chunks/pages/login-f9d316d261fcc062.js"
-    ],
-    "/s": [
-      "static/chunks/webpack-eb5ed34c93d07fac.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/a13a9f9cd349d906.css",
-      "static/chunks/377-b3616792e1f5f651.js",
-      "static/css/a0feab89b7648c5c.css",
-      "static/chunks/0-0e3914d9fc148f74.js",
-      "static/chunks/pages/s-1cbe740b5b781d28.js"
-    ]
-  },
-  "ampFirstPages": []
-}