@faststore/core 2.0.118-alpha.0 → 2.0.121-alpha.0

package/.turbo/turbo-build.log

@@ -13,39 +13,51 @@ info  - Disabled SWC as replacement for Babel because of custom Babel configurat
 info  - Using external babel configuration from /home/runner/work/faststore/faststore/packages/core/.babelrc
 info  - Compiled successfully
 info  - Collecting page data...
-info  - Generating static pages (0/13)
-info  - Generating static pages (3/13)
-info  - Generating static pages (6/13)
-info  - Generating static pages (9/13)
+info  - Generating static pages (0/7)
+warn - Children not found. Add a new component for this section or remove it from the CMS
+warn - Children not found. Add a new component for this section or remove it from the CMS
+info  - Generating static pages (1/7)
+warn - Children not found. Add a new component for this section or remove it from the CMS
+warn - Children not found. Add a new component for this section or remove it from the CMS
+warn - Children not found. Add a new component for this section or remove it from the CMS
+warn - Children not found. Add a new component for this section or remove it from the CMS
+info  - Generating static pages (3/7)
+warn - Children not found. Add a new component for this section or remove it from the CMS
+warn - Children not found. Add a new component for this section or remove it from the CMS
 warn - CallToAction not found. Add a new component for this section or remove it from the CMS
 warn - CallToAction not found. Add a new component for this section or remove it from the CMS
 warn - CallToAction not found. Add a new component for this section or remove it from the CMS
-info  - Generating static pages (13/13)
+warn - Children not found. Add a new component for this section or remove it from the CMS
+warn - Children not found. Add a new component for this section or remove it from the CMS
+info  - Generating static pages (5/7)
+warn - Children not found. Add a new component for this section or remove it from the CMS
+warn - Children not found. Add a new component for this section or remove it from the CMS
+info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      8.65 kB         117 kB
-├   └ css/3a57acf6e411f24d.css             1.69 kB
-├   /_app                                  0 B            96.8 kB
-├ ● /[...slug]                             9.46 kB         122 kB
-├   └ css/1f987650dd4e39d0.css             1.33 kB
-├ ● /[slug]/p                              16.8 kB         125 kB
-├   └ css/4abccf9803c3c356.css             1.82 kB
-├ ○ /404                                   665 B           103 kB
-├ ○ /500                                   439 B           102 kB
-├ ○ /account                               383 B           102 kB
-├ λ /api/graphql                           0 B            96.8 kB
-├ λ /api/preview                           0 B            96.8 kB
-├ ○ /checkout                              371 B           102 kB
-├ ○ /login                                 577 B           103 kB
-└ ○ /s                                     895 B           113 kB
-    └ css/6f4d3e91f1d161a8.css             1.29 kB
-+ First Load JS shared by all              120 kB
+┌ ● /                                      4.05 kB         122 kB
+├   └ css/777fb0b5b1c2fa32.css             2.87 kB
+├   /_app                                  0 B            77.8 kB
+├ ● /[...slug]                             2.29 kB         130 kB
+├   └ css/c302d203b46499ff.css             2.52 kB
+├ ● /[slug]/p                              12.3 kB         131 kB
+├   └ css/384a7a015bca80d6.css             3.01 kB
+├ ○ /404                                   950 B           110 kB
+├ ● /500                                   718 B           110 kB
+├ ● /account                               671 B           110 kB
+├ λ /api/graphql                           0 B            77.8 kB
+├ λ /api/preview                           0 B            77.8 kB
+├ ● /checkout                              659 B           109 kB
+├ ● /login                                 869 B           110 kB
+└ ● /s                                     2.77 kB         121 kB
+    └ css/57c1885d16efdc73.css             2.48 kB
++ First Load JS shared by all              100 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-9746772201fe3ac1.js        23.9 kB
-  ├ chunks/pages/_app-4aeb21d72aeea9b7.js  25.5 kB
-  ├ chunks/webpack-f725b61675603493.js     2.15 kB
-  └ css/502746c995f64cce.css               23.6 kB
+  ├ chunks/pages/_app-c3a2ae2beed7c7e5.js  6.43 kB
+  ├ chunks/webpack-4b9a36060b4c8160.js     2.22 kB
+  └ css/4e34a56a38b0d9d5.css               22.5 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

@@ -91,6 +91,13 @@ export type IStoreCurrency = {
   symbol: Scalars['String']
 }
 
+export type IStoreGeoCoordinates = {
+  /** The latitude of the geographic coordinates. */
+  latitude: Scalars['Float']
+  /** The longitude of the geographic coordinates. */
+  longitude: Scalars['Float']
+}
+
 /** Image input. */
 export type IStoreImage = {
   /** Alias for the input image. */
@@ -180,9 +187,11 @@ export type IStoreSession = {
   country: Scalars['String']
   /** Session input currency. */
   currency: IStoreCurrency
+  /** Session input geoCoordinates. */
+  geoCoordinates: InputMaybe<IStoreGeoCoordinates>
   /** Session input locale. */
   locale: Scalars['String']
-  /** Session input postal code. */
+  /** Session input person. */
   person: InputMaybe<IStorePerson>
   /** Session input postal code. */
   postalCode: InputMaybe<Scalars['String']>
@@ -628,6 +637,14 @@ export type StoreFacetValueRange = {
   selected: Scalars['Float']
 }
 
+/** Geographic coordinates information. */
+export type StoreGeoCoordinates = {
+  /** The latitude of the geographic coordinates. */
+  latitude: Scalars['Float']
+  /** The longitude of the geographic coordinates. */
+  longitude: Scalars['Float']
+}
+
 /** Image. */
 export type StoreImage = {
   /** Alias for the image. */
@@ -840,9 +857,11 @@ export type StoreSession = {
   country: Scalars['String']
   /** Session currency. */
   currency: StoreCurrency
+  /** Session input geoCoordinates. */
+  geoCoordinates: Maybe<StoreGeoCoordinates>
   /** Session locale. */
   locale: Scalars['String']
-  /** Session postal code. */
+  /** Session input person. */
   person: Maybe<StorePerson>
   /** Session postal code. */
   postalCode: Maybe<Scalars['String']>
@@ -1304,6 +1323,7 @@ export type ValidateSessionMutation = {
     channel: string | null
     country: string
     postalCode: string | null
+    geoCoordinates: { latitude: number; longitude: number } | null
     currency: { code: string; symbol: string }
     person: {
       id: string

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    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    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.121-alpha.0](https://github.com/vtex/faststore/compare/v2.0.120-alpha.0...v2.0.121-alpha.0) (2023-04-27)
+
+**Note:** Version bump only for package @faststore/core
+
+## [2.0.120-alpha.0](https://github.com/vtex/faststore/compare/v2.0.119-alpha.0...v2.0.120-alpha.0) (2023-04-27)
+
+### Features
+
+- Integrates Global Sections, with Alert component ([#1722](https://github.com/vtex/faststore/issues/1722)) ([da38b2a](https://github.com/vtex/faststore/commit/da38b2af3db5bd6abd57707d11d67d7463d5fa12))
+
 ## [2.0.118-alpha.0](https://github.com/vtex/faststore/compare/v2.0.117-alpha.0...v2.0.118-alpha.0) (2023-04-26)
 
 **Note:** Version bump only for package @faststore/core

package/cms/faststore/content-types.json

@@ -4,6 +4,12 @@
     "name": "Global Alert Page",
     "configurationSchemaSets": []
   },
+  {
+    "id": "globalSections",
+    "name": "Global Sections",
+    "configurationSchemaSets": [],
+    "isSingleton": true
+  },
   {
     "id": "page",
     "name": "Page",

package/cms/faststore/sections.json

@@ -990,6 +990,14 @@
       }
     }
   },
+  {
+    "name": "Children",
+    "schema": {
+      "title": "Children",
+      "type": "object",
+      "properties": {}
+    }
+  },
   {
     "name": "BannerNewsletter",
     "schema": {

package/faststore.config.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.118-alpha.0",
+  "version": "2.0.121-alpha.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -32,7 +32,7 @@
     "@faststore/api": "^2.0.118-alpha.0",
     "@faststore/components": "^2.0.117-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
-    "@faststore/sdk": "^2.0.3-alpha.0",
+    "@faststore/sdk": "^2.0.118-alpha.0",
     "@faststore/ui": "^2.0.117-alpha.0",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
@@ -108,5 +108,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "e39696d0990df21098a6249c50963690bb2104a2"
+  "gitHead": "2571f06b295c21d4046b26760852d7e87057d5e7"
 }

package/src/Layout.tsx

@@ -1,12 +1,7 @@
 import type { PropsWithChildren } from 'react'
 import { lazy, Suspense } from 'react'
 
-import { Icon, useUI } from '@faststore/ui'
-import Alert from 'src/components/common/Alert'
-import Footer from 'src/components/common/Footer'
-import Navbar from 'src/components/navigation/Navbar'
-import Toast from 'src/components/common/Toast'
-import RegionBar from 'src/components/region/RegionBar'
+import { useUI } from '@faststore/ui'
 
 const CartSidebar = lazy(() => import('src/components/cart/CartSidebar'))
 const RegionModal = lazy(() => import('src/components/region/RegionModal'))
@@ -16,24 +11,7 @@ function Layout({ children }: PropsWithChildren) {
 
   return (
     <>
-      <Alert
-        icon={<Icon name="Bell" />}
-        link={{ children: 'Buy now', href: '/office', target: '_self' }}
-        dismissible
-      >
-        Get 10% off today:&nbsp;<span>NEW10</span>
-      </Alert>
-
-      <Navbar />
-
-      <Toast />
-
-      <main>
-        <RegionBar className="display-mobile" />
-        {children}
-      </main>
-
-      <Footer />
+      {children}
 
       {displayCart && (
         <Suspense fallback={null}>

package/src/components/cms/GlobalSections.tsx

@@ -0,0 +1,81 @@
+import { PropsWithChildren, useMemo } from 'react'
+
+import { Locator, Section } from '@vtex/client-cms'
+import { PageContentType, getPage } from 'src/server/cms'
+import CUSTOM_COMPONENTS from 'src/customizations/components'
+import type { ComponentType } from 'react'
+
+import RenderSections from './RenderSections'
+import { RegionBar } from '@faststore/components'
+import Alert from 'src/components/sections/Alert/Alert'
+import Navbar from 'src/components/navigation/Navbar'
+import Footer from 'src/components/common/Footer'
+import Toast from 'src/components/common/Toast'
+
+// TODO: When the CMS is finished, switch to using 'globalSections'.
+export const GLOBAL_SECTIONS_CONTENT_TYPE = 'globalAlert'
+
+export type GlobalSectionsData = {
+  sections: Section[]
+}
+
+/* A list of components that can be used in the CMS. */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  Alert,
+  ...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,
+}: PropsWithChildren<GlobalSectionsData>) {
+  const { hasChildren, firstSections, lastSections } =
+    useDividedSections(sections)
+
+  return (
+    <>
+      <RenderSections sections={firstSections} components={COMPONENTS} />
+      <Navbar />
+
+      <Toast />
+
+      <main>
+        <RegionBar className="display-mobile" />
+        {children}
+      </main>
+
+      <Footer />
+      {hasChildren && (
+        <RenderSections sections={lastSections} components={COMPONENTS} />
+      )}
+    </>
+  )
+}
+
+export default GlobalSections
+
+export const getGlobalSectionsData = async (
+  previewData: Locator
+): Promise<GlobalSectionsData> => {
+  const { sections } = await getPage<PageContentType>({
+    ...(previewData?.contentType === GLOBAL_SECTIONS_CONTENT_TYPE
+      ? previewData
+      : { filters: { 'settings.seo.slug': '/' } }),
+    contentType: GLOBAL_SECTIONS_CONTENT_TYPE,
+  })
+
+  return { sections }
+}

package/src/components/cms/RenderSections.tsx

@@ -0,0 +1,39 @@
+import chalk from 'chalk'
+import { ComponentType, PropsWithChildren, ReactNode, useMemo } from 'react'
+
+import SectionBoundary from './SectionBoundary'
+
+interface Props {
+  components: Record<string, ComponentType<any>>
+  sections: Array<{ name: string; data: any }>
+  context?: unknown
+}
+
+const RenderSections = ({ sections = [], context, components }: Props) => {
+  return (
+    <>
+      {sections.map(({ name, data }, index) => {
+        const Component = components[name]
+
+        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`
+          )
+
+          return null
+        }
+
+        return (
+          <SectionBoundary key={`cms-section-${index}`} name={name}>
+            <Component {...data} context={context} />
+          </SectionBoundary>
+        )
+      })}
+    </>
+  )
+}
+
+export default RenderSections

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

@@ -1,17 +1,21 @@
 import type { PropsWithChildren, ReactNode } from 'react'
 import { useCallback, useState } from 'react'
 
-import { Alert as UIAlert, AlertProps } from '@faststore/ui'
+import { Alert as UIAlert, AlertProps as UIAlertProps } from '@faststore/ui'
 import { mark } from 'src/sdk/tests/mark'
 
-interface Props extends AlertProps {
+export interface AlertProps extends UIAlertProps {
   /**
    * For CMS integration purposes, should be used to pass content through it
    * instead pass through children
    */
   content?: ReactNode
 }
-function Alert(args: PropsWithChildren<Props>) {
+function Alert({
+  content,
+  children,
+  ...otherProps
+}: PropsWithChildren<AlertProps>) {
   const [displayAlert, setDisplayAlert] = useState(true)
 
   const onAlertClose = useCallback(
@@ -23,8 +27,6 @@ function Alert(args: PropsWithChildren<Props>) {
     return null
   }
 
-  const { content, children, ...otherProps } = args
-
   return (
     <UIAlert onClose={onAlertClose} {...otherProps}>
       {content ?? children}

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

@@ -1 +1,2 @@
 export { default } from './Alert'
+export type { AlertProps } from './Alert'

package/src/components/sections/Alert/Alert.tsx

@@ -0,0 +1,28 @@
+import { Icon as UIIcon } from '@faststore/ui'
+import Section from '../Section'
+import UIAlert from 'src/components/common/Alert'
+
+export interface AlertProps {
+  icon: string
+  content: string
+  link: {
+    text: string
+    to: string
+  }
+  dismissible: boolean
+}
+
+// TODO: Change actionPath and actionLabel with Link
+function Alert({ icon, content, link, dismissible }: AlertProps) {
+  return (
+    <UIAlert
+      icon={<UIIcon name={icon} />}
+      link={{ children: link?.text, href: link?.to, target: '_self' }}
+      dismissible={dismissible}
+    >
+      {content}
+    </UIAlert>
+  )
+}
+
+export default Alert

package/src/pages/404.tsx

@@ -1,6 +1,12 @@
 import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
 import { EmptyState as UIEmptyState, Icon as UIIcon } from '@faststore/ui'
+import GlobalSections, {
+  GlobalSectionsData,
+  getGlobalSectionsData,
+} from 'src/components/cms/GlobalSections'
+import { GetStaticProps } from 'next'
+import { Locator } from '@vtex/client-cms'
 
 const useErrorState = () => {
   const router = useRouter()
@@ -12,11 +18,15 @@ const useErrorState = () => {
   }
 }
 
-function Page() {
+type Props = {
+  globalSections: GlobalSectionsData
+}
+
+function Page({ globalSections }: Props) {
   const { fromUrl } = useErrorState()
 
   return (
-    <>
+    <GlobalSections {...globalSections}>
       <NextSeo noindex nofollow />
 
       <UIEmptyState
@@ -33,8 +43,20 @@ function Page() {
       >
         <p>This app could not find url {fromUrl}</p>
       </UIEmptyState>
-    </>
+    </GlobalSections>
   )
 }
 
+export const getStaticProps: GetStaticProps<
+  Props,
+  Record<string, string>,
+  Locator
+> = async ({ previewData }) => {
+  const globalSections = await getGlobalSectionsData(previewData)
+
+  return {
+    props: { globalSections },
+  }
+}
+
 export default Page

package/src/pages/500.tsx

@@ -1,5 +1,15 @@
+import { Locator } from '@vtex/client-cms'
+import { GetStaticProps } from 'next'
 import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
+import GlobalSections, {
+  GlobalSectionsData,
+  getGlobalSectionsData,
+} from 'src/components/cms/GlobalSections'
+
+type Props = {
+  globalSections: GlobalSectionsData
+}
 
 const useErrorState = () => {
   const router = useRouter()
@@ -11,11 +21,11 @@ const useErrorState = () => {
   }
 }
 
-function Page() {
+function Page({ globalSections }: Props) {
   const { errorId, fromUrl } = useErrorState()
 
   return (
-    <>
+    <GlobalSections {...globalSections}>
       <NextSeo noindex nofollow />
 
       <h1>500</h1>
@@ -24,8 +34,20 @@ function Page() {
       <div>
         The server errored with id {errorId} when visiting page {fromUrl}
       </div>
-    </>
+    </GlobalSections>
   )
 }
 
+export const getStaticProps: GetStaticProps<
+  Props,
+  Record<string, string>,
+  Locator
+> = async ({ previewData }) => {
+  const globalSections = await getGlobalSectionsData(previewData)
+
+  return {
+    props: { globalSections },
+  }
+}
+
 export default Page