@faststore/core 2.0.153-alpha.0 → 2.0.156-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
@@ -41,9 +39,9 @@ Route (pages)                              Size     First Load JS
 + First Load JS shared by all              80.7 kB
   ├ 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/pages/_app-d2e10aaf891151f9.js  6.44 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/@generated/graphql/index.ts

@@ -181,6 +181,8 @@ export type IStoreSelectedFacet = {
 
 /** Session input. */
 export type IStoreSession = {
+  /** Session input address Type. */
+  addressType: InputMaybe<Scalars['String']>
   /** Session input channel. */
   channel: InputMaybe<Scalars['String']>
   /** Session input country. */
@@ -851,6 +853,8 @@ export type StoreSeo = {
 
 /** Session information. */
 export type StoreSession = {
+  /** Session address Type. */
+  addressType: Maybe<Scalars['String']>
   /** Session channel. */
   channel: Maybe<Scalars['String']>
   /** Session country. */
@@ -1323,6 +1327,7 @@ export type ValidateSessionMutation = {
     channel: string | null
     country: string
     postalCode: string | null
+    addressType: string | null
     geoCoordinates: { latitude: number; longitude: number } | null
     currency: { code: string; symbol: string }
     person: {

package/@generated/graphql/persisted.json

@@ -8,6 +8,6 @@
   "ProductsQuery": "query ProductsQuery($first: Int!, $after: String, $sort: StoreSort!, $term: String!, $selectedFacets: [IStoreSelectedFacet!]!) {\n  search(\n    first: $first\n    after: $after\n    sort: $sort\n    term: $term\n    selectedFacets: $selectedFacets\n  ) {\n    products {\n      pageInfo {\n        totalCount\n      }\n      edges {\n        node {\n          id: productID\n          slug\n          sku\n          brand {\n            brandName: name\n            name\n          }\n          name\n          gtin\n          isVariantOf {\n            productGroupID\n            name\n          }\n          image {\n            url\n            alternateName\n          }\n          offers {\n            lowPrice\n            offers {\n              availability\n              price\n              listPrice\n              quantity\n              seller {\n                identifier\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n",
   "SearchSuggestionsQuery": "query SearchSuggestionsQuery($term: String!, $selectedFacets: [IStoreSelectedFacet!]) {\n  search(first: 5, term: $term, selectedFacets: $selectedFacets) {\n    suggestions {\n      terms {\n        value\n      }\n      products {\n        id: productID\n        slug\n        sku\n        brand {\n          brandName: name\n          name\n        }\n        name\n        gtin\n        isVariantOf {\n          productGroupID\n          name\n        }\n        image {\n          url\n          alternateName\n        }\n        offers {\n          lowPrice\n          offers {\n            availability\n            price\n            listPrice\n            quantity\n            seller {\n              identifier\n            }\n          }\n        }\n      }\n    }\n  }\n}\n",
   "TopSearchSuggestionsQuery": "query TopSearchSuggestionsQuery($term: String!, $selectedFacets: [IStoreSelectedFacet!]) {\n  search(first: 5, term: $term, selectedFacets: $selectedFacets) {\n    suggestions {\n      terms {\n        value\n      }\n    }\n  }\n}\n",
-  "ValidateSession": "mutation ValidateSession($session: IStoreSession!, $search: String!) {\n  validateSession(session: $session, search: $search) {\n    locale\n    channel\n    country\n    postalCode\n    geoCoordinates {\n      latitude\n      longitude\n    }\n    currency {\n      code\n      symbol\n    }\n    person {\n      id\n      email\n      givenName\n      familyName\n    }\n  }\n}\n",
+  "ValidateSession": "mutation ValidateSession($session: IStoreSession!, $search: String!) {\n  validateSession(session: $session, search: $search) {\n    locale\n    channel\n    country\n    postalCode\n    addressType\n    geoCoordinates {\n      latitude\n      longitude\n    }\n    currency {\n      code\n      symbol\n    }\n    person {\n      id\n      email\n      givenName\n      familyName\n    }\n  }\n}\n",
   "ShippingSimulationQuery": "query ShippingSimulationQuery($postalCode: String!, $country: String!, $items: [IShippingItem!]!) {\n  shipping(items: $items, postalCode: $postalCode, country: $country) {\n    logisticsInfo {\n      slas {\n        carrier\n        price\n        shippingEstimate\n        localizedEstimates\n      }\n    }\n    address {\n      city\n      neighborhood\n    }\n  }\n}\n"
 }

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.156-alpha.0](https://github.com/vtex/faststore/compare/v2.0.155-alpha.0...v2.0.156-alpha.0) (2023-05-23)
+
+**Note:** Version bump only for package @faststore/core
+
+## [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/faststore.config.js

@@ -29,6 +29,7 @@ module.exports = {
     locale: 'en-US',
     channel: '{"salesChannel":"1","regionId":""}',
     country: 'USA',
+    addressType: null,
     postalCode: null,
     geoCoordinates: null,
     person: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.153-alpha.0",
+  "version": "2.0.156-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.156-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/sdk": "^2.0.156-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": "d24d06c4907a19c8f33cae1812175e393f223340"
 }

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/src/sdk/session/index.ts

@@ -19,6 +19,7 @@ export const mutation = gql`
       channel
       country
       postalCode
+      addressType
       geoCoordinates {
         latitude
         longitude

package/.next/BUILD_ID

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