Merge pull request #2478 from graphcommerce-org/feature/pagebuilder

Added support for pagebuilder package

.changeset/brave-penguins-love.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-cms': patch
+---
+
+Convert home to render the home CmsPage and add page/[…url] route for additional pages.

.changeset/gentle-rules-learn.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-cms': patch
+---
+
+Added support for loading CMS Pages from Magento

.changeset/hip-buckets-raise.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/next-ui': patch
+---
+
+Nesting multiple Containers will not increase the padding, will only be applied once.

.changeset/red-lies-drive.md

@@ -0,0 +1,7 @@
+---
+'@graphcommerce/magento-graphcms': patch
+'@graphcommerce/magento-open-source': patch
+'@graphcommerce/misc': patch
+---
+
+Solve issue where the performanceLink was only activated during production while it should have been during development.

.changeset/silly-tigers-scream.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-category': patch
+---
+
+Move the category fragment to the category prop

.changeset/wicked-carpets-tie.md

@@ -0,0 +1,6 @@
+---
+'@graphcommerce/magento-open-source': patch
+'@graphcommerce/misc': patch
+---
+
+Solve issue where plurals weren't properly defined

examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx

@@ -47,7 +47,7 @@ export const ProductListLayoutClassic = memoDeep((props: ProductListLayoutProps)
           </LayoutTitle>
           <CategoryDescription
             sx={(theme) => ({ textAlign: 'center', mb: theme.spacings.sm })}
-            description={category?.description}
+            category={category}
           />
           <CategoryChildren
             params={params}

examples/magento-graphcms/components/ProductListLayout/ProductListLayoutDefault.tsx

@@ -71,7 +71,7 @@ export const ProductListLayoutDefault = memoDeep((props: ProductListLayoutProps)
               textAlignMd='center'
               textAlignSm='center'
               sx={(theme) => ({ px: theme.page.horizontal })}
-              description={category?.description}
+              category={category}
             />
             <CategoryChildren
               sx={(theme) => ({

examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx

@@ -95,11 +95,7 @@ export const ProductListLayoutSidebar = memoDeep((props: ProductListLayoutProps)
             <>
               <Typography variant='h1'>{title}</Typography>
 
-              <CategoryDescription
-                textAlignMd='start'
-                textAlignSm='start'
-                description={category?.description}
-              />
+              <CategoryDescription textAlignMd='start' textAlignSm='start' category={category} />
               <MediaQuery query={(theme) => theme.breakpoints.down('md')}>
                 <CategoryChildren params={params}>{category?.children}</CategoryChildren>
               </MediaQuery>

examples/magento-graphcms/lib/graphql/graphqlSsrClient.ts

@@ -25,7 +25,7 @@ function client(context: GetStaticPropsContext, fetchPolicy: FetchPolicy = 'no-c
 
   return new ApolloClient({
     link: ApolloLink.from([
-      ...(process.env.NODE_ENV === 'production' ? [measurePerformanceLink] : []),
+      ...(process.env.NODE_ENV !== 'production' ? [measurePerformanceLink] : []),
       errorLink,
       ...config.links,
       new MeshApolloLink(getBuiltMesh()),

examples/magento-graphcms/locales/nl.po

@@ -19,7 +19,7 @@ msgstr "Dit zal al uw gegevens verwijderen, inclusief bestelgeschiedenis en opge
 
 #. js-lingui-generated-id
 msgid "{0, plural, one {<0>{addedItems}</0> has been added to your shopping cart} two {<1>{addedItems}</1> have been added to your shopping cart!} other {# products have been added to your shopping cart!}}"
-msgstr "{0, plural, one {<0>{addedItems}</0> is toegevoegd aan uw winkelwagen} two {<1>{addedItems}</1> is toegevoegd aan uw winkelwagen!} other {# producten zijn toegevoegd aan uw winkelwagen!}}"
+msgstr "{0, plural, one {<0>{addedItems}</0> is toegevoegd aan je winkelwagen} two {<1>{addedItems}</1> zijn toegevoegd aan je winkelwagen!} other {# producten zijn toegevoegd aan je winkelwagen!}}"
 
 #. js-lingui-generated-id
 msgid "I understand that my account will be deleted and this can not be undone."

examples/magento-open-source/components/ProductListLayout/ProductListLayoutClassic.tsx

@@ -47,7 +47,7 @@ export const ProductListLayoutClassic = memoDeep((props: ProductListLayoutProps)
           </LayoutTitle>
           <CategoryDescription
             sx={(theme) => ({ textAlign: 'center', mb: theme.spacings.sm })}
-            description={category?.description}
+            category={category}
           />
           <CategoryChildren
             params={params}

examples/magento-open-source/components/ProductListLayout/ProductListLayoutDefault.tsx

@@ -77,7 +77,7 @@ export const ProductListLayoutDefault = memoDeep((props: ProductListLayoutProps)
               textAlignMd='center'
               textAlignSm='center'
               sx={(theme) => ({ px: theme.page.horizontal })}
-              description={category?.description}
+              category={category}
             />
             <CategoryChildren
               sx={(theme) => ({

examples/magento-open-source/components/ProductListLayout/ProductListLayoutSidebar.tsx

@@ -96,11 +96,7 @@ export const ProductListLayoutSidebar = memoDeep((props: ProductListLayoutProps)
             <>
               <Typography variant='h1'>{title}</Typography>
 
-              <CategoryDescription
-                textAlignMd='start'
-                textAlignSm='start'
-                description={category?.description}
-              />
+              <CategoryDescription textAlignMd='start' textAlignSm='start' category={category} />
               <MediaQuery query={(theme) => theme.breakpoints.down('md')}>
                 <CategoryChildren params={params}>{category?.children}</CategoryChildren>
               </MediaQuery>

examples/magento-open-source/lib/graphql/graphqlSsrClient.ts

@@ -27,7 +27,7 @@ function client(context: GetStaticPropsContext, fetchPolicy: FetchPolicy = 'no-c
 
   return new ApolloClient({
     link: ApolloLink.from([
-      ...(process.env.NODE_ENV === 'production' ? [measurePerformanceLink] : []),
+      ...(process.env.NODE_ENV !== 'production' ? [measurePerformanceLink] : []),
       errorLink,
       ...config.links,
       new MeshApolloLink(getBuiltMesh()),

examples/magento-open-source/locales/it.po

@@ -19,7 +19,7 @@ msgstr "In tal modo verranno rimossi tutti i tuoi dati, inclusa la cronologia de
 
 #. js-lingui-generated-id
 msgid "{0, plural, one {<0>{addedItems}</0> has been added to your shopping cart} two {<1>{addedItems}</1> have been added to your shopping cart!} other {# products have been added to your shopping cart!}}"
-msgstr "{0, plural, one {<0>{addedItems}</0> è stato aggiunto al tuo carrello} two {<1>{addedItems}</1> sono stati aggiunti al tuo carrello!} altro {# prodotti sono stati aggiunti al tuo carrello!}}"
+msgstr "{0, plural, one {<0>{addedItems}</0> è stato aggiunto al tuo carrello} two {<1>{addedItems}</1> sono stati aggiunti al tuo carrello!} other {# prodotti sono stati aggiunti al tuo carrello!}}"
 
 #. js-lingui-generated-id
 msgid "I understand that my account will be deleted and this can not be undone."

examples/magento-open-source/locales/nl.po

@@ -19,7 +19,7 @@ msgstr "Dit zal al uw gegevens verwijderen, inclusief bestelgeschiedenis en opge
 
 #. js-lingui-generated-id
 msgid "{0, plural, one {<0>{addedItems}</0> has been added to your shopping cart} two {<1>{addedItems}</1> have been added to your shopping cart!} other {# products have been added to your shopping cart!}}"
-msgstr "{0, plural, one {<0>{addedItems}</0> is toegevoegd aan je winkelwagen} two {<1>{addedItems}</1> zijn toegevoegd aan je winkelwagen!} andere {# producten zijn toegevoegd aan je winkelwagen!}}"
+msgstr "{0, plural, one {<0>{addedItems}</0> is toegevoegd aan je winkelwagen} two {<1>{addedItems}</1> zijn toegevoegd aan je winkelwagen!} other {# producten zijn toegevoegd aan je winkelwagen!}}"
 
 #. js-lingui-generated-id
 msgid "I understand that my account will be deleted and this can not be undone."

examples/magento-open-source/pages/[...url].tsx

@@ -159,6 +159,7 @@ export const getStaticProps: GetPageStaticProps = async (context) => {
     query: CategoryPageDocument,
     variables: { url },
   })
+
   const layout = staticClient.query({
     query: LayoutDocument,
     fetchPolicy: cacheFirst(staticClient),

examples/magento-open-source/pages/index.tsx

@@ -1,88 +1,33 @@
 import type { PageOptions } from '@graphcommerce/framer-next-pages'
 import { cacheFirst } from '@graphcommerce/graphql'
-import {
-  ProductListDocument,
-  ProductListQuery,
-  ProductPageName,
-} from '@graphcommerce/magento-product'
+import type { CmsPageFragment } from '@graphcommerce/magento-cms'
+import { CmsPageContent, CmsPageDocument } from '@graphcommerce/magento-cms'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import type { GetStaticProps } from '@graphcommerce/next-ui'
-import {
-  breakpointVal,
-  HeroBanner,
-  LayoutHeader,
-  LayoutTitle,
-  MetaRobots,
-  PageMeta,
-} from '@graphcommerce/next-ui'
-import { Button, Container, Typography } from '@mui/material'
+import { Container, isTypename, LayoutHeader, PageMeta } from '@graphcommerce/next-ui'
+import { i18n } from '@lingui/core'
 import type { LayoutNavigationProps } from '../components'
 import { LayoutDocument, LayoutNavigation } from '../components'
 import { graphqlSharedClient, graphqlSsrClient } from '../lib/graphql/graphqlSsrClient'
 
-type Props = {}
-type RouteProps = { url: string }
-type GetPageStaticProps = GetStaticProps<LayoutNavigationProps, Props, RouteProps>
+export type CmsPageProps = { cmsPage: CmsPageFragment | null }
 
-function CmsPage(props: Props) {
-  const {} = props
+type GetPageStaticProps = GetStaticProps<LayoutNavigationProps, CmsPageProps>
 
-  return (
-    <>
-      {/* <PageMeta
-      title={page?.metaTitle ?? page?.title ?? ''}
-      metaDescription={page?.metaDescription ?? ''}
-      metaRobots={page?.metaRobots.toLowerCase().split('_') as MetaRobots[] | undefined}
-      canonical='/'
-    /> */}
+function CmsPage(props: CmsPageProps) {
+  const { cmsPage } = props
 
-      <LayoutHeader floatingMd hideMd={import.meta.graphCommerce.breadcrumbs}>
-        <LayoutTitle size='small' component='span'>
-          Home
-        </LayoutTitle>
-      </LayoutHeader>
+  if (!cmsPage) return <Container>Configure cmsPage home</Container>
 
-      <LayoutHeader floatingMd floatingSm />
+  return (
+    <>
+      <PageMeta
+        title={cmsPage.meta_title || cmsPage.title || i18n._(/* i18n */ 'Home')}
+        metaDescription={cmsPage.meta_description || undefined}
+      />
+      <LayoutHeader floatingMd hideMd={import.meta.graphCommerce.breadcrumbs} floatingSm />
 
-      <HeroBanner
-        pageLinks={
-          <Button href='/men/art' variant='outlined' size='large' color='inherit'>
-            Shop Art
-          </Button>
-        }
-        videoSrc='https://media.graphassets.com/UNmtIZmWSgmnpUAWcAk0'
-        sx={(theme) => ({
-          '& .HeroBanner-copy': {
-            minHeight: { xs: 'min(70vh,600px)', md: 'min(70vh,1080px)' },
-            [theme.breakpoints.up('sm')]: {
-              padding: theme.spacings.xl,
-              justifyItems: 'start',
-              alignContent: 'center',
-              textAlign: 'left',
-              width: '50%',
-            },
-          },
-        })}
-      >
-        <Typography variant='overline' gutterBottom>
-          A journey through creativity
-        </Typography>
-        <Typography
-          variant='h1'
-          sx={(theme) => ({
-            textTransform: 'uppercase',
-            mt: 1,
-            mb: theme.spacings.sm,
-            ...breakpointVal('fontSize', 36, 82, theme.breakpoints.values),
-            '& strong': {
-              WebkitTextFillColor: 'transparent',
-              WebkitTextStroke: '1.2px #fff',
-            },
-          })}
-        >
-          <strong>Discover</strong> beauty beyond boundaries.
-        </Typography>
-      </HeroBanner>
+      <CmsPageContent cmsPage={cmsPage} />
     </>
   )
 }
@@ -95,19 +40,24 @@ export default CmsPage
 
 export const getStaticProps: GetPageStaticProps = async (context) => {
   const client = graphqlSharedClient(context)
+  const conf = client.query({ query: StoreConfigDocument })
   const staticClient = graphqlSsrClient(context)
 
-  const conf = client.query({ query: StoreConfigDocument })
+  const url = (await conf).data.storeConfig?.cms_home_page ?? 'home'
+  const cmsPageQuery = staticClient.query({ query: CmsPageDocument, variables: { url } })
   const layout = staticClient.query({
     query: LayoutDocument,
     fetchPolicy: cacheFirst(staticClient),
   })
+  const cmsPage = (await cmsPageQuery).data.route
 
-  return {
+  const result = {
     props: {
+      cmsPage: cmsPage && isTypename(cmsPage, ['CmsPage']) ? cmsPage : null,
       ...(await layout).data,
       apolloState: await conf.then(() => client.cache.extract()),
     },
     revalidate: 60 * 20,
   }
+  return result
 }

examples/magento-open-source/pages/page/[...url].tsx

@@ -0,0 +1,98 @@
+import type { PageOptions } from '@graphcommerce/framer-next-pages'
+import { cacheFirst } from '@graphcommerce/graphql'
+import { getCategoryStaticPaths } from '@graphcommerce/magento-category'
+import type { CmsPageFragment, CmsPageQuery } from '@graphcommerce/magento-cms'
+import { CmsPageContent, CmsPageDocument } from '@graphcommerce/magento-cms'
+import { PageMeta, redirectOrNotFound, StoreConfigDocument } from '@graphcommerce/magento-store'
+import {
+  Container,
+  isTypename,
+  LayoutHeader,
+  LayoutTitle,
+  type GetStaticProps,
+} from '@graphcommerce/next-ui'
+import type { GetStaticPaths } from 'next'
+import type { LayoutNavigationProps } from '../../components'
+import { LayoutDocument, LayoutNavigation } from '../../components'
+import { graphqlSharedClient, graphqlSsrClient } from '../../lib/graphql/graphqlSsrClient'
+
+export type CmsPageProps = { cmsPage: CmsPageFragment }
+export type CmsRoute = { url: string[] }
+
+type GetPageStaticPaths = GetStaticPaths<CmsRoute>
+type GetPageStaticProps = GetStaticProps<LayoutNavigationProps, CmsPageProps, CmsRoute>
+
+function CmsPage(props: CmsPageProps) {
+  const { cmsPage } = props
+
+  return (
+    <>
+      <PageMeta
+        title={cmsPage.meta_title || cmsPage.title || cmsPage.content_heading || 'Page'}
+        metaDescription={cmsPage.meta_description || undefined}
+      />
+
+      <LayoutHeader floatingMd hideMd={import.meta.graphCommerce.breadcrumbs}>
+        <LayoutTitle size='small' component='span'>
+          {cmsPage.content_heading ?? cmsPage.title}
+        </LayoutTitle>
+      </LayoutHeader>
+
+      {cmsPage.content_heading && (
+        <Container maxWidth={false}>
+          <LayoutTitle variant='h1' gutterTop gutterBottom>
+            {cmsPage.content_heading}
+          </LayoutTitle>
+        </Container>
+      )}
+
+      <CmsPageContent cmsPage={cmsPage} />
+    </>
+  )
+}
+
+const pageOptions: PageOptions<LayoutNavigationProps> = {
+  Layout: LayoutNavigation,
+}
+CmsPage.pageOptions = pageOptions
+
+export default CmsPage
+
+export const getStaticPaths: GetPageStaticPaths = async ({ locales = [] }) => {
+  // Disable getStaticPaths while in development mode
+  if (process.env.NODE_ENV === 'development') return { paths: [], fallback: 'blocking' }
+
+  const path = (locale: string) => getCategoryStaticPaths(graphqlSsrClient({ locale }), locale)
+  const paths = (await Promise.all(locales.map(path))).flat(1)
+  return { paths, fallback: 'blocking' }
+}
+
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const { params, locale } = context
+  const url = params?.url?.join('/') ?? ''
+  if (!url) return { notFound: true }
+
+  const client = graphqlSharedClient(context)
+  const conf = client.query({ query: StoreConfigDocument })
+  const staticClient = graphqlSsrClient(context)
+
+  const cmsPageQuery = staticClient.query({ query: CmsPageDocument, variables: { url } })
+  const layout = staticClient.query({
+    query: LayoutDocument,
+    fetchPolicy: cacheFirst(staticClient),
+  })
+
+  const cmsPage = (await cmsPageQuery).data.route
+  if (!cmsPage || !isTypename(cmsPage, ['CmsPage']))
+    return redirectOrNotFound(staticClient, conf, params, locale)
+
+  const result = {
+    props: {
+      cmsPage,
+      ...(await layout).data,
+      apolloState: await conf.then(() => client.cache.extract()),
+    },
+    revalidate: 60 * 20,
+  }
+  return result
+}