update: refactor construct json file to map with each router with component

src/app/[countryCode]/(main)/layout.tsx

@@ -5,8 +5,8 @@ import { retrieveCustomer } from "@lib/data/customer"
 import { getBaseURL } from "@lib/util/env"
 import { StoreCartShippingOption } from "@medusajs/types"
 import { DynamicLayoutRenderer } from "../../../vibentec/renderer"
-import { LayoutContext, LayoutComponentNode,  } from "../../../vibentec/component-map"
-import { loadDesignConfig } from "vibentec/configloader"
+import { LayoutContext, LayoutComponentNode } from "../../../vibentec/component-map"
+import { loadLayoutConfig } from "vibentec/configloader"
 
 import { getRegion } from "@lib/data/regions"
 
@@ -31,7 +31,7 @@ export default async function PageLayout(props: {
     shippingOptions = shipping_options
   }
 
-  const nodes: LayoutComponentNode[] = await loadDesignConfig()
+  const nodes: LayoutComponentNode[] = await loadLayoutConfig()
   const context: LayoutContext = {
     customer,
     cart,

src/app/[countryCode]/(main)/page.tsx

@@ -5,6 +5,9 @@ import Hero from "@modules/home/components/hero"
 import { listCollections } from "@lib/data/collections"
 import { getRegion } from "@lib/data/regions"
 import VtFeaturedProducts from "@modules/home/components/vt-featured-products"
+import { DynamicLayoutRenderer } from "@vibentec/renderer"
+import { LayoutContext, LayoutComponentNode } from "@vibentec/component-map"
+import { loadPageConfig } from "@vibentec/configloader"
 
 export const metadata: Metadata = {
   title: "Medusa Next.js Starter Template",
@@ -30,14 +33,20 @@ export default async function Home(props: {
   if (!collections || !region) {
     return null
   }
-  return (
-    <>
-      {/* <Hero /> */}
-      {/* <div className="py-12">
-        <ul className="flex flex-col gap-x-6">
-          <VtFeaturedProducts collections={collections} region={region} countryCode={countryCode} />
-        </ul>
-      </div> */}
-    </>
-  )
+  const nodes: LayoutComponentNode[] = await loadPageConfig("Home")
+
+  if (!region) {
+    return null
+  }
+
+  const context: LayoutContext = {
+    customer: null,
+    cart: null,
+    shippingOptions: [],
+    contentChildren: null,
+    countryCode,
+    region,
+  }
+
+  return <DynamicLayoutRenderer nodes={nodes} context={context} />
 }

src/app/[countryCode]/(main)/products/[handle]/page.tsx

@@ -3,6 +3,9 @@ import { notFound } from "next/navigation"
 import { listProducts } from "@lib/data/products"
 import { getRegion, listRegions } from "@lib/data/regions"
 import ProductTemplate from "@modules/products/templates"
+import { DynamicLayoutRenderer } from "@vibentec/renderer"
+import { LayoutContext, LayoutComponentNode } from "@vibentec/component-map"
+import { loadPageConfig } from "@vibentec/configloader"
 
 type Props = {
   params: Promise<{ countryCode: string; handle: string }>
@@ -96,11 +99,25 @@ export default async function ProductPage(props: Props) {
     notFound()
   }
 
+  const nodes: LayoutComponentNode[] = await loadPageConfig("Product")
+
+  const context: LayoutContext = {
+    customer: null,
+    cart: null,
+    shippingOptions: [],
+    contentChildren: null,
+    countryCode: params.countryCode,
+    region,
+  }
+
   return (
-    <ProductTemplate
-      product={pricedProduct}
-      region={region}
-      countryCode={params.countryCode}
-    />
+    <>
+      <ProductTemplate
+        product={pricedProduct}
+        region={region}
+        countryCode={params.countryCode}
+      />
+      <DynamicLayoutRenderer nodes={nodes} context={context} />
+    </>
   )
 }

src/app/[countryCode]/(main)/store/page.tsx

@@ -2,6 +2,10 @@ import { Metadata } from "next"
 
 import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
 import StoreTemplate from "@modules/store/templates"
+import { LayoutComponentNode, LayoutContext } from "@vibentec/component-map"
+import { getRegion } from "@lib/data/regions"
+import { loadPageConfig } from "@vibentec/configloader"
+import { DynamicLayoutRenderer } from "@vibentec/renderer"
 
 export const metadata: Metadata = {
   title: "Store",
@@ -19,15 +23,28 @@ type Params = {
 }
 
 export default async function StorePage(props: Params) {
-  const params = await props.params;
-  const searchParams = await props.searchParams;
+  const params = await props.params
+  const searchParams = await props.searchParams
+  const region = await getRegion(params.countryCode)
   const { sortBy, page } = searchParams
+  const nodes: LayoutComponentNode[] = await loadPageConfig("Store")
 
+  const context: LayoutContext = {
+    customer: null,
+    cart: null,
+    shippingOptions: [],
+    contentChildren: null,
+    countryCode: params.countryCode,
+    region,
+  }
   return (
-    <StoreTemplate
-      sortBy={sortBy}
-      page={page}
-      countryCode={params.countryCode}
-    />
+    <>
+      <StoreTemplate
+        sortBy={sortBy}
+        page={page}
+        countryCode={params.countryCode}
+      />
+      <DynamicLayoutRenderer nodes={nodes} context={context} />
+    </>
   )
 }