feat: wip

Author: pedromtec

packages/cli/src/utils/createNextjsPage.ts

@@ -4,36 +4,70 @@ import fs from 'fs'
 import { withBasePath } from './directory'
 import { myAccountPageTemplate } from './templates/myAccountPage'
 
-const processExternalPages = (
-  externalPagesPath: string,
-  corePagesPath: string
-) => {
-  fs.readdirSync(externalPagesPath).forEach((file) => {
-    const filePath = path.join(externalPagesPath, file)
-    const destinationPath = path.join(corePagesPath, file)
+const ALLOWED_PREFIX_PAGES = ['/account']
 
+const createExternalPages = (
+  customizationPagesDir: string,
+  corePagesDir: string,
+  baseCustomizationPagesDir: string,
+  template: (pagePath: string) => string
+) => {
+  fs.readdirSync(customizationPagesDir).forEach((file) => {
+    console.log(customizationPagesDir)
+    const filePath = path.join(customizationPagesDir, file)
+    const destinationPath = path.join(corePagesDir, file)
+    console.log({ filePath, destinationPath })
     if (fs.statSync(filePath).isDirectory()) {
-      // nested pages are not allowed
-      throw new Error('Nested pages are not allowed')
+      if (!fs.existsSync(destinationPath)) {
+        fs.mkdirSync(destinationPath, { recursive: true })
+      }
+      return createExternalPages(
+        filePath,
+        destinationPath,
+        baseCustomizationPagesDir,
+        template
+      )
     }
 
-    const externalPagePath = `customizations/src/${filePath.replace(externalPagesPath, '')}`
-    console.log({ externalPagePath })
-    const content = myAccountPageTemplate(externalPagePath)
-    fs.writeFileSync(destinationPath, content)
+    if (file.endsWith('.tsx')) {
+      const externalPagePath = `src/customizations/src/pages${filePath.replace(baseCustomizationPagesDir, '').replace('.tsx', '')}`
+      console.log({ externalPagePath })
+      const content = template(externalPagePath)
+      fs.writeFileSync(destinationPath, content)
+    }
   })
 }
 
+function isAllowedPrefixPage(file: string) {
+  console.log({ file })
+  return ALLOWED_PREFIX_PAGES.some((prefix) => file.startsWith(prefix))
+}
+
 export function createNextJsPages(basePath: string) {
   const { tmpDir } = withBasePath(basePath)
 
-  const corePagesDir = path.join(tmpDir, 'src/pages')
+  const corePagesDir = path.join(tmpDir, 'src/pages') // .faststore/src/pages
   const customizationPagesDir = path.join(
     tmpDir,
     'src/customizations/src/pages'
-  )
+  ) // .faststore/src/customizations/src/pages
+
+  const allPagesAreAllowed = fs
+    .readdirSync(customizationPagesDir)
+    .every((filePath) => isAllowedPrefixPage(path.join('/', filePath)))
+
+  if (!allPagesAreAllowed) {
+    throw new Error(
+      `Only these prefix pages: (${ALLOWED_PREFIX_PAGES.join(', ')}) are allowed`
+    )
+  }
 
   console.log({ corePagesDir, customizationPagesDir })
 
-  processExternalPages(customizationPagesDir, corePagesDir)
+  createExternalPages(
+    customizationPagesDir,
+    corePagesDir,
+    customizationPagesDir,
+    myAccountPageTemplate
+  )
 }

packages/cli/src/utils/generate.ts

@@ -210,6 +210,7 @@ function copyUserStarterToCustomizations(basePath: string) {
   try {
     if (existsSync(userSrcDir) && readdirSync(userSrcDir).length > 0) {
       copySync(userSrcDir, tmpCustomizationsSrcDir, { dereference: true })
+      createNextJsPages(basePath)
     }
 
     if (existsSync(userStoreConfigFile)) {
@@ -532,7 +533,6 @@ export async function generate(options: GenerateOptions) {
 
   await Promise.all([
     setupPromise,
-    createNextJsPages(basePath),
     checkDependencies(basePath, ['typescript']),
     enableSearchSSR(basePath),
     updateBuildTime(basePath),

packages/cli/src/utils/templates/myAccountPage.ts

@@ -1,42 +1,33 @@
 export const myAccountPageTemplate = (pagePath: string) => `
-  import type { Locator } from '@vtex/client-cms'
-  import type { GetServerSideProps } from 'next'
   import type { ComponentType } from 'react'
-  import {
-    type GlobalSectionsData,
-    getGlobalSectionsData,
-  } from 'src/components/cms/GlobalSections'
   import RenderSections from 'src/components/cms/RenderSections'
   import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
   import CUSTOM_COMPONENTS from 'src/customizations/src/components'
-  import dynamicPage from '${pagePath}';
-  type Props = {
-    globalSections: GlobalSectionsData
-  }
+  import {
+    getServerSideProps,
+    type MyAccountProps,
+  } from 'src/experimental/myAccountSeverSideProps'
+  import type DynamicPage from '${pagePath}';
   /* A list of components that can be used in the CMS. */
   const COMPONENTS: Record<string, ComponentType<any>> = {
     ...GLOBAL_COMPONENTS,
     ...CUSTOM_COMPONENTS,
   }
-  function Page({ globalSections }: Props) {
+
+  function Page({ globalSections }: MyAccountProps) {
+
     return (
       <RenderSections
         globalSections={globalSections.sections}
         components={COMPONENTS}
       >
-      {dynamicPage()}
+        <DynamicPage />
       </RenderSections>
     )
   }
-  export const getServerSideProps: GetServerSideProps<
-    Props,
-    Record<string, string>,
-    Locator
-  > = async ({ previewData }) => {
-    const globalSections = await getGlobalSectionsData(previewData)
-    return {
-      props: { globalSections },
-    }
-  }
+
+  export { getServerSideProps }
+
   export default Page
+
 `

packages/core/src/experimental/myAccountSeverSideProps.ts

@@ -0,0 +1,42 @@
+import type { Locator } from '@vtex/client-cms'
+import type { GetServerSideProps } from 'next'
+
+import {
+  type GlobalSectionsData,
+  getGlobalSectionsData,
+} from 'src/components/cms/GlobalSections'
+
+import { injectGlobalSections } from 'src/server/cms/global'
+
+export type MyAccountProps = {
+  globalSections: GlobalSectionsData
+}
+
+export const getServerSideProps: GetServerSideProps<
+  MyAccountProps,
+  Record<string, string>,
+  Locator
+> = async ({ previewData }) => {
+  const [
+    globalSectionsPromise,
+    globalSectionsHeaderPromise,
+    globalSectionsFooterPromise,
+  ] = getGlobalSectionsData(previewData)
+
+  const [globalSections, globalSectionsHeader, globalSectionsFooter] =
+    await Promise.all([
+      globalSectionsPromise,
+      globalSectionsHeaderPromise,
+      globalSectionsFooterPromise,
+    ])
+
+  const globalSectionsResult = injectGlobalSections({
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  })
+
+  return {
+    props: { globalSections: globalSectionsResult },
+  }
+}

packages/core/src/pages/account.tsx

@@ -0,0 +1,38 @@
+import { NextSeo } from 'next-seo'
+import type { ComponentType } from 'react'
+import { useEffect } from 'react'
+import RenderSections from 'src/components/cms/RenderSections'
+import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
+import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+import storeConfig from 'discovery.config'
+import {
+  getServerSideProps,
+  type MyAccountProps,
+} from 'src/experimental/myAccountSeverSideProps'
+
+/* A list of components that can be used in the CMS. */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
+  ...CUSTOM_COMPONENTS,
+}
+
+function Page({ globalSections }: MyAccountProps) {
+  useEffect(() => {
+    window.location.href = `${storeConfig.accountUrl}${window.location.search}`
+  }, [])
+
+  return (
+    <RenderSections
+      globalSections={globalSections.sections}
+      components={COMPONENTS}
+    >
+      <NextSeo noindex nofollow />
+
+      <div>loading...</div>
+    </RenderSections>
+  )
+}
+
+export { getServerSideProps }
+
+export default Page